/*
 * FUSSWERK — Rebecca Teissl (rebecca-teissl.ch)
 * Gesamtes Styling in einer Datei (BLUEPRINT B1/B2). Gliederung:
 * 1 Tokens -> 2 Reset -> 3 Basis -> 4 Layout -> 5 Komponenten -> 6 Utilities.
 * Design = Token-Austausch in :root (BLUEPRINT B2): seit FEATURE-008 Farben und Schrift-Rollen aus
 * dem Logo (FEATURE-007); Komponenten referenzieren nur Tokens. Ein spaeterer Feinschliff
 * (Fotos, Icons, Sektionsbilder) tauscht weiterhin nur Tokens und @font-face-Bloecke.
 */

/* === 1 Tokens === */

:root {
  /* Farben aus dem Logo (FEATURE-008): Petrol #3d6464 (Bild- und Wortmarke), Grau #89908c (Subline,
     nur dekorativ — fuer Text zu hell, deshalb --color-muted dunkler), warmer Papierton als Grund.
     Kontraste (WCAG): text/bg 12.9:1, muted/bg 5.6:1, primary/bg 6.0:1, on-primary/primary 6.0:1. */
  --color-primary: #3d6464;
  --color-primary-dark: #2c4a4a;
  --color-primary-soft: #e3ebe9;
  --color-accent: #3d6464;
  --color-accent-soft: #e3ebe9;
  --color-brand-grey: #89908c;
  --color-bg: #fbf8f3;
  --color-bg-alt: #f2ede5;
  --color-surface: #fff;
  --color-text: #26302f;
  --color-muted: #5c6663;
  --color-line: #ddd8ce;
  --color-on-primary: #fff;
  --color-on-primary-line: rgb(255 255 255 / 20%);
  --color-focus: #b8741f;

  /* Schrift (FEATURE-008): Jost = geometrische Sans mit dem Futura-Charakter der Wortmarke
     (Titel, Navigation, Buttons, Kicker); Cormorant Garamond = Serif der Subline "Rebecca Teissl"
     (Zitat, Leads); Inter bleibt Lesetext. Alle lokal (site/fonts, OFL). */
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  --font-display: "Jost", "Jost Fallback", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Cormorant Fallback", georgia, "Times New Roman", times, serif;
  --tracking-display: 0.02em;
  --tracking-ui: 0.06em;
  --tracking-table: 0.08em;
  --tracking-caps: 0.22em;
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-sm: 0.875rem;
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --font-size-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --font-size-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
  --font-size-h3: clamp(1.2rem, 1.08rem + 0.55vw, 1.45rem);
  --font-size-quote: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --line-height: 1.6;
  --line-height-tight: 1.2;
  --line-height-serif: 1.35;

  /* Abstaende */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Layout */
  --container: 68rem;
  --measure: 42rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --shadow: 0 1px 2px rgb(0 36 46 / 8%), 0 8px 24px rgb(0 36 46 / 6%);
  --header-height: 4.25rem;

  /* Breakpoints (dokumentiert; Media Queries koennen keine Custom Properties lesen):
     --bp-sm: 36em (576px), --bp-md: 48em (768px), --bp-lg: 64em (1024px) */
}

/* === 2 Reset === */

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

html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

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

ul,
ol {
  padding: 0;
}

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

button {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* === 3 Basis === */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* Metrik-angepasster Fallback (Arial) gegen Layout-Shift beim Font-Swap */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* Jost (OFL) — Titel, Navigation, Buttons, Kicker (FEATURE-008) */
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jost-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Jost Fallback";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 30%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* Cormorant Garamond (OFL) — Zitat, Leads (FEATURE-008) */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia");
  ascent-override: 92%;
  descent-override: 28%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: 500;
}

p,
li,
dd,
blockquote,
figcaption,
td,
th {
  max-width: var(--measure);
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-primary);
}

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

strong {
  font-weight: 600;
}

/* === 4 Layout === */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--space-7);
  scroll-margin-top: var(--header-height);
}

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

.section--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.section--primary h2,
.section--primary h3,
.section--primary a {
  color: inherit;
}

.section__header {
  margin-bottom: var(--space-5);
}

