/* ============ Ampercode — Design-System „Ruhig-seriös“ ============ */
/*
   Tiefblau traegt die Seite. Tuerkis nur noch sparsam (Haken in Listen,
   Textlinks, ein Wort in Ueberschriften). Rot ausschliesslich auf den
   beiden Paket-Buttons — eine Signalfarbe wirkt nur, solange sie selten
   ist.

   Die Variablennamen bleiben wie gehabt (--mint, --petrol, --signal …),
   damit die rund 900 Zeilen darunter unverändert weiterlaufen. Geändert
   wurden nur die Werte.
*/
:root{
  --mint:#EAF1F7;          /* helle Flächen, früher Mintgrün */
  --mint-deep:#DCE8F2;
  --card:#FFFFFF;
  --white-soft:#FDFCFA;   /* leicht getoente weisse Flaechen */
  --teal:#1FA89A;          /* Akzent: Buttons, Hervorhebungen */
  --teal-deep:#0F7E72;
  --teal-soft:#9BDDD3;
  --aqua:#3FBFB0;
  --aqua-deep:#0F7E72;
  --aqua-soft:#D6EDE9;
  /* Rot ist ausschliesslich das Signal fuer den Kaufabschluss und steht
     NUR auf den beiden Paket-Buttons. Ueberall sonst waere es entwertet —
     eine Signalfarbe wirkt nur, solange sie selten ist. */
  --signal:#E23D5C;
  --signal-hover:#C92E4D;
  --signal-deep:#B02342;
  --ink:#0B2038;           /* Fließtext und Überschriften: Marineblau */
  --muted:#4c6480;
  --muted-dark:#a8bdd4;
  --petrol:#14395C;        /* große dunkle Flächen: Fußbereich, Karte */
  --petrol-line:#24507A;
  --slate:#3C5A7D;
  --line:rgba(11,32,56,.12);

  /* Kleine Symbolkaestchen (Leistungskarten, Kontaktzeilen) und die
     kleinen Auszeichnungen darueber (Schrittnummern, Kennziffern).
     Eigene Variablen, weil --petrol im Dunkelmodus die dunkelste
     Flaeche ist und als Schriftfarbe dort verschwinden wuerde. */
  --symbol-flaeche:var(--mint);
  --symbol-farbe:var(--petrol);
  --akzent-text:var(--petrol);
  --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;
}
/* overflow-wrap greift nur, wenn ein Wort partout nicht in die Zeile passt —
   sonst aendert es nichts. Deutsche Komposita wie "Datenschutzerklaerung"
   sind auf schmalen Handys (320 px) breiter als die Spalte und wuerden sonst
   am Rand abgeschnitten. */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.02em;overflow-wrap:break-word}
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='%231FA89A' 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)}
/* Tiefblau ist der Normalfall fuer Schaltflaechen. Rot (.btn-signal) bleibt
   den beiden Paket-Buttons vorbehalten. */
.btn-primary{background:var(--petrol);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:#0F2C48;box-shadow:var(--shadow-hover)}
.btn-light{background:#fff;color:var(--petrol);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,32,56,.22)}
.btn-ghost:hover{border-color:var(--petrol);color:var(--petrol);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:#DCE8F2;color:var(--petrol);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(234,241,247,.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(234,241,247,.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(--petrol);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(--petrol)}
.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(--symbol-flaeche);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(--symbol-farbe)}
.card:nth-child(2n) .card-ic{background:var(--aqua-soft)}
.card:nth-child(2n) .card-ic svg{color:var(--symbol-farbe)}
.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(--akzent-text);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)}
/* Hervorgehobene Karte: weisse Flaeche wie die andere, aber mit kraeftigem
   tiefblauem Rahmen. Die gefuellte dunkle Variante wurde verworfen — sie
   erschlug die zweite Karte, statt beide vergleichbar zu halten. */
.paket.highlight{border:2.5px solid var(--petrol);transform:rotate(-.8deg)}
.paket.highlight:hover{transform:rotate(-.8deg) translateY(-6px)}
/* Faehnchen in Tiefblau, nicht in Rot: Rot ist ausschliesslich das Signal
   fuer den Kaufabschluss und wuerde neben dem Button darunter konkurrieren. */
