/* newGOLD .. Stylesheet
   Corporate Design Stand 19.08.2026
   Rosa #E3C4C0 · Schwarz #000000 · Gold #F1AC11
   Schriften: Outfit (Überschriften) und Manrope (Text), lokal in assets/fonts/
   Keine externen Server. */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/outfit.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: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/manrope.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;
}

:root {
  --rosa: #E3C4C0;
  --rosa-hell: #F0DCD9;
  --rosa-zart: #FAF2F1;
  --schwarz: #000000;
  --gold: #F1AC11;
  --gold-tief: #8A6208;
  --weiss: #FFFFFF;

  --text: #000000;
  --text-leise: #4A4446;
  --linie: #D9C6C3;
  --linie-zart: #EADDDB;

  /* Weicher Farbverlauf von Rosa nach Gold. Er ist von sich aus ruhig genug,
     deshalb liegt kein Schleier darüber. */
  --gold-struktur: url('verlauf.jpg');

  --titel: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lauf: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --maxw: 72rem;
  --prosa: 36em;
  --rund: 4px;
}

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

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--lauf);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--titel);
  color: var(--schwarz);
  line-height: 1.1;
  margin: 0 0 .6em;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5.6vw, 3.7rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 500; }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; max-width: var(--prosa); }
p:last-child { margin-bottom: 0; }

a { color: var(--schwarz); text-decoration-color: var(--gold); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--schwarz); }

strong { font-weight: 700; }

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

/* ---------- Einblend-Animation ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,.61,.24,1),
              transform .75s cubic-bezier(.22,.61,.24,1);
  transition-delay: var(--verzoegerung, 0s);
  will-change: opacity, transform;
}
.js .reveal.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Kopfzeile ---------- */

.kopf {
  background: var(--rosa);
  position: sticky;
  top: 0;
  z-index: 50;
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.5rem;
  padding-block: .3rem;
}

.marke {
  display: block;
  margin-right: auto;
  text-decoration: none;
  line-height: 0;
}
.marke img { height: 124px; width: auto; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--lauf);
  font-size: .95rem;
  font-weight: 500;
}
.nav a {
  color: var(--text);
  text-decoration: none;
  padding-block: .2rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--weiss); }
.nav a[aria-current="page"] { border-bottom-color: var(--schwarz); font-weight: 700; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-block;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--lauf);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  padding: .9rem 1.9rem;
  border-radius: 999px;
  border: 2px solid var(--schwarz);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.knopf:hover { background: var(--gold); border-color: var(--gold); color: var(--schwarz); }

.knopf-klein { padding: .58rem 1.3rem; font-size: .94rem; }

.knopf-rand { background: transparent; color: var(--schwarz); }
.knopf-rand:hover { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }

.knopf-zeile { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: center; margin-top: 1.8rem; }
.knopf-hinweis { font-size: .92rem; color: var(--text-leise); margin: 0; max-width: 32em; }

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: clamp(3rem, 8vw, 5.5rem); }
.abschnitt-creme { background: var(--rosa-zart); }
.abschnitt-beige { background: var(--rosa); }

