@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-v40-latin.woff2) format('woff2');
}

:root {
  --hero-hoehe: 700px;
  --hml-size: clamp(130px, 19vw, 280px);
  --hml-x: 50;
  --hml-y: 30;

  --hero-hintergrund: url(../img/slides/hero1.jpg);

  --hero-wechsel-pause: 6s;
  --hero-wechsel-dauer: 1.5s;

  --hero-blur-max: 14px;
  --hero-opacity-end: 0.35;
  --hero-dim-max: 0;

  --hero-titel-schrift: 'Playfair Display', Georgia, serif;
  --hero-titel-gewicht: 500;
  --hero-titel-groesse: clamp(1.8rem, 4vw, 3.4rem);
  --hero-titel-sperrung: 0.22em;
  --hero-text-groesse: clamp(1rem, 1.3vw, 1.5rem);
  --hero-text-farbe: var(--quaternary);

  /* Seitenverhaeltnis von logo-kopf.png (Breite / Hoehe). Die unsichtbare
     Schablone im Header braucht dasselbe, sonst richtet sich die Header-Hoehe
     nach dem alten Logo und das sichtbare ragt unten heraus. Bei einem anderen
     Bild hier den Wert mitziehen. */

  /* Endgroesse im Header - die Breite des Pferdekopfes. Er darf groesser sein
     als frueher das Gesamtlogo, weil der Schriftzug dort keinen Platz mehr
     braucht. */

  /* Feinjustage der Endposition nach unten. Seit der Kopf freigestellt ist
     (logo-kopf.png ohne leeren Rand), wird sie nicht mehr gebraucht. */
  /* Groesse und Einrueckung des Header-Logos stehen in css/custom.css
     (--hdr-logo-breite, --hdr-einzug) - sie gelten fuer alle Seiten.
     Das wandernde Logo misst sein Ziel ohnehin am Header-Logo ab. */
  --hml-end-versatz: 0px;

  /* Scrollweg bis zum Andocken (px). Richtet sich nach der Hero-Hoehe,
     bleibt aber in diesen Grenzen. */
  --hml-distance-min: 220;
  --hml-distance-max: 560;
}

/* --------------------------------------------------------------------------
   Seitenhintergrund
   -------------------------------------------------------------------------- */

/* Liegt hinter allem und wird sichtbar, wo das Hero-Bild durchsichtig wird.
   Bewusst kein cover: auf einer langen Seite zoomt das Bild sonst unbrauchbar
   weit hinein. Fixiert, damit es beim Scrollen ruhig stehen bleibt. */
body {
  background-image: var(--hero-hintergrund);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Feste Hintergruende ruckeln auf Mobilgeraeten oder werden ganz ignoriert -
   dort scrollt das Bild mit und wird an der Fensterhoehe ausgerichtet. */
@media (max-width: 991.98px) {
  body {
    background-attachment: scroll;
    background-size: auto 100vh;
  }
}

/* --------------------------------------------------------------------------
   Hero-Section
   -------------------------------------------------------------------------- */

#heroSection {
  position: relative;
  height: var(--hero-hoehe);
  overflow: hidden;
}

/* Die Bilder liegen in einer eigenen Ebene: so erfassen Weichzeichner und
   Transparenz nur sie und nicht den Inhalt darueber. Leicht vergroessert, weil
   ein Weichzeichner die Kanten ausduennt - sonst entstuende rundherum ein Saum.
   Die Werte --hero-blur und --hero-opacity setzt js/hero.js beim Scrollen. */
#heroSection .hero-bilder {
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  filter: blur(var(--hero-blur, 0px));
  opacity: var(--hero-opacity, 1);
  will-change: filter, opacity;
}

/* Die einzelnen Bilder liegen uebereinander und werden ineinander geblendet.
   Ohne JS bleibt das erste stehen, weil es is-aktiv schon im Markup traegt. */
#heroSection .hero-bild {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--hero-wechsel-dauer, 1.5s) ease-in-out;
}

#heroSection .hero-bild.is-aktiv {
  opacity: 1;
}

/* Abdunklung darueber - liegt unter dem Inhalt, weil der .container in der
   Hero-Section z-index-1 traegt. */
#heroSection::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-dim-farbe, #000);
  opacity: var(--hero-dim, 0);
}

/* Gleiche Hoehenstufen wie zuvor beim Slider. */
@media (max-width: 1199.98px) { :root { --hero-hoehe: 600px; } }
@media (max-width: 991.98px)  { :root { --hero-hoehe: 500px; } }
/* Auf dem Handy bewusst flacher als zuvor. Das Bild ist ein Panorama
   (2000x874) und wird formatfuellend eingepasst - je hoeher der Ausschnitt,
   desto weiter zoomt er hinein. Bei 460px sah man nur rund ein Drittel der
   Bildbreite, bei 400px sind es gut vier Zehntel: weniger Hoehe heisst hier
   also mehr Bild. Logo und Text stehen trotzdem uebereinander, siehe den
   Handy-Block am Ende der Datei. */
@media (max-width: 767.98px)  { :root { --hero-hoehe: 430px; } }
@media (max-width: 575.98px)  { :root { --hero-hoehe: 400px; } }

/* --------------------------------------------------------------------------
   Wanderndes Logo
   -------------------------------------------------------------------------- */

/* Ohne JS bzw. bei "Bewegung reduzieren" bleibt alles beim Alten:
   das Header-Logo ist sichtbar, das grosse Logo existiert nicht. */
#heroLogo {
  display: none;
}

.logo-morph #heroLogo {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--hml-size);
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  z-index: 1031;
}

.logo-morph #heroLogo .hml-bild {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1));
}

