/* ==========================================================
   Leistungsseiten, Gestaltungsschicht

   Michael am 16.09.2026: "Da fehlt mir immer noch die estetik
   die moderne design komponente, lass den inhalt gleich aber
   denk den rest nochmal neu"

   WAS VORHER FEHLTE, als Diagnose statt als Geschmack:

   1. Kein Groessenkontrast. Ueberschrift, Text und Beschriftung
      lagen dicht beieinander. Ohne Sprung entsteht keine
      Ordnung, alles wirkt gleich wichtig.
   2. Kein Rhythmus. Ueberschrift, Absatz, Ueberschrift, Absatz,
      immer derselbe Takt ueber die ganze Seite.
   3. Keine Flaechenwechsel. Eine einzige Hintergrundfarbe von
      oben bis unten.
   4. Die Akzentfarbe kam praktisch nicht vor.
   5. Die Referenznamen, das staerkste Verkaufsargument, standen
      als kleinste Elemente der Seite da.

   WAS JETZT ANDERS IST

   - Nummerierte Abschnittsmarken mit Haarlinie. Das gibt der
     Seite eine Gliederung, die man beim Scrollen mitliest.
   - Echter Groessensprung: Ueberschrift bis 68px, Beschriftungen
     bei 11px in Versalien. Dazwischen ist Luft.
   - Das Bild laeuft bis an den rechten Fensterrand statt in
     einer Spalte zu sitzen. Asymmetrie statt Raster.
   - Ein Band ueber die volle Breite in hellerer Flaeche bricht
     die Monotonie.
   - Referenznamen gross und mit Punkt getrennt, nicht als
     kleine Pillen.

   Inhalt ist unveraendert. Michael: "lass den inhalt gleich".
   ========================================================== */

/* ---------- Bausteine ---------- */

.lp-voll{
  /* Ueber die volle Breite von <main>, das ohnehin die ganze Seite
     einnimmt.

     NICHT 100vw: Das zaehlt die Bildlaufleiste mit. Auf einer Seite
     mit Leiste ist 100vw breiter als der nutzbare Bereich, und es
     entsteht waagrechter Ueberlauf. Genau das ist am 16.09.2026
     passiert, gemessen mit scrollWidth gegen innerWidth. */
  width:100%;
  margin-inline:0;
}

/* ---------- Kopf ---------- */

.lp-hero{
  position:relative;
  margin-bottom:clamp(46px,7vw,96px);
}

.lp-hero-raster{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;
  gap:clamp(26px,4vw,60px);
}

.lp-haupt h1{
  font-size:clamp(34px, 5.4vw, 66px);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:800;
  margin:0 0 18px;
  text-wrap:balance;

  /* KEINE Silbentrennung hier, mit Absicht.
     Erster Versuch am 16.09.2026 setzte "hyphens:auto", um das
     lange Wort "Musikkomposition" abzufangen. Das funktionierte,
     hatte aber eine Nebenwirkung: Zusammen mit "text-wrap:balance"
     trennte der Browser auch Woerter, die vorher problemlos
     passten. Aus drei sauberen Zeilen "Konzertfotograf / und /
     Eventfotograf" wurden vier mit "Konzert-/fotograf".

     Geloest wird es stattdessen ueber die Schriftgroesse: Lange
     Titel bekommen die Klasse .lp-titel-lang, siehe unten. Bei
     50px passt "Musikkomposition" mit 434 px in die 440er Spalte,
     ganz ohne Trennung.

     ZWEITER FEHLVERSUCH, am selben Tag: "overflow-wrap:break-word"
     als Netz gegen Ueberlauf. Michael sah daraufhin bei 1440px und
     breiter ein einzelnes "n" auf eigener Zeile, aus
     "Musikkompositio-n". Gemessen und bestaetigt bei 1920, 1600
     und 1440, bei 1360 und darunter nicht.

     Ursache ist dieselbe Wechselwirkung wie bei der Trennung:
     "text-wrap:balance" darf mit break-word auch Woerter brechen,
     die problemlos passen, wenn dadurch die Zeilen gleichmaessiger
     werden. Das Netz hat also genau den Schaden angerichtet, den es
     verhindern sollte.

     Jetzt gar kein Umbruch im Wort. Gegen zu lange Titel schuetzt
     die Groessenregel unten, und der Generator warnt beim Bauen,
     wenn ein Wort rechnerisch zu breit wird. */
}
/* Ab 34 Zeichen Titel kleinere Schrift. 66px ergaeben sonst
   fuenf Zeilen, siehe Kommentar im Generator. 50px reichen, damit
   "Musikkomposition" ohne Trennung in die Spalte passt. */
