/* ==========================================================================
   Steffi Gosch – Gestaltung
   Leitidee „Doppelseite“: zwei gleichwertige Welten nebeneinander, verbunden durch ein Herz.
   HerzTöne (Musik & Kunst) in Steffis Pastellpalette, HerzTon (Keramik) in ihrer Erdpalette.
   Schrift: Literata (Buchschrift) – Ms Madi nur für Steffis handschriftlichen Gruß.
   ========================================================================== */

/* ---------- Schriften (selbst ausgeliefert, keine externen Anfragen) ---------- */
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-kursiv.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Ms Madi';
  src: url('/fonts/ms-madi.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben und Maße ---------- */
:root {
  /* HerzTöne – Steffis Pastellpalette */
  --toene-rosa: #F9C8C2;
  --toene-altrosa: #C69491;
  --toene-salbei: #96ACA0;
  --toene-taubenblau: #7D9094;
  --toene-oliv: #60665A;
  /* abgeleitet: Flächen und gut lesbare Textfarben */
  --toene-hauch: #FEF5F3;
  --toene-zart: #FCE4E0;
  --toene-tinte: #3A3F35;
  --toene-tinte-leise: #5C6357;
  --toene-tief: #8F5E5C;

  /* HerzTon – Steffis Erdpalette */
  --ton-terrakotta: #A46447;
  --ton-mandel: #CEB58E;
  --ton-umbra: #4C362D;
  --ton-salbei: #88937B;
  --ton-leinen: #E8E1D5;
  /* abgeleitet */
  --ton-hauch: #F5F1EA;
  --ton-tinte-leise: #6E5A4E;
  --ton-terrakotta-tief: #8A5139;

  /* neutral: Papier, wie in einem Buch */
  --papier: #FFFDFA;
  --tinte: #33302C;
  --tinte-leise: #69625B;

  --schrift: 'Literata', Georgia, 'Times New Roman', serif;
  --handschrift: 'Ms Madi', 'Snell Roundhand', cursive;

  /* Schriftgrade – Leseschrift bewusst groß (19 px am Desktop) */
  --groesse-klein: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --groesse-text: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --groesse-einleitung: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --groesse-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --groesse-h2: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);
  --groesse-h1: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --groesse-handschrift: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);

  --breite: 76rem;
  --breite-schmal: 46rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --abstand-abschnitt: clamp(4rem, 3rem + 5vw, 8rem);
  --radius: 0.75rem;
  --bogen: 999px 999px 0 0;
  --uebergang: 0.25s ease;
}

/* Jede Welt setzt ihre eigenen Bedeutungs-Farben – Seiten, Abschnitte und Elemente können
   mit welt-herztoene / welt-herzton / welt-neutral umgeschaltet werden */
.welt-neutral {
  --grund: var(--papier);
  --flaeche: #F7F2EC;
  --text: var(--tinte);
  --text-leise: var(--tinte-leise);
  --akzent: var(--ton-umbra);
  --akzent-hover: #34251F;
  --akzent-text: #FFFFFF;
  --zierde: var(--ton-terrakotta);
  --linie: rgba(51, 48, 44, 0.16);
  --fokus: var(--ton-terrakotta);
}

.welt-herztoene {
  --grund: var(--toene-hauch);
  --flaeche: var(--toene-zart);
  --text: var(--toene-tinte);
  --text-leise: var(--toene-tinte-leise);
  --akzent: var(--toene-oliv);
  --akzent-hover: #4A4F44;
  --akzent-text: #FFFFFF;
  --zierde: var(--toene-altrosa);
  --linie: rgba(96, 102, 90, 0.22);
  --fokus: var(--toene-oliv);
}

.welt-herzton {
  --grund: var(--ton-hauch);
  --flaeche: var(--ton-leinen);
  --text: var(--ton-umbra);
  --text-leise: var(--ton-tinte-leise);
  --akzent: var(--ton-terrakotta);
  --akzent-hover: var(--ton-terrakotta-tief);
  --akzent-text: #FFFFFF;
  --zierde: var(--ton-mandel);
  --linie: rgba(76, 54, 45, 0.18);
  --fokus: var(--ton-terrakotta);
}

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--groesse-text);
  font-weight: 400;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-weight: 300;
  text-wrap: balance;
}

h1 {
  font-size: var(--groesse-h1);
  font-style: italic;
  line-height: 1.04;
  letter-spacing: -0.012em;
}

h2 {
  font-size: var(--groesse-h2);
  line-height: 1.1;
  letter-spacing: -0.006em;
}

h3 {
  font-size: var(--groesse-h3);
  font-weight: 500;
  line-height: 1.3;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

ul,
ol {
  padding-left: 1.2em;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--toene-rosa);
  color: var(--tinte);
}

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

.sprunglink {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--tinte);
  color: #FFFFFF;
  border-radius: var(--radius);
}

.sprunglink:focus {
  top: 1rem;
}

/* ---------- Bausteine ---------- */
.behaelter {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.behaelter--schmal {
  max-width: calc(var(--breite-schmal) + 2 * var(--rand));
}

.abschnitt {
  padding-block: var(--abstand-abschnitt);
}

.abschnitt--flaeche {
  background: var(--flaeche);
}

.einleitung {
  font-size: var(--groesse-einleitung);
  line-height: 1.5;
  font-weight: 350;
}

.vorzeile {
  margin-bottom: 0.4em;
  font-style: italic;
  color: var(--text-leise);
}

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

/* Hält Namen mit Bindestrich zusammen, z. B. Domains wie video-stream-hosting.com */
.am-stueck {
  white-space: nowrap;
}

.handschrift {
  font-family: var(--handschrift);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}

.fliesstext {
  max-width: 36rem;
}

.fliesstext > h2,
.fliesstext > h3 {
  margin-top: 1.6em;
}

.fotonachweis {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-leise);
}

/* Formen: Bogen (Porträts), Oval (Steffis Brief), Kreis (Logos) */
.bogen {
  overflow: hidden;
  border-radius: var(--bogen);
}

.bogen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oval {
  overflow: hidden;
  border-radius: 50%;
}

.logo {
  overflow: hidden;
  border-radius: 50%;
  flex: none;
}

.logo img {
  width: 100%;
  height: 100%;
}

.logo--mini {
  width: 2rem;
  height: 2rem;
}

.logo--klein {
  width: 3rem;
  height: 3rem;
}

.logo--fuss {
  width: 4.5rem;
  height: 4.5rem;
}

/* Zeichnungen: Das weiße Papier verschmilzt mit dem Hintergrund – als wäre direkt auf die Seite gezeichnet */
.zeichnung img {
  mix-blend-mode: multiply;
}

.foto {
  overflow: hidden;
  border-radius: var(--radius);
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bild-fehlt {
  background: var(--flaeche);
}

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.9rem;
  padding: 0.7em 1.45em;
  border: 1.5px solid var(--akzent);
  border-radius: 999px;
  background: var(--akzent);
  color: var(--akzent-text);
  font: 500 1rem/1.2 var(--schrift);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}

.knopf:hover {
  background: var(--akzent-hover);
  border-color: var(--akzent-hover);
}

.knopf--leise {
  background: transparent;
  color: var(--text);
  border-color: currentColor;
}

