/* ---------------------------------------------------------------------------
   LBK Munich · Marketing-Seiten

   Baut auf style.css auf und wird danach geladen. Farben, Schriften, Radien
   und Schaltflächen kommen unverändert von dort — hier steht nur, was das
   Buchungstool nicht braucht: randlose Bildflächen, das Karussell, die
   Klappliste, die große Fusszeile.

   Die Werkzeugseiten (Buchung, Anfrage, Termin, Verwaltung) laden diese Datei
   nicht und bleiben davon unberuehrt.
   --------------------------------------------------------------------------- */

/* Das Buchungstool setzt seinen Seitenrand am body. Randlose Flaechen gehen
   damit nicht — die Marketing-Seiten nehmen ihn zurueck und geben ihn den
   einzelnen Abschnitten. */
body.site { padding: 0; }

.site .masthead { margin: 0; }

.band     { padding: 0 1.5rem; }
.band-in  { max-width: 74rem; margin: 0 auto; }
.band-tight { max-width: 46rem; margin: 0 auto; }

/* --- Kopfzeile mit Navigation --------------------------------------------- */
.site .masthead {
  display: flex; align-items: center;
  gap: 1.25rem 2rem; flex-wrap: wrap;
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  text-align: left;
}
/* Schiebt alles Uebrige nach rechts, ohne dass die Verweise und die
   Schaltflaeche auseinandergerissen werden. */
.site .masthead .brand { margin-right: auto; }
.site .masthead .brand img { height: 2rem; }
.site-nav { display: flex; align-items: center; gap: .35rem 1.9rem; flex-wrap: wrap; }
/* Die Schaltflaeche ist ausgenommen: sie soll genau so aussehen wie die auf
   der Buehne, und dafuer muessen die Werte aus .btn stehen bleiben. Wuerde
   diese Regel auch fuer sie gelten, uebernaehme sie deren Innenabstand und
   Schriftgroesse — zwei fast gleiche Knoepfe wirken wie ein Versehen. */
.site-nav a:not(.btn) {
  font-size: .92rem; font-weight: 300; letter-spacing: .01em;
  color: var(--mid); text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:not(.btn):hover { color: var(--charcoal); }
.site-nav a[aria-current="page"] { color: var(--charcoal); border-bottom-color: var(--gold); }

/* Wieder das kompaktere Mass aus der Fassung davor — mit der vollen
   Schaltflaechengroesse war die Kopfzeile rund ein Viertel hoeher. */
.masthead-cta { padding: .6rem 1.4rem; font-size: .9rem; }

/* --- Bühne ---------------------------------------------------------------- */
.hero { padding: 3rem 1.5rem 6rem; }
.hero-in {
  max-width: 74rem; margin: 0 auto;
  display: grid; gap: 3rem 4rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.hero h1 { margin-bottom: 1.75rem; }
.hero .lede { margin: 0 0 2.5rem; max-width: 32rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Hochformat, weich abgerundet — kein Rahmen, nur Tiefe. Wie die Karten im
   Buchungstool. */
.hero-figure {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--lift);
  background: var(--wash);
}
/* Das Seitenverhältnis steht am Bild selbst. Am Container hätte es keine
   Wirkung: ein Kind mit height:100% wäre gegenüber einer daraus errechneten
   Höhe zirkulär, und der Browser nähme dann das Verhältnis der Bilddatei —
   die Flächen würden je nach hochgeladenem Foto unterschiedlich hoch. */
.hero-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  /* Auf breiten Schirmen wirkungslos, weil Datei und Flaeche dasselbe
     Verhaeltnis haben. Auf schmalen wird die Flaeche quer (3:2) und schneidet
     oben und unten ab — mittig zentriert fiele der Kopf heraus, seit er im
     Bild weiter oben sitzt. Der Zuschnitt haelt sich deshalb nach oben. */
  object-position: 50% 12%;
}

/* --- Abschnitte ----------------------------------------------------------- */
.section { padding: 5.5rem 1.5rem; }
.section-alt { background: var(--paper); }
.section-head { max-width: 40rem; margin: 0 0 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h1,
.section-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.15; letter-spacing: -.01em;
  margin: 0 0 1rem;
}
.section-head p { color: var(--mid); font-weight: 200; font-size: 1.08rem; margin: 0; }

/* --- Karussell ------------------------------------------------------------ */
/* Waagerechte Liste mit Einrastpunkten. Ohne Bibliothek: der Browser scrollt,
   die Knöpfe schieben nur um eine Kartenbreite weiter. Wischen, Tastatur und
   Scrollrad funktionieren dadurch von selbst. */
.carousel { position: relative; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 20rem);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem .25rem 2rem;
  margin: 0 -.25rem;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

.tile {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--lift-lo);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s, transform .25s;
}
.tile:hover { box-shadow: var(--lift); transform: translateY(-3px); color: inherit; }
.tile-img { background: var(--wash); }
.tile-img img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
}
.tile-body { padding: 1.75rem 1.75rem 2rem; display: flex; flex-direction: column; flex: 1; }
.tile-body h3 {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 400;
  text-transform: none; letter-spacing: -.01em; color: var(--charcoal);
  margin: 0 0 .75rem;
}
.tile-body p { color: var(--mid); font-size: .95rem; margin: 0 0 1.5rem; }
.tile-foot {
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem 1rem;
  font-size: .9rem;
}
/* Preis und Verweis duerfen umbrechen, aber nicht in sich selbst: „ab" und
   der Betrag gehoeren auf dieselbe Zeile. */
