/* ==========================================================================
   ricopage – Stylesheet
   Brand Kit unverändert übernommen (Rot #c8102e / #960018, Schwarz #0a0a0b,
   Fraunces + Inter). Aufgebaut nach den Regeln des Apple-Design-Skills.
   ========================================================================== */

/* --- Schriften: lokal, DSGVO-konform, kein Google-Fonts-Aufruf ------------ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2?v=3') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2?v=3') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2?v=3') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2?v=3') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/fraunces-500.woff2?v=3') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/fraunces-600.woff2?v=3') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/fraunces-700.woff2?v=3') format('woff2')}

/* --- Design Tokens -------------------------------------------------------- */
:root{
  /* Brand Kit – unverändert */
  --rot:#c8102e;
  --btn:#960018;
  --btn-hover:#7a0014;
  --rot-tief:#960018;
  --rot-glow:rgba(200,16,46,.4);
  --schwarz:#0a0a0b;
  --anthrazit:#141416;
  --karte:rgba(22,22,24,.72);
  --karte-rand:#2a2a2f;
  --text:#f4f4f5;
  --grau:#6e6e74;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Text auf Glasflächen: heller + etwas schwerer als reines Grau.
     Apple-Regel „Vibrancy": kein flaches Grau über Blur-Materialien. */
  --text-dim:#a2a2a8;      /* nur auf deckendem Grund */
  --text-glas:#c9c9d0;     /* auf translucenten Flächen */

  /* Materialstärke – große Flächen lesen sich dicker als kleine Chips */
  --blur-chip:6px;
  --blur-bar:14px;
  --blur-karte:16px;
  --blur-flaeche:18px;

  /* Bewegung – kritisch gedämpft, Response 0.3–0.4s */
  --resp-schnell:.16s;
  --resp-standard:.3s;
  --resp-ruhig:.4s;
  --ease-out:cubic-bezier(.32,.72,0,1);

  --radius-karte:20px;
  --radius-chip:14px;
  --radius-btn:12px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  /* rem-Basis: respektiert die Schriftgrößen-Einstellung des Nutzers */
  font-size:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--text);
  background:var(--schwarz);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* Fixierter Hintergrund: Grundton + Textur */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--schwarz)}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:url('/assets/bg-texture.jpg?v=3') center/cover no-repeat;
  opacity:.55;
  pointer-events:none;
}

.wrap{max-width:67.5rem;margin:0 auto;padding:0 1.5rem}

/* Sichtbarer Fokus für Tastaturnutzung */
:focus-visible{
  outline:2px solid var(--rot);
  outline-offset:3px;
  border-radius:4px;
}

/* Skip-Link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--btn);color:#fff;padding:.75rem 1.25rem;
  border-radius:0 0 var(--radius-btn) 0;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ==========================================================================
   Reveal – „materialisieren", nicht nur einblenden.
   Scroll-gekoppelt über --p (0…1), dadurch durchgehend und umkehrbar.
   ========================================================================== */
/* Sicherer Ausgangswert: ohne JavaScript ist alles sichtbar (--p:1).
   Erst wenn JS läuft, übernimmt es die Steuerung. */
.reveal{
  --p:1;
  opacity:var(--p);
  transform:translate3d(0,calc((1 - var(--p)) * 1.75rem),calc((1 - var(--p)) * -3.75rem))
            scale(calc(.965 + var(--p) * .035));
  will-change:transform,opacity;
}
html.js .reveal{--p:0}

/* ==========================================================================
   Header – translucentes Material, Inhalt scrollt darunter durch
   ========================================================================== */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.62);
  backdrop-filter:blur(var(--blur-bar)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-bar)) saturate(180%);
  padding:.5rem 0;
}
/* Scroll-Edge-Effekt statt harter 1px-Linie */
header::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:1.5rem;
  background:linear-gradient(rgba(10,10,11,.5),transparent);
  pointer-events:none;
  opacity:var(--edge,0);
  transition:opacity var(--resp-standard) var(--ease-out);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:block;line-height:0;padding:.5rem 0;border-radius:6px}
.logo img{height:2.875rem;width:auto;display:block}

nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
nav a{
  color:var(--text-glas);
  text-decoration:none;
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.005em;
  /* Trefferfläche ≥ 44px statt 16px Texthöhe */
  padding:.8125rem .625rem;
  border-radius:8px;
  transition:color var(--resp-schnell) var(--ease-out),
             background-color var(--resp-schnell) var(--ease-out);
}
nav a:hover{color:var(--text)}
nav a:active{background:rgba(255,255,255,.08)}
nav a[aria-current="page"]{color:var(--rot)}

