/* freestyle-digitizer.com : Finn Göpfert portfolio site
   Design system: black/white, Open Sans, no radius, no shadow, cyan accent. */

@font-face{
  font-family: "SoulRider Bold";
  src: url("fonts/soulrider-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Spliff Spray";
  src: url("fonts/spliff-spray.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Spliff Wildstyle";
  src: url("fonts/spliff-wildstyle.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Open Sans lokal (Variable Fonts, statt Google-CDN). Latin deckt DE/EN ab,
   latin-ext laedt der Browser nur bei Bedarf nach (unicode-range). */
@font-face{
  font-family: "Open Sans";
  src: url("fonts/open-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Open Sans";
  src: url("fonts/open-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Open Sans";
  src: url("fonts/open-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "Open Sans";
  src: url("fonts/open-sans-latin-ext-wght-italic.woff2") format("woff2");
  font-weight: 300 800; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Dark Theme (25.09.2026): Schwarz mit neonartigem Hellblau */
  --ink: #f2f4f6;          /* Text auf Schwarz */
  --paper: #0a0a0b;        /* Seitenhintergrund */
  --paper-alt: #121316;    /* wechselnde Abschnitte, Karten */
  --accent-tint: rgba(56,214,255,0.08);
  --line: #f2f4f6;
  --line-soft: #26282d;
  --gray: #9aa0a8;
  --text: #d6d9de;         /* Fliesstext, etwas weicher als --ink */
  --accent: #38d6ff;       /* Neon-Hellblau */
  --accent-hover: #7fe6ff;
  --on-accent: #06131a;    /* Text auf Akzentflaechen */
  --glow: 0 0 14px rgba(56,214,255,0.55);
  --maxw: 1120px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

/* Das mobile Off-Canvas-Menue (translateX(100%)) haengt wegen des
   backdrop-filter der Nav an .site-nav und wuerde die Seite sonst
   horizontal scrollbar machen ("zerschossene" Mobile-Ansicht). */
html, body{ overflow-x: hidden; overflow-x: clip; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Dezentes Hintergrundlicht: rechts oben und links unten, fix beim Scrollen */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 55vw 45vh at 100% 0%, rgba(56,214,255,0.07), transparent 70%),
    radial-gradient(ellipse 55vw 45vh at 0% 100%, rgba(56,214,255,0.06), transparent 70%);
}

img{ max-width:100%; display:block; }

a{ color: var(--ink); }
a.accent, .accent-color{ color: var(--accent); }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3{
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

.kicker{
  font-style: italic;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 0.5rem;
  display:block;
}

.eyebrow-line{
  border:0;
  border-top: 2px solid var(--ink);
  margin: 0 0 1.25rem;
}

.hairline{
  border:0;
  border-top: 1px solid var(--line-soft);
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--accent); color:var(--on-accent); padding: 0.6rem 1rem; z-index:200;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

/* ---------- Nav ---------- */
.site-nav{
  position: sticky; top:0; z-index:100;
  border-bottom: 1px solid var(--line-soft);
}
/* Hintergrund + Blur liegen auf dem Pseudo-Element: ein backdrop-filter direkt
   auf .site-nav wuerde die Leiste zum Containing Block fuer das fixe
   Off-Canvas-Menue machen und das mobile Menue unsichtbar halten. */
.site-nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(10,10,11,0.92);
  backdrop-filter: saturate(180%) blur(6px);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.brand{
  font-weight:800; text-transform:uppercase; letter-spacing:0.01em;
  font-size:1.05rem; text-decoration:none; color:var(--ink);
  white-space:nowrap;
}
.brand span{ color: var(--accent); }
.nav-links{
  display:flex; gap:1.5rem; list-style:none; margin:0; padding:0;
  align-items:center;
}
.nav-links a{
  text-decoration:none; font-size:0.9rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.02em;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}
.nav-links a:hover{ border-bottom-color: var(--accent); }
.lang-switch{
  display:flex; gap:0.4rem; font-size:0.85rem; font-weight:700;
}
.lang-switch a{
  text-decoration:none; padding: 0.15rem 0.4rem; border:1px solid var(--line-soft);
}
.lang-switch a.is-active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.nav-toggle{ display:none; }

/* Scroll-Fortschrittsleiste an der Unterkante der Sticky-Nav */
.scroll-progress{
  position:absolute; left:0; bottom:-1px; width:100%; height:3px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events:none;
}

@media (max-width: 760px){
  .nav-links{
    position:fixed; inset: 64px 0 0 0; background:var(--paper);
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    padding: 2rem 1.5rem; gap: 1.5rem; transform: translateX(100%);
    transition: transform 0.25s ease; overflow-y:auto;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ font-size:1.1rem; }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--ink); padding:0.4rem 0.6rem;
    font-size:1rem; cursor:pointer;
  }
}

/* ---------- Hero ---------- */
.hero{
  padding: 5rem 0 4rem;
}
.hero .kicker{ font-size:0.95rem; }
.hero h1{
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  margin: 0.4rem 0 1.25rem;
}
.hero .role{
  font-size: 1.15rem; font-weight:600; margin: 0 0 1.5rem; max-width: 46ch;
}
.hero .lede{
  max-width: 60ch; color: var(--text); margin: 0 0 2rem;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  text-transform:uppercase; letter-spacing:0.03em; font-size:0.85rem;
  padding: 0.9rem 1.6rem; border:2px solid var(--ink); color:var(--ink);
}
.btn:hover{ border-color: var(--accent); color: var(--accent); }
.btn-solid{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow: var(--glow);
}
.btn-solid:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent); }
.hero-contact{ font-size:0.9rem; color: var(--text); }
.hero-contact a{ text-decoration:none; border-bottom:1px solid var(--line-soft); }

/* ---------- Section shell ---------- */
section{ padding: 4.5rem 0; }
section.alt{ background: var(--accent-tint); }
.section-head{ margin-bottom: 2.5rem; }
.section-head h2{ font-size: clamp(2rem, 5vw, 3.1rem); }

/* ---------- Card (info box with folded corner) ---------- */
.card{
  position:relative;
  border: 1px solid var(--line-soft);
  padding: 2rem 1.75rem;
}
.card::before{
  content:"";
  position:absolute; top:0; left:0;
  width:0; height:0;
  border-style:solid;
  border-width: 24px 24px 0 0;
  border-color: #2e3238 transparent transparent transparent;
}

/* ---------- Two column layout (card + content) ---------- */
.split{
  display:grid; grid-template-columns: 340px 1fr; gap: 2.5rem; align-items:start;
}
@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; }
}

.list-plain{ list-style:none; margin:0; padding:0; }
.list-plain li{
  padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft);
  font-style: italic; color: var(--text);
}
.list-plain li:last-child{ border-bottom:0; }

.text-block p{ margin: 0 0 1rem; color: var(--text); max-width: 68ch; }
.text-block p:last-child{ margin-bottom:0; }

/* ---------- About / Hi world ---------- */
.about-grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items:start;
}
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } }

.facts-cols{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; }
.facts-cols h3{ font-size:1rem; text-transform:uppercase; font-style:italic; border-bottom:2px solid var(--ink); padding-bottom:0.5rem; margin-bottom:0.75rem; }
.facts-cols .list-plain{ margin-bottom:1.75rem; }
@media (max-width: 560px){ .facts-cols{ grid-template-columns:1fr; } }

/* ---------- Timeline ---------- */
.timeline{ position:relative; padding-left: 1.75rem; }
.timeline::before{
  content:""; position:absolute; left:0; top:0.4rem; bottom:0.4rem; width:2px;
  background: linear-gradient(180deg, var(--accent) 0, var(--accent) 3.5rem, var(--line-soft) 9rem);
}
.tl-item{ position:relative; padding-bottom: 2.25rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-1.75rem; top:0.3rem; width:10px; height:10px;
  background: var(--accent); transform: translateX(-4px);
}
.tl-date{ font-size:0.85rem; font-weight:700; color: var(--gray); text-transform:uppercase; letter-spacing:0.02em; font-variant-numeric: tabular-nums; }
.tl-role{ font-size:1.15rem; font-weight:800; margin: 0.2rem 0 0.3rem; }
.tl-detail{ margin:0; color: var(--text); max-width:70ch; }
.tl-link{ font-size:0.85rem; font-style:italic; display:inline-block; margin-top:0.35rem; }

/* ---------- Skills chips ---------- */
.skills-chips{
  display:flex; flex-wrap:wrap; gap:0.6rem;
}
.skills-chips span{
  display:inline-block;
  border:1px solid var(--ink);
  padding:0.55rem 1.05rem;
  font-weight:700; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.06em;
  line-height:1.2; white-space:nowrap;
  cursor:default;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.skills-chips span:hover{
  background:var(--accent); color:var(--on-accent);
}
.skills-chips .chip-accent{
  border-color:var(--accent); color:var(--accent);
}
.skills-chips .chip-accent:hover{
  background:var(--accent); color:var(--on-accent);
}

/* Subheading inside split columns (skills / timeline) */
.subhead{
  font-size:1.35rem;
  margin:0 0 1.25rem;
}

/* Skills column stays in view while the timeline scrolls */
.split-skills{ grid-template-columns: 380px 1fr; }
.split-skills > div:first-child{ position:sticky; top:96px; }
@media (max-width: 860px){
  .split-skills{ grid-template-columns:1fr; }
  .split-skills > div:first-child{ position:static; }
}

/* ---------- Stats ---------- */
.stat-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem;
  margin: 2rem 0;
}
.stat-row.stat-row-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px){ .stat-row{ grid-template-columns: repeat(2, 1fr); } }
.stat{ border-top: 3px solid var(--ink); padding-top:0.6rem; }
.stat strong{ display:block; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight:800; line-height:1; }
.stat span{ font-size:0.8rem; font-style:italic; color:var(--gray); }

/* ---------- Bullet feature list ---------- */
.feature-list{ list-style:none; margin:0; padding:0; }
.feature-list li{
  padding: 0.9rem 0; border-bottom:1px solid var(--line-soft);
  padding-left: 1.2rem; position:relative; color: var(--text);
}
.feature-list li::before{
  content:"→"; position:absolute; left:0; color: var(--accent); font-weight:700;
}
.feature-list li:last-child{ border-bottom:0; }

/* ---------- Media placeholder blocks ---------- */
.media-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.media-block{
  aspect-ratio: 4/3; background: var(--paper-alt);
  border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1rem; color:var(--gray); font-size:0.8rem; font-style:italic;
}
.media-block.dark{ background: var(--paper-alt); color:var(--ink); }
.media-block.accent{ background: var(--accent); color:var(--on-accent); border-color:var(--accent); }

.media-img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line-soft);
}
.portrait-photo{
  width:100%; max-width:320px; height:auto; display:block; margin-left:auto;
  border:1px solid var(--line-soft);
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.portrait-photo:hover{ filter: grayscale(0%); }
@media (max-width:560px){ .media-grid{ grid-template-columns:1fr; } }

/* ---------- Project cards ---------- */
.project-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
@media (max-width: 940px){ .project-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .project-grid{ grid-template-columns: 1fr; } }

.project-card{
  border:1px solid var(--line-soft); padding: 1.75rem;
  display:flex; flex-direction:column; height:100%;
  transition: border-color 0.15s ease;
}
.project-card:hover{ border-color: var(--accent); }
.project-card .kicker{ color: var(--gray); font-weight:700; }
.project-card h3{ font-size:1.35rem; margin: 0.35rem 0 0.75rem; }
.project-card p{ color: var(--text); margin:0 0 1rem; flex:1; }
.project-card .tl-link{ margin-top:auto; }
.mini-stats{ display:flex; gap:1.25rem; flex-wrap:wrap; margin: 0 0 0.9rem; }
.mini-stats div strong{ display:block; font-size:1.3rem; font-weight:800; }
.mini-stats div span{ font-size:0.7rem; color:var(--gray); font-style:italic; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }

.form-field{ margin-bottom: 1.4rem; }
.form-field label{
  display:block; font-size:0.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.02em; margin-bottom:0.4rem;
}
.form-field input, .form-field textarea{
  width:100%; border:0; border-bottom: 2px solid var(--line-soft);
  padding: 0.6rem 0.2rem; font-family:inherit; font-size:1rem; background:transparent;
}
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-bottom-color: var(--accent);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:0.8rem; color:var(--gray); margin-top:0.75rem; }
.form-status{ font-size:0.9rem; font-weight:700; margin-top:1rem; display:none; }
.form-status.is-visible{ display:block; }
.form-status.ok{ color:#4ade80; }
.form-status.err{ color:#f87171; }

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--line-soft); padding: 2.5rem 0; font-size:0.85rem; color: var(--text);
}
.footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; align-items:center; }
.footer-links{ list-style:none; display:flex; gap:1.25rem; margin:0; padding:0; }
.footer-links a{ text-decoration:none; color: var(--text); }
.footer-links a:hover{ color: var(--accent); }

/* ---------- Type specimens ---------- */
.type-grid{ display:flex; flex-direction:column; gap: 2rem; }
.type-card{
  position:relative; border:1px solid var(--line-soft); padding: 2rem 2rem 2.25rem;
}
.type-card::before{
  content:""; position:absolute; top:0; left:0; width:0; height:0;
  border-style:solid; border-width: 24px 24px 0 0;
  border-color: #2e3238 transparent transparent transparent;
}
.type-card-head{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:0.5rem;
  margin-bottom: 1rem;
}
.type-card-head h3{
  font-family: inherit; text-transform:none; font-size:1.1rem; font-weight:800; letter-spacing:0;
}
.type-tag{
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color: var(--gray); border:1px solid var(--line-soft); padding:0.15rem 0.5rem;
}
.specimen{
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  line-height: 1.05;
  margin: 0 0 1.25rem;
  word-break: break-word;
  color: var(--ink);
}
.waterfall{
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--text);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--line-soft);
  padding-top: 1rem;
  word-break: break-word;
}

