:root {
  --bg: #fffaf3;
  --surface: #ffffff;
  --text: #1c1530;
  --muted: #6b6280;
  --accent: #ff3d6e;
  --blue: #5b4dff;
  --yellow: #ffc93f;
  --accent-ink: #d1266a;
  --border: rgba(28, 21, 48, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; margin: 0 0 0.5em; letter-spacing: -0.01em; }

.demo-flag { background: var(--text); color: #fff; text-align: center; font-size: 0.78rem; font-weight: 600; padding: 6px; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; font-weight: 700; color: var(--accent-ink); }

.section { padding: 90px 6vw; max-width: 1180px; margin: 0 auto; }

/* Hero */
.hero { position: relative; overflow: hidden; padding-bottom: 20px; }

/* Nav und Hero-Inhalt liegen auf demselben Raster wie jede .section weiter
   unten (max-width 1180px + 6vw). Vorher war der Hero-Text auf 720px gedeckelt,
   waehrend der Hero selbst ueber die volle Breite lief - auf breiten Schirmen
   klebte dadurch alles links und rechts blieb eine tote Flaeche. */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 6vw 0; position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto;
}
.nav__brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; }
.nav__cta { background: var(--text); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; }

.hero__blob { position: absolute; border-radius: 50%; filter: blur(10px); opacity: 0.55; z-index: 0; }
.hero__blob--1 { width: 460px; height: 460px; background: var(--yellow); top: -170px; right: -110px; }
.hero__blob--2 { width: 360px; height: 360px; background: var(--blue); bottom: -150px; left: -90px; opacity: 0.35; }
.hero__blob--3 { width: 200px; height: 200px; background: var(--accent); top: 40%; left: 42%; opacity: 0.18; }

.hero__inner { position: relative; z-index: 2; padding: 54px 6vw 20px; max-width: 1180px; margin: 0 auto; }

/* Headline ueber die ganze Rasterbreite, darunter eine Zeile aus
   Text links und Bild rechts. */
/* Ohne Bild traegt die untere Zeile die Breite ueber die Aufteilung:
   Fliesstext plus Schlagworte links, Buttons rechts an der Grundlinie.
   Untereinander gestapelt waere wieder alles linksbuendig und rechts
   bliebe die tote Flaeche, wegen der der Hero neu gebaut wurde. */
.hero__bottom {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: 30px 48px; margin-top: 40px;
}
.hero__text { flex: 1 1 380px; }

.pill { display: inline-block; background: var(--yellow); padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-bottom: 18px; }
/* Untergrenze von 2.6 auf 2.3rem: Archivo Black baut breiter als Space
   Grotesk, bei 375px passte "Marken, die man" nicht mehr in eine Zeile
   und der erzwungene Umbruch liess "man" allein stehen. */
.hero h1 { font-size: clamp(2.3rem, 7vw, 5.6rem); line-height: 1.02; margin-bottom: 0; }
.hero__sub { color: var(--muted); max-width: 46ch; margin: 0 0 22px; font-size: 1.05rem; }
.hero__tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
.hero__tag { background: var(--surface); border: 1px solid var(--border); padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; max-width: 100%; }

