/* ==========================================================================
   1. GLOBALE VARIABLEN & DESIGN-SYSTEM (:root)
   ========================================================================== */
:root{
    /* Farbpalette (Alchemie & Deep Space) */
    --color-bg-deep:#14081F;
    --color-bg-main:#1b0a2e;
    --color-surface:#190929;
    --color-surface-strong:#241236;
    --color-surface-soft:#1f1f1f;
    --color-text-main:#f9f3e9;
    --color-text-muted:rgba(230, 224, 214, 0.75);
    --color-text-initial:#8e2bfa;
    --color-accent:#c9a44d;
    --color-accent-hover:#290E45;
    --color-border:rgba(201, 164, 77, 0.35);
    --color-border-light:rgba(201, 164, 77, 0.25);
    --color-border-soft:rgba(201, 164, 77, 0.1);
    --color-bg-highlight:#2a0e46;
    --color-bg-highlight-hover:#4b2e8a;
    --color-amazon:#a33b26;
    --color-amazon-hover:#bc4a32;

    /* Bootstrap Overrides & Theme-Mapping */
    --bs-primary:var(--color-accent);
    --bs-body-bg:var(--color-bg-deep);
    --bs-body-color:var(--color-text-main);
    --bs-border-color:var(--color-border);
    --bs-border-radius:5px;
    --bs-font-sans-serif:"Poiret One", normal;
    
    /* Layering (Karten & Container) */
    --layer-0:var(--color-bg-deep);
    --layer-1:var(--color-bg-main);
    --layer-2:var(--color-surface);
    --layer-3:var(--color-surface-strong);
    
    /* Bootstrap Card Mapping */
    --bs-card-bg:var(--layer-2);
    --bs-card-border-color:var(--color-border-soft);
    --bs-card-cap-bg:var(--layer-3);
    
    /* Layout & Effekte */
    --bs-navbar-padding-y:0.7rem;
    --bs-navbar-brand-color:var(--color-accent);
    --bs-navbar-brand-hover-color:var(--color-accent);
    --glow-soft:0 0 8px var(--color-border-light);
    --glow-strong:0 0 14px var(--color-border);
    --ease:all 0.25s ease;
    
    /* Typografie Variables */
    --font-display:"Poiret One", normal;
    --font-body:"Poiret One", normal;
	
	--surface-rgb:27, 10, 46;
    
    /* Verläufe */
    /* Wir definieren die Rohwerte der Verlauf-Farben */
    --surface-start-rgb:27, 10, 46; /* #1b0a2e */
    --surface-end-rgb:20, 8, 31;   /* #14081f (das ist dein --color-bg-deep) */
    
    /* Dein Verlauf bleibt als Variable erhalten, falls du ihn woanders noch als reinen Background brauchst */
    --gradient-surface:linear-gradient(180deg, rgba(var(--surface-start-rgb), 1) 0%, rgba(var(--surface-end-rgb), 1) 100%);
    --accent-gradient:linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
}

/* ==========================================================================
   2. SCHRIFTARTEN (Font-Face Definitionen)
   ========================================================================== */
@font-face{
    font-family:"Poiret One";
    src:url('https://hermetik-bibliothek.de/assets/fonts/PoiretOne-Regular.woff2') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:AnglicanText;
    src:url('https://hermetik-bibliothek.de/assets/fonts/AnglicanText.woff2') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

/* ==========================================================================
   3. BASIS-ELEMENTE & TYPOGRAFIE (HTML/Body/Texte)
   ========================================================================== */
body{
    font-optical-sizing:auto;
    hyphens:auto;
    margin:0;
    font-size:1.3rem;
    letter-spacing:.75px;
    position:relative;
}


.sigille-img {
  width:350px;
  height:auto; /* Zwingt den Browser, das Originallayout unverzerrt zu berechnen */
}

.author-portrait {
  width: 220px; /* Festbreite sorgt für ein perfektes Oval/Kreis */
  height: 280px; /* Leicht höher als breit für eine klassische Medaillon-Form */
  object-fit: cover;
  object-position: center top;
  
  /* Ovale Form */
  border-radius: 50%;

  /* Der eigentliche Goldrand (geschichtet für Tiefe) */
  border: 2px solid #c9a44d; /* Hellere Goldkante innen */
  outline: 2px solid #8b6b23; /* Dunklerer Goldton außen für Kontur */
  outline-offset: 2px;
  
  /* Dezent dunkler Glanz & Schatten für den 3D-Medaillon-Effekt */
  box-shadow: 
    0 0 15px rgba(212, 175, 55, 0.3), /* Dezent goldener Glow */
    0 8px 20px rgba(0, 0, 0, 0.6);   /* Tiefer Schatten zum Hintergrund */
}

/* Mobil-Anpassung */
@media (max-width: 768px) {
  .author-portrait {
    width: 160px;
    height: 200px;
  }
}

/* Standard für Desktop */
.book-portrait {
  width: 100%;
  max-width: 240px; /* Oder deine gewohnte Max-Breite */
  height: auto;
  display: block;
}

/* Mobil-Anpassung */
@media (max-width: 768px) {
  .book-portrait {
    max-width: 140px; /* Verhindert, dass das Bild mobil zu riesig wird */
    height: auto;
  }
}

@media (max-width: 768px) {
  /* Autoren-Avatar mobil etwas kleiner machen */
  .item-hero img.rounded-circle, 
  .item-hero .author-img { 
    width: 45px !important; 
    height: 45px !important; 
  }

  /* Zitat-Schriftgröße mobil leicht senken */
  .item-hero blockquote {
    font-size: 1rem !important;
	hyphens: none;
	  -webkit-hyphens: none; /* Für ältere Safari-Browser */
  -ms-hyphens: none;      /* Für älteren Internet Explorer */
  }
}



/* Stellt sicher, dass das Flex-Parent oben bündig ansetzt */
.item-hero {
  display: flex !important;
  align-items: flex-start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Linke Spalte (Bild-Wrapper) zwingend nach oben */
.item-hero > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  align-self: flex-start !important;
}

/* Rechte Spalte (Text-Wrapper) zwingend nach oben */
.item-hero .item-meta-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Das eigentliche Cover-Bild im Wrapper */
.book-portrait {
  margin-top: 0 !important;
  display: block !important;
}



/* Galerie-Modus (Gitter für 2er, 3er oder mehr Bilder) */
.image-gallery {
    display: grid;
    gap: 20px;
    margin: 20px 0;
}

/* 2er-Reihe */
.image-gallery.image-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3er-Reihe */
.image-gallery.image-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.image-gallery figure {
    margin: 0;
    width: 100%;
    break-inside: avoid;
}

.image-gallery figure img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 3px;
}

/* Responsive Abfanger für schmale Bildschirme / Tablets */
@media (max-width: 768px) {
    .image-gallery.image-cols-3 {
        grid-template-columns: repeat(2, 1fr); /* 3er-Reihe auf Tablets zu 2er machen */
    }
}

@media (max-width: 500px) {
    .image-gallery.image-cols-2,
    .image-gallery.image-cols-3 {
        grid-template-columns: 1fr; /* Auf Mobilgeräten alles untereinander */
    }
}

/* Einzelbild-Modus */
.image-single {
    text-align: center;
    margin: 20px 0;
    break-inside: avoid;
}

.image-single figure {
    display: inline-block;
    max-width: 100%;
    margin: 0;
}

.image-single figure img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.image-single figure figcaption,
.image-gallery figure figcaption {
    font-size: 1rem;
    margin-top: 5px;
    margin-bottom: 15px;
    line-height: 1.3;
    text-align: left;
}
/* ==========================================================================
   DIE SYMBIOSE v3:PERGAMENT-TEXTUR MAXIMAL HERAUSGEARBEITET
   ========================================================================== */
body{
    background-color:#12081f !important;

    background-image:
        /* Schicht 1:Der atmosphärische Glow */
        radial-gradient(circle at 75% 30%, rgba(108, 79, 179, 0.25) 0%, transparent 60%),
        
        /* Schicht 2:Linien-SVG (leicht reduziert in der Dominanz, um das Pergament atmen zu lassen) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900' viewBox='0 0 1200 900'%3E%3Cdefs%3E%3CradialGradient id='rad' cx='50%25' cy='35%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='rgb(155,125,235)' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='transparent'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg stroke='rgb(160,135,245)' stroke-width='0.8' fill='none' opacity='0.5'%3E%3C!-- Energie-Radialen (Strahlenbündel) --%3E%3Cline x1='600' y1='300' x2='1200' y2='0' stroke-dasharray='10,10' /%3E%3Cline x1='600' y1='300' x2='0' y2='0' /%3E%3Cline x1='600' y1='300' x2='1200' y2='900' /%3E%3Cline x1='600' y1='300' x2='0' y2='900' stroke-dasharray='2,8' /%3E%3C!-- Teilchen-Spuren (Kurven) --%3E%3Cpath d='M 200,800 Q 600,300 1000,800' stroke-width='1.2' /%3E%3Cpath d='M 100,100 Q 600,600 1100,100' stroke-width='0.5' stroke-dasharray='4,4' /%3E%3C!-- Energie-Knoten (Sterne/Punkte) --%3E%3Ccircle cx='600' cy='300' r='3' fill='rgb(200,180,255)' /%3E%3Ccircle cx='900' cy='150' r='1.5' fill='white' /%3E%3Ccircle cx='300' cy='600' r='1.5' fill='white' /%3E%3Ccircle cx='150' cy='200' r='2' fill='white' /%3E%3C/g%3E%3C/svg%3E"),
        
        /* Schicht 3:Der VIOLETTE FARBTEPPICH (Hier ist der Drehschalter:0.75 statt 0.88 macht das Pergament deutlich präsenter) */
        linear-gradient(0deg, rgba(18, 8, 31, 0.25), rgba(18, 8, 31, 0.25)),
        
        /* Schicht 4:Das Pergament */
        url('https://hermetik-bibliothek.de/assets/images/backgrounds/sterngrund5.webp') !important;

    background-repeat:no-repeat, repeat, repeat, repeat !important;
    background-position:center top, center top, left top, left top !important;
    background-size:auto, 1200px 900px, auto, auto !important;
    background-attachment:scroll, fixed, fixed, fixed !important;
}

/* ==========================================================================
   TRANSLUZENZ-KORREKTUR (Macht die blockierenden Wände durchlässig)
   ========================================================================== */
/* 1. Die Standard-Layoutcontainer komplett auf transparent setzen */
.main-content-wrapper, 
main, 
section, 
.container, 
.container-fluid,
.row{
    background:transparent !important;
    background-color:transparent !important;
}

/* 2. Die massiven Farbverläufe der Hero-Sektionen aufbrechen:
      Wir nutzen rgba(), damit das tiefe Violett bleibt, aber transluzent wird! */
.hero, .hero-body, .hero-home {
    background:linear-gradient(180deg, rgba(27, 10, 46, 0.7) 0%, rgba(42, 14, 70, 0.6) 50%, rgba(27, 10, 46, 0.7) 100%) !important;
    box-shadow:0 4px 20px rgba(0, 0, 0, 0.5) !important;
}



/* 3. Archivarische Zusammenfassungen (.summary) ebenfalls transluzent machen */
.summary{
    background:rgba(25, 9, 41, 0.15) !important;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border:0px solid var(--color-border-soft);
	box-shadow:0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
.summary-wrapper{
    background:rgba(25, 9, 41, 0.15) !important;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border:0px solid var(--color-border-soft);
	box-shadow:0 4px 15px rgba(0, 0, 0, 0.4) !important;
}


/* 3.b. Beliebige Bereiche transluzent machen */
.transluzent{
    background:rgba(25, 9, 41, 0.15) !important;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
	
}





/* Überschriften */

h1, h2{
    font-weight:400;
    font-style:normal;
    line-height:1;
}
h1{font-size:3.9rem}
h2{font-size:3.2rem}

h3, h4, h5{line-height:1.5}

h1, h2, h3, h4, h5, h6, .headline-class{
    page-break-after:avoid;
    break-after:avoid;
    hyphens:none !important;
    -webkit-hyphens:none;
    -ms-hyphens:none;
    word-break:keep-all;
    overflow-wrap:break-word;
	text-shadow:0px 2px 4px rgba(0, 0, 0, 0.8);
}


/* Glossar-Effekt in Überschriften deaktivieren */
h1 .glossar-term, h2 .glossar-term, h3 .glossar-term, h4 .glossar-term, h5 .glossar-term, h6 .glossar-term {
    border-bottom:none; /* Unterstrich weg */
    cursor:default;     /* Kein Hilfe-Cursor */
    pointer-events:none; /* Tooltip wird nicht ausgelöst */
	text-decoration-thickness:0;
}

/* Tooltip in Überschriften komplett verstecken */
h1 .glossar-tooltip, h2 .glossar-tooltip, h3 .glossar-tooltip, h4 .glossar-tooltip, h5 .glossar-tooltip, h6 .glossar-tooltip {
    display:none !important;
}

.item-meta-wrapper h1 {
  /* Verhindert Überlappen/Abschneiden bei langen Namen auf Mobilgeräten */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

p{line-height:1.8}

/* Initiale (Gothische Großbuchstaben zu Absatzbeginn) */
p:not(.search-empty, .simple, .cardQuote, .cardCitation, .noinitial, .no-init)::first-letter{
    font-family:AnglicanText, normal;
    initial-letter:2;
    -webkit-initial-letter:2;
    float:none;
    font-weight:400;
    margin-left:-12px;
    padding-right:7px;
    color:var(--color-text-initial);
	z-index:50;
	font-style:normal;
}

.text-anglican {
	font-family:AnglicanText, normal;
	font-size:4.5rem;
	font-weight:400;
	color:var(--color-text-initial);
	line-height:4rem;
}

/* Links & Interaktives */
a{
    color:var(--color-text-main);
    text-decoration:none;
}
a:active, a:focus, a:hover{
    color:var(--color-accent);
    text-decoration:none;
}

.item-hero blockquote {
	font-weight:700;
    hyphens: none;
    -webkit-hyphens: none; /* Für ältere Safari-Browser */
    -ms-hyphens: none;      /* Für älteren Internet Explorer */
}



.top-text {
	padding-left:230px;
	padding-right:230px;
}

@media (max-width:1028px) {
.top-text {
	padding:0;
}
}


.artdescript a, .artdescript a, .summary a, .summary-wrapper a, .glossary-definition-text a{
    text-decoration:underline;
    text-underline-offset:2px;
    text-decoration-thickness:1px;
    text-decoration-color:rgba(255,255,255,0.4);
    text-decoration-skip-ink:auto;
    transition:text-decoration-color .2s;
}
.artdescript a:focus, .artdescript a:hover, 
.artdescript a:focus, .artdescript a:hover, 
.summary a:focus, .summary a:hover, 
.summary-wrapper a:focus, .summary-wrapper a:hover {
    text-decoration-color:var(--color-accent);
}

.summary blockquote, .summary-wrapper blockquote {
  border-left: 3px solid #6F09D6; /* Durchgezogen, passend zum Akzent-Ton */
  padding-left: 1rem;              /* Mehr Abstand nach links */
  margin: 1.5rem 0;
  font-style: italic;               /* Zitat optional kursiv setzen */
  opacity: 0.8;
  hyphens: none;
}

.summary li, .summary-wrapper li {
  margin-bottom: 1rem;
}

/* Utility Klassen */
.text-gold{color:var(--color-accent) !important}
.text-purple{color:var(--color-text-initial) !important}
.container{max-width:1150px}
.bg-medium{background:var(--layer-2);
    background:linear-gradient(
        180deg, 
        rgba(27, 10, 46, 0.05) 0%,   /* Deutlich durchlässiger als 0.65 */
        rgba(42, 14, 70, 0.05) 50%,  /* Deutlich durchlässiger als 0.55 */
        rgba(27, 10, 46, 0.05) 100%
    ) !important;
	box-shadow:0 4px 15px rgba(0, 0, 0, 0.4) !important;
	}

.bearbeiten{position:fixed;top:22px;right:17px;z-index:5000}

#toTop{
    position:fixed !important;
    right:15px !important;
    bottom:30px !important;
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:0 0;
    border:none;
    opacity:0;
    visibility:hidden;
    transition:.4s cubic-bezier(.4, 0, .2, 1);
    z-index:999;
}
#toTop.show{opacity:1;visibility:visible}
#toTop img{
    width:60px;
    height:60px;
    object-fit:contain;
    filter:brightness(0) saturate(100%) invert(81%) sepia(28%) saturate(954%) hue-rotate(352deg) brightness(95%) contrast(104%);
    transition:filter .3s, drop-shadow .3s;
}
#toTop:hover{transform:translateY(-5px)}
#toTop:hover img{
    filter:brightness(0) saturate(100%) invert(70%) sepia(30%) saturate(1200%) hue-rotate(345deg) brightness(105%) contrast(105%);
}

