/* =========================================================================
   kfzkorni.de — KfzKorni Reifenservice (Philipp Korneffer)
   Vanilla CSS Design-System
   Gebaut von Pixelschneiderei (pixelschneiderei.de)
   ========================================================================= */

@import url('fonts.css');

/* -------------------------------------------------------------------------
   1. CI-Tokens
   ------------------------------------------------------------------------- */
:root {
  /* CI verbindlich (aus Logo kfzkorni.svg) */
  --blue:        #013f9f;
  --navy:        #071428;

  /* Abgeleitete Töne */
  --paper:       #fafafb;
  --paper-2:     #eef1f6;
  --ink:         #0b1526;
  --blue-soft:   #d7e2f7;
  --blue-pale:   #eef3fc;
  --blue-dark:   #012c72;
  --line:        #e2e6ee;
  --muted:       #6b7385;
  --amber:       #f5a623;
  --whatsapp:    #25d366;
  --whatsapp-dk: #1da851;

  /* Typografie */
  --font-display:  'Oswald Var', 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Fluide Typo */
  --fs-xs:   clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --fs-sm:   clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
  --fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-md:   clamp(1.13rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-lg:   clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --fs-xl:   clamp(1.7rem, 1.4rem + 1.5vw, 2.4rem);
  --fs-2xl:  clamp(2.1rem, 1.7rem + 2.2vw, 3.4rem);
  --fs-3xl:  clamp(2.6rem, 1.9rem + 3.5vw, 4.6rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 5rem;
  --sp-16: 7rem;
  --sp-20: 9rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Schatten */
  --sh-sm: 0 1px 2px rgba(7,20,40,0.08), 0 1px 1px rgba(7,20,40,0.05);
  --sh-md: 0 6px 18px rgba(7,20,40,0.10), 0 2px 4px rgba(7,20,40,0.05);
  --sh-lg: 0 18px 40px rgba(7,20,40,0.16), 0 6px 12px rgba(7,20,40,0.06);

  /* Layout */
  --container: 1180px;
  --container-narrow: 780px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 360ms;
}

/* -------------------------------------------------------------------------
   2. Modern Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--muted);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur) var(--ease); }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: var(--ink); color: var(--paper);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  z-index: 100; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--paper); }

/* -------------------------------------------------------------------------
   3. Typografie
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 600; }
h2 { font-size: var(--fs-2xl); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 600; }
h3 { font-size: var(--fs-xl);  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 500; color: var(--blue); }
h4 { font-size: var(--fs-lg);  font-family: var(--font-body); font-weight: 700; color: var(--ink); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--blue);
  margin-bottom: var(--sp-2);
}

p { max-width: 70ch; }
.lede { font-size: var(--fs-md); color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.accent-blue { color: var(--blue); }

ul, ol { padding-left: 1.2em; }
.list-clean { list-style: none; padding: 0; }
.list-check { list-style: none; padding: 0; }
.list-check li {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) 2.2rem;
}
.list-check li::before {
  content: '';
  position: absolute; left: 0; top: 0.7rem;
  width: 1.4rem; height: 1.4rem;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>") center/contain no-repeat;
}

/* -------------------------------------------------------------------------
   3b. Legal-Seiten (Impressum, Datenschutz) — sachlich, ohne Display-Schrift
   ------------------------------------------------------------------------- */
.legal-page h1 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--ink);
}
.legal-page h2 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.legal-page h3 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.legal-page .lede { font-size: var(--fs-base); color: var(--muted); }
.legal-page p, .legal-page li { font-size: var(--fs-sm); line-height: 1.65; }
.legal-page .eyebrow { color: var(--muted); }

/* -------------------------------------------------------------------------
   4. Layout / Container / Section
   ------------------------------------------------------------------------- */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2rem, var(--container-narrow)); margin-inline: auto; }

.section { padding-block: clamp(var(--sp-10), 8vw, var(--sp-16)); }
:where(section[id], [id]) { scroll-margin-top: calc(var(--header-h) + 0.5rem); }
.section--tight { padding-block: clamp(var(--sp-8), 6vw, var(--sp-12)); }
.section--paper  { background: var(--paper); }
.section--paper-2 { background: var(--paper-2); }
.section--navy   { background: var(--navy); color: var(--paper); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--paper); }
.section--navy h3 { color: #9fc0ff; }
.section--navy .eyebrow { color: #6fa1ff; }

.section-header { text-align: center; max-width: 60ch; margin: 0 auto var(--sp-10); }
.section-header p { margin-inline: auto; }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.split { display: grid; gap: var(--sp-8); }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--40-60 { grid-template-columns: 2fr 3fr; }
  .split--60-40 { grid-template-columns: 3fr 2fr; }
}
.split > * { min-width: 0; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.text-center { text-align: center; }

/* -------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 251, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  gap: var(--sp-4);
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: inherit;
  min-width: 0;
}
.brand img { height: 44px; width: 44px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
.brand-tag  { font-family: var(--font-mono); color: var(--blue); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn--call { background: var(--blue-pale); color: var(--blue); }
.icon-btn--call:hover { background: var(--blue-soft); transform: translateY(-1px); }
.icon-btn--whatsapp { background: var(--whatsapp); color: white; }
.icon-btn--whatsapp:hover { background: var(--whatsapp-dk); transform: translateY(-1px); }
.icon-btn--whatsapp svg { fill: currentColor; }
.icon-btn-label { display: none; }
@media (min-width: 560px) {
  .icon-btn { width: auto; border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
  .icon-btn-label { display: inline; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
}

/* -------------------------------------------------------------------------
   6. Buttons / CTAs
   ------------------------------------------------------------------------- */
.cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
}
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(0); }

.cta--primary { background: var(--blue); color: var(--paper); box-shadow: var(--sh-md); }
.cta--primary:hover { background: var(--blue-dark); color: var(--paper); box-shadow: var(--sh-lg); }

.cta--ghost {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid currentColor;
}
.cta--ghost:hover { background: var(--blue-pale); color: var(--blue); }
.section--navy .cta--ghost { color: var(--paper); }
.section--navy .cta--ghost:hover { background: rgba(255,255,255,0.1); }

.cta--whatsapp { background: var(--whatsapp); color: white; }
.cta--whatsapp:hover { background: var(--whatsapp-dk); color: white; }
.cta--whatsapp svg { width: 18px; height: 18px; fill: currentColor; }

.cta--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }
.cta-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(var(--sp-10), 10vw, var(--sp-16)) 0 clamp(var(--sp-8), 8vw, var(--sp-12));
  overflow: hidden;
  background: var(--navy);
  color: var(--paper);
}
.hero::before, .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  top: -40%; right: -15%;
  width: 65vw; height: 65vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle at 30% 70%, rgba(1,63,159,0.55), transparent 60%);
}
.hero::after {
  bottom: -50%; left: -20%;
  width: 70vw; height: 70vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle at 70% 30%, rgba(1,63,159,0.28), transparent 60%);
}
.hero > * { position: relative; z-index: 1; }
.hero-inner { max-width: 62ch; }
.hero h1 { margin-bottom: var(--sp-4); color: var(--paper); }
.hero h1 em { color: #6fa1ff; font-style: normal; }
.hero .lede { margin-bottom: var(--sp-6); color: #c7d2e6; }
.hero .eyebrow { color: #6fa1ff; }

.hero-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-md);
  max-width: 56ch;
}
.hero-notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: #6fa1ff; }
.hero-notice p { margin: 0; font-size: var(--fs-sm); color: #c7d2e6; }
.hero-notice strong { color: var(--paper); }

.hero-quickinfo {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  align-items: center;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-quickinfo__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--paper);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--dur) var(--ease);
}
.hero-quickinfo__phone:hover { color: #6fa1ff; }
.hero-quickinfo__phone svg { width: 18px; height: 18px; flex-shrink: 0; color: #6fa1ff; }
.hero-quickinfo__phone strong {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b97ad;
  margin-right: var(--sp-1);
  font-weight: 500;
}
.hero-rating {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--paper);
}
.hero-rating svg { width: 15px; height: 15px; fill: #f5b301; }
.hero-rating .stars { display: inline-flex; gap: 1px; }

/* -------------------------------------------------------------------------
   8. Karten / Services
   ------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.card--elevated { box-shadow: var(--sh-sm); }
.card--elevated:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.card h3 { margin-bottom: var(--sp-1); }

.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--blue-soft); }
.service-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--blue-pale);
  display: grid; place-items: center;
  margin-bottom: var(--sp-2);
}
.service-card__icon svg { width: 26px; height: 26px; stroke: var(--blue); fill: none; stroke-width: 1.6; }
.service-card h3 { font-size: var(--fs-md); margin: 0; }
.service-card p { font-size: var(--fs-sm); margin: 0; }
.service-card__price {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--blue);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   9. „Jetzt geöffnet" Status-Badge + Öffnungszeiten
   ------------------------------------------------------------------------- */
.status-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.status-badge::before {
  content: '';
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  display: inline-block;
}
.status-badge--open    { background: rgba(37,211,102,0.16); color: #1f8f4a; }
.status-badge--open::before    { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,0.18); }
.status-badge--closed  { background: rgba(255,255,255,0.08); color: #c7d2e6; }
.status-badge--closed::before  { background: #8b97ad; }
.status-badge--holiday { background: rgba(1,63,159,0.18); color: #9fc0ff; }
.status-badge--holiday::before { background: #6fa1ff; }
/* Helle Sektionen (nicht Hero) brauchen dunklere "closed"-Textfarbe */
.section--paper .status-badge--closed,
.section--paper-2 .status-badge--closed { background: var(--paper-2); color: var(--muted); }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.hours-table td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.hours-table td:last-child { text-align: right; font-family: var(--font-mono); color: var(--ink); }
.hours-table tr.today td { color: var(--blue); font-weight: 600; }

/* -------------------------------------------------------------------------
   10. Map Consent (Click-to-Load für OSM-Iframe)
   ------------------------------------------------------------------------- */
.map-consent {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: linear-gradient(135deg, var(--blue-pale), var(--paper-2));
}
.map-placeholder {
  padding: clamp(var(--sp-6), 6vw, var(--sp-10));
  text-align: center;
  min-height: 380px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-3);
}
.map-placeholder svg.map-pin { width: 52px; height: 52px; fill: var(--blue); margin: 0 auto var(--sp-2); }
.map-placeholder h3 { color: var(--blue); font-size: var(--fs-lg); margin: 0; }
.map-placeholder .map-address { font-weight: 600; color: var(--ink); font-family: var(--font-body); text-transform: none; }
.map-placeholder .map-note { color: var(--muted); max-width: 50ch; margin: 0 auto; font-size: var(--fs-sm); }
.map-placeholder .cta { margin: var(--sp-2) auto 0; }
.map-placeholder .map-fallback { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--muted); }
.map-consent.is-loaded { background: transparent; }
.map-consent.is-loaded .map-placeholder { display: none; }
.map-consent iframe { display: block; width: 100%; height: 380px; border: 0; }

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy); color: #c7d2e6;
  padding: var(--sp-10) 0 var(--sp-6);
  font-size: var(--fs-sm);
}
.site-footer a { color: #9fc0ff; }
.site-footer a:hover { color: #cddcff; }
.footer-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-grid h4 {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--sp-4);
  font-weight: 400;
}
.footer-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-logo-badge {
  display: inline-flex;
  padding: var(--sp-2);
  background: var(--paper);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-sm);
}
.footer-logo-badge img { display: block; }
.footer-bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
}
.foot-signature {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: #8b97ad;
}
.foot-signature svg { width: 14px; height: 14px; stroke: currentColor; }
.foot-signature a { color: #8b97ad; text-decoration: underline; text-decoration-thickness: 1px; }
.foot-signature a:hover { color: #cddcff; }

/* -------------------------------------------------------------------------
   12. Sticky WhatsApp Floating Button (Mobile)
   ------------------------------------------------------------------------- */
.fab-whatsapp {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: grid; place-items: center;
  box-shadow: var(--sh-lg);
  color: white;
  transition: transform var(--dur) var(--ease);
}
.fab-whatsapp:hover { transform: scale(1.05); color: white; }
.fab-whatsapp svg { width: 30px; height: 30px; fill: currentColor; }
@media (min-width: 920px) { .fab-whatsapp { display: none; } }

/* -------------------------------------------------------------------------
   13. Reveal-Animationen
   ------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* -------------------------------------------------------------------------
   14. Utility
   ------------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

/* -------------------------------------------------------------------------
   15. Pull Quote
   ------------------------------------------------------------------------- */
.pull-quote {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-xl);
  color: var(--blue);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: var(--sp-6) 0;
}
.pull-quote::before, .pull-quote::after {
  content: '';
  display: block;
  width: 60px; height: 3px;
  background: var(--blue);
  margin: var(--sp-3) auto;
}

/* -------------------------------------------------------------------------
   16. Print
   ------------------------------------------------------------------------- */
@media print {
  .site-header, .fab-whatsapp, .cta-group, .site-footer { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}