/*
Theme Name: XTELEFONSEX
Description: Theme für xtelefonsex.at. Benötigt das Plugin "Ladies Manager".
Version: 1.19.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: xtelefonsex
*/


:root{
  --ink:#0B0809;
  --surface:#130E10;
  --surface-2:#1B1416;
  --wine:#5C0E1B;
  --wine-lit:#8E1524;
  --magenta:#E41779;
  --gold:#C9A227;
  --gold-soft:#E8CE7A;
  --paper:#F2EAE4;
  --muted:#9A8A80;
  --line:rgba(201,162,39,.17);

  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,monospace;

  --r:14px;
  --wrap:1340px;
  --gap:clamp(1rem,2.5vw,1.75rem);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.025em;line-height:1.1;margin:0}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;border-radius:4px}
.wrap{width:min(100% - 2*var(--gap),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:120;background:var(--gold);color:#fff;padding:.6rem 1rem;border-radius:999px}

/* ---------- Kopf ---------- */
/* Kein backdrop-filter: er würde die Kopfzeile zum Bezugsrahmen für
   fest positionierte Kindelemente machen und das mobile Menü verschieben. */
.masthead{position:sticky;top:0;z-index:60;background:rgba(11,8,9,.97);border-bottom:1px solid var(--line)}
.masthead .bar{display:flex;align-items:center;gap:1.5rem;padding:.75rem 0}
.brand{display:block;margin-right:auto;line-height:0;flex:none}
.brand img{width:auto;height:34px}
@media(max-width:520px){.brand img{height:28px}}
.nav{display:flex;gap:1.35rem;font-size:.88rem}
.nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--paper)}
@media(max-width:960px){.nav{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.88rem;font-weight:600;padding:.6rem 1.2rem;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--paper);
  text-decoration:none;cursor:pointer;transition:.22s;
}
.btn:hover{border-color:var(--gold)}
.btn--solid{background:var(--gold);border-color:var(--gold);color:#0B0809;box-shadow:0 6px 24px -8px rgba(201,162,39,.65)}
.btn--solid:hover{background:var(--gold-soft);border-color:var(--gold-soft)}

/* ---------- Schmales Kopfband statt großem Hero ---------- */
.band{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
/* Bildebene: bewusst weich und zurueckgenommen */
.band::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:image-set(url("assets/band-bg.webp") type("image/webp"),url("assets/band-bg.jpg") type("image/jpeg"));
  background-image:-webkit-image-set(url("assets/band-bg.webp") type("image/webp"),url("assets/band-bg.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:46% 40%;
  background-repeat:no-repeat;
  filter:saturate(.9);
  opacity:.38;
}
/* Abdunkelung, damit die Schrift immer traegt */
.band::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(95deg,rgba(11,8,9,.96) 0%,rgba(11,8,9,.83) 32%,rgba(11,8,9,.45) 66%,rgba(11,8,9,.38) 100%),
    radial-gradient(65% 165% at 2% 0%,rgba(228,23,121,.24),transparent 58%),
    radial-gradient(50% 145% at 55% 6%,rgba(142,21,36,.24),transparent 70%);
}
.band .inner{position:relative;z-index:1}
@media(max-width:820px){
  .band::before{opacity:.32;background-position:46% 28%}
  .band::after{background:
    linear-gradient(180deg,rgba(11,8,9,.86) 0%,rgba(11,8,9,.80) 55%,rgba(11,8,9,.92) 100%),
    radial-gradient(80% 120% at 5% 0%,rgba(228,23,121,.22),transparent 62%);}
}
.band .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(2.25rem,5.5vw,4rem) 0;
  flex-wrap:wrap;
}
.band__text{flex:1 1 30rem;min-width:0}

/* Kernaussagen rechts neben der Überschrift */
.facts{
  flex:0 1 17rem;
  display:grid;
  gap:1.1rem;
  margin:0;
  padding-left:clamp(1rem,2vw,1.6rem);
  border-left:1px solid rgba(201,162,39,.28);
}
.facts div{display:grid;gap:.2rem}
.facts dt{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}
.facts dd{
  margin:0;
  font-size:.85rem;
  line-height:1.5;
  color:var(--paper);
}
@media(max-width:820px){
  .facts{
    flex:1 1 100%;
    border-left:0;
    padding-left:0;
    padding-top:1.4rem;
    border-top:1px solid rgba(201,162,39,.28);
    grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  }
}
.band__lede{color:var(--muted);max-width:62ch;margin:.9rem 0 0;font-size:.92rem;line-height:1.65}
.band__lede--extra{margin-top:.7rem}
.band__lede--extra p{margin:0 0 .6rem}
.band__lede--extra p:last-child{margin-bottom:0}
.band h1,.band .band__titel{font-size:clamp(1.5rem,3.4vw,2.4rem);max-width:22ch;font-weight:700;line-height:1.1;letter-spacing:-.025em;margin:0}
.band h1 em,.band .band__titel em{font-style:normal;color:var(--magenta);font-weight:500}
.band .callbox{margin-left:auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.band .tel{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.3rem,3vw,1.9rem);text-decoration:none;color:var(--paper);
}
.band .tel:hover{color:var(--gold-soft)}
.band .tariff{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);margin:.2rem 0 0;max-width:30ch;line-height:1.5}
@keyframes ping{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- Filterleiste ---------- */
.filters{position:sticky;top:57px;z-index:50;background:rgba(11,8,9,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.filters .row{display:flex;gap:.45rem;padding:.7rem 0;overflow-x:auto;scrollbar-width:none;justify-content:center;justify-content:safe center}
.filters .row::-webkit-scrollbar{display:none}
.filter{
  flex:none;font-size:.83rem;font-weight:500;padding:.42rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:.22s;font-family:inherit;
}
.filter:hover{color:var(--paper)}
.filter[aria-current]{background:var(--gold);border-color:var(--gold);color:#0B0809;font-weight:600}
.filter{text-decoration:none;display:inline-flex;align-items:center}

/* ---------- Raster ---------- */
.grid-section{padding:clamp(1.5rem,3vw,2.25rem) 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:clamp(.6rem,1.2vw,.9rem)}
@media(max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}}

.tile{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
  aspect-ratio:3/4;isolation:isolate;transition:transform .3s,border-color .3s;
}
.tile:hover{transform:translateY(-4px);border-color:rgba(228,23,121,.55)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,7,9,0) 32%,rgba(10,7,9,.55) 58%,rgba(10,7,9,.96))}

.tile__cam{
  position:absolute;top:.6rem;right:.6rem;
  font-family:var(--f-mono);font-size:.55rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(228,23,121,.9);
  padding:.2rem .5rem;border-radius:999px;
}
.tile__region{
  position:absolute;top:.6rem;left:.6rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(10,7,9,.7);backdrop-filter:blur(6px);
  padding:.25rem .55rem;border-radius:999px;color:var(--gold-soft);border:1px solid rgba(201,162,39,.25);
}


.tile__body{position:absolute;inset:auto 0 0 0;padding:.8rem}
.tile__name{font-size:1rem;font-weight:700;margin:0}
.tile__name a{text-decoration:none}
.tile__name a::before{content:"";position:absolute;inset:0}
.tile__teaser{font-size:.78rem;color:var(--muted);margin:.15rem 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__tel{
  position:relative;z-index:2;display:inline-block;
  font-family:var(--f-mono);font-size:.76rem;font-weight:500;
  padding:.38rem .8rem;border-radius:999px;background:var(--gold);color:#0B0809;text-decoration:none;
  transition:background .22s;
}
.tile__tel:hover{background:var(--gold-soft)}

.tile.is-hidden{display:none}

.more{display:flex;justify-content:center;margin-top:1.75rem}

/* ---------- Kategorien ---------- */
.cats{padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);font-weight:500;margin:0 0 1.1rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
/* Gleiche Machart wie die Kategorien auf den Regionsseiten: heller Text,
   goldener Rand, leichte Füllung. Grau auf Schwarz war zu blass. */
.chips a{
  font-size:.84rem;font-weight:500;text-decoration:none;
  padding:.45rem 1rem;border-radius:999px;
  border:1px solid rgba(201,162,39,.45);
  background:rgba(242,234,228,.05);
  color:var(--paper);
  transition:.22s;
}
.chips a:hover{color:#0B0809;border-color:var(--gold);background:var(--gold)}

/* Kategorienleiste. Bricht auf mehrere Zeilen um – bei vierzehn Einträgen
   passt sonst nichts mehr in eine Zeile, und ein Teil verschwindet rechts
   ohne sichtbaren Hinweis. */
.chips--line{
  flex-wrap:wrap;
  gap:.45rem;
  padding-bottom:.2rem;
}
.chips--line a{flex:none;font-size:.8rem;padding:.42rem .85rem}

/* Auf schmalen Bildschirmen bleibt es eine Zeile zum Wischen – dort ist
   das die gewohnte Geste und spart Höhe. */
@media(max-width:640px){
  .chips--line{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* Der angeschnittene letzte Eintrag zeigt, dass es weitergeht. */
    padding-right:1.5rem;
  }
  .chips--line::-webkit-scrollbar{display:none}
}

/* ---------- Werbeplätze ---------- */
.ads{padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line)}
.ads__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,215px));
  gap:clamp(.6rem,1.4vw,.9rem);
  justify-content:center;
}
.ads__grid a{
  display:block;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
  line-height:0;
  transition:transform .3s ease,border-color .3s ease;
}
.ads__grid a:hover{transform:translateY(-3px);border-color:var(--gold)}
.ads__grid img{width:100%;height:auto;aspect-ratio:300/250;object-fit:cover}
.ads__note{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:1rem 0 0;
}

