:root{
  --bg:#ffffff;--bg-soft:#f4f5f7;--fg:#0a0b0d;--fg-soft:#5a6069;--line:#e4e6ea;
  --accent:#2e5bff;--accent-glow:#5b82ff;--card:#ffffff;
  --shadow:0 24px 60px -30px rgba(10,20,60,.28);--maxw:1180px;
  --font:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0a0b0d;--bg-soft:#111318;--fg:#f4f5f7;--fg-soft:#9aa1ac;--line:#20242c;
  --card:#12141a;--accent:#4f74ff;--accent-glow:#7d9bff;--shadow:0 30px 70px -30px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --bg:#0a0b0d;--bg-soft:#111318;--fg:#f4f5f7;--fg-soft:#9aa1ac;--line:#20242c;
  --card:#12141a;--accent:#4f74ff;--accent-glow:#7d9bff;--shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --bg:#ffffff;--bg-soft:#f4f5f7;--fg:#0a0b0d;--fg-soft:#5a6069;--line:#e4e6ea;
  --accent:#2e5bff;--accent-glow:#5b82ff;--card:#ffffff;--shadow:0 24px 60px -30px rgba(10,20,60,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;text-wrap:balance;line-height:1.02}
h1{font-size:clamp(2.9rem,7.4vw,6rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h3{font-size:1.22rem;letter-spacing:-.02em}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);font-weight:600}
.lead{font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--fg-soft);max-width:56ch}
section{padding:clamp(90px,13vw,180px) 0}
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.98rem;
  padding:.92em 1.5em;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .2s ease,background .2s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 30px -12px var(--accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px var(--accent)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-weight:800;font-size:1.32rem;letter-spacing:-.04em;display:flex;align-items:center;gap:.5em}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.nav-links{display:flex;gap:28px;align-items:center;font-size:.94rem;font-weight:500;color:var(--fg-soft)}
/* Bewusst nur .nav-top: seit es Unterpunkte gibt, würde ein pauschales
   ".nav-links a" auch die Links im Klapp-Panel einfärben. */
.nav-links .nav-top:hover,.nav-links .nav-top.active{color:var(--fg)}
.nav-links .nav-top.active{color:var(--accent)}
.nav-cta{display:flex;gap:14px;align-items:center}
.theme-btn{background:none;border:1px solid var(--line);color:var(--fg);width:38px;height:38px;
  border-radius:50%;cursor:pointer;font-size:1rem}
/* MOBILES MENÜ
   Greift ausschließlich unter 900px. Am Rechner bleibt die Kopfzeile
   unverändert: Burger und Menü-Button sind dort gar nicht sichtbar. */
.nav-toggle{display:none}

@media(max-width:900px){
  /* Vier Dinge müssen nebeneinander passen: Logo, Toggle, Button, Burger.
     Deshalb hier etwas engere Ränder und Abstände als am Rechner. */
  header.nav .wrap.nav-in{padding-left:18px;padding-right:18px}
  .nav-cta{gap:9px}
  .theme-btn{width:36px;height:36px}

  /* „Demo buchen" bleibt oben, aber deutlich kompakter — sonst bleibt
     für den Burger kein Platz. Darf nie umbrechen. */
  .nav-cta .btn-primary{
    font-size:.84rem;padding:.68em 1.05em;white-space:nowrap;
    box-shadow:0 8px 20px -12px var(--accent);
  }

  /* Die Links werden zum Klapp-Panel unter der Kopfzeile */
  .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    padding:10px 18px 20px;
    /* Voll deckend: hinter dem Menü darf keine Schlagzeile durchschimmern,
       sonst sind die Links unruhig zu lesen. Die Kopfzeile selbst bleibt milchig. */
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 26px 50px -26px color-mix(in srgb,#000 60%,transparent);
    max-height:calc(100vh - 70px);
    max-height:calc(100dvh - 70px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none}

  /* Große Tippflächen — jede Zeile mindestens 48px hoch.
     Gilt für die oberste Ebene; die Unterpunkte sind weiter unten geregelt. */
  .nav-links > a,
  .nav-links .nav-top{
    display:flex;align-items:center;
    padding:15px 2px;font-size:1.06rem;color:var(--fg-soft);
    border-bottom:1px solid color-mix(in srgb,var(--fg) 8%,transparent);
  }
  .nav-links .nav-top.active{color:var(--accent)}
  .nav-links > a:last-child{border-bottom:none}

  /* Der Burger selbst */
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;cursor:pointer;
    background:none;border:1px solid var(--line);border-radius:12px;color:var(--fg);
  }
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    content:"";display:block;width:20px;height:2px;border-radius:2px;
    background:currentColor;
    transition:transform .22s var(--ease-out),opacity .16s linear,background .16s linear;
  }
  .nav-toggle-bars::before{position:absolute;left:0;top:-6px}
  .nav-toggle-bars::after{position:absolute;left:0;top:6px}

  /* Offen: die drei Striche werden zum X */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

  /* Hintergrund nicht mitscrollen, solange das Menü offen ist */
  body.nav-open{overflow:hidden}
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .nav-links,.nav-toggle-bars,
  .nav-toggle-bars::before,.nav-toggle-bars::after{transition:none}
}

/* generic reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  .status .live{animation:none}}

/* section head */
.sec-head .eyebrow{display:block;margin-bottom:16px}
.sec-head h2{max-width:18ch}
.sec-head p{margin-top:20px}

/* HERO (home) */
.hero{padding-top:clamp(60px,9vw,120px);position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1 span{color:var(--accent)}
.hero .lead{margin-top:26px}
.hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-note{margin-top:22px;font-family:var(--mono);font-size:.78rem;color:var(--fg-soft)}

/* DEMO WIDGET */
.demo{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.demo::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 80% -10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%);pointer-events:none}
.demo-head{display:flex;align-items:center;justify-content:space-between;position:relative}
.demo-who{display:flex;align-items:center;gap:12px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-glow));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.1rem}
.demo-who b{font-size:.98rem}
.demo-who small{display:block;font-family:var(--mono);font-size:.68rem;color:var(--fg-soft);letter-spacing:.14em;text-transform:uppercase}
.status{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:7px}
.status .live{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
canvas#wave{width:100%;height:120px;display:block;margin:22px 0 6px;border-radius:14px;background:var(--bg-soft)}
.transcript{min-height:44px;font-size:1rem;color:var(--fg);line-height:1.45}
.transcript .cursor{display:inline-block;width:2px;height:1.05em;background:var(--accent);
  margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.call-btn{margin-top:20px;width:100%;justify-content:center}
.call-btn.ringing{animation:shake .5s ease}

/* Einwilligung zur Gespraechsaufzeichnung — erscheint erst beim Klick auf "Anruf starten". */
.consent{position:absolute;inset:auto 16px 16px;z-index:5;
  background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--line);border-radius:18px;padding:20px 20px 18px;
  box-shadow:var(--shadow);animation:consent-in .22s ease}
.consent[hidden]{display:none}
.consent b{display:block;font-size:15px;margin-bottom:6px}
.consent p{font-size:13px;line-height:1.55;color:var(--fg-soft);margin:0 0 14px}
.consent a{color:var(--accent);text-decoration:underline}
.consent-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;
  line-height:1.45;cursor:pointer;margin-bottom:14px}
