@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-Bold-Latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-SemiBold-Latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Anybody X"; src: url("fonts/Anybody-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo X"; src: url("fonts/Archivo-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Climate Crisis X"; src: url("fonts/ClimateCrisis-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Monoton X"; src: url("fonts/Monoton-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Abril Fatface X"; src: url("fonts/AbrilFatface-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Shrikhand X"; src: url("fonts/Shrikhand-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Rubik Mono One X"; src: url("fonts/RubikMonoOne-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bungee X"; src: url("fonts/Bungee-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic-Latin.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Latin.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-Latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Syne"; src: url("fonts/Syne-Latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("fonts/BigShouldersDisplay-Latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa-Latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("fonts/Gloock-Regular-Latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("fonts/Unbounded-Latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/PixelifySans-Latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-Latin.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Life Science Sans Trial 01"; src: url("/fonts/LifeScienceSansTrial01-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MakeFont Sans 01"; src: url("/fonts/MakeFontSans01-Regular.woff2") format("woff2"); font-display: block; }

:root {
  --weiss: #FFFFFF;
  --flieder-hell: #F3EFFF;
  --sonne-hell: #FFF3BF;
  --violett-tief: #4E2EE0;
  --papier: #FFFFFF;
  --tinte: #1E1633;
  --tinte-weich: #463D5C;
  --grau: #6E6780;
  --violett: #6A45FF;
  --violett-hell: #F0EBFF;
  --sonne: #FFC93C;
  --rosa: #FF6FAE;
  --rosa-hell: #FFE6F0;
  --koralle: #FF6A4D;
  --himmel: #8FD3FF;
  --titel: "Bricolage Grotesque", system-ui, sans-serif;
  --text: "Instrument Sans", system-ui, sans-serif;
  --zeile: "Instrument Serif", Georgia, serif;
  --rand: clamp(16px, 2.2vw, 32px);
  --luft: clamp(88px, 11vw, 168px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 18px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--violett); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h2 { margin: 0; font: 800 clamp(46px, 6.6vw, 112px)/.92 var(--titel); font-stretch: 75%; letter-spacing: -0.01em; text-wrap: balance; }

/* Header after bestnights.vc: one thin framed bar, brand and a quiet line left, actions right. */
.kopf {
  position: absolute; z-index: 5; top: calc(32px + var(--rand)); left: var(--rand); right: var(--rand);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 10px 10px 18px; border: 1px solid var(--tinte); background: var(--papier);
}
.kopf-links { display: flex; align-items: baseline; gap: 20px; min-width: 0; }
.marke { font: 700 16px/1 var(--text); text-decoration: none; letter-spacing: .01em; }
.kopf-zeile { font: italic 400 18px/1 var(--zeile); color: var(--grau); white-space: nowrap; }
.kopf-rechts { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 600; }
.kopf-rechts a { text-decoration: none; }
.kopf-rechts a:not(.kopf-knopf):hover { text-decoration: underline; text-underline-offset: 4px; }
.kopf-knopf { background: var(--violett); color: #FFFFFF; padding: 9px 14px; }
.kopf-knopf:hover { background: var(--tinte); }
@media (max-width: 720px) { .kopf-zeile, .kopf-rechts a:not(.kopf-knopf) { display: none; } }

/* 1. Hero: the message itself on stage, trying on one typeface after another. */
.auftritt { min-height: calc(100svh - 32px); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--rand) + 78px) var(--rand) var(--rand); }
.auftritt-buehne { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 300px; }
.auftritt-schrift { margin: 0; padding: 14px 0 0; font-size: 14px; color: var(--grau); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 90px; }
.auftritt-schrift b { color: var(--tinte); font-weight: 700; }
@media (max-width: 520px) { .set-in { display: none; } .auftritt-schrift { font-size: 13px; gap: 4px 6px; min-height: 52px; align-content: flex-start; } .herkunft { font-size: 11.5px; } }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--wortfarbe, var(--violett)); }
.herkunft { padding: 3px 8px; border-radius: 99px; background: #F1F0F4; color: var(--tinte-weich); font-size: 12.5px; font-weight: 600; }
.herkunft.ist-eigen { background: var(--sonne); color: var(--tinte); }
.pause { position: absolute; top: 8px; right: 0; font: 600 14px/1 var(--text); color: var(--tinte); background: var(--papier); border: 1px solid var(--tinte); padding: 9px 14px; cursor: pointer; }
.pause[aria-pressed="true"] { background: var(--tinte); color: #FFFFFF; }
.auftritt-wort-rahmen { display: grid; place-items: center; overflow: hidden; min-height: 0; }
.auftritt-wort { display: inline-block; margin: 0; text-align: center; line-height: .98; color: var(--wortfarbe, var(--tinte)); font-family: "MakeFont Sans 01", var(--text); font-weight: 400; font-size: 120px; text-wrap: nowrap; }
.auftritt-wort .zeile { display: block; white-space: nowrap; }
.auftritt-unten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; padding-top: 22px; border-top: 1px solid var(--tinte); }
.auftritt-nutzen { margin: 0; max-width: 34ch; font: 500 clamp(22px, 2.1vw, 32px)/1.22 var(--text); letter-spacing: -0.01em; }
.auftritt-nutzen em { font: italic 400 1.18em/1 var(--zeile); letter-spacing: 0; }
.auftritt-aktion { display: grid; gap: 14px; justify-items: start; }
.auftritt-knopf { font: 700 19px/1 var(--text); padding: 19px 26px; background: var(--violett); color: #FFFFFF; text-decoration: none; }
.auftritt-knopf:hover { background: var(--tinte); }
.status { margin: 0; font-size: 15px; line-height: 1.45; color: var(--tinte-weich); max-width: 44ch; }
.status-punkt { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sonne); box-shadow: 0 0 0 3px #FFF1C7; vertical-align: 1px; }
@media (max-width: 860px) {
  .auftritt { padding-top: calc(var(--rand) + 70px); }
  .auftritt-unten { grid-template-columns: 1fr; }
  .auftritt-buehne { min-height: 340px; }
}

/* 2. Stage: ten cards, ten feelings. */
.buehne { padding: var(--luft) var(--rand) calc(var(--luft) * .8); }
.buehne-kopf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px 56px; align-items: end; margin-bottom: 44px; }
.buehne-eingabe p { margin: 0 0 22px; max-width: 42ch; color: var(--tinte-weich); }
.eingabe { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--violett); }
.eingabe input { width: 100%; max-width: 520px; font: 500 clamp(26px, 2.6vw, 36px)/1.1 var(--text); color: var(--tinte); background: var(--papier); border: 0; border-bottom: 3px solid var(--violett); padding: 8px 2px 10px; border-radius: 0; }
.eingabe input:focus { outline: none; background: var(--violett-hell); }
@media (max-width: 860px) { .buehne-kopf { grid-template-columns: 1fr; } }

.karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.karte { position: relative; container-type: inline-size; min-height: 260px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow: hidden; border-radius: 4px; }
.k-wort { display: inline-block; align-self: flex-start; white-space: nowrap; line-height: 1.05; font-size: 72px; }
.k-wort.umbruch { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.k-meta { font-size: 14px; line-height: 1.4; }
.k-meta b { display: block; font-size: 16px; }
.karte:nth-child(1) { grid-column: 1 / -1; min-height: 220px; }
.k-default { background: #EEEDF2; color: #8A8698; }
.k-default .k-wort { font-family: "Inter"; font-weight: 700; letter-spacing: -0.02em; }
.k-syne { background: var(--violett); color: #FFFFFF; }
.k-syne .k-wort { font-family: "Syne"; font-weight: 800; text-transform: uppercase; }
.k-serif { background: var(--himmel); color: var(--tinte); }
.k-serif .k-wort { font-family: "Instrument Serif"; font-style: italic; }
.k-fraunces { background: var(--sonne); color: var(--tinte); }
.k-fraunces .k-wort { font-family: "Fraunces"; font-weight: 800; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.k-shoulders { background: var(--koralle); color: var(--tinte); }
.k-shoulders .k-wort { font-family: "Big Shoulders Display"; font-weight: 900; text-transform: uppercase; }
.k-bodoni { background: var(--tinte); color: #FFE6F0; }
.k-bodoni .k-wort { font-family: "Bodoni Moda"; font-weight: 700; font-variation-settings: "opsz" 11; }
.k-gloock { background: var(--rosa-hell); color: var(--tinte); }
.k-gloock .k-wort { font-family: "Gloock"; }
.k-unbounded { background: #C9F0D6; color: var(--tinte); }
.k-unbounded .k-wort { font-family: "Unbounded"; font-weight: 700; }
.k-probe { background: var(--papier); color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte); }
.k-mfsans { background: var(--rosa); color: var(--tinte); grid-column: 1 / -1; }
.eigen::after { content: "Made with MakeFont"; position: absolute; top: 18px; right: 20px; font: 700 12px/1 var(--text); padding: 7px 10px; border-radius: 99px; background: var(--sonne); color: var(--tinte); }
.k-mfsans.eigen::after { background: var(--tinte); color: var(--sonne); }
.k-probe .k-wort { font-family: "Life Science Sans Trial 01"; }
.k-mfsans .k-wort { font-family: "MakeFont Sans 01"; }
@media (max-width: 760px) { .karten { grid-template-columns: 1fr; } .karte, .karte:nth-child(1) { min-height: 180px; } .eigen .k-wort { margin-top: 26px; } }
.buehne-notiz { margin: 22px 0 0; max-width: 70ch; font-size: 15px; color: var(--grau); }

/* 3. Before and after */
.schnitt { background: var(--rosa-hell); padding: var(--luft) var(--rand); }
.schnitt-kopf { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 40px; }
.schnitt-kopf h2 { max-width: 16ch; }
.schnitt-kopf p { margin: 0; max-width: 36ch; color: var(--tinte-weich); font-size: 19px; }
@media (max-width: 860px) { .schnitt-kopf { grid-template-columns: 1fr; } }
.schnitt-schluss { margin: 48px 0 0; font: italic 400 clamp(28px, 3vw, 46px)/1.15 var(--zeile); max-width: 30ch; }

.szenen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.szenen button { font: 600 15px/1 var(--text); padding: 11px 16px; border-radius: 99px; cursor: pointer; background: transparent; color: var(--tinte); border: 1.5px solid var(--tinte); }
.szenen button[aria-selected="true"] { background: var(--tinte); color: #FFFFFF; }

.vg-buehne { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; box-shadow: 0 40px 90px -40px rgba(120, 30, 80, .5); touch-action: pan-y; }
@media (max-width: 640px) { .vg-buehne { aspect-ratio: 4 / 5; } }
.ebene { position: absolute; inset: 0; }
.ebene-nachher { clip-path: inset(0 0 0 var(--teil, 50%)); }
.griff { position: absolute; top: 0; bottom: 0; left: var(--teil, 50%); width: 3px; margin-left: -1.5px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0,0,0,.2); pointer-events: none; }
.griff span { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.griff span::before, .griff span::after { content: ""; position: absolute; top: 50%; margin-top: -7px; border: 7px solid transparent; }
.griff span::before { left: 7px; border-right-color: var(--tinte); }
.griff span::after { right: 7px; border-left-color: var(--tinte); }
.schild { position: absolute; top: 14px; padding: 7px 12px; border-radius: 99px; background: rgba(20, 14, 34, .78); color: #FFFFFF; font: 600 13px/1 var(--text); pointer-events: none; }
.schild-links { left: 14px; }
.schild-rechts { right: 14px; background: var(--sonne); color: var(--tinte); }
.regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vg-buehne:has(.regler:focus-visible) { outline: 3px solid var(--violett); outline-offset: 4px; }
.vergleich-notiz { margin: 14px 0 0; font-size: 14px; color: var(--grau); }

/* Mock sites: identical structure, only the type changes. Sizes in container units. */
.mock { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 2.6cqw 4cqw; background: var(--m-grund); color: var(--m-tinte); overflow: hidden; }
.m-nav { display: flex; align-items: center; gap: 2.4cqw; font-size: 1.35cqw; padding-top: 3cqw; }
.m-marke { font-size: 2.1cqw; margin-right: auto; }
.m-knopf { padding: .8cqw 1.4cqw; border-radius: 99px; background: var(--m-akzent); color: var(--m-knopftext, #fff); }
.m-haupt { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.m-titel { margin: 0; font-size: 6.6cqw; line-height: .98; white-space: nowrap; }
.m-unter { margin: 2cqw auto 2.4cqw; font-size: 1.65cqw; line-height: 1.5; max-width: 40ch; opacity: .85; }
.m-haupt .m-knopf { display: inline-block; font-size: 1.5cqw; padding: 1.2cqw 2.2cqw; }
.m-seite { display: flex; justify-content: center; align-items: baseline; gap: 1.4cqw; border-top: 1px solid currentColor; padding-top: 1.4cqw; font-size: 1.4cqw; }
.m-seite strong { font-size: 2.6cqw; line-height: 1; }
@container (max-width: 560px) {
  .mock { padding: 5cqw; }
  .m-nav { font-size: 3cqw; gap: 3cqw; padding-top: 10cqw; }
  .m-nav .m-link { display: none; }
  .m-marke { font-size: 4.6cqw; }
  .m-titel { font-size: 10.5cqw; }
  .m-unter { font-size: 3.6cqw; margin: 4cqw auto 5cqw; }
  .m-haupt .m-knopf { font-size: 3.6cqw; padding: 2.6cqw 4.6cqw; }
  .m-nav .m-knopf { padding: 1.6cqw 3cqw; }
  .m-seite { visibility: hidden; }
}

/* The default look: what generated pages ship with. */
.vorher .mock, .vorher .mock * { font-family: "Inter", system-ui, sans-serif !important; font-style: normal !important; text-transform: none !important; letter-spacing: -0.01em !important; font-variation-settings: normal !important; }
.vorher .m-titel { font-weight: 700; letter-spacing: -0.03em !important; }
.vorher .m-marke, .vorher .m-seite strong { font-weight: 700; }
.vorher .m-nav, .vorher .m-unter, .vorher .m-seite { font-weight: 400; }

.s-hotel { --m-grund: #DCE3D5; --m-tinte: #1E2A22; --m-akzent: #A24B30; }
.nachher .s-hotel { font-family: "Instrument Sans", sans-serif; }
.nachher .s-hotel .m-titel, .nachher .s-hotel .m-marke, .nachher .s-hotel .m-seite strong { font-family: "Instrument Serif", serif; font-weight: 400; }
.nachher .s-hotel .m-titel { font-size: 9cqw; letter-spacing: -0.01em; }
.nachher .s-hotel .m-titel em { font-style: italic; }
.s-baeckerei { --m-grund: #F7C95C; --m-tinte: #3A1D0C; --m-akzent: #3A1D0C; --m-knopftext: #F7C95C; }
.nachher .s-baeckerei { font-family: "Fraunces", serif; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 14; }
.nachher .s-baeckerei .m-titel, .nachher .s-baeckerei .m-marke, .nachher .s-baeckerei .m-seite strong { font-weight: 800; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -0.01em; }
.nachher .s-baeckerei .m-titel { font-size: 8.2cqw; }
.s-festival { --m-grund: #2B1B6B; --m-tinte: #FFF3FB; --m-akzent: #FF4FD8; --m-knopftext: #2B1B6B; }
.nachher .s-festival { font-family: "Syne", sans-serif; }
.nachher .s-festival .m-titel, .nachher .s-festival .m-marke { font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.nachher .s-festival .m-titel { font-size: 7.2cqw; line-height: .9; }
.nachher .s-festival .m-seite strong { font-weight: 800; }
.s-kletter { --m-grund: #CFC8BB; --m-tinte: #121212; --m-akzent: #E2491B; }
.nachher .s-kletter { font-family: "Instrument Sans", sans-serif; }
.nachher .s-kletter .m-titel, .nachher .s-kletter .m-marke, .nachher .s-kletter .m-seite strong { font-family: "Big Shoulders Display", sans-serif; font-weight: 900; text-transform: uppercase; }
.nachher .s-kletter .m-titel { font-size: 11cqw; line-height: .86; }
@container (max-width: 560px) {
  .nachher .s-hotel .m-titel { font-size: 14cqw; }
  .nachher .s-baeckerei .m-titel { font-size: 11cqw; }
  .nachher .s-festival .m-titel { font-size: 7cqw; }
  .nachher .s-kletter .m-titel { font-size: 14cqw; }
}

/* 4. It is real */
.echt { padding: var(--luft) var(--rand); }
.echt-kopf { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 48px; }
.echt-kopf p { margin: 0; max-width: 40ch; color: var(--tinte-weich); }
@media (max-width: 860px) { .echt-kopf { grid-template-columns: 1fr; } }
.probe { border-top: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); padding: 16px 0 26px; }
.probe-kopf { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: 14px; color: var(--grau); }
.probe-kopf b { color: var(--tinte); margin-right: 6px; }
.probe-feld { display: block; }
.probe-feld textarea { display: block; width: 100%; resize: none; overflow: hidden; margin: 10px 0 6px; padding: 0; border: 0; background: transparent; color: var(--tinte); font: 400 clamp(52px, 8.4vw, 150px)/1.15 "Life Science Sans Trial 01", sans-serif; letter-spacing: -0.01em; caret-color: var(--violett); }
.probe-feld textarea:focus { outline: none; }
.probe-feld textarea:focus-visible { outline: none; box-shadow: 0 3px 0 var(--violett); }
.probe-alphabet { margin: 0; font: 400 clamp(19px, 1.8vw, 28px)/1.4 "Life Science Sans Trial 01", sans-serif; color: var(--tinte-weich); overflow-wrap: anywhere; }
.echt-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 64px; margin-top: 56px; align-items: start; }
.konzept { margin: 0; }
.konzept img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px #E6E2EE, 0 24px 60px -30px rgba(30, 22, 51, .35); transform: rotate(-1.2deg); }
.konzept figcaption { margin-top: 18px; font-size: 15px; color: var(--tinte-weich); max-width: 46ch; }
.konzept figcaption b { color: var(--tinte); }
.zweite { background: var(--sonne); padding: clamp(24px, 3vw, 44px); border-radius: 6px; }
.zweite-wort { margin: 0; font: 400 clamp(56px, 6.6vw, 112px)/1 "MakeFont Sans 01", sans-serif; }
.zweite-meta { margin: 22px 0 0; font-size: 15px; }
.zweite-meta b { margin-right: 6px; }
.ehrlich { margin: 26px 0 0; font: italic 400 clamp(22px, 2vw, 30px)/1.2 var(--zeile); max-width: 30ch; }
@media (max-width: 860px) { .echt-reihe { grid-template-columns: 1fr; } }

/* 5. Turning point */
.wende { background: var(--violett-hell); padding: var(--luft) var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px 64px; align-items: start; }
.wende-text { position: sticky; top: 40px; }
.wende-text h2 { font-size: clamp(44px, 5.4vw, 92px); }
.wende-text p { margin: 28px 0 0; max-width: 38ch; font-size: clamp(19px, 1.5vw, 22px); color: var(--tinte-weich); }
.zeit { list-style: none; margin: 0; padding: 0; }
.zeit li { display: grid; grid-template-columns: 11.5rem 1fr; align-items: baseline; gap: 4px 24px; padding: 14px 0 18px; border-top: 1px solid rgba(30, 22, 51, .22); }
.z-art { font-size: 14px; font-weight: 600; color: var(--grau); }
.z-wort { font-size: clamp(60px, 7.6vw, 132px); line-height: 1; white-space: nowrap; color: var(--tinte); }
.z-holz .z-wort { font-family: "Big Shoulders Display"; font-weight: 900; text-transform: uppercase; color: #8C4A2F; }
.z-metall .z-wort { font-family: "Bodoni Moda"; font-weight: 500; font-variation-settings: "opsz" 96; color: #3E4A5C; }
.z-licht .z-wort { font-family: "Gloock"; color: #C2447A; }
.z-pixel .z-wort { font-family: "Pixelify Sans"; font-weight: 500; color: #2F7FB8; }
.z-agent { border-top: 2px solid var(--tinte) !important; }
.z-agent .z-art { color: var(--violett); }
.z-agent .z-wort { font-family: "MakeFont Sans 01"; font-size: clamp(76px, 10vw, 176px); color: var(--violett); }
@media (max-width: 960px) {
  .wende { grid-template-columns: 1fr; }
  .wende-text { position: static; }
}
@media (max-width: 560px) { .zeit li { grid-template-columns: 1fr; } }

/* 6. Add it once */
.zugang { padding: var(--luft) var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; align-items: center; }
.zugang-text h2 { margin-bottom: 32px; }
.zugang-gross { margin: 0 0 20px; font: 500 clamp(22px, 1.9vw, 28px)/1.3 var(--text); letter-spacing: -0.01em; max-width: 30ch; }
.zugang-text > p:not(.zugang-gross):not(.kanaele-status) { margin: 0; max-width: 44ch; color: var(--tinte-weich); }
.kanaele { list-style: none; display: grid; gap: 0; margin: 32px 0 0; padding: 0; max-width: 520px; }
.kanaele li { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(30, 22, 51, .2); color: var(--tinte-weich); font-size: 16px; }
.kanaele li:last-child { border-bottom: 1px solid rgba(30, 22, 51, .2); }
.kanaele b { font: 800 26px/1 var(--titel); font-stretch: 80%; color: var(--tinte); }
.kanaele-status { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--violett); }

.dialog { margin: 0; padding: clamp(24px, 3vw, 40px); background: var(--rosa-hell); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; }
.dialog-schild { align-self: flex-start; margin: 0 0 6px; font: 700 12px/1 var(--text); padding: 6px 10px; border-radius: 99px; border: 1.5px dashed var(--tinte); }
.dialog p { margin: 0; }
.dialog-person, .dialog-agent { padding: 14px 18px; max-width: 44ch; font-size: 17px; line-height: 1.45; border-radius: 16px; }
.dialog-person { align-self: flex-end; background: var(--tinte); color: #FFFFFF; border-bottom-right-radius: 4px; }
.dialog-agent { align-self: flex-start; background: var(--papier); color: var(--tinte); border-bottom-left-radius: 4px; box-shadow: 0 1px 0 rgba(30, 22, 51, .08); }
.dialog-ergebnis { display: grid; gap: 4px; }
.ergebnis-probe { margin-top: 12px !important; padding: 18px 20px 4px; background: var(--sonne); border-radius: 10px 10px 0 0; color: #3A1D0C; font: 800 clamp(32px, 4.6vw, 68px)/1 "Fraunces", serif; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.ergebnis-klein { padding: 4px 20px 18px; background: var(--sonne); border-radius: 0 0 10px 10px; color: #3A1D0C; font: 400 18px/1.3 "Fraunces", serif; font-variation-settings: "SOFT" 100, "opsz" 14; }
.dialog figcaption { margin-top: 8px; font-size: 13px; color: var(--tinte-weich); }
@media (max-width: 960px) { .zugang { grid-template-columns: 1fr; } }

/* 7. Invitation */
.kontakt { padding: var(--luft) var(--rand); background: var(--violett); color: #FFFFFF; }
.kontakt-kopf { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 48px; }
.kontakt-kopf h2 { max-width: 15ch; }
.kontakt-kopf p { margin: 0; max-width: 34ch; color: #EDE8FF; font-size: 19px; }
@media (max-width: 860px) { .kontakt-kopf { grid-template-columns: 1fr; } }
.wahl { border: 0; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span { display: block; height: 100%; padding: 20px 22px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 6px; color: #EDE8FF; font-size: 16px; }
.wahl b { display: block; margin-bottom: 4px; font: 800 30px/1.05 var(--titel); font-stretch: 80%; color: #FFFFFF; }
.wahl input:checked + span { background: var(--sonne); border-color: var(--sonne); color: var(--tinte); }
.wahl input:checked + span b { color: var(--tinte); }
.wahl input:focus-visible + span { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.felder { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: end; }
.felder label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #EDE8FF; }
.felder input { font: 400 18px/1.3 var(--text); padding: 14px; border: 0; background: #FFFFFF; color: var(--tinte); border-radius: 4px; }
.felder input:focus { outline: 3px solid var(--sonne); outline-offset: 0; }
.felder button { font: 700 18px/1 var(--text); padding: 16px 26px; border: 0; border-radius: 4px; background: var(--sonne); color: var(--tinte); cursor: pointer; }
.felder button:hover { background: #FFFFFF; }
.formular-hinweis { margin: 14px 0 0; min-height: 1.5em; font-size: 15px; color: #EDE8FF; }
.kontakt-adresse { margin: 8px 0 0; }
.platzhalter { background: rgba(255, 255, 255, .18); padding: 2px 8px; border-radius: 4px; }
@media (max-width: 960px) { .wahl, .felder { grid-template-columns: 1fr; } .felder button { justify-self: start; } }

.fuss { padding: 28px var(--rand) 44px; font-size: 13px; color: var(--grau); }
.fuss p { margin: 0; max-width: 120ch; }

/* Compatibility strip: which tools this is for, visible right under the hero. */
.kompatibel { margin-top: clamp(28px, 4vw, 48px); padding: 22px 0 6px; border-top: 1px solid rgba(23, 18, 43, .12); }
.kompatibel-titel { margin: 0 0 14px; font: 700 15px/1.2 var(--text); }
.kompatibel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.kompatibel-liste li { font: 600 clamp(16px, 1.5vw, 20px)/1 var(--text); padding: 10px 16px; border-radius: 999px; background: #F3EFFF; color: #17122B; }
.kompatibel-liste li:last-child { background: transparent; box-shadow: inset 0 0 0 1.5px #17122B; }
.kompatibel-notiz { margin: 12px 0 0; font-size: 13px; color: #6A6478; }

/* Install: the technical part, dark on purpose so developers find it. */
.install { background: var(--tinte); color: #FFFFFF; padding: var(--luft) var(--rand); }
.install-kopf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 56px; align-items: end; margin-bottom: 40px; }
.install h2 { margin: 0; font: 800 clamp(44px, 6vw, 96px)/.95 var(--titel); font-stretch: 80%; }
.install-kopf p { margin: 0; max-width: 46ch; color: #D8D2E8; font-size: 19px; }
.install-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.install-tabs button { font: 700 16px/1 var(--text); padding: 12px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #FFFFFF; cursor: pointer; }
.install-tabs button[aria-selected="true"] { background: var(--sonne); border-color: var(--sonne); color: var(--tinte); }
.install-panel { background: #2C2346; border-radius: 14px; padding: 26px; }
.install-label { margin: 0 0 12px; font-weight: 700; color: var(--sonne); }
.install-zeile { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.install-zeile code { flex: 1 1 360px; font: 500 clamp(15px, 1.4vw, 19px)/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #120D22; color: #FFFFFF; padding: 16px 18px; border-radius: 10px; overflow-wrap: anywhere; }
.kopieren { font: 700 16px/1 var(--text); padding: 0 22px; min-height: 52px; border: 0; border-radius: 10px; background: var(--violett); color: #FFFFFF; cursor: pointer; }
.kopieren:hover { background: #8466FF; }
.install-notiz { margin: 14px 0 0; font-size: 15px; color: #C9C1DD; }
.install-notiz a { color: #FFFFFF; }
.api-fluss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 600 clamp(17px, 1.6vw, 22px)/1.3 var(--text); }
.api-fluss span:not(.pfeil) { background: #120D22; padding: 12px 16px; border-radius: 10px; }
.api-fluss .pfeil { color: var(--sonne); font-size: 14px; font-weight: 700; }
.install-unten { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 16px; }
.paket-box, .agent-box { background: #2C2346; border-radius: 14px; padding: 26px; }
.install h3 { margin: 0 0 16px; font: 700 22px/1.2 var(--text); }
.baum { list-style: none; margin: 0; padding: 0; }
.baum li { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); }
.baum li:first-child { border-top: 0; }
.baum code { font: 500 15px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #FFFFFF; }
.baum span { color: #C9C1DD; font-size: 15px; }
.tut { margin: 0; padding-left: 1.2em; color: #E6E1F2; }
.tut li { margin-bottom: 10px; }
.install-status { margin: 20px 0 0; font-size: 13px; color: #A99FC0; }
@media (max-width: 900px) { .install-kopf, .install-unten { grid-template-columns: 1fr; } }

/* Static header with scattered specimen letters and hand-drawn marks. */
.auftritt-buehne { position: relative; }
.deko { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.auftritt-wort-rahmen { position: relative; z-index: 1; }
.deko .g { position: absolute; line-height: 1; }
.g1 { font-family: "Monoton X"; color: #FF6FAE; font-size: clamp(48px, 6vw, 96px); left: 4%; top: 18%; transform: rotate(-12deg); }
.g2 { font-family: "Fraunces"; font-weight: 900; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; color: #FFC93C; font-size: clamp(56px, 7vw, 120px); left: 13%; bottom: 8%; transform: rotate(8deg); }
.g3 { font-family: "Shrikhand X"; color: #6A45FF; font-size: clamp(52px, 6.5vw, 110px); right: 6%; top: 14%; transform: rotate(10deg); }
.g4 { font-family: "Anybody X"; color: #8FD3FF; font-size: clamp(40px, 5vw, 84px); right: 15%; bottom: 6%; transform: rotate(-6deg); }
.g5 { font-family: "Abril Fatface X"; color: #FF6A4D; font-size: clamp(44px, 5vw, 88px); left: 27%; top: 4%; transform: rotate(-4deg); }
.g6 { font-family: "Big Shoulders Display"; font-weight: 900; color: #C9BBFF; font-size: clamp(50px, 6vw, 100px); right: 30%; top: 2%; transform: rotate(7deg); }
.g7 { font-family: "Rubik Mono One X"; color: #FFC93C; font-size: clamp(34px, 4vw, 64px); right: 2%; top: 52%; transform: rotate(-14deg); }
.g8 { font-family: "Life Science Sans Trial 01"; color: #6A45FF; font-size: clamp(30px, 3vw, 48px); left: 2%; top: 58%; transform: rotate(-3deg); }
.g9 { font-family: "Bungee X"; color: #FF6FAE; font-size: clamp(34px, 3.8vw, 60px); left: 40%; bottom: 0; transform: rotate(5deg); }
.g10 { font-family: "Climate Crisis X"; color: #8FD3FF; font-size: clamp(38px, 4.4vw, 72px); right: 42%; bottom: 2%; transform: rotate(-9deg); }
.deko .d { position: absolute; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.d1 { width: 34px; stroke: #6A45FF; left: 22%; top: 30%; }
.d2 { width: 120px; stroke: #FF6FAE; right: 20%; top: 36%; }
.d3 { width: 58px; stroke: #FFC93C; left: 58%; top: 8%; }
.d4 { width: 26px; stroke: #FF6A4D; right: 9%; bottom: 30%; }
@media (max-width: 700px) {
  .g1, .g5, .g6, .g9, .g10, .d1, .d2, .d3, .d4 { display: none; }
  .g3 { top: 10%; right: 2%; } .g7 { top: 58%; right: 0; } .g8 { top: 50%; left: 0; }
  .g2 { bottom: -2%; left: 4%; } .g4 { bottom: -2%; right: 4%; }
}

/* Install: one tab per tool, two steps, one line to copy. */
.installieren { padding: var(--luft) var(--rand); background: var(--flieder-hell); }
.installieren-kopf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 56px; align-items: end; margin-bottom: 40px; }
.installieren h2 { margin: 0; font: 800 clamp(44px, 6vw, 96px)/.95 var(--titel); font-stretch: 80%; }
.installieren-kopf p { margin: 0; max-width: 44ch; font-size: 20px; }
.it { background: var(--weiss); border-radius: 20px; padding: clamp(18px, 2.4vw, 32px); box-shadow: 0 24px 60px -30px rgba(58, 43, 255, .35); }
.it-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.it-tabs button { font: 700 16px/1 var(--text); padding: 12px 18px; border-radius: 999px; border: 0; background: var(--flieder-hell); color: var(--tinte); cursor: pointer; }
.it-tabs button[aria-selected="true"] { background: var(--tinte); color: var(--weiss); }
.it-weg { margin: 0 0 14px; font: 700 15px/1.2 var(--text); color: var(--violett); }
.it-schritte { margin: 0; padding: 0; list-style: none; counter-reset: it; display: grid; gap: 16px; }
.it-schritte li { counter-increment: it; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
.it-schritte li::before { content: counter(it); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--sonne); display: grid; place-items: center; font: 700 17px/1 var(--text); }
.it-schritte p { margin: 5px 0 0; font-size: 19px; }
.it-zeile { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.it-zeile code { flex: 1 1 340px; font: 500 clamp(15px, 1.3vw, 18px)/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--tinte); color: var(--weiss); padding: 15px 18px; border-radius: 12px; overflow-wrap: anywhere; }
.kopieren { font: 700 16px/1 var(--text); padding: 0 22px; min-height: 50px; border: 0; border-radius: 12px; background: var(--violett); color: var(--weiss); cursor: pointer; }
.kopieren:hover { background: var(--violett-tief); }
.it-notiz { margin: 16px 0 0; font-size: 14px; color: var(--grau); }
.kacheln-titel { margin: clamp(48px, 6vw, 80px) 0 18px; font: 700 24px/1.2 var(--text); }
.programme { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.programme li { background: var(--weiss); border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; }
.programme b { font-size: 18px; }
.programme span { font-size: 14px; color: var(--grau); }
.programme em { justify-self: start; margin-top: 6px; font: 700 12px/1 var(--text); font-style: normal; padding: 5px 8px; border-radius: 99px; background: var(--sonne-hell); color: #6B5200; }
@media (max-width: 860px) { .installieren-kopf { grid-template-columns: 1fr; } }
.kopf-rechts { display: flex; gap: 22px; align-items: center; } .kopf-install { font-weight: 600; text-decoration: none; }

/* One install prompt: in the hero and as the first option in the install section. */
.held-prompt { margin: 22px 0 6px; }
.held-prompt-label { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.held-prompt .it-zeile { margin-top: 0; }
.held-prompt code { flex-basis: 260px; font-size: 15px; }
.einfach { background: var(--tinte); color: var(--weiss); border-radius: 20px; padding: clamp(22px, 3vw, 40px); margin-bottom: 26px; }
.einfach-label { margin: 0 0 14px; font: 700 16px/1.2 var(--text); color: var(--sonne); }
.einfach-zeile code { background: #0F0A1F; font-size: clamp(16px, 1.6vw, 21px); padding: 18px 20px; }
.einfach-zeile .kopieren { background: var(--sonne); color: var(--tinte); min-height: 58px; }
.einfach-zeile .kopieren:hover { background: #FFE27A; }
.einfach-was { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.einfach-was li { border-top: 1px solid rgba(255,255,255,.2); padding-top: 14px; color: #D6CFE8; font-size: 17px; }
.einfach-was b { display: block; color: var(--weiss); margin-bottom: 4px; }
.einfach-link { margin: 18px 0 0; font-size: 15px; }
.einfach-link a { color: var(--weiss); }
.it-oder { margin: 0 0 14px; font-weight: 700; font-size: 17px; }
@media (max-width: 860px) { .einfach-was { grid-template-columns: 1fr; } }

/* Redesign: light nav instead of the framed bar. */
.kopf { display: none; }
.nav { position: absolute; z-index: 6; top: calc(32px + 20px); left: var(--rand); right: var(--rand); display: flex; justify-content: space-between; align-items: center; }
.nav-marke { display: inline-flex; align-items: center; gap: 8px; font: 800 22px/1 var(--titel); font-stretch: 85%; text-decoration: none; color: var(--tinte); }
.nav-stern { width: 18px; fill: none; stroke: var(--rosa); stroke-width: 3.5; stroke-linecap: round; }
.nav-links { display: flex; align-items: center; gap: 26px; font: 600 16px/1 var(--text); }
.nav-links a { color: var(--tinte); text-decoration: none; }
.nav-links a:not(.nav-knopf):hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-knopf { padding: 12px 18px; border-radius: 999px; background: var(--tinte); color: var(--weiss) !important; }
.nav-knopf:hover { background: var(--violett); }
@media (max-width: 700px) { .nav-links a:not(.nav-knopf) { display: none; } }

/* Redesign: more room for the headline. */
.auftritt { min-height: calc(100svh - 32px); padding-top: calc(var(--rand) + 110px); padding-bottom: clamp(40px, 5vw, 72px); }
.auftritt-buehne { min-height: clamp(360px, 58vh, 640px); display: grid; }
.auftritt-wort-rahmen { height: auto !important; min-height: clamp(320px, 52vh, 600px); }
.auftritt-schrift { position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0; font-size: 13px; }
.held-prompt { margin: 20px 0 8px; max-width: 560px; }
.held-prompt-label { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.held-prompt code { flex-basis: 240px; font-size: 15px; }

/* Compatibility band between hero and the comparison. */
.kompat-band { position: relative; padding: clamp(40px, 5vw, 72px) var(--rand); background: var(--flieder-hell); overflow: hidden; }
.kompat-band .kompatibel { position: relative; z-index: 1; margin-top: 0; border-top: 0; padding-top: 0; text-align: center; }
.kompat-band .kompatibel-liste { justify-content: center; }
.kompat-band .kompatibel-liste li { background: var(--weiss); }

/* Scattered letters and hand-drawn marks, carried through every section. */
.schnitt, .echt, .wende, .zugang, .installieren, .kontakt { position: relative; overflow: hidden; }
.streu { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.streu + * , .streu ~ * { position: relative; z-index: 1; }
.sg { position: absolute; line-height: 1; }
.sd { position: absolute; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.notiz { position: absolute; font: italic 400 24px/1 var(--zeile); color: #6A45FF; transform: rotate(-4deg); }
@media (max-width: 700px) {
  .streu .sg { font-size: 44px !important; opacity: .8; }
  .streu .sd, .streu .notiz { display: none; }
}

/* Proof chain: sentence, drawing, live font. */
.echt-kopf h2 { max-width: 15ch; }
.kette { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1.25fr 1.35fr; gap: 16px; align-items: stretch; }
.kette-glied { position: relative; background: var(--weiss); border-radius: 18px; padding: 24px; box-shadow: 0 20px 50px -30px rgba(30, 22, 51, .35); display: flex; flex-direction: column; gap: 14px; }
.kette-glied + .kette-glied::before { content: ""; position: absolute; left: -16px; top: 50%; width: 16px; height: 2px; background: var(--tinte); }
.kette-schritt { font: 700 14px/1 var(--text); color: var(--violett); }
.kette-satz { background: var(--sonne); }
.kette-satz blockquote { margin: 0; font: italic 400 clamp(22px, 2vw, 28px)/1.25 var(--zeile); }
.kette-bild img { width: 100%; height: auto; border-radius: 10px; display: block; }
.kette-font { background: var(--tinte); color: var(--weiss); }
.kette-font .kette-schritt { color: var(--sonne); }
.kette-font textarea { width: 100%; resize: none; border: 0; background: transparent; color: var(--weiss); font: 400 clamp(40px, 3.6vw, 60px)/1.05 "Life Science Sans Trial 01", sans-serif; padding: 0; overflow: hidden; }
.kette-font textarea:focus { outline: 2px dashed var(--sonne); outline-offset: 6px; }
.kette-meta { margin: auto 0 0; font-size: 14px; color: #D6CFE8; }
.echt-ehrlich { margin: 22px 0 0; font-size: 14px; color: var(--grau); max-width: 70ch; }
@media (max-width: 960px) { .kette { grid-template-columns: 1fr; } .kette-glied + .kette-glied::before { left: 50%; top: -16px; width: 2px; height: 16px; } }

/* Your name, nine voices: sticky name bar over full-width colour bands. */
.namen { padding-top: var(--luft); }
.namen-kopf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 56px; align-items: end; padding: 0 var(--rand) 36px; }
.namen-kopf h2 { margin: 0; font: 800 clamp(44px, 6vw, 96px)/.95 var(--titel); font-stretch: 80%; }
.namen-kopf p { margin: 0; max-width: 44ch; font-size: 19px; }
.namenleiste { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 14px var(--rand); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1.5px solid var(--tinte); border-bottom: 1.5px solid var(--tinte); }
.namenleiste label { font-weight: 700; }
.namenleiste input { font: 500 24px/1.2 var(--text); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 14px; padding: 8px 16px; width: min(420px, 100%); }
.namenleiste input:focus { outline: none; box-shadow: 0 0 0 4px var(--sonne); }
.namenleiste-hinweis { margin-left: auto; font: italic 400 24px/1 var(--zeile); color: var(--violett); transform: rotate(-3deg); }
.namen-baender { list-style: none; margin: 0; padding: 0; }
.nb { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(150px, 22vw, 280px); padding: 20px var(--rand); overflow: hidden; }
.nb-mood { position: absolute; left: var(--rand); top: 16px; font: italic 400 28px/1 var(--zeile); transform: rotate(-3deg); opacity: .85; }
.nb-font { position: absolute; right: var(--rand); bottom: 14px; font-size: 13px; opacity: .75; }
.nb-name { display: inline-block; white-space: nowrap; line-height: 1.05; font-size: 140px; }
.k-calm { background: #BFE3FF; color: #17122B; } .k-calm .nb-name { font-family: "Instrument Serif"; font-style: italic; }
.k-loud { background: #FFC93C; color: #17122B; } .k-loud .nb-name { font-family: "Anybody X"; text-transform: uppercase; }
.k-heavy { background: #17122B; color: #FFC93C; } .k-heavy .nb-name { font-family: "Climate Crisis X"; text-transform: uppercase; }
.k-glam { background: #FFD6EC; color: #B0245F; } .k-glam .nb-name { font-family: "Abril Fatface X"; }
.k-tall { background: #FF6A4D; color: #17122B; } .k-tall .nb-name { font-family: "Big Shoulders Display"; font-weight: 900; text-transform: uppercase; }
.k-neon { background: #1E1633; color: #FF6FAE; } .k-neon .nb-name { font-family: "Monoton X"; text-transform: uppercase; }
.k-sweet { background: #C4F0D8; color: #17122B; } .k-sweet .nb-name { font-family: "Shrikhand X"; }
.k-wide { background: #DCD2FF; color: #4E2EE0; } .k-wide .nb-name { font-family: "Archivo X"; text-transform: uppercase; }
.k-ours { background: #6A45FF; color: #FFFFFF; } .k-ours .nb-name { font-family: "MakeFont Sans 01"; }
.namen-notiz { margin: 18px 0 0; padding: 0 var(--rand); font-size: 14px; color: var(--grau); }
@media (max-width: 820px) { .namen-kopf { grid-template-columns: 1fr; } .namenleiste-hinweis { display: none; } .nb-mood { font-size: 22px; } }

/* Runde 5: calmer, roomier hero */
.auftritt { padding-top: calc(var(--rand) + 130px); }
.auftritt-buehne { min-height: clamp(420px, 62vh, 700px); }
.auftritt-wort-rahmen { min-height: clamp(380px, 58vh, 660px); }
.auftritt-unten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px 80px; padding-top: 36px; }
.auftritt-nutzen { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.3; max-width: 26ch; }
.held-prompt { margin: 0 0 12px; max-width: none; }
.status a { color: var(--violett); font-weight: 700; }
.g1 { left: 3%; top: 6%; } .g5 { left: 22%; top: 2%; } .g6 { right: 26%; top: 0; } .g3 { right: 4%; top: 8%; }
.g8 { left: 1%; top: 46%; } .g7 { right: 1%; top: 44%; }
.g2 { left: 9%; bottom: 4%; } .g9 { left: 36%; bottom: -2%; } .g10 { right: 38%; bottom: -1%; } .g4 { right: 11%; bottom: 4%; }
.d1 { left: 13%; top: 30%; } .d2 { right: 8%; top: 72%; } .d3 { left: 52%; top: 0; } .d4 { right: 16%; top: 30%; }

/* Compatibility pills: hover shows the way in, click opens the setup. */
.pille { display: inline-flex; align-items: center; gap: 0; padding: 10px 16px; border-radius: 999px; background: var(--weiss); color: var(--tinte); text-decoration: none; font-weight: 600; font-size: clamp(16px, 1.5vw, 20px); line-height: 1; transition: background .2s, color .2s; }
.pille-weg { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: .75em; font-weight: 700; transition: max-width .3s ease, opacity .2s, margin .3s; }
a.pille:hover, a.pille:focus-visible { background: var(--tinte); color: var(--weiss); }
a.pille:hover .pille-weg, a.pille:focus-visible .pille-weg, .pille-still:hover .pille-weg { max-width: 12em; opacity: 1; margin-left: 10px; }
a.pille:hover .pille-weg { color: var(--sonne); }
.pille-still { color: var(--grau); }
.kompatibel-liste li { background: none !important; padding: 0 !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { .pille, .pille-weg { transition: none; } }

/* Comparison: closing line centred, calmer type, less space below. */
.schnitt { padding-bottom: clamp(56px, 7vw, 96px); }
.schnitt-schluss { margin: 56px auto 0; max-width: 34ch; text-align: center; font: 600 clamp(24px, 2.4vw, 36px)/1.3 var(--titel); font-stretch: 90%; color: var(--tinte); }

/* Letters float in, drift, and follow the mouse a little. */
.deko .g, .deko .d, .streu .sg, .streu .sd { transition: translate .6s cubic-bezier(.2, .8, .2, 1); }
.bewegt .deko .g, .bewegt .deko .d, .bewegt .streu .sg, .bewegt .streu .sd { animation: einflug .9s cubic-bezier(.2, 1.4, .4, 1) backwards, schweben var(--dauer, 7s) ease-in-out var(--start, 1s) infinite alternate; }
@keyframes einflug { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes schweben { from { rotate: -3deg; } to { rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .bewegt .deko *, .bewegt .streu * { animation: none !important; transition: none !important; } }
.js-bewegung .deko .g, .js-bewegung .deko .d, .js-bewegung .streu .sg, .js-bewegung .streu .sd { opacity: 0; }
.js-bewegung .bewegt .deko .g, .js-bewegung .bewegt .deko .d, .js-bewegung .bewegt .streu .sg, .js-bewegung .bewegt .streu .sd { opacity: 1; }
.installieren { padding-bottom: clamp(64px, 8vw, 110px); }

/* Space invaders behind the headline */
.spielfeld { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.spiel-an .deko { display: none; }
.spiel-an .auftritt-wort-rahmen { position: relative; z-index: 1; pointer-events: none; }
.spiel-an .auftritt-wort { text-shadow: 0 0 18px #FFFFFF, 0 0 36px #FFFFFF; }
.spiel-an { cursor: crosshair; }
@media (max-width: 800px) { .auftritt-unten { grid-template-columns: 1fr; gap: 24px; } .auftritt-nutzen { max-width: none; } }


/* Arcade theme: pixel type from the first computer games next to type made by agents. */
:root { --titel: "Chakra Petch", system-ui, sans-serif; --pixel: "Chakra Petch", system-ui, sans-serif; --schirm: #16122E; }
h2, .installieren h2, .namen-kopf h2 { font-family: var(--titel) !important; font-weight: 700 !important; font-stretch: normal !important; letter-spacing: -0.015em; line-height: .95 !important; }
.schnitt-kopf h2, .echt-kopf h2, .wende h2, .zugang h2, .installieren h2, .namen-kopf h2, .kontakt h2 { font-size: clamp(44px, 5.6vw, 96px) !important; }
.arcade-label { margin: 0 0 16px; font: 700 14px/1.4 var(--pixel); letter-spacing: .08em; color: var(--violett); letter-spacing: .02em; text-transform: uppercase; }
.arcade-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: currentColor; box-shadow: 0 0 0 0 currentColor; vertical-align: 1px; }
.kompatibel .arcade-label { text-align: center; }
.kompatibel-titel { font-family: var(--titel); font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; line-height: 1.05; }

/* HUD above the game */
.hud { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; font: 400 12px/1 var(--pixel); color: var(--tinte); pointer-events: none; }
.hud b { font-weight: 400; color: var(--violett); margin-left: 8px; }
.hud-tipp { position: absolute; z-index: 2; left: 50%; bottom: 44px; translate: -50% 0; margin: 0; font: 400 10px/1 var(--pixel); color: var(--grau); animation: blinken 1.2s steps(2) infinite; pointer-events: none; }
@keyframes blinken { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hud-tipp { animation: none; } }
@media (max-width: 700px) { .hud { font-size: 9px; } .hud span:nth-child(3) { display: none; } .hud-tipp { display: none; } }
.auftritt-buehne::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--tinte) 0 8px, transparent 8px 16px); z-index: 1; }
.auftritt-unten { border-top: 0 !important; }

/* Arcade buttons: square, with a hard pixel shadow. */
.nav-knopf, .kopieren, .formular button, .knopf, .it-tabs button[aria-selected="true"] { border-radius: 0 !important; box-shadow: 4px 4px 0 var(--sonne); }
.nav-knopf:active, .kopieren:active { translate: 2px 2px; box-shadow: 2px 2px 0 var(--sonne); }
.it-zeile code, .it, .it-tabs button { border-radius: 0 !important; }
.pille { border-radius: 0 !important; box-shadow: inset 0 0 0 2px var(--tinte); }
a.pille:hover, a.pille:focus-visible { box-shadow: 4px 4px 0 var(--sonne), inset 0 0 0 2px var(--tinte); }
.namenleiste label { font: 700 15px/1.4 var(--pixel); letter-spacing: .04em; }
.namenleiste input { border-radius: 0 !important; font-family: var(--pixel) !important; font-weight: 600; font-size: 22px !important; }
.nb-rang { font: 700 15px/1 var(--pixel); margin-right: 8px; vertical-align: 3px; }

/* Install: a dark arcade screen with faint scanlines. */
.installieren { background: var(--schirm) repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px) !important; color: #FFFFFF; }
.installieren h2 { color: #FFFFFF; }
.installieren .arcade-label { color: var(--sonne); }
.installieren-kopf p, .it-notiz { color: #CFC8E6 !important; }
.it-notiz a { color: #FFFFFF; }
.installieren .it { box-shadow: 8px 8px 0 var(--rosa); }

.titel-block { min-width: 0; }
.titel-block h2 { margin: 0; max-width: 18ch !important; }
.schnitt-kopf h2 { max-width: 18ch !important; }
.hud-banner { position: absolute; z-index: 2; left: 50%; top: 0; translate: -50% 0; margin: 0; white-space: nowrap; font: 700 clamp(13px, 1.3vw, 17px)/1 var(--pixel); letter-spacing: .06em; color: var(--tinte); background: var(--sonne); padding: 8px 12px; box-shadow: 4px 4px 0 var(--tinte); opacity: 0; pointer-events: none; }
.hud-banner.zeigen { animation: banner 2.2s steps(1) forwards; }
@keyframes banner { 0% { opacity: 1; } 12% { opacity: 0; } 20% { opacity: 1; } 32% { opacity: 0; } 40%, 85% { opacity: 1; } 100% { opacity: 0; } }
.spiel-an { user-select: none; -webkit-user-select: none; }

/* H4: cycling hero from H, small pause control */
.auftritt-buehne > .pause { position: absolute; right: 0; bottom: 0; top: auto; height: auto; width: auto; grid-area: auto; align-self: end; z-index: 3; font-size: 13px; padding: 7px 12px; border-radius: 0; }
.auftritt-buehne::after { display: none; }
.auftritt-unten { border-top: 1px solid var(--tinte) !important; }

/* Bonus level: the game on a dark arcade screen */
.spiel { padding: var(--luft) var(--rand); background: #FFFFFF; }
.spiel-kopf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 56px; align-items: end; margin-bottom: 36px; }
.spiel-kopf h2 { margin: 0; }
.spiel-kopf p { margin: 0; max-width: 46ch; font-size: 19px; color: var(--tinte-weich); }
.spiel-schirm { position: relative; height: clamp(420px, 60vh, 620px); background: var(--schirm) repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); box-shadow: 10px 10px 0 var(--sonne); overflow: hidden; cursor: crosshair; user-select: none; -webkit-user-select: none; touch-action: none; }
.spiel-schirm .spielfeld { position: absolute; inset: 0; }
.spiel-anzeige { position: absolute; z-index: 2; top: 14px; left: 18px; right: 18px; display: flex; justify-content: space-between; font: 700 15px/1 var(--titel); letter-spacing: .08em; text-transform: uppercase; color: #CFC8E6; pointer-events: none; }
.spiel-anzeige b { color: var(--sonne); margin-left: 8px; }
.spiel-schirm .hud-banner { top: 12px; }
.spiel-ruhig { display: none; position: absolute; inset: auto 24px 24px; margin: 0; color: #CFC8E6; }
@media (prefers-reduced-motion: reduce) { .spiel-ruhig { display: block; } }
@media (max-width: 820px) { .spiel-kopf { grid-template-columns: 1fr; } }
/* Optical centre: lift the cycling headline by 10 percent of its stage. */
.auftritt-wort-rahmen { translate: 0 -10%; }
.installieren .it { color: var(--tinte); }

/* Runde 2 nach der Kritik */
.auftritt-aktion .held-knopf { display: inline-block; margin: 0 0 22px; padding: 16px 24px; background: var(--violett); color: #FFFFFF; font: 700 17px/1 var(--text); text-decoration: none; }
.auftritt-aktion .held-knopf:hover { background: var(--tinte); }
.held-prompt-label { color: var(--grau); font-weight: 600; }
.install-dialog { max-width: 760px; margin: 0 0 36px; }
.install-dialog .dialog { margin: 0; }
.spiel-ende { margin: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font: 700 clamp(20px, 2vw, 26px)/1.2 var(--titel); }
.spiel-ende .knopf { font: 700 16px/1 var(--text); padding: 14px 20px; background: var(--tinte); color: #FFFFFF; text-decoration: none; }
.spiel-schirm { touch-action: pan-y; }

@media (max-width: 700px) {
  .auftritt-buehne { min-height: 0; }
  .auftritt-wort-rahmen { min-height: clamp(220px, 42vh, 360px); }
}
@media (max-width: 700px) { .nb { padding-top: 50px; padding-bottom: 42px; } }

/* Runde 3: sticky menu, calmer hero bottom, pills that do not push each other */
:root { --nav-h: 72px; }
.nav { position: sticky; top: 0; left: auto; right: auto; z-index: 50; height: var(--nav-h); margin: 0; padding: 0 var(--rand); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(30, 22, 51, .08); }
.auftritt { padding-top: clamp(24px, 4vw, 56px); }
.namenleiste { top: var(--nav-h); }
.auftritt-buehne > .pause { bottom: 14px; }
.auftritt-unten { align-items: center !important; padding-top: clamp(48px, 5vw, 72px) !important; padding-bottom: clamp(24px, 3vw, 48px); }
.auftritt-unten .auftritt-nutzen { margin: 0; }
/* The connection detail appears as a small tag below the pill instead of widening it. */
.pille { position: relative; }
.pille-weg { position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; max-width: none !important; margin: 0 !important; padding: 6px 9px; background: var(--tinte); color: var(--sonne); font: 700 12px/1 var(--text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
a.pille:hover .pille-weg, a.pille:focus-visible .pille-weg, .pille-still:hover .pille-weg { opacity: 1; margin-left: 0 !important; }
.kompatibel-liste { row-gap: 12px; }
@media (max-width: 700px) { :root { --nav-h: 64px; } }

/* Install is not live: badge on the box, copy points to early access */
.bald-schild { display: inline-block; margin: 0 0 18px; padding: 8px 12px; background: var(--sonne); color: var(--tinte); font: 700 14px/1.3 var(--text); }
.bald-schild a { color: var(--tinte); }
.noch-nicht { margin: 10px 0 0; padding: 10px 14px; background: #FFF3BF; color: var(--tinte); font: 600 15px/1.4 var(--text); border-left: 4px solid var(--sonne); }
.noch-nicht a { color: var(--violett); font-weight: 700; }
.noch-nicht.blitz { animation: hinweis .5s ease-out; }
@keyframes hinweis { from { translate: 0 -4px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.kopieren { white-space: nowrap; }
/* Contact button: dark, so it stands out from the yellow option card */
.kontakt .formular button { background: var(--tinte) !important; color: #FFFFFF !important; box-shadow: 4px 4px 0 var(--sonne) !important; }
.kontakt .formular button:hover { background: #000000 !important; }
.it-schritte .noch-nicht { grid-column: 2; }
.installieren .install-dialog .dialog { color: var(--tinte); }
.dialog-schild { color: var(--tinte) !important; background: #FFFFFF; }

/* Closing line and giant wordmark */
.abschluss { padding: clamp(80px, 10vw, 150px) var(--rand) 0; background: #FFFFFF; overflow: hidden; }
.abschluss-spruch { margin: 0 0 clamp(16px, 2vw, 28px); font: 700 clamp(28px, 3.4vw, 52px)/1.1 var(--titel); max-width: 22ch; }
.abschluss-marke { margin: 0; font: 400 26.4vw/0.8 "MakeFont Sans 01", var(--text); letter-spacing: -0.02em; color: var(--violett); white-space: nowrap; translate: -0.04em 0; }

/* Footer with the usual links */
.fussbereich { background: var(--tinte); color: #E9E5F5; padding: clamp(48px, 6vw, 80px) var(--rand) 36px; }
.fuss-raster { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.fuss-logo { font: 700 26px/1 var(--titel); color: #FFFFFF; text-decoration: none; }
.fuss-marke p { margin: 14px 0 20px; max-width: 34ch; color: #C9C1DD; }
.fuss-knopf { display: inline-block; padding: 13px 18px; background: var(--sonne); color: var(--tinte); font: 700 15px/1 var(--text); text-decoration: none; box-shadow: 4px 4px 0 var(--violett); }
.fuss-spalte { display: flex; flex-direction: column; gap: 10px; }
.fuss-spalte h3 { margin: 0 0 6px; font: 700 13px/1 var(--titel); letter-spacing: .08em; text-transform: uppercase; color: var(--sonne); }
.fuss-spalte a { color: #E9E5F5; text-decoration: none; font-size: 16px; }
.fuss-spalte a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.fuss-spalte a[aria-disabled="true"] { color: #9A91B5; }
.fuss-unten { padding-top: 24px; display: grid; gap: 10px; font-size: 14px; color: #B9B0D2; }
.fuss-unten p { margin: 0; max-width: 120ch; }
.fuss-klein { font-size: 12px; color: #8F86AA; }
@media (max-width: 860px) { .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } }
/* Spacing: halve the gap after "Already real", give the name bands room before the install screen */
.echt { padding-bottom: calc(var(--luft) / 2); }
.namen { padding-top: calc(var(--luft) / 2); padding-bottom: 0; }
.kontakt .formular button { background: var(--sonne) !important; color: #000000 !important; box-shadow: 4px 4px 0 #000000 !important; }
.kontakt .formular button:hover { background: #FFD966 !important; }
.abschluss { padding-top: clamp(48px, 6vw, 90px); padding-bottom: clamp(40px, 5vw, 80px); }

/* Legal pages */
.rechtsseite .recht { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--rand) clamp(64px, 8vw, 120px); }
.recht h1 { margin: 0 0 32px; font: 700 clamp(40px, 5vw, 64px)/1 var(--titel); }
.recht h2 { margin: 36px 0 10px; font: 700 22px/1.2 var(--titel) !important; }
.recht p { margin: 0 0 12px; line-height: 1.6; }
.recht a { color: var(--violett); }
.rechtsseite .fuss-unten a { color: #E9E5F5; margin-left: 14px; }

/* Contact form: honeypot field and status colours */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular { position: relative; }
.formular-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.formular-hinweis[data-art="ok"] { font-weight: 700; }
.formular-hinweis[data-art="fehler"] { font-weight: 700; }

/* Legal pages: back button in the site's angular button style */
.zurueck { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 36px; padding: 10px 16px 10px 12px; border: 2px solid var(--tinte); background: var(--weiss); box-shadow: 4px 4px 0 var(--sonne); color: var(--tinte) !important; font: 600 15px/1 var(--text); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.zurueck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.zurueck:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sonne); }
.zurueck:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; }

/* Proof section on light grey so the white drawing card stands out */
.echt { background: #F1F0F4; }

/* Form success: the form fields give way to one large, centred confirmation */
.formular.ist-gesendet .wahl, .formular.ist-gesendet .felder, .formular.ist-gesendet .formular-hinweis { display: none; }
.formular-danke { display: grid; justify-items: center; gap: 12px; margin: 8px auto 0; max-width: 780px; padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px); background: var(--sonne); color: var(--tinte); text-align: center; box-shadow: 10px 10px 0 var(--tinte); animation: danke-rein .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.formular-danke:focus { outline: none; }
.danke-gross { margin: 0; font: 700 clamp(44px, 6.4vw, 96px)/.95 var(--titel); letter-spacing: -0.01em; text-wrap: balance; }
.kontakt:has(.ist-gesendet) .kontakt-adresse { display: none; }
.danke-klein { margin: 0; font: 600 clamp(17px, 1.6vw, 21px)/1.4 var(--text); }
@keyframes danke-rein { from { opacity: 0; transform: scale(.92) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .formular-danke { animation: none; } }

/* Design partner page */
.partnerseite main > section { padding: var(--luft) var(--rand); }
.p-kopf { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 48px; }
.p-kopf > p { margin: 0; max-width: 42ch; font-size: 19px; color: var(--tinte-weich); }
.p-auftritt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px 64px; align-items: center; padding-top: calc(var(--rand) + 110px) !important; }
.p-auftritt h1 { margin: 0; font: 700 clamp(46px, 6.2vw, 100px)/.95 var(--titel); letter-spacing: -0.01em; text-wrap: balance; }
.p-lead { margin: 28px 0 0; max-width: 46ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--tinte-weich); }
.p-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 36px; }
.p-knopf { display: inline-block; padding: 18px 26px; background: var(--violett); color: #FFFFFF; font: 700 18px/1 var(--text); text-decoration: none; box-shadow: 5px 5px 0 var(--sonne); transition: transform .12s, box-shadow .12s; }
.p-knopf:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--sonne); }
.p-link { color: var(--tinte); font: 600 17px/1.2 var(--text); text-underline-offset: 5px; }
.p-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 18px); font-size: clamp(44px, 5vw, 84px); transform: rotate(-4deg); max-width: 520px; justify-self: end; width: 100%; }
.p-raster span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 6px 6px 0 var(--tinte); }
.p-warum { background: var(--rosa-hell); }
.p-gruende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.p-gruende li { font-size: 18px; line-height: 1.5; color: var(--tinte-weich); border-top: 3px solid var(--tinte); padding-top: 18px; }
.p-gruende b { display: block; margin-bottom: 8px; font: 700 clamp(22px, 2vw, 28px)/1.15 var(--titel); color: var(--tinte); }
.p-wer-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p-wer-karte { background: var(--flieder-hell); padding: clamp(22px, 2.4vw, 32px); border: 2px solid var(--tinte); box-shadow: 6px 6px 0 var(--violett); }
.p-wer-karte h3 { margin: 0; font: 700 clamp(24px, 2.2vw, 32px)/1.1 var(--titel); }
.p-wer-karte p { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--tinte-weich); }
.p-wer-karte .p-bsp { margin-top: 6px; font-weight: 600; color: var(--violett); }
.p-notiz { margin: 22px 0 0; font-size: 14px; color: var(--grau); }
.p-integration { background: var(--schirm, #16122E); color: #FFFFFF; }
.p-integration .p-kopf > p { color: #D6CFE8; }
.p-integration .arcade-label { color: var(--sonne); }
.p-wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.p-weg { padding: clamp(22px, 2.4vw, 32px); border: 2px solid rgba(255, 255, 255, .5); }
.p-weg p { margin: 0; font-size: 17px; line-height: 1.5; color: #EDE8FF; }
.p-weg .p-weg-name { margin-bottom: 12px; font: 700 clamp(28px, 2.6vw, 40px)/1 var(--titel); color: var(--sonne); }
.p-weg .p-weg-fuer { margin-top: 14px; font-size: 14px; color: #B9B0D1; }
.p-dialog { max-width: 760px; }
.p-deal-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.p-deal-spalte { padding: clamp(24px, 3vw, 40px); background: var(--sonne); box-shadow: 8px 8px 0 var(--tinte); }
.p-deal-wir { background: var(--flieder-hell); }
.p-deal-spalte h3 { margin: 0 0 14px; font: 700 clamp(28px, 2.6vw, 40px)/1 var(--titel); }
.p-deal-spalte ul { margin: 0; padding-left: 1.1em; }
.p-deal-spalte li { margin: 0 0 10px; font-size: 18px; line-height: 1.45; }
.p-stand { margin: 36px 0 0; max-width: 70ch; font-size: 17px; line-height: 1.5; color: var(--tinte-weich); }
.p-stand a { color: var(--violett); }
.p-faq { background: #F1F0F4; }
.p-fragen { max-width: 880px; display: grid; gap: 10px; }
.p-fragen details { background: #FFFFFF; border: 2px solid var(--tinte); }
.p-fragen summary { cursor: pointer; padding: 18px 22px; font: 700 clamp(19px, 1.7vw, 23px)/1.25 var(--titel); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.p-fragen summary::-webkit-details-marker { display: none; }
.p-fragen summary::after { content: "+"; font: 700 26px/1 var(--titel); color: var(--violett); }
.p-fragen details[open] summary::after { content: "-"; }
.p-fragen summary:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; }
.p-fragen details p { margin: 0; padding: 0 22px 20px; font-size: 17px; line-height: 1.55; color: var(--tinte-weich); }
.p-fragen a { color: var(--violett); }
.p-wahl { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .p-auftritt, .p-kopf, .p-gruende, .p-wer-liste, .p-wege, .p-deal-spalten { grid-template-columns: 1fr; }
  .p-raster { justify-self: center; max-width: 320px; font-size: 44px; margin: 8px 0 12px; }
  .p-wahl { grid-template-columns: 1fr; }
}

/* Footer logo carries the same pink star as the sticky menu */
.fuss-logo { display: inline-flex; align-items: center; gap: 10px; }
.fuss-stern { width: 22px; fill: none; stroke: var(--rosa); stroke-width: 3.5; stroke-linecap: round; }

/* Partner page: flow diagram, pilot steps, team questions */
.p-fluss { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px; counter-reset: none; }
.p-knoten { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; background: #FFFFFF; color: var(--tinte); border: 2px solid #FFFFFF; }
.p-knoten + .p-knoten::before { content: ""; position: absolute; left: -32px; top: 50%; width: 22px; height: 2px; background: var(--sonne); }
.p-knoten + .p-knoten::after { content: ""; position: absolute; left: -16px; top: calc(50% - 6px); border: 7px solid transparent; border-left: 9px solid var(--sonne); border-right: 0; }
.p-knoten-titel { font: 700 clamp(19px, 1.6vw, 23px)/1.1 var(--titel); }
.p-knoten-text { font-size: 15px; line-height: 1.45; color: var(--tinte-weich); }
.p-knoten-mf { background: var(--violett); border-color: var(--sonne); color: #FFFFFF; box-shadow: 6px 6px 0 var(--sonne); }
.p-knoten-mf .p-knoten-text { color: #EDE8FF; }
.p-kanaele { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.p-kanaele span { font: 700 12px/1 var(--text); padding: 6px 9px; background: var(--sonne); color: var(--tinte); }
.p-knoten-ende { background: var(--sonne); border-color: var(--sonne); }
.p-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: schritt; }
.p-schritte li { counter-increment: schritt; position: relative; padding: 64px 22px 24px; background: var(--flieder-hell); border: 2px solid var(--tinte); font-size: 17px; line-height: 1.5; color: var(--tinte-weich); }
.p-schritte li::before { content: counter(schritt); position: absolute; left: 22px; top: 18px; font: 700 34px/1 var(--titel); color: var(--violett); }
.p-schritte b { display: block; margin-bottom: 8px; font: 700 clamp(20px, 1.7vw, 24px)/1.15 var(--titel); color: var(--tinte); }
.p-teams { background: var(--rosa-hell); }
.p-team-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p-team { padding: clamp(22px, 2.4vw, 32px); background: #FFFFFF; border: 2px solid var(--tinte); box-shadow: 6px 6px 0 var(--rosa); }
.p-team h3 { margin: 0 0 10px; font: 700 clamp(22px, 2vw, 28px)/1.1 var(--titel); }
.p-team p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--tinte-weich); }
.p-team .p-frage { font-weight: 700; color: var(--violett); }
@media (max-width: 1100px) {
  .p-fluss { grid-template-columns: 1fr; gap: 30px; max-width: 520px; }
  .p-knoten + .p-knoten::before { left: 28px; top: -26px; width: 2px; height: 20px; }
  .p-knoten + .p-knoten::after { left: 22px; top: -12px; border: 7px solid transparent; border-top: 9px solid var(--sonne); border-bottom: 0; }
  .p-schritte, .p-team-liste { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) { .p-schritte, .p-team-liste { grid-template-columns: 1fr; } }

/* Homepage contact: link to the design partner page. A white pill with a pink tag:
   visible on violet, but shaped like a pointer, not like the square action buttons. */
.kontakt-seite { display: grid; gap: 22px; justify-items: start; }
.kontakt-seite p { margin: 0; max-width: 34ch; color: #EDE8FF; font-size: 19px; }
.kontakt-partner { display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 7px; border-radius: 999px; background: #FFFFFF; color: var(--tinte); font: 600 16px/1.2 var(--text); text-decoration: none; transition: background .15s, transform .15s; }
.kontakt-partner-schild { padding: 7px 12px; border-radius: 999px; background: var(--rosa); color: var(--tinte); font: 700 13px/1 var(--text); white-space: nowrap; }
.kontakt-partner:hover { background: var(--sonne-hell); transform: translateX(3px); }
.kontakt-partner:focus-visible { outline: 3px solid var(--sonne); outline-offset: 3px; }
.p-auftritt .zurueck { margin-bottom: 28px; }

/* Menu: one line per link; on medium widths the page-internal extras give way */
.nav-links a { white-space: nowrap; }
@media (max-width: 1080px) and (min-width: 701px) { .nav-links a[href="#names"], .nav-links a[href="#play"] { display: none; } }
.kontakt-partner-pfeil { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tinte); transition: transform .15s; }
.kontakt-partner-pfeil svg { width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-partner:hover .kontakt-partner-pfeil { transform: translateX(3px); background: var(--violett); }
.kontakt-partner:hover { transform: none; }