/*
 * Farben, Schriften, Abstaende und der Rahmen - die eine Stelle, an der sie stehen.
 *
 * WOHER DIESE DATEI KOMMT (Auftrag A-2026-09-000016): Sie ist die style.css des alten
 * Systems (public/homepage/style.css, gemessen am 2026-09-01). Der Board am 2026-09-01
 * woertlich: "Und sie soll auch genauso aussehen, wie sie in der alten Welt ausgesehen
 * hat." Die vorherige Fassung war ein eigener, zurueckhaltender Entwurf - er trug, und er
 * sah dem Alten nicht aehnlich. Uebernommen ist deshalb das Alte, nicht das Bessere.
 *
 * WIE DIESE DATEI ZU BENUTZEN IST: Ganz oben in :root stehen die Werte. Jede FARBE
 * darunter nimmt sie ueber var(...) - wer eine Farbe aendern will, aendert genau eine
 * Zeile, und sie aendert sich auf allen Seiten (Auftrag A-2026-09-000007, Punkt c).
 *
 * WARUM DIE WERTE ENGLISCH HEISSEN, obwohl im Haus deutsch benannt wird: Die sechs
 * uebertragenen Seiten rufen sie in ihren style-Attributen beim Namen (etwa
 * color:var(--ink-soft) auf index, fuer-wen und about). Umbenennen hiesse, den
 * uebertragenen Aufbau anzufassen, und das verbietet der Auftrag. Zwei Saetze Namen
 * nebeneinander waeren dieselbe Sache an zwei Stellen - also bleibt der eine alte Satz.
 * Was NICHT aus dem alten System kommt, heisst wieder deutsch: --kopf-hoehe und
 * --logo-hoehe. Beide standen dort nicht als Wert, sondern als Zahl in mehreren Zeilen.
 *
 * WAS DIE FARBEN NICHT ALLEIN ENTSCHEIDEN: Der Kopf traegt ein Logo als Bild
 * (medien/hauptlogo-trim.png). Seine Farben stecken in der Datei und nicht hier - wer eine
 * Grundfarbe wechselt, sieht sie am Logo nicht mit wechseln.
 *
 * WOHER DIE WERTE KOMMEN, UND WOHER NICHT: Sie sind die des alten Systems und tragen dort
 * seit Monaten, aber sie sind KEINE frische Markenentscheidung. Wofuer Feedsmith steht,
 * gehoert zu G18 (Marke Feedsmith, Vidal).
 *
 * WARUM KEINE SCHRIFT AUS DEM NETZ: --sans nennt nur Schriften, die auf dem Geraet schon
 * liegen. In dieser Datei steht kein url(), kein @import und kein @font-face - genau wie im
 * alten System. Eine geladene Schriftdatei waere ein zweiter Weg zum ersten Bild und ein
 * Datenabfluss zu einem Fremden.
 *
 * WAS EINE EINZELNE SEITE DAZULEGT, steht NICHT hier, sondern als `stil` in ihrer eigenen
 * Datei unter seiten/ - so wie im alten System, wo index.html und preise.html je einen
 * eigenen <style>-Block mitbrachten. Er kommt im Dokument HINTER dieser Datei und darf
 * deshalb ueberschreiben, was hier steht.
 */

