/* Juwelier Ruhrtal. Aufbau und Farben aus Entwurf 11 (vom Inhaber gewählt): Schildgelb, Marine, Weiß. */
:root {
  --marine: #0f1b35;
  --marine-tief: #0a1327;
  --gelb: #f8c331;
  --gelb-hell: #fbd25c;
  --gold-schrift: #94700a;
  --weiss: #ffffff;
  --hell: #f2f4f8;
  --linie: #dce1ea;
  --text: #27324b;
  --leise: #556079;
  --rot: #b3261e;
  --auf-dunkel: rgba(255, 255, 255, 0.84);
  --leise-dunkel: rgba(255, 255, 255, 0.66);
  --linie-dunkel: rgba(255, 255, 255, 0.17);
  --zier: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --lese: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rand: clamp(18px, 4vw, 40px);
  --kopf-hoehe: 76px;
  --aus: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--lese);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 20px); }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible, .held :focus-visible, .seitenkopf :focus-visible, .tafel :focus-visible, .fuss :focus-visible { outline-color: var(--gelb); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--rand); top: -5rem; z-index: 50; padding: 0.6rem 1rem; background: var(--marine); color: #fff; text-decoration: none; }
.skip:focus { top: 0.75rem; }
.wrap { width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

/* ------------------------------------------------------------ Schrift */
h1, h2, h3 { font-family: var(--zier); color: var(--marine); font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(2.55rem, 3.6vw + 1.3rem, 4.5rem); line-height: 1.04; letter-spacing: -0.012em; }
h2 { font-size: clamp(2rem, 1.9vw + 1.35rem, 3rem); line-height: 1.1; letter-spacing: -0.006em; }
h3 { font-size: 1.45rem; line-height: 1.2; font-weight: 600; }
.lead { font-size: 1.1875rem; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.klein { font-size: 0.9375rem; color: var(--leise); }
.mitte { text-align: center; margin-inline: auto; }
strong { font-weight: 600; color: var(--marine); }

/* Überschrift mit der kurzen gelben Linie, wie auf der Vorbildseite */
.kopfmitte h2::after, .kopfspalte h2::after, .zweier-text h2::after, .tafel h2::after {
  content: ''; display: block; width: 44px; height: 2px; margin-top: 1.15rem; background: var(--gelb);
}
.kopfmitte { max-width: 46rem; margin-inline: auto; text-align: center; }
.kopfmitte h2::after { margin-inline: auto; }
.kopfmitte .lead, .kopfspalte .lead, .zweier-text .lead, .tafel .lead { margin-top: 1.15rem; }

.textlink {
  color: var(--marine); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 0.24em;
  transition: text-underline-offset 160ms ease, opacity 180ms ease;
}
.inhalt a:not(.knopf):not(.textlink), .recht a, .formular-fertig a, .zeilen a { color: var(--marine); text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.weiter { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
.weiter.mitte { justify-content: center; }
.aktionen { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.75rem; }

/* ------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.65rem 1.35rem;
  border: 1px solid transparent; border-radius: 3px;
  font: 600 1rem/1.2 var(--lese); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms ease-out, translate 180ms var(--aus), box-shadow 180ms ease, background-color 160ms ease, border-color 160ms ease;
}
.knopf:active { transform: scale(0.97); }
.knopf-wort { font-weight: 400; }
.knopf-gelb { background: var(--gelb); color: var(--marine); }
.knopf-marine { background: var(--marine); color: #fff; }
.knopf-linie { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.knopf-gross { min-height: 56px; padding: 0.8rem 1.6rem; font-size: 1.125rem; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { translate: 0 -1px; }
  .knopf-gelb:hover { background: var(--gelb-hell); box-shadow: 0 10px 18px -12px rgba(10, 19, 39, 0.6); }
  .knopf-marine:hover { background: #1a2a4d; box-shadow: 0 10px 18px -12px rgba(10, 19, 39, 0.6); }
  .knopf-linie:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
  .knopf:active { translate: 0 0; box-shadow: none; }
  .textlink:hover { text-underline-offset: 0.14em; }
}

/* ------------------------------------------------------------ Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf-reihe { display: flex; align-items: center; gap: 1.25rem; min-height: var(--kopf-hoehe); }
/* Die Kopfleiste reicht mit Marke und Menü von Rand zu Rand, nicht nur über die Inhaltsspalte. */
.kopf > .wrap { max-width: none; }
.marke { display: inline-flex; align-items: center; gap: 0.7rem; margin-right: auto; text-decoration: none; }
.marke img { width: auto; height: 50px; }
.marke-text { display: grid; }
.marke-name { font: 600 1.4rem/1.05 var(--zier); color: var(--marine); white-space: nowrap; }
.marke-zusatz { margin-top: 0.2rem; font-size: 0.6875rem; line-height: 1; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold-schrift); }
.nav { display: flex; gap: clamp(1rem, 1.6vw, 1.75rem); }
.nav a { white-space: nowrap; }
.nav a { position: relative; display: block; padding: 0.4rem 0; color: var(--text); text-decoration: none; transition: color 160ms ease; }
.nav a::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--gelb); scale: 0 1; transform-origin: left center; transition: scale 260ms var(--aus); }
.nav a[aria-current='page'] { color: var(--marine); font-weight: 600; }
.nav a[aria-current='page']::after { scale: 1 1; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--marine); } .nav a:hover::after { scale: 1 1; } }
.kopf-nav { margin-right: clamp(0.5rem, 1.5vw, 1.5rem); }
.menue-knopf { display: none; }
.blatt { display: none; }

