@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/open-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/open-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/open-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/open-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/open-sans-latin-400-italic.woff2) format("woff2"); }

:root { --rot: #e40522; --rot-dunkel: #c2041d; --schwarz: #000; --titel: #000; --grau-titel: #595959; --grau-menue: #4c4c4c; --grau-eyebrow: #707070; --flaeche: #f7f7f7; --weiss: #fff; --fuss-text: rgba(255,255,255,.6); --serif-titel: Arial, Helvetica, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.6 "Open Sans", Arial, Helvetica, sans-serif; color: #000; background: #fff; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: #2f2f2f; }
a:hover { color: var(--rot); }
p { margin: 0 0 20px; }
strong, b { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif-titel); font-weight: 400; color: var(--titel); margin: 0 0 20px; overflow-wrap: break-word; }
h1 { font-size: 40px; line-height: 44px; text-transform: uppercase; margin-bottom: 30px; }
h2 { font-size: 28px; line-height: 1.4; }
h3 { font-size: 24px; line-height: 1.4; }
h4 { font-size: 18px; line-height: 1.4; }
h5 { font-size: 16px; line-height: 1.4; }
h6 { font-size: 14px; line-height: 1.4; }
.container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.raster { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.raster > * { padding: 0 15px; width: 100%; }
.sp-2 { width: 16.6667%; } .sp-3 { width: 25%; } .sp-4 { width: 33.3333%; } .sp-6 { width: 50%; } .sp-8 { width: 66.6667%; } .sp-9 { width: 75%; } .sp-10 { width: 83.3333%; } .sp-12 { width: 100%; }
.mitte { text-align: center; }
.mitte .titel { text-align: center; }
.mitte .titel .linie { margin-left: auto; margin-right: auto; }
.raster.mittig { align-items: center; }
.versatz-2 { margin-left: 16.6667%; }
.text-arial { font-family: var(--serif-titel); font-size: 16px; line-height: 22.4px; }
.knopf-zeile { margin: 60px 0 0; }
.knopf-zeile.mitte { margin-top: 0; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -9999px; top: 0; background: var(--rot); color: #fff; padding: 8px 12px; z-index: 100; }
.sprung:focus { left: 10px; top: 10px; }

.text ul { list-style: none; margin: 0 0 20px; padding: 0 0 0 20px; }
.text ul li { position: relative; line-height: 1.8; }
.text ul li::before { content: ""; position: absolute; left: -20px; top: 10px; width: 7px; height: 7px; border-right: 2px solid var(--rot); border-top: 2px solid var(--rot); transform: rotate(45deg); }
.text ol { margin: 0 0 20px; padding-left: 20px; }
.text h4 { margin-bottom: 20px; }
.text img { margin-bottom: 20px; }
.text table { border-collapse: collapse; width: 100%; margin: 0 0 20px; }
.text th, .text td { text-align: left; vertical-align: top; padding: 8px 10px; border: 1px solid #e5e5e5; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.text blockquote { margin: 0 0 20px; padding-left: 20px; border-left: 3px solid var(--rot); }
.text hr { border: 0; border-top: 1px solid #e5e5e5; margin: 30px 0; }

.titel { margin-bottom: 30px; }
.titel .eyebrow { display: block; font: 400 20px/30px "Open Sans", Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--grau-eyebrow); margin: 0 0 10px; }
.titel h1, .titel h2, .titel h3 { font-size: 40px; line-height: 44px; text-transform: uppercase; color: var(--titel); margin: 0 0 14px; }
.titel .linie { display: block; width: 30px; height: 2px; background: var(--rot); margin: 0 0 30px; }
.titel.klein h2, .titel.klein h3 { font-size: 28px; line-height: 1.3; }
.titel.rot .eyebrow { color: var(--rot); }
.titel.mitte { text-align: center; }
.titel.mitte .linie { margin-left: auto; margin-right: auto; }
.titel.hell .eyebrow, .titel.hell h1, .titel.hell h2, .titel.hell h3 { color: #fff; }
.titel.linie-rechts h2 { display: flex; align-items: center; font-size: 30px; line-height: 36px; margin-bottom: 30px; }
.titel.linie-rechts h2::after { content: ""; flex: 1 1 20px; min-width: 20px; max-width: 60px; height: 1px; background: #e5e5e5; margin-left: 20px; }
.titel .nachtext { font-size: 14px; line-height: 22.4px; margin: -5px 0 20px; }

.knopf { display: inline-block; font: 400 14px/18px "Open Sans", Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; text-decoration: none; padding: 10px 20px; background: var(--rot); color: #fff; border: 1px solid #ececec; cursor: pointer; transition: background .2s; }
.knopf:hover, .knopf:focus { background: var(--rot-dunkel); color: #fff; }
.knopf.breit { display: block; width: 100%; text-align: center; }
.knopf-umriss { display: inline-block; font: 400 14px/1.2 "Open Sans", Arial, sans-serif; text-decoration: none; padding: 13px 19px; background: transparent; color: #000; border: 2px solid #000; transition: all .2s; }
.knopf-umriss:hover, .knopf-umriss:focus { background: #000; color: #fff; }
.knopf-umriss.hell { color: #fff; border-color: #fff; }
.knopf-umriss.hell:hover, .knopf-umriss.hell:focus { background: #fff; color: #000; }
.knopf-dunkel { display: inline-block; font: 400 14px/1.2 "Open Sans", Arial, sans-serif; text-decoration: none; padding: 14px 20px; background: #2a2a2a; color: #fff; border: 1px solid transparent; transition: background .2s; }
.knopf-dunkel:hover, .knopf-dunkel:focus { background: #000; color: #fff; }

.kasten { background: var(--flaeche); padding: 30px; }
.karte { position: relative; background: #fff; padding: 25px 20px 20px; text-align: center; height: 100%; }
.karte h3, .karte h4 { font-family: var(--serif-titel); font-size: 24px; line-height: 1.4; text-transform: uppercase; color: var(--titel); margin-bottom: 20px; }
.karte p:last-child { margin-bottom: 0; }
.karten { align-items: stretch; }
.karten > * { display: flex; }
.karten .karte { width: 100%; }
.karte.mit-symbol { margin-top: 25px; padding-top: 40px; }
.karte .symbol { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; background: var(--flaeche); display: flex; align-items: center; justify-content: center; color: var(--rot); }
.karte .symbol svg { width: 24px; height: 24px; fill: currentColor; }

.seitenkasten { background: var(--flaeche); margin-bottom: 35px; }
.seitenkasten img { width: 100%; }
.seitenkasten .inhalt { padding: 20px; }
.seitenkasten h2, .seitenkasten h3 { font: 400 24px/30px var(--serif-titel); text-transform: uppercase; color: var(--rot); margin: 0 0 15px; }
.seitenkasten p:last-child { margin-bottom: 0; }
.seitenkasten .knopf-umriss { margin-top: 10px; }
.seitenkasten ul { list-style: none; margin: 0 0 20px; padding: 0 0 0 20px; }
.seitenkasten ul li { position: relative; line-height: 1.8; }
.seitenkasten ul li::before { content: ""; position: absolute; left: -20px; top: 10px; width: 7px; height: 7px; border-right: 2px solid var(--rot); border-top: 2px solid var(--rot); transform: rotate(45deg); }

.bildstapel { display: grid; gap: 10px; }
.bildstapel img { width: 100%; }
hr.trennlinie { border: 0; border-top: 1px solid #e5e5e5; margin: 40px 0; }
.gross-bild { margin-bottom: 40px; }
.gross-bild img { width: 100%; }

.abschnitt { padding: 50px 0; }
.abschnitt-grau { background: var(--flaeche); padding: 40px 0; }
.abschnitt-bild { position: relative; background-position: center; background-size: cover; color: #fff; padding: 54px 0; }
.abschnitt-bild.wehren { background-image: url(../img/hintergrund-selbstverteidigung.webp); min-height: 450px; display: flex; align-items: center; }
.abschnitt-bild.wehren > .container { width: 100%; }
.abschnitt.stimmen { padding: 62px 0 0; }
.abschnitt.blog-teaser { padding: 54px 0 0; }
.abschnitt.intro .text > p:last-child { margin-bottom: 0; }
.abschnitt.oben { padding-top: 20px; }
.rechtstext { max-width: 1140px; }
.rechtstext h2 { font-size: 28px; line-height: 1.4; text-transform: none; margin: 30px 0 15px; }
.rechtstext h2.untertitel { font-size: 36px; margin-top: 10px; }
.rechtstext h3 { font-size: 22px; margin: 25px 0 12px; }
.rechtstext h4 { font-size: 18px; margin: 25px 0 12px; }
.rechtstext .vorzeile { color: var(--grau-eyebrow); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px; }
.rechtstext .stand { color: #6b6b6b; }
.hinweis-klein { font-size: 14px; color: #6b6b6b; margin-top: 15px; }
.antwort .kasten { margin-bottom: 20px; }
.antwort .kasten ul { margin-bottom: 0; }
.antwort .kasten p:last-child { margin-bottom: 0; }
.formular label:not(.nur-lesen):not(.einwilligung):not(.termin) { font-size: 14px; margin-bottom: 4px; }
.formular textarea { width: 100%; }
.text .untertitel { font-size: 28px; line-height: 1.4; text-transform: none; }
.abschnitt-bild::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.abschnitt-bild > .container { position: relative; }
.abschnitt-bild p, .abschnitt-bild h5 { color: #fff; }
.abstand-oben { padding-top: 50px; }
.abstand-unten { padding-bottom: 50px; }

.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.galerie a, .galerie img { display: block; }
.galerie img { width: 100%; }

.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin: 0 0 20px; }
.logos a { display: flex; align-items: center; justify-content: center; background: #fff; padding: 20px; }
.logos img { max-width: 100%; height: auto; }

.team-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; }
.team-karte { background: #fff; }
.team-karte img { width: 100%; }
.team-karte h3 { font: 400 24px/33.6px var(--serif-titel); color: var(--rot); text-transform: none; padding: 35px 15px 0; margin: 0 0 10px; }
.team-karte .trenner { height: 1px; background: #e5e5e5; margin: 0 0 35px; }
.team-karte .text { padding: 0 15px 30px; }
.team-karte p { margin: 0; }

.zitate { max-width: 750px; margin: 0 auto; text-align: center; position: relative; }
.zitate .zitat { display: none; }
.zitate .zitat.aktiv { display: block; }
.zitate .sterne { color: var(--rot); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.zitate .sterne svg { width: 14px; height: 14px; fill: currentColor; vertical-align: middle; }
.zitate blockquote { margin: 0 0 20px; padding: 0; border: 0; font-style: normal; }
.zitate footer { font-size: 16px; }
.zitate footer strong { font-weight: 700; }
.zitate footer span { color: #6b6b6b; }
.zitate .punkte { margin: 24px 0 0; }

.blog-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; align-items: start; }
.blog-karte { background: var(--flaeche); }
.blog-karte[hidden] { display: none; }
.blog-karte .bild { display: block; }
.blog-karte img { width: 100%; }
.blog-karte .inhalt { padding: 25px 15px 20px; }
.blog-karte h3 { font-family: var(--serif-titel); font-size: 28px; line-height: 1.4; color: var(--titel); margin: 0 0 15px; }
.blog-karte h3 a { color: inherit; text-decoration: none; }
.blog-karte h3 a:hover { color: var(--rot); }
.blog-karte p { font-size: 16px; margin-bottom: 20px; }
.punkte { display: flex; justify-content: center; gap: 14px; margin: 0 0 24px; }
.punkte[hidden] { display: none; }
.punkte button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: #d0d0d0; padding: 0; cursor: pointer; }
.punkte button.aktiv { background: #000; }
.blog-liste .blog-eintrag { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; padding: 30px 0; border-bottom: 1px solid #e5e5e5; }
.blog-liste .blog-eintrag:last-child { border-bottom: 0; }
.blog-liste .blog-eintrag .bild { flex: 0 0 40%; }
.blog-liste .blog-eintrag .inhalt { flex: 1 1 300px; }
.blog-liste h2 { font-size: 28px; line-height: 1.1; color: var(--titel); margin: 0 0 15px; }
.blog-liste .anriss { font-size: 24px; line-height: 1.4; color: var(--grau-titel); margin-bottom: 20px; }
.beitrag { padding-top: 0; }
.beitrag-bild { position: relative; margin-bottom: 30px; }
.beitrag-bild img { width: 100%; }
.beitrag-bild .datum-marke { position: absolute; top: 0; left: 15px; background: #fff; padding: 8px 10px 6px; text-align: center; font: 700 20px/1 var(--serif-titel); color: #000; }
.beitrag-bild .datum-marke small { display: block; font: 400 11px/1.2 "Open Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.beitrag-bild .kategorien { position: absolute; left: 15px; bottom: 0; background: var(--rot); color: #fff; font-size: 12px; line-height: 1.2; padding: 6px 10px; }
.beitrag h1 { font: 400 28px/1.4 var(--serif-titel); text-transform: none; color: var(--titel); margin: 0 0 20px; }
.beitrag-text h2 { font-size: 24px; line-height: 1.4; text-transform: none; margin: 30px 0 15px; }
.beitrag-text h3 { font-size: 20px; margin: 25px 0 12px; }
.beitrag-text h4 { font-size: 18px; margin: 25px 0 12px; }
.beitrag-text img { margin: 0 0 20px; }
.seitenleiste h4 { font: 400 14px/1.4 var(--serif-titel); letter-spacing: 2px; text-transform: uppercase; color: var(--titel); margin: 0 0 20px; }
.seitenleiste .mini { display: flex; gap: 12px; align-items: flex-start; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid #e5e5e5; }
.seitenleiste .mini:last-child { border-bottom: 0; }
.seitenleiste .mini img { flex: 0 0 60px; width: 60px; height: 60px; object-fit: cover; }
.seitenleiste .mini a { font-size: 12px; line-height: 1.4; color: #000; text-decoration: none; display: block; }
.seitenleiste .mini a:hover { color: var(--rot); }
.seitenleiste .mini p { font-size: 12px; line-height: 1.4; margin: 4px 0 0; color: #444; }

.formular label { display: block; font-size: 14px; margin-bottom: 6px; }
.formular .feld { margin-bottom: 10px; }
.formular .feld-gruppe { display: flex; gap: 5px; align-items: flex-end; }
.formular .feld-gruppe .feld { flex: 1; }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular select, .formular textarea { width: 100%; height: 40px; font: 400 14px/18px "Open Sans", Arial, sans-serif; color: #000; background: #fff; border: 1px solid rgba(129,129,129,.25); padding: 0 10px; border-radius: 0; }
.formular input::placeholder, .formular textarea::placeholder { color: #767676; opacity: 1; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--rot); outline-offset: 0; border-color: var(--rot); }
.formular textarea { height: auto; min-height: 232px; padding: 10px; line-height: 21px; resize: vertical; }
.formular .auswahl { margin: 0 0 10px; padding: 0 0 0 10px; border: 0; min-width: 0; }
.formular .auswahl legend, .formular .auswahl p { padding: 0; margin: 0 0 5px; font-size: 14px; line-height: 22.4px; }
.formular .auswahl label { display: block; font-size: 14px; line-height: 22.4px; margin: 0 0 5px; cursor: pointer; }
.formular .auswahl input { margin: 0 6px 0 0; vertical-align: -1px; }
.formular .termine .termin-liste { margin: 0; }
.formular select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 12px; padding-right: 30px; }
.formular .hinweis { font-size: 14px; line-height: 22.4px; padding-left: 10px; margin: 0 0 15px; }
.formular .einwilligung { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 22.4px; padding-left: 10px; margin-bottom: 15px; cursor: pointer; }
.formular .einwilligung input { margin: 4px 0 0; flex: 0 0 auto; }
.formular .pflicht { color: inherit; }
.probe-kasten .titel { margin-bottom: 20px; }
.probe-kasten .titel h2 { margin-bottom: 0; }
.formular .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .fehler-box { background: #fff3f4; border: 1px solid var(--rot); color: #7a0010; padding: 10px 12px; margin-bottom: 15px; font-size: 14px; }
.formular button.knopf { width: 100%; height: 40px; }
.formular .termine .platzhalter { font-size: 14px; color: #6b6b6b; margin: 0 0 8px; }

.plan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 70px; }
.plan .tag h3 { background: var(--rot); color: #fff; text-align: center; font: 400 16px/48px "Open Sans", Arial, sans-serif; text-transform: uppercase; margin: 0 0 4px; }
.plan .eintrag { background: var(--flaeche); text-align: center; padding: 16px 10px 14px; margin-bottom: 4px; }
.plan .eintrag .zeit { font-size: 16px; color: #000; margin: 0; }
.plan .eintrag .gruppe { margin: 0; color: var(--rot); }

.kontakt-daten .info { display: flex; gap: 15px; align-items: flex-start; margin: 0 0 30px; }
.kontakt-daten .info img { flex: 0 0 40px; width: 40px; height: 40px; }
.kontakt-daten .info p { margin: 0; }
.kontakt-daten .info a { text-decoration: none; }
.kontakt-daten .info .tel { color: var(--rot); }
.kontakt-daten .info .mail { font-weight: 700; color: #000; }
.social { display: flex; gap: 6px; margin: 30px 0 0; }
.social a { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; }
.social a svg { width: 18px; height: 18px; fill: currentColor; }
.social .facebook { background: #3b5998; }
.social .instagram { background: #a0522d; }
.social a:hover { opacity: .85; color: #fff; }
.orte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
.orte .ort { background: var(--flaeche); padding: 30px; }
.orte .ort h3 { font-family: var(--serif-titel); font-size: 20px; text-transform: uppercase; margin-bottom: 10px; }
.orte .ort p { margin-bottom: 10px; }
.orte .ort a { display: inline-block; margin-top: 6px; }

.lageplan { margin: 0 0 15px; }
.lageplan img { display: block; width: 100%; height: auto; border: 1px solid #dedede; }
.lageplan figcaption { font-size: 12px; line-height: 1.4; color: #595959; margin-top: 5px; text-align: right; }
.orte .ort .lageplan figcaption a { display: inline; margin-top: 0; color: inherit; text-decoration: underline; }

.topbar { background: #000; color: #fff; font-size: 12px; line-height: 42px; height: 42px; letter-spacing: .3px; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--rot); }
.topbar .rechts { text-transform: uppercase; }
.topbar .symbol { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin: 0 3px 0 5px; fill: currentColor; }
.kopf { position: relative; z-index: 20; background: #fff; }
.kopf .container { display: flex; align-items: center; justify-content: space-between; height: 120px; }
.kopf .logo { display: block; }
.kopf .logo img { width: 226px; height: 75px; object-fit: contain; }
.nav { display: flex; align-items: center; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.nav > ul > li { position: relative; }
.nav > ul > li > a { display: block; font: 700 13px/120px var(--serif-titel); letter-spacing: .5px; text-transform: uppercase; color: var(--grau-menue); text-decoration: none; padding: 0 13px; white-space: nowrap; }
.nav > ul > li > a:hover, .nav > ul > li.aktiv > a { color: var(--rot); }
.nav > ul > li.hat-kinder > a::after { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 6px; opacity: .6; }
.nav > ul > li.callto > a { background: var(--rot); color: #fff; font: 400 14px/18px "Open Sans", Arial, sans-serif; letter-spacing: .3px; padding: 11px 21px; margin: 0 13px; }
.nav > ul > li.callto > a:hover { background: var(--rot-dunkel); }
.nav .unter { display: none; position: absolute; left: 0; top: 100%; min-width: 250px; background: #171717; padding: 12px 0; margin: 0; flex-direction: column; align-items: stretch; z-index: 30; }
.nav li:hover > .unter, .nav li:focus-within > .unter, .nav li.offen > .unter { display: flex; }
.nav .unter li { display: block; }
.nav .unter a { display: block; font: 400 14px/26px "Open Sans", Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; color: rgba(255,255,255,.8); text-decoration: none; padding: 6px 25px; white-space: nowrap; }
.nav .unter a:hover { color: #fff; background: rgba(255,255,255,.06); }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: rgba(0,0,0,.7); }
.burger svg { width: 26px; height: 26px; fill: currentColor; display: block; }

.hero { position: relative; height: 650px; background: #222 url(../img/hero-eigenschutz.webp) center/cover no-repeat; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(82deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.62) 51.6%, rgba(0,0,0,0) 52.1%); }
.hero .container { position: relative; height: 100%; }
.hero .inhalt { position: absolute; left: 15px; top: 266px; }
.hero .zeile1 { font: 600 60px/58px var(--serif-titel); color: var(--rot); text-transform: uppercase; margin: 0 0 8px; }
.hero .zeile2 { font: 500 46px/44px var(--serif-titel); color: #fff; text-transform: uppercase; margin: 0 0 35px; }
.hero .knopf-hero { display: inline-block; font: 400 20px/16px var(--serif-titel); text-transform: uppercase; color: #fff; background: var(--rot); text-decoration: none; padding: 15px 30px; border: 1px solid transparent; }
.hero .knopf-hero:hover { background: var(--rot-dunkel); color: #fff; }

.titelbalken { background: #212121 center top / cover no-repeat; padding: 100px 0; margin-bottom: 40px; }
.titelbalken h1, .titelbalken .titel-h1 { font: 400 56px/50px var(--serif-titel); text-transform: uppercase; color: #fff; margin: 0; }
.titelbalken.training { background-image: url(../img/balken-training.webp); }
.titelbalken.team { background-image: url(../img/balken-team.webp); }

.fuss { background: #000; color: var(--fuss-text); padding: 60px 0 0; margin-top: 60px; }
.fuss .fuss-logo { display: block; width: 250px; margin: 0 auto 50px; }
.fuss h5 { font: 500 16px/22.4px var(--serif-titel); letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin: 0 0 25px; }
.fuss h5 span { display: inline-block; padding-bottom: 4px; border-bottom: 2px solid var(--rot); }
.fuss p { margin: 0 0 20px; }
.fuss a { color: var(--fuss-text); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss .liste { list-style: none; margin: 0; padding: 0; }
.fuss .liste li { margin-bottom: 6px; }

.fuss .liste .symbol { display: inline-block; width: 16px; height: 16px; fill: #fff; vertical-align: -2px; margin-right: 10px; }
.fuss .copyright { border-top: 1px solid rgba(255,255,255,.1); margin-top: 20px; padding: 20px 0; text-align: center; }
.nach-oben { position: fixed; right: 40px; bottom: 40px; width: 45px; height: 45px; border-radius: 50%; background: #fff; border: 1px solid #000; color: #000; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 40; padding: 0; }
.nach-oben.sichtbar { display: flex; }
.nach-oben svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 1199px) {
  .kopf .container { height: 100px; }
  .nav > ul > li > a { line-height: 100px; padding: 0 9px; font-size: 12px; }
  .kopf .logo img { width: 190px; height: 63px; }
}
@media (max-width: 991px) {
  .team-raster { grid-template-columns: repeat(2, 1fr); }
  .versatz-2 { margin-left: 0; }
  .sp-8.versatz-2 { width: 100%; }
  .sp-2, .sp-3, .sp-4 { width: 50%; }
  .sp-6 { width: 50%; }
  .sp-8, .sp-9, .sp-10 { width: 100%; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .plan { grid-template-columns: repeat(2, 1fr); }
  .blog-karten { grid-template-columns: 1fr; }
  .hero .zeile1 { font-size: 48px; line-height: 48px; }
  .hero .zeile2 { font-size: 36px; line-height: 36px; }
}
@media (max-width: 767px) {
  .topbar { font-size: 11px; }
  .topbar .rechts { display: none; }
  .kopf .container { height: 66px; }
  .kopf .logo img { width: 120px; height: 40px; }
  .burger { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #171717; padding: 10px 0 20px; z-index: 30; box-shadow: 0 10px 20px rgba(0,0,0,.3); }
  .nav.offen { display: block; }
  .nav ul { display: block; }
  .nav > ul > li > a { line-height: 46px; padding: 0 20px; color: #fff; font-size: 14px; }
  .nav > ul > li.callto > a { display: inline-block; margin: 8px 20px; line-height: 18px; }
  .nav .unter { position: static; display: none; min-width: 0; padding: 0 0 6px; background: #111; }
  .nav li.offen > .unter { display: block; }
  .nav .unter a { padding: 8px 20px 8px 36px; }
  .nav li:hover > .unter { display: none; }
  .nav li.offen:hover > .unter { display: block; }
  .sp-2, .sp-3, .sp-4, .sp-6 { width: 100%; }
  .raster > * + * { margin-top: 30px; }
  .hero { height: 585px; }
  .hero::before { background: rgba(0,0,0,.5); }
  .hero .inhalt { top: 145px; right: 15px; text-align: center; }
  .hero .zeile1 { font-size: 34px; line-height: 36px; margin-bottom: 6px; }
  .hero .zeile2 { font-size: 26px; line-height: 30px; margin-bottom: 40px; }
  .hero .knopf-hero { font-size: 16px; padding: 15px 30px; }
  .titelbalken { padding: 60px 0; margin-bottom: 30px; }
  .titelbalken h1, .titelbalken .titel-h1 { font-size: 34px; line-height: 38px; }
  h1, .titel h1, .titel h2, .titel h3 { font-size: 30px; line-height: 36px; hyphens: auto; }
  .rechtstext h2.untertitel { font-size: 28px; }
  .abschnitt { padding: 30px 0; }
  .abschnitt-grau { padding: 30px 0; }
  .kasten { padding: 20px; }
  .galerie { grid-template-columns: 1fr 1fr; gap: 10px; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .plan { grid-template-columns: 1fr; }
  .plan .tag { margin-bottom: 10px; }
  .team-raster { grid-template-columns: 1fr; }
  .orte { grid-template-columns: 1fr; }

  .text table.stapel thead { display: none; }
  .text table.stapel, .text table.stapel tbody, .text table.stapel tr, .text table.stapel td { display: block; width: 100%; }
  .text table.stapel tr { border: 1px solid #e5e5e5; margin-bottom: 10px; padding: 6px 0; }
  .text table.stapel td { border: 0; padding: 3px 12px; overflow-wrap: break-word; }
  .text table.stapel td:first-child { font-weight: 700; }
  .text table.stapel td[data-titel]::before { content: attr(data-titel) ": "; color: #6b6b6b; }
  .karte.mit-symbol { margin-top: 35px; }
  .raster.karten > * + * { margin-top: 40px; }
  .blog-liste .blog-eintrag .bild { flex-basis: 100%; }
  .blog-liste h2 { font-size: 24px; }
  .blog-liste .anriss { font-size: 18px; }
  .fuss { padding-top: 40px; margin-top: 40px; }
  .fuss .raster > * + * { margin-top: 20px; }
  .nach-oben { right: 16px; bottom: 16px; }
}

.formular [aria-invalid="true"] { border-color: var(--rot) !important; box-shadow: 0 0 0 1px var(--rot); }
.formular .termine[aria-invalid="true"] { box-shadow: none; outline: 2px solid var(--rot); outline-offset: 4px; }
.formular .termine label.termin { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; }
.formular .termine label.termin input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--rot); }
@media (max-width: 767px) {

  .formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular input[type="date"], .formular select, .formular textarea { font-size: 16px; }
  .formular .termine label.termin { min-height: 44px; }
}
@media print { .topbar, .nav, .burger, .nach-oben, .fuss { display: none !important; } }

main a { overflow-wrap: anywhere; }

.email-tipp { margin: 4px 0 0; min-height: 20px; font-size: 14px; line-height: 20px; color: var(--grau-titel); }
.email-tipp.leer { visibility: hidden; }
.formular .feld:has(> .email-tipp) { margin-bottom: 0; }
.email-tipp-knopf { background: none; border: 0; padding: 0; font: inherit; color: var(--rot-dunkel); text-decoration: underline; cursor: pointer; }
.email-tipp-knopf:hover, .email-tipp-knopf:focus-visible { color: var(--schwarz); }

.termine .knapp { color: var(--rot-dunkel); font-weight: 600; white-space: nowrap; }

.einwilligung-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #fff; border-top: 3px solid var(--rot); box-shadow: 0 -6px 24px rgba(0,0,0,.12); }
.einwilligung-innen { max-width: 1170px; margin: 0 auto; padding: 14px 20px; display: flex; gap: 18px; align-items: center; }
.einwilligung-text { margin: 0; font: 400 14px/1.5 "Open Sans", Arial, sans-serif; color: #333; flex: 1 1 auto; }
.einwilligung-text a { color: var(--rot-dunkel); }
.einwilligung-knoepfe { display: flex; gap: 10px; flex: 0 0 auto; }
button.einwilligung-knopf { width: auto; height: auto; min-width: 128px; border-radius: 0; padding: 11px 18px; background: #fff; color: #000; border: 2px solid #000; font: 600 14px/1.2 "Open Sans", Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; }
button.einwilligung-knopf:hover, button.einwilligung-knopf:focus-visible { background: #000; color: #fff; }
@media (max-width: 760px) {
  .einwilligung-innen { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 16px 12px; }
  .einwilligung-text { font-size: 13px; line-height: 1.45; }
  button.einwilligung-knopf { padding: 10px 12px; }
  .einwilligung-knoepfe button.einwilligung-knopf { flex: 1 1 0; min-width: 0; }
}

.anfahrt { list-style: none; margin: 0 0 12px; padding: 0 0 0 20px; font-size: 14px; }
.anfahrt li { position: relative; line-height: 1.6; margin-bottom: 4px; }
.anfahrt li::before { content: ""; position: absolute; left: -20px; top: 8px; width: 7px; height: 7px; border-right: 2px solid var(--rot); border-top: 2px solid var(--rot); transform: rotate(45deg); }
.gebucht { margin: 20px 0 30px; }
.gebucht p { margin-bottom: 8px; }
.gebucht .gebucht-termin { font-size: 18px; font-weight: 700; }
.gebucht .gebucht-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.gebucht .gebucht-knoepfe a { margin: 0; }

.sm-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 0 0 40px; }
.sm-kachel { display: flex; flex-direction: column; text-align: center; }

.sm-kachel .bild { display: block; position: relative; }
.sm-kachel .bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.sm-etikett { position: absolute; top: 8px; left: 8px; background: var(--grau-menue); color: #fff; font-size: 12px; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; }
.sm-preiszeile { font-size: 16px; color: var(--grau-menue); margin: 0 0 14px; }
.sm-preiszeile strong { color: #000; font-weight: 700; }
.sm-ust-klein { display: block; font-size: 13px; color: var(--grau-titel); margin-top: 2px; }
.sm-kasten { border: 3px solid #f0f0f0; padding: 20px 18px 0; flex: 1; display: flex; flex-direction: column; }
.sm-kategorie { color: var(--rot); text-transform: uppercase; font-size: 13px; letter-spacing: .5px; margin: 0 0 6px; }
.sm-datum { font-family: var(--serif-titel); font-size: 20px; color: var(--grau-titel); margin: 0 0 4px; }
.sm-kachel h3 { font-family: var(--serif-titel); font-weight: 400; font-size: 21px; line-height: 1.35; color: var(--titel); margin: 0 0 10px; }
.sm-kachel h3 a { color: inherit; text-decoration: none; }
.sm-ort { font-size: 13px; color: var(--grau-titel); margin: 0 0 10px; }
.sm-kurz { font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.sm-aktion { margin-top: auto; }
.sm-kachel .sm-aktion { transform: translateY(18px); }
.sm-kachel .sm-aktion .knopf, .sm-kachel .sm-aktion .knopf-umriss { margin: 0; min-height: 44px; }
.sm-kachel .sm-aktion .knopf { padding: 12px 20px; }
.sm-aktion .knopf-umriss { background: #fff; }
.sm-rest { font-size: 14px; color: var(--grau-titel); margin: 8px 0; }
.sm-abgesagt .bild img { filter: grayscale(1); }
.sm-test { background: #ffd400; color: #000; font-size: 13px; font-weight: 700; padding: 6px 10px; margin: 10px 0 0; }
.sm-test-gross { font-size: 15px; margin: 0 0 20px; text-align: center; }
.sm-leer, .sm-merk-block { margin-top: 10px; }
.sm-merk-block h3 { font-family: var(--serif-titel); font-weight: 400; color: var(--titel); font-size: 24px; margin: 30px 0 10px; }
.sm-merk { max-width: 460px; margin: 16px auto 0; text-align: left; }
.sm-detail .sm-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 40px; }
.sm-detail .sm-kopf-bild img { width: 100%; display: block; }

.sm-detail .sm-kopf-text h2, .sm-detail .sm-kopf-text h1.sm-titel { font-family: var(--serif-titel); font-weight: 400; font-size: 32px; line-height: 1.3; color: var(--titel); margin: 0 0 12px; text-transform: none; }
.sm-preis-gross { color: var(--rot); font-size: 24px; margin: 0 0 4px; }
.sm-ust { font-size: 13px; color: var(--grau-titel); margin: 0 0 14px; }
.sm-detail .sm-aktion .knopf { margin: 6px 0 0; }
.sm-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.sm-text h3, .sm-seite h3 { font-family: var(--serif-titel); font-weight: 400; font-size: 26px; color: #222; margin: 0 0 12px; }
.sm-text h3 + p, .sm-seite h3 + p { margin-top: 0; }
.sm-text p { line-height: 1.7; }
.sm-text h3:not(:first-child), .sm-seite h3:not(:first-child) { margin-top: 30px; }
.pfeil-liste { list-style: none; margin: 0 0 14px; padding: 0 0 0 24px; }
.pfeil-liste li { position: relative; line-height: 1.6; margin-bottom: 6px; }
.pfeil-liste li::before { content: ""; position: absolute; left: -22px; top: 9px; width: 7px; height: 7px; border-right: 2px solid var(--rot); border-top: 2px solid var(--rot); transform: rotate(45deg); }
.sm-vertraulich { background: var(--flaeche); border-left: 3px solid var(--rot); padding: 16px 18px; margin: 24px 0 0; }
.sm-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
.sm-knoepfe .knopf-umriss { background: #fff; }
.sm-vertraulich h3 { font-size: 20px !important; margin-top: 0 !important; }
.sm-buchen { max-width: 620px; margin: 50px auto 0; }
.sm-buchen h3 { font-family: var(--serif-titel); font-weight: 400; font-size: 28px; color: var(--titel); margin: 0 0 16px; text-align: center; }
.sm-zusammenfassung { border: 1px solid #ddd; background: #fff; padding: 14px 16px; margin: 14px 0; font-size: 15px; }
.sm-zusammenfassung p { margin: 0 0 8px; }
.sm-gesamt { font-size: 18px; }
.sm-bedingungen { font-size: 14px; line-height: 1.55; margin: 12px 0 0; }
.sm-bedingungen ul { margin: 6px 0 0; padding-left: 18px; }
.sm-bedingungen li { margin: 0 0 6px; }
.sm-zurueck { text-align: center; margin: 40px 0 0; }
.sm-tabelle { border-collapse: collapse; margin: 16px 0; }
.sm-tabelle th, .sm-tabelle td { text-align: left; padding: 8px 14px 8px 0; border-bottom: 1px solid #e5e5e5; vertical-align: top; }

@media (max-width: 991px) { .sm-kacheln { grid-template-columns: repeat(2, 1fr); } .sm-detail .sm-kopf, .sm-spalten { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 767px) {
  .sm-kacheln { grid-template-columns: 1fr; gap: 50px; }
  .sm-kachel .sm-aktion .knopf, .sm-kachel .sm-aktion .knopf-umriss { display: block; width: 100%; }
  .sm-detail .sm-kopf-text h2, .sm-detail .sm-kopf-text h1.sm-titel { font-size: 26px; }
}

html { scroll-padding-top: 100px; }
.kopf-platz { height: 120px; }
.kopf.haftet { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 1px 5px rgba(190,190,190,.5); animation: kopf-rein .25s ease-out; }
@keyframes kopf-rein { from { transform: translateY(-100%); } to { transform: none; } }
@media (min-width: 768px) {
  .kopf.haftet .container { height: 90px; }
  .kopf.haftet .nav > ul > li:not(.callto) > a { line-height: 90px; }
  .kopf.haftet .logo img { width: 211px; height: 70px; }
}
@media (min-width: 768px) and (max-width: 1199px) { .kopf-platz { height: 100px; } .kopf.haftet .logo img { width: 190px; height: 63px; } }
@media (max-width: 767px) {
  html { scroll-padding-top: 70px; }
  .kopf-platz { height: 66px; }
  .kopf.haftet .container { height: 60px; }
  .kopf.haftet .nav { max-height: calc(100vh - 60px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .kopf.haftet { animation: none; } }
@media print { .kopf-platz { height: auto; } .kopf.haftet { position: static; box-shadow: none; animation: none; } }

.formular .termine label.termin { min-height: 27px; gap: 8px; }
.formular .termine label.termin input { width: 16px; height: 16px; }
@media (max-width: 767px) { .formular .termine label.termin { min-height: 32px; } }

.hero { background-position: calc(50% + 80px) 50%; background-size: max(1920px, 100% + 160px) auto; }
@media (min-width: 768px) and (max-width: 991px) {
  .hero .zeile1 { font-size: 36px; line-height: 38px; }
  .hero .zeile2 { font-size: 28px; line-height: 30px; }
}
@media (max-width: 767px) { .hero { background-position: center; background-size: cover; } }

.anfrage-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 0 0; }
.anfrage-kasten { background: #fff; border-left: 3px solid var(--rot); padding: 26px 30px 28px; margin: 34px 0 0; }
.anfrage-kasten h2 { font-size: 26px; line-height: 1.3; margin: 0 0 14px; }
.anfrage-kasten p { margin: 0 0 12px; }
.anfrage-kasten .anfrage-zeile { margin: 20px 0 0; }
.logos-zeile { text-align: center; font: 400 15px/1.5 "Open Sans", Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--grau-titel); margin: 0 0 24px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; }
.logos > a { flex: 0 0 calc((100% - 120px) / 5); }
@media (max-width: 991px) { .logos > a { flex-basis: calc((100% - 60px) / 3); } }
@media (max-width: 767px) { .logos > a { flex-basis: calc((100% - 30px) / 2); } .anfrage-kasten { padding: 20px 18px 22px; } }
.formular .anliegen label { display: flex; align-items: center; gap: 8px; min-height: 27px; margin: 0; }
.formular .anliegen label input { margin: 0; flex: none; accent-color: var(--rot); }
.formular .anliegen-tipp .knopf-umriss { padding: 8px 14px; margin-left: 6px; }

.logos a.logo-text { aspect-ratio: 1 / 1; text-align: center; text-decoration: none; font: 600 14px/1.4 "Open Sans", Arial, sans-serif; color: var(--grau-titel); }
.logos a.logo-text:hover span { color: var(--rot); }

.plan.plan-orte { margin-bottom: 30px; }
.plan .eintrag .wo { margin: 8px 0 0; font-size: 14px; }
.plan .eintrag .wo a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.plan .eintrag .wo a:hover { color: var(--rot); }
.plan .eintrag .wo svg { width: 12px; height: 12px; fill: var(--rot); vertical-align: -1px; margin-right: 5px; }
.plan-probe { text-align: center; margin: 0 0 70px; }
.orte .ort .ort-tage { font-weight: 700; }

:root { --kurz: 150ms; --mittel: 320ms; --lang: 700ms; --aus: cubic-bezier(.2, .7, .2, 1); --wechsel: cubic-bezier(.4, 0, .2, 1); }
@keyframes einflug { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes einflug-hoch { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blende-rein { from { opacity: 0; } to { opacity: 1; } }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

.hero .zeile1 { animation: einflug var(--lang) var(--aus) .1s backwards; }
.hero .zeile2 { animation: einflug var(--lang) var(--aus) .22s backwards; }
.hero .knopf-hero { animation: einflug var(--lang) var(--aus) .34s backwards; }
@media (max-width: 767px) { .hero .zeile1, .hero .zeile2, .hero .knopf-hero { animation-name: einflug-hoch; } }

.knopf, .knopf-dunkel, .hero .knopf-hero, .nav > ul > li.callto > a { transition: background-color var(--kurz), color var(--kurz), transform var(--kurz), box-shadow var(--kurz); }
.knopf:hover, .hero .knopf-hero:hover, .nav > ul > li.callto > a:hover { box-shadow: 0 6px 16px rgba(228, 5, 34, .22); }
.knopf:active, .knopf-dunkel:active, .knopf-umriss:active, .hero .knopf-hero:active, .nav > ul > li.callto > a:active, .pfeil:active { transform: scale(.97); box-shadow: none; }
.knopf-umriss { position: relative; z-index: 0; overflow: hidden; transition: color var(--mittel) var(--wechsel), border-color var(--mittel) var(--wechsel), transform var(--kurz); }
.knopf-umriss::before { content: ""; position: absolute; inset: 0; background: #000; transform: scaleX(0); transform-origin: left; transition: transform var(--mittel) var(--wechsel); z-index: -1; }
.knopf-umriss:hover, .knopf-umriss:focus { background: transparent; }
.sm-aktion .knopf-umriss:hover, .sm-aktion .knopf-umriss:focus, .sm-knoepfe .knopf-umriss:hover, .sm-knoepfe .knopf-umriss:focus { background: #fff; }
.knopf-umriss:hover::before, .knopf-umriss:focus::before { transform: scaleX(1); }
.knopf-umriss.hell::before { background: #fff; }
.knopf-umriss.hell:hover, .knopf-umriss.hell:focus { background: transparent; }
@media (min-width: 768px) {
  .nav > ul > li:not(.callto) > a { background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(50% + 12px) / 0 2px; background-origin: content-box; background-clip: content-box;
    transition: background-size var(--mittel) var(--wechsel), color var(--kurz); }
  .nav > ul > li:not(.callto) > a:hover, .nav > ul > li:not(.callto) > a:focus-visible, .nav > ul > li.aktiv > a { background-size: 100% 2px; }
  .nav .unter { animation: blende-rein .2s var(--wechsel); }
}

.reveal { opacity: 0; transform: translateY(16px); }
.reveal.sichtbar { opacity: 1; transform: none; transition: opacity .6s var(--aus), transform .6s var(--aus); transition-delay: calc(var(--i, 0) * 90ms); }

.zitate { max-width: none; container-type: inline-size; }
.zitate .spur { position: relative; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 14px calc((100cqw - min(640px, 86cqw)) / 2) 30px; outline-offset: -2px; }
.zitate .spur::-webkit-scrollbar { display: none; }
.zitate .spur .zitat { display: block; flex: 0 0 min(640px, 86cqw); scroll-snap-align: center; background: #fff; border: 1px solid #eee; box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
  padding: 30px 34px 26px; transition: transform var(--mittel) var(--wechsel), opacity var(--mittel) var(--wechsel), box-shadow var(--mittel) var(--wechsel); }
.karussell-an .zitat:not(.aktiv) { transform: scale(.94); opacity: .45; box-shadow: none; }
.karussell-an .spur { cursor: grab; }
.karussell-an .spur.zieht { cursor: grabbing; scroll-snap-type: none; }
.karussell-an .spur.zieht * { user-select: none; }
.steuer { display: flex; align-items: center; justify-content: center; gap: 16px; }
.steuer[hidden] { display: none; }
.steuer .punkte { margin: 0; }
.zitate .steuer { margin-top: 4px; }
.pfeil { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #000; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: border-color var(--kurz), background-color var(--kurz), transform var(--kurz); }
.pfeil:hover { border-color: #000; }
.pfeil[aria-disabled="true"] { opacity: .35; cursor: default; }
.pfeil svg { width: 16px; height: 16px; fill: currentColor; }
.punkte button { transition: width var(--mittel) var(--wechsel), background-color var(--mittel) var(--wechsel); }
.punkte button.aktiv { width: 24px; border-radius: 5px; }
@media (max-width: 767px) {
  .zitate .spur { gap: 14px; padding-left: 7cqw; padding-right: 7cqw; }
  .zitate .spur .zitat { flex-basis: 86cqw; padding: 22px 20px 18px; }
  .steuer .pfeil { display: none; }
}

.blog-karten.wischen { position: relative; display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-bottom: 24px; align-items: stretch; }
.blog-karten.wischen::-webkit-scrollbar { display: none; }
.blog-karten.wischen > .blog-karte { flex: 0 0 calc((100% - 30px) / 3); scroll-snap-align: start; }
.blog-wischen { margin-bottom: 30px; }
@media (max-width: 991px) { .blog-karten.wischen > .blog-karte { flex-basis: calc((100% - 15px) / 2); } }
@media (max-width: 767px) { .blog-karten.wischen > .blog-karte { flex-basis: 86%; } }

.nav .zu, .schleier { display: none; }
@media (max-width: 767px) {
  .nav { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(86vw, 360px); max-height: none; padding: 64px 0 24px; background: #171717; z-index: 60;
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; box-shadow: none; transform: translateX(100%); visibility: hidden;
    transition: transform var(--mittel) var(--aus), visibility 0s linear var(--mittel), box-shadow var(--mittel); }
  .kopf.haftet .nav { max-height: none; }
  .nav.offen { transform: none; visibility: visible; box-shadow: -12px 0 32px rgba(0, 0, 0, .35); transition: transform var(--mittel) var(--aus), visibility 0s, box-shadow var(--mittel); }
  .nav.zieht { transition: none; }
  .nav .zu { display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; padding: 0; }
  .nav .zu svg { width: 24px; height: 24px; fill: currentColor; }
  .nav > ul > li { opacity: 0; transform: translateX(16px); transition: opacity .25s var(--aus), transform .25s var(--aus); }
  .nav.offen > ul > li { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 40ms); }
  .nav li.offen > .unter { animation: blende-rein .25s var(--wechsel); }
  .schleier { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 55; opacity: 0; visibility: hidden;
    transition: opacity var(--mittel) var(--wechsel), visibility 0s linear var(--mittel); }
  .schleier.an { opacity: 1; visibility: visible; transition: opacity var(--mittel) var(--wechsel), visibility 0s; }
  html.menue-offen { overflow: hidden; }
  html.menue-offen .nach-oben { display: none; }
}

.formular .termine label.termin { padding: 0 8px; border: 1px solid transparent; cursor: pointer; transition: background-color var(--kurz), border-color var(--kurz), box-shadow var(--kurz); }
.formular .termine label.termin:hover { background: rgba(0, 0, 0, .04); }
.formular .termine label.termin:has(input:checked) { background: #fff; border-color: var(--rot); box-shadow: 0 4px 14px rgba(0, 0, 0, .07); }
.formular .termine label.termin:has(input:checked)::after { content: ""; flex: none; width: 11px; height: 6px; margin: -4px 4px 0 auto; border-left: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: rotate(-45deg); animation: haken-rein var(--mittel) var(--aus); }
@keyframes haken-rein { from { opacity: 0; transform: rotate(-45deg) scale(.3); } }

.haken-gross { display: block; width: 56px; height: 56px; margin: 0 0 18px; }
.haken-gross circle { fill: none; stroke: var(--rot); stroke-width: 3; stroke-dasharray: 139; stroke-dashoffset: 139; animation: zeichnen .6s var(--aus) .15s forwards; }
.haken-gross path { fill: none; stroke: var(--rot); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: zeichnen .4s var(--aus) .6s forwards; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-raus .2s var(--wechsel) both; }
::view-transition-new(root) { animation: vt-rein .3s var(--aus) both; }
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein { from { opacity: 0; } }

.kinder-text { max-width: 780px; }
.kinder-einstieg { font-size: 18px; line-height: 1.6; }
.kinder-bild { width: 100%; margin: 34px 0 30px; }
.kinder-text h3 { font: 400 26px/1.3 var(--serif-titel); text-transform: uppercase; color: var(--titel); margin: 34px 0 12px; }
.kinder-liste { list-style: none; margin: 0 0 16px; padding: 0 0 0 22px; }
.kinder-liste li { position: relative; line-height: 1.8; }
.kinder-liste li::before { content: ""; position: absolute; left: -20px; top: 10px; width: 7px; height: 7px; border-right: 2px solid var(--rot); border-top: 2px solid var(--rot); transform: rotate(45deg); }
.weiter-kasten { background: var(--flaeche); border-left: 3px solid var(--rot); padding: 24px 28px 22px; margin: 26px 0 0; }
.weiter-unten { margin-top: 40px; }
.weiter-hinweis { display: block; font: 700 12px/1.4 "Open Sans", Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--rot); margin: 0 0 12px; }
.weiter-kasten .klein { font-size: 14px; color: #6b6b6b; margin: 12px 0 0; }
.kinder-direkt { font-size: 15px; margin: 14px 0 0; }
.kinder-direkt a { color: #000; font-weight: 700; text-underline-offset: 3px; }
.kinder-direkt a:hover { color: var(--rot); }
.knopf-gross { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; line-height: 22px; padding: 16px 28px; }
.knopf-gross svg { width: 18px; height: 18px; flex: none; fill: currentColor; transition: transform var(--mittel) var(--aus); }
.knopf-gross:hover svg, .knopf-gross:focus-visible svg { transform: translateX(4px); }
@media (max-width: 767px) { .weiter-kasten { padding: 20px 18px; } .knopf-gross { display: flex; justify-content: center; text-align: center; font-size: 16px; padding: 15px 18px; } }

.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin: 0; }
.hero .knopf-hero-umriss { display: inline-block; font: 400 20px/16px var(--serif-titel); text-transform: uppercase; color: #fff; text-decoration: none; padding: 14px 26px; border: 1px solid #fff;
  position: relative; z-index: 0; overflow: hidden; transition: color var(--mittel) var(--wechsel), transform var(--kurz); animation: einflug var(--lang) var(--aus) .4s backwards; }
.hero .knopf-hero-umriss::before { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform var(--mittel) var(--wechsel); z-index: -1; }
.hero .knopf-hero-umriss:hover, .hero .knopf-hero-umriss:focus-visible { color: #000; }
.hero .knopf-hero-umriss:hover::before, .hero .knopf-hero-umriss:focus-visible::before { transform: scaleX(1); }
.hero .knopf-hero-umriss:active { transform: scale(.97); }
.hero .zeile3 { font: 400 17px/1.55 "Open Sans", Arial, sans-serif; color: rgba(255, 255, 255, .92); margin: 22px 0 0; max-width: 560px; animation: einflug var(--lang) var(--aus) .46s backwards; }
@media (max-width: 991px) { .hero .knopf-hero-umriss { font-size: 17px; padding: 13px 20px; } .hero .zeile3 { font-size: 15px; } }
@media (max-width: 767px) {
  .hero-knoepfe { justify-content: center; }
  .hero .knopf-hero-umriss { font-size: 15px; padding: 13px 18px; animation-name: einflug-hoch; }
  .hero .zeile3 { font-size: 14px; margin: 18px auto 0; animation-name: einflug-hoch; }
  .hero .inhalt { top: 120px; }
}

.kopf-kontakt { display: none; }
@media (max-width: 767px) {
  .kopf-kontakt { display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 2px; }
  .kopf-kontakt a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: rgba(0, 0, 0, .7); border-radius: 50%; transition: background-color var(--kurz), color var(--kurz); }
  .kopf-kontakt a:hover, .kopf-kontakt a:focus-visible { color: var(--rot); background: rgba(228, 5, 34, .07); }
  .kopf-kontakt svg { width: 21px; height: 21px; fill: currentColor; }
  .kopf-kontakt .kv-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.nav .menue-extra { display: none; }
@media (max-width: 767px) {
  .nav .menue-extra { display: block; list-style: none; margin: 14px 20px 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .nav .menue-extra a { display: flex; align-items: center; gap: 12px; padding: 0; font: 400 15px/44px "Open Sans", Arial, sans-serif; color: #fff; text-decoration: none; }
  .nav .menue-extra svg { width: 18px; height: 18px; fill: currentColor; opacity: .8; }
  .nav .menue-extra li { opacity: 0; transform: translateX(16px); transition: opacity .25s var(--aus), transform .25s var(--aus); }
  .nav.offen .menue-extra li { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 40ms); }
}

.leiste-unten { display: none; }
@media (max-width: 991px) {
  .leiste-unten:not([hidden]) { display: flex; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45;
    transform: translateY(18px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .55s cubic-bezier(.22, .8, .26, 1), opacity .45s ease, visibility 0s linear .55s; }
  .leiste-unten.an { transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .55s cubic-bezier(.22, .8, .26, 1), opacity .45s ease, visibility 0s; }
  .leiste-unten a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 12px; text-align: center;
    font: 400 15px/1.2 "Open Sans", Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: background-color var(--kurz), color var(--kurz); }
  .leiste-unten .lu-haupt { flex: 1.8 1 0; background: var(--rot); color: #fff; }
  .leiste-unten .lu-haupt:active { background: var(--rot-dunkel); }
  .leiste-unten .lu-neben { flex: 1 1 0; background: #fff; color: var(--rot); box-shadow: inset 0 0 0 2px var(--rot), 0 8px 24px rgba(0, 0, 0, .18); }
  .leiste-unten .lu-neben:active { background: #fdecee; }
  html.mit-leiste .fuss { padding-bottom: 78px; }
  html.mit-leiste .nach-oben { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

.infopaket-link { font-size: 15px; margin: 16px 0 0; text-align: center; }
.infopaket-link a { color: #000; font-weight: 700; text-underline-offset: 3px; }
.infopaket-link a:hover { color: var(--rot); }
.infopaket-bereit { margin: 24px 0 0; }
.infopaket-bereit a { color: #000; font-weight: 700; }

.noch-nicht-sicher .kasten { background: #fff; }
.noch-nicht-sicher .titel { margin-bottom: 20px; }

.abschnitt + .noch-nicht-sicher { margin-top: 50px; }
@media (max-width: 767px) { .abschnitt + .noch-nicht-sicher { margin-top: 30px; } }
@media (min-width: 768px) { .noch-nicht-sicher .raster { align-items: center; } }

.beitrag-schluss { background: var(--flaeche); border-left: 3px solid var(--rot); padding: 24px 28px; margin: 40px 0 10px; }
.beitrag-schluss .schluss-titel { font: 400 24px/1.3 var(--serif-titel); text-transform: uppercase; color: var(--titel); margin: 0 0 10px; }
.beitrag-schluss p { margin: 0 0 14px; }
.beitrag-schluss p:last-child { margin-bottom: 0; }
.schluss-knoepfe { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.schluss-tel a { color: #000; }
.schluss-knoepfe .knopf-umriss { text-transform: uppercase; }
@media (max-width: 767px) { .beitrag-schluss { padding: 20px 18px; } .schluss-knoepfe a { flex: 1 1 100%; text-align: center; } }

@media (min-width: 768px) {
  .kopf-kontakt { display: flex; align-items: center; margin: 0 auto 0 28px; }
  .kopf-kontakt .kk-sms { display: none; }
  .kopf-kontakt .kk-tel a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #333; text-decoration: none;
    font: 600 15px/1 "Open Sans", Arial, sans-serif; letter-spacing: .3px; white-space: nowrap; transition: color var(--kurz); }
  .kopf-kontakt .kk-tel a:hover, .kopf-kontakt .kk-tel a:focus-visible { color: var(--rot); }
  .kopf-kontakt .kk-tel svg { width: 16px; height: 16px; fill: var(--rot); flex: none; }
  .kopf-kontakt .kv-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199px) { .kopf-kontakt { margin-left: 18px; } .kopf-kontakt .kk-tel a { font-size: 14px; } }

.fuss-mitgliedschaft p { margin: 0 0 14px; }
.fuss .knopf-hell { display: inline-block; padding: 13px 26px; background: #fff; color: #000; font: 700 14px/1.2 "Open Sans", Arial, sans-serif;
  letter-spacing: .5px; text-transform: uppercase; text-decoration: none; transition: background-color var(--kurz); }
.fuss .knopf-hell:hover, .fuss .knopf-hell:focus-visible { background: #dedede; color: #000; }
.fuss .fuss-vertrag { margin: 2px 0 0; }

.ax { display: none !important; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.knopf-reihe .knopf, .knopf-reihe .knopf-umriss { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  font: 400 14px/1.2 "Open Sans", Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; box-sizing: border-box; }
@media (max-width: 767px) { .knopf-reihe a { flex: 1 1 100%; } }

.mw-schritte h3 { font: 400 22px/1.3 var(--serif-titel); text-transform: uppercase; color: var(--titel); margin: 0 0 18px; }
.mw-schritte ol { list-style: none; counter-reset: mw; margin: 0 0 18px; padding: 0; display: grid; gap: 16px; }
.mw-schritte li { counter-increment: mw; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: start; }
.mw-schritte li::before { content: counter(mw); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--rot); color: #fff;
  font: 700 15px/34px "Open Sans", Arial, sans-serif; text-align: center; }
.mw-schritte li strong { display: block; line-height: 1.35; }
.mw-schritte li span { font-size: 15px; line-height: 1.5; color: #555; }
.mw-weiter { margin-top: 26px; }
@media (min-width: 768px) { .mitglied-werden .raster { align-items: start; } .mitglied-werden .mw-schritte { margin-top: 64px; } }

.formular .termine .termin-liste.raster-woche { display: grid; gap: 6px; align-items: stretch; margin: 6px 0 0; }
.raster-woche .rw-tag { text-align: center; font: 700 13px/1.2 "Open Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #333; padding: 0 0 2px; }
.raster-woche .rw-tag small { display: block; font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; color: #6b6b6b; }
.raster-woche .rw-kw { display: flex; align-items: center; padding-right: 4px; font-size: 12px; color: #6b6b6b; white-space: nowrap; }
.raster-woche .rw-zelle { display: flex; min-width: 0; }
.formular .termine .raster-woche label.termin { flex: 1; position: relative; flex-direction: column; justify-content: center; gap: 0; min-height: 50px; margin: 0;
  padding: 6px 4px; border: 1px solid #d6d6d6; background: #fff; text-align: center; }
.formular .termine .raster-woche label.termin:hover { border-color: #999; background: #fff; }
.formular .termine .raster-woche label.termin input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.raster-woche label.termin .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.raster-woche label.termin .datum { font: 600 15px/1.2 "Open Sans", Arial, sans-serif; color: #222; pointer-events: none; }
.raster-woche label.termin .knapp { display: block; font-size: 11px; line-height: 1.2; margin-top: 3px; pointer-events: none; }
.formular .termine .raster-woche label.termin:has(input:checked) { background: var(--rot); border-color: var(--rot); box-shadow: 0 4px 14px rgba(228, 5, 34, .25); }
.formular .termine .raster-woche label.termin:has(input:checked) .datum, .formular .termine .raster-woche label.termin:has(input:checked) .knapp { color: #fff; }
.formular .termine .raster-woche label.termin:has(input:checked)::after { content: none; }
.formular .termine .raster-woche label.termin:has(input:focus-visible) { outline: 2px solid var(--rot); outline-offset: 2px; }
.raster-woche .platzhalter { grid-column: 1 / -1; }
@media (max-width: 360px) { .raster-woche label.termin .datum { font-size: 14px; } .raster-woche .rw-kw { font-size: 11px; } }

.vorteile-handy { display: none; }
@media (max-width: 767px) {
  .vorteile-handy { display: block; padding: 18px 0 2px; }
  .vorteile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vorteile li { background: var(--flaeche); border-left: 3px solid var(--rot); padding: 12px 12px 11px; }
  .vorteile strong { display: block; font: 700 14.5px/1.25 "Open Sans", Arial, sans-serif; color: #111; text-transform: uppercase; letter-spacing: .3px; }
  .vorteile span { display: block; font-size: 13.5px; line-height: 1.35; color: #555; margin-top: 3px; }
  .handy-kurz.zu { max-height: 10em; overflow: hidden; position: relative; }
  .handy-kurz.zu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5em; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
  .abschnitt-grau .handy-kurz.zu::after { background: linear-gradient(rgba(247, 247, 247, 0), var(--flaeche)); }
  .mehr-lesen { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 2px 0 10px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 700 14px/1.2 "Open Sans", Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; color: var(--rot); }
  .mehr-lesen::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform var(--kurz); }
  .mehr-lesen[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
}

.org-lead { font-size: 18px; line-height: 1.6; color: #333; }
.org-fuer { margin: 18px 0 8px; font: 700 13px/1.2 "Open Sans", Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--grau-eyebrow); }
.text ul.org-chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.text ul.org-chips li { margin: 0; padding: 7px 13px; background: var(--flaeche); border: 1px solid #e6e6e6; font-size: 14.5px; line-height: 1.3; color: #222; }
.text ul.org-chips li::before { content: none; }

.org-logos { padding-top: 10px; padding-bottom: 30px; }
.org-logos .logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.org-logos .logos > a { flex: 0 0 calc((100% - 70px) / 8); aspect-ratio: 4 / 3; padding: 8px; background: #fff; border: 1px solid #ececec; display: flex; align-items: center; justify-content: center;
  transition: border-color var(--kurz), box-shadow var(--kurz); }
.org-logos .logos > a:hover, .org-logos .logos > a:focus-visible { border-color: #cfcfcf; box-shadow: 0 6px 16px rgba(0, 0, 0, .07); }
.org-logos .logos img { width: 100%; height: 100%; object-fit: contain; }
.org-logos .logos > a { overflow: hidden; min-height: 0; }
.org-logos .logos a.logo-text span { font-size: 10.5px; line-height: 1.25; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 991px) { .org-logos .logos > a { flex-basis: calc((100% - 50px) / 6); } }
@media (max-width: 575px) { .org-logos .logos { gap: 8px; } .org-logos .logos > a { flex-basis: calc((100% - 24px) / 4); padding: 5px; } .org-logos .logos a.logo-text span { font-size: 8px; line-height: 1.2; } }

.org-intro { max-width: 72ch; }
.phasen { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.phasen > li { margin: 0; padding: 22px 20px 18px; background: #fff; border-top: 5px solid var(--ph); box-shadow: 0 2px 12px rgba(0, 0, 0, .05); display: flex; flex-direction: column; }
.phasen > li::before { content: none; }
.phasen > li:nth-child(1) { --ph: #a6a6a6; } .phasen > li:nth-child(2) { --ph: #6b6b6b; } .phasen > li:nth-child(3) { --ph: #333; } .phasen > li:nth-child(4) { --ph: var(--rot); }
.phase-nr { font: 700 12px/1 "Open Sans", Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ph); }
.phasen h3 { font: 400 23px/1.2 var(--serif-titel); text-transform: uppercase; letter-spacing: .5px; color: #111; margin: 8px 0 10px; }
.phase-ziel { font-weight: 600; font-size: 15px; line-height: 1.45; color: #222; margin: 0 0 12px; }
.phasen ul { list-style: none; margin: auto 0 0; padding: 0; }
.phasen ul li { position: relative; margin: 0; padding: 7px 0 7px 16px; border-top: 1px solid #eee; font-size: 14.5px; line-height: 1.4; color: #555; }
.phasen ul li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; background: var(--ph); }
.org-hinweis { margin-top: 18px; padding: 16px 20px; background: #fff; border-left: 4px solid var(--rot); }
.org-hinweis p { margin: 0; }
@media (max-width: 991px) { .phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .phasen { grid-template-columns: 1fr; } }

.pyr-bild { margin: 0; }
.pyramide-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.pyr-bild figcaption { max-width: 440px; margin: 10px auto 0; font-size: 12.5px; line-height: 1.4; color: #777; text-align: center; }
.org-kernsatz { font: 700 20px/1.4 Arial, Helvetica, sans-serif; color: #111; }
.pyr-liste { margin: 16px 0 0; }
.pyr-liste > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 9px 0 9px 12px; border-left: 3px solid #ccc; margin-bottom: 6px; }
.pyr-liste > div.basis { border-left-color: var(--rot); }
.pyr-liste dt { font: 700 13px/1.5 Arial, Helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #333; }
.pyr-liste dd { margin: 0; font-size: 15px; line-height: 1.5; color: #444; }

.infokaesten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.infokasten { background: #fff; padding: 24px 22px 20px; border-top: 4px solid var(--rot); box-shadow: 0 2px 12px rgba(0, 0, 0, .05); }
.infokasten .etikett { margin: 0 0 10px; font: 700 12px/1 "Open Sans", Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rot); }
.infokasten h3 { font: 400 22px/1.25 var(--serif-titel); text-transform: uppercase; color: #111; margin: 0 0 10px; }
.infokasten p { font-size: 15px; line-height: 1.55; }
.infokasten .zahl { margin: 6px 0 4px; font: 700 40px/1 Arial, Helvetica, sans-serif; color: #111; }
.format-liste { list-style: none; margin: 0; padding: 0; }
.format-liste li { margin: 0 0 10px; padding: 0; font-size: 15px; line-height: 1.5; }
.format-liste li::before { content: none; }
@media (max-width: 991px) { .infokaesten { grid-template-columns: 1fr; } }

.ablauf { list-style: none; counter-reset: ab; margin: 24px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ablauf li { counter-increment: ab; margin: 0; padding: 18px 16px 16px; background: var(--flaeche); display: flex; flex-direction: column; gap: 6px; }
.ablauf li::before { content: counter(ab); width: 32px; height: 32px; border-radius: 50%; background: var(--rot); color: #fff; font: 700 15px/32px "Open Sans", Arial, sans-serif; text-align: center; margin-bottom: 4px; }
.ablauf strong { font-size: 16px; line-height: 1.3; color: #111; }
.ablauf span { font-size: 14.5px; line-height: 1.45; color: #555; }
@media (max-width: 991px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ablauf { grid-template-columns: 1fr; } .ablauf li { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .ablauf li::before { flex: none; margin: 0; } .ablauf li strong { flex: 1; } .ablauf li span { flex-basis: 100%; padding-left: 44px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
@media print { .reveal { opacity: 1 !important; transform: none !important; } .steuer { display: none !important; } .zitate .spur, .blog-karten.wischen { overflow: visible; flex-wrap: wrap; } }

.formular .termine .termin-hinweis { background: #f6f6f6; border-left: 3px solid var(--rot); padding: 6px 10px; margin: 0 0 8px; font-size: 14px; line-height: 21px; }

.faq .faq-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 22px; }
.faq .faq-sprung { font-size: 15px; }
.faq .faq-alle[hidden] { display: none; }
.faq-frage { border-bottom: 1px solid #dedede; }
.faq-gruppe > .faq-frage:first-of-type, .faq-kurz > .titel + .faq-frage { border-top: 1px solid #dedede; }
.faq-frage > summary { list-style: none; cursor: pointer; position: relative; padding: 16px 44px 16px 0; font: 600 17px/1.45 "Open Sans", Arial, sans-serif; color: var(--titel); }
.faq-frage > summary::-webkit-details-marker { display: none; }
.faq-frage > summary::after { content: "+"; position: absolute; right: 6px; top: 50%; margin-top: -15px; font: 300 30px/30px "Open Sans", Arial, sans-serif; color: var(--rot); transition: transform .2s; }
.faq-frage[open] > summary::after { transform: rotate(45deg); }
.faq-frage > summary:hover { color: var(--rot); }
.faq-frage > summary:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.faq-antwort { padding: 0 0 16px; }
.faq-antwort > p { margin: 0 0 12px; }
.faq .faq-knopf { margin: 22px 0 26px; }
.faq-gruppe h2 { font-size: 28px; line-height: 1.2; text-transform: uppercase; margin: 44px 0 14px; }
.faq-hilfe { border-left: 3px solid var(--rot); padding: 2px 0 2px 16px; margin: 4px 0 12px; }
.faq-hilfe p { margin: 0 0 6px; }
.faq-hilfe strong { white-space: nowrap; }
.text .faq-hilfe ul { margin: 0; }
.faq-kurz { margin-top: 46px; }

.knopf-umriss.rot { color: var(--rot); border-color: var(--rot); text-transform: uppercase; letter-spacing: .3px; }
.knopf-umriss.rot:hover, .knopf-umriss.rot:focus { background: transparent; color: #fff; }
.knopf-umriss.rot::before { background: var(--rot); }
.faq-kurz .faq-mehr { margin: 28px 0 0; font-weight: 400; }
.faq-kurz .faq-zeile { margin: 64px 0 0; background: #f7f7f7; padding: 18px 20px; font-size: 15px; line-height: 1.55; }
.faq-kurz .faq-zeile a { display: inline-block; margin-top: 6px; }
@media (max-width: 767px) { .faq-kurz .faq-mehr .knopf-umriss { display: block; text-align: center; } }

.link-zeile { margin: 18px 0 0; font-weight: 600; }
.stimmen-hinweis { max-width: 750px; margin: 18px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: #595959; }
@media (prefers-reduced-motion: reduce) { .faq-frage > summary::after { transition: none; } }

.titelbalken.mit-zeile { padding: 90px 0 84px; }
.titelbalken .balken-zeile { font: 400 18px/1.55 "Open Sans", Arial, sans-serif; color: rgba(255, 255, 255, .92); margin: 18px 0 0; max-width: 640px; }
.titelbalken .balken-knoepfe { margin-top: 26px; }
.titelbalken .knopf-hero { display: inline-block; font: 400 20px/16px var(--serif-titel); text-transform: uppercase; color: #fff; background: var(--rot); text-decoration: none; padding: 15px 30px; border: 1px solid transparent;
  transition: background-color var(--kurz), box-shadow var(--kurz), transform var(--kurz); }
.titelbalken .knopf-hero:hover { background: var(--rot-dunkel); color: #fff; box-shadow: 0 6px 16px rgba(228, 5, 34, .22); }
.titelbalken .knopf-hero-umriss { display: inline-block; font: 400 20px/16px var(--serif-titel); text-transform: uppercase; color: #fff; text-decoration: none; padding: 14px 26px; border: 1px solid #fff;
  transition: background-color var(--kurz), color var(--kurz), transform var(--kurz); }
.titelbalken .knopf-hero-umriss:hover, .titelbalken .knopf-hero-umriss:focus-visible { background: #fff; color: #000; }
.titelbalken .knopf-hero:active, .titelbalken .knopf-hero-umriss:active { transform: scale(.97); }
@media (max-width: 767px) {
  .titelbalken.mit-zeile { padding: 50px 0 46px; }
  .titelbalken.mit-zeile h1 { font-size: 30px; line-height: 34px; }
  .titelbalken .balken-zeile { font-size: 15px; margin-top: 14px; }
  .titelbalken .balken-knoepfe { justify-content: flex-start; margin-top: 20px; }
  .titelbalken .knopf-hero, .titelbalken .knopf-hero-umriss { font-size: 15px; padding: 13px 18px; }
}
.sv-seite .text h2 { margin: 40px 0 14px; }
.sv-seite .text h2:first-child { margin-top: 0; }
.sv-kasten { margin: 30px 0 10px; }
.sv-kasten .seitenkasten { margin: 0; }
@media (min-width: 768px) {
  .sv-kasten .seitenkasten { display: grid; grid-template-columns: 42% 1fr; align-items: center; }
  .sv-kasten .seitenkasten > a { display: block; height: 100%; }
  .sv-kasten .seitenkasten img { height: 100%; object-fit: cover; }
}
.beitrag-stand { font-size: 14px; color: var(--grau-eyebrow); margin: -8px 0 24px; }
.beitrag-quellen { margin: 36px 0 0; font-size: 14px; line-height: 1.6; }
.beitrag-quellen h2 { font-size: 20px; line-height: 1.4; margin: 0 0 12px; }
.beitrag-quellen ul li { line-height: 1.6; margin-bottom: 6px; }
.faq-sms { margin: 4px 0 16px; }

.faq-einleitung { font-size: 18px; line-height: 1.55; margin: 0 0 26px; }
.faq-quelle { font-size: 14px; line-height: 1.5; color: #595959; margin: 4px 0 4px; }
.faq-irrtuemer { background: #f7f7f7; border-left: 3px solid var(--rot); padding: 18px 22px 8px; margin: 44px 0 34px; }
.faq-irrtuemer h2 { font-size: 24px; line-height: 1.2; text-transform: uppercase; margin: 0 0 12px; }
.text .faq-irrtuemer ul { margin: 0 0 10px; }
.faq-irrtuemer li { margin: 0 0 10px; }
.faq-antwort .kv a { white-space: nowrap; }

.formular .ort-anzeige { margin: 0 0 15px; padding: 10px 12px 4px; background: #fff; border: 1px solid #e0e0e0; }
.ort-anzeige .oa-titel { margin: 0 0 6px; font: 700 12px/1.2 "Open Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #333; }
.ort-anzeige .oa-orte { list-style: none; margin: 0; padding: 0; }
.ort-anzeige .oa-orte li { position: relative; margin: 0 0 6px; padding: 0 0 0 20px; font-size: 14px; line-height: 20px; color: #1a1a1a; transition: color var(--kurz); }
.ort-anzeige .oa-orte li::before { content: ""; position: absolute; left: 0; top: 2px; width: 12px; height: 16px; border: 0; transform: none; background-color: #8c8c8c;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill-rule='evenodd' d='M6 0C2.7 0 0 2.6 0 5.9 0 10.3 6 16 6 16s6-5.7 6-10.1C12 2.6 9.3 0 6 0zm0 8.3a2.4 2.4 0 1 1 0-4.8 2.4 2.4 0 0 1 0 4.8z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill-rule='evenodd' d='M6 0C2.7 0 0 2.6 0 5.9 0 10.3 6 16 6 16s6-5.7 6-10.1C12 2.6 9.3 0 6 0zm0 8.3a2.4 2.4 0 1 1 0-4.8 2.4 2.4 0 0 1 0 4.8z'/%3E%3C/svg%3E") no-repeat center / contain; transition: background-color var(--kurz); }
.ort-anzeige .oa-kopf, .ort-anzeige .oa-wo { display: block; }
.ort-anzeige .oa-tage { font-weight: 600; }
.ort-anzeige .oa-teil { white-space: nowrap; }
.ort-anzeige .oa-wo { font-size: 13px; color: #595959; transition: color var(--kurz); }
.ort-anzeige.gewaehlt li, .ort-anzeige.gewaehlt li .oa-wo { color: #c9c9c9; }
.ort-anzeige.gewaehlt li.an { color: #000; animation: ort-an var(--mittel) var(--aus); }
.ort-anzeige.gewaehlt li.an .oa-wo { color: #333; }
.ort-anzeige.gewaehlt li.an::before { background-color: var(--rot); }
.ort-anzeige.gewaehlt li:not(.an)::before { background-color: #e6e6e6; }
@keyframes ort-an { from { transform: translateX(-4px); } }

@media (max-width: 359px) { .raster-woche .rw-tag .rw-uhr { display: none; } }
@media (min-width: 768px) { .formular .termine .raster-woche label.termin { min-height: 44px; } }

@property --kmd-ring { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.start-kacheln { margin-top: 28px; }
.start-kacheln .titel { margin-bottom: 16px; }
.start-kacheln .titel h2 { font-size: 22px; line-height: 1.25; margin-bottom: 12px; hyphens: manual; }
.start-kacheln .titel .linie { margin-bottom: 0; }
.text ul.kacheln, .kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  width: 100%; max-width: 400px; }
.text ul.kacheln li, .kacheln li { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1 / 1;
  margin: 0; padding: 0 15%; border-radius: 50%; text-align: center; overflow: hidden; color: #111; hyphens: manual; line-height: 1.4;
  background: radial-gradient(circle at 32% 26%, #fff 0%, #f7f7f7 50%, #ececec 100%); box-shadow: 0 14px 22px -18px rgba(0, 0, 0, .3); }
.text ul.kacheln li::before, .kacheln li::before { content: ""; position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; border: 0;
  border-radius: 50%; transform: none; background: conic-gradient(var(--rot) var(--kmd-ring), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  transition: --kmd-ring 1.8s cubic-bezier(.45, 0, .25, 1); }
.kacheln li > * { position: relative; z-index: 1; }
.kacheln li strong { display: block; margin: 0 0 6px; font: 700 17px/1.25 Arial, Helvetica, sans-serif; letter-spacing: .2px; color: #000; }
.kacheln li span { display: block; font-size: 13.5px; line-height: 1.4; color: #444; }
.text ul.kacheln li:nth-child(2)::before, .kacheln li:nth-child(2)::before { transition-delay: .4s; }
.text ul.kacheln li:nth-child(3)::before, .kacheln li:nth-child(3)::before { transition-delay: .8s; }
.text ul.kacheln li:nth-child(4)::before, .kacheln li:nth-child(4)::before { transition-delay: 1.2s; }
.start-kacheln.lade:not(.geladen) .kacheln li::before { --kmd-ring: 0deg; transition: none; }
.start-kacheln .kacheln-zeile { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #333; }
@media (min-width: 768px) {
  .intro-links { display: flex; flex-direction: column; }
  .start-kacheln { margin-top: auto; padding-top: 32px; }
  .start-kacheln .titel { margin-bottom: 18px; }
}
@media (min-width: 1200px) { .text ul.kacheln, .kacheln { max-width: 440px; } }
@media (min-width: 768px) and (max-width: 991px) {
  .text ul.kacheln li, .kacheln li { padding: 0 12%; }
  .kacheln li strong { font-size: 15.5px; }
  .kacheln li span { font-size: 12.5px; }
}
@media (max-width: 767px) {
  .text ul.kacheln, .kacheln { max-width: none; }
  .text ul.kacheln li, .kacheln li { padding: 0 13%; }
  .kacheln li strong { font-size: 15.5px; }
  .kacheln li span { font-size: 12.5px; }
}
@media (max-width: 374px) {
  .text ul.kacheln, .kacheln { gap: 8px; }
  .text ul.kacheln li, .kacheln li { padding: 0 11%; }
  .kacheln li strong { font-size: 14.5px; margin-bottom: 4px; }
  .kacheln li span { font-size: 12px; line-height: 1.35; }
}
@media (max-width: 339px) {
  .text ul.kacheln, .kacheln { margin: 0 -8px; width: calc(100% + 16px); gap: 6px; }
  .text ul.kacheln li, .kacheln li { padding: 0 7%; }
  .kacheln li strong { font-size: 13px; letter-spacing: 0; margin-bottom: 3px; }
  .kacheln li span { font-size: 11px; line-height: 1.3; }
}

@media (min-width: 992px) { .hero .inhalt { top: 208px; } }

@media (max-width: 374px) { .hero .zeile1 { font-size: min(34px, calc((100vw - 30px) / 10.1)); line-height: 1.06; } }

.titel .einstieg { margin: 0; font-size: 18px; line-height: 1.55; color: #1a1a1a; }
@media (max-width: 767px) { .titel .einstieg { font-size: 16px; line-height: 1.6; } }

@media (min-width: 768px) { .intro .raster > .sp-6 > .probe-kasten { height: 100%; } }
@media (min-width: 768px) and (max-width: 991px) { .intro .probe-kasten .titel h2 { font-size: 32px; line-height: 36px; } }

@media (min-width: 768px) and (max-width: 799px) { .nav > ul > li > a { padding: 0 6px; } }

.sv-zeichen, .sv-fakten-liste svg, .sv-mitbringen svg { fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-zeichen *, .sv-fakten-liste svg *, .sv-mitbringen svg * { vector-effect: non-scaling-stroke; }
.sv-zeichen { display: block; width: 40px; height: 40px; }

.sv-fakten { margin-top: -10px; }
.sv-fakten-liste { list-style: none; margin: 0; padding: 0 0 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; border-bottom: 1px solid #e3e3e3; }
.sv-fakten-liste li { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 17px/1.3 "Open Sans", Arial, sans-serif; color: #111; white-space: nowrap; }
.sv-fakten-liste svg { width: 26px; height: 26px; flex: none; }

.sv-lernen { padding-top: 44px; }
.sv-einstieg { max-width: 780px; margin: 0 0 22px; font-size: 18px; line-height: 1.6; color: #1a1a1a; }
.sv-szene-kopf { margin: 0 0 14px; font-size: 16px; line-height: 1.5; font-style: italic; color: #333; }
.sv-phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sv-phasen li { margin: 0; padding: 24px 22px 24px; border: 1px solid #d6d6d6; border-bottom: 0; display: flex; flex-direction: column; }
.sv-phasen h3 { margin: 16px 0 8px; font: 700 19px/1.25 var(--serif-titel); text-transform: uppercase; letter-spacing: .2px; color: #000; hyphens: manual; overflow-wrap: normal; }
.sv-phasen .sv-technik { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: #111; }
.sv-phasen .sv-szene { margin: auto 0 0; padding-top: 14px; border-top: 1px solid #e6e6e6; font-size: 15px; line-height: 1.55; font-style: italic; color: #3d3d3d; }
.sv-fundament { margin: 0; padding: 18px 24px; background: #141414; color: #fff; font-size: 17px; line-height: 1.5; text-align: center; }
.sv-fundament strong { color: #fff; }
.sv-schluss { max-width: 780px; margin: 28px 0 0; font-size: 18px; line-height: 1.55; font-weight: 600; color: #111; }
.sv-taeter { max-width: 780px; margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: #333; }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .sv-phasen li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .sv-phasen .sv-szene { margin-top: 0; }
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sv-phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-phasen li { border-bottom: 1px solid #d6d6d6; }
  .sv-phasen li:nth-child(n+3) { border-bottom: 0; }
}
@media (max-width: 767px) {
  .sv-phasen { grid-template-columns: 1fr; }
  .sv-phasen li { display: grid; grid-template-columns: 40px 1fr; gap: 0 16px; padding: 20px 18px; border-bottom: 1px solid #d6d6d6; }
  .sv-phasen li:last-child { border-bottom: 0; }
  .sv-phasen .sv-zeichen { grid-row: 1 / span 3; width: 36px; height: 36px; }
  .sv-phasen h3 { margin: 4px 0 6px; font-size: 18px; }
  .sv-phasen .sv-technik { margin-bottom: 12px; }
  .sv-einstieg, .sv-schluss { font-size: 17px; }
}

.sv-band { background: #141414; color: #fff; padding: 64px 0 60px; text-align: center; }
.sv-band-satz { max-width: 860px; margin: 0 auto; font: 400 34px/1.25 var(--serif-titel); text-transform: uppercase; color: #fff; hyphens: manual; }
.sv-band .linie { display: block; width: 30px; height: 2px; margin: 24px auto 28px; background: var(--rot); }
.sv-band-knopf { margin: 0; }
.sv-band .knopf { padding: 13px 28px; font-size: 15px; border-color: var(--rot); }
@media (max-width: 767px) { .sv-band { padding: 44px 0 42px; } .sv-band-satz { font-size: 24px; } }

.sv-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.sv-karte { padding-top: 22px; border-top: 3px solid #111; }
.sv-karte .sv-zeichen { width: 34px; height: 34px; margin-bottom: 14px; }
.sv-karte h2 { margin: 0 0 12px; font: 400 24px/1.25 var(--serif-titel); text-transform: uppercase; color: #000; hyphens: manual; }
.sv-karte p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.sv-karte p:last-child { margin-bottom: 0; }
.sv-chips { list-style: none; margin: 2px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chips li { margin: 0; padding: 6px 11px; border: 1px solid #cfcfcf; font-size: 14px; line-height: 1.3; color: #222; }

.sv-regel { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid #e2e2e2; font-size: 15px; line-height: 1.55; color: #444; }
@media (max-width: 991px) { .sv-drei { grid-template-columns: 1fr; gap: 36px; } }

.sv-zeitleiste { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 34px; align-items: start; margin: 0 0 34px; }
.sv-dauer { margin: 0; font-size: 17px; line-height: 1.3; color: #111; }
.sv-dauer span { display: block; font-size: 14px; color: #555; }
.sv-dauer strong { display: block; margin: 2px 0 0; font: 700 64px/1 var(--serif-titel); color: #000; }
.sv-teile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
.sv-teile li { position: relative; margin: 0; padding: 24px 18px 0 0; }
.sv-teile li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #cfcfcf; }
.sv-teile li:nth-child(2)::before { background: #7a7a7a; }
.sv-teile li:nth-child(3)::before { background: #141414; }
.sv-teile strong { display: block; margin: 0 0 6px; font: 700 18px/1.3 var(--serif-titel); text-transform: uppercase; color: #000; hyphens: manual; }
.sv-teile span { display: block; font-size: 15px; line-height: 1.5; color: #333; }
.sv-techniken { margin: 0 0 34px; padding: 26px 28px 24px; border: 1px solid #d6d6d6; }
.sv-techniken h3 { margin: 0 0 18px; font: 700 18px/1.3 "Open Sans", Arial, sans-serif; text-transform: none; color: #000; }
.sv-techniken ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sv-techniken li { display: flex; align-items: center; gap: 14px; margin: 0; font: 700 19px/1.3 var(--serif-titel); text-transform: uppercase; color: #000; }
.sv-techniken .sv-zeichen { width: 44px; height: 44px; flex: none; }
.sv-techniken p { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: #444; }
.sv-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 34px; }
.sv-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sv-woche { max-width: 780px; }
.sv-woche p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.sv-mitbringen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.sv-mitbringen-titel { font-weight: 700; }
.sv-mitbringen > span:not(.sv-mitbringen-titel) { display: inline-flex; align-items: center; gap: 8px; }
.sv-mitbringen svg { width: 26px; height: 26px; flex: none; }
@media (max-width: 767px) {
  .sv-zeitleiste { grid-template-columns: 1fr; gap: 18px; }
  .sv-dauer strong { font-size: 52px; }
  .sv-teile { grid-template-columns: 1fr; gap: 16px; }
  .sv-teile li { padding: 0 0 0 22px; }
  .sv-teile li::before { right: auto; bottom: 0; width: 6px; height: auto; }
  .sv-techniken { padding: 22px 18px 20px; }
  .sv-techniken ul { grid-template-columns: 1fr; gap: 12px; }
  .sv-techniken .sv-zeichen { width: 38px; height: 38px; }
  .sv-fotos { grid-template-columns: 1fr 1fr; }
  .sv-fotos img:first-child { grid-column: 1 / -1; }
}

.sv-wo-einstieg { margin: 0 0 14px; font-size: 16px; }
.sv-tage { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sv-tage li { margin: 0; }
.sv-tage a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 44px; padding: 14px 16px; border: 2px solid #111; color: #111; text-decoration: none; transition: background .2s, color .2s; }
.sv-tage a:hover, .sv-tage a:focus-visible { background: #111; color: #fff; }
.sv-tage strong { font: 700 24px/1.1 var(--serif-titel); text-transform: uppercase; }
.sv-tage .sv-zeit { font-size: 19px; font-weight: 600; }
.sv-tage .sv-halle-kurz { flex-basis: 100%; font-size: 14px; letter-spacing: .3px; }
.sv-hallen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.sv-halle h3 { margin: 16px 0 6px; font: 400 22px/1.25 var(--serif-titel); text-transform: uppercase; color: #000; }
.sv-halle p { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.sv-halle .sv-halle-tage { font-weight: 700; }
.sv-halle .knopf-umriss { margin-top: 10px; }
.sv-halle .lageplan figcaption a { color: inherit; text-decoration: underline; }
.sv-wo-zeile { margin: 26px 0 0; font-size: 15px; color: #333; }
@media (max-width: 767px) { .sv-tage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-hallen { grid-template-columns: 1fr; gap: 34px; } }

.sv-fragen-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sv-fragen-karten li { display: flex; flex-direction: column; margin: 0; padding: 22px 20px 20px; border: 1px solid #d6d6d6; }
.sv-fragen-karten h3 { margin: 0 0 10px; font: 700 18px/1.35 "Open Sans", Arial, sans-serif; text-transform: none; color: #000; }
.sv-fragen-karten p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #333; }
.sv-fragen-karten .sv-fragen-link { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--rot); }
.sv-fragen-karten .sv-fragen-link::after { content: " →"; }
.sv-fragen-mehr { margin: 26px 0 0; }
.sv-fragen-zeile { max-width: 780px; margin: 56px 0 0; padding: 18px 20px; background: #f7f7f7; font-size: 15px; line-height: 1.55; }
.sv-fragen-zeile a { display: inline-block; margin-top: 6px; }
@media (min-width: 768px) and (max-width: 1199px) { .sv-fragen-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sv-fragen-karten { grid-template-columns: 1fr; } .sv-fragen-mehr .knopf-umriss { display: block; text-align: center; } }

.sv-schmal { max-width: 780px; }
.sv-schmal p { font-size: 16px; line-height: 1.6; }
.sv-h2 { margin: 0 0 14px; font: 400 28px/1.3 var(--serif-titel); text-transform: uppercase; color: #000; }
.sv-kosten { margin-bottom: 50px; }
.sv-schritte { list-style: none; counter-reset: sv-schritt; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sv-schritte li { counter-increment: sv-schritt; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 22px 22px 22px; border: 1px solid #d6d6d6; }
.sv-schritte li::before { content: counter(sv-schritt); margin-bottom: 4px; font: 400 44px/1 var(--serif-titel); color: #111; }
.sv-schritte strong { font: 700 18px/1.3 var(--serif-titel); text-transform: uppercase; color: #000; hyphens: manual; }
.sv-schritte span { font-size: 15px; line-height: 1.5; color: #333; }
.sv-ausschluss { padding-left: 14px; border-left: 3px solid #111; }
@media (max-width: 767px) { .sv-schritte { grid-template-columns: 1fr; } .sv-kosten { margin-bottom: 36px; } }

.sv-system-lead { font-size: 18px; line-height: 1.55; color: #111; }
.sv-faktenzeile { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sv-faktenzeile li { margin: 0; padding: 5px 10px; border: 1px solid #cfcfcf; font-size: 13px; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; color: #333; }
.sv-system + .noch-nicht-sicher { margin-top: 10px; }

.sv-schwerpunkt { max-width: 780px; margin: 28px 0 0; font-size: 18px; line-height: 1.55; font-weight: 600; color: #111; }
.sv-schwerpunkt + .sv-schluss { margin-top: 10px; }
@media (max-width: 767px) { .sv-schwerpunkt { font-size: 17px; } }

.sv-start-knopf { margin: -8px 0 30px; }

.seitenkasten .knopf { margin-top: 10px; }

.team-lead { max-width: 760px; margin: -6px auto 30px; text-align: center; }

.wegweiser { margin: 0 0 28px; padding: 14px 18px; background: var(--flaeche); border-left: 3px solid var(--rot); font-weight: 600; line-height: 1.5; }

.beitrag-schluss .schluss-link { font-weight: 600; }

@media (min-width: 992px) { .hero .zeile1 { font-size: 50px; line-height: 49px; } }
@media (max-width: 767px) { .hero .zeile1 { font-size: min(34px, calc((100vw - 30px) / 12.6)); line-height: 1.06; } }