/* Auftragsliste und Tablet. Heller Modus, Bueroschirm und Baustelle. Ergaenzt aphiro-basis.css, ersetzt es nie. Ausschliesslich semantische Tokens — Rohfarben brechen den dunklen Modus. */ body { margin: 0; background: var(--ap-bg); color: var(--ap-text); } /* `hidden` muss auch dann wirken, wenn eine Klasse `display` setzt. Die Vorgabe des Browsers (`[hidden] { display: none }`) hat die niedrigste Spezifitaet und verliert gegen jede eigene Regel. Beim Ansehen gefunden: Der Aufnahmeknopf trug `hidden`, war aber sichtbar, weil `.ap-button` auf `inline-flex` steht — in einem Browser ohne Mikrofon stand damit ein Knopf da, der nichts tut. Das `!important` ist hier die richtige Wahl und keine Faulheit: Es gibt keinen Fall, in dem `hidden` NICHT verbergen soll. */ [hidden] { display: none !important; } .an-seite { max-width: 1400px; margin: 0 auto; padding: var(--ap-space-6) var(--ap-gutter); } .an-kopf { display: flex; align-items: flex-end; gap: var(--ap-space-4); flex-wrap: wrap; margin-bottom: var(--ap-space-5); } .an-kopf .an-titel { flex: 1; } /* Reiter: Rechtecke mit Unterstrich, kein Pillen-Look (Radius 0). */ .an-reiter { display: flex; gap: var(--ap-space-1); flex-wrap: wrap; border-bottom: 1px solid var(--ap-border); margin-bottom: var(--ap-space-4); } .an-reiter a { min-height: 44px; display: inline-flex; align-items: center; gap: var(--ap-space-2); padding: 0 var(--ap-space-4); text-decoration: none; color: var(--ap-text-muted); font-size: var(--ap-size-ui); font-weight: var(--ap-weight-ui); border-bottom: 2px solid transparent; } .an-reiter a:hover { color: var(--ap-text); } .an-reiter a[aria-current="page"] { color: var(--ap-text); border-bottom-color: var(--ap-accent); } .an-reiter em { font-family: var(--ap-font-mono); font-style: normal; font-size: var(--ap-size-small); font-variant-numeric: tabular-nums; color: var(--ap-text-subtle); } .an-reiter a:focus-visible { outline: 2px solid var(--ap-focus); outline-offset: -2px; } .an-suche { display: flex; gap: var(--ap-space-2); align-items: flex-end; } .an-suche .ap-input { min-width: 260px; } /* Die Groesse muss dastehen: Der Browser rechnet `` mit 0.8em, das sind hier 12,5 px — unter der Grenze aus DESIGN.md (Typo-Regel 4). Vom Massband gefunden, nicht von einem Test. */ .an-liste td small { display: block; color: var(--ap-text-muted); font-size: var(--ap-size-small); } /* `.ap-table` bringt `tabular-nums` schon mit; was hier fehlt, ist der rechte Rand und der Umbruchschutz. Nachgemessen: eine eigene Zahlenklasse gibt es in den Tokens nicht. */ .an-zahl { text-align: right; font-family: var(--ap-font-mono); white-space: nowrap; } /* Die Ueberschrift muss ueber ihrer Zahl stehen. `.ap-table th` setzt linksbuendig und schlaegt `.an-zahl` in der Spezifitaet — nachgemessen stand „Summe" links und die Zahl rechts. */ .an-liste th.an-zahl { text-align: right; } /* Die Projektnummer fuehrt zum Baustellencontrolling (Paket J, Aufgabe 7). Unterstrichen und nicht eingefaerbt: Farbe nie allein als Bedeutungstraeger, und der eine Akzent dieser Ansicht liegt schon auf dem Reiter-Unterstrich und dem Soll-Ist-Balken. Der Akzent kommt erst beim Zeigen dazu — dann ist er Rueckmeldung, nicht Flaeche. */ .an-liste td a { color: var(--ap-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .an-liste td a:hover { color: var(--ap-accent); } .an-liste td a:focus-visible { outline: 2px solid var(--ap-focus); outline-offset: 2px; } /* Alle Statusmarken tragen dieselbe Form, nur die Farbe unterscheidet. `.ap-badge` bringt keinen Rahmen mit, sondern nur einen Flaechenton — ohne ihn ist die neutrale Marke reiner Text, und die Spalte liest sich, als waere allein „In Arbeit" ein Status. `currentColor` bei der Zustandsvariante, damit ihr Rahmen ihren eigenen Ton traegt und nicht den neutralen. */ .an-liste .ap-badge { border: 1px solid var(--ap-border); } .an-liste .ap-badge--success { border-color: currentColor; } /* Soll-Ist: ein Balken, der nur zeigt, wie weit es ist. Kein Ampelsystem — ein Akzent pro Ansicht. */ .an-sollist { display: grid; gap: 2px; min-width: 130px; } .an-sollist span { font-family: var(--ap-font-mono); font-size: var(--ap-size-small); font-variant-numeric: tabular-nums; } .an-sollist small { color: var(--ap-text-muted); font-size: var(--ap-size-small); } .an-balken { height: 4px; background: var(--ap-surface-inset); } .an-balken i { display: block; height: 4px; background: var(--ap-accent); } .an-leer { color: var(--ap-text-muted); padding: var(--ap-space-6) 0; } /* Tablet: Finger, Handschuhe, Sonne. Jedes antippbare Element mindestens 44 px hoch — das ist die Regel, an der diese Ansicht gemessen wird. */ .ba-seite { max-width: 780px; margin: 0 auto; padding: var(--ap-space-5) var(--ap-space-4); } .ba-kopf { margin-bottom: var(--ap-space-5); } /* Die drei Kartenklassen dieser Ansicht (`.ba-auftrag`, `.ba-gewerk`, `.ba-meldung`) trugen bis zum 20.08. `--ap-border-strong` und keinen Radius. Beides ist mit Paket O falsch geworden: `--ap-border-strong` heisst jetzt „Rand der GEWAEHLTEN Karte" (Signalgruen), und Karten sind rund. Auf dem Schnappschuss sah deshalb jede der neun Karten aus, als waere sie ausgewaehlt — und als einzige Flaechen der App hatten sie noch Ecken. Beim Bauen von Aufgabe 2 gefunden, nicht im Plantext genannt. */ .ba-auftrag { border: 1px solid var(--ap-border); border-radius: var(--ap-radius); padding: var(--ap-space-4); margin-bottom: var(--ap-space-5); } .ba-auftrag dl { display: grid; grid-template-columns: auto 1fr; gap: var(--ap-space-2) var(--ap-space-4); margin: 0; } .ba-auftrag dt { color: var(--ap-text-muted); font-size: var(--ap-size-small); } .ba-auftrag dd { margin: 0; font-size: var(--ap-size-body); font-weight: 540; } .ba-hinweis { border-left: 2px solid var(--ap-accent); padding: var(--ap-space-3); margin-bottom: var(--ap-space-4); background: var(--ap-surface-2); } /* Je Gewerk eine Karte. `
`, damit ein erledigtes Gewerk ohne eine Zeile JavaScript zugeklappt startet — auf der Baustelle ist die Seite lang, und was fertig ist, muss nicht mehr gelesen werden. */ .ba-gewerk { border: 1px solid var(--ap-border); border-radius: var(--ap-radius); margin-bottom: var(--ap-space-5); padding: var(--ap-space-4); } .ba-gewerk summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-3); min-height: 44px; cursor: pointer; } /* Das Standard-Dreieck des Browsers ist rund und winzig — es passt weder zur Formsprache noch zum Finger. Die Karte selbst ist die Schaltflaeche. */ .ba-gewerk summary::-webkit-details-marker { display: none; } .ba-gewerk summary { list-style: none; } .ba-gewerk h2 { font-size: var(--ap-size-section); margin: 0; } .ba-raum { margin-top: var(--ap-space-4); } .ba-raum h3 { font-size: var(--ap-size-small); color: var(--ap-text-muted); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; margin-bottom: var(--ap-space-2); } /* Die ganze Zeile ist die Schaltflaeche: Mit Handschuhen trifft niemand ein Kaestchen von 20 px. 48 px statt der geforderten 44 — die Zeilen stehen dicht untereinander, und ein Fehlgriff hakt die falsche Taetigkeit ab. */ .ba-schritt { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-3); margin: 0 0 var(--ap-space-2); } /* Ueber die ganze Kartenbreite und trotzdem vollrund — das war eine 746 px lange Pille. Im Portal ist die Pille die kleine Aktion; breite Flaechen sind KARTEN, mit 10 px Radius und eigener Flaeche. Genau so hier: Die Taetigkeit ist eine antippbare Karte, nicht ein ueberdehnter Knopf. Gemessen an `planung.aphiro.de` (Bildschirmfoto „Wie moechten Sie … beginnen?", drei Karten nebeneinander). */ .ba-schritt .ap-button { display: block; width: 100%; min-height: 48px; text-align: left; font-size: var(--ap-size-body); border-radius: var(--ap-radius); background: var(--ap-surface); padding: var(--ap-space-3) var(--ap-space-4); } .ba-schritt--erledigt { min-height: 48px; padding: var(--ap-space-2) var(--ap-space-3); border-bottom: 1px solid var(--ap-border); } /* Durchgestrichen statt ausgeblendet: Was verschwindet, wirkt wie ein Fehler. Der Text traegt die Bedeutung, nicht die Farbe — die blasst nur ab. */ .ba-schritt--erledigt span { text-decoration: line-through; color: var(--ap-text-muted); } .ba-schritt--erledigt small { color: var(--ap-text-muted); font-family: var(--ap-font-mono); font-size: var(--ap-size-small); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Behinderung und Kundenwunsch. Zwei Formulare unter den Gewerken, nicht dazwischen: Der Tagesauftrag ist die Hauptsache, das Melden die Ausnahme. */ .ba-meldung { border: 1px solid var(--ap-border); border-radius: var(--ap-radius); padding: var(--ap-space-4); margin-bottom: var(--ap-space-5); } .ba-meldung h2 { font-size: var(--ap-size-section); margin-bottom: var(--ap-space-4); } .ba-meldung .ap-field { margin-bottom: var(--ap-space-4); } .ba-meldung .ap-input { width: 100%; min-height: 48px; } .ba-meldung .ap-button { min-height: 48px; } /* Der Aufnahmeknopf steht ueber dem Dateifeld und braucht Luft dazwischen: Ohne sie kleben Knopf und Label aneinander, und mit dem Finger trifft man beides gleichzeitig. */ #aufnahme-knopf { margin-bottom: var(--ap-space-4); } /* Der Hinweis ueber dem Feld ist Kundentext, kein Kleingedrucktes: 13 px ist die Untergrenze der Skala, nicht die Vorgabe des Browsers fuer ``. */ .ba-fussnote { color: var(--ap-text-muted); font-size: var(--ap-size-small); max-width: 62ch; margin: 0 0 var(--ap-space-4); } /* --- Startseite ------------------------------------------------------------ Keine dritte eigene CSS-Datei: `leitstand.css` und `ansichten.css` sind die einzigen (Festlegung aus Paket E, mechanisch geprueft). Die Startseite ist eine Bueroansicht im hellen Modus und gehoert damit hierher. */ /* **Die einzige Stelle im ganzen System, an der die Marketing-Skala erlaubt ist.** Freigegeben von Alexander am 20.08.2026, nachdem die App neben dem Planungsportal stand: Dessen Einstiegsseite traegt „Ihr Projekt. / Klar geplant." in rund 94 px, und die Startseite hat dieselbe Rolle — sie ist ein Eingang, kein Arbeitsschirm. Fuer Leitstand, Auftragsliste, Tablet und Projektseite bleibt die Marketing-Skala verboten; ein Test haelt fest, dass die Ausnahme nicht weiterwandert. Der zweite Halbsatz steht im Akzent, nicht im Verlauf. `DESIGN.md` kennt das Marken-Muster „zweiter Halbsatz im Verlauf" (`h1 strong`), das Portal setzt aber ein flaches Mint — nachgemessen #78E598 im Bildschirmfoto gegen `--ap-accent` #75E297. Der Verlauf braechte Cyan als zweites Signal dazu. */ .st-titel { font-family: var(--ap-font-display); font-size: var(--ap-size-h1); line-height: var(--ap-lh-display); letter-spacing: var(--ap-ls-display); font-weight: var(--ap-weight-display); margin: 0; } .st-titel b { display: block; color: var(--ap-accent); font-weight: inherit; } .st-vorspann { color: var(--ap-text-muted); max-width: 62ch; margin: var(--ap-space-3) 0 0; } /* auto-fit statt fester Spalten: vier Karten auf dem Bueroschirm, zwei auf dem Tablet, eine auf dem Telefon — ohne eine einzige Abfrage der Fensterbreite. */ .st-karten { display: grid; gap: var(--ap-space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--ap-space-6); } /* Spalte statt Raster, damit die Adresse unten steht: Die vier Saetze sind verschieden lang, und mit `align-content: start` sass jede Adresse auf einer anderen Hoehe — vier Kennungen, die auf keiner Linie liegen. */ .st-karte { display: flex; flex-direction: column; gap: var(--ap-space-3); text-decoration: none; color: inherit; min-height: 44px; } .st-karte h2 { font-size: var(--ap-size-card); line-height: 1.3; letter-spacing: var(--ap-ls-card); font-weight: var(--ap-weight-card); margin: 0; } .st-karte p { margin: 0; } /* Die Nummer der Karte, wie im Portal: **eine blosse Ziffer, kein Kreis.** Der Plantext sagt „Nummernkreise"; das Bildschirmfoto `Materialien/Screenshot 2026-08-20 000514.png` zeigt `01` als gesperrte Mono-Ziffer in Mint, ohne Kreis, ohne Flaeche. Gebaut ist das Foto, nicht der Plantext — und die Farbe ist nachgemessen (#74E798 gegen den Token #75E297), nicht geschaetzt. */ .st-nummer { font-family: var(--ap-font-mono); font-size: var(--ap-size-small); font-weight: 600; letter-spacing: 0.12em; color: var(--ap-accent); } /* Adresse und Handlung stehen auf einer Zeile am Fuss der Karte. Zwei Zeilen waeren zwei Schluesse; das Portal hat dort genau eine. */ .st-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ap-space-3); margin-top: auto; } .st-start { color: var(--ap-accent); font-size: var(--ap-size-ui); font-weight: var(--ap-weight-ui); white-space: nowrap; } /* Die Adresse in der Mono-Schrift: Sie ist eine Kennung, kein Fliesstext, und der Besucher soll sie abtippen koennen. */ .st-adresse { font-family: var(--ap-font-mono); font-size: var(--ap-size-small); color: var(--ap-text-muted); } .st-karte:focus-visible { outline: 2px solid var(--ap-focus); outline-offset: 3px; } /* --- Navigationsleiste ----------------------------------------------------- Auf jeder Innenansicht dieselbe. Ausschliesslich semantische Tokens: Der Leitstand steht auf `data-theme="dark"`, und die Leiste muss dort ohne eine zweite Regel bestehen. Deshalb bindet leitstand.html seit dem 17.08. auch diese Datei ein — eine dritte eigene CSS-Datei ist nicht erlaubt. */ .nv-leiste { display: flex; align-items: center; gap: var(--ap-space-1); flex-wrap: wrap; background: var(--ap-surface); border-bottom: 1px solid var(--ap-border); padding: 0 var(--ap-gutter); } .nv-marke { font-weight: 580; letter-spacing: -0.02em; color: var(--ap-text); margin-right: var(--ap-space-4); } /* 44 px, obwohl die Leiste auch auf Bueroschirmen steht: Sie steht eben auch auf dem Tablet, und zwei Hoehen fuer dieselbe Leiste waeren zwei Leisten. */ .nv-leiste a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ap-space-3); text-decoration: none; color: var(--ap-text-muted); font-size: var(--ap-size-ui); font-weight: 540; border-bottom: 2px solid transparent; } .nv-leiste a:hover { color: var(--ap-text); } .nv-leiste a[aria-current="page"] { color: var(--ap-text); border-bottom-color: var(--ap-accent); } .nv-leiste a:focus-visible { outline: 2px solid var(--ap-focus); outline-offset: -2px; }