/* Hurghadastic, Komponenten. Setzt tokens.css voraus. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

h1, h2, h3, h4 { letter-spacing: -.024em; line-height: 1.18; margin: 0; }
p { margin: 0; }

.mitte { width: 100%; max-width: var(--mitte); margin-inline: auto; padding-inline: 20px; }
.mitte-schmal { width: 100%; max-width: var(--mitte-schmal); margin-inline: auto; padding-inline: 20px; }

.vh, .sprung:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung:focus {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-sprung);
  width: auto; height: auto; clip: auto;
  background: var(--akzent); color: #fff; padding: 10px 16px; border-radius: var(--r);
}

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: var(--r-s);
}

/* ---------- Kopf ---------- */
/* Glaswirkung: der Kopf laesst durchscheinen, was darunter wegscrollt.
   Die Saettigung wird angehoben, sonst wirkt alles dahinter ausgewaschen.
   Nicht weiter aufdrehen: unter dem Kopf liegen dunkle Hero-Bilder, und die
   Wortmarke muss darauf lesbar bleiben. */
.kopf {
  position: sticky; top: 0; z-index: var(--z-kopf);
  background: color-mix(in srgb, var(--papier) 58%, transparent);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  border-bottom: 1px solid color-mix(in srgb, var(--linie) 45%, transparent);
  /* Die helle Linie innen oben ist das, was Glas von Milch unterscheidet:
     sie faengt das Licht, das auf die Kante faellt. Darunter eine weiche
     Schattenkante, damit der Kopf ueber dem Inhalt schwebt statt aufzuliegen. */
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
              0 1px 16px color-mix(in srgb, var(--tinte) 6%, transparent);
}
/* Ohne backdrop-filter bliebe der Kopf durchsichtig und der Text unlesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf { background: var(--papier); }
}
/* Die Kopfhoehe haengt an der Wortmarke: 14 Pixel Luft ueber und unter ihr.
   So bleibt der Kopf stimmig, wenn die Marke auf schmalen Geraeten waechst. */
.kopf-inner { display: flex; align-items: center; gap: 28px;
              height: calc(var(--logo-hoehe) + 28px); }
.marke {
  font-weight: 700; font-size: 19px; letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center;
}
.marke::after {
  content: ""; width: 7px; height: 7px; margin-left: 5px;
  border-radius: 50%; background: var(--akzent);
}
.haupt { display: flex; gap: 22px; margin-right: auto; }
.haupt a {
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--tinte-60);
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.haupt a:hover, .haupt a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--akzent); }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }

/* Instagram und Facebook im Kopf: nur auf schmalen Bildschirmen. Am
   Schreibtisch stehen sie im Fuss, dort ist Platz und dort sucht man sie. */
.kopf-sozial { display: none; align-items: center; gap: 8px; }
.kopf-sozial a {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--tinte-60); text-decoration: none;
  transition: color .18s, background .18s;
}
.kopf-sozial a:hover, .kopf-sozial a:focus-visible { color: var(--akzent); background: var(--flaeche); }
.kopf-sozial .ikon { width: 19px; height: 19px; }

/* Der Weg zur Merkliste am Schreibtisch. Auf dem Telefon uebernimmt das die
   untere Leiste, dort ist derselbe Punkt schon. */
