/* =============================================================================
   STIFT. PILATES — Stylesheet
   Portiert aus dem Claude-Design "Stift Website - Pre-Launch.html".
   Handgeschrieben, kein Build-Step, keine externe Abhängigkeit.
   ========================================================================== */

@import url('./fonts/fonts.css');

/* --- Reset + Marken-Tokens ------------------------------------------------ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  /* Markenpalette laut Brand Guide v2 */
  --bg:#0d0c0a;          /* ANTHRACITE */
  --stone:#16140f;       /* STONE      */
  --line:#211f1a;
  --bone:#ebe5d8;        /* BONE       */
  --ink:#0d0c0a;
  --bone-dim:#8d877a;
  --mute:#56524a;
  --steel:#8a8782;       /* STEEL — Akzent, max. 5 % Fläche, nie im Logo */
}

html{
  scroll-behavior:smooth;
  /* iOS Safari skaliert Text im Querformat sonst eigenmaechtig hoch und
     zerlegt damit die Zeilenlaengen. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  background:var(--bg); color:var(--bone);
  font-family:'Inter Tight', sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased;
  /* Ohne das setzt iOS beim Antippen graue Kaesten ueber Links und Buttons —
     auf dunklem Grund besonders auffaellig. Fokus und :hover bleiben davon
     unberuehrt, die Bedienbarkeit leidet also nicht. */
  -webkit-tap-highlight-color:transparent;
}
::selection{ background:var(--bone); color:var(--ink); }
a{ color:var(--bone); text-decoration:none; }
a:hover{ color:var(--steel); }
img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(.16) contrast(1.04) brightness(.8); }
/* picture ist von Haus aus inline und hat keine Höhe — ohne das hier fällt das
   height:100% der Bilder auf 0 zurück und die Panels bleiben schwarz. */
picture{ display:block; width:100%; height:100%; }

/* iPhone im Querformat: Auf der Seite mit der Kamera-Insel schneidet das System
   einen Streifen ab. Ohne diese Regel laufen Texte darunter und sind je nach
   Haltung des Geräts halb verdeckt. Ein Polster am body verschiebt die ganze
   Seite — die fest positionierte Navigation ist davon nicht betroffen, die
   bringt ihre eigenen Abstände mit. Im Hochformat sind die Werte 0, die Regel
   ändert dort also nichts. Keine Breite auf der Seite nutzt 100vw, es kann
   dadurch kein waagerechter Überlauf entstehen. */
@media (orientation: landscape){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}

/* --- Zugänglichkeit ------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--bone); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; padding:14px 20px;
}
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--steel); outline-offset:3px; }

/* --- Typo-Bausteine ------------------------------------------------------- */
.lo{ --s:26px; display:inline-flex; flex-direction:column; align-items:flex-start; }
.lo .stift{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:var(--s); letter-spacing:0; line-height:.748; color:var(--bone); }
.lo .pilates{ font-family:'Source Sans 3',sans-serif; font-weight:400; font-size:calc(var(--s)*.255); letter-spacing:.5641em; line-height:1; color:var(--bone); }
.lo.center{ align-items:center; }
.lo.center .pilates{ position:relative; left:.219em; }

/* Pfeil fuer Links, die die Seite verlassen.
   Vorher stand hier das Zeichen ↗ (U+2197). Das steht in der Emoji-Liste — iOS
   entscheidet dann selbst und zeigt ein blaues Emoji-Kaestchen statt eines
   Schriftzeichens. Der Pfeil wird deshalb gezeichnet: er nimmt die Textfarbe
   (currentColor), waechst mit der Schriftgroesse (em) und haengt an keinem
   Zeichensatz. Strichstaerke 1px passt zu den uebrigen Linien der Seite. */
.arr{
  display:inline-block; position:relative;
  width:.62em; height:.62em;
  margin-left:.55em;
  vertical-align:-.04em;
}
.arr::before{           /* Schaft, diagonal von unten links nach oben rechts */
  content:''; position:absolute; left:0; bottom:0;
  width:135%; height:1px; background:currentColor;
  transform-origin:0 50%; transform:rotate(-45deg);
}
.arr::after{            /* Spitze */
  content:''; position:absolute; right:0; top:0;
  width:.34em; height:.34em;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

.mono{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-dim); }
.beb{ font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.02em; line-height:.88; }

