/* ------------------------------------------------------------------
   Schriften: lokal selbst gehostet, KEIN Google-Fonts-CDN (DSGVO).
   Source Serif 4 ist ein Variable Font (Achse wght 200-900); die eine
   Datei je Subset deckt damit 400 und 600 exakt ab. Lizenz: SIL OFL 1.1,
   siehe fonts/OFL.txt.
   ------------------------------------------------------------------ */
   @font-face{
    font-family:'Source Serif 4';
    font-style:normal;
    font-weight:200 900;
    font-display:swap;
    src:url('../fonts/source-serif-4-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Source Serif 4';
    font-style:normal;
    font-weight:200 900;
    font-display:swap;
    src:url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  
  /* ------------------------------------------------------------------
     Fließtext: Plus Jakarta Sans, ebenfalls lokal selbst gehostet
     (KEIN Google-Fonts-CDN, DSGVO). Variable Font (Achse wght 200-800);
     eine Datei je Subset deckt damit 400/500/600/700 exakt ab.
     Lizenz: SIL OFL 1.1, siehe fonts/OFL.txt.
     ------------------------------------------------------------------ */
  @font-face{
    font-family:'Plus Jakarta Sans';
    font-style:normal;
    font-weight:200 800;
    font-display:swap;
    src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Plus Jakarta Sans';
    font-style:normal;
    font-weight:200 800;
    font-display:swap;
    src:url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  
  :root{
    --ink:#1A1513;--paper:#FBFAF8;--paper-2:#F4F0EA;
    --brand:#143D97;--brand-deep:#0E2340;--brass:#B08542;
    --stone:#6E655D;--line:#E7E1D8;--maxw:1240px;--blue:#1A4B8C;
    --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
    --sans:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.68;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em}
  .eyebrow{font-family:inherit;line-height:1.5;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:9px}
  /* Inline-SVG-Icon vor dem Label (ersetzt den früheren Goldstrich). Sechs
     Motive, alle auf demselben 24er-Raster mit gleicher Strichstärke:
     route · compass · mail · case · doc · star. Farbe immer Gold, auf dunklen
     Blöcken eine Stufe heller, damit der dünne Strich nicht absäuft. */
  .ey-i{width:15px;height:15px;flex:0 0 auto;color:var(--brass);
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  a{color:inherit;text-decoration:none}
  
  header{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  header .nav{max-width:none;padding:0 32px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif)}
  .brand .logo{height:40px;width:auto;display:block}
  
  /* Echtes Tochina-Logo im Header. Quelldatei 841x200 (Seitenverhaeltnis
     4.205:1), daher nur height setzen und die Breite mitlaufen lassen.
  
     height:40px ist gemessen, nicht geschaetzt:
     - .nav hat feste height:70px, der Header waechst also nie mit. Die Grenze
       ist rein optisch; ab 44px wird der 70px-Balken eng.
     - 40px entspricht exakt der Hoehe des alten Logos (185x80 auf height:40px).
       Der vertikale Rhythmus des Headers bleibt damit unveraendert.
     - Breite bei 40px = 168px. Bei 861px Viewport (knapp ueber dem 860px-
       Breakpoint, Menue noch inline) bleiben 242px Luft bis zum Menue,
       bei 360px noch 110px bis zum Burger. Horizontal also unkritisch.
     - Unter 40px wird die Unterzeile „CHINA REISEN" duenn.
     Im Footer bewusst kleiner, siehe dort. */
  .brand-logo{height:40px;width:auto;display:block}
  
  .brand .en{font-size:22px;font-weight:600;letter-spacing:.02em;color:var(--blue)}
  .brand .en b{color:var(--blue);font-weight:600}
  .menu{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:500;color:var(--stone)}
  .menu a:hover{color:var(--brand)}
  .burger{display:none}
  .lang{display:flex;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--stone)}
  .lang b{color:var(--brand)}
  
  .topbar{background:var(--brand-deep);color:#C2CCDA;font-size:13px}
  /* Topbar fuehrt zwei Kontaktangaben: Zentrale und E-Mail. Die Mobilnummer steht nur
     noch im Footer (Zeile "Mobil"), im Band war sie zu dritt zu gedraengt.
     min-height statt height: sollte der Inhalt je wachsen, waechst das Band mit,
     statt den Text abzuschneiden. */
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:4px 16px;flex-wrap:wrap;max-width:none;padding:6px 32px}
  .topbar a{color:#fff}
  .topbar a:hover{color:var(--brass)}
  .topbar .tb-contact{font-weight:500}
  /* Gemessen (2026-08-09): tb-left 331px + gap 16px + tb-contact 245px + padding 64px = 656px.
     Ab 660px passt alles in eine Zeile, bei 640px bricht es um. Schwelle 700px mit Reserve.
     Der fruehere Wert 560px war zu niedrig: zwischen 561 und ~640px wurde das Band zweizeilig. */
  @media(max-width:700px){.topbar .tb-left{display:none}.topbar .wrap{justify-content:center}}
  .locale-switcher{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
  .locale-switcher a{color:#C2CCDA;transition:color .2s ease}
  .locale-switcher a:hover{color:var(--brass)}
  .locale-switcher a.active{color:var(--brass)}
  .locale-switcher .sep{color:#5A6A82;font-weight:400}
  
  /* Unten bewusst derselbe Wert wie oben: die Kacheln brauchen Abstand zum
     Kennzahlen-Band darunter, sonst klebt die Bandkante direkt an den Karten. */
  .types{padding:64px 0}
  .types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
  .type{border:1px solid transparent;border-radius:20px;padding:30px 26px;background:#F5F1EA;display:flex;flex-direction:column;transition:.25s ease}
  .type:hover{background:#fff;transform:translateY(-2px);border-color:var(--line)}
  .type .tnum{font-family:var(--serif);font-size:14px;color:var(--brass);font-weight:600;margin-bottom:10px}
  .type h3{font-size:19px;margin:0 0 8px;font-weight:600}
  .type p{font-size:13.5px;color:var(--stone);flex:1}
  .type .go{margin-top:16px;font-size:13px;font-weight:600;color:var(--brand);opacity:.85}
  /* Reisearten „eins groß, zwei klein" */
  .types-feature{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:24px;align-items:stretch}
  .types-col{display:grid;grid-template-rows:1fr 1fr;gap:20px}
  .type-lg{padding:44px 40px}
  .type-lg h3{font-size:26px;margin:0 0 12px}
  .type-lg p{font-size:15px}
  .badge{align-self:flex-start;background:var(--brand);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:40px;margin-bottom:16px}
  /* Foto-Variante der Reiseart-Kachel. Das Motiv kommt je Kachel per
     --tile-img, darüber ein Scrim, damit die weiße Schrift trägt.
     Gilt für alle drei Kacheln; die Layout-Sonderregeln (Text nach unten,
     Badge oben) hängen ausschließlich an .type-lg.photo, damit die beiden
     kleinen Kacheln ihr bestehendes Layout unverändert behalten. */
  /* ⚠️ background NIEMALS als Kurzform mit var() schreiben.
     `background:#0d1d33 var(--tile-img) center/cover no-repeat` wird von
     CSS-Minifiern zerstört (Netlify "Bundle and minify CSS"): sie können var()
     nicht auflösen und die Kurzform daher nicht sicher normalisieren. Ergebnis:
     ganze Deklaration ungültig — Foto UND Hintergrundfarbe weg, es bleibt nur
     der ::after-Scrim. Longhand ist davon nicht betroffen (siehe .hero.photo,
     das deshalb auf Netlify immer funktioniert hat). */
  .type.photo{
    position:relative;overflow:hidden;isolation:isolate;color:#fff;
    border-color:transparent;
    background-color:#0d1d33;
    background-image:var(--tile-img);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat}
  /* .type:hover setzt background als Kurzform und würde damit auch Bild,
     Position, Size und Repeat zurücksetzen — hier alle fünf wiederherstellen. */
  .type.photo:hover{
    background-color:#0d1d33;
    background-image:var(--tile-img);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    border-color:transparent}
  .type.photo h3,.type.photo .go{color:#fff}
  .type.photo p{color:rgba(255,255,255,.86)}
  .type.photo .go{opacity:1}
  /* Kleine Kacheln: der Text füllt die Kachel fast ganz aus (Titel oben,
     „Mehr erfahren" unten), deshalb ein fast gleichmäßiger Schleier statt
     eines Verlaufs von unten. Der Fließtext ist hier 13,5 px und zählt als
     normale Schrift — er braucht 4,5:1, nicht 3:1. Deshalb steht er auf den
     Foto-Kacheln auf vollem Weiß statt auf 86 %: das erlaubt einen um rund
     sechs Punkte helleren Schleier bei gleicher Lesbarkeit. Werte sind
     nachgemessen (hellstes Pixel hinter jedem Textelement), nicht geschätzt. */
  .type.photo::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top,
      rgba(8,18,36,.62) 0%,rgba(8,18,36,.60) 100%)}
  .type.photo:not(.type-lg) p{color:#fff}
  /* Große Kachel: Inhalt sitzt unten auf dem Bild, Badge oben links darüber. */
  .type-lg.photo{justify-content:flex-end;padding-top:60px}
  .type-lg.photo p{flex:0 0 auto}
  .type-lg.photo .go{margin-top:20px}
  .type-lg.photo::after{background:linear-gradient(to top,
    rgba(8,18,36,.92) 0%,rgba(8,18,36,.74) 34%,rgba(8,18,36,.46) 66%,rgba(8,18,36,.30) 100%)}
  .type-lg.photo .badge{position:absolute;top:26px;left:40px;z-index:1;margin:0;background:#fff;color:var(--brand)}
  @media(max-width:760px){.types-feature{grid-template-columns:1fr}.types-col{grid-template-rows:auto}.type.photo{min-height:260px}}
  @media(max-width:860px){.types-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.types-grid{grid-template-columns:1fr}}
  
  /* --- Startseiten-Hero: Verlauf ueber hanson-lu (Grosse Mauer) -------------
     NUR die Startseite nutzt diese Regel. Unterseiten setzen ihr Hintergrundbild
     entweder ueber .hero.photo / .dim-strong / .dim-soft (weiter unten) oder
     inline im style-Attribut; beides ueberschreibt background-image hier.
  
     VIER Stops, nicht drei — das ist der Kern und darf nicht vereinfacht werden:
     Das Foto ist hell (Rohbild-Luminanz L 0.74-0.82, hellste Stelle Himmel
     rgb(255,229,212)). Damit weisser Text WCAG AA erreicht, braucht der Bereich
     unter dem Text rund alpha .65-.75. Mit drei Stops laesst sich das nicht
     erreichen, ohne auch die rechte Bildhaelfte mit abzudunkeln — dort steht
     aber die Grosse Mauer, das Motiv der Seite.
  
     Warum der dritte Stop bei 62 % sitzt:
     Der Text steckt in .hero-grid{max-width:640px}. Bei 1280px Viewport endet
     die laengste Zeile (h1) gemessen bei 53.8 % der Viewportbreite, der
     Lead-Absatz bei 51.1 %. Der Stop liegt also knapp dahinter: bis 62 % bleibt
     es dunkel genug fuer den Text, danach faellt der Verlauf schnell auf .16
     zurueck und gibt die Mauer frei. Gemessen verliert der Bildbereich 50-75 %
     dadurch nur 16 % Helligkeit, der Bereich 75-100 % nur 3 %.
  
     Wer max-width von .hero-grid oder die h1-Groesse aendert, verschiebt diese
     53.8 % und muss den 62 %-Stop neu messen. Methode: CLAUDE.md Abschnitt 6. */
  .hero{position:relative;padding:104px 0 92px;color:#fff;background-color:#0d1d33;
    background-image:
      linear-gradient(100deg,rgba(11,29,54,.95) 0%,rgba(16,45,80,.80) 45%,rgba(17,42,72,.50) 62%,rgba(18,38,64,.16) 100%),
      url('../images/hanson-lu-unsplash.jpg');
    background-size:cover;background-position:center;background-repeat:no-repeat}
  
  /* Schmale Viewports: .hero-grid ist dann nicht mehr 640px breit, sondern so
     breit wie der Viewport. Der Text laeuft gemessen bis 92.8 % — der Trick mit
     dem freien rechten Rand funktioniert hier also nicht, der Verlauf muss
     durchgehend dunkel bleiben. Das Bild wird auf dem Handy sichtbar dunkler;
     bewusste Entscheidung zugunsten der Lesbarkeit (auf 360px ist vom Panorama
     ohnehin kaum etwas zu erkennen). */
  @media (max-width:860px){
    .hero{
      background-image:
        linear-gradient(100deg,rgba(11,29,54,.94) 0%,rgba(16,45,80,.80) 50%,rgba(17,42,72,.70) 100%),
        url('../images/hanson-lu-unsplash.jpg');
    }
  }
  .hero-grid{max-width:640px}
  .hero .eyebrow{color:#E9C88A}
  .hero .ey-i,.focus .ey-i{color:#D2A560}
  /* hyphens:auto braucht lang="de" am <html> (ist gesetzt) und trennt nach
     deutschen Silbenregeln mit Trennstrich. Ohne diese Regel sprengen lange
     Komposita ohne Bindestrich (Maßgeschneiderte, Küstenuniversität) auf
     360px den Viewport und die Seite scrollt horizontal.
     -webkit- fuer Safari, das die Eigenschaft bis heute nur praefixiert kennt.
  
     hyphenate-limit-chars:12 4 4 = erst ab 12 Buchstaben trennen, mind. 4 Zeichen
     vor und nach dem Trennstrich. Ohne diese Grenze trennt der Algorithmus auch
     kurze Woerter und Eigennamen (Chi-na, Ach-se, Pan-das, Shang-haier) — das
     widerspricht der deutschen Setzgewohnheit. Die beiden Woerter, die den
     Ueberlauf ueberhaupt ausloesen, sind 16 bzw. 17 Zeichen lang und werden
     weiterhin getrennt. Aeltere Browser ignorieren die Eigenschaft und fallen
     auf reines hyphens:auto zurueck — kein Ueberlauf, nur die kurzen Trennungen
     kommen dort wieder. */
  .hero h1{font-size:clamp(42px,5.6vw,68px);font-weight:700;margin:22px 0 26px;color:#fff;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 4 4}
  .hero h1 em{font-style:normal;color:#F3D9A6}
  .hero p.lead{font-size:18px;line-height:1.6;color:rgba(255,255,255,.9);max-width:46ch}
  .hero .btn-primary{background:#fff;color:var(--brand)}
  .hero .btn-primary:hover{background:var(--brand);color:#fff}
  .hero .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
  .hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
  .cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding:14px 24px;border-radius:2px;transition:.2s ease;border:1px solid transparent}
  .btn-primary{background:var(--brand);color:#fff}
  .btn-primary:hover{background:var(--brand-deep)}
  .btn-ghost{border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  
  .stats{background:var(--paper-2)}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .stat{padding:34px 14px;text-align:center;border-right:1px solid var(--line)}
  .stat:last-child{border-right:none}
  .stat .num{font-family:var(--serif);font-size:38px;font-weight:600;color:var(--brand)}
  .stat .lbl{font-size:12.5px;color:var(--stone);letter-spacing:.02em;margin-top:4px}
  
  .section{padding:100px 0}
  .band{background:var(--paper-2)}
  .split{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
  .split-media{aspect-ratio:4/3;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#EFE9E0 0%,#E3D9CC 100%);display:flex;align-items:center;justify-content:center;color:#B3A793;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
  .split-media img{display:block;width:100%;height:100%;object-fit:cover;border:0}
  @media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}
  .section-head{max-width:56ch;margin-bottom:60px}
  .section-head h1,.section-head h2{font-size:clamp(30px,3.8vw,46px);font-weight:700;margin:18px 0 0}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .card{border:1px solid var(--line);border-radius:20px;padding:34px 30px;background:#fff;transition:.24s ease;position:relative;overflow:hidden}
  .card::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--brand);transform:scaleY(0);transform-origin:top;transition:.25s ease}
  .card:hover{border-color:#D9CFC2;transform:translateY(-2px)}
  .card:hover::before{transform:scaleY(1)}
  .card .tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:10px}
  .card h3{font-size:21px;margin:0 0 10px;font-weight:600}
  .card p{font-size:14.5px;color:var(--stone)}
  .card .meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--brand);font-weight:600;letter-spacing:.02em}
  .routes-note{text-align:center;color:var(--stone);font-size:14.5px;margin-top:36px}
  .routes-note a{color:var(--brand);font-weight:600}
  .rg-title{font-family:inherit;line-height:1.5;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:48px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .rg-title.first{margin-top:0}
  .rg-title span{color:var(--stone);font-weight:500;letter-spacing:0;text-transform:none;margin-left:8px;font-size:12.5px}
  
  .focus{background:var(--brand-deep);color:#E6EDF8}
  .focus .wrap{padding-top:78px;padding-bottom:78px}
  .focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .focus .eyebrow{color:#AEC4EA}
  .focus h2{color:#fff;font-size:clamp(30px,3.8vw,46px);font-weight:700;margin:18px 0 22px}
  .focus p{font-size:16.5px;line-height:1.7;color:#C7D3E8;max-width:46ch}
  /* Globales *{margin:0} — Folgeabsätze brauchen ihren Abstand explizit. */
  .focus p + p{margin-top:16px}
  .focus .btn-primary{background:#fff;color:var(--brand-deep);margin-top:30px}
  .focus .btn-primary:hover{background:var(--brass);color:#fff}
  .focus-list{display:flex;flex-direction:column;gap:2px}
  .focus-list .row{display:flex;gap:16px;padding:18px 0;border-top:1px solid rgba(220,230,248,.16)}
  .focus-list .row:last-child{border-bottom:1px solid rgba(220,230,248,.16)}
  .focus-list .k{font-family:var(--serif);font-size:15px;color:var(--brass);min-width:30px}
  .focus-list .v{font-size:15px;color:#E6EDF8}
  .focus-list .v b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
  
  .cities{background:#fff}
  .cities .wrap{padding:40px 28px;display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;justify-content:center}
  .cities .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-weight:600;width:100%;text-align:center;margin-bottom:4px}
  .cities .chip{font-size:13.5px;color:var(--ink);font-weight:500;padding:8px 16px;border:1px solid var(--line);border-radius:40px}
  
  .offer .wrap{max-width:1120px}
  .offer .split h2{font-size:clamp(30px,3.8vw,46px);font-weight:700;margin:18px 0 16px}
  .offer .split p{color:var(--stone);font-size:16px;line-height:1.7}
  .offer .split .cta{text-align:left;margin-top:26px}
  .offer .steps{margin-top:56px}
  .offer .head{text-align:center;max-width:60ch;margin:0 auto 40px}
  .offer .head h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;margin:18px 0 16px}
  .offer .head p{color:var(--stone);font-size:16px;line-height:1.7}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:38px}
  .step{border-top:2px solid var(--brand);padding-top:18px}
  .step .n{font-family:var(--serif);font-size:15px;color:var(--brand);font-weight:600}
  .step h3{font-size:18px;margin:6px 0 8px;font-weight:600}
  .step p{font-size:14.5px;color:var(--stone)}
  .offer .cta{text-align:center}
  .trust-line{text-align:center;color:var(--stone);font-size:13.5px;letter-spacing:.02em;margin-top:30px}
  .trust-line b{color:var(--ink);font-weight:600}
  
  footer{background:var(--brand-deep);color:#C2CCDA;padding:64px 0 30px;font-size:14px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
  /* Weisse Logovariante im Footer, bewusst kleiner als im Header:
     der Footer braucht nicht dieselbe Praesenz wie die Kopfzeile. */
  footer .brand-logo{height:30px}
  footer h2{font-family:inherit;line-height:1.5;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8394AC;margin-bottom:16px;font-weight:600}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  footer a:hover{color:#fff}
  footer .about{max-width:34ch;line-height:1.7;margin-top:14px;color:#93A0B4}
  .foot-map{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:8px 15px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;font-weight:600;font-size:13px;text-decoration:none;transition:background .18s ease,border-color .18s ease}
  .foot-map:hover{background:var(--brand);border-color:var(--brand);color:#fff}
  .foot-map:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .foot-sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8394AC;margin:26px 0 12px;font-weight:600}
  .foot-mapimg{display:block;max-width:360px;border-radius:20px;overflow:hidden}
  .foot-mapimg img{display:block;width:100%;height:auto;border:0}
  .foot-mapimg:focus-visible{outline:2px solid #fff;outline-offset:3px}
  @media (max-width:560px){.foot-mapimg{max-width:100%}}
  .route-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:32px;border:0}
  @media (max-width:640px){.route-photo{aspect-ratio:4/3;border-radius:20px}}
  .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;color:#7A889E;font-size:12.5px}
  
  @media (max-width:860px){
    .stats-grid{grid-template-columns:1fr 1fr}
    .stat:nth-child(2){border-right:none}
    .stat{border-bottom:1px solid var(--line)}
    .grid{grid-template-columns:1fr}
    .focus-grid{grid-template-columns:1fr;gap:34px}
    .steps{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .burger span{display:block;width:24px;height:2px;background:var(--brand);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
    .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav.open .burger span:nth-child(2){opacity:0}
    .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
    .nav.open .menu{opacity:1;visibility:visible;transform:none}
    .menu a{padding:14px 32px;font-size:15px;color:var(--ink)}
    .menu a:hover{color:var(--brand);background:var(--paper-2)}
  }
  @media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
  /* Scroll-Reveal: JS setzt .reveal-on-scroll auf <html> und .in auf Elemente */
  .reveal-on-scroll .section-head,
  .reveal-on-scroll .card,
  .reveal-on-scroll .rcard,
  .reveal-on-scroll .type,
  .reveal-on-scroll .stat,
  .reveal-on-scroll .split>div,
  .reveal-on-scroll .focus-list .row,
  .reveal-on-scroll .rg-title,
  .reveal-on-scroll .steps .step,
  .reveal-on-scroll .contact-cta .panel,
  .reveal-on-scroll .cities .chip,
  .reveal-on-scroll .routes-note{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal-on-scroll .in{opacity:1!important;transform:none!important}
  
  /* Einblend-Animation beim Laden (Hero-Elemente).
     WICHTIG: Diese Basisregeln müssen VOR dem prefers-reduced-motion-Block
     stehen. Standen sie dahinter, gewann `.reveal{opacity:0}` per Quellreihen-
     folge (gleiche Spezifität) gegen die Reduced-Motion-Regel, während
     `*{animation:none!important}` gleichzeitig die Einblendung abschaltete —
     Ergebnis: Nutzer mit „Bewegung reduzieren" sahen Hero-Titel, Lead und
     CTA-Buttons auf keiner Seite. Reihenfolge hier also nicht vertauschen. */
  .reveal{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none}}
  
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    .reveal-on-scroll .section-head,.reveal-on-scroll .card,.reveal-on-scroll .rcard,.reveal-on-scroll .type,.reveal-on-scroll .stat,.reveal-on-scroll .split>div,.reveal-on-scroll .focus-list .row,.reveal-on-scroll .rg-title,.reveal-on-scroll .steps .step,.reveal-on-scroll .contact-cta .panel,.reveal-on-scroll .cities .chip,.reveal-on-scroll .routes-note{opacity:1;transform:none}
  }
  
  /* ---- Detailseiten (standard / delegationen / premium) ---- */
  .hero.compact{padding:88px 0 80px}
  .hero.compact h1{margin:16px 0 18px}
  
  /* Foto-Hero für Unterseiten: eigenes Motiv via --hero-img, darüber das
     gleiche Blau-Overlay wie die Startseite (linksbetont, weil der Text links
     steht). Overlay-Tiefe nur über die drei Alpha-Stufen unten variiert – alle
     im selben Blau, damit die Seiten optisch zusammengehören. Bildhelligkeit
     bestimmt die Stufe: helles Foto = .dim-strong, dunkles Foto = .dim-soft. */
  .hero.photo{
    background-color:#0d1d33;
    background-image:
      linear-gradient(100deg,rgba(11,29,54,.90) 0%,rgba(16,45,80,.58) 46%,rgba(18,38,64,.16) 100%),
      var(--hero-img);
    background-size:cover;background-position:center;background-repeat:no-repeat;
  }
  .hero.photo.dim-strong{
    background-image:
      linear-gradient(100deg,rgba(11,29,54,.95) 0%,rgba(16,45,80,.72) 44%,rgba(18,38,64,.30) 100%),
      var(--hero-img);
  }
  .hero.photo.dim-soft{
    background-image:
      linear-gradient(100deg,rgba(11,29,54,.86) 0%,rgba(16,45,80,.50) 48%,rgba(18,38,64,.10) 100%),
      var(--hero-img);
  }
  
  /* Produktkarte mit Platzhalterbild */
  .pcard{padding:0;display:flex;flex-direction:column;background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none}
  .pcard::before{display:none}
  .pcard:hover{transform:none;box-shadow:none;border-color:transparent}
  .pcard .thumb{aspect-ratio:16/10;width:100%;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#EFE9E0 0%,#E3D9CC 100%);display:flex;align-items:center;justify-content:center;color:#B3A793;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;transition:transform .28s ease}
  .pcard .thumb img{display:block;width:100%;height:100%;object-fit:cover;border:0}
  .pcard:hover .thumb{transform:translateY(-6px)}
  /* Karten ohne Thumb (Delegationen): normale Karten-Optik statt schwebendem Text */
  .pcard.noimg{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 30px}
  .pcard.noimg:hover{border-color:var(--line)}
  .pcard.noimg .pbody{padding:0}
  /* Breite Bildbande über einem Kartenraster */
  .band-photo{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:center;border-radius:40px;border:0;margin-bottom:44px}
  @media (max-width:640px){.band-photo{aspect-ratio:16/9;border-radius:20px}}
  .pcard .pbody{padding:22px 2px 0;display:flex;flex-direction:column;flex:1}
  .pcard .pbody .tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:10px}
  .pcard .pbody h3{font-size:20px;margin:0 0 10px;font-weight:600}
  .pcard .pbody p{font-size:14.5px;color:var(--stone);flex:1}
  .pcard .pbody .meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--brand);font-weight:600;letter-spacing:.02em}
  .pcard .pbody .btn{margin-top:20px;align-self:flex-start}
  
  /* ------------------------------------------------------------------
     Bildkarten für Reiselinien (Foto als Hintergrund, Text darüber).
     Verwendet in index.html, standard-reisen.html, reiselinien.html.
     Foto kommt je Karte per --card-img. Kleine Karten: Tag + Titel + Meta.
     Große Karten (.lg): zusätzlich ein Beschreibungsabsatz. Titel immer
     auf max. 2 Zeilen begrenzt (line-clamp), damit lange deutsche Wörter
     die Karte nicht sprengen; feste Mindesthöhen sichern den Platz.
     ------------------------------------------------------------------ */
  .rcard{
    position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    min-height:230px;padding:22px;border-radius:20px;overflow:hidden;
    color:#fff;text-decoration:none;isolation:isolate;
    /* ⚠️ Longhand statt Kurzform — siehe Kommentar bei .type.photo */
    background-color:#0d1d33;
    background-image:var(--card-img);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    transition:transform .28s ease}
  /* Scrim über dem Foto. Unten kräftig (dort steht der Text), zur Oberkante
     hin schnell auslaufend, damit das Motiv wirklich zu sehen ist und die
     Karte nicht als blaue Fläche liest. Große Karten haben Titel + drei Zeilen
     Text + Meta, ihr Textblock reicht höher — deshalb eine eigene, weiter nach
     oben gezogene Kurve unter .rcard.lg. */
  .rcard::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top,
      rgba(8,18,36,.93) 0%,rgba(8,18,36,.84) 26%,rgba(8,18,36,.28) 52%,rgba(8,18,36,0) 72%)}
  .rcard:hover{transform:translateY(-4px)}
  .rcard:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .rcard .tag{
    position:absolute;top:16px;left:16px;z-index:1;
    background:#fff;color:var(--ink);
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:6px 12px;border-radius:999px}
  .rcard h3{
    font-family:var(--serif);color:#fff;font-weight:600;font-size:20px;line-height:1.18;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rcard p{
    margin:10px 0 0;color:rgba(255,255,255,.82);font-size:14px;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rcard .meta{
    margin-top:5px;font-size:12px;font-weight:600;letter-spacing:.02em;color:#fff;
   
  }
   html:not([lang="zh"]) .rcard .meta{text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2; font-size: 11px; line-height: 1.2;
 
  }
   html:not([lang="zh"]) .rcard.lg .meta{-webkit-line-clamp: 2;}
  /* Große (empfohlene) Karte: größerer Titel, Beschreibung, mehr Höhe */
  /* Große Karten haben Titel + drei Zeilen Text + Meta, ihr Textblock reicht
     höher — deshalb bleibt der Scrim hier bis 52 % kräftiger. Beide Kurven sind
     so gewählt, dass der weiße Titel auf JEDEM eingesetzten Foto mindestens
     3:1 erreicht (WCAG AA für große Schrift), gemessen am hellsten Pixel hinter
     der Schrift. Werte nicht nach Gefühl ändern — vorher nachmessen. */
  .rcard.lg::after{background:linear-gradient(to top,
    rgba(8,18,36,.93) 0%,rgba(8,18,36,.82) 26%,rgba(8,18,36,.40) 52%,rgba(8,18,36,0) 72%)}
  .rcard.lg{min-height:360px;padding:30px}
  .rcard.lg h3{font-size:clamp(24px,2.5vw,28px);line-height:1.14}
  .rcard.lg p{-webkit-line-clamp:3;font-size:15px}
  
  /* Layout A – „eins groß, mehrere klein" (Startseite, standard-reisen).
     6-Spalten-Raster mit fester Zeilenhöhe: große Karte 4×2, kleine 2×1. */
  .rcards-feature{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:190px;gap:20px;grid-auto-flow:row dense}
  .rcards-feature .rcard{grid-column:span 2;grid-row:span 1;min-height:0}
  .rcards-feature .rcard.lg{grid-column:span 4;grid-row:span 2;min-height:0}
  /* Layout B – gleich große große Karten (reiselinien: Klassische Rundreisen) */
  .rcards-big{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  /* Layout C – gleich große kleine Karten (reiselinien: Städte-/Saisonreisen) */
  .rcards-mini{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
  .rcards-mini.cols4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:900px){.rcards-mini.cols4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:760px){
    .rcards-feature{grid-template-columns:1fr;grid-auto-rows:auto}
    .rcards-feature .rcard,.rcards-feature .rcard.lg{grid-column:auto;grid-row:auto;min-height:230px}
    .rcards-big{grid-template-columns:1fr}
    .rcards-mini,.rcards-mini.cols4{grid-template-columns:1fr}
    .rcard.lg{min-height:260px;padding:24px}
    .rcard.lg h3{font-size:23px}
  }
  
  /* Anfrage-Block am Seitenende */
  /* Oben derselbe Wert wie unten: ohne padding-top klebt die Panel-Oberkante
     direkt an der Kante des vorherigen Abschnitts — besonders sichtbar auf
     Seiten, wo davor ein .band steht (gleiche Farbe, nur 1px Rahmen dazwischen).
     100px entspricht dem Rhythmus von .section, das hier immer davor liegt. */
  .contact-cta{padding:100px 0}
  .contact-cta .panel{background:var(--paper-2);border:1px solid var(--line);border-radius:40px;padding:68px 40px;text-align:center}
  .contact-cta .eyebrow{justify-content:center}
  .contact-cta h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;margin:18px 0 0}
  .contact-cta p{max-width:54ch;margin:16px auto 0;color:var(--stone);font-size:16px;line-height:1.7}
  .contact-cta .btn{margin-top:28px}
  @media(max-width:560px){.contact-cta .panel{padding:52px 24px}}
  
  /* Anfrage-Widget: zwei Buttons (E-Mail / Anrufen) + ausklappbares Adressfeld.
     Wird per contact.js aufgebaut; Optik im Blau-System der Seite. */
  .anfrage{margin-top:28px}
  .anfrage-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .anfrage-actions .btn{margin-top:0}
  /* Ausklappbares Feld mit Adresse/Nummer + Kopieren */
  .anfrage-panel{
    display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;
    max-width:440px;margin:16px auto 0;padding:14px 18px;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease}
  .anfrage-panel.open{opacity:1;transform:none}
  /* Variante für Inline-Auslöser in linksbündigen Blöcken (z. B. „Warum Tochina") */
  .anfrage-panel.align-start{margin-left:0;margin-right:auto;justify-content:flex-start}
  .anfrage-panel .kt-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
  .anfrage-panel .kt-val{font-weight:600;color:var(--brand);font-size:15px;word-break:break-all}
  .anfrage-panel a.kt-val:hover{text-decoration:underline}
  .kt-copy{
    cursor:pointer;border:1px solid var(--brand);background:#fff;color:var(--brand);
    font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;
    padding:7px 14px;border-radius:999px;transition:background .18s ease,color .18s ease,border-color .18s ease}
  .kt-copy:hover{background:var(--brand);color:#fff}
  .kt-copy:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .kt-copy.is-done{background:var(--brand);color:#fff;border-color:var(--brand)}
  @media(max-width:560px){.anfrage-actions .btn{width:100%;justify-content:center}}
  
  /* Merkmal-Liste (Verkaufsargumente / Leistungen): kleiner Titel + ein Satz je Zeile.
     Bewusst schlicht (nur Trennlinien) — grenzt sich von der Beispiel-Karte ab. */
  .flist{max-width:940px}
  .flist .fitem{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:14px 44px;
    padding:26px 0;border-top:1px solid var(--line)}
  .flist .fitem:last-child{border-bottom:1px solid var(--line)}
  .flist .fitem h3{font-size:20px;font-weight:600;margin:0;line-height:1.2}
  .flist .fitem p{font-size:15.5px;color:var(--stone);margin:0;line-height:1.65}
  @media(max-width:640px){.flist .fitem{grid-template-columns:1fr;gap:6px;padding:22px 0}}
  
  /* Beispiel-/Referenzreise als hervorgehobene Karte (heller Rahmen, weißer Grund) */
  .example{background:#fff;border:1px solid var(--line);border-radius:24px;padding:46px 46px;max-width:940px}
  .example h3{font-size:clamp(23px,2.6vw,30px);font-weight:700;line-height:1.14;margin:0 0 10px}
  .example .ex-meta{color:var(--brand);font-weight:600;font-size:13.5px;letter-spacing:.03em;margin:0 0 22px}
  .example .ex-desc{color:var(--stone);font-size:16px;line-height:1.75;max-width:72ch;margin:0 0 26px}
  .example .ex-hl-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin:0 0 14px}
  .example .ex-hl{list-style:none;display:grid;gap:12px;margin:0 0 28px}
  .example .ex-hl li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:var(--ink)}
  .example .ex-hl li::before{content:"";position:absolute;left:0;top:10px;width:15px;height:2px;background:var(--brass)}
  /* Kein Trennstrich über der Fußnote — der Abstand trennt bereits deutlich
     genug, und eine Linie direkt vor dem Kontaktblock wirkt hart. */
  .example .ex-note{color:var(--stone);font-size:13px;line-height:1.6;margin:0;padding-top:26px}
  @media(max-width:560px){.example{padding:32px 24px;border-radius:18px}}
  
  /* Kompakter Abschnittskopf (nur Eyebrow) + Einleitungsabsatz im Abschnittskopf */
  .section-head.tight{margin-bottom:30px}
  .section-head p{margin-top:16px;color:var(--stone);font-size:17px;line-height:1.7;max-width:62ch}
  
  /* Rechtstexte (Impressum / Datenschutz / AGB) */
  .legal{max-width:760px;font-size:15.5px;color:var(--stone);line-height:1.75}
  .legal h2{font-size:20px;margin:36px 0 10px;font-weight:600;color:var(--ink)}
  .legal h2:first-child{margin-top:0}
  .legal h3{font-size:16px;margin:24px 0 8px;font-weight:600;color:var(--ink);font-family:var(--serif)}
  .legal p{margin:0 0 14px}
  .legal strong,.legal b{color:var(--ink);font-weight:600}
  .legal a{color:var(--brand);font-weight:600}
  .legal address{font-style:normal;margin:0 0 14px;line-height:1.8}
  .legal ul,.legal ol{margin:0 0 14px;padding-left:22px}
  .legal li{margin-bottom:6px}
  .legal .muted{font-size:13.5px;color:var(--stone)}
  .notice{background:#FBF3E7;border:1px solid #E7D3AE;border-left:3px solid var(--brass);border-radius:10px;padding:16px 20px;margin:0 0 30px;font-size:14.5px;line-height:1.6;color:var(--ink);font-weight:500}
  
  /* Klickbare Linienkarten */
  a.card{cursor:pointer}
  .card .go{display:block;margin-top:16px;font-size:13px;font-weight:600;color:var(--brand)}
  .pcard .pbody .go{margin-top:20px}
  
  /* Reiseverlauf (Tag für Tag) — Struktur steht, Inhalte folgen */
  .itinerary{max-width:820px}
  .itinerary .placeholder{color:var(--stone);font-size:16px}
  .day{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
  .day:last-child{border-bottom:1px solid var(--line)}
  .daynum{font-family:var(--serif);font-size:18px;color:var(--brand);font-weight:600}
  .day h3{font-size:19px;margin:0 0 8px;font-weight:600}
  .day p{font-size:15px;color:var(--stone)}
  @media(max-width:560px){.day{grid-template-columns:1fr;gap:6px}}
  /* Kleingedruckter Hinweis am Ende des Reiseverlaufs (alle Linienseiten) */
  .route-disclaimer{max-width:820px;margin-top:18px;color:var(--stone);font-size:12.5px;letter-spacing:.02em}
  
  /* Preisangabe auf den Linienseiten (ab 2026-08). Ruhiger Kasten, kein Angebotscharakter:
     der Preis ist ein Richtwert, verkauft wird weiterhin ueber die Anfrage. */
  .preis{max-width:820px;background-color:var(--paper-2);border:1px solid var(--line);
    border-radius:20px;padding:22px 26px;margin:0}
  .preis strong{display:block;font-family:var(--serif);font-size:21px;font-weight:600;
    color:var(--brand);line-height:1.3}
  .preis .muted{display:block;margin-top:9px;font-size:13.5px;color:var(--stone);line-height:1.65}
  
  /* Aufzaehlung mit Messingstrich, gleiche Optik wie .example .ex-hl. */
  .hl-list{list-style:none;display:grid;gap:12px;margin:0;max-width:820px}
  .hl-list li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.6;color:var(--ink)}
  .hl-list li::before{content:"";position:absolute;left:0;top:11px;width:15px;height:2px;background:var(--brass)}
  /* Globales a{color:inherit} macht Links hier sonst unsichtbar (gleiche Optik wie .legal a). */
  .hl-list a{color:var(--brand);font-weight:600}
  
  /* Sprungmarke zum Anfrage-Block, nur auf schmalen Schirmen.
     Gemessen (2026-08-09, 390px): die neuen Linienseiten sind 9 bis 13 Bildschirmhoehen lang,
     der Reiseverlauf allein bis 4.900px. Ohne Sprungmarke ist der Anfrage-Block erst nach dem
     gesamten Tagesprogramm erreichbar. Ab 561px entfaellt sie: dort ist die Seite kuerzer
     und der Weg zum Abschluss kein Hindernis mehr.
     Kein scroll-margin noetig, html{scroll-padding-top:84px} deckt die klebende Kopfzeile ab. */
  .jump-anfrage{display:none}
  @media(max-width:560px){
    .jump-anfrage{display:block;margin-top:12px;color:var(--brand);font-weight:600;font-size:14px}
  }
  
  /* Wichtige Hinweise auf Linienseiten (Gesundheit, Genehmigungen).
     Globales *{margin:0}: Abstand zwischen Absaetzen muss gesetzt werden. */
  .hinweise{max-width:820px;color:var(--stone);font-size:16px;line-height:1.75}
  .hinweise p+p{margin-top:16px}
  .hinweise a{color:var(--brand);font-weight:600}
  
  /* Eingeschlossene / nicht eingeschlossene Leistungen, zweispaltig. */
  .leistungen{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:940px}
  .leistungen h3{font-size:18px;font-weight:600;margin:0 0 18px}
  .leistungen .hl-list li{font-size:15px;color:var(--stone)}
  /* Ausschlussspalte ohne Messing: der Strich soll hier nicht wie ein Vorzug wirken. */
  .leistungen .excl li::before{background:var(--stone)}
  @media(max-width:760px){.leistungen{grid-template-columns:1fr;gap:34px}}
  
  @media(max-width:860px){.section{padding:84px 0}}
  @media(max-width:560px){.section{padding:64px 0}.topbar .wrap,header .nav{padding:0 20px}}


  :root{--kf-err:#A03323}

  /* ---------- Overlay ---------- */
  .kf-backdrop{position:fixed;inset:0;z-index:80;background:rgba(14,35,64,.62);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    display:flex;align-items:flex-start;justify-content:center;
    padding:48px 20px;overflow-y:auto;animation:kf-fade .18s ease both}
  .kf-backdrop[hidden]{display:none}
  .kf-panel{position:relative;width:100%;max-width:780px;background:var(--paper);
    border:1px solid var(--line);border-radius:40px;
    box-shadow:0 30px 90px rgba(14,35,64,.34);
    animation:kf-rise .26s cubic-bezier(.2,.7,.2,1) both}
  @keyframes kf-fade{from{opacity:0}to{opacity:1}}
  @keyframes kf-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .kf-backdrop,.kf-panel{animation:none}
  }

  .kf-close{position:absolute;top:22px;right:22px;width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--stone);
    transition:border-color .18s ease,color .18s ease,background .18s ease}
  .kf-close:hover{border-color:var(--blue);color:var(--blue)}
  .kf-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .kf-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

  .kf-head{padding:44px 48px 26px;border-bottom:1px solid var(--line)}
  .kf-head h2{font-size:clamp(26px,3vw,36px);font-weight:700;margin:16px 0 12px}
  .kf-head p{color:var(--stone);font-size:15.5px;line-height:1.7;max-width:56ch}
  .kf-body{padding:32px 48px 8px}
  .kf-foot{padding:24px 48px 40px;margin-top:30px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
  .kf-foot > p{color:var(--stone);font-size:14px;margin:0}
  .kf-actions{display:flex;gap:12px;flex-wrap:wrap}
  @media (max-width:640px){
    .kf-backdrop{padding:20px 12px}
    .kf-panel{border-radius:24px}
    .kf-head{padding:38px 24px 22px}
    .kf-body{padding:26px 24px 4px}
    .kf-foot{padding:22px 24px 32px;flex-direction:column;align-items:stretch}
    .kf-actions{flex-direction:column}
    .kf-actions .btn{justify-content:center}
    .kf-close{top:14px;right:14px}
  }

  /* ---------- Felder ---------- */
  .kf-group{margin-bottom:26px}
  .kf-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--stone);margin-bottom:9px}
  .kf-req{color:var(--kf-err);font-weight:700}

  .kf-input{width:100%;font:inherit;font-size:15px;line-height:1.6;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;
    transition:border-color .18s ease}
  .kf-input::placeholder{color:#A79C90}
  .kf-input:hover{border-color:#D9CFC2}
  .kf-input:focus{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:2px}
  textarea.kf-input{resize:vertical;min-height:104px}
  .kf-input.is-bad{border-color:var(--kf-err)}

  .kf-row-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .kf-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
  @media(max-width:640px){.kf-row-2,.kf-row-3{grid-template-columns:1fr;gap:20px}}

  .kf-opts{display:flex;flex-wrap:wrap;gap:10px}
  .kf-opt{font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;
    background:#fff;border:1px solid var(--line);border-radius:40px;padding:8px 16px;
    text-align:left;transition:border-color .18s ease,background .18s ease,color .18s ease}
  .kf-opt:hover{border-color:var(--blue);color:var(--blue)}
  .kf-opt[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
  .kf-opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

  .kf-opts-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:640px){.kf-opts-cards{grid-template-columns:1fr}}
  .kf-opt-card{border-radius:20px;padding:14px 17px;font-size:15px;font-weight:600;line-height:1.35}
  .kf-opt-card small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--stone)}
  .kf-opt-card:hover small{color:var(--blue)}
  .kf-opt-card[aria-pressed="true"] small{color:rgba(255,255,255,.82)}

  .kf-err{margin-top:9px;font-size:13.5px;color:var(--kf-err);font-weight:500}
  .kf-err[hidden]{display:none}

  .kf-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
    font-size:14.5px;line-height:1.65;color:var(--stone)}
  .kf-check input{width:18px;height:18px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--blue)}
  .kf-check a{color:var(--blue);font-weight:600}

  /* ---------- Bestaetigung ---------- */
  .kf-done{padding:64px 48px 60px;text-align:center}
  .kf-done .eyebrow{justify-content:center}
  .kf-done h2{font-size:clamp(24px,2.8vw,32px);font-weight:700;margin:16px 0 14px}
  .kf-done p{max-width:52ch;margin:0 auto;color:var(--stone);font-size:15.5px;line-height:1.75}
  .kf-done p + p{margin-top:12px}
  .kf-copybox{display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;
    max-width:460px;margin:18px auto 0;padding:13px 18px;
    background:#fff;border:1px solid var(--line);border-radius:14px}
  .kf-done .btn{margin-top:28px}
  @media(max-width:640px){.kf-done{padding:44px 24px 40px}}/* ------------------------------------------------------------------
   Schriften: lokal selbst gehostet, KEIN Google-Fonts-CDN (DSGVO).
   Source Serif 4 ist ein Variable Font (Achse wght 200-900); die eine
   Datei je Subset deckt damit 400 und 600 exakt ab. Lizenz: SIL OFL 1.1,
   siehe fonts/OFL.txt.
   ------------------------------------------------------------------ */
   @font-face{
    font-family:'Source Serif 4';
    font-style:normal;
    font-weight:200 900;
    font-display:swap;
    src:url('../fonts/source-serif-4-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Source Serif 4';
    font-style:normal;
    font-weight:200 900;
    font-display:swap;
    src:url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  
  /* ------------------------------------------------------------------
     Fließtext: Plus Jakarta Sans, ebenfalls lokal selbst gehostet
     (KEIN Google-Fonts-CDN, DSGVO). Variable Font (Achse wght 200-800);
     eine Datei je Subset deckt damit 400/500/600/700 exakt ab.
     Lizenz: SIL OFL 1.1, siehe fonts/OFL.txt.
     ------------------------------------------------------------------ */
  @font-face{
    font-family:'Plus Jakarta Sans';
    font-style:normal;
    font-weight:200 800;
    font-display:swap;
    src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Plus Jakarta Sans';
    font-style:normal;
    font-weight:200 800;
    font-display:swap;
    src:url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  
  :root{
    --ink:#1A1513;--paper:#FBFAF8;--paper-2:#F4F0EA;
    --brand:#143D97;--brand-deep:#0E2340;--brass:#B08542;
    --stone:#6E655D;--line:#E7E1D8;--maxw:1240px;--blue:#1A4B8C;
    --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
    --sans:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.68;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em}
  .eyebrow{font-family:inherit;line-height:1.5;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:9px}
  /* Inline-SVG-Icon vor dem Label (ersetzt den früheren Goldstrich). Sechs
     Motive, alle auf demselben 24er-Raster mit gleicher Strichstärke:
     route · compass · mail · case · doc · star. Farbe immer Gold, auf dunklen
     Blöcken eine Stufe heller, damit der dünne Strich nicht absäuft. */
  .ey-i{width:15px;height:15px;flex:0 0 auto;color:var(--brass);
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  a{color:inherit;text-decoration:none}
  
  header{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  header .nav{max-width:none;padding:0 32px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif)}
  .brand .logo{height:40px;width:auto;display:block}
  
  /* Echtes Tochina-Logo im Header. Quelldatei 841x200 (Seitenverhaeltnis
     4.205:1), daher nur height setzen und die Breite mitlaufen lassen.
  
     height:40px ist gemessen, nicht geschaetzt:
     - .nav hat feste height:70px, der Header waechst also nie mit. Die Grenze
       ist rein optisch; ab 44px wird der 70px-Balken eng.
     - 40px entspricht exakt der Hoehe des alten Logos (185x80 auf height:40px).
       Der vertikale Rhythmus des Headers bleibt damit unveraendert.
     - Breite bei 40px = 168px. Bei 861px Viewport (knapp ueber dem 860px-
       Breakpoint, Menue noch inline) bleiben 242px Luft bis zum Menue,
       bei 360px noch 110px bis zum Burger. Horizontal also unkritisch.
     - Unter 40px wird die Unterzeile „CHINA REISEN" duenn.
     Im Footer bewusst kleiner, siehe dort. */
  .brand-logo{height:40px;width:auto;display:block}
  
  .brand .en{font-size:22px;font-weight:600;letter-spacing:.02em;color:var(--blue)}
  .brand .en b{color:var(--blue);font-weight:600}
  .menu{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:500;color:var(--stone)}
  .menu a:hover{color:var(--brand)}
  .burger{display:none}
  .lang{display:flex;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--stone)}
  .lang b{color:var(--brand)}
  
  .topbar{background:var(--brand-deep);color:#C2CCDA;font-size:13px}
  /* Topbar fuehrt zwei Kontaktangaben: Zentrale und E-Mail. Die Mobilnummer steht nur
     noch im Footer (Zeile "Mobil"), im Band war sie zu dritt zu gedraengt.
     min-height statt height: sollte der Inhalt je wachsen, waechst das Band mit,
     statt den Text abzuschneiden. */
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:4px 16px;flex-wrap:wrap;max-width:none;padding:6px 32px}
  .topbar a{color:#fff}
  .topbar a:hover{color:var(--brass)}
  .topbar .tb-contact{font-weight:500}
  /* Gemessen (2026-08-09): tb-left 331px + gap 16px + tb-contact 245px + padding 64px = 656px.
     Ab 660px passt alles in eine Zeile, bei 640px bricht es um. Schwelle 700px mit Reserve.
     Der fruehere Wert 560px war zu niedrig: zwischen 561 und ~640px wurde das Band zweizeilig. */
  @media(max-width:700px){.topbar .tb-left{display:none}.topbar .wrap{justify-content:center}}
  .locale-switcher{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
  .locale-switcher a{color:#C2CCDA;transition:color .2s ease}
  .locale-switcher a:hover{color:var(--brass)}
  .locale-switcher a.active{color:var(--brass)}
  .locale-switcher .sep{color:#5A6A82;font-weight:400}
  
  /* Unten bewusst derselbe Wert wie oben: die Kacheln brauchen Abstand zum
     Kennzahlen-Band darunter, sonst klebt die Bandkante direkt an den Karten. */
  .types{padding:64px 0}
  .types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
  .type{border:1px solid transparent;border-radius:20px;padding:30px 26px;background:#F5F1EA;display:flex;flex-direction:column;transition:.25s ease}
  .type:hover{background:#fff;transform:translateY(-2px);border-color:var(--line)}
  .type .tnum{font-family:var(--serif);font-size:14px;color:var(--brass);font-weight:600;margin-bottom:10px}
  .type h3{font-size:19px;margin:0 0 8px;font-weight:600}
  .type p{font-size:13.5px;color:var(--stone);flex:1}
  .type .go{margin-top:16px;font-size:13px;font-weight:600;color:var(--brand);opacity:.85}
  /* Reisearten „eins groß, zwei klein" */
  .types-feature{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:24px;align-items:stretch}
  .types-col{display:grid;grid-template-rows:1fr 1fr;gap:20px}
  .type-lg{padding:44px 40px}
  .type-lg h3{font-size:26px;margin:0 0 12px}
  .type-lg p{font-size:15px}
  .badge{align-self:flex-start;background:var(--brand);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:40px;margin-bottom:16px}
  /* Foto-Variante der Reiseart-Kachel. Das Motiv kommt je Kachel per
     --tile-img, darüber ein Scrim, damit die weiße Schrift trägt.
     Gilt für alle drei Kacheln; die Layout-Sonderregeln (Text nach unten,
     Badge oben) hängen ausschließlich an .type-lg.photo, damit die beiden
     kleinen Kacheln ihr bestehendes Layout unverändert behalten. */
  /* ⚠️ background NIEMALS als Kurzform mit var() schreiben.
     `background:#0d1d33 var(--tile-img) center/cover no-repeat` wird von
     CSS-Minifiern zerstört (Netlify "Bundle and minify CSS"): sie können var()
     nicht auflösen und die Kurzform daher nicht sicher normalisieren. Ergebnis:
     ganze Deklaration ungültig — Foto UND Hintergrundfarbe weg, es bleibt nur
     der ::after-Scrim. Longhand ist davon nicht betroffen (siehe .hero.photo,
     das deshalb auf Netlify immer funktioniert hat). */
  .type.photo{
    position:relative;overflow:hidden;isolation:isolate;color:#fff;
    border-color:transparent;
    background-color:#0d1d33;
    background-image:var(--tile-img);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat}
  /* .type:hover setzt background als Kurzform und würde damit auch Bild,
     Position, Size und Repeat zurücksetzen — hier alle fünf wiederherstellen. */
  .type.photo:hover{
    background-color:#0d1d33;
    background-image:var(--tile-img);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    border-color:transparent}
  .type.photo h3,.type.photo .go{color:#fff}
  .type.photo p{color:rgba(255,255,255,.86)}
  .type.photo .go{opacity:1}
  /* Kleine Kacheln: der Text füllt die Kachel fast ganz aus (Titel oben,
     „Mehr erfahren" unten), deshalb ein fast gleichmäßiger Schleier statt
     eines Verlaufs von unten. Der Fließtext ist hier 13,5 px und zählt als
     normale Schrift — er braucht 4,5:1, nicht 3:1. Deshalb steht er auf den
     Foto-Kacheln auf vollem Weiß statt auf 86 %: das erlaubt einen um rund
     sechs Punkte helleren Schleier bei gleicher Lesbarkeit. Werte sind
     nachgemessen (hellstes Pixel hinter jedem Textelement), nicht geschätzt. */
  .type.photo::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top,
      rgba(8,18,36,.62) 0%,rgba(8,18,36,.60) 100%)}
  .type.photo:not(.type-lg) p{color:#fff}
  /* Große Kachel: Inhalt sitzt unten auf dem Bild, Badge oben links darüber. */
  .type-lg.photo{justify-content:flex-end;padding-top:60px}
  .type-lg.photo p{flex:0 0 auto}
  .type-lg.photo .go{margin-top:20px}
  .type-lg.photo::after{background:linear-gradient(to top,
    rgba(8,18,36,.92) 0%,rgba(8,18,36,.74) 34%,rgba(8,18,36,.46) 66%,rgba(8,18,36,.30) 100%)}
  .type-lg.photo .badge{position:absolute;top:26px;left:40px;z-index:1;margin:0;background:#fff;color:var(--brand)}
  @media(max-width:760px){.types-feature{grid-template-columns:1fr}.types-col{grid-template-rows:auto}.type.photo{min-height:260px}}
  @media(max-width:860px){.types-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.types-grid{grid-template-columns:1fr}}
  
  /* --- Startseiten-Hero: Verlauf ueber hanson-lu (Grosse Mauer) -------------
     NUR die Startseite nutzt diese Regel. Unterseiten setzen ihr Hintergrundbild
     entweder ueber .hero.photo / .dim-strong / .dim-soft (weiter unten) oder
     inline im style-Attribut; beides ueberschreibt background-image hier.
  
     VIER Stops, nicht drei — das ist der Kern und darf nicht vereinfacht werden:
     Das Foto ist hell (Rohbild-Luminanz L 0.74-0.82, hellste Stelle Himmel
     rgb(255,229,212)). Damit weisser Text WCAG AA erreicht, braucht der Bereich
     unter dem Text rund alpha .65-.75. Mit drei Stops laesst sich das nicht
     erreichen, ohne auch die rechte Bildhaelfte mit abzudunkeln — dort steht
     aber die Grosse Mauer, das Motiv der Seite.
  
     Warum der dritte Stop bei 62 % sitzt:
     Der Text steckt in .hero-grid{max-width:640px}. Bei 1280px Viewport endet
     die laengste Zeile (h1) gemessen bei 53.8 % der Viewportbreite, der
     Lead-Absatz bei 51.1 %. Der Stop liegt also knapp dahinter: bis 62 % bleibt
     es dunkel genug fuer den Text, danach faellt der Verlauf schnell auf .16
     zurueck und gibt die Mauer frei. Gemessen verliert der Bildbereich 50-75 %
     dadurch nur 16 % Helligkeit, der Bereich 75-100 % nur 3 %.
  
     Wer max-width von .hero-grid oder die h1-Groesse aendert, verschiebt diese
     53.8 % und muss den 62 %-Stop neu messen. Methode: CLAUDE.md Abschnitt 6. */
  .hero{position:relative;padding:104px 0 92px;color:#fff;background-color:#0d1d33;
    background-image:
      linear-gradient(100deg,rgba(11,29,54,.95) 0%,rgba(16,45,80,.80) 45%,rgba(17,42,72,.50) 62%,rgba(18,38,64,.16) 100%),
      url('../images/hanson-lu-unsplash.jpg');
    background-size:cover;background-position:center;background-repeat:no-repeat}
  
  /* Schmale Viewports: .hero-grid ist dann nicht mehr 640px breit, sondern so
     breit wie der Viewport. Der Text laeuft gemessen bis 92.8 % — der Trick mit
     dem freien rechten Rand funktioniert hier also nicht, der Verlauf muss
     durchgehend dunkel bleiben. Das Bild wird auf dem Handy sichtbar dunkler;
     bewusste Entscheidung zugunsten der Lesbarkeit (auf 360px ist vom Panorama
     ohnehin kaum etwas zu erkennen). */
  @media (max-width:860px){
    .hero{
      background-image:
        linear-gradient(100deg,rgba(11,29,54,.94) 0%,rgba(16,45,80,.80) 50%,rgba(17,42,72,.70) 100%),
        url('../images/hanson-lu-unsplash.jpg');
    }
  }
  .hero-grid{max-width:640px}
  .hero .eyebrow{color:#E9C88A}
  .hero .ey-i,.focus .ey-i{color:#D2A560}
  /* hyphens:auto braucht lang="de" am <html> (ist gesetzt) und trennt nach
     deutschen Silbenregeln mit Trennstrich. Ohne diese Regel sprengen lange
     Komposita ohne Bindestrich (Maßgeschneiderte, Küstenuniversität) auf
     360px den Viewport und die Seite scrollt horizontal.
     -webkit- fuer Safari, das die Eigenschaft bis heute nur praefixiert kennt.
  
     hyphenate-limit-chars:12 4 4 = erst ab 12 Buchstaben trennen, mind. 4 Zeichen
     vor und nach dem Trennstrich. Ohne diese Grenze trennt der Algorithmus auch
     kurze Woerter und Eigennamen (Chi-na, Ach-se, Pan-das, Shang-haier) — das
     widerspricht der deutschen Setzgewohnheit. Die beiden Woerter, die den
     Ueberlauf ueberhaupt ausloesen, sind 16 bzw. 17 Zeichen lang und werden
     weiterhin getrennt. Aeltere Browser ignorieren die Eigenschaft und fallen
     auf reines hyphens:auto zurueck — kein Ueberlauf, nur die kurzen Trennungen
     kommen dort wieder. */
  .hero h1{font-size:clamp(42px,5.6vw,68px);font-weight:700;margin:22px 0 26px;color:#fff;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 4 4}
  .hero h1 em{font-style:normal;color:#F3D9A6}
  .hero p.lead{font-size:18px;line-height:1.6;color:rgba(255,255,255,.9);max-width:46ch}
  .hero .btn-primary{background:#fff;color:var(--brand)}
  .hero .btn-primary:hover{background:var(--brand);color:#fff}
  .hero .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
  .hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
  .cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding:14px 24px;border-radius:2px;transition:.2s ease;border:1px solid transparent}
  .btn-primary{background:var(--brand);color:#fff}
  .btn-primary:hover{background:var(--brand-deep)}
  .btn-ghost{border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  
  .stats{background:var(--paper-2)}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .stat{padding:34px 14px;text-align:center;border-right:1px solid var(--line)}
  .stat:last-child{border-right:none}
  .stat .num{font-family:var(--serif);font-size:38px;font-weight:600;color:var(--brand)}
  .stat .lbl{font-size:12.5px;color:var(--stone);letter-spacing:.02em;margin-top:4px}
  
  .section{padding:100px 0}
  .band{background:var(--paper-2)}
  .split{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
  .split-media{aspect-ratio:4/3;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#EFE9E0 0%,#E3D9CC 100%);display:flex;align-items:center;justify-content:center;color:#B3A793;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
  .split-media img{display:block;width:100%;height:100%;object-fit:cover;border:0}
  @media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}
  .section-head{max-width:56ch;margin-bottom:60px}
  .section-head h1,.section-head h2{font-size:clamp(30px,3.8vw,46px);font-weight:700;margin:18px 0 0}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .card{border:1px solid var(--line);border-radius:20px;padding:34px 30px;background:#fff;transition:.24s ease;position:relative;overflow:hidden}
  .card::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--brand);transform:scaleY(0);transform-origin:top;transition:.25s ease}
  .card:hover{border-color:#D9CFC2;transform:translateY(-2px)}
  .card:hover::before{transform:scaleY(1)}
  .card .tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:10px}
  .card h3{font-size:21px;margin:0 0 10px;font-weight:600}
  .card p{font-size:14.5px;color:var(--stone)}
  .card .meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--brand);font-weight:600;letter-spacing:.02em}
  .routes-note{text-align:center;color:var(--stone);font-size:14.5px;margin-top:36px}
  .routes-note a{color:var(--brand);font-weight:600}
  .rg-title{font-family:inherit;line-height:1.5;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:48px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .rg-title.first{margin-top:0}
  .rg-title span{color:var(--stone);font-weight:500;letter-spacing:0;text-transform:none;margin-left:8px;font-size:12.5px}
  
  .focus{background:var(--brand-deep);color:#E6EDF8}
  .focus .wrap{padding-top:78px;padding-bottom:78px}
  .focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .focus .eyebrow{color:#AEC4EA}
  .focus h2{color:#fff;font-size:clamp(30px,3.8vw,46px);font-weight:700;margin:18px 0 22px}
  .focus p{font-size:16.5px;line-height:1.7;color:#C7D3E8;max-width:46ch}
  /* Globales *{margin:0} — Folgeabsätze brauchen ihren Abstand explizit. */
  .focus p + p{margin-top:16px}
  .focus .btn-primary{background:#fff;color:var(--brand-deep);margin-top:30px}
  .focus .btn-primary:hover{background:var(--brass);color:#fff}
  .focus-list{display:flex;flex-direction:column;gap:2px}
  .focus-list .row{display:flex;gap:16px;padding:18px 0;border-top:1px solid rgba(220,230,248,.16)}
  .focus-list .row:last-child{border-bottom:1px solid rgba(220,230,248,.16)}
  .focus-list .k{font-family:var(--serif);font-size:15px;color:var(--brass);min-width:30px}
  .focus-list .v{font-size:15px;color:#E6EDF8}
  .focus-list .v b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
  
  .cities{background:#fff}
  .cities .wrap{padding:40px 28px;display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;justify-content:center}
  .cities .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-weight:600;width:100%;text-align:center;margin-bottom:4px}
  .cities .chip{font-size:13.5px;color:var(--ink);font-weight:500;padding:8px 16px;border:1px solid var(--line);border-radius:40px}
  
  .offer .wrap{max-width:1120px}
  .offer .split h2{font-size:clamp(30px,3.8vw,46px);font-weight:700;margin:18px 0 16px}
  .offer .split p{color:var(--stone);font-size:16px;line-height:1.7}
  .offer .split .cta{text-align:left;margin-top:26px}
  .offer .steps{margin-top:56px}
  .offer .head{text-align:center;max-width:60ch;margin:0 auto 40px}
  .offer .head h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;margin:18px 0 16px}
  .offer .head p{color:var(--stone);font-size:16px;line-height:1.7}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:38px}
  .step{border-top:2px solid var(--brand);padding-top:18px}
  .step .n{font-family:var(--serif);font-size:15px;color:var(--brand);font-weight:600}
  .step h3{font-size:18px;margin:6px 0 8px;font-weight:600}
  .step p{font-size:14.5px;color:var(--stone)}
  .offer .cta{text-align:center}
  .trust-line{text-align:center;color:var(--stone);font-size:13.5px;letter-spacing:.02em;margin-top:30px}
  .trust-line b{color:var(--ink);font-weight:600}
  
  footer{background:var(--brand-deep);color:#C2CCDA;padding:64px 0 30px;font-size:14px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
  /* Weisse Logovariante im Footer, bewusst kleiner als im Header:
     der Footer braucht nicht dieselbe Praesenz wie die Kopfzeile. */
  footer .brand-logo{height:30px}
  footer h2{font-family:inherit;line-height:1.5;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8394AC;margin-bottom:16px;font-weight:600}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  footer a:hover{color:#fff}
  footer .about{max-width:34ch;line-height:1.7;margin-top:14px;color:#93A0B4}
  .foot-map{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:8px 15px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;font-weight:600;font-size:13px;text-decoration:none;transition:background .18s ease,border-color .18s ease}
  .foot-map:hover{background:var(--brand);border-color:var(--brand);color:#fff}
  .foot-map:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .foot-sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8394AC;margin:26px 0 12px;font-weight:600}
  .foot-mapimg{display:block;max-width:360px;border-radius:20px;overflow:hidden}
  .foot-mapimg img{display:block;width:100%;height:auto;border:0}
  .foot-mapimg:focus-visible{outline:2px solid #fff;outline-offset:3px}
  @media (max-width:560px){.foot-mapimg{max-width:100%}}
  .route-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:32px;border:0}
  @media (max-width:640px){.route-photo{aspect-ratio:4/3;border-radius:20px}}
  .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;color:#7A889E;font-size:12.5px}
  
  @media (max-width:860px){
    .stats-grid{grid-template-columns:1fr 1fr}
    .stat:nth-child(2){border-right:none}
    .stat{border-bottom:1px solid var(--line)}
    .grid{grid-template-columns:1fr}
    .focus-grid{grid-template-columns:1fr;gap:34px}
    .steps{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .burger span{display:block;width:24px;height:2px;background:var(--brand);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
    .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav.open .burger span:nth-child(2){opacity:0}
    .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
    .nav.open .menu{opacity:1;visibility:visible;transform:none}
    .menu a{padding:14px 32px;font-size:15px;color:var(--ink)}
    .menu a:hover{color:var(--brand);background:var(--paper-2)}
  }
  @media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
  /* Scroll-Reveal: JS setzt .reveal-on-scroll auf <html> und .in auf Elemente */
  .reveal-on-scroll .section-head,
  .reveal-on-scroll .card,
  .reveal-on-scroll .rcard,
  .reveal-on-scroll .type,
  .reveal-on-scroll .stat,
  .reveal-on-scroll .split>div,
  .reveal-on-scroll .focus-list .row,
  .reveal-on-scroll .rg-title,
  .reveal-on-scroll .steps .step,
  .reveal-on-scroll .contact-cta .panel,
  .reveal-on-scroll .cities .chip,
  .reveal-on-scroll .routes-note{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal-on-scroll .in{opacity:1!important;transform:none!important}
  
  /* Einblend-Animation beim Laden (Hero-Elemente).
     WICHTIG: Diese Basisregeln müssen VOR dem prefers-reduced-motion-Block
     stehen. Standen sie dahinter, gewann `.reveal{opacity:0}` per Quellreihen-
     folge (gleiche Spezifität) gegen die Reduced-Motion-Regel, während
     `*{animation:none!important}` gleichzeitig die Einblendung abschaltete —
     Ergebnis: Nutzer mit „Bewegung reduzieren" sahen Hero-Titel, Lead und
     CTA-Buttons auf keiner Seite. Reihenfolge hier also nicht vertauschen. */
  .reveal{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none}}
  
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    .reveal-on-scroll .section-head,.reveal-on-scroll .card,.reveal-on-scroll .rcard,.reveal-on-scroll .type,.reveal-on-scroll .stat,.reveal-on-scroll .split>div,.reveal-on-scroll .focus-list .row,.reveal-on-scroll .rg-title,.reveal-on-scroll .steps .step,.reveal-on-scroll .contact-cta .panel,.reveal-on-scroll .cities .chip,.reveal-on-scroll .routes-note{opacity:1;transform:none}
  }
  
  /* ---- Detailseiten (standard / delegationen / premium) ---- */
  .hero.compact{padding:88px 0 80px}
  .hero.compact h1{margin:16px 0 18px}
  
  /* Foto-Hero für Unterseiten: eigenes Motiv via --hero-img, darüber das
     gleiche Blau-Overlay wie die Startseite (linksbetont, weil der Text links
     steht). Overlay-Tiefe nur über die drei Alpha-Stufen unten variiert – alle
     im selben Blau, damit die Seiten optisch zusammengehören. Bildhelligkeit
     bestimmt die Stufe: helles Foto = .dim-strong, dunkles Foto = .dim-soft. */
  .hero.photo{
    background-color:#0d1d33;
    background-image:
      linear-gradient(100deg,rgba(11,29,54,.90) 0%,rgba(16,45,80,.58) 46%,rgba(18,38,64,.16) 100%),
      var(--hero-img);
    background-size:cover;background-position:center;background-repeat:no-repeat;
  }
  .hero.photo.dim-strong{
    background-image:
      linear-gradient(100deg,rgba(11,29,54,.95) 0%,rgba(16,45,80,.72) 44%,rgba(18,38,64,.30) 100%),
      var(--hero-img);
  }
  .hero.photo.dim-soft{
    background-image:
      linear-gradient(100deg,rgba(11,29,54,.86) 0%,rgba(16,45,80,.50) 48%,rgba(18,38,64,.10) 100%),
      var(--hero-img);
  }
  
  /* Produktkarte mit Platzhalterbild */
  .pcard{padding:0;display:flex;flex-direction:column;background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none}
  .pcard::before{display:none}
  .pcard:hover{transform:none;box-shadow:none;border-color:transparent}
  .pcard .thumb{aspect-ratio:16/10;width:100%;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#EFE9E0 0%,#E3D9CC 100%);display:flex;align-items:center;justify-content:center;color:#B3A793;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;transition:transform .28s ease}
  .pcard .thumb img{display:block;width:100%;height:100%;object-fit:cover;border:0}
  .pcard:hover .thumb{transform:translateY(-6px)}
  /* Karten ohne Thumb (Delegationen): normale Karten-Optik statt schwebendem Text */
  .pcard.noimg{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 30px}
  .pcard.noimg:hover{border-color:var(--line)}
  .pcard.noimg .pbody{padding:0}
  /* Breite Bildbande über einem Kartenraster */
  .band-photo{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:center;border-radius:40px;border:0;margin-bottom:44px}
  @media (max-width:640px){.band-photo{aspect-ratio:16/9;border-radius:20px}}
  .pcard .pbody{padding:22px 2px 0;display:flex;flex-direction:column;flex:1}
  .pcard .pbody .tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:10px}
  .pcard .pbody h3{font-size:20px;margin:0 0 10px;font-weight:600}
  .pcard .pbody p{font-size:14.5px;color:var(--stone);flex:1}
  .pcard .pbody .meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--brand);font-weight:600;letter-spacing:.02em}
  .pcard .pbody .btn{margin-top:20px;align-self:flex-start}
  
  /* ------------------------------------------------------------------
     Bildkarten für Reiselinien (Foto als Hintergrund, Text darüber).
     Verwendet in index.html, standard-reisen.html, reiselinien.html.
     Foto kommt je Karte per --card-img. Kleine Karten: Tag + Titel + Meta.
     Große Karten (.lg): zusätzlich ein Beschreibungsabsatz. Titel immer
     auf max. 2 Zeilen begrenzt (line-clamp), damit lange deutsche Wörter
     die Karte nicht sprengen; feste Mindesthöhen sichern den Platz.
     ------------------------------------------------------------------ */
  .rcard{
    position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    min-height:230px;padding:22px;border-radius:20px;overflow:hidden;
    color:#fff;text-decoration:none;isolation:isolate;
    /* ⚠️ Longhand statt Kurzform — siehe Kommentar bei .type.photo */
    background-color:#0d1d33;
    background-image:var(--card-img);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    transition:transform .28s ease}
  /* Scrim über dem Foto. Unten kräftig (dort steht der Text), zur Oberkante
     hin schnell auslaufend, damit das Motiv wirklich zu sehen ist und die
     Karte nicht als blaue Fläche liest. Große Karten haben Titel + drei Zeilen
     Text + Meta, ihr Textblock reicht höher — deshalb eine eigene, weiter nach
     oben gezogene Kurve unter .rcard.lg. */
  .rcard::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top,
      rgba(8,18,36,.93) 0%,rgba(8,18,36,.84) 26%,rgba(8,18,36,.28) 52%,rgba(8,18,36,0) 72%)}
  .rcard:hover{transform:translateY(-4px)}
  .rcard:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .rcard .tag{
    position:absolute;top:16px;left:16px;z-index:1;
    background:#fff;color:var(--ink);
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:6px 12px;border-radius:999px}
  .rcard h3{
    font-family:var(--serif);color:#fff;font-weight:600;font-size:20px;line-height:1.18;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rcard p{
    margin:10px 0 0;color:rgba(255,255,255,.82);font-size:14px;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rcard .meta{
    margin-top:5px;font-size:12px;font-weight:600;letter-spacing:.02em;color:#fff;
   
  }
   html:not([lang="zh"]) .rcard .meta{text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2; font-size: 11px; line-height: 1.2;
 
  }
   html:not([lang="zh"]) .rcard.lg .meta{-webkit-line-clamp: 2;}
  /* Große (empfohlene) Karte: größerer Titel, Beschreibung, mehr Höhe */
  /* Große Karten haben Titel + drei Zeilen Text + Meta, ihr Textblock reicht
     höher — deshalb bleibt der Scrim hier bis 52 % kräftiger. Beide Kurven sind
     so gewählt, dass der weiße Titel auf JEDEM eingesetzten Foto mindestens
     3:1 erreicht (WCAG AA für große Schrift), gemessen am hellsten Pixel hinter
     der Schrift. Werte nicht nach Gefühl ändern — vorher nachmessen. */
  .rcard.lg::after{background:linear-gradient(to top,
    rgba(8,18,36,.93) 0%,rgba(8,18,36,.82) 26%,rgba(8,18,36,.40) 52%,rgba(8,18,36,0) 72%)}
  .rcard.lg{min-height:360px;padding:30px}
  .rcard.lg h3{font-size:clamp(24px,2.5vw,28px);line-height:1.14}
  .rcard.lg p{-webkit-line-clamp:3;font-size:15px}
  
  /* Layout A – „eins groß, mehrere klein" (Startseite, standard-reisen).
     6-Spalten-Raster mit fester Zeilenhöhe: große Karte 4×2, kleine 2×1. */
  .rcards-feature{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:190px;gap:20px;grid-auto-flow:row dense}
  .rcards-feature .rcard{grid-column:span 2;grid-row:span 1;min-height:0}
  .rcards-feature .rcard.lg{grid-column:span 4;grid-row:span 2;min-height:0}
  /* Layout B – gleich große große Karten (reiselinien: Klassische Rundreisen) */
  .rcards-big{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  /* Layout C – gleich große kleine Karten (reiselinien: Städte-/Saisonreisen) */
  .rcards-mini{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
  .rcards-mini.cols4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:900px){.rcards-mini.cols4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:760px){
    .rcards-feature{grid-template-columns:1fr;grid-auto-rows:auto}
    .rcards-feature .rcard,.rcards-feature .rcard.lg{grid-column:auto;grid-row:auto;min-height:230px}
    .rcards-big{grid-template-columns:1fr}
    .rcards-mini,.rcards-mini.cols4{grid-template-columns:1fr}
    .rcard.lg{min-height:260px;padding:24px}
    .rcard.lg h3{font-size:23px}
  }
  
  /* Anfrage-Block am Seitenende */
  /* Oben derselbe Wert wie unten: ohne padding-top klebt die Panel-Oberkante
     direkt an der Kante des vorherigen Abschnitts — besonders sichtbar auf
     Seiten, wo davor ein .band steht (gleiche Farbe, nur 1px Rahmen dazwischen).
     100px entspricht dem Rhythmus von .section, das hier immer davor liegt. */
  .contact-cta{padding:100px 0}
  .contact-cta .panel{background:var(--paper-2);border:1px solid var(--line);border-radius:40px;padding:68px 40px;text-align:center}
  .contact-cta .eyebrow{justify-content:center}
  .contact-cta h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;margin:18px 0 0}
  .contact-cta p{max-width:54ch;margin:16px auto 0;color:var(--stone);font-size:16px;line-height:1.7}
  .contact-cta .btn{margin-top:28px}
  @media(max-width:560px){.contact-cta .panel{padding:52px 24px}}
  
  /* Anfrage-Widget: zwei Buttons (E-Mail / Anrufen) + ausklappbares Adressfeld.
     Wird per contact.js aufgebaut; Optik im Blau-System der Seite. */
  .anfrage{margin-top:28px}
  .anfrage-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .anfrage-actions .btn{margin-top:0}
  /* Ausklappbares Feld mit Adresse/Nummer + Kopieren */
  .anfrage-panel{
    display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;
    max-width:440px;margin:16px auto 0;padding:14px 18px;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease}
  .anfrage-panel.open{opacity:1;transform:none}
  /* Variante für Inline-Auslöser in linksbündigen Blöcken (z. B. „Warum Tochina") */
  .anfrage-panel.align-start{margin-left:0;margin-right:auto;justify-content:flex-start}
  .anfrage-panel .kt-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
  .anfrage-panel .kt-val{font-weight:600;color:var(--brand);font-size:15px;word-break:break-all}
  .anfrage-panel a.kt-val:hover{text-decoration:underline}
  .kt-copy{
    cursor:pointer;border:1px solid var(--brand);background:#fff;color:var(--brand);
    font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;
    padding:7px 14px;border-radius:999px;transition:background .18s ease,color .18s ease,border-color .18s ease}
  .kt-copy:hover{background:var(--brand);color:#fff}
  .kt-copy:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .kt-copy.is-done{background:var(--brand);color:#fff;border-color:var(--brand)}
  @media(max-width:560px){.anfrage-actions .btn{width:100%;justify-content:center}}
  
  /* Merkmal-Liste (Verkaufsargumente / Leistungen): kleiner Titel + ein Satz je Zeile.
     Bewusst schlicht (nur Trennlinien) — grenzt sich von der Beispiel-Karte ab. */
  .flist{max-width:940px}
  .flist .fitem{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:14px 44px;
    padding:26px 0;border-top:1px solid var(--line)}
  .flist .fitem:last-child{border-bottom:1px solid var(--line)}
  .flist .fitem h3{font-size:20px;font-weight:600;margin:0;line-height:1.2}
  .flist .fitem p{font-size:15.5px;color:var(--stone);margin:0;line-height:1.65}
  @media(max-width:640px){.flist .fitem{grid-template-columns:1fr;gap:6px;padding:22px 0}}
  
  /* Beispiel-/Referenzreise als hervorgehobene Karte (heller Rahmen, weißer Grund) */
  .example{background:#fff;border:1px solid var(--line);border-radius:24px;padding:46px 46px;max-width:940px}
  .example h3{font-size:clamp(23px,2.6vw,30px);font-weight:700;line-height:1.14;margin:0 0 10px}
  .example .ex-meta{color:var(--brand);font-weight:600;font-size:13.5px;letter-spacing:.03em;margin:0 0 22px}
  .example .ex-desc{color:var(--stone);font-size:16px;line-height:1.75;max-width:72ch;margin:0 0 26px}
  .example .ex-hl-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin:0 0 14px}
  .example .ex-hl{list-style:none;display:grid;gap:12px;margin:0 0 28px}
  .example .ex-hl li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:var(--ink)}
  .example .ex-hl li::before{content:"";position:absolute;left:0;top:10px;width:15px;height:2px;background:var(--brass)}
  /* Kein Trennstrich über der Fußnote — der Abstand trennt bereits deutlich
     genug, und eine Linie direkt vor dem Kontaktblock wirkt hart. */
  .example .ex-note{color:var(--stone);font-size:13px;line-height:1.6;margin:0;padding-top:26px}
  @media(max-width:560px){.example{padding:32px 24px;border-radius:18px}}
  
  /* Kompakter Abschnittskopf (nur Eyebrow) + Einleitungsabsatz im Abschnittskopf */
  .section-head.tight{margin-bottom:30px}
  .section-head p{margin-top:16px;color:var(--stone);font-size:17px;line-height:1.7;max-width:62ch}
  
  /* Rechtstexte (Impressum / Datenschutz / AGB) */
  .legal{max-width:760px;font-size:15.5px;color:var(--stone);line-height:1.75}
  .legal h2{font-size:20px;margin:36px 0 10px;font-weight:600;color:var(--ink)}
  .legal h2:first-child{margin-top:0}
  .legal h3{font-size:16px;margin:24px 0 8px;font-weight:600;color:var(--ink);font-family:var(--serif)}
  .legal p{margin:0 0 14px}
  .legal strong,.legal b{color:var(--ink);font-weight:600}
  .legal a{color:var(--brand);font-weight:600}
  .legal address{font-style:normal;margin:0 0 14px;line-height:1.8}
  .legal ul,.legal ol{margin:0 0 14px;padding-left:22px}
  .legal li{margin-bottom:6px}
  .legal .muted{font-size:13.5px;color:var(--stone)}
  .notice{background:#FBF3E7;border:1px solid #E7D3AE;border-left:3px solid var(--brass);border-radius:10px;padding:16px 20px;margin:0 0 30px;font-size:14.5px;line-height:1.6;color:var(--ink);font-weight:500}
  
  /* Klickbare Linienkarten */
  a.card{cursor:pointer}
  .card .go{display:block;margin-top:16px;font-size:13px;font-weight:600;color:var(--brand)}
  .pcard .pbody .go{margin-top:20px}
  
  /* Reiseverlauf (Tag für Tag) — Struktur steht, Inhalte folgen */
  .itinerary{max-width:820px}
  .itinerary .placeholder{color:var(--stone);font-size:16px}
  .day{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
  .day:last-child{border-bottom:1px solid var(--line)}
  .daynum{font-family:var(--serif);font-size:18px;color:var(--brand);font-weight:600}
  .day h3{font-size:19px;margin:0 0 8px;font-weight:600}
  .day p{font-size:15px;color:var(--stone)}
  @media(max-width:560px){.day{grid-template-columns:1fr;gap:6px}}
  /* Kleingedruckter Hinweis am Ende des Reiseverlaufs (alle Linienseiten) */
  .route-disclaimer{max-width:820px;margin-top:18px;color:var(--stone);font-size:12.5px;letter-spacing:.02em}
  
  /* Preisangabe auf den Linienseiten (ab 2026-08). Ruhiger Kasten, kein Angebotscharakter:
     der Preis ist ein Richtwert, verkauft wird weiterhin ueber die Anfrage. */
  .preis{max-width:820px;background-color:var(--paper-2);border:1px solid var(--line);
    border-radius:20px;padding:22px 26px;margin:0}
  .preis strong{display:block;font-family:var(--serif);font-size:21px;font-weight:600;
    color:var(--brand);line-height:1.3}
  .preis .muted{display:block;margin-top:9px;font-size:13.5px;color:var(--stone);line-height:1.65}
  
  /* Aufzaehlung mit Messingstrich, gleiche Optik wie .example .ex-hl. */
  .hl-list{list-style:none;display:grid;gap:12px;margin:0;max-width:820px}
  .hl-list li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.6;color:var(--ink)}
  .hl-list li::before{content:"";position:absolute;left:0;top:11px;width:15px;height:2px;background:var(--brass)}
  /* Globales a{color:inherit} macht Links hier sonst unsichtbar (gleiche Optik wie .legal a). */
  .hl-list a{color:var(--brand);font-weight:600}
  
  /* Sprungmarke zum Anfrage-Block, nur auf schmalen Schirmen.
     Gemessen (2026-08-09, 390px): die neuen Linienseiten sind 9 bis 13 Bildschirmhoehen lang,
     der Reiseverlauf allein bis 4.900px. Ohne Sprungmarke ist der Anfrage-Block erst nach dem
     gesamten Tagesprogramm erreichbar. Ab 561px entfaellt sie: dort ist die Seite kuerzer
     und der Weg zum Abschluss kein Hindernis mehr.
     Kein scroll-margin noetig, html{scroll-padding-top:84px} deckt die klebende Kopfzeile ab. */
  .jump-anfrage{display:none}
  @media(max-width:560px){
    .jump-anfrage{display:block;margin-top:12px;color:var(--brand);font-weight:600;font-size:14px}
  }
  
  /* Wichtige Hinweise auf Linienseiten (Gesundheit, Genehmigungen).
     Globales *{margin:0}: Abstand zwischen Absaetzen muss gesetzt werden. */
  .hinweise{max-width:820px;color:var(--stone);font-size:16px;line-height:1.75}
  .hinweise p+p{margin-top:16px}
  .hinweise a{color:var(--brand);font-weight:600}
  
  /* Eingeschlossene / nicht eingeschlossene Leistungen, zweispaltig. */
  .leistungen{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:940px}
  .leistungen h3{font-size:18px;font-weight:600;margin:0 0 18px}
  .leistungen .hl-list li{font-size:15px;color:var(--stone)}
  /* Ausschlussspalte ohne Messing: der Strich soll hier nicht wie ein Vorzug wirken. */
  .leistungen .excl li::before{background:var(--stone)}
  @media(max-width:760px){.leistungen{grid-template-columns:1fr;gap:34px}}
  
  @media(max-width:860px){.section{padding:84px 0}}
  @media(max-width:560px){.section{padding:64px 0}.topbar .wrap,header .nav{padding:0 20px}}


  :root{--kf-err:#A03323}

  /* ---------- Overlay ---------- */
  .kf-backdrop{position:fixed;inset:0;z-index:80;background:rgba(14,35,64,.62);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    display:flex;align-items:flex-start;justify-content:center;
    padding:48px 20px;overflow-y:auto;animation:kf-fade .18s ease both}
  .kf-backdrop[hidden]{display:none}
  .kf-panel{position:relative;width:100%;max-width:780px;background:var(--paper);
    border:1px solid var(--line);border-radius:40px;
    box-shadow:0 30px 90px rgba(14,35,64,.34);
    animation:kf-rise .26s cubic-bezier(.2,.7,.2,1) both}
  @keyframes kf-fade{from{opacity:0}to{opacity:1}}
  @keyframes kf-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .kf-backdrop,.kf-panel{animation:none}
  }

  .kf-close{position:absolute;top:22px;right:22px;width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--stone);
    transition:border-color .18s ease,color .18s ease,background .18s ease}
  .kf-close:hover{border-color:var(--blue);color:var(--blue)}
  .kf-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .kf-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

  .kf-head{padding:44px 48px 26px;border-bottom:1px solid var(--line)}
  .kf-head h2{font-size:clamp(26px,3vw,36px);font-weight:700;margin:16px 0 12px}
  .kf-head p{color:var(--stone);font-size:15.5px;line-height:1.7;max-width:56ch}
  .kf-body{padding:32px 48px 8px}
  .kf-foot{padding:24px 48px 40px;margin-top:30px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
  .kf-foot > p{color:var(--stone);font-size:14px;margin:0}
  .kf-actions{display:flex;gap:12px;flex-wrap:wrap}
  @media (max-width:640px){
    .kf-backdrop{padding:20px 12px}
    .kf-panel{border-radius:24px}
    .kf-head{padding:38px 24px 22px}
    .kf-body{padding:26px 24px 4px}
    .kf-foot{padding:22px 24px 32px;flex-direction:column;align-items:stretch}
    .kf-actions{flex-direction:column}
    .kf-actions .btn{justify-content:center}
    .kf-close{top:14px;right:14px}
  }

  /* ---------- Felder ---------- */
  .kf-group{margin-bottom:26px}
  .kf-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--stone);margin-bottom:9px}
  .kf-req{color:var(--kf-err);font-weight:700}

  .kf-input{width:100%;font:inherit;font-size:15px;line-height:1.6;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;
    transition:border-color .18s ease}
  .kf-input::placeholder{color:#A79C90}
  .kf-input:hover{border-color:#D9CFC2}
  .kf-input:focus{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:2px}
  textarea.kf-input{resize:vertical;min-height:104px}
  .kf-input.is-bad{border-color:var(--kf-err)}

  .kf-row-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .kf-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
  @media(max-width:640px){.kf-row-2,.kf-row-3{grid-template-columns:1fr;gap:20px}}

  .kf-opts{display:flex;flex-wrap:wrap;gap:10px}
  .kf-opt{font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;
    background:#fff;border:1px solid var(--line);border-radius:40px;padding:8px 16px;
    text-align:left;transition:border-color .18s ease,background .18s ease,color .18s ease}
  .kf-opt:hover{border-color:var(--blue);color:var(--blue)}
  .kf-opt[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
  .kf-opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

  .kf-opts-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:640px){.kf-opts-cards{grid-template-columns:1fr}}
  .kf-opt-card{border-radius:20px;padding:14px 17px;font-size:15px;font-weight:600;line-height:1.35}
  .kf-opt-card small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--stone)}
  .kf-opt-card:hover small{color:var(--blue)}
  .kf-opt-card[aria-pressed="true"] small{color:rgba(255,255,255,.82)}

  .kf-err{margin-top:9px;font-size:13.5px;color:var(--kf-err);font-weight:500}
  .kf-err[hidden]{display:none}

  .kf-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
    font-size:14.5px;line-height:1.65;color:var(--stone)}
  .kf-check input{width:18px;height:18px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--blue)}
  .kf-check a{color:var(--blue);font-weight:600}

  /* ---------- Bestaetigung ---------- */
  .kf-done{padding:64px 48px 60px;text-align:center}
  .kf-done .eyebrow{justify-content:center}
  .kf-done h2{font-size:clamp(24px,2.8vw,32px);font-weight:700;margin:16px 0 14px}
  .kf-done p{max-width:52ch;margin:0 auto;color:var(--stone);font-size:15.5px;line-height:1.75}
  .kf-done p + p{margin-top:12px}
  .kf-copybox{display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;
    max-width:460px;margin:18px auto 0;padding:13px 18px;
    background:#fff;border:1px solid var(--line);border-radius:14px}
  .kf-done .btn{margin-top:28px}
  @media(max-width:640px){.kf-done{padding:44px 24px 40px}}