.tile-price, .tile-more { white-space: nowrap; }
.tile-price { color: var(--charcoal); font-variant-numeric: tabular-nums; }
.tile-price:empty { visibility: hidden; }
.tile-more { color: var(--gold-dark); letter-spacing: .01em; }

.carousel-nav { display: flex; gap: .6rem; margin-top: .5rem; }
.carousel-nav button {
  width: 2.9rem; height: 2.9rem; padding: 0;
  border-radius: 50%;
  background: transparent; color: var(--charcoal);
  border: 1px solid var(--hair-firm);
  font-size: 1.1rem; line-height: 1;
}
.carousel-nav button:hover { background: var(--wash); border-color: var(--gold); color: var(--charcoal); }
.carousel-nav button:disabled { opacity: .3; }

/* --- Klappliste ----------------------------------------------------------- */
/* Schaltflaeche mit aria-expanded statt <details>.
   Grund: ein sanftes Zuklappen von <details> geht nur, indem man das
   Zuklappen bis zum Ende einer Animation aufschiebt — bricht die ab, steht
   der Punkt offen und leer da. Hier schaltet der Zustand sofort um, die
   Bewegung macht allein CSS: laeuft sie nicht, ist die Liste trotzdem
   richtig. Animiert wird eine Rasterzeile von 0fr auf 1fr; das ist der
   einzige Weg, eine unbekannte Hoehe ohne Messen weich zu bewegen. */
.accordion { border-top: 1px solid var(--hair); }
.accordion .acc-item { border-bottom: 1px solid var(--hair); }

.accordion .acc-titel { margin: 0; }
.accordion .acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; text-align: left;
  margin: 0; padding: 1.6rem .25rem;
  background: none; border: none; border-radius: 0;
  font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
  letter-spacing: normal; text-transform: none;
  color: var(--charcoal); cursor: pointer;
  transition: color .2s;
}
.accordion .acc-head:hover { background: none; border: none; color: var(--gold-dark); }
.accordion .acc-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Winkel aus zwei Rahmenkanten statt eines Zeichens: laesst sich drehen,
   ein ausgetauschtes + gegen − koennte das nicht. */
