/* private-stadtfuehrung.de — statische Version
   Klassen-Praefix: psf-
   Struktur folgt components.md. Neue Klasse? Erst dort eintragen. */

:root{
  /* Warme Palette, abgeleitet aus der WordPress-Fassung dieser Website:
     #4e342e als Textbraun, #faeae6 als Kartenflaeche, #fc815d als Buttonfarbe.
     Der Buttonton ist abgedunkelt, weil weisse Schrift auf #fc815d nur rund
     2,6:1 erreicht und damit unlesbar waere. Die Schwester-Site
     stadtfuehrung-auf-deutsch.de bleibt bei Petrol und Orange — beide Sites
     ranken fuer aehnliche Begriffe und sollen nicht verwechselt werden. */
  --c-ink:#40291f;
  --c-ink-soft:#71574a;
  --c-line:#ead9d1;
  --c-bg:#ffffff;
  --c-bg-soft:#fbf4f0;
  --c-accent:#7a4436;
  --c-accent-dark:#5c3126;
  --c-accent-soft:#f6e5dc;
  --c-cta:#c4471f;
  --c-cta-dark:#a13817;
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem;
  /* Kleiner Radius: eckiger, redaktioneller als die abgerundeten Karten
     der Schwester-Site. Buttons setzen sich davon bewusst als Pille ab. */
  --r:4px;
  --wrap:1140px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Ueberschriften in einer Serife. Georgia ist auf allen gaengigen Systemen
     vorhanden — kein Webfont, keine externe Anfrage, kein Ladeverzug. */
  --font-h:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.65;
  color:var(--c-ink);background:var(--c-bg);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-accent);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--c-accent-dark)}

.psf-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-2)}

.psf-skip{position:absolute;left:-9999px}
.psf-skip:focus{left:var(--s-2);top:var(--s-2);z-index:100;background:#fff;padding:var(--s-1) var(--s-2);border-radius:var(--r)}

/* ---------------------------------------------------------- Header */
.psf-header{border-bottom:1px solid var(--c-line);background:#fff;position:sticky;top:0;z-index:50;
  /* Schmaler Markenstreifen ueber dem Kopf — das erste, was die Site von der
     Schwester-Site unterscheidet, noch vor dem Logo. */
  box-shadow:inset 0 4px 0 0 var(--c-cta)}
.psf-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:94px}
.psf-logo img{max-height:66px;width:auto}

.psf-nav__toggle{
  display:inline-flex;align-items:center;gap:.6em;
  font:inherit;font-weight:600;color:#fff;
  background:var(--c-accent);border:1px solid var(--c-accent);
  border-radius:999px;padding:.6em 1.3em;cursor:pointer;
}
.psf-nav__toggle:hover{background:var(--c-accent-dark);border-color:var(--c-accent-dark);color:#fff}
.psf-nav__bars{width:18px;height:2px;background:currentColor;position:relative;display:inline-block}
.psf-nav__bars::before,.psf-nav__bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.psf-nav__bars::before{top:-6px}
.psf-nav__bars::after{top:6px}

.psf-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
  border-bottom:1px solid var(--c-line);box-shadow:0 12px 28px rgba(16,32,48,.10);max-height:75vh;overflow:auto}
.psf-menu.is-open{display:block}
.psf-menu__grid{max-width:var(--wrap);margin:0 auto;padding:var(--s-3) var(--s-2);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.psf-menu__title{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-ink-soft);margin:0 0 var(--s-1);font-weight:700}
.psf-menu ul{list-style:none;margin:0;padding:0}
.psf-menu li{margin:0 0 2px}
.psf-menu a{display:block;padding:3px 0;text-decoration:none;color:var(--c-ink);font-size:.95rem}
.psf-menu a:hover,.psf-menu a[aria-current]{color:var(--c-accent);text-decoration:underline}

/* ---------------------------------------------------------- Seite */
.psf-h1,.psf-h2,.psf-h3,.psf-h4{font-family:var(--font-h);font-weight:700}
.psf-h1{font-size:clamp(1.75rem,4.2vw,2.55rem);line-height:1.18;margin:var(--s-4) 0 var(--s-3);
  letter-spacing:-.01em}
