/* =====================================================================================
   Vorlage 42 · Moodboard
   Gliederung: 1 Grundlagen · 2 Stecknadelleiste · 3 Papiere (Zettel, Polaroid, Karteikarte, Fahrschein, Klebeband)
   4 Knöpfe und Formulare · 5 Start und Kooperation · 6 Handy · 7 Mediakit · 8 Briefing (klebend)
   9 Blog, Karte, Verschleierung · 10 Plus, Kontakt, Fuß · 11 Dialog · 12 Auftritte und Bewegungsstufen
   Ohne diese Datei und ohne JavaScript bleibt der Inhalt lesbar.
   ===================================================================================== */

/* ---------------------------------------------------------------- 1 Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + 14px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--schrift);
  font-size: clamp(17px, .35vw + 15.6px, 19px);
  line-height: 1.55;
  color: var(--tinte);
  background-color: var(--kork);
  background-image: url("../img/kork.webp");
  background-size: 384px 384px;
  padding-top: var(--kopf);
  padding-bottom: var(--leiste);
  overflow-wrap: break-word;
}
/* ruhende Abdunklung zum Rand, ein fester Layer, nie neu gerechnet */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% 40%, rgba(60, 28, 6, 0) 40%, rgba(40, 16, 0, .42) 100%);
}
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sprung { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--papier); color: var(--tinte); padding: 12px 18px; border-radius: 4px; font: 700 15px var(--schrift-ui); }
.sprung:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--petrol-tief); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }

.behaelter { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); position: relative; z-index: 1; }
.wand { position: relative; padding-block: clamp(40px, 6vw, 96px); }
.wand > .behaelter { z-index: 1; }
/* leicht gedrehte Zettel dürfen den Rand nicht verbreitern: abschneiden, ohne einen Rollbereich zu bauen (Sticky bleibt) */
.wand { overflow-x: clip; }
body { overflow-x: clip; }
.klein { font: 500 13.5px/1.45 var(--schrift-ui); color: var(--tinte-weich); }
.kicker { font: 800 12.5px/1.2 var(--schrift-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--tomate-tief); margin-bottom: 8px; }
.lead { font-size: clamp(18px, .5vw + 16px, 21px); line-height: 1.5; }
.tel-gross { font: 800 clamp(18px, 2vw, 24px)/1.2 var(--schrift-ui); margin: 6px 0 12px; overflow-wrap: anywhere; }
.tel-gross a { text-decoration-thickness: 3px; text-underline-offset: 4px; }

h1, h2, h3 { font-family: var(--schrift); font-weight: 700; line-height: 1.08; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(38px, 4.1vw + 12px, 56px); }
h2 { font-size: clamp(30px, 2.6vw + 14px, 46px); }
h3 { font-size: clamp(22px, 1vw + 17px, 28px); }

/* Gruppenkopf: ein Papierstreifen mit Band, damit Text nie direkt auf dem Kork steht */
.gruppen-kopf {
  position: relative;
  max-width: 820px;
  padding: 26px 32px 28px;
  margin: 0 0 clamp(26px, 4vw, 48px);
  background: var(--kopf-bg, var(--papier));
  color: var(--tinte);
  border-radius: 3px;
  box-shadow: var(--schatten);
  rotate: -.7deg;
}
.gruppen-kopf::before {
  content: "";
  position: absolute;
  top: -13px; left: 38px;
  width: 104px; height: 28px;
  rotate: -4deg;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--band, var(--tomate)) 90%, #fff) 0 9px, var(--band, var(--tomate)) 9px 18px);
  opacity: .9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gruppen-kopf h2 { margin-bottom: 10px; }
.gruppen-kopf .kicker { color: var(--tomate-tief); }

