/* ==========================================================================
   CAIRO — Brand & Web Design, Frankfurt
   Design System · v4
   --------------------------------------------------------------------------
   Referenzen: novapersona.webflow.io (heller Aufbau, Icon-Badges, Karten)
               folioblox.framer.website (Bento-Kacheln, Akzent-Eyebrow,
               nummerierte Leiste, Pill-Button mit Pfeilkreis)

   Regeln fuer diese Fassung:
   · NUR zwei Schriften — Red Hat Display (Text + Headlines) und
   ·   Instrument Serif (Highlight, kursiv). Kein Monospace.
   · Headlines gross und fett (Red Hat Display 700/800). Das traegt den Charakter.
   · Weinrot ist sichtbar: Eyebrows, Linien, Icon-Badges, eine volle Kachel.
   · Grosse Radien, echte Karten, viel Kontrast zwischen den Bausteinen.
   ========================================================================== */

/* 0. SCHRIFTEN ============================================================ */

/* Red Hat Display — variabel 300–900, lokal eingebettet (SIL OFL).
   Ersetzt die zuvor genutzte Display-Schrift. */
@font-face {
  font-family: 'Red Hat Display';
  src: url('../../fonts/Red_Hat_Display/RedHatDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}


/* 1. TOKENS =============================================================== */

:root {
  --wine:      #78020E;
  --wine-deep: #5A0109;
  --wine-soft: #8F1622;
  --wine-tint: #F7E3E5;
  --sky:       #CFE8FF;
  --sky-soft:  #E2EEFB;
  --carbon:    #16171A;

  --bg:      #FFFFFF;
  --bg-soft: #F2F4F7;
  --bg-alt:  #E8EBF0;

  --ink:       #14151A;
  --ink-soft:  #2B2E35;
  --ink-muted: #3E424A;
  --ink-faint: #5C616B;

  --line:        #D8DCE3;
  --line-strong: #C2C8D1;

  --on-dark:       #F5F5F6;
  --on-dark-muted: rgba(245, 245, 246, .78);
  --on-wine:       #FFF6F7;
  --on-wine-muted: rgba(255, 246, 247, .88);

  --font-sans:    'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Red Hat Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Typo — groesser und kraeftiger als v3 */
  --fs-hero:  clamp(2rem, 1.4rem + 2.2vw, 45px);
  --fs-h1:    clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  --fs-h2:    clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --fs-h3:    clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-h4:    1.125rem;
  --fs-lead:  clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-sm:    1rem;
  --fs-xs:    0.875rem;
  --fs-label: 0.75rem;

  --wrap:      1240px;
  --wrap-text: 760px;
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --section-y: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);

  /* Bewusst flach: max. 5px. Keine Pillen, keine Kreise bei Flaechen. */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   5px;
  --r-lg:   5px;
  --r-xl:   5px;
  --r-pill: 5px;

  --shadow-sm: 0 2px 8px rgba(20, 21, 26, .05);
  --shadow-md: 0 8px 24px rgba(20, 21, 26, .07), 0 2px 6px rgba(20, 21, 26, .04);
  --shadow-lg: 0 20px 56px rgba(20, 21, 26, .11);

  --ease:     cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast:   .16s;
  --t-base:   .3s;
  --t-slow:   .6s;

  --header-h: 64px;
}

/* 2. RESET ================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--wine); color: #fff; }

.skip-link {
  position: absolute;
  top: -100%; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: .8rem 1.5rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 3. LAYOUT =============================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section--line   { border-top: 1px solid var(--line); }
.section--tight  { padding-block: calc(var(--section-y) * .6); }
.section--soft   { background: var(--bg-soft); }
.section--alt    { background: var(--bg-alt); }
.section--carbon { background: var(--carbon); color: var(--on-dark); }

.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.cluster { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* 4. TYPOGRAFIE =========================================================== */

/* Red Hat Display traegt alle grossen Headlines — kraeftig gesetzt, das ist der
   wesentliche Unterschied zur vorigen, zu zurueckhaltenden Fassung. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--ink);
  overflow-wrap: break-word;
}
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

.lead { font-size: var(--fs-lead); line-height: 1.68; color: var(--ink-muted); max-width: 54ch; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.accent { color: var(--wine); }
.soft  { color: var(--ink-faint); }

/* Label: gesperrt, Grossbuchstaben. Kein Monospace. */
.meta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}
.meta--ink { color: var(--ink); }

/* Eyebrow in Weinrot — der Akzent, der der Seite Charakter gibt */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--wine);
  flex: none;
}

/* Pillen-Label mit Rahmen */
.pill-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pill-label::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--wine); flex: none; }

.marker { display: block; width: 8px; height: 8px; border-radius: 1px; background: var(--wine); }

.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2.7vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}
.statement--wide { max-width: 26ch; }
.statement--full { max-width: none; }

.section-head { max-width: 56ch; margin-bottom: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); }
.section-head .lead { margin-top: .9rem; }
.section-head--center { text-align: center; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.section-head--center .lead { margin-inline: auto; }

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}

.section--carbon h2, .section--carbon h3 { color: var(--on-dark); }
.section--carbon .lead { color: var(--on-dark-muted); }
.section--carbon .eyebrow { color: var(--sky); }
.section--carbon .eyebrow::before { background: var(--sky); }
.section--carbon .meta { color: var(--on-dark-muted); }

/* Fliesstext */
.prose { max-width: var(--wrap-text); }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.9rem); margin-top: 2.6rem; margin-bottom: .8rem; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.8rem; margin-bottom: .5rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; color: var(--ink-muted); }
.prose ul li { position: relative; padding-left: 1.4rem; margin-bottom: .4rem; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 1px; background: var(--wine); }
.prose a { color: var(--wine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 700; }

/* 5. LOGO ================================================================= */

.logo-block { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.logo:hover { color: var(--wine); }
.logo span { color: var(--wine); }
.logo-tag { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

/* 6. BUTTONS ============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn svg { flex: none; }

.btn--primary { background: var(--wine); color: #fff; }
.btn--primary:hover { background: var(--wine-deep); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--bg-soft); }
.btn--light { background: #fff; color: var(--wine); }
.btn--light:hover { background: var(--wine-tint); }
.btn--outline-light { background: transparent; color: var(--on-wine); border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--sm { padding: .55rem 1.1rem; font-size: var(--fs-xs); }
.btn--lg { padding: .9rem 1.7rem; font-size: var(--fs-body); }

/* Pill mit Pfeilkreis — die Signatur beider Referenzen */
.btn--pill { padding: .4rem .4rem .4rem 1.35rem; gap: .9rem; }
.btn--pill .btn__dot {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-xs);
  flex: none;
  transition: transform var(--t-base) var(--ease);
}
.btn--pill:hover .btn__dot { transform: rotate(45deg); }
.btn--primary .btn__dot, .btn--dark .btn__dot { background: #fff; color: var(--wine); }
.btn--light .btn__dot { background: var(--wine); color: #fff; }
.btn--ghost .btn__dot { background: var(--wine); color: #fff; }
.btn--sm.btn--pill { padding: .3rem .3rem .3rem 1.1rem; gap: .7rem; }
.btn--sm.btn--pill .btn__dot { width: 28px; height: 28px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--line-strong);
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), gap var(--t-base) var(--ease);
}
.link-arrow svg { transition: transform var(--t-base) var(--ease); flex: none; }
.link-arrow:hover { color: var(--wine); border-color: var(--wine); gap: .75rem; }
.link-arrow:hover svg { transform: translateX(2px); }

/* 7. BADGES & ICONS ======================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
}
.badge--status { background: #fff; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.badge--status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #1F9D57; flex: none;
  box-shadow: 0 0 0 0 rgba(31,157,87,.55); animation: pulse 2.6s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(31,157,87,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,87,0); } }
.badge--tag { background: var(--bg-alt); color: var(--ink-muted); }
.badge--sky { background: var(--wine-tint); color: var(--wine); font-weight: 700; }
.badge--on-dark { background: rgba(255,255,255,.12); color: var(--on-wine); border: 1px solid rgba(255,255,255,.24); }
.badge--on-dark .dot { background: #6EE7A0; box-shadow: none; animation: none; }

/* Runde Icon-Badges (Referenz: Novapersona) */
.ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--wine-tint);
  color: var(--wine);
  flex: none;
}
.ico--sm { width: 38px; height: 38px; }
.ico--wine { background: var(--wine); color: #fff; }
.ico--dark { background: rgba(255,255,255,.1); color: var(--sky); }

/* 8. HEADER =============================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), backdrop-filter var(--t-base) var(--ease);
}
/* Erst beim Scrollen legt sich Milchglas unter die Leiste */
.header.is-stuck {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-bottom-color: var(--line);
}
.header.is-scrolled { border-color: var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  position: relative;
  padding: .35rem 0;
  border-radius: 0;
  background: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color var(--t-fast) var(--ease);
}
/* Unterstrich waechst aus der Mitte — kein Kasten, kein Punkt */
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-base) var(--ease);
}
.nav a:hover { color: var(--ink); background: none; }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav > .btn { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: #fff;
}
.nav-toggle span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 9. HERO ================================================================= */

.hero { padding-top: clamp(2.5rem, 1.4rem + 4vw, 5rem); padding-bottom: 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 1rem + 3.4vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}

.hero h1 { font-size: var(--fs-hero); line-height: .98; letter-spacing: -.035em; margin-bottom: 1.4rem; }
.hero h1 .hero__place {
  display: block;
  font-size: .38em;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ink-faint);
  margin-top: .5rem;
}
.hero__lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-muted); max-width: 44ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* Portraitkarte mit Icon-Leiste (Referenz: Novapersona) */
.hero__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(.8rem, .6rem + .6vw, 1.1rem);
  box-shadow: var(--shadow-lg);
}
.hero__photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(168deg, var(--bg-alt) 0%, #E3E8EF 100%);
  aspect-ratio: 4 / 4.2;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.hero__social {
  position: absolute;
  top: clamp(.9rem, 3%, 1.4rem);
  right: clamp(.9rem, 3%, 1.4rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.hero__social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  color: var(--ink);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.hero__social a:hover { background: var(--wine); color: #fff; transform: translateY(-2px); }

.hero__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem .5rem .4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.hero__status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #1F9D57; flex: none;
  box-shadow: 0 0 0 0 rgba(31,157,87,.55); animation: pulse 2.6s infinite;
}

/* Nummerierte Leiste unter dem Hero (Referenz: Folioblox) */
.hero__index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.hero__index li { padding: 1.4rem clamp(1rem, 2vw, 1.8rem) 1.4rem 0; }
.hero__index li + li { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 1.8rem); }
.hero__index .num { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; color: var(--wine); margin-bottom: .45rem; }
.hero__index .txt { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* 10. LAUFBAND ============================================================ */

.marquee { overflow: hidden; background: var(--bg-soft); border-block: 1px solid var(--line); padding-block: 1rem; user-select: none; }
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; gap: clamp(1.4rem, 2.6vw, 2.6rem); padding-right: clamp(1.4rem, 2.6vw, 2.6rem); }
.marquee__group li {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.marquee__group li[data-sep] { color: var(--wine); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 11. KENNZAHLEN ========================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, .6rem + 1.4vw, 1.5rem);
}
.stat {
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  transition: background var(--t-base) var(--ease);
}
.stat:hover { background: var(--wine-tint); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--wine);
  margin-bottom: .4rem;
}
.stat span { display: block; font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5; }

/* 12. BENTO =============================================================== */
/* Grosse Kacheln, eine davon in Weinrot. Vorbild: folioblox. */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.8rem, .5rem + 1vw, 1.25rem); }

.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--bg-soft);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease);
}
.bento__card:hover { transform: translateY(-3px); }

.bento__card--a { grid-column: span 4; }
.bento__card--b { grid-column: span 2; }
.bento__card--c { grid-column: span 2; }
.bento__card--d { grid-column: span 4; }

.bento__card--accent { background: var(--wine); color: var(--on-wine); }
.bento__card--accent h3 { color: var(--on-wine); }
.bento__card--accent p { color: var(--on-wine-muted); }
.bento__card--accent .bento__rule { background: rgba(255,255,255,.4); }
.bento__card--dark { background: var(--carbon); color: var(--on-dark); }
.bento__card--dark h3 { color: var(--on-dark); }
.bento__card--dark p { color: var(--on-dark-muted); }
.bento__card--dark .bento__rule { background: var(--sky); }

/* Grafik oben in der Kachel */
.bento__art {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  pointer-events: none;
}
.bento__art svg { width: 100%; height: 100%; max-height: 190px; }

.bento__rule { width: 100%; height: 2px; background: var(--wine); margin-bottom: 1rem; }
.bento__card h3 { margin-bottom: .45rem; }
.bento__card p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.6; max-width: 46ch; }
.bento__ico { position: absolute; top: clamp(1.2rem, 1rem + 1vw, 1.8rem); left: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); }

/* 13. LEISTUNGSKARTEN ===================================================== */

.svc {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.svc:hover { border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.svc .ico { margin-bottom: 1.3rem; }
.svc__kicker { font-size: var(--fs-xs); font-weight: 600; color: var(--wine); margin-bottom: .35rem; }
.svc h3 { margin-bottom: .55rem; }
.svc p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.62; }
.svc__list { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.svc__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); color: var(--ink-muted); }
.svc__list svg { flex: none; color: var(--wine); margin-top: .22rem; }

/* 14. PROJEKT-RASTER ====================================================== */

.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, .6rem + 1.6vw, 2rem); }

.work-card { display: block; }
.work-card__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-alt);
  margin-bottom: 1.1rem;
}
.work-card__visual img, .work-card__visual svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.work-card:hover .work-card__visual img { transform: scale(1.04); }
.work-card__flag {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: .34rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--wine);
}
.work-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.work-card__meta li { font-size: var(--fs-xs); color: var(--ink-faint); display: flex; align-items: center; gap: .55rem; }
.work-card__meta li + li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.work-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; transition: color var(--t-fast) var(--ease); }
.work-card:hover h3 { color: var(--wine); }
.work-card h3 svg { color: var(--ink-faint); transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.work-card:hover h3 svg { transform: translate(3px, -3px); color: var(--wine); }
.work-card p { font-size: var(--fs-sm); color: var(--ink-muted); }

/* 15. PROZESS ============================================================= */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, .6rem + 1.4vw, 1.5rem); }
.step {
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.step:hover { border-color: var(--wine); transform: translateY(-3px); }
.step__num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--wine);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.step h3 { margin-bottom: .45rem; }
.step p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.62; }

.section--carbon .step { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.section--carbon .step p { color: var(--on-dark-muted); }

/* 16. KARTEN (allgemein, Unterseiten) ===================================== */

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.62; }
.card__num { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--wine); margin-bottom: .9rem; }
.card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--wine-tint); color: var(--wine); margin-bottom: 1.2rem; flex: none; }
.card__list { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.card__list li { position: relative; padding-left: 1.3rem; font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: .4rem; }
.card__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 1px; background: var(--wine); }

.section--carbon .card__list { border-top-color: rgba(255,255,255,.12); }
.section--carbon .card__list li::before { background: var(--sky); }

/* 17. PROJEKT-DETAIL (Unterseiten) ======================================== */

.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 1rem + 3vw, 4rem);
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  border-top: 1px solid var(--line);
}
.project:first-of-type { border-top: 0; padding-top: 0; }
.project:nth-child(even) .project__visual { order: 2; }
.project__visual { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--bg-alt); }
.project__visual img, .project__visual svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.project:hover .project__visual img { transform: scale(1.03); }
.project__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.project h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); letter-spacing: -.028em; line-height: 1.05; margin-bottom: .8rem; }
.project p { color: var(--ink-muted); margin-bottom: .9rem; max-width: 52ch; font-size: var(--fs-sm); line-height: 1.68; }
.project__results { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 2.4vw, 2.2rem); margin: 1.4rem 0; padding: 1.1rem 0; border-block: 1px solid var(--line); }
.project__results div b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.03em; color: var(--wine); }
.project__results div span { font-size: var(--fs-xs); color: var(--ink-faint); }

/* 18. STIMMEN ============================================================= */

.quote { display: flex; flex-direction: column; padding: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.quote__mark { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: .6; color: var(--wine); opacity: .3; margin-bottom: 1rem; }
.quote blockquote { font-size: var(--fs-body); line-height: 1.68; color: var(--ink-soft); margin-bottom: 1.3rem; flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: .75rem; }
.quote__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--wine-tint); color: var(--wine); font-weight: 700; font-size: var(--fs-xs); flex: none; }
.quote cite { font-style: normal; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); display: block; }
.quote figcaption span { font-size: var(--fs-xs); color: var(--ink-faint); }

/* 19. FAQ ================================================================= */

.faq { max-width: var(--wrap-text); margin-inline: auto; display: grid; gap: .7rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color var(--t-base) var(--ease);
}
.faq details[open] { border-color: var(--wine); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 1.35rem;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--wine); }
.faq__sign { position: relative; width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--bg-soft); flex: none; }
.faq__sign::before, .faq__sign::after { content: ''; position: absolute; background: var(--wine); transition: transform var(--t-base) var(--ease); }
.faq__sign::before { left: 7px; top: 12px; width: 12px; height: 2px; }
.faq__sign::after  { left: 12px; top: 7px; width: 2px; height: 12px; }
.faq details[open] .faq__sign::after { transform: rotate(90deg); }
.faq__answer { padding: 0 1.35rem 1.3rem; color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.72; max-width: 62ch; }
.faq__answer p + p { margin-top: .7rem; }

/* 20. CTA-BAND ============================================================ */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  padding: clamp(2.6rem, 1.8rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  text-align: center;
  background: var(--wine);
}
.cta-band__ghost {
  position: absolute;
  inset: auto 0 -.3em 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(6rem, 17vw, 14rem);
  line-height: .8;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.07);
  pointer-events: none;
  user-select: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--on-wine); margin-bottom: .9rem; }
.cta-band p { color: var(--on-wine-muted); font-size: var(--fs-lead); max-width: 48ch; margin: 0 auto 1.9rem; }
.cta-band .cluster { justify-content: center; }
.cta-band .badge { margin-bottom: 1.2rem; }

/* 21. FORMULAR ============================================================ */

.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.field label .req { color: var(--wine); }
.field input, .field textarea, .field select {
  padding: .8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(120,2,14,.08); }
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-faint); }

.check { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-sm); color: var(--ink-muted); }
.check input { width: 18px; height: 18px; margin-top: .2rem; flex: none; accent-color: var(--wine); }

.contact-aside { display: grid; gap: .7rem; align-content: start; }
.contact-tile { display: flex; gap: .9rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t-base) var(--ease); }
.contact-tile:hover { border-color: var(--wine); }
.contact-tile__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--wine-tint); color: var(--wine); flex: none; }
.contact-tile b { display: block; font-size: var(--fs-sm); color: var(--ink); margin-bottom: .15rem; font-weight: 700; }
.contact-tile span, .contact-tile a { font-size: var(--fs-sm); color: var(--ink-muted); }
.contact-tile a:hover { color: var(--wine); }

/* 22. ÜBER MICH =========================================================== */

.about-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1.8rem, 1.2rem + 3vw, 4rem); align-items: start; }
.about-portrait { position: sticky; top: calc(var(--header-h) + 2rem); border-radius: var(--r-md); overflow: hidden; background: var(--bg-alt); aspect-ratio: 4 / 5; }
.about-portrait img, .about-portrait svg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.timeline { display: grid; gap: .7rem; }
.timeline li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: clamp(.8rem, 2vw, 1.6rem); padding: 1.2rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.timeline time { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wine); padding-top: .2rem; }
.timeline h3 { margin-bottom: .3rem; }
.timeline p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.62; }

.pill-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.pill-list li {
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-muted);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pill-list li:hover { border-color: var(--wine); color: var(--wine); }

/* 23. SEITENKOPF ========================================================== */

.page-head { padding-top: clamp(2.4rem, 1.7rem + 2.6vw, 4rem); padding-bottom: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: 1rem; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--fs-xs); color: var(--ink-faint); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--wine); }
.breadcrumb li { display: flex; align-items: center; gap: .45rem; }
.breadcrumb li + li::before { content: '/'; color: var(--line-strong); }

/* 24. FOOTER ============================================================== */

.footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding-top: clamp(2.8rem, 2rem + 3vw, 4.5rem); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); padding-bottom: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem); }
.footer__intro p { color: var(--ink-muted); font-size: var(--fs-sm); max-width: 32ch; margin: .9rem 0 1.3rem; }
.footer h4 { font-size: var(--fs-label); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; }
.footer__links li { margin-bottom: .5rem; }
.footer__links a { font-size: var(--fs-sm); color: var(--ink-soft); transition: color var(--t-fast) var(--ease); }
.footer__links a:hover { color: var(--wine); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-faint); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__bottom a:hover { color: var(--wine); }

/* 25. MOTION ============================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .68s var(--ease-out), transform .68s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* 26. RESPONSIVE ========================================================== */

