/* Clean2Share Design-System — Navy/Gold/Creme, seriös & ruhig. Spec §10.
   Design-Upgrade „Hingucker"-Paket (feat/design-hingucker): Hero-Drama,
   fühlbare Interaktion, Scroll-Leben. Siehe /js/effects.js für die JS-Seite. */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-var.woff2?v=20260728a') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --navy: #1C2A54; --navy-dark: #141F3F;
  --gold: #C4A050; --gold-hell: #D9BC7A;
  --creme: #F5EFE1; --ink: #1E2433; --weiss: #fff;
  --radius: 10px; --max-w: 68rem;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink); background: var(--weiss); line-height: 1.6;
}
h1, h2, h3 { color: var(--navy); line-height: 1.25; font-weight: 700; }
address { font-style: normal; }
/* Markenkonforme Links — sonst Browser-Blau/-Lila. :link UND :visited explizit,
   sonst gewinnt in manchen Browsern das UA-Lila für besuchte Links. Navy-Kontexte
   (dunkler Hintergrund) brauchen hellen Text, siehe Override weiter unten. */
a:link, a:visited { color: var(--navy); text-decoration-color: var(--gold); }
a:hover, a:focus-visible { color: var(--gold); }
main .card h2 { margin-top: 2rem; font-size: 1.2rem; }
.section { padding: 4rem 1rem; }
.section--creme { background: var(--creme); }
.section--navy { background: var(--navy); color: var(--weiss); }
.section--navy h2 { color: var(--gold-hell); }
.section--navy a:link, .section--navy a:visited,
.card--dark a:link, .card--dark a:visited {
  color: var(--weiss); text-decoration: underline; text-decoration-color: var(--gold-hell);
}
.section--navy a:hover, .section--navy a:focus-visible,
.card--dark a:hover, .card--dark a:focus-visible { color: var(--gold-hell); }
.wrap { max-width: var(--max-w); margin: 0 auto; }
.btn-gold {
  position: relative; overflow: hidden;
  display: inline-block; background: var(--gold); color: var(--navy-dark);
  padding: .85rem 1.8rem; border-radius: var(--radius); border: 0;
  font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .18s cubic-bezier(.2,.7,.2,1),
    box-shadow .18s cubic-bezier(.2,.7,.2,1);
}
.btn-gold:hover {
  background: var(--gold-hell); transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(20, 31, 63, .4);
}
/* Gold-Button-Glanz — einmal durchlaufender Streifen beim Hover, kein
   Dauerloop. Gilt für .btn-gold UND die Sticky-CTA (gleiche Technik). */
.btn-gold::after, .sticky-cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-120%);
}
.btn-gold:hover::after, .sticky-cta:hover::after {
  animation: btn-shine-sweep 650ms ease-in-out forwards;
}
@keyframes btn-shine-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
.card {
  background: var(--weiss); border: 1px solid #e4ddcc; border-radius: var(--radius);
  padding: 1.5rem; box-shadow: 0 1px 4px rgba(20, 31, 63, .06);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s cubic-bezier(.2,.7,.2,1);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -18px rgba(20, 31, 63, .35); }

/* Leistungen — Karten-Aufwertung (Badge, Icon, Häkchen-Liste, Hero/Dark-Variante) */
#leistungen .card h3 { margin: 0 0 .8rem; font-size: 1.15rem; }
.badge-gold {
  display: inline-block; background: var(--gold); color: var(--navy-dark);
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 999px; margin: 0 0 1rem;
}
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 0 1rem; color: var(--navy);
}
.card-icon svg { display: block; width: 100%; height: 100%; }
.check-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.check-list li { position: relative; padding-left: 1.6rem; color: #4a5164; }
.check-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 800;
}
.card__cta { display: block; width: 100%; text-align: center; }
.btn-ghost {
  display: inline-block; background: transparent; color: var(--navy);
  border: 2px solid var(--navy); padding: .75rem 1.65rem; border-radius: var(--radius);
  font-weight: 700; font-size: 1.02rem; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--navy); color: var(--weiss); transform: translateY(-2px); }

/* Hero-Karte (Privathaushalte) — dezente Gold-Top-Leiste + etwas größerer Schatten */
.card--hero {
  position: relative; overflow: hidden;
  box-shadow: 0 14px 34px -16px rgba(20, 31, 63, .32);
}
.card--hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hell));
}
.card--hero:hover { box-shadow: 0 24px 46px -18px rgba(20, 31, 63, .42); }