/* ---------- SEO-Text ---------- */
.copy{padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--line)}
.copy .inner{max-width:70ch;color:var(--muted)}
.copy .inner a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}
.copy .inner a:hover{color:var(--gold)}
.copy .inner strong{color:var(--paper);font-weight:600}
.copy h1{font-size:clamp(1.5rem,3.2vw,2.1rem);color:var(--paper);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 1rem}
.copy h1 em{font-style:normal;color:var(--magenta);font-weight:500}
.copy h2{font-size:clamp(1.4rem,3vw,2rem);color:var(--magenta);margin:0 0 1rem}
.copy h3{font-size:1.1rem;color:var(--magenta);margin:2rem 0 .6rem}
/* Der Weiterlesen-Aufklapper. Das :not(.faq__item) ist notwendig:
   die FAQ-Liste steht im selben .copy-Abschnitt, und ".copy details
   summary" ist spezifischer als ".faq__item summary" – ohne die
   Abgrenzung überschreiben diese Regeln dort Schrift, Farbe und
   Pfeil. */
.copy details:not(.faq__item) summary{cursor:pointer;list-style:none;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin-top:1.4rem}
.copy details:not(.faq__item) summary::-webkit-details-marker{display:none}
.copy details:not(.faq__item) summary::after{content:" ↓"}
.copy details:not(.faq__item)[open] summary::after{content:" ↑"}

