/*
Theme Name:  PG21 — Anpassungen
Theme URI:   https://pg21.at
Description: Gestalterische Anpassungen für pg21.at. Aufbauend auf Slupy-Theme-V1.4.
             Farbwelt unverändert; Schwerpunkt auf Typografie, Abstandsrhythmus und
             Karten-Komponente. Uebernommen von lg126-child (Stand 24.09.2026).
Author:      Robert Hartinger
Template:    Slupy-Theme-V1.4
Version:     1.0.0
License:     GPL-2.0-or-later
Text Domain: pg21-child
*/

/* ==========================================================================
   Abschnitte in fester Reihenfolge:
   1. @font-face        (Aufgabe 3)
   2. :root Tokens      (Aufgabe 4)
   3. Typografie        (Aufgabe 5)
   4. Karte             (Aufgabe 6)
   5. Einzelkorrekturen (Aufgabe 7)
   ========================================================================== */

/* ===== 1. Schriften (selbst gehostet) ================================== */

/* font-display: swap zeigt sofort die Ersatzschrift und tauscht danach -
   der Text ist nie unsichtbar. */

/* Montserrat ist ein Variable Font: EINE Datei je Zeichensatz deckt die
   gesamte Strichstaerkenachse ab. Deshalb ein Bereich (400 700) statt drei
   getrennter Deklarationen - drei Deklarationen auf dieselbe Datei wuerden
   nur dieselben Bytes dreifach benennen. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/righteous-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/righteous-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== 2. Tokens ======================================================= */

:root {
  /* Farben - pg21: Rot aus dem Customizer (main_color, gradient_color3) */
  --pg-rot:      #ff0000;
  --pg-rot-deep: #c40000;
  --pg-surface:      #353535;
  --pg-surface-deep: #0c0c0c;
  --pg-ink:          #ffffff;

  /* Abstandsrhythmus - alle Werte Vielfache von 8px */
  --pg-space-1: 0.5rem;
  --pg-space-2: 1rem;
  --pg-space-3: 1.5rem;
  --pg-space-4: 2rem;
  --pg-space-6: 3rem;
  --pg-space-8: 4rem;

  /* Schriftgroessen - fliessend statt Breakpoint-Spruenge */
  --pg-text-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
  --pg-text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --pg-text-lg:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);
  --pg-text-xl:   clamp(1.75rem,  1.5rem  + 1.2vw,  2.5rem);
  --pg-text-2xl:  clamp(2.25rem,  1.8rem  + 2.2vw,  3.5rem);

  /* Form */
  --pg-radius:    10px;
  --pg-radius-lg: 16px;
  --pg-shadow:    0 2px 8px rgb(0 0 0 / 0.35);
  --pg-shadow-lg: 0 8px 28px rgb(0 0 0 / 0.45);
  --pg-ease:      200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 3. Typografie =================================================== */

/* AUSGANGSLAGE im Eltern-Theme (style.css), belegt:
     Zeile  394: body/button/input/select/textarea -> 'Varela Round'
     Zeile  407: h1..h6                            -> 'Righteous'
     Zeile 1365: h1,h2,h3,h4                       -> 'Montserrat'  <- gewinnt
     Zeile  439: code,kbd,tt,var                   -> 'Righteous'
   Die Ueberschriften sind heute also Montserrat, der Fliesstext Varela Round.
   Righteous ist praktisch unsichtbar.

   ZIEL: Righteous wird bewusst zur Ueberschriftenschrift erhoben (Aenderung,
   keine Bewahrung - siehe Ruling 2 im Ledger). Montserrat uebernimmt den
   Fliesstext. Varela Round entfaellt vollstaendig.

   WICHTIG: .headline steht NICHT im Ueberschriften-Selektor. Jeder Girl-Name
   traegt diese Klasse (inc/girls.php:255), bekaeme sonst 3rem Aussenabstand
   mitten in der Karte und wechselte die Schrift. Siehe Ruling 1. */

body,
input, textarea, select, optgroup, button {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--pg-text-base);
  line-height: 1.6;
}

/* Alle sechs Ebenen, damit Zeile 407 und Zeile 1365 des Eltern-Themes
   vollstaendig abgeloest werden - sonst blieben h5/h6 auf Righteous
   und h4 auf Montserrat zurueck. */
h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: 'Righteous', 'Montserrat', sans-serif;
  font-weight: 400;      /* Righteous hat nur diesen Schnitt */
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-block: var(--pg-space-6) var(--pg-space-3);
}

/* .entry-title steht hier bewusst NICHT: als Klasse (0,1,0) schlaegt sie den
   Elementselektor h2 (0,0,1) und gaebe jeder h2 die h1-Groesse. Die Ebene
   steckt bereits im Element. */
h1 { font-size: var(--pg-text-2xl); }
h2 { font-size: var(--pg-text-xl); }
h3 { font-size: var(--pg-text-lg); }

/* Einzige !important-Ausnahme im gesamten Child-CSS.
   Das Eltern-Theme erzwingt in style.css:58 .peco { font-family:'Montserrat'
   !important }. Ein !important ist nur durch ein !important zu schlagen -
   Spezifitaet hilft dagegen nicht. Ohne diese Zeile stuende die Marken-h1
   in Montserrat, waehrend alle Abschnittsueberschriften Righteous tragen. */
h1.peco, h2.peco, h3.peco {
  font-family: 'Righteous', 'Montserrat', sans-serif !important;
}

/* Fliesstext bekommt eine angenehme Zeilenlaenge. Ueber etwa 75 Zeichen
   verliert das Auge beim Ruecksprung die Zeile. */
.entry-content p { max-width: 68ch; }

/* Zentrierte Absaetze auch als Kasten zentrieren. Sonst steht der auf 68ch
   begrenzte Kasten links, und nur der Text darin ist mittig - bei kleinerer
   Schrift wird ch schmaler und die Zeile rutscht sichtbar nach links
   (Startseite: "Heisse Top Girls & strenge Dominas" in 13pt lag 125px links
   der Mitte, "Vormals OaseX!" in 17pt fast mittig). Erfasst die Ausrichtung
   aus dem klassischen Editor (Inline-Stil) und aus dem Block-Editor (Klasse). */
.entry-content p[style*="text-align: center"],
.entry-content p[style*="text-align:center"],
.entry-content p.has-text-align-center {
  margin-inline: auto;
}

/* Startseite: Abstand zwischen Einleitung und "Im Haus" war 163px. Er setzte
   sich aus vier Teilen zusammen: Aussenabstand der Telefon-Zeile (24px), ein
   Spacer-Block im Seiteninhalt (60px), ein LEERER Spalten-Block (0px hoch, aber
   31px Aussenabstand) und der Abstand ueber der Ueberschrift (48px). Die beiden
   mittleren sind Bearbeitungsreste ohne Inhalt.
   Leere Spalten-Bloecke blendet die Regel seitenweit aus - sie zeigen nie etwas.
   Den Spacer nur auf der Startseite: max-height statt height, weil die Hoehe
   als Inline-Stil im Inhalt steht und sich ohne !important nicht ueberschreiben
   liesse; max-height begrenzt sie trotzdem. Ergebnis: rund 72px. */
.entry-content .wp-block-columns:not(:has(.wp-block-column > *)) {
  display: none;
}
body.home .entry-content > .wp-block-spacer {
  max-height: 0;
}

