/* ==========================================================================
   Ferienwohnung Senjic
   Farbwelt aus den vorhandenen Fotos abgeleitet: Terrakotta-Fliesen,
   ockerfarbene Waende, Holz und die Pflanzen auf der Terrasse. Dadurch
   wirken die Aufnahmen von 2017 gewollt warm statt altmodisch.
   ========================================================================== */

/* Alle drei Dateien auf den tatsaechlich gebrauchten Zeichenvorrat gekuerzt:
   Latein, Latein-1, Latein erweitert A, Interpunktion, Waehrungszeichen und
   Pfeile. Bewusst grosszuegiger als die 149 Zeichen, die heute vorkommen,
   weil die Gastgeber Impressum und Datenschutz selbst pflegen und dort kein
   Zeichen fehlen darf. Zusammen 96 statt 250 Kilobyte.
   Die Schnitte Regular und Medium sind ersatzlos entfallen: Jede
   Literata-Regel in dieser Datei setzt Gewicht 600, die beiden wurden nie
   angefordert. */
@font-face { font-family:'Literata'; src:url('../fonts/literata-italic.woff2?v=2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Literata'; src:url('../fonts/literata-semibold.woff2?v=2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/manrope-var.woff2?v=2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap; }

:root {
  --creme:      #FBF8F3;
  --papier:     #FFFFFF;
  --sand:       #F2EBE0;
  --sand-tief:  #E8DECF;
  --tinte:      #2B231C;
  --tinte-weich:#5C5044;
  --gedaempft:  #8A7C6D;
  --ton:        #B0613C;
  --ton-tief:   #93492A;
  --ton-zart:   #F6E7DE;
  --salbei:     #7C8B5F;
  --salbei-zart:#EDF0E4;
  --linie:      rgba(43, 35, 28, 0.10);
  --linie-kraeftig: rgba(43, 35, 28, 0.18);
  --schatten:   0 1px 2px rgba(43,35,28,.04), 0 18px 40px -22px rgba(43,35,28,.22);
  --schatten-hoch: 0 2px 6px rgba(43,35,28,.05), 0 36px 70px -28px rgba(43,35,28,.30);
  --kurve:      cubic-bezier(0.32, 0.72, 0, 1);
  --rand:       22px;
  --spalte:     1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ton-tief); }

h1, h2, h3, h4 {
  font-family: 'Literata', Georgia, serif;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--tinte);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.spalte { width: min(100% - 2.5rem, var(--spalte)); margin-inline: auto; }
.spalte--schmal { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.abschnitt { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.abschnitt--sand { background: var(--sand); }
.abschnitt--papier { background: var(--papier); }

/* Auszeichnung ueber Ueberschriften */
.marke {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ton);
  margin-bottom: 1.1rem;
}
.vorspann {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--tinte-weich);
  max-width: 62ch;
  margin-top: 1.4rem;
}

/* --- Knoepfe ------------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.3rem 0.95rem 1.6rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: 'Manrope', sans-serif; font-size: 0.95rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background .45s var(--kurve), color .45s var(--kurve),
              border-color .45s var(--kurve), transform .3s var(--kurve);
}
.knopf:active { transform: scale(0.975); }
.knopf__kreis {
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); flex: 0 0 auto;
  transition: transform .45s var(--kurve), background .45s var(--kurve);
}
.knopf:hover .knopf__kreis { transform: translateX(3px); }
.knopf__kreis svg { width: 13px; height: 13px; }
.knopf--voll { background: var(--ton); color: #fff; }
.knopf--voll:hover { background: var(--ton-tief); }
.knopf--linie { background: transparent; color: var(--tinte); border-color: var(--linie-kraeftig); }
.knopf--linie .knopf__kreis { background: rgba(43,35,28,.07); }
.knopf--linie:hover { border-color: var(--tinte); background: rgba(43,35,28,.04); }
.knopf--hell { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.34); backdrop-filter: blur(8px); }
.knopf--hell:hover { background: rgba(255,255,255,.24); }

/* --- Kopfleiste --------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251, 248, 243, 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .5s var(--kurve), background .5s var(--kurve);
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf__innen { display: flex; align-items: center; gap: 1.5rem; padding: 0.9rem 0; }
.kopf__marke { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; }
.kopf__marke b { font-family: 'Literata', serif; font-size: 1.14rem; font-weight: 600; color: var(--tinte); letter-spacing: -0.01em; }
.kopf__marke span { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gedaempft); font-weight: 600; margin-top: 3px; }

.kopf__nav { display: flex; align-items: center; gap: 0.15rem; }
.kopf__nav a {
  position: relative; padding: 0.5rem 0.85rem; font-size: 0.925rem; font-weight: 500;
  color: var(--tinte-weich); text-decoration: none; border-radius: 999px;
  transition: color .35s var(--kurve), background .35s var(--kurve);
}
.kopf__nav a:hover { color: var(--tinte); background: rgba(43,35,28,.05); }
.kopf__nav a.ist-aktiv { color: var(--ton-tief); font-weight: 700; }
.kopf__tel {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-size: .925rem; font-weight: 700; color: var(--tinte);
  padding: .6rem 1.1rem; border: 1px solid var(--linie-kraeftig); border-radius: 999px;
  transition: border-color .4s var(--kurve), background .4s var(--kurve);
}
.kopf__tel:hover { border-color: var(--ton); background: var(--ton-zart); }
.kopf__tel svg { width: 14px; height: 14px; }

.kopf__schalter {
  display: none; width: 42px; height: 42px; border: 1px solid var(--linie-kraeftig);
  border-radius: 999px; background: transparent; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.kopf__schalter span {
  display: block; width: 16px; height: 1.5px; background: var(--tinte); border-radius: 2px;
  transition: transform .5s var(--kurve), opacity .3s var(--kurve);
}
/* Die beiden aeusseren Balken muessen auf den Mittelpunkt des mittleren
   wandern, bevor sie sich drehen. Bei 1,5px Hoehe und 5px Abstand sind das
   6,5px, nicht die Haelfte davon. Sonst kreuzen sie sich versetzt. */
.ist-offen .kopf__schalter span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ist-offen .kopf__schalter span:nth-child(2) { opacity: 0; }
.ist-offen .kopf__schalter span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* --- Rufnummern -------------------------------------------------------------
   Beide Nummern stehen als eigene Schaltflächen nebeneinander. Die Bezeichnung
   darüber verhindert die Rückfrage, welche der beiden das Festnetz ist.
   -------------------------------------------------------------------------- */
/* Beide Nummern bleiben als Gruppe zusammen und brechen gemeinsam um,
   statt dass eine allein in die naechste Zeile rutscht. */
.rufnummern { display: inline-flex; flex-wrap: wrap; gap: .8rem; }
.knopf--nummer { padding: .7rem 1.15rem .7rem 1.05rem; gap: .6rem; }
.rufnummer__symbol { width: 15px; height: 15px; flex: 0 0 auto; opacity: .55; }
.knopf--nummer:hover .rufnummer__symbol { opacity: 1; }
.rufnummer { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.rufnummer small {
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .62; margin-bottom: 2px;
}
.knopf--hell .rufnummer small { opacity: .78; }

/* In der Fußzeile reicht ein dezenter Zusatz hinter der Nummer. */
.fuss__zusatz { font-size: .74rem; color: var(--gedaempft); margin-left: .4rem; }

/* Nummern im aufgeklappten Menü: nur auf schmalen Bildschirmen sichtbar. */
.kopf__nummern { display: none; }
.kopf__nummern a {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .8rem .4rem; font-size: 1.02rem; font-weight: 700;
  color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie);
}
.kopf__nummern a small {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gedaempft);
}

/* --- Startbereich ---------------------------------------------------------
   Geteilter Aufbau statt vollflaechigem Bild. Grund ist die Bildlage: Die
   schoensten Aufnahmen liegen nur in kleiner Aufloesung vor. In einer
   begrenzten Flaeche bleiben sie scharf, vollflaechig waeren sie weich.
   -------------------------------------------------------------------------- */
.start { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem); overflow: hidden; }
.start__innen {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.start__text h1 { margin-top: .3rem; }
.start__text h1 em { font-style: italic; font-weight: 400; color: var(--ton); }
.start__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.start__fakten {
  display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 2.8rem;
  padding-top: 1.7rem; border-top: 1px solid var(--linie);
}
.start__fakt b {
  display: block; font-family: 'Literata', Georgia, serif;
  font-size: 1.32rem; font-weight: 600; color: var(--tinte);
}
.start__fakt span {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gedaempft); font-weight: 700;
}