@media (max-width: 1080px) {
  .bento__card--a, .bento__card--d { grid-column: span 6; }
  .bento__card--b, .bento__card--c { grid-column: span 3; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__intro { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  :root { --header-h: 56px; }

  .nav-toggle { display: flex; }
  .header__cta { display: none; }
  .logo-tag { display: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .9rem var(--gutter) 1.6rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: .95rem .3rem; font-size: .82rem; letter-spacing: .16em; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a::after { display: none; }
  /* .nav a wuerde sonst Farbe und Radius des Buttons ueberschreiben */
  .nav > .btn { display: inline-flex; margin-top: 1rem; border-bottom: 0; border-radius: var(--r-pill); color: #fff; justify-content: space-between; }
  .nav > .btn:hover { color: #fff; }

  .hero__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero__card { max-width: 440px; margin-inline: auto; }
  .hero__index { grid-template-columns: 1fr 1fr; }
  .hero__index li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero__index li:nth-child(n+3) { border-top: 1px solid var(--line); }

  .work-grid { grid-template-columns: 1fr; }
  .project { grid-template-columns: 1fr; }
  .project:nth-child(even) .project__visual { order: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { position: static; max-width: 400px; }
  .timeline li { grid-template-columns: 1fr; gap: .4rem; }
}

@media (max-width: 760px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
  .bento__card--a, .bento__card--b, .bento__card--c, .bento__card--d { grid-column: span 6; }
  .bento__card { min-height: 260px; }
  .steps { grid-template-columns: 1fr; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .hero__index { grid-template-columns: 1fr; }
  .hero__index li { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line); }
  .hero__index li:first-child { border-top: 0; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .project__results { gap: 1.1rem 1.6rem; }
}

/* 27. PRINT =============================================================== */

@media print {
  .header, .footer, .marquee, .cta-band, .nav-toggle, .hero__social { display: none !important; }
  body { background: #fff; color: #000; }
  .section--carbon, .bento__card--accent, .bento__card--dark { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* 28. ZIELGRUPPEN ========================================================= */
/* Drei Wege in die Zusammenarbeit. Loest die zu enge B2B-Fokussierung ab
   und macht Agenturen als Auftraggeber sichtbar. */

.aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, .5rem + 1vw, 1.25rem); }

.aud__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.aud__card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.aud__card .ico { margin-bottom: 1.3rem; }
.aud__num { position: absolute; top: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); right: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; color: var(--ink-faint); }
.aud__card h3 { margin-bottom: .5rem; }
.aud__card > p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.62; }
.aud__list { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.aud__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); color: var(--ink-muted); }
.aud__list svg { flex: none; color: var(--wine); margin-top: .22rem; }
.aud__foot { margin-top: auto; padding-top: 1.4rem; }

/* Weinrote und dunkle Variante — Farbe traegt den Rhythmus */
.aud__card--accent { background: var(--wine); border-color: var(--wine); color: var(--on-wine); }
.aud__card--accent h3 { color: var(--on-wine); }
.aud__card--accent > p, .aud__card--accent .aud__list li { color: var(--on-wine-muted); }
.aud__card--accent .aud__num { color: rgba(255,255,255,.5); }
.aud__card--accent .aud__list { border-top-color: rgba(255,255,255,.22); }
.aud__card--accent .aud__list svg { color: var(--sky); }
.aud__card--accent .ico { background: rgba(255,255,255,.16); color: #fff; }

.aud__card--dark { background: var(--carbon); border-color: var(--carbon); color: var(--on-dark); }
.aud__card--dark h3 { color: var(--on-dark); }
.aud__card--dark > p, .aud__card--dark .aud__list li { color: var(--on-dark-muted); }
.aud__card--dark .aud__num { color: rgba(255,255,255,.4); }
.aud__card--dark .aud__list { border-top-color: rgba(255,255,255,.14); }
.aud__card--dark .aud__list svg { color: var(--sky); }
.aud__card--dark .ico { background: rgba(255,255,255,.1); color: var(--sky); }

/* 29. USP-BAND ============================================================ */
/* Dunkler Vollflaechen-Abschnitt — bringt Kontrast in die sonst helle Seite. */

.band { background: var(--carbon); color: var(--on-dark); padding-block: var(--section-y); }
.band h2 { color: var(--on-dark); }
.band .lead { color: var(--on-dark-muted); }
.band .eyebrow { color: var(--sky); }
.band .eyebrow::before { background: var(--sky); }

.band__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); align-items: center; }

.usp { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.usp li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.15rem 0; border-bottom: 1px solid rgba(255,255,255,.14); align-items: start; }
.usp .ico { background: rgba(255,255,255,.08); color: var(--sky); }
.usp h3 { color: var(--on-dark); font-size: var(--fs-h4); margin-bottom: .25rem; }
.usp p { font-size: var(--fs-sm); color: var(--on-dark-muted); line-height: 1.6; }

/* 30. BREITE PROJEKTKARTE ================================================= */

.work-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.4rem, 1rem + 2vw, 2.8rem); align-items: center; }
.work-card--wide .work-card__visual { margin-bottom: 0; aspect-ratio: 16 / 10; }
.work-card--wide h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); letter-spacing: -.028em; line-height: 1.05; }
.work-card--wide p { font-size: var(--fs-body); }
.work-card--wide .work-card__body > p { margin-bottom: 1.4rem; }

@media (max-width: 920px) {
  .aud { grid-template-columns: 1fr; }
  .band__grid { grid-template-columns: 1fr; }
  .work-card--wide { grid-template-columns: 1fr; }
}

/* 31. GROSSWORT =========================================================== */
/* Die Signatur der Crafto-Referenz: ein riesiges Wort, das ueber die volle
   Breite laeuft und an den Raendern angeschnitten wird.
   Weinrot ist dunkel — deshalb hinter Text nur als blasse Tönung,
   freistehend dagegen in voller Farbe. */

.bigword {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 27vw, 23rem);
  line-height: .76;
  letter-spacing: -.045em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.bigword--solid { color: var(--wine); }
.bigword--sky   { color: var(--sky); }
.bigword--ghost { color: rgba(120, 2, 14, .085); }

/* Freistehendes Grosswort, das links angeschnitten wird */
.bigword-band { overflow: hidden; line-height: 0; }
.bigword-band .bigword { display: block; margin-left: -.06em; }
.bigword-band--right .bigword { text-align: right; margin-left: 0; margin-right: -.06em; }

/* 32. HERO (Bazil-Prinzip: Portrait mittig in der Typografie) ============= */

.hero-b {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(2rem, 1.4rem + 2vw, 3.5rem);
  text-align: center;
}

/* Kleine Zeile ueber der Headline */
.hero-b__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: clamp(.95rem, .85rem + .35vw, 1.2rem);
  color: var(--ink-muted);
  margin-bottom: clamp(.8rem, 1.5vw, 1.6rem);
}
.hero-b__mark {
  width: 9px; height: 9px;
  background: var(--wine);
  border-radius: 2px;
  flex: none;
}

/* Buehne: Typo und Foto liegen uebereinander */
.hero-b__stage { position: relative; }

.hero-b__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
.hero-b__line {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 14.5vw, 13rem);
  line-height: .88;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--ink);
}
/* Zweite Zeile nur als Kontur — in Weinrot, damit der Akzent traegt */
.hero-b__line--outline {
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, .16vw, 2.5px) var(--wine);
  paint-order: stroke fill;
}

/* Das Portrait sitzt mittig und verdeckt die Wortmitte */
/* Freigestelltes Portrait: steht auf der Grundlinie und ragt in die Typo.
   Das ist der Zustand, sobald nina-freigestellt.png vorliegt. */
.hero-b__photo {
  position: absolute;
  left: 50%;
  bottom: -1%;
  transform: translateX(-50%);
  width: clamp(190px, 27vw, 430px);
  z-index: 2;
  line-height: 0;
}
.hero-b__photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Rueckfall: Foto mit Hintergrund — dann als sauber gerahmter Ausschnitt */
.hero-b__photo.is-framed {
  bottom: auto;
  top: 2%;
  width: clamp(120px, 14.5vw, 210px);
  aspect-ratio: 2 / 2.75;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
}
.hero-b__photo.is-framed img {
  height: 100%;
  object-fit: cover;
  object-position: 56% 14%;
  transform: scale(1.28);
  transform-origin: 56% 22%;
}

.hero-b__sub {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: clamp(1.5rem, 2.5vw, 2.6rem) auto 0;
}
.hero-b__sub strong { color: var(--ink); font-weight: 600; }

.hero-b__cta { justify-content: center; margin-top: clamp(1.6rem, 2.5vw, 2.4rem); }
.hero-b .metarow { margin-top: clamp(2rem, 3vw, 3rem); }

/* Ab hier wird das Foto zu gross fuer die Wortbreite */
@media (max-width: 900px) {
  .hero-b__photo { width: clamp(170px, 30vw, 250px); }
  .hero-b__photo.is-framed { width: clamp(120px, 20vw, 175px); }
}

/* Schmale Schirme: Foto unter die Typo statt hinein */
@media (max-width: 620px) {
  .hero-b__stage { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
  .hero-b__photo {
    position: static;
    transform: none;
    width: min(66vw, 280px);
  }
  .hero-b__photo.is-framed {
    width: min(62vw, 250px);
    aspect-ratio: 4 / 4.6;
  }
  .hero-b__photo.is-framed img { object-position: 56% 20%; }
  .hero-b__line { font-size: clamp(2.6rem, 15vw, 4.5rem); }
}

/* Meta-Zeile mit Icons und Verbindungslinien */
.metarow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}
.hero-c__inner .metarow { margin-top: 2rem; }
.metarow li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.metarow li svg { color: var(--wine); flex: none; }
.metarow__line { flex: 1 1 40px; max-width: 110px; height: 1px; background: var(--line-strong); }

/* 33. BILD + HEADLINE ===================================================== */

.split-feature { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(1.8rem, 1rem + 3.5vw, 4.5rem); align-items: center; }
/* Hochformat 2:3 — das Foto wird dadurch kaum beschnitten. */
.split-feature__media { border-radius: var(--r-md); overflow: hidden; background: var(--bg-alt); aspect-ratio: 4 / 5.2; }
.split-feature__media img, .split-feature__media svg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.split-feature h2 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem); line-height: 1.02; margin-bottom: 1.3rem; }
.split-feature p { color: var(--ink-muted); max-width: 52ch; }
.split-feature p + p { margin-top: 1rem; }

/* Hervorgehobenes Wort im Fliesstext */
.mark { background: var(--wine-tint); color: var(--wine); font-weight: 600; padding: 0 .22em; border-radius: 2px; }
.uline { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--wine); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* 34. LEISTUNGSSPALTEN MIT GEISTERZIFFER ================================== */

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 2.6rem); }
.col { position: relative; padding-top: clamp(3rem, 2.2rem + 2.4vw, 4.2rem); }
.col__n {
  position: absolute;
  top: 0; left: -.06em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 2.4rem + 3.2vw, 5.2rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--bg-alt);
  user-select: none;
}
.col h3 { margin-bottom: .55rem; position: relative; }
.col p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.65; }
.col__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }
.col__tags li { font-size: var(--fs-xs); color: var(--ink-faint); padding: .2rem .6rem; border: 1px solid var(--line); border-radius: var(--r-xs); }

/* 35. LINK MIT AKZENTBLOCK ================================================ */

.dot-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-left: 1.35rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--t-base) var(--ease);
}
.dot-link::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: var(--r-xs);
  background: var(--wine-tint);
  transition: background var(--t-base) var(--ease), width var(--t-base) var(--ease);
  z-index: -1;
}
.dot-link:hover { color: var(--wine); }
.dot-link:hover::before { background: var(--sky); width: 34px; }
.dot-link svg { transition: transform var(--t-base) var(--ease); }
.dot-link:hover svg { transform: translateX(3px); }

/* 36. VERSETZTES PROJEKTRASTER ============================================ */

.work-stagger { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, .8rem + 1.6vw, 2.2rem); align-items: start; }
.work-stagger > :nth-child(3n+2) { margin-top: clamp(1.5rem, 3vw, 3.5rem); }
.work-stagger > :nth-child(3n+3) { margin-top: clamp(.6rem, 1.4vw, 1.6rem); }

.tile { display: block; }

.tile__visual {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4 / 3.2;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.tile:hover .tile__visual { border-color: var(--wine); transform: translateY(-4px); }

/* Nur das Kachelbild selbst fuellt die Flaeche — nicht die Icons darin */
.tile__visual > img, .tile__visual > svg {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform var(--t-slow) var(--ease);
}
.tile:hover .tile__visual img { transform: scale(1.045); }

/* Kleines Statusfaehnchen, dunkel statt weiss — liegt auf jedem Bild ruhig */
.tile__flag {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: var(--r-xs);
  background: rgba(20, 21, 26, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
.tile__flag svg { opacity: .85; }

/* Schleier, der beim Zeigen aufzieht */
.tile__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(120, 2, 14, .82) 0%, rgba(120, 2, 14, .28) 48%, transparent 78%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.tile:hover .tile__veil { opacity: 1; }

/* Aufforderung mit Pfeil — faehrt von unten ein */
.tile__cta {
  position: absolute;
  left: .9rem; right: .9rem; bottom: .9rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .6rem .75rem .6rem .9rem;
  border-radius: var(--r-xs);
  background: #fff;
  color: var(--wine);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.005em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.tile:hover .tile__cta { opacity: 1; transform: translateY(0); }
.tile__cta svg { flex: none; width: 15px; height: 15px; }

.tile__cap { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.tile__cap b {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.tile:hover .tile__cap b { color: var(--wine); }
.tile__kat { font-size: var(--fs-sm); color: var(--ink-faint); }
.tile__kat::before { content: '— '; }

/* Ohne Zeigegeraet bleibt die Aufforderung sichtbar */
@media (hover: none) {
  .tile__cta { opacity: 1; transform: none; }
  .tile__veil { opacity: .9; }
}

/* 37. DUNKLES BAND (Crafto-Variante) ====================================== */

.band__big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 2rem + 5vw, 6rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--on-dark);
}
.band__quote { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); line-height: 1.45; color: var(--on-dark); letter-spacing: -.015em; }
.band .mark { background: rgba(207,232,255,.18); color: var(--sky); }
.band .uline { color: var(--sky); text-decoration-color: var(--sky); }
.band .dot-link { color: var(--on-dark); }
.band .dot-link::before { background: rgba(255,255,255,.12); }
.band .dot-link:hover { color: var(--sky); }

@media (max-width: 1080px) {
  .cols { grid-template-columns: 1fr 1fr; }
  .work-stagger { grid-template-columns: 1fr 1fr; }
  .work-stagger > :nth-child(n) { margin-top: 0; }
  .work-stagger > :nth-child(even) { margin-top: clamp(1.2rem, 3vw, 2.5rem); }
}

@media (max-width: 760px) {
  .split-feature { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .work-stagger { grid-template-columns: 1fr; }
  .work-stagger > :nth-child(n) { margin-top: 0; }
  .metarow__line { display: none; }
  .metarow { gap: .8rem 1.2rem; }
}

/* 38. PROJEKT-SEITE ====================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--fs-sm);
  margin-bottom: clamp(2rem, 3vw, 3.5rem);
}
.breadcrumb a { color: var(--ink-muted); transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb a::after { content: ' /'; margin: 0 .4rem; }
.breadcrumb span { color: var(--ink); font-weight: 600; }

.project-hero { padding-block: clamp(1rem, 2rem + 2vw, 3rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.project-hero__tag {
  display: inline-block;
  padding: .35rem .85rem;
  background: var(--wine-tint);
  color: var(--wine);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  margin-bottom: 1.2rem;
}
.project-hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 4.5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  margin-bottom: 1.2rem;
}
.project-hero__lead {
  font-size: var(--fs-lead);
  color: var(--ink-muted);
  max-width: 58ch;
  margin-bottom: 2rem;
}
.project-hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  margin-block: 2.5rem 3.5rem;
}
.project-hero__meta dl { display: contents; }
.project-hero__meta dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .35rem;
}
.project-hero__meta dd { font-size: var(--fs-h4); font-weight: 700; margin: 0; }

.project-hero__image {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
  margin-top: clamp(2.5rem, 3vw, 4rem);
}
.project-hero__image img { width: 100%; height: auto; display: block; }

/* Element-Galerie */
.elements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  margin-top: clamp(2rem, 3vw, 3.5rem);
}
.element {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
  margin: 0;
}
.element img { width: 100%; height: auto; display: block; }
.element figcaption {
  padding: 1rem 1.2rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
}

/* Farbpaletten-Swatches */
.colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.color-swatch { }
.color-swatch__box {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  margin-bottom: .8rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform var(--t-fast) var(--ease);
}
.color-swatch:hover .color-swatch__box { transform: scale(1.04); }
.color-swatch p { margin: 0; font-size: var(--fs-sm); font-weight: 600; }

/* Typografie-Beispiele */
.typo-samples { }
.typo-samples div { }
.typo-samples p { margin: 0; }

/* Tags und Keywords */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tags li {
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  transition: all var(--t-fast) var(--ease);
}
.tags li:hover { border-color: var(--wine); color: var(--wine); background: var(--wine-tint); }

/* Responsive */
@media (max-width: 760px) {
  .project-hero__meta { grid-template-columns: repeat(2, 1fr); }
  .elements-grid { grid-template-columns: 1fr; }
}

/* 39. CASE STUDY: Zusaetze ================================================ */

/* Ehrlicher Hinweis, dass es sich um Konzeptarbeit handelt */
.case-note {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--wine);
  border-radius: var(--r-xs);
  background: var(--bg-alt);
  margin-top: 2rem;
}
.case-note svg { color: var(--wine); flex: none; margin-top: .15rem; }
.case-note p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-muted); }
.case-note strong { color: var(--ink); font-weight: 600; }

/* Technische Entscheidungen */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.4rem, 2.2vw, 2.2rem); margin-top: clamp(2rem, 3vw, 3rem); }
.specs li { display: flex; gap: .85rem; align-items: flex-start; }
.specs svg { color: var(--wine); flex: none; margin-top: .2rem; }
.specs h3 { font-size: var(--fs-h4); margin-bottom: .3rem; }
.specs p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.6; margin: 0; }

/* Farbfeld mit Rolle */
.color-swatch__hex { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; }
.color-swatch__role { font-size: var(--fs-xs); color: var(--ink-muted); }

/* Schriftmuster */
.font-card { padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.font-card + .font-card { margin-top: 1rem; }
.font-card__name { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .3rem; }
.font-card__use { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wine); margin-bottom: .7rem; }
.font-card p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.6; margin: 0; }

/* Zwei Spalten fuer Farbe + Typo */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 3.5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; } }

/* Metablock: je Paar ein Block, Label ueber dem Wert */
.project-hero__meta dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1.2rem, 2vw, 2rem);
}
.project-hero__meta dl > div { display: block; }

.project-hero__head { max-width: 72ch; }

/* Leiser Hinweis statt Kasten — die Information bleibt, draengt sich aber nicht auf */
.case-hint {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: 1.4rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 68ch;
}
.case-hint svg { flex: none; margin-top: .18rem; opacity: .75; }

/* Icon in der Leistungsspalte — sitzt zwischen Geisterziffer und Titel */
.col__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-xs);
  background: var(--wine-tint);
  color: var(--wine);
  margin-bottom: .9rem;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.col:hover .col__ico { background: var(--wine); color: #fff; }
.tile__flag { white-space: nowrap; }

/* Aufforderung einzeilig halten, auch in schmalen Kacheln */
.tile__cta {
  white-space: nowrap;
  font-size: .82rem;
  padding: .55rem .6rem .55rem .8rem;
}
/* Auch das Faehnchen-Icon darf nicht mitwachsen */
.tile__flag svg { width: 11px; height: 11px; flex: none; }

/* 40. PROJEKT-THUMBNAILS ================================================== */
/* Buehne in der Markenfarbe, darauf eine Collage: grosses Logo links,
   drei gestaffelte Bildschirmausschnitte rechts, die den Rand anschneiden.
   Darunter ein dunkler Infoblock. Markenfarben per --stage / --stage-ink. */

.pcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: clamp(1.2rem, 1.8vw, 2rem);
  margin-top: clamp(2rem, 3vw, 3rem);
}

