/* WebWerkstatt: Übernahmen aus Anias Entwurf (8a75c20d.digihub-webwerkstatt-dev.pages.dev), Vorschau 30.10.2026.
   Farben nur digihub: Apricot #FF8577, Teal #31BEB0, Grau/Schwarz #313131 #55575a #e3e1db #F6F1E8. Kein Grün. */

/* 1) Eckige Kacheln wie bei Ania (border-radius 0), auch Buttons (Ania: eckig).
      Runde Icons, Punkte, Avatare und Nummernkreise bleiben rund. */
:where(body.dh-shell,body.ww-dev-page) :where(*:not(img):not(picture):not(video):not(svg):not(svg *)),
:where(body.dh-shell,body.ww-dev-page) :where(*:not(svg *))::before,
:where(body.dh-shell,body.ww-dev-page) :where(*:not(svg *))::after{border-radius:0!important}

.theme-toggle,.icon-btn,.lang-link,.people img,[data-dh-footer="site"] .dh-drop-info,.cal-nav,.cal-num,.sm-close,.dh-quest-close,.dh-ww-popup-close,.dh-ww-popup-badge-dot,.goal-num,.ww-intro-num,.ww-ft-nl-info,.hub-services>summary svg,.booking-people img{border-radius:999px!important}
.filters button[data-filter]::before,.dh-ww-dates li::before,.dh-hubbie .hb-dots i,.dh-quest-dot,.dh-quest-no,.ww-avatars img,.ww-marker,.ww-fq summary::after,.ww-theme-btn,.ww-hero::after,.mood-warm::before,.mood-erde::after,.mood-play::before,.fx-spotlight .spot,.fx-blobs .b,.fx-thread .dots i{border-radius:50%!important}

/* 1b) Fragebogen: ww-form-neu.css setzt Radien mit !important, darum hier gezielt eckig. */
body.ww-dev-page,body.ww-dev-page *{--f-r:0px!important;--f-r-sm:0px!important}
body.ww-dev-page .ww-btn,body.ww-dev-page .ww-chip,body.ww-dev-page .ww-weg-pill,body.ww-dev-page .ww-mood-votes button,body.ww-dev-page .ww-jonas .badge,body.ww-dev-page .ww-root .badge,body.ww-dev-page .ww-progress-row .ww-progress-bar,body.ww-dev-page .ww-progress-bar>i,body.ww-dev-page .ww-panel,body.ww-dev-page .ww-rail,body.ww-dev-page .ww-rail button,body.ww-dev-page .ww-field input,body.ww-dev-page .ww-field textarea,body.ww-dev-page .ww-field select{border-radius:0!important}

/* 2) Titel leicht schräg wie Anias Balken-Titel (.mega span: rotate(-1deg), .m2: rotate(1deg)). Punkte bleiben Teal. */
.ww-page h1,.ww-page h2{display:inline-block;transform:rotate(-1deg);transform-origin:0 60%}
.ww-page > section:nth-of-type(even) h2{transform:rotate(1deg)}
@media (prefers-reduced-motion:reduce){.ww-page h1,.ww-page h2{transition:none}}