/* Abschnittsmarke: kurze Linie ueber der h2 statt einer Rahmenlinie darunter. */
.psf-h2{font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.25;margin:var(--s-5) 0 var(--s-2);
  padding-top:var(--s-2);scroll-margin-top:112px;position:relative}
.psf-h2::before{content:"";position:absolute;top:0;left:0;width:2.6rem;height:3px;
  background:var(--c-cta)}
.psf-h3{font-size:1.22rem;margin:var(--s-4) 0 var(--s-1)}
.psf-h4{font-size:1.06rem;margin:var(--s-3) 0 var(--s-1)}

.psf-hero{margin:0 0 var(--s-4)}
/* Die Motive sind rund 1000x520. Frueher liefen sie ueber die volle
   Fensterbreite und wurden beschnitten — jetzt auf Inhaltsbreite und im
   Originalverhaeltnis, ohne Hochskalieren ueber die echte Bildbreite. */
.psf-hero img{width:100%;max-width:100%;border-radius:var(--r);
  /* Anbieterfotos kommen im Format 3:2. Ueber die volle Inhaltsbreite waere
     das ein 760 px hoher Kopf — deshalb auf 2:1 beschnitten. */
  aspect-ratio:2/1;height:auto;object-fit:cover}
.psf-hero figcaption,.psf-tour__media figcaption{
  margin:.45em 0 0;font-size:.78rem;color:var(--c-ink-soft);text-align:right}

.psf-content{padding-bottom:var(--s-5)}
.psf-text{margin:0 0 var(--s-2)}
.psf-text p{margin:0 0 var(--s-2)}
.psf-text ul,.psf-text ol{margin:0 0 var(--s-2);padding-left:1.4em}
.psf-text li{margin:0 0 .35em}
/* Die Motive im Fliesstext sind 1000px breit, die Inhaltsspalte rund 1100px.
   Statt das Bild hochzurechnen — das kostet Schaerfe — steht es mittig, und
   das <figure> schrumpft per fit-content auf die echte Bildbreite. Nur so
   sitzt der Bildnachweis buendig am Motiv und nicht an der Spaltenkante. */
.psf-figure{margin:var(--s-3) auto;width:-moz-fit-content;width:fit-content;
  max-width:100%;position:relative}
.psf-figure img{border-radius:var(--r);margin:0 auto}
/* Bildnachweis als Overlay auf dem Bild — dieselbe Loesung wie bei den
   Startseiten-Kacheln und „Aehnliche Reiseziele". Deckender Grund statt
   Verlauf, damit die Zeile auf jedem Motiv lesbar bleibt. */
.psf-figure figcaption{position:absolute;right:0;bottom:0;margin:0;
  max-width:calc(100% - 1em);padding:.2em .6em;
  font-size:.72rem;line-height:1.45;color:#fff;
  background:rgba(16,32,48,.62);
  border-top-left-radius:6px;border-bottom-right-radius:var(--r);
  text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none}

/* ---------------------------------------------------------- Inhaltsverzeichnis */
.psf-toc{background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--r);
  padding:var(--s-2) var(--s-3);margin:0 0 var(--s-4)}
.psf-toc__title{margin:0 0 var(--s-1);font-weight:700}
.psf-toc ol{margin:0;padding-left:1.3em}
.psf-toc li{margin:.2em 0}

/* ---------------------------------------------------------- Tour-Karte */
.psf-tour{border:1px solid var(--c-line);border-left:4px solid var(--c-cta);
  border-radius:0 var(--r) var(--r) 0;
  padding:var(--s-3);margin:0 0 var(--s-4);background:#fff;
  /* Textfarben explizit setzen: die Karte darf auf jedem Hintergrund stehen */
  color:var(--c-ink)}
.psf-tour__title{display:flex;align-items:baseline;gap:.5em;font-family:var(--font-h);
  font-size:1.3rem;margin:0 0 var(--s-2);color:var(--c-ink)}