/* --- Reveal-Animation ----------------------------------------------------- */
.rv{ opacity:0; transform:translateY(30px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-bg img{ transform:none !important; }
}
/* Ohne JavaScript bleibt nichts unsichtbar */
.no-js .rv{ opacity:1; transform:none; }

/* --- Navigation -----------------------------------------------------------
   Bewusst über die Klasse .site-nav und nicht über den Element-Selektor nav —
   sonst würde auch die Rechtliches-Navigation im Footer oben festgetackert. */
.site-nav{ position:fixed; top:0; left:0; right:0; z-index:80; display:flex; justify-content:space-between; align-items:center; padding:20px 36px; padding-left:max(36px, env(safe-area-inset-left)); padding-right:max(36px, env(safe-area-inset-right)); mix-blend-mode:difference; }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone); opacity:.75; transition:opacity .3s; }
.nav-links a:hover{ opacity:1; }
/* Umbruch bei 800 statt 860 Pixeln.
   Gemessen: alle Menuepunkte brauchen mit dem urspruenglichen Abstand von 30px
   zusammen 826 Pixel. Ein iPad Air, iPad Pro 11" oder iPad 10.9" hat im
   Hochformat 820 bis 834 Punkte — die lagen also knapp unter dem alten Umbruch
   und verloren die komplette Navigation, obwohl der Platz da war.
   Zwischen 800 und 900 Pixeln ruecken die Punkte auf 20px zusammen, damit sie
   sicher passen (766 statt 826 Pixel Bedarf). Darunter — iPad mini im
   Hochformat und alle Telefone — bleibt es beim schlanken Kopf des Designs. */
@media(min-width:801px) and (max-width:900px){ .nav-links{ gap:20px; } }
@media(max-width:800px){ .nav-links a:not(.book){ display:none; } }

.book{ border:1px solid var(--bone); padding:11px 20px; opacity:1 !important; }
.book:hover{ background:var(--bone); color:var(--ink); }

/* --- Buttons -------------------------------------------------------------- */
.btn{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone); border:1px solid var(--steel); padding:13px 24px; transition:all .3s; cursor:pointer; background:none; }
.btn:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn.solid{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn.solid:hover{ background:transparent; color:var(--bone); }

/* --- Hero ----------------------------------------------------------------- */
.hero{ position:relative; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-typo{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%, #191712 0%, var(--bg) 75%); }
/* Radiale Abdunklung ueber dem Hero — daempft das riesige S.-Wasserzeichen an
   den Raendern ab und schiebt das Lockup nach vorn. */
.hero::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(13,12,10,.25) 0%, rgba(13,12,10,.82) 78%); z-index:1; }
.hero-typo::before{ content:'S.'; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); font-family:'Bebas Neue',sans-serif; font-size:140vh; line-height:1; color:rgba(235,229,216,.035); }
/* --gap: alle senkrechten Abstaende im Hero haengen an derselben Groesse. Sie
   waechst mit der Fensterhoehe, nicht mit der Breite — der Engpass ist die
   Hoehe, nicht die Zeilenlaenge. Ein Wert stellt den ganzen Hero um. */
.hero-inner{ position:relative; z-index:2; text-align:center; padding:0 24px; --gap:clamp(15px, 2.4vh, 34px); }
.hero-inner .lo{ --s:clamp(120px,19vw,240px); }
.hero-kick{ margin-bottom:var(--gap); color:var(--bone); opacity:.75; }
.hero-sub{ margin-top:calc(var(--gap)*.9); font-size:clamp(13px,1.55vh,15px); color:var(--bone); opacity:.75; letter-spacing:.04em; }

/* --- Zweite grosse Zeile --------------------------------------------------
   Die Nachricht "Im Aufbau. Eroeffnung September 2026." stand vorher in 10px
   Monospace ueber dem Wortzeichen und ging dort unter. Sie steht jetzt als
   zweite Stimme darunter: Bebas Neue, deutlich kleiner als STIFT. PILATES,
   aber unuebersehbar. Der Haarstrich darueber trennt Marke von Nachricht.
   Die Groesse mischt Breite und Hoehe (2.2vw + 1.6vh), damit die Zeile auf
   dem Mac gross wird, im Telefon-Querformat aber von selbst zurueckgeht —
   dort bleiben nur rund 393 Punkte Hoehe. Nichts wird weggeblendet. */
.hero-status{
  position:relative;
  margin-top:calc(var(--gap)*1.15);
  padding-top:calc(var(--gap)*1.15);
  font-size:clamp(23px, 2.2vw + 1.6vh, 54px);
  line-height:.94; letter-spacing:.035em;
  color:var(--bone); text-transform:uppercase;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 .34em;
}
.hero-status::before{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:clamp(40px,5vw,76px); height:1px; background:var(--steel); opacity:.55;
}
.hero-status .pt{ color:var(--steel); }
/* Schmale, hohe Fenster — Telefon und iPad im Hochformat: einzeilig passte die
   Zeile auf dem iPhone SE nur noch auf den Punkt genau in 375 Bildpunkte (ein
   Haar mehr Laufweite und sie bricht unkontrolliert um), und auf dem iPad wurde
   sie breiter als das Wortzeichen darueber. Hier deshalb bewusst zwei Zeilen,
   dafuer groesser: der Block bleibt schmaler als STIFT. PILATES, der Umbruch
   faellt zwischen die Saetze und nie mitten hinein.
   Die Hoehenbedingung haelt das Telefon im Querformat heraus — dort ist Hoehe
   knapp, dort bleibt es einzeilig. */