/* Kontrast-Karte (Unser Anspruch) — Navy statt Weiß */
.card--dark { background: var(--navy); border-color: var(--navy-dark); }
.card--dark h3 { color: var(--gold-hell); }
.merkmal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.merkmal-list li { display: flex; align-items: center; gap: .75rem; color: #cfd4e4; }
.merkmal-list__icon { flex: 0 0 auto; display: inline-flex; width: 26px; height: 26px; color: var(--gold); }
.merkmal-list__icon svg { display: block; width: 100%; height: 100%; }
/* Konfigurator-Stepper */
.stepper { display: flex; align-items: center; gap: .6rem; }
.stepper button {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--navy);
  background: var(--weiss); color: var(--navy); font-size: 1.2rem; cursor: pointer;
}
.stepper output { min-width: 2ch; text-align: center; font-weight: 700; }
/* Kalender — Wochen-Pager (Stufe 1) + Zeitfenster (Stufe 2), siehe eigener
   Abschnitt weiter unten. */
.feld-fehler { color: #A33; font-size: .9rem; }
@media (max-width: 40rem) { .section { padding: 2.5rem .8rem; } }

/* -------------------------------------------------------------------- */
/* Allgemeine Layout-/Utility-Bausteine                                  */
/* -------------------------------------------------------------------- */

/* Kacheln nebeneinander (Leistungen, Ablauf-Schritte, Vertrauens-Punkte) */
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--eng { gap: 1rem; }

/* Nummerierte Prozess-Schritte (Ablauf in 3 Schritten) */
.schritt { text-align: center; }
.schritt-nummer {
  width: 3rem; height: 3rem; border-radius: 50%; margin: 0 auto .75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--gold-hell); font-weight: 700; font-size: 1.25rem;
}
.schritt h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.schritt p { margin: 0; color: #4a5164; }
.section--navy .schritt p { color: #cfd4e4; }

/* -------------------------------------------------------------------- */
/* Unsere Arbeit — Vorher/Nachher-Galerie                                */
/* -------------------------------------------------------------------- */

#unsere-arbeit > .wrap > p { color: #4a5164; margin: 0 0 2rem; }
.arbeit-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.arbeit-card {
  background: var(--weiss); border: 1px solid #e4ddcc; border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 1px 4px rgba(20, 31, 63, .06);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s cubic-bezier(.2,.7,.2,1);
}
.arbeit-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -18px rgba(20, 31, 63, .35); }
.arbeit-card picture, .arbeit-card img { display: block; width: 100%; height: auto; }

@media (max-width: 60rem) {
  .arbeit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .arbeit-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- */
/* Header / Navigation                                                   */
/* -------------------------------------------------------------------- */

.site-header {
  background: var(--weiss); border-bottom: 1px solid #ece5d4;
  position: sticky; top: 0; z-index: 10;
}
.site-header .wrap {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem;
}
.logo-klein { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--navy); flex: 0 0 auto; }
.logo-klein img { height: 2.4rem; width: 2.4rem; display: block; flex: 0 0 auto; }
.logo-klein__name { font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; white-space: nowrap; }
/* `<nav>` selbst als flexibler, schrumpfbarer Container — erst dadurch darf das
   `.site-nav`-Kind unten schmaler werden als sein Inhalt und intern scrollen. */
.site-header nav { min-width: 0; flex: 1 1 auto; display: flex; justify-content: flex-end; }
/* Ursache des gemeldeten Bugs: `.site-nav` hatte `flex-wrap: wrap`. Bei
   Zwischenbreiten (~630–880px) reichte die Zeile für 5 Links + Gold-Button nicht
   mehr — der letzte Listeneintrag (der goldene „Preis berechnen"-CTA) brach auf
   eine eigene Zeile im weißen Header-Bereich um; unter 40rem verstärkte
   `flex-direction: column` auf `.wrap` den Effekt zu drei sichtbaren Zeilen
   (Logo / Nav-Links / Button). Fix: Nav bleibt IMMER einzeilig (nowrap) und
   scrollt bei zu wenig Platz horizontal innerhalb ihrer eigenen Box statt
   umzubrechen — die Seite selbst scrollt dabei nie horizontal. */
.site-nav {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 1.5rem; margin: 0; padding: 0;
  list-style: none; min-width: 0; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
}
.site-nav::-webkit-scrollbar { display: none; height: 0; }
.site-nav li { flex: 0 0 auto; }
.site-nav a {
  display: inline-block; white-space: nowrap;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem;
  transition: color .15s ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold); }
.site-nav .btn-gold { padding: .55rem 1.2rem; font-size: .93rem; white-space: nowrap; }

