/* ============================================================ Tikeeto – Design-System Alle Farben als Variablen. Die Markenfarben (--primary, --accent) werden pro Veranstalter aus der Datenbank gesetzt (Inline-Style im -Tag) – diese Datei liefert die Fallbacks. LESBARKEIT: Text immer dunkel auf hellem Grund (WCAG AA). ============================================================ */ :root { /* TIKKETO-STANDARD: edles Schwarz/Gold (wie das Logo). Veranstalter überschreiben --primary/--accent per Admin-Einstellungen (Farbwähler). */ --primary: #000002; /* Markenfarbe Veranstalter (Standard: Tikketo-Schwarz) */ --primary-d: #000002; /* Bänder sind flach – keine Verlaufs-Mischtöne */ --accent: #C9A227; /* Akzent: CTAs, Preise (Standard: Tikketo-Gold) */ --accent-d: #8a6d12; /* dunkler Akzent für Text auf hellem Grund */ --bg: #f6f8f9; /* Seitenhintergrund */ --card: #ffffff; /* Kartenhintergrund */ --line: #dde5e8; /* Trennlinien, Rahmen */ --text: #1c2b33; /* Haupttext – dunkel genug für AA auf --bg und --card */ --text-mid: #4c6672; /* Sekundärtext – AA auf weiß */ --ok: #1a7a40; /* Erfolg / verfügbar */ --ok-bg: #e8f5e9; --warn: #8a5a00; /* Warnung / knapp – dunkel genug auf hellem Grund */ --warn-bg: #fff3d6; --err: #a02020; /* Fehler / ausverkauft */ --err-bg: #fdecec; --radius: 12px; --shadow: 0 2px 10px rgba(16, 42, 53, .08); --tr: .25s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Systemschriften: schnell + DSGVO-sicher. Eigene Webfonts kommen später mit dem Branding – dann NUR lokal gehostet (kein Google-CDN). */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } .wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; } /* ---------- Kopfbereich ---------- */ /* Hero-Bild: steht ALLEIN, ohne Überblendung – volle Leuchtkraft. DESIGNREGEL: Das Bild wird NIE beschnitten (keine abgeschnittenen Köpfe!). Es erscheint komplett im Inhaltsrahmen, wie ein Plakat. */ .hero-image { max-width: 760px; margin: 16px auto 0; padding: 0 16px; line-height: 0; } .hero-image img { width: 100%; height: auto; /* volles Seitenverhältnis, kein Zuschnitt */ display: block; border-radius: 14px; box-shadow: 0 4px 18px rgba(16, 42, 53, .18); } .event-hero { background: var(--primary); /* flach: passt zu JEDER Veranstalterfarbe */ color: #ffffff; /* heller Text NUR auf dunklem Grund */ padding: 40px 0 32px; } .event-hero.has-image { padding: 26px 0 26px; /* kompakter, wenn das Bild darüber wirkt */ } .event-hero .veranstalter { font-size: .82rem; letter-spacing: 2.5px; text-transform: uppercase; opacity: .92; margin-bottom: 8px; } .event-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.2; } .event-meta { margin-top: 14px; display: grid; gap: 4px; font-size: .98rem; } .event-meta span { opacity: .95; } .event-desc { margin-top: 14px; max-width: 60ch; font-size: .98rem; opacity: .95; } /* ---------- Abschnitte ---------- */ .section { padding: 28px 0 8px; } .section h2 { font-size: 1.25rem; color: var(--primary); margin-bottom: 4px; } .section .hint { color: var(--text-mid); font-size: .9rem; margin-bottom: 14px; } /* ---------- Ticket-/Addon-Karten ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 12px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .card .info { flex: 1 1 260px; min-width: 0; } .card .name { font-weight: 700; font-size: 1.05rem; } .card .desc { color: var(--text-mid); font-size: .9rem; margin-top: 2px; } .card .price-line { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .card .price { font-size: 1.25rem; font-weight: 800; color: var(--primary); } .card .price-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ok); background: var(--ok-bg); padding: 2px 8px; border-radius: 4px; } .badge-low { font-size: .78rem; font-weight: 700; color: var(--warn); background: var(--warn-bg); padding: 2px 8px; border-radius: 4px; } .badge-soldout { font-size: .78rem; font-weight: 700; color: var(--err); background: var(--err-bg); padding: 2px 8px; border-radius: 4px; } /* ---------- Mengen-Stepper ---------- */ .stepper { display: flex; align-items: center; gap: 0; flex: 0 0 auto; } .stepper button { width: 42px; height: 42px; font-size: 1.3rem; font-weight: 700; border: 1px solid var(--line); background: var(--card); color: var(--primary); cursor: pointer; transition: background var(--tr); } .stepper button:hover:not(:disabled) { background: var(--bg); } .stepper button:disabled { color: #b9c6cc; cursor: not-allowed; } .stepper button:first-child { border-radius: 8px 0 0 8px; } .stepper button:last-child { border-radius: 0 8px 8px 0; } .stepper .qty { width: 52px; height: 42px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 1.05rem; background: var(--card); } /* ---------- Warenkorb-Leiste (unten, immer sichtbar) ---------- */ .cartbar { position: sticky; bottom: 0; z-index: 50; background: var(--card); border-top: 2px solid var(--line); box-shadow: 0 -4px 16px rgba(16,42,53,.10); padding: 14px 0; } .cartbar .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cartbar .sum-label { color: var(--text-mid); font-size: .85rem; } .cartbar .sum { font-size: 1.45rem; font-weight: 800; color: var(--text); } .cartbar .count { color: var(--text-mid); font-size: .85rem; } .btn-primary { background: var(--accent); color: #241a02; /* dunkler Text auf Gold: lesbar */ border: none; border-radius: 10px; font-size: 1.02rem; font-weight: 800; padding: 14px 28px; cursor: pointer; transition: filter var(--tr), transform var(--tr); } .btn-primary:hover:not(:disabled) { filter: brightness(.95); } .btn-primary:disabled { background: #e2e8ea; color: #8fa2aa; cursor: not-allowed; } /* ---------- Fußzeile ---------- */ .footer { padding: 26px 0 40px; color: var(--text-mid); font-size: .84rem; } .footer a { color: var(--text-mid); } @media (max-width: 540px) { .card { padding: 14px; } .cartbar .inner { justify-content: center; text-align: center; } }