/* ---------- FAQ ----------
   Die FAQ steht nicht in einem eigenen Abschnitt, sondern kommt als
   Inhalt der Startseite aus dem Editor und landet damit in .copy.
   Deshalb hier kein eigener Abstand nach außen, nur nach oben zur
   Überschrift. */
.copy h2:not(:first-child){margin-top:2.75rem}
.faq__liste{max-width:70ch;margin-top:1.75rem;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.05rem 0;
  font-size:1rem;font-weight:600;color:var(--paper);
  transition:color .2s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--gold)}
.faq__item summary::after{
  content:"";flex:none;
  width:.7rem;height:.7rem;
  border-right:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);
  /* Erst schieben, dann drehen. Umgekehrt wirkt das translateY auf der
     bereits gedrehten Achse und versetzt den Pfeil diagonal. */
  transform:translateY(-.15rem) rotate(45deg);
  transition:transform .25s ease;
}
.faq__item[open] summary::after{transform:translateY(.15rem) rotate(-135deg)}
.faq__item p{margin:0 0 1.1rem;color:var(--muted);max-width:64ch}
.faq__item p:last-child{margin-bottom:1.2rem}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line);background:var(--surface);padding:clamp(2rem,4vw,2.75rem) 0 clamp(2rem,4vw,3rem);font-size:.87rem;color:var(--muted)}
.foot__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media(max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__marke img{height:34px;width:auto;margin-bottom:1rem}
.foot__marke p{margin:0 0 .35rem;font-family:var(--f-mono);font-size:.7rem;line-height:1.7}
.foot h4{font-family:var(--f-mono);font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin:0 0 .85rem;font-weight:500}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.42rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--paper)}

