/* ==========================================================================
   JK Dienstleistungen, dienstleistungen-jk.com
   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.
   - Cyan #009fe3 ist die Logofarbe und bleibt grossen Flaechen und Icons
     vorbehalten. Fuer Knoepfe, Links und kleine Schrift ist es zu hell,
     dort laeuft das dunklere Handlungsblau ueber die Variable --aktion.

   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, 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: #0b2440;   /* Fuss, Zahlenband, Hero-Verlauf, dunkle Knoepfe */
  --blue-800: #0f3765;   /* Logo-Schriftzug, Telefon im Kopf */
  --blue-700: #11518c;   /* Hover auf Handlungsflaechen */
  --blue-500: #0b6aab;   /* Links, Kickerzeile, Listenmarker. Mindestens 4,5 zu 1 auch auf --surface */
  --blue-100: #e3f0fa;
  --cyan:     #009fe3;   /* Logofarbe, nur fuer grosse Flaechen und Akzente */
  --cyan-600: #0089c7;   /* Icons in den Kacheln, Logo-Schriftzug */
  --aktion:      var(--blue-500);
  --aktion-700:  var(--blue-700);
  --aktion-hell: #e8f3fc;
  --ink:      #1b2530;
  --muted:    #53616e;
  --surface:  #eef4f9;   /* helle, leicht eisige Flaechen */
  --surface-2:#dfe9f2;
  --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;
}

/* 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: #8ecdf1; }
.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(9, 28, 50, .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: .8rem; text-decoration: none; flex: none; }
.logo img { width: auto; height: 54px; }
.logo-text { display: block; }
.logo-name {
  display: block; font-size: 1.32rem; font-weight: 900; letter-spacing: .05em;
  color: var(--cyan-600); line-height: 1; text-transform: uppercase;
}
.logo-sub {
  display: block; margin-top: .28rem; 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; }

.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; }
/* Das Bild ist etwas hoeher als der Ausschnitt, damit die Parallaxe aus
   animationen.js Luft nach oben und unten hat. Ohne JavaScript sitzt es mittig. */
.hero-media { position: absolute; left: 0; right: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,28,50,.94) 0%, rgba(9,28,50,.80) 26%, rgba(9,28,50,.46) 56%, rgba(9,28,50,.14) 86%, rgba(9,28,50,.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(9,28,50,.45); }
.hero-lead { margin-top: 1rem; margin-bottom: 0; font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: #d9e6f3; max-width: 46ch; }
.hero .btn-row { margin-top: 2.2rem; }

.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--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;
}
.section--surface .tile { background: var(--white); }
.tile:hover { background: var(--surface-2); color: var(--ink); transform: translateY(-3px); }
/* Nur das grosse Icon oben in der Kachel, nicht der Pfeil bei "Jetzt anfragen" */
.tile > .ico { width: 3.4rem; height: 3.4rem; color: var(--cyan-600); margin-bottom: 1.2rem; }
/* Kachelname ist eine h3, damit jede Leistung eine eigene Ueberschrift hat */
.tile-name { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.45; 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; }
/* Beim Ueberfahren erscheint "Jetzt anfragen", 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); }
@media (hover: none) {
  .tile-mehr { opacity: 1; transform: none; }
}
/* Hinweiszeile unter dem Raster fuer alles, was keine eigene Kachel hat */
.tiles-mehr {
  margin: 1.8rem 0 0; text-align: center; color: var(--muted); font-size: .98rem;
}
.tiles-mehr a { color: var(--aktion); font-weight: 700; text-decoration: none; }
.tiles-mehr a:hover { text-decoration: underline; }

/* 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; }
figure { margin: 0; }
figure img { width: 100%; }
figcaption { margin-top: .7rem; font-size: .89rem; color: var(--muted); }

/* Bildspalte mit Kurzinfos darunter */
.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; }

.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: #a3c6e1; line-height: 1;
}
.section--surface .step::before { color: #8cb6d6; }
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--muted); margin: 0; }

/* Kontaktzeile unter dem Anfrage-Planer. Das Formular nimmt die volle
   Breite ein, die Kontaktwege stehen in einer eigenen Zeile darunter.
   Runde Plaketten wie die Symbole am Firmenwagen. */
