/* Hintergrund und Grundlayout */
body {
    background-color: #1b1b1f; /* Setzt die Hintergrundfarbe der Seite */
    color: #e8d8b5; /* Setzt die Textfarbe */
    font-family: 'Garamond', serif; /* Setzt die Schriftart */
    margin: 0; /* Entfernt den Standardseitenrand */
    padding: 0; /* Entfernt die Standardseitenabstände */
    display: flex; /* Nutzt flexbox für das Layout */
    flex-direction: row; /* Richtet die Flexbox-Elemente horizontal aus */
    min-height: 100vh; /* Setzt die minimale Höhe auf die gesamte Fensterhöhe */
    justify-content: flex-start; /* Richtet die Flexbox-Elemente am Anfang aus */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Legt es hinter allen Inhalt */

    /* Standardwerte für unsere CSS-Variablen */
    background-image: var(--page-background-image, none);
    opacity: calc(var(--page-background-opacity, 1) * 0.6);
    filter: blur(1px);

    /* Wichtige Stile für das Bild, wie vorher */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* Sanfter Übergang für den Fade-Effekt */
    transition: opacity 0.2s ease-in-out;
}

/* Sprachumschalter */
#languageSwitcher {
    position: fixed; /* Fixiert den Sprachumschalter auf der Seite */
    top: 20px; /* Positioniert ihn 20px vom oberen Bildschirmrand */
    right: 2%; /* Positioniert ihn 16.5% vom linken Bildschirmrand */
    z-index: 1000; /* Setzt die Stapelreihenfolge über andere Elemente */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.language-switcher-flags {
    display: flex;
    align-items: center;
}

/* Nur Flaggen-Buttons – nicht die Custom-Hub-+-Buttons */
.language-switcher-flags > button {
    background: none; /* Entfernt den Standard-Hintergrund des Buttons */
    border: none; /* Entfernt die Standardrahmen des Buttons */
    cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger bei Hover */
    padding: 0; /* Entfernt die Standardabstände des Buttons */
    margin-right: 10px; /* Fügt einen rechten Abstand zwischen Buttons hinzu */
}

.language-switcher-flags > button:last-child {
    margin-right: 0;
}

#languageSwitcher img {
    border-radius: 50%; /* Macht die Bilder rund */
    width: 24px; /* Setzt die Breite der Bilder */
    height: 24px; /* Setzt die Höhe der Bilder */
    border: 2px solid #7a431d; /* Fügt einen kupferfarbenen Rahmen hinzu */
}

/* Schritt-1: Custom-Hub unter den Sprachen; Zone öffnet nach links.
   Gleicher Breakpoint wie die „+“-Buttons in den Fach-Schritten: ab 768px + Flag. */
.step1-custom-hub {
    display: none !important;
    position: relative;
    margin: 0;
    flex-direction: column;
    align-items: flex-end;
}

@media screen and (min-width: 768px) {
    .step1-custom-hub.cc-feature-enabled {
        display: inline-flex !important;
    }
}

.step1-custom-hub-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #d4a017;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
}

.step1-custom-hub-toggle:hover,
.step1-custom-hub-toggle:focus,
.step1-custom-hub-toggle:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.step1-custom-hub-toggle-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: none;
    border: none;
}

/* Pfeil +30%; ⊕ +20%; initial nach links, geöffnet 180° nach rechts */
.step1-custom-hub-toggle-face .cc-collapse-arrow {
    position: relative;
    font-size: 3.504rem;
    line-height: 1;
    display: inline-block;
    color: #8b5e34;
    transform: rotate(-90deg);
    transition: transform 0.35s ease-in-out;
}

.step1-custom-hub-toggle-face .cc-collapse-arrow.is-collapsed {
    transform: rotate(90deg);
}

.step1-custom-hub-glyph {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    font-size: 0.367em;
    line-height: 1;
    font-weight: normal;
    color: #e8d8b5;
    pointer-events: none;
}

/* Zone: aus dem rechten Rand nach innen einschieben */
.step1-custom-hub-panel {
    position: absolute;
    top: 0;
    right: calc(100% + 10px);
    left: auto;
    min-width: 210px;
    padding: 8px 10px;
    border: 1px solid rgba(232, 216, 181, 0.28);
    border-radius: 6px;
    background: rgba(30, 30, 34, 0.96);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}

.step1-custom-hub-panel.collapsed {
    display: flex !important;
    transform: translateX(calc(100% + 3.5rem));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.step1-custom-hub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.step1-custom-hub-row[hidden] {
    display: none !important;
}

.step1-custom-hub-label {
    color: #e8d8b5;
    font-family: 'Garamond', serif;
    font-size: 0.95rem;
    line-height: 1.2;
}

.step1-custom-hub-label.is-loaded {
    color: #6faf6f;
}

.step1-custom-hub-row.is-disabled {
    opacity: 0.45;
}

.step1-custom-hub-row.is-disabled .add-custom-subclass-btn {
    cursor: not-allowed;
    pointer-events: none;
}

/* Container für den Hauptinhalt und Fortschritt */
#container {
    display: flex; /* Nutzt flexbox für den Hauptinhalt */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: flex-start; /* Richtet den Inhalt oben aus */
    width: 100%; /* Setzt die Breite des Containers */
    padding-top: 20px; /* Fügt einen oberen Abstand hinzu */
    box-sizing: border-box; /* Inklusive Padding und Border in der Breite */
}

/* =======================================================================
   STEPBAR - BASIS (Desktop > 1440px)
   ======================================================================= */

/* Navigation auf der linken Seite mit Kupferrahmen */
#stepBar {
    width: 180px; /* Etwas breiter für die Labels */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background-color: rgba(58, 58, 65, 0.8); 
    padding: 20px 0; 
    border-right: 2px solid #7a431d; 
    height: 100vh; 
    position: fixed; 
    top: 0; 
    left: 0; 
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.7);
    z-index: 1 !important;
    counter-reset: stepCounter;
    transition: all 0.3s ease;
}

/* Buttons für die Navigation */
.stepButton {
    position: relative;
    background-color: #8b5e34;
    color: #e8d8b5;
    font-weight: normal; 
    border: none;
    width: 100%; 
    padding: 10px 5px; 
    min-height: 60px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    counter-increment: stepCounter;
}

/* Hover- und Aktiv-Zustände beibehalten */
.stepButton:hover {
    background-color: #a36a42;
}

.stepButton:disabled {
    background-color: #4a4a4f;
    cursor: not-allowed;
}

.stepButton.active {
    background-color: #a36a42;
}

/* Hover- und Aktiv-Zustände beibehalten */
.stepButton:hover { background-color: #a36a42; }
.stepButton:disabled { background-color: #4a4a4f; cursor: not-allowed; }
.stepButton.active { background-color: #a36a42; }

/* --- LEVEL-UP: Pseudo-Step (nicht klickbar) ---
   Ansatz: normaler .stepButton (gleiche Größe/Clip/Breakpoints) als Kupfer-Außenform.
   Innen: etwas kleinere Fläche in Stepbar-Farbe + Aufschrift → wirkt wie Rahmen. */
.level-up-mode-badge {
    /* Außen = aktiver Step-Button (Kupfer), kein Hover/Active-Wechsel */
    background-color: #a36a42 !important;
    cursor: default;
    user-select: none;
    pointer-events: none;
    counter-increment: none;
    filter: none;
    min-width: 0;
}

/* Desktop-Spalte: äußerer Kupfer-Button leicht kleiner als volle Step-Buttons */
@media screen and (min-width: 1441px) and (min-height: 851px) {
    .level-up-mode-badge {
        width: 100%;
        max-width: 95%;
        align-self: center;
        min-height: 50px;
        padding: 8px 4px;
    }
}

.level-up-mode-badge:hover,
.level-up-mode-badge:disabled,
.level-up-mode-badge.active {
    background-color: #a36a42 !important;
}

/* Keine Step-Nummer am Pseudo-Step */
.level-up-mode-badge::after {
    content: none !important;
    display: none !important;
}

/* Kleinere Innenfläche = Stepbar-Farbe (gleicher Clip, leicht skaliert) */
.level-up-mode-badge-inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 2px 6px;
    /* gleiche Silhouette wie der äußere stepButton */
    clip-path: inherit;
    transform: scale(0.86);
    transform-origin: center center;
    background-color: rgba(58, 58, 65, 1);
    color: #e8d8b5;
    pointer-events: none;
}

body.level-up-mode .level-up-mode-badge {
    display: flex;
}

.level-up-mode-badge[hidden] {
    display: none !important;
}

/* Level-Up: nur Schritte 5–7 sichtbar — Layout der sichtbaren Buttons unverändert */
body.level-up-mode #stepBar .stepButton[hidden],
body.level-up-mode #stepBar .stepButton.level-up-step-hidden {
    display: none !important;
}

/* Level-Up: gesperrte Felder (Vergangenheit / Bib-Einträge / Volk-Talent-Zauber) */
body.level-up-mode .level-up-field-locked {
    cursor: not-allowed;
}

body.level-up-mode select.level-up-field-locked {
    /* Schloss kommt aus dem globalen select:disabled-Hintergrund — kein Extra-Badge */
    opacity: 1;
}

/*
 * Gesperrte Radios/Checkboxen: nur das Control selbst ausgrauen (nicht Label/Schloss).
 * Ausnahme: fest gewähltes + gesperrtes Control bleibt voll sichtbar.
 */
body.level-up-mode input[type="radio"].level-up-field-locked:not(:checked),
body.level-up-mode input[type="checkbox"].level-up-field-locked:not(:checked),
body.level-up-mode .level-up-field-locked input[type="radio"]:not(:checked),
body.level-up-mode .level-up-field-locked input[type="checkbox"]:not(:checked) {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.4);
    pointer-events: none;
}

body.level-up-mode input[type="radio"].level-up-field-locked:not(:checked):hover,
body.level-up-mode input[type="radio"].level-up-field-locked:not(:checked):focus,
body.level-up-mode .level-up-field-locked input[type="radio"]:not(:checked):hover,
body.level-up-mode .level-up-field-locked input[type="radio"]:not(:checked):focus {
    border-color: #5a5a60 !important;
    background-color: #2e2e33 !important;
    box-shadow: none !important;
}

body.level-up-mode input[type="checkbox"].level-up-field-locked:not(:checked):hover,
body.level-up-mode .level-up-field-locked input[type="checkbox"]:not(:checked):hover {
    box-shadow: none !important;
}

/* Fest gewählt + gesperrt: voll sichtbar, aber ohne Hover-Highlight / nicht klickbar */
body.level-up-mode input[type="radio"].level-up-field-locked:checked,
body.level-up-mode input[type="checkbox"].level-up-field-locked:checked,
body.level-up-mode .level-up-field-locked input[type="radio"]:checked,
body.level-up-mode .level-up-field-locked input[type="checkbox"]:checked {
    opacity: 1;
    filter: none;
    cursor: not-allowed;
    pointer-events: none;
}

body.level-up-mode input[type="radio"].level-up-field-locked:checked:hover,
body.level-up-mode input[type="radio"].level-up-field-locked:checked:focus,
body.level-up-mode .level-up-field-locked input[type="radio"]:checked:hover,
body.level-up-mode .level-up-field-locked input[type="radio"]:checked:focus {
    /* normales Checked-Look behalten, kein Extra-Glow durch :hover-Regel erzwingen */
    pointer-events: none;
}

body.level-up-mode .csp-action-btn--locked {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Schloss-Banner hinter Radio-Label (z. B. festgelegte Unterklasse) */
body.level-up-mode .level-up-lock-badge {
    display: inline;
    margin-left: 0.35em;
    opacity: 0.95;
    font-size: 0.95em;
    line-height: 1;
    vertical-align: middle;
    pointer-events: none;
}

/* Neue offene Auswahl (Level-Up only) — goldener Aufwärtspfeil */
body.level-up-mode .level-up-new-choice-icon {
    display: inline;
    margin-left: 0.3em;
    color: #d4a017;
    font-size: 0.95em;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
    pointer-events: none;
    opacity: 0.95;
}

/*
 * Leere Selects: nur goldenes ↑ rechts im Feld (wie 🔒 bei select:disabled).
 * Schrift und nativer Auswahlpfeil bleiben in Standardfarbe.
 */
body.level-up-mode select.level-up-new-choice-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><text x='0' y='16' font-size='16' fill='%23d4a017' font-weight='bold'>↑</text></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 28px center !important;
    background-size: 18px !important;
    padding-right: 48px !important;
}

@media screen and (max-width: 1000px) {
    body.level-up-mode select.level-up-new-choice-select {
        background-position: right 24px center !important;
        padding-right: 44px !important;
    }
}

/* Außerhalb Level-Up unsichtbar (falls DOM-Reste) */
.level-up-new-choice-icon {
    display: none;
}

/* Unterklasse bereits gesetzt: Custom-UC-+ ausblenden (schlägt cc-feature-enabled) */
body.level-up-mode #addCustomSubclassWrap.level-up-subclass-add-hidden,
body.level-up-mode #addCustomSubclassWrap.level-up-subclass-add-hidden.cc-feature-enabled {
    display: none !important;
}

.level-up-badge-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.level-up-badge-icon {
    font-size: 1.15em;
    line-height: 1;
    font-weight: bold;
}

.level-up-badge-compact {
    display: none;
    font-size: 1.15em;
    line-height: 1;
    font-weight: bold;
}

/* 3. Der Subtext Bereich (Die Auswahl) */
.step-subtext {
    color: #e8d8b5; 
    font-size: 0.9em; 
    font-weight: bold; 
    margin-top: 2px;
}

/* =======================================================================
   STEPBAR - BREAKPOINTS
   ======================================================================= */

/* STUFE 2: Standard Laptop / Kleiner Desktop (Breite < 1440px ODER Höhe < 850px) */
@media screen and (max-width: 1440px), screen and (max-height: 850px) {
    #stepBar {
        width: 140px; /* Leicht angepasst für das Muster */
        display: grid;
        grid-template-columns: repeat(2, 60px); 
        /* Die Gaps kontrollieren den Abstand zwischen den Fliesen */
        column-gap: 0px; 
        row-gap: 15px; 
        justify-content: center;
        align-content: center;
        padding: 0;
    }

    .stepButton {
        width: 60px;
        height: 60px;
        min-height: 60px;
        margin: 0;
        /* Perfekte Raute */
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
    }

    /* Das "Fliesen-Muster": Jede zweite Fliese wird versetzt, 
       um exakt in die Lücke der anderen Spalte zu greifen */
    .stepButton:nth-child(even) {
        /* Versatz = Hälfte der Höhe + Hälfte der Lücke (60/2 + 10/2) */
        transform: translateY(35px); 
    }

    /* Korrektur für die letzte Fliese, damit sie nicht unten abgeschnitten wird */
    #stepBar {
        padding-bottom: 40px;
    }

    /* Nur Nummern zeigen */
    .stepButton > span, .step-subtext { display: none; }
    .stepButton::after {
        content: counter(stepCounter);
        font-size: 1.5em; 
        font-weight: bold;
        color: #e8d8b5;
        display: block;
    }

    /* LEVEL-UP: Compact-Pfeil statt Langtext; keine Step-Nummer */
    .level-up-mode-badge .level-up-badge-full { display: none !important; }
    .level-up-mode-badge .level-up-badge-compact {
        display: block !important;
        font-size: 1.5em;
        color: #e8d8b5;
    }
    .level-up-mode-badge::after {
        content: none !important;
        display: none !important;
    }
    /* Innen-Scale bleibt (transform am Kind, nicht am .stepButton) */
    .level-up-mode-badge-inner {
        transform: scale(0.84);
    }

    /* LEVEL-UP: gleiche Verkleinerung wie Desktop (95% / etwas flacher) */
    .level-up-mode-badge {
        width: 100%;
        max-width: 95%;
        height: 95%;
        max-height: 0px;
        min-height: 50px;
        padding: 8px 4px;
        align-self: center;
        justify-self: center;
        margin: 0;
    }
}

/* STUFE 3: Tablet / Schmale Fenster (< 1000px) */
@media screen and (max-width: 1000px) {
    #stepBar {
        width: 65px; 
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        padding: 0px 0;
        gap: 0px
    }
    .stepButton {
        width: 100%;
        height: 60px;
        margin: 2px 0;
        transform: none !important; /* Versatz aufheben */
    }

    /* LEVEL-UP: gleiche Verkleinerung wie Desktop */
    .level-up-mode-badge {
        width: 100%;
        max-width: 90%;
        align-self: center;
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        padding: 8px 4px;
        margin: 2px auto;
    }
}


/* =======================================================================
   MAIN CONTENT (FIXIERT)
   ======================================================================= */

#mainContent {
    width: 500px; 
    max-width: 500px; 
    padding: 20px;
    background-color: rgba(58, 58, 65, 0.8);
    color: #e8d8b5;
    /* Deine handgemachten Rahmen */
    border-left: 2px solid #7a431d;
    border-right: 2px solid #7a431d;
    border-bottom: 2px solid #7a431d; 
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
    text-align: center;
    margin: 0 auto; /* Zentriert das Feld im freien Bereich */
    overflow: hidden; 
    position: relative;
    z-index: 5;
}

/* Inhaltsschritte */
.step {
    width: 100%; /* Setzt die Breite der Schritte */
    margin-bottom: 20px; /* Fügt unteren Abstand hinzu */
}

.step h2 {
    margin-bottom: 10vh; /* Fügt unteren Abstand zur Überschrift hinzu */
}

/* Container für spezifische Texte */
#classTextContainer {
    margin-bottom: 3%; /* Fügt unteren Abstand hinzu */
}

#backgroundTextContainer {
    margin-bottom: 3%; /* Fügt unteren Abstand hinzu */
}

#backgroundDetailsContainer input[type="number"].background-attribute-points {
    width: 40px;
    height: 35px;
    font-size: 16px;
    padding: 5px;
    margin: 0;

    /* Die folgenden Stile bleiben für das Aussehen erhalten */
    border-radius: 5px;
    border: 1px solid #8b5e34;
    background-color: #2e2e33;
    color: #e8d8b5;
    font-family: 'Garamond', serif;
    text-align: center;
    /* Die Zeile "-moz-appearance: textfield;" wurde hier entfernt */
}

.attribute-point-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Ersetzt den alten Margin für einen zuverlässigeren Abstand */
    padding-bottom: 5px;  /* Schafft einen klaren Innenabstand nach unten */
    margin-bottom: 5px;   /* Sorgt für zusätzlichen Platz zur ersten Attribut-Zeile */
}

.attribute-point-row {
    display: flex;
    justify-content: space-between; /* Hält das Label links und den Input rechts */
    align-items: center;
    margin-bottom: 8px; /* Etwas mehr Abstand zwischen den Attribut-Zeilen */
}

.attribute-point-row label {
    flex-grow: 1;           /* Das Label wächst und füllt den verfügbaren Platz */
    text-align: left;       /* Stellt sicher, dass der Text des Labels linksbündig ist */
    /* Die alte "flex-basis"-Regel wurde entfernt */
}

#skill65.dropdown, #skill66.dropdown, #backgroundFeatDropdown.dropdown {
min-width: 95%;
margin-top: 3px;
}

/* =======================================================================
   SCHRITT 3: SPEZIES
   ======================================================================= */

#speciesTextContainer {
    margin-bottom: 3%; /* Fügt unteren Abstand hinzu */
}

/* Zusätzlicher Abstand für Volksmerkmale */
#speciesTraitsLabel {
    margin-top: 40px; /* Fügt oberen Abstand zum Label hinzu */
    margin-bottom: 20px; /* Fügt unteren Abstand zum Label hinzu */
}

#speciesTraitsContainer {
    margin-top: 5px; /* Fügt oberen Abstand zum Container hinzu */
    margin-bottom: 3%; /* Fügt unteren Abstand zum Container hinzu */
    padding: 5px 15px 0px 40px; /* Fügt Innenabstand hinzu, um den Rahmen zu vergrößern */
    background-color: rgba(58, 58, 65, 0.6);
}

#speciesTraitsContainer .radio-container {
    display: flex; /* Nutzt flexbox für die Anordnung der Radioinputs */
    flex-direction: row; /* Richtet die Radioinputs horizontal aus */
    align-items: center; /* Zentriert die Radioinputs vertikal */
    gap: 10px; /* Fügt Abstand zwischen den Radioinputs hinzu */
    margin-left: -50px; /* Entfernt den zusätzlichen linken Abstand der Radioinputs */
}

#skill59, #skill60, #versatileDropdown {
    width: 220px;
}

/* =======================================================================
   SCHRITT 3: SPEZIES-BILD STYLING (Hintergrund-Illustration)
   ======================================================================= */

.species-image {
    position: fixed;
    /* Fest in der unteren rechten Ecke verankert */
    bottom: 0;
    right: 0;
    
    /* Proportionale Größe basierend auf der Breite */
    width: 45vw;
    max-width: 1200px;
    
    /* Z-Index Logik: 
       Hinter MainContent (5) und StepBar (10), 
       aber vor dem eigentlichen Background-Bild */
     opacity: 0.7;
     z-index: -1 !important; 
    
    /* Verhindert, dass das Bild Klicks abfängt (wichtig, da es groß ist) */
    pointer-events: none; 
    text-align: right;
    transition: opacity 0.3s ease, width 0.3s ease;
}

.species-image img {
    /* Wir nutzen 100% des Containers für volle Kontrolle */
    width: 100%; 
    height: auto;
    display: block;
    
    /* Optional: Ein leichter Fade-Effekt nach links/oben, 
       damit es weich in den Hintergrund übergeht */
    mask-image: linear-gradient(to left, white 70%, transparent 100%),
                linear-gradient(to top, white 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, white 70%, transparent 100%),
                        linear-gradient(to top, white 70%, transparent 100%);
}

/* =======================================================================
   SPEZIES-BILD - BREAKPOINTS
   ======================================================================= */

/* STUFE 2: Laptop / Kleiner Desktop */
@media screen and (max-width: 1440px), screen and (max-height: 850px) {
    .species-image {
        width: 40vw; /* Etwas kleiner auf Laptops */
        opacity: 0.6; /* Leicht transparenter, damit es weniger ablenkt */
        z-index: -1 !important; 
    }
}

/* STUFE 3: Sehr schmale Fenster / Tablet (Unter 1000px Breite) */
@media screen and (max-width: 1000px) {
    /* Ausblenden, bevor es den MainContent (500px) berührt */
    .species-image {
        display: none !important;
    }
}

/* =======================================================================
   LINEAGE DETAILS BOX
   ======================================================================= */
.lineage-details {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% + 320px);
    width: 350px;
    background-color: rgba(58, 58, 65, 0.9);
    color: #e8d8b5;
    border: 2px solid #d4a017;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    z-index: 5;
    text-align: center;
    display: none;
    transition: all 0.3s ease;

    /* Scrollbalken entfernen, Box passt sich dem Inhalt an */
    max-height: none !important; 
    overflow: visible !important; 
}

/* =======================================================================
   LINEAGE-BILD (Analog zu species-image)
   ======================================================================= */
.lineage-image {
    position: fixed;
    bottom: 0;
    right: -100px;
    width: 40vw;
    max-width: 470px;
    opacity: 0.7;
    z-index: -1 !important; /* Hinter dem Content */
    pointer-events: none;
    transition: opacity 0.3s ease, width 0.3s ease;
}

.lineage-image img {
    width: 100%;
    height: auto;
    display: block;
    /* Dein bewährter Mask-Effekt */
    mask-image: linear-gradient(to left, white 70%, transparent 100%),
                linear-gradient(to top, white 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, white 70%, transparent 100%),
                        linear-gradient(to top, white 70%, transparent 100%);
}

/* --- BREAKPOINTS --- */

/* STUFE 2: Laptop / Kleiner Desktop (< 1440px ODER < 850px Höhe) */
@media screen and (max-width: 1440px), screen and (max-height: 850px) {
    .lineage-details {
        left: calc(50% + 290px);
        width: 260px;
    }

    /* 1. Bild komplett ausblenden (wie gewünscht) */
    .lineage-image { 
        display: none !important; 
    }

    /* 2. Nur die gewünschten Elemente behalten: */
    /* Wir blenden die Haupt-Beschreibung und das Traits-Label aus */
    .lineage-desc, 
    .lineage-traits-header { 
        display: none !important; 
    }

    /* Wir stellen sicher, dass Title, Sub-Beschreibung, Tabelle und Dropdown sichtbar sind */
    .lineage-details h3,
    .lineage-sub-desc,
    .lineage-table-container,
    .lineage-dropdown-container {
        display: block;
    }
}

