/* ============================================================================
   Ramsauer Radsport — Grundlagen.

   RICHTUNG: Ramsauers EIGENE Markensprache.
   Belegt, nicht erfunden — aus seinem Werbeplakat (Kundenordner,
   «ramsauer (1).jpg» und «(4).jpg») und aus dem CSS seines Blogs im Bestand:
     · dunkler Grund (#1a1a1a, #212121 stehen dort woertlich)
     · Gold #f5c200 als einzige Akzentfarbe (5x #f5c400, 4x #f5c200 im Bestand)
     · grosse Versalien-Headline, ein Wort in Gold herausgehoben
     · gelbe Balken, Icons bei den Kontaktwegen, Bergkulisse als Atmosphaere
   Die helle Fassung vom Vormittag traf diese Sprache nicht — siehe
   styles.css.v3-hell-20260906.

   Kontrast gerechnet: Gold auf Grund 11,25:1 · Weiss 18,74:1 · Tinte auf
   Gold 11,25:1.
   ========================================================================== */

:root {
  --grund:    #121211;
  --grund-2:  #1A1A18;
  --grund-3:  #212120;
  --karte:    #1C1C1A;
  --hell:     #F7F5F0;   /* helle Flaeche fuer Produktfreisteller */

  --schrift:      #FFFFFF;
  --schrift-2:    #B4B0A8;   /*  8,7:1 */
  --schrift-3:    #8A857B;   /*  5,1:1 */
  --linie:        rgba(255, 255, 255, .13);
  --linie-fein:   rgba(255, 255, 255, .07);

  --gold:      #F5C200;   /* 11,25:1 auf Grund */
  --gold-warm: #D4A800;
  --gold-tief: #6E5403;   /* nur fuer Text auf HELLEN Flaechen: 7,2:1 */
  --tinte:     #121211;

  --wrap:      1320px;
  --rand:      clamp(20px, 5vw, 56px);
  --radius:    6px;
  --radius-gr: 14px;

  --display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 🔴 Natives Scrollen: kein Lenis, kein Locomotive, kein ScrollTrigger.pin. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift-2);
  font-family: var(--text);
  font-size: 17px; line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

/* 🛑 Das Netz gegen seitliches Scrollen gehoert auf main, NIEMALS auf
   html/body — dort macht clip die Seite unscrollbar (gemessen 09.08.2026). */
main { overflow-x: clip; }

img, svg, video, canvas { max-width: 100%; height: auto; }
img { display: block; }
.wrap > *, [class*="gitter"] > *, [class*="reihe"] > *, [class*="spalt"] > * { min-width: 0; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display); color: var(--schrift);
  margin: 0 0 .42em; overflow-wrap: break-word;
}
/* 🔴 Untergrenzen an der schmalsten Zielbreite gemessen (360 px = 320 px Satzspiegel). */
h1 { font-size: clamp(2.6rem, 7.6vw, 7.2rem); line-height: .94; letter-spacing: -.022em; font-variation-settings: "wght" 800; text-transform: uppercase; }
h2 { font-size: clamp(1.95rem, 4.6vw, 3.6rem); line-height: .99;  letter-spacing: -.02em;  font-variation-settings: "wght" 750; text-transform: uppercase; }
h3 { font-size: clamp(1.14rem, 1.7vw, 1.4rem); line-height: 1.26; letter-spacing: -.006em; font-variation-settings: "wght" 700; }
h4 { font-family: var(--text); font-size: .95rem; line-height: 1.4; font-weight: 700; }
@media (max-width: 27rem) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } }

/* Ein Wort in Gold — wie auf Ramsauers Plakat. */
.gold { color: var(--gold); }
/* Konturschrift als zweite Ebene — ebenfalls aus dem Plakat («PR»). */
.kontur { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.42); }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--rand); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gold); color: var(--tinte); padding: 14px 22px; font-weight: 700;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ------------------------------------------------------------- Abschnitte */
.abschnitt { position: relative; padding: clamp(62px, 8.5vw, 140px) 0; }
.abschnitt--ab { background: var(--grund-2); }
.abschnitt--hell { background: var(--hell); color: #4A463D; }
.abschnitt--hell h2, .abschnitt--hell h3, .abschnitt--hell h4 { color: var(--tinte); }
.abschnitt--hell .lead { color: #4A463D; }

/* Eyebrow mit Icon-Platz und Haarlinie. */
.eyebrow {
  display: flex; align-items: center; gap: 11px;
  font-size: .73rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gold); margin: 0 0 18px;
}
.eyebrow::after { content: ""; flex: 1; max-width: 60px; height: 1px; background: currentColor; opacity: .5; }
.eyebrow .ico { width: 17px; height: 17px; flex: none; }
.abschnitt--hell .eyebrow { color: var(--gold-tief); }

.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--schrift-2); max-width: 60ch; }
.lead strong { color: var(--schrift); font-weight: 700; }
.abschnitt--hell .lead strong { color: var(--tinte); }

