/* Theater der Vampire – Archiv
   Nachbau des alten PHPKIT-Stils „TdV rotgolden“ (Style 36) */
:root{
  --gold:#b79a69; --link:#ddb97f; --hover:#ffd692;
  --rot:#330000; --rot2:#440000; --schwarz:#000;
}
*{box-sizing:border-box}
html{background:#000}
body{margin:0;background:#000 url(../images/teaser/vorhanglinks.jpg) repeat-y;color:var(--gold);
  font:13px/1.55 Arial,Helvetica,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--hover);text-decoration:underline}
img{max-width:100%;height:auto;border:0}
hr{border:0;border-top:1px solid var(--gold)}

/* Kopf: Banner und Textmenü linksbündig wie im Original */
.kopf{padding:0 4px}
.banner{display:block;margin:0}
.topnav{padding:6px 0 4px;color:var(--gold)}
.topnav a{color:var(--gold);padding:0 3px}
.topnav a:hover{color:var(--hover)}

/* Spalten: Menü links über dem Vorhang, Inhalt im dunkelroten Rahmen */
.rahmen{display:flex;gap:10px;align-items:flex-start;padding:0 4px 0 2px}
.seite{flex:0 0 133px}
.box{margin:0 0 6px}
.box h3{margin:0 0 4px;color:var(--gold);font-size:14px;font-weight:bold;text-align:center;
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);padding:0 2px;line-height:1.35}
.box ul{list-style:none;margin:0 0 4px;padding:0}
.box li a{display:block;text-align:left;padding:1px 2px;color:var(--gold);font-size:12px}
.box li a:hover{color:var(--hover);text-decoration:none}
.box img{display:block;margin:0 auto 4px}