@media screen and (max-width: 1000px) {
    .lineage-details {
        position: relative;
        top: 0; left: 81px; transform: none;
        width: 291px;
        margin: 20px 0;
        background: rgba(45, 45, 50, 0.6);
        box-shadow: none;
    }
    /* Bild und Details ausblenden */
    .lineage-image, .lineage-desc, .lineage-sub-desc, .lineage-table-container { 
        display: none !important; 
    }
}

/* Zentrierte Listen für Völker, Klassen, und Hintergründe */
#speciesList, #classList, #backgroundList {
    list-style-type: none; /* Beibehalten */
    padding: 0 30px; /* Erhöht, um die Liste in der 500px Box mittig zu "drücken" */
    text-align: center; /* Beibehalten */
    display: grid; /* Beibehalten */
    grid-template-columns: repeat(2, 1fr); /* Geändert von 3 auf 2 für 500px Breite */
    gap: 15px; /* Leicht erhöht für bessere Lesbarkeit */
    justify-content: center; /* Beibehalten */
    justify-items: center; /* NEU: Zentriert die Li-Elemente innerhalb der Grid-Zellen */
    max-width: 500px; /* Geändert auf die neue MainContent Breite */
    margin: 0 auto; /* Beibehalten */
    margin-top: 5%; /* Beibehalten */
    margin-bottom: 10%; /* Beibehalten */
}

/* Die einzelnen Listeneinträge */
#speciesList li, #classList li, #backgroundList li {
    text-align: left; /* Beibehalten */
    width: 100%; /* NEU: Nutzt den Platz der Grid-Zelle */
    max-width: 160px; /* Beibehalten/Leicht erhöht */
    display: flex; /* Beibehalten */
    align-items: center; /* Beibehalten */
}

#speciesList input[type="radio"] + label, #classList input[type="radio"] + label, #backgroundList input[type="radio"] + label {
    cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger bei Hover */
    font-weight: bold; /* Macht den Text fett */
}

/* =======================================================================
   RADIO-INPUTS Ausrichtung (Spezifisch)
   ======================================================================= */

#blacklabel, #bluelabel, #brasslabel, #bronzelabel, #copperlabel, #goldlabel, #greenlabel, #redlabel, #silverlabel, #whitelabel {
margin-bottom: 6px;
}

#cloudsjauntlabel, #firesburnlabel, #frostschilllabel, #hillstumblelabel, #stonesendurancelabel, #stormsthunderlabel {
margin-bottom: 6px;
}

#drowlabel, #highelflabel, #woodelflabel {
margin-bottom: 6px;
}

#forestgnomelabel, #rockgnomelabel {
margin-bottom: 6px;
}

#abyssallabel, #chthoniclabel, #infernallabel {
margin-bottom: 6px;
}

#standardArrayLabel, #randomGenerationLabel, #pointCostLabel {
    display: inline-flex;
    align-items: center; /* Zentriert den Text innerhalb des Labels vertikal */
    align-self: center;  /* Zentriert das gesamte Label innerhalb der Flex-Box */
    margin-bottom: 0;    /* Entfernt eventuelle Standard-Abstände, die die Mitte verschieben */
}

/* =======================================================================
   RADIO-INPUTS (Global)
   ======================================================================= */

/* Globales Design für alle Radio-Inputs */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none; /* Für Safari/Chrome */
    width: 20px; /* Feste Größe */
    height: 20px;
    border: 1px solid #7a431d; /* Kupferfarbener Rahmen */
    border-radius: 50%; /* Kreisförmig */
    background-color: #2e2e33; /* Dunkler Kern passend zum Feld */
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
    margin-right: 10px; /* Abstand zum Label */
    flex-shrink: 0; /* Verhindert Verformung in Flexboxen */
    outline: none;
    margin-bottom: 3px;
}

/* Hover-Effekt: Der Kupferrahmen wird etwas heller */
input[type="radio"]:hover {
    border-color: #d4a017; /* Gold bei Hover */
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.4);
}

/* Der Zustand wenn ausgewählt (Checked) */
input[type="radio"]:checked {
    border-color: #d4a017; /* Goldener Rahmen */
    background-color: #3e3e45; /* Leicht hellerer Kern */
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.6);
}

/* Die goldene Kugel (Punkt) im Inneren des ausgewählten Buttons */
input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d4a017; /* Goldene Kugel */
    box-shadow: 0 0 10px #fce181; /* Glühender Effekt */
}

/* Anpassung der Labels, die direkt nach dem Radio-Button kommen */
input[type="radio"] + label {
    cursor: pointer;
    font-weight: bold; /* Übernommen aus deinem li-Stil */
    color: #e8d8b5;
    transition: color 0.3s ease;
}

/* Das Label leuchtet ebenfalls leicht auf, wenn ausgewählt */
input[type="radio"]:checked + label {
    color: #fce181; 
    text-shadow: 0 0 5px rgba(212, 160, 23, 0.3);
}


/* =======================================================================
   CUSTOM SCROLLBAR (Global)
   ======================================================================= */

/* Für Chrome, Safari und Edge */
::-webkit-scrollbar {
    width: 10px;    /* Breite des vertikalen Balkens */
    height: 10px;   /* Höhe des horizontalen Balkens */
}

/* Der Hintergrund des Scrollbalkens (Track) */
::-webkit-scrollbar-track {
    background: rgba(30, 30, 35, 0.5); /* Dunkel und dezent */
    border-radius: 5px;
}

/* Der bewegliche Teil (Thumb) - Hier nutzen wir dein Braun/Gold */
::-webkit-scrollbar-thumb {
    background: #8b5e34; /* Dein "Holz"-Braun */
    border: 2px solid #3a3a41; /* Kleiner Kontrastrand */
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Wenn man mit der Maus darüber fährt (Hover) */
::-webkit-scrollbar-thumb:hover {
    background: #d4a017; /* Wechselt zu Gold bei Interaktion */
}

/* Speziell für Firefox (etwas eingeschränkter in den Optionen) */
* {
    scrollbar-width: thin;
    scrollbar-color: #8b5e34 rgba(30, 30, 35, 0.5);
}


/* =======================================================================
   INDIVIDUELLE PFEILE FÜR ZAHLEN-INPUTS (STEPPER) (Global)
   ======================================================================= */

/* 1. Den Standard-Look der Pfeile entfernen */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    
    /* 2. Unser eigenes Design als Hintergrund (Goldene Pfeile) */
    /* Wir nutzen ein SVG mit einem Pfeil nach oben und einem nach unten */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'><path d='M8 2l6 7H2z' fill='%23d4a017'/><path d='M8 18l6-7H2z' fill='%23d4a017'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    
    /* 3. Größe und Klickbereich */
    width: 20px;
    height: 30px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* 4. Leuchteffekt bei Hover */
input[type="number"]::-webkit-inner-spin-button:hover {
    opacity: 1;
    filter: drop-shadow(0 0 2px #fce181);
}

/* Korrektur für Firefox: 
   Firefox lässt das Styling der inneren Pfeile leider kaum zu. 
   Hier blenden wir sie meistens aus, damit das Design konsistent bleibt. */
input[type="number"] {
    -moz-appearance: textfield;
}

/* TABLET & MOBILE ANPASSUNG: Stepper ausblenden */

@media screen and (max-width: 1000px) {
    /* Ab Tablet-Größe werden die Pfeile entfernt */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        display: none !important; /* Entfernt die Pfeile komplett */
        -webkit-appearance: none !important;
    }

    /* Sicherstellen, dass auch Firefox auf Touch-Geräten keine Pfeile zeigt */
    input[type="number"] {
        -moz-appearance: textfield !important;
    }
}

/* Verstecke Stepper in schreibgeschützten oder deaktivierten Feldern */
input[type="number"][readonly]::-webkit-inner-spin-button,
input[type="number"][readonly]::-webkit-outer-spin-button,
input[type="number"]:disabled::-webkit-inner-spin-button,
input[type="number"]:disabled::-webkit-outer-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Firefox-Support für schreibgeschützte Felder */
input[type="number"][readonly],
input[type="number"]:disabled {
    -moz-appearance: textfield !important;
}

/* =======================================================================
   SCHRITT 1: KLASSEN-SYMBOL (Zentriert im MainContent)
   ======================================================================= */

#classSymbolContainer {
    position: relative;
    /* margin: oben/unten (6% wie gehabt) und 'auto' für perfekte horizontale Zentrierung */
    margin: 6% auto 3% auto; 
    
    /* Wir nutzen eine feste Breite statt vw, damit das Symbol im 500px-Fenster stabil bleibt */
    width: 200px; 
    height: auto;
    z-index: 1;
    
    /* Entfernt das riskante 'left', da 'margin: auto' die Zentrierung übernimmt */
    left: 0; 
    text-align: center;
    
    /* Flexbox sorgt dafür, dass das Bild im Container wirklich mittig sitzt */
    display: flex;
    justify-content: center;
    align-items: center;
}

#classSymbolImage {
    /* Das Bild nutzt nun 80% des 120px-Containers -> ca. 96px groß und stabil */
    width: 80%; 
    height: auto;
    transition: transform 0.2s ease;
}

/* Kleiner Bonus: Ein dezenter Hover-Effekt, da man das Symbol ja klicken kann */
#classSymbolImage:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* =======================================================================
   SCHRITT 1: KLASSEN-DETAILS-CONTAINER
   ======================================================================= */

#classDetailsContainer {
    padding: 20px;
    background-color: rgba(58, 58, 65, 0.6);
    border: 2px solid #d4a017;
    border-radius: 10px;
    color: #e8d8b5;
    text-align: left;
    overflow: auto;
    max-width: 60%;
    margin: 0 auto;
}

/* =======================================================================
   SCHRITT 1: KLASSEN-BILD BASIS (> 1440px)
   ======================================================================= */

#classImageContainer {
    position: fixed; /* Fixiert, damit es beim Scrollen des Main-Inhalts stehen bleibt */
    top: 50%;        /* Vertikale Mitte */
    transform: translateY(-50%); /* Zentriert das Bild exakt auf der Y-Achse */
    left: calc(50% + 320px);    /* Anker rechts neben dem MainContent (250px + 70px Puffer) */
    width: 35vw;     /* Proportionale Breite: 20% der Bildschirmbreite */
    max-width: 500px; /* Begrenzung nach oben, damit es auf Riesen-Monitoren nicht zu groß wird */
    z-index: 1;      /* Hinter den Dropdowns, aber vor dem Hintergrund */
    pointer-events: none; /* Man kann durch das Bild hindurchklicken */
    transition: all 0.3s ease;
}

#classImage {
    width: 100%;     /* Nutzt die volle Breite des Containers */
    height: auto;    /* Seitenverhältnis bleibt erhalten */

    /* DEINE ORIGINAL-MASKE (UNVERÄNDERT ÜBERNOMMEN) */
    --fade-border-thickness: 12%;
    -webkit-mask-composite: intersect;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, white var(--fade-border-thickness)),
      linear-gradient(to top,    transparent 0%, white var(--fade-border-thickness)),
      linear-gradient(to right,  transparent 0%, white var(--fade-border-thickness)),
      linear-gradient(to left,   transparent 0%, white var(--fade-border-thickness));
    mask-composite: intersect;
    mask-image:
      linear-gradient(to bottom, transparent 0%, white var(--fade-border-thickness)),
      linear-gradient(to top,    transparent 0%, white var(--fade-border-thickness)),
      linear-gradient(to right,  transparent 0%, white var(--fade-border-thickness)),
      linear-gradient(to left,   transparent 0%, white var(--fade-border-thickness));
}

/* =======================================================================
   BREAKPOINTS - KLASSEN-BILD
   ======================================================================= */

/* STUFE 2: Laptop / Kleiner Desktop */
@media screen and (max-width: 1440px), screen and (max-height: 850px) {
    /* Die StepBar-Änderungen von vorhin bleiben hier aktiv */
    
    #classImageContainer {
        width: 25vw; /* Bild wird auf Laptops etwas kleiner */
        left: calc(50% + 300px); /* Rückt etwas näher an den Content */
    }
}

/* STUFE 3: Sehr schmale Fenster / Tablet (Unter 1000px Breite) */
@media screen and (max-width: 1000px) {
    /* Bild ausblenden, wenn kein Platz mehr zwischen MainContent und rechtem Rand ist */
    #classImageContainer {
        display: none !important;
    }
}


/* =======================================================================
--- Stile für Schritt 4: Attribut-Verteilung ---
======================================================================= */

#attributeMethodSelection {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 5px;
}

#attributeMethodSelection label {
    cursor: pointer;
    margin-right: 5%;
}

#valuePoolContainer {
    min-height: 60px;
    margin: 20px auto;
    padding: 10px;
    border: 2px dashed #8b5e34;
    border-radius: 10px;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.value-pool {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.draggable-value {
    padding: 10px 15px;
    background-color: #8b5e34;
    color: #e8d8b5;
    border-radius: 5px;
    cursor: grab;
    font-weight: bold;
    font-size: 18px;
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none; /* Verhindert Textauswahl beim Ziehen */
}

.draggable-value:active {
    cursor: grabbing;
    transform: scale(1.1);
    box-shadow: 0 0 15px #d4a017;
}

#pointBuyTracker {
    font-size: 1.2em;
    font-weight: bold;
}

#rollAttributesBtn {
    background: linear-gradient(145deg, #a36a42, #8b5e34); /* Kupfer-Farbverlauf */
    color: #e8d8b5;
    font-weight: bold;
    font-family: 'Garamond', serif;
    font-size: 16px;
    border: 1px solid #d4a017; /* Goldener Rahmen */
    border-radius: 8px;
    padding: 12px 20px; /* Etwas größer für mehr Präsenz */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 220, 150, 0.2); /* 3D-Schatten */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Leichter Textschatten für Lesbarkeit */
    transition: all 0.2s ease-in-out; /* Weiche Übergänge für alle Effekte */
}

/*
  Leucht-Effekt, wenn man mit der Maus darüberfährt
*/
#rollAttributesBtn:hover {
    background: linear-gradient(145deg, #b97a51, #9c6f3c); /* Hellerer Farbverlauf */
    border-color: #fce181; /* Hellerer, leuchtender Rahmen */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 220, 150, 0.3); /* Stärkerer Schatten */
    transform: translateY(-2px); /* Hebt den Button leicht an */
}

/*
  Feedback beim Klicken
*/
#rollAttributesBtn:active {
    transform: translateY(1px); /* Drückt den Button nach unten */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

#attributeScoresContainer {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Etwas weniger Abstand zwischen den Reihen */
}

.attribute-row {
    display: flex;
    flex-direction: column; /* Label und interactive-elements untereinander */
    align-items: center;    /* Alles schön mittig */
    padding-top: 10px;    /* Abstand über dem Label ("Stärke") */
    padding-bottom: 10px; /* Abstand unter den Inputs/Kreis */
    border-top: 1px solid #4a4a4f;
}

.attribute-label {
    margin-bottom: 8px;
    font-size: 1.0em;
    font-weight: bold;
    text-transform: uppercase;
    color: #e8d8b5;
    text-align: center;
}

.interactive-elements {
    display: flex;
    align-items: baseline;     /* Löst Problem 1: Perfekte vertikale Ausrichtung */
    justify-content: center; /* Zentriert die Elemente innerhalb des Wrappers */
    gap: 15px;               /* Einheitlicher Abstand zwischen den Elementen */
    width: 320px;            /* Löst Problem 2 & 3: Feste, konsistente Breite für alle Reihen */
}

.modifier-container, .score-container {
    display: contents;
}

.modifier-circle {
    width: 50px;
    height: 50px;
    border: 3px solid #d4a017;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #e8d8b5;
    background-color: #2e2e33;
    flex-shrink: 0; /* Verhindert, dass der Kreis gestaucht wird */
}

.attribute-score-input, .attribute-bonus-input, .attribute-score-total-input {
    width: 60px;
    height: 50px; /* Gleiche Höhe wie der Kreis für perfekte Ausrichtung */
    padding: 8px;
    font-size: 20px;
    border-radius: 5px;
    border: 1px solid #8b5e34;
    background-color: #2e2e33;
    color: #e8d8b5;
    font-family: 'Garamond', serif;
    text-align: center;
    box-sizing: border-box; /* Wichtig, damit padding die Höhe nicht beeinflusst */
}

.attribute-row .attribute-score-input,
.attribute-row .attribute-bonus-input,
.attribute-row .attribute-score-total-input {
    margin: 3px;
}

/* Der Wrapper für den Bonus-Input */
.attribute-bonus-input-wrapper {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

/* Styling für das Plus-Zeichen */
.attribute-bonus-input-wrapper span {
    font-size: 1.2em;
    color: #e8d8b5;
}

.attribute-component {
    display: flex;
    flex-direction: column; /* Stellt das Element (z.B. Kreis) über sein Label */
    align-items: center;   /* Zentriert Element und Label horizontal */
    gap: 8px;              /* Steuert den Abstand zwischen Element und seinem Label */
    width: 90px;           /* Gibt jedem Block eine feste Breite für ein sauberes Raster */
    text-align: center;
}

/* Optional: Styling für die kleinen Labels unter den Elementen */
.attribute-component label {
    font-size: 0.8em;
    color: #e8d8b5; /* Etwas dezentere Farbe */
}

/* Visuelles Feedback für Drop-Zonen */
.drop-target-hover {
    background-color: #4a4a4f !important;
    transform: scale(1.05);
}

/* Definiert die Animation für das Pulsieren des Schattens */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px rgba(212, 160, 23, 0.6);
        border-color: #d4a017;
    }
    50% {
        box-shadow: 0 0 14px rgba(212, 160, 23, 0.9);
        border-color: #fce181;
    }
    100% {
        box-shadow: 0 0 5px rgba(212, 160, 23, 0.6);
        border-color: #d4a017;
    }
}

/* Die Klasse, die wir einem Element geben, um den Effekt zu aktivieren */
.highlight-target {
    /* Wir heben den Rahmen etwas stärker hervor */
    border: 2px solid #d4a017;
    
    /* Wir wenden die unendlich laufende Animation an */
    animation: pulse-glow 2.5s infinite ease-in-out;
}

/* =======================================================================
   ATTRIBUTE-LIVE-CONTAINER
   ======================================================================= */

#liveAttributesContainer {
    position: fixed;
    top: 20px; /* Hochgerückt an die Stelle der alten Progress-Box */
    right: 20px;
    width: 260px; 
    padding: 15px;
    background-color: rgba(58, 58, 65, 0.8);
    border: 2px solid #7a431d;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
    z-index: 9;
    transition: width 0.4s ease-in-out;
}

#liveAttributesContainer.expanded {
    width: 600px; 
}

/* Hauptüberschrift */
.live-attributes-main-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e8d8b5; 
}
.live-attributes-main-header h3 {
    margin: 0;
    font-size: 24px;
    color: #e8d8b5;
}

/* Der Aufklapp-Pfeil */
#toggleLiveAttributes {
    position: absolute;
    left: 0;
    cursor: pointer;
    font-size: 24px;
    color: #d4a017;
    transition: transform 0.4s ease-in-out;
    user-select: none;
}
#liveAttributesContainer.expanded #toggleLiveAttributes {
    transform: rotate(180deg);
}

/* JEDE ZEILE (Kopfzeile und Datenzeilen) ist eine Flexbox */
.live-attr-header-row,
.live-attr-data-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px; 
    margin-bottom: 8px;
}

/* Neuer Divider zwischen Kopfzeile und Daten */
.live-attr-header-row {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid #e8d8b5;
}

/* Spaltenbreiten für die KOPFZEILE */
.live-attr-header-row span {
    font-weight: bold;
    font-size: 0.9em;
    color: #d4a017;
    text-align: center;
    flex-shrink: 0; /* KORREKTUR: Verhindert Schrumpfen */
}
.live-attr-header-row .col-attr { flex-basis: 65px; text-align: left; }
.live-attr-header-row .col-mod   { flex-basis: 80px; }
.live-attr-header-row .col-total { flex-basis: 45px; margin-left: 8px; }
.live-attr-header-row .col-base  { flex-basis: 45px; }
.live-attr-header-row .col-feat  { flex-basis: 45px; }
.live-attr-header-row .col-bg    { flex-basis: 80px; }
.live-attr-header-row .col-class { flex-basis: 45px; }
.live-attr-header-row .col-symbol{ flex-basis: 20px; }


/* Spaltenbreiten für die DATENZEILEN */
.live-attr-data-row > * {
    text-align: center;
    flex-shrink: 0; /* KORREKTUR: Verhindert Schrumpfen */
}
.live-attr-data-row .col-attr { flex-basis: 85px; text-align: left; font-weight: bold; }
.live-attr-data-row .col-mod   { flex-basis: 30px; }
.live-attr-data-row .col-total { flex-basis: 45px; margin-left: 35px; }
.live-attr-data-row .col-base  { flex-basis: 45px; }
.live-attr-data-row .col-feat  { flex-basis: 45px; }
.live-attr-data-row .col-bg    { flex-basis: 45px; }
.live-attr-data-row .col-class { flex-basis: 45px; }
.live-attr-data-row .col-symbol{ flex-basis: 20px; color: #d4a017; font-weight: bold; }

/* Styling der einzelnen Elemente */
#liveAttributesContainer input {
    width: 45px;
    height: 30px;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid #8b5e34;
    background-color: #2e2e33;
    color: #e8d8b5;
    border-radius: 4px;
    margin: 0;
    text-align: center;
}
#liveAttributesContainer .modifier-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #d4a017;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    font-weight: bold;
}

/* Die Logik zum Ein- und Ausklappen der Berechnungs-Teile */
.col-calc-part {
    flex-basis: 0;
    flex-grow: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}
#liveAttributesContainer.expanded .col-calc-part {
    opacity: 1;
}
#liveAttributesContainer.expanded .col-base  { flex-basis: 45px; }
#liveAttributesContainer.expanded .col-feat  { flex-basis: 45px; }
#liveAttributesContainer.expanded .col-bg    { flex-basis: 80px; }
#liveAttributesContainer.expanded .col-class { flex-basis: 45px; }
#liveAttributesContainer.expanded .col-symbol{ flex-basis: 20px; }

/* =======================================================================
   VISIBILITY LOGIC: ATTRIBUTE-LIVE-CONTAINER
   ======================================================================= */

/* REGEL 1: Auf dem Desktop (> 1440px) in Schritt 1 immer ausblenden */
@media screen and (min-width: 1441px) {
    body.active-step-1 #liveAttributesContainer {
        display: none !important;
    }
}

/* REGEL 2: Stufe 2 - Laptop (Breite < 1440px ODER Höhe < 850px) */
@media screen and (max-width: 1440px), screen and (max-height: 850px) {
    /* Grundsätzlich verstecken... */
    #liveAttributesContainer {
        display: none !important;
    }

    /* ...außer in Schritt 12 (Zusammenfassung) */
    body.active-step-12 #liveAttributesContainer {
        display: block !important;
        /* Optional: Hier kannst du die Position für Laptops anpassen, 
           da dort das Spezies-Bild ja weg ist */
        right: 20px; 
    }
}

/* REGEL 3: Stufe 3 - Tablet / Schmal (< 1000px) */
@media screen and (max-width: 1000px) {
    /* Hier gibt es keine Ausnahme: Container IMMER weg */
    #liveAttributesContainer {
        display: none !important;
    }
    body.active-step-12 #liveAttributesContainer {
        display: none !important;
        /* Optional: Hier kannst du die Position für Laptops anpassen, 
           da dort das Spezies-Bild ja weg ist */; 
    }
}

/* =======================================================================
   EINGABEFELDER (GLOBAL)
   ======================================================================= */