/* ---------- Legal pages ---------- */
.legal{ padding: 3rem 0 4rem; max-width: 780px; }
.legal h1{ font-size: clamp(2rem,6vw,3rem); margin-bottom:2rem; }
.legal h2{ font-size:1.15rem; text-transform:none; margin: 2rem 0 0.75rem; }
.legal p, .legal li{ color: var(--text); }
.legal a{ color: var(--accent); }
.placeholder{ background: #3a3200; padding: 0 0.2rem; }

/* ---------- Scroll-Reveal + Micro-Animationen ---------- */
.js-anim .reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.7,.3,1), transform .7s cubic-bezier(.16,.7,.3,1);
  will-change: opacity, transform;
}
.js-anim .reveal.is-visible{ opacity:1; transform:none; }

/* Akzentlinie unter dem Hero-Titel, zeichnet sich beim Laden ein */
.hero h1{ position:relative; }
.hero h1::after{
  content:""; position:absolute; left:0; bottom:-0.12em;
  height:6px; width:0; background: var(--accent);
}
.js-anim .hero h1::after{ animation: heroUnderline 1s cubic-bezier(.16,.7,.3,1) .35s forwards; }
@keyframes heroUnderline{ to{ width: 2.4em; } }

/* Buttons: leichtes Anheben bei Hover */
.btn{ transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease; }
.btn:hover{ transform: translateY(-2px); }

/* Timeline: aktuelle Position hervorheben */
.tl-tag{
  display:inline-block; font-size:0.62rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--on-accent); background: var(--accent);
  padding: 0.12rem 0.5rem; margin-left: 0.4rem; vertical-align: middle;
}
.tl-current .tl-date{ color: var(--accent); }
.tl-current::before{ animation: pulseDot 2.2s ease-in-out infinite; }
@keyframes pulseDot{
  0%, 100%{ transform: translateX(-4px) scale(1); opacity:1; }
  50%{ transform: translateX(-4px) scale(1.6); opacity:0.65; }
}

@media (prefers-reduced-motion: reduce){
  .js-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js-anim .hero h1::after{ animation:none; width: 2.4em; }
  .tl-current::before{ animation:none; }
  .btn:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Tattoo-Galerie in der Projektkarte ---------- */
.tattoo-gallery{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; margin-top:auto;
}
.tg-item{
  padding:0; border:0; background:none; cursor:zoom-in; display:block;
  aspect-ratio:1/1; overflow:hidden;
}
.tg-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease, filter .35s ease; filter: grayscale(12%);
}
.tg-item:hover img{ transform: scale(1.07); filter: grayscale(0); }
.tg-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; display:none;
  background: rgba(12,12,12,.93); align-items:center; justify-content:center; padding:2rem;
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width:min(92vw, 1000px); max-height:86vh; width:auto; height:auto;
  border:1px solid rgba(255,255,255,.15);
}
.lightbox-close{
  position:absolute; top:.75rem; right:1.1rem; background:none; border:0;
  color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; padding:.2rem .55rem;
}
.lightbox-cap{
  position:absolute; bottom:1rem; left:0; right:0; text-align:center;
  color:var(--gray); font-size:.8rem; font-style:italic; padding:0 1.5rem;
}

/* ---------- FAQ / Antwort-Bloecke (AEO/GEO) ---------- */
.faq-list{ border-top:1px solid var(--ink); margin-top:1rem; }
.faq-item{ border-bottom:1px solid var(--line-soft); padding:1.4rem 0; }
.faq-item h3{ font-size:1.05rem; text-transform:none; letter-spacing:0; margin:0 0 .5rem; }
.faq-item p{ margin:0; color: var(--text); max-width:72ch; }
.faq-group{
  font-style: italic; font-weight:700; font-size:0.85rem; letter-spacing:0.02em;
  text-transform:none; margin:2.6rem 0 0; padding-top:1.6rem;
  border-top:3px solid var(--accent);
}
.faq-list > .faq-group:first-child{ margin-top:1.4rem; padding-top:1.2rem; border-top:0; }
.faq-item h4{ font-size:1.05rem; text-transform:none; letter-spacing:0; margin:0 0 .5rem; font-weight:700; }


@media (prefers-reduced-motion: reduce){ .tg-item img{ transition:none; } }

/* ---------- KPI-Ticker (Performance-Band unter dem Hero) ---------- */
.kpi-ticker{
  background: var(--ink);
  color:var(--ink);
  overflow:hidden;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--ink);
}
.kpi-track{
  display:inline-flex; align-items:center; gap:0;
  white-space:nowrap;
  padding: 0.85rem 0;
  animation: kpi-scroll 36s linear infinite;
  will-change: transform;
}
.kpi-ticker:hover .kpi-track{ animation-play-state: paused; }
.kpi-item{
  font-size:0.85rem; font-weight:600; letter-spacing:0.02em;
  padding: 0 1.4rem;
  border-right: 1px solid var(--line-soft);
}
.kpi-item strong{
  color: var(--accent);
  font-weight:800; font-size:1rem;
  margin-right:0.35rem;
  font-variant-numeric: tabular-nums;
}
@keyframes kpi-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .kpi-track{ animation:none; }
}

/* ---------- Progressive Stat-Optik: Kennzahlen in Akzentfarbe ---------- */
.stat{ border-top-color: var(--accent); position:relative; overflow:hidden; }
.stat::after{
  content:""; position:absolute; top:0; left:0; height:3px; width:100%;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  transform: translateY(-3px);
}
.stat strong{ color: var(--accent); }
.mini-stats div strong{ color: var(--accent); }

/* ---------- Mehrseitige Struktur: Breadcrumb, Zitate, Projektbloecke ---------- */

.breadcrumb {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1.4rem 0 0;
  opacity: .72;
}
.breadcrumb a { text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumb a:hover { border-bottom-color: currentColor; }
.breadcrumb span[aria-hidden] { opacity: .45; margin: 0 .15rem; }

.nav-links a.is-active { border-bottom: 2px solid currentColor; }

.pullquote {
  margin: 1.6rem 0 1.8rem;
  padding: 0 0 0 1.4rem;
  border-left: 3px solid currentColor;
}
.pullquote p {
  font-size: 1.28rem;
  line-height: 1.45;
  font-style: italic;
  margin: 0;
}
.pullquote cite {
  display: block;
  margin-top: .7rem;
  font-size: .85rem;
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .7;
}

.digi-block { margin: 0 0 3.2rem; }
.digi-block h3 { font-size: 1.5rem; margin: .35rem 0 0; }
.digi-block > p { max-width: 62ch; }
.digi-block:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .pullquote p { font-size: 1.45rem; }
}

