/* ========================================================================== FÖRDERBUCH – Anwendungsgerüst (Seitenleiste, Kopf, Bauteile) -------------------------------------------------------------------------- WIE ES FUNKTIONIERT: index.css bringt die WERTE mit (§1–§3), diese Datei benutzt sie. Hier steht KEIN einziger Farbwert – wer einen braucht, legt ihn dort an. `qa/unit/test_design_system.py` prüft das für beide Dateien. DIE DREI ENTSCHEIDUNGEN, DIE DAS GERÜST TRAGEN ---------------------------------------------- 1. SEITENLEISTE STATT REITER. Die Bereiche eines Projekts heißen „Bescheid und Pflichten", „Berichte und Verwendungsnachweis", „Budget und Mittelabrufe". Neun solche Namen nebeneinander ergeben eine Reiterleiste, die umbricht oder waagerecht scrollt – beides schlecht zu treffen und schlecht zu lesen. Senkrecht haben sie Platz. 2. DIE LEISTE WECHSELT NICHT DEN INHALT, SIE ERGÄNZT IHN. Öffnet man ein Projekt, erscheinen dessen Bereiche EINGERÜCKT unter dem Projektnamen; die Ebene darüber (Übersicht, Projekte, Fristen, Team) bleibt sichtbar. Der übliche Weg – die Leiste tauscht ihren Inhalt gegen den Projektkontext – spart Platz und kostet Orientierung. Unsere Nutzer sind ehrenamtliche Vorstände und Buchhaltungen in Teilzeit, die alle paar Wochen hereinschauen. Für sie darf beim Klicken nichts VERSCHWINDEN, nur dazukommen. 3. DIE LEISTE TRÄGT DAS MARKENGRÜN. Es ist die einzige große farbige Fläche der Anwendung. Der Arbeitsbereich daneben bleibt Papier mit 1px-Linien, damit Zahlenkolonnen ruhig bleiben. Farbe im Inhalt bedeutet etwas (Ampel), Farbe in der Leiste ist die Marke. Zuerst war die Leiste blau. Als ganze Spalte macht das Markenblau die Oberfläche schwer – sie liest sich wie Verwaltungssoftware aus dem Rechenzentrum. Grün ist derselbe Ernst, aber freundlich; Blau bleibt, wo es hingehört: in der SCHRIFT. VERBUNDEN MIT: static/css/index.css (Werte), docs/DESIGN_SYSTEM.md, templates/anwendung/ (Hülle und Seiten), qa/unit/test_design_system.py ========================================================================== */ /* ===== §1 GERÜST ========================================================= */ /* 280px, nicht 240: „Bescheid und Pflichten" und „Berichte und Nachweis" brechen darunter zusammen mit ihrem Zähler um. Die Breite folgt hier den längsten echten Begriffen, nicht einem runden Wert. */ .app { display: grid; grid-template-columns: 280px 1fr; height: 100vh; overflow: hidden; /* Bezugsrahmen fuer den Falt-Griff, der auf der Trennlinie sitzt (§3a). */ position: relative; } /* NICHT `position: sticky`. Erster Versuch war genau das, und beim Scrollen wanderte die Leiste mit nach unten: Ein Rasterfeld wird standardmäßig auf die Zeilenhöhe gedehnt, damit hat ein klebendes Element keinen Bereich, in dem es kleben könnte. Statt das mit `align-self` zu flicken, scrollt hier nur der Arbeitsbereich – die übliche Bauform einer Anwendungshülle, und die einzige, bei der die Navigation garantiert stehen bleibt. */ .leiste { background: var(--leiste); color: var(--leiste-text); display: flex; flex-direction: column; gap: var(--a4); /* UNTEN KEIN AUSLAUF (Vorgabe Murat, 08.09.2026: „aşağıda bir karış boşluk var, aşağıya daya"). Der Fuss traegt seinen eigenen kleinen Abstand; die 24 Punkte hier kamen NOCH DAZU und liessen den Block ueber dem unteren Rand schweben. Oben bleiben sie: Dort steht die Wortmarke, und die braucht Luft. */ padding: var(--a5) var(--a3) var(--a2); overflow-y: auto; } /* Die Wortmarke steht mittig über der Navigation. Linksbündig sass sie optisch schief: Die Einträge darunter haben links ihr Symbol und damit eine andere Kante als das „F". Mittig gibt es diesen Vergleich nicht. DREI SPALTEN STATT `justify-content: center` (v1.3.0): Rechts steht jetzt der Griff zum Einklappen (§3a). In einem zentrierten Flex-Kasten schöbe er die Marke nach links, und zwar genau um seine halbe Breite – die Marke sässe also wieder schief, nur diesmal andersherum. `1fr auto 1fr` hält sie in der Mitte der LEISTE, unabhängig davon, was rechts daneben steht. */ .leiste__marke { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--a2) var(--a2) var(--a3); } .leiste__markenverweis { grid-column: 2; display: block; } .leiste__wortmarke { display: block; height: 24px; width: auto; } .leiste__orga { padding: 0 var(--a3) var(--a2); margin-top: calc(var(--a3) * -1); color: var(--leiste-leise); font-size: var(--s-klein); font-weight: 600; text-align: center; overflow-wrap: anywhere; } /* --------------------------------------------------------------------- DIE EIGENE STELLUNG – unter dem Vereinsnamen (v0.53.0) --------------------------------------------------------------------- BEFUND MURAT, 15.08.2026: Er sah zwei Reiter statt sechs und konnte nirgends ablesen, ob das eine Sperre, ein Fehler oder Absicht ist. ALS MARKE UND NICHT ALS ZEILE: Auf dem grünen Grund verschwindet ein weiterer Text in Grau zwischen Vereinsname und Navigation. Ein abgesetztes Feld liest man als das, was es ist – eine Auszeichnung. FARBE UND WORT, nie Farbe allein (DESIGN_SYSTEM §3.2): Der Betreiber ist hell hervorgehoben, die übrigen Stufen bleiben ruhig. Wer die Farbe nicht unterscheiden kann, liest weiterhin „Betreiber · Vollzugriff". */ .leiste__stellung { align-self: center; margin: 0 var(--a3) var(--a4); padding: 2px var(--a3); border: 1px solid var(--leiste-linie); border-radius: var(--ecke-rund); color: var(--leiste-leise); font-size: var(--s-klein); font-weight: 600; text-align: center; overflow-wrap: anywhere; } /* Der Betreiber hebt sich ab – er ist die einzige Stufe ÜBER dem Verein. */ /* Das Schild ist für den Betreiber ein GRIFF (v0.97.2). Es sieht aus wie vorher – es reagiert nur, weil dahinter jetzt eine Seite liegt. Vorgabe Murat, 22.08.2026: „üstte superadmin vollzugriff kismi var ya oraya basinca gireyim." Ohne diese Zeilen wäre es ein Verweis mit Unterstreichung und Verweisfarbe – also ein anderes Bauteil, obwohl es dasselbe Schild bleiben soll. */ .leiste__stellung--griff { display: block; text-decoration: none; cursor: pointer; } /* Hover und „hier bin ich" sehen aus wie bei jedem Eintrag der Leiste (`.navi a:hover`). Zwei verschiedene Arten, dasselbe zu sagen, wären eine zu viel. */ .leiste__stellung--griff:hover, .leiste__stellung--griff[aria-current="page"] { background: var(--leiste-flaeche); color: var(--leiste-aktiv); border-color: var(--leiste-aktiv); } .leiste__stellung--betreiber { border-color: var(--leiste-aktiv); background: var(--leiste-flaeche); color: var(--leiste-aktiv); } /* Ohne Zugang ist kein Zustand, den man übersieht: Wer das liest, kommt gerade nirgends hinein und muss erfahren, dass das der Grund ist. */ .leiste__stellung--ohne { border-color: var(--leiste-gefahr); color: var(--leiste-gefahr); } .arbeit { min-width: 0; /* ohne das sprengen breite Tabellen das Raster */ display: flex; flex-direction: column; overflow-y: auto; /* hier wird gescrollt, nicht auf der Seite */ /* DIESE EINE ZEILE HÄLT DIE NAVIGATION STEHEN – sie sieht nach nichts aus und ist der ganze Unterschied. `overflow-y: auto` schneidet nur ab, was SEIN Bezugsrahmen ist. Ein Element mit `position: absolute` OHNE positionierten Vorfahren bezieht sich auf die Seite selbst; der Arbeitsbereich schneidet es dann nicht ab, und es verlängert stattdessen die SEITE. Genau das ist am 13.08.2026 passiert: Die vorlesbare Beschriftung „Zeilen je Seite" (v0.20.0, `.nur-vorlesen`) steht unten am Blätterwerk, ist mit `position: absolute` aus dem Bild geschoben – und machte das Dokument 3182px hoch. Gescrollt wurde danach die ganze Seite, also wanderte die Leiste mit nach oben. GEMESSEN: vorher `documentElement.scrollHeight` 3182 bei 900px Schirm, nachher 900. Mit `position: relative` wird der Arbeitsbereich zum Bezugsrahmen, und was in ihm liegt, bleibt in ihm. */ position: relative; } /* ===== §2 ORGANISATIONSWECHSLER ========================================== Erscheint NUR, wenn jemand zu mehreren Organisationen gehört – Berater, Dachverbände. Ein Wechsler mit genau einem Eintrag ist ein Bedienelement, das nichts tut, und Nutzer suchen dahinter trotzdem eine Funktion. */ /* Zweizeilig: Name oben, Hinweis darunter. `display:flex` mit `align-items:center` setzt Textknoten und NEBENeinander – der Name bricht dann um und der Hinweis rutscht daneben. */ .orgwechsler { display: block; width: 100%; padding: var(--a2) var(--a3); background: var(--leiste-flaeche); border: 1px solid var(--leiste-linie); border-radius: var(--ecke-klein); color: var(--leiste-aktiv); font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .orgwechsler small { display: block; font-weight: 400; color: var(--leiste-leise); } /* ===== §2a SYMBOLE ======================================================= Eingebettet über helfer.symbol(), Strichstärke von Lucide, Farbe = Textfarbe (`currentColor`). Deshalb braucht kein Ort eine eigene Symbolfarbe. Die Grösse folgt der Schrift (`em`), nicht einer festen Pixelzahl: In einer kleineren Zeile wird das Symbol mit kleiner, ohne dass es jemand pflegen muss. */ .sym { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; } .sym--gross { width: 2.2rem; height: 2.2rem; stroke-width: 1.5; } /* ===== §3 NAVIGATION ===================================================== */ .navi { display: flex; flex-direction: column; gap: 2px; } .navi__titel { padding: var(--a3) var(--a3) var(--a1); font-size: var(--s-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--leiste-leise); } .navi a, .navi__knopf { display: flex; align-items: center; gap: var(--a3); padding: var(--a2) var(--a3); border-radius: var(--ecke-klein); color: var(--leiste-text); text-decoration: none; font-size: var(--s-hinweis); } .navi a:hover, .navi__knopf:hover { background: var(--leiste-flaeche); color: var(--leiste-aktiv); } .navi a[aria-current="page"] { background: var(--leiste-flaeche); color: var(--leiste-aktiv); font-weight: 600; } /* Zähler am rechten Rand – die Zahl, die sagt "hier ist etwas offen". */ .navi .zaehler, .navi__zahl { margin-left: auto; min-width: 1.4rem; padding: 0 .35rem; border-radius: var(--ecke-rund); background: var(--schlecht); color: var(--leiste-aktiv); font-size: var(--s-klein); font-weight: 600; text-align: center; } .navi .zaehler--warnung { background: var(--warnung); } /* Die Bereiche des geöffneten Projekts. Die Linie links ist keine Zierde: sie zeigt, dass diese Einträge zu dem Projekt darüber gehören. */ .navi__projekt { margin: var(--a1) 0 var(--a2) var(--a4); padding-left: var(--a3); border-left: 2px solid var(--leiste-linie); display: flex; flex-direction: column; gap: 2px; } .navi__projekt a { font-size: var(--s-klein); padding: .3rem var(--a3); } .leiste__trenner { height: 1px; background: var(--leiste-linie); margin: var(--a2) var(--a3); } /* DER FUSS SITZT GANZ UNTEN und wird dorthin geschoben, nicht dorthin gerechnet: `margin-top: auto` in einer Spalte drückt alles, was folgt, an den unteren Rand – unabhängig davon, wie viele Einträge darüber stehen. VORGABE MURAT, 15.08.2026: „o profil kismini asagi kaydir, daha çok versiyonu tam en alta yapistir." Die Versionsnummer klebt deshalb ohne eigenen Abstand am unteren Rand; sie ist der Deploy-Beweis und kein Gestaltungselement. */ .leiste__fuss { margin-top: auto; padding-bottom: 0; } /* Kontakt steht ohne Gruppenüberschrift direkt über dem Profil. Eine Überschrift für EINEN Eintrag ist ein Wort ohne Aufgabe. */ .navi--fuss { margin-bottom: var(--a2); } .leiste__profil { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--a2); padding: var(--a2) var(--a3); } .leiste__profilverweis { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--a2); color: inherit; text-decoration: none; } .leiste__profilverweis:hover .leiste__person, .leiste__profilverweis[aria-current="page"] .leiste__person { color: var(--grund); } .leiste__profilbild { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--leiste-linie); border-radius: var(--ecke-rund); color: var(--leiste-text); object-fit: cover; } .leiste__person { min-width: 0; color: var(--leiste-text); font-size: var(--s-hinweis); font-weight: 600; overflow-wrap: anywhere; } .leiste__person small { display: block; font-weight: 400; color: var(--leiste-leise); overflow-wrap: anywhere; } /* Abmelden ist ein Knopf in einem Formular (POST) und sitzt als roter Ausgang direkt am Profil. Ein waere von aussen auslösbar und meldete Leute ungefragt ab. */ .leiste__abmelden { display: inline-flex; align-items: center; justify-content: center; width: var(--bedienhoehe); height: var(--bedienhoehe); padding: 0; border: 1px solid transparent; border-radius: var(--ecke-klein); background: none; font: inherit; color: var(--leiste-gefahr); cursor: pointer; } .leiste__abmelden:hover { border-color: var(--leiste-gefahr); background: var(--schlecht-hell); color: var(--schlecht); } /* DIE VERSIONSNUMMER IST DER DEPLOY-BEWEIS UND SONST NICHTS. Sie muss LESBAR sein, wenn man sie sucht, und darf in keiner Sekunde davor Aufmerksamkeit kosten. Deshalb: die kleinste Schrift der Anwendung, die leiseste Farbe, und ein Abstand nach oben, der sie deutlich unter das Abmelden setzt statt direkt daran (Vorgabe Murat, 12.08.2026). Sie steht damit ganz unten in der Leiste – dem Ort, an dem man sie sucht. */ .leiste__version { margin-top: var(--a3); padding: 0 var(--a3); color: var(--leiste-leise); font-size: .68rem; letter-spacing: .02em; opacity: .75; font-variant-numeric: tabular-nums; } /* ===== §3a DIE SCHMALE LEISTE =========================================== VORGABE MURAT, 01.09.2026: „sol taraftaki nav kismi var ya orayi acili kapanir yapalim. yukarda ok olsun sag sol olsun. förderbuch logosu daralinca ikon kullanalim fb ikonu. menülerde büyükce olsun altinda kücük yazssin. yere ihtiyacimiz var." WAS HIER PASSIERT: Ein Griff oben in der Markenzeile setzt am -Element die Klasse `leiste-schmal` (leiste.js). Diese Klasse ist der einzige Schalter; alles Weitere steht in diesem Abschnitt. 280 Punkte werden zu 96 – das sind 184 Punkte mehr für die Arbeitsfläche, auf einem 1440er Schirm knapp ein Achtel der Breite. Auf einer Excel-Liste mit neun Spalten (§8b) ist das der Unterschied zwischen „passt" und „rollt". DIE EINTRÄGE VERLIEREN IHR WORT NICHT, sie stellen es um: Symbol gross oben, Wort klein darunter. Das ist der Kern der Vorgabe und keine Geschmacksfrage. Eine Leiste aus reinen Symbolen – wie sie viele Anwendungen an dieser Stelle bauen – verlangt, dass man neunzehn Bildchen auswendig kennt oder auf jedes einzeln zeigt und wartet. „Fristen" und „Förderprojekte" sind beides Ordner-Sinnbilder; welches welches ist, sagt nur das Wort. Ein Kurzhinweis am Mauszeiger hilft ausserdem an keinem Tastaturplatz und auf keinem Tastbildschirm. DAS SYMBOL WÄCHST IN `rem` UND NICHT IN `em` (§2a rechnet in `em`, damit Symbole der Schrift folgen). Hier ist das genau falsch herum gewollt: Die Schrift wird KLEINER, das Symbol GRÖSSER. In `em` würde das Symbol mit dem Wort zusammen schrumpfen – dann wäre der Eintrag nur klein statt anders. DIE MASSE GEHÖREN ZUSAMMEN: 6rem Spaltenbreite, davon 2×.25rem Polsterung der Leiste und 2×2px am Eintrag, bleiben rund 80 Punkte für das Wort. Bei .62rem Schriftgrad trägt eine Zeile etwa vierzehn Zeichen – „Förderprojekte" hat genau vierzehn. Deshalb steht hier `hyphens: auto`: Was nicht passt, wird an einer deutschen Trennstelle geteilt („Förder- projekte") und nicht mitten im Wort abgeschnitten. Die Sprache dafür kommt aus ``. NUR AUF BREITEN SCHIRMEN. Unter 900px ist die Leiste eine Schublade (§12) – sie ist dort ohnehin weg, wenn man sie nicht braucht, und eine schmale Schublade wäre eine Verkleinerung von etwas, das gar keinen Platz kostet. Deshalb liegt fast alles hier in `@media (min-width: 901px)`, und der Griff selbst verschwindet unterhalb davon (§12). VERBUNDEN MIT: static/js/leiste.js (setzt die Klasse, merkt sie sich), templates/anwendung/huelle.html (Markenzeile, Griff, Zeichen), qa/unit/test_leiste.py. ========================================================================= */ /* Der Griff. Er sieht aus wie das Abmelden-Kreuz unten – dieselbe Familie: ein Symbol in einem stillen Rahmen, der erst beim Darüberfahren Farbe bekommt. Zwei verschiedene Formen für zwei kleine Griffe in derselben Leiste wären eine zu viel. */ /* AUF DER LINIE, NICHT IN DER FLAECHE (Vorgabe Murat, 08.09.2026: „onu tam çizgiye … koysan, direkt alan içine koymasan"). ER SASS BIS v1.23.0 IN DER MARKENZEILE, also innerhalb der Leiste. Dort war er ein Bedienelement unter anderen und nahm oben rechts Platz weg, den die Wortmarke gebraucht haette. Auf der Trennlinie ist er, was er ist: der Griff AN der Kante, die er verschiebt. ER HAENGT AM `.app`-RASTER UND NICHT AN DER LEISTE. `.leiste` hat `overflow-y: auto`; ein Knopf, der zur Haelfte ueber ihre rechte Kante ragt, wuerde dort abgeschnitten. `left` liegt genau auf der Spaltengrenze, `translateX(-50%)` legt ihn mittig darauf – die schmale Leiste aendert deshalb nur diesen einen Wert (§3a). KLEIN UND RUND. Ein rechteckiger Knopf auf einer Linie sieht aus wie ein Fehler im Rahmen; ein Kreis sieht aus wie ein Griff. */ .leiste__falten { position: absolute; /* MITTIG AUF DER GANZEN HOEHE. Oben klebte er an der Kopfzeile und sah aus wie deren Bedienelement; in der Mitte gehoert er sichtbar zur Kante. */ top: 50%; left: 280px; z-index: 40; display: inline-flex; align-items: center; justify-content: center; /* EINE AUSBUCHTUNG AUS DER LEISTE, KEINE SCHEIBE AUF DER LINIE (Vorgabe Murat, 08.09.2026, mit Zeichnung: „böyle çıkıntı yapcaksın … ortada olmucak"). ERSTER VERSUCH WAR MITTIG AUF DER KANTE - halb im Gruenen, halb im Hellen. Das sah aus wie ein Knopf, den jemand dort abgelegt hat. Eine AUSBUCHTUNG gehoert sichtbar zu der Flaeche, aus der sie herauswaechst: Sie sitzt AN der Kante und ragt nach rechts, rund nur auf der Aussenseite, und sie traegt die Farbe der Leiste. Damit ist ohne ein Wort klar, was sie bewegt. `left: 280px` ohne `translateX` - die linke Kante liegt genau auf der Spaltengrenze, alles Weitere waechst nach rechts. */ width: .95rem; height: 3.2rem; padding: 0; border: 0; border-radius: 0 var(--ecke-rund) var(--ecke-rund) 0; background: var(--leiste); box-shadow: var(--schatten-kante); font: inherit; color: var(--leiste-aktiv); cursor: pointer; transition: width .12s ease, height .12s ease; } .leiste__falten .sym { width: .8rem; height: .8rem; } /* Beim Ueberfahren waechst sie ein Stueck - die Ruecksicht, die eine so schmale Flaeche braucht, damit man sie trifft. */ .leiste__falten:hover { width: 1.15rem; height: 3.8rem; } .leiste__falten:hover { border-color: var(--akzent); background: var(--grund); color: var(--akzent); } .leiste-schmal .leiste__falten { left: 6rem; } /* Kein `translate` mehr auf der X-Achse - nur die Mitte der Hoehe. */ .leiste__falten { transform: translateY(-50%); } /* ZWEI PFEILE IN DER SEITE, EINER SICHTBAR. Der Pfeil zeigt, WOHIN es geht – nach links beim Einklappen, nach rechts beim Ausklappen. Ein einzelner gedrehter Pfeil hätte dasselbe geleistet, aber über eine Drehung, die man beim Lesen des Quelltextes erst nachrechnen muss. */ .leiste__falten-ein, .leiste__falten-aus { display: inline-flex; } .leiste__falten-aus { display: none; } .leiste-schmal .leiste__falten-ein { display: none; } .leiste-schmal .leiste__falten-aus { display: inline-flex; } /* Das Zeichen (f+b) tritt an die Stelle der Wortmarke – siehe die Begründung in huelle.html an der Markenzeile. Der gerundete Rahmen ist nicht Zierde: Die Vorlage bringt ihren cremefarbenen Grund als Bildfläche mit, und ein scharfkantiges helles Rechteck auf dem grünen Grund liest sich wie ein Ladefehler. */ .leiste__zeichen { display: none; } @media (min-width: 901px) { .leiste-schmal .leiste__wortmarke { display: none; } .leiste-schmal .leiste__zeichen { display: block; width: 2.25rem; height: 2.25rem; border-radius: var(--ecke-klein); } /* Die Markenzeile wird eine Spalte: Zeichen oben, Griff darunter. Nebeneinander blieben für beide je 40 Punkte – der Griff wäre dann kleiner als das, was man mit dem Finger trifft. */ .leiste-schmal .leiste__marke { grid-template-columns: 1fr; justify-items: center; gap: var(--a2); padding: var(--a2) 0 var(--a3); } .leiste-schmal .leiste__markenverweis { grid-column: 1; justify-self: center; } /* 96 Punkte statt 280. Der Wert steht neben dem der breiten Leiste (§1) – wer den einen ändert, sieht den anderen. */ .leiste-schmal .app { grid-template-columns: 6rem 1fr; } .leiste-schmal .leiste { padding-left: var(--a1); padding-right: var(--a1); gap: var(--a3); /* Ein Rollbalken der üblichen Breite frässe hier ein Sechstel der Leiste weg. `thin` ist genau für diesen Fall da. */ scrollbar-width: thin; } /* --- Die Einträge: Symbol gross oben, Wort klein darunter --------------- */ .leiste-schmal .navi a, .leiste-schmal .navi__knopf { position: relative; /* Bezugsrahmen für die Zahl, siehe unten */ flex-direction: column; gap: 2px; padding: var(--a2) 2px; text-align: center; font-size: .62rem; line-height: 1.15; hyphens: auto; overflow-wrap: break-word; } .leiste-schmal .navi .sym { width: 1.55rem; height: 1.55rem; stroke-width: 1.75; /* dünner, weil grösser – sonst wird es klobig */ vertical-align: 0; /* der Versatz aus §2a gilt nur neben Text */ } /* DIE ZAHL WANDERT IN DIE ECKE. `margin-left: auto` schiebt sie in einer Spalte nicht nach rechts, sondern nach OBEN – sie sässe dann über dem Symbol. Als Abzeichen an der oberen rechten Ecke bleibt sie da, wo man eine offene Zahl sucht, und kostet keine Zeile. */ .leiste-schmal .navi .zaehler, .leiste-schmal .navi__zahl { position: absolute; top: 2px; right: 2px; margin-left: 0; min-width: 1.05rem; padding: 0 .2rem; font-size: .6rem; line-height: 1.05rem; } /* Die Bereiche eines geöffneten Projekts (§3) rücken ohne Einzug und ohne Linie: Bei 80 Punkten Textbreite kostet ein Einzug von 1rem jede zweite Zeile einen Umbruch, und die Linie zeigt eine Zugehörigkeit, die durch die Reihenfolge ohnehin klar ist. */ .leiste-schmal .navi__projekt { margin: var(--a1) 0 var(--a2); padding-left: 0; border-left: 0; } .leiste-schmal .navi__projekt a { font-size: .58rem; padding: var(--a1) 2px; } /* --- Was oben und unten steht, bleibt stehen – nur kleiner -------------- */ /* DER VEREINSNAME BLEIBT (Vorgabe Murat, 12.08.2026: er steht auf JEDER Seite). Wer mehrere Träger betreut, verwechselt sie genau in dem Moment, in dem der Name fehlt – daran ändert eine schmale Leiste nichts. Er wird kleiner und bricht um, er verschwindet nicht. */ .leiste-schmal .leiste__orga { padding: 0 2px var(--a1); font-size: .62rem; line-height: 1.2; } /* Dasselbe für die eigene Stellung: Für den Betreiber ist das Schild der EINGANG in den Betriebsbereich (huelle.html) – ausblenden hiesse hier, einen Weg zu schliessen. */ .leiste-schmal .leiste__stellung { margin: 0 0 var(--a3); padding: 2px var(--a1); font-size: .58rem; line-height: 1.2; } .leiste-schmal .leiste__trenner { margin: var(--a2) var(--a1); } /* Das Profil wird ein Stapel: Bild, darunter der Ausgang. Nebeneinander bliebe für den Namen ohnehin kein Platz, und ein zweispaltiges Raster mit einer leeren Spalte schöbe das Bild aus der Mitte. */ /* DER AUSGANG STEHT NEBEN DEM BILD UND NICHT DARUNTER (Vorgabe Murat, 08.09.2026: „o kişinin profili … çıkış ikonunu sağına"). Untereinander kostete das zwei Zeilen für zwei Zeichen und schob den Fuss nach oben. Nebeneinander passen sie: 2,25 rem Bild plus ein verkleinerter Knopf bleiben unter den 6 rem der schmalen Leiste. */ .leiste-schmal .leiste__profil { grid-template-columns: auto auto; justify-content: center; justify-items: center; gap: var(--a1); padding: var(--a2) 0; } .leiste-schmal .leiste__abmelden { width: 1.9rem; height: 1.9rem; } .leiste-schmal .leiste__profilverweis { grid-template-columns: auto; justify-items: center; } /* Name und E-Mail sind das Einzige, was hier wirklich weggeht. Sie stehen vollständig im persönlichen Konto, das hinter genau diesem Bild liegt – und das Bild selbst beantwortet die Frage „bin ich das noch?" auch ohne sie. */ .leiste-schmal .leiste__person { display: none; } /* DIE VERSIONSNUMMER GEHT IN DER SCHMALEN LEISTE WEG (Vorgabe Murat, 08.09.2026: „daralınca soldaki menü versiyonu gösterme"). WARUM SIE VORHER BLIEB, und warum das jetzt trotzdem richtig ist: Sie ist der Deploy-Beweis (§3) – steht nach einem Deploy die alte Nummer da, ist es ein Cache- und kein Codeproblem. Diese Zusage bleibt unangetastet: Die schmale Leiste ist eine ANSICHTSEINSTELLUNG, die jeder mit einem Klick zurücknimmt, und die Nummer steht ausserdem unter `/gesund`. Wer sie sucht, findet sie in einer Sekunde. `display: none` UND NICHT `visibility: hidden`: Der erste Versuch war das Zweite, mit der Begründung, die Zeile solle ihren Platz behalten, damit nichts springt. Der Platz war der Fehler – er stand als leere Zeile unter dem Profil, und zusammen mit dem Aussenabstand der Leiste ergab das den Streifen, den Murat eine Handbreit nannte. Es springt auch nichts: Beim Falten wird die ganze Leiste neu gesetzt. DER WÄCHTER AUS test_anmeldung.py BLEIBT HEIL. Er sucht die Zeichenfolge im QUELLTEXT, nicht im Bild – sie steht unverändert da. */ .leiste-schmal .leiste__version { display: none; } } /* ===== §4 KOPFZEILE DES ARBEITSBEREICHS ================================= Titel links, EINE Hauptaktion rechts. Mehr als eine Hauptaktion heißt, dass die Seite nicht weiß, wofür sie da ist. */ .kopfzeile { /* Bezugsrahmen fuer die BREITEN Menueblaetter (§14). Sie haengen nicht an ihrem Knopf, sondern an der Kopfzeile - ein 1000px breites Blatt, das rechtsbuendig an einem Knopf in der Mitte klebt, ragt links aus dem Arbeitsbereich heraus und wird abgeschnitten. GEMESSEN am 13.08.2026: genau das ist passiert, die Spalte "Stelle" lag ausserhalb des Bildes. */ position: relative; display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; padding: var(--a5) var(--a6); border-bottom: 1px solid var(--linie); background: var(--grund); } /* DER TITEL NIMMT SEINE BREITE UND NICHT DEN GANZEN PLATZ (08.09.2026). BEFUND MURAT: „mein projektgebiet en sola taşınsın." Er stand auf den Förderungen in der Mitte der Kopfzeile – obwohl links nichts war. Ursache war `flex: 1 1 auto` hier: Der Titelkasten wuchs auf allen freien Platz, auch wenn er nur eine für das Vorleseprogramm sichtbare Überschrift trug, und schob die Ansicht vor sich her. NACH RECHTS GESCHOBEN WIRD WEITERHIN, aber von der Stelle aus, die es angeht: `.kopfzeile__aktionen` hat `margin-left: auto`. Damit steht links, WAS man sieht, und rechts, was man daran ändert – dieselbe Regel wie vorher, nur ohne den leeren Kasten dazwischen. */ .kopfzeile__titel { flex: 0 1 auto; min-width: 0; } /* ===== DIE REITERZEILE (09.09.2026) ====================================== Vorgabe Murat: „browseri biraz daha genişletince başlığın yanına kaydı o menüler." DAS REITERBAND DER FÖRDERAKTE STAND IM TITELBLOCK und sprang ab etwa 1400 Punkten neben den Aktennamen; darunter blieb ein leeres weisses Band mit einer einsamen Lupe. Jetzt hat es eine eigene Zeile, IMMER – der Titel nimmt darüber die volle Breite, damit nichts mehr neben ihn passt. `:has()` UND NICHT EINE KLASSE AN DER SEITE: Die Regel gilt genau dann, wenn es wirklich Reiter gibt. Eine Klasse müsste jede Seite selbst setzen, und die erste, die es vergisst, bekommt still das alte Verhalten zurück. `:empty` trifft hier zu, weil die Hülle den Block ohne ein einziges Leerzeichen ausgibt. */ /* `flex: 1 1 0` UND NICHT `1 1 auto`: Mit `auto` ist die Grundbreite der Zeile der Inhalt – Reiter plus Nebenwege, hier 828 Punkte. Danebengelegt passte die Lupe nicht mehr in dieselbe Zeile und rutschte auf eine eigene, dritte (gemessen am 09.09.2026 bei 1100 Punkten). Mit Grundbreite 0 wird zuerst die Lupe untergebracht, und die Reiterzeile bekommt, was übrig bleibt. */ .kopfzeile__reiter { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; } .kopfzeile__reiter:empty { display: none; } /* DAS BAND NIMMT SEINE BREITE UND NICHT DIE GANZE ZEILE. `.reiter--kopf` bringt `flex: 1 1 100%` mit (§13) – dort steht es allein in einer Zeile und soll sie füllen. HIER stehen die Nebenwege und die Lupe daneben, und ein Band mit Basis 100 % drängt beide vor sich her: gemessen am 09.09.2026 bei 1100 Punkten – die Reiter brachen auf zwei Zeilen um und die Lupe rutschte auf eine dritte, obwohl die Zeile halb leer war. */ .kopfzeile__reiter .reiter--kopf { flex: 0 1 auto; } /* DIE REITER DER AKTE SIND EINE SPUR KLEINER ALS DIE DER VERWALTUNG. Dort steht das Band allein in seiner Zeile; hier teilt es sie mit den Nebenwegen und der Lupe. Bei `--s-text` fehlten zehn Punkte, und die Nebenwege brachen um (gemessen bei 1100 Punkten) – dieselbe Auskunft, eine Zeile mehr. DREI KLASSEN IM WÄHLER, weil `.reiter--kopf .reiter__eintrag` (§13) genau so schwer wiegt wie zwei – und weiter unten in dieser Datei steht. Das ist in dieser Datei die dritte Stelle, an der die Reihenfolge entscheidet; deshalb steht es hier und nicht in einem `!important`. */ .kopfzeile__reiter .reiter--kopf .reiter__eintrag { font-size: var(--s-hinweis); } .kopfzeile:has(.kopfzeile__reiter:not(:empty)) .kopfzeile__titel { flex: 1 1 100%; } /* EIN LEERER KASTEN IST NICHT NICHTS: Zwischen Flex-Kindern steht ein Zwischenraum, auch wenn eines davon nichts enthält. `.kopfzeile__ansicht` und `.kopfzeile__aktionen` gibt es auf JEDER Seite – auf den meisten leer, und dort kosteten sie zusammen zwei Zwischenräume. */ .kopfzeile__ansicht:empty, .kopfzeile__aktionen:empty { display: none; } /* DIE WERKZEUGE GANZ RECHTS (C08). Sie gehören keiner einzelnen Seite, sondern gelten überall: die Suche in den eigenen Unterlagen und der Hinweis auf Mitteilungen. Deshalb stehen sie HINTER `.kopfzeile__aktionen` – dessen `margin-left: auto` schiebt beide Gruppen nach rechts, auch wenn die Seite gar keine eigene Aktion hat. KEIN EIGENES `margin-left: auto`: Zwei automatische Ränder in derselben Zeile TEILEN sich den freien Platz, statt ihn einer Seite zu geben – die Werkzeuge stünden dann in der Mitte. */ .kopfzeile__werkzeuge { display: flex; align-items: center; gap: var(--a2); } /* EINE KOPFZEILE OHNE INHALT IST EIN LEERER STREIFEN (08.09.2026). Auf der Übersicht steht der Seitenname schon links in der Leiste, und die einzige Aktion ist als Kachel ins Raster gewandert. Was blieb, war ein weisses Band von 88 Punkten über einem Cockpit, das in einen Blick passen soll. AM TELEFON BLEIBT SIE STEHEN: Dort steckt in ihr der Griff zur Schublade (§12). Die Regel dafür steht im Block für schmale Schirme. */ .kopfzeile--leer { display: none; } /* ===== §4b DIE AUFTRAGSZEILE (C07) ====================================== Was im Hintergrund läuft, steht über der Liste – und die Liste bleibt bedienbar. Das ist der ganze Unterschied zum alten Vorhang, der die Anwendung anhielt, während ein Lauf fremde Behördenserver abfragte. FARBE IST NIE DAS EINZIGE MERKMAL (DESIGN_SYSTEM §3.2): Der Zustand steht als Wort im Satz; der Rand daneben ist die Zugabe, nicht die Auskunft. */ .auftrag { display: flex; align-items: center; gap: var(--a2); margin: 0 0 var(--a4); padding: var(--a3) var(--a4); border-left: 3px solid var(--akzent); border-radius: var(--ecke-klein); background: var(--akzent-hell); font-size: var(--s-hinweis); } .auftrag[data-auftrag-zustand="fertig"] { border-left-color: var(--gut); background: var(--gut-hell); } .auftrag[data-auftrag-zustand="fehler"], .auftrag[data-auftrag-zustand="unbekannt"] { border-left-color: var(--warnung); background: var(--warnung-hell); } .auftrag .knopf--klein { margin-left: auto; } /* ===== §4b2 DIE ZWEITE ZEILE IN EINER TABELLENZELLE (C13) ============== Der Fördergeber unter dem Programmnamen, die offene Regel unter der Einschätzung. Beides gehört zusammen und wird zusammen gelesen – zwei Spalten dafür kosteten die Breite, die dem Namen fehlte. `display: block` IST HIER DER GANZE PUNKT: Als Inline-Element stand der Geber hinter dem Namen in derselben Zeile, und die Zelle las sich als ein einziger langer Name (im Browser gemessen, 08.09.2026). */ .zeile__zusatz { display: block; margin-top: 2px; color: var(--leise); font-size: var(--s-winzig); line-height: 1.3; } /* ===== §4c DIE REGELLISTE EINER EINSCHÄTZUNG (C12) ====================== Jede geprüfte Regel mit ihrem Stand und, wo es sie gibt, ihrer Quelle. Der Stand steht als WORT in der Ampel – Farbe ist nie das einzige Merkmal (DESIGN_SYSTEM §3.2), und „noch zu klären" ist ohnehin keine Farbe, sondern eine Auskunft. */ .regelliste { margin: 0 0 var(--a4); } .regelliste dt { margin-top: var(--a3); } .regelliste dd { margin: var(--a1) 0 0; color: var(--leise); font-size: var(--s-hinweis); } .regelliste dd small { display: block; margin-top: var(--a1); } /* DAS KOPFSTÜCK EINER FÖRDERAKTE (Vorgabe Murat, 21.08.2026): Name und Reiterband in der Kopfzeile. Es heisst `.foerderkopf__name` und nicht `.aktenkopf`: Den gibt es schon – als Kopf der KUNDENakte im Betriebsbereich (v0.55.0, weiter unten in dieser Datei). DEN UMSCHLIESSENDEN `.foerderkopf` GIBT ES SEIT v1.29.0 NICHT MEHR. Er war die Flex-Zeile, in der Name und Reiterband nebeneinander lagen, „solange die Breite reicht" – und genau das war der Fehler: Ab etwa 1400 Punkten sprang das Band neben den Namen und liess darunter ein leeres Band stehen. Die Reiter haben jetzt ihre eigene Zeile in der Kopfzeile (`.kopfzeile__reiter`, §4), unabhängig von der Fensterbreite. DER NAME IST EIN GRIFF, KEINE ÜBERSCHRIFT (Vorgabe Murat, 21.08.2026: „başlığa tıklayınca başlık değişsin, Idee'ye tıklayınca onu da değiştirebileyim"). WARUM DAS MEHR IST ALS BEQUEMLICHKEIT: Titel und Stand waren nur über den Umweg Überblick → Förderakte → Formular → Speichern erreichbar – vier Schritte für zwei Wörter, und der Stand ist die Angabe, die sich am HÄUFIGSTEN ändert (Idee → in Vorbereitung → eingereicht → …). Was man am häufigsten ändert, gehört dorthin, wo es steht. ES SIND ECHTE