/* =========================================================
   JECK MEDIA — Stylesheet
   1. Schriften        6. Hero
   2. Design-Tokens    7. Sektionen & Karten
   3. Basis            8. Formular
   4. Bausteine        9. Footer
   5. Header          10. Responsive
   ========================================================= */

/* ── 1. SCHRIFTEN (lokal gehostet, DSGVO-freundlich) ────── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* TEST: Nunito ersetzt Outfit + Inter */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2. DESIGN-TOKENS ───────────────────────────────────── */
:root {
  /* Markenfarben aus Logo & Entwurf */
  --cream: #FDFAF6;
  --cream-deep: #F6EFE4;
  --ink: #1D2233;
  /* Dunkelblau — Titel, Buttons, Projekt-Hintergrund */
  --ink-2: #262C41;
  /* eine Stufe heller, für Flächen im Dunkeln */
  --ink-soft: #565E72;
  --ink-faint: #868D9E;
  --line: rgba(29, 34, 51, .11);

  --red: #F5325A;
  --red-deep: #DE1F49;
  --green: #6ABB63;
  --green-light: #A9DE5C;

  --grad: linear-gradient(100deg, #F5325A 0%, #6ABB63 74%, #A9DE5C 100%);
  /* waagerecht — nur so passen Farbband und Skyline-Schürze nahtlos
     aneinander, egal wie hoch die beiden Flächen gerade sind.
     Die Stützstellen sind aus skyline2 ausgemessen: deren Verlauf ist
     etwas weicher als --grad, sonst bricht die Farbe an der Naht. */
  --grad-band: linear-gradient(to right, #E04357 0%, #C45958 20%, #A87F5E 40%,
      #94A169 60%, #7DBA72 80%, #A6CA69 100%);

  /* Parallax-Hub: wie weit die Silhouette beim Scrollen hochgewandert ist.
     Wird per JavaScript gesetzt und von Hero, Schürze und Farbband gelesen. */
  --hub: 0px;
  /* wie weit der Hero-Inhalt beim Scrollen zurückbleibt */
  --grad-soft: linear-gradient(100deg, rgba(245, 50, 90, .12) 0%, rgba(169, 222, 92, .14) 100%);
  --grad-text: linear-gradient(95deg, #F5325A 0%, #E0533F 35%, #6ABB63 75%, #8FD056 100%);

  --white: #FFFFFF;
  --shadow-sm: 0 2px 8px rgba(29, 34, 51, .06);
  --shadow: 0 12px 34px -14px rgba(29, 34, 51, .24);
  --shadow-lg: 0 30px 60px -28px rgba(29, 34, 51, .36);

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 36px;

  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --sp-section: clamp(72px, 10vw, 128px);

  --ease: cubic-bezier(.22, .72, .26, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── 3. BASIS ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0;
}

p {
  margin: 0
}

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

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px
}

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

.skip-link {
  position: fixed;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 0 0 12px 12px;
  transition: top .25s var(--ease);
}

.skip-link:focus {
  top: 0
}

/* Feature-Schalter: Bereiche ausblenden */
.feat-news-off [data-feature="news"] {
  display: none !important
}

/* Scroll-Fortschritt */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 120;
  pointer-events: none
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ── 4. BAUSTEINE ───────────────────────────────────────── */
.eyebrow {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}

.band .eyebrow {
  color: rgba(255, 255, 255, .85)
}

.btn {
  --bg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  padding: .92rem 1.65rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
    color .3s var(--ease), border-color .3s var(--ease);
}

.btn--solid {
  color: #fff;
  background: var(--ink);
  box-shadow: var(--shadow)
}

.btn--solid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad);
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg)
}

.btn--solid:hover::before {
  opacity: 1
}

.btn--ghost {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px)
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--red);
  color: var(--red)
}

.btn--sm {
  padding: .6rem 1.15rem;
  font-size: .9rem
}

.btn--block {
  width: 100%
}

.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: spin .7s linear infinite
}

.btn.is-busy .btn__spinner {
  display: block
}

.btn[disabled] {
  opacity: .65;
  pointer-events: none
}

@keyframes spin {
  to {
    rotate: 360deg
  }
}

/* Reveal-Animation */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none
}

/* ── 5. HEADER ──────────────────────────────────────────── */
/* Standard: die Leiste ist immer abgesetzt — heller als die Creme-Fläche
   der Seite, mit sichtbarer Kante und weichem Schatten. Das steht bewusst
   im CSS und nicht im JavaScript: so ist die Leiste auch dann sichtbar,
   wenn ein Browser eine alte Konfigurationsdatei aus dem Cache liefert. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, .90);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid rgba(29, 34, 51, .16);
  box-shadow: 0 10px 26px -18px rgba(29, 34, 51, .5);
  transition: background .35s var(--ease), box-shadow .35s var(--ease),
    border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}

/* Nur mit solidHeader:false — oben durchsichtig, setzt sich beim Scrollen ab */
.header-fade .site-header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

.header-fade .site-header.is-stuck {
  background: rgba(255, 255, 255, .90);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom-color: rgba(29, 34, 51, .16);
  box-shadow: 0 10px 26px -18px rgba(29, 34, 51, .5);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(.7rem, 1.6vw, 1.1rem)
}

.brand {
  position: relative;
  z-index: 2
}