.abschnitt-gold {
  background-image: var(--gold-struktur);
  background-size: cover;
  background-position: center;
  color: var(--schwarz);
}
.abschnitt-gold h2, .abschnitt-gold h3 { color: var(--schwarz); }
.abschnitt-gold .vorspann { color: var(--schwarz); border-bottom-color: var(--schwarz); }
.abschnitt-gold .knopf-hinweis { color: #3A2A05; }
/* Auf Gold wären goldene Aufzählungspunkte unsichtbar */
.abschnitt-gold .liste-haken li::before { color: var(--schwarz); }
.abschnitt-gold .symptome .titel::before { background: var(--schwarz); }
.abschnitt-gold .karte-nummer { color: var(--schwarz); }

.abschnitt-schwarz { background: var(--schwarz); color: var(--weiss); }
.abschnitt-schwarz h2, .abschnitt-schwarz h3 { color: var(--weiss); }
.abschnitt-schwarz strong { color: var(--gold); }
.abschnitt-schwarz a { color: var(--weiss); }
.abschnitt-schwarz .knopf-hinweis { color: #C9C4C5; }
.abschnitt-schwarz .vorspann { color: var(--gold); border-bottom-color: var(--gold); }
.abschnitt-schwarz .knopf {
  background: var(--weiss); color: var(--schwarz); border-color: var(--weiss);
}
.abschnitt-schwarz .knopf:hover {
  background: var(--gold); border-color: var(--gold); color: var(--schwarz);
}
.abschnitt-schwarz .knopf-rand {
  background: transparent; color: var(--weiss); border-color: var(--weiss);
}
.abschnitt-schwarz .knopf-rand:hover {
  background: var(--weiss); color: var(--schwarz); border-color: var(--weiss);
}

/* Knöpfe auf dem hellen Farbverlauf: schwarz gefüllt für die Hauptaktion,
   schwarz umrandet für die zweite. Ein weißer Knopf würde auf dem hellen
   Grund verschwinden. */
.knopf-dunkel {
  background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz);
}
.abschnitt-gold .knopf {
  background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz);
}
.abschnitt-gold .knopf:hover {
  background: var(--weiss); color: var(--schwarz); border-color: var(--schwarz);
}
.abschnitt-gold .knopf-rand {
  background: transparent; color: var(--schwarz); border-color: var(--schwarz);
}
.abschnitt-gold .knopf-rand:hover {
  background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz);
}

/* ---------- Stimmen, luftig statt Farbbalken ---------- */

.stimmen { margin: 2.5rem 0 0; padding: 0; list-style: none; max-width: 46em; }
.stimmen li {
  position: relative;
  padding: 1.6rem 0 1.6rem 3.2rem;
  border-bottom: 1px solid var(--linie-zart);
}
.stimmen li:first-child { border-top: 1px solid var(--linie-zart); }
.stimmen li::before {
  content: "„";
  position: absolute;
  left: 0;
  top: .55rem;
  font-family: var(--titel);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--gold);
}
.stimmen p {
  font-family: var(--titel);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: none;
}

/* ---------- Kontaktwege, editorial statt Kästchen ---------- */

.kontakt-block { display: grid; gap: 2rem; margin-top: 2.5rem; }
.kontakt-block figure { margin: 0; }
.kontakt-block img { border-radius: var(--rund); width: 100%; }
.kontakt-block figcaption {
  margin-top: .8rem;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.kontakt-block figcaption strong { color: var(--schwarz); font-size: 1.1rem; }
.kontakt-block .kontakt-liste { margin-top: 0; }

@media (min-width: 52em) {
  .kontakt-block { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
}

.kontakt-liste { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: 48em; }
.kontakt-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linie-zart);
}
.kontakt-liste li:first-child { border-top: 1px solid var(--linie-zart); }
.kontakt-liste .was {
  font-family: var(--lauf);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  flex: 0 0 9rem;
}
.kontakt-liste .wie {
  font-family: var(--titel);
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: none;
}
.kontakt-liste .wie a { text-decoration: none; border-bottom: 2px solid var(--gold); }
.kontakt-liste .wie a:hover { border-bottom-color: var(--schwarz); }

/* ---------- Versetzte Bildpaare (Look der Referenz) ---------- */

.bildpaar { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.bildpaar figure { margin: 0; }
.bildpaar figcaption {
  font-size: .9rem;
  color: var(--text-leise);
  margin-top: .6rem;
}
.bildpaar img { border-radius: var(--rund); width: 100%; }

@media (min-width: 48em) {
  .bildpaar { grid-template-columns: repeat(2, 1fr); gap: 3rem; align-items: start; }
  .bildpaar figure:nth-child(even) { margin-top: 5rem; }
}

/* ---------- Fließtext-Block, editorial ---------- */

.textblock { max-width: 42em; }
.textblock p { max-width: none; }
.textblock h3 { margin-top: 2.2rem; }

.vorspann {
  font-family: var(--lauf);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--schwarz);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
  max-width: none;
}

