/* ==========================================================================
   ZEICHENSTIL-EBENE — seit 04.08.2026 auf der Live-Seite
   Die Gravur aus dem Logo als eigene Bildsprache. Zwei Auftritte: Hero (führt)
   und Finale (leises Zeichen). Die dritte Ebene — eine Hügelkulisse hinter dem
   Gebäudeschnitt — ist am 05.08. entfallen, siehe unten. Mehr wäre Dekoration.

   Technik: Die Zeichnungen liegen als Masken (LA-WebP/PNG) vor, die Tinte
   kommt aus background-color. Damit trägt jede Zeichnung die Markenfarbe ihres
   Untergrunds statt einer eingebrannten — und bleibt auf Creme wie auf
   Tannengrün dieselbe Datei. Gebaut von tools/zeichnung-bauen.mjs.

   Additiv: wird NACH system.css geladen und überschreibt nur, was der
   Gravur-Hero braucht.

   Zwei Fallen, beide verifiziert:
   1. mask-image wird bei file:// von Chromium cross-origin geblockt — die
      Zeichnungen sind dort unsichtbar. Vorschau immer über HTTP ansehen,
      sonst prüft man ein leeres Bild.
   2. svh löst im Sicht-Pflicht-Shotter zu 0 auf. Deshalb durchgehend vh.
   ========================================================================== */

/* ---------- 1. HERO: das gezeichnete Haus ---------- */
/* Motiv seit 05.08. `haus-weite`: höherer Standpunkt, das Haus komplett im
   Mittelgrund, dahinter der Ort mit Kirchturm und Burgruine, seitlich öffnet
   sich die Rheinebene. Die Vorgängerfassung stand zu nah — dahinter war nur
   Wald, der Blick konnte nirgends hin. */
.hero-gravur {
  position: relative;
  min-height: 100vh;
  background: var(--creme);
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: center;
  overflow: hidden;
}
.hero-gravur .hg-kopf {
  /* Nicht mittig, sondern unten in seiner Zeile: die breitere Zeichnung
     (Verhältnis 2,45) baut niedriger als die alte, und ein mittig gesetzter
     Kopf ließ dazwischen ein leeres Cremefeld stehen. So sitzt der Satz auf
     der Zeichnung auf. */
  align-self: end;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(96px, 13vh, 146px) var(--gutter) clamp(12px, 2.4vh, 28px);
}
.hero-gravur .hero-ort {
  text-shadow: none;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--messing);
  margin: 0 0 clamp(16px, 2.4vh, 26px);
}
.hero-gravur h1 {
  font-family: var(--serif);
  color: var(--tanne);
  font-size: clamp(2.5rem, 6vw, 5rem);
  /* 700 ist das Maximum der Schriftdatei. Bodoni Moda ist eine Didone: ihre
     Haarstriche verschwinden bei kleinem Gewicht auch auf ruhigem Grund.
     Nikita 05.08.: „wenn ich da eine ältere Dame bin, wäre ich komplett
     aufgeschmissen." */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: .004em;
  max-width: 15ch;
  margin: 0 auto;
  text-shadow: none;
}
.hero-gravur h1 .it {
  display: block;
  font-style: italic;
  /* Kursiv in Messing ist die schwächste Stelle der Zeile: hellere Farbe UND
     schrägere Striche. Darum hier gleich schwer wie die Grundzeile. */
  font-weight: 700;
  color: var(--messing);
}
.hero-gravur .sub {
  font-family: var(--sans);
  font-size: clamp(15px, 1.55vw, 17.5px);
  line-height: 1.62;
  color: var(--mokka);
  max-width: 42ch;
  margin: clamp(16px, 2.4vh, 24px) auto clamp(22px, 3vh, 30px);
  text-shadow: none;
}
.hero-gravur .sub b { color: var(--tanne); font-weight: 600; }
.hero-gravur .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
  justify-content: center;
}
/* Auf Creme braucht der zweite Knopf eine dunkle Linie — die helle Fassung
   aus system.css ist für Fotogrund gebaut und wäre hier unsichtbar. */