@media(max-width:900px) and (min-height:560px){
  .hero-status{ display:block; font-size:clamp(25px, 4.5vw + 10px, 46px); }
  .hero-status > span{ display:block; }
}

/* Instagram-Verweis: das Quadrat ist dasselbe Steel-Zeichen wie in den
   Bau-Abschnitten und im Instagram-Raster. Es blinkt nicht. */
.hero-live{ margin-top:calc(var(--gap)*.62); display:flex; align-items:center; justify-content:center; gap:10px; }
.hero-live .sq{ width:6px; height:6px; background:var(--steel); flex:none; }
.hero-live .mono{ color:var(--bone); opacity:.72; }

.hero-inner .cta{ margin-top:calc(var(--gap)*.95); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-foot{ position:absolute; left:max(36px, env(safe-area-inset-left)); right:max(36px, env(safe-area-inset-right)); bottom:calc(26px + env(safe-area-inset-bottom)); z-index:2; display:flex; justify-content:space-between; align-items:center; }
/* Telefon im Querformat: breit genug fuer die Menuepunkte, aber nur rund 390
   Punkte hoch. Die feste Navigation und die Kopfzeile des Heros lagen dort
   uebereinander. Der Umbruch nach Breite allein greift zu kurz — hier zaehlt
   die Hoehe. Getestet auf iPhone 15 quer (852x393). */
@media(max-height:520px) and (orientation:landscape){
  .nav-links a:not(.book){ display:none; }
  /* Ein einziger Wert steuert alle Abstaende — die zweite grosse Zeile kostet
     Hoehe, hier wird sie zurueckgenommen statt ausgeblendet. */
  .hero-inner{ --gap:10px; }
  .hero-inner .lo{ --s:clamp(64px, 18vh, 120px); }
  .hero-status{ font-size:clamp(18px, 5.2vh, 26px); }
  .btn{ padding:10px 18px; }
  /* Est. MMXXVI und Scroll-Hinweis kollidierten mit den Knoepfen */
  .hero-foot{ display:none; }
}


/* --- Wortband ------------------------------------------------------------- */
.band{ padding:120px 24px; text-align:center; overflow:hidden; }
.band .w{ font-size:clamp(56px,10vw,150px); color:var(--bone); }
.band .w .pt{ color:var(--steel); }
.band p{ margin:26px auto 0; max-width:52ch; font-size:15px; line-height:1.7; color:var(--bone-dim); }

/* --- Bildpanels ----------------------------------------------------------- */
/* 110vh statt der 92vh aus dem Design: Auf einem 16:9-Bildschirm zeigt ein
   92vh-Panel nur rund 795 Bildpunkte Hoehe. Vom STIFT.-Schild (y 955) bis zum
   Ende des Schriftzugs auf dem Pflanzkuebel (y 1810) sind es aber 855 — beides
   passte dort nie gleichzeitig hinein. Mit 110vh ragt die Sektion bewusst ueber
   den Bildschirm hinaus; man scrollt ein Stueck durch das Bild, was zum
   Parallax-Effekt passt. Geprueft fuer Laptop, Full HD, 27 Zoll und MacBook. */
.panel{ position:relative; min-height:110vh; min-height:110svh; display:flex; align-items:flex-end; overflow:hidden; }
.panel .bg{ position:absolute; inset:-10% 0; }
/* will-change zwingt den Browser, fuer das Bild eine eigene Ebene im Speicher
   zu halten. Das lohnt nur, solange der Parallax laeuft — und der ist auf
   Touch-Geraeten abgeschaltet (siehe script.js). Auf dem iPhone waeren es
   sonst mehrere Megabyte Grafikspeicher fuer eine Ebene, die sich nie bewegt. */
@media (hover: hover) and (pointer: fine){
  .panel .bg img{ will-change:transform; }
}
.panel::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg, rgba(13,12,10,.15) 30%, rgba(13,12,10,.9) 88%); }
.panel-card{ position:relative; z-index:2; margin:0 0 0 36px; padding:44px 44px 52px; max-width:560px; background:rgba(13,12,10,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); border-bottom:none; }
@media(max-width:700px){ .panel-card{ margin:0 16px; padding:32px 26px 40px; } }
.panel-num{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.panel-num .sq{ width:7px; height:7px; background:var(--steel); }
.panel-card h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(44px,6vw,76px); letter-spacing:.02em; line-height:.9; }
.panel-card h2 .pt{ color:var(--steel); }
.panel-card p{ margin-top:18px; font-size:14.5px; line-height:1.7; color:var(--bone-dim); }
.panel-card p b{ color:var(--bone); font-weight:400; }
.panel-card .row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.panel-card .facts{ display:flex; gap:28px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.panel-card .facts .v{ font-family:'Bebas Neue',sans-serif; font-size:26px; }
.panel-card .facts .k{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); margin-top:4px; }

