/* ========================================================================= */
/* === NEUE, VERBESSERTE CSS-DATEI (MOBILE-OPTIMIERT) === */
/* ========================================================================= */
/* === GLOBALE STYLES & LAYOUT === */
* { box-sizing: border-box; }
/* FIX: Verhindert jegliches horizontales Scrollen der gesamten Seite */
html, body {
width: 100%;
overflow-x: hidden;
}
body {
font-family: Arial, sans-serif;
margin: 0; /* Entfernt den Standard-Rand für mobile Ansicht */
background-color: #f4f4f4;
color: #333;
}
.container {
background-color: #fff;
padding: 20px; /* Einheitlicher Innenabstand */
width: 100%; /* Nimmt standardmäßig die volle Breite */
max-width: 900px; /* Maximale Breite auf großen Bildschirmen */
margin: 20px auto; /* Zentriert den Container */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 { color: #4CAF50; }
h2 { color: #333; }
h3 { color: #555; margin-top: 10px; margin-bottom: 5px; }
h4 { color: #666; margin-top: 10px; margin-bottom: 5px; font-size: 1em; }
p { margin-top: 10px; margin-bottom: 10px; font-size: 1.1em; }
label { display: inline-block; margin-right: 10px; margin-bottom: 5px; }
button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin-top: 10px; }
button:hover { background-color: #45a049; }
.button-group { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#status-message { color: #007bff; font-weight: bold; }
/* EINHEITLICHE DEFINITION FÜR ALLE SCROLL-PFEILE (Nur Basis-Styling, Position wird später gesetzt) */
.scroll-arrow {
position: absolute;
display: none;
top: 50%;
transform: translateY(-50%);
z-index: 10;
/* Basis-Styling, das für Desktop und Dashboard gilt */
background-color: rgba(44, 48, 52, 0.8);
color: white;
border: none;
border-radius: 50%;
width: 40px; /* Kleinere Basisgröße */
height: 40px;
font-size: 24px;
line-height: 40px;
text-align: center;
cursor: pointer;
transition: background-color 0.2s;
}
.scroll-arrow:hover {
background-color: rgba(29, 161, 242, 0.8);
}
/* Spezifische Positionierung für Produkt-Grid (größer) - Nur als Fallback */
#scroll-left-button { left: -15px; }
#scroll-right-button { right: -15px; }
/* Spezifische Positionierung für Dashboard (kleiner) - Nur als Fallback */
.scroll-arrow.left { left: -10px; }
.scroll-arrow.right { right: -10px; }
/* Desktop-Anpassung für die Produkt-Grid-Pfeile */
@media (min-width: 550px) {
.grid-wrapper { padding: 0 40px; }
.scroll-arrow { display: block; } /* Wieder anzeigen */
/* Hier könnten Sie die Größe und Position der Produkt-Pfeile anpassen, falls sie auf Desktop größer sein sollen */
#scroll-left-button { left: -15px; }
#scroll-right-button { right: -15px; }
}
/* Mobile-Ausblendung für alle Pfeile (wenn max-width 768px kleiner ist) */
@media (max-width: 768px) {
}
/* ========================================================================= */
/* === NEUE, SWIPE-FÄHIGE TAB-NAVIGATION === */
/* ========================================================================= */
.strain-finder-section {
border: 1px solid #444;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
}
/* 1. Der äußere Container, der das Scrollen ermöglicht */
.tab-buttons-container {
overflow-x: auto; /* Das ist der Schlüssel für das Swipen/Scrollen! */
-webkit-overflow-scrolling: touch; /* Sorgt für flüssiges Scrollen auf iOS */
scrollbar-width: none; /* Versteckt die Scroll-Leiste in Firefox */
margin-bottom: 20px;
}
.tab-buttons-container::-webkit-scrollbar {
display: none; /* Versteckt die Scroll-Leiste in Webkit-Browsern (Chrome, Safari) */
}
/* 2. Der innere Container, der die Buttons hält und breiter als der Bildschirm sein kann */
.tab-buttons {
display: flex;
flex-wrap: nowrap; /* Verhindert, dass die Buttons umbrechen */
gap: 10px;
}
/* 3. Die Tab-Buttons selbst */
.tab-button {
flex-shrink: 0; /* Verhindert, dass Buttons schrumpfen */
padding: 10px 15px;
cursor: pointer;
border: 1px solid #555;
background-color: #333;
color: white;
border-radius: 4px;
transition: background-color 0.2s;
white-space: nowrap; /* Stellt sicher, dass der Text im Button nicht umbricht */
}
.tab-button.active {
background-color: #007bff;
border-color: #007bff;
}
.tab-pane {
display: none; /* Alle standardmäßig versteckt */
}
.tab-pane.active {
display: block; /* Nur der aktive wird angezeigt */
}
/* === MOBILE ANPASSUNGEN (VOLLE BREITE) === */
@media (max-width: 900px) {
body {
margin: 0;
}
.container {
margin: 0;
padding: 15px; /* Etwas weniger Padding auf dem Handy */
border-radius: 0; /* Keine abgerundeten Ecken, da volle Breite */
box-shadow: none; /* Kein Schatten, da bündig mit dem Rand */
}
}
/* =================================================================== */
/* ===== NEU: KORREKTES DASHBOARD & KARTELL-LAYOUT ===== */
/* =================================================================== */
/* 1. Container für EINE swipe-fähige Reihe (hält Karussell und Pfeile) */
.dashboard-container {
position: relative;
margin-bottom: 30px; /* Abstand zwischen den beiden Reihen */
}
/* 2. Das Karussell / der swipe-fähige Bereich selbst */
.dashboard-swipe-container {
display: flex;
flex-direction: row; /* WICHTIG: Erzwingt horizontale Anordnung */
overflow-x: auto; /* WICHTIG: Erlaubt horizontales Scrollen/Swipen */
gap: 20px;
padding: 10px; /* Kleiner Innenabstand, damit Karten nicht am Rand kleben */
scroll-snap-type: x mandatory; /* Sorgt für sauberes Einrasten */
-webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
scrollbar-width: none; /* Scrollbar in Firefox ausblenden */
-ms-overflow-style: none; /* Scrollbar in IE/Edge ausblenden */
}
.dashboard-swipe-container::-webkit-scrollbar {
display: none; /* Scrollbar in Chrome/Safari ausblenden */
}
/* 3. Die interaktiven Karten im Dashboard */
.interactive-card {
/* MOBILE-FIRST: Karte nimmt 80% der Bildschirmbreite ein */
flex: 0 0 80vw;
scroll-snap-align: start; /* Rastet am Anfang der Karte ein */
}
/* 4. Desktop-Anpassung: Feste Breite für die Karten und Pfeile anzeigen */
@media (min-width: 768px) {
.interactive-card {
flex-basis: 320px; /* Feste Breite auf dem Desktop */
}
.dashboard-container .scroll-arrow {
display: block; /* Pfeile auf dem Desktop anzeigen */
}
}
/* 5. Pfeil-Styling (positioniert relativ zum .dashboard-container) */
.dashboard-container .scroll-arrow {
display: none; /* Standardmäßig auf Mobilgeräten ausgeblendet */
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background-color: rgba(44, 48, 52, 0.7);
color: white;
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
font-size: 24px;
cursor: pointer;
transition: background-color 0.2s;
}
.dashboard-container .scroll-arrow:hover {
background-color: rgba(29, 161, 242, 0.8);
}
.dashboard-container .scroll-arrow.left {
left: -15px;
}
.dashboard-container .scroll-arrow.right {
right: -15px;
}
/* === RESTLICHE STYLES (WEITGEHEND UNVERÄNDERT) === */
/* === FORMULAR-ELEMENTE === */
input[type="text"], textarea, input[type="time"], input[type="number"].full-width-input, select.full-width-input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.slider-value { display: inline-block; width: 40px; text-align: center; font-weight: bold; vertical-align: middle; }
.number-input-style { width: 80px; margin-left: 10px; margin-bottom: 5px; padding: 5px; border: 1px solid #ccc; border-radius: 3px; }
.input-group-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* === SEKTIONEN & CONTAINER === */
.form-section { border: 1px solid #e0e0e0; padding: 20px; border-radius: 5px; margin-bottom: 20px; }
.form-section h3 { margin-top: 0; margin-bottom: 15px; color: #007bff; }
.input-method-section { border-top: 1px dashed #e0e0e0; padding-top: 15px; margin-top: 15px; }
.search-section, .barcode-section, .compare-section, .review-section, .qrcode-scanner-section, .csv-import-section, .auth-section, #userProfileSection { border: 1px solid #ddd; padding: 20px; border-radius: 8px; margin-top: 20px; }
.auth-section { max-width: 400px; margin-left: auto; margin-right: auto; }
.effect-category-group { margin-top: 15px; padding: 15px; border: 1px solid #f0f0f0; border-radius: 5px; background-color: #fafafa; }
.effect-inputs-container { padding-left: 0; border-left: none; margin-top: 10px; }
.effect-inputs-container .input-row { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.effect-inputs-container .input-row > label { flex-basis: 100%; text-align: left; padding-right: 0; margin-bottom: 8px; font-weight: bold; }
.effect-inputs-container input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #4CAF50; cursor: pointer; }
/* === SATURN-BEWERTUNG === */
.saturn-rating-block { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
.saturn-rating-visuals { display: flex; justify-content: flex-end; gap: 8px; width: 100%; margin-bottom: 4px; }
.saturn-rating-visuals .saturn-wrapper { flex-basis: 18%; max-width: 42px; aspect-ratio: 1 / 1; position: relative; }
.saturn-rating-numeric { font-size: 0.9em; font-weight: bold; color: #ccc; text-align: right; width: 100%; margin-top: -6px; }
.rating-container-overall.interactive { padding: 15px 10px; border-radius: 8px; background-color: #f0f0f0; margin-bottom: 20px; }
.rating-container-overall.interactive .saturn-svg-rating-display { display: flex; justify-content: center; gap: 15px; }
#overallRatingSaturns .saturn-wrapper { position: relative; flex-basis: 18%; max-width: 50px; aspect-ratio: 1 / 1; cursor: pointer; transition: transform 0.1s ease-in-out; }
#overallRatingSaturns .saturn-wrapper:hover { transform: scale(1.1); }
.saturn-wrapper .saturn-svg-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.saturn-svg-icon.filled .planet { fill: #D2B48C; }
.saturn-svg-icon.filled .ring-part { stroke: #FFD700; stroke-width: 8; fill: none; }
.saturn-svg-icon .planet { fill: #4a4a4a; transition: fill 0.2s; }
.saturn-svg-icon .ring-part { stroke: #5a5a5a; stroke-width: 8; fill: none; transition: stroke 0.2s; }
/* === PRODUKTDETAILS & LISTEN === */
.product-item { border: 1px solid #eee; padding: 15px; margin-bottom: 10px; border-radius: 6px; background-color: #f9f9f9; }
.product-item ul { list-style-type: none; padding-left: 0; margin-top: 5px; margin-bottom: 5px; }
.product-item ul li { margin-bottom: 2px; font-size: 0.9em; color: #555; }
.effect-display-row { display: flex; align-items: center; margin-bottom: 5px; font-size: 0.9em; }
.effect-name { flex-basis: 180px; min-width: 120px; margin-right: 10px; text-align: right; font-weight: bold; color: #555; }
.rating-visual-container { display: flex; align-items: center; flex-grow: 1; }
.static-rating-display { flex-grow: 1; width: auto; margin: 0 10px 0 0; vertical-align: middle; height: 8px; background: #d3d3d3; outline: none; transition: none; border-radius: 5px; cursor: default !important; padding: 0; position: relative; }
.static-rating-display::before { content: ''; display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }
.rating-value-display { width: 40px; text-align: right; font-weight: bold; color: #333; }
.toggle-details { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
.toggle-details .arrow { transition: transform 0.2s; margin-left: 5px; }
.toggle-details.expanded .arrow { transform: rotate(90deg); }
.collapsible-content { display: none; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 10px; border: 1px solid #444; border-radius: 4px; margin-top: 10px; }
/* === DIAGRAMME & VERGLEICH === */
.chart-container, #comparisonChartContainer { position: relative; width: 100%; min-height: 400px; margin-top: 30px; }
.comparison-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.comparison-table th, .comparison-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.comparison-table th { background-color: #f2f2f2; font-weight: bold; }
/* === COCKPIT & HEADER === */
.product-cockpit { padding: 10px; }
.cockpit-main-view { text-align: center; margin-bottom: 20px; }
.cockpit-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 15px 0; border-top: 1px solid #444; border-bottom: 1px solid #444; margin-top: 20px; }
/* === EINHEITLICHES SLIDER-DESIGN === */
input[type="range"] {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px;
background: #3a3a3a;
border-radius: 3px; outline: none;
margin: 10px 0;
background: linear-gradient(to right, #28a745 0%, #28a745 var(--range-progress, 0%), #3a3a3a var(--range-progress, 0%), #3a3a3a 100%);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 20px; height: 20px;
background: #28a745;
border: 2px solid #ffffff;
border-radius: 50%; cursor: pointer;
margin-top: -7px;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px;
background: #28a745;
border: 2px solid #ffffff;
border-radius: 50%; cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* === DARK MODE ANPASSUNGEN === */
@media (prefers-color-scheme:dark) {
body{background-color:#121212;color:#f0f0f0}
.container, .product-item, .search-section, .review-section, .auth-section, .csv-import-section, .compare-section, .barcode-section {background-color:#1e1e1e;border-color:#444}
h1{color:#8bc34a}h2{color:#e0e0e0}h3{color:#ccc}h4{color:#aaa}
button{background-color:#558b2f}button:hover{background-color:#689f38}
input[type=text],textarea,input[type=time],input[type=number],select{background-color:#3a3a3a;color:#f0f0f0;border:1px solid #555}
.form-section,.effect-category-group{border-color:#444;background-color:#2d2d2d}
.product-item{border-color:#444;background-color:#2d2d2d}
.user-comments-container{border:1px solid #444;background-color:#2d2d2d}
.comment-item{border-bottom:1px dashed #444}
.comparison-table th, .comparison-table td{border:1px solid #444;color:#f0f0f0}
.comparison-table th{background-color:#3a3a3a}
.rating-container-overall.interactive { background-color: #3a3a3a; }
.saturn-svg-icon .planet { fill: #555; }
.saturn-svg-icon .ring-part { stroke: #666; }
.saturn-svg-icon.filled .planet { fill: #D2B48C; }
.saturn-svg-icon.filled .ring-part { stroke: #FFD700; }
.tab-button { background-color: #3a3a3a; border-color: #555; }
.tab-button.active { background-color: #0d6efd; border-color: #0d6efd; }
}
/* =================================================================== */
/* ===== FINAL & CORRECTED: MODERN VIEW (CARDS, SCROLLING, PANEL) ==== */
/* =================================================================== */
/* 1. Wrapper, der die Pfeile und das Grid enthält */
.grid-wrapper {
position: relative;
padding: 0 20px; /* Padding wird von Desktop-Medienabfrage bei Bedarf angepasst */
margin: 0 auto;
}
#userProfile .grid-wrapper-modern {
display: grid; /* Aktiviert das Grid-Layout */
grid-template-columns: 1fr; /* Stellt sicher, dass es immer nur eine Spalte gibt */
gap: 15px; /* Fügt den gewünschten 15px vertikalen Abstand hinzu */
}
/* 2. Der Container für die Karten, der das Scrollen ermöglicht */
#product-grid-container {
display: flex;
overflow-x: auto;
gap: 15px;
padding-top: 20px;
padding-bottom: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
#product-grid-container::-webkit-scrollbar {
display: none;
}
/* 3. Die Produkt-Karten selbst (für den HAUPT-FEED) */
.product-card {
background-color: #2c3e50;
border: 1px solid #34495e;
border-radius: 8px;
color: #ecf0f1;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
width: calc(100vw - 40px);
flex-shrink: 0;
scroll-snap-align: start;
}
/*
* Diese Regel gilt AUSSCHLIESSLICH für Produktkarten, die sich
* innerhalb der Profil-Sektion (#userProfile) befinden.
* Sie ist spezifisch genug, um die globalen ".product-card"-Regeln
* auf Mobilgeräten und Desktops zuverlässig zu überschreiben.
*/
#userProfile .product-card {
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
scroll-snap-align: none;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
cursor: pointer;
}
/* --- Inhalt der Karten (unverändert) --- */
.product-card .card-header { padding: 15px; background-color: #34495e; border-bottom: 1px solid #2c3e50; }
.product-card .card-header h3 { margin: 0; font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card .card-body { display: flex; flex-direction: column; align-items: center; padding: 15px 10px; gap: 15px; flex-grow: 1; }
.product-card .card-genetics, .product-card .card-rating { margin-bottom: 15px; width: 100%; max-width: 220px; }
.product-card .card-footer { padding: 15px; background-color: #34495e; text-align: right; }
.product-card .card-fingerprint { width: 100%; max-width: 220px; }
.product-card .fingerprint-preview-svg { width: 100%; height: auto; }
/* 5. ANPASSUNGEN NUR FÜR DESKTOP */
@media (min-width: 550px) {
/* Setzt eine feste, schmale Breite für die Karten auf breiteren Bildschirmen */
.product-card {
width: 300px;
}
}
/* 6. STYLES FÜR DETAIL-PANEL & CO. (Vollständigkeit) */
.detail-panel { position: fixed; top: 0; right: -100%; width: 90%; max-width: 800px; height: 100%; background-color: #1f2937; color: #f9fafb; box-shadow: -5px 0 15px rgba(0,0,0,0.5); z-index: 1050; transition: right 0.4s ease-in-out; display: flex; flex-direction: column; border-left: 1px solid #4b5563; }
.detail-panel.visible { right: 0; }
.detail-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; background-color: #374151; border-bottom: 1px solid #4b5563; }
#detail-panel-title { margin: 0; font-size: 1.5rem; color: #f9fafb; }
.close-button { background: none; border: none; font-size: 2.5rem; color: #d1d5db; cursor: pointer; line-height: 1; padding: 0 10px; }
.detail-panel-content { flex-grow: 1; overflow-y: auto; padding: 25px; }
.panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0.4s; }
.panel-overlay.visible { opacity: 1; visibility: visible; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 50px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.panel-button-bar { display: flex; justify-content: space-around; padding: 10px 0; background-color: #2c2c2c; }
.panel-detail-button { background-color: transparent; border: 1px solid #555; color: #ccc; padding: 8px 12px; border-radius: 20px; cursor: pointer; transition: all 0.2s ease-in-out; font-size: 0.9em; }
.panel-detail-button:hover { background-color: #444; border-color: #777; }
.panel-detail-button.active { background-color: #007bff; color: white; border-color: #007bff; font-weight: bold; }
.panel-divider { border: 0; border-top: 1px solid #444; margin: 0; }
.panel-detail-content-area { padding: 5px 15px 20px 15px; background-color: #252525; }
.cockpit-header { display: flex; justify-content: space-between; flex-wrap: nowrap; }
.cockpit-header-left, .cockpit-header-right { max-width: 50%; flex-grow: 1; }
/* =================================================================== */
/* ===== PAYWALL-EFFEKT: UNSICHTBARE KLICK-SPERRE FÜR GÄSTE ==== */
/* =================================================================== */
/* Regel 1: Legt die "unsichtbare Glasscheibe" über den Panel-Inhalt.
Der Inhalt ist voll sichtbar, aber nicht klickbar. Der "blur"-Filter wurde entfernt. */
.user-unauthenticated #detail-panel-content {
pointer-events: none;
user-select: none;
}
/* Regel 2: Macht die Panel-Buttons (Schließen, Zurück) trotzdem klickbar. */
.user-unauthenticated #detail-panel-close-button,
.user-unauthenticated #detail-panel-back-button {
pointer-events: auto !important;
}
/* Regel 3: Macht das Login-Formular, das darüber liegt, klickbar. */
.user-unauthenticated #authSection {
pointer-events: auto !important;
}
/* Regel 4: Fügt den "Anmelden"-Hinweis über den unscharfen Produkt-Karten hinzu (unverändert). */
.user-unauthenticated .product-card {
position: relative;
filter: blur(5px); /* Die Unschärfe bleibt HIER auf den kleinen Karten erhalten. */
}
.user-unauthenticated .product-card::after {
content: 'Anmelden, um Details zu sehen';
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
display: flex; justify-content: center; align-items: center;
background-color: rgba(44, 62, 80, 0.5);
color: white; font-weight: bold; z-index: 10;
text-align: center; pointer-events: none;
}
/* * ============================================================
* ===== Dashboard =====
* ============================================================
*/
.widget-content-flex {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 15px;
padding-top: 10px;
}
.stat-card-inline {
text-align: center;
flex-grow: 1;
}
/* Container für die swipe-fähigen Dashboard-Karten */
.dashboard-swipe-container {
display: flex;
overflow-x: auto;
gap: 20px;
padding: 20px;
margin: 0 -20px; /* Gleicht den inneren Padding aus */
scroll-snap-type: x mandatory;
-ms-overflow-style: none; /* IE und Edge */
scrollbar-width: none; /* Firefox */
}
.dashboard-swipe-container::-webkit-scrollbar {
display: none; /* Chrome, Safari und Opera */
}
.dashboard-widget.interactive-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
/* Platzhalter-Styling für Karten, deren Inhalt erst später geladen wird */
.widget-placeholder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
min-height: 120px;
color: #888;
text-align: center;
}
.widget-placeholder .placeholder-icon {
font-size: 48px;
margin-bottom: 10px;
}
/* Container für das Dashboard-Karussell, um Pfeile zu positionieren */
.dashboard-container {
position: relative;
}
/* Generelles Styling für die Scroll-Pfeile (Wird durch das globale .scroll-arrow überschrieben) */
.scroll-arrow {
/* ... Die Regeln hier wurden gelöscht, da sie in den globalen .scroll-arrow Block verschoben wurden. */
}
/* Auf kleineren Bildschirmen die Pfeile ausblenden */
@media (max-width: 768px) {
/* ... Dieser Block ist leer, da die Ausblendung im globalen .scroll-arrow Block erfolgt. */
}
/* ================================================================= */
/* === DASHBOARD KARTEN-STYLING (FINALE & KORREKTE 1:1 KOPIE) === */
/* ================================================================= */
/* Der Haupt-Container für die interaktive Karte */
.interactive-card {
/* Layout & Struktur */
display: flex;
flex-direction: column;
justify-content: space-between; /* WICHTIG: Schiebt den Footer nach unten */
height: 380px; /* Feste Höhe wie bei den Produktkarten */
/* Design (1:1 von .product-card kopiert) */
background: linear-gradient(145deg, #2c3238, #23272b);
border: 1px solid #444;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
/* Karussell-Verhalten */
flex: 0 0 300px;
scroll-snap-align: start;
/* Übergänge & Interaktion */
transition: all 0.2s ease-out;
cursor: pointer;
}
.interactive-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 161, 242, 0.2);
border-color: rgba(29, 161, 242, 0.5);
}
/* Der Header-Teil der Karte */
.interactive-card .card-header {
padding: 20px 20px 15px 20px;
border-bottom: 1px solid #3a3f44;
}
.interactive-card .card-header h3 {
margin: 0;
font-size: 1.2em;
color: #eee;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Der mittlere Inhalts-Teil der Karte */
.interactive-card .card-content {
flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
padding: 15px 20px;
overflow: hidden; /* Verhindert, dass Inhalt überläuft */
}
/* Der Footer-Teil der Karte */
.interactive-card .card-footer {
padding: 15px 20px;
border-top: 1px solid #3a3f44;
}
.card-footer-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Der "Details anzeigen" Button (1:1 Kopie) */
.interactive-card .details-button {
background-color: #1da1f2;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
width: 100%;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: background-color 0.2s;
}
.interactive-card .details-button:hover {
background-color: #1a91da;
}
/* Spezifisches Styling für die Inhalte der Statistik-Karten */
.interactive-card .widget-content-flex {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.interactive-card .stat-card-inline .stat-number {
font-size: 2.5em;
}
.interactive-card .widget-placeholder {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.interactive-card .widget-placeholder .placeholder-icon {
font-size: 60px;
opacity: 0.5;
}
/* ============================================= */
/* === KORREKTUR: PFEILE & KARTEN-HEADER === */
/* ============================================= */
/* 1. KORREKTUR: Horizontale Linie im Karten-Header wiederherstellen */
.product-card-header {
padding: 20px 20px 15px 20px;
border-bottom: 1px solid #3a3f44; /* DIE WICHTIGE LINIE */
}
.product-card-header h3 {
margin: 0;
font-size: 1.2em;
color: #eee;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 2. KORREKTUR: Pfeil-Styling wiederherstellen und sichtbar machen */
.dashboard-container {
position: relative;
}
.scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(44, 48, 52, 0.8);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 24px;
line-height: 40px;
text-align: center;
cursor: pointer;
z-index: 10;
transition: background-color 0.2s;
}
.scroll-arrow:hover {
background-color: rgba(29, 161, 242, 0.8);
}
.scroll-arrow.left {
left: -10px;
}
.scroll-arrow.right {
right: -10px;
}
/* Auf kleineren Bildschirmen die Pfeile ausblenden */
@media (max-width: 768px) {
/* Das globale .scroll-arrow { display: none; } wird hier überschrieben oder angewandt,
je nach Platzierung. Für das Dashboard ist kein zusätzliches Media Query nötig,
da das globale am Anfang das Ausblenden regelt. */
.dashboard-container {
padding: 0; /* Padding auf mobil entfernen, um Platz zu sparen */
}
}
/* Fügt einen sauberen Abstand am Anfang und Ende des Karten-Karussells hinzu */
.dashboard-swipe-container {
scroll-padding: 0 20px; /* 0 für oben/unten, 20px für links/rechts */
}
/* ============================================= */
/* === PANEL-INHALTE (DETAILLIERTE MITGLIEDER) === */
/* ============================================= */
.member-card-list {
display: flex;
flex-direction: column;
gap: 15px;
padding: 10px;
}
.member-card {
background-color: #2c3238;
border-radius: 8px;
border: 1px solid #444;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.member-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background-color: rgba(0,0,0,0.1);
border-bottom: 1px solid #3a3f44;
}
.member-username {
font-weight: bold;
color: #eee;
font-size: 1.1em;
/* NEU: Verhindert, dass lange Namen das Layout sprengen */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px; /* Gibt dem Namen etwas Luft zum Badge */
}
.member-role-badge {
color: white;
padding: 4px 0; /* Vertikales Padding, horizontales wird durch Breite gesteuert */
border-radius: 15px;
font-size: 0.8em;
font-weight: bold;
text-transform: capitalize;
/* NEU: Sorgt für einheitliche Breite und saubere Ausrichtung */
min-width: 90px;
text-align: center;
flex-shrink: 0; /* Verhindert, dass das Badge bei Platzmangel gequetscht wird */
}
.role-admin { background-color: #e0245e; }
.role-club { background-color: #ffab00; }
.role-standard, .role-standardPlus { background-color: #1da1f2; }
.member-card-body {
padding: 15px;
}
.member-email-small {
color: #bbb;
font-size: 0.9em;
margin-top: 0;
margin-bottom: 15px;
word-break: break-all;
}
.member-stats-grid {
display: grid;
grid-template-columns: 1fr auto; /* Links flexibel, rechts so breit wie nötig */
gap: 15px;
margin-bottom: 15px;
}
.member-stats-grid .stat-label {
display: block;
font-size: 0.8em;
color: #8899a6;
text-transform: uppercase;
}
.member-stats-grid > div:last-child {
text-align: right;
}
.member-stats-grid .stat-value {
display: block;
font-size: 1.2em;
color: #eee;
font-weight: bold;
}
.review-profile-bar {
display: flex;
width: 100%;
height: 10px;
border-radius: 5px;
overflow: hidden;
background-color: #1a2228;
}
.review-profile-bar .bar-segment {
height: 100%;
transition: width 0.3s ease-in-out;
}
.bar-segment.chiller { background-color: #1da1f2; } /* Blau */
.bar-segment.nerd { background-color: #17bf63; } /* Grün */
.bar-segment.scientist { background-color: #ffab00; } /* Gelb */
/* Styling für die Import-Sektion im Panel */
.import-section {
padding: 10px;
}
.import-section h4 {
margin-top: 0;
margin-bottom: 5px;
color: #eee;
font-size: 1.1em;
}
.import-section p {
font-size: 0.9em;
color: #bbb;
margin-top: 0;
}
.panel-input {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #555;
background-color: #222;
color: #eee;
font-size: 1em;
box-sizing: border-box; /* Wichtig für korrektes Padding */
}
.section-divider {
border: none;
height: 1px;
background-color: #444;
margin: 20px 0;
}
/* ========================================= */
/* KORRIGIERTES CSS für Tooltip-Info-Icon */
/* ========================================= */
.tooltip-container {
position: relative;
display: inline-block;
background-color: #777;
color: #fff;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 12px;
line-height: 18px;
text-align: center;
cursor: help;
margin-left: 8px;
font-weight: bold;
}
.tooltip-container .tooltip-text {
visibility: hidden;
width: 300px;
background-color: #333; /* Dunkler Hintergrund für guten Kontrast */
color: #fff;
text-align: left;
border-radius: 6px;
padding: 10px;
position: absolute;
/* === KORREKTUR START === */
z-index: 100; /* 1. Stellt sicher, dass der Tooltip über dem Header liegt */
top: 135%; /* 2. Positioniert den Tooltip UNTERHALB des Icons */
/* === KORREKTUR ENDE === */
left: 50%;
margin-left: -150px; /* Zentriert den Tooltip (Hälfte der Breite) */
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
font-weight: normal;
}
/* Pfeil für den Tooltip (optional, aber verbessert die Optik) */
.tooltip-container .tooltip-text::after {
content: "";
position: absolute;
bottom: 100%; /* Pfeil oben am Tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #333 transparent;
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Product-View in Meine Produkte aufrufen */
.clickable-link {
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.clickable-link:hover {
background-color: rgba(255, 255, 255, 0.05);
}
/* QR-Code PopUp Sichtbarkeit (Korrigierte Farben und Button-Stil) */
/* 1. Modal-Overlay (Der transparente oder halbtransparente Hintergrund) */
.modal-overlay {
/* Überlagert den gesamten Viewport */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Hintergrund leicht abdunkeln, damit das Modal hervorsticht */
background-color: rgba(0, 0, 0, 0.6);
/* Inhalte zentrieren */
display: flex;
justify-content: center; /* Horizontale Zentrierung */
align-items: center; /* Vertikale Zentrierung */
/* Standardmäßig versteckt */
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.3s, opacity 0.3s linear;
/* ======================================================= */
/* ===== FINALE, KUGELSICHERE LÖSUNG (STACKING CONTEXT) ===== */
/* ======================================================= */
/* Wir setzen einen extrem hohen z-index, um alle normalen Elemente zu schlagen. */
z-index: 99999999;
/* DIES IST DER ENTSCHEIDENDE FIX:
Diese Regel erzwingt einen neuen, von der GPU beschleunigten Stacking Context.
Das hebt das Modal auf die allerhöchste Ebene und löst das Problem, dass
andere Elemente (wie das Bild-Overlay) einen "schwereren" Stacking Context
erstellt haben. */
transform: translateZ(0);
/* ======================================================= */
}
/* 2. Sichtbarmachen des Modals durch die JS-Klasse 'visible' */
.modal-overlay.visible {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
/* 3. Modal-Content (Der eigentliche dunkle Kasten) */
.modal-content {
/* KORREKTUR: Hintergrund ist wieder dunkel, wie ursprünglich gewünscht */
background-color: #333;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
/* Maximale Breite definieren */
max-width: 400px;
width: 90%;
/* Animation beim Erscheinen */
transform: scale(0.9);
transition: transform 0.3s ease-out;
}
/* 4. Skalierung für sichtbares Modal */
.modal-overlay.visible .modal-content {
transform: scale(1);
}
/* 5. Modal-Header */
.modal-header {
/* Erzwingt, dass h2 und p untereinander stehen */
display: block;
/* ANKERPUNKT für den absolut positionierten Button */
position: relative;
/* Helle Linie auf dunklem Hintergrund */
border-bottom: 1px solid #777;
padding-bottom: 10px;
/* Platz für den Button am rechten Rand */
padding-right: 40px;
margin-bottom: 15px;
}
/* 6. Schließen-Button (Immer sichtbar mit grünem Kasten) */
.modal-close-button {
/* SICHTBARKEIT GARANTIERT */
opacity: 1;
visibility: visible;
/* Positionierung relativ zum modal-header */
position: absolute;
top: 10px;
right: 10px;
/* Styling und Interaktion */
font-size: 24px;
cursor: pointer;
color: #FFFFFF; /* Helle Farbe für das 'X' auf dem dunklen Button */
/* Grüner Kasten-Hintergrund und runde Ecken */
background-color: #4CAF50;
border: none;
border-radius: 4px;
padding: 2px 8px; /* Innenabstand für den grünen Kasten */
line-height: 1; /* Wichtig, um die vertikale Zentrierung des 'X' zu fixieren */
/* Hoher z-index */
z-index: 1000;
/* Entfernt doppelte Deklarationen */
outline: none;
}
/* 7. Text-Styling im Header */
.modal-header h2 {
/* KORREKTUR: Helle Schrift auf dunklem Hintergrund */
color: #FFFFFF;
margin-top: 0;
margin-bottom: 5px; /* Etwas Abstand zum Text darunter */
}
.modal-header h4, .modal-header p {
/* KORREKTUR: Helle Schrift auf dunklem Hintergrund */
color: #CCCCCC; /* Etwas heller als Weiß, um es leicht zu dämpfen */
margin-top: 0;
font-weight: normal; /* Für den Infotext */
}
/* Anpassung für den QR-Code Container, um Weiß auf Dunkel zu vermeiden */
.qr-code-container {
background-color: #FFFFFF; /* Stellt sicher, dass der QR-Code-Bereich weiß ist */
padding: 10px;
border-radius: 4px;
display: inline-block; /* Passt die Größe an den Canvas an */
margin: 10px auto;
}
/* 1. Styling für das Haupt-Batch-Element */
.batch-item {
display: flex;
justify-content: space-between; /* Links-Container und QR-Button auseinanderdrücken */
align-items: center; /* Vertikal zentrieren */
padding: 10px 0;
border-bottom: 1px solid #555;
color: #FFFFFF;
}
/* 2. Linker Container (Name und Metadaten) */
.batch-left-info {
display: flex;
flex-direction: column; /* Stellt sicher, dass Metadaten unter dem Namen stehen */
flex-grow: 1; /* Nimmt den restlichen Platz ein */
}
/* 3. Name der Charge (obere Zeile) */
.batch-name {
font-weight: bold;
margin-bottom: 5px; /* Abstand zu den Metadaten */
}
/* 4. Metadaten-Zeile (Datum und Reviews) */
.batch-meta {
font-size: 0.8em;
color: #AAAAAA; /* Gedämpfte Farbe für Metadaten */
display: flex; /* Stellt Metadaten-Teile nebeneinander */
gap: 5px;
align-items: center;
}
/* 5. Rechter Container (enthält nur den QR-Button) */
.batch-item-actions {
/* Kein Flex nötig, da nur ein Element enthalten ist,
aber 'flex-shrink: 0' ist wichtig, damit der Button rechts bleibt. */
flex-shrink: 0;
}
/* Der QR-Code Button (bereits gestylt, aber hier zur Vollständigkeit) */
.qr-code-button {
white-space: nowrap; /* Wichtig, falls das Button-Label lang ist */
}
/* =================================================================== */
/* ===== HINZUGEFÜGT: Fehlende Stile für das Review-Panel ===== */
/* =================================================================== */
/* 1. Das Review-Panel selbst (kopiert von .detail-panel) */
#review-panel {
position: fixed;
top: 0;
right: -100%; /* Startet außerhalb des Bildschirms */
width: 90%;
max-width: 800px;
height: 100%;
background-color: #1f2937;
color: #f9fafb;
box-shadow: -5px 0 15px rgba(0,0,0,0.5);
z-index: 1050; /* Standard z-index */
transition: right 0.4s ease-in-out;
display: flex;
flex-direction: column;
border-left: 1px solid #4b5563;
}
/* 2. Das Overlay/Hintergrund für das Review-Panel (kopiert von .panel-overlay) */
#review-panel-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
z-index: 1040; /* Standard z-index */
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease-in-out, visibility 0.4s;
}
/* 3. Die Klasse, die beide Elemente sichtbar macht (angewendet durch JavaScript) */
#review-panel.is-visible {
right: 0; /* Lässt das Panel ins Bild fahren */
}
#review-panel-overlay.is-visible {
opacity: 1;
visibility: visible;
}
/* 4. Stellt sicher, dass die Inhalte des Review-Panels scrollbar sind */
#review-panel-content-wrapper {
flex-grow: 1;
overflow-y: auto;
padding: 25px;
}
/* =================================================================== */
/* ===== NEU: STYLING FÜR BILD-VORSCHAU IM REVIEW WIZARD ===== */
/* =================================================================== */
/* 1. Haupt-Container für die Vorschau-Liste */
#wizard-image-previews {
display: flex;
flex-direction: column;
gap: 15px; /* Abstand zwischen den einzelnen Bild-Karten */
margin-top: 15px;
}
/* 2. Wrapper für ein einzelnes Bild mit Metadaten */
.image-preview-wrapper {
display: flex;
align-items: flex-start; /* Stellt sicher, dass Bild und Metadaten oben ausgerichtet sind */
gap: 15px;
padding: 10px;
background-color: #2d2d2d;
border: 1px solid #444;
border-radius: 8px;
position: relative; /* Wichtig für den "Entfernen"-Button */
}
/* 3. Das Vorschaubild selbst (Thumbnail) */
.image-preview-thumb {
width: 100px;
height: 100px;
object-fit: cover; /* Verhindert, dass das Bild verzerrt wird */
border-radius: 4px;
flex-shrink: 0; /* Verhindert, dass das Bild schrumpft */
}
/* 4. Der Container für alle Metadaten-Felder (rechts vom Bild) */
.image-preview-meta {
flex-grow: 1; /* Nimmt den restlichen Platz ein */
display: flex;
flex-direction: column;
gap: 10px; /* Abstand zwischen den Formular-Elementen */
}
/* 5. Der "Entfernen"-Button (das 'x' oben rechts) */
.remove-image-btn {
position: absolute;
top: 5px;
right: 5px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
border: 1px solid #555;
border-radius: 50%;
width: 28px;
height: 28px;
font-size: 20px;
line-height: 24px; /* Zentriert das 'x' vertikal */
text-align: center;
padding: 0;
cursor: pointer;
transition: background-color 0.2s;
}
.remove-image-btn:hover {
background-color: #e0245e; /* Roter Hintergrund beim Hover */
}
/* 6. Der "Ort hinzufügen"-Button */
.get-location-btn {
width: 100%;
padding: 8px;
font-size: 0.9em;
background-color: #555;
border: 1px solid #777;
}
.get-location-btn:disabled {
background-color: #28a745;
cursor: not-allowed;
opacity: 0.8;
}
/* 7. Styling für die Stichwort-Checkboxen */
.keywords-container {
padding: 10px;
background-color: rgba(0,0,0,0.2);
border-radius: 4px;
}
.keywords-container h5 {
margin-top: 0;
margin-bottom: 8px;
font-size: 0.9em;
color: #ccc;
}
.keyword-checkbox {
display: inline-block;
margin-right: 10px;
font-size: 0.9em;
}
/* 8. Light-Mode Anpassungen */
@media (prefers-color-scheme: light) {
.image-preview-wrapper {
background-color: #f9f9f9;
border-color: #ddd;
}
.keywords-container {
background-color: #f0f0f0;
}
.keywords-container h5 {
color: #333;
}
}
/* =================================================================== */
/* ===== VOLLBILD-BILDERGALERIE (LIGHTBOX) STYLES ==== */
/* =================================================================== */
/* 1. Das Overlay, das den ganzen Bildschirm abdunkelt */
.lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 11000; /* Muss über dem Detail-Panel (1050) liegen */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
.lightbox-overlay.visible {
visibility: visible;
opacity: 1;
}
/* 2. Der Container für das Bild */
.lightbox-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
3. Das Bild selbst
.lightbox-content img {
max-width: 95vw; Nimmt maximal 95% der Bildschirmbreite ein
max-height: 90vh; Nimmt maximal 90% der Bildschirmhöhe ein
object-fit: contain; Stellt sicher, dass das Bild vollständig sichtbar ist
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.lightbox-content img {
width: 100vw; /* Das Bild darf so breit wie der Bildschirm sein */
height: 100vh; /* Das Bild darf so hoch wie der Bildschirm sein */
object-fit: contain; /* WICHTIG: Skaliert das Bild, damit es komplett hineinpasst, ohne es zu verzerren oder abzuschneiden. */
display: block;
border-radius: 0; /* Keine abgerundeten Ecken im Vollbild */
box-shadow: none; /* Kein Schatten im Vollbild */
}
/* 4. Der Schließen-Button (X) */
.lightbox-close {
position: absolute;
top: 15px;
right: 25px;
font-size: 3rem;
color: #fff;
cursor: pointer;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
transition: color 0.2s;
line-height: 1;
z-index: 11001;
}
.lightbox-close:hover {
color: #ccc;
}
/* 5. Die Vor- und Zurück-Pfeile */
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3rem;
color: white;
cursor: pointer;
background-color: rgba(0,0,0,0.3);
padding: 10px 5px;
border-radius: 5px;
user-select: none; /* Verhindert Text-Selektion beim Doppelklick */
transition: background-color 0.2s;
z-index: 11001;
}
.lightbox-nav:hover {
background-color: rgba(0,0,0,0.6);
}
.lightbox-prev {
left: 15px;
}
.lightbox-next {
right: 15px;
}
/* Mobile-Anpassungen */
@media (max-width: 768px) {
.lightbox-close {
top: 10px;
right: 15px;
font-size: 2.5rem;
z-index: 11001;
}
.lightbox-nav {
font-size: 2.5rem;
padding: 15px 5px;
background-color: transparent; /* Macht die Hitbox auf mobil größer, aber unsichtbar */
z-index: 11001;
}
.lightbox-prev { left: 5px; }
.lightbox-next { right: 5px; }
}
/* =================================================================== */
/* ===== ERWEITERUNG: LIKE-FUNKTION IN LIGHTBOX ==== */
/* =================================================================== */
/* 6. Footer-Bereich für Aktionen wie den Like-Button */
.lightbox-footer {
position: absolute;
bottom: 15px;
left: 25px;
z-index: 11001; /* Stellt sicher, dass er über dem Bild liegt */
}
.lightbox-like-btn {
background-color: transparent;
border: none;
padding: 5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.lightbox-like-btn .icon {
font-size: 2.5rem; /* Großes, gut treffbares Herz */
color: #fff;
text-shadow: 0 0 8px rgba(0,0,0,0.8);
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lightbox-like-btn .count {
font-size: 1.5rem;
color: #fff;
font-weight: bold;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
/* Zustand, wenn das Bild geliked ist */
.lightbox-like-btn.liked .icon {
color: #e0245e; /* Instagram-Rot */
transform: scale(1.1);
}
/* 7. Animation für den Doppelklick */
.lightbox-content .like-heart-animation {
content: '❤️';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 8rem;
color: white;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
opacity: 0;
transition: all 0.4s ease-out;
pointer-events: none; /* Wichtig, damit es nicht klickbar ist */
z-index: 11002;
}
.lightbox-content.show-like-animation .like-heart-animation {
transform: translate(-50%, -50%) scale(1);
opacity: 0.9;
}
/* =================================================================== */
/* ===== REVIEW WIZARD: STIL FÜR BILDBESCHREIBUNGS-TEXTFELD ==== */
/* =================================================================== */
.image-preview-meta textarea.image-description-input {
width: 100%;
height: 60px; /* Kleinere Höhe für die Vorschau */
padding: 8px;
margin-bottom: 10px; /* Abstand zum nächsten Element */
background-color: #2c2c2c;
border: 1px solid #555;
border-radius: 4px;
color: #f0f0f0;
font-size: 0.9em;
resize: vertical; /* Erlaubt dem Nutzer, die Höhe bei Bedarf anzupassen */
}
.image-preview-meta textarea.image-description-input::placeholder {
color: #888;
}
/* =================================================================== */
/* ===== INSTAGRAM FEATURE: BILDUNTERSCHRIFT & KOMMENTARE ==== */
/* =================================================================== */
.post-footer .image-caption {
font-size: 0.95em;
color: #f0f0f0;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #444;
}
.post-footer .post-comment {
font-size: 0.9em;
color: #cccccc; /* Leicht abgehoben von der Haupt-Caption */
}
.post-footer .post-comment-author {
font-weight: bold;
color: #f0f0f0;
margin-right: 6px;
}
/* KORREKTUR: Entfernt den unerwünschten Rahmen/Hintergrund vom Like-Button */
.like-btn, .like-btn:focus, .like-btn:active {
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* VERALTET: Header wird nicht mehr genutzt und ausgeblendet */
.image-post-card .post-header {
display: none;
}
/* VERALTET: Der Like-Button ist nicht mehr über dem Bild */
.image-actions-overlay {
display: none;
}
/* NEU: Die Aktionsleiste unter dem Bild */
.post-actions-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 12px;
border-bottom: 1px solid #333; /* Dünne Trennlinie zum Kommentar */
}
/* Styling für den Like-Button in der neuen Leiste */
.post-actions-bar .like-btn {
font-size: 1.4em; /* Etwas größer für bessere Klickbarkeit */
padding: 4px;
}
.post-actions-bar .like-btn .icon {
vertical-align: middle;
}
.post-actions-bar .like-btn .count {
font-size: 0.6em;
vertical-align: middle;
margin-left: 5px;
color: #f0f0f0;
}
/* NEU: Container für Zeitstempel und Autor rechts */
.post-meta-info {
font-size: 0.8em;
color: #a0a0a0;
}
.post-meta-info .post-author {
font-weight: 600;
color: #c0c0c0;
margin-left: 6px;
}
/* NEU: Kommentar-Sektion */
.comments-section {
padding: 10px 12px 12px 12px;
}
.comment-list {
max-height: 150px; /* Begrenzt die Höhe bei vielen Kommentaren */
overflow-y: auto;
margin-bottom: 12px;
}
/* Scrollbar-Styling für den Dark Mode */
.comment-list::-webkit-scrollbar {
width: 6px;
}
.comment-list::-webkit-scrollbar-track {
background: #2b2b2b;
}
.comment-list::-webkit-scrollbar-thumb {
background: #555;
border-radius: 3px;
}
.comment-list::-webkit-scrollbar-thumb:hover {
background: #777;
}
.comment {
font-size: 0.9em;
margin-bottom: 8px;
line-height: 1.4;
}
.comment-author {
font-weight: 600;
color: #c0c0c0;
margin-right: 6px;
cursor: pointer; /* Bereitet Klick für User-Profile vor */
}
.comment-author:hover {
text-decoration: underline;
}
.comment-text {
color: #dddddd;
}
.add-comment-form {
display: flex;
margin-top: 10px;
border-top: 1px solid #444;
padding-top: 10px;
}
.add-comment-form input {
flex-grow: 1;
background: #2b2b2b;
border: 1px solid #555;
color: #fff;
padding: 8px 12px;
border-radius: 18px; /* Pille-Form */
margin-right: 8px;
font-size: 0.9em;
}
.add-comment-form input:focus {
outline: none;
border-color: #0d6efd;
}
.add-comment-form button {
background: none;
border: none;
color: #0d6efd; /* Blauer, aktiver Farbton */
font-weight: bold;
cursor: pointer;
padding: 8px 4px;
}
.add-comment-form button:disabled {
color: #555;
cursor: not-allowed;
}
/* Styling für den Zeitstempel eines Kommentars */
.comment-meta {
font-size: 0.8em;
color: #888;
margin-left: 8px;
}
/* Container für Aktionen unter einem Kommentar (Like, Reply) */
.comment-actions {
/* margin-top: 4px; */
margin-left: 10px;
display: flex;
align-items: center;
gap: 15px;
}
/* Like-Button für Kommentare */
.comment-like-btn {
background: none;
border: none;
padding: 2px;
cursor: pointer;
font-size: 0.8em;
color: #aaa;
}
.comment-like-btn.liked .icon {
color: #ff4d6a; /* Leuchtendes Rot für geliked */
}
.comment-like-btn .icon {
font-size: 1.1em;
color: #aaa;
}
.comment-like-btn .count {
margin-left: 4px;
}
.comment-reply-btn {
background: none;
border: none;
color: #aaa;
font-size: 0.8em;
font-weight: bold;
cursor: pointer;
}
.comment-reply-btn:hover {
color: #fff;
}
/* NEU: Container für das Antwort-Formular, standardmäßig versteckt */
.reply-form-container {
display: none;
padding-left: 15px;
margin-top: 8px;
}
/* NEU: Container für Antworten auf einen Kommentar (Einrückung) */
.replies-container {
padding-left: 20px;
border-left: 2px solid #333;
margin-top: 10px;
margin-left: 5px;
}
/* NEU: Container für die Bearbeiten/Löschen-Buttons des Autors */
.comment-owner-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto; /* Schiebt die Buttons ganz nach rechts */
}
.comment-owner-actions button {
background: none;
border: none;
cursor: pointer;
font-size: 1.1em;
color: #888;
}
.comment-owner-actions button:hover {
color: #fff;
}
/* NEU: Container für den Inline-Bearbeitungsmodus eines Kommentars */
.comment-edit-container {
margin-top: 5px;
}
.comment-edit-container textarea {
width: 100%;
background: #333;
border: 1px solid #555;
color: #fff;
border-radius: 6px;
padding: 8px;
font-size: 0.9em;
min-height: 60px;
resize: vertical;
}
.comment-edit-container .edit-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 8px;
}
.comment-edit-container .edit-buttons button {
padding: 6px 12px;
border-radius: 5px;
border: none;
cursor: pointer;
font-weight: bold;
}
.comment-edit-container .edit-btn-cancel {
background-color: #555;
color: #fff;
}
.comment-edit-container .edit-btn-save {
background-color: #0d6efd;
color: #fff;
}
/* =================================================================== */
/* ===== KORRIGIERTES CSS FÜR KONZISE STRUKTUR ==== */
/* =================================================================== */
/* 1. Gekürzter Zustand: Nur aktiv, wenn der Wrapper die Klasse 'expandable' hat
UND NICHT die Klasse 'is-expanded' (also eingeklappt ist) */
.comment-text-wrapper.expandable:not(.is-expanded) .comment-text-content {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* Kürzt auf 2 Zeilen */
-webkit-box-orient: vertical;
}
/* 2. Erweiterter Zustand: Wenn der Wrapper die Klasse 'is-expanded' hat */
.comment-text-wrapper.expandable.is-expanded .comment-text-content {
/* Hebt die Kürzung auf */
-webkit-line-clamp: unset;
display: block;
}
/* 3. "Mehr"-Link Sichtbarkeit */
.show-more-link {
display: none; /* Standardmäßig unsichtbar */
color: #8899a6;
cursor: pointer;
font-size: 0.9em;
font-weight: bold;
margin-top: 4px;
}
/* Der Link wird NUR sichtbar, wenn der Text überhaupt kürzbar ist (expandable) */
.comment-text-wrapper.expandable .show-more-link {
display: inline-block;
}
.show-more-link:hover {
text-decoration: underline;
}
/* =================================================================== */
/* ===== ANPASSUNG: DÜNNERE BILD-RAHMEN (FÜR MOBILGERÄTE) ==== */
/* =================================================================== */
/* 1. Äußerer Rahmen: Macht den Rand um die gesamte Bild-Karte dünner.
(Wir gehen von 2px auf 1px) */
.image-post-card {
border-width: 1px !important;
}
/* 2. Innerer Rahmen: Reduziert den horizontalen Abstand zwischen dem
äußeren Rand und dem Inhalt (Like-Leiste, Beschreibung etc.).
(Wir gehen von ca. 12-16px auf 8px) */
.post-actions-bar,
.post-footer,
.comments-section .add-comment-form {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Optional: Wenn du den Abstand zwischen Bild und Like-Leiste auch
etwas verkleinern möchtest, kannst du diese Regel ebenfalls nutzen. */
.post-actions-bar {
padding-top: 8px !important;
padding-bottom: 6px !important;
}
=================================================================
===== ROBUSTES Layout für den Feed (App-Shell-Methode) =====
=================================================================
#view-feed {
display: flex; Aktiviert das Flexbox-Layout
flex-direction: column; Ordnet Filter und Grid untereinander an
Die Ansicht füllt exakt den Platz zwischen Action-Bar und oberem Bildschirmrand
height: calc(100vh - 70px - 55px); Höhe = 100% - Hauptnavi - Action-Bar
overflow: hidden; Verhindert, dass die GANZE Seite scrollt
}
#view-feed .filter-section {
Kein 'sticky' mehr nötig. Bleibt von allein oben.
padding: 15px;
background-color: #1a1a1a; Hintergrund, damit man Karten nicht durchsieht
flex-shrink: 0; Verhindert, dass die Leiste schrumpft
z-index: 10;
}
#view-feed .grid-wrapper {
flex-grow: 1; Nimmt den gesamten restlichen Platz ein
overflow-x: auto; DAS ist jetzt unser scrollbares Element!
overflow-x: hidden;
}
Diese Regeln bleiben, um die Karten korrekt darzustellen
#view-feed #product-grid-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 25px;
padding: 20px;
width: 100%;
box-sizing: border-box;
}
#view-feed .product-card-modern {
width: 95%;
max-width: 450px;
flex-shrink: 0;
}
/*=============================================
= BILDER-FEED "INSTAGRAM-STYLE" (V2) =
=============================================*/
.image-post-card {
background-color: #222; /* Dunklerer Hintergrund für den Post */
border: 1px solid #333;
border-radius: 8px;
margin-bottom: 20px;
max-width: 600px; /* Maximale Breite, zentriert sich auf größeren Bildschirmen */
margin-left: auto;
margin-right: auto;
}
.image-post-card .carousel-image-container img {
/* Wichtig: Sorgt dafür, dass das Bild nicht höher ist als der Viewport hoch ist */
max-height: 80vh;
object-fit: contain; /* Bild wird komplett angezeigt, ohne es abzuschneiden */
background-color: #000;
}
.image-post-card .post-header {
font-weight: bold;
color: #eee;
}
.image-post-card .post-actions-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
}
.image-post-card .post-actions-left .like-btn {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 1.5rem; /* Größeres Herz-Icon */
padding: 0;
display: flex;
align-items: center;
gap: 8px;
}
.image-post-card .post-actions-left .like-btn .count {
font-size: 1rem;
font-weight: bold;
}
.image-post-card .post-meta-info {
font-size: 0.8em;
color: #aaa;
}
.image-post-card .post-footer {
padding: 0 12px 10px 12px;
}
.image-post-card .image-caption {
margin: 0;
line-height: 1.4;
}
.image-post-card .post-comment-author {
font-weight: bold;
margin-right: 6px;
}
/* Du solltest bereits Stile für .comments-section und .add-comment-form haben,
aber hier sind zur Sicherheit ein paar grundlegende. */
.image-post-card .comments-section {
padding: 0 12px 12px 12px;
border-top: 1px solid #333;
margin-top: 10px;
}
.image-post-card .comment-list {
font-size: 0.9em;
/* Weitere Stile kommen aus view.js/style.css */
}
.image-post-card .add-comment-form {
display: flex;
margin-top: 10px;
gap: 5px;
}
.image-post-card .add-comment-form input {
flex-grow: 1;
background: #333;
border: 1px solid #555;
border-radius: 15px;
color: #fff;
padding: 8px 12px;
font-size: 0.9em;
}
.image-post-card .add-comment-form button {
background: none;
border: none;
color: #0095f6;
font-weight: bold;
cursor: pointer;
}
.image-post-card .add-comment-form button:disabled {
color: #555;
cursor: not-allowed;
}
/* ========================================================================
Clean-Up für Kommentar-Aktions-Buttons (Bearbeiten/Löschen)
======================================================================== */
.comment-actions .comment-edit-btn,
.comment-actions .comment-delete-btn {
background: none; /* Entfernt jeglichen Hintergrund (auch grün) */
border: none; /* Entfernt den Rand */
padding: 0 4px; /* Fügt minimalen horizontalen Abstand hinzu */
margin: 0; /* Entfernt Außenabstände */
font-size: 1.1em; /* Macht die Emojis etwas größer und klickbarer */
color: #a0a0a0; /* Setzt eine neutrale Standardfarbe für die Emojis */
vertical-align: middle; /* Richtet die Buttons vertikal mit dem Text aus */
cursor: pointer; /* Stellt sicher, dass der Mauszeiger eine Hand ist */
opacity: 0.7; /* Macht sie dezent, bis man mit der Maus darüberfährt */
transition: all 0.2s ease-in-out; /* Sorgt für einen sanften Übergang */
}
/* Effekt, wenn man mit der Maus über die Buttons fährt */
.comment-actions .comment-edit-btn:hover,
.comment-actions .comment-delete-btn:hover {
opacity: 1; /* Volle Sichtbarkeit */
transform: scale(1.1); /* Leichte Vergrößerung für klares Feedback */
}
/* ======================================================= */
/* === KORREKTUR FÜR UNSICHTBAREN TEXT IM DARK MODE === */
/* ======================================================= */
@media (prefers-color-scheme:dark) {
.text-muted {
color: #ababab !important; /* Hellt 'muted' Text auf, !important zur Sicherheit */
}
}
/* ==================================
KARUSSELL STYLING
================================== */
.carousel-container {
position: relative;
width: 100%;
/* Stellt sicher, dass die Höhe vom Bild bestimmt wird */
aspect-ratio: 1 / 1;
background-color: #222;
}
.carousel-slides-wrapper {
width: 100%;
height: 100%;
}
.carousel-slide {
width: 100%;
height: 100%;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: contain; /* Stellt sicher, dass das ganze Bild sichtbar ist */
display: block;
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(30, 30, 30, 0.6);
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 16px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-btn.prev {
left: 10px;
}
.carousel-btn.next {
right: 10px;
}
.carousel-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background-color 0.3s;
}
.carousel-dot.active {
background-color: white;
}
/* --- Kopiervorlage 1: CSS für deaktivierte Keywords --- */
.keyword-filters label.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #555; /* Etwas dunkler im Dark Mode */
border-color: #444;
}
body.light-mode .keyword-filters label.disabled {
background-color: #f8f9fa; /* Heller im Light Mode */
border-color: #e9ecef;
color: #6c757d;
}
/* =================================== */
/* === STYLES FÜR DAS PROFILBILD === */
/* =================================== */
.profile-header {
display: flex;
align-items: center;
padding: 20px 0; /* Etwas Abstand oben/unten */
gap: 20px; /* Abstand zwischen Bild und Info-Block */
}
/* Der Container, der das Bild oder den "+"-Button hält */
.profile-picture-container {
width: 120px; /* Feste Breite */
height: 120px; /* Feste Höhe */
border-radius: 50%; /* Macht es rund */
background-color: #333; /* Hintergrund für Lade-Spinner oder Platzhalter */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* Versteckt Bildteile, die über den runden Rahmen hinausragen */
flex-shrink: 0; /* Verhindert, dass der Container bei Platzmangel kleiner wird */
position: relative; /* Wichtig für Overlays, falls wir die später brauchen */
}
/* Das Profilbild selbst */
.profile-picture-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Füllt den runden Container komplett aus, ohne das Bild zu verzerren. Genial! */
}
/* Der Platzhalter, wenn kein Bild vorhanden ist */
.profile-picture-placeholder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ccc;
width: 100%;
height: 100%;
cursor: pointer;
text-align: center;
}
.profile-picture-placeholder .add-picture-btn {
font-size: 40px;
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 0;
line-height: 1;
}
.profile-picture-placeholder span {
font-size: 12px;
margin-top: 8px;
padding: 0 5px;
}
/* Der Overlay-Container, der über dem Bild liegt */
.picture-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter schwarzer Hintergrund */
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: 0; /* Standardmäßig komplett unsichtbar */
transition: opacity 0.2s ease-in-out; /* Sanfter Einblend-Effekt */
border-radius: 50%; /* Stellt sicher, dass der Overlay auch rund ist */
}
/* Wenn man über den Bild-Container hovert, wird der Overlay sichtbar */
.profile-picture-container:hover .picture-overlay {
opacity: 1;
}
.picture-overlay .fa-camera {
font-size: 24px;
}
.picture-overlay span {
font-size: 14px;
margin-top: 5px;
}
/* ======================================================= */
/* === SWIPE-SPIEL STYLES === */
/* ======================================================= */
.swipe-game-board {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.swipe-card-area {
position: relative;
width: 100%;
max-width: 400px; /* Maximale Breite für die Karten */
height: 350px; /* Feste Höhe, damit die Elemente nicht springen */
margin: 20px 0;
}
.swipe-card {
position: absolute;
width: 100%;
height: 100%;
border-radius: 15px;
background-color: #2c2c2c; /* Dunkler Hintergrund für die Karte */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
overflow: hidden; /* Stellt sicher, dass die Charts nicht überlappen */
display: flex;
align-items: center;
justify-content: center;
}
/* Die obere Karte liegt leicht versetzt im Hintergrund */
.swipe-card.top {
z-index: 1;
transform: scale(0.95) translateY(-20px);
transition: transform 0.4s ease-in-out;
}
/* Die untere, aktive Karte liegt darüber */
.swipe-card.bottom {
z-index: 2;
cursor: grab; /* Zeigt an, dass man das Element greifen kann */
}
.swipe-card.bottom:active {
cursor: grabbing;
}
/* Styling für den Fingerprint-Container innerhalb der Spiel-Karten */
.swipe-card .fingerprint-preview-container {
padding: 15px;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.swipe-card .fingerprint-preview-container h4 {
color: #fff; /* Helle Schrift auf der dunklen Karte */
text-align: center;
margin-bottom: 10px;
}
/* Placeholder-Text für die leere obere Karte */
.fingerprint-preview-container.placeholder {
display: flex;
align-items: center;
justify-content: center;
color: #888;
font-size: 1.2em;
}
.swipe-game-instructions {
text-align: center;
color: #aaa;
}
/* Anpassung für Light Mode */
body.light-mode .swipe-card {
background-color: #ffffff;
border: 1px solid #ddd;
}
body.light-mode .swipe-card .fingerprint-preview-container h4 {
color: #333;
}
body.light-mode .fingerprint-preview-container.placeholder {
color: #aaa;
}
/* ======================================================= */
/* === SWIPE-SPIEL PROMPT & ERGEBNIS === */
/* ======================================================= */
.prompt-card {
padding: 20px;
box-sizing: border-box;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.prompt-card h3 {
color: #4CAF50;
margin-bottom: 15px;
}
.prompt-card p {
max-width: 90%;
}
.prompt-instructions {
display: flex;
justify-content: space-around;
margin-top: 30px;
width: 100%;
}
.prompt-left, .prompt-right {
width: 45%;
display: flex;
flex-direction: column;
align-items: center;
}
.prompt-left span, .prompt-right span {
font-size: 2.5em;
font-weight: bold;
line-height: 1;
}
.final-result-container {
padding: 20px;
text-align: center;
}
#final-card-wrapper .product-card {
margin: 0 auto; /* Zentriert die finale Karte */
max-width: 450px;
}
/* Light Mode Anpassungen */
body.light-mode .prompt-card {
color: #333;
}
/* ============================================= */
/* == Stile für das Profil-Bearbeiten-Modal == */
/* ============================================= */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: #333; /* Dunkler Hintergrund für den Inhalt */
color: #fff; /* Heller Text */
padding: 25px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #555;
padding-bottom: 15px;
margin-bottom: 20px;
}
.modal-header h2 {
margin: 0;
font-size: 1.5rem;
}
.close-button {
background: none;
border: none;
color: #aaa;
font-size: 2rem;
cursor: pointer;
line-height: 1;
}
.close-button:hover {
color: #fff;
}
.modal-body .form-group {
margin-bottom: 15px;
}
.modal-body .form-group label {
display: block;
margin-bottom: 5px;
color: #ccc;
}
.form-control {
width: 100%;
padding: 10px;
background-color: #222;
border: 1px solid #555;
border-radius: 5px;
color: #fff;
}
textarea.form-control {
resize: vertical;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 25px;
}
/* Wiederverwendung der Button-Stile, falls vorhanden, sonst Fallback */
.btn-secondary {
background-color: #555;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-primary {
background-color: #3498db;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-primary:disabled {
background-color: #2980b9;
opacity: 0.7;
}
/* ============================================= */
/* == Stile für das Profil-Bearbeiten-Modal == */
/* ============================================= */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: #333;
color: #fff;
padding: 25px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #555;
padding-bottom: 15px;
margin-bottom: 20px;
}
.modal-header h2 {
margin: 0;
font-size: 1.5rem;
}
.close-button {
background: none;
border: none;
color: #aaa;
font-size: 2rem;
cursor: pointer;
line-height: 1;
}
.close-button:hover {
color: #fff;
}
.modal-body .form-group {
margin-bottom: 15px;
}
.modal-body .form-group label {
display: block;
margin-bottom: 5px;
color: #ccc;
}
.form-control {
width: 100%;
padding: 10px;
background-color: #222;
border: 1px solid #555;
border-radius: 5px;
color: #fff;
}
textarea.form-control {
resize: vertical;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 25px;
}
.btn-secondary {
background-color: #555;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-primary {
background-color: #3498db;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-primary:disabled {
background-color: #2980b9;
opacity: 0.7;
}
/* =================================================================== */
/* == PROFIL-GRID & KARUSSELL (MASONRY-LAYOUT, FINALE VERSION) == */
/* =================================================================== */
/* 1. Das Grid mit variablen Spalten */
.profile-content-grid {
column-count: 2;
column-gap: 10px;
padding-top: 10px;
}
@media (min-width: 600px) { .profile-content-grid { column-count: 3; } }
@media (min-width: 900px) { .profile-content-grid { column-count: 4; } }
/* 2. Die einzelne Inhalts-Karte */
.profile-content-card {
break-inside: avoid; /* Verhindert, dass Karten zerrissen werden */
margin-bottom: 10px;
position: relative;
background-color: #333;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
/* 3. DAS BILD: Die Master-Regel für variable Höhe */
.profile-content-card img {
width: 100%;
height: auto; /* Die Höhe passt sich automatisch an das Seitenverhältnis an */
display: block; /* Verhindert Leerraum unter dem Bild */
}
/* 4. Der Karussell-Container (ohne feste Höhe) */
.profile-carousel-container {
position: relative;
}
/* 5. Die einzelnen Slides im Karussell */
.profile-carousel-container .carousel-slide {
/* Alle Slides sind standardmäßig unsichtbar */
display: none;
}
/* 6. NUR der aktive Slide wird angezeigt und bestimmt die Höhe */
.profile-carousel-container .carousel-slide.active {
display: block; /* Macht den Slide sichtbar */
}
/* 7. Die Navigations-Elemente (Pfeile & Punkte) bleiben unverändert */
.profile-carousel-container .carousel-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
font-size: 18px;
line-height: 28px;
text-align: center;
cursor: pointer;
z-index: 10;
opacity: 0;
transition: opacity 0.2s;
}
.profile-carousel-container:hover .carousel-nav-btn {
opacity: 1;
}
.profile-carousel-container .carousel-nav-btn.prev {
left: 8px;
}
.profile-carousel-container .carousel-nav-btn.next {
right: 8px;
}
.profile-carousel-container .carousel-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 10;
}
.profile-carousel-container .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
}
.profile-carousel-container .dot.active {
background-color: #ffffff;
}
/* 8. Anpassungen für Karten ohne Bilder (Review-Text) */
.review-card-content {
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 150px;
}
/* =============================================
Styling für das Post-Erstellungs-Modal
============================================= */
/* Haupt-Container für ein einzelnes Bild + Formular im Modal */
.post-item-form {
display: grid;
grid-template-columns: 150px 1fr; /* 1. Spalte (Bild) ist 150px breit, 2. Spalte (Formular) nimmt den Rest ein */
gap: 20px; /* Abstand zwischen Bild und Formular */
align-items: start; /* Elemente am oberen Rand ausrichten */
border-bottom: 1px solid #eee; /* Trennlinie zwischen den Bildern */
padding: 15px 0;
}
.post-item-form:last-child {
border-bottom: none; /* Keine Trennlinie nach dem letzten Bild */
}
/* Das ist die entscheidende Regel für die Bild-Vorschau */
.post-item-form .image-preview {
width: 100%; /* Das Bild soll die volle Breite seines Containers (150px) nutzen */
height: 120px; /* Gib dem Bild eine feste Höhe */
object-fit: contain; /* WICHTIG: Das Bild wird skaliert, um vollständig in den Bereich zu passen, ohne das Seitenverhältnis zu verzerren. */
background-color: #f0f0f0; /* Ein heller Hintergrund für den Fall, dass Bilder Ladezeit benötigen oder transparente Bereiche haben */
border-radius: 6px; /* Abgerundete Ecken für die Vorschau */
}
/* Container für die Formular-Elemente neben dem Bild */
.post-item-form .item-controls {
display: flex;
flex-direction: column;
gap: 15px; /* Abstand zwischen den Formular-Gruppen */
}
/* Stellt sicher, dass die Labels in den kleineren Forms korrekt angezeigt werden */
.post-item-form .form-group label {
margin-bottom: 5px;
}
/* ========================================================================= */
/* === UNIFIED IMAGE CARD GRID (MASONRY, CORRECTED HOVER ONLY) === */
/* ========================================================================= */
/* 1. Wrapper für das Grid. */
.image-grid-container {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
/* 2. Masonry-Grid-Layout. */
.image-card-grid {
column-count: 3;
column-gap: 10px;
padding: 10px;
}
@media (min-width: 900px) { .image-card-grid { column-count: 4; } }
@media (max-width: 600px) { .image-card-grid { column-count: 2; } }
/* 3. Die Kachel. */
.image-card {
position: relative;
break-inside: avoid;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background-color: #222;
color: white;
}
/* 4. Das Bild im Original-Seitenverhältnis. */
.image-card img {
width: 100%;
height: auto;
display: block;
}
/* 5. Das Overlay. Standardmäßig komplett unsichtbar. */
.image-card .image-card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
opacity: 0; /* Standardmäßig unsichtbar. */
transition: opacity 0.2s ease-in-out;
pointer-events: none; /* KORREKTUR: Lässt alle Klicks durch, außer auf explizit aktivierte Kinder. */
}
/* 6. NUR bei Hover wird das Overlay sichtbar. */
.image-card:hover .image-card-overlay {
opacity: 1;
}
/* 7. Der Rest des Stylings für Aktionen, Icons und Karussell. */
.image-card .image-card-actions {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: auto; /* KORREKTUR: Macht DIESEN Bereich klickbar. */
}
.image-card .image-card-icon-button {
background: none;
border: none;
padding: 5px;
cursor: pointer;
line-height: 1;
}
/*
* SCHRITT 1/3: Die "Leinwand" für ALLE DREI Icons definieren.
*/
.image-card .icon-heart,
.image-card .icon-star,
.image-card .icon-comment {
display: inline-block;
width: 24px;
height: 24px;
background-color: white;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
/*
* SCHRITT 2/3: Die "Schablone" für jedes Icon definieren.
*/
.icon-heart { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.icon-star { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.icon-comment { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.image-card .like-button.liked .icon-heart { background-color: #E0245E; }
.image-card .bookmark-button.bookmarked .icon-star { background-color: #FFD700; }
.image-card .carousel-indicator { position: absolute; top: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; font-size: 12px; font-weight: bold; padding: 4px 8px; border-radius: 6px; pointer-events: none; }
.image-card-carousel { width: 100%; height: 100%; position: relative; }
.image-card-carousel .carousel-slide { width: 100%; height: 100%; display: none; }
.image-card-carousel .carousel-slide.active { display: block; }
.image-card .image-card-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(30, 30, 30, 0.6);
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 20px;
cursor: pointer;
z-index: 5;
pointer-events: auto; /* KORREKTUR: Macht die Nav-Buttons explizit klickbar. */
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.image-card:hover .image-card-nav-btn { opacity: 1; }
.image-card .image-card-nav-btn.prev { left: 8px; }
.image-card .image-card-nav-btn.next { right: 8px; }
@media (max-width: 768px) {
.image-card .image-card-overlay {
opacity: 1;
}
.image-card .image-card-actions {
color: white;
}
/*
* SCHRITT 3/3: Die mobile "Sicherheitsregel" für ALLE DREI Icons.
*/
.image-card .icon-heart,
.image-card .icon-star,
.image-card .icon-comment {
background-color: white;
filter: none;
}
.image-card:hover .image-card-overlay {
opacity: 1;
}
}
/* ========================================================= */
/* === FINALER, KUGELSICHERER FIX FÜR PRODUKT-KARTEN-ICONS ==== */
/* ========================================================= */
/* 1. Die Button-Fläche: Eine definierte, klickbare Größe erzwingen. */
.product-like-btn,
.product-bookmark-btn {
background: transparent !important;
border: none !important;
padding: 0 !important;
width: 40px; /* Etwas mehr Platz für die Icons */
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease;
}
/* Simpler Hover-Effekt */
.product-like-btn:hover,
.product-bookmark-btn:hover {
transform: scale(1.1);
}
/* 2. Den leeren Span verstecken, wir brauchen ihn nicht mehr. */
.product-like-btn .icon-heart,
.product-bookmark-btn .icon-star {
display: none;
}
/* 3. DER EIGENTLICHE FIX: Wir fügen das Icon per ::before Pseudo-Element hinzu. */
/* Dies ist die universelle Methode, die immer funktioniert. */
.product-like-btn::before,
.product-bookmark-btn::before {
font-size: 26px; /* Deutlich sichtbare Icon-Größe */
line-height: 1;
transition: all 0.2s ease-in-out;
}
/* 4. Standard-Zustand (inaktiv) definieren. */
.product-like-btn::before {
content: '♡'; /* Unicode "Weißes Herz" */
color: #999; /* Sichtbares, neutrales Grau */
}
.product-bookmark-btn::before {
content: '☆'; /* Unicode "Weißer Stern" */
color: #999; /* Sichtbares, neutrales Grau */
}
/* 5. Aktiven Zustand definieren (wird durch die .liked/.bookmarked Klasse ausgelöst). */
.product-like-btn.liked::before {
content: '♥'; /* Unicode "Schwarzes Herz" (wird rot eingefärbt) */
color: #e0245e; /* Aktiv-Farbe Rot */
transform: scale(1.1); /* Kleiner Pop-Effekt */
}
.product-bookmark-btn.bookmarked::before {
content: '★'; /* Unicode "Schwarzer Stern" (wird gold eingefärbt) */
color: #ffab00; /* Aktiv-Farbe Gold */
transform: scale(1.1); /* Kleiner Pop-Effekt */
}
/* ========================================================= */
/* === STYLING FÜR PROFIL-TAB "GESPEICHERT" (NEU) ========== */
/* ========================================================= */
.profile-saved-section {
width: 100%;
padding: 10px;
}
.profile-saved-nav {
display: flex;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
.profile-saved-nav .tab-button {
background: none;
border: none;
padding: 10px 15px;
font-size: 1rem;
cursor: pointer;
color: #555;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* Lässt den unteren Rand mit dem Haupt-Rand verschmelzen */
transition: all 0.2s ease;
}
.profile-saved-nav .tab-button:hover {
background-color: #f0f0f0;
color: #000;
}
.profile-saved-nav .tab-button.active {
color: #3498db; /* Ihre primäre Akzentfarbe */
border-bottom-color: #3498db;
font-weight: bold;
}
.profile-saved-content-wrapper .placeholder-content {
text-align: center;
padding: 40px 20px;
color: #777;
background-color: #f9f9f9;
border-radius: 8px;
}
.profile-saved-content-wrapper .placeholder-content span {
display: block;
margin-top: 10px;
font-size: 0.9rem;
}
/* Steuerung für die Anzeige der "Gespeichert"-Inhalte */
.profile-saved-content-wrapper .tab-content {
display: none; /* Versteckt standardmäßig alle Inhaltsbereiche */
}
.profile-saved-content-wrapper .tab-content.active {
display: block; /* Zeigt NUR den aktiven Inhaltsbereich an */
}
/* Wichtiger Zusatz: Stellt sicher, dass das Grid-Layout erhalten bleibt, wenn es aktiv ist */
.profile-saved-content-wrapper .tab-content.image-card-grid.active {
display: grid;
}
/* --- Styles for Grid Comment Overlay --- */
.image-card {
position: relative; /* Wichtig, damit das Overlay sich daran ausrichtet */
}
.comment-overlay-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 10; /* Über dem Bild, unter der Lightbox */
display: none; /* Standardmäßig versteckt */
justify-content: center;
align-items: center;
color: white;
padding: 10px;
box-sizing: border-box;
backdrop-filter: blur(4px); /* Moderner Blur-Effekt */
}
.close-comment-overlay {
position: absolute;
top: 5px;
right: 10px;
background: none;
border: none;
color: white;
font-size: 28px;
font-weight: bold;
cursor: pointer;
z-index: 11; /* Über dem Kommentar-Inhalt */
padding: 0;
line-height: 1;
}
.comment-overlay-content {
width: 100%;
height: 100%;
overflow-y: auto;
/* Styling für die Scrollbar (optional, aber schöner) */
scrollbar-width: thin;
scrollbar-color: #555 #222;
}
.comment-overlay-content::-webkit-scrollbar {
width: 8px;
}
.comment-overlay-content::-webkit-scrollbar-track {
background: #222;
}
.comment-overlay-content::-webkit-scrollbar-thumb {
background-color: #555;
border-radius: 6px;
border: 3px solid #222;
}
/* Anpassungen für die Kommentar-Sektion im Overlay */
.comment-overlay-content .comments-section {
background-color: transparent !important; /* Wichtig, um den Overlay-Hintergrund zu sehen */
padding: 25px 5px 5px 5px !important; /* Platz für den Schließen-Button */
}
.comment-overlay-content .comment-list p,
.comment-overlay-content .comment-text {
color: #ddd !important; /* Lesbarkeit verbessern */
}
.comment-overlay-content .comment-author {
color: #fff !important;
font-weight: bold;
}
/* =========================================
KORREKTUR FÜR KOMMENTAR-ICON AUF BILD-KACHELN
========================================= */
/*
* Stellt sicher, dass das Emoji innerhalb des neuen Buttons
* sichtbar ist und nicht von den allgemeinen Icon-Stilen
* für Herz und Stern versteckt wird.
*/
.image-card-icon-button .icon-comment {
display: inline-block; /* Stellt sicher, dass das Element Raum einnimmt */
font-size: 1.8rem; /* Passende Größe, ähnlich wie Herz/Stern */
color: white; /* Explizite Farbe setzen */
opacity: 1; /* Stellt sicher, dass es nicht durchsichtig ist */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Bessere Lesbarkeit auf hellen Bildern */
line-height: 1; /* Zentriert das Emoji vertikal */
}
/*
* Zusätzliche Regel, um sicherzustellen, dass der Button selbst
* korrekt formatiert ist, falls er durch die anderen Stile
* beeinflusst wird.
*/
.image-card-icon-button.comment-grid-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ===================================================================
CSS FÜR OVERLAY & INFO-PANEL (FINAL & WIEDERHERGESTELLT)
=================================================================== */
/* 1. Basis-Layout des Overlays */
#simple-image-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: flex; justify-content: center; align-items: center; z-index: 20000;
}
#simple-image-overlay .simple-overlay-close {
position: absolute; top: 15px; right: 35px; color: #fff;
font-size: 40px; font-weight: bold; cursor: pointer; z-index: 20002;
text-shadow: 0 0 8px rgba(0,0,0,0.7);
}
#simple-image-overlay .simple-overlay-content {
position: relative;
width: 100vw; /* Volle Breite */
height: 100vh; /* Volle Höhe */
display: flex; /* Zentriert das Bild korrekt */
align-items: center;
justify-content: center;
}
#simple-image-overlay .simple-overlay-content img {
width: 100%;
height: 100%;
object-fit: contain; /* WICHTIG: Fehlende Eigenschaft hinzugefügt */
display: block;
border-radius: 4px;
}
#simple-image-overlay .simple-overlay-footer {
position: absolute; bottom: 0; left: 0; width: 100%;
padding: 40px 20px 20px; box-sizing: border-box;
display: flex; justify-content: center; align-items: center; gap: 16px;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
/* 2. Styling für die Icon-Buttons (konsistent mit Ihrer App) */
#simple-image-overlay .image-card-icon-button {
background: transparent; border: none; padding: 5px; cursor: pointer;
}
#simple-image-overlay .icon-heart,
#simple-image-overlay .icon-star,
#simple-image-overlay .icon-comment,
#simple-image-overlay .icon-info {
display: inline-block; width: 28px; height: 28px;
background-color: white;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-position: center;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
#simple-image-overlay .icon-heart { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
#simple-image-overlay .icon-star { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
#simple-image-overlay .icon-comment { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
#simple-image-overlay .icon-info { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
#simple-image-overlay .like-button.liked .icon-heart { background-color: #E0245E; }
#simple-image-overlay .bookmark-button.bookmarked .icon-star { background-color: #FFD700; }
/* 3. WIEDERHERGESTELLTES CSS für das von unten einblendbare Info-Panel */
#info-panel {
position: absolute;
bottom: 0; left: 0; right: 0;
background-color: rgba(10, 10, 10, 0.85);
color: #f0f0f0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px 12px 0 0;
z-index: 20002;
max-height: 50%;
overflow-y: auto;
backdrop-filter: blur(10px) saturate(120%);
padding-bottom: 20px;
animation: slide-up 0.3s ease-out forwards;
}
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.info-panel-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-panel-header h3 { margin: 0; font-size: 1rem; }
.info-panel-close {
font-size: 26px; font-weight: bold; cursor: pointer;
color: #aaa; transition: color 0.2s;
}
.info-panel-close:hover { color: white; }
.info-panel-content { padding: 15px 20px; display: flex; flex-direction: column; gap: 14px; }
.info-item { font-size: 0.9rem; line-height: 1.4; }
.info-item strong { color: #999; margin-right: 8px; }
.keyword-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.keyword-tags .tag { background-color: #333; padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; }
.info-item.description h4 { margin: 10px 0 5px; color: #aaa; font-size: 0.9rem; }
.info-item.description p { margin: 0; font-style: italic; color: #ddd; white-space: pre-wrap; }
/* ===================================================================
CSS FÜR KOMMENTAR-PANEL (1:1-Kopie von Info-Panel)
=================================================================== */
#comment-panel {
position: absolute;
bottom: 0; left: 0; right: 0;
background-color: rgba(10, 10, 10, 0.85);
color: #f0f0f0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px 12px 0 0;
z-index: 20002;
max-height: 65%; /* Etwas mehr Platz für Kommentare */
overflow: hidden; /* WICHTIG: Das Scrollen wird innen geregelt */
display: flex; /* NEU: Flex-Container für Header und Content */
flex-direction: column; /* NEU: Ordnet Header und Content untereinander an */
backdrop-filter: blur(10px) saturate(120%);
animation: slide-up 0.3s ease-out forwards;
}
#comment-panel .comment-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0; /* Verhindert, dass der Header schrumpft */
}
#comment-panel .comment-panel-header h3 {
margin: 0;
font-size: 1rem;
}
#comment-panel .comment-panel-close {
font-size: 26px;
font-weight: bold;
cursor: pointer;
color: #aaa;
}
/* WICHTIGSTE KORREKTUR: Der Inhalts-Container scrollt, nicht das ganze Panel */
#comment-panel .comment-panel-content {
flex-grow: 1; /* Nimmt den restlichen Platz ein */
overflow-y: auto; /* NUR DIESER BEREICH SCROLLT */
padding: 15px 20px;
}
/* ========================================================================
=== ALLERLETZTE, FINALE LÖSUNG: Kein "Hüpfen" mehr im Karussell ===
========================================================================
Dieser Code-Block ersetzt alle vorherigen Versuche.
*/
/* --- SCHRITT 1: Grund-Styling für alle Bilder wiederherstellen --- */
/* Dies stellt sicher, dass Einzelbilder IMMER normal (ohne Balken) angezeigt werden. */
.image-card:not(.is-carousel) .carousel-slide img {
width: 100%;
height: auto; /* Höhe passt sich automatisch an das Bild an */
object-fit: fill; /* Standardverhalten */
}
/* --- SCHRITT 2: Das "Hüpfen" bei Karussells gezielt beheben --- */
/* 2a. Wir machen den BILD-CONTAINER quadratisch. Das ist der stabile Anker. */
.image-card.is-carousel .image-card-carousel {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* ERZWINGT DAS QUADRAT. Hier springt nichts mehr. */
background-color: #222; /* Hintergrund für die Letterboxen */
}
/* 2b. Die Slides werden innerhalb dieses Containers gestapelt. */
.image-card.is-carousel .carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none; /* Alle standardmäßig versteckt */
/* Zentriert das Bild innerhalb des Slides */
display: flex;
align-items: center;
justify-content: center;
}
/* 2c. Nur der aktive Slide wird angezeigt. */
.image-card.is-carousel .carousel-slide.active {
display: flex;
}
/* 2d. Das Bild wird in das Quadrat eingepasst, ohne es zu verzerren. */
.image-card.is-carousel .carousel-slide img {
width: 100%;
height: 100%;
object-fit: contain; /* DIE ENTSCHEIDENDE REGEL: Passt das Bild ins Quadrat ein. */
}
/* Styling für den unabhängigen Filter-Button */
#toggle-filter-button {
/* WICHTIG: Positionierung */
position: fixed;
z-index: 1000; /* Stellt sicher, dass er über anderen Inhalten liegt */
bottom: 85px; /* Abstand von unten (z.B. über der Hauptnavigation) */
right: 20px; /* Abstand von rechts */
/* Standard-Styling für einen runden "Floating Action Button" (kannst du anpassen) */
width: 56px;
height: 56px;
background-color: #2196F3; /* Beispiel-Farbe, passe sie an dein Design an */
border-radius: 50%;
border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
/* Stellt sicher, dass das SVG-Icon im Button zentriert ist */
display: flex;
justify-content: center;
align-items: center;
/* WICHTIG: Muss vorhanden sein, damit JS ihn initial anzeigen kann */
display: none;
}
/* Style für das SVG-Icon im Button */
#toggle-filter-button svg {
stroke: white; /* Farbe des Icons */
}
/* Media Query, um diese Regeln nur auf mobilen Geräten anzuwenden */
@media (max-width: 768px) {
/* Macht die erste Filterzeile horizontal scrollbar */
#imageFeedFilter .filter-controls {
display: flex; /* Ordnet die beiden Filter-Gruppen nebeneinander an */
overflow-x: auto; /* Das ist die Magie: Erlaubt horizontales Scrollen */
white-space: nowrap; /* Verhindert, dass die Buttons/Dropdowns umbrechen */
/* Optional: Verbessert das Scroll-Feeling auf iOS */
-webkit-overflow-scrolling: touch;
/* Optional: Versteckt die Scroll-Leiste, lässt das Scrollen aber zu */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
/* Versteckt die Scroll-Leiste in Chrome & Safari */
#imageFeedFilter .filter-controls::-webkit-scrollbar {
display: none;
}
/* Wichtig: Stellt sicher, dass die Filter-Gruppen nicht zusammengeschrumpft werden */
#imageFeedFilter .filter-controls .filter-group {
flex-shrink: 0;
}
}
/* Styling für die Anzeige der Bewertungsanzahl in der Profilansicht */
.review-count-display {
text-align: center;
padding: 10px 0;
margin: auto; /* Zentriert den Block, falls der Container breiter ist */
}
.review-count-display .count-number {
display: block;
font-size: 2.5rem; /* Macht die Zahl schön groß */
font-weight: 600;
line-height: 1.1;
color: #3498db; /* Hier deine Akzentfarbe verwenden */
}
.review-count-display .count-label {
font-size: 1rem;
color: #7f8c8d; /* Eine dezentere Farbe für den Text */
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =================================================================== */
/* ===== PROMINENTER GLOBAL-LOADER (VOLLBILD-OVERLAY) ==== */
/* =================================================================== */
#global-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75); /* Dunkler, halbtransparenter Hintergrund */
z-index: 10000; /* Muss über fast allem liegen */
display: flex; /* Wird von JS gesteuert, aber standardmäßig flex */
justify-content: center;
align-items: center;
color: white;
flex-direction: column;
}
#global-loader .loader-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#global-loader .loader-spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db; /* Blaue Akzentfarbe */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1.5s linear infinite;
margin-bottom: 20px;
}
#global-loader p {
font-size: 1.2rem;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* Die bestehende .loader @keyframes spin Animation kann wiederverwendet werden,
aber zur Sicherheit definieren wir sie hier erneut, falls sie woanders fehlt. */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ======================================================= */
/* === TERMS OF AGREEMENT OVERLAY === */
/* ======================================================= */
.terms-overlay-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 20000;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.terms-modal {
background-color: #2a2a2a;
color: #e0e0e0;
border: 1px solid #555;
border-radius: 15px;
width: 90%;
max-width: 600px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.terms-header {
padding: 20px 25px 15px 25px;
border-bottom: 1px solid #444;
}
.terms-header h2 {
margin: 0;
color: #4CAF50;
}
.terms-content {
padding: 5px 25px;
overflow-y: auto;
flex-grow: 1;
font-size: 0.9rem;
line-height: 1.6;
}
.terms-content p {
margin-bottom: 15px;
}
.terms-agreement {
padding: 15px 25px;
border-top: 1px solid #444;
background-color: #333;
}
.terms-agreement label {
cursor: pointer;
font-size: 0.9em;
}
.terms-footer {
padding: 20px 25px;
background-color: #2a2a2a;
border-radius: 0 0 15px 15px;
}
#terms-agree-button {
width: 100%;
padding: 12px;
font-size: 1.1rem;
font-weight: bold;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s, opacity 0.2s;
}
#terms-agree-button:disabled {
background-color: #555;
opacity: 0.6;
cursor: not-allowed;
a.panel-link { color: #4CAF50; text-decoration: none; } a.panel-link:hover { text-decoration: underline; }
.panel-nav-button.admin-button {
background-color: #007bff !important; /* Blau */
color: white !important;
border-color: #0069d9 !important;
}
.panel-nav-button.admin-button:hover {
background-color: #0056b3 !important; /* Dunkleres Blau beim Hover */
}
/* ============== NEUER CSS-CODE FÜR DAS STATISTIK-PANEL ============== */
/* ============== NEUER CSS-CODE FÜR DAS STATISTIK-PANEL ============== */
/* ============== NEUER CSS-CODE FÜR DAS STATISTIK-PANEL ============== */
.panel-section h4 {
color: #00aaff;
border-bottom: 1px solid #444;
padding-bottom: 10px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 1.2em;
}
.section-divider {
border: 0;
height: 1px;
background-color: #444;
margin: 30px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
margin-bottom: 25px;
}
.stat-card-inline {
background-color: #3a3a3a;
padding: 15px;
border-radius: 8px;
text-align: center;
border-left: 4px solid #00aaff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card-inline:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.stat-card-inline h4 {
font-size: 0.9em;
color: #ccc;
margin: 0 0 8px 0;
font-weight: normal;
border: none;
padding: 0;
text-transform: uppercase;
}
.stat-card-inline .stat-number {
font-size: 2.2em;
font-weight: bold;
color: #fff;
margin: 0;
line-height: 1;
}
.stat-card-inline .stat-number .unit {
font-size: 0.5em;
font-weight: normal;
color: #aaa;
margin-left: 4px;
}
.charts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 25px;
}
.chart-wrapper {
flex: 1;
min-width: 280px;
background-color: #3a3a3a;
padding: 20px;
border-radius: 8px;
}
.leaderboard {
margin-top: 25px;
background-color: #3a3a3a;
border-radius: 8px;
overflow: hidden;
}
.leaderboard-item {
display: grid;
grid-template-columns: 30px 1fr auto;
align-items: center;
gap: 15px;
padding: 15px;
border-bottom: 1px solid #4f4f4f;
transition: background-color 0.2s ease;
}
.leaderboard-item:hover {
background-color: #454545;
}
.leaderboard-item:last-child {
border-bottom: none;
}
.leaderboard-icon {
font-size: 1.4em;
text-align: center;
}
.leaderboard-label {
color: #ccc;
font-weight: normal;
}
.leaderboard-value {
color: #fff;
text-align: right;
font-size: 0.9em;
font-weight: bold;
}
/* =================================================================== */
/* ===== FINALE, ZIELGENAUE KORREKTUR FÜR PROFIL-KARTENBREITE ==== */
/* =================================================================== */
/*
* Diese Regel gilt AUSSCHLIESSLICH für Produktkarten, die sich
* innerhalb der Profil-Sektion (#userProfile) befinden.
* Sie ist spezifisch genug, um die globale ".product-card"-Regel
* ZUVERLÄSSIG zu überschreiben und das Überlaufen zu verhindern.
*/
#userProfile .product-card {
/* Wir überschreiben die `85vw` mit einer flexiblen Breite.
`100%` bezieht sich auf den Container, in dem die Karte liegt. */
width: 100%;
/* Wir deaktivieren andere Karussell-Eigenschaften, die hier stören. */
flex-shrink: 1; /* Erlaubt der Karte wieder, bei Bedarf zu schrumpfen. */
scroll-snap-align: none; /* Deaktiviert das "Einrasten". */
}
/* Stellt sicher, dass der Footer den Button rechts ausrichtet */
.info-panel-footer {
display: flex; /* Aktiviert das Flex-Layout */
justify-content: flex-end; /* Schiebt das Element ganz nach rechts */
align-items: center; /* Zentriert vertikal (optional) */
padding: 10px 15px; /* Beispiel-Abstand */
border-top: 1px solid #eee; /* Trennlinie */
}
/* Entfernt alle unerwünschten Stile vom Löschen-Button */
.post-delete-btn {
/* **WICHTIGSTE REGELN ZUR ENTFERNUNG DES GRÜNEN STILS** */
background-color: transparent !important; /* Entfernt die Hintergrundfarbe (Grün) */
background: none !important; /* Doppelter Schutz gegen andere Hintergrund-Eigenschaften */
border: none !important; /* Entfernt den Rahmen */
box-shadow: none !important; /* Entfernt Box-Schatten, die wie Rahmen aussehen könnten */
outline: none !important; /* Entfernt den Fokus-Rahmen */
/* **STIL FÜR DAS ICON** */
color: #888888 !important; /* Setzt die Farbe des ICONS auf Grau (nicht Grün!) */
font-size: 1.5em; /* Größe des Icons */
/* **ENTFERNT ABSTÄNDE UND MARGINS** */
padding: 0 !important;
margin: 0 !important;
cursor: pointer;
transition: color 0.2s ease;
}
/* Stil für den Hover-Effekt */
.post-delete-btn:hover {
color: #ff4d4d !important; /* Wird Rot beim Überfahren */
}
/* Entfernt den Fokus-Stil, falls dieser immer noch einen Rahmen anzeigt */
.post-delete-btn:focus {
outline: none !important;
box-shadow: none !important;
}
/* =========================================================================
SPOTLIGHT-EFFEKT FÜR ÖFFENTLICHEN QR-CODE-SCAN
========================================================================= */
/* Diese Klasse wird dem Login-Overlay hinzugefügt, um den Effekt zu aktivieren. */
#login-panel-overlay.spotlight {
/* WICHTIG: Erlaubt Klicks "durch" das Loch im Overlay hindurch,
deaktiviert aber Klicks auf den abgedunkelten Bereich. */
pointer-events: none;
background-color: transparent; /* Der Hintergrund wird durch den Schatten ersetzt. */
/* Der Trick: Ein riesiger, halbtransparenter Schatten um das "Loch" herum.
Das ist die sicherste Methode, die auf allen Browsern gut funktioniert. */
box-shadow: 0 0 0 150vmax rgba(26, 26, 26, 0.75);
/* Definiert das "Loch". Wir verwenden CSS-Variablen (--spotlight-x, etc.),
die wir per JavaScript setzen werden. */
clip-path: circle(
/* Radius des Lochs. `calc` wird verwendet, um etwas Polsterung hinzuzufügen. */
calc(var(--spotlight-radius, 100px) + 20px)
at
var(--spotlight-x, 50%)
var(--spotlight-y, 50%)
);
}
/* Stellt sicher, dass das Login-Panel selbst klickbar bleibt. */
#login-panel.visible {
pointer-events: auto;
}
/* ========================================================================= */
/* ===== KORREKTUR FÜR PROFIL-PANEL & UNTERSTRICHENEN LINK ===== */
/* ========================================================================= */
/* 1. KORREKTUR: Stellt sicher, dass der Link unterstrichen ist */
.clickable-username {
color: #1da1f2;
cursor: pointer;
font-weight: bold;
text-decoration: underline !important; /* !important zur Sicherheit */
}
.clickable-username:hover {
color: #5abaff;
}
/* 2. KORREKTUR: Legt das Profil-Panel auf eine höhere Ebene (z-index) */
#public-profile-panel {
position: fixed;
top: 0;
right: -100%; /* Startet außerhalb des Bildschirms */
width: 100%;
max-width: 450px; /* Typische Breite für ein Seiten-Panel */
height: 100%;
background-color: #1f2937;
color: #f9fafb;
box-shadow: -5px 0 15px rgba(0,0,0,0.5);
z-index: 1050; /* LIEGT JETZT ÜBER DEM FILTER-BUTTON (1000) */
transition: right 0.4s ease-in-out;
display: flex;
flex-direction: column;
}
#public-profile-panel.is-visible {
right: 0;
}
#public-profile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
z-index: 1049; /* Liegt direkt hinter dem Panel */
opacity: 0;
visibility: hidden;
transition: opacity 0.4s;
}
#public-profile-overlay.is-visible {
opacity: 1;
visibility: visible;
}
/* =================================================================== */
/* Styling für Nutzerlisten (Netzwerk-Tab, Anfragen-Tab) - FINAL */
/* =================================================================== */
.user-list, .requests-list {
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px 10px;
}
.user-list-item:hover, .request-item:hover {
background-color: #34495e;
}
.user-list-name, .request-name {
font-weight: 500;
font-size: 1rem;
flex-grow: 1;
}
.user-list-actions, .request-actions {
display: flex;
gap: 10px;
}
.user-list-actions .action-button,
.request-actions .action-button {
padding: 6px 12px;
font-size: 0.9rem;
}