/* Schriften vom eigenen Server statt von Google Fonts: beim Seitenaufruf
     geht keine IP-Adresse an Google. Nur latin + latin-ext (deckt Deutsch,
     Franzoesisch, Italienisch und Namen mit Akzenten ab). Inter ist eine
     variable Schrift, eine Datei fuer alle Staerken. Quelle: Google Fonts,
     SIL Open Font License. */
  @font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/inter-var-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;}
  @font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/inter-var-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:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/inter-var-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;}
  @font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/inter-var-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:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/inter-var-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;}
  @font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/inter-var-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:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/poppins-400-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;}
  @font-face{font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/poppins-400-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:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/poppins-500-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;}
  @font-face{font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/poppins-500-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:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/poppins-600-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;}
  @font-face{font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/poppins-600-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:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url(assets/fonts/poppins-800-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;}
  @font-face{font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url(assets/fonts/poppins-800-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;}
:root{
    --red:#DA291C;
    --red-dark:#A81F15;
    --navy:#1B2A4A;
    --cream:#F8F9FA;
    --white:#FFFFFF;
    --slate:#5C6670;
    --slate-light:#E9ECEF;
    --red-light:#FF9A91;
    --navy-rgb:27,42,74;
    --shadow-rgb:15,22,40;
    --font-head:'Poppins', sans-serif;
    --font-body:'Inter', sans-serif;
    /* Radius-Skala */
    --r-sm:6px;    /* Buttons, Inputs, Pills */
    --r-md:12px;   /* Karten */
    --r-lg:16px;   /* Modals, grosse Panels */
    --r-xl:20px;   /* Hero-Flaechen */
    /* Abstands-Skala */
    --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:88px;
    /* Typo-Skala */
    --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:16px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* overflow-x:clip statt hidden — verhindert den horizontalen Überlauf durch das
     geschlossene Mobile-Menü, ohne position:sticky im Header zu zerstören. */
  html{scroll-behavior:smooth; overflow-x:clip;}
  body{font-family:var(--font-body); color:var(--navy); background:var(--white); line-height:1.6;}
  img,.ph{display:block; width:100%; height:100%; object-fit:cover;}
  /* Sprunglink fuer Tastatur und Screenreader: unsichtbar, bis er den Fokus bekommt. */
  .skip-link{position:absolute; left:-9999px; top:12px; z-index:1000; background:var(--navy); color:var(--white); padding:10px 16px; border-radius:var(--r-sm); font-weight:600; text-decoration:none;}
  .skip-link:focus{left:12px; outline:2px solid var(--red); outline-offset:2px;}
  main:focus{outline:none;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:var(--font-head); font-weight:800; line-height:1.15; color:var(--navy);}
  .eyebrow{font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--red);}

  /* Utilities: ersetzen wiederholte Inline-Styles, damit die Typo-Skala an einer Stelle liegt */
  .u-meta{color:var(--slate); font-size:var(--fs-sm);}
  .u-body{color:var(--slate); font-size:var(--fs-base); line-height:1.8;}
  .u-head-left{text-align:left; margin:0; max-width:560px;}
  .u-h-16{font-size:var(--fs-lg); margin-bottom:10px;}
  .u-h-22{font-size:22px; margin-bottom:var(--sp-2);}
  .u-h-28{font-size:28px; margin-top:10px;}

  /* Rechtstexte (Datenschutz): Listen, Links und Cookie-Namen lesbar machen;
     die globale Regel ul{list-style:none} gilt hier nicht. */
  .legal-meta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:32px; color:var(--slate); font-size:var(--fs-md);}
  .legal-intro{margin-bottom:36px;}
  .legal-section{margin-bottom:36px;}
  .legal-section ul{list-style:disc; padding-left:22px; margin:8px 0 10px;}
  .legal-section li{margin-bottom:6px;}
  .legal-section a{color:var(--navy); text-decoration:underline; text-underline-offset:2px;}
  .legal-section strong{color:var(--navy); font-weight:600;}
  .legal-section code{font-size:.88em; background:var(--cream); border:1px solid var(--slate-light); border-radius:4px; padding:1px 5px; color:var(--navy);}

  /* Placeholder photo block */
  .ph{
    background:repeating-linear-gradient(135deg, var(--slate-light), var(--slate-light) 10px, var(--white) 10px, var(--white) 20px);
    display:flex; align-items:center; justify-content:center; text-align:center;
    color:var(--slate); font-size:13px; font-family:var(--font-body); font-weight:500;
    border:1px solid var(--slate-light); position:relative;
  }
  .ph span{background:rgba(255,255,255,.9); padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--slate-light);}
  /* Marken-Platzhalter fuer Fotos, die nachgereicht werden (z. B. Yacht-Fahrten):
     Logo mittig auf Navy statt grauer Streifen. Der Platzhaltertext steht in data-ph,
     damit ct-scan.py den Platz weiterhin als offen zaehlt. */
  .ph.ph-brand{background:radial-gradient(120% 95% at 50% 45%, #2b3f6b 0%, var(--navy) 72%); border:none; padding:0;}
  .ph.ph-brand::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; width:32%; max-width:120px; aspect-ratio:435/307; background:url(assets/logo-mark.svg) center/contain no-repeat; opacity:.92;}
  .extra-opt-photo.ph-brand::before{width:62%;}

  /* Sichtbarer Fokus-Ring fuer Tastaturbedienung, hell wie dunkel */
  :where(a, button, [role=button], summary, [tabindex]):focus-visible{
    outline:2px solid var(--red); outline-offset:3px; border-radius:var(--r-sm);
  }
  header :where(a, button):focus-visible, .mega :where(a, button):focus-visible,
  footer :where(a, button):focus-visible, .cta-banner :where(a, button):focus-visible{
    outline-color:var(--white);
  }

  /* Header */
  header{position:sticky; top:16px; z-index:50; padding:0 24px; margin-top:16px;}
  .header-inner{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:12px 28px; max-width:1200px; margin:0 auto; background:var(--navy); border-radius:999px; box-shadow:0 10px 34px rgba(var(--shadow-rgb),.28);}
  .logo{display:flex; align-items:center; gap:10px;}
  .logo svg{height:32px; width:auto;}
  .logo-word{font-family:var(--font-head); font-weight:800; font-size:19px; color:var(--white); letter-spacing:.01em;}
  nav{display:flex; justify-content:center;}
  nav ul{display:flex; gap:36px; align-items:center;}
  nav li{padding:8px 0;}
  nav>ul>li>a{font-weight:500; font-size:15px; color:var(--white); display:flex; align-items:center; gap:5px;}
  nav>ul>li>a:hover{color:var(--red-light);}
  nav .chev{transition:transform .15s;}
  .trig.active .chev{transform:rotate(180deg);}
  .trig.active{color:var(--red-light);}

  /* Mega menu */
  .mega{display:none; position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); width:calc(100% - 48px); max-width:1200px; background:var(--navy); z-index:60; box-shadow:0 24px 50px rgba(var(--shadow-rgb),.3); border-radius:24px; overflow:hidden;}
  .mega.open{display:block;}
  .mega-close{position:absolute; top:22px; right:32px; width:32px; height:32px; border-radius:50%; border:none; background:transparent; color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .mega-close:hover{color:var(--white);}
  .mega-inner{max-width:1200px; margin:0 auto; padding:36px 32px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:28px 24px;}
  .mega-item{padding-right:16px;}
  .mega-item a{display:block;}
  .mega-item .mega-title{font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--white); margin-bottom:5px;}
  .mega-item .mega-sub{font-size:13px; color:rgba(255,255,255,.6); line-height:1.5;}
  .mega-item a:hover .mega-title{color:var(--red-light);}
  .mega-foot{max-width:1200px; margin:0 auto; padding:0 32px 28px;}
  .mega-foot a{color:var(--white); font-family:var(--font-head); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px;}
  .mega-foot a:hover{color:var(--red-light);}
  .nav-right{display:flex; align-items:center; gap:22px;}
  .nav-right-icons{display:flex; align-items:center; gap:10px;}
  .icon-btn{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); border:1px solid rgba(255,255,255,.3); background:transparent; cursor:pointer;}
  .icon-btn:hover{border-color:var(--white); background:rgba(255,255,255,.08);}

  /* Language switcher */
  .lang-switch{position:relative;}
  .lang-btn{display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--white); font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;}
  .lang-btn:hover{border-color:var(--white); background:rgba(255,255,255,.08);}
  .lang-btn svg{flex-shrink:0;}
  .lang-menu{display:none; position:absolute; top:calc(100% + 12px); right:0; min-width:190px; max-height:320px; overflow-y:auto; background:var(--white); border-radius:var(--r-lg); box-shadow:0 20px 44px rgba(var(--shadow-rgb),.24); padding:8px; z-index:90;}
  .lang-menu.open{display:block;}
  .lang-opt{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:var(--r-md); font-family:var(--font-body); font-size:14px; color:var(--navy); cursor:pointer;}
  .lang-opt:hover{background:var(--cream);}
  .lang-opt.active{background:var(--cream); font-weight:600;}
  .btn{display:inline-block; font-family:var(--font-head); font-weight:600; font-size:14px; padding:11px 22px; border-radius:var(--r-sm); border:none; cursor:pointer; white-space:nowrap;}
  .btn-red{background:var(--red); color:var(--white);}
  .btn-red:hover{background:var(--red-dark);}
  .btn-outline-sm{background:transparent; border:1.5px solid var(--red); color:var(--red); font-family:var(--font-head); font-weight:600; font-size:14px; padding:9px 18px; border-radius:var(--r-sm);}
  .btn-outline-sm:hover{background:var(--red); color:var(--white);}
  .btn-white{background:var(--white); color:var(--navy); font-family:var(--font-head); font-weight:600; font-size:14px; padding:10px 20px; border-radius:var(--r-sm); display:inline-block;}
  .btn-white:hover{background:var(--cream);}

  /* Hero */
  .hero{position:relative; height:600px; margin-top:-82px; z-index:1; background:var(--navy); overflow:hidden;}
  .hero .ph{height:100%; font-size:14px; align-items:flex-start; justify-content:flex-start; padding:20px;}
  /* Hero-Video: Poster liegt immer da (sofortiges Bild), das Video legt sich
     erst nach dem Laden darueber (siehe JS: heroVideo canplay-Listener). So
     gibt es nie eine weisse/leere Flaeche, egal wie langsam die Verbindung ist. */
  .hero-media{position:absolute; inset:0; width:100%; height:100%;}
  .hero-poster,.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .hero-video{opacity:0; transition:opacity .6s ease;}
  .hero-video.is-ready{opacity:1;}

  /* CTA-Banner-Video: gleiches Poster-zuerst-Prinzip wie beim Hero-Video, siehe oben. */
  .cta-media{position:absolute; inset:0; width:100%; height:100%;}
  .cta-poster,.cta-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .cta-video{opacity:0; transition:opacity .6s ease;}
  .cta-video.is-ready{opacity:1;}
  .hero-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--navy-rgb),.75) 0%, rgba(var(--navy-rgb),.15) 45%, rgba(var(--navy-rgb),0) 70%); display:flex; flex-direction:column; justify-content:flex-end; padding:0 0 56px;}
  .hero-inner{max-width:1200px; margin:0 auto; padding:0 32px; width:100%;}
  .hero h1{color:var(--white); font-size:48px; max-width:620px; margin-bottom:24px; text-shadow:0 2px 12px rgba(0,0,0,.2);}
  .search-pill{background:var(--white); border-radius:999px; padding:6px; display:flex; align-items:center; max-width:560px; box-shadow:0 10px 28px rgba(var(--shadow-rgb),.24);}
  .search-pill .field{flex:1; position:relative; display:flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px; transition:background-color .15s ease;}
  .search-pill .field.focused{background:var(--cream);}
  .search-pill .field svg{color:var(--slate); flex-shrink:0;}
  .search-pill input{border:none; background:transparent; font-family:var(--font-body); font-size:15px; outline:none; color:var(--navy); width:100%; color-scheme:light;}
  .search-pill input::placeholder{color:var(--slate); opacity:1;}
  .search-pill button{width:46px; height:46px; border-radius:50%; background:var(--red); border:none; display:flex; align-items:center; justify-content:center; color:var(--white); cursor:pointer; flex-shrink:0;}
  .search-pill button:hover{background:var(--red-dark);}
  .search-dropdown{display:none; position:absolute; top:calc(100% + 14px); left:-14px; min-width:250px; max-height:280px; overflow-y:auto; background:var(--white); border-radius:18px; box-shadow:0 20px 44px rgba(var(--shadow-rgb),.24); padding:8px; z-index:80;}
  .search-dropdown.open{display:block;}
  .search-dropdown .opt{display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:var(--r-md); font-family:var(--font-body); font-size:14px; color:var(--navy); cursor:pointer;}
  .search-dropdown .opt svg{color:var(--red); flex-shrink:0;}
  .search-dropdown .opt:hover{background:var(--cream);}
  .search-dropdown .opt-empty{padding:10px 14px; font-family:var(--font-body); font-size:13px; color:var(--slate);}
  .search-dropdown .opt-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .search-dropdown .opt-title{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .search-dropdown .opt-sub{font-size:11.5px; color:var(--slate); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .search-dropdown .opt-sub b{color:var(--red); font-weight:600;}

  /* Breadcrumb */
  .breadcrumb{font-family:var(--font-body); font-size:13px; color:var(--slate);}
  .breadcrumb a{color:var(--slate);}
  .breadcrumb a:hover{color:var(--navy);}
  .breadcrumb .sep{margin:0 6px; color:var(--slate-light);}
  .breadcrumb .current{color:var(--navy); font-weight:600;}

  /* Destination page hero */
  .dest-hero-section{padding:24px 0 0;}
  /* Hero-Box im Seitenverhaeltnis der Titelbilder (16:9): das Foto wird
     vollstaendig gezeigt, nichts beschnitten, und alle Heros sind gleich gross. */
  .dest-hero{position:relative; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden;}
  /* Beschriftung mittig: oben links steht der Tour-Titel, unten links der
     Destinations-Titel bzw. unten rechts der Preis. Die Mitte ist frei. */
  .dest-hero .ph{height:100%; align-items:center; justify-content:center; padding:16px 24px; border:none;}
  .dest-hero-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--navy-rgb),.78) 0%, rgba(var(--navy-rgb),.2) 55%, rgba(var(--navy-rgb),0) 75%); display:flex; flex-direction:column; justify-content:flex-end; padding:28px 36px;}
  .dest-hero h1{color:var(--white); font-size:40px; margin-bottom:6px; text-shadow:0 2px 12px rgba(0,0,0,.2);}
  .dest-hero p{color:rgba(255,255,255,.85); font-size:16px;}
  .tourpage-price-footnote{color:var(--slate); font-size:12.5px; padding:20px 0 4px; max-width:760px;}

  /* Tour-Hero: Titel oben links, Preis unten rechts, beides direkt auf dem
     Foto statt in einer Karte, damit es sich nicht wie ein zweites UI-Element
     anfuehlt. Eigene Klasse, damit die normalen Destinations-Heros (gleiche
     .dest-hero-Basis) unangetastet bleiben. */
  .tour-hero-overlay{justify-content:space-between; background:linear-gradient(180deg, rgba(var(--navy-rgb),.55) 0%, rgba(var(--navy-rgb),0) 32%, rgba(var(--navy-rgb),0) 66%, rgba(var(--navy-rgb),.6) 100%);}
  /* Zwei Klassen tief, sonst gewinnt .dest-hero h1 (Klasse+Element) und die
     Mobile-Verkleinerung weiter unten greift nie. */
  .tour-hero-overlay .tour-hero-title{color:var(--white); font-size:38px; margin:0; max-width:70%; text-shadow:0 2px 14px rgba(0,0,0,.3);}
  /* Destinationen fuehren nur den Ortsnamen im Hero, der darf groesser stehen */
  .dest-hero-overlay .dest-hero-title{font-size:52px;}
  .tour-hero-price{align-self:flex-end; text-align:right; color:var(--white); text-shadow:0 2px 14px rgba(0,0,0,.3);}
  .tour-hero-price strong{font-family:var(--font-head); font-weight:800; font-size:38px;}
  .tour-hero-price .ast{font-size:20px; margin-left:2px;}

  /* Schwebende Aktionsleiste direkt unter dem Hero-Foto, bleibt beim Scrollen
     unter dem Header sichtbar (top:110px passt zum Header-Offset, den auch
     .tour-addons/.booking-facts schon nutzen). */
  /* Pill wie der Header: gleiche Groesse/Form, damit sie wie dessen kleine
     Schwester wirkt statt wie eine eigene, andersartige UI-Leiste. */
  .tour-quick-actions{position:sticky; top:110px; z-index:30; margin-top:20px;}
  /* Die Pille sitzt in einer normalen .wrap, damit sie exakt so breit ist wie
     das Hero-Foto darueber statt bis an die Fensterkante zu laufen. */
  .tour-quick-actions-bar{display:flex; align-items:stretch; gap:0; background:var(--white); border-radius:999px; overflow:hidden; box-shadow:0 10px 34px rgba(var(--shadow-rgb),.2);}
  .tour-quick-actions-bar > a{flex:1; text-align:center; border-radius:0; padding:15px 16px; font-size:14px;}
  .tour-quick-actions-bar > a.btn-outline-sm{border-width:0; border-right:1px solid var(--slate-light); color:var(--red);}
  .tour-quick-actions-bar > a.btn-outline-sm:hover{background:var(--cream); color:var(--red);}
  .tour-quick-actions-bar > a.btn-red{border-radius:0;}

  /* Fliesstext grundsaetzlich auf 3 Zeilen kuerzen, Rest per Button aufklappbar. */
  .tour-summary-text{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
  .tour-summary-text.expanded{display:block; overflow:visible;}
  .tour-summary-toggle{display:flex; margin-top:10px;}

  /* Tour-Kennzahlen: ein Icon-Kreis pro Punkt, damit
     die Bildsprache konsistent bleibt. Bewusst links/mittig/rechts statt alle
     drei zentriert, das liest sich wie eine kleine Kennzahlen-Leiste. */
  .tour-stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:36px 0; border-top:1px solid var(--slate-light); border-bottom:1px solid var(--slate-light); margin:8px 0 32px;}
  .tour-stat{display:flex; align-items:center; gap:14px;}
  .tour-stat:nth-child(1){justify-content:flex-start; text-align:left;}
  .tour-stat:nth-child(1) .tour-stat-text{align-items:flex-start;}
  .tour-stat:nth-child(2){justify-content:center; text-align:center;}
  .tour-stat:nth-child(2) .tour-stat-text{align-items:center;}
  .tour-stat:nth-child(3){justify-content:flex-end; text-align:right;}
  .tour-stat:nth-child(3) .tour-stat-text{align-items:flex-end;}

  /* Preis-Karte, jetzt oberhalb der Zusatzangebote statt im Stat-Streifen -
     dort hatte sie als vierte, rechtsbuendige Spalte nie richtig Platz. */
  .tour-price-card{display:flex; align-items:center; gap:16px; background:var(--white); border:1px solid var(--slate-light); border-radius:var(--r-md); padding:18px 20px; margin-bottom:20px;}
  .tour-price-card-icon{width:48px; height:48px; border-radius:50%; background:var(--cream); border:1.5px solid var(--red); color:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .tour-price-card-icon svg{width:20px; height:20px;}
  .tour-price-card-body{display:flex; flex-direction:column;}
  .tour-price-card-label{font-family:var(--font-head); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--red);}
  .tour-price-card-value{font-family:var(--font-head); font-weight:800; font-size:22px; color:var(--navy); margin-top:2px;}
  .tour-price-card-unit{display:block; font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--slate); margin-top:1px;}
  .tour-price-card-extra{display:block; font-size:12.5px; color:var(--slate); margin-top:2px;}
  .tour-stat-text{display:flex; flex-direction:column; gap:2px;}
  .tour-stat-icon{width:52px; height:52px; flex-shrink:0; border-radius:50%; background:var(--cream); border:1.5px solid var(--red); color:var(--red); display:flex; align-items:center; justify-content:center;}
  .tour-stat-icon svg{width:22px; height:22px;}
  .tour-stat-label{font-family:var(--font-head); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--red);}
  .tour-stat-value{font-family:var(--font-head); font-weight:800; font-size:24px; color:var(--navy); line-height:1.2;}
  .dest-breadcrumb-wrap{padding:24px 0 0;}

  /* Sights & activities carousels (photo + caption) */
  .sight-grid{display:flex; gap:var(--sp-3); overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 12px; margin:-2px -2px -12px; scrollbar-width:none;}
  .sight-grid::-webkit-scrollbar{display:none;}
  .sight-card{flex:0 0 240px; scroll-snap-align:start; background:var(--white); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--slate-light);}
  .sight-card .ph,.sight-card img{height:160px; font-size:12px; object-fit:cover; display:block; width:100%;}
  .sight-card img{cursor:zoom-in;}
  /* Neuer Kartenstil: Name liegt im Foto, Beschreibung darunter. Bewusst als
     eigener Wrapper, damit die Destinationsseiten mit dem alten Markup
     unveraendert weiterlaufen, bis sie umgestellt sind. */
  .sight-card-photo{position:relative; height:170px;}
  .sight-card-photo img,.sight-card-photo .ph{width:100%; height:100%; object-fit:cover; display:block;}
  .sight-card-photo .ph{font-size:12px;}
  .sight-card-photo img{cursor:zoom-in;}
  .sight-card-shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--navy-rgb),.72), rgba(var(--navy-rgb),0) 55%);}
  .sight-card-photo h3{position:absolute; left:15px; right:15px; bottom:11px; margin:0; font-size:16px; line-height:1.2; color:var(--white); text-shadow:0 2px 10px rgba(0,0,0,.35);}
  .sight-card > p{margin:0; padding:13px 15px 16px; color:var(--slate); font-size:13px; line-height:1.5;}

  /* Auf Zeigergeraeten wird die Karte zur reinen Fotokachel, der Text faehrt
     beim Druberfahren ein. Touchgeraete kennen kein Hover und behalten darum
     den Text unter dem Foto, was auch mit Platzhaltern lesbar bleibt. */
  @media (hover:hover) and (pointer:fine){
    .sight-card{position:relative; height:215px;}
    .sight-card-photo{height:100%;}
    .sight-card-photo h3{bottom:13px; transition:bottom .25s ease;}
    .sight-card-shade{transition:background .25s ease;}
    .sight-card > p{position:absolute; left:15px; right:15px; bottom:13px; padding:0; color:rgba(255,255,255,.92); opacity:0; transition:opacity .25s ease; pointer-events:none; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
    .sight-card:hover .sight-card-shade{background:linear-gradient(0deg, rgba(var(--navy-rgb),.9), rgba(var(--navy-rgb),.35) 72%);}
    .sight-card:hover .sight-card-photo h3{bottom:72px;}
    .sight-card:hover > p{opacity:1;}
  }

  /* All-destinations listing page */
  /* Umschalter Destination/Tour auf der Uebersichtsseite. */
  .browse-switch{display:inline-flex; align-items:center; gap:4px; background:var(--cream); border-radius:999px; padding:4px; margin-bottom:18px;}
  .browse-btn{padding:9px 24px; border-radius:999px; border:none; background:transparent; font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--navy); cursor:pointer; white-space:nowrap;}
  .browse-btn:hover{color:var(--red);}
  .browse-btn.active{background:var(--navy); color:var(--white);}
  .browse-btn.active:hover{color:var(--white);}
  /* Ergebnisraster im gleichen Look wie Startseite und Destinationsseiten:
     Foto mit Text darauf statt umrandeter Karte mit Textkoerper. */
  .dest-card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);}
  .dest-card-grid .dest-card{height:230px;}
  .tour-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);}
  .tour-card-grid .tour-preview{max-width:none; flex:1 1 auto;}
  .dest-search-bar{display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap;}
  .dest-search-input{flex:1; min-width:240px; padding:13px 18px; border-radius:999px; border:1.5px solid var(--slate-light); font-family:var(--font-body); font-size:15px; color:var(--navy); outline:none;}
  .dest-search-input:focus{border-color:var(--navy);}
  .dest-filter-pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px;}
  .filter-pill{padding:8px 16px; border-radius:999px; border:1.5px solid var(--slate-light); background:var(--white); font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--navy); cursor:pointer; white-space:nowrap;}
  .filter-pill:hover{border-color:var(--navy);}
  .filter-pill.active{background:var(--navy); border-color:var(--navy); color:var(--white);}
  .dest-results-summary{display:none; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--navy); margin:-8px 0 22px;}
  .dest-results-summary.visible{display:block;}
  .dest-results-summary .count{font-family:var(--font-head); font-weight:800; color:var(--red);}
  .dest-list-empty{grid-column:1/-1; text-align:center; color:var(--slate); font-size:15px; background:var(--cream); border:1px solid var(--slate-light); border-radius:var(--r-lg); padding:40px 32px; margin-bottom:36px;}
  .dest-list-empty strong{display:block; font-family:var(--font-head); font-weight:800; font-size:19px; color:var(--navy); margin-bottom:8px;}

  /* Tour detail page */
  .tour-included{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4) var(--sp-3); margin-top:32px; padding-top:28px; border-top:1px solid var(--slate-light); text-align:center;}
  .tour-included-label{grid-column:1/-1; font-family:var(--font-head); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--red);}

  /* Startseite "Why Creative Tour": links die Erklaerung, rechts eine kompakte
     Leistungsliste, deren Button die vollstaendige Liste im Popup oeffnet. */
  .why-split{display:grid; grid-template-columns:1.2fr .9fr 1fr; gap:var(--sp-4); align-items:stretch;}
  .why-split-text{align-self:center;}
  .why-split-text h2{margin-top:10px;}
  .why-split-text p{color:var(--slate); font-size:16px; line-height:1.65; margin-top:16px; max-width:46ch;}
  .why-included-card{background:var(--cream); border-radius:var(--r-lg); padding:30px 32px;}
  .why-included-card .tour-included-label{display:block; margin-bottom:6px;}
  .why-included-card .btn-outline-sm{display:block; text-align:center; margin-top:22px;}
  /* Teamfoto-Kachel in der Mitte: "Warum" -> "wer" -> "was". Foto unbeschnitten (4:3), fuehrt zur Ueber-uns-Seite. */
  .why-team-card{position:relative; display:block; min-height:300px; border-radius:var(--r-lg); overflow:hidden; background:var(--navy); color:var(--white); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;}
  .why-team-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%; transition:transform .5s ease;}
  .why-team-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(var(--navy-rgb),0) 55%, rgba(var(--navy-rgb),.82) 100%); pointer-events:none;}
  .why-team-caption{position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:18px 22px 20px;}
  .why-team-label{font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--white); white-space:nowrap;}
  .why-team-link{color:rgba(255,255,255,.9); font-weight:600; font-size:14px; white-space:nowrap;}
  .why-team-card:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(var(--navy-rgb),.18);}
  .why-team-card:hover img{transform:scale(1.03);}
  .why-team-card:hover .why-team-link{text-decoration:underline;}
  /* Zwischen Tablet und Desktop: Text oben ueber die volle Breite, Foto und Leistungen darunter nebeneinander. */
  @media (max-width:1100px){ .why-split{grid-template-columns:1fr 1fr;} .why-split-text{grid-column:1 / -1;} }

  /* Leistungsliste ohne Icon-Kreise: schlichte Haken und feine Trennlinien,
     passend zum uebrigen Satzbild der Seite. */
  .incl-list{list-style:none; margin:0; padding:0;}
  .incl-list li{display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--slate-light); font-family:var(--font-body); font-size:15px; line-height:1.45; color:var(--navy);}
  .incl-list li:last-child{border-bottom:none;}
  .incl-list svg{flex-shrink:0; width:17px; height:17px; color:var(--red); margin-top:2px;}
  .incl-more{margin:16px 0 0; font-family:var(--font-body); font-size:14px; color:var(--slate);}
  .incl-note{margin:16px 0 0; font-family:var(--font-body); font-size:var(--fs-xs); color:var(--slate); line-height:1.5;}
  .incl-modal-cta{display:block; text-align:center; margin-top:26px;}
  /* Popup traegt zwei Spalten, darum breiter als die uebrigen Modals.
     Doppelte Klasse, weil .modal-box weiter unten steht und sonst gewinnt. */
  .modal-box.incl-modal-box{max-width:900px;}
  /* Die Haltung zur Schweiz steht als eigene Aussage vor den Listen, nicht als
     einer von mehreren Punkten darin. */
  .incl-statement{margin:20px 0 0; padding:15px 18px; border-left:3px solid var(--red); background:var(--cream); border-radius:0 var(--r-sm) var(--r-sm) 0; font-family:var(--font-body); font-size:14.5px; line-height:1.6; color:var(--navy);}
  .incl-cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); margin-top:22px;}
  .incl-cols .tour-included-label{display:block; margin-bottom:4px;}
  /* "Gut zu wissen" sind ganze Saetze statt Stichworte: kein Haken davor,
     nur dieselbe Trennlinien-Kadenz wie links, damit beide Spalten ruhen. */
  .incl-notes{list-style:none; margin:0; padding:0;}
  .incl-notes li{padding:13px 0; border-bottom:1px solid var(--slate-light); font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--slate);}
  .incl-notes li:last-child{border-bottom:none;}

  .tour-layout{display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start;}
  .itinerary-list{list-style:none; counter-reset:stop; margin-top:8px;}
  .itinerary-list li{counter-increment:stop; display:flex; align-items:baseline; gap:16px; padding:16px 0; border-bottom:1px solid var(--slate-light);}
  .itinerary-list li:last-child{border-bottom:none;}
  .itinerary-list li::before{content:counter(stop); align-self:flex-start; flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--navy); color:var(--white); font-family:var(--font-head); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;}
  .itinerary-list .stop-name{flex:1; padding-top:5px; font-size:15px; color:var(--navy);}
  .itinerary-list .hidden-stop{display:none;}
  .itinerary-list.expanded .hidden-stop{display:flex;}
  .itinerary-toggle{display:flex; align-items:center; gap:6px; margin-top:16px; background:none; border:none; padding:0; font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--red); cursor:pointer;}
  .itinerary-toggle:hover{text-decoration:underline;}
  .itinerary-toggle svg{transition:transform .2s;}
  .itinerary-toggle.open svg{transform:rotate(180deg);}
  .itinerary-photo .stop-thumb{width:52px; height:52px; flex-shrink:0; border-radius:var(--r-sm); font-size:8px; line-height:1.15;}
  /* Platzhaltertext darf das Kaestchen nicht sprengen: lange Ortsnamen
     (Vierwaldstaettersee) werden notfalls im Wort umbrochen. */
  .itinerary-photo .stop-thumb.ph{overflow:hidden; overflow-wrap:anywhere; padding:3px;}
  /* Nummer, Foto, Name und Dauer auf einer gemeinsamen Mittelachse, statt an
     der Textgrundlinie zu haengen. Nur die Foto-Variante, die Schritt-Listen
     in den Modals bleiben wie sie sind. */
  .itinerary-photo li{align-items:center;}
  .itinerary-photo li::before{align-self:center;}
  .itinerary-photo .stop-name,

  .tour-addons{position:sticky; top:110px;}
  .tour-addons h2{font-size:18px; margin-bottom:16px;}
  /* Add-on-Karte in der Optik der Tour-Vorschau: Titel und Dauer oben links,
     Preis unten rechts. Erste Preiszeile ist der Fixpreis (gross, ueber
     ::first-line), darunter der Zuschlag pro weiterer Person. Feste Hoehe,
     damit Fotos und Platzhalter gleich hoch stehen. */
  .addon-card{background:var(--white); border:1px solid var(--slate-light); border-radius:var(--r-md); overflow:hidden; margin-bottom:12px;}
  .addon-card-photo{position:relative; height:180px;}
  .addon-card-photo img,.addon-card-photo .ph{width:100%; height:100%; object-fit:cover; display:block;}
  .addon-card-photo .ph{font-size:11px;}
  .addon-card-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(var(--navy-rgb),.62) 0%, rgba(var(--navy-rgb),.12) 42%, rgba(var(--navy-rgb),.7) 100%);}
  .addon-card-head{position:absolute; left:14px; right:14px; top:12px;}
  .addon-card-head h3{margin:0; font-size:var(--fs-md); line-height:1.2; color:var(--white); text-shadow:0 2px 10px rgba(0,0,0,.4);}
  .addon-card-head .addon-duration{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:4px 0 0; font-family:var(--font-body); font-size:12px; line-height:1.35; color:rgba(255,255,255,.85); text-shadow:0 2px 10px rgba(0,0,0,.4);}
  .addon-card-price{position:absolute; right:14px; bottom:11px; max-width:72%; text-align:right; font-family:var(--font-body); font-size:12.5px; line-height:1.35; color:rgba(255,255,255,.9); text-shadow:0 2px 10px rgba(0,0,0,.45);}
  .addon-card-price::first-line{font-family:var(--font-head); font-weight:800; font-size:21px; color:var(--white);}
  .addon-duration{font-size:12px; color:var(--slate); margin-bottom:8px;}

  /* Tour-Fotogalerie im Masonry-Format: echte Fotos haben von Natur aus
     unterschiedliche Hoehen (Hoch- und Querformat gemischt), column-count
     laesst jedes Bild seine eigene Hoehe behalten statt sie in ein starres
     Raster zu zwingen. Eine Sektion pro Tour statt getrennter "Orte" und
     "Gaeste"-Raster, mit 20 Fotos macht sich das als eine Wand am besten. */
  .tour-gallery-masonry{column-count:5; column-gap:14px;}
  .tour-gallery-masonry > *{width:100%; margin-bottom:14px; border-radius:var(--r-sm); break-inside:avoid; font-size:10.5px;}
  .tour-gallery-masonry > .ph:nth-child(5n+1){height:260px;}
  .tour-gallery-masonry > .ph:nth-child(5n+2){height:190px;}
  .tour-gallery-masonry > .ph:nth-child(5n+3){height:230px;}
  .tour-gallery-masonry > .ph:nth-child(5n+4){height:170px;}
  .tour-gallery-masonry > .ph:nth-child(5n+5){height:280px;}
  /* Echte Fotos behalten ihr Seitenverhaeltnis und skalieren mit der Spalte,
     nichts wird beschnitten; nur die Platzhalter haben feste Hoehen. */
  .tour-gallery-masonry > img{height:auto;}
  .tour-gallery-masonry img, .itinerary-photo img.stop-thumb{cursor:zoom-in;}

  /* Lightbox: Klick auf ein echtes Tour-Foto vergroessert es */
  .lightbox-overlay{display:none; position:fixed; inset:0; background:rgba(10,14,26,.9); z-index:300; align-items:center; justify-content:center; padding:24px;}
  .lightbox-overlay.open{display:flex;}
  .lightbox-figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:min(100%, 1400px);}
  .lightbox-overlay img{max-width:100%; max-height:82vh; width:auto; height:auto; border-radius:var(--r-md); box-shadow:0 24px 60px rgba(0,0,0,.5);}
  .lightbox-caption{display:flex; align-items:center; justify-content:center; gap:14px; color:rgba(255,255,255,.82); font-size:13px; line-height:1.45; text-align:center; max-width:72ch; padding:0 56px;}
  .lightbox-counter{font-variant-numeric:tabular-nums; white-space:nowrap; opacity:.7;}
  .lightbox-counter:empty{display:none;}
  .lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s;}
  .lightbox-nav:hover{background:rgba(255,255,255,.3);}
  .lightbox-nav[hidden]{display:none;}
  .lightbox-prev{left:20px;}
  .lightbox-next{right:20px;}
  .lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:2px solid var(--white); outline-offset:3px;}
  .tour-gallery-masonry img:focus-visible, .itinerary-photo img.stop-thumb:focus-visible, .sight-card img:focus-visible{outline:3px solid var(--red); outline-offset:2px;}
  .lightbox-close{position:absolute; top:24px; right:24px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .lightbox-close:hover{background:rgba(255,255,255,.3);}

  /* Booking / enquiry form */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; max-width:640px;}
  .form-field{display:flex; flex-direction:column; gap:6px;}
  .form-field.full{grid-column:1/-1;}
  .form-field label{font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--navy);}
  /* :not(...) — sonst greift die Regel (inkl. outline:none) auch auf Checkboxen
     und Radios und nimmt ihnen die Tastatur-Fokusanzeige. */
  .form-field input:not([type=checkbox]):not([type=radio]){padding:12px 16px; border-radius:var(--r-sm); border:1.5px solid var(--slate-light); font-family:var(--font-body); font-size:15px; color:var(--navy); outline:none; width:100%;}
  .form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
  .form-field input:focus{border-color:var(--navy);}
  .form-field select{padding:12px 40px 12px 16px; border-radius:var(--r-sm); border:1.5px solid var(--slate-light); font-family:var(--font-body); font-size:15px; color:var(--navy); outline:none; width:100%; background-color:var(--white); appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A4A' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:14px;}
  .form-field select:focus{border-color:var(--navy);}
  .form-field select:invalid{color:var(--slate);}
  .field-hint{font-size:12px; color:var(--slate);}

  /* Datumsauswahl, eigenes Kalender-Popup statt des nativen Datepickers */
  .date-picker{position:relative;}
  .date-picker-trigger{display:flex; align-items:center; gap:10px; width:100%; padding:12px 16px; border-radius:var(--r-sm); border:1.5px solid var(--slate-light); background:var(--white); font-family:var(--font-body); font-size:15px; color:var(--slate); cursor:pointer; text-align:left;}
  .date-picker-trigger svg{flex-shrink:0; color:var(--red);}
  .date-picker-trigger span.has-value{color:var(--navy); font-weight:600;}
  .date-picker-trigger.open,.date-picker-trigger:focus-visible{border-color:var(--navy); outline:none;}
  .date-picker-trigger.error{border-color:var(--red);}
  .date-picker-pop{position:absolute; top:calc(100% + 8px); left:0; z-index:40; width:min(300px,100%); background:var(--white); border-radius:var(--r-md); box-shadow:0 20px 44px rgba(var(--shadow-rgb),.24); padding:18px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s, transform .15s, visibility .15s;}
  .date-picker-pop.open{opacity:1; visibility:visible; transform:translateY(0);}
  .date-picker-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .date-picker-head span{font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--navy); text-transform:capitalize;}
  .date-picker-nav{width:28px; height:28px; border-radius:50%; border:1px solid var(--slate-light); background:var(--white); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
  .date-picker-nav:hover{background:var(--cream);}
  .date-picker-weekdays{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px;}
  .date-picker-weekdays span{text-align:center; font-size:10.5px; font-weight:600; color:var(--slate); text-transform:uppercase;}
  .date-picker-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
  .cal-day{aspect-ratio:1; border:none; background:none; border-radius:50%; font-family:var(--font-body); font-size:13px; color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .cal-day:hover:not(.disabled){background:var(--cream);}
  .cal-day.selected{background:var(--red); color:var(--white); font-weight:700;}
  .cal-day.disabled{color:var(--slate-light); cursor:not-allowed;}
  .cal-empty{aspect-ratio:1;}
  .phone-input-row{display:flex; gap:8px;}
  .phone-input-row select{width:150px; flex-shrink:0; padding:12px 30px 12px 12px; font-size:var(--fs-sm);}
  .phone-input-row input{flex:1; min-width:0;}
  .form-submit-row{grid-column:1/-1; display:flex; align-items:center; gap:20px; margin-top:8px; flex-wrap:wrap;}

  .tour-context-card{max-width:640px; background:var(--cream); border:1px solid var(--slate-light); border-radius:var(--r-md); overflow:hidden; margin-bottom:28px;}
  .tour-context-card .tour-context-card-photo{width:100%; height:200px; font-size:11px; border-radius:0;}
  .tour-context-card-body{padding:22px 24px 20px;}
  .tour-context-card-body .eyebrow{display:block; margin-bottom:8px;}
  .tour-context-card-body h3{font-size:24px; line-height:1.25; color:var(--navy);}
  .tour-context-date{display:flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--navy);}
  .tour-context-date svg{color:var(--red); flex-shrink:0;}
  .tour-context-card-price{display:flex; align-items:baseline; justify-content:space-between; padding:18px 24px; border-top:1px solid var(--slate-light); background:var(--white);}
  .tour-context-card-price .tour-price{font-family:var(--font-head); font-weight:800; font-size:26px; color:var(--navy);}

  #tour-booking{scroll-margin-top:110px;}

  /* Booking-process explainer modal */
  .modal-overlay{display:none; position:fixed; inset:0; background:rgba(var(--shadow-rgb),.55); z-index:200; align-items:center; justify-content:center; padding:24px;}
  .modal-overlay.open{display:flex;}
  .modal-box{background:var(--white); border-radius:var(--r-lg); max-width:560px; width:100%; max-height:85vh; overflow-y:auto; padding:36px 40px; position:relative;}
  .modal-close{position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:50%; border:none; background:var(--cream); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .modal-close:hover{background:var(--slate-light);}
  .modal-box h2{font-size:22px; margin-bottom:6px;}
  .modal-box .modal-intro{color:var(--slate); font-size:14px; margin-bottom:24px;}
  .modal-box .btn{width:100%; text-align:center; margin-top:24px;}
  .enquiry-modal-box{max-width:1040px; padding:32px 36px 40px;}
  .enquiry-modal-box .eyebrow{display:block;}
  .enquiry-modal-box h2{font-size:28px; margin-top:8px; margin-bottom:22px;}
  @media (max-width:760px){ .enquiry-modal-box{padding:24px 20px 28px;} }

  /* Booking wizard */
  .booking-layout{display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; max-width:980px;}
  .booking-layout > *{min-width:0;}
  .wizard-progress{display:flex; align-items:center; margin-bottom:32px;}
  .wizard-progress-step{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .wizard-progress-num{width:28px; height:28px; border-radius:50%; background:var(--white); border:1.5px solid var(--slate-light); color:var(--slate); font-family:var(--font-head); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background-color .2s, border-color .2s, color .2s;}
  .wizard-progress-label{font-family:var(--font-head); font-weight:600; font-size:12.5px; color:var(--slate); white-space:nowrap; transition:color .2s;}
  .wizard-progress-line{flex:1; height:1.5px; background:var(--slate-light); margin:0 12px; min-width:16px; transition:background-color .2s;}
  .wizard-progress-line.done{background:var(--red);}
  .wizard-progress-step.active .wizard-progress-num,
  .wizard-progress-step.done .wizard-progress-num{background:var(--red); border-color:var(--red); color:var(--white);}
  .wizard-progress-step.active .wizard-progress-label{color:var(--navy);}
  .wizard-step{display:none;}
  .wizard-step.active{display:block;}
  .contact-method-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
  .contact-method-opt{flex:1; min-width:120px;}
  .contact-method-opt input{position:absolute; opacity:0; width:0; height:0;}
  .contact-method-opt label{display:block; text-align:center; padding:12px 10px; border-radius:var(--r-sm); border:1.5px solid var(--slate-light); font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--navy); cursor:pointer;}
  .contact-method-opt input:checked + label{background:var(--navy); border-color:var(--navy); color:var(--white);}
  .consent-row{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13px; color:var(--slate); line-height:1.5;}
  .consent-row input{width:auto; flex-shrink:0; margin-top:3px;}
  .consent-row a{color:var(--navy); font-weight:600; text-decoration:underline;}
  .wizard-nav-row{grid-column:1/-1; display:flex; align-items:center; gap:16px; margin-top:24px;}

  .booking-facts{position:sticky; top:110px;}
  .booking-facts .tour-context-card{max-width:none; margin-bottom:20px;}
  .booking-facts h2{font-size:16px; margin-bottom:14px;}

  .extras-list{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
  .extra-opt{display:flex; align-items:center; gap:12px; border:1.5px solid var(--slate-light); border-radius:var(--r-md); padding:12px 16px; cursor:pointer;}
  .extra-opt:has(input:checked){border-color:var(--navy); background:var(--cream);}
  .extra-opt input{flex-shrink:0; width:18px; height:18px;}
  .extra-opt-photo{width:52px; height:52px; flex-shrink:0; border-radius:var(--r-sm); font-size:8px; line-height:1.2; padding:2px;}
  /* Echtes Bild statt Platzhalter: kein Innenabstand, Motiv formatfuellend. */
  img.extra-opt-photo{padding:0; object-fit:cover;}
  .extra-opt-body{flex:1; min-width:0;}
  .extra-opt-body .extra-title{font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--navy);}
  .extra-opt-body .extra-duration{font-size:12px; color:var(--slate);}
  .extra-opt-price{font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--navy); white-space:nowrap;}
  /* Stueckzahl-Stepper, eigene Zeile unter Titel und Dauer. Erst sichtbar, wenn
     das Extra angehakt ist, sonst suggeriert er eine Auswahl, die noch keine ist. */
  .extra-qty{display:none; align-items:center; gap:10px; margin-top:8px;}
  .extra-opt-qty:has(input:checked) .extra-qty{display:flex;}
  .extra-qty-label{font-size:12px; color:var(--slate);}
  .extra-qty-control{display:inline-flex; align-items:center; gap:2px; border:1.5px solid var(--slate-light); border-radius:999px; background:var(--white); padding:2px;}
  .extra-qty-btn{width:26px; height:26px; flex-shrink:0; border:none; border-radius:50%; background:transparent; color:var(--navy); font-family:var(--font-head); font-size:15px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .extra-qty-btn:hover{background:var(--cream);}
  .extra-qty-input{width:34px; height:26px; border:none; background:transparent; text-align:center; font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--navy); outline:none; -moz-appearance:textfield;}
  .extra-qty-input::-webkit-outer-spin-button,
  .extra-qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
  /* Varianten desselben Angebots stehen nebeneinander, damit erkennbar ist,
     dass man sich zwischen ihnen entscheidet. */
  .extra-variants{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; border:1.5px dashed var(--slate-light); border-radius:var(--r-md); padding:12px;}
  .extra-variants-hint{grid-column:1/-1; font-family:var(--font-head); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--red);}
  .extra-variants .extra-opt{position:relative; flex-direction:column; align-items:stretch; gap:8px; padding:12px 14px;}
  .extra-variants .extra-opt input{position:absolute; top:12px; right:12px;}
  .extra-variants .extra-opt-photo{width:100%; height:64px;}
  .extra-variants .extra-opt-price{white-space:normal;}

  .price-summary-row{display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--slate); padding:3px 0;}
  .price-summary-total{display:flex; justify-content:space-between; font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--navy); padding-top:10px; margin-top:6px; border-top:1px solid var(--slate-light);}
  .price-summary-note.over-capacity{font-size:var(--fs-sm); color:var(--slate); line-height:1.6;}
  .price-summary-note.on-request{font-size:var(--fs-xs); color:var(--slate); line-height:1.5; margin-top:8px;}
  .tour-context-card-price .price-summary-row{font-size:14px;}
  .tour-context-card-price .price-summary-total{flex-direction:column; align-items:flex-start; gap:2px;}
  .tour-context-card-price .price-summary-total span:first-child{font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--slate);}
  .tour-context-card-price .price-summary-total span:last-child{font-size:28px;}

  .form-field textarea{padding:12px 16px; border-radius:var(--r-sm); border:1.5px solid var(--slate-light); font-family:var(--font-body); font-size:15px; color:var(--navy); outline:none; width:100%; resize:vertical; min-height:90px;}
  .form-field textarea:focus{border-color:var(--navy);}

  /* About page: team + fleet */
  /* Teamkarten im Fotolook der uebrigen Seite: Bild fuellt die Kachel, Rolle
     und Name liegen darauf, der ganze Text steckt im Popup. */
  /* Ueber uns: ein grosses Teamfoto, darunter die Biografien in einer Kachel.
     Das Foto behaelt sein Seitenverhaeltnis, es wird nicht beschnitten. */
  .team-photo{border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--sp-3);}
  .team-photo img{display:block; width:100%; height:auto;}
  .team-bios{background:var(--white); border:1px solid var(--slate-light); border-radius:var(--r-md); padding:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
  .team-bio h3{font-size:22px; margin:4px 0 2px;}
  .team-bio-since{display:block; font-family:var(--font-body); font-size:13px; color:var(--slate); margin-bottom:10px;}
  .team-bio p{font-family:var(--font-body); font-size:14px; line-height:1.7; color:var(--slate);}
  .team-role{font-family:var(--font-head); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--red);}

  /* Fleet: Foto als Flaeche mit Text darauf, wie Tour- und Destinationskarten. */
  .fleet-card{position:relative; aspect-ratio:1206/683; max-width:820px; border-radius:var(--r-md); overflow:hidden;}
  .fleet-card img,.fleet-card .ph{width:100%; height:100%; object-fit:cover; object-position:38% 50%; display:block; border:none;}
  .fleet-card-shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--navy-rgb),.86), rgba(var(--navy-rgb),.1) 62%, rgba(var(--navy-rgb),0) 85%);}
  .fleet-card-body{position:absolute; left:32px; right:32px; bottom:26px; z-index:2;}
  .fleet-card-body h3{font-size:23px; margin-bottom:9px; color:var(--white); text-shadow:0 2px 12px rgba(0,0,0,.35);}
  .fleet-card-body p{color:rgba(255,255,255,.88); font-size:var(--fs-sm); line-height:1.65; margin:0; max-width:60ch; text-shadow:0 2px 10px rgba(0,0,0,.3);}

  /* Contact page */
  .contact-info-card{background:var(--cream); border:1px solid var(--slate-light); border-radius:var(--r-md); padding:28px;}
  .contact-info-card h2{font-size:16px; margin-bottom:18px;}
  .contact-channel-item{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
  /* .why-icon ist von der "Why Creative Tour"-Sektion uebernommen, dort steht
     es zentriert in einer Spalte (margin:0 auto 20px). In dieser Zeile hier
     muss das komplett zurueckgesetzt werden, sonst zieht die geerbte
     auto-Margin das Icon aus der Flex-Reihe und Icon/Text stehen nicht mehr
     sauber nebeneinander. */
  .contact-channel-item .why-icon{width:48px; height:48px; margin:0; flex-shrink:0;}
  .contact-channel-item .contact-channel-label{display:block; font-size:12px; color:var(--slate); margin-bottom:2px;}
  .contact-channel-item .contact-channel-value{font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--navy);}
  .contact-social-row{display:flex; gap:12px; margin-top:8px;}
  .contact-social-btn{width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center; transition:background .2s;}
  .contact-social-btn:hover{background:var(--red);}

  /* Thank-you page */
  .thankyou-box{max-width:520px; margin:0 auto; text-align:center; padding:64px 0 120px;}
  .thankyou-box .check-badge{width:72px; height:72px; border-radius:50%; background:var(--cream); border:1px solid var(--slate-light); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; color:var(--red);}
  .thankyou-box h1{font-size:32px; margin-bottom:16px;}
  .thankyou-box p{color:var(--slate); font-size:15px; line-height:1.7; margin-bottom:32px;}

  .tour-dest-badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-top:8px;}
  .tour-dest-badge{position:relative; display:block; height:140px; border-radius:var(--r-md); overflow:hidden;}
  .tour-dest-badge .ph{height:100%; font-size:11px;}
  .tour-dest-badge .dest-shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--navy-rgb),.7), transparent 60%); z-index:1;}
  .tour-dest-badge .dest-name{position:absolute; left:14px; bottom:12px; right:14px; z-index:2; color:var(--white); font-family:var(--font-head); font-weight:600; font-size:15px;}

  /* Sections */
  section{padding:88px 0;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 48px;}
  .section-head h2{font-size:36px; margin-top:10px;}
  .section-head p{color:var(--slate); font-size:16px; margin-top:12px;}

  .section-row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:var(--sp-5);}
  .section-row .section-head{text-align:left; margin:0; max-width:560px;}

  /* Why us */
  .why-icon{width:64px; height:64px; border-radius:50%; background:var(--cream); border:1.5px solid var(--red); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--red);}

  /* Tour cards */
  .bg-cream{background:var(--cream);}
  .carousel-arrows{display:flex; gap:10px; flex-shrink:0;}
  .arrow-btn{width:40px; height:40px; border-radius:50%; border:1px solid var(--slate-light); background:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy);}
  .arrow-btn:hover{border-color:var(--navy);}
  .tour-card{background:var(--white); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--slate-light); transition:box-shadow .2s; display:flex; flex-direction:column;}
  .tour-card:hover{box-shadow:0 12px 30px rgba(var(--navy-rgb),.12);}
  .tour-card .ph{height:190px; font-size:13px; flex-shrink:0;}
  .tour-price{font-family:var(--font-head); font-weight:800; font-size:20px; color:var(--navy);}
  .tour-price small{font-size:12px; font-weight:500; color:var(--slate);}
  /* Tour-Vorschau auf den Destinationsseiten: nur Foto mit Name oben links und
     Preis unten rechts, Button darunter. Eigene Klasse, eine einzelne Tour sass
     dadurch schmal und linksbuendig in einem 900px breiten Feld. */
  .tour-preview-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); max-width:900px; margin:0 auto;}
  .tour-preview{display:flex; flex-direction:column; flex:1 1 360px; max-width:520px;}
  .tour-preview-photo{position:relative; height:280px; border-radius:var(--r-md); overflow:hidden;}
  .tour-preview-photo img,.tour-preview-photo .ph{width:100%; height:100%; object-fit:cover;}
  .tour-preview-overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:20px 22px; background:linear-gradient(180deg, rgba(var(--navy-rgb),.55) 0%, rgba(var(--navy-rgb),0) 38%, rgba(var(--navy-rgb),0) 60%, rgba(var(--navy-rgb),.6) 100%);}
  .tour-preview-title{font-family:var(--font-head); font-weight:800; font-size:26px; line-height:1.15; color:var(--white); max-width:78%; text-shadow:0 2px 14px rgba(0,0,0,.35);}
  .tour-preview-price{align-self:flex-end; font-family:var(--font-body); font-size:14px; color:var(--white); text-shadow:0 2px 14px rgba(0,0,0,.35);}
  .tour-preview-price strong{font-family:var(--font-head); font-weight:800; font-size:24px; margin-left:4px;}
  .tour-preview .tour-cta{margin-top:12px;}
  /* Startseite: dieselben Tour-Previews wie auf den Destinationsseiten, aber
     horizontal scrollbar statt zentriert, weil dort mehrere Touren stehen. */
  .tour-preview-row{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 12px; margin:-2px -2px -12px; scrollbar-width:none;}
  .tour-preview-row::-webkit-scrollbar{display:none;}
  .tour-preview-row .tour-preview{flex:0 0 380px; max-width:none; scroll-snap-align:start;}
  /* Kleinere Variante fuer den Nebenabschnitt "Zuletzt angesehen". */
  .tour-preview-row.sm .tour-preview{flex-basis:300px;}
  .tour-preview-row.sm .tour-preview-photo{height:200px;}
  .tour-preview-row.sm .tour-preview-title{font-size:20px;}
  .tour-preview-row.sm .tour-preview-price strong{font-size:19px;}
  /* "Eigene Tour planen" hat kein Foto und keinen Preis: gleiche Kachelgroesse,
     aber gefuellte Flaeche statt Bild. */
  .tour-preview-custom{height:280px; border-radius:var(--r-md); background:var(--navy); color:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:26px;}
  .tour-preview-custom svg{color:rgba(255,255,255,.7);}
  .tour-preview-custom h3{font-size:22px; margin:0;}
  .tour-preview-custom p{font-size:14px; color:rgba(255,255,255,.75); margin:0; max-width:230px;}
  .tour-cta{margin-top:14px; display:block; text-align:center; background:var(--navy); color:var(--white); font-family:var(--font-head); font-weight:600; font-size:14px; padding:11px; border-radius:var(--r-sm);}
  .tour-cta:hover{background:var(--red);}

  /* Destinations */
  /* Startseite: Destinationen laufen als Slideshow statt als Raster, damit alle
     neun Ziele erreichbar sind, ohne die Seite in die Hoehe zu ziehen. */
  .dest-row{display:flex; gap:var(--sp-3); overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 12px; margin:-2px -2px -12px; scrollbar-width:none;}
  .dest-row::-webkit-scrollbar{display:none;}
  .dest-row .dest-card{flex:0 0 260px; scroll-snap-align:start; height:260px;}
  .dest-card{position:relative; border-radius:var(--r-md); overflow:hidden; height:200px;}
  .dest-card .ph{height:100%; font-size:12px;}
  .dest-name{position:absolute; left:16px; right:16px; bottom:14px; color:var(--white); font-family:var(--font-head); font-weight:600; font-size:17px; z-index:2; display:flex; flex-direction:column; gap:3px;}
  .dest-name small{font-family:var(--font-body); font-weight:400; font-size:var(--fs-xs); color:rgba(255,255,255,.8);}
  .dest-shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--navy-rgb),.65), transparent 60%); z-index:1;}

  /* Trust */

  /* Reviews (Google / Viator / GetYourGuide) */
  .reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:36px;}
  .reviews-grid-2{grid-template-columns:repeat(2,1fr); gap:80px;}
  .review-card{background:var(--white); border:1px solid var(--slate-light); border-radius:var(--r-md); padding:26px 24px; display:flex; flex-direction:column;}
  .review-card-widget{padding:8px; justify-content:center; min-height:120px; background:none; border:none;}

  /* CTA banner */
  .cta-banner{position:relative; height:380px; border-radius:0; overflow:hidden; background:var(--navy);}
  .cta-shade{position:absolute; inset:0; background:rgba(var(--navy-rgb),.7); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px;}
  .cta-shade h2{color:var(--white); font-size:34px; max-width:560px; margin-bottom:20px;}
  .cta-shade .btn{margin-top:4px;}

  /* Footer */
  footer{background:var(--navy); color:var(--white); padding:64px 0 24px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12);}
  .footer-logo svg{height:32px; width:auto;}
  .footer-about{color:rgba(255,255,255,.82); font-size:14px; margin-top:16px; max-width:280px;}
  .footer-col h4{font-family:var(--font-head); font-weight:600; font-size:14px; margin-bottom:16px; letter-spacing:.02em;}
  .footer-col ul li{margin-bottom:10px;}
  .footer-col a{color:rgba(255,255,255,.82); font-size:14px;}
  .footer-col a:hover{color:var(--white);}
  /* "Cookie-Einstellungen" ist ein Knopf (oeffnet das Banner, fuehrt nirgends
     hin), sieht aber aus wie die Links daneben. */
  .footer-cookie-btn{background:none; border:none; padding:0; font:inherit; font-size:14px; color:rgba(255,255,255,.82); cursor:pointer; text-align:left;}
  .footer-cookie-btn:hover{color:var(--white);}

  /* Cookie-Einwilligung ("Guetzli-Banner", consent.js). Nicht-modale Karte
     unten links: die Seite bleibt benutzbar, "Nur die noetigen" ist so gross
     wie "Alle Guetzli nehmen" (Ablehnen muss so leicht sein wie Zustimmen). */
  .consent{position:fixed; left:16px; bottom:16px; z-index:900; width:min(440px, calc(100% - 32px)); max-height:calc(100vh - 32px); overflow-y:auto; background:var(--white); color:var(--navy); border-radius:var(--r-lg); box-shadow:0 18px 50px rgba(var(--shadow-rgb),.28); padding:22px 24px 16px; opacity:0; transform:translateY(16px); transition:opacity .25s ease, transform .25s ease;}
  .consent.open{opacity:1; transform:none;}
  .consent[hidden], .consent [hidden]{display:none !important;}
  .consent-head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
  .consent-head svg{flex:none;}
  .consent-title{font-size:20px; font-weight:700;}
  .consent-text{font-size:var(--fs-md); color:var(--slate); line-height:1.55;}
  .consent-text a{color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
  .consent-settings{display:grid; gap:10px; margin-top:14px;}
  .consent-opt{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--slate-light); border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--slate); line-height:1.5; cursor:pointer;}
  .consent-opt:has(input:disabled){cursor:default; background:var(--cream);}
  .consent-opt input{flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--red); cursor:inherit;}
  .consent-opt strong{display:block; margin-bottom:2px; font-family:var(--font-head); font-weight:600; font-size:var(--fs-md); color:var(--navy);}
  .consent-actions{display:flex; gap:10px; margin-top:18px;}
  .consent-actions .btn{flex:1 1 0; text-align:center; white-space:normal; line-height:1.3;}
  .consent-btn-alt{background:var(--white); color:var(--navy); border:1.5px solid var(--navy); padding:9.5px 20px;}
  .consent-btn-alt:hover{background:var(--cream);}
  .consent .btn-red:hover{background:var(--red-dark);}
  .consent-link{display:block; margin:12px auto 0; padding:4px 8px; background:none; border:none; font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; color:var(--slate); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
  .consent-link:hover{color:var(--navy);}
  .consent :focus-visible{outline:2px solid var(--red); outline-offset:2px;}
  @media (max-width:560px){
    .consent{left:8px; right:8px; bottom:8px; width:auto; max-height:calc(100vh - 16px); padding:18px 18px 12px;}
    .consent-title{font-size:18px;}
    .consent-actions{flex-direction:column; gap:8px;}
  }
  @media (prefers-reduced-motion:reduce){ .consent{transition:none;} }
  /* Abschlusszeile je Spalte: sekundaer gesetzt, damit die vier Eintraege darueber fuehren. */
  .footer-col .footer-all{display:inline-block; margin-top:4px; color:rgba(255,255,255,.55); font-family:var(--font-head); font-weight:600; font-size:13px;}
  .footer-col .footer-all:hover{color:var(--white);}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:var(--fs-sm); color:rgba(255,255,255,.78);}
  .socials{display:flex; gap:14px;}
  .socials a{width:32px; height:32px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.82);}
  .socials a svg{display:block;}
  .socials a:hover{border-color:var(--white); background:rgba(255,255,255,.1);}
  /* Eigener Tooltip statt title-Attribut: das native erscheint erst nach rund
     einer Sekunde und laesst sich nicht an die Seite anpassen. Text kommt aus
     data-tip, damit kein zusaetzliches Markup noetig ist. */
  .has-tip{position:relative;}
  .has-tip::after,.has-tip::before{position:absolute; left:50%; opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease;}
  .has-tip::after{content:attr(data-tip); bottom:calc(100% + 9px); transform:translate(-50%,4px); white-space:nowrap; background:var(--navy); color:var(--white); font-family:var(--font-body); font-size:12px; font-weight:500; line-height:1; padding:7px 10px; border-radius:var(--r-sm); box-shadow:0 8px 22px rgba(var(--shadow-rgb),.3); z-index:60;}
  .has-tip::before{content:''; bottom:calc(100% + 4px); transform:translate(-50%,4px); border:5px solid transparent; border-top-color:var(--navy); z-index:60;}
  .has-tip:hover::after,.has-tip:hover::before,.has-tip:focus-visible::after,.has-tip:focus-visible::before{opacity:1; transform:translate(-50%,0);}
  /* Im dunklen Fussbereich braucht die Blase Kontrast zum Navy-Hintergrund. */
  footer .has-tip::after{background:var(--white); color:var(--navy);}
  footer .has-tip::before{border-top-color:var(--white);}
  @media (prefers-reduced-motion:reduce){
    .has-tip::after,.has-tip::before{transition:none;}
  }

  /* ---------- Mobile navigation (burger + drawer) ---------- */
  .burger{display:none; flex-direction:column; justify-content:center; gap:4px; width:40px; height:40px; padding:0 9px; background:none; border:none; cursor:pointer; flex-shrink:0;}
  .burger span{display:block; height:2px; width:100%; background:var(--white); border-radius:2px;}

  .mnav-scrim{position:fixed; inset:0; background:rgba(var(--navy-rgb),.5); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:998;}
  .mnav-scrim.open{opacity:1; pointer-events:auto;}
  /* Schwebendes Panel statt buendig anliegender Platte: nimmt die gerundete,
     abgesetzte Formensprache von Header-Pille und Karten auf. */
  .mnav{position:fixed; top:10px; right:10px; bottom:10px; width:min(86vw,350px); background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 24px 60px rgba(var(--shadow-rgb),.34); transform:translateX(calc(100% + 18px)); transition:transform .34s cubic-bezier(.22,1,.36,1); z-index:999; display:flex; flex-direction:column;}
  .mnav.open{transform:translateX(0);}
  .mnav-head{display:flex; align-items:center; justify-content:space-between; padding:17px 20px; background:var(--navy); color:var(--white); flex-shrink:0;}
  .mnav-brand{font-family:var(--font-head); font-weight:800; font-size:15px; letter-spacing:.04em;}
  .mnav-close{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
  .mnav-close:active{background:rgba(255,255,255,.24);}
  .mnav-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 0 12px;}
  .mnav-group{padding:14px 20px; border-bottom:1px solid var(--slate-light);}
  .mnav-group:last-child{border-bottom:none;}
  .mnav-label{font-family:var(--font-head); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:10px;}
  /* Zeilen mit Chevron rechts, damit sie als antippbar lesbar sind. */
  .mnav-body a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; font-size:15.5px; color:var(--navy); font-weight:500;}
  .mnav-body a::after{content:''; flex-shrink:0; width:7px; height:7px; border-right:1.8px solid var(--slate-light); border-top:1.8px solid var(--slate-light); transform:rotate(45deg); transition:border-color .18s ease, transform .18s ease;}
  .mnav-body a:active{color:var(--red);}
  .mnav-body a:active::after{border-color:var(--red); transform:rotate(45deg) translate(2px,-2px);}
  /* Destinationen und Touren klappen auf, damit der Drawer kurz bleibt.
     grid-template-rows 0fr/1fr animiert die echte Inhaltshoehe ohne Magic Number. */
  .mnav-acc-head{display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:0; background:none; border:none; font:inherit; text-align:left; cursor:pointer;}
  .mnav-acc-head .mnav-label{margin-bottom:0;}
  .mnav-acc-chev{flex-shrink:0; color:var(--slate); transition:transform .26s ease;}
  .mnav-acc-head[aria-expanded="true"] .mnav-acc-chev{transform:rotate(180deg); color:var(--red);}
  .mnav-acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease;}
  .mnav-acc-head[aria-expanded="true"] + .mnav-acc-body{grid-template-rows:1fr;}
  .mnav-acc-inner{overflow:hidden; min-height:0;}
  .mnav-all{font-size:13.5px !important; color:var(--slate) !important; padding-top:11px !important;}
  .mnav-top{font-family:var(--font-head); font-weight:600; font-size:17px !important;}
  .mnav-foot{padding:16px 20px; border-top:1px solid var(--slate-light); background:var(--cream); flex-shrink:0;}
  .mnav-foot .btn-red{display:block; text-align:center; width:100%;}
  .mnav-contact{margin-top:13px; display:flex; flex-direction:column; gap:5px;}
  .mnav-contact a{font-size:var(--fs-sm); color:var(--slate);}
  /* Gruppen laufen beim Oeffnen kurz nacheinander ein, passend zur ruhigen
     Bewegung der uebrigen Seite. */
  .mnav-group,.mnav-foot{opacity:0; transform:translateX(14px); transition:opacity .32s ease, transform .32s ease;}
  .mnav.open .mnav-group,.mnav.open .mnav-foot{opacity:1; transform:none;}
  .mnav.open .mnav-group:nth-child(1){transition-delay:.10s;}
  .mnav.open .mnav-group:nth-child(2){transition-delay:.15s;}
  .mnav.open .mnav-group:nth-child(3){transition-delay:.20s;}
  .mnav.open .mnav-foot{transition-delay:.24s;}
  @media (prefers-reduced-motion:reduce){
    .mnav{transition:none;}
    .mnav-group,.mnav-foot{opacity:1; transform:none; transition:none;}
    .mnav-acc-body,.mnav-acc-chev{transition:none;}
  }

  @media (max-width:900px){
    .tour-included{grid-template-columns:repeat(2,1fr);}
    .why-split{grid-template-columns:1fr; gap:var(--sp-4);}
    .why-team-card{min-height:0; aspect-ratio:4/3;}
    .incl-cols{grid-template-columns:1fr; gap:var(--sp-4);}
    .tour-hero-overlay .tour-hero-title{font-size:30px; max-width:72%;}
    .dest-hero-overlay .dest-hero-title{font-size:38px;}
    .tour-hero-price strong{font-size:28px;}
    nav{display:none;}
    .burger{display:flex;}
    .header-inner{gap:10px;}
    .nav-right{gap:8px;}
    .nav-right .btn-white{display:none;}      /* Enquire lebt im Drawer */
    .nav-right-icons{gap:6px;}
    .tour-layout, .form-grid, .booking-layout{grid-template-columns:1fr;}
    .team-bios,.reviews-grid,.reviews-grid-2{grid-template-columns:1fr;}
    .team-bios{padding:24px; gap:28px;}
    .fleet-card{aspect-ratio:auto; height:260px;}
    .fleet-card-body{left:22px; right:22px; bottom:20px;}
    .booking-facts{position:static;}
    .tour-addons{position:static;}
    .booking-layout .tour-context-card{order:-1;}
    .dest-card-grid{grid-template-columns:repeat(2,1fr);}
    .tour-card-grid{grid-template-columns:repeat(2,1fr);}
    .tour-gallery-masonry{column-count:3;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .hero h1{font-size:36px;}
  }

  @media (max-width:560px){
    /* Drei Schritte mit vollen Beschriftungen passen nicht in die Popup-Breite.
       Darum nur die Beschriftung des aktiven Schritts zeigen, die anderen
       bleiben als nummerierte Punkte erkennbar. */
    .wizard-progress-step{min-width:0;}
    .wizard-progress-label{display:none; white-space:normal; font-size:11.5px; line-height:1.2;}
    .wizard-progress-step.active .wizard-progress-label{display:block;}
    .wizard-progress-line{margin:0 8px; min-width:10px;}
    .wrap{padding-left:20px; padding-right:20px;}
    header{padding:0 12px;}
    .header-inner{padding:10px 14px; gap:8px;}
    .logo{gap:7px;}
    .logo svg{width:26px; height:26px;}
    .logo-word{font-size:13px; white-space:nowrap;}
    .icon-btn{width:32px; height:32px;}
    .icon-btn svg{width:15px; height:15px;}
    .lang-btn{height:32px; padding:0 9px; font-size:12px;}
    .burger{width:32px; padding:0 6px;}
    .hero h1{font-size:30px;}
    .search-pill{flex-direction:column; align-items:stretch; border-radius:18px; padding:6px;}
    .search-pill .field{border-bottom:1px solid var(--slate-light);}
    .search-pill button{width:100%; border-radius:var(--r-md); margin-top:6px;}
    .dest-card-grid, .tour-card-grid, .footer-grid, .tour-included{grid-template-columns:1fr;}
    .tour-gallery-masonry{column-count:2;}
    .lightbox-overlay{padding:12px;}
    .lightbox-nav{width:40px; height:40px;}
    .lightbox-prev{left:6px;}
    .lightbox-next{right:6px;}
    .lightbox-caption{padding:0 8px; font-size:12px;}
    /* Extras: der Preis darf nicht umbrechen und sprengte darum die Zeile im
       schmalen Popup. Auf Mobile rutscht er unter den Text, buendig mit ihm. */
    .extra-opt{flex-wrap:wrap;}
    .extra-variants{grid-template-columns:1fr;}
    .extra-opt-price{flex:1 0 calc(100% - 82px); margin-left:82px; white-space:normal;}
    .extra-qty{flex-wrap:wrap; gap:4px 10px;}

    .tour-preview-photo{height:220px;}
    .tour-preview-title{font-size:21px;}
    .tour-preview-price strong{font-size:20px;}
    .tour-stats-row{grid-template-columns:1fr; gap:20px; text-align:left;}
    .tour-stat,.tour-stat:nth-child(2),.tour-stat:nth-child(3){justify-content:flex-start; text-align:left;}
    .tour-stat-text,.tour-stat:nth-child(2) .tour-stat-text,.tour-stat:nth-child(3) .tour-stat-text{align-items:flex-start;}
    /* Gestapelt ist die 999px-Pille eine unfoermige Lutschtablette, darum hier
       eine ruhige Karte mit moderatem Radius. */
    .tour-quick-actions-bar{flex-direction:column; border-radius:var(--r-lg);}
    .tour-quick-actions-bar > a{padding:13px 16px;}
    .tour-quick-actions-bar > a.btn-outline-sm{border-right:none; border-bottom:1px solid var(--slate-light);}
    .tour-quick-actions{top:96px; margin-top:16px;}

    /* Kennzahlen kompakter, sonst fressen drei gestapelte Zeilen einen halben
       Bildschirm, bevor der eigentliche Inhalt beginnt. */
    .tour-stats-row{gap:14px; padding:24px 0; margin:4px 0 24px;}
    .tour-stat-icon{width:44px; height:44px;}
    .tour-stat-icon svg{width:19px; height:19px;}
    .tour-stat{gap:12px;}
    .tour-stat-value{font-size:20px;}

    /* Itinerary: enger takten, damit der Stop-Name nicht auf ~160px zusammen-
       gequetscht wird und lange Namen vierzeilig umbrechen. */
    .itinerary-photo li{gap:10px; padding:13px 0;}
    .itinerary-photo li::before{width:26px; height:26px; font-size:12px;}
    .itinerary-photo .stop-thumb{width:46px; height:46px;}
    .itinerary-photo .stop-name{font-size:14.5px; min-width:0;}
    .footer-bottom{flex-direction:column; gap:12px; text-align:center;}
    h1{font-size:30px;} h2{font-size:24px;}

    /* Hero-Titel: 38px bei 72% Breite reichten fuer "Liechtenstein" oder
       "Interlaken & Lauterbrunnen" nicht, der Titel lief rechts aus dem Bild.
       Auf Mobile darf er die volle Breite nutzen und wird etwas kleiner. */
    .tour-hero-overlay .tour-hero-title{font-size:26px; max-width:100%;}
    .dest-hero-overlay .dest-hero-title{font-size:32px;}   /* nach der Tour-Regel, sonst gewinnt sie */
    .dest-hero-overlay{padding:22px 20px;}

    /* Zeile "Ueberschrift + Pfeile/Button": bei 335px Innenbreite passten
       beide nicht nebeneinander, die Pfeile ragten aus der Seite und die
       Startseite liess sich seitlich scrollen. Pfeile rutschen darunter. */
    .section-row{flex-wrap:wrap; gap:14px 24px; align-items:flex-start;}
    .section-row .section-head{max-width:100%;}

    /* Tap-Ziele: Textlinks im Footer und die "Mehr lesen"-Schalter waren
       unter 30px hoch und auf dem Handy schwer zu treffen. */
    .itinerary-toggle{min-height:36px;}
    .footer-col a, .footer-col .footer-all, .footer-cookie-btn{display:inline-block; padding:5px 0;}
    .contact-channel-item .contact-channel-value{display:inline-block; padding:3px 0;}
  }