/* Gewerk-Stile — Seitenrahmen: Menü, fester Kopf, Projekte, Betrieb, Ablauf, Stimmen, Fragen,
   Kontaktwege, Öffnungszeiten, Formular, Fuß, Rechtsseiten.
   Hier stehen Aufbau und Verhalten. Aussehen setzt jede Gewerkseite über diese Variablen: */
:root {
  --b-akzent: #1f5bff;               /* Akzentfarbe (Nummern, Punkte, Linien) */
  --b-akzent-text: #fff;             /* Text auf Akzentfläche */
  --b-text-2: color-mix(in oklab, currentColor 76%, transparent);
  --b-linie: color-mix(in oklab, currentColor 17%, transparent);
  --b-karte: color-mix(in oklab, currentColor 5%, transparent);
  --b-radius: 8px;
  --b-titel: inherit;                /* Schrift der Zwischenüberschriften */
  --b-zitat: var(--b-titel);         /* Schrift der Kundenstimmen */
  --b-fehler: #c62828;
  --b-gut: #1f8a55;
  --b-abstand: clamp(5rem, 10vw, 9rem);

  --kopf-fest-grund: rgb(18 20 24 / .84);
  --kopf-fest-text: #fff;
  --kopf-fest-rand: rgb(255 255 255 / .1);

  --menue-grund: #121418;
  --menue-text: #fff;
  --menue-akzent: var(--b-akzent);
  --menue-linie: rgb(255 255 255 / .14);
  --menue-schrift: var(--b-titel);
  --menue-gewicht: 700;
}

.abschnitt { padding-block: var(--b-abstand); position: relative; }

/* ---------- Kopf: fest nach dem Held ---------- */
.kopf.ist-fest {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-block: .65rem;
  background: var(--kopf-fest-grund); color: var(--kopf-fest-text);
  border-bottom: 1px solid var(--kopf-fest-rand);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  animation: kopf-rein .5s cubic-bezier(.2,.8,.2,1) backwards;
  transition: translate .38s cubic-bezier(.2,.8,.2,1);
}
.kopf.ist-fest.ist-weg { translate: 0 -110%; }
@keyframes kopf-rein { from { translate: 0 -100%; } }
.kopf nav a.ist-aktiv { opacity: 1; }
.kopf-aktionen { display: none; align-items: center; gap: .5rem; }
.menue-knopf, .kopf-ruf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.75rem; border: 1px solid var(--menue-knopf-rand, color-mix(in oklab, currentColor 35%, transparent));
  background: var(--menue-knopf-grund, transparent); color: inherit;
  border-radius: var(--menue-knopf-r, 99px); font: 600 .92rem/1 inherit; text-decoration: none;
}
.menue-knopf { padding: 0 1rem 0 .85rem; }
.kopf-ruf { width: 2.75rem; padding: 0; }
.kopf-ruf svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.menue-striche { display: grid; gap: 5px; width: 1.05rem; }
.menue-striche i { display: block; height: 1.6px; background: currentColor; border-radius: 2px; }
.menue-striche i:last-child { width: 70%; }
@media (max-width: 960px) {
  .kopf.hat-menue > nav { display: none !important; }
  .kopf.hat-menue .kopf-aktionen { display: inline-flex; }
}

