:root{
    --sea:#0F2A54;
    --sea-bright:#3A6199;
    --sea-deep:#041639;
    --coral:#FF6F5E;
    --coral-deep:#E8503E;
    --sun:#DDAD64;
    --sun-deep:#C08F45;
    --sand:#FCE8C8;
    --leaf:#0F2A54;
    --leaf-bright:#3A6199;
    --ink:#F0F4FA;
    --paper:#041639;
    --card:#0B2247;
    --line: rgba(255,255,255,0.12);
    --ink-fixed-dark:#16302E;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Nunito Sans',sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{font-family:'Poppins',sans-serif;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  svg{display:block;}
  button{font-family:inherit;}

  /* ---- Top nav ---- */
  .topbar{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 6vw;
    background:rgba(4,22,57,0.85);
    backdrop-filter:blur(14px) saturate(160%);
    border-bottom:1px solid var(--line);
  }
  .brand{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:10px;color:#fff;}
  .brand-mark{
    width:96px;height:96px;border-radius:14px;flex-shrink:0;
    background:url('bilder/logo.png') center/cover no-repeat;
    background-color:var(--sea-deep);
  }
  .topbar-links{display:flex;gap:6px;font-size:0.87rem;font-weight:600;}
  .topbar-links a{opacity:0.75;transition:all .2s;padding:9px 16px;border-radius:100px;}
  .topbar-links a{color:#fff;}
  .topbar-links a:hover{opacity:1;background:rgba(255,255,255,0.1);color:#fff;}
  .admin-link{
    font-size:0.78rem;padding:10px 18px;border-radius:100px;
    background:var(--sun);color:var(--sea-deep);cursor:pointer;
    transition:opacity .2s;font-weight:700;
  }
  .admin-link:hover{opacity:0.85;}

  /* Instagram/WhatsApp als kleine Icon-Buttons in der Desktop-Kopfzeile — die Leiste
     ist ohnehin fixiert, sie "fahren" also nie mit. Auf Mobile ausgeblendet (siehe
     Media Query weiter unten), dort bleibt es wie gehabt nur im Hamburger-Menü. */
  .topbar-social{display:flex;gap:8px;}
  .topbar-social a{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.1);color:#fff;transition:all .2s;
  }
  .topbar-social a:hover{background:rgba(255,255,255,0.2);transform:translateY(-1px);}
  .topbar-social svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .topbar-social a[aria-label="WhatsApp"] svg{fill:#fff;stroke:none;}

  .burger{display:none;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;}
  /* Nur auf der Startseite: Burger-Menü bleibt für Ablauf/Gäste/FAQ/Kontakt/
     Social immer sichtbar (auch am Desktop). Auf Mobile ersetzt es zusätzlich
     die Kategorie-Links komplett (die stehen dort im Kompass/Burger, nicht
     mehr als eigene Textlinks). Am Desktop (ab 721px) kommen die Kategorie-
     Links + Über uns direkt neben dem Logo zurück, siehe Media Query unten. */
  .home .topbar-links{display:none;}
  .home .burger{display:flex;}
  @media (min-width:721px){
    .home .compass{display:none;}
    .home .topbar-links{display:flex;}
  }
  .burger span{width:16px;height:1.8px;background:var(--ink);display:block;border-radius:2px;}
  .mobile-menu{
    display:none;position:fixed;top:66px;left:0;right:0;z-index:49;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:10px 6vw 20px;flex-direction:column;gap:2px;
    box-shadow:0 12px 24px rgba(0,0,0,0.08);
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{padding:13px 6px;font-size:1rem;font-weight:600;border-bottom:1px solid var(--line);}
  .mobile-menu-social{display:flex;align-items:center;gap:10px;}
  .mobile-menu-social svg{width:20px;height:20px;flex-shrink:0;}
  .mobile-menu-social svg:not([fill]){stroke:var(--sun);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .mobile-menu a:last-child{border-bottom:none;}

  /* ---- Journey nav ---- */
  .compass{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:17px;}
  .compass-dot{display:flex;align-items:center;gap:10px;cursor:pointer;justify-content:flex-end;}
  .compass-label{
    font-size:0.7rem;opacity:0;transform:translateX(6px);transition:opacity .25s, transform .25s;
    white-space:nowrap;font-weight:700;
    background:var(--card);padding:5px 12px;border-radius:100px;box-shadow:0 2px 10px rgba(0,0,0,0.1);
  }
  .compass-dot:hover .compass-label,.compass-dot.active .compass-label{opacity:1;transform:translateX(0);}
  /* Ring in der jeweiligen Kategorie-Farbe, auch im Ruhezustand gut sichtbar auf
     dunklem Hintergrund — vorher war das ein fast unsichtbarer dunkler Rand aus
     der Zeit vor dem Blau-Redesign. */
  .compass-circle{width:10px;height:10px;border-radius:50%;border:2px solid color-mix(in srgb, var(--current,var(--sea)) 55%, transparent);transition:all .3s;background:transparent;}
  .compass-dot:hover .compass-circle{border-color:var(--current,var(--sea));}
  .compass-dot.active .compass-circle{background:var(--current,var(--sea));border-color:var(--current,var(--sea));box-shadow:0 0 0 4px color-mix(in srgb, var(--current,var(--sea)) 22%, transparent);}

  /* ---- Schwebender WhatsApp-Button ---- */
  /* Nur auf dem Handy sichtbar — auf dem Desktop übernehmen die neuen Icons
     oben in der Kopfzeile diese Funktion (siehe .topbar-social). */
  .whatsapp-float{
    display:none;
    position:fixed;right:22px;bottom:24px;z-index:41;
    width:52px;height:52px;border-radius:50%;
    background:#25D366;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.28);transition:transform .2s, box-shadow .2s;
  }
  .whatsapp-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 26px rgba(0,0,0,0.34);}
  .whatsapp-float svg{width:26px;height:26px;}

  /* ---- Hero ---- */
  .hero{
    min-height:96vh;display:flex;flex-direction:column;justify-content:center;
    padding:130px 6vw 8px;position:relative;overflow:hidden;
    background:linear-gradient(150deg, var(--sea-deep) 0%, var(--sea) 55%, var(--sea-bright) 100%);
    color:#fff;
  }
  .hero-bg{position:absolute;inset:0;z-index:0;}
  /* Bild bleibt farbig (kein luminosity-Blend mehr, das wirkte ausgewaschen);
     die Lesbarkeit kommt über einen abgestuften Verlauf, der links dunkler ist. */
  .hero-bg img{width:100%;height:100%;object-fit:cover;}
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:
      /* Reine, nicht-diagonale Abdunklung ganz unten — überschreibt garantiert
         jede Aufhellung der schrägen Verläufe darunter, damit der Übergang
         zum Trust-Strip über die volle Breite hinweg gleichmäßig dunkel ist. */
      linear-gradient(180deg, transparent 0%, transparent 65%, rgba(4,22,57,1) 100%),
      linear-gradient(100deg, rgba(4,22,57,0.94) 0%, rgba(10,28,57,0.78) 38%, rgba(15,42,84,0.42) 68%, rgba(58,97,153,0.22) 100%),
      linear-gradient(180deg, rgba(4,22,57,0.55) 0%, rgba(4,22,57,0) 28%, rgba(4,22,57,0) 60%, rgba(4,22,57,1) 100%);
  }
  .hero-blob{position:absolute;border-radius:50%;filter:blur(90px);z-index:1;}
  .blob1{width:480px;height:480px;background:var(--sea-bright);top:-140px;right:-100px;opacity:0.45;}
  .blob2{width:380px;height:380px;background:var(--sun);bottom:160px;left:-90px;opacity:0.28;}
  .hero-content{position:relative;z-index:2;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;
    opacity:0.92;margin-bottom:26px;display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.25);padding:8px 16px;border-radius:100px;
  }
  .hero h1{
    font-size:clamp(2.5rem,5.8vw,4.8rem);font-weight:800;line-height:1.06;
    max-width:15ch;margin-bottom:26px;
  }
  .hero h1 span{color:var(--sun);}
  .hero p{max-width:48ch;font-size:1.1rem;opacity:0.92;margin-bottom:38px;}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{padding:16px 32px;border-radius:100px;font-size:0.94rem;font-weight:700;cursor:pointer;border:2px solid transparent;transition:all .2s;display:inline-block;}
  .btn-primary{background:var(--sun);color:var(--sea-deep);box-shadow:0 10px 24px rgba(192,143,69,0.35);}
  .btn-primary:hover{background:var(--sun-deep);transform:translateY(-2px);}
  .btn-ghost{border-color:rgba(255,255,255,0.5);color:#fff;}
  .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.1);}
  .hero-stats{display:flex;gap:40px;margin-top:56px;flex-wrap:wrap;}
  .hero-stats div{border-left:2px solid rgba(255,255,255,0.3);padding-left:16px;}
  .hero-stats b{display:block;font-family:'Poppins',sans-serif;font-size:1.6rem;font-weight:800;}
  .hero-stats span{font-size:0.78rem;opacity:0.8;}

  .wave{display:block;width:100%;height:70px;margin-top:-2px;position:relative;z-index:2;}

  /* ---- Section shells ---- */
  section.chapter{padding:92px 6vw 92px;position:relative;}
  .chapter-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:50px;flex-wrap:wrap;}
  /* In den vier bebilderten Kapiteln sitzt die Überschrift etwas tiefer,
     damit sie klar hinter dem oberen Verlauf/Farbwechsel liegt statt darin zu kleben. */
  #wasser .chapter-head, #wueste .chapter-head, #staedte .chapter-head, #anlaesse .chapter-head{margin-top:38px;}
  .chapter-eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:0.74rem;letter-spacing:.1em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font-weight:700;
    padding:6px 14px;border-radius:100px;
  }
  .chapter-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;line-height:1.1;max-width:16ch;}
  .chapter-head p{margin-top:14px;opacity:0.7;max-width:48ch;font-size:0.98rem;}

  /* Jedes Kapitel bekommt ein dezentes, thematisch passendes Hintergrundfoto.
     Statt harter Kanten oder Wellen-Grafiken blendet jedes Kapitel oben/unten
     weich zu einer gemeinsamen Übergangsfarbe aus (meist --paper, an den
     Rändern zum dunklen Trust-Strip/Footer stattdessen --sea-deep) —
     dadurch gibt es keinen sichtbaren Schnitt zum nächsten Kapitel. */
  /* Alle vier Kapitel teilen jetzt dieselbe sanfte Blaufamilie (passend zum Logo) —
     nur Helligkeit/Intensität variiert leicht für etwas Rhythmus beim Scrollen,
     kein Farbton-Wechsel mehr zwischen den Kapiteln. */
  #wasser, #wueste, #staedte, #anlaesse{color:#fff;}
  #wasser .chapter-head p, #wueste .chapter-head p, #staedte .chapter-head p, #anlaesse .chapter-head p{opacity:0.75;}
  #wasser .chapter-eyebrow, #wueste .chapter-eyebrow, #staedte .chapter-eyebrow, #anlaesse .chapter-eyebrow{
    background:rgba(255,255,255,0.14);color:#fff;backdrop-filter:blur(4px);
  }
  /* Feste Pixel-Höhen statt Prozent für die Ein-/Ausblendzone — dadurch ist der
     Verlauf immer gleich weich, egal wie hoch das jeweilige Kapitel ist. */
  #wasser{
    background:
      linear-gradient(180deg, var(--paper) 0px, transparent 240px, transparent calc(100% - 240px), var(--paper) 100%),
      linear-gradient(180deg, rgba(4,22,57,0.72), rgba(3,15,40,0.84)),
      url('https://images.unsplash.com/photo-1524946274118-e7680e33ccc5?auto=format&fit=crop&w=2000&q=65') center/cover no-repeat;
  }
  #wueste{
    background:
      linear-gradient(180deg, var(--paper) 0px, transparent 240px, transparent calc(100% - 240px), var(--paper) 100%),
      linear-gradient(180deg, rgba(4,22,57,0.72), rgba(3,15,40,0.84)),
      url('https://images.unsplash.com/photo-1783578990149-8b91589a7b2c?auto=format&fit=crop&w=2000&q=65') center 62%/cover no-repeat;
  }
  #staedte{
    background:
      linear-gradient(180deg, var(--paper) 0px, transparent 240px, transparent calc(100% - 240px), var(--paper) 100%),
      linear-gradient(180deg, rgba(4,22,57,0.76), rgba(3,15,40,0.86)),
      url('https://images.unsplash.com/photo-1678038592327-c5730737f867?auto=format&fit=crop&w=2000&q=65') center 55%/cover no-repeat;
  }
  #anlaesse{
    background:
      linear-gradient(180deg, var(--paper) 0px, transparent 240px, transparent calc(100% - 240px), var(--paper) 100%),
      linear-gradient(180deg, rgba(4,22,57,0.74), rgba(3,15,40,0.86)),
      url('https://images.unsplash.com/photo-1550713450-5f14c923ebd1?auto=format&fit=crop&w=2000&q=65') center 20%/cover no-repeat;
  }

  /* Touren-Karussell: jetzt auf JEDER Breite eine wischbare Kartenreihe statt
     eines starren Rasters — am Handy eine Karte pro Ansicht (siehe Media Query
     weiter unten), am Desktop drei Karten pro Ansicht + Pfeile zum Weiterklicken. */
  .grid-carousel{position:relative;}
  .grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:24px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;
  }
  .grid::-webkit-scrollbar{display:none;}
  .grid .card{flex:0 0 calc((100% - 48px)/3);max-width:400px;scroll-snap-align:start;}

  .grid-arrow{display:none;}
  @media (min-width:721px){
    .grid-arrow{
      display:flex;align-items:center;justify-content:center;
      position:absolute;top:38%;transform:translateY(-50%);
      width:44px;height:44px;border-radius:50%;flex-shrink:0;
      background:var(--card);border:1px solid var(--line);color:var(--ink);
      font-size:1.5rem;line-height:1;cursor:pointer;z-index:4;
      box-shadow:0 10px 22px rgba(0,0,0,0.28);transition:all .2s;
    }
    .grid-arrow:hover{background:var(--sun);color:var(--sea-deep);border-color:var(--sun);}
    .grid-arrow--prev{left:-20px;}
    .grid-arrow--next{right:-20px;}
  }

  /* Positions-Punkte unter dem Karussell — nur auf dem Handy sichtbar (siehe Media Query
     ganz unten), am Desktop übernehmen die Pfeile die Navigation. */
  .grid-dots{display:none;justify-content:center;gap:8px;margin-top:18px;}
  .grid-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.25);transition:all .2s;cursor:pointer;flex-shrink:0;}
  .grid-dot.active{background:var(--sun);width:20px;border-radius:4px;}

  /* ---- Cards ---- */
  .card{
    background:var(--card);border-radius:30px;overflow:hidden;
    display:flex;flex-direction:column;
    border:1.5px solid rgba(221,173,100,0.38);
    box-shadow:0 1px 2px rgba(0,0,0,0.12), 0 14px 34px rgba(0,0,0,0.28), 0 0 0 6px rgba(221,173,100,0.03);
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
  }
  .card:hover{
    transform:translateY(-6px);
    border-color:rgba(221,173,100,0.7);
    box-shadow:0 2px 4px rgba(0,0,0,0.16), 0 30px 60px rgba(0,0,0,0.36), 0 0 0 6px rgba(221,173,100,0.06);
  }
  .card-photo{position:relative;height:210px;overflow:hidden;background:var(--sea-deep);}
  .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
  .card:hover .card-photo img{transform:scale(1.08);}
  .card-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(10,20,18,0) 42%, rgba(10,20,18,0.55) 100%);}
  .vip-tag{
    position:absolute;top:14px;right:14px;z-index:2;
    font-family:'JetBrains Mono',monospace;font-size:0.6rem;letter-spacing:.08em;
    background:var(--sun);color:#3B2A03;padding:5px 11px;border-radius:100px;font-weight:800;
  }
  .price-chip{
    position:absolute;bottom:14px;right:14px;z-index:2;
    font-family:'JetBrains Mono',monospace;font-size:0.72rem;font-weight:600;white-space:nowrap;
    background:#fff;color:var(--ink-fixed-dark);padding:6px 13px;border-radius:100px;
  }
  .card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex-grow:1;}
  .card h3{font-size:1.15rem;font-weight:700;letter-spacing:-0.01em;}
  /* STERNE-PREVIEW START — gehört zum Block in index.html/cardHTML, zusammen entfernbar */
  .card-rating{display:flex;align-items:center;gap:7px;margin-top:-6px;}
  .card-rating .stars{color:var(--sun-deep);letter-spacing:2px;font-size:0.85rem;}
  .card-rating .rating-num{font-family:'JetBrains Mono',monospace;font-size:0.72rem;opacity:0.6;font-weight:700;}
  /* STERNE-PREVIEW ENDE */
  .card p.desc{font-size:0.88rem;opacity:0.62;flex-grow:1;line-height:1.55;}
  .card-info{
    font-size:0.76rem;opacity:0.6;font-weight:600;letter-spacing:.01em;
    padding-top:11px;border-top:1px solid rgba(255,255,255,0.08);
  }
  .card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:2px;gap:10px;}
  .details-link{
    font-size:0.79rem;font-weight:700;color:var(--sun);opacity:0.85;
    transition:opacity .2s;
  }
  .details-link:hover{opacity:1;text-decoration:underline;}
  .book-btn{
    background:var(--sun);color:var(--sea-deep);border:none;
    padding:11px 22px;border-radius:100px;font-size:0.82rem;font-weight:700;cursor:pointer;
    transition:all .2s;white-space:nowrap;
  }
  .book-btn:hover{background:var(--sun-deep);transform:translateY(-1px);box-shadow:0 6px 16px rgba(192,143,69,0.3);}

  .g-wasser{background:linear-gradient(135deg, var(--sea) 0%, var(--sea-bright) 55%, var(--sea-deep) 100%);}
  .g-wueste{background:linear-gradient(135deg, var(--sea-bright) 0%, var(--sea) 55%, var(--sea-deep) 100%);}
  .g-staedte{background:linear-gradient(135deg, var(--sea) 0%, var(--sea-deep) 55%, #0D1B33 100%);}
  .g-anlaesse{background:linear-gradient(135deg, var(--sea-bright) 0%, var(--sea) 60%, var(--sea-deep) 100%);}

  /* ---- Footer ---- */
  footer{background:var(--sea-deep);color:#fff;padding:80px 6vw 30px;}
  footer h2{font-size:clamp(1.9rem,3.6vw,2.5rem);max-width:16ch;margin-bottom:18px;font-weight:800;}
  footer p{opacity:0.75;max-width:44ch;margin-bottom:30px;}
  .foot-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:26px;margin-top:44px;border-top:1px solid rgba(255,255,255,0.15);
    font-size:0.78rem;opacity:0.65;flex-wrap:wrap;gap:12px;
  }

  /* ---- Modal ---- */
  .overlay{position:fixed;inset:0;background:rgba(10,40,45,0.62);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(4px);}
  .overlay.open{display:flex;}
  .modal{background:var(--paper);border-radius:26px;max-width:480px;width:100%;padding:32px;max-height:88vh;overflow-y:auto;position:relative;}
  .modal h3{font-size:1.4rem;margin-bottom:6px;font-weight:800;}
  .modal .sub{font-size:0.85rem;opacity:0.6;margin-bottom:22px;font-weight:600;}

  /* ---- Tour-Detail-Overlay: klar strukturierte Infoblöcke statt Fließtext ---- */
  .detail-modal{max-width:620px;}
  .gallery-btn{
    width:100%;padding:13px;border-radius:100px;border:none;
    background:var(--sun);color:var(--sea-deep);font-weight:700;font-size:0.88rem;
    cursor:pointer;margin:14px 0;transition:all .2s;
  }
  .gallery-btn:hover{background:var(--sun-deep);}

  /* ---- Bildergalerie: Vollbild-Wischgalerie, eigener schwarzer Hintergrund ---- */
  .gallery-overlay{background:rgba(0,0,0,0.94);padding:0;}
  .gallery-modal{
    position:relative;width:100%;height:100%;max-width:100vw;max-height:100vh;
    display:flex;align-items:center;justify-content:center;background:transparent;
    border-radius:0;padding:0;
  }
  .gallery-track{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    width:100%;height:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .gallery-track::-webkit-scrollbar{display:none;}
  .gallery-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:20px;}
  .gallery-slide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;}
  .gallery-close{position:absolute;top:20px;right:22px;color:#fff;font-size:2rem;opacity:0.8;z-index:2;}
  .gallery-close:hover{opacity:1;}
  .gallery-dots{position:absolute;bottom:22px;left:0;right:0;z-index:2;}
  .detail-block{margin-bottom:20px;}
  .detail-block h4{
    font-size:0.74rem;text-transform:uppercase;letter-spacing:.05em;opacity:0.55;
    margin-bottom:7px;font-weight:700;color:var(--sun);
  }
  .detail-block p{font-size:0.92rem;line-height:1.62;opacity:0.85;}
  .detail-list{list-style:none;display:flex;flex-direction:column;gap:6px;}
  .detail-list li{font-size:0.92rem;line-height:1.5;opacity:0.85;padding-left:22px;position:relative;}
  .detail-list li::before{content:"✓";position:absolute;left:0;color:var(--sun);font-weight:700;}
  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;margin-top:4px;}
  .detail-grid .detail-block{margin-bottom:0;}
  @media (max-width:560px){ .detail-grid{grid-template-columns:1fr;} }
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:0.76rem;text-transform:uppercase;letter-spacing:.04em;opacity:0.6;margin-bottom:7px;font-weight:700;}
  .field input,.field textarea{
    width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);
    font-family:inherit;font-size:0.92rem;background:#fff;transition:border-color .2s;
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--sea);}
  .field textarea{resize:vertical;min-height:70px;}
  .pay-note{font-size:0.82rem;padding:12px 14px;border-radius:12px;margin-bottom:18px;background:#E4F6F7;color:var(--sea-deep);font-weight:600;}

  /* ---- Formulare auf der Gäste-Seite (Bewertung/Vorschlag) — nutzt dieselben
     .field-Regeln wie das Buchungsformular, nur außerhalb eines Modals. ---- */
  .review-form{max-width:560px;}
  .star-picker{display:flex;gap:8px;}
  .star-pick{font-size:2rem;line-height:1;color:rgba(255,255,255,0.2);cursor:pointer;transition:color .15s;}
  .star-pick.filled{color:var(--sun);}
  .star-pick:hover{color:var(--sun-deep);}

  /* ---- Wetter-Woche auf der Gäste-Seite ---- */
  .weather-week{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .weather-day-card{
    flex:0 0 auto;min-width:84px;text-align:center;
    background:var(--card);border:1px solid rgba(221,173,100,0.25);
    border-radius:18px;padding:16px 10px;
  }
  .weather-day-card .wd{font-size:0.72rem;text-transform:uppercase;opacity:0.6;font-weight:700;letter-spacing:.03em;}
  .weather-day-card .wicon{font-size:1.6rem;margin:8px 0;}
  .weather-day-card .wtemp b{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:800;}
  .weather-day-card .wtemp span{font-size:0.76rem;opacity:0.5;margin-left:4px;}
  .weather-loading, .weather-error{font-size:0.88rem;opacity:0.6;}

  /* ---- Erklärung Normal/VIP bei den Inseltouren-Untermenüs ---- */
  .variant-explain{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:4px;}
  .variant-explain p{font-size:0.85rem;line-height:1.55;opacity:0.8;}
  .variant-explain p+p{margin-top:10px;}
  .variant-explain b{color:var(--sun-deep);}

  /* ---- Anklickbare Kästchen-Reihe (Personenzahl, Zahlungsart) — gleiches
     Prinzip wie die Termin-Kästchen beim Kalender weiter oben. ---- */
  .choice-row{display:flex;gap:8px;}
  .choice-chip{
    flex:1;text-align:center;padding:12px 8px;border-radius:12px;
    border:1.5px solid var(--line);cursor:pointer;transition:all .15s;
    background:#fff;color:var(--ink-fixed-dark);font-weight:700;font-size:0.92rem;
    white-space:nowrap;
  }
  .choice-chip:hover:not(.disabled){border-color:var(--sea);}
  .choice-chip.selected{border-color:var(--coral);background:#FFEFEC;}
  .choice-chip.disabled{opacity:0.4;cursor:not-allowed;}
  .guests-total{margin-top:8px;font-size:0.85rem;font-weight:600;color:var(--ink-fixed-dark);opacity:0.75;min-height:1.2em;}
  /* Zahlungsart-Kästchen sind größer und hochwertiger aufgebaut als die reinen
     Zahlen-Kästchen: Icon-Kreis + Titel + Untertext statt Emoji + Text. */
  .choice-chip.pay-chip{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:18px 10px;white-space:normal;
  }
  .pay-chip-icon{
    width:40px;height:40px;border-radius:12px;flex-shrink:0;
    background:rgba(15,42,84,0.06);border:1px solid rgba(15,42,84,0.14);
    display:flex;align-items:center;justify-content:center;
  }
  .pay-chip-icon svg{width:20px;height:20px;stroke:var(--sea);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .choice-chip.pay-chip b{font-size:0.9rem;font-weight:700;}
  .choice-chip.pay-chip small{font-size:0.72rem;font-weight:600;opacity:0.55;}
  .choice-chip.pay-chip.selected .pay-chip-icon{background:rgba(255,111,94,0.14);border-color:rgba(255,111,94,0.3);}
  .choice-chip.pay-chip.selected .pay-chip-icon svg{stroke:var(--coral-deep);}
  .choice-chip.pay-chip.disabled .pay-chip-icon{background:rgba(15,42,84,0.04);}

  /* Steht anstelle des "Anfrage senden"-Buttons, sobald PayPal gewählt ist —
     macht klar, dass hier gebucht (nicht nur angefragt) wird, bevor die echten
     PayPal-Buttons folgen. */
  .paypal-cta{margin-top:4px;}
  .paypal-cta label{display:block;font-size:1rem;font-weight:800;margin-bottom:10px;font-family:'Poppins',sans-serif;}
  .modal-actions{display:flex;gap:10px;margin-top:6px;}
  .modal-actions button{flex:1;padding:14px;border-radius:100px;border:none;font-size:0.9rem;cursor:pointer;font-weight:700;}
  .cancel-btn{background:transparent;border:1.5px solid var(--line)!important;color:var(--ink);}
  .confirm-btn{background:var(--coral);color:#fff;}
  .confirm-btn:hover{background:var(--coral-deep);}
  .confirm-btn:disabled{opacity:0.45;cursor:not-allowed;}
  /* Für Buttons außerhalb von .modal-actions (z.B. eigenständige Formulare auf
     gaeste.html) — gleiche Pillenform/Größe wie die Modal-Buttons, nur ohne die
     Voraussetzung, in .modal-actions zu stecken. */
  .btn-block{
    display:block;width:100%;padding:15px;border-radius:100px;border:none;
    font-size:0.92rem;font-weight:700;cursor:pointer;transition:all .2s;
  }
  .btn-block:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,0.22);}
  /* Sand-Gold statt Korall-Rot — für die Formular-Buttons auf gaeste.html
     (Bewertung/Vorschlag senden), gleiches Gold wie .btn-primary im Hero. */
  .btn-gold{background:var(--sun);color:var(--sea-deep);}
  .btn-gold:hover{background:var(--sun-deep);}
  .close-x{position:absolute;top:18px;right:20px;cursor:pointer;font-size:1.3rem;opacity:0.45;background:none;border:none;}
  .success-box{text-align:center;padding:20px 0;}
  .success-box .check{width:56px;height:56px;border-radius:50%;background:var(--leaf-bright);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 14px;}

  /* ---- Date/slot picker ---- */
  .slot-field{margin-bottom:18px;}
  .slot-field label{display:block;font-size:0.76rem;text-transform:uppercase;letter-spacing:.04em;opacity:0.6;margin-bottom:9px;font-weight:700;}
  .slot-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  /* Chip bleibt bewusst weiß (guter Kontrast zu "voll"/"frei"-Status) — braucht daher
     eine feste dunkle Textfarbe, statt der hellen Seiten-Schrift zu erben. */
  .slot-chip{flex:0 0 auto;min-width:58px;text-align:center;padding:10px 6px;border-radius:12px;border:1.5px solid var(--line);cursor:pointer;transition:all .15s;background:#fff;color:var(--ink-fixed-dark);}
  .slot-chip .wd{font-size:0.65rem;text-transform:uppercase;opacity:0.6;letter-spacing:.03em;font-weight:700;}
  .slot-chip .dd{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.15rem;margin:2px 0;color:var(--ink-fixed-dark);}
  .slot-chip .avail{font-size:0.62rem;font-family:'JetBrains Mono',monospace;opacity:0.7;}
  .slot-chip:hover:not(.full){border-color:var(--sea);}
  .slot-chip.selected{border-color:var(--coral);background:#FFEFEC;}
  .slot-chip.full{opacity:0.4;cursor:not-allowed;background:#F2EEE6;}
  .slot-chip.full .avail{color:#B33636;}
  .slot-hint{font-size:0.78rem;opacity:0.55;margin-top:8px;}
  .slot-loading{font-size:0.82rem;opacity:0.55;padding:10px 0;}

  /* ---- Admin: Tabs zwischen Buchungen und Bewertungen ---- */
  .admin-tabs{display:flex;gap:8px;margin-top:18px;border-bottom:1px solid var(--line);}
  .admin-tab{
    background:none;border:none;cursor:pointer;padding:10px 4px;margin-right:14px;
    font-family:inherit;font-size:0.9rem;font-weight:700;color:var(--ink);opacity:0.5;
    border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px;
  }
  .admin-tab.active{opacity:1;border-bottom-color:var(--coral);}
  .admin-badge{
    display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
    padding:0 5px;border-radius:100px;background:var(--coral);color:#fff;
    font-size:0.68rem;font-weight:800;
  }
  .admin-toolbar{display:flex;gap:10px;margin:18px 0 6px;flex-wrap:wrap;align-items:center;justify-content:space-between;}
  .admin-search{flex-grow:1;min-width:160px;padding:9px 13px;border-radius:10px;border:1.5px solid var(--line);font-family:inherit;font-size:0.85rem;}
  .admin-stats{display:flex;gap:16px;font-size:0.78rem;opacity:0.6;font-family:'JetBrains Mono',monospace;flex-wrap:wrap;}
  .admin-modal{max-width:720px;}

  .booking-card{border:1.5px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:14px;}
  .booking-card.is-done{opacity:0.5;}
  .booking-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
  .booking-card-head h4{font-size:1.02rem;font-weight:700;}
  .status-pill{font-size:0.64rem;padding:3px 9px;border-radius:100px;background:#DCF3EA;color:#0F6E68;font-family:'JetBrains Mono',monospace;margin-left:8px;font-weight:700;}
  .status-pill.status-bestätigt{background:#FFEFEC;color:var(--coral-deep);}
  .booking-card .tag{font-family:'JetBrains Mono',monospace;font-size:0.66rem;padding:4px 10px;border-radius:100px;background:var(--sand);}
  .booking-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:0.86rem;margin-bottom:12px;}
  .booking-detail-grid .k{font-size:0.7rem;text-transform:uppercase;letter-spacing:.03em;opacity:0.5;font-weight:700;margin-bottom:2px;}
  .booking-detail-grid .v{font-weight:600;}
  /* Kontaktfeld: Telefonnummern öffnen bewusst WhatsApp statt (wie von iOS/Android
     sonst automatisch verlinkt) den Anruf-Dialer — siehe contactHTML() im Skript. */
  .contact-wa-link{color:var(--ink-fixed-dark);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
  .contact-wa-link:hover{text-decoration:underline;}
  .contact-wa-tag{background:#DCF8E9;color:#1F8A4C;font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;padding:2px 7px;border-radius:100px;}
  .booking-note{font-size:0.86rem;background:var(--paper);border-radius:10px;padding:10px 12px;margin-bottom:12px;}
  .booking-note .k{font-size:0.7rem;text-transform:uppercase;letter-spacing:.03em;opacity:0.5;font-weight:700;margin-bottom:4px;}
  .row-actions{display:flex;gap:6px;flex-wrap:wrap;}
  .row-actions button{font-size:0.74rem;padding:7px 12px;border-radius:100px;border:1.5px solid var(--line);background:none;cursor:pointer;white-space:nowrap;transition:all .15s;font-weight:600;}
  .row-actions .done-btn:hover{background:#DCF3EA;border-color:#7FCBAA;}
  .row-actions .del-btn:hover{background:#FBE3E3;border-color:#E79A9A;}
  .row-actions .confirm-req-btn{background:#FFEFEC;border-color:var(--coral);color:var(--coral-deep);font-weight:700;}
  .row-actions .confirm-req-btn:hover{background:var(--coral);color:#fff;}
  .empty-state{text-align:center;padding:40px 10px;opacity:0.55;font-size:0.9rem;}
  .gate{padding:30px 6px;text-align:center;}
  .gate input{width:100%;max-width:220px;margin:14px auto;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);text-align:center;font-family:'JetBrains Mono',monospace;letter-spacing:.2em;}
  .gate-error{color:#B33636;font-size:0.82rem;margin-top:8px;display:none;}

  /* ---- Vertrauens-Leiste unter dem Hero ---- */
  .trust-strip{
    background:var(--sea-deep);color:#fff;padding:56px 6vw 34px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px 34px;
  }
  .trust-item{
    display:flex;align-items:center;gap:15px;padding:16px 18px;border-radius:20px;
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
    transition:background .2s, border-color .2s, transform .2s;
  }
  .trust-item:hover{background:rgba(255,255,255,0.07);border-color:rgba(221,173,100,0.3);transform:translateY(-2px);}
  .trust-icon{
    width:44px;height:44px;border-radius:14px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(221,173,100,0.14);border:1px solid rgba(221,173,100,0.25);
  }
  .trust-item svg{width:22px;height:22px;flex-shrink:0;stroke:var(--sun);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  /* WhatsApp-Icon ist ein gefülltes Symbol, kein Strich-Icon wie die anderen drei. */
  #trustWhatsapp svg{stroke:none;fill:var(--sun);}
  .trust-item b{display:block;font-family:'Poppins',sans-serif;font-size:0.94rem;font-weight:700;line-height:1.3;}
  .trust-item span{font-size:0.79rem;opacity:0.72;line-height:1.35;}

  /* ---- Wetter-Stat im Hero: nutzt die vorhandenen .hero-stats-Regeln, kein eigener Block nötig ---- */

  /* ---- Ablauf: So funktioniert's ---- */
  #ablauf{background:var(--paper);color:#fff;}
  #ablauf .chapter-head p{opacity:0.75;}
  #ablauf .chapter-eyebrow{background:rgba(255,255,255,0.14);color:#fff;}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;counter-reset:step;}
  .step{
    background:var(--card);border-radius:28px;padding:30px 26px 28px;position:relative;
    box-shadow:0 10px 26px rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.06);
  }
  .step-num{
    width:44px;height:44px;border-radius:14px;margin-bottom:16px;
    background:linear-gradient(135deg,var(--sun),var(--sun-deep));
    display:flex;align-items:center;justify-content:center;
    font-family:'Poppins',sans-serif;font-weight:800;font-size:1.15rem;color:var(--ink-fixed-dark);
  }
  .step h3{font-size:1.08rem;font-weight:700;margin-bottom:7px;color:#fff;}
  .step p{font-size:0.89rem;opacity:0.68;line-height:1.55;}

  /* ---- Warum Red Sea Experience? ---- */
  #warum{background:var(--paper);color:#fff;}
  #warum .chapter-head p{opacity:0.75;}
  #warum .chapter-eyebrow{background:rgba(192,143,69,0.25);color:var(--sun);}
  .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
  .why-item{
    background:var(--card);border-radius:28px;padding:28px 26px;position:relative;
    box-shadow:0 10px 26px rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.06);
    transition:transform .25s, border-color .25s;
  }
  .why-item:hover{transform:translateY(-4px);border-color:rgba(221,173,100,0.35);}
  .why-icon{
    width:46px;height:46px;border-radius:14px;margin-bottom:16px;
    background:rgba(221,173,100,0.14);border:1px solid rgba(221,173,100,0.28);
    display:flex;align-items:center;justify-content:center;
  }
  .why-icon svg{width:22px;height:22px;stroke:var(--sun);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .why-item h3{font-size:1.05rem;font-weight:700;margin-bottom:7px;color:#fff;}
  .why-item p{font-size:0.89rem;opacity:0.68;line-height:1.55;}

  /* ---- Über uns ---- */
  #ueberuns{background:var(--paper);color:#fff;}
  #ueberuns .chapter-eyebrow{background:rgba(255,255,255,0.14);color:#fff;}
  .about-wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:46px;align-items:center;}
  .about-wrap--text-only{display:block;max-width:70ch;}
  .about-text p{font-size:1rem;line-height:1.7;margin-bottom:15px;opacity:0.82;}
  .about-text p:last-of-type{margin-bottom:0;}
  /* Zwei gestapelte Fotos statt eines: Welle oben, Wüste unten — spiegelt den Markennamen wortwörtlich. */
  .about-photo{display:flex;flex-direction:column;gap:14px;}
  .about-photo figure{margin:0;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--sea-deep);box-shadow:0 14px 34px rgba(4,22,57,0.2);}
  .about-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .about-photo figcaption{
    position:absolute;left:14px;bottom:14px;
    background:rgba(10,42,47,0.55);backdrop-filter:blur(6px);color:#fff;
    font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:.05em;
    padding:6px 12px;border-radius:100px;
  }
  .about-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
  .about-points span{
    background:rgba(255,255,255,0.9);border:1px solid rgba(15,42,84,0.18);color:var(--ink-fixed-dark);
    padding:8px 15px;border-radius:100px;font-size:0.83rem;font-weight:600;
  }

  /* ---- Bewertungen ---- */
  #bewertungen{background:var(--paper);color:#fff;}
  #bewertungen .chapter-eyebrow{background:rgba(192,143,69,0.25);color:var(--sun);}
  #bewertung-abgeben{background:var(--paper);color:#fff;}
  #bewertung-abgeben .chapter-eyebrow{background:rgba(255,255,255,0.14);color:#fff;}
  #bewertung-abgeben .chapter-head p{opacity:0.75;}
  #vorschlag{background:var(--paper);color:#fff;}
  #vorschlag .chapter-eyebrow{background:rgba(255,255,255,0.14);color:#fff;}
  #vorschlag .chapter-head p{opacity:0.75;}
  #wetter{background:var(--paper);color:#fff;}
  #wetter .chapter-eyebrow{background:rgba(255,255,255,0.14);color:#fff;}
  #wetter .chapter-head p{opacity:0.75;}
  .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
  .review{
    background:var(--card);border-radius:28px;padding:26px 26px 24px;
    border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 26px rgba(0,0,0,0.22);
    display:flex;flex-direction:column;gap:12px;
  }
  .review-stars{color:var(--sun-deep);font-size:1rem;letter-spacing:2px;}
  .review-text{font-size:0.94rem;line-height:1.65;color:var(--ink);opacity:0.85;flex-grow:1;}
  .review-author{display:flex;align-items:center;gap:11px;margin-top:2px;}
  .review-avatar{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;
    background:linear-gradient(135deg,var(--sea-bright),var(--sea));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:0.9rem;
  }
  .review-avatar img{width:100%;height:100%;object-fit:cover;}
  .review-author b{display:block;font-size:0.88rem;font-weight:700;color:var(--ink);}
  .review-author span{font-size:0.76rem;opacity:0.55;color:var(--ink);}
  /* Deutlich sichtbarer Hinweis, solange noch Platzhalter drinstehen */
  .review.is-placeholder{border:1.5px dashed var(--sun-deep);background:rgba(255,255,255,0.03);}
  .review.is-placeholder .review-text{font-style:italic;opacity:0.6;}

  /* ---- FAQ ---- */
  #faq{background:var(--paper);color:#fff;}
  #faq .chapter-eyebrow{background:rgba(255,255,255,0.14);color:#fff;}
  .faq-list{max-width:820px;}
  .faq-item{
    background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:22px;
    margin-bottom:11px;overflow:hidden;transition:box-shadow .2s;
  }
  .faq-item[open]{box-shadow:0 8px 22px rgba(22,48,46,0.09);}
  .faq-item summary{
    padding:17px 22px;cursor:pointer;font-weight:700;font-size:0.98rem;color:var(--ink);
    display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:600;
    color:var(--sun);flex-shrink:0;transition:transform .2s;line-height:1;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item summary:hover{background:rgba(255,255,255,0.04);}
  .faq-answer{padding:0 22px 19px;font-size:0.92rem;line-height:1.65;opacity:0.75;color:var(--ink);}

  /* ---- Kontakt ---- */
  #kontakt{background:linear-gradient(160deg,var(--sea-deep) 0%, var(--sea) 45%, var(--sea-deep) 100%);color:#fff;}
  #kontakt .chapter-eyebrow{background:rgba(255,255,255,0.16);color:#fff;}
  #kontakt .chapter-head h2{color:#fff;}
  #kontakt .chapter-head p{color:#fff;opacity:0.78;}
  .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
  .contact-card{
    background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.16);
    border-radius:26px;padding:24px 24px 22px;transition:all .2s;display:block;
  }
  .contact-card:hover{background:rgba(255,255,255,0.17);transform:translateY(-3px);}
  .contact-card svg{width:26px;height:26px;margin-bottom:14px;stroke:var(--sun);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .contact-card b{display:block;font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;margin-bottom:4px;}
  .contact-card span{font-size:0.87rem;opacity:0.78;word-break:break-word;}

  /* ---- Footer (mehrspaltig) ---- */
  .foot-top{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;
    padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,0.15);
  }
  .foot-brand .brand{color:#fff;margin-bottom:12px;}
  .foot-brand p{font-size:0.88rem;opacity:0.7;max-width:34ch;margin-bottom:0;}
  .foot-col h4{
    font-family:'Poppins',sans-serif;font-size:0.8rem;text-transform:uppercase;
    letter-spacing:.06em;opacity:0.55;margin-bottom:13px;font-weight:700;
  }
  .foot-col a, .foot-col span{
    display:block;font-size:0.88rem;opacity:0.78;margin-bottom:9px;transition:opacity .2s;
  }
  .foot-col a:hover{opacity:1;}

  @media (max-width:900px){
    .about-wrap{grid-template-columns:1fr;gap:32px;}
    .about-photo{order:-1;flex-direction:row;}
    .about-photo figure{aspect-ratio:1/1;}
    .foot-top{grid-template-columns:1fr 1fr;gap:28px;}
  }

  @media (max-width:720px){
    .trust-strip{grid-template-columns:1fr 1fr;gap:20px 18px;padding:40px 5.5vw 30px;}
    .trust-item{gap:10px;padding:16px 14px;flex-direction:column;align-items:flex-start;}
    .trust-icon{width:36px;height:36px;border-radius:11px;}
    .trust-item svg{width:18px;height:18px;}
    .trust-item b{font-size:0.85rem;}
    .trust-item span{font-size:0.72rem;}
    /* "Ausflüge" und "Mehr" nebeneinander statt hintereinander, damit der Footer
       auf dem Handy nicht so lang wird — Marke oben und Kontakt unten bleiben
       jeweils über die volle Breite. */
    .foot-top{
      grid-template-columns:1fr 1fr;gap:22px 20px;
      grid-template-areas:"brand brand" "ausfluege mehr" "kontakt kontakt";
    }
    .foot-top .foot-brand{grid-area:brand;}
    .foot-top .foot-col--ausfluege{grid-area:ausfluege;}
    .foot-top .foot-col--mehr{grid-area:mehr;}
    .foot-top .foot-col--kontakt{grid-area:kontakt;}
    .topbar-links{display:none;}
    .admin-link{display:none;}
    .topbar-social{display:none;}
    .burger{display:flex;}
    /* Mehr Abstand + größere Tippfläche zwischen den Punkten, damit man auf dem
       Handy nicht mit dem Finger versehentlich den Nachbar-Punkt trifft. */
    .compass{right:10px;gap:26px;}
    .compass-dot{padding:8px;margin:-8px;}
    .whatsapp-float{display:flex;right:14px;bottom:16px;width:48px;height:48px;}
    .whatsapp-float svg{width:22px;height:22px;}
    .compass-label{display:none;}
    section.chapter{padding:70px 5.5vw 60px;}
    .hero{padding:112px 5.5vw 8px;}
    .booking-detail-grid{grid-template-columns:1fr;}

    /* MOBILE-KARUSSELL START — gehört zum Block in index.html (setupGridCarousel),
       zusammen entfernbar. Wandelt das Raster auf dem Handy in eine wischbare
       Kartenreihe um; am Desktop bleibt .grid weiter oben unverändert ein Raster. */
    .grid{
      display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
      gap:16px;margin:0 -5.5vw;padding:0 5.5vw 6px;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
    }
    .grid::-webkit-scrollbar{display:none;}
    .grid .card{flex:0 0 88%;scroll-snap-align:center;}
    .grid-dots{display:flex;}

    /* Gleiches Karussell-Prinzip für "So funktioniert deine Buchung". */
    .steps{
      display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
      gap:16px;margin:0 -5.5vw;padding:0 5.5vw 6px;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
    }
    .steps::-webkit-scrollbar{display:none;}
    .steps .step{flex:0 0 88%;scroll-snap-align:center;}

    /* Gleiches Karussell-Prinzip auf der Über-uns-Seite: Warum wir, Bewertungen, Kontakt. */
    .why-grid, .reviews, .contact-grid{
      display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
      gap:16px;margin:0 -5.5vw;padding:0 5.5vw 6px;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
    }
    .why-grid::-webkit-scrollbar, .reviews::-webkit-scrollbar, .contact-grid::-webkit-scrollbar{display:none;}
    .why-grid .why-item, .reviews .review, .contact-grid .contact-card{flex:0 0 88%;scroll-snap-align:center;}

    /* Hero-Stats (Hurghada / Antwortzeit / Wetter): auf dem Handy alle drei kleiner,
       damit sie ohne Wischen nebeneinander in eine Reihe passen. */
    .hero-stats{flex-wrap:nowrap;gap:14px;margin-top:38px;}
    .hero-stats>div{flex:1 1 0;min-width:0;padding-left:10px;}
    .hero-stats b{font-size:1.05rem;}
    .hero-stats span{font-size:0.66rem;}

    /* Vertrauens-Leiste: auch wischbar statt starrem 2x2-Raster, und näher an
       die Hero-Stats herangerückt (weniger Abstand oben). */
    .trust-strip{
      display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
      gap:14px;padding:4px 5.5vw 16px;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
    }
    .trust-strip::-webkit-scrollbar{display:none;}
    .trust-item{flex:0 0 78%;scroll-snap-align:center;}
    /* MOBILE-KARUSSELL ENDE */
  }