diff --git a/abonnieren.html b/abonnieren.html index 3218959d..3d36e715 100644 --- a/abonnieren.html +++ b/abonnieren.html @@ -216,6 +216,104 @@ .abo-switch a { color: var(--accent); cursor: pointer; font-weight: 600; } .abo-switch a:hover { text-decoration: underline; } + /* Registrieren/Einloggen-Umschalter (21.08.2026, Nutzer-Wunsch: "die + sollen dann sofort immer den anmelde knopf auswählen können") — zwei + Segmente in einer Pille, aktiver Tab in Gold hervorgehoben, damit die + Wahl sofort ins Auge fällt, noch bevor überhaupt ein Formularfeld zu + sehen ist. Augenschonend: kein grelles Weiß, ruhiger Farbwechsel. */ + /* ===================================================================== + Aktionsleiste (21.08.2026) — EIN Element für beide Wege, statt vorher + doppeltem "Registrieren" (Umschalter oben + Knopf unten). Links die + eigentliche Aktion in Gold (unverändert im bestehenden Marken-Look), + rechts der Wechsel in Babyblau — der zweiten Hausfarbe der Seite + (theme-dogfather.css). Beide Hälften nutzen dieselbe Technik wie die + bestehenden Gold-Knöpfe (wandernder Verlauf per background-position + + ein durchlaufender Glanzstreifen als ::after) — dadurch wirken sie wie + ein zusammengehöriges Paar statt wie zwei fremde Knöpfe. + Augenschonend (Projektregel): kein Blinken/Flackern, nur ruhig + wandernde Verläufe, und bei prefers-reduced-motion steht alles still. + ===================================================================== */ + .abo-aktionsleiste { + display: flex; gap: .6rem; margin-top: .4rem; + } + /* flex-basis "auto" statt "0": jede Hälfte startet bei ihrer eigenen + Textbreite und wächst dann anteilig mit. Dadurch bekommt automatisch + die Seite mit dem längeren Text mehr Platz — egal ob das gerade links + ("Login-Code anfordern") oder rechts ("Schon registriert? Einloggen") + ist. Mit fester 0-Basis wären beide exakt gleich breit gewesen und der + jeweils längere Text wäre auf zwei Zeilen umgebrochen. */ + .abo-aktionsleiste > button { + position: relative; isolation: isolate; overflow: hidden; + flex: 1 1 auto; min-width: 0; + display: flex; align-items: center; justify-content: center; text-align: center; + padding: 1rem .95rem; border-radius: 14px; + font-weight: 800; font-size: .92rem; line-height: 1.25; + white-space: nowrap; + cursor: pointer; + transition: transform .2s ease, box-shadow .2s ease; + } + .abo-aktionsleiste > button::after { + content: ""; position: absolute; inset: 0; z-index: 1; + background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 48%, transparent 66%); + background-size: 240% 100%; + mix-blend-mode: overlay; + animation: abo-btn-glare 3.2s ease-in-out infinite; + pointer-events: none; + } + .abo-aktionsleiste > button:hover { transform: translateY(-3px) scale(1.015); } + + /* Links: Gold — exakt die bestehende Knopf-Optik der Seite. */ + .abo-aktion-haupt { + color: #1a1408; + border: 1.5px solid rgba(255,233,168,.65); + background: linear-gradient(120deg, #ffe9a8 0%, #d4af37 30%, #ffe9a8 55%, #fff2c9 78%, #d4af37 100%); + background-size: 280% 100%; + animation: abo-btn-shine 6s ease-in-out infinite; + box-shadow: 0 10px 26px -12px rgba(212,175,55,.55); + } + .abo-aktion-haupt:hover { + box-shadow: 0 16px 34px -10px rgba(212,175,55,.65), 0 0 26px rgba(212,175,55,.4); + } + + /* Babyblau — gleiche Machart, kräftigeres Sky-Blau statt des sehr + blassen Standard-Babyblaus, damit es neben dem Gold nicht untergeht + (dieselbe Lektion wie auf der Verwaltungsseite). Dunkler Tiefsee-Text + darauf für klaren Kontrast; zusätzlich ein sanft atmender Ring, der die + Kachel leicht leuchten lässt, ohne zu blenden. + + Zwei Namen, eine Optik: ".abo-aktion-neben" ist der Wechsel-Knopf neben + einer Gold-Aktion (Registrierungs-Seite), ".abo-aktion-blau" ist ein + Knopf, der selbst DIE Hauptaktion ist und trotzdem blau sein soll + (Einloggen-Seite, Nutzer-Wunsch 21.08.2026). Bewusst getrennte Namen, + damit später klar bleibt, warum ein Knopf blau ist. */ + .abo-aktion-neben, + .abo-aktion-blau { + color: #05202b; + border: 1.5px solid rgba(224,247,254,.7); + background: linear-gradient(120deg, #e0f7fe 0%, #38bdf8 30%, #7dd3fc 55%, #f0fbff 78%, #38bdf8 100%); + background-size: 280% 100%; + animation: abo-btn-shine 6s ease-in-out infinite, abo-blau-atem 4.5s ease-in-out infinite; + box-shadow: 0 10px 26px -12px rgba(56,189,248,.6), 0 0 0 0 rgba(125,211,252,.5); + } + .abo-aktion-neben:hover, + .abo-aktion-blau:hover { + box-shadow: 0 16px 34px -10px rgba(56,189,248,.75), 0 0 30px rgba(125,211,252,.55); + } + @keyframes abo-blau-atem { + 0%, 100% { box-shadow: 0 10px 26px -12px rgba(56,189,248,.55), 0 0 14px rgba(125,211,252,.25); } + 50% { box-shadow: 0 12px 30px -12px rgba(56,189,248,.75), 0 0 26px rgba(125,211,252,.5); } + } + + @media (prefers-reduced-motion: reduce) { + .abo-aktionsleiste > button, + .abo-aktionsleiste > button::after { animation: none; } + } + /* Auf schmalen Handys untereinander statt gequetscht nebeneinander. */ + @media (max-width: 430px) { + .abo-aktionsleiste { flex-direction: column; gap: .55rem; } + .abo-aktionsleiste > button { font-size: .92rem; } + } + .abo-oder { display: flex; align-items: center; gap: .8rem; color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; @@ -321,62 +419,88 @@ korrekt "nicht bedienbar" meldet. -->
- +
- +
- + +
+ + +
+ + +

Mit diesem Code loggst du dich künftig ein — merk ihn dir gut.

+
+ + +
+ +
- -

-

Schon Supporter? Hier einloggen

- - + - + @@ -460,7 +619,7 @@