/* ---------- Menü (modaler Dialog, ganze Fläche) ---------- */
.menue {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: max(1rem, env(safe-area-inset-top)) var(--rand, 1.25rem) max(1.5rem, env(safe-area-inset-bottom));
  border: 0; background: var(--menue-grund); color: var(--menue-text); overflow: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .3s ease, display .3s allow-discrete, overlay .3s allow-discrete;
}
.menue[open] { display: flex; flex-direction: column; opacity: 1; }
@starting-style { .menue[open] { opacity: 0; } }
.menue::backdrop { background: transparent; }
html:has(.menue[open]) { overflow: hidden; }
.menue-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.2rem; }
.menue-kopf .marke { color: inherit; }
.menue-zu { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--menue-linie); background: transparent; color: inherit; }
.menue-zu svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menue-nav { margin-block: clamp(1.5rem, 6vh, 3rem) 2rem; }
.menue-nav ol { list-style: none; margin: 0; padding: 0; }
.menue-nav li { opacity: 1; translate: 0 0; transition: opacity .45s ease, translate .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 45ms + 80ms); }
@starting-style { .menue[open] .menue-nav li { opacity: 0; translate: 0 1.2rem; } }
.menue-nav a {
  display: flex; align-items: baseline; gap: 1rem; padding: .7rem 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--menue-linie);
  font-family: var(--menue-schrift); font-weight: var(--menue-gewicht); font-size: clamp(1.9rem, 8.5vw, 3rem); line-height: 1.05;
}
.menue-nav a:hover, .menue-nav a:focus-visible { color: var(--menue-akzent); }
.menue-nr { font: 600 .78rem/1 system-ui, sans-serif; letter-spacing: .08em; color: var(--menue-akzent); min-width: 1.6rem; }
.menue-fuss { margin-top: auto; display: grid; gap: .35rem; }
.menue-ruf { font-family: var(--menue-schrift); font-weight: var(--menue-gewicht); font-size: 1.7rem; text-decoration: none; color: var(--menue-akzent); }
.menue-mail { color: inherit; opacity: .85; }
.menue-anschrift { opacity: .6; font-size: .9rem; margin: 0; }

/* ---------- Einblenden ---------- */
.js [data-einblenden] {
  opacity: 0; translate: 0 2.2rem;
  transition: opacity .9s cubic-bezier(.2,.7,.1,1), translate 1.1s cubic-bezier(.2,.7,.1,1);
  transition-delay: calc(min(var(--i, 0), 6) * 90ms);
}
.js [data-einblenden].ist-sichtbar { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js [data-einblenden] { translate: 0 .6rem; transition-duration: .45s; } }
@media print { .js [data-einblenden] { opacity: 1 !important; translate: none !important; } }

/* ---------- Abschnittskopf: Titel links, Einleitung rechts ---------- */
.abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 1.2rem clamp(2rem, 6vw, 5rem); align-items: end; margin-bottom: clamp(2.4rem, 5vw, 4.2rem); }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf p { color: var(--b-text-2); }
@media (max-width: 820px) { .abschnitt-kopf { grid-template-columns: 1fr; } }

/* ---------- Projekte ---------- */
.projekte-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 5.5rem) clamp(1.2rem, 3vw, 2.6rem); }
.projekt { display: grid; gap: 1.2rem; align-content: start; }
.projekt:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3.2rem); align-items: end; }
.projekt-bild { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--b-radius); background: var(--b-karte); }
.projekt:first-child .projekt-bild { aspect-ratio: 16 / 10; }
.projekt-bild img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s cubic-bezier(.2,.7,.1,1), clip-path 1.3s cubic-bezier(.2,.7,.1,1) calc(min(var(--i, 0), 6) * 90ms); }
.projekt:hover .projekt-bild img { scale: 1.035; }
.js .projekt[data-einblenden] .projekt-bild img { clip-path: inset(10% 10% 10% 10%); }
.js .projekt[data-einblenden].ist-sichtbar .projekt-bild img { clip-path: inset(0 0 0 0); }
.projekt-bild figcaption {
  position: absolute; left: .8rem; bottom: .8rem; padding: .28rem .6rem; border-radius: 99px;
  font: 500 .72rem/1 system-ui, sans-serif; letter-spacing: .02em; color: #fff; background: rgb(0 0 0 / .42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.projekt-ort { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--b-text-2); }
.projekt h3 { font-family: var(--b-titel); font-size: clamp(1.55rem, 2.6vw, 2.35rem); margin: .45rem 0 .7rem; }
.projekt-text > p:not(.projekt-ort) { color: var(--b-text-2); max-width: 34rem; }
.projekt-daten { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--b-linie); }
.projekt-daten dt { font-size: .78rem; color: var(--b-text-2); }
.projekt-daten dd { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .projekte-liste { grid-template-columns: 1fr; }
  .projekt:first-child { grid-template-columns: 1fr; }
  .projekt:first-child .projekt-bild { aspect-ratio: 4 / 3; }
}

