/* Hell ist der Standard beim allerersten Besuch. Unter "Profil" laesst sich zwischen Hell / Dunkel / System umschalten - siehe static/js/theme.js. Die Wahl wird im Browser gespeichert und als data-theme am -Element gesetzt; "System" respektiert zusaetzlich die Betriebssystem-Einstellung. */ :root { --accent: #3b6fe8; /* Blau, angelehnt an business-building-factory.de */ --cta: #ff9900; /* Amazon-Orange fuer Call-to-Action-Buttons */ --bg: #f4f6fb; --card-bg: #ffffff; --card-border: #e2e6f0; --surface-2: #eef1fa; --input-bg: #f7f8fc; --text: #10142a; --text-muted: #5b6478; --countdown-bg: #dbe3fb; } :root[data-theme="dark"] { --bg: #050d2b; --card-bg: #0b1638; --card-border: #1a2540; --surface-2: #23213a; --input-bg: #0f0f12; --text: #f5f5f7; --text-muted: #99a3c2; --countdown-bg: #1e2c5c; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --bg: #050d2b; --card-bg: #0b1638; --card-border: #1a2540; --surface-2: #23213a; --input-bg: #0f0f12; --text: #f5f5f7; --text-muted: #99a3c2; --countdown-bg: #1e2c5c; } } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } a { color: inherit; text-decoration: none; } .center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 32px; width: 100%; max-width: 420px; } .card h1 { font-size: 22px; margin: 0 0 12px; } .muted { color: var(--text-muted); font-size: 14px; line-height: 1.5; } label { display: block; font-size: 13px; font-weight: 600; margin: 20px 0 8px; } input[type="email"], input[type="text"], input[type="number"], textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--card-border); color: var(--text); border-radius: 12px; padding: 12px 16px; font-size: 15px; } textarea { min-height: 90px; resize: vertical; } button, .btn { display: inline-block; background: var(--cta); color: #1a1200; border: none; border-radius: 999px; padding: 13px 20px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; text-align: center; margin-top: 20px; } .btn-secondary { background: transparent; border: 1px solid var(--card-border); color: var(--text); } .btn-small { width: auto; padding: 8px 14px; font-size: 13px; margin-top: 0; } .footer-links { text-align: center; margin-top: 24px; font-size: 12px; color: var(--text-muted); } .flash { background: var(--surface-2); border: 1px solid var(--accent); color: var(--text); padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; } /* App shell Grid statt absoluter Ueberlagerung: die mittlere Spalte traegt das Logo, die aeussere Spalte den Countdown - die Zeilenhoehe richtet sich dadurch automatisch nach dem hoechsten Element, nichts wird mehr abgeschnitten. */ .app-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--card-border); } .app-header .logo { grid-column: 1; justify-self: start; } .app-header .header-side { grid-column: 3; justify-self: end; } .app-header .header-side.left { grid-column: 1; justify-self: start; } .logo { font-weight: 800; font-size: 20px; } .logo span { color: var(--accent); } /* Firmenlogo oben links: helle/dunkle Version je nach Theme, siehe theme.js */ .logo-img { display: block; height: 36px; width: auto; } .logo-img-light { display: none; } :root[data-theme="dark"] .logo-img-dark { display: none; } :root[data-theme="dark"] .logo-img-light { display: block; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .logo-img-dark { display: none; } :root[data-theme="system"] .logo-img-light { display: block; } } .countdown-label { font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); text-align: center; margin-bottom: 6px; } .countdown { display: flex; gap: 6px; } .countdown .box { background: var(--countdown-bg); color: var(--accent); border-radius: 8px; padding: 6px 8px; font-weight: 700; font-size: 13px; line-height: 1.3; min-width: 28px; text-align: center; } .countdown .unit { font-size: 9px; color: var(--text-muted); text-align: center; margin-top: 2px; } /* Ab 3 Tagen vor Ablauf werden die Zahlen rot (Dringlichkeit), siehe Countdown-Script in base.html. */ .countdown.countdown-urgent .box { color: #e03131; } .app-body { max-width: 900px; margin: 0 auto; padding: 24px 24px 100px; } .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 14px; margin-bottom: 16px; } .progress-bar-track { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; margin: 16px 0; } .progress-bar-fill { background: var(--accent); height: 100%; } .search-box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 16px; color: var(--text-muted); margin-bottom: 20px; } .course-cover { border-radius: 16px; padding: 24px; min-height: 160px; display: flex; align-items: flex-end; background: linear-gradient(160deg, var(--from, #a855f7), var(--to, #1e1b2e)); margin-bottom: 12px; } .course-cover h3 { margin: 0; font-size: 22px; } .lesson-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; } .lesson-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; cursor: pointer; list-style: none; } .lesson-row::-webkit-details-marker { display: none; } .lesson-panel { padding: 0 14px 16px; } .video-embed-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; /* Kein border-radius/overflow:hidden hier auf dem Container - iOS Safari blendet dann die eigenen Video-Bedienelemente (Play/Lautstaerke/ Vollbild) komplett aus, wenn ein