/* ==========================================================================
   yesitis.me — Animated Redesign
   Nur für is_front_page() geladen (siehe functions.php).
   Grundprinzip wie im Rest des Themes: Content ist handgebautes HTML mit
   Inline-Styles für die Optik, dieses Stylesheet deckt nur das ab, was inline
   nicht geht: Keyframes, Hover/Focus, Media Queries, Scroll-Mechanik.
   ========================================================================== */

/* Tokens leben jetzt in assets/base.css (Audit 5.6). */

.rd-root{ position:relative; overflow-x:clip; background:var(--rd-bg); }
.rd-root *{ box-sizing:border-box; }
.rd-root img,.rd-root video{ max-width:100%; }

/* Altes Theme-Hintergrundbild (body::before, hg-website_desktop/mobile.webp)
   blitzt bei Overscroll/Rubber-Band unten durch die neue Seite. Auf der
   Redesign-Startseite komplett deaktivieren. */
body::before{ display:none !important; }
body{ background-color:var(--rd-bg) !important; }

@keyframes rdBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(10px); } }
.rd-scrolldown{ animation:1.8s ease-in-out 0s infinite normal none running rdBounce; display:inline-block; }
/* Mobile-Hero: kleiner Cyan-Strich unter dem Namen statt Scroll-Pfeil (der ist
   auf Mobile aus, siehe Media Query) + dunklerer Verlauf für Lesbarkeit. */
.rd-hero-underline{ display:none; }
.rd-hero{ position:relative; }

