/* ==========================================================================
   tanja-kuhnert.de – Stylesheet
   Layout: skdesign köln · Umsetzung: eukalyptusdesign
   Reines CSS3, keine Abhängigkeiten. Farb- und Größenwerte stammen aus dem
   Layout-PDF vom 24.08.2026 (Artboard 1400 px) und der Farbtafel „Farben Web“.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (self-hosted, Roboto Variable Font, Apache-2.0-Lizenz)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/roboto-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: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/roboto-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Markenfarben (Farbtafel) */
  --petrol: #005d6b;          /* Petrol gedeckt – Überschriften, Fließtext, Footer */
  --petrol-fresh: #009992;    /* Petrol frisch – Akzente, Icons, FAQ-Titel, Menü */
  --petrol-fresh-50: #80ccc9;
  --green: #b4bf4c;           /* Hellgrün 100 % – Social-Icons */
  --green-55: #d6dc9d;
  --green-20: #ecefd2;
  --yellow: #ffce47;          /* Sonnengelb 100 % */
  --yellow-40: #ffebb6;
  --yellow-25: #fff3d9;
  --taupe: #72665c;           /* Claim-Balken, Hero-Headline */

  /* Flächenfarben, wie im Layout gerendert (gemessen) */
  --bg-yellow: #fdf0ca;       /* gelbe Sektionen */
  --bg-yellow-bubble: #fdf7e1;
  --bg-green: #e5eccc;        /* grüne Sektionen (Arbeitsweise, Zur-Person-Band) */
  --bg-green-light: #eaefd5;  /* helle grüne Bänder (Hinweis, Wissen weitergeben) */
  --bg-green-bubble: #f4f7e8;
  --bubble-yellow: #fde7af;   /* Bubbles hinter Buttons */
  --bubble-green: #d1dca9;
  --bubble-green-light: #e5eccc;
  --footer-text-soft: #ccd89b;
  --hero-bg: #e6e3e0;         /* Grauton des Portrait-Hintergrunds (mobile Textbox) */
  --line: #9ed3cf;            /* Trennlinien der Aufklapp-Elemente */
  --text: #000;
  --white: #fff;

  /* Fluide Typografie: 18 px mobil → 24 px ab ca. 1400 px */
  --fs-body: clamp(1.125rem, 1.02rem + 0.5vw, 1.5rem);
  --fs-small: clamp(1rem, 0.92rem + 0.4vw, 1.375rem);
  --fs-tags: clamp(0.95rem, 0.72rem + 0.85vw, 1.35rem);
  --fs-intro: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-faq: clamp(1.125rem, 1rem + 0.6vw, 1.75rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.9vw, 1.9375rem);
  --fs-h2: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  --fs-h1: clamp(1.8rem, 1.15rem + 1.6vw, 2.5625rem);
  --fs-menu: 1.8rem;             /* Overlay-Menü, gemessen am Layout „Header und Menü – mobile“ */
  --fs-footer: clamp(1.125rem, 1rem + 0.75vw, 1.625rem);
  --fs-footer-nav: clamp(1rem, 0.93rem + 0.4vw, 1.25rem);
  --fs-claim: clamp(1.25rem, 1rem + 1.3vw, 2.25rem);

  /* Spaltenbreiten (aus dem 1400-px-Layout abgeleitet) */
  --w-text: 46.5rem;
  --w-faq: 57rem;
  --w-logos: 67rem;
  --w-footer: 69rem;
  --w-header: 70rem;
  --gutter: clamp(1rem, 4vw, 3rem);

  --radius-pill: 999px;
  --shadow-focus: 0 0 0 3px var(--white), 0 0 0 6px var(--petrol-fresh);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  background: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 400; line-height: 1.25; margin: 0 0 0.6em; color: var(--petrol); }
h1 { font-size: var(--fs-h2); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: 0.35em; }
a { color: var(--petrol-fresh); text-underline-offset: 0.15em; }
a:hover { color: var(--petrol); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }
img, svg { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: 700; }