.merk-knopf {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--tinte); text-decoration: none;
  transition: color .18s, background .18s;
}
.merk-knopf:hover, .merk-knopf:focus-visible { color: #C8443C; background: var(--flaeche); }
.merk-knopf .ikon { width: 21px; height: 21px; }

/* Die Zahl der gemerkten Ausfluege, als kleine Scheibe am Symbol. Sie steht
   nur da, wenn wirklich etwas gemerkt ist - eine Null waere kein Hinweis,
   sondern Beiwerk. */
.merk-zahl, .tab-zahl {
  position: absolute; top: -5px; right: -9px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 9px; background: #C8443C; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
/* ---------- Sprachumschalter ----------
   Vier Verweise als Segmentschalter. Die Flaggen sind entsaettigt und nehmen
   erst beim Darueberfahren oder als aktive Sprache ihre Farbe an. */
.sprachen {
  display: flex; gap: 2px; padding: 3px;
  background: var(--sand); border: 1px solid var(--linie);
  border-radius: var(--r-pille);
}
.sprache {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: var(--r-pille);
  text-decoration: none; font-size: 12.5px; font-weight: 600;
  letter-spacing: .03em; color: var(--tinte-60); white-space: nowrap;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.sprache:hover { color: var(--tinte); }
/* Ein Finger loest Hover beim Antippen mit aus. Die Bewegung deshalb nur dort,
   wo wirklich ein Zeiger unterwegs ist. */
@media (hover: hover) and (pointer: fine) {
  .sprache:hover { transform: translateY(-1px); }
}
.sprache:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.sprache[aria-current] {
  background: var(--flaeche); color: var(--tinte);
  box-shadow: var(--schatten-s), inset 0 0 0 1px var(--linie);
}
.flagge {
  width: 20px; height: 14px; border-radius: 2.5px; flex: none;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(15, 47, 61, .22);
  /* Deckkraft statt Entsaettigung: entsaettigt wird die deutsche Flagge braun
     und sieht nach Fehler aus, nicht nach "nicht gewaehlt". */
  opacity: .55;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.sprache:hover .flagge,
.sprache:focus-visible .flagge { opacity: 1; transform: scale(1.16); }
/* Beim Sprachwechsel laedt die Seite neu. Die kurze Bewegung der aktiven
   Flagge zeigt, dass die Umschaltung gegriffen hat. */
.sprache[aria-current] .flagge {
  opacity: 1;
  animation: flagge-an .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes flagge-an {
  from { transform: scale(.55); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* Flaggen als Farbverlauf, damit sie ueberall gleich aussehen. Emoji-Flaggen
   stellt Windows gar nicht dar, deshalb kommen sie hier nicht in Frage. */
.f-de { background-image: linear-gradient(#000 0 33.34%, #DD0000 33.34% 66.67%, #FFCE00 66.67%); }
.f-ru { background-image: linear-gradient(#FFF 0 33.34%, #0039A6 33.34% 66.67%, #D52B1E 66.67%); }
.f-pl { background-image: linear-gradient(#FFF 0 50%, #DC143C 50%); }
.f-en {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0,0v30h60V0z'/%3E%3Cpath stroke='%23FFF' stroke-width='6' d='M0,0 60,30M60,0 0,30'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' clip-path='url(%23t)' d='M0,0 60,30M60,0 0,30'/%3E%3Cpath stroke='%23FFF' stroke-width='10' d='M30,0v30M0,15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30,0v30M0,15h60'/%3E%3C/svg%3E");
}
/* ---------- Sprachen als Aufklappmenue ----------
   Auf schmalen Geraeten steht nur die aktuelle Sprache im Kopf, die anderen
   klappen darunter auf. <details> macht das ohne JavaScript. */
.sprachwahl { display: none; position: relative; }
.sprachwahl > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
  padding: 6px 10px; cursor: pointer;
  background: var(--sand); border: 1px solid var(--linie);
  border-radius: var(--r-pille);
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--tinte);
}
.sprachwahl > summary::-webkit-details-marker { display: none; }
.sprachwahl > summary::after {
  content: ""; margin-left: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--tinte-40);
  transition: transform .2s ease;
}
.sprachwahl[open] > summary::after { transform: rotate(180deg); }
.sprachwahl > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.sprachwahl summary .flagge { opacity: 1; }
.sprachwahl-liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-kopf);
  display: grid; gap: 2px; min-width: 168px; padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten);
}
.sprachwahl-liste a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-s);
  text-decoration: none; font-size: 14.5px; color: var(--tinte);
}
.sprachwahl-liste a:hover { background: var(--sand); }
.sprachwahl-liste a[aria-current] {
  background: var(--akzent-zart); color: var(--akzent-dunkel); font-weight: 600;
}
.sprachwahl-liste .flagge { opacity: 1; width: 22px; height: 15px; }

@media (max-width: 860px) {
  /* Vier Flaggen nebeneinander schoeben hier die Wortmarke aus der Mitte.
     Stattdessen nur die aktuelle Sprache, der Rest klappt auf. */
  .sprachen { display: none; }
  .sprachwahl { display: block; }
}

/* ---------- Knopf ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--akzent); color: var(--auf-akzent); border: 0;
  padding: 12px 22px; border-radius: var(--r-pille); cursor: pointer;
  transition: background .18s, transform .16s var(--ease-out);
}
.cta:hover { background: var(--akzent-dunkel); color: var(--auf-akzent); }
/* Kurz einsinken statt nach unten rutschen: das Einsinken verschiebt nichts
   im Layout und fuehlt sich nach einem echten Knopf an. */
.cta:active { transform: scale(.97); }
.cta.zweit { background: transparent; color: var(--akzent); box-shadow: inset 0 0 0 1.5px var(--akzent); }
.cta.zweit:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); color: var(--akzent-dunkel); }
.cta.gross { padding: 15px 28px; font-size: 16px; }

/* ---------- Hero Startseite ---------- */
.hero { position: relative; isolation: isolate; }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(8,32,42,.84) 0%, rgba(8,32,42,.62) 46%, rgba(8,32,42,.18) 100%);
}
.hero-inner {
  min-height: min(560px, 74dvh);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 72px 60px; color: #fff;
}
.hero h1 {
  margin-bottom: 14px; font-size: var(--t-display); font-weight: 700;
  line-height: 1.08; letter-spacing: -.028em; max-width: 30ch; text-wrap: balance;
}
.hero-sub { margin-bottom: 26px; max-width: 46ch; font-size: clamp(1rem,1.4vw,1.1rem); color: rgba(255,255,255,.9); }

/* ---------- Suche ---------- */
.suche {
  display: flex; gap: 8px; padding: 8px; max-width: 660px;
  background: var(--flaeche); border-radius: calc(var(--r) + 6px); box-shadow: var(--schatten);
}
.suche input, .suche select {
  font-size: 15px; color: var(--tinte); background: transparent;
  border: 0; padding: 11px 12px; min-width: 0; border-radius: var(--r-s);
}
.suche input[type="search"] { flex: 1 1 auto; }
.suche select { flex: 0 0 auto; border-left: 1px solid var(--linie); cursor: pointer; }
.suche input::placeholder { color: var(--tinte-60); }

/* ---------- Zusagen-Band ---------- */
.band { background: var(--sand); border-bottom: 1px solid var(--linie); }
/* Drei Textspalten, rechts daneben die beiden Kontaktknoepfe. Sie standen
   bis zum 2026-09-21 in einer eigenen Zeile darueber, zusammen mit drei
   Zahlen, die dasselbe sagten wie dieses Band. */
.band-inner {
  display: grid; grid-template-columns: repeat(3,1fr) auto;
  align-items: start; gap: 28px; padding-block: 22px;
}
/* Die Textspalten stehen oben buendig, sonst rutscht die kuerzeste Spalte
   nach unten und ihre Ueberschrift steht tiefer als die anderen beiden.
   Nur die Knoepfe stehen mittig zum Block. */
.band-inner .schnellkontakt { align-self: center; }
.band-inner p { font-size: 14.5px; color: var(--tinte-60); }
.band-inner b { display: block; color: var(--tinte); font-weight: 600; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--luft-xl) var(--luft-l); }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.abschnitt-kopf h2 { font-size: var(--t-h2); font-weight: 700; }
.abschnitt-lead { max-width: 60ch; color: var(--tinte-60); margin-top: -14px; margin-bottom: 26px; }
.alle { font-size: 15px; font-weight: 600; color: var(--akzent); text-decoration: none; white-space: nowrap; }
.alle:hover { text-decoration: underline; }

/* ---------- Tourkarten ---------- */
.raster { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.raster.zwei { grid-template-columns: repeat(2,1fr); }
.karte { display: flex; flex-direction: column; }
.karte-bild { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; background: var(--sand); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.karte:hover .karte-bild img { transform: scale(1.04); }
.karte-text { padding-top: 12px; }
.karte-kat { font-size: 12.5px; font-weight: 600; color: var(--akzent); margin-bottom: 3px; }
/* Die Ueberschriftebene der Karte haengt davon ab, wo sie steht: auf der
   Uebersicht h2, sonst h3. Deshalb nicht auf die Ebene zielen, sondern auf die
   Karte - sonst faellt der Titel bei einer Aenderung auf Standardwerte zurueck
   und steht ploetzlich gross und unterstrichen da. */
.karte :is(h2, h3) { font-size: 17.5px; line-height: 1.3; margin-bottom: 4px; font-weight: 700; }
.karte :is(h2, h3) a { text-decoration: none; color: inherit; }
.karte :is(h2, h3) a:hover { color: var(--akzent); }
.karte-meta { font-size: var(--t-klein); color: var(--tinte-60); margin-bottom: 8px; }
.karte-preis { font-size: var(--t-klein); color: var(--tinte-60); }
.karte-preis strong { font-size: 17px; color: var(--tinte); font-weight: 700; }

/* ---------- Kategorien ---------- */
.kat-raster { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.kat-kachel {
  position: relative; display: flex; align-items: flex-end;
  min-height: 180px; padding: 20px; border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: #fff; isolation: isolate;
}
.kat-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.kat-kachel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(8,32,42,.82) 0%, rgba(8,32,42,.15) 70%);
}
.kat-kachel:hover img { transform: scale(1.05); }
.kat-kachel b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.kat-kachel span { font-size: var(--t-klein); color: rgba(255,255,255,.82); }

/* ---------- Filterleiste ---------- */
.filter {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px; margin-bottom: 28px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
}
.filter label { font-size: var(--t-winzig); font-weight: 600; color: var(--tinte-60); }
.filter select, .filter input[type="search"] {
  font-size: 14.5px; color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-s); padding: 9px 11px;
}
.filter input[type="search"] { width: 100%; min-width: 0; }
/* Die Breite steht am Feld, nicht am Eingabeelement. Sonst wirkt flex-basis
   in der Spaltenachse und macht das Suchfeld 190 Pixel hoch. */
.filter-feld { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.filter-feld.breit { flex: 1 1 200px; min-width: 0; }
.filter-zurueck { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--akzent); background: none; border: 0; cursor: pointer; }
.treffer { font-size: 14.5px; color: var(--tinte-60); margin-bottom: 18px; }
.leer {
  padding: 48px 24px; text-align: center; border: 1px dashed var(--linie);
  border-radius: var(--r); color: var(--tinte-60);
}
.leer b { display: block; color: var(--tinte); font-size: 17px; margin-bottom: 6px; }

/* ---------- Tourdetail ---------- */
.krume { font-size: var(--t-klein); color: var(--tinte-60); padding-block: 18px 0; }
.krume a { color: var(--tinte-60); }
.detail { padding-block: 24px var(--luft-xl); }
.detail-kopf { margin-bottom: 22px; }
.detail-kopf h1 { font-size: var(--t-h1); font-weight: 700; margin-bottom: 6px; }
.detail-kopf .meta { font-size: 14.5px; color: var(--tinte-60); }

.galerie { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; margin-bottom: 36px; }
.galerie a { display: block; border-radius: var(--r-s); overflow: hidden; background: var(--sand); }
.galerie a:first-child { grid-row: span 2; }
.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.galerie a:first-child img { aspect-ratio: 4/3.2; }
.galerie a:hover img { transform: scale(1.03); }
.galerie.eins { grid-template-columns: 1fr; grid-template-rows: auto; }
.galerie.eins a:first-child { grid-row: auto; }
/* Ein einzelnes Bild wird nicht beschnitten: es zeigt die Leistung, da soll
   alles drauf sein. Statt es auf ein Seitenverhaeltnis zu zwingen, bleibt es in
   seinem eigenen und wird nur in der Breite begrenzt - sonst wuerde ein
   quadratisches Bild auf voller Breite fast 900 Pixel hoch. */
.galerie.eins { justify-items: center; }
.galerie.eins a:first-child { width: min(100%, 620px); }
/* Beim Transfer steht die Galerie in der linken Spalte, direkt neben den
   Feldern. Dort darf sie die Spaltenbreite nehmen und nicht mittig schweben. */
.detail-haupt > .galerie.eins { justify-items: stretch; margin-bottom: 28px; }
.detail-haupt > .galerie.eins a:first-child { width: 100%; }
/* Statt das Bild in einer breiten Spalte zu deckeln - was rechts daneben ein
   Loch liess - wird die Spalte selbst so schmal wie das Bild. Der ganze Block
   steht dann mittig, die Luft verteilt sich auf beide Seiten. 560 Pixel sind
   nebenbei ein guter Zeilenumfang fuer den Text darunter. */
/* Auf dem Handy steht untereinander, was am Schreibtisch nebeneinander steht.
   Dann muss die Reihenfolge stimmen: erst das Bild, dann sofort die Felder,
   und die Beschreibung darunter. Wer den Transfer sucht, will buchen und nicht
   erst vier Absaetze lesen.

   display:contents loest die linke Spalte auf, damit Panel, Bild und Text als
   gleichrangige Geschwister sortiert werden koennen. */
@media (max-width: 1000px) {
  .detail-raster:has(.buchen.transfer) { display: flex; flex-direction: column; }
  .detail-raster:has(.buchen.transfer) .detail-haupt { display: contents; }
  /* Titel steht schon darueber. Danach sofort die Felder. */
  .detail-raster:has(.buchen.transfer) .buchen.transfer { order: 1; margin-bottom: 32px; }
  .detail-raster:has(.buchen.transfer) .galerie { order: 2; }
  .detail-raster:has(.buchen.transfer) .detail-haupt > *:not(.galerie) { order: 3; }
}

/* Nur dort, wo es ueberhaupt zwei Spalten gibt. Ohne die Schranke ueberstimmt
   diese Regel den Umbruch bei 1000 Pixeln - das Bild fiel dann auf 10 Pixel
   zusammen, weil die erste Spalte auf 0 ging. */
@media (min-width: 1001px) {
  .detail-raster:has(.buchen.transfer) {
    grid-template-columns: minmax(0, 560px) 348px;
    justify-content: center;
  }
}
.galerie.eins a:first-child img {
  aspect-ratio: auto; object-fit: contain;
  width: 100%; height: auto; max-height: none;
}

.detail-raster { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 44px; align-items: start; }
.detail-haupt h2 { font-size: 1.25rem; margin-bottom: 12px; }
.detail-haupt > * + h2 { margin-top: 36px; }
.lead { font-size: 17px; max-width: 62ch; }

.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.haken li { position: relative; padding-left: 26px; font-size: 15.5px; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 13px; height: 7px;
  border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg);
}
.haken.minus li::before {
  border: 0; height: 2px; width: 13px; top: .78em; transform: none;
  background: var(--tinte-40);
}

.fakten { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 24px; }
.fakten div { border-top: 1px solid var(--linie); padding-top: 10px; }
.fakten dt { font-size: var(--t-winzig); color: var(--tinte-60); margin-bottom: 2px; }
.fakten dd { margin: 0; font-size: 15.5px; font-weight: 500; }

.hinweis-box {
  background: var(--akzent-zart); border-radius: var(--r); padding: 16px 18px;
  font-size: 14.5px; color: var(--tinte);
}
.hinweis-box p + p { margin-top: 8px; }

.faq { border-top: 1px solid var(--linie); padding-top: 4px; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; padding: 16px 30px 16px 0; font-weight: 600; font-size: 15.5px;
  list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .antwort { padding: 0 0 18px; font-size: 15.5px; color: var(--tinte-60); max-width: 66ch; }

/* ---------- Buchungspanel ---------- */
.buchen {
  position: sticky; top: 104px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: calc(var(--r) + 4px); padding: 22px; box-shadow: var(--schatten);
}
.buchen-ab { font-size: 14.5px; color: var(--tinte-60); margin-bottom: 14px; }
.buchen-ab strong { font-size: 27px; color: var(--tinte); font-weight: 700; letter-spacing: -.02em; }
.buchen-preise { list-style: none; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--linie); }
.buchen-preise li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-klein); padding: 3px 0; }
.buchen-preise span { color: var(--tinte-60); }
/* Sonst bricht "170 €" zwischen Zahl und Zeichen um. */
.buchen-preise li b { white-space: nowrap; }
/* Beim Gesamtpreis steht unter der Bezeichnung, was das je Person macht.
   Links, weil die Bezeichnung daneben schon die Gruppengroesse nennt: "bis
   15 Personen" und "26,60 EUR pro Person" gehoeren zusammen gelesen. Rechts
   haette die Umlegung den Betrag eingequetscht. */
.buchen-preise span small {
  display: block; font-size: var(--t-winzig); font-weight: 600;
  color: var(--akzent-dunkel); margin-top: 1px;
}
.feld { display: grid; gap: 5px; margin-bottom: 12px; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feld label { font-size: var(--t-winzig); font-weight: 600; color: var(--tinte); }
.feld input, .feld select {
  font-size: 15px; color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-s); padding: 10px 12px; width: 100%;
}
.feld input:focus-visible, .feld select:focus-visible { border-color: var(--akzent); outline-offset: -1px; }
.feld .hilfe { font-size: var(--t-winzig); color: var(--tinte-60); }
.feld input[aria-invalid="true"] { border-color: var(--warnung); }
/* Rueckmeldung zum gewaehlten Termin. Eine Zeile, immer vorhanden, damit das
   Panel beim Erscheinen der Meldung nicht springt. */
.termin-hinweis {
  font-size: var(--t-winzig); line-height: 1.45; color: var(--tinte-60);
  min-height: 1.45em;
}
.termin-fehler { color: var(--warnung); font-weight: 600; }
.termin-knapp { color: var(--warnung); }
.termin-frei { color: var(--akzent); }
.termin-pruefung { color: var(--tinte-40); }
.buchen .cta[disabled] { opacity: .45; cursor: not-allowed; }
.buchen-summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 16px 0 14px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 14.5px;
}
.buchen-summe b { font-size: 21px; letter-spacing: -.02em; }
.buchen .cta { width: 100%; }
.zusatz { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.zusatz h3 { font-size: var(--t-winzig); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinte-60); margin-bottom: 8px; }
.zusatz ul { list-style: none; margin: 0; padding: 0; }
.zusatz li { display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--t-klein); padding: 3px 0; }
.zusatz li span { color: var(--tinte-60); }
.zusatz li b { white-space: nowrap; font-weight: 600; }
.zusatz p { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--tinte-60); }
.buchen-hinweis { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--tinte-60); }

