/* =========================================================
   CyMea – Unabhängige Käuferberatung Nordzypern (v4)
   Private-Office-Ästhetik: Navy/Anthrazit · Gold-Akzent ·
   Teal-Logo als Markenbrücke zu cymea.cc.
   Typografie & Systemik der Haupt-CI (Instrument Serif +
   DM Sans, Radius 12/8, weiche Schatten), Light/Dark via
   body.dark (gemeinsamer Storage-Key mit der Hauptseite).
   ========================================================= */

:root{
  /* Flächen */
  --paper:       #f6f4ef;
  --paper-warm:  #efece4;
  --surface:     #ffffff;

  /* Text */
  --ink:         #212a33;
  --ink-soft:    #4c5763;

  /* Private-Office-Kern */
  --navy:        #0d1b2a;
  --navy-deep:   #091420;
  --anthracite:  #1b2733;
  --gold:        #c2a15a;
  --gold-soft:   #d8bd85;
  --gold-glow:   rgba(194,161,90,.16);

  /* Markenbrücke (Logo) */
  --teal:        #0ea5a0;

  /* Linien */
  --line:        rgba(13,27,42,.12);
  --line-light:  rgba(246,244,239,.16);

  /* Ampel */
  --green:  #2f8f5b;
  --yellow: #e0a93e;
  --red:    #b4453b;

  --shadow-sm:  0 1px 3px rgba(9,20,32,.07);
  --shadow-md:  0 8px 30px rgba(9,20,32,.10);
  --shadow-lg:  0 20px 50px rgba(9,20,32,.16);
  --radius:     12px;
  --radius-sm:  8px;
  --ease:       cubic-bezier(0.22, 0.68, 0, 1);
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
}

body.dark{
  --paper:       #0b141d;
  --paper-warm:  #0e1824;
  --surface:     #121f2d;

  --ink:         #eae6dd;
  --ink-soft:    #b3bcc4;

  --navy:        #101f2e;   /* Sektionen liegen heller als der Seitengrund */
  --navy-deep:   #0a1520;
  --anthracite:  #1d2c3b;
  --gold:        #d4b06a;
  --gold-soft:   #e6cd93;
  --gold-glow:   rgba(212,176,106,.13);

  --teal:        #2ecdc7;

  --line:        rgba(234,230,221,.10);
  --line-light:  rgba(234,230,221,.13);

  --shadow-sm:  0 1px 3px rgba(0,0,0,.25);
  --shadow-md:  0 8px 30px rgba(0,0,0,.32);
  --shadow-lg:  0 20px 50px rgba(0,0,0,.40);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  transition:background .3s, color .3s;
}
img{ max-width:100%; }
a{ color:inherit; }

.container{ width:min(1140px, 100% - 3.5rem); margin:0 auto; } /* aligned with main site & cx 2026-08-18 */
.narrow{ width:min(860px, 92%); }

