/* ==========================================================================
   Lia Weitz — moderieren · trainieren · beraten
   Design follows moodboard G3 "Himbeer mit Strich und Punkt".
   Single stylesheet, no build step. Mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, no third-party request. Licence: assets/fonts/OFL.txt
   -------------------------------------------------------------------------- */

/* Bricolage Grotesque is a variable font: one file covers 400–700. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/courier-prime-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/courier-prime-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/courier-prime-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/courier-prime-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — from the G3 board's own swatch row */
  --lila: #7b1fe0;          /* Elektro-Lila · Leitfarbe */
  --lila-dark: #5a12a8;     /* link hover */
  --himbeer: #f0145a;       /* Knall-Akzent */
  --zitrone: #eef25c;       /* Neon-Akzent, Marker */
  --taubenblau: #7d8cc4;    /* gedeckt */
  --flieder: #cdbdeb;       /* gedeckt */
  --mitternacht: #1c1240;   /* Text, Tiefe */
  --papier: #fbf8f1;        /* Grund */
  --weiss: #fff;
  --muted: #5a5478;

  --font-display: 'Courier Prime', ui-monospace, 'Cascadia Mono', 'Courier New', monospace;
  --font-body: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type — the second value tops out around the 1280px mockup width */
  --fs-h1: clamp(2.125rem, 1.1rem + 5.1vw, 3.875rem);   /* → 62px */
  --fs-h2: clamp(1.75rem, 1.18rem + 2.9vw, 2.875rem);   /* → 46px */
  --fs-h3: clamp(1.5rem, 1.18rem + 1.6vw, 2.375rem);    /* → 38px */
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.94rem + 0.33vw, 1.125rem);
  --fs-pill: clamp(1rem, 0.94rem + 0.33vw, 1.25rem);
  --fs-small: clamp(0.875rem, 0.84rem + 0.17vw, 0.9375rem);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(3.5rem, 7vw, 4.5rem);
  --measure: 34rem;

  --radius-card: 10px;
  --ring: 3px solid var(--himbeer);
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--mitternacht);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: hidden; /* belt-and-braces: decorative circles must never widen the page */
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: break-word; /* Courier is wide; long German compounds must not overflow */
}

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

a { color: var(--lila); }
a:hover { color: var(--lila-dark); }

:focus-visible {
  outline: var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mitternacht);
  color: var(--weiss);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--weiss); }

/* Anchor targets must clear the sticky header, which is taller on mobile */
[id] { scroll-margin-top: 7.5rem; }
@media (min-width: 900px) { [id] { scroll-margin-top: 8.5rem; } }

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

/* --------------------------------------------------------------------------
   4. Shared components
   -------------------------------------------------------------------------- */

/* Pill label — the outlined badge used throughout G3 */
.pill {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-pill);
  line-height: 1.3;
  color: var(--mitternacht);
  border: 2.5px solid var(--himbeer);
  border-radius: 999px;
  padding: 0.25em 0.8em;
}
.pill--lila { border-color: var(--lila); }
.pill--zitrone { border-color: var(--zitrone); }
.pill--mitternacht { border-color: var(--mitternacht); }

.btn {
  display: inline-block;
  background: var(--lila);
  color: var(--weiss);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 0.94rem + 0.33vw, 1.125rem);
  line-height: 1.2;
  padding: 1.125rem 1.875rem;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--lila-dark); color: var(--weiss); }

.btn--sm { padding: 0.625rem 1.25rem; font-size: 1.0625rem; }

/* The little play triangle that marks a link or a step forward */
.tri { flex: none; width: 16px; height: 18px; fill: var(--himbeer); }

.dot {
  flex: none;
  border-radius: 50%;
  background: var(--himbeer);
  width: 18px;
  height: 18px;
}

.marker {
  background: var(--zitrone);
  color: var(--mitternacht);
  padding: 0 0.16em;
  border-radius: 6px;
  /* keep the highlight from being clipped where lines are tight */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Blinking typewriter cursor after the headline */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.9em;
  background: var(--lila);
  margin-left: 0.12em;
  vertical-align: -0.08em;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}
