/* ============================================================
 * site.css — HERZBLICK
 * ============================================================
 * Verbindliche Vorlage: Designvariante 1a (Startseite) und der
 * daraus abgeleitete Seitenrahmen (Kopf mit Logo-Lockup, Fuß).
 * Inhaltsspalte so breit wie das Startbild (Vorlage: 1024px, hier
 * volle Bildschirmbreite bis 1920px), Creme, Gold nur als Akzent (Linien,
 * Kicker, Signatur, Icons), kein Radius, keine Schatten.
 * ============================================================ */

:root {
  --creme: #f6f1ea;
  --sand: #efe7db;
  --linie: #d6cbb8;
  --gold: #a9873f;
  --text: #2b2a27;
  --text-2: #4a463f;
  --text-3: #6b6560;
  --inaktiv: #9a9186;

  --f-marke: "Montserrat", sans-serif;
  --f-head: "Cormorant Infant", Georgia, serif;
  --f-text: "Lora", Georgia, serif;
  --f-label: "Gantari", system-ui, sans-serif;

  /* Breite der Inhaltsspalte. In Vorlage 1a ist die Spalte genauso breit wie das Startbild
     (1024px), die Karten füllen sie bis auf 30px Rand, der übrige Inhalt bis auf 48px.
     Da das Startbild hier den ganzen Bildschirm füllt, läuft der Inhalt in derselben
     Proportion mit: volle Breite, Ränder skalieren wie in der Vorlage (2,9 % bzw. 4,7 %
     der Breite). Erst ab 1920px Fensterbreite wächst der Inhalt nicht weiter. */
  --spalte: 1920px;
  --rand: clamp(24px, 4.69vw, 90px);
  --rand-karten: clamp(20px, 2.93vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--text); font: 400 17px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; cursor: pointer; transition: color .3s; }
a:hover { color: var(--gold); }
p { margin: 0 0 1.1em; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 400; margin: 0; }
h1 { font-size: 44px; line-height: 1.2; }
h2 { font-size: 34px; line-height: 1.25; }
h3 { font-size: 24px; line-height: 1.3; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--creme); padding: 8px 14px; z-index: 100; font: 500 11px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; }
.skip:focus { left: 8px; }

/* Seitenrahmen */
.seite { width: 100%; max-width: var(--spalte); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; animation: hbIn .5s both; }
main { display: flex; flex-direction: column; }
@keyframes hbIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes hbFade { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* Labels (Gantari, immer Versalien) */
.label { font: 500 11px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; }
.kicker { font: 400 11px/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.linklabel { display: inline-block; font: 500 11px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--gold); }

/* ── Navigation ───────────────────────────────────────────── */
.nav { display: flex; gap: 40px; align-items: flex-start; font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; }
.nav > a, .nav .sub > button { position: relative; display: flex; align-items: center; gap: 8px; height: 12px; white-space: nowrap; background: none; border: 0; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text); cursor: pointer; transition: color .3s; }
.nav > a:hover, .nav .sub > button:hover, .nav .sub:hover > button { color: var(--gold); }
.nav .aktiv::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--gold); }
.nav .sub { position: relative; }
.nav .sub-menu { position: absolute; top: 12px; right: -18px; padding-top: 18px; min-width: 210px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .3s, transform .3s, visibility 0s .3s; z-index: 20; }
.nav .sub-menu > div { background: var(--creme); border: 1px solid var(--linie); padding: 8px 0; display: flex; flex-direction: column; }
.nav .sub:hover .sub-menu, .nav .sub.offen .sub-menu, .nav .sub:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s; }
.nav .sub-menu a { padding: 11px 20px; font: 500 11px/1 var(--f-label); letter-spacing: .18em; white-space: nowrap; }
.nav .sub-menu a.aktiv { color: var(--gold); }