/* Bildgruppe: grosse Aufnahme, davor versetzt die zweite. */
.start__bilder { position: relative; padding-bottom: 3.5rem; padding-left: 2.5rem; }
.start__gross, .start__klein { margin: 0; border-radius: var(--rand); overflow: hidden; }
.start__gross {
  aspect-ratio: 4/3; box-shadow: var(--schatten-hoch);
  border: 8px solid var(--papier);
}
.start__gross img { width: 100%; height: 100%; object-fit: cover; }
.start__klein {
  position: absolute; left: 0; bottom: 0; width: 46%; max-width: 230px;
  aspect-ratio: 3/4; border: 7px solid var(--papier);
  box-shadow: var(--schatten-hoch); background: var(--sand);
}
.start__klein img { width: 100%; height: 100%; object-fit: cover; }
.start__marke {
  position: absolute; right: 0; top: -1.1rem;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 14px; padding: .8rem 1.1rem; box-shadow: var(--schatten);
  max-width: 200px;
}
.start__marke b {
  display: block; font-family: 'Literata', Georgia, serif;
  font-size: .95rem; font-weight: 600; color: var(--ton-tief);
}
.start__marke span { display: block; font-size: .78rem; color: var(--gedaempft); margin-top: .15rem; line-height: 1.45; }