/* Codeauszeichnung stand im Eltern-Theme auf einer Display-Schrift
   (style.css:439) - das ist schlicht falsch und hier mit erledigt. */
code, kbd, tt, var, pre {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* Bootstrap faerbt <code> in seinem Standard-Pink (#d63384) - auf dieser
   Seite sah das wie das lg126-Magenta aus (Cookie-Namen in der
   Datenschutzerklaerung). Textfarbe der Umgebung, dazu eine leichte Flaeche,
   damit die Namen als Bezeichner erkennbar bleiben. */
code {
  color: inherit;
  background: rgb(255 255 255 / 0.08);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ===== 4. Karte (Girls-Uebersicht) ===================================== */

/* Das Raster steht auf .row.no-gutters - die Karten stossen aneinander.
   Ein schmaler Innenabstand je Spalte erzeugt die Fugen, ohne das
   Bootstrap-Raster anzufassen. */
.girls_col { padding: 6px; }

.girls_col .girls_container {
  aspect-ratio: 3 / 4;                 /* einheitliches Raster, keine Einstuerze */
  max-height: none;                    /* hebt die 680px des Eltern-Themes auf */
  height: auto;
  background: var(--pg-surface-deep);  /* Platzhalter, solange das Bild laedt */
  border-radius: var(--pg-radius-lg);
  transition: transform var(--pg-ease), box-shadow var(--pg-ease);
}

/* Im Eltern-Theme standen top/bottom/left/right ohne position - wirkungslos. */
.girls_col .girls_container .girls_poster { position: absolute; inset: 0; }

.girls_col .girls_container:hover {
  transform: translateY(-3px);
  box-shadow: var(--pg-shadow-lg);
}

/* Verlaufsschleier: ersetzt den zufaelligen Bilduntergrund durch eine
   verlaessliche dunkle Basis. Deshalb darf das Magenta bleiben. */
/* Transparenter Balken hinter dem Namen statt eines weichen Verlaufs.
   Der Balken hat eine klare Kante und wirkt dadurch gesetzt statt
   angehaucht; der Milchglas-Effekt loest den Namen zusaetzlich vom Foto,
   ohne es zu verdecken. backdrop-filter braucht ein halbtransparentes
   Background - deshalb beides zusammen. */
.girls_desc {
  background: rgb(12 12 12 / 0.58);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid rgb(255 255 255 / 0.10);
  padding: var(--pg-space-1) var(--pg-space-2);
  text-align: center;   /* im Balken ueber die volle Breite ruhiger als linksbuendig */
}

.girls_desc .girls_name {
  font-size: var(--pg-text-lg);
  line-height: 1.2;
  overflow-wrap: anywhere;   /* lange Namen brechen statt abzuschneiden */
  margin-block: 0;
}

/* --- Auszeichnungen auf der Karte -------------------------------------- */

/* Das Eltern-Theme baut aus .new ein 180x20 breites Band, das es um 45 Grad
   dreht und ueber die Kartenecke schiebt (style.css:919). Zwei
   Keyframe-Animationen lassen es ausserdem im Zweisekundentakt blinken,
   endlos - bei 13 von 28 Karten flackert damit ein Drittel des Rasters und
   nimmt genau den Fotos die Aufmerksamkeit, um die es geht. Blinkende
   Inhalte ohne Halt sind zudem ein Verstoss gegen WCAG 2.2.2.

   Stattdessen ein Chip: dieselbe Formensprache wie die Service-Chips auf
   der Detailseite, ohne Rotationstrick und ohne ueber die Karte
   hinauszuragen.

   Die Stapelreihenfolge bleibt noetig: .new steht im Markup VOR
   .girls_poster. Solange .girls_poster unpositioniert war, lag .new
   darueber. Seit es position:absolute traegt, sind beide positionierte
   Geschwister ohne z-index - und dann gewinnt das spaetere, das Foto
   verdeckte die Auszeichnung. */
.girls_col .girls_container .new {
  z-index: 2;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 6px 12px;
  border-radius: 8px;
  background-color: var(--pg-rot);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
  transform: none;                       /* Drehung des Eltern-Themes zuruecknehmen */
  animation: pg21-auftritt 500ms ease-out both;  /* einmal, nicht endlos */
}

/* Das Aufleuchten liegt auf einem eigenen Element, nicht auf dem Chip selbst.
   Sonst wuerde der Schlusszustand der Animation (Fuellmodus 'both') den
   Schatten ueberschreiben - und der Ring, der die "AB"-Auszeichnung von der
   NEU-Auszeichnung unterscheidet, waere nach einer halben Sekunde weg. */
.girls_col .girls_container .new::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: pg21-aufleuchten 900ms ease-out both;
}

.girls_col .girls_container .new-inner {
  margin: 0;
  font-family: 'Righteous', sans-serif;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: #fff;
  animation: none;                       /* innerblink des Eltern-Themes aus */
}

/* "AB 25.08." bedeutet etwas anderes als "NEU" und soll auch anders
   aussehen - sonst wirken 21 geplante Maedchen wie 21 Neuzugaenge. Auf
   Wunsch zusaetzlich auf der GEGENUEBERLIEGENDEN Ecke: rechts statt links,
   damit sich die beiden Zustaende schon auf den ersten Blick beim
   Durchscrollen unterscheiden, nicht erst an Farbe und Text. */
.girls_col .girls_container .new.future {
  top: 10px;
  left: auto;
  right: 10px;
  background-color: rgb(12 12 12 / 0.82);
  box-shadow: inset 0 0 0 1px var(--pg-rot), 0 2px 8px rgb(0 0 0 / 0.35);
}

/* Einmaliges Aufleuchten beim Erscheinen: der Blick wird angezogen, danach
   ist Ruhe. Unter fuenf Sekunden und nicht wiederholt - damit ist es mit
   WCAG 2.2.2 vereinbar. */
@keyframes pg21-auftritt {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pg21-aufleuchten {
  from { box-shadow: 0 0 0 0 rgb(255 0 0 / 0.55); }
  to   { box-shadow: 0 0 0 14px rgb(255 0 0 / 0); }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch
   hier nicht - die Auszeichnung ist dann sofort da. */
@media (prefers-reduced-motion: reduce) {
  .girls_col .girls_container .new,
  .girls_col .girls_container .new::after {
    animation: none;
  }
}

/* ===== 5. Detailseite ================================================== */

/* Bootstrap begrenzt den Inhalt auf col-md-9 = 75%. Auf einer Seite, die
   ausschliesslich von Fotos lebt, verschenkt das ein Viertel der Flaeche. */
@media (min-width: 992px) {
  body.single-girls .col-md-9 {
    flex: 0 0 auto;
    width: min(2100px, 96vw);
    max-width: none;
  }
}

/* Infospalte und Galerie nebeneinander statt gestapelt.
   Die Infospalte laeuft mit, weil die Galerie deutlich hoeher wird. */
@media (min-width: 992px) {
  body.single-girls .bg-content {
    display: flex;
    align-items: flex-start;
    gap: var(--pg-space-6);
  }
  body.single-girls .girl-sidebar {
    flex: 0 0 320px;
    position: sticky;
    top: var(--pg-space-2);
  }
  body.single-girls .girl-content {
    flex: 1 1 auto;
    min-width: 0;             /* verhindert, dass Bilder das Flex-Element sprengen */
  }
}

/* Galerie: von CSS-Spalten auf ein Raster mit deutlich groesseren Kacheln.
   Vorher 244px breite Bilder auf einer Fotoseite - das war der Kernfehler. */
/* FESTE Spaltenzahl je Stufe, ausdruecklich kein auto-fill:
   auto-fill fuellt zusaetzliche Breite mit MEHR Spalten auf, die Bilder
   blieben also klein und wuerden nur zahlreicher. Bei fester Spaltenzahl
   wandert jeder gewonnene Pixel in die Bildgroesse. */
body.single-girls .slupy_gallery.masonry {
  columns: initial;
  column-count: initial;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pg-space-2);
}
@media (min-width: 700px) {
  body.single-girls .slupy_gallery.masonry { grid-template-columns: repeat(3, 1fr); }
}
/* Die vierte Spalte kommt erst sehr spaet: bei 2560px liefern drei Spalten
   rund 490px breite Bilder, vier nur noch 366px. Auf einer Fotoseite ist
   groesser besser als zahlreicher. */
@media (min-width: 2600px) {
  body.single-girls .slupy_gallery.masonry { grid-template-columns: repeat(4, 1fr); }
}

body.single-girls .slupy_gallery.masonry > a {
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: var(--pg-radius-lg);
  background: var(--pg-surface-deep);
  transition: transform var(--pg-ease), box-shadow var(--pg-ease);
}
body.single-girls .slupy_gallery.masonry > a:hover {
  transform: translateY(-3px);
  box-shadow: var(--pg-shadow-lg);
}
body.single-girls .slupy_gallery.masonry img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}

/* Services: 28 unterstrichene Links untereinander machten die Seitenleiste
   1124px hoch und die Seite 2700px lang. Als Chips wird daraus ein Block. */
ul.slupy_list.service {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.slupy_list.service li { margin: 0; padding: 0; }
ul.slupy_list.service li::before,
ul.slupy_list.service li::marker { content: none; }

ul.slupy_list.service a {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  color: var(--pg-ink);
  text-decoration: none;
  font-size: 0.8125rem;
  line-height: 1.35;
  transition: background var(--pg-ease), border-color var(--pg-ease), color var(--pg-ease);
}
ul.slupy_list.service a:hover,
ul.slupy_list.service a:focus-visible {
  background: var(--pg-rot);
  border-color: var(--pg-rot);
  color: #fff;
}

/* Ruhiger Rhythmus zwischen den Bloecken der Infospalte */
body.single-girls .girls-sidebar { margin-bottom: var(--pg-space-2); }

/* Tastaturbedienung sichtbar machen - das Eltern-Theme hatte keinen
   erkennbaren Fokuszustand. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pg-rot);
  outline-offset: 2px;
}

/* --- Kontaktknoepfe ---------------------------------------------------- */

/* Der Telefonknopf lief auf Bootstraps btn-info (#0dcaf0, tuerkis) - eine
   unveraenderte Voreinstellung, die quer zur rot-anthrazit Welt steht.
   Auf .girl-sidebar begrenzt, damit btn-info anderswo unangetastet bleibt. */
.girl-sidebar .btn-info,
.girl-sidebar .btn-info:not(:disabled):not(.disabled) {
  background-color: var(--pg-rot);
  border-color: var(--pg-rot);
  color: var(--pg-ink);
}
.girl-sidebar .btn-info:hover,
.girl-sidebar .btn-info:focus,
.girl-sidebar .btn-info:focus-visible,
.girl-sidebar .btn-info:active {
  background-color: var(--pg-rot-deep);
  border-color: var(--pg-rot-deep);
  color: var(--pg-ink);
  box-shadow: none;
}

/* Beide Kontaktknoepfe bekommen dieselbe Form und Groesse. Das Gruen des
   WhatsApp-Knopfes bleibt bewusst - es ist ein Wiedererkennungszeichen,
   keine willkuerliche Farbwahl. */
.girl-sidebar .btn-info,
.girl-sidebar .btn-success {
  border-radius: 999px;
  padding: 10px 18px;
  font-size: var(--pg-text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--pg-ease), border-color var(--pg-ease);
}

/* Ueberschriften in der Infospalte brauchen einen engeren Rhythmus als im
   Fliesstext: 3rem Abstand sind dort grosszuegig, in einer 320px schmalen
   Spalte reissen sie Loecher. */
body.single-girls .girl-sidebar h1,
body.single-girls .girl-sidebar h2,
body.single-girls .girl-sidebar h3,
body.single-girls .girl-sidebar .headline {
  margin-block: var(--pg-space-2) var(--pg-space-1);
}
body.single-girls .girl-sidebar h1 { margin-top: 0; }

/* ===== 6. Footer und Lightbox ========================================== */

/* Der Footer hatte gar keinen eigenen Hintergrund (background: transparent)
   und zeigte damit dasselbe Rautenmuster wie die Seite - er hob sich
   ueberhaupt nicht ab. Eine eigene, dunklere Flaeche plus eine rote
   Oberkante trennen ihn sauber vom Inhalt. */
.site-footer {
  background: var(--pg-surface-deep);
  border-top: 3px solid var(--pg-rot);
  /* Das untere Polster sitzt im Footer, nicht am body: dort laege es
     UNTER dem Footer und erzeugte einen Streifen Rautenmuster.
     Es haelt zugleich die Cookie-Leiste vom Inhalt fern. */
  padding-block: var(--pg-space-6) var(--pg-space-8);
  position: relative;
  z-index: 1;
}
.site-footer a { color: var(--pg-ink); }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--pg-rot); }
.site-footer h2, .site-footer h3, .site-footer .widget-title {
  margin-block: 0 var(--pg-space-2);
}

/* Die Lightbox ist lightgallery.js 1.2.0 - eine gute Galerie mit Zoom,
   Vollbild, Autoplay und Miniaturbild-Streifen, aber im Auslieferungszustand:
   mattschwarz, graue Symbole, eckige Kaesten, ein harter Balken quer ueber
   dem Foto. Ihre Akzentfarbe ist ausserdem ein Rot (#a90707), das in der
   Palette dieser Seite nirgends vorkommt.

   Leitgedanke der Anpassung: Das Foto ist der Held. Die Bedienelemente
   nehmen die Farben der Seite auf, treten aber zurueck - Rot erscheint
   nur dort, wo gerade etwas geschieht. */

/* Grund wie die Seite, nicht reines Schwarz. */
.lg-backdrop {
  background-color: var(--pg-surface-deep);
}

/* Statt eines Balkens ein weicher Verlauf: die Symbole bleiben lesbar, das
   Foto wird nicht abgeschnitten. */
.lg-toolbar {
  background-image: linear-gradient(to bottom, rgb(12 12 12 / 0.75), rgb(12 12 12 / 0));
  background-color: transparent;
}

.lg-toolbar .lg-icon,
.lg-outer .lg-toggle-thumb {
  color: rgb(255 255 255 / 0.8);
  transition: color var(--pg-ease);
}

.lg-toolbar .lg-icon:hover,
.lg-toolbar .lg-icon:focus-visible,
.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover,
.lg-outer .lg-toggle-thumb:hover,
.lg-outer .lg-toggle-thumb:focus-visible {
  color: var(--pg-rot);
}

/* Die Galerie ist mit den Pfeiltasten bedienbar - dann muss auch sichtbar
   sein, worauf der Fokus steht. */
.lg-toolbar .lg-icon:focus-visible,
.lg-actions .lg-next:focus-visible,
.lg-actions .lg-prev:focus-visible,
.lg-outer .lg-toggle-thumb:focus-visible {
  outline: 2px solid var(--pg-rot);
  outline-offset: 2px;
  border-radius: var(--pg-radius);
}

/* Der Zaehler sass in 16px Systemschrift ueber dem Bild. */
#lg-counter {
  padding-top: 14px;
  color: rgb(255 255 255 / 0.62);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--pg-text-sm);
  letter-spacing: 0.04em;
}