.burger { display: none; background: none; border: 0; padding: 10px; margin: -10px; cursor: pointer; color: var(--text); }
.burger span { display: block; width: 24px; height: 1px; background: currentColor; margin: 6px 0; }
.mobilmenu { position: fixed; inset: 0; z-index: 60; background: var(--creme); display: flex; flex-direction: column; padding: 26px 24px 40px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
body.menue-offen .mobilmenu { opacity: 1; visibility: visible; transition: opacity .35s; }
body.menue-offen { overflow: hidden; }
.mobilmenu .zu { align-self: flex-end; background: none; border: 0; font: 400 26px/1 var(--f-text); color: var(--text); cursor: pointer; padding: 6px 10px; margin: -6px -10px 0 0; }
.mobilmenu nav { margin-top: 40px; display: flex; flex-direction: column; }
.mobilmenu nav a { font: 500 14px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.mobilmenu nav a.kind { padding-left: 20px; font-size: 12px; color: var(--text-2); }
.mobilmenu nav a.aktiv { color: var(--gold); }

/* ── Feste Leiste (erscheint erst beim Scrollen) ──────────── */
.leiste { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: rgba(246,241,234,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); transform: translateY(-101%); transition: transform .45s var(--ease); }
.leiste.sichtbar { transform: none; }
.leiste > div { max-width: var(--spalte); margin: 0 auto; height: 64px; padding: 0 var(--rand); display: flex; align-items: center; justify-content: space-between; }
.start .leiste > div { max-width: none; }
.leiste .marke { display: flex; align-items: center; gap: 14px; color: var(--text); font: 200 18px/1 var(--f-marke); letter-spacing: .28em; }
.leiste .marke:hover { color: var(--text); }
.leiste .marke img { height: 30px; width: auto; }

/* ── Kopf der Unterseiten (Logo-Lockup links, Navigation rechts) ── */
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; padding: 26px var(--rand) 0; }
.kopfzeile .nav { padding-top: 24px; }
.lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text); }
.lockup:hover { color: var(--text); }
.lockup img { width: 78px; height: auto; }
.lockup .wort { font: 200 24px/1 var(--f-marke); letter-spacing: .28em; padding-left: .28em; }
.lockup .sektion { display: flex; align-items: center; gap: 10px; font: 400 9px/1 var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.lockup .sektion::before, .lockup .sektion::after { content: ""; width: 26px; height: 1px; background: var(--gold); }

/* ── Startseite: Hero 1a ──────────────────────────────────── */
/* Abweichung von der Vorlage (dort 1024 × 940 fest): Der Hero läuft über die volle
   Bildschirmbreite und -höhe. Das Bild füllt ihn per object-fit: cover, deshalb reicht
   EIN großes Bild; je nach Gerät wird oben/unten oder links/rechts beschnitten. */
.start .seite { max-width: none; }
.start .karten, .start .fuss { width: 100%; max-width: var(--spalte); margin-left: auto; margin-right: auto; }
.hero { position: relative; height: clamp(820px, 100vh, 1200px); height: clamp(820px, 100svh, 1200px); overflow: hidden; }
.hero picture { position: absolute; inset: 0; }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(246,241,234,.94) 0%, rgba(246,241,234,.78) 34%, rgba(246,241,234,0) 62%); }
.hero.ohne-bild::before { background: linear-gradient(180deg, var(--creme), var(--sand)); }
.hero .nav { position: absolute; top: 44px; right: var(--rand); z-index: 3; }
.hero .burger { position: absolute; top: 30px; right: 24px; z-index: 3; }
.hero-block { position: absolute; left: 0; right: 0; top: clamp(96px, 14vh, 150px); z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.hero-block .bildmarke { width: 120px; height: auto; }
.hero-block .wortmarke { margin: 22px 0 0; font: 200 46px/1 var(--f-marke); letter-spacing: .3em; padding-left: .3em; }
.hero-block .tagline { margin-top: 16px; display: flex; align-items: center; gap: 16px; font: 400 13px/1 var(--f-label); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.hero-block .tagline::before, .hero-block .tagline::after { content: ""; width: 56px; height: 1px; background: var(--gold); }
.hero-block .zitat { margin: 54px 0 0; text-align: center; font: italic 400 24px/1.5 var(--f-head); max-width: 480px; }
.hero-block .signatur { margin-top: 34px; }

/* Desktop: Der Logo-Block skaliert mit der Hero-Höhe (--hh). Das Bild wächst mit dem
   Bildschirm, der Block also auch, damit er auf jedem Monitor an derselben Stelle im
   Motiv sitzt (über der Sofakante, mit Luft zum Menü). Bei rund 1100px Höhe entspricht
   das den Maßen der Vorlage 1a. */
@media (min-width: 861px) {
  .hero { --hh: clamp(820px, 100svh, 1200px); height: var(--hh); }
  /* mittig verankert: auf überbreiten Monitoren wird oben UND unten gleich beschnitten,
     die Sofakante bleibt so bei jedem Seitenverhältnis unter dem Block */
  .hero img.bg { object-position: 50% 50%; }
  .hero-block { top: calc(var(--hh) * .105); }
  .hero-block .bildmarke { width: calc(var(--hh) * .105); }
  .hero-block .wortmarke { margin-top: calc(var(--hh) * .018); font-size: calc(var(--hh) * .042); }
  .hero-block .tagline { margin-top: calc(var(--hh) * .014); font-size: max(11px, calc(var(--hh) * .012)); }
  .hero-block .zitat { margin-top: calc(var(--hh) * .03); font-size: max(18px, calc(var(--hh) * .022)); line-height: 1.42; max-width: 24em; }
  .hero-block .signatur { margin-top: calc(var(--hh) * .012); }
  .hero-block .signatur img { width: calc(var(--hh) * .135); }
}

/* Scroll-Hinweis: Versalien-Label und feine Goldlinie, die sich langsam nach unten zeichnet */
.hero {
  /* Der Hinweis sitzt genau mittig zwischen der Unterkante der Tisch-Querschiene und dem
     unteren Bildrand. --schiene = Lage dieser Unterkante im Startbild (Anteil der Bildhöhe,
     gemessen: 1435 von 1615 px). BEI NEUEM STARTBILD NEU MESSEN. Das Bild füllt den Hero
     per cover und ist mittig verankert, daher: dargestellte Bildhöhe = max(Hero-Höhe,
     Breite × Seitenverhältnis), freie Fläche = Hero/2 − (Schiene − 0,5) × Bildhöhe. */
  --schiene: .8885;
  --bildh: max(var(--hh, 100svh), 56.08vw);
  --frei: calc(var(--hh, 100svh) / 2 - (var(--schiene) - .5) * var(--bildh));
}
.scroll-hinweis {
  /* Die MITTE DES WORTES liegt genau auf halber Höhe zwischen Schiene und Bildrand:
     Der Kasten reicht vom Bildrand bis eine halbe Schrifthöhe über diese Mitte, das Wort
     steht oben im Kasten, darunter folgt eine kurze Goldlinie. */
  --abstand: 10px;
  position: absolute; left: 50%; bottom: 0; z-index: 2; transform: translateX(-50%);
  height: calc(var(--frei) / 2 + .5em);
  display: flex; flex-direction: column; align-items: center; gap: var(--abstand); padding: 0 16px;
  color: var(--text); font: 500 11px/1 var(--f-label); letter-spacing: .3em; text-transform: uppercase;
}
.scroll-hinweis span { padding-left: .3em; }
.scroll-hinweis i {
  /* Kurze Linie (bis 26px) in der Schriftfarbe des Wortes: Gold geht auf dem Eichenboden
     unter. --l = Platz unter dem Wort abzüglich 8px Luft zum Bildrand; reicht der nicht
     (sehr breite Monitore), wird sie kürzer, unter 8px entfällt sie. */
  --l: calc(var(--frei) / 2 - .5em - var(--abstand) - 8px);
  display: block; flex: none; width: 1.5px; height: min(26px, var(--l), max(0px, calc((var(--l) - 8px) * 1000)));
  background: rgba(43,42,39,.3); position: relative; overflow: hidden;
}
.scroll-hinweis i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--text); transform: translateY(-100%); animation: hbLinie 2.4s var(--ease) infinite; }
.scroll-hinweis:hover { color: var(--gold); }
.scroll-hinweis:hover i::after { background: var(--gold); }
@keyframes hbLinie { 0% { transform: translateY(-100%) } 55% { transform: translateY(0) } 100% { transform: translateY(100%) } }
html { scroll-behavior: smooth; }
#welten { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-hinweis i::after { transform: none; } }

