/* Selbst gehostete Variable Fonts, siehe fonts/LIZENZ.txt (SIL OFL 1.1). */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/manrope-variable.woff2') format('woff2');
}
/* Echte Markenschrift (Sudantrie) fürs Logo -- vom Kunden als woff/woff2 geliefert,
   siehe fonts/LIZENZ.txt für den Lizenzstand. Nur Regular, eine Auszeichnungsschrift
   für kurze Akzentworte (siehe .em-Regel), keine Fließtext-/Zahlenschrift. */
@font-face {
  font-family: 'Sudantrie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sudantrie.woff2') format('woff2'),
       url('fonts/sudantrie.woff') format('woff');
}

/*
  Gestaltungsidee: "Gästejournal" — die Seite liest sich wie handgesetzte Seiten
  eines gut gestalteten Gästebuchs/Reisejournals. Tragende Elemente sind feine
  Linien und eine nummerierte Kapitelspalte, nicht Karten, Farbverläufe oder
  Icon-Badges. Genau zwei Farben tragen Bedeutung: Tinte (Text) und Ton
  (Akzent, ausschließlich für die eine Handlungsaufforderung je Ansicht und
  für Auszeichnungen im Fließtext). Siehe CLAUDE.md.

  Farben ab 2026-07-26 echte Markenfarben (Logo-Festlegung.pdf, Instagram-Variante):
  Oliv #454B16 als Tinte, Camel #C3996F als Akzent -- lösen die bisherige
  Terrakotta/Blaugrün-Platzhalterpalette ab. --color-accent-dark/-on-dark sind
  abgeleitete, kontrastsichere Varianten für Fließtext bzw. dunkle Flächen
  (siehe Audit-Notiz), keine eigenständigen Markenfarben.
*/

:root {
  --color-paper: #f6f2e9;
  --color-paper-soft: #efe9db;
  --color-surface: #fbf8f2;
  --color-ink: #454b16;
  --color-ink-deep: #373c11;
  --color-ink-soft: #686c40;
  --color-accent: #c3996f;
  --color-accent-dark: #7f6348;
  --color-accent-on-dark: #d5b89a;
  --color-rule: #d9d0bc;
  --color-onink-primary: rgba(246, 242, 233, 0.92);
  --color-onink-secondary: rgba(246, 242, 233, 0.7);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  /* Nur echte Duplikate erhalten einen Token (siehe CLAUDE.md, Audit 2026-07-22) */
  --text-label: 0.72rem;
  --text-caption: 0.76rem;
  --text-body-sm: 0.9rem;
  --text-ui: 0.92rem;

  --font-heading: 'Fraunces', Georgia, 'Iowan Old Style', serif;
  --font-body: 'Manrope', 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-script: 'Sudantrie', 'Segoe Script', cursive;
}

/*
  --color-ink-faint (früher #93a099, 2.4:1 auf --color-paper) wurde entfernt statt
  neu eingefärbt: auf dieser hellen Fläche bleibt für eine dritte, noch hellere
  Graustufe kein Spielraum, der WCAG AA (4.5:1) einhält. Passt zusätzlich besser
  zum eigentlichen Gestaltungsprinzip ("genau zwei Farben tragen Bedeutung", siehe
  CLAUDE.md) -- alle bisherigen Verwender laufen jetzt auf --color-ink-soft
  (AA-konform, aktuell ~4.9:1 -- Wert verschob sich leicht mit dem Wechsel auf
  die echten Markenfarben am 2026-07-26, bleibt aber über der 4.5:1-Schwelle).
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink-soft);
  background: var(--color-paper);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(2.1rem, 3.4vw, 2.7rem); line-height: 1.18; }
h2 { font-size: clamp(1.55rem, 2.2vw, 1.9rem); line-height: 1.25; }
h3 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-body); color: var(--color-ink); }
em { font-style: italic; color: var(--color-accent-dark); }
/* Für Nennungen von "sentio comfortable" im Fließtext -- Alice möchte den Namen laut
   ihrer eigenen Anmerkung (Text_Internetseite_neu.docx) immer in derselben grünen
   Schreibschrift wie im Wordmark sehen, konsequent getrennt von der generischen
   <em>-Betonung (die bleibt Fraunces italic für alles andere). Kurze Vorkommen im
   Text, keine langen Phrasen -- gleiche Umbruch-Lektion wie beim Wordmark/der
   Hero-Headline, siehe CLAUDE.md. */