input[type="text"], input[type="number"] {
    width: 60px; /* Setzt die Breite der Eingabefelder */
    padding: 8px; /* Fügt Innenabstände hinzu */
    font-size: 20px; /* Setzt die Schriftgröße des Eingabefeldes */
    margin-top: 5px; /* Fügt oberen Abstand hinzu */
    border-radius: 5px; /* Macht die Ecken der Eingabefelder abgerundet */
    border: 1px solid #8b5e34; /* Fügt einen kupferfarbenen Rahmen hinzu */
    background-color: #2e2e33; /* Setzt die Hintergrundfarbe der Eingabefelder */
    color: #e8d8b5; /* Setzt die Textfarbe der Eingabefelder */
    font-family: 'Garamond', serif; /* Setzt die Schriftart der Eingabefelder */
    text-align: center; /* Zentriert den Text innerhalb der Eingabefelder */
    box-sizing: border-box; /* Inklusive Padding und Border in der Breite */
    margin-bottom: 5vh; /* Fügt unteren Abstand hinzu */
}

/* Schritt 5: Stufen-Input (vergrößert), horizontal zentriert */
#step5 .level-input-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 5vh;
}

/* Anker hält das Input fest in der Mitte; Stepper wird absolut rechts daneben gelegt */
#step5 .level-input-anchor {
    position: relative;
    display: inline-block;
}

#step5 #level {
    width: 80px;
    height: 60px;
    font-size: 30px;
    margin-bottom: 0;
    display: block;
}

/* =======================================================================
   Buttons
   ======================================================================= */

button[type="button"] {
    background-color: #8b5e34; /* Setzt die Hintergrundfarbe des Buttons */
    color: #e8d8b5; /* Setzt die Textfarbe des Buttons */
    border: none; /* Entfernt den Standardrahmen des Buttons */
    border-radius: 8px; /* Macht die Ecken des Buttons abgerundet */
    padding: 10px 15px; /* Fügt Innenabstände hinzu */
    font-weight: bold; /* Macht den Text fett */
    cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger bei Hover */
    transition: background 0.3s; /* Fügt eine Übergangsanimation hinzu */
}

button[type="button"]:hover {
    background-color: #a36a42; /* Ändert die Hintergrundfarbe bei Hover */
}

/* Fixierte Buttons */
.fixed-button {
    position: fixed;
    background-color: #8b5e34;
    color: #e8d8b5;
    border: none;
    border-radius: 8px;
    
    /* WICHTIG: Padding muss auf 0, damit Flexbox den Platz zum Zentrieren hat */
    padding: 0 !important; 
    
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    
    /* Deine Maße */
    height: 42px;
    width: 42px;

    /* Perfekte Zentrierung */
    display: flex;
    align-items: center;    /* Vertikal */
    justify-content: center; /* Horizontal */
    
    z-index: 20 !important;

    top: 30px; 
    bottom: auto !important;
}

/* Spezifische Größe für die Icons in den Buttons */
.nav-icon {
    width: 32px;  /* Ideale Größe für Icons */
    height: 32px;
    object-fit: contain; /* Verhindert Verzerrung */
    pointer-events: none; /* Klicks gehen durch auf den Button */
}

/* Optional: Ein leichter Leuchteffekt bei Hover */
.fixed-button:hover .nav-icon {
    filter: drop-shadow(0 0 5px #fce181);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* BASIS: Desktop (> 1440px) */
/* Wir platzieren die Buttons 320px von der Mitte entfernt (250px Content + 70px Puffer) */

/* Linker Button (Back / Level-Up-Abbruch — identische Position) */
#back,
#levelUpAbort {
    /* 50% (Mitte) - 250px (halber Content) + 15px (Einzug nach innen) */
    left: calc(50% - 235px);
    right: auto;
}

#levelUpAbort {
    display: none;
}

/* Rechte Buttons (Save / Continue / Finish) */
#saveClass, #saveBackground, #saveSpecies, #saveAttributes, #saveLevel, 
#saveClassForm, #saveSpells, #saveEquipment, #saveStory, #saveAlignment, 
#saveAppearance, #finish {
    /* 50% (Mitte) + 250px (halber Content) - 15px (Einzug nach innen) - 45px (Buttonbreite) */
    left: auto;
    right: calc(50% - 235px);
}

/* -----------------------------------------------------------------------
   BREAKPOINT STUFE 3: Tablet / Schmale Fenster (< 1000px)
   ----------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
    /* Wenn die stepBar schmal wird, rücken wir die Buttons 
       vielleicht etwas weiter nach außen oder behalten die Logik bei. 
       Da der Content bei dir aber bei 500px bleibt, funktioniert 
       die calc(50%) Logik hier weiterhin hervorragend! */
    
    .fixed-button {
        top: 30px; /* Eventuell etwas höher auf kleinen Schirmen */
    }
}

/* =======================================================================
   DROPDOWNS (Global)
   ======================================================================= */

/* Stil für Dropdowns und Radio-Inputs */
.dropdown {
    width: 80%; /* Setzt die Breite der Dropdowns */
    max-width: 80%; /* Begrenzung der maximalen Breite der Dropdowns */
    padding: 5px; /* Fügt Innenabstände hinzu */
    font-size: 16px; /* Setzt die Schriftgröße der Dropdowns */
    border-radius: 5px; /* Macht die Ecken der Dropdowns abgerundet */
    border: 1px solid #8b5e34; /* Fügt einen kupferfarbenen Rahmen hinzu */
    background-color: #2e2e33; /* Setzt die Hintergrundfarbe der Dropdowns */
    color: #e8d8b5; /* Setzt die Textfarbe der Dropdowns */
    box-sizing: border-box; /* Inklusive Padding und Border in der Breite */
    margin-bottom: 10px; /* Fügt unteren Abstand hinzu */
}

.dropdownLabel {
    font-weight: bold;
    margin-right: 0.25em;
}

.radio-container {
    display: flex; /* Nutzt flexbox für die Anordnung der Radio-Inputs */
    flex-direction: row; /* Richtet die Radio-Inputs horizontal aus */
    align-items: center; /* Zentriert die Radio-Inputs vertikal */
    gap: 10px; /* Fügt Abstand zwischen den Radio-Inputs hinzu */
}

.radio-container label {
    margin-right: 10px; /* Fügt rechten Abstand zu den Labels hinzu */
}

/* Zusätzlicher Stil für die Info-Container */
.info-container {
    margin-top: 20px; /* Fügt oberen Abstand zum Container hinzu */
    padding: 15px; /* Fügt Innenabstände hinzu */
    background-color: rgba(58, 58, 65, 0.6); /* Setzt die Hintergrundfarbe */
    border: 2px solid #d4a017; /* Fügt einen goldfarbenen Rahmen hinzu */
    border-radius: 10px; /* Macht die Ecken abgerundet */
    color: #e8d8b5; /* Setzt die Textfarbe */
    text-align: left; /* Richtet den Text links aus */
    overflow: auto; /* Ermöglicht Scrollen bei langem Text */
    max-width: 300px; /* Begrenzung der maximalen Breite */
    margin: 0 auto; /* Zentriert den Container innerhalb des Elternblocks */
}

/* GENERELLES STYLING FÜR GESPERRTE DROPDOWNS (EMOJI-LOOK) */

select:disabled {
    /* 1. Standard-Pfeil entfernen */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* 2. Das echte Emoji 🔒 als Hintergrund-Bild (SVG-Text-Trick) */
    /* Wir nutzen hier das exakte Symbol aus deiner JS-Logik */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><text x='0' y='16' font-size='16'>🔒</text></svg>") !important;
    
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px !important; /* Größe des Emojis am Rand */

    /* 3. Zeiger und Farben */
    cursor: not-allowed !important;
    opacity: 1 !important; /* Volle Sichtbarkeit, da das Schloss die Sperre erklärt */
    color: #e8d8b5 !important;
    background-color: rgba(45, 45, 50, 0.8) !important; /* Etwas dunkler als aktive Felder */
    border-color: #7a431d !important;
    padding-right: 35px !important; /* Platz für das Schloss-Emoji */
}

/* Optional: Damit das Schloss am Handy nicht hinter dem System-Pfeil verschwindet */
@media screen and (max-width: 1000px) {
    select:disabled {
        background-position: right 8px center !important;
    }
}

/* =======================================================================
   INFOBOX STYLING (Schritt 3 & 5)
   ======================================================================= */

/* Stil für das Fragezeichen-Symbol */
.info-icon {
    cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger bei Hover */
    color: #d4a017; /* Setzt die Farbe des Icons */
    margin-left: 5px; /* Fügt linken Abstand zum Icon hinzu */
    font-weight: bold; /* Macht den Text fett */
}

/* Stil für die Infobox */
.info-box {
    display: none; /* Wird via JS eingeblendet */
    position: fixed; /* Befreit die Box aus dem MainContent-Container */
    
    /* Positionierung links neben dem MainContent */
    /* Rechnung: Mitte (50%) - halber Content (250px) - Puffer/Breite der Box */
    top: 50%;
    left: calc(50% - 300px); 
    transform: translate(-100%, -50%); /* Schiebt die Box komplett links vom Ankerpunkt */
    
    background-color: rgba(58, 58, 65, 0.9); /* Setzt die Hintergrundfarbe */
    color: #e8d8b5;
    padding: 25px;
    border: 2px solid #d4a017;
    border-radius: 10px;
    width: 350px; /* Feste Breite für Stabilität */
    max-width: 90vw;
    max-height: 80vh; /* Verhindert, dass die Box oben/unten rausragt */
    overflow-y: auto; /* Scrollbar innerhalb der Box, falls Text zu lang */
    
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
    z-index: 100; /* Weit über dem MainContent (5) und dem Spezies-Bild */
    text-align: left;
}

/* =======================================================================
   BREAKPOINTS FÜR DIE INFOBOX
   ======================================================================= */

/* STUFE 2: Laptop / Kleiner Monitor 
   (Breite < 1440px ODER Höhe < 850px) 
   Hier rückt die Box näher an den Content, bleibt aber noch links. */
@media screen and (max-width: 1440px), screen and (max-height: 850px) {
    .info-box {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 350px;
        max-width: 85vw;
        background-color: rgba(58, 58, 65, 0.95);
        box-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
    }
}

/* STUFE 3: Zentrales Overlay 
   (Unter 1000px Breite - Tablet/Mobil) 
   Hier springt die Box in die Mitte. */
@media screen and (max-width: 1000px) {
    .info-box {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 300px;
        max-width: 85vw;
        background-color: rgba(58, 58, 65, 0.95);
        box-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
    }
}

/* =======================================================================
   INFO-BACKDROP (Dunkelschleier)
   ======================================================================= */
.info-backdrop {
    display: none; /* Standardmäßig aus, aber JS darf es einschalten */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Kräftiges Dunkel für Mobile */
    z-index: 90 !important; 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* DER RIEGEL: Blockiert den Schleier exakt für Breakpoint 1 (Großer Monitor) */
@media screen and (min-width: 1441px) and (min-height: 851px) {
    .info-backdrop {
        display: none !important; 
    }
}

/* Die Buttons verschwinden NUR, wenn der Body diese Klasse hat */
body.modal-open .fixed-button {
    display: none !important;
}

.info-box h3 {
    text-align: center; /* Zentriert die Überschrift */
    margin-bottom: 30px; /* Fügt unteren Abstand zur Überschrift hinzu */
    margin-top: 0px;
}

.info-box p {
    margin: 0 0 12px 0;
    display: grid;
    /* Spalten für Label und Wert innerhalb der Box */
    grid-template-columns: 120px auto; 
    gap: 15px;
    align-items: baseline;
    font-size: 0.95em;
}

.info-box p:last-child {
    margin-bottom: 0; /* Entfernt den unteren Abstand beim letzten Paragraphen */
}

.info-box strong {
    display: block; /* Macht das starke Element als Blockelement */
}

.info-box span {
    display: block; /* Macht das span Element als Blockelement */
    margin-left: 30px; /* Fügt linken Abstand zum span hinzu */
}

.close-icon {
    position: absolute; /* Positioniert das Schließen-Symbol absolut */
    top: 10px; /* Positioniert es 10px vom oberen Bildschirmrand */
    right: 10px; /* Positioniert es 10px vom rechten Bildschirmrand */
    cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger bei Hover */
    color: #d4a017; /* Setzt die Farbe des Symbols */
    font-size: 20px; /* Setzt die Schriftgröße des Symbols */
    font-weight: bold; /* Macht den Text fett */
}

/* =======================================================================
   CLASS-SECTION
   ======================================================================= */

/* Stil für die einzelnen Abschnitte innerhalb von Schritt 5 & 8 */
.class-section {
    margin-bottom: 3%; /* Fügt unteren Abstand hinzu */
    padding: 15px; /* Fügt Innenabstände hinzu */
    background-color: rgba(58, 58, 65, 0.85); /* Setzt die Hintergrundfarbe */
    border: 2px solid #d4a017; /* Fügt einen goldfarbenen Rahmen hinzu */
    border-radius: 10px; /* Macht die Ecken abgerundet */
    color: #e8d8b5; /* Setzt die Textfarbe */
    text-align: left; /* Richtet den Text links aus */
    overflow: auto; /* Ermöglicht Scrollen bei langem Text */
    max-width: 80%; /* Begrenzung der maximalen Breite */
    margin: 0 auto 3%; /* Zentriert den Container innerhalb des Elternblocks und fügt unteren Abstand hinzu */
}

.class-section h3 {
    text-align: center; /* Zentriert die Überschrift */
}

/* Stil für die Dropdown-Listen und Labels in Schritt 5 */
.class-section label {
    display: block; /* Macht das Label als Blockelement */
    text-align: left; /* Richtet den Text links aus */
    margin-bottom: 5px; /* Fügt unteren Abstand hinzu */
}

/* Spezielle Korrektur für Labels direkt neben Radio-Buttons in der class-section */
.class-section input[type="radio"] + label {
    display: inline-flex;
    align-items: center;    /* Zentriert Text vertikal zum Radio-Kreis */
    align-self: center;     /* Sorgt für Ausrichtung in Flex-Containern */
    margin-bottom: 0;       /* Entfernt den Abstand, der das Label nach oben drückt */
    cursor: pointer;
}

.class-section select {
    width: 100%; /* Setzt die Breite der Dropdown-Listen */
    margin-bottom: 10px; /* Fügt unteren Abstand hinzu */
    padding: 5px; /* Fügt Innenabstände hinzu */
    font-size: 16px; /* Setzt die Schriftgröße der Dropdown-Listen */
    border-radius: 5px; /* Macht die Ecken der Dropdown-Listen abgerundet */
    border: 1px solid #8b5e34; /* Fügt einen kupferfarbenen Rahmen hinzu */
    background-color: #2e2e33; /* Setzt die Hintergrundfarbe der Dropdown-Listen */
    color: #e8d8b5; /* Setzt die Textfarbe der Dropdown-Listen */
}

/* Stil für die Subclass-Optionen */
#subclassOptions {
    text-align: left; /* Richtet den Text links aus */
}

#subclassOptions label {
    display: block; /* Macht das Label als Blockelement */
    margin-bottom: 5px; /* Fügt unteren Abstand hinzu */
}

.improvement-option label {
    display: block; /* Macht das Label als Blockelement */
    margin-bottom: 5px; /* Fügt unteren Abstand hinzu */
    cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger bei Hover */
}

.improvement-option input[type="radio"] {
    margin-right: 5px; /* Fügt rechten Abstand zu den Radio-Inputs hinzu */
}

.improvement-option h4 {
    margin-top: 20px; /* Fügt oberen Abstand hinzu */
    margin-bottom: 15px; /* Fügt unteren Abstand hinzu */
    font-size: 16px; /* Setzt die Schriftgröße der Überschrift */
    color: #e8d8b5; /* Setzt die Textfarbe der Überschrift */
    font-weight: bold; /* Macht den Text fett */
}

/* =======================================================================
   DYNAMIC RIGHT COLUMN (Subclass & Attributes)
   ======================================================================= */

.subclass-details {
    border: 2px solid #d4a017;
    padding: 15px;
    background-color: rgba(58, 58, 65, 0.9);
    color: #e8d8b5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 295px;
    box-sizing: border-box;
    z-index: 8;
    text-align: left;
    display: none;
}

/* --- FIX: In Schritt 6 bleiben die Attribute IMMER unten (Desktop) --- */
@media screen and (min-width: 1441px) and (min-height: 851px) {
    body.active-step-6 #liveAttributesContainer {
        top: auto !important;
        bottom: 20px !important;
        right: 20px !important;
        position: fixed !important;
        display: block !important;
    }
}

/* 1. DER HAUPTCONTAINER */
.subclass-image-vertical {
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc(50% + 320px); 
    width: 250px;
    pointer-events: none;
    z-index: -1;
}

/* 2. DAS BILD - Jetzt mit vh-Einheiten für Proportionalität */
.subclass-image-vertical img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Wir nutzen vh statt px, damit das Bild mit dem Fenster schrumpft */
    width: 25vh; 
    height: 25vh;
    max-width: 220px; /* Begrenzung für riesige Monitore */
    max-height: 220px;
    
    object-fit: cover;
    border-radius: 50%;
    display: block;
    z-index: 2;
}

/* 3. DIE GOLDENEN LINIEN */
.subclass-image-vertical::before,
.subclass-image-vertical::after {
    content: "";
    display: block;
    width: 245px; 
    border-left: 2px solid #d4a017;
    border-right: 2px solid #d4a017;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

/* OBERE LINIEN */
.subclass-image-vertical::before {
    top: 0;
    /* 50% ist die Mitte. Wir ziehen die halbe Bildhöhe (12.5vh) 
       und einen proportionalen Abstand (2vh) ab */
    height: calc(78% - 12.5vh - 2vh);
    
    border-bottom: 2px solid #d4a017;
    border-bottom-left-radius: 122.5px; /* Hälfte von 245px */
    border-bottom-right-radius: 122.5px;
}

/* UNTERE LINIEN */
.subclass-image-vertical::after {
    bottom: 0;
    /* Gleiche proportionale Rechnung */
    height: calc(78% - 12.5vh - 2vh);
    
    border-top: 2px solid #d4a017;
    border-top-left-radius: 122.5px;
    border-top-right-radius: 122.5px;
}

/* --- DEINE BREAKPOINTS --- */

@media screen and (max-width: 1440px), screen and (max-height: 850px) {
    #subclassDetailBox, #liveAttributesContainer {
        display: none !important;
    }
    .subclass-image-vertical {
        /* Zentrierung im freien Bereich rechts */
        left: auto;
        right: 50px;
    }
}

@media screen and (max-width: 1000px) {
    .subclass-image-vertical {
        display: none !important;
    }
}

.subclass-details p {
    margin-bottom: 20px; /* Fügt unteren Abstand hinzu */
}

.subclass-details h4 {
    margin-top: 30px; /* Fügt oberen Abstand hinzu */
    font-size: 16px; /* Setzt die Schriftgröße der Überschrift */
    color: #e8d8b5; /* Setzt die Textfarbe der Überschrift */
    text-align: left; /* Richtet die Überschrift links aus */
}

.subclass-details ul {
    text-align: left; /* Richtet die Liste links aus */
    margin: 10px 0; /* Fügt vertikale Abstände hinzu */
    padding-left: 20px; /* Fügt linken Innenabstand hinzu */
}

/* Zusätzliche Stile für mehr Abstand */
#dynamicSubclassContent {
    border: none; /* Entfernt den Rahmen */
    padding: 0; /* Entfernt das Padding */
    background-color: transparent; /* Setzt den Hintergrund transparent */
    margin-top: 20px; /* Fügt oberen Abstand hinzu */
}

#subclassOptions {
    text-align: left; /* Richtet den Text links aus */
    margin-bottom: 20px; /* Fügt unteren Abstand hinzu */
}

.feat-content p{
    margin-block-start: 0px;
    margin-block-end: 10px;
}

.feature-description {
    margin: 0;
    margin-bottom: 15px; /* Fügt unteren Abstand hinzu */
}


.feat-content {
    margin-left: 35px; /* Fügt linken Abstand hinzu */
}

.feat-content label {
    display: block; /* Macht das Label als Blockelement */
    margin-bottom: 5px; /* Fügt unteren Abstand hinzu */
}

.feat-content .dropdown {
    width: 100%; /* Setzt die Breite der Dropdowns */
    max-width: 300px; /* Begrenzung der maximalen Breite der Dropdowns */
    box-sizing: border-box; /* Inklusive Padding und Border in der Breite */
}

.dropdown-container {
    margin-top: 10px; /* Fügt oberen Abstand hinzu */
    width: 100%; /* Setzt die Breite des Containers */
}

.radio-containerMonk {
    display: flex; /* Nutzt flexbox für die Anordnung der Radio-Inputs */
    justify-content: center; /* Zentriert die Radio-Inputs horizontal */
    gap: 30px; /* Fügt Abstand zwischen den Radio-Inputs hinzu */
}

.radio-item {
    display: flex; /* Nutzt flexbox für die Anordnung der Radio-Items */
    gap: 5px; /* Fügt Abstand zwischen dem Radio-Button und dem Label hinzu */
}

.cc-attr-dist-block {
    margin-top: 4px;
    margin-bottom: 12px;
}

/* Nur Custom-Class Attribut→Verteilung in der Dynamic-Section */
.cc-attr-dist-container .asi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 22px;
    gap: 16px;
}

.cc-attr-dist-container .asi-header > strong {
    flex: 1 1 auto;
    text-align: left;
}

.cc-attr-dist-container .asi-header .points-tracker {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

/* Der Haupt-Wrapper für die ASI-Auswahl */
.asi-container {
    padding-top: 0px;
    margin-top: 0px;
}

/* Die Kopfzeile mit "Punkte verteilen" und der Punkte-Anzeige */
.asi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.9em;
}

/* Jede einzelne Attribut-Zeile */
.asi-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 20px; /* Etwas seitlicher Einzug für die Optik */
}

.asi-row label {
    text-align: left;
    font-weight: normal;
}

/* Das Input-Feld für die Punkte */
input.asi-point-input {
    width: 45px;
    height: 30px;
    font-size: 14px;
    margin: 0; /* WICHTIG: Überschreibt den generischen 5vh-Abstand */
    box-sizing: border-box;
    border: 1px solid #8b5e34;
    border-radius: 4px;
    background-color: #2e2e33;
    color: #e8d8b5;
    text-align: center;
    padding: 2px 4px;
}

input.asi-point-input:disabled {
    border: 1px solid #8b5e34;
    opacity: 1;
    color: #e8d8b5;
    background-color: rgba(45, 45, 50, 0.85);
    cursor: not-allowed;
}

.feat-content .granted-proficiency-header {
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 2px;
}

.feat-content .granted-proficiency-list {
    list-style-type: none;
    padding-left: 10px;
    margin: 0px;
    margin-bottom: 10px;
}

/* --- STILE FÜR SCHRITT 7 --- */

#step7DescContainer {
    margin: 1em 0;
}

#spellList {
    text-align: left;
}

.spell-section-container {
    border: 2px solid #d4a017; /* Goldener Rahmen */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: rgba(58, 58, 65, 0.6);
}

.spell-section-container h3,
#master-spell-list h4,
.spell-sub-header h4 {
    color: #e8d8b5; /* Helle Überschriften-Farbe */
}

.section-header-with-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.section-header-with-icon h3,
.spell-section-container > h3 {
    margin-top: 20px;
    text-align: center;
}

.section-header-icon {
    width: 28px;
    height: 28px;
}

.spell-feature-item {
    margin-bottom: 10px;
}

.spell-feature-item label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.spell-choice-details {
    padding-left: 25px;
    font-style: italic;
    color: #bdae93;
}

.spell-counter {
    margin: 5px 0;
    font-weight: bold;
}

#master-spell-list {
    margin-top: 25px;
    padding-top: 15px;
    border-top: none; /* Kupferner Divider entfernt */
}

#master-spell-list h4 {
    border-bottom: 2px solid #e8d8b5; /* Dickerer, heller Divider */
    padding-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 10px;
}

ul.master-spell-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 15px;
}

ul.master-spell-ul li {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

ul.master-spell-ul li.clickable {
    cursor: pointer;
    background-color: rgba(139, 94, 52, 0.2);
}

ul.master-spell-ul li.clickable:hover {
    background-color: rgba(139, 94, 52, 0.4);
}

ul.master-spell-ul li.selected-choice {
    background-color: rgba(212, 160, 23, 0.3);
}

.spell-marker-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 70px;
    margin-right: 8px;
}

