/* ==============================================================
EUVIC × Sparkasse Hopfgarten · Event Presentation
Mode system: cinematic · keynote · cockpit · transition · theater
============================================================== */
:root {
/* Base palette — aligned to EUVIC brand blue #0080C7 */
--euvic-dark: #0A1424;
--euvic-dark-2: #0F1E36;
--euvic-navy: #1E3A5F;
--euvic-blue: #0080C7; /* primary brand blue from logo */
--euvic-blue-bright: #139CFD; /* EUVIC Professionals brand blue */
--euvic-cyan: #0080C7;
--euvic-cyan-soft: #4DB4E5;
--euvic-accent: #FF6B35;
--euvic-gold: #F5B82E;
--euvic-violet: #8A6AE5;
--euvic-red: #E5484D;
--euvic-light: #F7F9FC;
--euvic-text: #E8EEF5;
--euvic-muted: #8A9BB0;
--euvic-border: rgba(255,255,255,0.08);
--euvic-card: rgba(255,255,255,0.04);
--euvic-card-hover: rgba(255,255,255,0.08);
/* Speaker colors — aligned to EUVIC brand */
--sp-markus: #0080C7;
--sp-bastian: #8A6AE5;
--sp-thomas: #F5B82E;
/* Gradients */
--grad-primary: linear-gradient(135deg, #1E3A5F 0%, #00A3E0 100%);
--grad-markus: linear-gradient(135deg, #0A1424 0%, #00A3E0 100%);
--grad-bastian: linear-gradient(135deg, #0A1424 0%, #8A6AE5 100%);
--grad-thomas: linear-gradient(135deg, #0A1424 0%, #F5B82E 100%);
--grad-dark: linear-gradient(180deg, #0A1424 0%, #0F1E36 100%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: var(--euvic-dark);
color: var(--euvic-text);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
em { font-style: normal; color: var(--euvic-cyan); }
/* ==========================================================
CHROME / HUD (top bar, progress, counter, chapter)
========================================================== */
.chrome { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.progress-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.05); z-index: 95; }
.progress-fill { height: 100%; background: var(--grad-primary); width: 0%; transition: width 0.4s ease; }
.hud-top {
position: absolute; top: 28px; left: 140px; right: 220px;
display: flex; justify-content: flex-start; align-items: center;
gap: 32px;
font-size: 12px; font-weight: 500;
color: var(--euvic-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
transition: left 0.45s cubic-bezier(0.2,0.8,0.2,1);
pointer-events: none;
}
body.theater-active .hud-top, body.nosidenav .hud-top { left: 32px; }
/* Counter is now in touch-nav, hide from HUD */
.hud-counter { display: none; }
.progress-bar { left: 110px !important; transition: left 0.45s cubic-bezier(0.2,0.8,0.2,1); }
body.theater-active .progress-bar, body.nosidenav .progress-bar { left: 0 !important; }
.hud-chapter, .hud-counter { opacity: 0.8; }
.hud-speaker {
display: flex; align-items: center; gap: 10px;
font-size: 12px; letter-spacing: 0.1em;
}
.hud-speaker::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--euvic-cyan); box-shadow: 0 0 10px currentColor;
transition: background 0.3s;
}
.hud-speaker.sp-markus::before { background: var(--sp-markus); color: var(--sp-markus); }
.hud-speaker.sp-bastian::before { background: var(--sp-bastian); color: var(--sp-bastian); }
.hud-speaker.sp-thomas::before { background: var(--sp-thomas); color: var(--sp-thomas); }
/* HUD hide states */
body.hide-chrome .chrome { opacity: 0; }
body.keynote-active .chrome { opacity: 0.35; }
body.theater-active .chrome, body.theater-active .nav-hint { opacity: 0 !important; }
/* Nav hint */
.nav-hint {
position: fixed; bottom: 20px; left: 50%;
transform: translateX(-50%);
font-size: 11px; color: var(--euvic-muted);
padding: 7px 16px; border: 1px solid var(--euvic-border);
border-radius: 20px; background: rgba(255,255,255,0.03);
z-index: 100;
display: flex; gap: 10px; align-items: center;
transition: opacity 0.6s ease;
letter-spacing: 0.05em;
}
.nav-hint.fade { opacity: 0; pointer-events: none; }
.nav-hint b { color: var(--euvic-text); font-weight: 600; }
/* ==========================================================
SLIDES BASE
========================================================== */
#slides {
width: 100vw; height: 100vh;
position: relative;
transition: left 0.45s cubic-bezier(0.2,0.8,0.2,1), width 0.45s cubic-bezier(0.2,0.8,0.2,1);
}
/* Shift main content right of sidebar (actual left offset, since children are position:absolute) */
body:not(.nosidenav) #slides {
left: 110px;
width: calc(100vw - 110px);
}
body.theater-active #slides,
body.nosidenav #slides {
left: 0;
width: 100vw;
}
/* ==========================================================
LEFT SIDEBAR NAV (touch optimized)
========================================================== */
.sidenav {
position: fixed;
top: 0; left: 0;
width: 110px; height: 100vh;
background: linear-gradient(180deg, rgba(10,20,36,0.96) 0%, rgba(15,30,54,0.96) 100%);
backdrop-filter: blur(16px);
border-right: 1px solid var(--euvic-border);
z-index: 90;
display: flex;
flex-direction: column;
padding: 20px 10px 16px;
transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1), opacity 0.3s;
}
body.theater-active .sidenav { transform: translateX(-100%); opacity: 0; pointer-events: none; }
body.nosidenav .sidenav { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.sn-logo {
display: flex; flex-direction: column; align-items: center;
padding: 4px 8px 12px;
border-bottom: 1px solid var(--euvic-border);
margin-bottom: 8px;
}
.sn-heading {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--euvic-muted);
text-align: center;
margin-bottom: 6px;
opacity: 0.75;
}
.sn-sections {
display: flex; flex-direction: column; gap: 2px;
flex: 1; overflow-y: auto;
margin: 0 -4px;
padding: 0 4px;
position: relative;
}
.sn-sections::-webkit-scrollbar { width: 3px; }
.sn-sections::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
/* Vertical timeline line */
.sn-sections::before {
content: '';
position: absolute;
left: 50%; top: 10px; bottom: 10px;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
rgba(255,255,255,0.08) 8%,
rgba(255,255,255,0.08) 92%,
transparent 100%);
transform: translateX(-0.5px);
pointer-events: none;
z-index: 0;
}
/* Time label at top of each row */
.sn-time {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--euvic-muted);
opacity: 0.7;
margin-bottom: 2px;
}
/* NON-NAV events (Sektempfang, Essen, Ausklang, Begrüßung) */
.sn-event {
padding: 8px 4px;
display: flex; flex-direction: column;
align-items: center;
text-align: center;
gap: 3px;
position: relative;
z-index: 1;
opacity: 0.7;
}
.sn-event-ico {
font-size: 16px;
line-height: 1;
margin: 1px 0;
}
.sn-event-lbl {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 9px;
font-weight: 600;
color: var(--euvic-text);
line-height: 1.1;
letter-spacing: 0.02em;
}
.sn-event-lbl span {
display: block;
font-weight: 400;
font-size: 8px;
color: var(--euvic-muted);
}
.sn-event--meal {
padding: 10px 4px;
background: linear-gradient(135deg, rgba(255,107,53,0.08) 0%, rgba(245,184,46,0.05) 100%);
border: 1px dashed rgba(255,107,53,0.25);
border-radius: 8px;
opacity: 1;
margin: 4px -2px;
}
/* NAV sections */
.sn-section {
width: 100%;
min-height: 62px;
padding: 8px 6px;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
color: var(--euvic-muted);
cursor: pointer;
transition: all 0.2s;
display: flex; flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-family: inherit;
position: relative;
z-index: 1;
overflow: hidden;
}
.sn-section:hover, .sn-section:active {
background: rgba(255,255,255,0.04);
color: var(--euvic-text);
}
.sn-section.current {
background: rgba(255,255,255,0.05);
border-color: var(--euvic-border);
color: var(--euvic-text);
}
.sn-section.current::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 30px;
background: var(--euvic-cyan);
border-radius: 0 3px 3px 0;
box-shadow: 0 0 10px var(--euvic-cyan);
}
.sn-section--markus.current::before { background: var(--sp-markus); box-shadow: 0 0 10px var(--sp-markus); }
.sn-section--bastian.current::before { background: var(--sp-bastian); box-shadow: 0 0 10px var(--sp-bastian); }
.sn-section--thomas.current::before { background: var(--sp-thomas); box-shadow: 0 0 10px var(--sp-thomas); }
.sn-ico {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 600;
width: 28px; height: 28px; border-radius: 8px;
background: rgba(255,255,255,0.04);
display: flex; align-items: center; justify-content: center;
color: var(--euvic-cyan);
transition: all 0.2s;
}
.sn-section--markus .sn-ico { color: var(--sp-markus); }
.sn-section--bastian .sn-ico { color: var(--sp-bastian); }
.sn-section--thomas .sn-ico { color: var(--sp-thomas); }
.sn-section.current .sn-ico { background: rgba(255,255,255,0.08); }
.sn-lbl {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 10px; font-weight: 600;
text-align: center; line-height: 1.15;
letter-spacing: 0.02em;
}
.sn-who {
font-size: 9px;
color: var(--euvic-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sn-tools {
display: flex; gap: 6px; padding-top: 14px;
border-top: 1px solid var(--euvic-border);
}
.sn-tool {
flex: 1; height: 40px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--euvic-border);
border-radius: 8px;
color: var(--euvic-muted);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
}
.sn-tool:hover, .sn-tool:active {
background: rgba(255,255,255,0.07);
color: var(--euvic-cyan);
border-color: var(--euvic-cyan);
}
/* ==========================================================
FLOATING TOUCH NAV (big thumb-reach buttons)
========================================================== */
.touch-nav {
position: fixed;
top: 20px; right: 24px;
display: flex; align-items: center; gap: 8px;
z-index: 95;
transition: opacity 0.4s, transform 0.4s;
}
body.theater-active .touch-nav { opacity: 0.15; }
body.theater-active .touch-nav:hover { opacity: 1; }
.tn-btn {
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(15,30,54,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--euvic-border);
color: var(--euvic-text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.tn-btn svg { width: 22px; height: 22px; }
.tn-btn:hover, .tn-btn:active {
background: rgba(0,163,224,0.2);
border-color: var(--euvic-cyan);
color: var(--euvic-cyan);
transform: scale(1.05);
}
.tn-btn:active { transform: scale(0.95); }
.tn-info {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--euvic-text);
background: rgba(15,30,54,0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 7px 12px; border-radius: 18px;
border: 1px solid var(--euvic-border);
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
min-width: 58px;
text-align: center;
font-weight: 500;
}
/* ==========================================================
SLIDE BACKGROUND IMAGES (stable Unsplash URLs)
========================================================== */
.has-bg .slide-bg-img {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.2s ease;
filter: saturate(0.7) brightness(0.75) contrast(1.05);
z-index: 0;
}
.has-bg.active .slide-bg-img {
opacity: 0.85;
animation: bgKenBurns 30s ease-in-out infinite alternate;
}
@keyframes bgKenBurns {
0% { transform: scale(1) translate(0,0); }
100% { transform: scale(1.08) translate(-1%,-1%); }
}
.has-bg .slide-bg-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(10,20,36,0.82) 0%, rgba(10,20,36,0.9) 100%);
z-index: 1;
}
.bg-overlay--red { background: linear-gradient(135deg, rgba(10,20,36,0.8) 0%, rgba(229,72,77,0.25) 60%, rgba(10,20,36,0.92) 100%); }
.bg-overlay--violet { background: linear-gradient(135deg, rgba(10,20,36,0.8) 0%, rgba(138,106,229,0.2) 50%, rgba(10,20,36,0.9) 100%); }
.bg-overlay--violet-strong { background: linear-gradient(180deg, rgba(10,20,36,0.65) 0%, rgba(10,20,36,0.92) 70%, rgba(10,20,36,1) 100%); }
.bg-overlay--strong { background: linear-gradient(135deg, rgba(10,20,36,0.9) 0%, rgba(10,20,36,0.97) 100%); }
.bg-overlay--theater { background: radial-gradient(ellipse at center, rgba(0,163,224,0.2) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.98) 100%); }
.bg-overlay--theater-violet { background: radial-gradient(ellipse at center, rgba(138,106,229,0.22) 0%, rgba(0,0,0,0.88) 60%, rgba(0,0,0,1) 100%); }
.has-bg .kn-wrap, .has-bg .ck-wrap, .has-bg .gp-container, .has-bg .invite-container { position: relative; z-index: 2; }
/* ==========================================================
ICON SYSTEM (SVG sprite symbols)
========================================================== */
.icon {
width: 24px; height: 24px;
display: inline-block;
flex-shrink: 0;
stroke-width: 1.5;
vertical-align: middle;
}
.icon-lg { width: 40px; height: 40px; }
.icon-xl { width: 52px; height: 52px; stroke-width: 1.3; }
/* Icon containers with glow on various cards */
.basic-icon-svg { width: 36px; height: 36px; color: var(--euvic-blue); margin-bottom: 12px; }
.intro-icon-svg { width: 44px; height: 44px; color: var(--euvic-blue); margin-bottom: 16px; }
.two-icon-svg { width: 48px; height: 48px; color: var(--euvic-blue); margin-bottom: 20px; }
.svc-icon-svg { width: 32px; height: 32px; color: var(--sp-bastian); margin-bottom: 12px; }
.journey-icon-svg { width: 36px; height: 36px; color: var(--sp-bastian); margin-bottom: 10px; }
.ind-icon { width: 28px; height: 28px; color: var(--sp-bastian); flex-shrink: 0; margin-top: 2px; }
.four-icon-svg { width: 32px; height: 32px; color: var(--euvic-blue); margin-bottom: 14px; }
.three-icon-svg { width: 44px; height: 44px; color: var(--euvic-blue); margin-bottom: 16px; display: block; margin-left: auto; margin-right: auto; }
.disc-icon-svg { width: 36px; height: 36px; color: var(--euvic-blue); margin-bottom: 16px; }
.journey-arr .icon { width: 24px; height: 24px; color: var(--euvic-muted); }
/* ==========================================================
EUVIC LOGO USAGE
========================================================== */
.cover-brand-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 32px;
}
.cover-euvic-logo {
height: 44px;
width: auto;
filter: drop-shadow(0 0 12px rgba(29,161,245,0.3));
}
.cover-x {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 28px;
font-weight: 300;
color: var(--euvic-blue);
opacity: 0.7;
}
.cover-sparkasse {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--euvic-text);
letter-spacing: 0.01em;
}
.sn-logo-img {
width: 88%;
height: auto;
max-height: 28px;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(29,161,245,0.25));
}
.sn-logo-sub {
margin-top: 6px;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--euvic-muted);
text-align: center;
font-weight: 500;
}
.disc-euvic-logo {
height: 36px;
width: auto;
filter: drop-shadow(0 0 12px rgba(29,161,245,0.3));
}
.disc-sparkasse-logo {
height: 48px;
width: auto;
filter: drop-shadow(0 0 12px rgba(255,107,53,0.25));
}
/* ==========================================================
CONTENT IMAGES (prominent, not just background)
========================================================== */
/* Hero image at top of slide */
.hero-image {
width: 100%;
height: 32vh;
max-height: 340px;
border-radius: 16px;
background-size: cover;
background-position: center;
margin-bottom: 28px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
animation: heroFadeIn 0.8s cubic-bezier(0.2,0.8,0.2,1);
}
.hero-image::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(10,20,36,0.4) 100%);
}
@keyframes heroFadeIn {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Split layout: content left, image right */
.slide-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
max-width: 1500px;
margin: 0 auto;
width: 100%;
}
.split-content { min-width: 0; }
.split-image {
height: 60vh;
max-height: 600px;
border-radius: 20px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
animation: splitFadeIn 0.9s cubic-bezier(0.2,0.8,0.2,1);
}
.split-image::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(10,20,36,0) 50%, rgba(10,20,36,0.4) 100%);
pointer-events: none;
}
.split-image--left { order: -1; }
@keyframes splitFadeIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
/* Inline image card (e.g. in cards grid) */
.image-card {
height: 180px;
border-radius: 12px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.image-card::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10,20,36,0.8) 100%);
}
.image-card-label {
position: absolute; bottom: 16px; left: 16px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px; font-weight: 700;
color: white;
z-index: 1;
letter-spacing: 0.04em;
}
/* Decorative side-image (vertical strip on one side) */
.side-image {
position: absolute;
top: 80px; bottom: 80px;
width: 28%;
background-size: cover;
background-position: center;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
z-index: 1;
}
.side-image--right { right: 96px; }
.side-image--left { left: 96px; }
.side-image::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(10,20,36,0.3) 0%, rgba(10,20,36,0) 100%);
}
.side-image--right::after { background: linear-gradient(270deg, rgba(10,20,36,0.3) 0%, rgba(10,20,36,0) 100%); }
/* ===== Speaker portraits (photos with dark-theme treatment) ===== */
/* Treatment filters applied to photos so they blend with dark theme */
.photo-treated {
background-size: cover;
background-position: center top;
filter: saturate(0.85) contrast(1.05) brightness(0.95);
position: relative;
}
.photo-treated::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10,20,36,0.35) 100%);
pointer-events: none;
border-radius: inherit;
}
/* Face-card photo (round portrait on faces slide) */
.face-photo {
width: 140px; height: 140px;
border-radius: 50%;
margin: 0 auto 20px;
border: 3px solid;
box-shadow: 0 14px 36px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.face-photo--bastian { border-color: var(--sp-bastian); box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 0 4px rgba(138,106,229,0.15); }
.face-photo--thomas { border-color: var(--sp-thomas); box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 0 4px rgba(245,184,46,0.15); }
.face-photo--markus { border-color: var(--sp-markus); box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 0 4px rgba(29,161,245,0.15); }
/* The actual ![]()
element for the portrait */
.face-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 20%;
z-index: 2;
filter: saturate(0.88) contrast(1.02);
}
/* Dark vignette overlay on top of image */
.face-photo::after {
content: '';
position: absolute; inset: 0;
border-radius: 50%;
background: linear-gradient(180deg, transparent 55%, rgba(10,20,36,0.45) 100%);
z-index: 3;
pointer-events: none;
}
/* Fallback (only visible if image fails / hides itself via onerror) */
.face-photo .face-fallback {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 44px; font-weight: 700;
color: white;
background: linear-gradient(135deg, #0A1424 0%, var(--sp-markus) 100%);
z-index: 1;
}
.face-photo--bastian .face-fallback { background: linear-gradient(135deg, #0A1424 0%, var(--sp-bastian) 100%); }
.face-photo--thomas .face-fallback { background: linear-gradient(135deg, #0A1424 0%, var(--sp-thomas) 100%); }
/* Speaker transition avatar — large portrait */
.trans-photo {
width: 200px; height: 200px;
border-radius: 50%;
margin: 0 auto 40px;
border: 4px solid;
box-shadow: 0 24px 64px rgba(0,0,0,0.5);
position: relative;
overflow: hidden;
animation: avatarPulse 3s ease-in-out infinite;
}
.trans-photo--bastian { border-color: var(--sp-bastian); }
.trans-photo--markus { border-color: var(--sp-markus); }
.trans-photo--thomas { border-color: var(--sp-thomas); }
.trans-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 15%;
z-index: 2;
filter: saturate(0.9) contrast(1.05);
}
.trans-photo::after {
content: '';
position: absolute; inset: 0;
border-radius: 50%;
background: linear-gradient(180deg, transparent 55%, rgba(10,20,36,0.35) 100%);
z-index: 3;
pointer-events: none;
}
.trans-photo .trans-fallback {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 64px; font-weight: 700;
color: white;
z-index: 1;
}
.trans-photo--bastian .trans-fallback { background: var(--grad-bastian); }
.trans-photo--markus .trans-fallback { background: var(--grad-markus); }
.trans-photo--thomas .trans-fallback { background: var(--grad-thomas); }
/* Cover speaker dot row — small thumbnail chips */
.cov-thumb {
width: 36px; height: 36px;
border-radius: 50%;
flex-shrink: 0;
border: 2px solid;
overflow: hidden;
position: relative;
}
.cov-thumb img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 20%;
filter: saturate(0.85);
}
.cov-thumb--bastian { border-color: var(--sp-bastian); box-shadow: 0 0 10px rgba(138,106,229,0.4); }
.cov-thumb--markus { border-color: var(--sp-markus); box-shadow: 0 0 10px rgba(29,161,245,0.4); }
.cov-thumb--thomas { border-color: var(--sp-thomas); box-shadow: 0 0 10px rgba(245,184,46,0.4); }
.cov-thumb--sparkasse { border-color: var(--euvic-accent); box-shadow: 0 0 10px rgba(255,107,53,0.4); background: var(--grad-accent); }
.cov-thumb--sabine { border-color: var(--euvic-accent); box-shadow: 0 0 10px rgba(255,107,53,0.4); }
/* ==========================================================
ALPINE SILHOUETTE (Hopfgarten motif)
========================================================== */
.alpine-silhouette {
position: absolute;
left: 0; right: 0; bottom: 0;
width: 100%;
height: 35vh;
max-height: 400px;
pointer-events: none;
z-index: 0;
opacity: 0.8;
}
.alpine-silhouette--subtle { opacity: 0.4; height: 25vh; z-index: 2; }
/* ==========================================================
PARTICLES (cover ambience)
========================================================== */
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.particles span {
position: absolute;
width: 4px; height: 4px; border-radius: 50%;
background: var(--euvic-cyan);
opacity: 0.4;
box-shadow: 0 0 8px var(--euvic-cyan);
animation: floatParticle 12s linear infinite;
}
.particles span:nth-child(1) { left: 10%; top: 80%; animation-delay: 0s; animation-duration: 14s; }
.particles span:nth-child(2) { left: 25%; top: 60%; animation-delay: 2s; animation-duration: 16s; background: var(--euvic-violet); box-shadow: 0 0 8px var(--euvic-violet); }
.particles span:nth-child(3) { left: 40%; top: 90%; animation-delay: 4s; animation-duration: 12s; }
.particles span:nth-child(4) { left: 55%; top: 70%; animation-delay: 1s; animation-duration: 18s; background: var(--euvic-gold); box-shadow: 0 0 8px var(--euvic-gold); }
.particles span:nth-child(5) { left: 70%; top: 50%; animation-delay: 3s; animation-duration: 15s; }
.particles span:nth-child(6) { left: 85%; top: 85%; animation-delay: 5s; animation-duration: 13s; background: var(--euvic-violet); box-shadow: 0 0 8px var(--euvic-violet); }
.particles span:nth-child(7) { left: 15%; top: 40%; animation-delay: 6s; animation-duration: 17s; }
.particles span:nth-child(8) { left: 45%; top: 30%; animation-delay: 7s; animation-duration: 14s; background: var(--euvic-gold); box-shadow: 0 0 8px var(--euvic-gold); }
.particles span:nth-child(9) { left: 75%; top: 35%; animation-delay: 8s; animation-duration: 16s; }
.particles span:nth-child(10) { left: 90%; top: 55%; animation-delay: 9s; animation-duration: 12s; background: var(--euvic-violet); box-shadow: 0 0 8px var(--euvic-violet); }
@keyframes floatParticle {
0% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 0.6; }
50% { opacity: 0.8; }
90% { opacity: 0.6; }
100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}
.slide {
position: absolute; inset: 0;
padding: 80px 96px;
opacity: 0;
visibility: hidden;
transform: translateX(30px);
transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2,0.8,0.2,1), visibility 0s 0.55s;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.slide.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2,0.8,0.2,1), visibility 0s 0s;
}
/* ==========================================================
MODE · CINEMATIC (discussion)
========================================================== */
.mode-cinematic { padding: 0; }
/* ==========================================================
MODE · COVER — „Bühne" Layout
========================================================== */
.mode-cover {
padding: 0;
overflow: hidden;
}
/* Hide chrome, touch-nav, and nav-hint on cover for cleaner look */
body.cover-active .chrome,
body.cover-active .touch-nav,
body.cover-active .nav-hint {
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
/* Layered background — photorealistic image + overlays */
.cover-bg-photo {
position: absolute; inset: 0; z-index: 0;
background-image: url('img/cover-bg-1.jpg');
background-size: cover;
background-position: center;
filter: saturate(0.75) contrast(1.1) brightness(0.6);
animation: coverBgZoom 40s ease-in-out infinite alternate;
}
@keyframes coverBgZoom {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.08) translate(-1%, -1%); }
}
.cover-bg-gradient {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 15%, rgba(0,128,199,0.25) 0%, transparent 50%),
radial-gradient(ellipse at 80% 25%, rgba(138,106,229,0.22) 0%, transparent 50%),
radial-gradient(ellipse at 50% 100%, rgba(255,107,53,0.1) 0%, transparent 60%),
linear-gradient(180deg, rgba(10,20,36,0.55) 0%, rgba(10,20,36,0.78) 60%, rgba(10,20,36,0.92) 100%);
z-index: 1;
}
.cover-bg-mesh {
position: absolute; inset: 0; z-index: 2;
background-image:
linear-gradient(rgba(29,161,245,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(29,161,245,0.04) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
opacity: 0.6;
}
.mode-cover .alpine-silhouette { z-index: 2; opacity: 0.55; }
.mode-cover .particles { z-index: 3; }
/* Top sponsor bar — subtle, not dominant */
.cover-sponsors {
position: absolute;
top: 40px; left: 0; right: 0;
display: flex; align-items: center; justify-content: center;
gap: 80px;
z-index: 5;
animation: coverFadeIn 0.9s ease-out 0.1s both;
padding: 14px 48px;
background: linear-gradient(180deg, rgba(10,20,36,0.6) 0%, transparent 100%);
}
.cover-sp {
display: flex; align-items: center; justify-content: center;
}
.cover-sp-logo { max-height: 52px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
.cover-sp-logo--euvic { max-height: 40px; filter: drop-shadow(0 0 16px rgba(29,161,245,0.4)); }
.cover-sp-logo--spk { max-height: 52px; filter: drop-shadow(0 0 14px rgba(255,107,53,0.3)); }
.cover-sp-sep {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--euvic-muted);
opacity: 0.65;
font-weight: 500;
white-space: nowrap;
}
/* Center stage — slightly above center to allow room for speaker strip */
.cover-stage {
position: absolute;
top: 48%; left: 50%;
z-index: 4;
text-align: center;
max-width: 1400px;
width: 100%;
padding: 0 48px;
opacity: 0;
transform: translate(-50%, calc(-50% + 12px));
animation: coverStageIn 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) 0.3s forwards;
}
@keyframes coverStageIn {
to { opacity: 1; transform: translate(-50%, -50%); }
}
.cover-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 18px;
background: rgba(29,161,245,0.08);
border: 1px solid rgba(29,161,245,0.25);
border-radius: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--euvic-blue-bright);
margin-bottom: 36px;
}
.cover-eyebrow-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--euvic-blue-bright);
box-shadow: 0 0 10px currentColor;
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
.cover-huge {
display: flex; flex-direction: column; align-items: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.03em;
margin-bottom: 36px;
}
.cover-line-1 {
font-size: clamp(110px, 14vw, 220px);
background: linear-gradient(180deg, #FFFFFF 0%, #8A9BB0 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
line-height: 0.9;
margin-bottom: 18px;
text-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.cover-divider-bar {
display: block;
width: 72px; height: 3px;
background: linear-gradient(90deg, #E5484D, #1DA1F5);
border-radius: 3px;
margin: 0 0 22px;
opacity: 0.8;
}
.cover-line-2 {
display: flex; flex-wrap: wrap;
align-items: baseline; justify-content: center;
gap: 0.25em;
font-size: clamp(56px, 7vw, 108px);
line-height: 1;
}
.cover-word-fluch,
.cover-word-segen {
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transition: filter 0.6s ease;
}
.cover-word-fluch {
background-image: linear-gradient(180deg, #FFFFFF 0%, #E5484D 100%);
animation: titleHighlight 6s ease-in-out infinite;
}
.cover-word-segen {
background-image: linear-gradient(180deg, #FFFFFF 0%, #1DA1F5 100%);
animation: titleHighlight 6s ease-in-out infinite 3s;
}
.cover-word-or {
font-weight: 300;
font-style: italic;
font-size: 0.6em;
color: var(--euvic-muted);
-webkit-text-fill-color: var(--euvic-muted);
opacity: 0.75;
}
.cover-word-q {
background-image: linear-gradient(180deg, #FFFFFF 0%, #1DA1F5 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: qPulse 2s ease-in-out infinite;
}
@keyframes titleHighlight {
0%, 40% { filter: drop-shadow(0 0 0 transparent) brightness(0.75); }
45%, 55% { filter: drop-shadow(0 0 24px currentColor) brightness(1.15); }
60%, 100% { filter: drop-shadow(0 0 0 transparent) brightness(0.75); }
}
@keyframes qPulse {
0%, 100% { opacity: 0.75; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-4px); }
}
/* ============================================================
HUMORVOLLE ROBOTER-MASKOTTCHEN (Cover)
============================================================ */
.cover-robot {
position: absolute;
right: 6%; bottom: 180px;
z-index: 6;
color: var(--euvic-blue-bright);
animation: robotEnter 1.4s cubic-bezier(0.2, 0.9, 0.2, 1) 1.5s both,
robotFloat 4s ease-in-out 2.9s infinite;
pointer-events: none;
}
.robot-svg {
width: 110px;
height: auto;
display: block;
filter: drop-shadow(0 6px 20px rgba(29,161,245,0.25));
}
/* Blinking eyes */
.robot-eye {
transform-origin: center;
animation: robotBlink 4.5s linear infinite;
}
@keyframes robotBlink {
0%, 92% { transform: scaleY(1); }
94%, 97% { transform: scaleY(0.1); }
100% { transform: scaleY(1); }
}
/* Wiggling antenna */
.robot-antenna-tip {
animation: antennaPulse 2.2s ease-in-out infinite;
transform-origin: center;
}
@keyframes antennaPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; r: 5; }
}
/* Wobbly arms (left and right alternately) */
.robot-arm-l { transform-origin: 17px 82px; animation: robotArmL 4s ease-in-out infinite; }
.robot-arm-r { transform-origin: 83px 82px; animation: robotArmR 4s ease-in-out infinite; }
@keyframes robotArmL {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-12deg); }
}
@keyframes robotArmR {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(12deg); }
}
/* Speech bubble */
.robot-speech {
position: absolute;
right: 90px; top: -8px;
animation: bubbleAppear 0.6s ease-out 3s both;
}
.speech-bubble {
position: relative;
display: inline-block;
padding: 10px 16px;
background: rgba(29,161,245,0.95);
color: #0A1424;
border-radius: 14px 14px 2px 14px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.speech-bubble::after {
content: '';
position: absolute;
right: -6px; bottom: 8px;
width: 0; height: 0;
border-top: 6px solid transparent;
border-left: 10px solid rgba(29,161,245,0.95);
border-bottom: 0;
}
.speech-cycle {
display: inline-block;
position: relative;
min-width: 200px;
height: 18px;
}
.speech-msg {
position: absolute;
top: 0; left: 0;
opacity: 0;
animation: speechCycle 24s linear infinite;
white-space: nowrap;
}
.speech-msg:nth-child(1) { animation-delay: 0s; }
.speech-msg:nth-child(2) { animation-delay: 6s; }
.speech-msg:nth-child(3) { animation-delay: 12s; }
.speech-msg:nth-child(4) { animation-delay: 18s; }
@keyframes speechCycle {
0%, 2% { opacity: 0; transform: translateY(6px); }
4%, 22% { opacity: 1; transform: translateY(0); }
24%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes robotEnter {
from { opacity: 0; transform: translateY(40px) rotate(-8deg); }
to { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes robotFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes bubbleAppear {
from { opacity: 0; transform: translateY(8px) scale(0.8); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Hide robot on narrow screens */
@media (max-width: 1100px) {
.cover-robot { display: none; }
}
.cover-tagline {
font-size: clamp(16px, 1.3vw, 20px);
color: var(--euvic-muted);
line-height: 1.6;
max-width: 720px;
margin: 0 auto;
}
/* Speaker strip at bottom */
.cover-strip {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 24px 48px 28px;
background: linear-gradient(180deg, transparent 0%, rgba(10,20,36,0.7) 50%, rgba(10,20,36,0.95) 100%);
z-index: 5;
animation: coverFadeIn 1s ease-out 0.5s both;
}
.cover-strip-speakers {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 24px;
max-width: 1600px; margin: 0 auto;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.cov-speaker {
display: flex; align-items: center; gap: 12px;
font-size: 13px; line-height: 1.3;
min-width: 0;
}
.cov-speaker b { color: var(--euvic-text); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cov-speaker span { color: var(--euvic-muted); font-size: 12px; }
@keyframes coverFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Discussion slide */
.disc-container { max-width: 1200px; text-align: center; width: 100%; padding: 80px 96px; margin: auto;
background: radial-gradient(ellipse at center, rgba(0,163,224,0.1) 0%, transparent 65%);
position: relative; z-index: 2; }
/* Floating emojis/punctuation rising from bottom — humorvolle Aufsteiger */
.disc-floaters {
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.floater {
position: absolute;
bottom: -80px;
left: var(--l);
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(32px, 3.5vw, 56px);
color: var(--euvic-blue-bright);
opacity: 0;
animation: floaterRise var(--dur, 10s) ease-in-out var(--d, 0s) infinite;
text-shadow: 0 0 20px rgba(29,161,245,0.4);
user-select: none;
}
@keyframes floaterRise {
0% { bottom: -80px; opacity: 0; transform: translateX(0) rotate(-8deg); }
10% { opacity: 0.85; }
50% { transform: translateX(20px) rotate(4deg); }
90% { opacity: 0.4; }
100% { bottom: 110vh; opacity: 0; transform: translateX(-10px) rotate(-4deg); }
}
/* Typing dots next to "Diskussion" */
.disc-typing {
display: inline-flex; align-items: center;
gap: 10px;
margin-left: 24px;
vertical-align: middle;
transform: translateY(-0.35em);
}
.disc-typing span {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--euvic-blue-bright);
box-shadow: 0 0 16px rgba(29,161,245,0.5);
animation: typeDot 1.4s ease-in-out infinite;
}
.disc-typing span:nth-child(2) { animation-delay: 0.2s; }
.disc-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typeDot {
0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
30% { transform: translateY(-14px); opacity: 1; }
}
.disc-eyebrow { font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--euvic-cyan); margin-bottom: 24px; }
.disc-h {
font-size: clamp(80px, 12vw, 180px);
font-weight: 800; line-height: 0.9; margin-bottom: 56px;
background: linear-gradient(180deg, #FFFFFF 0%, #6C7A89 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; }
.disc-card { padding: 36px 28px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; text-align: center; }
.disc-icon { font-size: 36px; margin-bottom: 16px; }
.disc-h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.disc-t { color: var(--euvic-muted); font-size: 15px; }
.disc-foot { margin-top: 40px; }
/* ===== Magic-8-Ball: Frag die KI ===== */
.disc-magic {
max-width: 700px;
margin: 20px auto 32px;
padding: 28px 32px;
background: linear-gradient(135deg, rgba(138,106,229,0.12) 0%, rgba(29,161,245,0.08) 100%);
border: 1px solid rgba(138,106,229,0.3);
border-radius: 20px;
text-align: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.magic-label {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600;
color: var(--sp-bastian);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
opacity: 0.9;
}
.magic-label .icon { width: 16px; height: 16px; }
.magic-btn {
padding: 14px 28px;
background: linear-gradient(135deg, var(--sp-bastian) 0%, var(--euvic-blue-bright) 100%);
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px; font-weight: 700;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
box-shadow: 0 8px 24px rgba(138,106,229,0.35);
letter-spacing: 0.02em;
}
.magic-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 14px 32px rgba(138,106,229,0.5);
}
.magic-btn:active { transform: translateY(0) scale(0.98); }
.magic-btn.shaking { animation: ballShake 0.5s ease-in-out; }
@keyframes ballShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-8px) rotate(-4deg); }
40% { transform: translateX(8px) rotate(4deg); }
60% { transform: translateX(-6px) rotate(-2deg); }
80% { transform: translateX(6px) rotate(2deg); }
}
.magic-answer {
margin-top: 20px;
min-height: 48px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(18px, 1.8vw, 22px);
font-weight: 600;
line-height: 1.4;
color: var(--euvic-text);
font-style: italic;
}
.magic-answer.shown { animation: answerReveal 0.7s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes answerReveal {
from { opacity: 0; transform: translateY(10px) scale(0.95); filter: blur(8px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.magic-answer::before {
content: '"';
display: inline-block;
font-size: 1.6em;
color: var(--sp-bastian);
opacity: 0.5;
margin-right: 4px;
vertical-align: -0.2em;
line-height: 0;
}
.magic-answer::after {
content: '"';
display: inline-block;
font-size: 1.6em;
color: var(--sp-bastian);
opacity: 0.5;
margin-left: 4px;
vertical-align: -0.2em;
line-height: 0;
}
.magic-answer:empty::before, .magic-answer:empty::after { display: none; }
/* ===== Applaus-Meter ===== */
.disc-applause {
display: flex; align-items: center; gap: 20px;
max-width: 700px;
margin: 0 auto 36px;
padding: 20px 24px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--euvic-border);
border-radius: 18px;
}
.applause-btn {
padding: 14px 24px;
background: linear-gradient(135deg, var(--euvic-accent) 0%, var(--euvic-gold) 100%);
color: #0A1424;
border: none;
border-radius: 12px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px; font-weight: 800;
cursor: pointer;
display: flex; flex-direction: column; align-items: center;
gap: 2px;
box-shadow: 0 6px 18px rgba(255,107,53,0.3);
transition: all 0.15s;
min-width: 100px;
flex-shrink: 0;
}
.applause-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,107,53,0.45); }
.applause-btn:active { transform: translateY(0) scale(0.95); }
.applause-btn.clapping { animation: clap 0.15s ease-out; }
@keyframes clap {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12) rotate(-4deg); }
}
.applause-emoji { font-size: 28px; line-height: 1; }
.applause-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.applause-meter { flex: 1; min-width: 0; }
.applause-meter-bar {
height: 12px; background: rgba(255,255,255,0.08);
border-radius: 6px; overflow: hidden;
margin-bottom: 8px;
}
.applause-meter-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg,
#22C55E 0%,
#F5B82E 40%,
#FF6B35 70%,
#E5484D 100%);
border-radius: 6px;
transition: width 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.applause-meter-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--euvic-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ===== Confetti canvas ===== */
.disc-confetti {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 10;
}
.disc-logos { display: flex; gap: 20px; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 600; }
.disc-x { font-weight: 300; color: var(--euvic-cyan); font-size: 24px; }
/* ==========================================================
MODE · TRANSITION (speaker handoff)
========================================================== */
.mode-transition {
justify-content: center; align-items: center; text-align: center;
padding: 80px 96px;
}
.trans-glow { position: absolute; inset: 0; pointer-events: none; }
.trans-glow--markus { background: radial-gradient(ellipse at center, rgba(0,163,224,0.22) 0%, transparent 60%); }
.trans-glow--bastian { background: radial-gradient(ellipse at center, rgba(138,106,229,0.22) 0%, transparent 60%); }
.trans-glow--thomas { background: radial-gradient(ellipse at center, rgba(245,184,46,0.20) 0%, transparent 60%); }
.trans-glow::after {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.trans-content { position: relative; z-index: 1; }
.trans-avatar {
width: 180px; height: 180px; border-radius: 50%;
margin: 0 auto 40px;
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 64px; font-weight: 700;
color: white;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
animation: avatarPulse 3s ease-in-out infinite;
}
.trans-avatar--markus { background: var(--grad-markus); border: 3px solid var(--sp-markus); }
.trans-avatar--bastian { background: var(--grad-bastian); border: 3px solid var(--sp-bastian); }
.trans-avatar--thomas { background: var(--grad-thomas); border: 3px solid var(--sp-thomas); }
@keyframes avatarPulse {
0%,100% { box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 0 currentColor; }
50% { box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px 8px rgba(255,255,255,0.05); }
}
.trans-who {
font-size: clamp(48px, 6vw, 84px);
font-weight: 800;
font-family: 'Plus Jakarta Sans', sans-serif;
margin-bottom: 16px;
letter-spacing: -0.02em;
background: linear-gradient(180deg, #FFFFFF 0%, #A8BDD4 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.trans-what {
font-size: clamp(18px, 1.5vw, 22px);
color: var(--euvic-muted);
max-width: 640px; margin: 0 auto;
}
/* ==========================================================
MODE · KEYNOTE (Markus — cinematic but content-rich)
========================================================== */
.mode-keynote {
background: var(--grad-dark);
padding: 100px 120px 120px;
}
.mode-keynote::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 10% 0%, rgba(0,163,224,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(0,163,224,0.06) 0%, transparent 50%);
pointer-events: none;
}
.kn-wrap { position: relative; max-width: 1280px; margin: 0 auto; width: 100%; }
.kn-wrap--wide { max-width: 1500px; }
.kn-wrap--center { text-align: center; }
.kn-kicker {
display: inline-block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px; font-weight: 600; letter-spacing: 0.25em;
color: var(--euvic-cyan); text-transform: uppercase;
margin-bottom: 28px;
padding: 4px 12px;
border: 1px solid rgba(0,163,224,0.3);
border-radius: 20px;
background: rgba(0,163,224,0.06);
}
.kn-h2 {
font-size: clamp(40px, 4.5vw, 64px);
margin-bottom: 16px;
background: linear-gradient(180deg, #FFFFFF 0%, #A8BDD4 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1.05;
}
.kn-sub {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(22px, 2vw, 28px);
color: var(--euvic-cyan);
font-weight: 500;
margin-bottom: 28px;
}
.kn-lead {
font-size: clamp(16px, 1.3vw, 20px);
color: var(--euvic-muted);
max-width: 900px;
margin-bottom: 40px;
line-height: 1.55;
}
.kn-lead--hl { color: var(--euvic-text); padding: 20px 24px; border-left: 3px solid var(--euvic-cyan); background: rgba(0,163,224,0.04); border-radius: 0 12px 12px 0; }
.kn-lead--center { margin: 0 auto 40px; }
.kn-word {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(120px, 16vw, 240px);
font-weight: 800; line-height: 0.9;
margin-bottom: 40px;
letter-spacing: -0.05em;
}
.kn-word--fluch {
background: linear-gradient(180deg, #FFFFFF 0%, #E5484D 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.kn-word-small {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(52px, 6vw, 88px);
font-weight: 800; line-height: 1;
margin-bottom: 32px;
background: linear-gradient(180deg, #FFFFFF 0%, #A8BDD4 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.kn-ask {
margin-top: 32px;
font-size: clamp(18px, 1.4vw, 22px);
color: var(--euvic-cyan);
font-style: italic;
letter-spacing: 0.01em;
}
.kn-foot {
margin-top: 32px;
padding: 16px 24px;
background: rgba(255,255,255,0.03);
border-left: 2px solid var(--euvic-muted);
font-size: 14px;
color: var(--euvic-muted);
border-radius: 0 8px 8px 0;
}
/* Hook grid in keynote */
.hook-grid--keynote {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
margin-top: 24px;
max-width: 1100px;
}
.hook-quote {
padding: 20px 24px;
background: var(--euvic-card);
border: 1px solid var(--euvic-border);
border-left: 3px solid var(--euvic-red);
border-radius: 0 12px 12px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(17px, 1.4vw, 20px);
font-weight: 500;
line-height: 1.4;
}
.hook-quote:nth-child(2) { border-left-color: var(--euvic-gold); }
.hook-quote:nth-child(3) { border-left-color: var(--euvic-cyan); }
.hook-quote:nth-child(4) { border-left-color: var(--euvic-violet); }
/* Intro grid */
.intro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1000px; }
.intro-card {
padding: 32px;
background: var(--euvic-card);
border: 1px solid var(--euvic-border);
border-radius: 16px;
}
.intro-icon { font-size: 40px; margin-bottom: 16px; }
.intro-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 700; color: var(--euvic-text); margin-bottom: 8px; }
.intro-t { color: var(--euvic-muted); font-size: 16px; }
/* ===== Live Poll ===== */
.poll-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
max-width: 1200px;
align-items: stretch;
}
.poll-options-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.poll-option {
background: var(--euvic-card);
border: 1.5px solid var(--euvic-border);
border-radius: 14px;
padding: 18px 22px;
text-align: left;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
color: inherit;
font-family: inherit;
position: relative;
}
.poll-option:hover:not(.selected):not(.voted):not(:disabled) {
background: var(--euvic-card-hover);
border-color: var(--euvic-blue-bright);
transform: translateX(4px);
}
.poll-option.selected {
border-color: var(--euvic-blue-bright);
background: linear-gradient(135deg, rgba(29,161,245,0.15) 0%, rgba(29,161,245,0.05) 100%);
box-shadow: 0 0 0 3px rgba(29,161,245,0.2);
}
.poll-option.selected::after {
content: '';
position: absolute;
top: 14px; right: 14px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--euvic-blue-bright);
background-image: url("data:image/svg+xml;utf8,");
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
.poll-option:disabled { cursor: not-allowed; opacity: 0.85; }
.poll-option-label {
display: flex; align-items: center; gap: 14px;
font-size: 17px; font-weight: 500;
margin-bottom: 10px;
}
.poll-emoji { font-size: 24px; flex-shrink: 0; }
.poll-option-text { flex: 1; min-width: 0; }
.poll-count {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: var(--euvic-text);
font-variant-numeric: tabular-nums;
padding: 3px 10px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
font-weight: 600;
min-width: 44px; text-align: center;
}
.poll-bar { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.poll-bar-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--euvic-blue) 0%, var(--euvic-blue-bright) 100%);
transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
border-radius: 4px;
}
/* Per-option color coding */
.poll-option[data-vote="fluch"] .poll-bar-fill { background: linear-gradient(90deg, #9E2328 0%, #E5484D 100%); }
.poll-option[data-vote="neutral"] .poll-bar-fill { background: linear-gradient(90deg, #B88A1A 0%, #F5B82E 100%); }
.poll-option[data-vote="segen"] .poll-bar-fill { background: linear-gradient(90deg, var(--euvic-blue) 0%, var(--euvic-blue-bright) 100%); }
/* Vote column */
.poll-vote-col {
display: flex; flex-direction: column; align-items: center;
padding: 28px 24px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--euvic-border);
border-radius: 16px;
text-align: center;
justify-content: space-between;
}
.poll-total {
display: flex; flex-direction: column; align-items: center;
padding: 12px 0 18px;
width: 100%;
border-bottom: 1px solid var(--euvic-border);
margin-bottom: 20px;
}
.poll-total-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 56px; font-weight: 800;
color: var(--euvic-blue-bright);
font-variant-numeric: tabular-nums;
line-height: 1;
text-shadow: 0 0 24px rgba(29,161,245,0.4);
transition: transform 0.3s;
}
.poll-total-num.bump { animation: totalBump 0.5s ease-out; }
@keyframes totalBump {
0% { transform: scale(1); }
40% { transform: scale(1.15); color: #FF6B35; }
100% { transform: scale(1); }
}
.poll-total-lbl {
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--euvic-muted); margin-top: 6px;
}
.poll-submit {
width: 100%;
padding: 18px 24px;
border: none;
border-radius: 14px;
background: linear-gradient(135deg, var(--euvic-blue) 0%, var(--euvic-blue-bright) 100%);
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 17px; font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
gap: 10px;
transition: all 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
box-shadow: 0 8px 24px rgba(29,161,245,0.3);
}
.poll-submit:not(:disabled):hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(29,161,245,0.45);
}
.poll-submit:not(:disabled):active { transform: translateY(0); }
.poll-submit:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
.poll-submit.voted {
background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
box-shadow: 0 8px 24px rgba(34,197,94,0.3);
cursor: default;
opacity: 1;
}
.poll-status {
margin-top: 14px;
font-size: 13px;
color: var(--euvic-muted);
font-style: italic;
min-height: 20px;
}
.poll-status.success { color: #22C55E; font-weight: 600; font-style: normal; }
.poll-status.error { color: var(--euvic-red); font-weight: 600; font-style: normal; }
/* Reset / „Neue Abstimmung starten"-Button (Speaker-Control) */
.poll-reset {
margin-top: 18px;
padding: 8px 14px;
display: inline-flex; align-items: center; gap: 7px;
background: transparent;
border: 1px solid var(--euvic-border);
border-radius: 10px;
color: var(--euvic-muted);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.03em;
cursor: pointer;
transition: all 0.2s;
opacity: 0.7;
}
.poll-reset:hover {
opacity: 1;
background: rgba(255,107,53,0.1);
border-color: var(--euvic-accent);
color: var(--euvic-accent);
}
.poll-reset:active { transform: scale(0.97); }
.poll-reset.confirming {
background: var(--euvic-accent);
border-color: var(--euvic-accent);
color: white;
opacity: 1;
animation: resetPulse 0.4s ease-out;
}
@keyframes resetPulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* QR patterns (kept for other slides) */
.qr-placeholder {
width: 240px; height: 240px; background: white;
border-radius: 12px; padding: 16px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
margin: 0 auto;
}
.qr-pattern {
width: 160px; height: 160px;
background:
conic-gradient(from 0deg at 20% 20%, #000 0% 25%, #fff 25% 50%, #000 50% 75%, #fff 75% 100%),
repeating-linear-gradient(45deg, #000 0, #000 8px, #fff 8px, #fff 16px);
background-blend-mode: multiply;
background-size: 80px 80px, 16px 16px;
border: 3px solid #000;
}
.qr-pattern--small { width: 100px; height: 100px; background-size: 50px 50px, 10px 10px; }
.qr-label { font-size: 12px; color: #000; font-weight: 600; }
.poll-url { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--euvic-cyan); }
/* Timeline */
.timeline {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
margin-top: 24px;
}
.tl-step {
padding: 24px;
background: var(--euvic-card);
border: 1px solid var(--euvic-border);
border-radius: 12px;
position: relative;
}
.tl-step--hl { background: linear-gradient(135deg, rgba(0,163,224,0.1) 0%, rgba(30,58,95,0.08) 100%); border-color: rgba(0,163,224,0.4); }
.tl-num {
position: absolute; top: -12px; left: 24px;
width: 28px; height: 28px; border-radius: 50%;
background: var(--euvic-cyan); color: var(--euvic-dark);
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px;
}
.tl-period { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--euvic-cyan); letter-spacing: 0.05em; margin-bottom: 8px; }
.tl-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; }
.tl-text { font-size: 14px; color: var(--euvic-muted); line-height: 1.5; }
/* Basics grid */
.basics-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
margin-top: 16px;
}
.basic-card {
background: var(--euvic-card); border: 1px solid var(--euvic-border);
border-radius: 12px; padding: 24px 20px; text-align: center;
transition: all 0.3s ease;
}
.basic-card:hover { transform: translateY(-4px); border-color: var(--euvic-cyan); }
.basic-icon { font-size: 36px; margin-bottom: 12px; }
.basic-title { font-weight: 600; margin-bottom: 8px; font-size: 15px; }
.basic-text { font-size: 13px; color: var(--euvic-muted); }
/* Two grid */
.two-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1100px; }
.two-card { padding: 36px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; }
.two-icon { font-size: 44px; margin-bottom: 20px; }
.two-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.two-t { color: var(--euvic-muted); font-size: 16px; line-height: 1.5; }
/* Pillars */
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; }
.pillar-card {
background: var(--euvic-card); border: 1px solid var(--euvic-border);
border-radius: 16px; padding: 28px;
position: relative; padding-top: 44px;
}
.pillar-num {
position: absolute; top: -18px; left: 28px;
width: 48px; height: 48px; border-radius: 12px;
background: var(--grad-primary); color: white;
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 24px;
}
.pillar-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; color: var(--euvic-cyan); margin-bottom: 6px; }
.pillar-sub { font-size: 14px; color: var(--euvic-muted); margin-bottom: 16px; font-style: italic; }
.pillar-card ul { list-style: none; }
.pillar-card li { padding: 8px 0 8px 18px; position: relative; font-size: 14px; line-height: 1.5; border-bottom: 1px solid var(--euvic-border); }
.pillar-card li::before { content: '·'; position: absolute; left: 0; color: var(--euvic-cyan); font-weight: 700; }
.pillar-card li:last-child { border-bottom: none; }
.pillars-note { margin-top: 24px; padding: 14px 20px; background: rgba(255,255,255,0.03); border-radius: 8px; font-size: 14px; color: var(--euvic-muted); font-style: italic; }
/* Bullets 2col */
.bullets-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; margin-top: 12px; max-width: 1100px; }
.bullet { padding: 14px 20px; padding-left: 36px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 10px; font-size: 16px; position: relative; }
.bullet::before { content: '▸'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--euvic-cyan); }
.bullet b { color: var(--euvic-text); }
/* Four grid (big cards) */
.four-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 16px; max-width: 1300px; }
.four-card { padding: 28px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; }
.four-icon { font-size: 32px; margin-bottom: 14px; }
.four-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.four-t { color: var(--euvic-muted); font-size: 14px; line-height: 1.55; }
.four-grid--stripes .four-card { border-left: 3px solid var(--euvic-cyan); }
.four-grid--stripes .four-card:nth-child(2) { border-left-color: var(--euvic-gold); }
.four-grid--stripes .four-card:nth-child(3) { border-left-color: var(--euvic-violet); }
.four-grid--stripes .four-card:nth-child(4) { border-left-color: var(--euvic-accent); }
/* Tools grid */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin-top: 16px; }
.tool-card {
padding: 32px; background: var(--euvic-card); border: 1px solid var(--euvic-border);
border-radius: 16px; border-top: 3px solid var(--euvic-cyan);
transition: all 0.3s ease;
}
.tool-card:nth-child(2) { border-top-color: var(--euvic-gold); }
.tool-card:nth-child(3) { border-top-color: var(--euvic-violet); }
.tool-card:hover { transform: translateY(-4px); }
.tool-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.tool-vendor { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--euvic-cyan); margin-bottom: 16px; letter-spacing: 0.05em; }
.tool-desc { color: var(--euvic-muted); font-size: 14px; line-height: 1.55; }
/* AI Act bullets */
.aiact-bullets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1000px; margin: 20px 0 24px; }
.aiact-b { padding: 14px 20px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-left: 3px solid var(--euvic-cyan); border-radius: 0 10px 10px 0; font-size: 15px; }
/* Three grid */
.three-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin-top: 16px; }
.three-card { padding: 32px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; text-align: center; }
.three-icon { font-size: 44px; margin-bottom: 16px; }
.three-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; color: var(--euvic-cyan); margin-bottom: 12px; }
.three-t { color: var(--euvic-muted); font-size: 14px; line-height: 1.55; }
/* Table 3-col */
.table-3 { margin-top: 20px; border: 1px solid var(--euvic-border); border-radius: 12px; overflow: hidden; }
.t3-head { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 0; background: rgba(0,163,224,0.08); padding: 16px 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--euvic-cyan); }
.t3-head > div { padding: 0 20px; }
.t3-row { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 0; border-top: 1px solid var(--euvic-border); }
.t3-row:hover { background: rgba(255,255,255,0.02); }
.t3-c { padding: 20px; font-size: 14px; line-height: 1.5; border-right: 1px solid var(--euvic-border); }
.t3-c:last-child { border-right: none; }
.t3-h { font-weight: 600; color: var(--euvic-text); }
.t3-ex { color: var(--euvic-muted); font-style: italic; }
/* AI Act Quiz */
.aiact-quiz { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 1100px; margin-bottom: 24px; margin-top: 20px; }
.aiact-question { background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 12px; padding: 18px 22px; transition: border-color 0.2s; }
.aiact-question.answered { border-color: var(--euvic-cyan); }
.aiact-q-text { font-size: 14px; color: var(--euvic-text); margin-bottom: 12px; line-height: 1.4; }
.aiact-q-buttons { display: flex; gap: 8px; }
.aiact-btn { flex: 1; padding: 9px; background: rgba(255,255,255,0.04); border: 1px solid var(--euvic-border); border-radius: 8px; color: var(--euvic-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.aiact-btn:hover { color: var(--euvic-text); border-color: var(--euvic-cyan); }
.aiact-btn.selected-yes { background: rgba(0,163,224,0.2); color: var(--euvic-cyan); border-color: var(--euvic-cyan); }
.aiact-btn.selected-no { background: rgba(229,72,77,0.15); color: var(--euvic-red); border-color: var(--euvic-red); }
.aiact-result { background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 12px; padding: 20px 28px; max-width: 1100px; }
.aiact-result-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--euvic-muted); margin-bottom: 10px; }
.aiact-result-bar { height: 10px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; margin-bottom: 10px; }
.aiact-result-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--euvic-red) 0%, var(--euvic-gold) 50%, var(--euvic-cyan) 100%); transition: width 0.6s ease; border-radius: 5px; }
.aiact-result-text { color: var(--euvic-muted); font-size: 13px; }
/* Ethics list */
.ethics-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 1100px; margin-top: 16px; }
.ethics-item { padding: 22px 24px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-left: 3px solid var(--euvic-cyan); border-radius: 0 12px 12px 0; }
.ethics-item:nth-child(2) { border-left-color: var(--euvic-gold); }
.ethics-item:nth-child(3) { border-left-color: var(--euvic-violet); }
.ethics-item:nth-child(4) { border-left-color: var(--euvic-accent); }
.ethics-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.ethics-t { color: var(--euvic-muted); font-size: 14px; line-height: 1.5; }
/* HIL (Human in the Loop) */
.hil-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1200px; margin-top: 20px; }
.hil-col { padding: 32px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; }
.hil-col--ki { border-top: 3px solid var(--euvic-cyan); }
.hil-col--human { border-top: 3px solid var(--euvic-accent); }
.hil-h-top { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--euvic-cyan); margin-bottom: 12px; }
.hil-col--human .hil-h-top { color: var(--euvic-accent); }
.hil-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.hil-col ul { list-style: none; }
.hil-col li { padding: 10px 0 10px 18px; position: relative; border-bottom: 1px solid var(--euvic-border); font-size: 14px; line-height: 1.4; }
.hil-col li::before { content: '›'; position: absolute; left: 0; color: var(--euvic-cyan); }
.hil-col--human li::before { color: var(--euvic-accent); }
.hil-col li:last-child { border-bottom: none; }
.hil-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--euvic-border); font-size: 13px; color: var(--euvic-muted); font-style: italic; }
.hil-quote { font-size: 18px; font-style: italic; color: var(--euvic-text); padding: 20px; background: rgba(255,107,53,0.06); border-left: 3px solid var(--euvic-accent); border-radius: 0 8px 8px 0; margin-bottom: 20px; }
.hil-comp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 14px; line-height: 1.5; color: var(--euvic-muted); }
.hil-comp b { color: var(--euvic-text); display: block; margin-bottom: 4px; }
/* Change grid */
.change-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1200px; margin-top: 16px; }
.change-card { padding: 32px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; }
.change-card--risk { border-top: 3px solid var(--euvic-red); }
.change-card--chance { border-top: 3px solid var(--euvic-cyan); }
.change-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.change-card ul { list-style: none; }
.change-card li { padding: 10px 0 10px 18px; position: relative; border-bottom: 1px solid var(--euvic-border); font-size: 14px; line-height: 1.5; }
.change-card--risk li::before { content: '!'; color: var(--euvic-red); font-weight: 700; position: absolute; left: 0; }
.change-card--chance li::before { content: '+'; color: var(--euvic-cyan); font-weight: 700; position: absolute; left: 0; }
.change-card li:last-child { border-bottom: none; }
.change-card b { color: var(--euvic-text); }
/* ==========================================================
MODE · COCKPIT (Bastian — dashboard, interactive feel)
========================================================== */
.mode-cockpit {
background:
radial-gradient(ellipse at 20% 30%, rgba(138,106,229,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(0,163,224,0.05) 0%, transparent 50%),
var(--grad-dark);
padding: 80px 96px;
}
.mode-cockpit::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(138,106,229,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(138,106,229,0.04) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
pointer-events: none;
}
.ck-wrap { position: relative; max-width: 1400px; margin: 0 auto; width: 100%; }
.ck-heading { margin-bottom: 32px; }
.ck-h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(36px, 4vw, 56px);
font-weight: 700; letter-spacing: -0.02em;
margin-bottom: 14px;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(168,189,212,0.8) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ck-lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--euvic-muted); max-width: 900px; line-height: 1.55; }
.ck-foot { margin-top: 24px; font-size: 15px; color: var(--euvic-muted); font-style: italic; max-width: 1100px; }
/* Services grid (EUVIC Group) */
.ck-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1100px; }
.ck-svc { padding: 22px 26px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 12px; transition: all 0.25s; }
.ck-svc:hover { background: var(--euvic-card-hover); border-color: var(--sp-bastian); transform: translateX(4px); }
.ck-svc-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.ck-svc-t { color: var(--euvic-muted); font-size: 14px; }
/* World stats */
.world-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1300px; margin-bottom: 40px; }
.world-stat { padding: 32px 24px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; text-align: center; transition: all 0.3s; }
.world-stat:hover { background: var(--euvic-card-hover); border-color: var(--sp-bastian); transform: translateY(-4px); }
.world-stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(42px, 5vw, 72px); font-weight: 800; color: var(--euvic-cyan); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 12px; }
.world-stat-label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--euvic-text); font-weight: 600; margin-bottom: 6px; }
.world-stat-note { font-size: 12px; color: var(--euvic-muted); line-height: 1.4; }
.world-clients { max-width: 1300px; padding-top: 24px; border-top: 1px solid var(--euvic-border); }
.world-clients-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--euvic-muted); margin-bottom: 14px; }
.world-clients-list { display: flex; flex-wrap: wrap; gap: 28px; }
.world-clients-list span { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; color: var(--euvic-text); opacity: 0.6; transition: opacity 0.2s, color 0.2s; cursor: default; }
.world-clients-list span:hover { opacity: 1; color: var(--sp-bastian); }
/* Portals — 4 Austrian EUVIC companies */
.portals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1400px; }
.portals-grid--4 { grid-template-columns: repeat(4, 1fr); }
.portal {
padding: 36px 28px;
background: var(--euvic-card);
border: 1px solid var(--euvic-border);
border-radius: 16px;
text-align: left;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.portal::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--sp-bastian);
opacity: 0.6;
transition: opacity 0.3s, height 0.3s;
}
.portal:hover::before { opacity: 1; height: 4px; }
.portal:hover { background: var(--euvic-card-hover); transform: translateY(-6px); border-color: var(--sp-bastian); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.portal--hl { background: linear-gradient(135deg, rgba(138,106,229,0.18) 0%, rgba(0,128,199,0.1) 100%); border-color: rgba(138,106,229,0.5); }
.portal--hl::before { background: linear-gradient(90deg, var(--sp-bastian), var(--euvic-blue)); opacity: 1; }
.portal-icon-wrap {
width: 56px; height: 56px;
border-radius: 14px;
background: rgba(138,106,229,0.1);
display: flex; align-items: center; justify-content: center;
color: var(--sp-bastian);
margin-bottom: 20px;
}
.portal--hl .portal-icon-wrap { background: rgba(138,106,229,0.2); }
.portal-brand {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px; font-weight: 800;
color: var(--euvic-text);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.portal-desc { font-size: 13px; color: var(--euvic-muted); line-height: 1.5; margin-bottom: 12px; }
.portal-subbrand {
display: inline-block;
padding: 3px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; font-weight: 500;
background: rgba(138,106,229,0.12);
color: var(--sp-bastian);
border-radius: 8px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.portal--hl .portal-subbrand { background: rgba(245,184,46,0.15); color: var(--euvic-gold); }
/* Eco-card icon-svg wrapper */
.eco-icon-svg {
width: 60px; height: 60px;
border-radius: 14px;
background: rgba(138,106,229,0.1);
display: flex; align-items: center; justify-content: center;
color: var(--sp-bastian);
margin-bottom: 18px;
}
.eco-card--highlight .eco-icon-svg { background: rgba(0,128,199,0.15); color: var(--euvic-blue); }
/* Worlds grid */
.worlds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1200px; }
.world-card { padding: 36px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; }
.world-badge { display: inline-block; padding: 6px 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 16px; background: rgba(138,106,229,0.1); border: 1px solid rgba(138,106,229,0.3); border-radius: 20px; margin-bottom: 20px; }
.world-card:nth-child(2) .world-badge { background: rgba(0,163,224,0.1); border-color: rgba(0,163,224,0.3); }
.world-card ul { list-style: none; }
.world-card li { padding: 12px 0 12px 20px; position: relative; border-bottom: 1px solid var(--euvic-border); font-size: 15px; }
.world-card li::before { content: '›'; position: absolute; left: 0; color: var(--sp-bastian); font-weight: 700; }
.world-card:nth-child(2) li::before { color: var(--euvic-cyan); }
.world-card li:last-child { border-bottom: none; }
/* Services grid (Leistungen – 6 items) */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1300px; }
.svc-card { padding: 28px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 14px; transition: all 0.3s; }
.svc-card:hover { transform: translateY(-4px); border-color: var(--sp-bastian); }
.svc-icon { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; color: var(--sp-bastian); margin-bottom: 12px; }
.svc-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.svc-t { color: var(--euvic-muted); font-size: 14px; line-height: 1.5; }
/* Journey */
.journey { display: flex; align-items: center; gap: 12px; max-width: 1300px; margin-top: 20px; }
.journey-step {
flex: 1; padding: 24px 20px; background: var(--euvic-card);
border: 1px solid var(--euvic-border); border-radius: 14px;
text-align: center; transition: all 0.3s;
display: flex; flex-direction: column; align-items: center;
}
.journey-step:hover { background: var(--euvic-card-hover); transform: translateY(-4px); border-color: var(--sp-bastian); }
.journey-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.journey-t { font-size: 13px; color: var(--euvic-muted); line-height: 1.4; }
.journey-arr { color: var(--euvic-muted); display: flex; align-items: center; }
/* Industries */
.industries { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1200px; }
.ind { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 12px; transition: all 0.25s; }
.ind:hover { border-color: var(--sp-bastian); background: var(--euvic-card-hover); }
.ind--hl { border-color: rgba(138,106,229,0.4); background: linear-gradient(135deg, rgba(138,106,229,0.1) 0%, rgba(0,163,224,0.06) 100%); }
.ind-arr { font-size: 22px; color: var(--sp-bastian); flex-shrink: 0; }
.ind svg.icon { color: var(--sp-bastian); }
.ind-h { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.ind-t { color: var(--euvic-muted); font-size: 14px; }
/* Ecosystem (4 Austrian companies) */
.ecosystem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1400px; }
.eco-card {
padding: 36px 28px; background: var(--euvic-card); border: 1px solid var(--euvic-border);
border-radius: 16px; position: relative; transition: all 0.3s;
}
.eco-card:hover { background: var(--euvic-card-hover); transform: translateY(-6px); border-color: var(--sp-bastian); }
.eco-card--highlight { background: linear-gradient(135deg, rgba(138,106,229,0.18) 0%, rgba(0,163,224,0.1) 100%); border-color: rgba(138,106,229,0.5); }
.eco-icon { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 36px; font-weight: 800; color: var(--sp-bastian); margin-bottom: 16px; }
.eco-card--highlight .eco-icon { color: var(--euvic-cyan); }
.eco-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.eco-desc { font-size: 13px; color: var(--euvic-muted); line-height: 1.5; }
.eco-badge { position: absolute; top: -10px; right: 16px; padding: 4px 10px; background: var(--euvic-accent); color: white; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
/* Faces */
.faces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 32px; max-width: 1200px; }
.face-card { padding: 32px; background: var(--euvic-card); border: 1px solid var(--euvic-border); border-radius: 16px; text-align: center; transition: all 0.3s; }
.face-card:hover { transform: translateY(-6px); border-color: var(--sp-bastian); }
.face-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 32px; font-weight: 700; color: white; }
.face-avatar--bastian { background: var(--grad-bastian); }
.face-avatar--thomas { background: var(--grad-thomas); }
.face-avatar--markus { background: var(--grad-markus); }
.face-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.face-role { font-size: 14px; color: var(--euvic-muted); margin-bottom: 12px; }
.face-tag { display: inline-block; padding: 4px 12px; background: rgba(138,106,229,0.1); border: 1px solid rgba(138,106,229,0.3); border-radius: 12px; font-size: 11px; font-weight: 500; color: var(--sp-bastian); }
.story-quote { padding: 20px 28px; border-left: 3px solid var(--sp-bastian); background: rgba(138,106,229,0.06); border-radius: 0 12px 12px 0; font-size: 17px; color: var(--euvic-text); font-style: italic; line-height: 1.5; max-width: 1100px; }
/* Demo grid (Thomas — live demos overview) */
.demo-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px;
background: rgba(245,184,46,0.12);
border: 1px solid rgba(245,184,46,0.35);
border-radius: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-thomas);
margin-bottom: 18px;
}
.demo-eyebrow .icon { width: 14px; height: 14px; }
.demo-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
margin-bottom: 24px;
}
.demo-card {
position: relative;
padding: 32px 28px;
background: var(--euvic-card);
border: 1px solid var(--euvic-border);
border-radius: 18px;
transition: all 0.3s;
display: flex; flex-direction: column;
}
.demo-card:hover {
background: var(--euvic-card-hover);
transform: translateY(-6px);
border-color: var(--sp-thomas);
box-shadow: 0 24px 50px rgba(0,0,0,0.3);
}
.demo-card--featured {
background: linear-gradient(135deg, rgba(245,184,46,0.12) 0%, rgba(255,107,53,0.06) 100%);
border-color: rgba(245,184,46,0.4);
}
.demo-badge {
position: absolute; top: -10px; left: 24px;
padding: 5px 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 10px;
color: white;
}
.demo-badge--ai { background: var(--sp-thomas); color: var(--euvic-dark); }
.demo-badge--hero { background: linear-gradient(90deg, var(--sp-thomas), var(--euvic-accent)); color: var(--euvic-dark); }
.demo-icon-wrap {
width: 64px; height: 64px;
border-radius: 16px;
background: rgba(245,184,46,0.12);
color: var(--sp-thomas);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.demo-card--featured .demo-icon-wrap { background: rgba(245,184,46,0.22); }
.demo-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 28px; font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.demo-client {
font-size: 13px;
color: var(--sp-thomas);
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.demo-desc {
font-size: 14px;
color: var(--euvic-muted);
line-height: 1.55;
flex: 1;
}
.demo-foot {
display: flex; align-items: center; gap: 14px;
padding: 18px 24px;
background: linear-gradient(135deg, rgba(245,184,46,0.08) 0%, rgba(255,107,53,0.05) 100%);
border: 1px solid rgba(245,184,46,0.25);
border-radius: 14px;
font-size: 15px;
color: var(--euvic-text);
}
.demo-foot .icon { color: var(--sp-thomas); width: 22px; height: 22px; flex-shrink: 0; }
.demo-foot b { color: var(--sp-thomas); font-weight: 700; }
@media (max-width: 1024px) {
.demo-grid { grid-template-columns: 1fr; }
}
/* Project placeholders (Thomas) */
.project-slot { max-width: 1200px; padding: 60px; background: var(--euvic-card); border: 2px dashed var(--euvic-border); border-radius: 20px; text-align: center; }
.project-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--sp-thomas); letter-spacing: 0.2em; margin-bottom: 20px; }
.project-placeholder { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--euvic-muted); margin-bottom: 40px; }
.project-hints { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ph-card { padding: 20px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.15); border-radius: 10px; font-size: 13px; color: var(--euvic-muted); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; letter-spacing: 0.05em; }
/* ==========================================================
EUVIC BLOCK · distinct layout (International + Österreich)
========================================================== */
.euvic-block {
padding-top: 70px !important;
}
/* Top EUVIC header strip */
.euvic-header {
position: absolute;
top: 24px; left: 96px; right: 96px;
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid rgba(29,161,245,0.18);
z-index: 5;
}
.euvic-header-logo {
height: 18px; width: auto;
filter: drop-shadow(0 0 8px rgba(29,161,245,0.25));
opacity: 0.95;
}
.euvic-header-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--euvic-blue-bright);
opacity: 0.9;
}
/* Block variants — tint meta */
.euvic-block--intl .euvic-header-meta { color: var(--euvic-blue-bright); }
.euvic-block--at .euvic-header-meta { color: var(--sp-bastian); }
.euvic-block--bridge .euvic-header-meta { color: var(--euvic-cyan-soft); }
/* Distinct EUVIC tint (additive — does NOT replace mode-cockpit background) */
.euvic-block .ck-wrap {
position: relative;
z-index: 3;
}
.euvic-block--intl { box-shadow: inset 0 0 0 9999px rgba(29,161,245,0.04); }
.euvic-block--at { box-shadow: inset 0 0 0 9999px rgba(138,106,229,0.04); }
.bg-overlay--euvic {
background: linear-gradient(135deg, rgba(10,30,54,0.88) 0%, rgba(29,161,245,0.18) 50%, rgba(10,20,36,0.94) 100%);
}
.bg-overlay--euvic-at {
background: linear-gradient(135deg, rgba(10,20,36,0.85) 0%, rgba(138,106,229,0.2) 50%, rgba(10,20,36,0.94) 100%);
}
/* ===== EUVIC Group service rows with icons ===== */
.euvic-services .ck-svc {
display: flex; align-items: flex-start; gap: 16px;
padding: 22px 26px;
}
.ck-svc-icon { width: 28px; height: 28px; color: var(--euvic-blue-bright); flex-shrink: 0; margin-top: 2px; }
/* World stats ticker */
.world-ticker {
margin-top: 32px;
padding: 14px 22px;
background: rgba(29,161,245,0.06);
border: 1px solid rgba(29,161,245,0.18);
border-radius: 12px;
text-align: center;
}
.world-ticker-label {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--euvic-blue-bright);
letter-spacing: 0.1em;
}
/* Intl split (Branchen + Referenzen combined) */
.intl-split {
display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px;
margin-top: 16px;
}
.intl-col-h {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--euvic-blue-bright);
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(29,161,245,0.2);
}
.intl-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.intl-br {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--euvic-border);
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
}
.intl-br:hover { background: rgba(29,161,245,0.08); border-color: var(--euvic-blue-bright); }
.intl-br .icon { width: 18px; height: 18px; color: var(--euvic-blue-bright); flex-shrink: 0; }
.intl-logos {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 24px;
}
.intl-logos span {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px; font-weight: 700;
color: var(--euvic-text);
padding: 8px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--euvic-border);
border-radius: 8px;
transition: all 0.2s;
}
.intl-logos span:hover {
background: rgba(29,161,245,0.1);
border-color: var(--euvic-blue-bright);
color: var(--euvic-blue-bright);
}
.intl-proof {
padding: 18px 20px;
background: rgba(29,161,245,0.06);
border-left: 3px solid var(--euvic-blue-bright);
border-radius: 0 10px 10px 0;
display: flex; flex-direction: column; gap: 10px;
}
.intl-proof-item {
display: flex; align-items: baseline; gap: 12px;
font-size: 14px; color: var(--euvic-text);
}
.intl-proof-item b {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px; font-weight: 800;
color: var(--euvic-blue-bright);
min-width: 90px;
}
.intl-proof-item span { color: var(--euvic-muted); font-style: italic; font-size: 13px; margin-left: auto; }
/* ===== Austria Branches (Public · Bau · Healthcare · Dienstleister) ===== */
.at-branches {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.at-branches--4 {
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.at-branches--4 .at-br { padding: 28px 22px; }
.at-branches--4 .at-br-name { font-size: 26px; }
.at-branches--4 .at-br-icon-wrap { width: 56px; height: 56px; margin-bottom: 16px; }
.at-branches--4 .at-br-desc { font-size: 13px; line-height: 1.55; }
.at-branches--4 .at-br-stat { font-size: 12px; padding: 8px 12px; }
.at-br {
padding: 36px 28px;
background: var(--euvic-card);
border: 1px solid var(--euvic-border);
border-radius: 18px;
transition: all 0.3s;
position: relative;
display: flex; flex-direction: column;
}
.at-br:hover {
background: var(--euvic-card-hover);
transform: translateY(-6px);
border-color: var(--sp-bastian);
box-shadow: 0 24px 50px rgba(0,0,0,0.3);
}
.at-br--featured {
background: linear-gradient(135deg, rgba(138,106,229,0.15) 0%, rgba(29,161,245,0.08) 100%);
border-color: rgba(138,106,229,0.45);
}
.at-br-icon-wrap {
width: 64px; height: 64px;
border-radius: 16px;
background: rgba(138,106,229,0.12);
color: var(--sp-bastian);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.at-br--featured .at-br-icon-wrap { background: rgba(138,106,229,0.22); }
.at-br-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 30px; font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.at-br-sub {
font-size: 13px;
color: var(--sp-bastian);
font-weight: 500;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.at-br-desc {
font-size: 14px;
color: var(--euvic-muted);
line-height: 1.6;
margin-bottom: 18px;
flex: 1;
}
.at-br-stat {
padding: 10px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--euvic-border);
border-radius: 8px;
font-size: 13px;
color: var(--euvic-text);
}
.at-br-stat b { color: var(--sp-bastian); font-weight: 800; }
/* ===== Austria References ===== */
.at-refs {
display: flex; flex-direction: column; gap: 14px;
margin-bottom: 20px;
}
.at-refs--4 {
display: grid; grid-template-columns: 1fr 1fr;
gap: 14px;
}
.at-ref-group {
padding: 16px 20px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--euvic-border);
border-radius: 14px;
}
.at-ref-group--featured {
background: linear-gradient(135deg, rgba(138,106,229,0.12) 0%, rgba(29,161,245,0.06) 100%);
border-color: rgba(138,106,229,0.4);
}
.at-ref-group-h {
display: flex; align-items: center; gap: 10px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px; font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sp-bastian);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--euvic-border);
}
.at-ref-group-h .icon { width: 18px; height: 18px; }
.at-ref-logos {
display: flex; flex-wrap: wrap; gap: 8px;
}
.at-logo {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px; font-weight: 600;
color: var(--euvic-text);
padding: 7px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--euvic-border);
border-radius: 8px;
transition: all 0.2s;
letter-spacing: 0.01em;
}
.at-logo:hover {
background: rgba(138,106,229,0.12);
border-color: var(--sp-bastian);
color: var(--euvic-text);
}
.at-logo--featured {
background: linear-gradient(135deg, rgba(138,106,229,0.18) 0%, rgba(29,161,245,0.08) 100%);
border-color: rgba(138,106,229,0.45);
font-weight: 800;
color: white;
}
.at-trust {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
padding: 18px 22px;
background: rgba(29,161,245,0.05);
border: 1px solid rgba(29,161,245,0.18);
border-radius: 12px;
}
.at-trust-item {
display: flex; align-items: center; gap: 12px;
font-size: 13px; line-height: 1.35;
color: var(--euvic-text);
}
.at-trust-item .icon { color: var(--euvic-blue-bright); width: 22px; height: 22px; flex-shrink: 0; }
.at-trust-item b { color: var(--euvic-blue-bright); font-weight: 700; }
/* Responsive */
@media (max-width: 1024px) {
.intl-split { grid-template-columns: 1fr; gap: 28px; }
.intl-branches { grid-template-columns: 1fr; }
.at-branches { grid-template-columns: 1fr; }
.at-trust { grid-template-columns: 1fr; }
.euvic-header { left: 48px; right: 48px; }
}
/* Old Referenzen slide */
.refs-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; margin-bottom: 28px; }
.ref-card {
position: relative;
padding: 28px; background: var(--euvic-card);
border: 1px solid var(--euvic-border);
border-radius: 16px;
transition: all 0.3s;
}
.ref-card:hover { background: var(--euvic-card-hover); transform: translateY(-4px); border-color: var(--sp-bastian); }
.ref-card--featured {
background: linear-gradient(135deg, rgba(138,106,229,0.15) 0%, rgba(0,128,199,0.08) 100%);
border-color: rgba(138,106,229,0.4);
}
.ref-badge {
position: absolute; top: -10px; left: 24px;
padding: 4px 12px;
background: var(--sp-bastian); color: white;
border-radius: 10px;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase;
}
.ref-icon-wrap {
width: 48px; height: 48px; border-radius: 12px;
background: rgba(138,106,229,0.15);
display: flex; align-items: center; justify-content: center;
color: var(--sp-bastian);
margin-bottom: 18px;
}
.ref-card--featured .ref-icon-wrap { background: rgba(138,106,229,0.25); }
.ref-h {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px; font-weight: 800;
margin-bottom: 6px;
}
.ref-sub { font-size: 13px; color: var(--sp-bastian); margin-bottom: 14px; font-weight: 500; }
.ref-list { list-style: none; }
.ref-list li {
padding: 6px 0 6px 16px; position: relative;
font-size: 14px; line-height: 1.4; color: var(--euvic-text);
}
.ref-list li::before {
content: '›'; position: absolute; left: 0;
color: var(--sp-bastian); font-weight: 700;
}
.ref-list li b { color: var(--euvic-text); font-weight: 700; }
.ref-logos {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 8px;
}
.ref-logos span {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px; font-weight: 600;
color: var(--euvic-text);
opacity: 0.85;
padding: 5px 12px;
background: rgba(255,255,255,0.04);
border-radius: 8px;
border: 1px solid var(--euvic-border);
}
.ref-awards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
padding: 20px 24px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--euvic-border);
border-radius: 12px;
}
.ref-award {
display: flex; align-items: center; gap: 12px;
font-size: 14px; color: var(--euvic-text);
line-height: 1.3;
}
.ref-award .icon { color: var(--sp-bastian); width: 22px; height: 22px; flex-shrink: 0; }
.ref-award b { color: var(--euvic-text); font-weight: 700; }
/* Transition slides with subtle background */
.slide-bg-img--transition { opacity: 0.35 !important; filter: saturate(0.3) brightness(0.4) blur(3px) contrast(1.1); }
/* ==========================================================
MODE · THEATER (Aqua video, Good People claim, invite)
========================================================== */
.mode-theater {
background: #000;
padding: 40px;
justify-content: center;
align-items: center;
text-align: center;
}
/* Good People claim */
.gp-container { max-width: 1100px; position: relative; z-index: 1; }
.slide.mode-theater:has(.gp-container) {
background: radial-gradient(ellipse at center, rgba(0,163,224,0.18) 0%, #000 70%);
}
.gp-claim {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(64px, 9vw, 140px);
font-weight: 800; line-height: 1;
background: linear-gradient(180deg, #FFFFFF 0%, #A8BDD4 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 32px;
}
.gp-claim-light { font-weight: 300; color: var(--euvic-cyan); -webkit-text-fill-color: var(--euvic-cyan); }
.gp-sub { font-size: clamp(16px, 1.4vw, 22px); color: var(--euvic-muted); letter-spacing: 0.05em; }
/* Video */
.slide-video { padding: 0; background: #000; }
.video-frame {
width: 100%; height: 100%;
max-width: none;
aspect-ratio: unset;
border-radius: 0;
overflow: hidden;
position: relative;
}
/* Bordered video (for AI-Markus-Video slide — nicht fullscreen) */
.video-frame--bordered {
width: min(72vw, 1100px);
height: auto;
aspect-ratio: 16 / 9;
max-height: 60vh;
border-radius: 16px;
border: 2px solid rgba(29,161,245,0.3);
box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 40px rgba(29,161,245,0.15);
margin: 20px auto 0;
position: relative;
}
/* Video-intro above bordered video */
.video-intro {
text-align: center;
max-width: 900px;
padding: 0 32px;
z-index: 2;
position: relative;
animation: coverFadeIn 0.8s ease-out both;
}
.video-intro-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: rgba(29,161,245,0.12);
border: 1px solid rgba(29,161,245,0.3);
border-radius: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--euvic-blue-bright);
margin-bottom: 20px;
}
.video-intro-eyebrow .icon { width: 14px; height: 14px; }
.video-intro-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(28px, 3.6vw, 48px);
font-weight: 700;
line-height: 1.15;
color: var(--euvic-text);
font-style: italic;
margin-bottom: 0;
}
.video-intro-em {
background: linear-gradient(180deg, #FFFFFF 0%, var(--euvic-blue-bright) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: normal;
font-weight: 900;
}
/* Adjust slide-video for the bordered variant: allow layout */
.slide-video:has(.video-frame--bordered) {
flex-direction: column;
justify-content: center;
padding: 40px 24px;
background:
radial-gradient(ellipse at center, rgba(29,161,245,0.08) 0%, transparent 60%),
#000;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-caption {
position: absolute; bottom: 32px; left: 50%;
transform: translateX(-50%);
text-align: center;
color: var(--euvic-text);
opacity: 0;
transition: opacity 0.3s;
background: rgba(0,0,0,0.6);
padding: 10px 20px;
border-radius: 6px;
backdrop-filter: blur(10px);
}
.slide-video:hover .video-caption { opacity: 1; }
.video-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 600; margin-right: 16px; }
.video-meta { font-size: 12px; color: var(--euvic-muted); }
/* Intermezzo – „Zwischendurch was anderes" */
.intermezzo {
max-width: 900px;
position: relative; z-index: 1;
text-align: center;
}
.intermezzo-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--sp-bastian);
margin-bottom: 28px;
opacity: 0.9;
}
.intermezzo-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(56px, 7vw, 108px);
font-weight: 800; line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 40px;
background: linear-gradient(180deg, #FFFFFF 0%, #A8BDD4 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.intermezzo-em {
font-weight: 300;
font-style: italic;
background: linear-gradient(180deg, #8A6AE5 0%, #1DA1F5 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.intermezzo-divider {
width: 64px; height: 2px;
background: linear-gradient(90deg, transparent, var(--sp-bastian), transparent);
margin: 0 auto 40px;
}
.intermezzo-meet {
display: flex; align-items: center; justify-content: center;
gap: 28px;
margin-bottom: 36px;
}
.intermezzo-brand {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700; font-size: 22px;
color: var(--euvic-text);
line-height: 1.1;
letter-spacing: 0.01em;
}
.intermezzo-brand small {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--euvic-muted);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 4px;
}
.intermezzo-brand--morph { text-align: right; color: white; }
.intermezzo-x {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 40px; font-weight: 200;
color: var(--sp-bastian);
opacity: 0.7;
}
.intermezzo-euvic {
height: 34px; width: auto;
filter: drop-shadow(0 0 12px rgba(29,161,245,0.35));
}
.intermezzo-sub {
font-size: clamp(15px, 1.3vw, 18px);
color: var(--euvic-muted);
line-height: 1.6;
max-width: 640px;
margin: 0 auto;
font-style: italic;
}
/* Video fallback link */
.video-fallback-link {
display: inline-block;
margin-left: 16px;
padding: 4px 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--euvic-cyan);
background: rgba(0,163,224,0.1);
border: 1px solid rgba(0,163,224,0.3);
border-radius: 14px;
text-decoration: none;
transition: all 0.2s;
}
.video-fallback-link:hover {
background: rgba(0,163,224,0.2);
border-color: var(--euvic-cyan);
}
/* Invite-note (no-QR variant) */
.invite-note {
display: inline-block;
padding: 12px 20px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--euvic-border);
border-radius: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--euvic-muted);
letter-spacing: 0.06em;
}
/* ===== Morphing × Mozart × EUVIC info slide ===== */
.invite-mmeuvic { max-width: 1000px; }
.invite-mmeuvic .invite-h {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 16px 20px;
font-size: clamp(44px, 5.5vw, 72px);
line-height: 1.1;
margin-bottom: 14px;
}
.mmeuvic-morph, .mmeuvic-mozart {
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.mmeuvic-morph { background-image: linear-gradient(180deg, #FFFFFF 0%, #8A6AE5 100%); }
.mmeuvic-mozart { background-image: linear-gradient(180deg, #FFFFFF 0%, #F5B82E 100%); }
.mmeuvic-sep {
font-weight: 300;
color: var(--euvic-muted);
-webkit-text-fill-color: var(--euvic-muted);
font-size: 0.7em;
opacity: 0.7;
}
.mmeuvic-logo {
height: 0.7em;
width: auto;
filter: drop-shadow(0 0 16px rgba(29,161,245,0.35));
vertical-align: -0.05em;
}
.mmeuvic-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 28px auto 28px;
max-width: 700px;
}
.mmeuvic-fact {
padding: 18px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--euvic-border);
border-radius: 14px;
text-align: center;
}
.mmeuvic-fact-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(32px, 3.8vw, 48px);
font-weight: 800;
color: var(--sp-bastian);
line-height: 1;
margin-bottom: 6px;
text-shadow: 0 0 20px rgba(138,106,229,0.3);
}
.mmeuvic-fact-lbl {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--euvic-muted);
font-weight: 500;
}
@media (max-width: 900px) {
.mmeuvic-facts { grid-template-columns: 1fr; max-width: 340px; gap: 8px; margin: 20px auto; }
.mmeuvic-fact { padding: 12px 14px; }
.mmeuvic-fact-num { font-size: 32px; }
.invite-mmeuvic .invite-h { flex-direction: column; gap: 8px; font-size: clamp(32px, 8vw, 52px); }
.mmeuvic-sep { display: inline-block; transform: rotate(90deg); font-size: 0.4em; }
.mmeuvic-logo { height: 32px; }
}
/* Invite */
.invite-container { max-width: 900px; position: relative; z-index: 1; }
.slide.mode-theater:has(.invite-container) {
background: radial-gradient(ellipse at center, rgba(138,106,229,0.15) 0%, #000 75%);
}
.invite-eyebrow { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sp-bastian); margin-bottom: 28px; }
.invite-h {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(64px, 8vw, 120px);
font-weight: 800; line-height: 0.95; margin-bottom: 20px;
background: linear-gradient(180deg, #FFFFFF 0%, #8A6AE5 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.invite-date { font-family: 'JetBrains Mono', monospace; font-size: clamp(18px, 1.8vw, 26px); color: var(--euvic-cyan); margin-bottom: 40px; letter-spacing: 0.05em; }
.invite-body { font-size: clamp(16px, 1.4vw, 20px); color: var(--euvic-muted); line-height: 1.6; max-width: 640px; margin: 0 auto 48px; }
.invite-qr { display: inline-flex; align-items: center; gap: 24px; padding: 20px 28px; background: rgba(255,255,255,0.04); border: 1px solid var(--euvic-border); border-radius: 16px; }
.invite-qr-box { width: 120px; height: 120px; background: white; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.invite-qr-text { text-align: left; }
.invite-qr-url { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 600; color: var(--sp-bastian); margin-bottom: 6px; }
.invite-qr-note { font-size: 12px; color: var(--euvic-muted); letter-spacing: 0.05em; }
/* ==========================================================
OVERVIEW
========================================================== */
.overview {
position: fixed; inset: 0;
background: rgba(10,20,36,0.95);
backdrop-filter: blur(20px);
z-index: 200;
padding: 40px;
display: none;
overflow-y: auto;
}
.overview.show { display: block; }
.overview-header { text-align: center; margin-bottom: 32px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--euvic-muted); letter-spacing: 0.15em; text-transform: uppercase; }
.overview-inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-width: 1600px; margin: 0 auto; }
.thumb {
aspect-ratio: 16 / 9;
background: var(--euvic-card);
border: 1px solid var(--euvic-border);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
display: flex; flex-direction: column; justify-content: space-between;
transition: all 0.2s;
overflow: hidden;
font-size: 10px;
position: relative;
}
.thumb:hover { border-color: var(--euvic-cyan); transform: scale(1.03); }
.thumb.current { border-color: var(--euvic-accent); background: rgba(255,107,53,0.1); }
.thumb[data-sp="Markus"] { border-left: 3px solid var(--sp-markus); }
.thumb[data-sp="Bastian"] { border-left: 3px solid var(--sp-bastian); }
.thumb[data-sp="Thomas"] { border-left: 3px solid var(--sp-thomas); }
.thumb-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--euvic-muted); }
.thumb-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 11px; color: var(--euvic-text); line-height: 1.2; }
.thumb-chapter { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--euvic-cyan); }
/* ==========================================================
DESIGN POLISH — global refinements
========================================================== */
/* Refined card hover motion (cubic-bezier feels premium) */
.basic-card, .four-card, .three-card, .tool-card, .eco-card,
.face-card, .portal, .svc-card, .ind, .ck-svc, .journey-step,
.world-stat, .demo-card, .ref-card, .at-br {
transition:
transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
background-color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.32s cubic-bezier(0.2, 0.9, 0.2, 1) !important;
}
/* Consistent shadow hierarchy */
.basic-card:hover, .four-card:hover, .tool-card:hover,
.face-card:hover, .svc-card:hover, .journey-step:hover, .portal:hover {
box-shadow: 0 18px 40px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.05);
}
.eco-card:hover, .world-stat:hover, .ref-card:hover, .at-br:hover, .demo-card:hover {
box-shadow: 0 22px 50px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.05);
}
/* Cleaner link underline animations */
a, .video-fallback-link { -webkit-tap-highlight-color: transparent; }
/* Subtle scroll/fade-in on slide activation for child elements */
.slide.active .ck-heading,
.slide.active .kn-wrap > *:not(:last-child) { animation: contentFadeIn 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.slide.active .ck-heading { animation-delay: 0.1s; }
@keyframes contentFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Typography refinements — tighter headlines, better line-height */
.kn-h2, .ck-h2 { line-height: 1.06; }
.cover-huge, .disc-h, .chapter-h1, .thanks-h1 { font-feature-settings: "ss01", "cv01"; }
/* Remove focus rings that don't fit dark theme — keep for keyboard only via :focus-visible */
button { outline: none; }
button:focus-visible {
outline: 2px solid var(--euvic-blue-bright);
outline-offset: 2px;
border-radius: 10px;
}
/* Smoother image rendering */
img { image-rendering: -webkit-optimize-contrast; }
/* Sidebar refinement — subtle animated indicator on current */
.sn-section.current { animation: currentPulse 2.5s ease-in-out infinite; }
@keyframes currentPulse {
0%,100% { background: rgba(255,255,255,0.05); }
50% { background: rgba(255,255,255,0.08); }
}
/* Touch nav buttons — more premium feel */
.tn-btn { transition: all 0.22s cubic-bezier(0.2, 0.9, 0.2, 1); }
.tn-btn:hover { box-shadow: 0 12px 32px rgba(0,163,224,0.2), 0 0 0 1px rgba(0,163,224,0.25); }
/* Chrome/HUD refinement — smoother pill */
.nav-hint {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Progress bar — gentler gradient + subtle glow */
.progress-fill {
background: linear-gradient(90deg, var(--euvic-blue) 0%, var(--euvic-blue-bright) 50%, var(--sp-bastian) 100%);
box-shadow: 0 0 10px rgba(29,161,245,0.4);
}
/* Clean any leftover bright white text where muted looks better */
.kn-foot { color: var(--euvic-muted); }
/* Make all icons slightly more consistent */
.icon { stroke-linecap: round; stroke-linejoin: round; }
/* Better card-stacking contrast on has-bg slides */
.has-bg .basic-card, .has-bg .four-card, .has-bg .three-card, .has-bg .eco-card,
.has-bg .face-card, .has-bg .portal, .has-bg .svc-card, .has-bg .world-stat,
.has-bg .tool-card, .has-bg .ref-card, .has-bg .at-br, .has-bg .demo-card,
.has-bg .ck-svc, .has-bg .world-card, .has-bg .change-card, .has-bg .hil-col {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(15, 30, 54, 0.6);
}
/* ==========================================================
RESPONSIVE — Desktop → Tablet → Phone (portrait & landscape)
========================================================== */
/* ----- Tablet landscape (1200-1400px): tighten grids ----- */
@media (max-width: 1400px) {
.portals-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.overview-inner { grid-template-columns: repeat(5, 1fr); }
.refs-grid { grid-template-columns: 1fr 1fr; }
.refs-grid .ref-card:first-child { grid-column: span 2; }
}
@media (max-width: 1200px) {
.sidenav { width: 86px; }
body:not(.nosidenav) #slides { left: 86px; width: calc(100vw - 86px); }
.hud-top { left: 110px; }
.progress-bar { left: 86px !important; }
.sn-lbl { font-size: 9px; }
.sn-who { display: none; }
.sn-section { min-height: 60px; }
.intl-split { grid-template-columns: 1fr; gap: 24px; }
.at-trust { grid-template-columns: repeat(2, 1fr); }
.at-trust-item:last-child { grid-column: span 2; justify-content: center; }
}
/* ----- Tablet / small landscape (1024px) ----- */
@media (max-width: 1024px) {
.slide { padding: 60px 48px; }
.mode-keynote, .mode-cockpit { padding: 60px 48px; }
.tn-btn { width: 52px; height: 52px; }
.basics-grid { grid-template-columns: repeat(3, 1fr); }
.world-stats, .ecosystem-grid, .faces-grid, .three-grid, .tools-grid { grid-template-columns: repeat(2, 1fr); }
.portals-grid { grid-template-columns: repeat(2, 1fr); }
.poll-layout { grid-template-columns: 1fr; gap: 24px; }
.aiact-quiz, .bullets-2col, .aiact-bullets, .ethics-list { grid-template-columns: 1fr; }
.timeline { grid-template-columns: repeat(2, 1fr); }
.journey { flex-wrap: wrap; }
.services-grid { grid-template-columns: repeat(2, 1fr); }
.overview-inner { grid-template-columns: repeat(4, 1fr); }
.at-branches--4 { grid-template-columns: repeat(2, 1fr); }
.at-refs--4 { grid-template-columns: 1fr; }
.demo-grid { grid-template-columns: 1fr; }
.cover-sponsors { gap: 40px; }
.cover-line-1 { font-size: clamp(80px, 12vw, 180px); }
.cover-line-2 { font-size: clamp(44px, 6vw, 88px); }
}
/* ==========================================================
MOBILE — < 900px
Key change: Slides SCROLL vertically (instead of clipping)
Sidebar hidden, touch-nav at bottom (with safe area), everything stacks
========================================================== */
@media (max-width: 900px) {
/* ===== Kernfix: Slides werden scrollbar ===== */
.slide {
position: absolute;
inset: 0;
display: block; /* kein Flex-Center mehr — Content fließt von oben */
overflow-y: auto; /* scrollbar */
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 56px 16px 110px; /* Platz für HUD oben + Touch-Nav unten */
}
/* Transition + Cinematic bleiben zentriert, nur anders */
.mode-transition, .mode-cinematic {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
}
/* Theater (Video, Intermezzo, Einladung) voll-flex */
.mode-theater {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
padding: 60px 16px 110px;
}
/* Cover — eigenes Layout siehe unten */
.mode-cover {
display: block;
overflow-y: auto;
}
.mode-keynote, .mode-cockpit, .euvic-block {
padding: 56px 16px 110px;
}
.euvic-block { padding-top: 60px !important; }
/* ===== Sidebar aus ===== */
.sidenav { transform: translateX(-100%); opacity: 0; pointer-events: none; }
body:not(.nosidenav) #slides { left: 0; width: 100vw; }
.hud-top { left: 16px !important; right: 16px; top: 12px; font-size: 9px; gap: 10px; letter-spacing: 0.1em; }
.hud-speaker { font-size: 9px; }
.progress-bar { left: 0 !important; }
/* ===== Touch-Nav unten mittig (mit Safe-Area) ===== */
.touch-nav {
top: auto;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
left: 50%;
right: auto;
transform: translateX(-50%);
gap: 6px;
background: rgba(15,30,54,0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 6px 8px;
border-radius: 40px;
border: 1px solid var(--euvic-border);
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.tn-btn { width: 44px; height: 44px; background: transparent; border: none; box-shadow: none; }
.tn-btn svg { width: 20px; height: 20px; }
.tn-btn:hover { background: rgba(29,161,245,0.15); }
.tn-info { background: transparent; border: none; padding: 0 10px; font-size: 12px; min-width: 50px; }
.nav-hint { display: none; }
/* ===== Typography-Scale ===== */
.kn-h2, .ck-h2 { font-size: clamp(24px, 6.5vw, 36px); line-height: 1.15; margin-bottom: 10px; }
.kn-lead, .ck-lead { font-size: 14px; line-height: 1.55; margin-bottom: 20px; max-width: none; }
.kn-lead--hl { padding: 14px 16px; font-size: 14px; }
.kn-sub { font-size: 16px; margin-bottom: 18px; }
.kn-word { font-size: clamp(72px, 22vw, 140px); margin-bottom: 20px; }
.kn-word-small { font-size: clamp(32px, 8.5vw, 54px); margin-bottom: 16px; }
.kn-kicker { margin-bottom: 16px; font-size: 11px; }
.kn-foot { font-size: 13px; padding: 12px 16px; margin-top: 16px; }
.chapter-h1 { font-size: clamp(58px, 15vw, 104px); margin-bottom: 18px; }
.chapter-lead { font-size: 15px; padding: 0 8px; }
.chapter-eyebrow { font-size: 11px; margin-bottom: 14px; }
/* ===== Alle Multi-Column-Grids → 1 Spalte ===== */
.basics-grid, .world-stats, .ecosystem-grid, .faces-grid, .three-grid, .tools-grid, .four-grid,
.four-grid--stripes, .hil-split, .change-grid, .worlds-grid, .two-grid, .intro-grid,
.portals-grid, .portals-grid--4, .ck-services, .services-grid, .industries,
.at-branches, .at-branches--4, .at-refs, .at-refs--4, .at-trust, .disc-grid,
.pillars-grid, .refs-grid, .tools-grid, .demo-grid, .intl-split, .intl-branches,
.aiact-quiz, .bullets-2col, .aiact-bullets, .ethics-list {
grid-template-columns: 1fr !important;
gap: 10px;
}
.timeline { grid-template-columns: 1fr; gap: 10px; }
.t3-head, .t3-row { grid-template-columns: 1fr; }
.t3-head > div { padding: 10px 14px; border-bottom: 1px solid var(--euvic-border); }
.t3-head > div:not(:first-child) { display: none; } /* nur "Dimension" als Kopfzeile */
.hil-plus { display: none; }
.refs-grid .ref-card:first-child { grid-column: auto; }
/* ===== Cards compact ===== */
.basic-card, .four-card, .three-card, .tool-card, .eco-card, .portal, .svc-card, .world-stat,
.demo-card, .ref-card, .at-br, .face-card, .change-card, .hil-col, .world-card, .two-card,
.intro-card, .tl-step, .pillar-card, .ethics-item, .ind {
padding: 18px 16px;
}
.basic-icon-svg, .intro-icon-svg, .two-icon-svg, .svc-icon-svg, .four-icon-svg,
.three-icon-svg, .journey-icon-svg, .disc-icon-svg { width: 28px; height: 28px; margin-bottom: 10px; }
.portal-icon-wrap, .eco-icon-svg, .at-br-icon-wrap { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 10px; }
.portal-icon-wrap .icon, .eco-icon-svg .icon, .at-br-icon-wrap .icon { width: 22px; height: 22px; }
.portal-brand, .eco-name, .at-br-name { font-size: 18px; margin-bottom: 6px; }
.portal-desc, .eco-desc { font-size: 13px; }
.at-br-name { font-size: 22px; }
.at-br-sub { font-size: 12px; margin-bottom: 12px; }
.at-br-desc { font-size: 13px; margin-bottom: 12px; }
.at-br-stat { font-size: 12px; padding: 8px 12px; }
/* ===== Journey vertical ===== */
.journey { flex-direction: column; gap: 8px; }
.journey-arr { transform: rotate(90deg); font-size: 16px; }
.journey-step { width: 100%; padding: 16px; }
.journey-icon-svg { width: 28px; height: 28px; }
.journey-h { font-size: 15px; }
.journey-t { font-size: 12px; }
/* ===== Industries compact ===== */
.ind { padding: 14px 16px; gap: 12px; }
.ind-icon { width: 22px; height: 22px; }
.ind-h { font-size: 16px; }
.ind-t { font-size: 13px; }
/* ===== EUVIC Header — kompakter ===== */
.euvic-header {
left: 16px; right: 16px; top: 12px;
padding-bottom: 8px;
}
.euvic-header-logo { height: 13px; }
.euvic-header-meta { font-size: 8px; letter-spacing: 0.1em; }
/* ===== Transition Slide — kompakt, zentriert ===== */
.mode-transition { padding: 40px 20px 110px; }
.trans-avatar, .trans-photo { width: 130px; height: 130px; margin-bottom: 24px; }
.trans-fallback { font-size: 42px !important; }
.trans-img { width: 100%; height: 100%; }
.trans-who { font-size: clamp(32px, 8vw, 52px); margin-bottom: 10px; }
.trans-what { font-size: clamp(14px, 3.8vw, 17px); padding: 0 8px; }
/* ===== Face-Card ===== */
.face-photo { width: 104px; height: 104px; }
.face-name { font-size: 16px; }
.face-role { font-size: 13px; }
.face-tag { font-size: 10px; }
.story-quote { font-size: 14px; padding: 14px 18px; line-height: 1.5; }
/* ===== 3-Säulen Nummer ===== */
.pillar-num { width: 40px; height: 40px; font-size: 20px; top: -16px; left: 20px; }
.pillar-h { font-size: 18px; }
.pillar-card { padding-top: 36px; }
.pillars-note { font-size: 13px; padding: 12px 16px; margin-top: 16px; }
/* ===== Timeline ===== */
.tl-num { width: 24px; height: 24px; font-size: 12px; top: -10px; left: 20px; }
.tl-period { font-size: 11px; }
.tl-title { font-size: 15px; }
.tl-text { font-size: 13px; }
/* ===== Hook-Grid ===== */
.hook-grid--keynote { grid-template-columns: 1fr; gap: 10px; }
.hook-quote { font-size: 15px; padding: 14px 16px; }
.kn-ask { font-size: 15px; margin-top: 18px; }
/* ===== World-Stats ===== */
.world-stat { padding: 20px 16px; }
.world-stat-num { font-size: 40px; margin-bottom: 6px; }
.world-stat-label { font-size: 11px; }
.world-stat-note { font-size: 11px; }
.world-clients-list { gap: 10px; }
.world-clients-list span { font-size: 14px; }
.world-ticker { margin-top: 20px; padding: 10px 14px; }
.world-ticker-label { font-size: 11px; letter-spacing: 0.06em; }
/* ===== Intl Split ===== */
.intl-col-h { font-size: 11px; margin-bottom: 14px; }
.intl-br { padding: 10px 12px; font-size: 13px; }
.intl-logos { gap: 6px; }
.intl-logos span { font-size: 13px; padding: 5px 10px; }
.intl-proof { padding: 14px 16px; }
.intl-proof-item { font-size: 13px; flex-direction: column; align-items: flex-start; gap: 4px; }
.intl-proof-item b { font-size: 18px; min-width: 0; }
.intl-proof-item span { margin-left: 0; font-size: 11px; }
/* ===== AT Logos ===== */
.at-ref-group { padding: 14px 16px; }
.at-ref-group-h { font-size: 11px; margin-bottom: 10px; }
.at-logo { font-size: 12px; padding: 5px 10px; }
.at-trust { padding: 14px 16px; gap: 10px; }
.at-trust-item { font-size: 12px; }
.at-trust-item .icon { width: 18px; height: 18px; }
/* ===== KI-Tools Karten ===== */
.tool-card { padding: 20px 18px; }
.tool-name { font-size: 22px; }
.tool-vendor { font-size: 12px; margin-bottom: 10px; }
.tool-desc { font-size: 13px; }
/* ===== HIL (Mensch vs KI) ===== */
.hil-col { padding: 20px 18px; }
.hil-h-top { font-size: 11px; margin-bottom: 8px; }
.hil-h { font-size: 18px; margin-bottom: 14px; }
.hil-col li { font-size: 13px; padding: 8px 0 8px 16px; }
.hil-quote { font-size: 15px; padding: 14px 16px; margin-bottom: 14px; }
.hil-comp { font-size: 13px; grid-template-columns: 1fr; gap: 12px; }
.hil-claim { font-size: 14px; padding: 14px 18px; }
/* ===== Change-Grid ===== */
.change-card { padding: 20px 18px; }
.change-h { font-size: 18px; margin-bottom: 14px; }
.change-card li { font-size: 13px; padding: 8px 0 8px 16px; }
/* ===== AI Act Quiz ===== */
.aiact-question { padding: 14px 16px; }
.aiact-q-text { font-size: 13px; margin-bottom: 10px; }
.aiact-btn { padding: 10px; font-size: 13px; }
.aiact-result { padding: 14px 18px; }
.aiact-result-label { font-size: 10px; margin-bottom: 8px; }
.aiact-result-text { font-size: 13px; }
/* ===== Table 3-Col → stack ===== */
.table-3 { margin-top: 14px; }
.t3-row { padding: 10px 0; }
.t3-c { padding: 6px 16px; font-size: 13px; border-right: none; }
.t3-c.t3-h { background: rgba(0,128,199,0.06); padding: 10px 16px; font-size: 14px; }
.t3-c.t3-ex { padding-bottom: 12px; }
/* ===== Bullets & Ethics ===== */
.bullet, .aiact-b { padding: 12px 14px 12px 32px; font-size: 13px; }
.bullet::before { left: 12px; }
.ethics-item { padding: 14px 18px; }
.ethics-h { font-size: 15px; }
.ethics-t { font-size: 13px; }
/* ===== Content wrappers ===== */
.ck-heading { margin-bottom: 18px; }
.kn-wrap, .ck-wrap { padding: 0; max-width: 100%; }
/* ===== Robot komplett aus auf Mobile ===== */
.cover-robot { display: none !important; }
/* ===== Poll ===== */
.poll-layout { gap: 14px; }
.poll-vote-col { padding: 18px 16px; order: 2; }
.poll-options-col { order: 1; }
.poll-total { padding: 6px 0 14px; margin-bottom: 14px; }
.poll-total-num { font-size: 40px; }
.poll-submit { padding: 14px 20px; font-size: 15px; }
.poll-option { padding: 14px 16px; }
.poll-option-label { font-size: 14px; gap: 10px; margin-bottom: 8px; }
.poll-emoji { font-size: 22px; }
.poll-count { font-size: 12px; padding: 2px 8px; min-width: 38px; }
.poll-option.selected::after { top: 12px; right: 12px; width: 20px; height: 20px; }
.poll-reset { margin-top: 14px; font-size: 11px; padding: 7px 12px; }
/* ===== Magic-Ball & Applause ===== */
.disc-magic { padding: 20px 16px; margin: 16px auto 18px; border-radius: 14px; }
.magic-label { font-size: 11px; margin-bottom: 12px; }
.magic-btn { padding: 12px 20px; font-size: 14px; width: 100%; max-width: 320px; }
.magic-answer { font-size: 15px; margin-top: 14px; }
.disc-applause {
flex-direction: column;
gap: 12px;
padding: 14px 16px;
margin-bottom: 20px;
border-radius: 14px;
}
.applause-btn { width: 100%; padding: 12px 20px; flex-direction: row; justify-content: center; gap: 8px; }
.applause-emoji { font-size: 22px; }
.applause-label { font-size: 13px; }
.applause-meter { width: 100%; }
/* ===== Discussion ===== */
.disc-container { padding: 40px 16px; max-width: 100%; }
.disc-h { font-size: clamp(54px, 14vw, 88px); margin-bottom: 24px; }
.disc-typing { margin-left: 14px; gap: 7px; transform: translateY(-0.15em); }
.disc-typing span { width: 10px; height: 10px; box-shadow: 0 0 10px rgba(29,161,245,0.4); }
.disc-eyebrow { font-size: 11px; margin-bottom: 14px; letter-spacing: 0.2em; }
.disc-grid { display: none; } /* Cards weg auf Mobile, mehr Platz für Magic & Applause */
.disc-foot { margin-top: 18px; }
.disc-logos { gap: 14px; }
.disc-sparkasse-logo { height: 36px; }
.disc-euvic-logo { height: 28px; }
.floater { font-size: clamp(24px, 4vw, 42px); }
/* ===== Overview grid — bigger touch targets ===== */
.overview { padding: 56px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.overview-header { margin-bottom: 18px; font-size: 12px; }
.overview-inner { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.thumb { aspect-ratio: 16/11; padding: 10px; font-size: 10px; }
.thumb-title { font-size: 11px; }
.thumb-chapter { font-size: 9px; }
.thumb-num { font-size: 9px; }
/* ===== Video Caption ===== */
.video-caption { bottom: 20px; padding: 8px 14px; font-size: 11px; }
.video-title { font-size: 13px; margin-right: 10px; }
.video-meta { font-size: 10px; }
.video-fallback-link { margin-left: 8px; font-size: 10px; padding: 3px 8px; }
/* ===== Intermezzo ===== */
.mode-theater { padding: 40px 16px 110px; }
.intermezzo { max-width: 100%; }
.intermezzo-eyebrow { font-size: 10px; margin-bottom: 18px; }
.intermezzo-title { font-size: clamp(44px, 12vw, 80px); margin-bottom: 24px; }
.intermezzo-divider { margin-bottom: 24px; }
.intermezzo-meet { gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.intermezzo-brand { font-size: 18px; }
.intermezzo-brand small { font-size: 10px; }
.intermezzo-x { font-size: 28px; }
.intermezzo-euvic { height: 26px; }
.intermezzo-sub { font-size: 14px; padding: 0 8px; }
/* ===== Einladung ===== */
.invite-container { max-width: 100%; padding: 0 8px; }
.invite-eyebrow { font-size: 11px; margin-bottom: 18px; }
.invite-h { font-size: clamp(48px, 14vw, 88px); margin-bottom: 16px; }
.invite-date { font-size: 16px; margin-bottom: 24px; }
.invite-body { font-size: 14px; margin-bottom: 28px; padding: 0 8px; }
.invite-note { font-size: 12px; padding: 10px 16px; }
/* ===== Ecosystem-Card Highlight-Badge ===== */
.eco-badge { top: -8px; right: 12px; font-size: 9px; padding: 3px 8px; }
/* ===== Demo-Card ===== */
.demo-card { padding: 22px 18px; }
.demo-icon-wrap { width: 48px; height: 48px; margin-bottom: 14px; }
.demo-icon-wrap .icon { width: 24px; height: 24px; }
.demo-name { font-size: 22px; }
.demo-client { font-size: 12px; margin-bottom: 12px; }
.demo-desc { font-size: 13px; }
.demo-badge { top: -8px; left: 16px; font-size: 9px; padding: 3px 8px; }
.demo-foot { padding: 14px 16px; font-size: 13px; margin-top: 16px; }
.demo-eyebrow { font-size: 10px; padding: 5px 12px; margin-bottom: 14px; }
/* ===== Worlds grid cards ===== */
.world-card { padding: 20px 18px; }
.world-badge { font-size: 14px; padding: 5px 12px; margin-bottom: 14px; }
.world-card li { font-size: 13px; padding: 8px 0 8px 16px; }
.image-card { height: 120px !important; }
/* ===== Hero image ===== */
.hero-image { height: 18vh !important; max-height: 180px !important; margin-bottom: 18px; }
/* ===== Split image (Justice-Folie) ===== */
.slide-split { grid-template-columns: 1fr; gap: 20px; }
.split-image { height: 32vh; max-height: 280px; order: 2; }
}
/* ==========================================================
KLEINES HANDY — < 480px
========================================================== */
@media (max-width: 480px) {
.slide { padding: 52px 12px 108px; }
.mode-keynote, .mode-cockpit { padding: 52px 12px 108px; }
.euvic-block { padding-top: 56px !important; padding-bottom: 108px !important; padding-left: 12px; padding-right: 12px; }
.mode-theater { padding: 40px 12px 108px; }
.kn-h2, .ck-h2 { font-size: clamp(22px, 7vw, 30px); }
.kn-lead, .ck-lead { font-size: 13px; }
.kn-word { font-size: clamp(64px, 22vw, 110px); }
.chapter-h1 { font-size: clamp(50px, 16vw, 84px); }
.trans-avatar, .trans-photo { width: 108px; height: 108px; }
.trans-who { font-size: clamp(28px, 8vw, 44px); }
.hud-top { font-size: 8px; gap: 8px; }
.hud-chapter { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.touch-nav { gap: 4px; padding: 5px 6px; }
.tn-btn { width: 40px; height: 40px; }
.tn-btn svg { width: 18px; height: 18px; }
.tn-info { padding: 0 6px; font-size: 11px; min-width: 44px; }
.overview-inner { grid-template-columns: 1fr; gap: 6px; }
.thumb { aspect-ratio: 16/7; padding: 10px; }
}
/* ==========================================================
COVER — mobile-specific layout
Content fließt vertikal, kein absolute-Positioning auf Mobile
========================================================== */
@media (max-width: 900px) {
.mode-cover {
padding: 0;
min-height: 100vh;
}
.cover-bg-photo, .cover-bg-gradient, .cover-bg-mesh { z-index: 0; }
.mode-cover .alpine-silhouette { z-index: 1; }
.mode-cover .particles { z-index: 2; }
/* Sponsor bar flexibel oben */
.cover-sponsors {
position: relative !important;
top: auto !important;
padding: 20px 16px 16px calc(16px + env(safe-area-inset-left, 0px));
padding-top: calc(20px + env(safe-area-inset-top, 0px));
gap: 24px;
flex-wrap: wrap;
justify-content: center;
background: linear-gradient(180deg, rgba(10,20,36,0.7) 0%, transparent 100%);
z-index: 4;
animation: coverFadeIn 0.9s ease-out both;
}
.cover-sp-logo--euvic { max-height: 28px; }
.cover-sp-logo--spk { max-height: 40px; }
.cover-sp-sep { display: none; }
/* Stage nicht mehr absolute, fließt zwischen Header und Footer */
.cover-stage {
position: relative !important;
top: auto !important; left: auto !important;
transform: none !important;
animation: coverFadeIn 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) 0.3s both !important;
padding: 40px 20px 30px;
text-align: center;
max-width: 100%;
z-index: 4;
}
.cover-eyebrow { margin-bottom: 18px; font-size: 10px; padding: 5px 12px; }
.cover-huge { margin-bottom: 22px; }
.cover-line-1 {
font-size: clamp(88px, 26vw, 160px);
margin-bottom: 12px;
}
.cover-divider-bar { width: 48px; height: 2px; margin-bottom: 14px; }
.cover-line-2 {
font-size: clamp(34px, 10vw, 64px);
gap: 0.22em;
}
.cover-tagline { font-size: clamp(13px, 3.5vw, 16px); padding: 0 12px; line-height: 1.5; }
.cover-tagline br { display: none; }
/* Speaker-Strip nicht mehr absolute, fließt unten */
.cover-strip {
position: relative !important;
bottom: auto !important;
padding: 20px 16px calc(110px + env(safe-area-inset-bottom, 0px));
z-index: 4;
}
.cover-strip-speakers {
grid-template-columns: repeat(2, 1fr);
gap: 12px 16px;
padding-top: 16px;
}
.cov-speaker { gap: 10px; align-items: center; }
.cov-speaker b { font-size: 12px; }
.cov-speaker span { font-size: 10px; }
.cov-thumb { width: 34px; height: 34px; }
body.cover-active .chrome { opacity: 0; }
}
@media (max-width: 480px) {
.cover-strip-speakers { grid-template-columns: 1fr; gap: 10px; text-align: left; }
.cov-speaker > div:not(.cov-thumb) { min-width: 0; }
.cover-stage { padding: 30px 16px 20px; }
}
/* ==========================================================
LANDSCAPE PHONE (wide, short height)
========================================================== */
@media (max-height: 520px) and (orientation: landscape) {
.slide { padding: 44px 40px 70px; }
.mode-keynote, .mode-cockpit { padding: 44px 40px 70px; }
.euvic-block { padding-top: 44px !important; padding-bottom: 70px !important; }
.mode-theater { padding: 30px 40px 70px; }
.mode-cover { display: block; }
.cover-sponsors { position: absolute !important; top: 10px !important; padding: 8px 16px; gap: 24px; }
.cover-sp-logo--euvic { max-height: 22px; }
.cover-sp-logo--spk { max-height: 30px; }
.cover-stage { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; padding: 0 30px; }
.cover-line-1 { font-size: clamp(54px, 16vh, 110px); }
.cover-line-2 { font-size: clamp(24px, 8vh, 52px); }
.cover-huge { margin-bottom: 12px; }
.cover-divider-bar { margin-bottom: 10px; }
.cover-tagline { font-size: clamp(11px, 2.4vh, 14px); }
.cover-strip { position: absolute !important; bottom: 0 !important; padding: 8px 20px 48px; }
.cover-strip-speakers { padding-top: 8px; grid-template-columns: repeat(4, 1fr); gap: 4px 10px; }
.cov-thumb { width: 26px; height: 26px; }
.cov-speaker b { font-size: 10px; }
.cov-speaker span { font-size: 9px; }
.kn-h2, .ck-h2 { font-size: clamp(18px, 5vh, 30px); }
.chapter-h1 { font-size: clamp(48px, 15vh, 88px); }
.trans-avatar, .trans-photo { width: 96px; height: 96px; margin-bottom: 14px; }
.trans-who { font-size: clamp(24px, 6vh, 42px); }
.touch-nav { bottom: 8px; padding: 4px 6px; }
.tn-btn { width: 38px; height: 38px; }
.tn-btn svg { width: 18px; height: 18px; }
.euvic-header { top: 8px; padding-bottom: 4px; }
.euvic-header-logo { height: 11px; }
.euvic-header-meta { font-size: 8px; }
}
/* ==========================================================
PORTRAIT-oriented tablets/phones
========================================================== */
@media (orientation: portrait) and (max-width: 1100px) {
.worlds-grid, .change-grid, .hil-split { grid-template-columns: 1fr; }
.journey { flex-direction: column; }
.journey-arr { transform: rotate(90deg); }
}