/* Die Nummer ist eine gesetzte Ziffer, kein Kreis: ruhiger und passend zur
   Serife der Ueberschriften. */
.psf-tour__num{flex:0 0 auto;font-family:var(--font-h);font-size:1.5em;
  font-weight:700;line-height:1;color:var(--c-cta)}
.psf-tour__grid{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
.psf-tour__desc{color:var(--c-ink)}
.psf-tour__desc p{margin:0 0 var(--s-2)}
/* Standardhinweise: kompakte Liste, klar von den tourspezifischen Saetzen
   getrennt. Inhalt kommt aus psf_hinweis(), nicht aus den Stadtdateien. */
.psf-tour__hints{list-style:none;margin:var(--s-2) 0 0;padding:0;
  font-size:.9rem;color:var(--c-ink-soft)}
.psf-tour__hints li{position:relative;padding:.15em 0 .15em 1.35em}
.psf-tour__hints li::before{content:"›";position:absolute;left:.35em;
  color:var(--c-cta);font-weight:700}
.psf-tour__notes{margin-top:var(--s-2);font-size:.94rem;color:var(--c-ink-soft)}
.psf-tour__notes p{margin:0 0 .7em}
/* Die Bildspalte ist ein <figure>, damit der Bildnachweis am Bild haengt.
   Ohne expliziten Reset traegt <figure> die Standardraender des Browsers. */
.psf-tour__media{margin:0}
.psf-tour__media img{border-radius:var(--r);width:100%;height:auto}
/* GYG und Tiqets liefern wir im 3:2-Format an — sauber zuschneidbar. */
.psf-tour__media img.is-photo{aspect-ratio:3/2;object-fit:cover}
/* GoNativeGuide hostet die Originale, oft hochkant. Kein Zuschnitt, nur
   eine Hoehenbegrenzung, sonst wird die Karte unverhaeltnismaessig lang. */
.psf-tour__media img.is-portrait{aspect-ratio:auto;object-fit:contain;
  max-height:420px;width:auto;max-width:100%;margin:0 auto;background:var(--c-bg-soft)}

/* Faktenliste */
/* Faktenzeilen ohne Trennlinien: die Zeilen sind abwechselnd getoent.
   Das ist ruhiger als ein Liniengitter und deutlich anders als die
   Tabellenoptik der Schwester-Site. */
.psf-facts{list-style:none;margin:var(--s-2) 0;padding:0;border-top:0}
.psf-fact{display:flex;flex-wrap:wrap;gap:.2em .8em;padding:.5em .7em;
  border-bottom:0;font-size:.95rem;color:var(--c-ink)}
.psf-fact:nth-child(odd){background:var(--c-bg-soft)}
.psf-fact[hidden]{display:none}
.psf-fact__label{flex:0 0 11rem;font-weight:600;color:var(--c-ink-soft);
  font-size:.86rem;text-transform:uppercase;letter-spacing:.04em}
.psf-fact__value{flex:1 1 14rem;color:var(--c-ink)}
/* Praefix statt exakter Klasse: psf_slugify_heading() bildet das Label ab,
   und seit dem 13.08.2026 gibt es neben "Preis" auch "Preis (Fuehrung auf
   Deutsch)" und "Preis (Fuehrung auf Englisch)" -> psf-fact--preis-fuehrung-
   auf-deutsch. Eine exakte Klasse haette diese Zeilen ungestylt gelassen. */
[class*="psf-fact--preis"] .psf-fact__value{font-weight:700;color:var(--c-cta)}
.psf-fact--bewertung-der-tour .psf-fact__value{font-weight:600}
.psf-live:empty{display:none}

/* ---------------------------------------------------------- Buttons */
.psf-cta-wrap{margin:var(--s-3) 0 0;text-align:center}
.psf-btn{display:inline-block;padding:.85em 2em;border-radius:999px;
  background:var(--c-accent);color:#fff;font-weight:700;text-decoration:none;
  line-height:1.3;transition:background .15s ease,transform .15s ease}
.psf-btn:active{transform:translateY(1px)}
.psf-btn:hover{background:var(--c-accent-dark);color:#fff}
.psf-btn--primary{background:var(--c-cta)}
.psf-btn--primary:hover{background:var(--c-cta-dark)}

/* ---------------------------------------------------------- FAQ */
.psf-faq{margin:var(--s-2) 0 var(--s-4);border-top:1px solid var(--c-line)}
.psf-faq__item{border-bottom:1px solid var(--c-line)}
.psf-faq__item summary{cursor:pointer;padding:.9em 0;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-2)}
.psf-faq__item summary::-webkit-details-marker{display:none}
.psf-faq__item summary::after{content:"+";font-size:1.4em;color:var(--c-cta);line-height:1}
.psf-faq__item[open] summary::after{content:"–"}
.psf-faq__a{padding:0 0 var(--s-2)}
.psf-faq__a p{margin:0 0 .7em}

/* Die Regeln der Autorenbox (.psf-author …) sind am 13.08.2026 entfallen, als
   der Abschnitt „Wer schreibt hier?" von der Site genommen wurde. Kommt er
   zurueck, kommen sie mit ihm — partials/author.php liegt unveraendert da. */

/* ---------------------------------------------------------- Footer */
.psf-footer{border-top:1px solid var(--c-line);background:var(--c-bg-soft);
  padding:var(--s-4) 0;margin-top:var(--s-5);font-size:.9rem}
.psf-footer__note{margin:0 0 var(--s-2);color:var(--c-ink-soft);max-width:60ch}
.psf-footer__links{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-2);padding:0}
.psf-footer__copy{margin:0;color:var(--c-ink-soft)}