/* ---------- Fix: Loch zwischen Text und Bild in den Projektkarten ----------
   Vorher dehnte flex:1 am Absatz den Text auf die volle Kartenhoehe, wodurch
   das Bild ans untere Ende gedrueckt wurde und eine grosse Luecke entstand.
   Jetzt sitzt das Bild direkt unter dem Text, der Ausgleich passiert unten. */
.project-card p { flex: 0 0 auto; }
.project-card .media-img { margin-top: .25rem; }
.project-card .tattoo-gallery { margin-top: .5rem; }

/* Zweispaltige Variante fuer Karten mit Bild, damit die Bilder gross genug sind */
.project-grid.is-wide { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px){ .project-grid.is-wide { grid-template-columns: 1fr; } }

/* ---------- Referenzen: grosse, alternierende Bild-Text-Zeilen ---------- */
.ref-list { display: flex; flex-direction: column; gap: 4.5rem; }

.ref-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 3rem;
  align-items: center;
}
.ref-item .ref-media { margin: 0; }
.ref-item .ref-media img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-soft);
}
.ref-item .ref-media figcaption {
  font-size: .78rem;
  font-style: italic;
  color: var(--gray);
  margin-top: .5rem;
}
.ref-item h3 { font-size: 1.6rem; margin: .35rem 0 .9rem; }
.ref-item p { color: var(--text); max-width: 60ch; }
.ref-item .mini-stats { margin: 1.1rem 0 0; }

@media (min-width: 860px) {
  .ref-item { grid-template-columns: 1.05fr 1fr; }
  .ref-item .ref-media { grid-column: 1; grid-row: 1; }
  .ref-item .ref-body  { grid-column: 2; grid-row: 1; }
  /* jede zweite Zeile spiegeln */
  .ref-item:nth-child(even) .ref-media { grid-column: 2; }
  .ref-item:nth-child(even) .ref-body  { grid-column: 1; }
}

.ref-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .7rem;
  margin-top: .7rem;
}
.ref-thumbs img { width: 100%; height: auto; display: block; border: 1px solid var(--line-soft); }

/* App-Screenshots in den Digitalisierungsbloecken */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.8rem;
  align-items: start;
}
.shot-grid figure { margin: 0; }
.shot-grid img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line-soft);
}
.shot-grid figcaption {
  font-size: .78rem; font-style: italic; color: var(--gray); margin-top: .5rem;
}
@media (min-width: 760px) { .shot-grid { grid-template-columns: repeat(2, 1fr); } }

/* Karten behalten ihre natuerliche Hoehe. Vorher streckte das Raster jede
   Karte auf die Hoehe der laengsten in derselben Zeile, was bei ungleich
   langen Texten grosse leere Flaechen erzeugt hat. */
.project-grid { align-items: start; }
.project-card { height: auto; }

/* ---------- Referenzen deutlicher voneinander trennen ----------
   Vorher stiess die Bildunterschrift der einen Referenz fast an den Kicker
   der naechsten. Jetzt: mehr Luft plus eine feine Trennlinie ueber jeder
   Referenz ausser der ersten. */
.ref-list { gap: 0; }

.ref-item + .ref-item {
  margin-top: 4.5rem;
  padding-top: 4.5rem;
  border-top: 1px solid var(--line-soft);
}

@media (min-width: 860px) {
  .ref-item + .ref-item { margin-top: 5.5rem; padding-top: 5.5rem; }
}

/* Bildunterschrift etwas absetzen, damit sie zum Bild gehoert
   und nicht zum naechsten Absatz */
.ref-item .ref-media figcaption { margin-top: .6rem; line-height: 1.45; }

/* Rollenangabe unter einem Fallbeispiel */
.case-role {
  font-size: .88rem;
  font-style: italic;
  color: var(--gray);
  margin-top: -.4rem;
}

/* ---------- Einwilligungsbanner ----------
   Erscheint nur, wenn Google Analytics konfiguriert ist und noch keine
   Entscheidung vorliegt. Ablehnen ist gleich prominent wie Zustimmen. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: var(--paper-alt);
  border-top: 2px solid var(--ink);
  box-shadow: 0 -8px 24px rgba(0,0,0,.6); border-top:1px solid var(--line-soft);
}
.consent[hidden] { display: none !important; }
.consent-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: 1rem;
  align-items: center;
}
.consent-title {
  font-weight: 800;
  font-size: 1.02rem;
  margin: 0 0 .35rem;
}
.consent-text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 78ch;
}
.consent-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.consent-actions .btn { white-space: nowrap; }

@media (min-width: 820px) {
  .consent-inner { grid-template-columns: 1fr auto; gap: 2rem; }
}

/* ---------- Navigation: acht Punkte brauchen weniger Schrift und mehr Luft ----
   Vorher stiess der erste Menuepunkt direkt an die Wortmarke und "Über mich"
   brach in zwei Zeilen um. Ausserdem klappt das Burger-Menue jetzt schon bei
   1040 Pixeln auf, weil die Leiste darunter nicht mehr sauber in eine Zeile
   passt. */

@media (min-width: 1041px) {
  .site-nav .nav-links {
    gap: 1.05rem;
    margin-left: 2rem;
    flex-wrap: nowrap;
  }
  .site-nav .nav-links a {
    font-size: .76rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .site-nav .lang-switch { font-size: .74rem; margin-left: .35rem; }
  .site-nav .lang-switch a { padding: .12rem .34rem; }
  .site-nav .brand { font-size: .98rem; }
}

@media (min-width: 1280px) {
  .site-nav .nav-links { gap: 1.4rem; margin-left: 2.5rem; }
  .site-nav .nav-links a { font-size: .82rem; }
  .site-nav .lang-switch { font-size: .78rem; }
  .site-nav .brand { font-size: 1.05rem; }
}

/* Burger-Menue bis 1040 Pixel statt bis 760 */
@media (max-width: 1040px) {
  .site-nav .nav-links {
    position: fixed; inset: 64px 0 0 0; background: var(--paper);
    flex-direction: column; justify-content: flex-start; align-items: flex-start;
    padding: 2rem 1.5rem; gap: 1.5rem; transform: translateX(100%);
    transition: transform .25s ease; overflow-y: auto;
    margin-left: 0;
  }
  .site-nav .nav-links.is-open { transform: translateX(0); }
  .site-nav .nav-links a { font-size: 1.1rem; }
  .site-nav .nav-toggle {
    display: block; background: none; border: 1px solid var(--ink);
    padding: .4rem .6rem; font-size: 1rem; cursor: pointer;
  }
}

/* ---------- Mehr Luft zwischen Text und den Buttons darunter ----------
   Vorher klebten die Handlungsaufforderungen am letzten Absatz, sowohl im
   Hero als auch in den Abschluss-Bloecken jeder Seite. */

.hero-actions { margin-top: 2.25rem; }

/* Abschluss-Bloecke: der Button steht in einem eigenen Absatz */
section .text-block > p:last-child:has(.btn) { margin-top: 2rem; }

/* Fallback fuer Browser ohne :has() */
.text-block p .btn { margin-top: .9rem; }

/* Karten und Listen: Abstand vor einem nachgestellten Textlink */
section > .wrap > p > .tl-link,
section .project-grid + p { margin-top: .5rem; }
section .project-grid + p,
section .ref-list + p,
section .feature-list + p { margin-top: 2rem; }

/* ---------- Abstaende nachgeschaerft ----------
   1. Die Chip-Reihen klebten am Absatz darueber.
   2. Die Faelle auf der Krisenseite gingen ineinander ueber: Die Rollenzeile
      des einen Falls stand direkt am Kicker des naechsten. */

.text-block + .skills-chips,
p + .skills-chips { margin-top: 1.8rem; }
.skills-chips { row-gap: .75rem; }

/* Projekt- und Fallbloecke deutlicher voneinander absetzen */
.digi-block { margin-bottom: 0; }
.digi-block + .digi-block {
  margin-top: 3.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--line-soft);
}
.digi-block .kicker { display: inline-block; margin-bottom: .15rem; }
.digi-block h3 { margin: .3rem 0 1.1rem; }
.digi-block > p { margin-bottom: 1.1rem; }
.digi-block .feature-list { margin-top: 1.4rem; }