/* ---------- Betrieb ---------- */
.betrieb-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.6rem, 5vw, 4.5rem) clamp(1.2rem, 3vw, 2.5rem); }
.betrieb-text { grid-column: 1 / span 7; }
.betrieb-text h2 { margin: 0; }
.betrieb-lead { font-size: clamp(1.22rem, 2vw, 1.55rem); line-height: 1.45; margin-top: clamp(1.2rem, 3vw, 2rem); }
.betrieb-text p + p { margin-top: 1rem; color: var(--b-text-2); }
.siegel { grid-column: 9 / -1; align-self: end; list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.siegel li { display: flex; gap: .9rem; align-items: center; padding: .95rem 1.1rem; border: 1px solid var(--b-linie); border-radius: var(--b-radius); font-weight: 600; }
.siegel svg { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: var(--b-akzent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.siegel small { display: block; font-weight: 400; font-size: .82rem; color: var(--b-text-2); }
.grundsaetze { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.2rem, 3vw, 2.5rem); }
.grundsaetze li { padding-top: 1.3rem; border-top: 1px solid var(--b-linie); }
.grundsaetze h3 { font-family: var(--b-titel); font-size: clamp(1.35rem, 2vw, 1.7rem); margin-bottom: .5rem; }
.grundsaetze p { color: var(--b-text-2); }
.team { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.4rem clamp(1.2rem, 3vw, 2.5rem); }
.team li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .1rem 1rem; align-items: center; }
.team-bild { grid-row: span 2; width: 4.2rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--b-akzent); color: var(--b-akzent-text); font-weight: 700; letter-spacing: .03em; }
.team-bild img { width: 100%; height: 100%; object-fit: cover; }
.team b { align-self: end; font-size: 1.05rem; }
.team li > span:last-child { align-self: start; color: var(--b-text-2); font-size: .92rem; }
@media (max-width: 900px) {
  .betrieb-text, .siegel { grid-column: 1 / -1; }
  .grundsaetze { grid-template-columns: 1fr; }
}

/* ---------- Ablauf in Schritten ---------- */
.ablauf-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--schritte, 4), minmax(0, 1fr)); gap: 2.2rem clamp(1rem, 2.5vw, 2rem); counter-reset: schritt; }
.ablauf-schritte li { counter-increment: schritt; position: relative; padding-top: 3.4rem; border-top: 1px solid var(--b-linie); }
.ablauf-schritte li::before { content: counter(schritt, decimal-leading-zero); position: absolute; top: 1.1rem; left: 0; font: 700 .82rem/1 system-ui, sans-serif; letter-spacing: .1em; color: var(--b-akzent); }
.ablauf-schritte li::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--b-akzent); transform-origin: left; }
.js .ablauf-schritte li::after { scale: 0 1; transition: scale 1.1s cubic-bezier(.2,.7,.1,1) calc(var(--i, 0) * 160ms + 200ms); }
.js .ablauf-schritte li.ist-sichtbar::after { scale: 1 1; }
.ablauf-schritte h3 { font-family: var(--b-titel); font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: .45rem; }
.ablauf-schritte p { color: var(--b-text-2); font-size: .98rem; }
@media (max-width: 960px) { .ablauf-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .ablauf-schritte { grid-template-columns: 1fr; } }

/* ---------- Stimmen ---------- */
.stimmen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.stimme { display: flex; flex-direction: column; gap: 1.4rem; height: 100%; margin: 0; padding: clamp(1.5rem, 2.6vw, 2.2rem); background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: var(--b-radius); }
.stimme blockquote { margin: 0; font-family: var(--b-zitat); font-size: clamp(1.12rem, 1.55vw, 1.32rem); line-height: 1.5; }
.stimme blockquote p::before { content: "„"; }
.stimme blockquote p::after { content: "“"; }
.stimme figcaption { margin-top: auto; display: grid; gap: .1rem; font-size: .92rem; padding-top: 1rem; border-top: 1px solid var(--b-linie); }
.stimme figcaption span { color: var(--b-text-2); }
@media (max-width: 900px) {
  .stimmen-liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 24rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
  .stimmen-liste > li { scroll-snap-align: start; }
}