/* --- Der Name ------------------------------------------------------------- */
.name-sec{ border-top:1px solid var(--line); padding:110px 36px; background:var(--stone); }
.name-inner{ max-width:880px; margin:0 auto; text-align:center; }
.name-inner h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(40px,5.6vw,72px); letter-spacing:.02em; line-height:.9; }
.name-inner h2 .pt{ color:var(--steel); }
.name-inner .lead-p{ margin:26px auto 0; max-width:58ch; font-size:15.5px; line-height:1.75; color:var(--bone-dim); }
.name-inner .lead-p b{ color:var(--bone); font-weight:400; }
.name-duo{ margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; }
@media(max-width:700px){ .name-duo{ grid-template-columns:1fr; } }
.name-card{ border:1px solid var(--line); background:var(--bg); padding:26px 28px 30px; }
.name-card .t{ font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:.06em; }
.name-card p{ margin-top:12px; font-size:13.5px; line-height:1.7; color:var(--bone-dim); }
.name-card p b{ color:var(--bone); font-weight:400; }

/* --- Zitat ---------------------------------------------------------------- */
.sara-q{ padding:130px 36px; text-align:center; background:var(--stone); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sara-q .q{ font-size:clamp(22px,3.4vw,38px); font-weight:300; line-height:1.4; max-width:26ch; margin:26px auto 0; color:var(--bone); }
.sara-q .q em{ font-style:normal; color:var(--steel); }
.sara-q .sig{ margin-top:30px; }
.creds{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.chip{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); border:1px solid var(--line); padding:8px 12px; }

/* --- Methode -------------------------------------------------------------- */
.methode{ border-top:1px solid var(--line); padding:110px 36px; }
.methode-inner{ max-width:1080px; margin:0 auto; }
.methode-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.methode-head h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(40px,5.6vw,72px); letter-spacing:.02em; line-height:.9; }
.methode-head h2 .pt{ color:var(--steel); }
.methode-lead{ margin-top:22px; max-width:64ch; font-size:15px; line-height:1.75; color:var(--bone-dim); }
.methode-lead b{ color:var(--bone); font-weight:400; }
.prinz{ margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:820px){ .prinz{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .prinz{ grid-template-columns:1fr; } }
.pz{ border:1px solid var(--line); padding:22px 24px 24px; position:relative; transition:border-color .3s; }
.pz:hover{ border-color:var(--steel); }
.pz .no{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.24em; color:var(--steel); }
.pz .t{ font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:.06em; margin-top:10px; }
.pz .d{ margin-top:8px; font-size:12.5px; line-height:1.6; color:var(--bone-dim); }

/* --- Stimmen -------------------------------------------------------------- */
.stimmen{ border-top:1px solid var(--line); padding:110px 36px; background:var(--stone); }
.stimmen-inner{ max-width:1080px; margin:0 auto; }
.stimmen-head{ text-align:center; }
.stimmen-head h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(38px,5vw,64px); letter-spacing:.02em; line-height:.9; }
.stimmen-head h2 .pt{ color:var(--steel); }
.st-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:820px){ .st-grid{ grid-template-columns:1fr; } }
.st{ border:1px solid var(--line); background:var(--bg); padding:28px 28px 30px; display:flex; flex-direction:column; gap:14px; }
.st .mark{ width:8px; height:8px; background:var(--steel); }
.st .q{ font-size:16.5px; line-height:1.55; color:var(--bone); }
.st .who{ margin-top:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); }

/* --- Aufbau --------------------------------------------------------------- */
.bau{ border-top:1px solid var(--line); padding:110px 36px; }
.bau-inner{ max-width:1080px; margin:0 auto; }
.bau-head{ text-align:center; }
/* Der Aufbau-Abschnitt hatte ein eigenes Vierer-Raster — ein Sonderfall neben
   dem Dreier-Raster, das derselbe Baustein (.pz) im Methode-Abschnitt benutzt.
   Mit der fuenften Kachel ("Die Kursbuchung") war es ohnehin am Ende: vier
   Spalten haetten eine Kachel allein in die zweite Reihe gestellt.
   Der Sonderfall ist deshalb weg. Der Abschnitt faellt auf das Raster der
   uebrigen Seite (3 / 2 / 1 Spalten) — eine Regelmenge statt zweier, und die
   Kacheln wachsen dabei von 210 auf 301 Bildpunkte Textbreite. */

/* Fuenf Kacheln lassen im Dreier-Raster unten rechts eine Luecke. Statt sie
   stehenzulassen, nimmt die vierte Kachel zwei Spalten und die Reihe schliesst
   buendig ab.
   Die Bedingung greift NUR bei genau fuenf Kacheln: :nth-child(4) und
   gleichzeitig :nth-last-child(2) trifft auf kein anderes Kachelfeld zu. Kommt
   eine sechste dazu, schaltet die Regel sich von selbst ab und das Raster faellt
   sauber auf 3+3. Eine an die Zahl gebundene Regel, die still falsch wird, waere
   hier die eigentliche Gefahr gewesen. */