.brand img {
  width: clamp(88px, 9vw, 116px);
  height: auto;
  transition: transform .4s var(--ease-out);
}

.brand:hover img {
  transform: scale(1.05) rotate(-1.5deg)
}

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(.4rem, 1.6vw, 1.6rem)
}

.nav a:not(.btn) {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-soft);
  padding: .45rem .15rem;
  position: relative;
  transition: color .25s var(--ease);
}

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .05rem;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--ease-out);
}

.nav a:not(.btn):hover,
.nav a:not(.btn).is-active {
  color: var(--ink)
}

.nav a:not(.btn):hover::after,
.nav a:not(.btn).is-active::after {
  transform: scaleX(1)
}

.burger {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between
}

.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s var(--ease)
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(9px) rotate(45deg)
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg)
}

/* ── 6. HERO ────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: clamp(110px, 14vh, 150px);
  padding-bottom: clamp(150px, 20vh, 230px);
  overflow: hidden;
  z-index: 2;
}

.hero__blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .28;
  animation: drift 18s var(--ease) infinite alternate;
}

.blob--red {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  background: var(--red);
  top: -8%;
  left: -10%
}

.blob--green {
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  background: var(--green-light);
  top: 6%;
  right: -12%;
  animation-delay: -8s
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1)
  }

  to {
    transform: translate3d(4%, 6%, 0) scale(1.12)
  }
}

/* Der Inhalt bleibt beim Scrollen zurück. Die Silhouette scrollt normal
   mit und schiebt sich dadurch von unten über Logo und Text. Vorteil
   gegenüber "Silhouette nach oben schieben": unter ihr entsteht kein
   Streifen, sie bleibt bündig am Farbband. */
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(var(--hub));
  will-change: transform;
}

/* Nur der Text blendet aus — das Logo verschwindet hinter der Silhouette.
   Als filter statt opacity, damit es sich nicht mit der Einblend-Animation
   (.reveal setzt ebenfalls opacity) in die Quere kommt. */
.hero .eyebrow,
.hero__claim,
.hero__sub,
.scroll-cue {
  filter: opacity(var(--hero-fade, 1))
}

.hero__logo img {
  width: clamp(240px, 34vw, 430px);
  filter: drop-shadow(0 22px 40px rgba(29, 34, 51, .14));
  transform-origin: 50% 55%;
  animation: pulse 4.2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.045)
  }
}

.hero__claim {
  font-size: clamp(2rem, 5.4vw, 3.85rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.025em;
  margin-top: clamp(.6rem, 2vw, 1.1rem);
  color: var(--ink);
}

.hero__claim .excl {
  color: var(--red);
  display: inline-block;
  animation: wiggle 3.4s var(--ease) infinite;
}

@keyframes wiggle {

  0%,
  88%,
  100% {
    transform: rotate(0)
  }

  92% {
    transform: rotate(-12deg)
  }

  96% {
    transform: rotate(9deg)
  }
}

.hero__sub {
  max-width: 52ch;
  margin-top: 1.1rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
}


.scroll-cue {
  margin-top: clamp(2rem, 5vh, 3.4rem);
  opacity: .55;
  transition: opacity .3s var(--ease);
}

.scroll-cue:hover {
  opacity: 1
}

.scroll-cue__mouse {
  display: block;
  width: 24px;
  height: 38px;
  border: 2px solid var(--ink-faint);
  border-radius: 14px;
  position: relative;
}

.scroll-cue__mouse span {
  position: absolute;
  top: 7px;
  left: 50%;
  translate: -50% 0;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--red);
  animation: cue 1.9s var(--ease) infinite;
}

@keyframes cue {
  0% {
    opacity: 0;
    transform: translateY(0)
  }

  30% {
    opacity: 1
  }

  70% {
    opacity: 1;
    transform: translateY(12px)
  }

  100% {
    opacity: 0;
    transform: translateY(14px)
  }
}

/* Skyline am Hero-Fuß (Parallax) */
/* Vordergrundebene: liegt über dem Hero-Inhalt, der dahinter wegscrollt. */
.skyline {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: max(980px, 100%);
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, 0);
}

.skyline img {
  width: 100%;
  display: block
}

/* ── 7. SEKTIONEN ───────────────────────────────────────── */
.section {
  padding-block: var(--sp-section);
  position: relative;
  overflow-x: clip
}

.section--tint {
  background: var(--cream-deep)
}

.section--dark {
  background: var(--ink);
  color: rgba(255, 255, 255, .76)
}

.section--dark .section__title {
  color: #fff
}

.section--dark .eyebrow {
  color: var(--green-light)
}

/* Der Abstand zum Inhalt darunter laeuft ueber --head-gap. Ohne Angabe
   gilt der Standardwert in der Klammer; einzelne Sektionen koennen
   --head-gap bei sich selbst setzen und damit nur ihren eigenen
   Abstand veraendern. */
.section__head {
  max-width: 680px;
  margin-bottom: var(--head-gap, clamp(2.6rem, 5vw, 4rem));
  position: relative;
  z-index: 1
}

.section__head--center {
  margin-inline: auto;
  text-align: center
}

.section__title {
  font-size: clamp(1.9rem, 4.2vw, 3.15rem);
  font-weight: 800;
  display: inline-block;
  position: relative;
  padding-bottom: .46em
}

.section__lead {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 1.07rem;
  max-width: 54ch
}

