/* PKVbuddy App Layout Styles Verwendet Cappuccino Design System (cappuccino.css) als Basis */ /* Audit B4/UX4-14: --content-bg lebt in tokens.css (einzige Token-Quelle, frontend-design.md §8) — app.css definiert kein :root mehr. */ /* Base - App-spezifische Overrides */ /* BUG-0497: keine touch-action-Sperre. Die frühere Regel `pan-x pan-y` auf html/body[data-app] diente allein dazu, Pinch-Zoom hinter dem Login zu unterbinden (Commit 2d6856c02, „Disable pinch-to-zoom"); Doppeltipp-Zoom oder eine Scroll-Geste hingen nicht daran. Sie ist ersatzlos entfallen. */ body { /* Font-family kommt von cappuccino.css (DM Sans) */ background-color: var(--content-bg); } /* Sidebar = Mobile-Menü-Overlay (FEATURE-0053/0124) — Single Source hier. Desktop nutzt die Top-Navbar; alle Overlay-Styles leben im Mobile-Block „FEATURE-0053: Mobile Navigation Redesign" weiter unten. Die Desktop- Sidebar-Ära (Brand, 250px-Panel, Submenu) ist abgebaut (FEATURE-0134 Welle 6, Grep: 0 Konsumenten). */ /* SVG Icons in der Sidebar - einfarbig (kein TwoTone) */ .sidebar .nav-link svg path[fill-opacity] { fill-opacity: 0; /* Entfernt TwoTone-Füllung */ } /* FEATURE-0114: Nav-Badge (Vorbereitung für FEATURE-0116 Badge-Counts) */ /* Markup: 3 direkt im .nav-link */ .nav-link .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3em; font-size: var(--fs-11); font-weight: 600; line-height: 1; background: var(--accent); color: #fff; border-radius: 0.625rem; margin-left: auto; } /* .nav-link.is-empty entfernt (FEATURE-0134 Welle 6, AC-48): FEATURE-0114- Vorbereitung ohne Konsumenten — die FEATURE-0124-Nav rendert bei Count 0 schlicht kein Badge (Grep: 0 Template-Treffer). */ /* FEATURE-0124: Desktop — Sidebar als Mobile-Overlay verstecken. (Kein !important nötig: keine konkurrierende display-Regel, .show togglet nur transform/opacity — FEATURE-0134 Welle 6, AC-49.) */ @media (min-width: 992px) { .sidebar { display: none; } } /* Main Content Area — FEATURE-0124: kein sidebar-margin mehr auf Desktop */ .main-panel { margin-left: 0; min-height: 100vh; } /* ==================== TOP NAVBAR ==================== Chrome aus dashboard-theme.css zurückgezogen (FEATURE-0134 Welle 6, AC-47). Konsument: templates/base.html (Desktop-Header, FEATURE-0124). */ .top-navbar { height: 64px; background: var(--milk-pure); border-bottom: 1px solid var(--stone-200); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--app-gutter); gap: 1rem; } /* Header-Logo */ .top-navbar .navbar-logo { height: 28px; width: auto; flex-shrink: 0; } /* FEATURE-0124: Primäre Horizontal-Navigation im Header — mittig ausgerichtet */ .top-navbar [data-testid="primary-nav"] { display: flex; align-items: center; gap: 0.25rem; margin: 0 auto; } /* Desktop-Nav ist textbasiert — Icons nur im Mobile-Overlay (gleiches Partial) */ .top-navbar [data-testid="primary-nav"] .nav-link svg { display: none; } .top-navbar [data-testid="primary-nav"] .nav-link { color: var(--stone-500); padding: 0.5rem 0.75rem; /* Audit B4C/UX4-08: Werte = gerenderter Ist-Stand. Die früheren 0.5rem/ margin 0 kamen nie an, weil rounded-2/mb-1 im Markup (!important) gewannen — das Stylesheet trägt jetzt genau diese Werte, damit die Utility-Klassen im Markup ersatzlos fallen können (Single Source). */ border-radius: var(--radius-xs); font-size: var(--fs-14); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 0.375rem; margin-bottom: 4px; transition: background 0.15s ease, color 0.15s ease; } /* Icons erben die Linkfarbe (Design: Icon = Text) */ .top-navbar [data-testid="primary-nav"] .nav-link svg, .top-navbar [data-testid="primary-nav"] .nav-link i { flex-shrink: 0; color: currentColor; transition: color 0.15s ease; } .top-navbar [data-testid="primary-nav"] .nav-link:hover { background: var(--stone-100); color: var(--espresso); } /* Aktiver Nav-Link: türkise Active-Pill (Design .tnav-link.is-active) */ .top-navbar [data-testid="primary-nav"] .nav-link.active { background: var(--accent-muted); color: var(--accent-dark); font-weight: 700; } /* Kein linker Balken-Indikator in der horizontalen Header-Nav */ .top-navbar [data-testid="primary-nav"] .nav-link.active::before { display: none; } /* User-Pill + Avatar (Design .tnav-user / .tnav-avatar) */ .top-navbar .navbar-user { background: var(--stone-100); border-radius: var(--radius-full); padding: 4px 12px 4px 4px; border: none; } .top-navbar .navbar-user:hover { background: var(--stone-200); } /* Audit B2/UX6-04: Lange Namen (z. B. E-Mail als Username-Fallback) kürzen mit Ellipsis, statt die Navbar zwischen 992 und ~1090px über den Viewport zu schieben — das war der einzige echte horizontale Überlauf im Header. */ .top-navbar .navbar-user .navbar-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--crema) 0%, var(--tasse) 100%); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Badge in Header-Nav: kompakter */ .top-navbar [data-testid="primary-nav"] .nav-badge { margin-left: 0.25rem; } /* FEATURE-0119-Navbar-Suche entfernt (FEATURE-0134 Welle 6, AC-48): Das Such-Input samt Dropdown fiel mit der FEATURE-0124-Top-Nav aus base.html — Grep: 0 navbar-search-Konsumenten. Die globale Suche lebt auf /search/ (core/global_search.html). */ /* App-Content-Fläche — warmer Desktop-Hintergrund (aus dashboard-theme.css hierher konsolidiert, FEATURE-0134 Welle 6). */ .content-wrapper { padding: var(--app-gutter); background: var(--milk-warm); min-height: 100vh; } /* Mobile: hellerer App-Hintergrund (statt warmem Dashboard-Ton) */ @media (max-width: 991.98px) { .content-wrapper { background: var(--milk); } } /* Star-Admin-Altblöcke entfernt (FEATURE-0134 Welle 6, AC-48, Grep je 0 Konsumenten): .card/.card-header-Grundregel (die App-Fläche nutzt detail-card aus app-components.css), .summary-card, .priority-1/2/3, .activity-item (Dashboard-Feed nutzt link-rows seit Welle 3), .progress-thin. */ /* Buttons */ .btn { white-space: nowrap; } /* Buttons nutzen Cappuccino-Styles aus cappuccino.css */ /* Tables */ .table > thead { background-color: transparent; /* Was #f8f9fa (cool gray) - now transparent for warm Cappuccino */ } /* Star-Admin-Altregel `.table th` (hartes #6c7293 + uppercase) entfernt — thead th deckt die Kompat-Sektion (--stone-500) ab; tfoot th (positions-table-Summenzeilen) erbt wieder den regulären Zeilen-Stil (R-09). */ /* Desktop-Hide-Regeln für table-stacked(-statement) leben in der Stacking-Sektion weiter unten (Duplikat hier entfernt, AC-48). */ /* Form controls: Rahmen, Radius und Fokus-Ring kommen aus cappuccino.css (var(--stone-200) / var(--radius-lg) / Accent-Ring). Audit B2/UX4-02: Der frühere Override `border-color: #e8ebf1` (kühles Blaugrau aus der Star-Admin-Ära, kein Token) ist ersatzlos gestrichen — er überschrieb die Basisdefinition auf der gesamten App-Fläche. */ /* .auth-wrapper/.auth-card abgebaut (Audit B4/UX4-11): Die einzigen Konsumenten waren die nicht georouteten Vorlagen registration/login.html (gelöscht) und registration/logged_out.html. Letztere ist über den Django-Admin-Logout zwar theoretisch erreichbar, rendert dort aber seit jeher mit NoReverseMatch ({% url 'login' %} existiert nicht) — die Anmeldung läuft über allauth (templates/account/, .auth-card-col). */ /* Audit B2/A4-03: Scroll-Sperre bei geöffnetem Mobilmenü. Die Klasse wird in base.html (Menu-Toggle) auf gesetzt; overflow:hidden muss auf html UND body liegen, damit der Viewport zuverlässig gesperrt ist. */ html.nav-open, html.nav-open body { overflow: hidden; } /* Responsive */ @media (max-width: 991.98px) { /* Audit B2/UX6-04: `html, body { overflow-x: hidden }` entfernt. Die Regel (Theme-Boilerplate, Commit 216a9f20) verhinderte keinen Überlauf (0px Delta auf 20 Seiten in 3 Breiten), schaltete aber position:sticky ab und hebelte die Scroll-Sperre des Mobilmenüs aus (body-overflow schlägt nur auf den Viewport durch, solange html overflow:visible hat). Neuen horizontalen Überlauf nicht wieder kaschieren, sondern die Ursache beheben. */ /* FEATURE-0053: Sidebar Mobile Styles wurden nach unten verschoben (siehe "FEATURE-0053: Mobile Navigation Redesign" Section) */ .main-panel { margin-left: 0; width: 100%; } /* .sidebar-toggle/.table-responsive-wrapper entfernt (AC-48): Grep 0 Konsumenten — der Burger heißt .mobile-menu-toggle, Tabellen scrollen via .table-responsive (Bootstrap). */ .content-wrapper .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Seitenrand kommt aus --app-gutter (tokens.css), das unter 992px selbst auf 1rem fällt — hier keine eigene padding-Regel mehr. */ /* Filter form on mobile - stack vertically */ .filter-form .row { flex-direction: column; } .filter-form .col-auto { width: 100%; margin-bottom: 0.5rem; } /* .btn-group-mobile entfernt (AC-48): Grep 0 Konsumenten. */ } /* Extra small devices */ @media (max-width: 575.98px) { /* Der frühere Sonderwert 0.75rem ist entfallen: er stand gegen die 16px der mobilen Kopfleiste, der Inhalt lag 4px weiter innen als die Leiste darüber. Beide nehmen jetzt --app-gutter. */ /* Smaller font for tables on mobile */ .table { font-size: var(--fs-14); } .table th, .table td { padding: 0.5rem 0.4rem; white-space: nowrap; } /* .d-none-xs entfernt (AC-48): Grep 0 Konsumenten. */ } /* .footer entfernt (AC-48): Grep 0 class-Konsumenten (Treffer sind Template-Blöcke/modal-footer). */ /* Dropdown menus — Audit B4C/UX4-08: Schattenwert = gerenderter Ist-Stand (Bootstrap .shadow-sm im Markup gewann per !important gegen die früheren 0 5px 15px). Das Stylesheet trägt jetzt den Ist-Wert, damit shadow-sm aus base.html fallen kann (Single Source). */ .dropdown-menu { border: none; /* Audit B4GL/UX5-10: Geometrie unverändert, Farbe vom reinen Schwarz auf den Espresso-Ton — der Styleguide sagt rgba(61,43,31,x) für alle Schatten des Systems. */ box-shadow: 0 2px 4px rgba(61, 43, 31, 0.075); border-radius: 0.5rem; } .dropdown-item { padding: 0.5rem 1rem; } .dropdown-item:hover { background-color: #f4f5f7; } /* .user-dropdown entfernt (AC-48): Grep 0 Konsumenten — das User-Dropdown in base.html nutzt .navbar-user. */ /* Scrollbar styling (Mobile-Menü-Overlay) */ .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-track { background: var(--milk); } .sidebar::-webkit-scrollbar-thumb { background: var(--crema); border-radius: 3px; } /* Headings - überschreibt cappuccino.css für App-Kontext. Audit B4C/UX4-09 (selektorform-heben): auch die .hN-Klassenform, damit der App-Schriftschnitt (600) gegen Bootstraps .hN { font-weight: 500 } gewinnt (gleiche Spezifität, spätere Ladereihenfolge) — z. B.

