/* Grundstücksverwaltung Jahn – Gestaltung
   Farben und Schriften werden hier oben zentral festgelegt. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --rot: #d10015;          /* Logo-Rot, leicht abgedunkelt für Lesbarkeit */
  --rot-dunkel: #a8000f;
  --lachs: #f08061;        /* zweite Logo-Farbe */
  --tinte: #2b2420;        /* warmes Fast-Schwarz */
  --text: #3d3530;
  --text-leise: #6f655d;
  --papier: #f7f2eb;       /* Sepia-Ton aus dem Dresden-Bild */
  --papier-2: #efe6da;
  --weiss: #fffdfa;
  --linie: #e2d7c9;
  --linie-stark: #d6c6b3;
  --dunkel-text: #e9e0d6;  /* heller Text auf dunklem Grund */
  --dunkel-leise: #b9ab9d;
  --fuss: #1f1916;
  --akzent-hell: #f6c9b9;  /* helle Akzentfarbe auf Fotos */
  --schatten: 30,22,17;    /* Abdunklung der Fotos (R,G,B) */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --breite: 1180px;
  --rand: clamp(16px, 4vw, 40px);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
p, li, dd { hyphens: manual; }
img { max-width: 100%; display: block; }
a { color: var(--rot); }
h1, h2, h3 { font-family: var(--serif); color: var(--tinte); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-variation-settings: "SOFT" 50; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--tinte); color: #fff; padding: 8px 14px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--lachs); outline-offset: 3px; border-radius: 4px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .7em 1.25em; border-radius: 999px;
  font: 600 1rem/1 var(--sans); letter-spacing: .01em;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.knopf svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.knopf--portal, .knopf--rot { background: var(--rot); color: #fff; box-shadow: 0 6px 18px -8px rgba(209,0,21,.7); }
.knopf--portal:hover, .knopf--rot:hover { background: var(--rot-dunkel); transform: translateY(-1px); }
.knopf--hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.knopf--hell:hover { background: #fff; color: var(--tinte); }
.knopf--gross { font-size: 1.1rem; padding: .85em 1.5em; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,253,250,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.kopf.ist-gescrollt { border-color: var(--linie); box-shadow: 0 6px 24px -18px rgba(var(--schatten),.5); }
.kopf__innen {
  max-width: var(--breite); margin: 0 auto; padding: 10px var(--rand);
  display: flex; align-items: center; gap: 28px;
}
.kopf__logo img { width: 150px; height: auto; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { color: var(--tinte); text-decoration: none; font-weight: 600; font-size: .98rem; position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--rot); transition: right .25s; }
.nav a:hover::after, .nav a.ist-aktiv::after { right: 0; }
.menue-knopf { display: none; }

@media (max-width: 1000px) and (min-width: 761px) {
  .kopf__innen { gap: 18px; }
  .nav { gap: 16px; }
  .nav a { font-size: .92rem; }
  .kopf__logo img { width: 120px; }
}
@media (max-width: 760px) {
  .kopf__innen { gap: 12px; }
  .kopf__logo img { width: 118px; }
  .kopf__portal { margin-left: auto; padding: .6em 1em; font-size: .95rem; }
  .menue-knopf {
    display: grid; gap: 5px; place-content: center;
    width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0;
  }
  .menue-knopf span { width: 24px; height: 2px; background: var(--tinte); transition: transform .25s, opacity .25s; }
  .menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; background: var(--weiss);
    border-bottom: 1px solid var(--linie); padding: 6px var(--rand) 16px;
    display: none;
  }
  .nav.ist-offen { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--papier-2); font-size: 1.05rem; }
  .nav a::after { display: none; }
}
@media (max-width: 400px) {
  .kopf__portal svg { display: none; }
}

/* ---------- Start / Hero ---------- */
.hero {
  position: relative; color: #fff;
  min-height: min(88vh, 760px);
  display: flex; align-items: flex-end;
  clip-path: inset(0);            /* das feststehende Bild bleibt in diesem Bereich */
  background-color: #4a3c32;
}
.hero__bild, .bildfenster__bild {
  position: fixed; inset: 0;      /* Bild steht still, der Inhalt scrollt darüber */
  background-size: cover; background-repeat: no-repeat;
  z-index: -1;
}
.hero__bild {
  background-image:
    linear-gradient(90deg, rgba(var(--schatten),.55) 0%, rgba(var(--schatten),.25) 45%, rgba(var(--schatten),0) 75%),
    linear-gradient(180deg, rgba(var(--schatten),0) 35%, rgba(var(--schatten),.6) 100%),
    url("img/dresden.jpg");
  background-position: center 30%;
}
.hero__innen { position: relative; }

/* Bildfenster zwischen den Abschnitten: Bilder liegen in assets/img/abschnitte/ */
.bildfenster {
  position: relative;
  height: clamp(220px, 48vh, 520px);
  clip-path: inset(0);
  background: #4a3c32;
}
.bildfenster__bild { background-color: #4a3c32; }
.hero__innen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 140px var(--rand) clamp(48px, 8vh, 88px); }
.hero__motto { font-family: var(--serif); font-style: italic; font-size: 1.15rem; letter-spacing: .02em; color: var(--akzent-hell); margin-bottom: .6em; }
.hero__motto span + span { margin-left: .4em; }
.hero h1 { color: #fff; font-size: clamp(2rem, 9vw, 5rem); hyphens: manual; font-weight: 600; letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero__text { max-width: 560px; font-size: 1.15rem; margin: 1em 0 1.6em; color: rgba(255,255,255,.92); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__hinweis { margin: 1.1em 0 0; font-size: .92rem; color: rgba(255,255,255,.72); }

/* ---------- Abschnitte ---------- */
.abschnitt { max-width: var(--breite); margin: 0 auto; position: relative; padding: clamp(64px, 10vw, 120px) var(--rand); }
.abschnitt--papier, .abschnitt--dunkel { max-width: none; }
.abschnitt--papier > *, .abschnitt--dunkel > * { max-width: calc(var(--breite) - 2 * var(--rand)); margin-left: auto; margin-right: auto; }
.abschnitt--papier { background: var(--papier); }
.abschnitt--dunkel { background: var(--tinte); color: var(--dunkel-text); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt__kopf { margin-bottom: 44px; }
.abschnitt__kopf--zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.abschnitt__unter { max-width: 380px; margin: 0; color: var(--text-leise); }
.vorzeile {
  font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rot); margin-bottom: .8em; display: flex; align-items: center; gap: .7em;
}
.vorzeile::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.abschnitt--dunkel .vorzeile { color: var(--lachs); }

.raster { display: grid; gap: 32px 64px; }
.raster--ueber { grid-template-columns: 1fr 1.6fr; }
.raster--kontakt { grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 860px) { .raster--ueber, .raster--kontakt { grid-template-columns: 1fr; } }

.fliesstext { max-width: 66ch; }
.hervorgehoben { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--tinte); border-left: 3px solid var(--rot); padding-left: 1em; margin-top: 1.4em; }

.werte { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linie); }
.werte li { padding: 28px 28px 8px 0; }
.werte li + li { padding-left: 28px; border-left: 1px solid var(--linie); }
.werte strong { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; font-style: italic; color: var(--rot); margin-bottom: .2em; }
.werte span { color: var(--text-leise); }
@media (max-width: 760px) {
  .werte { grid-template-columns: 1fr; }
  .werte li, .werte li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--linie); }
}