.consent-check input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none;cursor:pointer}
.consent .btn{width:100%;justify-content:center}
.consent .btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}
.consent-x{position:absolute;top:10px;right:10px;width:28px;height:28px;line-height:1;
  display:grid;place-items:center;font-size:19px;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:var(--fg-soft)}
.consent-x:hover{background:var(--bg-soft);color:var(--fg)}
@keyframes consent-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}


/* Rechtsseiten (Datenschutz/Impressum) */
.draft-note{border:1px dashed var(--accent);border-radius:14px;padding:16px 18px;margin-bottom:40px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);max-width:70ch}
.draft-note b{display:block;margin-bottom:6px;font-size:14px}
.draft-note p{margin:0;font-size:13px;line-height:1.55;color:var(--fg-soft)}
.draft-note a{color:var(--accent)}
.prose h2{font-size:1.35rem;margin:40px 0 14px}
.prose h2:first-child{margin-top:0}
.prose a{color:var(--accent);text-decoration:underline}
.table-scroll{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.dp-table{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
.dp-table th,.dp-table td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.dp-table th{background:var(--bg-soft);font-weight:600}
.dp-table td{color:var(--fg-soft)}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* TRUST */
.trust{padding:0 0 40px;text-align:center}
.trust p{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:24px}
.logos{display:flex;flex-wrap:wrap;gap:44px;justify-content:center;align-items:center;opacity:.55;font-weight:800;font-size:1.28rem;letter-spacing:-.03em}

/* PROBLEM */
.problem{background:var(--bg-soft)}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
@media(max-width:820px){.prob-grid{grid-template-columns:1fr}}
.prob-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px}
.prob-card .big{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.prob-card p{margin-top:12px;color:var(--fg-soft)}

/* PRODUCTS */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
@media(max-width:820px){.prod-grid{grid-template-columns:1fr}}
.prod{border:1px solid var(--line);border-radius:20px;padding:32px;background:var(--card);
  transition:border-color .2s,transform .2s;position:relative;overflow:hidden}
.prod:hover{border-color:var(--accent);transform:translateY(-4px)}
.prod .idx{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.12em}
.prod h3{margin:18px 0 12px}
.prod p{color:var(--fg-soft);font-size:.98rem}
.prod .go{margin-top:22px;display:inline-flex;font-weight:700;color:var(--accent);font-size:.92rem;gap:.4em}
.prod:hover .go{gap:.75em}

/* HOW */
.how{background:var(--bg-soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:34px 28px;border-left:1px solid var(--line)}
.step:first-child{border-left:none}
@media(max-width:820px){.step{border-left:none;border-top:1px solid var(--line)}.step:first-child{border-top:none}}
.step .num{font-family:var(--mono);color:var(--accent);font-size:.8rem;letter-spacing:.18em}
.step h3{margin:16px 0 10px}
.step p{color:var(--fg-soft);font-size:.96rem}

/* PROOF */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
@media(max-width:820px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.stat .n .u{color:var(--accent)}
.stat .l{margin-top:10px;color:var(--fg-soft);font-size:.94rem}
.ph{display:none}

/* SIDE */
.side{background:var(--bg-soft)}
.side-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:24px;padding:44px}
@media(max-width:820px){.side-in{grid-template-columns:1fr}}
.side-in h3{font-size:1.7rem;letter-spacing:-.03em}
.side-in p{color:var(--fg-soft);margin-top:12px;max-width:52ch}
.side-tags{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:.72rem;border:1px solid var(--line);border-radius:100px;padding:5px 12px;color:var(--fg-soft)}

/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
@media(max-width:820px){.price-grid{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:20px;padding:32px;background:var(--card);display:flex;flex-direction:column}
.plan.pop{border-color:var(--accent);box-shadow:0 20px 50px -28px var(--accent);position:relative}
.plan.pop .badge{position:absolute;top:-12px;left:32px;background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:100px}
.plan h3{font-size:1.15rem}
.plan .amt{font-size:2.4rem;font-weight:800;letter-spacing:-.04em;margin:16px 0 4px}
.plan .amt small{font-size:.9rem;font-weight:500;color:var(--fg-soft)}
.plan ul{list-style:none;padding:0;margin:22px 0 28px;display:flex;flex-direction:column;gap:12px}
.plan li{font-size:.94rem;color:var(--fg-soft);padding-left:26px;position:relative}
.plan li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:800}
.plan .btn{margin-top:auto;justify-content:center}

/* FAQ */
.faq{background:var(--bg-soft)}
.faq-list{margin-top:48px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;
  align-items:center;gap:20px;font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary .pm{color:var(--accent);font-size:1.5rem;font-weight:400;transition:transform .2s}
details[open] summary .pm{transform:rotate(45deg)}
details p{padding:0 0 26px;color:var(--fg-soft);max-width:62ch}

/* FINAL CTA */
.final{text-align:center}
.final-card{background:var(--fg);color:var(--bg);border-radius:30px;
  padding:clamp(48px,8vw,90px) 28px;position:relative;overflow:hidden}
.final-card::before{content:"";position:absolute;inset:0;background:
  radial-gradient(80% 120% at 50% -20%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 55%);opacity:.5}
.final-card h2{position:relative;color:var(--bg)}
.final-card p{position:relative;margin:20px auto 0;color:color-mix(in srgb,var(--bg) 70%,var(--fg));max-width:48ch}
.final-card .btn{position:relative;margin-top:36px}
.final-card .btn-primary{background:var(--accent)}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:60px 0 40px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-col h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);margin:0 0 16px;font-weight:600}
.foot-col a{display:block;color:var(--fg-soft);font-size:.94rem;padding:5px 0}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--fg-soft);font-family:var(--mono)}

/* ---- SUBPAGE SHARED ---- */
.page-hero{padding:clamp(70px,11vw,140px) 0 clamp(50px,7vw,90px)}
.page-hero h1{font-size:clamp(2.5rem,6vw,4.6rem)}
.page-hero .lead{margin-top:24px}
.back{font-family:var(--mono);font-size:.78rem;color:var(--fg-soft);letter-spacing:.05em;display:inline-block;margin-bottom:26px}
.back:hover{color:var(--accent)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}
.prose p{color:var(--fg-soft);font-size:1.06rem;line-height:1.7;max-width:60ch;margin-bottom:20px}
.feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.feature-list li{position:relative;padding-left:32px;font-size:1.02rem}
.feature-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.feature-list li b{display:block;margin-bottom:2px}
.feature-list li span{color:var(--fg-soft);font-size:.96rem}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
@media(max-width:820px){.team-grid{grid-template-columns:1fr}}
.member{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
.member .pic{width:60px;height:60px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-glow));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.3rem;margin-bottom:18px}
.member b{font-size:1.05rem}
.member small{display:block;font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.1em;margin:4px 0 12px}
.member p{color:var(--fg-soft);font-size:.94rem}