/* ---------------------------------------------------------- Desktop */
@media (min-width:900px){
  .psf-tour__grid{grid-template-columns:1fr 340px;align-items:start}
  .psf-tour{padding:var(--s-4)}
}
@media (max-width:899px){
  .psf-menu__grid{grid-template-columns:1fr 1fr;gap:var(--s-2)}
  .psf-fact{flex-direction:column;gap:0}
  .psf-fact__label{flex:none;font-size:.82rem;text-transform:uppercase;
    letter-spacing:.04em;color:var(--c-ink-soft)}
  /* Wichtig: In der Spaltenrichtung wird flex-basis zur HOEHE. Der Wert
     14rem aus der Desktop-Regel hat jede Faktenzeile auf Mobil rund 220 px
     hoch gemacht — daher die riesigen Luecken zwischen Label und Wert. */
  .psf-fact__value{flex:0 1 auto}
  .psf-tour__media{order:-1}
}
@media (max-width:560px){
  body{font-size:16px}
  .psf-menu__grid{grid-template-columns:1fr}
  .psf-btn{display:block;width:100%}
  .psf-region ul{columns:1}
}

/* ---------------------------------------------------------- Startseite: Städteverzeichnis
   Die Regionen kommen als h3 + <ul> aus dem Bestand. Statt das Markup
   umzubauen, werden die Listen hier mehrspaltig gesetzt. */
body.psf-startseite .psf-h3{
  font-size:1.05rem;margin:var(--s-4) 0 var(--s-1);
  padding-bottom:.3em;border-bottom:2px solid var(--c-accent-soft)
}
body.psf-startseite .psf-h3 + .psf-text ul{
  list-style:none;padding:0;margin:0;
  columns:4;column-gap:var(--s-3)
}
body.psf-startseite .psf-h3 + .psf-text ul li{margin:0 0 .25em;break-inside:avoid}
@media (max-width:899px){ body.psf-startseite .psf-h3 + .psf-text ul{columns:2} }
@media (max-width:560px){ body.psf-startseite .psf-h3 + .psf-text ul{columns:1} }

/* ==========================================================================
   Startseite
   ========================================================================== */

/* Nur die senkrechten Abstaende setzen, niemals `padding` als Kurzform: Jeder
   Abschnitt der Startseite traegt `psf-wrap psf-section`, und `.psf-wrap`
   liefert den seitlichen Rand. Eine Kurzform ueberschreibt ihn — beide Regeln
   haben dieselbe Spezifitaet, diese steht spaeter in der Datei und gewinnt.
   Genau daran lagen die Kacheln der Startseite unter 1140 px Fensterbreite
   randlos am Bildschirmrand, waehrend Kopf, Einstieg und Fuss ihren Abstand
   behielten (bemerkt am 13.08.2026, Patrick). */