.pcard {
  border-radius: var(--r-md);
  overflow: hidden;
  background: #17181C;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pcard:hover {
  border-color: var(--wine);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

/* ---- Buehne ---- */
.pcard__stage {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9.4;
  background: var(--stage, var(--carbon));
  overflow: hidden;
  isolation: isolate;
}
/* Feines Raster wie in der Referenz — nur ein Hauch */
.pcard__stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 22% 50%, #000 0%, transparent 62%);
  -webkit-mask-image: radial-gradient(ellipse at 22% 50%, #000 0%, transparent 62%);
  pointer-events: none;
}
/* Weicher Lichtfleck hinter dem Logo */
.pcard__stage::after {
  content: '';
  position: absolute;
  left: -10%; top: -20%;
  width: 62%; height: 140%;
  background: radial-gradient(ellipse at center, var(--stage-glow, rgba(255,255,255,.10)) 0%, transparent 60%);
  pointer-events: none;
}

.pcard__brand {
  position: absolute;
  left: clamp(1.4rem, 2.8vw, 2.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  max-width: 42%;
}
.pcard__logo { width: clamp(44px, 4.6vw, 64px); height: auto; flex: none; }
.pcard__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  letter-spacing: -.03em;
  line-height: .95;
  color: var(--stage-ink, #fff);
}
.pcard__claim {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stage-ink, #fff);
  opacity: .62;
}

/* ---- Collage rechts ---- */
.pcard__shots { position: absolute; inset: 0; z-index: 3; }
.pcard__shot {
  position: absolute;
  border-radius: 5px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255,255,255,.06);
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}
/* hinten: gross, rechts oben angeschnitten */
.pcard__shot--back  { top: -6%;  right: -12%; width: 60%; }
/* mitte: nach links unten versetzt */
.pcard__shot--mid   { top: 24%;  right: 22%;  width: 46%; }
/* vorne: klein, rechts unten */
.pcard__shot--front { bottom: -10%; right: 4%; width: 44%; }

.pcard:hover .pcard__shot--back  { transform: translate(-8px, -6px); }
.pcard:hover .pcard__shot--mid   { transform: translate(-4px,  2px); }
.pcard:hover .pcard__shot--front { transform: translate( 4px,  8px); }

/* Nur zwei Shots: mitte entfaellt, front rueckt hoch */
.pcard--two .pcard__shot--front { bottom: auto; top: 34%; right: 8%; width: 50%; }
/* Nur ein Shot: als grosses Bild rechts */
.pcard--one .pcard__shot--back { top: 12%; right: -6%; width: 62%; }

/* ---- Infoblock ---- */
.pcard__body { padding: clamp(1.1rem, 1.6vw, 1.5rem) clamp(1.2rem, 1.8vw, 1.6rem) clamp(1.3rem, 1.8vw, 1.7rem); }

.pcard__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.pcard__tags li {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .34rem .66rem;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .07);
  font-size: .78rem;
  font-weight: 600;
  color: var(--on-dark);
  white-space: nowrap;
}
.pcard__tags svg { flex: none; width: 13px; height: 13px; opacity: .8; }

.pcard__name {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--on-dark);
  margin-bottom: .55rem;
}
.pcard__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  background: var(--stage, var(--carbon));
  flex: none;
  overflow: hidden;
}
.pcard__mark img { width: 68%; height: auto; }
.pcard__mark--text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: -.02em;
  color: var(--stage-ink, #fff);
}

.pcard__body p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--on-dark-muted);
  margin: 0 0 1.1rem;
}

.pcard__go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--on-dark);
  transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.pcard__go svg { flex: none; width: 17px; height: 17px; }
.pcard:hover .pcard__go { color: var(--sky); gap: .75rem; }

@media (max-width: 960px) {
  .pcards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pcard__stage { aspect-ratio: 16 / 11; }
  .pcard__brand { max-width: 46%; }
  .pcard__shot--back  { width: 64%; right: -16%; }
  .pcard__shot--mid   { width: 50%; right: 18%; }
  .pcard__shot--front { width: 48%; }
}

/* 41. BEREINIGUNG ========================================================== */
/* Ergebnis der Sichtpruefung: weniger, ruhiger, keine Zufallsanschnitte. */

/* 1. Hero: Portrait schmaler, damit die Headline lesbar bleibt; weicher Auslauf unten */
.hero-b__photo {
  width: clamp(160px, 19vw, 275px);
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
}
.hero-b__kicker { margin-bottom: clamp(1.2rem, 2.2vw, 2.2rem); }
@media (max-width: 900px) { .hero-b__photo { width: clamp(140px, 24vw, 200px); } }
@media (max-width: 620px) {
  .hero-b__photo { width: min(58vw, 240px); -webkit-mask-image: none; mask-image: none; }
}

/* 2. Riesenwoerter: ganz sichtbar, zentriert, kein Anschnitt */
.bigword-band { padding-inline: var(--gutter, 1.25rem); }
.bigword-band .bigword,
.bigword-band--right .bigword {
  display: block;
  text-align: center;
  margin: 0 auto;
  font-size: clamp(3.4rem, 14.6vw, 13.2rem);
  line-height: .82;
}

/* 3. Leistungsspalten ohne Geisterziffern */
.col { padding-top: 0; }
.col__n, .col__tags { display: none; }

/* 4. Projektraster: erste Karte breit, die beiden anderen darunter */
.pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard--wide { grid-column: 1 / -1; }
.pcard--wide .pcard__stage { aspect-ratio: 21 / 8.4; }
.pcard--wide .pcard__brand { max-width: 30%; }
.pcard--wide .pcard__shot--back  { top: -8%;  right: -6%; width: 42%; }
.pcard--wide .pcard__shot--mid   { top: 18%;  right: 30%; width: 32%; }
.pcard--wide .pcard__shot--front { bottom: -12%; right: 10%; width: 30%; }
@media (max-width: 960px) {
  .pcards { grid-template-columns: 1fr; }
  .pcard--wide .pcard__stage { aspect-ratio: 16 / 9.4; }
  .pcard--wide .pcard__brand { max-width: 42%; }
  .pcard--wide .pcard__shot--back  { top: -6%; right: -12%; width: 60%; }
  .pcard--wide .pcard__shot--mid   { top: 24%; right: 22%;  width: 46%; }
  .pcard--wide .pcard__shot--front { bottom: -10%; right: 4%; width: 44%; }
}

/* 5. Dunkles Band: Headline passt in die Spalte */
.band__big { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1.02; }

/* 6. Buttons: Pfeil ohne Kaestchen */
.btn__dot {
  width: auto; height: auto;
  padding: 0; margin-left: .45rem;
  background: transparent; border: 0; box-shadow: none;
  color: inherit;
  transform: none;
}
.btn:hover .btn__dot { transform: translateX(3px); }

/* Leistungs-Tafel: ruhige Flaeche mit grossem Icon statt Projekt-Platzhalter */
.svc-visual {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(120, 2, 14, .07) 0%, transparent 55%),
    var(--bg-alt);
}
.project__visual .svc-visual svg { width: 21%; height: auto; color: var(--wine); }
.svc-visual__nr {
  position: absolute; left: 1.4rem; top: 1.2rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .92rem; letter-spacing: .12em; color: var(--ink-faint);
}

/* Pfeil ohne Kaestchen — mit derselben Spezifitaet wie die Varianten oben */
.btn--pill .btn__dot,
.btn--primary .btn__dot, .btn--dark .btn__dot,
.btn--light .btn__dot, .btn--ghost .btn__dot,
.btn--sm.btn--pill .btn__dot {
  width: auto; height: auto;
  padding: 0; margin-left: .45rem;
  background: transparent; border: 0; box-shadow: none;
  color: inherit; border-radius: 0;
}
.btn--pill:hover .btn__dot { transform: translateX(3px); }

/* 42. HERO: EIN VIEWPORT ================================================== */
/* Zwei Zeilen fast ueber die volle Breite, Portrait gross und unten vom
   Rand angeschnitten, Buttons liegen darauf. Alles in einer Bildschirmhoehe. */

.hero-b {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 74px);
  padding-block: clamp(1.2rem, 2vh, 2rem) 0;
  text-align: center;
  display: flex;
}
.hero-b__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
.hero-b__kicker { margin-bottom: clamp(.6rem, 1.6vh, 1.4rem); }

.hero-b__stage { flex: 1; display: flex; align-items: center; justify-content: center; }
.hero-b__title { width: 100%; }
.hero-b__line {
  font-size: clamp(3.2rem, 16vw, 15.2rem);
  line-height: .84;
  letter-spacing: -.05em;
}
.hero-b__line--outline { -webkit-text-stroke-width: clamp(1.5px, .14vw, 2.4px); }

/* Fusszeile im Hero: links Kernsatz, rechts Status — bleibt unter den Buttons frei */
.hero-b__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding-block: 0 clamp(1.2rem, 3vh, 2rem);
  min-height: 3.4rem;
}
.hero-b__note { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); max-width: 26ch; text-align: left; }
.hero-b__note--right { text-align: right; }

/* Portrait: gross, mittig, steht auf der Unterkante des Heros */
.hero-b__photo {
  position: absolute;
  left: 50%;
  bottom: 0;
  top: auto;
  transform: translateX(-50%);
  width: auto;
  height: clamp(300px, 62vh, 620px);
  z-index: 2;
  -webkit-mask-image: none;
          mask-image: none;
}
.hero-b__photo img { width: auto; height: 100%; display: block; }

/* Buttons liegen unten auf dem Portrait */
.hero-b__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: .7rem;
  margin: 0;
  white-space: nowrap;
}
.hero-b__cta .btn--ghost { background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Ausgleich fuer die Header-Hoehe auf grossen Bildschirmen */
@media (min-height: 1000px) { .hero-b { min-height: calc(100svh - 74px); } }

/* Schmale Bildschirme: gestapelt, Portrait unter der Typo, kein Ein-Viewport-Zwang */
@media (max-width: 760px) {
  .hero-b { min-height: 0; display: block; padding-bottom: 1.5rem; }
  .hero-b__stage { display: block; margin-block: .5rem 1.2rem; }
  .hero-b__line { font-size: clamp(2.8rem, 15.5vw, 4.6rem); }
  .hero-b__photo { position: static; transform: none; height: auto; width: min(64vw, 260px); margin: 0 auto .4rem; }
  .hero-b__photo img { width: 100%; height: auto; }
  .hero-b__cta { position: static; transform: none; justify-content: center; flex-wrap: wrap; white-space: normal; margin-top: 1.2rem; }
  .hero-b__foot { flex-direction: column; align-items: center; gap: .4rem; padding-bottom: 0; }
  .hero-b__note, .hero-b__note--right { text-align: center; max-width: none; }
}

/* Intro ohne Foto: eine ruhige Textspalte */
.split-feature--text { grid-template-columns: 1fr; }
.split-feature--text > div { max-width: 62ch; }

/* Feinjustierung nach Messung: Header ist 77 px; Kopf beginnt in Zeile 2 */
.hero-b { min-height: calc(100svh - 77px); }
.hero-b__photo { height: clamp(300px, 52vh, 560px); }
.hero-b__note--right { max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .hero-b { min-height: 0; } .hero-b__note--right { white-space: normal; } }

/* Mobil: Fotobox nimmt nur die Bildhoehe; Fussnoten entfallen (Inhalte stehen im Intro und Footer) */
@media (max-width: 760px) {
  .hero-b__photo { height: auto; }
  .hero-b__foot { display: none; }
  .hero-b__stage { margin-bottom: 1.6rem; }
}

/* 43. CRAFTO 1:1 =========================================================== */
/* Startseite nach crafto.themezaa.com/web-agency — ohne Hintergrundlinien,
   Lime wird Pale Sky (traegt schwarzen Text), Weinrot fuer Buttons und Akzente. */

.cf-giant {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 21vw, 19.5rem);
  line-height: .8;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--sky);
  user-select: none;
  pointer-events: none;
  display: block;
}
.cf-giant--ink { color: var(--ink); }
.cf-giantband { overflow: hidden; line-height: 0; }
.cf-giantband .cf-giant { margin-left: -.05em; }
.cf-giantband--right { text-align: right; }
.cf-giantband--right .cf-giant { margin-left: 0; margin-right: -.05em; }

.cf-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ink);
}
.cf-ul { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--wine); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cf-ul--sky { color: inherit; text-decoration-color: var(--sky); }
.cf-mark { background: var(--sky); padding: 0 .2em; border-radius: 2px; }

/* Punkt-Link: kleiner Sky-Block hinter dem Anfang, Text in Versalien */
.cf-dotlink {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding-left: 1.2rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.cf-dotlink::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: var(--r-xs); background: var(--sky); z-index: -1; transition: width var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.cf-dotlink:hover::before { width: 32px; background: var(--wine); }
.cf-dotlink:hover { color: var(--wine); }
.cf-dotlink--dark { color: var(--on-dark); }

/* ---- Hero ---- */
.cf-hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 77px);
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.cf-hero__giant { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: 0; }
.cf-burst {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(70vw, 720px); aspect-ratio: 1; transform: translate(-50%, -52%);
  background: repeating-conic-gradient(from 0deg, var(--sky) 0deg .5deg, transparent .5deg 3.6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 40%, transparent 70%);
          mask-image: radial-gradient(circle, transparent 18%, #000 40%, transparent 70%);
  opacity: .9;
}
.cf-dot { position: absolute; width: 10px; height: 10px; border-radius: 2px; z-index: 1; }
.cf-dot--1 { left: 12%; top: 34%; background: var(--wine); }
.cf-dot--2 { right: 10%; top: 22%; background: var(--sky); width: 14px; height: 14px; }
.cf-dot--3 { right: 26%; bottom: 30%; background: var(--wine); width: 7px; height: 7px; }
.cf-hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 8vh, 6rem) 0; flex: 1; display: flex; align-items: center; justify-content: center; }
.cf-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6rem);
  line-height: 1.02; letter-spacing: -.04em; color: var(--ink); margin: 0;
}
.cf-meta {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1rem clamp(1rem, 2.4vw, 2rem);
  padding-block: 0 clamp(2rem, 5vh, 3.5rem);
}
.cf-meta li { display: flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cf-meta li svg { color: var(--wine); flex: none; }
.cf-meta__line { flex: 1 1 40px; max-width: 110px; height: 1px; background: var(--line-strong); padding: 0; }

/* ---- Ueber mich ---- */
.cf-about { position: relative; padding-top: clamp(2rem, 4vw, 4rem); }
.cf-about__grid { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.cf-about__photo { aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--bg-alt); }
.cf-about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; filter: grayscale(1) contrast(1.05); }
.cf-about__text { padding-right: clamp(1.25rem, 5vw, 6rem); padding-block: 2rem; }
.cf-about__text p { color: var(--ink-muted); line-height: 1.75; margin: 1.4rem 0 2rem; max-width: 52ch; }
.cf-about .cf-giantband { margin-top: clamp(-1rem, -2vw, -3rem); }

/* ---- Leistungen ---- */
.cf-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3vw, 4rem); padding-block: clamp(3rem, 6vw, 6rem); }
.cf-svc { position: relative; padding-top: clamp(3.2rem, 4vw, 4.6rem); }
.cf-svc__n { position: absolute; top: 0; left: -.05em; font-family: var(--font-display); font-weight: 700; font-size: clamp(3.6rem, 4.6vw, 5.4rem); line-height: .9; letter-spacing: -.04em; color: #E7E9ED; user-select: none; }
.cf-svc h3 { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .6rem; }
.cf-svc p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.7; max-width: 30ch; }

/* ---- Arbeiten ---- */
.cf-work { position: relative; }
.cf-work__link { text-align: right; margin: -3.4rem 0 1.4rem; position: relative; z-index: 1; }
.cf-workgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2vw, 2.2rem); align-items: start; padding-bottom: clamp(3rem, 6vw, 6rem); }
.cf-workgrid > :nth-child(3n+2) { margin-top: clamp(1.5rem, 4vw, 4rem); }
.cf-item { display: block; }
.cf-item__img { display: block; overflow: hidden; background: var(--bg-alt); aspect-ratio: 4 / 3; border-radius: var(--r-xs); }
.cf-item__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform var(--t-slow) var(--ease); }
.cf-item:hover .cf-item__img img { transform: scale(1.04); }
.cf-item__cap { display: flex; gap: .5rem; align-items: baseline; margin-top: .9rem; font-size: 1rem; }
.cf-item__cap b { color: var(--ink); font-weight: 700; }
.cf-item__cap span { color: var(--ink-faint); }
.cf-item__cap span::before { content: '— '; }

/* ---- Fakten ---- */
.cf-facts { position: relative; padding-top: clamp(2rem, 4vw, 4rem); }
.cf-facts__grid { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.cf-pill { display: inline-block; margin-top: 1.2rem; padding: .42rem .9rem; border-radius: var(--r-xs); background: var(--sky); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cf-facts__body > p { color: var(--ink-muted); line-height: 1.75; max-width: 52ch; margin-bottom: 1.8rem; }
.cf-table { border-top: 1px solid var(--line); }
.cf-table li { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 1rem; align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-muted); }
.cf-table b { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.cf-table strong { color: var(--ink); font-weight: 600; }
.cf-table i { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.cf-tools { display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; margin-top: 2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); }
.cf-facts .cf-giantband { margin-top: clamp(-2.5rem, -4vw, -5.5rem); }

/* ---- Dunkles Band ---- */
.cf-dark { background: var(--carbon); color: var(--on-dark); padding-block: clamp(3.5rem, 7vw, 7rem); }
.cf-dark__grid { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.cf-dark__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 2.2rem + 4vw, 5.6rem); line-height: 1; letter-spacing: -.04em; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0; }
.cf-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .7rem; border-radius: var(--r-xs); background: var(--sky); color: var(--ink); font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cf-dark__label { margin-top: .8rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.cf-dark__quote { margin: 0; }
.cf-dark__quote p { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.4; letter-spacing: -.015em; margin: 0 0 1.2rem; }
.cf-dark__quote footer { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--sky); }

/* ---- Fragen (Blog-Muster) ---- */
.cf-posts { padding-block: clamp(3.5rem, 7vw, 7rem); }
.cf-posts__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 3vw, 3rem); }
.cf-postgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2vw, 2rem); }
.cf-post__thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: var(--r-xs); background: var(--sky-soft); color: var(--wine); margin-bottom: 1rem; }
.cf-post__meta { margin: 0 0 .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wine); }
.cf-post h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; line-height: 1.25; margin-bottom: .5rem; }
.cf-post p:last-child { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.6; }

/* ---- CTA ---- */
.cf-cta { position: relative; overflow: hidden; padding-bottom: clamp(3rem, 6vw, 6rem); }
.cf-cta__giant { display: flex; gap: .15em; white-space: nowrap; line-height: 0; margin-left: -.05em; }
.cf-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; margin-top: clamp(1.5rem, 3vw, 3rem); }
.cf-cta__line { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin: 0 0 1.8rem; }
.cf-cta__cols { display: flex; gap: clamp(2rem, 5vw, 5rem); }
.cf-cta__cols b { display: block; font-size: .97rem; margin-bottom: .35rem; }
.cf-cta__cols p { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.6; }
.cf-cta__contact { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; text-align: right; }
.cf-cta__contact a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--wine); text-underline-offset: 4px; }

/* ---- Fusszeile ---- */
.cf-foot { border-top: 1px solid var(--line); padding-block: 1.4rem; }
.cf-foot__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }
.cf-foot nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.cf-foot nav a { color: var(--ink); font-weight: 600; }
.cf-foot p { margin: 0; color: var(--ink-faint); }

@media (max-width: 1000px) {
  .cf-postgrid { grid-template-columns: repeat(2, 1fr); }
  .cf-workgrid { grid-template-columns: repeat(2, 1fr); }
  .cf-workgrid > :nth-child(n) { margin-top: 0; }
  .cf-workgrid > :nth-child(even) { margin-top: 2.5rem; }
}
@media (max-width: 820px) {
  .cf-hero { min-height: 0; padding-block: 4rem 2rem; }
  .cf-about__grid, .cf-facts__grid, .cf-dark__grid, .cf-cta__grid { grid-template-columns: 1fr; }
  .cf-about__text { padding-right: 0; }
  .cf-services { grid-template-columns: 1fr; gap: 2.2rem; }
  .cf-work__link { margin-top: 1rem; text-align: left; }
  .cf-cta__contact { align-items: flex-start; text-align: left; }
  .cf-cta__giant { flex-direction: column; gap: 0; }
}
@media (max-width: 600px) {
  .cf-workgrid { grid-template-columns: 1fr; }
  .cf-workgrid > :nth-child(n) { margin-top: 0; }
  .cf-postgrid { grid-template-columns: 1fr; }
  .cf-table li { grid-template-columns: 3.4rem 1fr; }
  .cf-table i { grid-column: 2; }
  .cf-meta__line { display: none; }
}
.cf-facts__head { padding-top: .4rem; }

/* Feinschliff nach Sichtpruefung */
.cf-hero__giant { font-size: clamp(7rem, 29vw, 27rem); }                  /* laeuft ueber beide Raender wie im Original */
.cf-facts .cf-giantband { margin-top: -6rem; }
.cf-facts .cf-giant { font-size: clamp(5rem, 17.5vw, 16rem); }            /* endet vor der Tabellenspalte */
@media (max-width: 820px) { .cf-facts .cf-giantband { margin-top: 0; } }

/* Hero-Wort laeuft ueber beide Raender; mobil Punkte weg, Luft zur Meta-Zeile */
.cf-hero__giant { font-size: clamp(7rem, 36vw, 33rem); }
@media (max-width: 820px) {
  .cf-dot { display: none; }
  .cf-hero__inner { padding-bottom: 2.2rem; }
}