/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px}
@media(max-width:820px){.values{grid-template-columns:1fr}}
.value{padding:32px 26px;border-left:1px solid var(--line)}
.value:first-child{border-left:none}
@media(max-width:820px){.value{border-left:none;border-top:1px solid var(--line)}.value:first-child{border-top:none}}
.value .k{font-family:var(--mono);font-size:.75rem;color:var(--accent);letter-spacing:.15em}
.value h3{margin:14px 0 10px}
.value p{color:var(--fg-soft);font-size:.96rem}

/* projects */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
@media(max-width:820px){.proj-grid{grid-template-columns:1fr}}
.proj{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);
  transition:transform .2s,border-color .2s}
.proj:hover{transform:translateY(-4px);border-color:var(--accent)}
.proj .thumb{height:200px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--bg-soft)),var(--bg-soft));
  display:grid;place-items:center;font-weight:800;font-size:1.6rem;letter-spacing:-.03em;color:var(--fg)}
.proj .body{padding:26px}
.proj .cat{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase}
.proj h3{margin:12px 0 10px}
.proj p{color:var(--fg-soft);font-size:.95rem}
.proj .metric{margin-top:16px;font-weight:800;color:var(--accent);font-size:1.05rem}

/* blog */
.blog-list{margin-top:48px;border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  padding:28px 0;border-bottom:1px solid var(--line);transition:padding-left .2s}
.post:hover{padding-left:10px}
@media(max-width:700px){.post{grid-template-columns:1fr;gap:8px}}
.post .date{font-family:var(--mono);font-size:.76rem;color:var(--fg-soft);letter-spacing:.05em;white-space:nowrap}
.post h3{font-size:1.3rem}
.post .cat{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.post p{color:var(--fg-soft);font-size:.96rem;margin-top:6px}

/* contact */
.form{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:var(--shadow)}
.field{margin-bottom:20px;display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft)}
.field input,.field textarea,.field select{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;font-family:var(--font);font-size:1rem;color:var(--fg);width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field textarea{resize:vertical;min-height:120px}
.contact-info{display:flex;flex-direction:column;gap:26px}
.contact-info .row .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:6px}
.contact-info .row a,.contact-info .row b{font-size:1.15rem;font-weight:700}
.contact-info .row a:hover{color:var(--accent)}
.form-note{margin-top:8px;font-family:var(--mono);font-size:.76rem;color:var(--fg-soft)}
.sent{color:var(--accent);font-weight:700;margin-top:14px;display:none}

/* booking — 2-Schritt-Flow (Infos → Cal.com-Slot) */
.booking{display:flex;flex-direction:column;gap:0}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.step-idx{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.12em;
  border:1px solid var(--line);border-radius:100px;padding:3px 9px}
.step-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft)}
.just-write-link{display:inline-block;margin-top:14px;background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--fg-soft);
  transition:color var(--d-fast,.3s) var(--ease-out,ease)}
.just-write-link:hover{color:var(--accent)}
.booking-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:20px}
.booking-summary .bs-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.booking-summary .bs-text b{font-size:1rem}
.booking-summary .bs-sub{font-family:var(--mono);font-size:.8rem;color:var(--fg-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.booking-summary .just-write-link{margin-top:0;white-space:nowrap}
.cal-embed{min-height:520px;width:100%;border-radius:14px;overflow:hidden}
.cal-fallback{color:var(--fg-soft);font-size:.96rem;line-height:1.6;padding:24px 4px}
.cal-fallback a{color:var(--accent);font-weight:700}

/* ============================================================
   AWARD LAYER — loader, glass, 3D layers, motion polish
   (colors: only bg/fg/grey + --accent; no new hues)
   ============================================================ */

/* motion tokens */
:root{
  --ease:cubic-bezier(.65,0,.35,1);   /* ~power3.inOut */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --d-fast:.3s;--d-base:.6s;--d-slow:1.1s;
}

/* --- 1. Cinematic loader --- */
body.is-loading{overflow:hidden;height:100vh}
.loader{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:grid;place-items:center;will-change:transform}
/* Der blaue Vorhang, der beim Abgang nach oben gezogen wird.
   Kein deckendes Blau mehr, sondern blaues Milchglas: Man sieht die
   Prozentzahl dahinter verschwimmen, waehrend er darueber steigt.
   Die helle Oberkante ist das Licht, das sich in der Kante faengt. */
.loader-wipe{position:absolute;inset:0;
  transform:translateY(100%);will-change:transform;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent-glow) 60%,transparent) 0%,
    color-mix(in srgb,var(--accent) 74%,transparent) 22%,
    color-mix(in srgb,var(--accent) 82%,transparent) 100%);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-top:1px solid color-mix(in srgb,#fff 55%,transparent);
  box-shadow:0 -34px 90px -18px color-mix(in srgb,var(--accent) 75%,transparent)}
/* Wer Transparenz abbestellt hat, bekommt den deckenden Vorhang von frueher. */
@media (prefers-reduced-transparency:reduce){
  .loader-wipe{background:var(--accent);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.loader-inner{position:relative;text-align:center}
.loader-count{display:block;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(4rem,14vw,10rem);font-variant-numeric:tabular-nums;color:var(--fg)}
.loader-tag{display:block;margin-top:18px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg-soft)}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* JS-driven reveals: kill old CSS transition so GSAP owns it */
.js-anim .reveal{transition:none}
.js-anim .reveal.in{opacity:1;transform:none}

/* --- 3./4. Three.js background layers: always BEHIND content --- */
.hero,.how{position:relative}
.hero-3d,.how-3d{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-3d canvas,.how-3d canvas{width:100%;height:100%;display:block;will-change:transform}
.hero .wrap,.how .wrap{position:relative;z-index:1}

/* --- 5. Frosted glass (light + dark via color-mix on theme vars) --- */
header.nav{
  background:color-mix(in srgb,var(--bg) 58%,transparent);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
}
.demo,.prod,.plan,.member,.form{
  background:color-mix(in srgb,var(--card) 68%,transparent);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid color-mix(in srgb,var(--fg) 9%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),var(--shadow);
}
.plan.pop{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}

/* --- 6. Apple-like hovers (transform/opacity only, shared curve) --- */
.btn{transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out),
  background var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),
  color var(--d-fast) var(--ease-out);will-change:transform}
.btn-primary:hover{transform:translateY(-2px) scale(1.03);
  box-shadow:0 18px 44px -12px var(--accent),0 0 0 6px color-mix(in srgb,var(--accent) 14%,transparent)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost:hover{transform:translateY(-2px);
  box-shadow:0 10px 28px -14px color-mix(in srgb,var(--fg) 40%,transparent)}
.prod,.plan,.member,.proj,.prob-card,.stat{
  transition:transform var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),
  box-shadow var(--d-fast) var(--ease-out)}
.prod:hover,.proj:hover{transform:translateY(-6px) scale(1.01);border-color:var(--accent);
  box-shadow:0 26px 60px -28px color-mix(in srgb,var(--accent) 55%,transparent)}