/* Mobil: Logo und Navigation untereinander statt umbrechend nebeneinander.
   Die vier Punkte stehen dadurch in einer sauberen Zeile am oberen Rand. */
@media(max-width:40rem){
  header{padding:.25rem 0}
  .header-inner{flex-direction:column;align-items:stretch;gap:0}
  .wrap{padding:0 1rem}
  .logo{align-self:flex-start;padding:.3125rem 0}
  .logo img{height:2rem}
  nav{
    width:100%;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:0;
  }
  nav a{
    font-size:.8125rem;
    padding:.8125rem .1875rem;   /* Trefferfläche bleibt ≥ 44px hoch */
    white-space:nowrap;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding:7.5rem 0 8.125rem;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video{
  position:absolute;inset:-10% 0;
  width:100%;height:120%;
  object-fit:cover;
  will-change:transform;
}
.hero-video-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 46%, rgba(10,10,11,.28), rgba(10,10,11,.5) 85%),
    linear-gradient(180deg, rgba(10,10,11,.15), rgba(10,10,11,.45));
}
.hero .wrap{position:relative;z-index:2}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(2.125rem,5.8vw,4rem);
  font-weight:600;
  /* große Schrift: enges Leading, negatives Tracking */
  line-height:1.04;
  letter-spacing:-.015em;
  margin-bottom:1.5rem;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
  will-change:transform;
}
.hero h1 .akzent{color:var(--rot);font-style:italic;text-shadow:0 0 34px var(--rot-glow)}
.hero p{
  font-size:clamp(1rem,2.2vw,1.25rem);
  line-height:1.5;
  color:var(--text-glas);
  max-width:36.25rem;
  margin:0 auto 2.25rem;
  will-change:transform;
}

/* Buttons ---------------------------------------------------------------- */
.hero-cta,.btn{
  display:inline-block;
  background:var(--btn);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  border-radius:var(--radius-btn);
  border:0;
  cursor:pointer;
  position:relative;
  /* nur compositor-freundliche Properties animiert */
  transition:transform var(--resp-schnell) var(--ease-out),
             background-color var(--resp-schnell) var(--ease-out);
  will-change:transform;
}
.hero-cta{
  font-size:1rem;
  padding:1rem 2.375rem;
  box-shadow:0 8px 34px rgba(200,16,46,.45);
}
.btn{font-size:.9375rem;padding:.875rem 1.5rem;white-space:nowrap}
.hero-cta:hover,.btn:hover{background:var(--btn-hover);transform:translateY(-2px)}
/* Feedback beim Drücken – sofort, nicht erst beim Loslassen */
.hero-cta:active,.btn:active{transform:scale(.97);transition:transform 100ms var(--ease-out)}

/* ==========================================================================
   Produkte
   ========================================================================== */
.produkte{padding:5rem 0 3.125rem;position:relative;z-index:1}
.section-titel{
  text-align:center;margin-bottom:.75rem;
  font-size:.8125rem;font-weight:700;
  /* kleine Schrift: positives Tracking */
  letter-spacing:.18em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--rot);
}
.section-sub{
  text-align:center;color:var(--text-glas);
  margin-bottom:3.375rem;font-size:1rem;line-height:1.5;
}

/* --- Hauptkarte ---------------------------------------------------------- */
.haupt-wrap{max-width:42.5rem;margin:0 auto;perspective:1200px}

.karte-haupt{
  position:relative;
  border:1px solid var(--karte-rand);
  border-radius:var(--radius-karte);
  background:var(--karte);
  backdrop-filter:blur(var(--blur-karte)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur-karte)) saturate(160%);
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}
/* Ruheschatten – große Fläche liegt nicht flach auf */
.karte-haupt::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:var(--radius-karte);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
/* Hover-Schatten als eigene Ebene: animiert wird nur opacity */
.karte-haupt::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:var(--radius-karte);
  box-shadow:0 26px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(200,16,46,.35);
  opacity:0;
  transition:opacity var(--resp-standard) var(--ease-out);
}
.karte-haupt.aktiv::after{opacity:1}

