/* ********************* */
/* ********************* */
/* ********************* */
/* Styles für View-Seite */
/* ********************* */
/* ********************* */
/* ********************* */



/* *********************************************** */
/* HERO - Bereich oberhalb Content für game_view * */
/* *********************************************** */

.ainfobox {
	font-size: 0.8rem;
	color: var(--light-color);
}
.hero-container {
    /* Kein extra Padding im Container, damit die Box bündig mit der Nav abschließt */
	padding: 0;
    margin: 5px 0; /* Kleiner Abstand zur Nav oben und zum Content unten */
	display: flex;
	width: 100%;
}

.hero-box {
    display: flex;
	flex-grow: 1;
    margin: 10px 0; /* Kleiner Abstand zur Nav oben und zum Content unten   vorher 10px 0 */
    padding: 0px;  /* Innere Luftigkeit der Box  vorher 10px */
    gap: 5px;
    align-items: flex-start;
    width: 100%;    /* Gleiche Breite wie die Nav-Leiste */
    box-sizing: border-box; /* Wichtig, damit Padding die Breite nicht sprengt */
}

/* Cover Slider Styles */
.hero-cover-slider-container {
    flex: 0 0 160px; /* Fixiert die Breite auf 130px (Bildbreite 150 + 10 px extra) */
}

.hero-cover-wrapper > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Verhindert hässliche Unterstreichungen */
}

.hero-cover-wrapper {
    position: relative;
    width: 150px;
    height: 120px;
    border-radius: 4px;
	border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
	align-items: center; /* Bild innerhalb des schwarzen Rahmens oben ausrichten */
    justify-content: center; /* Bleibt meist mittig sinnvoll, damit schmale Bilder zentriert sind */
}

#hero-current-cover {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
	width: auto;
    height: auto; /* Verhindert Verzerrung */
    display: block;
	cursor: pointer;
}

.hero-no-cover-wrapper {
    background-color: var(--box-bg); /* Hellgrauer Hintergrund */
    border: 2px dashed var(--border-color);   /* Gestrichelter Rand für "Leer"-Optik */
	flex-direction: column;
	color:var(--light-color);
}

.hero-cover-placeholder-icon {
    font-size: 3rem;           /* Größe des Icons */
    color: #bbb;               /* Dezentes Grau */
}

/* Pfeile-Styling */
.hero-cover-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: var(--hero-cover-arrow);
    border: none;
    padding: 10px 5px;
    cursor: pointer;
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease;
}

.hero-cover-wrapper:hover .hero-cover-slider-arrow {
    opacity: 1; /* Sichtbar bei Hover */
}

.hero-cover-slider-arrow.prev { left: 0; border-radius: 0 4px 4px 0; }
.hero-cover-slider-arrow.next { right: 0; border-radius: 4px 0 0 4px; }

.hero-cover-slider-arrow:hover {
    background: var(--text-main);
}

.hero-content {		/* Der Text-Container im Hero-Bereich */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Abstand zwischen Titel und eventuellem Untertext */
}

.hero-game-title {
    font-size: 1.5rem; /* Größere Schrift */
    font-weight: bold;
    margin-top: -5px;
    line-height: 1.2;
    color: var(--text-main); /* Oder deine gewünschte Farbe */
}

/* Container für die 4 Boxen */
.hero-quick-info-container {
    display: flex;
    gap: 5px;
    margin: 0;
    flex-wrap: wrap; /* Wichtig für Mobile */
}

.hero-info-pair {
    display: flex;
    gap: 12px; /* Abstand zwischen den Items im Paar */
    flex: 0 0 auto; /* Erlaubt den Paaren zu wachsen, aber auch umzubrechen */
	margin-right:7px;
	margin-bottom:7px;
}
/* Einzelne Info-Box im Hero-Bereich */
.hero-info-item {
	background: var(--box-secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px;
    display: flex;
    flex-direction: row; /* Icon links, Text rechts */
	align-items: flex-start;
    gap: 5px;           /* Abstand zwischen Icon und Text */
    flex: 0 0 140px;	/* Fixe breite der Boxen */
	min-width: 140px;	/* Fix für Firefox wegen überlappender Boxen */
    font-size: 0.8rem;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Text */
}

.hero-info-item > i:first-of-type {		/* Gilt nur für das Haupt-Icon */
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 0; /* Reset des vorherigen Abstands */
	margin-top: 1px;
}

.hero-info-text-wrapper {
    display: flex;
    flex-direction: column; /* Stapelt Haupt- und Zusatzinfo */
    text-align: left;
	min-width: 0;
	margin-top:-2px;
}

.hero-main-info {
    font-weight: bold;
    font-size: 0.85rem;
    display: block;
    color: var(--text-main);
	white-space: normal;
}

.hero-sub-info {
    font-size: 0.75rem; /* Kleiner als die Hauptinfo */
    color: var(--text-main);
    margin-top: 2px;   /* Minimaler Abstand zur oberen Zeile */
	white-space: normal;
}


.hero-stats {
    margin-left: auto; /* Magischer Befehl: Schiebt den Container komplett nach rechts */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Richtet den Text innerhalb des Containers rechtsbündig aus */
    text-align: right;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-main);
	min-width:240px;
}

.hero-rating-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    font-size: 1.1rem; /* "Schnitt" etwas größer wie im Screenshot */
	margin-top:-5px;
}

.hero-stars {
    color: var(--gold-color);
	font-size: 1.2rem;
	filter: drop-shadow(0 0 1px rgba(243, 156, 18, 0.2));
}

.hero-votes-row {
	font-size: 0.8rem;
}

.hero-awards-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 10px;
}

.hero-awards-row img {
    height: 30px; /* Einheitliche Höhe für die kleinen Icons */
    width: auto;
    object-fit: contain;
}







/* Box Basisdaten */
/* ************** */