/* ---------- Keine Vorauszahlung ----------
   Das Verkaufsargument des Anfrageweges. Steht bewusst oben im Panel, direkt
   unter dem Preis, wo sonst der Zahlungshinweis stand. */
.vor-ort {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--akzent-zart); color: var(--akzent-dunkel);
  border-radius: var(--r-s); padding: 9px 12px; margin-bottom: 16px;
  font-size: var(--t-klein); font-weight: 600; line-height: 1.35;
}
.vor-ort .ikon { width: 17px; height: 17px; margin-top: 1px; }
/* Beim Gesamtpreis eines Bootes zaehlt fuer den Gast nicht die Summe,
   sondern was jeder Einzelne zahlt. Der Rechner fuellt die Zeile. */
.je-person { font-size: 13.5px; font-weight: 600; color: var(--akzent-dunkel); margin: -8px 0 2px; }

.summe-hinweis { font-size: 12.5px; line-height: 1.45; color: var(--tinte-60); margin: -6px 0 14px; }

/* WhatsApp steht als zweiter Weg unter dem Formular, nie davor. */
.wa-knopf { display: flex; align-items: center; gap: 8px; }
.wa-knopf .ikon { width: 18px; height: 18px; }
.buchen .wa-knopf { width: 100%; margin-top: 10px; }
.formular-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Koederfeld gegen Werberoboter: aus dem Bild geschoben, nicht display:none,
   sonst uebergehen es viele Roboter. */
/* ---------- Transfer: Panel und gezeichnete Karte ----------
   Der Transfer rechnet pro Fahrt, nicht pro Person. Das Panel ist deshalb
   laenger als das der Touren und darf nicht mehr am Rand kleben. */
.buchen.transfer { position: static; }
.pro-fahrt { font-size: var(--t-winzig); }

.transfer-karte {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--linie);
}
.transfer-karte figcaption {
  font-size: var(--t-winzig); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinte-60); margin-bottom: 10px;
}
.transfer-karte svg { width: 100%; height: auto; display: block; }
.karte-see { fill: color-mix(in srgb, var(--akzent) 12%, transparent); }
.karte-strasse {
  fill: none; stroke: var(--linie); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 6;
}
.karte-punkt circle { fill: var(--tinte-40); transition: fill .2s, r .2s; }
.karte-punkt text {
  font-size: 8.5px; font-weight: 600; fill: var(--tinte-60);
  transition: fill .2s;
}
.karte-punkt.flughafen circle { fill: var(--tinte); }
.karte-punkt.flughafen text { fill: var(--tinte); }
.karte-punkt.aktiv circle { fill: var(--akzent); r: 5; }
.karte-punkt.aktiv text { fill: var(--akzent-dunkel); }

/* Der Wagen faehrt die gestrichelte Strasse entlang bis zum gewaehlten Gebiet.
   offset-path haelt ihn auf der Linie, ohne dass wir Koordinaten rechnen. */
.karte-wagen {
  offset-rotate: auto;
  transition: offset-distance .9s var(--ease-out);
}
.karte-wagen rect { fill: var(--akzent); }
.karte-wagen .kabine { fill: color-mix(in srgb, var(--akzent) 45%, var(--flaeche)); }
@media (prefers-reduced-motion: reduce) {
  .karte-wagen { transition: none; }
}
/* Ohne offset-path bleibt der Wagen unsichtbar statt falsch zu stehen. */
@supports not (offset-path: path("M0 0 L1 1")) {
  .karte-wagen { display: none; }
}

.karte-fahrzeit {
  margin-top: 8px; font-size: 12.5px; color: var(--tinte-60); min-height: 1.2em;
}

/* ---------- Schnellzugriff Kontakt (unten rechts) ----------
   Ein <details>, kein Skript: dieselbe Loesung wie beim Sprachumschalter.
   Damit klappt er ohne JavaScript auf und gehoert zur Tabreihenfolge.
   Geschlossen wird ueber das Kreuz an der Stelle des Knopfes; Escape und ein
   Klick daneben schliessen nicht, das kann natives <details> nicht.

   Nur am Schreibtisch. Auf dem Handy steht unten schon die Tableiste und auf
   Tourseiten die Anfrageleiste; ein dritter schwebender Knopf waere im Weg. */
.fab { display: none; }

@media (min-width: 761px) {
  .fab {
    display: block; position: fixed; z-index: var(--z-schwebend);
    right: 24px; bottom: 24px;
  }
  .fab summary {
    list-style: none; cursor: pointer;
    width: 60px; height: 60px; border-radius: var(--r-pille);
    display: grid; place-items: center;
    background: var(--papier); box-shadow: var(--schatten);
    border: 1px solid var(--linie);
    transition: transform .18s, box-shadow .18s;
  }
  .fab summary::-webkit-details-marker { display: none; }
  .fab summary:hover { transform: translateY(-2px); }
  .fab summary:active { transform: scale(.97); }
  .fab summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

  /* Geschlossen traegt der Knopf das Medaillon, offen das Kreuz. Beide liegen
     im selben Rasterfeld, damit der Knopf beim Wechsel nicht springt. */
  .fab-marke, .fab-zu { grid-area: 1 / 1; }
  .fab-marke { width: 46px; height: 46px; }
  .fab-zu { width: 22px; height: 22px; color: var(--tinte-60); display: none; }
  .fab[open] .fab-marke { display: none; }
  .fab[open] .fab-zu { display: block; }

  .fab-liste {
    list-style: none; margin: 0 0 14px; padding: 0;
    position: absolute; bottom: 100%; right: 4px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .fab-knopf {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: var(--r-pille);
    background: var(--akzent); color: var(--auf-akzent);
    box-shadow: var(--schatten); text-decoration: none;
    transition: transform .18s, background .18s;
  }
  .fab-knopf .ikon { width: 24px; height: 24px; }
  .fab-knopf:hover { transform: translateY(-2px); background: var(--akzent-dunkel); }
  .fab-knopf:active { transform: scale(.97); }
  /* WhatsApp traegt sein Gruen, weil die Farbe dort die Wiedererkennung ist.
     Alles andere bleibt beim einen Akzent der Seite. */
  .fab-knopf.wa { background: var(--gruen); color: #fff; }
  .fab-knopf.wa:hover { background: color-mix(in srgb, var(--gruen) 82%, black); }

  /* Die Knoepfe kommen von unten nacheinander hoch, der oberste zuletzt.
     Nur beim Oeffnen, danach steht alles still. */
  .fab[open] .fab-liste li {
    animation: fab-auf .22s cubic-bezier(.23, 1, .32, 1) backwards;
  }
  .fab[open] .fab-liste li:nth-child(4) { animation-delay: .03s; }
  .fab[open] .fab-liste li:nth-child(3) { animation-delay: .06s; }
  .fab[open] .fab-liste li:nth-child(2) { animation-delay: .09s; }
  .fab[open] .fab-liste li:nth-child(1) { animation-delay: .12s; }
  @keyframes fab-auf {
    from { opacity: 0; transform: translateY(10px) scale(.9); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Sozialkanaele im Fuss ---------- */
.fuss-sozial { display: flex; gap: 14px; margin-top: 16px; }
.fuss-sozial a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-pille);
  color: var(--papier); background: rgba(255,255,255,.1);
  transition: background .18s, color .18s;
}
.fuss-sozial a:hover { background: var(--akzent); color: #fff; }
.fuss-sozial .ikon { width: 20px; height: 20px; }

.koeder {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap;
}

/* ---------- Textseiten ---------- */
.text-seite { padding-block: var(--luft-l) var(--luft-xl); }
.text-seite h1 { font-size: var(--t-h1); font-weight: 700; margin-bottom: 10px; }
.text-seite .stand { font-size: var(--t-klein); color: var(--tinte-60); margin-bottom: 32px; }
.prosa > * + * { margin-top: 18px; }
.prosa h2 { font-size: 1.25rem; margin-top: 36px; }
.prosa h3 { font-size: 1.05rem; margin-top: 26px; }
.prosa p, .prosa li { max-width: 68ch; }
.prosa ul, .prosa ol { padding-left: 22px; display: grid; gap: 7px; }
.prosa a { color: var(--akzent); }
.prosa table { border-collapse: collapse; width: 100%; max-width: 620px; font-size: 15px; }
.prosa th, .prosa td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--linie); }
.prosa th { font-weight: 600; color: var(--tinte-60); font-size: var(--t-winzig); }

/* ---------- Kontaktformular ---------- */
.formular { display: grid; gap: 16px; max-width: 520px; }
.formular .feld { margin: 0; }
.formular textarea {
  font-size: 15px; color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-s); padding: 10px 12px;
  width: 100%; min-height: 130px; resize: vertical;
}
.formular .fehler { font-size: var(--t-winzig); color: var(--warnung); }

/* ---------- Buchungsstrecke ---------- */
.checkout { display: grid; gap: var(--luft-l); margin-top: 28px; }
.checkout h2 { font-size: 1.25rem; margin-bottom: 14px; }
.checkout .fakten { margin-bottom: 0; }
.checkout-summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie);
  font-size: 14.5px;
}
.checkout-summe b { font-size: 24px; letter-spacing: -.02em; }
.checkout-aendern { margin-top: 10px; font-size: var(--t-klein); }
.checkout-aendern a { color: var(--akzent); }
.checkout-formular { max-width: none; }
.checkout-formular .cta { width: 100%; }
.haken-feld {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--t-klein); line-height: 1.5; color: var(--tinte-60);
}
.haken-feld input { margin-top: 3px; flex: none; accent-color: var(--akzent); }
.haken-feld a { color: var(--akzent); }
.demo-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.buchung-nummer {
  font-size: var(--t-winzig); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-60); margin-bottom: 8px;
}
.buchung-nummer b { color: var(--tinte); letter-spacing: .08em; }