.brand-mention { font-family: var(--font-script); font-style: normal; color: var(--color-ink); white-space: nowrap; }

p { margin: 0 0 var(--space-4); }
/* Der rohe Markenton --color-accent (Camel, #c3996f) kommt auf der hellen Fläche
   nur auf 2.3:1 -- reicht selbst für großen Text nicht (WCAG braucht 3:1). Jede
   Text-Verwendung läuft daher über --color-accent-dark (~5:1); --color-accent
   bleibt als Referenzwert/für flächige Nutzung (Hintergründe, Swatches) erhalten. */
a { color: var(--color-accent-dark); }

/* Feine Trennlinie -- das zentrale Strukturelement statt Karten/Schatten */
.rule { border: none; border-top: 1px solid var(--color-rule); margin: 0; }

/* Skip-Link: unsichtbar bis zum Fokus, dann sichtbar -- für Tastatur-/Screenreader-Nutzung */
.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-4);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 10px 18px;
  border-radius: 3px;
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-ui);
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-4); }

/* Sichtbarer Fokusring für Tastaturnutzung, unabhängig vom Element */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
}

/* Wiederverwendbare Platzhalter-Fläche -- eine Basis für hero-/unit-/team-plate
   statt dreier fast identischer Regeln (siehe CLAUDE.md, Audit 2026-07-22). */
.plate { background: var(--color-paper-soft); border: 1px solid var(--color-rule); }

/* Kapitel-Layout: schmale nummerierte Spalte + Inhalt, quer durch die Seite wiederholt.
   2026-07-29: echter, sitewide bestehender Bug gefunden -- `.chapter` sitzt IMMER auf
   demselben Element wie `.container` (<div class="container chapter">). Die
   `padding`-Kurzschreibweise hier setzt ALLE vier Seiten und überschreibt dadurch
   `.container`s horizontales Padding (32px) komplett auf 0 -- Inhalt lag praktisch
   randlos am Viewport-Rand (vom Nutzer als "übelst nah am Rand" gemeldet). Betraf auch
   `.footer-top`/`.footer-bottom` (gleiches Muster). Fix: nur noch padding-top/-bottom
   setzen, nie die Kurzschreibweise auf einem Element, das schon `.container` ist. */
.chapter { display: grid; grid-template-columns: 148px 1fr; gap: var(--space-7); padding-top: var(--space-9); padding-bottom: var(--space-9); border-top: 1px solid var(--color-rule); }
/* Direkt nach dem Bewertungs-Band wirkt die zusätzliche Hairline deplatziert (Nutzer-
   Feedback) -- das Band hat schon eine eigene (wenn auch dezente) Hintergrundfläche als
   Abschluss, eine zweite Linie direkt danach war redundant. */
#wohnungen .chapter { border-top: none; }
.chapter > * { min-width: 0; }
.chapter-rail { padding-top: 4px; }
.chapter-num { font-family: var(--font-heading); font-style: italic; font-size: 1.5rem; color: var(--color-accent-dark); display: block; margin-bottom: var(--space-2); }
/* Echtes Überschriften-Element (h2) -- Text/Optik unverändert, siehe h1,h2,h3-Regel
   oben, die hier bewusst per font-family/margin/font-weight überschrieben wird. */
.chapter-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0;
}
.chapter-intro { max-width: 480px; margin-bottom: var(--space-7); }
.chapter-intro p { color: var(--color-ink-soft); }

/* Wohnungen-Teaser auf der Startseite -- ersetzt die frühere volle
   Foto-Galerie+Langtext-Darstellung aller drei Wohnungen direkt auf der
   Startseite (wurde vom Nutzer als viel zu lang kritisiert, "übelst lang die
   Seite"). Der volle Inhalt lebt jetzt auf eigenen Unterseiten
   (wohnung-1.html etc.), hier nur noch eine kompakte, klickbare Kachel. */