.btn { display: inline-block; text-decoration: none; padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; cursor: pointer; border: none; font-family: inherit; }
.btn--dark { background: var(--text); color: #fff; }
.btn--dark:hover { background: var(--accent-ink); }
.btn--outline { background: transparent; border: 2px solid var(--text); color: var(--text); }

/* Scroll-Verlauf auf der Headline
   ------------------------------------------------------------------
   --gy wandert per JS von 140vh auf -40vh, waehrend die Zeile durchs Bild
   scrollt. Der Mittelpunkt des Farbkreises zieht dadurch von unten nach oben
   durch die Schrift: erst Papaya-Pink, dann Magenta, Violett, Pflaume.

   Zwei Dinge sind hier Pflicht, nicht Geschmack:
   1. Keine Stufe darf auf Alpha 0 enden. Der Text ist durch
      background-clip:text selbst transparent - eine durchsichtige Stufe
      wuerde die Headline abschnittsweise komplett verschwinden lassen.
   2. Jede Stufe muss mindestens 3:1 halten (WCAG 1.4.3, grosse fette
      Schrift). Massgeblich ist nicht nur der Creme-Hintergrund #fffaf3,
      sondern der gelbe Blob darunter: er deckt auf schmalen Schirmen fast
      die ganze Headline ab und ist mit #ffdf90 der hellste Untergrund der
      Seite. Gemessen auf Creme: 4,65:1 / 5,31:1 / 8,29:1 / 13,68:1, auf
      Gelb 3,73:1 im schlechtesten Fall. Die hellste Stufe liegt deshalb bei
      L 0.58 statt 0.62 - bei 0.62 waeren es auf Gelb nur noch 3,16:1
      gewesen. In oklch interpoliert bleibt auch jeder Zwischenwert in
      diesem Korridor, weil die Helligkeit nie ueber die hellste Stufe
      steigt. Alle vier Werte liegen innerhalb des sRGB-Gamuts - ausserhalb
      wuerde jeder Browser anders abklemmen und der gemessene Kontrast waere
      wertlos.

   Die Klasse .verlauf-an setzt das JS erst, wenn der Browser sowohl
   oklch-Verlaeufe als auch background-clip:text kann. Sonst bleibt die
   Headline schlicht einfarbig - und damit lesbar. */
/* Archivo Black ist deutlich fetter und breiter als Space Grotesk - mehr
   Buchstabenflaeche heisst mehr sichtbarer Verlauf. Die Familie hat nur den
   einen Schnitt (400), der bereits schwarz ist; ein zusaetzliches
   font-weight: 700 wuerde der Browser kuenstlich fetten und die Formen
   verschmieren. Deshalb ausdruecklich 400.
   Space Grotesk bleibt fuer h3, Logo, Kennzahlen und FAQ. */
.headline {
  --gy: 60vh;
  text-wrap: balance;
  font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.verlauf-an .headline {
  background-image: radial-gradient(
    in oklch circle at 50% var(--gy),
    oklch(0.58 0.230 20)    0vh,
    oklch(0.55 0.230 350)  40vh,
    oklch(0.45 0.255 290)  75vh,
    oklch(0.30 0.120 285) 130vh
  );
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* ohne den Zuschlag kappt background-clip:text die Unterlaengen */
  padding-bottom: 0.08em;
}

/* Der .ablauf-Block steht auf dunklem Grund (#1c1530) und braucht die
   umgekehrte Palette. Die helle Variante oben gemessen: 12,61:1 / 8,34:1 /
   6,65:1 / 4,62:1. Zum Vergleich - die Creme-Stufen faellen dort auf
   3,62 / 3,17 / 2,03 / 1,23:1 ab, die Ueberschrift waere gegen Ende des
   Verlaufs praktisch unsichtbar. Wer hier eine Farbe aendert, misst gegen
   #1c1530, nicht gegen den Seitenhintergrund. */
.verlauf-an .ablauf .headline {
  background-image: radial-gradient(
    in oklch circle at 50% var(--gy),
    oklch(0.89 0.170  95)   0vh,
    oklch(0.78 0.125  30)  40vh,
    oklch(0.72 0.150 310)  75vh,
    oklch(0.62 0.140 285) 130vh
  );
}

/* Leistungen */
.leistungen h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 16ch; }
.leistungen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.card { border-radius: 20px; padding: 30px; }
.card__icon { font-size: 1.6rem; }
.card--pink { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.card--blue { background: color-mix(in srgb, var(--blue) 14%, var(--surface)); }
.card--yellow { background: color-mix(in srgb, var(--yellow) 30%, var(--surface)); }
.card p { color: var(--muted); }

/* Warum Studio Papaya */
.warum h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 18ch; }
.warum__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.warum__item { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 26px; }
.warum__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; }
.warum__icon--pink { background: var(--accent-ink); color: #fff; }
.warum__icon--blue { background: var(--blue); color: #fff; }
.warum__icon--yellow { background: var(--yellow); color: var(--text); }
.warum__icon--dark { background: var(--text); color: #fff; }
.warum__item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.warum__item p { color: var(--muted); font-size: 0.92rem; margin: 0; }

.stats__strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin-top: 50px; padding: 36px 6vw; border-radius: 22px;
  background: var(--text); color: #fff;
}
.stats__item { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.stats__num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--yellow); }
.stats__label { font-size: 0.82rem; color: #d8d3e8; }

/* Ablauf */
.ablauf { background: var(--text); color: #fff; border-radius: 28px; margin: 0 6vw; max-width: none; padding: 70px 6vw; }
.ablauf .eyebrow { color: var(--yellow); }
.ablauf__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; }
.ablauf__text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.ablauf__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.ablauf__steps li { display: flex; gap: 18px; }
.step__num { background: var(--accent-ink); color: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ablauf__steps h3 { margin-bottom: 4px; font-size: 1.05rem; }
.ablauf__steps p { color: #d8d3e8; margin: 0; font-size: 0.92rem; }

/* Showcase */
.showcase h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 20ch; margin-top: 6px; }


/* FAQ */
.faq h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.faq__list { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; max-width: 760px; }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; }
.faq__item summary { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.02rem; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; float: right; font-size: 1.2rem; color: var(--accent-ink); }
.faq__item[open] summary::after { content: '–'; }
.faq__item p { color: var(--muted); margin: 14px 0 0; font-size: 0.94rem; }

/* Kontakt */
/* Als einzige Abschnitts-Ueberschrift hatte diese keine eigene Groesse und
   lief auf der Browser-Vorgabe von 24px - optisch aus der Reihe und genau
   auf der WCAG-Grenze fuer grosse Schrift (18pt = 24px), ab der 3:1 statt
   4,5:1 genuegt. Jetzt dieselbe Staffel wie die uebrigen Abschnitte. */
.kontakt h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.kontakt__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; }
/* Der Newsletter war vorher ein zweiter dunkler Pillen-Button neben dem
   Formular - zwei optisch gleichrangige CTAs. Jetzt eine ruhige Zeile
   unter dem Formular: klar untergeordnet, aber weiterhin erreichbar.
   Sitzt bewusst in der zweiten Rasterspalte, direkt unter dem Formular,
   nicht ueber die ganze Breite - so bleibt der Bezug zum Formular. */
.kontakt__nachsatz {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.kontakt__nachsatz a {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kontakt__form { display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 30px; }
.kontakt__form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.kontakt__form input, .kontakt__form textarea { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 0.95rem; }

.footer { display: flex; justify-content: space-between; padding: 30px 6vw; color: var(--muted); font-size: 0.82rem; }

/* Auf schmalen Schirmen richten die fest gesetzten Umbrueche mehr Schaden
   an als Nutzen - der Browser verteilt die Zeilen dort besser selbst. */
@media (max-width: 620px) {
  .headline br { display: none; }
}

@media (max-width: 780px) {
  .hero__bottom { gap: 26px; margin-top: 30px; }
  .hero__inner { padding-top: 34px; }
}

@media (max-width: 780px) {
  .leistungen__grid { grid-template-columns: 1fr; }
  .warum__grid { grid-template-columns: 1fr 1fr; }
  .stats__strip { grid-template-columns: 1fr 1fr; }
  .ablauf__grid { grid-template-columns: 1fr; }
  .ablauf { margin: 0 4vw; padding: 50px 5vw; }
  .showcase__grid { grid-template-columns: 1fr; }
  .kontakt__inner { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 60px 6vw; }
  .footer { flex-direction: column; gap: 6px; }
}

@media (max-width: 520px) {
  .warum__grid { grid-template-columns: 1fr; }
  .stats__strip { grid-template-columns: 1fr; }
}

/* Accessibility: focus, motion, skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 2000;
  border-radius: 0 0 6px 0;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}

.form-note { color: var(--muted); font-size: 0.78rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}


/* Eigener Cursor
   ------------------------------------------------------------------
   Drei Punkte in den Markenfarben, die unterschiedlich schnell folgen und
   durch den SVG-Filter #goo ineinanderlaufen. Die Klasse .eigener-cursor
   setzt das Skript erst, wenn ein praezises Zeigegeraet da ist und niemand
   weniger Bewegung angefordert hat - ohne JS, auf Touch oder bei reduzierter
   Bewegung bleibt der Systemzeiger unangetastet. */
.cursor-container {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.cursor-container.ist-da { opacity: 1; }
/* Ueber klickbaren Flaechen tritt der eigene Cursor zurueck und der
   Systemzeiger uebernimmt - dort zaehlt Genauigkeit, und wer einen
   vergroesserten oder kontrastreichen Zeiger eingestellt hat, bekommt
   ihn genau da zurueck, wo er gebraucht wird. */
.cursor-container.ist-da.tritt-zurueck { opacity: 0; }

.cursor-container .cursor,
.cursor-container .follower,
.cursor-container .linker {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  will-change: transform;
}
.cursor-container .cursor   { width: 16px; height: 16px; background: var(--accent); }
.cursor-container .follower { width: 8px;  height: 8px;  background: var(--blue); }
.cursor-container .linker   { width: 4px;  height: 4px;  background: var(--yellow); }

.cursor-goo { position: absolute; width: 0; height: 0; }

/* Muss nach .btn und .faq__item summary stehen, sonst gewinnt deren
   cursor: pointer. Die Spezifitaet (0,1,1) schlaegt die dortige (0,1,0). */
html.eigener-cursor,
html.eigener-cursor * { cursor: none; }

html.eigener-cursor :is(a, button, summary, select, [data-fake-action]),
html.eigener-cursor :is(a, button, summary, select, [data-fake-action]) * {
  cursor: pointer;
}
/* In Eingabefeldern gehoert der Textcursor hin, nicht die Hand.
   Die Klasse steht doppelt, um die Spezifitaet anzuheben: Das
   data-fake-action haengt am <form>, also erben alle Felder darin sonst die
   Zeiger-Regel darueber. Doppelt genannt gewinnt diese Regel und die Auswahl
   bleibt dieselbe - sauberer als ein !important. */
html.eigener-cursor.eigener-cursor :is(label, input, textarea) { cursor: auto; }

/* Tastaturbedienung darf der Eigen-Cursor nicht verdecken: der
   Fokusrahmen bleibt, wie er ist - siehe :focus-visible weiter oben. */


/* Projekt-Akkordeon
   ------------------------------------------------------------------
   Nachbau der Vorlage ohne jQuery und ohne Font Awesome. Zugeklappte Panels
   sind schmale hohe Streifen, das offene waechst per flex-grow auf.

   Die Vorlage blendet auf schmalen Schirmen per Media Query die Panels 5 bis 2
   aus. Das haben wir nicht uebernommen: damit waeren dort vier von fuenf
   Projekten unerreichbar. Stattdessen wird unter 760px gestapelt. */
.showcase__hinweis {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 22px;
}

.projekte {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  height: 420px;
  margin-top: 4px;
}

.projekt {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 56px;
  padding: 0;
  border: none;
  border-radius: 30px;
  background: var(--border);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: flex-grow 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),
              border-radius 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
.projekt.ist-offen {
  flex-grow: 10000;
  border-radius: 40px;
}

/* Das Bild sitzt als eigenes <img> im Panel statt als background-image der
   Vorlage: so bekommt es einen Alternativtext, laedt verzoegert und kann den
   KI-Hinweis tragen. Den Zoom der Vorlage (background-size 120% -> 100%)
   uebernimmt hier transform: scale. */
.projekt__bild { position: absolute; inset: 0; display: block; }
.projekt__bild img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1.18);
  transition: transform 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
.projekt.ist-offen .projekt__bild img { transform: scale(1); }

/* Der KI-Hinweis wandert nach oben rechts: unten sitzt das Projekt-Label,
   und im zugeklappten Streifen waeren beide sonst uebereinander.

   Im zugeklappten Zustand ist das Panel nur 56px breit, der Hinweis aber 89px -
   sichtbar blieb "KI-GENE...". Ein halbes Wort kennzeichnet nichts, deshalb wird
   er dort ausgeblendet. Die Kennzeichnung der zugeklappten Bilder uebernimmt der
   Satz unter der Ueberschrift, der fuer alle fuenf gilt. */
.projekt .ai-bild__badge {
  right: 10px; bottom: auto; top: 10px;
  transition: opacity 0.3s ease;
}
.projekt:not(.ist-offen) .ai-bild__badge { opacity: 0; }

.projekt__schatten {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  box-shadow: inset 0 -130px 0 -130px rgba(0,0,0,0.9),
              inset 0 -130px 0 -110px rgba(0,0,0,0.9);
  transition: box-shadow 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  pointer-events: none;
}
.projekt.ist-offen .projekt__schatten {
  box-shadow: inset 0 -130px 130px -130px rgba(0,0,0,0.95),
              inset 0 -130px 130px -100px rgba(0,0,0,0.95);
}

.projekt__label {
  display: flex;
  align-items: center;
  position: absolute;
  left: 12px; bottom: 12px; right: 12px;
  height: 40px;
  transition: left 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),
              bottom 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
.projekt.ist-offen .projekt__label { left: 20px; bottom: 20px; }

.projekt__icon {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-ink);
  font-size: 1rem;
}
.projekt__info {
  display: flex; flex-direction: column; justify-content: center;
  margin-left: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.projekt__info > span {
  position: relative;
  left: 20px;
  opacity: 0;
  transition: left 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.4s ease-out;
}
.projekt.ist-offen .projekt__info > span { left: 0; opacity: 1; }
.projekt__name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.1rem; line-height: 1.2;
}
.projekt__art { font-size: 0.85rem; transition-delay: 0.1s; }

.projekt:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

@media (max-width: 760px) {
  /* Gestapelt statt ausgeblendet - alle fuenf Projekte bleiben erreichbar. */
  .projekte { flex-direction: column; height: auto; gap: 10px; }
  .projekt { flex: 0 0 auto; height: 84px; min-width: 0; border-radius: 22px;
             transition: height 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); }
  .projekt.ist-offen { height: 300px; border-radius: 28px; }
  .projekt__info > span { left: 0; opacity: 1; }
  .projekt__label { left: 14px; bottom: 14px; }
  .projekt__schatten {
    box-shadow: inset 0 -130px 90px -110px rgba(0,0,0,0.95),
                inset 0 -130px 90px -95px rgba(0,0,0,0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .projekt, .projekt__bild img, .projekt__label, .projekt__info > span,
  .projekt__schatten { transition: none; }
}


/* Stimmen-Slider
   ------------------------------------------------------------------
   Nachbau der Vorlage ohne jQuery und slick.js. Der Farbverlauf ist auf die
   Papaya-Palette umgestellt - Gelb bleibt bewusst aussen vor: weisse Schrift
   haelt darauf nur 1,4:1. Die drei verwendeten Toene liegen bei 5,00:1
   (#d1266a), 5,32:1 (#5b4dff) und 17,5:1 (#1c1530) gegen Weiss, die Zitate
   sind also an jeder Stelle des wandernden Verlaufs lesbar. */
.stimmen {
  position: relative;
  max-width: none;
  margin: 0 6vw;
  padding: 70px 6vw 60px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(130deg, var(--accent-ink), var(--blue) 55%, var(--text));
  background-size: 400% 400%;
  animation: stimmen-verlauf 18s ease infinite;
}
@keyframes stimmen-verlauf {
  0%   { background-position: 5% 0%; }
  50%  { background-position: 96% 100%; }
  100% { background-position: 5% 0%; }
}
/* Alles auf diesem Band steht auf einem WANDERNDEN Verlauf, also muss jeder
   Text gegen den hellsten der drei Toene bestehen (#d1266a). Gemessen:
     weiss              5,00:1  -> reicht auch fuer kleine Schrift
     weiss 90% Deckkraft 4,30:1 -> faellt durch
     Gelb #ffc93f       3,26:1  -> nicht fuer Text
     dunkelste Verlaufsstufe der Headline (#2b1e66)  2,83:1
   Die Ueberschrift bekommt deshalb KEINEN Farbverlauf, sondern schlichtes
   Weiss - sonst verschwindet sie stellenweise im Hintergrund. Aus demselben
   Grund sind Eyebrow und Quellenangabe voll deckend statt abgeschwaecht. */
.stimmen .eyebrow { color: #fff; }
/* Ohne eigene Groesse faellt die Ueberschrift auf die Browser-Vorgabe von
   24px zurueck und steht neben den anderen Abschnitten winzig da -
   derselbe Fall wie zuvor bei .kontakt h2. */
.stimmen h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.verlauf-an .stimmen .headline {
  background-image: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.stimmen__slider { position: relative; overflow: hidden; margin-top: 34px; }
.stimmen__spur {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.stimme {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 10px 46px;
}

/* Achteck statt Kreis - das Kennzeichen der Vorlage. */
.stimme__portrait {
  position: relative;
  flex: 0 0 140px;
  width: 140px; height: 140px;
}
.stimme__portrait img {
  -webkit-clip-path: polygon(50.00% 0.00%, 38.11% 6.70%, 24.99% 6.72%, 18.06% 18.44%, 6.70% 25.00%, 6.56% 38.64%, 0.00% 50.00%, 6.70% 61.89%, 6.70% 75.00%, 18.44% 81.94%, 25.00% 93.30%, 38.64% 93.44%, 50.00% 100.00%, 61.88% 93.30%, 75.00% 93.30%, 81.94% 81.56%, 93.30% 74.90%, 93.44% 61.36%, 100.00% 50.00%, 93.30% 38.11%, 93.30% 25.00%, 81.56% 18.06%, 74.96% 6.70%, 61.36% 6.56%, 50.00% 0.00%);
  clip-path: url(#achteck);
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Mittig unter das Achteck gelegt: dort ist die Form am schmalsten, der
   Hinweis steht also frei ueber dem Hintergrund und bleibt ganz lesbar. */
.stimme__portrait .ai-bild__badge { right: 50%; bottom: -6px; transform: translateX(50%); }

.stimme__text { margin: 0; position: relative; }
.stimme__text p {
  position: relative;
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
}
/* Das grosse Anfuehrungszeichen der Vorlage, hinter den Text gelegt. */
.stimme__text p::before {
  content: '\201C';
  position: absolute;
  top: -0.42em; left: -0.24em;
  z-index: -1;
  color: rgba(255, 255, 255, 0.28);
  font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
  font-size: 6.5em;
  line-height: 1;
  pointer-events: none;
}
.stimme__text cite { display: block; font-style: normal; font-size: 0.86rem; line-height: 1.5; color: #fff; }
.stimme__name {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
}

.stimmen__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0;
  border: none; border-radius: 50%;
  background: transparent; cursor: pointer;
  z-index: 3;
}
.stimmen__pfeil svg { width: 30px; height: 30px; }
.stimmen__pfeil path { fill: rgba(255,255,255,0.45); transition: fill 0.2s ease; }
.stimmen__pfeil:hover path, .stimmen__pfeil:focus-visible path { fill: #fff; }
.stimmen__pfeil--zurueck { left: -6px; }
.stimmen__pfeil--vor { right: -6px; }

.stimmen__punkte { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.stimmen__punkt {
  width: 10px; height: 10px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.stimmen__punkt.ist-aktiv { background: #fff; transform: scale(1.25); }

.stimmen__pfeil:focus-visible, .stimmen__punkt:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 3px;
}

.stimmen__maske { position: absolute; width: 0; height: 0; }

@media (max-width: 760px) {
  .stimmen { margin: 0 4vw; padding: 50px 5vw 46px; }
  .stimme { flex-direction: column; text-align: center; gap: 22px; padding: 6px 30px; }
  .stimme__text p::before { left: 50%; transform: translateX(-50%); top: -0.3em; font-size: 4.5em; }
  .stimmen__pfeil--zurueck { left: -10px; }
  .stimmen__pfeil--vor { right: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .stimmen { animation: none; }
  .stimmen__spur { transition: none; }
}

/* Pflichtseiten der Betreiberin — liegen eine Ebene ueber den Demos */
.rechtliches a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 3px 0; }
.rechtliches a:hover { text-decoration-thickness: 2px; }

/* Eingabefelder duerfen schrumpfen — sonst sprengen sie auf 320 px das Raster */
.kontakt__form input, .kontakt__form textarea { min-width: 0; max-width: 100%; }