/* ==========================================================================
   Hartl GmbH & Co. KG, hartl-kraiburg.de
   Handgeschriebenes CSS. Keine externen Requests, kein Buildprozess.

   Gestaltungsregeln:
   - Viel Weissraum, Bilder gross, Flaechen statt Linien.
   - Keine Trennlinien zwischen Abschnitten, Trennung nur ueber Flaeche und Abstand.
   - Lato in zwei Wirkungen, 300 fuer Ueberschriften, 700 und 900 fuer Akzente.
   - Blau ist die Hausfarbe und markiert auch die Handlungen, kein Gelb.
     Gruen gibt es nur noch als Vergleichsvariante in der lokalen Vorschau.

   Reihenfolge: 1 Schriften, 2 Tokens, 3 Reset, 4 Layout, 5 Kopf, 6 Hero,
                7 Bausteine, 8 Fuss, 9 Formular, 10 Responsive, 11 Print,
                12 Animationen, 13 Hinweis
   ========================================================================== */

/* 1 Schriften -------------------------------------------------------------- */
/* Lato, SIL Open Font License, Teilmenge latin von Google Fonts, liegt lokal.
   Nur woff2, das koennen alle Browser, fuer die die Seite gebaut ist. Der Kopf
   jeder Seite laedt die vier Schnitte vor. */
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/lato-300.woff2") format("woff2");
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/assets/fonts/lato-900.woff2") format("woff2");
}