.section-head h2 { color: var(--lila); font-size: var(--fs-h2); min-width: 0; }
.section-head .dot { width: 16px; height: 16px; background: var(--zitrone); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papier);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck { border-bottom-color: rgb(28 18 64 / 0.1); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.brand-mark { width: 48px; height: 48px; flex: none; }
.brand-mark .stroke { fill: none; stroke: var(--lila); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .spark { fill: var(--taubenblau); }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  line-height: 1.1;
  color: var(--lila);
}
.brand-tag {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
/* On a narrow screen the tagline wraps to a second line and makes the sticky
   header tall enough to eat a third of the viewport. The mark and the name
   carry the brand on their own at this size. */
@media (max-width: 519px) {
  .brand-tag { display: none; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 700 1rem/1 var(--font-display);
  color: var(--lila);
  background: transparent;
  border: 2.5px solid var(--lila);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.nav-toggle .bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-toggle[aria-expanded='true'] .bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .bars::after { top: 0; transform: rotate(-45deg); }

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
}
.nav a {
  text-decoration: none;
  color: var(--lila);
  padding: 0.625rem 0.75rem;
  border-radius: 999px;
}
.nav a[aria-current='true'] {
  box-shadow: inset 0 0 0 2px var(--lila);
}
.nav .btn { color: var(--weiss); }
.nav .btn[aria-current='true'] { box-shadow: none; }

.lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--muted);
  padding: 0.625rem 0.75rem;
}
.lang a { color: var(--lila); text-decoration: none; padding: 0; }
.lang [aria-current='true'] { color: var(--mitternacht); }
.lang .sep { color: var(--taubenblau); }

/* Below this the nav items plus the Kontakt button and the language switch no
   longer fit beside the wordmark, so the nav collapses behind the toggle.
   Kept as its own breakpoint, separate from the 900px layout ones, so the two
   can move independently. */
@media (max-width: 899px) {
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--papier);
    border-bottom: 1px solid rgb(28 18 64 / 0.1);
    padding: 0.5rem var(--gutter) 1.25rem;
    gap: 0.25rem;
  }
  .nav[hidden] { display: none; }
  .nav .btn { align-self: flex-start; margin-top: 0.5rem; }
  .lang { padding-inline: 0.75rem; }
}

@media (min-width: 900px) {
  .header-inner { padding-block: 1.5rem; }
  .brand-mark { width: 60px; height: 60px; }
  .nav-toggle { display: none; }
  .nav {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
  }
  .nav[hidden] { display: flex; } /* the hidden attribute only governs the mobile panel */
  .lang { margin-left: 0.35rem; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 2.5rem);
  padding-top: clamp(2rem, 5vw, 2.5rem);
  padding-bottom: var(--section-y);
  align-items: center;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 1.625rem);
}
.hero h1 { font-size: var(--fs-h1); color: var(--lila); }
.hero-lead { font-size: var(--fs-lead); max-width: var(--measure); }

.hero-cta {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
/* Below this the button alone fills the row, so the triangle and dot would wrap
   onto a line of their own and read as a stray mark rather than decoration. */
@media (max-width: 559px) {
  .hero-cta .tri,
  .hero-cta .dot { display: none; }
  .hero .hero-cta .btn { width: 100%; text-align: center; }
}

/* Decoration: a 560×600 composition from the board, rebuilt in percentages
   so every circle, the arc and both dots scale together. */
.hero-figure {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 560 / 600;
  margin-inline: auto;
}
/* <picture> must not form a containing block, or the portrait's percentage
   offsets would resolve against its zero-sized wrapper box instead of the stage.
   The img is then a grandchild, so it needs positioning stated in its own right. */
.hero-figure picture { display: contents; }
.hero-figure > *,
.hero-figure .hero-portrait { position: absolute; }
.hero-arc { inset: 0; width: 100%; height: 100%; }
.hero-disc {
  left: 20.71%;  top: 17.67%;  width: 71.43%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--himbeer);
}
.hero-portrait {
  left: 14.29%; top: 11.67%; width: 71.43%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
}
.hero-spark {
  left: 83.93%; top: 10%; width: 6.07%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--zitrone);
}