.unit-teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.historie-preview { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-6); align-items: center; }
.historie-preview .plate { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; min-width: 0; }
.historie-preview > div { min-width: 0; }
.unit-teaser { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
/* Schmaler als vorher (war 4:3, nahm zu viel Raum ein) -- Bild bleibt erkennbar, Text
   und Punktzahl bekommen mehr Gewicht in der Kachel. */
/* height: auto ist hier Pflicht, nicht Kosmetik: die width/height-HTML-Attribute der
   <img>-Tags (Lazy-Load-Layout-Hint, 640x480) zählen als eigene Präsentations-Angabe
   und gewinnen sonst gegen `aspect-ratio`, sobald `height` selbst nicht explizit
   gesetzt ist -- das Bild bekam dadurch bisher IMMER die feste 480px-Attributhöhe
   statt der beabsichtigten 16:9-Höhe, besonders sichtbar/riesig auf Mobil, wo die
   Breite auf 100% schrumpft, die Höhe aber starr blieb (Nutzer-Feedback "Bilder
   können deutlich kleiner dargestellt werden"). */
.unit-teaser img, .unit-teaser .plate { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; margin-bottom: var(--space-3); }
.unit-teaser-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.unit-teaser-head h3 { margin: 0; color: var(--color-ink); }
.unit-teaser-score[hidden] { display: none; }
.unit-teaser-score { display: flex; align-items: center; gap: 4px; font-size: var(--text-caption); color: var(--color-ink-soft); flex-shrink: 0; }
.unit-teaser-score svg { width: 14px; height: 14px; color: var(--color-accent-dark); }
.unit-teaser p { color: var(--color-ink-soft); font-size: var(--text-body-sm); margin: var(--space-2) 0 var(--space-3); }
.unit-teaser .text-link { font-size: var(--text-caption); }
.unit-teaser:hover .text-link { color: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.unit-teaser--upcoming p { font-style: italic; }

/* Unterseiten (Wohnung X, Historie, Karriere): schlichter Seitenkopf statt der
   nummerierten Kapitel-Schiene, die für den Startseiten-Fluss gedacht ist --
   eine einzelne Unterseite braucht keine "01/02/03"-Nummerierung. */
.page-header { padding: var(--space-8) 0 var(--space-6); border-top: 1px solid var(--color-rule); }
.page-back { display: inline-block; margin-bottom: var(--space-4); font-size: var(--text-caption); }
/* Zusätzlich zum Link oben und dem mitschwebenden Button (der unter 860px ausgeblendet
   ist, siehe CLAUDE.md) noch ein normaler Link am Seitenende -- ohne den musste man auf
   langen Unterseiten erst wieder nach oben scrollen. */
.page-back-bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); font-size: var(--text-caption); }
.page-header h1 { margin-bottom: var(--space-2); }

/* Mitschwebender Zurück-Link auf Unterseiten -- damit man nach dem Scrollen nicht erst
   wieder nach oben muss, um zurückzukommen (Nutzer-Feedback). */
.floating-back {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 40;
  background: rgba(246, 242, 233, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  padding: 10px 16px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.floating-back:hover { border-color: var(--color-accent-dark); color: var(--color-accent-dark); }

/* Schlichte Formulare (Bewertungs-Upload, künftig Kontakt-/Bewerbungsformular) */
.form-row { margin-bottom: var(--space-5); }
.form-row label { display: block; font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-ink-soft); margin-bottom: var(--space-2); }
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: 2px solid var(--color-accent-dark); outline-offset: 1px; }
.form-row textarea { resize: vertical; }
.form-success { color: var(--color-ink); background: var(--color-paper-soft); border: 1px solid var(--color-rule); padding: var(--space-4); border-radius: 3px; margin-top: var(--space-4); }
.form-error { color: var(--color-ink); background: var(--color-paper-soft); border: 1px solid var(--color-accent-dark); padding: var(--space-4); border-radius: 3px; margin-top: var(--space-4); }
.form-success[hidden], .form-error[hidden] { display: none; }
/* Honeypot: für Menschen unsichtbar, aber im DOM vorhanden -- Bots füllen es aus, echte
   Nutzer:innen sehen/erreichen es nicht (kein display:none, das erkennen manche Bots). */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { max-width: 480px; }

.lead { font-size: 1.06rem; color: var(--color-ink); }
.fine-note { font-size: var(--text-caption); color: var(--color-ink-soft); }

/* Buttons: zurückhaltend, ein Fülltyp, ein Textlink */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 13px 24px;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-fill { background: var(--color-ink); color: var(--color-paper); }
.btn-fill:hover { background: var(--color-accent-dark); }
.btn-line { border-color: var(--color-ink); color: var(--color-ink); }
.btn-line:hover { border-color: var(--color-accent-dark); color: var(--color-accent-dark); }

