/*
 * Feinschliff Mobil und Desktop.
 *
 * Lädt nach seiten.css. Hier stehen nur Korrekturen, die aus dem Test an
 * echten Breiten (390, 768, 1440) entstanden sind — jede mit Begründung.
 */

/* ---------------------------------------------------------------------
 * 1 · Antwortfelder der Neigungsliste waren 15 px hoch.
 *     Für den Finger zu klein; unter 44 px trifft man daneben.
 * ------------------------------------------------------------------ */
.dv-liste__punkt{min-height:44px}

/* ---------------------------------------------------------------------
 * 2 · Auf dem Handy fehlten die Spaltenüberschriften der Liste.
 *     Drei gleich aussehende Kästchen ohne „Ja / Neugierig / Nein“.
 *     Jetzt sichtbar und beim Scrollen klebend, damit sie bei einer
 *     langen Liste nicht aus dem Bild laufen.
 * ------------------------------------------------------------------ */
.dv-liste__kopf{
  display:grid;
  grid-template-columns:1fr repeat(3,52px);
  gap:4px;
  position:sticky;
  top:98px;
  z-index:5;
  background:var(--grund);
  padding:10px 0 8px;
  border-bottom:1px solid var(--linie);
  font-size:8px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold);
  text-align:center;
}
.dv-liste__zeile{grid-template-columns:1fr repeat(3,52px);gap:4px}

/* ---------------------------------------------------------------------
 * 3 · Formularfelder hatten 14 px. iOS zoomt beim Antippen automatisch
 *     hinein, sobald ein Feld unter 16 px liegt.
 * ------------------------------------------------------------------ */
.dv-feld input,
.dv-feld select,
.dv-feld textarea{font-size:16px}

/* ---------------------------------------------------------------------
 * 4 · Fünf Karten in zwei Spalten liessen die letzte allein stehen.
 *     Die ungerade letzte Karte nimmt jetzt die volle Breite.
 * ------------------------------------------------------------------ */
.dv-karten > :last-child:nth-child(odd){grid-column:1 / -1}

/* ---------------------------------------------------------------------
 * 5 · Langer Fliesstext mittig ist auf schmalen Bildschirmen schwer zu
 *     lesen — die Zeilenanfänge springen. Links ausrichten.
 * ------------------------------------------------------------------ */
.dv-sessions-vorspann{text-align:left !important}
.dv-sessions-vorspann p{margin-left:0}

/* ---------------------------------------------------------------------
 * 6 · Rechtliches in der Fusszeile: echte Liste mit Trennstrichen.
 * ------------------------------------------------------------------ */
.dv-fuss__recht{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:0;list-style:none;margin:0;padding:0;
}
.dv-fuss__recht li{display:inline-flex;align-items:center}
.dv-fuss__recht li + li::before{
  content:"|";margin:0 10px;color:rgba(201,168,99,.45);
}
.dv-fuss__recht a{color:var(--gedaempft)}
.dv-fuss__recht a:hover{color:var(--gold)}
.dv-fuss__unten{gap:14px 18px}

/* ---------------------------------------------------------------------
 * 7 · Tribut: bei zweizeiliger Bezeichnung rutschte der Betrag nach oben.
 * ------------------------------------------------------------------ */
.dv-preis{align-items:end}
.dv-preis dd{white-space:nowrap}

/* ---------------------------------------------------------------------
 * 8 · Register: die Ziffernspalte nahm auf dem Handy zu viel Platz.
 * ------------------------------------------------------------------ */
@media (max-width:900px){
  .dv-register__zeile{grid-template-columns:28px 1fr;gap:4px 10px;padding:22px 0}
  .dv-register__nr{font-size:12px;letter-spacing:.16em;padding-top:4px}
  .dv-kopfband{padding-top:34px;padding-bottom:26px}
  .dv-kopfband__titel{font-size:clamp(26px,6.6vw,34px)}
  .dv-abschnitt{padding-top:40px;padding-bottom:56px}
  .dv-signatur{padding-top:52px;padding-bottom:52px}
  .dv-hinweisband{margin-top:34px}
}