/* ---------- Typo ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.15; letter-spacing:.005em; }
h1{ font-size:clamp(2.2rem, 5.4vw, 3.6rem); }
h2{ font-size:clamp(1.7rem, 3.8vw, 2.6rem); margin-bottom:.9rem; }
h3{ font-size:1.25rem; margin-bottom:.45rem; }
em{ font-style:italic; }
h1 em{ color:var(--gold-soft); }
h2 em{ color:var(--gold); }

.eyebrow{
  font-family:var(--font-body); font-size:.76rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1rem;
}
.eyebrow.gold{ color:var(--gold); }
.eyebrow.dark{ color:var(--gold); }
.eyebrow::before{
  content:""; display:inline-block; width:26px; height:1px;
  background:currentColor; vertical-align:middle; margin-right:.7rem; opacity:.7;
}

.lead{ font-size:1.12rem; color:var(--ink-soft); max-width:46em; margin-bottom:1.2rem; }
.narrow-lead{ margin-bottom:2.4rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:.8rem 1.55rem;
  font-family:var(--font-body); font-weight:600; font-size:.93rem;
  text-decoration:none; border:1px solid transparent; border-radius:var(--radius-sm);
  cursor:pointer; line-height:1.3; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.btn-gold{ background:var(--gold); color:var(--navy-deep); box-shadow:0 6px 22px rgba(194,161,90,.30); }
.btn-gold:hover{ background:var(--gold-soft); box-shadow:0 10px 28px rgba(194,161,90,.38); }
.btn-gold::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.btn-gold:hover::after{ transform:translateX(120%); }
.btn-ghost{ background:transparent; color:#f2f0ec; border-color:rgba(246,244,239,.4); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft); }
.btn-navy{ background:var(--navy); color:#f2f0ec; border:none; width:100%; }
body.dark .btn-navy{ background:var(--gold); color:var(--navy-deep); }
.btn-navy:hover{ background:var(--anthracite); }
body.dark .btn-navy:hover{ background:var(--gold-soft); }
.btn-wide{ width:100%; border:none; }

/* ---------- Ampel (Signatur-Element) ---------- */
.dot{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  background:rgba(120,130,140,.28); border:1px solid rgba(120,130,140,.35);
  margin-right:4px; vertical-align:middle;
}
.dot:last-child{ margin-right:0; }
.dot-red.active,   .brand-mark .dot-red   { background:var(--red);   border-color:var(--red); }
.dot-yellow.active,.brand-mark .dot-yellow{ background:var(--yellow);border-color:var(--yellow); }
.dot-green.active, .brand-mark .dot-green { background:var(--green); border-color:var(--green); }
.ampel{ display:inline-flex; align-items:center; gap:2px; }
.ampel-item .dot.active{ animation:dotGlow 2.8s ease-in-out infinite; }
.ampel-item:nth-child(2) .dot.active{ animation-delay:.9s; }
.ampel-item:nth-child(3) .dot.active{ animation-delay:1.8s; }
@keyframes dotGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
  50%{ box-shadow:0 0 10px 1px currentColor; }
}

/* ---------- Header (konstant navy — Premium-Anker beider Themes) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(9,20,32,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-light);
  transition:box-shadow .2s ease;
}
.site-header.scrolled{ box-shadow:0 10px 34px rgba(0,0,0,.38); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0; min-height:4.5rem; /* same header height as main site & cx */
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand-logo{ width:56px; height:56px; display:block; border-radius:8px; } /* same logo size as main site & cx */
.brand-mark{ display:inline-flex; gap:3px; }
/* Unified estate lockup 2026-08-20 — matches cymea.cc + cx.cymea.cc.
   Structure and typography are shared estate-wide; only the accent colour stays
   per-property (gold here, sage on the main site). Was a stacked
   CyMea / CONSULTING mark; now inline, same as the flagship. */
.brand-wordmark{
  font-family:var(--font-body); font-weight:700; font-size:1.2rem;
  letter-spacing:.03em; color:#f2f0ec;
}
.brand-suffix{ font-weight:400; color:var(--gold); }
.main-nav{ display:flex; gap:.35rem; }
.main-nav a{
  color:rgba(246,244,239,.8); text-decoration:none; font-size:.88rem; font-weight:500;
  padding:.45rem .85rem; border-radius:var(--radius-sm);
  transition:color .25s, background .25s;
}
.main-nav a:hover{ color:var(--gold-soft); background:rgba(246,244,239,.06); }
.header-controls{ display:flex; align-items:center; gap:.55rem; }
.btn-header{ padding:.55rem 1.05rem; font-size:.84rem; white-space:nowrap; }

/* Sprachumschalter + Theme-Toggle (auf Navy) */
.lang-switch{
  display:flex; align-items:center; justify-content:center;
  height:36px; padding:0 .7rem; flex:none;
  border:1px solid var(--line-light); border-radius:var(--radius-sm);
  font-size:.8rem; font-weight:600; letter-spacing:.06em;
  color:rgba(246,244,239,.8); text-decoration:none; transition:all .25s;
}
.lang-switch:hover{ border-color:var(--gold); color:var(--gold-soft); }
.lang-switch:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.theme-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none;
  border:1px solid var(--line-light); border-radius:var(--radius-sm);
  background:transparent; color:rgba(246,244,239,.8); cursor:pointer;
  transition:all .25s;
}
.theme-btn:hover{ border-color:var(--gold); color:var(--gold-soft); }
.theme-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.icon-moon{ display:none; }
body.dark .icon-sun{ display:none; }
body.dark .icon-moon{ display:block; }

