/* ==========================================================================
   Justin Rundel – Webentwicklung für Agenturen
   Haupt-Stylesheet. Struktur folgt den Sektionen der Startseite.
   Fonts: Inter / Inter Tight (SIL OFL 1.1, siehe assets/fonts/LICENSE-OFL.txt)
   ========================================================================== */

/* ===== Webfonts (lokal, Latin-Subsets) ===== */
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: InterTight;
  src: url("../fonts/inter-tight-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Metrisch angepasste Fallbacks (Arial), damit der Font-Swap keine Layout-Verschiebung erzeugt.
   Werte aus den Font-Tabellen berechnet (size-adjust = mittlere Zeichenbreite Webfont / Arial). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 106.67%;
  ascent-override: 90.82%;
  descent-override: 22.61%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 500;
  size-adjust: 107.83%;
  ascent-override: 89.84%;
  descent-override: 22.37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "InterTight Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 500;
  size-adjust: 98.57%;
  ascent-override: 98.28%;
  descent-override: 24.47%;
  line-gap-override: 0%;
}

/* ===== Design-Tokens ===== */
:root {
  --paper:#f3f3ed;
  --ink:#20221f;
  --muted:#686c61;
  --accent:#d1ef73;
  --line:#cbd0c2;
  --gutter:clamp(24px,4.1vw,88px);
  --display:InterTight,"InterTight Fallback",Arial,sans-serif;
  --body:Inter,"Inter Fallback",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1)
}

/* ===== Basis & Reset ===== */
* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,p,ul,ol,figure {
  margin:0
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.03em
}

h2 {
  font-size:clamp(44px,5.2vw,84px)
}

h3 {
  font-size:clamp(26px,2.6vw,42px);
  letter-spacing:-.025em
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  border:0;
  border-radius:0;
  cursor:pointer;
  background:none
}

a,button,summary {
  -webkit-tap-highlight-color:transparent
}

button,a,summary {
  touch-action:manipulation
}

button:disabled {
  cursor:default
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px
}

::selection {
  background:var(--accent);
  color:var(--ink)
}

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

ul,ol {
  list-style:none;
  padding:0
}

i {
  font-style:normal
}

.wrap {
  width:calc(100% - var(--gutter)*2);
  max-width:1720px;
  margin-inline:auto
}

.subdued {
  color:var(--muted)
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:11px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase
}

.chapter-number {
  color:var(--muted);
  font-size:10px;
  min-width:31px
}

.skip-link {
  position:fixed;
  z-index:100;
  left:16px;
  top:16px;
  padding:12px 20px;
  background:var(--ink);
  color:white;
  transform:translateY(-200%)
}

.skip-link:focus {
  transform:none
}

#inhalt:focus {
  outline:0
}

/* ===== Header & Navigation ===== */
.header {
  height:96px;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  gap:46px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:relative;
  z-index:40
}

.wordmark {
  position:relative;
  font-family:var(--display);
  font-size:25px;
  line-height:.84;
  letter-spacing:-.045em;
  padding-right:28px
}

.wordmark>span {
  position:absolute;
  top:-3px;
  right:0;
  font-family:var(--body);
  font-size:27px;
  font-weight:400
}

.header-note {
  font-size:10px;
  line-height:1.5;
  color:var(--muted)
}

.header nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px;
  line-height:1.4
}

.header nav>a {
  padding-block:12px;
  position:relative
}

.header nav>a:not(.nav-contact)::after {
  content:'';
  position:absolute;
  bottom:5px;
  left:0;
  right:100%;
  height:1px;
  background:currentColor;
  transition:right .25s
}

.header nav>a:hover::after,.header nav>a[aria-current]::after {
  right:0
}

.header .nav-contact {
  display:flex;
  align-items:center;
  gap:28px;
  border:1px solid var(--ink);
  padding:12px 16px;
  margin-left:7px;
  transition:background .2s
}

.nav-contact:hover {
  background:var(--accent)
}

.nav-contact span {
  font-size:19px
}

.menu-toggle {
  display:none
}

/* ===== Hero ===== */
.hero {
  padding-top:34px
}

.hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:47px
}

.signal {
  width:10px;
  height:10px;
  background:var(--ink);
  display:inline-block;
  position:relative
}

.signal::after {
  content:'';
  position:absolute;
  inset:3px;
  background:var(--accent)
}

.location {
  font-size:10px;
  display:flex;
  gap:32px;
  color:var(--muted)
}

.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.94fr) minmax(0,1fr);
  gap:3vw
}

.hero-main {
  min-width:0;
  position:relative;
  z-index:2
}

h1 {
  font-size:clamp(56px,6.62vw,118px);
  letter-spacing:-.025em;
  line-height:1.02
}

h1>span {
  display:block;
  white-space:nowrap
}

.hero-light {
  color:var(--muted)
}

.hero-bottom {
  max-width:615px;
  margin-top:35px
}

.hero-description {
  font-size:14px;
  line-height:1.8;
  max-width:585px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:26px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
  min-height:56px;
  background:var(--ink);
  color:var(--paper);
  padding:16px 20px;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  transition:background .25s,color .25s
}

.button>span {
  font-size:22px;
  line-height:1;
  transition:transform .3s var(--ease)
}

.button:hover {
  background:#414738
}

.button:hover>span {
  transform:translate(3px,-3px)
}

.text-link {
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:24px;
  min-height:48px
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.text-link>span {
  font-size:21px
}

.hero-portrait {
  align-self:end;
  padding-bottom:1px
}

.portrait-window {
  aspect-ratio:.82;
  position:relative;
  background:var(--accent);
  overflow:hidden
}

.portrait-window::after {
  content:'';
  position:absolute;
  inset:18px;
  border:1px solid #20221f26;
  pointer-events:none
}

.portrait-window img {
  position:absolute;
  max-width:none;
  width:171%;
  height:100%;
  left:-35.5%;
  bottom:-1px;
  object-fit:contain;
  object-position:center bottom;
  filter:grayscale(1)
}

.portrait-topline {
  position:absolute;
  top:32px;
  left:32px;
  z-index:2;
  font-size:12px
}

.portrait-corner {
  position:absolute;
  top:24px;
  right:30px;
  font-size:40px;
  line-height:1
}

.hero-portrait figcaption {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding-top:17px;
  gap:10px
}

.hero-portrait figcaption strong {
  display:block;
  font-family:var(--display);
  font-size:25px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.035em
}

.hero-portrait figcaption div>span {
  font-size:10px;
  line-height:1.4;
  display:block;
  margin-top:5px;
  color:var(--muted)
}

.portrait-index {
  font-size:9px;
  color:var(--muted);
  padding-top:7px;
  white-space:nowrap
}

.chapter-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-block:24px;
  margin-top:45px
}

.chapter-link>span:last-child {
  display:flex;
  align-items:center;
  gap:25px
}

.chapter-link i {
  font-size:20px;
  color:var(--ink)
}