.section--dark .section__lead {
  color: rgba(255, 255, 255, .7)
}

.section__head--center .section__lead {
  margin-inline: auto
}

/* Narrenkappe als Aufzählungszeichen vor der Kleinüberschrift */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem
}

.section__head--center .eyebrow {
  justify-content: center
}

.hero .eyebrow {
  justify-content: center
}

.cap {
  width: 15px;
  height: 13px;
  flex: none;
  background: currentColor;
  clip-path: polygon(50% 0, 62% 42%, 88% 14%, 84% 62%, 100% 55%, 88% 100%, 12% 100%, 0 55%, 16% 62%, 12% 14%, 38% 42%);
}

/* Handgezeichnete Unterstreichung, zeichnet sich beim Einblenden */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

.mark {
  position: absolute;
  left: 0;
  bottom: .06em;
  width: min(260px, 68%);
  height: .26em;
  pointer-events: none;
}

.section__head--center .mark {
  left: 50%;
  transform: translateX(-50%)
}

.mark svg {
  display: block;
  width: 100%;
  height: 100%
}

.mark path {
  fill: none;
  stroke: url(#jmGrad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.1s .25s var(--ease-out);
}

.reveal.is-in .mark path {
  stroke-dashoffset: 0
}

/* Konfetti-Streuung im Hintergrund */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}

.confetti i {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  opacity: .5;
  animation: confetti-float 9s var(--ease) infinite alternate;
}

.confetti i:nth-child(odd) {
  border-radius: 50%
}

.confetti i:nth-child(3n) {
  background: var(--red)
}

.confetti i:nth-child(3n+1) {
  background: var(--green-light)
}

.confetti i:nth-child(3n+2) {
  background: var(--green)
}

.confetti i:nth-child(1) {
  left: 6%;
  top: 14%;
  transform: rotate(18deg);
  animation-delay: -1s
}

.confetti i:nth-child(2) {
  left: 22%;
  top: 68%;
  width: 14px;
  height: 6px;
  animation-delay: -3s
}

.confetti i:nth-child(3) {
  left: 38%;
  top: 8%;
  animation-delay: -5s
}

.confetti i:nth-child(4) {
  left: 52%;
  top: 82%;
  width: 8px;
  height: 8px;
  animation-delay: -2s
}

.confetti i:nth-child(5) {
  left: 67%;
  top: 22%;
  width: 12px;
  height: 5px;
  animation-delay: -6s
}

.confetti i:nth-child(6) {
  left: 81%;
  top: 60%;
  animation-delay: -4s
}

.confetti i:nth-child(7) {
  left: 93%;
  top: 30%;
  width: 7px;
  height: 7px;
  animation-delay: -7s
}

.confetti i:nth-child(8) {
  left: 14%;
  top: 40%;
  width: 6px;
  height: 6px;
  animation-delay: -8s
}

.confetti i:nth-child(9) {
  left: 74%;
  top: 88%;
  width: 11px;
  height: 5px;
  animation-delay: -2.5s
}

.confetti i:nth-child(10) {
  left: 45%;
  top: 46%;
  width: 7px;
  height: 7px;
  animation-delay: -5.5s
}

.confetti--light i {
  opacity: .34
}

@keyframes confetti-float {
  from {
    transform: translateY(0) rotate(0)
  }

  to {
    transform: translateY(-26px) rotate(140deg)
  }
}

/* Farbband / Manifest */
.band {
  position: relative;
  z-index: 1;
  color: #fff;
  background: var(--grad-band);
  padding-top: clamp(52px, 6.5vw, 84px);
  padding-bottom: clamp(64px, 9vw, 104px);
}

.band__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.band__claim {
  font-size: clamp(1.6rem, 4vw, 2.9rem);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .14);
}

.band__text {
  max-width: 60ch;
  margin-top: 1.3rem;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: rgba(255, 255, 255, .94)
}

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.4rem, 5vw, 4rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem)
}

.band__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
  margin-top: clamp(2.2rem, 4.5vw, 3rem)
}

/* Auf dem Farbband braucht der zweite Button helle Konturen */
.band .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(4px);
}

.band .btn--ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff
}

.band .btn--solid {
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5)
}

.fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 150px
}

.fact strong {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fact span {
  font-size: .86rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-top: .5rem
}

/* Laufband */
.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  padding-block: .85rem
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite
}

.marquee__track span {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee i {
  font-style: normal;
  color: var(--red);
  padding-inline: .35em
}

/* Die Schrittweite entspricht genau EINEM Schlagwort-Satz. main.js setzt
   sie passend zur Anzahl der Kopien — sonst reißt das Band bei breiten
   Fenstern ab und springt sichtbar zurück. */
@keyframes marquee {
  to {
    transform: translateX(calc(var(--marquee-step, 50%) * -1))
  }
}


/* ── 7a. LEISTUNGEN: Leistungskarten ────────────────────── */
/* Vier gleichwertige Karten. Die Bausteine sind von anderen Stellen der
   Seite geborgt: Kicker wie die .eyebrow, Stichwortzeile mit roten
   Trennpunkten wie im .marquee, angeschnittene Kontur-Grafik wie bei den
   Initialen im Team, und die Verlaufskante zeichnet sich von links wie
   die Fortschrittslinie zwischen den Bierdeckeln. */
/* ▼▼ REGLER: Abstand zwischen Ueberschrift und Karten ▼▼
   Gilt nur fuer "Was wir machen". Startwert = bisheriger Abstand.
   Feste Zahl geht auch, z. B.  --head-gap:2rem;                 */
#leistungen {
  --head-gap: clamp(2.6rem, 5vw, 4rem)
}