.info-box-sameheight {
	height: 100%;		/* Boxen auf gleiche Höhe */
}

/* Spiele-Editionen */
.edition-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}
.edition-list li.elli {
	border: 1px dotted var(--border-color);
	padding:5px; 
	margin: 0 0 5px 15px; 
	background: var(--table-hover-color); 
	border-radius: 5px;
}

.edition-header {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    font-size: 0.9rem;
}
.edition-header img, .edition-header i {
	margin-top: -1px;
}

.edition-publisher-sublist {		/* Die eingerückten Verlage */
    list-style: none;
    padding-left: 15px;
    margin: 0; 	/* margin: 0 0 12px 0; */
}

.edition-publisher-sublist li {
    font-size: 0.85rem;
    color: var(--light-color);
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px 0;
	background: none;
	border: none;
}

/* Flaggen-Preview-Styling */
.edition-flag-summary {
    list-style: none;
    cursor: pointer;
}

.edition-flag-preview {
    /*display: flex;*/
    gap: 4px;
    margin: 10px 0 0 20px;
}

.edition-details-button-wrapper {		/* Container für den Button, um Abstände zu steuern */
    margin: 10px 0 0 20px;
}

details[open] .edition-flag-preview, details[open] .edition-details-button-wrapper {		/* Die Magie: Wenn das details-Tag offen ist, verstecke die Vorschau-Elemente */
    display: none;
}

.edition-flag-containter:has(details[open]) .edition-flag-preview {		/* Theoretischer CSS-Weg */
    display: none;
}



/* Familien- / Erweiterungen- / Zubehöhr-Listen ... */

.relation-category {
    margin-bottom: 20px;
}

.relation-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--light-color);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.relation-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 15px;
}

.relation-list li {
    margin-bottom: 0px;
}

.relation-list a {
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.relation-list i {
    font-size: 0.8rem;
    color: var(--light-color);
    width: 16px;
    text-align: center;
}

.relation-sub-link {		/* Spezial-Styles für Untergruppen */
    margin-left: 20px;
    font-size: 0.8rem !important;
}
.relation-sub-link + a{
	font-size: 0.8rem !important;
}


/* Container für die Badges */
.badge-container {
    display: flex;
    flex-wrap: wrap; /* Zeilenumbruch, falls zu viele Badges */
    gap: 8px;
}

/* Grund-Style für ein Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 10px 3px 10px;
    border-radius: 50px; /* Pill-Form */
    font-size: 0.80rem;
    font-weight: 500;
    background: var(--box-secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

/* Spezifische Farben für die Kategorien */
.badge.mechanic {
    border-left: 3px solid var(--badge-mechanic-color);
	cursor: help;
}

.badge.mode {
    border-left: 3px solid var(--badge-mode-color); 
	cursor: help;
}

.badge.tag {
    border-left: 3px solid var(--badge-tag-color); 
    background: var(--box-secondary-bg);
    transition: all 0.2s ease;
	font-size: 0.7rem;
}

/* Level 2: Mittlere Zustimmung */
.badge.tag.lvl-2 {
	font-size: 0.75rem;
	border-left: 4px solid var(--badge-tag-color); 
}

/* Level 3: Hohe Zustimmung */
.badge.tag.lvl-3 {
	font-size: 0.85rem;
	border-left: 5px solid var(--badge-tag-color); 
}

/* Level 4: Top-Zustimmung (Hot Tag) */
.badge.tag.lvl-4 {
	font-size: 0.85rem;
    font-weight: bold;
	border-left: 7px solid var(--badge-tag-color); 
}
.badge.tag .fa-search, .badge.tag .fa-angles-up {
    font-size:0.7rem;
}

.badge i.information-icon {
	margin-top:1px;
}

/* Credits für Autoren & Grafiker */
.credit-box .fa-search {
	margin-right:3px;
}

/* Liste der Anleitungen */
.rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rules-list li {
	display: flex;
    white-space: nowrap; /* Verhindert den Umbruch im ersten Schritt */
    margin-bottom: 5px;
	align-items: flex-start;
	gap: 2px;
}

.rules-list li a.icon-link {
	font-size: 0.8rem;
    display: flex;
    align-items: flex-start;
    white-space: normal; /* Erlaubt dem langen Text im Span, später trotzdem umzubrechen */
    overflow: hidden;    /* Sauberer Abschluss */
}
.rules-list li i.url-icon {
    margin-top: 3px;         /* Manueller Fein-Tweak: Icons haben oft "Luft" im Font-Design */
    flex-shrink: 0;
}
.rules-list .inline-flag {
    margin-top: 3px;         /* Fein-Tweak für die Flagge */
    flex-shrink: 0;
}
.rules-list li span {
    line-height: 1.4;        /* Sorgt für gute Lesbarkeit bei Umbrüchen */
    display: inline-block;
    padding-top: 0;          /* Sicherstellen, dass kein Padding stört */
	margin:-1px 0 0 5px;
	
}

/* Liste der Spielmaterialien */
.material-list {
    font-size: 0.8rem;
    color: var(--text-main);
    margin-top: 3px;
}

.material-list ul {
    list-style: none;      /* Entfernt die Standard-Punkte */
    padding: 0;            /* Entfernt die Einrückung links */
    margin: 0; 
}

.material-list li {
    padding: 1px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Optional: Eigene, kleinere Bullets für bessere Linksbündigkeit */
.material-list li::before {
    content: "•";
    color: var(--text-main);
    font-weight: bold;
}

.inner-row-stack-label {
	flex: 0 0 110px;
}
.inner-row-stack-value {
	margin-top: 0;
}



/* Box Meine Spieledetails */
/* *********************** */


#myown_owninginfobox {
	background: var(--box-secondary-bg);
	padding: 5px;
	margin-bottom:10px;
	margin-left:10px;
	border-radius: 4px;
}

.user-stats-box {
    padding: 12px;
}

.user-stats-row {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-stats-content-wrapper {
    display: flex;
    flex-direction: column; /* Stapelt Checkbox und Link */
    align-items: flex-start;
}

.user-stats-box-edit-link {
    display: block;
    /* Einrückung = Breite Checkmark (14px) + Margin-Right (10px) */
    margin-left: 26px; 
    font-size: 0.75rem;
	margin-top:8px;
}

.user-stats-text-stack .user-stats-box-edit-link {
	margin-left: 0px; 
}

.user-stats-summary {		/* Aufklappbox mit Infos zu den Versionen im Besitz */
    display: flex;
	gap:6px;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    list-style: none;
}


.user-stats-content-wrapper.user-stats-item-sold {
    display: flex !important;
	flex-direction: row !important;
    align-items: flex-start; /* Richtet das Icon an der ersten Textzeile aus */
    gap: 5px;               /* Abstand zwischen Icon und Textblock */
    width: 100%; /* Sicherstellen, dass die volle Breite genutzt wird */
}

.user-stats-item-sold i {		/* Euro Icon */
    flex-shrink: 0;    /* WICHTIG: Verhindert, dass das Icon zusammengedrückt wird */
    width: 14px;       /* Passend zu deiner neuen Checkbox-Größe */
    text-align: center;
	margin:2px 7px 0 0;
}

.user-stats-text-stack {
    display: flex;
    flex-direction: column;
    flex-grow: 1;      /* Der Textblock nimmt den restlichen Platz ein */
    min-width: 0;      /* Verhindert Overflow-Probleme in Flexbox */
	white-space: normal;
}
.user-stats-label-text {
	font-size:0.95rem;
	font-weight: 600;
	margin-top:-3px;
}

.user-stats-summary::-webkit-details-marker {
    display: none; /* Standard-Pfeil verstecken */
}

/* Den Inhalt der Box bündig unter den Text schieben */
.user-stats-expand-box {
    /* Einrückung = Checkmark (14px) + Margin (10px) */
    padding-left: 20px; 
    margin-top: 5px;
	font-size: 0.8rem;
}



/* Grid-Layout für die Details */
.user-data-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
	font-size:0.8rem;
}

.user-data-grid .user-data-grid-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
}

.user-data-grid-row {
    display: flex;
    font-size: 0.8rem;
}

.user-data-grid-label {
    flex: 0 0 140px; /* Feste Breite wie bei den anderen Boxen */
    color: var(--text-main);
    font-weight: bold;
}
.user-data-grid-label i:first-of-type {
	margin-right:3px;
}

.user-data-grid-value {
    flex: 1;
	line-height: 1.4;
}


.user-data-grid-star-rating i {
    color: var(--gold-color);
	letter-spacing: 2px;
}


/* Anzeige der verkauften Spiele */
/* ***************************** */

.sold-item {
    background: var(--box-secondary-bg); /* Dezenter Hintergrund */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative; /* Wichtig für die Positionierung der Buttons */
    transition: transform 0.2s ease;
}

.sold-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-right: 70px; /* Platz für die Buttons oben rechts */
}