/* Vor und Zurueck waren eckige graue Kaesten am Bildrand. Runde Flaechen
   treffen den Formcharakter der Seite und sind auf dem Handy leichter zu
   treffen. */
.lg-actions .lg-next,
.lg-actions .lg-prev {
  padding: 13px 15px;
  border-radius: 999px;
  background-color: rgb(12 12 12 / 0.55);
  color: rgb(255 255 255 / 0.8);
  transition: background-color var(--pg-ease), color var(--pg-ease);

  /* Das Paket zentriert die Pfeile ueber margin-top:-10px, was nur zur
     urspruenglichen Hoehe passt. Mit dem groesseren Polster waeren sie
     verrutscht - translateY haelt sie unabhaengig von der Groesse mittig. */
  margin-top: 0;
  transform: translateY(-50%);
}

.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover {
  background-color: rgb(12 12 12 / 0.8);
}

/* Miniaturbild-Streifen: gleicher Grund wie die Seite, gleicher Radius wie
   die Karten. Der weisse Rahmen um jedes Bild wich einem unsichtbaren -
   sichtbar wird nur das aktive. */
.lg-outer .lg-thumb-outer {
  background-color: var(--pg-surface-deep);
}

/* Der Streifen sass links statt in der Mitte. Die Miniaturbilder sind
   float: left in einem Element, dem das Skript per style-Attribut die
   Gesamtbreite aller Bilder gibt - passen sie auf den Schirm, bleibt rechts
   Platz und alles klebt links.

   margin-inline: auto loest genau das und nur das: Ist der Streifen schmaler
   als der Schirm, wird er zentriert; ist er breiter, fallen die
   Aussenabstaende auf 0 und das Schieben per translate3d, das lightGallery
   dann uebernimmt, funktioniert unveraendert. */
