/* filaluma Platzhalter · Konzept B (Brand Book v1.0, Stand 08.10.2026)
   Farben, Schriften und Schnitte ausschließlich aus Brand Book / design.md. */

/* Schriften: selbst gehostet, aus den Variable Fonts auf die drei
   Brand-Book-Schnitte instanziert (Rubik 800, Karla 500 und 700). OFL 1.1. */
@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik/rubik-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla/karla-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla/karla-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Markenfarben Konzept B */
  --papier: #f8f7f2;    /* Grund */
  --pfirsich: #e9c8bf;  /* warme Fläche */
  --aubergine: #402833; /* Text, Logo (12,48 : 1 auf Papier, 8,59 : 1 auf Pfirsich) */
  --taupe: #614f48;     /* Nebentext (7,20 : 1 auf Papier) */
  --karmin: #aa091f;    /* Links (7,07 : 1 auf Papier, 4,87 : 1 auf Pfirsich) */

  /* Typografie laut Brand Book S. 10 */
  --font-head: "Rubik", system-ui, sans-serif;
  --font-text: "Karla", system-ui, sans-serif;
  --fs-h1: clamp(2.5rem, 7vw + 1rem, 4rem);       /* H1 64 px */
  --fs-h2: clamp(1.5rem, 2.5vw + 1rem, 2.125rem); /* H2 34 px */
  --fs-text: 1.125rem;                            /* Fließtext 18 px */
  --fs-small: 0.9375rem;                          /* Klein 15 px */
  --fs-label: 0.875rem;                           /* Label 14 px */

  /* Abstände (8er-Raster) */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 3rem;
  --s5: 6rem;
  --gutter: 1rem;
  --measure: 40rem;

  /* Wortmarke: Mindestbreite digital 120 px; Schutzraum x = 0,68 × Logohöhe */
  --logo-w: 10rem;
  --logo-h: calc(var(--logo-w) * 309.39 / 1512.22);
  --logo-x: calc(var(--logo-h) * 0.68);
}

@media (min-width: 48em) {
  :root {
    --gutter: 3rem;
    --logo-w: 13rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--aubergine);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-text);
  line-height: 1.6;
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Kopf */
.site-header .wrap {
  padding-block: var(--logo-x);
  border-bottom: 1px solid var(--aubergine);
}

/* Logo-Slot: hier sitzt die finale Wortmarke (Logo_3.svg, Aubergine) */
.logo {
  display: inline-block;
  line-height: 0;
}
.logo img {
  display: block;
  width: var(--logo-w);
  height: auto;
}

/* Inhalt */
main {
  flex: 1 0 auto;
}
main .wrap {
  padding-block: var(--s4) var(--s5);
}

.content {
  max-width: var(--measure);
}

h1,
h2 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s3);
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
  margin-top: var(--s4);
}

p,
address,
ul {
  margin: 0 0 var(--s2);
}
address {
  font-style: normal;
}
ul {
  padding-left: 1.25em;
}

.label {
  display: block;
  margin: 0 0 var(--s2);
  font-family: var(--font-text);
  line-height: 1.4;
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--karmin);
}

.lead {
  font-size: 1.25rem;
}

.meta {
  color: var(--taupe);
  font-size: var(--fs-small);
}

.contact {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--aubergine);
}
.contact .label {
  color: var(--taupe);
}

/* Links: Karmin = Aktionsfarbe */
a {
  color: var(--karmin);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}
.logo,
.logo:hover {
  text-decoration: none;
}

/* Sichtbarer Tastaturfokus (Aubergine: 12,48 : 1 auf Papier, 8,59 : 1 auf Pfirsich) */
:focus-visible {
  outline: 3px solid var(--aubergine);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fuß: Pfirsich-Fläche, Aubergine-Text, Karmin-Links */
.site-footer {
  background: var(--pfirsich);
  font-size: var(--fs-small);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s3);
}
.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a {
  font-weight: 700;
  display: inline-block;
  padding-block: 0.25rem; /* größere Trefferfläche */
}
.site-footer a[aria-current="page"] {
  text-decoration-thickness: 2px;
}
.site-footer p {
  margin: 0;
}