.sold-item-title strong {
    display: block;
    font-size: 1rem;
    color: var(--primary-color);
}

.sold-flags {
    font-size: 0.8rem;
    opacity: 0.8;
}

.sold-item-details {
    font-size: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
}

.sold-detail-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.sold-detail-note {
    font-style: italic;
    color: #999;
}

/* Aktions-Buttons in der Karte */
.sold-item-actions {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    gap: 6px;
}

.sold-btn-edit, .sold-btn-delete {
    padding: 6px 10px;
    transition: all 0.2s;
}

/* Anzeige der Versionsinformationen */
/* ********************************* */
.ver-controls {
    text-align: right;
    margin-bottom: 10px;
}

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

.ver-details {
    background: var(--table-hover-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.ver-summary {
    padding: 6px;
    cursor: pointer;
    list-style: none; /* Entfernt Standard-Pfeil */
    display: flex;
    align-items: center;
    background: var(--box-header-bg);
	color: var(--primary-color);
}

.ver-summary::-webkit-details-marker { display: none; } /* Safari Fix */

.ver-details[open] .ver-summary  {
    background: var(--tabs-header-activecol);
}

.ver-title {
    flex-grow: 1;
    font-weight: bold;
    color: var(--primary-color);
}

.ver-summary:hover .ver-title { 
	color: var(--text-main);
}

.ver-icon {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    opacity: 0.6;
}

.ver-details[open] .ver-icon {
    transform: rotate(180deg);
}
.ver-summary.is-expanded {
    color: var(--text-main);
    background: var(--select-blue);
}

.ver-content {
    padding: 8px;
    background: var(--box-bg);
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
}

.ver-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten für technische Daten */
    gap: 10px;
    margin-bottom: 15px;
}

.ver-grid-item {
    padding: 0;
    border-radius: 3px;
}

.ver-extra-info {
    border-top: 1px dotted var(--border-color);
    padding-top: 10px;
}

.ver-grid-item strong, .ver-extra-info strong{
    color:var(--light-color);
	text-transform: uppercase;
}


/* Anzeige der Besitzliste auf Versionsbasis */
/* ***************************************** */
.verdetail-selection-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
}