.paket .flag{
  position:absolute;top:-15px;right:22px;background:var(--petrol);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
   in Zeile 193 greift nur innerhalb von .paket — ohne diese hier steht der
   Preis auf den beiden Unterseiten so klein da wie normaler Fliesstext. */
.preis-hero .preis{
  font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,2.6rem);
  letter-spacing:-.02em;line-height:1.1;margin-bottom:.2rem;
}
.preis-hero .preis small{font-size:1rem;font-weight:500;color:var(--muted)}
.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}
}
/* Folgepreis nach einer befristeten Aktion.
   Bewusst NICHT durchgestrichen und bewusst UNTER dem Aktionspreis:
   Ein Streichpreis (.preis-alt) sagt „diesen Betrag zahlen Sie nie" — das
   trifft auf die reguläre Rate nicht zu, sie gilt ja ab Monat vier. Stünde
   sie durchgestrichen darüber, würde die Karte den Kunden belügen.

   Ab 08.08.2026 deutlich hervorgehoben: Vorher stand die Zeile als kleiner
   grauer Text unter dem Aktionspreis und wurde uebersehen — der Kunde nahm
   die 49,90 € als Dauerpreis wahr. Das ist genau die Enttaeuschung, die im
   vierten Monat zur Kuendigung fuehrt. Jetzt eigener Block mit Flaeche,
   der regulaere Preis in Textfarbe und groesser als der Rest der Zeile. */
.preis-danach{
  display:block;margin-top:.7rem;padding:.6rem .85rem;
  background:var(--mint);border-radius:12px;
  font-size:.92rem;color:var(--muted);font-weight:500;line-height:1.45;
}
.preis-danach b{
  color:var(--ink);font-weight:700;font-size:1.08rem;white-space:nowrap;
}
/* Im Dunkelmodus ist --mint die dunkle Flaeche; die Karte darunter ist
   ebenfalls dunkel. Ohne Abgrenzung verschwindet der Block, deshalb hier
   eine feine Linie statt der Fuellung. */
:root[data-theme="dark"] .preis-danach{background:transparent;border:1px solid var(--line)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .preis-danach{background:transparent;border:1px solid var(--line)}
}
.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(--akzent-text);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(--akzent-text);display:block;margin-bottom:.6rem}
.step h3{font-size:1.08rem;margin-bottom:.4rem}
.step p{font-size:.93rem;color:var(--muted)}

/* Kurzfassung "Ueber uns" im Kopf des Vertrauens-Abschnitts.
   Etwas breiter als .section-head (40rem), weil dort zwei Absaetze stehen
   und nicht nur ein Anrisstext — bei 40rem zerfaellt der erste Absatz in
   sehr viele kurze Zeilen.

   ACHTUNG: Wird zurzeit von keiner Seite benutzt. Der Block in index.php
   wurde am 06.08.2026 wieder herausgenommen und soll spaeter zurueck.
   Die Regeln bleiben deshalb bewusst stehen. Kommt der Block bis auf
   Weiteres nicht wieder, koennen sie ersatzlos weg. */
.ueber-uns-kurz{max-width:44rem;margin-top:1.2rem}
.ueber-uns-kurz p{color:var(--muted);font-size:1rem;line-height:1.7;margin:0 0 .8rem}
.ueber-uns-kurz p:last-child{margin-bottom:0}
.ueber-uns-kurz strong{color:var(--ink);font-weight:700}

/* 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(--akzent-text);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(--symbol-flaeche);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(--petrol)}
.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(--petrol);box-shadow:0 0 0 4px rgba(20,57,92,.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(--petrol);background:var(--mint)}
.pw-item input:focus-visible + label{outline:2px solid var(--petrol);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(--symbol-flaeche);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}
/* Vier Spalten seit dem 07.08.2026: Die Spalte "Orte" verlinkt von jeder
   Seite aus auf die Ortsseiten. Ohne solche Verweise findet Google eine
   Unterseite nur ueber die Seitenkarte und behandelt sie als Randnotiz.
   Die Markenspalte bekommt 1.6fr statt 1.4fr, damit der Beschreibungssatz
   nicht in Zweiwortzeilen zerfaellt. */
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.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}
/* Der LinkedIn-Link traegt ein Zeichen vor dem Text. display:flex statt des
   geerbten block, damit Zeichen und Wort auf einer Linie sitzen. */
