/* ==========================================================================
   style.css – Wietzke AI
   Design-Tokens, Header/Menü, Hero-Skelett, Sektionen, Footer, Rechtsseiten.
   Konvention: Code Englisch, Kommentare Deutsch.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farben – flach, weiß, typografisch */
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-muted: #6b6b6b;
  --color-dark: #111111;
  --color-on-dark: #ffffff;
  --color-line: #e6e6e6;

  /* Radien */
  --radius-card: 6px;
  --radius-pill: 999px;

  /* --font-sans: siehe fonts.css (Schrift-Stack + optionale @font-face) */

  /* Typo-Stufen (Referenz: 1420 px Breite → H1 = 72 px, Fließtext 18 px) */
  /* Headline: nach Breite (Referenz 5.07vw), auf kurzen 16:9-Viewports zusätzlich nach Höhe gedeckelt,
     damit der Hero auf eine Bildschirmhöhe passt (beim Referenz-Seitenverhältnis 1.37 greift 7svh nicht). */
  --step-h1: clamp(2.6rem, min(5.07vw, 7svh), 5.5rem);
  --step-sub: clamp(1rem, 1.27vw, 1.25rem);
  --step-link: clamp(0.8125rem, 1vw, 0.9375rem);
  --step-body: 1.0625rem;
  --step-small: 0.8125rem;
  --step-h2: clamp(2rem, 3.2vw, 2.5rem);

  /* Seitenränder */
  --page-pad: clamp(1rem, 2.4vw, 2.5rem);

  /* Kartengeometrie (Vorbild: Pitch 20,85 % vw, Breite 20,14 % vw, Höhe 5:6).
     Basis-Einheit u = min(100vw, 137vh): auf breiten/flachen Screens (16:9)
     werden die Karten kleiner, damit die Mittelkarte ≤ 34 % der Höhe bleibt. */
  --u: min(100vw, 137vh);
  --u: min(100vw, 137svh);
  --pitch: calc(var(--u) * 0.2085);
  --card-w: calc(var(--u) * 0.2014);
  --card-h: calc(var(--u) * 0.2417);
  --card-gap: calc(var(--u) * 0.0071);
  /* Höhe des Band-Bereichs: Platz für die an den Rändern höher werdenden
     Karten des 3D-Karussells (≈ +25 %). */
  --band-h: calc(var(--card-h) * 1.25);

  /* Service-Karten auf der Startseite (gleiche Größe wie die Mittelkarte) */
  --svc-w: var(--card-w);
  --svc-h: var(--card-h);

  /* Hero-Rhythmus (Vorbild: Headline-Oberkante ≈ 9,7 %, Bandmitte ≈ 60,5 %,
     Beschreibung ≈ 88 %, Links ≈ 94 % der Viewport-Höhe) */
  --hero-top: max(9.7vh, 4.5rem);
  --hero-top: max(9.7svh, 4.5rem);
  --hero-bottom: clamp(1.5rem, 5vh, 4rem);
  --hero-bottom: clamp(1.5rem, 5svh, 4rem);
  --hero-gap-min: 2rem;

  /* Topbar */
  --btn-round: clamp(40px, 3.4vw, 52px);
  --pill-h: 30px;
  --topbar-pad-y: clamp(14px, 1.75vh, 22px);
  --topbar-pad-y: clamp(14px, 1.75svh, 22px);
  --topbar-pad-x: clamp(16px, 2.4vw, 40px);
}

/* Kleine Viewports: größere Karten (≈ 2 Karten sichtbar, Pitch ≈ 52 vw) */
/* Kurze, breite Viewports (z. B. 1440×810, 1920×1080): Mindestlücken und Fußabstand im Hero
   verkleinern, damit Beschreibung und Links noch in die erste Bildschirmhöhe passen. */
@media (min-width: 768px) and (max-height: 880px) {
  :root {
    --hero-gap-min: 1.25rem;
    --hero-bottom: 1.25rem;
  }
}