/* ------------------------------------------------------------ Erste Ansicht */
.held { position: relative; isolation: isolate; overflow: hidden; background: var(--marine); color: #fff; }
.held-grund { position: absolute; inset: -80px; z-index: -1; }
.held-grund img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: blur(34px) saturate(1.2) brightness(0.78); }
.held-grund::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 27, 53, 0.95) 0%, rgba(15, 27, 53, 0.88) 46%, rgba(15, 27, 53, 0.5) 70%, rgba(15, 27, 53, 0.9) 96%); }
.held-gitter { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.held-text { align-self: center; padding-block: clamp(56px, 7vw, 96px); max-width: 39rem; }
.held h1 { color: #fff; }
.held .lead { margin-top: 1.5rem; max-width: 34rem; color: var(--auf-dunkel); }
.held .textlink, .seitenkopf .textlink, .dunkel .textlink, .tafel .textlink { color: #fff; }
.heute { margin-top: 1.15rem; font-size: 0.9688rem; color: var(--leise-dunkel); }
.zusagen { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--linie-dunkel); display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-size: 1rem; color: var(--auf-dunkel); }
.zusagen li { display: inline-flex; align-items: center; gap: 0.5rem; }
.haken { flex: none; color: var(--gelb); }
/* Das Foto ist 960 × 1280 groß: höchstens 510 × 680 gezeigt, damit es auch am Retina-Schirm scharf bleibt */
.held-foto { position: relative; align-self: stretch; width: min(510px, 40vw); min-height: min(680px, 53.4vw); }
.held-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: 680px; margin-block: auto; object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(0deg, transparent 0, #000 18%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(0deg, transparent 0, #000 18%, #000 100%);
  mask-composite: intersect;
}

@media (prefers-reduced-motion: no-preference) {
  .held-text > * { animation: auf 620ms var(--aus) both; }
  .held-text > :nth-child(2) { animation-delay: 70ms; }
  .held-text > :nth-child(3) { animation-delay: 140ms; }
  .held-text > :nth-child(4) { animation-delay: 200ms; }
  .held-text > :nth-child(5) { animation-delay: 260ms; }
  .held-foto img { animation: foto 1100ms var(--aus) both; }
  :is(.held, .seitenkopf) .zusagen .haken path { stroke-dasharray: 16; animation: haken 480ms var(--aus) 620ms both; }
  :is(.held, .seitenkopf) .zusagen li:nth-child(2) .haken path { animation-delay: 740ms; }
  :is(.held, .seitenkopf) .zusagen li:nth-child(3) .haken path { animation-delay: 860ms; }
}
@keyframes auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Das große Foto ist das größte Element der ersten Ansicht: Es steht sofort da und setzt sich nur leicht. */
@keyframes foto { from { scale: 1.03; } to { scale: 1; } }
@keyframes haken { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------ Abschnitte */
.abschnitt { padding-block: clamp(64px, 8vw, 116px); }
.hell { background: var(--hell); }
.dunkel { background: var(--marine); color: var(--auf-dunkel); }
.dunkel h2, .dunkel h3 { color: #fff; }
.dunkel .lead { color: var(--auf-dunkel); }
.dunkel .klein { color: var(--leise-dunkel); }

/* Vier Ankaufsgruppen: Spalten mit feiner Linie statt Kacheln */
.gruppen { --luft: clamp(1rem, 2.2vw, 2rem); margin: clamp(2.5rem, 5vw, 4rem) calc(var(--luft) * -1) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gruppen li { padding-inline: var(--luft); border-left: 1px solid var(--linie); }
.gruppen li:first-child { border-left: 0; }
.gruppen img { width: 100%; max-width: 240px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: var(--hell); }
.gruppen h3 { margin-top: 1.35rem; }
.gruppen p { margin-top: 0.55rem; font-size: 1rem; color: var(--leise); }
.gruppen .textlink { display: inline-block; margin-top: 0.95rem; font-size: 1rem; }

/* Text und Foto nebeneinander */
.zweier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.zweier.bild-links { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.zweier-text { max-width: 38rem; }
.zweier-text > p:not(.lead):not(.weiter):not(.leitsatz), .zweier-text > .text { margin-top: 1rem; }
.foto figcaption { margin-top: 0.7rem; font-size: 0.9375rem; color: var(--leise); }
.foto img { border-radius: 3px; background: var(--hell); }
/* Ausschnitt aus dem Ladenfoto: 960 px breit, höchstens 540 gezeigt, damit er scharf bleibt */
.foto.schild, .foto.quer { width: min(540px, 100%); }
.foto.schild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto.quer img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Ruhige Zeilen: Titel und Text */
.zeilen li { padding: 1.1rem 0; border-top: 1px solid var(--linie); }
.zeilen li:last-child { border-bottom: 1px solid var(--linie); }
.zeilen h3 { font-size: 1.3rem; }
.zeilen p { margin-top: 0.3rem; color: var(--leise); }
.hell .zeilen li, .hell .liste li, .hell .orte li, .hell .stadtzeilen li, .hell .gruppen-zeilen li { border-color: #d3d9e4; }
.zeilen.eng { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.zeilen.eng li:nth-last-child(2) { border-bottom: 1px solid #d3d9e4; }
.zeilen.eng p { font-size: 1rem; }
.zeilen.vier { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.5rem; }
.zeilen.vier li { border-bottom: 0; border-top: 2px solid var(--gelb); }
.zeilen.vier li:last-child { border-bottom: 0; }
.zeilen .text { margin-top: 0.3rem; color: var(--leise); }
.wege p, .wege .text { color: var(--text); }

/* Ablauf in vier Schritten */
.schritte { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.75rem); }
.schritte li { padding-top: 1.3rem; border-top: 1px solid var(--linie); }
.hell .schritte li { border-color: #d3d9e4; }
.schritte .nr { display: block; font: 500 3.5rem/0.9 var(--zier); color: var(--gold-schrift); }
.schritte h3 { margin-top: 0.9rem; }
.schritte p { margin-top: 0.45rem; font-size: 1rem; color: var(--leise); }
.hinweis { max-width: 46rem; margin: clamp(2.25rem, 4vw, 3.25rem) auto 0; padding: 1rem 1.25rem; border-left: 3px solid var(--gelb); background: var(--hell); font-size: 1rem; }
.hell .hinweis { background: var(--weiss); }

/* Dunkles Band: die Stempel */
.stempelreihe { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stempelreihe li { padding: 0.25rem 1rem; text-align: center; border-left: 1px solid var(--linie-dunkel); }
.stempelreihe li:first-child { border-left: 0; }
.stempel { font-family: var(--zier); }
.stempelreihe .stempel { display: block; font-size: clamp(2.8rem, 4.6vw, 4.4rem); font-weight: 500; line-height: 1; color: var(--gelb); }
.stempelreihe .karat { display: block; margin-top: 0.8rem; font-weight: 600; color: #fff; }
.stempelreihe .anteil { display: block; font-size: 0.9688rem; color: var(--leise-dunkel); }
.stempelreihe + .klein { margin-top: clamp(2rem, 4vw, 3rem); max-width: 40rem; }
.klein.mitte + .weiter { margin-top: 1.25rem; }

/* Bewertungen aus dem Google-Profil */
.stimmen { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 3vw, 2.5rem); }
.stimmen li { padding-top: 1.3rem; border-top: 2px solid var(--gelb); }
.sterne { font-size: 1.05rem; letter-spacing: 0.14em; color: var(--gold-schrift); }
.sterne span { color: #c9cfdb; }
.stimmen blockquote { margin: 0.7rem 0 0; font: 400 1.3rem/1.42 var(--zier); color: var(--marine); }
.stimmen blockquote p + p { margin-top: 0.6rem; }
.stimmen .von { margin-top: 0.95rem; font-size: 0.9688rem; font-weight: 600; color: var(--marine); }
.stimmen .von span { display: block; font-weight: 400; color: var(--leise); }

/* Einzugsgebiet */
.staedte { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.staedte a { display: block; height: 100%; padding: 1.5rem 1.6rem 1.6rem; background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--gelb); border-radius: 3px; text-decoration: none; transition: border-color 160ms ease, transform 140ms ease-out, translate 200ms var(--aus), box-shadow 200ms ease; }
.staedte .stadt { display: block; font: 600 1.6rem/1.15 var(--zier); color: var(--marine); }
.staedte .dazu { display: block; margin-top: 0.3rem; color: var(--leise); }
@media (hover: hover) and (pointer: fine) { .staedte a:hover { border-color: var(--marine); border-top-color: var(--gelb); translate: 0 -2px; box-shadow: 0 16px 28px -20px rgba(10, 19, 39, 0.5); } }
.staedte a:active { transform: scale(0.985); translate: 0 0; box-shadow: none; opacity: 1; }
.stadtteile { max-width: 52rem; margin: 2rem auto 0; text-align: center; color: var(--leise); }
.stadtteile a, .orte a { color: var(--marine); font-weight: 600; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.stadtteile + .weiter { margin-top: 1.25rem; }
.orte { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); column-gap: 2rem; }
.orte li { padding: 0.8rem 0; border-bottom: 1px solid var(--linie); }
.orte b { font-weight: 600; color: var(--marine); }
.orte span { display: block; font-size: 0.9375rem; color: var(--leise); }
.inhalt > p + .orte, .inhalt > .orte + p { margin-top: 1.25rem; }
.stadtzeilen li { padding: 1.35rem 0; border-top: 1px solid var(--linie); }
.stadtzeilen li:last-child { border-bottom: 1px solid var(--linie); }
.stadtzeilen h3 { font-size: 1.6rem; }
.stadtzeilen h3 a { text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.stadtzeilen p { margin-top: 0.4rem; color: var(--leise); }

/* ------------------------------------------------------------ Unterseiten */
.seitenkopf { background: linear-gradient(90deg, var(--marine) 0%, rgba(15, 27, 53, 0.97) 42%, rgba(15, 27, 53, 0.74) 100%), url('img/laden-abend-weich.webp') 50% 24% / cover var(--marine); color: #fff; padding-block: clamp(52px, 7vw, 104px); }
.seitenkopf h1 { color: #fff; max-width: 20ch; font-size: clamp(2.4rem, 3vw + 1.3rem, 4rem); }
.seitenkopf .lead { margin-top: 1.4rem; max-width: 40rem; color: var(--auf-dunkel); }
.seitenkopf.schmal { padding-block: clamp(40px, 5vw, 72px); }
.seitenkopf .zusagen { max-width: 40rem; }
.gitter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem clamp(2rem, 6vw, 6rem); align-items: start; }
.kopfspalte h2 { font-size: clamp(1.8rem, 1.3vw + 1.3rem, 2.4rem); }
.inhalt { max-width: 44rem; }
.inhalt > p + p, .inhalt > .text + p, .text > * + * { margin-top: 1rem; }
.inhalt > .text + .orte, .inhalt > .orte + .klein { margin-top: 1.5rem; }
.inhalt > .weiter { margin-top: 1.5rem; }
.liste { columns: 2; column-gap: 2.5rem; }
.liste li { break-inside: avoid; padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
.liste .was { font-weight: 600; color: var(--marine); }
.liste .dazu { margin-left: 0.6rem; font-size: 0.9688rem; color: var(--leise); }
.gruppen-zeilen li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--linie); }
.gruppen-zeilen li:last-child { border-bottom: 1px solid var(--linie); }
.gruppen-zeilen img { width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.gruppen-zeilen p { margin-top: 0.3rem; color: var(--leise); }

/* Öffnungszeiten */
.zeiten { width: 100%; max-width: 26rem; border-collapse: collapse; font-size: 1rem; }
.zeiten th, .zeiten td { padding: 0.8rem 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; }
.zeiten tr:first-child th, .zeiten tr:first-child td { border-top: 1px solid var(--linie); }
.zeiten td { text-align: right; }
.zeiten tr.ist-heute th, .zeiten tr.ist-heute td { font-weight: 600; color: var(--marine); }

/* Stempel-Tabelle */
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle thead th { white-space: nowrap; padding: 0 1rem 0.8rem 0; font-size: 0.9375rem; font-weight: 600; color: var(--leise); text-align: left; border-bottom: 1px solid var(--marine); }
.tabelle tbody th, .tabelle tbody td { padding: 0.95rem 1rem 0.95rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--linie); font-weight: 400; }
.tabelle .stempel { font-size: 2rem; font-weight: 500; line-height: 1; color: var(--gold-schrift); }
.tabelle .karat, .tabelle .anteil { white-space: nowrap; color: var(--marine); }
.tabelle .bei { color: var(--leise); }
.tabelle-rahmen + .klein { margin-top: 1.5rem; max-width: 40em; }

/* Bilder */
/* Gleich große Kacheln, damit die Reihe ruhig bleibt, egal welche Formate der Inhaber hochlädt */
.galerie { margin-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.galerie .foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.galerie-mehr { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* Karte erst nach Klick */
.karte { position: relative; border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss); }
.karte-text { padding: clamp(1.5rem, 4vw, 2.25rem); }
.karte-adresse { font: 500 1.6rem/1.25 var(--zier); color: var(--marine); }
.karte .klein { margin-top: 0.9rem; max-width: 32em; }
.karte .aktionen { margin-top: 1.4rem; }
.karte iframe { display: block; width: 100%; height: clamp(320px, 50vw, 440px); border: 0; border-top: 1px solid var(--linie); }

/* Formular */
.formular { display: grid; gap: 1.3rem; max-width: 34rem; }
.feld label { display: block; margin-bottom: 0.4rem; font-size: 0.9688rem; font-weight: 600; color: var(--marine); }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid #aab3c5; border-radius: 3px;
  background: #fff; color: var(--marine); font: inherit; line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.feld textarea { resize: vertical; min-height: 8rem; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px rgba(248, 195, 49, 0.6); }
.fehler { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--rot); }
.fehler:empty { display: none; }
.feld.hat-fehler input, .feld.hat-fehler textarea { border-color: var(--rot); }
.formular .knopf { justify-self: start; }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 1rem; }
.feld-hinweis { margin-top: -0.8rem; }
.freiwillig { font-weight: 400; color: var(--leise); }
.feld-fotos input[type='file'] { padding: 0.6rem; border-style: dashed; cursor: pointer; }
.feld-fotos input::file-selector-button { margin-right: 0.9rem; padding: 0.55rem 1rem; border: 0; border-radius: 3px; background: var(--marine); color: #fff; font: 600 0.9688rem/1.2 var(--lese); cursor: pointer; }
.feld-fotos .klein { margin-top: 0.5rem; }
.foto-liste { margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.foto-liste:empty { display: none; }
.foto-liste img { width: 92px; height: 92px; object-fit: cover; border: 1px solid var(--linie); border-radius: 3px; }
.foto-liste button { display: block; margin-top: 0.25rem; padding: 0.25rem 0; border: 0; background: none; color: var(--marine); font: 600 0.875rem/1.2 var(--lese); text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 0.2em; cursor: pointer; }
.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pruefung:empty { display: none; }
.formular-meldung { padding: 1rem 1.15rem; border-left: 3px solid var(--gelb); background: var(--hell); color: var(--marine); font-weight: 600; }
.hell .formular-meldung { background: var(--weiss); }
.formular-fehler { border-left-color: var(--rot); }
.formular.laeuft .knopf { opacity: 0.7; pointer-events: none; }

/* Rechtstexte */
.recht > * { max-width: 44rem; }
.recht h2 { margin-top: 2.4rem; font-size: 1.7rem; }
.recht p, .recht ul { margin-top: 0.9rem; }
.recht ul { padding-left: 1.2rem; list-style: disc; }
.recht-kasten { margin-top: 0 !important; padding: 1.1rem 1.25rem; border-left: 3px solid var(--gelb); background: var(--hell); color: var(--marine); }

/* ------------------------------------------------------------ Schluss und Fuß */
.schluss { padding-block: clamp(48px, 7vw, 96px); background: var(--hell); }
.hell + .schluss { padding-top: 0; }
.tafel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(1.75rem, 5vw, 4rem); background: var(--marine); border-radius: 4px; color: var(--auf-dunkel); }
.tafel-eins { grid-template-columns: minmax(0, 1fr); }
.tafel h2 { color: #fff; }
.tafel .lead { max-width: 34rem; color: var(--auf-dunkel); }
.tafel .heute { margin: 0 0 0.9rem; font-weight: 600; color: #fff; }
.tafel .zeiten th, .tafel .zeiten td { border-color: var(--linie-dunkel); }
.tafel .zeiten tr.ist-heute th, .tafel .zeiten tr.ist-heute td { color: var(--gelb); }
.tafel .aktionen { gap: 0.75rem; }
.tafel-adresse { margin-top: 1.25rem; }
.tafel-adresse .textlink { display: inline-block; margin-top: 0.5rem; }

.fuss { background: var(--marine-tief); color: var(--leise-dunkel); font-size: 0.9688rem; }
.fuss > .wrap { padding-block: clamp(48px, 6vw, 80px) 28px; }
.fuss-gitter { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 2.25rem clamp(1.5rem, 4vw, 4rem); }
.fuss-marke img { width: 132px; }
.fuss-marke p { margin-top: 1.1rem; max-width: 24em; }
.fuss h2 { margin-bottom: 0.9rem; font: 600 0.8125rem/1.4 var(--lese); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gelb); }
.fuss p + p { margin-top: 0.55rem; }
.fuss li + li { margin-top: 0.45rem; }
.fuss a { color: var(--auf-dunkel); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gelb); text-underline-offset: 0.2em; } }
.fuss-grund { margin-top: clamp(36px, 5vw, 56px); padding-top: 1.25rem; border-top: 1px solid var(--linie-dunkel); display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.fuss-grund span { margin-right: auto; }

/* ------------------------------------------------------------ Breiten */
@media (max-width: 1239px) {
  :root { --kopf-hoehe: 66px; }
  .kopf-nav { display: none; }
  /* Anrufen und Menü: zwei gleich große Knöpfe, gleiche Höhe, Form und Schrift; gelb gefüllt und marine umrandet */
  .kopf-reihe { gap: 0.5rem; --kn: 6rem; }
  .marke { margin-right: auto; }
  .marke img { height: 42px; }
  .marke-name { font-size: 1.25rem; }
  .kopf-ruf, .menue-knopf { width: var(--kn); min-height: 44px; padding: 0.5rem 0; border-radius: 3px; font: 600 1rem/1.2 var(--lese); }
  .menue-knopf { display: inline-grid; place-items: center; border: 1.5px solid var(--marine); background: var(--weiss); color: var(--marine); cursor: pointer; transition: scale 160ms var(--aus), background-color 160ms ease, color 160ms ease; }
  .menue-knopf[aria-expanded='true'] { background: var(--marine); color: #fff; }
  .menue-knopf span { grid-area: 1 / 1; text-align: center; transition: opacity 160ms ease, translate 220ms var(--aus), visibility 0s linear 0s; }
  .menue-knopf .wort-zu, .menue-knopf[aria-expanded='true'] .wort-auf { visibility: hidden; opacity: 0; translate: 0 5px; transition-delay: 0s, 0s, 160ms; }
  .menue-knopf[aria-expanded='true'] .wort-zu { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .blatt { display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: var(--kopf-hoehe) 0 0; z-index: 25; padding-block: 1rem max(1.5rem, env(safe-area-inset-bottom)); background: var(--weiss); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; }
  .blatt.ist-offen { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 240ms var(--aus); }
  .blatt nav a { display: block; padding: 0.55rem 0; font: 500 1.6rem/1.15 var(--zier); color: var(--marine); text-decoration: none; border-bottom: 1px solid var(--linie); }
  .blatt nav a[aria-current='page'] { border-bottom: 2px solid var(--gelb); }
  .blatt-fuss { margin-top: 2rem; color: var(--leise); }
  .blatt-fuss .aktionen { margin-top: 1.1rem; }
}
@media (max-width: 999px) {
  .gruppen { margin-inline: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 4vw, 3rem); }
  .gruppen li, .gruppen li:first-child { padding-inline: 0; border-left: 0; }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .zeilen.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.5rem; }
  .fuss-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tafel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .held-gitter { grid-template-columns: minmax(0, 1fr); }
  .held-foto { order: -1; justify-self: center; width: min(540px, 100% + 2 * var(--rand)); margin-inline: calc(var(--rand) * -1); min-height: 0; height: clamp(230px, 64vw, 350px); }
  .held-foto img {
    max-height: none; object-position: 50% 9%;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 46%, transparent 94%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, #000 0, #000 46%, transparent 94%); mask-composite: add;
  }
  .held-grund::after { background: linear-gradient(180deg, rgba(15, 27, 53, 0.55) 0%, rgba(15, 27, 53, 0.93) 46%, rgba(15, 27, 53, 0.96) 100%); }
  .held-text { margin-top: -1.75rem; padding-block: 0 clamp(40px, 9vw, 64px); position: relative; }
  .zweier, .zweier.bild-links, .gitter { grid-template-columns: minmax(0, 1fr); }
  .zweier .foto { justify-self: start; }
  .stempelreihe { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-inline: auto; }
  .stempelreihe li, .stempelreihe li:first-child { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: 0.9rem 0; text-align: left; border-left: 0; border-top: 1px solid var(--linie-dunkel); }
  .stempelreihe li:last-child { border-bottom: 1px solid var(--linie-dunkel); }
  .stempelreihe .stempel { grid-row: span 2; font-size: 3rem; }
  .stempelreihe .karat { margin-top: 0; align-self: end; }
  .stempelreihe .anteil { align-self: start; }
  .stimmen, .staedte { grid-template-columns: minmax(0, 1fr); }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .feld-paar { grid-template-columns: minmax(0, 1fr); }
  .marke-zusatz { display: none; }
  .gruppen { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gruppen li, .gruppen li:first-child { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1.1rem; align-items: start; padding-block: 1.25rem; border-top: 1px solid var(--linie); }
  .gruppen li:last-child { border-bottom: 1px solid var(--linie); }
  .gruppen img { grid-row: span 3; }
  .gruppen h3 { margin-top: 0; }
  .gruppen .textlink { justify-self: start; margin-top: 0.6rem; }
  .zeilen.eng, .zeilen.vier, .schritte { grid-template-columns: minmax(0, 1fr); }
  .zeilen.eng li:nth-last-child(2) { border-bottom: 0; }
  .schritte { row-gap: 0; }
  .schritte li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.5rem; padding-block: 1.2rem; }
  .schritte .nr { grid-row: span 2; font-size: 2.9rem; }
  .schritte h3 { margin-top: 0; }
  .liste { columns: 1; }
  .gruppen-zeilen li { grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; }
  .gruppen-zeilen img { width: 88px; }
  .fuss-gitter { grid-template-columns: minmax(0, 1fr); }
  .tafel .aktionen .knopf, .held .aktionen .knopf-gross { flex: 1 1 100%; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle tbody tr { display: grid; grid-template-columns: 5.25rem auto minmax(0, 1fr); column-gap: 1rem; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
  .tabelle tbody tr:first-child { border-top: 1px solid var(--marine); }
  .tabelle tbody th, .tabelle tbody td { padding: 0; border: 0; }
  .tabelle .bei { grid-column: 2 / -1; margin-top: 0.2rem; font-size: 0.9688rem; }
}
@media (min-width: 620px) {
  .inhalt > .zeilen li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); column-gap: 1.5rem; align-items: baseline; }
  .inhalt > .zeilen p { margin-top: 0; }
}
@media (max-width: 479px) {
  .marke { gap: 0.5rem; }
  .marke img { height: 40px; }
  .marke-name { width: min-content; white-space: normal; font-size: 1.15rem; line-height: 0.98; }
}
@media (max-width: 379px) {
  .kopf-reihe { --kn: 5.5rem; gap: 0.4rem; }
}
@media (max-width: 359px) {
  h1, .seitenkopf h1 { font-size: 2.1rem; }
  .kopf-reihe { --kn: 4.9rem; }
  .marke { gap: 0.4rem; }
  .marke img { height: 32px; }
  .marke-name { font-size: 1.02rem; }
  .kopf-ruf, .menue-knopf { font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}

/* ------------------------------------------------------------ Bewegung beim Scrollen und unter dem Finger
   Ruhig und spürbar. Blöcke kommen beim Scrollen einmal leise an (site.js setzt die Klassen),
   Unterseiten beginnen wie die Startseite, und alles Drückbare gibt unter dem Finger ein wenig nach.
   translate und scale statt transform, damit eigene Drehungen und Hover-Bewegungen unberührt bleiben.
   Ohne Skript und bei „Bewegung reduzieren“ steht alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .js .kommt { opacity: 0; translate: 0 14px; }
  .js .kommt.ist-da { opacity: 1; translate: 0 0; transition: opacity 640ms var(--aus) var(--warte, 0ms), translate 640ms var(--aus) var(--warte, 0ms); }
  .seitenkopf .wrap > * { animation: auf 620ms var(--aus) both; }
  .seitenkopf .wrap > :nth-child(2) { animation-delay: 70ms; }
  .seitenkopf .wrap > :nth-child(3) { animation-delay: 140ms; }
  .seitenkopf .wrap > :nth-child(4) { animation-delay: 210ms; }
  .seitenkopf .wrap > :nth-child(5) { animation-delay: 280ms; }
  /* Die kurze gelbe Linie unter der Überschrift zieht sich, sobald ihr Block angekommen ist */
  .js .kommt h2::after { scale: 0 1; transform-origin: left center; }
  .js .kopfmitte h2::after { transform-origin: center; }
  .js .kommt.ist-da h2::after { scale: 1 1; transition: scale 620ms var(--aus) calc(var(--warte, 0ms) + 200ms); }
  /* „Heute geöffnet“: der grüne Punkt atmet langsam */
  .heute.ist-offen::before { animation: puls 3.2s ease-in-out infinite; }
  .knopf-laeuft::before { animation: dreh 700ms linear infinite; }
  /* Formular und Karte: was neu erscheint, kommt an statt zu springen */
  .fehler { animation: hin 240ms var(--aus); }
  .formular-meldung { animation: auf 420ms var(--aus); }
  .foto-liste li.neu { animation: wachs 300ms var(--aus); }
  /* Die Karte wird erst sichtbar, wenn sie geladen ist (site.js setzt die Klasse), nicht als leerer Rahmen */
  .js .karte iframe { opacity: 0; transition: opacity 400ms ease-out; }
  .js .karte iframe.ist-da { opacity: 1; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) { .js .kommt :is(.kopfspalte, .zweier-text, .tafel-text) h2::after { transform-origin: center; } }
@media print { .js .kommt { opacity: 1; translate: none; } .js .kommt h2::after { scale: none; } }
/* Dauerlauf nur über Deckkraft und Größe: Das rechnet der Browser, ohne die Seite neu zu zeichnen. */
@keyframes puls { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: 0.6; scale: 0.85; } }
@keyframes dreh { to { rotate: 1turn; } }
@keyframes hin { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes wachs { from { opacity: 0; scale: 0.92; } to { opacity: 1; scale: 1; } }
.nav a { transition: color 160ms ease, scale 140ms var(--aus); }
.marke, .menue-knopf, .blatt nav a { transition: scale 160ms var(--aus); }
.nav a:active, .menue-knopf:active { scale: 0.96; }
.marke:active { scale: 0.98; }
.blatt nav a { transform-origin: left center; }
.blatt nav a:active { scale: 0.98; }
/* Menü am Telefon: die Punkte kommen kurz nacheinander. Beim Schließen bleiben sie stehen, bis das Blatt weg ist. */
@media (max-width: 1239px) and (prefers-reduced-motion: no-preference) {
  .blatt nav a, .blatt-fuss { opacity: 0; translate: 0 10px; transition: opacity 0s linear 160ms, translate 0s linear 160ms, scale 160ms var(--aus); }
  .blatt.ist-offen nav a, .blatt.ist-offen .blatt-fuss { opacity: 1; translate: 0 0; transition: opacity 300ms ease var(--w, 0ms), translate 420ms var(--aus) var(--w, 0ms), scale 160ms var(--aus); }
  .blatt nav a:nth-child(1) { --w: 30ms; }
  .blatt nav a:nth-child(2) { --w: 48ms; }
  .blatt nav a:nth-child(3) { --w: 66ms; }
  .blatt nav a:nth-child(4) { --w: 84ms; }
  .blatt nav a:nth-child(5) { --w: 102ms; }
  .blatt nav a:nth-child(6) { --w: 120ms; }
  .blatt nav a:nth-child(7) { --w: 138ms; }
  .blatt nav a:nth-child(8) { --w: 156ms; }
  .blatt nav a:nth-child(9) { --w: 174ms; }
  .blatt nav a:nth-child(10) { --w: 192ms; }
  .blatt-fuss { --w: 230ms; }
}
/* Textlinks geben beim Antippen sofort nach und kommen weich zurück. Das graue Aufblitzen des Browsers entfällt
   nur dort, wo es diesen Ersatz gibt: Alles andere behält die Rückmeldung des Geräts. */
.knopf, .nav a, .marke, .menue-knopf, .blatt nav a, .staedte a, .foto-liste button, :where(main, .fuss, .blatt-fuss) a { -webkit-tap-highlight-color: transparent; }
:where(main, .fuss, .blatt-fuss) a:where(:not(.knopf)), .foto-liste button { transition: opacity 180ms ease; }
:where(main, .fuss, .blatt-fuss) a:where(:not(.knopf)):active, .foto-liste button:active { opacity: 0.6; transition-duration: 0ms; }
/* Kopfleiste: liegt nach dem ersten Scrollen mit einem weichen Schatten über dem Inhalt (site.js setzt die Klasse) */
.kopf::after { content: ''; position: absolute; inset: calc(100% + 1px) 0 auto; height: 14px; background: linear-gradient(rgba(10, 19, 39, 0.11), rgba(10, 19, 39, 0)); opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
.kopf.ist-gerollt::after { opacity: 1; }
/* Offenes Menü am Telefon: Der Schatten läge sonst über dem ersten Menüpunkt. */
.kopf.menue-offen::after { opacity: 0; transition-duration: 0ms; }
.knopf-laeuft { display: inline-flex; align-items: center; gap: 0.6rem; }
.knopf-laeuft::before { content: ''; flex: none; width: 0.95em; height: 0.95em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }

/* ------------------------------------------------------------ Fertige Seite: neue Bausteine */
/* Ankündigung geschlossener Tage, direkt unter der Kopfleiste */
.band-hinweis { padding: 0.7rem var(--rand); background: var(--gelb); color: var(--marine); font-weight: 600; text-align: center; }
.band-hinweis p + p { margin-top: 0.2rem; }

/* „Heute geöffnet“: kleiner Punkt als Zustand */
.heute[data-status]::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.55rem; border-radius: 50%; background: #9aa3b5; vertical-align: 0.08em; }
.heute.ist-offen::before { background: #3fb46b; }
.heute.auf-hell { margin: 0 0 1rem; font-weight: 600; color: var(--marine); }

/* Listen aus der Verwaltung: kurzer gelber Strich wie unter den Überschriften */
.punkte { display: grid; gap: 0.55rem; }
.punkte li { position: relative; padding-left: 1.6rem; }
.punkte li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 0.85rem; height: 2px; background: var(--gelb); }

.zweier.oben { align-items: start; }
.zweier-text.lang { max-width: 40rem; }
.zweier-text .klein-h2 { margin-top: 2.5rem; font-size: clamp(1.6rem, 1vw + 1.3rem, 2rem); }
.gruss { font-weight: 600; color: var(--marine); }
.leitsatz { max-width: 30ch; margin-inline: auto; font: 500 clamp(1.6rem, 1.4vw + 1.2rem, 2.3rem)/1.22 var(--zier); color: #fff; text-align: center; text-wrap: balance; }
.zweier-text > .leitsatz { max-width: none; margin: 2rem 0 0; padding-top: 1.4rem; border-top: 2px solid var(--gelb); font-size: 1.55rem; color: var(--marine); text-align: left; }
.spruch { padding-block: clamp(52px, 7vw, 92px); }
.spruch .weiter { margin-top: 1.75rem; }

/* Der Ablauf im Einzelnen (Text des Inhabers) */
.ablauf-lang li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--linie); }
.ablauf-lang li:last-child { border-bottom: 1px solid var(--linie); }
.ablauf-lang .nr { font: 500 4rem/0.85 var(--zier); color: var(--gold-schrift); }
.ablauf-lang h2 { font-size: clamp(1.5rem, 1vw + 1.2rem, 1.9rem); }
.ablauf-lang .text { margin-top: 0.6rem; max-width: 36rem; }
.neben { position: sticky; top: calc(var(--kopf-hoehe) + 24px); display: grid; gap: 1.5rem; align-content: start; }
.neben .hinweis { margin: 0; max-width: none; }
.neben .foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Häufige Fragen: Frage links, Antwort rechts, alles sichtbar */
.fragen li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.6rem clamp(2rem, 6vw, 6rem); align-items: baseline; padding: 1.6rem 0; border-top: 1px solid var(--linie); }
.fragen li:last-child { border-bottom: 1px solid var(--linie); }
.fragen h2 { font-size: clamp(1.4rem, 0.8vw + 1.2rem, 1.75rem); line-height: 1.2; }
.fragen .text { max-width: 40rem; }
.fragen-mehr { margin-top: 2rem; }

/* Aktuelles */
.meldungen { max-width: 46rem; }
.meldung { padding: 2.25rem 0; border-top: 1px solid var(--linie); }
.meldung:first-child { padding-top: 0; border-top: 0; }
.meldung-datum { font-size: 0.9375rem; color: var(--leise); font-variant-numeric: tabular-nums lining-nums; }
.meldung h2 { margin-top: 0.35rem; font-size: clamp(1.7rem, 1.3vw + 1.3rem, 2.3rem); }
.meldung .foto { margin-top: 1.25rem; max-width: 34rem; }
.meldung .text { margin-top: 1rem; }
.leer { color: var(--leise); }
.neues { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 6vw, 6rem); align-items: start; }
.neues-kopf h2::after { content: ''; display: block; width: 44px; height: 2px; margin-top: 1.15rem; background: var(--gelb); }
.neues-kopf .meldung-datum { margin-top: 1rem; }
.neues-text h3 { font-size: 1.7rem; }
.neues-text p { margin-top: 0.6rem; max-width: 40rem; }
.neues-text .weiter { margin-top: 1.25rem; }

/* Rechtstexte: was noch fehlt, bleibt sichtbar markiert */
.platzhalter { padding: 0 0.3em; background: #fff3c4; outline: 1px dashed var(--gold-schrift); color: var(--marine); }

@media (max-width: 899px) {
  .fragen li, .neues { grid-template-columns: minmax(0, 1fr); }
  .neben { position: static; }
}
/* Telefon: symmetrisch. Überschriften, Einleitungen, Knöpfe, Links und der Fuß stehen auf der Mittelachse;
   Fließtext und Zeilenlisten bleiben links, weil sich mehrzeiliger Text links gesetzt leichter liest. */
@media (max-width: 599px) {
  .galerie { grid-template-columns: minmax(0, 1fr); }
  .held-text, .seitenkopf .wrap { text-align: center; }
  .held .lead, .seitenkopf h1, .seitenkopf .lead, .seitenkopf .zusagen { margin-inline: auto; }
  .aktionen, .zusagen, .weiter { justify-content: center; }
  .blatt-fuss .aktionen { justify-content: flex-start; }
  .zusagen { flex-direction: column; align-items: center; gap: 0.55rem; }
  .staedte a { text-align: center; }
  .kopfspalte > h2, .kopfspalte > .lead, .zweier-text > h2, .zweier-text > .lead, .tafel-text { text-align: center; }
  :is(.kopfspalte, .zweier-text, .tafel) h2::after { margin-inline: auto; }
  .tafel .heute, .tafel-adresse { text-align: center; }
  .tafel .zeiten { margin-inline: auto; }
  .fuss-gitter { justify-items: center; text-align: center; }
  .fuss-marke img { margin-inline: auto; }
  .fuss-marke p { margin-inline: auto; }
  .fuss-grund { justify-content: center; gap: 0.6rem 1.5rem; text-align: center; }
  .fuss-grund span { flex-basis: 100%; margin-right: 0; }
  .ablauf-lang li { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.5rem; }
  .ablauf-lang .nr { font-size: 3rem; }
}