/* ---- Nav ---- */
.rd-logo-fixed{ position:fixed; top:0; left:0; z-index:101; height:125px; width:125px; }
.rd-nav-wrap{
  position:fixed; top:16px; left:0; right:0; z-index:100;
  display:flex; justify-content:center; padding:0 24px;
  transition:opacity .3s ease;
}
.rd-nav-wrap.rd-nav-hidden{ opacity:0; pointer-events:none; }
.rd-nav-pill{
  display:inline-flex; align-items:center; gap:14px; padding:6px 8px 6px 14px;
  border-radius:10px; backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.1);
  white-space:nowrap; background-color:#05051759;
}
.rd-nav-links{ display:flex; gap:2px; font:500 12px "Open Sans",sans-serif; }
.rd-nav-link{
  padding:6px 14px; cursor:pointer; white-space:nowrap;
  background:transparent; border:none; font-family:inherit;
  color:#f5f3ee; font-size:12px; font-weight:500;
  transition:color .25s, font-size .25s;
}
.rd-nav-link.rd-active{ color:#1AE2F6; font-size:15px; font-weight:700; }
.rd-nav-link{ text-decoration:none; display:inline-block; }

/* Sprungziele: ohne diesen Abstand landet die Ueberschrift unter dem fixen
   Nav-Pill -- betrifft Deep-Links von aussen genauso wie Klicks in der Nav.
   --nav-h setzt redesign.js aus der tatsaechlichen Pill-Hoehe. */
[data-section]{ scroll-margin-top:calc(var(--nav-h, 72px) + 12px); }

/* ---- Scroll-Reveal ---- */
.rd-reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.rd-reveal.rd-in{ opacity:1; transform:translateY(0); }
.rd-reveal--card{ transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
/* Career-Timeline-Items schieben von links rein statt von unten */
.rd-reveal.rd-reveal--x{ transform:translateX(-16px); transition:opacity .7s ease, transform .7s ease; }
.rd-reveal.rd-reveal--x.rd-in{ transform:translateX(0); }

/* ---- Eyebrow / Mono-Headlines ---- */
.rd-eyebrow{ font:700 13px "JetBrains Mono",ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.rd-h2-mono{ font:700 40px/1.3 "JetBrains Mono",ui-monospace,monospace; color:#f5f3ee; }

/* UA-Default-Margins von echten h1/h2/h3 neutralisieren — Layout ist auf
   margin:0 ausgelegt, sichtbarer Abstand kommt ausschließlich aus den
   jeweiligen Klassen/Inline-Styles (Datenschutz-Audit 08/2026: divs zu
   semantischen Headings gemacht). */
.rd-root h1, .rd-root h2, .rd-root h3{ margin:0; }

/* ---- Brick/Pixel-Buttons ---- */
/* Referenz-Baustein für alle interaktiven Elemente: abgerundete Pixel-Ecken,
   dunkler Bevel-Rahmen (#062226), innerer Highlight/Boden-Bevel, hartes
   Farb-Schattenoffset (Magenta bei primary, Violett bei outline), Hover =
   Button "drückt sich in den Schatten". */
.rd-brick-btn{
  font:700 13px "JetBrains Mono",ui-monospace,monospace; cursor:pointer; text-transform:uppercase;
  letter-spacing:.05em; border-radius:10px; border:3px solid #062226;
  padding:15px 28px 19px; display:inline-block; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.rd-brick-btn--sm{ font-size:12px; letter-spacing:.04em; padding:7px 14px 9px; border-radius:8px; border-width:2px; }

.rd-brick-btn--primary{
  color:#062226;
  background:linear-gradient(135deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.02) 35%, rgba(255,255,255,0) 55%, rgba(255,255,255,.12) 100%), #1AE2F6;
  box-shadow: inset 0 2px 0 0 rgba(255,255,255,.5), inset 0 -8px 0 0 #0F9BAA, 5px 5px 0 0 #FC01F9;
}
.rd-brick-btn--primary:hover{ transform:translate(3px,3px); box-shadow: inset 0 2px 0 0 rgba(255,255,255,.5), inset 0 -8px 0 0 #0F9BAA, 2px 2px 0 0 #FC01F9; }
.rd-brick-btn--primary.rd-brick-btn--sm{ box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5), inset 0 -3px 0 0 #0F9BAA, 3px 3px 0 0 #FC01F9; }
.rd-brick-btn--primary.rd-brick-btn--sm:hover{ transform:translate(2px,2px); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5), inset 0 -3px 0 0 #0F9BAA, 1px 1px 0 0 #FC01F9; }

.rd-brick-btn--outline{
  color:#1AE2F6;
  background:linear-gradient(135deg, rgba(26,226,246,.16) 0%, rgba(26,226,246,.02) 35%, rgba(26,226,246,0) 55%, rgba(26,226,246,.1) 100%), #0c0d0f;
  box-shadow: inset 0 2px 0 0 rgba(26,226,246,.45), inset 0 -8px 0 0 rgba(26,226,246,.14), 0 0 14px rgba(26,226,246,.2), 5px 5px 0 0 #8B71F7;
}
.rd-brick-btn--outline:hover{ transform:translate(3px,3px); box-shadow: inset 0 2px 0 0 rgba(26,226,246,.45), inset 0 -8px 0 0 rgba(26,226,246,.14), 0 0 14px rgba(26,226,246,.2), 2px 2px 0 0 #8B71F7; }
.rd-brick-btn--outline.rd-brick-btn--sm{ box-shadow: inset 0 1px 0 0 rgba(26,226,246,.45), inset 0 -3px 0 0 rgba(26,226,246,.14), 3px 3px 0 0 #8B71F7; }
.rd-brick-btn--outline.rd-brick-btn--sm:hover{ transform:translate(2px,2px); box-shadow: inset 0 1px 0 0 rgba(26,226,246,.45), inset 0 -3px 0 0 rgba(26,226,246,.14), 1px 1px 0 0 #8B71F7; }

/* ---- Brick-Bildrahmen (About/Contact-Foto) ---- */
.rd-brick-frame{
  position:relative; border-radius:10px; overflow:hidden; border:3px solid #062226;
  box-shadow: inset 0 2px 0 0 rgba(23,226,246,.35), inset 0 -8px 0 0 rgba(23,226,246,.12), 6px 6px 0 0 #FC01F9;
}

/* ---- Expertise / WebGL grid ---- */
.rd-expertise{ position:relative; background:var(--rd-bg); padding:140px 64px; overflow:hidden; min-height:calc(100vh - 200px); display:flex; flex-direction:column; justify-content:center; }
.rd-expertise-grid-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:0; border:none; }
.rd-expertise-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 64px; max-width:1000px; margin:0 auto; padding:24px 32px; pointer-events:none; }
/* Lesbarkeit ohne das Artwork abzuwuergen: statt die ganze Sektion abzudunkeln,
   bekommt jede Zeile ein eigenes, mitlaufendes Milchglas-Band. Das Raster bleibt
   voll sichtbar und interaktiv (Mouse-Follow), nur direkt hinter der Schrift wird
   der Untergrund unscharf und leicht abgesenkt. */
.rd-expertise-item{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 14px; margin:0 -14px; border-top:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px) brightness(.42) saturate(.85);
  backdrop-filter:blur(10px) brightness(.42) saturate(.85); }
/* Gruppenkoepfe der Skill-Matrix (Kernkompetenz/Solide Praxis/Grundlagen,
   siehe 1.8) sind reiner Fliesstext ohne .rd-expertise-item-Layout, brauchen
   aber denselben Blur/Dimm-Schutz -- sonst scheint das Raster an genau der
   Stelle unverdeckt durch und der Abstand wirkt kaputt. */
.rd-expertise-group{
  -webkit-backdrop-filter:blur(10px) brightness(.42) saturate(.85);
  backdrop-filter:blur(10px) brightness(.42) saturate(.85);
}
@supports not (backdrop-filter:blur(1px)){
  /* Fallback fuer Browser ohne backdrop-filter: dezenter Farbauftrag statt Blur. */
  .rd-expertise-item, .rd-expertise-group{ background:rgba(5,5,23,.62); }
}

/* ---- Toolset pills (Brick-Pill, farbige Highlight-Linien, kein Schattenoffset) ---- */
.rd-pill{ font:500 13px "Open Sans",sans-serif; padding:10px 20px 12px; border-radius:10px; border:2px solid; display:inline-block; transition:box-shadow .2s ease, color .2s ease; }
.rd-pill--magenta{
  color:var(--rd-magenta); border-color:#3a0139;
  background:linear-gradient(135deg, rgba(252,1,249,.14) 0%, rgba(252,1,249,.02) 35%, rgba(252,1,249,0) 55%, rgba(252,1,249,.08) 100%), #0c0d0f;
  box-shadow: inset 0 1px 0 0 rgba(252,1,249,.4), inset 0 -4px 0 0 rgba(252,1,249,.14);
}
.rd-pill--magenta:hover{ color:#fff; box-shadow: inset 0 1px 0 0 rgba(252,1,249,.6), inset 0 -4px 0 0 rgba(252,1,249,.22); }
.rd-pill--neutral{
  color:rgba(245,243,238,.75); border-color:#1a1b22;
  background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 35%, rgba(255,255,255,0) 55%, rgba(255,255,255,.04) 100%), #0c0d0f;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.18), inset 0 -4px 0 0 rgba(255,255,255,.06);
}
.rd-pill--neutral:hover{ color:var(--rd-text); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.3), inset 0 -4px 0 0 rgba(255,255,255,.1); }

/* ---- Skills / About glass cards ---- */
.rd-card{
  background:linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 60%, rgba(23,226,246,.04) 100%), rgba(255,255,255,.04);
  backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); border-radius:12px;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.12), 6px 6px 28px -8px rgba(23,226,246,.12);
  padding:36px 28px; text-align:center; transition:box-shadow .3s ease;
}
.rd-card--accent{
  background:linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 60%, rgba(252,1,249,.08) 100%), rgba(252,1,249,.06);
  border:1px solid rgba(252,1,249,.4);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.15), 0 0 32px rgba(252,1,249,.25);
}
.rd-skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