.gross { font-size: clamp(1.08rem, 2.2vw, 1.28rem); line-height: 1.6; }

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(180deg, var(--rosa) 0%, var(--rosa) 18%,
              var(--rosa-hell) 58%, var(--weiss) 100%);
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.hero h1 { max-width: 15em; }
.hero .gross { max-width: var(--prosa); }

/* Hero mit Foto.
   Auf dem Handy steht das Bild als eigener Block ÜBER dem Text, damit man
   die Frauen wirklich sieht. Ab Tablet liegt es als Hintergrund dahinter,
   mit hellem Schleier von links für die Lesbarkeit. */
.hero-bild {
  background: linear-gradient(180deg, var(--rosa-hell) 0%, var(--weiss) 100%);
  padding-block: 0 clamp(2.5rem, 8vw, 4rem);
}
.hero-bildband {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  background-image: url('hero-rauten.jpg');
  background-size: cover;
  background-position: 62% center;
}
@media (min-width: 40em) {
  .hero-bildband { aspect-ratio: 16 / 9; }
}
.hero-bild .hero-text {
  background: none;
  padding: 2rem 0 0;
  max-width: none;
}
.hero-bild .hero-text p { max-width: 32em; }

@media (min-width: 62em) {
  .hero-bildband { display: none; }
  .hero-bild {
    background-image:
      linear-gradient(100deg, rgba(250,242,241,.98) 0%, rgba(250,242,241,.96) 40%,
        rgba(250,242,241,.72) 56%, rgba(250,242,241,0) 78%),
      url('hero-rauten.jpg');
    background-size: cover;
    background-position: center right;
    min-height: 34rem;
    padding-block: clamp(2.5rem, 6vw, 4rem);
    display: flex;
    align-items: center;
  }
  .hero-bild .hero-text { padding: 0; max-width: 30rem; }
  .hero-bild .hero-text p { max-width: 26em; }
}

.hero-fakten {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.hero-fakten li {
  background: var(--weiss);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  font-size: .92rem;
  font-weight: 600;
}

/* ---------- Raster und Karten ---------- */

.raster { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.raster-2, .raster-3 { grid-template-columns: 1fr; }

.karte {
  background: var(--rosa-zart);
  border-radius: var(--rund);
  padding: 1.8rem 1.6rem;
}
.karte p { max-width: none; }
.karte h3 { margin-bottom: .45rem; }
.abschnitt-creme .karte { background: var(--weiss); }

.karte-warm {
  background: var(--rosa);
  border-radius: var(--rund);
  padding: 1.9rem 1.7rem;
}
.karte-warm p { max-width: none; }

/* Karten in tiefem Gold aus dem Logo-Verlauf, Schrift weiß.
   #8A6208 ist ein dunkler Punkt der Logo-Rampe von Schwarz nach #F1AC11
   und ergibt mit Weiß einen Kontrast von 5,5 zu 1. */
.karte-gold {
  background: var(--gold-tief);
  color: var(--weiss);
  border-radius: var(--rund);
  padding: 1.8rem 1.6rem;
}
.karte-gold h3 { color: var(--weiss); }
.karte-gold p { color: var(--weiss); max-width: none; }
.karte-gold strong { color: var(--weiss); }

/* Kästen und Abschnitte mit eigenem Hintergrundbild */
.bg-bild {
  background-size: cover;
  background-position: center;
}
.karte-warm.bg-bild, .zitat.bg-bild { background-color: var(--rosa); }

/* Weniger Abstand, wenn ein Abschnitt direkt an den Hero anschließt */
.abschnitt-anschluss { padding-top: clamp(1rem, 2.5vw, 1.8rem); }

.karte-nummer {
  font-family: var(--titel);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--gold-tief);
  line-height: 1;
  display: block;
  margin-bottom: .3rem;
}

/* ---------- Listen ---------- */

.liste-haken { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 44em; }
.liste-haken li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 1rem;
}
.liste-haken li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -0.1em;
  font-family: var(--titel);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gold-tief);
}