/* Burger + Mobile-Menü */
.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; flex:none; cursor:pointer;
  background:transparent; border:1px solid var(--line-light); border-radius:var(--radius-sm);
  padding:0 8px; transition:border-color .25s;
}
.burger span{
  display:block; height:2px; width:100%; background:rgba(246,244,239,.85);
  border-radius:2px; transition:transform .3s var(--ease), opacity .2s;
}
.burger:hover{ border-color:var(--gold); }
.burger:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px){
  .burger{ display:flex; }
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:.5rem 4%;
    background:rgba(9,20,32,.98); border-bottom:1px solid var(--line-light);
    box-shadow:0 20px 40px rgba(0,0,0,.4);
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:.9rem .4rem; border-bottom:1px solid rgba(246,244,239,.07); border-radius:0; font-size:1rem; }
  .main-nav a:last-child{ border-bottom:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 85% -10%, var(--gold-glow), transparent 60%),
    linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, var(--anthracite) 100%);
  color:#f2f0ec;
  padding:5.5rem 0 5rem;
  border-bottom:3px solid var(--gold);
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.35fr .9fr; gap:3.5rem; align-items:center;
}
.hero .eyebrow{ color:var(--gold); }
.hero-sub{ margin:1.4rem 0 2rem; font-size:1.1rem; color:rgba(242,240,236,.85); max-width:38em; }
.hero-sub strong{ color:var(--gold-soft); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.4rem; }
.trust-line{
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(242,240,236,.55);
}
/* Zypern-Silhouette als Wasserzeichen */
.hero-map{
  position:absolute; right:-4%; bottom:-18%; width:min(560px, 60vw);
  opacity:.16; pointer-events:none; z-index:0;
}
.hero-map .south{ fill:none; stroke:rgba(246,244,239,.5); stroke-width:2; }
.hero-map .north{ fill:var(--gold); opacity:.85; }

/* Hero-Einstiegsanimation */
.hero .eyebrow, .hero h1, .hero .hero-sub, .hero .hero-ctas, .hero .trust-line{
  opacity:0; animation:fadeUp .7s var(--ease) forwards;
}
.hero h1{ animation-delay:.08s; }
.hero .hero-sub{ animation-delay:.16s; }
.hero .hero-ctas{ animation-delay:.24s; }
.hero .trust-line{ animation-delay:.32s; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* Hero Dokument-Visual */
.doc-card{
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius); padding:1.6rem 1.5rem;
  box-shadow:var(--shadow-lg); transform:rotate(-1.5deg);
  border-top:4px solid var(--gold);
  max-width:340px; margin-left:auto;
  animation:docFloat 7s ease-in-out infinite;
}
body.dark .doc-card{ background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--gold); }
@keyframes docFloat{
  0%,100%{ transform:rotate(-1.5deg) translateY(0); }
  50%{ transform:rotate(-1.2deg) translateY(-8px); }
}
.doc-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem;
}
.doc-label{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
}
.doc-line{
  height:9px; border-radius:4px; background:var(--line); margin-bottom:.7rem;
}
.w60{width:60%;} .w70{width:70%;} .w80{width:80%;} .w90{width:90%;} .w95{width:95%;}
.doc-stamp{
  display:inline-block; margin:.5rem 0 1rem;
  font-size:.7rem; font-weight:700; letter-spacing:.26em;
  color:var(--green); border:2px solid var(--green); border-radius:4px;
  padding:.35rem .7rem; transform:rotate(-4deg); opacity:.85;
}

/* ---------- Sektionen ---------- */
.section{ padding:5rem 0; }
.section-light{ background:var(--paper); }
.section-light:nth-of-type(even){ background:var(--paper-warm); }
.section-dark{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#f2f0ec;
}
body.dark .section-dark{ color:var(--ink); }
.section-dark .lead{ color:rgba(242,240,236,.8); }
body.dark .section-dark .lead{ color:var(--ink-soft); }
.section-gold{
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, #b9975070, transparent), var(--gold);
  color:var(--navy-deep);
}
body.dark .section-gold{
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%, var(--gold-glow), transparent 65%),
    linear-gradient(180deg, var(--anthracite), var(--navy-deep));
  color:var(--ink);
  border-top:1px solid rgba(212,176,106,.35);
  border-bottom:1px solid rgba(212,176,106,.35);
}