.kband { margin-top: 2.8rem; padding-top: 2.4rem; border-top: 1px solid var(--surface-2); }
.section--surface .kband { border-top-color: #dce8f2; }
.kband-kopf { max-width: 56ch; margin-bottom: 1.8rem; }
.kband-kopf h3 { margin-bottom: .35rem; }
.kband-kopf p { margin: 0; color: var(--muted); }
.kband-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.kband-liste li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.kband-ico {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; background: var(--aktion); color: var(--white);
}
.kband-ico .ico { width: 1.25rem; height: 1.25rem; }
.kband-liste b { display: block; margin-bottom: .2rem; font-size: .95rem; letter-spacing: .02em; }
.kband-liste a { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.kband-liste a:hover { text-decoration: underline; }
.kband-liste address { font-style: normal; }
/* Zweite Zeile je Eintrag, bewusst ruhiger: GMX-Adresse, Zusatz, Gebiet */
.kband-sub { display: block; margin-top: .15rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.kband-sub a { font-weight: 400; }
@media (max-width: 480px) {
  .kband-liste li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; }
  .kband-ico { width: 2.2rem; height: 2.2rem; }
  .kband-ico .ico { width: 1.1rem; height: 1.1rem; }
}

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

/* Jedes Bild ist ein Link auf die grosse Fassung, galerie.js macht daraus die
   Grossansicht. Beim Ueberfahren zoomt das Foto leicht und die Lupe erscheint. */
.galerie-bild { position: relative; display: block; cursor: zoom-in; }
.galerie-bild img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.galerie-bild:hover img, .galerie-bild:focus-visible img { transform: scale(1.04); }
.galerie-lupe {
  position: absolute; right: .7rem; bottom: .7rem; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; background: rgba(255, 255, 255, .92); color: var(--blue-700);
  border-radius: 50%; opacity: 0; transform: translateY(.4rem);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.galerie-lupe .ico { width: 1.2rem; height: 1.2rem; }
.galerie-bild:hover .galerie-lupe, .galerie-bild:focus-visible .galerie-lupe { opacity: 1; transform: none; }
@media (hover: none) { .galerie-lupe { opacity: 1; transform: none; } }
/* Am Handy keine Grossansicht: die Bilder sind dort nur Bilder, ohne Lupe,
   ohne Zoom und ohne Reaktion auf Tippen. Gilt schon, bevor galerie.js
   geladen ist. Dieselbe Bedingung steht in galerie.js. */
@media (max-width: 767px), (hover: none) and (max-height: 500px) {
  .galerie-bild { pointer-events: none; cursor: default; -webkit-tap-highlight-color: transparent; }
  .galerie-lupe { display: none; }
}

/* Grossansicht. Das dialog-Element bringt Abdunkeln, Tastaturfokus und
   Schliessen mit Escape schon mit, hier steht nur das Aussehen. */
/* Immer mindestens 1rem Luft zum Rand, damit Zaehler, Knoepfe und Bild auf
   dem Tablet nicht am Bildschirmrand kleben */
.lightbox { width: min(calc(100% - 2rem), 1180px); max-width: none; max-height: 100%; padding: 0; border: 0; background: transparent; color: var(--white); overflow: visible; }
.lightbox::backdrop { background: rgba(8, 20, 34, .95); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.lightbox-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .2rem .7rem; }
.lightbox-zaehler { font-size: .9rem; color: #c3d3e4; }
.lightbox-knopf {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none;
  background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%;
  color: var(--white); cursor: pointer; transition: background-color .15s ease;
}
.lightbox-knopf:hover { background: rgba(255, 255, 255, .26); }
.lightbox-knopf .ico { width: 1.3rem; height: 1.3rem; }
.lightbox-buehne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin: 0; }
.lightbox-buehne picture { display: block; min-width: 0; }
/* Breite und Hoehe frei, nur nach oben begrenzt: so bleibt das Seitenverhaeltnis
   erhalten und es entstehen keine leeren Balken neben dem Bild. */
.lightbox img { display: block; margin: 0 auto; width: auto; height: auto; max-width: 100%; max-height: min(74vh, 74dvh); }
.lightbox-blaettern[data-lightbox-zurueck] .ico { transform: scaleX(-1); }
.lightbox figcaption { grid-column: 1 / -1; padding-top: .9rem; font-size: .93rem; color: #c3d3e4; text-align: center; }
/* Seite dahinter festhalten, solange die Grossansicht offen ist */
.lightbox-offen, .lightbox-offen body { overflow: hidden; }

/* Unter 768 px gibt es keine Grossansicht mehr, deshalb keine eigenen
   Handy-Regeln fuer den Dialog. */
@media (prefers-reduced-motion: reduce) {
  .galerie-bild img, .galerie-lupe { transition: none; }
  .galerie-bild:hover img { transform: none; }
}

.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); }

.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); }

