/* design.css - Gestaltung der Startseite fuer alle Seiten mit .sl-Klassen:
   Bestandsseiten (rohes HTML) wie Leistungsseiten (Bloecke). Portiert aus Neves
   "Zusaetzlichem CSS" (118 Regeln), das beim Themewechsel am 06.09.2026 abgehaengt
   wurde. Nur .sl-*-Regeln, CI-Werte als theme.json-Tokens, globale Eingriffe
   weggelassen. Erzeugt von tools/port_design.py - nicht von Hand aendern.

   Kontrast gerechnet vor dem Portieren:
     tuerkis-text #10746C als Text  -> behalten
     ink2 #5A6B66 als Sekundaertext -> behalten
     .sl-btn:hover Tuerkis+Weiss (3,12:1)  -> Frischgruen+Anthrazit (5,41:1)
     .sl-btn-ghost:hover Tuerkis (2,90:1)  -> Anthrazit
     .sl-btn-light:hover Tuerkis auf Weiss -> Petrol (7,62:1)
     .sl-cta p -> #C6DDD8 */
:root{--sl-ground2:#F2ECE1;--sl-ink2:#5A6B66;--sl-line:#E5DCCC;--sl-radius:14px;--sl-tuerkis-text:#10746C;}
.sl-wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.sl-narrow{max-width:1080px}
.sl-sec{padding:96px 0}
.sl-sec-alt{background:var(--sl-ground2)}
.sl-kicker{font-family:var(--wp--preset--font-family--nunito);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--tuerkis);margin:0 0 14px}
.sl-h2{font-size:clamp(28px,3.4vw,40px);line-height:1.2;margin:0 0 18px;max-width:28ch}
.sl-intro{font-size:18px;color:var(--sl-ink2);max-width:62ch;margin:0 0 48px}
.sl-hero{padding:132px 0 116px;background: radial-gradient(880px 420px at 10% -12%,#DCEFEB 0%,rgba(220,239,235,0) 64%), radial-gradient(720px 380px at 94% 6%,#EAF3E2 0%,rgba(234,243,226,0) 62%), var(--wp--preset--color--offwhite); border-bottom:1px solid var(--sl-line)}
.sl-eyebrow{font-family:var(--wp--preset--font-family--nunito);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--tuerkis);margin:0 0 22px}
.sl-h1{font-size:clamp(40px,6vw,64px);line-height:1.1;letter-spacing:-.02em;margin:0 0 26px;max-width:none}
.sl-h1-sm{font-size:clamp(32px,4.4vw,48px)}
.sl-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--sl-ink2);max-width:60ch;margin:0 0 38px}
.sl-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.sl-btn{display:inline-block;background:var(--wp--preset--color--petrol);color:var(--wp--preset--color--offwhite)!important;text-decoration:none;font-family:var(--wp--preset--font-family--nunito);font-size:16px;font-weight:700;padding:13px 28px;border-radius:999px;border:2px solid var(--wp--preset--color--petrol);transition:background .18s,border-color .18s,transform .18s}
.sl-btn:hover{background:var(--wp--preset--color--frischgruen);border-color:var(--wp--preset--color--frischgruen);color:var(--wp--preset--color--anthrazit)!important;transform:translateY(-1px)}
.sl-btn-ghost{background:transparent;color:var(--wp--preset--color--petrol)!important;border-color:#C8DDD8}
.sl-btn-ghost:hover{background:transparent;color:var(--wp--preset--color--anthrazit)!important;border-color:var(--wp--preset--color--petrol)}
.sl-btn-light{background:var(--wp--preset--color--offwhite);color:var(--wp--preset--color--petrol)!important;border-color:var(--wp--preset--color--offwhite)}
.sl-btn-light:hover{background:#fff;color:var(--wp--preset--color--petrol)!important;border-color:#fff}
.sl-grid{display:grid;gap:22px}
.sl-grid-2{grid-template-columns:repeat(2,1fr)}
.sl-grid-3{grid-template-columns:repeat(3,1fr)}
.sl-sec .sl-grid{margin-top:46px}
.sl-sec .sl-intro + .sl-grid{margin-top:0}
.sl-card{background:var(--wp--preset--color--weiss);border:1px solid var(--sl-line);border-radius:var(--sl-radius);padding:30px 30px 32px;transition:border-color .2s,transform .2s,box-shadow .2s}
.sl-card:hover{border-color:#BFD9D3;transform:translateY(-2px);box-shadow:0 10px 30px rgba(14,94,86,.08)}
.sl-card h3{font-size:21px;margin:0 0 12px}
.sl-card p{margin:0;color:var(--sl-ink2);font-size:16px}
.sl-num{display:block;font-family:var(--wp--preset--font-family--nunito);font-size:15px;font-weight:700;color:var(--wp--preset--color--tuerkis);letter-spacing:.08em;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--sl-line)}
.sl-item h3{font-size:22px;margin:0 0 12px}
.sl-item p{margin:0;color:var(--sl-ink2);font-size:16px}
.sl-quote{padding:96px 0;background:var(--wp--preset--color--offwhite);border-top:1px solid var(--sl-line);border-bottom:1px solid var(--sl-line)}
.sl-quote blockquote{margin:0;padding:0;border:0;max-width:16em;font-style:normal}
.sl-quote p{font-family:var(--wp--preset--font-family--nunito);font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.25;letter-spacing:-.015em;margin:0;color:var(--wp--preset--color--petrol);font-style:normal}
.sl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--sl-line);margin-top:44px}
.sl-step{padding:34px 34px 34px 0;border-right:1px solid var(--sl-line)}
.sl-step:last-child{border-right:0}
.sl-step:not(:first-child){padding-left:34px}
.sl-step h3{font-size:20px;margin:0 0 12px}
.sl-step p{margin:0;color:var(--sl-ink2);font-size:16px}
.sl-cta{background:var(--wp--preset--color--petrol);color:#DCEAE7;padding:92px 0;text-align:center}
.sl-cta h2{color:var(--wp--preset--color--offwhite);font-size:clamp(26px,3.2vw,38px);line-height:1.2;margin:0 auto 16px;max-width:26ch}
.sl-cta p{color:#C6DDD8;max-width:52ch;margin:0 auto 30px}
.sl-cta .sl-actions{justify-content:center}
.sl-page-head{padding:110px 0 56px;border-bottom:1px solid var(--sl-line);background: radial-gradient(700px 340px at 8% -20%,#DCEFEB 0%,rgba(220,239,235,0) 64%),var(--wp--preset--color--offwhite)}
.sl-page-head .sl-h1-sm{margin-bottom:22px}
.sl-page-head .sl-lead{max-width:56ch}
.sl-contact{border-top:1px solid var(--sl-line);margin-bottom:64px;max-width:720px}
.sl-contact-row{display:block;padding:26px 0;border-bottom:1px solid var(--sl-line);text-decoration:none!important;transition:padding-left .2s}
.sl-contact-row:hover{padding-left:8px}
.sl-contact-label{display:block;font-family:var(--wp--preset--font-family--nunito);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--tuerkis);margin-bottom:8px}
.sl-contact-value{display:block;font-family:var(--wp--preset--font-family--nunito);font-weight:700;font-size:25px;color:var(--wp--preset--color--petrol);margin-bottom:6px}
.sl-contact-hint{display:block;font-size:15px;color:var(--sl-ink2)}
.sl-note{max-width:720px}
.sl-note h2{font-size:22px;margin:0 0 18px}
.sl-note ul{margin:0;padding:0;list-style:none;color:var(--sl-ink2)}
.sl-note li{position:relative;padding-left:32px;margin-bottom:12px}
.sl-note li:before{content:"";position:absolute;left:0;top:8px;width:16px;height:9px;border-left:3px solid var(--wp--preset--color--frischgruen);border-bottom:3px solid var(--wp--preset--color--frischgruen);transform:rotate(-45deg);border-radius:1px}
.sl-legal{max-width:720px}
.sl-legal h2{font-size:20px;margin:38px 0 12px}
.sl-legal h2:first-child{margin-top:0}
.sl-legal p{margin:0 0 16px;color:var(--sl-ink2);font-size:16px}
.sl-legal ul{margin:0 0 18px;padding-left:20px;color:var(--sl-ink2);font-size:16px}
.sl-legal li{margin-bottom:6px}
.sl-legal a{text-decoration:underline;text-underline-offset:3px}
.sl-stand{font-size:14px!important;margin-top:44px!important;padding-top:20px;border-top:1px solid var(--sl-line)}
.sl-soon{padding:150px 0 170px;text-align:center;background: radial-gradient(880px 420px at 50% -10%,#DCEFEB 0%,rgba(220,239,235,0) 66%),var(--wp--preset--color--offwhite)}
.sl-soon img{max-width:300px;height:auto;margin:0 auto 44px;display:block}
.sl-soon .sl-h1{max-width:none}
.sl-soon .sl-lead{margin:0 auto;max-width:46ch}
.sl-fsep{opacity:.45;padding:0 4px}
.sl-eyebrow,.sl-kicker,.sl-num{color:var(--sl-tuerkis-text)}
.sl-cta p{color:#C6DDD8}
footer .sl-fsep{display:none}
.sl-contact-label{color:var(--sl-tuerkis-text)}

/* Piktogramme (Design-Runde 06.09.2026): inline-SVG, currentColor, dekorativ (aria-hidden). */
.sl-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#E6F1EF;color:var(--wp--preset--color--petrol);margin:0 0 16px}
.sl-icon svg{width:24px;height:24px;display:block}
.sl-item .sl-icon{margin-bottom:12px}
.sl-step .sl-icon{margin-bottom:14px}

/* Leistungsseiten als Bloecke im .sl-Design (Design-Runde 06.09.2026).
   Preiskarte: Selektoren mit .sl-card davor, sonst gewinnt .sl-card p (0,1,1) ueber
   .sl-price-value (0,1,0) - gemessen: 590 EUR blieb 16px.
   Die Bloecke tragen dieselben Klassen wie die Startseite; hier nur, was dort
   nicht vorkommt: Fliesstext, Zeitangaben, Haken-Liste, Preiskarte. */
.sl-page-head .sl-eyebrow{margin:0 0 14px}
.sl-prose>p{max-width:62ch;color:var(--sl-ink2);margin:0 0 16px;font-size:17px}
.sl-prose>p:last-child{margin-bottom:0}
.sl-item .sl-num{margin:0 0 10px}
.sl-item h3{font-size:20px}
.sl-zeit{font-family:var(--wp--preset--font-family--system);font-weight:400;font-size:15px;color:var(--sl-ink2);white-space:nowrap}
.sl-schluss{margin:34px 0 0;font-family:var(--wp--preset--font-family--nunito);font-weight:700;color:var(--wp--preset--color--petrol)}
.sl-col h3{font-size:21px;margin:0 0 14px}
.sl-note ul{margin-top:0}
.sl-list{margin:0;padding-left:20px;color:var(--sl-ink2)}
.sl-list li{margin-bottom:8px}
.sl-hint{margin:14px 0 0;color:var(--sl-ink2);font-size:15px}
.sl-card .sl-price-value{font-family:var(--wp--preset--font-family--nunito);font-weight:700;font-size:clamp(30px,3.6vw,42px);line-height:1.1;color:var(--wp--preset--color--petrol);margin:4px 0 12px}
.sl-card .sl-price-zusatz{font-size:17px;font-weight:400;color:var(--sl-ink2)}
.sl-card .sl-price-hint{margin:0 0 6px;color:var(--sl-ink2);font-size:15px}
.sl-card.sl-card-einstieg{padding:36px 36px 34px;border-color:#BFD9D3;box-shadow:0 10px 30px rgba(14,94,86,.08)}
.sl-card.sl-card-einstieg>p:not(.sl-kicker){max-width:62ch;font-size:17px}
.sl-card.sl-card-einstieg .sl-kicker{margin:0 0 6px}
.sl-card .sl-actions{margin-top:20px}
.sl-card .sl-actions .sl-btn{width:auto}
.sl-anschluss{margin:44px 0 0;max-width:62ch}
.sl-anschluss+.sl-grid{margin-top:22px}
.sl-sec .sl-h2+.sl-grid{margin-top:34px}
.sl-sec .sl-kicker{margin:0 0 10px}
.sl-sec .sl-kicker+.sl-grid{margin-top:22px}
.sl-card>.sl-kicker{margin:0 0 4px}
/* Zeitangabe als eigene Zeile unter dem Schritt-Titel - kein nowrap, kein Ueberlauf
   (gemessen 06.09.2026: 1306 > 1280 px mit nowrap). */
.sl-item .sl-zeit{display:block;white-space:normal;margin:-6px 0 10px}
/* Geruest-Titel in Spalten und Karten bleiben H2, sehen aber wie Untertitel aus. */
.sl-h2-col{font-size:22px;line-height:1.25;margin:0 0 14px}
.sl-h2-card{font-size:21px;line-height:1.25;margin:0 0 12px}
.sl-card .sl-h2-col{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-tuerkis-text);margin:0 0 6px}
/* CTA-Band ohne fremden Titel: der Satz aus der Quelle als Textzeile. */
.sl-cta .sl-cta-text{color:var(--wp--preset--color--offwhite);font-family:var(--wp--preset--font-family--nunito);font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.3;max-width:26ch;margin:0 auto 28px}
.sl-grid + .sl-intro{margin:40px 0 0}

@media(max-width:960px){
.sl-grid-2,.sl-grid-3{grid-template-columns:1fr}
.sl-steps{grid-template-columns:1fr}
.sl-step{border-right:0;border-bottom:1px solid var(--sl-line);padding:28px 0!important}
.sl-step:last-child{border-bottom:0}
.sl-hero{padding:88px 0 76px}
.sl-sec,.sl-quote{padding:68px 0}
.sl-page-head{padding:76px 0 44px}
.sl-soon{padding:96px 0 110px}
.sl-btn{width:100%;text-align:center}
}