/* =========================================================================
   PALME Verkehrsberatung und MPU-Vorbereitung
   Stylesheet - handgeschrieben, kein Framework, kein Build-Schritt.

   Farbvorgabe: weisser Grund, schwarze Schrift, goldene Akzente.
   Das Gold (#AF8948) ist aus der Logodatei ausgelesen.
   Genau ein Akzent, genau ein Eckenradius, keine dunklen Flaechen.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root {
  /* Drei Farben, mehr nicht: Weiss, Schwarz, Gold.
     Das Gold stammt aus der Logodatei und ist der einzige Akzent.
     Die Seite ist durchgehend hell. Einen dunklen Modus gibt es bewusst
     nicht, damit der weisse Grund auf jedem Geraet weiss bleibt. */
  --gold:        #AF8948;   /* Linien, Flaechen, Schaltflaechen */
  --gold-ink:    #7A5C22;   /* Gold als Textfarbe: dunkel genug fuer WCAG AA */
  --gold-veil:   #F7F0E1;   /* Gold als zarte Flaeche */

  --black:       #0B0B0B;   /* Schrift der Hauptschaltflaeche, Sprunglink */

  /* Flaechen und Text */
  --paper:   #FFFFFF;   /* Weiss, der Grundton der ganzen Seite */
  --sand:    #F6F5F2;   /* nur eine Spur abgesetzt, fuer den Bandrhythmus */
  --surface: #FFFFFF;   /* Karten stehen ueber ihre Kontur, nicht ueber Farbe */
  --ink:     #0E0E0E;
  --muted:   #4E4E4B;
  --line:    #E4E2DC;
  --line-strong: #CAC7BF;

  /* Formsprache: ein einziger Radius im ganzen Projekt */
  --radius: 4px;

  /* Raster */
  --page: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Vertikaler Rhythmus */
  --section: clamp(4.5rem, 9vw, 8rem);

  /* Bewegung - kraeftige Kurven, kurze Dauern */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 160ms;
  --t-base: 220ms;

  --shadow-sm: 0 1px 2px rgba(18, 18, 16, .05), 0 2px 8px rgba(18, 18, 16, .04);
  --shadow-md: 0 2px 4px rgba(18, 18, 16, .05), 0 12px 32px rgba(18, 18, 16, .08);

  --header-h: 72px;
  color-scheme: light;
}



/* ----------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

::selection { background: var(--gold); color: #0B0B0B; }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------- Textebene */
.h1 { font-size: clamp(2.35rem, 1.35rem + 3.6vw, 4.1rem); letter-spacing: -0.03em; line-height: 1.04; }
.h2 { font-size: clamp(1.8rem, 1.15rem + 2.3vw, 2.9rem); letter-spacing: -0.026em; line-height: 1.08; }
.h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); letter-spacing: -0.015em; line-height: 1.25; }

.lead {
  font-size: clamp(1.1rem, 1.02rem + 0.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34em;
}

.prose { max-width: 40em; }
.prose p + p { margin-top: 1.1em; }
.prose a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.small { font-size: .9375rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .1em .4em;
}
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- Layout */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.band-sand { background: var(--sand); }

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--black);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--radius);
}
.skip:focus { left: var(--gutter); top: .75rem; }

/* ------------------------------------------------------------- Schaltung */
.btn {
  --btn-bg: var(--black);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .975rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-base) ease,
              border-color var(--t-base) ease,
              color var(--t-base) ease;
}
.btn:active { transform: scale(.975); }

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: #100D06;      /* dunkel auf Gold - hell auf Gold faellt durch AA */
  --btn-bd: var(--gold);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: #232323; --btn-bd: #232323; }
  .btn--gold:hover { --btn-bg: #C29A52; --btn-bd: #C29A52; }
  .btn--ghost:hover { --btn-bd: var(--ink); --btn-bg: rgba(0,0,0,.02); }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem 1rem;
  align-items: center;
}

/* Textlink mit wachsender Unterlinie */
.tlink {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  color: var(--gold-ink);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-base) var(--ease-out);
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .tlink:hover { background-size: 100% 1px; }
}
.tlink::after { content: '\2192'; transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tlink:hover::after { transform: translateX(3px); }
}

