/*
Theme Name:   GGG – Grusel, Grüfte, Groschenhefte
Description:  Maßgeschneidertes Theme für groschenhefte.net. Kultiger GGG-Look (Dunkelrot/Grau/Gelb), responsiv, mit Serien-Datenbank-Templates.
Author:       Holger & Igor (mit Claude)
Version:      1.7.3
Requires PHP: 7.4
Text Domain:  ggg
*/

:root{
  --ggg-rot:#990000;
  --ggg-rot-dunkel:#6e0000;
  --ggg-gelb:#FFCC00;
  --ggg-grau-hell:#d9d9d9;
  --ggg-grau:#999999;
  --ggg-grau-dunkel:#666666;
  --text:#1c1c1c;
  --karte:#f3f1ec;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ggg-rot);overflow-y:scroll}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;color:var(--text);
  max-width:1280px;margin:20px auto 0;background:var(--ggg-grau-hell);
  min-height:100vh;
}
h1,h2,h3,.ggg-nav,.steck-label{font-family:Verdana,Geneva,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--ggg-rot)}

/* ---------- Kopfbanner ---------- */
.ggg-banner{display:block;background:var(--ggg-rot);text-align:center;padding:0;line-height:0;font-size:0}
.ggg-banner img{display:block;margin:0 auto}