.lp-haupt h1.lp-titel-lang{
  font-size:clamp(30px, 4.1vw, 50px);
  line-height:1.06;
  letter-spacing:-.03em;
}

.lp-haupt h1 span{
  display:block;
  margin-top:13px;
  font-size:clamp(15px,1.5vw,19px);
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--dim);
}

.lp-lead{
  font-size:clamp(16px,1.5vw,18.5px);
  line-height:1.62;
  color:var(--dim);
  max-width:48ch;
  margin:0 0 15px;
}
.lp-hero .lp-lead:last-of-type{ margin-bottom:26px; }

/* ---------- Claim ----------
   Die kurze, starke Zeile ueber dem Einstiegstext. Sie steht
   zwischen Ueberschrift und Fliesstext und braucht deshalb eine
   eigene Groesse: kleiner als die h1, deutlich groesser und heller
   als der Lead. Sonst waere sie entweder eine zweite Ueberschrift
   oder ginge im Text unter. */
.lp-claim{
  margin:0 0 20px;
  font-size:clamp(17px,1.9vw,23px);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.022em;
  color:var(--ink);
  max-width:34ch;
  text-wrap:balance;
}

/* Satz unter den Referenznamen. Bewusst zurueckhaltend, die Namen
   darueber sollen der Blickfang bleiben. */
.lp-ref-nach{ margin-top:20px; font-size:15px; }

/* Preis und Einzugsgebiet in einer Zeile, durch eine Haarlinie
   vom Text getrennt. Der Preis ist die Zahl, auf die zuerst
   jeder schaut, also darf er gross sein. */
.lp-fakten{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 22px;
  padding-top:20px;
  border-top:1px solid var(--kante);
}
.lp-preis{
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:clamp(24px,2.6vw,34px);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink);
}
.lp-preis::before{
  content:"ab";
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gruen);
}
.lp-fakten-ort{
  font-size:13.5px;
  line-height:1.5;
  color:var(--faint);
}

/* Bild bis an den rechten Fensterrand. Das ist der Bruch, der
   aus einem Raster eine Gestaltung macht. */