:root{
  --bg:#F4F6F8; --panel:#FFFFFF; --card:#FFFFFF; --line:#E5E8EC; --line-soft:#EFF1F4;
  --ink:#1A1D24; --ink-soft:#40454F; --muted:#6A717C; --faint:#9AA1AC;
  --b1:#4E54D6; --b1-ink:#3A3FAF; --b1-soft:#ECEDFB; --b2:#0FA396; --ok:#2E9E6B;
  --aurora:linear-gradient(135deg,#4E54D6 0%,#22D3EE 100%);
  --sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 12px 40px -18px rgba(30,40,90,.22);
  --radius:16px;
  /* Kopfleiste: ihre Hoehe steht an einer Stelle, weil auch das Sprungziel einer
     Ueberschrift darunter passen muss - siehe .prose h2[id]. */
  --kopf-hoehe:64px;
  /* So hoch erscheint das Logo im Kopf. Im alten System stand die Zahl als style-Attribut
     an jedem der sechzehn <img>; hier steht sie einmal. */
  --logo-hoehe:46px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--b1);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* Kopf.
   DIE NAMEN IM AUFBAU SIND ANDERE ALS IM ALTEN SYSTEM, das Aussehen ist dasselbe: dort
   header.nav > .wrap > a.brand + nav.links, hier header.kopf > .wrap > a.wortmarke + nav.
   Der Kopf kommt aus geruest/seite.js und steht deshalb nur einmal im Baum.
   NICHT UEBERNOMMEN: .brand .mark, ein farbiges Kaestchen neben der Wortmarke. Im alten
   System stand im .brand nur das <img>; die Regel griff dort schon nichts. */
.kopf{position:sticky;top:0;z-index:40;background:rgba(244,246,248,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.kopf .wrap{display:flex;align-items:center;gap:18px;height:var(--kopf-hoehe)}
.wortmarke{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.14rem;letter-spacing:-.02em;color:var(--ink)}
.wortmarke:hover{text-decoration:none}
/* display:block nimmt die Grundlinien-Luecke weg, die ein Bild als Textzeichen sonst unter
   sich stehen laesst. Die Hoehe steht in :root, die Breite folgt dem Seitenverhaeltnis;
   die width/height am <img> sind die echten Bildmasse und halten den Platz frei, bevor das
   Bild geladen ist (siehe geruest/seite.js). */
.wortmarke img{display:block;height:var(--logo-hoehe);width:auto}
.kopf nav{margin-left:auto}
.kopf nav ul{display:flex;gap:20px;align-items:center;margin:0;padding:0;list-style:none}
.kopf nav a{color:var(--ink-soft);font-weight:500;font-size:.95rem}
.kopf nav a:hover{color:var(--ink);text-decoration:none}
.kopf nav a[aria-current="page"]{color:var(--b1);font-weight:700}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem;border-radius:12px;padding:.72em 1.5em;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--aurora);color:#fff;box-shadow:0 10px 26px -8px rgba(78,84,214,.6)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--b1);color:var(--b1)}
.btn-lg{padding:.9em 1.9em;font-size:1.05rem}

/* Abschnitte.
   .inhalt ist das <main> um den Seiteninhalt. Es traegt bewusst KEINE Breite und KEINEN
   Rand: Im alten System standen die <section> unmittelbar im <body>, ihre Flaeche ging von
   Kante zu Kante, und die Breite machte erst das .wrap darin. Wer .inhalt eine max-width
   gibt, nimmt jedem farbigen Abschnitt seine Kante. */
section{padding:74px 0}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--b1);background:var(--b1-soft);padding:5px 12px;border-radius:999px;margin-bottom:14px}
h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.025em;margin:.2em 0 .3em;font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 .4em;font-weight:800}
h3{font-size:1.18rem;margin:0 0 .3em;font-weight:700;letter-spacing:-.01em}
.lead{font-size:1.22rem;color:var(--ink-soft);line-height:1.55}
.muted{color:var(--muted)}
.center{text-align:center}