/* ---------- Problem ---------- */
.problem-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin:2.4rem 0;
}
.problem-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.4rem; border-top:3px solid var(--anthracite);
  box-shadow:var(--shadow-sm);
}
body.dark .problem-card{ border-top-color:var(--gold); }
.problem-card p{ font-size:.95rem; color:var(--ink-soft); }
.callout{
  border-left:4px solid var(--gold); background:var(--surface);
  padding:1.5rem 1.8rem; border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--shadow-md);
}
.callout p{ font-size:1.06rem; }
.section-dark .callout{ color:var(--ink); }

/* ---------- Negation ---------- */
.negation-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin:2.4rem 0 2rem;
}
.negation-card{
  border:1px solid var(--line-light); border-radius:var(--radius);
  padding:1.6rem 1.3rem; background:rgba(246,244,239,.045);
}
.neg-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--gold); color:var(--gold);
  font-size:1rem; margin-bottom:.9rem;
}
.negation-card p{ font-size:.92rem; color:rgba(242,240,236,.75); }
body.dark .negation-card p{ color:var(--ink-soft); }
.negation-close{ font-size:1.12rem; max-width:44em; }
.negation-close strong{ color:var(--gold-soft); }

/* ---------- Prüfrahmen ---------- */
.frame-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
}
.frame-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.3rem; position:relative; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.frame-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(194,161,90,.45); }
.frame-num{
  font-family:var(--font-display); font-size:2rem; color:var(--gold);
  display:block; margin-bottom:.4rem; line-height:1;
}
.frame-card p{ font-size:.9rem; color:var(--ink-soft); }

/* ---------- Firmencheck ---------- */
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:center; }
.check-list{ list-style:none; margin:1.4rem 0; }
.check-list li{
  padding:.55rem 0 .55rem 1.9rem; position:relative;
  border-bottom:1px solid var(--line-light); font-size:1rem;
  color:rgba(242,240,236,.88);
}
body.dark .check-list li{ color:var(--ink-soft); }
.check-list li::before{
  content:"→"; position:absolute; left:0; color:var(--gold);
}
.split-note{ color:var(--gold-soft); font-family:var(--font-display); font-size:1.15rem; }
.org-card{
  background:rgba(246,244,239,.05); border:1px solid var(--line-light);
  border-radius:var(--radius); padding:2rem 1.5rem; text-align:center;
}
.org-node{
  display:inline-block; background:var(--anthracite); border:1px solid var(--line-light);
  border-radius:var(--radius-sm); padding:.6rem 1rem; font-size:.85rem; color:#f2f0ec;
}
body.dark .org-node{ color:var(--ink); }
.org-node.top{ border-color:var(--gold); color:var(--gold-soft); }
.org-node.q{ font-size:.78rem; color:rgba(242,240,236,.7); }
.org-node.bottom{ display:inline-flex; gap:.6rem; align-items:center; border-color:var(--yellow); }
.org-connector{ width:1px; height:26px; background:var(--line-light); margin:0 auto; }
.org-row{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Kontrast-Tabelle ---------- */
.table-wrap{ overflow-x:auto; margin-top:2.2rem; box-shadow:var(--shadow-md); border-radius:var(--radius); }
.contrast-table{
  width:100%; border-collapse:collapse; background:var(--surface); min-width:620px;
}
.contrast-table th{
  font-family:var(--font-display); font-weight:400; font-size:1.05rem; text-align:left;
  padding:1.1rem 1.4rem; color:#f2f0ec;
}
.contrast-table th:first-child{ background:var(--anthracite); }
.contrast-table th:last-child{ background:var(--navy); border-left:3px solid var(--gold); }
.contrast-table td{
  padding:1rem 1.4rem; font-size:.95rem; border-top:1px solid var(--line); vertical-align:top;
}
.contrast-table td:first-child{ color:var(--ink-soft); font-style:italic; width:42%; }
.contrast-table td:last-child{ border-left:3px solid var(--gold); }
.contrast-table tbody tr:nth-child(even){ background:var(--paper); }

/* ---------- Lead-Magnet ---------- */
.lm-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:start; }
.section-gold h2{ color:inherit; }
.teaser-questions{ list-style:none; margin-top:1.2rem; }
.teaser-questions li{
  background:rgba(9,20,32,.08); border-left:3px solid var(--navy);
  padding:.8rem 1rem; margin-bottom:.7rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.96rem;
}
body.dark .teaser-questions li{
  background:rgba(212,176,106,.08); border-left-color:var(--gold);
}
.lm-form{
  background:var(--paper); border-radius:var(--radius); padding:1.8rem 1.6rem;
  box-shadow:var(--shadow-lg);
}
body.dark .lm-form{ background:var(--surface); border:1px solid var(--line); }
.lm-form label{ font-size:.85rem; font-weight:600; display:block; margin-bottom:.4rem; }
.lm-form input{
  width:100%; padding:.8rem .9rem; margin-bottom:1rem;
  border:1px solid var(--line); border-radius:var(--radius-sm); font-size:1rem;
  font-family:var(--font-body); background:var(--surface); color:var(--ink);
}
body.dark .lm-form input{ background:var(--paper-warm); }
.lm-form input:focus-visible{ outline:3px solid var(--gold); outline-offset:1px; }
.form-note{ font-size:.78rem; color:var(--ink-soft); margin-top:.8rem; }
.form-note.light{ color:rgba(242,240,236,.6); }
body.dark .form-note.light{ color:var(--ink-soft); }
.form-status{ margin-top:.9rem; font-size:.92rem; font-weight:600; }
.form-status.ok{ color:var(--green); }
.form-status.err{ color:var(--red); }
.section-dark .form-status.ok{ color:#7fd1a6; }
.section-dark .form-status.err{ color:#e59a92; }

/* ---------- Produktleiter ---------- */
.ladder{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:2rem;
}
.ladder-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.4rem; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ladder-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ladder-card.featured{
  border:2px solid var(--gold); box-shadow:var(--shadow-md); position:relative;
}
.ladder-card.featured::after{
  content:attr(data-badge); position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--navy-deep); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:.3rem .8rem; border-radius:99px;
  white-space:nowrap;
}
.ladder-step{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.6rem;
}
.ladder-card p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:.8rem; }
.ladder-scope{
  font-size:.82rem !important; border-top:1px dashed var(--line); padding-top:.8rem; margin-top:auto;
}
.ladder-price{
  font-family:var(--font-display); font-size:1.4rem; color:var(--ink) !important; margin-bottom:0 !important;
}
.anchor-note{ font-family:var(--font-body); font-size:.78rem; color:var(--ink-soft); display:block; }
.ladder-note{
  max-width:52em; font-size:1rem; color:var(--ink-soft);
  border-left:3px solid var(--gold); padding-left:1.2rem;
}