.lp-bild{
  margin:0;
  position:relative;
  /* Bis an den rechten Rand der Seite.

     "calc(50% - 50vw)" war falsch: Prozent bezieht sich hier auf die
     Rasterspalte, nicht auf die Seite. Das Bild lief dadurch 247 px
     ueber das Fenster hinaus, gemessen am 16.09.2026.

     Richtig ist der Seitenrand der Schale: Sie ist auf 900 px
     begrenzt, also bleibt links und rechts je (100vw - 900px) / 2.
     max() faengt schmale Fenster ab, sonst wuerde daraus ein
     positiver Rand. */
  margin-right:calc(-1 * max(0px, (100vw - 900px) / 2));
}
.lp-bild img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center 40%;
  /* Weiche Kante nach links, damit das Bild in die Seite
     uebergeht statt als Kasten daneben zu stehen.
     mask-image blendet das Bild SELBST aus. Ein Verlauf
     darueber muesste die Hintergrundfarbe kennen und waere
     nach jeder Aenderung falsch. */
  -webkit-mask-image:linear-gradient(100deg,
    transparent 0%, rgba(0,0,0,.30) 11%, rgba(0,0,0,.86) 30%, #000 50%);
  mask-image:linear-gradient(100deg,
    transparent 0%, rgba(0,0,0,.30) 11%, rgba(0,0,0,.86) 30%, #000 50%);
}

@media (max-width:900px){
  .lp-hero-raster{ grid-template-columns:1fr; gap:24px; }
  .lp-bild{ margin-inline:calc(-1 * var(--rand, 24px)); }
  .lp-bild img{
    aspect-ratio:16 / 9;
    -webkit-mask-image:linear-gradient(to top, transparent 0%, #000 16%);
    mask-image:linear-gradient(to top, transparent 0%, #000 16%);
  }
}

/* ==============================================================
   ABSCHNITTSRHYTHMUS

   Michael am 16.09.2026, nachdem Abschnitt 01 abgeschaltet war:
   "Achte bitte darauf, dass die Abstaende zwischen den anderen
    Abschnitten schoen clean sind. Das gefaellt mir Stand jetzt noch
    gar nicht."

   ER HATTE EINEN ECHTEN FEHLER GESEHEN, NICHT NUR EINEN GESCHMACK.

   Hier stand:  .lp-abschnitt:last-child{ margin-bottom:0; }

   Gemeint war damit der letzte Abschnitt DER SEITE. Getroffen hat es
   aber das letzte Kind JEDES Containers, und die Seite hat zwei
   .lp-schale-Huellen. Zwischen "Vom Event zum fertigen Film" und
   "Fuer wen wir bereits produziert haben" war der Abstand deshalb
   exakt 0 px, waehrend ueberall sonst 83 px standen. Auf dem Handy
   klebte die Trennlinie direkt unter dem letzten Satz.

   Gemessen ueber acht Abschnitte: 83, 83, 0, 83, 83, 83, 83.

   Die Regel ist ersatzlos raus. Ein gleichmaessiger Abstand ueberall
   ist richtiger als eine Ausnahme, die man an der falschen Stelle
   erwischt. Der Abstand vor der Fusszeile schadet nicht, er trennt
   sie sogar sauberer ab.

   DER RHYTHMUS SELBST

   Jeder Abschnitt beginnt mit einer duennen Linie. Der Abstand
   DARUEBER ist gross, der DARUNTER klein. Das ist Absicht: Die Linie
   gehoert optisch zur Ueberschrift, nicht zum Text davor. Wer
   scrollt, sieht dadurch Bloecke statt einer gleichmaessigen Reihe
   von Strichen.

     Text ... [grosser Abstand] ---Linie--- [kleiner] Ueberschrift

   Auf dem Handy war der grosse Abstand vorher 44 px und damit fast
   so klein wie der Zeilenabstand im Text. Jetzt 56 px, damit die
   Trennung auch auf schmalen Geraeten als Trennung liest.
   ============================================================== */

.lp-abschnitt{ margin-bottom:clamp(56px,7vw,92px); }

.lp-abschnitt-kopf{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:0 20px;
  padding-top:20px;
  border-top:1px solid var(--kante);
  margin-bottom:clamp(20px,2.6vw,32px);
}
.lp-nr{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--gruen);
  line-height:2;
  font-variant-numeric:tabular-nums;
}
.lp-haupt h2{
  font-size:clamp(22px,2.9vw,34px);
  line-height:1.13;
  letter-spacing:-.028em;
  font-weight:700;
  margin:0;
  text-wrap:balance;
}

.lp-text{
  font-size:16px;
  line-height:1.7;
  color:var(--dim);
  max-width:62ch;
  margin:0 0 14px;
}
.lp-text:last-child{ margin-bottom:0; }
.lp-text a{ color:var(--gruen); }

/* ---------- Leistungsliste als Haarlinien-Raster ----------
   Kaesten wirken wie Formularfelder. Haarlinien wirken wie
   Satz. Deshalb keine Rahmen um jede Zelle, nur Trennlinien. */
.lp-liste{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:0;
  max-width:none;
}
.lp-liste--zwei{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.lp-liste li{
  position:relative;
  padding:16px 18px 16px 30px;
  border-bottom:1px solid var(--kante);
  font-size:15.5px;
  line-height:1.5;
  color:var(--ink);
}
.lp-liste--zwei li:nth-child(odd){
  border-right:1px solid var(--kante);
  padding-right:28px;
}
.lp-liste--zwei li:nth-child(even){ padding-left:52px; }

/* Haken aus zwei Rahmenkanten. Kein Bild, keine Symbolschrift. */
.lp-liste li::before{
  content:"";
  position:absolute;
  left:4px;
  top:21px;
  width:5px;
  height:10px;
  background:none;
  border:solid var(--gruen);
  border-width:0 2px 2px 0;
  border-radius:0;
  transform:rotate(45deg);
}
.lp-liste--zwei li:nth-child(even)::before{ left:26px; }

@media (max-width:760px){
  .lp-liste--zwei{ grid-template-columns:1fr; }
  .lp-liste--zwei li:nth-child(odd){ border-right:0; padding-right:18px; }
  .lp-liste--zwei li:nth-child(even){ padding-left:30px; }
  .lp-liste--zwei li:nth-child(even)::before{ left:4px; }
}

/* ---------- Hervorgehobener Hinweis ----------
   Michael am 16.09.2026 zum Social-Media-Absatz: "ich wuerde das
   tatsaechlich bisschen hervorheben".

   Kein Kasten mit Hintergrundfarbe, sondern eine kraeftige Kante
   links. Das hebt hervor, ohne eine zweite Flaeche einzufuehren.
   Michael wollte im selben Zug beim Abschnitt 04 ausdruecklich
   KEINEN Farbwechsel mehr, das helle Band ist deshalb raus. */
.lp-hervor{
  margin:26px 0 0;
  padding:2px 0 2px 22px;
  border-left:2px solid var(--gruen);
  max-width:60ch;
}
.lp-hervor b{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gruen);
  margin-bottom:9px;
}
.lp-hervor p{
  margin:0;
  font-size:16.5px;
  line-height:1.62;
  color:var(--ink);
}

/* ---------- Referenzen gross ----------
   Die Namen sind das staerkste Argument der Seite. Vorher
   standen sie als kleinste Elemente da. */
.lp-refs{
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 0;
  font-size:clamp(18px,2.1vw,26px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.34;
  color:var(--ink);
}
.lp-refs li{ white-space:nowrap; }
.lp-refs li:not(:last-child)::after{
  content:"·";
  margin:0 13px;
  color:var(--gruen);
  font-weight:400;
}

/* ---------- Fragen ---------- */
.lp-fragen{ display:grid; gap:0; max-width:none; margin-top:18px; }

details.lp-frage{ border-bottom:1px solid var(--kante); }
details.lp-frage:first-of-type{ border-top:1px solid var(--kante); }

details.lp-frage > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:19px 2px;
  font-size:clamp(16px,1.7vw,19px);
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.016em;
  color:var(--ink);
  transition:color .15s ease;
}
details.lp-frage > summary::-webkit-details-marker{ display:none; }
details.lp-frage > summary::marker{ content:""; }
details.lp-frage > summary:hover{ color:var(--gruen); }

details.lp-frage > summary::after{
  content:"";
  flex:0 0 auto;
  width:9px; height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
  opacity:.5;
}
details.lp-frage[open] > summary::after{
  transform:rotate(-135deg) translateY(-2px);
  opacity:.9;
}
details.lp-frage[open] > summary{ color:var(--gruen); }

.lp-antwort{ padding:0 2px 22px; }
.lp-antwort p{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:var(--dim);
  max-width:64ch;
}
details.lp-frage > summary:focus-visible{
  outline:2px solid var(--gruen);
  outline-offset:3px;
}

/* ---------- Orte ---------- */
.lp-orte{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  font-size:14px;
  color:var(--dim);
}
.lp-orte li:not(:last-child)::after{
  content:"·";
  margin:0 9px;
  color:var(--kante);
}

/* ---------- Abschluss ---------- */
.lp-block{
  display:grid;
  gap:18px;
  justify-items:start;
}
.lp-knopf{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  border-radius:2px;
  background:var(--gruen);
  color:#07130C;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:transform .16s ease, filter .16s ease;
}
.lp-knopf:hover{ transform:translateY(-1px); filter:brightness(1.07); }
.lp-knopf::after{ content:"\2192"; font-weight:400; }

.lp-klein-hinweis{
  font-size:12.5px;
  line-height:1.6;
  color:var(--faint);
  max-width:64ch;
  margin:18px 0 0;
}
.lp-klein-hinweis a{ color:var(--dim); }

/* ---------- Andere Leistungen ---------- */
.lp-pillen{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lp-pillen a{
  display:inline-block;
  padding:9px 15px;
  border:1px solid var(--kante);
  border-radius:999px;
  font-size:13.5px;
  color:var(--dim);
  text-decoration:none;
  transition:border-color .16s ease, color .16s ease;
}
.lp-pillen a:hover{ border-color:var(--gruen); color:var(--ink); }

/* ---------- Weg ---------- */
.lp-weg{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--faint);
  margin:0 0 clamp(18px,2.6vw,32px);
}

/* ==========================================================
   WERKSCHAU AUF DEN LEISTUNGSSEITEN

   Michaels Pruefbericht am 16.09.2026:
   "Eine Videoproduktion zeigt auf jeder Verkaufsseite genau ein
    Bild und null Video. Danach kommen 2.500 bis 3.500 Pixel
    Textwand. Wer 'Hochzeitsvideo Nuernberg' sucht, will sehen
    wie eure Filme aussehen, nicht lesen."

   Deshalb direkt nach dem Kopf, vor der ersten Aufzaehlung.

   Die Bilder liegen in zwei Groessen vor, "-klein" mit 800 px
   und die volle Fassung mit 2000 px. Ausgeliefert wird ueber
   srcset, damit ein Handy nicht die grosse Datei zieht.
   ========================================================== */

.lp-werk{
  list-style:none;
  padding:0;
  margin:18px 0 0;

  /* SPALTENSATZ STATT RASTER.
     Michaels Nachmessung am 16.09.2026: Von den 28 verschiedenen
     Bildern sind ELF hochkant und eines quadratisch. In einer
     4:3-Kachel per object-fit:cover ueberleben von einem
     800x1200-Bild grob 18 Prozent der Hoehe. Sein Satz dazu: "Der
     Schlagzeuger wird zum Querstreifen."
     Und weiter: Das war wahrscheinlich auch der Grund, warum mir
     drei gleiche Schlagzeugbilder erst im Kontaktbogen auffielen,
     im Beschnitt sehen sie sich aehnlicher als im Original.

     Mit columns behaelt jedes Bild sein eigenes Verhaeltnis. Es wird
     nichts mehr beschnitten. Eine Medienproduktion, die ihre eigenen
     Bilder zurechtstutzt, argumentiert gegen sich selbst. */
  columns:3;
  column-gap:10px;
}
.lp-werk li{
  margin:0 0 10px;
  padding:0;
  border:0;
  /* Verhindert, dass ein Bild zwischen zwei Spalten zerrissen wird. */
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}
.lp-werk li::before{ content:none; }

.lp-werk img{
  display:block;
  width:100%;
  height:auto;
  border-radius:2px;
  background:var(--flaeche);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}
.lp-werk a{ display:block; overflow:clip; border-radius:2px; }
.lp-werk a:hover img{ transform:scale(1.035); filter:brightness(1.06); }
.lp-werk a:focus-visible{ outline:2px solid var(--gruen); outline-offset:3px; }

@media (max-width:820px){
  .lp-werk{ columns:2; column-gap:8px; }
  .lp-werk li{ margin-bottom:8px; }
}

/* ==============================================================
   AUF DEM HANDY ZWEI SPALTEN

   Michael hat am 16.09.2026 nachgemessen: Die Aftermovie-Seite war
   auf dem Handy 6.930 px lang, davon 2.451 px Galerie. Vorher war
   die GANZE Seite 2.941 px. Sein Satz trifft es: "Show don't tell
   war richtig, aber 2.451 px davon vorweg kippt ins Gegenteil."

   ER HAT DIE WISCHLEISTE VORGESCHLAGEN, ICH HABE SIE GEBAUT UND
   WIEDER AUSGEBAUT. Der Grund, nachgemessen und nicht vermutet:

   Eine waagrechte Leiste ist immer so hoch wie ihr hoechstes Bild.
   Der Bestand reicht von 2000x1240 (Verhaeltnis 0,62) bis 2000x3000
   (1,50), auf anderen Seiten bis 1,78. Steht ein liegendes Bild
   neben einem hochkanten, bleibt beim liegenden Leere:
     zentriert          335 px, oben und unten verteilt
     gemeinsame Kante   550 px, in einem Block
   Beide Fassungen sahen aus wie ein Ladefehler. Das laesst sich
   ohne Beschnitt nicht wegbekommen, und Beschnitt ist genau das,
   was wir eine Runde vorher abgeschafft haben.

   Zwei Spalten haben das Problem nicht: der Spaltensatz packt
   dicht, egal welches Format. Gemessen 1.086 px statt 2.451 px,
   also 56 Prozent weniger, ohne Leere und ohne Beschnitt.

   Die Wischleiste waere schoener gewesen. Sie funktioniert aber nur
   mit einheitlichen Bildformaten, und die haben wir nicht.
   ============================================================== */
@media (max-width:640px){
  .lp-werk{ columns:2; column-gap:8px; }
  .lp-werk li{ margin-bottom:8px; }
  /* Beim Antippen soll nichts zoomen, der Effekt ist fuer die Maus
     gedacht und bleibt auf dem Handy haengen. */
  .lp-werk a:hover img{ transform:none; filter:none; }
}


.lp-film{
  margin:18px 0 0;
  position:relative;
  border-radius:2px;
  overflow:clip;
  background:var(--tiefer);
}
.lp-film video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
.lp-film-hinweis{
  margin:10px 0 0;
  font-size:13px;
  color:var(--faint);
}

/* --------------------------------------------------------------
   HOERPROBEN auf den beiden Audioseiten

   Audiodesign und Werbejingle haben kein Bildmaterial. Sie waren
   damit die einzigen zwei Seiten, die nach dem Titelbild direkt in
   die Textwand liefen, also genau Michaels Befund vom 16.09.2026.
   Der Ton uebernimmt hier die Rolle, die woanders die Werkschau hat.

   Bewusst KEIN eigener Abspieler gebaut. Der eingebaute des Browsers
   kennt Tastatur, Vorlesesoftware und die Lautstaerke des Geraets.
   Ein nachgebauter kann das alles nicht und sieht nur kurz besser
   aus.
   -------------------------------------------------------------- */
.lp-proben{ margin-top:26px; }
.lp-probe{
  border-top:1px solid var(--kante);
  padding:18px 0 20px;
}
.lp-probe:last-child{ border-bottom:1px solid var(--kante); }
.lp-probe-kopf{
  display:flex; justify-content:space-between;
  align-items:baseline; gap:14px; margin-bottom:12px;
}
.lp-probe-titel{ font-family:var(--serif); font-size:24px; line-height:1.2; }
/* FARBEN AUS DEM DUNKLEN THEMA, nicht von der Startseite.
   Erster Anlauf hatte #6C665C und #D6D1C7 aus der hellen Startseite
   uebernommen. Auf schwarzem Grund war "OINZEE" dadurch kaum noch
   lesbar. Gesehen habe ich es erst im Bildschirmfoto, nicht im
   Quelltext, was denselben Punkt noch einmal macht. */
.lp-probe-wer{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}
/* 100 % statt einer festen Breite, sonst schiebt der Abspieler auf
   schmalen Geraeten die Seite waagrecht auf. Genau dieser Fehler ist
   heute schon einmal mit width:100vw passiert. */
/* color-scheme:dark schaltet den EINGEBAUTEN Abspieler des Browsers
   auf seine dunkle Fassung um. Damit passt er zur Seite, ohne dass
   ein eigener nachgebaut werden muss, der Tastatur und
   Vorlesesoftware nicht kennt. Eine Zeile statt hundert. */
.lp-probe audio{
  width:100%; height:36px; display:block;
  color-scheme:dark;
}
@media (max-width:420px){
  .lp-probe-titel{ font-size:20px; }
  .lp-probe-kopf{ flex-direction:column; gap:4px; }
}