/* Hero */
.hero{position:relative;padding:86px 0 64px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-40% 20% auto -20%;height:600px;background:radial-gradient(closest-side,rgba(78,84,214,.16),transparent 70%);z-index:0}
.hero:after{content:"";position:absolute;inset:-30% -20% auto 40%;height:520px;background:radial-gradient(closest-side,rgba(34,211,238,.16),transparent 70%);z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Karten und Raster */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.feat .ic{width:44px;height:44px;border-radius:12px;background:var(--b1-soft);display:grid;place-items:center;font-size:1.35rem;margin-bottom:12px}
.step{display:flex;gap:16px;align-items:flex-start;margin:0 0 22px}
.step .n{width:38px;height:38px;flex:none;border-radius:11px;background:var(--aurora);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 18px -6px rgba(78,84,214,.5)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.soft{background:linear-gradient(180deg,#fff, #FAFBFD);border:1px solid var(--line)}

/* Preise */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.price{display:flex;flex-direction:column}
.price.featured{border-color:var(--b1);box-shadow:0 18px 50px -20px rgba(78,84,214,.45)}
.price .amt{font-size:2rem;font-weight:800;margin:.1em 0}
.price ul{list-style:none;padding:0;margin:14px 0 20px}
.price li{padding:7px 0;border-top:1px solid var(--line-soft);color:var(--ink-soft);font-size:.95rem}
.price li:before{content:"✓ ";color:var(--b2);font-weight:800}

/* Rechtstexte und Fliesstext.
   KEINE DER SECHS SEITEN BENUTZT DIESE REGELN HEUTE: Impressum, Datenschutz und die
   uebrigen Rechtstexte sind nicht uebertragen (LIESMICH.md, "Was hier absichtlich fehlt").
   Sie stehen hier, weil sie im alten System stehen und die Seiten, die sie brauchen, noch
   kommen - wer sie jetzt streicht, streicht sie fuer den Naechsten mit. */
.prose{max-width:760px;margin:0 auto;overflow-wrap:break-word}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.2em}
.prose p,.prose li{color:var(--ink-soft)}
/* Sprungziele der AGB: die Kopfleiste klebt oben und wuerde die angesprungene Ueberschrift
   sonst verdecken. */
.prose h2[id]{scroll-margin-top:calc(var(--kopf-hoehe) + 16px)}
/* Tabellen im Rechtstext (AGB: Paketumfang, Preise). Feste Breite statt Eigenbreite, damit
   auf dem Telefon der Text in den Zellen umbricht und die Seite nicht seitlich scrollt. */
.prose table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0 0 1.1em;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.prose th{color:var(--ink);font-weight:700}
/* Drucken (Strg+P, "Als PDF speichern"). Der zweite Weg zum Aufbewahren neben /agb.txt:
   Navigation und Fuss gehoeren nicht auf ein Vertragsdokument, der Text schon. Gilt fuer
   alle Marketing-Seiten, weil eine gedruckte Seite nirgends eine Kopfleiste braucht. */
@media print {
  .kopf, .fuss { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0 12mm; }
  .prose { max-width: none; }
  .prose h2 { break-after: avoid; page-break-after: avoid; }
  .prose p, .prose li, .prose table { break-inside: avoid; page-break-inside: avoid; }
}
.ph{background:#FFF6E5;border:1px dashed #E5B860;border-radius:8px;padding:2px 8px;color:#8a5a12;font-size:.92em}

/* Fuss.
   ER TRAEGT HEUTE WENIGER ALS DER ALTE: Der alte Fuss hatte vier Spalten mit Verweisen auf
   Kontakt, Impressum, Datenschutz, KI-Transparenz, Cookie-Einstellungen und die Schmiede,
   dazu eine Zeile mit dem Rechtstraeger. Diese Seiten gibt es hier noch nicht, und verlinkt
   wird nur, was es gibt (LIESMICH.md). Die Flaeche sieht deshalb aus wie die alte, der
   Inhalt ist kuerzer - als Unterschied gemeldet im Ergebnis zu A-2026-09-000016. Sobald
   eine Seite menue.ort "fuss" sagt, steht sie hier von selbst. */
.fuss{background:var(--panel);border-top:1px solid var(--line);padding:46px 0 34px;margin-top:20px}
.fuss nav ul{display:flex;flex-wrap:wrap;gap:30px;margin:0;padding:0;list-style:none}
.fuss nav a{color:var(--muted);font-size:.92rem}
.fuss nav a:hover{color:var(--ink)}
.fusszeile{color:var(--faint);font-size:.85rem;margin:0}
/* Ohne Fussmenue haengt die Trennlinie sonst ueber nichts. */
.fuss nav+.fusszeile{border-top:1px solid var(--line);margin-top:26px;padding-top:18px}

/* ===== Geteilte Komponenten fuer Unterseiten (additiv, Board 2026-07-22) ===== */
/* Vertrauens-/Feature-Karten mit Linien-Icon */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tic{width:46px;height:46px;border-radius:12px;background:var(--b1-soft);display:grid;place-items:center;margin-bottom:14px;color:var(--b1)}
.tic svg{width:24px;height:24px}
/* Fuer-wen / fuer-wen-nicht Listen */
.fit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.fit-list{list-style:none;padding:0;margin:0}
.fit-list li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--line-soft);color:var(--ink-soft);line-height:1.5;font-size:.98rem}
.fit-list li:first-child{border-top:none}
.fit-yes li:before{content:"\2713";position:absolute;left:0;top:11px;color:var(--b2);font-weight:800}
.fit-no li:before{content:"\00d7";position:absolute;left:0;top:11px;color:var(--faint);font-weight:800;font-size:1.1rem;line-height:1.4}
/* Segment-Karten (Fuer wen): grosse primaere + kleinere sekundaere */
.seg-primary{background:var(--card);border:1px solid var(--b1);border-radius:var(--radius);padding:30px;box-shadow:0 18px 50px -20px rgba(78,84,214,.35)}
.seg-primary h3{font-size:1.4rem}
/* Akkordeon (FAQ / Einwaende) */
.acc{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.acc details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:0}
.acc summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;font-size:1.02rem;display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";color:var(--b1);font-weight:800;font-size:1.3rem;line-height:1}
.acc details[open] summary:after{content:"\2013"}
.acc .acc-body{padding:0 22px 20px;color:var(--ink-soft);line-height:1.6}
.acc-group{max-width:760px;margin:0 auto 30px}
.acc-group>.eyebrow{margin-left:2px}
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--b2);background:rgba(15,163,150,.12);padding:3px 9px;border-radius:999px}
/* Preise: Umschalter Monat/Jahr. Die Preisseite legt darueber ihre eigene Fassung - siehe
   stil in seiten/preise.js, dort steht auch, warum sie anders aussieht. */
