/* Anmeldeseite – Bühne, Anmeldekarte, öffentliche Beiträge. * * Vorher stand hier eine Überschrift über einem Eingabefeld, sonst nichts: * kein Logo, keine Hausfarbe, kein Hinweis, wo man gelandet ist. Jetzt trägt * die Seite dieselbe Titelbühne wie die Startseite dahinter – man erkennt die * Anwendung schon vor der Anmeldung wieder. * * GEHÖRT NACH marke.css IN DEN . Die Klasse .gate wird in den Seiten * selbst gesetzt (schmale, mittige Spalte); die Regeln hier überschreiben das * und brauchen dafür den späteren Platz. */ .ut-anmeldung { /* Überschreibt .gate: aus der 380px-Spalte wird eine zweispaltige Seite. */ max-width: 1000px; margin: 5vh auto 48px; padding: 0 20px; text-align: left; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px; align-items: stretch; } .ut-anmeldung input { text-align: left; margin: 0; } /* --- Bühne links -------------------------------------------------------- */ /* Gleicher Aufbau wie .ut-buehne auf der Startseite, nur höher: hier ist sie nicht Kopfzeile, sondern die halbe Seite. */ .ut-anmelde-buehne { position: relative; border-radius: 14px; overflow: hidden; background: var(--ut-gruen-dunkel, #005C34); min-height: 300px; display: flex; align-items: flex-end; } .ut-anmelde-buehne .ut-buehne-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; } /* Von unten abdunkeln, damit die Schrift auf jedem Bildausschnitt sitzt – ohne den Verlauf säuft der Claim in den helleren Stellen ab. */ .ut-anmelde-buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 50, 28, 0.72) 0%, rgba(0, 50, 28, 0.15) 55%, rgba(0, 50, 28, 0) 100%); } .ut-anmelde-buehne .ut-buehne-inhalt { position: relative; z-index: 1; padding: 26px 26px 24px; } .ut-anmelde-buehne h1 { color: #fff; margin: 0; font-size: 26px; letter-spacing: -0.01em; } .ut-anmelde-buehne .ut-buehne-sub { color: rgba(255, 255, 255, 0.9); font-size: 13.5px; margin: 6px 0 0; max-width: 42ch; } /* Was hinter der Anmeldung liegt. Sechs kurze Begriffe statt eines Absatzes: wer die Seite zum ersten Mal sieht, soll in zwei Sekunden wissen, wofür sie da ist – und wer sie täglich sieht, überliest sie mühelos. */ .ut-vorteile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .ut-vorteile span { font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 3px 10px; } @media (max-width: 780px) { /* Auf dem Telefon nur die ersten drei – sechs Zeilen Chips über der Anmeldekarte wären im Weg. */ .ut-vorteile span:nth-child(n+4) { display: none; } } /* --- Anmeldekarte rechts ------------------------------------------------ */ .ut-anmelde-karte { background: var(--surface-1); border: 1px solid var(--ring); border-radius: 14px; padding: 24px 22px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .ut-anmelde-karte h2 { font-size: 17px; margin: 0 0 4px; color: var(--ut-gruen-dunkel, #005C34); } :root[data-theme="dark"] .ut-anmelde-karte h2 { color: var(--ut-gruen, #12A163); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .ut-anmelde-karte h2 { color: var(--ut-gruen, #12A163); } } .ut-anmelde-karte .sub { margin: 0; } .ut-anmelde-karte input { width: 100%; } .ut-anmelde-karte button { width: 100%; } /* Trenner mit dem Wort „oder" – macht sichtbar, dass es zwei Wege sind und nicht zwei Schritte. */ .ut-oder { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .ut-oder::before, .ut-oder::after { content: ""; flex: 1; height: 1px; background: var(--ring); } .ut-feld-titel { display: block; font-size: 12px; color: var(--ink-2); margin: 0 0 6px; font-weight: 600; } /* --- Öffentliche Beiträge über die ganze Breite ------------------------- */ .ut-aktuelles { grid-column: 1 / -1; margin-top: 6px; } .ut-aktuelles-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .ut-aktuelles-kopf h2 { font-size: 14px; margin: 0; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 700; display: flex; align-items: center; gap: 8px; } .ut-aktuelles-kopf h2::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--ut-gruen, #007A45); } .ut-profile { display: flex; gap: 6px; flex-wrap: wrap; } .ut-profil { font-size: 12px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--ring); border-radius: 999px; padding: 3px 11px; background: var(--surface-1); } .ut-profil:hover { border-color: var(--ut-gruen, #007A45); color: var(--ut-gruen, #007A45); } .ut-beitraege { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .ut-beitrag { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--ring); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } .ut-beitrag:hover { border-color: var(--ut-gruen, #007A45); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .ut-beitrag { transition: none; } .ut-beitrag:hover { transform: none; } } /* Feste 16:9-Fläche: die Kacheln bleiben gleich hoch, auch wenn ein Vorschaubild fehlt oder ein anderes Seitenverhältnis hat. */ .ut-beitrag-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--plane); display: block; } .ut-beitrag-text { padding: 9px 11px 11px; display: block; } .ut-beitrag-quelle { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; } .ut-beitrag-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; } /* Schlusszeile – erdet die Seite und sagt, wessen Anwendung das ist. */ .ut-anmelde-fuss { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; color: var(--muted); text-align: center; } .ut-anmelde-fuss a { color: var(--ut-gruen, #007A45); text-decoration: none; } .ut-anmelde-fuss a:hover { text-decoration: underline; } /* --- Schmale Fenster ---------------------------------------------------- */ @media (max-width: 780px) { .ut-anmeldung { grid-template-columns: 1fr; margin-top: 0; padding: 0 14px 20px; gap: 14px; } .ut-anmelde-buehne { min-height: 190px; border-radius: 0 0 14px 14px; } .ut-anmelde-buehne h1 { font-size: 21px; } .ut-anmelde-buehne .ut-logo-hell { height: 34px; } /* Auf dem Telefon zwei Kacheln nebeneinander statt vier winzige. */ .ut-beitraege { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }