/* ============================================================ ADMINBEREICH Baut auf style.css auf (Farben, Schriften, .btn) und ergaenzt nur, was der Verwaltungsbereich zusaetzlich braucht. Liegt unter /css statt /admin, weil /admin ohne Login gesperrt ist – die Anmeldemaske braucht ihr Stylesheet aber vorher. ============================================================ */ /* ─── Anmeldemaske ─── */ body.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--carbon, #15151a); } .login-karte { width: 100%; max-width: 380px; background: var(--white, #fff); border-radius: var(--radius, 14px); box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 40px 36px 32px; text-align: center; } /* .logo-mark ist in style.css display:block – das text-align:center der Karte greift dort nicht, deshalb per auto-Rand mittig setzen. */ .login-karte .logo-mark { width: 132px; height: auto; margin: 0 auto 18px; } .login-karte h1 { font-size: 1.6rem; margin: 0 0 4px; } .login-karte .unter { color: var(--muted); font-size: .86rem; margin: 0 0 26px; } .login-karte form { display: flex; flex-direction: column; gap: 8px; text-align: left; } .login-karte label { font-size: .8rem; font-weight: 600; color: var(--text); } .login-karte input { width: 100%; padding: 11px 13px; font: inherit; font-size: .95rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); } .login-karte input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(28,110,140,.15); } .login-karte button { margin-top: 10px; width: 100%; justify-content: center; } .login-karte .fehler { background: rgba(28,110,140,.08); border: 1px solid rgba(28,110,140,.28); color: var(--gold); border-radius: 8px; padding: 10px 13px; margin: 0 0 18px; font-size: .86rem; text-align: left; } .login-karte .zurueck { margin: 22px 0 0; font-size: .8rem; } .login-karte .zurueck a { color: var(--muted); text-decoration: none; } .login-karte .zurueck a:hover { color: var(--gold); text-decoration: underline; } /* ─── Grundgeruest des Adminbereichs ─── */ /* Der cremefarbene Grund muss auf liegen, nicht nur auf : style.css faerbt dunkel, und ein Hintergrund am Body wird dann NICHT mehr auf die Seitenflaeche uebertragen. Ohne das hier blitzt beim Ueber- scrollen und unterhalb kurzer Seiten das dunkle Grundlayout durch. */ html.admin { background: var(--off, #f5f3ef); } body.admin { background: var(--off, #f5f3ef); min-height: 100vh; } /* Die Verwaltung ist ein Dashboard: die dunkle Leiste steht senkrecht am linken Rand, der Inhalt bekommt die uebrige Breite. Kopf- und Fusszeile im Stil der Website gibt es hier nicht mehr – was die Fusszeile trug, steht jetzt unten in der Leiste. */ .admin-kopf { position: fixed; top: 0; left: 0; bottom: 0; width: 236px; z-index: 60; background: var(--carbon, #15151a); color: #fff; display: flex; flex-direction: column; gap: 26px; padding: 24px 0 14px; overflow-y: auto; transition: width .18s ease; } /* Schwung ueber dem Wort, genau wie die Wortmarke im Website-Header (.logo). */ .admin-marke { display: flex; flex-direction: column; line-height: 1; gap: 2px; text-decoration: none; padding: 0 26px; flex: none; } .admin-marke .logo-mark { width: 96px; height: auto; } .admin-marke span { font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); } .admin-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 14px; } .admin-nav a { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.72); text-decoration: none; font-size: .91rem; font-weight: 500; padding: 10px 13px; border-radius: 9px; transition: var(--transition, .2s ease); } .admin-nav a svg { width: 18px; height: 18px; flex: none; opacity: .75; } .admin-nav a:hover { color: #fff; background: rgba(255,255,255,.07); } .admin-nav a.active { color: #fff; background: var(--gold, #1c6e8c); } .admin-nav a.active svg { opacity: 1; } /* Unten in der Leiste: der Weg zur Website, die Pflichtseiten, Abmelden. */ .admin-rand { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding: 18px 26px 0; border-top: 1px solid rgba(255,255,255,.09); font-size: .8rem; } .admin-rand-hinweis { color: rgba(255,255,255,.3); font-size: .72rem; line-height: 1.5; } /* Der Klapp-Knopf am Fuss der Leiste. */ .admin-klapp { display: flex; align-items: center; justify-content: center; margin: 12px 14px 0; padding: 9px 0; border: 0; border-radius: 9px; background: none; cursor: pointer; color: rgba(255,255,255,.5); font: inherit; transition: var(--transition, .2s ease); } .admin-klapp:hover { color: #fff; background: rgba(255,255,255,.07); } .admin-klapp svg { width: 16px; height: 16px; flex: none; transition: transform .18s ease; } /* ─── Eingeklappte Leiste ─── Nur noch die Zeichen, 68 px breit. Die Titel stehen als title an den Punkten, Abmelden und Hinweis brauchen die offene Leiste – wer sie sucht, klappt auf. */ html.leiste-zu .admin-kopf { width: 68px; } html.leiste-zu .admin-marke { padding: 0 14px; } html.leiste-zu .admin-marke .logo-mark { width: 40px; } html.leiste-zu .admin-marke span, html.leiste-zu .admin-nav a span, html.leiste-zu .admin-rand { display: none; } html.leiste-zu .admin-nav { padding: 0 10px; } html.leiste-zu .admin-nav a { justify-content: center; padding: 11px 0; } html.leiste-zu .admin-klapp { margin-top: auto; } html.leiste-zu .admin-klapp svg { transform: rotate(180deg); } /* Abmelden ist ein