.lg-outer .lg-thumb {
  margin-inline: auto;
}

.lg-outer .lg-thumb-item {
  border-width: 2px;
  border-color: transparent;
  border-radius: var(--pg-radius);
  transition: border-color var(--pg-ease), opacity var(--pg-ease);
  opacity: 0.72;
}

.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
  border-color: var(--pg-rot);
  opacity: 1;
}

.lg-progress-bar .lg-progress {
  background-color: var(--pg-rot);
}

/* Die drei Footer-Spalten sind bereits gleich breit (je 432px), stehen aber
   alle linksbuendig - dadurch kleben die kurzen Texte am linken Spaltenrand
   statt zueinander zu stehen. Zentriert wirkt der Block als Einheit. */
.site-footer .footer-item {
  text-align: center;
}
.site-footer .footer-content + .footer-content {
  margin-top: var(--pg-space-2);
}
.site-footer .footer-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-item li {
  margin-block: 4px;
}
.site-footer .footer-item img {
  margin-inline: auto;
}

/* Auf schmalen Schirmen stapeln die Spalten - dann brauchen sie Luft
   dazwischen, sonst laufen die drei Bloecke ineinander. */
@media (max-width: 767px) {
  .site-footer .footer-item + .footer-item {
    margin-top: var(--pg-space-4);
    padding-top: var(--pg-space-4);
    border-top: 1px solid rgb(255 255 255 / 0.08);
  }
}

/* ===== 7. Hinweis zu den Grundfarben =================================== */

/* Die Grundfarben liegen NICHT im CSS, sondern als Theme-Einstellungen:
   Slupy-Theme-V1.4/functions.php:606-612 gibt einen Inline-<style>-Block
   aus, der :root nach den eingereihten Stylesheets erneut setzt - und
   Inline im <head> gewinnt gegen jede Datei.

   Aenderbar unter  Design > Customizer > Farben:
     "Dunkle Farbe"  -> --darkColor     (Inhaltsflaeche und der weiche
                                          92px-Verlauf drumherum)
     --lightColor, --primaryColor, --gradientColor1 ebenso.

   Ein Override hier waere wirkungslos. Nicht versuchen. */

/* ===== 8. Header und Navigation ======================================== */

/* Tippziele im aufgeklappten Handy-Menue: nur 35px hoch gemessen (Haus,
   Girls, Kontakt, Live Cams), obwohl zwischen den Eintraegen bereits
   sichtbarer Leerraum liegt (.menu-item traegt 15px Innenabstand im
   Eltern-Theme). Der Link selbst fuellt diesen Raum nicht aus - display:
   block plus etwas mehr Innenabstand zieht die Trefferflaeche bis in die
   Luecke, ohne dass sich am Bild etwas sichtbar aendert.

   :not(.partner-link) ausgenommen: die Partner-Menuepunkte ("zu LG 126", "zu OaseX") tragen eigene
   Pillenform (weiter unten, .partner-link > a mit display:inline-block).
   Ohne die Ausnahme gewinnt diese Regel wegen der ID im Selektor gegen die
   Klassenregel und macht aus der schmalen Pille einen ueber die volle
   Breite gezogenen Balken - genau das war der gemeldete Fehler. */
#site-navigation-mobile .menu-item:not(.partner-link) a {
  display: block;
  padding-block: 10px;
}

/* Fusszeile: die rechtlichen Links (Datenschutzerklaerung, Impressum)
   waren mit 19px die duennsten Tippziele der ganzen Seite - reiner
   Zeilenabstand ohne jeden Innenabstand. */
.menu-footer_menu-container .menu a {
  display: inline-block;
  padding-block: 8px;
}

/* Nur ab Desktop: unterhalb 992px greift das Burger-Menue des Eltern-Themes
   mit gestapelten Eintraegen - ein Flex-Layout wuerde es zerreissen. */
@media (min-width: 992px) {

  .site-header .main-navigation > div > ul,
  .site-header .main-navigation > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: clamp(0.5rem, 0.9vw, 1.25rem);   /* enger auf Wunsch */
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-header .main-navigation li { margin: 0; }

  .site-header .main-navigation a {
    /* "Live Cams" brach in zwei Zeilen, weil der Punkt mit 81px schmaler
       war als sein Text. */
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-block: 6px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* Statt dauerhafter Textdekoration eine praezise Linie, die beim
     Ueberfahren aufzieht. Der aktive Punkt zeigt sie dauerhaft. */
  .site-header .main-navigation a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--pg-ease);
  }
  .site-header .main-navigation a:hover::after,
  .site-header .main-navigation a:focus-visible::after,
  .site-header .main-navigation .current-menu-item > a::after,
  .site-header .main-navigation .current_page_item > a::after {
    transform: scaleX(1);
  }

  /* "zu LG 126" und "zu OaseX" sind Partnerlinks und sollen sich absetzen - als Pille
     statt als unterstrichener Kasten mit Leuchteffekt. */
  .site-header .main-navigation .partner-link > a {
    border: 1px solid rgb(255 255 255 / 0.55);
    border-radius: 999px;
    padding: 6px 16px;
    background: rgb(255 255 255 / 0.12);
    transition: background var(--pg-ease), border-color var(--pg-ease);
  }
  .site-header .main-navigation .partner-link > a::after { display: none; }
  .site-header .main-navigation .partner-link > a:hover,
  .site-header .main-navigation .partner-link > a:focus-visible {
    background: rgb(255 255 255 / 0.24);
    border-color: #fff;
  }
}