.footer-col a.footer-social{display:flex;align-items:center;gap:.5rem}
.footer-col a.footer-social svg{width:1.05rem;height:1.05rem;flex:0 0 auto}
.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}
/* hyphens:auto trennt nach deutschen Regeln (Daten-schutz-erklae-rung)
   statt hart mitten im Wort. Setzt lang="de" im <html> voraus — steht dort. */
.legal-page h1{font-size:clamp(1.7rem,4vw,2.8rem);margin:.8rem 0 1.6rem;-webkit-hyphens:auto;hyphens:auto}
.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}
}
@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}

/* ==========================================================================
   DUNKELMODUS
   ==========================================================================
   Zwei Wege, wie die Seite dunkel wird:

   1. Automatisch — der Besucher hat sein Handy oder seinen Rechner auf
      "dunkel" gestellt. Dann startet die Seite dunkel, ohne dass er etwas
      tun muss.
   2. Von Hand — über das Sonne/Mond-Symbol in der Navigation. Diese Wahl
      wird im Browser gespeichert und gilt beim naechsten Besuch weiter.

   Technisch: Die zweite Regel (data-theme) gewinnt immer gegen die erste,
   weil eine bewusste Entscheidung des Besuchers schwerer wiegt als die
   Systemeinstellung. Die Variablen stehen deshalb zweimal da — CSS kann
   Regelbloecke leider nicht wiederverwenden.

   Geaendert werden nur Farben. Abstaende, Schriftgroessen und das Layout
   bleiben in beiden Modi exakt gleich.
   ========================================================================== */

/* --- 1. Automatisch nach Systemeinstellung --------------------------------
   Das :not() sorgt dafuer, dass jemand, der bewusst "hell" gewaehlt hat,
   auch bei dunklem System hell bekommt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mint:        #0E1826;
    --mint-deep:   #16233A;
    --white-soft:  #111C2B;
    --card:        #1B2B44;

    --ink:         #E9EFF7;
    --muted:       #A3B8D0;
    --muted-dark:  #8AA3BF;

    /* Im Hellmodus ist "deep" dunkler als der Grundton. Auf dunklem
       Untergrund muss es umgekehrt sein, sonst verschwindet die Schrift. */
    --teal:        #2FBCAD;
    --teal-deep:   #6FD8CB;
    --teal-soft:   #1F5F58;
    --aqua:        #4FD0C0;
    --aqua-deep:   #6FD8CB;
    --aqua-soft:   #1B4B46;

    --signal:      #FF5C78;
    --signal-hover:#FF7189;
    --signal-deep: #FF8DA0;

    --petrol:      #0A1220;
    --petrol-line: #24405E;
    --slate:       #6B87A8;

    --line:        rgba(255,255,255,.14);

    /* Ein Schatten ist auf dunklem Grund kaum zu sehen. Karten heben sich
       hier ueber einen hellen Rand ab, nicht ueber den Schatten. */
    --shadow:       0 10px 30px -14px rgba(0,0,0,.75);
    --shadow-hover: 0 18px 44px -18px rgba(0,0,0,.85);

    --logo-bg:     #1E4A78;
  }
}

/* --- 2. Vom Besucher bewusst gewaehlt ------------------------------------ */
:root[data-theme="dark"] {
  --mint:        #0E1826;
  --mint-deep:   #16233A;
  --white-soft:  #111C2B;
  --card:        #1B2B44;

  --ink:         #E9EFF7;
  --muted:       #A3B8D0;
  --muted-dark:  #8AA3BF;

  --teal:        #2FBCAD;
  --teal-deep:   #6FD8CB;
  --teal-soft:   #1F5F58;
  --aqua:        #4FD0C0;
  --aqua-deep:   #6FD8CB;
  --aqua-soft:   #1B4B46;

  --signal:      #FF5C78;
  --signal-hover:#FF7189;
  --signal-deep: #FF8DA0;

  --petrol:      #0A1220;
  --petrol-line: #24405E;
  --slate:       #6B87A8;

  --line:        rgba(255,255,255,.14);

  --shadow:       0 10px 30px -14px rgba(0,0,0,.75);
  --shadow-hover: 0 18px 44px -18px rgba(0,0,0,.85);

  --logo-bg:     #1E4A78;
}