/* ▲▲ ------------------------------------------------------ ▲▲ */

.crafts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.9rem, 1.8vw, 1.4rem);
}

.craft {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
    border-color .4s var(--ease);
}

.craft:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: transparent
}

/* Verlaufskante oben — im Ruhezustand nicht da, beim Hover zieht sie
   sich von links durch. Gleiche Machart wie .mats__rail i. */
.craft::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease-out);
}

.craft:hover::before {
  transform: scaleX(1)
}

.craft__kicker {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .55rem;
}

.craft h3 {
  font-size: 1.28rem;
  margin-bottom: .5rem
}

.craft p {
  color: var(--ink-soft);
  font-size: .97rem
}

/* Stichwortzeile — sitzt immer unten, damit sie über alle vier Karten
   hinweg auf einer Linie liegt, auch wenn die Texte ungleich lang sind. */
.craft__kw {
  margin-top: auto;
  padding-top: 1.4rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink);
}

.craft__kw i {
  font-style: normal;
  color: var(--red);
  padding-inline: .4em
}

/* Geometrisches Zeichen im Hintergrund — nur Kontur, unten rechts vom
   Kartenrand angeschnitten, zurückhaltend. */
.craft__mark {
  /* Die Kontur ist mit einem SVG-Verlauf gezeichnet, dessen drei Farbstopps
     hier gesetzt werden. Im Ruhezustand stehen alle drei auf --ink, das
     ergibt exakt das frühere einfarbige Grau. Beim Hover wandern sie auf
     die Markenfarben — weil stop-color eine echte Farbe ist, blendet das
     weich über, statt umzuspringen. */
  --m1: var(--ink);
  --m2: var(--ink);
  --m3: var(--ink);
  position: absolute;
  right: -6%;
  bottom: -14%;
  z-index: -1;
  pointer-events: none;
  width: clamp(140px, 40%, 225px);
  aspect-ratio: 1;
  color: var(--ink);
  opacity: .085;
  transition: transform .6s var(--ease-out), opacity .45s var(--ease);
}

.craft__mark svg {
  width: 100%;
  height: 100%;
  display: block
}

.craft__mark stop {
  transition: stop-color .5s var(--ease)
}

.craft__mark stop:nth-child(1) {
  stop-color: var(--m1)
}

.craft__mark stop:nth-child(2) {
  stop-color: var(--m2)
}

.craft__mark stop:nth-child(3) {
  stop-color: var(--m3)
}

/* Dieselben Stopps wie --grad, damit das Zeichen und die Oberkante der
   Karte denselben Verlauf zeigen. */
.craft:hover .craft__mark {
  transform: rotate(-6deg) scale(1.07);
  opacity: .32;
  --m1: #F5325A;
  --m2: #6ABB63;
  --m3: #A9DE5C;
}


/* ── 7b. PROJEKTE: Showcase-Zeilen ──────────────────────── */
.showcases {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1
}

/* Kein Rahmen — nur eine feine Linie zwischen den Projekten.
   WICHTIG für die Animation: beide Zustände müssen dieselbe Anzahl und
   dieselbe Art von Spalten haben (hier durchgehend minmax mit fr-Maximum).
   Sonst kann der Browser nicht dazwischen rechnen und es springt. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  column-gap: 0;
  /* NICHT zentrieren: sonst rückt der linke Block bei jeder Höhenänderung
     der Detailspalte vertikal nach — das wirkt wie ein Ruckeln. */
  align-items: start;
  padding-block: clamp(2.4rem, 5vw, 4.2rem);
  contain: layout;
  /* das Innenleben strahlt nicht in den Rest der Seite aus */
  transition: grid-template-columns .6s var(--ease-out),
    column-gap .6s var(--ease-out);
}

.showcase+.showcase {
  border-top: 1px solid rgba(255, 255, 255, .09)
}

.showcase:first-child {
  padding-top: 0
}

.showcase:last-child {
  padding-bottom: 0
}

/* Aufgeklappt: das Projekt rückt an den Rand, daneben die Details */
.showcase.is-open {
  grid-template-columns: minmax(0, .55fr) minmax(0, .45fr);
  column-gap: clamp(1.8rem, 3.5vw, 3.4rem);
}

/* Jede zweite Zeile spiegelverkehrt */
.showcase:nth-child(even) {
  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr)
}

.showcase:nth-child(even).is-open {
  grid-template-columns: minmax(0, .45fr) minmax(0, .55fr);
}

.showcase:nth-child(even) .showcase__detail {
  order: 1
}

.showcase:nth-child(even) .showcase__main {
  order: 2
}

.showcase__main {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  min-width: 0;
}

/* Gespiegelte Zeile: der Text steht hier in der ERSTEN Spalte, also
   müssen auch die Spaltenbreiten getauscht werden — sonst bekommt der
   Text die schmale und das Icon die breite Spalte. */
.showcase:nth-child(even) .showcase__visual {
  order: 2
}

.showcase:nth-child(even) .showcase__main {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

.showcase__visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.15;
  min-width: 0;
}

