/* =========================================================================
   PGC-cam Website-Vorschau (Relaunch, Stand 27.09.2026) - NICHT die produktive style.css.
   Farben aus dem Original-Logo (BILDER/pgc_cam_logo.png): Blau #1E4FA8, Rot #D32F2F, Grau #555555.
   Schrift: Systemschriften, bewusst keine eingebundenen Webfonts (keine Datenuebertragung an Dritte).
   ========================================================================= */
:root {
  --blau: #1E4FA8;
  --blau-tief: #133372;
  --blau-hell: #E9EFF9;
  --rot: #D32F2F;
  --rot-hell: #FBEAEA;
  --gruen: #1F7A4D;
  --tinte: #1A2233;
  --grau: #525C6E;
  --linie: #D8E0EC;
  --flaeche: #F4F7FB;
  --weiss: #FFFFFF;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(19, 51, 114, .06), 0 8px 24px rgba(19, 51, 114, .08);
  --breite: 1180px;
  --schrift: "Segoe UI", Arial, Helvetica, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--schrift); font-size: 17px; line-height: 1.6; color: var(--tinte); background: var(--weiss); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--blau-tief); line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 3.4vw + .6rem, 3.1rem); font-weight: 600; letter-spacing: -.01em; }
/* 30.09.2026: nur die Hauptueberschrift der Startseite (.hero gibt es nur auf index.html) etwas kleiner:
   Handy 30 px, Desktop hoechstens 44 px. Gewicht und Zeilenhoehe unveraendert. */
.hero h1 { font-size: clamp(1.875rem, 2.6vw + .8rem, 2.75rem); }
h2 { font-size: clamp(1.55rem, 1.6vw + .9rem, 2.2rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.abschnitt { padding: 72px 0; }
.abschnitt.flaeche { background: var(--flaeche); }
.kopf-abschnitt { text-align: center; max-width: 760px; margin: 0 auto 40px; display: grid; gap: 12px; }
.kopf-abschnitt p { color: var(--grau); font-size: 1.05rem; }
.stichwort { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rot); }

/* Vorschau-Hinweis */
.vorschau-leiste { background: #FFF4D6; color: #6B4E00; font-size: .85rem; text-align: center; padding: 6px 12px; border-bottom: 1px solid #F0DC9A; }

/* Kopfzeile */
.seitenkopf { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linie); }
.seitenkopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo img { width: 170px; height: auto; display: block; }
.logo-zusatz { border-left: 1px solid var(--linie); padding-left: 14px; font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--grau); white-space: nowrap; }
.logo-zusatz span { display: block; font-weight: 400; }
.hauptnav { display: flex; align-items: center; gap: 26px; }
.hauptnav a { text-decoration: none; color: var(--tinte); font-size: .95rem; font-weight: 600; }
.hauptnav a:hover { color: var(--blau); }
.hauptnav a.aktiv { color: var(--blau); box-shadow: inset 0 -2px 0 var(--blau); padding-bottom: 4px; }
.menue-knopf { display: none; background: none; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--blau-tief); cursor: pointer; }

/* Knoepfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 8px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; line-height: 1.25; text-align: center; }
.knopf.primaer { background: var(--blau); color: var(--weiss); }
.knopf.primaer:hover { background: var(--blau-tief); }
.knopf.sekundaer { background: var(--weiss); color: var(--blau); border-color: var(--blau); }
.knopf.sekundaer:hover { background: var(--blau-hell); }
.knopf.kauf { background: var(--rot); color: var(--weiss); }
.knopf.kauf:hover { background: #B32424; }
.knopf.klein { padding: 10px 16px; font-size: .92rem; }
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; }

/* 1 Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--weiss) 0%, var(--flaeche) 100%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.hero-text { display: grid; gap: 22px; }
.hero-text .unterzeile { font-size: 1.15rem; color: var(--grau); max-width: 36em; }
.hakenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hakenliste li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-weight: 500; }
.hakenliste svg { width: 22px; height: 22px; margin-top: 2px; color: var(--blau); }
.hero-bild { position: relative; min-height: 500px; }
.hero-foto { position: absolute; inset: 0 0 60px 60px; border-radius: 16px; overflow: hidden; box-shadow: var(--schatten); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.fenster { background: var(--weiss); border-radius: 10px; box-shadow: 0 2px 6px rgba(19, 51, 114, .12), 0 18px 40px rgba(19, 51, 114, .18); overflow: hidden; border: 1px solid var(--linie); }
.fenster-leiste { display: flex; gap: 6px; align-items: center; padding: 8px 12px; background: #EEF2F8; border-bottom: 1px solid var(--linie); font-size: .75rem; color: var(--grau); }
.fenster-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #C9D3E3; display: inline-block; }
.fenster-leiste span { margin-left: 8px; }
.hero .fenster { position: absolute; left: 0; bottom: 0; width: 62%; }
.hero .fenster img { width: 100%; }
.bildhinweis { font-size: .78rem; color: var(--grau); }
.hero .bildhinweis { position: absolute; right: 0; bottom: 18px; max-width: 40%; text-align: right; }

/* 2 Problem */
.problem { background: var(--blau-tief); color: var(--weiss); }
.problem .kopf-abschnitt h2 { color: var(--weiss); }
.problem .kopf-abschnitt p { color: #D7E1F3; }
.problemkette { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; max-width: 980px; }
.problemkette li { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 10px 18px; font-weight: 600; }
.problemkette svg { width: 22px; height: 22px; color: #BFD0F0; flex: none; }
.problemkette .pfeil { background: none; border: 0; padding: 0 2px; color: #8FA7D6; }
.problem .schluss { text-align: center; margin-top: 28px; font-size: 1.1rem; }
.problem .schluss strong { color: var(--weiss); }

/* 3 Fragen */
.fragen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.frage { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 1px 2px rgba(19, 51, 114, .05); }
.frage a.bildlink { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.frage a.bildlink img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .3s; }
.frage a.bildlink:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .frage a.bildlink img { transition: none; } }
.frage-text { padding: 16px 16px 20px; display: grid; gap: 8px; align-content: start; }
.frage-text h3 { font-size: 1.08rem; }
.frage-text p { color: var(--grau); font-size: .95rem; }
.frage-text .modul { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blau); }

/* 4 Produktnachweis */
.schritte { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.schritte li::before { content: counter(s); width: 36px; height: 36px; border-radius: 50%; background: var(--blau); color: var(--weiss); font-weight: 800; display: grid; place-items: center; }
.schritte strong { display: block; color: var(--blau-tief); }
.schritte span { color: var(--grau); font-size: .95rem; }
.nachweis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.nachweis figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.nachweis .fenster a { display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.nachweis .fenster img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.nachweis figcaption { font-size: .95rem; color: var(--grau); }
.nachweis figcaption strong { color: var(--blau-tief); display: block; }
.nachweis-fuss { margin-top: 24px; text-align: center; display: grid; gap: 18px; justify-items: center; }

/* 5 + 6 Preis und Daten */
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.kachel { border-radius: 14px; padding: 32px; display: grid; gap: 16px; align-content: start; }
.kachel.preis { background: var(--weiss); border: 2px solid var(--blau); box-shadow: var(--schatten); }
.kachel.daten { background: var(--blau-hell); border: 1px solid #C9D6EE; }
.kachel .symbol { width: 52px; height: 52px; color: var(--blau); }
.preiszeile { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.preis-betrag { font-size: 3rem; font-weight: 800; color: var(--blau-tief); line-height: 1; font-variant-numeric: tabular-nums; }
.preis-art { font-weight: 600; color: var(--rot); }
.kachel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.kachel ul li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.kachel ul svg { width: 20px; height: 20px; margin-top: 3px; color: var(--blau); }
.kleingedruckt { font-size: .82rem; color: var(--grau); }

/* 7 Beratungspraxis */
.praxis { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: center; }
.portrait { margin: 0; display: grid; gap: 10px; }
.portrait img { border-radius: 14px; box-shadow: var(--schatten); width: 100%; }
.portrait figcaption { font-size: .9rem; color: var(--grau); }
.portrait figcaption strong { color: var(--blau-tief); }
.praxis-text { display: grid; gap: 16px; }
.praxis-text p { font-size: 1.05rem; }
.praxis-text .betont { font-weight: 700; color: var(--blau-tief); }

/* 8 Zielgruppen */
.gruppen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.gruppen li { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 18px; display: grid; gap: 10px; align-content: start; }
.gruppen svg { width: 34px; height: 34px; color: var(--blau); }
.gruppen p { color: var(--grau); font-size: .95rem; }

/* 9 Demo */
.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 760px; margin: 0 auto; }
.demo .kachel { background: var(--weiss); border: 1px solid var(--linie); }
.demo .kachel p { color: var(--grau); }

/* 10 Schluss */
.schluss-cta { position: relative; color: var(--weiss); text-align: center; overflow: hidden; }
.schluss-cta picture, .schluss-cta picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.schluss-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 51, 114, .80), rgba(19, 51, 114, .88)); }
.schluss-cta .wrap { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: center; padding-top: 84px; padding-bottom: 84px; }
.schluss-cta h2 { color: var(--weiss); max-width: 820px; }
.schluss-cta .knopf.sekundaer { background: transparent; color: var(--weiss); border-color: var(--weiss); }
.schluss-cta .knopf.sekundaer:hover { background: rgba(255, 255, 255, .12); }
.schluss-cta .oder { align-self: center; color: #D7E1F3; }
.schluss-cta .knopfreihe { justify-content: center; align-items: center; }
.fotohinweis { position: absolute; z-index: 1; right: 12px; bottom: 8px; font-size: .72rem; color: rgba(255, 255, 255, .7); }

/* Fuss */
.seitenfuss { background: #0F2350; color: #C8D4EA; font-size: .9rem; padding: 36px 0; }
.seitenfuss .wrap { display: grid; gap: 16px; }
.seitenfuss .fuss-oben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.seitenfuss .fuss-logo { display: flex; align-items: center; gap: 14px; }
.seitenfuss .fuss-logo img { width: 150px; height: auto; display: block; }
.seitenfuss .logo-zusatz { color: #C8D4EA; border-left-color: rgba(255, 255, 255, .3); }
/* 30.09.2026: roter "+"-Kreis am weissen Fuss-Logo, gleiche Technik und Masse wie im Fuss der Rechtsseiten.
   Kein neues Bild: gezeigt wird der Kreis aus dem Kopf-Logo images/pgc-cam-logo-navy-480.png (Ausschnitt per
   background-position), genau ueber dem weissen Punkt. Masse bei 150 px Logobreite (Faktor 150/480). */
.seitenfuss .fuss-logo picture { position: relative; display: block; line-height: 0; }
.seitenfuss .fuss-logo picture::after { content: ""; position: absolute; left: 134.96px; top: 1.86px; width: 13px; height: 13px; border-radius: 50%;
  background: url("images/pgc-cam-logo-navy-480.png") no-repeat -137.21px -0.13px / 150px auto; pointer-events: none; }
.sozial { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.sozial a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: grid; place-items: center; color: var(--weiss); transition: background-color .15s, border-color .15s; }
.sozial a:hover, .sozial a:focus-visible { background: var(--weiss); border-color: var(--weiss); color: var(--blau-tief); }
.sozial svg { width: 20px; height: 20px; }
.seitenfuss nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.seitenfuss a { color: #E6ECF7; }
.seitenfuss b { color: var(--weiss); }

/* Platzhalterseite */
.platzhalter { max-width: 720px; margin: 0 auto; padding: 72px 20px; display: grid; gap: 18px; }
.platzhalter .hinweis { background: #FFF4D6; border: 1px solid #F0DC9A; color: #6B4E00; border-radius: 10px; padding: 14px 16px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .fragen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hauptnav { gap: 18px; }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
  .hero-bild { min-height: 0; aspect-ratio: 4 / 3.2; }
  .nachweis { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .zwei, .demo { grid-template-columns: 1fr; }
  .praxis { grid-template-columns: 1fr; gap: 28px; }
  .portrait { max-width: 340px; }
  .menue-knopf { display: inline-block; }
  .hauptnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-bottom: 1px solid var(--linie); flex-direction: column; align-items: stretch; padding: 12px 20px 18px; gap: 4px; }
  .hauptnav.offen { display: flex; }
  .hauptnav a { padding: 10px 0; }
  .hauptnav a.aktiv { box-shadow: none; }
  .hauptnav .knopf { margin-top: 8px; }
}
/* ---------- Smartphone ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .abschnitt { padding: 52px 0; }
  .logo img { width: 124px; }
  .logo { gap: 10px; }
  .logo-zusatz { font-size: .7rem; padding-left: 10px; }
  .fragen, .gruppen, .schritte { grid-template-columns: 1fr; }
  .problemkette .pfeil { display: none; }
  .knopfreihe .knopf { width: 100%; }
  .hero-bild { aspect-ratio: auto; min-height: 0; height: auto; display: grid; }
  .hero-foto { position: static; height: 210px; }
  .hero .fenster { position: relative; width: 92%; margin: -70px auto 0; }
  .hero .bildhinweis { position: static; max-width: none; text-align: left; margin-top: 8px; }
  .kachel { padding: 24px; }
  .preis-betrag { font-size: 2.5rem; }
}

/* ---------- Nach-oben-Knopf (erscheint erst nach dem Herunterscrollen) ---------- */
.nach-oben { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 48px; height: 48px; border-radius: 50%;
  background: var(--blau); color: var(--weiss); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(19, 51, 114, .3);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s, background-color .15s; }
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover, .nach-oben:focus-visible { background: var(--blau-tief); }
.nach-oben svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .nach-oben { right: 14px; bottom: 14px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: none; } }

/* ---------- Demo-Zugang (demo/index.php, start.php, app.php) ---------- */
.seitenkopf .zurueck-link, .produkt-kopf .zurueck-link { display: inline-flex; align-items: center; padding: 8px 16px; border: 2px solid var(--blau-tief); border-radius: 8px; background: var(--weiss); font-weight: 600; font-size: .92rem; line-height: 1.2; color: var(--blau-tief); text-decoration: none; white-space: nowrap; }
.seitenkopf .zurueck-link:hover, .produkt-kopf .zurueck-link:hover { background: var(--blau-hell); }
.demo-seite h1 { color: var(--blau-tief); line-height: 1.2; }
.demo-formular { display: grid; gap: 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 28px; box-shadow: var(--schatten); }
.demo-formular .feld { display: grid; gap: 6px; }
.demo-formular label { font-weight: 600; color: var(--tinte); }
.demo-formular .pflicht { font-weight: 400; color: var(--grau); font-size: .9rem; }
.demo-formular input[type="text"], .demo-formular input[type="email"] { font: inherit; padding: 12px 14px; border: 1px solid #B9C5D8; border-radius: 8px; background: var(--weiss); color: var(--tinte); width: 100%; }
.demo-formular input:focus-visible { outline: 3px solid var(--blau-hell); border-color: var(--blau); }
.demo-formular input[aria-invalid="true"] { border-color: var(--rot); }
.demo-formular .feld-fehler { color: var(--rot); font-size: .92rem; margin: 0; }
.demo-formular .datenschutz-hinweis { font-size: .92rem; color: var(--grau); margin: 0; }
.demo-formular button.knopf { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.lockfeld { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .demo-formular { padding: 20px; } }

/* ---------- Bestellseite (bestellung.html, nur PGC-cam Liqui), 28.09.2026 ---------- */
.bestellen { padding: 48px 0 72px; }
.bestell-kopf { max-width: 760px; display: grid; gap: 12px; margin-bottom: 32px; }
.bestell-kopf h1 { color: var(--blau-tief); line-height: 1.15; }
.bestell-kopf p { color: var(--grau); font-size: 1.05rem; }
.bestell-raster { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; align-items: start; }
.bestell-seite { display: grid; gap: 24px; }
.bestell-info { display: grid; gap: 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 24px; }
.bestell-info h2 { font-size: 1.1rem; color: var(--blau-tief); }
.bestell-info .hakenliste li { font-weight: 400; font-size: .95rem; }
.bestellformular { display: grid; gap: 20px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 28px; box-shadow: var(--schatten); }
.bestellformular fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; }
.bestellformular legend { font-weight: 600; color: var(--blau-tief); font-size: 1.1rem; margin-bottom: 4px; padding: 0; }
.bestellformular .feld { display: grid; gap: 6px; }
.bestellformular .feld-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bestellformular .feld-plz { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 14px; }
.bestellformular label { font-weight: 600; color: var(--tinte); }
.bestellformular input[type="text"], .bestellformular input[type="email"], .bestellformular select {
  font: inherit; padding: 12px 14px; border: 1px solid #B9C5D8; border-radius: 8px; background: var(--weiss); color: var(--tinte); width: 100%; }
.bestellformular input:focus-visible, .bestellformular select:focus-visible { outline: 3px solid var(--blau-hell); border-color: var(--blau); }
.bestellformular fieldset p { color: var(--grau); font-size: .95rem; margin: 0; }
.bestell-summe { background: var(--blau-hell); border-radius: 10px; padding: 16px 18px; display: grid; gap: 8px; }
.summe-zeile { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.summe-zeile span:first-child { color: var(--grau); }
.summe-zeile.gesamt { border-top: 1px solid #C9D6EE; padding-top: 8px; font-weight: 800; font-size: 1.15rem; color: var(--blau-tief); }
.summe-zeile.gesamt span:first-child { color: var(--blau-tief); }
.haken-feld { display: grid !important; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-weight: 400 !important; font-size: .95rem; cursor: pointer; }
.haken-feld input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blau); }
.bestellformular button.knopf { border: 0; cursor: pointer; font: inherit; font-weight: 600; justify-self: start; }
.bestellformular button.knopf:disabled { background: #C9CFD9; color: #5B6577; cursor: not-allowed; }
@media (max-width: 900px) { .bestell-raster { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .bestellformular { padding: 20px; }
  .bestellformular .feld-zwei, .bestellformular .feld-plz { grid-template-columns: 1fr; }
  .bestellformular button.knopf { width: 100%; justify-self: stretch; }
}

/* ---------- Dankeseite nach dem Kauf (28.09.2026) ---------- */
.danke { padding: 48px 0 72px; }
.danke .wrap { max-width: 800px; display: grid; gap: 28px; }
.danke-kopf { display: grid; gap: 12px; }
.danke-kopf h1 { color: var(--blau-tief); line-height: 1.15; font-size: clamp(1.875rem, 2.6vw + .8rem, 2.75rem); } /* 30.09.2026: wie Startseite, Handy 30 px, Desktop 44 px */
.danke-kopf p { color: var(--grau); font-size: 1.1rem; }
.danke-ablauf { display: grid; gap: 22px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 28px; box-shadow: var(--schatten); }
.danke-ablauf h2 { font-size: 1.3rem; }
.danke-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.danke-schritte > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.danke-schritte > li > div { display: grid; gap: 6px; }
.danke-schritte h3 { color: var(--blau-tief); }
.danke-schritte p { color: var(--grau); }
.danke-schritte .hakenliste { margin-top: 6px; }
.danke-schritte .hakenliste li { font-weight: 400; }
.danke-nr { width: 40px; height: 40px; border-radius: 50%; background: var(--blau-hell); color: var(--blau); font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.danke-lieferzeit { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; font-weight: 600; }
.danke-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
@media (max-width: 640px) {
  .danke-ablauf { padding: 20px; }
  .danke-schritte > li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .danke-nr { width: 34px; height: 34px; }
  .danke-fuss .knopf { width: 100%; }
}

/* ---------- Produktseite liqui.html (28.09.2026): nur vorhandene Farben, Abstaende und Bausteine ---------- */
.produkt-kopf { background: linear-gradient(180deg, var(--weiss) 0%, var(--flaeche) 100%); }
.produkt-kopf .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.produkt-bild { margin: 0; display: grid; gap: 10px; }
.produkt-bild .fenster a { display: block; }
.fragenliste { max-width: 640px; margin: 0 auto; }
.fragen-schluss { text-align: center; max-width: 640px; margin: 24px auto 0; color: var(--grau); }
.funktionen { display: grid; gap: 56px; }
.funktion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.funktion:nth-child(even) .fenster { order: 2; }
.funktion .fenster a { display: block; }
.funktion-text { display: grid; gap: 12px; align-content: start; }
.funktion-text p { color: var(--grau); }
.modul { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blau); }
.funktionen-fuss { text-align: center; margin-top: 32px; }
.ampel-liste { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 12px; max-width: 860px; }
.ampel-liste li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; }
.ampel-liste strong { color: var(--blau-tief); }
.ampel-punkt { width: 18px; height: 18px; border-radius: 50%; margin-top: 4px; }
.ampel-punkt.gruen { background: var(--gruen); }
.ampel-punkt.gelb { background: #E3B200; }
.ampel-punkt.orange { background: #E8710A; }
.ampel-punkt.rot { background: var(--rot); }
.betont-satz { font-weight: 700; color: var(--blau-tief) !important; }
.rechenbeispiel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 28px; display: grid; gap: 10px; box-shadow: var(--schatten); align-self: start; }
.rechenbeispiel h3 { margin-bottom: 4px; }
.rechenbeispiel .summe-zeile.trenner { border-top: 1px solid var(--linie); padding-top: 10px; }
.vertrauen { max-width: 760px; margin: 0 auto; text-align: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 22px 24px; font-weight: 600; color: var(--blau-tief); }
.faq-liste { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq-liste details { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; }
.faq-liste summary { font-weight: 600; color: var(--blau-tief); cursor: pointer; }
.faq-liste details p { margin-top: 10px; color: var(--grau); }
.faq-fuss { text-align: center; margin-top: 20px; color: var(--grau); }
@media (max-width: 900px) {
  .produkt-kopf .wrap, .funktion { grid-template-columns: 1fr; gap: 28px; }
  .produkt-kopf .wrap { padding-top: 36px; }
  .funktion:nth-child(even) .fenster { order: 0; }
}
@media (max-width: 640px) {
  .rechenbeispiel { padding: 20px; }
  .funktionen { gap: 44px; }
}

/* Filmbereich auf der Startseite (21.10.2026): Video vom eigenen Server, Text daneben */
.filmbereich { background: var(--weiss); }
.film-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.film-video { margin: 0; }
.film-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--blau-tief); box-shadow: var(--schatten); }
.film-text { display: grid; gap: 14px; justify-items: start; }
.film-text h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.film-text p { color: var(--grau); margin: 0; }
.film-text .stichwort { color: var(--rot); }
.film-text .film-hinweis { font-size: .88rem; }
@media (max-width: 900px) {
  .film-raster { grid-template-columns: 1fr; gap: 28px; }
}