: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);}
  .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 Kreuzfahrer-Landingpages (kohsamuiausfluegekreuzfahrer.de, 2026-09-19) ====
     Nutzerwunsch: auch die Kreuzfahrer-Seite "fancier". Aufbau wie angthong-park.com
     (thema/angthong.css), Farbwelt maritim: Marineblau, Weiss, Gold, Sand.
     Immer hell. Gilt nur fuer body.vorlage-kreuzfahrer. */
  body.vorlage-kreuzfahrer{
    --ground:#f7f5f0; --surface:#ffffff; --surface-2:#ece6da;
    --ink:#0f2238; --ink-2:#3b4d63; --ink-3:#6a778a;
    --line:#e3dccd; --line-2:#cfc3aa;
    --accent:#c9962b; --accent-ink:#ffffff; --accent-soft:#f6ecd5;
    --deep:#0f2a4a; --deep-ink:#ffffff;
    --tuerkis:#1d5b8f; --tuerkis-soft:#e3edf7; --gruen:#2f6f73; --gruen-soft:#e1efef;
    --display:"Fraunces",Georgia,"Times New Roman",serif;
    --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --shadow:0 2px 4px rgba(15,42,74,.06), 0 14px 32px -16px rgba(15,42,74,.35);
    background:var(--ground);
  }
  /* Immer hell (Nutzerin 2026-09-19: Dark Mode sieht nicht schoen aus). Die
     Farbvariablen oben auf body ueberschreiben auch die dunklen :root-Werte aus stil.css. */
  body.vorlage-kreuzfahrer{color-scheme:light;}
  .vorlage-kreuzfahrer h1, .vorlage-kreuzfahrer h2, .vorlage-kreuzfahrer h3{letter-spacing:-.01em;}
  .vorlage-kreuzfahrer .brand{font-family:var(--display);}
  .vorlage-kreuzfahrer .brand em{color:var(--tuerkis);}
  .vorlage-kreuzfahrer .topbar{background:rgba(253,251,247,.92); backdrop-filter:saturate(1.4) blur(8px);}

  /* ---- Titelbild ---- */
  .vorlage-kreuzfahrer .hero{position:relative; padding-block:clamp(70px,12vw,140px) clamp(56px,8vw,96px); color:#fff; overflow:hidden;
    background:#0f2a4a url("/assets/kf-schiff.jpg") center 55%/cover no-repeat;}
  .vorlage-kreuzfahrer .hero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,26,48,.45) 0%, rgba(10,26,48,.6) 55%, rgba(10,26,48,.9) 100%);}
  .vorlage-kreuzfahrer .hero .shell{position:relative; display:block;}
  .vorlage-kreuzfahrer .hero .eyebrow{color:#f3d58a;}
  .vorlage-kreuzfahrer .hero h1{font-size:clamp(2.3rem,6vw,4rem); line-height:1.02; max-width:16ch; text-shadow:0 2px 18px rgba(0,0,0,.35);}
  .vorlage-kreuzfahrer .hero p{opacity:.95; max-width:58ch; font-size:1.1rem; text-shadow:0 1px 8px rgba(0,0,0,.35);}
  .held-knoepfe{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
  .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(--accent); color:var(--accent-ink); box-shadow:0 10px 24px -10px rgba(201,150,43,.9);}
  .knopf.hell{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(4px);}
  .pillen{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; padding:0; list-style:none;}
  .pillen li{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 13px; font-size:.86rem; backdrop-filter:blur(4px);}
  .bewertung-held{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:.95rem; background:rgba(0,0,0,.28); border-radius:999px; padding:6px 14px;}
  .bewertung-held .sterne{color:#ffc857; letter-spacing:2px;}

  /* ---- Vertrauensleiste ---- */
  .vertrauen{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:-38px 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;}
  /* Einheitlich tuerkis (Nutzerin: etwas weniger Farben) */
  .symbol.koralle, .symbol.gruen{background:var(--tuerkis-soft); color:var(--tuerkis);}

  /* ---- Abschnitte ---- */
  .vorlage-kreuzfahrer .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-size:clamp(1.55rem,3.2vw,2.2rem); margin:0;}
  .abschnitt-kopf p{margin:6px 0 0; color:var(--ink-3); max-width:60ch;}
  .unterzeile{font-family:var(--body); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tuerkis); margin-bottom:6px;}

  /* ---- Highlight-Kacheln ---- */
  .vorlage-kreuzfahrer .anreisser .kacheln{gap:18px;}
  .vorlage-kreuzfahrer .anreisser .kachel{border:0; border-radius:18px; box-shadow:var(--shadow);}
  .vorlage-kreuzfahrer .anreisser .kachel img{aspect-ratio:4/5; transition:transform .5s;}
  .vorlage-kreuzfahrer .anreisser .kachel:hover img{transform:scale(1.04);}
  .vorlage-kreuzfahrer .anreisser .kbild{overflow:hidden; position:relative;}
  .vorlage-kreuzfahrer .anreisser .kbild figcaption{position:absolute; left:0; right:0; bottom:0; min-height:0; padding:18px 10px 6px; background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff;}
  .vorlage-kreuzfahrer .anreisser .kachel .text{display:block; padding:14px 16px 18px;}
  .vorlage-kreuzfahrer .anreisser .kachel b{font-family:var(--display); font-size:1.12rem;}

  /* ---- Vergleich ---- */
  .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;}
  /* Dezent statt vollflaechig (Nutzerin: Farben zu hart): heller Ton, farbige Oberkante */
  .vergleich .typ{border-top:4px solid var(--tuerkis);}
  .vergleich .typ-kopf{padding:16px 18px 6px; color:var(--ink); background:none;}
  .vergleich .typ:nth-child(2){border-top-color:var(--deep);}
  .vergleich .typ:nth-child(3){border-top-color:var(--gruen);}
  .vergleich .typ:nth-child(4){border-top-color:#e8a598;}
  .vergleich .typ-kopf b{display:block; font-family:var(--display); font-size:1.2rem;}
  .vergleich .typ-kopf span{font-size:.85rem; 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:.74rem; text-transform:uppercase; letter-spacing:.08em;}
  .vergleich dd{margin:0 0 4px;}
  .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.1rem; color:var(--ink);}
  .vergleich .ab a{font-size:.85rem; font-weight:600; color:var(--accent); text-decoration:none;}

  /* ---- Tagesablauf ---- */
  .ablauf{display:grid; grid-template-columns:repeat(6,1fr); gap:0; padding:0; list-style:none; position:relative;}
  .ablauf::before{content:""; position:absolute; top:27px; left:8%; right:8%; height:3px; background:repeating-linear-gradient(90deg, var(--tuerkis) 0 10px, transparent 10px 18px);}
  .ablauf li{text-align:center; padding:0 8px; position:relative;}
  .ablauf .symbol{width:56px; height:56px; border-radius:50%; margin:0 auto 10px; background:var(--surface); box-shadow:var(--shadow); border:3px solid var(--tuerkis-soft);}
  .ablauf b{display:block; font-family:var(--display); font-size:1rem;}
  .ablauf small{display:block; color:var(--ink-3); font-size:.82rem; line-height:1.4; margin-top:3px;}

  /* ---- Aktivitaeten ---- */
  .aktivitaeten{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; padding:0; list-style:none;}
  .aktivitaeten li{background:var(--surface); border-radius:16px; padding:16px 12px; text-align:center; box-shadow:var(--shadow);}
  .aktivitaeten .symbol{margin:0 auto 8px; width:48px; height:48px; border-radius:50%;}
  .aktivitaeten b{display:block; font-size:.95rem;}
  .aktivitaeten small{display:block; color:var(--ink-3); font-size:.78rem; line-height:1.35; margin-top:2px;}

  /* ---- Saison ---- */
  .saison{background:var(--surface); border-radius:18px; box-shadow:var(--shadow); padding:22px;}
  .monate{display:grid; grid-template-columns:repeat(12,1fr); gap:4px; margin:6px 0 12px; padding:0; list-style:none;}
  .monate li{text-align:center; font-size:.76rem; font-weight:600; color:var(--ink-2);}
  .monate li::before{content:""; display:block; height:34px; border-radius:8px; margin-bottom:6px; background:var(--tuerkis);}
  .monate li.ruhig::before{background:var(--gruen);}
  .monate li.regen::before{background:#f2b705;}
  .monate li.zu::before{background:repeating-linear-gradient(135deg, var(--accent) 0 6px, #ff9a88 6px 12px);}
  .monate li.halb::before{background:linear-gradient(90deg, var(--accent) 50%, var(--tuerkis) 50%);}
  .legende{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.84rem; color:var(--ink-2); margin:0; padding:0; list-style:none;}
  .legende i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px;}

  /* ---- Galerie (unregelmaessiges Raster) ---- */
  .galerie{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; gap:10px;}
  .galerie figure{margin:0; border-radius:14px; overflow:hidden; position:relative; background:var(--surface-2); display:flex; flex-direction:column;}
  .galerie figure:nth-child(1){grid-column:span 2; grid-row:span 2;}
  .galerie figure:nth-child(3){grid-row:span 2;}
  .galerie figure:nth-child(5), .galerie figure:nth-child(6){grid-column:span 2;}
  .galerie img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s; flex:1 1 auto; min-height:0;}
  .galerie .bildnachweis{flex:0 0 auto; position:relative; z-index:1; font-size:.62rem; padding:3px 8px 4px;}
  .galerie figure:hover img{transform:scale(1.05);}
  .galerie figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 10px 6px; background:linear-gradient(transparent, rgba(0,0,0,.6)); color:#fff; font-size:.8rem;}

  /* ---- Karte ---- */
  .karte{margin:0; background:linear-gradient(180deg, var(--tuerkis-soft), var(--surface)); border-radius:18px; box-shadow:var(--shadow); padding:10px;}
  .karte svg{display:block; width:100%; height:auto;}

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

  @media (max-width:880px){
    .vertrauen{grid-template-columns:1fr 1fr; margin-top:-26px;}
    .vergleich{grid-template-columns:1fr 1fr;}
    .ablauf{grid-template-columns:repeat(3,1fr); row-gap:22px;}
    .ablauf::before{display:none;}
    .aktivitaeten{grid-template-columns:repeat(3,1fr);}
    .galerie{grid-template-columns:1fr 1fr; grid-auto-rows:130px;}
    .galerie figure:nth-child(3){grid-row:auto;} .galerie figure:nth-child(5), .galerie figure:nth-child(6){grid-column:auto;}
    .monate li{font-size:.62rem;}
  }
  @media (max-width:520px){
    .vertrauen, .vergleich{grid-template-columns:1fr;}
    .ablauf{grid-template-columns:1fr 1fr;}
    .aktivitaeten{grid-template-columns:1fr 1fr;}
  }

  /* ---- Handy (Nutzerin: Saisonkalender zu eng, alles pruefen) ---- */
  .karte-routen{display:none;}
  @media (max-width:640px){
    .vorlage-kreuzfahrer .brand small{display:none;}
    .vorlage-kreuzfahrer .topbar .shell{min-height:0; padding-block:6px; row-gap:2px;}
    .vorlage-kreuzfahrer .navlink, .vorlage-kreuzfahrer .navgroup-btn{min-height:40px; padding:8px 11px; font-size:.9rem;}
    .vorlage-kreuzfahrer .hero h1{font-size:2.3rem;}
    .vorlage-kreuzfahrer .hero p{font-size:1rem;}
    .knopf{padding:12px 18px; font-size:.95rem;}
    .monate{grid-template-columns:repeat(6,1fr); row-gap:12px; gap:6px;}
    .monate li{font-size:.8rem;}
    .monate li::before{height:30px;}
    .legende{display:grid; gap:8px;}
    .karte-routen{display:grid; gap:10px; margin-top:12px; padding:0; list-style:none;}
    .karte-routen li{background:var(--surface); border-radius:14px; box-shadow:var(--shadow); padding:12px 14px; display:flex; gap:12px; align-items:center; font-size:.9rem;}
    .karte-routen i{flex:0 0 auto; width:12px; height:12px; border-radius:50%;}
    .karte-routen b{display:block;}
    .karte-routen small{color:var(--ink-3);}
    .abschnitt{margin-bottom:42px;}
  }

  /* Die gemalte Hafen-Skizze (.hafenskizze/.hafenschritte) ist seit 2026-09-21
     durch die echte Karte ersetzt (seiten/karte-kreuzfahrer.json, .tourkarte in stil.css). */
  .typkacheln .kachel{cursor:pointer;}