/* Formulare */
.form-control.feld, .form-select.feld{
    background-color:var(--color-surface);
    color:var(--color-text-main);
    border-color:var(--color-border);
    font-size:1rem;
    box-shadow:0 1px 0 var(--glow-soft);
}
.feld::placeholder, .search-input::placeholder{
    color:var(--color-text-main) !important;
    opacity:.4;
}

/* Gewichts-Zuweisungen */
.btn-hb, .category-badge, .h2subh1, .navbar .nav-link, .navbar-brand, .summary h2, .summary-wrapper h2, .year-badge, h3, h4, h5{
    font-weight:700;
}

.navbar-brand {
	letter-spacing: 0.13rem;
}

/* PERFORMANCE-OPTIMIERUNG (Hardware-Beschleunigung) */
.author-image, .category-item{will-change:transform, box-shadow}
.card-face, .category-item{backface-visibility:hidden}




/* Der eigentliche Seiteninhalt (Main) benötigt nun einen fixen Abstand,
   der die Höhe von Navbar + Suchleisten-Extension ausgleicht */
.main-content-wrapper{
    /* Gesamthöhe Navbar (z.B. 73px) + Höhe Extension (ca. 90px) */
    margin-top:0;
}


/* ==========================================================================
   3. MAIN CONTENT / LAYOUT WRAPPER
   ========================================================================== */

/* Platzhalter für den Inhalt, damit er nicht unter der fixierten Leiste verschwindet */
.main-content-wrapper{
    margin-top:0.3rem;
    padding-top:0.3rem;
}

/* ==========================================================================
   6. LOKALISIERTE INDEX-BOX
   ========================================================================== */

.hb-index-context-wrapper{
    position:relative;
    display:inline-flex;
    align-items:center;
}

.hb-index-toggle-btn{
    cursor:pointer;
    outline:none !important;
}
.hb-index-toggle-btn .arrow-gold{
    color:#d4af37 !important;
    font-size:1.15rem !important;
    margin-left:5px !important;
    display:inline-block;
    transition:transform 0.2s ease;
    line-height:1;
}

.hb-index-context-wrapper.is-open .arrow-gold{
    transform:rotate(180deg);
}

.hb-index-dropdown-box{
    display:none;
    position:absolute !important;
    top:17px !important;
    left:0 !important;
    margin-top:10px !important;
    background-color:#140f19;
    border:1px solid rgba(212, 175, 55, 0.25);
    box-shadow:0 15px 40px rgba(0, 0, 0, 0.85);
    width:max-content !important;
    min-width:280px !important;  
    max-width:450px !important;  
    max-height:60vh;
    overflow-y:auto;
    padding:0.85rem 0 !important;
    z-index:99999 !important;
    animation:hbDropdownSimpleFade 0.15s ease-out;
}

.hb-index-context-wrapper.is-open .hb-index-dropdown-box{
    display:block !important;
}

.hb-index-dropdown-header{
    padding:0 1.25rem 0.5rem 1.25rem !important;
    border-bottom:1px solid rgba(212, 175, 55, 0.1);
    white-space:nowrap;
}
.hb-index-title{
    font-family:inherit;
    font-size:0.95rem;
    color:rgba(255, 255, 255, 0.85);
    font-weight:700;
}
.hb-index-sep{
    color:#d4af37;
    opacity:0.5;
    margin:0 3px;
}
.hb-index-dropdown-close{
    font-size:1.3rem;
    color:rgba(255, 255, 255, 0.4);
    line-height:1;
    cursor:pointer;
    transition:color 0.2s;
}
.hb-index-dropdown-close:hover{color:#d4af37}

.hb-index-dropdown-list{
    margin-top:0.25rem !important;
    width:100% !important;
    display:block !important;
}
.hb-index-dropdown-list li{
    width:100% !important;
    display:block !important;
}

.hb-index-item{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:0.6rem 1.25rem !important;
    color:rgba(255, 255, 255, 0.75);
    text-decoration:none;
    font-size:1.1rem;
    border-bottom:1px solid rgba(212, 175, 55, 0.03);
    transition:all 0.2s ease;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
}
.hb-index-item:hover{
    background-color:rgba(212, 175, 55, 0.07) !important;
    color:#d4af37 !important;
    padding-left:1.5rem !important;
}

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








/* Container für die 3 Karten */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Einzelnes Element: Zwingend Spalten-Layout (Icon OBERHALB von Text) */
.category-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
}