/* ---------- Leistungen ---------- */
.karten { display: grid; gap: 14px; }
.karte {
  background: var(--weiss); border-radius: var(--radius); padding: 34px 40px 18px;
  border: 1px solid var(--linie);
  display: grid; grid-template-columns: 56px 310px 1fr; column-gap: 28px; align-items: start;
  transition: box-shadow .25s, border-color .25s;
}
.karte:hover { border-color: var(--linie-stark); box-shadow: 0 18px 40px -30px rgba(var(--schatten),.55); }
.karte > p { grid-column: 3; font-size: 1rem; max-width: 68ch; }
.karte__nr { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--lachs); font-weight: 500; }
.karte h3 { font-size: clamp(1.15rem, 5.4vw, 1.4rem); margin: 0 0 1em; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 860px) {
  .karte { grid-template-columns: 1fr; padding: 26px 24px 12px; }
  .karte > p { grid-column: auto; }
  .karte__nr { font-size: 1.1rem; margin-bottom: .2em; }
  .karte h3 { margin-bottom: .6em; }
}

/* ---------- Referenzen ---------- */
.galerie { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.galerie__lade, .downloads__lade { color: var(--text-leise); }
.galerie button {
  all: unset; cursor: zoom-in; display: block; width: 100%; position: relative;
  border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papier-2);
}
.galerie button:focus-visible { outline: 3px solid var(--lachs); outline-offset: 3px; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.galerie button:hover img { transform: scale(1.05); }
.galerie__text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px;
  color: #fff; display: flex; flex-direction: column; gap: 2px; line-height: 1.25;
  background: linear-gradient(transparent, rgba(var(--schatten),.85));
}
.galerie__text strong { font-size: 1rem; font-weight: 700; }
.galerie__ort { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent-hell); }
.galerie__details { font-size: .8rem; color: rgba(255,255,255,.82); }
@media (max-width: 560px) {
  .galerie { grid-template-columns: 1fr 1fr; gap: 10px; }
  .galerie__text { padding: 28px 10px 8px; }
  .galerie__text strong { font-size: .85rem; }
  .galerie__ort { font-size: .62rem; }
  .galerie__details { display: none; }
}
.lightbox { border: 0; padding: 0; background: transparent; width: auto; max-width: min(1100px, 94vw); max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(var(--schatten),.96); }
.lightbox__rahmen { position: relative; margin: 0 auto; width: fit-content; max-width: 100%; }
.lightbox img { display: block; max-height: 74vh; max-width: 100%; width: auto; border-radius: 8px; user-select: none; -webkit-user-drag: none; }
.lightbox__unterschrift { color: #fff; text-align: center; margin: 12px 0 0; font-weight: 600; }
.lightbox__zaehler { display: block; font-weight: 400; font-size: .88rem; color: rgba(255,255,255,.65); margin-top: 2px; }
.lightbox__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,253,250,.92); color: var(--tinte);
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: background .2s, transform .2s;
}
.lightbox__pfeil:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.lightbox__pfeil svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__pfeil--zurueck { left: -26px; }
.lightbox__pfeil--weiter { right: -26px; }
@media (max-width: 1180px) { .lightbox__pfeil--zurueck { left: 8px; } .lightbox__pfeil--weiter { right: 8px; } }
@media (max-width: 560px) { .lightbox__unterschrift { font-size: .95rem; } }
@media (max-width: 560px) { .lightbox__pfeil { width: 42px; height: 42px; } .lightbox__pfeil svg { width: 22px; height: 22px; } }
.lightbox__zu { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; font-size: 28px; line-height: 1; background: #fff; color: var(--tinte); cursor: pointer; }

/* ---------- Downloads ---------- */
.downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .downloads { grid-template-columns: 1fr; } }
.dl-gruppe { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 26px 24px 14px; }
.dl-gruppe h3 { font-size: 1.25rem; margin-bottom: 14px; }
.dl-gruppe ul { list-style: none; padding: 0; margin: 0; }
.dl-gruppe li + li { border-top: 1px solid rgba(255,255,255,.08); }
.dl-gruppe a {
  display: flex; gap: 12px; align-items: center; padding: 12px 4px; text-decoration: none; color: #fff;
  border-radius: 8px; transition: background .2s;
}
.dl-gruppe a:hover { background: rgba(255,255,255,.06); }
.dl-symbol { flex: none; width: 38px; height: 44px; border-radius: 6px; background: var(--rot); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .04em; display: grid; place-items: end center; padding-bottom: 6px; position: relative; }
.dl-symbol::before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: var(--tinte) #ff6b78; }
.dl-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dl-titel { font-weight: 600; }
.dl-info { font-size: .82rem; color: var(--dunkel-leise); }
.dl-leer { color: var(--dunkel-leise); font-style: italic; padding: 8px 0 14px; }

