/* =================================================================
   asju REFORMER — Stylesheet v3
   Bildgeführt. Eine Schrift. Große Kleinbuchstaben-Headlines,
   winzige gesperrte Labels, flächige Farbblöcke als CTA.
   Schrift selbst gehostet (SIL OFL) — kein externer Font-Abruf.
   ================================================================= */

@font-face { font-family:"Jakarta"; src:url("../assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url("../assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url("../assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url("../assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }

:root {
  --ink:      #201417;
  --ink-2:    #4a3b3c;
  --ink-3:    #6a5b5c;
  --paper:    #f4f0ea;
  --sand:     #e5dbce;
  --peach:    #efd3be;
  --accent:   #a8442a;
  --line:     rgba(32, 20, 23, 0.14);
  --line-lt:  rgba(244, 240, 234, 0.22);

  --font: "Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1280px;
  --narrow: 760px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --sec: clamp(4rem, 9vw, 8.5rem);

  --fs-xl:    clamp(2.9rem, 8.2vw, 6.4rem);
  --fs-lg:    clamp(2.2rem, 5.6vw, 4.2rem);
  --fs-md:    clamp(1.6rem, 3.2vw, 2.6rem);
  --fs-sm:    clamp(1.25rem, 2vw, 1.6rem);
  --fs-lede:  clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-mini:  0.875rem;
  --fs-label: 0.7rem;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
/* Kein globales scroll-behavior:smooth.
   Es zwingt den Browser, bei JEDEM Scrollvorgang eine Animation einzurechnen —
   auf dem Handy kollidiert das mit dem nativen Nachlauf und das Scrollen hakt
   beim Wiederanfahren. Gebraucht wird es nirgends: Die Ankersprünge in asju.js
   schalten es ohnehin ab, und der Slider gibt sein `behavior:"smooth"` selbst mit.
   Sanft springt jetzt nur noch der Menü-Klick, der es explizit anfordert. */
html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
img,video,svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul,ol { margin:0; padding:0; list-style:none; }

body {
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.7;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--paper);padding:.8rem 1.25rem;font-size:var(--fs-mini)}
.skip-link:focus{left:0}

/* ---------- Typo ---------- */
h1,h2,h3,h4 { margin:0; color:var(--ink); font-weight:800; }

.xl, .lg, .md, .sm {
  font-weight:800;
  line-height:1.03;
  letter-spacing:-0.035em;
  color:var(--ink);
  text-wrap:balance;
}
.xl { font-size:var(--fs-xl); }
.lg { font-size:var(--fs-lg); }
.md { font-size:var(--fs-md); line-height:1.08; letter-spacing:-0.03em; }
.sm { font-size:var(--fs-sm); line-height:1.15; letter-spacing:-0.025em; }
.on-dark, .on-dark .xl, .on-dark .lg, .on-dark .md, .on-dark .sm { color:var(--paper); }

.label {
  display:block;
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:1.4rem;
  line-height:1.5;
}
.label--light { color:rgba(244,240,234,.72); }
.label--accent { color:var(--accent); }

p { margin:0 0 1.15em; }
p:last-child { margin-bottom:0; }
strong { font-weight:600; color:var(--ink); }
.lede { font-size:var(--fs-lede); line-height:1.6; color:var(--ink-2); }
.mini { font-size:var(--fs-mini); }
.muted { color:var(--ink-3); }

/* ---------- Layout ---------- */
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }
.narrow { max-width:var(--narrow); }
.section { padding-block:var(--sec); }
.section--sand { background:var(--sand); }
.section--ink  { background:var(--ink); color:rgba(244,240,234,.8); }
.section--peach{ background:var(--peach); }
.section--ink h1,.section--ink h2,.section--ink h3 { color:var(--paper); }
.section--ink strong { color:var(--paper); }
.head { max-width:52rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.head .lede { margin-top:1.35rem; }
.stack>*+* { margin-top:1.15em; }

/* ---------- Buttons ---------- */
.cta {
  display:flex; align-items:center; justify-content:center;
  min-height:74px; padding:1.1rem 2.5rem;
  background:var(--peach); color:var(--ink);
  font-size:var(--fs-label); font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase; text-align:center;
  transition:background-color .2s ease, color .2s ease;
}
.cta:hover { background:var(--ink); color:var(--paper); }
.cta--ink { background:var(--ink); color:var(--paper); }
.cta--ink:hover { background:var(--peach); color:var(--ink); }
.cta--outline { background:transparent; border:1px solid var(--line); color:var(--ink); }
.cta--outline:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.cta--light { background:transparent; border:1px solid var(--line-lt); color:var(--paper); }
.cta--light:hover { background:var(--paper); color:var(--ink); }
.cta--sm { min-height:0; padding:.75rem 1.4rem; }

.cta-row { display:grid; gap:0; margin-top:clamp(2rem,4vw,3rem); }
@media (min-width:640px){ .cta-row { grid-auto-flow:column; grid-auto-columns:minmax(0,max-content); gap:1rem; } }

.tlink {
  display:inline-block;
  font-size:var(--fs-label); font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--accent);
  padding-bottom:6px;
}
.tlink:hover { color:var(--accent); }
.on-dark .tlink, .section--ink .tlink { color:var(--paper); border-bottom-color:var(--peach); }

/* ---------- Header ---------- */
.hdr {
  position:fixed; inset:0 0 auto 0; z-index:120;
  transition:background-color .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.hdr__in { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px; }
.hdr__logo img { height:34px; width:auto; }
.hdr__logo .on-photo { display:block; }
.hdr__logo .on-solid { display:none; }

.hdr[data-solid="true"] { background:var(--paper); border-bottom-color:var(--line); }
.hdr[data-solid="true"] .hdr__logo .on-photo { display:none; }
.hdr[data-solid="true"] .hdr__logo .on-solid { display:block; }
.hdr[data-solid="true"] .nav a { color:var(--ink-2); }
.hdr[data-solid="true"] .burger span,
.hdr[data-solid="true"] .burger span::before,
.hdr[data-solid="true"] .burger span::after { background:var(--ink); }

.nav ul { display:flex; align-items:center; gap:clamp(1rem,2vw,1.9rem); }
.nav a {
  font-size:var(--fs-label); font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(244,240,234,.9);
  padding-block:.4rem; border-bottom:1px solid transparent;
}
.nav a:hover { border-bottom-color:currentColor; }
.nav a[aria-current="page"] { border-bottom-color:var(--peach); }
.nav li:last-child { display:none; }          /* Buchen-Block nur im Mobilmenue */
@media (max-width:960px){ .nav li:last-child { display:block; } }

.burger { display:none; width:44px; height:44px; align-items:center; justify-content:center; margin-right:-.6rem; }
.burger span { display:block; width:22px; height:1.5px; background:var(--paper); position:relative; }
.burger span::before,.burger span::after { content:""; position:absolute; left:0; width:22px; height:1.5px; background:inherit; }
.burger span::before{top:-7px} .burger span::after{top:7px}

@media (max-width:960px){
  .burger{display:flex}
  .hdr__cta{display:none}

  /* Vollbild statt Klappkasten. Ein kleines Kaestchen mit Trennstrichen
     wirkt technisch; ein ruhiges Vollbild mit grosser Schrift wirkt wie ein
     eigener Ort. Kein Rahmen, keine Linien, viel Luft. */
  .nav {
    position: fixed; inset: 0;
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    padding: 6rem var(--pad) 4rem;
    /* display statt opacity: ein bildschirmfuellendes fixiertes Element mit
       Deckkraft-Uebergang bleibt sonst als eigene Grafikebene bestehen, auch
       wenn es unsichtbar ist. Der Preis ist das fehlende Einblenden. */
    display: none;
    overflow-y: auto;
  }
  .nav[data-open="true"]{ display: flex; }

  .nav ul {
    flex-direction: column; align-items: center; gap: 0;
    width: 100%;
  }
  .nav li { border: 0; }

  .nav a {
    display: block;
    padding: .78rem 0;
    color: var(--ink);
    font-size: clamp(2rem, 9vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-transform: none;
    border: 0;
    text-align: center;
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--accent); border: 0; }

  /* Der Buchen-Knopf bleibt eine Schaltflaeche und wird nicht zur Zeile */
  .nav .cta {
    margin-top: 2.25rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 1.1rem 2.5rem;
  }

  /* Logo und Burger liegen ueber dem Overlay */
  .hdr .burger, .hdr__logo { position: relative; z-index: 2; }
  .hdr:has(.nav[data-open="true"]) .burger span,
  .hdr:has(.nav[data-open="true"]) .burger span::before,
  .hdr:has(.nav[data-open="true"]) .burger span::after { background: var(--ink); }
  /* Burger wird im offenen Zustand zum Kreuz */
  .hdr:has(.nav[data-open="true"]) .burger span { background: transparent; }
  .hdr:has(.nav[data-open="true"]) .burger span::before { top: 0; transform: rotate(45deg); }
  .hdr:has(.nav[data-open="true"]) .burger span::after  { top: 0; transform: rotate(-45deg); }
  .burger span::before, .burger span::after { transition: transform .3s ease, top .3s ease; }

  /* Logo im offenen Menue dunkel */
  .hdr:has(.nav[data-open="true"]) .hdr__logo .on-photo { display: none; }
  .hdr:has(.nav[data-open="true"]) .hdr__logo .on-solid { display: block; }
  .hdr:has(.nav[data-open="true"]) { background: var(--paper); border-bottom-color: transparent; }
}

/* ---------- Hero ---------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media { position:absolute; inset:0; }
.hero__media picture { display:block; width:100%; height:100%; }
.hero__media img { width:100%; height:100%; object-fit:cover; }
.hero__media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(32,20,23,.50) 0%, rgba(32,20,23,.14) 30%, rgba(32,20,23,.68) 76%, rgba(32,20,23,.88) 100%),
    linear-gradient(90deg, rgba(32,20,23,.55) 0%, rgba(32,20,23,.18) 46%, rgba(32,20,23,0) 72%);
}
.hero__in { position:relative; z-index:2; width:100%; padding-block:clamp(3rem,7vw,6rem); }
.hero .label { color:rgba(244,240,234,.82); margin-bottom:1.5rem; }
.hero .xl { color:var(--paper); max-width:16ch; }
.hero__lede { color:rgba(244,240,234,.88); font-size:var(--fs-lede); max-width:44ch; margin-top:1.75rem; }
.hero__cta { display:grid; gap:0; margin-top:clamp(2rem,4vw,3rem); max-width:640px; }
@media (min-width:640px){ .hero__cta{grid-template-columns:1fr 1fr; gap:1rem;} }

.hero__strip {
  position:relative; z-index:2; background:var(--ink); color:rgba(244,240,234,.75);
}
.hero__strip ul { display:grid; gap:.4rem 2.5rem; padding-block:1.15rem; }
@media (min-width:760px){ .hero__strip ul{grid-auto-flow:column;justify-content:space-between} }
.hero__strip li { font-size:var(--fs-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; }

/* ---------- Bildband ---------- */
.band { position:relative; min-height:clamp(360px,58vw,620px); display:flex; align-items:center; overflow:hidden; }
.band__media { position:absolute; inset:0; }
.band__media img { width:100%; height:100%; object-fit:cover; }
.band__media::after { content:""; position:absolute; inset:0; background:rgba(32,20,23,.70); }
.band__in { position:relative; z-index:2; width:100%; padding-block:clamp(3rem,7vw,5rem); }
.band .lg, .band .md { color:var(--paper); max-width:20ch; }
.band p { color:rgba(244,240,234,.85); max-width:46ch; }

/* ---------- Karten mit Bild ---------- */
.cards { display:grid; gap:clamp(1.75rem,3vw,2.5rem); }
@media (min-width:820px){ .cards--3{grid-template-columns:repeat(3,1fr)} .cards--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:640px) and (max-width:1023px){ .cards--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .cards--4{grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,2.5rem)} }
.card { display:flex; flex-direction:column; }
.card__media { aspect-ratio:4/3; overflow:hidden; background:var(--sand); margin-bottom:1.6rem; }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__media img { transform:scale(1.03); }
.card .label { margin-bottom:.9rem; }
.card .sm { margin-bottom:.9rem; }
.card p { font-size:var(--fs-body); }
.card .tlink { margin-top:auto; padding-top:1.5rem; align-self:flex-start; }

/* ---------- Split ---------- */
.split { display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:880px){ .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(3rem,6vw,6rem)} }
.split--media { align-items:center; }
.split__img img { width:100%; aspect-ratio:var(--ar, 4/5); object-fit:cover; }