.verdetail-row {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.verdetail-row:hover {
    background: var(--box-secondary-bg);
}

/* Zustand: Im Besitz */
.verdetail-row.is-owned {
    background: var(--box-secondary-bg); 
    border-color: var(--stat-bar-high-col);
}

/* Linke Status-Zone für den Kreis/Haken */
.verdetail-status-indicator {
    width: 24px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verdetail-check-icon {
    font-size: 1.2rem;
    color: #555; /* Neutrales Grau für den leeren Kreis */
    transition: all 0.2s ease;
}

/* Umschalten des Icons bei Besitz */
.verdetail-row.is-owned .verdetail-check-icon::before {
    content: "\f058"; /* FontAwesome fa-circle-check */
    color: var(--stat-bar-high-col); /* Dein Grün */
    font-weight: 900;
}

.verdetail-row:not(.is-owned) .verdetail-check-icon::before {
    content: "\f111"; /* FontAwesome fa-circle */
    font-weight: 400;
}

.verdetail-row .inline-flag { 
	margin-top: -3px;
}

.verdetail-name { 
	flex-grow: 1; 
	font-size: 0.85rem; 
	color: var(--light-color); 
}

.verdetail-row.is-owned .verdetail-name { 
	font-weight: 600; 
	color: var(--text-main); 
}

/* Rechte Aktions-Zone für den Details-Button */
.verdetail-action-zone {
    margin-left: 15px;
    display: none; /* Nur bei Besitz zeigen */
}

.verdetail-row.is-owned .verdetail-action-zone {
    display: block;
}



/* Box (Bewertungs-) Statistiken */
/* ***************************** */
.rating-display {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
}
.rating-count-row, .rating-total-row {
	margin-bottom: 15px;
}

.rating-row {
	line-height:1.8 !important;
}

.rating-row .inner-row-stack-label  {
	flex: 0 0 40%;
	color: var(--text-man);
}
.rating-row .inner-row-stack-label i  {
	margin: 6px 8px 0 0;
}

.rating-stars {				/* Die Sterne-Icons */
	color: var(--gold-color);
    font-size: 0.9rem;
    letter-spacing: 2px;
    min-width: 100px; /* Hält die Sterne bündig */
}

.rating-num {				/* Die numerische Anzeige dahinter */
    font-size: 0.85rem;
    color: var(--light-color);
    white-space: nowrap;
}

/* Rating-Grafik-Statistik */
.stats-container {
    background: var(--box-bg);
    border-radius: 8px;
	border: 1px solid var(--text-main);
	padding:8px;
    margin-right: 5px;
	margin-top:10px;
    font-family: sans-serif;
}


.stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
}

.stat-label {
    flex: 0 0 70px;
    font-size: 0.75rem;
    color: var(--text-main);
	text-transform: uppercase;
}

.stat-bar-wrapper {
    flex-grow: 1;
	cursor: help;
}

/* Der graue Bereich (Min/Max oder einfach Hintergrund) */
.stat-bar-track {
    background: var(--box-bg);
    height: 16px;
    border-radius: 8px;
	border:1px solid var(--text-main);
    position: relative;
    overflow: hidden; /* Damit der Balken abgerundet bleibt */
	box-shadow: var(--mini-shadow);
}

/* Der gelbe Fortschrittsbalken */
.stat-bar-fill {
    height: 100%;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 4px;
    
	--calculated-saturation: calc(20% + (var(--stat-saturation, 0) * 1.3));
    background-color: hsl(
        var(--stat-hue), 
        clamp(20%, var(--calculated-saturation), 100%),
        50%
    );
}

.stat-percent {
    flex: 0 0 40px;
    font-size: 0.75rem;
    text-align: right;
    font-weight: bold;
}


/* Der Min/Max Bereich ALS OVERLAY (Vordergrund) */
.stat-bar-track::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* Nutzt die Variablen für die Positionierung */
    left: var(--min);
    width: calc(var(--max) - var(--min));
    
    /* Optik des Zielbereichs: Ein dezenter Rahmen mit leichtem Glow oder Schatten */
    /*background: rgba(255, 255, 255, 0.3); /* Ganz leichte Aufhellung */
    border-left: 2px solid var(--text-main);  /* Linke Grenze (Min) */
    border-right: 2px solid var(--text-main); /* Rechte Grenze (Max) */
    pointer-events: none; /* Klicks gehen durch auf den Balken */
    z-index: 2;
}
.stats-show-median, .stats-show-median a {
	font-size:0.75rem;
}


/* Komplexität */
.complexity-row {
	width: 200px;
	margin-top:5px;
}
.stat-bar-fill.bar-complexity {
	/* 0% (Wert 1)   -> Hue 120 (Grün)
       50% (Wert 3)  -> Hue 60 (Gelb)
       100% (Wert 5) -> Hue 0 (Rot)
    */
/* Wir berechnen die Zielfarbe basierend auf deinem Wert */
    --target-hue: calc(var(--complex-bar-green-hue) - (var(--complexity-percent) * 1.3));
    
    /* Der Verlauf startet links fix bei Grün und geht rechts zur Zielfarbe */
    background: linear-gradient(
        to right, 
        hsl(var(--complex-bar-green-hue), var(--complex-bar-green-sat), 45%) 0%, 
        hsl(var(--target-hue), var(--complex-bar-red-sat), 45%) 100%
    );

    /* Damit der Übergang beim Laden flüssig aussieht */
    transition: width 0.8s ease-in-out; 
}



/* Box Awards */
/* ********** */

.awards-list {
    margin-top: 0px;
    padding-left: 5px;
    animation: slideDown 0.3s ease-out;
}

