/* --- FLUX Design - Phase 1: Das Fundament --- */
/* 1. Google Font Import (Muss im HTML sein!) */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); */
/* 2. CSS Variablen (:root) - Die neue Farb- & Stilpalette */
:root {
/* Farbpalette */
--bg-color: #12121f; /* Sehr dunkles Blau/Violett */
--panel-bg: rgba(35, 35, 65, 0.6); /* Semi-transparentes dunkles Panel */
--panel-border: rgba(255, 255, 255, 0.15); /* Heller, dezenter Rand */
--glass-blur: 12px; /* Stärke des Blur-Effekts */
--text-color: #e4e4f0; /* Helles Grau/Lavendel für Haupttext */
--text-light: #a0a0c8; /* Heller für sekundären Text/Hinweise */
--text-heading: #ffffff; /* Weiß für Hauptüberschriften */
--primary-gradient: linear-gradient(90deg, #f9576c 0%, #f87b50 100%); /* Warmer Akzent (Rot-Orange) */
--primary-start: #f9576c;
--primary-end: #f87b50;
--secondary-color: #6d51f0; /* Leuchtendes Violett als zweite Akzentfarbe */
--hover-secondary: #816aee;
--error-color: #ff6b6b; /* Angepasstes Rot */
--success-color: #50fa7b; /* Helles Grün */
--disabled-bg: rgba(90, 90, 120, 0.4);
--disabled-text: #7a7a9a;
/* Schatten */
--shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.3);
--shadow-interactive: 0 4px 15px rgba(0, 0, 0, 0.25);
--shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.35);
/* Übergänge */
--transition-fast: 0.2s ease;
--transition-medium: 0.3s ease;
--transition-smooth: 0.4s ease-out;
/* Schriftart */
--font-primary: 'Poppins', sans-serif;
/* Radien */
--radius-small: 4px;
--radius-medium: 8px;
--radius-large: 16px;
--radius-panel: 12px;
}
/* 3. Globale Stile & Body */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-primary);
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
margin: 0; /* Sicherstellen, dass kein Body-Margin vorhanden ist */
padding: 20px; /* Etwas Abstand zum Rand auf Mobilgeräten */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* Verhindert horizontales Scrollen durch übergroße Elemente */
}
/* 4. Container - Der Glassmorphism-Kern */
.container {
max-width: 760px;
margin: 0px;
background: var(--panel-bg);
border: 1px solid var(--panel-border);
border-radius: var(--radius-large);
padding: 35px 45px; /* Mehr Innenabstand */
box-shadow: var(--shadow-panel);
position: relative; /* Für potenzielle Überlappungen/absolute Elemente innen */
overflow: hidden; /* Wichtig für saubere Kanten mit Blur */
display: grid; /* NEU */
/* Wir definieren keine expliziten Reihenhöhen, lassen sie sich an den Inhalt anpassen */
/* Optional: Eine Basis-Reihenstruktur, aber flexibel */
grid-template-rows: auto; /* Standard, passt sich an */
gap: 25px; /* Abstand zwischen den Grid-Kindern (unseren Sektionen) */
align-content: start; /* Richtet den Inhalt oben aus, wenn weniger Platz benötigt wird */
/* Wichtig: Übergang für Höhenänderungen */
transition: padding var(--transition-medium); /* Padding bleibt animierbar */
/* Die Höhe selbst animieren wir nicht direkt, das Grid passt sich an */
/* Der Glass-Effekt */
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
/* 5. Typografie - Überschriften & Text anpassen */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
margin-bottom: 0.8em;
line-height: 1.3;
}
h1 {
font-size: 2.4em;
font-weight: 700;
text-align: center;
margin-bottom: 1.5em;
color: var(--text-heading);
/* Optional: Subtiler Textschatten für Lesbarkeit auf komplexem Hintergrund */
/* text-shadow: 0 1px 3px rgba(0,0,0,0.4); */
}
/* H1 mit Farbverlauf (Alternative oder zusätzlich) */
h1.gradient-text {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
h2 {
font-size: 1.7em;
font-weight: 500;
color: var(--text-heading);
text-align: center;
margin-top: 2em;
margin-bottom: 1.2em;
padding-bottom: 0.5em;
border-bottom: 1px solid var(--panel-border); /* Subtile Trennlinie */
position: relative;
}
/* Optional: Kleine Akzentlinie unter H2 */
/* h2::after {
content: '';
position: absolute;
bottom: -1px; // Direkt auf der Border
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: var(--primary-gradient);
border-radius: 1px;
} */
h3 {
font-size: 1.3em;
font-weight: 500;
color: var(--secondary-color); /* Akzentfarbe für H3 */
margin-bottom: 1em;
text-align: left;
}
p {
color: var(--text-light);
font-size: 0.95em;
margin-bottom: 1em;
}
a {
color: var(--secondary-color);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--hover-secondary);
text-decoration: underline;
}
.custom-garment-section, .options-section, .api-selection {
display: none!important;
}
/* 6. Alte Sektions-Stile zurücksetzen/entfernen */
/* Wir entfernen explizit die alten Stile und Hover-Effekte. */
/* Die Sektionen selbst bleiben als Container erhalten. */
.api-selection,
.upload-section,
.custom-garment-section,
.selection-section,
.options-section,
.result-section {
margin-bottom: 30px; /* Abstand beibehalten oder anpassen */
padding: 0; /* Kein extra Padding mehr durch die Sektion selbst */
border: none; /* Keine Sektionsrahmen mehr */
background-color: transparent; /* Kein eigener Hintergrund mehr */
box-shadow: none; /* Keinen Schatten mehr */
border-radius: 0; /* Keinen Radius mehr */
}
/* Hover-Effekt entfernen, der vorher auf Sektionen war */
.upload-section:hover,
.custom-garment-section:hover,
.selection-section:hover,
.options-section:hover {
box-shadow: none; /* Sicherstellen, dass kein Schatten bei Hover erscheint */
}
/* Das Padding wird jetzt eher durch den .container oder spezifische innere Elemente gesteuert */
/* Beispiel: Wenn Inhalt direkt in Sektionen ist, braucht man eventuell wieder etwas Padding hier */
/* .upload-section, .selection-section { padding: 15px 0; } */ /* Ggf. vertikales Padding wieder hinzufügen */
/* 7. Basis-Button-Styling */
button {
display: inline-block;
padding: 12px 28px; /* Etwas mehr horizontal */
border: none;
border-radius: var(--radius-medium);
background: var(--primary-gradient);
color: white;
font-family: var(--font-primary);
font-size: 1em;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-size var(--transition-medium); /* Für Hover-Effekt */
box-shadow: var(--shadow-interactive);
background-size: 100% 100%; /* Für potenziellen Hover-Effekt */
}
button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
/* Optional: Heller werden oder Gradient leicht verschieben */
/* filter: brightness(1.1); */
background-size: 150% 150%; /* Simuliert eine leichte Verschiebung im Gradient */
}
button:active:not(:disabled) {
transform: translateY(0px);
box-shadow: var(--shadow-interactive);
}
button:disabled {
background: var(--disabled-bg);
color: var(--disabled-text);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* Haupt-Aktionsbutton hervorheben */
#tryOnButton {
width: 100%;
padding: 15px;
font-size: 1.15em;
margin-top: 25px;
letter-spacing: 0.5px;
}
/* 8. Platzhalter für zukünftige Phasen (Damit wir wissen, wo wir weitermachen) */
/* --- Phase 2: Kerninteraktionen --- */
/* Hier kommen Stile für: Toggles, Selects, Inputs, Upload-Bereich, Kleider-Grid/-Karussell, Optionen-Panel */
/* Beispiel (wird in Phase 2 ausgearbeitet): */
/*
input[type="text"], input[type="url"], input[type="number"], select {
background-color: rgba(0,0,0,0.2);
border: 1px solid var(--panel-border);
color: var(--text-color);
// ... mehr Stile
}
.garment-item:hover {
// ... neuer Hover-Effekt
}
*/
/* --- Phase 3: Fluid Workflow (Überarbeitet OHNE max-height Animation) --- */
/* Standardmäßig sind Elemente ausgeblendet */
.selection-section,
.options-section,
.result-section,
#tryOnButton,
.custom-garment-section {
/* Animation für Ein-/Ausblenden */
opacity: 0;
transform: translateY(10px); /* Leicht von unten */
transition: opacity var(--transition-smooth), transform var(--transition-smooth);
/* Standardmäßig NICHT im Layout */
display: none;
}
/* Ausnahme: Upload und Custom Garment sind initial sichtbar */
.upload-section {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility 0s 0s; /* Sofort sichtbar */
pointer-events: auto;
}
/* Zustand: Initial */
.state-initial .upload-section,
.state-initial .custom-garment-section {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
transition: opacity var(--transition-smooth) 0.1s, transform var(--transition-smooth) 0.1s, visibility 0s 0s; /* Leichte Verzögerung beim Laden */
margin-bottom: 30px; /* Standard Abstand */
padding: 30px 20px; /* Standard Padding wiederherstellen (falls im Element definiert) */
}
/* Spezifische Delays */
.state-initial .custom-garment-section {
transition-delay: 0.2s, 0.2s, 0s; /* Kommt etwas später */
}
.state-model_selected .upload-section label[for="modelImage"],
.state-garment_selected .upload-section label[for="modelImage"],
.state-processing .upload-section label[for="modelImage"] {
display: none;
}
.state-model_selected .api-selection,
.state-garment_selected .api-selection,
.state-processing .api-selection {
display: none;
}
/* Zustand: Model ausgewählt */
/* Upload-Bereich tritt zurück */
.state-model_selected .upload-section {
opacity: 0.5;
transform: scale(0.95) translateY(-10px);
visibility: visible;
pointer-events: auto; /* Weiterhin änderbar */
margin-bottom: 15px; /* Weniger Abstand */
padding: 15px 20px; /* Weniger Padding */
/* Transition bleibt Standard */
}
/* Custom bleibt wichtig */
.state-model_selected .custom-garment-section {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
margin-bottom: 30px;
padding: 30px 20px;
}
/* Auswahl und Optionen erscheinen */
.state-model_selected .selection-section,
.state-model_selected .options-section {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
margin-bottom: 30px;
padding-top: 10px; /* Beispiel */
padding-bottom: 10px; /* Beispiel */
}
.state-model_selected .selection-section {
transition-delay: 0.1s, 0.1s, 0s; /* Kleider zuerst */
}
.state-model_selected .options-section {
transition-delay: 0.25s, 0.25s, 0s; /* Optionen etwas später */
}
/* Button bleibt unsichtbar */
.state-model_selected #tryOnButton {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Zustand: Kleidungsstück ausgewählt */
.state-garment_selected .upload-section {
opacity: 0.3;
transform: scale(0.92) translateY(-15px);
visibility: visible;
pointer-events: auto;
margin-bottom: 10px;
padding: 10px 20px;
}
.state-garment_selected .custom-garment-section {
opacity: 0.8;
transform: translateY(0) scale(0.98); /* Kann leicht zurücktreten */
visibility: visible;
pointer-events: auto;
margin-bottom: 30px;
padding: 30px 20px;
}
.state-garment_selected .selection-section,
.state-garment_selected .options-section {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Button jetzt sichtbar */
.state-garment_selected .container #tryOnButton {
opacity: 1;
transform: translateY(0) scale(1)!important;
visibility: visible;
pointer-events: auto!important;
transition-delay: 0.1s, 0.1s, 0s; /* Button erscheint schnell */
margin-bottom: 30px;
}
/* Zustand: Verarbeitung läuft */
.state-processing .upload-section,
.state-processing .selection-section,
.state-processing .custom-garment-section,
.state-processing .options-section,
.state-processing #tryOnButton {
opacity: 0.1; /* Stark reduziert */
transform: scale(0.95);
visibility: hidden; /* Jetzt verstecken */
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s; /* Schneller ausblenden */
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Ergebnisbereich (nur Loader sichtbar) */
.state-processing .result-section {
opacity: 1; /* Container sichtbar */
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: none; /* Nur Loader soll Interaktion haben (falls nötig) */
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.state-processing .loader-container {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
/* Kein eigener Margin/Padding, wird vom result-section gesteuert */
transition-delay: 0.2s, 0.2s, 0.2s; /* Loader erscheint nach Ausblenden */
}
/* Ergebnisbilder noch verstecken */
.state-processing #resultImages img {
opacity: 0;
visibility: hidden;
}
/* Zustand: Ergebnis angezeigt */
.state-result_shown .upload-section,
.state-result_shown .selection-section,
.state-result_shown .custom-garment-section,
.state-result_shown .options-section,
.state-result_shown .loader-container /* Loader jetzt auch weg */ {
opacity: 0;
transform: translateY(20px) scale(0.98);
visibility: hidden;
pointer-events: none;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Ergebnisbereich bleibt */
.state-result_shown .result-section {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Ergebnisbilder jetzt animiert einblenden (falls noch nicht animiert) */
.state-result_shown #resultImages img {
/* Animation kann hier oder in der Basisregel für #resultImages img sein */
/* animation: fadeInZoom 0.8s ease-out forwards; */
opacity: 1; /* Sicherstellen, dass sie sichtbar sind */
visibility: visible;
}
/* Button wieder anbieten */
.state-result_shown #tryOnButton {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
transition-delay: 0.5s, 0.5s, 0s; /* Button kommt etwas später */
margin-bottom: 30px;
}
/* Allgemeine Transitions für die Sektionen */
/* (Bereits oben definiert, hier nur zur Klarheit) */
.upload-section, .selection-section, .options-section, .result-section, #tryOnButton, .custom-garment-section {
/* Die Transitions sind jetzt in den Basisregeln oben definiert */
}
/* Loader Container Styling (Bleibt gleich) */
.loader-container {
display: none;
padding: 40px 0;
text-align: center;
}
/* Funktion, um ein Element "einzublenden" (im Layout sichtbar + animiert) */
.show-in-grid { /* Diese Klasse wird per JS hinzugefügt/entfernt */
display: block; /* ODER grid, flex, je nach Element-Typ */
/* Die Animation wird durch die Änderung von opacity/transform getriggert */
/* Wir brauchen eine kleine Verzögerung, damit display:block erst wirkt */
animation: fadeInSmoothly var(--transition-smooth) forwards;
}
@keyframes fadeInSmoothly {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Funktion, um ein Element "auszublenden" (animiert + dann aus Layout) */
.hide-from-grid { /* Wird per JS hinzugefügt, wenn etwas ausgeblendet werden soll */
animation: fadeOutSmoothly var(--transition-smooth) forwards;
/* Nach der Animation wird display: none gesetzt (per JS oder CSS-Trick) */
pointer-events: none; /* Während der Animation nicht klickbar */
}
@keyframes fadeOutSmoothly {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(10px);
}
}
/* ZUSTANDSSTEUERUNG (vereinfacht, wird jetzt primär durch JS gesteuert) */
/* Das CSS definiert nur NOCH die Animationen oben. */
/* Die Zuweisung, was wann sichtbar ist, macht jetzt JS durch Hinzufügen/Entfernen
von 'show-in-grid' und 'hide-from-grid' (oder direktes Setzen von display). */
/* Wichtig: Die .state-* Klassen am Body können bleiben, aber sie steuern nicht mehr
direkt die Sichtbarkeit über display/opacity/transform im CSS. Sie dienen nur noch
als Marker für das JS. */
/* Loader Container Styling (bleibt gleich, wird per JS gesteuert) */
.loader-container {
display: none;
padding: 40px 0;
text-align: center;
/* Füge auch die show/hide Animationen hinzu, falls gewünscht */
opacity: 0; /* Startet unsichtbar */
transform: translateY(10px);
/* Kein display: none hier, wird von JS gesteuert */
}
.loader-container.show-in-grid {
display: block; /* Oder die passende Display-Art */
animation: fadeInSmoothly var(--transition-smooth) forwards;
}
.loader-container.hide-from-grid {
animation: fadeOutSmoothly var(--transition-smooth) forwards;
pointer-events: none;
}
/* --- Phase 4: Verfeinerung --- */
.state-result_shown .api-selection, .state-processing .api-selection { /* NEU: API-Auswahl ausblenden */
opacity: 0;
transform: translateY(10px); /* Konsistenter Ausblend-Effekt */
visibility: hidden;
pointer-events: none;
transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility 0s var(--transition-smooth);
margin-bottom: 0; /* Platz entfernen */
padding: 0; /* Platz entfernen */
/* Optional: Höhe explizit auf 0 setzen, wenn nötig */
/* max-height: 0;
overflow: hidden; */
}
/* --- Bestehende spezifische Stile (anpassen oder später überarbeiten) --- */
/* Wir behalten einige spezifische Stile bei, passen sie aber evtl. an */
/* Kleidungsstückauswahl (Grid bleibt vorerst, nur Item-Styling ändern) */
.garment-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 20px;
margin-top: 20px;
padding: 10px 0; /* Etwas Luft */
}
.garment-item {
cursor: pointer;
border: 2px solid transparent; /* Rand wird bei Auswahl/Hover geändert */
border-radius: var(--radius-medium);
overflow: hidden;
transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
position: relative;
background-color: rgba(255, 255, 255, 0.05); /* Leichter Hintergrund für die Items */
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.garment-item img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4; /* Verhältnis für Konsistenz */
object-fit: cover;
}
.garment-item:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
border-color: var(--secondary-color); /* Leuchtender Rand bei Hover */
}
.garment-item.selected {
border-color: var(--primary-start); /* Farbe vom Gradient-Start */
box-shadow: 0 0 15px rgba(249, 87, 108, 0.5); /* Leuchteffekt passend zum Rand */
transform: scale(1.02); /* Leichte Skalierung */
}
/* Das Häkchen braucht ggf. Farbanpassung */
.garment-item.selected::after {
content: '✔';
position: absolute;
top: 6px;
right: 9px;
background: var(--primary-gradient); /* Gradient für Häkchen */
color: white;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
font-weight: bold;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Fehlermeldungen */
.error-message {
color: var(--error-color);
font-size: 0.9em;
margin-top: 8px;
font-weight: 500;
padding: 10px 15px;
background-color: rgba(255, 107, 107, 0.1); /* Heller roter Hintergrund */
border: 1px solid var(--error-color);
border-radius: var(--radius-small);
display: block; /* Nimmt Breite ein */
text-align: left;
}
.error-message:empty {
display: none;
}
/* Hinweis-Text */
.upload-hint {
font-size: 0.85em;
color: var(--text-light);
margin-top: 10px;
margin-bottom: 15px;
padding: 12px 15px;
background-color: rgba(0, 0, 0, 0.15); /* Dunklerer Hinweis-BG */
border-left: 3px solid var(--secondary-color);
border-radius: 0 var(--radius-small) var(--radius-small) 0;
text-align: left;
}
.upload-hint strong {
color: var(--text-color);
font-weight: 500;
}
/* Lade-Spinner (Basis-Styling beibehalten, Farben anpassen) */
.loader-container {
padding: 30px 0;
text-align: center;
}
.loader {
border: 6px solid rgba(255, 255, 255, 0.2); /* Hellerer Hintergrund-Kreis */
border-top: 6px solid var(--secondary-color); /* Akzentfarbe für drehenden Teil */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 0 auto 15px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#predictionStatus {
margin-top: 0;
font-weight: 500;
color: var(--text-light); /* Status in heller Textfarbe */
}
/* Ergebnis-Bereich */
.result-section {
/* Kein spezieller Hintergrund mehr, nutzt den Container-Style */
text-align: center;
}
#resultImages {
display: block;
text-align: center;
gap: 20px;
margin-top: 20px;
}
#resultImages img {
max-width: 100%;
height: auto;
border: 1px solid var(--panel-border);
border-radius: var(--radius-medium);
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
transition: transform var(--transition-medium), box-shadow var(--transition-medium);
aspect-ratio: 3 / 4; /* Beibehalten? */
object-fit: cover;
}
#resultImages img:hover {
transform: scale(1.04);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
/* --- Responsivität (Basis anpassen) --- */
@media (max-width: 768px) {
body { padding: 15px; }
.container { padding: 25px 30px; margin: 20px auto; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
.garment-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; }
#resultImages { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* Optionen untereinander (muss in Phase 2 für Toggles etc. überarbeitet werden) */
.options-section label,
.options-section input:not([type="checkbox"]), /* Toggles brauchen evtl. spezielles Handling */
.options-section select {
/* display: block;
width: 100%; */
/* Vorerst beibehalten, bis die Elemente neu gestylt sind */
}
}
@media (max-width: 480px) {
body { padding: 10px; }
.container { padding: 20px; margin: 15px auto; }
h1 { font-size: 1.7em; }
h2 { font-size: 1.3em; }
button { width: 100%; padding: 14px 15px; } /* Größere Klickfläche auf Mobil */
.garment-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
#resultImages { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
/* API Auswahl untereinander */
.api-selection label { display: block; margin-bottom: 8px; text-align: left;}
.api-selection select { display: block; width: 100%; }
}
/* --- Phase 2: Kerninteraktionen --- */
/* 1. Styling für Standard Input-Felder (Text, URL, Number) */
input[type="text"],
input[type="url"],
input[type="number"],
input[type="file"] /* Basis-Styling auch für File-Input */ {
display: block; /* Stellt sicher, dass sie volle Breite nehmen */
width: 100%;
padding: 12px 15px;
margin-bottom: 18px; /* Etwas mehr Abstand */
background-color: rgba(0, 0, 0, 0.25); /* Dunkler, semi-transparent */
border: 1px solid var(--panel-border);
border-radius: var(--radius-medium);
color: var(--text-color);
font-family: var(--font-primary);
font-size: 0.95em;
transition: border-color var(--transition-medium), box-shadow var(--transition-medium), background-color var(--transition-medium);
}
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="file"]:focus,
select:focus {
outline: none;
border-color: var(--secondary-color);
background-color: rgba(0, 0, 0, 0.35); /* Etwas dunkler bei Fokus */
box-shadow: 0 0 0 3px rgba(109, 81, 240, 0.3); /* Leuchteffekt mit Sekundärfarbe */
}
/* Placeholder Text anpassen */
input::placeholder {
color: var(--text-light);
opacity: 0.7;
}
/* 2. Styling für Select-Felder */
select {
display: block;
width: 100%;
padding: 12px 35px 12px 15px; /* Platz für den Pfeil rechts */
margin-bottom: 18px;
background-color: rgba(0, 0, 0, 0.25);
border: 1px solid var(--panel-border);
border-radius: var(--radius-medium);
color: var(--text-color);
font-family: var(--font-primary);
font-size: 0.95em;
appearance: none; /* Browser-Standard-Pfeil entfernen */
-webkit-appearance: none;
-moz-appearance: none;
/* Eigener Pfeil mit Hintergrundbild */
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${encodeURIComponent(getComputedStyle(document.documentElement).getPropertyValue('--text-light').trim().substring(1))}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 10px 10px;
cursor: pointer;
transition: border-color var(--transition-medium), box-shadow var(--transition-medium), background-color var(--transition-medium);
}
/* Hinweis: Der SVG-Pfeil versucht, die --text-light Farbe zu verwenden. Das ${encodeURIComponent(...)} ist JS, das nötig wäre, um die Farbe *dynamisch* zu setzen. Für reines CSS: Farbe im SVG direkt festlegen oder eine andere Methode (Pseudoelement) verwenden. */
/* Einfachere Alternative: Feste Farbe im SVG */
select {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23A0A0C8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}
/* 3. Checkboxen zu Toggles (HTML braucht Klasse 'toggle') */
/* Füge den Checkboxen im HTML die Klasse "toggle" hinzu, z.B. */
input[type="checkbox"].toggle {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 44px; /* Etwas breiter */
height: 24px;
background-color: rgba(255, 255, 255, 0.15); /* Hellerer inaktiver Hintergrund */
border-radius: 12px;
cursor: pointer;
transition: background-color var(--transition-medium);
vertical-align: middle; /* Wichtig für Ausrichtung */
margin-right: 10px; /* Abstand zum Label */
margin-bottom: 15px; /* Beibehaltung des Abstands */
border: 1px solid var(--panel-border); /* Dezenter Rand */
}
input[type="checkbox"].toggle::before { /* Der "Knopf" */
content: '';
position: absolute;
width: 18px;
height: 18px;
background-color: #ccc; /* Heller Knopf, wenn aus */
border-radius: 50%;
top: 2px; /* Zentriert (24px Höhe - 18px Knopf) / 2 = 3 -> 2px wegen Rand? -> Anpassen! */
left: 3px; /* Startposition */
transition: transform var(--transition-medium), background-color var(--transition-medium);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
input[type="checkbox"].toggle:checked {
background-image: var(--primary-gradient); /* Farbverlauf, wenn aktiv */
border: none; /* Kein Rand, wenn aktiv */
}
input[type="checkbox"].toggle:checked::before {
background-color: #fff; /* Weißer Knopf, wenn aktiv */
transform: translateX(20px); /* Verschieben (Breite 44px - Knopf 18px - 2*Rand 3px = 20px) -> Anpassen! */
}
/* Label für die Toggles (optional, aber gut für Klickbarkeit) */
/* Stelle sicher, dass das