/* Theme oase für Landhotel Zur Oase. Übernommen aus der Astro-Fassung (site/src/styles), Komponenten auf Klassen umgestellt */
/*
  Designgrundlagen Landhotel Zur Oase
  Farbtöne wie im alten Design, Helligkeit für WCAG 2.2 AA angepasst.
  Kontrastwerte siehe docs/phase-4-design.md
*/
:root {
  /* Farben */
  --farbe-text: #6b6156;            /* alt #9E9386 – 6,05:1 auf Weiß, 4,66:1 auf Fußzeile */
  --farbe-oliv: #5b6420;            /* alt #8C9B32 – Menü, Zwischenüberschriften, Links. 6,39:1 auf Weiß */
  --farbe-gold-schrift: #af8316;    /* alt #E7B63D – nur große Überschriften ab 24 px. 3,45:1 auf Weiß */
  --farbe-gold-deko: #e7b63d;       /* Originalgold, nur Schmuck ohne Informationsgehalt */
  --farbe-dunkel: #2e2a24;          /* Fokusrahmen, starke Betonung */
  --farbe-hintergrund: #ffffff;
  --farbe-seitenleiste: #f4f4ea;
  --farbe-fusszeile: #e8e2cc;
  --farbe-menue-aktiv: rgba(106, 86, 31, 0.15);
  --farbe-linie: #e8e2cc;

  /* Schriften: freie Nachfolger von P22 Underground und Jubilat, lokal gehostet */
  --schrift-text: 'Cabin Variable', 'Gill Sans', 'Trebuchet MS', system-ui, sans-serif;
  --schrift-titel: 'Aleo Variable', 'Rockwell', Georgia, serif;

  /* Schriftgrößen, fließend zwischen 320 und 1440 px */
  --groesse-text: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);   /* 18–21 px */
  --groesse-klein: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);      /* 16–17 px */
  --groesse-h1: clamp(2rem, 1.55rem + 2vw, 2.625rem);             /* 32–42 px */
  --groesse-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);         /* 28–38 px */
  --groesse-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);          /* 17–20 px */
  --zeilenhoehe: 1.75;

  /* Abstände */
  --abstand-1: 0.5rem;
  --abstand-2: 1rem;
  --abstand-3: 1.5rem;
  --abstand-4: 2.5rem;
  --abstand-5: 4rem;
  --abstand-6: 5.5rem;

  /* Maße */
  --breite-seitenleiste: 18.75rem;  /* 300 px wie bisher */
  --breite-inhalt: 64rem;
  --breite-text: 42em;              /* gut lesbare Zeilenlänge */
  --fokus: 3px solid var(--farbe-dunkel);
  --radius: 0.25rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--abstand-2);
}

/* Solange die Kopfzeile mobil oben stehen bleibt: Sprungziele und Fokus nicht verdecken (WCAG 2.4.11) */
@media (max-width: 59.99em) and (min-height: 34em) {
  html {
    scroll-padding-top: 5.5rem;
  }
}

/* Weiches Scrollen nur, wenn keine reduzierte Bewegung gewünscht ist */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: var(--zeilenhoehe);
  color: var(--farbe-text);
  background-color: var(--farbe-hintergrund);
  /* Feine Papierstruktur wie bisher, als SVG ohne fremde Bilddatei. Maximal 4 % Abdunklung */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--farbe-oliv);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Zielmarke für den Sprunglink nicht hervorheben */
main:focus {
  outline: none;
}

h1,
h2 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  color: var(--farbe-gold-schrift);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 var(--abstand-3);
}

h1 {
  font-size: var(--groesse-h1);
}

h2 {
  font-size: var(--groesse-h2);
}

h3 {
  font-family: var(--schrift-text);
  font-size: var(--groesse-h3);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--farbe-oliv);
  text-align: center;
  text-wrap: balance;
  margin: var(--abstand-4) 0 var(--abstand-2);
}

p {
  margin: 0 0 1.4em;
}

/* Deutsche Silbentrennung, damit lange Wörter auch bei 320 px und großer Schrift passen */
h1,
h2,
h3,
p,
li,
td,
th {
  hyphens: auto;
  -webkit-hyphens: auto;
}

ul {
  padding: 0;
}

address {
  font-style: normal;
}

/* Fließtext zentriert wie bisher, aber mit begrenzter Zeilenlänge */
.text {
  max-width: var(--breite-text);
  margin-inline: auto;
  text-align: center;
}