.text-link {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-ui);
  border-bottom: 1px solid var(--color-ink-soft);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.text-link:hover { color: var(--color-accent-dark); border-color: var(--color-accent-dark); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 242, 233, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
}
.brand { display: flex; flex-direction: column; text-decoration: none; }
/* Marken-Wordmark als echter Text statt Rasterbild (img/logo.png sah bei der
   Header-Höhe unscharf/"kacke" aus, siehe CLAUDE.md) -- "sentio comfortable" ist
   bewusst die einzige Stelle sitewide, die Sudantrie live nutzt: kurz, bleibt immer
   einzeilig, genau das Wortpaar, das auch auf Visitenkarte/Flyer/Logo so steht.
   Nicht auf "Saalfeld an der Saale" oder andere Phrasen ausweiten -- das wurde in
   der Hero-Headline ausprobiert und verworfen (zeilenumbrochen, wirkte zerrissen). */
/* Sudantrie hat sehr lange Unterlängen-Schwünge (siehe "comfortable"), die bei
   normalem line-height in die nächste Zeile hineinragen -- deshalb hier bewusst
   ein hohes line-height + großzügiger margin-top auf der Tagline, per
   html2canvas-Rendering im echten Header-Kontext geprüft (siehe CLAUDE.md).
   Nicht ohne erneute visuelle Prüfung wieder verkleinern. */
.brand-script { font-family: var(--font-script); font-size: 1.55rem; line-height: 2; color: var(--color-ink); white-space: nowrap; }
.brand-tagline { display: block; font-size: 0.64rem; font-weight: 700; color: var(--color-ink-soft); letter-spacing: 1.1px; text-transform: uppercase; margin-top: 2px; }
.main-nav { display: flex; align-items: center; gap: var(--space-6); }
.main-nav a {
  color: var(--color-ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.main-nav a:hover { color: var(--color-accent-dark); }
.main-nav .text-link { border: none; padding: 0; color: var(--color-ink); }
.main-nav .text-link:hover { color: var(--color-accent-dark); }

/* Mobil-Menü: unter 860px verschwand die Nav bisher komplett ohne jeden Ersatz
   (kein Hamburger, siehe CLAUDE.md-Konvention der Schwesterseiten) -- auf einer
   reinen One-Pager-Startseite tolerierbar, aber seit dem Umbau zur Mehrseiten-Site
   (Wohnungen/Historie/Karriere/Kontakt als echte Unterseiten) gab es auf Mobilgeräten
   dadurch gar keine Möglichkeit mehr, zwischen Seiten zu wechseln außer über
   Footer-Links ganz unten -- vom Nutzer als "absolute Katastrophe" zurückgemeldet,
   siehe CLAUDE.md. Einfaches Aufklapp-Menü ergänzt statt der Text-Alternative. */
.nav-toggle { display: none; }

/* Hero */
.hero { padding: var(--space-9) 0 var(--space-8); }
.hero-grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: var(--space-8); align-items: start; }
.hero-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-accent-dark); margin-bottom: var(--space-4); }
.hero h1 { max-width: 480px; margin-bottom: var(--space-5); }
.hero .sub { max-width: 420px; color: var(--color-ink-soft); font-size: 1.02rem; margin-bottom: var(--space-6); }
.hero-actions { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-7); flex-wrap: wrap; }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); max-width: 480px; }
.hero-facts span { font-size: 0.82rem; color: var(--color-ink-soft); }
.hero-facts strong { color: var(--color-ink); font-weight: 700; }

.hero-plate {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}
/* Markenfläche nach dem Vorbild der echten Visitenkarte/des Flyers (Foto von Alice
   2026-07-26): dort läuft genau dieser Olive-zu-Camel-Verlauf als Kartenhintergrund,
   mit dem Schriftzug + der echten Tagline in heller Schrift darauf. Das ist die
   einzige Stelle sitewide mit einem Farbverlauf -- kein eigenes Gestaltungsmittel,
   sondern eine getreue Wiedergabe des vorgegebenen, bereits gedruckten
   Kunden-Farbkonzepts (siehe CLAUDE.md). Ersetzt den bisherigen leeren
   Foto-Platzhalter, bis echte Aufnahmen vorliegen -- danach ggf. durch ein echtes
   Foto ablösen oder als eigener "Marken"-Moment beibehalten, das ist eine
   redaktionelle Entscheidung des Kunden. */
