/* ===================================================================
   True Legends - Golden Hour
   Kopfbereich: Leiste, Seitenleiste, Header, Karteireiter
   =================================================================== */

/* ============ Utility-Leiste ============ */
.utility{
  background:var(--bg-deep);
  border-bottom:1px solid var(--line);
}
.utility .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;
}
.utility nav{display:flex;gap:20px;flex-wrap:wrap;}
.utility nav a,.utility .account a,.utility .account span{
  font-family:var(--caps);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;
}
.utility .account{display:flex;gap:18px;align-items:center;color:var(--text-faint);}
.utility svg{width:13px;height:13px;stroke:var(--gold-soft);fill:none;stroke-width:1.4;flex:none;}
.utility a:hover svg{stroke:var(--gold-light);}
/* Zähler an Benachrichtigungen und Nachrichten */
.utility .count{
  font-family:var(--display);font-size:9.5px;letter-spacing:.06em;
  min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  color:var(--bg-deep);font-weight:700;
}
.utility .count[data-zero="true"]{
  background:none;border:1px solid var(--line);color:var(--text-faint);font-weight:400;
}

/* ============ Icon-Seitenleiste ============ */
.railbar{
  position:fixed;z-index:20;
  left:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:7px;
}
.railbar a{
  position:relative;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;
  background:linear-gradient(180deg,rgb(var(--panel2-rgb) / .92),rgb(var(--bg-rgb) / .92));
  transition:border-color .16s ease,background .16s ease;
}
.railbar a svg{width:19px;height:19px;stroke:var(--gold-soft);fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s ease;}
.railbar a:hover{border-color:var(--gold-deep);background:linear-gradient(180deg,rgb(var(--gold-rgb) / .22),rgb(var(--bg-rgb) / .95));}
.railbar a:hover svg{stroke:var(--gold-light);}
/* Beschriftung klappt beim Überfahren nach rechts aus */
.railbar a::after{
  content:attr(data-label);
  position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%);
  white-space:nowrap;pointer-events:none;
  font-family:var(--caps);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-light);
  background:rgb(var(--shadow-rgb) / .96);border:1px solid var(--gold-deep);
  padding:6px 11px;border-radius:5px;
  opacity:0;transition:opacity .16s ease;
}
.railbar a:hover::after,.railbar a:focus-visible::after{opacity:1;}
/* Team-Einträge — im Forum später an die Benutzergruppe gebunden */
.railbar a[data-group="team"]{border-color:rgb(var(--gold-rgb) / .55);}
.railbar a[data-group="team"] svg{stroke:var(--gold);}

/* Reicht der Platz neben dem 1200er-Inhalt nicht, wandert die Leiste nach unten */
@media (max-width:1340px){
  .railbar{
    left:50%;top:auto;bottom:14px;transform:translateX(-50%);
    flex-direction:row;
    background:rgb(var(--shadow-rgb) / .9);border:1px solid var(--line);border-radius:12px;
    padding:6px;gap:5px;
  }
  .railbar a{border-color:transparent;background:none;width:38px;height:38px;}
  .railbar a::after{left:50%;top:auto;bottom:calc(100% + 9px);transform:translateX(-50%);}
  /* Platz schaffen, damit die schwebende Leiste den Seitenfuß nicht verdeckt */
  body{padding-bottom:74px;}
}

/* ============ Header / Hero ============ */
.hero-outer{padding:26px 24px 0;max-width:var(--shell);margin:0 auto;}
/* Zwei Fassungen desselben Motivs: auf der Startseite steht die Figur
   mittig vor dem Spiegel, in den Bereichen seitlich daneben — dort gehört
   das Spiegelglas dem Zeichen des Bereichs. */
.hero{
  position:relative;
  aspect-ratio:1200/660;
  background-image:url(/images/goldenhour/header-mittig.jpg);
  background-size:cover;
  background-position:center;
  border:1px solid var(--gold-deep);
  overflow:hidden;
}
.hero[data-bereich]{background-image:url(/images/goldenhour/header.jpg);}
.hero::after{ /* Vignette + Anbindung an den Seitengrund */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgb(var(--shadow-rgb) / .45) 0%,rgb(var(--shadow-rgb) / 0) 22%,rgb(var(--shadow-rgb) / 0) 62%,rgb(var(--shadow-rgb) / .78) 100%),
    radial-gradient(120% 80% at 50% 40%,transparent 45%,rgb(var(--shadow-rgb) / .55) 100%);
}
/* Die Figur steht rechts am Bildrand und blickt in den Spiegel. Der Name
   steht deshalb ganz links auf der Mauer und bricht dort um — geteilt
   werden muss er nicht mehr, der Spiegel gehört allein dem Zeichen. */