/* Skip-Link für Tastatur-/Screenreader-Nutzung */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  padding: 0.6em 1em; background: var(--petrol); color: var(--white);
  border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout-Helfer
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--w-text)); margin-inline: auto; }
.container--faq { width: min(100% - 2 * var(--gutter), var(--w-faq)); margin-inline: auto; }
.container--logos { width: min(100% - 2 * var(--gutter), var(--w-logos)); margin-inline: auto; }
.container--footer { width: min(100% - 2 * var(--gutter), var(--w-footer)); margin-inline: auto; }
.container--header { width: min(100% - 2 * var(--gutter), var(--w-header)); margin-inline: auto; }

.section { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
.section--yellow { background: var(--bg-yellow); overflow: hidden; }
.section--green { background: var(--bg-green); overflow: hidden; }
.section--green-light { background: var(--bg-green-light); overflow: hidden; }

/* Typografische Varianten */
.intro { font-size: var(--fs-intro); font-weight: 300; color: var(--petrol); line-height: 1.4; }
.text-petrol { color: var(--petrol); }
.text-fresh { color: var(--petrol-fresh); }
.text-taupe { color: var(--taupe); }
.text-center { text-align: center; }
.lead-in { font-size: var(--fs-h3); color: var(--petrol); margin: 0 0 1.2em; }

/* --------------------------------------------------------------------------
   5. Bubbles (Formen aus der Bildmarke) – als CSS-Hintergründe
   -------------------------------------------------------------------------- */
.bubble {
  position: absolute; pointer-events: none; z-index: -1;
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
/* bubbel-gelb-kl.svg (215 × 134.3) */
.bubble--yellow {
  aspect-ratio: 215 / 134.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 215 134.3'%3E%3Cpath fill='%23fde7af' d='M112.9 21c22.5 27.9 39.8-9 77.1 16.9 37.3 25.8 30.9 94-7.7 96.4-38.4 2.4-53.6-48.8-121.2-14.4C12.4 144.7-22 75.6 16.6 23.1c22.7-30.9 73.8-30 96.3-2.1'/%3E%3C/svg%3E");
}
/* bubbel-gruen-kl.svg (164.4 × 118.6) */
.bubble--green {
  aspect-ratio: 164.4 / 118.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 164.4 118.6'%3E%3Cpath fill='%23e5eccc' d='M62.7 110.7C16.1 88.4-21.7 41.8 14.3 13c24-19.2 38.1 19.6 84.5-6.3 36.1-20.1 71.4 7.4 64.7 53-6.7 45.6-54.2 73.4-100.8 51.1'/%3E%3C/svg%3E");
}
.bubble--green-dark {
  aspect-ratio: 164.4 / 118.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 164.4 118.6'%3E%3Cpath fill='%23d1dca9' d='M62.7 110.7C16.1 88.4-21.7 41.8 14.3 13c24-19.2 38.1 19.6 84.5-6.3 36.1-20.1 71.4 7.4 64.7 53-6.7 45.6-54.2 73.4-100.8 51.1'/%3E%3C/svg%3E");
}
/* bubbel-weiß-gross.svg (793 × 533.3), 30 % Deckkraft wie im Original */
.bubble--white-lg {
  aspect-ratio: 793 / 533.3; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 793 533.3'%3E%3Cpath fill='%23fff' d='M156.6 217.6C338.5 188.1 341.9-11.9 525 .6c313.1 21.3 370.2 521.4 73.4 447.4-244.5-61-350.9 188.3-538.6 34.2C-50.8 391.4-2 243.3 156.6 217.6'/%3E%3C/svg%3E");
}
/* bubbel-weiß-klein.svg (425.8 × 270.3) */
.bubble--white-sm {
  aspect-ratio: 425.8 / 270.3; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 425.8 270.3'%3E%3Cpath fill='%23fff' d='M223.7 42.3c44.6 56.1 78.8-18 152.8 33.9 74 52 61.3 189-15.3 193.9-76 4.8-106.3-98.1-240.1-29C24.5 291-43.5 152 33 46.4c45-62.2 146.1-60.3 190.7-4.2'/%3E%3C/svg%3E");
}
/* Große, helle Fläche in gelben/grünen Sektionen (linke Hälfte) */
.bubble--section-yellow { aspect-ratio: 793 / 533.3; opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 793 533.3'%3E%3Cpath fill='%23fdf7e1' d='M156.6 217.6C338.5 188.1 341.9-11.9 525 .6c313.1 21.3 370.2 521.4 73.4 447.4-244.5-61-350.9 188.3-538.6 34.2C-50.8 391.4-2 243.3 156.6 217.6'/%3E%3C/svg%3E"); }
.bubble--section-green { aspect-ratio: 793 / 533.3; opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 793 533.3'%3E%3Cpath fill='%23f4f7e8' d='M156.6 217.6C338.5 188.1 341.9-11.9 525 .6c313.1 21.3 370.2 521.4 73.4 447.4-244.5-61-350.9 188.3-538.6 34.2C-50.8 391.4-2 243.3 156.6 217.6'/%3E%3C/svg%3E"); }
.bubble--section-white { aspect-ratio: 793 / 533.3; opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 793 533.3'%3E%3Cpath fill='%23fff' d='M156.6 217.6C338.5 188.1 341.9-11.9 525 .6c313.1 21.3 370.2 521.4 73.4 447.4-244.5-61-350.9 188.3-538.6 34.2C-50.8 391.4-2 243.3 156.6 217.6'/%3E%3C/svg%3E"); }

/* Standard-Positionen der großen Sektions-Bubbles */
.bubble--pos-left { width: min(60%, 820px); left: -4%; top: 50%; transform: translateY(-50%); }
.bubble--pos-right { width: min(34%, 420px); right: -6%; top: -8%; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block; position: relative;
  padding: 0.5em 1.5em;
  font-family: inherit; font-size: var(--fs-small); font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center; white-space: nowrap;
  border-radius: var(--radius-pill); border: 2px solid var(--petrol-fresh);
  background: var(--white); color: var(--petrol);
  cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--petrol-fresh); color: var(--white); }
.btn--solid { background: var(--petrol); border-color: var(--petrol); color: var(--white); }
.btn--solid:hover { background: var(--petrol-fresh); border-color: var(--petrol-fresh); color: var(--white); }

/* Button mit Bubble dahinter (Maße aus dem Layout: Bubble ≈ 1,4 × Buttonbreite, 2,5 × Buttonhöhe) */
.btn-bubble { position: relative; display: inline-block; font-size: var(--fs-small); }
.btn-bubble .bubble { z-index: -1; }
.btn-bubble--yellow .bubble { width: 8.6em; right: -0.9em; top: 50%; transform: translateY(-55%); }
.btn-bubble--green .bubble { width: 7.5em; left: -2.4em; top: 50%; transform: translateY(-50%); }
.btn-bubble--green-right .bubble { width: 7.4em; right: -1.95em; top: 50%; transform: translateY(-50%); }
.btn-bubble--yellow-teaser .bubble { width: 9.8em; left: -2.3em; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(0, 93, 107, 0.08);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: clamp(5.4rem, 9.6vw, 8.4rem);
  padding-block: 0.75rem;
}
.logo { display: block; flex: 0 1 auto; color: inherit; text-decoration: none; }
.logo svg { width: 100%; height: auto; }
.logo--full { width: clamp(10.5rem, 25vw, 22rem); }

.site-header__actions { display: flex; align-items: center; gap: clamp(1.7rem, 2.6vw, 2.3rem); }

/* E-Mail-Button: Text ab Desktop, Icon mobil */
.header-mail { display: inline-flex; align-items: center; gap: 0.5em; }
.header-mail__icon { display: none; width: 2.95rem; height: auto; aspect-ratio: 340 / 298; color: var(--petrol); }
@media (max-width: 800px) {
  .header-mail { padding: 0; border: 0; background: transparent; }
  .header-mail:hover { background: transparent; }
  .header-mail__label { display: none; }
  .header-mail__icon { display: block; }
}

.menu-toggle {
  width: clamp(2.875rem, 2.3rem + 1.5vw, 3.35rem); height: clamp(2.875rem, 2.3rem + 1.5vw, 3.35rem);
  padding: 0; border: 0; border-radius: 50%;
  background: var(--petrol-fresh); color: var(--white); cursor: pointer;
  display: grid; place-items: center; transition: background-color 0.2s;
}
.menu-toggle:hover { background: var(--petrol); }
.menu-toggle svg { width: 55%; height: auto; }

/* --------------------------------------------------------------------------
   8. Overlay-Menü
   -------------------------------------------------------------------------- */
.menu {
  position: fixed; inset: 0 0 0 auto; z-index: 200;
  width: min(100%, 26rem);
  background: var(--petrol-fresh); color: var(--white);
  padding: 1.35rem 1.9rem 2.5rem 2.15rem;
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  overflow-y: auto;
}
.menu[data-open="true"] { transform: none; visibility: visible; transition: transform 0.3s ease; }
.menu__close {
  align-self: flex-end;
  width: 2.875rem; height: 2.875rem; border: 0; border-radius: 50%;
  background: var(--white); color: var(--petrol-fresh); cursor: pointer;
  display: grid; place-items: center;
}
.menu__close svg { width: 55%; }
.menu__list { list-style: none; margin: 0.9rem 0 0; padding: 0; font-size: var(--fs-menu); line-height: 1.2; }
.menu__list li { margin: 0 0 0.6em; }
.menu__list a {
  color: var(--white); text-decoration: none; font-size: inherit; font-weight: 500;
}
.menu__list a:hover, .menu__list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
.menu__mail {
  margin-top: auto; padding-top: 3rem;
  display: inline-flex; align-items: center; gap: 0.6em;
  color: var(--white); text-decoration: none; font-weight: 500; font-size: 1.5rem;
}
.menu__mail svg { width: 1.17em; height: auto; aspect-ratio: 340 / 298; }
.menu__legal { list-style: none; margin: 2.6rem 0 0; padding: 0; display: flex; gap: 2rem; font-size: 1.125rem; }
.menu__legal a { color: var(--white); text-decoration: none; }
.menu__legal a:hover { text-decoration: underline; }
.menu-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(0, 93, 107, 0.35);
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.menu-backdrop[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 0.3s; }
body[data-menu-open="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Hero (Startseite) + Claim-Balken
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); }
.hero .bubble { z-index: 0; } /* Hero-Bubbles liegen über dem Foto, unter dem Text */
.hero__img { width: 100%; height: auto; max-height: 44rem; object-fit: cover; object-position: 60% 40%; display: block; }
.hero__bubble-lg { width: 52%; left: -7%; top: 18%; }
.hero__bubble-sm { width: 28%; right: -3%; top: -6%; transform: rotate(180deg); }
.hero__text {
  position: absolute; left: 0; right: 0; top: 60%; transform: translateY(-50%); z-index: 1;
}
.hero__title {
  font-size: var(--fs-h1); font-weight: 400; color: var(--taupe); line-height: 1.4;
  margin: 0 0 0.4em; max-width: 11.5em;
}
.hero__name { font-size: var(--fs-small); color: var(--taupe); margin: 0; }
@media (max-width: 800px) {
  /* Mobil: Bild oben, Textbox darunter (Layout „Header und Menü – mobile“) */
  .hero__bubble-lg, .hero__bubble-sm { display: none; }
  .hero__img { aspect-ratio: 1000 / 654; max-height: none; object-position: center; }
  .hero__text {
    position: relative; top: auto; transform: none; isolation: isolate;
    padding: 1.5rem 1.5rem 2.5rem; background: var(--hero-bg); overflow: hidden;
  }
  .hero__text .container, .hero__text .container--header { width: 100%; margin-inline: 0; }
  .hero__text-bubble { display: block; width: 62%; right: -18%; bottom: -30%; }
  .hero__title, .hero__name { position: relative; z-index: 1; }
}
@media (min-width: 801px) { .hero__text-bubble { display: none; } }

.claim {
  background: var(--taupe); color: var(--white); text-align: center;
  font-size: var(--fs-claim); font-weight: 400; line-height: 1.3;
  padding: clamp(0.9rem, 1.6vw, 1.4rem) var(--gutter);
  margin: 0;
}
.claim span { display: inline-block; margin-inline: 0.35em; }

/* --------------------------------------------------------------------------
   10. Inhaltsbausteine
   -------------------------------------------------------------------------- */
/* Häkchen-Liste („Einzelpersonen · Paare* …“) */
.tags { list-style: none; padding: 0; margin: 0 0 1.5em; display: flex; flex-wrap: wrap; gap: 0.4em 0.84em; font-size: var(--fs-tags); }
.tags li { display: inline-flex; align-items: center; gap: 0.33em; color: var(--petrol-fresh); font-size: inherit; white-space: nowrap; }
.tags svg { width: 1.11em; height: 1.11em; flex: none; }

/* Zwei Teaser nebeneinander (Lebensthemen / Arbeitsthemen) */
.teasers { display: grid; gap: 3rem 2.5rem; text-align: center; width: min(100% - 2 * var(--gutter), 66rem); margin-inline: auto; }
@media (min-width: 801px) { .teasers { grid-template-columns: 1fr 1fr; } }
.teaser { color: var(--petrol); display: flex; flex-direction: column; align-items: center; }
.teaser h3 { margin-bottom: 0.5em; }
.teaser p { margin-bottom: 0.6em; max-width: 20em; }
.teaser .teaser__mode { color: var(--petrol-fresh); margin-bottom: 2.4em; }
.teaser .btn-bubble { margin: 0.7em 0 3.7em; }  /* unten Platz für den Überstand der Amöbe (Layoutmaß) */

/* Bild-Text-Block (Foto in organischer Form + Text) */
.media-block { display: grid; gap: 2rem; align-items: start; width: min(100% - 2 * var(--gutter), 66rem); margin-inline: auto; position: relative; z-index: 1; }
@media (min-width: 801px) { .media-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); } .media-block__img { margin-top: 1.5rem; } }
.media-block__img {
  width: min(100%, 20rem); margin-inline: auto; aspect-ratio: 1;
  overflow: hidden; border-radius: 48% 52% 45% 55% / 52% 46% 54% 48%;
}
.media-block__img img { width: 100%; height: 100%; object-fit: cover; }
.media-block__img--wide { aspect-ratio: 5 / 4; }
/* Traeger fuer Bild + Bildnachweis. Der Nachweis kann nicht in
   .media-block__img liegen: der Container hat overflow:hidden fuer die
   organische Form und wuerde ihn abschneiden. */
.media-block__media { position: relative; }

/* Bildnachweis – dezent und vertikal am linken Bildrand, wie auf cambiat-institut.de.
   writing-mode plus rotate(180deg) ergibt die Leserichtung von unten nach oben;
   ein blosses rotate(-90deg) wuerde die Textbox im Fluss falsch ausmessen. */
.credit {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.6875rem;
  line-height: 1;
  /* Eigener, etwas dunklerer Ton statt --taupe mit Transparenz: auf dem hellen
     Gruen der Abschnitte kaeme --taupe nur auf 4,4:1 und mit Transparenz auf
     3,0:1 – zu wenig fuer Text dieser Groesse. #665b52 erreicht 5,6:1 und bleibt
     durch die kleine Schrift trotzdem zurueckhaltend. */
  color: #665b52;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.media-block__media .credit {
  position: absolute;
  top: 50%;
  right: calc(50% + min(50%, 10rem) + 0.55rem);
  translate: 0 -50%;
}
/* Im Hero ist links kein Aussenraum, der Nachweis steht deshalb im Bild. */
.hero__media { position: relative; }
.hero__media .credit { position: absolute; left: 0.85rem; bottom: 0.9rem; z-index: 1; }
.media-block__body { color: var(--petrol); }
.media-block__body h2, .media-block__body h3 { margin-bottom: 0.5em; }

/* Häkchen-Aufzählung („Meine Arbeitsweise“) */
.check-list { list-style: none; padding: 0; margin: 0 0 1.5em; }
.check-list li { display: grid; grid-template-columns: 1.4em 1fr; gap: 0.5em; margin-bottom: 0.9em; align-items: start; }
.check-list svg { width: 1.1em; height: 1.1em; margin-top: 0.15em; color: var(--petrol-fresh); }

/* Button unter einem Textblock – linksbündig zum Text, mit Luft wie im Layout */
.btn-row { margin: 3.9rem 0 1.2rem; }

/* Hinweis-Band (zentrierter Text auf grün/gelb) */
.note { text-align: center; color: var(--petrol); }
.note p { margin: 0; max-width: 28em; margin-inline: auto; }
.note--taupe { color: var(--taupe); }

/* Inline-Link mit Chevron („per › E-Mail kontaktieren“) */
.link-chevron { font-weight: 700; color: var(--petrol-fresh); text-decoration: none; white-space: nowrap; }
.link-chevron:hover { color: var(--petrol); text-decoration: underline; }
.link-chevron svg { display: inline-block; width: 1em; height: 1em; margin-right: 0.25em; vertical-align: -0.2em; }
.link-chevron--medium { font-weight: 500; }

/* Platzhalter für noch fehlende Inhalte */
.placeholder { font-style: italic; color: var(--taupe); }

/* --------------------------------------------------------------------------
   11. Aufklapp-Elemente (FAQ) – nativ mit <details>/<summary>
   -------------------------------------------------------------------------- */
.faq-group { margin-block: clamp(1.5rem, 4vw, 3rem); }
.faq-group + .faq-group { margin-top: clamp(2rem, 5vw, 3.5rem); }
.faq-group__title { color: var(--petrol-fresh); font-size: var(--fs-h3); margin-bottom: 0.35em; }
.faq { border-top: 1px solid var(--line); }
.faq-group > .faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1.15em 1fr; gap: 0.65em; align-items: start;
  padding: 0.65em 0; color: var(--petrol); font-size: var(--fs-faq); line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--petrol-fresh); }
