/**
 * Ad-Slot Styles — anbieterunabhaengig.
 * Kein Hintergrund, kein Rahmen — der Ad-Content bringt sein eigenes Styling mit.
 * Dark-Mode-neutral durch Verzicht auf Farben.
 */

/* Aeusseres Reserve-Element: haelt die CLS-Hoehenreservierung unabhaengig vom
   inneren .ad-slot-wrapper, den Googles Auto-Ads-Ablation inline ueberschreibt.
   Default fuer in-flow Slots ohne Admin-max_height; inline min-height (aus
   max_height) gewinnt. Sidebar transparent lassen (laeuft in der fixed Rail). */
.ad-reserve {
    display: block;
    width: 100%;
}
.ad-reserve--header,
.ad-reserve--in-feed,
.ad-reserve--in-content,
.ad-reserve--footer {
    margin-inline: auto;
    min-height: 100px;
}
.ad-reserve--sidebar {
    display: contents;
}

.ad-slot-wrapper {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
}

/* AdSense braucht eine messbare Breite am <ins> selbst — sonst
   wirft adsbygoogle.push() "No slot size for availableWidth=0". */
.ad-slot-wrapper > ins.adsbygoogle {
    display: block;
    width: 100%;
    min-height: 50px;
}

/* Leere Container (Ad nicht geladen, Slot-Code leer) ausblenden */
.ad-slot-wrapper:empty,
.ad-slot-wrapper[data-empty="true"] {
    display: none;
}

/* Kleiner Hinweis-Text ("Anzeige" / "Ad") in der oberen rechten Ecke */
.ad-slot-label {
    position: absolute;
    top: 2px;
    right: 6px;
    font-size: 10px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Position-spezifische Variationen.
   min-height = CLS-Default-Reservierung fuer in-flow Slots ohne Admin-max_height;
   setzt der Admin max_height, gewinnt das inline min-height aus dem Partial.
   Unfilled Ads NICHT kollabieren — Kollaps ist selbst ein Layout Shift. */
.ad-slot-wrapper--header,
.ad-slot-wrapper--in-feed,
.ad-slot-wrapper--in-content,
.ad-slot-wrapper--footer {
    margin-inline: auto;
    min-height: 100px;
}

/* Sidebar: sticky unterhalb des Headers (80px Offset fuer fixed Header) */
.ad-slot-wrapper--sidebar {
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

/* Geraete-Gating via Media Queries */
@media (max-width: 767px) {
    .ad-slot--no-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .ad-slot--no-desktop { display: none !important; }
}

/* Fixe Rail am rechten Bildschirmrand fuer den Sidebar-Sticky-Slot.
   Breite/Hoehe kommen aus den Admin-Einstellungen (inline max-width/max-height
   auf .ad-slot-wrapper im Partial) — die Rail passt sich via max-content an.
   Sichtbarkeit wird per JS im Layout gesetzt: nur anzeigen wenn die Rail
   neben dem zentrierten Content Platz hat (funktioniert fuer jede Breite). */
.ad-rail--right,
.ad-rail--left {
    position: fixed;
    top: 96px;                       /* unter fixem Header + Banner */
    z-index: 50;
    overflow: hidden;                /* auf die Admin-Box-Groesse begrenzen */
    /* Default-Sicherheitscap: volle sichtbare Hoehe statt fixem 600er-Limit.
       Ein inline gesetztes max-height (aus Admin-max_height) gewinnt (spezifischer). */
    max-height: calc(100vh - 116px);
    /* width + ggf. max-height kommen inline aus den Admin-Einstellungen */
}
.ad-rail--right { right: 20px; }
.ad-rail--left  { left: 20px; }
/* Im Vollbild von Skill-Tree / Paragon / Soeldnerbaum keine Rails: .main-content
   ist ein eigener Stacking-Kontext (z-index:1), die fixen Rails laegen sonst
   ueber der Vollbild-Flaeche. */
body.st-fullscreen-active .ad-rail,
body.mp-fullscreen-active .ad-rail,
body.st-fullscreen-active .ad-anchor,
body.mp-fullscreen-active .ad-anchor {
    display: none !important;
}
/* In der fixen Rail kein sticky/align-self; Wrapper fuellt die Box. */
.ad-rail--right .ad-slot-wrapper--sidebar,
.ad-rail--left .ad-slot-wrapper--sidebar {
    position: static;
    top: auto;
    width: 100%;
    height: 100%;
}

/* Ankeranzeige: fixe Overlay-Leiste am oberen/unteren Bildschirmrand.
   Liegt ueber dem Content (position:fixed), kein Reflow => kein CLS.
   Eigener Code statt Google Auto-Overlay; ×-Schliessen merkt sich die Session. */
.ad-anchor {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 60;                     /* ueber den Sidebar-Rails */
    display: flex;
    justify-content: center;         /* Banner zentrieren (Leiste selbst transparent) */
    /* kein Hintergrund, kein Padding, kein Schatten, KEINE Hoehenbegrenzung — die
       Leiste ist unsichtbar und genau so hoch wie die Anzeige (nichts abgeschnitten).
       Das JS schrumpft den inneren Container auf die echte Banner-Breite, damit kein
       Rand entsteht und das × buendig am Banner sitzt. */
}
.ad-anchor--bottom { bottom: 0; }
.ad-anchor--top    { top: 0; }
.ad-anchor[hidden] { display: none; }
/* Innerer Container: Positionsanker fuer das ×. flex:1 ist nur die Start-/Mess-
   Breite (sonst schrumpft er auf 0 => AdSense "availableWidth=0"); nach dem Laden
   setzt das JS die echte Banner-Breite, damit das × buendig am Banner sitzt. */
.ad-anchor__inner  { position: relative; flex: 1 1 auto; min-width: 0; max-width: 100%; }
/* Abstaende des Partials im Anker entfernen, damit das Banner buendig sitzt. */
.ad-anchor .ad-reserve { margin: 0 !important; }
.ad-anchor__close {
    position: absolute;
    top: 50%;                        /* vertikal mittig am rechten Banner-Rand */
    right: 2px;
    transform: translateY(-50%);
    z-index: 1;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 18px;
    line-height: 1;
}
.ad-anchor__close:hover { background: rgba(0, 0, 0, 0.8); }

/* Safety: das <ins>-Element selbst darf nie einen weissen Hintergrund malen.
   (Weisse Flaechen INNERHALB des Google-iframes fixt nur die responsive Unit.) */
ins.adsbygoogle { background: transparent !important; }

/* Mobil (320x50-Anker, Migration 380): das × sitzt OBERHALB des Banners am rechten
   Rand statt darauf — auf 320px Breite deckt es sonst einen Teil der Anzeige ab und
   liegt zu nah am Tap-Ziel der Ad. bottom:100% haengt es an die Oberkante von
   .ad-anchor__inner; die Leiste selbst bleibt exakt so hoch wie die Anzeige. */
@media (max-width: 767px) {
    .ad-anchor__close {
        top: auto;
        bottom: 100%;
        right: 0;
        transform: none;
        border-radius: 4px 4px 0 0;
    }
}

/* Anker-Wrapper ohne Zeilenhoehe: das <ins> ist inline-block und stand sonst auf
   der Text-Grundlinie — ~8px transparenter Streifen unter dem Banner, die Leiste
   war hoeher als die Anzeige (58px statt 50 mobil, 99 statt 90 Desktop). */
.ad-anchor .ad-slot-wrapper { line-height: 0; }