/* ============================================================
   FRISCHWERK · styles.css  —  Dunkelblau-System, eigene Icons
   ============================================================ */

:root{
  /* Flächen */
  --bg:        #F2F5FB;
  --bg-2:      #FFFFFF;
  --dark:      #07182F;   /* tiefes Marineblau (Hero/Footer/CTA) */
  --dark-2:    #0C2547;

  /* Text */
  --ink:       #0A1B33;
  --ink-soft:  #33405A;
  --muted:     #58647F;
  --line:      #E1E7F2;

  /* Akzente (Dunkelblau-Familie) */
  --navy:      #14315B;   /* primärer dunkelblauer Akzent */
  --blue:      #2160D8;   /* interaktiv / hell genug zum Strahlen */
  --blue-d:    #1A4FB5;
  --azure:     #5AA2FF;   /* Glanz / Highlights */
  --gold:      #E7B24C;   /* seltener warmer Signal-Akzent */

  /* Schrift */
  --f-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1140px;
  --r: 18px;
  --r-sm: 12px;
  --shadow: 0 24px 60px -24px rgba(10,27,51,.42);
  --shadow-sm: 0 8px 28px -14px rgba(10,27,51,.3);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ font-family:var(--f-body); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.wrap--narrow{ max-width:760px; }

/* Icons */
.ico{ width:100%; height:100%; display:block; }

/* ---------- Typo-Helfer ---------- */
.eyebrow{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; display:inline-flex; align-items:center; gap:9px; }
.eyebrow--light{ color:#A6C8FF; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
.head{ max-width:680px; margin-bottom:60px; }
.head__title{ font-size:clamp(1.95rem, 4vw, 3rem); }
.head__title--light{ color:#fff; }
.head__lead{ margin-top:18px; font-size:1.08rem; color:var(--muted); }
.big{ font-size:1.12rem; color:var(--ink-soft); margin-bottom:18px; max-width:46ch; }
.big--light{ color:#B7C4DE; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-body); font-weight:600; font-size:.96rem; padding:12px 22px; border-radius:999px; cursor:pointer; border:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; white-space:nowrap; }
.btn--lg{ padding:15px 30px; font-size:1.02rem; }
.btn--primary{ background:var(--navy); color:#fff; box-shadow:0 12px 26px -12px rgba(20,49,91,.8); }
.btn--primary:hover{ background:var(--blue); transform:translateY(-2px); }
.btn--bright{ background:var(--blue); color:#fff; box-shadow:0 14px 30px -12px rgba(33,96,216,.7); }
.btn--bright:hover{ background:var(--blue-d); transform:translateY(-2px); }
.btn--ghost-light{ background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.28); }
.btn--ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ============================================================ NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; --nav-fg:#fff; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
.nav.is-scrolled{ --nav-fg:var(--ink); background:rgba(242,245,251,.86); backdrop-filter:saturate(160%) blur(14px); border-bottom-color:var(--line); }
.nav__inner{ display:flex; align-items:center; gap:20px; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:1.18rem; color:var(--nav-fg); }
.brand__mark{ display:flex; }
.nav__links{ display:flex; gap:28px; margin-left:auto; }
.nav__links a{ font-size:.95rem; color:var(--nav-fg); opacity:.9; font-weight:500; transition:opacity .15s; }
.nav__links a:hover{ opacity:1; }
.nav__cta{ margin-left:8px; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; margin-left:auto; }
.nav__burger span{ width:24px; height:2px; background:var(--nav-fg); border-radius:2px; transition:.25s; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__mobile{ display:none; flex-direction:column; gap:4px; padding:0 24px; max-height:0; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--line); transition:max-height .35s ease, padding .35s ease; }
.nav__mobile.is-open{ max-height:440px; padding:12px 24px 24px; }
.nav__mobile a{ padding:12px 4px; font-weight:500; color:var(--ink-soft); border-bottom:1px solid var(--line); }
.nav__mobile a.btn{ border:none; margin-top:12px; color:#fff; justify-content:center; }

/* ============================================================ HERO */
.hero{ position:relative; padding:148px 0 96px; background:var(--dark); color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__grid-lines{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:58px 58px; mask-image:radial-gradient(ellipse 80% 70% at 50% 25%, #000 40%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 25%, #000 40%, transparent 80%); }
.hero__glow{ position:absolute; top:-180px; right:-140px; width:820px; height:820px; background:radial-gradient(closest-side, rgba(90,162,255,.34), transparent 70%), radial-gradient(closest-side, rgba(31,182,166,.24), transparent 72%), radial-gradient(closest-side, rgba(155,108,255,.26), transparent 72%); background-position:30% 32%, 74% 60%, 52% 80%; background-repeat:no-repeat; background-size:60% 60%, 52% 52%, 48% 48%; filter:blur(10px); }
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero__title{ font-size:clamp(2.4rem, 5.4vw, 4rem); margin-bottom:24px; color:#fff; }
.hero__title .ul{ color:#fff; }
.hero__lead{ font-size:1.16rem; color:#AEBBD6; max-width:48ch; margin-bottom:32px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.hero__ticks{ display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.92rem; color:#C7D2E8; }
.hero__ticks li{ display:flex; align-items:center; gap:8px; }
.hero__ticks li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--azure); }

/* Browser-Mockup */
.hero__demo{ position:relative; }
.hero__demo::before{ content:""; position:absolute; inset:-24px -24px 20px; background:radial-gradient(closest-side, rgba(90,162,255,.28), transparent 75%); filter:blur(6px); z-index:0; }
.browser{ position:relative; z-index:1; background:var(--bg-2); border-radius:var(--r); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.12); overflow:hidden; transform:perspective(1200px) rotateY(-6deg) rotateX(2deg); transition:transform .5s ease; }
.hero__demo:hover .browser{ transform:perspective(1200px) rotateY(-2deg) rotateX(0); }
.browser__bar{ display:flex; align-items:center; gap:7px; padding:12px 14px; background:#EEF1F7; border-bottom:1px solid var(--line); }
.dot{ width:11px; height:11px; border-radius:50%; } .dot--r{ background:#FF6058; } .dot--y{ background:#FFBD2E; } .dot--g{ background:#28C840; }
.browser__url{ flex:1; margin-left:8px; background:#fff; border-radius:7px; padding:5px 12px; font-family:var(--f-mono); font-size:.72rem; color:var(--muted); }
.browser__view{ height:340px; position:relative; }
.mini{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--m-bg,#FFF6EE); transition:opacity .35s ease, background .6s ease; }
.mini__nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; }
.mini__logo{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--m-ink,#3A2A1E); transition:color .6s; }
.mini__menu{ display:flex; gap:6px; } .mini__menu i{ width:18px; height:3px; border-radius:2px; background:var(--m-ink,#3A2A1E); opacity:.55; }
.mini__hero{ flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; padding:0 22px; }
.mini__tag{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--m-acc,#C2410C); }
.mini__h{ font-family:var(--f-display); font-size:1.9rem; line-height:1.05; color:var(--m-ink,#3A2A1E); transition:color .6s; }
.mini__btn{ font-size:.8rem; font-weight:600; color:#fff; background:var(--m-acc,#C2410C); padding:9px 18px; border-radius:999px; transition:background .6s; }
.mini__cards{ display:flex; gap:10px; padding:0 22px 22px; }
.mini__card{ flex:1; height:46px; border-radius:10px; background:var(--m-card, rgba(194,65,12,.14)); transition:background .6s; }
.mini.is-fading{ opacity:0; }
.demo__hint{ position:relative; z-index:1; display:flex; align-items:center; gap:9px; margin-top:18px; font-size:.85rem; color:#9FB0CE; }
.pulse{ width:9px; height:9px; border-radius:50%; background:var(--azure); box-shadow:0 0 0 0 rgba(90,162,255,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(90,162,255,0);} 100%{ box-shadow:0 0 0 0 rgba(90,162,255,0);} }

/* ============================================================ TICKER */
.ticker{ background:var(--navy); overflow:hidden; border-top:1px solid rgba(255,255,255,.06); }
.ticker__track{ display:flex; align-items:center; gap:30px; white-space:nowrap; width:max-content; padding:16px 0; animation:ticker 34s linear infinite; }
.ticker__track span{ font-family:var(--f-display); font-weight:500; font-size:1.05rem; color:#DCE6F7; }
.ticker__track .sep{ color:var(--azure); font-size:.7rem; }
@keyframes ticker{ to{ transform:translateX(-50%);} }

/* ============================================================ SECTIONS */
.section{ padding:108px 0; }
.section--alt{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--dark{ background:var(--dark); }
.section--cta{ background:linear-gradient(140deg, var(--dark) 0%, var(--dark-2) 60%, #16306A 100%); }

/* ---------- Ablauf / Steps (Flow mit Verbindungslinie) ---------- */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.steps::before{ content:""; position:absolute; top:30px; left:9%; right:9%; height:2px; background:linear-gradient(90deg, var(--navy), var(--azure)); opacity:.28; z-index:0; }
.step{ position:relative; z-index:1; }
.step__badge{ width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--bg-2); border:1.5px solid var(--line); color:var(--navy); box-shadow:var(--shadow-sm); transition:background .25s, color .25s, transform .25s, border-color .25s; }
.step__badge .ico{ width:30px; height:30px; }
.step:hover .step__badge{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-4px); }
.step__num{ display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin:20px 0 8px; }
.step__title{ font-size:1.2rem; margin-bottom:9px; }
.step p{ color:var(--muted); font-size:.96rem; }

.note{ display:flex; gap:18px; align-items:center; margin-top:40px; padding:24px 28px; border-radius:var(--r); background:linear-gradient(120deg, rgba(20,49,91,.06), rgba(90,162,255,.08)); border:1px solid var(--line); }
.note__mark{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; }
.note__mark .ico{ width:24px; height:24px; }
.note p{ font-size:1.05rem; color:var(--ink-soft); } .note strong{ color:var(--ink); }

/* ---------- Leistungen / Cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); border-color:#CBD5EC; }
.card__icon{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:14px; color:#fff; margin-bottom:18px; background:linear-gradient(140deg, var(--blue), var(--navy)); box-shadow:0 10px 22px -12px rgba(20,49,91,.8); }
.card__icon .ico{ width:27px; height:27px; }
.card h3{ font-size:1.2rem; margin-bottom:9px; }
.card p{ color:var(--muted); font-size:.97rem; }

/* ---------- Arbeiten / Beispiele ---------- */
.work{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.work__card{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--bg-2); transition:transform .3s, box-shadow .3s; }
.work__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.work__screen{ aspect-ratio:4/3; padding:18px; display:flex; flex-direction:column; gap:14px; }
.work--cafe   .work__screen{ background:linear-gradient(160deg,#FFF3E9,#FFE3CF); --c:#C2410C; --t:#4A2D1A; }
.work--craft  .work__screen{ background:linear-gradient(160deg,#E9F1FC,#D2E2F7); --c:#14315B; --t:#11233F; }
.work--studio .work__screen{ background:linear-gradient(160deg,#EEF1FB,#DCE3F6); --c:#2160D8; --t:#162447; }
.ws__nav{ display:flex; align-items:center; justify-content:space-between; }
.ws__nav span{ font-family:var(--f-display); font-weight:700; font-size:.95rem; color:var(--t); }
.ws__nav i{ width:34px; height:6px; border-radius:3px; background:var(--t); opacity:.3; }
.ws__hero{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.ws__hero b{ font-family:var(--f-display); font-size:1.3rem; line-height:1.1; color:var(--t); }
.ws__hero em{ align-self:flex-start; font-style:normal; font-size:.72rem; font-weight:600; color:#fff; background:var(--c); padding:7px 14px; border-radius:999px; }
.ws__row{ display:flex; gap:10px; } .ws__row span{ flex:1; height:30px; border-radius:8px; background:var(--c); opacity:.16; }
.work__meta{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-top:1px solid var(--line); }
.work__meta span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.work__meta b{ font-family:var(--f-display); font-weight:500; font-size:.95rem; }

/* ---------- Split (Warum / Über uns) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split--rev .split__text{ order:1; }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare__col{ border-radius:var(--r); padding:28px 24px; }
.compare__col h4{ font-size:1rem; margin-bottom:18px; }
.compare__col ul{ display:flex; flex-direction:column; gap:14px; }
.compare__col li{ display:flex; align-items:flex-start; gap:11px; font-size:.95rem; color:var(--ink-soft); }
.tick{ flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.tick .ico{ width:14px; height:14px; }
.tick--ok{ background:rgba(33,96,216,.12); color:var(--blue); }
.tick--no{ background:rgba(88,100,127,.14); color:var(--muted); }
.compare__col--us{ background:linear-gradient(160deg, rgba(20,49,91,.07), rgba(90,162,255,.08)); border:1px solid #CFD8EE; }
.compare__col--them{ background:var(--bg); border:1px solid var(--line); } .compare__col--them li{ color:var(--muted); }

/* ---------- Über uns / Founders ---------- */
.founders{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.founder{ background:var(--dark-2); border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:30px 24px; text-align:center; }
.founder__avatar{ width:74px; height:74px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; color:#fff; font-size:1.3rem; }
.founder__avatar--1{ background:linear-gradient(135deg,#2160D8,#14315B); }
.founder__avatar--2{ background:linear-gradient(135deg,#5AA2FF,#2160D8); }
.founder b{ display:block; color:#fff; font-family:var(--f-display); font-size:1.1rem; }
.founder span{ font-size:.88rem; color:#9FB0CE; }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq__item{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 22px; transition:border-color .2s; }
.faq__item[open]{ border-color:#CBD5EC; }
.faq__item summary{ list-style:none; cursor:pointer; padding:18px 0; font-family:var(--f-display); font-weight:500; font-size:1.06rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-family:var(--f-body); font-size:1.5rem; color:var(--blue); transition:transform .25s; line-height:1; }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ padding:0 0 20px; color:var(--muted); font-size:.98rem; }

/* ---------- Kontakt ---------- */
.kontakt{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; }
.kontakt__direct{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.kontakt__direct li{ display:flex; flex-direction:column; gap:2px; }
.kontakt__direct span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#9FB0CE; }
.kontakt__direct a{ color:#fff; font-size:1.05rem; } .kontakt__direct a:hover{ color:var(--azure); }
.form{ background:var(--bg-2); border-radius:var(--r); padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:18px; box-shadow:var(--shadow); }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.86rem; font-weight:600; color:var(--ink-soft); } .field .opt{ font-weight:400; color:var(--muted); }
.field input, .field textarea{ font-family:var(--f-body); font-size:.97rem; color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; background:var(--bg); resize:vertical; transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(33,96,216,.12); background:#fff; }
.field input::placeholder, .field textarea::placeholder{ color:#9AA6C0; }
.check{ grid-column:1/-1; display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--muted); }
.check input{ margin-top:3px; width:17px; height:17px; accent-color:var(--blue); flex:none; }
.check a{ color:var(--blue); text-decoration:underline; }
.form__status{ grid-column:1/-1; font-size:.92rem; min-height:1em; }
.form__status.is-ok{ color:#16855B; } .form__status.is-err{ color:#D33; }

/* ============================================================ FOOTER */
.footer{ background:var(--dark); color:#B7C4DE; padding:64px 0 30px; overflow:hidden; }
.footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer__brand .brand__name{ color:#fff; font-family:var(--f-display); font-size:1.3rem; }
.footer__brand p{ margin-top:10px; font-size:.93rem; color:#9FB0CE; max-width:34ch; }
.footer__nav, .footer__legal{ display:flex; flex-direction:column; gap:11px; padding-top:6px; }
.footer__nav a, .footer__legal a{ font-size:.93rem; color:#B7C4DE; transition:color .15s; }
.footer__nav a:hover, .footer__legal a:hover{ color:#fff; }
.footer__word{ font-family:var(--f-display); font-weight:700; font-size:clamp(3rem, 15vw, 11rem); line-height:.9; letter-spacing:-.03em; text-align:center; margin:36px 0 8px; background:linear-gradient(180deg, rgba(90,162,255,.18), rgba(90,162,255,0)); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none; }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:14px; font-size:.84rem; color:#7E8BAA; }

/* ============================================================ SCROLL-REVEAL */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }
.steps .step:nth-child(2){ transition-delay:.08s; } .steps .step:nth-child(3){ transition-delay:.16s; } .steps .step:nth-child(4){ transition-delay:.24s; }
.cards .card:nth-child(2),.work__card:nth-child(2){ transition-delay:.08s; }
.cards .card:nth-child(3),.work__card:nth-child(3){ transition-delay:.16s; }
.cards .card:nth-child(4){ transition-delay:.08s; } .cards .card:nth-child(5){ transition-delay:.16s; } .cards .card:nth-child(6){ transition-delay:.24s; }

/* ============================================================ RESPONSIVE */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:48px; } .hero__demo{ max-width:480px; }
  .steps{ grid-template-columns:repeat(2,1fr); } .steps::before{ display:none; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .work{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .split, .kontakt{ grid-template-columns:1fr; gap:40px; } .split--rev .split__text{ order:0; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav__links, .nav__cta{ display:none; } .nav__burger{ display:flex; } .nav__mobile{ display:flex; }
  .hero{ padding:124px 0 72px; } .section{ padding:78px 0; }
  .steps, .cards{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; } .founders{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; padding:24px; }
  .footer__inner{ grid-template-columns:1fr; }
  .browser, .hero__demo:hover .browser{ transform:none; }
  .note{ flex-direction:column; align-items:flex-start; gap:12px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .ticker__track{ transform:none; }
}

/* ============================================================ RECHTSSEITEN */
.legal{ padding:128px 0 90px; }
.legal__head{ margin-bottom:40px; }
.legal h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:10px; }
.legal__lead{ color:var(--muted); }
.legal h2{ font-size:1.3rem; margin:38px 0 12px; }
.legal h3{ font-size:1.05rem; margin:24px 0 8px; }
.legal p{ color:var(--ink-soft); margin-bottom:14px; }
.legal ul{ list-style:disc; padding-left:22px; margin-bottom:14px; color:var(--ink-soft); }
.legal li{ margin-bottom:6px; }
.legal a{ color:var(--blue); text-decoration:underline; }
.legal .fill{ background:#FFF3CD; padding:1px 6px; border-radius:5px; font-family:var(--f-mono); font-size:.92em; }
.legal__back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; font-weight:500; color:var(--blue); }
.legal__note{ margin:8px 0 32px; padding:16px 20px; border-left:3px solid var(--gold); background:#FFFAEF; border-radius:0 10px 10px 0; font-size:.92rem; color:var(--ink-soft); }


/* ============================================================ NACH-OBEN-BUTTON */
.to-top{ position:fixed; right:24px; bottom:24px; z-index:60; width:50px; height:50px; border-radius:14px; border:none; cursor:pointer; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 32px -12px rgba(10,27,51,.65); opacity:0; transform:translateY(16px) scale(.92); pointer-events:none; transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .2s ease; }
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--blue); transform:translateY(-3px); }
.to-top:focus-visible{ outline:3px solid var(--azure); outline-offset:3px; }
.to-top svg{ display:block; }

@media (max-width:680px){ .to-top{ right:16px; bottom:16px; width:46px; height:46px; } }
@media (prefers-reduced-motion:reduce){ .to-top{ transition:opacity .2s ease; } }

/* ============================================================ SCHWEBENDE INFO-CHIPS (Hero) */
.chip{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 8px; background:rgba(255,255,255,.97); color:var(--ink); font-size:.86rem; font-weight:600; border-radius:999px; box-shadow:0 16px 34px -16px rgba(7,24,47,.65); border:1px solid rgba(255,255,255,.6); white-space:nowrap; }
.chip__ic{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.chip__ic .ico{ width:16px; height:16px; }
.chip__ic--violet{ background:#9B6CFF; } .chip__ic--teal{ background:#14B8A6; } .chip__ic--blue{ background:#2160D8; }
.chip--1{ top:-20px; left:-26px; animation:floaty 6s ease-in-out infinite; }
.chip--2{ top:44%; right:-20px; animation:floaty 6.6s ease-in-out infinite .6s; }
.chip--3{ bottom:36px; left:-34px; animation:floaty 7.2s ease-in-out infinite .3s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@media (max-width:680px){ .chip{ display:none; } }
@media (prefers-reduced-motion:reduce){ .chip{ animation:none; } }

/* ============================================================ LOGO (Marke) */
.brand__logo{ display:block; }
.brand__logo--color{ display:none; }
.nav.is-scrolled .brand__logo--white{ display:none; }
.nav.is-scrolled .brand__logo--color{ display:block; }
.footer__brandrow{ display:inline-flex; align-items:center; gap:10px; }

/* ============================================================ TOAST (Bestätigung) */
.toast{ position:fixed; top:18px; left:50%; transform:translate(-50%,-150%); z-index:80; max-width:calc(100% - 32px); display:flex; align-items:center; gap:11px; padding:14px 20px; background:#0C2547; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 18px 40px -16px rgba(7,24,47,.7); font-size:.95rem; font-weight:500; opacity:0; pointer-events:none; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.toast::before{ content:""; width:9px; height:9px; border-radius:50%; background:#3ED9A4; flex:none; box-shadow:0 0 0 4px rgba(62,217,164,.18); }
.toast.is-visible{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }

/* Honeypot gegen Spam-Bots (für Menschen unsichtbar) */
.hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

/* Gründer-Foto: ersetzt die Initialen, sobald ein <img> eingesetzt wird */
.founder__avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

@media (prefers-reduced-motion:reduce){ .toast{ transition:opacity .3s ease; } }