/* Zwischenbreiten: Schrift/Abstand kompakter, damit die Nav-Zeile ohne Scrollen
   einzeilig bleibt — deckt genau die Lücke ab, in der zuvor umgebrochen wurde. */
@media (max-width: 62rem) {
  .site-nav { gap: .9rem; }
  .site-nav a:not(.btn-gold) { font-size: .87rem; }
  .site-nav .btn-gold { padding: .5rem 1rem; font-size: .87rem; }
}

@media (max-width: 40rem) {
  .site-header .wrap { gap: .6rem; padding: .6rem .8rem; }
  .site-nav { gap: .7rem; }
  /* Anker-Links: Tap-Fläche vergrößern (war ~20px hoch, jetzt spürbar größer),
     ohne das Einzeilig-Layout zu sprengen. */
  .site-nav a:not(.btn-gold) { padding: .45rem 0; }
}

/* Unter ~520px: Wortmarke ausblenden (die Marke steht ohnehin im Hero-Badge),
   nur das Logo-Badge bleibt — schafft Platz, bevor die Nav scrollen muss. */
@media (max-width: 32.5rem) {
  .logo-klein__name { display: none; }
}

/* -------------------------------------------------------------------- */
/* Hero                                                                   */
/* -------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 4.5rem 1rem 3.5rem; color: var(--weiss);
  background: linear-gradient(165deg, var(--navy-dark), var(--navy));
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1000px circle at 85% -10%, rgba(196, 160, 80, .28), transparent 60%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px);
}
.hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
}
.hero__content { width: 100%; max-width: 38rem; margin: 0 auto; }
.hero__badge-wrap { display: flex; justify-content: center; }
.hero__badge {
  width: 9rem; height: 9rem; display: block;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45));
}

/* Glanz-Sweep auf dem Hero-Badge — einmal nach dem Headline-Wipe (Delay
   greift dem wipe-move-Ende voraus), erneut bei Hover. Zwei Pseudo-Elemente:
   ::after spielt genau einmal beim Laden (kein Restart-Risiko), ::before
   bleibt inert (animation: none) und wird ausschließlich per :hover mit der
   Keyframe-Animation verknüpft — sauberer Restart ohne Nachzieh-Effekt beim
   Verlassen des Hovers. */
.hero__badge-shine {
  position: relative; display: inline-block; overflow: hidden; border-radius: 50%;
}
.hero__badge-shine::before, .hero__badge-shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-120%);
}
.hero__badge-shine::after {
  animation: badge-shine-sweep 900ms ease-in-out 1.6s 1 forwards;
}
.hero__badge-shine::before { animation: none; }
.hero__badge-shine:hover::before {
  animation: badge-shine-sweep 900ms ease-in-out forwards;
}
@keyframes badge-shine-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

