/* ==========================================================================
   Base: Reset, Typografie, Layout-Primitive
   ========================================================================== */

@layer base, components, animations;

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  scroll-padding-bottom: 5rem; /* Mobile Sticky-Bar verdeckt keinen Fokus */
  color-scheme: light;
  accent-color: var(--color-heat-strong);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
a, button, label, summary, [role="button"] {
  touch-action: manipulation;
  overflow-x: clip;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  color: inherit;
}
p { text-wrap: pretty; }
strong, b { font-weight: 650; }

a {
  color: var(--color-water-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  a:hover { text-decoration-color: currentColor; }
}

::selection { background: hsl(var(--heat-hsl) / 0.22); color: var(--color-ink); }
.tone-ink ::selection, .site-footer ::selection, .hero ::selection { background: hsl(var(--water-hsl) / 0.4); color: var(--color-text-on-dark); }

/* Fokus: immer sichtbar, ruhig, Wasser-Ton */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.tone-ink :focus-visible, .hero :focus-visible, .site-footer :focus-visible,
.closing :focus-visible, .mobile-menu :focus-visible, .lightbox :focus-visible {
  outline-color: var(--color-focus-on-dark);
}
main:focus { outline: none; }

/* Scrollbar */
html { scrollbar-color: hsl(var(--steel-hsl) / 0.6) hsl(var(--paper-2-hsl)); scrollbar-width: thin; }

/* Tabellarische Ziffern bei Daten */
.tabular, time, .plate dd, .site-footer__list a[href^="tel:"] { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section + .section { padding-top: calc(var(--section-y) * 0.6); }

.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); max-width: 46rem; }
.section-head--row {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5);
}
.section-title { font-size: var(--text-3xl); letter-spacing: var(--tracking-heading); }
.section-lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 40rem; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-7); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-6); font-stretch: 100%; font-weight: 700; letter-spacing: -0.01em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }

/* Dunkle Sektionen */
.tone-ink { background: var(--color-ink); color: var(--color-text-on-dark); }
.tone-ink .section-lead, .tone-ink p { color: var(--color-text-on-dark-muted); }
.tone-ink a:not(.btn) { color: hsl(var(--water-hsl)); }

/* ---------- Utilities ---------- */
.skip-link {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: calc(var(--z-overlay) + 1);
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink); color: var(--color-text-on-dark);
  border-radius: var(--radius-sm); font-weight: 650; text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.cover { width: 100%; height: 100%; object-fit: cover; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Sichtbarer Platzhalter für offene Kundendaten */
mark.ph {
  background: hsl(48 100% 88%);
  color: hsl(30 60% 22%);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0;
  white-space: normal;
}

.img-missing {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: var(--color-surface-sunk); color: var(--color-text-muted); font-size: var(--text-sm);
}

} /* @layer base */

/* Ungelayerte Utilities gewinnen gegen alle Layer – ohne !important */
[hidden] { display: none; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}