.inhalt{flex:1;min-width:0;border:1px solid var(--gold);background:var(--rot);padding:0 0 16px;min-height:480px}
.inhalt>*{margin-left:16px;margin-right:16px}
.start{text-align:center;padding-top:16px}
.inhalt .text a, .inhalt .liste a{text-decoration:underline}
h1{font-size:16px;color:var(--link);margin:10px 12px 8px;font-weight:bold}
h2{font-size:15px;color:var(--link)}h3{font-size:14px;color:var(--link)}h4{font-size:18px}
.pfad{font-size:11px;margin-top:6px}
.meta,.klein{font-size:11px;color:var(--gold);opacity:.85}
.wichtig{font-weight:bold;text-align:center}
.teaser{display:block;margin:10px auto}
.text{overflow-wrap:anywhere}
.text table{max-width:100%}
.text font{font-family:inherit}
.bb-imgl{float:left;margin:0 12px 8px 0;max-width:45%}
.bb-imgr{float:right;margin:0 0 8px 12px;max-width:45%}
.bb-right{text-align:right}.bb-center{text-align:center}
.bb-quote{background:#000;border:1px solid var(--gold);margin:6px 0;padding:4px 10px}
article::after,.text::after{content:"";display:block;clear:both}
.liste{padding-left:18px}.liste li{margin:3px 0}
.kapitel{list-style:none;padding:0;margin-top:12px}
.kapitel li{background:#000;border:1px solid var(--gold);margin:4px 0;padding:4px 10px}
.kapitel li>a{font-weight:bold}

.tabelle{width:100%;border-collapse:collapse;border:1px solid var(--gold);background:#000}
.tabelle th{background:var(--rot2);color:var(--gold);text-align:left;padding:3px 6px;border-bottom:1px solid var(--gold)}
.tabelle td{padding:4px 6px;border-bottom:1px solid #3a2a14;vertical-align:top}
.zahl{text-align:center!important}
.beitrag{display:flex;border:1px solid var(--gold);margin:8px 16px;background:#000}
.autor{flex:0 0 150px;padding:6px;background:var(--rot2);border-right:1px solid var(--gold);display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.beitrag .text{padding:6px 10px;flex:1;min-width:0}
.smilie{vertical-align:middle}
.seiten{margin:6px 12px;font-size:12px}.seiten a,.seiten strong{padding:0 3px}

.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:12px}
.kachel{display:flex;flex-direction:column;border:1px solid var(--gold);background:#000;padding:4px;text-align:center}
.kachel img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:4px;background:#000}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.raster img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--gold);background:var(--rot)}
.raster a:hover img{border-color:var(--hover)}
.blaettern{display:flex;justify-content:space-between;align-items:center;margin:6px 12px}
.bild{margin:0 12px;text-align:center}.bild img{max-height:80vh;border:1px solid var(--gold)}
.faq{border-bottom:1px solid #3a2a14;padding:5px 0}.faq summary{cursor:pointer;color:var(--link);font-weight:bold}
.fuss{text-align:center;font-size:11px;padding:16px 16px 24px 145px}

@media (max-width:820px){
  body{background-image:none}
  .kopf,.rahmen,.fuss{padding-left:8px;padding-right:8px}
  .inhalt>*{margin-left:10px;margin-right:10px}
  .box li a{text-align:center}
  .rahmen{flex-direction:column}.seite{flex:none}
  .box ul{display:flex;flex-wrap:wrap}.box li{flex:1 1 50%}
  .box-bild{display:none}
  .beitrag{flex-direction:column;margin:8px 6px}.autor{flex:none;border-right:0;border-bottom:1px solid var(--gold);flex-direction:row;justify-content:space-between}
  .bb-imgl,.bb-imgr{float:none;max-width:100%;margin:0 0 8px}
}
.seitenumbruch{border:0;border-top:1px dashed var(--gold);margin:18px 0;opacity:.6}
/* Forum wie im alten PHPKIT-Forum */
.forumkopf{display:flex;align-items:center;gap:12px;border:1px solid var(--gold);background:#000;padding:8px 10px;margin-top:14px;margin-bottom:8px}
.forumkopf>div:nth-child(2){flex:1}
.forumzahlen{font-weight:bold;font-size:12px;text-align:right}
.tabelle.forum td{vertical-align:middle;border-bottom:1px solid var(--gold)}
.tabelle.forum td.icon{width:1%;text-align:center;padding:4px 4px}
.tabelle.forum td.letzter{width:24%;font-size:12px}
.tabelle.forum a{text-decoration:underline}
.tabelle.forum tr:hover td{background:var(--rot)}
.posttitel{margin-bottom:6px}.posttitel img{vertical-align:middle}
.legende img{vertical-align:middle;margin-left:10px}
@media (max-width:820px){.forumzahlen{display:none}.tabelle.forum td.letzter,.tabelle.forum th:last-child{display:none}}
.tabelle.forum td.icon img{max-width:none}
.inhalt>.tabelle{width:calc(100% - 32px)}
@media (max-width:820px){.inhalt>.tabelle{width:calc(100% - 20px)}}
.autor{align-items:center;text-align:center}
.autor .avatar{display:block;max-width:100px;max-height:110px;border:1px solid var(--gold);margin:4px auto}
@media (max-width:820px){.autor{text-align:left;align-items:center}.autor .avatar{max-width:44px;max-height:48px;margin:0}}
.tabelle.forum tr.tief1 td.forumname{padding-left:24px}
.tabelle.forum tr.tief2 td.forumname{padding-left:44px}
.tabelle.forum tr.tief3 td.forumname,.tabelle.forum tr.tief4 td.forumname{padding-left:64px}
.tabelle.forum tr.tief1 td.icon img,.tabelle.forum tr.tief2 td.icon img,.tabelle.forum tr.tief3 td.icon img{width:28px;height:auto}
.intern{font-size:11px}
.anhang{margin-top:10px;padding:6px 10px;border:1px dashed var(--gold);background:var(--rot2)}
.anhang a{font-weight:bold}
.tabelle tr.gruppe th{background:#000;color:var(--link);padding-top:10px}
.anhang-bild{display:block;max-width:320px;max-height:240px;margin-top:6px;border:1px solid var(--gold)}