.spell-marker {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
}

.spell-marker img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.spell-name {
    flex-grow: 1;
}

.spell-sub-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.sub-header-icon {
    width: 24px;
    height: 24px;
}

.section-divider {
    border: none;
    border-top: 1px dashed #e8d8b5; /* Heller, gestrichelter Divider */
    margin: 20px 10%;
}

/* --- Stile für Spell Info Box --- */
/* =======================================================================
   SPEZIAL-INFOBOXEN: ZAUBER & TALENTE
   ======================================================================= */

#feat-info-box-container,
#spell-info-box-container {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Nur vertikale Zentrierung auf Desktop */
    display: none; /* Steuerung via JS (flex) */
    flex-direction: column;
    background-color: rgba(58, 58, 65, 0.98); /* Etwas deckender für bessere Lesbarkeit */
    border: 2px solid #d4a017;
    border-radius: 10px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.9);
    z-index: 100;
    overflow: hidden; /* Verhindert, dass Grid-Inhalt runden Rahmen überlagert */
    transition: width 0.3s ease, left 0.3s ease;
}

/* --- HEADER DER BOX --- */
#spell-info-box-header, 
#feat-info-box-header{
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e8d8b5;
    font-weight: bold;
    margin-top: 10px;
}

/* --- INHALTSBEREICH MIT SPALTEN-LOGIK --- */
.spell-info-box-content {
    padding: 15px;
    display: grid;
    /* Nutzt die von JS berechnete Anzahl an Spalten */
    grid-template-columns: repeat(var(--info-cols, 1), 1fr);
    /* Sorgt dafür, dass Elemente gleichmäßig verteilt werden (Row-First) */
    grid-auto-flow: row; 
    gap: 8px;
    overflow-y: auto;
    /* Die Box wächst bis max 80% der Höhe, danach erscheint der Scrollbalken */
    max-height: 75vh;
}

/* --- FOKUS-MODUS: Wenn ein Element aufgeklappt wird --- */
.spell-info-box-content.focused-mode {
    display: block !important; /* Grid aufheben, damit Beschreibung volle Breite nutzt */
}

/* Verstecke alle Items, die NICHT aktiv sind, wenn der Fokus-Modus an ist */
.spell-info-box-content.focused-mode .info-spell-item:not(.has-active-child) {
    display: none !important;
}

/* Styling der einzelnen Label-Elemente */
.info-spell-item {
    width: 100%;
    box-sizing: border-box;
}

.info-spell-name {
    background-color: rgba(139, 94, 52, 0.25);
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 0.9em;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Label bei Spalten */
    overflow: hidden;
    text-overflow: ellipsis; /* Schneidet zu langen Text mit ... ab */
}

.info-spell-name:hover {
    background-color: rgba(212, 160, 23, 0.3);
    border-color: #d4a017;
}

.info-spell-name.active {
    background-color: #d4a017;
    color: #000;
    font-weight: bold;
    white-space: normal; /* Erlaubt Umbruch wenn aufgeklappt */
}

/* Beschreibungstext */
.info-spell-description {
    display: none;
    padding: 15px 5px;
    color: #e8d8b5;
    line-height: 1.5;
    font-size: 0.95em;
}

.info-spell-description.active {
    display: block; /* Erscheint nur wenn aktiv */
}

/* =======================================================================
   RESPONSIVE POSITIONIERUNG & BREITEN
   ======================================================================= */

/* --- DESKTOP (> 1440px) --- */
@media screen and (min-width: 1441px) {
    #feat-info-box-container,
    #spell-info-box-container {
        width: 400px;
        /* Position Links: Mitte - 260px (Content) - 320px (Box) - 70px (Puffer) */
        left: calc(50% - 690px) !important;
    }
}

/* --- STUFE 1: LAPTOP (< 1440px ODER < 850px Höhe) --- */
@media screen and (max-width: 1440px), screen and (max-height: 850px) {
    #feat-info-box-container,
    #spell-info-box-container {
        width: 600px;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* Mittig positioniert */
    }
    
    .info-spell-name {
        font-size: 0.85em; /* Etwas kleiner, da bis zu 3 Spalten */
    }
}

/* --- STUFE 2: TABLET / MOBIL (< 1000px) --- */
@media screen and (max-width: 1000px) {
    #feat-info-box-container,
    #spell-info-box-container {
        width: 350px;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .info-spell-name {
        white-space: normal; /* Wieder normaler Umbruch bei nur einer Spalte */
    }
}


#close-spell-info,
#close-feat-info {
    position: absolute; /* Positioniert das Schließen-Symbol absolut */
    top: 5px; /* Positioniert es 10px vom oberen Bildschirmrand */
    right: 10px; /* Positioniert es 10px vom rechten Bildschirmrand */
    cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger bei Hover */
    color: #d4a017; /* Setzt die Farbe des Symbols */
    font-size: 20px; /* Setzt die Schriftgröße des Symbols */
    font-weight: bold; /* Macht den Text fett */
}

/* Stile für Tabellen in Zauberbeschreibungen (Version 3) */
.spell-table {
  width: 90%;
  border: 1px solid black; /* GEÄNDERT: Rahmenfarbe Schwarz */
  border-collapse: collapse; 
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
}

/* Stil für die Tabellenüberschrift */
.spell-table caption {
  caption-side: top;
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 5px;
  font-size: 1.1em;
}

/* Stile für Kopfzellen (th) und Datenzellen (td) */
.spell-table th,
.spell-table td {
  border: 1px solid black; /* GEÄNDERT: Rahmenfarbe Schwarz */
  padding: 8px;
  text-align: left;
}

/* Hintergrundfarbe für die Kopfzeile */
.spell-table th {
  background-color: #e8d8b5; /* BEIBEHALTEN: Hintergrund (Helle Farbe) */
  color: #000000; /* BEIBEHALTEN: Schriftfarbe (Schwarz) */
}

/* Stil für beschwörbare Kreaturen (Button-Links) */
.spell-summon-link {
  display: inline-block; /* Wichtig, damit padding funktioniert */
  background-color: #e8d8b5; /* Passt zur Tabellenüberschrift */
  color: #000000; /* Schwarzer Text */
  padding: 5px 10px; /* Etwas kleiner, da es im Textfluss ist */
  border: 1px solid #000; /* Schwarzer Rahmen */
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer; /* Zeigt an, dass es anklickbar ist */
  margin-left: 5px; /* Kleiner Abstand zum Text davor */
  transition: background-color 0.2s, color 0.2s;
  user-select: none; /* Verhindert Textmarkierung beim Klicken */
}

/* Hover-Effekt */
.spell-summon-link:hover {
  background-color: #d4a017; /* Deine goldene Hover-Farbe */
  color: #000;
}

/* --- STILE FÜR SCHRITT 8: EQUIPMENT--- */

.equipment-section {
    padding: 15px; /* Fügt Innenabstände hinzu */
    background-color: rgba(58, 58, 65, 0.85); /* Setzt die Hintergrundfarbe */
    border: 2px solid #d4a017; /* Fügt einen goldfarbenen Rahmen hinzu */
    border-radius: 10px; /* Macht die Ecken abgerundet */
    color: #e8d8b5; /* Setzt die Textfarbe */
    text-align: left; /* Richtet den Text links aus */
    overflow: auto; /* Ermöglicht Scrollen bei langem Text */
    max-width: 95%; /* Begrenzung der maximalen Breite */
    margin: 0 auto 5%; /* Zentriert den Container innerhalb des Elternblocks und fügt unteren Abstand hinzu */
}

/* Zusätzliche Klasse für Bereiche ohne goldenen Rahmen (z.b, Schritt 8) */
.no-border {
    border: none; /* Entfernt den goldenen Rahmen */
    background-color: transparent; /* Hintergrundfarbe transparent */
    max-width: 100%; /* Macht den Bereich breiter */
    width: 95%; /* Optional: Setze eine feste Breite von 95% */
    margin: 0 auto 5%; /* Zentriert den Bereich */
    text-align: center; /* Richtet den Text in der Mitte aus */
}

/* Equipment-Tabelle (Bereich 1) */
.equipment-table {
    width: 100%; /* Die Tabelle nimmt die gesamte Breite des Containers ein */
    max-width: 100%; /* Die Tabelle überschreitet niemals die Breite des Containers */
    border-collapse: separate; /* Ermöglicht das Setzen von äußeren Rändern */
    background-color: transparent; /* Hintergrund bleibt transparent */
    margin: 0 auto; /* Tabelle zentrieren */
    box-sizing: border-box; /* Bezieht Padding und Rahmen in die Breite mit ein */
}

/* Kopfzeile der Tabelle */
.equipment-table thead th {
    text-align: center;
    vertical-align: middle;
    font-size: 1.2em;
    font-weight: bold;
    padding: 20px;
    background-color: rgba(58, 58, 65, 0.85); /* Dunkler Hintergrund */
    color: #e8d8b5; /* Helle Schriftfarbe */
    border-bottom: 2px solid #d4a017; /* Goldener Unterstrich */
}

/* Stil für die inneren Zell-Linien */
.equipment-table th, .equipment-table td {
    border: 1px solid transparent; /* Innere Linien transparent */
    padding: 8px; /* Etwas Abstand innerhalb der Zellen */
    font-size: 0.9em; /* Schriftgröße */
}

/* Buchstaben A, B, C, Keine größer machen */
.equipment-table td.clickable-option label {
    display: inline-block; /* Blockelement für Zentrierung */
    width: 50px; /* Breitere Labels */
    height: 50px; /* Höhere Labels */
    line-height: 50px; /* Vertikale Zentrierung */
    text-align: center; /* Horizontale Zentrierung */
    border-radius: 50%; /* Runde Form für Kreis */
    position: relative; /* Ermöglicht die Platzierung des gestrichelten Kreises */
    transition: all 0.3s ease; /* Sanfter Übergang */
    cursor: pointer; /* Zeigt an, dass das Label klickbar ist */
    background-color: transparent; /* Standardmäßig kein Hintergrund */
    border: 2px dashed #7a431d; /* Kupferfarbener gestrichelter Kreis */
}

/* Hover-Effekt auf das Label (Kupferfarben) */
.equipment-table td.clickable-option label:hover {
    background-color: rgba(122, 67, 29, 0.3); /* Kupferfarbener Hintergrund bei Hover */
    border: 2px solid #d4a017; /* Durchgezogener goldener Rand bei Hover */
    box-shadow: 0 0 10px rgba(212, 160, 23, 0.8); /* Goldener Schimmer */
}

/* Highlighting bei Auswahl: Goldener Kreis um den Buchstaben */
.equipment-table td.clickable-option input[type="radio"]:checked + label {
    background-color: rgba(212, 160, 23, 0.3); /* Goldener Hintergrund */
    border: 2px solid #d4a017; /* Goldener Rand */
    color: #e8d8b5; /* Helle Schriftfarbe */
    font-weight: bold; /* Fettschrift */
}

/* Stil für Radio-Buttons innerhalb der Tabelle: unsichtbar machen */
.equipment-table input[type="radio"] {
    display: none;
}

/* =======================================================================
   SPEZIAL-INFOBOX: EQUIPMENT OPTIONS (Links vom Content)
   ======================================================================= */

#equipmentOptionsInfoBox {
    /* Grund-Reset: Wir erzwingen die Position links, egal was .info-box sagt */
    position: fixed !important;
    top: 50% !important;
    /* Nur vertikal zentrieren, NICHT horizontal (überschreibt Modal-Logik) */
    transform: translateY(-50%) !important;
    
    /* Dynamik: Keine Scrollbalken */
    max-height: none !important;
    overflow: visible !important;
    
    background-color: rgba(58, 58, 65, 0.9);
    color: #e8d8b5;
    padding: 20px;
    border: 2px solid #d4a017;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
    z-index: 5;
    text-align: left;
    transition: width 0.3s ease, left 0.3s ease;
}

/* --- ZUSTAND: GROSSER MONITOR (> 1440px) --- */
@media screen and (min-width: 1441px) {
    #equipmentOptionsInfoBox {
        width: 320px;
        left: calc(50% - 665px) !important; /* 250px Content + 350px Box + 70px Puffer */
    }
}

/* --- STUFE 1: LAPTOP / KLEINER MONITOR (< 1440px ODER < 850px Höhe) --- */
@media screen and (max-width: 1440px) {
    #equipmentOptionsInfoBox {
        /* WICHTIG: Wir bleiben LINKS. Kein Sprung in die Mitte! */
        width: 200px; /* Etwas schmaler für Laptops */
        left: calc(50% + 295px) !important; /* 250px Content + 280px Box + 30px Puffer */
        
        /* Sicherstellen, dass transform nicht durch .info-box auf (-50%, -50%) gesetzt wird */
        transform: translateY(-50%) !important; 
    }
}

/* --- STUFE 2: TABLET / SCHMAL (< 1000px) --- */
@media screen and (max-width: 1000px) {
    #equipmentOptionsInfoBox {
        display: block !important; /* Sichtbar machen, aber... */
        position: relative !important; /* ...in den normalen Textfluss bringen */
        left: 25px !important;
        transform: none !important;
        width: 25% !important;
        max-width: 100% !important;
        
        /* Alles Box-Styling entfernen */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 10px 0 20px 0 !important;
        z-index: 5 !important;
        overflow: visible !important;
        max-height: none !important;
    }

    /* Alle dekorativen oder informativen Elemente verstecken */
    #equipmentOptionsInfoBox h3,
    #equipmentOptionsInfoBox .close-icon,
    #equipmentOptionsInfoBox hr,
    #equipmentOptionsInfoBox h4 {
        display: none !important;
    }

    /* Liste bereinigen */
    #equipmentOptionsInfoBox ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Nur die Listenelemente zeigen, die ein Dropdown enthalten */
    /* Statische Items (nur Text) werden hier ausgeblendet */
    #equipmentOptionsInfoBox ul li {
        margin-bottom: 10px;
    }

    #equipmentOptionsInfoBox ul li:not(:has(select)) {
        display: none !important;
    }

    /* Dropdowns für Mobile optimieren */
    #equipmentOptionsInfoBox .varies-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        background-color: #2e2e33;
        border: 1px solid #d4a017; /* Goldener Rand zur besseren Sichtbarkeit */
    }
}

/* Das "X" (Schließen-Icon) nur in dieser Box ausblenden */
#equipmentOptionsInfoBox .close-icon {
    display: none !important;
}

#equipmentOptionsInfoBox h3 {
    text-align: center;
    margin-bottom: 10px;
}

#equipmentOptionsInfoBox ul {
    list-style-type: none;
    padding-left: 10px;
}

/* Purse Section (Bereich 2) */
.purse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #e8d8b5; /* Devider in heller Farbe */
    padding-bottom: 5px;
}

#purseInputs {
    display: grid;
    grid-template-columns: repeat(5, 0.1fr);
    gap: 8px;
    justify-content: center; /* Zentriert die gesamte Eingabegruppe horizontal */
    align-items: center; /* Zentriert die Inputs vertikal */
    margin-top: 10px;
}

#purseInputs .coin-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#purseInputs .coin-column label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9em;
}

#purseInputs input[type="number"] {
    width: 60px;
    padding: 5px;
    text-align: center;
    margin: 0; /* Überschreibt main.js Standard-Margin-Bottom */
    font-size: 16px;
    height: 30px;
}

/* Styling für den Reset-Button (identisch zu anderen Buttons) */
#resetPurseBtn {
    background-color: #8b5e34; /* Kupferfarbener Hintergrund */
    color: #e8d8b5; /* Textfarbe (falls benötigt, hier irrelevant) */
    border-radius: 8px; /* Abgerundete Ecken */
    padding: 8px; /* Innenabstand */
    cursor: pointer; /* Zeiger bei Hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Sanfte Übergänge */
    display: flex; /* Flexbox für zentriertes Icon */
    align-items: center; /* Zentriert das Icon vertikal */
    justify-content: center; /* Zentriert das Icon horizontal */
    width: auto; /* Automatische Breite */
    min-width: 40px; /* Mindestbreite festlegen */
    height: 40px; /* Einheitliche Höhe */
}

/* Hover-Effekt für den Reset-Button */
#resetPurseBtn:hover {
    background-color: #a36a42; /* Hellere Kupferfarbe bei Hover */
}

/* Styling für das Icon im Reset-Button */
#resetPurseBtn .reset-icon {
    width: 24px; /* Breite des Icons */
    height: 24px; /* Höhe des Icons */
    pointer-events: none; /* Verhindert, dass das Icon den Button-Click blockiert */
}

/* Toggle Header (Bereich 3) */
.toggle-header h3 {
    text-align: left;
    cursor: pointer;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-header #toggleArrow {
    transition: transform 0.3s ease-in-out;
}

.toggle-header.expanded-border {
    border-bottom: none !important; /* Entfernt die untere Linie des Headers */
    border-bottom-left-radius: 0 !important; /* Entfernt die untere linke Rundung */
    border-bottom-right-radius: 0 !important; /* Entfernt die untere rechte Rundung */
    background-color: transparent !important; /* Macht den Header-Hintergrund transparent, um mit dem Inhalt zu verschmelzen */
    box-shadow: none !important; /* Entfernt jeglichen Schatten, der die Nahtstelle stören könnte */
}

/* Rotation des Pfeils, wenn der Bereich aufgeklappt ist */
#additionalEquipmentToggle:not([style*="display: none"]) h3[onclick*="true"] #toggleArrow {
    transform: rotate(-180deg);
}

#itemSelectionContainer {
    text-align: left;
}

#additionalEquipmentSection hr {
    border: none;
    border-top: 2px solid #d4a017; /* Goldener Divider */
    margin: 30px 0; /* Abstand oben/unten */
}

/* Container für jedes Eingabefeld und den Button in Schritt 8 */
.equipment-form-group {
    display: flex;
    flex-direction: column; /* Elemente innerhalb des Containers untereinander anordnen */
    margin-bottom: 15px; /* Abstand zwischen den Gruppen */
    align-items: flex-start; /* Elemente linksbündig ausrichten */
}

/* Styling für Labels in Schritt 8 */
.equipment-label {
    font-size: 1em; /* Schriftgröße */
    margin-bottom: 5px; /* Abstand zwischen Label und Input */
    color: #e8d8b5; /* Textfarbe */
}

/* Styling für Buttons in Schritt 8 */
.equipment-button {
    width: auto; /* Automatische Breite (an Text angepasst) */
    padding: 10px 20px; /* Innenabstand (oben/unten, links/rechts) */
    color: #e8d8b5; /* Textfarbe */
    background-color: #8b5e34; /* Kupferfarbener Hintergrund */
    border: 1px solid #d4a017; /* Goldfarbener Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger bei Hover */
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

/* Button-Hover-Effekt in Schritt 8 */
.equipment-button:hover {
    background-color: #a36a42; /* Hellere Kupferfarbe bei Hover */
}


/* Item-Tabellen in Bereich 3 */
.item-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    text-align: left;
    font-size: 0.85em;
}

.item-table th, .item-table td {
    border: 1px solid black; /* Rahmenfarbe Schwarz */
    padding: 5px;
    vertical-align: middle;
}

.item-table th {
    background-color: #e8d8b5; /* Helle Hintergrundfarbe */
    color: #000000; /* Schwarze Schriftfarbe */
}

/* Stil für die Eingabe im Feld "Anzahl" (Punkt 6) */
.item-table input[type="number"] {
    width: 40px;
    padding: 2px;
    text-align: center;
    margin: 0;
    font-size: 0.9em;
    height: 25px;
}

#equipmentTablesContainer hr {
    border: none;
    border-top: 2px solid #e8d8b5; /* Devider in heller Farbe */
    margin: 30px auto; /* Vertikaler Abstand */
}

/* Stil für durchgestrichene Preise (Punkt 6) */
.strikethrough-cost {
    text-decoration: line-through;
    color: #ff5555; /* Rot zur Verdeutlichung */
    cursor: pointer;
    font-weight: bold;
}

.normal-cost {
    cursor: pointer;
    font-weight: bold;
}

/* --- Spezifisches Styling für Varianten-Dropdowns in Tabellen --- */

.varies-dropdown {
    font-size: 0.85em; 
    padding: 2px 5px;
    height: auto;
    margin: 0;
    background-color: #2e2e33; 
    border: 1px solid #8b5e34; 
    color: #e8d8b5;    
    border-radius: 4px;
    cursor: pointer;
}

/* Spezifische Anpassung für Tabelle (falls nötig, z.B. Breite) */
.item-table .varies-dropdown {
    width: 95%;      
    min-width: 100px;
}

/* Spezifische Anpassung für Infobox (falls nötig) */
.info-box .varies-dropdown {
    display: inline-block;
    vertical-align: middle;
}

/* --- STILE FÜR PACK-KOMPONENTEN (Ein-/Ausklappen) --- */

/* Optische Anpassung für klickbare Hauptzeile */
.pack-main-row {
    cursor: pointer;
    font-weight: bold;
    /* Optional: Hintergrund bei Hover leicht hervorheben */
    transition: background-color 0.2s;
}
.pack-main-row:hover {
    background-color: rgba(139, 94, 52, 0.2); /* Leichte Kupferfarbe */
}

/* Stil für Pack-Komponenten Zeilen */
.pack-component-row td {
    font-size: 0.9em;
    padding-left: 20px !important; /* Einzug zur Unterscheidung */
    background-color: rgba(122, 67, 29, 0.1); /* Leichter Hintergrund */
    /* Fügt eine weiche Transition für das Ausblenden hinzu */
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.pack-component-row td input[type="number"] {
    opacity: 0.5; /* Ausgrauen des Input-Felds */
}

/* Zustand: Zeilen ausblenden, wenn die Hauptzeile auf 'pack-collapsed' steht */
.pack-component-row.pack-collapsed {
    /* Setzt die Zeile auf unsichtbar und entfernt sie aus dem Layout */
    display: none; 
}

.pack-component-row.pack-collapsed td {
    border: none !important; /* Entfernt jeglichen Rahmen auf den Zellen selbst */
    padding: 0 !important;   /* Entfernt Padding, falls dieses die Höhe beeinflusst */
}

.pack-arrow {
    display: inline-block; /* Wichtig für Transformationen */
    margin-left: 5px;      /* Abstand zum Text "Pack" */
    font-size: 0.8em;      /* Etwas kleiner als der Text */
    color: #d4a017;        /* Goldene Farbe passend zum Theme */
    transition: transform 0.3s ease; /* Weiche Animation beim Drehen */
}

/* Zustand: Ausgeklappt (Pfeil zeigt nach unten) */
.pack-arrow.arrow-down {
    transform: rotate(0deg);
}

/* Zustand: Eingeklappt (Pfeil zeigt nach oben - oder zur Seite, wie gewünscht) */
.pack-arrow.arrow-up {
    transform: rotate(180deg); /* Dreht den Pfeil nach oben */
    /* Alternativ: rotate(-90deg); für einen Pfeil nach rechts */
}

/* --- Spezifische Styles für Schritt 9 (Story) --- */

.story-wrapper {
    overflow: hidden;           /* Sorgt dafür, dass das Textfeld nicht über die runden Ecken schlägt */
    display: flex;              /* Verhindert Ghost-Spaces am Boden */
}

.story-inner-textarea {
    width: 100%;                /* Nutzt die volle Breite der .class-section */
    height: 400px;              /* Deine gewünschte Höhe */
    background: transparent;    /* Nutzt den Hintergrund der .class-section */
    border: none;               /* Entfernt den eigenen Rahmen des Textfelds */
    color: #e8d8b5;             /* Textfarbe */
    font-family: 'Garamond', serif; /* Schriftart */
    font-size: 1.0em;           /* Schriftgröße */
    padding: 0px;              /* kein wieterer innerer Rand */
    box-sizing: border-box;     /* WICHTIG: Padding bleibt innerhalb der 100% Breite */
    resize: vertical;           /* Nur vertikale Skalierung erlauben */
    outline: none;              /* Entfernt den blauen Fokus-Rahmen */
}

.story-counter-position {
    max-width: 85%;             /* Gleiche Breite wie die .class-section */
    margin: -2% auto 3%;        /* Schiebt den Zähler ganz nah unter die Box */
}

.full-width-input {
    max-width: 100% !important;  /* Erlaubt dem Input, die komplette Breite der Sektion zu füllen */
    width: 100% !important;      /* Setzt die Breite fest auf 100% des verfügbaren Platzes */
}

.community-input-group {
    margin-bottom: 5px;          /* Verringert den Abstand zwischen Name und Beschreibung */
}

.small-spacing {
    margin-bottom: 5px;          /* Hält den Zähler der Gemeinschaft nah am Eingabefeld */
}

.story-textarea {
    width: 100%;                 /* Standardbreite für Textfelder innerhalb von Sektionen */
    height: 300px;               /* Standardhöhe für das Feld */
    text-align: left;            /* Text beginnt immer links oben */
    padding: 15px;               /* Innenabstand für bessere Lesbarkeit */
    resize: vertical;            /* Nur vertikale Größenänderung möglich */
}

.community-textarea {
    width: 100%;                 /* Nutzt die volle Breite innerhalb der Gemeinschafts-Sektion */
    height: 250px;               /* Kompakte Höhe für kurze Beschreibungen */
    text-align: left;            /* Linksbündige Ausrichtung */
    padding: 10px;               /* Abstand vom Text zum Rand */
    resize: vertical;            /* Verhindert horizontales Verzerren des Layouts */
}

#communityDescInput {
    max-width: 100%;
    margin-bottom: 0px; 
}