.psf-section{padding-top:var(--s-5)}
.psf-section__sub{margin:-.4em 0 var(--s-3);color:var(--c-ink-soft);max-width:62ch}
.psf-band{background:var(--c-bg-soft);border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);margin-top:var(--s-5)}
.psf-band .psf-section{padding-bottom:var(--s-5)}

/* --- Einstieg */
.psf-intro{border-bottom:1px solid var(--c-line);
  background:linear-gradient(180deg,var(--c-accent-soft) 0%,#fff 100%)}
.psf-intro__inner{display:grid;grid-template-columns:1fr;gap:var(--s-4);
  padding-top:var(--s-4);padding-bottom:var(--s-5)}
.psf-intro .psf-h1{margin:0 0 var(--s-2)}
.psf-lead{font-size:1.12rem;line-height:1.6;margin:0 0 var(--s-2);max-width:62ch}
.psf-lead--sub{font-size:1rem;color:var(--c-ink-soft)}
.psf-intro__cta{margin:var(--s-3) 0 0}

.psf-stats{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0}
.psf-stats li{flex:1 1 8rem;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r);padding:var(--s-2);text-align:center}
.psf-stats strong{display:block;font-size:1.7rem;line-height:1.1;color:var(--c-accent-dark)}
.psf-stats span{font-size:.82rem;color:var(--c-ink-soft)}

/* --- Reiseziel-Kacheln */
.psf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--s-3)}
.psf-tile{display:block;text-decoration:none;color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;background:#fff;
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.psf-tile:hover{box-shadow:0 8px 22px rgba(16,32,48,.12);transform:translateY(-2px);
  border-color:var(--c-accent);color:var(--c-ink)}
.psf-tile__img{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--c-bg-soft)}
.psf-tile__img img{width:100%;height:100%;object-fit:cover;display:block}
/* Bildnachweis direkt am Bild, damit die Zuordnung eindeutig bleibt.
   Heller Text auf einem Verlauf — lesbar auf hellen wie dunklen Motiven. */
.psf-tile__credit{position:absolute;left:0;right:0;bottom:0;
  padding:1.4em .6em .35em;font-size:.66rem;line-height:1.3;color:#fff;
  text-align:right;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 100%)}
.psf-tile__body{display:block;padding:var(--s-2)}
.psf-tile__city{display:block;font-weight:700;font-size:1.08rem;line-height:1.25}
.psf-tile__meta{display:flex;flex-wrap:wrap;gap:.2em .6em;align-items:baseline;
  margin-top:.25em;font-size:.87rem;color:var(--c-ink-soft)}