.hero-plate--brand {
  /* 2026-07-29: echtes Foto (img/hero-bg.jpg, Hauseingang) statt des reinen
     Farbverlaufs, sobald verfügbar -- der Verlauf bleibt als Fallback-Hintergrund
     hinter dem Bild erhalten, falls das Foto mal nicht lädt. Scrim auf 45% Schwarz
     angehoben (vorher 35% für den reinen Verlauf) -- das Foto hat hellere
     Fachwerk-Gefache, die sonst wieder unter die nötigen ~4,5:1 Kontrast für den
     hellen Text rutschen; im Browser nachgerechnet. */
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('img/hero-bg.jpg'),
    linear-gradient(135deg, var(--color-ink) 0%, var(--color-accent) 55%, var(--color-ink) 100%);
  background-size: cover;
  background-position: center;
  border: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
}
.hero-plate-brand-word { display: block; font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-paper); }
.hero-plate-brand-script { display: block; font-family: var(--font-script); font-size: 2.1rem; line-height: 2; color: var(--color-paper); }
.hero-plate-brand-tagline { margin: var(--space-4) 0 0; font-size: 0.86rem; color: rgba(246, 242, 233, 0.88); max-width: 220px; }

/* Bewertungen: ruhige statische Leiste, kein Auto-Scroll-Ticker (siehe CLAUDE.md --
   eine frühere Marquee-Version wurde als "sieht aus wie 1995" verworfen). Punktzahl
   + Rezensionen kommen aus reviews.json (eigene Datei, gleiche Origin), von Hand aus
   dem Booking.com-Partnerportal-Export gepflegt (Skala /10, nicht /5 -- siehe
   CLAUDE.md) -- kein Drittanbieter-Skript im Browser, kein Consent nötig.
   2026-07-29: von der dunklen Mehr-Karten-Ausführung zurück auf eine helle
   Einzelzitat-Spotlight-Ansicht umgebaut -- näher an der vom Nutzer gelieferten
   Referenzgrafik (dort ist die Testimonial-Zeile hell/Paper, nicht dunkel; dunkel
   ist dort nur Hero-Sidebar und Footer). Kein Kartencontainer mehr (Schatten/
   Hintergrundbox) -- passt auch besser zum sitewide "keine Card-Komponenten"-Prinzip
   des Gästejournal-Konzepts (siehe Design-Abschnitt oben), das die vorige
   Karten-Variante eigentlich gebrochen hatte. Der dunkle Farbton bleibt weiterhin nur
   im Footer präsent (Alice-Wunsch), nicht hier. */
/* 2026-07-29: die drei Punktzahlen-Blöcke (Wohnung 1/2/3 mit Note+Anzahl) sind wieder
   raus -- Nutzer wollte hier nur noch die Zitate, die Punktzahl steht stattdessen auf
   der jeweiligen Wohnungsseite selbst (.unit-score, siehe dort). */
.reviews-band { background: var(--color-paper-soft); padding: var(--space-8) 0; }

/* Eigener Bewertungs-Slider -- ersetzt das vorher eingebundene TrustIndex-Widget
   (siehe CLAUDE.md). Zitat-Optik von einer Referenzseite angeregt (großes
   Anführungszeichen, kursiver Zitat-Text, Name+Quelle statt Foto darunter), aber
   bewusst ohne Avatar/Bild und eigenständig umgesetzt -- keine 1:1-Kopie. Nur EIN
   Zitat gleichzeitig sichtbar (statt mehrerer nebeneinander), analog zur Referenz.
   Komplett selbst gehostet aus reviews.json, kein Drittanbieter-Skript, kein Consent
   nötig. Bewegt sich automatisch (Auto-Rotation, siehe script.js), pausiert bei
   Hover/Fokus. */