/* ---------- Kontakt ---------- */
.adresse { font-style: normal; font-size: 1.15rem; margin: 26px 0 22px; line-height: 1.6; }
.adresse strong { font-family: var(--serif); font-size: 1.25rem; color: var(--tinte); }
.kontaktliste { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 0; }
.kontaktliste dt { color: var(--text-leise); font-size: .92rem; padding-top: 2px; }
.kontaktliste dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.kontaktliste a { color: var(--tinte); text-decoration-color: var(--lachs); text-underline-offset: 3px; }
.karte-einbettung {
  border-radius: var(--radius); overflow: hidden; min-height: 380px; position: relative;
  background:
    linear-gradient(rgba(247,242,235,.88), rgba(247,242,235,.94)),
    repeating-linear-gradient(35deg, transparent 0 22px, rgba(209,0,21,.06) 22px 24px),
    repeating-linear-gradient(-55deg, transparent 0 40px, rgba(var(--schatten),.06) 40px 42px),
    var(--papier);
  border: 1px solid var(--linie);
  display: grid; place-items: center; text-align: center;
}
.karte-einbettung__hinweis { max-width: 360px; padding: 28px; }
.karte-einbettung__hinweis p { color: var(--text-leise); font-size: .95rem; }
.karte-einbettung__hinweis p:first-child { font-family: var(--serif); font-size: 1.3rem; color: var(--tinte); margin-bottom: .4em; }
.karte-einbettung__link { display: block; margin-top: 14px; font-size: .92rem; }
.karte-einbettung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Fuß ---------- */
.fuss { background: var(--fuss); color: var(--dunkel-leise); }
.fuss__innen { max-width: var(--breite); margin: 0 auto; padding: 40px var(--rand); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.fuss p { margin: 0; font-size: .95rem; }
.fuss a { color: var(--dunkel-text); }
.fuss nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.fuss nav a { text-decoration: none; font-weight: 600; font-size: .95rem; }
.fuss nav a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 700px) { .fuss nav { margin-left: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Logo im Fuß ---------- */
.fuss__logo { display: inline-block; background: var(--weiss); border-radius: 10px; padding: 8px 12px; }
.fuss__logo img { width: 120px; height: auto; }

/* ---------- Unterseiten: Impressum, Datenschutz ---------- */
.seitenkopf { background: var(--papier); border-bottom: 1px solid var(--linie); }
.seitenkopf__innen { max-width: 860px; margin: 0 auto; padding: clamp(48px, 8vw, 88px) var(--rand) clamp(32px, 5vw, 48px); }
.seitenkopf h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.seitenkopf p { margin: .8em 0 0; color: var(--text-leise); }
.rechtstext { max-width: 860px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--rand) clamp(64px, 9vw, 110px); }
.rechtstext h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); margin: 2.2em 0 .7em; padding-top: .2em; scroll-margin-top: 100px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 700; margin: 1.6em 0 .5em; }
.rechtstext p, .rechtstext li { max-width: 72ch; overflow-wrap: break-word; hyphens: manual; }
.rechtstext ul { padding-left: 1.2em; margin: 0 0 1em; }
.rechtstext li { margin-bottom: .35em; }
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext .kasten { background: var(--papier); border: 1px solid var(--linie); border-left: 3px solid var(--rot); border-radius: 10px; padding: 18px 22px; margin: 1.2em 0; }
.rechtstext .kasten p:last-child { margin-bottom: 0; }
.inhaltsverzeichnis { background: var(--papier); border-radius: 12px; padding: 20px 24px; margin-bottom: 2.4em; }
.inhaltsverzeichnis strong { display: block; margin-bottom: .4em; color: var(--tinte); }
.inhaltsverzeichnis ol { margin: 0; padding-left: 1.3em; columns: 2 260px; column-gap: 32px; }
.inhaltsverzeichnis li { margin-bottom: .25em; break-inside: avoid; }
.rechtstext dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0 0 1em; }
.rechtstext dt { color: var(--text-leise); }
.rechtstext dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) { .rechtstext dl { grid-template-columns: 1fr; gap: 0; } .rechtstext dd { margin-bottom: .6em; } }
.stand { color: var(--text-leise); font-size: .92rem; margin-top: 3em; }
.fuss__hinweis { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: .9rem !important; color: var(--dunkel-leise); }
.fuss__hinweis svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--lachs); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fuss__hinweis a { color: var(--dunkel-text); }