/* ---------- Prozess ---------- */
.process{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.6rem;
  counter-reset:step;
}
.process-step{
  border:1px solid var(--line-light); border-radius:var(--radius);
  padding:1.7rem 1.4rem; background:rgba(246,244,239,.045); position:relative;
}
.step-num{
  font-family:var(--font-display); font-size:2.2rem; color:var(--gold); display:block; margin-bottom:.5rem; line-height:1;
}
.process-step p{ font-size:.92rem; color:rgba(242,240,236,.78); }
body.dark .process-step p{ color:var(--ink-soft); }
.ampel-legend{ margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; }
.ampel-item{ font-size:.85rem; color:rgba(242,240,236,.85); display:flex; align-items:center; gap:.5rem; }
body.dark .ampel-item{ color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list{ margin-top:2.2rem; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:.8rem; overflow:hidden; box-shadow:var(--shadow-sm);
}
.faq-item summary{
  cursor:pointer; padding:1.15rem 1.4rem;
  font-family:var(--font-display); font-size:1.12rem; font-weight:400;
  list-style:none; position:relative; padding-right:3rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:1.4rem; top:50%;
  font-family:var(--font-body); font-size:1.3rem; color:var(--gold);
  transform:translateY(-50%); transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item[open] summary{ border-bottom:1px solid var(--line); background:var(--paper); }
.faq-item p{
  padding:1.1rem 1.4rem 1.3rem; font-size:.97rem; color:var(--ink-soft);
}
.faq-item[open] p{ animation:fadeUp .35s var(--ease); }
.faq-item summary:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; }

/* ---------- Kontaktformular ---------- */
.contact-form{ margin-top:2.4rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-field{ margin-bottom:1.2rem; }
.form-field label{
  display:block; font-size:.85rem; font-weight:600; margin-bottom:.45rem;
  color:rgba(242,240,236,.85);
}
body.dark .form-field label{ color:var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:.85rem .95rem; font-size:1rem; font-family:var(--font-body);
  background:rgba(246,244,239,.06); color:#f2f0ec;
  border:1px solid var(--line-light); border-radius:var(--radius-sm);
}
body.dark .form-field input, body.dark .form-field select, body.dark .form-field textarea{
  background:rgba(234,230,221,.05); color:var(--ink);
}
.form-field select{ appearance:none; }
.form-field select option{ color:var(--ink); background:var(--paper); }
.form-field input::placeholder, .form-field textarea::placeholder{ color:rgba(242,240,236,.35); }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:1px;
}
.urgency-hint{
  margin-top:.7rem; padding:.75rem 1rem; font-size:.9rem;
  background:rgba(224,169,62,.14); border:1px solid rgba(224,169,62,.5);
  border-radius:var(--radius-sm); color:var(--gold-soft);
}

/* ---------- SEO Hub ---------- */
.hub-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem;
}
.hub-tile{
  display:block; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.4rem;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.hub-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(194,161,90,.5); }
