/* digital-rebel.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;
}

:root{
  --ink: #111111;
  --paper: #ffffff;
  --paper-alt: #f4f4f4;
  --line: #111111;
  --line-soft: #dcdcdc;
  --gray: #6b6b6b;
  --accent: #00a3e0;
  --accent-hover: #0087bc;
  --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;
}

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(--ink); color:#fff; 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(255,255,255,0.94);
  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(--ink); color:#fff; border-color:var(--ink); }
.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:#333; 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:#fff;
}
.btn-solid:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
.hero-contact{ font-size:0.9rem; color:#444; }
.hero-contact a{ text-decoration:none; border-bottom:1px solid var(--line-soft); }

/* ---------- Section shell ---------- */
section{ padding: 4.5rem 0; }
section.alt{ background: var(--paper-alt); }
.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: #cfcfcf 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:#333;
}
.list-plain li:last-child{ border-bottom:0; }

.text-block p{ margin: 0 0 1rem; color:#2a2a2a; 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:#333; 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(--ink); color:#fff;
}
.skills-chips .chip-accent{
  border-color:var(--accent); color:var(--accent);
}
.skills-chips .chip-accent:hover{
  background:var(--accent); color:#fff;
}

/* 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:#2a2a2a;
}
.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(--ink); color:#fff; }
.media-block.accent{ background: var(--accent); color:#fff; 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:#333; 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:#0a7a2f; }
.form-status.err{ color:#c0392b; }

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--line-soft); padding: 2.5rem 0; font-size:0.85rem; color:#444;
}
.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:#444; }
.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: #cfcfcf 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:#333;
  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:#2a2a2a; }
.legal a{ color: var(--accent); }
.placeholder{ background: #fff3cd; 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:#fff; 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:#dcdcdc; 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:#2a2a2a; max-width:72ch; }

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

/* ---------- KPI-Ticker (Performance-Band unter dem Hero) ---------- */
.kpi-ticker{
  background: var(--ink);
  color:#fff;
  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 rgba(255,255,255,0.18);
}
.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); }