/* ===========================================================
   Surftrip Crew — Design-System
   Statisch, keine Build-Tools, keine externen Abhängigkeiten.
   Bauart wie alexanderrenz.com.
   =========================================================== */

:root{
  /* Farben */
  --tief:       #0b2b33;   /* Tiefes Petrol — Grundfarbe */
  --tief-weich: #11404b;
  --sand:       #f4ece1;   /* Warmes Sand-Weiß */
  --sand-tief:  #e7dac8;
  --schaum:     #ffffff;   /* Flaechenfarbe Karten/Felder — wechselt im Dark Mode */
  --auf-dunkel: #ffffff;   /* Text auf immer-dunklem Grund — wechselt NIE */
  --akzent:     #e06a43;   /* Sonnenuntergang, sparsam */
  --akzent-dk:  #c4542f;
  --wasser:     #3d8ea3;   /* Mittleres Wasserblau */
  --text:       #0e2127;
  --text-leise: #5a6e74;
  --linie:      rgba(14,33,39,.12);

  --wellen-1: rgba(244,236,225,.55);
  --wellen-2: #f4ece1;

  /* Typografie */
  --schrift: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --gross: clamp(2.5rem, 7vw, 5rem);
  --h2:    clamp(1.75rem, 3.6vw, 2.9rem);
  --h3:    clamp(1.125rem, 1.6vw, 1.35rem);

  /* Maße */
  --huelle: 1180px;
  --rand: 20px;
  --radius: 14px;
  --radius-gr: 22px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sand:      #0d2028;
    --sand-tief: #13303a;
    --schaum:    #10272f;
    --text:      #e8f0f1;
    --text-leise:#9ab0b6;
    --linie:     rgba(232,240,241,.14);
    --wellen-1:  rgba(13,32,40,.55);
    --wellen-2:  #0d2028;
  }
}
:root[data-theme="dark"]{
  --sand:#0d2028; --sand-tief:#13303a; --schaum:#10272f;
  --text:#e8f0f1; --text-leise:#9ab0b6; --linie:rgba(232,240,241,.14);
  --wellen-1:rgba(13,32,40,.55); --wellen-2:#0d2028;
}

*,*::before,*::after{box-sizing:border-box}
section[id]{scroll-margin-top:84px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sand); color:var(--text);
  font-family:var(--schrift); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}

.huelle{width:100%;max-width:var(--huelle);margin-inline:auto;padding-inline:var(--rand)}
.huelle.schmal{max-width:720px}

.skip{position:absolute;left:-9999px;top:0;background:var(--akzent);color:#fff;
  padding:.7rem 1.1rem;z-index:100;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}

/* ---------- Typo-Bausteine ---------- */
h1,h2,h3{line-height:1.08;letter-spacing:-.022em;margin:0 0 .6em;font-weight:700}
h1{font-size:var(--gross);letter-spacing:-.032em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);letter-spacing:-.012em;line-height:1.25}
p{margin:0 0 1.05em}
.auge{
  font-size:.78rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wasser);margin:0 0 1rem
}
.lead{font-size:clamp(1.06rem,1.5vw,1.28rem);color:var(--text-leise);max-width:56ch}
.lead--breit{max-width:62ch}
.klein{font-size:.92rem;color:var(--text-leise)}
.klein a{color:var(--wasser);text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;border:0;border-radius:999px;
  background:var(--akzent);color:#fff;
  font:inherit;font-weight:620;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  box-shadow:0 2px 14px rgba(224,106,67,.28);
}
.knopf:hover{background:var(--akzent-dk);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(224,106,67,.34)}
.knopf:active{transform:translateY(0)}
.knopf--leer{background:transparent;color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--linie)}
.knopf--leer:hover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text)}
.knopf--klein{padding:.6rem 1.15rem;font-size:.94rem}
.knopf--voll{width:100%;padding:1.05rem}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--sand) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.kopf--gescrollt{border-bottom-color:var(--linie)}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:68px}
.marke{display:inline-flex;align-items:center;gap:.6rem;
  font-weight:700;letter-spacing:-.02em;text-decoration:none;font-size:1.06rem}
.marke__zeichen{width:30px;height:30px;color:var(--wasser);flex:none}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav>a:not(.knopf){text-decoration:none;font-size:.96rem;font-weight:520;
  color:var(--text-leise);transition:color .15s ease}