.showcase__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(170px, 19vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  opacity: .24;
  filter: blur(38px);
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: transform .8s var(--ease-out), opacity .6s var(--ease);
}

.showcase:hover .showcase__halo {
  transform: translate(-50%, -50%) scale(1.14);
  opacity: .34
}

.showcase__visual img {
  --drift: 0px;
  position: relative;
  width: clamp(105px, 13vw, 155px);
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, .42));
  transform: translateY(var(--drift));
  transition: scale .7s var(--ease-out), rotate .7s var(--ease-out);
  will-change: transform;
}

.showcase:hover .showcase__visual img {
  rotate: -3deg;
  scale: 1.05
}

.showcase__body {
  min-width: 0;
  position: relative;
  isolation: isolate
}

/* Die Textspalte ist breiter als der Text selbst — .showcase__text ist
   bewusst gedeckelt, damit der Absatz auf- und zugeklappt gleich
   umbricht. In den normalen Zeilen faellt der Ueberschuss unsichtbar
   an den rechten Seitenrand. In den GESPIEGELTEN Zeilen steht der Text
   aber links, dort landet der Ueberschuss als Loch zwischen Text und
   Icon. Deshalb rueckt der Block hier ans Ende seiner Spalte. */
.showcase:nth-child(even) .showcase__body {
  margin-left: auto
}

/* Gezeichnete Ziffer im Hintergrund — gleiche Machart wie die Initialen
   im Team, etwa so hoch wie die drei Überschriftenzeilen zusammen. */
.showcase__ghost {
  position: absolute;
  left: -.05em;
  top: -.1em;
  z-index: -1;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(5.5rem, 10vw, 8.5rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  opacity: .32;
  user-select: none;
  pointer-events: none;
}

.showcase__kicker {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}

.showcase__body h3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: #fff
}

.showcase__claim {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--accent);
  margin-block: .45rem 1rem;
}

/* Die Breite ist so gedeckelt, dass der Absatz im auf- und im
   zugeklappten Zustand GLEICH umbricht. Sonst springt er mitten in der
   Animation von 3 auf 4 Zeilen und die ganze Spalte ruckt nach —
   das sieht aus wie eine zweite Animationsstufe.
   Der Wert entspricht der Spaltenbreite im aufgeklappten Zustand. */
.showcase__text {
  color: rgba(255, 255, 255, .74);
  max-width: calc(.3 * (min(1180px, 100vw) - 80px) - 30px);
}

/* Schalter "Mehr dazu" — der Pfeil zeigt dorthin, wo die Infos aufgehen */
.showcase__link {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.6rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color .3s var(--ease);
}

.showcase__link-label {
  border-bottom: 2px solid transparent;
  padding-bottom: .15rem;
  transition: border-color .3s var(--ease);
}

.showcase__link:hover {
  color: var(--accent)
}

.showcase__link:hover .showcase__link-label {
  border-bottom-color: var(--accent)
}

.showcase__link-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  transition: transform .6s var(--ease-out), background .3s var(--ease),
    color .3s var(--ease);
}

.showcase__link-icon::before {
  content: "";
  width: 7px;
  height: 7px;
  translate: -2px 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: -45deg;
}

.showcase__link:hover .showcase__link-icon {
  background: var(--accent);
  color: #fff
}

/* Linke Zeilen: Details öffnen links -> Pfeil andersherum */
.showcase:nth-child(even) .showcase__link-icon {
  transform: rotate(180deg)
}

.showcase__link[aria-expanded="true"] .showcase__link-icon {
  transform: rotate(180deg)
}

.showcase:nth-child(even) .showcase__link[aria-expanded="true"] .showcase__link-icon {
  transform: rotate(360deg);
}

/* Detailspalte — die Höhe läuft über grid-template-rows 0fr -> 1fr.
   "height: 0 -> auto" lässt sich nicht animieren und sprang deshalb. */
.showcase__detail {
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  contain: layout paint;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .6s var(--ease-out),
    opacity .3s var(--ease),
    visibility 0s linear .6s;
}

.showcase.is-open .showcase__detail {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .6s var(--ease-out),
    opacity .45s .18s var(--ease),
    visibility 0s;
}

.detail__inner {
  min-height: 0;
  overflow: hidden;
  width: calc(.44 * (min(1180px, 100vw) - 130px));
  border-left: 2px solid var(--accent);
  padding-left: clamp(1.1rem, 2vw, 1.8rem);
}

.showcase:nth-child(even) .detail__inner {
  border-left: 0;
  border-right: 2px solid var(--accent);
  padding-left: 0;
  padding-right: clamp(1.1rem, 2vw, 1.8rem);
}

.detail__inner h4 {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}

.detail__inner h4+p,
.detail__inner h4+ul {
  margin-bottom: 1.5rem
}

.detail__inner p {
  color: rgba(255, 255, 255, .74);
  font-size: .97rem
}

.detail__list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .4rem;
  color: rgba(255, 255, 255, .74);
  font-size: .97rem;
}

.detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding-block: 1.2rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.detail__stats strong {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
}