/* Symptome, ohne Kästen, mit Animation */
.symptome { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 46em; }
.symptome li {
  padding: 1.15rem 0 1.15rem 0;
  border-bottom: 1px solid var(--linie-zart);
  font-size: 1.02rem;
}
.symptome li:first-child { border-top: 1px solid var(--linie-zart); }
.symptome li p { max-width: none; margin: 0; }
.symptome .titel {
  display: block;
  font-family: var(--titel);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: .2rem;
}
.symptome .titel::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  background: var(--gold);
  border-radius: 50%;
  margin-right: .7rem;
  vertical-align: .12em;
}

/* ---------- Zitat ---------- */

.zitat {
  margin: 2rem 0 0;
  padding: 1.9rem 2rem;
  background: var(--rosa);
  border-radius: var(--rund);
}
.zitat p {
  font-family: var(--titel);
  font-size: clamp(1.25rem, 2.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--schwarz);
  margin: 0;
  max-width: none;
}
.zitat .unterzeile {
  font-family: var(--lauf);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  margin-top: .8rem;
}
.zitat cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--lauf);
  font-size: .92rem;
  font-style: normal;
  font-weight: 600;
}

/* ---------- Preis ---------- */

.preisbox {
  background: var(--weiss);
  border-radius: var(--rund);
  padding: 1.3rem 1.5rem;
  max-width: 22rem;
  margin-top: 2rem;
  text-align: center;
}
.preis-zahl {
  font-family: var(--titel);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--schwarz);
  line-height: 1;
  display: block;
}
.preis-zusatz { font-size: .95rem; color: var(--text-leise); margin: .4rem 0 0; max-width: none; }

/* ---------- Team ---------- */

.person {
  background: var(--rosa-zart);
  border-radius: var(--rund);
  padding: 1.9rem 1.7rem;
}
.person > img { border-radius: var(--rund); margin-bottom: 1.4rem; }
.person h3 { margin-bottom: .15rem; }
.rolle {
  font-size: .92rem;
  font-weight: 700;
  color: var(--gold-tief);
  margin: 0 0 1rem;
  max-width: none;
}
.karte h3 + .rolle { margin-top: -.15rem; }
.person p { max-width: none; font-size: 1rem; }
.person blockquote {
  margin: 1.2rem 0 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--gold);
}
.person blockquote p {
  max-width: none;
  font-family: var(--titel);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.5;
}

/* ---------- Fragen ---------- */

.frage { border-bottom: 1px solid var(--linie-zart); padding: 1.5rem 0; }
.frage:first-of-type { border-top: 1px solid var(--linie-zart); }
.frage h3 { margin-bottom: .5rem; }
.frage p { max-width: 44em; }

/* ---------- Kontaktwege ---------- */

.kontaktweg {
  background: var(--rosa);
  border-radius: var(--rund);
  padding: 2rem 1.7rem;
}
.kontaktweg h3 { margin-bottom: .3rem; }
.kontaktweg p { max-width: none; font-size: 1.15rem; font-weight: 600; }
.kontaktweg a { text-decoration-color: var(--schwarz); }

/* ---------- Platzhalter ---------- */

.bildnachweis {
  font-size: .82rem;
  color: var(--text-leise);
  margin-top: .6rem;
  max-width: none;
}

.bildplatz {
  border: 2px dashed var(--linie);
  background: var(--weiss);
  border-radius: var(--rund);
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--text-leise);
  font-size: .92rem;
  font-weight: 500;
}