.rd-about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:center; }
.rd-about-highlight{
  background:linear-gradient(135deg, rgba(23,226,246,.08) 0%, rgba(23,226,246,.01) 35%, rgba(23,226,246,0) 55%, rgba(23,226,246,.05) 100%), rgba(255,255,255,.04);
  backdrop-filter:blur(12px); border:2px solid #062226; padding:22px 24px 26px; margin-top:32px; border-radius:10px;
  box-shadow: inset 0 2px 0 0 rgba(23,226,246,.4), inset 0 -6px 0 0 rgba(23,226,246,.12);
}

/* ---- Career: Circuit-Timeline ---- */
.rd-career-item{ display:grid; grid-template-columns:20px 1fr; gap:24px; padding-bottom:28px; }
.rd-career-node-col{ display:flex; flex-direction:column; align-items:center; }
.rd-career-node{ width:12px; height:12px; background:#1AE2F6; border-radius:3px; box-shadow:0 0 12px rgba(26,226,246,.6); flex-shrink:0; margin-top:28px; }
.rd-career-line{ width:2px; flex:1; background:linear-gradient(to bottom, rgba(26,226,246,.4), rgba(26,226,246,.05)); margin-top:4px; }
.rd-career-card{
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.01) 40%, rgba(255,255,255,0) 60%, rgba(23,226,246,.04) 100%), rgba(255,255,255,.03);
  border:2px solid #062226; border-radius:10px; padding:24px 28px 28px; margin-top:8px;
  box-shadow: inset 0 1px 0 0 rgba(23,226,246,.3), inset 0 -4px 0 0 rgba(23,226,246,.1);
}
.rd-career-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.rd-career-tags-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; align-items:center; }
.rd-career-duration{ font:500 13px "JetBrains Mono",ui-monospace,monospace; color:#FC01F9; }
.rd-career-tag{
  font:500 13px "JetBrains Mono",ui-monospace,monospace; color:rgba(245,243,238,.6);
  background:linear-gradient(135deg, rgba(26,226,246,.12) 0%, rgba(26,226,246,.02) 35%, rgba(26,226,246,0) 55%, rgba(26,226,246,.08) 100%), #0c0d0f;
  border:2px solid #062226; padding:6px 12px 8px; border-radius:8px;
  box-shadow: inset 0 1px 0 0 rgba(26,226,246,.35), inset 0 -3px 0 0 rgba(26,226,246,.12);
}

/* ---- Case Studies: pinned horizontal snap-scroll ---- */
.rd-cs-wrapper{ position:relative; height:500vh; z-index:10; background:var(--rd-bg); }
.rd-cs-sticky{ position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); overflow:hidden; display:flex; flex-direction:column; }
.rd-cs-head-row{ flex:0 0 auto; padding:18px 64px 10px; display:flex; justify-content:center; background:var(--rd-bg); }
.rd-cs-viewport{ flex:1 1 auto; min-height:0; position:relative; overflow:hidden; }
.rd-cs-row{ display:flex; height:100%; will-change:transform; transition:transform .55s ease-in-out; }
.rd-cs-slide{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; }
.rd-cs-slide video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.rd-cs-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,23,.85) 0%, rgba(5,5,23,.35) 42%, transparent 65%); }
.rd-cs-info-wrap{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; padding:0 24px; }
.rd-cs-info{ position:relative; width:100%; max-width:1100px; background:rgba(12,13,20,.55); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:18px 24px; }
/* Audit 5.5: Stretched-Link — klickbar ist bislang nur die Überschrift und
   "Case ansehen →" (je unter 44px Kantenlänge). Die CTA deckt per Pseudo-
   Element die ganze Info-Karte ab; Tags/Titel bleiben eigenständig fokussier-
   und klickbar, das ::after liegt nur visuell darüber. Karten ohne CTA (z. B.
   "Marketing-Use-Case", bewusst nicht verlinkt seit 3.6) bekommen dadurch
   automatisch keinen Stretched-Link. */