.awards-list li {
    display: flex;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.awards-list li:last-child {
    border-bottom: none;
}

.award-logo-container {
    flex: 0 0 40px; /* Feste Breite für die Logo-Spalte */
    display: flex;
    justify-content: center;
    margin-right: 12px;
}

.award-logo {
    max-width: 32px; /* Logos einheitlich klein halten */
    max-height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

.award-text {
    font-size: 0.8rem;
    line-height: 1.2;
}

.award-name {
    color: var(--text-main);
}

.award-rank {
    color: var(--light-color);
    font-size: 0.8rem;
    margin-left: 4px;
}


.award-top-lists-box .inner-row-fixed-label {
	flex: 0 0 130px;	/* Andere Breite der 1. Spalte */
	color: var(--text-main);
}

.award-yearstat-link {
    display: block;      /* Nimmt die volle Breite ein */
    text-align: right;   /* Richtet den Inhalt (Icon + Link) rechts aus */
    margin-top: 10px;    /* Etwas Abstand zur Tabelle oben */
    font-size: 0.9rem;
	font-weight: 600;
}

.award-yearstat-link i {
    margin-right: 5px;   /* Kleiner Abstand zwischen Icon und Text */
}





/* Box Stärken & Schwächen */
/* *********************** */

.pro-con-box {
	margin-top:20px; 
}

.argument-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 5px;
}

.arg-item {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    border-left: 4px solid transparent;
    font-size: 0.9rem;
    background: var(--box-bg); /* Dein Standard-Hintergrund */
    box-shadow: var(--box-shadow);
	color: var(--text-main);
}

/* Farben für Stärken */
.arg-item.pos {
    background-color: var(--arg-pos-bg); 
    border-left-color: var(--arg-pos-border); 
}

/* Farben für Schwächen */
.arg-item.neg {
    background-color: var(--arg-neg-bg); 
    border-left-color: var(--arg-neg-border); 
}

.arg-score {
    font-weight: bold;
    min-width: 35px;
	margin-top:-1px;

}

.arg-text {
    flex-grow: 1; /* Text nimmt den verfügbaren Platz ein */
    line-height: 1.4;
	text-align: left;
	display: block;
}

.arg-actions {
    display: flex;
    gap: 5px;
    margin-left: 10px;
}
.arg-actions-pre {
    display: flex;
    gap: 5px;
	flex-direction: row;
    margin-right: 10px;
}
.empty-arg-actions-pre {
	width:50px;
}

.arg-item.is-moving {
    transition: transform 0.4s ease-in-out;
    z-index: 10;
}



/* Box Partien */
/* *********** */

.played-stats-row span.inner-row-fixed-label {
	flex: 0 0 160px;
}




/* Box Errungenschaften */
/* ******************** */

.achievement-container {
    flex-direction: column; /* Stapelt Grid und Button übereinander */
    gap: 5px;
	display: block;
    width: 100%;
    box-sizing: border-box;
}
.achievement-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    padding: 8px;
}

.achievement-grid.expanded {
    max-height: 2000px; /* Klappt alles aus */
}

.achievement-item {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.achievement-item:hover {
    transform: scale(1.1);
    z-index: 10;
	cursor:help;
}

.achievement-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Der Zähler / Count-Badge */
.achievement-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: var(--primary-color); /* Deine Hauptfarbe (z.B. Blau oder Orange) */
    color: var(--text-inverted-main);
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid var(--container-bg); /* Hebt den Badge vom Icon ab */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    min-width: 12px;
    text-align: center;
}

/* Klasse für noch nicht erreichte Errungenschaften */
.achievement-item.not-earned {
    opacity: 0.5;                /* Macht das gesamte Item blasser */
    filter: grayscale(100%);     /* Entzieht dem Bild alle Farben */
    border-style: dashed;        /* Optional: Gestrichelter Rand für "noch nicht da" */
    background-color: rgba(0,0,0,0.02);
}

.achievement-item.not-earned:hover {
    filter: grayscale(50%);      /* Beim Hover leicht Farbe zeigen */
    opacity: 0.8;
    transform: scale(1.05);
	cursor:help;
}

/* Den Zähler-Badge bei Wert 0 speziell behandeln */
.achievement-item.not-earned .achievement-count {
    background-color: #999;      /* Neutrales Grau statt deiner Primärfarbe */
    display: none;               /* ODER: Ganz ausblenden, wenn der Wert 0 ist */
}

/* Das Award-Icon oben links */
.owner-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background-color: #34a853; /* Ein schönes "Erfolgs-Grün" */
    color: white;
    font-size: 0.75rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none; /* Standardmäßig unsichtbar */
    align-items: center;
    justify-content: center;
    border: 2px solid var(--container-bg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 5;
}
/* Nur anzeigen, wenn die Klasse .is-earned vorhanden ist */
.achievement-item.is-earned .owner-badge {
    display: flex;
}

/* Optional: Wenn geschafft, kann das Bild auch wieder vollfarbig sein, 
   selbst wenn es global eine leichte Transparenz hätte */
.achievement-item.is-earned {
    opacity: 1 !important;
    filter: none !important;
    border-color: #34a853; /* Grüner Rahmen für geschaffte Dinge */
}
.extra-achievement {
    display: none !important;
}
.achievement-grid.show-all .extra-achievement {
    display: flex !important;
}

.achievement-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color); /* Oder ein helles Grau #f0f0f0 */
    color: #ccc;                       /* Dezente Farbe für das Icon */
    font-size: 1.5rem;                 /* Größe des Platzhalter-Icons */
    border-radius: 4px;
}

/* Falls das Achievement verdient wurde, färben wir das Platzhalter-Icon dezent ein */
.is-earned .achievement-placeholder {
    color: #ffcc00; /* Gold-Ton für verdiente Achievements */
    background-color: rgba(255, 204, 0, 0.05);
}

/* Falls nicht verdient, bleibt es grau */
.not-earned .achievement-placeholder {
    color: #ddd;
    background-color: #fafafa;
}

.achievement-item.toggle-item {
    cursor: pointer;
    background: var(--button-bg-color);
    border: 1px solid var(--primary-color); /* Gestrichelt wirkt wie "hier ist noch was" */
    color: var(--text-main);
    font-size: 1.2rem;
	display:none;
}
.achievement-item.toggle-item span {
	margin-top:-2px;
}
.achievement-item.toggle-item:hover {
    border-style: solid;
    background: var(--button-hover-bg-color);
    box-shadow: var(--button-shadow-color);
	color: var(--text-main);
	transform: none;
	
}