.hero .wordmark{position:absolute;z-index:3;inset:0;pointer-events:none;}
.hero .wm-teil{
  position:absolute;left:4%;top:41%;transform:translateY(-50%);
  max-width:22%;text-align:left;
  font-family:var(--display);
  font-size:clamp(1.7rem,3.7vw,2.9rem);
  font-weight:700;letter-spacing:.1em;line-height:1.12;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.95)) drop-shadow(0 0 22px rgb(var(--gold-light-rgb) / .3));
}
/* Das Zitat steht unter dem Namen, ebenfalls links — nicht auf die
   andere Bildseite verteilt. */
.hero .wm-rechts{
  left:4%;right:auto;top:56%;
  max-width:22%;text-align:left;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1rem,1.65vw,1.32rem);
  letter-spacing:.02em;line-height:1.4;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--text);
  filter:none;
  text-shadow:0 1px 4px rgb(var(--shadow-rgb) / 1),0 2px 14px rgb(var(--shadow-rgb) / .95);
}
.hero .wm-rechts:empty{display:none;}

/* Startseite: die Figur steht mittig vor dem Spiegel, also steht auch der
   Schriftzug mittig — darunter das Zitat, kein geteilter Satz. */
.hero .wordmark.ganz .wm-links{
  left:50%;right:auto;top:30%;
  transform:translate(-50%,-50%);
  max-width:70%;text-align:center;
  font-size:clamp(2.1rem,5vw,3.6rem);
}
.hero .wordmark.ganz .wm-rechts{
  left:50%;right:auto;top:38%;
  transform:translate(-50%,-50%);
  max-width:52%;text-align:center;
  font-size:clamp(1.05rem,1.7vw,1.35rem);
}

/* ---- Wechsel-Symbole im Spiegel (Brief Abschnitt 3) ----
   Ein Basisbild für alle Bereiche; nur diese vier Zeichen wechseln.
   Sie sitzen paarweise links und rechts der Figur, wo reiner Nebel ist —
   Titel und Frau bleiben frei. Im Forum entscheidet das aktuelle Forum
   (über parentlist ermittelt), welches Set ausgegeben wird. */
