/* ============================================
Friesen24 - Main Stylesheet
Aesthetic: Industrial Precision · Dark & Bold
Fonts werden via im geladen,
nicht per @import (verhindert FOUT).
============================================ */
/* ── Dark Mode (default) ── */
:root,
[data-theme="dark"] {
--black: #252525;
--dark: #2c2c2c;
--dark-2: #333333;
--dark-3: #3a3a3a;
--border: #404040;
--border-light: #505050;
--text-muted: #6a6a6a;
--text-mid: #9a9a9a;
--text: #ccc8c2;
--text-bright: #eeebe5;
--white: #ffffff;
--accent: #b03028;
--accent-2: #c03530;
--accent-glow: rgba(176, 48, 40, 0.18);
--accent-glow-strong: rgba(176, 48, 40, 0.35);
--green: #2ecc71;
--nav-bg: rgba(37, 37, 37, 0.94);
--body-bg: #252525;
--card-bg: #2c2c2c;
--input-bg: #333333;
}
/* ── Light Mode ── */
[data-theme="light"] {
--black: #ffffff;
--dark: #f4f4f6;
--dark-2: #eaeaed;
--dark-3: #dddde2;
--border: #d0d0d8;
--border-light: #b8b8c4;
--text-muted: #888899;
--text-mid: #555566;
--text: #2a2a38;
--text-bright: #0a0a14;
--white: #ffffff;
/* Friesen-Rot Original fuer Light-Mode */
--accent: #9B2927;
--accent-2: #b53330;
--accent-glow: rgba(155, 41, 39, 0.10);
--accent-glow-strong: rgba(155, 41, 39, 0.22);
--green: #1a9e52;
--nav-bg: rgba(255, 255, 255, 0.93);
--body-bg: #f4f4f6;
--card-bg: #ffffff;
--input-bg: #ffffff;
}
/* ── Shared (theme-independent) ── */
:root {
--font-display: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', sans-serif;
--font-mono: 'Roboto Mono', monospace;
--nav-height: 72px;
--radius: 4px;
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
background: var(--body-bg);
color: var(--text);
font-family: var(--font-body);
font-weight: 400;
line-height: 1.6;
/* overflow-x: hidden würde position:sticky brechen — clip stattdessen */
overflow-x: clip;
transition: background 0.3s ease, color 0.3s ease;
max-width: 100vw;
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
/* ── Navigation ── */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 99000;
height: var(--nav-height);
background: var(--nav-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
transform: translateZ(0); /* GPU-Layer – nav bleibt immer oben */
will-change: transform;
}
.nav-inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
}
.nav-logo-icon {
width: 40px;
height: 40px;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
}
.nav-logo-icon svg { width: 22px; height: 22px; fill: white; }
.nav-logo-text {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--text-bright);
text-transform: uppercase;
}
.nav-logo-text span { color: var(--accent); }
.nav-links {
display: flex;
align-items: center;
gap: 8px;
}
.nav-links a {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mid);
padding: 8px 16px;
border: 1px solid transparent;
border-radius: var(--radius);
transition: var(--transition);
position: relative;
}
.nav-links a:hover, .nav-links a.active {
color: var(--accent);
border-color: var(--border);
background: var(--dark-2);
}
.nav-cta {
background: var(--accent) !important;
color: white !important;
border-color: var(--accent) !important;
}
.nav-cta:hover {
background: var(--accent-2) !important;
border-color: var(--accent-2) !important;
}
/* ── Nav Action Buttons (Theme Toggle + Hamburger) ── */
.nav-actions {
display: flex;
align-items: center;
gap: 6px;
}
.nav-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--text-mid);
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
}
.nav-icon-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-glow);
}
.nav-icon-btn i,
.nav-icon-btn svg {
width: 18px;
height: 18px;
stroke-width: 2;
display: block;
}
/* Hamburger: Menu/X toggle */
.nav-hamburger { display: none; }
.nav-hamburger .icon-close { display: none; }
.nav-hamburger.active .icon-menu { display: none; }
.nav-hamburger.active .icon-close { display: block; }
.nav-hamburger.active {
border-color: var(--accent);
color: var(--accent);
}
/* ── Mobile Nav ── */
.nav-mobile {
display: none;
position: fixed;
top: var(--nav-height);
left: 0; right: 0;
background: var(--dark);
border-bottom: 1px solid var(--border);
padding: 16px;
z-index: 98999;
flex-direction: column;
gap: 4px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-mid);
padding: 12px 16px;
border-radius: var(--radius);
transition: var(--transition);
}
.nav-mobile a:hover { color: var(--accent); background: var(--dark-2); }
.nav-mobile a.nav-cta { color: white; background: var(--accent); margin-top: 8px; text-align: center; }
/* ── Hero ── */
.hero {
min-height: 100vh;
padding-top: var(--nav-height);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
z-index: 0;
}
.hero-left {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 820px;
padding: 80px 32px;
position: relative;
z-index: 2;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 24px;
}
.hero-tag::before { display: none; }
.hero-title {
font-family: var(--font-display);
font-size: clamp(52px, 6vw, 96px);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text-bright);
margin-bottom: 8px;
}
.hero-title .accent { color: var(--accent); display: block; }
.hero-subtitle {
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 28px);
font-weight: 300;
color: var(--text-mid);
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 32px;
}
.hero-desc {
font-size: 16px;
color: var(--text);
max-width: 480px;
margin-bottom: 48px;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.hero-stats {
display: flex;
gap: 0;
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--border);
flex-wrap: nowrap; /* nie umbrechen solange irgendwie möglich */
width: 100%; /* volle Breite des hero-left nutzen */
}
.hero-stat {
flex: 1 1 0;
min-width: max-content; /* Zelle wächst bis Inhalt passt ohne Umbruch */
text-align: center;
padding: 16px 24px;
border-right: 1px solid var(--border);
}
.hero-stat:last-child { border-right: none; }
.hero-stat-value {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
color: var(--accent);
display: block;
white-space: nowrap;
}
.hero-stat-label {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
display: block;
line-height: 1.3;
white-space: nowrap; /* kein Umbruch auf Desktop */
}
.hero-right {
position: relative;
overflow: hidden;
}
.hero-image-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-rows: 1fr 1fr;
gap: 4px;
}
.hero-image-slot {
background: var(--dark-2);
overflow: hidden;
position: relative;
}
.hero-image-slot img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
transition: opacity 0.5s ease;
}
.hero-image-slot:hover img { opacity: 1; }
.hero-overlay {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 120px;
background: linear-gradient(to right, var(--black), transparent);
z-index: 1;
}
.hero-bg-pattern {
position: absolute;
inset: 0;
opacity: 0.03;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 40px 40px;
z-index: 0;
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 14px 28px;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
justify-content: center;
}
.btn-primary {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.btn-primary:hover {
background: var(--accent-2);
border-color: var(--accent-2);
transform: translateY(-1px);
box-shadow: 0 8px 24px var(--accent-glow-strong);
}
.btn-outline {
background: transparent;
color: var(--text-bright);
border-color: var(--border-light);
}
.btn-outline:hover {
border-color: var(--accent);
color: var(--accent);
}
.btn-icon {
width: 16px;
height: 16px;
}
/* ── Section Layout ── */
.section {
padding: 100px 0;
}
.section-sm { padding: 60px 0; }
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
width: 100%;
box-sizing: border-box;
}
.section-header {
margin-bottom: 64px;
}
.section-header--center {
text-align: center;
}
.section-header--center .section-desc {
margin-left: auto;
margin-right: auto;
}
.section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.section-tag::before {
content: '';
width: 16px;
height: 1px;
background: var(--accent);
}
.section-title {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 64px);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text-bright);
}
.section-title span { color: var(--accent); }
.section-desc {
font-size: 17px;
color: var(--text);
max-width: 600px;
margin-top: 20px;
line-height: 1.7;
}
/* ── Divider ── */
.divider {
height: 1px;
background: linear-gradient(to right, transparent, var(--border), transparent);
}
/* ── Services Grid ── */
.services-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* Desktop ≥1100px: 5 Spalten → 2 symmetrische Reihen */
gap: 2px;
background: var(--border);
}
.service-card {
background: var(--dark);
padding: 32px 16px 28px;
position: relative;
overflow: visible;
cursor: pointer;
transition: var(--transition);
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.service-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
z-index: 1;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { background: var(--dark-2); }
.service-number {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.05em;
margin-bottom: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
width: 100%;
}
.service-icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
color: var(--accent);
flex-shrink: 0;
}
/* MDI-Icons via ![]()
in Akzentfarbe färben */
.mdi-icon {
width: 80px;
height: 80px;
/* Dark Mode: Weiß → Rot #c0352f
filter generiert via: https://codepen.io/sosuke/pen/Pjoqqp */
filter: invert(27%) sepia(62%) saturate(762%) hue-rotate(328deg) brightness(95%) contrast(101%);
}
[data-theme="light"] .mdi-icon {
/* Light Mode: Schwarz → Rot #9B2927 */
filter: invert(18%) sepia(72%) saturate(732%) hue-rotate(332deg) brightness(87%) contrast(107%);
}
.service-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-bright);
margin-bottom: 10px;
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
text-align: center;
}
.service-desc {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
text-align: center;
}
.service-arrow {
position: absolute;
top: 20px;
right: 20px;
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: var(--transition);
}
.service-card:hover .service-arrow {
background: var(--accent);
border-color: var(--accent);
color: white;
transform: rotate(45deg);
}
/* ── Service Detail flip layout (desktop only) ── */
.service-detail--flip { direction: rtl; }
.service-detail--flip > div { direction: ltr; }
/* ── Machine Cards ── */
.machine-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.machine-card {
background: var(--dark);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: var(--transition);
}
.machine-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.machine-card-header {
padding: 28px 28px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
}
.machine-icon {
width: 80px;
height: 80px;
background: var(--accent-glow);
border: 1px solid var(--accent);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--accent);
margin-top: 5px;
padding: 5px;
}
.machine-name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: var(--text-bright);
letter-spacing: 0.05em;
}
.machine-model {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
margin-top: 4px;
letter-spacing: 0.1em;
}
.machine-card-body {
padding: 20px 28px;
}
.machine-spec {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.machine-spec:last-child { border-bottom: none; }
.machine-spec-label { color: var(--text-muted); }
.machine-spec-value { color: var(--text-bright); font-family: var(--font-mono); font-size: 12px; }
/* ── Slideshow ── */
/* ── Slideshow ── */
.slideshow-wrapper {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
}
.slideshow {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: var(--dark-2);
aspect-ratio: 4/3;
max-width: 100%;
width: 100%;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
/* border: 1px solid var(--border); */
}
.slideshow-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
will-change: transform;
contain: layout style;
}
.slide {
min-width: 100%;
height: 100%;
position: relative;
overflow: hidden;
contain: layout style paint;
}
.slide-bg {
position: absolute;
inset: -20px;
background-size: cover;
background-position: center;
filter: blur(18px) brightness(0.65) saturate(0.75);
z-index: 0;
pointer-events: none;
}
.slide img,
.slide .slide-placeholder {
position: relative;
z-index: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform 0.6s ease;
cursor: zoom-in;
decoding: async;
}
/* Inaktive Slides aus dem Rendering-Baum nehmen */
.slide.inactive {
visibility: hidden;
content-visibility: hidden;
}
.slideshow-wrapper:hover .slide img {
transform: scale(1.01); /* weniger aggressiv bei contain */
}
.slide-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--dark-3);
color: var(--text-muted);
gap: 12px;
}
.slide-placeholder svg { width: 48px; height: 48px; opacity: 0.5; }
.slide-placeholder span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; }
/* Caption — below image, centered, in .slideshow-info */
.slide-caption {
display: none; /* caption rendered in .slideshow-info instead */
}
.slideshow-info {
padding: 10px 0 4px;
text-align: center;
min-height: 36px;
}
.slideshow-info-caption {
font-size: 12px;
letter-spacing: 0.03em;
color: var(--text-muted);
line-height: 1.4;
}
/* Zoom-Button — oben rechts, immer sichtbar */
.slideshow-zoom {
position: absolute;
top: 10px;
right: 10px;
width: 34px;
height: 34px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255,255,255,0.85);
transition: var(--transition);
z-index: 10; /* über allem anderen */
touch-action: manipulation; /* verhindert Chrome Mobile Delay */
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.slideshow-zoom:hover,
.slideshow-zoom:active {
background: var(--accent);
border-color: var(--accent);
color: white;
}
/* Counter — unten rechts */
.slideshow-counter {
position: absolute;
bottom: 10px;
right: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.75);
background: rgba(0,0,0,0.45);
backdrop-filter: blur(4px);
padding: 3px 8px;
border-radius: 2px;
z-index: 5;
pointer-events: none;
}
/* Dots — unterhalb des Bildes, zentriert */
.slideshow-dots {
display: flex;
gap: 6px;
justify-content: center;
margin-top: 10px;
}
.slideshow-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--border-light);
border: none;
cursor: pointer;
transition: var(--transition);
}
.slideshow-dot.active {
background: var(--accent);
width: 18px;
border-radius: 2px;
}
.slideshow-dot:hover:not(.active) {
background: var(--text-muted);
}
/* Prev/Next — seitlich mittig, bei Hover einblenden (Desktop) */
.slideshow-controls {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
pointer-events: none;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}
.slideshow-btn {
pointer-events: all;
width: 36px;
height: 36px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255,255,255,0.85);
transition: var(--transition);
flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
/* Desktop: erst bei Hover sichtbar */
opacity: 0;
transform: scale(0.9);
}
/* Mobile: Prev/Next immer sichtbar */
@media (hover: none) {
.slideshow-btn { opacity: 1; transform: none; }
}
.slideshow-btn.prev { transform: translateX(-4px) scale(0.9); }
.slideshow-btn.next { transform: translateX(4px) scale(0.9); }
.slideshow-wrapper:hover .slideshow-btn {
opacity: 1;
transform: none;
}
.slideshow-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: white;
transform: scale(1.08) !important;
}
/* ── Laser-Wipe Slide Transition ── */
.slideshow-laser {
position: absolute;
top: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom,
transparent 0%,
rgba(255,80,60,0.7) 20%,
rgba(255,140,120,1) 45%,
rgba(255,80,60,0.7) 80%,
transparent 100%);
filter: blur(2px);
box-shadow: 0 0 14px 5px rgba(200,50,40,0.65);
pointer-events: none;
z-index: 10;
border-radius: 2px;
will-change: left;
}
.slide-incoming {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 3;
}
.slide-incoming img {
width: 100%; height: 100%;
object-fit: contain;
object-position: center;
}
/* ── Service Detail ── */
.service-detail {
display: grid;
grid-template-columns: 1fr 0.75fr;
gap: 48px;
align-items: start;
max-width: 100%;
width: 100%;
}
/* Grid-Items: min-width:0 verhindert Overflow über Grid-Grenzen hinaus */
.service-detail > div {
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}
.service-detail-info {}
.service-detail-slide {}
.service-detail p { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.service-features {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.feature-item {
padding: 10px 0;
border-bottom: 1px solid var(--border);
position: relative;
padding-left: 14px;
}
.feature-item:last-child { border-bottom: none; }
.feature-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
/* .feature-check ausblenden – nicht mehr genutzt */
.feature-check { display: none; }
.feature-check svg { display: none; }
.feature-text {
font-size: 14px;
color: var(--text);
word-break: break-word;
overflow-wrap: break-word;
line-height: 1.5;
display: block;
}
/* ── Tabs ── */
.tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 48px;
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
padding: 14px 24px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
transition: var(--transition);
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ── About ── */
.about-grid {
display: grid;
grid-template-columns: 1fr 0.75fr;
gap: 64px;
align-items: start;
}
/* ── Contact Form ── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 64px;
align-items: start;
}
.contact-info {}
.contact-item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 32px;
}
.contact-icon {
width: 44px;
height: 44px;
background: var(--dark-2);
border: 1px solid var(--border);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--accent);
}
.contact-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}
.contact-value {
font-size: 15px;
color: var(--text-bright);
}
.form-card {
background: var(--dark);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px;
}
.form-group {
margin-bottom: 20px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 0.75fr;
gap: 16px;
}
.form-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.form-label .required { color: var(--accent); margin-left: 2px; }
.form-control {
width: 100%;
background: var(--dark-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 16px;
font-family: var(--font-body);
font-size: 14px;
color: var(--text-bright);
transition: var(--transition);
outline: none;
appearance: none;
}
.form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-control::placeholder { color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 140px; }
select.form-control { cursor: pointer; }
.form-upload {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 24px;
text-align: center;
cursor: pointer;
transition: var(--transition);
position: relative;
}
.form-upload:hover { border-color: var(--accent); background: var(--accent-glow); }
.form-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.form-upload-icon { color: var(--text-muted); margin: 0 auto 8px; width: 32px; height: 32px; }
.form-upload-text { font-size: 13px; color: var(--text-muted); }
.form-upload-text strong { color: var(--accent); }
.form-upload-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.1em; }
.form-file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.form-file-item {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--dark-3);
padding: 8px 12px;
border-radius: var(--radius);
font-size: 12px;
color: var(--text);
}
.form-file-remove { cursor: pointer; color: var(--text-muted); transition: var(--transition); }
.form-file-remove:hover { color: #e84040; }
.form-submit { margin-top: 24px; width: 100%; }
.form-privacy {
font-size: 12px;
color: var(--text-muted);
margin-top: 16px;
text-align: center;
line-height: 1.5;
}
.form-privacy a { color: var(--accent); }
.form-success {
display: none;
text-align: center;
padding: 40px;
}
.form-success-icon {
width: 64px;
height: 64px;
background: rgba(46, 204, 113, 0.1);
border: 2px solid var(--green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: var(--green);
}
.form-success-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--text-bright);
text-transform: uppercase;
margin-bottom: 8px;
}
.form-success-text { font-size: 14px; color: var(--text-muted); }
/* ── Alert/Message ── */
.alert {
padding: 12px 16px;
border-radius: var(--radius);
font-size: 13px;
margin-bottom: 16px;
display: none;
}
.alert-error { background: rgba(232, 64, 64, 0.1); border: 1px solid rgba(232, 64, 64, 0.3); color: #e84040; }
.alert-success { background: rgba(46, 204, 113, 0.1); border: 1px solid rgba(46, 204, 113, 0.3); color: var(--green); }
/* ── Process Steps ── */
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
}
.process-steps::before {
content: '';
position: absolute;
top: 40px;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(to right, var(--accent), var(--border));
z-index: 0;
}
.process-step {
text-align: center;
padding: 0 24px;
position: relative;
z-index: 1;
}
.process-step-num {
width: 80px;
height: 80px;
background: var(--dark);
border: 2px solid var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-family: var(--font-display);
font-size: 28px;
font-weight: 900;
color: var(--accent);
}
.process-step-title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: var(--text-bright);
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.process-step-desc {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
/* ── CTA Band ── */
.cta-band {
background: var(--accent);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 48px 48px;
}
.cta-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.cta-title {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 56px);
font-weight: 900;
text-transform: uppercase;
color: white;
line-height: 0.95;
}
.cta-subtitle {
font-size: 16px;
color: rgba(255,255,255,0.8);
margin-top: 8px;
}
.btn-white {
background: white;
color: var(--accent);
border-color: white;
}
.btn-white:hover {
background: rgba(255,255,255,0.9);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
/* ── Footer ── */
.footer {
background: var(--dark);
border-top: 1px solid var(--border);
padding: 64px 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 0.8fr 1.2fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-brand {}
.footer-brand-logo {
display: flex;
align-items: stretch;
gap: 10px;
margin-bottom: 16px;
}
.footer-brand-icon {
width: 32px;
height: 32px;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
}
.footer-brand-icon svg { width: 16px; height: 16px; fill: white; }
.footer-brand-name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-bright);
}
.footer-brand-name span { color: var(--accent); }
.footer-tagline { font-size: 11px; color: var(--text-muted); line-height: 1.6; max-width: 280px; }
.footer-heading {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 20px;
}
.footer-links {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.footer-links--two-col {
grid-template-columns: 1fr 0.75fr;
gap: 10px 20px;
}
.footer-links a {
font-size: 14px;
color: var(--text-mid);
transition: var(--transition);
}
.footer-links a:hover { color: var(--accent); }
.footer-contact-item {
font-size: 13px;
color: var(--text-mid);
margin-bottom: 10px;
display: flex;
gap: 8px;
align-items: flex-start;
}
.footer-contact-item svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-copy {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.05em;
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.05em;
transition: var(--transition);
}
.footer-legal a:hover { color: var(--accent); }
/* ── Highlight Band (entfernt) ── */
.highlight-band { display: none; }
/* ── Service Quick-Nav (Leistungen-Seite) ── */
.service-nav {
background: var(--dark-2);
border-bottom: 1px solid var(--border);
padding: 12px 0;
position: sticky;
top: var(--nav-height);
z-index: 98998;
/* KEIN overflow hier – würde das Dropdown clippen und sticky brechen */
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
transition: box-shadow 0.3s ease, background 0.3s ease, border-bottom-color 0.3s ease;
}
/* Verstärktes visuelles Feedback wenn die Nav wirklich am oberen Rand klebt */
.service-nav.is-stuck {
background: var(--dark);
border-bottom-color: var(--accent);
box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 0 var(--accent-glow) inset;
}
/* Das innere Grid scrollt horizontal wenn nötig */
.service-nav-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.service-nav-grid::-webkit-scrollbar { display: none; }
.service-nav-item {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted);
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
white-space: nowrap;
transition: var(--transition);
text-decoration: none;
}
.service-nav-item:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-glow);
}
/* Aktiver Zustand (via JS ScrollSpy) */
.service-nav-item.active {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-glow);
font-weight: 700;
}
.service-nav-num {
color: var(--accent);
font-family: var(--font-mono);
font-size: 10px;
flex-shrink: 0;
}
.service-nav-label {}
/* ── Mobile: Dropdown ── */
.service-nav-mobile {
display: none;
position: relative;
}
.service-nav-dropdown-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--dark-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 14px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-bright);
cursor: pointer;
transition: var(--transition);
}
.service-nav-dropdown-btn:hover,
.service-nav-dropdown-btn.open {
border-color: var(--accent);
}
.service-nav-dropdown-btn .btn-label {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
}
.service-nav-dropdown-btn .btn-num {
color: var(--accent);
font-family: var(--font-mono);
font-size: 10px;
flex-shrink: 0;
}
.service-nav-dropdown-btn .btn-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.service-nav-chevron {
flex-shrink: 0;
transition: transform var(--transition);
color: var(--text-muted);
}
.service-nav-dropdown-btn.open .service-nav-chevron {
transform: rotate(180deg);
}
/* Dropdown-Liste: fixed damit sie aus jedem overflow-Container rausbricht */
.service-nav-dropdown-list {
display: none;
position: fixed; /* fixed statt absolute – escapes overflow:clip auf body */
/* top/left/right werden per JS gesetzt */
background: var(--dark);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
z-index: 99999;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
overflow-y: auto;
max-height: 60vh;
}
.service-nav-dropdown-list.open {
display: block;
}
.service-nav-dropdown-list a {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-mid);
text-decoration: none;
transition: var(--transition);
border-bottom: 1px solid var(--border);
}
.service-nav-dropdown-list a:last-child { border-bottom: none; }
.service-nav-dropdown-list a:hover,
.service-nav-dropdown-list a.active {
color: var(--accent);
background: var(--accent-glow);
}
.service-nav-dropdown-list .dd-num {
color: var(--accent);
font-family: var(--font-mono);
font-size: 10px;
flex-shrink: 0;
min-width: 22px;
}
@media (max-width: 640px) {
.service-nav { padding: 10px 0; position: sticky; top: var(--nav-height); z-index: 98998; }
.service-nav-grid { display: none; } /* Desktop-Grid ausblenden */
.service-nav-mobile { display: block; position: relative; } /* Dropdown einblenden */
}
/* ── Page Header ── */
.page-header {
padding: 140px 0 60px;
background: var(--dark);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
width: 100%;
z-index: 0;
}
.page-header-bg {
position: absolute;
inset: 0;
opacity: 0.04;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 48px 48px;
}
.page-header-title {
font-family: var(--font-display);
font-size: clamp(48px, 6vw, 96px);
font-weight: 900;
line-height: 0.9;
text-transform: uppercase;
color: var(--text-bright);
position: relative;
z-index: 1;
}
.page-header-title span { color: var(--accent); }
.page-header-sub {
font-size: 17px;
color: var(--text-muted);
margin-top: 16px;
position: relative;
z-index: 1;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.breadcrumb a { color: var(--accent); }
.breadcrumb-sep { color: var(--border-light); }
/* ── Info Box ── */
.info-box {
overflow: hidden;
word-break: break-word;
background: var(--dark-2);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: 20px 24px;
margin-top: 20px;
}
.info-box-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.info-box-text { font-size: 13px; color: var(--text); line-height: 1.6; word-break: break-word; overflow-wrap: break-word; }
/* ── Spec Table ── */
.spec-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}
.spec-table tr {
border-bottom: 1px solid var(--border);
}
.spec-table tr:last-child { border-bottom: none; }
.spec-table td {
padding: 10px 0;
font-size: 13px;
}
.spec-table td:first-child { color: var(--text-muted); width: 40%; }
.spec-table td:last-child { color: var(--text-bright); font-family: var(--font-mono); font-size: 12px; }
/* ── Responsive ── */
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-links--two-col { grid-template-columns: 1fr 1fr; }
.services-grid { grid-template-columns: repeat(3, 1fr); }
.process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
.process-steps::before { display: none; }
}
@media (max-width: 500px) {
/* Mobile: 2 Spalten */
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
.service-card { padding: 20px 12px 20px; }
.service-title { font-size: 15px; hyphens: none; }
.service-desc { font-size: 12px; }
}
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; min-height: auto; }
.hero-left { padding: 60px 24px; }
/* hero-right entfernt */
.service-detail { grid-template-columns: 1fr !important; direction: ltr !important; }
.service-detail > div { direction: ltr !important; }
.about-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.machine-grid { grid-template-columns: 1fr; }
.cta-inner { text-align: center; justify-content: center; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.nav-hamburger { display: flex; }
.hero-left { padding: 40px 20px; }
.container { padding: 0 16px; }
.section { padding: 56px 0; }
.section-sm { padding: 40px 0; }
.form-row { grid-template-columns: 1fr; }
/* services-grid: bei 768px weiter 2-spaltig */
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-links--two-col { grid-template-columns: 1fr 1fr; }
/* Mobile: Kontakt zuerst */
.footer-brand { order: 1; }
.footer-grid > div:nth-child(2) { order: 2; }
.footer-grid > div:nth-child(3) { order: 3; }
.footer-grid > div:nth-child(4) { order: 0; }
.process-steps { grid-template-columns: 1fr; }
.hero-stats { gap: 0; }
.hero-stat { min-width: 0; padding: 12px 8px; }
.hero-stat-label { white-space: normal; word-break: normal; hyphens: auto; }
.tabs { gap: 0; overflow-x: auto; }
.tab-btn { padding: 12px 14px; font-size: 11px; flex-shrink: 0; }
/* Spec table: stack on small screens */
.spec-table td { display: block; padding: 4px 0; }
.spec-table td:first-child { color: var(--text-muted); padding-top: 10px; width: 100%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.spec-table td:last-child { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.spec-table tr:last-child td:last-child { border-bottom: none; }
/* Info box padding */
.info-box { padding: 16px; }
/* Machine card */
.machine-card-header { padding: 20px; }
.machine-card-body { padding: 16px 20px; }
/* CTA band */
.cta-band { padding: 56px 0; }
/* Section header */
.section-header { margin-bottom: 40px; }
/* Service detail on leistungen page */
.service-detail { gap: 32px; }
.service-detail--flip { direction: ltr !important; }
.service-detail--flip > div { direction: ltr !important; }
/* Feature items */
.feature-text { font-size: 13px; }
.feature-item { padding-left: 12px; }
}
@media (max-width: 480px) {
.hero-title { font-size: 38px; }
.hero-left { padding: 32px 16px; }
.form-card { padding: 20px 16px; }
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; justify-content: center; }
.service-card { padding: 24px 20px 24px; }
.service-title { font-size: 18px; }
.page-header { padding: 120px 0 40px; }
.page-header-title { font-size: 40px; }
.cta-title { font-size: 28px; }
.process-step-num { width: 64px; height: 64px; font-size: 22px; }
/* Nav Quick-links wrappen */
.nav-inner { padding: 0 16px; }
}
/* ── Animations ── */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-in {
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
/* Observe-based animation */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ── Logo Image ── */
.nav-logo-img {
width: 36px;
height: 36px;
object-fit: contain;
display: block;
/* Im Light-Mode bleibt das SVG unveraendert (hat eigene Farben) */
}
.nav-logo-text {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--text-bright);
text-transform: uppercase;
}
/* ── Theme Toggle: welches Icon ── */
[data-theme="dark"] .icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: block; }
/* ── Light Mode: body & card overrides ── */
[data-theme="light"] body { background: var(--body-bg); }
[data-theme="light"] .service-card,
[data-theme="light"] .machine-card,
[data-theme="light"] .form-card,
[data-theme="light"] .info-box {
background: var(--card-bg);
}
[data-theme="light"] .hero {
background: var(--dark);
}
[data-theme="light"] .hero-left {
background: transparent;
}
[data-theme="light"] .page-header {
background: var(--dark);
}
[data-theme="light"] .highlight-band {
background: var(--dark-2);
}
[data-theme="light"] .footer {
background: var(--dark);
}
[data-theme="light"] .nav-mobile {
background: var(--dark);
}
[data-theme="light"] .form-control {
background: var(--input-bg);
color: var(--text-bright);
}
[data-theme="light"] .slide-placeholder {
background: var(--dark-2);
}
/* ── Light Mode: nav logo text ── */
.nav-logo-text { color: var(--text-bright); }
.nav-logo-text span { color: var(--accent); }
/* ── Nav logo link – kein Unterstrich ── */
.nav-logo { text-decoration: none; }
/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 999000;
background: rgba(0,0,0,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
flex-direction: column;
align-items: stretch;
}
.lightbox.open {
display: flex;
animation: lbFadeIn 0.2s ease;
}
@keyframes lbFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.lightbox-topbar {
flex-shrink: 0;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
}
.lightbox-counter {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.5);
}
.lightbox-close {
width: 38px;
height: 38px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius);
color: rgba(255,255,255,0.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.lightbox-close:hover { background: var(--accent); border-color: var(--accent); color: white; }
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-stage {
flex: 1;
min-height: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 72px;
box-sizing: border-box;
}
.lightbox-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--radius);
user-select: none;
transition: opacity 0.2s ease;
display: block;
}
.lightbox-img.fade { opacity: 0; }
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius);
color: rgba(255,255,255,0.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease;
z-index: 2;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-prev:hover, .lightbox-next:hover {
background: var(--accent);
border-color: var(--accent);
color: white;
}
.lightbox-prev svg, .lightbox-next svg { width: 20px; height: 20px; }
.lightbox-bottom {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 10px 16px 16px;
}
.lightbox-caption {
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.55);
font-family: var(--font-mono);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80vw;
min-height: 16px;
}
.lightbox-thumbs {
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: nowrap;
}
.lightbox-thumb {
width: 48px;
height: 36px;
border-radius: 2px;
overflow: hidden;
opacity: 0.4;
cursor: pointer;
border: 1px solid transparent;
transition: opacity 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-thumb.active { opacity: 1; border-color: var(--accent); }
.lightbox-thumb:hover:not(.active) { opacity: 0.7; }
.lightbox-dots {
display: none;
gap: 6px;
justify-content: center;
}
.lightbox-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
border: 1px solid rgba(255,255,255,0.2);
cursor: pointer;
transition: all 0.2s ease;
}
.lightbox-dot.active {
background: var(--accent);
border-color: var(--accent);
width: 20px;
border-radius: 2px;
}
body.lightbox-open { overflow: hidden; }
@media (max-width: 768px) {
.lightbox-stage { padding: 0 52px; }
.lightbox-prev { left: 4px; width: 38px; height: 38px; }
.lightbox-next { right: 4px; width: 38px; height: 38px; }
.lightbox-thumbs { display: none; }
.lightbox-dots { display: flex; }
}