/* ==========================================================
   KOBURA MUAY THAI, Bad Homburg
   Grundgeruest: 6 Seiten mit Seitenwechsel-Uebergang.
   Fotos/Videos: Originalmaterial der Wix-Seite.
   PLATZHALTER sind im Markup mit  data-todo  markiert.
   ========================================================== */

:root{
  --void:#000; --paper:#fff; --smoke:#4d4d4d; --dim:#9a9a9a;
  --line:#1c1c1c; --line-soft:#262626; --edge:clamp(20px,4.2vw,68px);
  --nav:66px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--void);color:var(--paper);
  font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:16px;
  line-height:1.5;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,video{display:block;max-width:100%;}

.label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;line-height:1.3;}
.display{font-weight:800;letter-spacing:-.025em;line-height:1.05;text-wrap:balance;margin:0;}
.serif{font-family:"Instrument Serif","Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.01em;}
.prose{max-width:42ch;font-size:16px;line-height:1.62;color:var(--dim);}
.prose--wide{max-width:56ch;}
.prose strong{color:var(--paper);font-weight:500;}
.prose + .prose{margin-top:14px;}
.muted{color:#6e6e6e;}

/* Platzhalter sichtbar, aber unaufdringlich */
[data-todo]{position:relative;}
[data-todo]{padding-top:16px;}
[data-todo]::after{content:"Platzhalter";position:absolute;top:-4px;left:0;
  font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#5a4a2a;border:1px solid #3a3018;padding:1px 6px;border-radius:20px;}
.todo-body{border-left:1px solid #2a2416;padding:16px 0 16px 18px;margin-top:16px;color:#7a7a7a;font-size:15px;max-width:56ch;}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:120;background:var(--void);display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease .1s,visibility .8s ease .1s;}
#pre.done{opacity:0;visibility:hidden;}
#preNum{font-weight:200;font-size:clamp(60px,12vw,170px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
#preBar{position:absolute;left:var(--edge);right:var(--edge);bottom:calc(var(--edge) + 4px);height:1px;background:#222;}
#preBar i{display:block;height:100%;width:0;background:var(--paper);}

/* ---------- Seitenwechsel-Vorhang ---------- */
#veil{position:fixed;inset:0;z-index:95;pointer-events:none;display:flex;align-items:center;justify-content:center;}
#veil .sheet{position:absolute;inset:0;background:#000;transform:scaleY(0);transform-origin:bottom;}
#veil .cap{position:relative;z-index:2;opacity:0;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(26px,5.5vw,74px);text-transform:uppercase;}
#veil.in .sheet{transform:scaleY(1);transform-origin:bottom;transition:transform .42s cubic-bezier(.7,0,.35,1);}
#veil.in .cap{opacity:1;transition:opacity .3s ease .18s;}
#veil.out .sheet{transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.65,0,.35,1);}
#veil.out .cap{opacity:0;transition:opacity .2s ease;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:18px;height:var(--nav);padding:0 var(--edge);
  border-bottom:1px solid rgba(255,255,255,.85);background:rgba(0,0,0,.72);backdrop-filter:blur(8px);}
.wordmark{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.24em;white-space:nowrap;
  background:none;border:0;color:var(--paper);cursor:pointer;font-family:inherit;padding:0;}
.nav__links{display:flex;gap:24px;justify-content:center;flex-wrap:nowrap;}
.nav__links button{background:none;border:0;padding:0;cursor:pointer;color:var(--paper);font-family:inherit;
  opacity:.62;transition:opacity .25s;white-space:nowrap;}
.nav__links button:hover,.nav__links button[aria-current="page"]{opacity:1;}
.nav__links button[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;}
.nav__end{display:flex;align-items:center;gap:14px;}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.5);border-radius:70px;overflow:hidden;}
.lang button{appearance:none;background:transparent;border:0;cursor:pointer;color:var(--paper);opacity:.55;
  font-family:inherit;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  padding:6px 12px;transition:background-color .25s,color .25s,opacity .25s;}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--void);opacity:1;}
.lang button:hover{opacity:1;}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.5);border-radius:70px;
  color:var(--paper);font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 12px;cursor:pointer;}