/* Der Partnerlink erscheint auf schmalen Schirmen ausserhalb der
   Hauptnavigation und blieb dort als grauer Kasten mit Leuchtrand zurueck.
   Dieselbe Pillenform daher unabhaengig von der Bildschirmbreite. */
.partner-link > a,
a.partner-link {
  display: inline-block;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
  padding: 6px 16px;
  background: rgb(255 255 255 / 0.10);
  text-decoration: none;
  font-weight: 600;
  transition: background var(--pg-ease), border-color var(--pg-ease);
}
.partner-link > a:hover,
.partner-link > a:focus-visible,
a.partner-link:hover,
a.partner-link:focus-visible {
  background: rgb(255 255 255 / 0.22);
  border-color: #fff;
}

/* ===== TEST: Footer im Header-Verlauf =================================
   Auf Wunsch des Auftraggebers zum Ansehen. Wenn er bleiben soll, in
   Abschnitt 6 einarbeiten; sonst diesen Block ersatzlos loeschen.

   Der Verlauf laeuft gespiegelt (to left), damit Kopf und Fuss die Seite
   symmetrisch einrahmen statt zweimal dieselbe Richtung zu zeigen.
   pg21: Rot statt Magenta, abgedunkelt aus der Kopfleisten-Palette
   (gradient_color3 #c40000). Kontraste gegen Weiss 6,3:1 / 7,9:1 / 11,5:1 -
   alle ueber AA (4,5:1); das Kopfleisten-Rot #ff0000 laege bei nur 4,0:1.
   Die rote Oberkante entfaellt - auf rotem Grund
   waere sie unsichtbar. Ebenso der rote Hover der Links: auf diesem
   Untergrund braucht es einen hellen Hover, keinen bunten. */
.site-footer {
  background: linear-gradient(to left, #c40000, #a80000, #7a0000);
  border-top: none;
}
.site-footer a { color: var(--pg-ink); }
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--pg-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== 9. Inhaltsseiten (Unser Haus u. a.) ============================= */

/* Ueberschriften auf Inhaltsseiten waren teils grau und auf dem dunklen
   Grund kaum zu lesen. Ursache ist eine unvollstaendige Aufzaehlung im
   Eltern-Theme (style.css:763):

       .entry-content p, .entry-content h3 { color: var(--textColor1); }

   Genannt sind nur Absaetze und h3. Die uebrigen fuenf Ebenen erben die
   Vorgabe des Browsers - dunkles Grau, gedacht fuer weissen Grund. Sichtbar
   wurde das an der Datenschutzerklaerung, die h2 verwendet, waehrend das
   Impressum h3 nutzt und deshalb weiss erschien.

   Gleiche Spezifitaet wie die Regel des Eltern-Themes (0,1,1); da das
   Child-Stylesheet danach geladen wird, gewinnt sie. Der Wert kommt aus
   derselben Variablen, bleibt also ueber den Customizer aenderbar. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--textColor1, var(--pg-ink));
}

/* Dasselbe gilt fuer Listen, Tabellen, Zitate und alles Weitere, was die
   Aufzaehlung des Eltern-Themes nicht kennt. Statt die Liste immer weiter
   zu verlaengern - erst h2, dann ul, dann das naechste - steht die Farbe
   hier einmal am Inhaltsbereich selbst. Alles darin erbt sie, sofern es
   sich nicht ausdruecklich anders faerbt. */
.entry-content {
  color: var(--textColor1, var(--pg-ink));
}

/* Auszeichnungen wie Cookie-Namen in der Datenschutzerklaerung. Auf dunklem
   Grund braucht eine Monospace-Schrift etwas Abhebung, sonst verschwimmt
   sie mit dem Fliesstext. */
.entry-content code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.09);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* Die Lesebreiten-Begrenzung aus Abschnitt 3 gilt fuer Textabsaetze und ist
   dort richtig - sie darf aber keine Bilder einschnueren. Bilder stecken auf
   dieser Seite teils in <p>, teils in <h3>; daher rendern sie in zwei
   verschiedenen Breiten (810 und 1043). */
.entry-content p:has(img) {
  max-width: none;
}

/* Bilder in Ueberschriften sind Alt-Markup aus dem Editor. Semantisch
   falsch, aber ohne Eingriff in die Inhalte nicht zu beheben - also
   wenigstens die Ueberschriften-Wirkung neutralisieren. */
.entry-content h1:has(img),
.entry-content h2:has(img),
.entry-content h3:has(img),
.entry-content h4:has(img) {
  margin-block: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

/* Alle Inhaltsbilder einheitlich: volle Spaltenbreite, gleiches
   Seitenverhaeltnis wie die Originale (1024x682), gleicher Radius wie
   ueberall sonst. */
.entry-content img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--pg-radius-lg);
}

/* Leere Absaetze und Ueberschriften stehen zu Dutzenden im Inhalt und
   erzeugen nichts als Leerraum. */
.entry-content p:empty,
.entry-content h1:empty,
.entry-content h2:empty,
.entry-content h3:empty,
.entry-content h4:empty {
  display: none;
}

/* Ruhiger Abstand zwischen Abschnitt und Bild */
.entry-content p:has(img),
.entry-content figure {
  margin-block: var(--pg-space-4);
}

/* Ein Raster ueber .entry-content scheitert an diesem Markup: zwischen den
   Bildern stehen Absaetze, die nur ein geschuetztes Leerzeichen enthalten.
   Sie sind nicht :empty (das verlangt voelligen Inhaltsmangel), spannen
   also weiter ueber beide Spalten und draengen jedes Bild in eine eigene
   Zeile. CSS kann "enthaelt nur Leerraum" nicht treffen.

   Stattdessen eine ruhige, einspaltige Bildergalerie mit begrenzter
   Breite: einheitlich, vorhersehbar, und die Seite wird deutlich kuerzer
   als mit bildschirmfuellenden Bildern. */
.entry-content img {
  max-width: min(100%, 760px);
}

/* Die Bilderstrecken liegen jeweils als lueckenlose Folge von <a><img></a>
   in EINEM Absatz. Ein Absatz mit mindestens zwei Links ist damit
   zuverlaessig als Bilderstrecke erkennbar - und wird zum Raster.
   Absaetze mit einem einzelnen Bild bleiben einspaltig. */
.entry-content p:has(> a:nth-of-type(2) img) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pg-space-2);
  max-width: none;
}
.entry-content p:has(> a:nth-of-type(2) img) > a {
  display: block;
  overflow: hidden;
  border-radius: var(--pg-radius-lg);
}
.entry-content p:has(> a:nth-of-type(2) img) img {
  max-width: 100%;
  border-radius: 0;   /* der Radius sitzt jetzt am Link, nicht am Bild */
  transition: transform var(--pg-ease);
}
.entry-content p:has(> a:nth-of-type(2) img) > a:hover img {
  transform: scale(1.03);
}

/* Auf schmalen Schirmen wieder einspaltig - zwei Bilder nebeneinander
   waeren dort briefmarkengross. */
@media (max-width: 767px) {
  .entry-content p:has(> a:nth-of-type(2) img) {
    grid-template-columns: 1fr;
  }
}