@media (min-width: 900px) {
  .hero .wrap {
    grid-template-columns: 6fr 5fr;
    column-gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   7. Angebote — the one big colour block
   -------------------------------------------------------------------------- */

.angebote {
  background: var(--lila);
  color: var(--weiss);
  padding-block: clamp(3rem, 7vw, 4.375rem) clamp(3.5rem, 8vw, 5rem);
}
.angebote .wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
}
.angebote-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.angebote h2 { font-size: var(--fs-h2); max-width: 20ch; }
.angebote-intro {
  font-size: var(--fs-lead);
  font-weight: 500;
  max-width: 24rem;
}

.cards {
  display: grid;
  gap: 1.75rem;
}
.card {
  background: var(--weiss);
  color: var(--mitternacht);
  padding: clamp(1.5rem, 3vw, 1.875rem);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.card--zitrone { background: var(--zitrone); }
.card--flieder { background: var(--flieder); }
.card p { font-size: var(--fs-body); }

.card-more {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--mitternacht);
  text-decoration: none;
}
.card-more span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.card-more:hover { color: var(--lila-dark); }

@media (min-width: 820px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The hand-pinned tilt from the board — only once the cards sit side by side.
     In a single narrow column tilted cards read as broken, not playful. */
  .card:nth-child(1) { transform: rotate(-1.2deg); }
  .card:nth-child(2) { transform: rotate(1deg); }
  .card:nth-child(3) { transform: rotate(-0.6deg); }
}
@media (min-width: 1000px) {
  .angebote-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   8. Praxis — circular photos, the "offener Kreis" leitmotiv
   -------------------------------------------------------------------------- */

.praxis { padding-block: var(--section-y); }
.praxis .wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.25rem);
}
.praxis-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
  justify-items: center;
}
.praxis-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
  width: 100%;
  max-width: 324px;
}
/* 324×324 stage holding a 300×300 disc and a 300×300 photo, offset 24px */
.praxis-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.praxis-figure img,
.praxis-figure .disc {
  position: absolute;
  width: 92.6%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.praxis-figure .disc { left: 7.4%; top: 7.4%; }
.praxis-figure img { left: 0; top: 0; object-fit: cover; }

.praxis-item:nth-child(1) .disc { background: var(--flieder); }
.praxis-item:nth-child(2) .disc { background: var(--taubenblau); left: 0; }
.praxis-item:nth-child(2) img { left: 7.4%; }
.praxis-item:nth-child(3) .disc { background: var(--himbeer); }

.praxis-item:nth-child(1) img { object-position: 50% 30%; }
.praxis-item:nth-child(2) img { object-position: 60% 40%; }
.praxis-item:nth-child(3) img { object-position: 62% 35%; }

.praxis-item figcaption { align-self: flex-start; }

@media (min-width: 820px) {
  .praxis-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   9. Referenzen
   -------------------------------------------------------------------------- */

.referenzen { padding-block: var(--section-y); }
.referenzen .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
.referenzen-body { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.referenzen-body > p:first-of-type { max-width: var(--measure); }
.kunden {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem);
  color: var(--mitternacht);
}
.kunden li { display: flex; align-items: center; gap: 1.25rem; }
.kunden li::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--taubenblau);
}
.kunden li:last-child::after { display: none; }

.quote {
  margin: 0;
  background: var(--zitrone);
  color: var(--mitternacht);
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-card);
  transform: rotate(2deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.25;
  max-width: 22rem;
  justify-self: center;
}

@media (min-width: 900px) {
  .referenzen .wrap { grid-template-columns: 7fr 4fr; }
}

/* --------------------------------------------------------------------------
   10. Über mich
   -------------------------------------------------------------------------- */

.ueber {
  padding-block: var(--section-y);
  background: var(--weiss);
  border-block: 1px solid rgb(28 18 64 / 0.07);
}
.ueber .wrap {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}
.ueber-text { display: flex; flex-direction: column; gap: 1.125rem; align-items: flex-start; }
.ueber-text p { font-size: var(--fs-lead); max-width: var(--measure); }

.ueber-figure {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  justify-self: center;
}
.ueber-figure .disc,
.ueber-figure img {
  position: absolute;
  width: 92.6%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.ueber-figure .disc { left: 7.4%; top: 7.4%; background: var(--zitrone); }
.ueber-figure img { left: 0; top: 0; object-fit: cover; object-position: 50% 25%; }

@media (min-width: 900px) {
  .ueber .wrap { grid-template-columns: 7fr 4fr; }
}

/* --------------------------------------------------------------------------
   11. Kontakt
   -------------------------------------------------------------------------- */

.kontakt { padding-block: var(--section-y); }
.kontakt .wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.25rem);
  align-items: flex-start;
}
.kontakt h2 { font-size: var(--fs-h2); color: var(--lila); max-width: 18ch; }
.kontakt-lead { font-size: var(--fs-lead); max-width: var(--measure); }

