/* ═══════════════════════════════════════════════════════════
OLGOS FARBKÜCHE — Dark Theme
Verwendet von: farbanalysen.html, farbanalyse_garten.html,
source.html
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Lato:wght@300;400;700&display=swap');
/* ── RESET & VARIABLES ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #121212;
--surface: #23253a;
--surface2: #2a2d44;
--border: #383c5a;
--gold: #d4b85a;
--gold-lt: #ffe97a;
--text: #e8e6f0;
--text-dim: #9a9db8;
--font-T: 'Cinzel', serif;
--font-B: 'Cormorant Garamond', serif;
--font-M: 'Lato', sans-serif;
}
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-B);
min-height: 100vh;
overflow-x: hidden;
}
.swatch-cat {
display: inline-block;
font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
font-weight: 600; padding: 3px 9px; border-radius: 20px;
margin-bottom: 8px;
background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.9);
backdrop-filter: blur(4px);
}
.cat-dominant { background: rgba(180,60,20,0.55); }
.cat-sekundär { background: rgba(40,90,160,0.5); }
.cat-akzent { background: rgba(200,150,20,0.55); }
.cat-schatten { background: rgba(10,10,20,0.6); }
.cat-licht { background: rgba(220,220,200,0.4); color: rgba(0,0,0,0.75); }
/* Hero Header - Artwork Style */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
background: var(--bg);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(212,200,74,0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(40,90,160,0.03) 0%, transparent 50%);
pointer-events: none;
}
.hero-info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 64px;
background: linear-gradient(135deg, var(--bg) 0%, #1a1a2e 100%);
position: relative;
z-index: 1;
animation: fadeSlide 1.2s 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fadeSlide {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
.hero-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(212,200,74,0.8);
margin-bottom: 32px;
padding: 8px 20px;
border: 1px solid rgba(212,200,74,0.2);
border-radius: 20px;
background: rgba(212,200,74,0.05);
backdrop-filter: blur(10px);
}
.label-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #D4C84A;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
/* ══════════════════════════════════════════════════════════════
MODERNE VARIANTE MIT GOOGLE FONTS
SCHRITT 1: Füge im der index.html ein:
SCHRITT 2: Füge dieses CSS in dark.css ein
══════════════════════════════════════════════════════════════ */
.hero-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(48px, 8vw, 88px);
font-weight: 600;
line-height: 1.05;
margin: 0 0 24px 0;
letter-spacing: -3px;
/* Eleganter Gradient */
background: linear-gradient(
145deg,
#ffffff 0%,
#f0ece0 30%,
#fffac7 60%,
#c8bf72 80%,
#f0ece0 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 300% 300%;
/* Smooth Animation */
animation: luxuryGradient 10s ease infinite;
/* Premium Text Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
/* Subtiler Glanz */
filter: drop-shadow(0 4px 20px rgba(212, 200, 74, 0.2));
}
@keyframes luxuryGradient {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.hero-subtitle {
display: block;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: clamp(28px, 4.5vw, 48px);
font-weight: 300;
font-style: normal;
margin-top: 20px;
letter-spacing: 0.5px;
text-transform: uppercase;
/* Gradient für Untertitel */
background: linear-gradient(
90deg,
#D4C84A 0%,
#ffe97a 50%,
#D4C84A 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* Glühen */
filter: drop-shadow(0 0 15px rgba(212, 200, 74, 0.4));
/* Fade-In */
animation: fadeInUp 0.8s ease-out 0.4s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Optional: Akzent-Linie unter dem Titel */
.hero-title::after {
content: '';
display: block;
width: 80px;
height: 3px;
background: linear-gradient(90deg, #D4C84A, transparent);
margin: 24px 0 0 0;
animation: lineGrow 0.8s ease-out 0.6s both;
}
@keyframes lineGrow {
from {
width: 0;
opacity: 0;
}
to {
width: 80px;
opacity: 1;
}
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
letter-spacing: -2px;
}
.hero-subtitle {
letter-spacing: 0.3px;
font-size: clamp(20px, 4vw, 32px);
}
}
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.hero-subtitle {
display: block;
font-size: clamp(32px, 5.5vw, 56px);
font-style: italic;
margin-top: 16px;
letter-spacing: -1px;
font-weight: 300;
/* Gelber Gradient für Untertitel */
background: linear-gradient(
90deg,
#D4C84A 0%,
#f5e800 50%,
#D4C84A 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* Subtiler Glow */
filter: drop-shadow(0 2px 12px rgba(212, 200, 74, 0.3));
/* Kleine Verzögerung bei Animation */
animation: fadeInSubtitle 1s ease-out 0.3s both;
}
@keyframes fadeInSubtitle {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-description {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 2px;
color: rgba(255,255,255,0.5);
margin: 0 0 40px 0;
text-transform: uppercase;
}
.hero-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-bottom: 48px;
}
.tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 4px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
transition: all 0.3s ease;
}
.tag:hover {
background: rgba(212,200,74,0.1);
border-color: rgba(212,200,74,0.3);
color: #D4C84A;
transform: translateY(-2px);
}
.btn-back {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
text-decoration: none;
padding: 12px 24px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
transition: all 0.3s ease;
background: rgba(255,255,255,0.02);
margin-bottom: 60px;
}
.btn-back:hover {
color: #D4C84A;
border-color: #D4C84A;
transform: translateX(-4px);
background: rgba(212,200,74,0.05);
}
.back-arrow {
font-size: 16px;
transition: transform 0.3s ease;
}
.btn-back:hover .back-arrow {
transform: translateX(-4px);
}
.scroll-hint {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
animation: fadeIn 2s ease-out 1s both;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.scroll-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
.hero-painting {
position: relative;
overflow: hidden;
}
.hero-painting img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
animation: paintingReveal 1.8s cubic-bezier(0.16,1,0.3,1) both;
filter: brightness(0.88) contrast(1.08) saturate(1.1);
}
@keyframes paintingReveal {
from { opacity: 0; transform: scale(1.04); }
to { opacity: 1; transform: scale(1); }
}
.hero-painting::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to right, transparent 60%, var(--bg2) 100%);
pointer-events: none;
}
/* Responsive */
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
}
.hero-painting {
height: 50vh;
order: 1;
}
.hero-info {
padding: 48px 32px;
order: 2;
}
.hero-title { font-size: 48px; }
.hero-subtitle { font-size: 32px; }
.hero-label { font-size: 9px; }
.hero-description { font-size: 10px; }
}
/* Grain overlay */
body::after {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
opacity: .3; pointer-events: none; z-index: 999;
}
/* ── BACK BUTTON ── */
.back-wrap { padding: 28px 48px 0; }
.back-btn {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-M); font-size: 12px;
letter-spacing: 4px; text-transform: uppercase;
color: var(--text-dim); text-decoration: none;
padding: 11px 22px 11px 14px;
border: 1px solid var(--border); background: transparent;
cursor: pointer; transition: color .25s, border-color .25s;
position: relative; overflow: hidden;
}
.back-btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(196,168,74,.06), transparent);
opacity: 0; transition: opacity .3s;
}
.back-btn:hover { color: var(--gold); border-color: var(--gold); }
.back-btn:hover::before { opacity: 1; }
.back-btn svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.back-btn:hover svg { transform: translateX(-4px); }
/* ── HEADER ── */
header {
padding: 28px 48px 40px;
border-bottom: 1px solid var(--border);
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
animation: fadeDown .9s ease both;
}
.header-left .kicker {
font-family: var(--font-M); font-weight: 400;
font-size: 12px; letter-spacing: 5px; text-transform: uppercase;
color: var(--gold); margin-bottom: 14px;
}
header h1 {
font-family: var(--font-T); font-size: clamp(26px, 4vw, 48px);
font-weight: 200; letter-spacing: 2px; color: #f0ece0; line-height: 1.25;
}
header h1 span { color: var(--gold); }
.header-right {
font-family: var(--font-M); font-size: 13px; letter-spacing: 3px;
text-transform: uppercase; color: var(--text-dim);
text-align: right; line-height: 2.4;
}
/* ── PHOTO PREVIEW ── */
.photo-preview {
padding: 32px 48px;
border-bottom: 1px solid var(--border);
display: flex; gap: 32px; align-items: flex-start;
animation: fadeDown .9s ease .05s both;
}
.photo-thumb {
width: 220px; height: 160px; object-fit: cover;
border: 1px solid var(--border); flex-shrink: 0;
filter: brightness(0.92) contrast(1.05);
}
.photo-meta { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.photo-meta-label {
font-family: var(--font-M); font-size: 10px; letter-spacing: 4px;
text-transform: uppercase; color: var(--text-dim);
}
.photo-meta-val { font-family: var(--font-B); font-size: 19px; color: var(--text); }
.photo-meta-desc {
font-family: var(--font-B);
font-size: 1.1em; color: var(--text-dim); line-height: 1.7;
margin-top: 8px; max-width: 480px;
}
/* ── LEGEND ── */
.legend {
display: flex; flex-wrap: wrap; gap: 10px 28px;
padding: 20px 48px;
border-bottom: 1px solid var(--border);
animation: fadeDown .9s ease .1s both;
}
.legend-title {
width: 100%; font-family: var(--font-M); font-size: 15px; letter-spacing: 4px;
text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
}
.leg-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-M); font-size: 13px; color: var(--text-dim); letter-spacing: 1px; }
.leg-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
/* ── UPLOAD ZONE (source.html) ── */
.upload-section {
padding: 40px 48px;
border-bottom: 1px solid var(--border);
animation: fadeDown .9s ease .1s both;
}
.upload-label {
font-family: var(--font-M); font-size: 12px; letter-spacing: 4px;
text-transform: uppercase; color: var(--text-dim); margin-bottom: 20px;
}
.upload-area {
border: 1px dashed var(--border);
background: var(--surface);
padding: 60px 40px;
text-align: center;
cursor: pointer;
transition: border-color .3s, background .3s;
position: relative;
}
.upload-area:hover,
.upload-area.drag-over {
border-color: var(--gold);
background: var(--surface2);
}
.upload-area input[type="file"] {
position: absolute; inset: 0;
opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.upload-icon { font-size: 40px; margin-bottom: 16px; color: var(--text-dim); }
.upload-title {
font-family: var(--font-T); font-size: 18px;
letter-spacing: 3px; color: var(--text); margin-bottom: 10px;
}
.upload-sub {
font-family: var(--font-M); font-size: 12px;
letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim);
}
/* ── PREVIEW (source.html) ── */
.preview-section {
display: none;
padding: 32px 48px;
border-bottom: 1px solid var(--border);
gap: 32px; align-items: flex-start;
}
.preview-section.visible { display: flex; }
.preview-thumb {
width: 220px; height: 160px; object-fit: cover;
border: 1px solid var(--border); flex-shrink: 0;
filter: brightness(0.92) contrast(1.05);
}
.preview-meta { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.preview-meta-label {
font-family: var(--font-M); font-size: 12px; letter-spacing: 4px;
text-transform: uppercase; color: var(--text-dim);
}
.preview-meta-val { font-family: var(--font-B); font-size: 19px; color: var(--text); }
/* ── ANALYZE BUTTON (source.html) ── */
.analyze-wrap {
padding: 28px 48px;
border-bottom: 1px solid var(--border);
}
.btn-analyze {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--font-M); font-size: 13px;
letter-spacing: 4px; text-transform: uppercase;
color: var(--bg); background: var(--gold);
border: none; padding: 16px 36px;
cursor: pointer; transition: background .25s, transform .2s;
}
.btn-analyze:hover { background: var(--gold-lt); transform: translateY(-1px); }
.btn-analyze:disabled {
background: var(--surface); color: var(--text-dim);
cursor: not-allowed; transform: none;
}
.btn-analyze .spinner {
width: 14px; height: 14px;
border: 2px solid rgba(0,0,0,.2);
border-top-color: #000;
border-radius: 50%;
animation: spin .7s linear infinite;
display: none;
}
.btn-analyze.loading .spinner { display: block; }
.btn-analyze.loading .btn-text { opacity: .6; }
/* ── ERROR (source.html) ── */
.error-msg {
display: none;
margin: 0 48px;
padding: 14px 20px;
border: 1px solid #c0143c;
background: rgba(192,20,60,.08);
font-family: var(--font-M); font-size: 11px;
color: #e04060; letter-spacing: 1px;
}
.error-msg.visible { display: block; }
/* ── RESULTS (source.html) ── */
#results { display: none; }
#results.visible { display: block; }
.results-header {
padding: 40px 48px 12px;
animation: fadeDown .6s ease both;
}
/* ── SECTION HEAD ── */
.sect-head {
display: flex; align-items: center; gap: 20px; margin-bottom: 28px;
}
.sect-head h2 {
font-family: var(--font-T); font-size: 13px;
letter-spacing: 5px; text-transform: uppercase;
color: var(--gold); white-space: nowrap; font-weight: 400;
}
.sect-head .line {
flex: 1; height: 1px;
background: linear-gradient(to right, var(--border), transparent);
}
/* ── MAIN GRID ── */
main {
max-width: 1380px; margin: 0 auto;
padding: 52px 40px 100px;
display: grid; grid-template-columns: 1fr;
gap: 3px;
}
/* ── COLOR CARD ── */
.card {
display: grid; grid-template-columns: 220px 1fr;
border: 1px solid var(--border);
background: var(--surface); overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
animation: fadeUp .8s ease both;
}
.card:hover {
border-color: #2e3158;
box-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.card-swatch {
position: relative; overflow: hidden;
display: flex; flex-direction: column;
justify-content: flex-end; padding: 22px;
min-height: 200px;
}
.card-swatch::after {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(
112deg, transparent, transparent 5px,
rgba(0,0,0,.07) 5px, rgba(0,0,0,.07) 7px
);
}
.swatch-name {
position: relative; z-index: 1;
font-family: var(--font-B); font-size: 28px; font-weight: 600;
line-height: 1.2; color: rgba(255,255,255,.95);
text-shadow: 0 2px 14px rgba(0,0,0,.8);
}
.swatch-hex {
position: relative; z-index: 1;
font-family: var(--font-M); font-size: 13px;
letter-spacing: 3px; color: rgba(255,255,255,.7); margin-top: 6px;
}
.swatch-role {
position: relative; z-index: 1;
font-family: var(--font-B); font-style: italic;
font-size: 15px; color: rgba(255,255,255,.65); margin-top: 4px;
}
.card-body {
padding: 28px 32px;
border-left: 1px solid var(--border);
display: flex; flex-direction: column; gap: 22px;
}
.mix-label {
font-family: var(--font-M); font-size: 12px;
letter-spacing: 4px; text-transform: uppercase; color: var(--text-dim);
}
.mix-bar-wrap { display: flex; flex-direction: column; gap: 8px; }
.mix-bar {
display: flex; height: 34px; border-radius: 2px;
overflow: hidden; border: 1px solid rgba(255,255,255,.07);
}
.mix-seg {
height: 100%; position: relative;
transition: flex .6s cubic-bezier(.22,1,.36,1);
}
.mix-seg::after {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(
112deg, transparent, transparent 5px,
rgba(0,0,0,.08) 5px, rgba(0,0,0,.08) 7px
);
}
.mix-seg:hover::before {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%);
background: var(--surface2); border: 1px solid var(--border);
color: var(--text); font-family: var(--font-M);
font-size: 12px; letter-spacing: 2px;
padding: 6px 14px; white-space: nowrap; z-index: 10;
}
.ingredients { display: flex; flex-direction: column; gap: 12px; }
.ing-row {
display: grid; grid-template-columns: 16px 200px 1fr 48px;
align-items: center; gap: 14px;
}
.ing-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ing-name { font-family: var(--font-B); font-size: 19px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-track { height: 5px; background: var(--border); border-radius: 2px; overflow: hidden; }
.ing-fill { height: 100%; border-radius: 2px; transition: width .8s cubic-bezier(.22,1,.36,1); }
.ing-pct { font-family: var(--font-M); font-size: 13px; letter-spacing: 1px; color: var(--gold); text-align: right; font-weight: 600; }
.card-tip {
border-top: 1px solid var(--border); padding-top: 18px;
font-family: var(--font-B);
font-size: 1.2em; color: var(--text-dim); line-height: 1.75;
}
.card-tip strong { color: var(--gold); font-style: normal; font-weight: 600; font-size: 14px; letter-spacing: 2px; }
/* Card stagger animations */
.card:nth-child(1) { animation-delay: .10s; }
.card:nth-child(2) { animation-delay: .18s; }
.card:nth-child(3) { animation-delay: .26s; }
.card:nth-child(4) { animation-delay: .34s; }
.card:nth-child(5) { animation-delay: .42s; }
.card:nth-child(6) { animation-delay: .50s; }
.card:nth-child(7) { animation-delay: .58s; }
.card:nth-child(8) { animation-delay: .66s; }
/* ── PROPORTION BAR ── */
.proportion-section {
max-width: 1380px; margin: 0 auto;
padding: 0 40px 60px;
}
.prop-bar {
display: flex; height: 48px; border-radius: 2px;
overflow: hidden; border: 1px solid var(--border);
margin-bottom: 16px;
}
.prop-seg {
height: 100%; position: relative;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.prop-seg-label {
font-family: var(--font-M); font-size: 11px;
letter-spacing: 2px; color: rgba(255,255,255,.85);
text-transform: uppercase; white-space: nowrap; font-weight: 600;
}
/* ── GESAMTPALETTE ── */
.total-palette {
max-width: 1380px; margin: 0 auto;
padding: 0 40px 80px;
animation: fadeUp .8s ease .4s both;
}
.gesamtpalette { display: flex; flex-wrap: wrap; gap: 3px; }
.gp-chip {
display: flex; flex-direction: column;
align-items: center; gap: 10px; padding: 18px 20px;
background: var(--surface); border: 1px solid var(--border);
flex: 1; min-width: 120px; transition: background .3s;
}
.gp-chip:hover { background: var(--surface2); }
.gp-circle { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); }
.gp-cname { font-family: var(--font-M); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.gp-hex { font-family: var(--font-M); font-size: 12px; letter-spacing: 2px; color: var(--gold); opacity: .8; }
/* ── PDF BUTTON ── */
.pdf-wrap {
max-width: 1380px; margin: 0 auto;
padding: 0 40px 48px;
display: none;
}
.pdf-wrap.visible { display: block; }
.btn-pdf {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-M); font-size: 12px;
letter-spacing: 4px; text-transform: uppercase;
color: var(--text-dim); background: transparent;
border: 1px solid var(--border); padding: 14px 28px;
cursor: pointer; transition: color .25s, border-color .25s;
position: relative; overflow: hidden;
}
.btn-pdf::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(212,184,90,.08), transparent);
opacity: 0; transition: opacity .3s;
}
.btn-pdf:hover { color: var(--gold); border-color: var(--gold); }
.btn-pdf:hover::before { opacity: 1; }
/* ── FOOTER ── */
footer {
border-top: 1px solid var(--border); padding: 28px 48px;
text-align: center; font-family: var(--font-M); font-size: 12px;
letter-spacing: 4px; text-transform: uppercase; color: var(--text-dim);
}
/* ── ANIMATIONS ── */
@keyframes fadeDown { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── PRINT ── */
@media print {
body { background: #fff !important; color: #111 !important; }
.back-wrap, .upload-section,
.preview-section, .analyze-wrap, .error-msg,
.pdf-wrap, footer, body::after { display: none !important; }
header { border-bottom: 2px solid #1a1410 !important; padding: 16px 24px !important; }
header h1 { color: #1a1410 !important; font-size: 28px !important; }
header h1 span, .kicker, .sect-head h2, .ing-pct,
.card-tip strong, .gp-hex { color: #c4a84a !important; }
.header-right, .legend-title, .leg-item, .mix-label,
.card-tip, .gp-cname { color: #666 !important; }
#results { display: block !important; }
.results-header { padding: 20px 24px 8px !important; }
.sect-head .line, .ing-track { background: #ddd !important; }
.legend { background: #f9f6f0 !important; border-color: #ddd !important; padding: 12px 24px !important; }
main { padding: 12px 24px 32px !important; }
.card { border: 1px solid #ddd !important; background: #fff !important; break-inside: avoid; page-break-inside: avoid; margin-bottom: 8px !important; }
.card-body { border-left: 1px solid #ddd !important; background: #fff !important; }
.ing-name { color: #111 !important; }
.proportion-section, .total-palette { padding: 0 24px 24px !important; }
.prop-bar { border-color: #ddd !important; }
.gp-chip { background: #f9f6f0 !important; border-color: #ddd !important; }
}
/* ── RESPONSIVE ── */
@media (max-width: 760px) {
.card { grid-template-columns: 1fr; }
.card-swatch { min-height: 140px; }
.card-body { border-left: none; border-top: 1px solid var(--border); }
header, .back-wrap { padding: 24px; }
main { padding: 32px 16px 60px; }
.legend, .photo-preview { padding: 20px 24px; }
.photo-preview { flex-direction: column; }
.photo-thumb { width: 100%; height: 200px; }
.ing-row { grid-template-columns: 14px 1fr 1fr 36px; }
.total-palette, .proportion-section { padding-left: 16px; padding-right: 16px; }
}
.swatch-cat {
display: inline-block;
font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
font-weight: 600; padding: 3px 9px; border-radius: 20px;
margin-bottom: 8px;
background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.9);
backdrop-filter: blur(4px);
}
.cat-dominant { background: rgba(180,60,20,0.55); }
.cat-sekundär { background: rgba(40,90,160,0.5); }
.cat-akzent { background: rgba(200,150,20,0.55); }
.cat-schatten { background: rgba(10,10,20,0.6); }
.cat-licht { background: rgba(220,220,200,0.4); color: rgba(0,0,0,0.75); }