/* Stengel Dienstleistungen. Farben, Schriften und Abstände nach DESIGN.md (Original-Look der alten Seite, verfeinert). */
@font-face { font-family: "Nunito"; src: url(/assets/fonts/nunito-var-v1.woff2) format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url(/assets/fonts/nunitosans-var-v1.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --gruen: #14691B; --tanne: #0D3F12; --mint: #DDF2E1; --anthrazit: #1E221F; --stein: #F3F4F1; --linie: #D6DBD4; --grau: #56605A;
  --kopf: "Nunito", "Trebuchet MS", system-ui, sans-serif; --text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1240px; --gutter: 20px; --rand: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --kopfhoehe: 72px;
}
@media (min-width: 760px) { :root { --gutter: 32px; --kopfhoehe: 84px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }
@media (min-width: 1800px) { :root { --max: 1440px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfhoehe) + 16px); }
body { margin: 0; background: #fff; color: var(--anthrazit); font: 400 17px/1.6 var(--text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: clip; }
@media (min-width: 760px) { body { font-size: 18px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gruen); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tanne); }
h1, h2, h3 { font-family: var(--kopf); font-weight: 800; line-height: 1.1; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 1.2rem + 3.2vw, 4.2rem); hyphens: auto; overflow-wrap: break-word; }
h2, .h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem); color: var(--gruen); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--anthrazit); color: #fff; padding: 10px 16px; }
.skip:focus { top: 12px; }
.klein { font-size: .86rem; color: var(--grau); }
.kicker { font: 800 .78rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--gruen); margin: 0 0 16px; }
.ic { width: 20px; height: 20px; flex-shrink: 0; }
.pfeil, .raus { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; }

/* Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 22px; border: 2px solid var(--gruen); border-radius: 4px; background: var(--gruen); color: #fff; font: 800 1rem/1.2 var(--kopf); text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.knopf:hover { background: var(--tanne); border-color: var(--tanne); color: #fff; }
.knopf:hover .pfeil { transform: translateX(3px); }
.knopf-rand { background: transparent; color: var(--gruen); }
.knopf-rand:hover { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.knopf-hell { background: #fff; border-color: #fff; color: var(--tanne); }
.knopf-hell:hover { background: var(--mint); border-color: var(--mint); color: var(--tanne); }
.knopf-rand-hell { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.knopf-rand-hell:hover { background: #fff; border-color: #fff; color: var(--tanne); }
.textlink { display: inline-flex; align-items: center; gap: 8px; font: 800 1rem var(--kopf); text-decoration: none; }
.textlink:hover .pfeil { transform: translateX(3px); }

/* Hinweisleiste */
.hinweisleiste { background: var(--tanne); color: #fff; font-size: .95rem; }
.hinweisleiste p { margin: 0; padding: 10px 0; }
.hinweisleiste a { color: #fff; font-weight: 700; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf-in { display: flex; align-items: center; gap: 24px; height: var(--kopfhoehe); }
.marke { display: block; flex-shrink: 0; }
.marke img { height: 56px; width: auto; }
@media (min-width: 760px) { .marke img { height: 66px; } }
.hauptnav { margin-left: auto; display: none; }
.hauptnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.hauptnav a { display: block; padding: 10px 12px; color: var(--anthrazit); font: 700 .98rem/1.2 var(--kopf); text-decoration: none; border-radius: 4px; position: relative; }
.hauptnav a:hover { color: var(--gruen); background: var(--stein); }
.hauptnav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--gruen); }
.kopf-tel { display: none; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 4px; background: var(--gruen); color: #fff; font: 800 .98rem var(--kopf); text-decoration: none; white-space: nowrap; }
.kopf-tel:hover { background: var(--tanne); color: #fff; }
.menu-knopf { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 4px 8px 12px; background: none; border: 0; color: var(--anthrazit); font: 800 1rem var(--kopf); cursor: pointer; }
.menu-linien { display: grid; gap: 6px; width: 24px; }
.menu-linien i { display: block; height: 2px; background: currentColor; transition: transform .2s ease; }
.menu-knopf[aria-expanded="true"] .menu-linien i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-knopf[aria-expanded="true"] .menu-linien i:last-child { transform: translateY(-4px) rotate(-45deg); }
.handymenue { border-top: 1px solid var(--linie); background: #fff; max-height: calc(100vh - var(--kopfhoehe)); overflow-y: auto; }
.handy-liste { list-style: none; margin: 0; padding: 8px 0; }
.handy-liste a { display: block; padding: 14px 0; border-bottom: 1px solid var(--linie); color: var(--anthrazit); font: 800 1.25rem var(--kopf); text-decoration: none; }
.handy-liste a[aria-current] { color: var(--gruen); }
.handy-kontakt { display: grid; gap: 4px; padding: 12px 0 24px; margin: 0; }
.handy-kontakt a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
@media (min-width: 1180px) {
  .hauptnav { display: block; }
  .kopf-tel { display: inline-flex; }
  .menu-knopf, .handymenue { display: none !important; }
}

/* Brotkrumen */
.krumen ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 14px 0 0; font-size: .86rem; color: var(--grau); }
.krumen li + li::before { content: "›"; margin-right: 6px; color: var(--linie); }
.krumen a { color: var(--grau); text-decoration: none; }
.krumen a:hover { color: var(--gruen); text-decoration: underline; }

/* Startbild */
.hero { position: relative; isolation: isolate; color: #fff; min-height: min(86vh, 860px); display: flex; align-items: flex-end; overflow: hidden; background: var(--tanne); }
.hero-bild { position: absolute; inset: 0; z-index: -2; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,26,10,.82) 0%, rgba(8,26,10,.6) 38%, rgba(8,26,10,.12) 72%, rgba(8,26,10,0) 100%), linear-gradient(0deg, rgba(8,26,10,.55) 0%, rgba(8,26,10,0) 45%); }
.hero-in { padding-top: 120px; padding-bottom: 64px; }
.hero h1 { color: #fff; max-width: 20ch; margin-bottom: 20px; font-size: clamp(2.05rem, 1rem + 2.4vw, 3.35rem); }
@media (min-width: 760px) { h1 { hyphens: manual; } }
.hero .kicker { color: #CDEBD3; }
.hero-lead { font-size: clamp(1.06rem, 1rem + .35vw, 1.3rem); max-width: 40ch; color: rgba(255,255,255,.92); margin: 0; }
.hero-ort { margin: 28px 0 0; font-size: .9rem; color: rgba(255,255,255,.78); }
@media (max-width: 759px) {
  .hero { min-height: auto; display: block; background: var(--tanne); }
  .hero-bild { position: relative; height: 54vh; min-height: 300px; max-height: 460px; }
  .hero::before { inset: 0 0 auto 0; height: 0; }
  .hero-in { padding-top: 32px; padding-bottom: 40px; }
  .hero .knoepfe .knopf { flex: 1 1 100%; }
}
@media (min-width: 1000px) {
  .hero::before { background: linear-gradient(270deg, rgba(8,26,10,.84) 0%, rgba(8,26,10,.66) 40%, rgba(8,26,10,.14) 68%, rgba(8,26,10,0) 100%), linear-gradient(0deg, rgba(8,26,10,.45) 0%, rgba(8,26,10,0) 40%); }
  .hero-in { padding-left: max(var(--gutter), calc(46% + var(--gutter))); max-width: none; padding-right: var(--rand); }
  .hero-bild img { object-position: 30% 55%; }
}
@media (min-width: 1800px) { .hero-in { padding-bottom: 96px; } }

/* Abschnittsköpfe */
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 28px; }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf p { margin: 0; color: var(--grau); max-width: 46ch; }

/* Leistungsverzeichnis */
.leistungen { padding: 88px 0 72px; }
.weitere { padding: 80px 0 64px; border-top: 1px solid var(--linie); }
.verzeichnis { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.vz-zeile { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; padding: 28px 0; border-top: 1px solid var(--linie); }
.vz-link { position: absolute; inset: 0; z-index: 2; }
.vz-link:focus-visible { outline-offset: -3px; }
.vz-bild { overflow: hidden; background: var(--stein); aspect-ratio: 16 / 10; }
.vz-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.vz-kopf h3 { margin: 0 0 8px; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.9rem); transition: color .2s ease; }
.vz-kopf p { margin: 0; color: var(--grau); }
.vz-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vz-punkte li { position: relative; padding-left: 20px; }
.vz-punkte li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--gruen); }
.vz-mehr { display: inline-flex; align-items: center; gap: 8px; color: var(--gruen); font: 800 1rem var(--kopf); }
.vz-zeile:hover .vz-bild img { transform: scale(1.035); }
.vz-zeile:hover h3 { color: var(--gruen); }
.vz-zeile:hover .pfeil { transform: translateX(4px); }
@media (min-width: 900px) {
  .vz-zeile { grid-template-columns: 300px minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 12px; padding: 32px 0; align-items: start; }
  .vz-bild { grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
  .vz-kopf { grid-column: 2; }
  .vz-punkte { grid-column: 3; grid-row: 1 / span 2; padding-top: 6px; }
  .vz-mehr { grid-column: 2; grid-row: 2; align-self: end; }
}
@media (min-width: 1800px) { .vz-zeile { grid-template-columns: 360px minmax(0, 1.1fr) minmax(0, 1fr); } }

/* Über uns (Startseite) */
.ueber-teaser { padding: 96px 0; background: var(--stein); }
.ueber-raster { display: grid; gap: 40px; align-items: center; }
.ueber-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.ueber-text .fliess { font-size: 1.12rem; max-width: 56ch; }
.person { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--linie); max-width: 56ch; }
.person strong { font: 800 1.15rem var(--kopf); }
.person span { color: var(--grau); }
@media (min-width: 900px) { .ueber-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } .ueber-foto { max-width: 460px; } }