.section__lead {
  font-family: var(--font-serif);
  font-size: var(--font-size-quote);
  font-weight: 500;
  line-height: var(--line-height-serif);
  color: var(--color-muted);
}

.section--primary .section__lead {
  color: inherit;
  opacity: 0.9;
}

.flow > * + * {
  margin-top: var(--space-4);
}

.flow > h3 {
  margin-top: var(--space-5);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

@media (width >= 48em) {
  .container {
    padding-inline: var(--space-6);
  }

  .section {
    padding-block: var(--space-8);
  }

  .grid--2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Karten auf gleiche Hoehe ziehen (Team): ohne Streckung richtet sich jede Karte nach ihrem
     eigenen Inhalt und die kuerzere endet frueher. */
  .grid--stretch {
    align-items: stretch;
  }

  .grid--aside {
    grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
    align-items: start;
  }
}

/* === 5 Komponenten === */

/* Skip-Link */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--color-on-primary);
}

/* Header + Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo {
  width: auto;
  height: 2.75rem;
}

.nav {
  display: flex;
  align-items: center;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  cursor: pointer;
}

.nav__toggle[hidden] {
  display: none;
}

.nav__toggle-icon {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentcolor;
  box-shadow: 0 -6px 0 currentcolor, 0 6px 0 currentcolor;
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  list-style: none;
}

.nav__link {
  display: inline-block;
  padding: var(--space-2) 0;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  text-decoration: none;
}

.nav__link:hover {
  text-decoration: underline;
}

/* Mobile-Zustand nur mit JS (Klasse nav--enhanced wird von site.js gesetzt).
   Ist Scripting aktiv, wird die Liste schon vor dem Modul-Start verborgen, damit der
   Wechsel Liste -> Toggle keinen Layout-Shift erzeugt (Header behaelt seine Hoehe).
   Ohne JS (oder in Browsern ohne Media-Feature) bleibt die Liste sichtbar. */
@media (width < 48em) {
  @media (scripting: enabled) {
    .nav__list {
      display: none;
    }
  }

  .nav--enhanced .nav__list {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    gap: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow);
  }

  .nav--enhanced.nav--open .nav__list {
    display: flex;
  }

  .nav--enhanced .nav__link {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-line);
  }
}

@media (width >= 48em) {
  .nav__toggle {
    display: none;
  }

  .nav__list {
    display: flex;
  }
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  text-decoration: none;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
}

.button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
}

.button--secondary {
  background: transparent;
  color: var(--color-primary);
}

.button--secondary:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Hero */
.hero {
  padding-block: var(--space-7) var(--space-8);
  background:
    radial-gradient(60rem 32rem at 100% -10%, var(--color-primary-soft), transparent 62%),
    var(--color-bg);
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
}

/* Kicker im Duktus der Wortmarke: Jost, weit gesperrt, Versalien */
.hero__kicker {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero__title {
  margin-bottom: var(--space-4);
}

.hero__logo {
  width: min(100%, 22rem);
  margin-inline: auto;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.quote {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-serif);
  font-size: var(--font-size-quote);
  font-style: italic;
  font-weight: 500;
  line-height: var(--line-height-serif);
  color: var(--color-primary);
}

@media (width >= 48em) {
  .hero__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
  }

  .hero__logo {
    margin-inline: 0 auto;
  }
}

/* Team-Karten / Naturbild (FEATURE-009) */

/* Naturbild als Stimmungselement (FEATURE-011): kein Schatten, abgerundete Ecken wie bei den
   uebrigen Flaechen. Das Bild laeuft zur Textseite hin weich aus, damit es nicht wie ein
   eingeklebtes Foto wirkt. Bewusst eine Maske statt eines Farbverlaufs darueber: der Untergrund
   ist je Abschnitt ein anderes Token, ein fester Verlauf waere dort sichtbar falsch. Die Maske
   nutzt `currentcolor` als deckenden Anker -- fuer eine Maske zaehlt nur der Alphakanal, und
   Farb-Literale sind ausserhalb von :root nicht erlaubt. Ohne Maskenunterstuetzung bleibt das
   Bild schlicht sichtbar (kein Auslauf, nie unsichtbar). */
.mood {
  margin: 0;
}

