/* CleanBy – Mobile Fahrzeugaufbereitung Regensburg
   Produktions-Stylesheet. Die Gestaltung der einzelnen Bausteine steht (wie im Design-Canvas)
   ueberwiegend als Inline-Style im HTML; hier liegen Grundlagen, Zustaende, Breakpoints und Animationen.
   Hover-Zustaende am Dateiende werden von build/export.pl aus den Canvas-Dateien erzeugt. */

/* ---------- Schriften, lokal eingebunden: Poppins fuer Ueberschriften, Preise und Eyebrows,
   Inter fuer den Fliesstext (beide OFL, siehe ../fonts/OFL-*.txt) ---------- */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; size-adjust: 107.4%; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
/* metrisch angeglichene Ersatzschrift, damit beim Nachladen von Poppins kaum Layout-Verschiebung entsteht */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"); ascent-override: 92.83%; descent-override: 30.94%; line-gap-override: 8.84%; size-adjust: 113.11%; }

/* ---------- Grundlagen ---------- */
:root { --cb-bar-h: 68px; }
/* einheitliche Abschnittsabstaende (oben = unten): Inhaltsabschnitte bzw. Heros */
:root { --cb-sec: clamp(72px,9vw,136px); --cb-hero: clamp(72px,6.5vw,100px); }
@media (min-width: 1080px) { :root { --cb-bar-h: 96px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cb-bar-h) + 20px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #F5F6F2; color: #0E1F1C; font-family: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Ueberschriften, Preise/Zahlen (.cb-display, im Canvas als font-family:Poppins gesetzt) und Eyebrows in Poppins */
h1, h2, h3, h4, .cb-display, p[style*="letter-spacing:0.14em"] { font-family: Poppins, "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
b, strong, th { font-weight: 600; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: #047F6F; text-decoration: none; }
a:hover { color: #05685B; }
::selection { background: #5EEAD4; color: #03352F; }
[hidden] { display: none !important; }

/* viewport-fit=cover (damit die mobile Kontaktleiste bis in die Safe Area reicht): im Querformat bleiben
   Inhalte trotzdem ausserhalb von Notch/Dynamic Island */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
header > div:not(#cbh-menu), #cbh-menu > div, .cb-cbar { padding-left: max(clamp(20px,4vw,48px), env(safe-area-inset-left, 0px)) !important; padding-right: max(clamp(20px,4vw,48px), env(safe-area-inset-right, 0px)) !important; }

/* Fokus: sichtbar auf hellen und dunklen Flaechen */
:focus-visible { outline: 2px solid #047F6F; outline-offset: 3px; }
.cb-dots :focus-visible, .cb-dots-brand :focus-visible, .cb-on-dark :focus-visible { outline-color: #5EEAD4; }

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzer */
.cb-skip { position: absolute; left: 12px; top: -80px; z-index: 400; padding: 12px 18px; border-radius: 999px; background: #03352F; color: #FFFFFF; font-weight: 600; font-size: 15px; transition: top .2s ease; }
.cb-skip:focus, .cb-skip:focus-visible { top: 12px; color: #FFFFFF; outline-color: #5EEAD4; }
.cb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Sichtbarkeit je Breakpoint (ersetzt die Viewport-Logik des Canvas) ---------- */
@media (max-width: 1079.98px) { .cb-desk-only { display: none !important; } }
@media (min-width: 1080px) { .cb-mob-only { display: none !important; } }
@media (max-width: 1179.98px) { .cb-from-1180 { display: none !important; } }
@media (max-width: 639.98px) { .cb-from-640 { display: none !important; } }
@media (min-width: 760px) { .cb-below-760 { display: none !important; } }

/* ---------- Verlaeufe (Klassennamen historisch) ---------- */
.cb-dots { background-image: linear-gradient(135deg, #03302C 0%, #0A6763 100%); background-size: 100% 100%; }
.cb-dots-brand { background-image: linear-gradient(135deg, #047F6F 0%, #03493F 100%); background-size: 100% 100%; }
.cb-dots-tint { background-image: linear-gradient(135deg, #F2F9F7 0%, #D8EEE8 100%); background-size: 100% 100%; }
/* Punktmuster in allen gruenen Flaechen: feines Raster in Hell-Tuerkis, zur Mitte hin transparent ausgeblendet,
   damit Text und Bilder ruhig bleiben. Boxen (Karten, Zusammenstellung, Preislisten): eine Ecke oben rechts,
   relativ zur Boxgroesse. Abschnitte und Footer: oben rechts kraeftiger, unten links schwaecher, feste Groesse
   je Bildschirmbreite (waechst nicht mit der Abschnittshoehe). */
.cb-dots, .cb-dots-brand { position: relative; isolation: isolate; overflow: hidden; }
.cb-dots::before, .cb-dots-brand::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(94,234,212,0.34) 1.3px, transparent 1.8px);
  background-size: 24px 24px; background-position: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 95% 80% at 100% 0%, #000 0%, rgba(0,0,0,0.45) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 80% at 100% 0%, #000 0%, rgba(0,0,0,0.45) 45%, transparent 100%);
}
section > .cb-dots::before, section > .cb-dots-brand::before, footer.cb-dots::before {
  -webkit-mask-image: radial-gradient(ellipse min(74vw,900px) min(60vw,660px) at 100% 0%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 100%), radial-gradient(ellipse min(50vw,600px) min(42vw,460px) at 0% 100%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse min(74vw,900px) min(60vw,660px) at 100% 0%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 100%), radial-gradient(ellipse min(50vw,600px) min(42vw,460px) at 0% 100%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 45%, transparent 100%);
}
.cb-dots-brand::before { background-image: radial-gradient(circle, rgba(94,234,212,0.42) 1.3px, transparent 1.8px); }

/* ---------- Icons ---------- */
.i { width: 20px; height: 20px; flex: none; fill: currentColor; }
.if { fill: currentColor; stroke: none; }

/* ---------- Header ---------- */
.cbh-nav { position: relative; }
.cbh-nav::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: #047F6F; transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cbh-nav:hover::after, .cbh-nav[aria-current="page"]::after { transform: scaleX(1); }
.cbh-dd-link:hover .cbh-dd-ico, .cbh-dd-link:focus-visible .cbh-dd-ico, .cbh-dd-link[aria-current="page"] .cbh-dd-ico { background: #047F6F !important; color: #FFFFFF !important; }
.cbh-dd-chev { transition: transform .3s ease; }
[aria-expanded="true"] > .cbh-dd-chev { transform: rotate(180deg); }
.cbh-cta .cbh-cta-ico { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cbh-cta:hover .cbh-cta-ico { transform: rotate(45deg); }
html.cb-menu-open { overflow: hidden; }
/* Unterzeile "Mobile Fahrzeugaufbereitung": damit die Leiste auf jeder Breite in eine Zeile passt,
   rueckt die Navigation auf kleinen Laptops etwas zusammen und die Unterzeile wird auf schmalen
   Smartphones kleiner (unter 357 px entfaellt sie) */
@media (max-width: 1079.98px) { header > div:not(#cbh-menu) { gap: 8px !important; } }
@media (min-width: 1080px) and (max-width: 1279.98px) {
  nav[aria-label="Hauptnavigation"] > a { font-size: 15px !important; padding-left: 8px !important; padding-right: 8px !important; }
  nav[aria-label="Hauptnavigation"] [data-dd-toggle] { font-size: 15px !important; padding-left: 8px !important; padding-right: 6px !important; }
  .cbh-nav::after { left: 8px; right: 8px; }
  .cbh-cta { padding: 0 20px !important; }
}
/* Smartphones/Tablets: kompakter Header (Leiste 68 px, Logo 72 px, Menue-Button 44 px) */
@media (max-width: 1079.98px) {
  .cbh-tag { font-size: 11px !important; }
  .cbh-cta { min-height: 44px !important; padding: 0 18px !important; font-size: 15px !important; }
}
@media (max-width: 359.98px) {
  header a[aria-label="CleanBy – zur Startseite"] img { width: 64px !important; }
}
@media (max-width: 339.98px) { .cbh-tag { display: none; } }
@keyframes cbhDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cbhFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbhRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Bausteine ---------- */
.cb-anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.75,.15,1), transform .9s cubic-bezier(.2,.75,.15,1); }
.cb-anim [data-reveal].is-in { opacity: 1; transform: none; }
.cb-card .cb-zoom { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.cb-card:hover .cb-zoom { transform: scale(1.05); }
.cb-card:hover .cb-arrow, .cb-card:focus-visible .cb-arrow { transform: rotate(45deg); background: #047F6F !important; color: #FFFFFF !important; }
.cb-btn .cb-btn-ico { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cb-btn:hover .cb-btn-ico { transform: rotate(45deg); }

/* Formular */
.cb-field { transition: border-color .25s ease, background .25s ease; }
.cb-field:focus { border-color: #047F6F !important; background: #FFFFFF !important; }
.cb-field::placeholder { color: #66746F; opacity: 1; }
.cb-field[aria-invalid="true"] { border-color: #B42318 !important; }
.cb-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.cb-form-note.is-ok { color: #047F6F !important; font-weight: 600 !important; }
.cb-form-note.is-error { color: #B42318 !important; font-weight: 600 !important; }
form[aria-busy="true"] button[type="submit"] { opacity: .7; cursor: progress !important; }

/* FAQ */
.cb-faq summary { list-style: none; }
.cb-faq summary::-webkit-details-marker { display: none; }
.cb-faq[open] .cb-faq-ico { transform: rotate(45deg); background: #047F6F; color: #FFFFFF !important; border-color: #047F6F !important; }
.cb-faq[open] summary { color: #047F6F !important; }

/* Bewertungen */
.cb-reviews { columns: 3 300px; column-gap: 20px; }
.cb-reviews > * { break-inside: avoid; }

/* Vorher-Nachher-Regler */
/* Trefferflaeche 24px hoch, sichtbare Spur weiterhin 4px */
.cb-range { -webkit-appearance: none; appearance: none; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.cb-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.22); }
.cb-range::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.22); }
.cb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 99px; background: #5EEAD4; border: 3px solid #03352F; }
.cb-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 99px; background: #5EEAD4; border: 3px solid #03352F; }
.cb-range:focus-visible { outline-offset: 2px; }

/* Brotkrumen: groessere Trefferflaeche ohne Layoutaenderung */
nav[aria-label="Brotkrumen"] a { display: inline-block; padding: 4px 0; margin: -4px 0; }

/* Preisrechner: Auswahlzustaende */
.cb-opt[aria-pressed="true"] { border-color: #047F6F !important; }
.cb-opt-dot { border: 2px solid #C5D2CD !important; }
.cb-opt[aria-pressed="true"] .cb-opt-dot { border: 7px solid #047F6F !important; }
.cb-chip[aria-pressed="true"] { border-color: #03352F !important; background: #03352F !important; color: #FFFFFF !important; }
/* lange Zusatzleistungen umbrechen links, der Preis bleibt zusammen */
.cb-chip { text-align: left; }
.cb-chip > span { white-space: nowrap; }
.cb-thumb[aria-pressed="true"] { border-color: #5EEAD4 !important; opacity: 1 !important; }

/* Preisrechner als Schritt-fuer-Schritt-Assistent: app.js setzt .is-wizard und zeigt immer nur einen Schritt.
   Schrittleiste (oben) und Schritt bilden zusammen eine Karte. Ohne JavaScript bleiben alle Schritte sichtbar. */
@keyframes cbStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cb-calc.is-wizard { gap: 0 !important; }
.cb-calc.is-wizard [data-calc-step] { border-radius: 0 0 26px 26px !important; animation: cbStepIn .4s cubic-bezier(.2,.8,.2,1) both; }
.cb-calc.is-wizard [data-calc-step]:focus, .cb-calc-row > aside:focus { outline: none; }
.cb-calc-nav { background: #FFFFFF; border: 1px solid #E3E9E5; border-bottom: 0; border-radius: 26px 26px 0 0; padding: clamp(14px,2.2vw,26px) clamp(8px,2vw,24px) clamp(12px,1.8vw,22px); }
.cb-calc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-calc-steps > li { position: relative; }
.cb-calc-steps > li + li::before { content: ""; position: absolute; top: 19px; left: calc(-50% + 28px); right: calc(50% + 28px); height: 2px; border-radius: 2px; background: #D9E2DE; transition: background .35s ease; }
.cb-calc-steps > li.is-reached::before { background: #047F6F; }
.cb-calc-steps button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: #4E5E5A; font-size: clamp(13px, calc(12.4px + 0.15vw), 14px); font-weight: 600; line-height: 1.25; }
.cb-calc-no { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 2px solid #D9E2DE; background: #FFFFFF; color: #66746F; font-size: 15px; font-variant-numeric: tabular-nums; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.cb-calc-check { display: none; }
.cb-calc-steps > li.is-done button { color: #047F6F; }
.cb-calc-steps > li.is-done .cb-calc-no { border-color: #047F6F; background: #E6F3F0; color: #047F6F; }
.cb-calc-steps > li.is-done .cb-calc-num { display: none; }
.cb-calc-steps > li.is-done .cb-calc-check { display: block; }
.cb-calc-steps > li.is-cur button { color: #0E1F1C; }
.cb-calc-steps > li.is-cur .cb-calc-no { border-color: #047F6F; background: #047F6F; color: #FFFFFF; animation: cbPop .5s cubic-bezier(.2,.8,.2,1); }
.cb-calc-foot { clear: both; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: clamp(20px,2.2vw,26px); padding-top: clamp(16px,1.8vw,20px); border-top: 1px solid #E3E9E5; }
.cb-calc-live { margin: 0 auto 0 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; color: #4E5E5A; }
.cb-calc-live strong { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: #047F6F; font-variant-numeric: tabular-nums; }
.cb-calc-prev, .cb-calc-next { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.cb-calc-prev { padding: 0 20px 0 16px; border: 1px solid #E3E9E5; background: #FFFFFF; color: #0E1F1C; }
.cb-calc-next { padding: 0 18px 0 22px; border: 1px solid #047F6F; background: #047F6F; color: #FFFFFF; }
@media (hover: hover) {
  .cb-calc-steps button:hover .cb-calc-no { border-color: #047F6F; }
  .cb-calc-prev:hover { border-color: #047F6F; color: #047F6F; }
  .cb-calc-next:hover { background: #05685B; border-color: #05685B; }
}
@media (min-width: 900px) {
  .cb-calc-live, .cb-calc-done { display: none !important; }
  .cb-calc-next { margin-left: auto; }
}
@media (max-width: 419.98px) {
  .cb-calc-prev { width: 52px; padding: 0; }
  .cb-calc-prev-txt { display: none; }
}
@media (max-width: 359.98px) {
  .cb-calc-live { flex: 1 0 100%; flex-direction: row; align-items: baseline; justify-content: space-between; }
  .cb-calc-next { margin-left: auto; }
}
/* Fahrzeugklassen auf Smartphones kompakt: Bild links, Text rechts */
@media (max-width: 559.98px) {
  .cb-veh { display: grid !important; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 2px !important; align-items: center; padding: 12px 16px 12px 12px !important; }
  .cb-veh > img { grid-row: 1 / 3; width: 96px !important; height: 46px !important; margin: 0 !important; }
  .cb-veh > span:first-of-type { align-self: end; }
  .cb-veh > span:last-of-type { align-self: start; }
}

/* Preistabelle */
.cb-table th, .cb-table td { padding: 14px 12px; text-align: right; border-bottom: 1px solid #E3E9E5; white-space: nowrap; }
.cb-table th:first-child, .cb-table td:first-child { text-align: left; padding-left: 0; }
.cb-table tr:last-child td { border-bottom: 0; }

/* Vorher-Nachher-Bereich Startseite */
.cb-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". media" "head media" "thumbs media" "cta media" ". media"; column-gap: clamp(40px,5vw,80px); }
.cb-ba-head { grid-area: head; margin-bottom: 32px; }
.cb-ba-media { grid-area: media; align-self: center; }
.cb-ba-thumbs { grid-area: thumbs; margin-bottom: 28px; }
.cb-ba-cta { grid-area: cta; }
.cb-media { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .cb-media { aspect-ratio: 2 / 1; } }

/* Ablauf als Timeline */
.cb-time { --g: clamp(28px,3.4vw,56px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.cb-time::before { content: ""; position: absolute; left: 0; right: calc((100% - 2 * var(--g)) / 3 - 29px); top: 28px; height: 2px; background: linear-gradient(90deg, #047F6F 0%, #9FC4BC 100%); }
.cb-time > li { position: relative; padding-top: 86px; }
.cb-time-dot { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 999px; background: #F5F6F2; border: 2px solid #047F6F; color: #047F6F; }
.cb-time-dot.cb-time-last { background: #047F6F; color: #FFFFFF; }

/* Hero mit Bild (Unterseiten): nebeneinander ab 1080px ist der Bildrahmen so hoch wie die Textspalte,
   darunter stehen Text und Bild uebereinander und der Rahmen behaelt 4:3 */
@media (min-width: 1080px) {
  .cb-hero-row { flex-wrap: nowrap !important; align-items: stretch !important; }
  .cb-hero-media { display: flex; flex-direction: column; }
  .cb-hero-frame { flex: 1 1 auto; aspect-ratio: auto !important; min-height: 340px; }
}
@media (max-width: 1079.98px) { .cb-hero-row > * { flex-basis: 100% !important; } }


/* Ablauf-Animation: Schritte werden beim Scrollen nacheinander "erreicht" (Klassen setzt app.js).
   Ohne JavaScript bzw. bei reduzierter Bewegung bleibt die statische Darstellung. */
@keyframes cbPop { 0% { transform: scale(.82); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* Startseite: Timeline */
.cb-time.is-anim::before { background: #D9E2DE; }
.cb-time.is-anim::after { content: ""; position: absolute; left: 0; right: calc((100% - 2 * var(--g)) / 3 - 29px); top: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #047F6F 0%, #0B9B87 100%); transform: scaleX(var(--cb-prog, 0)); transform-origin: left center; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.cb-time.is-anim > li { z-index: 1; }
.cb-time.is-anim .cb-time-dot { background: #F5F6F2; border-color: #C9D5D0; color: #9AABA5; transition: background .35s ease, border-color .35s ease, color .35s ease; }
.cb-time.is-anim > li > p:first-of-type { color: #66746F !important; transition: color .35s ease; }
.cb-time.is-anim > li.is-on .cb-time-dot { background: #047F6F; border-color: #047F6F; color: #FFFFFF; animation: cbPop .55s cubic-bezier(.2,.8,.2,1); }
.cb-time.is-anim > li.is-on > p:first-of-type { color: #047F6F !important; }
@media (max-width: 760px) {
  .cb-time.is-anim::after { display: none; }
  .cb-time.is-anim > li:not(:last-child)::before { background: #D9E2DE; }
  .cb-time.is-anim > li:not(:last-child)::after { content: ""; position: absolute; left: 28px; top: 58px; bottom: -30px; width: 2px; border-radius: 2px; background: #047F6F; transform: scaleY(0); transform-origin: top center; transition: transform .45s cubic-bezier(.4,0,.2,1); }
  .cb-time.is-anim > li.is-link::after { transform: scaleY(1); }
}
/* Dunkle Variante (Aussenreinigung, Abschnitt mit dunklem Verlauf): gleiche Timeline in Mint.
   Die Kreise brauchen eine deckende Flaeche, damit die Linie dahinter verschwindet. */
.cb-time-dark::before { background: linear-gradient(90deg, #5EEAD4 0%, rgba(94,234,212,0.3) 100%); }
.cb-time-dark .cb-time-dot { background: #064740; border-color: #5EEAD4; color: #5EEAD4; }
.cb-time-dark .cb-time-dot.cb-time-last { background: #5EEAD4; color: #03352F; }
.cb-time-dark.is-anim::before { background: rgba(255,255,255,0.16); }
.cb-time-dark.is-anim::after { background: linear-gradient(90deg, #5EEAD4 0%, #9CF3E3 100%); }
.cb-time-dark.is-anim .cb-time-dot { background: #064740; border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.5); }
.cb-time-dark.is-anim > li > p:first-of-type { color: rgba(255,255,255,0.62) !important; }
.cb-time-dark.is-anim > li.is-on .cb-time-dot { background: #5EEAD4; border-color: #5EEAD4; color: #03352F; }
.cb-time-dark.is-anim > li.is-on > p:first-of-type { color: #5EEAD4 !important; }
@media (max-width: 760px) {
  .cb-time-dark > li:not(:last-child)::before { background: linear-gradient(180deg, #5EEAD4 0%, rgba(94,234,212,0.3) 100%) !important; }
  .cb-time-dark.is-anim > li:not(:last-child)::before { background: rgba(255,255,255,0.16) !important; }
  .cb-time-dark.is-anim > li:not(:last-child)::after { background: #5EEAD4; }
}

/* Rechtstexte */
.cb-legal p + p { margin-top: 12px; }
.cb-legal a { font-weight: 600; }
/* lange Woerter (z. B. "Kleinunternehmerregelung") duerfen auf 320 px umbrechen, falls der Browser nicht silbentrennt */
.cb-legal dd { overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.cbf-btn .cbf-btn-ico { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cbf-btn:hover .cbf-btn-ico { transform: rotate(45deg); }
/* Footer (seit 24.09.2026 ruhiger): Link-Listen nur Text (Hover Brand-Gruen mit Unterstreichung), Kontakt mit
   freien 20-px-Icons in Brand-Gruen; alle Eintraege gleiche Schrift, Farbe und Abstaende */
.cbf-cols { display: grid; grid-template-columns: minmax(240px, 1.3fr) auto auto auto; gap: clamp(32px,4vw,72px); justify-content: space-between; align-items: start; }
.cbf-link { white-space: nowrap; }
.cbf-cols ul a:hover, .cbf-cols ul a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Trefferflaeche per Innenabstand (mind. 30 px hoch), sichtbarer Abstand gleich */
.cbf-cols ul { gap: 2px !important; }
.cbf-cols ul a { padding-top: 5px !important; padding-bottom: 5px !important; }
/* irmadesigns-Badge für den Footer von Kunden-Websites (erzeugt mit tools/badge/build-badge.py)
   Varianten: Standard = dunkel, --hell, --neutral (übernimmt die Textfarbe des Footers), zusätzlich --kompakt (ohne „Webdesign von“)
   Größe: font-size am Badge ändern. 10px = 36 px hoch (Standard), 9px = 32 px, 12px = 43 px */
.irmadesigns-badge{--idb-grund:#121212;--idb-rand:#343434;--idb-text:#f8f8f8;--idb-label:#aaaeb3;--idb-punkt:#3cbfff;--idb-kreis:#3cbfff;--idb-pfeil:#061018;--idb-fokus:#3cbfff}
.irmadesigns-badge:hover,.irmadesigns-badge:focus-visible{--idb-grund:#f8f8f8;--idb-rand:#f8f8f8;--idb-text:#0a0a0a;--idb-label:#50565c}
.irmadesigns-badge--hell{--idb-grund:#ffffff;--idb-rand:#dfe3e6;--idb-text:#0a0a0a;--idb-label:#50565c;--idb-fokus:#0b6e9c}
.irmadesigns-badge--hell:hover,.irmadesigns-badge--hell:focus-visible{--idb-grund:#0a0a0a;--idb-rand:#0a0a0a;--idb-text:#f8f8f8;--idb-label:#aaaeb3}
.irmadesigns-badge--neutral,.irmadesigns-badge--neutral:hover,.irmadesigns-badge--neutral:focus-visible{--idb-grund:transparent;--idb-rand:rgba(128,128,128,.45);--idb-text:currentColor;--idb-label:currentColor}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .irmadesigns-badge--neutral{--idb-rand:color-mix(in srgb,currentColor 30%,transparent);--idb-label:color-mix(in srgb,currentColor 72%,transparent)}
  .irmadesigns-badge--neutral:hover,.irmadesigns-badge--neutral:focus-visible{--idb-rand:currentColor}
}
.irmadesigns-badge{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;gap:.45em;max-width:100%;height:3.6em;margin:0;padding:0 .5em 0 1.4em;border:1px solid var(--idb-rand);border-radius:3.6em;background:var(--idb-grund);color:var(--idb-text);font-size:10px;line-height:1;letter-spacing:normal;text-decoration:none;white-space:nowrap;vertical-align:middle;transition:background-color .3s ease,border-color .3s ease}
.irmadesigns-badge:focus-visible{outline:2px solid var(--idb-fokus);outline-offset:3px}
.irmadesigns-badge__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.irmadesigns-badge__label,.irmadesigns-badge__wortmarke{display:block;flex:none;height:1.945em;max-width:none;overflow:visible}
.irmadesigns-badge__label{width:8.885em}
.irmadesigns-badge__wortmarke{width:8.595em}
.irmadesigns-badge__label path{fill:var(--idb-label);transition:fill .3s ease}
.irmadesigns-badge__wortmarke path{fill:var(--idb-text);transition:fill .3s ease}
.irmadesigns-badge__wortmarke .irmadesigns-badge__punkt{fill:var(--idb-punkt)}
.irmadesigns-badge__pfeil{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;margin-left:.55em;border-radius:50%;background:var(--idb-kreis);color:var(--idb-pfeil);transition:transform .3s ease}
.irmadesigns-badge__pfeil svg{display:block;width:1.3em;height:1.3em;max-width:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.irmadesigns-badge:hover .irmadesigns-badge__pfeil,.irmadesigns-badge:focus-visible .irmadesigns-badge__pfeil{transform:rotate(45deg)}
.irmadesigns-badge--kompakt .irmadesigns-badge__label{display:none}
@media (prefers-reduced-motion:reduce){.irmadesigns-badge,.irmadesigns-badge *{transition:none}}

/* Der Footer ist hell wie die Seite: endet die Seite auf Ground, faellt sein oberer Innenabstand weg
   (sonst doppelter Abschnittsabstand); endet sie weiss, bleibt der normale Abstand zur Tonwert-Kante. */
.cbf-inner { padding-top: 0 !important; }
body:has(main > section:last-child[style*="background:#FFFFFF"]) .cbf-inner { padding-top: var(--cb-sec) !important; }

/* ---------- Karten: dezenter Hover ----------
   Icon-Kaestchen wird dunkelgruen mit tuerkisem Icon (auf dunklem Grund umgekehrt: Mint mit dunklem Icon).
   Auf Touch-Geraeten ohne Hover setzt app.js .is-hot fuer die Karte in der Bildschirmmitte. */
.cb-hov { transition: border-color .3s ease; }
.cb-hov-ico { transition: background .3s ease, color .3s ease, border-color .3s ease; }
@media (hover: hover) {
  .cb-hov:hover .cb-hov-ico { background: #03352F !important; border-color: #03352F !important; color: #5EEAD4 !important; }
  .cb-hov-dark:hover .cb-hov-ico { background: #5EEAD4 !important; color: #03352F !important; }
}
.cb-hov.is-hot .cb-hov-ico { background: #03352F !important; border-color: #03352F !important; color: #5EEAD4 !important; }
.cb-hov-dark.is-hot .cb-hov-ico { background: #5EEAD4 !important; color: #03352F !important; }
.cb-hov:focus-visible .cb-hov-ico { background: #03352F !important; border-color: #03352F !important; color: #5EEAD4 !important; }

/* FAQ: Frage bei Hover/Fokus in Brand-Gruen, Plus-Kreis mit gruenem Rand */
@media (hover: hover) {
  .cb-faq summary:hover { color: #047F6F !important; }
  .cb-faq:not([open]) summary:hover .cb-faq-ico { border-color: #047F6F !important; background: #E6F3F0; }
}
.cb-faq summary:focus-visible .cb-faq-ico { border-color: #047F6F !important; }

/* Leistungskarten der Startseite: ab 1080 px alle vier nebeneinander (hochformatige Karten) */
@media (min-width: 1080px) {
  .cb-svc { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .cb-svc .cb-media { aspect-ratio: 4 / 3; }
}
.cb-card h3 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* Einblend-Animationen der Heros: nach dem Ende keinen Endzustand festhalten. Ein dauerhaft wirksamer
   Animationszustand macht den Container zur "Backdrop-Root" – dann bleibt backdrop-filter (Blur) darin wirkungslos. */
[style*="animation:cbRise"], [style*="animation:cbFade"] { animation-fill-mode: backwards !important; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1080px) {
  .cbf-cols { grid-template-columns: repeat(3, auto); gap: 40px 28px; justify-content: space-between; }
  .cbf-brand { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 900px) {
  .cb-ba { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "media" "thumbs" "cta"; }
  .cb-ba-head { margin-bottom: 28px; max-width: none !important; }
  .cb-ba-media { margin-bottom: 20px; }
  .cb-ba-thumbs { max-width: none !important; margin-bottom: 26px; }
  .cb-sticky { position: relative !important; top: auto !important; }
  .cb-fill, .cb-sticky { flex-basis: 100% !important; max-width: none !important; }
}
@media (max-width: 760px) {
  h1, h2, h3, p, li, dd, blockquote { text-wrap: wrap !important; }
  [style*="white-space:nowrap"] { text-wrap: nowrap !important; }
  p, li, dd, blockquote { -webkit-hyphens: auto; hyphens: auto; }
  .cb-time { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .cb-time::before { display: none; }
  .cb-time > li { padding-top: 0; padding-left: 80px; min-height: 58px; }
  .cb-time > li:not(:last-child)::before { content: ""; position: absolute; left: 28px; top: 58px; bottom: -30px; width: 2px; background: linear-gradient(180deg, #047F6F 0%, #9FC4BC 100%); }
}
/* Smartphones: Buttons etwas kompakter, damit mehr Inhalt in den Sichtbereich passt. Die Groessen stehen
   inline im HTML (Canvas-Export), daher gezielt ueber die Mindesthoehe im style-Attribut angesprochen. */
@media (max-width: 559.98px) {
  a[style*="min-height:58px"], a[style*="min-height:60px"], a[style*="min-height:62px"], button[style*="min-height:58px"] { min-height: 50px !important; }
  a[style*="min-height:54px"], button[style*="min-height:54px"] { min-height: 46px !important; }
  .cb-btn .cb-btn-ico, .cbf-btn .cbf-btn-ico { width: 38px !important; height: 38px !important; }
}
/* Smartphones: Hero-Badge mittig und etwas kleiner; Footer kompakt (Leistungen und CleanBy nebeneinander,
   Kontakt ueber die volle Breite) */
@media (max-width: 559.98px) {
  .cb-hero-badge { left: 50% !important; transform: translateX(-50%); bottom: 94px !important; gap: 10px !important; padding: 9px 14px 9px 9px !important; border-radius: 16px !important; white-space: nowrap; }
  .cb-hero-badge > span:first-child { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
  .cb-hero-badge > span:first-child img { width: 22px !important; height: 22px !important; }
  .cb-hero-badge strong { font-size: 18px !important; }
  .cbf-cols { grid-template-columns: max-content minmax(0, 1fr) !important; gap: 32px clamp(24px,8vw,48px) !important; }
  .cbf-cols > .cbf-brand, .cbf-cols > .cbf-contact { grid-column: 1 / -1; }
  .cbf-link { white-space: normal; }
}
@media (max-width: 560px) {
  .cb-btns > a { flex: 1 1 100%; justify-content: center; }
  .cb-btns > .cb-btn, .cb-ba-cta .cb-btn { display: flex !important; justify-content: space-between; }
  .cb-table th, .cb-table td { padding: 12px 8px; }
  .cb-table td:first-child { white-space: normal; }
}

/* ---------- Animationen ---------- */
@keyframes cbRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes cbFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .cb-anim [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Hover-/Fokus-Zustaende (generiert aus style-hover der Canvas-Dateien) ---------- */
@media (hover: hover) {
  .hv1:hover { background:#F5F6F2 !important; color:#0E1F1C !important; }
  .hv2:hover { color:#0E1F1C !important; }
  .hv3:hover { border-color:#047F6F !important; color:#047F6F !important; }
  .hv4:hover { background:#05685B !important; color:#FFFFFF !important; }
  .hv5:hover { background:#FFFFFF !important; color:#03352F !important; transform:translateY(-2px) !important; }
  .hv6:hover { background:rgba(255,255,255,0.08) !important; border-color:rgba(255,255,255,0.5) !important; color:#FFFFFF !important; }
  .hv7:hover { color:#03352F !important; }
  .hv8:hover { border-color:#047F6F !important; color:#0E1F1C !important; }
  .hv9:hover { opacity:1 !important; transform:translateY(-2px) !important; }
  .hv10:hover { background:#5EEAD4 !important; color:#03352F !important; }
  .hv11:hover { border-color:#047F6F !important; transform:translateY(-2px) !important; color:#0E1F1C !important; }
  .hv12:hover { border-color:#047F6F !important; }
  .hv13:hover { background:#FFFFFF !important; color:#03352F !important; }
  .hv14:hover { background:rgba(255,255,255,0.08) !important; color:#FFFFFF !important; }
  .hv15:hover { color:#5EEAD4 !important; padding-left:14px !important; }
  .hv16:hover { color:#FFFFFF !important; border-color:#FFFFFF !important; }
  .hv17:hover { background:#047F6F !important; color:#FFFFFF !important; }
  .hv18:hover { border-color:#047F6F !important; background:#FFFFFF !important; color:#0E1F1C !important; }
  .hv19:hover { background:#05685B !important; }
  .hv20:hover { background:rgba(255,255,255,0.08) !important; border-color:rgba(255,255,255,0.45) !important; color:#FFFFFF !important; }
  .hv21:hover { background:#047F6F !important; border-color:#047F6F !important; color:#FFFFFF !important; }
  .hv22:hover { color:#047F6F !important; }
  .hv23:hover { color:#FFFFFF !important; }
  .hv24:hover { color:#03352F !important; border-color:#03352F !important; }
  .hv25:hover { color:#5EEAD4 !important; }
}
.hv1:focus-visible { background:#F5F6F2 !important; color:#0E1F1C !important; }
.hv2:focus-visible { color:#0E1F1C !important; }
.hv3:focus-visible { border-color:#047F6F !important; color:#047F6F !important; }
.hv4:focus-visible { background:#05685B !important; color:#FFFFFF !important; }
.hv5:focus-visible { background:#FFFFFF !important; color:#03352F !important; transform:translateY(-2px) !important; }
.hv6:focus-visible { background:rgba(255,255,255,0.08) !important; border-color:rgba(255,255,255,0.5) !important; color:#FFFFFF !important; }
.hv7:focus-visible { color:#03352F !important; }
.hv8:focus-visible { border-color:#047F6F !important; color:#0E1F1C !important; }
.hv9:focus-visible { opacity:1 !important; transform:translateY(-2px) !important; }
.hv10:focus-visible { background:#5EEAD4 !important; color:#03352F !important; }
.hv11:focus-visible { border-color:#047F6F !important; transform:translateY(-2px) !important; color:#0E1F1C !important; }
.hv12:focus-visible { border-color:#047F6F !important; }
.hv13:focus-visible { background:#FFFFFF !important; color:#03352F !important; }
.hv14:focus-visible { background:rgba(255,255,255,0.08) !important; color:#FFFFFF !important; }
.hv15:focus-visible { color:#5EEAD4 !important; padding-left:14px !important; }
.hv16:focus-visible { color:#FFFFFF !important; border-color:#FFFFFF !important; }
.hv17:focus-visible { background:#047F6F !important; color:#FFFFFF !important; }
.hv18:focus-visible { border-color:#047F6F !important; background:#FFFFFF !important; color:#0E1F1C !important; }
.hv19:focus-visible { background:#05685B !important; }
.hv20:focus-visible { background:rgba(255,255,255,0.08) !important; border-color:rgba(255,255,255,0.45) !important; color:#FFFFFF !important; }
.hv21:focus-visible { background:#047F6F !important; border-color:#047F6F !important; color:#FFFFFF !important; }
.hv22:focus-visible { color:#047F6F !important; }
.hv23:focus-visible { color:#FFFFFF !important; }
.hv24:focus-visible { color:#03352F !important; border-color:#03352F !important; }
.hv25:focus-visible { color:#5EEAD4 !important; }
#main:focus, section[tabindex="-1"]:focus { outline: none; }
@media print { .cb-anim [data-reveal] { opacity: 1 !important; transform: none !important; } .cb-below-760, header { display: none !important; } }