.knopf--leise:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--grund);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: relative;
  z-index: 20;
}

.kopf__navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: var(--breite);
  margin-inline: auto;
  padding: clamp(1rem, 2.4vw, 1.6rem) var(--rand);
}

.kopf__liste {
  display: flex;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kopf__liste--links {
  justify-content: flex-end;
}

.kopf__liste--rechts {
  justify-content: flex-start;
}

.wortmarke {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.kopf__link {
  display: inline-block;
  padding-block: 0.35em;
  font-size: 1.0625rem;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  transition: background-size var(--uebergang);
}

.kopf__link:hover,
.kopf__link[aria-current] {
  background-size: 100% 1.5px;
}

.kopf__link--herztoene[aria-current] {
  background-image: linear-gradient(var(--toene-altrosa), var(--toene-altrosa));
  background-size: 100% 3px;
}

.kopf__link--herzton[aria-current] {
  background-image: linear-gradient(var(--ton-terrakotta), var(--ton-terrakotta));
  background-size: 100% 3px;
}

.menueknopf {
  display: none;
}

/* Startseite: Die Kopfzeile liegt über beiden Seiten der Doppelseite */
.seite-start .kopf {
  background: linear-gradient(90deg, var(--toene-rosa) 0 50%, var(--ton-leinen) 50% 100%);
}

.seite-start .kopf__liste--links {
  color: var(--toene-tinte);
}

.seite-start .kopf__liste--rechts {
  color: var(--ton-umbra);
}

/* Unternavigation einer Welt */
.weltleiste {
  border-block: 1px solid var(--linie);
  background: var(--flaeche);
}

.weltleiste__innen {
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 0.55rem var(--rand);
}

.weltleiste__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-style: italic;
  font-size: 1.125rem;
  text-decoration: none;
  white-space: nowrap;
}

.weltleiste__liste {
  display: flex;
  gap: 0.25rem 1.5rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: var(--groesse-klein);
}

.weltleiste__liste a {
  display: inline-block;
  padding-block: 0.4rem;
  text-decoration: none;
  color: var(--text-leise);
}

.weltleiste__liste a:hover {
  color: var(--text);
}

.weltleiste__liste a[aria-current] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--zierde);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

/* Menü für kleine Bildschirme */
.menue {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: var(--papier);
}

.menue[hidden] {
  display: none;
}

.menue__inhalt {
  display: grid;
  min-height: 100%;
  padding-top: 4.5rem;
}

.menue__welt {
  padding: 1.5rem var(--rand) 1.75rem;
  background: var(--grund);
  color: var(--text);
}

.menue__welt.welt-herztoene {
  background: var(--toene-rosa);
}

.menue__welt.welt-herzton {
  background: var(--ton-leinen);
}

.menue__weltname {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 350;
  line-height: 1.1;
  text-decoration: none;
}

.menue__weltname small {
  display: block;
  font-size: 0.9375rem;
  font-style: normal;
  color: var(--text-leise);
}

.menue__liste {
  margin: 0;
  padding: 0 0 0 3.9rem;
  list-style: none;
}

.menue__liste a {
  display: block;
  padding-block: 0.45rem;
  font-size: 1.125rem;
  text-decoration: none;
}

.menue__liste a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.menue__liste--allgemein {
  padding: 1.5rem var(--rand) 2.5rem;
}

.menue__liste--allgemein a {
  font-size: 1.25rem;
}

body.menue-offen {
  overflow: hidden;
}

/* Bei offenem Menü liegt die Kopfzeile darüber – sonst wäre der Schließen-Knopf verdeckt.
   Sie nimmt dann die Papierfarbe des Menüs an (auch auf der zweifarbigen Startseite). */
.menue-offen .kopf {
  z-index: 60;
  background: var(--papier);
}

/* ---------- Startseite: die Doppelseite ----------
   Eine Komposition in allen Breiten: Steffis Porträt in der Mitte über dem Falz, links HerzTöne,
   rechts HerzTon. Die beiden runden Logos sind die Knöpfe in die Welten – die Herzlinie verbindet
   sie: links kommt sie als Klangwelle aus dem HerzTöne-Logo, rechts über den Becher aus dem
   HerzTon-Logo, in der Mitte treffen sich beide im Herz.
   Zwei Umschaltpunkte (für die ganze Website gleich):
   unter 900 px  – Porträt, darunter beide Seiten zweispaltig, unten die Herzlinie als Girlande
                   über den Logos (weiter unten)
   900–1199 px   – Grundfassung: Text | Porträt | Text, darunter Logo – Herzlinie – Logo
   ab 1200 px    – wie die Grundfassung, breiter gesetzt (weiter unten) */
.doppelseite {
  --luecke: clamp(2rem, 4vw, 3.25rem);
  /* Durchmesser der Logo-Knöpfe: groß genug, dass „Stefanie Gosch“ und „Keramik“ lesbar sind */
  --knopf: clamp(11rem, 6.5rem + 5vw, 13rem);

  display: grid;
  /* Spalten wachsen bis zu ihrer Höchstbreite, die Ränder nehmen den Rest – so läuft nichts über */
  grid-template-columns:
    minmax(var(--rand), 1fr) minmax(0, 20rem) var(--luecke)
    clamp(17rem, 30vw, 20rem)
    var(--luecke) minmax(0, 20rem) minmax(var(--rand), 1fr);
  /* Die freien Zeilen oben und unten (1fr) setzen beide Seiten mittig neben das Porträt */
  grid-template-areas:
    ". .      . mitte . .      ."
    ". titelL . mitte . titelR ."
    ". textL  . mitte . textR  ."
    ". .      . mitte . .      ."
    ". linie  linie linie linie linie .";
  grid-template-rows: 1fr auto auto 1fr auto;
  position: relative;
  isolation: isolate;
  padding-block: clamp(1.5rem, 4vh, 3.5rem) clamp(5rem, 11vh, 7.5rem);
  background: linear-gradient(90deg, var(--toene-rosa) 0 50%, var(--ton-leinen) 50% 100%);
}

/* Feine Papierstruktur über beiden Seiten – die Farbflächen wirken wie echtes Papier */
.doppelseite::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.22 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Die beiden Seiten lösen sich im Raster auf – so stehen Überschriften und Texte
   links und rechts exakt auf gleicher Höhe */
.seite {
  display: contents;
}

