/* ============ Ampercode — Design-System „Freundlich-verspielt“ ============ */
/* Mint-Basis · Türkis-Held · Koralle-Akzent · weiße Karten */
:root{
  --mint:#E7F4EF;
  --mint-deep:#D6ECE4;
  --card:#FFFFFF;
  --teal:#1FA89A;
  --teal-deep:#0F6E56;
  --teal-soft:#9FE1CB;
  --aqua:#5FD0C4;
  --aqua-deep:#0F6E56;
  --aqua-soft:#D6F2EC;
  --signal:#E23D5C;
  --signal-hover:#C92E4D;
  --signal-deep:#B02342;
  --ink:#0B2E33;
  --muted:#4d6a6b;
  --muted-dark:#9fbdc0;
  --petrol:#0B2E33;
  --petrol-line:#1c4a51;
  --slate:#3E5C63;
  --line:rgba(11,46,51,.1);
  --display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1120px;
  --radius:20px;
  --shadow:0 10px 30px -14px rgba(11,46,51,.18);
  --shadow-hover:0 18px 44px -18px rgba(11,46,51,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--mint);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.eyebrow{
  font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.02em;
  color:var(--teal-deep);text-transform:lowercase;display:inline-flex;gap:.5ch;align-items:center;
}
.eyebrow::before{content:"~";color:var(--aqua);font-size:1.1em}
.accent{color:var(--teal)}
.dot{color:var(--aqua)}
.squiggle{position:relative;white-space:nowrap}
.squiggle::after{
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.28em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C12,2 22,10 32,6 C42,2 52,10 62,6 C72,2 82,10 92,6 C102,2 112,9 118,6' fill='none' stroke='%235FD0C4' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* ---------- Buttons & Badges ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:600;
  font-size:.98rem;padding:.9rem 1.7rem;border-radius:999px;cursor:pointer;border:2px solid transparent;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px) rotate(-.5deg)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:#189384;box-shadow:var(--shadow-hover)}
.btn-light{background:#fff;color:var(--teal-deep);box-shadow:var(--shadow)}
.btn-light:hover{background:var(--mint);box-shadow:var(--shadow-hover)}
.btn-signal{background:var(--signal);color:#fff;box-shadow:var(--shadow)}
.btn-signal:hover{background:var(--signal-hover);box-shadow:var(--shadow-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(11,46,51,.2)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep);background:#fff}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}
.badge{
  display:inline-block;font-size:.8rem;font-weight:600;padding:.32rem .85rem;border-radius:999px;
  background:var(--aqua-soft);color:var(--aqua-deep);transform:rotate(-2deg);
}
.badge.teal{background:#D2F0E9;color:var(--teal-deep);transform:rotate(1.5deg)}

/* ---------- Header ---------- */
/* Kopfzeile als Milchglas: durchscheinend, aber nicht durchsichtig.
   Der Inhalt dahinter bleibt erkennbar und wird weichgezeichnet.

   Der Effekt lebt vom Zusammenspiel zweier Werte: die halbdurchlaessige
   Farbe laesst durchschauen, backdrop-filter macht das Durchgeschaute
   unscharf. Ohne die Farbe waere es klares Glas, ohne den Filter nur
   blasse Folie.

   -webkit-backdrop-filter muss mitgeschrieben werden, sonst zeigen Safari
   und alle iPhones nur die blasse Flaeche ohne Unschaerfe.

   Beim Scrollen setzt site.js die Klasse "scrolled": Dann wird die Flaeche
   etwas dichter, damit die Navigation ueber unruhigem Inhalt lesbar bleibt. */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(231,244,239,.45);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.site-header.scrolled{
  border-bottom-color:var(--line);
  background:rgba(231,244,239,.62);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:.65rem}
.brand-mark{width:40px;height:40px;flex:none;transform:rotate(4deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.06)}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.03em}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.97rem;color:var(--muted);font-weight:500;position:relative;padding:.2rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:3px;border-radius:2px;background:var(--aqua);transition:width .25s cubic-bezier(.34,1.56,.64,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{width:100%;background:var(--teal)}
.nav-cta{display:flex;align-items:center;gap:1.2rem}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.nav-toggle span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--ink);margin:5px 0;transition:.25s}

/* ---------- Unterseiten-Hero ---------- */
.page-hero{padding:clamp(3.2rem,7vw,5.2rem) 0 clamp(2rem,4vw,3rem)}
.page-hero h1{font-size:clamp(2.3rem,4.8vw,3.6rem);margin:1rem 0 1rem}
.page-hero p{font-size:1.12rem;color:var(--muted);max-width:40rem}

/* ---------- Sektionen ---------- */
.section{padding:clamp(3.4rem,7vw,5.6rem) 0}
.section.on-white{background:#FDFCFA}
.section.on-deep{background:var(--mint-deep)}
.section-head{max-width:40rem;margin-bottom:2.6rem}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:.9rem 0 1rem}
.section-head p{color:var(--muted);font-size:1.06rem}

/* ---------- Karten ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.card{
  background:var(--card);border-radius:var(--radius);padding:2rem 1.9rem;box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;position:relative;
}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-hover)}
.card:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
.card-ic{
  width:52px;height:52px;border-radius:16px;background:var(--mint);display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;transform:rotate(-3deg);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .card-ic{transform:rotate(3deg) scale(1.08)}
.card-ic svg{width:26px;height:26px;color:var(--teal)}
.card:nth-child(2n) .card-ic{background:var(--aqua-soft)}
.card:nth-child(2n) .card-ic svg{color:var(--teal)}
.card h3{font-size:1.25rem;margin-bottom:.6rem}
.card p{color:var(--muted);font-size:1rem}
.card .card-index{font-family:var(--mono);font-size:.78rem;color:var(--teal);float:right}
.card .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:600;font-size:.94rem;color:var(--teal-deep)}
.card .more:hover{color:var(--aqua)}

/* ---------- Pakete (2 Kauf-Modelle) ---------- */
.pakete{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:stretch}
.paket{
  background:var(--card);border-radius:24px;padding:2.2rem 2rem;box-shadow:var(--shadow);position:relative;
  display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.paket:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.paket.highlight{border:2.5px solid var(--teal);transform:rotate(-.8deg)}
.paket.highlight:hover{transform:rotate(-.8deg) translateY(-6px)}
.paket .flag{
  position:absolute;top:-15px;right:22px;background:var(--signal);color:#fff;font-size:.8rem;font-weight:700;
  padding:.35rem 1rem;border-radius:999px;transform:rotate(3deg);box-shadow:var(--shadow);
}
.paket h3{font-size:1.45rem;margin-bottom:.3rem}
.paket .paket-sub{color:var(--muted);font-size:.96rem;margin-bottom:1.2rem}
.paket .preis{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.02em;margin-bottom:.2rem}
.paket .preis small{font-size:.95rem;font-weight:500;color:var(--muted)}
.preis-alt{
  display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--muted);
  text-decoration:line-through;text-decoration-color:rgba(11,46,51,.45);text-decoration-thickness:1.5px;
}
.preis-note strong{color:var(--signal-deep)}
.rabatt-chip{
  display:inline-block;background:var(--signal);color:#fff;font-family:var(--mono);font-weight:700;
  font-size:.85rem;padding:.22rem .7rem;border-radius:999px;transform:rotate(-4deg) translateY(-.3rem);
  margin-left:.45rem;box-shadow:var(--shadow);vertical-align:middle;letter-spacing:.02em;
}

/* Karte komplett klickbar (Overlay-Link), Buttons bleiben eigenständig */
.paket-link{color:inherit}
.paket-link::after{content:"";position:absolute;inset:0;border-radius:24px}
.paket .btn,.paket .details-link{position:relative;z-index:1}
.details-link{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.94rem;
  color:var(--teal-deep);margin-bottom:1.2rem;
}
.details-link:hover{color:var(--signal)}
.paket:has(.paket-link:hover) h3,.paket .paket-link:hover{color:var(--teal-deep)}

/* FAQ (Paket-Detailseiten) */
.faq{display:grid;gap:.8rem}
.faq details{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.1rem 1.4rem;transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.faq details:hover{transform:translateY(-2px)}
.faq summary{
  cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--teal);flex:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:.98rem;margin-top:.7rem}

/* Preis-Held auf Paket-Detailseiten */
.preis-hero{
  background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:1.8rem 2rem;
  display:inline-block;margin-top:1.4rem;
}
/* Der Preis muss auch ausserhalb einer Paket-Karte gross sein. Die Regel
   .paket .preis greift hier nicht, sonst steht der Preis so klein da wie
   Fliesstext und geht im Kasten unter. */
.preis-hero .preis{
  font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,2.6rem);
  letter-spacing:-.02em;line-height:1.1;
}
.preis-hero .preis small{font-size:1rem;font-weight:500;color:var(--muted)}
/* Hinweis auf die laufenden Kosten, direkt unter dem Festpreis.
   Bewusst abgesetzt statt versteckt: Wer erst weiter unten erfaehrt, dass
   noch etwas dazukommt, fuehlt sich ueberrumpelt. */
.preis-dazu{
  margin:1.1rem 0 0;padding-top:1rem;border-top:1px dashed var(--line);
  font-size:.92rem;color:var(--muted);max-width:34rem;line-height:1.6;
}
.preis-dazu strong{color:var(--ink)}
.preis-dazu a{color:var(--teal-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.preis-dazu a:hover{color:var(--signal)}
.opt-alternativ{margin-top:.5rem !important;font-size:.9rem !important;opacity:.9}
.paket-wechsel{font-size:.95rem;color:var(--muted);margin-top:1.2rem}
.paket-wechsel a{color:var(--teal-deep);font-weight:600}
.paket-wechsel a:hover{color:var(--signal)}

/* ---------- Optionen (zubuchbare Leistungen) ----------
   Bewusst als Liste statt als Karten-Raster: Der Kunde soll die Preise
   untereinander vergleichen koennen, ohne die Augen springen zu lassen. */
.optionen{list-style:none;padding:0;margin:0;max-width:52rem;display:grid;gap:.9rem}
/* Bewusst auf .optionen eingegrenzt: Die Klasse "opt" wird in der Paketliste
   auf der Startseite bereits fuer ein anderes Aufzaehlungszeichen benutzt
   (.plist li.opt). Eine freistehende .opt-Regel wuerde dort mitgreifen. */
.optionen .opt{
  background:var(--card);border-radius:18px;padding:1.5rem 1.7rem;box-shadow:var(--shadow);
  display:flex;align-items:flex-start;gap:1.5rem;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.optionen .opt:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.opt-txt{flex:1}
.opt-txt h3{font-size:1.12rem;margin-bottom:.35rem}
.opt-txt p{color:var(--muted);font-size:.96rem;margin:0}
.opt-preis{flex:none;text-align:right;min-width:7.5rem;padding-left:1.2rem;border-left:1px solid var(--line)}
.opt-preis b{display:block;font-size:1.22rem;color:var(--teal-deep);white-space:nowrap}
.opt-preis span{display:block;font-size:.82rem;color:var(--muted);margin-top:.15rem}
/* Zweite Preiszeile fuer Optionen mit einmaliger Einrichtung zusaetzlich
   zur Monatsgebuehr. Abgesetzt, damit niemand die beiden Betraege
   zusammenliest oder die Einrichtung uebersieht. */
.opt-preis .einmalig{
  margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--ink);font-weight:600;white-space:nowrap;
}
.opt-note{margin-top:1.7rem;font-size:.95rem;color:var(--muted);max-width:52rem}
.opt-note a{color:var(--teal-deep);font-weight:600}
/* Auf schmalen Bildschirmen rutscht der Preis unter den Text, sonst
   wird die Beschreibung auf zwei Woerter pro Zeile zusammengequetscht. */
@media (max-width:640px){
  .optionen .opt{flex-direction:column;gap:.85rem}
  .opt-preis{
    text-align:left;border-left:0;padding-left:0;min-width:0;width:100%;
    border-top:1px solid var(--line);padding-top:.75rem;
  }
  .opt-preis b,.opt-preis span{display:inline}
  .opt-preis span{margin-left:.4rem}
  /* Die Einrichtungszeile bleibt auch schmal eine eigene Zeile — inline
     gesetzt liest sie sich sonst als Teil des Monatspreises. */
  .opt-preis .einmalig{display:block;margin-left:0;border-top:0;padding-top:.35rem;margin-top:.35rem}
}
.paket .preis-note{font-size:.82rem;color:var(--muted);margin-bottom:1.3rem}
.paket .btn{margin-top:auto;justify-content:center}
.plist{list-style:none;display:grid;gap:.6rem;margin-bottom:1.6rem}
.plist li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem}
.plist li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:8px;
  background:#D2F0E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3.5 3.5L15 6' fill='none' stroke='%230F6E56' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.plist li.opt::before{
  background:var(--aqua-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%230F6E56' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plist li.no{color:var(--muted);}
/* Trennt in der Paketkarte das Enthaltene vom Zubuchbaren. Die beiden
   Gruppen unterscheiden sich zusaetzlich am Symbol: Haekchen (.plist li)
   gegen Plus (.plist li.opt). Preise stehen bewusst nicht in der Karte —
   sie gehoeren auf die jeweilige Paket-Unterseite. */
.plist-label{
  font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:1.4rem 0 .7rem;padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.plist + .plist-label{margin-top:.3rem}
.plist.plist-opt{margin-bottom:1.6rem}
.plist li.no::before{
  background:#EEF2F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' stroke='%238aa0a0' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plist .li-note{color:var(--muted);font-size:.86rem;display:block}

/* ---------- Paket „bald verfügbar“ (ausgegraut) ---------- */
.paket.soon{opacity:.62;filter:grayscale(.55)}
.paket.soon:hover{transform:none;box-shadow:var(--shadow)}
.paket.soon .flag{background:var(--slate);color:#fff;transform:rotate(-2deg)}
.paket.soon h3{color:var(--muted)}
.btn-soon{
  background:#E6EEEB;color:var(--muted);box-shadow:none;border:none;cursor:not-allowed;
  pointer-events:none;justify-content:center;
}
.btn-soon:hover{transform:none;background:#E6EEEB}
.soon-note{display:block;text-align:center;font-size:.85rem;color:var(--muted);margin-top:.8rem}

/* Hinweisband „bald verfügbar“ auf der Detailseite */
.soon-banner{
  background:var(--slate);color:#fff;border-radius:16px;padding:1.1rem 1.4rem;
  display:inline-block;margin-top:1.2rem;font-size:.98rem;
}
.soon-banner strong{font-family:var(--display);font-weight:700}

/* ---------- Leistungs-Detailblöcke ---------- */
.service-block{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,4vw,3.2rem);
  padding:2.6rem 0;border-top:2px dashed rgba(11,46,51,.12);align-items:start;
}
.service-block:first-of-type{border-top:none}
.service-block .num{font-family:var(--mono);font-size:.85rem;color:var(--teal);margin-bottom:.6rem;display:block}
.service-block h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:.8rem}
.service-block .intro{color:var(--muted)}
.checklist{list-style:none;display:grid;gap:.7rem;margin-top:.4rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.checklist li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:8px;
  background:#D2F0E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3.5 3.5L15 6' fill='none' stroke='%230F6E56' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.checklist li:nth-child(2n)::before{background-color:var(--aqua-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3.5 3.5L15 6' fill='none' stroke='%230F6E56' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.checklist .li-note{color:var(--muted);font-size:.9rem;display:block}

/* Prozess-Schritte */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.step{
  background:var(--card);border-radius:var(--radius);padding:1.6rem 1.5rem;box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.step:hover{transform:translateY(-4px) rotate(-.8deg)}
.step:nth-child(2n):hover{transform:translateY(-4px) rotate(.8deg)}
.step b{font-family:var(--mono);font-size:.8rem;color:var(--teal);display:block;margin-bottom:.6rem}
.step h3{font-size:1.08rem;margin-bottom:.4rem}
.step p{font-size:.93rem;color:var(--muted)}

/* Vertrauens-Chips */
.trust-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.chip{
  background:var(--card);border-radius:var(--radius);padding:1.6rem 1.7rem;box-shadow:var(--shadow);
  display:flex;gap:1rem;align-items:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.chip:hover{transform:translateY(-4px) rotate(-.6deg)}
.chip b{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--teal-deep);letter-spacing:-.02em;flex:none}
.chip span{font-size:.92rem;color:var(--muted)}

/* Referenz-Karten */
.ref-card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.ref-card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:var(--shadow-hover)}
.ref-thumb{height:180px;background:var(--mint);position:relative;display:flex;align-items:center;justify-content:center}
.ref-thumb svg{width:64px;height:64px}
.ref-body{padding:1.4rem 1.5rem 1.6rem}
.ref-body .tag{font-family:var(--mono);font-size:.74rem;color:var(--teal)}
.ref-body h3{font-size:1.15rem;margin:.5rem 0 .5rem}
.ref-body p{font-size:.95rem;color:var(--muted)}
.ref-placeholder{box-shadow:none;border:2.5px dashed rgba(11,46,51,.18);background:transparent}
.ref-placeholder .ref-thumb{background:rgba(255,255,255,.5)}
.ref-placeholder:hover{border-color:var(--teal)}
.ref-body .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font-weight:600;font-size:.94rem;color:var(--teal-deep)}
.ref-body .more:hover{color:var(--aqua)}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
.field input,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--card);border:2px solid transparent;border-radius:14px;padding:.85rem 1rem;
  box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(31,168,154,.15)}
.form-note{font-size:.84rem;color:var(--muted);margin-top:.6rem}

/* ---------- Paketwahl im Kontaktformular ----------
   Aufbau: Das echte Radio-Feld liegt unsichtbar ueber der ganzen Kachel und
   faengt den Klick ab; die Beschriftung darunter ist nur Anzeige. So bleibt
   die Bedienung per Tastatur und Screenreader erhalten (ein echtes
   <input type="radio"> mit <label>), waehrend die Kachel frei gestaltbar ist.
   Ein reines display:none am Feld waere bequemer, wuerde es aber aus der
   Tastaturbedienung nehmen. */
.paketwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:.35rem}
.pw-item{position:relative}
.pw-item input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.pw-item label{
  display:block;pointer-events:none;
  border:2px solid var(--line);border-radius:14px;padding:.8rem .9rem;background:var(--card);
  transition:border-color .2s,background .2s;
}
.pw-item input:hover + label{border-color:var(--teal-soft)}
.pw-item input:checked + label{border-color:var(--teal);background:var(--mint)}
.pw-item input:focus-visible + label{outline:2px solid var(--teal);outline-offset:2px}
.pw-titel{display:block;font-weight:700;font-size:.95rem;color:var(--ink);line-height:1.3}
.pw-note{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem}
.pw-gruppe > .feldname{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
.pw-gruppe{margin-bottom:1.1rem;border:0;padding:0}
@media(max-width:640px){.paketwahl{grid-template-columns:1fr}}
.form-success{display:none;background:#D2F0E9;border-radius:14px;padding:1rem 1.1rem;color:var(--teal-deep);font-size:.96rem;margin-top:1rem;font-weight:500}
.form-success.show{display:block}
.form-error{display:none;background:var(--petrol);border-radius:14px;padding:1rem 1.1rem;color:#fff;font-size:.96rem;margin-top:1rem;font-weight:500}
.form-error.show{display:block}
.form-error a{color:var(--aqua);font-weight:600}
form button[type=submit][disabled]{opacity:.65;cursor:progress}
.contact-info{
  background:var(--card);border-radius:24px;padding:2rem 1.9rem;align-self:start;box-shadow:var(--shadow);
  transform:rotate(.8deg);
}
.contact-info h3{font-size:1.3rem;margin-bottom:1.2rem}
.info-item{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-bottom:2px dashed rgba(11,46,51,.1)}
.info-item:last-child{border-bottom:none}
.info-item .ic{width:40px;height:40px;border-radius:13px;background:var(--mint);display:flex;align-items:center;justify-content:center;flex:none;transform:rotate(-3deg)}
.info-item:nth-child(2n) .ic{background:var(--aqua-soft)}
.info-item .ic svg{width:19px;height:19px;color:var(--teal-deep)}
.info-item:nth-child(2n) .ic svg{color:var(--teal)}
.info-item .lbl{font-size:.8rem;color:var(--muted)}
.info-item .val{font-size:1.02rem;color:var(--ink);font-weight:600}
.info-item a.val:hover{color:var(--teal-deep)}

/* ---------- Wellen (aus V1, in der Mint-Welt) ---------- */
.wave-sep{line-height:0}
.wave-sep svg{width:100%;height:64px;display:block}
.river-line{display:flex;justify-content:center;padding:1.6rem 0 .4rem}
.river-line svg{width:min(var(--wrap),92vw);height:38px}

/* ---------- CTA-Band ---------- */
.cta-band{
  background:var(--teal);color:#fff;border-radius:24px;padding:clamp(2rem,5vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.cta-band::after{
  content:"~";position:absolute;right:-10px;bottom:-60px;font-family:var(--mono);font-size:13rem;
  color:rgba(255,255,255,.12);transform:rotate(-10deg);pointer-events:none;
}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.1rem);color:#fff}
.cta-band p{color:rgba(255,255,255,.85);margin-top:.4rem}
.cta-band .btn-light{border:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--petrol);color:#EAF4F0;padding:3.5rem 0 2rem}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid var(--petrol-line)}
.footer-brand .brand-name{color:#fff}
.footer-brand p{color:var(--muted-dark);font-size:.95rem;margin-top:1rem;max-width:22rem}
.footer-col h5{font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-soft);margin-bottom:1rem}
.footer-col a,.footer-col span{display:block;color:var(--muted-dark);font-size:.96rem;padding:.28rem 0;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.6rem;font-size:.86rem;color:var(--muted-dark)}
.footer-bottom .legal{display:flex;gap:1.4rem}

/* ---------- Rechtstexte ---------- */
.legal-page{max-width:46rem}
.legal-page h1{font-size:clamp(2rem,4vw,2.8rem);margin:.8rem 0 1.6rem}
.legal-page h2{font-size:1.3rem;margin:2.2rem 0 .7rem}
.legal-page p,.legal-page li{color:var(--muted);font-size:1rem}
.legal-page ul{padding-left:1.2rem;display:grid;gap:.3rem}
.legal-page .todo{
  background:var(--aqua-soft);border-radius:14px;padding:1rem 1.1rem;color:var(--aqua-deep);font-size:.95rem;margin:1.4rem 0;
}
.launch-warning{
  background:var(--petrol);color:#fff;border-radius:16px;padding:1.3rem 1.5rem;margin-bottom:1.8rem;box-shadow:var(--shadow);
}
.launch-warning strong{display:block;font-family:var(--display);font-size:1.1rem;font-weight:700;margin-bottom:.35rem}
.launch-warning p{font-size:.96rem;margin:0;color:rgba(255,255,255,.94);max-width:none}
.legal-page .ph{background:#D2F0E9;border-radius:6px;padding:0 .3em;font-family:var(--mono);font-size:.9em;color:var(--teal-deep)}

/* ---------- Reveal ---------- */
[data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.34,1.3,.5,1)}
[data-reveal]:not(.in){opacity:0;transform:translateY(24px) scale(.985)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .cards,.contact-grid,.service-block,.pakete{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .trust-chips{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .paket.highlight{transform:none}
  .paket.highlight:hover{transform:translateY(-6px)}
}
@media(max-width:760px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:block}
  .nav-links.open{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;gap:0;background:var(--mint);border-bottom:1px solid var(--line);padding:.5rem 4vw 1rem;z-index:60}
  .nav-links.open a{padding:.9rem 0;border-bottom:1px solid var(--line);width:100%}
  .form-row,.steps{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  /* Impressum/Datenschutz mit dem Daumen sicher treffbar (statt 23px hoch)
     und genug Abstand, damit der Chat-Knopf nicht davor sitzt. */
  .footer-bottom .legal a{display:inline-block;padding:.55rem 0}
  .site-footer{padding-bottom:5.5rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.card,.step,.chip,.paket,.ref-card{transition:none}
}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}