/* Ab hier wieder wie entworfen ----------------------------------------- */
@media (min-width:901px){
  .dv-liste__kopf{
    grid-template-columns:1fr repeat(3,56px);
    gap:6px;
    position:static;
    background:none;
    padding:0 0 10px;
    border-bottom:0;
    font-size:9px;
    letter-spacing:.2em;
  }
  .dv-liste__zeile{grid-template-columns:1fr repeat(3,56px);gap:6px}
  .dv-feld input,.dv-feld select,.dv-feld textarea{font-size:14px}
  .dv-sessions-vorspann{text-align:center !important}
  .dv-fuss__recht{justify-content:flex-start}
}

/* ---------------------------------------------------------------------
 * 9 · Studio steht jetzt auf „Über mich“, die Fragen auf „Anfrage“.
 *     Beide Seiten hatten vorher keine eigene Unterseite mehr nötig.
 * ------------------------------------------------------------------ */
.dv-studio-zwei{display:grid;gap:26px}
.dv-studio-zwei .dv-fakten{margin-top:0}
.dv-faq-block{margin-top:56px;padding-top:8px;border-top:1px solid var(--linie)}
.dv-faq-block .dv-linie{margin-top:34px}
@media (min-width:901px){
  .dv-studio-zwei{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
}

/* ---------------------------------------------------------------------
 * 10 · Katalog im Reels-Aufbau.
 *      Vorher Masonry: jede Kachel in ihrer eigenen Hoehe. Das liest
 *      sich wie ein Fotoalbum, nicht wie ein Profil. Jetzt alle Kacheln
 *      gleich hoch im Hochformat 9:16, dichte Fugen — der Blick laeuft
 *      zeilenweise durch, wie man es von Instagram und TikTok kennt.
 *      object-fit beschneidet, deshalb vertraegt das Raster auch die
 *      Querformate ohne Loecher.
 * ------------------------------------------------------------------ */
.dv-raster{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
}
.dv-kachelbild{margin:0;position:relative}
.dv-kachelbild a{display:block;position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--karte)}
.dv-kachelbild img{width:100%;height:100%;object-fit:cover}
.dv-kachelbild[hidden]{display:none}
@media (min-width:768px){
  .dv-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}