/* Icon-Wrapper zentrieren und feste Dimensionen geben */
.category-icon-wrapper {
    width: 50px;
    height: 50px;
    margin: 0 auto 0.5rem auto;
    flex-shrink: 0; /* Verhindert das Stauchen des Icons */
}

/* Titel-Styling */
.category-label {
    display: block;
    width: 100%;
    hyphens: none; /* Verhindert hässliche Silbentrennung */
    word-break: normal;
}

/* Beschreibungstext darunter */
.category-description {
    display: block;
    width: 100%;
	font-size:0.9rem;
	opacity:0.8;
    margin-top: 0.25rem;
}


/* Der Icon-Container dient als Anker und Maske */
.category-icon-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 0.5rem auto;
    background-color: #c5a059; /* Grundfarbe Gold */
    overflow: hidden;          /* Schneidet den Shimmer an den Rändern ab */
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Dein exakter Shimmer-Streifen */
.category-icon-shimmer {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .6) 50%, transparent 80%);
    transform: skewX(-25deg);
    pointer-events: none;
    transition: left 0s; /* Standardmäßig sofort links platzieren */
}

/* Gleit-Animation beim Hover über die Karte/den Link */
.category-link:hover .category-icon-shimmer,
.category-item:hover .category-icon-shimmer {
    left: 150%;
    transition: left .8s ease-in-out;
}

/* ==========================================================================
   STARTSEITE: INFO-INSELN TRENNLINIEN-LAYOUT
   ========================================================================== */

/* Auf großen Bildschirmen: Rahmen entfernen und durch Linie trennen */
@media (min-width: 768px) {
    /* Setzt den Abstand zwischen den Spalten zurück, damit die Trennlinie exakt in der Mitte verläuft */
    .info-islands-section {
        --bs-gutter-x: 0rem;
        --bs-gutter-y: 2rem;
    }

    /* Anker für das Pseudo-Element setzen und alten Border entfernen */
    .info-islands-section > .col:nth-child(odd) {
        position: relative;
        border-right: none !important;
    }

    /* Vertikal begrenzte goldene Trennlinie */
    .info-islands-section > .col:nth-child(odd)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 17%;           /* Startpunkt oben (unterhalb der Überschrift-Kante) */
        height: 63%;         /* Höhe der Linie (kannst du beliebig anpassen) */
        width: 1px;
        background: rgba(201, 164, 77, 0.35);
        pointer-events: none;
    }

    /* Die beiden oberen Kacheln bekommen eine goldene Trennlinie nach unten */
/*  .info-islands-section > .col:nth-child(1),
    .info-islands-section > .col:nth-child(2) {
        border-bottom: 1px solid rgba(201, 164, 77, 0.35);
        padding-bottom: 2rem;
    }*/

    /* Padding für die unteren Kacheln nach oben */
    .info-islands-section > .col:nth-child(3),
    .info-islands-section > .col:nth-child(4) {
        padding-top: 0.5rem;
    }
}

/* Anpassung der inneren Kachel: Hintergrund transparent, kein Border, kein Radius */
.info-island-card-seamless {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   7. STICKY INTERNE SUB-NAVIGATION (Ebene 0 nach oben holen)
   ========================================================================== */
.category-nav{
    position:sticky !important;
    top:143px !important;
    
    /* ERHÖHT:Schiebt die Leiste (Ebene 0) kompromisslos ÜBER die Bücher (Ebene 1),
       bleibt aber unter dem Haupt-Header/Suche (die im Bereich 1050+ liegen) */
    z-index:1020 !important;
    
    background:rgba(18, 8, 31, 0.5) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    border-bottom:1px solid rgba(201, 164, 77, 0.2);
    box-shadow:0 8px 25px rgba(0, 0, 0, 0.5);
    padding:12px 0 !important;
    margin-bottom:20px !important;
}



/* ==========================================================================
   HAUPTINHALT & BÜCHER (Ebene 1 nach unten drücken)
   ========================================================================== */
/* Zwingt den Content-Bereich und alle relativen Karten, sich unterzuordnen */
.main-content-wrapper,
.main-content-wrapper .card,
.main-content-wrapper [class*="col-"]{
    position:relative;
    z-index:1 !important;/* Ebene 1 bleibt ganz unten */
}

/* Der Container im Inneren fängt die Buttons sauber ein */
.category-nav .nav-container{
    display:flex;
    justify-content:center;/* Zentriert die Buttons auf der Mittelachse */
    gap:10px;
    flex-wrap:wrap;
    padding:0 1rem;
}

/* Buttons (.btn-hb) */
.btn-hb{
    background:rgba(32, 21, 49, 0.6) !important;
    border:1px solid rgba(201, 164, 77, 0.4) !important;
    color:var(--color-text-main) !important;
    transition:all 0.2s ease;
}

.btn-hb:hover, .btn-hb:focus{
    background:rgba(201, 164, 77, 0.15) !important;
    border-color:var(--color-accent) !important;
    color:var(--color-accent) !important;
    box-shadow:0 0 10px rgba(201, 164, 77, 0.2);
}


 
/* ==========================================================================
   8. HERO SEKTIONEN & SEITEN-LAYOUTS (Strukturkomponenten)
   ========================================================================== */


.hero, .hero-body{
    background:linear-gradient(180deg, var(--color-bg-main) 0, var(--color-bg-highlight) 50%, var(--color-bg-main) 100%);
    box-shadow:0 2px 10px rgba(0,0,0,.6);
    margin-bottom:25px;
    padding:0 10px 30px;

}
.hero{text-align:center}
.hero-body{text-align:left}
.hero-home{
	margin-top:0px;
}
.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.6rem;
    margin-top:1rem;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
    grid-column:1/-1;
}
.hero-logo{position:relative;overflow:hidden;z-index:999}
.hero-logo img{width:100%;object-fit:cover;display:block;transition:transform 1.5s}

.item-hero{max-width:1000px;margin:0 auto;text-align:left !important}
.item-meta-wrapper{padding-left:30px}

/* Sektions-Titel Trennlinien (Art-Deco / Alchemie Stil) */
.section-title {
    position: relative;
    padding-bottom: .8rem;
    transition: var(--ease);
    display: inline-block; /* Passt die Breite exakt an die Textlänge an */
    margin-top: 35px;
    text-align: left;      /* Richtet den Text linksbündig im Block aus */
}
h2.section-title, h3.section-title{scroll-margin-top:246px}

.section-title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;               /* Startet jetzt direkt unter dem ersten Buchstaben */
    width: 100%;           /* Nutzt die volle Textbreite (oder z.B. 80%) */
    height: 1px;
    background: linear-gradient(90deg, var(--color-line-fade) 0%, var(--color-line-fade) 40%, transparent 100%);
}
.theme-koepfe .section-title::after{
    box-shadow:0 0 12px rgba(209,209,224,.6), 0 0 2px rgba(255,255,255,.8);
    opacity:.9;
}

.h2subh1{font-size:1.5rem;letter-spacing:.15em;line-height:1.4;font-variant:small-caps;margin-bottom:1em}