/* --- Drei Spalten */
.psf-cols{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
.psf-col{background:#fff;border:1px solid var(--c-line);border-radius:var(--r);
  padding:var(--s-3);color:var(--c-ink)}
.psf-col h3{margin:0 0 var(--s-1);font-size:1.1rem;color:var(--c-accent-dark)}
.psf-col p{margin:0 0 var(--s-2);font-size:.95rem}

/* --- Städteverzeichnis */
.psf-regions{columns:4 240px;column-gap:var(--s-4);margin:var(--s-3) 0 0}
.psf-region{break-inside:avoid;-webkit-column-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 var(--s-4)}
.psf-region h3{font-size:.95rem;margin:0 0 var(--s-1);padding-bottom:.35em;
  border-bottom:2px solid var(--c-accent-soft);display:flex;justify-content:space-between;
  align-items:baseline;gap:.5em}
.psf-region__n{font-size:.78rem;font-weight:400;color:var(--c-ink-soft)}
.psf-region ul{list-style:none;margin:0;padding:0}
.psf-region li{margin:0;border-bottom:1px solid var(--c-line)}
.psf-region li a{display:inline-block;padding:.32em 0;font-size:.94rem;text-decoration:none}
.psf-region li a:hover{text-decoration:underline}
.psf-region__c{float:right;padding:.32em 0;font-size:.78rem;color:var(--c-ink-soft)}

/* --- Fließtext-Abschnitt */
.psf-prose{max-width:72ch}
.psf-prose p{margin:0 0 var(--s-2)}

@media (min-width:760px){
  .psf-cols{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}
@media (min-width:900px){
  .psf-intro__inner{grid-template-columns:1fr 300px;align-items:start;gap:var(--s-5)}
  .psf-stats{flex-direction:column}
  .psf-stats li{flex:0 0 auto;text-align:left;display:flex;align-items:baseline;gap:.6em}
  .psf-stats strong{font-size:1.5rem}
}
@media (max-width:560px){
  .psf-tiles{grid-template-columns:1fr 1fr;gap:var(--s-2)}
  .psf-tile__body{padding:.6rem}
  .psf-tile__city{font-size:.95rem}
  .psf-tile__meta{font-size:.8rem}
  .psf-regions{grid-template-columns:1fr}
}

/* ==========================================================================
   Sterne und Preise — rein darstellend, gilt auf allen Seiten
   ========================================================================== */
/* Der Wert kommt als --v (0–5) aus dem Renderer bzw. aus site.js beim
   Kaltstart. Zwei uebereinanderliegende Sternenreihen, die obere wird auf
   den Anteil beschnitten. Kein Bild, keine Schrift-Abhaengigkeit. */
.psf-stars{--v:0;position:relative;display:inline-block;vertical-align:-.1em;
  font-size:1.02em;line-height:1;letter-spacing:.06em;white-space:nowrap}
.psf-stars::before{content:"★★★★★";color:#d9e0e6}
.psf-stars::after{content:"★★★★★";color:#f0a202;position:absolute;left:0;top:0;
  width:calc(var(--v) / 5 * 100%);overflow:hidden}
.psf-fact--bewertung-der-tour .psf-fact__value{display:flex;flex-wrap:wrap;
  align-items:center;gap:.45em;font-weight:400}
.psf-fact--bewertung-der-tour .psf-live{font-size:.92rem;color:var(--c-ink-soft)}
/* Preis: "ab" und "/ Person" bleiben klein, die Zahl traegt das Gewicht.
   Praefixauswahl, siehe oben bei psf-fact--preis. */
[class*="psf-fact--preis"] .psf-fact__value{font-weight:400;color:var(--c-ink-soft)}
[class*="psf-fact--preis"] .psf-live{font-size:1.22rem;font-weight:700;color:var(--c-accent-dark)}

/* ==========================================================================
   Seitenaufbau v2 — nur fuer Stadtdateien mit "layout": 2
   ========================================================================== */

/* --- Brotkrume */
.psf-crumbs{margin:var(--s-2) 0 0;font-size:.85rem;color:var(--c-ink-soft)}
.psf-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:0}
.psf-crumbs li::after{content:"›";margin-left:.4em;color:var(--c-line)}
.psf-crumbs li:last-child::after{content:""}
.psf-crumbs a{color:var(--c-ink-soft)}
.psf-crumbs [aria-current]{color:var(--c-ink);font-weight:600}

/* --- Hero, zweiteilig */
/* Flaechig getoenter Kopf statt eines Verlaufs — der Verlauf gehoert zur
   Schwester-Site. */
.psf-hero2{border-bottom:1px solid var(--c-line);background:var(--c-bg-soft)}
.psf-hero2__inner{display:grid;grid-template-columns:1fr;gap:var(--s-3);
  padding-top:var(--s-3);padding-bottom:var(--s-4);align-items:center}
.psf-hero2 .psf-h1{margin:0 0 var(--s-2);font-size:clamp(1.7rem,3.6vw,2.4rem)}
.psf-hero2__sub{margin:0 0 var(--s-3);font-size:1.06rem;color:var(--c-ink-soft);max-width:52ch}
.psf-hero2__facts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  margin:0 0 var(--s-3);padding:0}
/* Kennzahl ueber der Beschriftung, Beschriftung in Versalien — die
   Schwester-Site setzt sie mit einer farbigen Leiste links daneben. */
.psf-hero2__facts li{display:flex;flex-direction:column-reverse;line-height:1.25;
  padding:0;border-left:0}
.psf-hero2__facts strong{font-family:var(--font-h);font-size:1.35rem;color:var(--c-ink)}
.psf-hero2__facts span{font-size:.72rem;color:var(--c-ink-soft);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:.15em}
.psf-hero2__cta{margin:0 0 var(--s-2)}
.psf-hero2__note{margin:0;font-size:.8rem;color:var(--c-ink-soft)}
.psf-hero2__media{margin:0}
.psf-hero2__media img{border-radius:var(--r);width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:center 55%;
  box-shadow:0 10px 26px rgba(64,41,31,.16)}
.psf-hero2__media figcaption{margin:.45em 0 0;font-size:.78rem;
  color:var(--c-ink-soft);text-align:right}

/* --- Angebotsuebersicht direkt unter dem Hero */
/* --- Angebotsuebersicht: nur die Namen.
   Frueher stand hier eine Tabelle aus Nummer, Titel, Gruppengroesse und
   Ab-Preis — dieselben Angaben, die zwei Bildschirmhoehen weiter unten in
   jeder Karte noch einmal stehen. Sie fuellten die Seite, ohne eine Frage zu
   beantworten, und sie sahen aus wie auf der Schwester-Site. Jetzt ist es
   eine Reihe von Sprungmarken: Was gibt es hier, und wo steht es? */
.psf-overview{border:0;background:none;padding:0;margin:0 0 var(--s-4)}
.psf-overview__title{margin:0 0 var(--s-2);font-family:var(--font-h);
  font-size:1.1rem;font-weight:700}
/* Untereinander, eine Fuehrung je Zeile. Nebeneinander als Pillen war zwar
   kompakt, aber bei zwoelf Angeboten mit langen Titeln nicht mehr zu
   ueberblicken — das Auge findet keine Kante, an der es entlanglaufen kann. */
.psf-overview ol{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--c-line)}
.psf-overview li{display:block;padding:0;border-bottom:1px solid var(--c-line)}
.psf-overview__name{display:flex;align-items:baseline;gap:.7em;
  padding:.62em .5em;color:var(--c-ink);text-decoration:none;
  font-size:1rem;line-height:1.3;transition:background .15s ease}