/* --- Anpassungen, die ueber reine Farbwerte hinausgehen ------------------- */

/* Karten brauchen im Dunkeln eine sichtbare Kante, sonst schwimmen sie. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .paket,
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .ref-card,
:root[data-theme="dark"] .preis-hero,
:root[data-theme="dark"] .contact-info,
:root[data-theme="dark"] .optionen .opt,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea {
  border: 1px solid rgba(255,255,255,.09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .paket,
  :root:not([data-theme="light"]) .step,
  :root:not([data-theme="light"]) .chip,
  :root:not([data-theme="light"]) .ref-card,
  :root:not([data-theme="light"]) .preis-hero,
  :root:not([data-theme="light"]) .contact-info,
  :root:not([data-theme="light"]) .optionen .opt,
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field textarea {
    border: 1px solid rgba(255,255,255,.09);
  }
}

/* Der Kopfbereich liegt halbdurchsichtig ueber dem Inhalt — der Wert war
   auf Hellblau abgestimmt und muesste sonst nachgezogen werden. */
:root[data-theme="dark"] .site-header{background:rgba(14,24,38,.82)}
:root[data-theme="dark"] .site-header.scrolled{background:rgba(14,24,38,.95)}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header{background:rgba(14,24,38,.82)}
  :root:not([data-theme="light"]) .site-header.scrolled{background:rgba(14,24,38,.95)}
}

/* Weisse Flaechen, die nicht ueber Variablen laufen. */
.section.on-white{background:var(--white-soft,#FDFCFA)}

/* ==========================================================================
   Der Umschalter (Sonne / Mond)
   ========================================================================== */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;   /* Mindestgroesse fuer Daumen */
  background:transparent;border:1.5px solid var(--line);border-radius:999px;
  color:var(--ink);cursor:pointer;padding:0;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.theme-toggle:hover{border-color:var(--teal);background:var(--card);transform:rotate(-12deg)}
.theme-toggle svg{width:19px;height:19px;display:block}
/* Sonne bei hell, Mond bei dunkel — immer nur eines sichtbar. */
.theme-toggle .icon-mond{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sonne{display:none}
:root[data-theme="dark"] .theme-toggle .icon-mond{display:block}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sonne{display:none}
  :root:not([data-theme="light"]) .theme-toggle .icon-mond{display:block}
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle:hover{transform:none}
}

/* --------------------------------------------------------------------------
   Dunkelmodus: Aufzaehlungszeichen vereinheitlichen

   Im Hellmodus wechseln sich zwei Gruentoene ab (jedes zweite Element nutzt
   --aqua-soft). Das faellt hell kaum auf. Im Dunkeln sprang dagegen die eine
   Haelfte auf ein festes Hellmint, waehrend die andere dunkel wurde — die
   Liste sah dadurch fleckig aus.

   Hier bekommen deshalb ALLE Zeichen dieselbe dunkelgruene Flaeche. Das
   Haekchen selbst muss dabei hell werden: Die Strichfarbe steckt fest in der
   eingebetteten Grafik, laesst sich also nicht ueber eine Variable steuern —
   sie wird hier komplett neu gesetzt.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .plist li::before,
:root[data-theme="dark"] .checklist li::before,
:root[data-theme="dark"] .checklist li:nth-child(2n)::before{
  background-color:#14403B;
  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='%235FD6C6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .plist li.opt::before{
  background-color:#14403B;
  background-image: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='%235FD6C6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .plist li.no::before{
  background-color:#26323F;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' stroke='%238FA3B8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .plist li::before,
  :root:not([data-theme="light"]) .checklist li::before,
  :root:not([data-theme="light"]) .checklist li:nth-child(2n)::before{
    background-color:#14403B;
    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='%235FD6C6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  :root:not([data-theme="light"]) .plist li.opt::before{
    background-color:#14403B;
    background-image: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='%235FD6C6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  :root:not([data-theme="light"]) .plist li.no::before{
    background-color:#26323F;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' stroke='%238FA3B8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* --------------------------------------------------------------------------
   Dunkelmodus: Symbolkaestchen und kleine Auszeichnungen

   Statt jede Regel einzeln zu ueberschreiben, werden hier nur die drei
   Variablen neu gesetzt. Dieselben Toene wie bei den Aufzaehlungszeichen,
   damit alle kleinen Elemente der Seite gleich aussehen.

   Zusaetzlich faellt der Wechsel jedes zweiten Elements weg: Hell ist der
   Unterschied ein dezenter Farbwechsel, dunkel wirkte er fleckig.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  --symbol-flaeche:#14403B;
  --symbol-farbe:#5FD6C6;
  --akzent-text:#6FD8CB;
}
:root[data-theme="dark"] .card:nth-child(2n) .card-ic,
:root[data-theme="dark"] .info-item:nth-child(2n) .ic{ background:var(--symbol-flaeche); }
:root[data-theme="dark"] .info-item .ic svg,
:root[data-theme="dark"] .info-item:nth-child(2n) .ic svg{ color:var(--symbol-farbe); }
/* Das Vorschaufeld ist eine grosse Flaeche — dort wirkt das Gruen zu kraeftig. */
:root[data-theme="dark"] .ref-thumb{ background:var(--mint-deep); }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --symbol-flaeche:#14403B;
    --symbol-farbe:#5FD6C6;
    --akzent-text:#6FD8CB;
  }
  :root:not([data-theme="light"]) .card:nth-child(2n) .card-ic,
  :root:not([data-theme="light"]) .info-item:nth-child(2n) .ic{ background:var(--symbol-flaeche); }
  :root:not([data-theme="light"]) .info-item .ic svg,
  :root:not([data-theme="light"]) .info-item:nth-child(2n) .ic svg{ color:var(--symbol-farbe); }
  :root:not([data-theme="light"]) .ref-thumb{ background:var(--mint-deep); }
}