/* 44. SEVORA-HERO ========================================================== */
.sv-hero { padding-block: clamp(4.5rem, 9vh, 7rem) clamp(1.5rem, 3vw, 2.5rem); position: relative; }
.sv-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: clamp(460px, 64vh, 620px);
  background: var(--sky-soft);
  border-radius: var(--r-md);
  padding: clamp(2rem, 4vw, 4.5rem);
  isolation: isolate;
}
/* Dezente Kreise im Kasten */
.sv-card::before, .sv-card::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  border: 1.5px solid rgba(120, 2, 14, .10);
}
.sv-card::before { width: 58%; aspect-ratio: 1; right: -8%; top: -18%; }
.sv-card::after  { width: 26%; aspect-ratio: 1; left: -6%; bottom: -14%; border-color: rgba(120, 2, 14, .14); background: radial-gradient(circle, rgba(207,232,255,.6), transparent 70%); }

.sv-card__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.sv-kicker { display: flex; align-items: center; gap: .6rem; font-size: 1.02rem; color: var(--ink-muted); margin-bottom: 1.2rem; }
.sv-kicker__mark { width: 9px; height: 9px; border-radius: 2px; background: var(--wine); }
.sv-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); margin: 0 0 1.2rem; }
.sv-title__soft { color: var(--wine); }
.sv-lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-muted); max-width: 42ch; margin: 0 0 1.8rem; }
.sv-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.sv-stats { display: flex; gap: clamp(1.6rem, 3vw, 3rem); flex-wrap: wrap; }
.sv-stats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1; letter-spacing: -.03em; color: var(--wine); margin-bottom: .3rem; }
.sv-stats span { font-size: var(--fs-sm); color: var(--ink-muted); }

/* Portrait: ragt oben aus dem Kasten heraus, unten buendig */
.sv-card__photo { position: absolute; right: clamp(1rem, 3vw, 3rem); bottom: 0; height: 112%; z-index: 1; pointer-events: none; }
.sv-card__photo img { height: 100%; width: auto; display: block; filter: grayscale(1) contrast(1.04); }

/* Verfuegbarkeits-Karte auf dem Portrait */
.sv-avail {
  position: absolute; right: clamp(1.2rem, 2.6vw, 2.4rem); bottom: clamp(1.2rem, 2.6vw, 2.4rem); z-index: 3;
  width: min(360px, 42%);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 1rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--r-sm);
  background: rgba(120, 2, 14, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--on-wine);
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.sv-avail:hover { transform: translateY(-3px); background: var(--wine); }
.sv-avail__label { grid-column: 1; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.sv-avail__title { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; margin: .25rem 0 .35rem; }
.sv-avail__text { grid-column: 1; font-size: .82rem; line-height: 1.5; opacity: .88; }
.sv-avail__arrow { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 46px; height: 46px; border-radius: var(--r-xs); background: var(--sky); color: var(--ink); display: flex; align-items: center; justify-content: center; }

/* Zeile unter dem Kasten (Sevora: Kundenlogos) */
.sv-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding: clamp(1.6rem, 3vw, 2.4rem) .5rem 0; }
.sv-row li { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; color: var(--ink); }
.sv-row svg { color: var(--wine); }

@media (max-width: 1000px) {
  .sv-card { grid-template-columns: 1fr; min-height: 0; padding-bottom: clamp(16rem, 44vw, 24rem); }
  .sv-card__photo { height: auto; width: min(52%, 340px); right: 1rem; }
  .sv-card__photo img { height: auto; width: 100%; }
  .sv-avail { width: min(300px, 60%); }
}
@media (max-width: 620px) {
  .sv-hero { padding-top: 2rem; }
  .sv-card { padding: 1.4rem 1.2rem 1.6rem; }
  .sv-card__photo { position: static; width: min(70%, 280px); margin: 1.4rem auto 0; }
  .sv-avail { position: static; width: auto; margin-top: 1rem; }
  .sv-row { justify-content: flex-start; }
}

/* ---- Weinrot statt Carbon im dunklen Band (Mix aus Weinrot und Hellblau) ---- */
.cf-dark { background: var(--wine); position: relative; overflow: hidden; }
.cf-dark::before { content: ''; position: absolute; width: 46vw; aspect-ratio: 1; border-radius: 50%; right: -12vw; top: -40%; border: 1.5px solid rgba(207,232,255,.22); pointer-events: none; }
.cf-dark::after  { content: ''; position: absolute; width: 18vw; aspect-ratio: 1; border-radius: 50%; left: 4vw; bottom: -30%; background: radial-gradient(circle, rgba(207,232,255,.16), transparent 70%); pointer-events: none; }
.cf-dark__grid { position: relative; z-index: 1; }
.cf-dark__label { color: var(--on-wine-muted); }
.cf-dark__quote footer { color: var(--sky); }

/* ---- Dezente Kreise hinter Fakten und Abschluss ---- */
.cf-facts, .cf-cta { position: relative; overflow: hidden; }
.cf-facts::before { content: ''; position: absolute; width: 34vw; aspect-ratio: 1; border-radius: 50%; left: -14vw; top: 8%; border: 1.5px solid rgba(207,232,255,.9); pointer-events: none; z-index: 0; }
.cf-cta::before   { content: ''; position: absolute; width: 30vw; aspect-ratio: 1; border-radius: 50%; right: -8vw; bottom: -20%; border: 1.5px solid rgba(120,2,14,.10); pointer-events: none; z-index: 0; }
.cf-facts__grid, .cf-cta__grid { position: relative; z-index: 1; }

/* ---- Seitenkopf (Unterseiten) ---- */
.cf-pagehead { position: relative; padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem); }
.cf-pagehead::before { content: ''; position: absolute; width: 22vw; max-width: 340px; aspect-ratio: 1; border-radius: 50%; right: -4vw; top: -10%; border: 1.5px solid rgba(207,232,255,.95); pointer-events: none; z-index: 0; }
.cf-pagehead > * { position: relative; z-index: 1; }
.cf-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); margin: .4rem 0 1rem; max-width: 18ch; }
.cf-pagehead__lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-muted); max-width: 56ch; margin: 0; }
.cf-pagehead .breadcrumb { margin-bottom: 1.6rem; }

/* ---- Kontakt ---- */
.cf-contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(3rem, 6vw, 6rem); align-items: start; }
.cf-contact form { display: grid; gap: 1.1rem; }
.cf-contact__aside { display: grid; gap: .8rem; }
.cf-contact__box { display: grid; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sky-soft); font-size: var(--fs-sm); color: var(--ink); }
.cf-contact__box a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--wine); text-underline-offset: 3px; }
.cf-contact__k { display: flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wine); }
.cf-contact__box--wine { background: var(--wine); color: var(--on-wine); border-color: var(--wine); }
.cf-contact__box--wine .cf-contact__k { color: var(--sky); }
@media (max-width: 820px) { .cf-contact { grid-template-columns: 1fr; } }

/* Kreise duerfen nicht ueber den Seitenrand hinaus scrollen */
.sv-hero { overflow: hidden; padding-top: clamp(5.5rem, 10vh, 7.5rem); }
.cf-pagehead { overflow: hidden; }

/* Portrait bleibt in der rechten Haelfte des Kastens, ragt leicht oben heraus */
.sv-card__photo { height: auto; width: min(50%, 540px); right: clamp(.5rem, 2vw, 2rem); bottom: 0; }
.sv-card__photo img { width: 100%; height: auto; }
.sv-card { min-height: clamp(460px, 62vh, 600px); }
.sv-card__text { max-width: 30rem; }
@media (max-width: 1000px) { .sv-card__photo { width: min(52%, 340px); } }
@media (max-width: 620px)  { .sv-card__photo { width: min(70%, 280px); margin: 1.4rem auto 0; position: static; } }
.check { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--ink-muted); }
.check a { text-decoration: underline; text-decoration-color: var(--wine); text-underline-offset: 3px; color: var(--ink); }

/* Kasten flacher, Text schmaler -> Portrait waechst wieder ueber die Oberkante hinaus */
.sv-card { min-height: clamp(440px, 58vh, 560px); }
.sv-card__text { max-width: 28rem; }
.sv-card__photo { width: min(56%, 590px); right: 1rem; }

/* Sevora-Balance: Titel kompakter, Foto hoch mit weichem Auslauf nach links */
.sv-title { font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem); }
.sv-card__text { max-width: 30rem; }
.sv-lead { max-width: 38ch; }
.sv-card { min-height: clamp(440px, 60vh, 580px); }
.sv-card__photo {
  width: auto; height: 110%; right: clamp(.5rem, 2vw, 2rem); bottom: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}
.sv-card__photo img { height: 100%; width: auto; }
@media (max-width: 1000px) { .sv-card__photo { height: auto; width: min(52%, 340px); -webkit-mask-image: none; mask-image: none; } .sv-card__photo img { width: 100%; height: auto; } }
@media (max-width: 620px)  { .sv-card__photo { width: min(70%, 280px); } }

/* Kennzahlen in einer Reihe halten */
.sv-card__text { max-width: 32rem; }
.sv-stats { flex-wrap: nowrap; gap: clamp(1.2rem, 2.2vw, 2.2rem); }
.sv-stats span { white-space: nowrap; font-size: .82rem; }
@media (max-width: 620px) { .sv-stats { flex-wrap: wrap; } }

/* 45. STARTSEITE NACH MD ==================================================== */
/* Dunkler Hero (Headline links, S/W-Portrait rechts), Tool-Wall, Leistungen
   als nummerierte Karten, grosse Arbeitskarte, zentrierte Abschnittskoepfe. */

.ak-hero { position: relative; overflow: hidden; background: var(--carbon); color: var(--on-dark); min-height: calc(100svh - 77px); display: flex; flex-direction: column; }
.ak-hero::before { content: ''; position: absolute; width: 52vw; aspect-ratio: 1; border-radius: 50%; right: -10vw; top: -30%; border: 1.5px solid rgba(207,232,255,.14); pointer-events: none; }
.ak-hero::after  { content: ''; position: absolute; width: 22vw; aspect-ratio: 1; border-radius: 50%; left: -6vw; bottom: -18%; background: radial-gradient(circle, rgba(120,2,14,.45), transparent 70%); pointer-events: none; }
.ak-hero__grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 2rem; }
.ak-hero__text { padding-block: clamp(3rem, 8vh, 6rem); max-width: 36rem; }
.ak-kicker { display: flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 1.4rem; }
.ak-kicker__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--wine); }
.ak-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem); line-height: 1.0; letter-spacing: -.04em; margin: 0 0 1.4rem; color: #fff; }
.ak-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark-muted); max-width: 40ch; margin: 0 0 1.4rem; }
.ak-signals { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: 2rem; }
.ak-signals li { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--on-dark); }
.ak-signals svg { color: var(--sky); }
.ak-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.ak-hero__photo { position: relative; align-self: end; justify-self: end; height: min(88vh, 720px); pointer-events: none; }
.ak-hero__photo img { height: 100%; width: auto; display: block; filter: grayscale(1) contrast(1.06) brightness(.98); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
.ak-hero__down { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.ak-hero__down svg { transform: rotate(90deg); }

.ak-wall { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding-block: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line); }
.ak-wall li { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink-faint); }

.ak-services { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(3.5rem, 7vw, 7rem); align-items: start; }
.ak-services__head p { color: var(--ink-muted); line-height: 1.7; max-width: 42ch; margin: 1.2rem 0 1.8rem; }
.ak-svclist { display: grid; gap: .8rem; }
.ak-svc { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.ak-svc:hover { border-color: var(--wine); transform: translateX(4px); }
.ak-svc--main { background: var(--sky-soft); border-color: var(--sky); }
.ak-svc__n { font-family: var(--font-display); font-weight: 700; font-size: .97rem; letter-spacing: .08em; color: var(--wine); padding-top: .25rem; }
.ak-svc h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .4rem; }
.ak-svc p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.65; margin: 0; }

.ak-work { padding-bottom: clamp(3.5rem, 7vw, 7rem); }
.ak-work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

.ak-section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.sh { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem, 4vw, 3.5rem); }
.sh__pill { display: inline-block; padding: .4rem .85rem; border-radius: var(--r-xs); background: var(--sky-soft); border: 1px solid var(--sky); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.1rem; }
.sh__pill--onwine { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.sh__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 .9rem; }
.sh__lead { color: var(--ink-muted); line-height: 1.7; margin: 0; }

.ak-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.ak-steps li { padding: 1.4rem 1.3rem; border-top: 2px solid var(--wine); background: var(--bg-soft); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.ak-steps__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: var(--wine); margin-bottom: .7rem; }
.ak-steps h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; }
.ak-steps p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.6; margin: 0; }

.ak-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.ak-flow li { position: relative; padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ak-flow li svg { color: var(--wine); margin-bottom: .8rem; }
.ak-flow h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; }
.ak-flow p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.6; margin: 0; }
.ak-flow li:not(:last-child)::after { content: '→'; position: absolute; right: -1.1rem; top: 50%; transform: translateY(-50%); color: var(--sky); font-weight: 700; }

.ak-cta { background: var(--wine); color: var(--on-wine); padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; overflow: hidden; }
.ak-cta::before { content: ''; position: absolute; width: 40vw; aspect-ratio: 1; border-radius: 50%; right: -12vw; top: -40%; border: 1.5px solid rgba(207,232,255,.25); pointer-events: none; }
.ak-cta__inner { position: relative; z-index: 1; max-width: 64ch; }
.ak-cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 1rem; color: #fff; }
.ak-cta p { color: var(--on-wine-muted); line-height: 1.7; margin: 0 0 1.8rem; }

@media (max-width: 960px) {
  .ak-hero__grid { grid-template-columns: 1fr; }
  .ak-hero__photo { justify-self: center; height: min(60vh, 460px); }
  .ak-services { grid-template-columns: 1fr; }
  .ak-steps { grid-template-columns: repeat(2, 1fr); }
  .ak-flow { grid-template-columns: 1fr; }
  .ak-flow li:not(:last-child)::after { display: none; }
}
@media (max-width: 620px) {
  .ak-hero { min-height: 0; }
  .ak-hero__text { padding-block: 3rem 1.5rem; }
  .ak-hero__photo { height: auto; width: min(76%, 300px); }
  .ak-hero__photo img { width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; }
  .ak-hero__down { display: none; }
  .ak-steps { grid-template-columns: 1fr; }
  .ak-wall { justify-content: flex-start; }
}

/* Hero-Feinschliff: langes Wort bleibt ganz, alles passt in einen Viewport */
.ak-hero__text { max-width: 42rem; padding-block: 1.5rem; }
.ak-title { font-size: clamp(2.4rem, 1.2rem + 4vw, 4.6rem); word-break: keep-all; hyphens: manual; }
.ak-lead { margin-bottom: 1.1rem; }
.ak-signals { margin-bottom: 1.5rem; }
.ak-hero__photo { height: min(80vh, 660px); }

/* 46. SECTIONS NACH BRIEFING ============================================== */
@font-face {
  font-family: 'Red Hat Display';
  src: url('../../fonts/Red_Hat_Display/RedHatDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900; font-style: italic; font-display: swap;
}

/* Abstaende: mehr Luft, wechselnde Hintergruende */
.ah-section { padding-block: clamp(5rem, 9vw, 8.5rem); }
.ah-section--soft { background: var(--bg-soft); }
.ah-section--sky { background: var(--sky-soft); }
.ah-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); margin: .5rem 0 1rem; }
.sh__title { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem); }
.ah-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 3.5vw, 3.2rem); }

/* Punkt-Link: Block bleibt hinter dem Text, Text bleibt dunkel */
.cf-dotlink:hover { color: var(--ink); }
.cf-dotlink:hover::before { width: 30px; background: var(--sky); }
.cf-dotlink:hover svg { transform: translateX(3px); }
.cf-dotlink svg { transition: transform var(--t-fast) var(--ease); }

/* #1 Hero */
.ah-hero { position: relative; overflow: hidden; min-height: calc(100svh - 77px); display: flex; }
.ah-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; flex: 1; }
.ah-hero__text { padding-block: 2rem; max-width: 34rem; position: relative; }
.ah-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wine); margin-bottom: 1.2rem; }
.ah-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.75rem); line-height: 1.08; letter-spacing: -.03em; color: var(--ink); margin: 0 0 1.3rem; }
.ah-title em { font-style: italic; font-weight: 600; color: var(--wine); }
.ah-intro { font-size: var(--fs-base, 1rem); line-height: 1.7; color: var(--ink-muted); max-width: 42ch; margin: 0 0 1.8rem; }
.ah-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.ah-actions .btn svg { margin-left: .45rem; }
.ah-scroll { display: inline-flex; align-items: center; gap: .4rem; margin-top: clamp(2rem, 5vh, 3.5rem); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.ah-scroll svg { transform: rotate(90deg); }
.ah-hero__visual { position: relative; align-self: end; height: min(82vh, 680px); display: flex; justify-content: center; align-items: flex-end; }
.ah-hero__visual img { position: relative; z-index: 2; height: 100%; width: auto; display: block; filter: grayscale(1) contrast(1.05); }
.ah-ring { position: absolute; border-radius: 50%; left: 50%; }
.ah-ring--fill { width: 78%; aspect-ratio: 1; top: 8%; transform: translateX(-50%); background: var(--sky-soft); z-index: 0; }
.ah-ring--line { width: 92%; aspect-ratio: 1; top: 2%; transform: translateX(-46%); border: 1.5px solid var(--sky); z-index: 0; }
.ah-dots { position: absolute; right: -4%; bottom: 14%; width: 34%; aspect-ratio: 1; background-image: radial-gradient(var(--sky) 1.4px, transparent 1.6px); background-size: 14px 14px; opacity: .9; z-index: 1; -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%); mask-image: radial-gradient(circle, #000 40%, transparent 72%); }

/* Staerken-Leiste */
.ah-strip { background: var(--bg-soft); border-block: 1px solid var(--line); }
.ah-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ah-strip__grid li { display: flex; gap: .9rem; align-items: flex-start; padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1rem, 2vw, 1.8rem); }
.ah-strip__grid li + li { border-left: 1px solid var(--line); }
.ah-strip__grid svg { color: var(--wine); flex: none; margin-top: .1rem; }
.ah-strip h3 { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }
.ah-strip p { font-size: .9rem; line-height: 1.6; color: var(--ink-muted); margin: 0; }

/* #2 Intro */
.ah-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; }
.ah-statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.7vw, 2.3rem); line-height: 1.2; letter-spacing: -.025em; color: var(--ink); margin: .6rem 0 0; max-width: 26ch; }
.ah-statement span { color: var(--ink-faint); font-weight: 600; }
.ah-intro-link { padding-bottom: .4rem; }

/* #3 Projekte auf hellem Grund */
.pcards--light .pcard { background: #fff; border-color: var(--line); }
.pcards--light .pcard__tags li { background: var(--bg-soft); color: var(--ink); }
.pcards--light .pcard__name { color: var(--ink); }
.pcards--light .pcard__body p { color: var(--ink-muted); }
.pcards--light .pcard__go { color: var(--ink); }
.pcards--light .pcard:hover .pcard__go { color: var(--wine); }

/* #5 Workflow mit Umlaufbahnen */
.ah-flow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.ah-flow__text > p { color: var(--ink-muted); line-height: 1.7; max-width: 46ch; margin: 0 0 1.6rem; }
.ah-flow__list { display: grid; gap: .55rem; }
.ah-flow__list li { display: grid; grid-template-columns: auto auto 1fr; gap: .6rem .7rem; align-items: baseline; font-size: .97rem; }
.ah-flow__list svg { color: var(--wine); align-self: center; }
.ah-flow__list b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ah-flow__list span { color: var(--ink-muted); font-size: .9rem; }
.ah-orbit { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto; }
.ah-orbit__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid var(--sky); }
.ah-orbit__ring--1 { width: 40%; aspect-ratio: 1; background: radial-gradient(circle, rgba(207,232,255,.35), transparent 70%); }
.ah-orbit__ring--2 { width: 70%; aspect-ratio: 1; }
.ah-orbit__ring--3 { width: 100%; aspect-ratio: 1; border-color: rgba(207,232,255,.7); }
.ah-orbit__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--wine); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; box-shadow: 0 14px 34px rgba(120,2,14,.28); }
.ah-orbit__chip {
  --radius: calc(20% + (var(--r) - 1) * 15%);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--radius) * 2.5)) rotate(calc(-1 * var(--a)));
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .75rem; border-radius: var(--r-xs);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(20,21,26,.08);
  font-size: .78rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.ah-orbit__chip svg { color: var(--wine); }