.psf-overview__name:hover{background:var(--c-bg-soft);color:var(--c-ink);
  text-decoration:none}
/* Die Ziffer bekommt eine feste Breite, damit die Titel auf einer Kante
   stehen — auch ab Nummer zehn. */
.psf-overview__n{flex:0 0 1.6em;text-align:right;font-family:var(--font-h);
  font-weight:700;color:var(--c-cta)}
/* Winkel am rechten Rand: macht sichtbar, dass die Zeile ein Sprungziel ist. */
.psf-overview__name::after{content:"\203A";margin-left:auto;padding-left:.6em;
  color:var(--c-ink-soft);font-weight:700}
.psf-overview__name:hover::after{color:var(--c-cta)}

/* --- Aehnliche Reiseziele */
.psf-nearby{margin:var(--s-4) 0 0}
.psf-nearby__title{margin:0 0 var(--s-2);font-weight:700}
.psf-nearby__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--s-2);list-style:none;margin:0;padding:0}
.psf-nearby a{display:block;text-decoration:none;color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;background:#fff;
  transition:box-shadow .15s ease,border-color .15s ease}
.psf-nearby a:hover{box-shadow:0 8px 22px rgba(16,32,48,.12);border-color:var(--c-accent)}
.psf-nearby__img{display:block;position:relative}
.psf-nearby img{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--c-bg-soft)}
/* Bildnachweis als Overlay am Bild — dieselbe Loesung wie bei den Kacheln
   auf der Startseite, damit die Zuordnung eindeutig bleibt. */