.detail__stats span {
  display: block;
  margin-top: .3rem;
  font-size: .74rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* Platzhalter für App-Screenshots */
.shots {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap
}

.shot {
  margin: 0;
  flex: 1 1 130px;
  max-width: 170px;
  aspect-ratio: 9/19.5;
  border-radius: 18px;
  overflow: hidden;
  border: 0;
  display: grid;
  place-items: center;
}

.shot span {
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  text-align: center;
  padding: .5rem;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px
}

/* ── 7c. ABLAUF: Bierdeckel ─────────────────────────────── */
.mats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-top: 1.2rem;
}

.mats__rail {
  position: absolute;
  top: calc(50% - 1.5px);
  left: 9%;
  right: 9%;
  height: 3px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.mats__rail i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .2s linear
}

/* overflow:hidden wie bei .portrait__card — der Kartenrand schneidet die
   Hintergrundziffer sauber ab, statt sie überstehen zu lassen. */
.mat {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}

.mat::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 16px;
  border: 1.5px dashed var(--line);
  pointer-events: none;
}

.mat:nth-child(2) {
  transform: rotate(-1.6deg)
}

.mat:nth-child(3) {
  transform: rotate(1.1deg)
}

.mat:nth-child(4) {
  transform: rotate(-.7deg)
}

.mat:nth-child(5) {
  transform: rotate(1.8deg)
}

.mat:hover {
  transform: rotate(0) translateY(-8px);
  box-shadow: var(--shadow-lg);
  z-index: 2
}

/* Gezeichnete Ziffer im Hintergrund — gleiche Machart wie die Initialen
   im Team: nur Kontur, unten rechts angeschnitten, zurückhaltend. */
.mat__ghost {
  position: absolute;
  right: -.06em;
  bottom: -.3em;
  z-index: -1;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(4.5rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line);
  user-select: none;
  pointer-events: none;
}

.mat h3 {
  font-size: 1.16rem;
  margin-bottom: .4rem;
  position: relative
}

.mat p {
  color: var(--ink-soft);
  font-size: .95rem
}

/* ── 7d. TEAM: zwei Portraits ───────────────────────────── */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  position: relative;
  z-index: 1;
  padding-top: clamp(132px, 14vw, 178px);
  /* Platz für das überstehende Foto */
}

/* Solange keine Fotos eingebunden sind, entfällt der Platz dafür */
.duo:not(:has(.portrait__photo)) {
  padding-top: 0
}

.portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .55s var(--ease-out);
}

/* Die Karte kappt die Hintergrundziffer, die Scheibe liegt darueber */
.portrait__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.9rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem);
  flex: 1;
  /* beide Karten gleich hoch */
  box-shadow: var(--shadow-sm);
  transition: box-shadow .55s var(--ease-out);
}

/* Verlaufskante oben als Markenakzent */
.portrait__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--grad);
}

.portrait:hover {
  transform: translateY(-8px)
}

.portrait:hover .portrait__card {
  box-shadow: var(--shadow-lg)
}

/* Große Ziffer im Hintergrund */
.portrait__ghost {
  position: absolute;
  right: -.08em;
  bottom: -.34em;
  z-index: -1;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(6rem, 11vw, 9.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line);
  letter-spacing: -.04em;
  user-select: none;
  pointer-events: none;
}

/* Freigestelltes Foto, ragt oben rechts aus der Karte heraus.
   Platzhalter: assets/img/team-platzhalter.svg */
.portrait__photo {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  right: clamp(.2rem, 1.5%, 1.1rem);
  bottom: calc(100% - clamp(60px, 7vw, 88px));
  width: clamp(140px, 36%, 200px);
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(29, 34, 51, .22));
  transition: transform .55s var(--ease-out);
}

.portrait:hover .portrait__photo {
  transform: translateY(-6px) scale(1.03)
}

.portrait h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem)
}

.portrait__role {
  display: inline-block;
  margin-top: .5rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--grad-soft);
  padding: .3rem .8rem;
  border-radius: 999px;
}

.portrait__quote {
  margin-top: 1.2rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
}

/* Fakten als schmale Tabelle */
.portrait__facts {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line)
}

.portrait__facts>div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--line);
}

.portrait__facts dt {
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: none;
}

.portrait__facts dd {
  margin: 0;
  font-size: .93rem;
  font-weight: 600;
  text-align: right
}

.duo__note {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* ── 7e. AKTUELLES: Notizzettel ─────────────────────────── */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-top: 1rem;
}

.note {
  position: relative;
  background: #FFFDF4;
  border: 1px solid rgba(29, 34, 51, .07);
  border-radius: 3px;
  padding: clamp(1.9rem, 3vw, 2.4rem) clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: 0 1px 2px rgba(29, 34, 51, .08), 0 14px 28px -18px rgba(29, 34, 51, .4);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

/* leicht schief aufgeklebt */
.note:nth-child(3n+1) {
  transform: rotate(-1.4deg)
}

.note:nth-child(3n+2) {
  transform: rotate(.9deg)
}

.note:nth-child(3n+3) {
  transform: rotate(-.6deg)
}

.note:hover {
  transform: rotate(0) translateY(-6px);
  box-shadow: 0 1px 2px rgba(29, 34, 51, .08), 0 26px 44px -22px rgba(29, 34, 51, .5)
}

/* angedeutetes Klebeband oben */
.note__pin {
  position: absolute;
  top: -9px;
  left: 50%;
  translate: -50% 0;
  width: 74px;
  height: 20px;
  border-radius: 2px;
  background: rgba(245, 50, 90, .16);
  border: 1px solid rgba(245, 50, 90, .22);
  box-shadow: 0 2px 5px rgba(29, 34, 51, .12);
}

.note:nth-child(3n+2) .note__pin {
  background: rgba(106, 187, 99, .18);
  border-color: rgba(106, 187, 99, .26)
}

.note:nth-child(3n+3) .note__pin {
  background: rgba(169, 222, 92, .22);
  border-color: rgba(169, 222, 92, .3)
}

.note__date {
  font-size: .74rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint) !important;
  margin-bottom: .7rem;
}