.reviews-slider-wrap { position: relative; margin-top: var(--space-6); max-width: 640px; }
.reviews-slider-wrap:has(.reviews-slider:empty) { display: none; }
.reviews-slider { display: flex; overflow-x: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.reviews-slider::-webkit-scrollbar { display: none; }
.review-card {
  scroll-snap-align: start;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.review-quote-mark {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-accent-dark);
  opacity: 0.85;
  margin-bottom: var(--space-2);
  display: block;
}
.review-stars { color: var(--color-accent-dark); letter-spacing: 2px; margin-bottom: var(--space-3); font-size: 0.9rem; }
.review-title { font-size: var(--text-ui); margin: 0 0 var(--space-2); color: var(--color-ink); }
.review-text { font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; color: var(--color-ink); margin: 0; max-height: 6.6em; overflow: hidden; }
.review-text.is-expanded { max-height: none; }
.review-more { align-self: flex-start; margin-top: var(--space-2); background: none; border: 0; color: var(--color-accent-dark); font-size: var(--text-caption); font-weight: 700; cursor: pointer; padding: 0; }
.review-more:hover { color: var(--color-ink); }
.review-attribution { margin: var(--space-4) 0 0; font-size: var(--text-caption); font-style: normal; color: var(--color-ink-soft); }
.reviews-slider-nav-row { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); max-width: 640px; }
.reviews-slider-nav { flex-shrink: 0; background: none; border: 1px solid var(--color-rule); border-radius: 50%; width: 36px; height: 36px; font-size: 1.3rem; color: var(--color-ink-soft); cursor: pointer; }
.reviews-slider-nav:hover { border-color: var(--color-accent-dark); color: var(--color-accent-dark); }

.unit-gallery { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
.unit-gallery button, .unit-gallery a { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; min-width: 0; }
.unit-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.unit-gallery-feature { aspect-ratio: 4 / 3; min-width: 0; }
.unit-gallery-thumbs { display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--space-3); min-width: 0; }
.unit-gallery-thumbs button, .unit-gallery-thumbs a { aspect-ratio: 4 / 3; }
.unit-gallery button:focus-visible, .unit-gallery a:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
@media (max-width: 640px) {
  .unit-gallery { grid-template-columns: 1fr; }
  .unit-gallery-thumbs { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}

/* Wohnungs-Unterseiten: zweispaltiges Layout unter der Galerie statt eines einzelnen
   langen Absatzes -- Fließtext links, strukturierte Ausstattungsliste rechts (Nutzer-
   Feedback: "noch ungeordnet"). */
.unit-detail-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); margin-top: var(--space-6); align-items: start; }
.unit-detail-body .unit-desc { max-width: none; }
.unit-facts-box { border-top: 1px solid var(--color-rule); padding-top: var(--space-5); }
.unit-reviews { border-top: 1px solid var(--color-rule); margin-top: var(--space-8); padding-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); max-width: 640px; }
.unit-reviews:empty { display: none; }
.unit-facts-box h2 { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 1px; color: var(--color-ink-soft); margin-bottom: var(--space-4); }
.unit-facts { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.unit-facts li { position: relative; padding-left: var(--space-4); margin-bottom: var(--space-3); color: var(--color-ink-soft); font-size: var(--text-body-sm); }
.unit-facts li::before { content: "\2013"; position: absolute; left: 0; color: var(--color-accent-dark); }
@media (max-width: 720px) {
  .unit-detail-body { grid-template-columns: 1fr; }
  .unit-facts-box { border-top: none; padding-top: 0; }
}

.unit-name { color: var(--color-ink); margin-bottom: 4px; }
/* 2026-07-29: stand vorher rechts neben dem <h1> ("oben rechts") -- Nutzer wollte es
   stattdessen direkt über den Zitaten, damit der Zusammenhang klar ist (siehe
   .unit-reviews, wo es jetzt im Markup unmittelbar davor steht). Fund beim Umbau: eine
   alte, komplett unbenutzte .unit-row-Regel (frühere Listen-Darstellung der Wohnungen,
   lange durch das Teaser-Grid ersetzt) setzte über denselben Klassennamen
   `text-align: right` auf .unit-score -- das war der eigentliche Grund für die falsche
   Position, nicht das Markup selbst. Toter Code jetzt entfernt. */
.unit-score[hidden] { display: none; }
.unit-score { font-family: var(--font-heading); font-style: italic; color: var(--color-accent-dark); font-size: 1.05rem; margin-bottom: var(--space-3); }
.unit-desc { color: var(--color-ink-soft); font-size: var(--text-body-sm); max-width: 380px; }

/* Team */
/* Bild deutlich größer als Text-Block (vorher 108px-Quadrat neben mehreren Zeilen
   Bio-Text -- unproportioniert, siehe CLAUDE.md). Jetzt Bild oben, volle Spaltenbreite,
   Text darunter -- Bildgewicht passt zur Bio-Textmenge. */
.team-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7); max-width: 720px; }
.team-entry { display: flex; flex-direction: column; gap: var(--space-4); }
.team-plate { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.team-entry h3 { margin-bottom: 2px; }
.team-role { font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-accent-dark); margin-bottom: var(--space-2); }
.team-bio { font-size: var(--text-body-sm); color: var(--color-ink-soft); margin: 0; }