/* Text in der Hero-Section - normaler Fluss, scrollt mit der Seite weg. */
/* Logo, Titel und Fliesstext stehen auf jeder Bildschirmbreite mittig
   uebereinander. Die Achse ist dieselbe: das Logo bekommt seinen Startpunkt
   aus --hml-x: 50, bezogen auf die Breite ohne Scrollbalken (js/hero.js),
   der Text steht mittig im Container - und der liegt in genau demselben
   Bereich. Deshalb traegt die Spalte im Markup col-12: eine halbe Spalte
   haette ihre eigene Mitte. */
#heroSection .hero-inhalt {
  text-align: center;
}

/* Der Text beginnt unter dem Logo statt in der Mitte der Section. Wo die
   Unterkante des Logos liegt, misst js/hero.js und schreibt es als
   --hml-unterkante in die Section - eine Zahl je Bildschirmstufe waere
   sonst noetig und bei jeder Aenderung der Logogroesse wieder falsch.
   Nur mit laufendem Logo (Klasse logo-morph): ohne JS oder bei
   "Bewegung reduzieren" gibt es kein schwebendes Logo, dann bleibt es
   beim mittigen Ausrichten aus den Bootstrap-Klassen im Markup. */
.logo-morph #heroSection .row {
  align-items: flex-start !important;
}

.logo-morph #heroSection .hero-inhalt {
  margin-top: 0 !important;
  padding-top: calc(var(--hml-unterkante, 300px) + var(--hero-logo-luft, 2rem)) !important;
}

#heroSection .hero-titel {
  margin: 0 0 1.2rem;
  font-family: var(--hero-titel-schrift);
  font-weight: var(--hero-titel-gewicht);
  font-size: var(--hero-titel-groesse);
  letter-spacing: var(--hero-titel-sperrung);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--hero-text-farbe);
  /* Die Sperrung setzt hinter den letzten Buchstaben eine Luecke. Beim
     Zentrieren faellt sie als Verschiebung nach links auf - der Einzug holt
     die Zeile zurueck in die Mitte. Er wirkt nur auf die erste Zeile eines
     Blocks, deshalb ist jede Titelzeile ein eigener Block (siehe unten). */
  text-indent: var(--hero-titel-sperrung);
}

/* Jede Titelzeile ein eigener Block - so tragen beide den Ausgleich fuer die
   Sperrung (text-indent wirkt sonst nur auf die erste Zeile eines Absatzes,
   die zweite stand dadurch um 6px daneben). */
#heroSection .hero-titel-zeile {
  display: block;
}

/* Zierstrich zwischen den beiden Zeilen. Dieselbe Zeichnung wie im Logo -
   dort steht sie unter dem Schriftzug. img/zierstrich.png ist direkt aus
   img/logo.png geschnitten (Bereich 64..924 x 784..826), also keine
   Nachbildung. Die Breite haengt in em an der Titelgroesse, damit der Strich
   auf jeder Bildschirmbreite zur Zeile passt. */
#heroSection .hero-zierstrich {
  display: block;
  width: min(100%, 9em);
  aspect-ratio: 861 / 43;
  /* Kein eigener Abstand: der Strich sitzt direkt zwischen den Zeilen,
     die Zeilenhoehe des Titels laesst ihm die Luft. */
  margin: 0 auto;
  background: url(../img/zierstrich.png) no-repeat center / contain;
}

#heroSection .hero-text {
  font-family: var(--hero-titel-schrift);
  margin: 0;
  max-width: 34em;
  font-size: var(--hero-text-groesse);
  line-height: 1.7;
  color: var(--hero-text-farbe);
	letter-spacing: .03em; 
  margin-left: auto;
  margin-right: auto;
  /* Auch der Fliesstext sperrt leicht - gleicher Ausgleich. */
  text-indent: 0.03em;
}

.logo-morph #header .header-logo img {
  opacity: 0;
}


/* Offene Navigation
   Das wandernde Logo liegt fixiert ueber der Seite. Auf schmalen Schirmen
   klappt das Menue genau darunter auf und waere halb verdeckt. Solange es
   offen ist, uebernimmt deshalb das feste Header-Logo: gleiche Datei,
   gleiche Stelle, nur eben im Header statt schwebend. Die Klasse nav-offen
   setzt js/hero.js. */
.logo-morph #heroLogo {
  transition: opacity 0.25s ease;
}

/* Die Breite gehoert mit in die Liste: beim Scrollen ueber die Schwelle
   schrumpft das Header-Logo. Stuende hier nur opacity, spraenge die Breite
   hart, waehrend die Raender weich gleiten - das Logo zuckt dann. */
.logo-morph #header .header-logo img {
  transition: opacity 0.25s ease, width 300ms ease;
}

.logo-morph.nav-offen #heroLogo {
  opacity: 0;
}

.logo-morph.nav-offen #header .header-logo img {
  opacity: 1;
}
/* --------------------------------------------------------------------------
   Handy: Logo und Schrift mittig uebereinander
   Das Logo schwebt fixiert ueber der Seite (js/hero.js) und wird ueber
   --hml-x/--hml-y platziert; Titel und Text stehen im normalen Fluss
   darunter. Die Werte sind aufeinander abgestimmt - wer das Logo groesser
   macht, muss dem Text unten mehr Vorlauf geben.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root {
    /* Etwas kleiner als zuvor (130px): laesst mehr vom Bild frei und schafft
       Luft zwischen Pferdekopf und Ueberschrift. Die Hoehe im Bild
       (--hml-y) gilt inzwischen ueberall gleich und steht oben. */
    --hml-size: 115px;
  }

  /* Kleinere Schrift, kleinerer Abstand zum Logo. */
  :root {
    --hero-logo-luft: 1.6rem;
  }
}