.kontakt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  width: 100%;
}
.kontakt-list dt,
.kontakt-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
.kontakt-list a,
.kontakt-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3125rem);
  color: var(--lila);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.kontakt-list a:hover { color: var(--lila-dark); text-decoration: underline; text-underline-offset: 5px; }
.kontakt-value--todo { color: var(--muted); font-weight: 400; }

.kontakt-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--mitternacht);
  color: var(--weiss);
  padding-block: clamp(2.5rem, 5vw, 3rem);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  justify-content: space-between;
  align-items: center;
}
.site-footer .brand-mark .stroke { stroke: var(--weiss); }
.site-footer .brand-mark .spark { fill: var(--zitrone); }
.site-footer .brand-name { color: var(--weiss); }
.site-footer a { color: var(--weiss); }
.site-footer a:hover { color: var(--zitrone); }

.footer-contact { font-size: var(--fs-small); margin-top: 4px; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* --------------------------------------------------------------------------
   13. Simple content pages (Impressum, Datenschutz, 404)
   -------------------------------------------------------------------------- */

.page { padding-block: clamp(2.5rem, 6vw, 4rem) var(--section-y); }
.page .wrap { max-width: 56rem; }
.page h1 { font-size: var(--fs-h2); color: var(--lila); margin-bottom: 1.5rem; }
.page h2 {
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  color: var(--lila);
  margin-top: 2.5rem;
  margin-bottom: 0.625rem;
}
.page p, .page li { font-size: var(--fs-body); }
.page p + p { margin-top: 0.875rem; }
.page ul { margin: 0.625rem 0 0; padding-left: 1.25rem; }
.page li + li { margin-top: 0.35rem; }
.page address { font-style: normal; }

.notice {
  background: var(--zitrone);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  font-size: var(--fs-small);
  margin-bottom: 2rem;
}
.todo {
  background: rgb(240 20 90 / 0.1);
  border: 1px dashed var(--himbeer);
  border-radius: 4px;
  padding: 0 0.4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9em;
  color: #a8083c; /* darkened Himbeer — needed for AA on the tinted background */
}

.page--center { display: flex; align-items: center; min-height: 60vh; }
.page--center .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }

/* --------------------------------------------------------------------------
   14. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav-toggle, .hero-figure, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .angebote { background: #fff; color: #000; }
  .card { border: 1px solid #999; transform: none; }
  .quote { transform: none; }
}

/* --------------------------------------------------------------------------
   16. Lebenslauf / CV page
   -------------------------------------------------------------------------- */

.cv .wrap { max-width: 64rem; }
.cv .section-head h2 { font-size: var(--fs-h3); }

.cv-lead {
  font-size: var(--fs-lead);
  max-width: 46rem;
  margin-bottom: 1.5rem;
}

.cv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 2.5rem;
}

.cv-section { margin-top: clamp(2.5rem, 5vw, 3.25rem); }
.cv-section > .section-head { margin-bottom: 1.25rem; }

/* One experience entry: dates on the left once there is room for them. */
.cv-entry {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: 1.375rem;
  border-top: 1px solid rgb(28 18 64 / 0.12);
}
.cv-entry:first-of-type { border-top: 0; padding-top: 0.25rem; }

.cv-when {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--lila);
  padding-top: 0.15rem;
  white-space: nowrap;
}
.cv-role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem);
  line-height: 1.3;
  color: var(--lila);
  margin: 0;
}
.cv-org {
  font-weight: 500;
  color: var(--mitternacht);
  margin-top: 0.15rem;
}
.cv-body { min-width: 0; }

.cv-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-left: 3px solid var(--zitrone);
  padding-left: 0.75rem;
  margin: 1.5rem 0 0.625rem;
}

.cv-list {
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cv-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.5;
}
/* The open-circle leitmotiv, shrunk to a bullet. */
.cv-list li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--taubenblau);
}
.cv-list li em { font-style: normal; color: var(--muted); }
.cv-list li strong { color: var(--lila); }

