/* AllgäuBrise – Webseite (Oktober 2026)
   Farben aus dem Logo: Tannengrün, Gold, Seeblau. Keine fremden Schriften
   (Google Fonts wären ein Datenschutz-Thema) – Georgia für Überschriften,
   die Systemschrift für Text. */
:root {
  --gruen: #1f4a2e;
  --gruen-hell: #e9efe9;
  --salbei: #6d8170;
  --gold: #c9a35a;
  --blau: #4a86b5;
  --text: #2a2f2b;
  --grau: #6b7280;
  --hell: #f7f5f0;
  --weiss: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--weiss); color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--gruen); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--gruen); line-height: 1.2; }
.oberzeile { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--salbei); margin: 0 0 10px; }
.mitte { text-align: center; }
.breite { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.schmal { max-width: 760px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; }
.knopf {
  display: inline-block; padding: 13px 26px; border-radius: 2px; text-decoration: none;
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  background: var(--gruen); color: #fff; border: 1px solid var(--gruen); cursor: pointer;
}
.knopf.hell { background: #fff; color: var(--gruen); }
.knopf.gold { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 46px 40px 14px; transition: background .3s, box-shadow .3s, padding .3s;
}
.kopf.fest { background: linear-gradient(180deg, rgba(22,51,31,.92), rgba(22,51,31,.78)); box-shadow: 0 2px 14px rgba(0,0,0,.2); }
/* Beim Scrollen etwas kleiner, aber gut sichtbar (11.10.2026) */
.kopf.fest { padding: 26px 40px 10px; }
.kopf.fest .logo img { height: 100px; width: 100px; }
.menue-knopf { background: none; border: 0; color: #fff; font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; display: flex; align-items: center; gap: 10px; justify-self: start; }

.menue-knopf span.striche { display: inline-block; width: 22px; height: 14px; position: relative; }
.menue-knopf span.striche::before, .menue-knopf span.striche::after, .menue-knopf span.striche i {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.menue-knopf span.striche::before { top: 0; } .menue-knopf span.striche i { top: 6px; } .menue-knopf span.striche::after { bottom: 0; }
.kopf .logo img { height: 150px; width: 150px; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: height .3s, width .3s; }

.kopf .rechts { justify-self: end; display: flex; gap: 10px; }
.kopf .rechts .knopf { padding: 10px 18px; font-size: 13px; }
.kopf .rechts .knopf.hell { background: transparent; color: #fff; border-color: #fff; }

/* Menü-Ebene */
.menue { position: fixed; inset: 0; z-index: 60; background: var(--gruen); color: #fff;
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menue.offen { display: flex; }
.menue a { color: #fff; text-decoration: none; font-family: Georgia, serif; font-size: 30px; padding: 6px; }
.menue a:hover { color: var(--gold); }
.menue .zu { position: absolute; top: 20px; left: 24px; background: none; border: 0; color: #fff;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

/* ---------- Titelbild ---------- */
.titel { position: relative; height: 92vh; min-height: 560px; overflow: hidden; color: #fff; }
.titel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.titel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.55) 100%); }
.titel .inhalt { position: absolute; left: 0; right: 0; bottom: 150px; z-index: 2; text-align: center; padding: 0 20px; }
.titel h1 { color: #fff; font-size: clamp(38px, 6vw, 66px); margin: 0 0 10px; }
.titel p { margin: 0; font-size: 18px; letter-spacing: .06em; }
.bewertung { display: inline-block; margin-top: 16px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.7);
  font-size: 14px; letter-spacing: .05em; }

/* Buchungsleiste – fest am unteren Bildschirmrand, wie bei AllgäuStern (11.10.2026) */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(22, 51, 31, .94); backdrop-filter: blur(6px); box-shadow: 0 -4px 20px rgba(0,0,0,.18);
  display: flex; justify-content: center; align-items: stretch; gap: 0; padding: 10px 16px; }
.leiste label { display: block; padding: 4px 16px; color: #c9d4cb; border-right: 1px solid rgba(255,255,255,.15);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; min-width: 170px; }
.leiste input, .leiste select { display: block; width: 100%; border: 0; padding: 3px 0 0; font: inherit;
  font-size: 16px; color: #fff; background: transparent; letter-spacing: 0; text-transform: none; color-scheme: dark; }
.leiste select option { color: #000; }
.leiste .knopf { border-radius: 2px; padding: 0 30px; font-size: 14px; margin-left: 16px; }
.leiste .handy-knopf { display: none; }
.leiste label { cursor: pointer; }
.leiste input[readonly] { cursor: pointer; }
.leiste input::placeholder { color: #c9d4cb; }

/* Eigener Kalender – öffnet sich nach oben (11.10.2026) */
.kal { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 10px);
  width: min(760px, calc(100vw - 24px)); background: #fff; color: var(--text); box-shadow: 0 -10px 40px rgba(0,0,0,.28);
  padding: 20px 22px 16px; border-top: 4px solid var(--gold); }
.kal.offen { display: block; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px;
  font-family: Georgia, serif; font-size: 18px; color: var(--gruen); }
.kal-pfeil { background: var(--gruen-hell); border: 0; width: 44px; height: 44px; font-size: 26px; color: var(--gruen); cursor: pointer; border-radius: 50%; }
.kal-monate { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.kal-titel { text-align: center; font-weight: 600; margin-bottom: 8px; letter-spacing: .04em; }
.kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-wt { text-align: center; font-size: 12px; color: var(--grau); text-transform: uppercase; padding: 4px 0; }
.kal-tag { aspect-ratio: 1; border: 0; background: #fff; font: inherit; font-size: 16px; color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.kal-tag:hover { background: var(--gruen-hell); }
.kal-tag.aus { color: #c3c7c4; text-decoration: line-through; cursor: default; background: #fafafa; }
.kal-tag.zwischen { background: #e9efe9; }
.kal-tag.gewaehlt { background: var(--gruen); color: #fff; font-weight: 700; }
.kal-fuss { text-align: right; margin-top: 12px; }
.kal-fuss .knopf { padding: 9px 20px; }
body { padding-bottom: 76px; }

/* ---------- Einleitung ---------- */
.einleitung h2 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 20px; }
.einleitung .gross { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--salbei); margin-bottom: 24px; }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 50px; }
.kachel { position: relative; aspect-ratio: 3/4; overflow: hidden; display: block; color: #fff; text-decoration: none; }
.kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.kachel:hover img { transform: scale(1.05); }
.kachel span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 18px;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); font-family: Georgia, serif; font-size: 22px; text-align: center; }

/* Bild-Text im Wechsel */
.wechsel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.wechsel.links .bild { order: 2; }
.wechsel .bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.wechsel h2 { font-size: 36px; margin: 0 0 16px; }
.wechsel .mehr { display: inline-block; margin-top: 18px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.hintergrund { background: var(--hell); }

/* Ausstattung */
.ausstattung { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 30px; padding: 0; list-style: none; margin: 20px 0 0; }
.ausstattung li { padding-left: 30px; position: relative; }
.ausstattung li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 40px; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.galerie img:first-child { grid-column: span 2; grid-row: span 2; }
.gross-bild { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.9); display: none;
  align-items: center; justify-content: center; cursor: zoom-out; }
.gross-bild.offen { display: flex; }
.gross-bild img { max-height: 92vh; max-width: 94vw; }

/* Umgebung */
.umgebung { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px; }
.umgebung h3 { font-size: 22px; margin: 0 0 8px; }
.umgebung .zeichen { font-size: 30px; }

/* Warum */
.warum { background: var(--gruen); color: #fff; }
.warum h2 { color: #fff; font-size: 38px; }
.warum ul { list-style: none; padding: 0; margin: 30px auto; max-width: 620px; text-align: left; }
.warum li { padding: 10px 0 10px 36px; position: relative; border-bottom: 1px solid rgba(255,255,255,.15); }
.warum li::before { content: "★"; position: absolute; left: 4px; color: var(--gold); }

/* Stimmen */
.stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.stimme { background: #fff; padding: 30px; border-top: 3px solid var(--gold); }
.stimme p { font-family: Georgia, serif; font-style: italic; font-size: 18px; margin: 0 0 14px; }
.stimme span { color: var(--grau); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

/* Anreise */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.kasten { background: var(--hell); padding: 30px; }
.kasten h3 { margin-top: 0; }

/* Buchungsfenster */
.bf { position: fixed; inset: 0; z-index: 90; background: rgba(15,30,20,.6); display: none; overflow-y: auto; padding: 30px 14px; }
.bf.offen { display: block; }
.bf-inhalt { position: relative; max-width: 980px; margin: 0 auto; background: #fff; padding: 34px; border-top: 4px solid var(--gold); }
.bf-zu { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--grau); }
.bf-spalten { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: start; }
.bf label { display: block; font-size: 13px; letter-spacing: .04em; color: var(--grau); margin-bottom: 12px; flex: 1; }
.bf input:not([type=checkbox]), .bf select, .bf textarea { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; border: 1px solid #cfd6d0;
  font: inherit; font-size: 16px; color: var(--text); background: #fff; border-radius: 2px; }
.bf-reihe { display: flex; gap: 12px; }
.bf-haken { display: flex !important; gap: 10px; align-items: flex-start; font-size: 15px !important; color: var(--text) !important; letter-spacing: 0 !important; }
.bf-haken input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.bf-code { display: flex; gap: 0; margin-top: 4px; } .bf-code input { margin-top: 0 !important; } .bf-code .knopf { border-radius: 0; padding: 0 16px; }
.bf-zahlen { width: 100%; padding: 16px; margin-top: 6px; }
.bf-preis { background: var(--hell); padding: 24px; position: sticky; top: 0; }
.bf-preis h3 { margin: 0 0 14px; }
.bf-zeile { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #e3e0d8; }
.bf-zeile.gruen { color: #2e7d32; }
.bf-zeile.summe { font-weight: 700; font-size: 20px; border-bottom: 0; padding-top: 12px; color: var(--gruen); }

/* Newsletter */
.newsletter { background: var(--hell); }
.nl-form { display: flex; gap: 0; max-width: 520px; margin: 24px auto 12px; position: relative; }
.nl-form input[type=email] { flex: 1; padding: 13px 16px; border: 1px solid #cfd6d0; border-right: 0; font: inherit; font-size: 16px; }
.nl-form .knopf { border-radius: 0; }
.klein { font-size: 13px; color: var(--grau); }

/* Fuß */
.fuss { background: #16331f; color: #d8e0d9; padding: 60px 0 30px; font-size: 15px; }
.fuss a { color: #d8e0d9; text-decoration: none; }
.fuss a:hover { color: var(--gold); }
.fuss .spalten { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.fuss h4 { color: #fff; font-family: Georgia, serif; font-weight: 400; font-size: 20px; margin: 0 0 12px; }
.fuss .unten { border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding-top: 20px; font-size: 13px; color: #9fb0a3; }

/* Unterseiten (Rechtliches) */
.seite { padding: 270px 0 80px; }
/* Sprungziele nicht unter dem hohen Kopf verstecken */
section, #buchen { scroll-margin-top: 170px; }
.seite h1 { font-size: 40px; margin-top: 0; }
.seite h2 { font-size: 24px; margin-top: 34px; }

/* Hinweis für die Vorschau */
.vorschau-band { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--gold); color: #fff;
  text-align: center; font-size: 13px; padding: 6px; letter-spacing: .05em; }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .seite { padding-top: 200px; }
  section { scroll-margin-top: 130px; }
  section { padding: 56px 0; }
  .kopf { padding: 40px 16px 10px; }
  .kopf .logo img { height: 104px; width: 104px; }
  .kopf.fest { padding: 30px 16px 8px; }
  .kopf.fest .logo img { height: 72px; width: 72px; }
  .kopf .rechts .knopf.hell { display: none; }
  .menue-knopf .wort { display: none; }
  .titel { height: 88vh; }
  .titel .inhalt { bottom: 80px; }
  /* Am Handy: unten nur ein Knopf, die Felder klappen darüber auf */
  .leiste { flex-wrap: wrap; padding: 8px 10px; }
  .leiste label { display: none; min-width: 0; flex: 1 1 45%; border-right: 0; padding: 6px 8px; }
  .leiste.offen label { display: block; }
  .leiste .knopf { display: none; }
  .leiste.offen .knopf { display: block; flex: 1 1 100%; margin: 8px 0 0; padding: 13px; }
  .leiste .handy-knopf { display: block; flex: 1 1 100%; margin: 0; padding: 13px; }
  .bf-inhalt { padding: 26px 16px; }
  .bf-spalten { grid-template-columns: 1fr; }
  .bf-preis { order: -1; position: static; }
  .bf-reihe { flex-wrap: wrap; gap: 0 12px; }
  .kal { bottom: calc(100% + 6px); padding: 14px 12px 12px; }
  .kal-monate { grid-template-columns: 1fr; }
  .kal-tag { font-size: 17px; }
  .leiste.offen .handy-knopf { display: none; }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .wechsel, .zwei { grid-template-columns: 1fr; gap: 26px; }
  .wechsel.links .bild { order: 0; }
  .ausstattung { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .umgebung, .stimmen { grid-template-columns: 1fr; }
  .fuss .spalten { grid-template-columns: 1fr; gap: 26px; }
}

/* Handy ruckelfrei (14.10.2026): Kopf und Leiste als eigene Ebene, keine Größen-Animation,
   kein Weichzeichner, Titelbild springt nicht mit der Adressleiste */
.kopf, .leiste { transform: translateZ(0); }
@supports (height: 1svh) { .titel { height: 92svh; } }
@media (max-width: 860px) {
  @supports (height: 1svh) { .titel { height: 88svh; } }
  .kopf { transition: background .25s; }
  .kopf .logo img { transition: none; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
  .leiste { backdrop-filter: none; background: rgb(22, 51, 31); }
}

/* Titelbild Grünten (14.10.2026): am Handy den Sendeturm im Bild halten */
.titel img.titelbild { object-position: 50% 55%; }
@media (max-width: 860px) { .titel img.titelbild { object-position: 68% 50%; } }