/* ------------------------------------------------------------- Kopfzeile */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.header[data-scrolled='true'] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(18, 18, 16, .05);
}
@supports not (backdrop-filter: blur(1px)) {
  .header { background: var(--paper); }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
.brand__mark { width: 34px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.brand__role {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
}



.nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 1.85rem); }
.nav__link {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  padding-block: .4rem;
  transition: color var(--t-base) ease;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--ink); }
  .nav__link:hover::after { transform: scaleX(1); }
}
.nav__link[aria-current='page'] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.header .btn { min-height: 42px; padding: .5rem 1.15rem; font-size: .925rem; }

/* Mobiles Menue */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.burger__box { position: relative; width: 18px; height: 12px; }
.burger__box span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: var(--ink);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) ease;
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 5.25px; }
.burger__box span:nth-child(3) { top: 10.5px; }
.burger[aria-expanded='true'] .burger__box span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__box span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 899px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out),
                visibility 0s linear var(--t-base);
  }
  .nav[data-open='true'] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav__link {
    padding: .9rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1.1rem; width: 100%; min-height: 48px; }
}

/* --------------------------------------------------------------- Fusszeile */
.footer {
  background: var(--paper);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
.footer a { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .footer a:hover { color: var(--gold-ink); }
}

.footer__grid {
  display: grid;
  gap: 2.5rem 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer__logo { width: 190px; margin-bottom: 1.1rem; }
.footer__claim { color: var(--muted); font-size: .95rem; max-width: 32ch; }

.footer__head {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1rem;
}
.footer__list { list-style: none; display: grid; gap: .6rem; font-size: .975rem; }

.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .875rem;
  color: var(--muted);
}
.footer__bottom a { color: var(--muted); }
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; }

/* ============================================================== Startbild */
/* Der Hero ist die einzige Flaeche der Seite, die zwischen dunkel und hell
   wechselt. Der Wechsel ist die Aussage: Der Besucher schaltet selbst.
   Ohne JavaScript bleibt der Hero hell, dann fehlt nur die Schaltflaeche. */
.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background-color 700ms var(--ease-out),
              border-color 700ms var(--ease-out);
}
.hero__inner {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.hero__content { max-width: 34rem; }

.hero__line {
  font-family: 'Literata', Georgia, serif;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem);
  line-height: 1.45;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
  transition: color 700ms var(--ease-out);
}
.hero__line [data-licht-text='aus'] { display: none; }
[data-licht='aus'] .hero__line [data-licht-text='an']  { display: none; }
[data-licht='aus'] .hero__line [data-licht-text='aus'] { display: inline; }

.hero__title {
  color: var(--ink);
  max-width: 16ch;
  transition: color 700ms var(--ease-out);
}
.hero__sub {
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
  transition: color 700ms var(--ease-out);
}
.hero__actions { margin-top: 2.25rem; }

.hero__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 55%;
  transition: filter 700ms var(--ease-out);
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--gold);
}
@media (min-width: 900px) {
  .hero__media img { aspect-ratio: 5 / 6; }
}

/* Die goldene Linie aus dem Logo, als Auftakt ueber der Zeile */
.hero__seam {
  width: 72px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.75rem;
}

/* --- Die Schaltflaeche selbst: leise, kein Spielzeug --- */
.licht {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
  padding: .45rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t-base) ease,
              transform var(--t-fast) var(--ease-out);
}
html:not(.js) .licht { display: none; }
.licht__punkt {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  transition: background-color 700ms var(--ease-out),
              box-shadow 700ms var(--ease-out),
              border-color 700ms var(--ease-out);
}
[data-licht='an'] .licht__punkt {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .licht:hover { color: var(--ink); }
}
.licht:active { transform: scale(.98); }