/* ---------- Kundenkonto ---------- */
.konto-wer {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: var(--t-klein); color: var(--tinte-60); margin-top: 6px;
}
.konto-wer form { display: inline; }
.konto-abmelden {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--akzent); font-size: var(--t-klein); text-decoration: underline;
}
.konto-h2 { font-size: 1.05rem; margin-top: 34px; margin-bottom: 12px;
  color: var(--tinte-60); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; }
.konto-buchung {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 18px 20px; margin-bottom: 12px;
}
.konto-kopf { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.konto-kopf h3 { font-size: 1.05rem; font-weight: 700; }
.konto-status {
  font-size: var(--t-winzig); font-weight: 600; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--r-pille);
  background: var(--sand); color: var(--tinte-60);
}
.konto-status-bezahlt { background: var(--akzent-zart); color: var(--akzent-dunkel); }
.konto-status-storniert, .konto-status-fehlgeschlagen { color: var(--warnung); }
.konto-zeile { font-size: var(--t-klein); color: var(--tinte-60); }
.konto-nummer { margin-top: 2px; }
.konto-nummer b { color: var(--tinte); letter-spacing: .06em; }
.konto-aktionen { display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px; margin-top: 12px; font-size: var(--t-klein); }
.konto-aktionen a { color: var(--akzent); }
.storno-knopf {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tinte-60); font-size: var(--t-klein); text-decoration: underline;
}
.storno-knopf:hover { color: var(--warnung); }
.storno-frage { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linie); }
.storno-frage p { font-size: var(--t-klein); line-height: 1.5; }
.storno-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.storno-erfolg { margin-top: 12px; font-size: var(--t-klein); color: var(--akzent-dunkel); }

/* ---------- Verwaltung ---------- */
.verwaltung-suche {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px; font-size: var(--t-klein);
}
.verwaltung-suche input {
  flex: 1 1 260px; font-size: 15px; color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-s); padding: 10px 12px;
}
.verwaltung-suche a { color: var(--akzent); }
.verwaltung-tabelle { overflow-x: auto; margin-bottom: 8px; }
.verwaltung-tabelle table {
  border-collapse: collapse; width: 100%; font-size: var(--t-klein);
}
.verwaltung-tabelle th {
  text-align: left; font-weight: 600; font-size: var(--t-winzig);
  text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-60);
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.verwaltung-tabelle td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.verwaltung-nummer { font-weight: 600; letter-spacing: .05em; white-space: nowrap; }
.verwaltung-rechts { text-align: right; white-space: nowrap; }
.verwaltung-klein { font-size: var(--t-winzig); color: var(--tinte-60); }
.verwaltung-termin { max-width: 560px; margin-block: 16px 8px; }

/* ---------- Fuss ---------- */
.fuss { background: var(--tinte); color: var(--papier); padding-block: var(--luft-l) 28px; margin-top: var(--luft-xl); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.fuss .marke { color: var(--papier); font-size: 19px; }
.fuss-ueber { font-size: 14.5px; color: color-mix(in srgb, var(--papier) 70%, transparent); margin-top: 10px; max-width: 34ch; }
.fuss h3 { font-size: var(--t-winzig); text-transform: uppercase; letter-spacing: .1em; color: color-mix(in srgb, var(--papier) 60%, transparent); margin-bottom: 12px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss a { color: color-mix(in srgb, var(--papier) 82%, transparent); text-decoration: none; font-size: 14.5px; }
.fuss a:hover { color: var(--papier); text-decoration: underline; }
.fuss-unten {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--papier) 16%, transparent);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: var(--t-winzig); color: color-mix(in srgb, var(--papier) 60%, transparent);
}
/* Die Urheberzeile: der Satz, dann die Wortmarke der Agentur als Verweis.
   Der Name steht nicht als Text daneben, die Marke traegt ihn selbst. */
.gebaut-von { display: inline-flex; align-items: center; gap: 8px; }
.gebaut-von a { display: inline-flex; align-items: center; }
.gebaut-marke {
  /* 28, nicht 20: der Schriftzug "STELMACH" nimmt nur rund ein Viertel der
     Bildhoehe ein. Bei 20 Pixeln waere er fuenf Pixel hoch und nicht mehr zu
     lesen, neben einer 12-Pixel-Zeile. */
  height: 28px; width: auto; flex: 0 0 auto;
  /* Eine Spur zurueckgenommen, damit die Marke des Kunden im Fuss die lautere
     bleibt. Beim Darueberfahren kommt sie auf volle Deckkraft. */
  opacity: .9; transition: opacity .18s;
}
.gebaut-von a:hover .gebaut-marke,
.gebaut-von a:focus-visible .gebaut-marke { opacity: 1; }

/* ---------- Mobile Buchungsleiste ---------- */
.mobilleiste { display: none; }