.mirror-symbols{position:absolute;z-index:2;inset:0;pointer-events:none;}
.mirror-symbols span{
  position:absolute;width:52px;height:52px;border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgb(var(--gold-light-rgb) / .45);
  background:radial-gradient(circle,rgb(var(--symbol-rgb) / .6),rgb(var(--symbol-rgb) / .12));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 16px rgb(var(--gold-light-rgb) / .18);
  animation:sym-ein .5s ease both;
}
.mirror-symbols svg{
  width:26px;height:26px;
  fill:none;stroke:var(--gold-light);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgb(var(--shadow-rgb) / .95));
}
.mirror-symbols span:nth-child(1){left:30%;top:55%;animation-delay:.02s;}
.mirror-symbols span:nth-child(2){left:33%;top:73%;animation-delay:.08s;}
.mirror-symbols span:nth-child(3){left:70%;top:55%;animation-delay:.14s;}
.mirror-symbols span:nth-child(4){left:67%;top:73%;animation-delay:.2s;}
@keyframes sym-ein{
  from{opacity:0;transform:translate(-50%,-50%) scale(.82);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}

/* Gelieferte Symbolgrafiken werden als Maske gesetzt, nicht als Bild —
   dadurch tragen sie die Goldfarbe des Designs statt ihrer eigenen. */
.mirror-symbols i{
  display:block;width:100%;height:100%;
  background:var(--gold-light);
  -webkit-mask-image:var(--sym);mask-image:var(--sym);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.mirror-symbols span:has(i){padding:11px;}

/* ---- Zweite Lesart: ein großes Zeichen statt vier kleiner ----
   Es sitzt im oberen Spiegelbereich, wo nur Nebel ist — es endet oberhalb
   des Kopfes der Figur und liegt hinter dem Schriftzug, nicht über ihr. */
.mirror-symbols.gross span{
  position:absolute;
  /* Mitte des Spiegels, im Bild nachgemessen: Der Ring ist waagerecht um die
     Bildmitte zentriert und reicht senkrecht von 10 % bis 78 %. */
  left:50%;top:44%;
  transform:translate(-50%,-50%);
  /* Höhe statt Breite, damit das Zeichen bei jedem Fensterformat im Glas bleibt */
  height:54%;width:auto;aspect-ratio:1;
  border:0;background:none;box-shadow:none;padding:0;
  animation:sym-gross .7s ease both;
}
.mirror-symbols.gross i{
  background:var(--gold-light);
  opacity:var(--symbol-deckkraft);
  filter:drop-shadow(0 0 24px rgb(var(--gold-light-rgb) / .3));
}
@keyframes sym-gross{
  from{opacity:0;transform:translate(-50%,-50%) scale(.92);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}

/* ============ Karteireiter-Navigation ============
   Sitzt oberhalb des Headers und stützt sich auf dessen Oberkante ab —
   wie die Reiter einer Mappe. */
.tabnav{
  position:relative;z-index:3;
  margin-bottom:-1px;         /* Reiter berühren den Headerrahmen */
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:3px;padding:0 8px;
}
.tabnav > a,
.tabnav > .box{
  --notch:15px;
  position:relative;
  padding:13px 26px 12px;
  min-width:118px;text-align:center;
  font-family:var(--caps);font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);
  background:linear-gradient(180deg,var(--tab-1),var(--tab-2));
  clip-path:polygon(0 100%,var(--notch) 0,calc(100% - var(--notch)) 0,100% 100%);
  filter:drop-shadow(0 -1px 0 rgb(var(--gold-rgb) / .85));
  transition:color .16s ease,background .16s ease,filter .16s ease;
}
.tabnav > a:hover,
.tabnav > .box:hover{
  color:var(--gold-light);
  background:linear-gradient(180deg,var(--line),var(--bg-panel-2));
  filter:drop-shadow(0 -1px 0 rgb(var(--gold-rgb) / .9));
}
.tabnav > a[aria-current="page"],
.tabnav > .box.aktiv{
  color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .34),var(--tab-2) 82%);
  filter:drop-shadow(0 -2px 0 var(--gold));
  /* Der aktive Reiter steht ein wenig höher als die übrigen */
  padding-top:17px;margin-top:-4px;
}

.wrap{padding-top:30px;padding-bottom:56px;}


/* ============ Accountswitcher in der oberen Leiste ============
   Das Plugin liefert: div > a "Verbundene Accounts" + div > ul.trow1
   mit je einem li.as_head_drop (Avatar + Wechsellink).

   Das Plugin-Stylesheet des alten Themes wird hier bewusst NICHT
   uebernommen — die Klappmechanik steht deshalb auf eigenen Fuessen.
   Setzt das Plugin per JS einen eigenen Anzeigewert, gewinnt dieser
   und unsere Regel stoert nicht. */
.utility .account .accountswitch{position:relative;}
.utility .account .accountswitch > div > div{display:none;}
.utility .account .accountswitch:hover > div > div,
.utility .account .accountswitch:focus-within > div > div{display:block;}

/* .trow1 kommt aus mybb.css als Tabellenzeile — hier neutralisieren */
.utility .account .accountswitch ul.trow1{
  position:absolute;right:0;top:calc(100% + 8px);z-index:70;
  list-style:none;margin:0;padding:6px 0;
  min-width:212px;max-height:340px;overflow-y:auto;
  background:var(--bg-panel);border:1px solid var(--gold-deep);
  box-shadow:0 10px 28px rgb(var(--shadow-rgb) / .75);
}
.utility .account .accountswitch li.as_head_drop{
  display:flex;align-items:center;gap:9px;
  padding:5px 12px;border:0;background:none;
}
.utility .account .accountswitch li.as_head_drop:hover{background:rgb(var(--gold-rgb) / .16);}
.utility .account .accountswitch li.as_head_drop img{
  width:26px;height:26px;object-fit:cover;flex:none;
  box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb) / .4);
}
/* Der Wechsellink traegt keine Kapitaelchen — es sind Charakternamen */
.utility .account .accountswitch a.switchlink{
  font-family:var(--serif);font-size:.9rem;
  letter-spacing:0;text-transform:none;color:var(--text-dim);
}
.utility .account .accountswitch a.switchlink:hover{color:var(--gold-light);}

