/* ===========================================================
MERCH MY DAY — globales Stylesheet (klassisch, ohne Build)
=========================================================== */
/* ── Fonts: lokal selbst gehostet (woff2, Subsets latin + latin-ext) ── */
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
src: url("../fonts/inter-v20-latin_latin-ext-300.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/inter-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/inter-v20-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
src: url("../fonts/inter-v20-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
src: url("../fonts/inter-v20-latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2") format("woff2");
}
:root {
--black: #0a0a0a;
--white: #f5f5f3;
--mid: #888;
--border: rgba(255, 255, 255, 0.1);
--accent: #fff;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--black);
color: var(--white);
font-family: "Inter", sans-serif;
font-weight: 300;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.mono { font-family: "IBM Plex Mono", monospace; }
img { display: block; max-width: 100%; }
/* Nur für Screenreader & Suchmaschinen, visuell ohne jede Auswirkung (z. B. H1 auf /shops) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ── Scroll-Reveal ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; } .reveal-d4 { transition-delay: 0.4s; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scanline { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.marquee-track, .artist-marquee-track { animation: none; }
.hero-tag, .hero-title, .hero-meta { opacity: 1; animation: none; }
}
/* ===================== NAV ===================== */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
display: flex; justify-content: space-between; align-items: center;
/* gap = Mindestabstand zwischen Logo · Menü · Rechts — auch wenn space-between eng wird */
gap: clamp(16px, 3vw, 48px);
padding: 24px clamp(18px, 3.2vw, 40px); transition: background 0.4s;
}
.nav.scrolled { background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
/* Logo darf nie schrumpfen/verzerren (flex-shrink + max-width heben das globale img-Limit auf) */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 28px; width: auto; max-width: none; filter: brightness(0) invert(1); }
/* Menüpunkte rücken bei weniger Platz fließend zusammen (32px breit → 12px kurz vor Burger) */
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); list-style: none; }
.nav-links a { color: rgba(245,245,243,0.6); text-decoration: none; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; transition: color 0.3s; }
/* Nur die obersten Links sind flex (Chevron) — Dropdown-Links stapeln Label + Tag */
.nav-links .nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-links .nav-item > a:hover { color: var(--white); }
.nav-links .nav-item > a.active { color: var(--white); font-weight: 500; }
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-cta {
font-size: 13px; color: var(--white); text-decoration: none;
border: 1px solid rgba(255,255,255,0.3); padding: 10px 22px; letter-spacing: 0.06em;
transition: background 0.3s, border-color 0.3s, color 0.3s; white-space: nowrap;
}
.nav-cta:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.nav-burger { position: relative; background: none; border: none; cursor: pointer; font-family: inherit; display: none; color: var(--white); padding: 8px; }
.nav-burger::after { content: ""; position: absolute; inset: -3px; } /* Tap-Fläche auf 44px */
.nav-burger svg { width: 22px; height: 22px; }
.nav-burger svg line { transition: transform 0.3s ease, opacity 0.2s ease; transform-origin: 12px 12px; }
.nav-burger.open line:nth-of-type(1) { transform: rotate(45deg) translateY(5px); }
.nav-burger.open line:nth-of-type(2) { opacity: 0; }
.nav-burger.open line:nth-of-type(3) { transform: rotate(-45deg) translateY(-5px); }
/* ── Hover-Dropdowns der Hauptnavigation (reines CSS, :hover + :focus-within) ── */
.nav-item { position: relative; display: flex; }
.nav-chev { width: 10px; height: 10px; stroke: currentColor; fill: none; transition: transform 0.3s; }
.nav-item:hover .nav-chev, .nav-item:focus-within .nav-chev { transform: rotate(180deg); }
.nav-item:hover > a, .nav-item:focus-within > a { color: var(--white); }
.nav-drop {
position: absolute; top: 100%; left: 50%; z-index: 210;
/* padding-top = unsichtbare Hover-Brücke zwischen Link und Panel */
padding-top: 18px; transform: translate(-50%, 8px);
opacity: 0; visibility: hidden;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop {
opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.nav-drop-panel {
min-width: 260px; padding: 8px;
background: rgba(10,10,10,0.92); border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
@supports (backdrop-filter: blur(12px)) {
.nav-drop-panel { background: rgba(10,10,10,0.78); backdrop-filter: blur(12px); }
}
.nav-drop-item { display: block; padding: 11px 14px; border-radius: 9px; text-decoration: none; transition: background 0.2s; }
.nav-drop-item:hover { background: rgba(255,255,255,0.06); }
.nav-drop-label { display: block; font-size: 13.5px; letter-spacing: 0.02em; color: rgba(245,245,243,0.85); white-space: nowrap; transition: color 0.2s; }
.nav-drop-item:hover .nav-drop-label { color: var(--white); }
.nav-drop-ext { color: rgba(245,245,243,0.4); }
.nav-drop-tag { display: block; margin-top: 4px; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.3); white-space: nowrap; }
/* Letztes Dropdown (About) klappt rechtsbündig aus — läuft sonst auf schmalen Screens rechts raus */
.nav-item:last-child .nav-drop { left: auto; right: -14px; transform: translate(0, 8px); }
.nav-item:last-child:hover .nav-drop, .nav-item:last-child:focus-within .nav-drop { transform: translate(0, 0); }
/* Mehr side panel */
.mehr-backdrop { position: fixed; inset: 0; z-index: 197; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.4s; }
.mehr-backdrop.open { background: rgba(0,0,0,0.45); pointer-events: auto; }
.mehr-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; z-index: 198;
background: rgba(10,10,10,0.98); backdrop-filter: blur(24px); border-left: 1px solid rgba(255,255,255,0.07);
transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
display: flex; flex-direction: column; overflow: hidden;
}
.mehr-panel.open { transform: translateX(0); }
.mehr-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding-top: 76px; }
.mehr-item { display: flex; align-items: center; justify-content: space-between; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.04); padding: 22px 32px; transition: background 0.2s; }
.mehr-item:hover { background: rgba(255,255,255,0.03); }
.mehr-item:hover .mehr-arrow { opacity: 1; transform: translateX(0); }
.mehr-item-texts { display: flex; flex-direction: column; gap: 5px; }
.mehr-item-label { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; color: rgba(245,245,243,0.85); }
.mehr-item:hover .mehr-item-label { color: var(--white); }
.mehr-item-tag { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.25); }
.mehr-arrow { color: rgba(245,245,243,0.4); font-size: 18px; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s, transform 0.25s; flex-shrink: 0; }
.mehr-footer { padding: 24px 32px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 13px; color: rgba(245,245,243,0.35); flex-shrink: 0; }
.mehr-footer a { color: rgba(245,245,243,0.7); text-decoration: underline; }
/* ===================== HERO ===================== */
.hero { position: relative; height: 100vh; height: 100dvh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.2) 50%, rgba(10,10,10,0.4) 100%); }
.hero-content { position: relative; z-index: 2; padding: 0 40px 72px; width: 100%; }
.hero-tag { display: inline-block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,243,0.5); margin-bottom: 20px; opacity: 0; animation: up 0.8s ease forwards 0.4s; }
.hero-title { font-size: clamp(40px, 6.5vw, 96px); font-weight: 600; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 36px; opacity: 0; animation: up 0.9s ease forwards 0.6s; }
.hero-title span { display: block; }
.hero-title .thin { font-weight: 300; }
.hero-meta { display: flex; align-items: center; gap: 40px; opacity: 0; animation: up 0.8s ease forwards 0.9s; }
.hero-services { font-size: 12px; color: rgba(245,245,243,0.45); letter-spacing: 0.06em; }
/* ===================== MARQUEES ===================== */
.marquee-wrap { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; overflow: hidden; background: var(--black); }
.marquee-track { display: flex; width: max-content; animation: marquee 56s linear infinite; }
.marquee-track img { height: 22px; width: auto; opacity: 0.45; margin: 0 44px; filter: brightness(0) invert(1); transition: opacity 0.3s; }
.marquee-track img:hover { opacity: 1; }
.artist-marquee-wrap { border-bottom: 1px solid var(--border); padding: 24px 0; overflow: hidden; background: var(--black); }
.artist-marquee-track { display: flex; align-items: center; width: max-content; animation: marquee-rev 72s linear infinite; }
.artist-chip { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-right: 40px; opacity: 0.6; text-decoration: none; transition: opacity 0.3s; }
.artist-chip:hover { opacity: 1; }
.artist-chip img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.15); }
.artist-chip span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
/* ===================== INTRO ===================== */
.intro { position: relative; overflow: hidden; padding: 100px 40px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 80px; align-items: stretch; }
.intro-bg { position: absolute; inset: 0; z-index: 0; }
.intro-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.intro-gradient { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.7) 50%, rgba(10,10,10,0.3) 100%); }
.intro-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(10,10,10,0.65) 82%, var(--black) 100%); }
.intro-left { position: relative; z-index: 1; display: flex; align-items: center; }
.intro-title { font-size: clamp(36px, 4.2vw, 62px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.intro-title em { font-style: normal; color: var(--mid); }
.intro-hover { position: absolute; bottom: 40px; right: 40px; max-width: 360px; z-index: 1; opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
.intro:hover .intro-hover { opacity: 1; transform: translateY(0); }
.intro-hover p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; font-weight: 300; color: rgba(245,245,243,0.85); }
.intro-hover span { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; color: rgba(245,245,243,0.4); }
/* ===================== PILLARS + STATS ===================== */
.pillars-wrap { padding: 0 40px 60px; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.pillar-card { position: relative; display: block; color: inherit; text-decoration: none; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 4; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.3s; }
.pillar-card:hover { border-color: rgba(255,255,255,0.22); }
.pillar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pillar-card:hover .pillar-img { transform: scale(1.04); }
.pillar-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 18px 18px; background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.4) 60%, transparent 100%); display: flex; flex-direction: column; gap: 4px; }
.pillar-num { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.2em; color: rgba(245,245,243,0.35); text-transform: uppercase; }
.pillar-title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--white); line-height: 1.2; }
.pillar-sub { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.08em; color: rgba(245,245,243,0.3); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat-card { background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.stat-num { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; flex-shrink: 0; white-space: nowrap; }
.stat-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.stat-label { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.3); line-height: 1.4; }
/* ===================== FOOTER ===================== */
footer { border-top: 1px solid var(--border); padding: 72px 40px 48px; }
.footer-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 36px; }
.footer-col-label { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,243,0.3); margin-bottom: 20px; }
.footer-col a { display: block; font-size: 15px; font-weight: 300; color: rgba(245,245,243,0.65); text-decoration: none; margin-bottom: 12px; transition: color 0.2s; letter-spacing: -0.01em; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; gap: 24px; }
.footer-copy { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.1em; color: rgba(245,245,243,0.2); }
/* Wortmarke als Druk-Wide-Vektorpfad (partials/wordmark-svg) — skaliert über die volle Breite */
.footer-wordmark { margin: 40px 0 0; color: rgba(245,245,243,0.14); user-select: none; }
.footer-wordmark svg { display: block; width: 100%; height: auto; }
/* ===================== CURSOR GLOW ===================== */
.cursor-glow {
position: fixed; top: 0; left: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px;
border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s ease; will-change: transform;
}
/* ===================== DESKTOP/MOBILE ===================== */
@media (min-width: 821px) {
.intro-bg img { object-position: center 20%; }
}
/* Nav → Burger früher als der restliche 820er-Umbruch: im Worst Case (eingeloggt +
Warenkorb-Icon) braucht die volle Leiste ~890px — darunter würde sie überlaufen. */
@media (max-width: 920px) {
.nav { padding: 16px 18px; }
.nav-links { display: none; }
.nav-burger { display: flex; }
}
@media (max-width: 820px) {
.hero-content { padding: 0 18px 48px; }
.hero-title { font-size: clamp(34px, 11vw, 64px); }
.marquee-wrap { padding: 14px 0; }
.marquee-track img { height: 18px; margin: 0 26px; }
.artist-marquee-wrap { padding: 18px 0; }
.artist-chip { margin-right: 26px; gap: 10px; }
.artist-chip img { width: 34px; height: 34px; }
.artist-chip span { font-size: 11px; }
.intro { grid-template-columns: 1fr; gap: 24px; padding: 64px 18px; }
.intro-hover { position: static; max-width: none; opacity: 1; transform: none; }
.pillars-wrap { padding: 0 18px 48px; }
.pillar-grid { grid-template-columns: repeat(2, 1fr); }
/* Stats: 2 Spalten, Inhalt vertikal gestapelt (Zahl über Label), damit lange Werte nicht quetschen */
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 16px; }
.stat-divider { display: none; }
.stat-num { font-size: 20px; }
footer { padding: 56px 18px 40px; }
.footer-top { grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 28px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-wordmark { margin: 28px 0 0; }
}
/* ── Kleine Phones ── */
@media (max-width: 480px) {
.nav { padding: 14px 14px; }
.hero-content { padding: 0 14px 40px; }
.pillars-wrap { padding: 0 14px 40px; }
/* Stats: eine Kachel pro Reihe → volle Breite für lange Werte wie „3.500 m²" */
.stats-grid { grid-template-columns: 1fr; }
.stat-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; }
.stat-divider { display: block; }
/* Footer: einspaltig, damit keine Waisen-Spalte entsteht */
.footer-top { grid-template-columns: 1fr; gap: 24px; }
}
/* ===================== STRUKTUR / DIVISIONS ===================== */
.work { padding: 60px 40px 80px; }
.section-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mid); margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
.section-label::before { content: ""; width: 24px; height: 1px; background: var(--mid); }
.group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.group-card { background: var(--black); padding: 40px 36px 36px; display: flex; flex-direction: column; gap: 20px; transition: background 0.3s; position: relative; overflow: hidden; text-decoration: none; }
.group-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.group-card:hover { background: #111; }
.group-card:hover::before { transform: scaleX(1); }
.group-card-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; z-index: 0; }
.group-card:hover .group-card-hover-img { opacity: 0.22; }
.group-card > *:not(.group-card-hover-img) { position: relative; z-index: 1; }
.group-card-top { display: flex; justify-content: flex-end; }
.group-tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); border: 1px solid var(--border); padding: 4px 10px; border-radius: 20px; }
.group-wordmark { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; }
.group-mmd { font-size: 11px; letter-spacing: 0.15em; color: rgba(245,245,243,0.35); font-weight: 400; }
.group-sub { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--white); }
.group-desc { font-size: 14px; line-height: 1.7; color: rgba(245,245,243,0.45); }
/* ===================== CASES-MARQUEE ===================== */
.cases-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.cases-eyebrow { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }
.cases-title { font-size: clamp(22px, 2.5vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
.btn-outline { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--white); background: transparent; cursor: pointer; font-family: inherit; border: 1px solid rgba(255,255,255,0.2); padding: 12px 22px; border-radius: 4px; transition: background 0.2s, border-color 0.2s; white-space: nowrap; }
.btn-outline:hover { background: rgba(255,255,255,0.06); }
.btn-outline svg { width: 12px; height: 12px; }
.cases-viewport { overflow: hidden; position: relative; }
.cases-track { display: flex; width: max-content; animation: caseScroll 50s linear infinite; }
.case-card { flex: 0 0 300px; width: 300px; margin-right: 6px; text-decoration: none; display: block; }
@keyframes caseScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ===================== LOOKBOOK-STRIP ===================== */
.lookbook-head { padding: 0 40px; }
.lookbook-strip { padding: 0 40px 40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.lookbook-cell { position: relative; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer; }
.lookbook-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.lookbook-cell:hover .lookbook-img { transform: scale(1.05); }
.lookbook-cta { padding: 0 40px 80px; display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
.cases-track { animation: none; }
}
@media (max-width: 820px) {
.work { padding: 48px 18px 64px; }
.group-grid { grid-template-columns: 1fr; }
/* Kein Hover auf Touch -> Karten-Bilder dauerhaft leicht sichtbar machen */
.group-card-hover-img { opacity: 0.2; }
.cases-head { margin-bottom: 28px; }
.case-card { flex-basis: 240px; width: 240px; }
.lookbook-head { padding: 0 18px; }
.lookbook-strip { grid-template-columns: repeat(3, 1fr); padding: 0 0 32px; }
.lookbook-cta { padding: 0 18px 56px; }
}
/* ===================== SERVICES-AKKORDEON ===================== */
.services { padding: 60px 40px 100px; }
.services-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
.services-title { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.services-cta-mobile { display: none; }
.services-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.service-row { border-bottom: 1px solid var(--border); overflow: hidden; scroll-margin-top: 90px; }
.service-row.highlight { border-top: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); }
.service-trigger { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; cursor: pointer; gap: 24px; transition: padding 0.3s; }
.service-trigger:hover { padding-left: 8px; }
.service-num { font-size: 11px; color: var(--mid); letter-spacing: 0.1em; min-width: 32px; }
.service-name { font-size: clamp(18px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.01em; flex: 1; }
.service-tags { display: flex; gap: 8px; flex-wrap: wrap; max-width: 400px; }
.service-tag { font-size: 11px; letter-spacing: 0.06em; color: var(--mid); border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 20px; }
.service-arrow { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform 0.3s, background 0.3s; flex-shrink: 0; }
.service-row.open .service-arrow { transform: rotate(45deg); background: var(--white); color: var(--black); }
.service-body { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
.service-body-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; padding: 0 0 36px 48px; }
.service-detail-title { font-size: 13px; font-weight: 500; margin-bottom: 8px; letter-spacing: 0.03em; }
.service-detail-body { font-size: 14px; line-height: 1.65; color: rgba(245,245,243,0.5); }
.service-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 100px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; transition: background 0.2s; }
.service-cta:hover { background: rgba(255,255,255,0.15); }
@media (max-width: 820px) {
.services { padding: 48px 18px 64px; }
.services-header { margin-bottom: 36px; }
.service-tags { display: none; }
.service-body-inner { grid-template-columns: 1fr; gap: 20px; padding: 0 0 28px 0; }
.services-cta-desktop { display: none; }
.services-cta-mobile { display: flex; justify-content: center; margin-top: 32px; }
}
/* ===================== TOUR DATES ===================== */
.tour-section { padding: 60px 40px 100px; }
.tour-head { margin-bottom: 40px; }
.tour-eyebrow { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 12px; }
.tour-title { font-size: clamp(28px, 4vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-bottom: 14px; }
.tour-sub { font-size: 15px; color: rgba(245,245,243,0.55); }
.tour-empty { font-size: 15px; color: rgba(245,245,243,0.4); border-top: 1px solid var(--border); padding-top: 28px; }
.tour-table { border-top: 1px solid var(--border); }
.tour-head-row, .tour-row { display: grid; grid-template-columns: 130px 1.2fr 1fr 1fr 140px; gap: 20px; align-items: center; }
.tour-head-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.tour-head-row span { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }
.tour-row { padding: 18px 0; border-bottom: 1px solid var(--border); transition: background 0.2s; }
.tour-row:hover { background: rgba(255,255,255,0.02); }
.tour-date { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: rgba(245,245,243,0.6); }
.tour-artist { font-size: 15px; font-weight: 500; color: var(--white); }
.tour-city, .tour-loc { font-size: 14px; color: rgba(245,245,243,0.6); }
.tour-status { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); border: 1px solid var(--border); padding: 5px 10px; border-radius: 20px; white-space: nowrap; }
.tour-status.soldout { color: rgba(245,245,243,0.35); border-color: rgba(255,255,255,0.06); }
.tour-status:not(.soldout)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: tour-pulse 1.6s ease-out infinite; }
@keyframes tour-pulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) { .tour-status:not(.soldout)::before { animation: none; } }
.tour-hidden { display: none; }
.tour-table.show-all .tour-hidden { display: grid; }
/* nur-mobil versteckte Zeilen sind auf Desktop normal sichtbar */
.tour-more-wrap { display: flex; justify-content: flex-start; margin-top: 36px; }
/* Button, der nur auf Mobile gebraucht wird, auf Desktop ausblenden */
.tour-more-wrap.tour-more-mobile { display: none; }
@media (max-width: 820px) {
.tour-section { padding: 48px 18px 64px; }
.tour-head { margin-bottom: 28px; }
.tour-head-row { display: none; }
.tour-row { grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; align-items: start; }
.tour-date { grid-column: 1; grid-row: 1; }
.tour-artist { grid-column: 1; grid-row: 2; }
.tour-city { grid-column: 1; grid-row: 3; }
.tour-loc { display: none; }
.tour-status { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; }
/* Mobile: Zeilen 7–8 verstecken (nur 6 zeigen), bei "Mehr anzeigen" einblenden */
.tour-hidden-m { display: none; }
.tour-table.show-all .tour-hidden-m { display: grid; }
/* nur-mobil-Button hier wieder einblenden */
.tour-more-wrap.tour-more-mobile { display: flex; }
}
/* ===================== AKTUELLES / LINKEDIN-FEED ===================== */
.feed { padding: 100px 40px; border-top: 1px solid var(--border); }
.feed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.feed-title { font-size: clamp(28px, 3vw, 42px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.feed-follows { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.feed-follow { display: inline-flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--white); border: 1px solid rgba(255,255,255,0.15); padding: 12px 20px; border-radius: 6px; white-space: nowrap; transition: background 0.2s, border-color 0.2s; }
.feed-follow:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }
.feed-follow svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Karussell auf allen Viewports: Desktop zeigt 3 Karten, Rest per Snap-Scroll/Dots */
.feed-grid { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.feed-grid::-webkit-scrollbar { display: none; }
.feed-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.feed-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; color: var(--white); cursor: pointer; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.feed-arrow svg { width: 16px; height: 16px; }
.feed-arrow:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }
.feed-arrow:disabled { opacity: 0.25; cursor: default; background: transparent; border-color: rgba(255,255,255,0.15); }
.feed-dots { display: flex; justify-content: center; gap: 8px; }
.feed-dots button { position: relative; width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(245,245,243,0.22); cursor: pointer; transition: background 0.3s, transform 0.3s; }
.feed-dots button::after { content: ""; position: absolute; inset: -8px; } /* unsichtbare Tap-Fläche ~23px — endet exakt am Nachbar-Punkt (gap 8px), überdeckt ihn nie */
.feed-dots button.aktiv { background: var(--white); transform: scale(1.3); }
/* Live-LinkedIn-Widget (Drittanbieter-iframe) */
.feed-embed { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #111; }
.feed-embed iframe { width: 100%; display: block; border: 0; }
.li-post-card { flex: 0 0 calc((100% - 16px) / 3); scroll-snap-align: start; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.3s, background 0.3s; text-decoration: none; color: inherit; }
.li-post-card:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); }
.li-post-header { display: flex; align-items: center; gap: 12px; }
.li-post-avatar { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.li-post-id { flex: 1; min-width: 0; }
.li-post-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.li-post-meta { font-size: 12px; color: #666; line-height: 1.4; display: flex; align-items: center; gap: 4px; }
.li-post-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.li-icon { margin-left: auto; flex-shrink: 0; opacity: 0.7; width: 18px; height: 18px; }
/* Kein flex:1 am Text: ein gestreckter -webkit-box malt Zeilen unter die Ellipse — Footer pinnt stattdessen per margin-top:auto */
.li-post-text { font-size: 14px; line-height: 1.65; font-weight: 300; color: rgba(245,245,243,0.75); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.li-post-footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.06em; color: rgba(245,245,243,0.25); border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; }
.li-post-open { margin-left: auto; transition: color 0.3s; }
.li-post-card:hover .li-post-open { color: rgba(245,245,243,0.6); }
/* ===================== CTA-BAND ===================== */
.cta-band { position: relative; overflow: hidden; padding: 120px 40px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 60px; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.28); z-index: 0; }
.cta-overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.2) 55%, rgba(10,10,10,0.55) 100%); }
.cta-band-title { position: relative; z-index: 1; font-size: clamp(36px, 5vw, 72px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; max-width: 640px; }
.cta-band-title em { font-style: normal; color: rgba(245,245,243,0.55); }
.cta-band-right { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; flex-shrink: 0; }
.cta-primary { display: inline-flex; align-items: center; gap: 14px; background: var(--white); color: var(--black); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 18px 40px; transition: background 0.3s, transform 0.2s; }
.cta-primary:hover { background: #e0e0e0; transform: translateY(-1px); }
.cta-primary .cta-line { display: inline-block; width: 24px; height: 1px; background: currentColor; }
.cta-secondary { font-size: 13px; color: rgba(245,245,243,0.7); text-decoration: none; letter-spacing: 0.06em; transition: color 0.3s; }
.cta-secondary:hover { color: var(--white); }
@media (max-width: 820px) {
.feed { padding: 56px 18px; }
.feed-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.feed-follows { flex-direction: row; align-items: flex-start; }
/* Karussell-Basis kommt aus der Hauptregel — mobil nur breitere, mittig snappende Karten */
.feed-grid { gap: 12px; margin: 0 -18px; padding: 0 18px; }
.li-post-card { flex: 0 0 86%; scroll-snap-align: center; }
.cta-band { flex-direction: column; align-items: flex-start; gap: 28px; padding: 56px 18px; }
.cta-band-right { width: 100%; align-items: flex-start; }
}
/* ===================== ANFRAGEN / KONTAKT ===================== */
.anfrage-intro { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; min-height: 56vh; border-bottom: 1px solid var(--border); }
.anfrage-lead { padding: 120px 60px 64px 40px; display: flex; flex-direction: column; justify-content: center; }
.anfrage-eyebrow { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 24px; }
.anfrage-title { font-size: clamp(34px, 4.5vw, 64px); font-weight: 600; line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 28px; }
.anfrage-title .thin { font-weight: 300; }
.anfrage-sub { font-size: 16px; line-height: 1.6; color: rgba(245,245,243,0.6); max-width: 440px; }
.anfrage-side { position: relative; overflow: hidden; min-height: 420px; }
.anfrage-side-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
/* oben solide schwarz (Nav-Bereich), Mitte klar, unten dunkel für Kontakt-Kontrast */
.anfrage-side-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--black) 0%, var(--black) 8%, transparent 24%, transparent 46%, rgba(10,10,10,0.85) 78%, rgba(10,10,10,0.95) 100%); }
.anfrage-contact { position: absolute; left: 32px; bottom: 32px; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.anfrage-contact-label { display: block; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.6); margin-bottom: 6px; }
.anfrage-contact a { font-size: 16px; color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 2px; transition: border-color 0.2s; }
.anfrage-contact a:hover { border-color: var(--white); }
.type-section { padding: 72px 40px 100px; max-width: 1200px; margin: 0 auto; }
.type-label { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 24px; }
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.type-card { position: relative; text-align: left; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 28px 20px 48px; cursor: pointer; background: rgba(255,255,255,0.04); font-family: inherit; color: var(--white); transition: border-color 0.25s, background 0.25s; overflow: hidden; }
.type-card:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.type-card.active { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12); }
.type-num { display: block; font-size: 10px; letter-spacing: 0.14em; color: rgba(245,245,243,0.25); margin-bottom: 20px; transition: color 0.25s; }
.type-card.active .type-num { color: rgba(245,245,243,0.8); }
.type-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.type-desc { display: block; font-size: 12.5px; color: var(--mid); line-height: 1.5; font-weight: 300; }
.type-arrow { position: absolute; bottom: 18px; right: 20px; font-size: 16px; color: var(--mid); transition: transform 0.2s, color 0.2s; }
.type-card:hover .type-arrow, .type-card.active .type-arrow { transform: translate(2px, -2px); color: var(--white); }
.type-other { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; padding: 20px 24px; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; background: rgba(255,255,255,0.02); text-decoration: none; color: var(--white); transition: border-color 0.2s, background 0.2s; }
.type-other:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.type-other.active { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); }
.type-other { width: 100%; cursor: pointer; font-family: inherit; }
.type-other-text { font-size: 14px; color: rgba(245,245,243,0.6); font-weight: 300; }
.type-other-cta { display: inline-flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--white); }
.form-panel { display: none; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 4px; padding: 48px; margin-top: 40px; }
.form-panel.visible { display: block; }
.form-panel-header { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.form-panel-title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
.form-panel-subtitle { font-size: 14px; color: var(--mid); margin-top: 6px; font-weight: 300; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.span2 { grid-column: span 2; }
.form-group label { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.6); }
.form-panel input, .form-panel textarea, .admin-form input:not([type="checkbox"]), .admin-form textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 14px 16px; color: var(--white); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 300; outline: none; -webkit-appearance: none; transition: border-color 0.2s, background 0.2s; }
.form-panel input::placeholder, .form-panel textarea::placeholder, .admin-form input:not([type="checkbox"])::placeholder, .admin-form textarea::placeholder { color: rgba(245,245,243,0.2); }
.form-panel input:focus, .form-panel textarea:focus, .admin-form input:not([type="checkbox"]):focus, .admin-form textarea:focus { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); }
.form-panel textarea { resize: vertical; min-height: 120px; }
.form-error { color: #ff6b6b; font-size: 12px; font-weight: 300; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.submit-note { font-size: 12px; color: rgba(245,245,243,0.3); font-weight: 300; max-width: 400px; }
.btn-submit { display: inline-flex; align-items: center; gap: 14px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); background: var(--white); border: none; padding: 18px 48px; cursor: pointer; transition: opacity 0.2s; }
.btn-submit:hover { opacity: 0.85; }
.btn-submit span { display: inline-block; width: 24px; height: 1px; background: currentColor; }
.success-panel { display: none; text-align: center; padding: 80px 48px; }
.success-panel.visible { display: block; }
.success-check { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 22px; }
.success-panel h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin-bottom: 12px; }
.success-panel p { color: var(--mid); font-weight: 300; line-height: 1.7; }
@media (max-width: 820px) {
.anfrage-intro { grid-template-columns: 1fr; min-height: auto; border-bottom: none; }
.anfrage-lead { padding: 96px 18px 40px; border-right: none; border-bottom: none; }
.anfrage-side { min-height: 240px; }
.anfrage-side-img { object-position: center 40%; }
/* keine harten Linien: Bild oben & unten in Schwarz faden */
.anfrage-side-overlay { background: linear-gradient(to bottom, var(--black) 0%, transparent 22%, transparent 42%, rgba(10,10,10,0.88) 72%, rgba(10,10,10,0.97) 100%); }
.type-section { padding: 40px 18px 64px; }
.type-grid { grid-template-columns: repeat(2, 1fr); }
.type-card { padding: 20px 14px 44px; }
.type-other { flex-direction: column; align-items: flex-start; gap: 10px; }
.form-panel { padding: 28px 18px; }
.form-grid { grid-template-columns: 1fr; }
.form-group.span2 { grid-column: auto; }
.btn-submit { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
.type-grid { grid-template-columns: 1fr; }
}
/* ===== Services-Seite ===== */
.svc-hero { position: relative; min-height: 58vh; display: flex; align-items: flex-end; overflow: hidden; }
.svc-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 14%; }
/* Oben schwarz (Nav bleibt sauber), links dunkler (Titel lesbar), unten schwarz; Bild bleibt rechts sichtbar */
.svc-hero-overlay { position: absolute; inset: 0; background:
linear-gradient(to right, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.45) 42%, transparent 72%),
linear-gradient(to bottom, var(--black) 0%, transparent 28%, transparent 42%, rgba(10,10,10,0.8) 82%, var(--black) 100%); }
.svc-hero-content { position: relative; z-index: 2; padding: 0 40px 64px; max-width: 900px; }
.svc-hero-eyebrow { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 22px; }
.svc-hero-title { font-size: clamp(38px, 5.5vw, 80px); font-weight: 600; line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 26px; }
.svc-hero-title .thin { font-weight: 300; }
.svc-hero-sub { font-size: 16px; line-height: 1.65; color: rgba(245,245,243,0.6); max-width: 520px; }
.svc-showcase { padding: 28px 40px 40px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.svc-card { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.svc-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.svc-card:hover .svc-card-img { transform: scale(1.05); }
.svc-card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 45%, transparent 70%); }
.svc-card-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px; }
.svc-card-num { display: block; font-size: 10px; letter-spacing: 0.14em; color: rgba(245,245,243,0.45); margin-bottom: 10px; }
.svc-card-title { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.svc-card-sub { display: block; font-size: 10px; letter-spacing: 0.08em; color: rgba(245,245,243,0.45); }
.svc-detail { padding: 40px 40px 20px; }
.svc-process { padding: 60px 40px 100px; }
.svc-process-head { margin-bottom: 48px; }
.svc-process-title { font-size: clamp(28px, 4vw, 54px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.svc-process-title em { font-style: normal; color: var(--mid); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.process-step { background: var(--black); padding: 40px 32px; transition: background 0.3s; }
.process-step:hover { background: rgba(255,255,255,0.02); }
.process-step-num { display: block; font-size: 40px; font-weight: 500; line-height: 1; color: rgba(245,245,243,0.1); margin-bottom: 24px; }
.process-step-title { font-size: 16px; font-weight: 500; margin-bottom: 10px; letter-spacing: -0.01em; }
.process-step-body { font-size: 14px; line-height: 1.7; color: rgba(245,245,243,0.5); }
@media (max-width: 820px) {
.svc-hero { min-height: 52vh; }
.svc-hero-bg { object-position: center 38%; }
.svc-hero-content { padding: 0 18px 44px; }
.svc-showcase { padding: 20px 18px 24px; }
.svc-grid { grid-template-columns: repeat(2, 1fr); }
.svc-detail { padding: 24px 18px 8px; }
.svc-process { padding: 40px 18px 72px; }
.svc-process-head { margin-bottom: 32px; }
.process-grid { grid-template-columns: 1fr 1fr; }
.process-step { padding: 22px 16px; }
.process-step-num { font-size: 30px; margin-bottom: 14px; }
.process-step-title { font-size: 15px; }
.process-step-body { font-size: 12px; line-height: 1.6; }
}
@media (max-width: 480px) {
.svc-grid { grid-template-columns: 1fr; }
}
/* ===== About-Seite ===== */
.about-hero .svc-hero-bg { object-position: center 20%; } /* Desktop: Motiv sitzt tiefer im Ausschnitt — mobil bleiben 32 % (Regel in der 820px-Query) */
.about-stats { padding: 40px 40px 20px; }
.stat-tagline { align-items: center; font-size: 15px; font-weight: 500; line-height: 1.45; color: rgba(245,245,243,0.75); }
.about-mission { padding: 90px 40px; }
.about-mission-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: start; margin-top: 8px; }
.about-mission-head { font-size: clamp(28px, 3.4vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
.about-mission-head em { font-style: normal; color: var(--mid); }
.about-mission-text p { font-size: 15px; line-height: 1.75; color: rgba(245,245,243,0.6); margin-bottom: 18px; }
.about-mission-text p:last-child { margin-bottom: 0; }
.about-founders { padding: 20px 40px 40px; }
.founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 1040px; margin: 0 auto; }
.founder-card { position: relative; aspect-ratio: 4 / 4.5; border-radius: 12px; overflow: hidden; cursor: pointer; outline: none; }
.founder-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.founder-card:hover .founder-img { transform: scale(1.04); }
.founder-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 42%, transparent 68%); }
.founder-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; transition: opacity 0.35s ease; }
.founder-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.founder-role { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.5); }
/* Affordance + Vision-Zitat (Hover Desktop, Tap Mobile via .open) */
.founder-plus { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; background: rgba(0,0,0,0.3); z-index: 2; transition: opacity 0.3s ease, transform 0.3s ease; }
.founder-quote { position: absolute; inset: 0; z-index: 3; background: rgba(8,8,8,0.92); padding: 32px 30px; display: flex; flex-direction: column; justify-content: center; gap: 18px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.founder-quote-text { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; font-weight: 400; color: var(--white); }
.founder-quote-author { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.5); }
.founder-card:hover .founder-quote, .founder-card.open .founder-quote, .founder-card:focus-visible .founder-quote { opacity: 1; }
.founder-card:hover .founder-plus, .founder-card.open .founder-plus { opacity: 0; transform: rotate(45deg); }
.founder-card:hover .founder-info, .founder-card.open .founder-info { opacity: 0; }
/* ── Team-Sektion: Illustration des ganzen Teams — s/w via Filter, Farbe beim Hover ── */
.about-team { padding: 90px 40px; }
.about-team-head { max-width: 1200px; margin: 8px auto 36px; font-size: clamp(28px, 3.4vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
.about-team-head em { font-style: normal; color: var(--mid); }
.team-figure { position: relative; max-width: 1200px; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.team-img { width: 100%; display: block; filter: grayscale(1); transition: filter 0.6s ease; }
.team-figure:hover .team-img { filter: grayscale(0); }
.team-figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(to top, rgba(10,10,10,0.6), transparent); pointer-events: none; }
.team-caption { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.85); }
.values-section { position: relative; padding: 100px 40px; overflow: hidden; }
.values-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.values-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.8); }
.values-inner { position: relative; z-index: 1; }
.values-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; margin-top: 32px; }
.value-item { background: rgba(10,10,10,0.5); padding: 40px 32px; }
.value-num { display: block; font-size: 28px; font-weight: 500; color: rgba(245,245,243,0.2); margin-bottom: 20px; }
.value-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.value-body { font-size: 14px; line-height: 1.7; color: rgba(245,245,243,0.65); }
.about-pillars { padding: 80px 40px 100px; }
/* Desktop: About-Stats größer & lesbarer (Mobile bleibt wie es ist) */
@media (min-width: 821px) {
.about-stats .stat-card { padding: 22px 24px; gap: 18px; }
.about-stats .stat-num { font-size: 36px; }
.about-stats .stat-divider { height: 36px; }
.about-stats .stat-label { font-size: 11px; letter-spacing: 0.12em; color: rgba(245,245,243,0.6); }
.about-stats .stat-tagline { font-size: 15px; }
}
@media (max-width: 820px) {
.about-hero .svc-hero-bg { object-position: center 32%; }
.about-stats { padding: 28px 18px 12px; }
.about-mission { padding: 56px 18px; }
.about-mission-grid { grid-template-columns: 1fr; gap: 24px; }
.about-founders { padding: 16px 18px 24px; }
.founders-grid { grid-template-columns: 1fr; }
.about-team { padding: 48px 18px 40px; }
.about-team-head { margin-bottom: 22px; }
.values-section { padding: 56px 18px; }
.values-list { grid-template-columns: 1fr; }
.value-item { padding: 28px 22px; }
.about-pillars { padding: 48px 18px 72px; }
}
/* ===== Projekte-Seite ===== */
/* Hero folgt dem Lookbook-Schema (.svc-hero) — nur das Motiv wird justiert */
.projekte-hero .svc-hero-bg { object-position: center 55%; }
.proj-tabs { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 40px; border-bottom: 1px solid var(--border); }
.proj-tab { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); text-decoration: none; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.proj-tab:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.proj-tab.active { color: var(--black); background: var(--white); border-color: var(--white); }
.proj-section { padding: 56px 40px 8px; scroll-margin-top: 100px; }
/* Abstand vor der CTA (letzte proj-section hat nur 8px unten) — passend zu anderen Seiten */
.proj-section + .cta-band { margin-top: 100px; }
.proj-section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.proj-section-count { font-size: 11px; letter-spacing: 0.1em; color: var(--mid); }
.proj-section-title { font-size: clamp(24px, 3vw, 40px); font-weight: 500; letter-spacing: -0.02em; }
.proj-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.project-item { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--border); transition: padding 0.3s; }
a.project-item { text-decoration: none; color: inherit; }
.project-item.is-link:hover { padding-left: 8px; }
.project-arrow { font-size: 20px; color: var(--mid); padding-right: 8px; transition: transform 0.3s ease, color 0.3s ease; }
.project-item.is-link:hover .project-arrow { color: var(--white); transform: translate(3px, -3px); }
.project-img-wrap { width: 200px; height: 120px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.04); }
.project-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.project-item:hover .project-img { transform: scale(1.04); }
.project-client { display: block; font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.01em; }
.project-client-sub { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); margin-top: 6px; }
@media (max-width: 820px) {
.projekte-hero .svc-hero-bg { object-position: center 55%; }
.proj-tabs { padding: 18px 18px; gap: 8px; }
.proj-tab { padding: 7px 13px; }
.proj-section { padding: 40px 18px 4px; scroll-margin-top: 80px; }
.proj-section + .cta-band { margin-top: 64px; }
.proj-section-head { margin-bottom: 12px; }
.project-item { grid-template-columns: 90px 1fr auto; gap: 16px; padding: 14px 0; }
.project-img-wrap { width: 90px; height: 64px; }
.project-arrow { font-size: 16px; padding-right: 2px; }
}
/* ===== Lookbook-Seite ===== */
.lookbook-hero .svc-hero-bg { object-position: center 42%; }
.lb-page { padding: 48px 40px 100px; }
.lb-grid { columns: 4; column-gap: 8px; }
.lb-item { position: relative; display: block; width: 100%; padding: 0; margin: 0 0 8px; border: none; background: none; cursor: pointer; border-radius: 8px; overflow: hidden; break-inside: avoid; -webkit-column-break-inside: avoid; }
.lb-item img { display: block; width: 100%; height: auto; transition: transform 0.5s ease, filter 0.4s ease; }
.lb-item:hover img { transform: scale(1.04); filter: brightness(0.72); }
.lb-item-arrow { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10,10,10,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.35); color: var(--white); font-size: 14px; line-height: 1; text-decoration: none; opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s, border-color 0.2s; pointer-events: none; }
.lb-item:hover .lb-item-arrow { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lb-item-arrow:hover { background: rgba(10,10,10,0.82); border-color: rgba(255,255,255,0.65); }
@media (hover: none) { .lb-item-arrow { display: none; } }
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 40px; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 88vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.lightbox-stage { position: relative; display: inline-flex; }
.lightbox-shop { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10,10,10,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); color: var(--white); font-size: 16px; line-height: 1; text-decoration: none; opacity: 0; transition: opacity 0.25s ease, background 0.2s, border-color 0.2s; }
.lightbox-shop[hidden] { display: none; }
.lightbox-stage:hover .lightbox-shop { opacity: 1; }
.lightbox-shop:hover { background: rgba(10,10,10,0.82); border-color: rgba(255,255,255,0.65); }
@media (hover: none) { .lightbox-stage .lightbox-shop { opacity: 1; } }
.lightbox-close { position: fixed; top: 24px; right: 28px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; color: var(--white); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.lightbox-close:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
.lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; color: var(--white); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.lightbox-nav:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); }
.lightbox-prev { left: 28px; }
.lightbox-next { right: 28px; }
@media (max-width: 1100px) { .lb-grid { columns: 3; } }
@media (max-width: 820px) {
.lookbook-hero .svc-hero-bg { object-position: center 42%; }
.lb-page { padding: 32px 14px 72px; }
.lb-grid { columns: 2; column-gap: 6px; }
.lb-item { margin-bottom: 6px; }
.lightbox { padding: 16px; }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-nav { width: 42px; height: 42px; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
/* Mobil kein Hover → Shop-Pfeil in der Großansicht dauerhaft sichtbar. */
.lightbox-shop { opacity: 1; }
}
/* ===== Partner-Seite ===== */
.pt-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 140px 40px 72px; }
.pt-badge { display: inline-block; align-self: flex-start; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: 7px 14px; margin-bottom: 24px; }
.pt-eyebrow { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); margin-bottom: 18px; }
.pt-hero-title { font-size: clamp(38px, 5vw, 76px); font-weight: 600; line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 24px; }
.pt-hero-title .thin { font-weight: 300; }
.pt-hero-sub { font-size: 16px; line-height: 1.65; color: rgba(245,245,243,0.6); max-width: 500px; margin-bottom: 34px; }
.pt-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.pt-btn-primary { display: inline-flex; align-items: center; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); background: var(--white); border: 1px solid var(--white); padding: 15px 32px; border-radius: 4px; text-decoration: none; transition: opacity 0.2s; }
.pt-btn-primary:hover { opacity: 0.85; }
.pt-btn-ghost { display: inline-flex; align-items: center; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,0.25); padding: 15px 32px; border-radius: 4px; text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.pt-btn-ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }
.pt-hero-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 500px; }
.pt-photo { overflow: hidden; border-radius: 8px; background: rgba(255,255,255,0.04); }
.pt-photo.tall { grid-row: span 2; }
.pt-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pt-photo:hover img { transform: scale(1.05); }
.pt-usps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pt-usp { padding: 40px 32px; border-right: 1px solid var(--border); }
.pt-usp:last-child { border-right: none; }
.pt-usp-num { display: block; font-size: 11px; letter-spacing: 0.1em; color: var(--mid); margin-bottom: 20px; }
.pt-usp-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.pt-usp-body { font-size: 14px; line-height: 1.65; color: rgba(245,245,243,0.55); }
.pt-pillar { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-bottom: 1px solid var(--border); }
.pt-pillar-text { padding: 90px 60px; display: flex; flex-direction: column; justify-content: center; }
.pt-pillar.flip .pt-pillar-text { order: 2; }
.pt-pillar-eyebrow { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); margin-bottom: 20px; }
.pt-pillar-title { font-size: clamp(26px, 3.2vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 20px; }
.pt-pillar-body { font-size: 15px; line-height: 1.7; color: rgba(245,245,243,0.6); max-width: 460px; margin-bottom: 28px; }
.pt-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ptag { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,245,243,0.55); border: 1px solid rgba(255,255,255,0.14); border-radius: 100px; padding: 6px 12px; }
.pt-pillar-visual { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.015); padding: 40px; }
.pt-pillar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; width: 100%; max-width: 460px; }
.pt-cell { background: var(--black); padding: 30px 24px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: rgba(245,245,243,0.85); min-height: 96px; display: flex; align-items: flex-end; }
.pt-steps { width: 100%; max-width: 460px; }
.pt-step { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pt-step:last-child { border-bottom: none; }
.pt-step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white); flex-shrink: 0; }
.pt-step-num { font-size: 11px; letter-spacing: 0.1em; color: var(--mid); min-width: 24px; }
.pt-step-label { font-size: 15px; font-weight: 500; }
.pt-coming { width: 100%; max-width: 460px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.02); }
.pt-coming-bar { display: flex; gap: 7px; padding: 14px 18px; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(255,255,255,0.06); }
.pt-coming-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.pt-coming-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pt-coming-metric { display: flex; justify-content: space-between; align-items: baseline; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 16px 18px; }
.pt-coming-k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); }
.pt-coming-v { font-size: 20px; font-weight: 600; color: rgba(245,245,243,0.5); }
.pt-coming-badge { display: block; text-align: center; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.45); padding: 0 24px 22px; }
.pt-marquee-label { text-align: center; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); padding: 56px 40px 8px; }
.pt-cta { text-align: center; padding: 96px 40px 120px; border-top: 1px solid var(--border); }
.pt-cta-eyebrow { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 20px; }
.pt-cta-title { font-size: clamp(30px, 4.5vw, 58px); font-weight: 600; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 18px; }
.pt-cta-sub { font-size: 16px; line-height: 1.6; color: rgba(245,245,243,0.6); max-width: 480px; margin: 0 auto 32px; }
@media (max-width: 820px) {
.pt-hero { grid-template-columns: 1fr; gap: 36px; padding: 100px 18px 48px; }
.pt-hero-photos { height: 360px; }
.pt-usps { grid-template-columns: 1fr; }
.pt-usp { padding: 26px 18px; border-right: none; border-bottom: 1px solid var(--border); }
.pt-usp:last-child { border-bottom: none; }
.pt-pillar { grid-template-columns: 1fr; }
.pt-pillar-text { padding: 48px 18px 32px; }
.pt-pillar.flip .pt-pillar-text { order: 0; }
.pt-pillar-visual { min-height: 320px; padding: 28px 18px; }
.pt-grid, .pt-steps, .pt-coming { max-width: none; }
.pt-marquee-label { padding: 40px 18px 4px; }
.pt-cta { padding: 64px 18px 80px; }
}
@media (max-width: 480px) {
.pt-usps { grid-template-columns: 1fr; }
.pt-usp { border-right: none; border-bottom: 1px solid var(--border); }
.pt-usp:last-child { border-bottom: none; }
.pt-grid { grid-template-columns: 1fr; }
}
/* ===== FAQ-Seite ===== */
/* Hero folgt dem Lookbook-Schema (.svc-hero) — nur das Motiv wird justiert */
.faq-hero .svc-hero-bg { object-position: center 40%; }
.faq-section { padding: 32px 40px 8px; }
.svc-hero + .faq-section { padding-top: 48px; }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--white); text-align: left; transition: padding 0.3s; }
.faq-trigger:hover { padding-left: 8px; }
.faq-question { font-size: clamp(16px, 1.7vw, 20px); font-weight: 500; letter-spacing: -0.01em; }
.faq-icon { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: transform 0.3s, background 0.3s, color 0.3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--white); color: var(--black); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; }
.faq-body-inner { padding: 0 60px 28px 0; }
.faq-answer { font-size: 15px; line-height: 1.75; color: rgba(245,245,243,0.55); max-width: 760px; }
.faq-cta { text-align: center; padding: 72px 40px 120px; margin-top: 40px; border-top: 1px solid var(--border); }
.faq-cta-title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.faq-cta-sub { font-size: 15px; line-height: 1.6; color: rgba(245,245,243,0.6); max-width: 460px; margin: 0 auto 28px; }
.faq-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 820px) {
.faq-hero .svc-hero-bg { object-position: center 40%; }
.faq-section { padding: 24px 18px 4px; }
.svc-hero + .faq-section { padding-top: 36px; }
.faq-trigger { padding: 22px 0; gap: 16px; }
.faq-body-inner { padding: 0 0 24px 0; }
.faq-cta { padding: 56px 18px 80px; }
}
/* ============================================================
SUPPLY CHAIN / PRODUKTION (/supply-chain) — monochrom
============================================================ */
/* Hero-CTA (auf svc-hero): unten rechts, außerhalb des Textblocks — Text steht wie auf allen Unterseiten */
.sc-hero-cta {
position: absolute; right: 40px; bottom: 64px; z-index: 2;
display: inline-flex; align-items: center; gap: 10px;
background: var(--white); color: var(--black); text-decoration: none;
padding: 15px 30px; font-size: 12px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 0.25s;
}
.sc-hero-cta:hover { opacity: 0.85; }
@media (max-width: 820px) {
.sc-hero-cta { right: 18px; bottom: 18px; padding: 12px 20px; font-size: 11px; }
.sc-hero .svc-hero-content { padding-bottom: 84px; }
}
/* sc-hero folgt jetzt 1:1 dem Lookbook-Schema (.svc-hero): 58vh, Standard-Overlay,
Content-Padding 64px. Nur der zusätzliche CTA-Button bleibt supply-chain-spezifisch. */
/* 01 — Produktionsnetzwerk */
.sc-network { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.sc-network-text { padding: 90px 60px 90px 40px; border-right: 1px solid var(--border); }
.sc-network-headline { font-size: clamp(30px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 22px; }
.sc-network-body { font-size: 15px; color: rgba(245,245,243,0.5); line-height: 1.75; max-width: 480px; margin-bottom: 44px; }
.sc-loc-list { display: flex; flex-direction: column; }
.sc-loc-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.sc-loc-row:first-child { border-top: 1px solid var(--border); }
.sc-loc-code { font-size: 10px; letter-spacing: 0.14em; color: rgba(245,245,243,0.35); text-transform: uppercase; }
.sc-loc-name { font-size: 15px; color: rgba(245,245,243,0.85); }
.sc-loc-role { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,243,0.3); }
.sc-network-media { position: relative; overflow: hidden; min-height: 560px; }
.sc-network-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) saturate(0.6); }
.sc-network-media-shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,10,0.5), transparent 60%); }
/* Punkt-Globus statt Standort-Liste (linke Spalte); vertikales Wischen scrollt weiter */
.sc-globus-halter { position: relative; margin-top: 8px; }
/* Hover-Tooltip: „Stadt · Land" über dem Standort-Punkt (Position setzt globus.js) */
.sc-globus-tip { position: absolute; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: rgba(10,10,10,0.92); border: 1px solid rgba(255,255,255,0.22); border-radius: 100px; padding: 6px 11px; z-index: 3; }
.sc-globus-halter canvas { display: block; width: 100%; max-width: 520px; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 0.9s ease; }
.sc-globus-halter canvas.bereit { opacity: 1; }
.sc-globus-halter canvas:active { cursor: grabbing; }
.sc-globus-hinweis { display: block; max-width: 520px; text-align: center; margin-top: 10px; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.3); }
/* Stats */
.sc-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sc-stat { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; }
.sc-stat:first-child { border-right: 1px solid var(--border); }
.sc-stat-num { font-size: clamp(52px, 7vw, 104px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.sc-stat-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.55); margin-top: 16px; }
.sc-stat-sub { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,243,0.32); margin-top: 8px; line-height: 1.6; }
/* Highlights */
.sc-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.sc-hl-card { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--black); display: block; text-decoration: none; }
.sc-hl-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.sc-hl-card:hover img { transform: scale(1.04); }
.sc-hl-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.78) 0%, transparent 55%); pointer-events: none; }
.sc-hl-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; }
.sc-hl-tag { display: block; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,243,0.45); margin-bottom: 5px; }
.sc-hl-name { font-size: 14px; font-weight: 500; color: var(--white); letter-spacing: 0.02em; text-transform: uppercase; }
/* Leistungen */
.sc-leist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sc-leist-card { background: var(--black); padding: 40px 36px; display: flex; gap: 22px; align-items: flex-start; transition: background 0.25s; }
.sc-leist-card:hover { background: rgba(255,255,255,0.03); }
.sc-leist-num { font-size: 11px; letter-spacing: 0.12em; color: rgba(245,245,243,0.3); padding-top: 4px; }
.sc-leist-name { font-size: 15px; font-weight: 600; color: var(--white); letter-spacing: -0.01em; margin-bottom: 8px; }
.sc-leist-desc { font-size: 14px; color: rgba(245,245,243,0.45); line-height: 1.65; }
/* Zertifikat-Banner */
.sc-cert { position: relative; min-height: 52vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sc-cert-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.32); }
.sc-cert-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.35); }
.sc-cert-text { position: relative; z-index: 2; font-size: clamp(18px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.45; text-align: center; max-width: 840px; padding: 40px; }
/* Was wir produzieren */
.sc-groups { padding: 90px 40px 0; border-top: 1px solid var(--border); }
.sc-groups-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 44px; }
.sc-group { background: var(--black); padding: 28px 26px; transition: background 0.25s; }
.sc-group:hover { background: rgba(255,255,255,0.03); }
.sc-group-name { font-size: 16px; font-weight: 600; color: var(--white); letter-spacing: -0.01em; margin-bottom: 12px; }
.sc-group-sub { font-size: 10px; letter-spacing: 0.08em; color: rgba(245,245,243,0.5); line-height: 1.8; }
.sc-group-special { grid-column: 1 / -1; background: rgba(255,255,255,0.04); display: flex; flex-direction: column; }
.sc-group-special:hover { background: rgba(255,255,255,0.07); }
.sc-groups-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,243,0.65); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 4px; transition: color 0.2s, border-color 0.2s; }
.sc-groups-link:hover { color: var(--white); border-color: rgba(255,255,255,0.6); }
.sc-groups-link span { transition: transform 0.25s; }
.sc-groups-link:hover span { transform: translateX(3px); }
/* 03 — Entwicklung & Sampling (keine Trennlinie zu 02; Abstand wie 03->04) */
.sc-dev { padding: 90px 40px 44px; }
.sc-dev-intro { font-size: 15px; color: rgba(245,245,243,0.5); line-height: 1.75; max-width: 560px; }
/* Editorial */
.sc-editorial { display: grid; grid-template-columns: 2fr 1fr; gap: 1px; background: var(--border); }
.sc-ed { position: relative; overflow: hidden; }
.sc-ed img { width: 100%; height: 400px; object-fit: cover; filter: brightness(0.7) saturate(0.6); transition: transform 0.6s ease, filter 0.5s ease; }
.sc-ed:hover img { transform: scale(1.04); filter: brightness(0.85) saturate(0.7); }
.sc-ed-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; background: linear-gradient(transparent, rgba(10,10,10,0.15) 30%, rgba(10,10,10,0.9)); }
.sc-ed-label { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; color: rgba(245,245,243,0.95); margin-bottom: 8px; }
.sc-ed-sub { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(245,245,243,0.68); max-width: 440px; }
/* 04 — Mission */
.sc-mission { border-top: 1px solid var(--border); padding-top: 90px; }
.sc-mission-head { position: relative; height: 50vh; min-height: 360px; overflow: hidden; }
.sc-mission-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35); }
.sc-mission-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(10,10,10,0.92) 100%); }
.sc-mission-head-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px 40px; }
.sc-mission-title { font-size: clamp(28px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; max-width: 700px; }
.sc-mission-title .thin { font-weight: 300; color: rgba(245,245,243,0.4); }
.sc-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.sc-goal { background: var(--black); padding: 48px 40px; }
.sc-goal-num { display: block; font-size: 26px; font-weight: 600; color: rgba(255,255,255,0.08); line-height: 1; margin-bottom: 20px; }
.sc-goal-name { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 12px; }
.sc-goal-desc { font-size: 14px; line-height: 1.7; color: rgba(245,245,243,0.45); }
/* ── Tablet/Mobile ── */
@media (max-width: 820px) {
.sc-network { grid-template-columns: 1fr; }
.sc-network-text { padding: 56px 18px; border-right: none; border-bottom: 1px solid var(--border); }
.sc-network-media { min-height: 340px; }
.sc-stats { grid-template-columns: 1fr; }
.sc-stat { padding: 48px 24px; }
.sc-stat:first-child { border-right: none; border-bottom: 1px solid var(--border); }
.sc-highlights { grid-template-columns: repeat(2, 1fr); }
.sc-leist { grid-template-columns: repeat(2, 1fr); }
.sc-groups { padding: 56px 18px 0; }
.sc-groups-grid { grid-template-columns: repeat(2, 1fr); }
.sc-dev { padding: 56px 18px 24px; }
/* Editorial: zwei Bilder nebeneinander statt untereinander, flacher, nur Titel */
.sc-editorial { grid-template-columns: 1fr 1fr; }
.sc-ed img { height: 220px; }
.sc-ed-cap { padding: 16px 14px; }
.sc-ed-label { font-size: 12px; margin-bottom: 0; }
.sc-ed-sub { display: none; }
.sc-mission { padding-top: 56px; }
.sc-mission-head { height: 40vh; min-height: 260px; }
.sc-mission-head-inner { padding: 28px 18px; }
/* Ziele kompakter: Nummer als kleines Badge links, Text daneben */
.sc-goals { grid-template-columns: 1fr; }
.sc-goal { padding: 22px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; }
.sc-goal-num { font-size: 12px; font-weight: 500; color: rgba(245,245,243,0.3); margin-bottom: 0; grid-column: 1; grid-row: 1; padding-top: 1px; }
.sc-goal-name { font-size: 15px; margin-bottom: 6px; grid-column: 2; grid-row: 1; }
.sc-goal-desc { font-size: 12.5px; grid-column: 2; grid-row: 2; }
}
@media (max-width: 480px) {
.sc-leist { grid-template-columns: 1fr; }
.sc-groups-grid { grid-template-columns: 1fr; }
}
/* ============================================================
RECHTLICHES (/impressum, /datenschutz, /agb) — Langform-Text
============================================================ */
.legal { padding: 140px 40px 100px; border-bottom: 1px solid var(--border); }
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal-eyebrow { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 20px; }
.legal-title { font-size: clamp(32px, 5vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; margin-bottom: 40px; }
.legal-body { font-size: 15px; line-height: 1.75; color: rgba(245, 245, 243, 0.72); }
.legal-body h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--white); margin: 40px 0 14px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin-bottom: 16px; }
.legal-body ul { margin: 0 0 16px 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--mid); }
@media (max-width: 820px) {
.legal { padding: 104px 18px 72px; }
.legal-title { margin-bottom: 28px; }
}
/* ===== Fehlerseiten (404/403/419) ===== */
.fehler { min-height: 78vh; display: flex; align-items: center; padding: 160px 40px 100px; border-bottom: 1px solid var(--border); }
.fehler-inner { max-width: 760px; margin: 0 auto; width: 100%; }
.fehler-code { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 20px; }
.fehler h1 { font-size: clamp(36px, 6vw, 68px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; margin-bottom: 22px; }
.fehler p { font-size: 16px; line-height: 1.7; color: rgba(245, 245, 243, 0.72); max-width: 520px; }
.fehler-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.fehler-actions a { text-decoration: none; }
.fehler-actions .btn-outline { padding: 17px 32px; }
@media (max-width: 820px) {
.fehler { min-height: 70vh; padding: 120px 18px 72px; }
.fehler-actions { flex-direction: column; align-items: stretch; }
.fehler-actions .btn-submit, .fehler-actions .btn-outline { justify-content: center; text-align: center; }
}
/* ===== Produkte-Seite ===== */
/* Kopfzone: schwarzer Backdrop für die fixe Nav über dem hellen Hero */
.phero-top { background: var(--black); padding-top: 86px; }
/* Nav hier sofort solide — sonst steht ihre weiße Schrift beim Anscrollen
kurz transparent über der hellen Hero-Zone (Fallback ohne :has: kurzer Blitz) */
body:has(.phero) .nav { background: rgba(10,10,10,0.92); }
/* Split-Hero (V2-Plattform-Draft): helle Zone, Text links, Case-Mosaik rechts */
.phero { display: flex; align-items: stretch; height: min(62vh, 600px); background: #f0eeec; color: #111; overflow: hidden; border-bottom: 1px solid rgba(17,17,17,0.08); }
.phero-text { flex: 0 0 44%; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 40px 48px 40px 40px; }
.phero-eyebrow { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(17,17,17,0.4); margin-bottom: 22px; }
.phero-title { font-size: clamp(28px, 3.2vw, 50px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 18px; }
.phero-title-soft { color: rgba(17,17,17,0.28); }
.phero-sub { font-size: 15px; line-height: 1.7; color: rgba(17,17,17,0.55); max-width: 360px; margin-bottom: 26px; }
.phero-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.phero-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; background: #111; color: var(--white); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border-radius: 5px; transition: background 0.2s; }
.phero-cta:hover { background: #2b2b2b; }
.phero-cta-soft { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px; background: rgba(17,17,17,0.05); border: 1px solid rgba(17,17,17,0.1); border-radius: 5px; font-size: 13px; color: rgba(17,17,17,0.7); text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.phero-cta-soft strong { font-weight: 600; color: #111; }
.phero-cta-soft:hover { background: rgba(17,17,17,0.09); border-color: rgba(17,17,17,0.2); }
.phero-cta-kurz { display: none; }
/* Mosaik: 3 Spalten, Set dupliziert → nahtloser translateY(-50%)-Loop je Spalte */
.phero-mosaic { flex: 1; min-width: 0; position: relative; display: flex; gap: 10px; padding: 0 28px 0 0; }
.phero-mosaic::before, .phero-mosaic::after { content: ""; position: absolute; left: 0; right: 28px; height: 80px; z-index: 5; pointer-events: none; }
.phero-mosaic::before { top: 0; background: linear-gradient(to bottom, #f0eeec, transparent); }
.phero-mosaic::after { bottom: 0; background: linear-gradient(to top, #f0eeec, transparent); }
.phero-col { flex: 1; min-width: 0; overflow: hidden; }
.phero-track { display: flex; flex-direction: column; }
.phero-track-a { animation: phero-scroll 42s linear infinite; }
.phero-track-b { animation: phero-scroll 30s linear infinite; animation-delay: -10s; }
.phero-track-c { animation: phero-scroll 52s linear infinite; animation-delay: -22s; }
@keyframes phero-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .phero-track { animation: none; } }
.phero-card { position: relative; display: block; margin-bottom: 10px; border-radius: 6px; overflow: hidden; background: #dfddd9; }
.phero-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero-card-label { position: absolute; left: 10px; bottom: 9px; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.phero-pin { position: absolute; top: 40%; left: 46%; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #111; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 300; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
/* Everplain-Strip: offizieller Merch-Partner — zentriertes Lockup, setzt die helle
Veredelungs-Zone fort (gleicher Fond wie .vered-strip) */
.ep-strip { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 46px 18px 50px; background: #dfddd9; border-bottom: 1px solid var(--border); }
.ep-strip-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(17,17,17,0.38); text-align: center; }
.ep-strip-logo { height: 44px; width: auto; }
.ep-strip-claim { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(17,17,17,0.55); text-align: center; }
/* Anker-Sprünge aus dem Hero: Ziele nicht unter der fixen Nav verstecken */
.prod-filter { scroll-margin-top: 90px; }
.prod-card { scroll-margin-top: 110px; }
/* Ziel-Markierung nach dem Mosaik-Sprung: Produktbild schwillt einmal weich an */
.prod-card.angeflogen .prod-card-stage img { animation: prod-flash 1.4s ease-in-out; }
@keyframes prod-flash {
0%, 100% { transform: scale(1); }
40% { transform: scale(1.14); }
}
.prod-success { margin: 24px 40px 0; padding: 18px 22px; border: 1px solid rgba(120,220,150,0.35); border-radius: 4px; background: rgba(120,220,150,0.08); font-size: 14px; color: rgba(245,245,243,0.85); }
.prod-success strong { font-weight: 600; }
.prod-wrap { padding: 40px 40px 80px; }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prod-card { position: relative; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0; color: var(--white); font-family: inherit; transition: border-color 0.25s, background 0.25s, transform 0.35s ease; }
.prod-card:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); transform: translateY(-3px); }
.prod-card.hidden-cat { display: none; }
.prod-card-stage { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3.4; padding: 28px; }
.prod-card-stage img { max-width: 78%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)); transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94); }
.prod-card:hover .prod-card-stage img { transform: scale(1.045); }
.prod-card-info { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.prod-card-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.prod-card-meta { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); }
.prod-note { margin-top: 28px; font-size: 14px; line-height: 1.7; color: rgba(245,245,243,0.45); max-width: 640px; }
.prod-note strong { color: rgba(245,245,243,0.7); font-weight: 500; }
/* --- Detail-Overlay --- */
.prod-detail { position: fixed; inset: 0; z-index: 300; display: none; }
.prod-detail.open { display: block; }
.prod-detail-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.prod-detail-panel { position: absolute; inset: 4vh 4vw; overflow: hidden auto; }
.prod-close { position: absolute; top: 16px; right: 16px; z-index: 5; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--white); cursor: pointer; transition: background 0.2s; }
.prod-close:hover { background: rgba(255,255,255,0.14); }
.prod-detail-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100%; }
.prod-detail-gallery { padding: 36px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.prod-detail-main { flex: 1; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border-radius: 10px; min-height: 320px; padding: 28px; }
.prod-detail-main img { max-width: 100%; max-height: 52vh; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)); }
.prod-detail-thumbs { display: flex; gap: 8px; }
.prod-detail-thumbs button { width: 68px; height: 68px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); padding: 8px; cursor: pointer; transition: border-color 0.2s; }
.prod-detail-thumbs button.active, .prod-detail-thumbs button:hover { border-color: rgba(255,255,255,0.45); }
.prod-detail-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.prod-detail-body { padding: 44px 40px; }
.prod-detail-eyebrow { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); margin-bottom: 12px; }
.prod-detail-name { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 18px; }
.prod-detail-specs { list-style: none; margin: 0 0 26px; padding: 0; }
.prod-detail-specs li { font-size: 14px; color: rgba(245,245,243,0.55); line-height: 1.5; padding-left: 16px; position: relative; margin-bottom: 5px; }
.prod-detail-specs li::before { content: "—"; position: absolute; left: 0; color: rgba(245,245,243,0.25); }
.prod-detail-label { display: block; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.6); margin: 22px 0 10px; }
.prod-detail-label span { color: rgba(245,245,243,0.35); }
.prod-optional { text-transform: none; letter-spacing: 0.04em; }
.prod-detail-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.prod-detail-swatches button { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); cursor: pointer; padding: 0; transition: border-color 0.2s, transform 0.2s; }
.prod-detail-swatches button:hover { transform: scale(1.08); }
.prod-detail-swatches button.active { border-color: var(--white); }
/* Ausverkauft (Katalog-Editor): Swatch diagonal durchgestrichen, Kachel mit Badge */
.prod-detail-swatches button.ausverkauft { opacity: 0.55; }
.prod-detail-swatches button.ausverkauft::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, transparent 44%, rgba(10,10,10,0.7) 46%, #f5f5f3 49%, #f5f5f3 51%, rgba(10,10,10,0.7) 54%, transparent 56%); }
.prod-card-stage { position: relative; }
.prod-card-soldout { position: absolute; top: 10px; left: 10px; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); background: rgba(10,10,10,0.82); padding: 5px 10px; border-radius: 100px; }
.prod-finish { display: flex; flex-direction: column; gap: 6px; }
.prod-finish-opt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(245,245,243,0.7); cursor: pointer; }
.prod-finish-opt input { accent-color: #f5f5f3; }
.prod-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.prod-size { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.prod-size label { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.1em; color: var(--mid); text-transform: uppercase; }
.prod-size input { width: 58px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; color: var(--white); font-family: "Inter", sans-serif; font-size: 16px; padding: 9px 0; text-align: center; outline: none; -webkit-appearance: none; -moz-appearance: textfield; }
.prod-size input::-webkit-outer-spin-button, .prod-size input::-webkit-inner-spin-button { -webkit-appearance: none; }
.prod-size input:focus { border-color: rgba(255,255,255,0.4); }
.prod-pos-note { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; color: var(--white); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 300; padding: 11px 14px; outline: none; }
.prod-pos-note:focus { border-color: rgba(255,255,255,0.4); }
.prod-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.prod-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--white); color: var(--black); border: none; padding: 15px 28px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-family: "Inter", sans-serif; cursor: pointer; border-radius: 3px; transition: opacity 0.2s; }
.prod-btn-primary:hover { opacity: 0.85; }
.prod-btn-primary:disabled { opacity: 0.35; cursor: default; }
/* --- Bestell-Drawer --- */
.prod-cart { position: fixed; inset: 0; z-index: 310; display: none; }
.prod-cart.open { display: block; }
.prod-cart-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
/* (Side-Drawer-Regeln entfernt — der Warenkorb ist jetzt das zentrierte .bestell-panel) */
.prod-cart-items { padding: 20px 0 4px; }
.prod-cart-empty { font-size: 13px; color: var(--mid); padding: 12px 0 4px; }
.cart-item { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; background: rgba(255,255,255,0.02); }
/* cover statt contain: die Produktfotos sind Hochformat mit viel Freiraum — contain ließe
das Produkt im 54px-Thumb zum Fleck schrumpfen; cover zoomt auf den Bildkern */
.cart-item-img { width: 54px; height: 54px; overflow: hidden; background: rgba(255,255,255,0.04); border-radius: 6px; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-swatch { width: 54px; height: 54px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); }
.cart-item-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cart-item-meta { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.06em; color: var(--mid); margin-top: 4px; line-height: 1.6; text-transform: uppercase; }
.cart-item-note { font-size: 11px; color: rgba(245,245,243,0.45); margin-top: 4px; font-style: italic; }
.cart-item-remove { background: none; border: none; color: var(--mid); cursor: pointer; font-size: 16px; padding: 6px; transition: color 0.2s; }
.cart-item-remove:hover { color: #ff6b6b; }
.prod-cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.prod-cart-total { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); }
.prod-cart-legal { font-size: 11px; line-height: 1.6; color: rgba(245,245,243,0.35); margin-top: 18px; }
/* --- Floating Button --- */
.prod-fab { position: fixed; right: 26px; bottom: 26px; z-index: 200; display: inline-flex; align-items: center; gap: 10px; background: var(--white); color: var(--black); border: none; border-radius: 100px; padding: 14px 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-family: "Inter", sans-serif; cursor: pointer; box-shadow: 0 12px 34px rgba(0,0,0,0.5); transition: transform 0.25s ease, opacity 0.2s; }
.prod-fab:hover { transform: translateY(-2px); }
.prod-fab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--black); color: var(--white); font-size: 10px; padding: 0 5px; }
@media (max-width: 820px) {
.phero-top { padding-top: 64px; }
.phero { flex-direction: column; height: auto; }
.phero-text { flex: none; padding: 26px 18px 22px; }
.phero-eyebrow { font-size: 9px; margin-bottom: 12px; }
.phero-title { font-size: 26px; margin-bottom: 12px; }
.phero-sub { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
/* Beide Buttons nebeneinander — mit dem kurzen Wording */
.phero-ctas { align-self: stretch; flex-direction: row; gap: 8px; }
.phero-cta, .phero-cta-soft { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 10px; justify-content: center; text-align: center; white-space: nowrap; }
.phero-cta-soft { font-size: 12px; }
.phero-cta-lang { display: none; }
.phero-cta-kurz { display: inline; }
/* flex:none — sonst gewinnt die flex-Basis der Desktop-Regel über die Höhe.
Nur 2 Spalten: 3 wären auf Phone-Breite zu kleinteilig */
.phero-mosaic { flex: none; height: 30vh; padding: 0 18px; gap: 8px; }
.phero-mosaic::before, .phero-mosaic::after { left: 18px; right: 18px; height: 40px; }
.phero-col:nth-child(3) { display: none; }
.phero-card { margin-bottom: 8px; }
.ep-strip { gap: 13px; padding: 36px 18px 38px; }
.ep-strip-logo { height: 34px; }
.prod-success { margin: 16px 18px 0; }
.prod-wrap { padding: 24px 18px 56px; }
.prod-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.prod-card-stage { padding: 16px; }
.prod-card-info { padding: 0 14px 16px; }
.prod-card-name { font-size: 14px; }
.prod-detail-panel { inset: 2.5vh 3.5vw; }
.prod-detail-grid { grid-template-columns: 1fr; }
.prod-detail-gallery { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 18px; }
.prod-detail-main { min-height: 220px; }
.prod-detail-main img { max-height: 34vh; }
.prod-detail-body { padding: 26px 18px 40px; }
.prod-size input { width: 50px; }
.prod-cart-items { padding: 14px 0 4px; }
.bestell-form .form-grid { grid-template-columns: 1fr; }
.bestell-form .form-group.span2 { grid-column: span 1; }
.prod-fab { right: 16px; bottom: 16px; }
}
@media (max-width: 480px) {
.prod-grid { grid-template-columns: 1fr; }
}
/* ===== Produkte: Feinschliff (Review-Runde 2) ===== */
/* Nav-Warenkorb — sichtbar auf allen Seiten, sobald Positionen existieren */
.nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; color: var(--white); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.nav-cart:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }
.nav-cart-count { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; border-radius: 50%; background: var(--white); color: var(--black); font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* Helle Produktbühne — schwarze Blanks waren auf dunklem Grund unsichtbar */
.prod-card-stage { background: linear-gradient(180deg, #ecebe8 0%, #dedcd8 100%); }
.prod-card-stage img { filter: drop-shadow(0 16px 26px rgba(0,0,0,0.28)); }
.prod-detail-main { background: linear-gradient(180deg, #ecebe8 0%, #dedcd8 100%); }
.prod-detail-main img { filter: drop-shadow(0 16px 26px rgba(0,0,0,0.28)); }
.prod-detail-thumbs button { background: #e8e7e4; }
.cart-item-img { background: #e8e7e4; }
/* Filter-Chips: nicht ausgewählt = dunkel gefüllt mit weißer Schrift (Flip zum Aktiv-Zustand) */
.prod-filter .proj-tab { background: rgba(255,255,255,0.07); border-color: transparent; color: var(--white); }
.prod-filter .proj-tab:hover { background: rgba(255,255,255,0.14); color: var(--white); }
.prod-filter .proj-tab.active { background: var(--white); border-color: var(--white); color: var(--black); }
@media (max-width: 820px) {
.nav-cart { width: 34px; height: 34px; }
}
/* hidden-Attribut darf nicht vom display-Wert überschrieben werden */
.nav-cart[hidden], .prod-fab[hidden] { display: none; }
/* ===== Produkte: Preismodell + Yeezy-Showroom (Review-Runde 3) ===== */
/* MOQ-Hinweis & Richtpreise im Positionsdialog */
.prod-moq-hint { font-size: 11px; line-height: 1.5; color: rgba(245,245,243,0.4); margin-top: 10px; transition: color 0.25s ease; }
.prod-moq-hint.is-under { color: #f0a94b; }
.prod-sample-link { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 2px; transition: border-color 0.2s; }
.prod-sample-link:hover { border-color: var(--white); }
/* Yeezy-Showroom: helle Fläche, Produkte liegen direkt auf der Seite — keine Kacheln */
.prod-wrap { background: linear-gradient(180deg, #edece9 0%, #dfddd9 100%); padding: 64px 40px 72px; }
.prod-card { background: none; border: none; border-radius: 0; overflow: visible; }
.prod-card:hover { background: none; border-color: transparent; transform: none; }
.prod-card-stage { background: none; padding: 12px 24px 4px; }
.prod-card-stage img { max-width: 82%; filter: drop-shadow(0 22px 30px rgba(0,0,0,0.22)); }
.prod-card:hover .prod-card-stage img { transform: scale(1.05); }
.prod-card-info { padding: 10px 24px 30px; align-items: center; text-align: center; gap: 7px; }
.prod-card-name { color: #141414; font-size: 15px; }
.prod-card-meta { color: rgba(17,17,17,0.45); display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.prod-card-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); flex: none; }
.prod-note { color: rgba(17,17,17,0.55); margin: 20px auto 0; text-align: center; }
.prod-note strong { color: rgba(17,17,17,0.85); }
@media (max-width: 820px) {
.prod-wrap { padding: 40px 18px 56px; }
.prod-card-stage { padding: 8px 12px 0; }
.prod-card-info { padding: 8px 12px 22px; }
}
/* ===== Produkte: Popup-Politur (Review-Runde 4) ===== */
/* Produktwechsel-Pfeile im Popup */
.prod-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.prod-nav-prev { left: 14px; background: rgba(0,0,0,0.07); border: 1px solid rgba(0,0,0,0.15); color: #141414; }
.prod-nav-prev:hover { background: rgba(0,0,0,0.14); }
.prod-nav-next { right: 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: var(--white); }
.prod-nav-next:hover { background: rgba(255,255,255,0.15); }
/* Model-Fotos randlos (cover) statt Fremdkörper auf der hellen Bühne */
.prod-detail-main { overflow: hidden; }
.prod-detail-main.is-photo { padding: 0; background: #0d0d0d; }
.prod-detail-main.is-photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 20%; filter: none; }
.prod-detail-thumbs button.is-photo { padding: 0; overflow: hidden; background: #0d0d0d; }
.prod-detail-thumbs button.is-photo img { object-fit: cover; }
/* Staffelpreis-Toggle (standardmäßig zu) */
/* Kompaktes Popup: alles ohne Scrollen sichtbar (Desktop) */
.prod-detail-panel { overflow: hidden; }
.prod-detail-grid { height: 100%; }
.prod-detail-gallery { padding: 22px 22px 22px 70px; height: 100%; box-sizing: border-box; }
.prod-detail-main { min-height: 0; }
.prod-detail-main img { max-height: 100%; }
.prod-detail-thumbs button { width: 58px; height: 58px; }
.prod-detail-body { padding: 26px 70px 26px 34px; overflow-y: auto; }
.prod-detail-name { font-size: clamp(24px, 2.3vw, 32px); margin-bottom: 12px; }
.prod-detail-specs { margin-bottom: 10px; }
.prod-detail-specs li { margin-bottom: 3px; font-size: 12.5px; }
.prod-detail-label { margin: 14px 0 8px; }
.prod-size input { padding: 8px 0; width: 54px; }
.prod-detail-actions { margin-top: 18px; }
.prod-moq-hint { margin-top: 8px; }
@media (max-width: 820px) {
/* Mobile: das GRID scrollt (nicht das Panel) → die absolut positionierten Pfeile bleiben
an der Kartenunterkante stehen. position:fixed geht nicht mehr — der backdrop-filter
des Glas-Panels macht es zum Containing Block, fixe Kinder scrollen dann mit. */
.prod-detail-panel { overflow: hidden; }
.prod-detail-grid { height: 100%; overflow-y: auto; }
.prod-nav { position: absolute; top: auto; transform: none; }
.prod-detail-gallery { padding: 20px 18px 14px; height: auto; }
.prod-detail-body { padding: 22px 18px 90px; overflow: visible; }
}
/* Galerie-Fix: Bild absolut im Rahmen verankern, damit Thumbs sichtbar bleiben
(max-height:100% löst sich in Flex-Spalten nicht auf → Overflow) */
.prod-detail-main { position: relative; }
.prod-detail-main img { position: absolute; inset: 26px; width: calc(100% - 52px); height: calc(100% - 52px); object-fit: contain; max-height: none; }
.prod-detail-main.is-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
@media (max-width: 820px) {
/* Mobile: eine Spalte, feste Bildhöhe statt flex */
.prod-detail-main { min-height: 340px; }
}
/* Mobile: Schließen-Button liegt über der hellen Galerie → dunkler Chip für Kontrast */
@media (max-width: 820px) {
.prod-detail .prod-close { background: rgba(20,20,20,0.6); border-color: rgba(255,255,255,0.18); }
}
/* ===== Produkte: Feinschliff (Review-Runde 5) ===== */
/* Produktwechsel-Pfeile unten links/rechts statt vertikal zentriert */
.prod-nav { top: auto; transform: none; bottom: 18px; }
.prod-nav-prev { left: 18px; background: rgba(20,20,20,0.75); border-color: rgba(255,255,255,0.2); color: var(--white); }
.prod-nav-prev:hover { background: rgba(20,20,20,0.95); }
.prod-nav-next { right: 18px; }
@media (max-width: 820px) {
.prod-nav { bottom: 16px; }
.prod-nav-prev { left: 16px; }
.prod-nav-next { left: auto; right: 16px; }
}
/* Anmerkung nur bei Veredelung aktiv */
.prod-pos-note:disabled { opacity: 0.35; cursor: not-allowed; }
/* Druckdaten-Upload je Position (Popup) */
.prod-pos-files { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; color: rgba(245,245,243,0.6); font-family: "Inter", sans-serif; font-size: 12px; padding: 9px 12px; }
.prod-pos-files:disabled { opacity: 0.35; cursor: not-allowed; }
.prod-files-error { margin-top: 8px; font-size: 12px; }
/* ===== Bestell-Popup global + Sample-Option (Review-Runde 6) ===== */
/* Zentriertes Modal im Stil des Produkt-Popups (ersetzt den Side-Drawer) */
/* Höhe wächst mit dem Inhalt (kein Leerraum bei wenigen Positionen), Deckel bei 88vh — dann scrollen die Spalten intern */
.bestell-panel { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); width: min(1040px, 92vw); height: auto; max-height: 88vh; overflow: hidden; }
.bestell-grid { display: grid; grid-template-columns: 1fr 1fr; }
.bestell-items-col, .bestell-form { max-height: 88vh; }
.bestell-items-col { padding: 28px; border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.bestell-items-col .prod-cart-items { padding: 18px 0 10px; flex: 1; }
.bestell-items-col .prod-cart-total { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.bestell-head { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,243,0.7); }
.bestell-form { border: none; border-radius: 0; background: none; margin: 0; padding: 28px 64px 28px 28px; overflow-y: auto; }
.bestell-form .form-grid { margin-top: 18px; }
.prod-cart-empty a { color: rgba(245,245,243,0.8); }
/* Sample-Checkbox im Produkt-Popup */
.prod-sample-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13px; color: rgba(245,245,243,0.75); cursor: pointer; flex-wrap: wrap; }
.prod-sample-check input { accent-color: #f5f5f3; }
.prod-sample-shoplink { font-size: 12px; }
@media (max-width: 820px) {
/* Zentrierte Glas-Karte statt Vollbild; das GRID scrollt (nicht das Panel),
damit der Schließen-Button verankert bleibt; Positionsliste scrollt zusätzlich intern */
.bestell-panel { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92vw; height: auto; max-height: 88vh; overflow: hidden; }
.bestell-grid { grid-template-columns: 1fr; height: auto; max-height: 88vh; overflow-y: auto; }
.bestell-items-col, .bestell-form { max-height: none; }
/* padding-top räumt den Schließen-Button (X, 38px bei top 12) frei — sonst überlappt er die erste Position */
.bestell-items-col { border-right: none; border-bottom: 1px solid var(--border); padding: 58px 18px 12px; overflow: visible; }
.bestell-panel .prod-close { top: 12px; right: 12px; width: 38px; height: 38px; }
.bestell-items-col .prod-cart-items { flex: none; max-height: 160px; overflow-y: auto; }
.bestell-form { padding: 16px 18px 22px; overflow: visible; }
.bestell-form .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bestell-form .form-group { gap: 5px; }
.bestell-form .form-group.span2 { grid-column: span 2; }
.bestell-form input, .bestell-form textarea { padding: 9px 10px; font-size: 16px; }
.bestell-form textarea { min-height: 56px; }
.bestell-form .prod-cart-foot { margin-top: 14px; }
.bestell-form .prod-btn-primary { width: 100%; justify-content: center; }
.prod-cart-legal { font-size: 10px; }
}
/* ===== Anfrage-Popup (CTA-Band) — nutzt das prod-cart-Overlay + form-panel-Felder;
Optik kommt aus dem zentralen Popup-Glas-Block weiter unten ===== */
.am-panel { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); width: min(760px, 92vw); max-height: 88vh; overflow: hidden; }
.am-body { padding: 36px 40px 40px; max-height: 88vh; overflow-y: auto; }
.am-eyebrow { display: block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,243,0.45); margin-bottom: 14px; }
.am-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.am-sub { font-size: 13px; font-weight: 300; color: var(--mid); margin: 0 0 24px; max-width: 480px; }
.am-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.am-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; color: var(--white); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 18px; cursor: pointer; transition: border-color 0.25s, background 0.25s; }
.am-chip:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.am-chip.active { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.14); }
.am-chip-num { color: rgba(245,245,243,0.4); }
.am-chip.active .am-chip-num { color: rgba(245,245,243,0.8); }
.am-panel .form-panel { background: none; border: none; border-radius: 0; padding: 0; margin-top: 30px; }
.am-panel .form-submit { margin-top: 26px; }
.am-panel .btn-submit { padding: 16px 36px; }
.am-panel .btn-submit:disabled { opacity: 0.5; cursor: wait; }
.am-error { margin-top: 16px; }
.am-panel .success-panel { padding: 56px 24px 24px; }
@media (max-width: 820px) {
/* Bewusst KEIN Vollbild: zentrierte Glas-Karte, kompakt genug, dass auch das längste
Formular (Artist, 8 Felder) OHNE Scrollen passt — „alles auf einen Blick" */
.am-panel { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92vw; max-height: 90vh; }
.am-body { padding: 20px 18px 24px; max-height: 90vh; }
.am-panel .prod-close { top: 10px; right: 10px; width: 36px; height: 36px; }
.am-eyebrow { margin-bottom: 8px; }
.am-title { font-size: 19px; }
.am-sub { font-size: 11px; margin-bottom: 14px; }
.am-chips { gap: 6px; }
.am-chip { padding: 8px 12px; font-size: 9px; gap: 6px; }
/* Formular offen → nur der aktive Chip bleibt stehen (erneut tippen = zurück zur Auswahl) */
.anfrage-modal.has-form .am-chip:not(.active) { display: none; }
.am-panel .form-panel { margin-top: 14px; }
.am-panel .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.am-panel .form-group { gap: 5px; }
.am-panel .form-group.span2 { grid-column: span 2; }
.am-panel .form-panel input, .am-panel .form-panel textarea { padding: 9px 10px; font-size: 16px; }
.am-panel .form-panel textarea { min-height: 62px; }
.am-panel .form-submit { margin-top: 14px; }
.am-panel .submit-note { display: none; }
.am-panel .btn-submit { width: 100%; justify-content: center; padding: 13px 20px; font-size: 12px; }
.am-panel .success-panel { padding: 32px 12px 8px; }
}
/* ===== Einheitliche Popup-Glas-Optik (Anfrage, Warenkorb, Produkt-Detail) =====
Halbtransparentes Panel + Blur, Backdrop nur 40 % gedimmt — die Seite bleibt erkennbar.
Fallback ohne backdrop-filter: fast opak, damit Text lesbar bleibt. */
.am-panel, .bestell-panel, .prod-detail-panel, .adp-panel {
background: rgba(16,16,16,0.96);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 14px;
box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.am-panel, .bestell-panel, .prod-detail-panel, .adp-panel {
background: rgba(20,20,20,0.55);
-webkit-backdrop-filter: blur(28px) saturate(1.35);
backdrop-filter: blur(28px) saturate(1.35);
}
.mehr-panel { background: rgba(12,12,12,0.6); -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3); }
.lightbox { background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}
/* Login-Popup: schmale Variante des Anfrage-Panels */
.km-panel { width: min(440px, 92vw); }
.km-panel .form-panel { margin-top: 4px; }
.km-panel .btn-submit { width: 100%; justify-content: center; }
.km-links { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.km-links a { font-size: 12px; color: rgba(245,245,243,0.55); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.km-links a:hover { color: var(--white); }
/* ===== Konto (Accounts — Testphase, hinter site.studio_enabled) =====
Zum Entfernen: diesen Block löschen + konto-*.blade.php + KontoController. */
.konto-wrap { max-width: 960px; margin: 0 auto; padding: 150px 32px 100px; min-height: 70vh; }
.konto-wrap--narrow { max-width: 480px; }
.konto-card { padding: 38px 34px; margin-top: 0; }
.konto-card form { display: flex; flex-direction: column; gap: 18px; }
.konto-eyebrow { display: block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,243,0.45); margin-bottom: 14px; }
.konto-title { font-size: clamp(26px, 4vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.konto-sub { font-size: 14px; font-weight: 300; color: var(--mid); margin: 0 0 24px; }
.konto-tabs { display: flex; gap: 8px; margin-bottom: 26px; }
.konto-tab { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 4px; color: rgba(245,245,243,0.55); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 0; cursor: pointer; transition: all 0.2s; }
.konto-tab.active { background: var(--white); color: var(--black); border-color: var(--white); }
.konto-submit { background: var(--white); color: var(--black); border: none; border-radius: 4px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 14px 0; cursor: pointer; transition: opacity 0.2s; margin-top: 6px; }
.konto-submit:hover { opacity: 0.85; }
.konto-hint { font-size: 12px; font-weight: 300; color: var(--mid); margin: 0; }
.konto-hint a { color: rgba(245,245,243,0.8); text-decoration: underline; text-underline-offset: 3px; }
.konto-optional { font-size: 8px; color: rgba(245,245,243,0.35); text-transform: none; letter-spacing: 0.06em; }
.konto-status { background: rgba(120,220,150,0.08); border: 1px solid rgba(120,220,150,0.25); border-radius: 4px; color: #9ede9e; font-size: 13px; font-weight: 300; padding: 12px 16px; margin: 0 0 20px; }
.konto-error { margin: 0 0 20px; }
/* Dashboard */
.konto-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 48px; }
.konto-logout { background: transparent; border: 1px solid var(--border); border-radius: 4px; color: rgba(245,245,243,0.6); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 18px; cursor: pointer; transition: all 0.2s; }
.konto-logout:hover { border-color: rgba(255,255,255,0.35); color: var(--white); }
.konto-section { margin-bottom: 44px; }
.konto-section-title { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,243,0.45); margin: 0 0 16px; font-weight: 400; }
.konto-studio-teaser, .konto-empty { border: 1px dashed rgba(255,255,255,0.15); border-radius: 8px; padding: 28px 26px; font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(245,245,243,0.75); }
.konto-muted { color: var(--mid); }
.konto-muted a, .konto-empty a { color: rgba(245,245,243,0.85); text-decoration: underline; text-underline-offset: 3px; }
.konto-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.konto-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-weight: 300; }
.konto-table th { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.45); font-weight: 400; text-align: left; padding: 13px 18px; background: rgba(255,255,255,0.04); }
.konto-table td { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.06); color: rgba(245,245,243,0.85); }
.konto-badge { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; background: rgba(240,169,75,0.12); color: #f0a94b; }
.konto-badge.done { background: rgba(120,220,150,0.1); color: #9ede9e; }
@media (max-width: 820px) {
.konto-wrap { padding: 120px 20px 70px; }
.konto-head { flex-direction: column; align-items: flex-start; }
}
/* hidden darf nicht vom display:flex der Formulare überschrieben werden (Tab-Umschaltung) */
.konto-card form[hidden] { display: none; }
/* Passwortfeld mit Anzeigen-Auge (partials/pw-feld) */
.konto-pw-wrap { position: relative; }
.konto-pw-wrap input { padding-right: 48px; }
.konto-pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(245,245,243,0.35); cursor: pointer; padding: 9px; display: flex; transition: color 0.2s; }
.konto-pw-eye::after { content: ""; position: absolute; inset: -5px; } /* Tap-Fläche auf 44px */
.konto-pw-eye:hover, .konto-pw-eye.show { color: rgba(245,245,243,0.85); }
.konto-pw-eye .eye-slash { display: none; }
.konto-pw-eye.show .eye-slash { display: block; }
/* Profil-Icon in der Nav (Testphase) — nutzt die nav-cart-Grundoptik; eingeloggt = gefüllter Punkt */
.nav-profile { position: relative; }
.nav-profile.is-auth::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #9ede9e; border: 2px solid var(--black); }
/* Konto: Board-Kacheln (Design Studio) */
.konto-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.konto-board { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 110px; border: 1px solid var(--border); border-radius: 8px; padding: 18px; text-decoration: none; color: var(--white); background: rgba(255,255,255,0.02); transition: border-color 0.2s, transform 0.2s; }
.konto-board:hover { border-color: rgba(255,255,255,0.35); transform: translateY(-2px); }
.konto-board--new { border-style: dashed; align-items: center; justify-content: center; color: rgba(245,245,243,0.6); font-size: 13px; gap: 6px; }
.konto-board-plus { font-size: 26px; font-weight: 200; line-height: 1; }
.konto-board-name { font-size: 14.5px; font-weight: 500; }
.konto-board-date { font-size: 9px; letter-spacing: 0.08em; }
/* Konto: Verifizierungs-Banner + Sicherheitsbereich */
.konto-verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: rgba(240,169,75,0.08); border: 1px solid rgba(240,169,75,0.3); border-radius: 8px; padding: 16px 20px; margin-bottom: 36px; font-size: 13.5px; font-weight: 300; color: rgba(245,245,243,0.85); }
.konto-verify-banner p { margin: 0; line-height: 1.6; }
.konto-details { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; }
.konto-details summary { cursor: pointer; padding: 16px 20px; font-size: 13.5px; color: rgba(245,245,243,0.8); list-style: none; }
.konto-details summary::-webkit-details-marker { display: none; }
.konto-details summary::before { content: "+"; display: inline-block; margin-right: 10px; color: var(--mid); }
.konto-details[open] summary::before { content: "−"; }
.konto-details--danger summary { color: #e08a8a; }
.konto-inline-form { border: none; background: none; padding: 4px 20px 20px; margin: 0; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.konto-submit--danger { background: #b3423f; color: var(--white); }
/* ===== Admin-Backend (/admin) — nutzt die konto-*-Basis ===== */
.admin-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 36px; overflow-x: auto; }
.admin-nav a { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.5); text-decoration: none; padding: 10px 16px; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color 0.2s; white-space: nowrap; flex-shrink: 0; }
.admin-nav a:hover { color: var(--white); }
.admin-nav a.active { color: var(--white); border-bottom-color: var(--white); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 44px; }
.admin-stat { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 20px; text-decoration: none; color: var(--white); background: rgba(255,255,255,0.02); transition: border-color 0.2s; }
.admin-stat:hover { border-color: rgba(255,255,255,0.35); }
.admin-stat--attention { border-color: rgba(240,169,75,0.45); }
.admin-stat-num { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.admin-stat-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.5); }
.admin-btn { background: var(--white); color: var(--black); border: none; border-radius: 4px; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; }
.admin-btn--quiet { background: transparent; color: rgba(245,245,243,0.55); border: 1px solid var(--border); }
.admin-btn--quiet:hover { color: #e08a8a; border-color: rgba(224,138,138,0.4); }
.admin-export { margin-left: auto; text-decoration: none; display: inline-flex; align-items: center; }
.admin-chart { display: flex; align-items: flex-end; gap: 8px; padding: 4px 2px 0; }
.admin-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.admin-chart-num { font-size: 11px; color: rgba(245,245,243,0.6); }
.admin-chart-bar { width: 100%; max-width: 46px; background: rgba(245,245,243,0.22); border-radius: 3px 3px 0 0; min-height: 2px; transition: background 0.2s; }
.admin-chart-col:hover .admin-chart-bar { background: rgba(245,245,243,0.5); }
.admin-chart-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,243,0.4); white-space: nowrap; }
.admin-typen { display: flex; flex-direction: column; gap: 12px; }
.admin-typ-row { display: grid; grid-template-columns: 170px 1fr 40px; align-items: center; gap: 14px; }
.admin-typ-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,243,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-typ-track { height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.admin-typ-bar { height: 100%; background: rgba(245,245,243,0.4); border-radius: 4px; }
.admin-typ-num { font-size: 12px; color: rgba(245,245,243,0.6); text-align: right; }
.admin-stat-grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 820px) {
.admin-stat-grid-2 { grid-template-columns: 1fr; }
.admin-chart-col:nth-child(odd) .admin-chart-label { visibility: hidden; }
.admin-typ-row { grid-template-columns: 110px 1fr 36px; }
}
.admin-link { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.admin-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-filter select, .admin-select { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 4px; color: var(--white); font-family: "Inter", sans-serif; font-size: 13px; padding: 10px 14px; outline: none; }
.admin-filter select option, .admin-select option { background: #141414; }
.admin-filter-reset { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.admin-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.admin-side { padding: 24px; display: flex; flex-direction: column; gap: 16px; margin-top: 0; }
.admin-pos { border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-bottom: 12px; font-size: 14px; }
.admin-pos p { margin: 8px 0 0; line-height: 1.7; font-weight: 300; }
.admin-pagination { margin-top: 24px; }
.mmd-pagination { display: flex; align-items: center; gap: 16px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,243,0.5); }
.mmd-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 4px; color: var(--white); text-decoration: none; }
.mmd-page-btn.is-disabled { opacity: 0.3; }
@media (max-width: 820px) {
.admin-detail-grid { grid-template-columns: 1fr; }
}
.admin-side .konto-submit { width: 100%; }
.admin-side .konto-hint { text-align: center; }
/* Team-Verwaltung & Einstellungen: Rechte-/Abo-Checkboxen im Site-Stil */
.admin-check { display: inline-flex; align-items: center; gap: 7px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,243,0.7); cursor: pointer; white-space: nowrap; }
.admin-check input { accent-color: var(--white); width: 14px; height: 14px; cursor: pointer; }
.admin-check--zeile { display: flex; white-space: normal; text-transform: none; font-family: "Inter", sans-serif; font-size: 14px; letter-spacing: 0; color: var(--white); align-items: flex-start; gap: 12px; }
.admin-check--zeile input { margin-top: 3px; }
.admin-rolle-form { display: flex; align-items: center; gap: 10px; }
.admin-select--kompakt { padding: 8px 12px; font-size: 12px; }
.admin-erledigt { margin-top: 40px; }
.admin-erledigt summary { cursor: pointer; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,243,0.45); padding: 12px 0; border-top: 1px solid var(--border); list-style: none; }
.admin-erledigt summary::-webkit-details-marker { display: none; }
.admin-erledigt summary::before { content: "▸"; display: inline-block; margin-right: 10px; transition: transform 0.2s; }
.admin-erledigt[open] summary::before { transform: rotate(90deg); }
.admin-erledigt summary:hover { color: var(--white); }
.admin-erledigt .konto-table-wrap { margin-top: 8px; }
.admin-erledigt-leer { padding: 8px 0 0; }
.admin-einladen { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.admin-einladen .admin-select { width: 100%; }
.admin-einladen-felder { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 18px; }
.admin-einladen-hinweis, .admin-einstellungen-hinweis { font-size: 12px; margin: 0; }
.admin-einladen .admin-btn, .admin-einstellungen-form .admin-btn { align-self: flex-start; }
.admin-einstellungen-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
@media (max-width: 820px) {
.admin-einladen-felder { grid-template-columns: 1fr; }
}
/* Anfrage-Detail-Popup (Glas wie Shop-Popups), Statusfarben & Notiz-Verlauf */
.adp-panel { position: absolute; top: 5vh; left: 50%; transform: translateX(-50%); width: min(1040px, 94vw); max-height: 90vh; overflow: hidden; }
.adp-body { padding: 44px 40px; max-height: 90vh; overflow-y: auto; }
.adp-body .admin-detail-grid { margin-top: 0; }
@media (max-width: 820px) {
.adp-panel { top: 50%; transform: translate(-50%, -50%); width: 94vw; max-height: 92vh; }
.adp-body { padding: 48px 18px 24px; max-height: 92vh; }
}
.admin-status.status-eingegangen { color: #ff8a8a; border-color: rgba(255,138,138,0.45); }
.admin-status.status-in_bearbeitung { color: #f0a94b; border-color: rgba(240,169,75,0.45); }
.admin-status.status-erledigt { color: #9ede9e; border-color: rgba(120,220,150,0.4); }
.admin-status option { color: var(--white); }
.konto-badge.status-eingegangen { background: rgba(255,138,138,0.12); color: #ff8a8a; }
.konto-badge.status-in_bearbeitung { background: rgba(240,169,75,0.12); color: #f0a94b; }
.konto-badge.status-erledigt { background: rgba(120,220,150,0.1); color: #9ede9e; }
.admin-notizen { margin-top: 24px; }
.admin-notiz { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.admin-notiz-meta { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,243,0.45); margin: 0 0 6px; }
.admin-notiz-text { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; white-space: pre-wrap; }
.admin-notiz-leer { font-size: 12px; margin: 0; }
.admin-notiz-form { display: flex; flex-direction: column; gap: 10px; }
.admin-notiz-form .admin-btn { align-self: flex-start; }
/* ===== Produkte: V3-Redaktionsblöcke (USP-Band, Veredelungen, Dream-Grid) ===== */
/* USP-Laufband unter dem Hero — nutzt die marquee-Keyframes der Startseite */
.prod-usp-wrap { border-bottom: 1px solid var(--border); padding: 13px 0; overflow: hidden; background: var(--black); }
.prod-usp-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.prod-usp-track span { display: flex; align-items: center; }
.prod-usp-track em { font-style: normal; padding: 0 20px; white-space: nowrap; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,243,0.55); }
.prod-usp-track i { font-style: normal; color: rgba(245,245,243,0.25); }
/* Veredelungs-Strip: setzt die helle Showroom-Zone fort */
.vered-strip { background: #dfddd9; padding: 56px 0 64px; border-bottom: 1px solid var(--border); }
.vered-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 40px; margin-bottom: 28px; }
.vered-eyebrow { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(17,17,17,0.4); margin-bottom: 10px; }
.vered-title { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; color: #141414; line-height: 1.1; }
.vered-link { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(17,17,17,0.45); text-decoration: none; border-bottom: 1px solid rgba(17,17,17,0.2); padding-bottom: 2px; transition: color 0.2s; white-space: nowrap; }
.vered-link:hover { color: #141414; }
.vered-scroll { position: relative; }
.vered-track { display: flex; align-items: center; justify-content: center; gap: 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 40px 10px; }
/* Scrollbar → linksbündig (sonst wäre der Anfang beim Zentrieren nicht erreichbar) */
.vered-scroll.is-scrollable .vered-track { justify-content: flex-start; }
.vered-track::-webkit-scrollbar { display: none; }
/* Karten starten schlank und klappen per Klick zur großen Version auf (nur eine offen) */
.vered-card { flex: 0 0 172px; display: flex; flex-direction: column; appearance: none; font: inherit; text-align: left; padding: 0; cursor: pointer; background: #f2f1ee; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; overflow: hidden; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: flex-basis 0.5s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.25s, box-shadow 0.25s; }
.vered-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.12); }
.vered-card.is-open { flex-basis: 250px; }
.vered-card-stage { position: relative; height: 72px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ecebe8, #d9d6d0); transition: height 0.5s cubic-bezier(0.22, 0.8, 0.3, 1); }
.vered-card-stage svg { width: 30px; height: 30px; color: rgba(17,17,17,0.25); transition: width 0.5s cubic-bezier(0.22, 0.8, 0.3, 1), height 0.5s cubic-bezier(0.22, 0.8, 0.3, 1); }
.vered-card.is-open .vered-card-stage { height: 150px; }
.vered-card.is-open .vered-card-stage svg { width: 52px; height: 52px; }
.vered-num { position: absolute; top: 12px; right: 14px; font-size: 9px; letter-spacing: 0.14em; color: rgba(17,17,17,0.3); }
.vered-card-body { display: block; padding: 14px 16px 16px; }
.vered-card.is-open .vered-card-body { padding: 16px 18px 20px; }
.vered-card-eyebrow { display: block; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(17,17,17,0.35); margin-bottom: 6px; }
.vered-card-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vered-card-title { display: flex; align-items: center; min-height: 2.4em; line-height: 1.2; font-size: 15px; font-weight: 600; color: #141414; letter-spacing: -0.01em; }
.vered-card-plus { flex: 0 0 auto; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(17,17,17,0.25); border-radius: 50%; font-size: 12px; font-weight: 400; line-height: 1; color: rgba(17,17,17,0.5); transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1); }
.vered-card.is-open .vered-card-plus { transform: rotate(45deg); }
.vered-card-text { display: block; font-size: 12.5px; line-height: 1.55; color: rgba(17,17,17,0.55); max-height: 0; opacity: 0; transform: translateY(6px); overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.3s, transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1); }
.vered-card.is-open .vered-card-text { max-height: 140px; opacity: 1; transform: none; margin-top: 4px; transition: max-height 0.5s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.35s 0.15s, transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
.vered-card, .vered-card-stage, .vered-card-stage svg, .vered-card-plus, .vered-card-text { transition: none; }
}
.vered-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: rgba(245,245,243,0.95); border: 1px solid rgba(0,0,0,0.14); color: rgba(17,17,17,0.65); cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: background 0.2s; }
/* Pfeile nur, wenn wirklich gescrollt werden kann */
.vered-scroll.is-scrollable .vered-arrow { display: flex; }
.vered-arrow:hover { background: #fff; }
.vered-arrow-prev { left: 10px; }
.vered-arrow-next { right: 10px; }
/* Dream-Grid: 4 Editorial-Bilder mit Overlay-Headline */
.dream-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--black); }
.dream-grid img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; filter: brightness(0.72); transition: filter 0.5s; }
.dream-grid img:hover { filter: brightness(0.9); }
.dream-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 24px; pointer-events: none; }
.dream-overlay h2 { font-size: clamp(34px, 6vw, 88px); font-weight: 600; letter-spacing: -0.04em; color: #fff; text-align: center; line-height: 1.05; text-shadow: 0 2px 40px rgba(0,0,0,0.55); }
@media (max-width: 820px) {
.vered-strip { padding: 40px 0 48px; }
.vered-head { padding: 0 18px; flex-direction: column; align-items: flex-start; gap: 12px; }
.vered-track { padding: 4px 18px 8px; }
.vered-card { flex-basis: 156px; }
.vered-card.is-open { flex-basis: 220px; }
/* Mobile: swipen statt Pfeile — auch im Scroll-Zustand ausgeblendet */
.vered-scroll.is-scrollable .vered-arrow { display: none; }
.vered-track { justify-content: flex-start; }
.dream-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===== Services: Touring-Showcase (V3) — Wide-Video + Wide-Image ===== */
.wide-band { position: relative; height: 52vh; min-height: 340px; overflow: hidden; background: var(--black); }
.wide-band video, .wide-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62); }
.wide-band--bottom img { object-position: center 28%; }
.wide-band-overlay { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 40px; }
.wide-band-title { font-size: clamp(26px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.03; text-transform: uppercase; color: var(--white); }
.wide-band-title em { font-style: normal; color: rgba(245,245,243,0.45); }
.wide-band--bottom .wide-band-overlay { justify-content: flex-end; }
.wide-band-title--right { text-align: right; }
@media (max-width: 820px) {
.wide-band { height: 30vh; min-height: 210px; }
.wide-band-overlay { padding: 0 18px; }
}
/* ===== News-Feed (/news) — V3-Galerie-Grid ohne Fake-Likes, Hero wie alle Unterseiten ===== */
.news-hero .svc-hero-bg { object-position: center 30%; }
.news-wrap { background: var(--black); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; }
.news-card-img { aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.news-card:hover .news-card-img img { transform: scale(1.04); }
.news-card-body { padding: 14px 16px 22px; }
.news-card-tag { display: block; font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); margin-bottom: 6px; }
.news-card-title { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--white); }
.news-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 40px; border-top: 1px solid var(--border); }
.news-foot-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }
.news-foot-cta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--white); border: 1px solid rgba(255,255,255,0.2); padding: 12px 24px; transition: background 0.2s; }
.news-foot-cta:hover { background: rgba(255,255,255,0.06); }
@media (max-width: 820px) {
.news-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; }
.news-foot { padding: 28px 18px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
.news-grid { grid-template-columns: 1fr; }
}
/* ── Website-Editor (Backend · Inhalte) ─────────────────────────────── */
.konto-badge--neutral { background: rgba(255,255,255,0.07); color: var(--mid); }
.inh-intro { max-width: 720px; margin: -6px 0 26px; font-size: 13.5px; line-height: 1.65; }
.inh-beschreibung { font-size: 12px; margin-top: 4px; max-width: 420px; line-height: 1.5; }
.inh-status { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 24px; background: rgba(255,255,255,0.02); }
.inh-status-text { font-size: 13px; color: var(--mid); line-height: 1.6; }
.inh-status-text strong { color: var(--white); font-weight: 500; }
.inh-status-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.inh-btn-neutral:hover { color: var(--white); border-color: rgba(255,255,255,0.35); }
.inh-fehler { border: 1px solid rgba(255,138,138,0.45); border-radius: 14px; padding: 16px 20px; margin-bottom: 24px; color: #ff8a8a; }
.inh-fehler p { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.inh-fehler ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; font-weight: 300; }
.inh-liste { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.inh-liste--sub { gap: 10px; margin-top: 4px; }
.inh-zeilen { display: flex; flex-direction: column; gap: 14px; }
.inh-liste--sub .inh-zeilen { gap: 10px; }
.inh-zeile { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: rgba(255,255,255,0.02); }
.inh-liste--sub .inh-zeile { background: rgba(255,255,255,0.03); border-radius: 10px; }
.inh-zeile-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }
.inh-zeile-kopf .inh-controls { margin-left: auto; }
.inh-zeile.zu > .inh-zeile-kopf { margin-bottom: 0; }
.inh-controls { display: flex; gap: 6px; }
.inh-controls button { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--mid); width: 28px; height: 28px; cursor: pointer; font-size: 12px; line-height: 1; transition: color 0.2s, border-color 0.2s; }
.inh-controls button:hover { color: var(--white); border-color: rgba(255,255,255,0.35); }
.inh-controls [data-zeile-weg]:hover { color: #ff8a8a; border-color: rgba(255,138,138,0.45); }
.inh-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; }
/* Zugeklappte Zeilen: nur der Kopf mit Zusammenfassung; Pfeil dreht beim Öffnen */
.inh-zeile.zu > .inh-felder { display: none; }
.inh-zeile-kopf[data-zeile-toggle] { cursor: pointer; user-select: none; }
.inh-zeile-pfeil { flex-shrink: 0; color: var(--mid); transition: transform 0.15s; }
.inh-zeile:not(.zu) > .inh-zeile-kopf .inh-zeile-pfeil { transform: rotate(90deg); }
.inh-zeile-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(245,245,243,0.42); text-transform: none; letter-spacing: 0.02em; font-size: 10.5px; }
.inh-feld { display: flex; flex-direction: column; gap: 6px; }
.inh-feld--textarea, .inh-feld--liste, .inh-feld--breit { grid-column: 1 / -1; }
.inh-feld > label { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); }
.inh-hinweis { font-size: 11.5px; line-height: 1.5; }
.inh-form input:not([type="checkbox"]) { color-scheme: dark; }
.inh-neu { align-self: flex-start; background: transparent; color: rgba(245,245,243,0.7); border: 1px dashed rgba(255,255,255,0.25); transition: color 0.2s, border-color 0.2s; }
.inh-neu:hover { color: var(--white); border-color: rgba(255,255,255,0.5); }
.inh-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.inh-btn-gross { font-size: 10px; padding: 13px 22px; }
.inh-btn-live { background: #9ede9e; }
.inh-versionen { margin-top: 30px; }
/* Vorschau-Banner: schwebt über allem, im Glas-Stil */
.inh-vorschau-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2147483000; display: flex; align-items: center; gap: 16px; padding: 11px 18px; border-radius: 100px; border: 1px solid rgba(240,169,75,0.5); background: rgba(10,10,10,0.88); color: #f0a94b; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; max-width: 94vw; overflow-x: auto; }
@supports (backdrop-filter: blur(12px)) { .inh-vorschau-bar { backdrop-filter: blur(12px); } }
.inh-vorschau-bar a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1px; }
.inh-vorschau-bar form { display: contents; }
.inh-vorschau-bar button { background: none; border: none; color: #f0a94b; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.inh-vorschau-bar button:hover, .inh-vorschau-bar a:hover { color: var(--white); }
@media (max-width: 820px) {
.inh-felder { grid-template-columns: 1fr; }
.inh-status { flex-direction: column; align-items: flex-start; }
.inh-vorschau-bar { bottom: 12px; gap: 12px; padding: 10px 14px; }
}
/* ── Visueller Website-Editor (Vollbild-Split-View) ─────────────────── */
.ed-body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.ed-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); flex-shrink: 0; }
.ed-topbar-links { display: flex; align-items: center; gap: 14px; }
.ed-schliessen { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--mid); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.ed-schliessen:hover { color: var(--white); border-color: rgba(255,255,255,0.35); }
.ed-titel { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.ed-geraete { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.ed-geraete button { display: flex; align-items: center; justify-content: center; width: 34px; height: 26px; background: none; border: none; border-radius: 6px; color: var(--mid); cursor: pointer; }
.ed-geraete button.aktiv { background: rgba(255,255,255,0.1); color: var(--white); }
.ed-topbar-rechts { display: flex; align-items: center; gap: 12px; }
.ed-status { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #9ede9e; }
.ed-status.fehler { color: #ff8a8a; }
.ed-publish { background: #9ede9e; }
.ed-main { display: flex; flex: 1; min-height: 0; }
.ed-sidebar { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-height: 0; }
/* Live-Präsenz: Avatare, Board-Cursor, Fremd-Bearbeitung, Konflikt, Autor-Zeile */
.ed-nutzer { display: flex; gap: 4px; }
.ed-avatar { width: 26px; height: 26px; border-radius: 50%; border: none; color: #0a0a0a; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: transform 0.15s; }
.ed-avatar:hover { transform: scale(1.12); }
.ed-cursor { position: absolute; pointer-events: none; z-index: 50; transition: left 2s linear, top 2s linear; }
.ed-cursor i { display: block; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.ed-cursor span { display: inline-block; margin: 3px 0 0 6px; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: rgba(10,10,10,0.85); border: 1px solid var(--border); border-radius: 100px; padding: 3px 8px; white-space: nowrap; }
.ed-fremd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(10,10,10,0.8); }
.ed-konflikt { margin: 12px 14px 0; padding: 9px 12px; border: 1px solid rgba(240,169,75,0.5); border-radius: 8px; background: rgba(240,169,75,0.08); color: #f0a94b; font-size: 9.5px; letter-spacing: 0.06em; line-height: 1.5; }
.ed-autor { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,169,75,0.85); margin: -2px 0 8px; }
/* Verlauf: Zurück/Vor + History-Panel */
.ed-verlauf { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.ed-verlauf button { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; background: none; border: none; border-radius: 6px; color: var(--mid); cursor: pointer; transition: color 0.15s, background 0.15s; }
.ed-verlauf button:hover:not(:disabled) { color: var(--white); background: rgba(255,255,255,0.08); }
.ed-verlauf button:disabled { opacity: 0.3; cursor: default; }
.ed-history-panel { position: fixed; top: 54px; right: 16px; z-index: 500; width: 300px; max-height: 50vh; overflow-y: auto; background: rgba(10,10,10,0.97); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.ed-history-eintrag { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; color: rgba(245,245,243,0.7); font-size: 9.5px; letter-spacing: 0.08em; padding: 8px 10px; cursor: pointer; transition: color 0.15s, background 0.15s; }
.ed-history-eintrag:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.ed-history-eintrag.aktuell { color: #9ede9e; border-color: rgba(158,222,158,0.3); }
.ed-history-hinweis { font-size: 10.5px; line-height: 1.5; margin-top: 10px; }
/* Sidebar-Resize-Griff + Komplett-Einklappen */
.ed-sidebar { position: relative; transition: width 0.2s ease; }
.ed-sidebar.zu { width: 0 !important; border-right: none; }
.ed-sidebar.zu .ed-panel, .ed-sidebar.zu #ed-formpanel, .ed-sidebar.zu .ed-resize { display: none; }
.ed-sidebar-toggle { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); z-index: 22; display: flex; align-items: center; justify-content: center; width: 26px; height: 52px; background: rgba(10,10,10,0.95); border: 1px solid var(--border); border-radius: 8px; color: var(--mid); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.ed-sidebar-toggle:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.ed-sidebar.zu .ed-sidebar-toggle svg { transform: rotate(180deg); }
.ed-resize { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; cursor: col-resize; z-index: 20; touch-action: none; }
.ed-resize:hover, .ed-resizing .ed-resize { background: linear-gradient(to right, transparent 3px, rgba(240,169,75,0.5) 4px, rgba(240,169,75,0.5) 6px, transparent 7px); }
.ed-resizing, .ed-resizing * { cursor: col-resize !important; user-select: none; }
/* Shopify-Logik: Topbar-Mitte (Seitenwahl + Geräte), Blockliste, Formular-Panel */
.ed-topbar-mitte { display: flex; align-items: center; gap: 10px; }
.ed-seitenwahl { width: auto; min-width: 150px; font-size: 11px; padding: 8px 30px 8px 12px; }
.ed-panel { flex: 1; overflow-y: auto; min-height: 0; padding: 12px 12px 40px; }
.ed-panel .ed-gruppe { margin: 16px 4px 6px; }
.ed-panel > .ed-gruppe:first-child, .ed-panel [data-seitenliste] .ed-gruppe { margin-top: 16px; }
.ed-block { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; color: rgba(245,245,243,0.82); font-size: 12.5px; font-weight: 300; padding: 10px 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ed-block:hover { background: rgba(255,255,255,0.05); color: var(--white); }
.ed-block-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,243,0.4); border: 1px solid var(--border); border-radius: 100px; padding: 3px 8px; flex-shrink: 0; }
/* Kopieren & Einfügen: Kopier-Knopf (auf Zeilen-Hover), Slots nur im Kopier-Modus */
.ed-kopieren-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--mid); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; }
.ed-block:hover .ed-kopieren-btn, .ed-kopieren-btn.aktiv { opacity: 1; }
.ed-kopieren-btn:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }
.ed-kopieren-btn.aktiv { color: #f0a94b; border-color: rgba(240,169,75,0.5); opacity: 1; }
.ed-slot { display: none; width: 100%; text-align: left; background: none; border: 1px dashed rgba(240,169,75,0.45); border-radius: 8px; color: rgba(240,169,75,0.85); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 10px; margin: 4px 0; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.ed-kopieren .ed-slot { display: block; }
.ed-slot:hover { background: rgba(240,169,75,0.12); border-color: #f0a94b; }
.ed-zurueck { display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--mid); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 14px 10px; cursor: pointer; transition: color 0.15s; }
.ed-zurueck:hover { color: var(--white); }
.ed-form-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
#ed-formpanel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
#ed-formpanel[hidden] { display: none; }
#ed-formpanel .ed-formulare { flex: 1; overflow-y: auto; padding: 4px 14px 40px; }
.ed-bereiche { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ed-bereiche button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--border); border-radius: 100px; color: var(--mid); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 12px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.ed-bereiche button:hover { color: var(--white); }
.ed-bereiche button.aktiv { color: var(--black); background: var(--white); border-color: var(--white); }
.ed-punkt { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.18); flex-shrink: 0; }
.ed-bereiche button.aktiv .ed-punkt { background: rgba(10,10,10,0.25); }
.ed-punkt.offen { background: #f0a94b !important; }
.ed-formulare { flex: 1; overflow-y: auto; padding: 16px 14px 40px; }
.ed-beschreibung { font-size: 12px; line-height: 1.6; margin-bottom: 14px; }
.ed-form-fuss { position: sticky; bottom: -40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px -14px -40px; padding: 12px 14px; background: var(--black); border-top: 1px solid var(--border); }
.ed-formularlink { font-size: 11px; text-decoration: none; }
.ed-formularlink:hover { color: var(--white); }
.ed-vorschau { flex: 1; min-width: 0; background: #050505; padding: 14px; display: flex; position: relative; }
/* Struktur-Board (Framer-Stil): pan-/zoombare Fläche mit Seiten-Karten + Linien */
.ed-board { position: absolute; inset: 0; overflow: hidden; cursor: grab; background: #050505; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 26px 26px; }
.ed-board.zieht { cursor: grabbing; }
.ed-board-welt { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.ed-board-linien { position: absolute; overflow: visible; pointer-events: none; }
.ed-board-linien path { fill: none; stroke: rgba(245,245,243,0.28); stroke-width: 1.4; }
.ed-karte { position: absolute; width: 220px; }
.ed-karte-kopf { display: flex; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,243,0.75); padding: 0 2px 7px; white-space: nowrap; }
.ed-karte-kopf i { font-style: normal; text-transform: none; letter-spacing: 0.02em; color: rgba(245,245,243,0.3); }
.ed-karte-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-items: baseline; background: none; border: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; cursor: pointer; }
.ed-karte-titel:hover { color: var(--white); }
.ed-karte-tools { display: flex; gap: 3px; flex-shrink: 0; }
.ed-karte-tools button { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--mid); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.ed-karte-tools button:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }
.ed-karte-tools button.aktiv { color: #f0a94b; border-color: rgba(240,169,75,0.5); }
.ed-karte-schirm { width: 220px; height: 330px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; background: var(--black); cursor: pointer; transition: border-color 0.15s, transform 0.15s, height 0.25s ease; }
.ed-karte:hover .ed-karte-schirm { border-color: rgba(255,255,255,0.45); transform: translateY(-2px); }
/* 1200px-Desktop-Rendering auf Kartenbreite verkleinert; Interaktion fängt die Karte ab */
.ed-karte-schirm iframe { width: 1200px; height: 1800px; border: 0; transform: scale(0.18333); transform-origin: 0 0; pointer-events: none; background: var(--black); }
/* Ausgeklappt: ganze Seite sichtbar UND direkt bedien-/bearbeitbar (Inspector läuft im iframe) */
.ed-karte.gross { z-index: 10; }
.ed-karte.gross .ed-karte-schirm { height: 880px; cursor: default; }
.ed-karte.gross .ed-karte-schirm iframe { height: 4800px; pointer-events: auto; }
/* Mobil-Ansicht der Karte (einzeln oder über den Geräte-Schalter für alle) */
.ed-karte.mobil .ed-karte-schirm iframe, .ed-board.alle-mobil .ed-karte-schirm iframe { width: 390px; transform: scale(0.5641); }
.ed-karte.mobil.gross .ed-karte-schirm iframe, .ed-board.alle-mobil .ed-karte.gross .ed-karte-schirm iframe { height: 1560px; }
.ed-board-zoom { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 6px; }
.ed-board-zoom button { background: rgba(10,10,10,0.9); border: 1px solid var(--border); border-radius: 8px; color: var(--mid); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.ed-board-zoom button:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.ed-frame-halter { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ed-frame-halter iframe { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--black); }
.ed-frame-halter.ed-mobil iframe { width: 390px; flex-shrink: 0; }
/* Inspector im Editor-iframe: Sektionen anwählbar */
.mmd-editor-frame .inh-vorschau-bar { display: none; }
.mmd-editor-frame [data-mmd-bereich] { cursor: pointer; }
.mmd-editor-frame .mmd-inspekt { outline: 2px dashed rgba(240,169,75,0.75); outline-offset: 6px; border-radius: 4px; }
/* Absichts-Anzeige am Cursor: Bearbeiten (orange, Stift) vs. Öffnet Link (neutral, Pfeil) */
.mmd-absicht { position: fixed; z-index: 2147483001; pointer-events: none; white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px 5px 22px; border-radius: 100px; background-repeat: no-repeat; background-position: 8px center; background-size: 10px 10px; }
.mmd-absicht--bearbeiten { color: #0a0a0a; background-color: #f0a94b; background-image: url('data:image/svg+xml;utf8,'); }
.mmd-absicht--link { color: #f5f5f3; background-color: rgba(10,10,10,0.92); border: 1px solid rgba(255,255,255,0.3); background-image: url('data:image/svg+xml;utf8,'); }
@media (max-width: 1100px) { .ed-sidebar { width: 340px; } }
.inh-editor-cta { margin: -8px 0 24px; }
.inh-zeilen-aktionen { white-space: nowrap; }
.inh-zeilen-aktionen .admin-btn { margin-left: 6px; }
/* Editor: Bild-Felder + Objekt-Bereiche */
.inh-felder--objekt { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: rgba(255,255,255,0.02); }
.inh-bild { display: flex; flex-direction: column; gap: 10px; }
.inh-bild-vorschau { max-height: 110px; max-width: 100%; width: auto; align-self: flex-start; border-radius: 8px; border: 1px solid var(--border); }
.inh-bild-aktion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inh-bild-status { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #f0a94b; }
.inh-farbe { display: flex; align-items: center; gap: 10px; }
.inh-farbe input[type="color"] { width: 40px; height: 34px; padding: 2px; background: none; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; flex-shrink: 0; }
.inh-farbe input[type="text"] { flex: 1; min-width: 0; font-family: "IBM Plex Mono", monospace; }
.ed-fokus { outline: 2px solid rgba(240,169,75,0.8); outline-offset: 6px; border-radius: 6px; transition: outline-color 0.4s; }
.mmd-editor-frame [data-mmd-feld] { cursor: pointer; }
.mmd-editor-frame [data-mmd-feld]:hover { outline: 1px dashed rgba(240,169,75,0.9); outline-offset: 3px; border-radius: 3px; }
/* Editor: Bereichs-Gruppen + Schalter-Felder */
.ed-gruppe { display: block; width: 100%; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.35); margin: 8px 2px 2px; }
.ed-gruppe:first-child { margin-top: 0; }
.inh-gruppenzeile td { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.4); padding-top: 22px; }
.inh-schalter { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 300; cursor: pointer; }
.inh-schalter input { width: 16px; height: 16px; accent-color: var(--white); }
/* Burger-Panel: Gruppen — Hauptpunkt-Link + Chevron-Toggle, Unterpunkte klappen auf */
.mehr-zeile { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,0.04); }
.mehr-zeile .mehr-item { flex: 1; border-bottom: none; }
.mehr-toggle { background: none; border: none; border-left: 1px solid rgba(255,255,255,0.04); width: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(245,245,243,0.45); transition: color 0.2s; }
.mehr-toggle:hover { color: var(--white); }
.mehr-toggle svg { transition: transform 0.3s ease; }
.mehr-gruppe.open .mehr-toggle svg { transform: rotate(180deg); }
.mehr-subs { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: rgba(255,255,255,0.015); }
.mehr-sub { display: flex; flex-direction: column; gap: 3px; text-decoration: none; padding: 12px 32px 12px 48px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s; }
.mehr-sub:hover { background: rgba(255,255,255,0.03); }
.mehr-sub-label { font-size: 14px; font-weight: 300; color: rgba(245,245,243,0.65); transition: color 0.2s; }
.mehr-sub:hover .mehr-sub-label { color: var(--white); }
.mehr-sub-tag { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.22); }
/* ── Shops-Seite (/shops) — Fan-Hub nach V3-Draft ───────────────────── */
.shp-wrap { padding: 96px clamp(18px, 2.8vw, 40px) 0; display: flex; flex-direction: column; gap: 40px; }
.shp-eyebrow { display: block; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,243,0.55); }
/* Hero-Slider */
.shp-slider { position: relative; height: min(62vh, 560px); min-height: 380px; overflow: hidden; border: 1px solid var(--border); border-radius: 4px; }
.shp-flag { position: absolute; top: 18px; left: 18px; z-index: 5; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); background: rgba(10,10,10,0.65); border: 1px solid rgba(255,255,255,0.16); padding: 6px 12px; border-radius: 100px; }
@supports (backdrop-filter: blur(10px)) { .shp-flag { backdrop-filter: blur(10px); } }
.shp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.shp-slide.aktiv { opacity: 1; pointer-events: auto; }
.shp-slide img { width: 100%; height: 100%; object-fit: cover; }
.shp-slide-schatten { position: absolute; inset: 0; background: linear-gradient(to right, transparent 45%, rgba(10,10,10,0.72) 100%); }
.shp-slide-text { position: absolute; top: 50%; right: clamp(24px, 5vw, 72px); transform: translateY(-50%); max-width: 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.shp-titel { font-size: clamp(34px, 4.6vw, 58px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; }
.shp-sub { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: rgba(245,245,243,0.75); }
.shp-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); background: var(--white); text-decoration: none; padding: 12px 22px; border-radius: 3px; transition: transform 0.2s; }
.shp-cta:hover { transform: translateY(-2px); }
.shp-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(10,10,10,0.55); border: 1px solid rgba(255,255,255,0.18); color: var(--white); cursor: pointer; transition: background 0.2s; }
.shp-pfeil:hover { background: rgba(10,10,10,0.85); }
.shp-pfeil-prev { left: 16px; }
.shp-pfeil-next { right: 16px; }
.shp-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; }
.shp-dots button { position: relative; width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.2s, transform 0.2s; padding: 0; }
.shp-dots button::after { content: ""; position: absolute; inset: -8px; } /* unsichtbare Tap-Fläche ~23px — endet exakt am Nachbar-Punkt (gap 8px), überdeckt ihn nie */
.shp-dots button.aktiv { background: var(--white); transform: scale(1.25); }
.shp-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.55); transform: scaleX(0); transform-origin: left; z-index: 5; }
/* Artist-Reihe */
.shp-artists { display: flex; align-items: center; gap: 20px; margin-top: -8px; }
.shp-artists-track { display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; scrollbar-width: none; padding: 4px 2px; flex: 1; min-width: 0; }
.shp-artists-track::-webkit-scrollbar { display: none; }
.shp-artist { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.shp-artist-ring { display: block; width: 64px; height: 64px; border-radius: 50%; padding: 2px; border: 1px solid rgba(255,255,255,0.25); transition: border-color 0.2s, transform 0.2s; }
.shp-artist:hover .shp-artist-ring { border-color: var(--white); transform: translateY(-2px); }
.shp-artist-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.shp-artist-name { font-size: 10.5px; letter-spacing: 0.02em; color: rgba(245,245,243,0.6); white-space: nowrap; transition: color 0.2s; }
.shp-artist:hover .shp-artist-name { color: var(--white); }
.shp-artists-alle { flex-shrink: 0; padding-left: 20px; border-left: 1px solid var(--border); }
.shp-seeall { display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); text-decoration: none; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); padding: 9px 16px; border-radius: 3px; white-space: nowrap; transition: background 0.2s; }
.shp-seeall:hover { background: rgba(255,255,255,0.15); }
/* Highlights-Grid */
.shp-block .section-label { margin-bottom: 16px; }
.shp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.shp-karte { display: block; text-decoration: none; }
.shp-karte-bild { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; }
.shp-karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.shp-karte:hover .shp-karte-bild img { transform: scale(1.04); }
.shp-karte-btn { position: absolute; bottom: 12px; right: 12px; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); background: var(--white); padding: 8px 13px; border-radius: 3px; opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; }
.shp-karte:hover .shp-karte-btn { opacity: 1; transform: translateY(0); }
.shp-karte-info { display: flex; flex-direction: column; gap: 4px; padding: 12px 2px 0; }
.shp-karte-label { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,243,0.3); }
.shp-karte-name { font-size: 14px; color: rgba(245,245,243,0.85); }
/* Fanbase-Banner */
.shp-banner { position: relative; height: min(52vh, 480px); min-height: 300px; overflow: hidden; border-radius: 4px; }
.shp-banner img { width: 100%; height: 100%; object-fit: cover; }
.shp-banner-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.32); }
.shp-banner-glas { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
.shp-banner-glas span { background: rgba(245,245,243,0.1); border: 1px solid rgba(245,245,243,0.18); padding: clamp(18px, 3vw, 28px) clamp(26px, 5vw, 52px); font-size: clamp(22px, 3.6vw, 46px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; text-align: center; }
@supports (backdrop-filter: blur(12px)) { .shp-banner-glas span { backdrop-filter: blur(12px); } }
/* Promo-Boxen */
.shp-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shp-promo { position: relative; display: block; height: 300px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; text-decoration: none; }
.shp-promo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.shp-promo:hover img { transform: scale(1.03); }
.shp-promo-schatten { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.18) 55%, transparent 80%); }
.shp-promo--rechts .shp-promo-schatten { background: linear-gradient(to left, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.18) 55%, transparent 80%); }
.shp-promo-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 26px 30px; gap: 7px; }
.shp-promo--rechts .shp-promo-text { align-items: flex-end; text-align: right; }
.shp-promo-titel { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; color: var(--white); }
.shp-promo-cta { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,245,243,0.65); border-bottom: 1px solid rgba(245,245,243,0.25); padding-bottom: 2px; margin-top: 4px; transition: color 0.2s; }
.shp-promo:hover .shp-promo-cta { color: var(--white); }
.shp-rabatt { position: absolute; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 5px; background: rgba(10,10,10,0.82); border: 1px solid rgba(255,255,255,0.14); padding: 13px 16px; border-radius: 4px; }
@supports (backdrop-filter: blur(10px)) { .shp-rabatt { backdrop-filter: blur(10px); } }
.shp-rabatt-label { font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,243,0.45); }
.shp-rabatt-wert { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: var(--white); }
.shp-rabatt-mit { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.4); }
.shp-rabatt-zeile { display: flex; align-items: center; gap: 8px; }
.shp-rabatt-zeile code { font-size: 11px; letter-spacing: 0.12em; color: rgba(245,245,243,0.8); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); padding: 5px 10px; }
.shp-rabatt-zeile button { background: none; border: none; cursor: pointer; color: rgba(245,245,243,0.5); display: flex; align-items: center; padding: 4px; transition: color 0.2s; }
.shp-rabatt-zeile button:hover { color: var(--white); }
@media (max-width: 820px) {
.shp-wrap { padding-top: 84px; gap: 28px; }
.shp-slider { height: 68vh; }
.shp-slide-schatten { background: linear-gradient(to top, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.25) 55%, transparent 85%); }
.shp-slide-text { top: auto; bottom: 48px; right: 20px; left: 20px; transform: none; max-width: none; }
.shp-pfeil { display: none; } /* mobil: wischen */
.shp-artists-alle { display: none; }
.shp-grid { grid-template-columns: 1fr 1fr; }
.shp-promos { grid-template-columns: 1fr; }
.shp-promo { height: 240px; }
}
/* ══ Admin: Inhalte-Transfer (Export/Import zwischen Umgebungen) ══ */
.transfer-karte { border: 1px solid var(--border); border-radius: 8px; padding: 22px 24px; margin-bottom: 20px; }
.transfer-titel { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,243,0.55); margin: 0 0 10px; }
.transfer-karte .konto-muted { font-size: 13px; margin: 0 0 16px; max-width: 640px; line-height: 1.6; }
.transfer-upload { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.transfer-datei-input { font-size: 12.5px; color: rgba(245,245,243,0.7); max-width: 100%; }
.transfer-progress { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 16px; overflow: hidden; }
.transfer-progress-balken { height: 100%; width: 0; background: #9ede9e; transition: width 0.15s; }
.transfer-fehler { background: rgba(224,138,138,0.08); border: 1px solid rgba(224,138,138,0.3); border-radius: 4px; color: #e08a8a; font-size: 13px; font-weight: 300; padding: 12px 16px; margin: 16px 0 0; }
#transfer-vorschau { margin-top: 22px; }
.transfer-zeilen-label { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,243,0.5); white-space: nowrap; }
.transfer-warnung { color: #e0b060; }
.transfer-bestaetigen { margin-top: 16px; }
.transfer-btn-rot { background: rgba(224,138,138,0.12); color: #e08a8a; border: 1px solid rgba(224,138,138,0.4); }
.transfer-btn-rot:hover { background: rgba(224,138,138,0.22); }