/* --- Bilderstreifen -------------------------------------------------------- */
.streifen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 3rem; }
.streifen figure {
  margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3;
  background: var(--sand); box-shadow: var(--schatten);
}
.streifen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--kurve); }
.streifen figure:hover img { transform: scale(1.05); }
@media (max-width: 700px) { .streifen { grid-template-columns: repeat(2, 1fr); } }


/* --- Kopfbereich der Objektseiten -------------------------------------------
   Text links, Bildgruppe rechts: ein grosses Bild, daneben zwei kleinere
   uebereinander. Funktioniert mit Hoch- und Querformat gleichermassen, weil
   die Kacheln ein festes Seitenverhaeltnis haben und die Bilder darin
   zugeschnitten werden.
   -------------------------------------------------------------------------- */
.objektkopf { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
.objektkopf__innen {
  display: grid; grid-template-columns: 0.85fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
.objektkopf__text h1 { margin-top: .3rem; }
.objektkopf__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

/* Eckdaten als ruhige Reihe statt als Aufzaehlung. */
.eckdaten {
  display: grid; grid-template-columns: repeat(2, auto); gap: 1.3rem 2.4rem;
  justify-content: start; margin-top: 2.2rem; padding-top: 1.7rem;
  border-top: 1px solid var(--linie);
}
.eckdaten__wert b {
  display: block; font-family: 'Literata', Georgia, serif;
  font-size: 1.22rem; font-weight: 600; color: var(--tinte); line-height: 1.25;
}
.eckdaten__wert span {
  display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gedaempft); font-weight: 700; margin-top: .2rem;
}

/* Bildgruppe */
.objektkopf__bilder { display: grid; grid-template-columns: 1.55fr 1fr; gap: .9rem; }
.objektkopf__haupt, .objektkopf__paar figure {
  margin: 0; border-radius: 18px; overflow: hidden;
  background: var(--sand); box-shadow: var(--schatten);
}
.objektkopf__haupt { aspect-ratio: 3/4; }
.objektkopf__paar { display: grid; grid-template-rows: 1fr 1fr; gap: .9rem; }
.objektkopf__paar figure { aspect-ratio: 1/1; }
.objektkopf__bilder img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--kurve); }
.objektkopf__haupt:hover img, .objektkopf__paar figure:hover img { transform: scale(1.04); }

