/* ======================================================================
   Seite „So geht Liebe. So geht Kunst." — v17 (Kundinnen-Feedback, Runde 6)
   Abfolge: Creme (Buch) · Stein (Musik/Kunst/Poesie) · Werke (Tafeln)
   Braucht die style.css mit dem Block „Live-Veranstaltung“ (Stand 01.10.2026).
   ====================================================================== */
body { background: #fdf9ee; }

/* ---------- 1  Buch: Bücher-Panel der Startseite, auf Creme ---------- */
.sgl-buch { --bd-bg: #fdf9ee; }
.sgl-buch .bd__card { cursor: default; }
.sgl-buch .bd__card:hover { transform: none; }
/* Ein einzelnes Buch, keine Pfeile: die Reservierung für die Pfeile unter
   dem Stapel (Bücher-Sektion der Startseite) hier zurücknehmen */
@media (min-width: 901px) { .sgl-buch .bd__stage .bd__stack { margin-bottom: 0; } }
.sgl-lead { font-size: 1.125rem; line-height: 1.5; color: var(--bd-ink-soft); margin: -0.4rem 0 clamp(1.4rem, 2.2vw, 1.85rem); }

/* ---------- 2  Musik · Kunst · Poesie: Reiter + Stapel wie die Bücher ---------- */
/* Karten etwas grösser (Startseite: clamp(15rem, 23vw, 21rem)), gleiche
   Lage links, gleiches Format 4:5. Die Karte dahinter wie bei den Büchern:
   86 % gross und ragt 12 % der Kartenbreite rechts hervor (1.12 − .86). */
.sgl-mkp { --bd-bg: #ebe9df; --bd-cover-w: clamp(17rem, 26.5vw, 24rem); }
.sgl-mkp .bd__stack { height: calc(var(--bd-cover-w) * 1.25); }
.sgl-mkp .bd__card { --bd-s: .86; --bd-tx: 26%; }
@media (min-width: 901px) {
  .sgl-mkp .bd__stage .bd__nav { margin-top: calc(var(--bd-cover-w) * 1.25 + var(--bd-nav-gap)); }
}
/* Kartengrund = Grund des Abschnitts (Stein #ebe9df) — die Bilder sind
   darauf gerechnet (recolor2.py / mkcards.py: Noten freigestellt, Handschrift
   Pixel ÷ Creme × Grund, Collage nur Grund + Schatten umgerechnet).
   Damit sich die Karte trotzdem abhebt: feine Haarlinie + Schatten. Die
   Karte dahinter bleibt scharf (kein Weichzeichner), nur blasser und
   kleiner; die vordere wirft ihren Schatten darauf. */
.sgl-mkp .bd__card img {
  border-radius: 4px;   /* wie die Tafeln darunter (.tf-tafel) */
  outline: 1px solid rgba(61, 74, 90, .2); outline-offset: -1px;
  filter: drop-shadow(0 2px 4px rgba(43,43,38,.10)) drop-shadow(0 22px 38px rgba(43,43,38,.22));
}
.sgl-mkp .bd__card[data-pos="1"] { opacity: .72; filter: none; }
.sgl-mkp .bd__card[data-pos="1"] img { filter: drop-shadow(0 14px 24px rgba(43,43,38,.14)); }
@media (hover: hover) { .sgl-mkp .bd__card[data-pos="1"]:hover { opacity: .9; filter: none; } }
.sgl-mkp .bd__card[data-pos="0"]:hover { transform: none; }   /* Quelle bleibt bündig unter den Noten */
.sgl-credit {
  position: absolute; z-index: 5; left: 0; top: 81%; width: var(--bd-cover-w);
  text-align: center; font-size: clamp(.6875rem, .8vw, .75rem); line-height: 1.35; color: var(--bd-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.sgl-credit:hover { text-decoration-thickness: 2px; }
.sgl-credit:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 3px; border-radius: 2px; }
.sgl-mkp:not([data-active="0"]) .sgl-credit { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.sgl-mkp[data-active="0"] .sgl-credit { transition-delay: .45s, 0s; }
.sgl-credit-m { display: none; }
/* Link zur Künstlerin unter „Collagen von Gabriele A. Pühringer“ (06.10.2026):
   klein, in der Farbe des Titels. */
/* Am Rechner: dicht unter dem Titel (dessen unterer Rand wird zurückgenommen),
   danach derselbe Abstand zum Text wie sonst unter einem Titel. */
.bd__meta.sgl-artlink {
  --gap: clamp(1.4rem, 2.4vw, 2rem);   /* = unterer Rand von .bd__title */
  color: var(--bd-ink); font-size: .8125rem; margin: calc(.5rem - var(--gap)) 0 var(--gap);
}
.sgl-artlink a { display: inline-block; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sgl-mkp .bd__title { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
.sgl-mkp .bd__quote + .bd__quote { margin-top: 0; }

/* runder Play-Knopf der Tafeln */
.tf-play { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--bd-ink, #3d4a5a); background: transparent; color: var(--bd-ink, #3d4a5a); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .35s cubic-bezier(.16,1,.3,1), color .35s cubic-bezier(.16,1,.3,1); }
.tf-play:hover, .is-playing > .tf-play, .is-playing .tf-play { background: #3d4a5a; color: #f2ecd9; }
.tf-play svg { width: 10px; height: 10px; }
.tf-play .i-pause, .is-playing .i-play { display: none; }
.is-playing .i-pause { display: block; }

/* ---------- 3  Die Werke: Drei Tafeln ---------- */
/* Grund = Creme wie der Buch-Abschnitt. ALLE Tafeln Stein #ebe9df =
   Grund von „Drei Ausdrucksformen". Die Collagen-Bilder sind auf genau
   diesen Ton gerechnet — ändert sich die Tafelfarbe, Bilder neu erzeugen. */
.tf { --tf-ground: #fdf9ee; --tf-tafel: #ebe9df; --bd-bg: var(--tf-ground); }
.tf-rights { max-width: 44rem; margin: clamp(3rem, 5vw, 4.5rem) 0 0; padding-top: 1.1rem; border-top: 1px solid var(--bd-rule); font-size: .75rem; line-height: 1.65; color: var(--bd-ink-soft); text-wrap: pretty; }
.tf__sub { font-size: .8125rem; letter-spacing: .04em; color: var(--bd-ink-soft); padding-bottom: .55rem; }

.tf-list { display: grid; gap: clamp(2.5rem, 4.5vw, 3.5rem); }
.tf-list > * { min-width: 0; }
.tf-werk { margin: 0; }
.tf-dots { display: none; }
.tf-title { margin: 0 0 .8rem; font-family: var(--font-hero-text); font-weight: 600; font-size: .75rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .12em; color: var(--bd-ink-soft); }
.tf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* ALLE Tafeln gleich gross (4:5). Passt ein Gedicht selbst zweispaltig
   nicht, hebt das Script die Höhe aller Tafeln gemeinsam an. */
.tf-tafel { position: relative; overflow: hidden; background: var(--tf-tafel); border-radius: 4px; aspect-ratio: 4 / 5; height: var(--tile-h, auto); transition: background .5s ease, transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s cubic-bezier(.16,1,.3,1); }
.tf-list.is-sized .tf-tafel { aspect-ratio: auto; }
/* Hub + Schatten nur am Rechner; am Telefon (auch in der Vorschau mit Maus) ruhig */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) { .tf-tafel:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(12,17,24,.35); } }

/* Kunst: Papier und Collage in Originalfarben; nur der fotografierte Grund
   und der Schatten sind auf die Tafelfarbe umgerechnet (kein Blend im Browser) */
.tf-kunst { display: grid; place-items: center; padding: 10%; }
.tf-kunst img { width: 100%; height: 100%; object-fit: contain; }

/* Poesie: Zeilen exakt wie auf freiewortkunst.com — jede Zeile, jede
   Leerzeile, die Spalten bei „sei vielmals bedankt“. Leerzeile = eine
   volle Zeile (wie dort), Zeilenabstand 1.42 (dort 13/18.3 px; vorher 1.6
   plus .85em Strophenabstand). Der Block steht mittig in der Tafel. */
.tf-poesie { display: grid; place-items: center; padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.tf-poem { font-size: var(--pfs, .875rem); line-height: 1.42; text-align: left; color: var(--bd-ink); width: max-content; max-width: 100%; }
.tf-poem.is-2col { display: flex; gap: 2em; align-items: flex-start; }
.tf-poesie--2col { padding-inline: 1rem; }
.tf-pcol { min-width: 0; }
.tf-l { display: block; white-space: nowrap; }

/* Musik: Porträt als Objekt mittig, Etikett unten; Linie = Fortschritt */
/* Foto grösser (62 % statt 56 % der Tafelbreite) und auf der Höhe des
   Collagen-Papiers daneben: dessen Mitte liegt bei 48,7 % der Tafelhöhe.
   Wird die Tafel höher (lange Gedichte), wandert beides gleich mit. */
.tf-musik { container-type: inline-size; }
.tf-photo { position: absolute; left: 50%; top: calc(48.7% - 31cqw); width: 62cqw; translate: -50% 0; }
.tf-photo img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; filter: grayscale(1) contrast(1.03); }
.tf-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px 16px; }
.tf-progress { position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: var(--bd-rule); }
.tf-progress i { position: absolute; left: 0; top: -.5px; height: 2px; width: 0; background: var(--bd-ink); border-radius: 2px; }
.tf-lrow { display: flex; align-items: center; gap: 12px; }
.tf-ltext { flex: 1; min-width: 0; }
.tf-name { font-family: var(--font-hero); font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--bd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-meta { margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--bd-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-meta a, .tf-more { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tf-more { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tf-meta a:hover, .tf-more:hover { color: var(--bd-ink); }
.tf-more:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 2px; border-radius: 2px; }
.tf-time { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--bd-ink-soft); white-space: nowrap; }
.tf-progress { cursor: pointer; }
.tf-progress::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 17px; }
.is-missing .tf-play { opacity: .35; cursor: default; }
.tf-musik .tf-play { width: 38px; height: 38px; }

/* Einblenden */
.tf-rv { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.tf-rv.in { opacity: 1; transform: none; }
.tf-row > .tf-rv:nth-child(2) { transition-delay: .08s; }
.tf-row > .tf-rv:nth-child(3) { transition-delay: .16s; }

/* ---------- Pop-up „mehr zum Musiker“ ----------
   Wie das Impressum-Fenster der Startseite (.lg in style.css): Stein,
   runder ✕, Seite dahinter stark weich. Telefon: Blatt von unten. */
.sgl-bio {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: clamp(1rem, 5vh, 3.5rem) 1rem; border: 0; background: transparent;
  color: #3d4a5a; font-family: var(--font-hero-text); overflow: hidden;
}
.sgl-bio[open] { display: grid; place-items: center; }
.sgl-bio::backdrop {
  background: rgba(33, 40, 49, .42);
  -webkit-backdrop-filter: blur(20px) saturate(.85); backdrop-filter: blur(20px) saturate(.85);
  animation: lg-fade .45s var(--ease-out) both;
}
html.is-bio-open { overflow: hidden; }
.sgl-bio__box {
  position: relative; width: min(100%, 46rem); max-height: calc(100svh - 2 * clamp(1rem, 5vh, 3.5rem));
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 4.5vw, 3.5rem) clamp(2.25rem, 4.5vw, 3.5rem);
  background: #ebe9df; border-radius: 6px;
  box-shadow: 0 40px 90px -30px rgba(12, 17, 24, .55), 0 2px 6px rgba(12, 17, 24, .08);
  animation: lg-rise .6s var(--ease-out) both;
}
.sgl-bio.is-closing::backdrop { animation: lg-out .26s ease-in both; }
.sgl-bio.is-closing .sgl-bio__box { animation: lg-rise-out .26s ease-in both; }
.sgl-bio__close {
  position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(61, 74, 90, .4); background: transparent; color: #3d4a5a;
  display: grid; place-items: center; cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.sgl-bio__close svg { width: 13px; height: 13px; }
.sgl-bio__close:hover { background: rgba(61, 74, 90, .08); border-color: #3d4a5a; }
.sgl-bio__close:focus-visible { outline: 2px solid #3d4a5a; outline-offset: 3px; }
.sgl-bio__kicker { margin: 0 0 .7rem; font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: #525d64; }
.sgl-bio__name {
  margin: 0 3rem clamp(1.25rem, 2.5vw, 1.75rem) 0; font-family: var(--font-hero); font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.08; letter-spacing: -.015em; color: #3d4a5a;
}
.sgl-bio__text { margin: 0; font-size: 1rem; line-height: 1.7; color: #3d4a5a; text-wrap: pretty; }
@media (max-width: 760px) {
  .sgl-bio { padding: 0; }
  .sgl-bio[open] { place-items: end stretch; }
  .sgl-bio__box { width: 100%; max-height: calc(100svh - 2.75rem); border-radius: 18px 18px 0 0; padding: 1.75rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px)); animation: lg-sheet .55s var(--ease-out) both; }
  .sgl-bio.is-closing .sgl-bio__box { animation: lg-sheet-out .26s ease-in both; }
  .sgl-bio__close { top: .75rem; right: .75rem; }
  .sgl-bio__text { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sgl-bio::backdrop, .sgl-bio__box, .sgl-bio.is-closing .sgl-bio__box, .sgl-bio.is-closing::backdrop { animation: none; }
}

@media (max-width: 900px) {
  .tf-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--bd-edge)); padding: 0 var(--bd-edge) .25rem; scrollbar-width: none; }
  .tf-row::-webkit-scrollbar { display: none; }
  .tf-row > .tf-tafel { flex: 0 0 88%; scroll-snap-align: center; }
  .tf-row > .tf-rv { transition-delay: 0s !important; }
  /* Wisch-Hinweis: drei Punkte unter der Reihe, der aktuelle als Strich */
  .tf-dots { display: flex; align-items: center; gap: 2px; margin-top: .55rem; }
  .tf-dots button { display: grid; place-items: center; width: 22px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tf-dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--bd-ink); opacity: .25; transition: width .35s var(--bd-ease), opacity .35s var(--bd-ease); }
  .tf-dots [aria-current] i { width: 18px; opacity: .8; }
  .tf-dots button:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: -2px; border-radius: 4px; }
  .tf-swipe { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font-size: .75rem; letter-spacing: .04em; color: var(--bd-ink-soft); transition: opacity .5s ease; }
  .tf-swipe svg { width: 22px; height: 10px; animation: tf-swipe 1.8s ease-in-out infinite; }
  .tf-swiped .tf-swipe { opacity: 0; }
  @keyframes tf-swipe { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
  @media (prefers-reduced-motion: reduce) { .tf-swipe svg { animation: none; } }
  .tf-poesie { padding: 1.5rem 1.1rem; }
  .tf-poem.is-2col { gap: 1.5em; }
  .sgl-lead { margin-top: 0; }
  /* Telefon (06.10.2026, Kundin) ------------------------------------------
     „Buchanfrage per Mail“: schmaler (24 statt 48 px Polster je Seite). */
  .sgl-buch .bd__btn { padding-inline: 1.5rem; }
  /* Noten 48 px höher, damit die letzte Zeile nicht im Verlauf liegt. Das Bild
     füllt sein Feld genau (4:5), deshalb verschiebt eine Länge in
     object-position es, ohne etwas zu skalieren; der frei werdende Streifen
     unten zeigt den Abschnittsgrund = Kartengrund (Stein). */
  .sgl-mkp .bd__panel:nth-child(1) .bd__mcover { object-position: 50% -3rem; }
  /* Quelle klein und mittig direkt unter den Noten, im Bild. 67.5 % = Unterkante
     der Noten in der Bilddatei. Farbe eine Stufe dunkler als --bd-ink: an der
     Stelle graut der Verlauf den Grund schon ein (5.3:1 statt 4.2:1). */
  .sgl-credit-m {
    display: block; position: absolute; z-index: 1; left: 0; right: 0; top: calc(67.5% - 1.5rem);
    margin: 0; text-align: center; font-size: .6875rem; line-height: 1.35; color: #2f3a47;
  }
  .sgl-credit-m a { display: inline-block; padding: .6rem .75rem; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  /* Collage 16 px höher. */
  .sgl-mkp .bd__panel:nth-child(2) .bd__mcover { object-position: 50% -1rem; }
  /* Link zur Künstlerin unter dem Titel, in der Farbe des Titels. Die
     Grundlinie steht so weit über der Bildkante wie die Titelzeile bei
     „Poesie“ (27,8 px) — dafür der kleine negative Rand unten. */
  .bd__cap .bd__meta.sgl-artlink { order: 3; color: #f4f1e6; font-size: .8125rem; margin: 0 0 -.457rem; }
  .sgl-artlink a { padding: .1rem 0 .45rem; }
}