.visuell-versteckt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink: sichtbar, sobald er den Fokus bekommt */
.sprunglink {
  position: absolute;
  z-index: 100;
  left: var(--abstand-2);
  top: var(--abstand-2);
  transform: translateY(-200%);
  padding: 0.75rem 1.25rem;
  background: var(--farbe-dunkel);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.sprunglink:focus {
  transform: none;
  outline-color: var(--farbe-gold-deko);
}

/* Platzhalter für fehlende Angaben. Vor dem Livegang darf keiner mehr existieren (Suche nach data-offen) */
.offen {
  background: #fff3c4;
  color: var(--farbe-dunkel);
  padding: 0 0.25em;
  border-bottom: 2px dashed #8a6a00;
}

/* Hinweis auf Entwurfsstand. Vor dem Livegang entfernen */
.entwurf {
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-2) var(--abstand-3);
  border: 2px dashed var(--farbe-oliv);
  border-radius: var(--radius);
  background: var(--farbe-seitenleiste);
  font-size: var(--groesse-klein);
  color: var(--farbe-dunkel);
  text-align: left;
}

/* Rechtstexte: linksbündig für bessere Lesbarkeit langer Absätze */
.rechtstext h2 {
  font-size: var(--groesse-h3);
  font-family: var(--schrift-text);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-oliv);
  text-align: left;
  margin-top: var(--abstand-4);
}

.rechtstext h3 {
  font-size: var(--groesse-klein);
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: left;
  font-weight: 600;
  margin: var(--abstand-3) 0 var(--abstand-1);
}

.rechtstext p,
.rechtstext address,
.rechtstext li {
  text-align: left;
}

.rechtstext ul {
  padding-left: 1.25em;
}

/* Schmucklinie in Originalgold, rein dekorativ */
.zierlinie {
  width: 4rem;
  height: 2px;
  margin: 0 auto var(--abstand-3);
  background: var(--farbe-gold-deko);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Layout ===== */
.rahmen {
  min-height: 100vh;
}

@media (min-width: 60em) {
  .hauptbereich {
    margin-left: var(--breite-seitenleiste);
  }
}

/* ===== Seitenleiste ===== */
.seitenleiste {
  background-color: var(--farbe-seitenleiste);
  border-bottom: 1px solid var(--farbe-linie);
}

.seitenleiste .kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
  padding: var(--abstand-1) var(--abstand-2);
}

.seitenleiste .logo {
  display: block;
  width: 6.5rem;
  border-radius: var(--radius);
}

.menueknopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: var(--groesse-klein);
  font-weight: 600;
  color: var(--farbe-oliv);
  background: #fff;
  border: 2px solid var(--farbe-oliv);
  border-radius: var(--radius);
  cursor: pointer;
}

.menueknopf[aria-expanded="true"] {
  background: var(--farbe-oliv);
  color: #fff;
}

/* Mobil: Menü zugeklappt, bis der Knopf es öffnet */
@media (max-width: 59.99em) {
  #hauptmenue {
    display: none;
  }

  .seitenleiste.offen #hauptmenue {
    display: block;
  }
}

.seitenleiste nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--abstand-1);
}

.seitenleiste nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem var(--abstand-2);
  color: var(--farbe-oliv);
  font-weight: 500;
  text-decoration: none;
  text-align: center;
}

.seitenleiste nav a:hover {
  text-decoration: underline;
}

.seitenleiste nav a[aria-current] {
  background: var(--farbe-menue-aktiv);
  box-shadow: inset 0 0 0.35rem rgba(0, 0, 0, 0.12);
  color: var(--farbe-dunkel);
}

.seitenleiste nav a:focus-visible {
  outline-offset: -3px;
}

.seitenleiste .kornfeld {
  display: none;
}

/* Kopfzeile bleibt oben, solange der Bildschirm hoch genug ist (nicht bei starker Vergrößerung) */
@media (max-width: 59.99em) and (min-height: 34em) {
  .seitenleiste {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

/* Ab 960 px: feste Seitenleiste wie im bisherigen Design */
@media (min-width: 60em) {
  .seitenleiste {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--breite-seitenleiste);
    overflow-y: auto;
    border-bottom: 0;
    display: flex;
    flex-direction: column;
    box-shadow: inset -0.6rem 0 0.8rem -0.6rem rgba(0, 0, 0, 0.12);
  }

  .seitenleiste .kopf {
    display: block;
    padding: var(--abstand-3) var(--abstand-3) var(--abstand-5);
  }

  .menueknopf {
    display: none;
  }

  .seitenleiste .logo {
    width: 13.5rem;
    margin-inline: auto;
  }

  .seitenleiste nav ul {
    padding: 0;
  }

  .seitenleiste nav a {
    font-size: var(--groesse-klein);
  }

  /* Dekoratives Bild am unteren Rand, im normalen Fluss: überlagert das Menü nie */
  .seitenleiste .kornfeld {
    display: block;
    width: 100%;
    margin-top: auto;
    padding-top: var(--abstand-4);
  }
}

/* ===== Fußzeile ===== */
.fusszeile {
  padding: var(--abstand-4) var(--abstand-3);
  background: var(--farbe-fusszeile);
  font-size: var(--groesse-klein);
  text-align: center;
}

.fusszeile address {
  margin-bottom: var(--abstand-2);
}

.fusszeile ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--abstand-3);
  list-style: none;
  margin: 0;
}