/* --- Der dunkle Zustand, ausschliesslich im Hero --- */
[data-licht='aus'] .hero {
  background: var(--black);
  border-bottom-color: #1D1D1B;
}
[data-licht='aus'] .hero__title { color: #FDFDFC; }
[data-licht='aus'] .hero__sub   { color: #C8C7C3; }
[data-licht='aus'] .hero__line  { color: #B6AE99; }
[data-licht='aus'] .hero__media img { filter: brightness(.42) saturate(.75); }
[data-licht='aus'] .hero__media { background: #131311; }
[data-licht='aus'] .licht { color: #A3A29E; }
[data-licht='aus'] .btn--ghost {
  --btn-fg: #F2F2F0;
  --btn-bd: rgba(242, 242, 240, .38);
}
@media (hover: hover) and (pointer: fine) {
  [data-licht='aus'] .licht:hover { color: #FDFDFC; }
  [data-licht='aus'] .btn--ghost:hover { --btn-bd: #F2F2F0; --btn-bg: rgba(255,255,255,.06); }
}

/* Wer weniger Bewegung wuenscht, bekommt den Wechsel ohne Uebergang */
@media (prefers-reduced-motion: reduce) {
  .hero, .hero__title, .hero__sub, .hero__line,
  .hero__media img, .licht__punkt { transition: none; }
}

/* Kompakter Seitenkopf der Unterseiten: weiss, ohne Hintergrundbild */
.pagehead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
}
.pagehead__title { color: var(--ink); max-width: 18ch; }
.pagehead__sub {
  margin-top: 1.1rem;
  color: var(--muted);
  max-width: 46ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
}

.crumbs {
  display: flex;
  gap: .55rem;
  list-style: none;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.crumbs a { color: var(--muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--gold-ink); } }
.crumbs li + li::before { content: '/'; margin-right: .55rem; color: var(--line-strong); }

/* ====================================================== Aussagesatz-Block */
.statement {
  display: grid;
  gap: 2rem 3.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .statement { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
.statement__lead {
  font-family: 'Literata', Georgia, serif;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  line-height: 1.36;
  letter-spacing: -0.015em;
  font-weight: 400;
  border-left: 2px solid var(--gold);
  padding-left: clamp(1.1rem, 2.5vw, 2rem);
}
.statement__body { color: var(--muted); padding-top: .35rem; }
.statement__body p + p { margin-top: 1.05em; }

/* ===================================================== Themenraster (Bento) */
.bento {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .bento { grid-template-columns: repeat(6, 1fr); } }

.tile {
  background: var(--surface);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .7rem;
  min-height: 190px;
  position: relative;
}
@media (min-width: 1020px) {
  .tile--wide  { grid-column: span 3; min-height: 260px; }
  .tile--third { grid-column: span 2; }
}
.tile__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.tile__text { color: var(--muted); font-size: .975rem; line-height: 1.6; }

/* Zwei Kacheln tragen Bild statt Text - sonst wird das Raster zur Bleiwueste.
   Das Bild liegt absolut in der Kachel, damit es die Zeilenhoehe nicht
   diktiert: Die Textkacheln bestimmen den Rhythmus, das Bild fuellt auf. */
.tile--media { padding: 0; min-height: 230px; overflow: hidden; position: relative; }
.tile--media picture { position: absolute; inset: 0; display: block; }
.tile--media img { width: 100%; height: 100%; object-fit: cover; }
.tile--veil { background: var(--gold-veil); }

/* ================================================== Bild-Text-Gegenueber */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--media-right .split__media { order: 2; }
}
.split__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
}
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__media--tall img { aspect-ratio: 3 / 4; }
.split__body h2 + p, .split__body h2 + .lead { margin-top: 1.1rem; }

/* Goldkante als wiederkehrendes Detail statt Schlagschatten */
.split__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--gold);
}

/* ================================================================ Listen */
.checks { list-style: none; display: grid; gap: .85rem; max-width: 46em; }
.checks li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: .85rem;
  align-items: start;
  line-height: 1.55;
}
.checks li::before {
  content: '';
  width: 9px; height: 9px;
  margin-top: .55rem;
  border-radius: 1px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Faktenzeilen: gruppiert, nicht jede Zeile mit eigener Haarlinie */
.facts { display: grid; gap: 0; }
.facts__group { padding-block: 1.6rem; border-top: 1px solid var(--line); }
.facts__group:last-child { border-bottom: 1px solid var(--line); }
.facts__head { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 1rem; }
.facts__rows { display: grid; gap: .7rem; }
.facts__row { display: grid; gap: .15rem 1.5rem; }
@media (min-width: 720px) { .facts__row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.facts__key { font-weight: 600; }
.facts__val { color: var(--muted); }

/* ================================================================ Hinweis */
.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  max-width: 48em;
}
.notice__head { font-weight: 600; margin-bottom: .55rem; }
.notice p { color: var(--muted); }
.notice p + p { margin-top: .9em; }

/* ============================================================ Fragen (FAQ) */
.faq { border-top: 1px solid var(--line); max-width: 52em; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.3rem;
  font-weight: 600;
  font-size: clamp(1rem, .97rem + .25vw, 1.1rem);
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-base) ease;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--gold-ink); }
}
.faq summary::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__body { padding-bottom: 1.5rem; color: var(--muted); max-width: 46em; }
.faq__body p + p { margin-top: .9em; }

/* Oeffnen weich animieren, wo der Browser es kann */
@supports (interpolate-size: allow-keywords) {
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size var(--t-base) var(--ease-out),
                content-visibility var(--t-base) allow-discrete,
                opacity var(--t-base) ease;
  }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ========================================================== Handlungsband */
/* ========================================================== Handlungsband */
.cta {
  background: var(--sand);
  border-block: 1px solid var(--line);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.cta__inner {
  display: grid;
  gap: 2rem 3rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .cta__inner { grid-template-columns: minmax(0, 1.5fr) auto; }
}
.cta__title { color: var(--ink); max-width: 20ch; }
.cta__text { margin-top: .9rem; color: var(--muted); max-width: 46ch; }
.cta__phone {
  display: block;
  margin-top: 1.25rem;
  font-family: 'Literata', Georgia, serif;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  color: var(--gold-ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
@media (hover: hover) and (pointer: fine) { .cta__phone:hover { text-decoration: underline; text-underline-offset: 5px; } }

/* =============================================================== Formular */
.formgrid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 940px) {
  .formgrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
}

.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.field > label { font-weight: 600; font-size: .925rem; }
.field__hint { font-size: .85rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7C7C78; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.field--pair { display: grid; gap: 0 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field--pair { grid-template-columns: 1fr 1fr; } }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  margin: 1.5rem 0;
  font-size: .925rem;
  color: var(--muted);
}
.consent input { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--gold); }
.consent a { color: var(--gold-ink); }

/* Honigtopf - fuer Menschen unsichtbar, fuer Skripte verlockend */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formstatus {
  margin-top: 1.1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: .95rem;
}
.formstatus[hidden] { display: none; }
.formstatus[data-state='ok']    { border-color: #2F7D55; background: color-mix(in srgb, #2F7D55 10%, transparent); }
.formstatus[data-state='error'] { border-color: #A8412F; background: color-mix(in srgb, #A8412F 10%, transparent); }

.btn[data-busy='true'] { opacity: .65; pointer-events: none; }

/* --------------------------------------------------------- Kontaktspalte */
.info { display: grid; gap: 1.6rem; }
.info__block { display: grid; gap: .35rem; }
.info__head { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.info a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .info a:hover { color: var(--gold-ink); } }
.info__big { font-family: 'Literata', Georgia, serif; font-size: 1.4rem; letter-spacing: -0.02em; }

.hours { display: grid; gap: .3rem; font-size: .975rem; }
.hours div { display: flex; justify-content: space-between; gap: 1.5rem; max-width: 22rem; }
.hours dt { color: var(--muted); }

/* ------------------------------------------------ Karte mit Zwei-Klick-Schutz */
.map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}
/* Nach dem Klick traegt die Karte selbst die Flaeche, deshalb faellt das
   Zentrier-Raster weg. Sonst schrumpft das iframe auf seine Eigengroesse. */
.map.is-loaded { display: block; padding: 0; min-height: 0; }
.map iframe { width: 100%; height: clamp(300px, 42vh, 420px); border: 0; display: block; }
.map__note { max-width: 40ch; color: var(--muted); font-size: .95rem; margin-bottom: 1.2rem; }

/* =============================================================== Bewegung */
.reveal {
  opacity: 0;
  transform: translateY(14px);
}
.js .reveal {
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay='1'] { transition-delay: 70ms; }
.reveal[data-delay='2'] { transition-delay: 140ms; }
.reveal[data-delay='3'] { transition-delay: 210ms; }

/* Ohne JavaScript darf nichts unsichtbar bleiben */
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* ================================================================= Extras */
.stack   > * + * { margin-top: 1.6rem; }

.sechead { max-width: 62ch; }
.sechead .h2 { max-width: 22ch; }
.sechead + * { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.sechead .lead { margin-top: 1rem; max-width: 50ch; }

.cols-2 {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .cols-2 { grid-template-columns: 1fr 1fr; } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: grid;
  gap: .7rem;
  align-content: start;
}
.card__title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; }
.card p { color: var(--muted); font-size: .975rem; }

/* Druckfassung: Papierfarben, keine Deko */
@media print {
  .header, .footer, .cta, .hero__media, .btn, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .pagehead { background: #fff; color: #000; }
  .hero__title, .pagehead__title { color: #000; }
}