/* #6 CTA */
.ah-cta { position: relative; overflow: hidden; border-radius: var(--r-md); background: linear-gradient(135deg, var(--wine) 0%, #4A0109 100%); color: var(--on-wine); padding: clamp(2.5rem, 5vw, 4.5rem); }
.ah-cta__ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(207,232,255,.28); pointer-events: none; }
.ah-cta__ring--1 { width: 56%; aspect-ratio: 1; right: -14%; top: -40%; }
.ah-cta__ring--2 { width: 30%; aspect-ratio: 1; right: 6%; bottom: -34%; background: radial-gradient(circle, rgba(207,232,255,.16), transparent 70%); }
.ah-cta__inner { position: relative; z-index: 1; max-width: 46rem; }
.ah-cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; color: #fff; margin: .6rem 0 .9rem; }
.ah-cta p { color: var(--on-wine-muted); line-height: 1.7; max-width: 52ch; margin: 0 0 1.6rem; }
.ah-cta__mail { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px; }

@media (max-width: 960px) {
  .ah-hero__grid { grid-template-columns: 1fr; }
  .ah-hero__visual { height: min(58vh, 440px); justify-self: center; }
  .ah-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .ah-strip__grid li:nth-child(3) { border-left: 0; }
  .ah-strip__grid li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ah-intro-grid { grid-template-columns: 1fr; }
  .ah-flow { grid-template-columns: 1fr; }
  .ah-orbit { max-width: 420px; }
}
@media (max-width: 620px) {
  .ah-hero { min-height: 0; }
  .ah-hero__visual { height: auto; width: min(78%, 300px); }
  .ah-hero__visual img { width: 100%; height: auto; }
  .ah-strip__grid { grid-template-columns: 1fr; }
  .ah-strip__grid li + li { border-left: 0; border-top: 1px solid var(--line); }
  .ah-orbit__chip { font-size: .7rem; padding: .4rem .55rem; }
}

/* Chips sitzen auf den Bahnen (Versatz relativ zur Orbit-Breite) */
.ah-orbit { container-type: inline-size; }
.ah-orbit__chip { transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--r) * 19cqw)) rotate(calc(-1 * var(--a))); }

/* 47. RUNDE 2 =============================================================== */
/* Foto in Farbe, ein Kreis weniger, weicherer Farbton dahinter */
.ah-hero__visual img { filter: none; }
.ah-ring--fill { background: linear-gradient(160deg, var(--sky-soft) 0%, var(--sky) 55%, var(--wine-tint) 100%); }

/* Navigation: Versalien, Laufweite, schlichte Linie, kein Punkt */

/* Intro: Woerter fuellen sich beim Scrollen */
.ah-statement { max-width: 30ch; }
.ah-statement .w { color: var(--ink-faint); transition: color .3s ease; }
.ah-statement .w.on { color: var(--ink); }

/* Punkt-Link: Block erst weinrot, beim Zeigen hellblau */
.cf-dotlink::before { background: var(--wine); }
.cf-dotlink:hover::before { background: var(--sky); width: 30px; }

/* Workflow-Liste: Titel und Beschreibung untereinander */
.ah-flow__list li { grid-template-columns: auto 1fr; align-items: start; gap: .2rem .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.ah-flow__list li:last-child { border-bottom: 0; }
.ah-flow__list svg { grid-row: 1 / 3; margin-top: .2rem; }
.ah-flow__list span { grid-column: 2; }

/* Orbit: langsame Bewegung, Kern pulsiert, Chips schweben */
.ah-orbit__ring--2 { border-top-color: var(--wine); animation: ah-spin 22s linear infinite; }
.ah-orbit__ring--3 { border-right-color: var(--wine); animation: ah-spin 38s linear infinite reverse; }
.ah-orbit__core { animation: ah-pulse 3.6s ease-in-out infinite; }
.ah-orbit__chip { animation: ah-float 6s ease-in-out infinite; }
.ah-orbit__chip:nth-child(odd) { animation-delay: -3s; }
@keyframes ah-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ah-pulse { 0%, 100% { box-shadow: 0 14px 34px rgba(120,2,14,.28); } 50% { box-shadow: 0 18px 48px rgba(120,2,14,.48); } }
@keyframes ah-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }

/* CTA: zwei Spalten, driftende Ringe */
.ah-cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2.5rem 4rem; align-items: center; }
.ah-cta__facts { display: grid; gap: .7rem; }
.ah-cta__facts li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; padding: .9rem 1rem; border-radius: var(--r-xs); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ah-cta__facts svg { grid-row: 1 / 3; color: var(--sky); margin-top: .2rem; }
.ah-cta__facts b { font-size: 1rem; color: #fff; }
.ah-cta__facts span { grid-column: 2; font-size: .8rem; color: var(--on-wine-muted); }
.ah-cta__ring--1 { animation: ah-drift 14s ease-in-out infinite; }
.ah-cta__ring--2 { animation: ah-drift 18s ease-in-out infinite reverse; }
@keyframes ah-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 12px); } }
.ah-cta .btn svg { transition: transform var(--t-fast) var(--ease); }
.ah-cta .btn:hover svg { transform: translateX(4px); }

@media (max-width: 900px) { .ah-cta__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ah-orbit__ring--2, .ah-orbit__ring--3, .ah-orbit__core, .ah-orbit__chip, .ah-cta__ring--1, .ah-cta__ring--2 { animation: none; } }

/* Finales Logo: Wortmarke als SVG */
.logo img { height: 24px; width: auto; display: block; transition: opacity var(--t-fast) var(--ease); }
.logo:hover img { opacity: .8; }
@media (max-width: 620px) { .logo img { height: 21px; } }

/* 48. HIGHLIGHT-SCHRIFT: INSTRUMENT SERIF ================================== */
/* Akzent fuer einzelne Woerter und Zeilen — kursiv, etwas groesser als der
   umgebende Sans-Text, damit die Serifen tragen. Lokal, SIL OFL. */
@font-face { font-family: 'Instrument Serif'; src: url('../../fonts/Instrument_Serif/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../../fonts/Instrument_Serif/InstrumentSerif-Italic.ttf')  format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
:root { --font-accent: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; }

.ah-title em, .ah-h2 em, .cf-h2 em, .cf-h1 em, .ah-cta__title em, .sh__title em, .ah-statement em {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: 1.12em; line-height: .95; letter-spacing: -.01em; color: var(--wine);
}
.ah-cta__title em { color: var(--sky); }
.ah-title em { font-size: 1.14em; }
.ah-kicker, .eyebrow { font-family: var(--font-sans); }

/* 49. HERO-VISUAL UND STAERKEN-BALKEN ====================================== */
/* Kein Kreis mehr hinter dem Portrait. Stattdessen ein feines Punktraster
   oben rechts; das Foto laeuft unten weich aus, statt hart abzuschneiden. */
.ah-ring, .ah-dots { display: none; }

.ah-grid {
  position: absolute;
  top: 2%; right: -2%;
  width: 46%; aspect-ratio: 1;
  z-index: 0;
  background-image: radial-gradient(var(--sky) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 10%, transparent 68%);
          mask-image: radial-gradient(circle at 70% 30%, #000 10%, transparent 68%);
}

.ah-hero__visual img {
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}

/* Staerken-Balken: hellblau, ohne Trennlinien, ruhiger gesetzt */
.ah-strip { background: var(--sky-soft); border-block: 0; }
.ah-strip__grid { gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.ah-strip__grid li { padding: clamp(1.8rem, 3vw, 2.6rem) 0; gap: .8rem; }
.ah-strip__grid li + li { border-left: 0; }
.ah-strip h3 { font-size: .74rem; letter-spacing: .12em; color: var(--ink); }
.ah-strip p { font-size: .82rem; color: var(--ink-muted); max-width: 26ch; }
.ah-strip__grid svg { color: var(--wine); }

@media (max-width: 960px) {
  .ah-grid { width: 54%; top: 0; right: -6%; }
  .ah-strip__grid li:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 620px) {
  .ah-grid { display: none; }
  .ah-strip__grid li + li { border-top: 0; }
  .ah-strip__grid li { padding-block: .9rem; }
}

/* Portrait fuellt die Spalte und wird an der Hero-Unterkante beschnitten */
.ah-hero__visual { height: auto; align-self: stretch; overflow: hidden; align-items: flex-end; }
.ah-hero__visual img {
  position: absolute; right: 0; bottom: 0;
  height: auto; width: min(100%, 460px);
  max-height: none;
  -webkit-mask-image: none; mask-image: none;
}
/* Punktraster oben rechts, ausserhalb der Figur */
.ah-grid { top: 6%; right: 0; width: 38%; background-size: 20px 20px; -webkit-mask-image: none; mask-image: none; opacity: .85; }

@media (max-width: 960px) {
  .ah-hero__visual { min-height: 360px; }
  .ah-hero__visual img { width: min(72%, 340px); left: 50%; right: auto; transform: translateX(-50%); }
  .ah-grid { width: 44%; }
}
@media (max-width: 620px) {
  .ah-hero__visual { min-height: 300px; }
  .ah-hero__visual img { width: min(78%, 280px); }
}

/* 50. HERO-VARIANTE: PORTRAIT MITTIG ====================================== */
/* Headline umschliesst das Portrait: "Web &" links oben, "UI-Design" rechts
   mittig, "mit Haltung." links unten. Leistungen rechts mit Verbindungslinien. */

.ar-hero { position: relative; overflow: hidden; min-height: calc(100svh - 77px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.5rem, 3vh, 2.5rem); }
.ar-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) minmax(0, 1fr); align-items: center; gap: 0 clamp(.5rem, 2vw, 2rem); position: relative; }

.ar-col { position: relative; z-index: 2; display: flex; flex-direction: column; }
.ar-col--left { align-items: flex-start; }
.ar-col--right { align-items: flex-end; text-align: right; }

.ar-sig { font-family: var(--font-accent); font-style: italic; font-size: 1.3rem; color: var(--wine); margin: 0 0 .2rem; }

.ar-title { display: contents; }
.ar-word { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1rem + 4.4vw, 5rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
.ar-word em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--wine); }
.ar-word--1 { margin-bottom: .6rem; }
.ar-word--2 { margin: .4rem 0 .8rem; }
.ar-word--3 { margin: .8rem 0 1rem; }

.ar-note { font-size: .95rem; line-height: 1.6; color: var(--ink-muted); max-width: 30ch; margin: 0; }
.ar-note--top { margin-bottom: .6rem; }

.ar-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.ar-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 700; color: var(--ink); }
.ar-link svg { color: var(--wine); transition: transform var(--t-fast) var(--ease); }
.ar-link:hover svg { transform: translate(2px, -2px); }

/* Portrait mittig, unten angeschnitten */
.ar-photo { position: relative; z-index: 1; align-self: end; display: flex; justify-content: center; }
.ar-photo img { width: min(100%, 460px); height: auto; display: block; }
.ar-grid { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 92%; aspect-ratio: 1; z-index: -1; background-image: radial-gradient(var(--sky) 1.6px, transparent 1.7px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(circle, #000 34%, transparent 70%); mask-image: radial-gradient(circle, #000 34%, transparent 70%); }

/* Geschwungener Pfeil */
.ar-curve { width: clamp(52px, 5vw, 78px); height: auto; color: var(--wine); margin: .2rem clamp(1rem, 4vw, 3.5rem) .6rem 0; transform: scaleX(-1); }

/* Leistungsliste mit Verbindungslinien */
.ar-list { display: grid; gap: .55rem; width: 100%; max-width: 20rem; }
.ar-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem; font-size: 1rem; font-weight: 600; color: var(--ink); }
.ar-list__line { height: 1px; background: var(--line-strong); position: relative; transition: background var(--t-base) var(--ease); }
.ar-list__line::after { content: ''; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-right: 1.5px solid var(--line-strong); border-top: 1.5px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); transition: border-color var(--t-base) var(--ease); }
.ar-list li:hover .ar-list__line, .ar-list li:hover .ar-list__line::after { background: var(--wine); border-color: var(--wine); }
.ar-list li:hover { color: var(--wine); }

.ar-hero .ah-scroll { display: flex; margin-top: clamp(1rem, 2vh, 2rem); }

@media (max-width: 1000px) {
  .ar-hero { min-height: 0; padding-block: 2.5rem 1.5rem; }
  .ar-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
  .ar-col--right { align-items: flex-start; text-align: left; order: 3; }
  .ar-photo { order: 2; }
  .ar-photo img { width: min(64%, 320px); }
  .ar-word { white-space: normal; font-size: clamp(2.2rem, 8vw, 3.4rem); }
  .ar-word--2 { margin: 0 0 .6rem; }
  .ar-curve { display: none; }
  .ar-list { max-width: none; }
  .ar-note { max-width: 46ch; }
}

/* Portrait endet knapp unter der Gürtellinie (78 % der Bildhoehe) */
.ar-photo {
  width: min(100%, 460px);
  margin-inline: auto;
  aspect-ratio: 1024 / 1198;
  overflow: hidden;
  align-items: flex-start;
}
.ar-photo img { width: 100%; height: auto; }
.ar-grid { top: 4%; }
@media (max-width: 1000px) { .ar-photo { width: min(64%, 320px); } }

/* Portrait dominiert die Mitte, Woerter ruecken naeher heran */
.ar-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.25fr) minmax(0, .92fr); align-items: end; }
.ar-col { justify-content: center; padding-bottom: clamp(1rem, 4vh, 3rem); }
.ar-photo { width: min(100%, 560px); align-self: end; }
.ar-word { font-size: clamp(2rem, .9rem + 4vw, 4.4rem); }
.ar-hero { justify-content: flex-end; }
.ar-hero .ah-scroll { margin-top: .8rem; }
@media (max-width: 1000px) {
  .ar-hero__grid { grid-template-columns: 1fr; align-items: stretch; }
  .ar-col { padding-bottom: 0; }
  .ar-photo { width: min(70%, 340px); }
}