/* Das Board liefert die Navigationslinks als <div class="box"> mit dem
   Icon im <a> und der Beschriftung in einem <span> daneben. Beide Teile
   sollen wie ein einziger Reiter wirken und gemeinsam anklickbar sein. */
.tabnav > .box{display:flex;align-items:center;justify-content:center;gap:7px;}
.tabnav > .box > a{
  display:inline-flex;align-items:center;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:0;background:none;clip-path:none;filter:none;min-width:0;
}
/* Keine Icons in den Reitern - hier zaehlt allein die Schrift. */
.tabnav > .box i{display:none;}
.tabnav > .box > span{color:inherit;}
/* Die Beschriftung liegt neben dem Link, nicht darin — damit trotzdem der
   ganze Reiter klickt, wird der Link ueber die volle Flaeche aufgezogen. */
.tabnav > .box{position:relative;}
.tabnav > .box > a::after{content:"";position:absolute;inset:0;}

/* ---- Korrekturen an der oberen Leiste ----
   "Angemeldet als" und der Charaktername stehen zusammen in einem span.
   Als Flex-Element wuerde das Leerzeichen zwischen Text und Link
   verschluckt ("alsClarissa") — deshalb bleibt das span inline. */
.utility .account > span{display:inline;}

/* Der Accountswitcher brachte Leerraum ueber sich mit: das Plugin-Markup
   enthaelt Zeilenumbrueche, die als Textzeile zaehlten und den Block nach
   unten kippten. Als Flex-Container werden reine Leerraum-Knoten ignoriert. */
.utility .account .accountswitch,
.utility .account .accountswitch > div{display:flex;align-items:center;}

/* In den Reitern zaehlt allein die Schrift — unabhaengig davon, ob ein
   Bereich sein Zeichen als Schriftsymbol, Grafik oder SVG mitbringt. */
.tabnav > .box i,
.tabnav > .box img,
.tabnav > .box svg{display:none;}

/* ---- Kontenwechsler: stabil statt flatterig ----
   Vorher oeffnete das Menue beim Ueberfahren und schloss wieder, sobald
   die Maus den Spalt zwischen Schalter und Liste kreuzte. Jetzt haelt es
   ein Klick offen (Klasse "offen" setzt das Skript im header). */
.utility .account .accountswitch:hover > div > div,
.utility .account .accountswitch:focus-within > div > div{display:none;}
.utility .account .accountswitch.offen > div > div{display:block;}

/* Kein Spalt mehr zwischen Schalter und Liste */
.utility .account .accountswitch ul.trow1{top:100%;margin-top:0;}
.utility .account .accountswitch > div > div{padding-top:6px;}

.utility .account .accountswitch > div > a{cursor:pointer;}
.utility .account .accountswitch.offen > div > a{color:var(--gold-light);}

/* Die Namen tragen ihre Gruppenfarbe ueber die g-Tags aus style.css */
.utility .account .accountswitch a.switchlink g1,
.utility .account .accountswitch a.switchlink g2,
.utility .account .accountswitch a.switchlink [class],
.utility .account .accountswitch a.switchlink > *{font-family:var(--serif);}