/* Publications: hanging indent so the author line starts each entry cleanly. */
.cv-pubs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.cv-pubs li {
  font-size: var(--fs-body);
  line-height: 1.5;
  padding-left: 1.5rem;
  text-indent: -1.5rem;
}
.cv-pubs cite { font-style: italic; }

.cv-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.cv-cta {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2rem);
  background: var(--zitrone);
  border-radius: var(--radius-card);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.cv-cta p { font-size: var(--fs-lead); max-width: 30rem; }

@media (min-width: 820px) {
  .cv-entry { grid-template-columns: 13rem minmax(0, 1fr); }
}

/* Saving the page as PDF should produce a usable document. */
@media print {
  .cv-cta, .cv .section-head .dot { display: none; }
  .cv-entry { break-inside: avoid; border-top: 1px solid #ccc; }
  .cv-section { break-before: auto; }
  .cv-role { color: #000; }
  .cv-list li::before { border-color: #666; }
}

/* --------------------------------------------------------------------------
   17. Mobile corrections
   -------------------------------------------------------------------------- */

/* Simple pages (legal, CV) carry a two-or-three link nav and no hamburger.
   Without this they inherit the mobile dropdown rule meant for the home page's
   collapsible panel and float over the top of the content. They stay in flow. */
.nav.nav--inline {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  background: none;
  border-bottom: 0;
  padding: 0;
}

/* Touch targets.
   Standalone links — contact details, footer, language switch, simple-page nav —
   get a finger-sized hit area. Links sitting inline in a sentence are left alone:
   WCAG 2.5.8 exempts them, and padding them would break the line box. */
.kontakt-list a,
.footer-links a,
.nav--inline a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lang a,
.lang [aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 2.5rem;
}

/* A pill must never be wider than the row it sits in; at 320px the longest
   credential ("Systemische Beraterin & Organisationsentwicklerin") otherwise
   pushes past the edge instead of wrapping inside its own outline. */
.cv-tags .pill,
.cv-meta .pill { max-width: 100%; }

/* The footer email sits directly under the wordmark, so growing its box would
   open a gap in a layout the moodboard sets tightly. Extend the hit area with
   a pseudo-element instead: full finger target, zero effect on layout. */
.footer-contact a { position: relative; }
.footer-contact a::after {
  content: '';
  position: absolute;
  /* vertical only: a negative horizontal inset would add scrollable overflow
     to the footer brand, and the link is already far wider than 24px. */
  inset: -0.85rem 0;
}
/* Short labels ("CV", "EN") would otherwise be a ~19px-wide target. */
.footer-links a {
  min-width: 2.75rem;
  justify-content: center;
}

/* A wordmark should not break across two lines. Keeping it whole makes the
   brand wider than the row can hold at 320px, so the header row is allowed to
   wrap and the nav drops onto its own line rather than past the edge. */
.brand-name { white-space: nowrap; }
.header-inner { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   18. Secondary call to action
   Board D's pattern: not a second button competing with the primary one, but a
   text link weighted by a thick Himbeer underline. Used next to a .btn.
   -------------------------------------------------------------------------- */
.btn-secondary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 0.94rem + 0.33vw, 1.125rem);
  line-height: 1.2;
  color: var(--mitternacht);
  text-decoration: underline;
  text-decoration-color: var(--himbeer);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--lila);
  text-decoration-color: var(--lila);
}

/* The LinkedIn value is a URL, not a phrase — give it room to stay readable
   without forcing a mid-string break at the contact list's display size. */
.kontakt-value--url,
a.kontakt-value--url { font-size: var(--fs-small); letter-spacing: -0.01em; }

/* The contact details are the page's conversion point; give them presence. */
.kontakt-list > div {
  padding: 1rem 0 0;
  border-top: 2px solid var(--flieder);
}

/* The CV's own contact line, as the original document carries it under the name. */
.cv-kontaktzeile {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0.75rem 0 0;
  overflow-wrap: anywhere;
}
.cv-kontaktzeile a { color: var(--lila); text-decoration: none; }
.cv-kontaktzeile a:hover { text-decoration: underline; text-underline-offset: 4px; }