/* Silbriger Grund mit Verlauf nach Weiss zur Unterkante */
.ar-hero { background: linear-gradient(to bottom, #EDEFF3 0%, #F2F4F7 42%, #F7F8FA 72%, #FFF 100%); }
.ar-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(to bottom, transparent, #FFF 92%); pointer-events: none; z-index: 0; }
.ar-hero__grid, .ar-hero .ah-scroll { position: relative; z-index: 2; }

/* Hero endet exakt an der Foto-Unterkante; Staerken-Leiste schliesst direkt an */
.ar-hero { padding-bottom: 0; justify-content: flex-end; }
.ar-hero__grid { align-items: end; }
.ar-photo { margin-bottom: 0; }
.ar-col { padding-bottom: clamp(1.5rem, 5vh, 4rem); }
/* Scroll-Hinweis ueberlagert, statt Hoehe zu belegen */
.ar-hero .ah-scroll { position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0; z-index: 3; pointer-events: none; }
.ar-hero .ah-scroll a { pointer-events: auto; }
/* Verlauf laeuft in das Hellblau der Leiste aus */
.ar-hero { background: linear-gradient(to bottom, #EDEFF3 0%, #F1F3F7 40%, #F3F6FA 74%, var(--sky-soft) 100%); }
.ar-hero::after { display: none; }
@media (max-width: 1000px) {
  .ar-hero { padding-bottom: 1.5rem; }
  .ar-hero .ah-scroll { position: static; margin-top: 1rem; }
  .ar-col { padding-bottom: 0; }
}

/* Hero laeuft nach Weiss aus, weil die Leiste entfaellt */
.ar-hero { background: linear-gradient(to bottom, #EDEFF3 0%, #F1F3F7 44%, #F7F8FA 78%, #FFF 100%); }

/* 51. HERO UNTER DER KOPFLEISTE ============================================ */
/* Der Hero-Grund laeuft bis ganz nach oben; die Leiste liegt transparent darauf. */
.ar-hero {
  margin-top: calc(-1 * var(--header-h, 77px));
  padding-top: var(--header-h, 77px);
  min-height: 93svh;
  justify-content: flex-end;
}
/* Kopfleiste kompakter */


/* Headline enger gesetzt */
.ar-word { line-height: .96; }
.ar-word--1 { margin-bottom: .1rem; }
.ar-word--3 { margin: .1rem 0 1.1rem; }
.ar-word--2 { margin: .3rem 0 .7rem; }
.ar-sig { margin-bottom: .35rem; }

/* Weicher Verlauf ueber die Foto-Unterkante */
.ar-photo::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(to bottom, transparent, #FCFCFD 88%);
  pointer-events: none; z-index: 2;
}
.ar-hero { background: linear-gradient(to bottom, #EDEFF3 0%, #F1F3F7 46%, #F8F9FB 80%, #FCFCFD 100%); }

@media (max-width: 1000px) {
  .ar-hero { min-height: 0; margin-top: calc(-1 * var(--header-h, 77px)); padding-top: calc(var(--header-h, 77px) + 1.5rem); }
  .ar-photo::after { height: 18%; }
}

/* Projektraster: immer zwei Spalten — auch die erste Karte */
.pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard--wide { grid-column: auto; }
.pcard--wide .pcard__stage { aspect-ratio: 16 / 9.4; }
.pcard--wide .pcard__brand { max-width: 42%; }
.pcard--wide .pcard__shot--back  { top: -6%; right: -12%; width: 60%; }
.pcard--wide .pcard__shot--mid   { top: 24%; right: 22%;  width: 46%; }
.pcard--wide .pcard__shot--front { bottom: -10%; right: 4%; width: 44%; }
@media (max-width: 860px) { .pcards { grid-template-columns: 1fr; } }

/* 52. HERO: VERTIKALE BALANCE ============================================= */
/* Inhalt mittig statt unten gedraengt; gleiche Luft oben wie unten. */
.ar-hero { justify-content: center; padding-bottom: clamp(1.5rem, 4vh, 3rem); }
.ar-hero__grid { align-items: center; }
.ar-col { padding-bottom: 0; justify-content: center; }
.ar-photo { align-self: center; }
.ar-curve { transform: none; margin: .6rem clamp(.5rem, 2vw, 2rem) .8rem 0; width: clamp(64px, 6.5vw, 104px); }
@media (max-width: 1000px) { .ar-hero { padding-bottom: 2rem; } }

/* 53. PROJEKTKARTEN: SCHLICHT ============================================= */
/* Ein Bild, Kategorie-Pille, Titel und Pfeil. Kein Buehnenaufbau. */
.pcards { gap: clamp(1.1rem, 1.8vw, 1.8rem); }
.pcard {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pcard:hover { border-color: var(--wine); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20,21,26,.10); }

.pcard__stage { position: relative; display: block; aspect-ratio: 16 / 10.6; background: var(--stage, var(--bg-alt)); overflow: hidden; padding: 0; }
.pcard__stage::before, .pcard__stage::after { display: none; }
.pcard__brand { display: none; }
.pcard__shots { position: absolute; inset: 0; }
/* Nur der vorderste Screenshot, formatfuellend */
.pcard__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 0; box-shadow: none; transition: transform var(--t-slow) var(--ease); }
.pcard__shot--back, .pcard__shot--mid { display: none; }
.pcard__shot--front { display: block; }
.pcard--one .pcard__shot--back { display: block; }
.pcard:hover .pcard__shot { transform: scale(1.04); }

/* Kategorie oben rechts */
.pcard__tags { position: absolute; top: .8rem; right: .8rem; z-index: 3; margin: 0; gap: .35rem; }
.pcard__tags li { background: rgba(255,255,255,.94); color: var(--ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .72rem; padding: .3rem .6rem; }
.pcard__tags li:not(:first-child) { display: none; }
.pcard__tags svg { display: none; }

/* Fuss: Titel links, Pfeil rechts */
.pcard__body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem 1rem; padding: 1.1rem 1.2rem 1.2rem; }
.pcard__name { grid-column: 1; margin: 0 0 .15rem; font-size: 1.05rem; color: var(--ink); gap: .5rem; }
.pcard__mark { display: none; }
.pcard__body p { grid-column: 1; grid-row: 2; margin: 0; font-size: .9rem; color: var(--ink-faint); }
.pcard__go {
  grid-column: 2; grid-row: 1 / 3; justify-self: end;
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-size: 0; color: var(--ink);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.pcard__go svg { width: 16px; height: 16px; }
.pcard:hover .pcard__go { background: var(--wine); border-color: var(--wine); color: #fff; gap: 0; }

/* Bezugspunkt fuer die Kategorie-Pille, sonst haengt sie am Viewport */
.pcard { position: relative; display: flex; flex-direction: column; }
.pcard__stage { flex: none; }
.pcard__body { flex: 1; align-content: center; }
.pcards { align-items: stretch; }

/* Pille sitzt auf dem Bild */
.pcard__tags { top: .85rem; right: .85rem; }

/* Foto-Auslauf weicher und ohne sichtbare Kante */
.ar-photo::after { height: 34%; background: linear-gradient(to bottom, transparent, #F6F7FA 70%, #F8F9FB 100%); }
.ar-photo { border-radius: 0; }

/* 54. CASE STUDY ========================================================== */
/* Kein Brotkrumen-Pfad, viel Luft, Screenshots im Browserrahmen auf dunklem
   Grund — so bekommen auch helle Seiten eine Kontur. */

.cs-head { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem); }
.cs-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; margin: .5rem 0 1.1rem; max-width: 20ch; }
.cs-lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-muted); max-width: 58ch; margin: 0 0 2.4rem; }
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2.4rem); padding-block: 1.6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-meta dt { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem; }
.cs-meta dd { font-size: 1.02rem; font-weight: 600; margin: 0; }
.cs-head .case-hint { margin-top: 1.2rem; }

/* Dunkle Buehne */
.cs-stage { background: var(--carbon); padding-block: clamp(2.5rem, 6vw, 5rem); }
.cs-stage--pages { padding-block: clamp(3rem, 7vw, 6rem); }
.cs-stage__head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.cs-stage__head .ah-h2 { color: #fff; }
.cs-stage__head p { color: var(--on-dark-muted); font-size: 1rem; margin-top: .5rem; }

/* Browserrahmen */
.cs-frame { margin: 0; border-radius: var(--r-md); overflow: hidden; background: #1F2126; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.cs-frame__bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; background: #2A2D33; }
.cs-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.cs-frame__url { margin-left: .8rem; font-size: .7rem; color: rgba(255,255,255,.45); letter-spacing: .04em; }
.cs-frame img { display: block; width: 100%; height: auto; }
.cs-frame--hero { max-width: 1100px; margin-inline: auto; }

/* Umschalter */
.cs-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.cs-tab { padding: .5rem .9rem; border-radius: var(--r-xs); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--on-dark-muted); font-size: .8rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.cs-tab:hover { color: #fff; border-color: rgba(255,255,255,.34); }
.cs-tab.is-on { background: #fff; color: var(--ink); border-color: #fff; }
.cs-panel[hidden] { display: none; }

/* Zweispaltiger Textblock */
.cs-two { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.6rem, 4vw, 4.5rem); align-items: start; }
.cs-two p { color: var(--ink-muted); line-height: 1.75; margin-bottom: 1rem; }
.cs-two p:last-child { margin-bottom: 0; }

/* Sitemap */
.cs-map { display: grid; gap: .5rem; font-size: 1rem; }
.cs-map li { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg); color: var(--ink); font-weight: 600; }
.cs-map svg { color: var(--wine); flex: none; }
.cs-map__root { background: var(--sky-soft); border-color: var(--sky); }
.cs-map__group { display: block; }
.cs-map__group > ul { display: grid; gap: .35rem; margin: .7rem 0 0 1.6rem; }
.cs-map__group > ul li { font-weight: 400; font-size: .92rem; color: var(--ink-muted); padding: .5rem .8rem; background: var(--bg-soft); }

/* Schriftmuster */
.cs-font { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; margin-bottom: 1.6rem; }
.cs-font__sample { font-family: var(--font-display); font-weight: 700; font-size: 3.6rem; line-height: 1; color: var(--wine); margin: 0; }
.cs-font__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 .2rem; }
.cs-font__meta { font-size: .76rem; color: var(--ink-faint); margin: 0 0 .6rem; }
.cs-font__text { font-size: .95rem; line-height: 1.65; color: var(--ink-muted); margin: 0; }
.cs-scale { display: grid; gap: .5rem; }
.cs-scale li { display: flex; align-items: baseline; gap: 1rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: var(--r-xs); }
.cs-scale li > span:last-child { font-size: .76rem; color: var(--ink-faint); margin-left: auto; }

@media (max-width: 860px) { .cs-two { grid-template-columns: 1fr; } .cs-font { grid-template-columns: 1fr; } }
.cs-panels { position: relative; }

/* Handy-Rahmen */
.cs-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.2rem, 3vw, 2.6rem); justify-items: center; }
.cs-phone { margin: 0; text-align: center; max-width: 250px; }
.cs-phone img { display: block; width: 100%; height: auto; border-radius: 22px; }
.cs-phone { position: relative; padding: 10px; border-radius: 30px; background: #26282D; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 22px 50px rgba(0,0,0,.42); }
.cs-phone__notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 34%; height: 18px; border-radius: 10px; background: #26282D; z-index: 2; }
.cs-phone figcaption { margin-top: .7rem; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }

/* Geraete-Mockups (iPhone-Stil): Titanrahmen, Dynamic Island, Seitentasten */
.dv-phones { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(1.4rem, 4vw, 3.6rem); padding-top: clamp(.5rem, 2vw, 1.5rem); }
.dv-phones::before { content: ""; position: absolute; left: 50%; top: 42%; width: min(900px, 90%); height: 70%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(207,232,255,.13), transparent 70%), radial-gradient(closest-side at 30% 60%, rgba(143,22,34,.22), transparent 70%); filter: blur(10px); }
.dv { position: relative; margin: 0; width: min(250px, 27vw); margin-top: clamp(2rem, 5vw, 4.5rem); }
.dv--lead { width: min(286px, 31vw); margin-top: 0; z-index: 1; }
.dv__body { position: relative; padding: 3px; border-radius: 15.5% / 7.2%;
  background: linear-gradient(150deg, #8a8d94 0%, #3a3c42 18%, #1c1d21 50%, #33353b 82%, #7c7f86 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 0 rgba(255,255,255,.04), 0 50px 90px -30px rgba(0,0,0,.85), 0 24px 40px -22px rgba(0,0,0,.7);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.dv:hover .dv__body { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 2px 0 rgba(255,255,255,.04), 0 64px 100px -30px rgba(0,0,0,.9), 0 28px 44px -22px rgba(0,0,0,.7); }
/* Seitentasten: rechts Power, links Aktion + Lautstaerke */
.dv__body::before { content: ""; position: absolute; right: -2px; top: 26%; width: 3px; height: 12%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #2a2b30, #6d7077); }
.dv__keys { position: absolute; left: -2px; top: 17%; width: 3px; height: 4.6%; border-radius: 2px 0 0 2px; background: linear-gradient(270deg, #2a2b30, #6d7077); }
.dv__keys::before, .dv__keys::after { content: ""; position: absolute; left: 0; width: 3px; height: 190%; border-radius: inherit; background: inherit; }
.dv__keys::before { top: 180%; }
.dv__keys::after { top: 410%; }
.dv__screen { position: relative; overflow: hidden; border: clamp(5px, .65vw, 8px) solid #050507; border-radius: 13.4% / 6.2%; background: #050507; }
.dv__screen img { display: block; width: 100%; height: auto; }
.dv__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 28%, transparent 42%); }
.dv__island { position: absolute; top: 1.35%; left: 50%; width: 32.3%; aspect-ratio: 126 / 37; transform: translateX(-50%); border-radius: 999px; background: #000; }
.dv figcaption { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 1.4rem; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.dv figcaption span { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.3rem; padding: 0 .35rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-xs); font-size: .66rem; letter-spacing: .06em; color: var(--sky); }
@media (max-width: 720px) {
  .dv-phones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 1rem var(--gutter) 1.5rem; gap: 1.1rem; }
  .dv-phones::-webkit-scrollbar { display: none; }
  .dv, .dv--lead { flex: 0 0 66vw; width: 66vw; max-width: 270px; margin-top: 0; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) { .dv__body { transition: none; } .dv:hover .dv__body { transform: none; } }

/* 55. LEISTUNGEN AUF DER STARTSEITE ======================================= */
.lv-note { font-size: 1rem; line-height: 1.7; color: var(--ink-muted); max-width: 40ch; margin: 0; }
.lv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: clamp(2rem, 3.5vw, 3rem); }
.lv-card {
  position: relative; overflow: hidden;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.lv-card:hover { border-color: var(--wine); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,21,26,.08); }
.lv-card--wide { grid-column: span 2; background: linear-gradient(135deg, var(--sky-soft) 0%, #fff 70%); border-color: var(--sky); }
.lv-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--wine-tint); color: var(--wine); margin-bottom: 1rem; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.lv-card:hover .lv-card__ico { background: var(--wine); color: #fff; }
.lv-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.015em; margin-bottom: .5rem; }
.lv-card p { font-size: .92rem; line-height: 1.65; color: var(--ink-muted); margin: 0; max-width: 34ch; }
.lv-card__n { position: absolute; top: 1rem; right: 1.2rem; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: var(--ink-faint); }

/* Hero: bis 100vh, aber auf grossen Schirmen gedeckelt */
.ar-hero { min-height: min(100svh, 860px); }

@media (max-width: 900px) { .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lv-card--wide { grid-column: span 2; } }
@media (max-width: 620px) { .lv-grid { grid-template-columns: 1fr; } .lv-card--wide { grid-column: auto; } }

/* 56. FUSSZEILE ============================================================ */
.nf { background: var(--carbon); color: var(--on-dark); padding-block: clamp(3rem, 6vw, 5rem) 0; margin-top: clamp(3rem, 6vw, 5rem); }
.nf__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.nf__brand img { height: 26px; width: auto; display: block; margin-bottom: 1.2rem; }
.nf__claim { font-size: 1rem; line-height: 1.6; color: var(--on-dark-muted); margin: 0 0 1.6rem; }
.nf__col h3 { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 1rem; }
.nf__list { display: grid; gap: .6rem; }
.nf__list a { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--on-dark-muted); transition: color var(--t-fast) var(--ease); }
.nf__list a:hover { color: #fff; }
.nf__list svg { color: var(--sky); flex: none; opacity: .8; }
.nf__place { display: flex; align-items: center; gap: .5rem; margin-top: 1.2rem; font-size: .8rem; color: var(--on-dark-muted); }
.nf__place svg { color: var(--sky); }
.nf__base { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: rgba(245,245,246,.55); }
.nf__base p { margin: 0; }
.nf__base nav { display: flex; gap: 1.5rem; }
.nf__base a { color: rgba(245,245,246,.55); transition: color var(--t-fast) var(--ease); }
.nf__base a:hover { color: #fff; }
@media (max-width: 900px) { .nf__grid { grid-template-columns: 1fr 1fr; } .nf__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .nf__grid { grid-template-columns: 1fr; } }

/* 57. WER BIN ICH ========================================================= */
.wq { max-width: 62rem; }
.wq__quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.5rem);
  line-height: 1.28; letter-spacing: -.025em;
  color: var(--ink); margin: 1rem 0 1.8rem; border: 0; padding: 0;
}
.wq__quote .w { color: var(--ink-faint); transition: color .3s ease; }
.wq__quote .w.on { color: var(--ink); }
.wq__link { margin-top: .4rem; }

/* 58. BENTO-LEISTUNGEN ==================================================== */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.4rem); margin-top: clamp(2rem, 3.5vw, 3rem); }
.bx {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.2vw, 1.9rem) 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.bx:hover { border-color: var(--wine); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20,21,26,.08); }
.bx--wide { grid-column: span 2; }
.bx__head { max-width: 42ch; }
.bx h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: .45rem; }
.bx p { font-size: .92rem; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.bx__n { position: absolute; top: 1.1rem; right: 1.3rem; font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .1em; color: var(--ink-faint); }
.bx__media { margin-top: auto; padding-top: 1.4rem; display: flex; justify-content: center; }
.bx__art { width: 100%; height: auto; max-height: 200px; display: block; }
.bx--wide .bx__art { max-height: 220px; }
.bx__media { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }

@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx--wide { grid-column: span 2; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bx--wide { grid-column: auto; } }

/* 59. PROJEKTE: COLLAGE-BUEHNE ZURUECK ==================================== */
.pcard__stage { aspect-ratio: 16 / 9.6; padding: 0; }
.pcard__stage::before {
  content: ''; position: absolute; inset: 0; display: block; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 22% 50%, #000 0%, transparent 62%);
          mask-image: radial-gradient(ellipse at 22% 50%, #000 0%, transparent 62%);
}
.pcard__stage::after {
  content: ''; position: absolute; left: -10%; top: -20%; width: 62%; height: 140%;
  background: radial-gradient(ellipse at center, var(--stage-glow, rgba(255,255,255,.10)) 0%, transparent 60%);
  pointer-events: none; display: block;
}
.pcard__brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  position: absolute; left: clamp(1.2rem, 2.4vw, 2rem); top: 50%; transform: translateY(-50%);
  z-index: 4; max-width: 42%;
}
.pcard__logo { width: clamp(34px, 3.6vw, 48px); height: auto; }
.pcard__wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, .9rem + 1vw, 1.8rem); letter-spacing: -.025em; line-height: .98; color: var(--stage-ink, #fff); }
.pcard__claim { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--stage-ink, #fff); opacity: .6; }

/* Drei gestaffelte Ausschnitte */
.pcard__shots { position: absolute; inset: 0; z-index: 3; }
.pcard__shot { position: absolute; inset: auto; width: auto; height: auto; object-fit: initial; border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06); }
.pcard__shot--back  { display: block; top: -6%;  right: -12%; width: 58%; }
.pcard__shot--mid   { display: block; top: 24%;  right: 22%;  width: 44%; }
.pcard__shot--front { display: block; bottom: -10%; right: 4%; width: 42%; }
.pcard--one .pcard__shot--back { top: 10%; right: -8%; width: 60%; }
.pcard:hover .pcard__shot--back  { transform: translate(-7px, -5px); }
.pcard:hover .pcard__shot--mid   { transform: translate(-3px,  2px); }
.pcard:hover .pcard__shot--front { transform: translate( 4px,  7px); }
.pcard:hover .pcard__shot { transform: none; }
.pcard:hover .pcard__shot--back  { transform: translate(-7px, -5px); }

/* Pille bleibt oben rechts, aber ueber der Collage */
.pcard__tags { z-index: 5; }

/* Gleiche Kartenhoehen: Buehne fix, Fuss waechst nicht mit der Titellaenge */
.pcards { align-items: stretch; }
.pcard { height: 100%; }
.pcard__body { min-height: 104px; align-content: center; }
.pcard__name { font-size: 1.02rem; line-height: 1.25; }

/* 60. HERO-FEINSCHLIFF ==================================================== */
/* Mehr Luft, Portrait sitzt exakt auf der Kante zwischen Grau und Weiss */
.ar-hero { min-height: min(100svh, 900px); padding-top: calc(var(--header-h, 64px) + clamp(1.5rem, 4vh, 3.5rem)); padding-bottom: 0; justify-content: flex-end; }
.ar-hero__grid { align-items: end; gap: 0 clamp(1rem, 2.5vw, 2.5rem); }
.ar-col { justify-content: center; padding-bottom: clamp(3rem, 9vh, 6.5rem); }
.ar-photo { align-self: end; margin-bottom: 0; }
.ar-photo::after { height: 20%; background: linear-gradient(to bottom, transparent, #F8F9FB 100%); }
.ar-hero { background: linear-gradient(to bottom, #ECEEF2 0%, #F1F3F7 50%, #F8F9FB 100%); }
.ar-curve { width: clamp(72px, 7vw, 116px); margin: .4rem clamp(.5rem, 2.5vw, 2.5rem) .6rem 0; overflow: visible; }
.ar-word { font-size: clamp(2rem, .9rem + 3.8vw, 4.2rem); }

/* 61. BENTO: LEBENDIGER =================================================== */
.bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx { padding-bottom: 0; }
.bx--hero {
  background: linear-gradient(135deg, #fff 0%, var(--sky-soft) 100%);
  border-color: var(--sky);
}
.bx--hero .bx__head { max-width: 52ch; }
.bx--hero h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }
.bx--hero p { font-size: 1rem; }
.bx__tag { display: inline-block; margin-bottom: .7rem; padding: .3rem .65rem; border-radius: var(--r-xs); background: var(--wine); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bx__media { padding-top: 1.6rem; }
.bx__art { max-height: 210px; }
.bx--wide .bx__art { max-height: 230px; }

/* Bewegung beim Zeigen: Chips setzen sich nacheinander, Fluss laeuft, Cursor klickt */
.bx .chip { transition: transform .5s var(--ease), opacity .5s var(--ease); }
.bx:hover .chip-1 { transform: translateY(-2px); transition-delay: 0s; }
.bx:hover .chip-2 { transform: translateY(-2px); transition-delay: .07s; }
.bx:hover .chip-3 { transform: translateY(-2px); transition-delay: .14s; }
.bx:hover .chip-4 { transform: translateY(-2px); transition-delay: .21s; }
.bx:hover .chip-5 { transform: translateY(-2px); transition-delay: .28s; }
.bx .fl-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s linear; }
.bx:hover .fl-line { stroke-dashoffset: -32; }
.bx .fl-3 { transition: transform .5s var(--ease); }
.bx:hover .fl-3 { transform: translateY(-4px); }
.bx .cursor { transition: transform .45s var(--ease); }
.bx:hover .cursor { transform: translate(-60px, 14px); }
.bx .swatches rect { transition: transform .4s var(--ease); }
.bx:hover .swatches rect:nth-child(1) { transform: translateY(-4px); }
.bx:hover .swatches rect:nth-child(2) { transform: translateY(-4px); transition-delay: .06s; }
.bx:hover .swatches rect:nth-child(3) { transform: translateY(-4px); transition-delay: .12s; }
.bx:hover .swatches rect:nth-child(4) { transform: translateY(-4px); transition-delay: .18s; }
.bx .post { transition: transform .45s var(--ease); }
.bx:hover .post-1 { transform: translateY(-5px) rotate(-1.5deg); }
.bx:hover .post-2 { transform: translateY(-8px); transition-delay: .06s; }
.bx:hover .post-3 { transform: translateY(-5px) rotate(1.5deg); transition-delay: .12s; }
.bx .arrow { transition: transform .45s var(--ease); }
.bx:hover .arrow { transform: translateX(6px); }
.bx .check { opacity: 0; transform: scale(.8); transform-origin: 275px 59px; transition: opacity .35s var(--ease) .25s, transform .35s var(--ease) .25s; }
.bx:hover .check { opacity: 1; transform: scale(1); }
.bx .code rect { transition: width .5s var(--ease); }
.bx:hover .code rect:nth-child(4) { width: 62px; }
.bx:hover .code rect:nth-child(6) { width: 52px; }
@media (prefers-reduced-motion: reduce) { .bx * { transition: none !important; } }

@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } }

/* 62. KREIS-ELEMENTE: DOPPELRINGE ======================================== */
/* Zwei duenne, konzentrische Ringe in Hellblau — rechts oben angeschnitten. */
.cf-pagehead::before,
.cf-pagehead::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  border: 1.5px solid rgba(207,232,255,.95);
}
.cf-pagehead::before { width: 22vw; max-width: 340px; aspect-ratio: 1; right: -4vw; top: -10%; }
.cf-pagehead::after  { width: 30vw; max-width: 460px; aspect-ratio: 1; right: -9vw; top: -34%; border-color: rgba(207,232,255,.55); }

.wq { position: relative; }
#intro { position: relative; overflow: hidden; }
#intro::before, #intro::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  border: 1.5px solid rgba(207,232,255,.9);
}
#intro::before { width: 26vw; max-width: 380px; aspect-ratio: 1; right: -6vw; top: -14%; }
#intro::after  { width: 36vw; max-width: 520px; aspect-ratio: 1; right: -12vw; top: -40%; border-color: rgba(207,232,255,.5); }
#intro .wrap { position: relative; z-index: 1; }

.cs-head { position: relative; overflow: hidden; }
.cs-head::before, .cs-head::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  border: 1.5px solid rgba(207,232,255,.95);
}
.cs-head::before { width: 22vw; max-width: 340px; aspect-ratio: 1; right: -4vw; top: -6%; }
.cs-head::after  { width: 30vw; max-width: 460px; aspect-ratio: 1; right: -9vw; top: -30%; border-color: rgba(207,232,255,.55); }
.cs-head .wrap { position: relative; z-index: 1; }
@media (max-width: 620px) { .cf-pagehead::after, #intro::after, .cs-head::after { display: none; } }

/* SVG-Gruppen (nur Anker fuer Animationen) */
.bx__art--flow, .fl, .fl-1, .fl-2, .tag { }
/* Punkt-Link: Block liegt nicht mehr auf dem ersten Buchstaben */
.cf-dotlink { padding-left: 1.6rem; }

/* Hero: Luft ZWISCHEN den Elementen, nicht oben; neutraler Grau-Weiss-Verlauf */
.ar-hero { padding-top: calc(var(--header-h, 64px) + 1rem); background: linear-gradient(to bottom, #EAEAEA 0%, #F2F2F2 48%, #FFFFFF 100%); }
.ar-col { gap: 0; }
.ar-sig { margin-bottom: .9rem; }
.ar-word--1 { margin-bottom: 0; }
.ar-word--3 { margin: 0 0 1.4rem; }
.ar-note { margin-top: .2rem; }
.ar-note--top { margin-bottom: 1.4rem; }
.ar-word--2 { margin: .6rem 0 1.2rem; }
.ar-curve { margin-bottom: 1.2rem; }
.ar-actions { margin-top: 1.9rem; }
.ar-list { gap: .8rem; }
.ar-photo::after { background: linear-gradient(to bottom, transparent, #FFFFFF 100%); }

/* 63. RUNDE: HERO-HOEHE, KARTEN-VARIANZ, UEBER MICH ======================= */
/* Weniger leerer Raum oben: Hero deckelt frueher, Inhalt bleibt auf der Kante */
.ar-hero { min-height: min(82svh, 760px); }
.ar-col { padding-bottom: clamp(2rem, 6vh, 4.5rem); }
.ar-word--2 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--wine); font-size: 1.08em; }

/* Ueber mich: Bild buendig mit der Oberkante der Sektion */
.cf-about.ah-section { padding-top: 0; }
.cf-about__grid { align-items: start; }
.cf-about__text { padding-block: clamp(3rem, 7vw, 6rem) 2rem; }

/* Arbeiten: Doppelringe auch hier */
#arbeiten { position: relative; overflow: hidden; }
#arbeiten::before, #arbeiten::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; border: 1.5px solid rgba(207,232,255,.9); }
#arbeiten::before { width: 24vw; max-width: 360px; aspect-ratio: 1; left: -8vw; bottom: -10%; }
#arbeiten::after  { width: 34vw; max-width: 500px; aspect-ratio: 1; left: -15vw; bottom: -36%; border-color: rgba(207,232,255,.5); }
#arbeiten .wrap { position: relative; z-index: 1; }

/* Karten-Varianz: Collage / eine grosse Ansicht / Desktop + Handy */
.pcard--single .pcard__shot--back { top: 14%; right: -14%; width: 74%; border-radius: 6px; }
.pcard--single .pcard__brand { max-width: 36%; }
.pcard--single:hover .pcard__shot--back { transform: translate(-8px, -6px); }

.pcard--duo .pcard__shot--desk { display: block; top: 12%; right: -18%; width: 72%; border-radius: 6px; }
.pcard--duo .pcard__shot--phone { display: block; bottom: -6%; right: 6%; width: 19%; border-radius: 12px; box-shadow: 0 20px 44px rgba(0,0,0,.5), 0 0 0 4px #1f2126, 0 0 0 5px rgba(255,255,255,.12); }
.pcard--duo .pcard__brand { max-width: 34%; }
.pcard--duo:hover .pcard__shot--desk { transform: translate(-6px, -4px); }
.pcard--duo:hover .pcard__shot--phone { transform: translate(2px, 6px); }

/* Hero: Foto fuellt die Hoehe, weniger leerer Raum ueber dem Kopf */
.ar-hero { min-height: min(88svh, 820px); }
.ar-hero__grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.3fr) minmax(0, .88fr); }
.ar-photo { width: min(100%, 640px); }
.ar-col { padding-bottom: clamp(2.5rem, 7vh, 5rem); }

/* Ueber mich: Bild beginnt exakt an der Sektionsoberkante */
.cf-about { padding-top: 0 !important; margin-top: 0; }
.cf-about__photo { margin-top: 0; align-self: start; }
.cf-about__grid { align-items: start; }

/* Hero: Mittelspalte breiter, Foto waechst in die Hoehe und fuellt den Raum */
.ar-hero { min-height: min(84svh, 780px); }
.ar-hero__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) minmax(0, .8fr); }
.ar-photo { width: min(100%, 600px); }
.ar-word--2 { font-size: clamp(1.8rem, .8rem + 3.2vw, 3.6rem); }
@media (max-width: 1000px) { .ar-hero__grid { grid-template-columns: 1fr; } }
/* Buttons im Hero bleiben in einer Reihe, auch in der schmaleren Spalte */
.ar-actions { flex-wrap: nowrap; gap: .8rem; }
.ar-actions .btn { padding-inline: 1.1rem; white-space: nowrap; }
.ar-link { white-space: nowrap; }
@media (max-width: 1000px) { .ar-actions { flex-wrap: wrap; } }

/* 64. CASE-SEITE: KOPF, BAUM, CTA ========================================= */
.cs-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.cs-chips li { padding: .34rem .7rem; border: 1px solid var(--line); border-radius: var(--r-xs); font-size: .76rem; font-weight: 600; color: var(--ink-muted); }

.cs-visit { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: -1.2rem 0 2.2rem; }
.cs-visit__btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: var(--r-xs); background: var(--ink); color: #fff; font-size: .92rem; font-weight: 700; transition: background var(--t-fast) var(--ease); }
.cs-visit__btn:hover { background: var(--wine); }
.cs-visit__btn svg { transition: transform var(--t-fast) var(--ease); }
.cs-visit__btn:hover svg { transform: translate(2px, -2px); }
.cs-visit__note { font-size: .76rem; color: var(--ink-faint); }

/* Sitemap als Baum */
.tree { display: grid; gap: 0; }
.tree__root, .tree__item { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg); font-size: .97rem; font-weight: 600; color: var(--ink); }
.tree__root { background: var(--sky-soft); border-color: var(--sky); justify-self: start; }
.tree svg { color: var(--wine); flex: none; }
.tree__branches { position: relative; display: grid; gap: .5rem; margin-top: .5rem; padding-left: 1.6rem; }
/* Senkrechte Leitung */
.tree__branches::before { content: ''; position: absolute; left: .55rem; top: -.5rem; bottom: 1.1rem; width: 1.5px; background: var(--line-strong); }
.tree__item { position: relative; }
.tree__item::before { content: ''; position: absolute; left: -1.05rem; top: 50%; width: .9rem; height: 1.5px; background: var(--line-strong); }
.tree__item--group { display: block; padding: 0; border: 0; background: none; }
.tree__item--group::before { top: 1.25rem; }
.tree__label { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg); }
.tree__label i { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 700; color: #fff; background: var(--wine); border-radius: var(--r-xs); padding: .1rem .4rem; }
.tree__kids { position: relative; display: grid; gap: .35rem; margin: .45rem 0 0 1.6rem; padding-left: 1.1rem; }
.tree__kids::before { content: ''; position: absolute; left: 0; top: -.35rem; bottom: .75rem; width: 1.5px; background: var(--line); }
.tree__kids span { position: relative; padding: .5rem .8rem; border-radius: var(--r-xs); background: var(--bg-soft); font-size: .82rem; color: var(--ink-muted); }
.tree__kids span::before { content: ''; position: absolute; left: -1.1rem; top: 50%; width: .8rem; height: 1.5px; background: var(--line); }

/* CTA der Case-Seite */
.cs-cta { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.cs-cta__box { position: relative; overflow: hidden; border-radius: var(--r-md); padding: clamp(2.2rem, 4.5vw, 4rem); background: linear-gradient(135deg, var(--wine) 0%, #4A0109 60%, #2E0106 100%); color: var(--on-wine); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 1.6rem 3rem; align-items: center; }
.cs-cta__ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(207,232,255,.3); pointer-events: none; }
.cs-cta__ring--1 { width: 46%; aspect-ratio: 1; right: -8%; top: -50%; }
.cs-cta__ring--2 { width: 30%; aspect-ratio: 1; right: 4%; bottom: -40%; border-color: rgba(207,232,255,.18); }
.cs-cta__ring--3 { width: 16%; aspect-ratio: 1; left: -4%; bottom: -20%; background: radial-gradient(circle, rgba(207,232,255,.14), transparent 70%); border: 0; }
.cs-cta__text { position: relative; z-index: 1; }
.cs-cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em; color: #fff; margin: .7rem 0 .8rem; }
.cs-cta p { color: var(--on-wine-muted); line-height: 1.7; max-width: 46ch; margin: 0; }
.cs-cta__actions { position: relative; z-index: 1; display: grid; gap: .7rem; justify-items: start; }
.cs-cta__mail { color: #fff; font-weight: 700; font-size: .97rem; text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px; }
.cs-cta__next { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding-top: 1.4rem; margin-top: .4rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .9rem; }
.cs-cta__next > span { color: var(--on-wine-muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cs-cta__next a { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 700; }
.cs-cta__next a svg { color: var(--sky); transition: transform var(--t-fast) var(--ease); }
.cs-cta__next a:hover svg { transform: translateX(3px); }

/* Mobil: Case-Seite entzerren */
@media (max-width: 860px) {
  .cs-cta__box { grid-template-columns: 1fr; }
  .cs-visit { margin-top: -.6rem; }
}
@media (max-width: 620px) {
  .cs-stage { padding-inline: 0; }
  .cs-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cs-tabs::-webkit-scrollbar { display: none; }
  .cs-tab { flex: none; }
  .cs-frame__url { display: none; }
  .tree__branches { padding-left: 1.1rem; }
  .tree__kids { margin-left: .8rem; }
  .cs-phones { gap: 1rem; }
}

/* 65. DOPPELRINGE: HELLBLAU UND WEINROT =================================== */
/* Innerer Ring weinrot, aeusserer hellblau. Weinrot ist dunkel, deshalb mit
   niedriger Deckkraft, damit es genauso leise bleibt wie das Blau. */
.cf-pagehead::before,
#intro::before,
.cs-head::before,
#arbeiten::before { border-color: rgba(120, 2, 14, .16); }

.cf-pagehead::after,
#intro::after,
.cs-head::after,
#arbeiten::after { border-color: rgba(207, 232, 255, .85); }

/* 66. RINGE: ÜBERLAPPEND UND AUSLAUFEND =================================== */
/* Die Ringe schneiden sich und blenden per Maske in den Hintergrund aus,
   statt als geschlossene Kreise zu enden. */
.cf-pagehead::before, .cf-pagehead::after,
#intro::before, #intro::after,
.cs-head::before, .cs-head::after,
#arbeiten::before, #arbeiten::after {
  border-width: 1.5px;
}

/* Innen: weinrot, laeuft nach rechts unten aus */
.cf-pagehead::before, #intro::before, .cs-head::before {
  -webkit-mask-image: linear-gradient(215deg, #000 18%, rgba(0,0,0,.55) 48%, transparent 78%);
          mask-image: linear-gradient(215deg, #000 18%, rgba(0,0,0,.55) 48%, transparent 78%);
}
/* Aussen: hellblau, laeuft nach links oben aus, ueberschneidet den inneren */
.cf-pagehead::after, #intro::after, .cs-head::after {
  -webkit-mask-image: linear-gradient(160deg, transparent 12%, rgba(0,0,0,.5) 40%, #000 72%);
          mask-image: linear-gradient(160deg, transparent 12%, rgba(0,0,0,.5) 40%, #000 72%);
}

/* Ueberlappung: engere Abstaende, versetzte Mittelpunkte */
.cf-pagehead::before { right: -2vw;  top: -4%;  width: 24vw; max-width: 360px; }
.cf-pagehead::after  { right: -11vw; top: -26%; width: 34vw; max-width: 500px; }
.cs-head::before     { right: -2vw;  top: -2%;  width: 24vw; max-width: 360px; }
.cs-head::after      { right: -11vw; top: -24%; width: 34vw; max-width: 500px; }
#intro::before       { right: -3vw;  top: -8%;  width: 27vw; max-width: 400px; }
#intro::after        { right: -13vw; top: -32%; width: 38vw; max-width: 540px; }

/* Arbeiten: Ringe links unten, gespiegelt ausblendend */
#arbeiten::before {
  left: -5vw; bottom: -6%; width: 25vw; max-width: 380px;
  -webkit-mask-image: linear-gradient(35deg, #000 18%, rgba(0,0,0,.55) 48%, transparent 78%);
          mask-image: linear-gradient(35deg, #000 18%, rgba(0,0,0,.55) 48%, transparent 78%);
}
#arbeiten::after {
  left: -14vw; bottom: -30%; width: 36vw; max-width: 520px;
  -webkit-mask-image: linear-gradient(340deg, transparent 12%, rgba(0,0,0,.5) 40%, #000 72%);
          mask-image: linear-gradient(340deg, transparent 12%, rgba(0,0,0,.5) 40%, #000 72%);
}

/* 67. PLATZHALTER-CASES =================================================== */
.pcard--soon .pcard__stage { display: flex; align-items: center; }
.pcard__soon {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 4;
  padding: .32rem .7rem; border-radius: var(--r-xs);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stage-ink, #fff);
}
.pcard--soon .pcard__brand { position: static; transform: none; max-width: 70%; padding: clamp(1.4rem, 2.4vw, 2rem); }
.pcard--soon .pcard__wordmark { font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); }

/* Platzhalterflaeche auf der Einzelseite */
.cs-soon {
  display: grid; place-items: center; gap: .4rem;
  aspect-ratio: 16 / 7; border-radius: var(--r-md);
  background: var(--stage, var(--carbon)); color: var(--stage-ink, #fff);
  border: 1px solid rgba(255,255,255,.12);
}
.cs-soon__kz { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.03em; opacity: .9; }
.cs-soon__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin: 0; }
.cs-soon__note { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
/* Orbit-Kern traegt das CA-Zeichen */
.ah-orbit__core { width: 82px; height: 82px; padding: 0 16px; }
.ah-orbit__core img { width: 100%; height: auto; display: block; }

/* 68. ABSCHLUSS-CTA: WORT KOMPLETT SICHTBAR =============================== */
/* "lass uns loslegen" lief rechts aus dem Bild. Jetzt so bemessen, dass
   beide Woerter stehen, mit nur leichtem Anschnitt am rechten Rand. */
.cf-cta__giant { display: flex; align-items: baseline; gap: .12em; margin-left: -.04em; padding-right: 1.5rem; }
.cf-cta__giant .cf-giant { font-size: clamp(2.6rem, 10.6vw, 9.5rem); line-height: .86; }
.cf-cta__note { margin: .6rem 0 0; font-size: .95rem; color: var(--ink-muted); max-width: 44ch; }
@media (max-width: 820px) {
  .cf-cta__giant { flex-direction: column; gap: 0; }
  .cf-cta__giant .cf-giant { font-size: clamp(2.4rem, 13vw, 4.5rem); }
}

/* Riesenwort laeuft ueber die volle Seitenbreite bis an den rechten Rand */
.cf-cta { overflow: hidden; }
.cf-cta__giant { padding-right: 0; justify-content: space-between; width: 100%; }
.cf-cta__giant .cf-giant { font-size: clamp(2.6rem, 14.9vw, 13.4rem); }
@media (max-width: 820px) {
  .cf-cta__giant { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .cf-cta__giant .cf-giant { font-size: clamp(2.6rem, 15.5vw, 5.5rem); }
}

/* Kopfleisten-Button breiter, weniger gedrungen */
/* Auf allen Seiten dieselbe Groesse und Farbe (Weinrot) */
.btn.header__cta { padding: .35rem .35rem .35rem 1.35rem; gap: .9rem; font-size: var(--fs-xs); background: var(--wine); color: #fff; }
.btn.header__cta:hover { background: var(--wine-deep); }
.btn.header__cta .btn__dot { width: 30px; height: 30px; margin-left: 0; background: #fff; color: var(--wine); }

/* 69. ÜBER MICH =========================================================== */
/* Warmer Grund, Polaroids, Lebenslauf als Zeitleiste, eine volle Weinrotflaeche. */
.ab-head { position: relative; overflow: hidden; background: linear-gradient(to bottom, #F7F4F0 0%, #FBFAF8 62%, #fff 100%); padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.ab-head::before, .ab-head::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; border: 1.5px solid; }
.ab-head::before { border-color: rgba(120,2,14,.16); right: 22vw; top: -12%; width: 20vw; max-width: 300px; aspect-ratio: 1;
  -webkit-mask-image: linear-gradient(215deg, #000 18%, transparent 78%); mask-image: linear-gradient(215deg, #000 18%, transparent 78%); }
.ab-head::after { border-color: rgba(207,232,255,.85); right: 12vw; top: -30%; width: 30vw; max-width: 440px; aspect-ratio: 1;
  -webkit-mask-image: linear-gradient(160deg, transparent 12%, #000 72%); mask-image: linear-gradient(160deg, transparent 12%, #000 72%); }
.ab-head__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.ab-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); line-height: 1.04; letter-spacing: -.03em; margin: .5rem 0 1.1rem; }
.ab-lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-muted); max-width: 46ch; margin: 0 0 2rem; }
.ab-head__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.ab-head__meta dt { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem; }
.ab-head__meta dd { margin: 0; font-size: .97rem; font-weight: 600; }

/* Polaroids */
.ab-polas { position: relative; min-height: clamp(320px, 42vw, 460px); }
.ab-pola { position: absolute; margin: 0; padding: 10px 10px 34px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(20,21,26,.14); }
.ab-pola img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-pola figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: var(--font-accent); font-style: italic; font-size: .82rem; color: var(--ink-muted); }
.ab-pola--1 { width: 54%; aspect-ratio: 4/5; left: 2%; top: 4%; transform: rotate(-5deg); }
.ab-pola--1 img { aspect-ratio: 4/5; object-position: 55% 18%; }
.ab-pola--2 { width: 50%; aspect-ratio: 4/5; right: 2%; bottom: 2%; transform: rotate(4deg); }
.ab-pola--2 img { aspect-ratio: 4/5; object-position: 55% 12%; }

/* Lebenslauf */
.cv { display: grid; gap: .7rem; margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.cv__item { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.4rem; padding: 1.3rem 1.4rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.cv__item:hover { border-color: var(--wine); transform: translateX(4px); }
.cv__item--now { background: var(--sky-soft); border-color: var(--sky); }
.cv__jahr { font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: .06em; color: var(--wine); padding-top: .15rem; }
.cv__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.015em; margin-bottom: .15rem; }
.cv__ort { font-size: .8rem; color: var(--ink-faint); margin: 0 0 .5rem; }
.cv__body p:last-child { font-size: .95rem; line-height: 1.65; color: var(--ink-muted); margin: 0; }
.cv__hint { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-size: var(--fs-xs); color: var(--ink-faint); }
.cv__hint svg { flex: none; opacity: .75; }

/* Weinrotflaeche */
.ab-red { background: linear-gradient(135deg, var(--wine) 0%, #4A0109 70%, #2E0106 100%); color: var(--on-wine); padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; overflow: hidden; }
.ab-red::before { content: ''; position: absolute; width: 40vw; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(207,232,255,.25); right: -10vw; top: -40%; pointer-events: none; }
.ab-red__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.eyebrow--light { color: var(--sky); }
.eyebrow--light::before { background: var(--sky) !important; }
.ab-red__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.06; letter-spacing: -.03em; color: #fff; margin: .6rem 0 0; }
.ab-red__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--sky); }
.ab-red__list { display: grid; gap: 1.1rem; }
.ab-red__list li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.ab-red__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-red__list svg { grid-row: 1 / 3; color: var(--sky); margin-top: .25rem; }
.ab-red__list h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff; margin-bottom: .25rem; }
.ab-red__list p { grid-column: 2; font-size: .95rem; line-height: 1.6; color: var(--on-wine-muted); margin: 0; }

/* Werkzeuge */
.ab-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.ab-tools li { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ab-tools b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: .2rem; }
.ab-tools span { font-size: .8rem; color: var(--ink-faint); }

@media (max-width: 900px) {
  .ab-head__grid, .ab-red__grid { grid-template-columns: 1fr; }
  .ab-polas { min-height: 360px; order: -1; }
}
@media (max-width: 560px) {
  .cv__item { grid-template-columns: 1fr; gap: .4rem; }
  .cv__jahr { padding-top: 0; }
  .ab-polas { min-height: 300px; }
}

/* 70. CASE WENDT ========================================================== */
/* Nur die Bausteine, die das Case-Template noch nicht hatte. Alles andere
   (cs-head, cs-frame, cs-tabs, tree, colors, specs, cs-cta) wird geerbt. */

/* Hinweis auf das Konzeptprojekt */
.wd-badge { display: inline-flex; align-items: center; gap: .5rem; margin: 1.2rem 0 0; padding: .5rem .9rem; border-radius: var(--r-xs); background: var(--wine); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
.wd-badge svg { flex: none; opacity: .85; }
.wd-badge--inline { margin-top: 1rem; background: var(--wine-tint); color: var(--wine); font-weight: 600; letter-spacing: 0; line-height: 1.5; text-align: left; }

.wd-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.wd-sub { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 1.1rem; }

/* Archetypen, Zielgruppen, Werte */
.wd-cards { display: grid; gap: clamp(.8rem, 1.4vw, 1.1rem); }
.wd-cards--5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wd-cards--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.wd-cards li { position: relative; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.wd-cards li:hover { border-color: var(--wine); transform: translateY(-3px); }
.wd-cards b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: -.01em; margin-bottom: .35rem; }
.wd-cards span { font-size: .92rem; line-height: 1.6; color: var(--ink-muted); }
.wd-cards svg { color: var(--wine); margin-bottom: .7rem; }
.wd-cards__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: .6rem; }
.wd-cards--werte li { background: var(--bg); }

/* Kernfrage */
.wd-quote { margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: clamp(1.6rem, 3vw, 2.4rem) 0 0; border-top: 2px solid var(--wine); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); line-height: 1.3; letter-spacing: -.02em; color: var(--ink); max-width: 30ch; }

/* Positionierung und Claim */
.wd-position { font-size: 1rem; line-height: 1.7; }
.wd-claim { display: grid; gap: .8rem; justify-items: center; text-align: center; margin: clamp(2rem, 4vw, 3.2rem) 0; padding: clamp(2rem, 4vw, 3rem) 1rem; border-block: 1px solid var(--line); }
.wd-claim > span { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.wd-claim em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); line-height: 1.05; color: var(--wine); }
.wd-leitsatz { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: 1.6rem; font-size: .97rem; color: var(--ink-muted); }
.wd-leitsatz svg { color: var(--wine); flex: none; }
.wd-leitsatz strong { color: var(--ink); }

/* Struktur: Sitemap und Pfad nebeneinander */
.wd-struktur { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.tree__item--wichtig { border-color: var(--wine); background: var(--wine-tint); }
.tree__item--extern { border-style: dashed; }
.tree__item--extern i { margin-left: auto; font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

.wd-pfad { display: grid; gap: .6rem; counter-reset: schritt; }
.wd-pfad li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.wd-pfad li:not(:last-child)::after { content: ''; position: absolute; left: 1.85rem; bottom: -.6rem; width: 1.5px; height: .6rem; background: var(--line-strong); }
.wd-pfad__n { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--wine); color: #fff; font-size: .76rem; font-weight: 700; }
.wd-pfad b { font-size: 1rem; }
.wd-pfad span:last-child { grid-column: 2; font-size: .82rem; color: var(--ink-muted); }

/* Bildergalerien */
.wd-galerie { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.wd-galerie--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wd-galerie--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.wd-galerie figure { margin: 0; }
.wd-galerie img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-alt); }
.wd-galerie figcaption { margin-top: .6rem; font-size: .78rem; color: var(--ink-faint); }
.wd-phones { margin-top: clamp(1.2rem, 2.5vw, 2rem); justify-items: start; }
.wd-phones .cs-phone figcaption { color: var(--ink-faint); }

/* Zwei Richtungen */
.wd-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: clamp(2rem, 3.5vw, 3rem); }
.wd-richtung { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.wd-richtung--gewaehlt { border-color: var(--wine); box-shadow: 0 16px 40px rgba(120, 2, 14, .08); }
.wd-richtung--verworfen { opacity: .82; }
.wd-richtung--verworfen:hover { opacity: 1; }
.wd-richtung__marke { display: inline-block; padding: .28rem .65rem; border-radius: var(--r-xs); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wd-richtung--gewaehlt .wd-richtung__marke { background: var(--wine); color: #fff; }
.wd-richtung--verworfen .wd-richtung__marke { background: var(--bg-alt); color: var(--ink-faint); }
.wd-richtung h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; margin: .7rem 0 .4rem; }
.wd-richtung header p { font-size: .95rem; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.wd-richtung figure { margin: 0; }
.wd-richtung figure img { display: block; width: 100%; height: auto; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--bg-alt); }
.wd-richtung figcaption { margin-top: .45rem; font-size: .74rem; color: var(--ink-faint); }
.wd-richtung .colors { grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: auto; }
.wd-richtung .color-swatch__box { aspect-ratio: 1; margin-bottom: .45rem; box-shadow: none; border: 1px solid var(--line); }
.wd-richtung .color-swatch__hex { font-size: .62rem; letter-spacing: 0; }
.wd-richtung .color-swatch__role { font-size: .62rem; }
.wd-richtung__typo { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-muted); margin: 0; }
.wd-richtung__typo svg { color: var(--wine); flex: none; }

.wd-entscheidung { margin-top: clamp(1.4rem, 2.5vw, 2rem); padding: clamp(1.4rem, 2.6vw, 2.2rem); border-radius: var(--r-md); background: var(--sky-soft); border: 1px solid var(--sky); }
.wd-entscheidung h3 { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: .8rem; }
.wd-entscheidung h3 svg { color: var(--wine); }
.wd-entscheidung p { font-size: 1rem; line-height: 1.7; color: var(--ink-muted); margin: 0 0 .8rem; max-width: 62ch; }
.wd-entscheidung p:last-child { margin-bottom: 0; }

/* Zielgroessen */
.wd-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.wd-zahlen li { padding: 1.4rem 1.5rem; border-top: 2px solid var(--wine); background: var(--bg); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.wd-zahlen b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; color: var(--wine); margin-bottom: .6rem; }
.wd-zahlen span { font-size: .95rem; line-height: 1.6; color: var(--ink-muted); }
.wd-schluss { margin-top: clamp(2rem, 3.5vw, 3rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.8rem); line-height: 1.35; letter-spacing: -.02em; color: var(--ink); max-width: 44ch; }
.wd-schluss em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--wine); }

@media (max-width: 900px) {
  .wd-struktur { grid-template-columns: 1fr; }
  .wd-duo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wd-richtung .colors { grid-template-columns: repeat(3, 1fr); }
  .wd-cards--5, .wd-cards--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   71 · Lightbox
   ============================================================ */

/* Auslöser: der Button ersetzt den Bildrahmen, ohne ihn zu verändern */
.zoom { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: zoom-in; border-radius: var(--r-xs); }
.zoom > img { display: block; }
.zoom__lupe { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: var(--r-xs); background: rgba(20, 21, 26, .72);
  color: #fff; opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.zoom:hover .zoom__lupe, .zoom:focus-visible .zoom__lupe { opacity: 1; transform: translateY(0); }
.zoom:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

/* Overlay */
html.lb-offen, html.lb-offen body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(12, 13, 17, .92);
  opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.lb.is-auf { opacity: 1; }
.lb[hidden] { display: none; }
.lb__flaeche { max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column;
  align-items: center; gap: .9rem; }
.lb__bild { display: block; max-width: 100%; max-height: calc(100vh - 7rem); width: auto; height: auto;
  object-fit: contain; border-radius: var(--r-xs); background: #fff; }
.lb__bu { margin: 0; color: rgba(255, 255, 255, .72); font-size: .82rem; text-align: center; }
.lb__bu[hidden] { display: none; }
.lb__zu { position: absolute; top: clamp(.8rem, 2.4vw, 1.5rem); right: clamp(.8rem, 2.4vw, 1.5rem);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.lb__zu:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .46); }
.lb__zu:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lb, .zoom__lupe { transition: none; }
}


/* ============================================================
   72 · Wendt: Kurz & knapp, drei Blöcke unter dem Claim
   ============================================================ */
.wd-kurz { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: clamp(2rem, 4vw, 3rem); }
.wd-kurz > div { padding-top: 1.1rem; border-top: 1px solid var(--line-strong); }
.wd-kurz h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; margin: 0 0 .55rem; }
.wd-kurz p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-muted); }
@media (max-width: 760px) { .wd-kurz { grid-template-columns: 1fr; } }


/* ============================================================
   73 · Wendt: Hero im Glaskasten, dünn und ohne Hintergrund
   ============================================================ */
.wd-glas { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem); background: var(--bg); }
.wd-glas__kasten { padding: .45rem; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .55); border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 60px rgba(20, 21, 26, .10); }
.wd-glas__kasten .cs-frame { margin: 0; max-width: none; background: #fff; border: 1px solid var(--line);
  box-shadow: none; }
.wd-glas__kasten .cs-frame__bar { background: #fff; border-bottom: 1px solid var(--line); padding: .55rem .8rem; }
.wd-glas__kasten .cs-frame__bar i { background: var(--line-strong); }
.wd-glas__kasten .cs-frame__url { color: var(--ink-muted); }
.wd-glas__kasten .cs-frame img { display: block; width: 100%; height: auto; }

/* Kompakter Kopf: kleinere H1, weniger Luft, damit der Case schneller kommt */
.cs-head--kompakt { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.cs-head--kompakt .cs-title { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem); max-width: 26ch; margin-bottom: .8rem; }
.cs-head--kompakt .cs-lead { margin-bottom: 1.6rem; }
.cs-head--kompakt .cs-meta { padding-block: 1.1rem; }

/* ============================================================
   74 · Überschriften-Deckel: H1 maximal 45px, H2 maximal 32px
   ============================================================ */
:root { --fs-h1: clamp(2rem, 1.4rem + 2.2vw, 45px); --fs-h2: clamp(1.5rem, 1.1rem + 1.5vw, 32px); }
.ah-h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 32px); }
.cs-title { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 45px); }

/* ============================================================
   75 · Hohe Seiten-Screenshots: im Browserfenster scrollen
   ============================================================ */
.cs-frame--scroll { position: relative; }
.cs-frame__scroll { max-height: min(74vh, 800px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.cs-frame__scroll::-webkit-scrollbar { width: 8px; }
.cs-frame__scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 4px; }
.cs-frame__scroll:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.cs-frame__scroll .zoom, .cs-frame__scroll img { display: block; }
.cs-frame__scroll .zoom__lupe { position: sticky; bottom: .6rem; float: right; margin: -2.7rem .6rem 0 0; }
.cs-frame__hint { position: absolute; left: 50%; bottom: .9rem; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: var(--r-xs);
  background: rgba(20, 21, 26, .8); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; pointer-events: none; transition: opacity var(--t-base) var(--ease); }
.cs-frame--scroll.is-gescrollt .cs-frame__hint { opacity: 0; }

/* Lightbox: hohe Bilder in voller Breite, im Overlay scrollbar */
.lb--hoch .lb__flaeche { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; align-items: stretch; }
.lb--hoch .lb__bild { max-height: none; width: min(100%, 1100px); margin-inline: auto; }
.lb--hoch .lb__bu { position: sticky; bottom: 0; padding: .5rem 0; background: rgba(12, 13, 17, .85); }
@media (prefers-reduced-motion: reduce) { .cs-frame__hint { transition: none; } }

/* H2-Deckel auch für die großen Abschlusstitel und den Split-Block */
.split-feature h2, .cs-cta__title, .ah-cta__title, .ab-red__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 32px); }
.ab-title { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 45px); }
/* Deckel für alle Seiten, auch der Hero der Startseite */
.ar-title, .hero h1, h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 45px); }
h2:not(.pcard__name) { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 32px); }
/* Auch die Titel von Arbeiten und Kontakt: 45px Deckel */
.cf-h1  { font-size: clamp(2rem, 1.4rem + 2.2vw, 45px) !important; }

/* ============================================================
   76 · Startseite V2: zwei Weichen, drei Pakete, FAQ
   ============================================================ */
.v2-hinweis { margin: 1.4rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink-muted); max-width: 62ch; }

.tueren { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.tuer { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2.3rem); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg); }
.tuer--agentur { background: var(--sky-soft); border-color: transparent; }
.tuer--unternehmen { background: var(--wine-tint); border-color: transparent; }
.tuer__kicker { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wine); margin: 0 0 .8rem; }
.tuer h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .7rem; }
.tuer__sub { margin: 0 0 1.3rem; font-size: 1.02rem; line-height: 1.6; color: var(--ink-muted); }
.tuer__liste { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .55rem; flex: 1; }
.tuer__liste li { display: flex; gap: .6rem; align-items: flex-start; font-size: .97rem; line-height: 1.55; }
.tuer__liste svg { flex: none; margin-top: .22rem; color: var(--wine); }
.tuer .btn { align-self: flex-start; }