/* --- Unterkunfts-Karten ------------------------------------------------- */
.objekte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 3.4rem; }
.objekt {
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rand);
  padding: 10px; box-shadow: var(--schatten); overflow: hidden;
  transition: transform .6s var(--kurve), box-shadow .6s var(--kurve);
}
.objekt:hover { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }
.objekt__bild { border-radius: calc(var(--rand) - 10px); overflow: hidden; aspect-ratio: 4/3; background: var(--sand); }
.objekt__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--kurve); }
.objekt:hover .objekt__bild img { transform: scale(1.045); }
.objekt__text { padding: 1.7rem 1.3rem 1.3rem; }
.objekt__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.objekt__preis { font-family: 'Literata', serif; font-size: 1.05rem; font-weight: 600; color: var(--ton-tief); white-space: nowrap; }
.objekt__preis small { display: block; font-family: 'Manrope', sans-serif; font-size: .7rem; font-weight: 600; color: var(--gedaempft); letter-spacing: .04em; text-align: right; }
.objekt__kurz { color: var(--gedaempft); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-top: .5rem; }
.objekt__beschreibung { color: var(--tinte-weich); font-size: .98rem; margin-top: .9rem; }
.objekt__merkmale { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; padding: 0; list-style: none; }
.objekt__merkmale li {
  font-size: .78rem; font-weight: 600; color: var(--tinte-weich);
  background: var(--sand); border-radius: 999px; padding: .34rem .78rem;
}
.objekt__mehr {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem;
  font-size: .93rem; font-weight: 700; color: var(--ton-tief); text-decoration: none;
}
.objekt__mehr span { transition: transform .4s var(--kurve); }
.objekt:hover .objekt__mehr span { transform: translateX(4px); }

/* --- Zwei-Spalten-Block -------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.duo__bild { border-radius: var(--rand); overflow: hidden; box-shadow: var(--schatten); aspect-ratio: 4/3; }
.duo__bild img { width: 100%; height: 100%; object-fit: cover; }
.duo--gedreht .duo__text { order: 2; }

/* --- Entfernungen -------------------------------------------------------- */
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.6rem; }
.weg {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 16px;
  padding: 1.5rem 1.4rem; text-align: center;
}
.weg b { display: block; font-family: 'Literata', serif; font-size: 1.5rem; font-weight: 600; color: var(--ton-tief); }
.weg span { display: block; font-size: .88rem; color: var(--tinte-weich); margin-top: .4rem; font-weight: 500; }

/* --- Ausstattungsraster --------------------------------------------------- */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 3rem; }
/* Abweichende Spaltenzahl als Klasse statt als Stil am Element: Ein Stil direkt
   am Element schlaegt jede Medienabfrage und bliebe auf dem Handy stehen. */
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.kachel {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 16px; padding: 1.6rem 1.5rem;
  transition: border-color .5s var(--kurve), transform .5s var(--kurve);
}
.kachel:hover { border-color: var(--linie-kraeftig); transform: translateY(-3px); }
.kachel h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.kachel p { font-size: .93rem; color: var(--tinte-weich); }

/* --- Galerie -------------------------------------------------------------- */
/* Gewichtetes Raster: Aufnahmen mit hoher Aufloesung bekommen viel Flaeche,
   kleinere bleiben klein. Dadurch wirkt keine Aufnahme unscharf, obwohl die
   Vorlagen sehr unterschiedliche Groessen haben. */
.galerie { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; margin-top: 2.6rem; }
.galerie__feld { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: var(--sand); }
.galerie__feld--2 { grid-column: span 3; aspect-ratio: 4/3; }
.galerie__feld--1 { grid-column: span 2; aspect-ratio: 4/3; }

.galerie__knopf {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; position: relative;
}
.galerie__knopf img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--kurve); }
.galerie__feld:hover .galerie__knopf img { transform: scale(1.045); }

.galerie__lupe {
  position: absolute; top: .7rem; right: .7rem; width: 34px; height: 34px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.88); color: var(--tinte);
  opacity: 0; transform: scale(.9);
  transition: opacity .4s var(--kurve), transform .4s var(--kurve);
}
.galerie__lupe svg { width: 16px; height: 16px; }
.galerie__feld:hover .galerie__lupe, .galerie__knopf:focus-visible .galerie__lupe { opacity: 1; transform: none; }