/* ---------- Umbrueche ---------- */
@media (max-width: 1000px) {
  /* Neben drei Textspalten bleibt hier kein Platz fuer die Knoepfe.
     Sie bekommen eine eigene Zeile unter dem Text. */
  .band-inner { grid-template-columns: repeat(3,1fr); }
  .band-inner .schnellkontakt { grid-column: 1 / -1; }
  .raster { grid-template-columns: repeat(2,1fr); }
  .detail-raster { grid-template-columns: 1fr; }
  .buchen { position: static; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .galerie { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .galerie a:first-child { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 760px) {
  .haupt { display: none; }
  .kopf-inner { gap: 14px; }
  .marke { margin-right: auto; }
  .band-inner { grid-template-columns: 1fr; gap: 12px; }
  .raster, .raster.zwei, .kat-raster { grid-template-columns: 1fr; }
  .fakten { grid-template-columns: 1fr; }
  /* Eine Zeile statt drei: Feld, Kategorie und Lupe nebeneinander. Der Knopf
     zeigt nur das Symbol, seine Beschriftung bleibt fuer Vorleseprogramme
     stehen. 44 Pixel sind das Mindestmass fuer eine Fingerkuppe. */
  .suche { flex-wrap: nowrap; gap: 4px; padding: 6px; }
  .suche input[type="search"] {
    flex: 1 1 auto; min-width: 0;
    /* Unter 16 Pixel zoomt iOS beim Antippen in das Feld hinein. */
    font-size: 16px; padding-inline: 10px;
  }
  .suche select {
    flex: 0 1 auto; min-width: 0; max-width: 36%;
    border-left: 1px solid var(--linie); padding-inline: 8px;
  }
  .suche .cta {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; position: relative;
  }
  .suche .cta .ikon { width: 20px; height: 20px; }
  .suche .cta span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .hero-inner { min-height: auto; padding-block: 48px 40px; }
  .filter-zurueck { margin-left: 0; }
  .fuss-raster { grid-template-columns: 1fr; gap: 26px; }
  .abschnitt { padding-block: var(--luft-l) var(--luft-m); }

  /* Die Buchungsleiste gibt es nur auf Tourseiten. Frueher stand dafuer eine
     Klasse am body; :has() erkennt die Leiste direkt, damit Next.js keine
     Klasse pro Route an den body haengen muss. */
  body:has(.mobilleiste) { padding-bottom: 76px; }
  body:has(.mobilleiste) .mobilleiste {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-leiste);
    padding: 12px 18px; background: var(--flaeche); border-top: 1px solid var(--linie);
    box-shadow: 0 -4px 20px var(--schatten-farbe);
  }
  .mobilleiste p { font-size: 13.5px; color: var(--tinte-60); }
  .mobilleiste strong { font-size: 19px; color: var(--tinte); }
}

/* Mobiles Menue, ohne JavaScript und ohne Adresse.

   Frueher war das ein :target-Menue. Aufklappen schrieb "#menue" in die
   Adresszeile, das Zuklappen liess ein nacktes "#" stehen: "tour-ghada.com/#".
   Das sieht aus wie ein Fehler, und jeder Klick legte einen Eintrag im Verlauf
   ab - der Zurueck-Knopf klappte dann Menues auf und zu, statt zurueckzugehen.
   Ein <details> kann dasselbe und fasst die Adresse nicht an.

   Der Aufklapper ist der Punkt "Menue" in der unteren Leiste. Er bleibt beim
   Aufklappen sichtbar und ist damit zugleich der Weg zurueck; ein eigener
   Schliessen-Verweis im Panel braeuchte ein Skript. */
.menue .menue-panel {
  /* Absolut, nicht fest. Die Leiste traegt einen backdrop-filter, und der
     macht sie zum Bezugsrahmen fuer alles Feste darin: ein position:fixed
     haette sich an der 64 Pixel hohen Leiste ausgerichtet statt am Fenster
     und waere unsichtbar geblieben. Gemessen, nicht vermutet.

     Die Leiste klebt ohnehin unten und ueber die volle Breite - absolut mit
     bottom:100% sitzt das Panel damit genau zwischen Kopf und Leiste.
     Kein eigener z-index noetig: die Leiste steht mit --z-leiste schon
     ueber dem Inhalt. */
  position: absolute; left: 0; right: 0; bottom: 100%;
  /* 100% ist die Hoehe der Leiste selbst. Eine feste Zahl waere geraten:
     die Leiste ist je nach Schrift und Sicherheitsabstand unten mal 78,
     mal 81 Pixel hoch, und das Panel rutschte dann unter den Kopf. */
  height: calc(100dvh - var(--logo-hoehe) - 28px - 100%);
  background: var(--papier); padding: 24px 20px; overflow-y: auto;
}
.menue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menue a {
  display: block; padding: 14px 0; font-size: 18px; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid var(--linie);
}
/* Der Pfeil, den der Browser vor jedes summary setzt, hat hier nichts zu
   suchen: der Punkt sieht aus wie seine vier Nachbarn. */
.menue summary { list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
/* Zu und auf: beide Beschriftungen stehen im HTML, sichtbar ist eine. */
.menue summary .auf { display: none; }
.menue[open] summary .zu { display: none; }
.menue[open] summary .tab-ikon.auf { display: grid; }
.menue[open] summary .tab-text.auf { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Kategorie-Kacheltext ---------- */
.kat-text { display: block; }

/* ---------- Ablauf einer Anfrage ----------
   Keine Nummernkreise. Die Reihenfolge traegt eine Haarlinie mit drei Punkten,
   am Schreibtisch waagerecht, auf dem Handy senkrecht. Wer was tut, steht im
   Satz selbst ("Ihr schickt die Anfrage") und nicht als Ziffer daneben.
   Die Linie haengt an den Eintraegen, nicht an der Liste: so bleibt sie
   richtig, egal wie breit die Spalten werden. */
.ablauf {
  --ablauf-abstand: 32px;
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ablauf-abstand);
}
.ablauf li { position: relative; padding-top: 20px; }
.ablauf li::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; border-radius: var(--r-pille);
  background: var(--akzent);
}
.ablauf li:not(:last-child)::after {
  content: ""; position: absolute; top: 4px; left: 17px;
  right: calc(-1 * var(--ablauf-abstand)); height: 1px;
  /* --linie ist eine Kantenfarbe fuer Weiss und verschwindet auf dem Sandton.
     Die Linie gehoert zu den Punkten, also nimmt sie deren Farbe, nur leise. */
  background: color-mix(in srgb, var(--akzent) 32%, transparent);
}
.ablauf b { display: block; font-size: 16.5px; margin-bottom: 5px; letter-spacing: -.015em; }
.ablauf p { font-size: 14.5px; color: var(--tinte-60); }
/* Das Wort traegt den Akzent, damit die drei Saetze zusammen gelesen werden:
   Ihr - Wir - Vor Ort. */
.ablauf-wer {
  color: var(--akzent-dunkel); text-transform: uppercase;
  font-size: var(--t-klein); letter-spacing: .07em;
  /* Der Sperrsatz haengt hinter dem letzten Buchstaben noch einmal nach.
     Ohne den Ausgleich steht vor "schickt" zu viel Luft. */
  margin-right: -.07em;
}

/* Auf dem Handy kippt dieselbe Linie in die Senkrechte und der Abschnitt
   bleibt kurz: drei Zeilen statt vier Bloecke untereinander. */
@media (max-width: 760px) {
  .ablauf { --ablauf-abstand: 20px; grid-template-columns: 1fr; }
  .ablauf li { padding-top: 0; padding-left: 24px; }
  .ablauf li::before { top: 6px; }
  .ablauf li:not(:last-child)::after {
    top: 23px; left: 4px; right: auto;
    bottom: calc(-1 * var(--ablauf-abstand) - 6px);
    width: 1px; height: auto;
  }
}

/* ---------- Sehr schmale Geraete (iPhone SE und aehnlich) ---------- */
@media (max-width: 430px) {
  .kopf-inner { gap: 10px; }

  .marke { font-size: 17px; }
  .kopf-rechts { gap: 8px; }
}

/* ---------- Bildmarke ----------
   Das Emblem traegt Gold und Tuerkis, es wird nicht umgefaerbt.
   Der Schriftzug steht in Onest daneben, damit er in jeder Groesse scharf bleibt. */
/* Variante B: die vollstaendige Wortmarke steht im Kopf.
   Dafuer ist der Kopf mit 88 px hoeher als ueblich. */
:root { --logo-hoehe: 60px; }
.marke { gap: 0; }
.marke-bild { height: var(--logo-hoehe); width: auto; flex: 0 0 auto; }
.marke::after { display: none; }
.wortmarke { width: 240px; height: auto; margin-bottom: 14px; }

/* Auf Mobil steht die Wortmarke links, rechts daneben Instagram, Facebook und
   der Sprachumschalter. Von Kevin am 2026-09-21 so gewuenscht.

   Vorher stand sie absolut mittig. Das kostete den ganzen linken Rand als
   Leerflaeche und deckelte die Marke, weil ihr nur die halbe Strecke bis zum
   Sprachumschalter blieb. Links ausgerichtet bekommt sie die volle.

   Gemessen am 2026-09-21: die rechte Gruppe ist rund 157 Pixel breit
   (zwei Symbole zu 30 mit 8 Luft, dann 8, dann der Umschalter mit 80,5), dazu
   je 20 Pixel Rand und 16 Pixel Luft dazwischen. Bleibt (Breite - 213) fuer
   die Marke; mal 0,4783 ergibt die Hoehe, denn die Datei ist 600 mal 287.

   Oben gedeckelt bei 82: die Kopfhoehe folgt der Marke, und bei mehr als
   110 Pixeln nimmt ein klebender Kopf auf dem Telefon zu viel vom Bild.
   Unten bei 50, darunter ist der Schriftzug nicht mehr zu lesen - genau das
   war schon der Grund fuer den hohen Kopf. */
@media (max-width: 760px) {
  :root { --logo-hoehe: clamp(50px, (100vw - 213px) * 0.4783, 82px); }
  .wortmarke { width: 200px; }
}

/* ================================================================
   Mobile Fassung im App-Layout
   Vorbild: tourgoat-samui.com. Untere Navigationsleiste, waagerecht
   scrollende Kartenreihen, zentrierter Hero.
   ================================================================ */

/* ---------- Symbole ---------- */
/* Das hidden-Attribut bringt nur ein display:none aus dem Browser-Standard mit.
   Jede Komponentenregel mit eigenem display sticht es aus. Genau das ist beim
   Filter passiert: .karte hat display:flex, also blieben ausgefilterte Karten
   stehen. Der Zaehler sagte "5 von 19", zu sehen waren weiter alle 19. */
[hidden] { display: none !important; }

.ikon { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.13em; }
.ikon.stern { color: #E0A32E; }

/* ---------- Tourkarte ---------- */
.karte-bild { position: relative; }
.karte-bild > a { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.merken {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--r-pille); cursor: pointer;
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--tinte); font-size: 18px;
  box-shadow: var(--schatten-s);
  transition: background .18s, color .18s, transform .1s;
}
.merken:hover { background: var(--flaeche); color: #C8443C; }
.merken:active { transform: scale(.94); }
/* Gemerkt heisst rot und gefuellt. Die Farbe allein genuegt nicht: wer Rot
   und Grau nicht unterscheidet, sieht am vollen Herz trotzdem den Zustand.
   Das gefuellte Symbol tauscht merkliste.js gegen das leere aus. */
.merken[aria-pressed="true"] { color: #C8443C; }
.merken[aria-pressed="true"] .ikon { filter: drop-shadow(0 1px 2px rgba(200, 68, 60, .35)); }

/* Ein kurzer Schlag beim Merken. Nur beim Setzen, nicht beim Entfernen:
   Bestaetigung gehoert zum Hinzufuegen. */
@keyframes merk-pochen {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  70%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.merken.pocht .ikon { animation: merk-pochen .34s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .merken.pocht .ikon { animation: none; }
}

/* Das Herz neben der Ueberschrift einer Tourseite. Dort steht es nicht auf
   einem Bild, sondern im Text, also braucht es eine sichtbare Umrandung. */
.detail-titel { display: flex; align-items: flex-start; gap: 16px; }
.detail-titel h1 { flex: 1 1 auto; min-width: 0; }
.merken.gross {
  position: static; flex: 0 0 auto;
  width: 44px; height: 44px; margin-top: 4px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  backdrop-filter: none;
}
.merken.gross .ikon { width: 22px; height: 22px; }

.karte-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: var(--t-klein); color: var(--tinte-60); margin-bottom: 10px;
}
.karte-meta span { display: inline-flex; align-items: center; gap: 5px; }

.karte-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.karte-preis { display: flex; flex-direction: column; gap: 0; }
.karte-preis strong { font-size: 17px; color: var(--tinte); font-weight: 700; letter-spacing: -.015em; }
.karte-preis span { font-size: var(--t-winzig); color: var(--tinte-60); }
.bewertung {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-klein); color: var(--tinte-60); white-space: nowrap;
}
.bewertung b { color: var(--tinte); font-weight: 600; }

/* ---------- Zahlen und Schnellkontakt ---------- */
/* Die Zeile unter dem Hero traegt nur noch die beiden Kontaktknoepfe. Die drei
   Zahlen sind am 2026-09-21 raus: "5 Abholgebiete" und "4 Sprachen" standen
   eine Zeile tiefer im Band noch einmal, dort sogar ausbuchstabiert.
   Die Regeln fuer > div, b und span bleiben stehen, die eingefrorene
   Next.js-App in web/ gibt die Zahlen weiterhin aus. */

.zahlen { border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.zahlen-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 14px 34px; flex-wrap: wrap; padding-block: 18px;
}
.zahlen-inner > div { display: flex; align-items: baseline; gap: 7px; }
.zahlen-inner b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.zahlen-inner span { font-size: var(--t-klein); color: var(--tinte-60); }
.schnellkontakt { display: flex; gap: 10px; }
.kontakt-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-pille);
  border: 1px solid var(--linie); background: var(--papier);
  font-size: var(--t-klein); font-weight: 600; text-decoration: none;
  transition: border-color .18s, color .18s;
}
.kontakt-knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.kontakt-knopf.gruen { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 35%, var(--linie)); }
.kontakt-knopf.gruen:hover { border-color: var(--gruen); }