/* ---------- Häufige Fragen ---------- */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.fragen-kopf { position: sticky; top: 6rem; }
.fragen-kopf h2 { margin: 0; }
.fragen-kopf p { color: var(--b-text-2); margin-top: 1.2rem; }
.fragen-kopf a { font-weight: 700; }
.fragen-liste details { border-bottom: 1px solid var(--b-linie); }
.fragen-liste details:first-child { border-top: 1px solid var(--b-linie); }
.fragen-liste summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0;
  cursor: pointer; list-style: none; font-weight: 700; font-size: clamp(1.04rem, 1.35vw, 1.18rem); line-height: 1.35;
}
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--b-linie);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: .72rem 1.5px, 1.5px .72rem; background-position: center; background-repeat: no-repeat;
  transition: rotate .35s cubic-bezier(.2,.8,.2,1), background-color .25s, border-color .25s;
}
.fragen-liste summary:hover::after { border-color: currentColor; }
.fragen-liste details[open] > summary::after { rotate: 45deg; background-color: var(--b-akzent); border-color: var(--b-akzent); color: var(--b-akzent-text); }
.fragen-liste summary:focus-visible { outline-offset: 4px; }
.antwort { padding: 0 3.2rem 1.5rem 0; color: var(--b-text-2); }
.antwort p + p { margin-top: .75rem; }
.fragen-liste details { interpolate-size: allow-keywords; }
.fragen-liste details::details-content { block-size: 0; overflow: clip; transition: block-size .45s cubic-bezier(.2,.8,.2,1), content-visibility .45s allow-discrete; }
.fragen-liste details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .fragen-liste details::details-content { transition-duration: .15s; } }
@media (max-width: 860px) {
  .fragen-raster { grid-template-columns: 1fr; }
  .fragen-kopf { position: static; }
  .antwort { padding-right: 0; }
}

/* ---------- Kontaktwege, Öffnungszeiten, Einsatzgebiet ---------- */
.kontakt-wege { display: grid; gap: .3rem; }
.kontakt-mail a { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; word-break: break-word; }
.zeiten { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--b-linie); max-width: 26rem; }
.kontakt .zeiten h3, .kontakt .gebiet h3 { font: 700 .8rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .8rem; color: var(--b-text-2); }
.kontakt .zeiten-status { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-weight: 700; font-size: .92rem; color: inherit; }
.zeiten-status:empty { display: none !important; }
.zeiten-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--b-text-2); flex: none; }
.zeiten-status.ist-offen::before { background: var(--b-gut); animation: offen-puls 2.4s ease-out infinite; }
@keyframes offen-puls { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--b-gut) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 .55rem transparent; } }
.zeiten dl { margin: 0; }
.zeiten dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px dashed var(--b-linie); font-size: .95rem; }
.zeiten dl > div.ist-heute { font-weight: 700; }
.zeiten dd { font-variant-numeric: tabular-nums; text-align: right; }
.gebiet { margin-top: 2rem; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.3rem; align-items: center; max-width: 30rem; }
.gebiet svg { width: 100%; height: auto; overflow: visible; }
.gebiet .ring { fill: none; stroke: currentColor; stroke-opacity: .28; stroke-dasharray: 2 4; }
.gebiet .ring-voll { fill: var(--b-akzent); fill-opacity: .08; stroke: var(--b-akzent); stroke-opacity: .6; stroke-dasharray: none; }
.gebiet .ort { fill: currentColor; opacity: .55; }
.gebiet .mitte { fill: var(--b-akzent); }
.gebiet .mitte-puls { fill: none; stroke: var(--b-akzent); transform-origin: 60px 60px; transform-box: view-box; animation: gebiet-puls 3s ease-out infinite; }
@keyframes gebiet-puls { from { scale: .3; opacity: .9; } to { scale: 1.6; opacity: 0; } }
.kontakt .gebiet p { margin: 0; font-size: .95rem; }
.gebiet-orte { color: var(--b-text-2); }