/* Signatur: Danielas Unterschrift (Bild) oder Name in Versalien */
.signatur { display: inline-flex; }
.signatur img { width: 150px; height: auto; }
.signatur span { font: 400 13px/1 var(--f-label); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); padding-left: .34em; }

/* ── Startseite: Kartenreihe ──────────────────────────────── */
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rand-karten); padding: var(--rand-karten) var(--rand-karten) 0; }
.karte { border: 1px solid var(--linie); padding: 0 0 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.karte:hover { color: inherit; }
.karte .bild { width: 100%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; background: var(--sand); }
.karte .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.karte:hover .bild img { transform: scale(1.04); }
.karte .titel { margin-top: 20px; font: 500 14px/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase; }
.karte .strich { width: 36px; height: 1px; background: var(--gold); }
.karte p { margin: 0; font: 400 17px/1.5 var(--f-text); color: var(--text-2); }
.karte .linklabel { margin-top: 8px; transition: color .3s; }
.karte:hover .linklabel { color: var(--gold); }

/* ── Unterseiten: Intro (Textblock, wenn es kein großes Bild gibt) ── */
.intro { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; padding: 64px var(--rand) 0; align-items: end; }
.intro > div { display: flex; flex-direction: column; gap: 22px; }
.intro > p { margin: 0 0 6px; font: 400 19px/1.55 var(--f-text); color: var(--text-2); max-width: 420px; }
.block { padding: 64px var(--rand) 0; }
.block.schmal { max-width: 760px; margin: 0 auto; width: 100%; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: 56px var(--rand) 0; }
.platzhalter { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sand); color: var(--inaktiv); font: 400 10px/1.4 var(--f-label); letter-spacing: .22em; text-transform: uppercase; text-align: center; padding: 16px; }