.hero-gravur .btn-line {
  background: transparent;
  color: var(--tanne);
  border-color: rgba(31, 58, 46, .42);
}
.hero-gravur .btn-line:hover {
  border-color: var(--tanne);
  background: rgba(31, 58, 46, .06);
}

/* Die Gravur selbst — `contain`, nicht volle Breite.
   Der erste Anlauf ließ sie über die ganze Seitenbreite laufen und deckelte
   die Höhe: bei 1280 px wäre sie 693 px hoch, es standen aber nur ~500 zur
   Verfügung, also wurden 200 px oben abgeschnitten — und das waren die
   Turmspitzen und der Giebel, also genau das, woran man dieses Haus erkennt.
   Mit `contain` steht die Zeichnung immer vollständig im Bild; dass sie den
   Seitenrand nicht ganz erreicht, kostet nichts, weil ihr Boden ohnehin in
   dieselbe Creme ausläuft, auf der sie steht. */
.hero-gravur .hg-zeichnung {
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(52vh, 560px);
  background-color: var(--tanne);
  opacity: .9;
  pointer-events: none;
  -webkit-mask: url("../medien/zeichnung/haus-weite.webp") no-repeat bottom center / contain;
  mask: url("../medien/zeichnung/haus-weite.webp") no-repeat bottom center / contain;
}

/* Über dem hellen Hero trägt der Kopf die dunkle Wortmarke — die Creme-Fassung
   wäre auf Creme unsichtbar. Kein Filter, keine Neuzeichnung: die zweite
   Logodatei, die es für genau diesen Fall gibt (CI-Manual). */
.hat-gravur .site-head:not(.solid) .brand img { content: url("logo/logo_ausblick_dark.png"); }
/* Dieselbe Umkehr für die Navigation — helle Schrift auf Creme liest sich nicht. */
.hat-gravur .site-head:not(.solid) .nav a,
.hat-gravur .site-head:not(.solid) .nav > button { color: var(--tanne); }

@media (max-width: 760px) {
  .hero-gravur .hg-zeichnung {
    /* Auf 390 px wäre die ganze Zeichnung nur 211 px hoch — das Haus schrumpft
       zur Briefmarke. Hier führt die Höhe, die Zeichnung darf seitlich aus dem
       Rahmen laufen; die Bäume am Rand sind der Teil, der fehlen darf, das
       Haus in der Mitte bleibt vollständig. */
    height: 40vh;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
  }
  .hero-gravur .hg-kopf { padding-top: clamp(104px, 15vh, 140px); }
  .hero-gravur h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hero-gravur .sub { font-size: 14.5px; }
  .hero-gravur .hero-cta { flex-direction: column; width: 100%; }
  .hero-gravur .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- 2. GEBÄUDESCHNITT ---------- */
/* Hier lag bis 05.08. eine gezeichnete Hügelkulisse als Hintergrundebene.
   Sie ist entfallen: mit `cover` auf eine 240 px hohe Fläche skaliert schnitt
   sie die Baumreihe mitten im Stamm ab, und neben dem gezeichneten Dach, das
   der Schnitt seit v11 selbst trägt, war sie die zweite Zeichnung im selben
   Bild. Eine reicht. */
.wv-schnitt-buehne { position: relative; isolation: isolate; }
.wv-schnitt-buehne > * { position: relative; z-index: 1; }

/* ---------- 3. FINALE: das leise Zeichen ---------- */
/* Ein einzelnes Motiv über der Schlusszeile — dieselbe Rolle, die eine
   Vignette am Kapitelende in einem gedruckten Buch hat. */
.finale .hg-zeichen {
  width: clamp(74px, 9vw, 104px);
  height: clamp(74px, 9vw, 104px);
  margin: 0 auto clamp(22px, 3vw, 32px);
  background-color: var(--creme);
  opacity: .34;
  pointer-events: none;
  -webkit-mask: url("../medien/zeichnung/tannen.png") no-repeat center / contain;
  mask: url("../medien/zeichnung/tannen.png") no-repeat center / contain;
}