.plan:hover,.member:hover,.prob-card:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 22px 50px -30px color-mix(in srgb,var(--accent) 45%,transparent)}
.nav-links a{transition:color var(--d-fast) var(--ease-out),opacity var(--d-fast) var(--ease-out)}
.foot-col a{transition:color var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.prod .go{transition:gap var(--d-fast) var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .btn,.prod,.plan,.member,.proj,.prob-card,.stat{transition:none}
  .btn-primary:hover,.prod:hover,.proj:hover,.plan:hover,.member:hover,.prob-card:hover{transform:none}
  .hero-3d,.how-3d{display:none}
}

/* ============================================================
   WÄHRUNGSRECHNER (waehrungsrechner.html)
   Nutzt die Bewegungs-Token der AWARD LAYER oben (--ease-out, --d-fast)
   und nur die vorhandenen Farben — Akzent, bg, fg. Keine neuen Farbtöne.
   ============================================================ */

/* Die Bühne trägt die Leucht-Flächen. Sie muss übergelaufene Unschärfe
   abschneiden, sonst schiebt sich der Schein über die Seitenränder. */
.fx-stage{position:relative;max-width:820px;margin:0 auto;padding:34px 0;isolation:isolate}

/* Zwei weiche Farbflächen HINTER dem Glas. Ohne sie hat das Glas nichts
   zu brechen und sieht aus wie eine graue Box. */
.fx-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(72px);
  opacity:.62;pointer-events:none;will-change:transform}
.fx-orb-a{width:min(58%,380px);aspect-ratio:1;top:-4%;left:-8%;
  background:radial-gradient(circle,var(--accent) 0%,transparent 68%)}
.fx-orb-b{width:min(48%,320px);aspect-ratio:1;bottom:-8%;right:-6%;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 68%);opacity:.48}

/* --- Die Glasplatte ---------------------------------------------------- */
.fx-card{position:relative;border-radius:28px;overflow:hidden;
  background:color-mix(in srgb,var(--card) 42%,transparent);
  backdrop-filter:blur(44px) saturate(190%);
  -webkit-backdrop-filter:blur(44px) saturate(190%);
  border:1px solid color-mix(in srgb,var(--fg) 11%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent),   /* Lichtkante oben */
    inset 0 -1px 0 color-mix(in srgb,var(--fg) 6%,transparent),
    0 34px 90px -40px color-mix(in srgb,var(--accent) 60%,transparent),
    var(--shadow);
  transition:transform var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out);
  will-change:transform}
.fx-card-in{position:relative;z-index:1;padding:clamp(26px,4.6vw,44px)}

/* Der Schein, der dem Zeiger folgt. Bewegt wird nur per transform —
   das läuft auf der Grafikkarte und ruckelt deshalb nicht. */
.fx-follow{position:absolute;top:0;left:0;width:420px;height:420px;
  margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,transparent) 0%,transparent 62%);
  filter:blur(26px);
  transition:opacity var(--d-base) var(--ease-out);will-change:transform,opacity}
.fx-card:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--fg) 6%,transparent),
    0 44px 110px -42px color-mix(in srgb,var(--accent) 78%,transparent),
    var(--shadow)}
.fx-card:hover .fx-follow{opacity:1}

/* --- Die zwei Zeilen --------------------------------------------------- */
.fx-rows{display:flex;flex-direction:column;gap:12px}
.fx-row{display:flex;flex-direction:column;gap:9px}
.fx-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-soft);font-weight:600;padding-left:2px}

/* Eine Zeile ist eine hellere Glasfläche AUF dem Glas. Bewusst nur leicht
   abgesetzt — zwei starke Glasflächen übereinander frisst die Lesbarkeit. */
.fx-field{display:flex;align-items:baseline;gap:14px;
  padding:18px 22px;border-radius:18px;
  background:color-mix(in srgb,var(--bg) 34%,transparent);
  border:1px solid color-mix(in srgb,var(--fg) 8%,transparent);
  transition:border-color var(--d-fast) var(--ease-out),
             background var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out)}
.fx-field:hover{border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.fx-field:focus-within{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--bg) 50%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.fx-field-out{background:color-mix(in srgb,var(--bg) 18%,transparent)}

.fx-code{font-family:var(--mono);font-size:.94rem;font-weight:700;
  color:var(--fg-soft);letter-spacing:.04em;flex:none;min-width:3.4em}

/* Die Zahlen. Tabellenziffern, damit beim Tippen nichts zappelt —
   ohne die springt die Zeile bei jeder Ziffer. */
.fx-input,.fx-output{
  flex:1;min-width:0;font-family:var(--font);
  font-size:clamp(1.9rem,5.4vw,2.9rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.1;font-variant-numeric:tabular-nums;
  color:var(--fg);text-align:right}
.fx-input{background:none;border:0;padding:0;width:100%;-webkit-appearance:none;appearance:none}
.fx-input:focus{outline:none}
.fx-input::placeholder{color:color-mix(in srgb,var(--fg-soft) 55%,transparent)}
.fx-output{display:block;color:var(--accent)}

/* --- Der Tauschknopf --------------------------------------------------- */
.fx-swap{align-self:center;margin:-4px 0;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;position:relative;z-index:2;
  color:var(--fg);
  background:color-mix(in srgb,var(--card) 72%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);
  box-shadow:0 8px 22px -12px color-mix(in srgb,var(--fg) 50%,transparent);
  transition:transform var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out)}
.fx-swap:hover{color:var(--accent);border-color:var(--accent);
  transform:scale(1.08);
  box-shadow:0 12px 30px -12px var(--accent),0 0 0 5px color-mix(in srgb,var(--accent) 13%,transparent)}
/* Rückmeldung im Moment des Drückens, nicht erst beim Loslassen */
.fx-swap:active{transform:scale(.94)}
.fx-swap.dreht{transform:rotate(180deg) scale(1.02)}

/* --- Kurszeile --------------------------------------------------------- */
/* Kein Flex-Umbruch hier: sonst rutscht der Punkt am Handy allein in die Zeile
   darüber. Als inline-block läuft der Text sauber um ihn herum. */
.fx-kurs{margin-top:22px;padding-left:2px;line-height:1.7;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--fg-soft)}
.fx-punkt{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:9px;vertical-align:middle;position:relative;top:-1px;
  background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
/* Notnagel-Kurs: derselbe Punkt, aber ohne Akzentfarbe — stiller Hinweis,
   dass die Zahl nicht von heute ist. */
.fx-kurs.alt .fx-punkt{background:var(--fg-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg-soft) 20%,transparent)}

/* --- Preis-Kürzel ------------------------------------------------------ */
.fx-chips{margin-top:26px;padding-top:22px;
  border-top:1px solid color-mix(in srgb,var(--fg) 9%,transparent)}
.fx-chips-titel{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-soft);font-weight:600;margin-bottom:14px}
.fx-chips-reihe{display:flex;flex-wrap:wrap;gap:9px}
.fx-chip{font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--fg-soft);
  padding:.58em .95em;border-radius:100px;cursor:pointer;white-space:nowrap;
  background:color-mix(in srgb,var(--bg) 28%,transparent);
  border:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
  transition:transform var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out)}
