/*!
 * Kessler – Startseite.
 *
 * Wird ausschliesslich auf der Startseite geladen (siehe inc/enqueue.php).
 * Das Erscheinungsbild folgt dem vom Auftraggeber genannten Vorbild
 * sanitario-hamburg.de, traegt aber Gelb statt Weinrot.
 *
 * Wichtig bei Gelb: Es ist eine sehr helle Farbe. Weisse Schrift darauf ist
 * nicht lesbar – auf allen gelben Flaechen steht deshalb Schwarz.
 * Rot bleibt allein dem Notruf vorbehalten.
 */
@font-face{font-family:Schibsted;src:url(../fonts/schibsted-latin.woff2) format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Schibsted;src:url(../fonts/schibsted-latin-ext.woff2) format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:PlexSans;src:url(../fonts/plex-latin.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:PlexSans;src:url(../fonts/plex-latin-ext.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
	/* Farben aus der Logodatei */
	--gelb:#FED801;
	--gelb-tief:#E5C201;
	--gelb-blass:#FFF6CC;
	--schwarz:#0E0C13;
	--kohle:#1A1720;
	--rot:#ED1C23;
	--rot-tief:#C4131A;
	--creme:#FBF8F0;
	--creme-tief:#F4EFE2;
	--weiss:#FFFFFF;
	--grau:#5C5A66;
	--linie:#E4E0D4;
	--rund:14px;
	--rund-pille:999px;
	--leiste:64px;
	--rand:clamp(1.1rem,4vw,2.2rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--schwarz);
	font-family:PlexSans,system-ui,Segoe UI,Arial,sans-serif;font-weight:400;
	font-size:clamp(1rem,.96rem+.2vw,1.08rem);line-height:1.65;
	-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:Schibsted,PlexSans,Arial,sans-serif;font-weight:700;
	margin:0;line-height:1.12;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.s-mitte{width:min(1240px,100%);margin-inline:auto;padding-inline:var(--rand)}

/* ---------- Bausteine ---------- */
.s-kicker{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
	font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.s-kicker::before{content:"";width:34px;height:3px;background:currentColor;flex:none}
.s-pille{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
	font-family:Schibsted,sans-serif;font-weight:700;font-size:1.02rem;
	padding:.85em 1.6em;border-radius:var(--rund-pille);border:2px solid transparent;
	transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.s-pille svg{width:1.15em;height:1.15em;flex:none}
.s-pille--rot{background:var(--rot);color:var(--weiss);border-color:var(--rot)}
.s-pille--rot:hover{background:var(--rot-tief);border-color:var(--rot-tief);transform:translateY(-2px)}
.s-pille--gelb{background:var(--gelb);color:var(--schwarz);border-color:var(--gelb)}
.s-pille--gelb:hover{background:var(--schwarz);color:var(--gelb);border-color:var(--schwarz)}
.s-pille--linie{background:transparent;color:currentColor;border-color:currentColor}
.s-pille--linie:hover{background:currentColor}
.s-held .s-pille--linie:hover{color:var(--schwarz);background:var(--weiss);border-color:var(--weiss)}
.s-merkmal{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;
	padding:.5rem 1rem;border-radius:var(--rund-pille);border:1px solid rgba(255,255,255,.28)}
.s-merkmal svg{width:1.05em;height:1.05em;color:var(--gelb);flex:none}

/* ---------- Kopf ---------- */
.s-oben{background:var(--schwarz);color:rgba(255,255,255,.82);font-size:.82rem}
.s-oben .s-mitte{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;
	padding-block:.55rem}
.s-oben span{display:inline-flex;align-items:center;gap:.45rem}
.s-oben svg{width:1em;height:1em;flex:none;opacity:.8}
.s-oben .notpille{background:var(--rot);color:var(--weiss);font-weight:700;
	padding:.28rem .8rem;border-radius:var(--rund-pille)}
@media(max-width:860px){.s-oben .nurgross{display:none}}

.s-kopf{position:sticky;top:0;z-index:60;background:rgba(251,248,240,.94);
	backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.s-kopf .s-mitte{display:flex;align-items:center;gap:1.4rem;padding-block:.7rem}
.s-marke{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:none}
.s-marke img{width:48px;height:48px;border-radius:12px}
.s-marke b{display:block;font-family:Schibsted,sans-serif;font-weight:700;font-size:1.18rem;
	line-height:1.15;letter-spacing:-.02em}
.s-marke small{display:block;font-size:.76rem;color:var(--grau);letter-spacing:.02em}
.s-navi{display:flex;gap:1.4rem;margin-left:auto;font-weight:500;font-size:.98rem}
.s-navi a{text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.s-navi a:hover{border-bottom-color:var(--gelb)}
.s-kopf__tel{text-align:right;line-height:1.2;flex:none}
.s-kopf__tel small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
	color:var(--grau)}
.s-kopf__tel a{font-family:Schibsted,sans-serif;font-weight:700;font-size:1.2rem;text-decoration:none}
@media(max-width:1100px){.s-navi,.s-kopf__tel{display:none}}

/* ---------- Held ---------- */
.s-held{position:relative;color:var(--weiss);overflow:hidden;isolation:isolate}
.s-held__bg{position:absolute;inset:0;z-index:-2}
.s-held__bg img{width:100%;height:100%;object-fit:cover}
.s-held__bg::after{content:"";position:absolute;inset:0;
	background:linear-gradient(100deg,rgba(14,12,19,.96) 0%,rgba(14,12,19,.9) 34%,rgba(14,12,19,.55) 66%,rgba(14,12,19,.3) 100%)}
/* Auf schmalen Bildschirmen steht der Text über dem ganzen Bild – dort muss
   der Schleier durchgehend dicht sein, sonst leidet die Lesbarkeit. */
@media(max-width:820px){
	.s-held__bg::after{background:linear-gradient(180deg,rgba(14,12,19,.9),rgba(14,12,19,.94))}
}
.s-held .s-mitte{padding-block:clamp(3.4rem,8vw,6rem)}
.s-held__text{max-width:38rem}
.s-held .s-kicker{color:var(--gelb)}
.s-held h1{font-size:clamp(2.4rem,1.6rem+3.6vw,4.4rem);margin-bottom:1.2rem}
.s-held h1 em{font-style:normal;color:var(--gelb);display:block}
.s-held__lead{font-size:clamp(1.05rem,1rem+.35vw,1.22rem);color:rgba(255,255,255,.86);
	max-width:34rem}
.s-held__knoepfe{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.s-held__merkmale{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}

/* ---------- Notdienst: ein schmales Band, genau einmal auf der Seite ---------- */
.s-notband{background:var(--schwarz);color:var(--weiss)}
.s-notband .s-mitte{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
	gap:.9rem 1.6rem;padding-block:1rem}
.s-notband__text{display:flex;align-items:center;gap:.7rem;font-size:1rem;min-width:0}
.s-notband__text svg{width:1.3em;height:1.3em;flex:none;color:var(--rot)}
.s-notband__aktion{display:flex;align-items:center;gap:.5rem 1.1rem;flex-wrap:wrap}
.s-notband__aktion a{font-family:Schibsted,sans-serif;font-weight:700;font-size:1.16rem;
	text-decoration:none;color:var(--gelb)}
.s-notband__aktion a:hover{color:var(--weiss)}
.s-notband__mehr{font-size:.92rem !important;font-weight:500 !important;
	color:rgba(255,255,255,.72) !important;text-decoration:underline !important}
.s-notband__mehr:hover{color:var(--gelb) !important}

/* ---------- Abschnitte ---------- */
.s-abschnitt{padding-block:clamp(3rem,6.5vw,5.2rem)}
.s-abschnitt--creme{background:var(--creme)}
.s-abschnitt--dunkel{background:var(--schwarz);color:rgba(255,255,255,.84)}
.s-abschnitt--dunkel h2,.s-abschnitt--dunkel h3{color:var(--weiss)}
.s-abschnitt--dunkel .s-kicker{color:var(--gelb)}
.s-abschnitt h2{font-size:clamp(1.8rem,1.35rem+2vw,2.9rem);margin-bottom:1rem}
.s-abschnitt__lead{max-width:46rem;color:var(--grau);font-size:1.06rem}
.s-abschnitt--dunkel .s-abschnitt__lead{color:rgba(255,255,255,.76)}

.s-zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.s-zweispalt{grid-template-columns:1fr}}
.s-balken{display:grid;gap:1.6rem}
.s-balken div{border-left:4px solid var(--gelb);padding-left:1.1rem}
.s-balken h3{font-size:1.12rem;margin-bottom:.35rem}
.s-balken p{color:var(--grau);font-size:.98rem}
.s-abschnitt--dunkel .s-balken p{color:rgba(255,255,255,.74)}

/* Leistungskarten */
.s-leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.s-leistung{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
	overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
	transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.s-leistung:hover{transform:translateY(-3px);border-color:var(--gelb);
	box-shadow:0 12px 32px rgba(14,12,19,.1)}
.s-leistung__bild{aspect-ratio:16/10;overflow:hidden;background:var(--schwarz)}
.s-leistung__bild img{width:100%;height:100%;object-fit:cover}
.s-leistung__text{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.s-leistung__marke{align-self:flex-start;background:var(--gelb);color:var(--schwarz);
	font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
	padding:.28rem .7rem;border-radius:var(--rund-pille)}
.s-leistung h3{font-size:1.2rem}
.s-leistung p{color:var(--grau);font-size:.96rem}
@media(max-width:1000px){.s-leistungen{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.s-leistungen{grid-template-columns:1fr}}

/* Zahlen */
.s-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
	gap:1rem;margin-top:2.2rem}
.s-zahlen div{background:var(--gelb-blass);border:1px solid var(--gelb);
	border-radius:var(--rund);padding:1.4rem 1.2rem}
.s-zahlen b{display:block;font-family:Schibsted,sans-serif;font-weight:700;
	font-size:clamp(1.8rem,1.4rem+1.4vw,2.5rem);line-height:1;color:var(--schwarz)}
.s-zahlen span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--grau)}
@media(max-width:820px){.s-zahlen{grid-template-columns:1fr 1fr}}

/* Bewertungen */
.s-sterne{color:var(--gelb-tief);font-size:1.5rem;letter-spacing:.18em}

/* Fragen */
.s-fragen{margin-top:2rem;border-top:1px solid var(--linie)}
.s-fragen details{border-bottom:1px solid var(--linie)}
.s-fragen summary{cursor:pointer;list-style:none;padding:1.15rem 2.6rem 1.15rem 0;
	position:relative;font-family:Schibsted,sans-serif;font-weight:700;font-size:1.08rem}
.s-fragen summary::-webkit-details-marker{display:none}
.s-fragen summary::after{content:"";position:absolute;right:.6rem;top:1.5rem;width:11px;height:11px;
	border-right:2px solid var(--schwarz);border-bottom:2px solid var(--schwarz);
	transform:rotate(45deg);transition:transform .2s ease}
.s-fragen details[open] summary::after{transform:rotate(225deg)}
.s-fragen p{padding-bottom:1.2rem;color:var(--grau);max-width:72ch}

/* Ratgeber */
.s-beitraege{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
.s-beitrag{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
	padding:1.4rem;text-decoration:none;display:flex;flex-direction:column;gap:.5rem;
	transition:border-color .16s ease,transform .16s ease}
.s-beitrag:hover{border-color:var(--gelb);transform:translateY(-3px)}
.s-beitrag span{font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
	color:var(--gelb-tief)}
.s-beitrag h3{font-size:1.08rem}
.s-beitrag p{color:var(--grau);font-size:.95rem}
@media(max-width:900px){.s-beitraege{grid-template-columns:1fr}}

/* Abschluss */
.s-abschluss{background:var(--gelb);color:var(--schwarz);text-align:center}
.s-abschluss .s-mitte{padding-block:clamp(3rem,6vw,4.6rem)}
.s-abschluss img{width:96px;height:96px;border-radius:16px;margin:0 auto 1.4rem}
.s-abschluss h2{font-size:clamp(2rem,1.5rem+2.2vw,3.2rem);margin-bottom:.8rem}
.s-abschluss__lead{max-width:46rem;margin-inline:auto;font-size:1.06rem;color:rgba(14,12,19,.84)}
.s-abschluss .s-grossnummer{display:inline-block;margin-top:1.4rem;
	font-family:Schibsted,sans-serif;font-weight:700;
	font-size:clamp(2rem,1.4rem+2.6vw,3.4rem);text-decoration:none;
	background:var(--schwarz);color:var(--gelb);padding:.4em .7em;border-radius:var(--rund-pille)}
.s-abschluss .s-grossnummer:hover{background:var(--rot);color:var(--weiss)}

/* Fusszeile */
.s-fuss{background:var(--schwarz);color:rgba(255,255,255,.74);padding-block:clamp(2.6rem,5vw,4rem) 1.6rem}
.s-fuss__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,3vw,2.6rem)}
.s-fuss img{width:88px;height:88px;border-radius:14px;margin-bottom:1rem}
.s-fuss h3{color:var(--gelb);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
	margin-bottom:.9rem}
.s-fuss ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem;font-size:.95rem}
.s-fuss a{text-decoration:none}
.s-fuss a:hover{color:var(--gelb)}
.s-fuss__tel{font-family:Schibsted,sans-serif;font-weight:700;font-size:1.35rem;
	color:var(--gelb);text-decoration:none}
.s-fuss__unten{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14);
	display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.4rem;font-size:.85rem}
@media(max-width:900px){.s-fuss__raster{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.s-fuss__raster{grid-template-columns:1fr}}

/* ---------- Feste Anrufleiste ---------- */
.s-rufleiste{position:fixed;right:clamp(.8rem,3vw,2rem);bottom:clamp(.8rem,3vw,1.6rem);
	z-index:80;display:flex;align-items:center;gap:.4rem;padding:.4rem;
	background:var(--schwarz);border-radius:var(--rund-pille);
	box-shadow:0 10px 30px rgba(0,0,0,.42)}
.s-rufleiste a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
	font-family:Schibsted,sans-serif;font-weight:700;font-size:.98rem;
	padding:.7em 1.3em;border-radius:var(--rund-pille);color:var(--weiss);
	transition:background .16s ease,color .16s ease}
.s-rufleiste svg{width:1.1em;height:1.1em}
/* Rot bleibt dem Notdienst vorbehalten; dies ist ein gewöhnlicher
   Anrufknopf und trägt deshalb Gelb. */
.s-rufleiste .ruf{background:var(--gelb);color:var(--schwarz)}
.s-rufleiste .ruf:hover{background:var(--gelb-tief);color:var(--schwarz)}
.s-rufleiste .zweit:hover{background:rgba(255,255,255,.12)}
.s-rufleiste img{width:34px;height:34px;border-radius:10px;margin-left:.2rem}
@media(max-width:560px){
	/* Die Leiste sitzt über die volle Breite – dort ist Platz für beide
	   Beschriftungen, nur das Logo entfällt. */
	.s-rufleiste{left:.8rem;right:.8rem;justify-content:stretch}
	.s-rufleiste img{display:none}
}

@media(prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*{transition:none !important}
}

/* ---------- Telefon: Kopf und Rufleiste müssen in 320 px passen ----------
   Der Schriftzug neben dem Logo war bisher unschrumpfbar (flex:none). Auf
   schmalen Geräten schob er Burger und Anrufknopf über den Rand hinaus, und
   die ganze Seite liess sich seitlich verschieben. Deshalb darf die Marke
   jetzt schrumpfen und der Schriftzug bei Bedarf umbrechen. */
@media(max-width:1100px){
	.s-kopf .s-mitte{flex-wrap:nowrap;gap:.7rem}
	.s-marke{flex:1 1 auto;min-width:0}
	.s-marke span{min-width:0}
	.s-marke b,.s-marke small{overflow-wrap:anywhere}
	.s-kopf .s-pille{flex:none;margin-left:0}
	.s-kopf .k-burger{flex:none;margin-left:0}
}
@media(max-width:560px){
	.s-marke img{width:40px;height:40px;flex:none}
	.s-marke b{font-size:.98rem}
	.s-marke small{font-size:.68rem}
	.s-kopf .s-mitte{gap:.5rem;padding-block:.55rem}
	.s-kopf .s-pille{font-size:.9rem;padding:.62em .95em}
	.s-held__merkmale .s-merkmal{font-size:.82rem;padding:.42rem .8rem}
	/* Die Rufleiste sitzt über die volle Breite und darf nicht überlaufen. */
	.s-rufleiste{padding:.35rem;gap:.3rem}
	.s-notband .s-mitte{padding-block:.85rem}
	.s-notband__text{font-size:.94rem}
	.s-rufleiste a{flex:1 1 auto;min-width:0;justify-content:center;
		padding:.68em .8em;font-size:.92rem}
}

@media(max-width:400px){
	/* Ab hier reicht der Platz nur noch für Logo, Marke und ein Symbol. */
	.s-kopf .s-pille span{position:absolute;width:1px;height:1px;overflow:hidden;
		clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
	.s-kopf .s-pille{padding:.62em .8em}
	.s-marke small{display:none}
}

/* Sprungziele dürfen nicht unter der klebenden Kopfzeile verschwinden. */
[id]{scroll-margin-top:96px}

/* ---------- Menü im Kopf der Startseite ----------
   Burger und Menü tragen bewusst die Klassen aus main.css, damit das
   vorhandene Skript sie weiter bedient. Hier nur das Aussehen. */
.s-kopf .k-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
	width:44px;height:44px;padding:9px;flex-direction:column;justify-content:space-between}
.s-kopf .k-burger span{display:block;height:3px;background:var(--schwarz);border-radius:2px;
	transition:transform .2s ease,opacity .2s ease}
.s-kopf .k-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.s-kopf .k-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.s-kopf .k-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
.s-navi .k-menu{display:flex;gap:1.4rem;margin:0;padding:0;list-style:none;
	font-weight:500;font-size:.98rem}
.s-navi .k-menu a{text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent;display:block}
.s-navi .k-menu a:hover{border-bottom-color:var(--gelb)}
.s-navi{margin-left:auto}

@media(max-width:1100px){
	.s-kopf .k-burger{display:flex}
	.s-navi{position:absolute;left:0;right:0;top:100%;margin:0;
		background:var(--creme);border-bottom:1px solid var(--linie);
		max-height:0;overflow:hidden;transition:max-height .24s ease}
	.s-navi.is-open,.s-kopf .k-nav[aria-hidden="false"]{max-height:70vh;overflow:auto}
	.s-navi .k-menu{flex-direction:column;gap:0;padding:.6rem clamp(1.1rem,4vw,2.2rem) 1.2rem}
	.s-navi .k-menu a{padding:.7rem 0;border-bottom:1px solid var(--linie)}
	.s-kopf .s-mitte{position:relative}
}