/* ---------------------------------------------------------------- 2 Stecknadelleiste */
.rail {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--kopf);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding-inline: clamp(12px, 2.4vw, 32px);
  background-color: #6b4423;
  background-image: linear-gradient(180deg, #8a5d33 0%, #6b4423 55%, #54351b 100%);
  border-bottom: 3px solid #3c250f;
  box-shadow: 0 8px 18px -6px rgba(30, 12, 0, .6);
}
.rail::before { /* Holzmaserung */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 22px, rgba(0, 0, 0, .06) 22px 24px, rgba(255, 220, 170, .05) 24px 27px);
  pointer-events: none;
}
.marke { position: relative; z-index: 1; text-decoration: none; display: block; }
.marke-zettel {
  display: inline-block;
  background: var(--gelb);
  color: var(--tinte);
  font: 700 clamp(17px, 1.2vw + 8px, 22px)/1 var(--schrift);
  padding: 9px 14px 10px;
  rotate: -2deg;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .4);
}
.nadeln { position: relative; z-index: 1; justify-self: center; width: min(100%, 700px); }
.nadeln ol { display: flex; justify-content: space-between; position: relative; z-index: 1; padding-inline: 1.2%; }
.nadeln li { flex: 1 1 0; display: flex; justify-content: center; }
.faden { position: absolute; left: 2%; right: 2%; top: 12px; width: 96%; height: 24px; z-index: 0; overflow: visible; }
.faden path { fill: none; stroke-linecap: round; }
.faden-grund { stroke: rgba(40, 20, 6, .6); stroke-width: 2.5; }
.faden-rot { stroke: #e0432a; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fort)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.nadel {
  --n: var(--tomate);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  min-width: 56px;
  min-height: 52px;
  padding: 6px 4px 0;
  text-decoration: none;
  color: #fff3dc;
}
.n-kopf {
  display: block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--n) 35%, #fff) 0 16%, var(--n) 52%, color-mix(in srgb, var(--n), #000 38%) 100%);
  box-shadow: 0 3px 3px rgba(0, 0, 0, .5), 0 0 0 0 transparent;
  transition: transform .25s ease, box-shadow .25s ease;
}
.n-name {
  font: 800 12.5px/1 var(--schrift-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 7px 5px;
  border-radius: 2px;
  transition: background-color .2s, color .2s, rotate .2s;
}
.nadel:hover .n-name { background: rgba(255, 243, 220, .16); }
.nadel[aria-current="true"] .n-kopf { transform: scale(1.3) translateY(-1px); box-shadow: 0 4px 4px rgba(0, 0, 0, .5), 0 0 0 5px color-mix(in srgb, var(--n) 40%, transparent); }
.nadel[aria-current="true"] .n-name { background: var(--papier); color: var(--tinte); rotate: -2deg; }
.rail-cta { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- 3 Papiere */
.zettel {
  --r: 0deg;
  position: relative;
  background-color: var(--zb, var(--papier));
  color: var(--zt, var(--tinte));
  padding: 24px 26px 26px;
  border-radius: 3px;
  box-shadow: var(--schatten);
  rotate: var(--r);
  transform-origin: 50% 10px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%), linear-gradient(0deg, rgba(60, 30, 0, .07), rgba(60, 30, 0, 0) 26%);
}
.zettel--papier { --zb: var(--papier); }
.zettel--gelb { --zb: var(--gelb); }
.zettel--tomate { --zb: var(--tomate); --zt: #fff; }
.zettel--petrol { --zb: var(--petrol); --zt: #fff; }
.zettel--flieder { --zb: var(--flieder); }
.zettel--petrol .kicker, .zettel--tomate .kicker { color: #fff; }
.zettel a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

.tape {
  --t: var(--tomate);
  position: absolute;
  top: -13px; left: 50%;
  width: 104px; height: 28px;
  translate: -50% 0;
  rotate: -3deg;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--t) 88%, #fff) 0 9px, var(--t) 9px 18px);
  opacity: .92;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, 100% 0, 98.5% 14%, 100% 28%, 98.5% 42%, 100% 56%, 98.5% 70%, 100% 84%, 100% 100%, 0 100%, 1.5% 86%, 0 72%, 1.5% 58%, 0 44%, 1.5% 30%, 0 16%);
  pointer-events: none;
  z-index: 2;
}
.tape--rot, .tape--tomate { --t: var(--tomate); }
.tape--gelb { --t: var(--gelb); }
.tape--petrol { --t: var(--petrol); }
.tape--flieder { --t: var(--flieder); }
.tape--breit { width: 150px; }
.nadel-deko {
  --n: var(--tomate);
  position: absolute;
  top: -9px; left: 50%;
  width: 20px; height: 20px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--n) 35%, #fff) 0 16%, var(--n) 52%, color-mix(in srgb, var(--n), #000 38%) 100%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .45);
  z-index: 3;
  pointer-events: none;
}
.nadel-deko--tomate { --n: var(--tomate); }
.nadel-deko--gelb { --n: var(--gelb); }
.nadel-deko--petrol { --n: var(--petrol); }

.polaroid {
  --r: 0deg;
  position: relative;
  background: var(--weiss);
  color: var(--tinte);
  padding: 12px 12px 8px;
  box-shadow: var(--schatten);
  rotate: var(--r);
  container-type: inline-size;
}
.pol-bild { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #3a2a1c; }
.pol-bild img { width: 100%; height: 100%; object-fit: cover; }
.pol-text { font: italic 500 clamp(17px, 7cqw, 21px)/1.25 var(--schrift); text-align: center; padding: 10px 6px 8px; }
.polaroid .tape { top: -15px; }

.karte-index {
  --r: 0deg;
  position: relative;
  background-color: #fffdf1;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 29px, rgba(11, 106, 116, .2) 29px 30px);
  color: var(--tinte);
  padding: 30px 26px 24px;
  border-top: 6px solid var(--tomate);
  border-radius: 2px;
  box-shadow: var(--schatten);
  rotate: var(--r);
  transform-origin: 50% 10px;
}
.karte-index h3 { margin-bottom: 12px; }

.fahrschein {
  --r: 0deg;
  position: relative;
  background: #f6f1e3;
  color: var(--tinte);
  font-family: var(--schrift-mono);
  padding: 0 0 10px;
  box-shadow: var(--schatten-klein);
  rotate: var(--r);
  border-radius: 4px;
  -webkit-mask: radial-gradient(circle 9px at 0 62%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 62%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 62%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 62%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.fs-kopf { background: var(--petrol); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 4px 4px 0 0; }
.fs-strecke { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 700; font-size: 16px; padding: 10px 14px 4px; }
.fs-zeile { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--tinte-weich); padding: 2px 14px 0; border-top: 2px dashed rgba(42, 28, 16, .25); margin-top: 6px; padding-top: 6px; }

/* ---------------------------------------------------------------- 4 Knöpfe und Formulare */
.knopf {
  --kb: var(--papier);
  --kt: var(--tinte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  font: 800 15.5px/1.1 var(--schrift-ui);
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--kt);
  background: var(--kb);
  border: 2.5px solid var(--tinte);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--tinte);
  transition: translate .15s ease, box-shadow .15s ease, rotate .15s ease;
  text-align: center;
}
.knopf:hover { translate: 0 -2px; rotate: -.8deg; box-shadow: 0 6px 0 var(--tinte); }
.knopf:active { translate: 0 3px; box-shadow: 0 1px 0 var(--tinte); }
.knopf[disabled] { opacity: .55; cursor: not-allowed; }
.knopf--tomate { --kb: var(--tomate); --kt: #fff; }
.knopf--petrol { --kb: var(--petrol); --kt: #fff; }
.knopf--hell { --kb: var(--papier); --kt: var(--tinte); }
.knopf--klein { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 20px; }

.feld { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
.feld label { font: 800 13px/1.2 var(--schrift-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-weich); }
.feld input, .feld select, .feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 17px;
  background: #fff;
  color: var(--tinte);
  border: 2.5px solid var(--tinte);
  border-radius: 6px;
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.haken-feld { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; font: 500 15.5px/1.45 var(--schrift-ui); cursor: pointer; }
.haken-feld input { flex: none; width: 24px; height: 24px; margin-top: 1px; accent-color: var(--tomate-tief); }
.haken-feld:has(input:checked) { color: var(--tinte); }
.formular-meldung { min-height: 1.4em; margin-top: 12px; font: 700 15px/1.4 var(--schrift-ui); color: var(--petrol-tief); }
.formular-meldung.ist-fehler { color: var(--fehler); }
.formular .klein, .newsletter .klein { margin-top: 8px; }

.chip-klein { display: inline-flex; }
.chip-klein input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.chip-klein span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px;
  font: 800 14.5px/1 var(--schrift-ui);
  background: #fff; color: var(--tinte);
  border: 2.5px solid var(--tinte); border-radius: 99px;
  cursor: pointer;
  transition: background-color .15s, color .15s, rotate .15s;
}
.chip-klein:hover span { rotate: -1.5deg; }
.chip-klein input:checked + span { background: var(--petrol); color: #fff; }
.chip-klein input:focus-visible + span { outline: 3px solid var(--petrol-tief); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }

/* ---------------------------------------------------------------- 5 Start und Kooperation */
.wand--start { padding-top: clamp(22px, 2.6vw, 38px); padding-bottom: clamp(54px, 7vw, 100px); }
.start-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 52px); align-items: start; }
.titel-zettel { padding: 34px 30px 30px; }
.titel-zettel h1 { margin-bottom: 14px; font-size: clamp(36px, 2.6vw + 12px, 52px); }
.titel-zettel .lead { font-size: clamp(17.5px, .3vw + 15.5px, 20px); }
.titel-zettel .lead { max-width: 38em; }
.band { display: block; }

.collage { position: relative; height: clamp(330px, 58vw, 440px); margin-top: 36px; list-style: none; }
.collage > li { position: absolute; }
.collage-a { left: 0; top: 6px; width: 50%; }
.collage-b { left: 40%; top: 34px; width: 52%; z-index: 2; }
/* das zweite Polaroid überdeckt das rechte Fünftel des ersten: dessen Unterschrift endet davor */
.collage-a .pol-text { padding-right: 22%; }
/* Fahrschein und Karte unter die Bildunterschriften der Polaroids, nicht darüber (05.10.2026) */
.collage-c { left: 1%; top: 70%; width: min(250px, 66%); z-index: 3; }
.collage-d { right: 0; top: 74%; width: min(190px, 44%); z-index: 3; }
.karten-schnipsel { background: var(--papier); padding: 8px 8px 6px; box-shadow: var(--schatten); rotate: var(--r); }
.karten-schnipsel svg { width: 100%; height: auto; display: block; background: #e9dcb6; }
.karten-schnipsel p { font: 700 12px/1.2 var(--schrift-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-weich); padding: 6px 2px 0; }
.collage .tape { top: -12px; }

.koop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "handy" "form";
  gap: 14px clamp(20px, 2.6vw, 34px);
  padding: 32px clamp(18px, 2.4vw, 32px) 28px;
  container-type: inline-size;
}
.koop-kopf { grid-area: kopf; }
.koop-kopf h2 { font-size: clamp(28px, 2.1vw + 12px, 40px); margin-bottom: 8px; }
.koop-anleitung { font: 500 15.5px/1.45 var(--schrift-ui); max-width: 60ch; }
.demo-pille {
  display: inline-block; margin-top: 10px;
  background: var(--tomate); color: #fff;
  font: 800 13.5px/1.3 var(--schrift-ui);
  padding: 7px 14px; border-radius: 99px;
}
/* der Platz der Pille bleibt reserviert, damit beim Ein- und Ausblenden nichts verrutscht */
.demo-pille[hidden] { display: inline-block !important; visibility: hidden; }
.koop-form { grid-area: form; min-width: 0; container-type: inline-size; }
.koop fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.koop legend { font: 800 13px/1 var(--schrift-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-weich); padding: 0; margin-bottom: 10px; }
.kanaele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px !important; }
.kanaele legend { grid-column: 1 / -1; margin-bottom: 0; }
.chip-kanal { display: block; position: relative; }
.chip-kanal input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.chip-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ic name" "ic preis";
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  min-height: 62px;
  padding: 8px 12px;
  background: #fff;
  border: 2.5px solid var(--tinte);
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(42, 28, 16, .85);
  cursor: pointer;
  transition: background-color .18s, color .18s, translate .15s, box-shadow .15s;
}
.chip-in .ic { grid-area: ic; width: 26px; height: 26px; }
.chip-name { grid-area: name; font: 800 15px/1.15 var(--schrift-ui); hyphens: manual; overflow-wrap: normal; }
.chip-preis { grid-area: preis; font: 700 13.5px/1 var(--schrift-mono); color: var(--tomate-tief); }
.chip-kanal:hover .chip-in { translate: 0 -2px; }
.chip-kanal input:checked + .chip-in { background: var(--petrol); color: #fff; box-shadow: 0 1px 0 var(--tinte); translate: 0 2px; }
.chip-kanal input:checked + .chip-in .chip-preis { color: #fff0b8; }
.chip-kanal input:focus-visible + .chip-in { outline: 3px solid var(--petrol-tief); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.kanaele:has(input:checked) legend { color: var(--petrol-tief); }

.koop-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 22px; margin-bottom: 18px; align-items: end; }
@container (min-width: 500px) { .koop-zeile { grid-template-columns: auto minmax(0, 1fr); } }
.laufzeit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.laufzeit legend { width: 100%; }
.menge { display: grid; gap: 8px; }
.menge label { font: 800 14.5px/1.2 var(--schrift-ui); }
.menge output { display: inline-block; min-width: 1.4em; padding: 1px 8px; background: var(--gelb); border-radius: 4px; font-weight: 800; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--tomate) 0 var(--fuell, 0%), rgba(42, 28, 16, .16) var(--fuell, 0%) 100%); border: 2px solid var(--tinte); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(42, 28, 16, .16); border: 2px solid var(--tinte); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--tomate); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ff9a7e 0 16%, var(--tomate) 55%, #7a1a08 100%); border: 2px solid var(--tinte); box-shadow: 0 3px 3px rgba(0, 0, 0, .45); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--tomate); border: 2px solid var(--tinte); box-shadow: 0 3px 3px rgba(0, 0, 0, .45); }

.ergebnis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.erg {
  background: var(--papier-2);
  border: 2px dashed rgba(42, 28, 16, .45);
  border-radius: 6px;
  padding: 8px 12px 9px;
  min-width: 0;
}
.erg dt { font: 800 11.5px/1.2 var(--schrift-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich); margin-bottom: 3px; }
.erg dd { font: 700 clamp(19px, 1.2vw + 8px, 24px)/1.1 var(--schrift); font-variant-numeric: tabular-nums; }
.erg--gross { background: #fff; border-style: solid; border-color: var(--tinte); }
.erg--gross dd { font-size: clamp(27px, 1.8vw + 10px, 36px); color: var(--tomate-tief); }
.erg--breit { grid-column: 1 / -1; }
.erg--breit dd { font-size: clamp(17px, .5vw + 14px, 20px); font-weight: 600; }
.erg-rabatt { grid-column: 1 / -1; font: 700 13.5px/1.4 var(--schrift-ui); color: var(--gruen-ok); }
.koop-fuss { margin: 8px 0 14px; }
.koop-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.koop.ist-demo .koop-form { outline: 3px dashed var(--tomate); outline-offset: 8px; }
.nur-ohne-js { display: none; }
html:not(.js) .nur-ohne-js { display: block; }

@media (min-width: 1100px) {
  .start-raster { grid-template-columns: minmax(0, .66fr) minmax(0, 1.54fr); }
  .collage { height: 370px; }
}
@media (min-width: 760px) {
  .koop { grid-template-columns: minmax(0, 1fr) clamp(196px, 16.5vw, 236px); grid-template-areas: "kopf kopf" "form handy"; align-items: start; }
}
@media (max-width: 359px) {
  .kanaele { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .feld-zeile { grid-template-columns: minmax(0, 1fr); }
  .chip-in { padding: 8px 9px; column-gap: 8px; }
  .chip-name { font-size: 14px; }
}

/* ---------------------------------------------------------------- 6 Handy */
.handy { grid-area: handy; justify-self: center; width: 100%; max-width: 236px; position: relative; }
@media (max-width: 759px) { .handy { max-width: 200px; } }
@media (min-width: 760px) { .handy { position: sticky; top: calc(var(--kopf) + 16px); } }
.handy-rahmen {
  position: relative;
  aspect-ratio: 9 / 18.6;
  padding: 9px;
  border-radius: 36px;
  background: linear-gradient(160deg, #3a3330, #14100d 60%);
  box-shadow: var(--schatten-hoch), inset 0 0 0 2px #5a504a;
  transition: box-shadow .25s;
}
.handy-rahmen::before { content: ""; position: absolute; top: 15px; left: 50%; width: 30%; height: 14px; translate: -50% 0; border-radius: 99px; background: #0a0807; z-index: 5; }
.handy-schirm { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: #1c1612; color: var(--tinte); font-family: var(--schrift-ui); isolation: isolate; }
.hs-leer { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 24px; font: 700 15px/1.4 var(--schrift-ui); color: var(--tinte-weich); }
.handy-schirm[data-kanal="leer"] .hs-leer { display: grid; }
.hs-ansicht { position: absolute; inset: 0; display: none; flex-direction: column; padding-top: 34px; background: #fff; }
.handy-schirm[data-kanal="reel"] .hs-reel,
.handy-schirm[data-kanal="insta"] .hs-insta,
.handy-schirm[data-kanal="story"] .hs-story,
.handy-schirm[data-kanal="youtube"] .hs-youtube,
.handy-schirm[data-kanal="blog"] .hs-blog,
.handy-schirm[data-kanal="news"] .hs-news { display: flex; }
.hs-medium { position: relative; overflow: hidden; background: #1c1612; }
.hs-medium img, .hs-medium video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-konto { display: flex; align-items: center; gap: 8px; font: 700 12px/1.1 var(--schrift-ui); }
.hs-konto span { margin-left: auto; font-weight: 500; color: var(--tinte-weich); }
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background-color: var(--gelb); background-image: linear-gradient(135deg, var(--gelb), #ffb04a); color: var(--tinte); font: 800 10px/1 var(--schrift-ui); font-style: normal; border: 2px solid #fff; }
.hs-text { font: 500 12.5px/1.35 var(--schrift-ui); padding: 0 12px; }
.hs-zeilen { display: grid; gap: 6px; padding: 8px 12px; }
.hs-zeilen i { display: block; height: 8px; border-radius: 4px; background: rgba(42, 28, 16, .14); }
.hs-zeilen i:nth-child(2n) { width: 78%; }
.hs-titel { font: 800 14px/1.2 var(--schrift-ui); padding: 8px 12px 4px; }
.hs-titel--serif { font: 700 17px/1.15 var(--schrift); }

/* Die Kennzeichnung: immer oben, auf jeder Ansicht */
.hs-label {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  margin: 8px 12px;
  background: var(--tomate); color: #fff;
  font: 800 10.5px/1 var(--schrift-ui); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px 5px 10px;
  border-radius: 99px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  position: relative;
  z-index: 3;
}
.hs-weg { position: relative; display: inline-grid; place-items: center; width: 43px; height: 43px; margin: -12px -12px -12px -8px; padding: 0; border: 0; background: transparent; color: #fff; }
.hs-weg::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.hs-weg .ic { position: relative; }
.hs-weg .ic { width: 12px; height: 12px; stroke-width: 3; }
.hs-label--klein { position: absolute; top: 4%; left: 6%; margin: 0; font-size: clamp(8px, 2.3cqw, 11px); padding: 4px 9px; }

.hs-reel { padding-top: 0; background: #1c1612; }
.hs-reel .hs-medium { position: absolute; inset: 0; }
.hs-reel .hs-konto, .hs-reel .hs-text, .hs-reel .hs-label { position: relative; z-index: 2; color: #fff; }
.hs-reel .hs-label { margin-top: 38px; color: #fff; }
.hs-reel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(0deg, rgba(10, 6, 2, .75), rgba(10, 6, 2, 0)); z-index: 1; }
.hs-reel .hs-konto { position: absolute; left: 12px; bottom: 50px; z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.hs-reel .hs-text { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.hs-webm { display: none; position: absolute; left: 12px; right: 12px; top: 50%; translate: 0 -50%; text-align: center; background: rgba(255, 253, 248, .92); color: var(--tinte); font: 700 12px/1.3 var(--schrift-ui); padding: 7px 10px; border-radius: 6px; z-index: 3; }
.kein-webm .hs-webm { display: block; }

.hs-insta .hs-konto--oben { padding: 6px 12px 0; }
.hs-insta .hs-label { margin-top: 6px; margin-bottom: 8px; }
.hs-insta .hs-medium { aspect-ratio: 1 / 1; margin-top: 2px; }
.hs-herzen { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; font: 700 12px/1 var(--schrift-ui); }
.hs-herzen .ic { width: 20px; height: 20px; }
.hs-herzen .ic:first-child { color: var(--tomate); }

.hs-story { padding-top: 0; background: #1c1612; }
.hs-story .hs-medium { position: absolute; inset: 0; }
.hs-story .hs-balken { position: absolute; top: 12px; left: 22px; right: 22px; display: flex; gap: 4px; z-index: 4; }
.hs-story .hs-balken i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.hs-story .hs-balken i:first-child { background: #fff; }
.hs-story .hs-konto { position: absolute; top: 40px; left: 12px; z-index: 3; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.hs-story .hs-label { position: absolute; top: 74px; left: 0; z-index: 3; }
.hs-story .hs-text { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); font-weight: 700; }
.hs-story::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(0deg, rgba(10, 6, 2, .7), rgba(10, 6, 2, 0)); z-index: 2; }

.hs-youtube { background: #181412; color: #fff; }
.hs-youtube .hs-medium { aspect-ratio: 16 / 9; margin-top: 4px; }
.hs-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 32px; border-radius: 9px; background: var(--tomate); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.hs-play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 12px solid #fff; border-block: 8px solid transparent; translate: 2px 0; }
.hs-youtube .hs-titel { color: #fff; padding-top: 12px; }
.hs-youtube .hs-text { color: #e5d8c4; }
.hs-youtube .hs-zeilen i { background: rgba(255, 255, 255, .2); }

.hs-blog { background: var(--papier); }
.hs-blog .hs-medium { aspect-ratio: 4 / 3; margin: 6px 12px 0; border-radius: 4px; }
.hs-news { background: #f3efe6; }
.hs-news .hs-konto { padding: 8px 12px 0; }
.hs-knopf { align-self: flex-start; margin: 6px 12px; background: var(--petrol); color: #fff; font: 800 12px/1 var(--schrift-ui); padding: 9px 14px; border-radius: 6px; }

.handy-unter { display: grid; gap: 6px; margin-top: 12px; text-align: center; }
.handy-art { justify-self: center; background: var(--papier); color: var(--tinte); font: 800 12.5px/1 var(--schrift-ui); letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 99px; box-shadow: var(--schatten-klein); }
.handy-regel { background: #fff; color: var(--fehler); border: 2.5px solid var(--fehler); border-radius: 6px; padding: 10px 12px; font: 700 13px/1.4 var(--schrift-ui); text-align: left; }
.handy-regel[hidden] { display: none; }
.handy-schirm[data-kennz="versuch"] .hs-label { animation: label-nein .9s ease both; background: var(--fehler); }
.handy:has(.handy-schirm[data-kennz="versuch"]) .handy-rahmen { box-shadow: var(--schatten-hoch), 0 0 0 5px var(--fehler); }
@keyframes label-nein {
  0% { translate: 0 0; opacity: 1; }
  25% { translate: 0 -40px; opacity: 0; }
  50% { translate: 0 -40px; opacity: 0; }
  62% { translate: 0 0; opacity: 1; }
  72% { translate: -8px 0; }
  82% { translate: 8px 0; }
  92% { translate: -4px 0; }
  100% { translate: 0 0; opacity: 1; }
}

/* ---------------------------------------------------------------- 7 Mediakit */
.wand--mediakit { --kopf-bg: var(--gelb); --band: var(--tomate); }
.mk-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(26px, 3vw, 40px) clamp(16px, 2vw, 26px); align-items: start; }
.zahl-zettel { grid-column: span 6; text-align: left; padding-top: 28px; }
.zahl { font: 800 clamp(40px, 4.2vw, 62px)/1 var(--schrift); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.zahl-name { font: 700 15.5px/1.3 var(--schrift-ui); margin-top: 6px; }
.mk-inter, .mk-wachstum, .mk-alter, .mk-laender, .mk-interessen { grid-column: 1 / -1; min-width: 0; }
.formel { font: 600 clamp(14px, .4vw + 13px, 16px)/1.5 var(--schrift-mono); margin-bottom: 8px; color: var(--tinte-weich); }
.formel--zahlen { color: var(--tinte); font-weight: 600; }
.inter-wert { display: inline-block; font: 800 clamp(30px, 2.4vw + 12px, 44px)/1 var(--schrift); color: var(--tomate-tief); background: var(--gelb); padding: 2px 10px 4px; rotate: -2deg; margin-left: 4px; }
.stapel { display: flex; height: 36px; margin: 14px 0 10px; border: 2.5px solid var(--tinte); border-radius: 6px; overflow: hidden; background: #fff; }
.st { display: block; position: relative; width: calc(var(--w) * 1%); transform-origin: left; }
.st b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12.5px/1 var(--schrift-ui); white-space: nowrap; overflow: hidden; }
.st--likes { background: var(--tomate); color: #fff; }
.st--komm { background: var(--petrol); color: #fff; }
.st--teil { background: var(--gelb); color: var(--tinte); }
.balken { display: grid; gap: 11px; margin: 4px 0 12px; }
.balken li { display: grid; grid-template-columns: minmax(6.2em, 7.6em) minmax(0, 1fr) 3em; align-items: center; gap: 10px; font: 700 14.5px/1.1 var(--schrift-ui); }
.b-spur { display: block; height: 16px; background: rgba(42, 28, 16, .12); border-radius: 99px; overflow: hidden; }
.b-fuell { display: block; height: 100%; width: calc(var(--w) / var(--max, 40) * 100%); background: var(--tomate); border-radius: 99px; transform-origin: left; }
.b-wert { text-align: right; font-family: var(--schrift-mono); font-size: 13.5px; }
.mk-interessen .balken { --max: 100; }
.balken--bunt li:nth-child(1) .b-fuell { background: var(--tomate); }
.balken--bunt li:nth-child(2) .b-fuell { background: var(--petrol); }
.balken--bunt li:nth-child(3) .b-fuell { background: var(--flieder-tief); }
.balken--bunt li:nth-child(4) .b-fuell { background: var(--gelb-tief); }
.balken--bunt li:nth-child(5) .b-fuell { background: var(--tinte-weich); }
.ring-zeile { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 10px; }
.ring { width: 100%; height: auto; rotate: 0deg; }
.ring circle { fill: none; stroke-width: 6.4; }
.ring-grund { stroke: rgba(42, 28, 16, .12); }
.ring-teil { stroke-linecap: butt; }
.ring-teil--1 { stroke: var(--tomate); }
.ring-teil--2 { stroke: var(--petrol); }
.ring-teil--3 { stroke: var(--gelb); }
.ring-teil--4 { stroke: var(--flieder-tief); }
.ring-teil--5 { stroke: var(--tinte-weich); }
.legende { display: grid; gap: 6px; font: 700 14px/1.2 var(--schrift-ui); }
.legende li { display: flex; align-items: center; gap: 8px; }
.legende b { margin-left: auto; font-family: var(--schrift-mono); font-size: 13px; }
.l-punkt { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.l-punkt--1 { background: var(--tomate); } .l-punkt--2 { background: var(--petrol); } .l-punkt--3 { background: var(--gelb); border: 1px solid rgba(42, 28, 16, .4); } .l-punkt--4 { background: var(--flieder-tief); } .l-punkt--5 { background: var(--tinte-weich); }
.wachs-zahl { font: 500 15.5px/1.35 var(--schrift-ui); margin-bottom: 8px; }
.wachs-zahl strong { font: 800 clamp(26px, 2vw + 12px, 36px)/1 var(--schrift); color: var(--tomate-tief); margin-right: 4px; }
.linie { width: 100%; height: auto; display: block; overflow: visible; }
.linie-flaeche { fill: color-mix(in srgb, var(--tomate) 18%, transparent); }
.linie-pfad { fill: none; stroke: var(--tomate); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.linie-achse { stroke: var(--tinte); stroke-width: 1.6; }
.linie-punkt { fill: var(--gelb); stroke: var(--tinte); stroke-width: 2.4; }
.linie-text { font: 700 11px var(--schrift-ui); fill: var(--tinte-weich); }
.linie-text--fett { fill: var(--tinte); font-size: 12px; }

.mk-arbeiten { grid-column: 1 / -1; margin-top: 8px; order: 6; }
.mk-inter { order: 1; } .mk-wachstum { order: 2; } .mk-alter { order: 3; } .mk-laender { order: 4; } .mk-interessen { order: 5; }
.legende b { white-space: nowrap; }
.legende li { flex-wrap: nowrap; }
.arbeiten-titel { display: inline-block; max-width: 760px; background: var(--papier); padding: 16px 24px 18px; margin-bottom: 38px; border-radius: 3px; box-shadow: var(--schatten); rotate: -.6deg; font-size: clamp(22px, 1.4vw + 14px, 30px); }
.arbeiten-titel span { display: block; margin-top: 6px; font: 500 14px/1.4 var(--schrift-ui); color: var(--tinte-weich); }
.arbeiten-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 38px 28px; margin-bottom: 44px; align-items: start; }
.arbeit { max-width: 360px; width: 100%; justify-self: center; }
.arbeit .pol-bild { aspect-ratio: 4 / 3; }
.arbeit .pol-text { font-size: 16px; font-style: normal; text-align: left; padding: 10px 2px 2px; line-height: 1.3; }
.pol-werte { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 2px 8px; font: 700 12.5px/1.2 var(--schrift-ui); color: var(--petrol-tief); }
.werbe-band {
  position: absolute; z-index: 4; top: 22px; left: -10px;
  background: var(--tomate); color: #fff;
  font: 800 12px/1 var(--schrift-ui); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px 7px 14px;
  rotate: -5deg;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .4);
}
.werbe-band--anzeige { background: var(--petrol); }
.werbe-band--entgelt { background: var(--flieder-tief); }

.partner { position: relative; background: var(--papier); padding: 30px 28px 24px; box-shadow: var(--schatten); rotate: .5deg; border-radius: 2px; }
.partner-titel { font: 800 12.5px/1.3 var(--schrift-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); margin-bottom: 14px; }
.partner-liste { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: baseline; }
.wm { font-size: clamp(22px, 1.6vw + 12px, 32px); line-height: 1; color: var(--tinte); }
.wm--1 { font-family: var(--schrift); font-style: italic; font-weight: 600; color: var(--petrol-tief); }
.wm--2 { font: 800 clamp(18px, 1.2vw + 11px, 26px)/1 var(--schrift-ui); letter-spacing: .24em; color: var(--tomate-tief); }
.wm--3 { font: 700 clamp(18px, 1.2vw + 11px, 26px)/1 var(--schrift-mono); }
.wm--4 { font-family: var(--schrift); font-weight: 800; color: var(--flieder-tief); }
.wm--5 { font: 900 clamp(22px, 1.6vw + 12px, 32px)/1 var(--schrift-ui); letter-spacing: -.04em; text-transform: lowercase; }
.wm--6 { font-family: var(--schrift); font-weight: 500; font-style: italic; letter-spacing: .02em; color: var(--gelb-tief); }

@media (min-width: 640px) {
  .zahl-zettel { grid-column: span 3; }
}
@media (min-width: 900px) {
  .mk-inter { grid-column: 1 / span 6; }
  .mk-wachstum { grid-column: 7 / span 6; translate: 0 14px; }
  .mk-alter { grid-column: 1 / span 4; }
  .mk-laender { grid-column: 5 / span 4; translate: 0 -12px; }
  .mk-interessen { grid-column: 9 / span 4; }
  .zahl-zettel:nth-child(1) { translate: 0 6px; }
  .zahl-zettel:nth-child(3) { translate: 0 -8px; }
  .zahl-zettel:nth-child(4) { translate: 0 10px; }
}
@media (max-width: 520px) {
  .ring-zeile { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ring { max-width: 160px; }
  .legende { width: 100%; }
}

/* ---------------------------------------------------------------- 8 Briefing (klebend) */
.wand--ablauf { --kopf-bg: var(--papier); --band: var(--petrol); padding-bottom: 0; }
.ab-huelle { position: relative; height: calc(5 * 100svh); }
.ab-buehne {
  --p: 5;
  position: sticky;
  top: var(--kopf);
  height: calc(100svh - var(--kopf) - var(--leiste));
  display: grid;
  align-items: center;
}
.ab-innen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 44px); align-items: center; height: 100%; }
.ab-text { display: grid; gap: 18px; align-content: center; }
.ab-liste { display: grid; }
.ab-schritt {
  grid-area: 1 / 1;
  background: var(--papier);
  padding: 26px 28px 28px;
  border-radius: 3px;
  box-shadow: var(--schatten);
  border-top: 8px solid var(--tomate);
  opacity: 0; visibility: hidden;
  translate: 0 18px;
  transition: opacity .4s ease, translate .4s ease, visibility 0s linear .4s;
}
.ab-schritt:nth-child(2) { border-top-color: var(--gelb); }
.ab-schritt:nth-child(3) { border-top-color: var(--petrol); }
.ab-schritt:nth-child(4) { border-top-color: var(--flieder); }
.ab-schritt:nth-child(5) { border-top-color: var(--tomate); }
.ab-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ab-nr { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tinte); color: var(--papier); font: 800 22px/1 var(--schrift-ui); }
.ab-zeit { font: 800 12.5px/1 var(--schrift-ui); letter-spacing: .1em; text-transform: uppercase; background: var(--gelb); padding: 7px 11px; border-radius: 99px; }
.ab-schritt h3 { margin-bottom: 8px; font-size: clamp(26px, 1.8vw + 14px, 38px); }
.ab-schritt p:last-child { font-size: clamp(17px, .4vw + 15px, 19.5px); }
.ab-buehne[data-schritt="1"] .ab-schritt[data-s="1"],
.ab-buehne[data-schritt="2"] .ab-schritt[data-s="2"],
.ab-buehne[data-schritt="3"] .ab-schritt[data-s="3"],
.ab-buehne[data-schritt="4"] .ab-schritt[data-s="4"],
.ab-buehne[data-schritt="5"] .ab-schritt[data-s="5"] { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .4s ease, translate .4s ease, visibility 0s; }
.ab-punkte { display: flex; gap: 6px; }
.ab-punkt { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.ab-punkt::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--papier); border: 3px solid var(--tinte); transition: background-color .2s, scale .2s; }
.ab-buehne[data-schritt="1"] .ab-punkt[data-s="1"]::before,
.ab-buehne[data-schritt="2"] .ab-punkt[data-s="2"]::before,
.ab-buehne[data-schritt="3"] .ab-punkt[data-s="3"]::before,
.ab-buehne[data-schritt="4"] .ab-punkt[data-s="4"]::before,
.ab-buehne[data-schritt="5"] .ab-punkt[data-s="5"]::before { background: var(--tomate); scale: 1.25; }

.ab-board {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100svh - var(--kopf) - var(--leiste) - 36px) * 1.42));
  aspect-ratio: 1.42 / 1;
  justify-self: center;
  background-color: #b27a46;
  background-image: linear-gradient(rgba(255, 236, 200, .16), rgba(255, 236, 200, .16)), url("../img/kork.webp");
  background-size: auto, 300px 300px;
  border: 14px solid #6b4423;
  border-radius: 6px;
  box-shadow: inset 0 0 50px rgba(30, 12, 0, .45), var(--schatten-hoch);
  overflow: hidden;
}
.ab-faden { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.af { fill: none; stroke: #e0432a; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.ab-el {
  --r: 0deg;
  --s: 1;
  --d: 0;
  --e: clamp(0, (var(--p) - (var(--s) - 1) - var(--d) - .04) * 3.4, 1);
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  z-index: 2;
  opacity: var(--e);
  rotate: var(--r);
  translate: 0 calc((1 - var(--e)) * -44px);
  scale: calc(1.18 - .18 * var(--e));
  font-size: clamp(10px, 2.35cqw, 17px);
  line-height: 1.3;
}
.ab-el[data-ab="2"] { --s: 2; } .ab-el[data-ab="3"] { --s: 3; } .ab-el[data-ab="4"] { --s: 4; } .ab-el[data-ab="5"] { --s: 5; }
.ab-el.zettel, .ab-el.karte-index { padding: 1.9cqw 2cqw 1.9cqw; }
.ab-el.karte-index { padding-top: 2.4cqw; border-top-width: 4px; }
.ab-el .ab-klein { font: 800 .72em/1.1 var(--schrift-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: .3em; }
.ab-betreff { font: 700 1.1em/1.2 var(--schrift); margin-bottom: .4em; }
.ab-zeilen { display: grid; gap: .45em; }
.ab-zeilen i { display: block; height: .5em; border-radius: 3px; background: rgba(42, 28, 16, .16); }
.ab-zeilen i:nth-child(2) { width: 82%; } .ab-zeilen i:nth-child(3) { width: 56%; }
.ab-konzept ul, .ab-check ul { display: grid; gap: .3em; font: 600 .86em/1.25 var(--schrift-ui); }
.ab-check li { display: flex; align-items: center; gap: .4em; }
.ab-check .ic { width: 1.1em; height: 1.1em; color: var(--petrol-tief); stroke-width: 3; }
.ab-el[data-ab="1"] { --d: -.5; }
.ab-mail { --x: 3%; --y: 5%; --w: 29%; }
.ab-konzept { --x: 35%; --y: 4%; --w: 29%; --d: .02; }
.ab-swatches { display: flex; gap: .4em; margin-top: .6em; }
.ab-swatches i { flex: 1; height: 1.6em; border-radius: 2px; background: var(--tomate); }
.ab-swatches i:nth-child(2) { background: var(--gelb); }
.ab-swatches i:nth-child(3) { background: var(--petrol); }
.ab-foto--1 { --x: 3%; --y: 38%; --w: 22%; }
.ab-foto--2 { --x: 21%; --y: 46%; --w: 20%; --d: .08; }
.ab-fahr { --x: 3%; --y: 80%; --w: 25%; --d: .16; }
.ab-foto.polaroid { padding: .8cqw .8cqw 0; }
.ab-foto .pol-text { font-size: .9em; padding: .4em .2em .5em; }
.ab-fahr .fs-strecke { font-size: .95em; }
.ab-fahr .fs-kopf { font-size: .72em; }
.ab-stempel { --x: 62%; --y: 78%; --w: 32%; z-index: 6; }
.ab-stempel span { display: block; text-align: center; white-space: nowrap; font: 900 1.2em/1 var(--schrift-ui); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--gruen-ok); padding: .5em .4em .55em; border: .22em double rgba(255, 255, 255, .85); border-radius: .3em; box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }
.ab-check { --x: 67%; --y: 5%; --w: 30%; --d: .12; }
.ab-handy { --x: 46%; --y: 36%; --w: 15.5%; }
.ab-handy-rahmen { position: relative; border-radius: 1.6cqw; padding: .7cqw; background: #1a1411; box-shadow: var(--schatten); container-type: inline-size; }
.ab-handy-rahmen img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 1.2cqw; }
.ab-stat { --x: 65%; --y: 36%; --w: 29%; --d: .1; }
.ab-stat-zahl { font: 600 .9em/1.3 var(--schrift-ui); }
.ab-stat-zahl strong { font: 800 1.45em/1.1 var(--schrift); }
.ab-stat-bal { display: flex; align-items: flex-end; gap: .35em; height: 3.2em; margin-top: .5em; }
.ab-stat-bal i { flex: 1; height: calc(var(--h) * 1%); background: var(--flieder-tief); border-radius: 2px 2px 0 0; transform-origin: bottom; scale: 1 var(--e); }
/* zweiter Beitrag: Faden zeichnet sich je Schritt */
.af--1 { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 1) * 3, 1)); }
.af--2 { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 2) * 3, 1)); }
.af--3 { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 3) * 3, 1)); }
.af--4 { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 4) * 3, 1)); }

/* Briefing ohne klebende Bühne: starr, Bewegung reduzieren, kein JavaScript, niedrige Fenster */
html[data-bewegung="starr"] .ab-huelle,
html:not(.js) .ab-huelle { height: auto; }
html[data-bewegung="starr"] .ab-buehne,
html:not(.js) .ab-buehne { position: static; height: auto; padding-block: 10px 60px; }
html[data-bewegung="starr"] .ab-innen,
html:not(.js) .ab-innen { grid-template-columns: minmax(0, 1fr); height: auto; }
html[data-bewegung="starr"] .ab-liste,
html:not(.js) .ab-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
html[data-bewegung="starr"] .ab-schritt,
html:not(.js) .ab-schritt { grid-area: auto; opacity: 1; visibility: visible; translate: none; }
html[data-bewegung="starr"] .ab-punkte,
html:not(.js) .ab-punkte { display: none; }
html[data-bewegung="starr"] .ab-board,
html:not(.js) .ab-board { width: min(100%, 980px); }
@media (prefers-reduced-motion: reduce) {
  .ab-huelle { height: auto; }
  .ab-buehne { position: static; height: auto; padding-block: 10px 60px; }
  .ab-innen { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ab-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
  .ab-schritt { grid-area: auto; opacity: 1; visibility: visible; translate: none; }
  .ab-punkte { display: none; }
  .ab-board { width: min(100%, 980px); }
}
@media (max-height: 520px) {
  .ab-huelle { height: auto; }
  .ab-buehne { position: static; height: auto; padding-block: 10px 60px; }
  .ab-innen { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ab-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
  .ab-schritt { grid-area: auto; opacity: 1; visibility: visible; translate: none; }
  .ab-punkte { display: none; }
  .ab-board { width: min(100%, 980px); }
}
@media (max-width: 899px) {
  .ab-innen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; align-content: start; padding-top: 8px; }
  .ab-board { order: -1; width: min(100%, calc((100svh - var(--kopf) - var(--leiste) - 250px) * .87)); aspect-ratio: .87 / 1; border-width: 9px; }
  .ab-schritt { padding: 16px 18px 18px; border-top-width: 6px; }
  .ab-schritt h3 { font-size: 24px; margin-bottom: 4px; }
  .ab-schritt p:last-child { font-size: 16.5px; line-height: 1.4; }
  .ab-nr { width: 36px; height: 36px; font-size: 18px; }
  .ab-text { gap: 6px; align-content: start; }
  .ab-mail { --x: 3%; --y: 2.5%; --w: 45%; }
  .ab-konzept { --x: 52%; --y: 2.5%; --w: 45%; }
  .ab-check { --x: 52%; --y: 29%; --w: 45%; }
  .ab-foto--1 { --x: 3%; --y: 24%; --w: 30%; }
  .ab-foto--2 { --x: 23%; --y: 36%; --w: 27%; }
  .ab-handy { --x: 54%; --y: 49%; --w: 19%; }
  .ab-stat { --x: 3%; --y: 70%; --w: 46%; }
  .ab-stempel { --x: 52%; --y: 81%; --w: 44%; }
  .ab-fahr { display: none; }
}

/* ---------------------------------------------------------------- 9 Blog, Karte, Verschleierung */
.wand--blog { --kopf-bg: var(--papier); --band: var(--petrol); }
.wand--blog::before, .wand--plus::before, .wand--kontakt::before {
  content: "";
  position: absolute;
  inset: 5% 1.2% 2.2% 1.2%;
  background: var(--unterlage);
  rotate: -.28deg;
  border-radius: 4px;
  box-shadow: var(--schatten-hoch);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 30%);
  z-index: 0;
}
.wand--blog { --unterlage: var(--flieder); }
.wand--plus { --unterlage: var(--petrol); --kopf-bg: var(--gelb); --band: var(--tomate); }
.wand--kontakt { --unterlage: var(--tomate); --kopf-bg: var(--papier); --band: var(--petrol); }
.wand--blog > .behaelter, .wand--plus > .behaelter, .wand--kontakt > .behaelter { padding-top: clamp(18px, 3vw, 40px); }
.blog-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 44px); align-items: start; }
.region-suche { padding-top: 30px; }
.region-suche h3 { margin-bottom: 14px; }
.karte-feld { position: relative; margin-bottom: 16px; background: #e9dcb6; border: 2px solid rgba(42, 28, 16, .55); border-radius: 3px; box-shadow: inset 0 0 20px rgba(120, 90, 40, .3); padding: 6px; }
.karte-feld svg { display: block; width: 100%; height: auto; }
.karte-nord { position: absolute; right: 12px; top: 8px; width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid rgba(42, 28, 16, .6); border-radius: 50%; font: 800 12px/1 var(--schrift-ui); color: rgba(42, 28, 16, .75); }
.karten-pin {
  --n: var(--tomate);
  position: absolute;
  translate: -50% -100%;
  width: 44px; height: 46px;
  padding: 0; border: 0; background: transparent;
  display: grid; place-items: start center;
  z-index: 2;
}
.kp-kopf { position: relative; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background-color: var(--n); background-image: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--n) 35%, #fff) 0 14%, var(--n) 55%, color-mix(in srgb, var(--n), #000 40%) 100%); box-shadow: 0 4px 3px rgba(0, 0, 0, .45); transition: scale .2s, box-shadow .2s; }
.karten-pin::after { content: ""; position: absolute; left: 50%; top: 21px; width: 2px; height: 25px; translate: -50% 0; background: linear-gradient(#6a6a6a, #2a2a2a); box-shadow: 2px 3px 2px rgba(0, 0, 0, .35); z-index: -1; }
.kp-zahl { font: 800 12px/1 var(--schrift-ui); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); z-index: 1; }
.karten-pin[data-region="salzburg"] .kp-zahl { color: var(--tinte); text-shadow: none; }
.karten-pin[data-region="kaernten"] .kp-zahl { color: var(--tinte); text-shadow: none; }
.karten-pin:hover .kp-kopf { scale: 1.12; }
.karten-pin[aria-pressed="true"] .kp-kopf { scale: 1.3; box-shadow: 0 5px 4px rgba(0, 0, 0, .5), 0 0 0 5px color-mix(in srgb, var(--n) 45%, transparent); }
.karten-pin:focus-visible { outline: 3px solid var(--petrol-tief); outline-offset: 0; border-radius: 12px; box-shadow: 0 0 0 3px #fff; }
.region-wahl { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.region-zahl { font: 800 15px/1.3 var(--schrift-ui); background: var(--gelb); display: inline-block; padding: 7px 13px; border-radius: 99px; margin-bottom: 10px; }

.beitraege { min-width: 0; }
.beitraege-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; background: var(--papier); padding: 14px 20px; border-radius: 3px; box-shadow: var(--schatten-klein); margin-bottom: 38px; }
.kennung { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 14px/1.2 var(--schrift-ui); }
.kennung li { display: flex; align-items: center; gap: 8px; }
.tag { display: inline-block; font: 800 12.5px/1 var(--schrift-ui); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; white-space: nowrap; }
.tag--frei { background: var(--gelb); color: var(--tinte); }
.tag--einzel { background: var(--tomate); color: #fff; }
.tag--abo { background: var(--petrol); color: #fff; }
.tag--offen { background: var(--gruen-ok); color: #fff; }
.pol-tag { position: absolute; z-index: 6; top: 10px; right: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, .4); }

.polaroid-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: 40px 28px; align-items: start; }
.beitrag { padding-bottom: 14px; }
.beitrag article { display: grid; }
.pol-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 4px 0; font: 800 11.5px/1.2 var(--schrift-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-weich); }
.pol-meta span:first-child { color: var(--tomate-tief); }
.pol-meta time { margin-left: auto; font-weight: 600; letter-spacing: .02em; }
.pol-titel { font-size: clamp(19px, .6vw + 15px, 22px); line-height: 1.18; padding: 6px 4px 0; }
.pol-titel a { text-decoration: none; }
.pol-titel a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pol-region { font: italic 500 15px/1.2 var(--schrift); padding: 5px 4px 0; color: var(--tinte-weich); }
.beitraege-fuss { margin-top: 36px; background: var(--papier); display: inline-block; padding: 12px 18px; border-radius: 3px; max-width: 70ch; box-shadow: var(--schatten-klein); }

/* Verschleiert: die Seite liefert für gesperrte Beiträge nur die winzige, vorab unscharfe Datei (.v).
   Das scharfe Bild (.s) bekommt erst beim Freischalten eine Adresse. */
.beitrag[data-zugang="einzel"]:not([data-offen]) .pol-bild,
.beitrag[data-zugang="abo"]:not([data-offen]) .pol-bild { background: #5b4330; }
.pol-bild .v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(7px) saturate(1.5) brightness(1.04) contrast(1.1); scale: 1.2; image-rendering: auto; }
.pol-bild .s { position: absolute; inset: 0; opacity: .01; visibility: hidden; clip-path: circle(0% at 0 0); filter: brightness(.5) saturate(.15) contrast(.85) sepia(.4); }
.pol-bild:has(.v)::after { content: ""; position: absolute; inset: 0; background: url("../img/kork.webp") 0 0 / 190px; mix-blend-mode: overlay; opacity: .32; pointer-events: none; z-index: 2; transition: opacity .6s .5s; }
.schloss { position: absolute; inset: 0; z-index: 4; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 14px; background: radial-gradient(circle at 50% 50%, rgba(30, 14, 0, .38), rgba(30, 14, 0, .12) 80%); transition: opacity .35s ease, scale .35s ease, visibility 0s linear .35s; }
.schloss .ic { width: 46px; height: 46px; padding: 11px; background: var(--papier); color: var(--tinte); border-radius: 50%; stroke-width: 2.2; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.schloss-preis { font: 800 20px/1 var(--schrift-ui); background: var(--papier); color: var(--tinte); padding: 6px 12px; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.beitrag[data-offen] .pol-bild .s { opacity: 1; visibility: visible; clip-path: circle(150% at 0 0); filter: none; transition: opacity .5s ease, clip-path 1.5s cubic-bezier(.3, .6, .2, 1), filter 2s ease .2s; }
.beitrag[data-offen] .pol-bild .v { opacity: 0; transition: opacity .6s ease 1.1s; }
.beitrag[data-offen] .pol-bild::after { opacity: 0; }
.beitrag[data-offen] .schloss { opacity: 0; scale: .8; visibility: hidden; pointer-events: none; }
.beitrag[data-offen] .pol-tag { background: var(--gruen-ok); color: #fff; }
.beitrag.ist-gefiltert { display: none; }
.beitrag.ist-neu { animation: entwickeln-ring .9s ease-out; }
@keyframes entwickeln-ring { 0% { box-shadow: var(--schatten), 0 0 0 0 rgba(255, 210, 58, .9); } 100% { box-shadow: var(--schatten), 0 0 0 26px rgba(255, 210, 58, 0); } }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
html:not(.js) .nur-mit-js, html:not(.js) .frei-knopf { display: none; }

@media (min-width: 1000px) {
  .blog-raster { grid-template-columns: minmax(300px, .52fr) minmax(0, 1.5fr); }
  .region-suche { position: sticky; top: calc(var(--kopf) + 22px); }
}

/* ---------------------------------------------------------------- 10 Plus, Kontakt, Fuß */
.plus-raster, .kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 3.4vw, 48px); align-items: start; }
.abo-karte { padding: 36px clamp(22px, 2.4vw, 34px) 28px; }
.abo-karte h3 { font-size: clamp(30px, 2vw + 16px, 42px); margin-bottom: 8px; }
.abo-preis { font: 600 18px/1.2 var(--schrift-ui); margin-bottom: 16px; }
.abo-preis strong { font: 800 clamp(36px, 3vw + 16px, 54px)/1 var(--schrift); color: var(--tomate-tief); margin-right: 4px; }
.abo-preis span { display: block; margin-top: 6px; font: 500 14px/1.2 var(--schrift-ui); color: var(--tinte-weich); }
.abo-liste { display: grid; gap: 10px; margin-bottom: 20px; }
.abo-liste li { position: relative; padding-left: 28px; font-size: clamp(16.5px, .3vw + 15px, 18px); line-height: 1.45; }
.abo-liste li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 3.5px solid var(--petrol); border-bottom: 3.5px solid var(--petrol); rotate: -45deg; }
.abo-knoepfe { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-bottom: 16px; }
.abo-status { background: var(--gelb); border-radius: 4px; padding: 11px 14px; font: 700 15px/1.4 var(--schrift-ui); margin-bottom: 12px; }
.abo-status.ist-aktiv { background: var(--gruen-ok); color: #fff; }
.abo-status.ist-aus { background: var(--flieder); }
.plus-rechts { display: grid; gap: clamp(30px, 3vw, 44px); min-width: 0; }
.faq { padding-top: 32px; }
.faq h3 { margin-bottom: 12px; }
.faq details { border-top: 2px solid rgba(42, 28, 16, .3); padding: 4px 0; }
.faq summary { cursor: pointer; font: 800 16.5px/1.35 var(--schrift-ui); padding: 12px 34px 12px 0; list-style: none; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font: 800 24px/1 var(--schrift-ui); color: var(--tomate-tief); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 0 12px; font-size: 17px; line-height: 1.5; }
.faq .klein { margin-top: 8px; }
.newsletter { padding-top: 32px; }
.newsletter h3 { margin-bottom: 8px; }
.newsletter > p { margin-bottom: 14px; }
.newsletter .feld input { background: #fff; }
.newsletter .formular-meldung { color: var(--petrol-tief); }
.newsletter .klein { color: #4a3a00; }

.kontakt-rechts { display: grid; gap: clamp(30px, 3vw, 40px); min-width: 0; }
.kontakt-karte h3 { margin-bottom: 8px; }
.kontakt-karte p + p { margin-top: 8px; }
.kontakt-karte .tel-gross { color: inherit; }
.zettel--petrol a { color: #fff; }
.formular { padding-top: 32px; }

.recht-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 32px 26px; margin-top: clamp(44px, 5vw, 70px); align-items: start; }
.recht h3 { font-size: 21px; margin-bottom: 6px; }
.recht p:not(.klein) { font-size: 16px; line-height: 1.5; margin-top: 8px; }

.fuss { position: relative; z-index: 1; background-color: #432a12; background-image: linear-gradient(180deg, #5f3d1e, #432a12); color: #fff3dc; padding-top: 44px; margin-top: 40px; border-top: 4px solid #2c1a08; }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 40px; }
.fuss-logo { font: 700 28px/1.1 var(--schrift); margin-bottom: 8px; }
.fuss address { font-style: normal; margin-bottom: 8px; }
.fuss a { color: #fff3dc; text-underline-offset: 3px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 10px; }
.fuss-links a, .fuss-links { font-weight: 700; font-family: var(--schrift-ui); font-size: 15px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-werbung { font-size: 15px; }
.fuss-demo { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 243, 220, .25); font: 500 13.5px/1.5 var(--schrift-ui); color: #f0dfc2; max-width: 90ch; }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px var(--rand) 28px; text-align: center; font: 500 13px/1.4 var(--schrift-ui); color: #e9d6b4; }
.fuss-zeile a { color: #fff3dc; }

@media (min-width: 900px) {
  .plus-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kontakt-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .feld-zeile { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 11 Dialog (Bezahlen, Demo) */
.kauf { border: 0; padding: 0; background: transparent; width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: visible; color: var(--tinte); }
.kauf::backdrop { background: rgba(36, 16, 0, .66); }
.kauf-form { position: relative; background: var(--papier); padding: 28px clamp(20px, 3vw, 32px) 24px; border-radius: 4px; box-shadow: var(--schatten-hoch); border-top: 10px solid var(--tomate); max-height: calc(100dvh - 24px); overflow: auto; }
.kauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.kauf-kopf .kicker { margin: 0; }
.kauf-zu { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2.5px solid var(--tinte); border-radius: 50%; background: #fff; }
.kauf-form h2 { font-size: clamp(25px, 1.4vw + 16px, 32px); margin-bottom: 10px; }
.kauf-preis { margin-bottom: 10px; font: 600 15px/1.2 var(--schrift-ui); }
.kauf-preis strong { font: 800 38px/1 var(--schrift); color: var(--tomate-tief); margin-right: 8px; }
.kauf-text { font-size: 17px; line-height: 1.45; margin-bottom: 14px; }
.kauf-meldung { min-height: 1.4em; margin-bottom: 10px; font: 700 14.5px/1.4 var(--schrift-ui); color: var(--fehler); }
.kauf-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.kauf-form .klein { margin-top: 4px; }
.kauf.ist-fertig .kauf-form { border-top-color: var(--gruen-ok); }
.kauf { transition: opacity .3s ease, translate .3s ease, overlay .3s allow-discrete, display .3s allow-discrete; opacity: 0; translate: 0 26px; }
.kauf[open] { opacity: 1; translate: 0 0; }
@starting-style { .kauf[open] { opacity: 0; translate: 0 26px; } }
.kauf::backdrop { transition: opacity .3s ease; opacity: 0; }
.kauf[open]::backdrop { opacity: 1; }
@starting-style { .kauf[open]::backdrop { opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: calc(var(--leiste) + 22px); translate: -50% 0; z-index: 60; max-width: min(92vw, 560px); background: var(--tinte); color: var(--papier); padding: 13px 20px; border-radius: 6px; font: 700 15px/1.4 var(--schrift-ui); box-shadow: var(--schatten-hoch); }
.toast[hidden] { display: none; }

/* ---------------------------------------------------------------- 12 Auftritte und Bewegungsstufen */
/* Deko: kleine Zettel und Klebeband im Hintergrund, schweben mit dem Scrollen (nur dynamisch) */
.deko { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deko i { position: absolute; display: block; opacity: .85; box-shadow: var(--schatten-klein); }
.wand--mediakit .deko-1 { left: 1.5%; top: 14%; width: 74px; height: 74px; background: var(--flieder); rotate: 12deg; }
.wand--mediakit .deko-2 { right: 2%; top: 42%; width: 120px; height: 30px; background: repeating-linear-gradient(45deg, #ffe27a 0 9px, var(--gelb) 9px 18px); rotate: -24deg; }
.wand--mediakit .deko-3 { left: 3%; bottom: 8%; width: 60px; height: 82px; background: var(--petrol); rotate: -8deg; }
.wand--blog .deko-1 { right: 2%; top: 3%; width: 70px; height: 70px; background: var(--gelb); rotate: -10deg; }
.wand--blog .deko-2 { left: 1%; top: 50%; width: 110px; height: 28px; background: repeating-linear-gradient(45deg, #e8433a 0 9px, var(--tomate) 9px 18px); rotate: 20deg; }
.wand--blog .deko-3 { right: 3%; bottom: 6%; width: 62px; height: 84px; background: var(--petrol); rotate: 9deg; }

@media (min-width: 0) {
  .rein { opacity: 1; }
}
/* 12a: scroll-getrieben (Chrome, Edge, Safari 26): Auftritte, Balken, Linie, roter Faden, Briefing, Deko */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    html:not([data-bewegung="starr"]) .rein {
      animation: rein-auf linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    html:not([data-bewegung="starr"]) .b-fuell,
    html:not([data-bewegung="starr"]) .st {
      animation: balken-auf linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 80%;
    }
    html:not([data-bewegung="starr"]) .linie-pfad {
      animation: linie-zeichnen linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 45%;
    }
    html:not([data-bewegung="starr"]) .linie-flaeche { animation: flaeche-auf linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    html:not([data-bewegung="starr"]) .ring-teil { animation: ring-zeichnen linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
    html:not([data-bewegung="starr"]) .inter-wert { animation: stempeln linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
    html:not([data-bewegung="starr"]) .ab-huelle { view-timeline: --ab block; }
    html:not([data-bewegung="starr"]) .ab-buehne {
      animation: ab-lauf linear both;
      animation-timeline: --ab;
      animation-range: cover 16.667% cover 83.333%;
    }
    html:not([data-bewegung="starr"]) .faden-rot { animation: faden-lauf linear both; animation-timeline: scroll(root); }
    html[data-bewegung="dynamisch"] .deko i { animation: schweb linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes rein-auf { from { opacity: 0; translate: 0 44px; scale: .95; } }
@keyframes balken-auf { from { scale: 0 1; } }
@keyframes linie-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes flaeche-auf { from { opacity: 0; } }
@keyframes ring-zeichnen { from { stroke-dasharray: 0 100; } }
@keyframes stempeln { from { scale: 2.1; opacity: 0; } 70% { opacity: 1; } to { scale: 1; } }
@keyframes ab-lauf { from { --p: 0; } to { --p: 5; } }
@keyframes faden-lauf { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes schweb { from { translate: 0 90px; } to { translate: 0 -110px; } }

/* 12b: Rückfall (Firefox, ältere Browser): ein IntersectionObserver setzt .ist-da, ein Scroll-Zeiger setzt --fort und --p */
html.rein-io .rein { opacity: 0; translate: 0 44px; scale: .95; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .8, .2, 1), scale .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
html.rein-io .rein.ist-da { opacity: 1; translate: 0 0; scale: 1; }
html.rein-io .b-fuell, html.rein-io .st { scale: 0 1; transition: scale .9s cubic-bezier(.2, .8, .2, 1) .15s; }
html.rein-io .ist-da .b-fuell, html.rein-io .ist-da .st { scale: 1 1; }
html.rein-io .linie-pfad { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease .2s; }
html.rein-io .ist-da .linie-pfad { stroke-dashoffset: 0; }
html.rein-io .linie-flaeche { opacity: 0; transition: opacity .8s ease 1s; }
html.rein-io .ist-da .linie-flaeche { opacity: 1; }
html.rein-io .ring-teil { stroke-dasharray: 0 100; transition: stroke-dasharray 1.1s ease .2s; }
html.rein-io .ist-da .ring-teil--1 { stroke-dasharray: 61 39; }
html.rein-io .ist-da .ring-teil--2 { stroke-dasharray: 27 73; }
html.rein-io .ist-da .ring-teil--3 { stroke-dasharray: 6 94; }
html.rein-io .ist-da .ring-teil--4 { stroke-dasharray: 3 97; }
html.rein-io .ist-da .ring-teil--5 { stroke-dasharray: 3 97; }
html.rein-io .inter-wert { scale: 2.1; opacity: 0; transition: scale .5s cubic-bezier(.2, .8, .2, 1) .5s, opacity .3s ease .5s; }
html.rein-io .ist-da .inter-wert { scale: 1; opacity: 1; }

/* Stufe starr und „Bewegung reduzieren": keine Auftritte, keine Übergänge, alles fertig */
html[data-bewegung="starr"] *, html[data-bewegung="starr"] *::before, html[data-bewegung="starr"] *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html[data-bewegung="starr"] .deko { display: none; }
html[data-bewegung="starr"] .rein { opacity: 1 !important; translate: none !important; scale: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .deko { display: none; }
  .rein { opacity: 1 !important; translate: none !important; scale: 1 !important; }
}

/* ---------------------------------------------------------------- Handy-Leiste: Stecknadeln unten, Kopf nur mit Marke und Knopf */
@media (max-width: 760px) {
  :root { --kopf: 58px; --leiste: 64px; }
  .rail { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .rail-cta { min-height: 44px; padding: 0 14px; font-size: 14px; box-shadow: 0 3px 0 var(--tinte); }
  .marke-zettel { font-size: 18px; padding: 8px 11px 9px; }
  .nadeln { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: var(--leiste); z-index: 55; background-color: #54351b; background-image: linear-gradient(180deg, #8a5d33, #54351b); border-top: 3px solid #3c250f; box-shadow: 0 -8px 18px -6px rgba(30, 12, 0, .6); display: grid; align-items: end; }
  .nadeln ol { padding-inline: 2px; }
  .faden { top: 8px; left: 3%; right: 3%; width: 94%; }
  .nadel { min-width: 0; width: 100%; gap: 3px; padding: 5px 0 0; }
  .n-name { font-size: 11px; letter-spacing: .02em; padding: 3px 3px 4px; }
  .nadel[aria-current="true"] .n-name { rotate: 0deg; }
  .n-kopf { width: 18px; height: 18px; }
}
@media (max-width: 380px) {
  .n-name { font-size: 10px; letter-spacing: 0; }
}