/* Boxen Listen & Links */
/* ******************** */


#linkedit_tagbox . {
	border: 0;
	padding: 0;
}

#linkedit_tagbox.error-field {
	border: 1px solid var(--primary-color);
	background-color: var(--error-box-bg);
	border-radius:5px;
	padding: 5px;
}

.link-manager-box {
    padding: 0 !important;
    overflow: hidden;
}

.lmb-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background-color: var(--box-secondary-bg);
    border-bottom: 1px solid var(--border-color);
}

.lmb-filter-pill {
    background: var(--button-bg-color);
    border: 1px solid var(--primary-color);
    color: var(--text-main);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lmb-filter-pill:hover {
    background: var(--button-hover-bg-color);
    box-shadow: var(--button-shadow-color);
	color: var(--text-main);
}

.lmb-filter-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Ausblenden der nicht passenden Elemente */
.lmb-list-item.is-hidden {
    display: none;
}


.lmb-scroll-list {
    max-height: 275px; /* Hier die Begrenzung */
    overflow-y: auto;
}

/* Scrollbar Styling für modernen Look */
.lmb-scroll-list::-webkit-scrollbar {
    width: 8px;
}
.lmb-scroll-list::-webkit-scrollbar-track {
    background: var(--box-secondary-bg);
}
.lmb-scroll-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

/* Listen-Element */
.lmb-list-item {
    display: flex;
    align-items: center;
    padding: 5px 5px;
    border-bottom: 1px solid var(--border-color);
    gap: 15px;
    transition: background 0.15s;
}

.lmb-list-item:hover {
    background-color: rgba(var(--primary-color-rgb), 0.05);
}

/* Stern Icon */
.lmb-item-visual {
	display: flex;
    align-items: center;
    justify-content: flex-start; /* Hält den Stern linksbündig innerhalb seines Bereichs */
    width: 20px;                 /* Feste Breite: genug Platz für Stern + 2-stellige Zahl */
    flex-shrink: 0;              /* Verhindert, dass der Bereich zusammengedrückt wird */
}
/* Grundzustand: Stern ist leer und dezent */
.lmb-star-vote-icon {
    font-size: 0.9rem;
    color: var(--secondary-color);
    transition: all 0.2s ease;
}

/* Zustand: Mindestens eine Bewertung vorhanden */
.has-votes .lmb-star-vote-icon {
    filter: drop-shadow(0 0 2px rgba(241, 196, 15, 0.4));
}

/* Vote-Zähler (kleine Zahl neben/unter dem Stern) */
.lmb-vote-count {
    font-size: 0.65rem;
    color: var(--text-main);
    margin-left: 1px;
	margin-top: 5px;
    font-weight: bold;
}

/* MouseOver-Effekt: Nur wenn ich noch nicht bewertet habe */
.can-vote .lmb-star-vote-icon {
    cursor: pointer;
	color: var(--primary-color);
}

.can-vote:hover .lmb-star-vote-icon {
    transform: scale(1.25);
}

.lmb-item-details {			/* Link-Details */
	flex-grow: 1;
    display: flex;         /* Aktiviert Flexbox */
    align-items: center;    /* Zentriert alle Inhalte vertikal mittig */
    gap: 3px;              /* Gleichmäßiger Abstand zwischen Flagge, Icon und Link */
    overflow: hidden;      /* Wichtig für das Ellipsis (Abschneiden) des Links */
}

.lmb-item-link {
    font-size: 0.8rem;
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lmb-item-actions {			/* Aktions-Buttons */
    display: flex;
    gap: 8px;
}
.lmb-item-actions i {			
	font-size:0.9rem;
}





/* Boxen Bilder & Videos */
/* ********************* */

.image-gallery-grid, .video-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0px;
}

.image-gallery-item  {
    display: flex;
    flex-direction: column;
    width: 135px; /* Deine gewünschte Vorschaubreite */
}
.video-gallery-item  {
    display: flex;
    flex-direction: column;
    width: 120px; /* Deine gewünschte Vorschaubreite */
}

.image-gallery-wrapper, .video-gallery-wrapper {
    width: 125px;
    height: 125px; /* Quadratischer Rahmen für die Einheitlichkeit */
    background-color: var(--box-secondary-bg); 
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
	padding: 7px;
	box-shadow: var(--picture-shadow-small);
	transition: transform 0.2s, border-color 0.2s;
}
.video-gallery-wrapper {
	width: 110px;
	height: 70px; /* Kein Quadratischer Rahmen für die Videos */
}

.image-gallery-wrapper:hover, .video-gallery-wrapper:hover {
    border-color: var(--primary-color);
    transform: scale(1.03);
}

.image-gallery-wrapper img, .video-gallery-wrapper img {
    max-width: 100%;
    max-height: 100%;
    /* Verhindert Verzerrung und Beschneidung: */
    object-fit: contain; 
    display: block;
	border-radius: 4px;
}

/* Bildtitel unter dem Bild */
.image-gallery-title, .video-gallery-title {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-main);
    text-align: center;
    line-height: 1.2;
    /* Falls der Titel zu lang ist: */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Zeigt max. 2 Zeilen Text */
    -webkit-box-orient: vertical;
}


/* Box Fotoalben */
/* ************* */


.album-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5x; /* Mehr Gap wegen der schrägen Layer */
    padding: 5px 0 10px 0;
}

