/* ==========================================================================
   FOA Media – Stylesheet
   Aufbau: 1 Schrift · 2 Farben · 3 Grundgerüst · 4 Bausteine · 5 Navigation
           6 Hero · 7 Abschnitte · 8 FAQ · 9 Kontakt · 10 Footer
           11 Bildschirmbreiten (Mobile First: alles oberhalb gilt fürs Telefon)
   ========================================================================== */

/* 1 · Schrift – Manrope liegt lokal, kein Aufruf an Google Fonts (DSGVO) */
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(../fonts/manrope.woff2) format("woff2");
}

/* 2 · Farben & Grundwerte – jede Änderung hier wirkt überall */
:root{
  --navy:#0a1626;
  --deep:#070f1b;
  --panel-a:#0f2236;
  --panel-b:#0c1a2c;
  --gold:#c9a13b;
  --gold-hi:#e3b94f;
  --gold-soft:#d8b659;
  --ink:#f2f6fb;
  --body:#cdd9e6;
  --mute:#9fb2c6;
  --faint:#7a8ea4;
  --line:rgba(140,170,200,.12);
  --line-strong:rgba(140,170,200,.28);
  --panel:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  --wrap:1160px;
  --gutter:28px;
  --nav-h:66px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 3 · Grundgerüst */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(201,161,59,.16);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 14px);
}
body{
  margin:0;
  background:var(--navy);
  color:var(--body);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500;
  line-height:1.6;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a,button,input,textarea,select{touch-action:manipulation}
::selection{background:rgba(201,161,59,.3);color:#fff}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:6px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  padding:12px 18px;border-radius:0 0 10px 0;
  background:var(--gold);color:var(--navy);font-weight:700;text-decoration:none;
}
.skip:focus{left:0}

.wrap{
  max-width:var(--wrap);margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.stage{position:relative;z-index:1}
.band{position:relative;padding:68px 0}
.band--tint{background:linear-gradient(180deg,rgba(9,21,35,0),rgba(9,21,35,.58),rgba(9,21,35,0))}

/* Hintergrund: Bauplan-Raster + ruhiges Licht oben, dunkler Verlauf unten.
   Bewusst dezent und auf allen Bildschirmbreiten gleich – kein zusätzliches Licht am Desktop. */
.bg-grid,.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-grid{
  background-image:
    linear-gradient(rgba(140,170,200,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,170,200,.04) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask:radial-gradient(ellipse 150% 100% at 50% -5%,#000 60%,transparent 100%);
          mask:radial-gradient(ellipse 150% 100% at 50% -5%,#000 60%,transparent 100%);
}
.bg-glow{
  background:
    radial-gradient(ellipse at 50% -8%,rgba(201,161,59,.07),transparent 48%),
    radial-gradient(ellipse at 50% 118%,rgba(7,15,27,.7),transparent 55%);
}

/* Bewegung */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes glowFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(201,161,59,.45)}
  70%{box-shadow:0 0 0 14px rgba(201,161,59,0)}
  100%{box-shadow:0 0 0 0 rgba(201,161,59,0)}
}
.fade{animation:fadeUp .8s both;animation-delay:var(--d,0s)}
/* Ein einziger Einblend-Moment beim Laden: Hero-Text und Karte kommen gestaffelt */
.hero__copy > .fade:nth-child(2){--d:.08s}
.hero__copy > .fade:nth-child(3){--d:.16s}
.hero__copy > .fade:nth-child(4){--d:.24s}
.hero__copy > .fade:nth-child(5){--d:.32s}
.flow.fade{--d:.2s}
.flow__step:nth-child(1){--d:.4s}
.flow__step:nth-child(2){--d:.55s}
.flow__step:nth-child(3){--d:.7s}
.flow__step:nth-child(4){--d:.85s}
.trust.fade{--d:.5s}
/* Scroll-Reveal: eine einzige, dezente Einblendung von unten (per JavaScript per .is-in ausgelöst) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s var(--ease)}
.rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* 4 · Wiederkehrende Bausteine */
.eyebrow{margin:0;font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.h2{text-wrap:balance;margin:14px 0 0;font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:var(--ink)}
.lead{margin:14px 0 0;font-size:16px;color:var(--mute)}
.head{max-width:640px;margin:0 auto 48px;text-align:center}

.g2,.g3{display:grid;grid-template-columns:1fr;gap:18px}

.card{
  position:relative;height:100%;padding:26px;border-radius:16px;
  border:1px solid var(--line);background:var(--panel);
  /* opacity gehört hier dazu, sonst überschreibt diese Zeile die .rv-Einblendung und die Karten poppen ohne Fade auf */
  transition:transform .4s var(--ease),box-shadow .4s ease,opacity .6s ease;
}
/* Feiner Gold-Rand, der beim Überfahren einblendet */
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 50%,var(--gold-hi));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;pointer-events:none;
}
/* Microanimation beim Überfahren: die Karte hebt sich an, der Goldrand blendet ein.
   any-hover statt hover: „hover:hover" gilt nur, wenn das *primäre* Eingabegerät hovern kann –
   auf Laptops mit Touchscreen, 2-in-1-Geräten und manchen Browsern ist das nicht der Fall,
   und der Effekt blieb dort komplett aus. any-hover greift, sobald irgendeine Maus/ein Trackpad da ist. */
@media (any-hover:hover){
  .card:hover{transform:translateY(-8px);
    box-shadow:0 20px 44px rgba(0,0,0,.4),0 8px 30px rgba(201,161,59,.12)}
  .card:hover::before{opacity:1}
}
.card h3{margin:0 0 7px;font-size:17px;font-weight:700;color:var(--ink)}
.card p{margin:0;font-size:14px;color:var(--mute)}
.card--accent{border-color:var(--gold);background:linear-gradient(180deg,rgba(201,161,59,.1),rgba(12,26,44,.92))}
.card--accent p{color:#c2cfdc}

.icon{
  width:44px;height:44px;margin-bottom:16px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,161,59,.11);color:var(--gold);font-size:18px;font-weight:700;
}

.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;font-family:inherit;
  font-size:15px;font-weight:700;padding:15px 28px;border-radius:11px;text-align:center;
  transition:transform .25s,background .25s,box-shadow .25s,border-color .25s;
}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn--gold{background:var(--gold);color:var(--navy);box-shadow:0 10px 30px rgba(201,161,59,.28)}
@media (any-hover:hover){
  .btn--gold:hover{transform:translateY(-3px);background:var(--gold-hi);box-shadow:0 16px 40px rgba(201,161,59,.4)}
}
.btn--ghost{background:transparent;color:#dbe6f1;font-weight:600;border:1px solid var(--line-strong)}
@media (any-hover:hover){
  .btn--ghost:hover{border-color:rgba(201,161,59,.5);background:rgba(201,161,59,.06)}
}

/* 5 · Navigation */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:50;
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease;
}
.nav.is-stuck{
  background:rgba(9,19,33,.85);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.nav.is-menu,.nav.is-menu.is-stuck{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.nav__in{
  max-width:var(--wrap);margin:0 auto;padding:12px 16px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.nav__logo{display:block;margin-right:auto;line-height:0;min-width:0;transition:opacity .25s,transform .25s}
.nav__logo:hover{opacity:.85;transform:translateY(-1px)}
/* Logo skaliert mobil mit, damit Logo + Button + Menü auch auf 320 px passen */
.nav__logo img{height:clamp(34px,10.5vw,46px);width:auto}
.nav__links{display:flex;align-items:center;gap:30px;flex-shrink:0}
.nav__links a{position:relative;font-size:13px;font-weight:600;color:var(--mute);text-decoration:none;transition:color .25s}
.nav__links a:hover{color:#eef3f9}
/* Abschnitts-Links und Telefonnummer stecken mobil im Burger-Menü … */
.nav__links a:not(.nav__cta){display:none}
/* … Gold-Markierung des Abschnitts, der gerade sichtbar ist */
.nav__links a[data-spy]::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav__links a.is-active{color:#eef3f9}
.nav__links a.is-active::after{transform:scaleX(1)}
.nav__cta{
  padding:10px clamp(13px,3.8vw,18px);border-radius:9px;font-weight:700;white-space:nowrap;
  color:var(--navy)!important;background:var(--gold);box-shadow:0 6px 20px rgba(201,161,59,.22);
  transition:transform .25s,background .25s,box-shadow .25s;
}
@media (any-hover:hover){
  .nav__cta:hover{transform:translateY(-2px);background:var(--gold-hi);box-shadow:0 10px 26px rgba(201,161,59,.34)}
}

.burger{
  flex-shrink:0;width:42px;height:42px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:10px;background:transparent;
  transition:border-color .25s,background .25s;
}
.burger:hover{border-color:rgba(201,161,59,.5);background:rgba(201,161,59,.06)}
.burger__box{position:relative;width:18px;height:12px}
.burger__bar{
  position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;background:#dbe6f1;
  transition:transform .3s var(--ease),opacity .2s ease,top .3s ease;
}
.burger__bar:nth-child(1){top:0}
.burger__bar:nth-child(2){top:5.25px}
.burger__bar:nth-child(3){top:10.5px}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){top:5.25px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bar:nth-child(3){top:5.25px;transform:rotate(-45deg)}

.drawer{
  position:fixed;top:0;left:0;width:100%;z-index:49;
  padding:calc(var(--nav-h) + 4px) 16px 18px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  background:rgba(9,19,33,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);box-shadow:0 26px 50px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-14px);visibility:hidden;
  transition:opacity .32s ease,transform .32s var(--ease),visibility 0s linear .32s;
  max-height:100vh;overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{
  padding:15px 4px;font-size:15px;font-weight:700;color:var(--body);text-decoration:none;
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  transition:color .25s,padding-left .25s;
}
.drawer__nav a::after{content:"→";color:var(--gold);opacity:.55;font-weight:700}
.drawer__nav a:hover,.drawer__nav a:active{color:var(--ink);padding-left:8px}
.scrim{
  position:fixed;inset:0;z-index:48;background:rgba(4,10,18,.5);touch-action:none;
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s linear .32s;
}
.scrim.is-open{opacity:1;visibility:visible;transition-delay:0s}

/* 6 · Hero */
.hero{
  position:relative;max-width:var(--wrap);margin:0 auto;padding:118px var(--gutter) 60px;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.hero__grid{position:relative;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.pill{margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:100px;border:1px solid rgba(201,161,59,.3)}
.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pill span:last-child{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.hero h1{text-wrap:balance;margin:22px 0 0;font-size:clamp(30px,4.4vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.hero__sub{margin:18px 0 0;font-size:clamp(17px,2vw,21px);font-weight:600;line-height:1.45;color:var(--gold-soft)}
.hero__txt{margin:18px 0 0;max-width:490px;font-size:16px;color:var(--mute)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__cta .btn{width:100%}

/* Vertrauensleiste unter dem Hero */
.trust{
  margin:40px 0 0;padding:22px 0 0;border-top:1px solid var(--line);
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;
}
.trust li{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--mute);line-height:1.35}
.trust i{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:11px;font-weight:800;background:rgba(201,161,59,.13);color:var(--gold-hi);
}

/* Ergebnis-Karte */
.flowwrap{position:relative}
.flowwrap__glow{
  display:none;position:absolute;right:60px;top:-30px;width:150px;height:150px;pointer-events:none;
  border-radius:50%;filter:blur(12px);opacity:.18;
  background:radial-gradient(circle,#e3b94f,rgba(201,161,59,0) 68%);
  animation:glowFloat 7s ease-in-out infinite;
}
.flow{
  position:relative;padding:28px;border-radius:20px;border:1px solid rgba(140,170,200,.16);
  background:linear-gradient(180deg,rgba(17,36,57,.92),rgba(11,24,42,.92));
  box-shadow:0 36px 70px rgba(0,0,0,.45);
}
.flow__label{margin:0 0 18px;text-align:right;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7d92a8}
.flow__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.flow__step{display:flex;align-items:center;gap:14px;padding:15px;border-radius:14px;border:1px solid rgba(140,170,200,.18)}
.flow__step--end{border-color:var(--gold);background:rgba(201,161,59,.08)}
.flow__n{
  width:36px;height:36px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(201,161,59,.13);color:var(--gold-hi);font-size:15px;font-weight:800;
}
.flow__step--end .flow__n{background:var(--gold);color:var(--navy);animation:pulseDot 2.4s ease-out infinite}
.flow__t{font-size:14px;font-weight:800;letter-spacing:.01em;color:#eef3f9}
.flow__d{margin-top:1px;font-size:12px;color:#9fb0c2}
.flow__step--end .flow__t{color:#f2e3bd}
.flow__step--end .flow__d{color:#bfb083}

/* 7 · Abschnitte: Leistungen · Für wen · Über mich */
.svc{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.svc .icon{margin-bottom:0}
.svc h3{margin-bottom:5px}
.svc .svc__sub{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--gold-soft)}
.note{
  max-width:680px;margin:30px auto 0;padding:20px 24px;border-radius:14px;
  border:1px solid var(--line);background:rgba(15,34,54,.55);text-align:center;font-size:14.5px;color:var(--body);
}

.fit{height:100%;padding:30px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.fit--yes{border-color:rgba(201,161,59,.35)}
.fit h3{margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.fit ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.fit li{display:flex;gap:12px;font-size:14.5px;line-height:1.55}
.fit li i{flex-shrink:0;font-style:normal;font-weight:700}
.fit--yes li i{color:var(--gold)}
.fit--no li{color:var(--mute)}
.fit--no li i{color:var(--faint)}

.split{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
.portrait{
  margin:0;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(201,161,59,.28);background:var(--panel);box-shadow:0 30px 60px rgba(0,0,0,.42);
}
/* Platzhalter 4:5 – sobald luka.jpg vorliegt, legt sich das Foto darüber */
.portrait__ph{
  position:relative;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#13293f,#0e2035);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5f7388;
}
.portrait__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait__cap{padding:16px 20px;border-top:1px solid var(--line)}
.portrait__cap b{display:block;font-size:15px;font-weight:800;color:var(--ink)}
.portrait__cap span{font-size:13px;color:var(--mute)}
.about p{margin:16px 0 0;font-size:15.5px;color:var(--body)}
.about p:first-of-type{margin-top:18px}
.reasons{margin:40px auto 0;padding:0;max-width:920px;list-style:none;display:grid;grid-template-columns:1fr;gap:16px}
.reasons li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.reasons i{flex-shrink:0;font-style:normal;font-weight:700;color:var(--gold);line-height:1.5}
.reasons b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.reasons span{font-size:14px;color:var(--mute)}

/* 8 · FAQ */
.faq{max-width:780px;margin:0 auto}
.faq__item h3{margin:0}
.faq__item{margin-bottom:12px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.faq__q{
  width:100%;padding:20px 22px;border:0;background:none;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:inherit;font-size:16px;font-weight:700;color:#eef3f9;
}
.faq__q i{width:20px;flex-shrink:0;text-align:center;font-style:normal;font-size:20px;font-weight:700;color:var(--gold);transition:transform .3s}
.faq__item.is-open .faq__q i{transform:rotate(45deg)}
/* Antwort klappt über Grid-Zeilen auf – funktioniert bei jeder Textlänge */
.faq__a{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s var(--ease),opacity .35s ease}
.faq__item.is-open .faq__a{grid-template-rows:1fr;opacity:1}
.faq__a p{margin:0;min-height:0;overflow:hidden;padding:0 22px;font-size:15px;color:var(--mute);transition:padding .4s var(--ease)}
.faq__item.is-open .faq__a p{padding-bottom:20px}

/* 9 · Kontakt */
.contact{
  display:grid;grid-template-columns:1fr;border-radius:22px;overflow:hidden;
  border:1px solid rgba(201,161,59,.3);background:linear-gradient(180deg,var(--panel-a),#0b182c);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.contact__l{position:relative;overflow:hidden;padding:32px 24px;border-bottom:1px solid var(--line)}
.contact__l::after{
  content:"";position:absolute;left:-80px;bottom:-100px;width:300px;height:300px;pointer-events:none;
  background:radial-gradient(circle,rgba(201,161,59,.14),transparent 65%);
}
.contact__in{position:relative}
.contact__l h2{margin:12px 0 0;font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:var(--ink)}
.contact__meta{margin:12px 0 0;font-size:14px;color:var(--mute)}
.contact__list{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.contact__list li{display:flex;gap:12px;font-size:14px;line-height:1.5;color:var(--body)}
.contact__list i{font-style:normal;font-weight:700;color:var(--gold)}
.contact__after{margin:22px 0 0;font-size:14px;line-height:1.55;color:var(--mute)}
.contact__direct{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.contact__direct small{font-size:12px;color:var(--faint)}
.contact__direct a{font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;transition:color .2s}
.contact__direct a:hover{color:var(--gold-hi)}
.contact__r{padding:32px 24px}

.field{display:block;margin-bottom:12px}
.field span{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8ea2b8}
/* 16 px verhindert das Hineinzoomen von iOS beim Antippen */
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border-radius:10px;font-family:inherit;font-size:16px;color:var(--ink);
  background:rgba(7,15,27,.55);border:1px solid rgba(140,170,200,.22);transition:border-color .25s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);outline:none}
.field textarea{min-height:94px;resize:vertical}
.field select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,#8ea2b8 50%),linear-gradient(135deg,#8ea2b8 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:#0f2236;color:var(--ink)}
.pair{display:grid;grid-template-columns:1fr;gap:12px}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__btn{width:100%;margin-top:4px}
.form__note{margin:14px 0 0;min-height:20px;font-size:14px;font-weight:600}
.form__note.ok{color:var(--gold-hi)}
.form__note.err{color:#e8a6a6}
.form__legal{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--faint)}
.form__legal a{color:var(--mute)}

/* 10 · Footer */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--deep)}
.foot__in{
  max-width:var(--wrap);margin:0 auto;padding:30px var(--gutter);
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
}
.foot__in img{height:46px;width:auto;opacity:.92}
.foot__loc{font-size:12px;font-style:normal;color:var(--faint)}
.foot__loc a{color:inherit;text-decoration:none}
.foot__links{display:flex;flex-wrap:wrap;gap:22px}
.foot__links a{font-size:13px;color:#8ea2b8;text-decoration:none;transition:color .2s}
.foot__links a:hover{color:var(--body)}
.foot__c{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) calc(28px + env(safe-area-inset-bottom));
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
  font-size:11px;color:#5f7388;
}

/* Danke-Seite (nur ohne JavaScript sichtbar) */
.thanks{min-height:70vh;display:grid;place-items:center;padding:140px var(--gutter) 60px;text-align:center}
.thanks .card{max-width:520px;padding:36px 30px}
.thanks h1{margin:0 0 12px;font-size:clamp(26px,3.6vw,36px);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:var(--ink)}
.thanks p{font-size:15.5px;color:var(--body)}
.thanks p a{color:var(--gold-hi);font-weight:700;text-decoration:none}
.thanks .btn{margin-top:22px}
.thanks + .foot .foot__c{padding-top:24px}

/* 11 · Bildschirmbreiten */
@media (min-width:540px){
  .pair{grid-template-columns:1fr 1fr}
  .hero__cta .btn{width:auto}
  .hero__cta{gap:14px}
}

@media (min-width:821px){
  :root{--nav-h:78px}
  .band{padding:90px 0}
  .hero{padding-top:150px;padding-bottom:96px}
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:56px}
  .trust{margin-top:56px;padding-top:26px;grid-template-columns:repeat(4,auto);justify-content:space-between}
  .trust li{font-size:13.5px}
  .split{grid-template-columns:minmax(0,318px) minmax(0,1fr);gap:52px}
  .reasons{grid-template-columns:1fr 1fr;gap:18px}
  .svc{flex-direction:row;gap:18px}
  .contact{grid-template-columns:.9fr 1.1fr}
  .contact__l{padding:42px 36px;border-bottom:0;border-right:1px solid var(--line)}
  .contact__r{padding:42px 36px}
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
  .field input,.field textarea,.field select{font-size:15px}
  .flowwrap__glow{display:block}
  .flow{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

  .nav__in{padding:12px var(--gutter);gap:22px}
  .nav__logo img{height:54px}
  .nav__links{gap:26px}
  .nav__links a:not(.nav__cta){display:block}
  .nav__cta{padding:10px 18px}
  .burger,.drawer,.scrim{display:none}
}

@media (min-width:1024px){
  .nav__links{gap:30px}
}