/* == Eva 2026 · Bootstrap 5.3 ================================ */

/* ── CSS-Variablen ─────────────────────────────────────────── */

:root {
  --wrap-max: 1280px;
  --topbar-h: 70px;
  --footer-h: 50px;
  --sidebar-w: 360px;
  --head-font: 'area-extended-light', sans-serif;
  --body-font: 'area-normal-light', sans-serif;
  --body-color: #333;
  --body-bg: #808080;
  --topbar-bg: #eee;
  --sidebar-bg: #eee;
  --content-bg: #fff;
  --footer-bg: #ddd;
  --brand-accent: #000;
  --brand-accent2: #666;
	
	--active-color: #980000;
	--topnav-link-color: rgba(0,0,0,.65);
	--topnav-link-bgcolor: inherit;
	--topnav-hover-color: rgba(0,0,0,.85);
	--topnav-hover-bgcolor: #ddd;
	--topnav-active-color: #980000;
	--topnav-active-bgcolor: #ddd;

	--sidebar-link-color: rgb(30,60,120,0.75);
	--sidebar-link-bgcolor: inherit;
	--sidebar-hover-color: rgb(35,70,140,1);
	--sidebar-hover-bgcolor: #ddd;
	--sidebar-active-color: #980000;
	--sidebar-active-bgcolor: #ddd;
	
	--book-text-align: 'left';
	
}


/* ── Reset / Base ──────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Hintergrund außerhalb des Containers:
   PNG-Kachel aus bg-pattern.png (in Photoshop erstellt, repeat-fähig).
   Datei austauschen um das Muster zu ändern – kein Code-Eingriff nötig. */

body {
  margin: 0;
  font-family: var(--body-font) !important;
	font-weight: 200 !important;
  color: var(--body-color);
  background-color: var(--body-bg);
  background-image: url('../../assets/img/eva-bg.png');
  background-repeat: repeat;
  background-position: center;
}

/* ══════════════════════════════════════════════════════════════
   PAGE-WRAP  –  zentrierter Container, max 1200 px
   Alle fixed-positionierten Kindelemente (Topnav, Sidebar,
   Drawer, Footer) orientieren sich an diesem Container,
   nicht am Viewport-Rand.
══════════════════════════════════════════════════════════════ */

.page-wrap {
  position: relative;
  max-width: var(--wrap-max);
  width: 100%;
  margin: 0 auto;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════════
   TOP NAV
   Fixiert, aber auf die Breite des .page-wrap begrenzt.
   Trick: left/right werden per JS auf den Wrap-Offset gesetzt
   (siehe site.js). Fallback: left:0/right:0 (volle Breite).
══════════════════════════════════════════════════════════════ */

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  z-index: 1050;
  border-bottom: 2px solid var(--brand-accent);
  overflow: hidden;
}

.topnav .brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--brand-accent);
  /*letter-spacing: -.02em;*/
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 1.5rem;
  /*align-self: center;*/
  /*align-content: center;*/
  padding-bottom: 6px;
}

/* Link-Container: nimmt den restlichen Platz rechts ein und
   erlaubt Umbruch auf eine zweite Zeile innerhalb der Topbar */

.topnav .linkline {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  /*align-items: center !important;*/
  flex: 1;
  height: 100%;
  overflow: hidden;
  gap: 0;
}

.topnav .nav-link {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--topnav-link-color);
	background-color: var(--topnav-link-bgcolor);
  padding: 0.1em 0.5em 0 0.5em;
  height: calc(var(--topbar-h) / 3);
  display: flex;
  /*align-items: center;*/
  text-decoration: none;
  /*transition: color .2s;*/
  /*border-bottom: 3px solid transparent;*/
  white-space: nowrap;
  margin-right: 3px;
}

.topnav .nav-link:hover {
  color: var(--topnav-hover-color);
  background-color: var(--topnav-hover-bgcolor);
}

.topnav .nav-link.active {
  color: var(--topnav-active-color);
  background-color: var(--topnav-active-bgcolor);
}

/* Hamburger – nur mobil */