/* Archivarische Zusammenfassungs-Boxen */
.summary{
    background:var(--layer-2);
    column-count:2;
    column-gap:40px;
    padding:20px;
}
/* Base Heading Styles */
.summary h2, .summary-wrapper h2, .artdescript h2 {
  font-size: 1.7rem;
  margin-top: 0;
  margin-bottom: 1.3rem;
}

.summary h3, .summary-wrapper h3, .artdescript h3 {
  font-size: 1.4rem;
  margin-bottom: 1.1rem;
  margin-top: 0; /* Standardmäßig 0 für die erste h3 */
}

/* Nachfolgende h3-Elemente bekommen Abstand nach oben */
.summary h3:not(:first-of-type),
.summary-wrapper h3:not(:first-of-type),
.artdescript h3:not(:first-of-type) {
  margin-top: 2.3rem;
}

.summary h4, .summary-wrapper h4, .artdescript h4 {
  font-size: 1.3rem;
  margin-top: 1.8rem;
  margin-bottom: 0.9rem;
}

.summary p, .summary-wrapper p, .artdescript p {
  margin-bottom: 1.3rem;
}

/* Fallback/Sicherheitsnetz für Spalten-Layouts */
.summary-columns > h3:first-of-type,
.summary-columns > h2:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Der äußere Container, der die Höhe ändert */
.summary-wrapper{
    background:var(--layer-2);
    padding:20px;
    position:relative;/* Wichtig für die Positionierung des Fade-Out */
}




/* ==========================================================================
   BILDWELTEN: EPOCHEN-NAVIGATION (KOMPAKTES GRID)
   ========================================================================== */

.epoch-navigation-grid .epoch-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 52px;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(201, 164, 77, 0.25);
    border-radius: 4px;
    color: #e0e0e0;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover-Effekt analog zur Bibliotheks-Ästhetik */
.epoch-navigation-grid .epoch-button-link:hover {
    background: rgba(201, 164, 77, 0.12);
    border-color: rgba(201, 164, 77, 0.6);
    color: #c9a44d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.epoch-navigation-grid .category-title {
    font-size: 0.95rem;
    line-height: 1.2;
	opacity:0.8;
}



/* Glossar-Term bleibt der Anker */
.glossar-term {
    position:relative;
    cursor:pointer;
	font-style:normal;
    text-decoration:underline dashed rgba(230, 224, 214, 0.60);
    text-underline-offset:2px; 
    text-decoration-thickness:1px;
    text-decoration-skip-ink:auto;
}

/* WICHTIG:Das Tooltip muss für das Layout unsichtbar sein, solange inaktiv */
.glossar-tooltip {
    display:none;
    position:absolute; /* Wird via JS gesetzt */
    z-index:9999999;
    width:400px;
    background:var(--layer-2);
    border:1px solid #8A7122;
    border-radius:4px;
    padding:15px;
    font-style:normal;
}

/* Basis:Tooltip ist absolut */
.glossar-tooltip.is-active {
    display:block !important;
    z-index:9999999 !important;
    background:#1C1226 !important;
    border:1px solid #8A7122 !important;
}

@media (min-width:769px) {
    .glossar-tooltip.is-active {
        width:400px !important;
        box-shadow:0 4px 15px rgba(0,0,0,0.5) !important; /* Dezenter Schatten statt Overlay */
		font-size:1rem;
    }
}

@media (max-width:768px) {
    .glossar-tooltip.is-active {
        position:fixed !important;
        top:50% !important;
        left:50% !important;
        transform:translate(-50%, -50%) !important;
        width:85vw !important;
        box-shadow:0 0 0 100vw rgba(0,0,0,0.85) !important; /* Hier das Overlay */
    }
}



/* Standard:Desktop (horizontal) */
.glossary-row {
    display:flex;
    margin-bottom:20px;
}
.glossary-term {
    flex:0 0 200px; /* Feste Breite für den Begriff */
    font-weight:bold;
}

/* Mobile:Stapelung (vertikal) */
@media (max-width:768px) {
    .glossary-row {
        flex-direction:column;
    }
    .glossary-term {
        flex:0 0 auto;
        margin-bottom:5px;
        border-bottom:1px solid #c9a44d; /* Eine feine Linie zur Trennung */
    }
}




/* Mobil-Anpassungen */
@media (max-width:767.98px) {
    .glossary-definition-text {
        padding-left:15px; /* Die Einrückung */
        font-size:1.2rem;  /* Leichte Verkleinerung des Fließtextes */
        line-height:1.4;
    }
}

/* Desktop-Anpassung (optional, um es beizubehalten) */
@media (min-width:768px) {
    .glossary-definition-text {
        padding-left:40px; /* Deutlichere Einrückung bei mehr Platz */
    }
}

/* Styling der Initialen-Box */
.initial-box {
    width:60px; /* Breite der Initiale */
    flex-shrink:0;
}

.initial-letter {
    font-size:3rem; /* Größe an dein Design anpassen */
    color:#c9a44d; /* Gold-Ton */
    font-family:'DEINE_INITIALEN_FONT', serif; /* Hier dein Font */
}

/* Anpassung auf Mobilgeräten */
@media (max-width:767.98px) {
    .glossary-definition-text {
        padding-left:0; /* Keine Einrückung mehr nötig, da Initiale wegfällt */
        font-size:1.1rem; /* Etwas kleiner für Mobile */
    }
}


/* Pergament Text-Container */
.parchment-box{
    background:0 0;
    border:none;
    box-shadow:none;
    max-width:1000px;
    margin:0 auto;
    padding:20px;
}
.parchment-box p::first-letter{
    initial-letter:normal !important;
    -webkit-initial-letter:normal !important;
    font-family:var(--font-body) !important;
    color:inherit !important;
    margin:0 !important;
    padding:0 !important;
    font-size:inherit !important;
    float:none !important;
}
#tab-inner-content h4{font-family:var(--font-display);font-size:2.2rem;margin-bottom:10px;letter-spacing:2px}
#tab-inner-content p{font-size:1.3rem;line-height:1.6;margin-bottom:1.5rem}
.parchment-box hr{display:none}


/* ==========================================================================
   9. BOX-COMPONENTS (Bücher, Autoren & Kategorien-Karten)
   ========================================================================== */
/* Buch-Karten (Book-Cards) */
.book-card{
    position:relative;
    overflow:hidden;
    background:var(--color-bg-main);
    aspect-ratio:2/3;
    box-shadow:0 10px 25px rgba(0,0,0,.5);
    transition:transform 2s cubic-bezier(.165, .84, .44, 1);
    z-index:999;
    border-radius:5px;
    border-bottom:2px solid var(--layer-0);
}
.book-card:hover{transform:translateY(-4px)}

.book-image, .book-image img{width:100%;height:100%;object-fit:cover;display:block;border-bottom:2px solid var(--layer-0);border-radius:5px;transition:transform 3s cubic-bezier(.165, .84, .44, 1)}
.book-card:hover img{transform:scale(1.05);border-bottom:3px solid var(--layer-0)}

