/* Die Ideenbox (ideenbox.html) — nur das, was ausschliesslich sie
   braucht: die Zettel am Briefkasten, das Ideenraster mit Statusfilter
   und das Einwurfformular.

   Kopf, Fuss, Wortmarke und Grundfarben kommen aus rechtstext.css, das
   Seitengeruest (Oberflaechen, Auftakt, Foto, Textsektionen,
   Grundsatzliste, CTA, Weiterlesen-Karte, Abschluss, Auftritt beim
   Scrollen, Drucken) aus seite.css. Beide werden VOR dieser Datei
   geladen.

   Aus dem Entwurf bewusst NICHT uebernommen:
   - der komplette Lage-Block (Radar, Karte, Ziele, Anreise, Parken,
     Gehminuten-Leiste) und das Personen-Geruest der Wer-Seite — rund
     200 Zeilen CSS ohne jedes Markup auf dieser Seite;
   - ein zweiter, aelterer Formularsatz (`.box`, `.senden`, `.danke`,
     `.zaehler`), der neben dem aktuellen (`.ew-*`) im Entwurf lag;
   - die Etagen-Navigation (`.haus`, `.hof-btn`, `.chips`, `.reset`) —
     der Etagenfilter ist am 24.08.2026 gestrichen worden, mitsamt den
     `data-ebene`-Attributen an den Karten. Es bleibt der Statusfilter.

   Der Auftakt benutzt `.foto` aus seite.css und ergaenzt es nur um die
   Zettel (`.foto--box`) — ein zweiter Bilderrahmen fuer dieselbe
   Aufgabe waere genau das Duplikat, das bei der Lage-Integration schon
   herausgeflogen ist. */

