/* * Gemeinsames Stylesheet für partner.mvm-app.at. * * Bewusst EINE geteilte Datei statt der bisherigen Praxis, jede Seite mit * einem eigenen 40-KB-Style-Block auszustatten: Der Partner-Bereich besteht * von Anfang an aus mehreren Seiten (Start, Anmelden, Registrieren, später * das Dashboard), und die sollen nicht auseinanderdriften. * * Die Farbwerte sind bewusst dieselben wie auf barber.mvm-app.at – Partner * und Kunden sollen dieselbe Marke sehen, nur einen anderen Bereich. * * Hell/Dunkel kommt über theme.js, das `data-theme` am setzt. Ohne * eigene Wahl entscheidet das Betriebssystem. */ :root { --ink: 255, 255, 255; --panel-rgb: 18, 18, 18; --gold-rgb: 212, 175, 55; /* Gold als Fläche bleibt in BEIDEN Modi hell, damit dunkler Text darauf lesbar bleibt. --gold dagegen dunkelt im Hellmodus ab, weil es dort für Text und Symbole dient. */ --gold: #d4af37; --gold-surface: #d4af37; --gold-surface-2: #e9cd7c; --on-gold: #141210; --bg: #070707; --bg-2: #090909; --panel: #121212; --panel-alt: #1c1916; --line: rgba(255, 255, 255, 0.1); --text: #f4f4f4; --muted: #a5a09a; --muted-2: #7f7a74; --ok: #4ade80; --ok-rgb: 74, 222, 128; --err: #ff6b6b; --err-rgb: 255, 107, 107; --radius: 18px; --radius-sm: 12px; --maxw: 1100px; color-scheme: dark; } html[data-theme="light"] { --ink: 0, 0, 0; --panel-rgb: 255, 255, 255; --gold: #8a6d1f; --bg: #f7f5f0; --bg-2: #f1eee7; --panel: #ffffff; --panel-alt: #faf8f4; --line: rgba(0, 0, 0, 0.12); --text: #17150f; --muted: #5f594f; --muted-2: #837c70; /* Das helle Gruen des Dunkelmodus ist auf Weiss kaum zu lesen. */ --ok: #157f3c; --ok-rgb: 21, 127, 60; color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: "Space Grotesk", Manrope, sans-serif; line-height: 1.2; margin: 0; } a { color: var(--gold); } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* Schmaler als .wrap – für Fließtext und Formulare. Lange Zeilen sind auf großen Bildschirmen mühsam zu lesen. */ .wrap-narrow { width: 100%; max-width: 460px; margin: 0 auto; padding: 0 20px; } /* ---------- Kopfzeile ---------- */ .topbar { position: sticky; top: 0; z-index: 20; background: rgba(var(--panel-rgb), 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .topbar-inner { display: flex; align-items: center; gap: 14px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: var(--text); font-size: 17px; } .brand img { width: 30px; height: 30px; border-radius: 8px; } .brand-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-gold); background: var(--gold-surface); padding: 3px 8px; border-radius: 999px; } /* ---------- Flächen ---------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* ---------- Knöpfe ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform 0.12s ease, filter 0.12s ease; } .btn:active { transform: translateY(1px); } .btn-gold { background: linear-gradient(135deg, var(--gold-surface), var(--gold-surface-2)); color: var(--on-gold); } .btn-gold:hover { filter: brightness(1.06); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn-ghost:hover { border-color: rgba(var(--gold-rgb), 0.5); } .btn-block { width: 100%; } .btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* ---------- Formulare ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .field input, .field select { width: 100%; padding: 13px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-alt); color: var(--text); font: inherit; } .field input:focus, .field select:focus { outline: none; border-color: rgba(var(--gold-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.14); } /* Meldungen: Fehler dürfen nicht nur farblich wirken – wer Farben schlecht unterscheidet, braucht das Symbol davor. */ .notice { border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; margin-bottom: 14px; display: flex; gap: 8px; align-items: flex-start; } .notice-err { background: rgba(var(--err-rgb), 0.12); border: 1px solid rgba(var(--err-rgb), 0.4); color: var(--err); } .notice-ok { background: rgba(var(--ok-rgb), 0.12); border: 1px solid rgba(var(--ok-rgb), 0.4); color: var(--ok); } .notice[hidden] { display: none; } /* ---------- Fußzeile ---------- */ .footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 28px 0 40px; color: var(--muted-2); font-size: 13px; } .footer a { color: var(--muted); text-decoration: none; } .footer a:hover { color: var(--gold); } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; } /* ---------- Hilfsklassen ---------- */ .muted { color: var(--muted); } .center { text-align: center; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Schmale Fenster: In die Kopfzeile müssen Logo, Markenname, Abzeichen, Sprachumschalter, Hell/Dunkel-Knopf UND der Anmelden-Knopf passen. Nachdem Umschalter und Knopf dazugekommen sind, lief die Zeile schon bei 390 px über (36 px) – der Anmelden-Knopf wurde hinausgeschoben und die Seite ließ sich seitlich schieben. Deshalb weichen die Teile gestaffelt. Reihenfolge der Opfer ist Absicht: Der Markenname geht zuerst (das Logo steht ja daneben), dann das Abzeichen, zuletzt bliebe nur noch der Umschalter – der bleibt, weil Sprache wechseln können muss. */ @media (max-width: 480px) { .brand span:not(.brand-tag) { display: none; } .topbar-inner { gap: 9px; } .topbar-inner .btn { padding: 9px 14px; font-size: 14px; } } @media (max-width: 400px) { .brand-tag { display: none; } .sprachen button { padding: 7px 9px; } } /* ---------- Sprachumschalter ---------- */ .sprachen { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .sprachen button { background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; padding: 7px 11px; cursor: pointer; } .sprachen button.aktiv { background: var(--gold-surface); color: var(--on-gold); } .sprachen button:not(.aktiv):hover { color: var(--text); } /* ---------- Ausführlicher Fußbereich ---------- */ .fuss-spalten { display: grid; gap: 32px; grid-template-columns: 1.6fr 1fr 1fr 1fr; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .fuss-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .fuss-badges img { display: block; } .fuss-spalte { display: flex; flex-direction: column; gap: 9px; } .fuss-titel { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; } .fuss-spalte a { color: var(--muted); text-decoration: none; font-size: 14px; } .fuss-spalte a:hover { color: var(--gold); } /* Der Cookie-Link wird erst per JavaScript befüllt – solange er leer ist, soll er keine Lücke in die Liste reißen. */ .fuss-spalte a:empty { display: none; } .fuss-unten { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 18px; font-size: 13px; } @media (max-width: 760px) { .fuss-spalten { grid-template-columns: 1fr 1fr; gap: 26px; } .fuss-marke { grid-column: 1 / -1; } } @media (max-width: 420px) { .fuss-spalten { grid-template-columns: 1fr; } } /* ---------- Fingerkuppen statt Mauszeiger ---------- * * Auf Touch-Geräten waren mehrere Bedienelemente kleiner als die 44 px, die * Apple und Google als Mindestgröße nennen: der Sprachumschalter 39 × 33, * der Hell/Dunkel-Knopf 40 × 40, der Anmelden-Knopf 42 px hoch. Das trifft * man mit dem Daumen nur mit Zielen. * * `pointer: coarse` statt einer Breitenabfrage: entscheidend ist der Finger, * nicht das Fenster. Am Rechner bleibt alles so kompakt wie bisher. * * Die Breite wächst erst ab 400 px mit – darunter ist die Kopfzeile ohnehin * schon eng (siehe Kommentar oben), und die Höhe bringt den größeren Teil. */ @media (pointer: coarse) { .btn { min-height: 44px; } .topbar-inner .btn { min-height: 44px; } .sprachen button { min-height: 44px; } .mvm-theme-toggle { min-width: 44px; min-height: 44px; } /* Textlinks bekommen Höhe, ohne dass sich der Zeilenumbruch ändert: inline-block plus senkrechte Polsterung, waagrecht nichts. */ .fuss-spalte a, .fuss-unten a, .form-fuss a, .form-hinweis a { display: inline-block; padding: 7px 0; } } @media (pointer: coarse) and (min-width: 401px) { .sprachen button { min-width: 44px; } } /* ---------- Einrichtung in Schritten (einrichten.html) ---------- * * Wer sich mit Apple oder Google anmeldet, füllt kein Formular aus – der * Anbieter liefert nur Name und E-Mail. Alles Weitere wird deshalb Schritt für * Schritt gefragt statt in einem langen Formular auf einmal. */ .schritt-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .schritt-balken { display: flex; gap: 6px; flex: 1 1 160px; min-width: 120px; } .schritt-teil { height: 4px; flex: 1; border-radius: 999px; background: var(--line); transition: background 0.2s ease; } .schritt-teil.an { background: var(--gold-surface); } @media (prefers-reduced-motion: reduce) { .schritt-teil { transition: none; } } /* Auswahlkarten statt Auswahlliste: Bei drei Möglichkeiten mit je einem erklärenden Satz ist eine Liste zum Aufklappen die schlechtere Wahl – man müsste sie öffnen, um zu sehen, worin sie sich unterscheiden. */ .wahl-liste { display: grid; gap: 10px; } .wahl { display: block; width: 100%; text-align: left; padding: 15px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-alt); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .wahl:hover { border-color: rgba(var(--gold-rgb), 0.45); } .wahl.gewaehlt { border-color: var(--gold-surface); background: rgba(var(--gold-rgb), 0.1); } .wahl:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .wahl-titel { display: block; font-weight: 700; font-size: 15.5px; } .wahl-text { display: block; font-size: 13.5px; margin-top: 4px; line-height: 1.5; } .schritt-knoepfe { display: flex; gap: 10px; } .schritt-knoepfe .btn { flex: 1; } /* Nebeneinander ist die gewohnte Form für „Zurück / Weiter" und spart eine Knopfhöhe. Erst unter 330 px wird es zu eng – auf einem 375-px-Telefon bleiben je 175 px, das reicht bequem. */ @media (max-width: 330px) { .schritt-knoepfe { flex-direction: column; } } .btn-link { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; /* 44 px hoch, damit der Knopf mit dem Daumen zu treffen ist. */ min-height: 44px; padding: 0 12px; } .btn-link:hover { color: var(--text); } /* ---------- Anmelden mit Apple und Google ---------- */ .sozial-knoepfe { display: grid; gap: 10px; } .btn-sozial { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-alt); color: var(--text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; } .btn-sozial:hover { border-color: rgba(var(--ink), 0.3); } .btn-sozial:disabled { opacity: 0.6; cursor: default; } .btn-sozial svg { width: 18px; height: 18px; flex: 0 0 auto; } /* Trennlinie mit „oder" in der Mitte. */ .trenner { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 13px; margin: 18px 0; } .trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Ergebnis der Namensprüfung. Kein Sperrschild – auch die App lässt weitermachen, sie sagt nur Bescheid. */ .namens-hinweis { font-size: 12.5px; line-height: 1.5; margin-top: 6px; color: var(--muted); } .namens-hinweis.frei { color: var(--ok); } .namens-hinweis.vergeben { color: var(--gold); } .namens-hinweis[hidden] { display: none; } /* ---------- Vollbild-Knopf im Dashboard ---------- * Gleiche Größe und Form wie der Hell/Dunkel-Knopf daneben, damit die * Kopfzeile nicht unruhig wird. */ .vollbild-knopf { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-alt); color: var(--text); cursor: pointer; padding: 0; } .vollbild-knopf:hover { border-color: rgba(var(--gold-rgb), .45); } .vollbild-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .vollbild-knopf svg { width: 18px; height: 18px; } /* Zwei Zeichen in einem: Pfeile nach außen zum Einschalten, nach innen zum Beenden. Ein einziges Symbol für beides wäre missverständlich. */ .vollbild-knopf .zu { display: none; } .vollbild-knopf.an { border-color: var(--gold-surface); color: var(--gold); } .vollbild-knopf.an .auf { display: none; } .vollbild-knopf.an .zu { display: inline; } /* Nur für Screenreader – der Knopf zeigt ein Zeichen, braucht aber einen sprechenden Namen. */ .vollbild-knopf .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (pointer: coarse) { .vollbild-knopf { width: 44px; height: 44px; } } /* Auf schmalen Geräten ist die Kopfzeile ohnehin eng, und Vollbild bringt dort am wenigsten – der Knopf weicht als Erster. */ @media (max-width: 560px) { .vollbild-knopf { display: none; } }