/* Ideen-Board: Podest für die Top 3, kleines Karten-Menü, Bearbeiten in der Karte.
   Bewusst eine eigene Datei neben site.css: das hier gilt nur auf /ideen und soll
   die gemeinsame Grundlage der übrigen Seiten nicht anfassen.
   Farben, Abstände und Radien kommen weiterhin aus den Tokens von site.css. */

/* ======================= PODEST =======================
   Platz 2 links, Platz 1 in der Mitte, Platz 3 rechts. Der Treppen-Eindruck
   entsteht aus zwei Dingen: die Spalten stehen unten bündig (align-items:end),
   und der Sockel unter Platz 1 ist der höchste. Die mittlere Spalte ist etwas
   breiter — so bleibt Platz 1 auch am schmalen Handy lesbar. */
.podest {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  gap: 8px;
}
@media (min-width: 560px) {
  .podest { gap: 16px; }
}

.podest__platz {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}
.podest__platz[data-platz="1"] { --tint: var(--gold);   --sockel: 46px; }
.podest__platz[data-platz="2"] { --tint: #c6d3d0;       --sockel: 32px; }
.podest__platz[data-platz="3"] { --tint: var(--rail2);  --sockel: 22px; }
@media (min-width: 560px) {
  .podest__platz[data-platz="1"] { --sockel: 62px; }
  .podest__platz[data-platz="2"] { --sockel: 44px; }
  .podest__platz[data-platz="3"] { --sockel: 30px; }
}

/* Während des Bearbeitens braucht das Formular die ganze Breite — in einer
   Podest-Spalte von rund 110 px liesse sich nichts tippen. */
.podest__platz--breit { grid-column: 1 / -1; }

.podest__sockel {
  height: var(--sockel);
  margin-top: 8px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
  border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 22%, transparent), rgba(255, 255, 255, .02));
}
.podest__sockel span {
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: 17px;
  line-height: 1;
  color: var(--tint);
}
.podest__platz[data-platz="1"] .podest__sockel span { font-size: 22px; }
@media (min-width: 560px) {
  .podest__sockel span { font-size: 20px; }
  .podest__platz[data-platz="1"] .podest__sockel span { font-size: 28px; }
}

/* ======================= KARTE AUF DEM PODEST ======================= */
/* Alle drei Karten sind gleich hoch. Nur so steht Platz 1 zuverlässig am
   höchsten: die Spalten enden unten bündig, und der Unterschied kommt allein
   aus dem Sockel. Bei unterschiedlich hohen Karten würde ein längerer Titel auf
   Platz 2 den Sieger überragen. Die Höhe ist auf den längstmöglichen Inhalt
   gerechnet (Titel und Text sind auf feste Zeilenzahlen begrenzt). */
.idea--podest {
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px;
  height: 228px;
}
@media (min-width: 560px) {
  .idea--podest { padding: 18px 16px; height: 292px; }
}
/* In der Liste rutscht eine Karte beim Zeigen nach rechts — auf dem Podest wäre
   das eine seitliche Kippbewegung. Dort hebt sie sich stattdessen an. */
.idea--podest:hover { transform: translateY(-3px); background: var(--card); }

.podest__platz[data-platz="1"] .idea--podest {
  border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  background: linear-gradient(180deg, rgba(224, 185, 74, .10), var(--card) 62%);
}
.podest__platz[data-platz="1"] .idea--podest:hover {
  border-color: color-mix(in srgb, var(--gold) 52%, transparent);
}