.rd-cs-cta::after{ content:""; position:absolute; inset:0; }
.rd-cs-status{ font:600 13px "JetBrains Mono",ui-monospace,monospace; padding:4px 10px; border-radius:8px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; background:#0c0d0f; border:2px solid currentColor; }
.rd-cs-tag{
  font:500 13px "JetBrains Mono",ui-monospace,monospace; color:rgba(245,243,238,.55);
  background:linear-gradient(135deg, rgba(26,226,246,.12) 0%, rgba(26,226,246,.02) 35%, rgba(26,226,246,0) 55%, rgba(26,226,246,.08) 100%), #0c0d0f;
  border:2px solid #062226; padding:5px 11px 7px; border-radius:8px;
  box-shadow: inset 0 1px 0 0 rgba(26,226,246,.35), inset 0 -3px 0 0 rgba(26,226,246,.12);
}
.rd-cs-cta{ font:600 13px "Open Sans",sans-serif; color:var(--rd-cyan); white-space:nowrap; text-decoration:none; }
.rd-cs-dots{ flex:0 0 auto; width:100%; display:flex; gap:8px; justify-content:center; padding:10px 0 14px; background:var(--rd-bg); }
.rd-cs-dot{ height:3px; border-radius:2px; background:rgba(245,243,238,.2); cursor:pointer; transition:background .3s, width .3s; border:none; padding:0; }
.rd-cs-dot.rd-active{ background:var(--rd-cyan); }

/* ---- Contact ---- */
/* Grid statt zweier separater Blöcke, damit Eyebrow/Headline/Foto/Channels auf
   Mobile per order neu sortiert werden können (Foto vor Headline, wie im
   Mobile-Konzept), ohne das DOM doppelt vorzuhalten. */
.rd-contact-layout{ display:grid; grid-template-columns:1fr 1fr; column-gap:64px; align-items:start; }
.rd-contact-eyebrow{ grid-column:1/-1; }
.rd-contact-headline{ grid-column:1/-1; }
/* max-width gedeckelt: portrait_contact.webp ist 512x512 -- bei der vollen
   Grid-Spaltenbreite (~336px CSS-Breite) braucht ein Retina-Display (DPR 2)
   672px nativ, die Datei hat aber nur 512px und wirkt dadurch weich. Kleiner
   angezeigt bleibt die Bildschaerfe im Rahmen der Datei. */
.rd-contact-photo{ grid-column:1; max-width:220px; position:relative; border-radius:10px; overflow:hidden; border:3px solid #062226; box-shadow: inset 0 2px 0 0 rgba(23,226,246,.35), inset 0 -8px 0 0 rgba(23,226,246,.12), 6px 6px 0 0 #FC01F9; }
.rd-contact-channels{ grid-column:2; }
.rd-back-to-top{
  position:absolute; left:16px; bottom:16px; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; font:600 13px "JetBrains Mono",ui-monospace,monospace; color:var(--rd-bg); background:var(--rd-cyan); padding:10px 16px;
  border-radius:24px; cursor:pointer; text-transform:uppercase; letter-spacing:.04em; border:none;
}
.rd-channel{ display:flex; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.12); text-decoration:none; }
.rd-channel-icon{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font:600 12px "Open Sans",sans-serif; color:var(--rd-cyan); flex-shrink:0; }

/* ---- Responsive ---- */
/* Ab hier: "yesitis.me - Mobile Concept.dc.html" ist die Referenz, nicht nur
   eine verkleinerte Desktop-Version — Nav, Case Studies und Contact-Reihenfolge
   unterscheiden sich strukturell, nicht nur in der Größe. */
@media (max-width: 900px){
  .rd-nav-links{ display:none; }
  .rd-nav-pill{ gap:8px; }
}
@media (max-width: 768px){
  /* Nav mobil bewusst ohne Sprungmenue: die Seite wird linear gelesen, ein
     Hamburger waere UI-Gewicht ohne Nutzen. Was bleibt, sind Identitaet und
     die beiden Aktionen -- CV-Download und Kontakt. Der CV war hier vorher
     ausgeblendet, also ausgerechnet die wichtigste Aktion der Seite. */
  .rd-logo-fixed{ display:none; }
  .rd-nav-pill{ gap:6px; padding-left:12px; padding-right:12px; }
  .rd-nav-cv-link{ padding-left:10px; padding-right:10px; letter-spacing:0; }

  /* Hero: kleinere Monospace-Headline, Cyan-Strich statt Scroll-Pfeil,
     stärkerer Verlauf für Lesbarkeit über dem Foto. min-height statt fixer
     height, deshalb weniger kritisch als bei den Case-Study-Slides, aber
     gleiches iOS-vh-Problem -> dvh-Fallback zur Sicherheit mit. */
  .rd-hero{ min-height:100vh !important; min-height:100dvh !important; }
  .rd-hero-title{ font-size:44px !important; letter-spacing:-0.02em !important; }
  .rd-hero::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to top, #050517 5%, rgba(5,5,23,0.55) 45%, transparent 75%);
  }
  .rd-hero-underline{ display:block; width:56px; height:2px; background:var(--rd-cyan); margin-top:20px; }
  .rd-scrolldown-wrap{ display:none !important; }

  /* Intro: monospace-Headline wie im Mobile-Konzept, Buttons volle Breite gestapelt */
  .rd-intro-headline{ font-size:22px !important; line-height:1.45 !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; text-align:left !important; }
  .rd-intro-buttons{ flex-direction:column !important; }
  .rd-intro-buttons .rd-brick-btn{ width:100%; text-align:center; }

  /* Expertise: eigener dunklerer Sektions-Hintergrund, WebGL-Grid statisch
     (kein echter Mauszeiger auf Touch), Liste kompakter */
  .rd-expertise{ padding:64px 24px !important; background:#0c0d0f !important; min-height:0 !important; }
  .rd-expertise-grid-frame{ pointer-events:none !important; }
  .rd-expertise-list{ grid-template-columns:1fr !important; padding:0 !important; }
  .rd-expertise-item > div:first-child{ font-size:15px !important; }
  .rd-h2-mono{ font-size:26px !important; }

  /* About: Bild zuerst (DOM-Reihenfolge), Text danach — Desktop-Spaltentausch
     per order wird hier zurückgesetzt */
  .rd-about-grid{ grid-template-columns:1fr !important; gap:28px !important; }
  .rd-about-grid > *{ order:0 !important; }

  /* Qualifikation: Zertifikate/Ausbildung-Boxen untereinander statt
     nebeneinander -- zwei Spalten quetschen sich bei 375px Breite. */
  .rd-qualifikation-grid{ grid-template-columns:1fr !important; gap:20px !important; }

  /* Career: schmalere Timeline-Spalte, Card-Head bricht bei Bedarf um */
  .rd-career-item{ grid-template-columns:14px 1fr !important; gap:16px !important; }
  .rd-career-card{ padding:18px 18px 22px !important; }
  .rd-career-card-head{ flex-direction:column !important; align-items:flex-start !important; gap:4px !important; }

  /* Skills: Icon links, Text rechts (Row statt zentrierter Spalte) */
  .rd-skills-grid{ grid-template-columns:1fr !important; gap:16px !important; }
  .rd-card{ display:flex !important; flex-direction:row !important; align-items:flex-start !important; text-align:left !important; padding:24px !important; gap:16px; }
  .rd-card svg{ margin:0 !important; flex-shrink:0; }
  .rd-card-body > div:first-child{ margin-bottom:6px !important; }

  /* Case Studies: kein gepinnter Horizontal-Snap mehr — eigene, native
     Vertical-Snap-Scrollbox (siehe redesign.js: Wheel/Touch-Pin-Logik wird
     unterhalb dieser Breite gar nicht erst aktiviert, Videos bekommen
     stattdessen loop+autoplay über einen IntersectionObserver). */
  .rd-cs-wrapper{ height:auto !important; }
  /* Wichtig: Header ("Vibe Coding" + Titel) und die Scroll-Box dürfen sich NICHT
     wie vorher per Flex-Column die 100vh teilen (dann ist die Box kleiner als
     100vh, aber jede Slide 100vh groß -> Mismatch, Snap wirkt "kaputt"). Beide
     werden hier zu normalen, unabhängig hohen Blöcken: Header nimmt seine
     eigene Höhe, die Scroll-Box bekommt volle 100vh für sich — deckt sich mit
     dem Mobile-Concept, wo beide schlicht aufeinanderfolgende Blöcke sind. */
  .rd-cs-sticky{ position:static !important; top:auto !important; height:auto !important; display:block !important; }
  .rd-cs-head-row{ padding:32px 24px 16px !important; }
  .rd-cs-counter{ display:none !important; }
  .rd-cs-viewport{
    flex:none !important; height:100vh !important; height:100dvh !important;
    overflow-x:hidden !important; overflow-y:auto !important;
    scroll-snap-type:y mandatory !important; -webkit-overflow-scrolling:touch;
  }
  /* display:flex + height:auto + flex-basis:100% lässt sich auf einem Column-
     Flex-Container nicht auflösen (prozentualer flex-basis gegen eine
     unbestimmte Höhe) -> Row und alle Slides kollabieren auf 0px. Deshalb hier
     komplett von Flexbox weg auf normales Blocklayout, das braucht kein
     Höhen-Vorwissen. */
  .rd-cs-row{ display:block !important; height:auto !important; transform:none !important; transition:none !important; }
  .rd-cs-slide{ display:block !important; flex:none !important; width:100%; height:100vh !important; height:100dvh !important; scroll-snap-align:start; scroll-snap-stop:always; }
  .rd-cs-dots{ display:none !important; }
  /* Info-Card schwebt über dem fixen Jarvis-FAB (64px + Abstand unten rechts),
     statt drunter/dahinter zu verschwinden -> CTA bleibt klickbar & lesbar. */
  .rd-cs-info-wrap{ bottom:100px !important; padding:0 16px !important; }
  .rd-cs-info{ padding:14px 16px !important; }
  /* padding-right:120px war die Desktop-Reserve gegen den Jarvis-Button in der
     breiten Pinned-Card (dort seitlich neben dem Content). Auf Mobile sitzt
     die Reserve stattdessen vertikal (s.o.), das seitliche Padding hier frisst
     nur Platz und lässt Tags/CTA unnötig umbrechen -> Card wird höher als der
     Bottom-Reserve deckt. Deshalb hier zurücksetzen. */
  .rd-cs-cta-row{ padding-right:0 !important; }
  .rd-cs-info-title{ font-size:16px !important; }

  /* Contact: Foto+BackToTop vor der Headline (siehe HTML-Reorder via order),
     ein-spaltig, CV-Button volle Breite */
  .rd-contact-headline{ font-size:30px !important; margin-bottom:36px !important; }
  .rd-contact-layout{ grid-template-columns:1fr !important; row-gap:0 !important; }
  .rd-contact-layout > *{ grid-column:1 !important; order:0; }
  .rd-contact-eyebrow{ order:1; }
  .rd-contact-headline{ order:2; }
  .rd-contact-channels{ order:3; }
  .rd-contact-photo{ order:4; margin-top:32px; margin-bottom:0; width:100%; max-width:200px; margin-left:auto; margin-right:auto; }
  .rd-contact-cv{ display:block !important; width:100%; text-align:center; }

  .rd-section-pad{ padding:56px 24px !important; }
}

/* ---- Audit 5.4: Reduced Motion + sichtbarer Fokus ---- */
@media (prefers-reduced-motion: reduce){
  .rd-root, .rd-root *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Reveal-Elemente sollen sofort im Endzustand stehen, nicht in der
     Startposition einfrieren (die Transition ist aus, der 0%-Zustand aber
     nicht). */
  .rd-reveal{ opacity:1 !important; transform:none !important; }
}

.rd-root a:focus-visible,
.rd-root button:focus-visible,
.rd-root [tabindex]:focus-visible{
  outline:2px solid #17E2F6;
  outline-offset:3px;
  border-radius:4px;
}

/* Audit 5.2: Die --sm-Buttons standen auf 11px -- die kleinste Schrift der
   Seite, ausgerechnet auf den beiden wichtigsten Aktionen. Jetzt 12px.
   Die Sprunglinks daneben bleiben bewusst bei 12px: Die Nav-Pille hat bei
   1024px nur 66px Luft, ein Bump auf 13px hier haette 56px davon gefressen.
   Zu wenig Reserve fuer eine feste Breite. */

/* ---- Touch-Ziele (Audit-Finding 5.1) ----------------------------------
   Gemessen bei 375 px: die beiden Kopfzeilen-Buttons kamen auf 97x35 bzw.
   102x35 -- das sind die zwei wichtigsten Aktionen der Seite auf dem Geraet,
   auf dem der Link am haeufigsten geoeffnet wird. Die --sm-Variante wird
   ausschliesslich hier verwendet, deshalb ist die Erhoehung folgenlos fuer
   die uebrigen Brick-Buttons (die liegen ohnehin bei 58 px).
   Nur das Innenabstands-Verhaeltnis waechst, die Brick-Optik bleibt. */
.rd-nav-pill .rd-brick-btn--sm{
  padding-top:13px;
  padding-bottom:13px;
}

/* "Case ansehen" mass 103x18. Die Trefferflaeche ist dank des bestehenden
   .rd-cs-cta::after-Overlays zwar groesser (sie deckt .rd-cs-info ab), die
   sichtbare Marke aber wirkt fummelig. Padding vergroessert das eigene Ziel
   auf 44 px; das negative Margin haelt das Layout exakt dort, wo es war. */
.rd-cs-cta{
  display:inline-block;
  padding-top:13px;
  padding-bottom:13px;
  margin-top:-13px;
  margin-bottom:-13px;
}

/* Nicht geloest: Der Footer-Link auf die Datenschutzerklaerung liegt bei
   40,5 px. Eine Regel hier greift NICHT -- der Link traegt im Seiteninhalt
   ein Inline-Style (padding:12px 4px; margin:-12px -4px), und Inline schlaegt
   jedes Stylesheet. Erzwingen liesse sich das nur mit !important; das waere
   eine Spezifitaetsfalle fuer spaeter. Richtig ist, den Inline-Style im
   Seiteninhalt auf 14px zu heben -- siehe Audit-Finding 5.6. */

/* Die Text- und Farbklassen stehen jetzt in assets/base.css (Audit 5.6) --
   dort sind sie auf jeder Seite verfuegbar, nicht nur auf der Startseite. */