/* 2 Tokens ----------------------------------------------------------------- */
:root {
  --blue-900: #0a2240;
  --blue-800: #0f3160;
  --blue-700: #14417a;
  --blue-500: #1f6bb8;
  --blue-100: #e7eef6;
  --green:    #27762f;
  --green-700:#1c5a22;
  /* Handlungsfarbe fuer Knoepfe, Abschlussband und Telefonsymbol. Seit dem
     15.09.2026 Blau, von Mike entschieden. Die Variante Gruen steht direkt
     unter diesem Block und laeuft nur noch in der Vorschau zum Vergleich. */
  --aktion:      var(--blue-500);
  --aktion-700:  var(--blue-700);
  --aktion-hell: #eaf2fb;
  --ink:      #1c2733;
  --muted:    #55616f;
  --surface:  #f2f5f8;
  --surface-2:#e7edf3;
  --white:    #ffffff;

  --wrap: 1240px;
  --gutter: 24px;
  --radius: 2px;
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --font: "Lato", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Farbvariante Gruen, der fruehere Standard. Nur fuer den Vergleich in der
   lokalen Vorschau "vorschau-gruen", die data-farbe="gruen" am html-Element
   setzt. Auf dem Server ist diese Variante nie aktiv. */
[data-farbe="gruen"] {
  --aktion:      var(--green);
  --aktion-700:  var(--green-700);
  --aktion-hell: #dcefdd;
}

/* 3 Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 1.0625rem/1.72 var(--font); overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
address { font-style: normal; }
img { height: auto; display: block; }
a { color: var(--blue-500); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }

h1, h2, h3, h4 { margin: 0 0 .7em; font-weight: 300; line-height: 1.12; text-transform: uppercase; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: .04em; }
h1 b, h1 strong, h2 b, h2 strong { font-weight: 900; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--aktion); color: var(--white); padding: .9rem 1.3rem; font-weight: 700;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ico { width: 1.25rem; height: 1.25rem; flex: none; }
.ico-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 4 Layout ----------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }
.section--tight { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.prose { max-width: 66ch; }
.prose p:last-child, .prose ul:last-child { margin-bottom: 0; }

.eyebrow {
  display: block; margin-bottom: .8rem; text-transform: none;
  color: var(--blue-500); font-size: .98rem; font-weight: 700;
}
.eyebrow--light { color: #9cc3ea; }
.head { max-width: 48ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.head p { color: var(--muted); margin: 0; }
.head--wide { max-width: 68ch; }

.list-mark { list-style: none; padding: 0; }
.list-mark li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
/* Haken statt Punkt, gezeichnet aus zwei Raendern eines gedrehten Kaestchens */
.list-mark li::before {
  content: ""; position: absolute; left: .32rem; top: .3em;
  width: .36em; height: .7em;
  border: solid var(--blue-500); border-width: 0 .14em .14em 0;
  transform: rotate(45deg);
}

/* 5 Kopf ------------------------------------------------------------------- */
/* Smarter Kopf: verschwindet beim Runterscrollen und kommt beim Hochscrollen zurueck.
   Die Klassen setzt main.js, ohne JavaScript bleibt er einfach oben stehen. Der
   Schatten erscheint nur, solange der Kopf ueber dem Inhalt schwebt. */
.masthead {
  position: sticky; top: 0; z-index: 40; background: var(--white);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.masthead.kopf-schwebt { box-shadow: 0 8px 24px rgba(8, 26, 48, .08); }
.masthead.kopf-weg { transform: translateY(-100%); box-shadow: none; }
.masthead .wrap { display: flex; align-items: center; gap: 1.4rem; min-height: 78px; }

.logo { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.logo img { width: auto; height: 48px; }
.logo-text { display: block; }
.logo-name {
  display: block; font-size: 1.32rem; font-weight: 900; letter-spacing: .06em;
  color: var(--blue-800); line-height: 1; text-transform: uppercase;
}
.logo-sub {
  display: block; margin-top: .25rem; font-size: .6rem; font-weight: 700;
  letter-spacing: .17em; color: var(--muted); text-transform: uppercase;
}

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: .55rem .72rem; color: var(--ink); text-decoration: none;
  font-size: .97rem; font-weight: 700; white-space: nowrap;
}
.nav a:hover { color: var(--blue-500); }
.nav-tel { display: none; }

/* Aktiver Menuepunkt kommt ueber data-page am body, damit der Kopfblock
   in allen Dateien byte-identisch bleibt. */
body[data-page="container"]    .nav a[href="/container-entsorgung/"],
body[data-page="transporte"]   .nav a[href="/transporte/"],
body[data-page="erdarbeiten"]  .nav a[href="/erdarbeiten/"],
body[data-page="wertstoffhof"] .nav a[href="/wertstoffhof/"],
body[data-page="ueber-uns"]    .nav a[href="/ueber-uns/"],
body[data-page="kontakt"]      .nav a[href="/kontakt/"] { color: var(--blue-500); }

.kopf-tel { flex: none; text-align: right; line-height: 1.25; }
.kopf-tel a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 1.12rem; font-weight: 900; color: var(--blue-800); text-decoration: none;
}
.kopf-tel a:hover { color: var(--blue-500); }
.kopf-tel .ico { width: 1.1rem; height: 1.1rem; color: var(--aktion); }
.kopf-tel span { display: block; margin-top: .1rem; font-size: .76rem; color: var(--muted); }

.nav-toggle {
  display: none; align-items: center; gap: .55rem; margin-left: auto;
  background: var(--surface); border: 0; border-radius: var(--radius);
  color: var(--blue-900); padding: .7rem 1rem; cursor: pointer;
  font: 700 .95rem var(--font);
}
.nav-toggle .ico { width: 1.35rem; height: 1.35rem; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav-toggle[aria-expanded="false"] .ico-close { display: none; }

/* 6 Hero ------------------------------------------------------------------- */
.hero { position: relative; background: var(--blue-900); color: var(--white); overflow: hidden; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,26,48,.94) 0%, rgba(8,26,48,.80) 26%, rgba(8,26,48,.46) 56%, rgba(8,26,48,.14) 86%, rgba(8,26,48,.26) 100%);
}
.hero .wrap {
  position: relative; z-index: 2; display: flex; align-items: flex-end;
  min-height: clamp(32rem, 76vh, 45rem); padding-block: clamp(2.5rem, 6vw, 4.2rem);
}
/* min-width 0, damit ein zu langes Wort umbricht statt vom Hero abgeschnitten zu werden */
.hero-inner { max-width: 48rem; min-width: 0; }
.hero h1 { color: var(--white); margin-bottom: 0; text-shadow: 0 1px 18px rgba(8,26,48,.45); }
.hero-lead { margin-top: 1rem; margin-bottom: 0; font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: #dbe7f4; max-width: 46ch; }
.hero .btn-row { margin-top: 2.2rem; }

.hero--sub .wrap { min-height: clamp(17rem, 40vh, 25rem); }
.hero--sub h1 { max-width: 34ch; }
.hero--flach { background: var(--blue-900); }
.hero--flach .wrap { min-height: clamp(12rem, 26vh, 17rem); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.6rem; border: 1px solid transparent; border-radius: var(--radius);
  font: 700 1rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn .ico { width: 1.15rem; height: 1.15rem; }
.btn--primary { background: var(--aktion); border-color: var(--aktion); color: var(--white); }
.btn--primary:hover { background: var(--aktion-700); border-color: var(--aktion-700); color: var(--white); }
.btn--blue { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.btn--blue:hover { background: var(--blue-700); border-color: var(--blue-700); color: var(--white); }
.btn--dark { background: var(--blue-900); border-color: var(--blue-900); color: var(--white); }
.btn--dark:hover { background: var(--blue-700); border-color: var(--blue-700); color: var(--white); }
.btn--ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,.18); border-color: var(--white); color: var(--white); }
.btn--sm { padding: .62rem 1rem; font-size: .9rem; }

/* 7 Bausteine -------------------------------------------------------------- */
.tiles { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); padding: 2.5rem 1.6rem 2rem;
  text-decoration: none; color: var(--ink);
  transition: background-color .15s ease, transform .15s ease;
}
.tile:hover { background: var(--surface-2); color: var(--ink); transform: translateY(-3px); }
/* Nur das grosse Icon oben in der Kachel. Ohne > traefe die Regel auch den Pfeil bei
   "Mehr dazu", der saesse dann durch den Abstand unten zu hoch und waere dunkler. */