@media(min-width:821px){
  #galerie .prinz > .pz:nth-child(4):nth-last-child(2){ grid-column:span 2; }
}
/* Zweispaltig (iPad hochkant): bei ungerader Anzahl nimmt die letzte Kachel
   beide Spalten, sonst stuende sie allein links. :last-child:nth-child(odd)
   schaltet sich bei gerader Anzahl ebenfalls von selbst ab. */
@media(min-width:561px) and (max-width:820px){
  #galerie .prinz > .pz:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* --- Instagram ------------------------------------------------------------ */
.ig{ border-top:1px solid var(--line); padding:90px 36px; text-align:center; }
.ig h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(34px,4.6vw,58px); letter-spacing:.03em; }
.ig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:1080px; margin:36px auto 0; }
@media(max-width:760px){ .ig-grid{ grid-template-columns:repeat(2,1fr); } }
/* display:block ergaenzt — im Design fehlt es. Auf einem <a> (inline) wirkt
   aspect-ratio nicht, die Kacheln faellen auf Hoehe 0 zusammen. Quadratisch ist
   erkennbar gewollt, sonst stuende dort kein aspect-ratio:1/1. */
.ig-t{ display:block; aspect-ratio:1/1; overflow:hidden; position:relative; }
.ig-t img{ transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .4s; }
.ig-t:hover img{ transform:scale(1.05); opacity:.7; }
.ig .btn{ margin-top:34px; }
/* Video-/Reel-Markierung auf echten Feed-Kacheln — kleines Dreieck in Steel */
.ig-video{ position:absolute; top:10px; right:10px; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--steel); }

/* Platzhalter-Kacheln, bis der echte Feed hängt */
.ig-t.ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--stone); transition:background .3s; }
.ig-t.ph:hover{ background:#1b1913; }
.ig-t.ph .sq{ width:9px; height:9px; background:var(--steel); }
.ig-t.ph .l{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--bone-dim); }
.ig-t.ph .s{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); }

/* --- Standort + Karte ----------------------------------------------------- */
.map-sec{ border-top:1px solid var(--line); position:relative; }
.map-wrap{ position:relative; height:74vh; height:74svh; min-height:500px; background:var(--stone); }
.map-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(1) invert(.93) contrast(1.02) brightness(.86) sepia(.18); }
.map-wrap::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 140px 30px rgba(13,12,10,.85); }


.map-card{ position:absolute; left:36px; bottom:0; z-index:2; padding:38px 40px 44px; max-width:460px; background:rgba(13,12,10,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); border-bottom:none; }
@media(max-width:700px){ .map-card{ left:16px; right:16px; max-width:none; padding:28px 24px 36px; } }
.map-card h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(38px,5vw,60px); letter-spacing:.02em; line-height:.9; }
.map-card h2 .pt{ color:var(--steel); }
.map-card .addr{ margin-top:18px; font-size:16px; line-height:1.6; color:var(--bone); }
.map-card .addr .mono{ display:block; margin-top:6px; }
.map-card .row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }

/* --- Anreise -------------------------------------------------------------- */
.anreise{ border-top:1px solid var(--line); padding:110px 36px; }
.anreise-inner{ max-width:1080px; margin:0 auto; }
.anreise h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(38px,5vw,64px); letter-spacing:.02em; line-height:.9; }
.anreise h2 .pt{ color:var(--steel); }
.an-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:900px){ .an-grid{ grid-template-columns:1fr; } }
.an{ border:1px solid var(--line); background:var(--stone); padding:26px 26px 28px; }
.an .h{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--steel); }
.an ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.an li{ display:grid; gap:3px; }
.an .n{ font-size:15px; color:var(--bone); }
.an .n a{ color:var(--bone); text-decoration:none; border-bottom:1px solid var(--line); }
.an .n a:hover{ color:var(--steel); border-color:var(--steel); }
.an .m{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; color:var(--bone-dim); }

/* --- Kontakt -------------------------------------------------------------- */
.kontakt{ border-top:1px solid var(--line); background:var(--stone); padding:110px 36px; }
.k-wrap{ max-width:760px; margin:0 auto; text-align:center; }
.k-wrap h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(48px,7vw,92px); letter-spacing:.02em; line-height:.9; }
.k-wrap h2 .pt{ color:var(--steel); }
.k-wrap .sub{ margin:20px auto 0; max-width:46ch; font-size:14.5px; line-height:1.7; color:var(--bone-dim); }
form{ margin-top:52px; text-align:left; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
@media(max-width:640px){ .f2{ grid-template-columns:1fr; } }
.f-row{ display:grid; gap:10px; padding:20px 0; border-bottom:1px solid var(--line); }
.f-row label{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim); }
/* Kein outline:none — das schlug die globale :focus-visible-Regel (höhere
   Spezifität) und liess Tastaturnutzer ohne jeden Fokus-Hinweis zurück. */