/* Kleine Handys: Kontaktangaben untereinander, damit die E-Mail-Adresse in eine Zeile passt */
@media (max-width: 420px) {
  .kontaktliste { grid-template-columns: 1fr; gap: 0; }
  .kontaktliste dt { font-size: .82rem; }
  .kontaktliste dd { margin-bottom: 10px; font-size: .98rem; }
}

/* Handy: Text steht über der ganzen Breite, daher gleichmäßig etwas abdunkeln */
@media (max-width: 760px) {
  .hero__bild {
    background-image:
      linear-gradient(180deg, rgba(var(--schatten),.15) 0%, rgba(var(--schatten),.5) 40%, rgba(var(--schatten),.72) 100%),
      url("img/dresden.jpg");
  }
}

/* =====================================================================
   Startbereich: Firmenname mittig, Motto wird getippt
   ===================================================================== */
.hero { align-items: center; text-align: center; min-height: min(92vh, 820px); }
.hero__bild {
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(var(--schatten),.42) 0%, rgba(var(--schatten),.6) 65%, rgba(var(--schatten),.78) 100%),
    url("img/dresden.jpg");
}
.hero__innen { display: flex; flex-direction: column; align-items: center; padding: 120px var(--rand) 110px; }
.hero .hero__name {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 7.6vw, 4.4rem); line-height: 1.12; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.45); margin: 0;
}
.hero__name span { display: inline-block; }
.hero__motto {
  display: inline-grid; margin: .9em 0 0;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 3.4vw, 1.8rem); color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero__motto-platz, .hero__motto-text { grid-area: 1 / 1; white-space: nowrap; text-align: left; }