/* ---------- pages ---------- */
.page{display:none;padding-top:var(--nav);}
.page.active{display:block;}
.page__head{padding:clamp(52px,10vh,120px) var(--edge) clamp(30px,5vh,60px);border-bottom:1px solid var(--line);}
.page__title{font-size:clamp(36px,8vw,110px);}
.page__lead{margin-top:clamp(18px,3vh,30px);}

/* ---------- frames ---------- */
.frame{position:relative;width:100%;overflow:hidden;background:#0b0b0b;isolation:isolate;}
.frame__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.frame__body{position:relative;z-index:3;padding:var(--edge);display:flex;flex-direction:column;}
.frame__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.05) 34%,rgba(0,0,0,.3) 64%,rgba(0,0,0,.92) 100%);}

/* ---------- hero ---------- */
.hero{height:clamp(540px,calc(100svh - var(--nav)),960px);margin-top:calc(var(--nav) * -1);padding-top:var(--nav);}
.hero .frame__body{height:100%;justify-content:flex-end;padding-bottom:clamp(26px,5vh,68px);}
.hero__media{transform:scale(1.04);}
.js .hero__media{animation:kb 30s ease-in-out infinite alternate;}
@keyframes kb{from{transform:scale(1.04);}to{transform:scale(1.13) translate3d(-1.4%,-1%,0);}}
.hero__mark{font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.86;
  font-size:clamp(48px,12.5vw,196px);margin:0 0 clamp(12px,2vh,24px);}
.js .hero__mark{filter:blur(20px);opacity:0;transform:translateY(12px);}
.js .hero__mark.lit{filter:blur(0);opacity:1;transform:none;
  transition:filter 1.4s cubic-bezier(.2,.6,.25,1),opacity 1.4s ease,transform 1.4s cubic-bezier(.2,.6,.25,1);}
.hero__line{max-width:36ch;font-size:clamp(15px,1.5vw,20px);line-height:1.42;margin:0;}
.hero__meta{position:absolute;top:calc(var(--nav) + var(--edge));right:var(--edge);text-align:right;opacity:.75;z-index:3;}

/* ---------- statement / lines ---------- */
.statement{padding:clamp(64px,12vh,160px) var(--edge);border-bottom:1px solid var(--line);}
.statement__text{font-size:clamp(30px,6.6vw,108px);max-width:16ch;}
.statement__foot{margin-top:clamp(24px,4vh,50px);display:flex;flex-wrap:wrap;gap:14px 48px;align-items:baseline;}
.lines span{display:block;overflow:hidden;}
.lines span > i{display:block;font-style:inherit;}
.js .lines span > i{transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.7,.25,1);}
.js .lines.lit span > i{transform:none;}
.js .lines.lit span:nth-child(2) > i{transition-delay:.1s;}
.js .lines.lit span:nth-child(3) > i{transition-delay:.2s;}

/* ---------- strips ---------- */
.strips{border-top:1px solid var(--line);}
.strips__head{padding:clamp(30px,5vh,58px) var(--edge) 4px;}
.strip{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr) minmax(0,5fr);gap:clamp(14px,3vw,54px);
  align-items:start;padding:clamp(24px,4.4vh,52px) var(--edge);border-bottom:1px solid var(--line);
  transition:background-color .4s;}