.faq__icon { width: 1em; height: 1em; margin-top: 0.14em; color: var(--petrol-fresh); transition: transform 0.25s; }
.faq[open] .faq__icon { transform: rotate(45deg); }
.faq__body { padding: 0.25em 0 1.25em calc(var(--fs-faq) * 1.8); color: var(--text); font-size: var(--fs-small); }
.faq__body > :last-child { margin-bottom: 0; }
.faq__body h4 { font-size: 1em; font-weight: 500; margin: 1em 0 0.3em; color: var(--petrol); }
/* Listen haengen aus: der Listentext steht bündig unter dem Text der Frage,
   die Aufzählungspunkte stehen davor im Einzug. Ohne den negativen Rand wäre
   der Listentext um die Einrückung der Punkte nach rechts versetzt. */
.faq__body ul { padding-left: 1.2em; margin-left: -1.2em; }
.faq__body ul ul { margin-left: 0; margin-block: 0.15em; }
/* Aufzählungspunkte auf allen Ebenen gefüllt und in Petrol frisch – die zweite
   Ebene wäre sonst ein hohler Kreis und dadurch kaum als farbig erkennbar. */
.faq__body ul { list-style-type: disc; }
.faq__body li::marker { color: var(--petrol-fresh); }
/* Hinweiszeile unter einem Listenpunkt: gehoert zum Punkt, bekommt aber keinen
   eigenen Aufzaehlungspunkt und steht buendig unter dessen Text. */
