/**
 * Base — Reset, Typografie, Container, Section-Layout
 *
 * Wird NACH design-tokens.css und VOR components.css geladen.
 *
 * @package hammerl-brot
 */

/* === Reset / Normalize-Light === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* rem-Basis: ascend-Parent setzt `html { font-size: 10px }` (alter 10px-rem-Trick).
     Unsere design-tokens/components rechnen mit der 16px-rem-Basis. ascend gewinnt trotz
     Child-Ladereihenfolge (verifiziert: ohne !important bleibt html bei 10px → Texte ~11px),
     daher !important nötig. Empirisch bestätigt: html 16px → B2B-Text 17px statt 10.6px. */
  font-size: 100% !important;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* === Typografie-Skala ===
 *
 * Hinweis zur Spezifität:
 * legacy-from-live.css setzt `h1 { font-size: 3em !important }` (h2 2.5em, h3 2em …).
 * Diese `!important`-em-Regeln stammen 1:1 aus dem Live-Override-Layer und treffen
 * vor allem Ascend-Default-Content-Headings. Unsere neuen Komponenten verwenden eigene
 * BEM-Heading-Klassen (.hmr-hero__title, .b2b-* h2, .brote-card__title …) mit eigener
 * font-size — die werden hier NICHT global überschrieben. Damit bleiben beide Welten
 * konfliktfrei: design-tokens steuert die Komponenten, der Legacy-Layer den Alt-Content.
 */

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0 0 var(--space-md) 0;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0 0 var(--space-sm) 0;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 var(--space-sm) 0;
}

p {
  margin: 0 0 var(--space-sm) 0;
}

a {
  color: var(--color-accent-strong);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-accent-2);
  text-decoration: underline;
}

small,
.text-small {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* === Section-Pattern === */
/*
 * Standard-Sektion mit drei Breiten-Optionen.
 * Nutze über hammerl_section_open( 'content' | 'wide' | 'narrow' ).
 *
 * Live-Aequivalent: .container homepagecontent (1170px) bzw. wide-Sektionen
 * außerhalb des Containers (full-width).
 */

.hammerl-section {
  padding: var(--space-lg) 0;
}

.hammerl-section--tight {
  padding: var(--space-md) 0;
}

.hammerl-section--loose {
  padding: var(--space-xl) 0;
}

.hammerl-section__inner {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

.is-content .hammerl-section__inner {
  max-width: var(--width-content);
}

.is-wide .hammerl-section__inner {
  max-width: var(--width-wide);
}

.is-narrow .hammerl-section__inner {
  max-width: var(--width-narrow);
}

/* === Section-Hintergründe (optional) === */

.hammerl-section--bg-warm {
  background: var(--color-bg-warm);
}

.hammerl-section--bg-accent {
  background: var(--color-accent);   /* blasses Gelb */
  color: var(--color-text);
}

.hammerl-section--bg-accent h1,
.hammerl-section--bg-accent h2,
.hammerl-section--bg-accent h3 {
  color: var(--color-text);
}

.hammerl-section--bg-accent a {
  color: var(--color-accent-strong);
}

/* === Utility-Klassen (sparsam — wir wollen nicht Tailwind nachbauen) === */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-0  { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* === Screen-Reader-Only === */

.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;
}

/* ==========================================================================
   A11y (WCAG AA) — additiv, ändert keine bestehenden Layouts
   ========================================================================== */

/* --- Sichtbarer Fokus-Ring für alle interaktiven Elemente ---
   Keyboard-Nutzer brauchen einen klar erkennbaren Fokus. Wir nutzen
   :focus-visible (nur Tastatur/Programm-Fokus, kein störender Ring bei
   Maus-Klick). Doppelter Outline-Kontrast (dunkler Ring + heller Versatz),
   damit der Fokus auf hellem UND dunklem Hintergrund sichtbar bleibt.
   Komponenten-spezifische Button-Fokus-Ringe in components.css ergänzen
   diese Grundregel (sie gewinnen durch spätere Ladereihenfolge). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.b2b-btn:focus-visible,
.hammerl-hero__btn:focus-visible,
.hammerl-b2b-strip__cta:focus-visible,
.brote-card:focus-visible {
  outline: 3px solid var(--color-accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Auf dunklen/farbigen Flächen (Hero, B2B-Strip, B2B-Hero) zusätzlich ein
   heller Ring, damit der Ocker-Ring nicht im Dunkeln untergeht. */
.hammerl-hero :focus-visible,
.hmr-hero :focus-visible,
.hammerl-b2b-strip :focus-visible,
.b2b-hero :focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
}

/* Nie outline:none ohne Ersatz: falls irgendwo Fokus entfernt wurde,
   stellen wir bei Tastatur-Fokus einen Ring wieder her. */
:focus-visible {
  outline-offset: 2px;
}

/* --- Kontrast: klar AA-kritische helle Grautexte anheben ---
   #888 auf Weiß ≈ 3.5:1 (unter AA 4.5:1 für Normaltext). Auf #757066
   anheben (≈ 4.6:1), Markenfarben bleiben unangetastet. */
.b2b-faq__answer em {
  color: #6f6a60;
}

/* --- Reduced Motion: Bewegungen für empfindliche Nutzer reduzieren ---
   Transitions/Animationen quasi abschalten, hover-translateY neutralisieren,
   smooth-scroll deaktivieren. Hero-Background-Video: in components.css wird es
   bei prefers-reduced-motion bereits durch ein statisches Bild ersetzt — hier
   nichts doppeln, nur sicherstellen dass keine Rest-Transition läuft. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Bewegte Hover-Effekte (Anheben) neutralisieren */
  .btn:hover,
  .hmr-btn:hover,
  .hmr-card:hover,
  .b2b-card:hover,
  .brote-card:hover {
    transform: none !important;
  }
}

/* --- Erhöhter Kontrast-Modus (optional, additiv) ---
   Nutzer mit prefers-contrast: more bekommen kräftigere Borders/Fokus. */
@media (prefers-contrast: more) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  .b2b-btn:focus-visible {
    outline-width: 4px;
  }
  .b2b-card,
  .b2b-benefit,
  .hmr-card {
    border-color: var(--color-text);
  }
}