@media (min-width:1200px){
  .dv-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1600px){
  .dv-raster{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ---------------------------------------------------------------------
 * 10a · Schlagwort in der Kachel, unten links. Eigene Klasse, weil
 *       .dv-marke schon der Schriftzug im Kopf ist.
 *       Dunkler Balken statt reiner Schrift: ueber hellen Bildern waere
 *       das Wort sonst nicht zu lesen.
 * ------------------------------------------------------------------ */
.dv-kachelwort{
  position:absolute;left:0;bottom:0;max-width:calc(100% - 46px);
  display:flex;gap:6px;
  padding:5px 9px 5px 8px;
  background:linear-gradient(to top,rgba(11,9,9,.86),rgba(11,9,9,.5));
  color:var(--gold-hell);
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;line-height:1.2;
  white-space:nowrap;overflow:hidden;
  pointer-events:none;
}
.dv-kachelwort span + span::before{content:"·";margin-right:6px;opacity:.5}
/* Auf dem Telefon ist die Kachel zu schmal fuer drei Woerter — ab dem
   dritten bleibt es beim Filter, in der Kachel steht es nicht mehr. */
@media (max-width:767px){
  .dv-kachelwort span:nth-child(n+3){display:none}
}
@media (min-width:901px){
  .dv-kachelwort{font-size:10px;padding:6px 11px 6px 10px}
}

/* ---------------------------------------------------------------------
 * 10b · Filterleiste.
 *       Auf dem Telefon eine Zeile, die man seitlich schiebt; die
 *       Bildlaufleiste selbst bleibt unsichtbar. Ab Tablet umbrechend.
 * ------------------------------------------------------------------ */
.dv-filter{
  display:flex;gap:6px;margin:0 0 14px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.dv-filter::-webkit-scrollbar{display:none}
.dv-filter__knopf{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:0 14px;
  border:1px solid var(--linie);background:transparent;color:var(--gedaempft);
  font-family:var(--text-schrift);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  transition:color 400ms var(--kurve),border-color 400ms var(--kurve),background 400ms var(--kurve);
}
.dv-filter__knopf:hover{color:var(--gold-hell);border-color:var(--linie-stark)}
.dv-filter__knopf.ist-aktiv{
  color:var(--grund);background:var(--gold);border-color:var(--gold);
}
.dv-filter__zahl{
  font-size:9px;letter-spacing:.08em;opacity:.65;font-variant-numeric:tabular-nums;
}
/* Die Medienleiste steht oben, ueber den Schlagworten: erst Bild oder
   Video, dann wonach. Bewusst kleiner gesetzt, damit die beiden Zeilen
   nicht gleich laut sind. */
.dv-filter--art{margin-bottom:9px}
.dv-filter--art .dv-filter__knopf{
  min-height:32px;padding:0 12px;font-size:9px;border-color:rgba(201,168,99,.1);
}
.dv-filter--art .dv-filter__knopf.ist-aktiv{
  background:transparent;color:var(--gold-hell);border-color:var(--linie-knopf);
}
/* Was die andere Achse gerade leer laesst, tritt zurueck. */
.dv-filter__knopf.ist-leer{opacity:.35}
.dv-filter__knopf.ist-leer.ist-aktiv{opacity:1}
.dv-filter__leer{
  margin:40px 0 0;text-align:center;color:var(--gedaempft);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
.dv-filter__leer[hidden]{display:none}
@media (min-width:768px){
  .dv-filter{flex-wrap:wrap;overflow:visible;gap:8px;margin-bottom:18px}
  .dv-filter__knopf{min-height:40px;padding:0 17px}
}

/* ---------------------------------------------------------------------
 * 11 · Videos in der Galerie.
 *      Die Dateien sind nur 576 px breit (WhatsApp-Kompression). Im
 *      Lichtkasten deshalb begrenzen, sonst werden sie hochgerechnet
 *      und matschig. Geladen wird erst beim Abspielen — die Seite zieht
 *      beim Aufruf keine einzige Videodatei, nur die Vorschaubilder.
 * ------------------------------------------------------------------ */
.dv-kachelbild--video a{position:relative;display:block}
.dv-kachelbild__leer{display:block;aspect-ratio:9/16;background:var(--karte)}
.dv-abspielen{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linie-knopf);background:rgba(11,9,9,.55);color:var(--gold-hell);
  transition:background 600ms var(--kurve),border-color 600ms var(--kurve),color 600ms var(--kurve);
}
.dv-abspielen svg{margin-left:3px}
.dv-kachelbild--video a:hover .dv-abspielen{background:var(--signal);border-color:var(--signal);color:#fff}
.dv-dauer{
  position:absolute;right:8px;bottom:8px;padding:2px 7px;
  background:rgba(11,9,9,.72);color:var(--text);
  font-size:10px;letter-spacing:.1em;font-variant-numeric:tabular-nums;
}
.dv-licht__buehne video{
  max-width:min(100%,560px);max-height:74vh;display:block;background:#000;
}
.dv-licht__buehne video[hidden],
.dv-licht__buehne img[hidden]{display:none}
@media (min-width:901px){
  .dv-abspielen{width:62px;height:62px}
  .dv-licht__buehne video{max-width:min(100%,640px)}
}
.dv-licht__hinweis{color:var(--text-2);font-size:13px;text-align:center;line-height:1.8}
.dv-licht__hinweis a{display:block;margin-top:6px;color:var(--gold-hell);text-decoration:underline}
.dv-licht__hinweis[hidden]{display:none}

/* ---------------------------------------------------------------------
 * 12 · Galerie ohne Seitenkopf: etwas Luft unter der Leiste, sonst
 *      kleben die Bilder daran.
 * ------------------------------------------------------------------ */
.page-template-galerie .dv-abschnitt{padding-top:26px}
.page-template-galerie .dv-album{margin-bottom:0}
@media (min-width:901px){ .page-template-galerie .dv-abschnitt{padding-top:34px} }