/* Rollenzeile gehoert zum Fall darueber, nicht zum naechsten */
.case-role {
  margin-top: 1.4rem;
  margin-bottom: 0;
  padding-left: .9rem;
  border-left: 2px solid var(--line-soft);
}

/* Abstand zwischen den Bloecken und dem Text, der sie einleitet */
.section-head + .digi-block { margin-top: .5rem; }
.digi-block + .text-block { margin-top: 3.5rem; }

@media (min-width: 860px) {
  .digi-block + .digi-block { margin-top: 4.2rem; padding-top: 4.2rem; }
}

/* ---------- Grafische Bausteine (07.09.2026) ---------- */

/* Profil-Leiste unter dem Hero */
.profile-bar{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--paper); }
.pb-grid{ display:grid; grid-template-columns: repeat(5, 1fr); }
.pb-item{
  padding: 1.4rem 1.25rem 1.3rem; border-left:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:0.35rem;
}
.pb-item:first-child{ border-left:0; padding-left:0; }
.pb-icon{ color: var(--accent); }
.pb-item strong{ font-size:1.55rem; font-weight:800; line-height:1.05; letter-spacing:-0.01em; white-space:nowrap; }
.pb-item span{ font-size:0.78rem; font-style:italic; color:var(--gray); line-height:1.35; }
@media (max-width: 900px){
  .pb-grid{ grid-template-columns: repeat(3, 1fr); }
  .pb-item{ padding: 1.1rem 1rem; }
  .pb-item:nth-child(4){ border-left:0; padding-left:0; }
}
@media (max-width: 560px){
  .pb-grid{ grid-template-columns: repeat(2, 1fr); }
  .pb-item:nth-child(4){ border-left:1px solid var(--line-soft); padding-left:1rem; }
  .pb-item:nth-child(odd){ border-left:0; padding-left:0; }
  .pb-item strong{ font-size:1.3rem; }
}

/* Vier Schritte als Kacheln */
.steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; border-top:3px solid var(--line-soft); margin-top:2rem; }
.step{ padding: 1.4rem 1.4rem 1.6rem 0; border-right:1px solid var(--line-soft); margin-right:1.4rem; position:relative; }
.step:last-child{ border-right:0; margin-right:0; }
.step-no{ display:block; font-size:2.4rem; font-weight:800; line-height:1; color:var(--accent); font-variant-numeric: tabular-nums; margin-bottom:0.6rem; }
.step h3{ font-size:1.05rem; margin: 0 0 0.5rem; }
.step p{ margin:0; font-size:0.92rem; color: var(--text); }
@media (max-width: 860px){
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2){ border-right:0; margin-right:0; }
  .step:nth-child(n+3){ border-top:1px solid var(--line-soft); }
}
@media (max-width: 480px){
  .steps{ grid-template-columns: 1fr; }
  .step{ border-right:0; margin-right:0; padding-right:0; }
  .step:nth-child(n+2){ border-top:1px solid var(--line-soft); }
}

/* Rollen als Kacheln */
.role-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.role-tile{ border:1px solid var(--line-soft); padding:1.4rem 1.5rem; background:var(--paper); transition: border-color .15s ease; }
.role-tile:hover{ border-color: var(--accent); }
.role-tile h3{ font-size:1rem; margin:0 0 0.5rem; padding-bottom:0.5rem; border-bottom:3px solid var(--accent); display:inline-block; }
.role-tile p{ margin:0; font-size:0.92rem; color: var(--text); }
@media (max-width: 900px){ .role-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .role-grid{ grid-template-columns: 1fr; } }

/* Sprachen als Kacheln */
.lang-tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-bottom:1.75rem; }
.lang-tile{ background:var(--paper-alt); color:var(--ink); border:1px solid var(--line-soft); padding:1.6rem 1.5rem; border-top:4px solid var(--accent); }
.lang-tile strong{ display:block; font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:-0.02em; }
.lang-tile span{ display:block; margin-top:0.5rem; font-size:0.82rem; font-style:italic; color:var(--gray); }
@media (max-width: 560px){ .lang-tiles{ grid-template-columns: 1fr; } }

/* Aufklapp-Text: Details bleiben im HTML */
details.more{ margin-top:1.25rem; }
details.more summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:0.5rem;
  font-weight:700; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em;
  border-bottom:2px solid var(--ink); padding-bottom:0.15rem; user-select:none;
}
details.more summary::-webkit-details-marker{ display:none; }
details.more summary::after{ content:"+"; font-size:1.1rem; line-height:1; color:var(--accent); }
details.more[open] summary::after{ content:"\2013"; }
details.more summary:hover{ color:var(--accent); border-color:var(--accent); }
details.more .more-body{ margin-top:1.25rem; }
details.more.more-card{ margin-top:0.25rem; margin-bottom:1rem; }
details.more.more-card summary{ font-size:0.72rem; }
details.more.more-card p{ margin:0.85rem 0 0; color: var(--text); font-size:0.92rem; }

