/* ══ Eigene Schriften ══════════════════════════════════════════════════
   Alle Schnitte liegen auf unserem eigenen Server unter css/schriften/.
   Das ist kein Geschmacksurteil, sondern eine Zusage: Datenschutz- und
   Cookie-Seite sagen ausdrücklich, dass diese Website keine Schriften von
   außen nachlädt. Sobald hier wieder eine fremde Adresse steht, ist dieser
   Satz falsch. Nebeneffekt: Die Seite lädt schneller, weil keine zweite
   Verbindung aufgebaut werden muss.
   ⚠ NICHT WIEDER auf Google umstellen. Auch nicht „nur für eine Schrift".
   font-display:swap zeigt den Text sofort in einer Ersatzschrift, statt
   ihn unsichtbar zu lassen, bis die Datei da ist. */
@font-face{font-family:'Lora';src:url('schriften/lora-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('schriften/lora-medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('schriften/lora-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Montserrat';src:url('schriften/montserrat-light.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('schriften/montserrat-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('schriften/montserrat-medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('schriften/playfairdisplay-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('schriften/playfairdisplay-medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

/* Beach & Mountain Collection — Hausstil
   Farben und Schriften aus dem Logo abgeleitet. */

:root{
  --rust:#762d28;        /* Hausfarbe, aus der Logo-Vektordatei */
  --rust-dunkel:#5c221e;
  --cream:#fbf9f5;
  --sand:#f2ece3;
  --ink:#2b2320;
  --soft:#6b5f58;
  --line:#e2d9cc;
  --serif:'Playfair Display',Didot,Georgia,serif;
  --sans:'Montserrat','Avenir Next',Helvetica,Arial,sans-serif;
  --lese:'Lora',Georgia,'Times New Roman',serif;   /* nur für Mengentext */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;hyphens:manual;
}
img{max-width:100%;display:block}
a{color:var(--rust);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(28px,3.6vw,42px)}
h3{font-size:22px}
.eyebrow{font-family:var(--sans);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rust);font-weight:500;margin-bottom:14px}
.lead{font-size:19px;color:var(--soft)}
p{margin:0 0 20px}

/* ── Kopfzeile ───────────────────────────────────────────
   Zwei Stockwerke: großes Logo oben, Menü darunter.
   Beim Herunterscrollen schrumpft alles zu einer schmalen Leiste. */
header{position:sticky;top:0;z-index:60;background:rgba(251,249,245,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  transition:box-shadow .25s}
header.klein{box-shadow:0 2px 14px rgba(80,50,40,.07)}

.kopf-oben{display:flex;align-items:center;justify-content:center;position:relative;
  padding:22px 32px 14px;max-width:1180px;margin:0 auto;transition:padding .28s}
.kopf-oben .logo img{height:96px;width:auto;transition:height .28s}
header.klein .kopf-oben{padding:10px 32px 8px}
header.klein .kopf-oben .logo img{height:44px}

/* Sprachen sitzen rechts in der Menüleiste, eng nebeneinander */
.sprachen{position:absolute;right:32px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;font-size:11.5px;letter-spacing:.14em;line-height:1}
.sprachen a{color:var(--soft);padding:0 9px;position:relative}
.sprachen a:first-child{padding-left:0}
.sprachen a:last-child{padding-right:0}
.sprachen a+a::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:9px;background:var(--line)}
.sprachen a:hover{color:var(--rust)}
.sprachen a.aktiv{color:var(--rust);font-weight:500}

.kopf-unten{border-top:1px solid var(--line);position:relative}
header.klein .kopf-unten{border-top-color:transparent}
/* ⚠ Das Menue benutzt seit dem 01.09.2026 NICHT mehr die Hausschrift
   Montserrat, sondern eine schlichte Systemschrift, und die Spationierung
   ist weg. Zwei Gruende, beide von Aurora: Die Logoschrift als Menueschrift
   sieht nicht gut aus, und die weit auseinandergezogenen Grossbuchstaben
   verbrauchten so viel Breite, dass links kein Platz fuer den
   Buchen-Knopf war. Ohne Spationierung passt beides nebeneinander.
   Die Ueberschriften und der Fliesstext bleiben unberuehrt. */
nav{display:flex;align-items:stretch;justify-content:center;gap:0;
  margin:0 auto;padding:0 140px}
/* 01.09.2026, nachmittags: Aurora fand die Punkte in Verdana zu klein und
   zu eng. Jetzt 13px mit leichter Sperrung. Die Breite bleibt beherrschbar,
   weil der Innenabstand von 17 auf 14 px zurückgeht und das seitliche
   Polster von 150 auf 140 px. Gerechnet wurde mit dem längsten Menü, dem
   spanischen: rund 860 px Text in rund 900 px Platz. Wer den Schriftgrad
   weiter anhebt, muss das nachrechnen, sonst schiebt sich das Menü unter
   die Sprachwahl rechts. */
nav a{font-family:Verdana,Geneva,"DejaVu Sans",sans-serif;
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink);font-weight:400;padding:15px 14px;position:relative;transition:padding .28s}
header.klein nav a{padding:11px 13px}
/* Zwei Zwischenstufen, bevor bei 900 px das Hamburger-Menü übernimmt.
   Zwischen 900 und 1150 px wird der Platz knapp, und das längste Menü ist
   das spanische. Lieber dort etwas enger als ein Menü, das rechts unter
   die Sprachwahl rutscht. */
@media(max-width:1150px){
  nav{padding:0 120px}
  nav a{font-size:12.5px;letter-spacing:.03em;padding:15px 12px}
  header.klein nav a{padding:11px 11px}
}
@media(max-width:1020px){
  nav{padding:0 90px}
  nav a{font-size:12px;letter-spacing:0;padding:15px 10px}
  header.klein nav a{padding:11px 9px}
}
/* Trennstrich zwischen den Hauptpunkten. Muss auf der Ebene der direkten
   Kinder greifen, weil ein Punkt mit Untermenü in einem <span> steckt. */
nav>*+*::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:var(--line)}
nav>.hat-unter{position:relative;display:flex;align-items:center}
nav a:hover{color:var(--rust)}
nav a.aktiv{color:var(--rust)}
nav a.aktiv::after{content:"";position:absolute;left:26px;right:26px;bottom:9px;
  height:1px;background:var(--rust)}
/* „Jetzt buchen" ist ein normaler Menuepunkt — nur farbig, weil er als
   einziger nach draussen fuehrt. Als Menuepunkt statt als danebenstehender
   Knopf steht er am Handy auch im Hamburger-Menue, und genau darauf kam es
   Aurora an (01.09.2026). */
nav a.nav-buchen{color:var(--rust);font-weight:700}
nav a.nav-buchen:hover{color:var(--rust-dunkel)}
.knopf{display:inline-block;background:var(--rust);color:#fff;
  padding:12px 26px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;border:1px solid var(--rust);transition:.2s}
.knopf:hover{background:var(--rust-dunkel);border-color:var(--rust-dunkel)}
.knopf.hell{background:transparent;color:var(--rust)}
.knopf.hell:hover{background:var(--rust);color:#fff}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:24px;height:1.5px;background:var(--ink);margin:5px 0}

/* ── Hero ────────────────────────────────────────── */
.hero{position:relative;height:min(88vh,760px);overflow:hidden;background:var(--ink)}
/* Hero ohne Textebene: dann braucht es auch den dunklen Verlauf nicht,
   der sonst die Schrift lesbar macht. Übergangslösung für die
   Sóller-Seite, bis der Landschaftsfilm geschnitten ist. */
.hero-still{height:min(72vh,620px)}
.hero-still::after{display:none}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Verlauf nur von unten heraufziehend — die Farben oben im Bild bleiben unberührt */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74%;
  background:linear-gradient(180deg,rgba(18,12,10,0) 0%,rgba(18,12,10,.20) 42%,rgba(18,12,10,.60) 100%)}
/* Der Block sitzt deutlich höher als vorher, aber noch im tragenden Teil des Verlaufs */
.hero-inhalt{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;color:#fff;
  padding:0 32px clamp(96px,17vh,175px)}
/* Beide Zeilen teilen sich EIN Feld — sie liegen übereinander und wechseln
   einander ab, gleiche Höhe, ungefähr gleiche Breite. Die Höhe des Feldes
   richtet sich nach der größeren Zeile, damit die Knöpfe nicht springen. */
.hero-text{display:grid;place-items:center;width:100%}
.hero-text>.zeile{grid-area:1/1;margin:0;color:#fff;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease,transform .9s ease}
.hero-text>.zeile.da{opacity:1;transform:none;
  transition:opacity 1.5s ease,transform 1.7s ease}   /* langsam herein, zügig hinaus */
.hero-inhalt h1.zeile{font-weight:500;font-size:clamp(40px,6.4vw,80px);line-height:1.08;
  text-shadow:0 2px 30px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.45)}
/* Die Antwort in derselben Schrift, kleiner — läuft dadurch auf etwa dieselbe Breite */
.hero-inhalt p.zeile{font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.9vw,35px);line-height:1.22;max-width:38ch;
  text-shadow:0 2px 24px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.5)}

.hero-knoepfe{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}
.note{margin-right:9px;font-size:15px;line-height:1;position:relative;top:1px}
.knopf.weiss{background:#fff;color:var(--rust);border-color:#fff}
.knopf.rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.knopf.rand:hover{background:#fff;color:var(--rust);border-color:#fff}

/* ── Abschnitte ──────────────────────────────────── */
section{padding:96px 0}
section.sand{background:var(--sand)}
.mitte{text-align:center;max-width:760px;margin:0 auto}
.trenner{display:block;margin:0 auto 26px;width:150px;opacity:.55}

/* Bestpreis */
.versprechen{text-align:center;padding:104px 0}
.versprechen .mitte{max-width:790px}
.versprechen .lead{margin-bottom:26px;text-wrap:pretty}
.versprechen .lead.letzter{margin-bottom:0;color:var(--rust)}
.versprechen .zahl{font-family:var(--serif);font-size:clamp(30px,4vw,46px);color:var(--rust);
  margin-bottom:30px;line-height:1.18}

/* ── Auftakt unter dem Film ────────────────────────
   Große Frage, darunter beide Bilder als Antwort. */
.auftakt .lead.gross{font-family:var(--serif);font-size:clamp(21px,2.5vw,29px);
  color:var(--rust);margin-top:16px;line-height:1.3}
.paar-bilder{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:56px}
.paar-bilder img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;
  box-shadow:0 14px 34px rgba(90,60,45,.13),0 3px 8px rgba(90,60,45,.07)}
.paar-bilder img:last-child{transition-delay:.14s}
@media(max-width:760px){.paar-bilder{grid-template-columns:1fr;gap:22px}}

/* ── Objektarten ──────────────────────────────────
   Fünf quadratische Zeichnungen nebeneinander, abgerundete Ecken, weicher
   Schatten. Sie führen bewusst NICHT in die Buchungsmaschine — anklickbar
   sind sie nur, um die Zeichnung größer zu sehen. */
.arten{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:56px}
.arten figure{margin:0;text-align:center}
.arten .lupe{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.arten img{aspect-ratio:1/1;width:100%;object-fit:cover;background:#fdf8ef;
  border-radius:22px;box-shadow:0 10px 26px rgba(90,60,45,.10),0 2px 6px rgba(90,60,45,.06);
  transition:transform .3s ease,box-shadow .3s ease}
.arten .lupe:hover img{transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(90,60,45,.15),0 3px 8px rgba(90,60,45,.08)}
.arten figcaption{padding:20px 4px 0}
.arten h3{font-size:19px;margin-bottom:7px}
.arten p{font-size:14.5px;line-height:1.6;color:var(--soft);margin:0;text-wrap:pretty}
.arten figure:nth-child(2){transition-delay:.08s}
.arten figure:nth-child(3){transition-delay:.16s}
.arten figure:nth-child(4){transition-delay:.24s}
.arten figure:nth-child(5){transition-delay:.32s}
@media(max-width:1000px){.arten{grid-template-columns:repeat(3,1fr);row-gap:40px}}
@media(max-width:640px){.arten{grid-template-columns:repeat(2,1fr);gap:20px;row-gap:34px}
  .arten h3{font-size:17px}.arten p{font-size:13.5px}}

/* ── Sanftes Einblenden beim Scrollen (wie auf sollerrentals.com) ── */
.rv{opacity:0;transform:translateY(34px);
  transition:opacity .95s ease,transform .95s ease}
.rv.on{opacity:1;transform:none}

/* Gestaffelter Aufbau auf der Jahresseite. Die Seite besteht fast nur aus
   gleich aussehenden Karten; kommen die alle im selben Moment, wirkt es
   wie ein Umschalten und nicht wie ein Aufbauen. Deshalb bekommt hier
   jedes Geschwisterelement eine kleine Verzögerung mehr: erst die
   Einführung, dann der Wochenkasten, dann die Monate reihenweise. Das
   Hero-Blatt bleibt bewusst ohne Bewegung, wie auf allen Schwesterseiten,
   damit man beim Ankommen sofort ein Bild hat. */
.s-jahr .geschichte>.rv:nth-child(2){transition-delay:.14s}
.s-jahr .separator.rv{transition-delay:0s}
.s-jahr .monate article{transition-delay:0s}
.s-jahr .monate article:nth-child(3n+2){transition-delay:.1s}
.s-jahr .monate article:nth-child(3n){transition-delay:.2s}
@media(max-width:980px){
  .s-jahr .monate article:nth-child(3n+2),
  .s-jahr .monate article:nth-child(3n){transition-delay:0s}
  .s-jahr .monate article:nth-child(2n){transition-delay:.1s}
}
@media(max-width:640px){
  .s-jahr .monate article:nth-child(n){transition-delay:0s}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-text>.zeile{opacity:1;transform:none;transition:none}
}

/* Zwei Spalten */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.duo.rev>*:first-child{order:2}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* Paula */
.gastgeberin{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:center}
/* Der Bildausschnitt ist nach oben gerückt, weil das Standbild aus dem Film
   Paula tief und weit links zeigt. Ein echtes Porträt wäre hier deutlich besser. */
.gastgeberin img{aspect-ratio:1/1;object-fit:cover;object-position:44% 32%;
  width:100%;border-radius:50%;
  box-shadow:0 14px 34px rgba(90,60,45,.14),0 3px 8px rgba(90,60,45,.08)}
.gastgeberin .name{font-family:var(--serif);font-size:26px;color:var(--rust);margin-bottom:4px}
.gastgeberin .rolle{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:20px}

/* Vertrauen — drei gezeichnete Haken, deutlich größer als vorher */
.vertrauen{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:30px;text-align:center}
.vertrauen>div{background:var(--cream);border-radius:26px;padding:40px 26px 36px;
  box-shadow:0 10px 28px rgba(90,60,45,.08),0 2px 6px rgba(90,60,45,.05)}
.vertrauen>div:nth-child(2){transition-delay:.1s}
.vertrauen>div:nth-child(3){transition-delay:.2s}
.vertrauen>div:nth-child(4){transition-delay:.3s}
.haken{width:58px;height:58px;margin:0 auto 20px}
.vertrauen h3{font-size:21px;margin-bottom:12px}
.vertrauen p{font-size:15.5px;line-height:1.65;color:var(--soft);margin:0;text-wrap:pretty}
@media(max-width:860px){.vertrauen{grid-template-columns:1fr;gap:24px}}

/* Film-Überlagerung */
.film-hg{position:fixed;inset:0;background:rgba(20,14,12,.9);display:none;
  align-items:center;justify-content:center;z-index:200;padding:24px}
.film-hg.auf{display:flex}
.film-hg video{width:min(1100px,100%);max-height:86vh}
.film-zu{position:absolute;top:22px;right:28px;color:#fff;font-size:34px;
  background:none;border:0;cursor:pointer;line-height:1}

/* Fußzeile */
footer{background:var(--rust);color:rgba(255,255,255,.86);padding:70px 0 40px;font-size:15px}
footer a{color:rgba(255,255,255,.86)}
footer a:hover{color:#fff}
.fuss{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.fuss img{height:116px;width:auto;filter:brightness(0) invert(1);opacity:.94;margin-bottom:24px}
.fuss .claim{font-family:var(--serif);font-size:20px;line-height:1.5;color:#fff;opacity:.92;max-width:30ch}
.fuss h4{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:#fff;margin:0 0 16px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:10px}
.fuss-unten{border-top:1px solid rgba(255,255,255,.2);margin-top:52px;padding-top:26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;
  color:rgba(255,255,255,.65)}

/* ── Handy ───────────────────────────────────────── */
@media(max-width:900px){
  .duo,.gastgeberin{grid-template-columns:1fr;gap:34px}
  .duo.rev>*:first-child{order:0}
  .fuss{grid-template-columns:1fr;gap:34px}
  section{padding:70px 0}
  .wrap,.kopf{padding-left:22px;padding-right:22px}
  .menu-btn{display:block;position:absolute;left:22px;top:24px}
  .kopf-oben{padding:18px 22px 12px}
  .kopf-oben .logo img{height:70px}
  header.klein .kopf-oben .logo img{height:40px}
  .kopf-unten{display:block;border-top:1px solid var(--line);padding:9px 22px;text-align:center}
  .sprachen{position:static;transform:none;display:inline-flex;justify-content:center}
  nav{position:absolute;left:0;right:0;top:100%;background:var(--cream);flex-direction:column;
    align-items:stretch;padding:6px 22px 22px;border-bottom:1px solid var(--line);display:none;
    box-shadow:0 10px 24px rgba(80,50,40,.10)}
  nav.auf{display:flex}
  nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--line);text-align:left}
  nav>*+*::before{display:none}
  nav a.aktiv::after{display:none}
  .kopf-buchen{display:none}
  .hero{height:min(80vh,600px)}
}

/* ── Untermenü ────────────────────────────────────
   Klappt am Rechner beim Überfahren auf und bleibt auch bei
   Tastaturbedienung offen (:focus-within), damit man ohne Maus
   hineinkommt. Am Handy steht es eingerückt unter dem Hauptpunkt. */
.unter{position:absolute;left:50%;top:100%;z-index:30;
  display:flex;flex-direction:column;min-width:200px;
  background:var(--cream);border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(80,50,40,.13);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.hat-unter:hover .unter,.hat-unter:focus-within .unter{
  opacity:1;visibility:visible;transform:translate(-50%,0)}
.unter a{padding:13px 24px;text-align:left;white-space:nowrap}
.unter a::before{display:none}
.unter a.aktiv::after{left:24px;right:24px;bottom:7px}
.unter a:hover{background:#fff}
.unter-auf{display:none}

/* ── Zeitstrahl auf der Geschichtsseite ───────────
   Sechs Jahreszahlen als waagerechte Kette. Gibt der langen Seite einen
   Anker; jede Zahl taucht weiter unten als Kapitelüberschrift wieder auf. */
.strahl{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:60px;
  position:relative;padding-top:26px}
.strahl::before{content:"";position:absolute;left:8%;right:8%;top:5px;
  height:1px;background:rgba(118,45,40,.26)}
.strahl>div{position:relative;text-align:center;padding:0 10px}
.strahl>div::before{content:"";position:absolute;left:50%;top:-21px;
  width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--rust)}
.strahl .jahr{display:block;font-family:var(--serif);font-size:21px;
  color:var(--rust);margin-bottom:7px}
.strahl .was{display:block;font-size:13.5px;line-height:1.5;color:var(--soft);
  text-wrap:pretty}
@media(max-width:820px){
  .strahl{grid-template-columns:repeat(3,1fr);row-gap:38px;padding-top:26px}
  .strahl::before{display:none}
  .strahl>div::before{display:none}
  .strahl>div{text-align:left;padding:0 6px;border-left:2px solid rgba(118,45,40,.3)}
}
@media(max-width:520px){ .strahl{grid-template-columns:repeat(2,1fr)} }

/* Zwei Knöpfe nebeneinander, die auf dem Handy untereinander rutschen */
.knopf-reihe{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px}

/* ── Rechtsseiten ─────────────────────────────────
   Eine Textspalte, mehr nicht. Rechtstexte sollen lesbar und sachlich
   aussehen, nicht gestaltet. Die Zeilenlänge ist absichtlich kürzer als
   im übrigen Fließtext, weil hier niemand freiwillig liest. */
.rechtstext{max-width:720px}
.rechtstext h1{margin-bottom:6px}
.rechtstext h2{font-size:21px;color:var(--rust);margin:38px 0 14px}
.rechtstext .stand{font-family:var(--sans);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft);margin-bottom:28px}
.rechtstext .vorspann{font-size:17.5px;color:#3f3833;margin-bottom:8px}
.rechtstext .fliess{margin-bottom:13px}
.rechtstext .quer{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:52px;
  padding-top:26px;border-top:1px solid rgba(118,45,40,.2)}
.rechtstext .quer a{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rust);text-decoration:none}
.rechtstext .quer a:hover{text-decoration:underline}
/* Ein Link mitten im Fließtext, etwa im Brief auf der Concierge-Seite */
.fliess a{color:var(--rust);text-decoration:none;
  border-bottom:1px solid rgba(118,45,40,.35)}
.fliess a:hover{border-bottom-color:var(--rust)}

/* Derselbe Strich unter Links in den Terminlisten des Jahresrasters.
   Dort führt zum Beispiel Es Firó hinüber zum Film auf der
   Geschichtsseite. */
.monate li a{color:var(--rust);text-decoration:none;
  border-bottom:1px solid rgba(118,45,40,.35)}
.monate li a:hover{border-bottom-color:var(--rust)}

/* Ziel eines Ankersprungs darf nicht unter der klebenden Kopfleiste
   verschwinden. Die schmale Leiste ist rund 120 px hoch. */
[id]{scroll-margin-top:140px}

/* ── Blatt mit Textebene ──────────────────────────
   Nur auf der Kollektionsseite. Die Zeichnung hat oben links eine leere
   Himmelsfläche, dort liegt der Aufruf zum Buchen als HTML darüber. So
   bleibt er übersetzbar, anklickbar und für Suchmaschinen lesbar. */
.blatt-feld{position:relative;width:100%;max-width:1700px}
.blatt-feld>img{display:block;width:100%;height:auto;
  max-height:min(60vh,560px);object-fit:contain;margin:0 auto}
.blatt-text{position:absolute;left:6%;top:12%;max-width:min(430px,44%)}
.blatt-h1{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(24px,3vw,40px);line-height:1.14;margin-bottom:12px;text-wrap:balance}
.blatt-p{font-family:var(--lese);font-size:clamp(14px,1.3vw,17px);line-height:1.55;
  color:#4a423d;margin-bottom:22px;text-wrap:pretty}
/* Auf schmalen Schirmen wird die freie Fläche im Bild zu klein. Dann
   rutscht der Text unter das Blatt statt darüber. */
@media(max-width:820px){
  .blatt-kollektion{flex-direction:column;padding-bottom:36px}
  .blatt-text{position:static;max-width:560px;margin:26px auto 0;text-align:center;
    padding:0 22px}
}

/* Eingebetteter Film mitten in einer Seite. Läuft von allein und stumm,
   deshalb kein Abspielzeichen und kein dunkler Verlauf. */
.filmband{max-width:1000px;margin:0 auto;border-radius:22px;overflow:hidden;
  box-shadow:0 16px 38px rgba(90,60,45,.18)}
.filmband video{display:block;width:100%;height:auto}

/* Ein Foto über die volle Textbreite, ohne Spalte daneben */
.breitbild{display:block;width:100%;height:auto;border-radius:22px;margin-top:44px;
  box-shadow:0 12px 30px rgba(90,60,45,.14)}

/* Papierfarben der einzelnen Blätter, jeweils aus der Bildecke abgelesen.
   ⚠ Nach dem Austausch der Platzhalter neu ablesen und hier eintragen. */
.blatt-kollektion{background:#FBF5E6}
.blatt-tal{background:#F8EBD7}
.blatt-geschichte{background:#FAEDCF}

/* ── Brief ────────────────────────────────────────
   Porträt links, Brief rechts. Der Brief bekommt etwas mehr Zeilenhöhe
   und kürzere Absätze als der übrige Fließtext, weil ein Brief anders
   atmet als eine Beschreibung. */
.brief{display:grid;grid-template-columns:400px 1fr;gap:60px;align-items:start;
  max-width:1120px;margin:0 auto}
.brief>img{width:100%;height:auto;border-radius:22px;
  box-shadow:0 14px 34px rgba(90,60,45,.16)}
.brief .anrede{font-family:var(--serif);font-size:27px;color:var(--rust);
  margin-bottom:22px}
.brief .fliess{margin-bottom:15px}
/* Der WhatsApp-Knopf am Briefende. Steht dort, wo früher der Name stand:
   Der Brief endet mit „schreiben Sie mir", also gehört an diese Stelle
   der Weg dorthin und keine zweite Namensnennung. Das Zeichen liegt als
   SVG im Dokument, damit die Seite nichts von fremden Adressen lädt. */
.brief .knopf.wa{display:inline-flex;align-items:center;gap:10px;
  margin-top:30px;padding:12px 22px}
.brief .knopf.wa svg{width:19px;height:19px;flex:0 0 auto}
.brief .rolle{font-family:var(--sans);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft);margin-top:5px}
@media(max-width:900px){.brief{grid-template-columns:1fr;gap:34px;max-width:560px}}

/* ── Leistungsfelder ──────────────────────────────
   Zwei mal zwei, ruhiger als eine Aufzählung und ohne eigene Bilder. */
.dienste{display:grid;grid-template-columns:1fr 1fr;gap:40px 52px;margin-top:56px;
  max-width:1000px;margin-left:auto;margin-right:auto}
.dienste h3{font-size:21px;color:var(--rust);margin-bottom:11px;
  padding-left:30px;position:relative}
.dienste h3::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;
  background:url("../img/orange.svg") no-repeat center/contain;opacity:.85}
/* Verweis in einem Leistungsfeld, etwa auf den Kalender der Jahresseite.
   Derselbe feine Strich wie bei Links im Fließtext. */
.dienste p a{color:var(--rust);text-decoration:none;
  border-bottom:1px solid rgba(118,45,40,.35)}
.dienste p a:hover{border-bottom-color:var(--rust)}
.dienste p{font-family:var(--lese);font-size:16px;line-height:1.65;color:#4a423d;
  margin:0;padding-left:30px;text-wrap:pretty}
.dienste>div:nth-child(2){transition-delay:.08s}
.dienste>div:nth-child(3){transition-delay:.16s}
.dienste>div:nth-child(4){transition-delay:.24s}
@media(max-width:760px){.dienste{grid-template-columns:1fr;gap:32px;max-width:520px}}

/* Der Ankunftstisch ist auf noch wärmerem Papier gezeichnet als die
   beiden anderen Blätter. Farbe aus der Bildecke abgelesen. */
.blatt-concierge{background:#FBEED8}

/* ── Kontaktkarte ─────────────────────────────────
   Der Kasten trägt hier keine Häkchenliste, sondern Anschrift und Draht.
   Deshalb bekommt er andere Innenabstände als auf den übrigen Seiten. */
.kasten.karte .anschrift{font-family:var(--lese);font-size:17px;line-height:1.7;
  color:#4a423d;margin-bottom:20px}
.kasten.karte .draht{font-family:var(--lese);font-size:17px;line-height:1.9;margin-bottom:8px}
.kasten.karte .draht a{color:var(--rust);text-decoration:none;
  border-bottom:1px solid rgba(118,45,40,.3);padding-bottom:2px}
.kasten.karte .draht a:hover{border-bottom-color:var(--rust)}
.kasten.karte .knopf-reihe{margin-top:26px;gap:12px}

/* Vier kurze Hinweise, gleiche Marke wie im Jahresraster */
.hinweise{list-style:none;margin:30px auto 0;padding:0;max-width:620px;text-align:left}
.hinweise li{position:relative;padding-left:32px;margin-bottom:14px;
  font-family:var(--lese);font-size:16px;line-height:1.6;color:#4a423d;text-wrap:pretty}
.hinweise li:last-child{margin-bottom:0}
.hinweise li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
  background:url("../img/orange.svg") no-repeat center/contain;opacity:.85}

/* Flacher Hero für Seiten, die schnell zum Text kommen sollen */
.hero-flach{height:min(46vh,380px)}

/* ── Bildblatt ────────────────────────────────────
   Für Zeichnungen, die nicht beschnitten werden dürfen. Die Farbe ist die
   Papierfarbe der Zeichnung selbst, damit keine Kante sichtbar wird. */
.blatt{background:#FBF8E9;display:flex;justify-content:center;align-items:center;
  padding:0 clamp(0px,2vw,40px)}
/* Die Brieftaube ist auf etwas wärmerem Papier gezeichnet als das
   Jahres-Panorama. Farbe aus der Bildecke abgelesen, damit die Kante
   auch hier verschwindet. */
.blatt-flach{background:#FBF2DF}
.blatt img{display:block;width:100%;max-width:1700px;height:auto;
  max-height:min(64vh,620px);object-fit:contain}
/* Flacher, für Seiten die schnell zum Text kommen sollen */
.blatt-flach img{max-height:min(52vh,470px)}

/* ── Monatsraster ─────────────────────────────────
   Zwölf Karten, drei nebeneinander. Der Monatsname trägt die Karte, das
   Jahreszeitliche steht als Fließtext darunter, die festen Termine als
   Liste mit dem gleichen Häkchen wie in den Kästen. */
.monate{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 36px;margin-top:8px}
.monate article{background:var(--cream);border-radius:22px;padding:34px 32px 30px;
  border:1px solid rgba(118,45,40,.10)}
.monate h2{font-size:26px;color:var(--rust);margin-bottom:14px}
.monate .lead-monat{font-family:var(--lese);font-size:16px;line-height:1.68;
  color:#3f3833;margin-bottom:20px;text-wrap:pretty}
.monate ul{list-style:none;margin:0;padding:0}
.monate li{position:relative;padding-left:30px;margin-bottom:13px;
  font-family:var(--lese);font-size:15px;line-height:1.6;color:#4a423d;text-wrap:pretty}
.monate li:last-child{margin-bottom:0}
/* Gezeichnete Orange statt eines Kreises. Ein leerer Kreis sah aus wie
   eine Liste zum Abhaken, und hier hakt niemand etwas ab. */
.monate li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;
  background:url("../img/orange.svg") no-repeat center/contain;opacity:.85}
.monate article:nth-child(3n+2){transition-delay:.08s}
.monate article:nth-child(3n){transition-delay:.16s}
@media(max-width:980px){.monate{grid-template-columns:repeat(2,1fr);gap:32px 28px}}
@media(max-width:640px){.monate{grid-template-columns:1fr}
  .monate article{padding:28px 24px 26px}}

/* ── Der Kalender ───────────────────────────────────────────────────────
   Zwölf Monatskarten, von denen im Normalfall eine aufgeschlagen ist.
   Grundsatz: Ohne JavaScript passiert hier gar nichts — dann stehen alle
   zwölf Karten untereinander im gewohnten Raster, und die Monatsleiste
   ist eine Reihe von Sprungmarken. Erst wenn das Skript läuft, setzt es
   die Klasse .blaettert, und ab da gelten die Regeln weiter unten. Wer
   das ändert, prüft bitte zuerst die Seite mit abgeschaltetem Skript. */
.kal-leiste{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;
  margin-bottom:34px}
.kal-leiste a{font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);padding:9px 14px;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.kal-leiste a:hover{color:var(--rust)}
.kal-leiste a.jetzt{color:var(--rust)}
.kal-blatt{position:relative}
.kal-pfeil{display:none}
.kal-hinweis{display:none}

/* Ab hier: nur wenn das Skript übernommen hat. */
.kalender.blaettert .kal-seiten{display:block;margin-top:0}
.kalender.blaettert .kal-seiten>article{display:none}
.kalender.blaettert .kal-seiten>article.auf{display:block;
  max-width:760px;margin:0 auto;padding:44px 48px 40px;
  animation:blatt-um .5s ease}
.kalender.blaettert .kal-seiten>article.auf h2{font-size:32px}
.kalender.blaettert .kal-leiste a{cursor:pointer}
.kalender.blaettert .kal-leiste a.auf{color:var(--rust);
  border-bottom-color:var(--rust)}
.kalender.blaettert .kal-pfeil{display:block;position:absolute;top:50%;
  transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(118,45,40,.28);background:transparent;cursor:pointer;
  transition:background .2s,border-color .2s}
.kalender.blaettert .kal-pfeil:hover{background:rgba(118,45,40,.07);
  border-color:var(--rust)}
.kalender.blaettert .kal-pfeil::before{content:"";position:absolute;
  left:50%;top:50%;width:9px;height:9px;border-left:1.5px solid var(--rust);
  border-bottom:1.5px solid var(--rust)}
.kalender.blaettert .kal-pfeil.vor{left:0}
.kalender.blaettert .kal-pfeil.vor::before{transform:translate(-40%,-50%) rotate(45deg)}
.kalender.blaettert .kal-pfeil.zurueck{right:0}
.kalender.blaettert .kal-pfeil.zurueck::before{transform:translate(-60%,-50%) rotate(-135deg)}
.kalender.blaettert .kal-hinweis{display:block;text-align:center;margin-top:22px;
  margin-bottom:0;font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#8a7f78}
/* Die Unterkunft am Fuß des Kalenderblatts. Sie ist kein Schmuckbild,
   sondern der Weg in die Buchung: ganze Karte anklickbar, Bild, Name,
   ein Satz. Im Hochsommer stehen zwei nebeneinander, eine am Hafen und
   eine in der Altstadt. Das Bild ist dasselbe wie in der
   Buchungsmaschine, damit der Gast sein Haus nach dem Klick wiedererkennt
   — dieselbe Überlegung wie auf der Unterkunftsseite. */
.kal-wohnen{margin-top:30px;padding-top:26px;
  border-top:1px solid rgba(118,45,40,.16)}
.kal-wohnen-titel{font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#8a7f78;margin-bottom:16px}
.kal-objekt{display:block;text-decoration:none;color:inherit}
.kal-objekt+.kal-objekt{margin-top:22px}
.kal-objekt img{display:block;width:100%;height:auto;border-radius:14px;
  aspect-ratio:3/2;object-fit:cover;transition:opacity .25s}
.kal-objekt:hover img{opacity:.9}
.kal-objekt strong{display:block;margin-top:12px;font-family:var(--serif);
  font-weight:500;font-size:18px;color:var(--rust);line-height:1.3}
.kal-objekt:hover strong{text-decoration:underline}
.kal-objekt span{display:block;margin-top:5px;font-family:var(--lese);
  font-size:14.5px;line-height:1.55;color:#4a423d}
/* Hochsommer: zwei Unterkünfte nebeneinander. */
.kal-wohnen.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.kal-wohnen.zwei .kal-wohnen-titel{grid-column:1/-1}
.kal-wohnen.zwei .kal-objekt+.kal-objekt{margin-top:0}
@media(max-width:620px){
  .kal-wohnen.zwei{grid-template-columns:1fr;gap:0}
  .kal-wohnen.zwei .kal-objekt+.kal-objekt{margin-top:22px}
}

@keyframes blatt-um{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .kalender.blaettert .kal-seiten>article.auf{animation:none}
}
/* Am Handy ist links und rechts kein Platz für Pfeile neben dem Blatt.
   Dort rücken sie unter die Karte, nebeneinander. */
@media(max-width:820px){
  .kalender.blaettert .kal-seiten>article.auf{padding:32px 26px 28px}
  .kalender.blaettert .kal-blatt{padding-bottom:64px}
  .kalender.blaettert .kal-pfeil{top:auto;bottom:0;transform:none}
  .kalender.blaettert .kal-pfeil.vor{left:calc(50% - 54px)}
  .kalender.blaettert .kal-pfeil.zurueck{right:calc(50% - 54px)}
  .kal-leiste a{font-size:11px;padding:7px 10px;letter-spacing:.06em}
}

/* ── Monatsradar ────────────────────────────────────────────────────────
   Dieselben Karten wie beim Jahresraster, nur trägt hier das Datum die
   Karte und nicht der Monatsname. Deshalb steht oben das Datum als
   Eyebrow, darunter der Titel als h3, und der Ort übernimmt die Rolle
   des Jahreszeitlichen. Es sind selten mehr als drei bis fünf Termine,
   also darf die Karte etwas ruhiger sein als im Zwölferraster. */
/* Der Trenner sitzt zwischen Radar und Kalender. Er bekommt oben
   etwas mehr Luft als unten, damit er zum folgenden Abschnitt gehört
   und nicht im Niemandsland zwischen beiden steht. */
.radar-trenner{margin-top:8px;margin-bottom:34px}
.monate.radar{margin-top:32px}
.kal-kopf{margin-bottom:38px}
.kal-kopf h2{margin-top:10px}

/* ── Abstände auf der Jahresseite ───────────────────────────────────────
   Die Seite besteht aus vier Abschnitten, die inhaltlich aufeinander
   aufbauen: Einführung, aktuelle Termine, Kalender, Abschluss. Mit dem
   üblichen Abstand von 96 px oben UND unten standen dazwischen jeweils
   fast zweihundert Pixel Leere — auf dem Bildschirm ein Bruch, obwohl es
   ein Gedankengang ist. Deshalb hier enger, zuerst von Aurora am
   01.09.2026 zweimal angemerkt. Der Abschluss behält seine Luft, der
   trennt wirklich. */
.s-jahr section{padding:70px 0}
.s-jahr section:first-of-type{padding-bottom:56px}   /* Einführung */
.s-jahr .kalender{margin-bottom:6px}
.s-jahr .stand{margin-top:20px;margin-bottom:0}
/* Kalender und Abschluss sind BEIDE sandfarben. Zwischen ihnen fehlt
   also der Farbwechsel, der sonst zwei Abschnitte trennt, und die
   üblichen 96 px oben plus 70 px unten standen als eine einzige große
   Leerfläche da. Der Separator im Abschluss trennt hier ohnehin, deshalb
   rücken die beiden zusammen. Unten am Seitenende bleibt die Luft. */
.s-jahr section:nth-last-of-type(2){padding-bottom:40px}
.s-jahr section:last-of-type{padding:56px 0 96px}
.monate.radar .eyebrow{color:var(--rust);margin-bottom:10px}
.monate.radar h3{font-size:21px;color:var(--rust);margin-bottom:10px;line-height:1.3}
.monate.radar .lead-monat{font-size:15px;margin-bottom:12px;opacity:.8}
.monate.radar .fliess{font-family:var(--lese);font-size:15px;line-height:1.6;
  color:#4a423d;text-wrap:pretty}
.stand{font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#8a7f78;margin-top:26px}

/* ── Filmfeld ─────────────────────────────────────
   Breites Standbild mit Abspielknopf in der Mitte. Kein Autostart, weil
   der Ton (Trommeln, Menge) die halbe Wirkung ausmacht. */
.filmfeld{position:relative;max-width:900px;margin:44px auto 0;
  border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(90,60,45,.18)}
.filmfeld img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.filmfeld::after{content:"";position:absolute;inset:0;background:rgba(30,18,14,.16)}
.spielen.gross{left:50%;top:50%;bottom:auto;z-index:3;
  transform:translate(-50%,-50%);padding:14px 28px 14px 22px}
.spielen.gross svg{width:20px;height:20px}
.spielen.gross em{font-size:12.5px}
.spielen.gross:hover{transform:translate(-50%,-50%) scale(1.04)}
@media(max-width:520px){.spielen.gross em{display:none}
  .spielen.gross{padding:16px 18px 16px 20px}}

/* ── Leseempfehlung ───────────────────────────────
   Ein Bild mit allen drei Covern, daneben der Text. Bewusst kleiner als
   eine Kartenreihe: Es ist ein Hinweis, keine Buchhandlung. */
.lese{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center;margin-top:44px}
.lese img{width:100%;height:auto;object-fit:contain}
.lese-links{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px}
.lese-links a{font-family:var(--sans);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rust);text-decoration:none;
  border-bottom:1px solid rgba(118,45,40,.35);padding-bottom:3px}
.lese-links a:hover{border-bottom-color:var(--rust)}
@media(max-width:820px){.lese{grid-template-columns:1fr;gap:32px}}

/* ── Buchkarten ───────────────────────────────────
   Drei Hochkant-Cover nebeneinander. Der ganze Block ist ein Link, der
   in einem neuen Fenster auf die Seite der Autorin führt. */
.buecher{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:52px}
.buecher a{display:block;text-decoration:none;color:inherit;text-align:center}
.buecher img{width:100%;max-width:250px;margin:0 auto;display:block;
  aspect-ratio:2/3;object-fit:cover;border-radius:4px;
  box-shadow:0 12px 30px rgba(90,60,45,.20);
  transition:transform .3s ease,box-shadow .3s ease}
.buecher a:hover img{transform:translateY(-6px);box-shadow:0 20px 40px rgba(90,60,45,.26)}
.buecher strong{display:block;margin-top:22px;font-family:var(--serif);
  font-size:20px;font-weight:400;color:var(--ink)}
.buecher em{display:block;margin-top:6px;font-style:normal;font-family:var(--sans);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.buecher span{display:block;margin-top:12px;font-family:var(--lese);
  font-size:15px;line-height:1.6;color:var(--soft);text-wrap:pretty}
.buecher .mehr{margin-top:14px;font-family:var(--sans);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.buecher a:hover .mehr{text-decoration:underline}
@media(max-width:820px){.buecher{grid-template-columns:1fr;gap:48px;max-width:340px;margin-left:auto;margin-right:auto}}

/* Überleitung im Sóller-Kasten der Startseite zum zweiten Knopf */
.kasten-zeile{margin-top:26px;font-family:var(--lese);font-size:15px;
  line-height:1.65;color:var(--soft);text-wrap:pretty}

/* Platzhalter für die Suchleiste von Avantio — greift nur noch, wenn das
   Formular NICHT geladen werden konnte. */
.suchfeld{margin:44px auto 0;max-width:900px;background:var(--cream);
  border:1px dashed var(--line);padding:36px 28px;text-align:center;
  color:var(--soft);font-size:15px}

/* ── Die echte Suchleiste ────────────────────────────────────────────
   Sobald das Formular von Avantio wirklich drinsteckt, bekommt der
   Kasten die Klasse .echt: kein gestrichelter Rahmen mehr, kein
   Innenabstand, und deutlich mehr Breite. Der Platzhalter war 900 px
   breit — darin quetschen sich sieben Spalten, und „Wählen Sie" wird
   mitten im Wort abgeschnitten (von Aurora am 01.09.2026 bemängelt).

   ⚠ Diese Regeln stehen nur, weil Avantios Stylesheet in kopf.php VOR
   unserem geladen wird. Reihenfolge nicht vertauschen. */
/* ⚠ Seit dem 12.09.2026 stehen nur noch ZWEI Felder in der Leiste —
   Zeitraum und Erwachsene. Die 1080 px von damals waren für sieben
   Spalten gedacht; mit zweien sieht dieselbe Breite auseinandergezogen
   aus, und der Suchknopf liegt weit weg von den Eingaben (Aurora am
   Bildschirm gesehen). Jetzt so breit wie nötig und mittig. */
.suchfeld.echt{max-width:760px;background:none;border:0;padding:0}
.suchfeld.echt #sombrap,
.suchfeld.echt #contenedor2{max-width:none;width:100%}

/* Die Spalten dürfen sich den Platz nach Bedarf nehmen statt zu gleichen
   Teilen — „Daten" braucht viel, „Kinder" wenig. */
.suchfeld.echt .formGroup{min-width:0}
.suchfeld.echt .select_formulario,
.suchfeld.echt .form_item select,
.suchfeld.echt .form_item input{max-width:100%;width:100%;
  text-overflow:ellipsis}

/* Kein Abschneiden mitten im Wort */
.suchfeld.echt label,
.suchfeld.echt .titulo_ninyos{white-space:normal}

/* Avantio legt das Feld um den SUCHEN-Knopf auf ein bläuliches Weiß
   (#f5f6fa). Neben unserem Sandton sieht das aus wie ein vergessener
   Kasten. Es wird durchsichtig, dann steht der Knopf frei auf dem
   Untergrund der Seite. Der Knopf selbst trägt bereits unser Rostbraun —
   das kommt aus der korporativen Farbe im VRMS.

   ⚠ Hier steht ausnahmsweise !important, und das hat einen Grund: Das
   Formular bringt ein DRITTES Stylesheet mit (flexible-search.css), und
   zwar mitten im Text statt im Kopf. Es lädt dadurch NACH unserem, und
   die Reihenfolge im Kopf nützt nichts mehr. Ohne !important gewinnt
   Avantio. Am 01.09.2026 nachgemessen, nicht geraten. */
.suchfeld.echt #contenido_buscar{background:transparent !important}

/* Der feine Rahmen um die ganze Leiste passt sich unserer Linie an. */
.suchfeld.echt #sombrap{border-color:var(--line) !important}

/* Nur für Suchmaschinen und Screenreader sichtbar */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Zeichnung vergrößert */
.bild-hg img{width:min(760px,92vw);border-radius:26px;background:#fdf8ef}
.bild-hg .titel{color:#fff;font-family:var(--serif);font-size:24px;margin-top:20px;text-align:center}


/* ── Hauptlogo unter dem Film ─────────────────────── */
.auftakt-logo{width:min(430px,72vw);height:auto;margin:0 auto 40px}
@media(max-width:640px){.auftakt-logo{margin-bottom:28px}}

/* ── Die Geschichte: links Text, rechts der Kasten ── */
.geschichte{display:grid;grid-template-columns:1.35fr 1fr;gap:70px;align-items:start}
.geschichte .lead{margin-bottom:22px;text-wrap:pretty}
.geschichte .knopf{margin-top:12px}
.kasten{background:var(--cream);border-radius:26px;padding:40px 38px 36px;
  box-shadow:0 10px 28px rgba(90,60,45,.08),0 2px 6px rgba(90,60,45,.05);
  transition-delay:.12s}
.kasten h3{font-size:20px;margin-bottom:24px;color:var(--rust)}
.kasten ul{list-style:none;margin:0;padding:0}
.kasten li{position:relative;padding-left:34px;margin-bottom:13px;
  font-size:16px;line-height:1.5;color:var(--soft)}
.kasten li:last-child{margin-bottom:0}
/* Häkchen in derselben Linie wie das Logo, als Hintergrundgrafik */
.kasten li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
  background:url("../img/haken-mini.svg") no-repeat center/contain}

/* ── Knöpfe untereinander (schmale Spalte, drei Stück) ─────────────────
   Nur dort einsetzen, wo drei Knöpfe nebeneinander nicht passen. Die
   normale .knopf-reihe bleibt unverändert. */
.knopf-stapel{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
.knopf-stapel .knopf{width:100%;text-align:center}

/* ── Draußen: Berg und Wasser nebeneinander (29.08.2026) ───────────────
   Zwei Kästen in derselben Machart wie „Gut zu wissen". Bewusst ohne
   Fotos, siehe Kommentar in soller.php. */
.draussen{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:46px;align-items:start}
.draussen .kasten{transition-delay:0s}
.draussen .kasten:nth-child(2){transition-delay:.12s}
.draussen .kasten li{line-height:1.55}
@media(max-width:900px){.draussen{grid-template-columns:1fr;gap:22px}}
@media(max-width:900px){.geschichte{grid-template-columns:1fr;gap:40px}}

/* ── Schmale Zeichnungsreihe auf der Startseite ───── */
.arten-reihe{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;
  margin-top:52px;text-decoration:none}
.arten-reihe span{display:block;text-align:center}
.arten-reihe img{aspect-ratio:1/1;width:100%;object-fit:cover;background:#fdf8ef;
  border-radius:20px;box-shadow:0 8px 22px rgba(90,60,45,.09);
  transition:transform .3s ease,box-shadow .3s ease}
.arten-reihe:hover img{transform:translateY(-3px);box-shadow:0 14px 30px rgba(90,60,45,.14)}
.arten-reihe em{display:block;margin-top:14px;font-style:normal;font-family:var(--serif);
  font-size:17px;color:var(--ink)}
@media(max-width:640px){.arten-reihe{grid-template-columns:repeat(3,1fr);gap:16px;row-gap:26px}
  .arten-reihe em{font-size:15px}}

/* ── Kopfbereich der Unterseiten ──────────────────── */
.seitenkopf{padding:88px 0 64px}
.seitenkopf h1{font-size:clamp(34px,4.6vw,54px);margin-bottom:24px}
.seitenkopf .lead{font-size:20px}

/* Die Kollektionsseite beginnt direkt mit den Zeichnungen — etwas Luft
   nach oben, damit sie nicht an der Kopfzeile kleben. */
.arten-oben{padding-top:76px}
.arten-oben .arten{margin-top:0}
.arten-oben .mitte .lead{margin-bottom:20px}
.arten-oben .mitte .lead:last-child{margin-bottom:0}


/* Hauptlogo als Abschnittstrenner auf den Unterseiten */
.abschnitt-logo{width:min(300px,66vw);height:auto;margin:0 auto 34px}

/* Überschriften, die in eine Zeile passen sollen */
.breit{max-width:none;font-size:clamp(25px,3.2vw,38px)}
.mitte:has(.breit){max-width:1000px}


/* ── Fließtext für längere Blöcke ──────────────────
   Eigene Leseschrift: Lora. Bewusst WEDER Playfair NOCH Montserrat — beide
   stecken im Logo, und eine Logoschrift im Mengentext nimmt dem Signet seine
   Eigenständigkeit. Lora ist für den Bildschirm gezeichnet, hat eine hohe
   x-Höhe und trägt auch längere Absätze. */
.fliess{font-family:var(--lese);font-weight:400;font-size:17px;line-height:1.72;
  color:#4a423d;margin-bottom:17px;text-wrap:pretty}
.fliess:last-of-type{margin-bottom:0}
.fliess.betont{color:var(--rust)}
.mitte .fliess{margin-bottom:15px}

/* Bilder neben Text füllen die Texthöhe aus */
.duo{align-items:stretch}
.duo>div{align-self:center}
.duo img{height:100%;aspect-ratio:auto;min-height:340px;object-fit:cover;object-position:center 68%;border-radius:22px;
  box-shadow:0 14px 34px rgba(90,60,45,.12),0 3px 8px rgba(90,60,45,.06)}
.duo.bild-rechts{grid-template-columns:1.25fr 1fr}

/* ── Zwei echte Objekte statt eines Stimmungsbildes (29.08.2026) ────────
   Sitzt in der Bildspalte des Direktbuchungs-Blocks und füllt sie ganz aus:
   zwei gleich hohe Fotos übereinander, jedes ein Link auf sein Objekt in
   der Buchungsmaschine. Die Regeln von `.duo img` müssen hier ausdrücklich
   überschrieben werden, sonst erzwingt die Mindesthöhe zwei Riesenbilder. */
.objektpaar{display:grid;grid-template-rows:1fr 1fr;gap:18px;height:100%}
.objektpaar a{position:relative;display:block;overflow:hidden;border-radius:22px;
  box-shadow:0 14px 34px rgba(90,60,45,.12),0 3px 8px rgba(90,60,45,.06)}
.objektpaar img{width:100%;height:100%;min-height:0;aspect-ratio:auto;
  object-fit:cover;object-position:center 55%;display:block;
  border-radius:0;box-shadow:none;transition:transform .7s ease}
.objektpaar a:hover img{transform:scale(1.045)}
/* Der Name des Objekts liegt im Bild, mit einem weichen Verlauf darunter,
   damit er auf hellen wie dunklen Fotos lesbar bleibt. */
.objektpaar a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to top,rgba(40,22,16,.55),rgba(40,22,16,0));
  pointer-events:none}
.objektpaar span{position:absolute;left:18px;bottom:14px;z-index:2;color:#fff;
  font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.geschichte .kasten .knopf{margin-top:28px}

/* Das Logo etwas zurücknehmen */
.auftakt-logo{width:min(325px,60vw)}
.abschnitt-logo{width:min(260px,58vw)}

/* ── Gästefavoriten ───────────────────────────────── */
.favoriten{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:24px;margin-top:52px}
.favoriten a{display:block;text-decoration:none;color:inherit}
.favoriten .bildfeld{position:relative}
/* ⚠ height:auto ist Pflicht, nicht Kosmetik. Die Bilder tragen width- und
   height-Attribute im HTML (gegen Layout-Sprünge beim Laden), und diese
   Attribute wirken wie eine CSS-Höhe. Ohne height:auto gewinnen sie gegen
   aspect-ratio, und die Kacheln stehen 600 px hoch bei 210 px Breite.
   Am 01.09.2026 genau so passiert. */
.favoriten img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;border-radius:20px;
  box-shadow:0 10px 26px rgba(90,60,45,.11);transition:transform .3s ease,box-shadow .3s ease}
.favoriten .karte:hover .bildfeld img{transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(90,60,45,.16)}
.favoriten strong{display:block;margin-top:16px;font-family:var(--serif);
  font-size:19px;font-weight:400;color:var(--ink)}
.favoriten span{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--soft)}
@media(max-width:900px){.duo.bild-rechts{grid-template-columns:1fr}
  .duo img{min-height:0;aspect-ratio:4/3}
  .objektpaar{grid-template-rows:auto auto}
  .objektpaar img{aspect-ratio:4/3;height:auto}}


/* ── Separator: Signet zentriert in einer Linie ────
   Wird auf allen Seiten als ruhiger Abschnittstrenner verwendet. */
.separator{display:flex;align-items:center;gap:30px;max-width:560px;margin:0 auto 34px}
.separator::before,.separator::after{content:"";flex:1;height:1px;background:rgba(118,45,40,.28)}
.separator img{width:96px;height:auto}

/* Gästefavoriten: Stern schräg in der oberen Ecke */
.favoriten .karte{position:relative}
.favoriten .stern{position:absolute;top:-13px;right:-11px;width:46px;height:46px;
  aspect-ratio:auto;border-radius:0;box-shadow:none;
  transform:rotate(14deg);filter:drop-shadow(0 3px 6px rgba(90,60,45,.22))}

/* Abspielzeichen auf einer Favoritenkarte. Sitzt unten links im Bild und
   öffnet den Film der jeweiligen Unterkunft im Leuchtkasten. Bewusst klein
   und ruhig, damit es das Foto nicht erschlägt. */
.spielen{position:absolute;left:14px;bottom:14px;z-index:2;
  display:flex;align-items:center;gap:9px;padding:8px 15px 8px 11px;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,253,250,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(60,35,25,.26);
  transition:transform .25s ease,background .25s ease}
.spielen svg{width:17px;height:17px;flex:none;fill:#762d28}
.spielen em{font-family:var(--sans);font-style:normal;font-weight:500;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#762d28;
  white-space:nowrap}
.spielen:hover{transform:translateY(-2px);background:#fff}
@media(max-width:520px){ .spielen em{display:none}
  .favoriten .spielen{padding:11px 12px 11px 13px} }


/* Nach einem Fließtextblock braucht ein Knopf Abstand — die letzte Zeile
   hat keinen unteren Rand mehr, sonst klebt er am Text. */
.fliess + .knopf, .gastgeberin .knopf{margin-top:30px}

/* ══ Untermenü am Handy ═══════════════════════════════════════════════
   Steht bewusst GANZ AM ENDE der Datei. Vorher standen diese Regeln vor
   den Rechner-Regeln und wurden von ihnen wieder aufgehoben — deshalb sah
   „Sóller entdecken" auf dem Telefon aus wie ein Fehler: mittig, mit einer
   zu kurzen Linie und ohne sichtbare Unterpunkte. (Gefunden von Aurora,
   29.08.2026.)

   Jetzt ist es eine Zeile wie jede andere, mit einem Pluszeichen rechts.
   Der Text führt weiterhin auf die Talseite, das Plus klappt nur auf. */
@media(max-width:900px){
  nav>.hat-unter{display:flex;flex-wrap:wrap;align-items:stretch;width:100%}
  /* min-width:0 und nowrap sind die Versicherung: ohne sie darf ein
     Flex-Element nicht unter seine Inhaltsbreite schrumpfen, und dann kann
     der Knopf in eine eigene, leer wirkende Zeile rutschen. Safari ist da
     eigensinniger als Chrome. */
  nav>.hat-unter>a{flex:1 1 0;width:auto;min-width:0;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}

  .unter-auf{display:flex;align-items:center;justify-content:center;
    flex:0 0 46px;min-width:46px;align-self:stretch;box-sizing:border-box;
    background:none;border:0;border-bottom:1px solid var(--line);
    cursor:pointer;padding:0;color:var(--rust);
    font-family:var(--sans);font-size:22px;line-height:1;font-weight:300}
  /* Das Zeichen kommt aus dem CSS, damit im Quelltext kein einsames + steht
     und Vorlesegeräte stattdessen das aria-label bekommen. */
  .unter-auf::before{content:"+";display:block;margin-top:-2px}
  .hat-unter.offen .unter-auf::before{content:"–"}

  .unter{flex-basis:100%;display:none;
    position:static;transform:none;opacity:1;visibility:visible;min-width:0;
    border:0;box-shadow:none;background:none}
  .hat-unter.offen .unter{display:flex}
  /* ⚠ DAS war die Ursache der „leeren Zeilen" (29.08.2026):
     Für den Rechner steht weiter oben .hat-unter:hover .unter mit
     transform:translate(-50%,0) — dafür gedacht, das Aufklappmenü mittig
     unter den Menüpunkt zu setzen. Am Handy bleibt :hover nach dem Tippen
     hängen, und :focus-within trifft ohnehin zu, sobald der Plus-Knopf
     angetippt wurde. Beide Regeln sind spezifischer als das schlichte
     .unter und haben das Untermenü deshalb um die halbe Breite nach links
     geschoben: die Trennlinien waren noch zu sehen, der Text lag außerhalb
     des Bildschirms. Deshalb hier ausdrücklich zurückgesetzt. */
  .unter,
  .hat-unter:hover .unter,
  .hat-unter:focus-within .unter{transform:none;left:auto;top:auto}
  .unter a{padding-left:20px;font-size:11.5px;color:var(--soft)}
  .unter a:last-child{border-bottom:0}
}

/* Eine Favoritenkarte ohne Ziel — derzeit nur Can Perla, weil es kein
   Inserat ist, sondern das Stadthaus, in dem fünf Wohnungen liegen.
   Sieht aus wie die anderen, reagiert aber nicht auf einen Klick. */
.karte .ohne-link{display:block;cursor:default}

/* ── Große Objektkacheln ──────────────────────────────────────────────
   Für die Übersichtsseite und für Can Perla. Die Gästefavoriten auf der
   Kollektionsseite bleiben klein und vierspaltig — dort sind es Anreißer.
   Hier sind die Bilder der Inhalt, also dürfen sie Platz haben.

   Feste drei Spalten statt auto-fit: Bei fünf Wohnungen ergäbe auto-fit
   sonst vier oben und eine allein darunter, und das sieht aus wie ein
   Fehler (Auroras Einwand vom 01.09.2026). Drei und zwei sieht gewollt
   aus. Bei sechs werden es zweimal drei, bei drei eine volle Reihe. */
.favoriten.gross{grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px}
.favoriten.gross img{aspect-ratio:3/2;border-radius:22px}
.favoriten.gross strong{margin-top:18px;font-size:21px}
.favoriten.gross span{font-size:15px}
@media(max-width:900px){.favoriten.gross{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:600px){.favoriten.gross{grid-template-columns:1fr}}

/* Ein Kasten, der mitten auf der Seite steht statt in einer schmalen
   Spalte — auf der Übersicht und auf der Can-Perla-Seite. */
.kasten-mitte{max-width:760px;margin-left:auto;margin-right:auto}
.kasten-mitte .knopf-reihe{margin-top:24px}


/* ── Übersichts- und Themenseiten ─────────────────────────────────────
   Aurora am 01.09.2026: Überschriften zu groß, Oberüberschrift lieber in
   Rostbraun. Die Startseite bleibt unberührt — dort trägt die große
   Schrift den Auftritt. Auf einer Listenseite konkurriert sie mit den
   Häusern, um die es eigentlich geht. */
.seiten-h1{font-size:clamp(30px,3.4vw,42px);color:var(--rust)}
.unterseite h2,
.favoriten.gross ~ * h2{font-size:clamp(24px,2.4vw,30px)}

/* Auf den beiden neuen Seiten sind die Zwischenüberschriften Wegweiser,
   keine Schlagzeilen. */
body.liste h2{font-size:clamp(24px,2.4vw,31px)}

/* ── Pfeil „es geht weiter" ────────────────────────────────────────────
   Für die Stelle, an der ein Signet-Trenner falsch wäre: Er markiert
   gleichrangige Abschnitte, hier geht es aber schlicht weiter nach
   unten. Flächig, ruhig, mit einer kleinen Bewegung, damit das Auge ihn
   findet. */
.weiter-pfeil{display:block;width:56px;height:auto;margin:38px auto 0;
  color:var(--rust);opacity:.5;transition:opacity .25s,transform .25s}
.weiter-pfeil svg{width:100%;height:auto;display:block}
.weiter-pfeil:hover{opacity:.9;transform:translateY(3px)}
@media(prefers-reduced-motion:no-preference){
  .weiter-pfeil{animation:pfeil-wippt 2.6s ease-in-out infinite}
}
@keyframes pfeil-wippt{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

/* Avantio gibt der Datumsspalte flex:1 1 110px, allen anderen Spalten
   dagegen eine Grundbreite, die praktisch null ist. Die erste Spalte
   bekommt dadurch 110 px geschenkt, bevor überhaupt verteilt wird — sie
   steht breit da, während „Wählen Sie" daneben abgeschnitten wird.
   Hier bekommen alle sieben Spalten dieselbe Ausgangslage.
   Am 01.09.2026 im Browser nachgemessen. */
.suchfeld.echt #tabla_form .wrapper-travel-period{flex:1 1 0 !important;min-width:0}

/* ── Übersichtsseite: Rhythmus ────────────────────────────────────────
   Aurora am 01.09.2026: „Es ist schon wichtig, dass die Bilder der
   Objekte schneller kommen und man nicht erst so viel scrollen muss."
   Der Kopfblock ist farbig abgesetzt und knapper, die Gruppen rücken
   enger zusammen. Die übrigen Seiten behalten ihren ruhigen Abstand. */
.kopfblock{padding:56px 0 48px}
.kopfblock .lead{margin-bottom:0}
/* Zwei Abschnitte, die zusammengehoeren. Zwischen ihnen lagen zweimal
   96 px, also fast zwei Bildschirmhoehen Leere — „man denkt dann immer,
   da kommt nichts mehr" (Aurora, 16.09.2026). Den Uebergang macht der
   Signet-Separator, nicht der Abstand. */
section.vor-anschluss{padding-bottom:30px}
section.anschluss{padding-top:0}
/* Dasselbe fuer das Karussell auf der Startseite: Es folgt dort direkt
   auf den Direktbuchungs-Block, und der bringt den Separator schon mit.
   Ueber den Nachbarn geregelt, damit inc/karussell.php unveraendert
   bleibt — die Kollektionsseite bindet denselben Baustein ein und
   braucht den engen Anschluss NICHT. */
section.vor-anschluss + .karussell-block{padding-top:0}

section.gruppe{padding:52px 0 30px}
section.gruppe .separator{margin-bottom:26px}
section.gruppe .favoriten.gross{margin-top:30px}

/* Die Bereichsüberschriften sind Wegweiser, keine Schlagzeilen — sie
   sollen sich nicht mit der Hauptüberschrift beißen. Davor das
   Orangensymbol, dasselbe wie in den Hinweislisten. */
.gruppe-h2{font-size:clamp(21px,2vw,27px)}
.gruppe-h2::before{content:"";display:inline-block;width:20px;height:20px;
  margin-right:11px;vertical-align:-2px;opacity:.85;
  background:url("../img/orange.svg") no-repeat center/contain}

/* Alle Bildunterschriften reservieren zwei Zeilen. Sonst steht bei der
   einen Kachel der Text eine Zeile höher als bei der Nachbarin, und die
   Reihe wirkt schief. */
.favoriten.gross span{min-height:2.9em}

/* Die Kacheln bauen sich nacheinander auf statt alle auf einmal — dieselbe
   ruhige Bewegung wie auf der Startseite, nur leicht versetzt. Aurora am
   01.09.2026: „Kannst Du das auch animieren wie auf der Landingpage, dass
   sich die Texte aufbauen?" */
.favoriten.gross .karte:nth-child(1){transition-delay:.00s}
.favoriten.gross .karte:nth-child(2){transition-delay:.08s}
.favoriten.gross .karte:nth-child(3){transition-delay:.16s}
.favoriten.gross .karte:nth-child(4){transition-delay:.24s}
.favoriten.gross .karte:nth-child(5){transition-delay:.32s}
.favoriten.gross .karte:nth-child(6){transition-delay:.40s}
.nach-h1{transition-delay:.18s}


/* ══ KARUSSELL: HERVORGEHOBENE UNTERKÜNFTE ═════════════════════════════
   Gebaut am 04.09.2026. Die Daten kommen live aus der Buchungsmaschine
   (inc/hervorgehoben.php), das Aussehen ist unseres. Bewusst OHNE fremdes
   Stylesheet und ohne fremdes Skript — das Schieben macht der Browser
   selbst mit scroll-snap, die beiden Pfeile sind vier Zeilen JavaScript.

   ⚠ Die Reihe darf NICHT in .mitte stehen. Sie soll breiter laufen als
   der Lesetext, sonst wirkt sie eingeklemmt. Nur die Überschrift darüber
   bekommt die schmale Spalte — dieselbe Regel wie bei der Suchleiste. */
.karussell{position:relative;margin-top:40px}

.karussell-bahn{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scroll-padding-left:2px;
  /* Luft unten für den Schatten der Karten, sonst schneidet die Bahn ihn ab. */
  padding:6px 2px 26px;
  /* Rollbalken weg — geschoben wird mit den Pfeilen, dem Finger oder dem
     Trackpad. Firefox und die WebKit-Browser wollen dafür je eine eigene
     Zeile. */
  scrollbar-width:none;-ms-overflow-style:none}
.karussell-bahn::-webkit-scrollbar{display:none}

.karussell-bahn .karte{flex:0 0 300px;scroll-snap-align:start}
.karussell-bahn a{display:block;text-decoration:none;color:inherit}
/* Der Abspielknopf im Karussell: etwas kleiner als auf den grossen
   Karten, damit er die schmale Kachel nicht erschlaegt. */
.karussell-bahn .bildfeld{position:relative}
.karussell-bahn .spielen{left:10px;bottom:10px;padding:8px 12px}
.karussell-bahn .spielen em{font-size:10.5px}
.karussell-bahn .karte span{display:block;margin-top:6px}

/* Auf der Startseite braucht das Objektfoto eine Bezugsflaeche, sonst
   haengt der Abspielknopf am Seitenrand statt am Bild. */
.objektpaar .objektfeld{position:relative}
/* height:auto aus demselben Grund wie bei .favoriten — siehe die Warnung
   dort. Die Bilder tragen width/height im HTML. */
.karussell-bahn img{aspect-ratio:3/2;width:100%;height:auto;object-fit:cover;
  border-radius:22px;background:var(--sand);
  box-shadow:0 10px 26px rgba(90,60,45,.11);
  transition:transform .3s ease,box-shadow .3s ease}
.karussell-bahn .karte:hover img{transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(90,60,45,.16)}
.karussell-bahn strong{display:block;margin-top:16px;font-family:var(--serif);
  font-size:20px;font-weight:400;line-height:1.3;color:var(--ink);
  /* Zwei Zeilen reservieren, damit die Zeile darunter bei allen Karten
     auf gleicher Höhe steht. */
  min-height:2.6em}
.karussell-bahn span{display:block;margin-top:4px;font-size:14.5px;
  line-height:1.5;color:var(--soft)}

/* Die beiden Pfeile sitzen auf halber Höhe des BILDES, nicht der Karte —
   sonst rutschen sie durch die Beschriftung nach unten. */
.karussell-pfeil{position:absolute;top:108px;z-index:3;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:var(--cream);color:var(--rust);
  box-shadow:0 4px 16px rgba(90,60,45,.22);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,opacity .25s ease,transform .2s ease}
.karussell-pfeil:hover{background:#fff;transform:scale(1.06)}
.karussell-pfeil svg{width:20px;height:20px;fill:currentColor}
.karussell-pfeil.links{left:-14px}
.karussell-pfeil.rechts{right:-14px}
/* Am Anfang der Bahn ist der linke Pfeil sinnlos, am Ende der rechte.
   Das JavaScript setzt dann .aus — ausgeblendet, aber nicht entfernt,
   damit nichts springt. */
.karussell-pfeil.aus{opacity:0;pointer-events:none}

/* Am Handy verschwinden die Pfeile: Dort wird gewischt, und ein Knopf
   über dem Bild würde nur den halben Daumen im Weg stehen. Die Karten
   werden schmaler, damit die nächste angeschnitten sichtbar bleibt —
   genau daran erkennt man, dass es weitergeht. */
@media(max-width:760px){
  .karussell-pfeil{display:none}
  .karussell-bahn{gap:18px}
  .karussell-bahn .karte{flex:0 0 76%}
  .karussell-bahn strong{font-size:18px}
}


/* ══ SUCHLEISTE AUF ZWEI FELDER EINGEDAMPFT ════════════════════════════
   Robert, 11.09.2026: „Nur Datumsauswahl und Anzahl Gäste, sonst nichts."

   Avantio gibt jedem Feld einen eigenen Umschlag, deshalb genügt hier
   das Stylesheet — an ihrem Code rühren wir nicht. Die drei
   ausgeblendeten Felder stehen alle auf „Wählen Sie", also auf KEINER
   Einschränkung; sie schicken diesen neutralen Wert weiterhin mit, und
   die Suche liefert alles, was zum Zeitraum passt. Genau das ist gewollt.

   ⚠ display:none und nicht etwa aus dem HTML entfernen — die Felder
   müssen im Formular bleiben, sonst fehlen sie beim Absenden.

   ⚠ Avantio schiebt sein flexible-search.css INLINE und damit NACH
   unserem Stylesheet ein. Ohne !important gewinnen ihre Regeln. Am
   01.09.2026 genau daran gescheitert. */
.suchfeld .wrapper-FRMPais,
.suchfeld .wrapper-FRMDestino,
.suchfeld .wrapper-FRMClase,
/* Kinder raus, seit dem 12.09.2026. Robert: „Das spielt keine Rolle."
   Das Feld bleibt im Formular und schickt weiterhin „Wählen Sie" mit —
   die Gästezahl steht damit vollständig im Feld „Erwachsene". */
.suchfeld .wrapper-FRMNinyos{display:none !important}
.suchfeld .switch-button-wrapper{display:none !important}

/* Was übrig bleibt, soll die Breite auch ausfüllen: der Zeitraum nimmt
   sich den Platz, die beiden Gästefelder bleiben schmal. */
.suchfeld .wrapper-travel-period{flex:1 1 auto !important;min-width:230px !important}
.suchfeld .wrapper-FRMAdultos{flex:0 1 auto !important;min-width:120px !important}
/* Der Knopf darf nicht die halbe Leiste einnehmen. */
.suchfeld.echt .boton_buscar,
.suchfeld.echt button[type=submit],
.suchfeld.echt input[type=submit]{max-width:200px}

/* Am Handy untereinander statt nebeneinander gequetscht. */
@media(max-width:600px){
  .suchfeld.echt{max-width:100%}
  .suchfeld .wrapper-travel-period,
  .suchfeld .wrapper-FRMAdultos{flex:1 1 100% !important;min-width:0 !important}
}


/* Der zweite Kasten in der rechten Spalte (Paula). Ruecken statt Rahmen:
   Er gehoert sichtbar zur Anschrift darueber, ist aber eine eigene Karte. */
.spalte-rechts{display:flex;flex-direction:column}
.kasten.karte.paula{margin-top:20px}
.kasten.karte.paula .fliess{margin:0}
.kasten.karte.paula .knopf-reihe{margin-top:18px}

/* ══ KONTAKTFORMULAR ═══════════════════════════════════════════════════
   Hausstil statt Browservorgabe: Sandflaeche, ein Haarstrich als Rahmen,
   Rostrot nur dort, wo der Gast gerade ist. Keine runden Ecken ueber 10 px,
   sonst wirkt es wie ein fremdes Bauteil. */
.formular{margin-top:30px;text-align:left}
.formular .feldpaar{display:flex;gap:18px;flex-wrap:wrap}
.formular .feldpaar > .feld{flex:1 1 240px}
.formular .feldpaar > .feld.schmal{flex:0 1 170px}
.formular .feld{display:block;margin-bottom:20px}
/* Die Feldbeschriftungen waren zu blass zum Lesen (Aurora, 16.09.2026):
   Rostrot in 12 px Versalien auf Sand ist zu wenig Kontrast. Jetzt die
   dunklere Hausfarbe, etwas groesser, kraeftiger und mit weniger
   Sperrung — Versalien brauchen Gewicht, sonst zerfallen sie. */
.formular .feld > span{display:block;font-family:var(--sans);font-size:12.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rust-dunkel);margin-bottom:8px}
.formular select{width:100%;box-sizing:border-box;font-family:var(--lese);
  font-size:16px;line-height:1.6;color:inherit;background:var(--sand);
  border:1px solid rgba(118,45,40,.18);border-radius:8px;padding:12px 14px;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23762d28' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  background-size:11px;padding-right:38px;transition:border-color .18s,box-shadow .18s}
.formular select:focus{outline:none;border-color:var(--rust);
  box-shadow:0 0 0 3px rgba(118,45,40,.10)}
.formular input[type=text],.formular input[type=email],.formular textarea{
  width:100%;box-sizing:border-box;font-family:var(--lese);font-size:16px;
  line-height:1.6;color:inherit;background:var(--sand);
  border:1px solid rgba(118,45,40,.18);border-radius:8px;padding:12px 14px;
  transition:border-color .18s, box-shadow .18s}
.formular textarea{resize:vertical;min-height:130px}
.formular input:focus,.formular textarea:focus{outline:none;
  border-color:var(--rust);box-shadow:0 0 0 3px rgba(118,45,40,.10)}
.formular input::placeholder{color:rgba(90,60,45,.42)}
.formular .feld em{display:block;margin-top:6px;font-style:normal;
  font-family:var(--sans);font-size:12.5px;color:var(--rust)}
.formular .einwilligung{display:flex;gap:11px;align-items:flex-start;
  margin:6px 0 4px;font-family:var(--lese);font-size:15px;line-height:1.65}
.formular .einwilligung input{margin-top:4px;flex:0 0 auto;
  width:17px;height:17px;accent-color:var(--rust)}
.formular em.einwilligung-fehler{display:block;font-style:normal;
  font-family:var(--sans);font-size:12.5px;color:var(--rust);margin-bottom:10px}
.formular .knopf-reihe{margin-top:24px}
.formular button.knopf{cursor:pointer;font:inherit;font-family:var(--sans);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase}

/* Der Honigtopf. Nicht display:none — manche Automaten ueberspringen
   verborgene Felder. Er wird aus dem Bild geschoben und bleibt ausfuellbar. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formular-danke{margin-top:26px;padding:28px 26px;border-radius:12px;
  background:var(--sand);border:1px solid rgba(118,45,40,.16);text-align:left}
.formular-danke h3{margin:0 0 10px;color:var(--rust)}
.formular-panne{margin-top:18px;padding:14px 16px;border-radius:8px;
  background:rgba(118,45,40,.07);border:1px solid rgba(118,45,40,.22);
  font-family:var(--lese);font-size:15px}

@media (max-width:620px){
  .formular .feldpaar{gap:0}
  .formular .feldpaar > .feld,.formular .feldpaar > .feld.schmal{flex:1 1 100%}
}

/* ══ KOMMT DEMNÄCHST ═══════════════════════════════════════════════════
   Häuser, die es noch nicht gibt. Sie müssen auf den ersten Blick anders
   aussehen als die buchbaren, sonst klickt jemand und ärgert sich.
   Deshalb: kein Link, ein ruhigeres Bild und eine Fahne in der Ecke. */
.demnaechst .favoriten img{filter:saturate(.82)}
.demnaechst .bildfeld{position:relative}
.demnaechst .karte:hover .bildfeld img{transform:none;
  box-shadow:0 10px 26px rgba(90,60,45,.11)}     /* nichts hebt sich an */
.demnaechst .ohne-link{display:block;cursor:default}
/* Die Flaeche ueber dem Bild macht die ganze Kachel anklickbar, ohne das
   Bild in einen Link zu wickeln — der Platzhalter ist ja gar kein Bild.
   Unter der BALD-BUCHBAR-Fahne, damit die sichtbar bleibt. */
.demnaechst .dem-flaeche{position:absolute;inset:0;z-index:1}
/* Knopf INNERHALB einer Karte (Can Perla). Er steht damit genau unter
   seinem Haus statt zentriert unter der ganzen Gruppe, wo ihn von der
   Karte fuenf Platzhalter trennten. Er nimmt die Breite der Karte an,
   damit die Kachel eine Einheit bleibt. */
.favoriten .karte .karten-knopf{margin-top:16px}
.favoriten .karte .karten-knopf .knopf{display:block;width:100%;
  text-align:center;font-size:11.5px;letter-spacing:.13em;padding:13px 10px}

/* Karte ohne Foto. Bewusst KEIN Bild, das etwas behauptet: Sandfläche,
   Signet, ein Wort. Gleiches Seitenverhältnis wie die Fotos (3:2), damit
   die Reihe nicht springt, wenn eines der fünf ein echtes Bild bekommt. */
.demnaechst .platzhalter{aspect-ratio:3/2;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;border-radius:14px;
  background:var(--sand);
  border:1px solid rgba(118,45,40,.16);
  box-shadow:0 10px 26px rgba(90,60,45,.07)}
.demnaechst .platzhalter img{width:74px;height:auto;opacity:.42;
  filter:none;border-radius:0;box-shadow:none}
.demnaechst .platzhalter span{font-family:var(--sans);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust);opacity:.62}

/* Dieselbe Fahne, aber an einer ganz normalen Karte: „Neu" am Studio Sa
   Calatrava in der Altstadt (23.09.2026). Sie steht bewusst NICHT unter
   .demnaechst — dort wuerde sie das Bild mit blassziehen und den Klick
   entwerten, und genau das soll sie hier nicht. */
.favoriten .bildfeld.mit-marke{position:relative}
.favoriten .marke{position:absolute;left:14px;top:14px;z-index:2;
  padding:6px 13px;border-radius:999px;
  background:var(--rust);color:var(--cream);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;
  box-shadow:0 4px 14px rgba(90,60,45,.28)}

.demnaechst .bald{position:absolute;left:14px;top:14px;z-index:2;
  padding:6px 13px;border-radius:999px;
  background:var(--rust);color:var(--cream);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;
  box-shadow:0 4px 14px rgba(90,60,45,.28)}

/* Die Gruppen haben seit dem 11.09.2026 bis zu sieben Karten (Delta und
   die beiden Luna stehen doppelt). Die gestaffelte Einblendung zählte
   nur bis sechs — ab der siebten fehlte die Verzögerung, und die Karte
   sprang aus der Reihe. */
.favoriten.gross .karte:nth-child(7){transition-delay:.48s}
.favoriten.gross .karte:nth-child(8){transition-delay:.56s}
.favoriten.gross .karte:nth-child(9){transition-delay:.64s}