.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: #666;
  font-size: 1.6rem;
  cursor: pointer;
  padding: .2rem .4rem;
  margin-left: auto;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .topnav .linkline {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hamburger-btn {
    display: flex;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════════════════════════════ */

.mobile-drawer {
  display: none;
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  background: var(--brand-dark);
  z-index: 1049;
  border-bottom: 2px solid var(--brand-accent);
  padding: .5rem 0 1.25rem;
  animation: slideDown .2s ease;
  overflow-y: scroll;
  /*z-index: 1500;*/
}

.mobile-drawer.open {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drawer-section-label {
  font-family: var(--font-head);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  padding: .75rem 1.4rem .2rem;
}

.mobile-drawer a {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  padding: 0 1.4rem;
  text-decoration: none;
  transition: color .15s, background .15s;
}

.mobile-drawer a:hover {
  color: var(--sidebar-hover-color);
  background: var(--sidebar-hover-bgcolor);
}

.mobile-drawer a.active {
  color: var(--sidebar-active-color);
  background: var(--sidebar-active-bgcolor);
}

.drawer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: .5rem 1.4rem;
}

.mobile-drawer .sub-link {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.6);
  padding-left: 2.4rem;
  line-height: 1.1;
}

.mobile-drawer .sub-link.active {
   color: var(--sidebar-active-color);
  background: var(--sidebar-active-bgcolor);
}

/* Overlay – überdeckt nur den page-wrap-Bereich */

.drawer-overlay {
  display: none;
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.45);
  z-index: 1048;
}

.drawer-overlay.open {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════ */

.sidebar {
  position: fixed;
  top: var(--topbar-h);
  /*left: 0;*/
  width: 22%;
  max-width: var(--sidebar-w);
  min-width: 240px;
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  background: var(--sidebar-bg);
  overflow-y: auto;
  padding: 1.5rem;
  z-index: 1040;
  border-right: 1px solid rgba(255,255,255,.07);
}

.sidebar-label {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.3);
  padding: 0 0 1rem;
  /*margin-top: .1rem;*/
}

.sidebar .nav-link {
  display: block;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--sidebar-link-color);
	background-color: var(--sidebar-link-bgcolor);
  padding: .5rem 0.5rem;
  text-decoration: none;
  /*border-left: 3px solid transparent;*/
  transition: all .18s;
}
.sidebar .nav-link small {
	font-weight: 400;
}
.sidebar .nav-link small::before {
	content: "\00A0";
}

.sidebar .nav-link i {
  font-size: 1rem;
  flex-shrink: 0;
}

.sidebar .nav-link:hover {
  color: var(--sidebar-hover-color);
  background: var(--sidebar-hover-bgcolor);
}

.sidebar .nav-link.active {
  color: var(--sidebar-active-color);
  background: var(--sidebar-active-bgcolor);
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════════ */

.main-content {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 2.5rem 1.5rem calc(var(--footer-h) + 2rem) 2.5rem;
	background-color: var(--content-bg) !important;
  overflow-y: hidden;
  /*position: fixed;*/
  /*height: 100%;*/
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
    padding: 2rem 1rem calc(var(--footer-h) + 1.5rem);
  }
}
@media (min-width: 1200px) {
  .main-content {
    padding-right: 3.5rem;
  }
}

/* Sections */

.page-section:not(:has( ~ .page-section)) {
  border-bottom: none !important;
}

.page-section:first-of-type {
  padding-top: 1rem;
}

.page-section {
  padding: 2.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 3px solid #aaa;
}

.page-section h1 {
  font-family: var(--font-head);
  /*font-weight: 700;*/
  font-size: 1.5rem;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */

.sitefooter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-h);
  background: var(--footer-bg);
  border-top: 1px solid rgba(255,255,255,.1);
  display: block;
  text-align: center;
  padding-top: 5px;
  z-index: 1050;
}

.sitefooter p, .sitefooter span {
  /*font-family: var(--font-body);*/
  font-size: .6rem;
  letter-spacing: .05em;
  padding: 0;
  margin: 0;
}

.sitefooter a {
  text-decoration: none;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em;
  padding: 0 5px;
  color: var(--bs-link-hover-color);
}

.sitefooter a:hover {
  background-color: #ccc;
}

.sitefooter .ws {
  word-spacing: 5px;
}