.tile > .ico { width: 3.4rem; height: 3.4rem; color: var(--blue-700); margin-bottom: 1.2rem; }
.tile:not(.tile--photo) .tile-name { min-height: 2.5em; }
.tile-name { font-size: .98rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tile-text { display: block; margin-top: .6rem; font-size: .95rem; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; line-height: 1.55; }
.tile--photo { padding: 0; background: var(--surface); }
.tile--photo img { width: 100%; }
.tile-body { display: block; padding: 1.6rem 1.4rem 1.8rem; }
/* Beim Ueberfahren erscheint "Mehr dazu", auf Touchgeraeten steht es immer da */
.tile-mehr {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
  font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: var(--blue-500);
  opacity: 0; transform: translateY(.5rem);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.tile-mehr .ico { width: 1rem; height: 1rem; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.tile:hover .tile-mehr, .tile:focus-visible .tile-mehr { opacity: 1; transform: none; }
.tile:hover .tile-mehr .ico, .tile:focus-visible .tile-mehr .ico { transform: translateX(.3rem); }
.tile--photo picture { display: block; overflow: hidden; }
.tile--photo img { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.tile--photo:hover img { transform: scale(1.05); }
@media (hover: none) {
  .tile-mehr { opacity: 1; transform: none; }
}

/* min() verhindert auf sehr schmalen Handys (320 px) einen Ueberstand nach rechts */
.split { display: grid; gap: clamp(1.8rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); align-items: center; }
.split--top { align-items: start; }
/* Zwei Standortkarten nebeneinander sind immer gleich hoch */
.split:has(> .loc + .loc) { align-items: stretch; }
figure { margin: 0; }
figure img { width: 100%; }
figcaption { margin-top: .7rem; font-size: .89rem; color: var(--muted); }

/* Bildspalte mit Kurzinfos darunter, etwa beim Hauptgeschaeft auf der Startseite */
.bildspalte { display: grid; gap: 1.4rem; align-content: start; }
.kurzinfo { list-style: none; margin: 0; padding: 1.5rem 1.6rem; display: grid; gap: 1.1rem; background: var(--white); }
.section:not(.section--surface) .kurzinfo { background: var(--surface); }
.kurzinfo li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.kurzinfo .ico { width: 1.3rem; height: 1.3rem; color: var(--blue-500); margin-top: .2rem; }
.kurzinfo span { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.kurzinfo b { display: block; color: var(--ink); font-size: 1rem; }
/* Kleine Vorlagen nicht ueber ihre Originalgroesse strecken */
.bild-klein img { width: auto; max-width: 100%; }

.steps { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { counter-increment: s; }
.steps { counter-reset: s; }
.step::before {
  content: "0" counter(s); display: block; margin-bottom: .8rem;
  font-size: 2.1rem; font-weight: 900; color: #a8c2dc; line-height: 1;
}
.section--surface .step::before { color: #93b2d0; }
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--muted); margin: 0; }

.facts { background: var(--blue-900); color: var(--white); }
.facts ul { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); list-style: none; margin: 0; padding: 0; }
.facts b { display: block; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 300; line-height: 1.05; }
.facts b em { font-style: normal; font-weight: 900; }
.facts li > span { display: block; margin-top: .45rem; color: #a9bfd8; font-size: .95rem; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.chips li { background: var(--white); padding: .6rem 1rem; font-size: .95rem; border-radius: var(--radius); }
.section--surface .chips li { background: var(--white); }

.loc { background: var(--surface); padding: 2rem 1.8rem; }
.section--surface .loc { background: var(--white); }
.loc h3 { margin-bottom: .15rem; }
.loc-role { display: block; margin-bottom: 1.4rem; font-size: .95rem; font-weight: 700; color: var(--blue-500); }
.dl { margin: 0 0 1.3rem; display: grid; grid-template-columns: 1.4rem 1fr; gap: .75rem .8rem; align-items: start; }
.dl .ico { width: 1.15rem; height: 1.15rem; color: var(--blue-500); margin-top: .3rem; }
.dl a { text-decoration: none; font-weight: 700; }
.dl a:hover { text-decoration: underline; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; margin: 0; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; color: var(--muted); }

.note { background: var(--surface); padding: 1.2rem 1.4rem; color: var(--muted); font-size: .97rem; }
.section--surface .note { background: var(--white); }
.note p:last-child { margin-bottom: 0; }

.gallery { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Die Fotos kommen in 3:2 und 4:3, einheitlich 4:3 zugeschnitten, damit jede Reihe gleich hoch ist */
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Chronik als Zeitstrahl: Linie links, je Jahr ein Punkt, Fotos beim passenden Jahr.
   Mit Animation fuellt sich die Linie beim Scrollen (--fortschritt) und die Punkte
   faerben sich ein (ist-erreicht), beides steuert animationen.js. */
.chronik { --jahr: clamp(1.9rem, 3.4vw, 2.6rem); position: relative; list-style: none; margin: 0; padding: 0; }
.chronik::before, .chronik::after {
  content: ""; position: absolute; left: 7px; top: .6rem; bottom: 0; width: 2px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
}
.chronik::before { background: #cbd8e5; }
.chronik::after { background: var(--blue-500); transform-origin: top; transform: scaleY(var(--fortschritt, 1)); }
.chronik-eintrag { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; padding: 0 0 2.8rem 3rem; }
.chronik-eintrag:last-child { padding-bottom: 0; }
.chronik-eintrag::before {
  content: ""; position: absolute; left: 0; top: calc(var(--jahr) / 2 - 8px); z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue-500); border: 2px solid var(--blue-500); box-shadow: 0 0 0 5px var(--surface);
  transition: background-color .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.anim-bereit .chronik-eintrag:not(.ist-erreicht)::before { background: var(--surface); transform: scale(.75); }
.chronik-jahr { font-size: var(--jahr); font-weight: 900; line-height: 1; color: var(--blue-500); }
.chronik-text h3 { margin: .15rem 0 .35rem; }
.chronik-text p { margin: 0; color: var(--muted); max-width: 48ch; }
.chronik-bild { margin: .7rem 0 0; max-width: 30rem; }
.chronik-bild--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.chronik-bild--zwei figure { margin: 0; }
.chronik-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .chronik-eintrag { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 25rem); column-gap: 2.5rem; padding-bottom: 3.6rem; }
  .chronik-bild { grid-column: 3; grid-row: 1; margin-top: 0; }
}

.anfahrt { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.anfahrt a {
  display: flex; align-items: center; gap: .8rem; background: var(--surface);
  padding: 1.1rem 1.3rem; text-decoration: none; color: var(--ink); font-weight: 700;
}
.section--surface .anfahrt a { background: var(--white); }
.anfahrt a:hover { background: var(--surface-2); color: var(--blue-700); }
.anfahrt .ico { width: 1.2rem; height: 1.2rem; color: var(--aktion); }

.more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--blue-500); text-decoration: none;
}
.more .ico { width: 1.05rem; height: 1.05rem; }
.more:hover { text-decoration: underline; }

.cta { background: var(--aktion); color: var(--white); }
.cta .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; padding-block: clamp(2.4rem, 5vw, 3.4rem); }
.cta h2 { margin: 0 0 .3rem; color: var(--white); }
.cta p { margin: 0; max-width: 48ch; color: var(--aktion-hell); }
.cta .btn-row { margin: 0 0 0 auto; }
.cta .btn--dark { background: var(--blue-900); border-color: var(--blue-900); }
.cta .btn--dark:hover { background: var(--white); border-color: var(--white); color: var(--aktion-700); }

.rechtstext { max-width: 72ch; }
.rechtstext h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 2.6rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: 1.9rem; }
.rechtstext dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.3rem; margin: 0 0 1.3rem; }
.rechtstext dt { font-weight: 700; }
.rechtstext dd { margin: 0; }

.abstand-oben { margin-top: 1.7rem; }
.leise { color: var(--muted); }

/* 8 Fuss ------------------------------------------------------------------- */
.footer { background: var(--blue-900); color: #bccee1; font-size: .97rem; }
.footer .wrap { padding-block: clamp(2.8rem, 6vw, 4.2rem); }
.footer-cols { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer h2 { color: var(--white); font-size: .82rem; font-weight: 700; letter-spacing: .15em; margin-bottom: 1.2rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .5rem; }
.footer a { color: #dbe6f2; text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer address { font-style: normal; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem;
  margin-top: 3rem; font-size: .88rem; color: #93a9c2;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; margin-left: auto; }

/* 9 Formular --------------------------------------------------------------- */
.form { display: grid; gap: 1.2rem; max-width: 46rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 700; font-size: .95rem; }
.field .hint { color: var(--muted); font-size: .86rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem .95rem; background: var(--surface); color: var(--ink);
  border: 1px solid var(--surface-2); border-radius: var(--radius); font: 400 1rem var(--font);
}
.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); border-color: var(--blue-500); }
.field textarea { min-height: 160px; resize: vertical; }
.field-row { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; }
.check input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .2rem; }
.hp { position: absolute; left: -9999px; }
.alert { padding: 1.1rem 1.3rem; margin-bottom: 1.8rem; font-weight: 700; }
.alert--ok { background: #e7f4e8; color: #1b5e20; }
.alert--err { background: #fdecea; color: #8e1f1a; }

/* 10 Responsive ------------------------------------------------------------ */
@media (max-width: 1140px) {
  .kopf-tel span { display: none; }
  .kopf-tel a { font-size: 1.1rem; }
  .nav a { padding: .55rem .6rem; font-size: .93rem; }
}
@media (max-width: 1020px) {
  .masthead .wrap { flex-wrap: wrap; min-height: 64px; }
  .nav-toggle { display: inline-flex; }
  .kopf-tel { display: none; }
  .nav { order: 3; flex-basis: 100%; margin: 0; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 1rem; }
  .nav a { padding: .95rem .3rem; font-size: 1.05rem; }
  .nav-tel { display: block; }
  .nav-tel a { color: var(--blue-800); font-weight: 900; }
  .cta .btn-row { margin-left: 0; }
}
/* Menue bis 1020 px mit JavaScript: klappt als Blatt unter dem Kopf auf, die Seite
   dahinter wird abgedunkelt. main.js steuert das ueber die Klasse ist-offen und
   animiert mit GSAP. Ohne JavaScript steht das Menue wie bisher in der Seite. */
@media (max-width: 1020px) {
  .nav-toggle { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: .55rem; }
  .nav-toggle .ico { grid-area: 1 / 1; transition: opacity .25s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
  .nav-toggle[aria-expanded="true"] .ico-menu { display: block; opacity: 0; transform: rotate(-90deg) scale(.5); }
  .nav-toggle[aria-expanded="false"] .ico-close { display: block; opacity: 0; transform: rotate(90deg) scale(.5); }
  .js .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); box-shadow: 0 26px 40px -18px rgba(8, 26, 48, .3);
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .js .nav.ist-offen { display: block; }
  .js .nav ul { max-width: var(--wrap); margin-inline: auto; padding: .2rem var(--gutter) 1.4rem; }
  .nav-hintergrund.ist-offen { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(10, 34, 64, .42); }
}
.nav-hintergrund { display: none; }
/* Vierergruppen: In mittleren Breiten wuerde bei den vier Leistungskacheln, im
   Zahlenband und in den Fussspalten sonst das vierte Element allein in der
   zweiten Zeile stehen. Zwei mal zwei wirkt dort ruhiger. Die Grenzen ergeben
   sich aus den minmax-Werten der Raster. Browser ohne :has zeigen bei den
   Kacheln weiter drei plus eins, das ist nur ein Schoenheitsfehler. */
@media (min-width: 641px) and (max-width: 1096px) {
  .tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 484px) and (max-width: 952px) {
  .facts ul { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 506px) and (max-width: 1002px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .logo img { height: 38px; }
  .logo { gap: .6rem; }
  .logo-name { font-size: 1.08rem; }
  .logo-sub { font-size: .52rem; letter-spacing: .14em; }
  .btn { width: 100%; justify-content: center; }
  /* Nur der grosse Hero der Startseite, die Unterseiten behalten ihre eigene Hoehe */
  .hero:not(.hero--sub, .hero--flach) .wrap { min-height: 28rem; }
  .tile { padding: 2rem 1.3rem 1.6rem; }
  /* padding 0 muss die tile-Regel eine Zeile hoeher schlagen, sonst bekommt
     das Foto am Handy einen grauen Rand */
  .tile--photo { padding: 0; }
  /* Weniger Innenabstand, damit "07:30 bis 20:00 Uhr" in eine Zeile passt */
  .loc { padding: 1.6rem 1.3rem; }
  /* Rechtstexte: Bezeichnung ueber dem Wert, sonst quetscht
     "Umsatzsteuer-Identifikationsnummer" die Werte in eine schmale Spalte */
  .rechtstext dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rechtstext dd { margin-bottom: .7rem; }
}

/* 11 Print ----------------------------------------------------------------- */
@media print {
  .nav, .nav-toggle, .cta, .btn-row, .hero-media, .kopf-tel { display: none !important; }
  /* transform aufheben, sonst fehlt der Kopf im Ausdruck, wenn er gerade weggescrollt war */
  .masthead { position: static; transform: none; }
  .hero { background: none; color: var(--ink); }
  .hero::after { display: none; }
  .hero h1 { color: var(--ink); }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* 12 Animationen ----------------------------------------------------------- */
/* Die Klasse anim setzt vorab.js im Kopf jeder Seite, anim-bereit setzt
   animationen.js, sobald GSAP den Startzustand uebernommen hat. Bis dahin halten
   diese Regeln die Elemente unsichtbar, damit nichts aufblitzt. Ohne JavaScript
   und bei "Bewegung reduzieren" greift nichts davon. Die Auswahl steht gleich
   lautend in animationen.js. */
.anim:not(.anim-bereit) :is(.hero-inner > *, .head > *, .prose > *, .split > figure, .bildspalte > figure, .note,
  .cta .wrap > *, .tiles > *, .steps > *, .facts li, .gallery > *, .anfahrt > *,
  .split > .loc, .chips > li, .kurzinfo li, .chronik-jahr, .chronik-text, .chronik-bild) { opacity: 0; }
.anim:not(.anim-bereit) .chronik { --fortschritt: 0; }
.anim:not(.anim-bereit) .hero-media { transform: scale(1.08); }
.facts em { font-variant-numeric: tabular-nums; }

@media print {
  .anim :is(.hero-inner > *, .head > *, .prose > *, .split > figure, .bildspalte > figure, .note,
    .cta .wrap > *, .tiles > *, .steps > *, .facts li, .gallery > *, .anfahrt > *,
    .split > .loc, .chips > li, .kurzinfo li, .chronik-jahr, .chronik-text, .chronik-bild) { opacity: 1 !important; transform: none !important; }
  .chronik { --fortschritt: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .masthead, .nav-toggle .ico, .tile, .tile-mehr, .tile-mehr .ico, .tile--photo img,
  .chronik-eintrag::before { transition: none; }
  .tile--photo:hover img { transform: none; }
}

/* 13 Hinweis --------------------------------------------------------------- */
/* Sagt beim ersten Besuch, dass die Seite keine Cookies setzt und nichts von
   fremden Servern laedt. Es gibt nichts zuzustimmen, deshalb nur ein Knopf.
   Ein- und Ausblenden laufen per CSS, damit der Hinweis auch ohne GSAP geht. */
.hinweis {
  position: fixed; z-index: 35;
  left: var(--gutter); bottom: max(var(--gutter), env(safe-area-inset-bottom));
  width: min(27rem, calc(100% - 2 * var(--gutter)));
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--blue-900); color: #c9d8e8;
  box-shadow: 0 20px 50px rgba(8, 26, 48, .3);
  font-size: .93rem; line-height: 1.6;
}
.hinweis h2 { margin: 0 0 .5rem; font-size: .82rem; font-weight: 700; letter-spacing: .15em; color: var(--white); }
.hinweis p { margin: 0; }
.hinweis-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.3rem; margin-top: 1rem; }
.hinweis-aktion a { color: var(--white); font-size: .88rem; }
.hinweis-aktion a:hover { color: var(--white); }
.hinweis .btn { width: auto; }
.hinweis:not([hidden]) { animation: hinweis-ein .7s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
.hinweis.ist-weg { animation: hinweis-aus .3s ease-in both; }
@keyframes hinweis-ein { from { opacity: 0; transform: translateY(1.2rem); } }
@keyframes hinweis-aus { to { opacity: 0; transform: translateY(.8rem); } }

@media (max-width: 640px) {
  .hinweis { padding: 1.15rem 1.2rem 1.2rem; font-size: .88rem; line-height: 1.5; }
  .hinweis-aktion { margin-top: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hinweis:not([hidden]), .hinweis.ist-weg { animation: none; }
}
@media print {
  .hinweis { display: none !important; }
}