.note h3 {
  font-size: 1.2rem;
  margin-bottom: .55rem
}

/* Handschrift für den Fließtext — läuft klein, deshalb deutlich größer */
.note__text {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: 1.38rem;
  line-height: 1.35;
  color: #3B4152 !important;
}

.news-empty {
  display: none;
  text-align: center;
  color: var(--ink-soft);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.2rem);
}

.notes:empty+.news-empty {
  display: block
}

.notes:empty {
  display: none
}

/* ── 8. KONTAKT & FORMULAR ──────────────────────────────── */
.section--contact {
  background: var(--cream-deep)
}

.contact {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start
}

.contact__intro {
  position: static
}

.contact__list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.contact__list li {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--ink-soft)
}

.contact__list a {
  transition: color .25s var(--ease)
}

.contact__list a:hover {
  color: var(--red)
}

.contact__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--white);
  color: var(--red);
  box-shadow: var(--shadow-sm);
  flex: none
}

.contact__icon svg {
  width: 20px;
  height: 20px
}

.form {
  position: relative;
  /* Verlaufsrand: weisse Flaeche bis zum Innenrand, Verlauf nur im Rahmen */
  border: 2px solid transparent;
  border-radius: var(--r-xl);
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--grad) border-box;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  transition: box-shadow .4s var(--ease);
}

.form:focus-within {
  box-shadow: var(--shadow-lg)
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.05rem
}

.field {
  display: flex;
  flex-direction: column;
  gap: .45rem
}

.field label {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: .9rem
}

.req {
  color: var(--red)
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  padding: .82rem 1rem;
  width: 100%;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 130px
}

.field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C616B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(245, 50, 90, .13);
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: var(--red-deep)
}

.field--check.has-error .check input {
  outline: 2px solid var(--red-deep);
  outline-offset: 2px
}

.field__error {
  color: var(--red-deep);
  font-size: .82rem;
  min-height: 0;
  display: none
}

.field.has-error .field__error {
  display: block
}

.check {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: .88rem;
  color: var(--ink-soft)
}

.check input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: .15rem;
  accent-color: var(--red);
  cursor: pointer
}

.check a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px
}

.form__hint {
  font-size: .8rem;
  color: var(--ink-faint)
}

.form__status {
  font-size: .92rem;
  display: none;
  padding: .85rem 1rem;
  border-radius: var(--r-sm)
}

.form__status.is-ok {
  display: block;
  background: rgba(106, 187, 99, .14);
  color: #2F7A39
}

.form__status.is-error {
  display: block;
  background: rgba(245, 50, 90, .12);
  color: var(--red-deep)
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

/* ── Tech-Laufband über dem Footer (Test) ───────────────── */
/* Gleiches Band wie oben, nur mit Logos vor den Wörtern, links ein
   fester „Powered by“-Kicker und Laufrichtung andersherum. */
.marquee--stack {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.marquee__label {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 5rem 0 var(--gutter);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  background: linear-gradient(to right, var(--ink) calc(100% - 4.5rem), transparent)
}

.marquee--stack b {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: inherit
}

.marquee--stack svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  opacity: .9
}

.marquee__track--reverse {
  animation-direction: reverse
}

.marquee--stack .marquee__track span {
  display: inline-flex;
  align-items: center
}

.marquee--stack i {
  padding-inline: .9em
}

/* ── 9. FOOTER ──────────────────────────────────────────── */
.site-footer {
  position: relative;
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(40px, 5vw, 60px);
  overflow: hidden
}

.footer-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* volle Breite, Hoehe folgt dem Seitenverhaeltnis der Maske (2000x224),
     dadurch randlos und unverzerrt auf jeder Breite */
  width: 100%;
  aspect-ratio: 2000/224;
  background: var(--grad);
  opacity: .14;
  pointer-events: none;
  -webkit-mask-image: url('../img/skyline-footer-mask.png');
  mask-image: url('../img/skyline-footer-mask.png');
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
}

.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(190px, .9fr) 1.6fr auto;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start
}

.footer__brand img {
  width: 124px;
  filter: brightness(1.06)
}

.footer__brand p {
  margin-top: .75rem;
  font-size: .9rem;
  line-height: 1.55
}

/* Social-Leiste: eigene Spalte ganz rechts, untereinander */
.social {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .8);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out);
}

.social a:hover {
  background: var(--grad);
  color: #fff;
  transform: translateX(-3px)
}

.social svg {
  width: 18px;
  height: 18px
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem)
}

.footer__nav h4 {
  color: #fff;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .7rem
}

.footer__nav li+li {
  margin-top: .38rem
}

.footer__nav a {
  font-size: .9rem;
  transition: color .25s var(--ease), padding-left .25s var(--ease)
}

.footer__nav a:hover {
  color: #fff;
  padding-left: 4px
}

.footer__bottom {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-block: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: .86rem;
}