.book-overlay{
    position:absolute;
    inset:0;
    z-index:999;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:linear-gradient(to top,#0a0514 0,rgba(10,5,20,.9) 25%,rgba(10,5,20,.4) 60%,transparent 100%);
    transition:background 2s;
	border-bottom:2px solid var(--layer-0);
}
.book-card:hover .book-overlay{
    background:linear-gradient(to top,#0a0514 0,rgba(20,10,40,.95) 40%,rgba(10,5,20,.3) 100%);
	border:1px solid var(--layer-0);
}

.book-meta{text-align:left;text-shadow:2px 2px 4px rgba(0,0,0,.9)}
.book-meta strong{display:block;font-size:1rem;line-height:1.2;color:#fff}
.meta-author{font-size:.8rem;line-height:1.1}
.year-badge{font-size:.75rem;color:var(--color-accent)}

/* Ästhetische Einzelelemente (Bilderrahmen & Ornamente) */

.bilderrahmen{
    display:inline-block;
    margin-top:25px;
    margin-bottom:25px;
    border-image-slice:65;
    border-image-width:25px;
    border-image-outset:26px;
    border-image-repeat:stretch stretch;
    border-image-source:url("https://hermetik-bibliothek.de/assets/images/art-deco-frame.png");
}
.header-ornament{margin:20px auto 30px;display:flex;justify-content:center;opacity:0.8}

.fleur-egypt-md{display:block;margin:25px auto auto;background:url("https://hermetik-bibliothek.de//assets/images/fleur-egypt-md.webp");width:87px;height:100px}


/* Bildwelten / Artwork Komponenten */
.artwork-frame{box-shadow:0 10px 30px rgba(0,0,0,.8);border:1px solid #000;position:relative;overflow:hidden;z-index:999}
.artwork-frame img{transition:transform 1.2s cubic-bezier(.23, 1, .32, 1);transform:scale(1.03);width:100%;display:block}
.gold-gradient-text{background:linear-gradient(to bottom,#f8d46b,#d5ad43);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.visual-correspondences{border-color:var(--color-border-light) !important}

.artwork-mini-card{transition:transform 2s}
.artwork-frame-mini{border:1px solid rgba(0,0,0,.5);box-shadow:0 8px 20px rgba(0,0,0,.6);aspect-ratio:4/3;position:relative;overflow:hidden;z-index:999}
.artwork-frame-mini img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.artwork-mini-card:hover img{transform:scale(1.05)}

.frame-overlay{position:absolute;inset:0;background:rgba(160,132,189,.3);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;color:#fff;font-size:2rem}
.artwork-mini-card:hover .frame-overlay{opacity:1}


/* Container für Titel und Button in eine Zeile bringen */
.gslide-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size:1rem;
}

/* Button-Design im Gold-Look */
.btn-hb.details-btn {
  display: inline-block;
  align-self: center; /* Zentriert den Button auf Höhe des Textblocks */
  white-space: nowrap; /* Verhindert ungewollte Zeilenumbrüche im Button */
  margin-left:10px;
  font-size:0.9rem;
}



.artwork-image-container {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.03); /* Dezente Kachelfläche */
  border: 1px solid rgba(207, 163, 83, 0.15); /* Subtiler Goldrahmen */
}

.artwork-image-container img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  cursor:zoom-in;
  transition: transform 0.4s ease;
}

.artwork-image-container:hover img {
  transform: scale(1.05);
}

/* Overlay-Styling */
.artwork-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(11, 11, 18, 0.95) 0%, rgba(11, 11, 18, 0.6) 70%, transparent 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.25s ease-in-out;
  pointer-events: none; /* Klick geht standardmäßig ans Bild darunter */
}

/* Overlay beim Hovern einblenden */
.artwork-image-container:hover .artwork-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Link-Styling im Overlay */
.artwork-overlay-link {
  pointer-events: auto; /* Aktiviert die Klickbarkeit des Links */
  color: #ffffff;
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.25;
  display: block;
}

.artwork-overlay-link:hover {
  color: #cfa353;
}






.artwork-mini-card {
  position: relative;
  overflow: hidden;
}

.artwork-frame-mini {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.artwork-frame-mini img {
  transition: transform 0.4s ease;
  width: 100%;
  display: block;
}

.artwork-mini-card:hover .artwork-frame-mini img {
  transform: scale(1.05);
}

/* Hover-Overlay für Text & Lupe */
.frame-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.82);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 1rem;
}

.artwork-mini-card:hover .frame-overlay {
  opacity: 1;
}

/* Lupen-Button unten rechts positionieren */
.lightbox-icon-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 2.5rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-icon-btn:hover {
  background: rgba(255, 255, 255, 0.09); /* Gold-Akzent bei Hover */
  color: #fff;
  transform: scale(1.1);
}






/* Container-Klassen (runde Rahmen) */
.author-image,
.author-image-small {
    display: block;
    margin: 0 auto .5rem;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    transition: transform 1s, border-color 0.7s, box-shadow 0.6s;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.author-image {
    width: 110px;
    height: 110px;
    border: 2px solid #c9a44d;
}

.author-image-small {
    width: 80px; 
    height: 80px; 
    border: 1px solid #c9a44d;
	margin: 0;
}

/* Bild-Formatierung innerhalb der Container */
.author-image img,
.author-image-small img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%;
    transition: transform 0.8s ease-in-out; 
}

/* Container Hover (Rahmen & Skalierung außen) */
.author-image:hover,
.author-image-small:hover {
    transform: scale(1.02);
    border-color: var(--color-border) !important;
    box-shadow: 0 0 15px var(--color-border), inset 0 0 12px var(--color-border-light);
    color: var(--color-accent);
}

/* Bild Hover (Zoom effektes Bildes innen) */
.author-image:hover img,
.author-image-small:hover img {
    transform: scale(1.08);
}

.key-author-card{display:block;transition:transform 2s;background-size:cover;background-position:center;background-repeat:no-repeat;color:inherit;text-decoration:none}
.center-page-img{display:block;max-width:500px;margin:auto;z-index:999}

/* Kategorie-Grid Elemente */
.category-item{
    background:linear-gradient(180deg, rgba(27, 10, 46, 0.3) 0%, rgba(20, 8, 31, 0.3) 100%);
		backdrop-filter:blur(3px);
    box-shadow:0 1px 0 var(--glow-soft);
    position:relative;
    padding:0;
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    line-height:1.4;
    border:1px solid var(--color-border-soft) !important;
    border-bottom:1px solid var(--color-border) !important;
    -webkit-font-smoothing:antialiased;
    transform:translateZ(0);
    transition:border-color .2s ease-in-out, box-shadow .9s cubic-bezier(.23, 1, .32, 1), transform .9s cubic-bezier(.23, 1, .32, 1);
}
.category-item:hover{border-color:var(--color-border) !important;transform:scale(1.015) translateZ(0);z-index:50;box-shadow:0 0 15px var(--color-border), inset 0 0 12px var(--color-border-light)}

.category-link{position:relative;display:block;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;color:inherit;transition:color .3s}
.category-link:hover{color:var(--color-accent)}

.category-title{color:var(--color-text-main);font-size:1.75rem;line-height:.85;transform:translateZ(0)}
.category-desc{color:var(--color-text-main);font-size:1rem;padding-top:5px}

.category-icon-page, .category-icon-wrapper{-webkit-mask-repeat:no-repeat;mask-position:center;background:linear-gradient(to bottom,#e5c158 0,#c59d33 50%,#966e0d 100%);overflow:hidden}
.category-icon-wrapper{position:relative;z-index:999;width:70px;height:70px;display:flex;align-items:center;justify-content:center;-webkit-mask-size:contain;mask-size:contain;transition:transform .7s cubic-bezier(.23, 1, .32, 1), background .4s}
.category-link:hover .category-icon-wrapper{transform:scale(1.1);background:linear-gradient(to bottom,#f5d782 0,#d4af37 50%,#b8860b 100%)}

.category-icon-page{position:relative;z-index:999;width:135px;height:135px;-webkit-mask-size:contain;mask-size:contain;margin:0 auto}
.category-badge{position:absolute;z-index:20;bottom:20px;margin:0 auto;font-size:.5em;color:#d4af37;opacity:.5}

.category-icon-shimmer{position:absolute;top:0;left:-50%;width:50%;height:100%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%);transform:skewX(-25deg);pointer-events:none}
.category-link:hover .category-icon-shimmer{left:150%;transition:left .8s ease-in-out}




/* Die edle, horizontale Kachel */
.book-category-link{
    display:inline-flex;
    align-items:center;
    width:100%;

    /* Leicht reduziertes Padding oben/unten rückt die Boxen vertikal zusammen */
    padding:8px 14px;
    gap:12px;
}

/* Das Mini-Icon links */
.book-category-link .mini-icon{
    width:26px;
    height:26px;
    flex-shrink:0;
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-position:center;
    transition:background 0.25s ease;
}

/* Beim Hovern schwenkt der Hintergrund der Maske auf ein helleres Gold um */
.book-category-link:hover .mini-icon{
    background:linear-gradient(to bottom, #fff0a5 0%, #e5c158 100%) !important;
}

/* Der Begleittext */
.book-category-link .category-text{
    color:#b0afb8;
    font-size:1.3rem;/* Auf 1rem angehoben für perfekte Lesbarkeit */

    line-height:1.3;
    transition:color 0.25s ease;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.book-category-link:hover .category-text{
    color:#f5d782;
} 




/* Ähnliche Bücher Sektion (Related Books) */
#relatedBooks{margin-top:30px;border-top:none !important;padding-top:0}
#relatedBooks .book-collection .row{gap:3rem;justify-content:center}
#relatedBooks .highlight-item{flex:0 0 auto;width:190px}
#relatedBooks .book-card{transform:scale(1.15);transition:var(--ease);box-shadow:var(--glow-soft)}
#relatedBooks .book-card:hover{transform:scale(1.25);box-shadow:var(--glow-strong);z-index:10}
#relatedBooks .book-meta strong{font-size:1.1rem}
#relatedBooks a{text-decoration:none;transition:var(--ease);color:var(--color-text-main)}
#relatedBooks a:hover{text-shadow:var(--glow-strong);color:var(--color-accent)}


/* Container für glightbox-Bildunterschrift */

.gslide-description {
  background: rgba(15, 12, 29, 0.9) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(212, 160, 23, 0.3);
  font-family:"Poiret One" !important;
}

.gslide-title {
  color: #c9a44d !important;
  font-size: 1.2rem !important;
  margin-bottom:0.15rem !important;
  font-family:"Poiret One" !important;
}

.gslide-desc {
  color: #e0e0e0 !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  font-family:"Poiret One" !important;
}


/* Das Grid-System für die Haupt-Hubs */
.category-pillar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:24px;
    padding:40px 0;
}

/* Die veredelte Kachel */
.pillar-main-card{
    background:rgba(20, 10, 30, 0.4);/* Tiefes Alchemie-Violett */
    border:1px solid rgba(212, 175, 55, 0.15);/* Hauchdünner Goldrand */
    border-radius:4px;
    padding:24px;
    display:flex;
    flex-direction:column;
    transition:all 0.25s ease-in-out;
}

.pillar-main-card:hover{
    border-color:rgba(212, 175, 55, 0.4);
    box-shadow:0 8px 32px rgba(0, 0, 0, 0.5);
    transform:translateY(-2px);
}

/* Kachel-Header-Link */
.pillar-card-anchor{
    text-decoration:none !important;
    color:inherit;
    text-align:center;
    display:block;
    margin-bottom:16px;
}

.pillar-card-icon-wrap{
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
}

.pillar-card-icon{
    max-height:64px;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

.pillar-card-title{
    color:#d4af37;/* Gold */
    font-family:'Cinzel', serif;
    font-size:1.35rem;
    margin-bottom:4px;
}

.pillar-card-subtitle{
    color:#a090b0;
    font-size:0.85rem;
    font-style:italic;
    margin:0;
}

/* Der genealogische Ast-Bereich innerhalb der Kachel */
.pillar-card-tree-zone{
    border-top:1px solid rgba(212, 175, 55, 0.1);
    margin-top:auto;/* Drückt den Baum sauber an den unteren Kartenrand */
    padding-top:12px;
}

.pillar-sub-tree{
    list-style:none;
    padding-left:0;
    margin-bottom:0;
}

/* Unaufdringliche, eingerückte Verschachtelung */
.pillar-sub-tree .pillar-sub-tree{
    padding-left:14px;
    margin-top:2px;
    border-left:1px solid rgba(212, 175, 55, 0.1);/* Hauchzarte vertikale Abstammungslinie */
}

.pillar-sub-item{
    margin-bottom:4px;
    font-size:0.9rem;
}

.pillar-sub-item a{
    color:#e0e0e0;
    text-decoration:none;
    transition:color 0.15s ease;
    display:inline-block;
}

.pillar-sub-item a:hover{
    color:#d4af37;/* Schlägt bei Hover in Gold um */
}



/* ==========================================================================
   10. INTERAKTIVES TAROT-THEATER (Spezial-Komponente)
   ========================================================================== */
.theater-stage-wrapper{
    position:relative;
    width:100%;
    max-width:800px;
    aspect-ratio:800/596;
    margin:20px auto;
    overflow:hidden;
    background:var(--color-bg-deep);
    box-shadow:0 15px 40px rgba(0,0,0,.8);
}
.stage-background{position:absolute;inset:0;z-index:1;transition:background 1.5s ease-in-out}
.stage-center{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:5;padding-top:40px}
.tarot-container{width:25%;max-width:200px;perspective:1000px;cursor:pointer}
.tarot-card{width:100%;aspect-ratio:259/432;transition:transform .8s cubic-bezier(.4, 0, .2, 1);transform-style:preserve-3d;position:relative}
.tarot-card.is-flipped{transform:rotateY(180deg)}
.card-face{position:absolute;width:100%;height:100%;box-shadow:inset 0 0 15px rgba(0,0,0,.5), 0 5px 15px rgba(0,0,0,.4);backface-visibility:hidden}
.card-back{background:var(--color-bg-deep) url('https://hermetik-bibliothek.de/assets/images/tarot/card-back.webp') center/cover}
.card-front{background:#fff;transform:rotateY(180deg);position:absolute;width:100%;height:100%;box-shadow:inset 0 0 15px rgba(0,0,0,.5), 0 5px 15px rgba(0,0,0,.4);backface-visibility:hidden}
.card-front img{width:100%;height:100%;object-fit:contain}
.theater-frame-overlay{position:absolute;inset:0;z-index:10;pointer-events:none;background:url('https://hermetik-bibliothek.de/assets/images/tarot/theater-rahmen.webp') center/100% 100% no-repeat}





/* ==========================================================================
   12. THE COSMIC APPARATUS - ATMOSPHÄRISCHES LINIENSYSTEM (Finishing)
   ========================================================================== */



/* ==========================================================================
   12. BACKEND & ADMINISTRATIVE SYSTEME
   ========================================================================== */
.btn-hb{transition:.4s;border:1px solid var(--color-border);border-radius:5px}
.btn-hb:hover{color:var(--color-accent);box-shadow:0 0 15px var(--color-border-light);transform:translateY(-1px)}
.btn-hb:active{transform:translateY(0)}
.nav-link-admin{font-size:.8rem}
#toTop, #close-search{padding:5px;cursor:pointer}
#tab-inner-content h4, #tab-inner-content p{color:var(--color-text-main)}






/* ==========================================================================
   13. RESPONSIVE DESIGN (Media Queries)
   ========================================================================== */
/* TABLET- & LAPTOP-ANPASSUNGEN */
@media (max-width:992px){
    .navbar{padding-left:0;padding-right:0;border-bottom:0}
    .search-input{position:relative;border-top:1px;top:5px}
    .hero-nav{
        background:linear-gradient(180deg, var(--color-bg-main) 0, var(--color-bg-highlight) 50%, var(--color-bg-main) 100%);
        border-bottom:1px solid var(--color-border);
        box-shadow:0 1px 0 var(--glow-soft);
        padding:auto;
        text-align:center;
   }
    .nav-link{display:block;width:100%;text-align:center}
    .breadcrumb{padding-top:.5rem;padding-bottom:0}
}

/* SMARTPHONE- & MOBIL-ANPASSUNGEN */
@media (max-width:768px){
    .item-hero{align-items:center !important}
    h1{font-size:2.1em}
    h2{font-size:1.8em}
    .h2subh1{font-size:1.2rem}
    .bearbeiten{position:fixed;top:35px;right:105px;z-index:5000}
    .author-image img, .book-image img{height:220px}
    .center-page-img{max-width:280px;margin:auto}
    .summary{column-count:1}
    .card{padding:0}
    .book-meta{padding-bottom:10px}
    .book-comment{font-size:1.2rem}
    #tab-inner-content h4{font-size:1.5rem}
    #tab-inner-content p{font-size:1.1rem;padding:0 10px}
    .theater-stage-wrapper{margin:10px auto}
	h2.section-title, h3.section-title{scroll-margin-top:275px}
	
.nav-container .btn.btn-hb{
        font-size:0.7rem !important;
        padding:0.3rem 0.7rem;/* Ggf. auch das Padding verkleinern */
		margin-top:0.4rem
   }
   
   	ol.breadcrumb{padding:0;}
}

@media (max-width:767px){
    .hb-index-dropdown-box{
        position:fixed !important;
        top:85px !important;
        left:16px !important;
        right:16px !important;
        width:calc(100% - 32px) !important;
        max-width:calc(100% - 32px) !important;
   }
    .hb-index-item{
        white-space:normal !important;
   }
}

@media (max-width:576px){
    .category-nav{top:177px}
    .category-nav a{font-size:.9rem}
}




/* ==========================================================================
   3. HINTERGRUND-AURA (Die Geometrie)
   ========================================================================== */
.nav-item:has(a.nav-link.active)::before,
.nav-item a.nav-link.active::before{
    content:"";position:absolute;top:100%;left:50%;
    transform:translate(-50%, -68%) !important;
    width:190px !important;height:190px !important;
    pointer-events:none;z-index:-1;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%23ffd700' stroke-width='0.4' stroke-opacity='0.25'/%3E%3Crect x='17.5' y='17.5' width='65' height='65' fill='none' stroke='%23ffffff' stroke-width='0.3' stroke-opacity='0.15' transform='rotate(0 50 50)'/%3E%3Crect x='17.5' y='17.5' width='65' height='65' fill='none' stroke='%23ffd700' stroke-width='0.3' stroke-opacity='0.12' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='32' fill='none' stroke='%23ffffff' stroke-width='0.4' stroke-opacity='0.2'/%3E%3Cline x1='50' y1='0' x2='50' y2='100' stroke='%23ffffff' stroke-width='0.2' stroke-opacity='0.2'/%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='%23ffffff' stroke-width='0.2' stroke-opacity='0.2'/%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23ffd700' stroke-width='0.2' stroke-opacity='0.15'/%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23ffd700' stroke-width='0.2' stroke-opacity='0.15'/%3E%3Cpath d='M25 0 L75 100 M75 0 L25 100 M0 25 L100 75 M0 75 L100 25' stroke='%23ffffff' stroke-width='0.12' stroke-opacity='0.08' stroke-dasharray='1 1.5'/%3E%3Ccircle cx='50' cy='50' r='18' fill='none' stroke='%23ffd700' stroke-width='0.5' stroke-opacity='0.25'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 50%, var(--active-color, #b39246) 0%, rgba(0,0,0,0) 60%);
    mix-blend-mode:screen;opacity:0.50;transition:all 0.3s ease;
}

/* ==========================================================================
   4. PERGAMENT- & HERO-LAYOUT (Flanken-Befreiung)
   ========================================================================== */
html, #wrapper, #app, .site-wrapper, .main-content-wrapper, :root{background:transparent !important;--bs-body-bg:transparent !important}
[class*="theme-"]{background-color:transparent !important}

.hero{
    background:linear-gradient(180deg, rgba(27, 10, 46, 0.05) 0%, rgba(42, 14, 70, 0.05) 50%, rgba(27, 10, 46, 0.05) 100%) !important;
    backdrop-filter:blur(1px);
}

/* ==========================================================================
   5. MOBILE ANPASSUNGEN
   ========================================================================== */
@media (max-width:992px){
    .navbar-nav{padding-top:40px}
    [class*="nav-element-"]::after, .nav-item:has(a.nav-link.active)::after{
        top:50% !important;left:20px !important;transform:translateY(-50%) !important;
   }
    .navbar-nav .nav-link{padding-left:45px !important}
    .navbar .nav-link:not(.active):hover::after{width:25%}
}




/* 1. Identifikation der Riegel-Container */
/* Vermutlich haben diese Klassen eine Hintergrundfarbe, die wir auf transparent setzen müssen */
.sub-navigation, 
.breadcrumb-container, 
#sub-nav-wrapper, 
.nav-secondary{
    background:transparent !important;
    background-color:transparent !important;
    border-bottom:none !important;/* Entfernt die harte Linie, falls vorhanden */
    box-shadow:none !important;   /* Entfernt harte Schlagschatten-Riegel */
}

/* 2. Falls die Container weiterhin einen Farb-Kasten erzwingen */
[class*="sub-nav"], 
[id*="sub-nav"]{
    background-color:transparent !important;
}

/* 3. Feintuning der Abstände, um das Layout "schweben" zu lassen */
.sub-navigation{
    margin-top:10px;
    margin-bottom:20px;
    /* Wir geben den Buttons innerhalb der Navi etwas mehr Luft zum Pergament */
    padding:10px 0;
}