.f-row input, .f-row textarea{ background:transparent; border:none; color:var(--bone); font-family:'Inter Tight',sans-serif; font-weight:300; font-size:17px; resize:vertical; }
/* Zweiter, farbunabhängiger Hinweis: die Trennlinie der Zeile wird kräftiger */
.f-row:focus-within{ border-bottom-color:var(--bone); }
.f-row input::placeholder, .f-row textarea::placeholder{ color:var(--bone-dim); }
.f-row:focus-within label{ color:var(--steel); }
form .send{ margin-top:36px; text-align:center; }

/* Honeypot — für Menschen unsichtbar, für Bots verlockend */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Datenschutz-Einwilligung */
.f-consent{ margin-top:26px; display:flex; align-items:flex-start; gap:12px; }
.f-consent input{ -webkit-appearance:none; appearance:none; flex:none; width:18px; height:18px; margin-top:2px; border:1px solid var(--steel); background:transparent; cursor:pointer; transition:background .2s; }
.f-consent input:checked{ background:var(--bone); border-color:var(--bone); }
.f-consent label{ font-size:12.5px; line-height:1.6; color:var(--bone-dim); text-align:left; }
.f-consent a{ border-bottom:1px solid var(--line); }
.f-consent a:hover{ border-color:var(--steel); }

/* Fehlermeldung nach Redirect von kontakt.php */
.form-alert{ display:none; margin-bottom:8px; padding:16px 18px; border:1px solid var(--steel); background:rgba(138,135,130,.08); font-size:13.5px; line-height:1.6; color:var(--bone); text-align:left; }
.form-alert.on{ display:block; }

.k-meta{ margin-top:64px; display:flex; justify-content:center; gap:44px; flex-wrap:wrap; }
.k-meta div{ text-align:center; }
.k-meta .v{ font-size:14px; margin-top:6px; color:var(--bone); }

/* --- Footer --------------------------------------------------------------- */
footer{ padding:90px 36px calc(40px + env(safe-area-inset-bottom)); text-align:center; }
footer .lo{ --s:clamp(70px,9vw,110px); }
footer .meta{ margin-top:28px; }
/* Die Fusszeile nennt erst die Angebote, dann Ort und Jahr. Beide Gruppen
   bleiben in sich zusammen (white-space:nowrap), damit nie mitten in
   "Reformer • Matte • Pilates" oder mitten in "Neuss · Est. MMXXVI"
   umgebrochen wird.
   Unter 520 Bildpunkten passt beides nicht mehr nebeneinander — gemessen
   bricht es zwischen 520 und 480. Dort werden zwei mittige Zeilen daraus,
   und der Trenner zwischen den Gruppen faellt weg. Ohne das haengt er am
   Ende der ersten Zeile ("... NEUSS ·") und sieht aus wie ein Versehen. */
footer .meta span{ white-space:nowrap; }
@media(max-width:520px){
  footer .meta{ display:flex; flex-direction:column; align-items:center; gap:5px; }
  footer .meta .sep{ display:none; }
}
.f-legal{ margin-top:56px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:center; gap:30px; flex-wrap:wrap; }
.f-legal a{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-dim); }
.f-legal a:hover{ color:var(--bone); }

/* =============================================================================
   Unterseiten — Impressum, Datenschutz, Danke, 404
   Gleiche Marke, ruhigere Typografie.
   ========================================================================== */
.sub-head{ padding:150px 36px 0; }
.sub-head .inner{ max-width:780px; margin:0 auto; }
.sub-head h1{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(48px,7vw,86px); letter-spacing:.02em; line-height:.9; margin-top:16px; }
.sub-head h1 .pt{ color:var(--steel); }

.legal{ padding:52px 36px 110px; }
.legal-inner{ max-width:780px; margin:0 auto; }
.legal h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:30px; letter-spacing:.05em; margin:52px 0 14px; padding-top:22px; border-top:1px solid var(--line); }
.legal h2:first-of-type{ margin-top:34px; }
.legal h3{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); margin:26px 0 10px; }
.legal p, .legal li{ font-size:14.5px; line-height:1.8; color:var(--bone-dim); }
.legal p{ margin-bottom:14px; }
.legal p b, .legal li b{ color:var(--bone); font-weight:400; }
.legal ul{ margin:0 0 14px 18px; }
.legal li{ margin-bottom:7px; }
.legal a{ border-bottom:1px solid var(--line); }
.legal a:hover{ border-color:var(--steel); }
.legal .adr{ font-size:15px; line-height:1.8; color:var(--bone); margin-bottom:14px; }
/* Platzhalter, die vor dem Livegang ersetzt werden müssen */
.todo{ color:var(--steel); border-bottom:1px dashed var(--steel); }