/* ── Raster ───────────────────────────────────────────────── */
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; padding: 40px var(--rand) 0; min-height: 200px; }
.kachel { display: flex; flex-direction: column; gap: 14px; animation: hbFade .7s var(--ease) both; }
.kachel:hover { color: inherit; }
.kachel .bild { width: 100%; aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--sand); }
.kachel .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.kachel:hover .bild img { transform: scale(1.05); }
.kachel .meta { display: flex; justify-content: space-between; gap: 12px; font: 400 11px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.kachel .meta .nr { color: var(--gold); white-space: nowrap; flex-shrink: 0; }
.kachel .name { font: 400 16px/1.4 var(--f-text); color: var(--text); display: block; margin-top: 8px; }
.kachel .meta:empty + .name { margin-top: 0; }
.leer { margin: 0; padding: 0 var(--rand); font: 400 17px/1.5 var(--f-text); color: var(--text-3); }

/* Hervorgehobener Ort */
.feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; padding: 56px var(--rand) 0; align-items: center; }
.feature .bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); display: block; }
.feature .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.feature .bild:hover img { transform: scale(1.04); }
.feature .text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.feature .region { font: 400 11px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.feature p { margin: 0; color: var(--text-2); }

/* ── Abschluss: Zitat, Herz, Signatur ─────────────────────── */
.abschluss { padding: 88px var(--rand) 64px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.abschluss blockquote { margin: 0; font: italic 400 28px/1.45 var(--f-head); max-width: 22em; }
.zurueck { display: flex; justify-content: center; padding: 0 var(--rand) 24px; }
.zurueck a { display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }


/* ── Detailseiten & Fließtext ─────────────────────────────── */
.herzblick { border-left: 1px solid var(--gold); padding: 4px 0 4px 28px; display: flex; flex-direction: column; gap: 14px; }
.herzblick p { margin: 0; font: italic 400 24px/1.5 var(--f-head); }
.prosa { font: 400 17px/1.7 var(--f-text); color: var(--text-2); }
.prosa h2 { font-size: 30px; color: var(--text); margin: 44px 0 14px; }
.prosa h3 { color: var(--text); margin: 30px 0 10px; }
.prosa a { border-bottom: 1px solid var(--gold); }
.prosa strong { font-weight: 600; color: var(--text); }
.prosa ul, .prosa ol { padding-left: 22px; }
.prosa figure { margin: 32px 0; } .prosa figcaption { font-size: 14px; color: var(--text-3); margin-top: 8px; }
.prosa blockquote { margin: 32px 0; padding-left: 24px; border-left: 1px solid var(--gold); font: italic 400 22px/1.5 var(--f-head); color: var(--text); }
.bildstrecke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 64px var(--rand) 0; }
.bildstrecke .bild { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); }
.bildstrecke .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bildstrecke der Ortsseiten je nach Anzahl: 4 in einer Reihe, 5 als zwei große Querformate
   über drei Quadraten, 6 in zwei Dreierreihen. Die Beitragsseiten haben eigene Regeln. */
