/* 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; }
.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:#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); }

/* ---------- 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: #333; 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: #fff;
  border-top: 2px solid var(--ink);
  box-shadow: 0 -8px 24px rgba(0,0,0,.09);
}
.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: #333;
  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; }
}