/* Danke- und 404-Seite */
.center-page{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 24px 60px; }
.center-page h1{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(56px,9vw,120px); letter-spacing:.02em; line-height:.9; margin-top:22px; }
.center-page h1 .pt{ color:var(--steel); }
.center-page p{ margin:24px auto 0; max-width:46ch; font-size:15px; line-height:1.75; color:var(--bone-dim); }
.center-page .cta{ margin-top:42px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =============================================================================
   RESERVIERT FÜR DEN LAUNCH (September 2026)
   Kursplan, Preise und Bildergalerie sind im Design bereits gestaltet, aber im
   Pre-Launch bewusst nicht ausgespielt. Die Regeln bleiben stehen, damit die
   Sektionen zum Start nur noch im HTML ergänzt werden müssen.
   ========================================================================== */

/* Vorschauflaeche der Zwei-Klick-Loesung. Bis zum 26.07.2026 lud die Karte
   erst nach einem Klick hierauf; der Owner hat sich fuer direktes Laden
   entschieden. Regeln bleiben, falls die Entscheidung revidiert wird. */
.map-consent{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; padding:40px 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, var(--line) 63px 64px),
    repeating-linear-gradient(0deg, transparent 0 63px, var(--line) 63px 64px),
    var(--stone);
}
.map-consent .hint{ max-width:44ch; font-size:13.5px; line-height:1.7; color:var(--bone-dim); }
.map-consent .hint a{ border-bottom:1px solid var(--line); }
.map-consent .hint a:hover{ border-color:var(--steel); }

/* Zeilen-Raster in der Standort-Karte. Enthielt bis zum 26.07. die Zeile
   "Kurszeiten — Eroeffnung September 2026". Die Angabe stand bereits im
   Hero und in der Aufbau-Sektion; in der Karte war sie eine dritte
   Wiederholung. Regel bleibt fuer den Launch, wenn dort echte Kurszeiten
   stehen sollen. */
.map-rows{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:10px; }
.map-rows .r{ display:grid; grid-template-columns:92px 1fr; gap:14px; align-items:baseline; }
.map-rows .r .v{ font-size:13.5px; color:var(--bone-dim); }

/* Bild-Kennzeichnung oben rechts im Panel. Im Entwurf unterschied sie echte
   Fotos von Platzhaltern — auf der fertigen Seite hatte sie keinen Zweck mehr
   und wurde am 26.07. entfernt. Regel bleibt fuer den Fall, dass ein Panel
   spaeter wieder eine Auszeichnung braucht. */
.ph-tag{ position:absolute; top:20px; right:20px; z-index:3; background:rgba(13,12,10,.8); padding:7px 11px; font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }

/* Hero mit Foto statt Typo-Wasserzeichen (Design sieht beides vor) */
.hero-bg{ position:absolute; inset:-8% 0; z-index:0; }
.hero-bg img{ transform:translateY(0); will-change:transform; }

/* Zeitleiste Joseph Pilates */
.jp-line{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media(max-width:820px){ .jp-line{ grid-template-columns:1fr 1fr; } }
.jp{ background:var(--bg); padding:20px 20px 22px; }
.jp .y{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.22em; color:var(--steel); text-transform:uppercase; }
.jp .d{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--bone-dim); }