/* ---------- Kategorie-Pillen im Hero ---------- */
.pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pillen a {
  display: inline-block; padding: 8px 15px; border-radius: var(--r-pille);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  color: #fff; font-size: var(--t-klein); font-weight: 600; text-decoration: none;
  backdrop-filter: blur(6px); transition: background .18s;
}
.pillen a:hover { background: rgba(255,255,255,.3); color: #fff; }

.suche .cta { gap: 7px; }

/* ---------- Untere Navigationsleiste ---------- */
.tableiste { display: none; }

@media (max-width: 760px) {
  .tableiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-leiste);
    /* Vier Punkte, seit Konto raus ist: es gibt kein Kundenkonto. */
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: color-mix(in srgb, var(--flaeche) 82%, transparent);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Der Menuepunkt ist ein <details> statt eines Verweises. Sein summary
     traegt dieselben Regeln, damit er in der Reihe nicht auffaellt.

     Beide Selektoren gehen ueber das direkte Kind. Ohne das griffen sie auch
     auf die Verweise im aufgeklappten Panel durch - das steht im DOM in der
     Leiste - und die standen dann mittig, klein und grau statt links. */
  .tableiste > a, .tableiste > .menue > summary {
    display: grid; justify-items: center; gap: 3px;
    padding: 9px 4px 10px; text-decoration: none; cursor: pointer;
    color: var(--tinte-60); font-size: 11.5px; font-weight: 600;
  }
  .tableiste > .menue[open] > summary { color: var(--akzent); }
  .tableiste > a .ikon, .tableiste > .menue > summary .ikon { width: 22px; height: 22px; }
  /* Die Zahl haengt am Symbol, nicht am ganzen Punkt: sonst sitzt sie bei
     einem langen Wort wie "Merkliste" irgendwo in der Luft. */
  .tableiste .tab-ikon { position: relative; display: grid; place-items: center; }
  .tableiste > a[aria-current="page"] { color: var(--akzent); }
  .tableiste > a:active { background: var(--sand); }

  body { padding-bottom: 64px; }
  /* Auf Tourseiten ersetzt die Buchungsleiste die Navigationsleiste */
  body:has(.mobilleiste) .tableiste { display: none; }
  body:has(.mobilleiste) { padding-bottom: 76px; }

  /* Hero zentriert, wie im Vorbild */
  .hero-inner { text-align: center; align-items: center; }
  .hero h1 { max-width: 20ch; }
  .hero-sub { max-width: 40ch; }
  .suche { width: 100%; }
  .pillen { justify-content: center; }

  /* Kartenreihen waagerecht mit Einrasten */
  .raster {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
    grid-template-columns: none; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    margin-inline: -20px; padding-inline: 20px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .raster::-webkit-scrollbar { display: none; }
  .raster > .karte { scroll-snap-align: start; }
  /* Uebersicht und Merkliste bleiben Listen: dort wird gefiltert, und die
     Merkliste soll man am Stueck ueberblicken, nicht durchwischen muessen. */
  #liste, #merkliste { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr;
           overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }

  .zahlen-inner { gap: 12px 20px; }
  .zahlen-inner b { font-size: 18px; }
  .schnellkontakt { width: 100%; justify-content: center; }
  .kontakt-knopf { flex: 1 1 auto; justify-content: center; max-width: 190px; }

  .kat-raster { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kat-kachel { min-height: 130px; padding: 14px; }
  .kat-kachel b { font-size: 15px; }
}

@media (max-width: 430px) {
  .raster { grid-auto-columns: 84%; }
  .kat-raster { grid-template-columns: 1fr 1fr; }
  /* Nicht unter 11: darunter bricht die Beschriftung weg. Stattdessen
     enger setzen, dann passen die fuenf Punkte weiter nebeneinander. */
  .tableiste a { font-size: 11px; letter-spacing: -.01em; }
}

@media (max-width: 760px) {
  /* Das Menue steht in der unteren Leiste, im Kopf waere es doppelt.
     Die Merkliste steht dort ebenfalls, deshalb faellt auch ihr Knopf weg.
     Links die Marke, rechts Instagram, Facebook und die Sprache. */
  .merk-knopf { display: none; }
  .kopf-inner { justify-content: space-between; gap: 16px; }
  .marke { margin: 0; padding: 0; min-width: 0; }
  .kopf-rechts { margin-left: 0; flex: 0 0 auto; }
  .kopf-sozial { display: inline-flex; }
}

/* ---------- Bewertungen (echte Google-Rezensionen) ---------- */
/* Der leere Stern ist dasselbe Symbol wie der volle, nur blass. Ein zweites
   Symbol im Sprite waere Ballast fuer nichts. */
.ikon.stern.leer { color: var(--linie); }

.sterne { display: inline-flex; gap: 2px; flex: 0 0 auto; }

.bewertungen { margin-block: var(--luft-l); }
.bewertungen > h2 { margin-bottom: var(--luft-s); }

.bew-schnitt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--luft-s);
}
.bew-schnitt b { font-size: var(--t-h3); font-weight: 600; }
.bew-schnitt span { color: var(--tinte-60); }