.text-left-input {
    text-align: left !important;    /* Erzwingt die Linksbündigkeit auch in zentrierten Formularen */
    padding-left: 15px !important;  /* Schafft einen festen Einzug für den Textanfang */
}

.char-counter {
    text-align: right;           /* Platziert die Zeichenzahl am rechten Rand */
    font-size: 0.8em;            /* Macht die Information kleiner als den Haupttext */
    color: #d4a017;              /* Färbt den Zähler im Gold-Ton des Designs */
}

.spacer-bottom {
    margin-bottom: 15px;         /* Erzeugt Platz zum nächsten Element */
}

.radio-group-centered {
    display: flex;               /* Ermöglicht das Nebeneinandersetzen von Radio-Buttons */
    justify-content: center;     /* Zentriert die Auswahlmöglichkeiten horizontal */
    margin-bottom: 20px;         /* Abstand zur nächsten Unter-Sektion */
    gap: 20px;                   /* Bestimmt den Platz zwischen den Buttons */
}

.setting-selection {
    text-align: left;            /* Richtet die Welt-Auswahl linksbündig aus */
    margin-bottom: 15px;         /* Erzeugt Abstand vor den Pantheon-Listen */
}

.info-sub-box {
    margin-top: 10px;            /* Lücke zwischen Dropdown und Info-Anzeige */
    padding: 10px;               /* Innenraum für Gesinnungs- und Symboltext */
    border-top: 1px dashed #d4a017; /* Gestrichelte Goldlinie zur Abgrenzung */
}

.story-flex-container {
    display: flex;               /* Aktiviert flexible Anordnung */
    flex-direction: column;      /* Stapelt Labels und Dropdowns vertikal untereinander */
}


#deityFreeName, 
#communityNameInput {
    margin-top: 0px;
    margin-bottom: 0.5vh;
}

#nameOfCommunityLabel,
#nameOfDeityLabel {
    margin-bottom: 0px;
}

/* Das Grid-System für die Ausrichtung */
.deity-grid {
    display: grid;
    grid-template-columns: 120px 1fr; /* 120px für Labels, der Rest für Werte */
    gap: 8px 10px;                   /* 8px Abstand zwischen Zeilen, 10px zwischen Spalten */
    text-align: left;
}

/* Styling für die Labels (links) */
.deity-label {
    color: #d4a017;                  /* Goldener Ton für die Bezeichnung */
    font-weight: bold;
}

/* Styling für die Werte (rechts) */
.deity-value {
    color: #e8d8b5;                  /* Hellere Farbe für die eigentlichen Infos */
}

/* Falls die IDs noch den globalen 5vh-Abstand haben, hier die Brechstange: */
#valDeityAlignment, #valDeitySymbol {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- PERSÖNLICHKEIT & GESINNUNG (Schritt 10) --- */

.personality-wrapper {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 15%;
}

/* Das Pseudo-Textfeld */
#personalityEditor {
    min-height: 180px;
    height: auto;
    max-height: 450px;
    overflow-y: auto;
    padding: 10px;
    text-align: left;
    white-space: pre-wrap;
    cursor: text;
    line-height: 1.4;
    outline: none; /* Entfernt den blauen Rahmen beim Klicken */
    color: #e8d8b5 !important; /* Standardfarbe für allen Text im Feld */
}


/* Nur die Spans (die reingezogenen Traits) dürfen ihre eigene Farbe haben */
#personalityEditor span {
    /* Wir erzwingen hier keine Farbe, damit das inline-style aus JS greift */
    font-weight: bold;
    display: inline; /* Wichtig, damit der Textfluss natürlich bleibt */
}

/* Placeholder-Logik für ContentEditable */
#personalityEditor:empty:before {
    content: attr(data-placeholder);
    color: rgba(232, 216, 181, 0.4);
}

/* Verhindert, dass leere Spans den Cursor "einfangen" */
#personalityEditor span:empty {
    display: none;
}

.personality-counter-layout {
    margin: 0 20px 10px auto;
}

.personality-divider {
    border: none;
    border-top: 1px dashed rgba(212, 160, 23, 0.6);
    margin: 0;
}

/* --- Reset-Icon --- */
#resetTraitsButton {
    background-color: #8b5e34;
    border-radius: 8px;
    padding: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#resetTraitsButton .reset-icon {
    width: 16px !important;  /* Brechstange gegen "Riesig" */
    height: 16px !important;
    pointer-events: none;    /* Verhindert, dass das Icon gezogen wird */
}


/* Trait Tabelle */
.trait-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    min-height: 150px; /* Sicherstellen, dass sie Platz einnimmt */
}

.trait-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.trait-header {
    font-size: 0.75em;
    font-weight: bold;
    color: #d4a017;
    margin-bottom: 5px;
    text-align: center; /* Zentriert */
    text-transform: uppercase;
}

.draggable-trait-item {
    display: flex;
    min-height: 20px;
    padding: 6px 2px;
    font-size: 0.8em;
    border-radius: 4px;
    cursor: grab;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* Ergänzung für Apple-Geräte: Verhindert den Abbruch des Drags */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Trait Farben nach Kategorie */
.trait-bg-good    { background-color: #7a9eb5; color: #fff; } /* Staubiges Blau */
.trait-bg-lawful  { background-color: #a68d52; color: #fff; } /* Altgold / Ocker */
.trait-bg-neutral { background-color: #b0b0b0; color: #fff; } /* Helleres Silbergrau */
.trait-bg-chaotic { background-color: #a34a4a; color: #fff; } /* Gedämpftes Weinrot */
.trait-bg-evil    { background-color: #38383d; color: #fff; } /* Tiefes Anthrazit *

/* Alignment 3x3 Raster */
.alignment-matrix {
    display: grid;
    grid-template-columns: repeat(3, 110px);
    grid-template-rows: repeat(3, 110px);
    justify-content: center;
    margin: 40px auto;
    gap: 5px;
}

.alignment-circle-item {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px dashed rgba(232, 216, 181, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    transition: all 0.2s;
}

.alignment-circle-item.active-selection {
    border: 3px solid #fff !important;
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 0 15px white;
}

/* Alignment Farben */
#align-lg { background-color: #5a7a5a; color: #fff; } /* Moosgrün */
#align-ng { background-color: #7a9eb5; color: #fff; } /* Staubiges Blau */
#align-cg { background-color: #7a6a8a; color: #fff; } /* Gedämpftes Pflaume/Violett */

#align-ln { background-color: #a68d52; color: #fff; } /* Altgold */
#align-n  { background-color: #b0b0b0; color: #fff; } /* Helleres Silbergrau */
#align-cn { background-color: #a34a4a; color: #fff; } /* Weinrot (ehemals Orange) */

#align-le { background-color: #5e543a; color: #fff; } /* Dunkles, schmutziges Ocker */
#align-ne { background-color: #252529; color: #fff; } /* Beinahe Schwarz */
#align-ce { background-color: #5c3535; color: #fff; } /* Dunkles, schmutziges Rostrot */

.trait-table-controls {
    display: flex;
    justify-content: flex-end;
    /* Gleicher Abstand nach oben (zur gestrichelten Linie) und nach unten (zum grauen Bereich) */
    padding: 10px 15px !important; 
    background-color: transparent;
}

/* Für normale Textareas */
input::placeholder,
textarea::placeholder,
.story-inner-textarea::placeholder {
    color: rgba(232, 216, 181, 0.4) !important;
    font-family: inherit;
    font-size: 1em; /* Bei kleinen Inputs oft etwas schöner, wenn minimal kleiner */
    opacity: 1;
}


/* Tablet Modus: Drag & Drop */
/* Verhindert, dass das Tablet überhaupt versucht zu scrollen oder zu zoomen */
#traitPoolGrid * {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Verhindert, dass Überschriften gezogen werden */
#traitPoolGrid h3, #traitPoolGrid h4 {
    pointer-events: none !important;
}

.dragging-active {
    position: fixed !important; /* Fixed statt Relative für absolute Kontrolle am Finger */
    z-index: 10000 !important;
    pointer-events: none !important;
    opacity: 0.9;
    transform: scale(1.1);
}

.draggable-value {
    /* Verhindert, dass das Tablet versucht, Text zu markieren, während du ziehst */
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    /* Sorgt für flüssige Bewegungen am PC, aber wir schalten es in JS für Touch auf 'none' */
    transition: transform 0.1s ease-out; 
    will-change: transform; /* Sagt dem Browser: "Bereite die GPU vor!" */
    -webkit-user-select: none; /* Verhindert Textmarkierung auf iOS */
}

.dragging-ghost {
    pointer-events: none !important;
    transition: none !important; /* Absolut keine Verzögerung beim Finger-Folgen */
    will-change: transform;
}

/* --- SCHRITT 11: APPEARANCE --- */

.appearance-grid {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.appearance-row {
    display: grid;
    grid-template-columns: 60% 0.5fr auto; /* Breite Spalte für Label + ⌀ Text */
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.appearance-label {
    color: #e8d8b5;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
    display: flex;
    flex-direction: column;
}

.orientation-text {
    opacity: 0.5;
    font-size: 1em;
    text-transform: none;
    margin-top: 2px;
}

.appearance-value {
    color: #e8d8b5;
    font-size: 0.95em;
}

.highlight-gold {
    color: #d4a017;
    font-weight: bold;
}

.app-small-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(212, 160, 23, 0.3);
    color: #e8d8b5;
    padding: 6px 12px;
    border-radius: 4px;
    width: 250px;
    font-family: inherit;
}

.size-input-width {
    width: 90px !important;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.unit-text {
    font-size: 0.85em;
    color: #e8d8b5;
}

.app-small-input:focus {
    outline: none;
    border-color: #d4a017;
    background: rgba(0, 0, 0, 0.4);
}

.app-small-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#selectGender {
    margin-bottom: 0 !important; /* !important nur, falls andere Regeln stören */
    width: 120px;
}

#inputAge {
    margin-bottom: 0 !important; /* !important nur, falls andere Regeln stören */
    width: 90px;
}

/* Individuelle Korrektur für die Inputs */
#inputEyeColor, 
#inputHairColor, 
#inputSkinTone, 
#inputSize {
    margin-bottom: 0 !important; /* !important nur, falls andere Regeln stören */
    width: 120px;
}

.name-inner-textarea {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    color: #e8d8b5;
    font-family: 'Garamond', serif;
    font-size: 1.5em; /* Größer für den Namen */
    font-weight: bold; /* Macht den Text fett */
    padding: 12px 15px;
    box-sizing: border-box;
    resize: none; /* Deaktiviert das manuelle Vergrößern */
    outline: none;
    overflow: hidden; /* Verhindert Scrollbalken */
    display: block;
}


/* =======================================================================
   Lizenzangaben
   ======================================================================= */

/* Der schwarze Vorhang über den ganzen Bildschirm */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 999999; /* Über allem anderen */
    display: none; /* Wird per JS zu flex gesetzt */
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}

/* Die Box innerhalb des Overlays - STANDARD (PC Modus) */
#licenseOverlay .info-box {
    position: fixed; 
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* PC Standard-Maße */
    width: 600px;
    max-width: 60vw;
    padding: 40px;
    
    display: flex !important; 
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 1);
    box-sizing: border-box;
}

/* TABLET & HANDY MODUS (Ab einer Breite von weniger als 1000px) */
@media (max-width: 1000px) {
    #licenseOverlay .info-box {
        width: 300px;      /* Schmaler für mobile Geräte */
        max-width: 85vw;
        padding: 20px;     /* Kompakteres Padding */
    }
}

/* Text-Styling innerhalb der Box */
#licenceMarkTextLabel {
    width: 100%;
    margin-top: 15px;
    line-height: 1.6;
    white-space: pre-line;
    font-size: 0.95rem;
}

/* Das Schließen-X */
#licenseOverlay .close-icon {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
}

/* --- Permanenter Disclaimer --- */

/* Permanenter Disclaimer unten rechts am Bildschirmrand */
.permanent-disclaimer {
    position: fixed;
    bottom: 10px;
    right: 20px;
    font-size: 0.7rem;
    color: #e8d8b5; /* Deine Standard-Schriftfarbe */
    opacity: 0.6;
    z-index: 9999; /* Hoch, aber unter dem Modal-Overlay */
    text-align: right;
    pointer-events: none; /* Man kann "durch" den Text klicken */
    transition: opacity 0.3s ease;
}

/* Auf dem Handy etwas mehr Abstand zum Rand, damit es nicht mit Browser-UI kollidiert */
@media (max-width: 600px) {
    .permanent-disclaimer {
        right: 10px;
        bottom: 5px;
        font-size: 0.6rem;
    }
}


/* =======================================================================
   MOBILE-UPGRADE (< 600px)
   ======================================================================= */
@media screen and (max-width: 600px) {
    /* 1. Sprache & Buttons weg */
    #languageSwitcher, .fixed-button { 
        display: none !important; 
    }

    /* 2. Main Content befreien */
    #mainContent {
        width: calc(100% - 60px); /* Platz für schmale StepBar */
        max-width: 95vw;
        margin-left: 40px; /* Rückt nach rechts, um Stepbar Platz zu geben */
        padding: 15px;
        font-size: 0.95rem;
    }

    /* 3. StepBar "Geister-Modus" */
    #stepBar {
        width: 40px;
        background-color: rgba(58, 58, 65, 0.3); /* Sehr transparent */
        border-right: 1px solid rgba(122, 67, 29, 0.4);
        z-index: 0 !important; /* Hinter dem Content */
    }

    .stepButton {
        width: 90%;
        height: 35px;
        min-height: 30px;
        font-size: 0.8em;
    }

    /* LEVEL-UP: gleiche Verkleinerung wie Desktop (anteilig) */
    .level-up-mode-badge {
        width: 100%;
        max-width: 90%;
        align-self: center;
        height: 30px;
        min-height: 26px;
        max-height: 30px;
        padding: 4px 2px;
        margin: 2px auto;
        font-size: 0.8em;
    }

    /* LEVEL-UP: Innenfläche (wie Desktop deckend) */
    .level-up-mode-badge-inner {
        background-color: rgba(58, 58, 65, 1);
    }

    /* 4. Listen-Layout für Mobile (Spezies, Klassen etc.) */
    #speciesList, #classList, #backgroundList {
        grid-template-columns: 1fr; /* Einspaltig auf dem Handy */
        padding: 0 10px;
    }
}

/* --- FEEDBACK: GOLDENER SPEICHER-GLOW --- */
.save-glow-active {
    animation: goldFlash 0.6s ease-out;
}

@keyframes goldFlash {
    0% { box-shadow: 0 0 0px #d4a017; border-color: #7a431d; }
    50% { box-shadow: 0 0 25px #fce181; border-color: #fce181; }
    100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); border-color: #7a431d; }
}

@media screen and (max-width: 600px) {
    /* Verhindert das Scrollen der Seite, wenn man ein Attribut anfasst */
    .draggable-value {
        touch-action: none; 
        user-select: none;
    }
}


/* =======================================================================
   MOBILE ONBOARDING MASK
   ======================================================================= */

#swipeOnboarding {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25vh; /* Unteres Viertel */
    z-index: 9999;
    pointer-events: none; /* Klicks gehen durch zum Body-Listener */
    background-color: rgba(0, 0, 0, 0.2); /* Hauchdünne Abdunklung */
}

.onboarding-divider {
    width: 100%;
    /* Von 2px auf 4px erhöht für bessere Sichtbarkeit */
    border-top: 3px dashed rgba(212, 160, 23, 0.9); 
    margin-bottom: 10px;
}

.onboarding-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 50px;
    box-sizing: border-box;
    color: rgba(212, 160, 23, 0.8); /* Dein Goldton, leicht transparent */
    font-family: 'Garamond', serif;
}

.arrow-wrapper {
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 0.8rem;
}

.arrow-wrapper span {
    font-size: 0.9rem; /* Text etwas größer */
    font-weight: bold;
    text-transform: uppercase;
    max-width: 90%; /* Verhindert Überlappung in der Mitte */
}

.onboarding-arrow {
    /* Größer und fetter */
    font-size: 3rem; 
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2px;
    /* Ein leichter Schein nach außen macht sie "breiter" */
    text-shadow: 0 0 10px rgba(212, 160, 23, 0.5);
}

.onboarding-footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    left: 0;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* --- ANIMATIONEN --- */
@keyframes bounceToRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); } /* Drückt nach innen */
}

/* Animation für den "Weiter"-Pfeil (rechts, bounct nach links) */
@keyframes bounceToLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-15px); } /* Drückt nach innen */
}

.bounce-right { animation: bounceToRight 1.5s infinite ease-in-out; }
.bounce-left { animation: bounceToLeft 1.5s infinite ease-in-out; }


/* =======================================================================
   MOBILE - Schritt 3: Lineage-Dropdown
   ======================================================================= */

@media screen and (max-width: 600px) {
    /* 1. Die gesamte Lineage-Box im MainContent zentrieren */
    .lineage-details {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin: 20px auto !important;
        
        /* Standard-Breite für Mobile-Sektionen */
        width: 100% !important; 
        box-sizing: border-box !important;

        /* DEIN STANDARD-DESIGN FÜR SEKTIONEN */
        background-color: rgba(58, 58, 65, 0.85) !important;
        border: 2px solid #d4a017 !important;
        border-radius: 10px !important;
        padding: 15px !important;
        
        /* Schein/Glow explizit entfernen */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0) !important; 
        display: none; /* Wird weiterhin über JS (block) gesteuert */
    }

    /* Zentrierung von Label und Dropdown beibehalten */
    .lineage-details div[style*="text-align: left"] {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #spellAbility {
        margin: 10px auto !important;
        width: 200px !important;
        max-width: 100% !important;
    }

    /* 4. Das Label über dem Dropdown */
    .lineage-details label {
        text-align: center !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
}


/* =======================================================================
   MOBILE - Schritt 4: Attribrute & Drag and Drop
   ======================================================================= */

@media screen and (max-width: 600px) {
    /* 1. Methodenwahl & Labels komplett weg */
    #attributeMethodSelection, 
    #distributionMethodsLabel,
    .attribute-label-live { 
        display: none !important; 
    }

    /* 2. RADIKALER CLEANUP der Reihen */
    /* Wir verstecken: 
       - Die 2. Box (Total Score)
       - Das 3. Element (Das "=" Zeichen)
       - Die 5. Box (Der ursprüngliche Background-Bonus Bereich)
    */
    .attribute-row .interactive-elements > .attribute-component:nth-child(2),
    .attribute-row .interactive-elements > .formula-symbol,
    .attribute-row .interactive-elements > .attribute-component:nth-child(5) {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
    }

    /* Platzoptimierung für die verbleibenden 2 Boxen + Stepper */
    .interactive-elements {
        width: 100% !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    /* 3. Der goldene Bonus-Kreis (Badge) */
    .attribute-component {
        position: relative;
    }

    .mobile-background-bonus {
        position: absolute;
        top: -8px; 
        right: -5px; 
        background-color: #d4a017; 
        color: #1b1b1f; 
        border-radius: 50%;
        width: 24px; /* Etwas breiter für "+1" */
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: bold;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        border: 2px solid #fce181;
        z-index: 10;
    }

    /* 4. Symmetrische Stepper-Pfeile */
    .mobile-stepper-ui {
        display: none;
        flex-direction: column;
        justify-content: center;
        margin-left: 10px;
    }

    .active-stepper {
        display: flex !important;
    }

    .stepper-btn {
        background-color: #2e2e33;
        color: #e8d8b5;
        border: 1px solid #8b5e34;
        width: 45px;
        height: 25px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stepper-btn:first-child { border-radius: 4px 4px 0 0; border-bottom: none; }
    .stepper-btn:last-child { border-radius: 0 0 4px 4px; }
}


/* =======================================================================
   MOBILE/TABLET - Schritt 5: Stufen-Stepper (≤1000px)
   Design = identisch zu Schritt-4-.stepper-btn; Position absolut rechts
   vom Input, damit das zentrierte Feld nicht verrutscht.
   ======================================================================= */

@media screen and (max-width: 1000px) {
    #step5 .mobile-stepper-ui {
        display: none;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 10px;
        z-index: 5;
    }

    #step5 .mobile-stepper-ui.active-stepper {
        display: flex !important;
    }

    /* Gleiche effektive Farben wie Schritt 4 (dort gewinnt button[type=button]: #8b5e34) */
    #step5 .stepper-btn {
        background-color: #8b5e34;
        color: #e8d8b5;
        border: none;
        width: 45px;
        height: 25px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
    }

    #step5 .stepper-btn:hover {
        background-color: #a36a42;
    }

    #step5 .stepper-btn:first-child { border-radius: 4px 4px 0 0; }
    #step5 .stepper-btn:last-child { border-radius: 0 0 4px 4px; }
}


/* =======================================================================
   MOBILE - Schritt 7: Zuaberliste
   ======================================================================= */

@media screen and (max-width: 600px) {

    /* 1. Zauberliste von 2 Spalten auf 1 Spalte umstellen */
    ul.master-spell-ul {
        grid-template-columns: 1fr !important; 
        gap: 8px 0 !important; /* Mehr vertikaler Abstand zwischen den Zaubern */
    }

    /* 2. Die einzelnen Listeneinträge für Daumen-Bedienung optimieren */
    ul.master-spell-ul li {
        padding: 10px 5px !important; /* Größere Klickfläche */
        border-bottom: 1px solid rgba(232, 216, 181, 0.1); /* Hauchdünne Trennlinie */
    }

    /* 3. Platz für den Namen maximieren */
    .spell-marker-container {
        width: 65px !important; /* Etwas schmaler, um links Platz zu sparen */
        gap: 2px !important;
    }

    .spell-name {
        font-size: 0.95rem;
        white-space: normal; /* Erlaubt Zeilenumbruch bei sehr langen Zaubernamen */
    }

    /* 4. Den Sektions-Container (Vorbereitet, Zauberbuch etc.) anpassen */
    .spell-section-container {
        padding: 10px !important;
        margin-bottom: 15px !important;
    }
}


/* =======================================================================
   MOBILE - Schritt 8: Ausrüstungen
   ======================================================================= */