.album-item {
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.album-stack {
    position: relative;
    width: 70px;
    height: 50px;
    cursor: pointer;
    margin-bottom: 15px;
}

/* Die hinteren Papierschichten */
.album-stack-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: var(--box-bg);*/
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.layer-3 { transform: rotate(-6deg); background: #f9f9f9; }
.layer-2 { transform: rotate(-3deg); background: #fdfdfd; }

/* Die oberste Schicht mit dem Icon */
.album-stack-content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: center;
	/*background-color: var(--stack-transparent-bg);*/
	/*background-blend-mode: var(--stack-transparent-mode); */
}

.album-stack-content i {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.album-photo-count, .album-photo-count-with-pic {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-main);
    background: var(--box-bg);
	border-radius: 3px;
	padding: 1px;
}
.album-photo-count-with-pic {
	margin-top:20px;
}

/* Hover-Effekt: Der Stapel fächert sich leicht auf */
.album-stack:hover .layer-3 { transform: rotate(-12deg) translate(-5px, -2px); }
.album-stack:hover .layer-2 { transform: rotate(-6deg) translate(-2px, -1px); }
.album-stack:hover .album-stack-content { transform: translateY(-2px); border-color: var(--primary-color); }


.album-info {
    text-align: center;
    width: 100%;
}

.album-title {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 7px;
}


/* Box Infobereich */
/* *************** */
.infoarea_linkedbox {
	border: 1px solid var(--border-color);
	background: var(--box-secondary-bg);
	border-radius: 5px;
	padding: 5px 10px 0 10px;
	font-size: 0.8rem;
	margin-bottom: 15px;
}

/* Box Forum */
/* ********* */

.table-forum .sct-forum-topic-title {
    width: auto; /* Nimmt den restlichen Platz ein */
}
.table-forum .sct-forum-col-stats {		/* Stat-Spalte schmal halten */
    width: 60px;
    text-align: center;
}
.table-forum .sct-forum-col-last-post {	/* Die Spalte für den letzten Beitrag optimieren */
    width: 150px; /* Feste Breite, damit der Titel Platz hat */
}



/* Box Dateien */
/* *********** */

.table-file .sct-file-col-size {		/* Stat-Spalte schmal halten */
    width: 60px;
    text-align: center;
}
.table-file .sct-file-topic-title {
    width: auto; /* Nimmt den restlichen Platz ein */
}
.table-file .sct-file-col-stats {		/* Stat-Spalte schmal halten */
    width: 60px;
    text-align: center;
}
.table-file .sct-file-col-creator {	/* Die Spalte für den letzten Beitrag optimieren */
    width: 150px; /* Feste Breite, damit der Titel Platz hat */
}


/* Box Crowdfunding */
/* **************** */

#fund_lng_outerbox.error-field {
	border: 1px solid var(--primary-color);
	background-color: var(--error-box-bg);
}

.cf-grid-container {
    display: flex;
    flex-wrap: wrap; /* Lässt Boxen in die nächste Zeile rutschen */
    gap: 15px; /* Abstand zwischen den Boxen */
    margin-bottom: 0px;
}
.mini-flag {
	margin-right:7px;
}

/* Die einzelne Box (Kompakt-Version) */
.crowdfunding-box {
    flex: 1 1 300px; /* Wachsen, Schrumpfen, aber Basisbreite 320px */
    max-width: 340px; /* Verhindert, dass sie bei riesigen Bildschirmen zu breit wird */
    display: flex;
    flex-direction: column;
    padding: 0 !important; /* Header-Style benötigt vollen Rand */
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.cf-header {
    display: flex;
    justify-content: space-between; /* Schiebt Plattform links und Edit rechts */
    align-items: center;            /* Zentriert alles vertikal */
    padding: 4px 12px;
    background-color: var(--box-secondary-bg);
    border-bottom: 1px solid var(--border-color);
}

.cf-platform {
    display: flex;
    align-items: center;            /* Zentriert Logo und Textgruppe vertikal zueinander */
    gap: 12px;                      /* Abstand zwischen Logo und Text */
}

.cf-title-group {
    display: flex;
    flex-direction: column;         /* Stapelt Titel und Meta-Info untereinander */
    justify-content: center;
}

.cf-sub-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.1;               /* Engerer Zeilenabstand für kompakte Optik */
    border: none !important;        /* Falls globale H4-Styles Linien haben */
}

.cf-meta {
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
}

.cf-logo {
    height: 35px;                   /* Etwas größer für bessere Sichtbarkeit */
    width: auto;
    object-fit: contain;
}


.cf-content {
    padding: 10px;
}

/* Kompakte Details für Nebeneinander-Anzeige */
.cf-details-compact {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin: 10px 0;
    color: var(--text-main);
    padding-top: 0px;
}

.cf-campaign-link {
    display: block;
    text-align: center;
    background: var(--box-secondary-bg);
    padding: 3px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid var(--primary-color);
}

.tag-badge-fund {
	cursor:pointer;
}
.tag-badge-fund i {
	top: -5px !important;
	left: 3px !important;
}


/* Leere Inhaltsboxen */
.empty-box-state {
	text-align: center; 
	padding: 10px; 
	opacity: 0.6;
}
.empty-box-state i {
	font-size: 3rem; 
	margin-bottom: 10px; 
	color: var(--light-color);
}
.empty-box-state p {
	font-size: 1.1rem; 
	color: var(--light-color);
}



/* Sammlerwerte & Kaufpreise */
/* ************************* */

#cv-container .sc-table {
	font-size:0.75rem;
}
.cv-version-row td {
    background-color: var(--table-title-color) !important; /* Nutzt deine Header-Farbe */
    padding: 0 !important; /* Damit das div innen bündig abschließt */
    border-bottom: 1px solid var(--border-color);
}

.cv-version-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 10px;
}

.cv-flag {
    width: 18px;
    border-radius: 2px;
}

.cv-version-name {
    font-weight: 700;
    font-size: 0.85rem;
    flex-grow: 1;
}

/* Der Durchschnitt als kleiner Badge */
.cv-version-avg {
    font-size: 0.7rem;
    background: var(--secondary-color);
    color: var(--text-main);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.cv-price {
    font-weight: 700;
    white-space: nowrap;
}

.cv-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}