/* Kursplan */
.plan{ padding:110px 36px; max-width:1080px; margin:0 auto; }
.plan-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:44px; flex-wrap:wrap; }
.plan-head h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(44px,6vw,80px); letter-spacing:.02em; line-height:.9; }
.plan-head h2 .pt{ color:var(--steel); }
.days{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.day{ font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:.1em; padding:10px 17px; border:1px solid var(--line); color:var(--bone-dim); cursor:pointer; transition:all .25s; background:none; }
.day:hover{ border-color:var(--steel); color:var(--bone); }
.day.on{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.slots{ border-top:1px solid var(--line); }
.slot{ display:grid; grid-template-columns:100px 1fr auto auto; gap:22px; align-items:center; padding:19px 6px; border-bottom:1px solid var(--line); transition:background .25s, padding-left .25s; }
.slot:hover{ background:rgba(235,229,216,.025); padding-left:14px; }
@media(max-width:680px){ .slot{ grid-template-columns:76px 1fr; } .slot .free{ display:none; } .slot .btn{ display:none; } }
.slot .t{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; }
.slot .n{ font-family:'Bebas Neue',sans-serif; font-size:21px; letter-spacing:.05em; }
.slot .m{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); margin-top:3px; }
.slot .free{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); }
.slot .free.low{ color:var(--steel); }
.bsport{ margin-top:22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.bsport .note{ display:flex; align-items:center; gap:10px; }
.bsport .sq{ width:6px; height:6px; background:var(--steel); }

/* Preise */
.preise{ border-top:1px solid var(--line); padding:110px 36px; }
.preise-inner{ max-width:1080px; margin:0 auto; }
.preise-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:14px; flex-wrap:wrap; }
.preise-head h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(44px,6vw,80px); letter-spacing:.02em; line-height:.9; }
.preise-head h2 .pt{ color:var(--steel); }
.preise-sub{ max-width:56ch; font-size:14.5px; line-height:1.7; color:var(--bone-dim); margin-bottom:48px; }
.p-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:920px){ .p-grid{ grid-template-columns:1fr; } }
.p-card{ border:1px solid var(--line); background:var(--stone); display:flex; flex-direction:column; }
.p-card.hero-card{ border-color:var(--steel); position:relative; }
.p-card .p-head{ padding:26px 26px 20px; border-bottom:1px solid var(--line); }
.p-card .p-no{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.24em; color:var(--steel); text-transform:uppercase; }
.p-card h3{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:30px; letter-spacing:.05em; margin-top:8px; line-height:1; }
.p-card .p-meta{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); margin-top:8px; }
.p-rows{ flex:1; }
.p-row{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline; padding:13px 26px; border-bottom:1px solid var(--line); }
.p-row:last-child{ border-bottom:0; }
.p-row .l{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); }
.p-row .l small{ display:block; font-size:8.5px; color:var(--bone-dim); margin-top:3px; letter-spacing:.14em; }
.p-row .p{ font-family:'Bebas Neue',sans-serif; font-size:21px; letter-spacing:.04em; color:var(--bone); white-space:nowrap; }
.p-row .p small{ font-size:12px; color:var(--bone-dim); }
.p-row.hl{ background:rgba(235,229,216,.03); }
.p-row.hl .l{ color:var(--bone); }
.p-card .p-foot{ padding:20px 26px 26px; border-top:1px solid var(--line); }
.p-card .p-foot .btn{ width:100%; text-align:center; }
.probe-tag{ position:absolute; top:-1px; right:-1px; background:var(--bone); color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; padding:8px 12px; }
.p-extra{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:920px){ .p-extra{ grid-template-columns:1fr; } }
.x-card{ border:1px solid var(--line); padding:24px 26px; display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:center; }
.x-card h4{ grid-column:1; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:22px; letter-spacing:.06em; }
.x-card .d{ grid-column:1; font-size:12.5px; color:var(--bone-dim); line-height:1.55; }
.x-card .p{ grid-column:2; grid-row:1/3; align-self:center; font-family:'Bebas Neue',sans-serif; font-size:26px; }
.x-card .p small{ font-size:12px; color:var(--bone-dim); }
.preise-note{ margin-top:22px; display:flex; align-items:center; gap:10px; }
.preise-note .sq{ width:6px; height:6px; background:var(--steel); flex:none; }

/* Horizontale Bildergalerie */
.hgal{ padding:0 0 110px; }
.hgal-head{ padding:0 36px 30px; display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.hgal-head h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(38px,5vw,64px); letter-spacing:.02em; }
.track{ display:flex; gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding:0 36px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.track::-webkit-scrollbar{ display:none; }
.shot{ flex:0 0 auto; width:min(70vw,480px); scroll-snap-align:start; position:relative; }
.shot .im{ aspect-ratio:4/5; overflow:hidden; }
.shot img{ transition:transform 1s cubic-bezier(.16,1,.3,1); }
.shot:hover img{ transform:scale(1.04); }
.shot .cap{ margin-top:10px; display:flex; justify-content:space-between; }
.shot.wide{ width:min(88vw,680px); }
.shot.wide .im{ aspect-ratio:16/10; }

/* --- Eröffnungs-Anmeldung (Newsletter, einmalig) ---------------------------
   Erste Sektion nach dem Hero. Bewusst auf STONE statt Bild: Wer hier landet,
   soll das Formular sehen und nicht erst durch eine Bildwelt scrollen.
   Die Feld-Styles (.f2/.f-row/.f-consent/.send) kommen aus dem Kontaktformular
   weiter unten — hier steht nur die Hülle. */
.eroeffnung{ border-bottom:1px solid var(--line); background:var(--stone); padding:96px 36px; }
.er-inner{ max-width:720px; margin:0 auto; text-align:center; }
.er-kick{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--steel); margin:0 0 18px; }
.er-inner h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(40px,6.4vw,84px); letter-spacing:.02em; line-height:.9; color:var(--bone); margin:0; }
.er-inner h2 .pt{ color:var(--steel); }
.er-lead{ margin:22px auto 0; max-width:50ch; font-size:15px; line-height:1.7; color:var(--bone-dim); }
.er-lead strong{ color:var(--bone); font-weight:400; }
/* Etwas enger als das Kontaktformular: hier sind es nur drei Felder. */
.er-form{ margin-top:40px; }
.er-hinweis{ margin:18px 0 0; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); text-align:center; }
@media(max-width:640px){
  .eroeffnung{ padding:72px 22px; }
  .er-form{ margin-top:30px; }
}