@media screen and (max-width: 600px) {
    /* --- 1. Sektion 1: Labels auf Anfangsbuchstaben kürzen --- */
    #classLabel, #backgroundLabel {
        font-size: 0 !important; /* Versteckt den Originaltext */
        width: 40px !important;
        text-align: center;
    }
    #classLabel::before { content: attr(data-short); font-size: 1rem; color: #d4a017; font-weight: bold; }
    #backgroundLabel::before { content: attr(data-short); font-size: 1rem; color: #d4a017; font-weight: bold; }

    /* --- 2. Sektion 2: Geldbörse (Purse) vertikal stapeln --- */
    #purseInputs {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .coin-column {
        flex-direction: row !important; /* Label und Input nebeneinander */
        justify-content: space-between;
        width: 100%;
        max-width: 180px; /* Kompakte Breite */
        border-bottom: 1px solid rgba(212, 160, 23, 0.2);
        padding-bottom: 5px;
    }
    .coin-column label { margin-bottom: 0 !important; }

    /* --- 3. Sektion 3: Ausrüstungstabellen (Spalten-Logik) --- */
    
    /* A: Generell alle Spalten außer 1 (Menge) und 2 (Name) verstecken */
    .item-table th:nth-child(n+3), 
    .item-table td:nth-child(n+3) {
        display: none !important;
    }

    /* B: Bei Tools und Gear die Spalte 4 (Variante) wieder einblenden */
    #toolsTable th:nth-child(4), #toolsTable td:nth-child(4),
    #gearTable th:nth-child(4), #gearTable td:nth-child(4) {
        display: table-cell !important;
    }

    /* Tabellen-Layout optimieren */
    .item-table {
        font-size: 0.8rem !important;
        table-layout: auto;
    }
    .item-table td {
        padding: 5px 2px !important;
    }

    /* Versteckt die "Keine"-Zelle am Ende der Zeilen in Sektion 1 */
    #classEquipmentRow td:last-child,
    #backgroundEquipmentRow td:last-child {
        display: none !important;
    }

    /* Damit das Layout bündig bleibt, passen wir die Tabellenbreite an */
    #equipmentOptionsTable {
        width: 100%;
    }
}

/* =======================================================================
   MOBILE - Schritt 10: Alignment (Präzise Matrix)
   ======================================================================= */

@media screen and (max-width: 600px) {
    /* --- Trait-Pool ausblenden --- */
    .personality-divider,
    .trait-table-controls,
    #traitPoolGrid {
        display: none !important;
    }

    #personalityEditor {
        min-height: 250px !important;
    }

    /* --- Alignment Matrix (Exakt angrenzend) --- */
    .alignment-matrix {
        display: grid !important;
        /* Wir nutzen 3x 75px ohne Gap für direktes Angrenzen */
        grid-template-columns: repeat(3, 80px) !important;
        grid-template-rows: repeat(3, 80px) !important;
        gap: 0 !important; /* Kein Abstand, damit sie sich berühren */
        margin: 30px auto !important;
        justify-content: center !important; /* Zentriert die Matrix auf dem Screen */
        width: fit-content !important;
    }

    .alignment-circle-item {
        width: 80px !important;
        height: 80px !important;
        margin: 0 !important; /* Verhindert Überlappung durch Rest-Margins */
        font-size: 0.65rem !important;
        padding: 4px !important;
        line-height: 1.1 !important;
        box-sizing: border-box !important; /* Wichtig, damit Padding nicht die Größe sprengt */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border: 1px solid rgba(212, 160, 23, 0.3) !important; /* Dezente Trennung */
    }
}


/* =======================================================================
   MOBILE - Schritt 11: Appearance (Horizontal kompakt & bündig)
   ======================================================================= */

@media screen and (max-width: 600px) {
    /* 1. Das Raster für Schritt 11: 110px für die rechte Eingabe-Zone */
    #step11 .appearance-grid {
	padding: 0px;
    }

    #step11 .appearance-row {
        display: grid !important;
        grid-template-columns: 1fr 110px !important; 
        /* gap: 10px !important; */
        align-items: center !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    /* 2. Inputs: Horizontal kurz & Vertikal flach */
    #step11 input[type="text"], 
    #step11 input[type="number"],
    #step11 .app-small-input,
    #step11 #selectGender.dropdown {
        width: 80px !important;  /* Schön kurz */
        height: 28px !important; /* Schön flach */
        font-size: 14px !important;
        padding: 2px 5px !important;
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* 3. Bereich mit Einheiten (Alter & Größe) */
    #step11 .input-with-unit {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 110px !important;
    }

    /* Der Zahlen-Input innerhalb der Einheiten-Zeile noch etwas kürzer */
    #step11 .input-with-unit input {
        width: 55px !important; 
        flex: 0 0 55px !important;
        height: 28px !important;
    }

    /* 4. Die Einheiten-Kürzel */
    #step11 #yearsLabel {
        font-size: 0 !important; /* Versteckt Originaltext */
        margin-left: 3px !important;
	width: 10px;
        display: inline-block;
    }
    #step11 #yearsLabel::before {
        font-size: 0.85rem !important;
        color: #e8d8b5;
    }

    /* Deutsche Version: j. */
    body[data-lang="de"] #step11 #yearsLabel::before {
    content: "J." !important;
    }

    /* Englische Version: y. */
    body[data-lang="en"] #step11 #yearsLabel::before {
    content: "y." !important;
    }

    #step11 #unitIndicator {
        font-size: 0.8rem !important;
        margin-left: 3px !important;
    }

    #step11 #selectGender {
        width: 80px !important;
        height: 28px !important;
        font-size: 14px !important;
        padding: 0 5px !important; /* Vertikales Padding auf 0, da Höhe fix ist */
        margin: 0 !important;
        background-color: #2e2e33 !important;
        border: 1px solid #8b5e34 !important;
        color: #e8d8b5 !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        
        /* Sorgt dafür, dass der Text im Dropdown vertikal mittig sitzt */
        line-height: 26px !important; 
    }
}

/* =======================================================================
   MOBILE - Schritt 12: Naming
   ======================================================================= */

@media screen and (max-width: 600px) {

    /* --- Schritt 12: Name kompakter --- */
    #characterNameInput.name-inner-textarea {
        font-size: 1.1rem !important; /* Deutlich kleiner als die 1.5em vom Desktop */
        padding: 10px 5px 5px 5px !important;
        height: 45px !important;
        text-align: center;
    }

   /* Den Platzhalter (Placeholder) exakt an die Schriftgröße anpassen */
    #characterNameInput::placeholder {
        font-size: 1.1rem !important;
        line-height: normal !important;
        /* Optional: Ein bisschen Transparenz, damit er sich vom echten Text abhebt */
        opacity: 0.5; 
    }

    /* 2. Webkit (Safari, Chrome auf iOS, ältere Android-Browser) */
    #characterNameInput::-webkit-input-placeholder {
    font-size: 1.1rem !important;
    opacity: 0.5 !important;
    text-align: center !important;
    }

    /* --- Summary Grid: Rein funktionale Ausrichtung --- */
    #step12 .appearance-grid {
    padding: 5px;
    }

    #step12 .appearance-row {
        display: grid !important;
        /* Wir geben der linken Spalte eine feste Breite, 
           dadurch starten alle Werte rechts exakt an der gleichen Linie */
        grid-template-columns: 105px 1fr !important; 
        gap: 20px !important;
        align-items: flex-start !important;
        text-align: left !important;
        
        /* Entfernt alle Linien oder Abstände aus meinem vorherigen Vorschlag */
        border: none !important;
        padding: 0 !important;
        margin-bottom: 5px !important;
    }

    #step12 .appearance-label {
        /* Keine Farbänderung - nutzt globale Stile */
        word-wrap: break-word;
    }

    #step12 .appearance-value {
        /* Keine Farbänderung - nutzt globale Stile */
        text-align: left !important; 
    }

}

/* =======================================================================
   Custom Class Builder Modal
   ======================================================================= */

/* Custom-Inhalt-Marker (⊕) rechts neben der Bezeichnung */
.custom-content-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    margin-left: 0.4em;
    flex-shrink: 0;
    color: #e8d8b5;
    vertical-align: middle;
    line-height: 1;
    font-size: 1.05em;
    font-weight: normal;
}

.custom-content-marker[hidden] {
    display: none !important;
}

#customClassListItem,
#customBackgroundListItem {
    flex-wrap: nowrap;
}

.cc-custom-subclass-option {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.15em;
}

.spell-name .custom-content-marker,
.info-spell-name .custom-content-marker {
    margin-left: 0.3em;
    width: 1.05em;
    height: 1.05em;
    font-size: 0.95em;
}

.add-custom-class-item {
    display: none !important;
    align-items: center;
    justify-content: flex-start;
}

/* „+“ ab Standard-/mittelgroßen Tablets (768px+) UND Feature-Flag (cc-feature-enabled).
   Smartphones darunter bleiben ausgeblendet. */
@media screen and (min-width: 768px) {
    #addCustomClassListItem.add-custom-class-item.cc-feature-enabled {
        display: flex !important;
    }
}

.add-custom-class-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e8d8b5;
    background: transparent;
    color: #e8d8b5;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-custom-class-btn:hover {
    background: rgba(232, 216, 181, 0.15);
}

/* Custom Subclass „+“ unter der Unterklassen-Liste (Schritt 6) */
.add-custom-subclass-wrap {
    display: none !important;
    margin-top: 10px;
    align-items: center;
    justify-content: flex-start;
}

/* Custom Subclass „+“: gleiche Breakpoints wie Class-Builder (ab mittelgroßen Tablets) */
@media screen and (min-width: 768px) {
    #addCustomSubclassWrap.add-custom-subclass-wrap.cc-feature-enabled {
        display: flex !important;
    }
}

.add-custom-subclass-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e8d8b5;
    background: transparent;
    color: #e8d8b5;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-custom-subclass-btn:hover {
    background: rgba(232, 216, 181, 0.15);
}

/* Custom Background „+“ in der Hintergrund-Liste (Schritt 2).
   Gleicher Breakpoint wie Class/Subclass: ab 768px + Feature-Flag; darunter ausgeblendet. */
.add-custom-background-item {
    display: none !important;
    align-items: center;
    justify-content: flex-start;
}

@media screen and (min-width: 768px) {
    #addCustomBackgroundListItem.add-custom-background-item.cc-feature-enabled {
        display: flex !important;
    }
}

.add-custom-background-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e8d8b5;
    background: transparent;
    color: #e8d8b5;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-custom-background-btn:hover {
    background: rgba(232, 216, 181, 0.15);
}

/* Custom Species „+“ in der Völker-Liste (Schritt 3). */
.add-custom-species-item {
    display: none !important;
    align-items: center;
    justify-content: flex-start;
}

@media screen and (min-width: 768px) {
    #addCustomSpeciesListItem.add-custom-species-item.cc-feature-enabled {
        display: flex !important;
    }
}

.add-custom-species-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e8d8b5;
    background: transparent;
    color: #e8d8b5;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-custom-species-btn:hover {
    background: rgba(232, 216, 181, 0.15);
}

#customSpeciesTab1Content > .custom-class-field.cspc-phys-oversection {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

#customSpeciesTab1Content .custom-class-lang-block > .custom-class-field:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

#customSpeciesTab1Content .custom-class-field > .custom-class-field:last-child,
#customSpeciesTab1Content .custom-class-lang-block > .custom-class-field:last-child {
    margin-bottom: 0;
}

#customSpeciesTab1Content .cspc-phys-oversection .custom-class-lang-block > .custom-class-field {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#customSpeciesTab1Content .cspc-phys-oversection .custom-class-lang-block .custom-class-section-title {
    text-align: center;
    width: 100%;
}

.cspc-size-range-row,
.cspc-speed-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#customSpeciesTab1Content .cspc-speed-row input[type="number"],
#customSpeciesTab1Content .cspc-size-range-row input[type="number"],
#customSpeciesTab1Content .cspc-age-input {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px;
    height: 38px;
    margin: 0;
    flex: 0 0 90px;
    box-sizing: border-box;
}

.cspc-inline-label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-weight: normal;
    white-space: nowrap;
}

.cspc-unit {
    display: inline-flex;
    align-items: center;
    height: 38px;
    margin: 0;
    line-height: 1;
    opacity: 0.8;
    font-size: 0.9em;
    white-space: nowrap;
}

.cspc-origin-hint {
    margin-top: 8px;
    font-size: 0.92em;
    line-height: 1.45;
    color: #e8d8b5;
    opacity: 0.9;
}

.cspc-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.cspc-tree-root {
    border: 1px solid rgba(232, 216, 181, 0.45);
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: bold;
    color: #d4a017;
    background: rgba(27, 27, 31, 0.6);
}

.cspc-tree-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

.cspc-tree-head .cspc-tree-controls {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}

.cspc-tree-trunk {
    width: 2px;
    height: 22px;
    background: rgba(212, 160, 23, 0.7);
}

.cspc-tree-bar {
    width: min(100%, 640px);
    height: 2px;
    background: rgba(212, 160, 23, 0.7);
    margin-bottom: 0;
}

.cspc-tree-branches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
}

.cspc-tree-branch {
    flex: 1 1 220px;
    max-width: 280px;
    border: 1px solid rgba(232, 216, 181, 0.3);
    border-radius: 6px;
    padding: 10px;
    background: rgba(27, 27, 31, 0.45);
    position: relative;
}

#customSpeciesTab2Content .cspc-tree {
    width: 100%;
}

/* Volksname → Bezeichnung (Abstammung): längerer Stamm + mehr Abstand */
#customSpeciesTab2Content .cspc-tree-trunk--to-ancestry-group {
    height: 36px;
}

#customSpeciesTab2Content .cspc-ancestry-group-wrap {
    width: min(100%, 280px);
    margin: 0 auto;
}

#customSpeciesTab2Content .cspc-ancestry-group-field {
    margin: 0;
    padding: 0;
    border: none;
}

#customSpeciesTab2Content .cspc-ancestry-group-field > label {
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 4px;
}

#customSpeciesTab2Content .cspc-ancestry-group-field .char-counter {
    margin-top: 2px;
}

/* Globaler 5vh-Abstand unter Inputs (wie bei Branch-Bezeichnung) entfernen */
#customSpeciesTab2Content .cspc-ancestry-group-field input[type="text"],
#customSpeciesTab2Content .cspc-ancestry-group-field .custom-class-name-input {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    font-size: inherit !important;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

#customSpeciesTab2Content .cspc-tree-bar {
    width: 100%;
    max-width: none;
}

#customSpeciesTab2Content .cspc-tree-branches {
    gap: 8px;
}

#customSpeciesTab2Content .cspc-tree-branch {
    flex: 1 1 160px;
    min-width: 150px;
    max-width: 200px;
    padding: 8px;
}

#customSpeciesTab2Content .cspc-tree-branch .custom-class-name-input {
    max-width: none;
}

#customSpeciesTab2Content .cspc-tree-branch .custom-class-field.cspc-compact-field {
    margin-bottom: 6px;
}

#customSpeciesTab2Content .cspc-tree-branch .custom-class-field.cspc-compact-field:last-child {
    margin-bottom: 0;
}

#customSpeciesTab2Content .cspc-tree-branch .cspc-compact-field > label {
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 4px;
}

#customSpeciesTab2Content .cspc-tree-branch .cspc-compact-field .char-counter {
    margin-top: 2px;
}

#customSpeciesTab2Content .cspc-tree-branch textarea {
    min-height: 44px !important;
}

.cspc-compact-lang-block {
    padding: 6px 8px;
    margin-bottom: 4px;
}

.cspc-compact-lang-block:last-child {
    margin-bottom: 0;
}

.cspc-compact-lang-block .custom-class-lang-header {
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.cspc-localized-field-label {
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 4px;
}

.cspc-origin-lang-hint {
    margin: 6px 0 0;
    font-size: 0.78rem;
    text-align: center;
    opacity: 0.85;
}

#customSpeciesTab2Content .cspc-localized-field.cspc-ancestry-group-field,
#customSpeciesTab2Content .cspc-tree-branch .cspc-localized-field.cspc-compact-field {
    margin-bottom: 6px;
}

#customSpeciesTab2Content .cspc-localized-field.cspc-ancestry-group-field:last-child,
#customSpeciesTab2Content .cspc-tree-branch .cspc-localized-field.cspc-compact-field:last-child {
    margin-bottom: 0;
}

#customSpeciesTab2Content .cspc-ancestry-group-field .cspc-compact-lang-block input[type="text"],
#customSpeciesTab2Content .cspc-ancestry-group-field .cspc-compact-lang-block .custom-class-name-input,
#customSpeciesTab2Content .cspc-tree-branch .cspc-compact-lang-block input[type="text"],
#customSpeciesTab2Content .cspc-tree-branch .cspc-compact-lang-block .custom-class-name-input {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    font-size: inherit !important;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

#customSpeciesTab2Content .cspc-tree-branch .cspc-compact-lang-block textarea,
#customSpeciesTab3Content .cspc-tree-branch .cspc-compact-lang-block textarea {
    min-height: 44px !important;
    width: 100%;
    box-sizing: border-box;
}

#customSpeciesTab3Content .cspc-localized-field {
    margin-bottom: 8px;
}

#customSpeciesTab3Content .cspc-localized-field:last-of-type {
    margin-bottom: 0;
}

#customSpeciesTab2Content .cspc-tree-branch textarea {
    height: 44px;
    margin: 0 !important;
    padding: 4px 8px !important;
    font-size: inherit !important;
    resize: vertical;
}

.cspc-tree-branch .custom-class-field {
    margin-bottom: 10px;
}

.cspc-tree-branch .custom-class-field + .custom-class-field {
    border-top: 1px solid rgba(232, 216, 181, 0.35);
    padding-top: 10px;
    margin-top: 0;
}

/* Bezeichnung: gleiche Höhe wie Tab-1-Name; 5vh-Globalmargin zum Zähler entfernen */
#customSpeciesTab2Content .cspc-tree-branch input[type="text"],
#customSpeciesTab3Content .cspc-tree-branch input[type="text"] {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    font-size: inherit !important;
}

.cspc-tree-branch::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 2px;
    height: 12px;
    background: rgba(212, 160, 23, 0.7);
}

/* Erblinie: Stammbaum-Schiene links, Äste einklappbar */
#customSpeciesTab3Content .cspc-tree--lineage {
    --cspc-lin-box-width: 60%;
    --cspc-lin-rail-gap: 14px;
    align-items: center;
    width: 100%;
    position: relative;
    padding-left: 0;
    box-sizing: border-box;
}

#customSpeciesTab3Content .cspc-tree--lineage::before {
    content: "";
    position: absolute;
    left: calc((100% - var(--cspc-lin-box-width)) / 2 - var(--cspc-lin-rail-gap));
    top: 16px;
    bottom: 8px;
    width: 2px;
    background: rgba(212, 160, 23, 0.7);
}

#customSpeciesTab3Content .cspc-tree--lineage .cspc-tree-head {
    justify-content: flex-start;
}

#customSpeciesTab3Content .cspc-tree--lineage .cspc-tree-root {
    align-self: flex-start;
    position: relative;
    width: auto;
    max-width: var(--cspc-lin-box-width);
    box-sizing: border-box;
    margin-left: calc((100% - var(--cspc-lin-box-width)) / 2);
}

#customSpeciesTab3Content .cspc-tree--lineage .cspc-tree-root::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--cspc-lin-rail-gap));
    top: 50%;
    width: var(--cspc-lin-rail-gap);
    height: 2px;
    background: rgba(212, 160, 23, 0.7);
}

#customSpeciesTab3Content .cspc-tree--lineage .cspc-tree-branches {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
}

#customSpeciesTab3Content .cspc-tree--lineage .cspc-tree-branch {
    flex: 0 0 auto;
    width: var(--cspc-lin-box-width);
    max-width: var(--cspc-lin-box-width);
    min-width: 0;
    padding: 0;
    background: #1a1a1a;
    overflow: visible;
}

#customSpeciesTab3Content .cspc-tree--lineage .cspc-tree-branch::before {
    top: 22px;
    left: calc(-1 * var(--cspc-lin-rail-gap));
    width: var(--cspc-lin-rail-gap);
    height: 2px;
}

#customSpeciesTab3Content .cspc-tree--lineage .cc-sc-box-header {
    border-radius: 5px 5px 0 0;
}

#customSpeciesTab3Content .cspc-tree--lineage .cc-sc-box--collapsed .cc-sc-box-header,
#customSpeciesTab3Content .cspc-tree--lineage .is-collapsed .cc-sc-box-header {
    border-radius: 5px;
}

#customSpeciesTab3Content .cspc-tree--lineage .cc-sc-box-body > .custom-class-field:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

#customSpeciesTab3Content .cspc-tree--lineage .cc-sc-box-body > .custom-class-field:last-child {
    margin-bottom: 0;
}

.cspc-tree-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}

.cspc-tree-controls button {
    min-width: 36px;
}

.cspc-origin-radios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 18px;
    width: 100%;
    margin: 8px 0;
}

.cspc-size-checks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 16px;
    margin: 6px 0 10px;
}

#customSpeciesTab1Content .cspc-avg-size-title {
    margin-top: 4px;
}

#customSpeciesTab1Content .cspc-phys-oversection .cspc-origin-hint {
    text-align: center;
}

#customSpeciesTab1Content .cc-lf-table.cspc-lf-table {
    min-width: 920px;
}

#customSpeciesTab1Content .cc-lf-header.cspc-lf-header,
#customSpeciesTab1Content .cc-lf-row.cspc-lf-row {
    grid-template-columns: 64px minmax(110px, 1.1fr) minmax(120px, 1.2fr) minmax(140px, 1.4fr) minmax(140px, 1.4fr) 118px 84px;
}

#customSpeciesTab3Content .cc-lf-table.cspc-lin-lf-table {
    min-width: 360px;
}

#customSpeciesTab3Content .cc-lf-header.cspc-lin-lf-header,
#customSpeciesTab3Content .cc-lf-row.cspc-lin-lf-row {
    grid-template-columns: 72px minmax(90px, 0.84fr) minmax(165px, 1.56fr);
}

#customSpeciesTab3Content .cspc-lin-lf-row > .cc-lf-cell--spell-options {
    display: flex;
    text-align: left;
}

#customSpeciesTab3Content .cspc-lin-lf-row > .cc-lf-cell--spell-options-idle,
#customSpeciesTab3Content .cspc-lin-lf-row > .cc-lf-cell--spell-options-empty {
    justify-content: center;
    align-items: center;
}

#customSpeciesTab3Content .cspc-lin-lf-row > .cc-lf-cell--spell-options-filled {
    justify-content: flex-start;
    align-items: flex-start;
}

#customSpeciesTab3Content .cspc-lin-spell-gear-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(232, 216, 181, 0.35);
    line-height: 1;
    pointer-events: none;
}

#customSpeciesTab3Content .cspc-lin-spell-gear-placeholder .cc-lf-gear-icon {
    font-size: 0.95rem;
}

#customSpeciesTab3Content .cspc-lin-lf-row .cc-lf-chip-btn--spell-name {
    box-sizing: border-box;
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0;
}

/* Leer: kompakter Button, Zahnrad, zentriert in der Zelle (+10 % Höhe, +15 % Breite) */
#customSpeciesTab3Content .cspc-lin-lf-row .cc-lf-chip-btn--spell-empty {
    width: auto;
    max-width: none;
    min-width: 36px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding: 0 10px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#customSpeciesTab3Content .cspc-lin-lf-row .cc-lf-chip-btn--spell-empty .cc-lf-gear-icon {
    line-height: 1;
    font-size: 0.94rem;
}

/* Belegt: Breite/Höhe am Inhalt, Umbruch erst an Spaltenkante */
#customSpeciesTab3Content .cspc-lin-lf-row .cc-lf-chip-btn--spell-filled {
    width: fit-content;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 5px 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

/* Gleiche Boxhöhe wie .cc-lf-select in der Zeile; globale number-Margins (5vh) aushebeln. */
#customSpeciesOverlay .cspc-lf-row .cc-lf-select,
#customSpeciesOverlay .cspc-lin-lf-row .cc-lf-select,
#customSpeciesOverlay input[type="number"].cspc-level-input {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

#customSpeciesOverlay input[type="number"].cspc-level-input {
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px !important;
    text-align: center;
    align-self: center;
}

#customSpeciesTab1Content .cspc-lf-row > .cc-lf-cell:first-child,
#customSpeciesTab3Content .cspc-lin-lf-row > .cc-lf-cell:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cspc-desc-optional textarea:focus,
.cspc-desc-optional input:focus {
    opacity: 1;
}

.cspc-predef-select {
    min-width: 140px;
}

.cspc-lineage-spell-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