@media (max-width: 767px) {
  :root {
    --pitch: 52vw;
    --card-w: calc(52vw * 0.966);
    --card-h: calc(var(--card-w) * 1.2);
    --card-gap: calc(52vw * 0.034);
    --band-h: calc(var(--card-h) * 1.2);
    /* Service-Karten 2×2: zwei Karten pro Zeile inkl. Seitenrand */
    --svc-w: calc((100vw - 2 * var(--page-pad) - var(--card-gap)) / 2);
    --svc-h: calc(var(--svc-w) * 1.2);
    --hero-gap-min: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   2. Basis / Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scroll-Sperre bei geöffnetem Menü (main.js setzt die Klasse auf <html>) */
html.menu-open,
html.menu-open body {
  overflow: hidden;
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}

button {
  font: inherit;
  color: inherit;
}

/* Nur für Screenreader */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link: erscheint nur bei Tastaturfokus */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-pill);
  transform: translate(-50%, -300%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  outline-color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   3. Topbar (absolut über dem Hero, nicht sticky)
   -------------------------------------------------------------------------- */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: var(--topbar-pad-y) var(--topbar-pad-x);
  pointer-events: none; /* nur die Bedienelemente selbst sind klickbar */
}

.topbar > * {
  pointer-events: auto;
}

/* Runder dunkler Button links (Monogramm bzw. Zurück-Pfeil) */
/* Logo links im Header (ersetzt auf Wunsch den runden Button; Bild 240×240 für Retina) */
.topbar__logo {
  display: block;
  justify-self: start;
  pointer-events: auto;
  height: calc(var(--btn-round) * 1.4);
  width: calc(var(--btn-round) * 1.4);
  margin-top: calc(var(--btn-round) * -0.12); /* optisch auf Höhe von Menü und Pill zentrieren */
}


.topbar__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Logo ohne Kreis (breites W): feste Maße direkt am Bild, keine Prozentwerte – WebKit (iOS Safari/Chrome)
   löst height:100% in einem Container mit automatischer Breite sonst auf die Originalbreite auf. */
.topbar__logo--wide {
  width: auto;
  height: auto;
  line-height: 0;
  margin-top: calc(var(--btn-round) * -0.02);
}

.topbar__logo--wide img {
  width: auto;
  height: calc(var(--btn-round) * 1.15); /* Desktop ≈ 56 px hoch, ≈ 108 px breit */
  max-width: none;
}

@media (max-width: 767px) {
  .topbar__logo--wide { margin-top: calc(var(--btn-round) * 0.2); }
  .topbar__logo--wide img { height: calc(var(--btn-round) * 0.58); } /* Handy ≈ 23 px hoch, ≈ 44 px breit */
}

.topbar__round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-round);
  height: var(--btn-round);
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-on-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: calc(var(--btn-round) * 0.42);
  letter-spacing: -0.02em;
  justify-self: start;
}

.topbar__round svg {
  width: calc(var(--btn-round) * 0.42);
  height: calc(var(--btn-round) * 0.42);
}

.topbar__round:focus-visible {
  outline-offset: 3px;
}

/* Hamburger in der Mitte: zwei dünne Linien */
.topbar__burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: var(--pill-h);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  justify-self: center;
  position: relative;
}

.topbar__burger-line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Geöffnet: Linien werden zum X */
.topbar__burger[aria-expanded="true"] .topbar__burger-line:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.topbar__burger[aria-expanded="true"] .topbar__burger-line:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* Dunkle Pille rechts */
.topbar__pill {
  display: inline-flex;
  align-items: center;
  height: var(--pill-h);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  justify-self: end;
}

.topbar__pill:hover,
.topbar__round:hover {
  background: #2a2a2a;
}

/* Bei geöffnetem Menü bleiben nur Hamburger (X) und Overlay sichtbar */
html.menu-open .topbar__round,
html.menu-open .topbar__pill {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   4. Menü-Overlay (Vollbild, weiß)
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--color-bg);
  overflow-y: auto;
  padding: calc(var(--topbar-pad-y) * 2 + var(--pill-h)) var(--page-pad) var(--page-pad);
}