.hero__motto-platz { visibility: hidden; }
.hero__motto-text .punkt { color: var(--lachs); }
.hero__motto-text.tippt::after { content: ""; border-right: 2px solid var(--lachs); margin-left: 2px; animation: cursor .8s steps(1) infinite; }
@keyframes cursor { 50% { border-color: transparent; } }
.hero__linie { width: 0; height: 2px; background: var(--rot); margin: 1.1em auto 1em; transition: width 1s ease-out; }
.hero__linie.ist-da { width: min(280px, 55vw); }
.hero__ort { font-size: clamp(1rem, 2.4vw, 1.2rem); letter-spacing: .04em; color: rgba(255,255,255,.88); margin: 0; }
.hero__weiter {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; border: 1.5px solid rgba(255,255,255,.55); animation: wippen 2.4s ease-in-out infinite;
}
.hero__weiter svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes wippen { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (max-width: 560px) {
  .hero__name span { display: block; }
  .hero__motto { font-size: clamp(1rem, 4.6vw, 1.3rem); }
}
@media (max-width: 760px) {
  .hero__bild {
    background-image:
      radial-gradient(ellipse at 50% 50%, rgba(var(--schatten),.5) 0%, rgba(var(--schatten),.68) 70%, rgba(var(--schatten),.8) 100%),
      url("img/dresden.jpg");
  }
}

/* Kopfzeile: "Kontakt aufnehmen" als Knopf neben dem Portal */
.knopf--rand { background: transparent; color: var(--tinte); border-color: var(--tinte); padding: .62em 1.15em; }
.knopf--rand:hover { background: var(--tinte); color: #fff; }
.nav__kontakt { display: none; }
@media (max-width: 1000px) {
  .kopf__kontakt { display: none; }
  .nav__kontakt { display: inline; }
}
@media (max-width: 760px) { .nav .nav__kontakt { display: block; } }

/* =====================================================================
   Leistungen: Symbole, Einblenden beim Scrollen, Akzent beim Überfahren
   ===================================================================== */
.karte { position: relative; overflow: hidden; }
.karte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rot);
  transform: scaleY(0); transform-origin: top; transition: transform .45s ease;
}
.karte:hover::before, .karte:focus-within::before { transform: scaleY(1); }
.karte__kopf { display: flex; flex-direction: column; gap: 14px; }
.karte__symbol {
  width: 46px; height: 46px; padding: 10px; border-radius: 12px; background: var(--papier-2);
  fill: none; stroke: var(--rot); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: background .3s, stroke .3s, transform .3s;
}
.karte:hover .karte__symbol { background: var(--rot); stroke: #fff; transform: rotate(-6deg) scale(1.05); }
.karte__symbol * { stroke-dasharray: 80; stroke-dashoffset: 0; }
@media (max-width: 860px) { .karte__kopf { flex-direction: row; align-items: center; margin-bottom: .4em; } }

/* Einblenden: nur wenn JavaScript läuft (Klasse "js" am html-Element) */
.js .zeige { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .zeige.ist-sichtbar { opacity: 1; transform: none; }
.js .zeige .karte__symbol * { stroke-dashoffset: 80; transition: stroke-dashoffset 1.4s ease .25s; }
.js .zeige.ist-sichtbar .karte__symbol * { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .zeige { opacity: 1; transform: none; }
  .js .zeige .karte__symbol * { stroke-dashoffset: 0; }
  .hero__linie { width: min(280px, 55vw); }
  .hero__weiter { animation: none; }
}

.hero__motto span + span { margin-left: 0; }

/* =====================================================================
   FARBKONZEPT „DRESDNER ABEND“: Nachtblau, Pergament, Gold
   ===================================================================== */
:root {
  --nacht: #14213a;
  --nacht-2: #1d2e4d;
  --gold: #c8a35a;
  --gold-dunkel: #9a7a3a;
  --tinte: #1e2638;
  --text: #39425a;
  --text-leise: #6b7388;
  --papier: #f5f1e8;
  --papier-2: #ece5d4;
  --weiss: #ffffff;
  --linie: #e3d8c0;
  --linie-stark: #cdbf9f;
  --dunkel-text: #c9d1e2;
  --dunkel-leise: #9aa6bf;
  --fuss: #14213a;
  --lachs: #c8a35a;        /* Punkte im Motto, Cursor: jetzt Gold */
  --akzent-hell: #e3c98f;
  --schatten: 14,22,40;
}

/* Überzeilen: kursiv in Gold statt Großbuchstaben */
.vorzeile { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 1.15rem; color: var(--gold-dunkel); }
.vorzeile::before { background: var(--gold); }
.abschnitt--dunkel .vorzeile { color: var(--gold); }
.abschnitt--dunkel { background: var(--nacht); }
.werte strong { color: var(--nacht); }
.hervorgehoben { border-left-color: var(--gold); }

/* ---------- Kopfzeile ---------- */
.kopf { background: var(--nacht); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.kopf.ist-gescrollt { box-shadow: 0 8px 24px -14px rgba(0,0,0,.6); }
.kopf__innen { min-height: 76px; padding-top: 0; padding-bottom: 0; gap: 24px; }
.logoplatte {
  background: #fff; align-self: flex-start; padding: 10px 14px 12px; border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.28); margin-bottom: -18px; position: relative; z-index: 2;
}
.kopf__logo.logoplatte img { width: 128px; }
.nav a { color: #e7ebf3; }
.nav a::after { background: var(--gold); }
.nav a:hover, .nav a.ist-aktiv { color: var(--gold); }
.kopf__tel { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; line-height: 1.15; white-space: nowrap; }
.kopf__tel svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; border: 1.5px solid var(--gold); fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.kopf__tel span { display: flex; flex-direction: column; font-weight: 700; font-size: 1.02rem; }
.kopf__tel small { font-weight: 400; font-size: .76rem; color: var(--dunkel-leise); }
.kopf__tel:hover span { color: var(--gold); }
.knopf--rand { color: var(--gold); border-color: var(--gold); }
.knopf--rand:hover { background: var(--gold); color: var(--nacht); }
.menue-knopf span { background: #fff; }
@media (max-width: 1240px) { .kopf__kontakt { display: none; } .nav__kontakt { display: inline; } }
@media (max-width: 1000px) {
  .kopf__tel span { display: none; }
  .kopf__logo.logoplatte img { width: 110px; }
}
@media (max-width: 760px) {
  .kopf__innen { min-height: 64px; }
  .logoplatte { padding: 8px 10px 10px; margin-bottom: -12px; }
  .kopf__logo.logoplatte img { width: 92px; }
  .kopf__tel { margin-left: auto; }
  .kopf__tel svg { width: 38px; height: 38px; }
  .kopf__portal { margin-left: 0; }
  .nav { background: var(--nacht); border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav a { border-bottom-color: rgba(255,255,255,.1); }
}
@media (max-width: 400px) { .kopf__innen { gap: 8px; } .kopf__portal { padding: .55em .8em; font-size: .9rem; } }

/* ---------- Leistungen: Kacheln mit „Weiterlesen“ ---------- */
.kacheln { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: start; }
.kachel {
  grid-column: span 2; background: var(--nacht-2); border: 1px solid rgba(200,163,90,.25); border-radius: 6px;
  padding: 30px 28px 20px; display: flex; flex-direction: column; color: var(--dunkel-text);
  transition: border-color .3s, opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.kachel:nth-child(n+4) { grid-column: span 3; }
.kachel:hover { border-color: rgba(200,163,90,.6); }
.kachel .karte__symbol { width: 40px; height: 40px; padding: 0; background: none; border-radius: 0; stroke: var(--gold); margin-bottom: 18px; }
.kachel:hover .karte__symbol { background: none; stroke: var(--gold); transform: none; }
.kachel h3 { color: #fff; font-size: clamp(1.15rem, 5.2vw, 1.3rem); margin-bottom: .55em; }
.kachel p { font-size: .98rem; margin-bottom: .9em; }
.kachel__mehr p { color: #b7c0d4; }
.kachel__knopf {
  align-self: stretch; text-align: left; background: none; border: 0; border-top: 1px solid rgba(200,163,90,.25);
  color: var(--gold); font: 600 .95rem var(--sans); padding: 14px 0 4px; margin-top: auto; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.kachel__knopf::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .3s; }
.kachel__knopf[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.kachel__knopf:hover { color: #e3c98f; }
.kachel__mehr:not([hidden]) { animation: aufklappen .45s ease; }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .kachel, .kachel:nth-child(n+4) { grid-column: span 3; } .kachel:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .kacheln { grid-template-columns: 1fr; } .kachel, .kachel:nth-child(n+4), .kachel:last-child { grid-column: auto; padding: 26px 22px 16px; } }

/* ---------- Downloads: hell mit Goldlinien ---------- */
.abschnitt--hell { background: var(--weiss); max-width: none; }
.abschnitt--hell > * { max-width: calc(var(--breite) - 2 * var(--rand)); margin-left: auto; margin-right: auto; }
.abschnitt--hell .downloads { gap: 0; }
.abschnitt--hell .dl-gruppe { background: none; border: 0; border-left: 1px solid var(--linie); border-radius: 0; padding: 0 28px; }
.abschnitt--hell .dl-gruppe:first-child { border-left: 0; padding-left: 0; }
.abschnitt--hell .dl-gruppe h3 { color: var(--tinte); }
.abschnitt--hell .dl-gruppe li + li { border-top: 0; }
.abschnitt--hell .dl-gruppe a { color: var(--tinte); border-bottom: 1px solid #efe8d8; border-radius: 0; padding: 11px 4px; }
.abschnitt--hell .dl-gruppe a:hover { background: var(--papier); }
.abschnitt--hell .dl-symbol { background: var(--nacht); color: var(--gold); }
.abschnitt--hell .dl-symbol::before { border-color: var(--weiss) var(--gold); }
.abschnitt--hell .dl-info, .abschnitt--hell .dl-leer, .abschnitt--hell .downloads__lade { color: var(--text-leise); }
@media (max-width: 900px) { .abschnitt--hell .dl-gruppe, .abschnitt--hell .dl-gruppe:first-child { border-left: 0; padding: 0; margin-bottom: 28px; } }

/* Knöpfe in Kontakt/Karte und Fuß */
.fuss__hinweis svg { stroke: var(--gold); }
.hero__linie { background: var(--gold); }
.nav a { white-space: nowrap; }
@media (max-width: 1000px) and (min-width: 761px) { .nav { gap: 14px; } .nav a { font-size: .9rem; } .kopf__innen { gap: 14px; } }

/* =====================================================================
   AUFBAU „SCHWEBENDE TAFELN“ MIT SEITENLEISTE
   ===================================================================== */
:root { --leiste: 260px; }

/* Festes Hintergrundbild hinter der ganzen Startseite */
.seitengrund {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(var(--schatten), .35) 0%, rgba(var(--schatten), .62) 70%, rgba(var(--schatten), .78) 100%),
    url("img/dresden.jpg") center 35% / cover no-repeat;
  background-color: var(--nacht);
}
body:has(.seitengrund) { background: var(--nacht); }

/* Startbereich liegt frei auf dem Bild */
.tafelseite .hero { clip-path: none; background: none; min-height: 100vh; }
.tafelseite .hero__innen { padding-top: 90px; padding-bottom: 120px; }

/* Kennzahlen */
.kennzahlen {
  list-style: none; margin: 46px auto 0; padding: 0; width: min(760px, 100%);
  display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(200,163,90,.45);
}
.kennzahlen li { padding: 20px 10px 0; color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.35; }
.kennzahlen b { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--gold); line-height: 1.15; margin-bottom: 4px; }

/* Die Kapitel als Tafeln über dem Bild */
.tafelseite > .abschnitt {
  max-width: 1060px; width: calc(100% - 2 * clamp(16px, 4vw, 48px));
  margin: 0 auto 42vh; padding: clamp(32px, 5vw, 60px);
  background: rgba(250,247,240,.96); border-top: 3px solid var(--gold); border-radius: 4px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.75);
}
.tafelseite > .abschnitt > * { max-width: none; margin-left: 0; margin-right: 0; }
.tafelseite > .abschnitt--dunkel { background: rgba(20,33,58,.96); }
.tafelseite > .abschnitt--hell { background: rgba(255,255,255,.97); }
.tafelseite > .abschnitt:last-child { margin-bottom: 30vh; }
.tafelseite .abschnitt__kopf { margin-bottom: 32px; }
.tafelseite .werte { margin-top: 40px; }

/* ---------- Seitenleiste ab 1001 px Breite ---------- */
@media (min-width: 1001px) {
  .kopf {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--leiste);
    box-shadow: 6px 0 30px -12px rgba(0,0,0,.5); overflow-y: auto;
  }
  .kopf__innen {
    flex-direction: column; align-items: stretch; height: 100%; min-height: 0;
    max-width: none; margin: 0; padding: 0 26px 26px; gap: 0;
  }
  .logoplatte { align-self: flex-start; margin: 0 0 40px; }
  .kopf__logo.logoplatte img { width: 150px; }
  .nav { flex-direction: column; gap: 0; margin: 0; }
  .nav a { padding: 12px 0; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav a::after { display: none; }
  .nav a.ist-aktiv { color: var(--gold); padding-left: 10px; box-shadow: inset 2px 0 0 var(--gold); }
  .nav .nav__kontakt { display: block; }
  .kopf__kontakt { display: none !important; }
  .kopf__tel { margin-top: auto; padding-top: 24px; }
  .kopf__tel span { display: flex; }
  .kopf__portal { margin-top: 16px; justify-content: center; }
  body > main, body > footer, body > .seitenkopf { margin-left: var(--leiste); }
  .seitengrund { left: var(--leiste); }
  html { scroll-padding-top: 30px; }
}
@media (min-width: 1001px) and (max-height: 620px) { .logoplatte { margin-bottom: 18px; } .nav a { padding: 8px 0; } }

/* ---------- Handy und Tablet: Leiste oben wie bisher ---------- */
@media (max-width: 1000px) {
  .tafelseite > .abschnitt { margin-bottom: 30vh; }
}
@media (max-width: 640px) {
  .kennzahlen { grid-template-columns: 1fr; margin-top: 32px; }
  .kennzahlen li { padding: 14px 0 0; }
  .tafelseite > .abschnitt { width: calc(100% - 20px); padding: 28px 18px; margin-bottom: 26vh; }
  .tafelseite .hero__innen { padding-top: 70px; padding-bottom: 90px; }
}

/* Feinschliff Tafel-Aufbau */
.kennzahlen b { font-weight: 600; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.kennzahlen li { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
@media (max-width: 640px) {
  .kennzahlen { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
  .kennzahlen li { padding: 14px 4px 0; font-size: .78rem; }
  .kennzahlen b { font-size: 1.45rem; }
  .tafelseite .hero__weiter { display: none; }
}
@media (min-width: 1001px) { .kachel h3 { font-size: 1.1rem; } }
a { color: var(--nacht); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.abschnitt--dunkel a { color: var(--gold); }
@media (max-width: 1000px) and (min-width: 641px) { .kachel h3 { font-size: 1.02rem; } }
@media (max-width: 360px) { .galerie__text strong { font-size: .76rem; } }

/* Kennzahlen: vier Spalten, Zahlen in fester Breite (kein Springen beim Hochzählen) */
.kennzahlen { grid-template-columns: repeat(4, 1fr); width: min(900px, 100%); }
.kennzahlen b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .kennzahlen { grid-template-columns: 1fr 1fr; row-gap: 6px; } }

/* Verbandsmitgliedschaft */
.verband { display: flex; align-items: center; gap: 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie); }
.verband__logo { flex: none; background: #fff; padding: 10px 14px; border-radius: 6px; }
.verband__logo img { width: 190px; height: auto; }
.verband p { margin: 0; color: var(--text-leise); max-width: 46ch; }
@media (max-width: 560px) { .verband { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* =====================================================================
   JAHRESZEITEN (Einstellungen in assets/jahreszeit.js)
   ===================================================================== */
html[data-saison="fruehling"] { --gold: #9cbf7e; --gold-dunkel: #5e7d48; --akzent-hell: #cfe3b9; }
html[data-saison="sommer"]    { --gold: #e3a93c; --gold-dunkel: #9a6a12; --akzent-hell: #f3d491; }
html[data-saison="herbst"]    { --gold: #cf7a45; --gold-dunkel: #95501f; --akzent-hell: #eab48f; }
/* Winter: Farben bleiben wie im ganzjährigen Konzept (Gold) */
html[data-saison] { --lachs: var(--gold); }

/* Adventsgruß */
.festgruss { display: none; }
html[data-advent] .festgruss {
  display: block; margin: 34px auto 0; max-width: 660px; padding: 22px 28px 20px;
  border: 1px solid rgba(200,163,90,.6); border-radius: 4px; background: rgba(14,22,40,.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: gruss-ein .8s ease .3s both;
}
.festgruss svg { width: 28px; height: 28px; fill: none; stroke: #e3c98f; stroke-width: 1.4; stroke-linecap: round; display: block; margin: 0 auto 8px; }
.festgruss p { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: #fff; line-height: 1.45; margin: 0 0 8px; }
.festgruss span { font-size: .85rem; color: #e3c98f; letter-spacing: .04em; }
@keyframes gruss-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .festgruss p br { display: none; } }

/* Schnee: Schneehauben auf den Tafeln */
html[data-schnee] .tafelseite > .abschnitt { position: relative; }
.schneehaube { position: absolute; left: 0; pointer-events: none; overflow: visible; z-index: 2; }
html[data-schnee] .tafelseite > .abschnitt { border-top: 0; }
.schneefall { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
@media (prefers-reduced-motion: reduce) { .schneefall { display: none; } }
@media (max-width: 640px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) { .kachel, .kachel:nth-child(n+4), .kachel:last-child { padding: 22px 16px 14px; } .kachel h3 { font-size: 1rem; } .tafelseite > .abschnitt { padding: 24px 14px; } }

/* Verband ganz unten in der Seitenleiste */
.kopf__verband { display: none; }
@media (min-width: 1001px) {
  .kopf__verband { display: block; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); text-decoration: none; }
  .kopf__verband small { display: block; font-size: .74rem; color: var(--dunkel-leise); margin-bottom: 6px; }
  .kopf__verband img { width: 150px; height: auto; opacity: .9; transition: opacity .2s; }
  .kopf__verband:hover img { opacity: 1; }
}
/* Schnee fällt hinter den Tafeln, damit Texte frei lesbar bleiben */
.schneefall { z-index: 0; }
.tafelseite { position: relative; z-index: 1; }

/* =====================================================================
   LOGO FREI AUF NACHTBLAU, PORTAL-UNTERTITEL, NACH-OBEN-PFEIL
   ===================================================================== */
.kopf__logo { display: block; text-decoration: none; }
.kopf__logo img { width: 128px; height: auto; display: block; }
.fuss__logo { background: none; padding: 0; border-radius: 0; }
.fuss__logo img { width: 130px; }
@media (min-width: 1001px) {
  .kopf__logo { margin: 30px 0 40px; }
  .kopf__logo img { width: 176px; }
}
@media (max-width: 1000px) { .kopf__logo img { width: 112px; } }
@media (max-width: 760px)  { .kopf__logo img { width: 96px; } }

.portal__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.portal__text small { font-weight: 400; font-size: .74rem; opacity: .9; margin-top: 2px; }
@media (min-width: 1001px) { .kopf__portal { justify-content: flex-start; padding: .7em 1.2em; border-radius: 14px; } }
@media (max-width: 1000px) { .portal__text small { display: none; } }

.nach-oben {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nacht); border: 1.5px solid var(--gold); color: var(--gold);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s;
}
.nach-oben.ist-da { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover { background: var(--gold); color: var(--nacht); }
.nach-oben svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .nach-oben { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* =====================================================================
   GROSSE BILDSCHIRME: alles maßvoll mitwachsen lassen
   ===================================================================== */
@media (min-width: 1800px) {
  html { font-size: 112.5%; }                 /* 18 px Grundschrift */
  :root { --leiste: 290px; --breite: 1320px; }
  .tafelseite > .abschnitt { max-width: 1200px; }
  .kopf__logo img { width: 196px; }
}
@media (min-width: 2400px) {
  html { font-size: 125%; }                   /* 20 px Grundschrift */
  :root { --leiste: 330px; --breite: 1480px; }
  .tafelseite > .abschnitt { max-width: 1360px; }
  .kopf__logo img { width: 220px; }
}

/* Leistungen bei mittlerer Breite mit Seitenleiste: zwei Spalten, damit lange Wörter ganz bleiben */
@media (min-width: 1001px) and (max-width: 1600px) {
  .kachel, .kachel:nth-child(n+4) { grid-column: span 3; }
  .kachel:last-child { grid-column: 1 / -1; }
}
.kachel h3 { overflow-wrap: normal; word-break: normal; }

/* Große Bildschirme: Startbereich kräftiger */
@media (min-width: 1800px) {
  .hero .hero__name { font-size: clamp(4.4rem, 3.6vw, 6rem); }
  .hero__motto { font-size: 2rem; }
  .kennzahlen { width: min(1100px, 100%); }
  .kennzahlen b { font-size: 3rem; }
  .kennzahlen li { font-size: 1rem; }
}

/* Fußzeile: eine schlanke Zeile */
.fuss__zeile { padding-top: 18px; padding-bottom: 18px; gap: 10px 32px; justify-content: space-between; }
.fuss__zeile p { margin: 0; font-size: .88rem; }
.fuss__zeile .fuss__hinweis { flex-basis: auto; border-top: 0; padding-top: 0; font-size: .88rem !important; }
.fuss__zeile nav { margin-left: 0; gap: 24px; }
.fuss__zeile nav a { font-size: .9rem; }
.fuss__copy { color: var(--dunkel-leise); }
@media (max-width: 760px) {
  .fuss__zeile { flex-direction: column; text-align: center; gap: 8px; padding-bottom: 76px; }
  .fuss__zeile .fuss__hinweis { justify-content: center; }
}
@media (min-width: 761px) { .fuss__zeile { padding-right: 90px; } }
.fuss__verband { display: none; }
@media (max-width: 1000px) { .fuss__verband { display: block; } .fuss__verband a { color: var(--dunkel-leise); text-decoration: none; } }
/* Seitenleiste auf niedrigen Bildschirmen kompakter (sechs Menüpunkte) */
@media (min-width: 1001px) and (max-height: 800px) {
  .kopf__logo { margin: 18px 0 22px; }
  .kopf__logo img { width: 150px; }
  .nav a { padding: 8px 0; font-size: 1rem; }
  .kopf__tel { padding-top: 14px; }
  .kopf__portal { margin-top: 10px; }
  .kopf__verband { margin-top: 12px; padding-top: 10px; }
  .kopf__verband img { width: 120px; }
}
@media (min-width: 1001px) and (max-height: 640px) {
  .kopf__verband small { display: none; }
  .kopf__logo img { width: 128px; }
  .nav a { padding: 6px 0; font-size: .95rem; }
}



/* Ostergruß (Montag vor Karfreitag bis Freitag nach Ostern) */
.ostergruss { display: none; }
html[data-ostern] .ostergruss {
  display: block; margin: 34px auto 0; max-width: 660px; padding: 20px 28px 18px;
  border: 1px solid rgba(200,163,90,.6); border-radius: 4px; background: rgba(14,22,40,.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: gruss-ein .8s ease .3s both;
}
.ostergruss svg { width: 96px; height: 45px; display: block; margin: 0 auto 8px; }
.ostergruss p { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: #fff; line-height: 1.45; margin: 0 0 8px; }
.ostergruss span { font-size: .85rem; color: #e3c98f; letter-spacing: .04em; }
@media (max-width: 640px) { .ostergruss p br { display: none; } }

/* Herbstlaub-Windstoß im Startbereich */
.tafelseite .hero { position: relative; }
.saison-flug { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.tafelseite .hero__innen { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .saison-flug { display: none; } }