/* Sichtbarkeit: Kurve plus drei Kennzahlen */
.vis-grid{ display:grid; grid-template-columns: minmax(0, 1fr) 260px; gap:2.5rem; align-items:stretch; }
.vis-stats{ display:grid; grid-template-rows: repeat(3, 1fr); gap:1rem; }
.vis-stats .stat strong{ font-size: clamp(2rem, 3.2vw, 2.6rem); }
.vis-note{ font-size:0.78rem; font-style:italic; color:var(--gray); margin: 0.75rem 0 0; }
@media (max-width: 860px){
  .vis-grid{ grid-template-columns: 1fr; }
  .vis-stats{ grid-template-rows:none; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){ .vis-stats{ grid-template-columns: 1fr 1fr; } }

.ai-chart{ width:100%; height:auto; display:block; font-family: inherit; }
.ac-grid{ stroke: var(--line-soft); stroke-width:1; }
.ac-tick{ font-size:11px; fill: var(--gray); }
.ac-area{ fill: var(--accent); fill-opacity:0.08; }
.ac-line{ fill:none; stroke: var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ac-dot{ fill:var(--paper); stroke: var(--accent); stroke-width:2.5; }
.ac-label{ font-size:14px; font-weight:800; fill: var(--ink); }
.ac-hit{ fill:transparent; stroke:none; }
.ac-hit:hover{ fill: var(--accent); fill-opacity:0.18; }
.ac-table{ border-collapse:collapse; font-size:0.85rem; }
.ac-table th, .ac-table td{ text-align:left; padding:0.3rem 1.25rem 0.3rem 0; border-bottom:1px solid var(--line-soft); }
.ac-table td:last-child{ font-variant-numeric: tabular-nums; font-weight:700; }

/* Statement-Zeile im Digitalisierungs-Block */
.lede-strong{ font-size:1.2rem; font-weight:600; line-height:1.45; max-width:60ch; margin:0 0 1rem; }
.ai-chart-m{ display:none; }
@media (max-width: 560px){ .ai-chart-d{ display:none; } .ai-chart-m{ display:block; } }
.role-grid{ margin-top:1.75rem; }
.vis-grid{ margin-top:0.5rem; }

/* Kacheln aus Listenpunkten (Unterseiten) */
.tile-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:1rem; margin-top:1.75rem; }
.tile{ border:1px solid var(--line-soft); padding:1.4rem 1.5rem; background:var(--paper); transition: border-color .15s ease; }
.tile:hover{ border-color: var(--accent); }
.tile h3{ font-size:1rem; margin:0 0 0.6rem; padding-bottom:0.5rem; border-bottom:3px solid var(--accent); display:inline-block; }
.tile p{ margin:0; font-size:0.92rem; color: var(--text); }
.digi-block details.more{ margin-top:0.75rem; margin-bottom:1rem; }
.ref-body details.more{ margin-top:0.5rem; }
.ref-body details.more p{ margin:0.75rem 0 0; }
@media (min-width: 1000px){ .tile-grid-5{ grid-template-columns: repeat(5, 1fr); } .tile-grid-5 .tile{ padding:1.2rem 1.1rem; } }

/* Claim unter der Marke (25.09.2026) */
.hero .claim{ font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color: var(--accent); margin: 0 0 0.9rem; }
.hero .role strong{ font-weight:800; }

/* Video-Einbettung, laedt erst nach Klick */
.video-embed{ position:relative; aspect-ratio:16/9; background: var(--ink); margin-top:1rem; display:flex; align-items:center; justify-content:center; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Dark Theme, Feinschliff (25.09.2026) ---------- */
html{ color-scheme: dark; }
body{ background: var(--paper); color: var(--ink); }
a{ color: var(--ink); }
a:hover{ color: var(--accent); }
h1, h2, h3{ color: var(--ink); }
.kicker{ color: var(--accent); }
.hero h1::after{ background: var(--accent); box-shadow: var(--glow); }
.hero .claim{ color: var(--accent); text-shadow: 0 0 18px rgba(56,214,255,0.55); }
.btn{ color: var(--ink); border-color: var(--ink); }
.btn:hover{ color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.stat{ border-top-color: var(--accent); }
.stat strong{ color: var(--accent); text-shadow: 0 0 12px rgba(56,214,255,0.45); }
.stat span, .mini-stats div span{ color: var(--gray); }
.mini-stats div strong{ color: var(--accent); }
.project-card, .tile, .role-tile{ background: var(--paper-alt); border-color: var(--line-soft); }
.project-card:hover, .tile:hover, .role-tile:hover{ border-color: var(--accent); box-shadow: var(--glow); }
.tile h3, .role-tile h3{ border-bottom-color: var(--accent); }
.step-no{ color: var(--accent); text-shadow: 0 0 12px rgba(56,214,255,0.45); }
.step, .steps{ border-color: var(--line-soft); }
.profile-bar{ border-color: var(--line-soft); background: var(--paper); }
.pb-item{ border-color: var(--line-soft); }
.pb-icon{ color: var(--accent); filter: drop-shadow(0 0 6px rgba(56,214,255,0.6)); }
.kpi-ticker{ background:#000; border-top:2px solid var(--accent); border-bottom:1px solid var(--line-soft); }
.kpi-item strong{ color: var(--accent); }
.feature-list li{ border-color: var(--line-soft); }
.feature-list li::before{ color: var(--accent); }
.skills-chips span{ border-color: var(--ink); color: var(--ink); }
.faq-item, .faq-list, .list-plain li, .footer, .ref-item, .digi-block{ border-color: var(--line-soft); }
details.more summary{ border-bottom-color: var(--ink); }
details.more summary:hover{ color: var(--accent); border-color: var(--accent); }
details.more summary::after{ color: var(--accent); }
.tl-link{ color: var(--accent); }
.text-block p, .faq-item p, .project-card p, .tile p, .role-tile p, .step p, .ref-item p, .legal p, .legal li, .tl-detail{ color: var(--text); }
.ac-grid{ stroke: var(--line-soft); }
.ac-area{ fill: var(--accent); fill-opacity:0.12; }
.ac-line{ stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(56,214,255,0.6)); }
.ac-label{ fill: var(--ink); }
.ac-tick{ fill: var(--gray); }
.ac-table th, .ac-table td{ border-color: var(--line-soft); }
.form-field input, .form-field textarea{ color: var(--ink); border-color: var(--line-soft); background: transparent; }
.form-field input:focus, .form-field textarea:focus{ border-color: var(--accent); outline: none; }
.footer-links a{ color: var(--gray); }
.footer-links a:hover{ color: var(--accent); }
.nav-links a{ color: var(--ink); }
.nav-links a:hover{ border-bottom-color: var(--accent); }
.brand{ color: var(--ink); }
.brand span{ color: var(--accent); text-shadow: 0 0 10px rgba(56,214,255,0.5); }
.lang-switch a{ color: var(--ink); border-color: var(--line-soft); }
.nav-toggle{ color: var(--ink); border-color: var(--ink); }
.scroll-progress{ background: var(--accent); box-shadow: var(--glow); }
.video-embed{ border:1px solid var(--line-soft); }

.consent-banner, .consent{ color: var(--ink); }

/* ==========================================================================
   Widgets gegen Textwuesten (28.09.2026)
   ========================================================================== */

/* Statement-Quotes: Neon statt Textfarbe, grosser Satz als Blickfang */
.pullquote{ border-left-color: var(--accent); padding-left: 1.6rem; margin: 2.2rem 0; }
.pullquote p{ color: var(--ink); font-weight: 700; font-style: normal; max-width: 34ch; }
.pullquote p::before{ content: "\201E"; color: var(--accent); margin-right: .1em; }
.pullquote p::after{ content: "\201C"; color: var(--accent); margin-left: .05em; }
html[lang^="en"] .pullquote p::before{ content: "\201C"; }
html[lang^="en"] .pullquote p::after{ content: "\201D"; }
@media (min-width: 720px){ .pullquote p{ font-size: 1.7rem; line-height: 1.3; } }

/* Vorher-Nachher-Balken */
.delta-bars{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem 2rem; margin: 2.4rem 0 .6rem; }
@media (max-width: 860px){ .delta-bars{ grid-template-columns: 1fr; } }
.delta{ border-top: 3px solid var(--line-soft); padding-top: .9rem; }
.delta-head{ display:flex; justify-content:space-between; align-items:baseline; gap: 1rem; margin-bottom: .8rem; }
.delta-label{ font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray); }
.delta-pct{ font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; line-height: 1; color: var(--accent); text-shadow: var(--glow); white-space: nowrap; }
.delta-row{ display:grid; grid-template-columns: 4.2rem 1fr 4.6rem; align-items:center; gap: .6rem; margin: .35rem 0; }
.delta-when{ font-size: .72rem; color: var(--gray); font-variant-numeric: tabular-nums; }
.delta-track{ height: 10px; background: var(--paper-alt); position: relative; overflow: hidden; }
.delta-bar{ position:absolute; left:0; top:0; bottom:0; width: var(--w); }
.delta-before{ background: #4a4e57; }
.delta-after{ background: var(--accent); box-shadow: var(--glow); }
.delta-val{ font-size: .85rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Wachsen beim Reinscrollen (Klasse is-visible setzt site.js) */
.js-anim .delta .delta-bar{ width: 0; transition: width 1.1s cubic-bezier(.16,.7,.3,1); }
.js-anim .delta.is-visible .delta-bar{ width: var(--w); }
.js-anim .delta.is-visible .delta-after{ transition-delay: .25s; }

/* Namensband: ruhiger zweiter Ticker, nur Wortmarken als Text */
.name-band{ padding: 2.2rem 0 2.4rem; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.nb-label{ display:block; font-size: .8rem; font-style: italic; font-weight: 700; color: var(--gray); margin-bottom: 1rem; }
.nb-viewport{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nb-track{ display: inline-flex; white-space: nowrap; animation: nb-scroll 60s linear infinite; }
.name-band:hover .nb-track{ animation-play-state: paused; }
.nb-dup{ display: inline-flex; }
.nb-item{ font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: #5d626c; padding: 0 1.6rem; transition: color .2s ease; }
.nb-item::after{ content: ""; display:inline-block; width: 6px; height: 6px; background: var(--accent); margin-left: 3.2rem; vertical-align: middle; opacity: .6; }
.nb-item:hover{ color: var(--ink); }
@keyframes nb-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* FAQ als Accordion (site.js ruestet nach; ohne JS bleibt alles offen) */
.faq-toggle{ all: unset; box-sizing: border-box; display:flex; width:100%; justify-content:space-between; align-items:flex-start; gap: 1rem; cursor:pointer; font: inherit; color: var(--ink); }
.faq-toggle::after{ content: "+"; flex: 0 0 auto; font-size: 1.5rem; line-height: 1; font-weight: 400; color: var(--accent); transition: transform .25s ease; }
.faq-toggle:hover{ color: var(--accent); }
.faq-toggle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }
.faq-collapsible.is-open .faq-toggle::after{ transform: rotate(45deg); }
.faq-collapsible > h3, .faq-collapsible > h4{ margin: 0; }
.faq-collapsible > :not(h3):not(h4){ display: none; }
.faq-collapsible.is-open > :not(h3):not(h4){ display: block; margin-top: .7rem; animation: faq-in .25s ease; }
@keyframes faq-in{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  .nb-track{ animation: none; flex-wrap: wrap; white-space: normal; }
  .nb-dup{ display: none; }
  .js-anim .delta .delta-bar{ transition: none; width: var(--w); }
  .faq-collapsible.is-open > :not(h3):not(h4){ animation: none; }
}

/* ---------- Werdegang als Scroll-Timeline (01.10.2026) ---------- */
.cv-timeline{ list-style:none; margin:2.5rem 0 0; padding:0; position:relative; }
.cv-timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--line-soft); }
.cv-timeline::after{ content:""; position:absolute; left:50%; top:0; width:2px; margin-left:-1px; height:var(--cvt-progress,0%); background:var(--accent); box-shadow:0 0 12px var(--accent); transition:height .15s linear; }
.cvt-item{ position:relative; width:50%; padding:0 2.6rem 2.4rem 0; box-sizing:border-box; }
.cvt-item.cvt-right{ margin-left:50%; padding:0 0 2.4rem 2.6rem; }
.cvt-item + .cvt-item{ margin-top:-4rem; }
.cvt-dot{ position:absolute; top:.35rem; right:-7px; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--accent); box-shadow:0 0 10px var(--accent); z-index:1; }
.cvt-right .cvt-dot{ right:auto; left:-7px; }
.cvt-card{ background:var(--paper-alt); border:1px solid var(--line-soft); border-top:2px solid var(--accent); padding:1.1rem 1.25rem 1.2rem; }
.cvt-card img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center top; margin:-1.1rem -1.25rem 1rem; width:calc(100% + 2.5rem); max-width:none; }
.cvt-year{ display:block; color:var(--accent); font-weight:800; font-style:italic; font-size:.95rem; letter-spacing:.02em; }
.cvt-card h3{ margin:.25rem 0 .45rem; font-size:1.12rem; color:var(--ink); }
.cvt-card p{ margin:0; font-size:.95rem; }
.cvt-link{ display:inline-block; margin-top:.6rem; font-weight:700; font-size:.88rem; color:var(--accent); }
.js-anim .cvt-item.reveal{ transform:translateX(-28px); }
.js-anim .cvt-right.reveal{ transform:translateX(28px); }
.js-anim .cvt-item.reveal.is-visible{ transform:none; }
.js-anim .cvt-item.reveal .cvt-dot{ transform:scale(.2); transition:transform .5s cubic-bezier(.16,.7,.3,1) .15s; }
.js-anim .cvt-item.reveal.is-visible .cvt-dot{ transform:none; }
@media (max-width: 760px){
  .cv-timeline::before, .cv-timeline::after{ left:7px; }
  .cvt-item, .cvt-item.cvt-right{ width:100%; margin-left:0; padding:0 0 1.8rem 2rem; }
  .cvt-item + .cvt-item{ margin-top:0; }
  .cvt-dot, .cvt-right .cvt-dot{ left:0; right:auto; }
  .js-anim .cvt-item.reveal, .js-anim .cvt-right.reveal{ transform:translateY(20px); }
}
@media (prefers-reduced-motion: reduce){ .cv-timeline::after{ transition:none; } }

/* ---------- COR: Kanal, Zahlen, Shorts, Streaming (01.10.2026) ---------- */
.cor-show{ margin-top:2rem; }
.cor-channel{ display:block; border:1px solid var(--line-soft); background:var(--paper); text-decoration:none; color:inherit; margin-bottom:1.6rem; }
.cor-channel:hover{ border-color:var(--accent); }
.cc-banner{ display:block; width:100%; height:auto; }
.cc-row{ display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; }
.cc-avatar{ width:64px; height:64px; border-radius:50%; border:2px solid var(--accent); }
.cc-row strong{ display:block; color:var(--ink); font-size:1.35rem; font-weight:800; }
.cc-row em{ color:var(--gray); font-size:.9rem; }
.cor-kpis{ margin-top:0; }
.small-note{ color:var(--gray); font-style:italic; font-size:.85rem; margin:.4rem 0 1.4rem; }
.cor-videos{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.cor-videos a{ display:block; padding:.9rem 1.1rem; border:1px solid var(--line-soft); border-left:3px solid var(--accent); background:var(--paper); text-decoration:none; }
.cor-videos strong{ display:block; color:var(--ink); }
.cor-videos span{ color:var(--gray); font-size:.9rem; }
.cor-shorts{ display:grid; grid-template-columns:repeat(9, 1fr); gap:.6rem; margin-bottom:2rem; }
.cor-short{ position:relative; display:block; text-decoration:none; border:1px solid var(--line-soft); overflow:hidden; }
.cor-short img{ display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; transition:transform .4s ease; }
.cor-short:hover img{ transform:scale(1.04); }
.cor-short:hover{ border-color:var(--accent); }
.cs-t, .cs-v{ position:absolute; left:0; right:0; padding:0 .45rem; font-size:.72rem; line-height:1.25; }
.cs-t{ bottom:1.5rem; color:var(--ink); font-weight:700; text-shadow:0 1px 3px #000; }
.cs-v{ bottom:.35rem; color:var(--accent); font-weight:800; }
.cor-short::after{ content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent, rgba(0,0,0,.85)); pointer-events:none; }
.cs-t, .cs-v{ z-index:1; }
.cor-stream h3{ margin:.2rem 0 .3rem; color:var(--ink); }
.stream-links{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
@media (max-width: 960px){ .cor-shorts{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 560px){ .cor-videos{ grid-template-columns:1fr; } }

/* ---------- Seitliche Jahres-Leiste (nur grosse Bildschirme) ---------- */
.year-rail{ display:none; }
@media (min-width: 1440px){
  .year-rail{
    display:block; position:fixed; left:1.6rem; top:50%; z-index:40;
    transform: translate(-1rem, -50%); opacity:0; pointer-events:none;
    transition: opacity .4s ease, transform .4s ease;
  }
  .year-rail.is-on{ opacity:1; transform: translate(0, -50%); pointer-events:auto; }
  .year-rail ol{ list-style:none; margin:0; padding:0 0 0 0; position:relative; }
  .year-rail ol::before, .year-rail ol::after{
    content:""; position:absolute; left:5px; top:6px; width:2px; bottom:6px; background: var(--line-soft);
  }
  .year-rail ol::after{ background: var(--accent); bottom:auto; height: calc((100% - 12px) * var(--yr-progress, 0) / 100); box-shadow: 0 0 8px var(--accent); transition: height .35s ease; }
  .year-rail li{ position:relative; height:2.1rem; }
  .year-rail.is-sections li{ height:1.8rem; }
  .year-rail.is-sections .yr-year{ min-width:1.6rem; font-size:.68rem; }
  .year-rail.is-sections .yr-pop{ left:3.4rem; }
  .year-rail a{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color: var(--gray); height:100%; }
  .year-rail .yr-dot{
    width:12px; height:12px; border-radius:50%; flex:none; position:relative; z-index:1;
    background: var(--paper); border:2px solid var(--line-soft); transition: all .25s ease;
  }
  .year-rail .yr-year{ font-size:.72rem; font-weight:700; letter-spacing:.06em; min-width:2.6rem; transition: color .25s ease; }
  .year-rail a:hover .yr-dot{ border-color: var(--accent); }
  .year-rail a:hover .yr-year{ color: var(--ink); }
  .year-rail .yr-pop{
    position:absolute; left:4.6rem; top:50%; white-space:nowrap;
    transform: translate(-.6rem, -50%) scale(.92); transform-origin: left center; opacity:0;
    background: var(--paper-alt); border:1px solid var(--accent); border-left-width:3px;
    padding:.35rem .7rem; box-shadow: 0 0 18px rgba(56,214,255,.18);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,1.4,.4,1);
  }
  .year-rail .yr-pop b{ display:block; color: var(--accent); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
  .year-rail .yr-pop em{ display:block; font-style:normal; color: var(--ink); font-size:.82rem; font-weight:600; max-width:15rem; overflow:hidden; text-overflow:ellipsis; }
  .year-rail li.is-active .yr-dot{ background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); transform: scale(1.25); }
  .year-rail li.is-active .yr-year{ color: var(--accent); }
  .year-rail li.is-active .yr-pop{ opacity:1; transform: translate(0, -50%) scale(1); }
}
@media (min-width: 1440px){
  /* groessere Leiste, sobald der Hero weggescrollt ist */
  .year-rail li{ transition: height .35s ease; }
  .year-rail .yr-dot{ transition: all .3s ease; }
  .year-rail .yr-year{ transition: color .25s ease, font-size .3s ease, min-width .3s ease; }
  .year-rail.is-big li{ height:2.9rem; }
  .year-rail.is-big.is-sections li{ height:2.6rem; }
  .year-rail.is-big .yr-dot{ width:18px; height:18px; }
  .year-rail.is-big ol::before, .year-rail.is-big ol::after{ left:8px; top:9px; width:3px; }
  .year-rail.is-big ol::before{ bottom:9px; }
  .year-rail.is-big ol::after{ height: calc((100% - 18px) * var(--yr-progress, 0) / 100); }
  .year-rail.is-big .yr-year{ font-size:.92rem; min-width:3.3rem; }
  .year-rail.is-big.is-sections .yr-year{ font-size:.88rem; min-width:2rem; }
  .year-rail.is-big .yr-pop{ left:5.6rem; padding:.55rem .95rem; }
  .year-rail.is-big.is-sections .yr-pop{ left:4.2rem; }
  .year-rail.is-big .yr-pop b{ font-size:.78rem; }
  .year-rail.is-big .yr-pop em{ font-size:1rem; max-width:19rem; }
}
@media (prefers-reduced-motion: reduce){
  .year-rail, .year-rail *{ transition:none !important; }
}