.kopfzeile { max-width: 46rem; margin-bottom: clamp(34px, 4.4vw, 68px); }

/* ------------------------------------------------------------------ Knopf */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 15px 28px;
  background: var(--gold); color: var(--tinte);
  font-family: var(--text); font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 1.5px solid var(--gold); border-radius: 999px; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), background-color .2s ease, box-shadow .2s ease;
}
.btn:hover { background: #FFD426; border-color: #FFD426; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(245,194,0,.24); }
.btn .ico { width: 19px; height: 19px; flex: none; }
.btn--rand { background: transparent; color: var(--schrift); border-color: rgba(255,255,255,.34); }
.btn--rand:hover { background: var(--schrift); color: var(--tinte); border-color: var(--schrift); box-shadow: none; }
.btn--sm { min-height: 46px; padding: 11px 20px; font-size: .93rem; }
.abschnitt--hell .btn--rand { color: var(--tinte); border-color: rgba(18,18,17,.3); }
.abschnitt--hell .btn--rand:hover { background: var(--tinte); color: var(--hell); border-color: var(--tinte); }

/* Alle Tappflaechen mindestens 44 px in BEIDEN Richtungen (CLAUDE.md §4). */
.nav a, .foot-links a, .al-knopf, .float, .foot-recht a { min-height: 44px; min-width: 44px; }

/* ------------------------------------------------------------------ Icons
   Eigene Inline-SVG als <symbol>-Sprite, per <use> eingesetzt. Kein
   Icon-Font, kein Fremdabruf. */
.ico { width: 22px; height: 22px; display: inline-block; flex: none; fill: none;
       stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico--voll { fill: currentColor; stroke: none; }
.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------- Erscheinen (dezent)

   🔴 UMGEDREHT am 06.09.2026, nach einem echten Fehler:
   Vorher stand `opacity: 0` auf `.auf` im CSS, und JavaScript musste die
   Klasse `.ist-da` setzen, damit etwas sichtbar wird. Gemessen im Browser:
   **11 von 14 Bildern blieben auf opacity 0** — geladen, aber unsichtbar,
   auf Desktop wie auf Mobil. Wer nur Ueberlauf und Kontrast misst, sieht
   das nie.

   Jetzt gilt: Das HTML ist von sich aus SICHTBAR. Erst JavaScript setzt
   `.vorbereitet` auf <html> und blendet damit aus, was es gleich darauf
   einblendet. Faellt JavaScript aus, haengt der Beobachter, oder greift
   eine Klasse nicht — dann sieht man alles, statt nichts. */
/* 🔴 BILDER WERDEN NIE AUSGEBLENDET.
   Gemessen 06.09.2026 bei 360 px: von 14 Bildern waren nur 4 sichtbar, weil
   der Beobachter beim Springen (Ankerlink, Tastatur-Ende, schnelles Wischen)
   nie ausloest. Ein Bild, das man nicht sieht, ist kein Bild. Deshalb gilt
   der Reveal nur fuer Text und Karten — ein Element, das ein <img> enthaelt
   oder selbst eines ist, bleibt immer sichtbar. */
.vorbereitet .auf { opacity: 0; transform: translateY(24px); }
.vorbereitet .auf:has(img),
.vorbereitet figure.auf,
.vorbereitet .produkt-buehne,
.vorbereitet .hero-foto,
.vorbereitet .bildsektion-bg { opacity: 1 !important; transform: none !important; }
.vorbereitet .auf.ist-da {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.zeile { display: block; }
.vorbereitet .zeile { overflow: hidden; }
.vorbereitet .zeile > span { display: block; transform: translateY(104%); }
.vorbereitet .zeile.ist-da > span { transform: none; transition: transform .85s cubic-bezier(.16,.9,.24,1); }
@media (prefers-reduced-motion: reduce) {
  .vorbereitet .auf, .vorbereitet .zeile > span { opacity: 1 !important; transform: none !important; }
}

.nur-lesehilfe {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}