.seite__titel {
  margin: 0;
  font-size: clamp(2.6rem, 1.2rem + 3.3vw, 4rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.seite__text {
  max-width: 21rem;
  margin: 0.4rem 0 0;
  color: var(--text-leise);
}

/* Beide Seiten richten sich zum Falz hin aus */
.seite--toene .seite__titel { grid-area: titelL; text-align: right; }
.seite--toene .seite__text { grid-area: textL; justify-self: end; text-align: right; }

.seite--ton .seite__titel { grid-area: titelR; text-align: left; }
.seite--ton .seite__text { grid-area: textR; justify-self: start; text-align: left; }

/* ---------- Die Logos als Knöpfe in die beiden Welten ----------
   Erkennbar als Bedienelement durch hellen Ring und Schatten (das Siegel „liegt auf“) und die
   Beschriftung in Weltfarbe mit Pfeil und Unterstrich. Beim Überfahren hebt sich das Logo, der
   Ring färbt sich in der Weltfarbe, der Pfeil rückt vor. */
.weltknopf {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.weltknopf__siegel {
  position: relative;
  display: block;
  width: var(--knopf);
  height: var(--knopf);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 253, 250, 0.75), 0 20px 36px -18px rgba(51, 48, 44, 0.65);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}

.weltknopf__logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Die Beschriftung steht unter dem Logo, ohne die Rasterzeile zu vergrößern */
.weltknopf__text {
  position: absolute;
  top: calc(100% + 0.8rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding-bottom: 0.2em;
  border-bottom: 1.5px solid currentColor;
  color: var(--akzent);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.weltknopf__pfeil {
  transition: transform 0.25s ease;
}

.weltknopf:hover .weltknopf__siegel {
  transform: translateY(-5px);
  box-shadow: 0 0 0 5px var(--akzent), 0 28px 42px -20px rgba(51, 48, 44, 0.7);
}

.weltknopf:hover .weltknopf__pfeil {
  transform: translateX(0.3em);
}

.weltknopf:active .weltknopf__siegel {
  transform: translateY(0) scale(0.98);
}

.weltknopf:focus-visible {
  outline: none;
}

.weltknopf:focus-visible .weltknopf__siegel {
  box-shadow: 0 0 0 4px var(--papier), 0 0 0 7px var(--fokus);
}

/* Logos und Herzlinie teilen sich die untere Rasterzeile: Die Linie läuft zwischen den Logos,
   die Logos schließen an ihre Enden an und überdecken deren ausgeblendeten Anfang */
.seite--toene .weltknopf,
.seite--ton .weltknopf {
  grid-area: linie;
  align-self: center;
}

.seite--toene .weltknopf {
  justify-self: start;
  margin-left: calc((100% - min(100% - 2 * var(--knopf) + 5rem, 44rem)) / 2 - var(--knopf) + 2.5rem);
}

.seite--ton .weltknopf {
  justify-self: end;
  margin-right: calc((100% - min(100% - 2 * var(--knopf) + 5rem, 44rem)) / 2 - var(--knopf) + 2.5rem);
}

.herzlinie {
  grid-area: linie;
  width: 100%;
  align-self: center;
  margin-top: 1.5rem;
  /* Grundlinie der Zeichnung (80 % ihrer Höhe) auf die Mitte der Logos legen */
  transform: translateY(-30%);
}

.herzlinie__grafik {
  display: block;
  width: min(100% - 2 * var(--knopf) + 5rem, 44rem);
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* Die Girlande (herzlinie-handy.ejs) gibt es nur auf schmalen Bildschirmen */
.herzlinie__grafik--handy {
  display: none;
}

/* Der eine große Moment: Beide Linien zeichnen sich von außen zur Mitte, dann schlägt das Herz */
.herzlinie__pfad {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: linie-zeichnen 2.3s cubic-bezier(0.6, 0.05, 0.3, 1) 0.35s forwards;
}

.herzlinie__fuellung {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 55%;
  animation:
    herz-fuellen 0.7s ease-out 2.45s forwards,
    herz-schlagen 1.2s ease-in-out 2.6s 1;
}

/* Liegt die Herzlinie beim Öffnen außerhalb des Bildes, wartet sie unsichtbar (seite.js);
   sobald die Klasse entfällt, startet die Animation von vorn */
.herzlinie--wartet .herzlinie__pfad,
.herzlinie--wartet .herzlinie__fuellung {
  animation: none;
}

@keyframes linie-zeichnen {
  to { stroke-dashoffset: 0; }
}

@keyframes herz-fuellen {
  to { opacity: 1; }
}

@keyframes herz-schlagen {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.16); }
  28% { transform: scale(1); }
  42% { transform: scale(1.09); }
  58% { transform: scale(1); }
}

/* Steffis Porträt in der Mitte, über dem Falz */
.mitte {
  grid-area: mitte;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  justify-self: center;
  align-self: center;
}

.mitte__bild {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--bogen);
  box-shadow: 0 24px 50px -28px rgba(51, 48, 44, 0.6);
}

.mitte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fotonachweis senkrecht an der rechten Kante des Porträts – er nimmt im Raster keinen Platz ein */
.mitte__nachweis {
  position: absolute;
  bottom: 0;
  left: calc(100% + 0.45rem);
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.6875rem;
  line-height: 1;
  white-space: nowrap;
}

/* Breite Bildschirme ab 1200 px: dieselbe Anordnung, Texte und Porträt breiter */
@media (min-width: 1200px) {
  .doppelseite {
    --luecke: minmax(1.5rem, 3rem);

    grid-template-columns:
      minmax(var(--rand), 1fr) minmax(15rem, 21rem) var(--luecke)
      minmax(17rem, 22rem)
      var(--luecke) minmax(15rem, 21rem) minmax(var(--rand), 1fr);
  }

  .seite__titel {
    align-self: end;
  }

  .herzlinie {
    margin-top: 0;
  }
}

/* ---------- Startseite: Steffis Brief ---------- */
.brief {
  padding-block: var(--abstand-abschnitt);
  background: var(--papier);
  color: var(--tinte);
}

.brief__innen {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 36rem);
  justify-content: center;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.brief__bild {
  margin: 0;
}

.brief__bild .oval {
  aspect-ratio: 4 / 5;
}

.brief__bild .oval img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brief__bild .fotonachweis {
  text-align: center;
}

.brief__gruss {
  margin: 0 0 0.35em;
  font-size: var(--groesse-handschrift);
  line-height: 1.1;
  color: var(--ton-terrakotta);
}

.brief__unterschrift {
  margin: 1.5rem 0 1.75rem;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  line-height: 1;
  color: var(--ton-terrakotta);
}

/* ---------- Startseite: Angebote als Doppelseite ---------- */
.angebote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "titel titel"
    "toene ton";
  background: linear-gradient(90deg, var(--toene-hauch) 0 50%, var(--ton-hauch) 50% 100%);
}

.angebote__titel {
  grid-area: titel;
  margin: 0;
  padding: var(--abstand-abschnitt) var(--rand) 0;
  text-align: center;
  color: var(--tinte);
}

.angebote__seite {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(var(--rand), 5vw, 5.5rem) var(--abstand-abschnitt);
  color: var(--text);
}

.angebote__seite.welt-herztoene {
  grid-area: toene;
  align-items: flex-end;
}

.angebote__seite.welt-herzton {
  grid-area: ton;
  align-items: flex-start;
}

.angebote__welt {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  margin: 0 0 1.25rem;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-style: italic;
  font-weight: 300;
}

.angebote__welt span {
  font-size: var(--groesse-klein);
  font-style: normal;
  font-weight: 400;
  color: var(--text-leise);
}

.angebotsliste {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.angebotsliste li + li {
  border-top: 1px solid var(--linie);
}

.angebotsliste a {
  display: block;
  padding: 1rem 0;
  text-decoration: none;
}

.angebotsliste strong {
  display: block;
  font-size: 1.1875rem;
  font-weight: 500;
  transition: color var(--uebergang);
}

.angebotsliste span {
  display: block;
  color: var(--text-leise);
}

.angebotsliste a:hover strong {
  color: var(--akzent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ---------- Startseite: Königstochter ---------- */
.koenigstochter {
  padding-block: var(--abstand-abschnitt);
  background: var(--toene-zart);
  color: var(--text);
}

.koenigstochter__innen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.koenigstochter__bild {
  max-width: 28rem;
  justify-self: center;
}

.koenigstochter__text {
  max-width: 34rem;
}

.koenigstochter__text h2 {
  font-size: var(--groesse-h1);
  font-style: italic;
}

.zeichnungsband {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: var(--breite);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0 var(--rand);
  list-style: none;
}

.zeichnungsband a {
  display: block;
  transition: transform 0.4s ease;
}

.zeichnungsband a:hover {
  transform: translateY(-4px);
}

.zeichnungsband img {
  width: auto;
  height: clamp(9rem, 7rem + 6vw, 14rem);
}

/* ---------- Startseite: Werkstatt ---------- */
.werkstatt {
  padding-block: var(--abstand-abschnitt);
  background: var(--ton-mandel);
  color: var(--ton-umbra);
  --text-leise: #5A443A;
  --linie: rgba(76, 54, 45, 0.25);
}

.werkstatt .knopf {
  --akzent: var(--ton-umbra);
  --akzent-hover: #34251F;
}

.werkstatt__innen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.werkstatt__text {
  max-width: 32rem;
}

.werkstatt__bilder {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.werkstatt__bild {
  overflow: hidden;
  border-radius: var(--radius);
}

.werkstatt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.werkstatt__bild--gross {
  grid-row: 1 / 3;
}

.werkstatt__bild--quer {
  aspect-ratio: 3 / 2;
}

.werkstatt__bild--hoch {
  aspect-ratio: 4 / 3;
}

.werkstatt__bild--hoch img {
  object-position: 50% 30%;
}

/* ---------- Termine ---------- */
.termine-abschnitt h2 {
  text-align: center;
}

.terminliste {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.termin {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  border: 1px solid var(--linie);
}

.termin__datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0.5rem;
  border-radius: var(--radius);
  background: var(--flaeche);
  text-align: center;
  line-height: 1.15;
}

.termin__tage {
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 350;
}

.termin__monat {
  font-size: 1.0625rem;
}

.termin__wochentage {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.termin__welt {
  margin: 0 0 0.2rem;
  font-size: var(--groesse-klein);
  font-style: italic;
  color: var(--text-leise);
}

.termin__titel {
  margin: 0 0 0.4rem;
}

.termin__angaben {
  margin-bottom: 0.6rem;
}

.termin__beschreibung {
  margin: 0;
  color: var(--text-leise);
}

.termin__bilder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0.75rem;
  padding: 0;
  list-style: none;
}

.termin__bilder a {
  display: block;
  width: 10rem;
  max-width: calc(50vw - 3rem);
  border-radius: calc(var(--radius) / 2);
  overflow: hidden;
  box-shadow: 0 0.35rem 1rem rgba(51, 48, 44, 0.12);
  cursor: zoom-in;
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}

.termin__bilder a:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.6rem 1.5rem rgba(51, 48, 44, 0.18);
}

.termin__bild img {
  display: block;
  width: 100%;
  height: auto;
}

.termine-leer {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--flaeche);
  text-align: center;
}

.termine-abschnitt__mehr {
  margin: 2rem 0 0;
  text-align: center;
}

/* ---------- Anfrage (Abschluss vieler Seiten) ---------- */
.anfrage {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.anfrage--einzeln {
  grid-template-columns: 1fr;
}

.anfrage__seite {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(3.5rem, 7vw, 6rem) var(--rand);
  text-align: center;
  color: var(--text);
}

.anfrage__seite.welt-herztoene {
  background: var(--toene-rosa);
}

.anfrage__seite.welt-herzton {
  background: var(--ton-leinen);
}

.anfrage__seite p {
  max-width: 30rem;
  color: var(--text-leise);
}

.anfrage__titel {
  max-width: 26rem;
  font-style: italic;
}

.anfrage__seite .knopf {
  margin-top: 0.75rem;
}

/* ---------- Fußzeile ---------- */
.fuss {
  color: #FFFFFF;
  background: linear-gradient(90deg, var(--toene-oliv) 0 50%, var(--ton-umbra) 50% 100%);
  font-size: var(--groesse-klein);
}

.fuss a {
  text-decoration: none;
}

.fuss a:hover {
  text-decoration: underline;
}

.fuss :focus-visible {
  outline-color: #FFFFFF;
}

.fuss__doppelseite {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fuss__seite {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(var(--rand), 6vw, 6rem) 2rem;
}

.fuss__seite--herztoene {
  align-items: flex-end;
  text-align: right;
  color: #FDF1EF;
}

.fuss__seite--herzton {
  align-items: flex-start;
  color: #F3EDE4;
}

.fuss__marke {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fuss__seite--herztoene .fuss__marke {
  flex-direction: row-reverse;
}

.fuss__name {
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.15;
}

.fuss__name small {
  display: block;
  font-size: 0.9375rem;
  font-style: normal;
  opacity: 0.85;
}

.fuss__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2;
}

.fuss__leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding: 1.5rem var(--rand) 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
}

.fuss__urheber {
  margin: 0;
}

.fuss__allgemein {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Unterseiten: Seitenkopf ---------- */
.seitenkopf {
  background: var(--flaeche);
  overflow: hidden;
}

.seitenkopf__innen {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--breite);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--rand) clamp(3rem, 7vw, 6rem);
}

.seitenkopf__innen--ohne-bild {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(var(--breite-schmal) + 2 * var(--rand));
}

.seitenkopf__text .logo {
  margin-bottom: 1.5rem;
}

.seitenkopf__text .einleitung {
  max-width: 34rem;
}

.seitenkopf__bild {
  justify-self: center;
  width: min(100%, 24rem);
}

.seitenkopf__bild .bogen {
  aspect-ratio: 4 / 5;
}

/* Das Logo einer Welt als Siegel (Überblicksseiten HerzTöne und HerzTon): groß genug, dass auch
   „Stefanie Gosch“ und „Keramik“ lesbar sind; heller Ring und Schatten heben es von der Fläche ab.
   Auf dem Handy steht es über der Überschrift, ab 900 px liegt es auf der unteren Ecke des Fotos. */
.logo--siegel {
  box-shadow: 0 0 0 6px rgba(255, 253, 250, 0.75), 0 22px 40px -20px rgba(51, 48, 44, 0.65);
}

.seitenkopf__text .seitenkopf__logo {
  width: clamp(10rem, 44vw, 12.5rem);
  height: clamp(10rem, 44vw, 12.5rem);
  margin: 0.5rem 0 2rem 6px;
}

.seitenkopf__siegel {
  display: none;
}

@media (min-width: 900px) {
  .seitenkopf__text .seitenkopf__logo {
    display: none;
  }

  .seitenkopf__bild--mit-siegel {
    --siegel: clamp(11rem, 2rem + 12vw, 15rem);

    position: relative;
    margin-bottom: 2rem;
  }

  .seitenkopf__siegel {
    position: absolute;
    left: calc(var(--siegel) * -0.42);
    bottom: -2rem;
    display: block;
    width: var(--siegel);
    height: var(--siegel);
  }
}

/* ---------- Unterseiten: Inhalte ---------- */
.medienzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.medienzeile + .medienzeile {
  margin-top: clamp(4rem, 8vw, 7rem);
}

.medienzeile--gespiegelt .medienzeile__bild {
  order: 2;
}

.medienzeile__bild .foto,
.medienzeile__bild .bogen {
  max-height: 34rem;
}

.medienzeile__bild .bogen {
  aspect-ratio: 4 / 5;
  max-width: 24rem;
  margin-inline: auto;
}

.medienzeile__text {
  max-width: 34rem;
}

.medienzeile__text .knopf {
  margin-top: 0.5rem;
}

.abschnitt__kopf {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.abschnitt__kopf--mitte {
  margin-inline: auto;
  text-align: center;
}

.aufzaehlung {
  margin: 0 0 1.25em;
  padding-left: 1.1em;
}

.aufzaehlung li {
  margin-bottom: 0.35em;
  padding-left: 0.3em;
}

.aufzaehlung li::marker {
  content: '♥';
  color: var(--zierde);
  font-size: 0.75em;
}

/* Kacheln mit großem Bild (Teaser zu Unterseiten) */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.kachel {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.kachel__bild {
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
}

.kachel__bild.zeichnung {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--flaeche);
}

.kachel__bild.zeichnung img {
  width: auto;
  height: 100%;
}

.kachel h3 {
  margin-bottom: 0.25rem;
}

.kachel p {
  margin: 0;
  color: var(--text-leise);
}

.kachel:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Schritte (echte Abfolgen, z. B. Bestellung) */
.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.schritte li {
  counter-increment: schritt;
}

.schritte li::before {
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.9rem;
  border: 1.5px solid var(--zierde);
  border-radius: 50%;
  font-style: italic;
  font-size: 1.2rem;
}

.schritte h3 {
  margin-bottom: 0.3rem;
  font-size: 1.1875rem;
}

.schritte p {
  margin: 0;
  color: var(--text-leise);
}

/* Häufige Fragen */
.fragen {
  max-width: 46rem;
  margin-inline: auto;
}

.frage {
  border-bottom: 1px solid var(--linie);
}

.frage summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-size: 1.1875rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  content: '+';
  flex: none;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform var(--uebergang);
}

.frage[open] summary::after {
  transform: rotate(45deg);
}

.frage p {
  max-width: 40rem;
  color: var(--text-leise);
}

/* Hinweisbox */
.hinweisbox {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.hinweisbox > :last-child {
  margin-bottom: 0;
}

/* ---------- Galerien ---------- */
.galerie {
  columns: 3 16rem;
  column-gap: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie__eintrag {
  break-inside: avoid;
  margin: 0 0 clamp(1rem, 2.5vw, 2rem);
}

.galerie__eintrag a {
  display: block;
  text-decoration: none;
}

.galerie__eintrag .foto img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.galerie__eintrag a:hover .foto img {
  transform: scale(1.03);
}

.galerie__titel {
  margin: 0.55rem 0 0;
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

.galerie--zeichnungen {
  columns: 3 15rem;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}

.galerie--zeichnungen .galerie__eintrag {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.galerie--zeichnungen .galerie__eintrag a {
  transition: transform 0.4s ease;
}

.galerie--zeichnungen .galerie__eintrag a:hover {
  transform: translateY(-4px);
}

/* Großansicht (Lightbox) */
.grossansicht {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(30, 27, 24, 0.94);
  color: #FFFFFF;
}

.grossansicht::backdrop {
  background: rgba(30, 27, 24, 0.6);
}

.grossansicht__buehne {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.75rem, 6vw, 6rem) 1.25rem;
}

.grossansicht__bild {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.grossansicht__bild picture {
  max-width: 100%;
  max-height: 100%;
}

.grossansicht__bild img {
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  border-radius: 4px;
  object-fit: contain;
}

.grossansicht__unterschrift {
  margin: 1rem auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: var(--groesse-klein);
  color: rgba(255, 255, 255, 0.85);
}

.grossansicht__knopf {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font: 300 1.75rem/1 var(--schrift);
  cursor: pointer;
  transition: background-color var(--uebergang);
}

.grossansicht__knopf:hover {
  background: rgba(255, 255, 255, 0.24);
}

.grossansicht__knopf:focus-visible {
  outline-color: #FFFFFF;
}

.grossansicht__knopf--schliessen {
  top: 0.75rem;
  right: 0.75rem;
}

.grossansicht__knopf--zurueck {
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.grossansicht__knopf--weiter {
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- Lieder und Player ---------- */
.album {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.album + .album {
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--linie);
}

.album__cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--toene-hauch);
  box-shadow: 0 24px 50px -30px rgba(58, 63, 53, 0.55), 0 0 0 1px rgba(96, 102, 90, 0.08);
}

.album__cover .zeichnung {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
}

.album__cover .zeichnung img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.album__cover--foto {
  padding: 0;
  overflow: hidden;
}

.album__foto {
  width: 100%;
  height: 100%;
}

.album__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album__untertitel {
  margin: -0.4em 0 1em;
  font-size: var(--groesse-einleitung);
  font-style: italic;
  color: var(--text-leise);
}

.album__cover-titel {
  margin: 0.75rem 0 0;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  text-align: center;
  line-height: 1.1;
}

.album__art {
  margin-bottom: 0.25rem;
  font-style: italic;
  color: var(--text-leise);
}

.album__titel {
  font-size: var(--groesse-h2);
}

.titelliste {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.titel {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
}

.titel__nummer {
  font-style: italic;
  text-align: center;
  color: var(--text-leise);
}

.titel__abspielen {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--akzent);
  border-radius: 50%;
  background: transparent;
  color: var(--akzent);
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang);
}

.titel__abspielen svg {
  width: 0.9rem;
  height: 0.9rem;
}

.titel__abspielen:hover,
.titel--spielt .titel__abspielen {
  background: var(--akzent);
  color: var(--akzent-text);
}

.titel__symbol-pause {
  display: none;
}

.titel--spielt .titel__symbol-play {
  display: none;
}

.titel--spielt .titel__symbol-pause {
  display: block;
}

.titel__name {
  font-weight: 500;
}

.titel__dauer {
  font-size: var(--groesse-klein);
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.titel__laden {
  font-size: var(--groesse-klein);
}

/* Mit JavaScript ersetzt der Abspielknopf die Nummer */
.player-bereit .titel__abspielen {
  display: inline-flex;
}

.player-bereit .titel__nummer {
  display: none;
}

.lieder-bald {
  margin-top: 1.75rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.lieder-bald > :last-child {
  margin-bottom: 0;
}

.streaming {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.einbettung {
  margin-top: 1.75rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}

.einbettung iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Abspielleiste (erscheint beim ersten Abspielen) */
.abspielleiste {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 40;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem 1rem;
  width: min(calc(100% - 1.5rem), 44rem);
  padding: 0.75rem 1.1rem;
  border-radius: 1.25rem;
  background: var(--toene-oliv);
  color: #FFFFFF;
  box-shadow: 0 20px 50px -20px rgba(30, 33, 28, 0.6);
  transform: translateX(-50%);
}

.abspielleiste[hidden] {
  display: none;
}

.abspielleiste button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  cursor: pointer;
}

.abspielleiste button:hover {
  background: rgba(255, 255, 255, 0.26);
}

.abspielleiste button:focus-visible {
  outline-color: #FFFFFF;
}

.abspielleiste svg {
  width: 0.95rem;
  height: 0.95rem;
}

.abspielleiste .abspielleiste .abspielleiste__haupt:hover {
  background: #FFFFFF;
}

.abspielleiste__info {
  min-width: 0;
}

.abspielleiste__titel {
  margin: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abspielleiste__zeit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

.abspielleiste__regler {
  width: 100%;
  accent-color: var(--toene-rosa);
}

.abspielleiste .symbol-pause {
  display: none;
}

.abspielleiste--spielt .symbol-play {
  display: none;
}

.abspielleiste--spielt .symbol-pause {
  display: block;
}

/* ---------- Formular ---------- */
.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.kontakt__wege {
  display: grid;
  gap: 1rem;
}

.kontaktweg {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
}

.kontaktweg.welt-herztoene {
  background: var(--toene-rosa);
}

.kontaktweg.welt-herzton {
  background: var(--ton-leinen);
}

.kontaktweg h2 {
  margin-bottom: 0.3rem;
  font-size: 1.375rem;
  font-style: italic;
}

.kontaktweg p {
  margin: 0;
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

.formular {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: calc(var(--radius) * 1.5);
  background: var(--grund);
  color: var(--text);
  border: 1px solid var(--linie);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.formular__feld {
  margin-bottom: 1.25rem;
}

.formular__paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.formular label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.formular label small {
  font-weight: 400;
  color: var(--text-leise);
}

.formular input,
.formular select,
.formular textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--linie);
  border-radius: 0.6rem;
  background: #FFFFFF;
  color: var(--tinte);
  font: 400 1.0625rem/1.4 var(--schrift);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}

.formular select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2333302C' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
}

.formular textarea {
  min-height: 10rem;
  resize: vertical;
}

.formular input:focus,
.formular select:focus,
.formular textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
}

.formular__fehler {
  margin: 0.35rem 0 0;
  font-size: var(--groesse-klein);
  color: #9B2C1F;
}

.formular [aria-invalid='true'] {
  border-color: #9B2C1F;
}

.formular__hinweis {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 0.6rem;
  background: #FBE9E4;
  color: #6E2318;
}

.formular__datenschutz {
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

.formular__honigtopf {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular.welt-herztoene {
  background: var(--toene-hauch);
}

.formular.welt-herzton {
  background: var(--ton-hauch);
}

/* ---------- Über mich ---------- */
.lebensweg {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1.5px solid var(--linie);
}

.lebensweg li {
  position: relative;
  padding: 0 0 1.75rem 1.75rem;
}

.lebensweg li::before {
  content: '';
  position: absolute;
  left: -0.42rem;
  top: 0.55rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--zierde);
  box-shadow: 0 0 0 4px var(--grund);
}

.lebensweg li.welt-herztoene::before {
  background: var(--toene-altrosa);
}

.lebensweg li.welt-herzton::before {
  background: var(--ton-terrakotta);
}

.lebensweg__zeit {
  display: block;
  font-style: italic;
  color: var(--text-leise);
}

.lebensweg__ereignis {
  display: block;
  font-size: 1.1875rem;
}

.fotoreihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.fotoreihe figure {
  margin: 0;
}

.fotoreihe .foto {
  aspect-ratio: 4 / 5;
}

/* ---------- Rechtliches und Fehlerseite ---------- */
.rechtstext h2 {
  margin-top: 2.2em;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

.rechtstext h3 {
  margin-top: 1.6em;
  font-size: 1.1875rem;
}

/* Impressum: die zwei Wege zur eigenen Website als Anhänger – Titel sitzt wie gewohnt unter dem Loch */
.rechtstext .anhaenger__eintrag h3 {
  margin-top: 0;
}

.offen {
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  background: #FFF0B8;
  color: #5A4A00;
  font-style: italic;
}

.fehlerseite {
  text-align: center;
}

.fehlerseite__herz {
  width: 6rem;
  margin: 0 auto 1.5rem;
}

.fehlerseite__wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---------- Fotos: feste Formate ---------- */
.foto--quer {
  aspect-ratio: 3 / 2;
}

.foto--hoch {
  aspect-ratio: 4 / 5;
}

.medienzeile__bild--paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.medienzeile__bild--paar .foto {
  aspect-ratio: 3 / 4;
}

/* Das zweite Bild etwas tiefer – wie zwei lose auf den Tisch gelegte Abzüge */
.medienzeile__bild--paar > :nth-child(2) {
  margin-top: clamp(2rem, 5vw, 4rem);
}

.medienzeile__bild .zeichnung {
  display: flex;
  justify-content: center;
}

.zeichnung--mittel img {
  max-width: min(100%, 22rem);
}

.urheberhinweis {
  max-width: 40rem;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  text-align: center;
  font-size: var(--groesse-klein);
  font-style: italic;
  color: var(--text-leise);
}

/* ---------- HerzTöne: das Angebot als Konzertprogramm ---------- */
.programm {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.programm__bild {
  position: sticky;
  top: 2rem;
}

.programm__bild figure {
  max-width: 24rem;
  margin: 0;
}

.programm__bild .bogen {
  aspect-ratio: 4 / 5;
}

.programmliste {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.programmpunkt {
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--linie);
  scroll-margin-top: 1.5rem;
}

.programmpunkt h3 {
  margin-bottom: 0.35em;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  font-style: italic;
  font-weight: 350;
}

.programmpunkt p {
  margin-bottom: 0.6em;
  color: var(--text-leise);
}

.programmpunkt__link {
  font-weight: 500;
}

/* Über einen Link der Startseite angesprungen: Punkt kurz hervorheben */
.programmpunkt:target {
  background: linear-gradient(90deg, var(--flaeche), transparent 85%);
  padding-inline: 1rem;
  margin-inline: -1rem;
}

/* Einblicke: drei Bühnenmomente nebeneinander */
.einblicke {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr 1.25fr;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}

.einblicke__bild {
  height: clamp(13rem, 26vw, 25rem);
}

/* ---------- HerzTon: Anhänger, wie sie an handgemachter Keramik hängen ---------- */
.anhaenger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.anhaenger__eintrag {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3.4rem clamp(1.4rem, 2.5vw, 2rem) 1.9rem;
  background: var(--ton-mandel);
  color: var(--ton-umbra);
  /* abgeschrägte obere Ecken wie bei einem Kartonanhänger */
  clip-path: polygon(1.75rem 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% 100%, 0 100%, 0 1.75rem);
}

/* das Loch für die Schnur */
.anhaenger__eintrag::before {
  content: '';
  position: absolute;
  top: 1.2rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: -0.45rem;
  border-radius: 50%;
  background: var(--ton-leinen);
  box-shadow: inset 0 1px 2px rgba(76, 54, 45, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.anhaenger__eintrag h3 {
  margin-bottom: 0.4em;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-style: italic;
  font-weight: 400;
  text-align: center;
}

.anhaenger__eintrag p {
  flex: 1;
  color: #5A443A;
  text-align: center;
}

.anhaenger__eintrag a {
  align-self: center;
  font-weight: 500;
}

/* ---------- Über mich ---------- */
.ueber-mich {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}

.ueber-mich__gruss {
  margin-bottom: 0.5em;
  font-size: var(--groesse-handschrift);
  line-height: 1.1;
  color: var(--ton-terrakotta);
}

.ueber-mich__weg {
  position: sticky;
  top: 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.ueber-mich__weg-titel {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  font-style: italic;
}

.ueber-mich__weg .lebensweg li::before {
  box-shadow: 0 0 0 4px var(--flaeche);
}

/* ---------- Termine-Seite, Danke-Seite ---------- */
/* ---------- Sitemap als Baum ---------- */
/* Schriftgröße am Eintrag (nicht am Link), damit die Abzweige per em die Textmitte treffen */
.seitenbaum__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.seitenbaum__eintrag {
  font-size: var(--groesse-klein);
  line-height: 1.5;
}

.seitenbaum__eintrag > a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--text-leise);
  text-decoration: none;
}

.seitenbaum__eintrag > a:hover {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.seitenbaum__eintrag--seite {
  font-size: var(--groesse-text);
}

.seitenbaum__eintrag--seite > a {
  color: var(--text);
  font-weight: 500;
}

.seitenbaum__eintrag--welt {
  font-size: var(--groesse-h3);
}

.seitenbaum__eintrag--welt > a {
  color: var(--akzent);
}

.seitenbaum__eintrag--welt > a small {
  margin-left: 0.35rem;
  color: var(--text-leise);
  font-size: var(--groesse-klein);
  font-weight: 400;
  font-style: italic;
}

/* Äste: senkrechte Linie je Ebene, waagerechter Abzweig zu jedem Eintrag */
.seitenbaum__liste .seitenbaum__liste {
  margin-left: 0.55rem;
  padding-left: 1.5rem;
}

.seitenbaum__liste .seitenbaum__liste > .seitenbaum__eintrag {
  position: relative;
}

.seitenbaum__liste .seitenbaum__liste > .seitenbaum__eintrag::before,
.seitenbaum__liste .seitenbaum__liste > .seitenbaum__eintrag::after {
  content: '';
  position: absolute;
  left: -1.5rem;
  border-left: 1px solid var(--linie);
}

.seitenbaum__liste .seitenbaum__liste > .seitenbaum__eintrag::before {
  top: 0;
  width: 1.1rem;
  height: calc(0.25rem + 0.75em);
  border-bottom: 1px solid var(--linie);
  border-bottom-left-radius: 0.4rem;
}

.seitenbaum__liste .seitenbaum__liste > .seitenbaum__eintrag::after {
  top: 0;
  bottom: 0;
}

.seitenbaum__liste .seitenbaum__liste > .seitenbaum__eintrag:last-child::after {
  content: none;
}

/* Die Welten bekommen Luft und ihre eigene Farbe für Äste und Links */
.seitenbaum__eintrag--welt {
  margin-block: 0.75rem;
}

.seitenbaum > .seitenbaum__liste > .seitenbaum__eintrag + .seitenbaum__eintrag {
  margin-top: 0.5rem;
}

.seitenbaum__xml {
  margin-top: 3rem;
  color: var(--text-leise);
  font-size: var(--groesse-klein);
}

.termine__hinweis {
  margin-top: 2.5rem;
}

.termine__hinweis-titel {
  font-size: var(--groesse-h3);
  font-weight: 500;
}

/* Workshoptage bei LIVE: Daten als Liste, daneben der Flyer-Ausschnitt mit Großansicht */
.live-workshops__titel {
  margin-top: 1.5rem;
  font-size: var(--groesse-text);
  font-weight: 600;
}

.live-workshops__termine {
  margin: 0.75rem 0 1rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.live-workshops__termine li {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
}

.live-workshops__termine time {
  color: var(--text);
}

.live-workshops__termine span,
.live-workshops__angaben {
  color: var(--text-leise);
  font-size: var(--groesse-klein);
}

.live-workshops__flyer {
  margin: 1.75rem 0 0;
}

.live-workshops__flyer a {
  display: block;
  max-width: 22rem;
  margin: 0 auto;
  border-radius: calc(var(--radius) / 2);
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(76, 54, 45, 0.14);
  cursor: zoom-in;
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}

.live-workshops__flyer a:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 2rem rgba(76, 54, 45, 0.2);
}

.live-workshops__bild img {
  display: block;
  width: 100%;
  height: auto;
}

.live-workshops__flyer figcaption {
  margin-top: 0.6rem;
  text-align: center;
  color: var(--text-leise);
  font-size: var(--groesse-klein);
}

@media (min-width: 900px) {
  .live-workshops {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }

  .live-workshops__flyer {
    margin-top: 0;
  }

  .live-workshops__termine li {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }
}

/* Einzelbild in der Großansicht: kein Blättern */
.grossansicht--einzeln .grossansicht__knopf--zurueck,
.grossansicht--einzeln .grossansicht__knopf--weiter {
  display: none;
}

.danke {
  text-align: center;
}

.danke .knopfreihe {
  justify-content: center;
}

@media (max-width: 899px) {
  .programm,
  .ueber-mich {
    grid-template-columns: minmax(0, 1fr);
  }

  .programm__bild,
  .ueber-mich__weg {
    position: static;
  }

  .programm__bild figure {
    width: min(78vw, 20rem);
    margin-inline: auto;
  }

  .einblicke {
    grid-template-columns: 1fr 1fr;
  }

  .einblicke__bild--breit:first-child {
    grid-column: 1 / -1;
  }

  .einblicke__bild {
    height: clamp(11rem, 45vw, 18rem);
  }
}

/* ==========================================================================
   Kleinere Bildschirme (unter 900 px)
   ========================================================================== */
@media (max-width: 899px) {
  .kopf__navigation {
    grid-template-columns: 1fr auto;
    margin-inline: 0;
  }

  .wortmarke {
    grid-column: 1;
    grid-row: 1;
  }

  .kopf__liste {
    display: none;
  }

  .menueknopf {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    justify-self: end;
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem 0.5rem 0.75rem;
    border: 0;
    background: none;
    color: inherit;
    font: 400 1.0625rem/1 var(--schrift);
    cursor: pointer;
  }

  .kopf {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-right: var(--rand);
  }

  .menueknopf__striche,
  .menueknopf__striche::before,
  .menueknopf__striche::after {
    display: block;
    width: 1.35rem;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--uebergang), opacity var(--uebergang);
  }

  .menueknopf__striche {
    position: relative;
  }

  .menueknopf__striche::before,
  .menueknopf__striche::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .menueknopf__striche::before {
    top: -0.42rem;
  }

  .menueknopf__striche::after {
    top: 0.42rem;
  }

  .menueknopf[aria-expanded='true'] {
    position: fixed;
    top: 0.9rem;
    right: var(--rand);
    z-index: 60;
    color: var(--tinte);
  }

  .menueknopf[aria-expanded='true'] .menueknopf__striche {
    background: transparent;
  }

  .menueknopf[aria-expanded='true'] .menueknopf__striche::before {
    transform: translateY(0.42rem) rotate(45deg);
  }

  .menueknopf[aria-expanded='true'] .menueknopf__striche::after {
    transform: translateY(-0.42rem) rotate(-45deg);
  }

  .weltleiste__innen {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }

  .weltleiste__liste {
    order: 2;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .weltleiste__liste::-webkit-scrollbar {
    display: none;
  }

  .weltleiste__liste a {
    white-space: nowrap;
  }

  .brief__innen,
  .koenigstochter__innen,
  .werkstatt__innen,
  .seitenkopf__innen,
  .medienzeile,
  .album,
  .kontakt__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .brief__bild {
    width: min(70vw, 20rem);
    justify-self: center;
  }

  /* Einspaltig: Textblöcke mittig und nicht breiter als eine angenehme Lesezeile */
  .brief__text,
  .koenigstochter__text,
  .werkstatt__text {
    width: 100%;
    justify-self: center;
  }

  .brief__text {
    max-width: 36rem;
  }

  .medienzeile--gespiegelt .medienzeile__bild {
    order: 0;
  }

  .seitenkopf__bild {
    width: min(78vw, 20rem);
  }

  .album__cover {
    max-width: 20rem;
  }

  .zeichnungsband {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    scrollbar-width: thin;
  }

  .zeichnungsband li {
    flex: none;
    scroll-snap-align: center;
  }

  .fotoreihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ohne JavaScript: Navigation auch auf kleinen Bildschirmen direkt zeigen (statt Menüknopf) */
@media (max-width: 899px) and (scripting: none) {
  .menueknopf {
    display: none;
  }

  .kopf__navigation {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.75rem;
  }

  .kopf__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .wortmarke {
    grid-row: auto;
  }
}

/* ==========================================================================
   Handy und Tablet hochkant (unter 900 px): oben das Porträt, darunter beide Seiten in zwei
   schmalen Spalten, unten die Herzlinie als Girlande über den beiden Logo-Knöpfen.
   Abschnitte darunter einspaltig.
   ========================================================================== */
@media (max-width: 899px) {
  .doppelseite {
    /* Das Porträt deckt beide Innenspalten und den Falz; jede Seite hat eine Außen- und eine
       Innenspalte. Auf quer gehaltenen Handys begrenzt die Höhe das Porträt (svh). */
    --innen: min(30vw, 9.25rem, 23svh);
    --falz: clamp(0.75rem, 3vw, 1.75rem);
    --knopf: clamp(7.5rem, 36vw, 9.5rem);

    grid-template-columns:
      minmax(var(--rand), 1fr) minmax(0, 10rem) var(--innen)
      var(--falz)
      var(--innen) minmax(0, 10rem) minmax(var(--rand), 1fr);
    grid-template-areas:
      ". .      mitte  mitte mitte  .      ."
      ". titelL titelL .     titelR titelR ."
      ". textL  textL  .     textR  textR  ."
      ". linie  linie  linie linie  linie  .";
    grid-template-rows: auto auto auto auto;
    padding-block: clamp(0.5rem, 2vw, 1.5rem) 4.5rem;
  }

  .seite__titel {
    margin: clamp(1rem, 4vw, 1.75rem) 0 0.9rem;
    font-size: clamp(1.7rem, 7.4vw, 3rem);
  }

  .seite__text {
    max-width: none;
    margin: 0;
    font-size: clamp(0.875rem, 0.8rem + 0.45vw, 1.0625rem);
    line-height: 1.5;
    text-wrap: pretty;
  }

  /* Die Girlande: Welle, Herz und Becher bleiben ganz sichtbar, ihre Enden senken sich in die
     Logos. Linie und Logos teilen sich eine Rasterzeile; die Logos stehen unter den Enden der
     Girlande (Breite G): Enden bei 70 bzw. 288 von 358 → Abstand der Logomitte zur Mitte
     0,3045 · G, Höhe der Girlande 110/358 · G, die Logos greifen 1,5 rem in sie hinein. */
  .herzlinie,
  .seite--toene .weltknopf,
  .seite--ton .weltknopf {
    /* etwas schmaler als die Spalten, damit Logos und Beschriftungen im Rand bleiben */
    --girlande: min(100% - 1.5rem, 30rem);
  }

  .herzlinie {
    width: var(--girlande);
    justify-self: center;
    align-self: start;
    margin-top: 1.75rem;
    transform: none;
  }

  .herzlinie__grafik {
    display: none;
  }

  .herzlinie__grafik--handy {
    display: block;
    width: 100%;
  }

  .seite--toene .weltknopf,
  .seite--ton .weltknopf {
    justify-self: center;
    align-self: start;
    margin-top: calc(1.75rem + var(--girlande) * 0.3073 - 1.5rem);
  }

  .seite--toene .weltknopf {
    margin-left: 0;
    margin-right: calc(var(--girlande) * 0.609);
  }

  .seite--ton .weltknopf {
    margin-right: 0;
    margin-left: calc(var(--girlande) * 0.609);
  }

  /* Die Beschriftung ist breiter als das Logo – etwas kleiner, damit sie im Rand bleibt */
  .weltknopf__text {
    font-size: clamp(0.75rem, 0.6rem + 0.8vw, 0.875rem);
  }

  .angebote {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "titel"
      "toene"
      "ton";
    background: var(--papier);
  }

  .angebote__titel {
    padding-bottom: 2rem;
  }

  .angebote__seite {
    padding: 2.25rem var(--rand) 2.5rem;
    background: var(--grund);
  }

  .angebote__seite.welt-herztoene,
  .angebote__seite.welt-herzton {
    align-items: stretch;
  }

  .anfrage {
    grid-template-columns: minmax(0, 1fr);
  }

  .fuss {
    background: none;
  }

  .fuss__doppelseite {
    grid-template-columns: minmax(0, 1fr);
  }

  .fuss__seite {
    padding: 2.5rem var(--rand) 2rem;
  }

  .fuss__seite--herztoene {
    align-items: flex-start;
    text-align: left;
    background: var(--toene-oliv);
  }

  .fuss__seite--herztoene .fuss__marke {
    flex-direction: row;
  }

  .fuss__seite--herzton {
    background: var(--ton-umbra);
  }

  .fuss__leiste {
    background: #3A2A23;
    border-top: 0;
  }

  .termin {
    grid-template-columns: minmax(0, 1fr);
  }

  .termin__datum {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.6rem 0.9rem;
  }

  .termin__wochentage {
    margin: 0 0 0 auto;
  }

  .formular__paar {
    grid-template-columns: minmax(0, 1fr);
  }

  .titel {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  }

  .titel__dauer {
    display: none;
  }

  .abspielleiste {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .abspielleiste .abspielleiste__zurueck,
  .abspielleiste .abspielleiste__weiter {
    display: none;
  }

  .grossansicht__knopf--zurueck,
  .grossansicht__knopf--weiter {
    top: auto;
    bottom: 1rem;
    transform: none;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .herzlinie__pfad {
    animation: none;
    stroke-dashoffset: 0;
  }

  .herzlinie__fuellung {
    animation: none;
    opacity: 1;
  }
}