.psf-nearby__credit{position:absolute;right:0;bottom:0;
  padding:.15em .5em;font-size:.68rem;line-height:1.4;
  color:#fff;background:rgba(16,32,48,.55);border-top-left-radius:6px}
.psf-nearby__body{display:block;padding:.7em .9em .9em}
.psf-nearby__city{display:block;font-weight:700}
.psf-nearby__meta{display:block;font-size:.82rem;color:var(--c-ink-soft)}

/* Der Fliesstext darf nicht an der Hero-Kante kleben. */
.psf-hero2 + .psf-content{padding-top:var(--s-4)}

/* Verlinkte Angebotsnamen sehen aus wie Text, verhalten sich wie Links. */

@media (min-width:900px){
  .psf-hero2__inner{grid-template-columns:1fr 460px;gap:var(--s-5);
    padding-bottom:var(--s-5)}
}
@media (max-width:899px){
  .psf-hero2__media{order:-1}
  /* Der Hero-Button ist eine Sprungmarke, kein Buchungsknopf — er muss nicht
     ueber die volle Breite laufen. Die globale Regel fuer .psf-btn gilt weiter
     fuer die Buchungsbuttons. */
  .psf-hero2__cta .psf-btn{display:inline-block;width:auto}
}
@media (max-width:699px){
  /* Angebotsuebersicht auf Mobil entschlacken: Nummer und Titel in einer
     Zeile, Preis darunter. Die Gruppengroesse faellt weg — sie steht in der
     Karte selbst und macht die Zeile hier nur unruhig. */
}
@media (max-width:560px){
  .psf-hero2__cta .psf-btn{display:inline-block;width:auto}
}

/* --- Ratgeber: Block in der Fusszeile.
   Die Regeln fuer ein Ratgeber-Kachelmodul (.psf-guides, __title, __teaser)
   sind am 13.08.2026 entfallen — das Markup dazu gab es in keinem Template,
   und data/site.php fuehrt eine leere Ratgeber-Liste. Kommt das Modul, kommen
   sie mit ihm zurueck. */
.psf-band__more{margin:var(--s-3) 0 0}
.psf-footer__guides{margin:0 0 var(--s-3)}
.psf-footer__title{margin:0 0 .4em;font-weight:700}
.psf-footer__guides ul{list-style:none;display:flex;flex-wrap:wrap;
  gap:var(--s-2) var(--s-3);margin:0;padding:0}

/* ---------------------------------------------------------- Hinweiskaesten */
/* Ersetzt die Kadence-Infoboxen der WordPress-Fassung: gleicher Text,
   ohne Icon. Drei nebeneinander ab 720 px, darunter gestapelt. */
.psf-tips{list-style:none;margin:var(--s-4) 0;padding:0;display:grid;gap:var(--s-2)}
@media (min-width:720px){.psf-tips{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.psf-tip{background:var(--c-bg-soft);border:1px solid var(--c-line);
  border-left:4px solid var(--c-accent);border-radius:var(--r);padding:var(--s-2) var(--s-3)}
.psf-tip__title{margin:0 0 .35em;font-weight:700;color:var(--c-ink)}
.psf-tip__body{margin:0;font-size:.95rem;color:var(--c-ink-soft)}
.psf-tip__body p{margin:0 0 .6em}
.psf-tip__body p:last-child{margin-bottom:0}

/* Auf schmalen Bildschirmen bleibt vom Menuknopf nur das Burger-Symbol.
   "Reiseziel waehlen" brach dort zweizeilig um und machte den Kopf doppelt so
   hoch wie noetig. Der Text verschwindet nur optisch: Er steht weiter im
   Markup und bleibt damit der zugaengliche Name des Knopfes — deshalb
   clip-path statt display:none. Die 46 px sind die Trefferflaeche, die ein
   Daumen braucht; ohne feste Hoehe waere der Knopf nur so hoch wie die drei
   Striche. */
@media (max-width:560px){
  .psf-nav__toggle{width:46px;height:46px;padding:0;gap:0;
    justify-content:center;border-radius:50%}
  .psf-nav__toggle > span:not(.psf-nav__bars){
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
}