@media (max-width: 768px) {
  .text-xs-center {
    text-align: center;
  }
}
/*
@media (max-width: 576px) {
  img, .img-fluid {
    max-width: 75% !important;
  }
}
@media (max-width: 767px) {
    img .img-fluid  {
    max-width: 60% !important;
  }
}
@media (max-width: 991px) {
    img .img-fluid  {
    max-width: 50% !important;
  }
}
@media (max-width: 1199px) {
    img .img-fluid  {
    max-width: 35% !important;
  }
}
@media (min-width: 1200px) {
    img, .img-fluid  {
    max-width: 30% !important;
  }
}
*/

img {
	margin: 10px 0;
}

.cover {
	margin-top: 0;
	margin-bottom: 1rem;
	text-align: center;
	font-size: 0.8rem;
}
.credit, .credits {
	margin-top: 0;
	margin-bottom: 1rem;
	text-align: center;
	font-size: 0.7rem;
}
p.source {
	margin-top: -1rem;
	margin-bottom: 1.5rem;
	text-align: right;
	font-size: 0.8rem;
	font-style: italic;
}
span.source {
	font-size: 0.8em;
	font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--head-font) !important;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.4rem;
}
h3 {
  font-size: 1.3rem;
}
h4 {
  font-size: 1.2rem;
}
h5 {
  font-size: 1.1rem;
}
h6 {
  font-size: 1rem;
	font-weight:700;
}

.text-justify {
	text-align: justify;
}
.books-text-align {
	text-align: left;
}
.books-text-align.justify {
	text-align: justify;
}
/* Optional: Icon-Linien per CSS anpassen */
#btn-switch-book-align .line-short {
  transition: width 0.2s;
}

.is-justify #btn-switch-book-align .line-short {
  width: 100%;
}

.btn-switch-book-align { 
	display: inline-flex; 
	align-items: center; 
	gap: 0; 
	padding: 2px 4px; 
	border-radius: 5px; 
	font-size: 14px; 
	cursor: pointer; 
	transition: background 0.15s; 
	color: #aaa; 
	background: transparent; 
	border: 0.5px solid #ccc; 
	border-top: 0.5px solid #eee; 
	border-left: 0.5px solid #eee; 
	}
.btn-switch-book-align.active {
	color: #999;
	background-color: #ccc;
	border: 0.5px solid #ccc; 
	border-right: 0.75px solid #aaa;
	border-bottom: 0.75px solid #aaa;
}

.btn-switch-book-align:hover { background: #ddd; }
.btn-switch-book-align:active { transform: scale(0.98); }
.align-indicator { font-size: 12px; color: navy; margin-top: 8px; }


.btn-user-sort { 
	display: inline-flex; 
	align-items: center; 
	gap: 0; 
	padding: 2px 4px; 
	border-radius: 5px; 
	font-size: 14px; 
	cursor: pointer; 
	transition: background 0.15s; 
	color: #666; 
	background: transparent; 
	border: 0.5px solid #ccc; 
	border-top: 0.5px solid #eee; 
	border-left: 0.5px solid #eee; 
	}
.btn-user-sort.active {
	color: #efefef;
	background-color: #ddd;
	border: 0.5px solid #eee; 
	border-right: 0.75px solid #aaa;
	border-bottom: 0.75px solid #aaa;
}


strong {
	font-weight: 700 !important;
}

.theater table {
 border-width:0;
 border-style:solid;
 border-color: #000;
 border-collapse:collapse;
 margin:0 auto 0 auto;
 padding:0;
 text-align:left;
 vertical-align: middle;
 direction:ltr;
 width:auto;
 height:auto;
 display:table;
 float:none;
 font-style:normal;
 font-weight:normal;
}
.theater tr {
 vertical-align:middle;
 height:auto;
 padding-bottom: 10px;
}
.theater th {
 text-align:left;
 vertical-align:middle;
 border-width:1px 1px 3px 1px;
 border-style:solid;
 border-color: #000;
 height:30px;
 padding:0;
}

.theater td { 
 text-align:left;
 border-width:0;
 border-style:solid;
 border-color: #000;
 height:auto;
 padding-bottom: 10px ;
 line-height:110%;
}

.theater .role {
  vertical-align:middle;
	text-align: right;
	padding-right: 10px;
}
.theater .name {
  vertical-align:middle;
	font-weight:bold;
}