.fx-chip:hover{color:var(--fg);transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 10px 24px -14px var(--accent)}
.fx-chip:active{transform:translateY(0) scale(.97)}
.fx-chip.aktiv{color:var(--accent);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}

.fx-fussnote{max-width:600px;margin:34px auto 0;text-align:center;
  font-size:.88rem;line-height:1.65;color:var(--fg-soft)}

@media(max-width:520px){
  .fx-field{padding:15px 17px;gap:10px}
  .fx-code{font-size:.85rem;min-width:3em}
  .fx-orb{filter:blur(56px)}
  /* Mit dem Finger getroffen wird nur, was mindestens 44px hoch ist.
     Am Rechner reicht die schlankere Form, hier nicht. */
  .fx-chip{padding:1em 1.1em}
  .fx-swap{width:52px;height:52px}
}

/* --- Rücksicht --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fx-card,.fx-swap,.fx-chip,.fx-field{transition:none}
  .fx-card:hover,.fx-swap:hover,.fx-chip:hover{transform:none}
  .fx-follow{display:none}
  .fx-swap.dreht{transform:none}
}
/* Wer Transparenz abbestellt hat, bekommt feste Flächen statt Milchglas. */
@media (prefers-reduced-transparency:reduce){
  .fx-card{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
  .fx-field{background:var(--bg-soft)}
  .fx-swap{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
  .fx-orb,.fx-follow{display:none}
}
@media (prefers-contrast:more){
  .fx-card,.fx-field,.fx-chip{border-color:var(--fg)}
}

/* Nur für Screenreader. Die Zahl im Rechner zählt beim Ändern hoch — würde man
   dieses Zählen vorlesen lassen, redet die Sprachausgabe pausenlos. Deshalb
   liegt hier eine ruhige Fassung, die erst nach dem Tippen einmal meldet. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Hinweiszeile unter dem Preisraster (preise.html) */
.preis-hinweis{margin-top:30px;text-align:center;font-size:.92rem;color:var(--fg-soft)}
.preis-hinweis a{color:var(--accent);font-weight:700;
  transition:opacity var(--d-fast) var(--ease-out)}
.preis-hinweis a:hover{opacity:.72}

/* ============================================================
   NAVIGATION MIT PANELS
   Am Rechner: Glas-Panel unter der Leiste, gleiches Rezept wie .fx-card.
   Am Handy: die Unterpunkte klappen in der Liste auf.
   ============================================================ */

/* --- Oberste Ebene ----------------------------------------------------- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:.4em;color:inherit;cursor:pointer}

/* Das Pfeilchen. Als gedrehtes Quadrat gebaut statt als Zeichen, damit es in
   jeder Schrift gleich aussieht. */
.nav-chev{width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--d-fast) var(--ease-out),opacity var(--d-fast) var(--ease-out);
  opacity:.55}
.nav-item.offen .nav-chev{transform:rotate(-135deg) translate(-2px,-2px);opacity:1}
.nav-item.offen > .nav-top{color:var(--fg)}

/* Unterstrich, der beim Überfahren aus der Mitte wächst */
.nav-top::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform var(--d-fast) var(--ease-out)}
.nav-links > .nav-top{position:relative}
.nav-links > .nav-top:hover::after,
.nav-item.offen > .nav-top::after{transform:scaleX(1)}

/* --- Das Glas-Panel ---------------------------------------------------- */
/* Äußere Hülle: Glas, Schatten, das Auffahren. Kein overflow — sonst wird der
   Schatten abgeschnitten. */
.nav-panels{
  /* Kein negativer z-index hier — damit zerlegt WebKit den backdrop-filter,
     und die Schlagzeile dahinter steht ungefiltert im Panel. */
  position:absolute;top:100%;left:0;right:0;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  /* Fast dicht — und das ist Absicht. Der Währungsrechner kommt mit 42 % aus,
     weil hinter ihm nichts steht. Hier fährt das Panel über die grösste Schrift
     der Seite; schon 12 % Durchlass machten daraus ein lesbares Geisterbild.
     Die Glas-Wirkung kommt deshalb von innen: Lichtkante oben, Leuchtfeld unter
     dem Zeiger, kräftige Unschärfe. Genau so bauen auch Apples Sheets. */
  background:color-mix(in srgb,var(--card) 96%,transparent);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border-bottom:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent),
    0 40px 90px -46px color-mix(in srgb,var(--accent) 70%,transparent),
    var(--shadow);
  transition:opacity var(--d-fast) var(--ease-out),
             transform var(--d-fast) var(--ease-out),
             visibility var(--d-fast)}
.nav-panels.offen{opacity:1;visibility:visible;transform:none}

/* Innere Hülle: schneidet ab, während die Höhe zwischen zwei Panels wechselt. */
.nav-panels-in{position:relative;overflow:hidden;
  transition:height var(--d-fast) var(--ease-out)}

/* Der Schein, der der Maus folgt — wie im Währungsrechner, nur breiter. */
.nav-glow{position:absolute;top:0;left:0;width:560px;height:560px;
  margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 46%,transparent) 0%,transparent 64%);
  filter:blur(38px);
  transition:opacity var(--d-base) var(--ease-out);will-change:transform,opacity}
.nav-panels.offen .nav-glow{opacity:1}

/* Solange ein Panel offen ist, sollen Leiste und Panel als EINE Glasfläche
   lesen — die Trennlinie dazwischen verschwindet. */
header.nav.panel-offen{border-bottom-color:transparent}

/* Nur das aktive Panel steht im Fluss; die Höhe der Hülle richtet sich danach. */
.nav-panel{display:none;position:relative;z-index:1;padding:34px 0 30px}
.nav-panel.an{display:block}
.nav-panel-in{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Auch das Preise-Panel behält das Dreier-Raster und lässt die dritte Spalte
   leer. Mit eigenem Zweier-Raster säßen die Karten woanders, und beim Wechsel
   zwischen den Panels würde die erste Karte seitlich wegspringen. */

/* --- Die Karten -------------------------------------------------------- */
/* Optik der .prod-Karten von der Startseite, nur kompakter. */
.nav-card{display:flex;flex-direction:column;padding:22px 24px;border-radius:18px;
  background:color-mix(in srgb,var(--bg) 26%,transparent);
  border:1px solid color-mix(in srgb,var(--fg) 8%,transparent);
  opacity:0;transform:translateY(10px);
  transition:transform var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out),
             opacity var(--d-fast) var(--ease-out)}
.nav-panel.an .nav-card{opacity:1;transform:none}
/* Gestaffelt hereinkommen — die Karten folgen dem Glas, statt mit ihm zu erscheinen */
.nav-panel.an .nav-card:nth-child(1){transition-delay:.04s}
.nav-panel.an .nav-card:nth-child(2){transition-delay:.08s}
.nav-panel.an .nav-card:nth-child(3){transition-delay:.12s}
.nav-card:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow:0 22px 50px -30px color-mix(in srgb,var(--accent) 60%,transparent)}
.nav-card .idx{font-family:var(--mono);font-size:.68rem;color:var(--accent);letter-spacing:.14em}
.nav-card h3{margin:12px 0 8px;font-size:1.06rem}
.nav-card p{color:var(--fg-soft);font-size:.9rem;line-height:1.55}
/* margin-top:auto statt fester Abstand — sonst rutscht der Link bei kürzerem
   Text nach oben und die Karten wirken nebeneinander unsauber. */