/* Custom Spell „+“ in Schritt 7 (zwischen Boxen und Masterliste).
   Kein Extra-Margin: Abstände der bestehenden Schritt-7-Layout belassen.
   Gleicher Breakpoint wie Class/Subclass/Background: ab 768px + Feature-Flag. */
.add-custom-spell-wrap {
    display: none !important;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    line-height: 0;
}

@media screen and (min-width: 768px) {
    #addCustomSpellWrap.add-custom-spell-wrap.cc-feature-enabled {
        display: flex !important;
    }

    /* Button-Höhe (~28px) vom Masterlisten-Abstand abziehen, Layout-Gap bleibt ≈ gleich */
    #spellList:has(#addCustomSpellWrap.cc-feature-enabled) #master-spell-list {
        margin-top: 0;
    }
}

.add-custom-spell-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e8d8b5;
    background: transparent;
    color: #e8d8b5;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-custom-spell-btn:hover {
    background: rgba(232, 216, 181, 0.15);
}

/* Custom Feat „+“ unten links in Verbesserungen und Talente (Schritt 6) */
.add-custom-feat-wrap {
    display: none !important;
    margin-top: 14px;
    align-items: center;
    justify-content: flex-start;
}

@media screen and (min-width: 768px) {
    #addCustomFeatWrap.add-custom-feat-wrap.cc-feature-enabled {
        display: flex !important;
    }
}

.add-custom-feat-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e8d8b5;
    background: transparent;
    color: #e8d8b5;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-custom-feat-btn:hover {
    background: rgba(232, 216, 181, 0.15);
}

.cff-pack-banner {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    opacity: 0.9;
    text-align: center;
}

.cff-overview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
}

.cff-pack-counter {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.cff-prereq-grid,
.cff-attr-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin: 0.35rem 0 0.65rem;
}

#customFeatTab2Content .cff-section-title--prereq {
    color: #a65d5d;
}

#customFeatTab2Content .cff-section-title--benefit {
    color: #5d8a5d;
}

/* Mehrfachauswahl: Checkbox + Label vertikal zentriert */
#customFeatTab2Content label.cff-inline-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    cursor: pointer;
    line-height: 1.2;
}

#customFeatTab2Content label.cff-inline-check-label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

#customFeatTab2Content .cc-lf-table {
    min-width: 520px;
}

#customFeatTab2Content .cc-lf-header,
#customFeatTab2Content .cc-lf-row {
    grid-template-columns: minmax(94px, 1.02fr) minmax(120px, 1.3fr) 136px 84px;
}

#customFeatTab2Content .custom-class-field input[type="number"] {
    max-width: 120px;
    margin-bottom: 0 !important;
}

/* Stufen-Input: globalen 5vh-Abstand zur Box-Unterlinie entfernen */
#customFeatTab2Content #cffPrereqLevel {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}

/* Grenzwert: gleiche Maße aktiv (number) und entwertet („-“, text) */
#customFeatTab2Content #cffPrereqAttrValue,
#customFeatTab2Content input.cff-prereq-attr-value {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    padding: 8px !important;
    line-height: 20px !important;
    font-size: inherit !important;
    text-align: center !important;
}

#customFeatTab2Content #cffCategory,
#customFeatTab2Content .cff-category-select {
    width: 40% !important;
    max-width: 40%;
}

/* Abstand zwischen DE/EN-Blöcken behalten; nur letzter Block ohne Extra-Margin */
#customFeatTab2Content .custom-class-field > .custom-class-lang-block:last-child {
    margin-bottom: 0;
}

#customFeatTab2Content .custom-class-lang-block > .custom-class-field:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

#customFeatTab2Content .custom-class-field > .custom-class-field:last-child {
    margin-bottom: 0;
}

#customFeatTab2Content > .custom-class-field.cff-benefit-oversection {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.cff-tab2-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 1rem;
}

#customFeatEditorView.cff-tab2-active .custom-class-footer {
    display: none;
}

.csp-pack-counter {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.csp-overview-filters {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.65rem;
}

.csp-overview-counter,
.csp-overview-add {
    position: absolute;
    bottom: 0;
    height: 36px;
    display: flex;
    align-items: center;
}

.csp-overview-counter {
    left: 0;
}

.csp-overview-add {
    right: 0;
}

.csp-overview-filter {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 0 1 9rem;
    min-width: 0;
    max-width: 10rem;
    gap: 4px;
    color: #e8d8b5;
    font-size: 0.85rem;
}

.csp-overview-filter-label {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    gap: 6px;
    font-weight: bold;
    line-height: 1.25rem;
}

#customSpellTab1Content .csp-overview-filter select,
#customSpellTab1Content .csp-overview-filter select.dropdown,
#customFeatTab1Content .csp-overview-filter select,
#customFeatTab1Content .csp-overview-filter select.dropdown {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    font-size: 16px !important;
    line-height: 34px !important;
    box-sizing: border-box !important;
}

.csp-overview-filter--search {
    flex: 2 1 12rem;
    max-width: 20rem;
}

.csp-overview-search-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 36px;
}

.csp-overview-search-icon {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.95rem;
    height: 0.95rem;
    color: #e8d8b5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.csp-overview-search-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

#customSpellTab1Content .csp-overview-search-input,
#customSpellTab1Content input.csp-overview-search-input[type="text"],
#customFeatTab1Content .csp-overview-search-input,
#customFeatTab1Content input.csp-overview-search-input[type="text"] {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 8px 0 1.85rem !important;
    font-size: 16px !important;
    line-height: 34px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    background-color: #2e2e33 !important;
    border: 1px solid #8b5e34 !important;
    color: #e8d8b5;
    border-radius: 5px;
}

#customSpellTab1Content .csp-overview-search-input:focus,
#customSpellTab1Content input.csp-overview-search-input[type="text"]:focus,
#customFeatTab1Content .csp-overview-search-input:focus,
#customFeatTab1Content input.csp-overview-search-input[type="text"]:focus {
    outline: none;
    border-color: #8b5e34;
    box-shadow: none;
}

.csp-add-spell-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.csp-overview-scroll {
    overflow-x: auto;
    max-height: min(55vh, 520px);
    overflow-y: auto;
}

.csp-overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.csp-overview-table th,
.csp-overview-table td {
    border-bottom: 1px solid rgba(232, 216, 181, 0.25);
    padding: 0.35rem 0.4rem;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.csp-overview-table th {
    color: #e8d8b5;
    font-weight: 600;
    position: sticky;
    top: 0;
    background: #2f2f35;
    z-index: 1;
}

.csp-overview-table .csp-col-num {
    width: 2.25rem;
    text-align: left;
    color: rgba(232, 216, 181, 0.85);
}

.csp-overview-table .csp-col-level {
    text-align: center;
}

.csp-overview-table .csp-col-components {
    letter-spacing: 0.02em;
}

.csp-overview-empty {
    text-align: center;
    opacity: 0.75;
    font-style: italic;
    white-space: normal !important;
}

.csp-col-actions {
    width: 4.5rem;
}

.csp-action-btns {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.csp-edit-btn,
.csp-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #e8d8b5;
    color: #e8d8b5;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.csp-edit-btn:hover,
.csp-delete-btn:hover {
    background: rgba(232, 216, 181, 0.15);
}

.csp-delete-btn {
    border-color: rgba(224, 82, 82, 0.85);
    color: #e05252;
    font-weight: 700;
}

.csp-delete-btn:hover {
    background: rgba(224, 82, 82, 0.18);
}

.csp-overview-table .csp-col-flag {
    text-align: center;
}

.csp-list-initial {
    font-weight: 700;
    margin-right: 0.15rem;
}

.csp-broken-link {
    color: #e05252;
    font-weight: 700;
    margin-left: 0.25rem;
}

.csp-num-input {
    width: 5.5rem;
    margin-top: 0;
    flex-shrink: 0;
}

/*
 * Dropdown + Werte-Input:
 * feste gemeinsame Pixel-Höhe (globale .dropdown / .custom-class-field padding sonst ungleich)
 * Zeile horizontal mittig
 */
#customSpellTab2Content .csp-field-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

#customSpellTab2Content select.csp-field-select.dropdown,
#customSpellTab2Content select.csp-field-select {
    width: 26% !important;
    max-width: 26% !important;
    flex: 0 0 auto;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    line-height: 34px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

#customSpellTab2Content .custom-class-field > select.csp-field-select {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

#customSpellTab2Content .csp-field-row select.csp-field-select {
    margin: 0 !important;
}

#customSpellTab2Content .csp-field-row input.csp-num-input[type="number"],
#customSpellTab2Content .custom-class-field .csp-field-row input.csp-num-input[type="number"] {
    width: 5.5rem !important;
    max-width: 5.5rem !important;
    flex: 0 0 5.5rem;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    line-height: 36px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

#customSpellTab2Content .csp-field-row input.csp-num-input[type="number"]::-webkit-inner-spin-button,
#customSpellTab2Content .csp-field-row input.csp-num-input[type="number"]::-webkit-outer-spin-button {
    height: 36px !important;
    width: 18px !important;
    margin: 0 !important;
    background-position: center center !important;
    background-size: 14px 18px !important;
    opacity: 0.6;
}

/* Komponenten: Checkboxen horizontal mittig */
#customSpellTab2Content .csp-comp-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
}

/* Konzentration / Ritual: horizontal mittig */
#customSpellTab2Content .csp-focus-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
}

.csp-check-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0;
}

/* Material: Label + Input nebeneinander; Abstand zum Sektionsende −70 % */
#customSpellTab2Content .csp-material-wrap {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 8px;
    margin-bottom: 4px;
    padding-bottom: 0;
}

#customSpellTab2Content .csp-material-wrap.is-visible {
    display: flex;
}

#customSpellTab2Content .csp-material-wrap > label {
    display: inline-block;
    margin: 0 !important;
    font-weight: 400;
    white-space: nowrap;
}

#customSpellTab2Content .csp-material-wrap .csp-material-input,
#customSpellTab2Content .custom-class-field .csp-material-wrap input.csp-material-input[type="text"] {
    width: 40% !important;
    max-width: 40% !important;
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Komponenten-Sektion: unterer Abstand reduziert, aber nicht zu knapp */
#customSpellTab2Content .custom-class-field:has(.csp-material-wrap.is-visible) {
    margin-bottom: 10px;
    padding-bottom: 2px;
}

.csp-class-mode-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.csp-custom-class-list {
    font-weight: 600;
}

/* Divider zwischen Zauberliste und Leeren/Hinzufügen */
.csp-tab2-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 12px;
    border-top: 1px solid rgba(232, 216, 181, 0.35);
}

/* Auf Reiter Details: Pack-Footer ausblenden (sonst Linie unter den Buttons) */
#customSpellEditorView.csp-tab2-active .custom-class-footer {
    display: none;
}

.custom-class-overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px 12px;
}

.custom-class-modal {
    position: relative;
    width: min(900px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    margin: auto;
    background: #1a1a1a;
    border: 1px solid #e8d8b5;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 1);
    padding: 28px 24px 20px;
    box-sizing: border-box;
    color: #e8d8b5;
}

/* Chooser (Erstellen / Hochladen) – schmaler; Editor bleibt bei 900px */
.custom-class-modal.custom-class-modal--chooser {
    width: min(650px, 96vw);
}

.custom-class-modal .close-icon {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
}

.custom-class-title {
    color: #e8d8b5;
    margin: 0 40px 20px 0;
    text-align: center;
}

.custom-class-chooser-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}

.custom-class-action-btn {
    background: transparent;
    border: 1px solid #e8d8b5;
    color: #e8d8b5;
    padding: 10px 14px;
    cursor: pointer;
    font: inherit;
}

.custom-class-action-btn:hover {
    background: rgba(232, 216, 181, 0.12);
}

.custom-class-action-btn.secondary {
    opacity: 0.85;
}

.custom-class-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(232, 216, 181, 0.35);
    padding-bottom: 8px;
}

.custom-class-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #e8d8b5;
    padding: 8px 12px;
    cursor: pointer;
    font: inherit;
    opacity: 0.7;
}

.custom-class-tab.active {
    opacity: 1;
    border-color: #e8d8b5;
}

.custom-class-tab:disabled,
.custom-class-tab.custom-class-tab--locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.custom-class-tab-panel {
    display: none;
}

.custom-class-tab-panel.active {
    display: block;
}

.custom-class-hint {
    opacity: 0.85;
    line-height: 1.5;
}

.custom-class-boilerplate-list {
    margin: 12px 0 0;
    padding-left: 20px;
    line-height: 1.6;
}

.custom-class-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(232, 216, 181, 0.35);
}

.custom-class-field {
    margin-bottom: 16px;
}

.custom-class-field + .custom-class-field {
    border-top: 1px solid rgba(232, 216, 181, 0.35);
    padding-top: 16px;
    margin-top: 4px;
}

.custom-class-field > label,
.custom-class-section-title {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
}

.custom-class-required {
    color: #c9a66b;
}

.custom-class-field input[type="text"],
.custom-class-field input[type="number"],
.custom-class-field textarea,
.custom-class-field select,
.custom-class-equip-row select,
.custom-class-equip-row input[type="number"],
.custom-class-equip-gp input[type="number"],
.custom-class-overlay .cc-lf-float input[type="text"],
.custom-class-overlay .cc-lf-float textarea,
.custom-class-overlay .cc-lf-float select,
.custom-class-overlay .cc-lf-float input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    background: #111;
    border: 1px solid rgba(232, 216, 181, 0.5);
    color: #e8d8b5;
    padding: 8px;
    font: inherit;
    border-radius: 5px;
}

.custom-class-overlay .cc-lf-float textarea,
.custom-class-field textarea {
    min-height: 90px;
    resize: vertical;
    border-radius: 5px;
}

/* Checkboxen im Seiten-Design (Kupfer/Gold) – Tab1 + Floating-Masken */
.custom-class-modal input[type="checkbox"],
.custom-class-overlay .cc-lf-float input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #7a431d;
    border-radius: 4px;
    background-color: #2e2e33;
    transition: all 0.3s ease;
    outline: none;
    padding: 0;
    accent-color: unset;
}

.custom-class-modal input[type="checkbox"]:hover,
.custom-class-overlay .cc-lf-float input[type="checkbox"]:hover {
    border-color: #d4a017;
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.4);
}

.custom-class-modal input[type="checkbox"]:checked,
.custom-class-overlay .cc-lf-float input[type="checkbox"]:checked {
    border-color: #d4a017;
    background-color: #3e3e45;
    box-shadow: 0 0 10px rgba(212, 160, 23, 0.5);
}

.custom-class-modal input[type="checkbox"]:checked::after,
.custom-class-overlay .cc-lf-float input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #d4a017;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-class-name-input {
    width: 100% !important;
    max-width: 560px;
}

.custom-class-hit-die-select {
    width: 100px !important;
    max-width: 100px;
}

.custom-class-tool-select {
    width: 50%;
    max-width: 320px;
}

.custom-class-equip-gp {
    max-width: 140px;
    width: 50%;
}

.custom-class-equip-row,
.custom-class-equip-header {
    display: grid;
    grid-template-columns: minmax(160px, 210px) minmax(120px, 1fr) 72px 24px;
    gap: 8px;
    align-items: center;
}

.custom-class-equip-header {
    margin-bottom: 6px;
    font-size: 0.85em;
    font-weight: bold;
    color: #d4a017;
    opacity: 0.95;
}

.custom-class-equip-header span:last-child {
    /* Platzhalter über der schmalen X-Spalte */
    visibility: hidden;
}

.custom-class-equip-row select,
.custom-class-equip-row input[type="number"] {
    width: 100%;
    max-width: 100%;
    height: 36px;
    box-sizing: border-box;
    margin: 0;
    vertical-align: middle;
}

.custom-class-equip-row .cc-equip-item {
    width: 100%;
    max-width: 100%;
}

.custom-class-lang-block {
    border: 1px solid rgba(232, 216, 181, 0.25);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 8px;
}

/* Gestrichelte Sprachboxen nur in Frei-Optionen-Maske; dezent */
.custom-class-lang-block.cc-lang-box-dashed {
    border: 1px dashed rgba(232, 216, 181, 0.22);
}

.custom-class-lang-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
    margin-bottom: 8px;
    gap: 10px;
}

.custom-class-lang-body.collapsed {
    display: none;
}

/* Einheitlicher Aufklapp-Pfeil (▼), wie in der restlichen App */
.cc-collapse-arrow {
    display: inline-block;
    transition: transform 0.25s ease-in-out;
    color: #d4a017;
    font-size: 0.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.cc-collapse-arrow.is-collapsed {
    transform: rotate(-90deg);
}

.custom-class-lang-availability .custom-class-lang-avail-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.custom-class-lang-availability .custom-class-section-title {
    margin: 0;
}

.custom-class-lang-avail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}

.cc-lang-avail-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}

.cc-lang-avail-item.cc-lang-avail--locked {
    opacity: 0.7;
    cursor: not-allowed;
}

.cc-lang-avail-item.cc-lang-avail--locked input {
    cursor: not-allowed;
}

.custom-class-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 12px;
}

.custom-class-check-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}

.custom-class-check-grid label.cc-check-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.custom-class-check-grid input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.custom-class-spell-fields {
    margin-top: 10px;
    display: grid;
    gap: 12px;
}

.custom-class-equip-option {
    border: 1px solid rgba(232, 216, 181, 0.25);
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 12px;
}

.custom-class-equip-gp-label {
    font-weight: bold;
    color: #d4a017;
}

.custom-class-equip-option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.custom-class-equip-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.custom-class-remove-btn,
.custom-class-add-item-btn {
    background: transparent;
    border: 1px solid rgba(232, 216, 181, 0.5);
    color: #e8d8b5;
    cursor: pointer;
    padding: 6px 10px;
    font: inherit;
}

.custom-class-add-item-btn {
    border-radius: 5px;
}

.custom-class-add-item-btn:disabled,
.custom-class-add-item-btn.custom-class-add-item-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.custom-class-remove-btn {
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

@media (max-width: 700px) {
    .custom-class-modal {
        padding: 22px 14px 16px;
    }

    .custom-class-equip-row,
    .custom-class-equip-header {
        grid-template-columns: 1fr;
    }

    .custom-class-check-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Custom Class Tab 2: Level Features ---- */
.cc-lf-intro {
    margin-bottom: 14px;
}

.cc-lf-table-wrap {
    max-height: min(68vh, 720px);
    overflow: auto;
    border: 1px solid rgba(232, 216, 181, 0.3);
    border-radius: 5px;
    background: #151515;
}

.cc-lf-table {
    min-width: 942px;
}

.cc-lf-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 56px 44px minmax(110px, 1.1fr) minmax(120px, 1.2fr) minmax(140px, 1.4fr) minmax(140px, 1.4fr) 118px 84px;
    background: #2a2a2a;
    border-bottom: 1px solid rgba(232, 216, 181, 0.4);
}

.cc-lf-level-group {
    display: grid;
    grid-template-columns: 56px 1fr;
    border-bottom: 2px solid rgba(232, 216, 181, 0.22);
    min-height: 56px;
}

.cc-lf-level-group--locked {
    background: rgba(212, 160, 23, 0.03);
}

.cc-lf-level-rail {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 216, 181, 0.07);
    border-right: 1px solid rgba(232, 216, 181, 0.25);
    padding: 10px 4px;
}

.cc-lf-level-rail-num {
    font-weight: bold;
    font-size: 1.15rem;
    color: #d4a017;
    line-height: 1;
}

.cc-lf-level-rows {
    display: flex;
    flex-direction: column;
}

.cc-lf-row {
    display: grid;
    grid-template-columns: 44px minmax(110px, 1.1fr) minmax(120px, 1.2fr) minmax(140px, 1.4fr) minmax(140px, 1.4fr) 118px 84px;
    align-items: stretch;
    border-bottom: 1px solid rgba(232, 216, 181, 0.12);
    background: #1a1a1a;
}

.cc-lf-level-rows .cc-lf-row:last-child {
    border-bottom: none;
}

.cc-lf-cell {
    padding: 12px 12px;
    border-right: 1px solid rgba(232, 216, 181, 0.1);
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    color: #e8d8b5;
}

.cc-lf-cell--head {
    font-weight: bold;
    color: #d4a017;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cc-lf-cell--level,
.cc-lf-cell--handle {
    justify-content: center;
}

.cc-lf-cell--muted {
    color: rgba(232, 216, 181, 0.45);
}

.cc-lf-cell--placeholder {
    color: rgba(232, 216, 181, 0.7);
}

.cc-lf-cell-btn {
    font-style: normal;
}

.cc-lf-row--fixed {
    background: rgba(212, 160, 23, 0.1);
}

.cc-lf-row--free {
    background: #1c1c1c;
}

.cc-lf-row--empty {
    background: repeating-linear-gradient(
        -45deg,
        rgba(232, 216, 181, 0.03),
        rgba(232, 216, 181, 0.03) 8px,
        rgba(232, 216, 181, 0.07) 8px,
        rgba(232, 216, 181, 0.07) 16px
    );
}

.cc-lf-row--free.cc-lf-row--draggable {
    cursor: grab;
}

.cc-lf-row--free.cc-lf-row--draggable:hover {
    background: rgba(212, 160, 23, 0.12);
}

.cc-lf-row--free.cc-lf-row--draggable:active {
    cursor: grabbing;
}

.cc-lf-row--blocked {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.35);
}

/* Tab-übergreifend: nur seitlicher Streifen, Zeilenhintergrund unverändert */
.cc-lf-row--linked-spellcasting {
    box-shadow: inset 4px 0 0 #3d8cff;
}

.cc-lf-row--linked-magic-progression {
    box-shadow: inset 4px 0 0 #c62828;
}

.cc-lf-row--linked-subclass {
    box-shadow: inset 4px 0 0 #d4a017;
}

.cc-lf-row--linked-tools,
.cc-lf-row--tool-bound {
    box-shadow: inset 4px 0 0 #2e9e4f;
}

.cc-lf-row--dragging {
    opacity: 0.5;
}

.cc-lf-row--drag-over {
    outline: 2px solid #d4a017;
    outline-offset: -2px;
    background: rgba(212, 160, 23, 0.18);
}

.cc-lf-drag-handle {
    color: #e8d8b5;
    font-size: 1rem;
    letter-spacing: -0.08em;
    user-select: none;
    font-weight: bold;
    opacity: 0.85;
}

.cc-lf-row--draggable .cc-lf-drag-handle {
    color: #d4a017;
}

.cc-lf-drag-handle--locked {
    font-size: 0.75rem;
    opacity: 0.4;
    letter-spacing: 0;
}

.cc-lf-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: #1a1a1a;
    color: #e8d8b5;
    border: 1px solid rgba(232, 216, 181, 0.45);
    border-radius: 4px;
    padding: 5px 6px;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-user-drag: none;
}

.cc-lf-select:focus {
    outline: 1px solid #d4a017;
    border-color: #d4a017;
}

.cc-lf-select option:disabled {
    color: #777;
}

.cc-lf-cell--center {
    justify-content: center;
}

.cc-lf-cell-btn,
.cc-lf-chip-btn,
.cc-lf-chips {
    background: transparent;
    border: 1px solid rgba(232, 216, 181, 0.35);
    color: #e8d8b5;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 4px 8px;
}

.cc-lf-cell-btn:hover,
.cc-lf-chip-btn:hover,
.cc-lf-chips:hover {
    border-color: #d4a017;
    background: rgba(212, 160, 23, 0.1);
}

.cc-lf-cell-btn--empty {
    color: rgba(232, 216, 181, 0.65);
}

.cc-lf-chips {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.cc-lf-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    border-radius: 3px;
    border: 1px dashed rgba(232, 216, 181, 0.4);
    color: rgba(232, 216, 181, 0.4);
    font-weight: bold;
    font-size: 0.78rem;
}

.cc-lf-chip--on {
    border-style: solid;
    border-color: #d4a017;
    color: #d4a017;
    background: rgba(212, 160, 23, 0.15);
}

.cc-lf-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    line-height: 1;
    flex-wrap: nowrap;
}

.cc-lf-chip-btn--maneuver {
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
}

.cc-lf-chip-pair {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    line-height: 1;
}

.cc-lf-chip-pair .cc-lf-filter-icon,
.cc-lf-chip-pair .cc-lf-gear-icon {
    vertical-align: middle;
}

