:root{
    --ground:#f1f4f5; --surface:#ffffff; --surface-2:#e5eaec;
    --ink:#0c2a33; --ink-2:#3d5760; --ink-3:#6c848c;
    --line:#d3dcdf; --line-2:#b7c5c9;
    --accent:#d64a1e; --accent-ink:#ffffff; --accent-soft:#fbe9e2;
    --deep:#0c2a33; --deep-ink:#eef4f5;
    --ok:#1b6b52; --ok-soft:#dcefe7;
    --shadow:0 1px 2px rgba(12,42,51,.07), 0 8px 24px -12px rgba(12,42,51,.22);
    --display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
    --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#0d1418; --surface:#141d22; --surface-2:#1d282e;
      --ink:#e9f1f3; --ink-2:#a7bcc3; --ink-3:#7b9199;
      --line:#26343a; --line-2:#3a4c54;
      --accent:#ff7043; --accent-ink:#1a0b05; --accent-soft:#2e1610;
      --deep:#081015; --deep-ink:#e9f1f3;
      --ok:#5fd0a8; --ok-soft:#10301f;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0d1418; --surface:#141d22; --surface-2:#1d282e;
    --ink:#e9f1f3; --ink-2:#a7bcc3; --ink-3:#7b9199;
    --line:#26343a; --line-2:#3a4c54;
    --accent:#ff7043; --accent-ink:#1a0b05; --accent-soft:#2e1610;
    --deep:#081015; --deep-ink:#e9f1f3;
    --ok:#5fd0a8; --ok-soft:#10301f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }

  body{background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
  .shell{max-width:1180px; margin:0 auto; padding-inline:20px;}
  h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.02em; text-wrap:balance; margin:0;}
  a{color:inherit;}
  button{font:inherit; cursor:pointer;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}
  img{max-width:100%;}

  .mockbar{background:var(--deep); color:var(--deep-ink); font-size:.78rem; padding:7px 0;}
  .mockbar .shell{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; justify-content:space-between;}
  .mockbar b{font-family:var(--display); font-weight:600;}
  .mockbar span{opacity:.72;}

  /* ---- Kopfzeile ---- */
  .topbar{border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:env(safe-area-inset-top,0px); z-index:30;}
  .topbar .shell{display:flex; align-items:center; gap:14px; min-height:62px; flex-wrap:wrap; padding-block:8px;}
  .brandlink{background:none; border:0; padding:0; text-align:left;}
  .brand{font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:-.025em; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
  .brand em{font-style:normal; color:var(--accent);}
  /* Logo (2026-09-19): Zeichen + zweizeiliger Schriftzug, bricht auf dem Handy nie um */
  .brand:has(.zeichen){align-items:center; flex-wrap:nowrap; gap:9px;}
  .brand .zeichen{width:38px; height:38px; flex:0 0 auto; display:block;}
  .brand .wort{display:flex; flex-direction:column; line-height:1.05; white-space:nowrap;}
  .brand .wort em{font-size:.8em; margin-top:2px;}
  .brand:has(.zeichen) small{align-self:center; padding-left:6px; border-left:1px solid var(--line);}
  .brand small{font-family:var(--body); font-weight:400; font-size:.72rem; color:var(--ink-3); letter-spacing:0;}
  .mainnav{margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap:wrap;}
  .navlink{background:none; border:0; color:var(--ink-2); padding:11px 13px; min-height:44px; border-radius:6px; font-family:var(--display); font-weight:500; font-size:.92rem; white-space:nowrap; flex:0 0 auto;}
  .navlink:hover{background:var(--surface-2); color:var(--ink);}
  .navlink[aria-current="page"]{color:var(--ink); background:var(--surface-2); font-weight:600;}
  /* Gruppenreiter mit Aufklappmenue (Text @ Gruppe in der Inhaltsdatei) */
  .navgroup{flex:0 0 auto; position:relative;}
  .navgroup-btn{background:none; border:0; color:var(--ink-2); padding:11px 13px; min-height:44px; border-radius:6px; font-family:var(--display); font-weight:500; font-size:.92rem; white-space:nowrap; display:flex; align-items:center; gap:6px;}
  .navgroup-btn:hover, .navgroup-btn[aria-expanded="true"]{background:var(--surface-2); color:var(--ink);}
  .navgroup.aktiv .navgroup-btn{color:var(--ink); background:var(--surface-2); font-weight:600;}
  .navgroup-btn .pfeil{width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7;}
  .navmenu{display:none; position:fixed; z-index:40; min-width:230px; flex-direction:column; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(12,42,51,.16);}
  .navgroup-btn[aria-expanded="true"] + .navmenu{display:flex;}
  .navmenu .navlink{text-align:left; width:100%;}
  /* Gilt erst ab der Breite, ab der die volle Kopfzeile gezeigt wird (siehe
     den Block "Kopfzeile klappt frueher zusammen" weiter unten).

     Der Innenrahmen ist auf 1180px gedeckelt, abzueglich Polster bleiben also
     hoechstens 1140px fuer die ganze Kopfzeile — egal wie breit der Bildschirm
     ist. Die polnische Ang-Thong-Fassung braucht davon schon 1135px. Damit eine
     kuenftige Sprache mit laengeren Reitern die Zeile nicht sprengt, gibt der
     Marken-Untertitel als Erstes nach und wird mit Auslassungspunkten gekuerzt.
     Reicht auch das nicht, bricht die Zeile in eine zweite um (flex-wrap bleibt
     bewusst an) — unschoen, aber nie ausserhalb des Bildschirms. Damit kann die
     Kopfzeile bauartbedingt nicht mehr ueberlaufen, egal wie lang die Texte
     einer kuenftigen Sprache sind. */
  @media (min-width:1181px){
    .brandlink, .brand{min-width:0;}
    .brand small{white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis;}
  }
  .kopfaktionen{display:flex; align-items:center; gap:2px; flex:0 0 auto;}
  .menueknopf{display:none;}
  .memo-symbol{display:none;}
  .memo{flex:0 0 auto; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 15px; min-height:44px; font-size:.84rem; display:flex; align-items:center; gap:7px; margin-left:6px;}
  .memo .cnt{background:var(--surface-2); border-radius:999px; min-width:20px; text-align:center; font-weight:600; font-size:.76rem; padding:1px 6px; font-variant-numeric:tabular-nums;}
  .memo.has .cnt{background:var(--accent); color:var(--accent-ink);}

  /* ---- Hero ---- */
  .hero{background:var(--deep); color:var(--deep-ink); padding-block:44px 40px;}
  .hero .shell{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:36px; align-items:center;}
  .eyebrow{font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:9px; margin-bottom:14px;}
  .eyebrow::after{content:""; height:1px; flex:1; background:currentColor; opacity:.35;}
  .hero h1{font-size:clamp(2rem,5.2vw,3.05rem); font-weight:700; line-height:1.03;}
  .hero p{margin:16px 0 0; font-size:1.06rem; opacity:.84; max-width:52ch;}
  .promises{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
  .promises li{display:flex; gap:11px; align-items:flex-start; font-size:.95rem; opacity:.92;}
  .promises .tick{flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:.68rem; font-weight:700; margin-top:2px;}

  /* ---- Filter ---- */
  /* Bleibt an ihrem Platz ueber der Tourenliste; frueher klebte sie beim Scrollen
     (halbtransparent in den Themen) und verdeckte die Karten. */
  .filters{background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:2; scroll-margin-top:72px;}
  .filters .shell{display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding-block:12px;
    scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;}
  /* Wischbar bleibt die Leiste, nur der graue Scrollbalken darunter entfaellt */
  .filters .shell::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); border-radius:999px; padding:10px 16px; min-height:44px; font-size:.87rem; white-space:nowrap; transition:.15s;}
  .chip:hover{border-color:var(--ink-3); color:var(--ink);}
  .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--ground); font-weight:600;}
  .chip .n{font-size:.76rem; opacity:.6; margin-left:5px; font-variant-numeric:tabular-nums;}

  /* ---- Grid ---- */
  main{padding-block:32px 60px;}
  .section-head{display:flex; align-items:baseline; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
  .section-head h2{font-size:1.4rem; font-weight:600;}
  .section-head .count{font-size:.85rem; color:var(--ink-3); font-variant-numeric:tabular-nums;}
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:20px;}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; text-align:left; padding:0; color:inherit; transition:.18s;}
  .card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-2);}

  /* Eine Seite mit genau einem Produkt (bauen.mjs setzt "einzeln"). Das Raster
     legt die Kachel sonst so schmal an wie eine unter zwoelf -- auf dem Desktop
     steht das Angebot dann verloren am Seitenfuss. Nutzerin 2026-09-25:
     "dass das Produkt halt dann selber grossflaechig praesentiert wird, und
     nicht so nackt da unten als einzelnes auf Desktop steht."
     Ab 720px quer: Bild links in festem Quadrat, Text rechts, groesser gesetzt.
     Darunter, also auf Mobil, bleibt die gewohnte Kachel von oben nach unten --
     quer wuerde dort beides zu schmal. */
  .grid.einzeln{grid-template-columns:1fr;}
  .grid.einzeln .card{border-width:2px;}
  .grid.einzeln .cardbody{padding:18px 20px 20px; gap:10px;}
  .grid.einzeln .cardbody h3{font-size:1.2rem;}
  .grid.einzeln .cardbody .desc{-webkit-line-clamp:4; font-size:.92rem;}
  .grid.einzeln .price .v{font-size:1.35rem;}
  @media (min-width:720px){
    .grid.einzeln .card{flex-direction:row; align-items:stretch;}
    .grid.einzeln .thumb{flex:0 0 42%; max-width:42%; aspect-ratio:4/3;}
    .grid.einzeln .cardbody{padding:24px 28px; gap:12px;}
    .grid.einzeln .cardbody h3{font-size:1.45rem;}
    .grid.einzeln .cardbody .desc{-webkit-line-clamp:5;}
    .grid.einzeln .price .v{font-size:1.6rem;}
  }
  .thumb{position:relative; aspect-ratio:1/1; background:var(--surface-2); max-width:100%;}
  .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .badges{position:absolute; top:9px; left:9px; display:flex; flex-wrap:wrap; gap:5px; max-width:calc(100% - 18px);}
  .badge{font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; padding:3px 7px; border-radius:3px; background:var(--surface); color:var(--ink-2); box-shadow:0 1px 3px rgba(0,0,0,.18);}
  .badge.hot{background:var(--accent); color:var(--accent-ink);}
  .badge.de{background:var(--ok-soft); color:var(--ok);}
  .cardbody{padding:13px 15px 15px; display:flex; flex-direction:column; gap:7px; flex:1;}
  .cardbody h3{font-size:1rem; font-weight:600; line-height:1.28;}
  .cardbody .desc{font-size:.85rem; color:var(--ink-3); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .metaline{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.78rem; color:var(--ink-3); border-top:1px solid var(--line); padding-top:8px;}
  .price{margin-top:auto; display:flex; align-items:baseline; gap:6px; padding-top:6px;}
  .price .lbl{font-size:.74rem; color:var(--ink-3);}
  .price .v{font-family:var(--display); font-weight:700; font-size:1.08rem; font-variant-numeric:tabular-nums;}
  .price .cur{font-size:.78rem; color:var(--ink-3);}

  /* ---- Detail ---- */
  .back{display:inline-flex; align-items:center; gap:7px; background:none; border:0; color:var(--ink-2); font-size:.9rem; padding:11px 0; min-height:44px; margin-bottom:12px;}
  .back:hover{color:var(--accent);}
  .detail{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start;}
  .detail .shot{border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); aspect-ratio:1/1; max-width:100%;}
  .detail .shot img{width:100%; height:100%; object-fit:cover; display:block;}
  /* Galerie: Hauptbild fuehrt in den Shop, darunter die uebrigen Bilder.
     Die Quellbilder sind 500x500 — groesser darf die Galerie nie werden, sonst
     wird das Bild hochgezogen und verpixelt. Auf schmalen Bildschirmen nimmt
     sie die volle Breite, bleibt aber hoechstens so hoch wie 60 % des Fensters,
     damit Titel und Preis ohne Scrollen sichtbar sind. */
  .detail .produktbilder{width:100%; max-width:500px; margin-inline:auto; min-width:0;}
  .detail .buehne{position:relative;}
  /* Bildleiste: ein Bild pro Breite, seitlich wischbar, rastet ein */
  .detail .shot{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; max-height:60vh; max-height:60svh;}
  .detail .shot::-webkit-scrollbar{display:none;}
  .detail .folie{flex:0 0 100%; scroll-snap-align:start; display:block; line-height:0;}
  .detail .folie img{width:100%; height:100%; object-fit:cover; display:block;}
  .detail .bildpfeil{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0;
    background:rgba(255,255,255,.88); color:var(--ink); font-size:1.6rem; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 3px;}
  .detail .bildpfeil.zurueck{left:10px;} .detail .bildpfeil.weiter{right:10px;}
  .detail .bildpfeil[hidden]{display:none;}
  .detail .bildzahl{position:absolute; right:10px; bottom:10px; background:rgba(12,42,51,.75); color:#fff; font-size:.78rem; padding:3px 9px; border-radius:999px; font-variant-numeric:tabular-nums;}
  .detail .bildzahl[hidden]{display:none;}
  /* Lange Titel und Texte umbrechen statt die Seite seitlich aufzuspreizen */
  .detail > *{min-width:0;}
  .detail h2,.detail .lead{overflow-wrap:anywhere; hyphens:auto;}
  .detail .mini{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .detail .mini::-webkit-scrollbar{display:none;}
  .detail .mini button{flex:0 0 auto; width:72px; height:72px; padding:0; border:2px solid transparent;
    border-radius:8px; overflow:hidden; background:none; cursor:pointer; line-height:0;}
  .detail .mini button[aria-current="true"]{border-color:var(--accent,#d64a1e);}
  .detail .mini img{width:100%; height:100%; object-fit:cover; display:block;}
  .detail .mini:empty{display:none;}
  .detail h2{font-size:clamp(1.5rem,3.6vw,2.05rem); font-weight:700; line-height:1.1;}
  .detail .lead{color:var(--ink-2); margin:14px 0 0;}
  .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:18px;}
  .fact{background:var(--surface); padding:10px 12px;}
  .fact dt{font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-family:var(--display); font-weight:600; margin-bottom:2px;}
  .fact dd{margin:0; font-size:.92rem; font-weight:600; font-family:var(--display);}

  .bookbox{background:var(--surface); border:1px solid var(--accent); border-radius:10px; padding:16px 18px; margin-top:18px; box-shadow:var(--shadow);}
  .bookbox .big{font-family:var(--display); font-weight:700; font-size:1.85rem; font-variant-numeric:tabular-nums; line-height:1.1;}
  .bookbox .note{font-size:.82rem; color:var(--ink-3); margin-top:4px;}
  .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
  .btn{border-radius:8px; padding:11px 19px; font-family:var(--display); font-weight:600; font-size:.95rem; border:1px solid transparent; text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
  .btn.primary{background:var(--accent); color:var(--accent-ink);}
  .btn.primary:hover{filter:brightness(1.07);}
  .btn.ghost{background:transparent; border-color:var(--line-2); color:var(--ink);}
  .btn.ghost:hover{border-color:var(--ink-3);}
  .btn.ghost.on{background:var(--ok-soft); border-color:var(--ok); color:var(--ok);}

  /* Klar getrennte Inhaltsblöcke */
  .panelblock{background:var(--surface); border:1px solid var(--line); border-radius:10px; margin-top:16px; overflow:hidden;}
  .panelblock > h3{
    font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--ink-3);
    padding:11px 18px; border-bottom:1px solid var(--line); background:var(--surface-2); margin:0;
  }
  .panelblock .inner{padding:14px 18px 16px;}
  ol.stations{list-style:none; counter-reset:st; padding:0; margin:0;}
  ol.stations li{counter-increment:st; position:relative; padding:9px 0 9px 34px; border-bottom:1px solid var(--line); font-size:.94rem;}
  ol.stations li:last-child{border-bottom:0; padding-bottom:0;}
  ol.stations li::before{content:counter(st); position:absolute; left:0; top:9px; width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:700; display:grid; place-items:center; font-family:var(--display);}
  ul.ticks{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:7px 18px;}
  ul.ticks li{position:relative; padding-left:22px; font-size:.91rem;}
  ul.ticks li::before{position:absolute; left:0; font-weight:700;}
  ul.ticks li.yes::before{content:"✓"; color:var(--ok);}
  ul.ticks li.no::before{content:"✕"; color:var(--ink-3);}
  ul.ticks li.no{color:var(--ink-3);}
  .fieldnote{margin-top:16px; border-left:3px solid var(--accent); background:var(--surface); padding:12px 15px; font-size:.87rem; color:var(--ink-2);}
  .fieldnote b{color:var(--ink); font-family:var(--display);}
  .taglist{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;}
  .taglist .badge{box-shadow:none; border:1px solid var(--line);}

  /* ---- Infoseiten ---- */
  /* Bildnachweis unter fremden Fotos (CC-Lizenz) */
  /* Bildnachweis steht unter dem Bild, nie darin (Nutzerin 2026-09-20) */
  .bildnachweis{display:block; margin:0; padding:4px 12px 6px; font-size:.68rem; line-height:1.35; color:var(--ink-3); background:var(--surface);}
  figure > .bildnachweis:first-of-type{padding-top:5px;}
  .bildnachweis a{color:inherit;}
  figcaption.nur-nachweis{padding:4px 10px; background:var(--surface);}
  /* Anreisser auf der Startseite: Kennzahlen + Bildkacheln in den Ratgeber */
  .anreisser{padding:26px 0 8px;}
  .anreisser .fakten{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:0 0 20px; padding:0; list-style:none;}
  .anreisser .fakten li{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
  .anreisser .fakten b{display:block; font-family:var(--display); font-size:1.15rem; color:var(--ink);}
  .anreisser .fakten span{font-size:.8rem; color:var(--ink-3);}
  .anreisser h2{font-size:1.25rem; margin:0 0 12px;}
  .anreisser .kacheln{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  .anreisser .kachel{display:block; text-align:left; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); padding:0; cursor:pointer; color:inherit; text-decoration:none; transition:transform .15s, box-shadow .15s;}
  .anreisser .kachel:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(12,42,51,.12);}
  .anreisser .kachel img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
  .anreisser .kachel .text{padding:10px 12px 12px;}
  .anreisser .kachel b{display:block; font-family:var(--display); font-size:.98rem; margin-bottom:3px;}
  /* Lange Woerter ("Deutschsprachig") auf dem Handy trennen statt ueber den Rand ragen */
  .anreisser .kachel, .card, .anreisser .kachel .text{min-width:0;}
  .anreisser .kachel b, .anreisser .kachel small, .card h3, .anreisser h3{overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto;}
  .anreisser .kachel small{display:block; font-size:.8rem; color:var(--ink-3); line-height:1.4;}
  .anreisser .kbild figcaption{min-height:22px; padding:4px 12px 0; background:none; border:0;}
  .anreisser .kachel .bildnachweis{margin:0; padding:3px 12px 0; font-size:.62rem; background:none;}
  .anreisser .hinweisband{margin:18px 0 0; padding:12px 16px; border-radius:10px; background:var(--surface-2); border-left:4px solid var(--accent); font-size:.9rem;}
  @media (max-width:880px){ .anreisser .fakten{grid-template-columns:repeat(2,1fr);} .anreisser .kacheln{grid-template-columns:repeat(2,1fr);} }
  .infohero{border-radius:12px; overflow:hidden; border:1px solid var(--line); margin:0 0 26px; position:relative; background:var(--surface-2);}
  .infohero img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
  .infohero figcaption{font-size:.78rem; color:var(--ink-3); padding:8px 14px; background:var(--surface); border-top:1px solid var(--line);}
  .article{max-width:74ch;}
  .article h2{font-size:clamp(1.5rem,3.6vw,2.05rem); font-weight:700; line-height:1.12;}
  .article .sub{color:var(--ink-3); margin:8px 0 0; font-size:1.02rem;}
  .article h3{font-size:1.1rem; font-weight:600; margin:30px 0 8px;}
  .article p{margin:0 0 13px;}
  .keyvals{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:20px 0 4px;}
  .keyvals div{background:var(--surface); padding:11px 13px;}
  .keyvals dt{font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-family:var(--display); font-weight:600; margin-bottom:3px;}
  .keyvals dd{margin:0; font-family:var(--display); font-weight:600; font-size:1.02rem;}
  figure.inline{margin:24px 0; border-radius:10px; overflow:hidden; border:1px solid var(--line);}
  figure.inline img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
  figure.inline figcaption{font-size:.78rem; color:var(--ink-3); padding:8px 14px; background:var(--surface); border-top:1px solid var(--line);}
  .faq{margin-top:34px;}
  .faq h3{margin-bottom:12px;}
  .faq details{border:1px solid var(--line); border-radius:8px; background:var(--surface); margin-bottom:9px; overflow:hidden;}
  .faq summary{padding:14px 16px; min-height:48px; cursor:pointer; font-family:var(--display); font-weight:600; font-size:.97rem; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; color:var(--accent); font-size:1.25rem; line-height:1; flex:0 0 auto;}
  .faq details[open] summary::after{content:"−";}
  .faq details[open] summary{border-bottom:1px solid var(--line);}
  .faq .answer{padding:13px 16px 15px; font-size:.94rem; color:var(--ink-2);}
  .faq .answer p{margin:0 0 10px;}
  .faq .answer p:last-child{margin:0;}

  .seo{border-top:1px solid var(--line); margin-top:52px; padding-top:34px;}
  .seo .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:28px; margin-top:16px;}
  .seo h3{font-size:1.02rem; font-weight:600; margin-bottom:7px;}
  .seo p{font-size:.93rem; color:var(--ink-2); margin:0; max-width:60ch;}

  /* ---- Footer ---- */
  footer{background:var(--deep); color:var(--deep-ink); margin-top:52px; padding-block:34px 22px;}
  .footgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px;}
  footer h4{font-family:var(--display); font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:11px;}
  footer p{margin:0; font-size:.9rem; opacity:.84; line-height:1.65;}
  footer ul{list-style:none; padding:0; margin:0; display:grid; gap:7px;}
  footer a{font-size:.9rem; opacity:.84; text-decoration:none; border-bottom:1px solid transparent; display:inline-block; padding-block:9px; line-height:1.5;}
  footer a:hover{opacity:1; border-bottom-color:currentColor;}
  .tat{display:flex; align-items:center; gap:13px; margin-top:16px;}
  .tat img{height:62px; width:auto; display:block;}
  .tat span{font-size:.8rem; opacity:.78; line-height:1.5;}
  .footbottom{border-top:1px solid rgba(255,255,255,.14); margin-top:26px; padding-top:14px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; font-size:.8rem; opacity:.68;}

  .toast{position:fixed; left:50%; transform:translateX(-50%) translateY(14px); bottom:calc(20px + env(safe-area-inset-bottom,0px)); background:var(--deep); color:var(--deep-ink); padding:11px 19px; border-radius:999px; font-size:.9rem; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.24s; z-index:60; border:1px solid rgba(255,255,255,.16);}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* ---- Bewertungen ---- */
  .ratingline{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap;}
  .stars{color:#f5a524; font-size:1.02rem; letter-spacing:1px; line-height:1;}
  .ratingline .val{font-family:var(--display); font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums;}
  .ratingline a{font-size:.88rem; color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--line-2);}
  .ratingline a:hover{color:var(--accent); border-bottom-color:var(--accent);}
  .review{border-bottom:1px solid var(--line); padding:14px 0;}
  .review:first-child{padding-top:0;}
  .review:last-child{border-bottom:0; padding-bottom:0;}
  .review .top{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px;}
  .review .who{font-family:var(--display); font-weight:600; font-size:.93rem;}
  .review .vb{font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ok); background:var(--ok-soft); padding:2px 7px; border-radius:3px; font-weight:600;}
  .review h4{font-size:.97rem; font-weight:600; margin-bottom:4px;}
  .review p{margin:0; font-size:.92rem; color:var(--ink-2);}
  .review .ueb{display:block; margin-top:5px; font-size:.72rem; color:var(--ink-3); font-style:italic;}
  .reviewfoot{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-3);}

  @media (max-width:880px){
    .hero .shell{grid-template-columns:1fr; gap:26px;}
    .detail{grid-template-columns:1fr; gap:22px;}
  }

  /* Kopfzeile klappt frueher zusammen als der Rest des Layouts (20.09.2026).
     Grund: Seit jede Seite in sechs Sprachen steht, sitzt neben Marke, Reitern
     und Merkliste auch ein Sprachmenue in der Zeile — und die Reiter sind je
     nach Sprache unterschiedlich lang. Die polnische Touren-Seite brauchte
     1093px, bekam auf einem 1024er Fenster aber nur 969px: das Sprachmenue
     stand ausserhalb des Bildschirms und die Seite liess sich waagerecht
     scrollen. Deshalb greift die Hamburger-Kopfzeile jetzt bis 1180px (die
     Breite des Innenrahmens) statt bis 880px — dieselbe Loesung wie auf dem
     Handy, nur fuer den Bereich, in dem dasselbe Problem auftritt.
     Hero und Detailansicht bleiben bewusst bei 880px. */
  @media (max-width:1180px){
    /* Wischbare Navigation auf dem Handy.
       Vorher: width:100% des Innenrahmens, der 20px Polster hat. Die Leiste
       endete damit 20px vor dem Bildschirmrand, der letzte Reiter wurde dort
       abgeschnitten und rechts daneben blieb ein toter Streifen. Dazu war die
       Scrollleiste sichtbar (grauer Balken) und overflow-y erzeugte auf
       Android eine senkrechte Linie.
       Jetzt laeuft die Leiste bis an den Bildschirmrand (negativer Rand), das
       Polster wandert nach innen, damit der letzte Reiter erreichbar bleibt.
       Bewusst NICHT per html,body{overflow-x:hidden}: es lief gar nichts ueber,
       und das haette die klebende Kopfleiste (position:sticky) gefaehrdet. */
    /* Handy-Kopfzeile (Nutzerin 2026-09-19: wischbare Leiste unguenstig, Merkliste
       und Flagge nicht sichtbar -> Hamburger). Eine Zeile: Marke | Merkliste (Herz
       mit Zahl) | Flagge | Menueknopf. Die Reiter klappen darunter als Liste auf,
       Gruppen erscheinen dort als Zwischenueberschrift mit ihren Unterpunkten. */
    .topbar .shell{gap:6px; flex-wrap:nowrap; position:relative;}
    .brandlink{flex:1 1 auto; min-width:0;}
    /* Der Zusatz neben dem Markennamen ("from Koh Samui", "Ratgeber" ...) hat
       auf schmalen Geraeten keinen Platz mehr: Bei 390px brach er bei der
       Full-Moon-Seite dreizeilig um und machte die Kopfleiste doppelt so hoch.
       Unter 520px faellt er weg -- der Markenname allein genuegt dort. */
    .brand small{display:none;}
    .kopfaktionen{margin-left:auto;}
    /* Mittelweg (Nutzerin: Pille zu aufdringlich, nacktes Herz zu winzig): runder Knopf in Akzent-Toenung */
    .memo{position:relative; width:42px; height:42px; min-height:42px; padding:0; margin-left:0; border:1.5px solid var(--accent); background:var(--accent-soft,var(--surface-2)); color:var(--accent); border-radius:50%; justify-content:center;}
    .memo .cnt{position:absolute; top:-4px; right:-5px; min-width:18px; height:18px; line-height:18px; padding:0 5px; font-size:.68rem; border-radius:999px; box-shadow:0 0 0 2px var(--surface);}
    .memo:not(.has) .cnt{display:none;}
    .memo-text{display:none;}
    .memo-symbol{display:block; width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round;}
    .memo.has .memo-symbol{fill:var(--accent); stroke:var(--accent);}
    .sprachflagge{margin-left:0;}
    .menueknopf{display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 11px; background:none; border:0; border-radius:8px; color:var(--ink);}
    .menueknopf span{display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .2s, opacity .2s;}
    .menueknopf[aria-expanded="true"]{background:var(--surface-2);}
    .menueknopf[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .menueknopf[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .menueknopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .mainnav{display:none; position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:0;
      background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 14px 30px rgba(12,42,51,.14);
      padding:6px 12px 12px; max-height:calc(100vh - 70px); overflow-y:auto;}
    .topbar.offen .mainnav{display:flex;}
    .mainnav .navlink{text-align:left; width:100%; padding:12px 10px;}
    .navgroup-btn{width:100%; justify-content:space-between; padding:12px 10px; min-height:44px;}
    .navgroup-btn .pfeil{transition:transform .2s;}
    .navgroup-btn[aria-expanded="true"] .pfeil{transform:rotate(225deg) translate(-2px,-1px);}
    .navmenu{display:none; position:static; min-width:0; padding:0 0 4px; margin-left:14px; border:0; border-left:2px solid var(--line); border-radius:0; box-shadow:none; background:none;}
    .navgroup-btn[aria-expanded="true"] + .navmenu{display:flex;}
    .navmenu .navlink{padding-left:24px; font-size:.88rem;}
  }
  /* ---- Hafentag-Planer mit Uhr (Kreuzfahrer-Seiten und Ang-Thong-Kreuzfahrer-Ansicht) ----
     Lag bis 20.09.2026 im Kreuzfahrer-Thema; seit angthong-park.com denselben
     Rechner nutzt, steht er hier und gilt fuer jede Vorlage. */
  .planer{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:22px; background:var(--surface); border-radius:18px; box-shadow:var(--shadow); padding:22px; border-top:4px solid var(--accent);}
  .planer-eingabe{display:grid; gap:14px; align-content:start;}
  .planer-eingabe{grid-template-columns:1fr 1fr; column-gap:12px;}
  .planer-eingabe label{display:grid; gap:6px; font-weight:600; font-size:.92rem; align-content:end; white-space:nowrap;}
  .planer-eingabe .uhr, .planer-eingabe small{grid-column:1/-1;}
  .planer-eingabe .uhr{justify-self:center;}
  .planer-eingabe input{font:inherit; font-size:1.2rem; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--ground); color:var(--ink); width:100%;}
  .zeitwahl{display:flex; align-items:center; gap:6px;}
  .zeitwahl select{font:inherit; font-size:1.2rem; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--ground); color:var(--ink); min-width:80px;}
  .zeitwahl b{font-size:1.2rem;}
  /* Uhr zum Antippen (ersetzt die Auswahllisten, sobald JavaScript laeuft) */
  .zeitwahl.mit-uhr select, .zeitwahl.mit-uhr b{display:none;}
  .uhr-knopf{font:inherit; font-family:var(--display); font-size:1.4rem; font-weight:600; padding:8px 10px; width:100%; justify-content:center; border:1px solid var(--line-2); border-radius:12px; background:var(--ground); color:var(--ink); display:inline-flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; justify-self:start; cursor:pointer;}
  .uhr-knopf svg{width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round;}
  .uhr{background:var(--ground); border:1px solid var(--line); border-radius:16px; padding:14px; display:grid; justify-items:center; gap:8px; width:100%; max-width:300px;}
  .uhr[hidden]{display:none;}
  .uhr-kopf{display:flex; align-items:center; gap:2px; font-family:var(--display); font-size:2.1rem; line-height:1;}
  .uhr-kopf button{font:inherit; background:none; border:0; color:var(--ink-3); padding:4px 8px; border-radius:10px; font-variant-numeric:tabular-nums; cursor:pointer;}
  .uhr-kopf button.an{color:var(--accent-ink); background:var(--accent);}
  .uhr-blatt{width:100%; max-width:250px; touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer;}
  .uhr-blatt .gesicht{fill:var(--surface-2);}
  .uhr-blatt .zeiger{stroke:var(--accent); stroke-width:2;}
  .uhr-blatt .knauf{fill:var(--accent);}
  .uhr-blatt text{fill:var(--ink); font-size:16px; font-family:var(--body); text-anchor:middle; dominant-baseline:central; pointer-events:none;}
  .uhr-blatt text.innen{font-size:13px; fill:var(--ink-2);}
  .uhr-blatt text.aus{opacity:.22;}
  .uhr-blatt text.sel{fill:var(--accent-ink); font-weight:600;}
  .uhr-tipp{margin:0; font-size:.82rem; color:var(--ink-3); font-weight:400;}
  .uhr-fertig{justify-self:end; background:none; border:0; color:var(--accent); font:inherit; font-weight:600; padding:8px 12px; min-height:44px; cursor:pointer;}
  .planer-eingabe small{font-weight:400; color:var(--ink-3); font-size:.82rem;}
  .planer-zeit{font-family:var(--display); font-size:1.35rem; margin:0 0 4px;}
  .planer-anzahl{margin:0 0 10px; color:var(--ink-2);}
  .planer-hinweis{margin:0; color:var(--ink-2);}
  .planer-liste{list-style:none; margin:0; padding:0; display:grid; gap:8px; max-height:340px; overflow:auto;}
  .planer-liste a{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 12px; border-radius:10px; background:var(--ground); text-decoration:none; border:1px solid var(--line);}
  .planer-liste a:hover{border-color:var(--accent);}
  .planer-liste b{font-size:.92rem;}
  .planer-liste span{font-size:.8rem; color:var(--ink-3); white-space:nowrap;}
  .planer-klein{grid-column:1/-1; margin:0; font-size:.8rem; color:var(--ink-3);}
  @media (max-width:760px){ .planer{grid-template-columns:1fr;} .planer-liste a{flex-direction:column; align-items:flex-start;} .planer-liste span{white-space:normal;} }
  .mit-animation .einblenden{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .mit-animation .einblenden.sichtbar{opacity:1; transform:none;}
  @media (prefers-reduced-motion:reduce){ *{transition:none!important;} .card:hover{transform:none;} }

  /* ---- Tourkarte: Stationen auf der Karte, Bild je Station ----------------
     Nutzerin 2026-09-21: "eine virtuelle Karte, die zeigt, wo die einzelnen
     Stationen sind, und dann pam, ein Bild von da" -- die Tour sichtbar
     machen, ohne ein Video zu drehen.

     Aufbau: links die Karte (klebt beim Scrollen), rechts die Stationen
     untereinander. Wer scrollt, sieht den passenden Punkt aufleuchten; wer
     auf einen Punkt tippt, springt zur Station. Auf dem Handy klebt die
     Karte oben und ist flacher, damit darunter immer eine ganze Station
     sichtbar bleibt.

     Das Markup steht in der Inhaltsdatei (Karte als SVG mit data-ort an den
     Punkten, Liste mit <li data-ort>), die Mechanik in skript.js. Ohne
     JavaScript bleibt alles lesbar, nur die Hervorhebung fehlt. */
  .tourkarte{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:start;}
  .tk-karte{position:sticky; top:82px; margin:0; border-radius:16px; overflow:hidden;
    border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow);}
  .tk-karte svg{display:block; width:100%; height:auto;}
  .tk-karte figcaption{font-size:.78rem; color:var(--ink-3); padding:8px 12px; border-top:1px solid var(--line);}
  /* ---- Die echte Karte (karte.mjs) ----
     viewBox ist immer 1000 breit; dargestellt wird sie am Rechner mit rund
     560px, auf dem Handy mit rund 350px. Alle Groessen hier sind in diesen
     1000 Einheiten gedacht -- 24 Einheiten Schrift werden am Rechner also
     etwa 13px. Farben als Variablen, damit jedes Thema die Karte einfaerben
     kann, ohne die Geometrie anzufassen. */
  .tk-echt{--tk-wasser-o:#d7eef2; --tk-wasser-u:#bfe0e8; --tk-land:#f6f1e4; --tk-land-rand:#cdbf9d;
    --tk-schrift:#4f6b73; --tk-schrift-gross:#23424a; --tk-route-gross:#e8674f; --tk-route-schnell:#0f9c9c;}
  .tk-wasser-oben{stop-color:var(--tk-wasser-o);} .tk-wasser-unten{stop-color:var(--tk-wasser-u);}
  .tk-land{fill:var(--tk-land); stroke:var(--tk-land-rand); stroke-width:calc(1.4px / var(--z, 1)); stroke-linejoin:round;}
  /* Weicher Schatten unter den Inseln: hebt sie vom Wasser ab, ohne Linie drumherum. */
  .tk-land-schatten{fill:rgba(20,70,80,.16); transform:translate(0, calc(4px / var(--z, 1))); filter:blur(calc(3px / var(--z, 1)));}
  .tk-route{fill:none; stroke-width:calc(4px / var(--z, 1)); stroke-dasharray:calc(12px / var(--z, 1)) calc(10px / var(--z, 1)); stroke-linecap:round; opacity:.85;}
  .tk-route.gross{stroke:var(--tk-route-gross);} .tk-route.schnell{stroke:var(--tk-route-schnell);}
  /* Namen mit hellem Hof, damit sie ueber Kuestenlinien lesbar bleiben */
  .tk-name{font-family:var(--body); font-weight:600; font-size:calc(24px / var(--z, 1)); fill:var(--tk-schrift);
    paint-order:stroke; stroke:rgba(255,255,255,.8); stroke-width:calc(6px / var(--z, 1)); stroke-linejoin:round;}
  .tk-name.gross{font-family:var(--display); font-size:calc(32px / var(--z, 1)); font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; fill:var(--tk-schrift-gross);}
  /* Inselnamen im Park erst beim Heranzoomen -- in der Gesamtansicht waeren
     sie ein unlesbarer Haufen. */
  .tk-name.nah{font-size:calc(21px / var(--z, 1)); font-style:italic; font-weight:500; opacity:0; transition:opacity .4s;}
  .tk-echt.gezoomt .tk-name.nah{opacity:1;}
  .tk-massstab{transition:opacity .3s;}
  .tk-echt.gezoomt .tk-massstab{opacity:0;}
  .tk-massstab path{fill:none; stroke:var(--tk-schrift); stroke-width:3;}
  .tk-massstab text{font-family:var(--body); font-weight:600; font-size:20px; fill:var(--tk-schrift); text-anchor:middle;}
  /* Kartenpunkt: Ring, Fuellung, Nummer. Der aktive waechst und bekommt einen Hof. */
  .tk-punkt{cursor:pointer;}
  .tk-punkt .tk-ring{fill:var(--accent); opacity:0; r:calc(24px / var(--z, 1)); transition:opacity .2s;}
  .tk-punkt .tk-kreis{fill:#fff; stroke:var(--accent); stroke-width:calc(4px / var(--z, 1)); r:calc(18px / var(--z, 1)); transition:fill .2s;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));}
  .tk-punkt .tk-nr{font-family:var(--display); font-weight:700; font-size:calc(20px / var(--z, 1)); fill:var(--accent);
    text-anchor:middle; dominant-baseline:central; pointer-events:none; transition:fill .2s;}
  .tk-punkt:hover .tk-kreis, .tk-punkt:focus-visible .tk-kreis{fill:var(--accent-soft);}
  .tk-punkt.aktiv .tk-ring{opacity:.24; r:calc(40px / var(--z, 1));}
  .tk-punkt.aktiv .tk-kreis{fill:var(--accent); r:calc(24px / var(--z, 1));}
  .tk-punkt.aktiv .tk-nr{fill:var(--accent-ink); font-size:calc(24px / var(--z, 1));}
  .tk-karte figcaption{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center;}
  .tk-legende{display:inline-flex; align-items:center; gap:7px;}
  .tk-legende i{display:inline-block; width:22px; border-top:3px dashed currentColor;}
  .tk-legende i.gross{color:#e8674f;} .tk-legende i.schnell{color:#0f9c9c;}
  .tk-osm{flex-basis:100%; font-size:.7rem; opacity:.75;}
  /* Stationen */
  .tk-liste{list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:tk;}
  .tk-liste li{position:relative; counter-increment:tk; border:1px solid var(--line); border-radius:14px;
    overflow:hidden; background:var(--surface); transition:border-color .2s, box-shadow .2s, transform .2s;}
  .tk-liste li.aktiv{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow);}
  .tk-liste img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;}
  .tk-text{padding:12px 14px 14px;}
  .tk-text b{display:flex; align-items:baseline; gap:9px; font-family:var(--display); font-size:1.02rem; color:var(--ink);}
  .tk-text b::before{content:counter(tk); flex:0 0 auto; width:22px; height:22px; border-radius:50%;
    background:var(--accent-soft); color:var(--accent); font-size:.76rem; display:grid; place-items:center; align-self:center;}
  .tk-liste li.aktiv .tk-text b::before{background:var(--accent); color:var(--accent-ink);}
  .tk-text small{display:block; margin-top:5px; color:var(--ink-2); font-size:.9rem; line-height:1.5;}
  .tk-hinweis{margin:14px 0 0; font-size:.84rem; color:var(--ink-3);}
  @media (max-width:880px){
    /* Kein Raster mehr, sondern ein Block: Im Raster ist der Bereich eines
       Feldes genauso hoch wie das Feld selbst -- die Karte haette dann keinen
       Weg zum Kleben und wuerde einfach mit hochscrollen. Genau das ist beim
       ersten Versuch passiert. Als Block klebt sie ueber der ganzen Liste. */
    .tourkarte{display:block;}
    .tk-liste{margin-top:16px;}
    /* Oben kleben, aber flach: darunter muss noch eine Station ins Bild passen. */
    .tk-karte{top:66px; max-height:42vh; z-index:3;}
    .tk-karte svg{max-height:36vh; object-fit:contain;}
    .tk-karte figcaption{display:none;}
    .tk-name{font-size:calc(34px / var(--z, 1)); stroke-width:calc(8px / var(--z, 1));}
    .tk-name.gross{font-size:calc(42px / var(--z, 1));}
    .tk-massstab text{font-size:28px;} .tk-massstab path{stroke-width:4;}
    .tk-route{stroke-width:calc(6px / var(--z, 1)); stroke-dasharray:calc(18px / var(--z, 1)) calc(14px / var(--z, 1));}
    .tk-punkt .tk-ring{r:calc(32px / var(--z, 1));}
    .tk-punkt .tk-kreis{r:calc(24px / var(--z, 1)); stroke-width:calc(5px / var(--z, 1));}
    .tk-punkt .tk-nr{font-size:calc(28px / var(--z, 1));}
    .tk-punkt.aktiv .tk-kreis{r:calc(31px / var(--z, 1));}
    .tk-punkt.aktiv .tk-ring{r:calc(52px / var(--z, 1));}
    .tk-punkt.aktiv .tk-nr{font-size:calc(32px / var(--z, 1));}
  }

  /* Sprachwechsel als Flagge (Kopf und Fuss) */
  .flagge{display:block; box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.18); transition:transform .15s;}
  .sprachflagge{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin-left:4px; flex:0 0 auto;}
  .sprachflagge:hover .flagge,.fussflagge:hover .flagge{transform:scale(1.08);}
  .fussflagge{display:flex; justify-content:center; width:max-content; margin:18px auto 0;}
  /* Sprachwahl ab drei Fassungen */
  .sprachwahl{position:relative; flex:0 0 auto;}
  .sprachwahl-btn{display:flex; align-items:center; gap:5px; background:none; border:0; padding:8px 6px; min-height:44px; cursor:pointer; color:var(--ink);}
  .sprachwahl-btn .pfeil{width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6;}
  .sprachmenu{display:none; position:absolute; right:0; top:100%; z-index:60; min-width:190px; flex-direction:column; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(12,42,51,.18);}
  .sprachwahl-btn[aria-expanded="true"] + .sprachmenu{display:flex;}
  .sprachmenu a{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:7px; text-decoration:none; color:var(--ink); font-size:.92rem;}
  .sprachmenu a:hover{background:var(--surface-2);}
  .fussflagge.sprachwahl .sprachmenu{right:auto; left:50%; transform:translateX(-50%); bottom:100%; top:auto;}


  /* ==== Thema Elefanten-Auffangstationen (exploresamui.com/elephant-sanctuary-koh-samui, 2026-09-25) ====
     Farbwelt: Dschungelgruen, Lehm/Schlamm, Sand -- bewusst erdig und ruhig, weil das Thema
     ethisch aufgeladen ist und eine schrille Seite dem widerspraeche. Immer hell (Nutzerin
     2026-09-19: Dark Mode sieht nicht schoen aus); die Farbvariablen auf body ueberschreiben
     auch die dunklen :root-Werte aus stil.css. Gilt nur fuer body.vorlage-elefanten.

     Kein bildschirmbreites Heldenbild wie bei touren/angthong: Die Fotos zu diesem Thema sind
     unsere eigenen Shopify-Produktbilder und liegen nur als 500x500 vor (siehe bilder-gross.mjs).
     Ueber die volle Breite gezogen waeren sie matschig. Deshalb Farbflaeche + kleine Bildkacheln. */
  body.vorlage-elefanten{
    --ground:#fbf9f4; --surface:#ffffff; --surface-2:#f0ead9;
    --ink:#1d2b22; --ink-2:#44584b; --ink-3:#6e8073;
    --line:#e6ddca; --line-2:#d5c8ac;
    --accent:#c07a3e; --accent-ink:#ffffff; --accent-soft:#f7e8d7;
    --deep:#24402f; --deep-ink:#ffffff;
    --tuerkis:#3f6b4f; --tuerkis-soft:#e4efe6; --gruen:#5c8a5f; --gruen-soft:#e8f1e6;
    --lehm:#8a6a4a; --gold:#e2b04a;
    --display:"Fraunces",Georgia,"Times New Roman",serif;
    --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --shadow:0 2px 4px rgba(29,43,34,.06), 0 14px 32px -16px rgba(29,43,34,.4);
    background:var(--ground);
  }
  body.vorlage-elefanten{color-scheme:light;}
  .vorlage-elefanten h1, .vorlage-elefanten h2, .vorlage-elefanten h3{letter-spacing:-.01em;}
  .vorlage-elefanten .brand{font-family:var(--display);}
  .vorlage-elefanten .brand em{color:var(--tuerkis);}
  .vorlage-elefanten .topbar{background:rgba(251,249,244,.93); backdrop-filter:saturate(1.4) blur(8px);}

  /* ---- Titelbereich: Text links, drei kleine Bildkacheln rechts ---- */
  .vorlage-elefanten .hero{color:var(--deep-ink); padding-block:clamp(40px,6vw,64px) clamp(46px,7vw,76px);
    background:linear-gradient(160deg,#24402f 0%,#2f5139 55%,#3f6b4f 100%);}
  .vorlage-elefanten .hero .shell{align-items:center;}
  .vorlage-elefanten .hero .eyebrow{color:#cfe3d2; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; font-weight:600;}
  .vorlage-elefanten .hero h1{font-family:var(--display); font-size:clamp(2.1rem,5.4vw,3.4rem); line-height:1.04; margin:10px 0 0; max-width:14ch;}
  .vorlage-elefanten .hero h1 em{font-style:normal; color:var(--gold);}
  .vorlage-elefanten .hero p{opacity:.92; max-width:52ch; font-size:1.06rem;}

  /* Drei Fotos als Staffel. Feste 500x500-Quellen, deshalb kleine Flaechen und
     aspect-ratio 1 -- nichts wird hochskaliert. */
  .heldbilder{margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  .heldbilder img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block;
    border-radius:16px; box-shadow:0 18px 40px -20px rgba(0,0,0,.7);}
  .heldbilder img:first-child{grid-column:span 2; aspect-ratio:16/10;}

  .held-knoepfe{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}
  .knopf{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:13px 22px; font-weight:600; font-size:1rem; text-decoration:none; border:0; transition:transform .15s, box-shadow .15s;}
  .knopf:hover{transform:translateY(-1px);}
  .knopf.voll{background:var(--gold); color:#2b2110; box-shadow:0 10px 24px -10px rgba(226,176,74,.85);}
  .knopf.hell{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(4px);}
  .pillen{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding:0; list-style:none;}
  .pillen li{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.32); border-radius:999px; padding:6px 13px; font-size:.86rem;}
  .bewertung-held{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:.95rem; background:rgba(0,0,0,.24); border-radius:999px; padding:6px 14px;}
  .bewertung-held .sterne{color:var(--gold); letter-spacing:2px;}

  /* ---- Vertrauensleiste ---- */
  .vertrauen{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:-34px 0 34px; position:relative; z-index:2; padding:0; list-style:none;}
  .vertrauen li{background:var(--surface); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); display:flex; gap:11px; align-items:flex-start; font-size:.86rem; color:var(--ink-2);}
  .vertrauen li b{display:block; color:var(--ink); font-size:.92rem;}
  .symbol{flex:0 0 auto; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--tuerkis-soft); color:var(--tuerkis);}
  .symbol svg{width:22px; height:22px;}
  .symbol.koralle, .symbol.gruen{background:var(--tuerkis-soft); color:var(--tuerkis);}

  /* ---- Abschnitte ---- */
  .vorlage-elefanten .anreisser{padding:8px 0 10px;}
  .abschnitt{margin:0 0 54px;}
  .abschnitt-kopf{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
  .abschnitt-kopf h2{font-family:var(--display); font-size:clamp(1.55rem,3.2vw,2.2rem); margin:0;}
  .abschnitt-kopf p{margin:6px 0 0; color:var(--ink-3); max-width:62ch;}
  .unterzeile{font-family:var(--body); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tuerkis); margin-bottom:6px;}

  /* ---- Stufenleiter "Wie viel Elefant?" ----
     Vier Stufen, aufsteigend nach Zeit statt nach Preis -- der Preis steht daneben und kommt
     live aus den Shopdaten (data-ab). Anklickbar: setzt den Reiter der Tourenliste. */
  .stufen{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
  .stufen li{background:var(--surface); border-radius:18px; box-shadow:var(--shadow); padding:18px 20px;
    border-left:5px solid var(--tuerkis); cursor:pointer; transition:transform .15s, box-shadow .15s;
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 20px; align-items:start;}
  .stufen li:nth-child(2){border-left-color:var(--gruen);}
  .stufen li:nth-child(3){border-left-color:var(--lehm);}
  .stufen li:nth-child(4){border-left-color:var(--accent);}
  .stufen li:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(29,43,34,.08), 0 20px 40px -18px rgba(29,43,34,.5);}
  .stufe-kopf b{font-family:var(--display); font-size:1.18rem; display:block; color:var(--ink);}
  .stufe-kopf span{font-size:.82rem; color:var(--ink-3);}
  .stufen p{grid-column:1; margin:2px 0 0; color:var(--ink-2); font-size:.94rem; max-width:68ch;}
  .stufe-ab{grid-column:2; grid-row:1 / span 2; align-self:center; white-space:nowrap;
    font-weight:700; font-size:1.05rem; color:var(--ink); background:var(--surface-2);
    border-radius:999px; padding:8px 15px;}
  .stufe-ab:empty{display:none;}

  /* Symbol in der Stufenleiste. Nutzerin 2026-09-25: "hier gibt es tolle Icons,
     das kann man ein bisschen schoener machen". Muster aus ol.ablauf auf der
     Zipline-Seite bzw. thema/angthong.css. Das Symbol steht in der ersten
     Spalte ueber dem Kopf, damit die Zeile nicht umbricht. */
  .stufen li{position:relative;}
  .stufen .symbol{grid-column:1; width:34px; height:34px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--surface-2); color:var(--tuerkis); margin-bottom:2px;}
  .stufen .symbol svg{width:19px; height:19px;}
  .stufen li:nth-child(2) .symbol{color:var(--gruen);}
  .stufen li:nth-child(3) .symbol{color:var(--lehm);}
  .stufen li:nth-child(4) .symbol{color:var(--accent);}

  /* Symbol vor dem Feldnamen der Vergleichskarten (Muster aus
     thema/angthong.css). Die Feldnamen lauten jetzt "Duration", "You do",
     "You eat" -- kurze Marken statt Saetze, das Symbol traegt die Bedeutung. */
  .vergleich dt{display:flex; align-items:center; gap:6px;}
  .vergleich .vsym{width:14px; height:14px; flex:0 0 14px; opacity:.85;}

  /* ---- Vergleich der vier Stationen ---- */
  .vergleich{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  .vergleich .typ{background:var(--surface); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; border-top:4px solid var(--tuerkis);}
  .vergleich .typ:nth-child(2){border-top-color:var(--gruen);}
  .vergleich .typ:nth-child(3){border-top-color:var(--lehm);}
  .vergleich .typ:nth-child(4){border-top-color:var(--accent);}
  .vergleich .typ-kopf{padding:16px 18px 6px;}
  .vergleich .typ-kopf b{display:block; font-family:var(--display); font-size:1.15rem;}
  .vergleich .typ-kopf span{font-size:.84rem; color:var(--ink-3);}
  .vergleich dl{margin:0; padding:12px 18px; display:grid; gap:8px; font-size:.9rem; flex:1;}
  .vergleich dt{color:var(--ink-3); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;}
  .vergleich dd{margin:0 0 4px; color:var(--ink-2);}
  .vergleich .ab{padding:12px 18px 16px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; gap:8px;}
  .vergleich .ab b{font-size:1.05rem; color:var(--ink);}
  .vergleich .ab a{font-size:.85rem; font-weight:600; color:var(--accent); text-decoration:none;}

  /* ---- Lesetexte der Unterseiten ---- */
  .lesetext{max-width:72ch;}
  .lesetext h2{font-family:var(--display); font-size:clamp(1.45rem,3vw,2.1rem); margin:0 0 14px;}
  .lesetext h3{font-family:var(--display); font-weight:700; font-size:1.18rem; margin:30px 0 8px; color:var(--ink);}
  .lesetext p{color:var(--ink-2); margin:0 0 14px;}
  /* Ein-Satz-Lead unter der h2, wie .article .sub in stil.css -- die
     Unterseiten dieser Seite nutzen aber .lesetext, damit die Typografie der
     Elefanten-Seite erhalten bleibt. */
  .lesetext .sub{color:var(--ink-3); font-size:1.04rem; margin:-6px 0 18px;}
  .packliste{list-style:none; margin:0; padding:0; display:grid; gap:10px;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
  .packliste li{display:flex; flex-direction:column; padding:14px 16px; border-radius:12px;
    background:var(--surface); border:1px solid var(--line); font-size:.94rem; color:var(--ink-2);}
  .packliste b{display:block; font-family:var(--display); font-weight:700; color:var(--ink); margin-bottom:3px;}
  .vorlage-elefanten .faq summary{font-family:var(--display); font-weight:700;}

  .vorlage-elefanten .hinweisband{background:var(--accent-soft); border-left-color:var(--accent);}
  .vorlage-elefanten .filters{background:transparent;}
  .vorlage-elefanten .card{border-radius:16px; border:0; box-shadow:var(--shadow);}

  /* ---- Schmalere Fenster (Regel 5a: 1440/1024/768/360 von Hand geprueft) ---- */
  @media (max-width:980px){
    .vergleich{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:880px){
    .vertrauen{grid-template-columns:1fr 1fr; margin-top:-24px;}
  }
  @media (max-width:640px){
    /* Mobile ist die wichtigste Breite (Regel 5a). Alles, was hier zweispaltig
       bliebe, wird einspaltig -- besonders die Stufenleiter, deren Preis sonst
       neben einem dreizeiligen Titel klemmt. */
    .vorlage-elefanten .brand small{display:none;}
    .vorlage-elefanten .topbar .shell{min-height:0; padding-block:6px; row-gap:2px;}
    .vorlage-elefanten .navlink, .vorlage-elefanten .navgroup-btn{min-height:40px; padding:8px 11px; font-size:.9rem;}
    .vorlage-elefanten .hero h1{font-size:clamp(1.75rem,7.4vw,2.35rem); max-width:none;}
    .vorlage-elefanten .hero p{font-size:1rem;}
    .heldbilder{grid-template-columns:1fr 1fr; gap:8px;}
    .heldbilder img:first-child{aspect-ratio:16/9;}
    .knopf{padding:12px 18px; font-size:.95rem;}
    /* Knoepfe ueber die volle Breite: auf 360 px standen sie sonst zu zweit
       nebeneinander und waren je rund 150 px schmal -- antippbar, aber knapp. */
    .held-knoepfe{gap:10px;}
    .held-knoepfe .knopf{flex:1 1 100%; justify-content:center;}
    .vertrauen, .vergleich{grid-template-columns:1fr;}
    .stufen li{grid-template-columns:1fr; gap:8px;}
    .stufe-ab{grid-column:1; grid-row:auto; justify-self:start;}
    .abschnitt{margin-bottom:42px;}
  }

  .mehr-link{margin-top:18px; font-size:.95rem;}
  .mehr-link a{color:var(--accent); font-weight:600;}

  /* Die ganze Stufe ist anklickbar (data-filter auf dem li). Das reicht fuer die
     Maus, aber nicht fuer Tastatur und Screenreader -- ein li ist kein Bedien-
     element. Deshalb zusaetzlich ein echter, fokussierbarer Verweis je Stufe.
     Er nutzt denselben data-filter-Griff und setzt damit denselben Reiter. */
  .stufe-link{grid-column:1; justify-self:start; margin-top:8px; font-size:.9rem;
    font-weight:600; color:var(--accent); text-decoration:none;}
  .stufe-link:hover{text-decoration:underline;}
  .stufe-link:focus-visible{outline:2px solid var(--tuerkis); outline-offset:3px; border-radius:4px;}