.karte-bild{aspect-ratio:16/9;position:relative;overflow:hidden}
.karte-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Uhr: Zeiger laufen im echten Verhältnis 12:1.
   Minutenzeiger 360° in 5 s, Stundenzeiger 360° in 60 s. */
.karte-uhr{position:absolute;inset:0;width:100%;height:100%;display:block}
@keyframes uhr-umlauf{to{transform:rotate(360deg)}}
.uhr-minute,.uhr-stunde{transform-origin:800px 450px;will-change:transform}
.uhr-minute{animation:uhr-umlauf 5s linear infinite}
.uhr-stunde{animation:uhr-umlauf 60s linear infinite}
/* außerhalb des Sichtfelds anhalten – spart Akku */
.karte-uhr.pausiert .uhr-minute,
.karte-uhr.pausiert .uhr-stunde{animation-play-state:paused}
.karte-bild::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(22,22,24,.9));
}
.badge{
  position:absolute;top:.875rem;left:.875rem;z-index:2;
  background:var(--btn);color:#fff;
  font-size:.6875rem;font-weight:700;
  letter-spacing:.06em;line-height:1.4;
  padding:.3125rem .75rem;border-radius:99px;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(200,16,46,.5);
  transform:translateZ(50px);
}

.karte-body{padding:2rem 2.125rem 2.125rem}
.body-flex{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:1.25rem}
.cover{
  flex:0 0 auto;width:7.75rem;
  border-radius:10px;overflow:hidden;line-height:0;margin-top:2px;
  border:1px solid rgba(200,16,46,.65);
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 18px rgba(200,16,46,.15);
  transform:translateZ(35px);
}
.cover img{width:100%;height:auto;display:block}
.body-text{flex:1;min-width:0}

.karte-haupt h3{
  font-family:var(--serif);
  font-size:1.75rem;font-weight:600;
  /* großes Heading: enges Leading */
  line-height:1.15;
  letter-spacing:-.015em;
  color:#fff;
  margin-bottom:.75rem;
}
/* Vibrancy: heller + minimal schwerer über dem Glasmaterial */
.nutzen{
  color:var(--text-glas);
  font-size:1rem;
  font-weight:450;
  letter-spacing:.005em;
  line-height:1.65;
}

.fakten{list-style:none;display:grid;gap:.4375rem;margin-bottom:1.125rem}
.fakten li{
  color:var(--text-glas);
  font-size:.9375rem;
  font-weight:450;
  letter-spacing:.005em;
  line-height:1.5;
  padding-left:1.375rem;position:relative;
}
.fakten li::before{content:"✓";position:absolute;left:0;color:var(--rot);font-weight:700}

/* --- Ausklappbare Details ------------------------------------------------ */
.details{
  margin-bottom:1.375rem;
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:.5rem;
}
.details summary{
  cursor:pointer;color:var(--rot);
  font-size:.9375rem;font-weight:600;line-height:1.4;
  list-style:none;
  display:inline-flex;align-items:center;gap:.4375rem;
  padding:.75rem 0;                /* Trefferfläche ≥ 44px */
  border-radius:6px;
  transition:opacity var(--resp-schnell) var(--ease-out);
}
.details summary::-webkit-details-marker{display:none}
.details summary:hover{opacity:.8}
.details summary:active{opacity:.6}
.details summary::after{
  content:"▾";font-size:.75rem;
  transition:transform var(--resp-standard) var(--ease-out);
}
.details[open] summary::after{transform:rotate(180deg)}

/* Inhalt fährt mit – kein schlagartiges Aufklappen mehr */
.details-huelle{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--resp-standard) var(--ease-out);
}
.details[open] .details-huelle{grid-template-rows:1fr}
/* Schließen: [open] fällt erst nach der Animation, sonst springt der Inhalt weg */
.details.schliesst .details-huelle{grid-template-rows:0fr}
.details.schliesst summary::after{transform:rotate(0deg)}
.details-inhalt{
  overflow:hidden;
  color:var(--text-glas);
  font-size:.9375rem;
  font-weight:450;
  letter-spacing:.005em;
  line-height:1.6;
}
.details-inhalt > div{padding-top:.875rem}
.details-inhalt p{margin-bottom:.75rem}
.details-inhalt strong{color:var(--text);font-weight:600}
.details-inhalt ul{list-style:none;display:grid;gap:.375rem;margin-bottom:.875rem}
.details-inhalt ul li{padding-left:1rem;position:relative}
.details-inhalt ul li::before{content:"·";position:absolute;left:4px;color:var(--rot);font-weight:700}
.details-hinweis{font-size:.8125rem;color:var(--grau);font-style:italic;margin-top:.25rem}