/* ---------- Anrufleiste ---------- */
.callbar{
  position:fixed;inset:auto 0 0 0;z-index:70;display:none;align-items:center;gap:1rem;
  padding:.65rem var(--gap) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(10,7,9,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.callbar p{font-family:var(--f-mono);font-size:.66rem;color:var(--muted);line-height:1.4;margin:0}
.callbar .btn{margin-left:auto;flex:none}
@media(max-width:820px){.callbar{display:flex}}

/* ---------- Altersnachweis ---------- */
#agegate{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;padding:var(--gap)}
#agegate::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 45% at 50% 32%,rgba(228,23,121,.28),transparent 70%)}
#agegate .box{position:relative;max-width:33rem;text-align:center}
#agegate h2{font-size:clamp(1.5rem,4.5vw,2.2rem);color:var(--magenta);margin:0 0 .9rem}
#agegate p{color:var(--muted);margin:0 0 1.8rem}
.gate-actions{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}


/* ---------- WordPress-Anpassungen ---------- */
/* Aufzählungspunkte sicher entfernen – auch bei Listen, die WordPress
   selbst erzeugt. Bewusst mehrfach benannt, damit die Regel jede
   Grundeinstellung überstimmt. */
.masthead ul,
.nav ul,
.nav ul.nav-liste{list-style:none;margin:0;padding:0;display:flex;gap:1.35rem}
.masthead li,
.nav li{margin:0;list-style:none}
.masthead li::marker,
.nav li::marker{content:none}
.copy .inner h2{color:var(--magenta)}
.copy .inner h3{color:var(--magenta);font-size:1.1rem;margin:2rem 0 .6rem}
.copy .inner ul{padding-left:1.2rem}
.wp-block-image img{border-radius:12px}
.alignwide,.alignfull{max-width:100%}


/* ---------- Untermenü im Hauptmenü ---------- */
.nav li{position:relative}

/* WordPress vergibt für Untermenüs die Klasse "sub-menu". Sie wird hier
   ausdrücklich mitbenannt, damit die Regel unabhängig von der
   Verschachtelung greift. */
.nav .sub-menu,
.nav ul ul{
  position:absolute !important;
  top:100%;
  left:-1.1rem;
  display:none;
  flex-direction:column;
  gap:.1rem;
  min-width:12rem;
  width:max-content;
  margin:0;
  padding:.55rem;
  list-style:none;
  border:1px solid rgba(201,162,39,.24);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(27,20,22,.99),rgba(11,8,9,.99));
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 24px 50px -24px rgba(0,0,0,1),
    0 0 0 4px rgba(11,8,9,.35);
  z-index:70;
}

/* Kleine Spitze, die auf den Menüpunkt zeigt */
.nav .sub-menu::before{
  content:"";
  position:absolute;
  top:-5px;
  left:1.6rem;
  width:9px;
  height:9px;
  background:rgba(27,20,22,.99);
  border-left:1px solid rgba(201,162,39,.24);
  border-top:1px solid rgba(201,162,39,.24);
  transform:rotate(45deg);
}

/* Der Bereich zwischen Menüpunkt und Feld bleibt überfahrbar */
.nav .sub-menu::after{
  content:"";
  position:absolute;
  top:-14px;
  left:0;
  right:0;
  height:14px;
}

.nav .sub-menu li,
.nav ul ul li{width:100%;border:0;margin:0}

.nav .sub-menu a,
.nav ul ul a{
  display:block;
  padding:.52rem .85rem;
  border-radius:10px;
  font-size:.85rem;
  color:var(--muted);
  white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.nav .sub-menu a:hover,
.nav ul ul a:hover{
  color:var(--paper);
  background:rgba(201,162,39,.14);
}

/* Lange Listen zweispaltig – wird per Skript vergeben */
.nav .sub-menu.breit{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:.1rem .35rem;
}
.nav li:hover > .sub-menu.breit,
.nav li:focus-within > .sub-menu.breit,
.nav li.offen > .sub-menu.breit{display:grid !important}

@keyframes xt-drop{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu,
.nav li.offen > .sub-menu,
.nav li:hover > ul,
.nav li:focus-within > ul,
.nav li.offen > ul{
  display:flex !important;
  animation:xt-drop .18s ease both;
}

.nav .hat-untermenue > a::after,
.nav .menu-item-has-children > a::after{
  content:"";
  display:inline-block;
  width:.35rem;height:.35rem;
  margin-left:.45rem;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-.1rem);
}


/* ---------- Abschnittsüberschriften ---------- */
.section__head{margin-bottom:1.4rem}
.top-titel{
  font-size:clamp(1.3rem,3vw,1.9rem);
  letter-spacing:-.025em;
  margin:0;
}
.top-titel em{font-style:normal;color:var(--magenta)}


/* ---------- Ladeverhalten ---------- */

/* Auf schmalen Bildschirmen reicht die kleine Fassung: 21 statt 54 KB. */
@media(max-width:900px){
  .band::before{
    background-image:image-set(url("assets/band-bg-klein.webp") type("image/webp"),url("assets/band-bg-klein.jpg") type("image/jpeg"));
    background-image:-webkit-image-set(url("assets/band-bg-klein.webp") type("image/webp"),url("assets/band-bg-klein.jpg") type("image/jpeg"));
  }
}

/* Abschnitte außerhalb des Sichtbereichs überspringt der Browser beim
   Berechnen des Layouts. Die Höhenangabe verhindert Sprünge in der
   Scrollleiste. */
.grid-section,.cats,.ads,.copy{
  content-visibility:auto;
  contain-intrinsic-size:auto 600px;
}

/* Der Glanz läuft nur, solange die Karte im Blick ist. */
.lm-card--top::before,.tile--top::before{
  will-change:auto;
}

/* =========================================================================
   Mobiles Menü
   ====================================================================== */

.menue-schalter{
  display:none;
  width:44px;height:44px;
  flex:none;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);
  border-radius:12px;cursor:pointer;padding:0;
}
.menue-schalter__balken,
.menue-schalter__balken::before,
.menue-schalter__balken::after{
  display:block;width:18px;height:1.5px;
  background:var(--paper);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.menue-schalter__balken{position:relative}
.menue-schalter__balken::before,
.menue-schalter__balken::after{content:"";position:absolute;left:0}
.menue-schalter__balken::before{top:-6px}
.menue-schalter__balken::after{top:6px}

.menue-offen .menue-schalter__balken{background:transparent}
.menue-offen .menue-schalter__balken::before{transform:translateY(6px) rotate(45deg)}
.menue-offen .menue-schalter__balken::after{transform:translateY(-6px) rotate(-45deg)}


/* Die Kopfzeile bildet eine eigene Ebene. Solange das Menü offen ist, muss
   sie deshalb über der Abdunkelung liegen – sonst verdunkelt diese auch das
   Menü, das ja in der Kopfzeile steckt. */
body.menue-offen .masthead{z-index:70}

/* Auf kleinen Bildschirmen umbrechen statt seitlich scrollen – sonst bleibt
   die Hälfte der Regionen und Kategorien unsichtbar. */
@media(max-width:900px){
  .filters .row{
    flex-wrap:wrap;
    overflow-x:visible;
    justify-content:flex-start;
    gap:.4rem;
    padding:.75rem 0;
  }
  /* Doppelt benannt, damit die Regel die einzeilige Grundeinstellung
     überstimmt – unabhängig davon, wo sie im Stylesheet steht. */
  .chips.chips--line{
    flex-wrap:wrap;
    overflow-x:visible;
  }
  .chips.chips--line a{flex:none}
}


/* Die Regel für Menülinks würde sonst die Schriftfarbe des Buttons
   überstimmen – daher hier gezielt zurücksetzen. */
.nav a.btn--solid{color:#0B0809}
.nav a.btn--solid:hover{color:#0B0809}
.nav a.btn{text-decoration:none}

/* Schließen-Knopf im Panel. Am Desktop nicht vorhanden, dort gibt es
   kein Panel. */
.menue-schliessen{
  display:none;
  position:absolute;
  top:1rem;right:1rem;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--paper);
  font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0;
  transition:border-color .2s,color .2s;
}
.menue-schliessen:hover{border-color:var(--gold);color:var(--gold)}

.menue-schatten{
  position:fixed;inset:0;z-index:64;
  background:rgba(11,8,9,.7);
  backdrop-filter:blur(2px);
}

.nav__cta{display:none}

@media(max-width:960px){

  .menue-schalter{display:flex}
  .menue-schliessen{display:flex}
  .kopf-cta{display:none}

  .nav{
    position:fixed;
    top:0;right:0;bottom:0;
    z-index:65;
    width:min(20rem,86vw);
    display:block;
    padding:5rem 1.4rem 2rem;
    background:var(--surface);
    border-left:1px solid var(--line);
    box-shadow:-24px 0 60px -30px rgba(0,0,0,.95);
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .menue-offen .nav{transform:translateX(0)}

  /* ul.nav-liste statt .nav-liste: die Regel weiter oben setzt das Menü
     auf display:flex und ist spezifischer. Ohne dasselbe Gewicht hier
     blieben die Punkte auch im Panel nebeneinander stehen. */
  .nav ul.nav-liste{
    display:block;
    margin:0 0 1.5rem;
    gap:0;
  }
  .nav ul.nav-liste li{border-bottom:1px solid var(--line)}
  .nav ul.nav-liste > li > a{
    display:block;
    padding:.95rem .2rem;
    font-size:1rem;
    color:var(--paper);
  }
  .nav ul.nav-liste > li > a:hover{color:var(--gold)}

  /* Untermenüs klappen auf, statt zu schweben */
  /* display:none braucht hier Nachdruck: die Hover-Regel weiter oben ist
     spezifischer, und auf Touch-Geräten bleibt :hover nach dem Tippen am
     Element hängen. Ohne !important ließe sich ein Untermenü öffnen, aber
     nicht wieder schließen. */
  .nav .sub-menu,
  .nav ul ul,
  .nav ul.nav-liste ul{
    position:static !important;display:none !important;
    min-width:0;padding:0 0 .6rem;margin:0;gap:0;
    border:0;border-radius:0;background:transparent;
    backdrop-filter:none;box-shadow:none;
  }
  /* Die Hover-Regeln der Desktop-Ansicht tragen selbst !important und
     dieselbe Spezifität. Auf Touch-Geräten bleibt :hover nach dem Tippen
     am Element hängen und hielt das Untermenü offen. Deshalb werden sie
     hier gezielt zurückgesetzt – gleicher Selektor, gleiches Gewicht,
     nur später im Stylesheet. */
  .nav li:hover > .sub-menu,
  .nav li:focus-within > .sub-menu,
  .nav li:hover > ul,
  .nav li:focus-within > ul{
    display:none !important;
    animation:none !important;
  }
  .nav li:hover > .sub-menu.breit,
  .nav li:focus-within > .sub-menu.breit{display:none !important}

  /* Erst danach das Aufklappen per Klasse – so gewinnt es. */
  .nav li.offen > .sub-menu,
  .nav li.offen > ul{display:block !important;animation:none !important}
  .nav li.offen > .sub-menu.breit{display:block !important}
  .nav .sub-menu li,
  .nav ul ul li,
  .nav ul.nav-liste ul li{border:0}
  .nav .sub-menu a,
  .nav ul ul a{padding:.5rem .2rem .5rem 1rem;color:var(--muted)}
  .nav .menu-item-has-children > a::after,
  .nav .hat-untermenue > a::after{
    float:right;margin-top:.45rem;
    transition:transform .25s ease;
  }
  .nav li.offen > a::after{transform:rotate(-135deg) translateY(-.1rem)}

  .nav__cta{display:inline-flex;width:100%;justify-content:center}
}

@media(min-width:961px){
  .menue-schatten{display:none}
}

/* =========================================================================
   Einwilligung
   ====================================================================== */

.xt-consent{
  position:fixed;inset:auto 0 0 0;z-index:150;
  background:rgba(11,8,9,.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:1rem var(--gap) calc(1rem + env(safe-area-inset-bottom));
}
.xt-consent__inner{
  width:min(100% - 2*var(--gap),var(--wrap));
  margin-inline:auto;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.xt-consent__titel{
  font-family:var(--f-display);font-weight:700;
  font-size:1rem;margin:0 0 .25rem;
}
.xt-consent__text{
  font-size:.85rem;color:var(--muted);margin:0;max-width:62ch;
}
.xt-consent__text a{color:var(--gold-soft)}
.xt-consent__aktionen{
  display:flex;gap:.6rem;margin-left:auto;flex-wrap:wrap;
}
@media(max-width:700px){
  .xt-consent__aktionen{margin-left:0;width:100%}
  .xt-consent__aktionen .btn{flex:1 1 auto;justify-content:center}
}

/* =========================================================================
   Feinschliff fürs Handy
   ====================================================================== */

@media(max-width:640px){

  /* Tippziele groß genug */
  .filter{padding:.55rem 1rem;font-size:.85rem}
  .chips a{padding:.55rem 1.05rem}
  .lm-card__tel{padding:.5rem 1rem;font-size:.85rem}

  /* Kopfband kompakter */
  .band .inner{padding:1.75rem 0}
  .band h1,.band .band__titel{font-size:clamp(1.5rem,7vw,2rem)}
  .band__lede{font-size:.9rem}

  /* Kernaussagen als Liste statt Raster */
  .facts{grid-template-columns:1fr;gap:.9rem}
  .facts dd{font-size:.83rem}

  /* Fußbereich luftiger */
  .foot{padding-bottom:3rem}
  .foot__grid{gap:1.75rem}

  /* Blätterung gut treffbar */
  .pagination .page-numbers{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;
  }
}

/* Blätterung allgemein */
.pagination,.nav-links{
  display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
.pagination .page-numbers,.nav-links .page-numbers{
  padding:.5rem .95rem;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);
  text-decoration:none;font-size:.88rem;
  transition:color .2s,border-color .2s,background .2s;
}
.pagination .page-numbers:hover,.nav-links .page-numbers:hover{
  color:#0B0809;background:var(--gold);border-color:var(--gold);
}
.pagination .current,.nav-links .current{
  color:#0B0809;background:var(--gold);border-color:var(--gold);font-weight:600;
}

.screen-reader-text{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

body.menue-offen{overflow:hidden}


/* Textseiten wie Impressum, Datenschutz, AGB */
.copy .inner figure{margin:1.25rem 0}
.copy .inner img{border-radius:12px;max-width:350px}
.copy .inner hr{border:0;border-top:1px solid var(--line);margin:3rem 0}
.copy .inner h2{font-size:1.35rem;margin:2.5rem 0 .9rem}
.copy .inner h2:first-child{margin-top:0}
.copy .inner h3{font-size:1.02rem;margin:1.9rem 0 .6rem}
.copy .inner ul{padding-left:1.2rem;margin:0 0 1.1rem}
.copy .inner li{margin:0 0 .35rem}
.copy .inner p{margin:0 0 1rem}


/* ---------- Textseiten: Bilder linksbündig ---------- */

/* Der Inhaltsbereich selbst behält seine Zentrierung – er trägt zugleich
   die Klasse "wrap" und würde sonst am Fensterrand kleben. Nur Bilder,
   die WordPress standardmäßig mittig setzt, rücken nach links. */
.copy .inner figure,
.copy .inner .wp-block-image{
  margin-left:0;
  margin-right:auto;
  text-align:left;
}
.copy .inner figure img,
.copy .inner .wp-block-image img{margin-left:0;margin-right:auto}
.copy .inner .aligncenter{margin-left:0;margin-right:auto}