.accordion .acc-head::after {
  content: ''; flex: none;
  width: .5rem; height: .5rem;
  margin: -.25rem .35rem 0 0;
  border-right: 1.5px solid var(--gold-dark);
  border-bottom: 1.5px solid var(--gold-dark);
  transform: rotate(45deg);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.accordion .acc-head[aria-expanded="true"]::after { transform: rotate(-135deg); }

.accordion .acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.22,.61,.36,1);
}
.accordion .acc-item.offen .acc-body { grid-template-rows: 1fr; }
/* min-height: 0 ist noetig, sonst laesst das Raster die Zeile nicht unter die
   Hoehe ihres Inhalts schrumpfen und es bewegt sich nichts. */
.accordion .acc-inner { overflow: hidden; min-height: 0; }
.accordion .acc-inner > * {
  max-width: 42rem; color: var(--mid);
  margin: 0 0 1rem;
  transition: opacity .28s ease;
}
.accordion .acc-inner > :last-child { margin-bottom: 2rem; }
.accordion .acc-item:not(.offen) .acc-inner > * { opacity: 0; }

/* --- Zweispalter mit Bild ------------------------------------------------- */
.split {
  max-width: 74rem; margin: 0 auto;
  display: grid; gap: 3rem 4.5rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split-figure {
  margin: 0; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--lift); background: var(--wash);
}
.split-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
}
.split-media-first .split-figure { order: -1; }

/* Das Motiv sitzt in der unteren Bildhaelfte. Auf schmalen Schirmen wird die
   Flaeche quer und zeigt nur die mittleren 50 Prozent der Datei — mittig
   zentriert fiele das Kinn heraus. Der Ausschnitt haelt sich deshalb nach
   unten. Auf breiten Schirmen aendert der Wert nichts Sichtbares, dort wird
   ohnehin kaum beschnitten. */
.split-figure-tief img { object-position: 50% 78%; }

.ticks { list-style: none; margin: 2rem 0 2.5rem; padding: 0; }
.ticks li {
  position: relative;
  padding: 0 0 1.1rem 2rem;
  color: var(--mid);
}
.ticks li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--gold);
}
.ticks strong { color: var(--charcoal); font-weight: 400; }

/* --- Stimmen -------------------------------------------------------------- */
.reviews-mount { min-height: 6rem; }

/* --- Abschluss ------------------------------------------------------------ */
.cta-band { background: var(--charcoal); color: var(--cream); text-align: center; }
.cta-band h2 { color: var(--cream); margin-bottom: 1rem; }
.cta-band p { color: rgba(250,248,245,.7); font-weight: 200; margin: 0 auto 2.5rem; max-width: 32rem; }
.cta-band .btn {
  background: var(--cream); color: var(--charcoal); border-color: var(--cream);
}
.cta-band .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--charcoal); }

/* --- Grosse Fusszeile ----------------------------------------------------- */
.site .site-foot {
  margin: 0;
  padding: 4.5rem 1.5rem 3rem;
  background: var(--paper);
  border-top: 1px solid var(--hair);
}
.site .foot-grid {
  max-width: 74rem; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 3rem 2.5rem;
}
.foot-brand .brand { margin-bottom: 1.1rem; }
.foot-brand .brand img { height: 2.2rem; }
.foot-brand p { color: var(--mid); font-size: .92rem; max-width: 18rem; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: .6rem; font-size: .95rem; color: var(--mid); }
.foot-list a { color: var(--mid); text-decoration: none; font-size: .95rem; }
.foot-list a:hover { color: var(--charcoal); }
.foot-bottom {
  max-width: 74rem; margin: 3.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  font-size: .85rem; color: var(--light);
}
.foot-credit {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: .01em;
  color: var(--mid);
}

/* --- Preisliste ----------------------------------------------------------- */
.preis-gruppe { margin-bottom: 3.5rem; }
.preis-gruppe:last-child { margin-bottom: 0; }
.preis-gruppe > h3 {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mid);
  margin: 0 0 .5rem;
}
.preis-tabelle td:nth-child(2),
.preis-tabelle th:nth-child(2) { text-align: right; white-space: nowrap; width: 8rem; }
.preis-tabelle td:nth-child(3),
.preis-tabelle th:nth-child(3) { text-align: right; white-space: nowrap; width: 8rem; }
.preis-tabelle td:nth-child(2),
.preis-tabelle td:nth-child(3) { font-variant-numeric: tabular-nums; color: var(--mid); }
.preis-tabelle td:nth-child(3) { color: var(--charcoal); }
.preis-hinweis { color: var(--mid); font-size: .92rem; margin-top: 1rem; }
.preis-aktion { margin: 1.75rem 0 0; }