.lv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.lv3__paket { position: relative; padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg); }
.lv3__paket--voll { border-color: var(--wine); box-shadow: 0 16px 40px rgba(120, 2, 14, .08); }
.lv3__n { display: block; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 2.2rem; line-height: 1; color: var(--wine); margin-bottom: .8rem; }
.lv3__paket h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em; margin: 0 0 .6rem; }
.lv3__paket > p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }
.lv3__paket ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.lv3__paket li { position: relative; padding-left: 1rem; font-size: .92rem; line-height: 1.5; }
.lv3__paket li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--wine); }

.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__liste details { border-top: 1px solid var(--line); }
.faq__liste details:last-child { border-bottom: 1px solid var(--line); }
.faq__liste summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.faq__liste summary::-webkit-details-marker { display: none; }
.faq__liste summary::after { content: "+"; flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-weight: 500; color: var(--wine); transition: transform var(--t-fast) var(--ease); }
.faq__liste details[open] summary::after { transform: rotate(45deg); }
.faq__liste summary:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.faq__liste details p { margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.65; color: var(--ink-muted); max-width: 60ch; }

@media (max-width: 900px) { .tueren, .lv3 { grid-template-columns: 1fr; } .faq { grid-template-columns: 1fr; } }
/* Honeypot-Feld des Kontaktformulars, für Menschen unsichtbar */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* 90. EINHEITLICHKEIT ===================================================== */
/* Alle Subheadlines sehen gleich aus: Weinrot, Versalien, kleines Quadrat davor */
.eyebrow, .tuer__kicker { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wine); margin: 0 0 1.1rem; padding: 0; background: none; border: 0; }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 1px; background: var(--wine) !important; flex: none; }
.eyebrow--onwine, .eyebrow--light, .section--carbon .eyebrow, .band .eyebrow { color: #fff; }
.eyebrow--onwine::before, .eyebrow--light::before, .section--carbon .eyebrow::before, .band .eyebrow::before { background: #fff !important; }

/* FAQ: saubere Karten mit Innenabstand */
.wrap.faq { max-width: var(--wrap); }
.faq__liste { display: grid; gap: .75rem; }
.faq .faq__liste details { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; padding: 0 1.4rem; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.faq .faq__liste details:last-child { border-bottom: 1px solid var(--line); }
.faq .faq__liste details:hover { border-color: var(--line-strong); }
.faq .faq__liste details[open] { border-color: var(--wine); box-shadow: 0 10px 30px -18px rgba(120,2,14,.35); }
.faq .faq__liste summary { padding: 1.2rem 0; font-size: 1.08rem; line-height: 1.4; color: var(--ink); }
.faq .faq__liste summary::after { width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.1rem; }
.faq .faq__liste details[open] summary::after { background: var(--wine); border-color: var(--wine); color: #fff; }
.faq .faq__liste details p { margin: -.2rem 0 1.3rem; font-size: 1rem; color: var(--ink-muted); }

/* Kreiselemente: dezente Ringe als wiederkehrendes Motiv */
.has-rings { position: relative; overflow-x: clip; isolation: isolate; }
.has-rings::before, .has-rings::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.has-rings::before { width: clamp(220px, 26vw, 400px); aspect-ratio: 1; right: -13%; top: 4%; border: 1px solid var(--sky); background: radial-gradient(circle, rgba(207,232,255,.14), transparent 65%); opacity: .6; }
.has-rings::after { width: clamp(100px, 11vw, 170px); aspect-ratio: 1; right: 3%; top: calc(4% + clamp(170px, 20vw, 310px)); border: 1px solid var(--sky); border-top-color: rgba(120,2,14,.45); opacity: .55; animation: kr-spin 30s linear infinite; }

.has-rings--left::before { right: auto; left: -15%; }
.has-rings--left::after { right: auto; left: 2%; }
.has-rings--dark::before, .has-rings--dark::after { border-color: rgba(207,232,255,.16); background: none; }
.has-rings--dark::after { border-top-color: rgba(255,255,255,.4); }
@media (max-width: 760px) { .has-rings::after { display: none; } .has-rings::before { right: -30%; } .has-rings--left::before { left: -30%; } }
@media (prefers-reduced-motion: reduce) { .has-rings::after { animation: none; } }


/* 91. KAWASAKI HEINRICH · Instagram-Serie ================================= */
.kh-post { margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px -28px rgba(0,0,0,.55); background: #0E0E0E; }
.kh-post img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.kh-fan { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: clamp(.8rem, 2.4vw, 2rem); max-width: 980px; margin-inline: auto; padding-block: clamp(1rem, 3vw, 2.5rem); }
.kh-fan__l { transform: rotate(-4deg) translateY(6%); }
.kh-fan__r { transform: rotate(4deg) translateY(6%); }
.kh-fan__m { position: relative; z-index: 1; }
/* Wie das Instagram-Profil: drei Spalten, damit Gruen, Grau, Schwarz untereinander stehen */
.kh-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 760px; margin-inline: auto; }
.kh-feed .kh-post { box-shadow: none; border-radius: 0; }
.kh-feed__more { grid-column: span 2; display: grid; place-content: center; text-align: center; gap: .4rem; color: #fff; border: 1.5px solid rgba(90,248,6,.4); background: radial-gradient(circle at 50% 50%, rgba(90,248,6,.14), transparent 70%); }
.kh-feed__more b { font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: .04em; text-transform: uppercase; }
.kh-feed__more span { color: #5AF806; font-size: .95rem; }
.kh-system { align-items: center; }
.kh-system .kh-post { max-width: 460px; }
.kh-parts { list-style: none; counter-reset: kh; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.kh-parts li { counter-increment: kh; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .9rem; }
.kh-parts li::before { content: counter(kh); grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--wine); color: #fff; font-weight: 700; font-size: .95rem; }
.kh-parts b { color: var(--ink); font-size: 1.05rem; }
.kh-parts span { color: var(--ink-muted); }
.kh-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.kh-trio h3 { margin: 1.1rem 0 .35rem; font-size: 1.15rem; color: var(--ink); }
.kh-trio p { margin: 0; color: var(--ink-muted); }
@media (max-width: 860px) {
  .kh-trio { grid-template-columns: 1fr; max-width: 420px; }
  .kh-system .kh-post { margin-inline: auto; }
}
@media (max-width: 560px) {
  .kh-fan { grid-template-columns: 1fr; max-width: 320px; }
  .kh-fan__l, .kh-fan__r { display: none; }
}

/* Projektkarte mit Hochformat-Posts: drei Posts mittig rechts, Titel bleibt frei */
.pcard--posts .pcard__brand { max-width: 38%; }
.pcard--posts .pcard__shot { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; bottom: auto; width: 20.5%; }
.pcard--posts .pcard__shot--back  { top: 28%; right: 37%; transform: rotate(-4deg); }
.pcard--posts .pcard__shot--front { top: 24%; right: 18.5%; width: 23.5%; z-index: 2; }
.pcard--posts .pcard__shot--mid   { top: 28%; right: 1.5%; transform: rotate(4deg); }
.pcard--posts:hover .pcard__shot--back  { transform: rotate(-6deg) translate(-4px, -4px); }
.pcard--posts:hover .pcard__shot--front { transform: translateY(-6px); }
.pcard--posts:hover .pcard__shot--mid   { transform: rotate(6deg) translate(4px, -4px); }

/* Wendt: Moodboard oben, Startseite unten, wie bei den anderen Karten */
.pcard--wendt .pcard__shot--back  { top: 8%; right: -10%; width: 54%; }
.pcard--wendt .pcard__shot--front { top: auto; bottom: 8%; right: 6%; width: 50%; }

/* Karussell: Slide 1 und Slide 2 nebeneinander */
.kh-karussell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.8rem, 2.4vw, 2rem); max-width: 860px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.kh-karussell figcaption { padding: .7rem .9rem; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 700; border-top: 1px solid var(--line); }
.kh-karussell__pfeil { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--wine); color: #fff; }
.kh-fragen { list-style: none; margin: 1rem 0 1.2rem; padding: 0; display: grid; gap: .55rem; }
.kh-fragen li { position: relative; padding-left: 1.3rem; color: var(--ink); font-weight: 600; }
.kh-fragen li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 1px; background: var(--wine); }
@media (max-width: 620px) { .kh-karussell { grid-template-columns: 1fr; max-width: 360px; } .kh-karussell__pfeil { justify-self: center; transform: rotate(90deg); } }

/* Ueber mich: Werkzeuge als kompakte Chips */
.ab-tools-sec { padding-block: clamp(3rem, 6vw, 5rem); }
.ab-chips { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.ab-chips li { padding: .6rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: #fff; color: var(--ink); font-weight: 600; }

/* 92. MOBIL-FEINSCHLIFF ================================================== */
@media (max-width: 760px) {
  .ah-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cf-dotlink { white-space: nowrap; }
  .pcard--posts .pcard__brand { max-width: 40%; }
  .pcard--posts .pcard__shot { width: 19%; }
  .pcard--posts .pcard__shot--back  { right: 34%; }
  .pcard--posts .pcard__shot--front { right: 16.5%; width: 22%; }
  .pcard--posts .pcard__shot--mid   { right: 1%; }
}
@media (max-width: 760px) {
  /* Startseite: Text neben dem Foto braucht auf dem Handy Seitenabstand */
  .cf-about__text { padding-inline: var(--gutter); }
  /* "lass uns loslegen" nicht am Rand kleben lassen */
  .cf-cta__giant { padding-inline: var(--gutter); margin-left: 0; }
  /* Kawasaki: Posts auf dem Handy kompakter */
  .kh-system .kh-post { max-width: 280px; }
  .kh-karussell { max-width: 300px; }
  .kh-trio { max-width: none; gap: 1.2rem; }
  .kh-trio > div { display: grid; grid-template-columns: 38% 1fr; column-gap: 1rem; align-items: center; }
  .kh-trio .kh-post { grid-row: span 2; }
  .kh-trio h3 { margin: 0 0 .3rem; align-self: end; }
  .kh-trio p { align-self: start; font-size: .95rem; }
}
.check span a { text-decoration: underline; text-underline-offset: 3px; }
/* Mobiles Menue: Kontakt-Button sichtbar und weinrot wie oben rechts */
@media (max-width: 920px) {
  .header .nav > a.btn { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; padding: .4rem .4rem .4rem 1.35rem; border: 0; border-radius: var(--r-pill); background: var(--wine); color: #fff; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; }
  .header .nav > a.btn .btn__dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-xs); background: #fff; color: var(--wine); }
}