/* =========================================================================
   STARTBEREICH DER STARTSEITE — das Spruchband
   Seit 11.08.2026 ist das der Anfang der Seite. Der fruehere Startbereich
   (Ueberschrift "Eine Website, um die Sie sich nicht kuemmern muessen",
   zwei Schaltflaechen, gezeichnetes Browserfenster) ist entfallen: Die
   Schaltflaeche "Projekt anfragen" stand fast an derselben Stelle schon in
   der Kopfzeile, und "Die zwei Pakete ansehen" fuehrte auf den Abschnitt
   direkt darunter.

   Die Ueberschrift der Seite ist jetzt der Spruch. Damit die Suchbegriffe
   trotzdem ganz oben stehen, gehoert die Zeile "Individuelle Websites fuer
   Betriebe aus Olching und Umgebung" MIT ins <h1> — nur kleiner gesetzt.
   Google liest die ganze Ueberschrift, der Leser sieht zuerst den Spruch.

   Eigene Variable statt direkt --petrol: Im Dunkelmodus ist --petrol die
   dunkelste Flaeche ueberhaupt und laege fast auf dem Seitenhintergrund
   (#0A1220 gegen #0E1826) — das Band waere nicht mehr zu sehen. Dort wird
   die Flaeche deshalb HELLER als die Seite.
   ========================================================================= */
:root{ --spruch-flaeche:var(--petrol); }
:root[data-theme="dark"]{ --spruch-flaeche:#1A2C48; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --spruch-flaeche:#1A2C48; }
}

.spruch{
  background:var(--spruch-flaeche);color:#fff;text-align:center;
  padding:clamp(3.4rem,8vw,6rem) 0 clamp(3rem,7vw,5rem);
  /* Fuellt den sichtbaren Bereich, ohne ihn zu sprengen: 78 sind die Hoehe
     der Kopfzeile. Bei sehr flachen Fenstern (Notebook quer) greift der
     zweite Wert und die Flaeche wird nicht hoeher als noetig. */
  min-height:min(58vh,460px);
  display:flex;align-items:center;position:relative;overflow:hidden;
}
/* Die Groesse ist an der laengsten Zeile ausgemessen: "Die Frage ist nur,
   wen sie finden." sind 33 Zeichen. Bei 4,5vw passen die auf jeder Breite
   ab 700 px in eine Zeile, der Deckel von 3,4rem sorgt dafuer, dass sie
   auch bei 1920 px innerhalb der 1120 px breiten Spalte bleiben. Wer den
   Spruch aendert, muss hier nachmessen — eine laengere Zeile bricht sonst
   mitten im Satz um. Keine max-width: Die Spalte (.wrap) begrenzt bereits. */