/* Band */
.band { position: relative; overflow: hidden; background: var(--gruen); color: #fff; padding: 72px 0; isolation: isolate; }
.band::after { content: ""; position: absolute; z-index: -1; right: -4%; top: 50%; width: min(620px, 60vw); aspect-ratio: 975 / 626; transform: translateY(-50%); background: url(/assets/logo/logo-hell-v1.png) center / contain no-repeat; opacity: .06; }
.band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.band h2 { color: #fff; margin: 0; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); }
.band .knoepfe { margin: 0; }

/* Kontakt-Block mit Typenschild und Formular */
.kontakt-block { padding: 96px 0; background: var(--stein); }
.ueber-teaser + .band + .kontakt-block, .band + .kontakt-block { background: #fff; }
.kontakt-raster { display: grid; gap: 48px; }
.kontakt-lead { font-size: 1.12rem; max-width: 46ch; color: var(--grau); }
.kontakt-form { background: #fff; border: 1px solid var(--linie); padding: 28px 20px; align-self: start; }
.band + .kontakt-block .kontakt-form { background: var(--stein); border-color: transparent; }
@media (min-width: 760px) { .kontakt-form { padding: 40px; } }
@media (min-width: 1000px) { .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }

.schild { position: relative; margin-top: 32px; background: var(--tanne); color: #fff; padding: 28px 24px 24px; border-radius: 6px;
  background-image: radial-gradient(circle at 14px 14px, rgba(255,255,255,.32) 0 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 14px) 14px, rgba(255,255,255,.32) 0 2.5px, transparent 3px), radial-gradient(circle at 14px calc(100% - 14px), rgba(255,255,255,.32) 0 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), rgba(255,255,255,.32) 0 2.5px, transparent 3px); }
@media (min-width: 760px) { .schild { padding: 36px 36px 32px; } }
.schild-kopf { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; }
.schild-kopf img { height: 54px; width: auto; }
.schild-titel { margin: 0; font: 800 1.15rem/1.2 var(--kopf); letter-spacing: .02em; }
.schild-daten { margin: 0; display: grid; grid-template-columns: 1fr; column-gap: 28px; }
@media (min-width: 560px) { .schild-daten { grid-template-columns: 1fr 1fr; } .schild-daten > div:nth-child(4), .schild-daten > div:nth-child(5) { grid-column: 1 / -1; } }
.schild-daten > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); }
.schild-daten dt { font: 800 .74rem/1.9 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #A9D7B2; }
.schild-daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.schild-daten a { color: #fff; text-decoration: none; }
.schild-daten a:hover { text-decoration: underline; }
.schild-klein { display: block; font-weight: 400; font-size: .92rem; color: rgba(255,255,255,.78); }
.zeit { display: block; }
.zeit span:first-child::after { content: ":"; }
.schild-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); }
.schild-knoepfe .knopf { min-height: 46px; padding: 10px 16px; font-size: .95rem; }
.schild .knopf-rand { border-color: rgba(255,255,255,.6); color: #fff; }
.schild .knopf-rand:hover { background: #fff; color: var(--tanne); border-color: #fff; }
.schild :focus-visible { outline-color: #fff; }

/* Formular */
.formular-felder { display: grid; gap: 18px 20px; }
@media (min-width: 640px) { .formular-felder { grid-template-columns: 1fr 1fr; } .feld.voll { grid-column: 1 / -1; } }
.feld label { display: block; margin-bottom: 6px; font: 800 .95rem var(--kopf); }
.feld .frei { font: 400 .82rem var(--text); color: var(--grau); margin-left: 4px; }
.pflicht { color: var(--gruen); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #B9C1B7; border-radius: 4px; background: #fff; color: var(--anthrazit); font: inherit; font-size: 1rem; }
.feld textarea { min-height: 140px; resize: vertical; }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%231E221F' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(20,105,27,.22); }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: #B3261E; }
.fallen { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .klein { margin: 18px 0 0; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.form-status { margin: 0; font-weight: 600; }
.form-status.fehler { color: #B3261E; }
.formular-erfolg { padding: 8px 0; outline: none; }
.formular-erfolg h2 { font-size: 1.6rem; }

/* Seitenkopf der Unterseiten */
.seitenkopf { display: grid; grid-template-columns: 1fr; background: #fff; }
.seitenkopf-text { padding: 32px var(--gutter) 40px; }
.seitenkopf .lead { font-size: clamp(1.08rem, 1rem + .3vw, 1.28rem); max-width: 52ch; }
.seitenkopf .lead p:last-child { margin-bottom: 0; }
.seitenkopf-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.seitenkopf.ohnebild .seitenkopf-text { max-width: var(--max); width: 100%; margin-inline: auto; padding-bottom: 56px; }
@media (min-width: 1000px) {
  .seitenkopf:not(.ohnebild) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); min-height: 560px; align-items: stretch; }
  .seitenkopf:not(.ohnebild) .seitenkopf-text { padding: 72px 64px 72px var(--rand); align-self: center; }
  .seitenkopf-bild { position: relative; }
  .seitenkopf-bild img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .seitenkopf.ohnebild .seitenkopf-text { padding-top: 56px; padding-bottom: 72px; }
}
@media (min-width: 1800px) { .seitenkopf:not(.ohnebild) { min-height: 640px; } }

/* Abschnitte */
.fliess > :last-child { margin-bottom: 0; }
.fliess ul { padding: 0; list-style: none; display: grid; gap: 8px; }
.fliess ul li { position: relative; padding-left: 22px; }
.fliess ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--gruen); }
.abschnitt { padding: 80px 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.abschnitt-raster { display: grid; gap: 32px; align-items: center; }
.abschnitt-text { max-width: 60ch; }
.abschnitt-text .fliess { font-size: 1.06rem; }
.abschnitt-fotos { display: grid; gap: 16px; }
.abschnitt-fotos.n2 { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
  .abschnitt.mitbild .abschnitt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 72px; }
  .abschnitt.mitbild.links .abschnitt-fotos { order: -1; }
}
.foto { margin: 0; overflow: hidden; background: var(--stein); }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto.hoch img { aspect-ratio: 4 / 5; }
.abschnitt-fotos .foto:only-child.hoch { max-width: 520px; }
.abschnitt.mitbild:not(.links) .abschnitt-fotos .foto:only-child.hoch { margin-left: auto; }
.foto figcaption { padding: 10px 0 0; font-size: .88rem; color: var(--grau); background: #fff; }
.nurbild h2 { margin-bottom: 24px; }
.galerie { display: grid; gap: 16px; }
@media (min-width: 700px) { .galerie.n2 { grid-template-columns: 1fr 1fr; } .galerie.n3, .galerie.n4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .galerie.n4 { grid-template-columns: repeat(4, 1fr); } }
.galerie .foto.quer-gross img { aspect-ratio: 16 / 8; }
@media (max-width: 699px) { .galerie .foto.quer-gross img { aspect-ratio: 4 / 3; } }
.galerie-block { padding: 0 0 80px; }
.abschnitt + .galerie-block { padding-top: 0; }

/* Über uns */
.person-block { padding: 88px 0; background: var(--stein); }
.person-raster { display: grid; gap: 40px; align-items: center; }
.person-foto img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.person-text h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); margin-bottom: 8px; }
.person-text .fliess { font-size: 1.15rem; color: var(--grau); }
@media (min-width: 900px) { .person-raster { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 80px; } }

/* Kontaktseite */
.kontakt-kopf .seitenkopf-text { padding-bottom: 48px; }
.kontakt-wege { list-style: none; margin: 32px 0 0; padding: 0; max-width: 720px; border-bottom: 1px solid var(--linie); }
.kontakt-wege li { border-top: 1px solid var(--linie); }
.kontakt-wege a { display: flex; align-items: center; gap: 18px; padding: 18px 4px; color: var(--anthrazit); text-decoration: none; font: 800 clamp(1.15rem, 1rem + .7vw, 1.6rem)/1.2 var(--kopf); overflow-wrap: anywhere; }
.kontakt-wege a .ic { width: 28px; height: 28px; color: var(--gruen); }
.kontakt-wege small { display: block; font: 700 .78rem/1.6 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.kontakt-wege a:hover { color: var(--gruen); }
.anfahrt { padding: 88px 0; }
.anfahrt-raster { display: grid; gap: 40px; align-items: center; }
.anfahrt-lage { font-size: 1.15rem; }
.anfahrt address { font-style: normal; margin-bottom: 24px; line-height: 1.7; }
@media (min-width: 900px) { .anfahrt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; } }

/* Blog */
.blog-liste { padding: 0 0 88px; }
.beitraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
@media (min-width: 760px) { .beitraege { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .beitraege { grid-template-columns: repeat(3, 1fr); } }
.beitrag-karte a { display: block; color: inherit; text-decoration: none; }
.beitrag-bild { overflow: hidden; aspect-ratio: 4 / 3; background: var(--stein); margin-bottom: 16px; }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; }
.beitrag-karte time { font-size: .86rem; color: var(--grau); }
.beitrag-karte h2 { font-size: 1.4rem; margin: 6px 0 8px; color: var(--anthrazit); }
.beitrag-karte a:hover h2 { color: var(--gruen); }
.beitrag-titelbild { margin-bottom: 24px; }
.leer { color: var(--grau); font-size: 1.1rem; }

/* Rechtstexte */
.rechtstext { padding: 0 0 96px; }
.rechtstext .fliess { max-width: 72ch; }
.rechtstext h2 { font-size: 1.35rem; color: var(--anthrazit); margin-top: 40px; }
.rechtstext a { overflow-wrap: anywhere; }

/* Fuß */
.fuss { background: var(--anthrazit); color: rgba(255,255,255,.82); padding: 72px 0 0; font-size: .97rem; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-raster { display: grid; gap: 36px; padding-bottom: 48px; }
@media (min-width: 700px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fuss-raster { grid-template-columns: 1.1fr 1fr 1.2fr 1fr; } }
.fuss-marke img { height: 70px; width: auto; margin-bottom: 16px; }
.fuss-h { font: 800 .78rem/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #A9D7B2; margin: 0 0 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss-zusatz { color: rgba(255,255,255,.6); font-size: .88rem; }
.fuss-zeiten span { display: block; color: rgba(255,255,255,.6); font-size: .88rem; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 22px; padding-bottom: 28px; border-top: 1px solid rgba(255,255,255,.14); font-size: .88rem; }
.fuss-unten ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss-unten p { margin: 0; color: rgba(255,255,255,.6); }

/* Handyleiste */
.handyleiste { display: none; }
@media (max-width: 759px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .handyleiste { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
  .handyleiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; color: var(--anthrazit); font: 800 .82rem var(--kopf); text-decoration: none; }
  .handyleiste a .ic { width: 22px; height: 22px; color: var(--gruen); }
  .handyleiste .handyleiste-haupt { background: var(--gruen); color: #fff; }
  .handyleiste .handyleiste-haupt .ic { color: #fff; }
  body.menue-offen .handyleiste { display: none; }
}

/* Auftritt beim Scrollen */
.js .auftritt { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.js .auftritt.ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .kopf, .handyleiste, .fuss, .formular { display: none !important; } }
.seitenkopf h1 { font-size: clamp(2.05rem, 1rem + 2.1vw, 3.2rem); hyphens: auto; overflow-wrap: normal; }
@media (min-width: 1000px) { .seitenkopf:not(.ohnebild) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.schild-daten > div { align-content: start; }
.fuss a:hover, .schild-daten a:hover { color: #fff; }
.handymenue nav { padding-top: 8px; }
@media (min-width: 1000px) { .hero-bild img { object-position: 30% 38%; } }