.bill-toggle{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:5px;gap:4px;margin:6px auto 0}
.bill-toggle button{padding:.6em 1.3em;border-radius:12px;font-weight:700;font-size:.92rem;color:var(--muted);background:transparent;border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px}
.bill-toggle button.active{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(30,40,90,.3)}
.bill-save{font-size:.72rem;font-weight:800;color:var(--b2);background:rgba(15,163,150,.14);border-radius:999px;padding:2px 8px}
/* Preis-Karten Zusatz */
.price-badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--aurora);padding:4px 11px;border-radius:12px;margin-bottom:10px}
.price .per{color:var(--muted);font-size:1rem;font-weight:600}
.price .mwst{color:var(--faint);font-size:.82rem;margin:2px 0 0}
.price .yr-note{color:var(--b2);font-size:.84rem;font-weight:700;margin:4px 0 0;min-height:1.1em}
.price .btn{margin-top:auto}
.price h3{font-size:1.25rem}
.price .sub{color:var(--muted);font-size:.92rem;margin:2px 0 10px}
/* Vergleichsrahmen / Hinweiszeilen */
.note-band{background:var(--b1-soft);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;color:var(--ink-soft);line-height:1.6}
.note-band b{color:var(--ink)}
/* Prosa-Bloecke (Ueber uns) */
.value-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.value-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;color:var(--ink-soft);line-height:1.6}
.value-list li b{color:var(--ink);display:block;margin-bottom:3px}
.portrait-ph{aspect-ratio:1/1;max-width:200px;background:linear-gradient(180deg,#F7F8FA,#EDEFF3);border:1px dashed var(--line);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;color:var(--muted)}
.portrait-ph .ph-tag{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ph-box{background:linear-gradient(180deg,#F7F8FA,#EDEFF3);border:1px dashed var(--line);border-radius:var(--radius);padding:22px 24px;color:var(--muted);line-height:1.6}
.ph-box .ph-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.founder{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:721px){.founder{grid-template-columns:200px 1fr;gap:30px}}

@media(max-width:820px){
  .grid-3,.price-grid,.trust-grid,.fit-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  /* Mobil-Overflow-Schutz: Grid-Kinder duerfen unter ihre min-content-Breite schrumpfen */
  .grid>*,.grid-3>*,.grid-2>*,.trust-grid>*,.fit-grid>*,.price-grid>*{min-width:0;max-width:100%}
  .bill-toggle{max-width:100%;flex-wrap:wrap;justify-content:center}
  section{padding:54px 0}
  /* DAS ALTE SYSTEM HATTE HIER EINEN BURGER-KNOPF und schob das Menue hinter ihn. Der Knopf
     war Verhalten des RAHMENS; A-2026-09-000016 holt das Verhalten der SEITEN zurueck und
     den Rahmen ausdruecklich nicht. Ohne Knopf duerfen die Punkte nicht versteckt werden -
     sonst waeren sie auf dem Telefon gar nicht mehr erreichbar. Sie brechen deshalb um, und
     der Kopf waechst mit. Als Unterschied zum Alten gemeldet, nicht still gelassen. */
  .kopf .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;row-gap:4px}
  .kopf nav{margin-left:0;width:100%}
  .kopf nav ul{gap:16px}
  .kopf nav a{font-size:.9rem}
}