/* ===== Auftakt: Briefkasten mit Zetteln ===== */

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0 0;
}
.hero-cta .cta-btn {
  flex: 0 0 auto;
}
.hero-cta-note {
  flex: 1 1 170px;
  min-width: 150px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* Der Verlauf aus seite.css dunkelt nur unten ab; hier braucht auch der
   obere Rand Deckung, sonst stehen die oberen Zettel auf hellem Putz. */
.foto--box img {
  object-position: 58% 52%;
  filter: saturate(0.85) contrast(1.05) brightness(0.94);
}
.foto--box::after {
  background: linear-gradient(
    180deg,
    rgba(24, 24, 22, 0.72) 0%,
    rgba(24, 24, 22, 0.15) 46%,
    rgba(24, 24, 22, 0.55) 100%
  );
}
.foto--box figcaption {
  z-index: 3;
}

.zettel-feld {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.zettel {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  background: linear-gradient(160deg, #f4efe4, #e6dfd1);
  color: var(--anthracite);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  max-width: 52%;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
  /* Einmal einschweben, dann still. Vorher wippten alle fuenf endlos
     (`schweb 7s infinite`) — Dauerbewegung im Blickfeld ist unruhig und
     zieht den Blick vom Titel weg. `translate` statt `transform`, weil
     jeder Zettel seine eigene Drehung traegt: die beiden Eigenschaften
     komponieren, eine Transform-Keyframe wuerde die Drehung ueberschreiben. */
  animation: zettel-ein 560ms var(--ease) both;
}
.zettel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.zettel.durch span {
  text-decoration: line-through;
  opacity: 0.55;
}
.zettel.leer {
  background: rgba(24, 24, 22, 0.72);
  border: 1px dashed var(--gold);
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: none;
  padding: 12px 16px;
  backdrop-filter: blur(2px);
}
/* Zwei Zettel statt fuenf (24.08.2026). Die drei rein benennenden
   („Podcastraum im Keller", „Licht auf der Fassade", „Ein Baum in den
   Hof") sind raus: sie standen wortgleich als Karten weiter unten und
   deckten dabei das Motiv zu. Uebrig bleiben die beiden, die etwas
   erzaehlen — eine verworfene Idee und die Einladung. Sie stehen jetzt
   ueber Eck statt beide unten, damit das Bild dazwischen atmet. */
.z5 { left: 5%;  top: 9%;  transform: rotate(-4deg); animation-delay: 260ms; max-width: 46%; }
.z6 { right: 5%; top: 70%; transform: rotate(5deg);  animation-delay: 380ms; }
@keyframes zettel-ein {
  from { opacity: 0; translate: 0 -18px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (max-width: 860px) {
  .foto--box {
    aspect-ratio: 1 / 1;
    max-height: none;
    margin-top: 28px;
  }
  .zettel {
    font-size: 12px;
    padding: 9px 12px;
    max-width: 48%;
  }
}

/* ===== Der Stand: Ideenraster mit Statusfilter ===== */

.ideenteil {
  padding: clamp(40px, 6vw, 80px) 0;
}
.einl {
  max-width: 62ch;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.einl h2 {
  margin-bottom: 16px;
}
/* Nicht `.einl p`: das ist eine Klasse plus Element und schlaegt damit
   `.kicker`, der als reine Klasse antritt — die Kicker-Zeile stand
   dadurch in 17,5px statt in 10px. */
.einl p:not(.kicker) {
  font-size: 17.5px;
  line-height: 1.65;
}

/* Die Filterleiste bleibt beim Scrollen stehen — bei 27 Karten steht
   der gewaehlte Status sonst schnell ausserhalb des Bildes. */
.filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 0;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rule);
}
.filter button {
  border: 1px solid var(--rule-solid);
  background: transparent;
  color: var(--fg-muted);
  padding: 9px 15px;
  font: 800 11px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.filter button:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.filter button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--auf-akzent);
}
.filter .anz {
  margin-left: 7px;
  font-variant-numeric: tabular-nums;
}

.trefferzeile {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font: 800 11px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.alles-weg {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  color: var(--accent-strong);
  font: 800 11px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}
.leer {
  padding: 34px 0;
  font-size: 16px;
  color: var(--fg-muted);
}

/* Gefuellter Knopf fuer den Weg ins Formular. `.cta` aus seite.css ist
   der ruhige, umrandete — hier soll einer davon lauter sein. */
.cta-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--auf-akzent);
  padding: 13px 22px;
  font: 800 12px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease;
}
.cta-btn:hover {
  background: var(--gold-light);
}
.s-light .cta-btn,
.s-accent .cta-btn {
  background: var(--anthracite);
  color: var(--gold-light);
}
.s-light .cta-btn:hover,
.s-accent .cta-btn:hover {
  background: var(--gold-deep);
  color: #fff;
}

.ideen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1000px) {
  .ideen {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ideen {
    grid-template-columns: 1fr;
  }
}

.idee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 18px 24px;
  border: 1px solid var(--rule-solid);
  background: linear-gradient(180deg, var(--flaum), transparent 60%);
  transition: border-color 220ms ease, background 220ms ease;
}
/* Linker Balken: die Statusfarbe, ohne dass die Karte selbst einfaerbt. */
.idee::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rule-solid);
  transition: background 220ms ease;
}
.idee[data-status="fix"]::after {
  background: var(--accent);
}
.idee[data-status="pruef"]::after {
  background: var(--gold-deep);
}
.idee[data-status="archiv"]::after {
  background: transparent;
  border-left: 2px dashed var(--rule-solid);
}
/* KEIN Anheben und keine einfahrende Linie beim Ueberfahren: die 27
   Karten sind keine Links, sie fuehren nirgendwohin. Beides las sich
   als Klick-Zusage, die nichts einloest. Was bleibt, ist ein leiser
   Rand — Lebendigkeit ohne Versprechen. Die eine Karte, die WIRKLICH
   ein Link ist (`.idee-cta`), hebt dafuer weiter ab; der Unterschied
   ist jetzt die Information. */
.idee:hover {
  border-color: var(--rule-solid);
  background: linear-gradient(180deg, var(--flaum), transparent 45%);
}
.idee[hidden] {
  display: none;
}