.faq__body li > .list-note { margin: 0.35em 0 0; }
/* Lange Web-Adressen (z. B. bei den Artikeln) duerfen umbrechen, statt mobil
   ueber den Rand zu laufen und abgeschnitten zu werden. */
.faq__body a { overflow-wrap: anywhere; }
/* sanftes Aufklappen in Browsern, die es unterstützen */
@supports (interpolate-size: allow-keywords) {
  .faq::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; }
  .faq[open]::details-content { block-size: auto; }
}

/* --------------------------------------------------------------------------
   12. Logos (Zertifiziert durch / Mitglied bei)
   -------------------------------------------------------------------------- */
.logos { text-align: center; }
.logos__title { color: var(--petrol); margin-bottom: 0.6em; }
.logos__row + .logos__title { padding-top: 30px; }
/* Die Breite richtet sich nach dem Logo, nicht nach einer festen Rasterzelle:
   nur so ist der sichtbare Abstand zwischen zwei Logos ueberall gleich dem gap.
   Bei gleich breiten Zellen klafft neben schmalen Logos sonst deutlich mehr Luft
   (gemessen: 50 px in der Reihe "Zertifiziert durch" gegen 161 und 191 px bei
   "Mitglied bei"). */
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3.2rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.logos__row li { flex: 0 0 auto; max-width: 100%; display: grid; place-items: center; }
.logos__link { display: block; width: 100%; border-radius: 6px; }
.logos__link img { transition: opacity 0.2s; }
.logos__link:hover img { opacity: 0.7; }
.logos__row picture { display: block; width: 100%; }
.logos__row img { width: 100%; height: auto; }
/* Breiten so gewaehlt, dass alle Logos optisch gleich gross wirken: nicht gleich
   breit, sondern gleich gross in der Wirkung. Runde und kompakte Zeichen (DGSF,
   EFTA) brauchen dafuer mehr Hoehe als breite Wortmarken. Alle Dateien sind
   randlos beschnitten, damit die angegebene Breite auch die sichtbare ist. */