/* Historie */
.historie-lede { font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; color: var(--color-ink); line-height: 1.5; max-width: 560px; }
.historie p { max-width: 560px; }
.historie-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-6); max-width: 720px; }
.historie-gallery button, .historie-gallery a { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; height: 100%; }
.historie-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.historie-gallery button:first-child, .historie-gallery a:first-child { grid-column: 1 / -1; }
.historie-gallery button:first-child img, .historie-gallery a:first-child img { aspect-ratio: 16 / 7; }
.historie-gallery button:focus-visible, .historie-gallery a:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }

/* Lightbox: seit 2026-07-29 GLightbox (vendor/glightbox/glightbox.min.css), die
   eigene CSS-Lösung wurde ersatzlos entfernt -- Standard-GLightbox-Optik, keine
   eigenen Overrides bisher nötig. */

/* Verfügbarkeit */
.availability-note { max-width: 520px; margin-bottom: var(--space-6); }
/* [hidden] muss explizit vor der eigenen display:flex-Regel stehen -- sonst gewinnt
   die Klassenregel (gleiche Spezifität, aber später im Stylesheet) gegen das
   hidden-Attribut, und die Box bleibt trotz hidden=true sichtbar (echter Bug,
   gefunden beim Verifizieren des Verfügbarkeitskalenders). */
.availability-plate[hidden] { display: none; }
.availability-plate {
  border: 1px solid var(--color-rule);
  padding: var(--space-6);
  max-width: 560px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.availability-plate span:first-child { font-family: var(--font-heading); font-style: italic; color: var(--color-ink); }
.availability-plate span:last-child { font-size: var(--text-caption); color: var(--color-ink-soft); text-align: right; }
.availability-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Verfügbarkeitsraster: ersetzt die Platzhalter-Plate per JS, sobald availability.php
   echte Daten liefert (siehe script.js) -- reine Anzeige, keine Buchungsfunktion.
   2026-07-29: von einem abstrakten 90-Tage-Zeitstrahl (vom Nutzer als "unübersichtlich"
   verworfen, siehe CLAUDE.md) auf echte Monats-Kalenderraster umgebaut -- zeigt
   Kalendertage statt eines schmalen Balkens, direkt lesbar statt interpretierbar. */
.availability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-7); max-width: 960px; margin-bottom: var(--space-6); }
.availability-unit { min-width: 0; }
.availability-unit h3 { font-size: var(--text-ui); margin-bottom: var(--space-2); }
.availability-next { font-family: var(--font-heading); font-style: italic; color: var(--color-ink); font-size: 1.05rem; margin: 0 0 var(--space-4); }
.availability-legend { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--color-ink-soft); margin-bottom: var(--space-5); }
.availability-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--color-paper-soft); border: 1px solid var(--color-rule); margin-left: var(--space-3); }
.availability-legend-swatch:first-child { margin-left: 0; }
.availability-legend-swatch.is-booked { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
/* Scrollkalender, vierter Anlauf: einfache ‹/›-Pfeiltasten statt eines Textbuttons --
   Nutzer wollte schlicht vor/zurück, kein "Nächster Monat"-Label. Vorheriger Monat ist
   bei offset<=0 deaktiviert (nicht vor den aktuellen Monat zurück), Nächster bei
   MAX_MONTH_OFFSET. Siehe CLAUDE.md. */
.availability-calendars { min-width: 0; max-width: 260px; }
.availability-month-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.availability-month-label { flex: 1; text-align: center; font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); }
.availability-month-nav { background: none; border: 1px solid var(--color-rule); border-radius: 3px; width: 26px; height: 26px; font-size: 1rem; line-height: 1; color: var(--color-ink); cursor: pointer; }
.availability-month-nav:hover:not(:disabled) { border-color: var(--color-accent-dark); color: var(--color-accent-dark); }
.availability-month-nav:disabled { opacity: 0.3; cursor: default; }
.availability-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.availability-weekday { font-size: 0.62rem; color: var(--color-ink-soft); text-align: center; opacity: 0.7; }
.availability-day-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; border-radius: 3px; color: var(--color-ink); }
.availability-day-cell.is-empty { visibility: hidden; }
.availability-day-cell.is-past { opacity: 0.35; }
.availability-day-cell.is-booked { background: var(--color-accent-dark); color: var(--color-paper); opacity: 1; }
.availability-day-cell.is-past.is-booked { opacity: 0.5; }
.availability-day-cell.is-today { border: 1px solid var(--color-ink); font-weight: 700; }