/* --- Preis / Fuß der Karte ----------------------------------------------- */
.karte-foot{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.preis{
  font-size:1.875rem;font-weight:700;color:#fff;
  line-height:1.1;letter-spacing:-.02em;
}
.preis small{
  display:block;margin-top:.1875rem;
  font-size:.8125rem;font-weight:500;
  line-height:1.4;letter-spacing:0;
  color:var(--grau);
}
.karte-haupt .btn{font-size:1rem;padding:.9375rem 1.875rem}

@media(max-width:32.5rem){
  .body-flex{flex-direction:column;align-items:center;text-align:center}
  .cover{width:9.375rem}
  .karte-body{padding:1.5rem 1.25rem 1.75rem}
  .karte-foot{justify-content:center;text-align:center}
}

/* ==========================================================================
   Vorschau-Kacheln
   ========================================================================== */
.vorschau-titel{
  text-align:center;margin:4rem 0 1.375rem;
  font-size:.75rem;font-weight:700;
  letter-spacing:.16em;line-height:1.4;
  text-transform:uppercase;color:var(--grau);
}
.mini-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;
  max-width:42.5rem;margin:0 auto;
  perspective:1000px;
}
.mini{
  position:relative;
  border:1px solid var(--karte-rand);
  border-radius:var(--radius-chip);
  background:rgba(22,22,24,.5);
  backdrop-filter:blur(var(--blur-chip)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur-chip)) saturate(150%);
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}
.mini-bild{aspect-ratio:16/9;position:relative;overflow:hidden}
.mini-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:grayscale(.15);
}
.mini-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.2),rgba(10,10,11,.78));
}
.mini-label{
  position:absolute;bottom:.75rem;left:.875rem;right:.875rem;z-index:2;
  font-size:.8125rem;font-weight:600;
  line-height:1.35;letter-spacing:.005em;
  color:var(--text-glas);
  transform:translateZ(30px);
}
@media(max-width:35rem){.mini-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Trust-Band
   ========================================================================== */
.trust{
  position:relative;z-index:1;
  background:rgba(20,20,22,.6);
  backdrop-filter:blur(var(--blur-flaeche)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur-flaeche)) saturate(160%);
  padding:2.125rem 0;text-align:center;
  color:var(--text-glas);
  font-size:.875rem;font-weight:450;
  letter-spacing:.005em;line-height:1.6;
}
.trust::before,.trust::after{
  content:"";position:absolute;left:0;right:0;height:1.25rem;pointer-events:none;
}
.trust::before{top:0;background:linear-gradient(rgba(10,10,11,.35),transparent)}
.trust::after{bottom:0;background:linear-gradient(transparent,rgba(10,10,11,.35))}
.trust strong{color:var(--text);font-weight:600}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  position:relative;z-index:1;
  padding:3.5rem 0 2.5rem;
  font-size:.875rem;
  color:var(--text-glas);
  background:rgba(10,10,11,.55);
  backdrop-filter:blur(var(--blur-flaeche)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur-flaeche)) saturate(160%);
}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;margin-bottom:2.25rem}
.footer-logo img{height:2.125rem;width:auto;margin-bottom:1rem;display:block}
.footer-logo p{max-width:16.25rem;color:var(--grau);line-height:1.6}
.footer-col h4{
  color:#fff;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.12em;line-height:1.4;
  margin-bottom:.625rem;
}
.footer-col a{
  color:var(--text-glas);text-decoration:none;
  display:block;
  padding:.6875rem 0;           /* Trefferfläche ≥ 44px */
  border-radius:6px;
  transition:color var(--resp-schnell) var(--ease-out);
}
.footer-col a:hover{color:var(--rot)}
.footer-col a:active{color:var(--btn-hover)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:1.5rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
  color:var(--grau);font-size:.8125rem;line-height:1.6;
}
.footer-bottom a{color:inherit}

/* ==========================================================================
   Rechtsseiten (Impressum / Datenschutz)
   ========================================================================== */
.rechtstext{padding:4rem 0 5rem;position:relative;z-index:1}
.rechtstext .wrap{max-width:48rem}
.rechtstext h1{
  font-family:var(--serif);
  font-size:clamp(2rem,4.5vw,2.75rem);
  font-weight:600;line-height:1.1;letter-spacing:-.02em;
  margin-bottom:.75rem;
}
.rechtstext .lead{
  color:var(--text-glas);font-size:1.0625rem;
  line-height:1.6;margin-bottom:2.5rem;
}
.rechtstext h2{
  font-family:var(--serif);
  font-size:1.5rem;font-weight:600;
  line-height:1.2;letter-spacing:-.01em;
  margin:2.5rem 0 .75rem;color:#fff;
}
.rechtstext h3{
  font-size:1.125rem;font-weight:600;
  line-height:1.3;letter-spacing:-.005em;
  margin:1.75rem 0 .625rem;color:#fff;
}
.rechtstext p{
  margin-bottom:1rem;color:var(--text-glas);
  font-weight:450;letter-spacing:.005em;line-height:1.7;
}
.rechtstext ul{margin:0 0 1rem 0;padding-left:1.25rem;color:var(--text-glas);line-height:1.7}
.rechtstext li{margin-bottom:.375rem}
.rechtstext strong{color:var(--text);font-weight:600}
.rechtstext a{color:var(--rot);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.rechtstext a:hover{color:var(--text)}
.adressblock{
  background:var(--karte);
  backdrop-filter:blur(var(--blur-karte)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur-karte)) saturate(160%);
  border:1px solid var(--karte-rand);
  border-radius:var(--radius-chip);
  padding:1.25rem 1.5rem;margin:1rem 0 1.5rem;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.adressblock p{margin:0;line-height:1.7}
.zurueck{
  display:inline-block;margin-top:2.5rem;
  color:var(--text-glas);text-decoration:none;font-weight:500;
  padding:.75rem 0;border-radius:6px;
  transition:color var(--resp-schnell) var(--ease-out),transform var(--resp-schnell) var(--ease-out);
}
.zurueck:hover{color:var(--rot)}
.zurueck:active{transform:scale(.97)}
.stand{margin-top:2rem;font-size:.8125rem;color:var(--grau)}

/* ==========================================================================
   Barrierefreiheit – drei unabhängige Nutzer-Signale
   ========================================================================== */

/* 1. Bewegung reduzieren: Cross-Fade statt Slide/3D, keine Endlosvideos */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.15s !important;
    scroll-behavior:auto !important;
  }
  .reveal{transform:none !important;opacity:var(--p)}
  .karte-haupt,.mini,.hero-video,.hero h1,.hero p{transform:none !important}
  .badge,.cover,.mini-label{transform:none !important}
  .hero-cta:hover,.btn:hover{transform:none}
  video{display:none}
  /* Uhr bleibt sichtbar, die Zeiger stehen still */
  .uhr-minute,.uhr-stunde{animation:none !important}
  .hero-media{
    background:url('/assets/hero-poster.jpg?v=3') center/cover no-repeat;
  }
  .mini-bild.kalender{background:url('/assets/card-kalender-poster.jpg?v=3') center/cover no-repeat}
  .mini-bild.pfeil{background:url('/assets/card-pfeil-poster.jpg?v=3') center/cover no-repeat}
}

/* 2. Transparenz reduzieren: Materialien werden deckend */
@media (prefers-reduced-transparency: reduce){
  header{background:#0a0a0b;backdrop-filter:none;-webkit-backdrop-filter:none}
  .karte-haupt,.adressblock{background:#161618;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mini{background:#161618;backdrop-filter:none;-webkit-backdrop-filter:none}
  .trust{background:#141416;backdrop-filter:none;-webkit-backdrop-filter:none}
  footer{background:#0a0a0b;backdrop-filter:none;-webkit-backdrop-filter:none}
  body::after{opacity:.25}
}

/* 3. Mehr Kontrast: nahezu deckende Flächen mit klarer Kante */
@media (prefers-contrast: more){
  :root{--text-glas:#f4f4f5;--grau:#9a9aa2}
  .karte-haupt,.mini,.adressblock{background:#0a0a0b;border-color:#6e6e74}
  .hero-video-overlay{background:rgba(10,10,11,.72)}
  nav a{color:#f4f4f5}
  .details-hinweis{color:#b8b8c0}
}

/* Druck */
@media print{
  body::before,body::after,video,.hero-media{display:none}
  body{background:#fff;color:#000}
  header,footer,.trust{background:none;backdrop-filter:none}
  .rechtstext a{color:#000}
}