.idea--podest .idea__main {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Eine Podest-Spalte ist am Handy nur rund 110 px breit. Ein Menü in der Ecke
   würde dem Titel dort die halbe Zeile wegnehmen — deshalb steht es hier in
   einer eigenen Zeile oben rechts, und der Titel behält die volle Breite. */
.idea--podest .idea__menu {
  position: relative;
  top: auto;
  right: auto;
  align-self: flex-end;
  order: -1; /* im Bild ganz oben, in der Tastatur-Reihenfolge trotzdem zuletzt */
  margin: -6px -4px -10px 0;
}
/* Der Titel bricht auf schmalen Spalten irgendwann ab, statt die Karte
   auseinanderzuziehen. */
.idea--podest .idea__main h3 {
  font-size: 12.8px;
  line-height: 1.3;
  display: -webkit-box;
  /* Am Handy sind vier kurze Zeilen lesbarer als drei abgeschnittene. Getrennt
     wird nur, wenn ein Wort allein nicht in die schmale Spalte passt — sonst
     würde es am Rand einfach abgeschnitten und sähe nach Fehler aus. */
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.idea--podest .idea__main p {
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Am Handy ist die Spalte rund 110 px breit — dort zählen Titel und Zustimmung,
   der Beschreibungstext würde auf zwei Wörter pro Zeile zerfallen. */
@media (max-width: 559px) {
  .idea--podest .idea__main p { display: none; }
  .idea--podest .idea__foot .idea__by { display: none; }
}
.idea--podest .idea__foot { margin-top: auto; padding-top: 10px; }
@media (min-width: 560px) {
  .idea--podest .idea__main h3 { font-size: 16px; -webkit-line-clamp: 3; line-clamp: 3; }
  .idea--podest .idea__main p { font-size: 13.5px; }
}
/* Ab hier ist eine Podest-Spalte über 200 px breit. Dann passt das Menü zurück
   in die Ecke, die Karte verliert keine Zeile dafür — und sie darf flacher sein,
   weil die oberste Zeile wegfällt. */
@media (min-width: 760px) {
  .idea--podest { height: 252px; }
  .idea--podest .idea__menu {
    position: absolute;
    top: 6px;
    right: 6px;
    margin: 0;
    align-self: auto;
  }
  .idea--podest .idea__main h3 { padding-right: 38px; }
}

/* Zustimmen ist auf dem Podest derselbe Knopf, nur liegend und über die ganze
   Kartenbreite — mit 44 px Höhe bleibt er auch mit dem Daumen gut zu treffen. */
.idea--podest .idea__vote {
  flex-direction: row;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
}
.idea--podest .idea__vote b { font-size: 15px; }
.idea--podest .idea__vote span { font-size: 9px; }

/* ======================= LISTE UNTER DEM PODEST ======================= */
.ideas__rest {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Platz für das Menü in der Ecke, damit kein Titel darunter durchläuft. Nur in
   der Liste: auf dem Podest ist die Spalte dafür zu schmal (siehe oben). */
.ideas__rest .idea__main h3 { padding-right: 38px; }
.idea__meins { color: var(--primary); }

.mehr { align-self: center; margin-top: 2px; }
.mehr__zahl {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--primary-dim);
  border: 1px solid var(--primary-line);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

/* ======================= MENÜ AN DER KARTE =======================
   Melden gehört zur Idee, soll aber nicht die halbe Karte einnehmen. <details>
   bringt Auf- und Zuklappen samt Tastaturbedienung von Haus aus mit. */
.idea__menu {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}
.idea__mehr {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  transition: background .16s, color .16s;
}
.idea__mehr::-webkit-details-marker { display: none; }
.idea__mehr:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.idea__mehr:active { background: rgba(255, 255, 255, .12); }
.idea__mehr:focus-visible { background: rgba(255, 255, 255, .09); color: #fff; }
.idea__menu[open] .idea__mehr { background: rgba(255, 255, 255, .09); color: #fff; }

.idea__menubox {
  position: absolute;
  top: 46px;
  right: 0;
  min-width: 154px;
  max-width: min(210px, calc(100vw - 48px));
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  z-index: 3;
}
/* Ganz links auf dem Podest würde ein rechtsbündiges Menü über den Bildschirmrand
   hinauslaufen — dort klappt es nach rechts auf. */
.podest__platz[data-platz="2"] .idea__menubox { left: 0; right: auto; }

.menu__eintrag {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.menu__eintrag:hover { background: rgba(255, 255, 255, .07); }
.menu__eintrag:active { background: rgba(255, 255, 255, .12); }
.menu__eintrag[disabled] { opacity: .4; pointer-events: none; }
.menu__eintrag--weg { color: #f3a4a0; }
.menu__eintrag--weg:hover { background: rgba(222, 86, 80, .14); }

@keyframes menu-auf {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.idea__menu[open] .idea__menubox { animation: menu-auf .16s var(--ease); }

/* ======================= BEARBEITEN IN DER KARTE ======================= */
.idea__edit .field:first-child { margin-top: 0; }
.idea__edit .input,
.idea__edit .textarea { font-size: 15px; padding: 11px 13px; }
.idea__edit .textarea { min-height: 88px; }
.idea__editknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ======================= WENIGER BEWEGUNG ======================= */
@media (prefers-reduced-motion: reduce) {
  .idea--podest,
  .idea__mehr,
  .menu__eintrag { transition: none; }
  .idea--podest:hover { transform: none; }
  .idea__menu[open] .idea__menubox { animation: none; }
}


/* ═══════════════ NEUE FASSUNG DER IDEEN-SEITE ═══════════════
   Die Seite sah neben der Startseite blass aus: eine Textwand als Zeitstrahl,
   das Formular in einem Kasten am Rand. Jetzt spricht sie dieselbe Sprache —
   Zahlen, die hochzählen, der Fahrplan in denselben grossen Zeilen wie auf der
   Startseite, und das Formular offen statt eingesperrt. */

/* --- Zahlenband im Kopf --- */
.zbd{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,52px);margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.zbd__z{display:block}
.zbd__z b{display:block;font-family:'Anton',Impact,sans-serif;
  font-size:clamp(34px,7vw,54px);line-height:.95;color:var(--primary)}
.zbd__z:nth-child(2) b{color:#fff}
.zbd__z:nth-child(3) b{color:var(--pop)}
.zbd__z i{display:block;font-style:normal;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* --- Fahrplan in Gruppen ---
   Gleiche Zeilen wie auf der Startseite (.prow), nur nach Zustand gebündelt.
   Die Beschreibung bleibt, steht aber klein unter der Zeile statt gleichwertig
   daneben — dadurch liest man zuerst die Reihenfolge und erst dann die Details. */
.plangr{display:flex;align-items:center;gap:12px;margin:30px 0 2px;
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted)}
.plangr::after{content:"";flex:1;height:1px;background:var(--line)}
.plangr[data-status="laufend"]{color:var(--pop)}
.plangr[data-status="geplant"]{color:var(--xp)}
.plangr[data-status="fertig"]{color:var(--primary)}
.plangr:first-child{margin-top:22px}
#timeline .prow__no{font-size:clamp(14px,2.4vw,17px)}
#timeline .prow[data-status="fertig"] .prow__no{color:var(--primary)}
#timeline .prow[data-status="geplant"] .prow__no{color:var(--xp)}

/* --- Das Formular offen statt im Kasten --- */
.ib{max-width:760px;margin:8px 0 40px}
.ib h2{margin-bottom:10px}
.ib__sub{font-size:15.5px;line-height:1.6;color:var(--faint);margin-bottom:22px}
.ib .field{margin-top:16px}
.ib label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ib .input,.ib .textarea{width:100%;padding:15px 18px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);color:#fff;font-size:16px;transition:.18s}
.ib .input{border-radius:99px}
.ib .textarea{border-radius:18px;min-height:104px;line-height:1.55;resize:vertical}
.ib .input::placeholder,.ib .textarea::placeholder{color:#68746f}
.ib .input:focus,.ib .textarea:focus{outline:0;border-color:var(--pop);
  background:rgba(255,138,61,.07);box-shadow:0 0 0 3px rgba(255,138,61,.18)}
.ib__zeile{display:grid;gap:16px}
@media(min-width:680px){.ib__zeile{grid-template-columns:1.6fr 1fr;align-items:start}
  .ib__zeile .field{margin-top:16px}}
.ib__ab{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:22px}
.ib__ab .btn{flex:none}
.ib__ab .tiny{flex:1;min-width:240px;margin:0}

/* --- Ablauf in drei Schritten --- */
.ablauf{display:grid;gap:12px;margin:0 0 40px;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:760px){.ablauf{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}}
.ablauf li{display:flex;align-items:baseline;gap:12px}
.ablauf b{font-family:'Anton',Impact,sans-serif;font-size:20px;color:var(--primary);flex:none}
.ablauf span{font-size:14px;line-height:1.5;color:var(--faint)}

.board__top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}


/* --- Dankeschön für umgesetzte Ideen ---
   Steht direkt unter dem Ablauf: wer die drei Schritte gelesen hat, sieht sofort,
   dass am Ende etwas zurückkommt. */
.dank{display:flex;gap:14px;align-items:flex-start;margin:-24px 0 40px;
  padding:16px 18px;border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--pop-dim),transparent 70%);
  border:1px solid var(--pop-line);font-size:14.5px;line-height:1.55;color:var(--faint)}
.dank b{display:block;color:#fff;font-weight:700;margin-bottom:3px}
.dank__i{flex:none;font-size:16px;line-height:1.4;color:var(--pop)}