/* Kontakt */
.contact-list { max-width: 480px; }
.contact-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-rule); }
.contact-row:last-child { border-bottom: 1px solid var(--color-rule); }
.contact-label { font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-ink-soft); padding-top: 2px; }
.contact-value { color: var(--color-ink); }
.contact-value a { color: var(--color-ink); text-decoration: none; }
.contact-value a:hover { color: var(--color-accent-dark); }

/* Karriere */
.job-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-7); max-width: 860px; }
.job-list { list-style: none; margin: 0; padding: 0; }
.job-list li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-body-sm);
}
.job-list li::before { content: "\2013"; position: absolute; left: 0; color: var(--color-accent-dark); }
.job-cta { max-width: 520px; margin-bottom: var(--space-5); }

/* Footer -- Auffrischung 2026-07-28: dünne Akzentlinie oben (dunkler Farbton, den
   Alice präsenter sehen wollte, bekommt hier mehr Gewicht) + Icon-Links zu Instagram/
   Google Maps/booking.com, angeregt von einer Referenzseite, aber eigenständig
   umgesetzt (generische Icons, nicht die fremden Markenlogos). */
.site-footer { background: var(--color-ink); color: var(--color-onink-primary); border-top: 2px solid var(--color-accent); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-6); flex-wrap: wrap; }
/* Logo hat native Farben (grüne Schreibschrift, dunkle Konturschrift), die auf der
   dunklen Fußzeile nicht funktionieren -- wie bei den Schwesterprojekten (siehe
   bueroservice-teuchern.de/CLAUDE.md) auf Volltonweiß gezwungen. */
.footer-brand .brand-script { color: var(--color-paper); }
.footer-brand .brand-tagline { color: var(--color-onink-secondary); }
.footer-brand p { font-size: 0.86rem; color: var(--color-onink-secondary); margin-top: var(--space-3); max-width: 260px; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-icon { width: 36px; height: 36px; border: 1px solid rgba(246, 242, 233, 0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-onink-primary); transition: border-color 0.15s ease, color 0.15s ease; }
.footer-icon svg { width: 17px; height: 17px; }
.footer-icon:hover { border-color: var(--color-accent); color: var(--color-accent); }
.footer-links { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.footer-links h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-onink-secondary); margin-bottom: var(--space-3); font-family: var(--font-body); }
.footer-links a { display: block; color: var(--color-onink-primary); text-decoration: none; font-size: var(--text-body-sm); margin-bottom: var(--space-2); }
.footer-links a:hover { color: var(--color-paper); }
.footer-bottom { border-top: 1px solid rgba(246, 242, 233, 0.14); padding-top: var(--space-4); padding-bottom: var(--space-4); display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--color-onink-secondary); }
.footer-bottom a { color: var(--color-onink-secondary); text-decoration: none; }
.footer-bottom a:hover { color: var(--color-paper); }

/* Legal pages */
.legal-page { padding: var(--space-8) 0; }
.legal-page h1 { margin-bottom: var(--space-6); }
.legal-text { margin-bottom: var(--space-5); max-width: 620px; color: var(--color-ink-soft); }

@media (max-width: 860px) {
  .chapter { grid-template-columns: 1fr; gap: var(--space-4); }
  .chapter-rail { display: flex; align-items: baseline; gap: var(--space-3); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-plate { max-width: 320px; }
  .floating-back { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--color-ink); border-radius: 1px; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-rule);
    padding: var(--space-5) var(--space-6) var(--space-6);
  }
  .main-nav.is-open { display: flex; }
  .team-list { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; }
}
@media (max-width: 560px) {
  .chapter { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .hero { padding: var(--space-7) 0 var(--space-6); }
  .header-inner { padding: var(--space-3) var(--space-5); }
  .contact-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .historie-preview { grid-template-columns: 1fr; }
  .historie-preview .plate { max-width: 220px; }
}