/* Rangordnung. Der Stand stand bisher nur in der Marke und im schmalen
   Balken links — 27 gleich schwere Kaesten, in denen eine beschlossene
   Sache genauso viel wiegt wie ein Einfall, der es nie wird.

   „Kommt" ist eine Tatsache und bekommt Grund, Rand und Nummer in Gold.
   „Archiv" ist eine Anekdote und nimmt sich zurueck. Dazwischen bleibt
   alles, wie es war. */
.idee[data-status="fix"] {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.09), transparent 70%);
}
.idee[data-status="archiv"] {
  border-style: dashed;
}
.idee[data-status="archiv"] h3,
.idee[data-status="archiv"] p {
  color: var(--fg-muted);
}
/* Kopfzeile der Karte: links die Nummer, rechts der Stand.

   Die Nummer trug vorher 13px und `opacity: .75` — in einem Verzeichnis
   aus 27 Eintraegen ist sie aber das, woran das Auge sich festhaelt und
   weiterzaehlt. Jetzt in Archivo Black auf Zeilenhoehe der Marke,
   zurueckgenommen im Ton statt in der Groesse. */
.idee .kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.idee .nr {
  font: 400 26px 'Archivo Black', "Arial Black", sans-serif;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  /* NICHT --rule-solid: das ist eine Linienfarbe und kommt auf Cream
     auf 1,4:1. Die Nummer traegt Inhalt, sie muss lesbar bleiben —
     zurueckgenommen im Ton, nicht ausgeblendet. --fg-leise ist der Ton
     fuer genau diesen Fall — leiser als der Text, aber ueber der
     Schwelle. Deckkraft taugt dafuer nicht, sie nimmt den Kontrast mit. */
  color: var(--fg-leise);
}
.idee[data-status="fix"] .nr {
  color: var(--accent);
}
.idee h3 {
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 2px 0 0;
  color: var(--fg);
  text-wrap: balance;
}
.idee p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg-muted);
  margin: 0;
}
.idee .fuss {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Der eine Moment, in dem Bewegung auf dieser Seite etwas leistet:
   beim Filtern springen 27 Karten sonst hart um, und man sieht nicht,
   DASS etwas passiert ist. Das Skript setzt `.frisch` samt Verzoegerung
   auf die verbleibenden Karten — Animation statt Uebergang, weil aus
   `display: none` heraus nichts zu ueberblenden ist. */
@keyframes karte-ein {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
.idee.frisch {
  animation: karte-ein 300ms var(--ease) both;
}

.status {
  font: 800 9px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.st-fix {
  color: var(--accent-strong);
  background: rgba(201, 162, 75, 0.14);
  border-color: var(--accent);
}
/* Auf Cream kommt dasselbe Paar nur auf 4,3:1, und die Marke ist 9px
   gross — dort traegt sie den Textton. Rand und Tonung bleiben golden,
   die Hervorhebung geht also nicht verloren. */
.s-light .st-fix {
  color: var(--fg);
}
.st-pruef {
  color: var(--fg);
  border-color: var(--rule-solid);
}
.st-offen {
  color: var(--fg-muted);
  border-color: var(--rule-solid);
}
.st-archiv {
  color: var(--fg-muted);
  border-style: dashed;
  border-color: var(--rule-solid);
}

/* Die Einladung als letzte Karte im Raster, damit sie am Ende des
   Lesens steht und nicht nur ganz oben. */
.idee-cta {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  text-decoration: none;
  border-style: dashed;
  border-color: var(--accent);
  background: rgba(201, 162, 75, 0.05);
}
.idee-cta::after {
  background: var(--accent);
}
.idee-cta:hover {
  background: rgba(201, 162, 75, 0.12);
}
.idee-cta .cta-text {
  display: grid;
  gap: 6px;
}
.idee-cta h3 {
  margin: 0;
}
.idee-cta p {
  margin: 0;
  max-width: 48ch;
}
.cta-pfeil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--auf-akzent);
  padding: 13px 22px;
  font: 800 12px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 180ms ease;
}
.idee-cta:hover .cta-pfeil {
  background: var(--accent-strong);
}

.legende {
  display: flex;
  gap: 10px 26px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--fg-muted);
}
.legende span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legende span::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--rule-solid);
}
.legende span:nth-child(1)::before {
  background: var(--accent);
}
.legende span:nth-child(2)::before {
  background: var(--gold-deep);
}
.legende span b {
  color: var(--fg);
  font-weight: 800;
}