/* --- Rechtstexte ---------------------------------------------------------- */
/* Langer Fliesstext, der gelesen werden muss: etwas groesser, mehr Zeilenluft,
   Zwischenueberschriften deutlich abgesetzt. */
.rechtstext { max-width: 42rem; }
.rechtstext h2 {
  font-size: 1.5rem;
  margin: 2.75rem 0 .85rem;
}
.rechtstext h2:first-child { margin-top: 1.5rem; }
.rechtstext p { margin: 0 0 1.1rem; color: var(--mid); line-height: 1.75; }
/* Die Verweise auf fremde Datenschutzseiten sind lange, ungebrochene
   Zeichenketten. Auf schmalen Geraeten muessen sie umbrechen duerfen, sonst
   schieben sie die Seite seitlich auf. */
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext ul {
  margin: 0 0 1.1rem; padding-left: 1.3rem;
  color: var(--mid); line-height: 1.75;
}
.rechtstext li { margin-bottom: .35rem; }
.rechtstext address {
  font-style: normal; color: var(--charcoal);
  margin: 0 0 1.1rem; padding-left: 1.1rem;
  border-left: 2px solid var(--gold);
  line-height: 1.8;
}

/* --- Rechtstext-Platzhalter ----------------------------------------------- */
.platzhalter {
  border-left: 2px solid var(--warn);
  background: rgba(160,120,64,.07);
  border-radius: 0 var(--rxs) var(--rxs) 0;
  padding: 1.5rem 1.6rem;
  margin: 0 0 2rem;
}
.platzhalter h2 { font-size: 1.35rem; margin: 0 0 .75rem; }
.platzhalter p:last-child { margin-bottom: 0; }

/* --- Schmale Geräte ------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-in, .split { grid-template-columns: 1fr; }
  .hero-figure img, .split-figure img { aspect-ratio: 3 / 2; max-height: 26rem; }
  .split-media-first .split-figure { order: 0; }
}
@media (max-width: 620px) {
  /* Drei Zeilen — Logo, Verweise, Schaltflaeche — kosteten fast ein Fuenftel
     der Bildschirmhoehe, bevor der erste Inhalt kam. Logo und Schaltflaeche
     teilen sich jetzt die erste Zeile, die Verweise stehen darunter. */
  .site .masthead {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'brand cta' 'nav nav';
    justify-content: space-between; align-items: center;
    row-gap: .7rem;
    padding: 1.1rem 1.15rem;
  }
  .site .masthead .brand { grid-area: brand; margin-right: 0; }
  .site .masthead .brand img { height: 1.7rem; }
  .site .masthead .masthead-cta { grid-area: cta; }
  .site-nav { grid-area: nav; gap: .25rem 1.25rem; }
  .site-nav a:not(.btn) { font-size: .9rem; }
  .band, .hero, .section, .site .site-foot { padding-left: 1.15rem; padding-right: 1.15rem; }
  .hero { padding-top: 1.5rem; padding-bottom: 3.5rem; }
  .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .section-head { margin-bottom: 2rem; }
  /* Schmaler als das wird die Kachel nicht: sonst passen Preis und Verweis
     nicht mehr nebeneinander. */
  .carousel-track { grid-auto-columns: minmax(17rem, 82vw); gap: 1rem; }
  .tile-body { padding: 1.4rem 1.4rem 1.7rem; }
  .accordion .acc-head { font-size: 1.25rem; padding: 1.3rem .25rem; }
  .foot-bottom { margin-top: 2.5rem; }
}