.strip:hover{background-color:#0a0a0a;}
.strip__name{font-size:clamp(20px,2.5vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;}
.strip__name em{font-style:normal;display:block;font-size:.44em;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:#6e6e6e;margin-top:9px;}
.strip__meta{display:flex;flex-direction:column;gap:6px;color:var(--smoke);text-align:right;}
.strip__meta b{color:var(--paper);font-weight:500;}

/* ---------- Tabellen (Preise) ---------- */
.tables{padding:clamp(44px,8vh,104px) var(--edge) clamp(30px,5vh,60px);border-top:1px solid var(--line);}
.tblwrap{overflow-x:auto;margin-top:22px;-webkit-overflow-scrolling:touch;}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;}
caption{text-align:left;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  color:#6e6e6e;padding-bottom:12px;}
th,td{text-align:left;padding:15px 20px 15px 0;border-bottom:1px solid var(--line-soft);}
thead th{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:#6e6e6e;
  border-bottom:1px solid #3a3a3a;padding-top:0;}
tbody th{font-weight:500;color:var(--paper);}
td{color:var(--dim);font-variant-numeric:tabular-nums;}
td.num{color:var(--paper);}
tbody tr:hover{background:#0a0a0a;}
.tnote{margin-top:20px;font-size:14px;color:#7a7a7a;max-width:62ch;line-height:1.6;}

/* ---------- snapshots rail ---------- */
.snaps{border-top:1px solid var(--line);padding:clamp(40px,7vh,86px) 0 clamp(34px,6vh,70px);}
.snaps__head{padding:0 var(--edge);display:flex;flex-wrap:wrap;gap:10px 40px;align-items:baseline;
  margin-bottom:clamp(22px,3.6vh,42px);}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--edge) 14px;
  scrollbar-width:thin;scrollbar-color:#333 transparent;}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:6px;}
.snap{position:relative;flex:0 0 auto;scroll-snap-align:start;width:clamp(190px,23vw,290px);
  aspect-ratio:4/5;overflow:hidden;background:#0b0b0b;}
.snap--reel{aspect-ratio:9/16;}
.snap img,.snap video{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.25,1);}
.snap:hover img,.snap:hover video{transform:scale(1.05);}
.snap__tag{position:absolute;left:10px;bottom:9px;z-index:2;font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.9);}

/* ---------- split (Bild + Text) ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-top:1px solid var(--line);}
.split__frame{min-height:clamp(380px,72vh,780px);}
.split__text{padding:clamp(44px,8vh,110px) var(--edge);display:flex;flex-direction:column;
  justify-content:center;gap:clamp(16px,2.4vh,28px);}
.split__head{font-size:clamp(26px,3.7vw,58px);max-width:16ch;}

/* ---------- Zertifikate ---------- */
.creds{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;}
.creds li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;padding:13px 0;
  border-top:1px solid var(--line-soft);align-items:baseline;}
.creds > li > span{color:#6e6e6e;}
.creds b span{color:var(--paper);}
.creds b{color:var(--paper);font-weight:500;}
.creds em{font-style:normal;color:var(--dim);display:block;margin-top:5px;font-size:12.5px;
  text-transform:none;letter-spacing:.01em;line-height:1.5;max-width:62ch;}

/* ---------- Stufen (Instructor) ---------- */
.levels{border-top:1px solid var(--line);}
.level{display:grid;grid-template-columns:auto minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,3vw,48px);
  align-items:start;padding:clamp(26px,4.6vh,56px) var(--edge);border-bottom:1px solid var(--line);
  transition:background-color .4s;}
.level:hover{background:#0a0a0a;}
.level__no{font-weight:200;font-size:clamp(30px,4.4vw,64px);line-height:.9;color:#3a3a3a;
  font-variant-numeric:tabular-nums;}
.level__name{font-size:clamp(19px,2.3vw,32px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;}
.level__meta{display:flex;flex-direction:column;gap:6px;color:var(--smoke);text-align:right;}
.level__meta b{color:var(--paper);font-weight:500;}

/* ---------- Trainer-Freisteller ---------- */
.coach{border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(44px,8vh,110px) var(--edge) 0;
  background:radial-gradient(120% 90% at 78% 55%, #171310 0%, #0a0a0a 46%, #000 78%);}
.coach__text{display:flex;flex-direction:column;gap:clamp(14px,2.2vh,24px);padding-bottom:clamp(44px,8vh,110px);}
.coach__head{font-size:clamp(28px,4.2vw,66px);}
.coach__cut{margin:0;align-self:end;position:relative;}
.coach__cut::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-1px;height:42%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 45%,#000 82%);pointer-events:none;}
.coach__cut img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.85));}
.js .coach__cut img{transform:translateY(16px);opacity:0;
  transition:transform 1.2s cubic-bezier(.2,.6,.25,1),opacity 1.2s ease;}
.js .coach__cut.is-in img{transform:none;opacity:1;}

/* ---------- teaser cards (Startseite) ---------- */
.teasers{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.teaser{background:none;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:left;cursor:pointer;color:var(--paper);font-family:inherit;
  padding:clamp(30px,5vh,60px) clamp(20px,3vw,44px);display:flex;flex-direction:column;gap:12px;
  transition:background-color .4s;}
.teaser:hover{background:#0a0a0a;}
.teaser h3{margin:0;font-size:clamp(19px,2.1vw,30px);font-weight:800;letter-spacing:-.02em;}
.teaser p{margin:0;font-size:14px;color:var(--dim);line-height:1.55;}
.teaser span{margin-top:auto;padding-top:16px;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.08em;color:#6e6e6e;}

/* ---------- voices ---------- */
.voices{border-top:1px solid var(--line);padding:clamp(48px,8.5vh,105px) var(--edge) clamp(20px,4vh,48px);}
.voices__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(24px,4vh,48px);}
.voice p{margin:0 0 15px;font-size:15px;line-height:1.65;color:#b2b2b2;}
.voice cite{font-style:normal;color:var(--paper);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;}

/* ---------- contact ---------- */
.book{border-top:1px solid var(--line);padding:clamp(52px,9vh,116px) var(--edge);
  display:flex;flex-direction:column;gap:clamp(18px,3vh,32px);}
.book__head{font-size:clamp(28px,5.2vw,88px);max-width:15ch;}
.book__cols{display:flex;flex-wrap:wrap;gap:14px 60px;color:#8e8e8e;}
.book__cols a{align-self:flex-start;color:#8e8e8e;text-decoration:none;border-bottom:1px solid #2e2e2e;transition:color .25s,border-color .25s;}
.book__cols a:hover{color:var(--paper);border-color:var(--paper);}

.ghost{align-self:flex-start;display:inline-flex;align-items:center;gap:13px;padding:15px 30px;
  border:1px solid var(--paper);border-radius:70px;background:transparent;color:var(--paper);font-family:inherit;
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer;
  transition:background-color .3s,color .3s;}
.ghost:hover,.ghost:focus-visible{background:var(--paper);color:var(--void);}
.ghost i{font-style:normal;transition:transform .3s;}
.ghost:hover i{transform:translateX(4px);}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;gap:22px 52px;justify-content:space-between;align-items:flex-end;
  padding:clamp(38px,6.5vh,84px) var(--edge) clamp(26px,4.5vh,50px);border-top:1px solid var(--line);color:var(--smoke);}
.foot a,.foot button{color:var(--smoke);text-decoration:none;background:none;border:0;padding:0;
  font-family:inherit;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;text-align:left;transition:color .25s;}
.foot a:hover,.foot button:hover{color:var(--paper);}
.foot__col{display:flex;flex-direction:column;gap:8px;}
.foot__mark{font-weight:800;font-size:clamp(28px,6vw,78px);letter-spacing:-.03em;line-height:.86;
  color:var(--paper);text-transform:uppercase;margin:0;}


/* ---------- Tradition: Text und Bild verschraenkt ---------- */
.trad{border-top:1px solid var(--line);padding:clamp(44px,8vh,110px) 0;}
.trad__head{padding:0 var(--edge);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(16px,3vw,48px);align-items:end;margin-bottom:clamp(26px,4.5vh,54px);}
.trad__name{font-size:clamp(30px,5vw,76px);font-weight:800;letter-spacing:-.03em;line-height:1;margin:0;}
.trad__sub{display:block;font-size:.3em;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#6e6e6e;margin-top:14px;}
.trad__meta{display:flex;flex-direction:column;gap:6px;color:var(--smoke);text-align:right;}
.trad__meta b{color:var(--paper);font-weight:500;}

.trad__flow{padding:0 var(--edge);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,66px);align-items:start;}
.trad__col{display:flex;flex-direction:column;gap:16px;}
.trad__col .prose{max-width:46ch;}

.shot{position:relative;overflow:hidden;background:#0b0b0b;}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.2,.6,.25,1);}
.shot:hover img{transform:scale(1.04);}
.shot figcaption{position:absolute;left:12px;bottom:10px;right:12px;z-index:2;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.95);}
.shot--tall{aspect-ratio:4/5;}
.shot--sq{aspect-ratio:1/1;}
.shot--wide{aspect-ratio:4/3;}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}

/* Freisteller im Fliesstext */
.cut{position:relative;margin:0;padding:8px 0 4px;}
.cut img{width:auto;max-width:100%;max-height:clamp(360px,52vh,560px);height:auto;display:block;
  margin-inline:auto;filter:drop-shadow(0 24px 54px rgba(0,0,0,.9));}
.cut--wide img{max-height:clamp(300px,42vh,460px);}
.cut figcaption{margin-top:12px;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.07em;color:#6e6e6e;}
.cut--glow{background:radial-gradient(85% 70% at 50% 55%,#1a1512 0%,#0b0b0b 55%,transparent 78%);}
.js .cut img{opacity:0;transform:translateY(18px);
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.6,.25,1);}
.js .cut.is-in img{opacity:1;transform:none;}

/* ---------- Urkunden ---------- */
.certs{border-top:1px solid var(--line);padding:clamp(44px,8vh,104px) var(--edge);}
.certs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2.6vw,32px);margin-top:clamp(24px,4vh,46px);}
.cert{margin:0;}
.cert img{width:100%;height:auto;display:block;border:1px solid #232323;}
.cert figcaption{margin-top:12px;font-size:12px;color:#8e8e8e;line-height:1.5;}
.cert figcaption b{display:block;color:var(--paper);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}

@media (max-width:960px){
  .trad__head{grid-template-columns:1fr;gap:10px;}
  .trad__meta{text-align:left;flex-direction:row;flex-wrap:wrap;gap:6px 24px;}
  .trad__flow{grid-template-columns:1fr;}
  .trio{grid-template-columns:1fr 1fr;}
}


/* grosse Freisteller nebeneinander */
.cutduo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,26px);align-items:stretch;
  background:radial-gradient(80% 65% at 50% 70%,#161310 0%,#0b0b0b 58%,transparent 80%);
  padding:14px 0 6px;}
.cutduo figure{margin:0;}
.cutduo img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 46px rgba(0,0,0,.9));}
.cutbig{margin:0;padding:10px 0 4px;
  background:radial-gradient(78% 62% at 50% 62%,#171310 0%,#0b0b0b 58%,transparent 82%);}
.cutbig img{width:100%;height:auto;display:block;max-height:none;
  filter:drop-shadow(0 26px 58px rgba(0,0,0,.92));}
.capt{margin-top:10px;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.07em;color:#6e6e6e;}
.js .cutduo img,.js .cutbig img{opacity:0;transform:translateY(16px);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.6,.25,1);}
.js .cutduo.is-in img,.js .cutbig.is-in img{opacity:1;transform:none;}
@media (max-width:700px){ .cutduo{grid-template-columns:1fr;} }


/* ---------- Reise als Stationen ---------- */
.trip{border-top:1px solid var(--line);padding:clamp(34px,6vh,76px) 0;}
.trip:first-of-type{border-top:0;}
.trip__in{padding:0 var(--edge);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(20px,4vw,60px);align-items:center;}
.trip--flip .trip__in{direction:rtl;}
.trip--flip .trip__in > *{direction:ltr;}
.trip__kicker{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  color:#6e6e6e;margin:0 0 14px;}
.trip__art{margin:0;position:relative;
  background:radial-gradient(76% 62% at 50% 60%,#171310 0%,#0b0b0b 58%,transparent 82%);
  padding:10px 0 4px;}
.trip__art img{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 50px rgba(0,0,0,.9));}
.trip__art--duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;}
.js .trip__art img{opacity:0;transform:translateY(16px);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.6,.25,1);}
.js .trip__art.is-in img{opacity:1;transform:none;}
@media (max-width:900px){ .trip__in{grid-template-columns:1fr;} .trip--flip .trip__in{direction:ltr;} }


/* Social-Buttons im Fuss */
.social{display:flex;gap:10px;margin-top:14px;}
.social a{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;
  border:1px solid #333;border-radius:70px;color:#9a9a9a;text-decoration:none;
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;
  transition:border-color .25s,color .25s,background-color .25s;}
.social a:hover,.social a:focus-visible{border-color:var(--paper);color:var(--void);background:var(--paper);}
.social svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto;}


/* zwei Aufnahmen uebereinander, Wechsel beim Darueberfahren */
.swap{position:relative;margin:0;padding:8px 0 4px;
  background:radial-gradient(78% 62% at 50% 60%,#171310 0%,#0b0b0b 58%,transparent 82%);}
.swap img{width:auto;max-width:100%;max-height:clamp(340px,48vh,520px);height:auto;display:block;
  margin-inline:auto;filter:drop-shadow(0 22px 50px rgba(0,0,0,.9));}
.swap img + img{position:absolute;inset:8px 0 4px;margin:auto;opacity:0;
  transition:opacity .55s ease;}
.swap:hover img + img,.swap:focus-within img + img{opacity:1;}
.swap:hover img:first-of-type,.swap:focus-within img:first-of-type{opacity:0;transition:opacity .55s ease;}
.swap figcaption{margin-top:10px;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.07em;color:#6e6e6e;text-align:center;}
.swap figcaption b{color:#9a9a9a;font-weight:500;}
.swap figcaption i{display:none;font-style:normal;}

/* ---------- reveal ---------- */
.rise{transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);}
.js .rise{opacity:0;transform:translateY(18px);}
.js .rise.is-in{opacity:1;transform:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--paper);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .js .rise{opacity:1;transform:none;}
  .js .lines span > i{transform:none;}
  .js .hero__mark{filter:none;opacity:1;transform:none;}
}

@media (max-width:1080px){ .nav__links{gap:16px;font-size:11px;} }
@media (max-width:960px){
  .split{grid-template-columns:1fr;}
  .split__frame{min-height:clamp(320px,50vh,460px);order:-1;}
  .strip,.level{grid-template-columns:1fr;gap:12px;}
  .strip__meta,.level__meta{text-align:left;flex-direction:row;flex-wrap:wrap;gap:6px 24px;}
  .creds li{grid-template-columns:1fr;gap:4px;}
  .level__no{display:none;}
}
@media (max-width:900px){
  .nav{grid-template-columns:auto 1fr;}
  .nav__links{position:fixed;top:var(--nav);left:0;right:0;background:rgba(0,0,0,.96);
    flex-direction:column;gap:0;padding:8px var(--edge) 20px;border-bottom:1px solid var(--line);
    display:none;}
  .nav__links.open{display:flex;}
  .nav__links button{padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;text-align:left;}
  .burger{display:inline-block;}
}

/* ==========================================================
   Tablet und Handy
   Alles hier greift erst unterhalb der Desktopbreite.
   Die Ansicht am Rechner bleibt unveraendert.
   ========================================================== */

@media (max-width:1024px){
  /* Flaechen, die man mit dem Daumen trifft: rund 44px hoch */
  .lang button{padding:12px 16px;}
  .burger{padding:12px 18px;}
  .wordmark{padding:14px 0;}
  .nav__links button{padding:14px 0;}
  .foot a,.foot button{padding:7px 0;}
  .book__cols a{padding-bottom:8px;}
  .social a{padding:12px 18px;}
  .ghost{padding:17px 30px;}
  /* Zeilen, die am Rechner als feine Beischrift funktionieren,
     werden auf kleinen Schirmen sonst unleserlich */
  .strip__name em{font-size:12px;letter-spacing:.06em;}
  .trad__sub{font-size:12px;}
}

/* Ohne Maus gibt es kein Darueberfahren: beide Aufnahmen nebeneinander */
@media (hover:none){
  .swap{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;}
  .swap img{max-height:clamp(180px,26vh,300px);}
  .swap img + img{position:static;inset:auto;opacity:1;margin:0 auto;}
  .swap figcaption{grid-column:1 / -1;}
  .swap figcaption b{display:none;}
  .swap figcaption i{display:inline;}
  /* Aufziehen beim Antippen bringt nichts, also ruhig lassen */
  .shot:hover img,.snap:hover img,.snap:hover video{transform:none;}
}

@media (max-width:900px){
  /* Trainer: Freisteller unter den Text statt daneben */
  .coach{grid-template-columns:1fr;gap:0;padding-bottom:0;}
  .coach__text{padding-bottom:clamp(24px,4vh,44px);}
  .coach__cut{width:min(420px,88%);margin-inline:auto;}
  .coach__head{font-size:clamp(28px,7vw,48px);}
}

@media (max-width:700px){
  /* Preistabelle so schmal setzen, dass alle vier Spalten sichtbar sind */
  table{min-width:0;font-size:13.5px;}
  thead th{font-size:10px;letter-spacing:.05em;}
  th,td{padding:13px 9px 13px 0;}
  th:last-child,td:last-child{padding-right:0;}
  caption{font-size:11px;}
  /* Reisestationen: die beiden Bilder untereinander */
  .trip__art--duo{grid-template-columns:1fr;gap:14px;}
  /* Kacheln bekommen etwas mehr Luft nach unten */
  .teaser{padding:26px var(--edge);}
}

@media (max-width:430px){
  .hero__line{font-size:15px;}
  .prose{font-size:15.5px;}
  .creds em{font-size:12px;}
  .cert figcaption{font-size:11.5px;}
  .snap{width:clamp(168px,58vw,230px);}
}

/* ------ Navigationsziele sind jetzt echte Verweise ------
   Browser geben Schaltflaechen eigene Vorgaben mit: eigene Schriftgroesse,
   keine Grossschreibung, keine Sperrung. Verweise erben stattdessen vom
   Umfeld. Damit sich am Erscheinungsbild nichts aendert, wird hier genau
   das nachgestellt, was der Browser vorher bei <button> gesetzt hat. */
/* Seit die Bilder Breite und Hoehe als Attribut tragen, damit beim Laden
   nichts springt, braucht es diese Zeile: sonst nimmt der Browser die
   Hoehe woertlich, statt sie zum Seitenverhaeltnis zu rechnen.
   Bilder mit eigener Groessenregel (.shot, .snap, .frame__media) sind
   nicht betroffen, Klassen wiegen schwerer als der Elementname. */
img{height:auto;}

a[data-go]{text-decoration:none;color:inherit;line-height:normal;}  /* Schaltflaechen setzen die Zeilenhoehe von sich aus auf normal,
     Verweise erben sie. Ohne das waeren Kacheln und Knoepfe hoeher. */
.nav__links a{background:none;border:0;padding:0;cursor:pointer;color:var(--paper);
  font:400 13.3333px "Manrope","Helvetica Neue",Arial,sans-serif;
  letter-spacing:normal;text-transform:none;text-align:center;
  opacity:.62;transition:opacity .25s;white-space:nowrap;}
.nav__links a:hover,.nav__links a[aria-current="page"]{opacity:1;}
.nav__links a[aria-current="page"]{text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:1px;}
.foot a[data-go]{color:var(--smoke);text-decoration:none;font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;transition:color .25s;}
.foot a[data-go]:hover{color:var(--paper);}
a.teaser,a.ghost,a.wordmark{display:flex;}
a.teaser{font-size:13.3333px;}   /* wie die Schaltflaeche vorher */
a.ghost{display:inline-flex;}
a.wordmark{display:inline-block;line-height:normal;}

/* Die Vorlage lief ohne Dokumenttyp und damit im Nachsichtsmodus des
   Browsers, in dem Tabellen die Zeilenhoehe nicht vom Umfeld erben. Die
   neuen Seiten haben einen Dokumenttyp, was richtig ist. Damit die
   Preistabellen Zeile fuer Zeile gleich hoch bleiben wie im abgenommenen
   Entwurf, wird das alte Verhalten hier ausdruecklich gesetzt. */
table{line-height:normal;}
@media (max-width:1024px){ .nav__links a{padding:14px 0;} }
@media (max-width:900px){
  .nav__links a{display:block;padding:13px 0;border-bottom:1px solid var(--line);
    font-size:14px;text-align:left;}
}