.hub-tile h3{ font-size:1.08rem; margin-bottom:.5rem; }
.hub-tile p{ font-size:.88rem; color:var(--ink-soft); }
.hub-note{ margin-top:1.6rem; font-size:.85rem; color:var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-deep); color:rgba(242,240,236,.75);
  padding:3.5rem 0 2rem; border-top:3px solid var(--gold);
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:2rem; flex-wrap:wrap; margin-bottom:2.2rem;
}
.footer-brand{ display:flex; gap:.8rem; align-items:flex-start; }
.footer-brand p{ font-size:.92rem; line-height:1.7; }
.footer-brand a{ color:var(--gold-soft); }
.footer-links{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-links a{ color:rgba(242,240,236,.7); text-decoration:none; font-size:.9rem; }
.footer-links a:hover{ color:var(--gold-soft); }
.disclaimer{
  font-size:.78rem; color:rgba(242,240,236,.45); max-width:70em;
  border-top:1px solid var(--line-light); padding-top:1.6rem; margin-bottom:1rem;
}
.copyright{ font-size:.78rem; color:rgba(242,240,236,.4); }

/* ---------- Scroll-Reveal (mit Stagger via JS-transitionDelay) ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .frame-card, .hub-tile, .ladder-card{ transition:none; }
  .doc-card, .ampel-item .dot.active{ animation:none; }
  .hero .eyebrow, .hero h1, .hero .hero-sub, .hero .hero-ctas, .hero .trust-line{ animation:none; opacity:1; }
  .faq-item[open] p{ animation:none; }
  .btn-gold::after{ display:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .hero-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .doc-card{ margin:0 auto; }
  .hero-map{ width:80vw; right:-14%; bottom:-8%; opacity:.10; }
  .problem-grid{ grid-template-columns:1fr; }
  .negation-grid{ grid-template-columns:repeat(2,1fr); }
  .frame-grid{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:2.5rem; }
  .lm-inner{ grid-template-columns:1fr; }
  .ladder{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); }
  .hub-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  body{ font-size:16px; }
  .section{ padding:3.5rem 0; }
  .hero{ padding:3.5rem 0; }
  .negation-grid, .frame-grid, .ladder, .process, .hub-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .hero-ctas .btn{ width:100%; text-align:center; }
  .btn-header{ display:none; }
  .brand-wordmark{ font-size:1.05rem; }
  .brand-logo{ width:56px; height:56px; } /* main site & cx keep full logo size on mobile */
}

/* ---------- Einwilligung (Formulare, 29.08.2026) ---------- */
/* label.consent-label, not .consent-label: `.lm-form label` sets display:block
   at the same specificity and would otherwise win inside the lead form. */
label.consent-label{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.82rem; font-weight:400; line-height:1.5;
  color:var(--ink-soft); cursor:pointer; margin-bottom:0;
}
label.consent-label input[type="checkbox"]{
  flex:0 0 auto; width:1.15rem; height:1.15rem; margin:.1rem 0 0;
  accent-color:var(--gold); cursor:pointer;
}
label.consent-label input[type="checkbox"]:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.form-consent{ margin-bottom:1.1rem; }
.consent-inline{ margin:.9rem 0 1rem; color:rgba(242,240,236,.62); }