/* Die oberste Leiste durchgehend in Gold - Beschriftungen wie Links. */
.utility,
.utility a,
.utility a:link,
.utility a:visited,
.utility span:not(.count),
.utility b{color:var(--gold-light);}
.utility a:hover{color:#fff;}


/* ---- Bereichszeichen im Spiegel -----------------------------------
   Die gelieferten Motive haben keinen Alphakanal: mal steht das Zeichen
   schwarz auf weissem Grund, mal hell auf schwarzem, manche sind ganze
   Bilder. Die Maske aus der Vorlage passt nur zu echten Umrissen, darum
   traegt jedes Motiv einen Vermerk, wie es ins Glas kommt. */
.mirror-symbols.gross i[data-art]{
	background-color:transparent;
	background-image:var(--sym);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	-webkit-mask-image:none;mask-image:none;
	opacity:.9;
	filter:none;
}
/* Zeichen auf schwarzem Grund: der Grund faellt im Glas von selbst weg. */
.mirror-symbols.gross i[data-art="dunkel"]{}
/* Zeichen auf weissem Grund: erst umkehren, dann faellt der Grund weg. */
.mirror-symbols.gross i[data-art="hell"]{filter:invert(1);}
/* Dasselbe in Gold - nur Supernatural und Charmed duerfen eingefaerbt werden. */
.mirror-symbols.gross i[data-art="gold"]{
	filter:invert(1) brightness(.62) sepia(1) saturate(2.6) hue-rotate(-12deg);
}
/* Ganze Bilder statt Zeichen: weiche Kante, damit kein Rechteck im Glas steht. */
.mirror-symbols.gross i[data-art="bild"]{
	opacity:.88;
	/* Bildkanten weich auslaufen lassen: sonst steht bei Motiven mit
	   hellem Grund ein sichtbares Rechteck im Nebel. */
	-webkit-mask-image:radial-gradient(closest-side,#000 38%,transparent 92%);
	mask-image:radial-gradient(closest-side,#000 38%,transparent 92%);
	-webkit-mask-size:100% 100%;mask-size:100% 100%;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}


/* Die Blendung gehoert an den Kasten, nicht an das Zeichen: die
   Symbolebene hat einen eigenen z-index und bildet damit einen eigenen
   Stapel - ein Zeichen darin wuerde nur mit dem leeren Kasten mischen
   statt mit dem Kopfbild. */
.mirror-symbols.art-dunkel,
.mirror-symbols.art-hell,
.mirror-symbols.art-gold,
/* Auch ganze Bilder gehoeren ins Glas und nicht davor: ohne Blendung
   stuende ihr rechteckiger Rand mitten im Nebel. */
.mirror-symbols.art-bild{ mix-blend-mode:screen; }


/* Lange Bereichsnamen wie "Goetterdaemmerung" sind ein einziges Wort und
   fanden im schmalen Streifen links keinen Umbruch - sie liefen aus dem
   Bild heraus und wurden abgeschnitten. */
.hero .wm-teil{
	overflow-wrap:break-word;
	word-break:break-word;
	hyphens:auto;
	max-width:26%;
}
.hero .wordmark.ganz .wm-links,
.hero .wordmark.ganz .wm-rechts{max-width:70%;}


/* Zwei Motive tragen unten etwas, das nicht ins Glas gehoert: home ein
   Wasserzeichen des Bildanbieters, vampirediaries eine Bildunterschrift.
   Statt die Dateien zu aendern, endet hier einfach das Bild darueber. */
.mirror-symbols.gross i[data-schnitt="home"]{
	/* Der Grund dieses Motivs ist weiss und stuende als helles Rechteck
	   im Nebel. Zwei Masken zusammen: rund auslaufender Rand, und unten
	   endet das Bild oberhalb des Wasserzeichens. */
	-webkit-mask-image:radial-gradient(closest-side,#000 42%,transparent 94%),linear-gradient(to bottom,#000 78%,transparent 88%);
	mask-image:radial-gradient(closest-side,#000 42%,transparent 94%),linear-gradient(to bottom,#000 78%,transparent 88%);
	-webkit-mask-composite:source-in;
	mask-composite:intersect;
	-webkit-mask-size:100% 100%;mask-size:100% 100%;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.mirror-symbols.gross i[data-schnitt="vampirediaries"]{
	-webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 68%);
	mask-image:linear-gradient(to bottom,#000 68%,transparent 68%);
	-webkit-mask-size:100% 100%;mask-size:100% 100%;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

		

/* Das Accountswitcher-Plugin blendet sein Menü in der eigenen Datei
   ueber die Kennung aus ("#accountswitcher_header_popup"). Dagegen kommt
   eine Regel aus Klassen nicht an - deshalb steht die Kennung hier mit
   im Selektor. */
.utility .account .accountswitch.offen > div > div#accountswitcher_header_popup{
	display:block;
}


/* Name und Motto standen beide fest im Bild verankert. Bei einem langen
   Bereichsnamen wie "Die letzten Naechte Nimmerlands" wuchs der Name nach
   unten und schob sich ueber das Motto. Jetzt stehen beide untereinander
   in einer Spalte, die als Ganzes mittig sitzt. */
.hero .wordmark:not(.ganz){
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	padding:0 58% 0 4%;
}
.hero .wordmark:not(.ganz) .wm-teil{
	position:static;
	transform:none;
	max-width:100%;
	left:auto;top:auto;right:auto;
}
.hero .wordmark:not(.ganz) .wm-rechts{
	margin-top:10px;
}