.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .95rem .8rem;
  font-size: .82rem; font-weight: 600; color: #fff; pointer-events: none;
  background: linear-gradient(to top, rgba(28,22,17,.82), transparent);
}

/* --- Vergroesserte Ansicht ------------------------------------------------- */
.lupe {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(24, 19, 15, .93);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lupe[hidden] { display: none; }
.lupe__inhalt { margin: 0; max-width: min(100%, 1100px); max-height: 100%; display: flex; flex-direction: column; gap: .9rem; }
.lupe__bild {
  max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto;
  border-radius: 12px; object-fit: contain; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.lupe__text { color: rgba(255,255,255,.86); font-size: .92rem; text-align: center; }
.lupe__zu, .lupe__pfeil {
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s var(--kurve), border-color .3s var(--kurve);
}
.lupe__zu:hover, .lupe__pfeil:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.lupe__zu { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lupe__zu svg, .lupe__pfeil svg { width: 18px; height: 18px; }

/* --- Datenblatt ----------------------------------------------------------- */
.datenblatt { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--linie); }
.datenblatt li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--linie); font-size: .97rem; }
.datenblatt li span:first-child { color: var(--gedaempft); font-weight: 500; }
.datenblatt li span:last-child { font-weight: 700; text-align: right; }

/* --- Preistafel ----------------------------------------------------------- */
.preistafel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 3rem; }
.preiskarte {
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rand);
  padding: 2.2rem 2rem; box-shadow: var(--schatten);
}
.preiskarte h3 { font-size: 1.5rem; }
.preiskarte__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.preiskarte__zeile:last-of-type { border-bottom: 0; }
.preiskarte__zeile b { font-family: 'Literata', serif; font-size: 1.65rem; font-weight: 600; color: var(--ton-tief); white-space: nowrap; }
.preiskarte__zeile b small { font-family: 'Manrope', sans-serif; font-size: .72rem; color: var(--gedaempft); font-weight: 600; }
.preiskarte__hinweis { font-size: .88rem; color: var(--gedaempft); margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); }

/* --- Formular -------------------------------------------------------------- */
.formular { display: grid; gap: 1.1rem; margin-top: 2.4rem; }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.feld { display: flex; flex-direction: column; gap: .45rem; }
.feld label { font-size: .82rem; font-weight: 700; color: var(--tinte-weich); letter-spacing: .02em; }
.feld input, .feld select, .feld textarea {
  font-family: 'Manrope', sans-serif; font-size: 1rem; color: var(--tinte);
  padding: .9rem 1rem; border: 1px solid var(--linie-kraeftig); border-radius: 12px;
  background: var(--papier); transition: border-color .35s var(--kurve), box-shadow .35s var(--kurve);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--ton); box-shadow: 0 0 0 4px var(--ton-zart);
}
.feld textarea { resize: vertical; min-height: 130px; }
.feld--voll { grid-column: 1 / -1; }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; margin-top: .6rem; }
.formular__hinweis { font-size: .83rem; color: var(--gedaempft); max-width: 42ch; }
.honig { position: absolute; left: -9999px; }
.meldung { padding: 1.1rem 1.3rem; border-radius: 14px; font-size: .95rem; font-weight: 600; margin-bottom: 1.6rem; }
.meldung--gut { background: var(--salbei-zart); color: #465232; border: 1px solid #CBD8B4; }
.meldung--fehler { background: var(--ton-zart); color: var(--ton-tief); border: 1px solid #E8C4B2; }

/* --- Kontaktkarte ---------------------------------------------------------- */
.kontaktkarte { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rand); padding: 2rem; box-shadow: var(--schatten); }
.kontaktkarte dl { margin: 0; }
.kontaktkarte dt { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gedaempft); font-weight: 700; margin-top: 1.4rem; }
.kontaktkarte dt:first-child { margin-top: 0; }
.kontaktkarte dd { margin: .35rem 0 0; font-size: 1.02rem; font-weight: 600; }
.kontaktkarte dd a { color: var(--tinte); text-decoration: none; }
.kontaktkarte dd a:hover { color: var(--ton-tief); }