.cc-lf-chip-num {
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cc-lf-chip-sep {
    opacity: 0.7;
    line-height: 1;
    flex-shrink: 0;
}

.cc-lf-chip-btn--on {
    border-color: #d4a017;
    color: #d4a017;
}

.cc-lf-chip-muted {
    color: rgba(232, 216, 181, 0.35);
}

/* Floating mask – muss über .modal-overlay (z-index 999999) liegen */
.cc-lf-float-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    padding: 16px;
}

/* Gleicher 🔒-Look wie bei select:disabled */
.cc-lf-lock {
    display: inline-block;
    width: 1em;
    margin-right: 0.3em;
    font-size: 0.95em;
    line-height: 1;
    vertical-align: -0.05em;
    flex-shrink: 0;
}

.cc-lf-float {
    position: relative;
    width: min(560px, 96vw);
    max-height: 86vh;
    overflow: auto;
    background: #1a1a1a;
    border: 1px solid #e8d8b5;
    border-radius: 8px;
    padding: 28px 20px 18px;
    color: #e8d8b5;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.8);
}

/* Bezeichnung / Optionen / Beschreibung */
.cc-lf-float.cc-lf-float--wide {
    width: min(720px, 96vw);
}

/* Bezeichnungs-Felder wie Tab 1 (custom-class-name-input) */
.cc-lf-float-input-wrap--name {
    width: 100%;
    max-width: 560px;
}

.cc-lf-float .close-icon {
    top: 10px;
    right: 12px;
    font-size: 20px;
    z-index: 2;
}

.cc-lf-float-title {
    margin: 0 36px 14px;
    color: #d4a017;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    font-weight: bold;
    text-align: center;
}

.cc-lf-float-title .cc-lf-lock {
    margin-right: 0;
}

.cc-lf-float-divider {
    border: none;
    border-top: 1px solid rgba(212, 160, 23, 0.75);
    margin: 16px 0;
}

.cc-lf-float-context {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: normal;
    color: rgba(232, 216, 181, 0.85);
}

/* Zeichenzähler in Masken = gleiches .char-counter wie Tab 1 */
.cc-lf-float .char-counter {
    margin: 2px 0 10px;
}

.cc-lf-float-field-label {
    display: block;
    margin: 0 0 4px;
    font-size: 0.85rem;
    color: rgba(232, 216, 181, 0.75);
    font-weight: normal;
}

.cc-lf-float-hint,
.cc-lf-float-meta,
.cc-lf-float-pool {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: rgba(232, 216, 181, 0.75);
}

.cc-lf-float-hint--after-filter {
    margin-top: 14px;
}

.cc-lf-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.1em;
    line-height: 1;
    flex-shrink: 0;
}

.cc-lf-filter-icon svg {
    display: block;
}

.cc-lf-gear-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.95em;
    flex-shrink: 0;
}

.cc-tab4-spell-lists {
    margin: 6px 0 14px 1.2em;
    padding: 0;
    color: #e8d8b5;
}

.cc-lf-float-pool strong {
    color: #d4a017;
}

.cc-lf-float-pool--center {
    text-align: center;
    margin-top: 14px;
}

.cc-lf-float-label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
}

/* Einfach→Frei: Verbesserung unter der Bezeichnung, linksbündig */
.cc-lf-improve-block {
    text-align: left;
    margin-top: 4px;
}

.cc-lf-improve-block > .cc-lf-float-label {
    text-align: left;
}

.cc-lf-improve-block > select.cc-lf-float-input {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

/* System-Token-Alias in Langbeschreibung (LEVEL_VAL / CHOICE_LIST) */
.cc-lf-desc-token {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-height: 2.6rem;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(212, 160, 23, 0.55);
    border-radius: 5px;
    background: rgba(212, 160, 23, 0.12);
    color: #e8d8b5;
    text-align: left;
    font: inherit;
    cursor: default;
}

.cc-lf-desc-token--add,
.custom-class-overlay button.cc-lf-desc-token.cc-lf-desc-token--add[type="button"],
button.cc-lf-desc-token.cc-lf-desc-token--add[type="button"] {
    border: 1px dashed rgba(232, 216, 181, 0.45) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #e8d8b5 !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 5px;
    font-weight: 600;
}

.cc-lf-desc-token--add:hover,
.custom-class-overlay button.cc-lf-desc-token.cc-lf-desc-token--add[type="button"]:hover,
button.cc-lf-desc-token.cc-lf-desc-token--add[type="button"]:hover {
    border-color: rgba(232, 216, 181, 0.7) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #e8d8b5 !important;
}

.cc-lf-desc-token--add .cc-lf-desc-token-plus {
    color: #e8d8b5;
}

.cc-lf-desc-token-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}

.cc-lf-desc-token-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: #e8d8b5 !important;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
}

.cc-lf-desc-token-remove--spacer {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}

.cc-lf-desc-token-remove:hover {
    color: #d4a017 !important;
    background: rgba(212, 160, 23, 0.18) !important;
}

.cc-lf-desc-token-plus {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
}

/* Basis-Klasse für Masken-Inputs; Optik kommt von Tab-1-Regeln oben */
.cc-lf-float-input {
    margin-bottom: 0;
}

.custom-class-overlay .cc-lf-float input[type="number"].cc-lf-amount-input {
    width: 140px;
    max-width: 140px;
    margin-bottom: 10px;
}

.custom-class-overlay .cc-lf-float input[type="number"].cc-lf-maneuver-dice-input {
    width: 12%;
    max-width: 4.5rem;
    min-width: 3.5rem;
}

.cc-lf-maneuver-dice-block {
    margin-top: 28px;
}

.cc-lf-free-options-copy {
    margin: 0 0 16px;
    text-align: left;
}

.cc-lf-free-options-copy > .cc-lf-float-label {
    margin-bottom: 6px;
    text-align: left;
}

.custom-class-overlay .cc-lf-float .cc-lf-free-options-copy > select.cc-lf-options-filter {
    width: 18%;
    max-width: 18%;
    min-width: 7rem;
    display: block;
    margin-left: 0;
    margin-right: auto;
}

.cc-lf-param-value-block {
    margin-top: 28px;
}

.cc-lf-param-value-block .cc-lf-float-label {
    margin-bottom: 6px;
}

.cc-lf-param-mode-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 18px;
    margin-bottom: 4px;
}

.cc-lf-param-value-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cc-lf-param-value-row > span {
    display: inline-flex;
    align-items: center;
}

.cc-lf-param-times-sep {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
}

/* Wert-Input und Würfel-Select exakt auf einer Höhe (Frei + Vordefiniert/Sneak) */
.custom-class-overlay .cc-lf-float .cc-lf-param-value-row input.cc-lf-amount-input,
.custom-class-overlay .cc-lf-float .cc-lf-param-value-row select.cc-lf-options-filter {
    height: 40px;
    min-height: 40px;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 1rem;
    line-height: 38px;
    box-sizing: border-box;
    vertical-align: middle;
}

.custom-class-overlay .cc-lf-float .cc-lf-param-value-row select.cc-lf-options-filter {
    width: auto;
    min-width: 5.5rem;
    max-width: 8rem;
}

.custom-class-overlay .cc-lf-float .cc-lf-param-value-row select.cc-lf-options-filter:disabled {
    padding-right: 35px;
}

.custom-class-overlay .cc-lf-float select.cc-lf-options-filter {
    width: 60%;
    max-width: 60%;
}

/* Label + Dropdown als zentrierte Zeile; feste Spalten → Beschriftungen bündig */
.cc-lf-control-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.cc-lf-control-row > .cc-lf-float-label {
    margin: 0;
    flex: 0 0 11rem;
    width: 11rem;
    min-width: 7rem;
    max-width: 7rem;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: left;
    justify-content: flex-start;
}

.cc-lf-control-row > select.cc-lf-options-filter,
.custom-class-overlay .cc-lf-float .cc-lf-control-row > select.cc-lf-options-filter {
    flex: 0 0 18rem;
    width: 18rem !important;
    max-width: 18rem !important;
    margin: 0;
}

/* Waffen-/Rüstungsvertrautheit: längere Titel + Zahnrad brauchen mehr Label-Breite */
.cc-lf-control-row--training-pick {
    gap: 16px;
}

.cc-lf-control-row--training-pick > .cc-lf-float-label {
    flex: 0 0 10rem;
    width: 10rem;
    min-width: 10rem;
    max-width: 10rem;
}

.cc-lf-control-row--training-pick > select.cc-lf-options-filter,
.custom-class-overlay .cc-lf-float .cc-lf-control-row--training-pick > select.cc-lf-options-filter {
    flex: 0 0 14rem;
    width: 14rem !important;
    max-width: 14rem !important;
}

.cc-lf-control-row--predef-select {
    justify-content: center;
    margin-top: 6px;
    margin-bottom: 0;
}

.cc-lf-control-row--predef-select > .cc-lf-float-label {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

.cc-lf-control-row--predef-select > select.cc-lf-options-filter,
.custom-class-overlay .cc-lf-float .cc-lf-control-row--predef-select > select.cc-lf-options-filter {
    flex: 0 0 8rem;
    width: 8rem !important;
    max-width: 8rem !important;
}

.cc-lf-float-label.cc-lf-float-label--filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cc-lf-float-input-wrap {
    width: 100%;
    max-width: 100%;
}

.cc-lf-float-input-wrap > .cc-lf-float-input {
    margin-bottom: 0;
}

.cc-lf-float .custom-class-lang-block {
    width: 100%;
    box-sizing: border-box;
}

.cc-lf-float-preview-lang {
    margin: 8px 0 4px;
    font-size: 0.78rem;
    color: #8a8070;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cc-lf-float-preview {
    background: #1a1814;
    border: 1px solid #3a342a;
    border-radius: 6px;
    padding: 10px 12px;
    color: #e8e0d0;
    font-size: 0.9rem;
    line-height: 1.45;
    max-height: 180px;
    overflow: auto;
}

.cc-lf-float-preview ul {
    margin: 0.4em 0 0.4em 1.2em;
    padding: 0;
}

.cc-lf-chips--readonly,
.cc-lf-cell-btn--locked {
    cursor: pointer;
}

.cc-lf-chips--readonly .cc-lf-lock,
.cc-lf-cell-btn--locked .cc-lf-lock {
    opacity: 0.9;
}

.cc-lf-float-body {
    margin-bottom: 14px;
}

.cc-lf-float-footer {
    display: none;
}

.cc-lf-choice-row {
    position: relative;
    border: 1px solid rgba(232, 216, 181, 0.55);
    border-radius: 5px;
    padding: 10px 28px 10px 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-class-overlay .cc-lf-float button.cc-lf-choice-remove,
.cc-lf-float button.cc-lf-choice-remove,
button.cc-lf-choice-remove[type="button"] {
    position: absolute !important;
    top: 4px !important;
    right: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    color: #e8d8b5 !important;
    font: inherit !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: none !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
}

.custom-class-overlay .cc-lf-float button.cc-lf-choice-remove:hover,
.custom-class-overlay .cc-lf-float button.cc-lf-choice-remove:focus,
.cc-lf-float button.cc-lf-choice-remove:hover,
.cc-lf-float button.cc-lf-choice-remove:focus,
button.cc-lf-choice-remove[type="button"]:hover,
button.cc-lf-choice-remove[type="button"]:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: #e8d8b5 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.cc-lf-choice-row > label {
    margin-bottom: 6px;
}

.cc-lf-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px 10px;
    max-height: 240px;
    overflow: auto;
}

.cc-lf-check-grid label,
.cc-lf-check-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}

.cc-lf-check-grid label.cc-lf-check-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.custom-class-overlay .cc-lf-float .cc-lf-check-grid input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
    border-color: #5a4030;
}

.custom-class-overlay .cc-lf-float .cc-lf-check-grid input[type="checkbox"]:disabled:hover {
    border-color: #5a4030;
    box-shadow: none;
}

.cc-lf-attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cc-lf-attr-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: normal;
}

.cc-lf-attr-direct-label {
    align-items: center;
    text-align: center;
}

.cc-lf-attr-direct-label .cc-lf-attr-name {
    display: block;
    width: 100%;
    text-align: center;
}

.custom-class-overlay .cc-lf-float input[type="number"].cc-lf-attr-direct-input {
    width: 30%;
    max-width: 30%;
    margin: 0 auto;
    align-self: center;
}

.cc-lf-sc-level-block {
    margin: 14px 0 18px;
    padding-top: 8px;
    border-top: 1px solid rgba(212, 160, 23, 0.35);
}

.cc-lf-sc-level-block .cc-lf-float-input {
    margin-bottom: 8px;
}

/* Zaubertrick erhalten: engerer Abstand Überschrift → Min-Hinweis */
.cc-lf-sc-cantrip-picks > .cc-lf-float-label {
    margin-bottom: 2px;
}

.cc-lf-sc-cantrip-picks-hint {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Abstand zwischen Slot-Überschrift und vorherigem Dropdown */
.cc-lf-sc-cantrip-slot--spaced {
    margin-top: 16px;
}

.cc-lf-add-to-spellbook {
    margin-top: 0;
    margin-bottom: 12px;
}

/* Zauberbuch als Fokus in Tab 1 und Zauberwirken-Maske */
.cc-spellbook-focus-label {
    color: #4ea1ff;
}

.cc-lf-add-to-spellbook-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #e8d8b5;
    cursor: pointer;
}

.cc-lf-sc-pick-counter {
    color: #c62828;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    align-self: center;
    margin-left: auto;
}

.cc-lf-sc-pick-counter--gold {
    color: #d4a017;
}

.cc-lf-subclass-spells-hint-intro {
    text-align: center;
    margin: 0 0 10px;
}

.cc-lf-subclass-spells-hint-list {
    text-align: left;
    margin: 0 0 14px;
    padding-left: 1.35em;
}

.cc-lf-subclass-spells-hint-list li {
    margin: 0.35em 0;
    text-align: left;
}

.cc-lf-control-row > input.cc-lf-amount-input,
.custom-class-overlay .cc-lf-float .cc-lf-control-row > input.cc-lf-amount-input {
    flex: 0 0 140px;
    width: 140px !important;
    max-width: 140px !important;
    margin: 0;
}

/* Tab 3: Unterklassen-Boxen */
.cc-sc-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
}

.cc-sc-box {
    border: 1px solid rgba(232, 216, 181, 0.35);
    border-radius: 5px;
    background: #1a1a1a;
    overflow: hidden;
}

.cc-sc-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: #2a2a2a;
    cursor: pointer;
    user-select: none;
}

.cc-sc-box-header:hover {
    background: #333;
}

.cc-sc-box-title {
    font-weight: bold;
    color: #d4a017;
    font-size: 1.02rem;
}

.cc-sc-box-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

button.cc-sc-remove-btn {
    background: transparent;
    border: 1px solid rgba(232, 216, 181, 0.35);
    color: #e8d8b5;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
}

button.cc-sc-remove-btn:hover {
    border-color: #c44;
    color: #f88;
}

.cc-sc-box-body {
    padding: 14px 14px 16px;
}

.cc-sc-box-body.collapsed {
    display: none;
}

.cc-sc-empty-levels {
    color: rgba(232, 216, 181, 0.7);
    margin: 8px 0 0;
}

.cc-sc-add-btn {
    margin-top: 4px;
}

.cc-sc-table-wrap {
    margin-top: 8px;
}

/* Tab 5 – Zauberprogression */
.cc-spell-prog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 12px;
}

.cc-spell-prog-mode {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e8d8b5;
    font-size: 0.9rem;
    white-space: nowrap;
}

.cc-spell-prog-mode span {
    font-weight: bold;
}

.cc-spell-prog-mode select {
    min-width: 10rem;
    /* Globale Margins entfernen, damit Titel und Buttons mittig auf einer Linie liegen */
    margin: 0;
}

.cc-spell-prog-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(232, 216, 181, 0.25);
    border-radius: 6px;
    /* Rahmen endet am Tabelleninhalt – keine leere Restspalte rechts */
    width: max-content;
    max-width: 100%;
}

.cc-spell-prog-table {
    width: max-content;
}

.cc-spell-prog-row {
    display: grid;
    /* Feste Spaltenbreiten; Zauberlisten-Spalte wächst per Variable mit der Auswahl mit */
    grid-template-columns: 48px var(--cc-spell-lists-col, 104px) 72px 72px repeat(9, 56px);
    align-items: center;
    border-bottom: 1px solid rgba(232, 216, 181, 0.12);
    background: #1a1a1a;
}

.cc-spell-prog-row--head {
    background: rgba(232, 216, 181, 0.08);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Gruppenzeile: „Zauberplätze“ spannt 1.–9. Grad */
.cc-spell-prog-row--group-head {
    background: rgba(232, 216, 181, 0.12);
    border-bottom: 1px solid rgba(184, 115, 51, 0.45);
}

.cc-spell-prog-cell--group-spacer {
    grid-column: 1 / 5;
    border-right: 2px solid rgba(184, 115, 51, 0.55);
}

.cc-spell-prog-cell--slot-group {
    grid-column: 5 / 14;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: #d4a017;
    border-right: none;
    padding-top: 8px;
    padding-bottom: 4px;
}

.cc-spell-prog-row--locked {
    opacity: 0.45;
    background: rgba(0, 0, 0, 0.25);
}

.cc-spell-prog-cell {
    padding: 6px 4px;
    text-align: center;
    border-right: 1px solid rgba(232, 216, 181, 0.08);
    color: #e8d8b5;
    font-size: 0.85rem;
}

/* Zaubergrad-Bereich: Spaltenlinien dicker und kupferfarben hervorheben */
.cc-spell-prog-row .cc-spell-prog-cell:nth-child(n+4) {
    border-right: 2px solid rgba(184, 115, 51, 0.55);
}

/* Keine Kupferlinie am rechten Tabellenrand (nach 9. Grad) */
.cc-spell-prog-row .cc-spell-prog-cell:last-child {
    border-right: none;
}

.cc-spell-prog-cell--head {
    font-weight: 600;
    font-size: 0.75rem;
}

.cc-spell-prog-cell--lvl {
    font-weight: bold;
    color: #d4a017;
}

/* Freie Zauberkonfig.: nur Zahl + Spinner, ohne Rahmen und Hintergrund.
   Hohe Spezifität nötig, da globale input[type="number"]-Regeln sonst greifen. */
.cc-spell-prog-table input.cc-spell-prog-input {
    width: 100%;
    max-width: 52px;
    background: transparent;
    color: #e8d8b5;
    border: none;
    border-radius: 4px;
    margin: 0;
    padding: 4px 2px;
    text-align: center;
    font: inherit;
    font-size: 0.85rem;
}

.cc-spell-prog-table input.cc-spell-prog-input:focus {
    outline: 1px solid rgba(184, 115, 51, 0.6);
}

/* Hard-Reset-Button im Zauberlisten-Spaltenkopf (nur Freie Zauberkonfig.) */
.cc-spell-prog-reset-btn {
    margin-left: 6px;
    background: transparent;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

.cc-spell-prog-reset-btn img {
    width: 12px;
    height: 12px;
    display: block;
}

.cc-spell-prog-reset-btn:hover img {
    filter: drop-shadow(0 0 3px #fce181);
}

/* „0“-Button neben dem Konfigurations-Dropdown (nur Freie Zauberkonfig.) */
.cc-spell-prog-zero-btn {
    background: transparent;
    border: 1px solid rgba(184, 115, 51, 0.55);
    border-radius: 4px;
    color: #d4a017;
    font: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 4px 8px;
    cursor: pointer;
    align-self: center;
}

.cc-spell-prog-zero-btn:hover {
    background: rgba(184, 115, 51, 0.25);
    filter: drop-shadow(0 0 2px #fce181);
}

/* Einheitliche Schriftfarben der Zauberlisten in allen Masken (gedeckte Töne) */
.cc-spell-list-color--bard { color: #c97ba4; }
.cc-spell-list-color--druid { color: #7da87b; }
.cc-spell-list-color--warlock { color: #8a6fae; }
.cc-spell-list-color--cleric { color: #e6e6e6; }
.cc-spell-list-color--wizard { color: #6f93c4; }
.cc-spell-list-color--paladin { color: #c9a24a; }
.cc-spell-list-color--ranger { color: #a08055; }
.cc-spell-list-color--sorcerer { color: #bd6a63; }

/* Tab 4 – Eigene Zauberliste */
.cc-csl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px 14px;
    margin-bottom: 12px;
}

.cc-csl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.cc-csl-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #e8d8b5;
    font-size: 0.85rem;
}

.cc-csl-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
}

.cc-csl-filter select {
    min-width: 9rem;
    margin: 0;
}

.cc-csl-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
}

.cc-csl-counter {
    color: #e8d8b5;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    min-width: 3.5rem;
    text-align: right;
}

.cc-csl-action-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border: 1px solid rgba(232, 216, 181, 0.35);
    border-radius: 4px;
    padding: 0 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #1a1a1a;
}

.cc-csl-action-btn--lock {
    background: #8eb4c9;
}

.cc-csl-action-btn--edit {
    background: #3d5a73;
    color: #e8d8b5;
}

.cc-csl-action-btn:hover {
    filter: brightness(1.08);
}

/* Reset: gleiche Höhe wie Festlegen/Bearbeiten */
.cc-csl-reset-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid rgba(232, 216, 181, 0.35);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
}

.cc-csl-reset-btn img {
    width: 18px;
    height: 18px;
    display: block;
}

.cc-csl-reset-btn:hover:not(:disabled) img {
    filter: drop-shadow(0 0 3px #fce181);
}

.cc-csl-reset-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.cc-csl-spell-body {
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* Locked: Auswahl gesperrt, Scrollbar bleibt bedienbar */
.cc-csl-spell-body--locked {
    opacity: 0.72;
}

.cc-csl-spell-body--locked .cc-csl-spell-ul li {
    cursor: default;
}

.cc-csl-spell-ul {
    margin-bottom: 12px;
}

.cc-lf-custom-spell-list-btn {
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(232, 216, 181, 0.4);
    background: #8eb4c9;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 0.9rem;
}

.cc-lf-custom-spell-list-btn:hover {
    filter: brightness(1.08);
}

/* ========================================================================
   Verknüpfte Dateien hochladen (Dependency-Modal)
   ======================================================================== */
.dc-linked-files-overlay {
    z-index: 1000001;
    align-items: center;
}

.dc-linked-files-hint {
    margin: 0 0 16px;
    opacity: 0.85;
    font-size: 0.95rem;
    text-align: center;
}

.dc-linked-files-buttons {
    max-width: 320px;
}

.dc-dep-file-btn {
    /* Kupfer wie Standard-Action-Buttons – Hintergrund bleibt auch nach Upload */
    background: transparent;
    border-color: #e8d8b5;
    color: #e8d8b5;
}

.dc-dep-file-btn:hover {
    background: rgba(232, 216, 181, 0.12);
}

.dc-dep-file-btn.is-fulfilled {
    background: transparent;
    border-color: #e8d8b5;
    color: #81c784; /* nur Aufschrift grün */
}

.dc-dep-file-btn.is-fulfilled:hover {
    background: rgba(232, 216, 181, 0.12);
    color: #a5d6a7;
}

.dc-linked-files-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

#dcPackageLinkedFilesConfirmBtn:disabled,
#dcPackageLinkedFilesConfirmBtn.dc-linked-files-confirm--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(80, 80, 80, 0.35);
    border-color: rgba(160, 160, 160, 0.45);
    color: rgba(232, 216, 181, 0.55);
    pointer-events: none;
}

#dcPackageLinkedFilesConfirmBtn.dc-linked-files-confirm--ready {
    opacity: 1;
    cursor: pointer;
    background: transparent;
    border-color: #e8d8b5;
    color: #e8d8b5;
    pointer-events: auto;
}

#dcPackageLinkedFilesConfirmBtn.dc-linked-files-confirm--ready:hover {
    background: rgba(232, 216, 181, 0.12);
}

/* Spell-Chooser: Create bleibt immer aktiv (Bibliothek = Blatt) */
#customSpellCreateNewBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(80, 80, 80, 0.35);
    border-color: rgba(160, 160, 160, 0.45);
    color: rgba(232, 216, 181, 0.55);
}