/* Inhaltsseiten mit dem breiten Template ("Unser Haus" u. a.) zentriert.
   Die Lesebreiten-Begrenzung bleibt bestehen, der Textblock wird nur
   mittig gesetzt statt linksbuendig. */
body.page-template-page-wide .entry-content,
body.page-template-page-wide .entry-title {
  text-align: center;
}
body.page-template-page-wide .entry-content p {
  margin-inline: auto;   /* der begrenzte Textblock steht sonst links */
}

/* Bleibt in der letzten Zeile einer Bilderstrecke ein einzelnes Bild
   uebrig, wirkt die Reihe abgebrochen. :last-child:nth-child(odd) trifft
   genau diesen Fall - das letzte Bild nur dann, wenn seine Position
   ungerade ist, es also allein in seiner Zeile steht. Die Regel passt sich
   von selbst an, wenn spaeter Bilder ergaenzt oder entfernt werden. */
.entry-content p:has(> a:nth-of-type(2) img) > a:last-child:nth-child(odd) {
  display: none;
}

/* --- Karte: Zimmernummer ---------------------------------------------- */

/* Auf allen Bildschirmgroessen ausgeblendet (Wunsch Betreiber 24.09.2026,
   zuerst nur am Handy): Der Balken bleibt einzeilig und laesst mehr vom Foto
   frei. Die Nummer steht weiter auf der Detailseite ("APP: 11"). Die
   Formatierung bleibt fuer den Fall, dass sie zurueckkommen soll. */
.girls_desc .girls_zimmer {
  display: none;
  font-size: var(--pg-text-sm);
  line-height: 1.2;
  color: rgb(255 255 255 / 0.78);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* Auf der Girls-Detailseite stiess die Galerie direkt an den Footer.
   Der Abstand kommt als PADDING in die Inhaltsflaeche, nicht als margin:
   ein margin laege zwischen den Flaechen und liesse dort das
   Rautenmuster durchscheinen - genau der Streifen, den wir vorher
   beseitigt haben. */
body.single-girls .bg-content {
  /* Oben und unten derselbe Wert - die Inhaltsflaeche steht damit
     gleichmaessig zwischen Kopf und Fuss. Das Eltern-Theme hatte hier
     nur 20px, die Galerie klebte praktisch am Menue. */
  padding-block: var(--pg-space-8);
}

/* Dasselbe Problem auf allen Inhaltsseiten - Kontakt, Unser Haus, Impressum,
   Datenschutzerklaerung: Das Eltern-Theme gibt .bg-content nur
   padding-top: 20px (slupy-styles.css:22) und gar keinen Abstand nach unten.
   Der letzte Absatz stiess damit unmittelbar an den Footer.

   Auch hier PADDING statt margin, aus demselben Grund wie oben: ein margin
   laege zwischen den Flaechen und liesse das Rautenmuster des Bodys als
   Streifen durchscheinen.

   Die Startseite ist ausgenommen - dort schliesst das Kartenraster bewusst
   direkt an den Footer an. */
body.page:not(.home) .bg-content {
  padding-bottom: var(--pg-space-8);
}

/* TEST: Marken-h1 in Grossbuchstaben.
   Das Eltern-Theme setzt .headline auf uppercase, bei dieser h1 greift es
   aber nicht - sie traegt zusaetzlich .peco, und dort wird es zurueckgesetzt.
   Wenn der Test bleibt, in Abschnitt 3 einarbeiten; sonst loeschen. */
h1.peco {
  text-transform: uppercase;
}

/* ===== 10. Detailseite: Infospalte ===================================== */

/* Jede Datenzeile war 54px hoch, weil Label und Wert untereinander standen.
   Als Flex-Zeile liegen sie nebeneinander - der nackte Textknoten hinter
   dem <span> wird dabei zum anonymen Flex-Element. Aus 444px Datenblock
   werden rund 200px, wodurch die Kontaktknoepfe ohne Scrollen ins Bild
   ruecken. */
body.single-girls .girl-sidebar .item {
  /* Das Eltern-Theme floatet die Angaben zu je 50%. In einer 300px
     schmalen Spalte bleiben 150px je Angabe - Label und Wert stossen
     dann an die Nachbarspalte. Eine Angabe pro Zeile ueber die volle
     Breite liest sich in einer Seitenleiste ohnehin besser. */
  float: none;
  width: 100%;
  max-width: none;   /* das Eltern-Theme deckelt mit max-width:50% - ohne
                        diese Zeile bleibt width:100% wirkungslos */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pg-space-2);
  padding-block: 2px;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  font-size: var(--pg-text-sm);
  line-height: 1.4;
}
body.single-girls .girl-sidebar .item:last-child { border-bottom: none; }

body.single-girls .girl-sidebar .item > span:first-child {
  flex: 0 0 auto;
  color: rgb(255 255 255 / 0.55);   /* Label tritt zurueck, der Wert zaehlt */
  font-weight: 400;
}

/* "Anwesend" stand auf reinem Gruen (rgb(0,128,0)) - eine Bootstrap-
   Voreinstellung, die in der Palette dieser Seite nicht vorkommt.
   Statt einer bunten Flaeche ein ruhiger Punkt vor dem Wort. */
body.single-girls .girl-sidebar .label {
  background: transparent;
  color: rgb(255 255 255 / 0.85);
  font-size: var(--pg-text-sm);
  font-weight: 600;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
body.single-girls .girl-sidebar .label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;              /* nur der Punkt bleibt gruen - er
                                       transportiert die Bedeutung */
  box-shadow: 0 0 0 3px rgb(63 185 80 / 0.18);
  flex: 0 0 auto;
}

/* Die Zimmernummer ist die praktisch wichtigste Angabe der Seite - der
   Besucher muss die Tuer finden. Sie war zwischenzeitlich verkleinert und
   ist jetzt bewusst gross. */
body.single-girls .girl-sidebar .girls-sidebar > h3.widget-title:only-child {
  font-size: var(--pg-text-xl);
  letter-spacing: 0.02em;
  color: var(--pg-rot);
  margin-block: 0;
}

/* --- Kontaktleiste, auf schmalen Schirmen festgehalten ---------------- */

/* Auf dem Handy scrollt der Telefonknopf nach oben weg, sobald man die
   Fotos ansieht - also genau dann, wenn Interesse entsteht. Der
   Kontaktblock ist per :has(a[href^="tel:"]) zuverlaessig zu treffen. */
@media (max-width: 991px) {
  body.single-girls .girls-sidebar:has(> a[href^="tel:"]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    gap: var(--pg-space-1);
    margin: 0;
    padding: var(--pg-space-1) var(--pg-space-2)
             calc(var(--pg-space-1) + env(safe-area-inset-bottom, 0px));
    background: rgb(12 12 12 / 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgb(255 255 255 / 0.10);
  }
  /* Die Ueberschrift "Kontakt" braucht es in der Leiste nicht. */
  body.single-girls .girls-sidebar:has(> a[href^="tel:"]) > h3 { display: none; }

  body.single-girls .girls-sidebar:has(> a[href^="tel:"]) > a {
    flex: 1 1 0;
    margin: 0;
  }
  body.single-girls .girls-sidebar:has(> a[href^="tel:"]) .btn {
    width: 100%;
    margin: 0;
  }

  /* Damit die Leiste nichts verdeckt, bekommt der Inhalt unten Platz. */
  body.single-girls .bg-content { padding-bottom: calc(var(--pg-space-8) + 56px); }
}

/* Sprachen als Chips - dieselbe Form wie die Services, damit die
   Infospalte aus einem Guss wirkt. Die Aufteilung besorgt
   js/detailseite.js, weil der Wert im Markup ein Fliesstext ist. */
body.single-girls .girls_sprachen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
body.single-girls .girls_sprache {
  padding: 2px 9px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* Zurueck zur Uebersicht - bisher kam man nur ueber das Hauptmenue zurueck. */
body.single-girls .girls_zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--pg-space-2);
  color: rgb(255 255 255 / 0.6);
  font-size: var(--pg-text-sm);
  text-decoration: none;
  transition: color var(--pg-ease);
}
/* Tippziel auf dem Handy: nur 23px hoch gemessen - der Text traegt keinen
   sichtbaren Hintergrund, deshalb weitet padding + gegengleiches negatives
   margin die tatsaechliche Trefferflaeche auf ~44px, ohne dass sich Text
   oder umgebender Abstand sichtbar verschieben. */
body.single-girls .girls_zurueck {
  margin-block: -10px calc(var(--pg-space-2) - 10px);
  padding-block: 10px;
}
body.single-girls .girls_zurueck::before { content: '\2190'; }   /* Pfeil links */
body.single-girls .girls_zurueck:hover,
body.single-girls .girls_zurueck:focus-visible { color: var(--pg-rot); }

/* ===== 11. Kontaktseite ================================================ */

/* Der Absendeknopf war 391x68px bei 18px Schrift und 25px Polster - fuer
   ein Formular mit wenigen Feldern deutlich zu wuchtig. Er soll auffallen,
   aber nicht die Seite beherrschen.

   Der Selektor traegt den Typ mit, obwohl .wpcf7-submit allein eindeutig
   waere: Das Eltern-Theme setzt in style.css:908 input[type="submit"]
   { width: 80%; padding: 25px }. Element plus Attribut ergibt (0,1,1) und
   schlaegt damit eine einzelne Klasse (0,1,0) - die spaetere Ladereihenfolge
   des Child-Themes hilft dagegen nicht, Spezifitaet geht immer vor. Mit dem
   Typ davor steht hier (0,2,1), und die Werte greifen tatsaechlich. */
input[type="submit"].wpcf7-submit {
  width: auto;
  min-width: 180px;
  /* 13px oben und unten statt 12: damit misst der Knopf 44px in der Hoehe -
     die Groesse, die ein Daumen auf dem Handy zuverlaessig trifft. Bei 12px
     waren es 42px und damit knapp darunter. */
  padding: 13px 32px;
  font-size: var(--pg-text-base);
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* Die Ueberschrift steht ueber dem Adressblock. */
.pg21-kontakt-ueberschrift {
  margin-block: 0 var(--pg-space-3);
}

/* Hinweis unter den Dateifeldern: welche Formate, welche Groesse. Leiser
   als das Feld selbst, aber vor dem Absenden lesbar. */
.pg21-feldhinweis {
  margin-block: -8px var(--pg-space-3);
  font-size: var(--pg-text-sm);
  opacity: 0.72;
}

/* Honigtopf gegen automatische Absender (siehe inc/kontaktformular.php).
   Absichtlich NICHT display:none - das erkennen viele Skripte und lassen
   das Feld dann leer. Aus dem Sichtfeld schieben wirkt zuverlaessiger. */
.pg21-honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Der Anwesend-Punkt darf deutlicher sein - er ist die wichtigste
   Einzelinformation der Seite. */
body.single-girls .girl-sidebar .label::before {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 4px rgb(63 185 80 / 0.22);
}
body.single-girls .girl-sidebar .label {
  gap: 9px;
  font-size: var(--pg-text-base);
}

/* --- Angebotsorte ------------------------------------------------------ */

/* Bewusst kraeftiger als die Service-Chips: von 28 anwesenden Maedchen
   bieten nur 7 Escort und genau eine einen Whirlpool - das unterscheidet
   sie staerker voneinander als irgendein einzelner Service. Diese
   Information war bisher gar nicht sichtbar. */
body.single-girls .girls_orte_liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.single-girls .girls_orte_liste li { margin: 0; }

body.single-girls .girls_orte_liste a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgb(255 0 0 / 0.35);
  border-radius: var(--pg-radius);
  background: rgb(255 0 0 / 0.08);
  color: var(--pg-ink);
  font-size: var(--pg-text-sm);
  text-decoration: none;
  transition: background var(--pg-ease), border-color var(--pg-ease);
}
body.single-girls .girls_orte_liste a:hover,
body.single-girls .girls_orte_liste a:focus-visible {
  background: rgb(255 0 0 / 0.20);
  border-color: var(--pg-rot);
}
body.single-girls .girls_orte_liste i {
  width: 18px;
  text-align: center;
  color: var(--pg-rot);
  flex: 0 0 auto;
}

/* --- Angebotsorte ------------------------------------------------------ */

/* Das Eltern-Theme gibt die Orte bereits aus - als schlichte Aufzaehlung
   ganz unten, nach den Services. Sie gehoeren aber weiter nach oben: von
   28 anwesenden Maedchen bieten nur 7 Escort und genau eine einen
   Whirlpool. Wo jemand verfuegbar ist, ist eine groebere und damit
   fruehere Entscheidung als welchen einzelnen Service sie anbietet.

   Die Spalte wird dafuer zur Flex-Spalte; alle uebrigen Bloecke behalten
   order:0 und bleiben in Dokumentreihenfolge davor. */
body.single-girls .girl-sidebar {
  display: flex;
  flex-direction: column;
}
body.single-girls .girl-sidebar > .girls_zurueck { order: -1; }
body.single-girls .girl-sidebar > .girls-sidebar:has(.slupy_list.location) { order: 5; }
body.single-girls .girl-sidebar > .girls-sidebar:has(.slupy_list.service)  { order: 6; }

body.single-girls .slupy_list.location {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.single-girls .slupy_list.location li { margin: 0; padding: 0; }
body.single-girls .slupy_list.location li::marker { content: none; }

body.single-girls .slupy_list.location a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgb(255 0 0 / 0.35);
  border-radius: var(--pg-radius);
  background: rgb(255 0 0 / 0.08);
  color: var(--pg-ink);
  font-size: var(--pg-text-sm);
  text-decoration: none;
  transition: background var(--pg-ease), border-color var(--pg-ease);
}
body.single-girls .slupy_list.location a:hover,
body.single-girls .slupy_list.location a:focus-visible {
  background: rgb(255 0 0 / 0.20);
  border-color: var(--pg-rot);
}

/* Symbole ueber das Term-Kuerzel in der Adresse - kein zusaetzliches
   Markup noetig. Font Awesome 5 ist vom Eltern-Theme geladen. */
body.single-girls .slupy_list.location a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f3c5';                 /* Rueckfall: Ortsmarke */
  width: 18px;
  text-align: center;
  color: var(--pg-rot);
  flex: 0 0 auto;
}
body.single-girls .slupy_list.location a[href*="/bei-mir/"]::before                { content: '\f52b'; }
body.single-girls .slupy_list.location a[href*="/escort/"]::before                 { content: '\f561'; }
body.single-girls .slupy_list.location a[href*="/haus-hotelbesuche/"]::before      { content: '\f594'; }
body.single-girls .slupy_list.location a[href*="/parkplatz/"]::before              { content: '\f1b9'; }
body.single-girls .slupy_list.location a[href*="/party-striptease/"]::before       { content: '\f001'; }
body.single-girls .slupy_list.location a[href*="/urlaubs-reisebegleitung/"]::before { content: '\f072'; }
body.single-girls .slupy_list.location a[href*="/whirlpool/"]::before              { content: '\f593'; }