/* 3) «Fragebogen starten» wie Anias Dock-Button: fix unten links, immer sichtbar (ausser Cookie-Hinweis offen). */
/* Platz für den Button unter der Fusszeile (Ania: body padding-bottom 84px), hier im Footer, damit der Hintergrund durchläuft. */
body:has(a.ww-sticky) .ww-ft-bar{padding-bottom:84px}
body.dh-shell{padding-bottom:0!important}
html[data-theme="dark"] body a.ww-sticky{box-shadow:0 0 0 2px #313131!important}
body a.ww-sticky,body a.ww-sticky:link,body a.ww-sticky:visited{position:fixed;left:max(18px,env(safe-area-inset-left));right:auto;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;min-height:0;width:auto;padding:11px 14px 9px;border-radius:0;background:#FF8577;color:#313131;font-weight:800;font-size:15px;line-height:1.2;text-transform:uppercase;letter-spacing:-.02em;text-decoration:none;box-shadow:0 0 0 2px #313131;transform:translateY(calc(100% + 40px));transition:transform .3s cubic-bezier(.16,1,.3,1)}
body a.ww-sticky.is-on{transform:none}
body a.ww-sticky:hover,body a.ww-sticky:focus-visible{background:#31BEB0;color:#313131}
html[data-theme="dark"] body a.ww-sticky,html[data-theme="dark"] body a.ww-sticky:link,html[data-theme="dark"] body a.ww-sticky:visited{background:#FF8577;color:#313131;box-shadow:0 0 0 2px #313131}
html[data-theme="dark"] body a.ww-sticky:hover{background:#31BEB0}
body a.ww-sticky i{display:none}
body:has(a.ww-sticky.is-on) .dh-quest-fab{bottom:72px}
@media (max-width:900px){body a.ww-sticky,body a.ww-sticky:link,body a.ww-sticky:visited{font-size:13px;padding:10px 11px 8px}}
@media (prefers-reduced-motion:reduce){body a.ww-sticky{transition:none}}
@media print{body a.ww-sticky{display:none!important}}

/* 4) digihub-Kachel im Footer (Anias .dhbox), volle Breite über der Fusszeile. */
.ww-ft-dhbox,.ww-ft-dhbox:link,.ww-ft-dhbox:visited{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;margin:26px 0 22px;padding:26px 28px;background:#313131;color:#fff;text-decoration:none;transform:rotate(-.5deg);transition:transform .3s}
.ww-ft-dhbox:hover,.ww-ft-dhbox:focus-visible{transform:rotate(0)}
.ww-ft-dhbox .dh-brand{display:flex;flex-direction:column;gap:8px}
.ww-ft-dhbox .dh-brand img{width:170px;height:auto;display:block}
.ww-ft-dhbox .dh-brand small{font-weight:600;font-size:11px;letter-spacing:.32em;color:#e3e1db}
.ww-ft-dhbox .dh-claim{font-weight:500;font-size:clamp(18px,1.8vw,24px);line-height:1.25;color:#F6F1E8}
.ww-ft-dhbox .dh-go{display:inline-flex;align-items:center;gap:12px;background:#31BEB0;color:#313131;font-weight:600;font-size:15px;padding:10px 10px 10px 16px}
.ww-ft-dhbox .dh-go i{display:inline-grid;place-items:center;width:26px;height:26px;background:#313131;color:#fff;font-style:normal}
.ww-ft-dhbox:hover .dh-go{background:#FF8577}
html[data-theme="dark"] .ww-ft-dhbox{background:#313131;box-shadow:0 0 0 1px #55575a}
@media (max-width:900px){.ww-ft-dhbox,.ww-ft-dhbox:link,.ww-ft-dhbox:visited{grid-template-columns:1fr;gap:16px;padding:22px 20px}.ww-ft-dhbox .dh-go{justify-self:start}}
@media (prefers-reduced-motion:reduce){.ww-ft-dhbox{transition:none}}

/* 5) Header-Logo: finale Dateien von Designs (horizontal hell/dunkel), Grösse wie bei Ania: 122x32, mobil (bis 720px) 26px hoch. */
.ww-logo,html body.dh-shell .site-head .ww-head-ww.ww-logo{display:inline-flex;align-items:center;gap:0;padding:0!important;border:0!important;min-height:0;line-height:0;text-decoration:none}
.ww-logo img{display:block;height:32px!important;width:auto!important;max-width:none}
.ww-logo .ww-logo-d{display:none!important}
html[data-theme="dark"] .ww-logo .ww-logo-l{display:none!important}
html[data-theme="dark"] .ww-logo .ww-logo-d{display:block!important}
@media (max-width:720px){.ww-logo img{height:26px!important}}

/* 6) Titelabschnitt: Designs-Logo statt Text-Titel (Vorschau 30.10.2026). h1 bleibt für Screenreader. */
.ww-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ww-page .ww-hero h1.ww-hero-logo{display:block;transform:none;margin:10px 0 6px;line-height:0}
.ww-hero-logo img{display:block;height:auto;max-width:100%}
.ww-hero-logo--h img{width:clamp(280px,40vw,500px)}
.ww-hero-logo--s img{width:clamp(130px,16vw,200px)}
.ww-hero-logo .ww-hl-d{display:none}
html[data-theme="dark"] .ww-hero-logo .ww-hl-l{display:none}
html[data-theme="dark"] .ww-hero-logo .ww-hl-d{display:block}

/* 7) #paket: Kurspaket als Kachel, Zusatzangebote schlicht (ohne Kachel), Aufklappen bleibt. */
.ww-paket-card{background:var(--ww-card);border:2px solid var(--ww-frame);padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,32px)}
.ww-paket-card h2{margin-top:0}
.ww-paket-card .ww-list{margin-bottom:0}
.ww-paket .ww-addons{background:none!important;border:0!important;box-shadow:none!important;overflow:visible}
.ww-paket .ww-addons summary{padding:6px 0 16px}
.ww-paket .ww-addons-intro{padding:0 0 6px}
.ww-paket .ww-addons ul{padding:0}

/* 8) Footer: digihub-Kachel zuerst, darunter Adresse, Navigation, Newsletter. */
.ww-ft-in>.ww-ft-dhbox,.ww-ft-in>.ww-ft-dhbox:link,.ww-ft-in>.ww-ft-dhbox:visited{margin:8px 0 clamp(36px,4vw,52px)}

/* 9) Dunkles Teal wie bei Ania (--deep #1E7C73 in v2-t1.css), damit die Seite weniger grell wirkt.
      Helles Teal #31BEB0 bleibt für Punkte, Hover und Akzente. Weisse Schrift auf #1E7C73 (Kontrast 5.1:1). */
body.dh-shell,body.ww-dev-page{--btn-bg:#1E7C73;--btn-ink:#fff;--ww-frame:#1E7C73}
html body.dh-shell a.btn-primary,html body.dh-shell button.btn-primary,html body.dh-shell .site-head .primary a.btn-primary{background:#1E7C73;color:#fff;border-color:#1E7C73}
html body.dh-shell a.btn-primary:hover,html body.dh-shell button.btn-primary:hover,html body.dh-shell a.btn-primary:focus-visible,html body.dh-shell .site-head .primary a.btn-primary:hover{background:#31BEB0;color:#313131;border-color:#31BEB0}
.ww-way--auftrag{background:#1E7C73!important;background-image:none!important;color:#fff}
.ww-way--auftrag .ww-way-label,main .ww-way--auftrag h3,.ww-way--auftrag p,.ww-way--auftrag li,.ww-way--auftrag h4{color:#fff!important}
.ww-astep{background:#1E7C73!important;background-image:none!important;color:#fff}
.ww-astep .ww-n,main .ww-astep h3,.ww-astep p{color:#fff!important}
.ww-astep a{color:#fff}
.ww-marker{background:#1E7C73!important;color:#fff!important}
.session .meta{background:#1E7C73!important;color:#fff!important}
.ww-ft-dhbox .dh-go{background:#1E7C73;color:#fff}
.ww-ft-dhbox .dh-go i{background:#fff;color:#1E7C73}
.ww-ft-dhbox:hover .dh-go{background:#FF8577;color:#313131}
.ww-ft-dhbox:hover .dh-go i{background:#313131;color:#fff}
a.ww-ft-news-btn,a.ww-ft-news-btn:link,a.ww-ft-news-btn:visited{background:#1E7C73!important;color:#fff!important;border-color:#1E7C73!important}
a.ww-ft-news-btn:hover,a.ww-ft-news-btn:focus-visible{background:#31BEB0!important;color:#313131!important}
html:not([data-theme="dark"]) body.dh-shell main a.text-link,html:not([data-theme="dark"]) .ww-faq-more a{color:#1E7C73}
html[data-theme="dark"] .ww-paket-card,html[data-theme="dark"] .ww-reg-card{border-color:#1E7C73}
/* Dialog (Termin-Popup) */
.sm-card .btn-primary,.sm-card .sm-wl{background:#1E7C73!important;color:#fff!important;border-color:#1E7C73!important}
.sm-card .btn-primary:hover{background:#31BEB0!important;color:#313131!important}

/* 10) Titel auf schräger Kachel wie Anias .mega (span: inline-block, padding 10px 20px 6px, rotate(-1deg), ohne Schatten;
       .m2 dreht +1deg). Gross geschrieben, 800, letter-spacing -.02em, line-height .95.
       Farben digihub statt Anias Teal/Lime: dunkles Teal #1E7C73 mit weisser Schrift, im Wechsel Apricot #FF8577 mit #313131. Punkte bleiben #31BEB0. */
.ww-page section h2{display:inline-block;padding:10px 20px 6px;background:#1E7C73;color:#fff!important;text-transform:uppercase;font-weight:800!important;letter-spacing:-.02em!important;line-height:.95!important;transform:rotate(-1deg);transform-origin:50% 50%;box-shadow:none;max-width:100%}
.ww-page > section:nth-of-type(even) h2{background:#FF8577;color:#313131!important;transform:rotate(1deg)}
.ww-page section h2 .lime-dot{color:#31BEB0!important}
.ww-page > section:nth-of-type(even) h2 .lime-dot{color:#1E7C73!important}
.ww-page section h2.fx-up{transform:rotate(-1deg) translateY(14px)}
.ww-page section h2.fx-up.fx-in{transform:rotate(-1deg)}
.ww-page > section:nth-of-type(even) h2.fx-up{transform:rotate(1deg) translateY(14px)}
.ww-page > section:nth-of-type(even) h2.fx-up.fx-in{transform:rotate(1deg)}
@media (max-width:640px){.ww-page section h2{padding:8px 12px 5px}}
/* 9b) Korrekturen nach Sichtprüfung */
html body.dh-shell .site-head a.btn-primary.tools-cta,html body.dh-shell .site-head a.btn-primary.nav-cta{background:#1E7C73!important;color:#fff!important;border-color:#1E7C73!important}
html body.dh-shell .site-head a.btn-primary.tools-cta:hover,html body.dh-shell .site-head a.btn-primary.nav-cta:hover{background:#31BEB0!important;color:#313131!important;border-color:#31BEB0!important}
.ww-way--auftrag .ww-cmp-box{background:rgba(255,255,255,.12)!important;color:#fff}
.ww-way--auftrag .ww-cmp-box *{color:#fff!important}
.ww-way--auftrag .ww-cmp-box svg{stroke:#fff}
.ww-page section h2{margin-top:6px}
.ww-page section h2 .ww-hl{color:#FF8577!important}
.ww-page > section:nth-of-type(even) h2 .ww-hl{color:#fff!important}
/* 9c) Termin-Dialog: dunkles Teal für Hauptaktion, Badge und Auswahl; Hover hell */
body.dh-shell .sm-card .sm-submit{background:#1E7C73!important;color:#fff!important;border-color:#1E7C73!important}
body.dh-shell .sm-card .sm-submit:hover,body.dh-shell .sm-card .sm-submit:focus-visible{background:#31BEB0!important;color:#313131!important}
body.dh-shell .sm-card .sm-toprow .sm-eyebrow,body.dh-shell .sm-card .sm-top .sm-eyebrow{background:#1E7C73!important;color:#fff!important}
body.dh-shell .sm-card .sm-tile:has(input:checked){border-color:#1E7C73!important;background:rgba(30,124,115,.10)!important}
body.dh-shell .sm-card .sm-tile input{accent-color:#1E7C73}
body.dh-shell .sm-card .sm-pick{border-color:#1E7C73!important;background:rgba(30,124,115,.08)!important}
html[data-theme="dark"] body.dh-shell .sm-card .sm-tile:has(input:checked),html[data-theme="dark"] body.dh-shell .sm-card .sm-pick{border-color:#31BEB0!important;background:rgba(30,124,115,.35)!important}

/* 11) Alle Titel-Kacheln schwarz #313131 mit weisser Schrift (Neigung, Grossbuchstaben, 800 bleiben).
       Hervorhebung Apricot, Punkt helles Teal. Dark Mode: Seite ist selbst #313131, darum Kachel tiefer (#1C1C1C) mit feiner Kante #55575A. */
.ww-page section h2,.ww-page > section:nth-of-type(even) h2{background:#313131!important;color:#fff!important}
.ww-page section h2 .ww-hl,.ww-page > section:nth-of-type(even) h2 .ww-hl{color:#FF8577!important}
.ww-page section h2 .lime-dot,.ww-page > section:nth-of-type(even) h2 .lime-dot{color:#31BEB0!important}
html[data-theme="dark"] .ww-page section h2,html[data-theme="dark"] .ww-page > section:nth-of-type(even) h2{background:#1C1C1C!important;box-shadow:inset 0 0 0 1px #55575A}

/* 12) Angebote klar per Farbe: Kurs «Du baust mit uns» = Apricot #FF8577 (Schrift #313131), Auftrag «Wir bauen für dich» = dunkles Teal #1E7C73 (Schrift weiss). */
.ww-way--kurs{background:#FF8577!important;background-image:none!important;border:2px solid #FF8577;color:#313131}
.ww-way--auftrag{border:2px solid #1E7C73}
.ww-page .ww-way--kurs a.btn.ww-btn-dark{background:#313131!important;color:#fff!important;border-color:#313131!important}
.ww-page .ww-way--kurs a.btn.ww-btn-dark:hover{background:#fff!important;color:#313131!important}
.ww-page .ww-way--auftrag a.btn.ww-btn-dark{background:#fff!important;color:#1E7C73!important;border-color:#fff!important}
.ww-page .ww-way--auftrag a.btn.ww-btn-dark:hover{background:#31BEB0!important;color:#313131!important;border-color:#31BEB0!important}
.ww-way--kurs a:not(.btn){color:#313131}
.ww-way--auftrag a:not(.btn){color:#fff}
/* zugehörige Abschnitte: Kursablauf + Kurspaket apricot, Auftragsschritte bleiben dunkles Teal */
.ww-kurs .ww-marker{background:#FF8577!important;color:#313131!important;box-shadow:0 0 0 4px rgba(255,133,119,.25)!important}
.ww-paket-card{border-color:#FF8577!important}
/* Anmelden-Umschalter: aktiver Weg in seiner Farbe */
.ww-tabs [data-ww-path="kurs"][aria-selected="true"]{background:#FF8577!important;color:#313131!important;border-color:#FF8577!important}
.ww-tabs [data-ww-path="auftrag"][aria-selected="true"]{background:#1E7C73!important;color:#fff!important;border-color:#1E7C73!important}

/* 13) Abstand Übertitel zu schräger Titel-Kachel: ca. 20px sichtbar, inkl. Kippung */
.ww-page section .eyebrow{margin-bottom:0!important}
.ww-page section .eyebrow + h2,.ww-page section h2{margin-top:22px!important}
@media (max-width:640px){.ww-page section .eyebrow + h2,.ww-page section h2{margin-top:18px!important}}

/* 14) Hero: Text links, Kacheln rechts. Kacheln schräg wie die Titel, Grossbuchstaben.
       Termine (Kurs) = Apricot #FF8577 / #313131, Auftrag = dunkles Teal #1E7C73 / weiss. */
/* 14 geändert (18:16): Kacheln wieder unter dem Text, nebeneinander ab 900px */
@media (min-width:900px){
  .ww-hero-copy>.ww-actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px}
}
.ww-page .ww-hero .ww-actions a.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;border-radius:0!important;padding:16px 26px 13px!important;min-height:0;font-weight:800!important;text-transform:uppercase;letter-spacing:.02em;font-size:15px;line-height:1;box-shadow:none;transition:transform .15s ease,background-color .15s,color .15s}
.ww-page .ww-hero .ww-actions a.btn.ww-btn-reg{background:#FF8577!important;color:#313131!important;border:0!important;transform:rotate(-1deg)}
.ww-page .ww-hero .ww-actions a.btn.ww-btn-auftrag{background:#1E7C73!important;color:#fff!important;border:0!important;transform:rotate(1deg)}
.ww-page .ww-hero .ww-actions a.btn.ww-btn-reg:hover,.ww-page .ww-hero .ww-actions a.btn.ww-btn-reg:focus-visible{background:#313131!important;color:#fff!important;transform:rotate(-1deg) translateY(-2px)}
.ww-page .ww-hero .ww-actions a.btn.ww-btn-auftrag:hover,.ww-page .ww-hero .ww-actions a.btn.ww-btn-auftrag:focus-visible{background:#31BEB0!important;color:#313131!important;transform:rotate(1deg) translateY(-2px)}
.ww-page .ww-hero .ww-actions a.btn::after{display:none}
@media (max-width:899px){.ww-hero-copy>.ww-actions{flex-direction:column;align-items:flex-start;gap:16px;margin-top:26px}}
/* 14b) «Zum Ablauf» / «Zum Auftrag» als Kachel-Button mit 2px Rahmen, eckig */
.ww-page .ww-way a.ww-cmp-link{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid currentColor;border-radius:0;font-weight:600;text-decoration:none!important;transition:background-color .15s,color .15s}
.ww-page .ww-way--kurs a.ww-cmp-link{color:#313131!important;border-color:#313131}
.ww-page .ww-way--kurs a.ww-cmp-link:hover,.ww-page .ww-way--kurs a.ww-cmp-link:focus-visible{background:#313131;color:#fff!important}
.ww-page .ww-way--auftrag a.ww-cmp-link{color:#fff!important;border-color:#fff}
.ww-page .ww-way--auftrag a.ww-cmp-link:hover,.ww-page .ww-way--auftrag a.ww-cmp-link:focus-visible{background:#fff;color:#1E7C73!important}

/* 15) Kurspaket: Titel-Kachel Apricot mit #313131, Zusatzangebote in Apricot (fett).
       Per Klasse (.ww-add h4), nicht per Wort, damit Umbenennungen nur den Text betreffen. */
.ww-page .ww-paket h2,.ww-page > section.ww-paket h2{background:#FF8577!important;color:#313131!important;box-shadow:none!important}
.ww-page .ww-paket h2 .lime-dot{color:#1E7C73!important}
html[data-theme="dark"] .ww-page .ww-paket h2 .lime-dot{color:#313131!important}
.ww-page .ww-addons .eyebrow{color:#FF8577!important;font-weight:800!important}
.ww-page .ww-add h4{color:#FF8577!important;font-weight:800!important}
html[data-theme="dark"] .ww-page section.ww-paket h2,html[data-theme="dark"] .ww-page > section.ww-paket:nth-of-type(even) h2{background:#FF8577!important;color:#313131!important;box-shadow:none!important}

/* 16) Anmeldung: Verlaufsrahmen Apricot zu Teal, eckig; Fragen ohne Kachel */
.ww-page .ww-reg-card,html[data-theme="dark"] .ww-page .ww-reg-card{border:3px solid transparent!important;border-radius:0!important;background:linear-gradient(var(--ww-card),var(--ww-card)) padding-box,linear-gradient(135deg,#FF8577 0%,#31BEB0 100%) border-box!important}
.ww-page .ww-q,html[data-theme="dark"] .ww-page .ww-q{background:none!important;border:0!important;box-shadow:none!important;border-radius:0;padding:clamp(8px,2vw,24px) 0 0}

/* 17) Kontakt: 30 Minuten als eigener Abschnitt mit Sara und Anna */
@media (min-width:900px){.ww-an-grid{grid-template-columns:minmax(0,860px)!important}}
.ww-kt-grid{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.ww-kt-grid{grid-template-columns:minmax(0,1fr) auto;gap:64px}}
.ww-kt-copy .ww-kt-text{max-width:36rem;margin:0;color:var(--muted)}
.ww-kt-copy .ww-list{margin:16px 0 26px}
.ww-page .ww-kontakt a.btn.ww-kt-btn{display:inline-flex;align-items:center;gap:10px;border-radius:0!important;background:#313131!important;color:#fff!important;border:2px solid #313131!important;padding:15px 24px 13px!important;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:15px;line-height:1;text-decoration:none!important;transform:rotate(-1deg);transition:transform .2s,background .2s,color .2s}
.ww-page .ww-kontakt a.btn.ww-kt-btn:hover{background:#FF8577!important;color:#313131!important;border-color:#FF8577!important;transform:translateY(-2px)}
html[data-theme="dark"] .ww-page .ww-kontakt a.btn.ww-kt-btn{background:#FF8577!important;color:#313131!important;border-color:#FF8577!important}
html[data-theme="dark"] .ww-page .ww-kontakt a.btn.ww-kt-btn:hover{background:#31BEB0!important;border-color:#31BEB0!important}
.ww-kt-team{display:flex;gap:20px}
.ww-kt-person{margin:0;position:relative;width:clamp(140px,17vw,220px)}
.ww-kt-person img{display:block;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:50% 18%;border-radius:0;border:3px solid #FF8577}
.ww-kt-person--ania img{border-color:#31BEB0}
.ww-kt-person--sara{transform:rotate(-1.5deg)}
.ww-kt-person--ania{transform:rotate(1.5deg);margin-top:28px}
.ww-kt-person figcaption{position:absolute;left:-8px;bottom:14px;background:#FF8577;color:#313131;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:14px;line-height:1;padding:8px 12px 6px;transform:rotate(-2deg)}
.ww-kt-person--ania figcaption{background:#31BEB0}
@media (max-width:899px){.ww-kt-team{gap:14px}.ww-kt-person{width:calc(50% - 7px);max-width:200px}.ww-kt-person--ania{margin-top:20px}}
@media (prefers-reduced-motion:reduce){.ww-page .ww-kontakt a.btn.ww-kt-btn{transition:none}}

.ww-kt-copy h2 + .ww-kt-text{margin-top:20px}

/* 18) Hero-Bild: Verlauf weicher und heller, damit die Werkstatt rechts und unten sichtbar bleibt */
.ww-hero-bg::after{background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 94%,transparent) 22%,color-mix(in srgb,var(--paper) 80%,transparent) 38%,color-mix(in srgb,var(--paper) 50%,transparent) 52%,color-mix(in srgb,var(--paper) 18%,transparent) 66%,transparent 80%),linear-gradient(0deg,var(--paper) 0,transparent 36px)!important}
html[data-theme="dark"] .ww-hero-bg::after{background:linear-gradient(90deg,#313131 0%,rgba(49,49,49,.9) 22%,rgba(49,49,49,.74) 38%,rgba(49,49,49,.45) 52%,rgba(49,49,49,.15) 66%,rgba(49,49,49,0) 80%),linear-gradient(0deg,#313131 0,transparent 36px)!important}
@media (max-width:767px){
  .ww-hero-bg::after{background:linear-gradient(180deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 92%,transparent) 30%,color-mix(in srgb,var(--paper) 70%,transparent) 46%,color-mix(in srgb,var(--paper) 25%,transparent) 60%,transparent 72%),linear-gradient(0deg,var(--paper) 0,transparent 28px)!important}
  html[data-theme="dark"] .ww-hero-bg::after{background:linear-gradient(180deg,#313131 0%,rgba(49,49,49,.9) 30%,rgba(49,49,49,.68) 46%,rgba(49,49,49,.25) 60%,rgba(49,49,49,0) 72%),linear-gradient(0deg,#313131 0,transparent 28px)!important}
}
/* Lesbarkeit Hero-Text auf dem helleren Verlauf */
.ww-hero-copy p:not(.eyebrow){text-shadow:0 0 14px var(--paper),0 0 2px var(--paper)}
html[data-theme="dark"] .ww-hero-copy p:not(.eyebrow){text-shadow:0 0 14px #313131,0 0 2px #313131}

/* 19) Übertitel überall normales Teal #31BEB0 (hell und dunkel). Zusatzangebote bleibt Apricot (eigener Wunsch). */
.ww-page section .eyebrow,html[data-theme="dark"] .ww-page section .eyebrow,body.dh-shell .eyebrow{color:#31BEB0!important}
.ww-page .ww-addons .eyebrow{color:#FF8577!important}
body.dh-shell .sm-card .sm-toprow .sm-eyebrow,body.dh-shell .sm-card .sm-top .sm-eyebrow{background:#31BEB0!important;color:#313131!important}
@media (min-width:768px){.ww-page .ww-hero-bg img{object-position:62% 72%}}

/* 20) Schritte «Vom Fragebogen zur Webseite»: Kreise mittig über den Spalten, Linie genau von Mitte zu Mitte */
@media (min-width:900px){
  .ww-kurs .ww-timeline{gap:28px}
  .ww-kurs .ww-step{text-align:center}
  .ww-kurs .ww-marker{margin-left:auto!important;margin-right:auto!important}
  .ww-kurs .ww-step .ww-fb-link{justify-content:center}
  .ww-kurs .ww-timeline::before,.ww-kurs .ww-timeline::after{top:22.5px!important;height:3px!important;border-radius:0!important;left:calc((100% - 84px) / 8)!important;right:calc((100% - 84px) / 8)!important;z-index:0}
}
@media (max-width:899px){
  .ww-kurs .ww-timeline::before{display:none!important}
  .ww-kurs .ww-step:not(:last-child)::before{content:"";position:absolute;left:22.5px;top:20px;bottom:-42px;width:3px;background:linear-gradient(180deg,#FF8577,#31BEB0);z-index:0}
}

/* 21) Zusatzangebote: Preise in Fliesstextfarbe */
.ww-page .ww-add-price strong{color:var(--ink,#313131)!important}
html[data-theme="dark"] .ww-page .ww-add-price strong{color:var(--ink,#fff)!important}

/* 22) Hero-Bild: langer, weicher Auslauf nach unten in die Seitenfarbe (Maske, keine Kante) */
.ww-page .ww-hero-bg img{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.9) 62%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.2) 91%,rgba(0,0,0,.06) 97%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.9) 62%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.2) 91%,rgba(0,0,0,.06) 97%,transparent 100%)}
.ww-hero-bg::after{background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 94%,transparent) 22%,color-mix(in srgb,var(--paper) 80%,transparent) 38%,color-mix(in srgb,var(--paper) 50%,transparent) 52%,color-mix(in srgb,var(--paper) 18%,transparent) 66%,transparent 80%)!important}
html[data-theme="dark"] .ww-hero-bg::after{background:linear-gradient(90deg,#313131 0%,rgba(49,49,49,.9) 22%,rgba(49,49,49,.74) 38%,rgba(49,49,49,.45) 52%,rgba(49,49,49,.15) 66%,rgba(49,49,49,0) 80%)!important}
@media (min-width:900px){.ww-page>.ww-hero{padding-bottom:clamp(140px,14vw,200px)}}
@media (max-width:767px){
  .ww-hero-bg::after{background:linear-gradient(180deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 92%,transparent) 30%,color-mix(in srgb,var(--paper) 70%,transparent) 46%,color-mix(in srgb,var(--paper) 25%,transparent) 60%,transparent 72%)!important}
  html[data-theme="dark"] .ww-hero-bg::after{background:linear-gradient(180deg,#313131 0%,rgba(49,49,49,.9) 30%,rgba(49,49,49,.68) 46%,rgba(49,49,49,.25) 60%,rgba(49,49,49,0) 72%)!important}
  .ww-page .ww-hero-bg img{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,rgba(0,0,0,.8) 72%,rgba(0,0,0,.5) 83%,rgba(0,0,0,.2) 92%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 60%,rgba(0,0,0,.8) 72%,rgba(0,0,0,.5) 83%,rgba(0,0,0,.2) 92%,transparent 100%)}
}

/* 23) Hell: Verlauf links schwächer, damit das Bild ähnlich sichtbar ist wie im Dunkelmodus; Text mit engem weichem Schein */
html:not([data-theme="dark"]) .ww-hero-bg::after{background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 86%,transparent) 0%,color-mix(in srgb,var(--paper) 72%,transparent) 22%,color-mix(in srgb,var(--paper) 56%,transparent) 38%,color-mix(in srgb,var(--paper) 34%,transparent) 52%,color-mix(in srgb,var(--paper) 12%,transparent) 66%,transparent 80%)!important}
@media (max-width:767px){html:not([data-theme="dark"]) .ww-hero-bg::after{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 90%,transparent) 0%,color-mix(in srgb,var(--paper) 76%,transparent) 30%,color-mix(in srgb,var(--paper) 52%,transparent) 46%,color-mix(in srgb,var(--paper) 18%,transparent) 60%,transparent 72%)!important}}
html:not([data-theme="dark"]) .ww-hero-copy p:not(.eyebrow){text-shadow:0 0 3px var(--paper),0 0 8px var(--paper),0 0 16px var(--paper)}
html:not([data-theme="dark"]) .ww-hero-copy .eyebrow{text-shadow:0 0 3px var(--paper),0 0 8px var(--paper)}
html[data-theme="dark"] .ww-page .ww-addons .eyebrow,html:not([data-theme="dark"]) .ww-page section .ww-addons .eyebrow{color:#FF8577!important}

/* 24) Übertitel hell: Palette-Teal #1E7C73 (Kontrast über 4.5:1 auf #F7F6F3), dunkel bleibt #31BEB0 */
html:not([data-theme="dark"]) .ww-page section .eyebrow,html:not([data-theme="dark"]) body.dh-shell .eyebrow{color:#1E7C73!important}
html:not([data-theme="dark"]) .ww-page section .ww-addons .eyebrow{color:#FF8577!important}

/* 25) Kontakt-Titel: fester Umbruch, damit die Kachel eng am Text sitzt; EN bricht nur mobil um */
@media (min-width:900px){.ww-kontakt h2 br.ww-kt-br{display:none}}

/* 26) Anmeldung + Warteliste: zwei Spalten ab 900px, Warteliste rechts. Sara 2026-10-30 (final) */
@media (min-width:900px){.ww-page .ww-an-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important;gap:28px;align-items:stretch}}
.ww-reg-facts{margin:12px 0 0;color:var(--muted);font-size:.92rem}
.ww-reg-wl{margin:4px 0 0;font-weight:600}
.ww-reg-alt{margin:0;color:var(--muted);font-size:.95rem}
.ww-reg-wl a.text-link,.ww-reg-alt a.text-link,.ww-wl-card a.text-link{text-decoration:underline;text-underline-offset:3px}
html:not([data-theme="dark"]) .ww-page .ww-reg-wl a.text-link,html:not([data-theme="dark"]) .ww-page .ww-reg-alt a.text-link,html:not([data-theme="dark"]) .ww-page .ww-wl-card a.text-link{color:#1E7C73}
html[data-theme="dark"] .ww-page .ww-reg-wl a.text-link,html[data-theme="dark"] .ww-page .ww-reg-alt a.text-link,html[data-theme="dark"] .ww-page .ww-wl-card a.text-link{color:#31BEB0}
@media (min-width:900px){.ww-reg-wl{display:none}}
.ww-page .ww-wl-card{background:var(--ww-card);border:3px solid #31BEB0;padding:clamp(24px,3.4vw,40px);scroll-margin-top:96px}
html[data-theme="dark"] .ww-page .ww-wl-card{border-color:#1E7C73}
.ww-wl-card h3{margin:6px 0 0;font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.2}
.ww-wl-intro{margin:8px 0 18px;color:var(--muted)}
.ww-wl-form{display:grid;gap:12px}
.ww-wl-row{display:grid;gap:12px}
@media (min-width:480px){.ww-wl-row{grid-template-columns:1fr 1fr}}
.ww-wl-field{display:grid;gap:5px;font-size:.9rem;font-weight:600;color:var(--ink)}
.ww-wl-field small{font-weight:400;color:var(--muted);font-size:inherit}
.ww-wl-field input,.ww-wl-field textarea{font:inherit;font-weight:400;font-size:16px;width:100%;box-sizing:border-box;min-height:46px;padding:11px 13px;border:1px solid #55575a;border-radius:0;background:#fff;color:#313131}
.ww-wl-field textarea{min-height:88px;resize:vertical}
html[data-theme="dark"] .ww-wl-field input,html[data-theme="dark"] .ww-wl-field textarea{background:#313131;color:#fff;border-color:#55575a}
.ww-wl-field input:focus-visible,.ww-wl-field textarea:focus-visible,.ww-wl-consent input:focus-visible{outline:2px solid #31BEB0;outline-offset:2px;border-color:#31BEB0}
.ww-wl-form [aria-invalid="true"]{border-color:#FF8577!important;box-shadow:0 0 0 1px #FF8577}
.ww-wl-consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.86rem;line-height:1.45;color:var(--muted)}
.ww-wl-consent input{width:18px;height:18px;margin:2px 0 0;accent-color:#1E7C73}
.ww-wl-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.ww-page .ww-wl-card .btn.ww-wl-btn{justify-self:start;display:inline-flex;align-items:center;gap:10px;border-radius:0!important;background:#1E7C73!important;color:#fff!important;border:2px solid #1E7C73!important;padding:14px 22px 12px!important;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:14px;cursor:pointer}
.ww-page .ww-wl-card .btn.ww-wl-btn:hover,.ww-page .ww-wl-card .btn.ww-wl-btn:focus-visible{background:#313131!important;border-color:#313131!important}
html[data-theme="dark"] .ww-page .ww-wl-card .btn.ww-wl-btn{background:#31BEB0!important;border-color:#31BEB0!important;color:#313131!important}
html[data-theme="dark"] .ww-page .ww-wl-card .btn.ww-wl-btn:hover{background:#FF8577!important;border-color:#FF8577!important}
.ww-wl-btn[disabled]{opacity:.7;cursor:progress}
.ww-wl-msg{margin:0;font-size:.9rem;font-weight:600;color:#313131;box-shadow:inset 3px 0 0 #FF8577;padding:4px 0 4px 10px}
html[data-theme="dark"] .ww-wl-msg{color:#fff}
.ww-wl-done{display:grid;gap:8px;justify-items:start;outline:none;padding:6px 0 0}
.ww-wl-done[hidden]{display:none}
.ww-wl-check{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#31BEB0;color:#313131}
.ww-wl-done-t{margin:6px 0 0;font-weight:800;font-size:1.15rem;line-height:1.3;color:var(--ink)}
.ww-wl-done-s{margin:0;color:var(--muted)}
.ww-wl-again{font:inherit;font-weight:700;font-size:.92rem;background:none;border:0;padding:6px 0;cursor:pointer;color:#1E7C73;text-decoration:underline;text-underline-offset:3px}
html[data-theme="dark"] .ww-wl-again{color:#31BEB0}
/* Kurspaket: direkter Weg zur Anmeldung */
.ww-page .ww-paket-card a.btn.ww-paket-btn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;border-radius:0!important;background:#FF8577!important;color:#313131!important;border:2px solid #FF8577!important;padding:14px 22px 12px!important;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:14px}
.ww-page .ww-paket-card a.btn.ww-paket-btn:hover,.ww-page .ww-paket-card a.btn.ww-paket-btn:focus-visible{background:#313131!important;border-color:#313131!important;color:#fff!important;transform:translateY(-2px)}
html[data-theme="dark"] .ww-page .ww-paket-card a.btn.ww-paket-btn:hover{background:#31BEB0!important;border-color:#31BEB0!important;color:#313131!important}
/* Reservierungs-Dialog: Datenschutzhinweis, Warteliste-Link, persönlicher Dank */
.sm2 .sm-privacy{margin:2px 0 0;font-size:.8rem;line-height:1.45;color:var(--muted)}
.sm2 .sm-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sm2 .sm-wl-link{font-weight:700}
.sm2 .sm-side.is-sent > input,.sm2 .sm-side.is-sent > textarea,.sm2 .sm-side.is-sent > .sm-row,.sm2 .sm-side.is-sent > .sm-privacy,.sm2 .sm-side.is-sent > .sm-alt{display:none!important}
.sm2 .sm-msg.is-ok strong{display:block;font-size:1.05rem;margin-bottom:4px}
.sm2 .sm-msg.is-ok span{display:block}

/* 27) Sprungziele nicht unter dem Sticky-Header verstecken */
main.ww-page [id]{scroll-margin-top:84px}
/* 28) Ausgeblendeter Sticky-Button ist auch für Tastatur und Screenreader weg */
body a.ww-sticky:not(.is-on){visibility:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
body a.ww-sticky.is-on{visibility:visible}
/* 29) Termine in der Anmeldekarte untereinander, damit Datum und Uhrzeit nicht mitten in der Zeit umbrechen */
#anmelden .ww-dates{grid-template-columns:1fr}
#anmelden .ww-date time{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){#anmelden .ww-date time{white-space:normal}}
/* 30) "Zum Fragebogen" in den Teal-Kacheln: weiss statt dunkelgrau (Kontrast) */
.ww-astep .ww-fb-link,html[data-theme="dark"] .ww-astep .ww-fb-link{color:#fff}
.ww-astep .ww-fb-link:hover,.ww-astep .ww-fb-link:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* 31) Warteliste-Hinweis in der Anmeldekarte entfällt auch mobil: die Wartelisten-Karte folgt direkt darunter */
.ww-reg-wl{display:none}
/* 32) Formular-Buttons ohne Hover-Verschiebung: verhindert Flackern, wenn der Mauszeiger am Rand steht */
.ww-wl-card .btn:hover,.ww-wl-card .btn:focus-visible,.sm-overlay .btn:hover,.sm-overlay .btn:focus-visible{transform:none}

/* 33: reservation dialog on mobile: top part keeps its height, the card scrolls as a whole (second date tile was hidden behind the form). Sara 2026-10-30 */
@media(max-width:899px){.sm-card.sm2 .sm-main{flex:none;min-height:auto}}

/* 34. Anmelde-Dialog: Termin-Kacheln untereinander, Formular rechts breiter (ca. 40/60). Sara 2026-10-30 */
.sm-card.sm2 .sm-tiles{grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .sm-card.sm2{width:min(1040px,90vw)}
  .sm-card.sm2 .sm-main{flex:0 0 40%;max-width:40%}
  .sm-card.sm2 .sm-side{flex:1 1 60%;max-width:60%;padding-left:32px;padding-right:32px}
}
/* 35. Turnstile in Dialog und Warteliste. Sara 2026-10-30 */
.sm2 .sm-ts,.ww-wl-ts{margin:.7rem 0 .2rem;min-height:65px}
.sm2 .sm-ts:empty,.ww-wl-ts:empty{min-height:0;margin:0}
/* 36. Kontakt-Titel «Kostenloses Erstgespräch.» immer auf einer Zeile, Schrift passt sich der Spaltenbreite an. Sara 2026-10-30 */
.ww-kontakt .ww-kt-copy{container-type:inline-size;--kt-div:14.6}
html[lang^="en"] .ww-kontakt .ww-kt-copy{--kt-div:13.3}
.ww-page .ww-kontakt h2.ww-kt-h{white-space:nowrap!important;max-width:100%;font-size:min(clamp(1.2rem,6vw,2.9rem),calc((100cqi - 44px) / var(--kt-div)))!important}
/* 37. Footer: Zusammenarbeit mit der Genossenschaft unter dem Firmennamen. Sara 2026-10-30 */
.ww-ft .ww-ft-coop{margin:2px 0 6px;font-size:.86em;opacity:.8}
/* 38. Impressum-Seite. Sara 2026-10-30 */
.ww-imp{padding:clamp(48px,8vw,96px) 0 clamp(56px,8vw,104px)}
.ww-imp .wrap{max-width:46rem}
.ww-imp h1{margin:.4rem 0 1.2rem}
.ww-imp h2{display:block!important;transform:none!important;font-size:1.15rem!important;letter-spacing:0!important;margin:2rem 0 .5rem;text-transform:none}
.ww-imp p,.ww-imp address{margin:0 0 .35rem;font-style:normal;line-height:1.6}
.ww-imp .ww-imp-lead{color:var(--muted);margin-bottom:1.4rem}
.ww-page .ww-imp h2,.ww-page .ww-imp h2.ww-imp-h{background:none!important;color:inherit!important;padding:0!important;box-shadow:none!important;text-transform:none!important;font-size:1.15rem!important;line-height:1.3!important;width:auto!important}
.ww-page .ww-imp a{text-decoration:underline;text-underline-offset:2px}
/* Einfügefelder und Datei-Upload (2026-10-30) */
.ww-field.ww-paste{margin-top:1.4rem;padding:1rem 1rem 1.1rem;border:1px dashed var(--f-line-strong,#9aa5a3);background:color-mix(in srgb,var(--f-field,#fff) 70%,transparent)}
.ww-field.ww-paste .ww-hint,.ww-field.ww-upload .ww-hint{margin:.2rem 0 .55rem}
.ww-field.ww-paste textarea{min-height:12rem;width:100%;resize:vertical}
.ww-field.ww-upload{margin-top:1rem}
.ww-field.ww-upload input[type=file]{display:block;width:100%;min-height:48px;padding:.55rem .6rem;cursor:pointer}
.ww-field.ww-upload input[type=file]::file-selector-button{font:600 15px var(--f-font,inherit);margin-right:.8rem;padding:.5rem .9rem;border:1px solid var(--f-line-strong,#9aa5a3);background:transparent;color:var(--f-ink,#111);cursor:pointer}
.ww-field.ww-upload input[type=file]:focus-visible{outline:3px solid #31beb0;outline-offset:2px}
.ww-up-list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.35rem}
.ww-up-list li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.45rem .6rem;border:1px solid var(--f-line-strong,#9aa5a3);font:400 15px/1.4 var(--f-font,inherit);color:var(--f-ink,#111)}
.ww-up-list li.ww-up-empty{border-style:dashed;color:var(--f-muted,#5b6563)}
.ww-up-name{flex:1 1 12rem;overflow-wrap:anywhere}
.ww-up-size{color:var(--f-muted,#5b6563);font-size:14px}
.ww-up-rm{min-height:40px;padding:.3rem .8rem;border:1px solid var(--f-line-strong,#9aa5a3);background:transparent;color:var(--f-ink,#111);font:600 14px var(--f-font,inherit);cursor:pointer}
.ww-up-rm:hover{border-color:#31beb0}
.ww-up-rm:focus-visible{outline:3px solid #31beb0;outline-offset:2px}
.ww-up-err{margin:.45rem 0 0;color:#b3261e;font:500 14px/1.45 var(--f-font,inherit)}
.ww-up-err:empty{display:none}
[data-theme=dark] .ww-up-err{color:#ff8a80}
.ww-up-note{margin:.8rem 0 0;font:400 14px/1.5 var(--f-font,inherit);color:var(--f-muted,#5b6563)}
html[data-theme="dark"] .ww-page section.ww-imp h2,html[data-theme="dark"] .ww-page > section.ww-imp:nth-of-type(even) h2,html .ww-page > section.ww-imp:nth-of-type(n) h2{background:none!important;color:inherit!important;padding:0!important;box-shadow:none!important;text-transform:none!important;font-size:1.15rem!important;line-height:1.3!important;width:auto!important;transform:none!important}
.sm2.is-sent .sm-dates-pick{display:none!important}.sm2.is-sent .sm-main{align-self:start}
.ww-rail-review{font-size:13px;line-height:1.4;margin:0 0 .6rem;padding:.4rem .55rem;border:1px dashed #31BEB0;color:inherit}@media (max-width:860px){.ww-rail>.ww-rail-review{display:none}.ww-rail.is-open>.ww-rail-review{display:block}}

/* faqfix 20261030: nur noch zwei Angebote im Schritt 01 */
.ww-weg .ww-weg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.ww-weg .ww-weg-grid{grid-template-columns:1fr}}
/* faqfix 20261030: Pflichtfelder Kontakt, Hauptziel als Auswahlliste */
.ww-field .ww-req{color:#d9473a;font-weight:700;margin-left:.15em}
html[data-theme="dark"] .ww-field .ww-req{color:#FF8577}
.ww-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ww-field-req.is-missing input{border-color:#d9473a!important;box-shadow:0 0 0 3px rgba(255,133,119,.3)!important}
.ww-field-req .ww-req-err{margin-top:.45rem}
.ww-field select[data-k="primary_goal"]{width:100%;cursor:pointer}
/* faqfix 20261030: Upload mit sichtbarem Button und Ablagefläche (Drag-and-drop) */
.ww-field.ww-upload .ww-up-drop{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;padding:1rem;border:2px dashed var(--f-line-strong,#9aa5a3);background:var(--f-field,transparent)}
.ww-field.ww-upload .ww-up-drop.is-over{border-color:#31beb0;background:rgba(49,190,176,.12)}
.ww-field.ww-upload .ww-up-drop>input[type=file]{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0;overflow:hidden;pointer-events:none}
.ww-field.ww-upload .ww-up-btn{font:600 15px var(--f-font,inherit);min-height:44px;padding:.5rem 1rem;border:1px solid #31beb0;background:#31beb0;color:#0f2b28;cursor:pointer;border-radius:0}
.ww-field.ww-upload .ww-up-btn:hover{background:#2aa89c}
.ww-field.ww-upload .ww-up-btn:focus-visible{outline:3px solid #31beb0;outline-offset:2px}
.ww-field.ww-upload .ww-up-drop-txt{font-size:14px;color:var(--f-muted,inherit)}
/* faqfix 20261030: Erdtöne (5 Farben) und «Eigene Farben wählen» */
.ww-palette .ww-palette-swatches{display:flex!important}
.ww-palette .ww-palette-swatches i{flex:1 1 0}
.ww-colors .ww-colors-list{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.55rem}
.ww-colors .ww-color-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.ww-colors input[type=color]{width:56px;height:48px;min-height:48px;padding:3px!important;cursor:pointer;flex:0 0 auto}
.ww-colors input[type=text]{width:9.5em;flex:0 0 auto;font-family:ui-monospace,Menlo,monospace!important;text-transform:lowercase}
.ww-colors input[aria-invalid="true"]{border-color:#d9473a!important}
.ww-colors .ww-color-rm{font:600 14px var(--f-font,inherit);min-height:44px;padding:.4rem .8rem;border:1px solid var(--f-line-strong,#9aa5a3);background:transparent;color:var(--f-ink,inherit);cursor:pointer}
.ww-colors input:focus-visible,.ww-colors button:focus-visible{outline:3px solid #31beb0;outline-offset:2px}
/* Auftrag-Karte: Häkchen weiss wie der Kartentext (30.10.) */
.ww-way--auftrag .ww-cmp-box li::before{border-left-color:#fff!important;border-bottom-color:#fff!important}
.ww-cmp-box .ww-cmp-note{margin:10px 0 0;font-size:.85rem;line-height:1.45;opacity:.9}
/* Stil-Karten: «Mag ich» / «Eher nicht» unten bündig (30.10.) */
.ww-moods{align-items:stretch}
.ww-mood{display:flex;flex-direction:column}
.ww-mood-preview{flex:0 0 auto}
.ww-mood-body{flex:1 1 auto;display:flex;flex-direction:column}
.ww-mood-votes{margin-top:auto!important;padding-top:.15rem}

/* Schriftproben im Schritt «Stil» (30.10.): selbst gehostet, Latin-Teilmenge, keine Anfrage an Drittanbieter.
   Dateien: fonts/schriften/*.woff2 (Google Fonts, SIL Open Font License 1.1). Werden nur geladen, wenn die Karten sichtbar sind. */
@font-face{font-family:'WW EB Garamond';src:url(../fonts/schriften/EBGaramond.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'WW Playfair Display';src:url(../fonts/schriften/PlayfairDisplay.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'WW Inter';src:url(../fonts/schriften/Inter.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'WW Jost';src:url(../fonts/schriften/Jost.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'WW Source Sans 3';src:url(../fonts/schriften/SourceSans3.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'WW Nunito';src:url(../fonts/schriften/Nunito.woff2) format('woff2');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'WW Roboto Slab';src:url(../fonts/schriften/RobotoSlab.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'WW Dancing Script';src:url(../fonts/schriften/DancingScript.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'WW Caveat';src:url(../fonts/schriften/Caveat.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'WW Anton';src:url(../fonts/schriften/Anton.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'WW IBM Plex Mono';src:url(../fonts/schriften/IBMPlexMono.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'WW IBM Plex Mono';src:url(../fonts/schriften/IBMPlexMono-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Schriftkarten kompakt (30.10. faqfix9): nur «Aa», ein Wort und der Schriftname */
.ww-moods.ww-fonts{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.6rem!important}
@media (max-width:700px){.ww-moods.ww-fonts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.5rem!important}}
.ww-font-preview{display:flex;flex-direction:row;align-items:baseline;gap:.55rem;padding:.7rem .8rem;background:#faf8f4!important;color:#313131;height:auto!important;min-height:0!important;overflow:hidden;white-space:nowrap}
.ww-font-aa{flex:0 0 auto;font-size:1.7rem;line-height:1;font-weight:400;color:#31beb0}
.ww-font-h{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:1.08rem;line-height:1.2;font-weight:400;letter-spacing:0}
.ww-font[data-font="dancing"] .ww-font-h,.ww-font[data-font="caveat"] .ww-font-h{font-size:1.3rem}
.ww-font[data-font="plexmono"] .ww-font-h{font-size:.95rem}
.ww-font .ww-mood-body{padding:.55rem .7rem .65rem!important;gap:.45rem}
.ww-font .ww-font-name{display:block;margin:0!important;font-size:.78rem!important;line-height:1.25;font-weight:600}
.ww-font .ww-mood-votes{display:grid!important;grid-template-columns:1fr 1fr;gap:.35rem!important;margin-top:auto!important;padding-top:0}
.ww-font .ww-mood-votes button{min-height:36px!important;padding:.3rem .35rem!important;font-size:.74rem!important;line-height:1.1;white-space:nowrap}
@media (max-width:420px){.ww-font-preview{padding:.6rem .65rem;gap:.45rem}.ww-font-aa{font-size:1.45rem}.ww-font-h{font-size:.92rem}.ww-font[data-font="robotoslab"] .ww-font-h,.ww-font[data-font="plexmono"] .ww-font-h{font-size:.84rem}.ww-font[data-font="dancing"] .ww-font-h,.ww-font[data-font="caveat"] .ww-font-h{font-size:1.12rem}.ww-font .ww-mood-body{padding:.5rem .55rem .6rem!important}.ww-font .ww-mood-votes button{font-size:.7rem!important;padding:.3rem .2rem!important}}
.ww-field-fonts{margin-bottom:1.2rem}

/* Kontakt 30.10. faqfix9: Termin direkt bei Sara oder Anna (Kalender wie auf digihub.li), E-Mail sichtbar */
.ww-kt-col{display:flex;flex-direction:column;gap:18px;width:clamp(150px,17vw,220px)}
.ww-kt-col .ww-kt-person{width:100%;max-width:none}
.ww-kt-col--ania{margin-top:28px}
.ww-kt-col--ania .ww-kt-person--ania{margin-top:0}
.ww-kt-act{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.ww-page .ww-kontakt .ww-kt-act a.btn.ww-kt-btn{justify-content:center;padding:13px 12px 11px!important;font-size:.92rem;white-space:nowrap}
.ww-kt-mail{font-size:.92rem;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px;word-break:break-all;text-align:center}
.ww-kt-mail:hover{color:#31beb0}
html[data-theme="dark"] .ww-kt-mail:hover{color:#dbe470}
.ww-kt-pick{margin:0;max-width:36rem;color:var(--muted)}
@media (max-width:899px){.ww-kt-col{width:calc(50% - 7px);max-width:200px}.ww-kt-col--ania{margin-top:20px}.ww-page .ww-kontakt .ww-kt-act a.btn.ww-kt-btn{font-size:.82rem;padding:12px 6px 10px!important}.ww-kt-mail{font-size:.8rem}}
.ww-kt-person picture{display:block}