/* --- Umgebung ------------------------------------------------------------- */
.orte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
.ort { border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 3/4; box-shadow: var(--schatten); }
.ort img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--kurve); }
.ort:hover img { transform: scale(1.05); }
.ort__text { position: absolute; inset: auto 0 0 0; padding: 3rem 1.4rem 1.4rem; background: linear-gradient(to top, rgba(28,22,17,.88), transparent); color: #fff; }
.ort__text b { font-family: 'Literata', serif; font-size: 1.22rem; font-weight: 600; display: block; }
.ort__text span { font-size: .87rem; color: rgba(255,255,255,.82); display: block; margin-top: .3rem; }

/* --- Aufruf-Streifen -------------------------------------------------------- */
.aufruf { background: var(--tinte); color: #fff; border-radius: var(--rand); padding: clamp(2.6rem, 5vw, 4rem); text-align: center; }
.aufruf h2 { color: #fff; }
.aufruf p { color: rgba(255,255,255,.80); max-width: 52ch; margin-inline: auto; margin-top: 1.1rem; }
.aufruf__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.2rem; }

/* --- Fusszeile -------------------------------------------------------------- */
.fuss { background: var(--sand); border-top: 1px solid var(--linie); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.fuss__marke b { font-family: 'Literata', serif; font-size: 1.2rem; font-weight: 600; display: block; }
.fuss__marke p { font-size: .93rem; color: var(--tinte-weich); margin-top: .7rem; max-width: 34ch; }
.fuss h4 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gedaempft); font-family: 'Manrope', sans-serif; font-weight: 700; margin-bottom: .9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss a { color: var(--tinte-weich); text-decoration: none; font-size: .95rem; }
.fuss a:hover { color: var(--ton-tief); }
.fuss__unten {
  margin-top: 2.8rem; padding-top: 1.5rem; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .84rem; color: var(--gedaempft);
}

/* --- Einblenden beim Scrollen ------------------------------------------------ */
.hat-js .zeigt { opacity: 0; transform: translateY(26px); }
.zeigt.ist-da { opacity: 1; transform: none; transition: opacity .9s var(--kurve), transform .9s var(--kurve); }

/* --- Einfache Inhaltsseiten (Impressum, Datenschutz) -------------------------- */
.inhalt { font-size: 1.02rem; color: var(--tinte-weich); }
.inhalt h2 { font-size: 1.5rem; margin: 2.6rem 0 .9rem; color: var(--tinte); }
.inhalt h3 { font-size: 1.15rem; margin: 2rem 0 .6rem; color: var(--tinte); }
.inhalt ul { padding-left: 1.2rem; }
.inhalt li { margin-bottom: .4rem; }
.inhalt a { color: var(--ton-tief); }

/* --- Schmale Bildschirme ------------------------------------------------------ */
@media (max-width: 960px) {
  .objekte, .duo, .preistafel, .wege, .raster, .raster--3, .raster--4, .orte, .fuss__raster { grid-template-columns: 1fr; }
  .duo--gedreht .duo__text { order: 0; }
  .wege, .raster, .orte { gap: .9rem; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie__feld--2, .galerie__feld--1 { grid-column: span 2; }
  .lupe { gap: .4rem; padding: 1rem .6rem; }
  .lupe__pfeil { width: 40px; height: 40px; }
  .kopf__schalter { display: flex; }
  .kopf__nav {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--creme); padding: 1.2rem 1.5rem 2rem; gap: 0;
    border-bottom: 1px solid var(--linie); box-shadow: var(--schatten);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .45s var(--kurve), transform .45s var(--kurve), visibility .45s;
  }
  .ist-offen .kopf__nav { opacity: 1; visibility: visible; transform: none; }
  .kopf__nav a { padding: .85rem .4rem; font-size: 1.05rem; border-bottom: 1px solid var(--linie); border-radius: 0; }
  /* Auf dem Handy bleibt der Anruf-Knopf sichtbar, nur ohne Nummer.
     Wer abends unterwegs eine Unterkunft sucht, ruft eher an als zu tippen. */
  .kopf__nummern { display: block; padding-top: .6rem; }
  .kopf__tel { padding: .6rem; width: 42px; height: 42px; justify-content: center; font-size: 0; }
  .kopf__tel svg { width: 16px; height: 16px; }
  .feldpaar { grid-template-columns: 1fr; }
  .start__innen { grid-template-columns: 1fr; gap: 2.5rem; }
  .objektkopf__innen { grid-template-columns: 1fr; gap: 2.2rem; }
  .objektkopf__bilder { order: -1; }
  .eckdaten { grid-template-columns: repeat(2, 1fr); }
  /* Auf dem Handy stehen die kleine Aufnahme und das Schild nebeneinander
     unter dem grossen Bild. Vorher lag die Aufnahme absolut am Containerboden
     und deckte damit das Schild zu, sobald dieses in den Textfluss rutschte. */
  .start__bilder {
    order: -1; padding: 0;
    display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
    column-gap: 1rem;
  }
  .start__gross { grid-column: 1 / -1; }
  .start__klein {
    position: static; grid-column: 1; grid-row: 2;
    width: 100%; max-width: none; border-width: 5px;
    margin-top: -3.2rem; z-index: 2;
  }
  .start__marke {
    position: static; grid-column: 2; grid-row: 2;
    max-width: none; align-self: center; margin-top: .9rem;
  }
  .start__fakten { gap: 1.6rem; }
}
@media (max-width: 560px) {
  .spalte, .spalte--schmal { width: min(100% - 1.6rem, var(--spalte)); }
  .preiskarte, .kontaktkarte { padding: 1.6rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .zeigt { opacity: 1; transform: none; }
}

/* --- Brotkrumen ------------------------------------------------------------
   Dezente Pfadzeile ueber dem Seitenkopf. Sie zeigt dem Besucher, wo er
   gelandet ist, und liefert Google denselben Pfad, den die strukturierten
   Daten melden. Auf der Startseite erscheint sie nicht.
   -------------------------------------------------------------------------- */
.krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  font-size: .78rem; letter-spacing: .04em;
  color: var(--gedaempft);
}
.krumen a { color: var(--gedaempft); text-decoration: none; border-bottom: 1px solid transparent; }
.krumen a:hover { color: var(--ton-tief); border-bottom-color: var(--ton-tief); }
.krumen [aria-current="page"] { color: var(--tinte-weich); font-weight: 600; }
.krumen__trenner { opacity: .45; }

/* --- Haeufige Fragen -------------------------------------------------------
   Native details-Elemente statt eigenem Aufklappskript: Sie funktionieren
   ohne JavaScript, sind mit der Tastatur bedienbar, und der Text steht auch
   im zugeklappten Zustand im Quelltext, wird also von Google gelesen.
   -------------------------------------------------------------------------- */
.fragen { margin-top: 2.6rem; border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.4rem 1.15rem 0;
  position: relative; font-family: 'Literata', Georgia, serif;
  font-size: 1.05rem; font-weight: 600; color: var(--tinte);
  transition: color .25s var(--kurve);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--ton-tief); }
.frage summary:focus-visible { outline: 2px solid var(--ton); outline-offset: 3px; border-radius: 6px; }
.frage summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 1.8px solid var(--ton); border-bottom: 1.8px solid var(--ton);
  transform: rotate(45deg); transform-origin: 70% 70%;
  transition: transform .3s var(--kurve);
}
.frage[open] summary::after { transform: rotate(225deg); }
.frage__text { padding: 0 2.4rem 1.4rem 0; color: var(--tinte-weich); font-size: .97rem; }

/* Fliesstextabsaetze direkt unter einer Ueberschrift.
   Ueberschriften haben margin:0, damit die Abstaende in den Karten und
   Kacheln stimmen. Steht ein normaler Absatz darunter, klebte er bisher an
   der Grundlinie der Ueberschrift. Die Regel greift nur bei direkten Kindern
   der Spaltencontainer, also im Fliesstext, und nicht in den Kacheln. */
.spalte > h1 + p, .spalte > h2 + p, .spalte > h3 + p,
.spalte--schmal > h1 + p, .spalte--schmal > h2 + p, .spalte--schmal > h3 + p {
  margin-top: 1.4rem;
}