/* ===================================================================== SightCity Reservierungssystem – Redesign von admin.css Für: Günter Hanke · Von: Tarek / Dagmar · Juli 2026 Dieses Stylesheet stylt Günters BESTEHENDES HTML um (semantische Elemente: fieldset/legend/label/input/select/textarea, seine Reiter-Struktur .tabs/[role=tab]/[role=tabpanel], progress usw.). -> Ein Datei-Tausch (css/admin.css) verändert das ganze System. Keine HTML-Änderungen nötig. Schrift: Atkinson Hyperlegible (selbst gehostet, DSGVO). ===================================================================== */ @font-face { font-family:"Atkinson Hyperlegible"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/atkinson-hyperlegible-regular.woff2") format("woff2"); } @font-face { font-family:"Atkinson Hyperlegible"; font-weight:700; font-style:normal; font-display:swap; src:url("fonts/atkinson-hyperlegible-bold.woff2") format("woff2"); } @font-face { font-family:"Atkinson Hyperlegible"; font-weight:400; font-style:italic; font-display:swap; src:url("fonts/atkinson-hyperlegible-italic.woff2") format("woff2"); } :root{ --sc-primary:#eb1b1f; --sc-secondary:#922821; --sc-tertiary:#fbe74e; --sc-accent:#ea5b0c; /* ⚠⚠ SightCity-Rot ALS FLÄCHE UNTER WEISSER SCHRIFT (Dagmar, 24.08.2026). Gemessen: Weiß auf #eb1b1f ergibt 4,46:1 — WCAG 2.1 AA verlangt bei 16-px-Text 4,5:1. Das betraf JEDEN primären Knopf im Portal, nicht nur einen; aufgefallen ist es beim Bau des Knopfes „Neue Nachricht schreiben". #dd1a1e ergibt 4,94:1 und hat damit Reserve für Rundungen und Kantenglättung. ⚠ DIE MARKENFARBE SELBST BLEIBT UNANGETASTET. --sc-primary gilt weiter für Text, Rahmen, Links und Marker; nur FLÄCHEN mit weißer Schrift nehmen diesen Ton. Dagmars Entscheidung: „Ein minimal dunkleres Rot nur für Knopfflächen — die Marke bleibt im Übrigen unangetastet." ⚠ Wer eine neue Fläche in Rot anlegt, nimmt --sc-primary-flaeche. Steht dort wieder --sc-primary, ist der Kontrast still wieder unter AA. */ --sc-primary-flaeche:#dd1a1e; --sc-bg:#f9f7ff; --sc-surface:#fff; --sc-base:#e9e6ed; --sc-fg:#0e1111; --sc-muted:#575756; --sc-info:#005a8c; /* ⚠ --sc-success WAR #1f8e30 und erreichte damit nur 4,23:1 auf Weiß — unter den 4,5:1, die WCAG 2.1 AA für normalen Text verlangt. Gemessen mit lokal-test/pruef-statusfarben.php, gemeldet seit dem 25.08.2026, von Dagmar am 26.08.2026 zur Änderung freigegeben. #1b7f2b ergibt 5,10:1 und ist nur eine Spur dunkler — der Farbcharakter bleibt erhalten. ⚠ WARUM DAS ABDUNKELN IN BEIDE RICHTUNGEN HILFT: Das Token ist an manchen Stellen TEXTFARBE auf hellem Grund (.dash-kachel__status--ok, .useradmin-status--ok, .deadlines-status--offen …) und an anderen FLÄCHE mit weißer Schrift darauf (.sc-tabstatus--done, progress). Beide Verhältnisse sind dieselbe Rechnung, nur seitenverkehrt — ein dunklerer Ton verbessert deshalb beide zugleich. Ein HELLERER hätte das eine verbessert und das andere verschlechtert. */ --sc-success:#1b7f2b; /* ⚠ --sc-live ist ein ABGEDUNKELTER --sc-accent (#ea5b0c) und kein neuer Markenton. Grund: --sc-accent ergibt auf weißem Grund nur 3,50:1 und fällt damit unter AA, sobald er Text einfärbt statt einer Fläche. #b34700 ergibt 5,50:1. Gebraucht wird er für "läuft gerade" in der Vortragsübersicht -- der einzige Zustand, der Aufmerksamkeit will, ohne Alarm zu sein. */ --sc-live:#b34700; --sc-border:rgba(14,17,17,.14); --sc-border-strong:rgba(14,17,17,.28); --sc-radius:10px; --sc-pill:25px; /* ---- Zwei Spuren, wie auf sightcity.net (Dagmar 05.08.2026) ------------- Dagmar: "Ist es moeglich die Gesamtbreite des Reservierungssystems auch auf 1640px umzustellen?" -- moeglich ja, aber nicht fuer ALLES. --sc-spur-inhalt fuer Text und Formulare. Bleibt bei 1024 px. Eine Textzeile ueber 1640 px ist fuer sehbehinderte Leserinnen und Leser kaum noch zu verfolgen: Beim Zeilenwechsel verliert man die Zeile (WCAG 1.4.8). Genau das ist bei SightCity die Kernzielgruppe, und 1024 px ist Dagmars eigene Vorgabe fuer das Redesign. --sc-spur-breit fuer Kopf und Fusszeile, also fuer Leisten, in denen nebeneinander gearbeitet wird. Damit steht die Navigation bei breiten Fenstern neben dem Logo -- so wie auf sightcity.net. Die Website macht es genauso (Content 1300, Wide 1640). Wer die Gesamtbreite doch umstellen will, aendert HIER eine Zahl. */ /* ⚠ 1024 -> 1280 am 05.08.2026 (Dagmar). Die Navigationsleiste steht seither neben dem Logo, damit hat der Inhalt Platz. 1280 statt 1640: Eine Textzeile ueber rund 80 Zeichen verliert man beim Zeilenwechsel -- das trifft sehbehinderte Leser zuerst (WCAG 1.4.8). Einzelne Textbloecke sind zusaetzlich auf 65ch begrenzt, das bleibt. */ --sc-spur-inhalt:1280px; --sc-spur-breit:1640px; /* ---- Die kleinste erlaubte Schrift (Dagmar 05.08.2026) ----------------- „Ich glaube, mit fast jeder Überarbeitung wird die Schrift kleiner.“ Nachgemessen: Die Grundschrift war unveraendert 16 px, aber 38 Elemente lagen darunter -- bis hinunter zu 12,5 px, und darunter ausgerechnet die STATUS-Zeichen der Checkliste und die Statuszeile der Kacheln. Bei einer Messe fuer blinde und sehbehinderte Menschen ist 12,5 px keine Feinheit, sondern ein Fehler. 0.875rem = 14 px ist ab jetzt die Untergrenze. Wer kleiner will, braucht einen Grund, der hier danebensteht. Und IMMER rem, nie em: em rechnet vom Elternelement und schrumpft in Verschachtelungen weiter. */ --sc-klein:0.875rem; --sc-font:"Atkinson Hyperlegible","DM Sans",Inter,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } *,*::before,*::after{ box-sizing:border-box; } body{ margin:0; background:var(--sc-bg); color:var(--sc-fg); font-family:var(--sc-font); font-size:16px; line-height:1.6; } /* zentrierter Inhaltsbereich – seine Struktur:
*/ main#inhalt, main{ display:block; max-width:var(--sc-spur-inhalt); margin-inline:auto; padding:1.5rem 1rem 3rem; } /* ---- Typografie ---- */ h1{ font-size:clamp(1.9rem,1.5rem + 1.8vw,2.6rem); line-height:1.25; margin:.2em 0 .6em; } h2{ font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem); line-height:1.3; margin:.4em 0 .4em; } h3{ font-size:1.2rem; margin:.4em 0 .3em; } a{ color:var(--sc-secondary); text-underline-offset:.15em; } a:hover{ color:var(--sc-primary); } /* ---- sichtbarer Fokus (WCAG) ---- */ :where(a,button,input,select,textarea,[tabindex],[role="tab"]):focus-visible{ outline:3px solid var(--sc-info); outline-offset:2px; border-radius:3px; } /* ---- Kopf-Navigation – seine Struktur: