/* ===========================================================================
   CUSTODIA PROTECTION — base.css
   Reset, Focus, Skip-Link, Container, Section-Rhythmus, Typo-Primitives,
   Reveal-Pattern.  Keine Komponenten — die stehen in components.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   RESET
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ohne scroll-padding verschwinden Anker-Ziele unter Notruf-Bar + Sticky-Header. */
  scroll-padding-top: calc(var(--notruf-h) + var(--header-h) + 24px);
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Body-Scroll-Sperre — gesetzt von main.js (Mobile-Nav) und modal.js */
body.is-locked {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   FOCUS — der Ring wird NIRGENDS entfernt.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Auf dunklen Sektionen das hellere Navy — sonst verschwindet der Ring. */
.sec--dark :focus-visible,
.hero :focus-visible,
.notruf :focus-visible,
.footer :focus-visible {
  outline-color: var(--accent-lit);
}

/* Mausklicks sollen keinen Ring erzeugen. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------------------------
   SKIP-LINK
   --------------------------------------------------------------------------- */
.skip {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: calc(var(--z-modal) + 10);
  padding: 12px 22px;
  background: var(--ink);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transform: translate(-50%, -110%);
  transition: transform var(--dur) var(--ease-out);
}

.skip:focus {
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------------------
   CONTAINER
   --------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: var(--container-narrow);
}

/* ---------------------------------------------------------------------------
   SECTION-RHYTHMUS
   Kundenwunsch: „andere Farbe, nicht klar weiß, damit der Übergang nicht so
   krasse Kontrast hat."  Regel: NIE reines Weiß direkt nach dem dunklen Hero.

   .sec setzt padding-block. Abweichendes Padding IMMER über eine eigene
   Modifier-Klasse — niemals .sec mit einem Element-Selektor überschreiben.
   --------------------------------------------------------------------------- */
.sec {
  padding-block: var(--section-py);
}

.sec--light {
  background: var(--bg);
}

.sec--white {
  background: var(--surface);
}

.sec--dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

/* Sektion direkt unter dem Fade — der Gradient liefert den optischen Abstand. */
.sec--flush-top {
  padding-top: clamp(40px, 5vw, 64px);
}

/* Sektion, die direkt an die vorherige anschließt (Trust-Badges an Stats). */
.sec--no-top {
  padding-top: 0;
}

/* Sektion ohne unteren Abstand — z. B. die Anker-Nav direkt über der ersten
   Detailsektion der Leistungsseite. */
.sec--no-bottom {
  padding-bottom: 0;
}

/* Der Übergangsstreifen zwischen Hero und Stats-Bar. Rein dekorativ. */
.fade-from-dark {
  height: clamp(72px, 9vw, 120px);
  background: linear-gradient(180deg, #14181F 0%, #4A4E56 34%, #F4F5F6 100%);
}

/* ---------------------------------------------------------------------------
   TYPO-PRIMITIVES
   --------------------------------------------------------------------------- */

/* .eyebrow — das Signature-Element. Kehrt in jeder Sektion wieder.
   22 × 2 px Navy-Strich: lang genug als Marker, kurz genug, um nicht als
   Trennlinie zu wirken. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent-ink);
}

/* Zentrierter Eyebrow außerhalb einer .sec-head--center (z. B. /danke/). */
.eyebrow--center {
  justify-content: center;
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--accent);
}

.sec--dark .eyebrow,
.hero .eyebrow,
.footer .eyebrow {
  color: var(--accent-lit);
}

.sec--dark .eyebrow::before,
.hero .eyebrow::before,
.footer .eyebrow::before {
  background: var(--accent-lit);
}

/* Überschriften */
h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}

h1,
.h1 {
  font-size: var(--fs-h1);
}

h2,
.h2 {
  font-size: var(--fs-h2);
}

h3,
.h3 {
  font-size: var(--fs-h3);
}

/* Hero-H1 */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

/* Fließtext */
.lede {
  max-width: var(--measure-narrow);
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

.sec--dark .lede,
.hero .lede {
  color: var(--text-on-dark-muted);
}

.body {
  max-width: var(--measure);
  text-wrap: pretty;
}

.body + .body {
  margin-top: var(--s-4);
}

/* Zentrierter Fließtext (z. B. „Bewirb dich trotzdem"). */
.body--center {
  margin-inline: auto;
  text-align: center;
}

.sec--dark .body {
  color: var(--text-on-dark-muted);
}

/* Utilities */
.small {
  font-size: var(--fs-small);
}

.muted {
  color: var(--text-muted);
}

.sec--dark .muted,
.footer .muted {
  color: var(--text-on-dark-muted);
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.nowrap {
  white-space: nowrap;
}

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

/* Abstands-Utilities. Die CSP erlaubt zwar 'unsafe-inline' für style-Attribute,
   aber Layout gehört ins Stylesheet, nicht ins Markup. */
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

/* .sec-head — die Section-Grammatik: Eyebrow → H2 → Subline. */
.sec-head {
  max-width: 720px;
  margin-bottom: var(--s-7);
}

.sec-head .eyebrow {
  margin-bottom: var(--s-4);
}

.sec-head .lede {
  margin-top: var(--s-4);
}

.sec-head--center {
  margin-inline: auto;
  text-align: center;
}

.sec-head--center .lede {
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   REVEAL-PATTERN
   data-reveal      = Gruppe
   data-reveal-item = die einzelnen Elemente darin

   Zwei Absicherungen: prefers-reduced-motion und .no-js machen alles sofort
   sichtbar. Fällt JS aus, sieht der Besucher die volle Seite — keinen leeren
   Bildschirm.
   --------------------------------------------------------------------------- */
[data-reveal-item] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-in [data-reveal-item] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.no-js [data-reveal-item] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-item] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}