/*  Toggle-Button oben links */
.side-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 11000;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    border: 1px solid var(--border-color);
    background: var(--bg-alt);
    color: var(--accent);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.35s ease;
}

.side-toggle:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.side-toggle.is-open {
    background: var(--accent);
    color: #000;
    box-shadow: var(--shadow-strong);
}



/*  Seitenmenü */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;

    width: 260px;
    height: 100vh;

    background: var(--bg-alt);
    border-right: 1px solid var(--border-color);

    box-shadow: 3px 0 12px rgba(0,0,0,0.6);

    transform: translateX(-100%);
    transition: transform 0.45s ease-in-out;
    z-index: 10999;

    padding: 70px 20px 20px; 
}


/* Menü offen */
.side-menu.is-open {
    transform: translateX(0);
}



/*  Menüeinträge */
.menu-item {
    padding: 5px 3px;
    margin-bottom: 3px;
    font-size:10px;
    color: var(--text-color);
    background: transparent;

    border-radius: 2px;
    cursor: pointer;

    transition:
        background 0.25s ease,
        padding-left 0.25s ease,
        color 0.25s ease;
}

.menu-item:hover {
    background: var(--accent-10);
    padding-left: 12px;
    color: var(--accent-light);
}



/* Overlay */
.side-menu-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.55);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;

    z-index: 10998;
}

.side-menu-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

h2 {
	position: relative;
	width: auto;
	font-size: 15px;
	text-transform: lowercase;
	font-weight: normal;
	letter-spacing: 3px;
	font-size: 95px;
	min-height: 50px;
    font-family: 'Scotland' !important;
}

h2:before{
  content:" ";
  height: 2px;
  width: 130px;
  background: var(--accent-dark);
  display: block;
  position: absolute;
  top: 89%;
  left: 10px;
}

h5 {
	position: relative;
	width: auto;
	font-size: 15px;
	color:var(--text-color) !important;
	text-transform: lowercase;
	font-weight: normal;
	letter-spacing: 3px;
	font-size: 35px;
    font-family: 'Scotland' !important;
}

h5 a:link {color:var(--text-color) !important;}

h5:before{
  content:" ";
  height: 2px;
  width: 130px;
  background: var(--accent-dark);
  display: block;
  position: absolute;
  top: 89%;
  left: 10px;
}