/* ---------- Zahlenreihe ---------- */
.figs { display:grid; gap:clamp(1.5rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.fig__n { font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.section--ink .fig__n { color:var(--paper); }
.fig__t { font-size:var(--fs-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-top:.85rem; line-height:1.6; }
.section--ink .fig__t { color:rgba(244,240,234,.6); }

/* ---------- Schritte ---------- */
.steps { border-top:1px solid var(--line); }
.step { border-bottom:1px solid var(--line); padding-block:clamp(1.5rem,3vw,2.1rem); display:grid; gap:.6rem 2.5rem; }
@media (min-width:720px){ .step{grid-template-columns:5rem minmax(0,1fr)} }
.step__n { font-size:var(--fs-label); font-weight:600; letter-spacing:.18em; color:var(--accent); padding-top:.45rem; }
.step .sm { margin-bottom:.6rem; }

/* ---------- Preisblöcke ---------- */
.prices { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:760px){ .prices{grid-template-columns:repeat(3,1fr)} }
.price { background:var(--paper); padding:clamp(1.75rem,3vw,2.5rem); display:flex; flex-direction:column; }
.section--sand .price { background:var(--paper); }
.price .label { margin-bottom:1.6rem; }
.price__v { font-size:clamp(2rem,4vw,2.9rem); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.price__u { font-size:var(--fs-mini); color:var(--ink-3); margin-top:.8rem; }
.price__n { font-size:var(--fs-mini); color:var(--ink-3); margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line); }

/* =================================================================
   WISCHEN AUF DEM HANDY
   Bis 819 px werden gekennzeichnete Container zu horizontalen
   Slidern mit Einrasten. Ab 820 px greift wieder das normale Raster,
   das JS entfernt dort auch die Punkte. Kein Fremdcode, native
   Trägheit — auf iOS fühlt sich das an wie eine App.
   ================================================================= */
@media (max-width: 819px) {
  /* Natives Scrollen mit Einrasten — genau wie studio19 es macht.
     Das fuehlt sich weich an, weil der Browser sein eigenes Schwungverhalten
     benutzt. Eine Steuerung per Skript wirkt dagegen immer abgehackt.
     scroll-snap-stop verhindert, dass Karten uebersprungen werden. */
  .swipe {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hier stand touch-action: pan-x. Der Kommentar dazu war falsch: pan-x
       laesst am Slider ausschliesslich waagerechte Gesten zu und sperrt
       senkrechte. Wer den Finger auf einer Karte aufsetzt, kann die Seite
       danach nicht mehr hoch- oder runterscrollen — nach einem schnellen
       Wisch wirkt das, als sei die Seite eingefroren, obwohl sie laeuft.
       Ohne die Angabe entscheidet der Browser nach der ersten Fingerbewegung
       selbst, welche Achse gemeint ist. Genau das ist hier richtig. */
    touch-action: pan-x pan-y pinch-zoom;
    padding-inline: var(--pad);
    margin-inline: calc(var(--pad) * -1);
    scroll-padding-inline-start: var(--pad);
    scrollbar-width: none;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }

  .swipe.steps, .swipe.courses { border-top: 0; }
  .swipe > .step, .swipe > .course {
    border-bottom: 0; border-top: 1px solid var(--line);
    padding-top: 1.5rem; padding-bottom: 0; align-content: start;
  }
  .section--ink .swipe > .step, .section--ink .swipe > .course { border-top-color: var(--line-lt); }
  .swipe > .card .card__media { aspect-ratio: 3/2; }

  .swipe-punkte { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
  .swipe-punkte button {
    -webkit-appearance: none; appearance: none; border: 0; padding: 0; cursor: pointer;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ink); opacity: .22;
    transition: opacity .25s ease, transform .25s ease;
  }
  .swipe-punkte button[data-aktiv="true"] { opacity: 1; transform: scale(1.4); }
  .section--ink .swipe-punkte button { background: var(--paper); }
}
@media (min-width: 820px) { .swipe-punkte { display: none; } }

/* Ab 820 px gibt es keinen Slider mehr. Die Karten liegen aber weiterhin in
   der Bahn, die das Skript eingezogen hat — also muss die Bahn dort das
   Raster uebernehmen, sonst stapelt sich alles untereinander. */
@media (min-width: 820px) {
  .swipe { display: grid; }
}

/* =================================================================
   ANTIPPBARE FLÄCHEN AUF DEM HANDY
   Fingerkuppen treffen keine 18 Pixel hohen Zeilen. Apple und Google
   nennen 44 px als Mindestmass. Betroffen waren die Fusszeilen-Links,
   die Navigation im Kopf und der Zurueck-Link auf den Rechtsseiten.
   Der Abstand waechst dabei nach innen, die Optik bleibt.
   ================================================================= */
@media (max-width: 819px) {
  /* Logo im Kopf fuehrt nach oben — muss also auch treffbar sein */
  .hdr__logo { display: inline-flex; align-items: center; padding-block: .35rem; }
  /* Textlinks mit Unterstrich */
  .tlink { padding-block: .72rem; }

  .ftr a,
  .ftr__bot .link-button {
    display: inline-block;
    padding-block: .62rem;          /* 18 px Text + 2 x 10 px = 44 px */
  }
  .ftr li { margin-bottom: 0; }
  .ftr__bot ul { gap: 0 1.6rem; }
  .ftr__soc a { padding-block: .62rem; }
}

@media (max-width: 819px) {
  /* Hochkantbilder fressen auf dem Handy den halben Bildschirm. Ein ruhigeres
     Verhaeltnis genuegt als Auftakt — der Abschnitt beginnt danach schneller. */
  .split__img { aspect-ratio: 4/3 !important; }
  .split__img img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Footer ---------- */
.ftr { background:var(--ink); color:rgba(244,240,234,.72); padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; }
.ftr h3 { font-size:var(--fs-label); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(244,240,234,.55); margin-bottom:1.3rem; }
.ftr a:hover { color:var(--paper); }
.ftr__grid { display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.ftr li { margin-bottom:.6rem; font-size:var(--fs-mini); }
.ftr address { font-style:normal; font-size:var(--fs-mini); line-height:1.85; }
.ftr__logo img { height:40px; width:auto; margin-bottom:1.4rem; }
.ftr__bot { margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem; border-top:1px solid var(--line-lt); display:flex; flex-wrap:wrap; gap:.8rem 1.8rem; align-items:center; font-size:var(--fs-mini); }
.ftr__bot ul { display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; }
/* Der Abstand der Spaltenlisten darf hier nicht greifen, sonst sitzen die
   Rechtslinks hoeher als Instagram-Link und Copyright. */
.ftr__bot li { margin-bottom:0; }
.ftr__bot li, .ftr__bot .link-button, .ftr__soc span { line-height:1.5; }
.ftr__bot .link-button { font-size:var(--fs-mini); text-decoration:underline; text-underline-offset:3px; }
.ftr__soc { display:inline-flex; align-items:center; gap:.55rem; }
.ftr__soc svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; }

/* ---------- Buchen-Leiste am unteren Rand ----------
   Frueher klebte sie dauerhaft fest und nahm ein Fuenftel des Bildschirms.
   Jetzt liegt sie nur am Ende der Seite. Wer buchen will, findet den Weg im
   Menue und in jedem Abschnitt — eine Dauerleiste ist Platzverschwendung.
   studio19 hat aus demselben Grund keine. */
.mcta { display: none; }

/* ---------- Cookie ---------- */
.cookie-banner { position:fixed; z-index:300; left:0; right:0; bottom:0; background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -10px 40px rgba(32,20,23,.16); }
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{max-width:var(--wrap);margin:0 auto;padding:1.6rem var(--pad)}
.cookie-banner__title{font-size:var(--fs-sm);font-weight:800;letter-spacing:-.02em;margin-bottom:.7rem}
.cookie-banner__text{font-size:var(--fs-mini);max-width:62rem}
.cookie-banner__options{display:flex;flex-wrap:wrap;gap:1.3rem;margin:1.1rem 0 1.3rem}
.cookie-option{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-mini)}
.cookie-banner__actions{display:flex;flex-wrap:wrap;gap:.7rem}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Sprungziele unter dem fixierten Header ---------- */
/* Sprungziel endet exakt an der Unterkante des Headers.
   --hdr-h wird in asju.js aus der echten Headerhoehe gesetzt. */
section[id], div[id] { scroll-margin-top: var(--hdr-h, 75px); }

/* ---------- Kursarten ---------- */
.courses { border-top:1px solid var(--line); }
.course {
  border-bottom:1px solid var(--line);
  padding-block:clamp(1.6rem,3vw,2.3rem);
  display:grid; gap:.5rem 3rem;
}
@media (min-width:780px){ .course { grid-template-columns:minmax(0,16rem) minmax(0,1fr); align-items:start; } }
.course__claim { font-weight:600; color:var(--ink); margin-bottom:.5rem; }
.course__lvl {
  font-size:var(--fs-label); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-top:.5rem;
}

/* ---------- FAQ ---------- */
.faq { border-top:1px solid var(--line); }
.faq__item { border-bottom:1px solid var(--line); }
.faq__item summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
  padding-block:1.3rem;
  font-size:var(--fs-sm); font-weight:800; letter-spacing:-.025em;
  color:var(--ink);
}
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after {
  content:"+"; font-weight:400; font-size:1.5rem; line-height:1.1;
  color:var(--accent); flex:none;
}
.faq__item[open] summary::after { content:"–"; }
.faq__a { padding-bottom:1.5rem; max-width:52rem; }

/* ---------- Preistabellen ---------- */
.ptables { display:grid; gap:clamp(2.5rem,5vw,3.5rem); }
@media (min-width:900px){ .ptables { grid-template-columns:repeat(2,1fr); gap:clamp(2.5rem,5vw,4rem); } }
.ptable { width:100%; border-collapse:collapse; font-size:var(--fs-body); }
.ptable caption {
  text-align:left; font-size:var(--fs-sm); font-weight:800;
  letter-spacing:-.025em; color:var(--ink);
  padding-bottom:1rem;
}
.ptable th, .ptable td {
  text-align:left; padding:.85rem 1rem .85rem 0;
  border-bottom:1px solid var(--line); font-weight:400; color:var(--ink-2);
}
.ptable thead th {
  font-size:var(--fs-label); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); padding-bottom:.6rem;
}
.ptable tbody th { color:var(--ink); font-weight:500; }
.ptable td:last-child, .ptable th:last-child { text-align:right; padding-right:0; white-space:nowrap; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom:0; }

/* ---------- Widget-Rahmen ---------- */
.widget { background:var(--paper); border:1px solid var(--line); padding:clamp(.75rem,2vw,1.5rem); min-height:340px; }
/* Reservierte Hoehe fuer die nachgeladenen Eversports-Widgets, gemessen an
   der fertig geladenen Seite. Ohne das springt der Inhalt unter dem Finger. */
.widget--kursplan { min-height:1040px; }
.widget--preise   { min-height:492px; }

/* ---------- Karten ohne Bild ---------- */
.card:not(:has(.card__media)) {
  border-top:1px solid var(--line);
  padding-top:1.75rem;
}

.section--ink .card:not(:has(.card__media)) { border-top-color:var(--line-lt); }

/* Abstand zwischen Zwischenüberschrift und Text auch außerhalb von .card */
.cards h3 { margin-bottom: .75rem; }


/* =================================================================
   ZULETZT: Handy-Feinschliff
   Diese Regeln stehen bewusst am Dateiende, damit sie die Grundregeln
   weiter oben ueberschreiben. Gleiche Spezifitaet entscheidet die
   Reihenfolge — davor wurden sie wirkungslos ueberschrieben.
   ================================================================= */
@media (max-width: 819px) {
  /* Die Fragen waren in Ueberschriftengroesse gesetzt — auf dem Handy wurde
     jeder Eintrag dadurch 77 px hoch und der Block fast zwei Bildschirme lang.
     Kleinere Schrift, engere Zeilen, weniger Polster. Die Trefferflaeche
     bleibt mit 56 px ueber dem Mindestmass von 44 px. */
  .faq__item summary {
    font-size: 1.0625rem;
    line-height: 1.45;
    letter-spacing: -0.015em;
    padding-block: 1rem;
    gap: 1.25rem;
  }
  .faq__a { padding-bottom: 1.1rem; }
  .faq__a p { font-size: 1rem; line-height: 1.6; }
}


/* ---------- ZULETZT: Footer auf dem Handy kuerzen ----------
   Auf dem Handy stehen die vier Footer-Spalten untereinander. Zusammen mit den
   Rechtslinks waren das 1245 px — anderthalb Bildschirme, nur um zum Impressum
   zu kommen.

   Zwei Eingriffe:
   1. Die Abschnittsliste faellt weg. Sie wiederholt die Navigation, an der man
      beim Scrollen gerade erst vorbeikam.
   2. Studio und Oeffnungszeiten stehen nebeneinander statt untereinander.
      Beide Bloecke sind schmal genug dafuer.
   ---------------------------------------------------------- */
@media (max-width: 819px) {
  .ftr__nav { display: none; }

  .ftr__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.25rem;
  }
  /* Logo und Beschreibung brauchen die volle Breite */
  .ftr__logo { grid-column: 1 / -1; }

  /* Die Rechtslinks nebeneinander umbrechen lassen, nicht stapeln */
  .ftr__bot ul { gap: .5rem 1.25rem; }
}

/* Feinschliff Footer auf dem Handy (Reihenfolge: muss nach .ftr a stehen)

   1. Instagram: `.ftr a { display:inline-block }` weiter oben ist spezifischer
      als `.ftr__soc` und kippt das Flex-Layout — dann steht das Icon ueber dem
      Namen statt daneben. Mit `.ftr .ftr__soc` gewinnt die Flex-Regel wieder.
   2. Rechtslinks eine Spur kleiner und enger, ohne die Antippflaeche unter die
      empfohlenen 44 px zu druecken: 13 px Text + 2 x 9 px Polster = 44 px.
   3. Unter dem letzten Link fehlte Luft — das Polster der Zeile zaehlt optisch
      nicht als Abstand. */
@media (max-width: 819px) {
  .ftr .ftr__soc {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
  }
  .ftr .ftr__soc svg { flex: none; }

  .ftr__bot li,
  .ftr__bot .link-button,
  .ftr__soc span { font-size: .8125rem; }

  .ftr__bot ul { gap: 0 1.1rem; }

  .ftr__bot li a,
  .ftr__bot .link-button { padding-block: .5625rem; }

  .ftr__bot { padding-bottom: .75rem; }
}

@media (max-width: 819px) {
  /* Browser geben Buttons ein eigenes Innenpolster. Dadurch stand
     „Cookie-Einstellungen" 6 px weiter rechts als die Links darueber. */
  .ftr__bot .link-button { padding-inline: 0; }

  /* Das Copyright wird auf breiten Schirmen per margin-left:auto nach rechts
     geschoben. Auf dem Handy steht es dadurch allein und eingerueckt in der
     letzten Zeile — hier gehoert es an dieselbe Kante wie alles andere. */
  .ftr__bot > .mini { margin-left: 0 !important; }
}

/* ---------- ZULETZT: Hero-Knoepfe auf dem Handy ----------
   Die beiden Knoepfe im Hero waren mit 74 px Hoehe und 2,5 rem Innenpolster
   fuer den kleinen Bildschirm zu wuchtig — zusammen mit dem Abstand dazwischen
   nahmen sie ein Drittel des ersten Bildschirms ein.

   Halbiert: 40 px Hoehe statt 74. Das liegt unter den empfohlenen 44 px fuer
   Antippflaechen, ist hier aber vertretbar, weil beide Knoepfe die volle
   Spaltenbreite einnehmen — daneben zu treffen ist kaum moeglich.
   ---------------------------------------------------------- */
@media (max-width: 819px) {
  .hero__cta .cta {
    min-height: 40px;
    padding: .55rem 1.25rem;
  }
}

/* Hero-Ueberschrift einzeilig halten.
   „asju — as you are." ist 8,33-mal so breit wie hoch. Bei 390 px Bildschirm
   und 2 x 20 px Innenabstand bleiben 350 px, also passt die Schrift bis 42 px —
   die Grundgroesse liegt aber bei 46,4 px, deshalb brach „you are." um.
   10,4vw haelt die Zeile auch auf schmalen Geraeten (320 px) zusammen. */
@media (max-width: 819px) {
  .hero__in h1.xl { font-size: min(2.6rem, 10.4vw); }
}

/* Kein translateZ(0) am Hero-Bild.
   Es sollte das Neuzeichnen sparen, erzwingt auf dem iPhone aber eine eigene
   Grafikebene in Geraetepixeln: 390 x 844 CSS-Pixel werden bei dreifacher
   Aufloesung zu 1170 x 2532 — knapp 12 MB, die dauerhaft im Grafikspeicher
   liegen. Zusammen mit den restlichen Ebenen einer 10.000 Pixel hohen Seite
   reicht das, damit Safari den Tab beim schnellen Scrollen wegwirft. */