/* 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;
  /* Unten dieselbe Rundung wie oben. Vorher liefen die beiden Seitenlinien mit
     2 px fast eckig aus, und der Sockel sah unten abgeschnitten aus. */
  border-radius: var(--r-sm);
  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)}