.wiki_info {
	position:relative;
	box-sizing:border-box;
	width:80%;
	padding: 30px;
	margin:auto;
	color:var(--text-color);
	background-color: var(--bg-color);
    background-image: url(https://witcherverse-rpg.de/images/design/nilfgaard/guide.png);
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: overlay;
}

.wiki_info_inlay {
	width: 100%;
	margin:auto;
	box-sizing:border-box;
	padding: 10px;
	color: var(--text-color);
	background: var(--bg-color-50);
	text-align:justify;
	font-family: 'lato';
}

.wikki_info::before {
	content:"INFO";
	position:absolute;
	box-sizing:border-box;
	padding: 5px;
	height: 20px;
	font-size: 10px;
	top: -20px;
	left: 0px;
	letter-spacing:1px;
	line-height: .8;
	font-weight:bold;
	background: var(--accent-50);
}
.wikki_info::after {
	content:"\f06a";
	position:absolute;
	box-sizing:border-box;
	padding: 1px 5px 0 5px;
	width:25px;
	height: 25px;
	font-size: 15px;
	color: var(--bg-color);
	bottom: 5px;
	right:-25px;
	font-weight:bold;
    font-family: "Font Awesome 6 Pro";
	background: var(--accent-50);
}

.cintra {color:#7fbf7e;letter-spacing:1px;text-transform:uppercase;}
.nilfgaard {color:#d4a317;letter-spacing:1px;text-transform:uppercase;}
.redanien {color:#b3001b;letter-spacing:1px;text-transform:uppercase;}
.temerien {color:#1f4e8c;letter-spacing:1px;text-transform:uppercase;}
.bewerber {color:var(--text-color);text-decoration: line-through;}
.team {font-style: italic;font-weight:bold;letter-spacing:1px;text-transform:uppercase;}

/* Wrapper */
.club-toggle-component, .resi_city_toggle-component, .resi_home_toggle-component, .resi_regio_toggle-component  {
    width: 100%;
    margin: 0 0 10px 0;
}

/* Kopf / Klickbereich */
.club-toggle-head, .resi_city_toggle-head, .resi_home_toggle-head, .resi_regio_toggle-head   {
    position: relative;
    padding: 10px 12px 10px 32px;
    cursor: pointer;
    background: var(--bg-color-75);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--accent-10);
}

/* Label im Kopf */
.club-toggle-label, .resi_city_toggle-label, .resi_home_toggle-label, .resi_regio_toggle-label {
    pointer-events: none;
}

/* Plus-Symbol */
.club-toggle-head::before, .resi_city_toggle-head::before, .resi_home_toggle-head::before, .resi_regio_toggle-head::before {
    content: "\2b"; /* + */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-weight: 600;
    font-size: 12px;
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", Arial, sans-serif;
    transition: transform .25s ease, opacity .25s ease;
    opacity: 0.9;
    transform-origin: center center;
}

/* Geöffnet: Plus dreht sich → Kreuz */
.club-toggle-component.club-open .club-toggle-head::before, .resi_city_toggle-component.resi_city_open .resi_city_toggle-head::before, .resi_home_toggle-component.resi_home_open .resi_home_toggle-head::before, .resi_regio_toggle-component.resi_regio_open .resi_regio_toggle-head::before {
    transform: translateY(-50%) rotate(45deg);
    opacity: 1;
}

/* Body: Start geschlossen */
.club-toggle-body, .resi_city_toggle-body, .resi_home_toggle-body, .resi_regio_toggle-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    background: var(--bg-color, #0a0a0a);
    transition: max-height .25s ease;
}

/* Inhalt im Body */
.club-toggle-content, .resi_city_toggle-content, .resi_home_toggle-content, .resi_regio_toggle-content {
    padding: 10px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted, #9c9c9c);
}

.clubliste-info {width:50%;height:150px;overflow:auto;background: var(--bg-color-75);box-sizing:border-box;padding:15px;font-size: 11px;line-height: calc(1em + 8px);letter-spacing: 0.03em;text-align: justify;}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 999px;
    border: 2px solid var(--bg-alt);
    box-shadow: inset 0 0 4px var(--border-color-50);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-50);
}

.scrollbox {
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) var(--bg-alt-75);
}

/* Wrapper */
.region-toggle-component, .city-toggle-component, .home-toggle-component, .pairing-toggle-component, .scene-toggle-component {
    width: 100%;
    margin: 0 0 15px 0;

}

/* Kopf / Klickbereich */
.region-toggle-head, .city-toggle-head, .home-toggle-head, .pairing-toggle-head, .scene-toggle-head {
    position: relative;
    padding: 10px 12px 10px 32px;
    cursor: pointer;
    background: var(--bg-color-75);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--accent-10);
}

/* Text im Kopf */
.region-toggle-label, .city-toggle-label, .home-toggle-label, .pairing-toggle-label, .scene-toggle-label {
    pointer-events: none;
}

/* Plus-Symbol */
.region-toggle-head::before, .city-toggle-head::before, .home-toggle-head::before, .pairing-toggle-head::before, .scene-toggle-head::before {
    content: "\2b";
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", Arial, sans-serif;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .25s ease;
    font-size: 13px;
    opacity: 0.8;
}

/* Öffnen → Symbol dreht */
.region-open .region-toggle-head::before, .city-open .city-toggle-head::before, .home-open .home-toggle-head::before, .pairing-open .pairing-toggle-head::before, .scene-open .scene-toggle-head::before {
    transform: translateY(-50%) rotate(45deg);
    opacity: 1;
}

/* Body geschlossen */
.region-toggle-body, .city-toggle-body, .home-toggle-body, .pairing-toggle-body, .scene-toggle-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

/* Inhalt */
.region-toggle-content, .city-toggle-content, .home-toggle-content, .pairing-toggle-content, .scene-toggle-content  {
    padding: 12px;
    background: var(--bg-color, #0a0a0a);
}

.infobox_wiki {
	background:var(--accent);
    width:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.infobox_text {
	writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:2px;
	font-weight:bold;
	text-transform:uppercase;
	color: var(--bg-color);
}

.corner-buttons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
}

.corner-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-color-75);
    color: var(--accent);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease,
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.corner-btn:hover {
    background: var(--accent);
    color: var(--btn-accent-text);
    transform: translateY(-2px);
}

/* Scroll-top Button */
.scroll-top-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.linkheader {
	border-bottom-color: transparent !important;
	color: transparent !important;
}

.iplink {
	border-bottom-color: transparent !important;
}