/* 7b Unterseiten ----------------------------------------------------------- */
/* Leistungs- und Ortsseiten wie /bodenverlegung/ und /bodenverlegung/burghausen/.
   Gleiche Bausteine wie die Startseite, dazu Brotkrumen unter dem Kopf,
   Karten zum Lesen und der Vorher-Nachher-Vergleich. */
.hero--seite .wrap { min-height: clamp(24rem, 62vh, 37rem); }

.brotkrumen { background: var(--white); border-top: 1px solid var(--surface); }
.brotkrumen ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem;
  list-style: none; margin: 0; padding: .72rem 0; font-size: .88rem; line-height: 1.4; color: var(--muted);
}
.brotkrumen li { display: inline-flex; align-items: center; gap: .6rem; }
/* Kleiner Winkel als Trenner, gezeichnet wie der Haken der Listen */
.brotkrumen li + li::before {
  content: ""; width: .36rem; height: .36rem; margin-right: .1rem;
  border: solid #9fb3c6; border-width: .1rem .1rem 0 0; transform: rotate(45deg);
}
.brotkrumen a { color: var(--aktion); font-weight: 700; text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }

/* Karten: wie die Kacheln, aber zum Lesen gedacht, linksbuendig und ohne Link */
.karten { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.karte { display: flex; flex-direction: column; background: var(--surface); padding: 2.1rem 1.8rem 1.9rem; }
.section--surface .karte { background: var(--white); }
.karte > .ico { width: 2.8rem; height: 2.8rem; color: var(--cyan-600); margin-bottom: 1.1rem; }
.karte h3 { margin-bottom: .55rem; }
.karte p { color: var(--muted); font-size: .98rem; line-height: 1.65; }
.karte .list-mark { margin: auto 0 0; padding-top: .2rem; font-size: .95rem; }
.karte .list-mark li { margin-bottom: .4rem; }
.karte .list-mark li:last-child { margin-bottom: 0; }
.karte-marke {
  align-self: flex-start; margin: 0 0 1rem; padding: .32rem .7rem;
  background: var(--aktion-hell); color: var(--blue-700);
  font-size: .84rem; font-weight: 700; line-height: 1.3;
}

/* Zwei Bilder nebeneinander, als Vorher und Nachher oder als Bildpaar */
.vergleich { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.vergleich figure { position: relative; }
.vergleich picture { display: block; overflow: hidden; }
.vergleich img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vergleich-marke {
  position: absolute; left: .9rem; top: .9rem; z-index: 1;
  padding: .5rem .8rem; background: var(--blue-900); color: var(--white);
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase;
}
.vergleich-marke--nach { background: var(--aktion); }
.vergleich figcaption { margin-top: .8rem; }
.vergleich figcaption b { color: var(--ink); }

/* Linkliste zu verwandten Seiten, nutzt das Raster von .anfahrt. auto-fill
   statt auto-fit, damit ein einzelner Link nicht die ganze Breite einnimmt. */
.anfahrt--seiten { max-width: 52rem; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.anfahrt--seiten a { justify-content: space-between; }
.anfahrt--seiten a span { display: inline-flex; align-items: center; gap: .8rem; }
/* Ortsliste auf der Leistungsseite: volle Breite, bis zu drei Spalten */
.anfahrt--orte { max-width: none; }

/* 8 Fuss ------------------------------------------------------------------- */
.footer { background: var(--blue-900); color: #b9cbdf; 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: #d9e5f1; 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: #8fa6c0;
}
.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(--white); color: var(--ink);
  border: 1px solid var(--surface-2); border-radius: var(--radius); font: 400 1rem var(--font);
}
.section:not(.section--surface) .field input,
.section:not(.section--surface) .field select,
.section:not(.section--surface) .field textarea { background: var(--surface); }
.field input:focus, .field select:focus, .field textarea:focus { 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)); }
/* Name, Telefon, E-Mail und Ort in einer Zeile, sobald Platz da ist */
.field-row--vier { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 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 { display: flex; align-items: flex-start; gap: .85rem; padding: 1.1rem 1.3rem; margin-bottom: 1.8rem; font-weight: 700; line-height: 1.5; }
.alert > .ico { width: 1.5rem; height: 1.5rem; flex: none; }
.alert--ok { background: #e7f4e8; color: #1b5e20; }
.alert--err { background: #fdecea; color: #8e1f1a; }
/* Ohne JavaScript springt die Weiterleitung auf #meldung-ok oder #meldung-fehler,
   dann macht :target die Meldung sichtbar. Mit JavaScript uebernimmt main.js. */
#meldung-ok:target[hidden], #meldung-fehler:target[hidden] { display: flex !important; }

/* 9b Anfrage-Planer ------------------------------------------------------- */
/* Mehrstufiges Anfrageformular. Alle Schritte sind echte Formularfelder,
   planer.js blendet jeweils einen Schritt ein. Ohne JavaScript stehen alle
   Schritte untereinander, dann gelten die Regeln mit .js nicht. */
.planer { max-width: none; }
.pl-kopf { display: none; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pl-titel { color: var(--blue-500); font-size: .98rem; font-weight: 700; }
.pl-zaehler { color: var(--muted); font-size: .88rem; }
.pl-balken { display: none; height: 4px; background: var(--surface-2); }
.pl-balken span { display: block; height: 100%; width: 20%; background: var(--aktion); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.js .pl-kopf { display: flex; }
.js .pl-balken { display: block; }

.pl-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.js .pl-step:not(.ist-aktiv) { display: none; }
.pl-frage { display: block; width: 100%; padding: 0; margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pl-sub { margin: 0 0 1.1rem; color: var(--muted); font-size: .95rem; }

/* Das Formular steht in voller Breite, deshalb passen vier Spalten in eine
   Zeile. Das macht den ersten Schritt mit zwoelf Leistungen deutlich kuerzer. */
.pl-optionen { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.pl-opt {
  position: relative; display: flex; align-items: flex-start; gap: .85rem;
  padding: .95rem 2.4rem .95rem 1rem; background: var(--white);
  border: 1px solid var(--surface-2); border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.section:not(.section--surface) .pl-opt { background: var(--surface); }
.pl-opt:hover { border-color: #b9d4ea; transform: translateY(-1px); }
.pl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pl-opt > .ico { width: 1.7rem; height: 1.7rem; color: var(--cyan-600); flex: none; margin-top: .1rem; }
.pl-opt-text b { display: block; font-size: .97rem; line-height: 1.35; }
.pl-opt-text span { display: block; margin-top: .15rem; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.pl-opt:has(input:checked) { border-color: var(--aktion); background: var(--aktion-hell); }
.pl-opt:has(input:focus-visible) { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.pl-haken {
  position: absolute; top: .8rem; right: .8rem; width: 1.15rem; height: 1.15rem;
  background: var(--white); border: 1px solid var(--surface-2); border-radius: var(--radius);
}
.pl-haken::after {
  content: ""; position: absolute; left: .36rem; top: .13rem; width: .28rem; height: .58rem;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0;
}
.pl-opt:has(input:checked) .pl-haken { background: var(--aktion); border-color: var(--aktion); }
.pl-opt:has(input:checked) .pl-haken::after { opacity: 1; }

.pl-summe { margin: 0 0 .4rem; padding: .9rem 1.1rem; background: var(--aktion-hell); color: var(--blue-700); font-size: .9rem; line-height: 1.6; white-space: pre-line; }
.pl-textarea { min-height: 100px; }
/* Letzter Schritt: die Felder stehen im fieldset untereinander und brauchen
   eigenen Abstand. Die Einwilligung bekommt mehr Luft, weil der Fokusrahmen des
   Nachrichtenfelds 6 px nach aussen reicht. */
.pl-step > .field, .pl-step > .field-row { margin-top: 1.2rem; }
.pl-step > .check { margin-top: 1.6rem; }
.pl-step > .hint { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; }

/* Fehler beim Absenden im Hintergrund, steht direkt ueber den Knoepfen */
.pl-fehler {
  display: flex; gap: .7rem; align-items: flex-start; margin: 1.2rem 0 0;
  padding: .95rem 1.1rem; background: #fdecea; color: #8e1f1a; font-weight: 700; font-size: .95rem; line-height: 1.5;
}
.pl-fehler a { color: inherit; }

/* Bestaetigung nach dem Absenden, ersetzt die Schritte im Planer */
.pl-fertig {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem 1.4rem; align-items: start;
  padding: 1.8rem 1.8rem 1.6rem; background: var(--white); border: 1px solid var(--surface-2);
  border-left: 4px solid #2e7d32; outline: none;
}
.pl-fertig-ico {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: #2e7d32; color: var(--white);
}
.pl-fertig-ico .ico { width: 1.6rem; height: 1.6rem; stroke-width: 2.2; }
.pl-fertig h3 { margin: .35rem 0 .45rem; font-size: 1.25rem; line-height: 1.35; }
.pl-fertig p { margin: 0 0 1rem; color: var(--muted); }
.pl-fertig p a { font-weight: 700; text-decoration: none; }
.pl-fertig .pl-summe { margin: 0 0 1.2rem; }
.pl-neu {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 0; background: none; border: 0;
  color: var(--aktion); font: 700 .95rem var(--font); cursor: pointer;
}
.pl-neu .ico { width: 1rem; height: 1rem; transform: scaleX(-1); }
.pl-neu:hover { color: var(--aktion-700); text-decoration: underline; }
@media (max-width: 560px) {
  .pl-fertig { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.2rem 1.2rem; }
}
/* Waehrend des Sendens: Knopf sichtbar beschaeftigt, aber ohne Spinner-Grafik */
.planer.sendet #planer-weiter { opacity: .75; cursor: progress; }
.planer.ist-fertig .pl-balken span { background: #2e7d32; }
.pl-nav { display: none; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .3rem; }
.js .pl-nav { display: flex; }
.pl-nav .btn { width: auto; }
.pl-zurueck {
  display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0;
  padding: .6rem .2rem; color: var(--muted); font: 700 .95rem var(--font); cursor: pointer;
}
.pl-zurueck .ico { width: 1rem; height: 1rem; transform: scaleX(-1); }
.pl-zurueck:hover { color: var(--ink); }
.pl-zurueck:disabled { opacity: .35; cursor: default; }
.pl-zurueck:disabled:hover { color: var(--muted); }
.js .pl-submit { display: none; }

/* 9c FAQ ------------------------------------------------------------------- */
.faq { max-width: 52rem; display: grid; gap: .7rem; }
.faq-item { background: var(--surface); }
.section--surface .faq-item { background: var(--white); }
.faq-item summary {
  display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.3rem;
  cursor: pointer; font-weight: 700; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ico {
  width: 1.05rem; height: 1.05rem; color: var(--blue-500); flex: none; margin-left: auto;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.faq-item[open] summary .ico { transform: rotate(90deg); }
.faq-item summary:hover { color: var(--blue-700); }
.faq-antwort { padding: 0 1.3rem 1.15rem; color: var(--muted); max-width: 62ch; }
.faq-antwort p:last-child { margin-bottom: 0; }

/* 9d Instagram ------------------------------------------------------------- */
/* Zwei-Klick-Loesung, gesteuert von instagram.js. Ohne gepflegte Beitraege
   bleibt der ganze Abschnitt ueber das hidden-Attribut unsichtbar. */
.ig-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ig-consent { background: var(--white); padding: 1.5rem 1.6rem; max-width: 46rem; }
.section:not(.section--surface) .ig-consent { background: var(--surface); }
.ig-consent p { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.ig-consent b { color: var(--ink); }
.ig-consent .btn-row { align-items: center; }
.ig-profil { display: inline-flex; align-items: center; font-weight: 700; font-size: .93rem; }
.ig-raster { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ig-raster iframe { width: 100%; height: 34rem; border: 0; background: var(--white); }
.ig-hinweis { margin: 1.2rem 0 0; }
.ig-aus {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font: 400 .88rem var(--font); text-decoration: underline; text-underline-offset: 3px;
}
.ig-aus:hover { color: var(--ink); }

/* 9e Vorschauseite ---------------------------------------------------------
   Passwortseite von schutz.php, solange die Website nicht oeffentlich ist. */
.vorschau { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: var(--gutter); background: var(--surface); }
.vorschau-karte { width: min(30rem, 100%); background: var(--white); padding: clamp(1.8rem, 5vw, 2.8rem); }
.vorschau-karte img { width: auto; height: 68px; margin-bottom: 1.4rem; }
.vorschau-karte h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.vorschau-karte p { color: var(--muted); }
.vorschau-karte .form { margin-top: 1.6rem; }
.vorschau-karte .btn { width: 100%; justify-content: center; }
.vorschau-fuss { margin: 1.8rem 0 0; font-size: .85rem; color: var(--muted); }

/* 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(9, 28, 50, .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(11, 36, 64, .42); }
}
.nav-hintergrund { display: none; }
/* Vierergruppen: In mittleren Breiten stuende sonst das vierte Element allein
   in der zweiten Zeile. Zwei mal zwei wirkt dort ruhiger. */
@media (min-width: 641px) and (max-width: 1096px) {
  .tiles:has(> :nth-child(4):last-child) { 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: .55rem; }
  .logo-name { font-size: .95rem; letter-spacing: .02em; }
  .logo-sub { font-size: .5rem; letter-spacing: .12em; }
  /* Kopf einzeilig halten: kompakter Menue-Knopf neben dem langen Schriftzug */
  .nav-toggle { padding: .58rem .8rem; font-size: .88rem; }
  .nav-toggle .ico { width: 1.2rem; height: 1.2rem; }
  .btn { width: 100%; justify-content: center; }
  /* Nur der grosse Hero der Startseite, die Rechtsseiten behalten ihre Hoehe */
  .hero:not(.hero--flach) .wrap { min-height: 28rem; }
  /* Unterseiten etwas flacher, damit der erste Text schneller ins Bild kommt */
  .hero.hero--seite .wrap { min-height: 25rem; }
  .karte { padding: 1.8rem 1.3rem 1.6rem; }
  .tile { padding: 2rem 1.3rem 1.6rem; }
  .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 > *, .gallery > *, .anfahrt > *, .karten > *, .vergleich > *,
  .split > .loc, .split > .form, .kurzinfo li, .faq > *) { opacity: 0; }
.anim:not(.anim-bereit) .hero-media { transform: scale(1.08); }

@media print {
  .anim :is(.hero-inner > *, .head > *, .prose > *, .split > figure, .bildspalte > figure, .note,
    .cta .wrap > *, .tiles > *, .steps > *, .gallery > *, .anfahrt > *, .karten > *, .vergleich > *,
    .split > .loc, .split > .form, .kurzinfo li, .faq > *) { opacity: 1 !important; transform: none !important; }
  .brotkrumen { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .masthead, .nav-toggle .ico, .tile, .tile-mehr, .tile-mehr .ico,
  .pl-opt, .pl-balken span, .faq-item summary .ico { transition: 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: #c6d6e6;
  box-shadow: 0 20px 50px rgba(9, 28, 50, .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; }
  /* Wer weniger Bewegung moechte, springt direkt statt weich zu scrollen */
  html { scroll-behavior: auto; }
}
@media print {
  .hinweis { display: none !important; }
}