.heart {
  color: var(--red)
}

/* Rechtstexte */
.legal {
  padding-top: clamp(130px, 16vh, 180px);
  padding-bottom: var(--sp-section)
}

.legal .shell {
  max-width: 780px
}

.legal h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  margin-bottom: .6rem
}

.legal h2 {
  font-size: 1.32rem;
  margin-top: 2.6rem;
  margin-bottom: .7rem
}

.legal h3 {
  font-size: 1.06rem;
  margin-top: 1.6rem;
  margin-bottom: .4rem
}

.legal p,
.legal li {
  color: var(--ink-soft)
}

.legal p+p {
  margin-top: .9rem
}

.legal ul {
  list-style: disc;
  padding-left: 1.3rem;
  margin-top: .7rem
}

.legal li+li {
  margin-top: .35rem
}

.legal a:not(.btn):not(.back) {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px
}

.legal .btn--solid {
  color: #fff;
  text-decoration: none
}

.legal .back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 2rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: var(--ink-soft)
}

.legal .back:hover {
  color: var(--red)
}

.legal .note {
  background: var(--cream-deep);
  border-radius: var(--r);
  padding: 1.1rem 1.3rem;
  font-size: .9rem;
  border-left: 3px solid var(--red)
}

/* ── 10. RESPONSIVE ─────────────────────────────────────── */
@media (max-width:1100px) {}

@media (max-width:1000px) {
  .notes {
    grid-template-columns: repeat(2, 1fr)
  }

  .mats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem
  }

  .mats__rail {
    display: none
  }

  .contact {
    grid-template-columns: 1fr
  }

  .footer__inner {
    grid-template-columns: 1fr
  }
}

@media (max-width:860px) {

  /* Alles untereinander: Projekt oben, Details darunter */
  .showcase,
  .showcase:nth-child(even),
  .showcase.is-open,
  .showcase:nth-child(even).is-open {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0
  }

  .showcase:nth-child(even) .showcase__detail {
    order: 2
  }

  .showcase:nth-child(even) .showcase__main {
    order: 1
  }

  /* Spezifität muss die Spiegelungs-Regel oben überstimmen */
  .showcase__main,
  .showcase:nth-child(even) .showcase__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem
  }

  .showcase:nth-child(even) .showcase__visual {
    order: 0
  }

  /* Gestapelt steht nichts mehr nebeneinander — sonst wuerde der Text
     um die Restbreite nach rechts einruecken. */
  .showcase:nth-child(even) .showcase__body {
    margin-left: 0
  }

  .showcase__visual {
    aspect-ratio: 1.6
  }

  .showcase__text {
    max-width: 52ch
  }
}

@media (max-width:820px) {
  .burger {
    display: flex
  }

  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    background: rgba(253, 250, 246, .97);
    backdrop-filter: blur(16px);
    padding: 96px var(--gutter) 2rem;
    box-shadow: var(--shadow-lg);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .5s var(--ease-out);
  }

  .nav.is-open {
    clip-path: inset(0 0 0 0)
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: .2rem
  }

  .nav li {
    border-bottom: 1px solid var(--line)
  }

  .nav li:last-child {
    border: 0;
    margin-top: 1rem
  }

  .nav a:not(.btn) {
    display: block;
    padding: .95rem 0;
    font-size: 1.1rem;
    color: var(--ink)
  }

  .nav a:not(.btn)::after {
    display: none
  }

  .nav .btn {
    width: 100%
  }

  .hero {
    padding-bottom: clamp(140px, 22vh, 200px)
  }

  .scroll-cue {
    display: none
  }

  .skyline {
    width: max(760px, 116%)
  }

  .duo {
    grid-template-columns: 1fr;
    gap: clamp(6rem, 18vw, 8rem)
  }

  .duo:not(:has(.portrait__photo)) {
    gap: clamp(1.4rem, 3.5vw, 3rem)
  }

  .notes {
    grid-template-columns: 1fr
  }
}

@media (max-width:620px) {
  .crafts {
    grid-template-columns: 1fr
  }

  /* Schmale Karte: das Zeichen darf nicht bis unter die Stichwortzeile laufen */
  .craft__mark {
    width: clamp(110px, 34%, 170px)
  }

  .mats {
    grid-template-columns: 1fr
  }

  .mat:nth-child(n) {
    transform: none
  }

  .note:nth-child(n) {
    transform: none
  }

  .note:hover {
    transform: translateY(-4px)
  }

  .form__row {
    grid-template-columns: 1fr
  }

  /* Fakten untereinander, sonst brechen lange Werte unschoen um */
  .portrait__facts>div {
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem
  }

  .portrait__facts dd {
    text-align: left
  }

  .facts {
    gap: 1.6rem
  }

  .fact {
    min-width: 120px
  }

  .footer__nav {
    grid-template-columns: 1fr 1fr
  }

  .social {
    flex-direction: row
  }

  .social a:hover {
    transform: translateY(-3px)
  }

  .footer__bottom {
    flex-direction: column
  }
}

/* ── BEWEGUNG REDUZIEREN ────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none
  }

  :root {
    --hub: 0px !important;
    --hero-fade: 1 !important
  }

  .mat:nth-child(n) {
    transform: none
  }

  .confetti {
    display: none
  }

  .mark path {
    stroke-dashoffset: 0
  }
}