.spruch h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,4.5vw,3.4rem);line-height:1.16;
}
.spruch .akz{color:var(--aqua)}
/* Gehoert zur Ueberschrift, wird aber wie ein Untertitel gesetzt. */
.spruch .zusatz{
  display:block;font-family:var(--body);font-weight:400;letter-spacing:0;
  font-size:clamp(.98rem,1.6vw,1.18rem);line-height:1.55;
  color:#B9D2E6;max-width:30ch;margin:1.5rem auto 0;
}
:root[data-theme="dark"] .spruch .zusatz{color:#A9C2D8}
/* Die zwei Wellen aus dem Markenzeichen, ohne den blauen Kasten — auf der
   dunklen Flaeche waere der Kasten ein aufgeklebtes Rechteck. Farben und
   Linienstaerke stammen unveraendert aus dem Logo, sonst waere es ein
   zweites, aehnliches Zeichen. */
.spruch .marke{display:block;width:clamp(64px,7vw,88px);margin:2rem auto 0}
.spruch .hinweis{
  display:block;margin-top:1.15rem;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.06em;text-transform:lowercase;color:#8FB6D4;font-weight:400;
}

/* =========================================================================
   VORHER / NACHHER
   Zwei gleich grosse gezeichnete Websites liegen uebereinander. Die neue
   liegt unten und ist vollstaendig da; die alte liegt darueber und wird per
   clip-path von rechts weggeschnitten. Eine einzige Zahl (--p) steuert
   Schnittkante, Trennlinie und Griff gemeinsam — deshalb koennen die drei
   nie auseinanderlaufen.

   Bedient wird ueber ein unsichtbares <input type="range"> in voller
   Groesse. Das klingt nach Trick, spart aber drei Eigenbauten: Ziehen mit
   der Maus, Wischen mit dem Finger und Bedienen mit den Pfeiltasten kann
   ein Schieberegler von Haus aus, samt Vorlesesoftware. Das Mitlaufen beim
   blossen Darueberfahren macht dann noch site.js.
   ========================================================================= */
.vn{--p:58%;position:relative;width:100%}
.vn-flaeche{
  position:relative;border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-hover);background:#fff;isolation:isolate;
  /* Bezugsgroesse fuer die Schrift in den beiden Zeichnungen. Ohne das
     muesste jede Schriftgroesse an der Fensterbreite haengen — dann waere
     die Zeichnung auf einem breiten Fenster mit schmaler Kachel falsch
     skaliert. So richtet sich alles nach der Kachel selbst. */
  container-type:inline-size;
}
.vn-lage{width:100%}
/* Die neue Seite bestimmt die Hoehe (sie liegt im Fluss). Die alte wird
   darueber gelegt und deshalb absolut positioniert — sonst wuerde sich die
   Kachel bei jeder Reglerbewegung in der Hoehe aendern. */
.vn-alt{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}

.vn-trenner{
  position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;
  background:#fff;box-shadow:0 0 0 1px rgba(11,32,56,.18);pointer-events:none;z-index:3;
}
.vn-griff{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#fff;
  box-shadow:0 8px 22px -5px rgba(11,32,56,.5);
  display:grid;place-items:center;color:var(--petrol);
}
.vn-griff svg{width:24px;height:24px}