in der Gebührenordnung. */ .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 { color: var(--espresso); font-weight: 600; } /* Audit B4C/UX5-11 (app-basisgroessen): Basisgrößen je Ebene aus der --fs-Skala, damit eine Überschrift ohne Komponentenklasse nicht auf die Marketing-Größen aus cappuccino.css (h1 3.5rem, h2 2.5rem) zurückfällt — sichtbar z. B. als 40px-Zwischenüberschrift in den Versicherungs- Einstellungen neben 26px-Seitentiteln. Elementform mit Absicht: eine Größenklasse (.hN, Bootstrap) gewinnt weiter über die Spezifität. h5/h6 erben ihre Größe unverändert von Bootstrap. */ h1 { font-size: var(--fs-26); line-height: 1.2; } h2 { font-size: var(--fs-20); line-height: 1.4; } h3 { font-size: var(--fs-16); line-height: 1.4; } h4 { font-size: var(--fs-14); line-height: 1.4; } /* Audit B4C/UX5-11: .lead im App-Kontext auf die Skala (Marketing bleibt bei 1.1rem in cappuccino.css). */ .lead { font-size: var(--fs-16); } /* HTMX Indicator - FEATURE-0025: Infinite Scroll */ /* Skeleton-Loader nur während HTMX-Request sichtbar */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; } /* Mobile Card-/List-Stacking: konsolidiert in app-components.css → .list-card (Tabellen-Kanon Etappe 1). Die vormaligen .table-stacked / -statement / -submission / -document / -queue Blöcke wurden dorthin überführt. */ /* ============================================ View Transitions - Policy Reordering Animation FEATURE-0047: Kostenträger-Konstellation UI Redesign ============================================ Animiert Policy-Cards bei Workflow-Änderungen. Verwendet View Transitions API mit HTMX (transition:true). Browser-Support: - Chrome 111+, Edge 111+, Safari 18+: Voll - Firefox: Graceful Degradation (keine Animation) ============================================ */ /* Animation für alle View Transitions */ ::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: ease-in-out; } /* Sanftes Ausblenden der alten Position */ ::view-transition-old(*) { animation-duration: 0.4s; } /* Sanftes Einblenden der neuen Position */ ::view-transition-new(*) { animation-duration: 0.4s; } /* Audit B4C/A5-27: "Bewegung reduzieren" respektieren — die Policy-Cards springen dann direkt an ihre neue Position statt zu gleiten. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; } } /* Todo Status Overview Cards entfernt (FEATURE-0134 AC-34): letzter Konsument war das tote Partial core/todo/_status_overview.html */ /* Todo-Accordion (FEATURE-0043) entfernt (FEATURE-0134 AC-40): letzter Konsument war core/onboarding/dashboard.html — Onboarding nutzt jetzt die todo-acc-Klassen aus app-components.css (Welle 3). */ /* ============================================ FEATURE-0053: Mobile Navigation Redesign Marketing-Page-Style für den Login-Bereich ============================================ */ /* Mobile Hamburger Button — Audit B4/UX6-07: ohne eigenen z-index. Der Knopf liegt korrekt oben, weil seine Kopfleiste (.mobile-header) den Ebenenwert trägt; auf Desktop ist er statisch positioniert und ein z-index wäre wirkungslos. */ .mobile-menu-toggle { display: none; background: transparent; border: none; padding: 0.5rem; /* Audit B4C/A4-06: Trefferfläche ≥44px (vorher 40×34 aus Padding+Icon) */ min-width: 44px; min-height: 44px; cursor: pointer; align-items: center; justify-content: center; } .hamburger-icon { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; } .hamburger-line { display: block; width: 100%; height: 2px; background: var(--espresso); border-radius: 2px; transition: all 0.3s ease; transform-origin: center; } /* Animation: Hamburger → X */ .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* .logo-brand-mobile (Text-Wortmarke) abgebaut (Audit B4/UX4-11+UX6-08, Grep: 0 Konsumenten) — die mobile Kopfleiste zeigt .mobile-header-logo als Bild. */ /* Mobile-spezifische Styles (< 992px) */ @media (max-width: 991.98px) { /* Mobile Header Toggle und Logo anzeigen */ .mobile-menu-toggle { display: flex; } /* Mobile Header (immer sichtbar) - nutzt globale Variablen aus cappuccino.css */ .mobile-header { position: fixed; top: 0; left: 0; right: 0; height: var(--mobile-header-height); background: var(--mobile-header-bg); display: flex; align-items: center; justify-content: space-between; /* Audit B4C/A4-12: Kopfinhalt rückt unter die Systemanzeige (die Kopfhöhen-Variable in tokens.css wächst um denselben Betrag); seitliche Federung fürs Querformat. env() ist sonst 0px. */ padding: env(safe-area-inset-top, 0px) calc(var(--app-gutter) + env(safe-area-inset-right, 0px)) 0 calc(var(--app-gutter) + env(safe-area-inset-left, 0px)); z-index: calc(var(--z-overlay) + 1); border-bottom: 1px solid var(--stone-200); } .mobile-header-logo { height: var(--mobile-header-logo-height); width: auto; } /* Sidebar als Fullscreen Overlay — Single Source (FEATURE-0134 Welle 6: die klobbernden Alt-Regeln aus dashboard-theme.css sind weg, damit greifen Slide-/Fade-Transition aus FEATURE-0053 wieder; width/height ohne !important, da keine konkurrierende Regel mehr existiert). */ .sidebar { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; min-height: 100vh; background: var(--milk); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease; z-index: var(--z-overlay); overflow-y: auto; padding-top: var(--mobile-header-height); } .sidebar.show { transform: translateY(0); opacity: 1; visibility: visible; } /* Audit B4 Global/A5-15: Beim Öffnen setzt base.html den Fokus auf den Dialograhmen, damit er überhaupt ins Overlay wandert. Der Rahmen ist nicht per Tab erreichbar (tabindex="-1"), sein Fokusring wäre also nur ein voller Rand um den Bildschirm ohne Aussage. Die Menüpunkte darin behalten ihren eigenen Ring. */ .sidebar:focus { outline: none; } /* Desktop Top-Navbar auf Mobile ausblenden (inkl. User-Dropdown). Ohne !important: gleiche Spezifität wie die Basis-Regel, dieser Block steht später in der Datei (FEATURE-0134 Welle 6, AC-49). */ .top-navbar { display: none; } /* Main Panel: Padding für Mobile Header */ .main-panel { padding-top: var(--mobile-header-height); margin-left: 0; } /* BUG-0024: Der globale Mobil-Kopf braucht Luft nach unten. Die Regel darüber federt exakt die Kopfhöhe ab, sodass zwischen Leiste und erster Überschrift nur noch der Seitenrand der .content-wrapper stand (--app-gutter, mobil 1rem) — die Überschrift klebte am Kopf. 8px Zuschlag ergeben rund 24px Gesamtabstand. Der Zuschlag hängt bewusst am Kopf und nicht an --app-gutter: das Token trägt auch den seitlichen Rand, den es nicht zu vergrößern gilt (und die Kopfleiste selbst nimmt es ebenfalls, siehe .mobile-header). Scope: nur Seiten mit dem globalen Kopf. Mehr braucht der Selektor nicht, denn die beiden Kopfleisten schließen einander aus — keine Seite trägt .mobile-header und .edit-mobile-bar zugleich: - receipt_update.html und reimbursement_form.html leeren den mobile_header-Block bedingungslos, - receipt_form.html rendert den globalen Kopf nur OHNE file_id und die eigene Leiste nur MIT. Die Sonderflows bringen ihre eigene Abstandsrechnung mit (app-components.css, 62px bzw. 116px) und werden von `body:has(.mobile-header)` ohnehin nicht getroffen. Hier stand bis Welle 1 zusätzlich `:not(:has(.edit-mobile-bar))` mit der Begründung, das halte „die Beleg-Erfassung fern, die beide Leisten trägt". Diese Seite gibt es nicht; der Teil war toter Code mit falscher Begründung (Review Welle 1, M2). Wächter für beide Hälften: code/tests/e2e/test_mobiler_kopfabstand.py. */ body:has(.mobile-header) .main-panel { padding-top: calc(var(--mobile-header-height) + 0.5rem); } /* Navigation im Overlay (Cosmetics ehem. dashboard-theme.css .sidebar) */ .sidebar .nav { padding: 0 0.75rem; } .sidebar .nav-link { color: var(--stone-600); font-size: var(--fs-14); /* 14px */ /* Audit B4C/A4-06: 44px-Trefferfläche auch für Einstellungen/Abmelden in der .mobile-logout-section (dieselbe .nav-link-Basis) */ min-height: 44px; padding: 0.75rem 1rem; /* Audit B4C/UX4-08: 6px = gerenderter Ist-Stand (rounded-2 im Markup gewann gegen die früheren 0.5rem) — siehe Desktop-Regel. */ border-radius: var(--radius-xs); margin-bottom: 0.25rem; display: flex; align-items: center; text-align: left; transition: background 0.15s ease, color 0.15s ease; } .sidebar .nav-link svg { width: var(--icon-md); height: var(--icon-md); margin-right: 0.75rem; flex-shrink: 0; color: var(--crema-dark); } .sidebar .nav-link:hover { background: var(--stone-100); color: var(--espresso); } .sidebar .nav-link:hover svg { color: var(--espresso); } .sidebar .nav-link.active { background: var(--accent-muted); color: var(--accent); position: relative; } .sidebar .nav-link.active svg { color: var(--accent); } .sidebar .nav-link.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } /* Mobile Logout Section — Einträge sind reguläre .nav-link (siehe _mobile_menu.html), damit Einrückung, Icon-Abstand und Tap-Fläche identisch zur Primär-Nav sind. Seitliches Padding daher wie .sidebar .nav. */ .mobile-logout-section { border-top: 1px solid var(--stone-200); margin-top: 1rem; padding: 1rem 0.75rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } } /* Entscheidung C (FEATURE-0134): farbige Receipt-Type-Klassen abgebaut — Belegtyp ist überall der monochrome .type-chip (app-components.css). */ /* ======================================================================== Status-Badges (semantisch, domain-übergreifend) Verwendung: Offen Mapping pro Domain siehe code/static/CLAUDE.md. Die Farbzuordnung ist nach cappuccino.css umgezogen — app.css lädt nur base.html, und damit war ein Status-Badge im öffentlichen Bereich weiß auf weiß. Die Geometrie (Polsterung, Rundung, Schrift, Icon-Größe) lebt seit Audit B4/UX5-04 für BEIDE Etiketten-Systeme im Status-Tags-Block von app-components.css und bleibt dort. ======================================================================== */ /* Payer-Type-Tokens (--payer-*) leben in tokens.css — Single Source of Truth (R-07, gleiche Kaskade wie AC-55 bei den Status-Tokens). */ /* ------------------------------------------------------------------ * Form-Validierungsfehler (Django errorlist Bootstrap-konform stylen) * ------------------------------------------------------------------ * Django rendert Field-Errors per Default als