/* ===== Der Einwurf: Formular ===== */

.einwerfen {
  padding: clamp(48px, 7vw, 92px) 0;
}
.ew-kopf {
  max-width: 56ch;
  margin-bottom: 28px;
}
.ew-kopf h2 {
  margin: 0 0 12px;
}
.ew-lead {
  font-size: 17px;
  color: var(--fg-muted);
  margin: 0;
}
.ew-form {
  display: grid;
  gap: 22px;
  max-width: 760px;
}
.ew-form[hidden],
.ew-danke[hidden] {
  display: none;
}
.feld {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.feld label {
  font: 800 10.5px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.feld label .opt {
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 600;
}
.feld input,
.feld textarea {
  background: var(--feld);
  border: 1px solid var(--rule-solid);
  color: var(--fg);
  font: 400 17px 'Manrope', Arial, sans-serif;
  padding: 15px 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
#i-titel {
  font-size: 19px;
}
.feld textarea {
  min-height: 110px;
  resize: vertical;
  font-size: 16px;
}
.feld input::placeholder,
.feld textarea::placeholder {
  /* NICHT --fg-leise: der ist fuer grosse Schrift gerechnet und faellt
     bei 17px durch. */
  color: var(--fg-muted);
}
.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.22);
}
.feld input[aria-invalid="true"] {
  border-color: #8a2f2f;
}
.zaehl {
  position: absolute;
  right: 0;
  top: 0;
  font: 800 10.5px 'Manrope', Arial, sans-serif;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.ew-kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .ew-kontakt {
    grid-template-columns: 1fr;
  }
}
/* Honigtopf: fuer Menschen unsichtbar, fuer Formularroboter verlockend. */
.hp {
  position: absolute;
  left: -9999px;
}
.ew-senden {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ew-senden button {
  border: 0;
  background: var(--anthracite);
  color: var(--gold-light);
  padding: 17px 30px;
  font: 800 12.5px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.ew-senden button:hover {
  background: var(--gold-deep);
  color: #fff;
}
@media (max-width: 640px) {
  .ew-senden button {
    width: 100%;
  }
}
.ew-klein {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
  max-width: 44ch;
}
.ew-klein a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ew-fehler {
  margin: 0;
  font-size: 14px;
  color: #8a2f2f;
  font-weight: 700;
}
.ew-danke {
  max-width: 560px;
  border: 1px solid var(--accent);
  padding: 32px 28px;
}
.ew-haken {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: var(--auf-akzent);
  font: 800 17px 'Manrope', Arial, sans-serif;
  margin-bottom: 18px;
}
.ew-danke h3 {
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--fg);
}
.ew-danke p {
  font-size: 16px;
  color: var(--fg-muted);
  margin: 0 0 20px;
}
.ew-ersatz {
  font-size: 14px;
}
.ew-ersatz a {
  color: var(--accent);
  text-underline-offset: 2px;
}
.ew-nochmal {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 12px 20px;
  font: 800 11.5px 'Manrope', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.ew-nochmal:hover {
  background: var(--anthracite);
  color: var(--gold-light);
  border-color: var(--anthracite);
}

/* Drucken: die Bedienelemente der Seite fallen weg, die Ideen bleiben.
   `.foto`, `.cta`, `.sticky-cta` und `.weiter` erledigt seite.css. */
@media print {
  .filter,
  .trefferzeile,
  .idee-cta,
  .ew-form,
  .hero-cta {
    display: none;
  }
  .ideen {
    grid-template-columns: 1fr 1fr;
  }
  .idee {
    break-inside: avoid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zettel,
  .idee.frisch {
    animation: none;
  }
  .idee,
  .idee::after,
  .cta-pfeil {
    transition: none;
  }
}