/* ===== Hero-Intro =====
   Startzustand der Einblendung (H1-Zeilen, Portrait). Gilt nur mit JS und ohne Reduced Motion und
   steht vor dem ersten Paint, damit nichts flackert; ohne JS ist alles sofort sichtbar.
   Die Bewegung selbst (Kurve = GSAP power3.out, 0.85 s / 1 s) läuft im Inline-Script des <head>
   (includes/helpers.php, JR_INLINE_SCRIPT) und endet mit der Klasse html.intro-done. */
html.js:not([data-reduced-motion=true]):not(.intro-done) .hero-main h1 > span {
  opacity: 0;
  transform: translateY(24px);
}
html.js:not([data-reduced-motion=true]):not(.intro-done) .hero-portrait {
  opacity: 0;
  transform: translateY(32px);
}

/* ===== Sektion 01 – Ausgangslage ===== */
.problem {
  padding-top:125px
}

.problem-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:9vw;
  align-items:start
}

.problem-intro {
  position:sticky;
  top:60px
}

.problem-intro h2 {
  margin-top:34px;
  font-size:clamp(48px,5.7vw,91px)
}

.intro-copy {
  max-width:325px;
  font-size:14px;
  margin-top:26px;
  color:var(--muted)
}

.problem-direction {
  display:block;
  font-size:80px;
  line-height:1;
  margin-top:30px
}

.problem-stories {
  padding-top:58px
}

.problem-story {
  padding:34px 0 75px;
  display:grid;
  grid-template-columns:45px 1fr;
  gap:18px;
  border-top:1px solid var(--line);
  position:relative;
  min-height:360px
}

.story-index {
  font-size:11px;
  padding-top:5px;
  font-variant-numeric:tabular-nums
}

.problem-story h3 {
  font-size:clamp(28px,2.8vw,44px);
  line-height:1.12
}

.problem-story p {
  font-size:14px;
  color:var(--muted);
  margin-top:25px;
  max-width:420px;
  line-height:1.85
}

.story-progress {
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:2px;
  transform-origin:left;
  background:var(--ink);
  transform:scaleX(0)
}

.stakes {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9vw;
  border-top:1px solid var(--line);
  padding:35px 0 85px;
  margin-top:25px;
  font-size:14px;
  line-height:1.75
}

.stakes>p:last-child {
  color:var(--muted)
}

/* ===== Sektion 02 – Ergebnis (dunkel) ===== */
.dark {
  background:var(--ink);
  color:var(--paper)
}

.dark .chapter-number {
  color:#b8bcae
}

.dark .eyebrow {
  color:#c7ccb9
}

.outcome {
  position:relative
}

.outcome-stage {
  padding-top:75px;
  padding-bottom:65px;
  min-height:88vh;
  min-height:88svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:65px
}

.outcome h2 {
  font-size:clamp(45px,6.7vw,112px);
  line-height:1.05;
  letter-spacing:-.025em
}

.outcome-line {
  display:block;
  color:var(--accent)
}

.outcome-line.dim {
  color:var(--paper)
}

.handoff {
  display:flex;
  align-items:center;
  gap:45px;
  padding:25px 0;
  border-top:1px solid #5a6050
}

.handoff-role strong {
  display:block;
  font-family:var(--display);
  font-size:clamp(30px,3.5vw,55px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.025em
}

.handoff-role>span {
  display:block;
  font-size:11px;
  color:#b8bcae;
  margin-top:8px
}

.handoff-justin {
  min-width:31%
}

.handoff-connection {
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  min-width:30px
}

.handoff-connection>span {
  height:1px;
  background:var(--accent);
  width:100%;
  transform-origin:left
}

.handoff-connection i {
  font-size:39px;
  color:var(--accent);
  line-height:1;
  margin-left:15px
}

.outcome-detail {
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:13vw;
  padding:60px 0 130px;
  border-top:1px solid #505746
}

.outcome-lead {
  font-family:var(--display);
  font-size:clamp(26px,2.6vw,40px);
  line-height:1.3;
  letter-spacing:-.027em;
  max-width:480px
}

.principles article {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:15px;
  padding:28px 0;
  border-bottom:1px solid #505746
}

.principles article:first-child {
  padding-top:0
}

.principles article>span {
  font-size:10px;
  color:var(--accent);
  padding-top:5px
}

.principles h3 {
  font-size:24px;
  line-height:1.18
}

.principles p {
  font-size:13px;
  color:#b8bcae;
  margin-top:13px;
  line-height:1.8
}

/* ===== Sektion 03 – Leistungen ===== */
.services {
  background:var(--paper);
  position:relative
}

.services-heading {
  display:grid;
  grid-template-columns:1fr 2fr auto;
  gap:35px;
  padding:105px 0 65px
}

.services-heading .eyebrow {
  align-self:start;
  padding-top:8px
}

.services-heading h2 {
  font-size:clamp(44px,5.3vw,88px)
}

.services-heading p:not(.eyebrow) {
  max-width:415px;
  font-size:14px;
  color:var(--muted);
  margin-top:25px
}

.services-direction {
  font-size:110px;
  line-height:1;
  align-self:end
}

.service-viewport {
  position:relative
}

.service-track {
  display:grid;
  grid-template-columns:1fr 1fr
}

.service-panel {
  padding:38px var(--gutter) 45px;
  background:var(--accent);
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:650px;
  border-right:1px solid #20221f35
}

.service-panel:nth-child(2) {
  background:#e0e3d6
}

.service-panel:nth-child(3) {
  background:var(--ink);
  color:var(--paper)
}

.service-panel:nth-child(4) {
  background:#d5daca
}

.service-top {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:10px;
  line-height:1.5
}

.service-number {
  font-family:var(--display);
  font-size:45px;
  letter-spacing:-.025em
}

.service-panel h3 {
  font-size:clamp(40px,4.7vw,75px);
  line-height:1.06;
  letter-spacing:-.035em;
  margin-block:32px 45px;
  overflow-wrap:normal
}

.service-bottom {
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:25px;
  font-size:13px;
  line-height:1.8
}

.service-bottom>p {
  max-width:415px
}

.service-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  border-top:1px solid #20221f45;
  padding-top:20px;
  font-size:11px
}

.service-panel:nth-child(3) .service-tags {
  border-color:#555c4e
}

.service-position {
  display:none
}

.is-horizontal .service-viewport {
  overflow:hidden;
  height:calc(100vh - 90px);
  height:calc(100svh - 90px);
  min-height:600px;
  max-height:870px
}

.is-horizontal .service-track {
  display:flex;
  gap:0;
  height:calc(100% - 46px);
  width:max-content
}

.is-horizontal .service-panel {
  width:75vw;
  max-width:1390px;
  flex:0 0 auto;
  min-height:0;
  padding:30px var(--gutter)
}

.is-horizontal .service-panel h3 {
  font-size:clamp(55px,6.4vw,104px);
  margin-block:22px 35px;
  max-width:100%
}

.is-horizontal .service-bottom {
  grid-template-columns:1.2fr .8fr;
  gap:8vw;
  max-width:940px
}

.is-horizontal .service-tags {
  display:block;
  padding:0 0 0 22px;
  border-top:0;
  border-left:1px solid #20221f45
}

