/* Seite "Fuer Hostels" (for-hostels.php). Laedt zusammen mit home.css,
   deren Bausteine (Schritte, Beispielansicht, Knoepfe) hier wiederverwendet
   werden. Farben aus den Variablen von style.css. */

.fh .fh-hero{padding-top:34px}
.fh-crumbs{font-size:.88rem;color:var(--muted,#7d9398);margin-bottom:18px}
.fh-crumbs a{color:var(--petrol-dark,#0a5d69);text-decoration:none}
.fh-crumbs a:hover{text-decoration:underline}
.fh .fh-hero .kicker{margin-bottom:10px}
.fh .fh-hero h1{
  font-family:var(--font-display,system-ui,sans-serif);
  font-size:clamp(2rem,4.2vw,3rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--ink,#11272b);margin:0 0 16px;max-width:20ch
}
.fh-lead{font-size:1.12rem;line-height:1.65;color:var(--body,#41575b);max-width:60ch;margin:0}

/* Lesbare Zeilenlaenge. Auf die Kinder, nicht auf .wrap selbst: Sonst
   gewinnt .wrap aus style.css (laedt spaeter, gleiche Gewichtung) — und die
   linke Kante bliebe ohnehin buendig mit dem Rest der Seite. */
.fh .fh-narrow > *{max-width:72ch}
.fh h2{
  font-family:var(--font-display,system-ui,sans-serif);
  font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.2;color:var(--ink,#11272b);margin:0 0 14px
}
.fh .fh-narrow p{color:var(--body,#41575b);line-height:1.7;margin:0 0 12px}
.fh .fh-narrow a{color:var(--petrol-dark,#0a5d69);font-weight:600}

.fh-price{
  font-size:1.14rem;color:var(--ink,#11272b)!important;
  border-left:4px solid var(--accent,#ff7a4d);padding:4px 0 4px 16px
}

.fh-list{margin:0 0 16px;padding:0;list-style:none}
.fh-list li{
  position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line,#e2eaeb);
  color:var(--body,#41575b);line-height:1.6
}
.fh-list li:last-child{border-bottom:0}
.fh-list li::before{
  content:"";position:absolute;left:4px;top:19px;width:10px;height:10px;border-radius:50%;
  background:var(--petrol,#0f7d8c)
}

.fh-faq details{
  background:var(--paper,#fff);border:1px solid var(--line,#e2eaeb);border-radius:var(--radius-sm,9px);
  margin-bottom:10px
}
.fh-faq summary{
  cursor:pointer;padding:14px 18px;font-weight:600;color:var(--ink,#11272b);list-style-position:inside
}
.fh-faq summary:focus-visible{outline:3px solid var(--petrol,#0f7d8c);outline-offset:2px;border-radius:var(--radius-sm,9px)}
.fh-faq details p{padding:0 18px 16px;margin:0!important}

.fh-end{text-align:left}

/* Verweis im Startseiten-Abschnitt steht in home.css (.hp-more) */