/* ========================================================================= Seite /ideen («Was fehlt dir?»), nur hier geladen. Neu am 11.10.2026. Drei Dinge sind an diesem Tag dazugekommen: der Kopf mit dem Absatz, der Fahrplan darunter und das Symbol im leeren Ideen-Kasten. Dazu zwei kleine Nachbesserungen an Bestehendem (Trefferflächen und Kontrast). Keine neue Farbe, keine neue Schrift, kein neuer Radius: alles kommt aus dem :root-Block von site.css. Bewegt wird nichts Neues. ========================================================================= */ /* ---------- Der Kopf ---------- Ein Hauptelement: die grosse Zeile «Was fehlt dir?». Darunter ein einziger Satz in Weiss, der sagt, worum es geht, dann drei kurze Sätze leise, dann der Knopf. Kein zweites lautes Element. */ .ik{padding-bottom:clamp(34px,6vw,64px)} .ik__kern{margin-top:18px;max-width:28ch;color:#fff;font-weight:650; font-size:clamp(20px,5.4vw,27px);line-height:1.3;text-wrap:balance} .ik__text{margin-top:12px;max-width:52ch;color:var(--faint); font-size:clamp(16px,2.3vw,18px);line-height:1.6} .ik__tat{margin-top:24px} /* ---------- Der Fahrplan ---------- Gleiche Bausteine wie früher auf /funktionen (.plan-rows, .prow, .chip, .plan-fertig aus site.css). Hier steht nur, was dazukommt. */ .fp__h{font-size:clamp(30px,7vw,52px);margin:0 0 4px} .fp__zeilen{margin-top:18px;max-width:760px} /* Die Nummer stand in #3f4a49 auf dem Seitengrund: 2,05 zu 1. Das Design-System schlägt var(--muted) vor (7,6 zu 1). Was gerade läuft, behält sein Orange aus site.css. */ .fp .prow__no{color:var(--muted)} .fp .prow[data-status="laufend"] .prow__no{color:var(--pop)} /* «Aus euren Ideen gebaut» und «Schon fertig» stehen untereinander. Die erste Zeile trägt den Trennstrich, die zweite rückt ohne eigenen Strich nah heran, damit beide als ein Block lesen. Das Grün ist das der Pille «Community» (var(--green), 8,3 zu 1 auf dem Seitengrund). */ .plan-euch b{color:var(--green)} .plan-euch + .plan-fertig{margin-top:8px;padding-top:0;border-top:0} /* ---------- Das Formular ---------- Der Kasten steht jetzt in einem eigenen Abschnitt, darum kein Abstand mehr nach oben. Der Dankeschön-Kasten zog sich mit -24px an eine Liste heran, die es hier nicht mehr gibt: jetzt sitzt er mit eigenem Abstand unter dem Formular. */ .iv .ib{margin-top:0;margin-bottom:28px} .iv .dank{margin:0;max-width:760px} /* Platzhalter in den Feldern: #68746f hielt rund 3,6 zu 1. Jetzt 5,4 zu 1, und er bleibt sichtbar leiser als das, was man selbst tippt (#fff). */ .ib .input::placeholder,.ib .textarea::placeholder{color:#86938f} /* Die Filterknöpfe waren 40 Pixel hoch. Mindestens 44, damit man sie mit dem Daumen sicher trifft. */ .filter{min-height:44px} /* ---------- Das Symbol im leeren Ideen-Kasten ---------- Ersetzt am 11.10.2026 die Grumm-Figur. Gebaut wie die Symbole der App: viewBox 24, Strich 1.7, runde Enden. Es steht in einem ruhigen Kreis in var(--primary-dim) mit Rand var(--primary-line), damit es als Zeichen liest und nicht als loses Strichbild. Strich var(--primary) auf dem Kreis: rund 6,7 zu 1, also auch über den 3 zu 1, die AA für Grafik verlangt. */ .leer-symbol{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px; border-radius:50%;background:var(--primary-dim);border:1px solid var(--primary-line)} .leer-symbol svg{width:30px;height:30px;fill:none;stroke:var(--primary);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .empty{padding:40px 22px} /* ---------- Schriftgrössen fürs Handy ---------- Die Handy-Prüfung vom 11.10.2026: auf dieser Seite war 12 Pixel die häufigste Schriftgrösse. Die Regel seither: Fliesstext mindestens 16 Pixel, Nebenzeilen mindestens 14. Etiketten in Grossbuchstaben mit Sperrung (Feldnamen) bleiben kleiner, aber nicht unter 12. .eyebrow und .chip gehören allen Seiten und bleiben, wie sie in site.css sind. */ .fp .prow__d{font-size:16px;line-height:1.55} .fp .plan-fertig{font-size:16px} .ib__sub{font-size:16px} .ib label{font-size:12px;letter-spacing:.16em} .dank{font-size:16px} .empty{font-size:16px} .board__zahl{font-size:14px} .filter{font-size:14px} .idea p{font-size:16px} .idea__by{font-size:14px} .idea__vote span{font-size:12px;letter-spacing:.06em} .iv__h{font-size:clamp(30px,7vw,52px);margin:0 0 14px} /* Das Podest: die Spalten sind am Handy rund 110 Pixel breit. Ein langes Wort wie «Sperrbildschirm» wurde dort mitten im Wort ohne Trennstrich umgebrochen. hyphens:auto trennt nach deutscher Regel (die Seite steht auf lang="de", die englische auf lang="en"). Titel nicht unter 14 Pixel. Die Karten bekommen dafür am Handy links und rechts 8 statt 12 Pixel Innenabstand, damit ein Wort wie «Erinnerung» in 14 Pixeln auf eine Zeile passt. */ @media(max-width:559px){.idea--podest{padding-left:8px;padding-right:8px}} .idea--podest .idea__main h3{font-size:14px;-webkit-hyphens:auto;hyphens:auto} @media(min-width:560px){ .idea--podest .idea__main h3{font-size:16px} .idea--podest .idea__main p{font-size:14px} } /* Der Kopf rückt nach oben, weil jetzt der Zurück-Knopf über der Augenbraue steht. */ .ik{padding-top:18px} /* ---------- Nachbesserung 11.10.2026: die Stimmen-Spalte kompakt ---------- In der Liste wuchs der Knopf «dafür» auf die ganze Höhe der Karte und stand als hoher, leerer Kasten links. Jetzt bleibt er so gross, wie er ist (56 mal 56 Pixel), oben neben dem Titel. Das Podest hat seine eigene Anordnung und bleibt, wie es ist. */ .ideas__rest .idea__vote{align-self:flex-start} /* ========================================================================= V2 Runde 2 (12.10.2026): am Handy blättern, ein Abschnitt ein Bildschirm Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkt 13. Das Einrasten steht in site.css 17a; Platz für den Inhalt höchstens 571 Pixel. Am Rechner und am Tablet bleibt jeder Pixel. ========================================================================= */ /* Der Abstand über «Ideen von euch» stand bis heute als style-Attribut im HTML. Am Rechner und ohne Blättern gilt er unverändert. */ @media(min-width:768px){#community{padding-top:46px}} @media(max-width:767px){html:not(.blaettern) #community{padding-top:46px}} @media(max-width:767px){ html.blaettern main > .hair{display:none} /* ---------- 1 · Der Kopf ---------- Zurück oben, der Rest mittig im Platz über dem Zustimmungsband. */ html.blaettern .ik > .wrap{display:flex;flex-direction:column; min-height:calc(100svh - var(--blatt-oben) - var(--blatt-unten))} html.blaettern .ik .seite-zurueck{align-self:flex-start} html.blaettern .ik .eyebrow{margin-top:auto} html.blaettern .ik .ik__tat{margin-bottom:auto;padding-bottom:96px} html.blaettern .ik__h{font-size:56px;line-height:.95} /* ---------- 2 · Der Fahrplan ---------- Am Handy nur Nummer, Titel und Zustand je Zeile, der Satz darunter fällt weg (die Titel sagen schon, worum es geht). So passt der ganze Fahrplan auf einen Bildschirm. Die Pille steht rechts neben dem Titel. 13.10.2026: Zeilen 10 statt 12 Pixel innen. Mit dem neuen Fahrplan brechen drei deutsche Titel bei 375 Pixeln zweizeilig um, der Abschnitt war 17 Pixel zu hoch und die Seite rastete nicht mehr ein (blaettern-frei). */ .fp .prow{flex-wrap:nowrap;align-items:center;gap:12px;padding:10px 0} .fp .prow__t{min-width:0;font-size:19px;line-height:1.12} .fp .prow__d{display:none} .fp .prow .chip{flex:none} .fp .fp__zeilen{margin-top:14px} .fp .plan-fertig{margin-top:12px;padding-top:14px} /* 13.10.2026: Die Zeile oben gleich stark wie «.plan-euch + .plan-fertig» (Zeile 39) und später im Text, sie hob dort am Handy den engen Abstand nach «Aus euren Ideen gebaut» auf. So gilt er wieder, und der Zurück-Knopf verdeckt mit dem neuen Fahrplan bei 375 × 667 kein Wort mehr. */ .fp .plan-euch + .plan-fertig{margin-top:8px;padding-top:0} /* ---------- 3 · Das Formular ---------- Dichter gesetzt, die Felder bleiben 44 Pixel und höher. Der Dankeschön-Kasten steht am Handy einen Bildschirm weiter (ideen.html). */ .iv .ib{margin:0} .iv__h{font-size:32px;margin:0 0 8px} .iv .ib__sub{margin-bottom:4px} .iv .ib__zeile{gap:0} .iv .ib .field{margin-top:10px} .iv .ib label{margin-bottom:4px} .iv .ib .input,.iv .ib .textarea{padding:11px 16px} .iv .ib .textarea{min-height:84px} .iv .ib__ab{margin-top:16px;gap:10px 16px} /* ---------- 4 · Ideen von euch ---------- Wächst mit jeder Idee. Wird die Liste höher als ein Bildschirm, rastet die Seite nur noch in der Nähe der Bereiche ein (blaettern.js, Klasse blaettern-frei), damit keine Idee übersprungen wird. 13.10.2026 (Reste nach Runde 4): der leere Kasten oben und unten 16 statt 22 Pixel. Bei 375 × 667 reichte der Bildschirm ohne Ideen sonst bis knapp unter den schwebenden Zurück-Knopf (er lag 4 Pixel auf dem Dankeschön-Kasten); so hat der Inhalt Platz, ganz darüber zu rücken. */ #community .empty{padding:16px 20px} #community .leer-symbol{width:52px;height:52px;margin-bottom:12px} #community .dank{margin:16px 0 0} /* ---------- 5 · Erst ausprobieren ---------- Ein Bildschirm für den Schluss: die Zeile darf gross sein. */ html.blaettern #holen h2{font-size:48px;line-height:.95} /* Die Sicherungen (Feld mit Fokus, Bereich zu hoch) gelten für alle Blätter-Seiten gemeinsam: site.css 17a und assets/js/blaettern.js. */ } /* ========================================================================= V2 Runde 4 (13.10.2026), Punkt 42: das Feld «Kurz erklärt» Es wächst mit dem Text (board.js, wachse()), überall, auch am Rechner. Hier steht nur, dass die Höhe ohne Übergang wechselt: .ib .textarea hatte «transition:.18s» auf allem (board.css), dann stünde der Text nach jeder neuen Zeile für 0,18 Sekunden doch wieder halb verdeckt. Rand, Fläche und Schein beim Fokus gleiten weiter wie bisher. Am ruhenden Feld ändert sich dadurch kein Pixel. ========================================================================= */ .ib .textarea{transition-property:border-color,background-color,box-shadow} @media(max-width:767px){ /* Der Zurück-Knopf schwebt seit Runde 4 unten rechts (site.css 18b, Punkt 33). Er lag hier über dem Ende des Satzes «Gespeichert wird nur …». Am Handy steht der Satz darum über dem Knopf «Idee abschicken», und der Knopf ganz unten links, wo nichts über ihm schwebt. */ .iv .ib__ab{flex-direction:column-reverse;align-items:flex-start} .iv .ib__ab .tiny{flex:none;min-width:0} } /* ========================================================================= RECHNER (ab 768 Pixeln), 13.10.2026: ein Bereich, ein Bildschirm Auftrag: docs/umbau-handy/DESKTOP-2026-10-13.md. Am Rechner erzählt die Seite dasselbe wie am Handy, in derselben Reihenfolge: der starke Absatz, der Fahrplan (live aus /api/board, board.js), das Formular, Ideen von euch, der Schluss. Ab 1024 Pixeln stehen Fahrplan und Formular auf demselben Bildschirm nebeneinander: links, was kommt, rechts, wo man seins dazuschreibt. Jeder Bereich ist genau eine Bildschirmhöhe hoch (das Fenster ohne die Kopfleiste), kompakt und mittig. Runde 2 am Rechner (13.10.2026 abends): die Seite hakt ein wie am Handy. , jeder .bildschirm ist eine Station (site.css 17e, assets/js/blaettern.js e); Fahrplan und Formular beginnen auf derselben Höhe und sind darum eine Station. Wird «Ideen von euch» mit vielen Ideen höher als ein Bildschirm, scrollt sie frei. Der letzte Bereich und die Fusszeile sind zusammen ein Bildschirm. Alles hier steht in @media(min-width:768px); unter 768 Pixeln ändert sich kein Pixel (Pixelvergleich gegen den Stand v2c). ========================================================================= */ @media(min-width:768px){ /* Die Kopfleiste ist 57 Pixel hoch, ab 900 Pixeln 61 (site.css). */ html.blaettern{--rz-kopf:57px;--rz-h:calc(100vh - var(--rz-kopf));--rz-rand:clamp(24px,4.6vh,52px)} html.blaettern main > .hair{display:none} html.blaettern main > section{display:flex;padding:0} html.blaettern main > section[hidden]{display:none} html.blaettern main > section > .wrap{display:flex;flex-direction:column;justify-content:center; min-height:var(--rz-h);padding-block:var(--rz-rand)} html.blaettern main > section:last-child > .wrap{min-height:calc(var(--rz-h) - var(--fuss-h, 0px))} /* ---------- 1 · Der Kopf ---------- Zurück oben links wie immer. Die grosse Zeile, darunter der Satz in Weiss und die leisen Sätze mit dem Knopf, mittig im Bildschirm. */ html.blaettern .ik{padding-top:0} html.blaettern .ik > .wrap{padding-top:20px} html.blaettern .ik .seite-zurueck{align-self:flex-start;margin-bottom:0} html.blaettern .ik .eyebrow{margin-top:auto;margin-bottom:20px} html.blaettern .ik__h{font-size:clamp(84px,min(10.4vw,19vh),160px);line-height:.9} html.blaettern .ik__kern{max-width:22ch;margin-top:clamp(20px,3.6vh,34px);font-size:clamp(24px,2.3vw,34px);line-height:1.25} html.blaettern .ik__text{max-width:40em;font-size:clamp(18px,1.5vw,20px)} html.blaettern .ik__tat{margin-top:clamp(18px,3.2vh,30px);margin-bottom:auto} html.blaettern .ik__tat .btn{min-height:56px;padding:15px 30px;font-size:16px} /* ---------- 2 · Der Fahrplan ---------- Wie am Handy je Zeile Nummer, Titel und Zustand; der Satz darunter fällt weg, die Titel sagen, worum es geht. «Schon fertig» bleibt. */ .fp__h{font-size:clamp(48px,5.4vw,80px);line-height:.94;margin:0} .fp .fp__zeilen{margin-top:clamp(16px,3vh,28px);max-width:none} .fp .prow{flex-wrap:nowrap;align-items:center;gap:16px;padding:clamp(11px,1.8vh,16px) 0} .fp .prow__no{min-width:30px} .fp .prow__t{min-width:0;font-size:clamp(20px,1.75vw,25px);line-height:1.1} .fp .prow .chip{flex:none} .fp .prow__d{display:none} .fp .plan-fertig{margin-top:clamp(12px,2vh,20px);padding-top:clamp(12px,2vh,18px);font-size:16px} /* ---------- 3 · Das Formular ---------- In einer ruhigen Karte. Die Felder untereinander, das Feld «Kurz erklärt» wächst mit (board.js, wachse()). */ .iv .ib{max-width:760px;margin:0;padding:clamp(24px,3.4vh,40px) clamp(26px,2.6vw,40px);border-radius:var(--r-xl); background:var(--card);border:1px solid var(--line-strong);box-shadow:0 30px 70px rgba(0,0,0,.35)} .iv__h{font-size:clamp(36px,3.4vw,50px);margin:0 0 10px} .iv .ib__sub{margin-bottom:6px} .iv .ib .field,.iv .ib__zeile .field{margin-top:clamp(10px,1.6vh,16px)} .iv .ib__ab{margin-top:clamp(16px,2.6vh,24px)} /* ---------- 4 · Ideen von euch ---------- Wächst mit jeder Idee. Der Dankeschön-Kasten steht wie am Handy hier. */ #community .board__top h2{font-size:clamp(40px,4.4vw,64px)!important} html.blaettern #community{padding-top:0} #community .dank{margin:18px 0 0;max-width:760px} /* ---------- 5 · Erst ausprobieren (mit der Fusszeile ein Bildschirm) ---------- Das Zeichen der App, die Zeile, ein Satz, die zwei Laden-Karten gleich gestaltet, App Store oben, Google Play darunter (Auftrag vom 11.10.2026, auf allen Seiten gleich). Ohne Tag 0, wie am Handy. Bei wenig Höhe (unter 820 Pixeln Fenster) fällt das Zeichen weg, damit der Bereich mit der Fusszeile auf einen Bildschirm passt. */ html.blaettern #holen h2{font-size:clamp(52px,5.6vw,84px);line-height:.92} html.blaettern #holen .lead{font-size:clamp(18px,1.5vw,21px);margin-top:12px} html.blaettern #holen .laden-tat{width:100%;max-width:360px;margin-top:clamp(18px,3.4vh,32px)} html.blaettern #holen .laden.stores{grid-template-columns:minmax(0,1fr);max-width:none;gap:10px} html.blaettern #holen .laden .store{min-height:62px;justify-content:center;padding:8px 20px} .holen-zeichen{display:block;width:clamp(72px,9vh,112px);height:auto;margin:0 auto clamp(16px,2.8vh,28px); border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 70px rgba(95,181,171,.18)} } @media(min-width:768px) and (max-height:819px){ .holen-zeichen{display:none} } @supports(height:100svh){ @media(min-width:768px){html.blaettern{--rz-h:calc(100svh - var(--rz-kopf))}} } @media(min-width:900px){html.blaettern{--rz-kopf:61px}} @media(min-width:1024px){ /* 1 · Die Zeile über die ganze Breite, darunter links der Satz in Weiss, rechts die leisen Sätze und der Knopf */ html.blaettern .ik > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr auto auto auto auto 1fr;column-gap:clamp(40px,5vw,88px);align-items:start} html.blaettern .ik .seite-zurueck{grid-column:1;grid-row:1;justify-self:start} html.blaettern .ik .eyebrow{grid-column:1/-1;grid-row:3;margin-top:0} html.blaettern .ik__h{grid-column:1/-1;grid-row:4} html.blaettern .ik__kern{grid-column:1;grid-row:5} html.blaettern .ik__text{grid-column:2;grid-row:5;margin-top:clamp(20px,3.6vh,34px)} html.blaettern .ik__tat{grid-column:2;grid-row:6;margin-bottom:0} /* 2 und 3 · Fahrplan links, Formular rechts, auf einem Bildschirm. Die Seite ist dafür ein Raster mit zwei Spalten in der Breite des Inhalts (2 × 570 = --wrap); jeder andere Bereich geht über alles. */ html.blaettern main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,570px) minmax(0,570px) minmax(0,1fr)} html.blaettern main > *{grid-column:1/-1} html.blaettern main > #ideen{grid-row:1} html.blaettern main > #fahrplan{grid-column:2;grid-row:2} html.blaettern main > #vorschlag{grid-column:3;grid-row:2} html.blaettern main > #community{grid-row:3} html.blaettern main > #holen{grid-row:4} html.blaettern main > #fahrplan > .wrap{max-width:none;padding-left:var(--pad);padding-right:clamp(24px,3vw,44px)} html.blaettern main > #vorschlag > .wrap{max-width:none;padding-left:clamp(12px,1.4vw,20px);padding-right:var(--pad)} html.blaettern main > #fahrplan > .wrap,html.blaettern main > #vorschlag > .wrap{padding-block:clamp(20px,3.4vh,52px)} /* Ohne Fahrplan (leer, board.js blendet ihn aus) steht das Formular allein */ html.blaettern main > #fahrplan[hidden] ~ #vorschlag{grid-column:2/4} html.blaettern main > #fahrplan[hidden] ~ #vorschlag > .wrap{padding-left:var(--pad)} .iv .ib__zeile{grid-template-columns:1fr;gap:0} }