.logo-sg { width: 20rem; }
.logo-degpt { width: 20rem; }
.logo-trauma { width: 19.8rem; }
.logo-dgsf { width: 8.25rem; }
.logo-efta { width: 7.25rem; }
.logo-dgsp { width: 16.2rem; }
.logo-vlsp { width: 18rem; }
@media (max-width: 800px) {
  .logos__row { gap: 1.6rem 2.4rem; }
  .logo-sg, .logo-degpt, .logo-trauma { width: 15rem; }
  .logo-dgsp { width: 12.2rem; }
  .logo-vlsp { width: 13.5rem; }
  .logo-dgsf { width: 6.25rem; }
  .logo-efta { width: 5.5rem; }
}
/* Auf dem Telefon alle Logos untereinander: sonst stehen mal eines, mal zwei
   nebeneinander, je nachdem wie breit das einzelne Logo gerade ist. */
@media (max-width: 600px) {
  .logos__row { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--petrol); color: var(--white);
  border-top: 1rem solid var(--petrol-fresh);
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  font-size: var(--fs-footer);
}
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.site-footer address { font-style: normal; line-height: 1.45; }
.site-footer__name { color: var(--white); }
.site-footer__soft { color: var(--footer-text-soft); }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.8rem; }
.social a {
  display: grid; place-items: center; width: 3.9rem; height: 3.9rem; border-radius: 50%;
  background: var(--green); color: var(--white); transition: background-color 0.2s;
}
.social a:hover { background: var(--yellow); }
.social svg { width: 44%; height: 44%; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 4rem); }
.pride-flag { width: 6rem; height: auto; }
.site-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1em 2.6rem; font-size: var(--fs-footer-nav); }
.site-footer__nav a { color: var(--white); text-decoration: none; }
.site-footer__nav a:hover, .site-footer__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }

/* --------------------------------------------------------------------------
   14. Rechtsseiten (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.legal { padding-block: clamp(2.5rem, 6vw, 5rem); }
.legal h1 { font-size: var(--fs-h2); }
.legal h2 { font-size: var(--fs-h3); margin-top: 1.6em; }
.legal h3 { font-size: var(--fs-body); font-weight: 500; margin-top: 1.4em; }
.legal p, .legal li { font-size: var(--fs-small); }
.legal address { font-style: normal; margin-bottom: 1em; }
.legal a { word-break: break-word; }

/* --------------------------------------------------------------------------
   15. Druck
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .menu, .menu-backdrop, .skip-link, .bubble, .btn-bubble .bubble { display: none !important; }
  .faq[open] summary ~ *, .faq:not([open]) .faq__body { display: block; }
  body { color: #000; }
}