.ergaenzen {
  display: inline-block;
  background: #E8EEF7;
  border: 1px dashed #3A5A8C;
  color: #1F3A6B;
  border-radius: var(--rund);
  padding: .15rem .55rem;
  font-size: .87rem;
  font-weight: 600;
  font-family: var(--lauf);
}

/* ---------- Rechtstexte ---------- */

.recht h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 2.5rem; }
.recht h3 { font-size: 1.1rem; margin-top: 1.8rem; }
.recht p, .recht li { max-width: 44em; }
.recht ul { padding-left: 1.2rem; }
.recht li { margin-bottom: .4rem; }
.recht .grossbuchstaben { font-size: .95rem; }

/* ---------- Fußzeile ---------- */

.fuss {
  background: var(--rosa);
  color: var(--schwarz);
  padding-block: 3rem 2rem;
}
.fuss a { color: var(--schwarz); }
.fuss .marke { margin: 0 0 .2rem; display: block; }
.fuss .marke img { height: 150px; margin-left: -.6rem; }
.fuss h3 {
  font-family: var(--lauf);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.fuss p { max-width: 30em; }
.fuss-raster { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.fuss-links { list-style: none; margin: 0; padding: 0; }
.fuss-links li { margin-bottom: .5rem; }
.fuss-unten {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,.2);
  font-size: .88rem;
}
.fuss-unten p { max-width: none; }

/* ---------- Sprungmarke ---------- */

.skip {
  position: absolute;
  left: -9999px;
  background: var(--schwarz);
  color: var(--weiss);
  padding: .7rem 1.2rem;
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; }

/* ---------- Größere Bildschirme ---------- */

@media (min-width: 48em) {
  .raster-2 { grid-template-columns: repeat(2, 1fr); }
  .raster-3 { grid-template-columns: repeat(3, 1fr); }
  .fuss-raster { grid-template-columns: 2fr 1fr 1fr; }
  body { font-size: 1.125rem; }
  .marke img { height: 148px; }
  .symptome { columns: 2; column-gap: 3rem; }
  .symptome li { break-inside: avoid; }
  .symptome li:first-child { border-top: none; }
}

/* Handy: Kopfbereich kompakt halten. Alle fünf Menüpunkte bleiben lesbar,
   aber Logo und Abstände werden kleiner, damit der Inhalt nicht erst
   unterhalb des halben Bildschirms anfängt. */
@media (max-width: 47.99em) {
  .marke img { height: 62px; }
  .kopf-innen { padding-block: .3rem; gap: .2rem 1rem; }
  .nav { font-size: .88rem; gap: .1rem .95rem; }
  .nav a { border-bottom-width: 1px; }
  .fuss .marke img { height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .kopf, .knopf-zeile { display: none; }
  body { font-size: 11pt; }
}

/* ---------- Zieharmonika für die Vorträge ---------- */
/* Nutzt das eingebaute details/summary von HTML. Braucht kein JavaScript,
   funktioniert auch auf dem iPhone und ist mit der Tastatur bedienbar. */

.vortrag summary {
  cursor: pointer;
  list-style: none;
  display: block;
}
.vortrag summary::-webkit-details-marker { display: none; }
.vortrag summary::marker { content: ""; }

.vortrag-titel {
  display: block;
  font-weight: 600;
}
.vortrag-anriss {
  display: block;
  margin-top: .15rem;
}
.vortrag-mehr {
  display: inline-block;
  margin-top: .45rem;
  font-size: .92rem;
  font-weight: 600;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}
.vortrag-mehr::after { content: "Mehr lesen"; }
.vortrag[open] .vortrag-mehr::after { content: "Weniger anzeigen"; }

.vortrag summary:hover .vortrag-mehr { opacity: .65; }
.vortrag summary:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 4px; }

.vortrag > p {
  margin-top: .9rem;
  margin-bottom: .8rem;
  max-width: 40em;
}
.vortrag > p:last-child { margin-bottom: .3rem; }

.liste-haken li:has(.vortrag) { margin-bottom: 1.6rem; }