.vn-schild{
  position:absolute;top:1rem;z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:999px;font-weight:700;transition:opacity .25s;
}
.vn-schild-l{left:1rem;background:rgba(11,32,56,.66);color:#fff}
.vn-schild-r{right:1rem;background:#0F7E72;color:#fff}
/* Ein Schild im weggeschnittenen Bereich schwebte sonst ueber der falschen
   Seite. Beide blenden sich aus, sobald der Regler an ihrem Rand vorbei-
   laeuft. */
.vn[data-links-weg="ja"] .vn-schild-l{opacity:0}
.vn[data-rechts-weg="ja"] .vn-schild-r{opacity:0}

.vn-regler{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;
  margin:0;padding:0;background:transparent;opacity:0;
  -webkit-appearance:none;appearance:none;cursor:ew-resize;
}
.vn-regler::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:700px}
.vn-regler::-moz-range-thumb{width:52px;height:700px;border:0;background:transparent}
/* Der Regler ist unsichtbar, ein Fokusrahmen an ihm waere es auch. Bei
   Tastaturbedienung leuchtet deshalb der Griff. */
.vn-regler:focus-visible{outline:none}
.vn-regler:focus-visible ~ .vn-trenner .vn-griff{
  box-shadow:0 0 0 4px var(--aqua),0 8px 22px -5px rgba(11,32,56,.5);
}
.vn-hinweis{
  text-align:center;margin-top:1.1rem;font-size:.85rem;color:var(--muted);
  font-family:var(--mono);letter-spacing:.02em;
}

/* ---- Die zwei Zeichnungen -----------------------------------------------
   Ohne Bilddatei, reines HTML und CSS. Gleiches Seitenverhaeltnis, sonst
   springt die Kachel beim Schieben.

   ALLE Groessen darin sind in em angegeben und haengen an der einen
   Schriftgroesse unten. Die wiederum haengt an der Kachelbreite (cqw).
   Dadurch sieht die Zeichnung auf 320 px genauso aus wie auf 1920 px, nur
   kleiner — und niemand muss zwanzig Einzelwerte nachziehen.

   Beide bleiben in hell und dunkel gleich hell: Sie stellen fremde
   Websites dar, nicht unsere Oberflaeche. Eine dunkle Nachher-Fassung
   wuerde den Vergleich verfaelschen.

   Der Betrieb ist erfunden. Ein Bildschirmfoto einer echten alten Seite
   waere ein realer Betrieb, den wir oeffentlich vorfuehren. */
/* Die 2,3cqw sind ausgemessen, nicht geschaetzt: Der gesamte Inhalt einer
   Zeichnung ist rund 24 em hoch. Bei 16:9 ist die Kachel 0,5625 mal so hoch
   wie breit — 0,5625 / 24 ergibt die 2,3 %. Damit fuellt der Inhalt die
   Kachel bei JEDER Breite gleich weit aus, statt unten Luft zu lassen.
   Der Deckel liegt bewusst hoch: Wuerde er frueh greifen, bliebe auf
   grossen Bildschirmen wieder eine leere Flaeche stehen. */
.mock{
  aspect-ratio:16/9;display:flex;flex-direction:column;background:#fff;
  font-size:clamp(8px,2.3cqw,26px);
}
/* Auf dem Handy ist die Kachel so schmal, dass die Schrift unlesbar wuerde.
   Dort steht sie relativ groesser (3,05 statt 2,3 %), und die Kachel wird
   entsprechend hoeher, damit derselbe Inhalt weiterhin hineinpasst: 0,75 /
   24 ergibt die 3,05 %. Beide Zeichnungen aendern sich gemeinsam, die
   Schnittkante bleibt deckungsgleich. */
@media(max-width:700px){
  .mock{aspect-ratio:4/3;font-size:clamp(7px,2.95cqw,20px)}
}

.mock-leiste{flex:none;display:flex;align-items:center;gap:.42em;padding:.62em .8em}
.mock-leiste i{width:.62em;height:.62em;border-radius:50%;flex:none}
.mock-adresse{
  flex:1;height:1.35em;border-radius:.4em;font-size:.68em;line-height:1.35em;
  padding:0 .8em;overflow:hidden;white-space:nowrap;
}
.mock-inhalt{flex:1;overflow:hidden;position:relative}

/* ---------------- ALT ---------------- */
.mock-alt .mock-leiste{background:linear-gradient(#f2f0ec,#dcd8d0);border-bottom:1px solid #b9b3a8}
.mock-alt .mock-leiste i{background:#c9c3b8;border:1px solid #a7a196;border-radius:.12em;width:.7em;height:.7em}
.mock-alt .mock-adresse{background:#fff;border:1px solid #a7a196;border-radius:.15em;color:#555;font-family:var(--mono)}
.mock-alt .mock-inhalt{background:#fdfdf8;font-family:Georgia,serif;color:#111;padding:.85em 1em}
.alt-kopf{text-align:center;font-size:1.35em;font-weight:700;color:#000080;line-height:1.22}
.alt-linie{height:.13em;background:#000080;margin:.55em 0 .6em;opacity:.75}
.alt-spalten{display:grid;grid-template-columns:7.2em 1fr;gap:1.1em}
.alt-menue{display:grid;gap:.42em;font-size:.82em}
.alt-menue span{color:#0000EE;text-decoration:underline}
.alt-satz{font-size:.82em;color:#333;line-height:1.5;margin-bottom:.7em}
.alt-liste{font-size:.8em;color:#333;line-height:1.7;padding-left:1.1em}
.alt-tabelle{border-collapse:collapse;margin-top:.8em;font-size:.78em}
.alt-tabelle td{border:1px solid #b9b3a8;padding:.2em .6em;color:#333}
.alt-bau{display:flex;align-items:center;gap:.45em;margin-top:.8em;font-size:.72em;color:#8a6d00}
.alt-bau svg{width:.95em;height:.95em;flex:none}
.alt-fuss{
  position:absolute;left:1em;right:1em;bottom:.6em;display:flex;
  justify-content:space-between;gap:1em;font-size:.66em;color:#777;
  border-top:1px solid #e2ded4;padding-top:.45em;white-space:nowrap;
}
.alt-zaehler{font-family:var(--mono);background:#111;color:#0f0;padding:0 .25em;letter-spacing:.08em}

/* ---------------- NEU ---------------- */
.mock-neu .mock-leiste{background:#F4F7FA;border-bottom:1px solid #E4EBF2}
.mock-neu .mock-leiste i:nth-child(1){background:#FF6B6B}
.mock-neu .mock-leiste i:nth-child(2){background:#FFC93C}
.mock-neu .mock-leiste i:nth-child(3){background:#3FBFB0}
.mock-neu .mock-adresse{background:#fff;color:#7C93AC;font-family:var(--body);border:1px solid #E4EBF2;border-radius:999px}
.mock-neu .mock-inhalt{background:#fff;padding:0;font-family:var(--body);color:#0B2038}
.neu-nav{display:flex;align-items:center;gap:.7em;padding:.75em 1.1em;border-bottom:1px solid #EEF3F8}
.neu-logo{width:1.5em;height:1.5em;border-radius:.42em;background:#14395C;display:grid;place-items:center;flex:none}
.neu-logo svg{width:1.05em;height:1.05em}
.neu-name{font-family:var(--display);font-weight:700;font-size:.86em;letter-spacing:-.02em;white-space:nowrap}
/* Der rechte Rand bleibt frei: Dort liegt das Schild "nachher". */
.neu-menue{margin-left:auto;display:flex;gap:1em;font-size:.68em;color:#4c6480;white-space:nowrap;padding-right:5.5em}
.neu-held{display:grid;grid-template-columns:1.25fr .75fr;gap:1.1em;padding:1.1em}
.neu-h1{font-family:var(--display);font-weight:700;font-size:1.5em;line-height:1.15;letter-spacing:-.03em}
.neu-h1 em{font-style:normal;color:#0F7E72}
.neu-p{font-size:.8em;color:#4c6480;line-height:1.55;margin-top:.6em;max-width:26em}
.neu-cta{
  display:inline-block;margin-top:.9em;background:#E23D5C;color:#fff;
  border-radius:999px;padding:.55em 1.2em;font-size:.74em;font-weight:600;
}
/* Frueher stand hier ein gezeichnetes Bild mit Sonne und Wellen. Es sagte
   nichts und sah nach Platzhalter aus. Jetzt steht der Kasten, den ein
   Handwerksbetrieb wirklich oben rechts braucht. */
.neu-info{background:#EAF1F7;border-radius:.7em;padding:.9em 1em;align-self:start}
.neu-info-titel{font-size:.68em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#4c6480}
.neu-info dl{margin-top:.6em;display:grid;gap:.5em;font-size:.78em;line-height:1.35}
.neu-info dt{color:#4c6480;font-size:.86em}
.neu-info dd{font-weight:600;white-space:nowrap}
.neu-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;padding:0 1.1em 1.1em}
.neu-karte{background:#F7FAFC;border:1px solid #EDF2F7;border-radius:.6em;padding:.75em}
.neu-karte .ic{width:1.15em;height:1.15em;border-radius:.32em;background:#D2F0E9;margin-bottom:.5em}
.neu-karte b{display:block;font-size:.76em;font-weight:700}
.neu-karte span{display:block;font-size:.68em;color:#4c6480;line-height:1.45;margin-top:.2em}