.menu[hidden] {
  display: none;
}

/* Hauptnavigation füllt die flexible Zeile und zentriert ihre Liste vertikal */
.menu__primary {
  display: grid;
  align-content: center;
}

.menu__main {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.25em;
  text-align: center;
}

.menu__main a {
  display: inline-block;
  padding: 0.1em 0.2em;
  font-size: clamp(2.25rem, 6.5vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.menu__main a:hover,
.menu__main a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.08em;
}

.menu__small {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding-top: 2rem;
  font-size: var(--step-small);
}

/* --------------------------------------------------------------------------
   5. Hero-Skelett (Startseite UND Referenzen – identische Struktur)
   Zeilen: [Platz für Topbar][Headline+Subline][flex][Band][flex][Text+Links][Rand]
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-rows:
    var(--hero-top)
    auto
    minmax(var(--hero-gap-min), 1fr)
    auto
    minmax(var(--hero-gap-min), 1fr)
    auto
    var(--hero-bottom);
  /* Auf sehr hohen/schmalen Viewports (Tablet hochkant) nicht auf volle Höhe
     strecken, sonst schwebt das Band in leerem Raum. */
  /* minmax(0, 1fr): breiter Inhalt (Karussell-Track) darf die Spalte nicht aufweiten */
  grid-template-columns: minmax(0, 1fr);
  min-height: min(100vh, 95vw);
  min-height: min(100svh, 95vw);
  text-align: center;
  background: var(--color-bg);
}

.hero__intro {
  grid-row: 2;
  padding: 0 var(--page-pad);
}

.hero__title {
  font-size: var(--step-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-wrap: balance;
}

.hero__sub {
  margin-top: clamp(0.75rem, 1.9vh, 1.5rem);
  margin-top: clamp(0.75rem, 1.9svh, 1.5rem);
  font-size: var(--step-sub);
  line-height: 1.4;
  color: #333333;
  text-wrap: balance;
}

/* Das Band: nimmt Karussell (referenzen.html) oder Service-Karten (index.html)
   auf. Inhalt wird vertikal zentriert; horizontal wird abgeschnitten, damit
   die Seite niemals seitlich scrollt. */
.hero__band {
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--band-h);
  width: 100%;
  min-width: 0; /* overflow: clip erzeugt keinen Scroll-Container → min-width explizit 0 */
  overflow-x: clip;
  overflow-y: visible;
}

.hero__outro {
  grid-row: 6;
  padding: 0 var(--page-pad);
}

.hero__desc {
  max-width: clamp(20rem, 46vw, 44rem);
  margin: 0 auto;
  font-size: var(--step-sub);
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: balance;
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2vw;
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  margin-top: clamp(1rem, 2.5svh, 1.75rem);
  font-size: var(--step-link);
  line-height: 1.5;
}

.hero__links a {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   6. Service-Karten im Hero-Band der Startseite (flach, kein 3D)
   -------------------------------------------------------------------------- */
.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--card-gap);
  width: 100%;
  padding: 0 var(--page-pad);
}

.services__item {
  flex: 0 0 auto;
}