.nav-card .go{margin-top:auto;padding-top:16px;display:inline-flex;gap:.4em;
  font-weight:700;color:var(--accent);font-size:.86rem;
  transition:gap var(--d-fast) var(--ease-out)}
.nav-card:hover .go{gap:.75em}

.nav-panel-foot{margin-top:20px;padding-top:18px;
  border-top:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.nav-panel-foot a{font-size:.88rem;font-weight:700;color:var(--accent);
  transition:opacity var(--d-fast) var(--ease-out)}
.nav-panel-foot a:hover{opacity:.72}

/* Die Klapp-Listen gehören dem Handy. Am Rechner erledigt das Panel die Arbeit. */
.nav-sub{display:none}

@media(max-width:1080px) and (min-width:901px){
  .nav-links{gap:20px}
  .nav-panel-in{gap:14px}
}

/* --- Handy: Ausklapp-Listen statt Panel -------------------------------- */
@media(max-width:900px){
  .nav-panels{display:none}
  .nav-item{display:block}
  .nav-links .nav-top{justify-content:space-between;width:100%}
  /* Der Pfeil zeigt hier nach unten und dreht beim Aufklappen */
  .nav-chev{margin-top:-4px;margin-right:4px;width:8px;height:8px;border-width:2px}
  .nav-item.offen .nav-chev{transform:rotate(-135deg) translate(-3px,-3px)}
  .nav-top::after{display:none}

  .nav-sub{
    display:block;overflow:hidden;height:0;
    transition:height var(--d-fast) var(--ease-out)}
  .nav-sub a{
    display:flex;align-items:center;min-height:46px;
    padding:6px 2px 6px 16px;font-size:.98rem;color:var(--fg-soft);
    border-left:2px solid color-mix(in srgb,var(--accent) 30%,transparent);
    margin-left:2px}
  .nav-sub a:active{color:var(--accent)}
  /* Luft nach unten gehört an den letzten Eintrag, nicht an die Liste selbst —
     sonst zählt sie in die gemessene Höhe hinein und bleibt beim Zuklappen stehen. */
  .nav-sub a:last-child{margin-bottom:10px}
}

/* --- Rücksicht --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .nav-panels,.nav-panels-in,.nav-card,.nav-chev,.nav-top::after,.nav-sub{transition:none}
  .nav-card{opacity:1;transform:none}
  .nav-glow{display:none}
  .nav-card:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav-panels{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-card{background:var(--bg-soft)}
  .nav-glow{display:none}
}
@media (prefers-contrast:more){
  .nav-panels,.nav-card{border-color:var(--fg)}
}

/* ============================================================
   GLAS FÜR ALLE KARTENFLÄCHEN
   Wertet die AWARD LAYER weiter oben auf. Dasselbe Rezept wie die Karte im
   Währungsrechner, nur ohne den Schein, der dem Zeiger folgt — der bleibt
   dem Rechner vorbehalten.
   Steht bewusst am Ende der Datei: gleiche Spezifität wie die Regeln oben,
   die spätere gewinnt. So bleibt oben lesbar, wie es vorher war.
   ============================================================ */

/* .stat hatte bisher GAR KEINEN Kasten — kein Hintergrund, kein Rand, kein
   Innenabstand. Die Zahlen standen frei im Raum. Erst damit wird ein Feld draus. */
.stat{padding:26px 24px;border-radius:18px}

.demo,.prod,.plan,.member,.form,.proj,.prob-card,.stat,.side-in{
  background:color-mix(in srgb,var(--card) 55%,transparent);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent),   /* Lichtkante oben */
    inset 0 -1px 0 color-mix(in srgb,var(--fg) 5%,transparent),
    0 26px 64px -34px color-mix(in srgb,var(--accent) 40%,transparent),
    var(--shadow);
}

/* Zwei Ausnahmen, dichter als der Rest: Das Demo-Fenster liegt über der
   bewegten 3D-Fläche, das Formular enthält Eingabefelder. Beides braucht
   ruhigen Grund, sonst flimmert der Inhalt. */
.demo,.form{background:color-mix(in srgb,var(--card) 74%,transparent)}

/* --- Der Schein hinter den Rastern ------------------------------------- */
/* Das ist der eigentliche Trick: Glas ohne etwas dahinter sieht aus wie eine
   graue Box. Diese Farbflächen liegen HINTER den Karten und geben dem Glas
   erst etwas zu brechen. Rein über Pseudo-Elemente — kein zusätzliches Markup
   in den 13 HTML-Dateien. */
.prod-grid,.price-grid,.proof-grid,.proj-grid,.prob-grid,.team-grid{
  position:relative;isolation:isolate}
.prod-grid::before,.price-grid::before,.proof-grid::before,
.proj-grid::before,.prob-grid::before,.team-grid::before{
  content:"";position:absolute;z-index:-1;inset:-12% -6%;pointer-events:none;
  background:
    radial-gradient(46% 64% at 14% 2%,color-mix(in srgb,var(--accent) 32%,transparent) 0%,transparent 68%),
    radial-gradient(42% 58% at 88% 98%,color-mix(in srgb,var(--accent-glow) 24%,transparent) 0%,transparent 68%);
  filter:blur(58px)}

/* --- Der Glow beim Überfahren, überarbeitet ---------------------------- */
/* Vorher nur ein weicher Schatten. Jetzt drei Lagen: hellere Lichtkante,
   ein enger Akzentring direkt am Rand, und darunter der weite Schein. Der
   Ring ist das, was den Unterschied macht — er zeichnet die Kante nach,
   statt die Karte nur anzuleuchten. */
.prod,.plan,.member,.proj,.prob-card,.stat{
  transition:transform var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out)}
.prod:hover,.proj:hover,.plan:hover,.member:hover,.prob-card:hover,.stat:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 48%,transparent),
    0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),
    0 32px 72px -30px color-mix(in srgb,var(--accent) 72%,transparent),
    var(--shadow);
}
.prod:hover,.proj:hover{transform:translateY(-6px) scale(1.008)}
/* Das hervorgehobene Preispaket leuchtet dauerhaft, nicht erst beim Überfahren */
.plan.pop{
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent),
    0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),
    0 30px 70px -32px color-mix(in srgb,var(--accent) 62%,transparent),
    var(--shadow);
}