/* ---------- Navigation ---------- */
.ggg-nav{background:var(--ggg-rot);position:sticky;top:0;z-index:50}
/* v1.6.3: eingeloggt verdeckt die fixe Admin-Leiste die erste Menüzeile -> Navigation darunter ankleben */
body.admin-bar .ggg-nav{top:32px}
@media (max-width:782px){body.admin-bar .ggg-nav{top:46px}}
.ggg-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.ggg-nav a{color:#fff;text-decoration:none}
.ggg-menu{display:flex;flex-wrap:wrap;list-style:none}
.ggg-menu>li>a{display:block;padding:11px 13px;font-size:14px;font-weight:bold;letter-spacing:.02em}
.ggg-menu>li>a:hover,
.ggg-menu>li.current-menu-item>a,
.ggg-menu>li.current_page_item>a{background:var(--ggg-rot-dunkel);color:var(--ggg-gelb)}
.ggg-burger{display:none;background:none;border:0;color:#fff;font-size:26px;padding:10px 6px;cursor:pointer}
.ggg-nav-titel{display:none;color:var(--ggg-gelb);font-weight:bold;font-size:15px;padding:10px 0}

/* ---------- Inhalt ---------- */
.ggg-wrap{padding:22px clamp(14px,4vw,40px)}
.ggg-brotkrumen{font-size:13px;color:var(--ggg-grau-dunkel);margin-bottom:14px}
.ggg-brotkrumen a{color:var(--ggg-rot)}
.ggg-genre-kopf{margin-bottom:18px}
.ggg-genre-kopf img{max-width:320px;width:60%}
.ggg-seitentitel{color:var(--ggg-rot);font-size:clamp(22px,3vw,30px);margin-bottom:14px}

/* ---------- Serien-Einzelseite ---------- */
.serien-kopf{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.serien-cover img{width:100%;border:1px solid #000;box-shadow:3px 3px 8px rgba(0,0,0,.35)}
.serien-titel h1{font-size:clamp(22px,3vw,30px);color:var(--ggg-rot);line-height:1.25}
.verlagszeile{font-size:15px;color:var(--ggg-grau-dunkel);margin:6px 0 14px;font-style:italic}

.ggut{background:var(--ggg-grau);border:1px solid #000;border-radius:4px;overflow:hidden}
.ggut-kopf{background:var(--ggg-grau-dunkel);color:var(--ggg-gelb);font-weight:bold;
  font-family:Verdana,Geneva,sans-serif;font-size:15px;letter-spacing:.06em;padding:8px 14px}
.ggut-body{padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;background:#b5b5b5}
.steck{font-size:14.5px}
.steck div{padding:3px 0;border-bottom:1px dotted #8b8b8b}
.steck-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#3d3d3d;display:block}
.wertung{font-size:14.5px}
.punkte{color:var(--ggg-gelb);font-size:19px;letter-spacing:3px;text-shadow:0 0 1px #000}
.punkte .leer{color:#7e7e7e;text-shadow:none}
.punkte .halb{position:relative}
.punkte .halb::after{content:"●";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--ggg-gelb);text-shadow:0 0 1px #000}
.ggut-fuss{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;padding-top:10px}
.ggg-button{display:inline-block;background:var(--ggg-rot);color:#fff !important;text-decoration:none;
  font-size:13.5px;font-weight:bold;padding:7px 14px;border-radius:3px;border:1px solid var(--ggg-rot-dunkel)}
.ggg-button:hover{background:var(--ggg-rot-dunkel);color:var(--ggg-gelb) !important}
.topinfo{grid-column:1/-1;background:var(--ggg-gelb);border:1px solid #b08c00;border-radius:3px;
  padding:7px 12px;font-size:14px;font-weight:bold}

.infotext{margin-top:34px;max-width:860px}
.infotext h2{color:var(--ggg-rot);font-size:20px;margin:26px 0 8px}
.infotext h3{color:var(--ggg-rot-dunkel);font-size:17px;margin:20px 0 6px}
.infotext p{margin-bottom:13px}
.infotext img{border:1px solid #000;box-shadow:2px 2px 6px rgba(0,0,0,.3)}
.infotext figcaption,.infotext .wp-element-caption{font-size:13px;color:var(--ggg-grau-dunkel);margin-top:5px;line-height:1.4;border:none;box-shadow:none}

/* Subserien-Kasten (kommt aus dem Infotext-Inhalt) */
.subserie{background:var(--karte);border-left:5px solid var(--ggg-rot);padding:12px 16px;margin:16px 0;font-size:15px;
  display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:start}
.subserie.ohne-bild{grid-template-columns:1fr}
.subserie img{width:100%}
.subserie h3{color:var(--ggg-rot-dunkel);font-size:16px;margin:0 0 4px}

/* ---------- Übersichts-Kacheln (Genre-Archive) ---------- */
.ggg-tabs{display:flex;gap:8px;margin:4px 0 20px;flex-wrap:wrap}
.ggg-tab{display:inline-block;padding:8px 18px;border-radius:4px 4px 0 0;font-weight:bold;font-size:14.5px;
  text-decoration:none;background:var(--ggg-grau);color:#fff;border:1px solid var(--ggg-grau-dunkel);border-bottom:none}
.ggg-tab.aktiv{background:var(--ggg-rot);color:var(--ggg-gelb)}
.kachel-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px}
.kachel{background:var(--karte);border:1px solid var(--ggg-grau);border-radius:4px;padding:12px;text-align:center;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s}
.kachel:hover{box-shadow:0 3px 10px rgba(0,0,0,.3);border-color:var(--ggg-rot)}
.kachel img{width:100%;border:1px solid #000}
.kachel .kachel-titel{font-weight:bold;font-size:14.5px;color:var(--ggg-rot);line-height:1.3}
.kachel .kachel-info{font-size:12.5px;color:var(--ggg-grau-dunkel)}

/* ---------- Beiträge / Seiten / Listen ---------- */
.artikel{max-width:860px}
.artikel + .artikel{margin-top:30px;border-top:1px solid var(--ggg-grau);padding-top:24px}
.artikel-datum{font-size:13px;color:var(--ggg-grau-dunkel)}
.artikel h2 a{color:var(--ggg-rot);text-decoration:none}

/* ---------- Startseiten-Teaser ---------- */
.teaser-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.teaser{background:var(--karte);border:1px solid var(--ggg-grau);border-radius:4px;padding:14px;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:7px;transition:box-shadow .15s}
.teaser:hover{box-shadow:0 3px 10px rgba(0,0,0,.3);border-color:var(--ggg-rot)}
.teaser img{width:100%;max-height:220px;object-fit:contain;border:1px solid #000}
.teaser-datum{font-size:13px;color:#3d3d3d;font-weight:bold}
.teaser-titel{font-weight:bold;font-size:16px;color:var(--ggg-rot);font-family:Verdana,Geneva,sans-serif;line-height:1.3}
.teaser-text{font-size:14px}
.teaser-mehr{font-size:13.5px;font-weight:bold;color:var(--ggg-rot)}

/* ---------- News-Karten (v1.5.0: Start + News zusammengeführt) ---------- */
.teaser-karte{cursor:auto}
.teaser-karte h3.teaser-titel{margin:0;font-size:16px}
.teaser-titel a{color:var(--ggg-rot);text-decoration:none}
.teaser-titel a:hover{text-decoration:underline}
.teaser-karte .teaser-text p+p{margin-top:8px}
.teaser-karte .teaser-text img{max-height:220px;width:auto;border:1px solid #000;background:#fff}
.teaser-sticky{border:2px solid var(--ggg-rot);box-shadow:0 2px 8px rgba(0,0,0,.15);
  background:#fcf3d4;position:relative}
.teaser-sticky::after{content:"\1F4CC";position:absolute;top:5px;right:7px;font-size:20px;
  transform:rotate(18deg);text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* Bild am Textende immer an die Kartenunterkante (Karten einer Reihe sind gleich hoch) */
.teaser-karte .teaser-text{display:flex;flex-direction:column;flex:1}
.teaser-karte .teaser-text>.news-bild,
.teaser-karte .teaser-text>figure:last-child{margin-top:auto;padding-top:12px}
.ggg-blaettern{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px}
.blaettern-stand{font-size:13.5px;color:#4a4a4a}

/* ---------- Werbebanner Startseite (v1.5.7) ---------- */
.ggg-werbebanner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--ggg-rot);border:2px solid var(--ggg-rot-dunkel);border-radius:4px;
  padding:12px 18px;margin:0 0 26px;text-decoration:none;transition:box-shadow .15s}
.ggg-werbebanner:hover{box-shadow:0 3px 10px rgba(0,0,0,.4)}
.ggg-werbebanner img{width:64px;height:auto;border:1px solid #000;background:#fff;flex-shrink:0}
.ggg-werbebanner .wb-titel{display:block;font-family:Verdana,Geneva,sans-serif;font-weight:bold;
  font-size:17px;color:var(--ggg-gelb);line-height:1.3}
.ggg-werbebanner .wb-sub{display:block;font-size:14px;color:#fff;margin-top:3px}
.ggg-werbebanner .wb-text{flex:1;min-width:220px}
.ggg-werbebanner .wb-button{background:var(--ggg-gelb);color:var(--text);font-weight:bold;
  font-size:14.5px;padding:9px 16px;border-radius:3px;white-space:nowrap}

/* ---------- Footer ---------- */
.ggg-footer{background:#4d4d4d;color:#e6e6e6;margin-top:40px;padding:20px clamp(14px,4vw,40px);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px}
.ggg-footer a{color:var(--ggg-gelb);text-decoration:none;margin-right:16px}
.ggg-footer a:hover{text-decoration:underline}
.nach-oben{position:fixed;right:18px;bottom:18px;background:var(--ggg-rot);color:#fff;border:1px solid var(--ggg-rot-dunkel);
  border-radius:50%;width:44px;height:44px;font-size:20px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:60}

/* ---------- Mobil ---------- */
@media (max-width:820px){
  .ggg-burger{display:block}
  .ggg-nav-titel{display:block}
  .ggg-menu{display:none;flex-direction:column;width:100%;padding-bottom:8px}
  .ggg-menu.offen{display:flex}
  .ggg-menu>li>a{padding:12px 10px;border-top:1px solid var(--ggg-rot-dunkel);font-size:15px}
  .ggg-nav-inner{flex-wrap:wrap}
  .serien-kopf{grid-template-columns:1fr}
  .serien-cover{max-width:250px;margin:0 auto}
  .ggut-body{grid-template-columns:1fr}
  .ggg-genre-kopf img{width:80%;max-width:280px}
}
@media (max-width:560px){
  .subserie{grid-template-columns:1fr}
  .subserie img{max-width:160px}
}

/* v1.1.4: News-Liste zeigt vollen Beitrag; Bild-Block der importierten News */
.news-bild{margin-top:12px}
.news-bild img{max-height:220px;width:auto;border:1px solid #000;background:#fff}
.news-bild em{display:block;font-size:12.5px;color:var(--ggg-grau-dunkel);margin-top:4px}
.artikel{padding-bottom:18px;border-bottom:1px solid var(--ggg-grau);margin-bottom:18px}

/* v1.1.6: Footer direkt nach dem Inhalt, Restflaeche dunkelgrau; Seite exakt bildschirmhoch */
body{display:flex;flex-direction:column;min-height:calc(100vh - 20px)}
body.admin-bar{min-height:calc(100vh - 52px)}
@media (max-width:782px){body.admin-bar{min-height:calc(100vh - 66px)}}
.ggg-wrap{width:100%}
.ggg-footer{flex:1 0 auto;align-content:flex-start}

/* v1.2.0: Sekundaerliteratur/Offtopics: Rubrik-Balken + Kacheln ohne Link mit Mini-Steckbrief */
.rubrik-balken{background:var(--ggg-rot);color:var(--ggg-gelb);font-size:16px;padding:8px 14px;border-radius:3px;margin:22px 0 14px}
.kachel.kachel-statisch{cursor:default}
.kachel.kachel-statisch:hover{box-shadow:none;border-color:var(--ggg-grau)}
.kachel-text{display:block;font-size:13px;margin-top:6px;line-height:1.5}

/* v1.3.0: GGG-Buecher-Seite als Buchkarten */
.buch{background:var(--karte);border:1px solid var(--ggg-grau);border-left:5px solid var(--ggg-rot);
  padding:18px 22px;margin:26px 0;scroll-margin-top:70px}
.buch-reihe{font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ggg-grau-dunkel);margin:0 0 2px}
.buch-titel{color:var(--ggg-rot);font-style:italic;font-size:24px;margin:0 0 2px;line-height:1.25}
.buch-untertitel{font-style:italic;color:#444;margin:0 0 4px;font-size:15px}
.buch-stand{font-size:12.5px;color:var(--ggg-grau-dunkel);margin:0}
.buch-variante{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;margin-top:16px;align-items:start}
.buch-variante + .buch-variante{border-top:1px dashed var(--ggg-grau-dunkel);padding-top:16px}
.buch-cover img{width:100%;height:auto;border:1px solid #000;background:#fff;box-shadow:3px 3px 8px rgba(0,0,0,.25)}
.buch-text > p:first-child{margin-top:0}
.buch-daten{background:var(--ggg-grau);border:1px solid var(--ggg-grau-dunkel);border-radius:3px;
  padding:10px 14px;font-size:14px;line-height:1.6;margin:14px 0}
.buch-kaufen .ggg-button{margin:4px 8px 0 0}
.buch-mail{font-size:13px;color:var(--ggg-grau-dunkel)}
.buch-rezensionen{border-top:1px dashed var(--ggg-grau-dunkel);margin-top:18px;padding-top:4px;font-size:14.5px}
.buch-rezensionen h3{color:var(--ggg-grau-dunkel);font-size:15px;text-transform:uppercase;letter-spacing:.5px;margin:10px 0 6px}
@media (max-width:700px){
  .buch-variante{grid-template-columns:1fr}
  .buch-cover{max-width:210px;margin:0 auto}
}

/* v1.4.0: Banner + Genre-Logos lokal im Theme */
.genre-logo{display:block;margin:0 0 4px}
/* v1.5.9: Logo-Grafik am Seitenanfang ohne Bild-Rahmen/-Schatten (wie Genre-Logos) */
.seite-mit-logo .infotext > :first-child img,
.seite-mit-logo .infotext > img:first-child{border:none;box-shadow:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== v1.7.0: SHoeS-Karten (Seite "Vergessene Helden") ===== */
.shoes-kopf{background:var(--karte);border:1px solid var(--ggg-grau);border-left:5px solid var(--ggg-rot);
  border-radius:4px;padding:16px 20px;margin:18px 0}
.shoes-kopf-text{font-size:18px;line-height:1.5}
.shoes-kopf-text em{color:var(--ggg-rot)}
.shoes-stand{font-size:12.5px;color:var(--ggg-grau-dunkel);margin-top:6px}
.shoes-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px;margin:18px 0 28px}
.shoes-karte{position:relative;display:flex;flex-direction:column;background:var(--karte);
  border:1px solid var(--ggg-grau);border-top:4px solid var(--ggg-rot);border-radius:4px;
  padding:14px 14px 16px;font-size:13.5px;line-height:1.5}
.shoes-karte p{margin:0 0 10px}
.shoes-karte p:last-child{margin-bottom:0}
.shoes-karte strong{color:var(--ggg-rot)}
.shoes-nr{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--ggg-grau-dunkel);
  font-weight:bold;margin-bottom:6px;font-family:Verdana,Geneva,sans-serif}
.shoes-thema{font-style:italic;color:#444;font-size:14.5px}
.shoes-karte .ggg-button.shoes-dl{margin-top:auto;align-self:flex-start;font-size:13px}
.shoes-karte p:has(> .shoes-dl){margin-top:auto;margin-bottom:0}
.shoes-neu{position:absolute;top:-4px;right:10px;background:var(--ggg-gelb);color:#1c1c1c;
  font-weight:bold;font-size:11px;letter-spacing:.5px;padding:3px 8px;border-radius:0 0 4px 4px;
  font-family:Verdana,Geneva,sans-serif}
.shoes-status{display:inline-block;align-self:flex-start;background:var(--ggg-grau);color:#fff;
  font-size:11px;font-weight:bold;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 8px;border-radius:3px;margin-bottom:8px;font-family:Verdana,Geneva,sans-serif}
.shoes-vorb{border-top-color:var(--ggg-grau);background:#ecebe7}
.shoes-vorb strong{color:var(--ggg-grau-dunkel)}
.shoes-cover{text-align:center}
.shoes-cover img{width:100%;max-width:220px;border:1px solid #000;box-shadow:3px 3px 8px rgba(0,0,0,.25);
  margin:0 auto 10px}
.shoes-cover em{font-size:12.5px;color:var(--ggg-grau-dunkel)}
@media (max-width:520px){
  .shoes-raster{grid-template-columns:1fr}
}

/* ===== v1.7.1: Banner-Klickfläche Zylinder-Schädel -> Vergessene Helden (alte Image-Map 1196,24-1265,133 @1280x155) ===== */
.ggg-banner-box{position:relative;display:block;line-height:0;font-size:0;background:var(--ggg-rot)}
.ggg-banner-shoes{position:absolute;left:93.4%;top:15%;width:5.6%;height:71%}
.ggg-banner-shoes:focus-visible{outline:3px solid var(--ggg-gelb);outline-offset:2px}