.services__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--svc-w);
  height: var(--svc-h);
  padding: clamp(0.9rem, 1.3vw, 1.4rem);
  border-radius: var(--radius-card);
  background: var(--svc-bg, linear-gradient(160deg, #cbbca8, #5b4d40));
  color: var(--color-on-dark);
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.services__card:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .services__card,
  .services__card:hover {
    transition: none;
    transform: none;
  }
}

/* Warme/neutrale Verläufe; die dunkle Seite liegt unten (weiße Schrift, AA) */
.services__card--1 {
  --svc-bg: linear-gradient(165deg, #dccab5 0%, #a68b70 45%, #5e4a39 100%);
}

.services__card--2 {
  --svc-bg: linear-gradient(165deg, #c9d2d6 0%, #7d8d95 45%, #3e4b53 100%);
}

.services__card--3 {
  --svc-bg: linear-gradient(165deg, #d9d2c6 0%, #9b9082 45%, #4d453c 100%);
}

.services__card--4 {
  --svc-bg: linear-gradient(165deg, #c5cfbd 0%, #7e8f78 45%, #3f4c41 100%);
}

.services__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
}

.services__title {
  font-size: clamp(1.05rem, 1.55vw, 1.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   7. Karussell – FALLBACK-Styles (ohne carousel.css/carousel.js)
   In einer Cascade-Layer, damit die Engine (carousel.css, ungelayert) jede
   dieser Regeln ohne Spezifitäts-Kampf überschreibt. Ohne JS erscheinen die
   Karten als flache, zentrierte Reihe; Überstand wird vom Band abgeschnitten.
   -------------------------------------------------------------------------- */
@layer carousel-fallback {
  .carousel {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  .carousel__track {
    display: flex;
    justify-content: center;
    gap: var(--card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    height: var(--card-h);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  .carousel__item {
    flex: 0 0 auto;
    width: var(--card-w);
    height: var(--card-h);
  }

  .carousel__card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
  }

  .carousel__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .carousel__card:focus-visible {
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   8. Sektionen unterhalb des Heros
   -------------------------------------------------------------------------- */
.section {
  padding: clamp(4rem, 10vh, 8rem) var(--page-pad);
}

.section + .section {
  border-top: 1px solid var(--color-line);
}

.section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.section__title {
  font-size: var(--step-h2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.section__lead {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 40rem;
}

.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Leistungen: 4 Textblöcke, 2 Spalten */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.block__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.block p {
  margin-top: 0.75rem;
  color: #333333;
}

/* Ablauf: nummerierte Schritte */
.step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.step__num {
  display: block;
  margin-bottom: 1.25rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Referenzen-Teaser: Mini-Karten */
.mini {
  display: block;
  text-decoration: none;
}

.mini__img {
  aspect-ratio: 5 / 6;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.mini__title {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mini__text {
  margin-top: 0.35rem;
  color: var(--color-text-muted);
  font-size: 1rem;
}

.section__more {
  margin-top: clamp(2rem, 5vh, 3rem);
  font-weight: 500;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  background: #2a2a2a;
}

/* Kontakt */
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.contact__mail {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.contact__note {
  margin-top: 1.5rem;
  font-size: var(--step-small);
  color: var(--color-text-muted);
  max-width: 40rem;
}

/* Projektliste (referenzen.html#projekte) */
.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 1023px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .projects {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project {
  scroll-margin-top: 6rem; /* Anker aus dem Karussell landen nicht unter dem Rand */
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.project__num {
  display: block;
  font-size: var(--step-small);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.project__title {
  margin-top: 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.project__cat {
  margin-top: 0.35rem;
  font-size: 1rem;
  color: var(--color-text-muted);
}

.project__text {
  margin-top: 0.75rem;
  color: #333333;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 2rem var(--page-pad);
  border-top: 1px solid var(--color-line);
  font-size: var(--step-small);
  color: var(--color-text-muted);
}

.footer__nav {
  display: flex;
  gap: 1.5rem;
}

.footer a {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   10. Rechtsseiten (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(var(--hero-top) + 1.5rem) var(--page-pad) clamp(4rem, 10vh, 7rem);
}

.legal h1 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.legal__intro {
  margin-top: 1rem;
  color: var(--color-text-muted);
}

.legal section {
  margin-top: clamp(2rem, 4vh, 3rem);
}

.legal h2 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal p,
.legal address,
.legal li {
  margin-top: 0.75rem;
  color: #333333;
  font-style: normal;
}

.legal ul {
  list-style: disc;
  padding-left: 1.25rem;
}

/* Platzhalter, die der Inhaber ersetzen muss – deutlich markiert */
.ph {
  background: #fff3b0;
  color: var(--color-text);
  padding: 0 0.25em;
  border-radius: 3px;
}