/* --- Rücksicht --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .prod,.plan,.member,.proj,.prob-card,.stat{transition:none}
  .prod:hover,.proj:hover,.plan:hover,.member:hover,.prob-card:hover,.stat:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .demo,.prod,.plan,.member,.form,.proj,.prob-card,.stat,.side-in{
    background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
  .prod-grid::before,.price-grid::before,.proof-grid::before,
  .proj-grid::before,.proj-grid::before,.prob-grid::before,.team-grid::before{display:none}
}
@media (prefers-contrast:more){
  .demo,.prod,.plan,.member,.form,.proj,.prob-card,.stat,.side-in{border-color:var(--fg)}
}

/* ============================================================
   WÄHRUNGSRECHNER — Seite offensichtlicher machen
   Zwei gemessene Probleme: der Rechner begann erst bei 640px und war auf
   einem Laptop beim Ankommen unsichtbar, und das Eingabefeld war von der
   Ergebniszeile kaum zu unterscheiden.
   ============================================================ */

/* Knapperer Kopf NUR auf dieser Seite. Hier ist nicht die Schlagzeile die
   Hauptsache, sondern das Werkzeug darunter — es gehört über die Falz. */
.fx-hero{padding:clamp(38px,5.5vw,64px) 0 clamp(22px,3vw,34px)}
.fx-hero h1{font-size:clamp(1.95rem,3.9vw,3.1rem);max-width:20ch;margin-inline:auto}
.fx-hero .lead{font-size:clamp(.98rem,1.3vw,1.1rem);max-width:52ch}
.fx-stage{padding-top:16px}

/* --- Das Eingabefeld als Eingabefeld kennzeichnen ---------------------- */
/* Vorher unterschied es sich vom Ergebnis nur durch 16 % Hintergrund. Jetzt:
   Text-Cursor über der ganzen Zeile, kräftigerer Rahmen, und beim Überfahren
   hebt es sich sichtbar an. */
.fx-field-ein{cursor:text;
  border-color:color-mix(in srgb,var(--accent) 26%,transparent);
  background:color-mix(in srgb,var(--bg) 46%,transparent)}
.fx-field-ein:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.fx-field-ein .fx-input{cursor:text}

/* Der Hinweis in der Beschriftung. Verschwindet, sobald das Feld benutzt wird —
   wer schon tippt, braucht die Aufforderung nicht mehr. */
.fx-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fx-tipp{font-family:var(--font);font-size:.68rem;font-weight:700;
  letter-spacing:.02em;text-transform:none;
  color:var(--accent);padding:.24em .7em;border-radius:100px;
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  transition:opacity var(--d-fast) var(--ease-out)}
.fx-row:focus-within .fx-tipp{opacity:0}

@media(max-width:520px){
  .fx-tipp{font-size:.64rem}
  .fx-hero{padding-top:26px}
}
@media (prefers-reduced-motion:reduce){
  .fx-tipp{transition:none}
}

/* ============================================================
   KNOPF ZUM WÄHRUNGSRECHNER
   Vorher war das eine graue Textzeile mit einem blauen Wort darin — das
   liest sich wie Kleingedrucktes, nicht wie etwas zum Anklicken. Jetzt ein
   eigenständiger Knopf: Symbol, zwei Zeilen Text, Pfeil.
   Bewusst als Geist-Knopf gehalten, damit er "Demo buchen" nicht die Show
   stiehlt — das bleibt der wichtigste Knopf der Seite.
   ============================================================ */
.preis-fuss{margin-top:36px;display:flex;flex-direction:column;
  align-items:center;gap:18px;text-align:center}
.preis-fuss .preis-hinweis{margin-top:0}

.umrechnen-cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:12px 22px 12px 14px;border-radius:100px;text-align:left;
  background:color-mix(in srgb,var(--card) 60%,transparent);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent),
    0 16px 40px -26px color-mix(in srgb,var(--accent) 60%,transparent);
  transition:transform var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out);
  will-change:transform}
.umrechnen-cta:hover{transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent),
    0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),
    0 24px 54px -24px color-mix(in srgb,var(--accent) 78%,transparent)}
.umrechnen-cta:active{transform:translateY(-1px) scale(.99)}

.umrechnen-icon{flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.umrechnen-text{display:flex;flex-direction:column;line-height:1.25}
.umrechnen-text b{font-size:.98rem;font-weight:700;color:var(--fg)}
.umrechnen-text small{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--fg-soft);margin-top:3px}
.umrechnen-pfeil{color:var(--accent);font-weight:800;margin-left:4px;
  transition:transform var(--d-fast) var(--ease-out)}
.umrechnen-cta:hover .umrechnen-pfeil{transform:translateX(4px)}

@media(max-width:520px){
  .umrechnen-cta{width:100%;justify-content:flex-start;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .umrechnen-cta,.umrechnen-pfeil{transition:none}
  .umrechnen-cta:hover{transform:none}
  .umrechnen-cta:hover .umrechnen-pfeil{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .umrechnen-cta{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  .umrechnen-cta{border-color:var(--fg)}
}

/* ============================================================
   WEITERFÜHRENDE WEGE (Stand 2026-08-01)
   Vier Seiten waren vorher nur übers Menü erreichbar — projekte.html,
   produkte.html, ueber-uns.html, blog.html. Wer im Text las, bekam nie
   einen Weg dorthin angeboten. Besonders teuer war das bei projekte.html:
   die vier Modellrechnungen beantworten "rechnet sich das für mich?",
   wurden aber an keiner Stelle angeboten, an der die Frage entsteht.

   Der Glas-Knopf .umrechnen-cta ist ab jetzt der allgemeine
   "hier geht es weiter"-Knopf, nicht mehr nur der Weg zum Währungs-
   rechner. Bewusst kein neues Bauteil: derselbe Knopf, denselben Rang —
   er soll "Demo buchen" weiterhin nicht die Show stehlen.

   .weg-fuss ist nur die Zeile, in der er steht, für Abschnitte ohne
   .preis-fuss. Umbricht am Handy, weil auf den Produktseiten drei
   davon nebeneinander liegen.
   ============================================================ */
.weg-fuss{margin-top:36px;display:flex;flex-wrap:wrap;
  align-items:stretch;justify-content:center;gap:14px}
/* Steht die Zeile schon in einem .preis-fuss, bringt der seinen eigenen
   Abstand mit — sonst klafft es doppelt. */
.preis-fuss .weg-fuss{margin-top:0}
@media(max-width:520px){
  .weg-fuss{flex-direction:column;gap:12px}
  /* Am Handy stehen bis zu drei Knoepfe gestapelt. Ohne das hier klebt der
     Pfeil am Text und die Pfeile stehen zackig versetzt untereinander. */
  .weg-fuss .umrechnen-pfeil{margin-left:auto}
}

/* ============================================================
   ARTIKEL (Stand 2026-08-01)
   .prose gab es nur fuer die Rechtsseiten und konnte h2, p und a.
   Artikel brauchen mehr: Zwischentitel, Listen, einen Kasten fuer
   Annahmen und die Zeile mit Datum, Autor und Lesedauer.

   Der Kasten ist Absicht: Jede Zahl in einem Artikel, die nicht
   nachpruefbar ist, steht in einem Kasten mit offenen Annahmen —
   dieselbe Regel wie bei den Modellrechnungen auf projekte.html.
   Erfundene Kundenergebnisse hat diese Seite am 31.07. verloren und
   bekommt sie nicht durch die Hintertuer zurueck.
   ============================================================ */
.prose h3{font-size:1.08rem;margin:32px 0 10px;letter-spacing:-.01em}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px;max-width:60ch}
.prose li{color:var(--fg-soft);font-size:1.06rem;line-height:1.7;margin-bottom:9px}
.prose li::marker{color:var(--accent)}
.prose li b,.prose p b{color:var(--fg)}
.prose h2+p{margin-top:0}

.artikel-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:28px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-soft)}
.artikel-meta span{display:inline-flex;align-items:center;gap:8px}
.artikel-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 60%,transparent)}
.artikel-meta .autor{color:var(--fg)}

