:root{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel2: #f1f4f9;
  --text: #0f172a;
  --muted: #334155;
  --muted2: #64748b;
  --border: #dbe1ea;
  --border2: #c7d0dd;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --max: 1120px;
  --r: 3px; /* sharp corners */
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: linear-gradient(120deg,#f6f8fb 0%,#eef3fa 35%,#e9f1f8 60%,#f6f8fb 100%);
  color: var(--text);
  line-height: 1.55;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width: var(--max); margin:0 auto; padding:0 20px; }

/* Header */
header{
  position: sticky;
  top:0;
  z-index:10;
  background: #ffffffcc;
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:650;
  letter-spacing:.02em;
}

nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
nav a{
  font-size:13px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: var(--r);
  border: 1px solid transparent;
}
nav a:hover{
  background: var(--panel2);
  border-color: var(--border2);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border2);
  background: #ffffff;
  color: var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: var(--panel2); border-color:#b8c4d5; }
.btn.primary{ background:#0f172a; color:#fff; border-color:#0f172a; }
.btn.primary:hover{ background:#0b1224; }

section{ padding: 64px 0; }
.grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:start;
}
@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
  nav{ display:none; }
}

.card{
  border:1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.pad{ padding:22px; }
.kicker{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: var(--muted2);
  margin-bottom:10px;
}
h1{
  margin: 0 0 14px 0;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h2{
  margin:0 0 10px 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}
h3{
  margin:0 0 8px 0;
  font-size: 16px;
}
p{ margin: 0 0 14px 0; color: var(--muted); }
.lead{
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 18px;
  max-width: 70ch;
}
.small{ font-size: 13px; color: var(--muted2); }

.meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 16px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: #ffffff;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px){
  .two-col{ grid-template-columns: 1fr; }
}
.list{ margin:0; padding-left:18px; color: var(--muted); }
.hr{ height:1px; background: var(--border); margin: 18px 0; }
.rightcard .pad{ padding: 18px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Placeholder image */
.ph-img{
  background: linear-gradient(135deg,#eaf0f8 0%, #ffffff 55%, #eef3fa 100%);
  color: var(--muted2);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  min-height: 150px;
}

/* Clients marquee */
.clients{
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to right,#f1f5f9,#ffffff,#f1f5f9);
}
.clients__label{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: var(--muted2);
  margin-bottom:12px;
}
.marquee{ position:relative; overflow:hidden; }
.marquee__track{
  display:flex;
  align-items:center;
  gap: 12px;
  width: max-content;
  animation: marquee 84s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
.marquee__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* Kompetenzfelder: one column items with right image */
.features{
  display:flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.feature{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r);
  padding: 0;
  display:grid;
  grid-template-columns: 1fr 260px;
  gap: 0;
  align-items: stretch;
  overflow:hidden; /* ensures flush image corners */
}
@media (max-width: 820px){
  .feature{ grid-template-columns: 1fr; }
  .ph-img{ min-height: 170px; }
}
.feature__body{
  padding: 16px;
}
.feature__body p{ margin: 0; color: var(--muted2); }

/* Use Cases */
.projects{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 980px){
  .projects{ grid-template-columns: 1fr; }
}
.proj{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r);
  padding: 0;
  display:flex;
  flex-direction: column;
  gap: 0;
  overflow:hidden; /* ensures flush image corners */
}
.tagrow{ display:flex; gap: 8px; flex-wrap: wrap; }
.tag{
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: #ffffff;
}
.proj__img{
  min-height: 150px;
}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
@media (max-width: 820px){
  .contact{ grid-template-columns: 1fr; }
}
.contact a.link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
}
.contact a.link:hover{
  border-color: var(--border2);
  background: var(--panel2);
}
footer{
  padding: 28px 0 50px;
  color: var(--muted2);
  font-size: 13px;
}
.row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

  
/* Hero video background */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(0.95) contrast(0.95) brightness(0.9);
}
.hero-overlay{
  position:relative;
  z-index:1;
}

/* Profile section with photo */
.profile-grid{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 820px){
  .profile-grid{ grid-template-columns: 1fr; }
}
.profile-photo{
  border-left: 1px solid var(--border);
}
@media (max-width: 420px){
  .profile-photo{ border-left: none; border-top: 1px solid var(--border); }
}

/* Inner padding wrapper for full-bleed cards */
.proj__body{
  padding: 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* Feature image divider */
.feature__img{ border-left: 1px solid var(--border); }
@media (max-width: 420px){ .feature__img{ border-left:none; border-top: 1px solid var(--border);} }

/* Hero centered logo overlay */
.hero-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index: 3;               /* above video and content */
  width: 120px;
  height: 120px;
  opacity: 0.88;
  pointer-events: none;
  filter: drop-shadow(0 12px 30px rgba(15,23,42,.25));
}
@media (max-width: 720px){
  .hero-logo{ width: 180px; height: 180px; }
}

/* Hero: single column layout (after moving the right card) */
.hero .grid{
  grid-template-columns: 1fr;
}

/* ===== v9 Theme: Dark gradient cards + light text + geometric background ===== */

/* Page background with subtle geometric shapes */
body{
  background: linear-gradient(120deg,#f6f8fb 0%,#eef3fa 35%,#e9f1f8 60%,#f6f8fb 100%) !important;
  position: relative;
  overflow-x: hidden;
}
body::before,
body::after{
  content:"";
  position: fixed;
  inset: -120px;
  pointer-events: none;
  z-index: -1;
}
/* large geometric blobs */
body::before{
  background:
    radial-gradient(700px 420px at 12% 12%, rgba(15,23,42,.10), transparent 62%),
    radial-gradient(520px 360px at 88% 18%, rgba(59,130,246,.10), transparent 62%),
    radial-gradient(640px 420px at 70% 92%, rgba(16,185,129,.10), transparent 62%);
  filter: blur(0px);
}
/* subtle diagonal grid */
body::after{
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(45deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: 0 0, 21px 21px;
  mask-image: radial-gradient(900px 700px at 40% 15%, black 35%, transparent 70%);
  opacity: .55;
}

/* Dark gradient surfaces for text blocks */
.card,
.feature,
.skill,
.proj,
.contact a.link{
  background: linear-gradient(135deg, #0b1220 0%, #111827 45%, #0b1220 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 44px rgba(2,6,23,.22) !important;
  color: rgba(255,255,255,.90) !important;
}

/* Typography inside dark surfaces */
.card p,
.feature p,
.skill p,
.proj p{
  color: rgba(255,255,255,.78) !important;
}
.card .small,
.feature .small,
.skill .small,
.proj .small{
  color: rgba(255,255,255,.68) !important;
}
.card .kicker,
.feature .kicker,
.skill .kicker,
.proj .kicker{
  color: rgba(255,255,255,.62) !important;
}
.card h1, .card h2, .card h3,
.feature h3, .proj h3{
  color: rgba(255,255,255,.94) !important;
}

/* Dividers on dark surfaces */
.hr{
  background: rgba(255,255,255,.10) !important;
}

/* Pills/Tags on dark surfaces */
.pill, .tag{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.80) !important;
}

/* Placeholder images: darker geometric placeholder */
.ph-img{
  background:
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 55%, rgba(255,255,255,.06) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px) !important;
  color: rgba(255,255,255,.70) !important;
}

/* Keep header readable/light */
header{
  background: #ffffffcc !important;
  border-bottom: 1px solid var(--border) !important;
}
nav a{ color: var(--muted) !important; }
nav a:hover{ background: var(--panel2) !important; border-color: var(--border2) !important; }
.brand span{ color: var(--text) !important; }

/* Buttons: keep primary dark, secondary light */
.btn{
  background: #ffffff !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}
.btn.primary{
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

/* Clients band: keep light background, but labels readable */
.clients{
  background: linear-gradient(to right,#f1f5f9,#ffffff,#f1f5f9) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.clients__label{ color: var(--muted2) !important; }
.marquee__item{ color: var(--muted) !important; }

/* Optional: make hero cards slightly more 'glass' while still dark */
.hero .card{
  background: linear-gradient(135deg, rgba(11,18,32,.90) 0%, rgba(17,24,39,.86) 55%, rgba(11,18,32,.90) 100%) !important;
  backdrop-filter: blur(4px);
}
/* ===== End v9 Theme ===== */


/* ===== v10 Futuristic Variant B (subtle neon accents) ===== */
:root{
  --accent1: rgba(34,211,238,.85); /* cyan */
  --accent2: rgba(167,139,250,.85); /* violet */
  --accent3: rgba(16,185,129,.70);  /* emerald */
}

/* Hero as cinematic header */
.hero{
  min-height: 360px;
  padding: 0 !important;
}
@media (max-width: 720px){
  .hero{ min-height: 300px; }
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 50% 40%, rgba(0,0,0,.15), rgba(0,0,0,.55) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.62));
  z-index: 2;
  pointer-events:none;
}

/* Center logo pops slightly */
.hero-logo{
  opacity: 0.92 !important;
  filter: drop-shadow(0 18px 46px rgba(2,6,23,.55)) drop-shadow(0 0 22px rgba(34,211,238,.22));
}

/* Dark cards with neon edge */
.card, .feature, .skill, .proj, .contact a.link{
  position: relative;
}
.card::before, .feature::before, .skill::before, .proj::before, .contact a.link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--r);
  padding: 1px;
  background: linear-gradient(135deg, rgba(34,211,238,.35), rgba(167,139,250,.22), rgba(16,185,129,.18));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .55;
}
.card:hover::before, .feature:hover::before, .skill:hover::before, .proj:hover::before, .contact a.link:hover::before{
  opacity: .85;
}

/* Headings: subtle futuristic glow */
.card h1, .card h2, .card h3, .feature h3, .proj h3{
  text-shadow: 0 0 18px rgba(34,211,238,.10), 0 0 22px rgba(167,139,250,.08);
}

/* Kicker: slightly more tech */
.kicker{
  letter-spacing: .14em !important;
}

/* Background: add faint circuit lines layer */
body::after{
  background-image:
    linear-gradient(135deg, rgba(34,211,238,.06) 1px, transparent 1px),
    linear-gradient(45deg, rgba(167,139,250,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: 0 0, 23px 23px;
  opacity: .55;
}

/* Buttons: subtle accent shadow */
.btn.primary{
  box-shadow: 0 12px 32px rgba(2,6,23,.25), 0 0 18px rgba(34,211,238,.10);
}
/* ===== End v10 ===== */


/* ===== v11 tweaks ===== */
/* Remove hero darkening overlay */
.hero::after{
  background: none !important;
  opacity: 0 !important;
}
/* Keep video true-color (no dim filter) */
.hero-video video{
  filter: none !important;
}
/* Section headings outside dark cards */
.section-head{
  margin-bottom: 10px;
}
.section-head .kicker{
  color: var(--muted2) !important;
  text-transform: uppercase;
}
.section-head h2, .section-head h3{
  color: var(--text) !important;
  text-shadow: none !important;
}
.section-head .small{
  color: var(--muted) !important;
}
/* Slightly larger client items for readability */
.marquee__item{
  font-weight: 600;
}
/* ===== end v11 tweaks ===== */


/* ===== v12 Lightened cards ===== */
.card,
.feature,
.proj,
.contact a.link{
  background: linear-gradient(135deg, #1f2937 0%, #273449 45%, #1f2937 100%) !important;
  color: rgba(255,255,255,.92) !important;
}

.card p,
.feature p,
.proj p{
  color: rgba(255,255,255,.80) !important;
}

.card .small,
.feature .small,
.proj .small{
  color: rgba(255,255,255,.72) !important;
}

#schulungen .card.pad{
  background: linear-gradient(135deg, #273449 0%, #2f3b52 45%, #273449 100%) !important;
}
/* ===== end v12 ===== */


/* ===== v13 Spacing normalization ===== */
section{
  padding: 72px 0 !important;
}

.section-head{
  margin-bottom: 14px !important;
}

.card{
  margin-top: 0 !important;
}

.card + .card{
  margin-top: 18px !important;
}

/* Equalize inner padding rhythm */
.pad{
  padding: 26px !important;
}

/* Ensure consistent spacing in grids */
.grid,
.two-col,
.projects,
.features,
.contact{
  gap: 22px !important;
}

/* Use-case cards vertical rhythm */
.proj__body{
  padding: 26px !important;
}

/* Profile photo block spacing */
.profile-grid{
  gap: 22px !important;
}
/* ===== end v13 ===== */


/* ===== v14 Dark red theme & strict spacing ===== */

/* Global section spacing – fully normalized */
section{
  padding: 64px 0 !important;
}

/* Remove accidental extra margins */
section > .wrap{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.section-head{
  margin: 0 0 16px 0 !important;
}

/* Dark red gradient cards */
.card,
.feature,
.proj,
.contact a.link{
  background: linear-gradient(
    135deg,
    #2a0e12 0%,
    #3a141a 45%,
    #2a0e12 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Text tuning on dark red */
.card p,
.feature p,
.proj p{
  color: rgba(255,255,255,.82) !important;
}
.card .small,
.feature .small,
.proj .small{
  color: rgba(255,255,255,.72) !important;
}

/* Inner spacing consistency */
.pad{
  padding: 24px !important;
}
.card + .card{
  margin-top: 20px !important;
}

/* Grid rhythm */
.grid,
.two-col,
.projects,
.features,
.contact,
.profile-grid{
  gap: 24px !important;
}

/* Slight red glow accent (very subtle) */
.card::before,
.feature::before,
.proj::before{
  background: linear-gradient(
    135deg,
    rgba(239,68,68,.35),
    rgba(220,38,38,.20),
    rgba(153,27,27,.15)
  ) !important;
}

/* Keep header neutral */
header{
  background: #ffffffcc !important;
}

/* ===== end v14 ===== */


/* ===== v15 Refined dark blue theme + contrast & spacing fix ===== */

/* Global section spacing – strictly even */
section{
  padding: 72px 0 !important;
}
section > .wrap{
  margin: 0 !important;
}

/* Section headers */
.section-head{
  margin: 0 0 18px 0 !important;
}
.section-head h2,
.section-head h3{
  color: #0f172a !important;
}
.section-head .kicker{
  color: #475569 !important;
}

/* Dark blue cards (less red, calmer) */
.card,
.feature,
.proj,
.contact a.link{
  background: linear-gradient(
    135deg,
    #0b1220 0%,
    #111827 45%,
    #0b1220 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 48px rgba(2,6,23,.35) !important;
  color: rgba(255,255,255,.95) !important;
}

/* Improve text readability */
.card p,
.feature p,
.proj p{
  color: rgba(255,255,255,.88) !important;
  line-height: 1.6 !important;
}
.card .small,
.feature .small,
.proj .small{
  color: rgba(226,232,240,.82) !important;
}

/* Lists */
.list li{
  color: rgba(241,245,249,.88) !important;
}

/* Inner spacing */
.pad{
  padding: 28px !important;
}
.card + .card{
  margin-top: 24px !important;
}

/* Grid rhythm */
.grid,
.two-col,
.projects,
.features,
.contact,
.profile-grid{
  gap: 28px !important;
}

/* Remove aggressive glow */
.card::before,
.feature::before,
.proj::before{
  opacity: .35 !important;
}

/* Client marquee readability */
.marquee__item{
  font-size: 15px !important;
  color: #334155 !important;
}

/* Hero stays clean */
.hero::after{
  display: none !important;
}

/* ===== end v15 ===== */


/* ===== v16 Centering fix ===== */
/* Re-assert container centering */
.wrap{
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Override earlier overly-aggressive rule */
section > .wrap{
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== end v16 ===== */


/* ===== v17 Inverted theme ===== */

/* Page background: dark, calm */
body{
  background: linear-gradient(135deg,#0b1220 0%, #0f172a 45%, #0b1220 100%) !important;
  color: #e5e7eb !important;
}

/* Header stays light for contrast */
header{
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.brand span{ color:#0f172a !important; }
nav a{ color:#334155 !important; }
nav a:hover{ background:#f1f5f9 !important; }

/* Section headings (outside cards) */
.section-head .kicker{
  color:#94a3b8 !important;
}
.section-head h2,
.section-head h3{
  color:#e5e7eb !important;
}

/* Cards become light */
.card,
.feature,
.proj,
.contact a.link{
  background: linear-gradient(135deg,#ffffff 0%, #f8fafc 45%, #ffffff 100%) !important;
  color:#0f172a !important;
  border:1px solid #e5e7eb !important;
  box-shadow: 0 18px 48px rgba(2,6,23,.25) !important;
}

/* Text inside light cards */
.card p,
.feature p,
.proj p{
  color:#1f2937 !important;
}
.card .small,
.feature .small,
.proj .small{
  color:#475569 !important;
}
.list li{
  color:#1f2937 !important;
}

/* Pills & tags */
.pill, .tag{
  background:#f1f5f9 !important;
  color:#0f172a !important;
  border:1px solid #e5e7eb !important;
}

/* Placeholder images lighter */
.ph-img{
  background: linear-gradient(135deg,#e5e7eb 0%, #f8fafc 55%, #e5e7eb 100%) !important;
  color:#475569 !important;
}

/* Clients banner: inverted */
.clients{
  background: linear-gradient(to right,#0f172a,#020617,#0f172a) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.clients__label{ color:#cbd5f5 !important; }
.marquee__item{ color:#e5e7eb !important; }

/* Buttons */
.btn{
  background:#ffffff !important;
  color:#0f172a !important;
}
.btn.primary{
  background:#0f172a !important;
  color:#ffffff !important;
}

/* ===== end v17 ===== */


/* ===== v18 Inverted refined: lighter/desaturated bg + slimmer clients ===== */

/* Page background: lighter & desaturated */
body{
  background: linear-gradient(135deg,#111827 0%, #1f2937 45%, #111827 100%) !important;
  color: #e5e7eb !important;
}

/* Clients banner: keep color, reduce height */
.clients{
  padding: 10px 0 !important;
}
.marquee{
  padding: 4px 0 !important;
}
.clients__label{
  margin-bottom: 6px !important;
}

/* Slightly smaller client items */
.marquee__item{
  font-size: 14px !important;
  padding: 4px 8px !important;
}

/* Reduce vertical rhythm impact of banner */
.clients + section{
  padding-top: 56px !important;
}

/* ===== end v18 ===== */


/* ===== v26 Global dark glass layer behind content ===== */

/* Dark translucent panel behind all blocks */
.site-backdrop{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(2,6,23,0.55); /* semi-transparent black */
}

/* Ensure content stays above backdrop */
header,
section,
footer{
  position: relative;
  z-index: 1;
}

/* Pattern layer stays below backdrop */
body[data-bg]::before,
body::after{
  z-index: -1 !important;
}

/* ===== end v26 ===== */


/* ===== v27 Container-width backdrop ===== */

/* Remove full-screen backdrop effect */
.site-backdrop{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, 100%); /* match wrap/container width */
  max-width: 1120px;
  z-index: 0;
  pointer-events: none;
  background: rgba(2,6,23,0.55);
}

/* On very large screens keep it centered */
@media (min-width: 1400px){
  .site-backdrop{
    width: 1120px;
  }
}

/* Content above backdrop */
header,
section,
footer{
  position: relative;
  z-index: 1;
}

/* ===== end v27 ===== */


/* ===== v28 Always-on animated background (grid + circuit nodes) ===== */
/* Base: keep seamless blob layer from v9/v21; add animated red grid + subtle nodes above it */
@keyframes bg-drift{
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 26px 26px; }
  to   { background-position: 480px 480px, 480px 480px, 640px -640px, -640px 640px, 480px 480px, 506px 506px; }
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* behind site backdrop */
  background-image:
    /* animated grid */
    linear-gradient(rgba(239,68,68,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.14) 1px, transparent 1px),
    /* circuit-ish diagonal traces */
    linear-gradient(135deg, rgba(239,68,68,0.12) 1px, transparent 1px),
    linear-gradient(45deg, rgba(248,113,113,0.10) 1px, transparent 1px),
    /* nodes */
    radial-gradient(circle, rgba(255,153,153,0.38) 0 1.5px, transparent 1.8px),
    radial-gradient(circle, rgba(255,153,153,0.26) 0 1.5px, transparent 1.8px);
  background-size:
    44px 44px,
    44px 44px,
    56px 56px,
    56px 56px,
    56px 56px,
    56px 56px;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    28px 28px;
  opacity: .55;
  animation: bg-drift 140s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}
/* Ensure backdrop sits above the pattern */
.site-backdrop{ z-index: 0; }
/* ===== end v28 ===== */


/* ===== v28 Media: full-bleed looping thumbnails ===== */
.thumbvid{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.feature__img, .proj__img, .profile-photo{
  padding: 0 !important;
}
/* ensure consistent heights for media areas */
.feature__img{ min-height: 170px; }
.proj__img{ min-height: 170px; }
/* ===== end v28 ===== */


/* ===== v29 Font: Roboto Mono ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600;700&display=swap');

:root{
  --font-main: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html, body{
  font-family: var(--font-main) !important;
}

h1, h2, h3, h4, h5, h6,
p, span, a, li, button, input, textarea{
  font-family: var(--font-main) !important;
}
/* ===== end v29 ===== */

/* ===== v31 Readability + desaturated blue + tertiary accent ===== */
:root{
  --accentT: #4fd1c5; /* teal contrast */
}

/* Slightly calmer/desaturated dark blue background */
body{
  background: linear-gradient(135deg,#0d1522 0%, #111c2a 45%, #0d1522 100%) !important;
}

/* Reduce backdrop darkness so text doesn't 'sink' */
.site-backdrop{
  background: rgba(2,6,23,0.42) !important;
}

/* Cards/panels: desaturated blue glass, higher contrast */
.card,
.feature,
.proj,
.contact a.link{
  background: linear-gradient(135deg,#101a27 0%, #152235 45%, #101a27 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 52px rgba(2,6,23,.38) !important;
  color: rgba(255,255,255,.96) !important;
}

/* Typography: brighter and more readable */
.card p,
.feature p,
.proj p{
  color: rgba(255,255,255,.90) !important;
  line-height: 1.68 !important;
}
.card .small,
.feature .small,
.proj .small{
  color: rgba(226,232,240,.82) !important;
}
.card .kicker,
.feature .kicker,
.proj .kicker{
  color: rgba(226,232,240,.72) !important;
}

/* Lists: boost contrast + accent markers */
.list li{
  color: rgba(255,255,255,.90) !important;
  line-height: 1.7 !important;
}
.list li::marker{
  color: var(--accentT) !important;
}

/* Pills/Tags: slightly clearer borders and a subtle accent option */
.pill, .tag{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.88) !important;
}

/* Use tertiary accent sparingly for highlights */
.pill.accent, .tag.accent{
  background: rgba(79,209,197,.14) !important;
  border-color: rgba(79,209,197,.35) !important;
}

/* Consulting section: nested cards should be clearly separated */
#schulungen .two-col > .card{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
#schulungen h3{
  letter-spacing: -0.01em;
}

/* Slightly increase readability for section headings on dark background */
.section-head h2,
.section-head h3{
  color: rgba(255,255,255,.94) !important;
  text-shadow: none !important;
}
.section-head .kicker{
  color: rgba(226,232,240,.72) !important;
}

/* Optional: make one or two micro-accents visible (e.g., arrows) */
.contact a.link span[aria-hidden="true"]{
  color: var(--accentT) !important;
}
/* ===== end v31 ===== */



/* === Profile Image Enhancement === */
.profile-image,
.profile-photo,
img.profile,
.author-photo {
  width: 240px !important;
  height: 240px !important;
  max-width: 240px !important;
  border-radius: 12px;
  border: 2px solid var(--accent-tertiary);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}


/* === Hero Persona Integration (Left) === */
.hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: center;
}

.hero-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-profile img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid var(--accent-tertiary);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

.hero-profile .name {
  margin-top: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.hero-profile .role {
  font-size: 0.9rem;
  color: var(--text-secondary);
}


/* ===== v40: Konsolidierung – Use Cases + ML-Agents/Sentis Layout ===== */
#projekte .projects{ align-items: stretch; }
#projekte .proj{ height: 100%; display:flex; flex-direction:column; }
#projekte .proj__body{ flex: 1 1 auto; }
#projekte .proj__img{ flex: 0 0 auto; overflow:hidden; }
#projekte .proj__img.ph-img{ display:block !important; padding:0 !important; overflow:hidden; line-height:0; }
#projekte .proj__img.ph-img > video,
#projekte .proj__img.ph-img > img{ width:100%; height:100%; display:block; object-fit:cover; }
#projekte .proj__img{ min-height: 220px; }

#mlagents-sentis .features{ display:grid; gap:14px; }
#mlagents-sentis .feature.feature--media{ display:grid; grid-template-columns:320px 1fr; gap:14px; align-items:stretch; }
#mlagents-sentis .feature__media{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r, 16px);
  overflow:hidden;
  min-height: 220px;
  display:grid;
  place-items:stretch;
}
#mlagents-sentis .feature__media video{ width:100%; height:100%; display:block; object-fit:cover; }
#mlagents-sentis .feature__body{ padding: 8px 0; min-width:0; }
#mlagents-sentis .feature__body h3{ margin: 0 0 10px 0; }
#mlagents-sentis .feature__body ul.list{ margin:0; padding-left:18px; }
#mlagents-sentis .feature__body ul.list li{ margin:6px 0; }
@media (max-width:820px){
  #mlagents-sentis .feature.feature--media{ grid-template-columns:1fr; }
  #mlagents-sentis .feature__body{ padding:8px 0 0 0; }
  #mlagents-sentis .feature__media{ min-height:240px; }
}
/* ===== end v40 ===== */


/* ===== v41: Projekt-Highlights – Cards + Accordion im bestehenden Look ===== */
.project-highlights .section-head{ margin-bottom: 14px; }
.project-highlights .muted{ opacity: .8; }

.proj-grid{ display:grid; gap:14px; }

.proj-card{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: var(--r, 16px);
  overflow:hidden;
}

.proj-text{ padding:14px; min-width:0; }
.proj-text h3{ margin:0 0 8px 0; }
.proj-meta{ opacity:.8; font-size:.92rem; margin:0 0 10px 0; }
.proj-tech{ margin-top:10px; opacity:.9; font-size:.95rem; }

.proj-media{
  background: rgba(0,0,0,.20);
  border-left: 1px solid rgba(255,255,255,.10);
  min-height:240px;
  display:grid;
  place-items:stretch;
  overflow:hidden;
}
.proj-media video, .proj-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.proj-details{ margin-top:10px; }
.proj-details summary{ cursor:pointer; user-select:none; font-weight:650; opacity:.95; }
.proj-details summary::marker{ color: rgba(255,255,255,.6); }
.proj-details[open] summary{ margin-bottom:10px; }
.proj-details ul.list{ margin:0; padding-left:18px; }
.proj-details ul.list li{ margin:6px 0; }

@media (max-width:900px){
  .proj-card{ grid-template-columns:1fr; }
  .proj-media{ border-left:0; border-top:1px solid rgba(255,255,255,.10); min-height:220px; }
}
/* ===== end v41 ===== */


/* ===== v42: Hintergrund-Visual (PNG mit Transparenz) ===== */
.bg-visual{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-visual img{
  position: absolute;
  right: -12%;
  bottom: -8%;
  width: min(1400px, 85vw);
  height: auto;
  opacity: 0.18;
  filter: saturate(0.9) contrast(1.05);
}
#page, main, .wrap{
  position: relative;
  z-index: 1;
}
/* ===== end v42 ===== */


/* ===== v44: Grid heller + Punkte schneller als Grid ===== */
/* Rebuild animated layers so they never tile with seams and remain visible. */
@keyframes bg-grid-drift{
  from{ background-position: 0 0, 0 0, 0 0, 0 0; }
  to  { background-position: 520px 520px, 520px 520px, 760px -760px, -760px 760px; }
}
@keyframes bg-dot-drift{
  from{ background-position: 0 0; }
  to  { background-position: 420px 420px; }
}

/* Put animated layers behind bg-visual (z -2) */
body::before, body::after{
  content:"";
  position: fixed;
  inset: -160px;
  pointer-events: none;
  z-index: -2;
}

/* Grid + traces (slower) */
body::before{
  background-image:
    /* grid (brighter) */
    linear-gradient(rgba(239,68,68,0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.22) 1px, transparent 1px),
    /* circuit traces */
    linear-gradient(135deg, rgba(239,68,68,0.14) 1px, transparent 1px),
    linear-gradient(45deg,  rgba(239,68,68,0.12) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px, 84px 84px, 84px 84px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  mask-image: radial-gradient(1100px 900px at 45% 18%, black 35%, transparent 72%);
  opacity: .85;
  animation: bg-grid-drift 28s linear infinite;
}

/* Dots (faster) */
body::after{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(900px 700px at 45% 22%, black 28%, transparent 72%);
  opacity: .35;
  animation: bg-dot-drift 16s linear infinite; /* faster than grid */
}

/* Prevent hairline seams on some GPUs */
body::before, body::after{ transform: translateZ(0); will-change: background-position; }
/* ===== end v44 ===== */


/* ===== v43: Seamless Base-Gradient (kein Kacheln/keine Nähte beim Scroll) ===== */
html{ background:#020617; position:relative; }
body{ background: transparent !important; }
html::before{
  content:"";
  position: fixed;
  inset: -240px;
  z-index: -3;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(59,130,246,.18), transparent 62%),
    radial-gradient(900px 600px at 82% 22%, rgba(34,211,238,.14), transparent 64%),
    radial-gradient(1200px 800px at 65% 92%, rgba(16,185,129,.12), transparent 66%),
    linear-gradient(180deg, rgba(2,6,23,1) 0%, rgba(2,6,23,.98) 38%, rgba(2,6,23,1) 100%);
  background-repeat:no-repeat;
  transform: translateZ(0);
  will-change: transform;
}
/* ===== end v43 ===== */



/* ===== v45 Override: Grid & Dots Visibility + Layer Order + Helvetica-like Font ===== */

/* Helvetica-like font (not Arial) */
:root{
  --font-main: "Helvetica Neue", Helvetica, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
}
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, button, input, textarea{
  font-family: var(--font-main) !important;
}

/* Layer order:
   html::before  (base gradient)        z:-4
   .bg-visual     (png)                 z:-3
   body::before/after (grid+dots)       z:-2
   .site-backdrop (glass)              z:0
   content                               z:1+
*/
html{ position:relative; }
html::before{ z-index: -4 !important; }

.bg-visual{ z-index: -3 !important; }
.bg-visual img{
  mix-blend-mode: screen;
  opacity: 0.16; /* keep subtle so grid stays readable */
  filter: saturate(0.9) contrast(1.06);
}

/* Rebuild animated layers (stronger contrast) */
@keyframes bg-grid-drift-v45{
  from{ background-position: 0 0, 0 0, 0 0, 0 0; }
  to  { background-position: 560px 560px, 560px 560px, 820px -820px, -820px 820px; }
}
@keyframes bg-dot-drift-v45{
  from{ background-position: 0 0, 18px 18px; }
  to  { background-position: 520px 520px, 538px 538px; }
}

body::before,
body::after{
  content:"";
  position: fixed;
  inset: -180px;
  pointer-events: none;
  z-index: -2 !important;
  transform: translateZ(0);
  will-change: background-position;
}

/* GRID (thicker + brighter) */
body::before{
  background-image:
    /* main grid */
    linear-gradient(rgba(239,68,68,0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.34) 1px, transparent 1px),
    /* circuit traces */
    linear-gradient(135deg, rgba(239,68,68,0.20) 1px, transparent 1px),
    linear-gradient(45deg,  rgba(239,68,68,0.18) 1px, transparent 1px);

  background-size: 52px 52px, 52px 52px, 92px 92px, 92px 92px;
  background-position: 0 0, 0 0, 0 0, 0 0;

  /* wider mask so it stays visible */
  mask-image: radial-gradient(1300px 1000px at 45% 22%, black 42%, transparent 78%);
  opacity: 0.98;

  animation: bg-grid-drift-v45 26s linear infinite;
}

/* DOTS (denser + visible; ~1px smaller than chunky dots, but not disappearing) */
body::after{
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 0.85px, transparent 0.95px),
    radial-gradient(circle, rgba(255,255,255,0.38) 0.85px, transparent 0.95px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;

  mask-image: radial-gradient(1050px 820px at 45% 26%, black 34%, transparent 76%);
  opacity: 0.62;

  animation: bg-dot-drift-v45 14s linear infinite;
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none !important; }
}

/* ===== end v45 ===== */



/* ===== v46 Font Override: DM Serif Text ===== */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');

:root{
  --font-main: "DM Serif Text", "Georgia", "Times New Roman", serif;
}

/* Headings & body use DM Serif Text */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, button, input, textarea{
  font-family: var(--font-main) !important;
  letter-spacing: 0.01em; /* keeps it crisp, not romantic */
}

/* Slight tuning for UI elements so serif doesn't feel heavy */
.btn, .pill, .tag, nav a{
  letter-spacing: 0.04em;
  font-size-adjust: 0.52;
}
/* ===== end v46 ===== */



/* ===== v49: Gradient white inner boxes (no transparency) ===== */

#kompetenzen .feature__body,
#projekte .proj__body,
#mlagents-sentis .feature__body,
#projekt-highlights .proj-text{
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%) !important;
  color: #0f172a !important;
  padding: 22px !important;
  border-radius: 6px;
}

/* Text inside */
#kompetenzen .feature__body p,
#projekte .proj__body p,
#mlagents-sentis .feature__body p,
#projekt-highlights .proj-text p,
#kompetenzen .feature__body li,
#projekte .proj__body li,
#mlagents-sentis .feature__body li,
#projekt-highlights .proj-text li{
  color: #111827 !important;
}

/* HEADINGS inside white boxes forced black */
#kompetenzen .feature__body h1,
#kompetenzen .feature__body h2,
#kompetenzen .feature__body h3,
#projekte .proj__body h1,
#projekte .proj__body h2,
#projekte .proj__body h3,
#mlagents-sentis .feature__body h1,
#mlagents-sentis .feature__body h2,
#mlagents-sentis .feature__body h3,
#projekt-highlights .proj-text h1,
#projekt-highlights .proj-text h2,
#projekt-highlights .proj-text h3{
  color: #0f172a !important;
  text-shadow: none !important;
}

/* ===== end v49 ===== */


/* ===== v50: Abstand zwischen weißen Textboxen und Videos ===== */

/* Kompetenzfelder */
#kompetenzen .feature{
  gap: 18px !important;
}

/* Use Cases */
#projekte .proj{
  gap: 18px !important;
}

/* Mobile consistency */
@media (max-width: 820px){
  #kompetenzen .feature{
    gap: 18px !important;
  }
  #projekte .proj{
    gap: 18px !important;
  }
}

/* ===== end v50 ===== */


/* ===== v51: Marquee slower for readability ===== */
.marquee__track{ animation-duration: 120s !important; }
/* ===== end v51 ===== */

/* ===== v51: Toolkit readability ===== */
#profil .card ul.list li strong{ color: rgba(255,255,255,.92) !important; }
#profil .card ul.list li{ line-height: 1.7; }
/* ===== end v51 ===== */