/* ---------- Anfrageformular ---------- */
.anfrage { position: relative; }
.anfrage-feld { display: grid; gap: .35rem; }
.feld-fehler { display: none; margin: 0; font-size: .85rem; font-weight: 600; color: var(--b-fehler); }
.anfrage-feld:has(:user-invalid) .feld-fehler { display: block; }
.anfrage .anfrage-feld :user-invalid { border-color: var(--b-fehler); }
.anfrage .optional { font-weight: 400; font-size: .85em; color: var(--b-text-2); }
.anfrage select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .75rem; }
.anfrage textarea { resize: vertical; min-height: 7.5rem; font: inherit; }
.anfrage-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .anfrage-reihe { grid-template-columns: 1fr; } }
.anfrage-hinweis { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--b-text-2); }
.anfrage-hinweis a { color: inherit; }
.honigtopf { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.anfrage-antwort[data-art="fehler"] { color: var(--b-fehler); }
.anfrage.ist-am-senden [type="submit"] { opacity: .6; cursor: progress; }
.anfrage.ist-gesendet > :not(.anfrage-danke) { display: none !important; }
.anfrage.ist-gesendet { align-self: start; align-content: start; }
.anfrage-danke { display: grid; justify-items: start; align-content: start; gap: .9rem; padding: .6rem 0; animation: danke-rein .6s cubic-bezier(.2,.8,.2,1) both; }
.anfrage-danke:focus { outline: none; }
.anfrage-danke svg { width: 3.6rem; fill: none; stroke: var(--b-gut); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.anfrage-danke circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: zeichnen .8s .1s cubic-bezier(.4,0,.2,1) forwards; }
.anfrage-danke path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: zeichnen .45s .75s cubic-bezier(.4,0,.2,1) forwards; }
.anfrage-danke h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.anfrage-danke p { margin: 0; }
.anfrage-neu { background: none; border: 0; padding: 0; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes danke-rein { from { opacity: 0; translate: 0 1rem; } }

/* ---------- Fuß ---------- */
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.6rem clamp(1.5rem, 4vw, 3rem); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.6rem; border-bottom: 1px solid var(--fuss-linie, color-mix(in oklab, currentColor 18%, transparent)); }
.fuss-marke p { margin: 1.1rem 0 0; max-width: 22rem; }
.fuss .fuss-titel { font: 700 .76rem/1.2 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 1rem; max-width: none; opacity: .72; }
.fuss address { font-style: normal; }
.fuss-raster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fuss-raster a, .fuss-unten a { text-decoration: none; }
.fuss-raster a:hover, .fuss-unten a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss-raster p + p { margin-top: .5rem; }
.fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; padding-top: 1.5rem; font-size: .86rem; }
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.nach-oben { display: inline-flex; align-items: center; gap: .45rem; }
.nach-oben svg { width: .8rem; fill: none; stroke: currentColor; stroke-width: 2; }
.fuss .rahmen.musterhinweis { display: block; margin-top: 1.2rem; }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 480px) { .fuss-raster { grid-template-columns: 1fr; } }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.rechtsseite .kopf { position: sticky; top: 0; z-index: 50; background: var(--kopf-fest-grund); color: var(--kopf-fest-text); border-bottom: 1px solid var(--kopf-fest-rand); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); inset: auto; }
.recht { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem); }
.recht-inhalt { width: min(100% - 2 * var(--rand, 1.25rem), 48rem); margin-inline: auto; }
.recht h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: 0 0 1.2rem; }
.recht h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin: 2.6rem 0 .8rem; max-width: none; line-height: 1.2; }
.recht h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; line-height: 1.3; }
.recht p, .recht li, .recht address { max-width: 68ch; font-style: normal; }
.recht p + p { margin-top: .8rem; }
.recht ul { padding-left: 1.2rem; display: grid; gap: .35rem; margin: .6rem 0 0; }
.recht a { text-underline-offset: 3px; }
.recht-hinweis { padding: 1rem 1.2rem; margin: 1.5rem 0 2rem; border: 1px dashed var(--b-linie); border-radius: var(--b-radius); font-size: .92rem; }
.zurueck { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2rem; font-weight: 600; text-decoration: none; }
.zurueck svg { width: .9rem; fill: none; stroke: currentColor; stroke-width: 2; }

@media print {
  .kopf, .menue, .wechsler-knopf, .wechsler-liste, .buehne canvas { display: none !important; }
  .fragen-liste details::details-content { block-size: auto !important; content-visibility: visible !important; }
}

/* Eckige Stile (--b-radius: 0): Plus wird beim Öffnen zum Minus statt sich zu drehen */
.eckig .fragen-liste details[open] > summary::after { rotate: 0deg; background-size: .72rem 1.5px, 0 0; }
.eckig .fragen-liste summary::after { border-radius: 0; }

/* Lange deutsche Wörter dürfen nie aus der Spalte laufen */
h1, h2, h3, .menue-nav a { overflow-wrap: break-word; }
.recht h1, .recht h2, .recht h3, .recht p, .recht li { hyphens: auto; -webkit-hyphens: auto; }

/* Musterhinweise: klein, aber lesbar (WCAG AA) */
.musterhinweis { opacity: 1; color: inherit; }