.hero-title-wrap {
  position: relative; display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: hero-reveal 1.1s ease-in-out .3s forwards;
}
@keyframes hero-reveal { to { clip-path: inset(0 0 0 0); } }
.hero h1 {
  color: var(--weiss); font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 0 0 .6rem;
}
.hero h1 .row { display: block; overflow: hidden; }
.hero h1 .row > span {
  display: inline-block; transform: translateY(110%);
  animation: row-in .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero h1 .row:nth-child(1) > span { animation-delay: .14s; }
.hero h1 .row:nth-child(2) > span { animation-delay: .3s; }
@keyframes row-in { to { transform: translateY(0); } }

.wipe-blade {
  position: absolute; top: -12%; bottom: -12%; left: -6%; width: 16px;
  background: linear-gradient(100deg, transparent, var(--gold-hell) 40%, var(--gold) 55%, transparent 90%);
  transform: skewX(-12deg); pointer-events: none;
  animation: wipe-move 1.1s ease-in-out .3s forwards;
}
@keyframes wipe-move {
  0% { left: -6%; opacity: 1; }
  92% { opacity: 1; }
  100% { left: 106%; opacity: 0; }
}

.hero__slogan {
  font-style: italic; font-weight: 600; color: var(--gold-hell);
  font-size: 1.15rem; margin: 0 0 1.25rem;
}
.hero__usp { max-width: 38rem; margin: 0 auto 2rem; color: rgba(255, 255, 255, .82); }
.hero .btn-gold { font-size: 1.1rem; }

@media (min-width: 60rem) {
  .hero { text-align: left; padding: 6rem 1rem 5.5rem; }
  .hero__inner { flex-direction: row; align-items: center; gap: 3.5rem; }
  .hero__content { flex: 7; max-width: none; margin: 0; }
  .hero__badge-wrap { flex: 4; }
  .hero__usp { margin-left: 0; margin-right: 0; }
}

@media (max-width: 40rem) {
  .hero { padding: 3rem 1rem 2.5rem; }
  .hero__badge { width: 6.5rem; height: 6.5rem; }
}

/* -------------------------------------------------------------------- */
/* Formular-Grundstile                                                   */
/* -------------------------------------------------------------------- */

.feld { margin: 0 0 1.15rem; }
label { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 .35rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; padding: .65rem .8rem; border: 1px solid #cfc8b6; border-radius: 8px;
  font: inherit; color: var(--ink); background: var(--weiss);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; min-height: 6rem; }
/* Checkbox/Radio — aus der generischen Feld-Breite ausgenommen, sonst reißt
   der Browser sie auf 100% Breite auf und Label-Text rutscht in die nächste Zeile. */
input[type="checkbox"], input[type="radio"] {
  width: auto; accent-color: var(--navy); vertical-align: middle;
  margin: 0 .5rem 0 0;
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; font-weight: 500;
}
fieldset label:has(> input[type="checkbox"]),
fieldset label:has(> input[type="radio"]) {
  margin: 0 0 .6rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(28, 42, 84, .13);
}
.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: #A33; }
.feld-hinweis { font-size: .85rem; color: #6b6455; margin: .3rem 0 0; }
fieldset { border: 1px solid #e4ddcc; border-radius: var(--radius); padding: 1.25rem; margin: 0 0 1.5rem; }
legend { font-weight: 700; color: var(--navy); padding: 0 .5rem; }

/* Zustimmungs-Checkbox "vorzeitiger Beginn" (Widerrufsrecht, Spec §2.5) — der
   Labeltext ist mehrzeilig, darum Checkbox oben statt vertikal zentriert. */
.feld--vorzeitig { background: var(--creme); border-radius: var(--radius); padding: .9rem 1rem; }
.feld--vorzeitig label { align-items: flex-start; }
.feld--vorzeitig input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; }

/* Muster-Widerrufsformular (public/bedingungen.html) — eingerücktes Zitat-Layout. */
.rechte-formular {
  border-left: 3px solid var(--gold); background: var(--creme);
  padding: .1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 1.5rem;
}
.rechte-formular p { margin: 1rem 0; }

@media (max-width: 40rem) {
  /* iOS-Zoom-Falle: Felder unter 16px lassen Safari beim Fokus hineinzoomen.
     Bereits über die Body-Vererbung 16px, hier zusätzlich fest verankert. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}

/* Honeypot — für Menschen unsichtbares Anti-Spam-Feld, für Screenreader
   ausgeblendet, aber weiterhin fokussierbar/ausfüllbar für Bots. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* -------------------------------------------------------------------- */
/* Kalender — Wochen-Pager (Stufe 1: Tag) + Zeitfenster (Stufe 2: Slot)   */
/* -------------------------------------------------------------------- */

.wochen-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.wochen-nav {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--navy); background: var(--weiss); color: var(--navy);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, transform .15s ease, opacity .15s ease;
}
.wochen-nav:hover:not([disabled]) { background: var(--creme); transform: translateY(-1px); }
.wochen-nav[disabled] { opacity: .35; cursor: not-allowed; }
.wochen-label { flex: 1; text-align: center; font-weight: 700; color: var(--navy); }

.wochen-tage { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.wochen-tag {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .8rem .4rem; border-radius: 8px; border: 1px solid #cfc8b6;
  background: var(--weiss); color: var(--navy); font: inherit; font-weight: 600;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s ease,
    background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wochen-tag:hover:not([disabled]) {
  transform: translateY(-2px); border-color: var(--navy);
  box-shadow: 0 10px 18px -10px rgba(20, 31, 63, .35);
}
.wochen-tag[disabled] {
  cursor: not-allowed; color: rgba(28, 42, 84, .38); border-color: #e4ddcc;
  background-color: #faf7ee;
  background-image: repeating-linear-gradient(45deg, rgba(28, 42, 84, .08) 0 6px, transparent 6px 12px);
}
.wochen-tag.aktiv {
  background: var(--navy); color: var(--weiss); border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--gold);
}
.wochen-tag__wt {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; opacity: .75;
}
.wochen-tag__datum { font-size: 1rem; font-weight: 700; }

.zeitfenster-panel { margin-top: 1.25rem; }
.zeitfenster-hinweis { color: #6b6455; margin: 0; }
.zeitfenster-tag { margin: 0 0 .6rem; font-weight: 700; color: var(--navy); }
.zeitfenster-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.zeitfenster-slot {
  padding: 1.1rem 1rem; border-radius: var(--radius); border: 1px solid #cfc8b6;
  background: var(--weiss); color: var(--navy); font: inherit; font-weight: 700;
  font-size: 1.05rem; text-align: center; cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s ease,
    background-color .15s ease, border-color .15s ease, color .15s ease;
}
.zeitfenster-slot:hover:not([disabled]) {
  transform: translateY(-2px); border-color: var(--navy);
  box-shadow: 0 10px 18px -10px rgba(20, 31, 63, .35);
}
.zeitfenster-slot[disabled] {
  cursor: not-allowed; color: rgba(28, 42, 84, .38); border-color: #e4ddcc;
  background-color: #faf7ee;
  background-image: repeating-linear-gradient(45deg, rgba(28, 42, 84, .08) 0 6px, transparent 6px 12px);
}
.zeitfenster-slot.aktiv {
  background: var(--navy); color: var(--weiss); border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--gold);
}
.zeitfenster-slot__zusatz {
  display: block; font-size: .78rem; font-weight: 600; margin-top: .3rem; opacity: .85;
}
.zeitfenster-slot__zeit { white-space: nowrap; }

@media (max-width: 40rem) {
  .wochen-tage { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .wochen-tag { padding: .6rem .2rem; }
  .zeitfenster-slots { gap: .5rem; }
  .zeitfenster-slot { padding: .85rem .6rem; font-size: .92rem; }
  /* Pfeile waren 38×38px — unter dem 44px-Touch-Target-Mindestmaß. */
  .wochen-nav { width: 2.75rem; height: 2.75rem; }
}

/* -------------------------------------------------------------------- */
/* Konfigurator — Stepper-Zeilen + Preisbox                              */
/* -------------------------------------------------------------------- */

.preset-zeile { padding-bottom: 1.1rem; margin-bottom: .9rem; border-bottom: 1px solid #e4ddcc; }
.preset-zeile__label {
  display: block; margin: 0 0 .6rem; font-weight: 700; color: var(--navy); font-size: .95rem;
}
.preset-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.preset-chip {
  padding: .65rem 1.15rem; min-height: 44px; border-radius: 999px; border: 1px solid var(--navy);
  background: var(--weiss); color: var(--navy); font: inherit; font-weight: 700; font-size: .92rem;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s ease,
    background-color .15s ease, border-color .15s ease, color .15s ease;
}
.preset-chip:hover:not(.aktiv) { transform: translateY(-2px); border-color: var(--navy); }
.preset-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.preset-chip.aktiv {
  background: var(--navy); color: var(--weiss); border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--gold);
}
.preset-zeile__hinweis { margin: .55rem 0 0; font-size: .82rem; color: #6b6455; }

@media (max-width: 40rem) {
  .preset-chips { gap: .5rem; }
  .preset-chip { flex: 0 0 auto; }
}

/* Verschmutzungsgrad + Zonen-Wahl (Konfigurator, erster Schritt vor den
   Steppern) — .pill-chip teilt sich die Optik mit .preset-chip, aber als
   eigene Klasse: der Schnellauswahl-Code liest ausschließlich .preset-chip
   und darf diese Buttons nicht als Fenster-Presets fehlinterpretieren. */
.verschmutzung-zeile { padding-bottom: 1.1rem; margin-bottom: .9rem; border-bottom: 1px solid #e4ddcc; }
.verschmutzung-zeile__label {
  display: block; margin: 0 0 .6rem; font-weight: 700; color: var(--navy); font-size: .95rem;
}
.pill-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill-chip {
  padding: .65rem 1.15rem; min-height: 44px; border-radius: 999px; border: 1px solid var(--navy);
  background: var(--weiss); color: var(--navy); font: inherit; font-weight: 700; font-size: .92rem;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s ease,
    background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pill-chip:hover:not(.aktiv) { transform: translateY(-2px); border-color: var(--navy); }
.pill-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pill-chip.aktiv {
  background: var(--navy); color: var(--weiss); border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--gold);
}
/* Zonen-Wahl: bewusst dezenter/kleiner als die Verschmutzungs-Frage. */
.zone-zeile { margin-top: .9rem; }
.zone-zeile__label {
  display: block; margin: 0 0 .5rem; font-weight: 600; color: var(--navy); font-size: .85rem;
}
.pill-chip--klein { padding: .45rem .9rem; min-height: 38px; font-size: .82rem; font-weight: 600; }
.zone-zeile__hinweis { margin-top: .5rem; }

@media (max-width: 40rem) {
  .pill-chips { gap: .5rem; }
  .pill-chip { flex: 0 0 auto; }
}

.stepper-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid #e4ddcc;
}
.stepper-zeile:first-child { padding-top: 0; }
.stepper-zeile__info { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.stepper-zeile__info strong { display: block; color: var(--navy); }
.stepper-zeile__info .feld-hinweis { margin: .15rem 0 0; }
/* Maßstäbliche Mini-Silhouetten je Fenstertyp (Größenhilfe) — einheitliche
   Box-Höhe, echte cm-Proportionen im viewBox-Koordinatensystem (1 Einheit =
   1 cm, gemeinsamer "Boden" bei y=220 = Höhe des bodentiefen Fensters), damit
   die fünf Icons untereinander UND zwischen Stepper-Zeile und Größenhilfe
   maßstäblich vergleichbar bleiben (die Schiebetür nutzt darum eine breitere
   viewBox 180×220 und wird als einziges Icon breiter dargestellt — gewollt).
   non-scaling-stroke hält den Strich trotz der starken Skalierung bei ~1.6px. */
.fenstertyp-icon {
  height: 40px; width: auto; flex: 0 0 auto; display: block;
  color: var(--navy); opacity: .85;
}
.preisbox {
  background: var(--creme); color: var(--navy); border-radius: var(--radius);
  border-top: 2px dashed var(--gold);
  padding: 1.5rem 1.5rem 1.25rem; margin: 1.5rem 0; text-align: center;
}
.preisbox__label {
  margin: 0 0 .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #6b6455;
}
.preisbox__betrag { font-size: 1.05rem; font-weight: 600; color: var(--navy); }
.preisbox__betrag strong {
  display: block; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* „Blitzblank"-Glint — einmaliger, sehr dezenter Glanz über den Betrag,
   sobald der Count-up einen neuen Endwert erreicht hat (konfigurator.js
   togglet .glint). Text-Clip-Shine: Verlauf sitzt "hinter" dem Text und
   wird nur dort sichtbar, wo Glyphen sind — bleibt exakt textscharf,
   unabhängig von der Box-Breite. NUR mit background-clip:text-Support
   (@supports-Guard) — ohne Support bleibt der Betrag schlicht Navy
   (kein Glint), statt per color:transparent unsichtbar zu werden. */
#preis-anzeige.glint strong { color: var(--navy); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #preis-anzeige.glint strong {
    background-image: linear-gradient(100deg, var(--navy) 42%, var(--gold-hell) 50%, var(--navy) 58%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: price-glint-sweep 700ms linear forwards;
  }
}
@keyframes price-glint-sweep {
  from { background-position: 200% 0; }
  to { background-position: -100% 0; }
}
/* Windows High Contrast / forced-colors: transparent-Text wird von der
   forced-colors-Umschreibung bewusst NICHT überschrieben — ohne diesen
   Block bliebe der Betrag 700ms unsichtbar. Feature-Support ist hier
   irrelevant (@supports testet nur, ob die Syntax existiert), daher
   eigener Block statt Verschachtelung in @supports. */
@media (forced-colors: active) {
  #preis-anzeige.glint strong {
    animation: none;
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}
.preisbox__inkl, .preisbox__ust { margin: .35rem 0 0; font-size: .85rem; color: #6b6455; }
.preisbox .feld-hinweis { margin: .3rem 0 0; }
#preis-hinweis:not(:empty) { color: #6b6455; font-size: .85rem; margin: .5rem 0 0; }
#konfigurator-form #zum-termin { display: block; width: 100%; margin-top: 1.25rem; }

@media (max-width: 40rem) {
  .stepper-zeile { flex-direction: column; align-items: flex-start; gap: .5rem; }
  /* Stepper-Buttons waren 35×35px — unter dem 44px-Touch-Target-Mindestmaß. */
  .stepper button { width: 2.75rem; height: 2.75rem; font-size: 1.3rem; }
  /* Silhouetten bleiben erkennbar, auch wenn die Zeile umbricht — nicht unter 32px. */
  .fenstertyp-icon { height: 32px; }
}

/* -------------------------------------------------------------------- */
/* Größenhilfe (Konfigurator) — eigenes details-Element, NICHT Teil der    */
/* FAQ-Sektion/JSON-LD, aber im selben Aufklapp-Muster (Toggle-Icon).      */
/* -------------------------------------------------------------------- */

.groessen-hilfe {
  background: var(--creme); border: 1px solid #e4ddcc; border-radius: var(--radius);
  padding: .95rem 1.1rem; margin: 0 0 1.1rem;
}
.groessen-hilfe summary {
  cursor: pointer; font-weight: 700; color: var(--navy); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.groessen-hilfe summary::-webkit-details-marker { display: none; }
.groessen-hilfe summary::after {
  content: '+'; color: var(--gold); font-weight: 400; font-size: 1.4rem; line-height: 1;
  flex: 0 0 auto; transition: transform .15s ease;
}
.groessen-hilfe[open] summary::after { transform: rotate(45deg); }
.groessen-hilfe__inhalt { margin-top: 1rem; display: flex; flex-direction: column; gap: .85rem; }
.groessen-hilfe__zeile { display: flex; align-items: center; gap: .75rem; }
.groessen-hilfe__zeile p { margin: 0; color: var(--ink); }
.groessen-hilfe__abschluss {
  margin: .3rem 0 0; padding-top: .85rem; border-top: 1px dashed var(--gold);
  color: #4a5164; font-size: .92rem;
}

@media (max-width: 40rem) {
  .groessen-hilfe { padding: .8rem .9rem; }
}

/* -------------------------------------------------------------------- */
/* FAQ                                                                    */
/* -------------------------------------------------------------------- */

.faq details {
  border-bottom: 1px solid #e4ddcc; padding: .95rem 0;
}
.faq details:first-child { border-top: 1px solid #e4ddcc; }
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--navy); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--gold); font-weight: 400; font-size: 1.4rem; line-height: 1;
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .8rem 0 0; color: var(--ink); }

@media (max-width: 40rem) {
  /* Summary-Klickfläche war nur ~26px hoch (Textzeile ohne eigenes Padding) —
     unter dem 44px-Touch-Target-Mindestmaß. */
  .faq details { padding: .5rem 0; }
  .faq summary { padding: .65rem 0; }
}

/* -------------------------------------------------------------------- */
/* Footer                                                                 */
/* -------------------------------------------------------------------- */

.site-footer { background: var(--navy); color: var(--weiss); padding: 3.5rem 1rem 2rem; }
@media (max-width: 40rem) {
  /* Scroll-Puffer: die Sticky-CTA-Leiste bleibt am Footer sichtbar (Footer ist
     kein Blocker), daher braucht die Seite am Ende genug Reserve, damit der
     Footer-Inhalt beim Anschlag-Scroll nicht dauerhaft unter der Leiste liegt. */
  .site-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}
.site-footer a:link, .site-footer a:visited { color: var(--weiss); text-decoration: underline; text-decoration-color: var(--gold-hell); }
.site-footer a:hover { color: var(--gold-hell); }
.footer-grid {
  display: grid; gap: 2rem; margin-bottom: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.footer-grid h3 { color: var(--weiss); font-size: 1rem; margin: 0 0 .8rem; }
.footer-grid p { margin: 0 0 .4rem; color: #d7dae6; }
.footer-social { display: flex; gap: 1rem; margin-top: .6rem; padding: 0; list-style: none; }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: #b6bcd0;
}
.footer-legal a:link, .footer-legal a:visited { color: #b6bcd0; }

/* -------------------------------------------------------------------- */
/* Eyebrow-Kicker — kleines Uppercase-Label + Gradient-Strich vor H2      */
/* -------------------------------------------------------------------- */

.kicker-wrap { margin: 0 0 .6rem; }
.kicker {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.kicker__bar {
  display: block; width: 44px; height: 3px; margin-top: .5rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
}
.kicker-wrap--navy .kicker { color: var(--gold-hell); }
.kicker-wrap--navy .kicker__bar { background: linear-gradient(90deg, var(--gold), var(--weiss)); }

/* -------------------------------------------------------------------- */
/* Selection-Banner (#termin-status)                                     */
/* -------------------------------------------------------------------- */

.termin-status {
  margin: 1rem 0 1.5rem; padding: .9rem 1.1rem; border-radius: var(--radius);
  border: 2px dashed var(--gold); background: var(--creme); color: var(--navy);
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease;
}
.termin-status--set { border: 2px solid var(--navy); background: var(--weiss); }
.termin-status--set::before { content: '✓'; color: var(--gold); font-weight: 800; margin-right: .5rem; }

/* -------------------------------------------------------------------- */
/* Erfolgs-Panels (#buchung-erfolg, #anfrage-erfolg)                     */
/* -------------------------------------------------------------------- */

.erfolg-panel {
  border: 2px solid var(--navy); border-left: 5px solid var(--gold);
  padding: 1.5rem 1.75rem; text-align: left;
}
.erfolg-panel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; margin-bottom: .6rem;
  background: rgba(196, 160, 80, .14); color: var(--gold); font-weight: 800; font-size: 1.3rem;
}
.erfolg-panel__titel { margin: 0 0 .5rem; color: var(--navy); }
.erfolg-panel p { margin: 0 0 .5rem; }
.erfolg-panel p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- */
/* Sticky-CTA                                                             */
/* -------------------------------------------------------------------- */

.sticky-cta {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.7rem; border-radius: 999px;
  background: var(--gold); color: var(--navy-dark); font-weight: 700; text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(20, 31, 63, .45);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-cta:hover { background: var(--gold-hell); }

@media (max-width: 40rem) {
  .sticky-cta {
    left: 0; right: 0; bottom: 0; top: auto; border-radius: 0; width: 100%;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    text-align: center;
    box-shadow: 0 -8px 24px -12px rgba(20, 31, 63, .35);
    transform: translateY(100%);
  }
  .sticky-cta.is-visible { transform: translateY(0); }
}

/* -------------------------------------------------------------------- */
/* Scroll-Progress-Bar                                                   */
/* -------------------------------------------------------------------- */

#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  z-index: 60; pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* Scroll-Reveals — Progressive Enhancement: ohne .fx (kein JS) bleibt   */
/* alles sofort sichtbar.                                                */
/* -------------------------------------------------------------------- */

.fx [data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.fx [data-reveal].in { opacity: 1; transform: translateY(0); }
.fx [data-reveal-delay="1"] { transition-delay: .12s; }
.fx [data-reveal-delay="2"] { transition-delay: .24s; }

/* Karten-Reveal als „Freiwischen" — NUR .card-Elemente wischen per clip-path
   auf, Textblöcke/Sektionen behalten den einfachen Fade. Der Ruhezustand darf
   dabei KEIN clip-path tragen: Chromium (Edge/Chrome, Stand 08/2026) rechnet
   das eigene clip-path in die IntersectionObserver-Fläche ein — eine auf Null
   geclippte Karte erreicht den 18-%-Schwellwert nie und bleibt unsichtbar.
   Deshalb: versteckt = opacity 0, der Wipe läuft erst als Animation beim .in
   (fill-mode backwards hält die Karte während der Stagger-Delays geclippt). */
.fx .card[data-reveal] {
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.fx .card[data-reveal].in {
  opacity: 1;
  animation: karten-wipe .6s ease-out backwards;
}
.fx .card[data-reveal-delay="1"].in { animation-delay: .12s; }
.fx .card[data-reveal-delay="2"].in { animation-delay: .24s; }
@keyframes karten-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Kicker-Strich „wischt sich breit" — Skaliert per transform (compositor-
   freundlich, kein Layout-Trigger) von scaleX(0) auf scaleX(1) bei fester
   Zielbreite (44px, siehe Basisregel oben), kurz nach dem Start des
   Sektions-Reveals des kicker-wrap-Containers (data-reveal). */
.fx .kicker-wrap[data-reveal] .kicker__bar {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1) .15s;
}
.fx .kicker-wrap[data-reveal].in .kicker__bar { transform: scaleX(1); }

/* -------------------------------------------------------------------- */
/* Reduced Motion — jede Animation/jeder Übergang wird neutralisiert;    */
/* Endzustände (Reveals, Hero, Wipe) sind sofort sichtbar.               */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-title-wrap { clip-path: inset(0 0 0 0) !important; }
  .hero h1 .row > span { transform: translateY(0) !important; }
  .wipe-blade { display: none !important; }
  .fx [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-plx] { transform: none !important; }

  /* Putz-Effekte-Paket (Badge-Sweep, Karten-Wipe, Kicker-Strich,
     Button-Glanz, Preis-Glint) — vollständig neutralisiert: Endzustände
     sofort sichtbar, keine Sweeps/Glints. */
  .hero__badge-shine::before, .hero__badge-shine::after { animation: none !important; opacity: 0 !important; }
  .fx .card[data-reveal] { clip-path: inset(0 0 0 0) !important; }
  .fx .kicker-wrap[data-reveal] .kicker__bar { transform: scaleX(1) !important; }
  .btn-gold::after, .sticky-cta::after { animation: none !important; opacity: 0 !important; }
  #preis-anzeige.glint strong {
    animation: none !important; background-image: none !important;
    color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important;
  }
}