.nav>a:not(.knopf):hover{color:var(--text)}
@media (max-width:760px){
  .nav>a:not(.knopf){display:none}
  .kopf__innen{min-height:60px}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(4rem,8vw,6.5rem)}
.hero__medium{position:absolute;inset:0;z-index:-1}
.hero__verlauf{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(61,142,163,.42), transparent 62%),
    radial-gradient(700px 420px at 12% 92%, rgba(224,106,67,.20), transparent 60%),
    linear-gradient(170deg, var(--tief) 0%, var(--tief-weich) 48%, var(--sand) 100%);
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}
.hero__wellen{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto}
.hero__text{position:relative;color:var(--auf-dunkel)}
.hero__text .auge{color:rgba(255,255,255,.72)}
.hero__text h1{max-width:19ch;text-shadow:0 2px 30px rgba(0,0,0,.22)}
.hero__text .lead{color:rgba(255,255,255,.88);max-width:50ch;
  font-size:clamp(1.08rem,1.6vw,1.32rem)}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:.85rem;margin:2rem 0 1.4rem}
.hero__text .knopf--leer{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.hero__text .knopf--leer:hover{box-shadow:inset 0 0 0 1.5px #fff;
  background:rgba(255,255,255,.08)}
.hero__fuss{font-size:.95rem;color:rgba(255,255,255,.72);max-width:48ch;margin:0}

/* ---------- Blöcke ---------- */
.block{padding:clamp(3.5rem,8vw,6.5rem) 0}
.block--dunkel{background:var(--tief);color:var(--auf-dunkel)}
.block--dunkel .lead{color:rgba(255,255,255,.76)}
.block--dunkel .auge{color:#8fc5d4}
.block--akzent{background:var(--sand-tief)}

/* ---------- Karten ---------- */
.karten{
  display:grid;gap:1.1rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
}
.karte{
  position:relative;padding:1.7rem 1.5rem 1.4rem;
  background:var(--schaum);border:1px solid var(--linie);border-radius:var(--radius-gr);
  transition:transform .2s ease, box-shadow .2s ease;
}
.karte:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(11,43,51,.09)}
.karte__nr{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  color:var(--wasser);margin-bottom:.9rem
}
.karte h3{margin-bottom:.45em}
.karte p{margin:0;font-size:.97rem;color:var(--text-leise);line-height:1.6}
.karte--hell{background:linear-gradient(150deg,var(--wasser),var(--tief-weich));
  border-color:transparent;color:#fff}
.karte--hell .karte__nr{color:rgba(255,255,255,.72)}
.karte--hell p{color:rgba(255,255,255,.9)}

/* ---------- Ziele ---------- */
.ziele{display:grid;gap:1.2rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.ziel{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-gr);overflow:hidden;display:flex;flex-direction:column}
.ziel__bild{aspect-ratio:16/10;display:grid;place-items:center;position:relative}
.ziel__bild span{font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.ziel__bild--pt{background:linear-gradient(145deg,#2a6b7d,#13404d)}
.ziel__bild--ma{background:linear-gradient(145deg,#b9703c,#6d3a22)}
.ziel__bild--ic{background:linear-gradient(145deg,#3d8ea3,#1b4e5c)}
.ziel__text{padding:1.4rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column}
.ziel__text h3{margin-bottom:.3em}
.ziel__meta{font-size:.86rem;color:#8fc5d4;margin-bottom:.8em}
.ziel__text p:not(.ziel__meta):not(.ziel__status){font-size:.97rem;
  color:rgba(255,255,255,.78);line-height:1.6}
.ziel__status{margin:auto 0 0;padding-top:1rem;font-size:.84rem;font-weight:620;
  letter-spacing:.04em;color:rgba(255,255,255,.5)}
.ziel__status--aktiv{color:var(--akzent)}

/* ---------- Crew ---------- */
.crew{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center;
  grid-template-columns:1.15fr .85fr}
.crew__text p:not(.klein){color:var(--text-leise);max-width:54ch}
.crew__bild{border-radius:var(--radius-gr);overflow:hidden}
.crew__platzhalter{
  aspect-ratio:4/5;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--wasser),var(--tief));
}
.crew__platzhalter span{font-size:.8rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
@media (max-width:820px){.crew{grid-template-columns:1fr}.crew__bild{order:-1;max-width:340px}}

/* ---------- Formular ---------- */
.form{margin-top:2.2rem;display:grid;gap:1.15rem}
.form__zeile{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr}
@media (max-width:560px){.form__zeile{grid-template-columns:1fr}}
.feld{display:grid;gap:.42rem}
.feld>span{font-size:.9rem;font-weight:600;letter-spacing:-.005em}
.feld>span em{font-weight:420;font-style:normal;color:var(--text-leise)}
.feld input{
  font:inherit;font-size:1rem;padding:.85rem 1rem;color:var(--text);
  background:var(--schaum);border:1.5px solid var(--linie);border-radius:10px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.feld input::placeholder{color:var(--text-leise);opacity:.7}
.feld input:focus{outline:0;border-color:var(--wasser);
  box-shadow:0 0 0 3px rgba(61,142,163,.18)}
.feld input[aria-invalid="true"]{border-color:var(--akzent-dk)}

.form__gruppe{border:0;padding:0;margin:0;display:grid;gap:.6rem}
.form__gruppe legend{font-size:.9rem;font-weight:600;padding:0;margin-bottom:.25rem}
.haken{display:flex;align-items:flex-start;gap:.65rem;font-size:.97rem;cursor:pointer;
  line-height:1.5}
.haken input{
  appearance:none;flex:none;width:21px;height:21px;margin:1px 0 0;
  border:1.5px solid var(--linie);border-radius:6px;background:var(--schaum);
  cursor:pointer;transition:background-color .14s ease, border-color .14s ease;
}
.haken input:checked{background:var(--wasser);border-color:var(--wasser);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}
.haken--pflicht{font-size:.9rem;color:var(--text-leise);margin-top:.3rem}
.haken--pflicht a{color:var(--wasser)}
.form__hinweis{margin:.2rem 0 0;font-size:.93rem;min-height:1.4em;font-weight:520}
.form__hinweis[data-art="fehler"]{color:var(--akzent-dk)}
.form__hinweis[data-art="gut"]{color:#1f7a5c}

/* ---------- Fuß ---------- */
.fuss{padding:2.2rem 0;border-top:1px solid var(--linie);background:var(--sand)}
.fuss__innen{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between}
.fuss__marke{margin:0;font-weight:700;letter-spacing:-.02em}
.fuss__nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.fuss__nav a{font-size:.93rem;color:var(--text-leise);text-decoration:none}
.fuss__nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---------- Bewegung ---------- */
.auf{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1)}
.auf--da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .auf{opacity:1;transform:none}
}

/* ---------- Ablauf, Hinweise ---------- */
.karten--drei{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ehrlich{
  margin:1.8rem 0 0;padding:1rem 1.2rem;max-width:62ch;
  border-left:3px solid var(--akzent);border-radius:0 var(--radius) var(--radius) 0;
  background:color-mix(in srgb,var(--akzent) 9%,transparent);
  font-size:.98rem;color:var(--text)
}
.ki-zeile{margin:1rem 0 0;font-size:.92rem;color:var(--text-leise);max-width:62ch}

/* ---------- Vorlieben im Formular ---------- */
.form__gruppe legend em{font-weight:420;font-style:normal;color:var(--text-leise)}
.form__gruppe--reihe{display:flex;flex-wrap:wrap;gap:.5rem}
.form__gruppe--reihe legend{width:100%}
.haken--rund{
  align-items:center;padding:.5rem .9rem;border:1.5px solid var(--linie);
  border-radius:999px;background:var(--schaum);font-size:.93rem;
  transition:border-color .15s ease, background-color .15s ease
}
.haken--rund input{position:absolute;opacity:0;width:1px;height:1px}
.haken--rund:has(input:checked){border-color:var(--wasser);
  background:color-mix(in srgb,var(--wasser) 14%,var(--schaum))}
.haken--rund:has(input:focus-visible){outline:3px solid var(--akzent);outline-offset:2px}

/* ---------- Workation ---------- */
.workation{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1.2fr .8fr;align-items:center}
.workation p:not(.auge):not(.lead){color:rgba(255,255,255,.8);max-width:56ch}
.workation__punkte{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.workation__punkte li{padding:1rem 1.2rem;border-radius:var(--radius);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.workation__punkte b{display:block;color:#fff}
.workation__punkte span{font-size:.92rem;color:rgba(255,255,255,.65)}
@media (max-width:820px){.workation{grid-template-columns:1fr}}
.ziel__bild--za{background:linear-gradient(145deg,#c08a3e,#5b4a2a)}

/* ---------- Traumziele, Fragen ---------- */
.traum{margin:2rem 0 0;max-width:64ch;color:rgba(255,255,255,.78);font-size:1rem}
.traum b{color:#fff}
.frage{border-bottom:1px solid var(--linie);padding:.2rem 0}
.frage summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;font-weight:620;
  position:relative;font-size:1.04rem}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;font-size:1.4rem;
  font-weight:400;color:var(--wasser);transition:transform .2s ease}
.frage[open] summary::after{transform:rotate(45deg)}
.frage p{margin:0 0 1.1rem;color:var(--text-leise);max-width:62ch}
.ziel__bild--foto.ziel__bild--pt{background:url("../img/portugal.jpg") center 30%/cover}

/* ---------- Hero mit Hochkant-Video ---------- */
.hero__raster{position:static;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__clip{width:min(100%,300px);aspect-ratio:9/16;justify-self:end;border-radius:22px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);background:#0b2b33}
.hero__clip video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){
  .hero__raster{grid-template-columns:1fr}
  /* Das Promo hat eigene Texte — auf dem Handy deshalb unter der Überschrift, nicht dahinter */
  .hero__clip{justify-self:center;width:min(78%,300px);margin-top:.5rem}
}
@media (prefers-reduced-motion:reduce){.hero__clip video{display:none}
  .hero__clip{background:url("../video/promo-standbild.jpg") center/cover}}
.hero__claim{margin:-.2rem 0 1.1rem;font-size:clamp(1.12rem,1.8vw,1.42rem);font-weight:620;
  letter-spacing:-.01em;color:#fff;max-width:40ch}

/* ===========================================================
   Fotos (Unsplash, Lizenz und Nachweis im Impressum)
   =========================================================== */
.hero__verlauf{
  background:
    linear-gradient(100deg, rgba(11,43,51,.94) 0%, rgba(11,43,51,.78) 42%, rgba(11,43,51,.30) 100%),
    url("../img/hero-paddeln.jpg") center 40%/cover;
}
@media (max-width:820px){
  .hero__verlauf{background:
    linear-gradient(180deg, rgba(11,43,51,.88) 0%, rgba(11,43,51,.78) 60%, rgba(11,43,51,.55) 100%),
    url("../img/hero-paddeln-klein.jpg") center/cover}
}
.bildband{margin:2.2rem 0 0;border-radius:var(--radius-gr);overflow:hidden;aspect-ratio:16/7;background:var(--tief)}
.bildband img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:600px){.bildband{aspect-ratio:4/3}}
.workation__rechts{display:grid;gap:1rem}
.workation__bild{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.workation__bild img{width:100%;height:100%;object-fit:cover;display:block}
.ziel__bild--foto.ziel__bild--ic{background:url("../img/la-graciosa.jpg") center/cover}
.ziel__bild--foto.ziel__bild--ma{background:url("../img/imsouane-bucht.jpg") center/cover}
.ziel__bild--foto.ziel__bild--za{background:url("../img/jbay-eigen.jpg") center/cover}
.bildstreifen{height:clamp(220px,30vw,420px);background:url("../img/imsouane-boards.jpg") center 55%/cover}

/* ===========================================================
   Überschriften-Schrift: Instrument Serif
   =========================================================== */
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
/* Serif ist seit 5.10.2026 Standard (Alex). Mit ?schrift=sans lässt sich die alte Fassung ansehen. */
h1,h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.02}
h1{font-size:clamp(3rem,8vw,6rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
html[data-schrift="sans"] h1,html[data-schrift="sans"] h2{font-family:var(--schrift);font-weight:700;letter-spacing:-.022em;line-height:1.08}
html[data-schrift="sans"] h1{font-size:var(--gross)}
html[data-schrift="sans"] h2{font-size:var(--h2)}

/* Raster ohne verwaiste Einzelkarten */
@media (min-width:1100px){ .ziele{grid-template-columns:repeat(4,1fr)} }
@media (min-width:700px) and (max-width:1099px){ .ziele{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ #erwartet .karten{grid-template-columns:repeat(3,1fr)} }
.crew__bild{margin:0}
.crew__bild img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--radius-gr)}