/* Hauskrankenpflege Schwester Marcella GmbH – Gestaltung (Neubau 10/2026)
   h1–h6, a, ul, li bleiben Sache von style_wbs.css; hier wird nur über Klassen gestaltet. */

@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --tuerkis: #1b9bb8;
  --petrol: #0e6a80;
  --petrol-tief: #0a4b5c;
  --sand: #cca983;
  --sand-hell: #f1e6d8;
  --sand-dunkel: #8c5e33;
  --creme: #fdf9f3;
  --creme-2: #f8f1e7;
  --eis: #e7f5f8;
  --notruf: #c8452f;
  --notruf-tief: #a83522;
  --text: #2d4047;
  --text-leise: #546a72;
  --weiss: #fff;
  --schrift: "Nunito", "Segoe UI", Arial, sans-serif;
  --schrift-titel: Georgia, "Noto Serif", "Times New Roman", serif;
  --schrift-hand: "Segoe Script", "Snell Roundhand", "Bradley Hand", cursive;
  --schatten: 0 18px 44px -22px rgba(10, 75, 92, .38);
  --schatten-gross: 0 34px 70px -34px rgba(10, 75, 92, .5);
  --breite: 1240px;
  --sanft: cubic-bezier(.22, .8, .24, 1);
}

html { font-size: 112.5%; scroll-behavior: smooth; scroll-padding-top: 110px; }
html[data-schrift="gross"] { font-size: 131%; }
body { margin: 0; font-family: var(--schrift); line-height: 1.65; color: var(--text); background: var(--weiss); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
figure { margin: 0; }
.wrap { width: min(var(--breite), 100% - 2rem); margin-inline: auto; }
.kopfzeile .wrap, .site-header .wrap { width: min(1240px, 100% - 36px); }
.wrap--schmal { width: min(880px, 100% - 2rem); }
.mittig { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 300; padding: .6em 1em; background: var(--petrol); color: #fff; border-radius: 8px; }
.skip-link:focus { left: 8px; color: #fff; }
:focus-visible { outline: 3px solid var(--notruf); outline-offset: 3px; border-radius: 4px; }

/* Schrift-Klassen aus der Hausregel */
.schrift1 { font-size: 1.2em; color: var(--tuerkis); text-align: left; line-height: 1.2; font-weight: bold; }
.schrift2 { font-size: 1.1em; color: var(--petrol); line-height: 1.2; }
.schrift3 { font-size: 1.1em; color: #999; line-height: 1.2; }
.schrift4 { font-size: 1.0em; color: var(--sand-dunkel); line-height: 1.0; text-decoration: underline; }
.schrift5 { font-size: 1.0em; color: #FFF; text-align: center; }
.schrift6 { font-size: 1.6em; color: #FFF; text-align: center; }
.hero__slogan2 { display: block; font-size: 1.3em; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 0.4em; }

/* Titel, Dachzeilen */
.kicker { display: block; font-size: .88rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sand-dunkel); margin-bottom: .7em; }
.kicker--hell { color: #ffe3c4; }
.titel { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.18; color: var(--petrol); text-align: left; margin: 0 0 .6em; letter-spacing: -.01em; }
.titel--hell { color: #fff; }
.titel--klein { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.abschnitt__kopf { max-width: 760px; margin: 0 auto 2.6rem; text-align: center; }
.abschnitt__kopf .titel { text-align: center; }
.hand { display: inline-block; font-family: var(--schrift-hand); font-weight: 400; line-height: 1; color: var(--sand-dunkel); position: relative; white-space: nowrap; }
.hand::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.02em; height: .2em; border-radius: 50%; border-bottom: 3px solid var(--sand); transform-origin: left; animation: unterstreichen 1.3s .9s var(--sanft) both; }
@keyframes unterstreichen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
a.btn, a.btn:visited, button.btn { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: 3.1rem; padding: .7em 1.35em; border: 2px solid transparent; border-radius: 999px; background: var(--petrol); color: #fff; font-family: var(--schrift); font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; overflow: hidden; box-shadow: var(--schatten); transition: transform .35s var(--sanft), background .3s, box-shadow .35s; }
a.btn::before, button.btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
a.btn:hover, button.btn:hover { background: var(--petrol-tief); color: #fff; transform: translateY(-3px); box-shadow: var(--schatten-gross); }
a.btn:hover::before, button.btn:hover::before { transform: translateX(120%); }
a.btn--notruf, a.btn--notruf:visited { background: var(--notruf); }
a.btn--notruf:hover { background: var(--notruf-tief); }
.btn__klein { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; opacity: .92; }
a.btn--rand, a.btn--rand:visited { background: transparent; color: var(--petrol); border-color: var(--petrol); box-shadow: none; }
a.btn--rand:hover { background: var(--petrol); color: #fff; }
a.btn--hell, a.btn--hell:visited { background: #fff; color: var(--petrol-tief); }
a.btn--hell:hover { background: var(--sand-hell); color: var(--petrol-tief); }
a.btn--rand-hell, a.btn--rand-hell:visited { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }
a.btn--rand-hell:hover { background: #fff; color: var(--petrol-tief); }

/* Kopfzeile + Header */
.kopfzeile { background: var(--creme-2); font-size: 15px; }
.kopfzeile__innen { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; }
.kopfzeile__notfall { margin: 0; white-space: nowrap; font-weight: 700; color: var(--notruf-tief); display: flex; align-items: center; gap: .55em; }
.punkt { width: .62em; height: .62em; border-radius: 50%; background: var(--notruf); box-shadow: 0 0 0 0 rgba(200, 69, 47, .6); animation: puls 2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 .7em rgba(200, 69, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 69, 47, 0); } }
.kontaktzeile { display: flex; align-items: center; gap: 23px; list-style: none; margin: 0; padding: 0; }
.kontaktzeile li { border: 0; }
.kontaktzeile a, .kontaktzeile a:visited { display: inline-flex; align-items: center; gap: .4em; font-family: inherit; font-size: inherit; color: var(--petrol-tief); text-decoration: none; }
.kontaktzeile a:hover { color: var(--notruf-tief); text-decoration: underline; }
.kontaktzeile img { width: 22px; height: 22px; }
.schrift-knopf { font: inherit; font-weight: 700; color: var(--petrol-tief); background: #fff; border: 1.5px solid var(--sand); border-radius: 999px; padding: .1em .75em; cursor: pointer; transition: background .25s, color .25s; }
.schrift-knopf b { color: var(--notruf); }
.schrift-knopf:hover, .schrift-knopf[aria-pressed="true"] { background: var(--petrol); color: #fff; }
.schrift-knopf:hover b, .schrift-knopf[aria-pressed="true"] b { color: #ffe3c4; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .93); backdrop-filter: blur(12px); transition: box-shadow .3s; }
.site-header.ist-klein { box-shadow: 0 10px 30px -22px rgba(10, 75, 92, .6); }
.header__innen { display: flex; align-items: center; justify-content: space-between; gap: 27px; min-height: 92px; transition: min-height .3s; }
.ist-klein .header__innen { min-height: 70px; }
.logo { flex: none; }
.logo img { width: 290px; height: auto; transition: width .3s; }
.ist-klein .logo img { width: 225px; }
.logo img.logo--quer { width: 240px; }
.ist-klein .logo img.logo--quer { width: 190px; }
.nav { display: flex; align-items: center; gap: 3px; list-style: none; margin: 0; padding: 0; }
.nav__punkt { position: relative; border: 0; }
a.nav__link, a.nav__link:visited, button.nav__link { display: block; padding: .5em .8em; border: 0; border-radius: 999px; background: none; font-family: var(--schrift); font-size: 17px; font-weight: 700; color: var(--petrol-tief); text-decoration: none; cursor: pointer; transition: background .25s, color .25s; }
a.nav__link:hover, button.nav__link:hover, a.nav__link[aria-current="page"] { background: var(--eis); color: var(--petrol); }
.nav__auf::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); }
a.nav__link--kontakt, a.nav__link--kontakt:visited { background: var(--petrol); color: #fff; padding-inline: 1.2em; }
a.nav__link--kontakt:hover { background: var(--petrol-tief); color: #fff; }
a.nav__link--kontakt[aria-current="page"] { background: var(--petrol); color: #fff; }
.nav .nav__link { box-sizing: border-box; }
.sub { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 250px; margin: .35rem 0 0; padding: .5rem; list-style: none; background: #fff; border-radius: 16px; box-shadow: var(--schatten-gross); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
.sub li { border: 0; }
.sub a, .sub a:visited { display: block; padding: .5em .8em; border-radius: 10px; font-family: inherit; font-size: 17px; color: var(--petrol-tief); text-decoration: none; }
.sub a:hover { background: var(--eis); color: var(--petrol); }
.hat-sub:hover .sub, .hat-sub:focus-within .sub, .nav__auf[aria-expanded="true"] + .sub { opacity: 1; visibility: visible; transform: none; }

.mobilleiste { display: none; }
.nav__schrift { display: none; }

/* HERO */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--creme) 0%, #fff 62%); padding-top: clamp(1.4rem, 3vw, 2.6rem); }
.hero__wolke { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: treiben 18s ease-in-out infinite alternate; pointer-events: none; }
.hero__wolke--a { width: 520px; height: 520px; top: -220px; left: -160px; background: #cfeaf1; }
.hero__wolke--b { width: 460px; height: 460px; top: -120px; right: -120px; background: #f3dfc6; animation-delay: -7s; }
@keyframes treiben { to { transform: translate(70px, 40px) scale(1.12); } }
.hero__kopf { position: relative; z-index: 2; display: grid; grid-template-columns: 1.18fr 1fr; gap: 1rem 2.6rem; align-items: center; padding-bottom: 2.4rem; }
.hero__titel { margin: 0; font-size: 1rem; }
.hero__headline { display: block; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(2.05rem, 3.9vw, 3.15rem); line-height: 1.14; color: var(--petrol); letter-spacing: -.015em; }
.lead { font-size: 1.1rem; margin-bottom: 1.2em; }
.hero__titel > *, .hero__text > * { animation: einrutschen .9s var(--sanft) both; }
.hero__text > :nth-child(1) { animation-delay: .15s; }
.hero__text > :nth-child(2) { animation-delay: .3s; }
@keyframes einrutschen { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Siegel 24h */
.siegel, .siegel:visited { position: absolute; right: -.6rem; bottom: -5.6rem; z-index: 4; width: 148px; height: 148px; border-radius: 50%; background: #fff; box-shadow: var(--schatten-gross); text-decoration: none; transition: transform .4s var(--sanft); animation: einrutschen .9s .8s var(--sanft) both; }
.siegel:hover { transform: scale(1.08); }
.siegel__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 22s linear infinite; }
.siegel__ring text { font-family: var(--schrift); font-weight: 700; font-size: 20.500px; letter-spacing: 1.900px; fill: var(--notruf-tief); }
.siegel:hover .siegel__ring { animation-duration: 6s; }
@keyframes drehen { to { transform: rotate(360deg); } }
.siegel__mitte { position: absolute; inset: 26%; display: grid; place-items: center; border-radius: 50%; background: var(--notruf); color: #fff; box-shadow: 0 0 0 0 rgba(200, 69, 47, .5); animation: puls 2s infinite; }
.siegel__mitte svg { width: 36px; height: 36px; animation: klingeln 3.6s infinite; transform-origin: 50% 50%; }
@keyframes klingeln { 0%, 76%, 100% { transform: none; } 80% { transform: rotate(-13deg); } 84% { transform: rotate(13deg); } 88% { transform: rotate(-9deg); } 92% { transform: rotate(9deg); } }

/* Panorama: fünf Fenster, je eines ist aufgeklappt */
.panorama { position: relative; z-index: 1; display: flex; gap: clamp(6px, .8vw, 12px); height: clamp(330px, 42vw, 590px); padding-inline: clamp(8px, 1.6vw, 26px); }
.panorama__teil { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: clamp(60px, 11vw, 180px) clamp(60px, 11vw, 180px) 0 0; box-shadow: var(--schatten); cursor: pointer; transition: flex-grow .9s var(--sanft); animation: aufsteigen 1.1s var(--sanft) both; }
.panorama__teil:nth-child(1) { animation-delay: .1s; }
.panorama__teil:nth-child(2) { animation-delay: .22s; }
.panorama__teil:nth-child(3) { animation-delay: .34s; }
.panorama__teil:nth-child(4) { animation-delay: .46s; }
.panorama__teil:nth-child(5) { animation-delay: .58s; }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
.panorama__teil.ist-aktiv { flex-grow: 1.9; }
.panorama__teil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transition: transform 6s ease-out; }
.panorama__teil.ist-aktiv img { transform: scale(1.06); }
.panorama__teil figcaption { position: absolute; left: 50%; bottom: calc(clamp(70px, 10vw, 150px) + 18px); z-index: 2; padding: .4em 1.1em; border-radius: 999px; background: #fff; color: var(--petrol-tief); font-weight: 700; font-size: .92rem; white-space: nowrap; box-shadow: var(--schatten); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .3s, transform .3s; }
.panorama__teil.ist-aktiv figcaption { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .35s .45s, transform .35s .45s; }
/* Fenster Wundversorgung: Beschriftung auf dem Tablet tiefer, damit sie den verbundenen Fuß nicht verdeckt */
@media (min-width: 641px) and (max-width: 900px) { .panorama__teil--tief figcaption { bottom: 72px; } }

/* Schwung aus dem Logo */
.schwung { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; width: 100%; height: clamp(70px, 10vw, 150px); pointer-events: none; }
.schwung__flaeche { fill: #fff; }

/* Einblenden beim Scrollen */
.js .zeige { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--sanft), transform .9s var(--sanft); }
.js .zeige[data-spaet="1"] { transition-delay: .12s; }
.js .zeige[data-spaet="2"] { transition-delay: .24s; }
.js .zeige[data-spaet="3"] { transition-delay: .36s; }
.js .zeige.ist-da { opacity: 1; transform: none; }

/* Willkommen */
.willkommen { padding: clamp(2.6rem, 5vw, 4.6rem) 0 clamp(3rem, 6vw, 5rem); }
.willkommen__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.willkommen__bild { position: relative; }
.willkommen__bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 50%; border-radius: 46% 54% 44% 56% / 52% 44% 56% 48%; box-shadow: var(--schatten-gross); }
.zitat-sticker { position: absolute; left: 4%; bottom: 5%; display: grid; place-items: center; align-content: center; width: 132px; height: 132px; border-radius: 50%; background: var(--tuerkis); background: linear-gradient(140deg, var(--tuerkis), var(--petrol)); color: #fff; font-size: .82rem; font-weight: 700; line-height: 1.2; text-align: center; box-shadow: var(--schatten); animation: schweben 5s ease-in-out infinite; }
.zitat-sticker__zahl { font-family: var(--schrift-titel); font-size: 1.05rem; }
@keyframes schweben { 50% { transform: translateY(-9px); } }
.handzitat { font-family: var(--schrift-hand); font-size: clamp(1.35rem, 2.5vw, 1.95rem); line-height: 1.35; color: var(--sand-dunkel); margin-bottom: .7em; }
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; margin-top: clamp(2.4rem, 5vw, 4rem); margin-bottom: 0; padding: 0; }
.zahlen li { padding: 1.5rem 1.1rem; border: 0; border-radius: 22px; background: var(--creme); text-align: center; transition: transform .4s var(--sanft), background .3s, box-shadow .4s; }
.zahlen li:hover { transform: translateY(-6px); background: var(--eis); box-shadow: var(--schatten); }
.zahlen__wert { display: block; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; color: var(--petrol); font-variant-numeric: tabular-nums; }
.zahlen__symbol svg { display: block; width: 1.1em; height: 1.1em; margin-inline: auto; fill: currentColor; }
.zahlen__text { display: block; margin-top: .35em; font-size: .92rem; line-height: 1.35; color: var(--text-leise); }

/* Leistungen */
.leistungen { padding: clamp(3rem, 6vw, 5.5rem) 0 1.4rem; background: linear-gradient(180deg, var(--creme) 0%, var(--creme-2) 100%); }
.l-raster { display: grid; grid-template-columns: 5fr 7fr; column-gap: 2rem; margin-bottom: 2.4rem; }
.l-punkt { display: contents; }
.l-kopf { grid-column: 1; margin: 0 0 .6rem; font-size: 1rem; font-weight: 400; color: inherit; line-height: inherit; }
.l-knopf { display: flex; align-items: center; gap: .9rem; width: 100%; height: 100%; padding: .8rem 1rem; border: 2px solid transparent; border-radius: 20px; background: rgba(255, 255, 255, .7); font-family: var(--schrift); font-size: 1rem; line-height: 1.3; color: var(--text); text-align: left; cursor: pointer; transition: background .3s, transform .35s var(--sanft), box-shadow .35s, border-color .3s; }
.l-knopf:hover { background: #fff; transform: translateX(6px); }
.l-knopf[aria-expanded="true"] { background: #fff; border-color: var(--tuerkis); box-shadow: var(--schatten); transform: translateX(10px); }
.l-symbol { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--eis); transition: background .3s; }
.l-symbol svg { width: 28px; height: 28px; fill: var(--petrol); transition: fill .3s; }
.l-symbol__hell { fill: none; stroke: var(--eis); stroke-width: 2; stroke-linecap: round; transition: stroke .3s; }
.l-knopf[aria-expanded="true"] .l-symbol { background: var(--petrol); }
.l-knopf[aria-expanded="true"] .l-symbol svg { fill: #fff; }
.l-knopf[aria-expanded="true"] .l-symbol__hell { stroke: var(--petrol); }
.l-knopf__text b { display: block; font-size: 1.04rem; color: var(--petrol); }
.l-knopf__text span { display: block; font-size: .88rem; color: var(--text-leise); }
.l-inhalt { grid-column: 2; grid-row: 1 / span 5; display: flex; flex-direction: column; border-radius: 26px; background: #fff; box-shadow: var(--schatten-gross); overflow: hidden; }
.js .l-inhalt { opacity: 0; visibility: hidden; transform: translateX(26px) scale(.985); transition: opacity .55s var(--sanft), transform .55s var(--sanft), visibility .55s; }
.js .l-inhalt.ist-offen { opacity: 1; visibility: visible; transform: none; }
.l-inhalt img { width: 100%; height: clamp(220px, 21vw, 290px); object-fit: cover; }
.l-inhalt__text { padding: 1.3rem 1.6rem 1.5rem; font-size: .96rem; }
.l-inhalt__text p:last-child { margin-bottom: 0; }
.l-hinweis { display: inline-block; margin-bottom: .8em; padding: .2em .9em; border-radius: 999px; background: var(--sand-hell); color: #6e4823; font-size: .84rem; font-weight: 700; }
.haken { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.haken--breit { grid-template-columns: 1fr; font-size: 1.05rem; gap: .5rem; }
.haken li { position: relative; padding-left: 1.5em; border: 0; }
.haken li::before { content: ""; position: absolute; left: .15em; top: .42em; width: .68em; height: .36em; border-left: 2.5px solid var(--tuerkis); border-bottom: 2.5px solid var(--tuerkis); transform: rotate(-45deg); }

/* Straße mit Schwester Nancy */
.strasse { position: relative; height: clamp(300px, 26vw, 400px); overflow: hidden; background: linear-gradient(180deg, var(--creme-2) 0%, #eaf6f8 72%); }
.strasse__stadt { position: absolute; left: 0; right: 0; bottom: 74px; width: 100%; height: 72%; }
.stadt-hinten { fill: #dbe9e9; }
.stadt-baum { fill: #b7dbd6; }
.stadt-stamm { fill: #bfa78a; }
.haus-dach { fill: var(--sand); }
.haus-wand { fill: #fff; }
.haus-fenster { fill: #9ed6e3; }
.haus-herz { fill: var(--tuerkis); }
.strasse__fahrbahn { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: #8fa0a4; border-top: 7px solid #e3ddd0; }
.strasse__fahrbahn::after { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 5px; background: repeating-linear-gradient(90deg, #fff 0 46px, transparent 46px 92px); }
.strasse__auto { position: absolute; left: 0; bottom: 4px; width: clamp(300px, 38vw, 560px); will-change: transform; }
.js .strasse__auto { transform: translate3d(110vw, 0, 0); }
.strasse__auto img { position: relative; z-index: 1; width: 100%; }
/* Radscheiben liegen genau auf den Felgen im Autobild */
.strasse__auto .rad { position: absolute; z-index: 2; height: auto; transform: translate(-50%, -50%); }
.strasse__auto .rad--vorn { left: 19.27%; top: 77.59%; width: 11.06%; }
.strasse__auto .rad--hinten { left: 85.42%; top: 76.92%; width: 10.88%; }
.sprechblase { position: absolute; z-index: 3; left: 44%; bottom: 90%; width: 280px; margin: 0; padding: .8em 1.1em; border-radius: 20px; background: #fff; box-shadow: var(--schatten-gross); font-size: .95rem; line-height: 1.35; color: var(--text); }
.sprechblase strong { display: block; color: var(--petrol); }
.sprechblase::after { content: ""; position: absolute; left: 34px; bottom: -13px; border: 7px solid transparent; border-top: 14px solid #fff; border-bottom: 0; }
.js .sprechblase { opacity: 0; transform: translateY(12px) scale(.92); transform-origin: 20% 100%; transition: opacity .45s, transform .45s var(--sanft); }
.js .strasse.ist-angekommen .sprechblase { opacity: 1; transform: none; }

/* Einsatzgebiet */
.gebiet { padding: clamp(3rem, 6vw, 5.5rem) 0; background: #eaf6f8; background: linear-gradient(180deg, #eaf6f8 0%, #fff 100%); }
.gebiet { position: relative; overflow: hidden; }
.gebiet__hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; transform: translateX(-14%); pointer-events: none; }
.gebiet__hintergrund path { fill: #dbe7e6; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.gebiet__hintergrund path.eigen { fill: #e8d5be; }
.gebiet__raster { position: relative; z-index: 1; display: grid; grid-template-columns: 2fr 3fr; gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; }
.stadtteile { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.stadtteile li { border: 0; }
.stadtteile button { display: inline-flex; align-items: center; gap: .45em; padding: .3em .85em .3em .35em; border: 2px solid transparent; border-radius: 999px; background: #fff; font-family: var(--schrift); font-size: .96rem; font-weight: 700; color: var(--petrol-tief); cursor: pointer; box-shadow: 0 6px 16px -12px rgba(10, 75, 92, .6); transition: background .25s, color .25s, border-color .25s; }
.stadtteile button span { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--tuerkis); color: #06323d; font-size: .8em; transition: background .25s; }
.stadtteile button:hover { border-color: var(--tuerkis); }
.stadtteile button.ist-aktiv { background: var(--petrol); color: #fff; }
.stadtteile button.ist-aktiv span { background: #fff; color: var(--petrol); }
/* Feste Höhe für zwei Zeilen: Sonst ändert der wechselnde Text die Höhe, und die Knöpfe darüber springen */
.gebiet__status { min-height: 3.4em; margin: 0; font-weight: 700; color: var(--petrol); }
.karte { position: relative; }
.karte__svg { display: block; width: 100%; max-width: 490px; height: auto; margin-inline: auto; overflow: visible; }
.karte__teile { filter: drop-shadow(0 6px 10px rgba(90, 60, 30, .22)); }
.karte__teile path { fill: #dfe9e8; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; transition: fill .35s; }
.karte__teile path:hover { fill: #cfdedd; }
.karte__teile path.einsatz { fill: var(--sand); cursor: pointer; }
.karte__teile path.einsatz:hover, .karte__teile path.einsatz.ist-aktiv { fill: var(--tuerkis); }
.karte__teile path.einsatz.heckert { fill: #bb9672; }
.karte__teile path.einsatz.heckert:hover, .karte__teile path.einsatz.heckert.ist-aktiv { fill: var(--tuerkis); }
.js .karte:not(.ist-gestartet) .karte__teile path.einsatz { fill: #dfe9e8; }
.karte__teile path.einsatz { transition: fill .7s; }
.karte__buero path { fill: var(--notruf); stroke: #fff; stroke-width: 2; }
.karte__buero circle { fill: #fff; }
.karte__buero { cursor: help; }
.karte__buero path, .karte__buero circle:not(.karte__buero-ring) { animation: buero-blinken 1.9s ease-in-out infinite; }
.karte__buero circle.karte__buero-ring { fill: none; stroke: var(--notruf); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: buero-ring 1.9s ease-out infinite; }
@keyframes buero-blinken { 50% { opacity: .55; } }
@keyframes buero-ring { from { transform: scale(.9); opacity: .7; } to { transform: scale(2); opacity: 0; } }
.karte__buero-schild { pointer-events: none; transition: opacity .6s 1.9s; }
.js .karte:not(.ist-gestartet) .karte__buero-schild { opacity: 0; }
.karte__buero-schild rect { fill: var(--petrol-tief); }
.karte__buero-schild text { font-family: var(--schrift); font-weight: 700; font-size: 12px; text-anchor: middle; fill: #fff; }
.k-punkt { cursor: pointer; }
.k-punkt circle { fill: #fff; stroke: var(--sand-dunkel); stroke-width: 1.6; transition: fill .25s; }
.k-punkt text { font-family: var(--schrift); font-weight: 700; font-size: 13px; text-anchor: middle; fill: var(--petrol-tief); pointer-events: none; }
.k-punkt.ist-aktiv circle, .k-punkt:hover circle { fill: var(--notruf); stroke: #fff; }
.k-punkt.ist-aktiv text, .k-punkt:hover text { fill: #fff; }
.karte__schild { position: absolute; z-index: 3; padding: .2em .8em; border-radius: 999px; background: var(--petrol-tief); color: #fff; font-size: .84rem; font-weight: 700; white-space: nowrap; pointer-events: none; transform: translate(-50%, -150%); box-shadow: var(--schatten); }
.karte figcaption { margin-top: .3rem; font-size: .72rem; color: var(--text-leise); text-align: right; }
.karte figcaption a, .karte figcaption a:visited { font-family: inherit; font-size: inherit; color: inherit; }

/* Notfall */
.notfall { position: relative; padding: clamp(3rem, 6vw, 5rem) 0; overflow: hidden; background: radial-gradient(1100px 500px at 15% 10%, #1b9bb8 0%, transparent 70%), linear-gradient(120deg, #0e6a80, #0a4b5c); color: #fff; }
.notfall__raster { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 1020px; }
.uhr { width: clamp(180px, 24vw, 270px); }
.uhr svg { display: block; width: 100%; overflow: visible; }
.uhr__puls { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; transform-origin: center; animation: uhrpuls 2.6s ease-out infinite; }
@keyframes uhrpuls { from { transform: scale(1); opacity: .9; } to { transform: scale(1.22); opacity: 0; } }
.uhr__blatt { fill: #fff; }
.uhr__striche path { fill: none; stroke: var(--sand); stroke-width: 3.500; stroke-linecap: round; }
.uhr line { stroke-linecap: round; transform-origin: 100px 100px; }
.uhr__stunde { stroke: var(--petrol-tief); stroke-width: 7; }
.uhr__minute { stroke: var(--petrol); stroke-width: 4.500; }
.uhr__sekunde { stroke: var(--notruf); stroke-width: 2; }
.uhr__mitte { fill: var(--notruf); }
.notfall__jetzt { font-size: 1.08rem; }
a.notfall__nummer, a.notfall__nummer:visited { display: inline-block; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(2rem, 5.6vw, 3.5rem); line-height: 1.1; color: #fff; text-decoration: none; transition: color .3s, transform .4s var(--sanft); }
a.notfall__nummer:hover { color: #ffe3c4; transform: scale(1.03); }

/* Team */
.team { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(5rem, 8vw, 7rem); }
.leitung { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: clamp(1rem, 3vw, 2.4rem); margin: 0 0 2.2rem; padding: 0; list-style: none; }
.person { border: 0; text-align: center; }
.person figure { overflow: hidden; border-radius: 150px 150px 24px 24px; box-shadow: var(--schatten); background: var(--eis); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--sanft); }
.person:hover img { transform: scale(1.06); }
.person__name { margin: .8rem 0 .1rem; font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 700; color: var(--petrol); text-align: center; }
.person p { margin: 0; font-size: .92rem; line-height: 1.35; color: var(--text-leise); }
.jobkarte { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; margin-top: clamp(2.6rem, 5vw, 4.2rem); padding: clamp(1.6rem, 4vw, 3rem); border-radius: 32px; background: linear-gradient(130deg, var(--sand-hell), var(--creme)); }
.vorteile { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.vorteile li { padding: .3em .95em; border: 0; border-radius: 999px; background: #fff; font-weight: 700; font-size: .92rem; color: var(--petrol-tief); box-shadow: 0 6px 16px -12px rgba(10, 75, 92, .6); }

/* Kontakt */
.section--cta { position: relative; padding: clamp(5.5rem, 10vw, 8rem) 0 clamp(3.5rem, 6vw, 5rem); background: linear-gradient(160deg, #e7f5f8 0%, var(--creme) 52%, var(--sand-hell) 100%); }
.welle { position: absolute; left: 0; width: 100%; display: block; }
.welle--oben { top: -1px; height: clamp(46px, 7vw, 90px); }
.welle--oben path { fill: #fff; }
.kontakt__raster { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: center; }
.kontakt__text .schrift6 { display: block; margin-bottom: .6em; font-family: var(--schrift-titel); font-weight: 700; line-height: 1.18; text-align: left; font-size: clamp(1.7rem, 3vw, 2.35rem); color: var(--petrol); letter-spacing: -.01em; }
.kontakt__text a.btn { padding-inline: 1.05em; font-size: .96rem; }
.ansprechpartner { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0; }
.ansprechpartner__bilder { display: flex; flex: none; }
.ansprechpartner__bilder img { width: 68px; height: 68px; border: 3px solid #fff; border-radius: 50%; box-shadow: var(--schatten); }
.ansprechpartner__bilder img + img { margin-left: -16px; }
.ansprechpartner p { margin: 0; line-height: 1.35; }
.ansprechpartner strong { color: var(--petrol); }
@media (max-width: 380px) { .ansprechpartner { flex-wrap: wrap; } .zahlen li { padding-inline: .5rem; } }
.zeiten { display: grid; gap: .8rem; margin: 1.5rem 0; }
.kontakt__text .zeiten { grid-template-columns: 1fr 1fr; }
.zeiten div { padding: .95em 1.1em; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px -22px rgba(10, 75, 92, .6); }
.zeiten dt { display: flex; align-items: center; gap: .5em; font-weight: 700; line-height: 1.25; color: var(--petrol); }
.zeiten dt img { width: 22px; height: 22px; }
.zeiten dt .punkt { flex: none; margin-inline: .25em; }
.zeiten dd { margin: .25em 0 0; font-size: .94rem; line-height: 1.4; color: var(--text-leise); }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: 28px; border-top: 5px solid var(--sand); background: #fff; color: var(--text); box-shadow: var(--schatten-gross); }
.formular > * { grid-column: 1 / -1; }
.formular > .feld--halb { grid-column: auto; }
.formular__titel { margin-bottom: .1em; font-family: var(--schrift-titel); font-weight: 700; font-size: 1.5rem; color: var(--petrol); }
.formular__unter { margin-bottom: 1em; color: var(--text-leise); }
.feld { margin: 0 0 .85rem; }
.feld label { display: block; margin-bottom: .2em; font-weight: 700; }
.feld label .schrift2 { font-size: .95em; }
.feld input, .feld textarea { box-sizing: border-box; width: 100%; padding: .6em .9em; border: 1.5px solid #d5dfe0; border-radius: 12px; background: #fff; font: inherit; color: inherit; transition: border-color .25s, background .25s, box-shadow .25s; }
.feld input:focus, .feld textarea:focus { outline: 0; border-color: var(--tuerkis); background: #fff; box-shadow: 0 0 0 4px rgba(27, 155, 184, .18); }
.feld--falle { position: absolute; left: -9999px; }
.formular__hinweis { margin-bottom: .9em; font-size: .86rem; line-height: 1.45; color: var(--text-leise); }
.formular__hinweis a, .formular__hinweis a:visited { font-family: inherit; font-size: inherit; }
.formular__senden { width: 100%; }

/* FAQ, Akkordeon aus akkordion.css */
.faq { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(5rem, 9vw, 7.5rem); background: #fff; }
.faq__raster { display: grid; grid-template-columns: 1fr 1.9fr; gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start; }
.faq__kopf { position: sticky; top: 104px; }
.faq__kopf .titel { margin-bottom: .5em; }
.faq__firma { display: block; margin-top: .45em; font-family: var(--schrift); font-size: .92rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--sand-dunkel); }
.acc { min-width: 0; margin: 0; }
.acc .choice { position: relative; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: .65rem; border: 1px solid #ebe3d8; border-radius: 16px; background: var(--creme); overflow: hidden; transition: background .25s, border-color .25s, box-shadow .25s; }
.acc .choice:hover { border-color: var(--sand); }
.acc .choice:has(input.open:checked) { border-color: var(--tuerkis); background: #fff; box-shadow: var(--schatten); }
/* Radiofelder bleiben per Tastatur erreichbar (akkordion.css blendet sie ganz aus) */
.acc input[name="ac"] { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.acc input:focus-visible ~ label:nth-of-type(1) { outline: 3px solid var(--notruf); outline-offset: -3px; border-radius: 16px; }
/* z-index: akkordion.css setzt 100, damit lagen die Fragen beim Scrollen über dem Menü */
.acc label { z-index: auto; padding: .85em 1em .85em 1.15em; border-bottom: 0; background: transparent; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--petrol); }
.acc input.open:checked ~ label { background: transparent; }
.acc label:nth-child(odd) { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.acc label.close { display: flex; align-items: center; width: auto; padding: 0; }
.acc label:nth-child(odd)::after, .acc input.open:checked ~ label.close::after { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin: 0; border-radius: 50%; float: none; font-size: 1.15rem; font-weight: 700; line-height: 1; }
.acc label:nth-child(odd)::after { content: "+"; background: #fff; color: var(--petrol); box-shadow: 0 0 0 1px #ebe3d8; transition: background .25s, color .25s; }
.acc label:hover:nth-child(odd)::after { background: var(--petrol); color: #fff; }
.acc input.open:checked ~ label:nth-child(odd)::after { display: none; }
.acc input.open:checked ~ label.close { padding-right: 1em; }
.acc input.open:checked ~ label.close::after { content: "–"; background: var(--petrol); color: #fff; }
.acc .panel { background: transparent; padding: 0 1.15rem; font-size: .97rem; color: var(--text); }
.acc input.open:checked ~ .panel { padding: 0 1.15rem 1.05rem; animation: faq-auf .35s var(--sanft); }
.acc .panel p { margin-bottom: 0; }
@keyframes faq-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Footer */
.site-footer { position: relative; margin-top: -1px; color: #fff; }
.welle--fuss { position: absolute; top: clamp(-90px, -7vw, -46px); height: clamp(46px, 7vw, 90px); }
.welle--fuss path { fill: var(--petrol-tief); }
.site-footer__innen { background: var(--petrol-tief); padding: 1.6rem 0 1.2rem; }
.footer__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.footer__titel { margin: 0 0 .6em; font-family: var(--schrift-titel); font-size: 1.12rem; font-weight: 700; color: #fff; line-height: 1.3; text-align: left; }
.site-footer a, .site-footer a:visited { font-family: inherit; font-size: inherit; color: #fff; }
.site-footer a:hover { color: #ffe3c4; }
.footer__unten { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 2rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .88rem; }
.footer__unten p { margin: 0; }

/* Cookie-Hinweis in den Farben und der Schrift der Seite */
.cc-window.cc-banner { font-family: var(--schrift); font-size: .95rem; line-height: 1.4; border-top: 3px solid var(--sand); box-shadow: 0 -14px 34px -22px rgba(10, 75, 92, .55); }
.cc-window a.cc-link, .cc-window a.cc-link:visited { font-family: inherit; font-size: inherit; font-weight: 700; color: var(--petrol); opacity: 1; padding: 0 .2em; }
.cc-window a.cc-link:hover { color: var(--notruf-tief); opacity: 1; }
.cc-window a.cc-btn, .cc-window a.cc-btn:visited { font-family: var(--schrift); font-size: .95rem; font-weight: 700; color: #fff; border-radius: 999px; padding: .5em 1.4em; transition: background .25s; }
.cc-window a.cc-btn:hover { background-color: var(--petrol-tief) !important; color: #fff; text-decoration: none; }

/* Rückmeldeseiten des Formulars */
.rueckmeldung { width: min(640px, 100% - 2rem); margin: clamp(2rem, 8vh, 5rem) auto; text-align: center; }
.rueckmeldung img { width: min(300px, 100%); margin: 0 auto 2rem; }
.rueckmeldung .titel { text-align: center; }
.rueckmeldung p a:not(.btn), .rueckmeldung p a:not(.btn):visited { font-family: inherit; font-size: inherit; font-weight: 700; }

/* Schwebender Notfall-Knopf */
a.notruf-knopf, a.notruf-knopf:visited { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; align-items: center; height: 62px; padding-right: 0; border-radius: 999px; background: var(--notruf); color: #fff; text-decoration: none; box-shadow: var(--schatten-gross); opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .4s, transform .4s var(--sanft), visibility .4s, background .25s; }
.notruf-knopf.ist-sichtbar { opacity: 1; visibility: visible; transform: none; }
a.notruf-knopf:hover { background: var(--notruf-tief); color: #fff; }
.notruf-knopf__ring { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; animation: puls 2s infinite; }
.notruf-knopf__ring svg { animation: klingeln 3.6s infinite; }
.notruf-knopf__text { display: block; max-width: 0; overflow: hidden; font-weight: 700; line-height: 1.15; white-space: nowrap; transition: max-width .5s var(--sanft), padding .5s var(--sanft); }
.notruf-knopf__text small { display: block; font-size: .72rem; }
a.notruf-knopf:hover .notruf-knopf__text, a.notruf-knopf:focus-visible .notruf-knopf__text { max-width: 12rem; padding-right: 1.4rem; }

/* Unterseiten */
.seitenkopf { padding: clamp(2rem, 5vw, 4rem) 0; background: linear-gradient(135deg, #e7f5f8 0%, var(--creme) 55%, var(--sand-hell) 100%); }
.seitenkopf:not(.seitenkopf--schmal) { position: relative; display: flex; align-items: center; min-height: clamp(380px, 36vw, 520px); padding: clamp(2.4rem, 5vw, 4rem) 0; overflow: hidden; background: linear-gradient(120deg, #e7f5f8 0%, var(--creme) 60%); }
.seitenkopf:not(.seitenkopf--schmal)::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: calc(52% + 26px); background: var(--sand); opacity: .5; clip-path: ellipse(100% 135% at 100% 50%); }
.seitenkopf__text { position: relative; z-index: 2; max-width: 44%; }
.seitenkopf__text .seitenkopf__titel { font-size: clamp(1.7rem, 3.3vw, 2.55rem); }
.seitenkopf__text .lead:last-child { margin-bottom: 0; }
.seitenkopf__hinweis { margin: 0 0 1.4rem; padding: .3em 0 .3em 1em; border-left: 3px solid var(--sand); font-weight: 700; line-height: 1.45; color: #6e4823; }
.seitenkopf__titel { margin: 0 0 .5em; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.14; color: var(--petrol); text-align: left; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; }
.seitenkopf--schmal { padding: clamp(1.8rem, 4vw, 3.2rem) 0; }
.seitenkopf--schmal .lead { max-width: 820px; margin-bottom: 0; }
.seitenkopf--mittig { text-align: center; }
.seitenkopf__titel--ganz { hyphens: manual; }
.seitenkopf--mittig .seitenkopf__titel { text-align: center; }
.seitenkopf--mittig .knoepfe { justify-content: center; }
.seitenkopf__bild { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 52%; clip-path: ellipse(100% 135% at 100% 50%); }
.seitenkopf__bild img { display: block; width: 100%; height: 100%; object-fit: cover; animation: kopf-zoom 1.8s var(--sanft) both; }
@keyframes kopf-zoom { from { transform: scale(1.07); } to { transform: none; } }
.abschnitt { padding: clamp(2.4rem, 5vw, 4.4rem) 0; }
.abschnitt--creme { background: var(--creme); }
.bildtext { --versatz: 16px; display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: clamp(2.6rem, 6vw, 5.5rem); align-items: center; }
.bildtext--rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); }
.bildtext--rechts > figure { order: 2; }
.bildtext > figure { position: relative; isolation: isolate; margin: 0; }
.bildtext > figure::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px; background: var(--sand); opacity: .45; transform: translate(var(--versatz), var(--versatz)); transition: transform 1s var(--sanft) .35s; }
.bildtext--rechts > figure::before { transform: translate(calc(var(--versatz) * -1), var(--versatz)); }
.js .bildtext > figure:not(.ist-da)::before { transform: none; }
.bildtext > figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: var(--schatten); }
.bild-marke { position: absolute; top: -18px; left: -18px; width: 62px; height: 62px; border: 4px solid #fff; background: var(--petrol); box-shadow: var(--schatten); }
.bildtext--rechts .bild-marke { left: auto; right: -18px; }
.bild-marke svg { fill: #fff; }
.bild-marke .l-symbol__hell { stroke: var(--petrol); }
.bildtext .titel::after { content: ""; display: block; width: 56px; height: 3px; margin-top: .45em; border-radius: 3px; background: var(--sand); }
.bildtext > div > :last-child { margin-bottom: 0; }
.bildtext .haken { gap: .6rem 1.6rem; margin-top: 1.1rem; }
.bildtext .haken li, .haken--kreis li { padding-left: 2em; line-height: 1.4; }
.bildtext .haken li::before, .haken--kreis li::before { left: .36em; top: .4em; z-index: 1; }
.bildtext .haken li::after, .haken--kreis li::after { content: ""; position: absolute; left: 0; top: .03em; width: 1.36em; height: 1.36em; border-radius: 50%; background: var(--eis); }
.bildtext .l-hinweis { display: block; margin: 1.1rem 0 0; padding: .25em 0 .25em 1em; border-left: 3px solid var(--sand); border-radius: 0; background: none; font-size: .95rem; }
.bildtext .l-hinweis + p { margin-top: 1.3rem; }
.bildtext .handzitat { margin-top: .6em; }
.job-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: stretch; }
.job-karte { padding: clamp(1.4rem, 3vw, 2.4rem); border-top: 5px solid var(--sand); border-radius: 24px; background: #fff; box-shadow: var(--schatten-gross); }
.job-karte .haken { gap: .75rem; font-size: 1rem; }
.vorteil-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.vorteil { position: relative; display: flex; flex-direction: column; min-height: 225px; overflow: hidden; padding: 1.5rem 1.4rem; border: 1px solid #efe6da; border-radius: 22px; background: #fff; transition: box-shadow .4s, border-color .3s; }
.js .vorteil.zeige { transition: opacity .9s var(--sanft), transform .9s var(--sanft), box-shadow .4s, border-color .3s; }
.vorteil:hover { border-color: var(--sand); box-shadow: var(--schatten); }
.vorteil--breit { grid-column: span 2; }
.vorteil--petrol { justify-content: flex-end; border: 0; background: linear-gradient(140deg, var(--petrol-tief), var(--tuerkis)); color: #fff; }
.vorteil--sand { justify-content: flex-end; border: 0; background: var(--sand-hell); }
.vorteil__symbol { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .9rem; border-radius: 50%; background: var(--eis); color: var(--petrol); }
.vorteil__symbol .sym, .sym { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vorteil--petrol .vorteil__symbol { background: rgba(255, 255, 255, .16); color: #fff; }
.vorteil__wert { margin-bottom: .3rem; font-family: var(--schrift-titel); font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--sand-dunkel); }
.vorteil__team { margin-bottom: .9rem; }
.vorteil .vorteil__titel { margin: 0 0 .25em; font-family: var(--schrift-titel); font-size: 1.22rem; font-weight: 700; line-height: 1.25; color: var(--petrol); text-align: left; }
.vorteil--petrol .vorteil__titel, .vorteil--foto .vorteil__titel { font-size: 1.7rem; color: #fff; }
.vorteil p { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--text-leise); }
.vorteil--petrol p, .vorteil--foto p { color: #fff; }
.vorteil--sand p { color: var(--text); }
.vorteil--foto { justify-content: flex-end; border: 0; background: var(--petrol-tief); color: #fff; }
.vorteil--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vorteil--foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 75, 92, 0) 22%, rgba(10, 75, 92, .78) 58%, rgba(10, 75, 92, .96) 100%); }
.vorteil--foto > h3, .vorteil--foto > p { position: relative; z-index: 1; }
.team-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.mitglied { border: 0; padding: .8rem; border-radius: 22px; background: #fff; text-align: center; box-shadow: var(--schatten); }
.mitglied img { width: 100%; border-radius: 16px; }
.mitglied__name { margin: .6rem 0 0; font-family: var(--schrift-titel); font-size: 1.1rem; font-weight: 700; color: var(--petrol); text-align: center; }
.mitglied p { margin: 0; font-size: .9rem; color: var(--text-leise); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.kachel { border: 0; padding: 1.6rem 1.4rem; border-radius: 22px; background: var(--creme); transition: transform .4s var(--sanft), background .3s, box-shadow .4s; }
.kachel:hover { transform: translateY(-5px); background: var(--eis); box-shadow: var(--schatten); }
.kachel p { margin: 0; color: var(--text-leise); }
.kachel__logo { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 0 .7rem; }
.kachel--logo .kachel__titel { margin: 0; }
.kachel__titel { margin: 0 0 .25em; font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 700; color: var(--petrol); text-align: left; }
.bildkarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.bildkarten li { border: 0; }
.bildkarten img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 22px; box-shadow: var(--schatten); }
.bildkarten .kachel__titel { margin-top: .6rem; text-align: center; }
.kontaktliste { display: grid; gap: 1rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.kontaktliste li { display: flex; gap: .8rem; align-items: flex-start; border: 0; }
.kontaktliste b { display: block; color: var(--petrol); }
.kontaktliste a, .kontaktliste a:visited { font-family: inherit; font-size: inherit; color: var(--petrol); }
.zeiten--hell div { background: var(--creme); }
.zeiten--hell dt { color: var(--petrol); }
.rechtstext { overflow-wrap: anywhere; hyphens: auto; }
.rechtstext a, .rechtstext a:visited { font-family: inherit; font-size: inherit; }
.rechtstext__titel { margin: 1.6em 0 .4em; font-family: var(--schrift-titel); font-size: 1.45rem; font-weight: 700; color: var(--petrol); line-height: 1.25; text-align: left; }
.rechtstext__titel:first-child { margin-top: 0; }
.rechtstext__unter { margin: 1.2em 0 .3em; font-size: 1.08rem; font-weight: 700; color: var(--petrol); line-height: 1.3; text-align: left; }
.rechtstext .haken { margin-bottom: 1em; }
.ki-bilder { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2em; padding: 0; list-style: none; }
.ki-bilder li { border: 0; }
.ki-bilder img { display: block; width: auto; height: 74px; border: 1px solid #e9e0d3; border-radius: 8px; }
main > section:last-child { padding-bottom: clamp(5.2rem, 9vw, 7.5rem); }
.cta-band { padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(5.2rem, 9vw, 7.5rem); background: linear-gradient(160deg, #e7f5f8 0%, var(--creme) 52%, var(--sand-hell) 100%); }
.cta-karte { display: grid; grid-template-columns: 1fr auto; gap: 1.6rem clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 4vw, 3rem); border-top: 5px solid var(--sand); border-radius: 28px; background: #fff; box-shadow: var(--schatten-gross); }
.cta-karte .ansprechpartner { margin: 0 0 1rem; }
.cta-karte__knoepfe { display: grid; gap: .7rem; }
.cta-band .schrift6 { display: block; margin-bottom: .4em; font-family: var(--schrift-titel); font-weight: 700; line-height: 1.2; text-align: left; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--petrol); letter-spacing: -.01em; }
.cta-band p { margin: 0; }
.cta-band .cta-karte__text > p { max-width: 58ch; }
.section--bewerben { padding: clamp(2.8rem, 6vw, 4.6rem) 0 clamp(5.2rem, 9vw, 7.5rem); background: linear-gradient(160deg, #e7f5f8 0%, var(--creme) 52%, var(--sand-hell) 100%); scroll-margin-top: 90px; }
.bewerben { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); overflow: hidden; border-radius: 32px; background: #fff; box-shadow: var(--schatten-gross); }
.bewerben__seite { background: var(--creme-2); }
.bewerben__bild { margin: 0; }
.bewerben__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 0; }
.bewerben__text { padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1.3rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.4rem); }
.bewerben .handzitat { margin: 0 0 .9em; font-size: clamp(1.3rem, 2.1vw, 1.6rem); }
.bewerben .kontaktliste { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin: 0; padding-top: 1.1rem; border-top: 1px solid rgba(140, 94, 51, .22); }
.bewerben .kontaktliste li { min-width: 0; }
.bewerben .kontaktliste a { overflow-wrap: anywhere; }
.schritte { display: grid; gap: 1rem; margin: 0 0 1.3rem; padding: 0; list-style: none; counter-reset: schritt; }
.schritte li { position: relative; min-height: 2.2rem; padding-left: 3rem; border: 0; counter-increment: schritt; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--petrol); color: #fff; font-size: .95rem; font-weight: 800; }
.schritte li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.05rem - 1px); top: 2.3rem; bottom: -.9rem; width: 2px; background: var(--sand); opacity: .6; }
.schritte b { display: block; font-size: 1.04rem; line-height: 1.3; color: var(--petrol); }
.schritte span { font-size: .95rem; line-height: 1.4; color: var(--text-leise); }
.formular--bewerbung { align-content: start; padding: clamp(1.5rem, 3.4vw, 2.8rem); border-top: 0; border-radius: 0; background: none; box-shadow: none; }
.formular--bewerbung .feld input:not([type="file"]), .formular--bewerbung .feld textarea { border-color: #ebe1d3; background: var(--creme); }
.formular--bewerbung .feld input:not([type="file"]):focus, .formular--bewerbung .feld textarea:focus { border-color: var(--tuerkis); background: #fff; }
.formular--bewerbung .feld textarea { min-height: 4.6em; }
.dateiwahl { position: relative; }
.dateiwahl__flaeche { display: none; }
.js .dateiwahl__flaeche { display: flex; align-items: center; gap: .8rem; margin: 0; padding: .8rem 1rem; border: 2px dashed #a9cfd8; border-radius: 14px; background: #f3fafb; font-weight: 400; cursor: pointer; transition: border-color .25s, background .25s; }
.js .dateiwahl__flaeche:hover, .dateiwahl__flaeche.ist-darueber { border-color: var(--tuerkis); background: var(--eis); }
.dateiwahl__flaeche .vorteil__symbol { width: 42px; height: 42px; margin: 0; }
.dateiwahl__flaeche b { color: var(--petrol); }
.js .dateiwahl input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.dateiwahl input[type="file"]:focus-visible + .dateiwahl__flaeche { border-color: var(--tuerkis); box-shadow: 0 0 0 4px rgba(27, 155, 184, .18); }
.dateiwahl__hinweis { margin: .45em 0 0; font-size: .86rem; line-height: 1.45; color: var(--text-leise); }
.dateiwahl__liste { display: grid; gap: .35rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.dateiwahl__liste[hidden], .dateiwahl__fehler[hidden] { display: none; }
.dateiwahl__liste li { display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem .3rem .8rem; border: 0; border-radius: 10px; background: var(--eis); font-size: .92rem; line-height: 1.3; }
.dateiwahl__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dateiwahl__groesse { flex: none; color: var(--text-leise); font-size: .84rem; }
.dateiwahl__weg { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--petrol); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.dateiwahl__weg:hover { background: var(--petrol); color: #fff; }
.dateiwahl__fehler { margin: .5em 0 0; font-size: .9rem; font-weight: 700; color: var(--notruf); }
@media (hover: none) { .dateiwahl__ziehen { display: none; } }
@media (max-width: 1100px) {
  .vorteil-raster { grid-template-columns: repeat(2, 1fr); }
  .vorteil { min-height: 200px; }
  .bewerben { grid-template-columns: 1fr; }
  .bewerben__bild img { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .vorteil-raster { grid-template-columns: 1fr; }
  .vorteil { min-height: 0; }
  .vorteil--breit { grid-column: auto; }
  .vorteil--foto { min-height: 300px; }
}

/* Tablet und kleiner */
@media (max-width: 1260px) {
  .kopfzeile, .site-header { display: none; }
  .mobilleiste { position: sticky; top: 0; z-index: 110; display: flex; align-items: center; gap: .35rem; padding: .35rem .7rem; background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -24px rgba(10, 75, 92, .7); }
  .mobilleiste__logo { flex: 1; min-width: 0; }
  .mobilleiste__logo img { width: min(218px, 100%); }
  .mobilleiste__logo img.logo--quer { width: min(170px, 100%); }
  .mobilleiste__link { display: grid; place-items: center; width: 44px; height: 44px; }
  .nav-toggle { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--eis); color: var(--petrol); cursor: pointer; }
  .js .site-header.ist-offen { display: block; position: fixed; top: 58px; left: 0; right: 0; bottom: 0; z-index: 105; overflow-y: auto; background: #fff; }
  .site-header .logo { display: none; }
  .nav__schrift { display: block; margin-top: 1rem; text-align: center; }
  .nav__schrift .schrift-knopf { padding: .45em 1.2em; font-size: 1.05rem; }
  .header__innen { display: block; padding: 1rem 0 2rem; }
  .nav { display: block; }
  a.nav__link, a.nav__link:visited, button.nav__link { width: 100%; padding: .75em 1em; font-size: 1.1rem; text-align: left; }
  a.nav__link--kontakt, a.nav__link--kontakt:visited { margin-top: .6rem; text-align: center; }
  .sub { position: static; min-width: 0; margin: 0 0 .4rem 1rem; padding: 0; box-shadow: none; display: none; opacity: 1; visibility: visible; transform: none; }
  .nav__auf[aria-expanded="true"] + .sub { display: block; }
  .hat-sub:hover .sub, .hat-sub:focus-within .sub { opacity: 1; }
}
@media (max-width: 900px) {
  .hero__kopf { grid-template-columns: 1fr; padding-bottom: 1.4rem; }
  .siegel, .siegel:visited { display: none; }
  .willkommen__raster, .gebiet__raster, .kontakt__raster, .jobkarte { grid-template-columns: 1fr; }
  .willkommen__bild { order: 2; }
  .job-raster, .cta-karte { grid-template-columns: 1fr; }
  .bildtext, .bildtext--rechts { --versatz: 10px; grid-template-columns: 1fr; }
  .bildtext--rechts > figure { order: 0; }
  .bildtext > figure { width: calc(100% - 10px); max-width: 520px; }
  .bildtext--rechts > figure { margin-left: 10px; }
  .bild-marke { top: -14px; left: -8px; width: 54px; height: 54px; }
  .bildtext--rechts .bild-marke { right: -8px; }
  .seitenkopf:not(.seitenkopf--schmal) { display: block; min-height: 0; padding: 0 0 2rem; }
  .seitenkopf:not(.seitenkopf--schmal)::before { display: none; }
  .seitenkopf__bild { position: relative; width: 100%; height: 58vw; max-height: 380px; margin-bottom: 1.4rem; clip-path: ellipse(120% 100% at 50% 0%); }
  .seitenkopf__text { max-width: none; }
  .bildkarten { grid-template-columns: 1fr; }
  .faq__raster { grid-template-columns: 1fr; }
  .faq__kopf { position: static; }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .l-raster { display: block; }
  .l-punkt { display: block; margin-bottom: .6rem; }
  .l-kopf { margin-bottom: .4rem; }
  .l-knopf:hover, .l-knopf[aria-expanded="true"] { transform: none; }
  .js .l-inhalt { display: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .js .l-inhalt.ist-offen { display: flex; margin-bottom: 1rem; }
  .l-inhalt img { height: 52vw; max-height: 340px; }
  .haken { grid-template-columns: 1fr; }
  .gebiet__hintergrund { inset: 1rem auto auto -55%; width: 210%; height: auto; transform: none; }
  .notfall__raster { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .notfall__raster .titel { text-align: center; }
  .footer__raster { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 640px) {
  html { font-size: 106.25%; scroll-padding-top: 76px; }
  .panorama { gap: 4px; height: 340px; padding-inline: 6px; }
  .panorama__teil { border-radius: 44px 44px 0 0; }
  .panorama__teil.ist-aktiv { flex-grow: 6; }
  .panorama__teil figcaption { bottom: 84px; font-size: .8rem; }
  .knoepfe { flex-direction: column; align-items: stretch; }
  .leitung { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leitung .person:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); }
  .zitat-sticker { width: 104px; height: 104px; font-size: .72rem; }
  .kontakt__text .zeiten, .formular { grid-template-columns: 1fr; }
  .ansprechpartner__bilder img { width: 58px; height: 58px; }
  .sprechblase { left: 30%; width: 230px; font-size: .86rem; }
  .strasse { height: 300px; }
  .strasse__stadt { height: 55%; }
  .stadtteile button { font-size: .9rem; }
  .k-punkt circle, .k-punkt text { transform: scale(1.3); }
}

/* Desktop: Kopf, Text und Bilder passen zusammen auf einen Bildschirm */
@media (min-width: 901px) {
  :root { --kopf-hoehe: 136px; --welle: clamp(38px, 5vh, 64px); --siegel: clamp(108px, 15vh, 148px); }
  .hero { display: flex; flex-direction: column; box-sizing: border-box; min-height: calc(100vh - var(--kopf-hoehe)); min-height: calc(100svh - var(--kopf-hoehe)); padding-top: clamp(.7rem, 2.2vh, 2rem); }
  .hero__kopf { flex: none; padding-bottom: clamp(.8rem, 2.4vh, 1.8rem); }
  .hero__titel .kicker { margin-bottom: .4em; }
  .hero__headline { font-size: clamp(1.9rem, min(3.9vw, 6.2vh), 3.15rem); }
  .lead { font-size: clamp(.95rem, 2vh, 1.1rem); margin-bottom: .8em; }
  .panorama { flex: 1 1 230px; height: auto; min-height: 0; }
  .panorama__teil.ist-aktiv { flex-grow: 1.3; }
  .panorama__teil img { object-position: 50% 30%; }
  .panorama__teil.ist-aktiv img { transform: scale(1.03); }
  .panorama__teil figcaption { bottom: calc(var(--welle) + 12px); }
  .schwung { height: var(--welle); }
  .siegel, .siegel:visited { width: var(--siegel); height: var(--siegel); bottom: calc(var(--siegel) * -.86); }
}
@media (min-width: 901px) and (max-width: 1260px) {
  :root { --kopf-hoehe: 76px; }
}

/* Keine Bewegung auf Wunsch */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .zeige, .js .sprechblase { opacity: 1; transform: none; }
  .js .strasse__auto { transform: none; left: 30%; }
}