/* ===========================
   Reset & Basics
=========================== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #222;
  background: #fff;
  font-size: 16px;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ===========================
   Global Container
=========================== */
main, .content, .page, .site-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Headings */
h1, h2, h3, h4 { margin: 1.2rem 0 .6rem; }
.content > h1, main > h1, h1.page-title {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-top: .75rem;
}
.content > h2, main > h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.25; }
.content > h3, main > h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; }

/* ===========================
   Header
=========================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 60px;
}

/* Header-Logo deckeln */
.site-header .logo {
  height: 52px !important;
  width: auto !important;
  display: block;
}

/* Nav */
.main-nav { display: flex; align-items: center; gap: .25rem .75rem; flex-wrap: wrap; }
.main-nav a {
  margin: 0 .75rem;
  padding: .5rem .25rem;
  text-decoration: none;
  color: #222;
  font-weight: 500;
  border-radius: 8px;
}
.main-nav a:hover { text-decoration: underline; }

/* ===========================
   Cards / Image frames
=========================== */
.img-frame{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px;
  background: #f6f7f9;
}
.img-frame.small { aspect-ratio: 1/1; }
.img-frame img{
  width: 100%;
  height: 100%;
  object-fit: contain;    /* Geräteshots nicht beschneiden */
  object-position: center;
}

/* ===========================
   Footer (kompakt, nicht rechtslastig)
   Unterstützt alten Footer (.footer-*) und neuen (.ftr__*)
=========================== */
.site-footer { background: #101113; color: #e9eef3; margin-top: 2rem; }
.site-footer a { color: #cfd6de; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Legacy-Grid */
.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
  text-align: left;
}

/* Logos im Legacy-Footer streng klein */
.footer-brand .logo-word{
  height: 22px !important;
  width: auto !important;
  margin-bottom: .35rem;
}
.footer-icons .mark{
  height: 20px !important;
  width: auto !important;
  opacity: .85;
}
.footer-build{ color:#8a94a1; display:block; margin-top:.2rem; font-size:.8rem; }

/* Legacy-Listen */
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li + li { margin-top: .2rem; }

/* Legacy-Social kompakt */
.social-block{ margin-top: .3rem; }
.social-links{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.2rem; }
.btn.social{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid #2a2d31; background:#16181b; color:#e9eef3;
  border-radius:999px; padding:.26rem .56rem; font-weight:600; font-size:.88rem;
}
.btn.social:hover{ background:#1d2024; }
.btn.social svg{ width:14px !important; height:14px !important; fill:currentColor; }

/* Legacy-QR */
.qr-details summary{ cursor:pointer; margin-top:.35rem; }
#qr-wrap{ margin-top:.45rem; display:flex; align-items:center; gap:.7rem; }
#qr-canvas{
  width: 112px !important;
  height: 112px !important;
  image-rendering: pixelated;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.qr-url{ color:#a8b3bf; font-size:.85rem; word-break: break-all; max-width: 260px; }

/* Untere Zeile */
.footer-bottom{
  border-top: 1px solid #2a2d31;
  padding: .55rem 1rem;
  text-align: center;
  color: #b8c2cc;
  font-size: .85rem;
}

/* ===========================
   Neuer Footer (.ftr__*) – falls aktiv
=========================== */
.ftr { background:#101113; color:#e9eef3; }
.ftr__grid {
  display:grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 16px;
  padding: 18px 16px 14px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.ftr__col h4 { margin: 0 0 .45rem; font-size: .98rem; }
.ftr__ul { list-style:none; padding:0; margin:.2rem 0 0; }
.ftr__ul li { margin:.2rem 0; }
.ftr a { color:#cfd6de; text-decoration:none; }
.ftr a:hover { text-decoration:underline; }

/* Brandbereich */
.ftr__logo { height: 26px !important; width:auto !important; display:block; }
.ftr__claim { margin:.3rem 0 0; color:#b6c0cb; font-size:.9rem; }
.ftr__build { color:#8a94a1; display:block; margin:.2rem 0 .35rem; font-size:.8rem; }
.ftr__stamp { height: 18px !important; width:auto !important; opacity:.85; margin-top:.2rem; }

/* Social Buttons */
.ftr__links { display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 .4rem; }
.ftr__btn {
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid #2a2d31; background:#16181b; color:#e9eef3;
  border-radius:999px; padding:.26rem .56rem; font-weight:600; font-size:.88rem;
  text-decoration:none;
}
.ftr__btn:hover { background:#1d2024; text-decoration:none; }
.ftr__ico { width:16px; height:16px; fill:currentColor; display:block; }

/* QR */
.ftr__qr { margin-top:.2rem; }
.ftr__qr summary { cursor:pointer; margin:.2rem 0; }
.ftr__qrWrap { margin-top:.45rem; display:flex; align-items:center; gap:10px; }
.ftr__qrBox { width:120px; height:120px; background:#fff; border-radius:8px; padding:6px; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; }
.ftr__qrBox canvas, .ftr__qrBox img, .ftr__qrBox svg { width:100% !important; height:100% !important; image-rendering:pixelated; display:block; }
.ftr__qrUrl { color:#a8b3bf; font-size:.82rem; word-break:break-all; max-width:240px; margin:0; }

/* Untere Zeile (neu) */
.ftr__bottom { border-top:1px solid #2a2d31; padding:.5rem 1rem; text-align:center; color:#b8c2cc; font-size:.85rem; }

/* ===========================
   Notices / Helpers
=========================== */
.notice {
  border: 1px solid #ffe08a;
  background: #fff9e6;
  border-radius: 12px;
  padding: .7rem .95rem;
}
.row { display: flex; align-items: center; gap: .6rem; }
.mb-2 { margin-bottom: .75rem; }
.mt-2 { margin-top: .75rem; }
.mt-3 { margin-top: 1.25rem; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #eee; padding: .5rem; text-align: left; }

/* Logos im Content/Hero zähmen (falls jemand Bilder „logo*.svg“ eingebettet hat) */
.hero img.logo,
.hero img[class*="logo"],
.hero img[alt*="logo" i],
.content img.logo,
.content img[class*="logo"],
.content img[alt*="logo" i]{
  max-width: 280px !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}
img.logo,
img[class*="logo"],
img[alt*="logo" i]{ max-height: 54px !important; width: auto !important; }

/* ===========================
   How it works (optional)
=========================== */
.howitworks { padding: 1.2rem 1rem; max-width: 1200px; margin: 0 auto; }
.howitworks h2 { margin-bottom: .7rem; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.step {
  background: #f7f9fb;
  border: 1px solid #e6ecf2;
  border-radius: 12px;
  padding: .85rem;
  text-align: center;
}
.step .picto { width: 40px; height: 40px; display:grid; place-items:center; margin: 0 auto .45rem; }
.step svg, .step img { display: block; }

/* ===========================
   Responsive
=========================== */
@media (max-width: 900px){
  .site-header .logo{ height: 44px !important; }
  .header-inner{ min-height: 52px; }

  .footer-grid{ grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }

  .content > h1, main > h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .content > h2, main > h2 { font-size: clamp(1.25rem, 4.5vw, 1.6rem); }
}
@media (min-width: 1400px){
  main, .content, .page, .site-main{ max-width: 1280px; }
}