.bildstrecke.n4:not(.beitrag-bilder) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bildstrecke.n5:not(.beitrag-bilder) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bildstrecke.n5:not(.beitrag-bilder) .bild { grid-column: span 2; }
.bildstrecke.n5:not(.beitrag-bilder) .bild:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 3 / 2; }
/* 7 Bilder: oben vier, darunter drei breitere; 8 Bilder: zwei Reihen à vier */
.bildstrecke.n7:not(.beitrag-bilder) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bildstrecke.n7:not(.beitrag-bilder) .bild { grid-column: span 3; }
.bildstrecke.n7:not(.beitrag-bilder) .bild:nth-child(n+5) { grid-column: span 4; aspect-ratio: 4 / 3; }
.bildstrecke.n8:not(.beitrag-bilder) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Interior Design: Raumbilder über die Inhaltsbreite, unbeschnitten in ihrem eigenen Format;
   zwei Bilder stehen nebeneinander, die Breiten kommen aus dem Build, damit beide gleich hoch sind */
.raumbild { padding: 72px var(--rand) 0; }
.raumbild .bild { background: var(--sand); }
.raumbild .bild img { display: block; width: 100%; height: auto; }
.raumbild.paar { display: flex; gap: 24px; align-items: flex-start; }
.raumbild + .raumbild { padding-top: 24px; }
/* drei Raumbilder: symmetrisch, gleich breit und gleich hoch */
.raumbild.drei .bild { flex: 1 1 0; aspect-ratio: 6 / 5; overflow: hidden; }
.raumbild.drei .bild img { height: 100%; object-fit: cover; }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 64px var(--rand) 0; align-items: start; }
.zwei .bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.zwei .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zwei .spalte { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.zwei .spalte > p { margin: 0; color: var(--text-2); }
.gruss { font: italic 400 28px/1.3 var(--f-head); }

/* ── Besonders Schönes: Übersicht und Beitrag ───────────── */
/* Übersicht: je Beitrag ein Bild, gleiches Raster und gleiche Abstände wie die Lieblingsorte;
   darunter der persönliche Satz in der Schrift der Ortsnamen (abgestimmt 26.10.2026) */
.raster[data-vertreter] .satz { font: 400 16px/1.4 var(--f-text); color: var(--text); }
/* Beitrag: ein festes Muster für alle Themen. Text links, Hauptbild rechts, Bilderreihe darunter */
.beitrag { align-items: center; }
.beitrag .spalte { gap: 24px; max-width: 36em; }
.beitrag h1 { font-size: clamp(36px, 2.9vw, 50px); line-height: 1.15; text-wrap: balance; }
.beitrag .prosa { font-size: 19px; line-height: 1.6; }
.beitrag .prosa > p { margin: 0 0 12px; }
.beitrag .prosa > p:last-child { margin-bottom: 0; }
.beitrag .herzblick p { font-size: 23px; }
.beitrag-zitat { margin: 14px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.beitrag-zitat blockquote { margin: 0; }
.beitrag-zitat p { margin: 0; font: italic 400 clamp(26px, 2.1vw, 36px)/1.3 var(--f-head); color: var(--gold); max-width: 17em; text-wrap: balance; }
.beitrag-bilder .bild { aspect-ratio: 4 / 5; }
.beitrag-bilder.n2, .beitrag-bilder.n1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Kunst: nichts beschneiden. Reihen gleicher Höhe, jedes Bild so breit wie sein Seitenverhältnis (--r) */
.beitrag.ganz .bild { aspect-ratio: auto; background: none; }
.beitrag.ganz .bild img { position: static; height: auto; }
.kunststrecke { display: flex; flex-direction: column; gap: 24px; padding: 64px var(--rand) 0; }
.kunststrecke .reihe { display: flex; gap: 24px; }
.kunststrecke .bild { flex: var(--r) 1 0; aspect-ratio: var(--r); min-width: 0; }
.kunststrecke .bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Zoom: Galeriebild groß, ganzes Format ─────────────────── */
.bildstrecke .bild img, .kunststrecke .bild img { cursor: zoom-in; }
.zoom { position: fixed; inset: 0; z-index: 70; background: rgba(43,42,39,.94); display: flex; align-items: center; justify-content: center; padding: 64px 96px; opacity: 0; transition: opacity .3s; }
.zoom.offen { opacity: 1; }
.zoom img { display: block; width: auto; height: auto; object-fit: contain; cursor: zoom-out; }
.zoom button { position: absolute; background: none; border: 0; cursor: pointer; color: var(--creme); font-family: var(--f-text); line-height: 1; transition: color .3s; }
.zoom button:hover, .zoom button:focus-visible { color: var(--gold); }
.zoom .zu { top: 28px; right: 36px; font-size: 26px; }
.zoom .vor, .zoom .weiter { top: 50%; transform: translateY(-50%); font-size: 44px; padding: 10px; }
.zoom .vor { left: 26px; } .zoom .weiter { right: 26px; }

/* ── Fotoband mit Text (nach Danielas Über-mich-Konzept, auf allen Unterseiten) ── */
/* Foto über die Spaltenbreite, Text links auf einem weichen dunklen Verlauf. Auf dem
   Handy steht der Text unter dem Bild. Bildausschnitt pro Bild im CMS (object-position).
   Höhe ausdrücklich gesetzt statt über aspect-ratio + max-height: Safari überträgt eine
   Höhenbegrenzung sonst in die Breite, und das Band wird schmaler als die Spalte. */
.fotoband { position: relative; margin-top: 24px; background: var(--sand); overflow: hidden; }
.fotoband.schluss { margin-top: 88px; }
.fotoband.oben + .raster { padding-top: 64px; }
.fotoband-bild { position: relative; width: 100%; height: min(40vw, 760px, 72vh); }
.fotoband-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Höheres Band für Fotos im Format 4:3, bei denen sonst zu viel wegfällt (im CMS wählbar).
   Der Text rückt nach oben, damit er auf der ruhigen Wand statt auf dem Motiv steht. */
.fotoband.hoch .fotoband-bild { height: min(48vw, 880px, 82vh); }
.fotoband.hoch .fotoband-text { justify-content: flex-start; padding-top: min(6.5vw, 110px); }
.fotoband-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43,42,39,.7) 0%, rgba(43,42,39,.54) 24%, rgba(43,42,39,.24) 42%, rgba(43,42,39,0) 60%); }
.fotoband-text { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 0 var(--rand); max-width: min(48%, 700px); }
.fotoband-text h1 { font-size: clamp(34px, 3.3vw, 56px); line-height: 1.1; color: #fff; text-shadow: 0 1px 28px rgba(0,0,0,.28); text-wrap: balance; }
.fotoband-unter { margin: 0; max-width: 22em; text-wrap: balance; font: 400 clamp(17px, 1.35vw, 22px)/1.45 var(--f-text); color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.3); }
.fotoband-zeilen { margin: 0; font: 400 clamp(26px, 2.5vw, 44px)/1.22 var(--f-head); color: #fff; text-shadow: 0 1px 24px rgba(0,0,0,.28); }
.fotoband .signatur img { filter: brightness(1.35); }
.fotoband .signatur svg { stroke: #d9bd7f; }
.goldstrich { display: block; width: 48px; height: 1px; background: var(--gold); flex: none; }
.fotoband .goldstrich { background: #d9bd7f; }
.fotoband .kicker { color: #e3cb93; }
/* Helle Variante (Schlussband wie in Danielas Konzept): dunkle Schrift auf hellem Himmel,
   ein cremefarbener Schleier von links sichert die Lesbarkeit */
.fotoband.hell .fotoband-bild::after { background: linear-gradient(90deg, rgba(246,241,234,.8) 0%, rgba(246,241,234,.56) 24%, rgba(246,241,234,.18) 44%, rgba(246,241,234,0) 58%); }
.fotoband.hell h1, .fotoband.hell .fotoband-unter, .fotoband.hell .fotoband-zeilen { color: var(--text); text-shadow: none; }
.fotoband.hell .goldstrich { background: var(--gold); }
.fotoband.schluss .fotoband-text { max-width: min(58%, 820px); }

/* Knopf: nur auf Fotobändern, wo ein unterstrichener Link untergehen würde */
.knopf { display: inline-block; background: var(--gold); color: #fff; font: 500 11px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; padding: 17px 30px 16px; transition: background .3s; }
.knopf:hover { background: #8f7234; color: #fff; }

/* Signatur mit kleinem Herz daneben */
.signatur.mit-herz { display: inline-flex; align-items: center; gap: 12px; }
.signatur.mit-herz svg { flex: none; width: 27px; height: auto; }

/* Über mich: Text neben dem Porträt */
.ueber-intro { align-items: center; }
.ueber-intro .spalte { gap: 20px; max-width: 34em; }
.ueber-intro h2 { font-size: 44px; line-height: 1.18; }
/* Der ganze Text neben dem Porträt in einer Größe und Farbe, der Schlusssatz steht nur mit mehr Abstand ab */
.ueber-intro .spalte > p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text); }
.ueber-intro .spalte > p.schlusssatz { margin-top: 14px; text-wrap: balance; }
.ueber-intro .signatur { margin-top: 6px; }

/* Abschluss ohne Bild: ruhiger Textblock */
.schlussblock { padding: 88px var(--rand) 24px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.schlussblock .zeilen { margin: 0; font: 400 34px/1.3 var(--f-head); }

/* ── Interior: Angebote ───────────────────────────────────── */
/* Die drei Karten teilen sich über subgrid dieselben Zeilen: Name, Strich, Untertitel, Text
   und Liste stehen nebeneinander auf gleicher Höhe, auch wenn ein Untertitel zweizeilig ist */
.pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 40px var(--rand) 0; }
.paket { border: 1px solid var(--linie); padding: 34px 28px; display: grid; grid-row: span 5; grid-template-rows: subgrid; justify-items: center; align-items: start; text-align: center; gap: 14px; }
.paket .strich { align-self: center; }
.paket .name { font: 500 13px/1.4 var(--f-label); letter-spacing: .24em; text-transform: uppercase; }
.paket .strich { width: 36px; height: 1px; background: var(--gold); }
.paket .unter { font: italic 400 20px/1.35 var(--f-head); }
.paket p { margin: 0; font-size: 16px; color: var(--text-2); }
.paket ul { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; }
.paket li { padding: 10px 0; border-top: 1px solid var(--linie); font: 400 11px/1.5 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.aufruf { padding: 88px var(--rand) 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.aufruf p { margin: 0; max-width: 30em; color: var(--text-2); }

/* ── Kontaktformular ──────────────────────────────────────── */
.formular { display: grid; gap: 26px; width: 100%; }
.feld { display: grid; gap: 10px; }
.feld label { font: 400 11px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.feld input, .feld textarea { width: 100%; border: 0; border-bottom: 1px solid var(--linie); background: transparent; font: 400 17px/1.5 var(--f-text); color: var(--text); padding: 8px 0; border-radius: 0; outline: none; transition: border-color .3s; }
.feld input:focus, .feld textarea:focus { border-color: var(--gold); }
.feld textarea { min-height: 150px; resize: vertical; }
.honig { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.senden { justify-self: start; background: none; border: 0; border-bottom: 1px solid var(--gold); padding: 0 0 6px; cursor: pointer; font: 500 11px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--text); transition: color .3s; }
.senden:hover { color: var(--gold); } .senden:disabled { opacity: .5; cursor: default; }
.form-status { margin: 0; min-height: 1.5em; font-size: 16px; color: var(--text-2); } .form-status.ok { color: var(--gold); }
.form-status a, .wege a { border-bottom: 1px solid var(--gold); }
.form-hinweis { margin: 0; font-size: 14px; color: var(--text-3); }
.wege { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ── Fuß ──────────────────────────────────────────────────── */
.fuss { margin-top: auto; }
.fuss > div { margin-top: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 40px var(--rand) 34px; border-top: 1px solid var(--linie); font: 400 11px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.start .fuss > div { margin-top: 30px; }
.fuss .mitte { display: flex; gap: 36px; }
.fuss .rechts { text-align: right; }
.fuss .insta { display: inline-flex; color: var(--text); }
.fuss .credit { grid-column: 1 / -1; text-align: center; margin-top: 26px; font-size: 9px; letter-spacing: .24em; color: var(--inaktiv); }

/* ── 404 ──────────────────────────────────────────────────── */
.nichts { padding: 120px var(--rand); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }

/* ── Kleinere Bildschirme ─────────────────────────────────── */
@media (max-width: 860px) {
  :root { --rand: 24px; }
  h1 { font-size: 34px; } h2 { font-size: 28px; }
  .nav { display: none; }
  .burger { display: block; }
  .kopfzeile { align-items: center; padding-top: 20px; }
  .lockup img { width: 60px; } .lockup .wort { font-size: 19px; }
  .hero { height: auto; min-height: 100vh; min-height: 100svh; }
  .hero-block { position: relative; top: auto; padding: 96px 24px 300px; }
  .hero-block .bildmarke { width: 96px; }
  .hero-block .wortmarke { font-size: 30px; }
  .hero-block .tagline { font-size: 11px; gap: 12px; } .hero-block .tagline::before, .hero-block .tagline::after { width: 32px; }
  .hero-block .zitat { font-size: 21px; margin-top: 40px; }
  .scroll-hinweis { --abstand: 9px; font-size: 10px; }
  .karten { grid-template-columns: 1fr; padding: 24px 24px 0; gap: 24px; }
  .intro { grid-template-columns: 1fr; gap: 22px; padding-top: 44px; }
  .intro > p { font-size: 18px; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .feature, .zwei { grid-template-columns: 1fr; gap: 28px; }
  .pakete { grid-template-columns: 1fr; }
  .bildstrecke { gap: 12px; }
  .bildstrecke.n4:not(.beitrag-bilder) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abschluss blockquote { font-size: 24px; }
  .fuss > div { grid-template-columns: 1fr; justify-items: center; gap: 22px; text-align: center; }
  .fotoband-bild { height: 440px; }
  .fotoband.hoch .fotoband-bild { height: 440px; }
  .fotoband.hoch .fotoband-text { padding-top: 32px; }
  .fotoband.schluss .fotoband-bild { height: 300px; }
  .fotoband-bild::after { display: none; }
  .fotoband-text, .fotoband.schluss .fotoband-text { position: static; max-width: none; padding: 32px var(--rand) 36px; }
  .fotoband-text h1, .fotoband-unter, .fotoband-zeilen { color: var(--text); text-shadow: none; }
  .fotoband .signatur img { filter: none; }
  .fotoband .signatur svg { stroke: var(--gold); }
  .fotoband .goldstrich { background: var(--gold); }
  .fotoband .kicker { color: var(--gold); }
  .fotoband.schluss .fotoband-text { align-items: center; text-align: center; padding-top: 40px; padding-bottom: 44px; }
  .fotoband.schluss { margin-top: 64px; }
  .ueber-intro h2 { font-size: 32px; }
  .beitrag .bild { order: -1; }
  .beitrag .prosa { font-size: 17px; }
  .beitrag h1 { font-size: 34px; }

  .fuss .rechts { text-align: center; } .fuss .mitte { gap: 28px; }
}
@media (max-width: 520px) {
  .raster { grid-template-columns: 1fr; }
  .bildstrecke, .bildstrecke.n4:not(.beitrag-bilder), .bildstrecke.n5:not(.beitrag-bilder), .bildstrecke.n7:not(.beitrag-bilder), .bildstrecke.n8:not(.beitrag-bilder) { grid-template-columns: 1fr 1fr; }
  .bildstrecke.n7:not(.beitrag-bilder) .bild, .bildstrecke.n7:not(.beitrag-bilder) .bild:nth-child(n+5) { grid-column: auto; aspect-ratio: 1 / 1; }
  .bildstrecke.n7:not(.beitrag-bilder) .bild:last-child { grid-column: span 2; aspect-ratio: 3 / 2; }
  .bildstrecke.n5:not(.beitrag-bilder) .bild, .bildstrecke.n5:not(.beitrag-bilder) .bild:nth-child(-n+2) { grid-column: auto; aspect-ratio: 1 / 1; }
  .bildstrecke.n3:not(.beitrag-bilder) .bild:last-child, .bildstrecke.n5:not(.beitrag-bilder) .bild:first-child { grid-column: span 2; aspect-ratio: 3 / 2; }
  .raumbild { padding-top: 48px; }
  .raumbild.paar { flex-direction: column; gap: 12px; }
  .raumbild.paar .bild { flex: none !important; width: 100%; }
  .raumbild.drei .bild { aspect-ratio: auto; }
  .raumbild.drei .bild img { height: auto; }
  .bildstrecke.beitrag-bilder { grid-template-columns: 1fr; }
  .bildstrecke.beitrag-bilder .bild { aspect-ratio: 4 / 5; }
  .kunststrecke { gap: 12px; }
  .kunststrecke .reihe { flex-direction: column; gap: 12px; }
  .zoom { padding: 64px 12px; } .zoom .vor { left: 2px; } .zoom .weiter { right: 2px; } .zoom .zu { right: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }