design: Auth-Seiten als 2-Spalter + Preis-Hierarchie

- Login/Register: links Formular, rechts Vertrauens-Panel (Logo, 🇨🇭 Daten in
  der Schweiz, Backups, kündbar) → wirkt hochwertiger als nackte Box
- Preise: empfohlene Karte hervorgehoben (angehoben, Akzent-Glow, Tönung)
- responsive: Aside/Lift fällt unter 760/860px weg

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-05-31 11:38:00 +02:00
parent a4063ca985
commit 9e24ce8dd6
39 changed files with 142 additions and 80 deletions
+25 -1
View File
@@ -831,7 +831,14 @@ nav [class*="font-bold"] {
border-radius: 14px; padding: 24px;
}
.dark .hosting-plan { background: #1a1714; border-color: #2d2926; }
.hosting-plan.rec { border-color: var(--rapport-accent); box-shadow: 0 0 0 1px var(--rapport-accent); }
.hosting-plan.rec {
border-color: var(--rapport-accent);
box-shadow: 0 0 0 2px var(--rapport-accent), 0 18px 44px rgba(176,120,72,0.18);
background: linear-gradient(180deg, rgba(176,120,72,0.06), var(--rapport-surface) 120px);
transform: translateY(-8px);
}
@media (max-width: 860px) { .hosting-plan.rec { transform: none; } }
.hosting-plan.rec .pprice { color: var(--rapport-accent-2); }
.hosting-plan .pbadge { position: absolute; top: -10px; right: 16px; background: var(--rapport-accent);
color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; }
.hosting-plan .pname { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rapport-text-3); }
@@ -877,3 +884,20 @@ nav [class*="font-bold"] {
.rapport-footer-col a { display: block; font-size: 13px; color: var(--rapport-text-2); text-decoration: none; padding: 4px 0; }
.rapport-footer-col a:hover { color: var(--rapport-accent); }
.rapport-footer-note { font-size: 12px; color: var(--rapport-text-3); padding: 4px 0; line-height: 1.5; }
/* Auth-2-Spalter (Login/Register): Formular links, Vertrauens-Panel rechts */
.hosting-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 760px) { .hosting-auth { grid-template-columns: 1fr; } .hosting-auth-aside { display: none; } }
.hosting-auth-form { padding: 8px 36px 8px 8px; }
.hosting-auth-aside {
border-left: 1px solid var(--rapport-border);
padding: 8px 8px 8px 36px;
display: flex; flex-direction: column; justify-content: center;
}
.hosting-aside-list { list-style: none; padding: 0; margin: 0; }
.hosting-aside-list li {
font-size: 14px; color: var(--rapport-text-2); padding: 9px 0;
border-bottom: 1px solid var(--rapport-border-2);
}
.hosting-aside-list li:last-child { border-bottom: none; }
.dark .hosting-auth-aside { border-left-color: #2d2926; }