.fusszeile a {
  display: inline-block;
  padding-block: 0.6rem;
}

.fusszeile address a {
  padding-block: 0.35rem;
}

/* ===== Abschnitte ===== */
.abschnitt {
  padding: var(--abstand-5) var(--abstand-2) var(--abstand-6);
}

.abschnitt + .abschnitt {
  border-top: 1px solid var(--farbe-linie);
}

.abschnitt .innen {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
}

.abschnitt.schmal .innen {
  max-width: var(--breite-text);
}

@media (min-width: 40em) {
  .abschnitt {
    padding-inline: var(--abstand-4);
  }
}

/* ===== Karte (Zwei-Klick-Lösung) ===== */
.karte {
  max-width: 48rem;
  margin: var(--abstand-4) auto 0;
  background: var(--farbe-seitenleiste);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}

.karte .karte-hinweis {
  padding: var(--abstand-3);
  text-align: center;
  font-size: var(--groesse-klein);
}

.karte .karte-titel {
  font-weight: 600;
  color: var(--farbe-dunkel);
  margin-bottom: var(--abstand-1);
}

.knopf {
  min-height: 2.75rem;
  padding: 0.6rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--farbe-oliv);
  border: 2px solid var(--farbe-oliv);
  border-radius: var(--radius);
  cursor: pointer;
}

.knopf:hover {
  background: var(--farbe-dunkel);
  border-color: var(--farbe-dunkel);
}

.karte .karte-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--abstand-3);
  margin: var(--abstand-2) 0 0;
}

.karte .karte-links a {
  display: inline-block;
  padding-block: 0.5rem;
}

.karte.geladen {
  aspect-ratio: 4 / 3;
}

.karte iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 40em) {
  .karte.geladen {
    aspect-ratio: 16 / 9;
  }
}

/* ===== Inhalte Startseite ===== */
.titelbild {
  width: 100%;
  margin-bottom: var(--abstand-4);
  border-radius: var(--radius);
}

.abstand-oben {
  margin-top: var(--abstand-5);
}

.logo-lutherweg {
  width: 13.75rem;
  margin: 0 auto var(--abstand-3);
}

.zentriert {
  margin: var(--abstand-4) auto var(--abstand-2);
}

.weiter a {
  display: inline-block;
  padding: 0.6rem 0;
  font-size: var(--groesse-h3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.dateien {
  list-style: none;
  margin: 0;
  text-align: center;
}

.dateien a {
  display: inline-block;
  padding: 0.5rem 0;
  font-weight: 500;
}

.dateiinfo {
  font-weight: 400;
}

.meldungen {
  list-style: none;
  max-width: var(--breite-text);
  margin: 0 auto;
}

.meldung {
  padding: var(--abstand-3);
  background: #fff;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  text-align: center;
}

.meldung + .meldung {
  margin-top: var(--abstand-3);
}

.meldung h3 {
  margin-top: 0;
}

.meldung .datum {
  font-size: var(--groesse-klein);
  margin-bottom: var(--abstand-2);
}

.meldung p:last-child {
  margin-bottom: 0;
}

.bildpaar {
  display: grid;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-3);
}

.bildpaar img {
  width: 100%;
  border-radius: var(--radius);
}

.zimmerkarten {
  display: grid;
  gap: var(--abstand-3);
  list-style: none;
  margin: 0 0 var(--abstand-4);
}

.zimmerkarte {
  background: #fff;
  box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
}

.zimmerkarte img {
  width: 100%;
}

.zimmerkarte h3 {
  margin: 0;
  padding: var(--abstand-3) var(--abstand-2);
}

.inhaltstabelle {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto var(--abstand-3);
  border-collapse: collapse;
}

.inhaltstabelle th,
.inhaltstabelle td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.inhaltstabelle th {
  font-weight: 500;
}

.inhaltstabelle td {
  text-align: right;
}

.preise td {
  white-space: nowrap;
}

.inhaltstabelle tr + tr {
  border-top: 1px solid var(--farbe-linie);
}

.kontaktadresse a {
  display: inline-block;
  padding-block: 0.3rem;
}

.preishinweis {
  font-size: var(--groesse-klein);
}

.gruss {
  margin-top: var(--abstand-3);
}

@media (min-width: 40em) {
  .bildpaar,
  .zimmerkarten {
    grid-template-columns: 1fr 1fr;
  }

  .inhaltstabelle th,
  .inhaltstabelle td {
    padding-inline: var(--abstand-2);
  }
}

/* ===== Inhaltsseiten ===== */
.kopfbild {
  width: 100%;
  margin-bottom: var(--abstand-4);
  border-radius: var(--radius);
}

.fehlerseite ul {
  list-style: none;
  margin: 0 auto;
}

.fehlerseite a {
  display: inline-block;
  padding-block: 0.4rem;
}

.biker {
  width: 18.75rem;
}