/* Spieleliste bei Kollektionen */
.sc-inc-grid-full {
    display: grid;
    /* Erzeugt Spalten, die mindestens 320px und maximal 1fr breit sind */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 15px;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1500px) { /* Wert angepasst: 3 Spalten à ca. 320px + Gaps */
    .sc-inc-grid-full {
        /* Erzwingt genau 3 Spalten, sobald genug Platz da ist */
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* --- 4. Die Card --- */
.sc-inc-card-new {
    display: flex;
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px; 
    overflow: hidden;
    box-sizing: border-box;
}


/* --- 5. Fixierte Bildspalte (Links) --- */
.sc-inc-cover-side {
    flex: 0 0 120px; 
    width: 120px;
    max-width: 120px;
    min-width: 120px;
    max-height: 120px;
	min-height: 120px;
    position: relative;
    background: var(--box-bg);
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 5px;
}

/* Weißer Platzhalter */
.sc-inc-cover-side.placeholder-bg {
    background: #ffffff !important;
    border-right: 1px solid #cccccc;
}

/* --- 6. Die Bilder (Skalierung) --- */
.sc-inc-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.sc-inc-rating-overlay {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0,0,0,0.5);
    color: var(--gold-color);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 5;
}

.sc-inc-no-img-text { 
    color: #444; 
    font-size: 0.75rem; 
    text-align: center;
    padding: 10px;
    font-weight: 500;
}

/* --- 7. Inhalts-Bereich (Rechts) --- */
.sc-inc-main-info { 
    padding: 10px 12px; 
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden; 
    box-sizing: border-box;
	position: relative;
}

.sc-inc-title {
    color: var(--text-main);
    margin: 0 25px 5px 0;
    font-size: 0.9rem;
    font-weight: bold;
}

.sc-inc-stats-row {
    display: flex;
    gap: 12px;
    color: #888;
    font-size: 0.8rem;
	margin-right:25px;
}

.sc-inc-stats-row i { 
	color: var(--text-main); 
	margin-right: 2px; 
}

.sc-inc-description {
    color: #bbb;
    font-size: 0.8rem;
    line-height: 1.2;
}


.sc-inc-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 10;
	flex-direction: column;
}

.sc-inc-actions i {
    cursor: pointer;
    font-size: 0.8rem;
    transition: color 0.2s;
}




@media screen and (max-width: 1024px) {
	/* Hero-Bereich */
    .hero-game-title {
        margin-left: 0;
        padding-left: 0;
		font-size: 1.2rem; /* Größere Schrift */
	}
	
	.inner-row.procon-split-50 {		/* Stapelt Stärken über Schwächen */
        display: flex;
        flex-direction: column;
    }

	div.award-top-lists-box div span.inner-row-fixed-label {
		flex: 0 0 150px !important;	/* Andere Breite der 1. Spalte */
	}
	
	.award-flex-wrapper {
		display: flex;
		flex-wrap: wrap; /* Erlaubt das Nebeneinanderstehen und Umbrechen */
		gap: 20px;       /* Abstand zwischen den beiden Blöcken */
		align-items: flex-start;
	}
	.award-flex-wrapper .regular-contentbox {
		/* Flex-Basis: Wir sagen, jeder Block möchte mind. 300px haben, 
		   darf aber wachsen (flex-grow: 1) */
		flex: 1 1 200px; 
		min-width: 0; /* Verhindert Layout-Break in Flexbox */
	}
	
}

/* ******************************************/
/* Sonderverhalten zwischen 1025 und 1500px */
/* **************************************** */

@media screen and ((max-width: 1500px) and (min-width: 1025px)) {
	/* Meine Spiele-Detailbox: Eingaben rutschen unterhalb die Überschriften */
    .user-data-grid .user-data-grid-row {
        flex-direction: column; /* Rutscht untereinander */
        gap: 2px;               /* Kleiner Abstand zwischen Label und Wert */
        margin-bottom: 12px;    /* Mehr Platz zur nächsten Gruppe */
    }

    .user-data-grid .user-data-grid-label {
        flex: 0 0 auto;         /* Die feste Breite von 110px wird aufgehoben */
        width: 100%;            /* Label nutzt die volle Breite */
        font-size: 0.85rem;     /* Optional: Etwas kleiner, da es jetzt als Header fungiert */
    }

    .user-data-grid .user-data-grid-value {
        padding-left: 0;        /* Falls du vorher ein Padding hattest */
        width: 100%;
    }
    
    /* Optional: Ein kleiner Einzug für die Werte, damit es strukturierter aussieht */
    .user-data-grid .user-data-grid-value {
        /*padding-left: 4px;*/
    }
	
}


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

    /* Der Container der beiden Spalten */
    .inner-row { 
        flex-direction: column;
    }

    /* Die einzelnen Spalten in der Basisdaten-Box */
    .inner-row-side-65, .inner-row-side-35 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100%;
    }

	
	/* Hero-Bereich */
	.hero-container {
		display: block; /* Verhindert Flex-Probleme auf kleinstem Raum */
	}
	.hero-box {
		gap: 0;
    }
	
    .hero-content {
        padding: 0;
        margin: 0;
    }

    .hero-stats {
		display:none;
        margin-left: 0;
        align-items: flex-start; /* Stats unter dem Text wieder linksbündig */ 
        text-align: left;
        margin-top: 15px;
    }	
	
	.hero-info-item {
		flex: 0 0 100px;
		min-width: auto;
   	}
	
	.hero-info-item i {
		display: none; 
	}
	.hero-main-info {
		font-size: 0.7rem;
	}

	/* Box Statistiken */
	/* *************** */
	
    .rating-display {
        gap: 8px !important;
        justify-content: flex-start !important;
    }
    
    .rating-stars {
        min-width: 0 !important; /* Desktop-Breite für Sterne mobil aufheben */
    }
	
	.stat-percent {
		display:none;
	}

	
}