/* ===================================================================== JUHU! Party — Modern Theme Layer v2 (Stand 2026-07-26) Reines Design-Override: keine Funktions- oder Strukturänderungen. Rollback: Datei aus den -Bereichen entfernen (Git-Tag des alten Designs: design-klassisch-2026-07-26) ===================================================================== */ /* ---------- 1) Globale Design-Tokens ---------- */ :root { /* Neutrales, ruhiges Anthrazit statt Lila-Aubergine */ --bg: oklch(16% 0.008 270); --bg-deep: oklch(12% 0.006 270); --surface: oklch(20% 0.01 270); --surface-soft: oklch(24.5% 0.012 270); --ink: oklch(96% 0.004 270); --muted: oklch(71% 0.008 270); /* Markenakzent: gedecktes Amber, sparsam eingesetzt */ --accent: oklch(76% 0.145 75); --accent-soft: oklch(83% 0.1 80); --violet: oklch(58% 0.05 290); --line: color-mix(in oklch, var(--ink) 9%, transparent); /* Moderne Typografie statt Arial Black */ --display: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; --body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; /* Strenge, kleine Rundungen */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* Dashboard-/Login-/Admin-Farbwelt (Hex-Variablen dieser Bereiche) */ --sidebar: #141519; --surface-2: #212228; --orange: #e9a41f; --cream: #f2f3f5; --cyan: #5fc9be; } /* ---------- 2) Typografie: kraftvoll, aber nicht plakativ ---------- */ /* Eine Schriftfamilie für ALLE Bereiche (Startseite, Dashboards, Admin) */ h1, h2, h3 { font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; letter-spacing: -0.02em; font-weight: 750; } /* Einheitliche Größenordnung der Seiten-Überschriften (Hero regelt sich separat) */ h1 { font-size: clamp(1.9rem, 2.9vw, 2.6rem); line-height: 1.08; } /* Übergroße Display-Schriften der Startseite einfangen */ /* Hero = Eyecatcher: groß und klar, hier darf die Botschaft knallen */ .hero h1 { font-size: clamp(4.2rem, 8vw, 7.4rem) !important; line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; color: #ffffff; /* kräftiger schwarzer Schatten, damit die Schrift vor den Fotos steht */ text-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), 0 10px 40px rgba(0, 0, 0, 0.6); } /* Akzentzeile in klarem Orange (kein Verlauf) */ .hero h1 span { color: var(--accent); text-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), 0 10px 40px rgba(0, 0, 0, 0.6); } .hero .eyebrow, .hero .section-kicker { font-size: 0.86rem; font-weight: 800; letter-spacing: 0.2em; } .hero-copy { font-size: clamp(1.14rem, 1.55vw, 1.38rem) !important; line-height: 1.55; max-width: 54ch; color: color-mix(in srgb, var(--ink) 88%, transparent); } .process-sticky h2 { font-size: clamp(2rem, 3.4vw, 3.1rem) !important; } .process-list h3 { font-size: clamp(1.4rem, 2.2vw, 2rem) !important; } .section-kicker { font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; } /* Sektionen kompakter */ .section { padding-block: clamp(44px, 6vw, 76px); } /* „Was JUHU! Party besonders macht.": Überschrift bündig zur linken Kante der Feature-Box darunter (statt zentriert) */ .features .section-intro.centered { max-width: none; margin-left: 0; margin-right: 0; text-align: left; } /* ---------- 3) Schlanker Header + kompakte Navigation ---------- */ .site-header, .public-header { height: 66px; /* schließt exakt am Laufband (top: 66px) an */ min-height: 66px; padding-top: 0; padding-bottom: 0; background: color-mix(in srgb, #131418 86%, transparent); border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(14px) saturate(1.02); } .site-header.is-scrolled { background: color-mix(in srgb, #101114 92%, transparent); backdrop-filter: blur(14px) saturate(1.02); } .public-header + main { padding-top: 96px; } html { scroll-padding-top: 70px; } /* Logo: klare Wortmarke */ .public-brand, .site-header .brand, .dashboard-brand { height: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-weight: 800; align-items: center; } .public-brand span, .site-header .brand span, .dashboard-brand span, .public-brand b, .site-header .brand b, .dashboard-brand b { display: inline-block; width: auto; height: auto; margin: 0; padding: 0; background: transparent; border: 0; font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.2; } .public-brand span, .site-header .brand span, .dashboard-brand span { color: var(--orange, #e9a41f); } .public-brand b, .site-header .brand b, .dashboard-brand b { color: var(--ink, #f2f3f5); margin-left: 5px; } /* Navigation: schmal, ruhig, übersetzungsfest — alle Punkte gleich breit, damit beim Sprachwechsel nichts springt (längste Labels: „Für Anbieter“ / „For providers“) */ .main-nav > a, .main-nav a { width: 122px !important; display: inline-flex; align-items: center; justify-content: center; padding: 7px 6px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; white-space: nowrap; } @media (max-width: 800px) { .main-nav > a, .main-nav a { width: 100% !important; } } /* Kopfzeilen-Buttons ebenfalls formstabil in beiden Sprachen */ .login-link, .register-link { min-width: 108px; text-align: center; justify-content: center; } .hero-actions .button { min-width: 158px; justify-content: center; } /* ---------- 4) Kompakte, sachliche Buttons ---------- */ .button { min-height: 40px; padding: 0 18px; gap: 8px; border-radius: 8px; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; } .button:hover { transform: none; } .button-small { min-height: 34px; padding: 0 14px; font-size: 0.78rem; } .button-primary { box-shadow: none; } .button-primary:hover { box-shadow: 0 3px 14px color-mix(in oklch, var(--accent) 20%, transparent); } .hero-actions { gap: 10px; } .login-link, .register-link { font-size: 0.82rem; } /* Häkchenliste dezenter */ .promise-list { font-size: 0.82rem; } .promise-list li span { color: var(--accent); } /* ---------- 5) Übersicht-Sektion (eingebettetes Anbieterverzeichnis) ---------- */ /* Im eingebetteten Verzeichnis keinen schwebenden Sprachumschalter zeigen — die Sprache steuert die umgebende Startseite. */ body.directory-embedded-page .juhu-language-switch { display: none !important; } /* Eingebettet: kein eigener (lila) Hintergrund — feste Seitenfarbe der One-Page statt Transparenz (Transparenz flackert beim Laden grau/lila) */ html:has(> body.directory-embedded-page), body.directory-embedded-page { background: var(--bg) !important; } /* Eingebettet: nie eigene Scrollbalken zeigen (Höhe liefert das Sync-Skript der One-Page; sonst blitzt beim Laden ein Balken auf) */ html:has(> body.directory-embedded-page), body.directory-embedded-page { scrollbar-width: none !important; -ms-overflow-style: none !important; } html:has(> body.directory-embedded-page)::-webkit-scrollbar, body.directory-embedded-page::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } body.directory-embedded-page { overflow: hidden !important; } /* Ganze Anbieter-Karte klickbar (oeffnet das Profil-Fenster) */ body.directory-embedded-page .provider-card { cursor: pointer; } /* Nahtlos in die One-Page integriert: keine eigene Box, kein eigener Scrollbalken — die Hoehe wird per Skript an den Inhalt angepasst. */ .directory-inline-frame iframe { display: block; width: 100%; height: 900px; /* Startwert, wird per JS auf Inhaltshoehe gesetzt */ border: 0; border-radius: 0; background: transparent; overflow: hidden; } /* ---------- 6) Persönlicher Bereich (Dashboard) ---------- */ @media (min-width: 801px) { .sidebar { width: 208px; padding: 18px 14px 14px; } .dashboard-main { margin-left: 208px; padding-top: 88px; } } .sidebar nav .nav-icon { filter: none; transform: none !important; } .sidebar nav a { font-size: 0.84rem; } body.role-provider .dashboard-main, body.role-customer .dashboard-main { background: none; } .sidebar-user > span img { animation: none !important; } .welcome h1 { font-size: clamp(1.8rem, 2.8vw, 2.5rem) !important; } .role-badge { border-radius: 6px; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; } .primary-action { min-height: 40px; border-radius: 8px; font-size: 0.84rem; box-shadow: none; } .panel { border-radius: 14px; box-shadow: none; } .stats article { border-radius: 12px; box-shadow: none; } .stats article strong { font-size: 1.7rem; } .dashboard-tool > a, .dashboard-tool > button { min-height: 38px; min-width: 0; border-radius: 8px; font-size: 0.74rem; } .quick-actions a { border-radius: 12px; box-shadow: none; } /* ---------- 7) Umschalt-Leiste (Staff-Vorschau) — schlank ---------- */ .preview-switcher { top: 10px; gap: 5px; padding: 4px 6px; border-radius: 10px; box-shadow: none; } .preview-switcher span { font-size: 0.6rem; } .preview-switcher a { width: auto; min-height: 30px; padding: 0 12px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; box-shadow: none; } @media (min-width: 801px) { .preview-switcher { left: calc(208px + clamp(28px, 4vw, 62px)); } } /* Inhalt (z. B. „Eventplaner-Dashboard“-Badge) rückt unter der Leiste weiter nach unten */ .preview-switcher ~ .welcome, .preview-switcher ~ .admin-header, .preview-switcher ~ .dashboard-inline-page { margin-top: 30px; } /* ---------- 8) Admin-Bereich: identisches Design wie die Dashboards ---------- */ @media (min-width: 801px) { .admin-sidebar { width: 208px; padding: 18px 14px 14px; } .admin-main { margin-left: 208px; padding-top: 88px; } } .admin-sidebar nav a { min-height: 44px; border-radius: 8px; font-size: 0.84rem; font-weight: 600; } .admin-sidebar nav .nav-icon { filter: none; transform: none !important; } /* Admin-Begrüßung exakt wie die Dashboard-Begrüßungen („Hallo djmiai."): gleiche Displayschrift, gleiche Größe, gleiche Laufweite wie .welcome h1 */ .admin-header h1 { font-family: "Arial Black", "Segoe UI Black", sans-serif !important; font-size: clamp(1.8rem, 2.8vw, 2.5rem) !important; line-height: 0.88 !important; letter-spacing: -0.075em !important; } .admin-main h1 { line-height: 1.08; } /* Beschreibungszeile unter der Admin-Begrüßung — wie .role-intro der Dashboards */ .admin-header .role-intro { max-width: 720px; margin: 22px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; } .admin-dashboard-badge { border-radius: 6px; letter-spacing: 0.12em; } .admin-shell .panel, .admin-panel { border-radius: 14px; box-shadow: none; } /* ---------- 9) Logo: kompakt, passt in Kopf- und Seitenleisten ---------- */ :is(.brand-logo, .public-brand, .dashboard-brand, .admin-brand, .account-logo, .login-brand, .topbar > .brand, .qr-brand > a) { width: clamp(118px, 9vw, 146px) !important; } .dashboard-brand, .admin-brand { width: 136px !important; } @media (max-width: 700px) { :is(.brand-logo, .public-brand, .dashboard-brand, .admin-brand, .account-logo, .login-brand, .topbar > .brand, .qr-brand > a) { width: 116px !important; } .dashboard-brand, .admin-brand { width: 126px !important; } } /* ---------- 10) Sprachumschalter: klein, dezent, modern ---------- */ .juhu-language-switch { padding: 2px !important; gap: 2px !important; background: transparent !important; border: 1px solid color-mix(in srgb, #f2f3f5 14%, transparent) !important; border-radius: 8px !important; box-shadow: none !important; } .juhu-language-switch button { width: 64px !important; min-width: 64px !important; height: 26px !important; padding: 0 !important; border-radius: 6px !important; font: 600 0.68rem/1 Inter, "Segoe UI", sans-serif !important; color: #a6a9b3 !important; text-align: center !important; } .juhu-language-switch button.is-active { color: #14151a !important; background: #e9a41f !important; box-shadow: none !important; } .juhu-language-switch.is-floating { top: 12px !important; right: 12px !important; } /* ---------- 11) Laufband direkt an die Kopfleiste anbinden ---------- */ .ticker-top { top: 66px !important; /* 6px Luft zur Kopfleiste */ margin-top: 0 !important; height: 34px !important; min-height: 34px !important; overflow: hidden; padding-block: 0; border-top: 0; border-bottom: 1px solid var(--line); box-shadow: none; } .ticker-set span { height: auto !important; min-height: 0 !important; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; } /* ---------- 12) Profil-Fenster in Fenster-Optik (ohne Adresszeile) ---------- */ .juhu-profile-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; background: rgba(8, 8, 10, 0.72); backdrop-filter: blur(6px); } .juhu-profile-window { position: relative; display: grid; grid-template-rows: 40px 1fr; width: min(1080px, 94vw); height: min(880px, 90vh); min-width: 340px; min-height: 320px; overflow: hidden; resize: both; background: #101114; border: 1px solid color-mix(in srgb, #f2f3f5 14%, transparent); border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65); } .juhu-profile-titlebar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; height: 40px; padding: 0 10px 0 14px; background: #17181c; border-bottom: 1px solid color-mix(in srgb, #f2f3f5 10%, transparent); cursor: move; user-select: none; touch-action: none; } .juhu-profile-dots { display: inline-flex; gap: 6px; } .juhu-profile-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3c42; } .juhu-profile-dots i:first-child { background: color-mix(in srgb, var(--accent) 75%, #3a3c42); } .juhu-profile-titlebar strong { overflow: hidden; color: #d9dadd; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.04em; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .juhu-profile-close { width: 28px; height: 28px; display: grid; place-items: center; color: #f2f3f5; background: transparent; border: 0; border-radius: 7px; font-size: 19px; line-height: 1; cursor: pointer; } .juhu-profile-close:hover { background: #c0392b; } .juhu-profile-window iframe { display: block; width: 100%; height: 100%; border: 0; background: #101114; } /* ---------- 13) Seitenleiste: in allen drei Bereichen identisch ---------- */ .sidebar nav, .admin-sidebar nav { display: grid; gap: 6px; } .sidebar nav a, .admin-sidebar nav a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; min-height: 42px; padding: 0 12px; color: var(--muted, #a6a9b3); background: rgba(255, 255, 255, 0.02); border: 1px solid color-mix(in srgb, #f2f3f5 10%, transparent); border-radius: 8px; font-size: 0.84rem; font-weight: 600; box-shadow: none; } .sidebar nav a:hover, .sidebar nav a.is-active, .admin-sidebar nav a:hover, .admin-sidebar nav a.is-active { color: var(--cream, #f2f3f5); background: rgba(255, 255, 255, 0.05); border-color: color-mix(in srgb, #f2f3f5 24%, transparent); box-shadow: none; } .sidebar nav .nav-icon, .admin-sidebar nav .nav-icon { width: 30px; height: 30px; } /* Bereichs-Label (MEIN BEREICH / ADMINISTRATOR / MODERATOR): dezent und klein */ .dashboard-area-label, .admin-role { min-height: 26px !important; margin: 10px 0 14px !important; padding: 3px 10px !important; color: var(--muted, #a6a9b3) !important; background: transparent !important; border: 1px solid color-mix(in srgb, #f2f3f5 14%, transparent) !important; border-radius: 6px !important; font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; } /* Sprachumschalter: Text exakt zentriert; in der Seitenleiste 50/50 geteilt */ .juhu-language-switch button { display: grid !important; place-items: center !important; line-height: 1 !important; padding-top: 1px !important; /* optischer Ausgleich der Schriftmetrik */ } .sidebar-language .juhu-language-switch { width: 100% !important; } .sidebar-language .juhu-language-switch button { width: 50% !important; min-width: 0 !important; } .ticker-track b { color: var(--accent); } /* ---------- 8) Feinschliff ---------- */ a, button { transition-duration: 0.16s; } ::selection { background: color-mix(in oklch, var(--accent) 35%, transparent); } /* Dezenter, schmaler Scrollbalken (übersteuert Altregeln mit !important) */ html, body { scrollbar-width: thin !important; scrollbar-color: #3a3d45 #131418 !important; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px !important; height: 8px !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #131418 !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: #3a3d45 !important; border: 2px solid #131418 !important; border-radius: 999px !important; }