.bew-nurbetrieb { color: var(--tinte-60); font-size: var(--t-klein);
                  margin-bottom: var(--luft-m); }

.rezension {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 18px 20px; margin: 0 0 14px;
}
.rezension p { margin: 0 0 8px; }
.rezension p:last-of-type { margin-bottom: 0; }

.rez-kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
/* cite kursiv zu setzen ist die Voreinstellung des Browsers und liest sich
   hier wie eine Betonung, die der Name nicht braucht. */
.rez-kopf cite { font-style: normal; font-weight: 600; }
.rez-jahr { color: var(--tinte-60); font-size: var(--t-klein); }

.rez-sprache {
  color: var(--tinte-60); font-size: var(--t-klein);
  margin-top: 10px !important; margin-bottom: 0 !important;
}

.bew-quelle { margin: var(--luft-s) 0 6px; }
.bew-quelle a { color: var(--akzent); }

/* Der Echtheitshinweis ist Pflicht (§ 5b Abs. 3 UWG), aber kein Hauptinhalt:
   klein und ruhig, trotzdem lesbar. Nicht auf --tinte-40 setzen, das
   unterschreitet den Kontrast. */
.bew-echtheit {
  color: var(--tinte-60); font-size: var(--t-klein); line-height: 1.5;
  max-width: 62ch;
}

/* Auf der Startseite stehen die Bewertungen nebeneinander, sobald Platz ist.
   Auf einer Tourseite bleiben sie untereinander - dort ist die Spalte schmal. */
@media (min-width: 900px) {
  .abschnitt > .bewertungen .rezension {
    break-inside: avoid;
  }
  .abschnitt > .bewertungen {
    column-count: 2; column-gap: 20px;
  }
  .abschnitt > .bewertungen > h2,
  .abschnitt > .bewertungen > .bew-schnitt,
  .abschnitt > .bewertungen > .bew-nurbetrieb,
  .abschnitt > .bewertungen > .bew-quelle,
  .abschnitt > .bewertungen > .bew-echtheit {
    column-span: all;
  }
}

/* ---------- Sprungziele unter dem klebenden Kopf ---------- */
/* Der Kopf klebt oben und ist calc(var(--logo-hoehe) + 28px) hoch. Jedes
   Sprungziel landete deshalb DAHINTER: der Sprunglink #inhalt, der Knopf
   "Anfragen" auf Mobil und jede Ueberschrift, die scrollIntoView anfaehrt.
   Man sah dann die Mitte eines Abschnitts und hielt es fuer einen Fehler.

   scroll-margin-top haelt genau die Kopfhoehe frei, plus 12px Luft. Es wirkt
   nur beim Springen, nicht beim normalen Scrollen, kostet also nichts. */
:where([id], section, h1, h2, h3) {
  scroll-margin-top: calc(var(--logo-hoehe) + 40px);
}