/* Nur die Ecken runden, die NICHT im Auslauf liegen. Schmal laeuft das Bild oben aus, also
   bleiben die beiden oberen Ecken eckig; breit laeuft es links aus (siehe unten). Reihenfolge
   der Kurzschreibweise: oben links, oben rechts, unten rechts, unten links. */
.mood__img {
  display: block;
  width: 100%;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@supports (mask-image: linear-gradient(currentcolor, transparent)) {
  .mood__img {
    mask-image: linear-gradient(to bottom, transparent 0, currentcolor 12%, currentcolor 100%);
  }
}

@media (width < 48em) {
  .mood__img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

@media (width >= 48em) {
  /* Das Bild fuellt die Abschnittshoehe: die Aside-Spalte wird gestreckt, das Bild liegt
     absolut darin und traegt deshalb selbst nichts zur Zeilenhoehe bei. Ergebnis: oben buendig
     mit dem Textanfang, unten buendig mit dem Abschnittsende, rechts buendig mit dem
     Inhaltsrand (gleiche Kante wie der letzte Navigationspunkt). */
  .section--bleed .grid--aside {
    align-items: stretch;
  }

  .mood {
    position: relative;
  }

  .mood picture {
    display: block;
    height: 100%;
  }

  .mood__img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /* Auslauf links -> linke Ecken eckig, rechte Ecken gerundet. */
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  @supports (mask-image: linear-gradient(currentcolor, transparent)) {
    .mood__img {
      mask-image: linear-gradient(to right, transparent 0, currentcolor 22%, currentcolor 100%);
    }
  }
}

/* Vollbreiten-Band (FEATURE-011): eigenes Element ausserhalb von .container, deshalb ohne
   100vw-Trick und ohne Ausbruch-Rechnung. Die Hoehe waechst mit dem Fenster, bleibt aber
   gedeckelt, damit das Band ein Ruhepunkt bleibt und nicht den halben Bildschirm fuellt. */
.band {
  margin: 0;
}

.band__img {
  display: block;
  width: 100%;

  /* Ausschnitt 30 % weiter nach unten gezogen: die Hoehe waechst um 30 %, und der Anker
     verschiebt sich so, dass die Oberkante stehen bleibt und der Zuwachs unten entsteht. */
  height: clamp(11.7rem, 34vh, 23.4rem);
  object-fit: cover;
  object-position: center 60%;
}

/* Karten (Team, Kontakt) */
.card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.card__title {
  margin-bottom: var(--space-2);
}

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

/* Team-Karte mit Profilbild (2.2.2): Anzeigebreite 12rem entspricht sizes="12rem" im Markup.
   Die Karte ist eine Spalte, damit die Ausbildung ans Kartenende ruecken kann (siehe
   .card__facts): bei gleich hohen Karten und gleich hohen Ausbildungsbloecken stehen die
   beiden Begriffe "Ausbildung" dadurch auf derselben Hoehe. */
.card--person {
  display: flex;
  flex-direction: column;
}

.card--person .card__media {
  width: 12rem;
  margin-bottom: var(--space-4);
}

.card__img {
  width: 12rem;
  height: 12rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Ausbildung als Definitionsliste (Begriff/Wert); der Reset setzt dd bereits auf margin: 0. */
.card__facts {
  /* In der Spaltenkarte schiebt der automatische Abstand den Block ans Ende; sonst wirkt er
     wie ein normaler Abstand nach oben. */
  margin-top: auto;
  padding-top: var(--space-4);
}

.card__facts dt {
  font-weight: 600;
}

.card__facts dd {
  margin: 0;
}

/* Platzhalter (FEATURE-002 2.2.2, D4): Inhalt liefert Rebecca oder der Betreiber.
   Markup: class="placeholder" + data-placeholder="<schluessel>", sichtbar "folgt/folgen".
   Dezent, aber sichtbar; Kontrast Text/Hintergrund >= 4.5:1 (--color-text auf --color-accent-soft). */
.placeholder {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.placeholder--block {
  display: block;
}

/* Entwurfs-Hinweis der Rechtsseiten (FEATURE-002 2.2.3, D5): bleibt bis zur Abzeichnung. */
.draft-notice {
  display: block;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  color: var(--color-primary);
}

/* Listen */
.steps {
  counter-reset: step;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.steps__item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}

.steps__item::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.list {
  padding-left: 1.25rem;
}

.list > li + li {
  margin-top: var(--space-2);
}

/* Tarif-Tabelle */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;

  /* Getrennte Rahmen (statt der globalen Zusammenfassung): nur so folgt der Aussenrahmen der
     Eckenrundung. Bei zusammengefassten Rahmen wird die obere Linie gerade durchgezogen und
     steht an den Ecken ueber. Abstand 0, damit die Zellen wie zuvor buendig sitzen. */
  border-collapse: separate;
  border-spacing: 0;
}

.table caption {
  caption-side: top;

  /* Seitliches Padding wie th/td (>= --radius-lg): die Tabelle clippt mit overflow: hidden
     an der Eckenrundung, sonst wird das erste Zeichen abgeschnitten (BUG-001). */
  padding: 0 var(--space-4) var(--space-3);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.table thead th {
  background: var(--color-primary-soft);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-table);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

.table tbody th {
  font-weight: 400;
}

/* Der Hintergrund der Kopfzellen folgt dem Zuschnitt der Tabelle nicht, deshalb werden die
   beiden oberen Ecken zusaetzlich an den Zellen selbst gerundet. Zusammen mit den getrennten
   Rahmen der Tabelle rundet damit sowohl die Linie als auch die Flaeche. */
.table thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.table thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table__price {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Tarife (FEATURE-003 C6, D10): Betrag als inline-block mit Mindestbreite — "CHF" steht
   untereinander, die Dezimalstellen sind ueber tabular-nums ausgerichtet. */
.table__amount {
  display: inline-block;
  min-width: 4.5em;
  text-align: right;
}

.price-note {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* Praxis / Karte (FEATURE-003 C8): statisches Iframe, Seitenverhaeltnis 960/600 gegen Layout-Shift */
.map {
  margin: 0;
}

.map__frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 600;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.address {
  font-style: normal;
}

/* Kontakt */
.contact-list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.contact-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

/* Label-Spalte in em (folgt der fluiden Schriftgroesse), damit "Telefon / WhatsApp" auf keiner
   Breite umbricht (FEATURE-003 C9). Die Spalte ist breiter als der laengste Begriff, damit
   zwischen Begriff und Wert Luft bleibt; beide Werte beginnen dadurch auf gleicher Hoehe. */
.contact-list__label {
  flex: 0 0 13em;
  font-weight: 600;
}

/* Kontakt-Schaltflaechen (FEATURE-003 C10, seit FEATURE-009 zwei: Anrufen / WhatsApp): mobil
   gestapelt, ab 48em nebeneinander in einer Zeile — schmalere Innenabstaende als beim Hero-Button. */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.button-group .button {
  padding-inline: var(--space-3);
}

@media (width < 48em) {
  .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .button-group .button {
    text-align: center;
  }
}

/* Footer */
.site-footer {
  padding-block: var(--space-7);
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
}

.site-footer a {
  color: inherit;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
}

.site-footer__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.85;
}

.site-footer__list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.site-footer__bottom {
  /* Absaetze sind global auf die Lesebreite --measure begrenzt. Hier traegt der Absatz die
     Trennlinie, die ueber die volle Inhaltsbreite laufen soll (gleiche Kante wie Navigation,
     Kontakt-Box und Naturbild) -- deshalb die Begrenzung aufheben. Der Text selbst ist eine
     kurze Zeile, die Lesbarkeit leidet nicht. */
  max-width: none;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-on-primary-line);
  font-size: var(--font-size-sm);
  opacity: 0.85;
}

@media (width >= 48em) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Rechtsseiten / einfache Seiten */
.page {
  padding-block: var(--space-7);
}

.page__section > * + * {
  margin-top: var(--space-4);
}

.page__section > h2 + * {
  margin-top: var(--space-3);
}

.page__header {
  margin-bottom: var(--space-6);
}

.page__section + .page__section {
  margin-top: var(--space-6);
}

.page__back {
  display: inline-block;
  margin-top: var(--space-6);
}

/* === 6 Utilities === */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.mt-4 {
  margin-top: var(--space-4);
}

.mt-6 {
  margin-top: var(--space-6);
}