.is-horizontal .service-tags li+li {
  margin-top:5px
}

.is-horizontal .service-position {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:46px;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  gap:50px;
  font-size:10px;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}

.service-position>div {
  height:1px;
  flex:1;
  background:var(--line)
}

.service-position i {
  display:block;
  width:100%;
  height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left
}

.technology {
  padding:100px 0 75px
}

.tech-statement {
  font-family:var(--display);
  font-size:clamp(36px,4.7vw,78px);
  letter-spacing:-.025em;
  line-height:1.12
}

.tech-statement>span {
  color:var(--muted)
}

/* Technologie-Stack: die Kategorien als ruhige Editorial-Reihen.
   Übernimmt die Geometrie der Sektion: 125px breite Label-Spalte, 55px Spaltenabstand,
   haarfeine Linien in var(--line), Namen in der Display-Schrift.
   Die Linien liegen als Pseudoelement vor und werden über --tech-line skaliert, damit sie
   sich beim Scrollen aufbauen können. Voreinstellung 1: ohne JS sind sie sofort vollständig. */
.technology .tech-stack {
  margin-top:55px
}

.technology .tech-caption {
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
  max-width:125px
}

.technology .tech-groups {
  margin:26px 0 0
}

.technology .tech-groups::after {
  content:'';
  display:block;
  height:1px;
  background:var(--line);
  transform:scaleX(var(--tech-line-end,1));
  transform-origin:left
}

.technology .tech-group {
  position:relative;
  display:grid;
  grid-template-columns:125px minmax(0,1fr);
  gap:55px;
  align-items:start;
  padding:21px 0 27px
}

.technology .tech-group::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--line);
  transform:scaleX(var(--tech-line,1));
  transform-origin:left
}

.technology .tech-group-label {
  font-size:10px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:6px
}

.technology .tech-group-items {
  margin:0
}

.technology .tech-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:19px 30px
}

.technology .tech-item {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-family:var(--display);
  font-size:21px;
  letter-spacing:-.025em;
  line-height:1.1
}

/* Icons als Alphamaske: eine lokale SVG-Datei je Marke, eingefärbt über currentColor.
   Kein externer Request, keine Icon-Schrift, kein Inline-SVG im Dokument. */
.technology .tech-icon {
  flex:0 0 16px;
  width:16px;
  height:16px;
  color:var(--muted);
  background-color:currentColor;
  -webkit-mask:var(--tech-icon) center/contain no-repeat;
  mask:var(--tech-icon) center/contain no-repeat;
  transition:color .3s var(--ease)
}

.technology .tech-icon-none {
  background-color:transparent
}

/* Im Ruhezustand bleiben die Icons einheitlich gedämpft. Beim Hover nehmen sie die offizielle
   Markenfarbe an; ohne hinterlegte Farbe fällt der Wert auf den Tintenton zurück. */
.technology .tech-item:hover .tech-icon {
  color:var(--tech-icon-hex,var(--ink))
}

.technology .tech-icon[data-icon=wordpress] { --tech-icon:url("../icons/tech/wordpress.svg"); --tech-icon-hex:#21759B }
.technology .tech-icon[data-icon=typo3] { --tech-icon:url("../icons/tech/typo3.svg"); --tech-icon-hex:#FF8700 }
.technology .tech-icon[data-icon=drupal] { --tech-icon:url("../icons/tech/drupal.svg"); --tech-icon-hex:#0678BE }
.technology .tech-icon[data-icon=webedition] { --tech-icon:url("../icons/tech/webedition.svg"); --tech-icon-hex:#1F4E96 }
.technology .tech-icon[data-icon=shopware] { --tech-icon:url("../icons/tech/shopware.svg"); --tech-icon-hex:#189EFF }
.technology .tech-icon[data-icon=woocommerce] { --tech-icon:url("../icons/tech/woocommerce.svg"); --tech-icon-hex:#96588A }
.technology .tech-icon[data-icon=hubspot] { --tech-icon:url("../icons/tech/hubspot.svg"); --tech-icon-hex:#FF7A59 }
.technology .tech-icon[data-icon=contao] { --tech-icon:url("../icons/tech/contao.svg"); --tech-icon-hex:#F47C00 }
.technology .tech-icon[data-icon=pimcore] { --tech-icon:url("../icons/tech/pimcore.svg"); --tech-icon-hex:#6428B4 }
.technology .tech-icon[data-icon=grav] { --tech-icon:url("../icons/tech/grav.svg"); --tech-icon-hex:#221E1F }
.technology .tech-icon[data-icon=kirby] { --tech-icon:url("../icons/tech/kirby.svg"); --tech-icon-hex:#000000 }
.technology .tech-icon[data-icon=javascript] { --tech-icon:url("../icons/tech/javascript.svg"); --tech-icon-hex:#F7DF1E }
.technology .tech-icon[data-icon=react] { --tech-icon:url("../icons/tech/react.svg"); --tech-icon-hex:#61DAFB }
.technology .tech-icon[data-icon=vuedotjs] { --tech-icon:url("../icons/tech/vuedotjs.svg"); --tech-icon-hex:#4FC08D }
.technology .tech-icon[data-icon=php] { --tech-icon:url("../icons/tech/php.svg"); --tech-icon-hex:#777BB4 }
.technology .tech-icon[data-icon=symfony] { --tech-icon:url("../icons/tech/symfony.svg"); --tech-icon-hex:#000000 }
.technology .tech-icon[data-icon=laravel] { --tech-icon:url("../icons/tech/laravel.svg"); --tech-icon-hex:#FF2D20 }
.technology .tech-icon[data-icon=nodedotjs] { --tech-icon:url("../icons/tech/nodedotjs.svg"); --tech-icon-hex:#5FA04E }
.technology .tech-icon[data-icon=graphql] { --tech-icon:url("../icons/tech/graphql.svg"); --tech-icon-hex:#E10098 }
.technology .tech-icon[data-icon=mysql] { --tech-icon:url("../icons/tech/mysql.svg"); --tech-icon-hex:#4479A1 }
.technology .tech-icon[data-icon=mariadb] { --tech-icon:url("../icons/tech/mariadb.svg"); --tech-icon-hex:#003545 }
.technology .tech-icon[data-icon=docker] { --tech-icon:url("../icons/tech/docker.svg"); --tech-icon-hex:#2496ED }
.technology .tech-icon[data-icon=git] { --tech-icon:url("../icons/tech/git.svg"); --tech-icon-hex:#F03C2E }
.technology .tech-icon[data-icon=linux] { --tech-icon:url("../icons/tech/linux.svg"); --tech-icon-hex:#FCC624 }
.technology .tech-icon[data-icon=nginx] { --tech-icon:url("../icons/tech/nginx.svg"); --tech-icon-hex:#009639 }
.technology .tech-icon[data-icon=apache] { --tech-icon:url("../icons/tech/apache.svg"); --tech-icon-hex:#D22128 }
.technology .tech-icon[data-icon=vite] { --tech-icon:url("../icons/tech/vite.svg"); --tech-icon-hex:#9135FF }
.technology .tech-icon[data-icon=webpack] { --tech-icon:url("../icons/tech/webpack.svg"); --tech-icon-hex:#8DD6F9 }
.technology .tech-icon[data-icon=composer] { --tech-icon:url("../icons/tech/composer.svg"); --tech-icon-hex:#885630 }
.technology .tech-icon[data-icon=npm] { --tech-icon:url("../icons/tech/npm.svg"); --tech-icon-hex:#CB3837 }

/* ===== Sektion 04 – Zusammenarbeit ===== */
.partnership {
  background:var(--accent);
  padding:95px 0 110px;
  position:relative
}

.partnership .chapter-number {
  color:#535e38
}

.partnership h2 {
  font-size:clamp(64px,10.5vw,176px);
  line-height:1.04;
  letter-spacing:-.035em;
  margin-top:55px
}

.repeat-word {
  position:relative;
  display:inline-block
}

.repeat-word::after {
  content:'';
  position:absolute;
  left:0;
  bottom:.025em;
  width:100%;
  height:.04em;
  background:currentColor;
  transform:scaleX(var(--repeat-progress,1));
  transform-origin:left
}

.partnership-story {
  display:grid;
  grid-template-columns:.85fr 1fr;
  gap:12vw;
  margin-top:65px;
  padding-top:35px;
  border-top:1px solid #20221f50
}

.partnership-lead {
  font-family:var(--display);
  font-size:clamp(27px,2.8vw,44px);
  letter-spacing:-.03em;
  line-height:1.2;
  max-width:415px
}

.prose p {
  font-size:14px;
  line-height:1.8;
  max-width:550px
}

.prose p+p {
  margin-top:20px
}

.prose .responsibility {
  margin-top:35px;
  font-weight:500;
  border-left:2px solid var(--ink);
  padding-left:20px
}

.white-label {
  display:grid;
  grid-template-columns:.85fr 1fr;
  gap:12vw;
  margin-top:110px;
  align-items:center
}

.white-label-copy h3 {
  font-size:clamp(35px,3.7vw,60px);
  margin-top:25px;
  line-height:1.07
}

.white-label-copy>p:not(.eyebrow) {
  font-size:14px;
  margin-top:25px;
  max-width:410px
}

.white-label-copy ul {
  margin-top:30px;
  font-size:12px
}

.white-label-copy li {
  padding:12px 0;
  border-top:1px solid #20221f40;
  display:flex;
  align-items:center;
  gap:16px
}

.white-label-copy li::before {
  content:'↗';
  content:'↗'/'';
  font-size:17px
}

.visibility-controls {
  display:flex;
  border-bottom:1px solid #20221f50;
  gap:25px;
  position:relative;
  z-index:5
}

.visibility-controls button {
  font-size:11px;
  min-height:47px;
  padding:5px 0;
  position:relative
}

.visibility-controls button[aria-pressed=true]::after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:3px;
  background:var(--ink)
}

.visibility-stage {
  position:relative;
  height:385px;
  margin:24px 0 18px
}

.client-label {
  display:block;
  text-align:center;
  font-size:11px;
  padding-top:0
}

.client-line {
  width:1px;
  height:44px;
  background:var(--ink);
  margin-inline:auto
}

.agency-sheet {
  position:absolute;
  left:2%;
  top:69px;
  width:78%;
  height:225px;
  background:var(--paper);
  padding:24px;
  z-index:2;
  border:1px solid var(--ink);
  transition:width .7s var(--ease)
}

.agency-sheet>span:first-child,.justin-sheet>span:first-child {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.065em;
  display:block
}

.agency-sheet strong {
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:.98;
  letter-spacing:-.035em;
  margin-top:14px
}

.agency-sign {
  font-size:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px
}

.agency-sign i {
  font-size:18px
}

.justin-sheet {
  position:absolute;
  right:2%;
  bottom:0;
  background:var(--ink);
  color:var(--accent);
  width:57%;
  height:165px;
  padding:22px;
  transition:height .7s var(--ease),bottom .7s var(--ease),width .7s var(--ease);
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.justin-sheet strong {
  font-family:var(--display);
  font-size:40px;
  letter-spacing:-.035em;
  font-weight:500;
  line-height:1
}

.justin-mode {
  font-size:10px;
  color:var(--paper)
}

.visibility-demo[data-mode=direct] .agency-sheet {
  width:48%
}

.visibility-demo[data-mode=direct] .justin-sheet {
  width:48%;
  height:225px;
  bottom:91px
}

.visibility-demo[data-mode=direct] .agency-sign {
  font-size:8px
}

.visibility-demo[data-mode=direct] .agency-sign i {
  display:none
}

.visibility-caption {
  min-height:40px;
  font-size:11px;
  max-width:430px;
  line-height:1.6
}

/* ===== Sektion 05 – Über mich (dunkel) ===== */
.about {
  padding:95px 0 110px;
  position:relative
}

.about h2 {
  font-size:clamp(48px,6.5vw,108px);
  margin-top:45px;
  line-height:1.03
}

.about h2>span {
  color:var(--accent)
}

.about-grid {
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:13vw;
  margin-top:70px
}

.about-person {
  max-width:450px
}

.about-portrait {
  position:relative;
  aspect-ratio:1.12;
  background:#404736;
  overflow:hidden
}

.about-portrait img {
  position:absolute;
  width:135%;
  height:110%;
  max-width:none;
  left:-4%;
  bottom:-1px;
  object-fit:contain;
  object-position:center bottom;
  filter:grayscale(1)
}

.about-portrait>span {
  position:absolute;
  left:22px;
  bottom:22px;
  font-family:var(--display);
  font-size:40px;
  line-height:.94;
  letter-spacing:-.025em;
  color:var(--paper)
}

.about-person>p {
  font-size:10px;
  line-height:1.8;
  color:#b8bcae;
  margin-top:18px
}

.experience {
  display:flex;
  align-items:end;
  gap:30px;
  border-top:1px solid #505746;
  margin-top:35px;
  padding-top:20px
}

.experience>strong {
  font-family:var(--display);
  font-size:112px;
  letter-spacing:-.045em;
  font-weight:500;
  line-height:.95
}

.experience>strong>span {
  color:var(--accent);
  font-size:.6em;
  vertical-align:top;
  margin-left:6px
}

.experience>span {
  font-size:11px;
  color:#b8bcae;
  padding-bottom:10px
}

.about-copy>p {
  font-size:14px;
  color:#b8bcae;
  margin-top:24px;
  line-height:1.8
}

.about-copy>.about-lead {
  font-family:var(--display);
  font-size:clamp(25px,2.7vw,42px);
  line-height:1.28;
  letter-spacing:-.025em;
  color:var(--paper);
  margin-top:0
}

.about-copy>.about-principle {
  font-family:var(--display);
  font-size:clamp(34px,3.5vw,58px);
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--paper);
  margin-top:48px
}

.about-principle>span {
  color:var(--accent)
}

/* ===== Sektion 06 – Ablauf ===== */
.process {
  padding-block:110px
}

.process-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:30px
}

.process-heading .eyebrow {
  align-self:start;
  padding-top:7px
}

.process-heading h2 {
  font-size:clamp(41px,4.7vw,76px)
}

.process-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4vw;
  margin-top:65px
}

.process-list li {
  border-top:1px solid var(--line);
  padding-top:24px;
  position:relative
}

.process-list li::before {
  content:'';
  height:2px;
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  background:var(--ink);
  transform-origin:left;
  transform:scaleX(var(--step-progress,1))
}

.process-number {
  font-family:var(--display);
  font-size:54px;
  line-height:1;
  letter-spacing:-.025em
}

.process-list h3 {
  font-size:27px;
  line-height:1.12;
  margin-top:35px
}

.process-list p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin-top:20px;
  max-width:360px
}

.process-action {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:45px
}

.process-action>span {
  font-size:11px;
  color:var(--muted)
}

/* ===== Sektion 07 – FAQ ===== */
.faq {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:9vw;
  border-top:1px solid var(--line);
  padding:95px 0 125px
}

.faq-heading h2 {
  margin-top:35px;
  font-size:clamp(44px,5.4vw,88px)
}

.faq-heading>p:last-child {
  font-size:14px;
  color:var(--muted);
  margin-top:25px;
  max-width:300px
}

.faq-list {
  padding-top:2px
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list details:first-child {
  border-top:1px solid var(--line)
}

.faq-list summary {
  list-style:none;
  display:flex;
  align-items:center;
  gap:22px;
  min-height:90px;
  padding:24px 0;
  cursor:pointer
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary>span {
  font-size:10px;
  color:var(--muted)
}

.faq-list h3 {
  font-family:var(--body);
  font-weight:400;
  font-size:15px;
  line-height:1.55;
  letter-spacing:-.015em
}

.faq-list summary>i {
  margin-left:auto;
  flex:0 0 15px;
  width:15px;
  height:15px;
  position:relative
}

.faq-list summary>i::before,.faq-list summary>i::after {
  content:'';
  position:absolute;
  height:1px;
  inset:7px 0 auto;
  background:currentColor;
  transition:transform .25s
}

.faq-list summary>i::after {
  transform:rotate(90deg)
}

.faq-list details[open] summary>i::after {
  transform:rotate(0)
}

.faq-list summary:hover h3 {
  text-decoration:underline;
  text-underline-offset:4px
}

.faq-list details>p {
  padding:0 35px 28px 35px;
  font-size:13px;
  color:var(--muted);
  line-height:1.85
}

/* ===== Sektion 08 – Kontakt & Footer ===== */
.contact {
  background:var(--accent);
  padding-top:85px
}

.contact .chapter-number {
  color:#535e38
}

.contact-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:42px
}

.contact h2 {
  font-size:clamp(52px,8.3vw,146px);
  line-height:1.03;
  letter-spacing:-.035em
}

.contact-arrow {
  font-size:clamp(110px,16vw,235px);
  line-height:1;
  font-weight:400;
  transition:transform .4s var(--ease)
}

.contact-arrow:hover {
  transform:translate(8px,-8px)
}

.contact-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14vw;
  margin-top:65px;
  border-top:1px solid #20221f45;
  padding-top:35px
}

.contact-bottom>div>p {
  font-size:14px;
  line-height:1.8;
  max-width:445px
}

.contact-bottom .button {
  margin-top:28px
}

.contact-details {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.email {
  font-family:var(--display);
  font-size:clamp(25px,2.8vw,44px);
  line-height:1.2;
  letter-spacing:-.03em
}

.email:hover,.phone:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.phone {
  font-size:18px;
  margin-top:12px
}

.copy-email {
  display:flex;
  gap:25px;
  align-items:center;
  font-size:10px;
  padding:10px 0;
  margin-top:7px
}

.copy-email span {
  font-size:16px
}

.copy-status {
  font-size:10px;
  min-height:20px
}

.contact-bottom .contact-details>p {
  font-size:11px
}

.contact-details>p {
  margin-top:18px
}

.site-footer {
  background:var(--accent);
  padding-top:80px;

}

.footer-row {
  display:flex;
  align-items:center;
  gap:28px;
  border-top:1px solid #20221f45;
  padding:25px 0;
  font-size:9px
}

.footer-name {
  font-family:var(--display);
  font-size:22px;
  letter-spacing:-.035em;
  margin-right:auto
}

.motion-toggle {
  font-size:9px;
  padding:10px 0
}

.motion-toggle:hover,.footer-row>a:last-of-type:hover,.footer-legal a:hover {
  text-decoration:underline;
  text-underline-offset:3px
}

.footer-row>span:last-child {
  white-space:nowrap
}

.footer-legal {
  display:flex;
  align-items:center;
  gap:28px
}

.footer-row>a:last-of-type,.footer-legal a {
  padding-block:5px
}

/* ===== Unterseiten: Impressum, Datenschutz, 404 ===== */
.legal {
  padding: 60px 0 110px;
}
.legal h1 {
  font-size: clamp(44px, 5.2vw, 84px);
  margin-top: 34px;
}
.legal-intro {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 26px;
  max-width: 560px;
}
.legal-body {
  max-width: 720px;
  margin-top: 55px;
}
.legal-body h2 {
  font-size: clamp(26px, 2.6vw, 42px);
  letter-spacing: -.025em;
  margin-top: 55px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.legal-body > h2:first-child {
  margin-top: 0;
}
.legal-body p,
.legal-body li,
.legal-body dt,
.legal-body dd {
  font-size: 14px;
  line-height: 1.8;
}
.legal-body h2 + p,
.legal-body p + p,
.legal-body ul + p,
.legal-body dl + p,
.legal-body p + ul,
.legal-body p + dl,
.legal-body h2 + address,
.legal-body p + address,
.legal-body address + p,
.legal-body address + dl {
  margin-top: 16px;
}
.legal-body ul {
  list-style: disc;
  padding-left: 20px;
}
.legal-body li + li {
  margin-top: 6px;
}
.legal-body dl {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 6px 28px;
  margin-top: 16px;
}
.legal-body dt {
  color: var(--muted);
}
.legal-body dd {
  margin: 0;
}
.legal-body address {
  font-style: normal;
}
.legal-body a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal-body a:hover {
  text-decoration: none;
}
.legal-placeholder {
  background: var(--accent);
  color: var(--ink);
  padding: 1px .4em;
  font-weight: 500;
}
.legal-status {
  margin-top: 45px;
  font-size: 11px;
  color: var(--muted);
}
.legal .button {
  margin-top: 35px;
}
@media (max-width: 760px) {
  .legal {
    padding: 45px 0 65px;
  }
  .legal h1 {
    font-size: clamp(37px, 8vw, 62px);
    margin-top: 25px;
  }
  .legal-body {
    margin-top: 40px;
  }
  .legal-body h2 {
    margin-top: 40px;
    padding-top: 24px;
  }
  .legal-body p,
  .legal-body li,
  .legal-body dt,
  .legal-body dd {
    font-size: 13px;
  }
  .legal-body dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .legal-body dd + dt {
    margin-top: 10px;
  }
}

/* ===== Breakpoint ≥ 1900px ===== */
@media(min-width:1900px) {
  .hero-grid {
    gap:90px
  }
  .hero-portrait {
    max-width:520px;
    justify-self:end;
    width:100%
  }
  .hero-description {
    font-size:16px;
    max-width:680px
  }
  .hero-bottom {
    max-width:680px;
    margin-top:45px
  }
  .hero {
    padding-top:45px
  }
  .hero-top {
    margin-bottom:65px
  }
  .chapter-link {
    margin-top:60px
  }
}

/* ===== Breakpoint ≤ 1100px ===== */
@media(max-width:1100px) {
  .header-note {
    display:none
  }
  .header nav {
    gap:23px
  }
  .hero-grid {
    grid-template-columns:1.85fr 1fr;
    gap:25px
  }
  h1 {
    font-size:6.52vw
  }
  .hero-description {
    font-size:13px
  }
  .hero-bottom {
    margin-top:25px
  }
  .hero-actions {
    gap:20px
  }
  .button {
    gap:26px;
    min-height:52px
  }
  .portrait-topline {
    left:22px;
    top:23px
  }
  .portrait-corner {
    right:21px;
    top:20px;
    font-size:29px
  }
  .hero-portrait figcaption strong {
    font-size:22px
  }
  .hero-portrait figcaption div>span {
    font-size:9px
  }
  .portrait-index {
    display:none
  }
  .problem-layout {
    column-gap:6vw
  }
  .problem-intro {
    top:35px
  }
  .problem-intro h2 {
    font-size:6vw
  }
  .problem-story {
    grid-template-columns:30px 1fr;
    gap:14px
  }
  .problem-story p {
    font-size:13px
  }
  .outcome-detail,.about-grid,.partnership-story,.white-label {
    gap:8vw
  }
  .services-heading {
    grid-template-columns:.65fr 2fr auto
  }
  .services-direction {
    font-size:80px
  }
  .service-panel {
    min-height:630px;
    padding:30px 35px
  }
  .service-panel h3 {
    font-size:5vw
  }
  .technology .tech-group {
    grid-template-columns:115px minmax(0,1fr);
    gap:35px
  }
  .technology .tech-list {
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:18px 26px
  }
  .technology .tech-item {
    font-size:19px
  }
  .agency-sheet {
    padding:20px
  }
  .agency-sheet strong {
    font-size:48px
  }
  .justin-sheet {
    padding:18px
  }
  .visibility-controls {
    gap:18px
  }
  .visibility-controls button {
    font-size:10px
  }
  .about-person {
    max-width:375px
  }
  .process-heading {
    grid-template-columns:.6fr 2fr
  }
  .contact-bottom {
    gap:9vw
  }
  .footer-row {
    gap:20px
  }
}

/* ===== Breakpoint ≤ 760px (Mobile) ===== */
@media(max-width:760px) {
  :root {
    --gutter:22px
  }
  html {
    scroll-padding-top:24px
  }
  .header {
    height:78px;
    gap:20px
  }
  .wordmark {
    font-size:23px
  }
  .header-note {
    display:block;
    font-size:9px;
    margin-left:auto;
    margin-right:14px
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:11px;
    padding:15px 0 15px 10px
  }
  .menu-toggle i {
    position:relative;
    display:block;
    width:21px;
    height:15px
  }
  .menu-toggle i::before,.menu-toggle i::after {
    content:'';
    height:1px;
    background:var(--ink);
    position:absolute;
    left:0;
    right:0;
    top:4px;
    transition:transform .3s,top .3s
  }
  .menu-toggle i::after {
    top:11px
  }
  .menu-toggle[aria-expanded=true] i::before {
    top:7px;
    transform:rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] i::after {
    top:7px;
    transform:rotate(-45deg)
  }
  .header nav {
    position:absolute;
    left:0;
    right:0;
    top:77px;
    display:none;
    background:var(--ink);
    color:var(--paper);
    padding:24px var(--gutter) 32px;
    border-bottom:1px solid var(--line);
    gap:0;
    flex-direction:column;
    align-items:stretch;
    margin:0
  }
  .header nav.is-open {
    display:flex
  }
  .header nav>a {
    font-family:var(--display);
    font-size:31px;
    padding-block:15px;
    letter-spacing:-.03em;
    border-bottom:1px solid #555c4e
  }
  .header nav>a:not(.nav-contact)::after {
    display:none
  }
  .header .nav-contact {
    font-family:var(--body);
    font-size:12px;
    letter-spacing:0;
    color:var(--ink);
    background:var(--accent);
    margin:20px 0 0;
    border:0;
    padding:17px 20px
  }
  .hero {
    padding-top:24px
  }
  .hero-top {
    margin-bottom:28px;
    align-items:flex-start
  }
  .hero-top .eyebrow {
    font-size:9px;
    gap:10px
  }
  .location {
    display:none
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  h1 {
    font-size:clamp(30px,9.6vw,65px);
    line-height:1.045;
    letter-spacing:-.025em
  }
  .hero-bottom {
    max-width:none;
    margin-top:27px
  }
  .hero-description {
    font-size:13px;
    line-height:1.8;
    max-width:550px
  }
  .hero-actions {
    margin-top:23px;
    gap:22px
  }
  .button {
    font-size:11px;
    min-height:52px;
    padding:14px 17px;
    gap:25px
  }
  .text-link {
    font-size:11px;
    gap:15px
  }
  .hero-portrait {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:end;
    max-width:550px;
    width:100%;
    padding:0
  }
  .portrait-window {
    aspect-ratio:.94
  }
  .portrait-window::after {
    inset:10px
  }
  .portrait-topline {
    top:15px;
    left:15px;
    font-size:8px
  }
  .portrait-corner {
    font-size:21px;
    top:11px;
    right:15px
  }
  .portrait-window img {
    width:169%;
    left:-34.5%;
    height:103%
  }
  .hero-portrait figcaption {
    padding-bottom:15px
  }
  .hero-portrait figcaption strong {
    font-size:26px
  }
  .hero-portrait figcaption div>span {
    font-size:10px;
    max-width:130px;
    line-height:1.6;
    margin-top:8px
  }
  .chapter-link {
    margin-top:30px;
    padding-block:21px;
    font-size:9px;
    align-items:flex-start
  }
  .chapter-link>span:first-child {
    max-width:185px
  }
  .chapter-link>span:last-child {
    gap:14px;
    white-space:nowrap
  }
  .chapter-link i {
    font-size:15px
  }
  .problem {
    padding-top:70px
  }
  .problem-layout {
    display:block
  }
  .problem-intro {
    position:static
  }
  .eyebrow {
    font-size:9px;
    gap:10px
  }
  .chapter-number {
    font-size:9px;
    min-width:28px
  }
  .problem-intro h2 {
    font-size:clamp(46px,9.5vw,68px);
    margin-top:25px
  }
  .intro-copy {
    font-size:13px;
    max-width:420px;
    margin-top:23px
  }
  .problem-direction {
    display:none
  }
  .problem-stories {
    padding-top:45px
  }
  .problem-story {
    padding:28px 0 38px;
    min-height:0;
    grid-template-columns:28px 1fr;
    gap:14px
  }
  .problem-story h3 {
    font-size:29px
  }
  .problem-story p {
    font-size:13px;
    margin-top:19px;
    line-height:1.85
  }
  .story-index {
    font-size:10px
  }
  .stakes {
    display:block;
    margin-top:15px;
    padding:25px 0 55px;
    font-size:12px
  }
  .stakes>p+p {
    margin-top:16px
  }
  .outcome-stage {
    min-height:0;
    padding:55px 0 40px;
    gap:42px
  }
  .outcome h2 {
    font-size:clamp(36px,7.7vw,58px);
    line-height:1.12;
    letter-spacing:-.025em
  }
  .outcome-line {
    margin-bottom:6px
  }
  .handoff {
    gap:20px;
    flex-wrap:wrap;
    padding-top:25px
  }
  .handoff-role {
    width:calc(50% - 28px)
  }
  .handoff-role strong {
    font-size:25px
  }
  .handoff-role>span {
    font-size:9px;
    line-height:1.5;
    max-width:120px
  }
  .handoff-connection {
    min-width:15px;
    flex:0 0 16px
  }
  .handoff-connection>span {
    display:none
  }
  .handoff-connection i {
    font-size:23px;
    margin:0
  }
  .outcome-detail {
    display:block;
    padding:36px 0 65px
  }
  .outcome-lead {
    font-size:27px;
    line-height:1.3;
    max-width:550px
  }
  .principles {
    margin-top:40px
  }
  .principles article {
    padding-block:24px;
    grid-template-columns:25px 1fr;
    gap:13px
  }
  .principles h3 {
    font-size:23px
  }
  .principles p {
    font-size:12px;
    margin-top:10px
  }
  .services-heading {
    display:block;
    padding:65px 0 35px
  }
  .services-heading h2 {
    font-size:clamp(41px,8.6vw,65px);
    margin-top:25px
  }
  .services-heading p:not(.eyebrow) {
    font-size:13px;
    margin-top:22px;
    max-width:380px
  }
  .services-direction {
    display:none
  }
  .service-track {
    display:block
  }
  .service-panel {
    min-height:490px;
    padding:27px var(--gutter) 32px;
    border:0
  }
  .service-top {
    gap:22px;
    font-size:9px
  }
  .service-number {
    font-size:41px
  }
  .service-panel h3 {
    font-size:clamp(39px,8.6vw,62px);
    margin:27px 0 35px;
    max-width:650px
  }
  .service-bottom {
    font-size:12px;
    gap:25px;
    max-width:550px
  }
  .service-tags {
    font-size:10px;
    padding-top:18px;
    gap:5px 17px
  }
  .technology {
    padding:55px 0
  }
  .tech-statement {
    font-size:clamp(29px,6.4vw,45px);
    line-height:1.18;
    overflow-wrap:anywhere
  }
  .technology .tech-stack {
    margin-top:32px
  }
  .technology .tech-caption {
    max-width:none;
    font-size:9px
  }
  .technology .tech-groups {
    margin-top:20px
  }
  .technology .tech-group {
    display:block;
    padding:18px 0 25px
  }
  .technology .tech-group-label {
    padding-top:0;
    font-size:9px
  }
  .technology .tech-list {
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:15px 18px;
    margin-top:16px
  }
  .technology .tech-item {
    gap:8px;
    font-size:16px
  }
  .technology .tech-icon {
    flex-basis:14px;
    width:14px;
    height:14px
  }
  .partnership {
    padding:58px 0 65px
  }
  .partnership h2 {
    font-size:clamp(45px,9.75vw,74px);
    line-height:1.09;
    margin-top:30px;
    letter-spacing:-.035em
  }
  .partnership-story {
    display:block;
    margin-top:35px;
    padding-top:28px
  }
  .partnership-lead {
    font-size:28px;
    max-width:430px
  }
  .prose {
    margin-top:28px
  }
  .prose p {
    font-size:13px
  }
  .prose .responsibility {
    font-size:13px;
    margin-top:26px
  }
  .white-label {
    display:block;
    margin-top:60px
  }
  .white-label-copy h3 {
    font-size:37px;
    margin-top:20px
  }
  .white-label-copy>p:not(.eyebrow) {
    font-size:13px;
    max-width:500px;
    margin-top:20px
  }
  .white-label-copy ul {
    margin-top:23px;
    font-size:11px
  }
  .visibility-demo {
    margin-top:34px;
    max-width:550px
  }
  .visibility-controls {
    gap:28px
  }
  .visibility-controls button {
    font-size:11px
  }
  .visibility-stage {
    height:355px;
    margin-top:23px
  }
  .agency-sheet {
    height:213px;
    padding:20px
  }
  .agency-sheet strong {
    font-size:50px
  }
  .agency-sign {
    font-size:8px
  }
  .justin-sheet {
    height:150px;
    padding:17px
  }
  .justin-sheet strong {
    font-size:36px
  }
  .justin-mode {
    font-size:9px
  }
  .visibility-demo[data-mode=direct] .justin-sheet {
    height:213px;
    bottom:73px
  }
  .visibility-demo[data-mode=direct] .agency-sheet strong {
    font-size:32px
  }
  .visibility-demo[data-mode=direct] .agency-sign {
    font-size:7px;
    line-height:1.6
  }
  .visibility-demo[data-mode=direct] .agency-sheet {
    padding:17px
  }
  .visibility-demo[data-mode=direct] .justin-sheet>span:first-child {
    font-size:8px
  }
  .visibility-caption {
    font-size:10px;
    min-height:34px
  }
  .about {
    padding:58px 0 65px
  }
  .about h2 {
    font-size:clamp(37px,8vw,62px);
    margin-top:30px;
    line-height:1.1
  }
  .about-grid {
    display:flex;
    flex-direction:column;
    gap:37px;
    margin-top:35px
  }
  .about-person {
    max-width:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:start
  }
  .about-portrait {
    grid-row:1/3;
    aspect-ratio:.8
  }
  .about-portrait img {
    width:190%;
    left:-39%;
    height:100%
  }
  .about-portrait>span {
    font-size:27px;
    left:13px;
    bottom:13px
  }
  .about-person>p {
    font-size:9px;
    margin:0;
    align-self:end;
    line-height:1.9
  }
  .experience {
    margin:0;
    gap:13px;
    padding-top:15px;
    align-items:center
  }
  .experience>strong {
    font-size:62px
  }
  .experience>strong>span {
    margin-left:2px
  }
  .experience>span {
    font-size:8px;
    padding:0
  }
  .about-copy>.about-lead {
    font-size:27px;
    line-height:1.32
  }
  .about-copy>p {
    font-size:13px;
    margin-top:20px
  }
  .about-copy>.about-principle {
    font-size:39px;
    margin-top:33px
  }
  .process {
    padding-block:65px
  }
  .process-heading {
    display:block
  }
  .process-heading h2 {
    font-size:clamp(36px,7.5vw,56px);
    margin-top:26px;
    line-height:1.1
  }
  .process-list {
    display:block;
    margin-top:35px
  }
  .process-list li {
    display:grid;
    grid-template-columns:48px 1fr;
    gap:17px;
    padding:25px 0 30px
  }
  .process-number {
    font-size:38px;
    grid-row:1/3
  }
  .process-list h3 {
    font-size:25px;
    margin:0
  }
  .process-list p {
    font-size:12px;
    margin:0;
    max-width:490px
  }
  .process-action {
    margin-top:9px;
    display:block
  }
  .process-action>span {
    display:block;
    font-size:10px;
    margin-top:17px
  }
  .faq {
    display:block;
    padding:60px 0 65px
  }
  .faq-heading h2 {
    font-size:47px;
    margin-top:23px
  }
  .faq-heading>p:last-child {
    font-size:13px;
    margin-top:20px;
    max-width:300px
  }
  .faq-list {
    margin-top:30px
  }
  .faq-list summary {
    min-height:84px;
    gap:16px;
    padding-block:22px
  }
  .faq-list h3 {
    font-size:13px
  }
  .faq-list summary>span {
    font-size:9px
  }
  .faq-list summary>i {
    flex-basis:13px;
    width:13px
  }
  .faq-list details>p {
    font-size:12px;
    padding:0 20px 25px 29px
  }
  .contact {
    padding-top:55px
  }
  .contact-title-row {
    margin-top:25px;
    gap:15px;
    align-items:flex-end
  }
  .contact h2 {
    font-size:clamp(40px,8.6vw,65px);
    line-height:1.1
  }
  .contact-arrow {
    font-size:60px;
    line-height:1.1;
    flex:0 0 49px
  }
  .contact-bottom {
    display:block;
    margin-top:30px;
    padding-top:25px
  }
  .contact-bottom>div>p {
    font-size:13px;
    max-width:510px
  }
  .contact-bottom .button {
    margin-top:23px
  }
  .contact-details {
    margin-top:40px
  }
  .email {
    font-size:33px;
    overflow-wrap:anywhere
  }
  .phone {
    font-size:17px;
    margin-top:12px
  }
  .copy-email {
    font-size:10px
  }
  .contact-details>p {
    margin-top:15px
  }
  .site-footer {
    padding-top:45px;
  }
  .footer-row {
    display:grid;
    grid-template-columns:1fr auto;
    gap:14px 20px;
    padding:25px 0;
    font-size:9px
  }
  .footer-name {
    font-size:22px
  }
  .footer-row>span:nth-child(2) {
    grid-column:1;
    grid-row:2
  }
  .motion-toggle {
    grid-column:1;
    justify-self:start;
    padding:5px 0;
    font-size:9px
  }
  .footer-row>a:last-of-type {
    grid-column:2;
    grid-row:1
  }
  .footer-row>span:last-child {
    grid-column:2;
    grid-row:3
  }
  .footer-legal {
    grid-column:1/-1;
    grid-row:4;
    gap:20px
  }
}

/* ===== Breakpoint ≤ 370px ===== */
@media(max-width:370px) {
  .visibility-demo[data-mode=direct] .agency-sheet strong {
    font-size:27px
  }
  .service-panel h3 {
    font-size:34px
  }
  .technology .tech-list {
    grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
    gap:14px 16px
  }
  .technology .tech-item {
    font-size:15px
  }
  .process-heading h2 {
    font-size:31px
  }
  :root {
    --gutter:18px
  }
  .header-note {
    display:none
  }
  .menu-toggle {
    margin-left:auto
  }
  .hero-actions {
    gap:14px
  }
  .text-link {
    gap:10px
  }
  .button {
    gap:15px;
    padding-inline:14px
  }
  .hero-top .eyebrow {
    font-size:8px
  }
  .hero-portrait figcaption strong {
    font-size:23px
  }
  .hero-portrait figcaption div>span {
    font-size:9px
  }
  .portrait-topline {
    font-size:7px
  }
  .portrait-corner {
    font-size:18px
  }
  .contact h2 {
    font-size:8.4vw
  }
  .contact-arrow {
    font-size:48px;
    flex-basis:38px
  }
  .email {
    font-size:29px
  }
  .visibility-controls {
    gap:19px
  }
  .visibility-controls button {
    font-size:10px
  }
  .agency-sign {
    font-size:7px
  }
  .handoff-role strong {
    font-size:23px
  }
}

/* ===== Desktop mit geringer Viewport-Höhe (≤ 740px) ===== */
@media(min-width:761px) and (max-height:740px) {
  .problem-intro {
    position:static
  }
  .outcome-stage {
    min-height:0;
    gap:55px
  }
  .service-panel {
    min-height:580px
  }
  .hero {
    padding-top:25px
  }
  .hero-top {
    margin-bottom:30px
  }
}

/* ===== Reduced Motion (Systemeinstellung) ===== */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .problem-intro {
    position:static
  }
  .story-progress {
    transform:scaleX(1)
  }
}

/* ===== Reduced Motion (manueller Schalter im Footer) ===== */
html[data-reduced-motion=true] {
  scroll-behavior:auto
}

html[data-reduced-motion=true] *,html[data-reduced-motion=true] *::before,html[data-reduced-motion=true] *::after {
  animation:none!important;
  transition:none!important
}

html[data-reduced-motion=true] .problem-intro {
  position:static
}

html[data-reduced-motion=true] .story-progress {
  transform:scaleX(1)
}

/* ===== Print ===== */
@media print {
  .header,.hero-actions,.chapter-link,.visibility-controls,.contact-arrow,.copy-email,.motion-toggle,.service-position {
    display:none!important
  }
  * {
    background:white!important;
    color:black!important;
    transform:none!important;
    position:static!important;
    animation:none!important
  }
  body {
    font-size:11pt
  }
  .wrap {
    width:100%
  }
  .problem,.outcome-detail,.partnership-story,.white-label,.about-grid,.process-heading,.faq,.contact-bottom {
    display:block
  }
  .hero-grid {
    grid-template-columns:2fr 1fr
  }
  h1 {
    font-size:36pt
  }
  .hero-portrait img,.about-portrait img {
    position:absolute!important
  }
  .service-track {
    display:grid!important;
    width:auto!important;
    grid-template-columns:1fr 1fr
  }
  .service-panel {
    width:auto!important;
    min-height:0!important;
    border:1px solid #ccc;
    padding:20px!important
  }
  .service-panel h3 {
    font-size:26pt!important
  }
  .outcome-stage {
    min-height:0
  }
  .pin-spacer {
    padding:0!important;
    height:auto!important;
    max-height:none!important
  }
  .service-viewport {
    height:auto!important;
    overflow:visible!important
  }
  .problem-intro,.problem-stories,.about,.partnership,.process,.faq,.technology {
    padding-block:25px
  }
  .visibility-stage {
    display:none
  }
  h2 {
    font-size:32pt
  }
  .site-footer {
    padding-top:20px;
  }
}