.artikel-kasten{margin:30px 0;padding:22px 24px;border-radius:18px;max-width:64ch;
  background:color-mix(in srgb,var(--card) 60%,transparent);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent)}
.artikel-kasten .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.artikel-kasten p:last-child,.artikel-kasten ul:last-child{margin-bottom:0}
.artikel-kasten p,.artikel-kasten li{font-size:.99rem}

@media (prefers-reduced-transparency:reduce){
  .artikel-kasten{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  .artikel-kasten{border-color:var(--fg)}
}

/* ============================================================
   PROJEKTKARTEN — Profile statt Markennamen
   Der erfundene Firmenname ist einem Profil gewichen: Branche, Ort, Grösse,
   Anrufvolumen. Das sagt mehr als ein Fantasiename und behauptet keinen Kunden.
   Glas und Hover kommen schon aus "GLAS FÜR ALLE KARTENFLÄCHEN" weiter oben.
   ============================================================ */

/* Das Kopfbild trägt jetzt drei Dinge statt einer Zeile Text. */
.proj .thumb{position:relative;height:auto;min-height:150px;
  display:block;padding:22px 24px;
  background:
    radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--accent) 26%,transparent) 0%,transparent 62%),
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--bg-soft)),var(--bg-soft));
  border-bottom:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}

/* Monogramm — gibt jeder Karte ein Gesicht, ohne ein Logo zu erfinden. */
.proj-mono{position:absolute;right:20px;bottom:14px;
  font-weight:800;font-size:3.4rem;letter-spacing:-.05em;line-height:1;
  color:color-mix(in srgb,var(--accent) 26%,transparent);
  user-select:none;pointer-events:none}

/* Die Kennzeichnung. Bewusst klein und ruhig: sie soll ehrlich sein,
   nicht die Karte entwerten. */
.proj-badge{display:inline-block;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--fg-soft);
  padding:.3em .7em;border-radius:100px;
  background:color-mix(in srgb,var(--fg) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}

.proj-profil{display:block;margin-top:30px;position:relative;z-index:1}
.proj-profil b{display:block;font-size:1.32rem;font-weight:800;letter-spacing:-.03em;color:var(--fg)}
.proj-profil small{display:block;margin-top:6px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--fg-soft)}

/* Ausgangslage / Aufbau / Wirkung — zwei Spalten, damit die Begriffe
   als Raster lesbar sind statt als Fliesstext. */
.proj-zeilen{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:16px 0 0}
.proj-zeilen dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);font-weight:700;padding-top:.25em}
.proj-zeilen dd{margin:0;color:var(--fg-soft);font-size:.92rem;line-height:1.55}

.proj .metric{margin-top:20px}

/* Die offengelegte Rechnung. Aufbau wie die FAQ-Aufklapper der Seite. */
.proj-annahmen{margin-top:16px;border-top:1px solid color-mix(in srgb,var(--fg) 9%,transparent)}
.proj-annahmen summary{display:flex;justify-content:space-between;align-items:center;gap:12px;
  cursor:pointer;list-style:none;padding:13px 0 12px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-soft);transition:color var(--d-fast) var(--ease-out)}
.proj-annahmen summary::-webkit-details-marker{display:none}
.proj-annahmen summary:hover{color:var(--accent)}
.proj-annahmen .pm{font-family:var(--font);font-size:1.05rem;font-weight:700;color:var(--accent);
  transition:transform var(--d-fast) var(--ease-out)}
.proj-annahmen[open] .pm{transform:rotate(45deg)}
.proj-annahmen p{padding-bottom:14px;color:var(--fg-soft);font-size:.88rem;line-height:1.65}

.proj-cta{display:inline-flex;align-items:center;min-height:44px;
  font-weight:700;font-size:.9rem;color:var(--accent);
  transition:gap var(--d-fast) var(--ease-out)}
.proj-cta:hover{text-decoration:underline}
.proj h3 a{color:inherit}
.proj h3 a:hover{color:var(--accent)}

@media(max-width:520px){
  .proj-zeilen{grid-template-columns:1fr;gap:3px 0}
  .proj-zeilen dd{margin-bottom:9px}
  .proj-mono{font-size:2.8rem;right:16px}
  /* Die Meta-Zeile bricht am Handy um und lief sonst bis unters Monogramm. */
  .proj-profil{padding-right:76px}
}
@media (prefers-reduced-motion:reduce){
  .proj-annahmen summary,.proj-annahmen .pm,.proj-cta{transition:none}
  .proj-annahmen[open] .pm{transform:none}
}
@media (prefers-contrast:more){
  .proj-badge{border-color:var(--fg);color:var(--fg)}
}

/* Die ganze Karte ist wieder anklickbar. Beim Wechsel von <a> auf <article>
   ging das verloren, und die Überschrift allein war mit 23px als Tippfläche
   zu klein. Der Fuss-Link spannt sich unsichtbar über die Karte; der
   Aufklapper liegt darüber und bleibt bedienbar. */
.proj{position:relative}
.proj-cta::after{content:"";position:absolute;inset:0;z-index:1}
.proj-annahmen{position:relative;z-index:2}

/* Der Vorhang beim Seitenwechsel: kein deckender Grund, keine Zahl.
   Die Seite ist dahinter sofort sichtbar und bedienbar — das Glas zieht
   nur darueber weg. pointer-events:none, damit Klicks durchgehen. */
.loader-vorhang{background:transparent;pointer-events:none}

/* ============================================================
   ECHTE SEITENÜBERGÄNGE
   Der Browser blendet zwischen zwei Dokumenten über, statt hart neu
   aufzubauen. Ersetzt den Vorhang überall dort, wo es unterstützt wird
   (Chrome, Edge, Safari ab 18.2). Ältere Browser ignorieren den ganzen
   Block — für die springt in award.js weiterhin der Vorhang ein.
   ============================================================ */
@view-transition { navigation: auto }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.22,1,.36,1)}

/* Die Kopfzeile bekommt einen eigenen Namen und wird dadurch als DASSELBE
   Element über die Seitengrenze getragen — sie bleibt stehen, statt aus- und
   wieder einzublenden. Genau das macht den Unterschied zwischen "neue Seite"
   und "eine Website". */
header.nav{view-transition-name:kopfzeile}

/* Der Inhalt darunter kommt weich von unten nach. */
@keyframes vt-rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vt-raus{from{opacity:1}to{opacity:0}}
::view-transition-new(root){animation-name:vt-rein}
::view-transition-old(root){animation-name:vt-raus;animation-duration:.22s}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}