/* --- Kontaktseite: Titel ueber dem Adressblock ------------------------- */

/* Der Seitentitel kommt aus the_title() im Eltern-Template und steht darum
   ausserhalb des Spalten-Blocks. Er lief bisher zentriert ueber die volle
   Inhaltsbreite, waehrend die Adresse nur die linke Spalte fuellt - die
   Ueberschrift schwebte damit ueber dem Zwischenraum statt ueber ihrem
   Text. Statt den Titel per Template in den Inhalt zu verschieben, bekommt
   sein Kasten hier die Breite genau einer Spalte; die weiter oben gesetzte
   Zentrierung (body.page-template-page-wide .entry-title) ruecht ihn damit
   von selbst ueber die Adresse.

   Gegriffen wird ueber :has(.contact-right) - diese Klasse traegt die
   rechte Spalte mit dem Bewerbungsformular. Die Regel haengt damit an der
   Struktur der Seite und nicht an ihrer ID: eine neu angelegte Kontaktseite
   sieht genauso aus, und andere Seiten mit dem breiten Template bleiben
   unberuehrt. .bg-content ist der gemeinsame Vorfahr von Kopf und Inhalt -
   noetig, weil CSS vom Inhalt aus nicht auf den davorstehenden Kopf
   zurueckgreifen kann. */
@media (min-width: 782px) {
  .bg-content:has(.contact-right) .entry-header {
    /* Dieselbe Rechnung, die der Spalten-Block selbst anstellt: volle
       Breite minus Zwischenraum, geteilt durch zwei.

       Die Breite steht bewusst am Kopf und nicht an der h1 selbst. Der
       Zwischenraum der Spalten ist 2em - und em meint immer die
       Schriftgroesse des Elements, an dem gerechnet wird. Am Spalten-Block
       ist das die geerbte Fliesstextgroesse (36px), an der h1 dagegen ihre
       eigene, gut dreimal so grosse (112px). Die Regel an der h1 haette die
       Spaltenbreite deshalb um knapp 40px verfehlt. .entry-header erbt
       dieselbe Schriftgroesse wie der Spalten-Block, hier stimmen die 2em. */
    width: calc((100% - 2em) / 2);
  }
}

/* ===== 12. Handy: Girls-Uebersicht und Detailseite ===================== */

/* Gemessen auf 390px (24.09.2026):
   - Karten nur 145px breit in 175px-Spalten. Das Eltern-Theme setzt auf
     schmalen Schirmen 15px Innenabstand je Spalte und schlaegt damit die
     6px aus Abschnitt 4 - 30px je Karte gingen an Fugen verloren.
   - Namensbalken 62px von 193px Kartenhoehe, "LADY MARINA" zweizeilig.
   - Detailseite: erstes Foto erst bei 2023px - 2,4 Bildschirmhoehen Text
     vor dem ersten Bild. Infospalte und Galerie sind zwei Geschwister-
     bloecke, die unter 992px schlicht untereinander stehen.
   - Anruf-Knopf: Nummer bricht in zwei Zeilen.
   - Reiter "Cookie Einstellungen" liegt ueber der Kontaktleiste. */
@media (max-width: 767px) {
  /* Karten: schmale Fugen statt 30px Luft, weniger Seitenrand */
  .bg-content:has(.girls_col) { padding-inline: 8px; }
  .row > .girls_col { padding: 5px; }
  /* Das Eltern-Theme gibt jeder Spalte zusaetzlich 30px Aussenabstand nach
     unten - Zeilenfuge 40px bei 10px Spaltenfuge. Gleich machen. */
  .row > .girls_col { margin-bottom: 0; }

  /* Namensbalken kompakt: eine Zeile fuer uebliche Namen */
  .girls_desc { padding: 6px 8px; }
  .girls_desc .girls_name {
    font-size: 1.0625rem;          /* 17px statt 20px */
    letter-spacing: 0.01em;
  }
  /* Zimmernummer: seit 24.09.2026 ueberall ausgeblendet, siehe Abschnitt
     "Karte: Zimmernummer". */
}

@media (max-width: 991px) {
  /* Detailseite: Reihenfolge Kopf -> Fotos -> Beschreibung -> Merkmale.
     display:contents loest die Infospalte als Kasten auf; ihre Bloecke
     werden direkte Flex-Kinder von .bg-content und lassen sich damit
     zwischen die Galerie sortieren. Selektoren wie ".girl-sidebar .item"
     greifen weiter - am DOM aendert sich nichts, nur an der Box. */
  body.single-girls .bg-content {
    display: flex;
    flex-direction: column;
  }
  body.single-girls .girl-sidebar { display: contents; }
  body.single-girls .girl-content { order: 1; margin-bottom: var(--pg-space-3); }
  body.single-girls .girl-sidebar > .girls-sidebar:has(#girlsexerpt) { order: 2; }
  /* .girls_zurueck (-1), location (5) und service (6) behalten ihre Werte
     aus Abschnitt 10; der Kopfblock mit Name und Status bleibt bei 0. */

  /* Erstes Foto ueber die volle Breite - es ist das, weswegen man kommt. */
  body.single-girls .slupy_gallery.masonry > a:first-child { grid-column: 1 / -1; }

  /* Anruf-Knopf: Nummer in einer Zeile */
  body.single-girls .girls-sidebar:has(> a[href^="tel:"]) .btn {
    white-space: nowrap;
    font-size: 0.875rem;
    padding-inline: 8px;
  }

  /* Cookie-Reiter ueber die Kontaktleiste heben statt darauf legen.
     Das Plugin positioniert ihn per Inline-Stil (bottom:0) - nur mit
     !important zu uebersteuern; zweite dokumentierte Ausnahme. */
  body.single-girls #cookie-law-info-again {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Handy-Menue: Partnerlinks einzeilig in der Pille.
   Gemessen: die Pillen trugen 36px Schrift (die uebrigen Eintraege 29px) und
   brachen dadurch zweizeilig um - aus der Pille wurde ein 187x129px grosses
   Oval ("zu / OaseX"). Etwas kleiner als die Hauptpunkte, damit sie als
   Nebenziele erkennbar bleiben, und ohne Umbruch. */
#site-navigation-mobile .partner-link > a {
  font-size: 1.375rem;          /* 22px */
  line-height: 1.2;
  white-space: nowrap;
  padding: 8px 20px;
}

/* Startseite am Handy: Abstand Telefonnummer -> "Im Haus" weiter verkleinert
   (Wunsch Betreiber). Desktop behaelt 72px; auf dem Handy zaehlt jeder
   Pixel bis zum ersten Foto. */
@media (max-width: 767px) {
  /* Einleitungsblock gleichmaessig: vorher 44px Kopfleiste -> erste Zeile,
     16px zwischen den Zeilen, aber 48px vor "Zimmer Reservierung". */
  body.home .entry-content { margin-top: 0; }
  body.home .entry-content > h4 { margin-top: var(--pg-space-2); margin-bottom: var(--pg-space-1); }
  body.home h2.entry-title.headline { margin-top: var(--pg-space-3); margin-bottom: var(--pg-space-2); }
}