@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&family=Dancing+Script:wght@600&display=swap'); /* ============================================ MOBILE-APP-SHELL (für native-app-feel) Wird via aktiviert. ============================================ */ .app-shell { margin: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--creme); position: relative; } /* Grain-Textur — wie auf der Homepage */ .app-shell::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: 0.032; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 256px 256px; } /* Atmosphärischer Orb — warmes Licht oben rechts */ .app-shell::before { content: ''; position: fixed; top: -60px; right: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(196,168,130,0.14) 0%, transparent 65%); filter: blur(40px); pointer-events: none; z-index: 0; } /* Zweiter Orb — Salbei unten links */ .app-content::after { content: ''; position: fixed; bottom: 60px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(138,158,136,0.08) 0%, transparent 65%); filter: blur(50px); pointer-events: none; z-index: 0; } /* Sidebar wird in der App komplett versteckt (App nutzt Bottom-Nav). */ .app-shell .sidebar, .app-shell #dashboard-menu-toggle, .app-shell #content-menu-toggle, .app-shell #admin-menu-toggle { display: none !important; } /* Erzwinge volle Breite fürs Hauptcontent (kein Sidebar-Margin). */ .app-shell .main-content, .app-shell .admin-main-content { margin-left: 0 !important; padding: 0 !important; } /* TOP-BAR (klebt oben) */ .app-topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: max(env(safe-area-inset-top), 0.85rem) 1.25rem 0.85rem; background: rgba(250, 246, 238, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(232,220,200,0.6); } .topbar-greet { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .topbar-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); font-weight: 500; } .topbar-name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--text-dark); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { display: flex; align-items: center; gap: 0.55rem; } .topbar-iconbtn { width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 1px solid var(--beige); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; position: relative; transition: transform 0.2s, background 0.2s; } .topbar-iconbtn:active { transform: scale(0.92); background: var(--creme-dark); } .topbar-iconbtn .badge-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--dusty-rose); border: 2px solid var(--white); } .topbar-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--beige), var(--sand)); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--white); font-weight: 500; cursor: pointer; border: 2px solid var(--white); box-shadow: 0 2px 8px var(--shadow); text-decoration: none; flex-shrink: 0; } /* SCROLL-BEREICH */ .app-content { flex: 1; width: 100%; padding: 1.1rem 1.25rem calc(7rem + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; position: relative; z-index: 1; } /* BOTTOM-NAV — text-only, elegant */ .app-bottomnav { position: fixed; top: auto !important; bottom: 0; left: 0; right: 0; height: auto; z-index: 60; display: flex; background: rgba(255, 253, 248, 0.96); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-top: 1px solid rgba(208,192,168,0.5); border-bottom: none !important; padding: 0.6rem 0.5rem calc(0.6rem + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 rgba(208,192,168,0.3); align-items: stretch; justify-content: space-around; } /* Globale nav-Regeln überschreiben (von der Landing) */ .app-shell nav.app-bottomnav { /* alles bereits oben gesetzt — diese Regel sorgt für höhere Spezifität */ } /* Emoji-Icons ausblenden — nur Text-Labels */ .bottomnav-icon { display: none !important; } .bottomnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.35rem 0.25rem; text-decoration: none; color: var(--beige-mid); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; transition: color 0.2s; position: relative; -webkit-tap-highlight-color: transparent; } .bottomnav-label { font-size: 0.64rem; letter-spacing: 0.14em; } .bottomnav-item:active { opacity: 0.6; } .bottomnav-item.active { color: var(--terra); } .bottomnav-item.active::before { content: ''; position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background: var(--terra); } /* App-spezifische Section/Card-Regeln (überschreibt globale section padding) */ .app-shell section { padding: 0 !important; } .app-card { background: var(--white); border-radius: 14px; padding: 1.4rem; border: 1px solid var(--beige); box-shadow: 0 4px 18px var(--shadow); margin-bottom: 1rem; position: relative; overflow: hidden; } .app-section-title { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--beige-mid); font-weight: 400; margin: 1.6rem 0 0.85rem; padding-left: 0; display: flex; align-items: center; gap: 0.7rem; } .app-section-title::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--beige-mid); flex-shrink: 0; } /* PULL-Indikator (visuell beim Top des Content-Bereichs) */ .app-content::before { content: ''; display: block; width: 36px; height: 4px; background: var(--beige-mid); border-radius: 50px; margin: 0 auto 0.5rem; opacity: 0.5; } /* ===== DASHBOARD-COMPONENTEN (mobile) ===== */ .today-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-light); margin-bottom: 1rem; padding-left: 0.25rem; flex-wrap: wrap; } .today-sep { opacity: 0.5; } .today-moon { display: inline-flex; align-items: center; gap: 0.3rem; } .moon-mini { display: inline-block; font-size: 1rem; } /* TAGESIMPULS HERO-CARD — wie Homepage Quote-Section */ .impulse-card { position: relative; background: linear-gradient(160deg, var(--beige) 0%, #F2E5CF 55%, #EDD9BE 100%); border-radius: 24px; padding: 2rem 1.5rem 1.6rem; color: var(--earth); overflow: hidden; margin-bottom: 1.2rem; box-shadow: var(--shadow-mid); border: 1px solid rgba(196,168,130,0.3); isolation: isolate; } .impulse-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .impulse-orb { position: absolute; border-radius: 50%; filter: blur(50px); } /* Orb 1 — warmes Gold oben links */ .impulse-orb-1 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(196,168,130,0.18) 0%, transparent 65%); top: -70px; left: -60px; animation: orbDrift1 16s ease-in-out infinite; } /* Orb 2 — Salbei unten rechts */ .impulse-orb-2 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(138,158,136,0.12) 0%, transparent 65%); bottom: -50px; right: -50px; animation: orbDrift2 20s ease-in-out infinite; } @keyframes orbDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, 25px) scale(1.12); } } @keyframes orbDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-25px, -15px) scale(1.1); } } .impulse-card > *:not(.impulse-bg) { position: relative; z-index: 1; } .impulse-label { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); margin-bottom: 1rem; font-weight: 400; } /* Quote — wie Homepage main-quote */ .impulse-quote { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-style: italic; line-height: 1.45; font-weight: 400; color: var(--warm-brown); margin-bottom: 1rem; text-shadow: none; } /* Anruf — kleiner Öffner über dem Hauptzitat */ .impulse-anruf { font-family: 'Jost', sans-serif; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); margin-bottom: 0.85rem; font-weight: 400; opacity: 0; } /* Mondimpuls — mittlere Ebene */ .impulse-moon-text { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; line-height: 1.6; color: rgba(93, 70, 46, 0.82); margin: 0 0 0.85rem; font-style: normal; opacity: 0; } /* Trennlinie */ .impulse-divider { font-size: 0.75rem; color: var(--sand); letter-spacing: 0.2em; margin: 0.5rem 0 0.85rem; text-align: center; opacity: 0; } /* Einladung — abschließender Impuls */ .impulse-invitation { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-style: italic; color: var(--warm-brown); margin-bottom: 1rem; padding-top: 0.4rem; border-top: 1px solid rgba(139,111,78,0.15); opacity: 0; } .impulse-author { font-size: 0.78rem; color: var(--sand); margin-bottom: 1.2rem; letter-spacing: 0.06em; } .impulse-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* Mond-Reflexion */ .moon-reflection { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 1.75rem 1.5rem; margin: 1.5rem 1rem; text-align: center; color: rgba(255,255,255,0.92); } .moon-reflection-icon { font-size: 1.8rem; margin-bottom: 0.5rem; color: rgba(232,201,124,0.95); } .moon-reflection-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 500; margin: 0 0 0.6rem; color: rgba(255,255,255,0.95); } .moon-reflection-text { font-size: 0.92rem; line-height: 1.65; margin: 0 0 1.25rem; color: rgba(255,255,255,0.75); font-style: italic; } .moon-reflection-btn { display: inline-block; background: rgba(232,201,124,0.18); border: 1px solid rgba(232,201,124,0.35); color: rgba(232,201,124,1); text-decoration: none; padding: 0.7rem 1.5rem; border-radius: 50px; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; transition: background 0.2s; } .moon-reflection-btn:hover { background: rgba(232,201,124,0.3); } /* Profil-Motivationsbox */ .profile-motivation { background: linear-gradient(135deg, var(--creme,#FAF6EE), var(--beige,#EDE0CC)); border: 1px solid rgba(196,168,130,0.25); border-radius: 18px; padding: 1.5rem 1.4rem; margin: 1rem; text-align: center; } .profile-motivation-icon { font-size: 1.6rem; margin-bottom: 0.5rem; } .profile-motivation-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--warm-brown, #3D2C1E); margin: 0 0 0.5rem; } .profile-motivation-text { font-size: 0.9rem; color: var(--text-mid, #6B5A47); line-height: 1.6; margin: 0; font-style: italic; } .impulse-action-primary { background: var(--terra, #8B5E3C) !important; color: #fff !important; border: none !important; text-decoration: none; font-weight: 600; } .impulse-action-primary:hover { background: var(--gold, #C9A96E) !important; } .impulse-action { background: rgba(139,111,78,0.10); border: 1px solid rgba(139,111,78,0.22); color: var(--warm-brown); padding: 0.6rem 1.2rem; border-radius: 50px; font-family: 'Jost', sans-serif; font-size: 0.76rem; letter-spacing: 0.06em; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s, transform 0.1s; -webkit-tap-highlight-color: transparent; } .impulse-action:active { transform: scale(0.96); background: rgba(139,111,78,0.18); } /* QUICK-ROW Tiles */ .quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1.2rem; } .quick-tile { background: var(--white); border-radius: 18px; border: 1px solid var(--beige); padding: 0.85rem 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-decoration: none; color: var(--text-mid); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s, border-color 0.2s; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } .quick-tile:active { transform: scale(0.94); box-shadow: 0 2px 8px var(--shadow); } .quick-tile-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 0.2rem; filter: drop-shadow(0 2px 4px var(--shadow)); } .quick-tile-label { font-size: 0.72rem; font-weight: 500; color: var(--text-dark); letter-spacing: 0.02em; } .quick-tile-sub { font-size: 0.62rem; color: var(--text-light); letter-spacing: 0.04em; } .quick-tile-breath { background: linear-gradient(160deg, #F5F8F4 0%, #ECF2E9 100%); border-color: rgba(138,158,136,0.18); } .quick-tile-med { background: linear-gradient(160deg, #F8F5FB 0%, #F0EAF7 100%); border-color: rgba(176,160,210,0.18); } .quick-tile-reiki { background: linear-gradient(160deg, #FAF6EC 0%, #F2EADA 100%); border-color: rgba(196,168,130,0.18); } .quick-tile-moon { background: linear-gradient(160deg, #F5F5F9 0%, #EDEAF5 100%); border-color: rgba(176,174,215,0.18); } /* BREATH-MINI Card */ .breath-mini { display: flex; align-items: center; gap: 0.85rem; background: var(--white); border-radius: 12px; border: 1px solid var(--beige); padding: 0.8rem 1rem 0.8rem 0.8rem; margin-bottom: 1rem; box-shadow: 0 4px 16px var(--shadow); } .breath-mini-visual { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, var(--sage-light) 0%, var(--sage) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; box-shadow: 0 2px 12px rgba(143,175,138,0.3); } .breath-mini-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--white); animation: breatheMini 4s ease-in-out infinite; } @keyframes breatheMini { 0%, 100% { transform: scale(0.7); opacity: 0.85; } 50% { transform: scale(1.1); opacity: 1; } } .breath-mini-text { flex: 1; min-width: 0; } .breath-mini-title { font-size: 0.95rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.1rem; } .breath-mini-sub { font-size: 0.78rem; color: var(--text-light); } .breath-mini-play { width: 40px; height: 40px; border-radius: 50%; background: var(--terra); color: var(--white); border: none; font-size: 0.95rem; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding-left: 3px; /* visuelle Mitte für ▶ */ box-shadow: 0 2px 12px rgba(156,123,86,0.4); transition: transform 0.1s; -webkit-tap-highlight-color: transparent; } .breath-mini-play:active { transform: scale(0.92); } /* CONTINUE-CARD */ .continue-card { display: flex; align-items: center; gap: 0.85rem; background: var(--white); border-radius: 12px; border: 1px solid var(--beige); padding: 0.85rem; text-decoration: none; color: var(--text-dark); margin-bottom: 1rem; box-shadow: 0 4px 16px var(--shadow); transition: transform 0.15s; -webkit-tap-highlight-color: transparent; } .continue-card:active { transform: scale(0.98); } .continue-thumb { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; flex-shrink: 0; box-shadow: 0 2px 10px var(--shadow); } .continue-info { flex: 1; min-width: 0; } .continue-title { font-size: 0.92rem; font-weight: 500; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .continue-sub { font-size: 0.74rem; color: var(--text-light); margin-bottom: 0.5rem; } .continue-progress { height: 4px; background: var(--beige); border-radius: 50px; overflow: hidden; margin-bottom: 0.3rem; } .continue-progress-fill { height: 100%; background: linear-gradient(90deg, var(--terra), var(--gold)); border-radius: 50px; transition: width 1s ease; } .continue-pct { font-size: 0.7rem; color: var(--terra); font-weight: 500; letter-spacing: 0.04em; } /* PROGRESS-LIST */ .progress-list { background: var(--white); border-radius: 20px; border: 1px solid var(--beige); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1rem; } .progress-item:not(:last-child) { padding-bottom: 0.85rem; border-bottom: 1px solid var(--creme-dark); } .progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; } .progress-name { font-size: 0.86rem; font-weight: 500; color: var(--text-dark); } .progress-pct { font-size: 0.74rem; color: var(--terra); font-weight: 500; letter-spacing: 0.04em; } .progress-pct.done { color: var(--sage); } /* MOON-CARD */ .moon-card { position: relative; display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, #18122A 0%, #241530 55%, #1A0E22 100%); border-radius: 24px; padding: 1.2rem; text-decoration: none; color: rgba(255,245,235,0.92); margin-bottom: 1rem; overflow: hidden; box-shadow: 0 12px 40px rgba(20,12,36,0.45), inset 0 1px 0 rgba(255,220,180,0.06); -webkit-tap-highlight-color: transparent; } .moon-card-stars { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 15% 25%, rgba(255,240,210,0.45), transparent), radial-gradient(1px 1px at 55% 65%, rgba(200,180,255,0.30), transparent), radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,240,210,0.40), transparent), radial-gradient(1px 1px at 35% 78%, rgba(200,180,255,0.25), transparent), radial-gradient(1px 1px at 68% 42%, rgba(255,240,210,0.35), transparent), radial-gradient(1px 1px at 88% 60%, rgba(200,180,255,0.28), transparent), radial-gradient(1px 1px at 10% 75%, rgba(255,240,210,0.20), transparent); pointer-events: none; animation: moonStarTwinkle 8s ease-in-out infinite alternate; } @keyframes moonStarTwinkle { 0% { opacity: 0.6; } 100% { opacity: 1; } } .moon-card-orb { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #D4C9F0 0%, #8C7AB8 70%, transparent 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 30px rgba(140,122,184,0.5); position: relative; z-index: 1; } .moon-card-orb .moon-emoji { font-size: 1.8rem; } .moon-card-text { flex: 1; min-width: 0; position: relative; z-index: 1; } .moon-card-phase { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; margin-bottom: 0.2rem; } .moon-card-energy { font-size: 0.78rem; opacity: 0.75; margin-bottom: 0.15rem; } .moon-card-meta { font-size: 0.7rem; opacity: 0.55; letter-spacing: 0.04em; } .moon-card-arrow { font-size: 1.5rem; opacity: 0.5; position: relative; z-index: 1; } /* STREAK-BADGE */ .streak-badge { display: flex; align-items: center; gap: 0.85rem; background: linear-gradient(135deg, #FFEFD5, #FFE0B5); border-radius: 12px; padding: 0.9rem 1.1rem; border: 1px solid #FFD89A; box-shadow: 0 4px 16px rgba(255, 200, 100, 0.2); margin-bottom: 1rem; } .streak-flame { font-size: 1.8rem; filter: drop-shadow(0 2px 6px rgba(255, 120, 50, 0.4)); animation: flameDance 1.5s ease-in-out infinite alternate; } @keyframes flameDance { 0% { transform: rotate(-3deg) scale(1); } 100% { transform: rotate(3deg) scale(1.05); } } .streak-info { flex: 1; } .streak-num { font-size: 0.95rem; font-weight: 500; color: #8a5a1a; margin-bottom: 0.1rem; } .streak-num span { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; } .streak-sub { font-size: 0.76rem; color: #a07840; } /* ===== CONTENT-PAGE (mobile) ===== */ /* Suchleiste */ .search-row { display: flex; align-items: center; gap: 0.6rem; background: var(--white); border: 1px solid var(--beige); border-radius: 50px; padding: 0.55rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 2px 12px var(--shadow); } .search-row-icon { color: var(--text-light); font-size: 0.95rem; flex-shrink: 0; } .search-row-input { flex: 1; border: none; background: transparent; outline: none; font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--text-dark); padding: 0.3rem 0; min-width: 0; } .search-row-input::placeholder { color: var(--text-light); } /* Filter-Chips Reihe */ .chip-row { display: flex; gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1.25rem 1.2rem; padding: 0 1.25rem; scroll-padding: 0 1.25rem; scrollbar-width: none; } .chip-row::-webkit-scrollbar { display: none; } .chip { background: var(--white); border: 1px solid var(--beige); border-radius: 50px; padding: 0.55rem 1.1rem; font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; color: var(--text-mid); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: transform 0.15s, background 0.2s, color 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; } .chip:active { transform: scale(0.95); } .chip.active { background: var(--terra); border-color: var(--terra); color: var(--white); box-shadow: 0 4px 14px rgba(156,123,86,0.3); } /* Upgrade-Banner mobile */ .upgrade-banner { display: flex; align-items: center; gap: 0.85rem; background: linear-gradient(135deg, var(--gold-light) 0%, #F5E0A8 100%); border: 1px solid #E8C97C; border-radius: 18px; padding: 0.85rem 1rem; text-decoration: none; color: #6B4F1A; margin-bottom: 1.2rem; box-shadow: 0 4px 18px rgba(201,168,76,0.2); -webkit-tap-highlight-color: transparent; } .upgrade-icon { font-size: 1.6rem; filter: drop-shadow(0 2px 4px rgba(201,168,76,0.5)); } .upgrade-text { flex: 1; min-width: 0; } .upgrade-title { font-size: 0.92rem; font-weight: 500; margin-bottom: 0.15rem; } .upgrade-sub { font-size: 0.74rem; opacity: 0.75; } .upgrade-arrow { font-size: 1.4rem; opacity: 0.5; } /* Content-Section Header */ .app-shell .content-section { margin-bottom: 1.5rem; } .app-shell .section-title { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--beige-mid); font-weight: 400; margin-bottom: 0.85rem; padding-left: 0; display: flex; align-items: center; gap: 0.6rem; } .app-shell .section-title::before { content: ''; display: inline-block; width: 16px; height: 1px; background: var(--beige-mid); flex-shrink: 0; } /* Content-Cards (mobile horizontal layout) */ .app-shell .content-grid { display: flex; flex-direction: column; gap: 0.85rem; } .app-shell .content-card { display: grid; grid-template-columns: 88px 1fr; gap: 0; background: var(--white); border-radius: 12px; border: 1px solid var(--beige); overflow: hidden; box-shadow: 0 4px 16px var(--shadow); cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .app-shell .content-card:active { transform: scale(0.985); } .app-shell .content-card.locked { opacity: 0.6; } .app-shell .content-thumb { width: 88px; height: 100%; min-height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; flex-shrink: 0; position: relative; } .app-shell .content-body { padding: 0.85rem 1rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .app-shell .content-body > div:first-child { display: flex; gap: 0.35rem; margin-bottom: 0.4rem; } .app-shell .content-body h3 { font-size: 0.92rem; font-weight: 400; font-family: 'Jost', sans-serif; color: var(--text-dark); margin-bottom: 0.25rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .app-shell .content-body p { font-size: 0.76rem; color: var(--text-light); line-height: 1.45; margin-bottom: 0.45rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .app-shell .content-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .app-shell .content-duration { font-size: 0.72rem; color: var(--text-light); letter-spacing: 0.02em; } .app-shell .play-btn, .app-shell .lock-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--terra); color: var(--white); font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding-left: 2px; box-shadow: 0 2px 8px rgba(156,123,86,0.4); transition: transform 0.1s; -webkit-tap-highlight-color: transparent; } .app-shell .play-btn:active { transform: scale(0.9); } .app-shell .lock-btn { background: var(--beige-mid); color: var(--text-mid); padding-left: 0; box-shadow: none; } .app-shell .lock-overlay { position: absolute; inset: 0; background: rgba(250,246,238,0.65); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; backdrop-filter: blur(2px); } .app-shell .badge, .app-shell .tag { font-size: 0.62rem; padding: 0.15rem 0.55rem; letter-spacing: 0.04em; } /* Leerer Zustand */ .content-empty { text-align: center; padding: 3rem 1rem; } .content-empty-icon { font-size: 3rem; margin-bottom: 0.85rem; opacity: 0.6; } .content-empty-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; margin-bottom: 0.35rem; color: var(--text-dark); } .content-empty-sub { font-size: 0.85rem; color: var(--text-light); } /* ===== MOND-SEITE (dunkler Stil) ===== */ .app-shell-dark { background: #1F1825; color: #E8E4F0; } .app-shell-dark::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 20% 10%, rgba(140,122,184,0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(201,168,76,0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(60,40,80,0.4) 0%, transparent 70%); pointer-events: none; z-index: 0; } .app-shell-dark .app-content { position: relative; z-index: 1; } .topbar-on-dark { background: rgba(31, 24, 37, 0.7) !important; border-bottom-color: rgba(255,255,255,0.08) !important; } .topbar-on-dark .topbar-label { color: #C9B8E8; } .topbar-on-dark .topbar-name { color: #FAF6EE; } .topbar-on-dark .topbar-iconbtn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #FAF6EE; } /* Bottom-Nav auf dunklem Hintergrund anpassen */ .app-shell-dark .app-bottomnav { background: rgba(31, 24, 37, 0.85); border-top-color: rgba(255,255,255,0.08); } .app-shell-dark .bottomnav-item { color: rgba(255,255,255,0.45); } .app-shell-dark .bottomnav-item.active { color: #E8C97C; } .app-shell-dark .bottomnav-item.active::before { background: #E8C97C; } .app-shell-dark .app-content::before { background: rgba(255,255,255,0.15); } .app-shell-dark .app-section-title.light { color: rgba(255,255,255,0.55); } /* Mond-Hero */ .moon-hero { position: relative; text-align: center; padding: 1.5rem 0 2.5rem; margin-bottom: 1rem; } .moon-hero-stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.7), transparent), radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,0.5), transparent), radial-gradient(2px 2px at 30% 70%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 65% 80%, rgba(255,255,255,0.4), transparent), radial-gradient(1.5px 1.5px at 50% 15%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 20% 50%, rgba(255,255,255,0.5), transparent); pointer-events: none; animation: moonStarTwinkle 5s ease-in-out infinite alternate; } .moon-hero-orb-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto 1.5rem; } .moon-hero-orb { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #F5EFE0 0%, #DCD0B0 35%, #B8A582 65%, #6B5A38 100%); position: relative; overflow: hidden; box-shadow: 0 0 60px rgba(201,168,76,0.3), inset -20px -20px 40px rgba(31,24,37,0.4); animation: moonFloat 8s ease-in-out infinite; } @keyframes moonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Mondschatten — wird per JS auf aktuelle Phase angepasst */ .moon-shadow { position: absolute; top: 0; right: -50%; width: 200%; height: 100%; background: rgba(31,24,37,0.92); border-radius: 50%; transition: right 1s ease; } .moon-glow { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.25) 0%, transparent 60%); pointer-events: none; z-index: -1; animation: glowPulse 5s ease-in-out infinite; } .moon-hero-text { position: relative; z-index: 1; } .moon-hero-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #C9B8E8; margin-bottom: 0.4rem; } .moon-hero-phase { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 400; color: #FAF6EE; margin-bottom: 0.4rem; } .moon-hero-meta { font-size: 0.85rem; color: rgba(255,255,255,0.65); display: flex; justify-content: center; align-items: center; gap: 0.4rem; } .moon-sep { opacity: 0.4; } .moon-hero-energy { margin-top: 1.5rem; position: relative; z-index: 1; } .energy-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.6rem; } .energy-words { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } .energy-word { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 50px; padding: 0.4rem 0.85rem; font-size: 0.78rem; color: #FAF6EE; backdrop-filter: blur(6px); } /* Mond-Tipps */ .moon-tips { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1rem; } .moon-tip-card { display: flex; align-items: center; gap: 0.85rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 0.85rem 1rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .moon-tip-icon { font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .moon-tip-text { flex: 1; min-width: 0; } .moon-tip-title { font-size: 0.92rem; font-weight: 500; color: #FAF6EE; margin-bottom: 0.15rem; } .moon-tip-sub { font-size: 0.76rem; color: rgba(255,255,255,0.6); line-height: 1.5; } /* Kommende Phasen — horizontale Liste */ .moon-upcoming { display: flex; gap: 0.65rem; overflow-x: auto; margin: 0 -1.25rem 1.5rem; padding: 0 1.25rem 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .moon-upcoming::-webkit-scrollbar { display: none; } .moon-upcoming-item { flex-shrink: 0; width: 110px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 0.9rem 0.6rem; text-align: center; backdrop-filter: blur(8px); } .moon-upcoming-emoji { font-size: 1.8rem; margin-bottom: 0.4rem; line-height: 1; } .moon-upcoming-name { font-size: 0.74rem; font-weight: 500; color: #FAF6EE; margin-bottom: 0.2rem; line-height: 1.3; } .moon-upcoming-date { font-size: 0.66rem; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; } /* ===== Mondkalender-Sheet ===== */ .moon-cal-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; font-size: 0.72rem; color: var(--text-mid); margin-bottom: 1.1rem; line-height: 1.5; } .moon-cal-legend small { font-size: 0.68rem; } .moon-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; } .moon-cal-dow { text-align: center; font-size: 0.68rem; letter-spacing: .06em; color: var(--text-mid); font-weight: 500; padding-bottom: .35rem; } .moon-cal-day { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: .35rem .2rem; border-radius: 8px; cursor: default; transition: background .15s; } .moon-cal-day:hover { background: var(--creme-dark); } .moon-cal-day.today { background: rgba(156,123,86,0.15); outline: 1.5px solid var(--terra); } .moon-cal-num { font-size: 0.78rem; color: var(--text-dark); font-weight: 500; } .moon-cal-emoji { font-size: 1.05rem; } .moon-cal-day.today .moon-cal-num { color: var(--terra); font-weight: 700; } /* Vollmond-Countdown */ .moon-countdown { background: linear-gradient(135deg, rgba(201,168,76,0.2) 0%, rgba(140,122,184,0.18) 100%); border: 1px solid rgba(201,168,76,0.3); border-radius: 24px; padding: 1.4rem; text-align: center; margin-bottom: 1.5rem; backdrop-filter: blur(10px); } .moon-countdown-label { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: #E8C97C; margin-bottom: 0.4rem; } .moon-countdown-num { font-family: 'Cormorant Garamond', serif; font-size: 4rem; font-weight: 600; color: #FAF6EE; line-height: 1; margin-bottom: 0.3rem; } .moon-countdown-unit { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: 1rem; } .moon-countdown-cta { display: inline-block; color: #E8C97C; text-decoration: none; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.4rem 0; border-bottom: 1px solid rgba(232,201,124,0.4); } /* Mond-Ritual-Card */ .moon-ritual-card { display: flex; align-items: center; gap: 0.85rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 0.85rem; text-decoration: none; color: #FAF6EE; backdrop-filter: blur(8px); margin-bottom: 1rem; -webkit-tap-highlight-color: transparent; } .moon-ritual-thumb { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #4a3868, #2A1F3A); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; } .moon-ritual-info { flex: 1; min-width: 0; } .moon-ritual-title { font-size: 0.92rem; font-weight: 500; margin-bottom: 0.2rem; } .moon-ritual-sub { font-size: 0.74rem; color: rgba(255,255,255,0.6); } .moon-ritual-arrow { font-size: 1.4rem; color: rgba(255,255,255,0.4); } /* ===== PROFIL-SEITE ===== */ .profile-hero { text-align: center; padding: 1rem 0 1.5rem; } .profile-avatar-wrap { position: relative; display: inline-block; margin-bottom: 1rem; } .profile-avatar { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, var(--beige), var(--sand) 60%, var(--terra) 120%); color: var(--white); font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 3px solid var(--white); box-shadow: 0 8px 28px rgba(156,123,86,0.35); } .profile-avatar-edit { position: absolute; bottom: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--terra); color: var(--white); border: 2px solid var(--white); font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .profile-avatar-edit:active { transform: scale(0.92); } .profile-name { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; margin-bottom: 0.2rem; color: var(--text-dark); } .profile-email { font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.85rem; } .profile-plan { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--sage-light); color: #4a7045; padding: 0.4rem 0.85rem; border-radius: 50px; font-size: 0.78rem; font-weight: 500; } .profile-plan .plan-since { opacity: 0.7; font-weight: 400; font-size: 0.72rem; } /* Stats-Tiles */ .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-bottom: 1.5rem; } .stat-tile { background: var(--white); border-radius: 18px; border: 1px solid var(--beige); padding: 1rem 0.5rem; text-align: center; box-shadow: 0 2px 12px var(--shadow); } .stat-tile-num { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; color: var(--terra); line-height: 1; margin-bottom: 0.3rem; } .stat-tile-label { font-size: 0.7rem; color: var(--text-light); letter-spacing: 0.04em; } /* Plan-Detail-Card */ .plan-detail-card { background: var(--white); border-radius: 24px; padding: 1.4rem; border: 1px solid var(--beige); margin-bottom: 1.5rem; box-shadow: 0 4px 18px var(--shadow); } .plan-detail-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--creme-dark); } .plan-detail-emoji { font-size: 2.2rem; filter: drop-shadow(0 2px 6px var(--shadow)); } .plan-detail-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--text-dark); margin-bottom: 0.15rem; } .plan-detail-price { font-size: 0.82rem; color: var(--text-light); } .plan-detail-perks { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1rem; } .plan-perk { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-mid); } .plan-perk span { width: 20px; text-align: center; color: var(--terra); font-weight: 500; } .plan-perk.locked { opacity: 0.5; } .plan-perk.locked span { color: var(--beige-mid); } .plan-detail-upgrade { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--gold-light), #F5E0A8); border: 1px solid #E8C97C; border-radius: 14px; padding: 0.85rem 1rem; text-decoration: none; color: #6B4F1A; font-weight: 500; font-size: 0.9rem; -webkit-tap-highlight-color: transparent; } .plan-detail-upgrade:active { transform: scale(0.98); } /* Settings-Card */ .settings-card { background: var(--white); border-radius: 18px; border: 1px solid var(--beige); margin-bottom: 1.5rem; overflow: hidden; box-shadow: 0 2px 12px var(--shadow); } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--creme-dark); } .settings-row:last-child { border-bottom: none; } .settings-row-text { flex: 1; min-width: 0; padding-right: 0.85rem; } .settings-row-title { font-size: 0.92rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.15rem; } .settings-row-sub { font-size: 0.74rem; color: var(--text-light); } /* Toggle Switch */ .toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--beige-mid); border-radius: 50px; transition: background 0.25s; } .toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: var(--white); border-radius: 50%; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 2px 6px rgba(0,0,0,0.15); } .toggle input:checked + .toggle-slider { background: var(--terra); } .toggle input:checked + .toggle-slider::before { transform: translateX(20px); } /* Settings-Links */ .settings-link { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; text-decoration: none; color: var(--text-dark); border-bottom: 1px solid var(--creme-dark); -webkit-tap-highlight-color: transparent; transition: background 0.15s; /* button reset */ background: transparent; border-left: none; border-right: none; border-top: none; border-radius: 0; width: 100%; cursor: pointer; font-family: 'Jost', sans-serif; text-align: left; } .settings-link:last-child { border-bottom: none; } .settings-link:active { background: var(--creme-dark); } .settings-link-icon { font-size: 1.1rem; width: 28px; text-align: center; flex-shrink: 0; } .settings-link-text { flex: 1; font-size: 0.9rem; font-weight: 400; } .settings-link-arrow { color: var(--beige-mid); font-size: 1.3rem; } /* Logout */ .logout-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; background: transparent; border: 1px solid var(--dusty-rose); color: var(--dusty-rose); border-radius: 14px; padding: 0.9rem; font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; margin-bottom: 1rem; -webkit-tap-highlight-color: transparent; } .logout-btn:active { background: rgba(201,144,138,0.08); } .profile-version { text-align: center; font-size: 0.72rem; color: var(--text-light); letter-spacing: 0.06em; opacity: 0.6; } /* ===== AUTH-SEITEN (Login + Register, mobile-first) ===== */ .auth-page { margin: 0; background: var(--creme); min-height: 100vh; min-height: 100dvh; } .auth-shell { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: max(env(safe-area-inset-top), 1.5rem) 1.25rem max(env(safe-area-inset-bottom), 1.5rem); overflow: hidden; } .auth-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .auth-orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.6; } .auth-orb-1 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(196,168,130,0.5) 0%, transparent 70%); top: -80px; right: -80px; animation: orbDrift1 16s ease-in-out infinite; } .auth-orb-2 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(143,175,138,0.4) 0%, transparent 70%); bottom: -50px; left: -80px; animation: orbDrift2 22s ease-in-out infinite; } .auth-content { position: relative; z-index: 1; width: 100%; max-width: 440px; animation: fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1); } .auth-logo { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-bottom: 1.75rem; filter: drop-shadow(0 4px 14px rgba(139,111,78,0.18)); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .auth-logo:hover { transform: scale(1.04); } .auth-logo-img { height: 56px; width: auto; max-width: 220px; display: block; } /* Back-Link unter Auth-Footer */ .auth-back-link { text-align: center; margin-top: 0.85rem; } .auth-back-link a { font-size: 0.78rem; color: var(--text-light); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; } .auth-back-link a:hover { color: var(--terra); } /* ============================================ ADMIN-PANEL (mobile-first) ============================================ */ /* Admin Tab-Leiste (sticky unter Top-Bar) */ .admin-tabs { position: sticky; top: max(env(safe-area-inset-top), 0px); z-index: 55; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(250,246,238,0.94); backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--beige); margin-top: 0; padding: 0; } .app-shell .admin-tabs { top: 70px; } .admin-tab-btn { background: transparent; border: none; color: var(--text-light); font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.85rem 0.4rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; position: relative; transition: color 0.2s; -webkit-tap-highlight-color: transparent; } .admin-tab-btn.active { color: var(--terra); } .admin-tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 3px; background: var(--terra); border-radius: 50px 50px 0 0; } .admin-tab-icon { font-size: 1.2rem; line-height: 1; } .admin-tab-label { font-weight: 500; } .admin-tab-count { position: absolute; top: 6px; right: 14px; min-width: 18px; height: 18px; border-radius: 50px; background: var(--terra); color: var(--white); font-size: 0.62rem; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .admin-tab-btn:not(.active) .admin-tab-count { background: var(--beige-mid); color: var(--text-mid); } /* Content-Bereich */ .admin-content { padding-top: 1.2rem !important; padding-bottom: calc(8rem + env(safe-area-inset-bottom)) !important; } .admin-tab-panel { position: relative; } .admin-tab-panel[hidden] { display: none; } /* Stat-Pills oben */ .admin-stat-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .admin-stat-pill { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.85rem; border-radius: 50px; background: var(--white); border: 1px solid var(--beige); font-size: 0.82rem; color: var(--text-mid); box-shadow: 0 2px 8px var(--shadow); } .admin-stat-pill strong { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.1rem; color: var(--text-dark); } .admin-stat-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .admin-stat-pill-online .dot { background: #4CAF7A; box-shadow: 0 0 8px rgba(76,175,122,0.5); } .admin-stat-pill-draft .dot { background: #E8B04C; } .admin-stat-pill-free .dot { background: var(--sage); } .admin-stat-pill-basic .dot { background: var(--terra); } .admin-stat-pill-premium .dot { background: var(--gold); box-shadow: 0 0 8px rgba(201,168,76,0.5); } .admin-chip-row { margin-bottom: 1rem; } /* Content-Liste */ .admin-content-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; } .admin-content-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 0.85rem; align-items: center; padding: 0.85rem; background: var(--white); border-radius: 16px; border: 1px solid var(--beige); cursor: pointer; box-shadow: 0 2px 12px var(--shadow); transition: transform 0.15s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .admin-content-item:active { transform: scale(0.985); } .admin-content-thumb { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; position: relative; } .admin-content-info { min-width: 0; } .admin-content-title { font-size: 0.92rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-content-meta { font-size: 0.72rem; color: var(--text-light); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .admin-content-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 50px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .admin-content-status-published { background: rgba(76,175,122,0.15); color: #2A7A4A; } .admin-content-status-draft { background: rgba(232,176,76,0.18); color: #8a5a1a; } .admin-content-tier { font-size: 0.7rem; color: var(--text-mid); } .admin-content-arrow { font-size: 1.3rem; color: var(--beige-mid); } /* Leer-Zustand */ .admin-empty { text-align: center; padding: 3rem 1rem; } .admin-empty-icon { font-size: 3rem; margin-bottom: 0.85rem; opacity: 0.6; } .admin-empty-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; margin-bottom: 0.35rem; color: var(--text-dark); } .admin-empty-sub { font-size: 0.85rem; color: var(--text-light); } /* Floating Action Button (oben über Bottom-Nav) */ .admin-fab { position: fixed; bottom: calc(5.5rem + env(safe-area-inset-bottom)); right: 1.25rem; z-index: 50; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.25rem 0.85rem 1.1rem; background: linear-gradient(135deg, var(--terra) 0%, var(--warm-brown) 100%); color: var(--white); border: none; border-radius: 50px; font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; box-shadow: 0 8px 28px rgba(156,123,86,0.4); transition: transform 0.15s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .admin-fab:active { transform: scale(0.95); } .admin-fab-icon { font-size: 1.4rem; line-height: 1; font-weight: 300; } /* ===== User-Liste ===== */ .admin-user-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; } .admin-user-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.85rem; align-items: center; padding: 0.85rem; background: var(--white); border-radius: 16px; border: 1px solid var(--beige); box-shadow: 0 2px 8px var(--shadow); } .admin-user-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--beige), var(--sand)); color: var(--white); font-weight: 500; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .admin-user-name { font-size: 0.92rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.15rem; } .admin-user-email { font-size: 0.74rem; color: var(--text-light); } .admin-user-plan { font-size: 0.7rem; font-weight: 500; padding: 0.25rem 0.7rem; border-radius: 50px; } .admin-user-plan.free { background: var(--sage-light); color: #3a6035; } .admin-user-plan.basic { background: rgba(156,123,86,0.15); color: var(--terra); } .admin-user-plan.premium { background: var(--gold-light); color: #7a5a10; } /* ===== Statistik-Tab ===== */ .mrr-card { background: linear-gradient(135deg, var(--terra) 0%, var(--warm-brown) 75%, #4a3322 100%); border-radius: 24px; padding: 1.5rem 1.4rem; color: var(--white); margin-bottom: 1.5rem; box-shadow: 0 12px 36px rgba(107,79,53,0.35); position: relative; overflow: hidden; } .mrr-card::before { content: '✨'; position: absolute; top: -1rem; right: -0.5rem; font-size: 7rem; opacity: 0.08; } .mrr-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; margin-bottom: 0.4rem; } .mrr-amount { font-family: 'Cormorant Garamond', serif; font-size: 3.6rem; font-weight: 600; line-height: 1; margin-bottom: 0.4rem; } .mrr-amount span { font-variant-numeric: tabular-nums; } .mrr-meta { font-size: 0.85rem; opacity: 0.7; margin-bottom: 1rem; } .mrr-breakdown { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; } .mrr-line { display: flex; justify-content: space-between; font-size: 0.82rem; opacity: 0.85; } .mrr-line-value { font-weight: 500; } .stats-distribution { background: var(--white); border-radius: 18px; border: 1px solid var(--beige); padding: 1rem 1.1rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; } .stats-dist-item { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0.85rem; } .stats-dist-label { font-size: 0.85rem; font-weight: 500; color: var(--text-dark); } .stats-dist-bar-wrap { background: var(--beige); border-radius: 50px; height: 8px; overflow: hidden; position: relative; } .stats-dist-bar { height: 100%; border-radius: 50px; transition: width 1s ease; } .stats-dist-bar.free { background: var(--sage); } .stats-dist-bar.basic { background: linear-gradient(90deg, var(--terra), var(--warm-brown)); } .stats-dist-bar.premium { background: linear-gradient(90deg, var(--gold), #E8C97C); } .stats-dist-value { font-size: 0.78rem; color: var(--text-light); font-variant-numeric: tabular-nums; } /* Top-Inhalte */ .stats-top-content { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .stats-top-item { display: grid; grid-template-columns: 28px 56px 1fr; gap: 0.85rem; align-items: center; background: var(--white); border: 1px solid var(--beige); border-radius: 14px; padding: 0.7rem 0.85rem; box-shadow: 0 2px 8px var(--shadow); } .stats-top-rank { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--terra); text-align: center; } .stats-top-thumb { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .stats-top-title { font-size: 0.9rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.15rem; } .stats-top-meta { font-size: 0.74rem; color: var(--text-light); } /* ===== EDIT-SHEET (Modal Bottom-Sheet für CRUD) ===== */ .admin-sheet-backdrop { position: fixed; inset: 0; background: rgba(31,24,37,0.5); backdrop-filter: blur(4px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .admin-sheet-backdrop.open { opacity: 1; pointer-events: all; } .admin-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 201; background: var(--creme); border-radius: 28px 28px 0 0; max-height: 92dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 -12px 40px rgba(31,24,37,0.25); } .admin-sheet.open { transform: translateY(0); } .admin-sheet-handle { width: 44px; height: 4px; background: var(--beige-mid); border-radius: 50px; margin: 0.6rem auto 0; flex-shrink: 0; } .admin-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem 0.5rem; flex-shrink: 0; } .admin-sheet-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; color: var(--text-dark); } .admin-sheet-close { width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 1px solid var(--beige); color: var(--text-mid); font-size: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .admin-sheet-close:active { transform: scale(0.92); } .admin-sheet-body { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; } /* Felder im Sheet */ .admin-field { margin-bottom: 1.1rem; } .admin-field label { display: block; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); font-weight: 500; margin-bottom: 0.4rem; } .admin-field input[type="text"], .admin-field input[type="email"], .admin-field textarea, .admin-field select { width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--beige-mid); border-radius: 12px; background: var(--white); color: var(--text-dark); font-family: 'Jost', sans-serif; font-size: 1rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus { border-color: var(--terra); box-shadow: 0 0 0 4px rgba(156,123,86,0.12); } .admin-field textarea { resize: vertical; min-height: 80px; line-height: 1.55; } .admin-field-row { display: grid; grid-template-columns: 80px 1fr 100px; gap: 0.5rem; margin-bottom: 1.1rem; } .admin-field-row .admin-field { margin-bottom: 0; } .admin-field-row .admin-field input { padding: 0.85rem 0.6rem; } /* Kategorie-Picker */ .admin-cat-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .admin-cat-option input { display: none; } .admin-cat-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 0.9rem; background: var(--white); border: 2px solid var(--beige-mid); border-radius: 14px; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; } .admin-cat-option:active .admin-cat-card { transform: scale(0.97); } .admin-cat-emoji { font-size: 1.3rem; } .admin-cat-label { font-size: 0.82rem; font-weight: 500; color: var(--text-mid); } .admin-cat-option input:checked + .admin-cat-card { border-color: var(--terra); background: linear-gradient(135deg, rgba(156,123,86,0.06), rgba(201,168,76,0.08)); box-shadow: 0 4px 14px rgba(156,123,86,0.15); } .admin-cat-option input:checked + .admin-cat-card .admin-cat-label { color: var(--terra); } /* Upload-Zone */ .admin-upload { position: relative; border: 2px dashed var(--beige-mid); border-radius: 16px; background: var(--white); padding: 1.2rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .admin-upload:hover { border-color: var(--terra); background: var(--creme); } .admin-upload-icon { font-size: 1.8rem; margin-bottom: 0.4rem; opacity: 0.7; } .admin-upload-text { font-size: 0.88rem; color: var(--text-mid); font-weight: 500; margin-bottom: 0.2rem; } .admin-upload-hint { font-size: 0.72rem; color: var(--text-light); } .admin-upload-preview { display: flex; align-items: center; gap: 0.85rem; text-align: left; padding: 0.25rem; } .admin-upload-file-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--sage-light), var(--sage)); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .admin-upload-file-info { flex: 1; min-width: 0; } .admin-upload-file-name { font-size: 0.88rem; font-weight: 500; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-upload-file-size { font-size: 0.72rem; color: var(--text-light); margin-top: 0.15rem; } .admin-upload-remove { width: 28px; height: 28px; border-radius: 50%; background: var(--beige); color: var(--text-mid); border: none; font-size: 0.85rem; cursor: pointer; flex-shrink: 0; } /* Tier-Picker — der entscheidende UI-Block */ .admin-field-tier { background: linear-gradient(135deg, rgba(196,168,130,0.08), rgba(201,168,76,0.06)); padding: 1.1rem; border-radius: 18px; border: 1px solid rgba(196,168,130,0.3); } .admin-tier-picker { display: flex; flex-direction: column; gap: 0.55rem; } .admin-tier-option input { display: none; } .admin-tier-card { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; background: var(--white); border: 2px solid var(--beige-mid); border-radius: 14px; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; } .admin-tier-option:active .admin-tier-card { transform: scale(0.985); } .admin-tier-emoji { font-size: 1.5rem; } .admin-tier-label { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 500; color: var(--text-dark); display: block; line-height: 1; margin-bottom: 0.15rem; } .admin-tier-desc { font-size: 0.74rem; color: var(--text-light); display: block; } .admin-tier-option input:checked + .admin-tier-card { border-color: var(--terra); box-shadow: 0 6px 20px rgba(156,123,86,0.2); } .admin-tier-option input:checked + .admin-tier-card::after { content: '✓'; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--terra); color: var(--white); font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .admin-tier-option input:checked + .admin-tier-free { background: linear-gradient(135deg, var(--white), rgba(143,175,138,0.08)); } .admin-tier-option input:checked + .admin-tier-basic { background: linear-gradient(135deg, var(--white), rgba(156,123,86,0.08)); } .admin-tier-option input:checked + .admin-tier-premium { background: linear-gradient(135deg, var(--white), rgba(201,168,76,0.12)); border-color: var(--gold); } .admin-tier-option input:checked + .admin-tier-premium::after { background: var(--gold); } /* Fehler-Anzeige */ .admin-error { background: rgba(201,144,138,0.12); border: 1px solid rgba(201,144,138,0.3); color: var(--dusty-rose); font-size: 0.82rem; padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 1rem; } /* ===== Rich-Text-Editor (RTE) im Admin-Sheet ===== */ .admin-rte-wrap { border: 1.5px solid var(--beige-mid); border-radius: 12px; overflow: hidden; background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; } .admin-rte-wrap:focus-within { border-color: var(--terra); box-shadow: 0 0 0 4px rgba(156,123,86,0.12); } .admin-rte-toolbar { display: flex; align-items: center; gap: 0.15rem; padding: 0.35rem 0.55rem; background: var(--creme-dark, #EDE3D5); border-bottom: 1px solid var(--beige-mid); flex-wrap: wrap; } .rte-btn { padding: 0.28rem 0.55rem; border: none; border-radius: 6px; background: transparent; color: var(--earth, #6B5744); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: 'Jost', sans-serif; transition: background 0.15s, color 0.15s; line-height: 1; } .rte-btn:hover { background: rgba(156,123,86,0.18); color: var(--terra); } .rte-sep { width: 1px; height: 18px; background: var(--beige-mid); margin: 0 0.2rem; align-self: center; flex-shrink: 0; } .rte-img-btn { color: var(--terra); font-size: 0.8rem; } .admin-rte { padding: 0.9rem 1rem; min-height: 130px; max-height: 340px; overflow-y: auto; font-family: 'Jost', sans-serif; font-size: 0.95rem; line-height: 1.65; color: var(--text-dark); outline: none; } .admin-rte:empty::before { content: attr(data-placeholder); color: var(--text-light, #C4A882); pointer-events: none; display: block; } .admin-rte img { max-width: 100%; border-radius: 8px; display: block; margin: 0.6rem 0; } .admin-rte h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; margin: 0.9rem 0 0.3rem; color: var(--earth); } .admin-rte h3 { font-size: 0.97rem; font-weight: 600; margin: 0.7rem 0 0.2rem; color: var(--earth); letter-spacing: 0.03em; } .admin-rte p { margin: 0 0 0.5rem; } .admin-rte b, .admin-rte strong { font-weight: 700; } .admin-rte i, .admin-rte em { font-style: italic; } /* ===== Player-Body (Beschreibung + Fotos unter dem Player) ===== */ .player-body { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--creme-dark, #EDE3D5); font-family: 'Jost', sans-serif; font-size: 0.95rem; line-height: 1.72; color: var(--text-dark, #3E3528); } .player-body img { max-width: 100%; border-radius: 12px; display: block; margin: 1rem 0; } .player-body h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 400; color: var(--earth, #6B5744); margin: 1.2rem 0 0.4rem; } .player-body h3 { font-size: 1rem; font-weight: 600; color: var(--earth, #6B5744); margin: 1rem 0 0.3rem; } .player-body p { margin-bottom: 0.75rem; } .player-body b, .player-body strong { font-weight: 700; } .player-body i, .player-body em { font-style: italic; color: var(--terra, #9C7B56); } /* Sheet-Actions */ .admin-sheet-actions { display: grid; grid-template-columns: 1fr; gap: 0.55rem; margin-top: 1.5rem; } .admin-btn-primary, .admin-btn-ghost, .admin-btn-danger { padding: 0.95rem 1rem; border-radius: 14px; font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s, box-shadow 0.2s; } .admin-btn-primary { background: linear-gradient(135deg, var(--terra), var(--warm-brown)); color: var(--white); border: none; box-shadow: 0 6px 22px rgba(156,123,86,0.4); } .admin-btn-primary:active { transform: scale(0.98); box-shadow: 0 4px 14px rgba(156,123,86,0.35); } .admin-btn-ghost { background: var(--white); color: var(--text-mid); border: 1.5px solid var(--beige-mid); } .admin-btn-ghost:active { border-color: var(--terra); color: var(--terra); } .admin-btn-danger { background: rgba(201,144,138,0.12); color: var(--dusty-rose); border: 1px solid rgba(201,144,138,0.3); } .admin-btn-danger:active { background: rgba(201,144,138,0.2); } /* Bottom-Nav-Button (statt Link) */ .bottomnav-item-btn { background: transparent; border: none; font-family: inherit; cursor: pointer; width: 100%; } /* ============================================ KURSE (Admin-Tab + Frontend) ============================================ */ /* Admin: Tab-Bar mit 4 Items braucht kompaktere Schrift */ .admin-tabs-4 { grid-template-columns: repeat(4, 1fr); } .admin-tabs-4 .admin-tab-btn { padding: 0.85rem 0.2rem; } .admin-tabs-4 .admin-tab-label { font-size: 0.7rem; } .admin-tabs-4 .admin-tab-count { position: static; margin-top: 0; font-size: 0.6rem; padding: 0 4px; min-width: 16px; height: 16px; } /* Kurs-Liste */ .course-list { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.5rem; } .course-item { position: relative; background: var(--white); border-radius: 20px; border: 1px solid var(--beige); overflow: hidden; cursor: pointer; box-shadow: 0 4px 16px var(--shadow); transition: transform 0.15s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .course-item:active { transform: scale(0.985); } .course-cover { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; overflow: hidden; } .course-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 100%); } .course-cover-reiki { background: linear-gradient(160deg, #FAF7EE 0%, #F2EADA 100%); } .course-cover-reiki-premium { background: linear-gradient(160deg, #2C1A0A 0%, #3D2414 100%); color: rgba(255,245,220,0.92); } .course-cover-meditation { background: linear-gradient(160deg, #F8F5FC 0%, #EDE8F5 100%); } .course-cover-breath { background: linear-gradient(160deg, #F4F7F2 0%, #E8EEE5 100%); } .course-cover-ritual { background: linear-gradient(160deg, #FAF6EE 0%, #F0E8D8 100%); } .course-cover-ritual-premium{ background: linear-gradient(160deg, #1E1528 0%, #2A1A36 100%); color: rgba(255,245,230,0.92); } .course-cover-emoji { position: relative; z-index: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); } .course-status-pill { position: absolute; top: 0.6rem; right: 0.6rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 50px; background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; z-index: 2; } .course-status-pill.published { color: #2A7A4A; } .course-status-pill.draft { color: #8a5a1a; } .course-info { padding: 1rem 1.1rem 1.1rem; } .course-title { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; color: var(--text-dark); line-height: 1.25; margin-bottom: 0.35rem; } .course-desc { font-size: 0.84rem; color: var(--text-light); line-height: 1.5; margin-bottom: 0.7rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .course-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-mid); } .course-meta-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.6rem; background: var(--creme-dark); border-radius: 50px; font-weight: 500; } .course-meta-pill.tier-free { background: var(--sage-light); color: #3a6035; } .course-meta-pill.tier-basic { background: rgba(156,123,86,0.15); color: var(--terra); } .course-meta-pill.tier-premium { background: var(--gold-light); color: #7a5a10; } /* Modul-Picker (Inhalte zu einem Kurs zuordnen) */ .admin-field-hint { font-size: 0.74rem; color: var(--text-light); margin-top: -0.25rem; margin-bottom: 0.55rem; line-height: 1.4; } .course-modules-picker { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; min-height: 30px; } .course-module-row { display: grid; grid-template-columns: 28px 36px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.6rem 0.7rem; background: var(--white); border: 1px solid var(--beige); border-radius: 12px; } .course-module-num { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--terra); text-align: center; } .course-module-emoji { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--creme-dark); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; flex-shrink: 0; } .course-module-text { min-width: 0; } .course-module-title { font-size: 0.86rem; font-weight: 500; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .course-module-meta { font-size: 0.7rem; color: var(--text-light); } .course-module-controls { display: flex; gap: 0.2rem; } .course-module-ctrl { width: 28px; height: 28px; border-radius: 8px; background: var(--creme-dark); color: var(--text-mid); border: none; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: background 0.15s, color 0.15s; } .course-module-ctrl:hover:not(:disabled) { background: var(--terra); color: var(--white); } .course-module-ctrl:disabled { opacity: 0.35; cursor: not-allowed; } .course-module-ctrl.remove:hover { background: var(--dusty-rose); } .course-module-ctrl.edit-mod { background: rgba(156,123,86,0.12); color: var(--terra); font-size: 0.75rem; } .course-module-ctrl.edit-mod:hover { background: var(--terra); color: var(--white); } .course-add-module-btn { display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; padding: 0.85rem; background: var(--creme); border: 1.5px dashed var(--beige-mid); border-radius: 12px; color: var(--text-mid); font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; -webkit-tap-highlight-color: transparent; } .course-add-module-btn:hover, .course-add-module-btn:active { border-color: var(--terra); color: var(--terra); background: var(--white); } .course-add-module-btn span:first-child { font-size: 1.1rem; line-height: 1; } /* Modul-Picker Modal (Inhalte aus Bibliothek auswählen) */ .admin-sheet-narrow { max-width: 100%; } .module-picker-list { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.85rem; } .module-picker-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.7rem; align-items: center; padding: 0.6rem 0.85rem; background: var(--white); border: 1px solid var(--beige); border-radius: 12px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; } .module-picker-item:active { transform: scale(0.98); } .module-picker-item:hover { border-color: var(--terra); } .module-picker-item.already-added { opacity: 0.45; cursor: not-allowed; } .module-picker-thumb { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .module-picker-title { font-size: 0.86rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .module-picker-meta { font-size: 0.7rem; color: var(--text-light); } .module-picker-action { font-size: 1.3rem; color: var(--terra); font-weight: 500; } .module-picker-item.already-added .module-picker-action { color: var(--sage); font-size: 0.95rem; } /* Field-row mit 2 Columns */ .admin-field-row-2 { grid-template-columns: 100px 1fr; } /* ============================================ USER-EDIT-SHEET (Admin) ============================================ */ .user-edit-header { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 0; margin-bottom: 0.85rem; border-bottom: 1px solid var(--beige); } .user-edit-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--beige), var(--sand) 70%, var(--terra) 130%); color: var(--white); font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); box-shadow: 0 4px 14px rgba(156,123,86,0.25); } .user-edit-name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--text-dark); margin-bottom: 0.15rem; } .user-edit-since { font-size: 0.78rem; color: var(--text-light); } /* Stripe Subscription-Box */ .subscription-box { background: linear-gradient(135deg, #FAFAFA 0%, #F0EBE0 100%); border: 1px solid var(--beige); border-radius: 18px; padding: 1.1rem; margin-bottom: 1.2rem; position: relative; overflow: hidden; } .subscription-box::before { content: 'STRIPE'; position: absolute; top: 1rem; right: -1.5rem; transform: rotate(35deg); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--text-light); opacity: 0.25; font-weight: 700; } .subscription-box.no-subscription { opacity: 0.6; } .subscription-box-header { display: grid; grid-template-columns: 40px 1fr auto; gap: 0.85rem; align-items: center; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(212,196,168,0.4); } .subscription-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #6772E5, #5469D4); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--white); box-shadow: 0 2px 10px rgba(84,105,212,0.3); } .subscription-title { font-size: 0.9rem; font-weight: 500; color: var(--text-dark); } .subscription-status { font-size: 0.72rem; color: var(--text-light); } .subscription-status-pill { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 50px; } .subscription-status-pill.active { background: rgba(76,175,122,0.15); color: #2A7A4A; } .subscription-status-pill.past_due { background: rgba(232,176,76,0.18); color: #8a5a1a; } .subscription-status-pill.canceled { background: rgba(201,144,138,0.18); color: var(--dusty-rose); } .subscription-status-pill.none { background: var(--beige); color: var(--text-light); } .subscription-grid { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .subscription-row { display: flex; justify-content: space-between; align-items: center; gap: 0.85rem; font-size: 0.82rem; } .subscription-row-label { color: var(--text-light); flex-shrink: 0; } .subscription-row-value { color: var(--text-dark); font-weight: 500; text-align: right; word-break: break-all; } code.subscription-row-value { font-family: 'SF Mono', Menlo, monospace; font-size: 0.72rem; background: var(--white); padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--beige); font-weight: 400; } .subscription-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .subscription-action-btn { padding: 0.65rem 0.85rem; background: var(--white); border: 1px solid var(--beige-mid); border-radius: 10px; color: var(--text-mid); font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, color 0.15s, background 0.15s; } .subscription-action-btn:hover:not(:disabled) { border-color: var(--terra); color: var(--terra); } .subscription-action-btn:disabled { opacity: 0.4; cursor: not-allowed; } .subscription-action-cancel:hover:not(:disabled) { border-color: var(--dusty-rose); color: var(--dusty-rose); background: rgba(201,144,138,0.08); } /* User-Status-Toggle (Aktiv / Pausiert / Gesperrt) */ .user-status-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .user-status-option input { display: none; } .user-status-pill { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 0.6rem; background: var(--white); border: 1.5px solid var(--beige-mid); border-radius: 12px; font-size: 0.82rem; font-weight: 500; color: var(--text-mid); cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; } .user-status-pill .dot { width: 8px; height: 8px; border-radius: 50%; } .user-status-active .dot { background: #4CAF7A; } .user-status-paused .dot { background: #E8B04C; } .user-status-blocked .dot { background: var(--dusty-rose); } .user-status-option input:checked + .user-status-active { border-color: #4CAF7A; background: rgba(76,175,122,0.08); color: #2A7A4A; } .user-status-option input:checked + .user-status-paused { border-color: #E8B04C; background: rgba(232,176,76,0.1); color: #8a5a1a; } .user-status-option input:checked + .user-status-blocked { border-color: var(--dusty-rose); background: rgba(201,144,138,0.1); color: var(--dusty-rose); } .admin-field label small { font-weight: 400; color: var(--text-light); text-transform: none; letter-spacing: 0; font-size: 0.74rem; } /* User-Item: jetzt klickbar machen */ .admin-user-item { cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .admin-user-item:active { transform: scale(0.985); box-shadow: 0 4px 16px var(--shadow-md); } /* ============================================ FRONTEND KURSE — Dashboard & Detail-Page ============================================ */ /* Section-Title-Row mit „Alle ›" rechts */ .app-section-title-row { display: flex; align-items: center; justify-content: space-between; margin: 1.5rem 0 0.85rem; padding-left: 0.25rem; } .app-section-title-row .app-section-title { margin: 0; } .section-link { font-size: 0.78rem; color: var(--terra); text-decoration: none; font-weight: 500; letter-spacing: 0.04em; } /* User-Kurse-Grid auf Dashboard */ .user-courses-grid { display: flex; gap: 0.85rem; overflow-x: auto; margin: 0 -1.25rem 1rem; padding: 0.25rem 1.25rem 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; } .user-courses-grid::-webkit-scrollbar { display: none; } .user-course-card { flex-shrink: 0; width: 240px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--beige); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--text-dark); box-shadow: 0 4px 16px var(--shadow); transition: transform 0.15s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .user-course-card:active { transform: scale(0.97); } .user-course-cover { aspect-ratio: 16 / 9; max-height: 220px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; position: relative; overflow: hidden; background-size: cover !important; background-position: center 30% !important; background-repeat: no-repeat !important; } .user-course-cover.locked::before { content: '🔒'; position: absolute; inset: 0; background: rgba(250,246,238,0.65); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; z-index: 2; } .user-course-cover-emoji { filter: none; opacity: 0.55; } .user-course-info { padding: 0.85rem 0.95rem 1rem; } .user-course-tier-pill { display: inline-block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 50px; margin-bottom: 0.45rem; } .user-course-tier-pill.free { background: var(--sage-light); color: #3a6035; } .user-course-tier-pill.basic { background: rgba(156,123,86,0.15); color: var(--terra); } .user-course-tier-pill.premium { background: var(--gold-light); color: #7a5a10; } .user-course-title { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 500; color: var(--text-dark); line-height: 1.25; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.65em; } .user-course-progress-bar { height: 4px; background: var(--beige); border-radius: 50px; overflow: hidden; margin-bottom: 0.35rem; } .user-course-progress-fill { height: 100%; background: linear-gradient(90deg, var(--terra), var(--gold)); border-radius: 50px; transition: width 0.8s ease; } .user-course-progress-text { font-size: 0.7rem; color: var(--text-light); font-variant-numeric: tabular-nums; } /* ===== KURS-DETAIL-PAGE ===== */ .course-detail-content { padding: 0 !important; padding-bottom: calc(7rem + env(safe-area-inset-bottom)) !important; } .course-detail-content::before { display: none; } /* kein Pull-Indicator */ .course-hero { position: relative; padding: max(env(safe-area-inset-top), 1rem) 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text-dark); border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; margin-bottom: 1.5rem; isolation: isolate; } /* Dunkles Overlay nur wenn Cover-Bild gesetzt — Text bleibt lesbar */ .course-hero[style*="background-image"]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); border-radius: inherit; z-index: 0; } .course-hero[style*="background-image"] > * { position: relative; z-index: 1; } .course-hero[style*="background-image"] { color: #fff; min-height: 200px; } .course-hero[style*="background-image"] .course-hero-title, .course-hero[style*="background-image"] .course-hero-desc { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.4); } .course-hero[style*="background-image"] .course-hero-tier { background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); color: #fff; } .course-hero.cover-reiki { background: linear-gradient(135deg, var(--gold-light), #E8C97C); } .course-hero.cover-reiki-premium { background: linear-gradient(135deg, var(--gold), #8B6F1E); color: var(--white); } .course-hero.cover-meditation { background: linear-gradient(135deg, #ECE2F5, #B8A8D4); } .course-hero.cover-breath { background: linear-gradient(135deg, var(--sage-light), var(--sage)); } .course-hero.cover-ritual { background: linear-gradient(135deg, var(--beige), var(--sand)); } .course-hero.cover-ritual-premium { background: linear-gradient(135deg, #4a3868, #2A1F3A); color: var(--white); } .course-hero.dark, .course-hero.cover-reiki-premium, .course-hero.cover-ritual-premium { color: var(--white); } .course-hero.dark .course-hero-desc, .course-hero.cover-reiki-premium .course-hero-desc, .course-hero.cover-ritual-premium .course-hero-desc { opacity: 0.85; } .course-hero-back { position: absolute; top: max(env(safe-area-inset-top), 1rem); left: 1.25rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.75); backdrop-filter: blur(8px); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text-dark); font-size: 1.2rem; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; } .course-hero.dark .course-hero-back { background: rgba(255,255,255,0.18); color: var(--white); } .course-hero-back:active { transform: scale(0.92); } .course-hero-emoji { font-size: 4.5rem; margin: 1.8rem 0 0.85rem; filter: drop-shadow(0 8px 22px rgba(0,0,0,0.15)); } .course-hero-tier { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; background: rgba(255,255,255,0.5); padding: 0.3rem 0.85rem; border-radius: 50px; margin-bottom: 0.85rem; } .course-hero.dark .course-hero-tier { background: rgba(255,255,255,0.15); } .course-hero-title { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 500; line-height: 1.15; margin-bottom: 0.65rem; text-shadow: 0 2px 12px rgba(0,0,0,0.08); } .course-hero-desc { font-size: 0.92rem; line-height: 1.55; max-width: 480px; opacity: 0.85; } /* Progress-Card unter Hero */ .course-progress-card { display: grid; grid-template-columns: 1fr 80px; gap: 0.85rem; align-items: center; background: var(--white); border: 1px solid var(--beige); border-radius: 20px; padding: 1.1rem 1.2rem; margin: 0 1.25rem 1rem; box-shadow: 0 4px 18px var(--shadow); } .course-progress-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.35rem; } .course-progress-pct { font-size: 0.95rem; color: var(--text-dark); font-weight: 500; } .course-progress-pct span { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: var(--terra); } .course-progress-circle { position: relative; width: 80px; height: 80px; } .course-progress-svg { transform: rotate(-90deg); } .course-progress-track { stroke: var(--beige); } .course-progress-arc { stroke: url(#terra-gold); stroke: var(--terra); transition: stroke-dasharray 0.8s ease; } .course-progress-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; font-weight: 500; color: var(--text-dark); font-variant-numeric: tabular-nums; } /* CTA „Weiter mit Modul X" */ .course-cta-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: calc(100% - 2.5rem); margin: 0 1.25rem 1.5rem; padding: 1rem 1.25rem; background: linear-gradient(135deg, var(--terra), var(--warm-brown)); color: var(--white); border: none; border-radius: 16px; cursor: pointer; box-shadow: 0 8px 26px rgba(156,123,86,0.4); font-family: 'Jost', sans-serif; text-align: left; -webkit-tap-highlight-color: transparent; transition: transform 0.15s, box-shadow 0.2s; } .course-cta-next:active { transform: scale(0.985); box-shadow: 0 4px 14px rgba(156,123,86,0.35); } .course-cta-text { flex: 1; min-width: 0; } .course-cta-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; margin-bottom: 0.25rem; } .course-cta-sub { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 500; } .course-cta-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 3px; } .course-detail-content .app-section-title { margin-left: 1.5rem; margin-right: 1.5rem; } /* Modul-Liste auf Detail-Page */ .course-modules-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1.25rem 1rem; } .course-mod-row { display: grid; grid-template-columns: 36px 48px 1fr auto; gap: 0.85rem; align-items: center; padding: 0.8rem 0.95rem; background: var(--white); border: 1px solid var(--beige); border-radius: 14px; text-decoration: none; color: var(--text-dark); cursor: pointer; transition: transform 0.15s, border-color 0.2s, background 0.2s; -webkit-tap-highlight-color: transparent; } .course-mod-row:active { transform: scale(0.985); } .course-mod-row.done { background: linear-gradient(135deg, var(--white), rgba(143,175,138,0.05)); border-color: rgba(143,175,138,0.4); } .course-mod-row.locked { opacity: 0.55; cursor: not-allowed; } .course-mod-num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--beige); font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 600; color: var(--text-mid); } .course-mod-row.done .course-mod-num { background: var(--sage); color: var(--white); } .course-mod-row.done .course-mod-num::before { content: '✓'; } .course-mod-emoji { width: 56px; height: 56px; border-radius: 12px; background: var(--creme-dark); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; overflow: hidden; } .course-mod-info { min-width: 0; } .course-mod-title { font-size: 0.9rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .course-mod-meta { font-size: 0.72rem; color: var(--text-light); } .course-mod-action { font-size: 1.3rem; color: var(--terra); font-weight: 500; } .course-mod-row.locked .course-mod-action { color: var(--beige-mid); font-size: 0.95rem; } .course-back-link { display: block; text-align: center; color: var(--text-light); text-decoration: none; font-size: 0.85rem; padding: 1rem; margin-top: 0.5rem; } .course-back-link:hover { color: var(--terra); } /* View-Toggle (Inhalte / Kurse) auf Inhalte-Page */ .view-toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--beige); border-radius: 50px; padding: 4px; margin-bottom: 1rem; gap: 0; } .view-toggle-btn { background: transparent; border: none; padding: 0.65rem 0.85rem; font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--text-mid); cursor: pointer; border-radius: 50px; transition: background 0.25s, color 0.25s, box-shadow 0.25s; -webkit-tap-highlight-color: transparent; } .view-toggle-btn.active { background: var(--white); color: var(--terra); box-shadow: 0 2px 8px var(--shadow); } /* Vertikales Kurs-Grid auf der Inhalte-Page (volle Breite, nicht horizontal) */ .user-courses-grid-vertical { display: flex; flex-direction: column; gap: 0.85rem; } /* Kompaktes horizontales Layout für die Kurs-Liste */ .user-courses-grid-vertical .user-course-card { width: 100%; display: grid; grid-template-columns: 110px 1fr; align-items: stretch; min-height: 110px; } .user-courses-grid-vertical .user-course-cover { aspect-ratio: auto; max-height: none; height: 100%; min-height: 110px; width: 110px; border-radius: 20px 0 0 20px; font-size: 1.6rem; } .user-courses-grid-vertical .user-course-info { padding: 0.85rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; } .user-courses-grid-vertical .user-course-title { font-size: 1.05rem; line-height: 1.3; } .user-courses-grid-vertical .user-course-progress-bar { margin-top: 0.3rem; } /* Auf größeren Screens etwas mehr Platz fürs Bild */ @media (min-width: 600px) { .user-courses-grid-vertical .user-course-card { grid-template-columns: 160px 1fr; min-height: 130px; } .user-courses-grid-vertical .user-course-cover { width: 160px; min-height: 130px; } } .auth-title { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 400; text-align: center; margin-bottom: 0.4rem; color: var(--text-dark); } .auth-sub { text-align: center; font-size: 0.92rem; color: var(--text-light); margin-bottom: 1.5rem; } .auth-section-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); font-weight: 500; margin-bottom: 0.75rem; text-align: center; } /* Demo-Info Box */ .demo-info { background: var(--white); border: 1px solid var(--beige); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 2px 12px var(--shadow); } .demo-info-title { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); font-weight: 500; margin-bottom: 0.5rem; } .demo-info-row { font-size: 0.78rem; color: var(--text-mid); line-height: 1.7; } .demo-info-row span { display: inline-block; min-width: 50px; color: var(--text-light); } .demo-info-row code { background: var(--creme-dark); padding: 0.1rem 0.45rem; border-radius: 4px; font-family: 'SF Mono', Menlo, monospace; font-size: 0.74rem; color: var(--terra); } /* Demo-Buttons */ .demo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.2rem; } .demo-btn { background: var(--white); border: 1.5px solid var(--beige-mid); border-radius: 14px; padding: 0.85rem 0.5rem; font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--text-mid); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; transition: transform 0.15s, border-color 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; } .demo-btn:active { transform: scale(0.95); border-color: var(--terra); color: var(--terra); } .demo-btn-icon { font-size: 1.4rem; } /* Divider */ .auth-divider { display: flex; align-items: center; gap: 0.85rem; margin: 1.2rem 0; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--beige-mid); } /* Form */ .auth-form { margin-bottom: 1.2rem; } .auth-field { margin-bottom: 1rem; } .auth-field label { display: block; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); font-weight: 500; margin-bottom: 0.4rem; } .auth-field input { width: 100%; padding: 0.95rem 1.1rem; border: 1.5px solid var(--beige-mid); border-radius: 14px; background: var(--white); color: var(--text-dark); font-family: 'Jost', sans-serif; font-size: 1rem; /* iOS auto-zoom verhindern (>= 16px) */ transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .auth-field input:focus { border-color: var(--terra); box-shadow: 0 0 0 4px rgba(156,123,86,0.12); } /* Checkbox */ .auth-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.8rem; color: var(--text-mid); margin-bottom: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .auth-checkbox input { display: none; } .auth-checkbox-mark { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--beige-mid); background: var(--white); flex-shrink: 0; margin-top: 1px; position: relative; transition: background 0.2s, border-color 0.2s; } .auth-checkbox input:checked + .auth-checkbox-mark { background: var(--terra); border-color: var(--terra); } .auth-checkbox input:checked + .auth-checkbox-mark::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); color: var(--white); font-size: 0.85rem; font-weight: 700; } .auth-checkbox-text { line-height: 1.5; } .auth-checkbox-text a { color: var(--terra); text-decoration: none; font-weight: 500; } /* Error */ .auth-error { background: rgba(201,144,138,0.1); border: 1px solid rgba(201,144,138,0.3); color: var(--dusty-rose); font-size: 0.82rem; padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 1rem; } /* Submit */ .auth-submit { width: 100%; background: linear-gradient(135deg, var(--terra), var(--warm-brown)); color: var(--white); border: none; border-radius: 14px; padding: 1rem; font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 6px 22px rgba(156,123,86,0.4); transition: transform 0.1s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .auth-submit:active { transform: scale(0.98); box-shadow: 0 4px 14px rgba(156,123,86,0.35); } .auth-footer-text { text-align: center; font-size: 0.85rem; color: var(--text-light); margin-top: 1rem; } .auth-footer-text a { color: var(--terra); text-decoration: none; font-weight: 500; } /* Plan-Selector (Register) */ .plan-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; } .plan-option { background: var(--white); border: 2px solid var(--beige-mid); border-radius: 16px; padding: 0.95rem 0.4rem; text-align: center; cursor: pointer; transition: all 0.2s; font-family: 'Jost', sans-serif; -webkit-tap-highlight-color: transparent; } .plan-option:active { transform: scale(0.95); } .plan-option.selected { border-color: var(--terra); background: linear-gradient(135deg, rgba(156,123,86,0.06), rgba(201,168,76,0.08)); box-shadow: 0 4px 18px rgba(156,123,86,0.15); } .plan-emoji { font-size: 1.6rem; margin-bottom: 0.35rem; } .plan-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 0.2rem; } .plan-option.selected .plan-label { color: var(--terra); } /* ================================================================ PLAN-VORSCHAU bei Registrierung ================================================================ */ .plan-preview { background: linear-gradient(135deg, #FFF8E1, #FAF6EE); border: 1px solid rgba(201,169,110,0.4); border-radius: 16px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; animation: planPreviewFade 0.4s ease; } @keyframes planPreviewFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .plan-preview-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; padding-bottom: 0.65rem; border-bottom: 1px solid rgba(196,168,130,0.25); } .plan-preview-emoji { font-size: 1.75rem; flex-shrink: 0; line-height: 1; } .plan-preview-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--warm-brown, #3D2C1E); line-height: 1.3; margin-bottom: 0.15rem; } .plan-preview-price { font-size: 0.78rem; color: var(--gold, #C9A96E); letter-spacing: 0.04em; font-weight: 500; } .plan-preview-list { list-style: none; padding: 0; margin: 0 0 0.75rem; } .plan-preview-list li { font-size: 0.85rem; color: var(--text-mid, #6B5A47); line-height: 1.55; padding: 0.3rem 0; border-bottom: 1px solid rgba(196,168,130,0.12); } .plan-preview-list li:last-child { border-bottom: none; } .plan-preview-list strong { color: var(--warm-brown, #3D2C1E); } .plan-preview-link { display: inline-block; font-size: 0.78rem; color: var(--terra, #8B5E3C); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; padding-top: 0.2rem; border-top: 1px dashed rgba(196,168,130,0.3); width: 100%; text-align: center; margin-top: 0.25rem; } .plan-preview-link:hover { color: var(--gold, #C9A96E); } .plan-cost { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--text-dark); line-height: 1; } .plan-cost span { display: inline-block; font-size: 0.65rem; font-weight: 400; color: var(--text-light); letter-spacing: 0.04em; margin-left: 1px; } /* ===== PLAYER BOTTOM-SHEET ===== */ .player-backdrop { position: fixed; inset: 0; background: rgba(31,24,37,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .player-backdrop.open { opacity: 1; pointer-events: all; } .player-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 101; background: linear-gradient(180deg, var(--white) 0%, var(--creme) 100%); border-radius: 28px 28px 0 0; padding: 0.85rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(31,24,37,0.25); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); max-height: 92dvh; overflow-y: auto; } .player-sheet.open { transform: translateY(0); } .player-handle { width: 44px; height: 4px; background: var(--beige-mid); border-radius: 50px; margin: 0 auto 1.2rem; display: block; } .player-cover { width: 100%; aspect-ratio: 1; max-width: 280px; margin: 0 auto 1.5rem; border-radius: 24px; background: var(--beige); display: flex; align-items: center; justify-content: center; font-size: 6rem; box-shadow: 0 12px 40px rgba(107,79,53,0.25); position: relative; overflow: hidden; } .player-cover.playing::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 50%); animation: glowPulse 4s ease-in-out infinite; } .player-meta { text-align: center; margin-bottom: 1.5rem; } .player-tag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra); margin-bottom: 0.6rem; font-weight: 500; } .player-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; color: var(--text-dark); margin-bottom: 0.4rem; line-height: 1.25; } .player-desc { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; margin-bottom: 0.85rem; padding: 0 1rem; } .player-progress-wrap { margin-bottom: 1.5rem; } .player-progress { height: 4px; background: var(--beige); border-radius: 50px; overflow: hidden; margin-bottom: 0.5rem; cursor: pointer; } .player-progress-fill { height: 100%; background: linear-gradient(90deg, var(--terra), var(--gold)); border-radius: 50px; width: 0%; transition: width 0.1s linear; } .player-time { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-light); font-variant-numeric: tabular-nums; } .player-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; } .player-ctrl-btn { width: 50px; height: 50px; border-radius: 50%; background: transparent; border: 1.5px solid var(--beige-mid); color: var(--text-mid); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s, border-color 0.2s; -webkit-tap-highlight-color: transparent; } .player-ctrl-btn:active { transform: scale(0.92); } .player-play { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--terra), var(--warm-brown)); border: none; color: var(--white); font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-left: 5px; box-shadow: 0 8px 28px rgba(156,123,86,0.45); transition: transform 0.1s; -webkit-tap-highlight-color: transparent; } .player-play.is-playing { padding-left: 0; } .player-play:active { transform: scale(0.95); } .player-secondary { display: flex; justify-content: space-around; border-top: 1px solid var(--creme-dark); padding-top: 1rem; } .player-sec-btn { background: transparent; border: none; color: var(--text-light); font-family: 'Jost', sans-serif; font-size: 0.78rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; -webkit-tap-highlight-color: transparent; } .player-sec-btn span:first-child { font-size: 1.1rem; } .player-sec-btn:active { color: var(--terra); } /* ===== ATEM-VISUALIZER (Fullscreen) ===== */ .breath-screen { position: fixed; inset: 0; z-index: 200; background: radial-gradient(ellipse at 50% 0%, rgba(143,175,138,0.4) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(196,168,130,0.3) 0%, transparent 60%), #2a3a2e; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white); opacity: 0; pointer-events: none; transition: opacity 0.4s; } .breath-screen.open { opacity: 1; pointer-events: all; } .breath-close { position: absolute; top: max(env(safe-area-inset-top), 1rem); right: 1rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: var(--white); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .breath-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; margin-bottom: 0.5rem; opacity: 0.8; } .breath-cycle-meta { font-size: 0.85rem; opacity: 0.5; margin-bottom: 2.5rem; letter-spacing: 0.1em; text-transform: uppercase; } .breath-orb-wrap { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; margin-bottom: 2.5rem; } .breath-orb { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(220,235,215,0.5) 50%, transparent 80%); filter: blur(8px); transition: transform 4s cubic-bezier(0.4, 0, 0.6, 1); } .breath-orb-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); transition: transform 4s cubic-bezier(0.4, 0, 0.6, 1), opacity 4s; } .breath-orb-ring-1 { width: 180px; height: 180px; } .breath-orb-ring-2 { width: 220px; height: 220px; opacity: 0.6; } .breath-orb-wrap.inhale .breath-orb { transform: scale(1.6); } .breath-orb-wrap.inhale .breath-orb-ring-1 { transform: scale(1.2); opacity: 0.7; } .breath-orb-wrap.inhale .breath-orb-ring-2 { transform: scale(1.15); opacity: 0.4; } .breath-orb-wrap.exhale .breath-orb { transform: scale(0.6); } .breath-orb-wrap.exhale .breath-orb-ring-1 { transform: scale(0.85); opacity: 0.4; } .breath-orb-wrap.hold-in .breath-orb { transform: scale(1.6); } .breath-orb-wrap.hold-in .breath-orb-ring-1 { transform: scale(1.2); opacity: 0.7; } .breath-orb-wrap.hold-out .breath-orb { transform: scale(0.6); } .breath-instruction { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 400; margin-bottom: 0.5rem; letter-spacing: 0.04em; } .breath-counter { font-family: 'Cormorant Garamond', serif; font-size: 4rem; font-weight: 600; color: rgba(255,255,255,0.9); line-height: 1; margin-bottom: 1.5rem; font-variant-numeric: tabular-nums; } .breath-progress { position: absolute; bottom: max(env(safe-area-inset-bottom), 2rem); left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; align-items: center; } .breath-progress-text { font-size: 0.78rem; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; } .breath-progress-dots { display: flex; gap: 0.4rem; } .breath-progress-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: background 0.3s; } .breath-progress-dot.done { background: rgba(255,255,255,0.9); } /* ================================================================ KATEGORIE-HERO-GRID — ruhig, elegant, professionell ================================================================ */ .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-bottom: 1.4rem; } .cat-card { border-radius: 18px; padding: 1.3rem 1.1rem 1.2rem; display: flex; flex-direction: column; text-decoration: none; color: var(--text-dark); position: relative; overflow: hidden; min-height: 148px; justify-content: flex-end; background: var(--white); border: 1px solid var(--beige); box-shadow: 0 3px 16px rgba(107,79,53,0.07); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .cat-card:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(107,79,53,0.05); } /* Farbige Akzentlinie oben */ .cat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 18px 18px 0 0; } /* Aktiv-Zustand: sanfter Rahmen + leichte Elevation */ .cat-card.active { box-shadow: 0 6px 24px rgba(107,79,53,0.14); border-color: var(--sand); } .cat-card.active::after { content: ''; position: absolute; inset: 0; border: 1.5px solid var(--sand); border-radius: 18px; pointer-events: none; } /* Dekoratives Symbol (Unicode, kein Emoji) */ .cat-symbol { position: absolute; top: 1.1rem; right: 1.1rem; font-size: 1.3rem; opacity: 0.22; color: var(--text-dark); line-height: 1; font-family: 'Cormorant Garamond', serif; font-style: italic; } .cat-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; line-height: 1.1; margin-bottom: 0.25rem; color: var(--text-dark); } .cat-count { font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-light); } /* Akzentfarben je Kategorie */ .cat-reiki::before { background: linear-gradient(90deg, var(--terra), var(--gold)); } .cat-med::before { background: linear-gradient(90deg, #9B8BB4, #C4B8D8); } .cat-breath::before { background: linear-gradient(90deg, var(--sage), #A8C8A4); } .cat-ritual::before { background: linear-gradient(90deg, #7A88A8, #A8B4C8); } /* Sehr subtile Kartenhintergründe — kaum sichtbar, aber spürbar */ .cat-reiki { background: linear-gradient(160deg, #FFFDF8 0%, #FBF4E5 100%); } .cat-med { background: linear-gradient(160deg, #FFFDF8 0%, #F5F1FB 100%); } .cat-breath { background: linear-gradient(160deg, #FFFDF8 0%, #EFF6ED 100%); } .cat-ritual { background: linear-gradient(160deg, #FFFDF8 0%, #EEF1F8 100%); } /* Kompakt-Modus bei aktiver Kategorie */ .cat-grid.cat-grid-compact .cat-card { min-height: 96px; padding: 0.85rem 0.9rem 0.9rem; } .cat-grid.cat-grid-compact .cat-name { font-size: 1.1rem; } .cat-grid.cat-grid-compact .cat-symbol { font-size: 1.1rem; top: 0.85rem; right: 0.85rem; } /* Zurück-Zeile — standardmäßig versteckt, per JS .visible eingeblendet */ .cat-back-row { display: none; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; padding-left: 0.1rem; } .cat-back-row.visible { display: flex; } .cat-back-link { font-size: 0.82rem; color: var(--terra); text-decoration: none; font-weight: 500; letter-spacing: 0.02em; transition: opacity 0.2s; } .cat-back-link:active { opacity: 0.6; } .cat-active-label { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--text-dark); } /* ================================================================ DASHBOARD QUICK-TILES 2×2 — ruhig & elegant ================================================================ */ .quick-row-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-bottom: 1.2rem; } .quick-tile-lg { border-radius: 18px; padding: 1.2rem 1rem 1.15rem; display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--text-dark); position: relative; overflow: hidden; min-height: 124px; justify-content: flex-end; border: 1px solid var(--beige); box-shadow: 0 3px 14px rgba(107,79,53,0.07); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } /* Farbige Akzentlinie oben */ .quick-tile-lg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 18px 18px 0 0; } .quick-tile-lg:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(107,79,53,0.05); } /* Dekoratives Symbol oben rechts */ .qt-symbol { position: absolute; top: 1rem; right: 1rem; font-size: 1.2rem; font-family: 'Cormorant Garamond', serif; font-style: italic; opacity: 0.2; color: var(--text-dark); line-height: 1; } .qt-label { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 400; line-height: 1.15; margin-bottom: 0.2rem; color: var(--text-dark); } .qt-sub { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); } /* Subtile Hintergründe + Akzentlinien */ .qt-breath { background: linear-gradient(160deg, #FFFDF8 0%, #EFF6ED 100%); } .qt-breath::before { background: linear-gradient(90deg, var(--sage), #A8C8A4); } .qt-med { background: linear-gradient(160deg, #FFFDF8 0%, #F5F1FB 100%); } .qt-med::before { background: linear-gradient(90deg, #9B8BB4, #C4B8D8); } .qt-reiki { background: linear-gradient(160deg, #FFFDF8 0%, #FBF4E5 100%); } .qt-reiki::before { background: linear-gradient(90deg, var(--terra), var(--gold)); } .qt-moon { background: linear-gradient(160deg, #FFFDF8 0%, #EEF1F8 100%); } .qt-moon::before { background: linear-gradient(90deg, #7A88A8, #A8B4C8); } :root { --creme: #FAF6F0; --creme-dark: #F0E8D6; --beige: #EDE0CC; --beige-mid: #D9C4A8; --sand: #C4A882; --terra: #9C7B56; --warm-brown: #8B6F4E; --earth: #6B5038; --text-dark: #3D2C1E; --text-mid: #6B5A47; --text-light: #9B8575; --sage: #8A9E88; --sage-light: #B5C4B3; --dusty-rose: #C9A090; --gold: #C9A84C; --gold-light: #E8D5A0; --white: #FFFDF9; /* Dreamy shadows — exakt wie Homepage */ --shadow: rgba(139, 111, 78, 0.10); --shadow-md: rgba(139, 111, 78, 0.18); --shadow-soft: 0 4px 24px rgba(139,111,78,0.07), 0 1px 6px rgba(139,111,78,0.04); --shadow-mid: 0 12px 48px rgba(139,111,78,0.11), 0 4px 16px rgba(139,111,78,0.06); --shadow-deep: 0 20px 72px rgba(139,111,78,0.10), 0 6px 24px rgba(61,44,30,0.05); --transition: 0.5s cubic-bezier(0.23, 0.53, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Jost', sans-serif; background-color: var(--creme); color: var(--text-dark); font-weight: 300; line-height: 1.7; overflow-x: hidden; /* Verhindert horizontales Scrollen */ } /* TYPOGRAPHY */ h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.2; } .script { font-family: 'Dancing Script', cursive; color: var(--terra); } .serif { font-family: 'Cormorant Garamond', serif; } /* ============================================ NAV — Premium Landing-Navigation ============================================ */ nav.main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250, 246, 238, 0.78); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(232,220,200,0.6); padding: 0 max(env(safe-area-inset-left), 1.25rem) 0 max(env(safe-area-inset-right), 1.25rem); height: 78px; display: flex; align-items: center; justify-content: space-between; transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } nav.main-nav.scrolled { height: 64px; background: rgba(250, 246, 238, 0.94); box-shadow: 0 4px 24px rgba(107,79,53,0.06); } /* Goldene Schimmer-Linie unter der Nav */ nav.main-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.5) 30%, rgba(156,123,86,0.6) 50%, rgba(201,168,76,0.5) 70%, transparent 100%); background-size: 200% 100%; animation: shimmerGold 8s linear infinite; opacity: 0.4; } /* LOGO */ .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 600; color: var(--text-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; position: relative; } .nav-logo-icon { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } .nav-logo-star { position: relative; z-index: 1; font-size: 1.4rem; color: var(--gold); filter: drop-shadow(0 0 4px rgba(201,168,76,0.5)); animation: spin-slow 18s linear infinite; display: inline-block; } .nav-logo-glow { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.4) 0%, transparent 70%); z-index: 0; animation: glowPulse 4s ease-in-out infinite; } .nav-logo-text { letter-spacing: 0.01em; } .nav-logo-bold { color: var(--terra); font-weight: 600; } /* NAV-LINKS */ .nav-links { display: flex; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .nav-link { text-decoration: none; color: var(--text-mid); font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 1rem; border-radius: 50px; position: relative; transition: color 0.25s ease; display: inline-block; } /* Untergrund-Pill, der beim Hover sanft erscheint */ .nav-link::before { content: ''; position: absolute; inset: 0; border-radius: 50px; background: linear-gradient(135deg, rgba(232,220,200,0.6), rgba(196,168,130,0.25)); opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1); z-index: -1; } /* Goldener Punkt, der beim Hover unter dem Link erscheint */ .nav-link::after { content: '✦'; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%) translateY(8px) scale(0); font-size: 0.5rem; color: var(--gold); opacity: 0; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; } .nav-link:hover { color: var(--terra); } .nav-link:hover::before { opacity: 1; transform: scale(1); } .nav-link:hover::after { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } /* NAV-CTA — der Premium-"Kostenlos starten" Button */ .nav-cta { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.35rem; border-radius: 50px; background: linear-gradient(135deg, var(--terra) 0%, var(--warm-brown) 100%); color: var(--white); text-decoration: none; font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-left: 0.85rem; overflow: hidden; box-shadow: 0 4px 18px rgba(156,123,86,0.35), inset 0 1px 0 rgba(255,255,255,0.2); transition: transform 0.2s, box-shadow 0.3s; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(156,123,86,0.5), inset 0 1px 0 rgba(255,255,255,0.3); } .nav-cta:active { transform: translateY(0); } /* Glanz-Animation, die periodisch über den Button huscht */ .nav-cta-shine { position: absolute; top: -100%; left: -50%; width: 50%; height: 300%; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform: rotate(15deg); animation: ctaShine 5s ease-in-out infinite; pointer-events: none; } @keyframes ctaShine { 0%, 70% { left: -50%; } 85% { left: 130%; } 100% { left: 130%; } } .nav-cta-text { position: relative; z-index: 1; } .nav-cta-arrow { display: inline-block; font-size: 0.95rem; position: relative; z-index: 1; transition: transform 0.25s; } .nav-cta:hover .nav-cta-arrow { transform: translateX(3px); } /* HAMBURGER (Mobile-Toggle) */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; width: 44px; height: 44px; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; } .menu-toggle-bar { display: block; width: 22px; height: 1.8px; background: var(--text-dark); border-radius: 2px; position: absolute; left: 11px; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s, background 0.2s; } .menu-toggle-bar:nth-child(1) { top: 14px; } .menu-toggle-bar:nth-child(2) { top: 21px; width: 16px; } .menu-toggle-bar:nth-child(3) { top: 28px; } .menu-toggle:hover .menu-toggle-bar { background: var(--terra); } .menu-toggle.is-open .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 22px; background: var(--terra); } .menu-toggle.is-open .menu-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0.3); } .menu-toggle.is-open .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 22px; background: var(--terra); } /* ============================================ MOBILE OVERLAY-MENU (Vollbild) ============================================ */ .nav-menu { position: fixed; inset: 0; z-index: 99; background: linear-gradient(135deg, var(--creme) 0%, var(--beige) 60%, #F5E8D5 100%); display: flex; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top), 6rem) 1.5rem max(env(safe-area-inset-bottom), 2rem); visibility: hidden; opacity: 0; transform: scale(1.05); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1), visibility 0s 0.4s; overflow-y: auto; } .nav-menu.is-open { visibility: visible; opacity: 1; transform: scale(1); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1), visibility 0s; } .nav-menu-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .nav-menu-orb { position: absolute; border-radius: 50%; filter: blur(60px); } .nav-menu-orb-1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(196,168,130,0.5), transparent 70%); top: -100px; right: -100px; animation: orbDrift1 18s ease-in-out infinite; } .nav-menu-orb-2 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(143,175,138,0.4), transparent 70%); bottom: -100px; left: -100px; animation: orbDrift2 22s ease-in-out infinite; } .nav-menu-stars { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 15% 25%, rgba(201,168,76,0.6), transparent), radial-gradient(1.5px 1.5px at 85% 35%, rgba(201,168,76,0.5), transparent), radial-gradient(2px 2px at 70% 75%, rgba(201,168,76,0.5), transparent), radial-gradient(1.5px 1.5px at 30% 80%, rgba(201,168,76,0.6), transparent), radial-gradient(2px 2px at 50% 15%, rgba(201,168,76,0.4), transparent); animation: moonStarTwinkle 4s ease-in-out infinite alternate; opacity: 0.7; } .nav-menu-inner { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 0.75rem; } /* Einzelner Link im Mobile-Menu */ .nav-menu-link { display: flex; align-items: center; gap: 1rem; background: rgba(255,253,248,0.75); backdrop-filter: blur(10px); border: 1px solid rgba(232,220,200,0.6); border-radius: 22px; padding: 1.05rem 1.25rem; text-decoration: none; color: var(--text-dark); font-family: 'Jost', sans-serif; box-shadow: 0 4px 18px rgba(107,79,53,0.06); transform: translateY(20px); opacity: 0; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.5s; -webkit-tap-highlight-color: transparent; } .nav-menu.is-open .nav-menu-link { transform: translateY(0); opacity: 1; transition-delay: calc(0.15s + var(--i, 0) * 0.07s); } .nav-menu-link:active { transform: scale(0.98); background: rgba(255,253,248,0.95); } .nav-menu-icon { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--beige), var(--sand)); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; box-shadow: 0 2px 10px rgba(156,123,86,0.2); } .nav-menu-text { flex: 1; min-width: 0; } .nav-menu-text strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.15rem; line-height: 1; } .nav-menu-text small { display: block; font-size: 0.78rem; color: var(--text-light); font-weight: 400; letter-spacing: 0.02em; } .nav-menu-arrow { font-size: 1.6rem; color: var(--text-light); transition: transform 0.25s; } .nav-menu-link:hover .nav-menu-arrow { transform: translateX(3px); color: var(--terra); } /* Großer CTA im Mobile-Menu */ .nav-menu-cta { display: block; text-align: center; background: linear-gradient(135deg, var(--terra), var(--warm-brown)); color: var(--white); padding: 1.15rem; border-radius: 22px; text-decoration: none; font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.06em; box-shadow: 0 8px 28px rgba(156,123,86,0.4); margin-top: 0.5rem; transform: translateY(20px); opacity: 0; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.5s; -webkit-tap-highlight-color: transparent; } .nav-menu.is-open .nav-menu-cta { transform: translateY(0); opacity: 1; transition-delay: calc(0.15s + var(--i, 0) * 0.07s); } .nav-menu-cta:active { transform: scale(0.98); } .nav-menu-footer { text-align: center; margin-top: 1.5rem; opacity: 0; transform: translateY(10px); transition: opacity 0.6s 0.4s, transform 0.6s 0.4s; } .nav-menu.is-open .nav-menu-footer { opacity: 1; transform: translateY(0); } .nav-menu-quote { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-style: italic; color: var(--text-mid); line-height: 1.4; margin-bottom: 0.4rem; } .nav-menu-quote-author { font-size: 0.74rem; color: var(--text-light); letter-spacing: 0.06em; } /* Body-Lock bei offenem Menu */ body.nav-locked { overflow: hidden; } /* Responsive Breakpoint: Mobile-Menu aktiv */ @media (max-width: 860px) { nav.main-nav .nav-links { display: none; } nav.main-nav .menu-toggle { display: inline-flex; align-items: center; justify-content: center; } } /* Bei größeren Screens das Mobile-Menu komplett ausblenden */ @media (min-width: 861px) { .nav-menu { display: none; } } /* BUTTONS */ .btn { display: inline-block; padding: 0.85rem 2.2rem; border-radius: 50px; font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s ease; } .btn-primary { background: var(--terra); color: var(--white); box-shadow: 0 4px 20px rgba(156, 123, 86, 0.35); } .btn-primary:hover { background: var(--warm-brown); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(156, 123, 86, 0.45); } .btn-outline { background: transparent; color: var(--terra); border: 1.5px solid var(--terra); } .btn-outline:hover { background: var(--terra); color: var(--white); transform: translateY(-2px); } .btn-sage { background: var(--sage); color: var(--white); } .btn-sage:hover { background: #7a9d74; transform: translateY(-2px); } /* CARDS */ .card { background: var(--white); border-radius: 20px; border: 1px solid var(--beige); box-shadow: 0 4px 24px var(--shadow); transition: transform 0.3s, box-shadow 0.3s; overflow: hidden; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px var(--shadow-md); } /* DIVIDERS */ .divider { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--beige-mid); } .divider-icon { color: var(--terra); font-size: 1rem; } /* SECTION */ section { padding: 5rem 2rem; } .container { max-width: 1200px; margin: 0 auto; } /* BADGE */ .badge { display: inline-block; padding: 0.25rem 1rem; border-radius: 50px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .badge-free { background: var(--beige); color: var(--text-mid); } .badge-basic { background: var(--sage-light); color: #4a7045; } .badge-premium { background: var(--gold-light); color: #8a6b1a; } .badge-locked { background: var(--dusty-rose); color: var(--white); } /* FORMS */ .form-group { margin-bottom: 1.2rem; } .form-group label { display: block; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 0.4rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.85rem 1.1rem; border: 1.5px solid var(--beige-mid); border-radius: 12px; background: var(--creme); color: var(--text-dark); font-family: 'Jost', sans-serif; font-size: 0.95rem; transition: border-color 0.3s, box-shadow 0.3s; outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(156, 123, 86, 0.12); } /* ORNAMENTS */ .ornament { text-align: center; color: var(--beige-mid); font-size: 1.5rem; letter-spacing: 0.5rem; margin: 1rem 0; } /* HERO PATTERN */ .hero-pattern { background-image: radial-gradient(circle at 20% 20%, rgba(196, 168, 130, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(143, 175, 138, 0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 60%); } /* ANIMATIONS */ @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-12px) rotate(1deg); } 66% { transform: translateY(-6px) rotate(-1deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes shimmerGold { 0% { background-position: -300% center; } 100% { background-position: 300% center; } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(156,123,86,0.2), 0 4px 24px var(--shadow); } 50% { box-shadow: 0 0 40px rgba(156,123,86,0.4), 0 8px 40px rgba(156,123,86,0.25); } } @keyframes orbit { from { transform: rotate(0deg) translateX(220px) rotate(0deg); } to { transform: rotate(360deg) translateX(220px) rotate(-360deg); } } @keyframes orbit2 { from { transform: rotate(120deg) translateX(220px) rotate(-120deg); } to { transform: rotate(480deg) translateX(220px) rotate(-480deg); } } @keyframes orbit3 { from { transform: rotate(240deg) translateX(220px) rotate(-240deg); } to { transform: rotate(600deg) translateX(220px) rotate(-600deg); } } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } } @keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes slideUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } @keyframes ripple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ANIMATION CLASSES */ .float { animation: float 7s ease-in-out infinite; } .breathe { animation: breathe 4s ease-in-out infinite; } .fade-in { animation: fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards; } .fade-in-2 { animation: fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.15s both; } .fade-in-3 { animation: fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both; } .fade-left { animation: fadeInLeft 0.9s cubic-bezier(0.16,1,0.3,1) forwards; } .fade-right { animation: fadeInRight 0.9s cubic-bezier(0.16,1,0.3,1) forwards; } /* SCROLL-REVEAL */ .reveal { opacity: 0; transform: translateY(50px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal-left.revealed { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal-right.revealed { opacity: 1; transform: translateX(0); } /* STAGGER DELAYS */ .delay-1 { transition-delay: 0.1s !important; } .delay-2 { transition-delay: 0.2s !important; } .delay-3 { transition-delay: 0.3s !important; } .delay-4 { transition-delay: 0.4s !important; } .delay-5 { transition-delay: 0.5s !important; } /* SHIMMER TEXT */ .shimmer-text { background: linear-gradient(90deg, var(--terra), var(--gold), var(--terra), var(--warm-brown)); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmerGold 4s linear infinite; } /* GLOW BUTTON */ .btn-glow { position: relative; overflow: hidden; } .btn-glow::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(90deg, var(--terra), var(--gold), var(--dusty-rose), var(--terra)); background-size: 300%; border-radius: 50px; z-index: -1; animation: shimmerGold 3s linear infinite; opacity: 0; transition: opacity 0.3s; } .btn-glow:hover::after { opacity: 1; } /* MAGNETIC HOVER — cards */ .card-magnetic { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; will-change: transform; position: relative; /* Für Spotlight-Effekt */ overflow: hidden; /* Für Spotlight-Effekt */ } /* SPOTLIGHT HOVER */ .card-magnetic::before { content: ''; position: absolute; width: 150px; /* Kleinere Größe für Karten */ height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.1) 0%, transparent 70%); /* Dezenter Gold-Spotlight */ pointer-events: none; opacity: 0; transition: opacity 0.4s, transform 0.4s; transform: translate(-50%, -50%) scale(0.5); /* Startet kleiner und unsichtbar */ z-index: 0; top: var(--mouse-y, 50%); /* Dynamische Position */ left: var(--mouse-x, 50%); /* Dynamische Position */ } .card-magnetic:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); /* Wird größer und sichtbar */ } /* GLASS CARD */ .glass-card { background: rgba(255, 253, 248, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(212, 196, 168, 0.5); box-shadow: 0 8px 32px rgba(107,79,53,0.1), inset 0 1px 0 rgba(255,255,255,0.6); } /* TWINKLING STARS */ .star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); animation: twinkle var(--dur, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); } /* RIPPLE EFFECT */ .ripple-wrap { position: relative; overflow: hidden; } .ripple-wrap .ripple-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(156,123,86,0.3); pointer-events: none; animation: ripple 2.5s ease-out infinite; } .ripple-wrap .ripple-ring:nth-child(2) { animation-delay: 0.8s; } .ripple-wrap .ripple-ring:nth-child(3) { animation-delay: 1.6s; } /* GRADIENT ANIMATED BG */ .animated-bg { background: linear-gradient(-45deg, var(--creme), var(--beige), #FFF0E8, var(--creme-dark)); background-size: 400% 400%; animation: gradientShift 12s ease infinite; } /* ORBITING BADGES */ .orbit-system { position: relative; display: flex; align-items: center; justify-content: center; } .orbit-item { position: absolute; background: var(--white); border: 1px solid var(--beige); border-radius: 50px; padding: 0.5rem 1rem; font-size: 0.78rem; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 16px var(--shadow); animation: orbit 14s linear infinite; } .orbit-item:nth-child(2) { animation: orbit2 14s linear infinite; } .orbit-item:nth-child(3) { animation: orbit3 14s linear infinite; } /* COUNTER ANIMATION */ .counter { font-variant-numeric: tabular-nums; } /* SPOTLIGHT HOVER */ .spotlight { position: relative; overflow: hidden; } .spotlight::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity 0.3s; transform: translate(-50%, -50%); z-index: 0; } .spotlight:hover::before { opacity: 1; } /* BORDER GRADIENT */ .border-gradient { position: relative; background: var(--white); border-radius: 20px; } .border-gradient::before { content: ''; position: absolute; inset: -1.5px; border-radius: 21px; background: linear-gradient(135deg, var(--terra), var(--gold), var(--sage), var(--terra)); z-index: -1; background-size: 300%; animation: shimmerGold 4s linear infinite; } /* TYPING CURSOR */ .typing::after { content: '|'; animation: twinkle 0.8s ease-in-out infinite; color: var(--terra); font-weight: 300; } /* PARTICLE CANVAS */ #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.85; } /* ===== HERO MAGIC ===== */ /* Funkelnde Sterne im Hero (werden via JS positioniert) */ .hero-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero-star { position: absolute; font-size: var(--star-size, 0.85rem); color: var(--gold); opacity: 0; animation: starTwinkle var(--star-dur, 4s) ease-in-out infinite; animation-delay: var(--star-delay, 0s); filter: drop-shadow(0 0 3px rgba(201,168,76,0.5)); } @keyframes starTwinkle { 0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); } 50% { opacity: 0.9; transform: scale(1.1) rotate(180deg); } } /* Konzentrische Energie-Ringe um den Hero-Kreis */ .energy-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid var(--beige-mid); pointer-events: none; transform: translate(-50%, -50%); opacity: 0.45; } .energy-ring-1 { width: 480px; height: 480px; border-style: dashed; animation: spin-slow 60s linear infinite; } .energy-ring-2 { width: 560px; height: 560px; border-color: var(--sand); opacity: 0.3; animation: spin-slow 90s linear infinite reverse; } .energy-ring-3 { width: 660px; height: 660px; border-color: var(--gold); opacity: 0.18; border-style: dotted; animation: spin-slow 120s linear infinite; } /* Verbesserter Hero-Kreis mit Inner-Glow */ .hero-circle { position: relative; z-index: 2; } .hero-circle-inner { position: relative; z-index: 2; display: inline-block; filter: drop-shadow(0 8px 20px rgba(156,123,86,0.35)); } .hero-circle-glow { position: absolute; inset: 25%; border-radius: 50%; background: radial-gradient(circle, rgba(255,235,200,0.7) 0%, rgba(201,168,76,0.2) 40%, transparent 70%); z-index: 1; animation: glowPulse 5s ease-in-out infinite; pointer-events: none; } @keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } /* Orbitierende Sparkle-Sternchen */ .orbit-sparkle { position: absolute; top: 50%; left: 50%; font-size: 1.4rem; color: var(--gold); filter: drop-shadow(0 0 6px rgba(201,168,76,0.6)); pointer-events: none; z-index: 3; } .orbit-sparkle-1 { animation: orbitSparkle1 18s linear infinite; } .orbit-sparkle-2 { font-size: 1rem; color: var(--sage); filter: drop-shadow(0 0 6px rgba(143,175,138,0.6)); animation: orbitSparkle2 22s linear infinite; } .orbit-sparkle-3 { font-size: 1.2rem; color: var(--dusty-rose); filter: drop-shadow(0 0 6px rgba(201,144,138,0.6)); animation: orbitSparkle3 26s linear infinite; } @keyframes orbitSparkle1 { from { transform: translate(-50%, -50%) rotate(0deg) translateX(220px) rotate(0deg); opacity: 0.9; } 50% { opacity: 0.4; } to { transform: translate(-50%, -50%) rotate(360deg) translateX(220px) rotate(-360deg); opacity: 0.9; } } @keyframes orbitSparkle2 { from { transform: translate(-50%, -50%) rotate(120deg) translateX(255px) rotate(-120deg); opacity: 0.7; } 50% { opacity: 0.3; } to { transform: translate(-50%, -50%) rotate(480deg) translateX(255px) rotate(-480deg); opacity: 0.7; } } @keyframes orbitSparkle3 { from { transform: translate(-50%, -50%) rotate(240deg) translateX(195px) rotate(-240deg); opacity: 0.85; } 50% { opacity: 0.4; } to { transform: translate(-50%, -50%) rotate(600deg) translateX(195px) rotate(-600deg); opacity: 0.85; } } /* Trust-Indikator unter den Buttons */ .hero-trust { display: flex; align-items: center; gap: 0.85rem; margin-top: 2rem; opacity: 0; animation: fadeInUp 1s cubic-bezier(0.16,1,0.3,1) 0.6s forwards; } .trust-avatars { display: inline-flex; } .trust-av { width: 32px; height: 32px; border-radius: 50%; background: var(--beige); border: 2px solid var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; margin-left: -8px; box-shadow: 0 2px 8px var(--shadow); } .trust-av:first-child { margin-left: 0; } .trust-label { font-size: 0.82rem; color: var(--text-mid); line-height: 1.4; } .trust-label strong { color: var(--terra); font-weight: 500; } /* Scroll-Indikator */ .scroll-indicator { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--text-light); text-decoration: none; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; animation: fadeInUp 1.2s cubic-bezier(0.16,1,0.3,1) 1s forwards, scrollBob 2.5s ease-in-out 2s infinite; z-index: 5; } .scroll-indicator-arrow { font-size: 1rem; color: var(--terra); } @keyframes scrollBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } @media (max-width: 768px) { .hero-trust { justify-content: center; } .scroll-indicator { display: none; } .energy-ring, .orbit-sparkle { display: none; } } /* SCROLLBAR */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--creme-dark); } ::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 3px; } /* PROGRESS BAR */ .progress-bar-wrap { background: var(--beige); border-radius: 50px; height: 8px; overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: 50px; background: linear-gradient(90deg, var(--terra), var(--gold)); transition: width 1s ease; } /* PLAN CARDS */ .plan-card { border-radius: 24px; padding: 2.5rem 2rem; border: 1.5px solid var(--beige-mid); background: var(--white); transition: all 0.3s; position: relative; overflow: hidden; } .plan-card.featured { border-color: var(--terra); background: linear-gradient(135deg, var(--white) 0%, #FFF5EE 100%); box-shadow: 0 12px 48px rgba(156, 123, 86, 0.2); transform: scale(1.02); } .plan-card.featured::before { content: '✦ Beliebt'; position: absolute; top: 1rem; right: 1rem; background: var(--terra); color: var(--white); padding: 0.2rem 0.8rem; border-radius: 50px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } /* CONTENT CARD */ .content-card { border-radius: 20px; overflow: hidden; background: var(--white); border: 1px solid var(--beige); box-shadow: 0 4px 20px var(--shadow); transition: all 0.3s; } .content-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px var(--shadow-md); } .content-card.locked { opacity: 0.75; } .content-thumb { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; } .lock-overlay { position: absolute; inset: 0; background: rgba(250, 246, 238, 0.65); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; backdrop-filter: blur(2px); } /* SIDEBAR */ .sidebar { width: 240px; background: var(--white); border-right: 1px solid var(--beige); height: 100vh; position: fixed; left: 0; top: 0; padding: 0; display: flex; flex-direction: column; z-index: 90; } .sidebar-logo { padding: 1.5rem; border-bottom: 1px solid var(--beige); } .sidebar-nav { flex: 1; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; } .sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 12px; text-decoration: none; color: var(--text-mid); font-size: 0.9rem; font-weight: 400; transition: all 0.2s; } .sidebar-link:hover, .sidebar-link.active { background: var(--creme-dark); color: var(--terra); } .sidebar-link .icon { font-size: 1.1rem; width: 24px; text-align: center; } .sidebar-bottom { padding: 1.5rem; border-top: 1px solid var(--beige); } /* MAIN WITH SIDEBAR */ .with-sidebar { margin-left: 240px; } /* TAGS */ .tag { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 50px; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .tag-breath { background: var(--sage-light); color: #3a6035; } .tag-reiki { background: var(--gold-light); color: #7a5a10; } .tag-meditation { background: #DDD0F0; color: #5a3a8a; } .tag-ritual { background: var(--beige); color: var(--terra); } /* MOBILE */ @media (max-width: 768px) { body { padding-left: 0; padding-right: 0; } .nav-links { display: none; } #menu-toggle { display: flex; } #nav-menu { /* Vollbild-Overlay für index.html */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); padding-top: 70px; /* Platz für die obere Nav */ display: flex; flex-direction: column; gap: 1.5rem; z-index: 100; /* Über allem */ transform: translateX(100%); /* Standardmäßig ausgeblendet (rechts außerhalb des Bildschirms) */ transition: transform 0.3s ease-in-out; pointer-events: all; /* Sicherstellen, dass Klicks erkannt werden */ } #nav-menu.open { transform: translateX(0%); /* Eingeblendet */ } .sidebar { /* Sidebar für Dashboard/Content auf Mobile */ position: fixed; top: 0; left: -240px; /* Standardmäßig ausgeblendet */ width: 240px; height: 100vh; background: var(--white); border-right: 1px solid var(--beige); flex-direction: column; z-index: 95; /* Über dem Inhalt, unter dem Nav-Overlay */ transition: left 0.3s ease-in-out; display: flex; /* Muss flex sein für die Transition */ } .sidebar.open { left: 0; /* Eingeblendet */ } .with-sidebar { margin-left: 0; } .main-content { margin-left: 0; padding: 1.5rem; } /* Allgemeine mobile Anpassungen */ section { padding: 2.5rem 1rem; } .container { padding: 0 1rem; } .hero { flex-direction: column; text-align: center; padding-top: 6rem; padding-bottom: 2rem; } .hero-content { max-width: 100%; } .hero-btns { justify-content: center; } .hero-visual { display: none; } .features-grid, .testimonials-grid, .plans-grid, .dash-grid, .quick-grid { grid-template-columns: 1fr; } .dash-grid .col-span-2, .dash-grid .col-span-3 { grid-column: span 1; } .quick-grid { grid-template-columns: repeat(2, 1fr); } .float-badge { display: none; } } /* ADMIN SPECIFIC */ .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { text-align: left; padding: 0.75rem 1rem; font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); border-bottom: 1px solid var(--beige); } .admin-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--beige); font-size: 0.9rem; vertical-align: middle; } .admin-table tr:hover td { background: var(--creme); } /* QUOTE CARD */ .quote-card { background: linear-gradient(135deg, var(--terra) 0%, var(--warm-brown) 100%); border-radius: 20px; padding: 2rem; color: var(--white); position: relative; overflow: hidden; } .quote-card::before { content: '"'; position: absolute; top: -1.5rem; left: 1rem; font-family: 'Cormorant Garamond', serif; font-size: 8rem; color: rgba(255,255,255,0.08); line-height: 1; } /* STAT CARDS */ .stat-card { background: var(--white); border: 1px solid var(--beige); border-radius: 16px; padding: 1.5rem; text-align: center; } .stat-number { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; font-weight: 600; color: var(--terra); line-height: 1; } /* FILTER TABS */ .filter-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; } .filter-tab { padding: 0.5rem 1.2rem; border: 1.5px solid var(--beige-mid); border-radius: 50px; background: transparent; color: var(--text-mid); font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; } .filter-tab:hover, .filter-tab.active { background: var(--terra); border-color: var(--terra); color: var(--white); } /* ================================================================ KURSTYP-PICKER (Abo-Inhalt vs. Einzelkurs mit Stripe-Preis) ================================================================ */ .admin-coursetype-picker { display: flex; flex-direction: column; gap: 0.65rem; } .admin-coursetype-option { display: block; cursor: pointer; } .admin-coursetype-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .admin-coursetype-card { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.9rem 1rem; border: 2px solid var(--beige-mid, #E0D5C5); border-radius: 14px; background: var(--white, #FDFAF6); transition: all 0.2s; cursor: pointer; } .admin-coursetype-option input:checked + .admin-coursetype-card { border-color: var(--terra, #8B6347); background: rgba(139,99,71,0.06); } .admin-coursetype-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; margin-top: 0.1rem; } .admin-coursetype-label { font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--text-dark, #2E2A24); letter-spacing: 0.02em; margin-bottom: 0.2rem; } .admin-coursetype-desc { font-size: 0.8rem; color: var(--text-light, #7A7267); line-height: 1.4; } /* Preis-Eingabe */ .admin-price-row { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--beige-mid, #E0D5C5); border-radius: 12px; overflow: hidden; background: var(--white, #FDFAF6); } .admin-price-symbol { padding: 0.75rem 0.9rem; font-size: 1.1rem; font-weight: 600; color: var(--terra, #8B6347); background: rgba(139,99,71,0.07); border-right: 1.5px solid var(--beige-mid, #E0D5C5); user-select: none; } .admin-price-row input[type="number"] { flex: 1; border: none; outline: none; padding: 0.75rem 1rem; font-family: 'Jost', sans-serif; font-size: 1.1rem; font-weight: 500; color: var(--text-dark, #2E2A24); background: transparent; -moz-appearance: textfield; } .admin-price-row input::-webkit-outer-spin-button, .admin-price-row input::-webkit-inner-spin-button { -webkit-appearance: none; } /* Stripe-Status-Badge */ .admin-stripe-status { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; } .admin-stripe-pill { background: #D1FAE5; color: #065F46; font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 50px; } .admin-stripe-status code { font-size: 0.72rem; color: var(--text-light, #7A7267); background: var(--creme, #F5EEE4); padding: 0.2rem 0.5rem; border-radius: 6px; } /* ================================================================ ADMIN-TABS: 5-Tab-Layout ================================================================ */ .admin-tabs-5 { grid-template-columns: repeat(5, 1fr); } .admin-tabs-5 .admin-tab-btn { padding: 0.7rem 0.1rem; } .admin-tabs-5 .admin-tab-icon { font-size: 1.1rem; } .admin-tabs-5 .admin-tab-label { font-size: 0.62rem; letter-spacing: 0; } .admin-tabs-5 .admin-tab-count { position: static; margin-top: 0; font-size: 0.62rem; padding: 0.08em 0.45em; } /* ================================================================ KURSTYP: Kompakter Segmented Control (ersetzt dicke Cards) ================================================================ */ .admin-seg { display: flex; border: 1px solid var(--border, #DDD4C4); border-radius: 8px; overflow: hidden; background: var(--creme, #F5EEE4); } .admin-seg-opt { flex: 1; display: block; cursor: pointer; } .admin-seg-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .admin-seg-opt span { display: block; padding: 9px 10px; text-align: center; font-size: 0.84rem; color: var(--text-muted, #8C8070); transition: background 0.18s, color 0.18s; border-right: 1px solid var(--border, #DDD4C4); line-height: 1.3; } .admin-seg-opt:last-child span { border-right: none; } .admin-seg-opt input:checked + span { background: var(--terra, #8B5E3C); color: #fff; font-weight: 500; } /* ================================================================ RECHNUNGEN — Tab-Inhalt ================================================================ */ .admin-invoices-loading { text-align: center; padding: 2.5rem 1rem; opacity: .5; } .admin-invoice-month { margin: 0 0 1.4rem; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--border, #EDE4D4); } .admin-invoice-month-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 11px; background: var(--creme, #F5EEE4); border-bottom: 1px solid var(--border, #EDE4D4); gap: 12px; } .admin-invoice-month-title { font-weight: 600; font-size: 0.92rem; color: var(--text, #3E3528); } .admin-invoice-month-sub { font-size: 0.76rem; color: var(--text-muted, #8C8070); margin-top: 2px; } .admin-invoice-zip-btn { background: var(--terra, #8B5E3C); color: #fff; border: none; border-radius: 8px; padding: 7px 13px; font-size: 0.79rem; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity .18s; } .admin-invoice-zip-btn:disabled { opacity: .45; cursor: default; } .admin-invoice-zip-btn:not(:disabled):active { opacity: .78; } .admin-invoice-list { padding: 0 0 4px; } .admin-invoice-row { display: grid; grid-template-columns: 58px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--creme, #F5EEE4); } .admin-invoice-row:last-child { border-bottom: none; } .admin-invoice-num { font-size: 0.71rem; color: var(--text-muted, #8C8070); font-variant-numeric: tabular-nums; white-space: nowrap; } .admin-invoice-buyer { font-size: 0.87rem; font-weight: 500; color: var(--text, #3E3528); } .admin-invoice-meta { font-size: 0.73rem; color: var(--text-muted, #8C8070); margin-top: 1px; } .admin-invoice-course { font-size: 0.73rem; color: var(--terra, #8B5E3C); margin-top: 2px; } .admin-invoice-amount { font-size: 0.88rem; font-weight: 600; color: var(--text, #3E3528); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .admin-invoice-pdf-btn { background: transparent; border: 1px solid var(--border, #DDD4C4); border-radius: 7px; padding: 5px 10px; font-size: 0.74rem; color: var(--terra, #8B5E3C); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .admin-invoice-pdf-btn:hover { background: var(--creme, #F5EEE4); border-color: var(--terra, #8B5E3C); } /* ═══════════════════════════════════════════════════════ ADMIN — Kurs-Verwaltung mit inline Modulen ═══════════════════════════════════════════════════════ */ .course-admin-card { background: var(--white); border: 1px solid var(--beige); border-radius: 16px; overflow: hidden; margin-bottom: 1rem; box-shadow: 0 2px 12px var(--shadow); } .course-admin-header { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--creme-dark); } .course-admin-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .course-admin-meta-block { flex: 1; min-width: 0; } .course-admin-name { font-size: 0.9rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .course-admin-sub { font-size: 0.71rem; color: var(--text-light); } .cam-status.published { color: #2d7a4a; } .cam-status.draft { color: var(--text-light); } /* Buttons (Bearbeiten, Entfernen, Neues Modul) */ .cam-btn { background: transparent; border: 1px solid var(--beige); border-radius: 7px; padding: 0.28rem 0.65rem; font-size: 0.72rem; font-family: 'Jost', sans-serif; color: var(--terra); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .cam-btn:hover { background: var(--creme); border-color: var(--terra); } .cam-remove { color: var(--text-light); border-color: transparent; padding: 0.28rem 0.45rem; } .cam-remove:hover { color: #c0392b; background: rgba(192,57,43,0.07); border-color: transparent; } .cam-course-edit { margin-left: auto; flex-shrink: 0; } /* Modul-Zeilen */ .cam-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; border-bottom: 1px solid rgba(196,168,130,0.1); transition: background .12s; } .cam-row:hover { background: var(--creme-light, #FDFAF8); } .cam-num { width: 1.4rem; text-align: center; flex-shrink: 0; font-size: 0.68rem; color: var(--text-light); } .cam-thumb { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; margin-right: 0.5rem; } .cam-thumb-emoji { background: var(--creme-dark, #EDE0CC); font-size: 1rem; } .cam-info { flex: 1; min-width: 0; } .cam-title { font-size: 0.84rem; font-weight: 500; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cam-meta { font-size: 0.68rem; color: var(--text-light); margin-top: 0.05rem; } .cam-empty { padding: 0.85rem 1rem; font-size: 0.78rem; color: var(--text-light); font-style: italic; } /* Footer: + Neues Modul */ .course-admin-footer { padding: 0.6rem 1rem; background: #FDFAF5; border-top: 1px solid rgba(196,168,130,0.08); } .cam-add-btn { background: transparent; border: 1px dashed rgba(156,123,86,0.4); border-radius: 8px; padding: 0.4rem 0.9rem; font-size: 0.74rem; font-family: 'Jost', sans-serif; color: var(--terra); cursor: pointer; transition: background .15s, border-color .15s; } .cam-add-btn:hover { background: var(--creme); border-color: var(--terra); } /* ═══════════════════════════════════════════════════════ DESKTOP — Sidebar-Layout ab 900px Links 200px Sidebar-Nav | Rechts Hauptinhalt Topbar sticky über beide Spalten, max 1100px gesamt ═══════════════════════════════════════════════════════ */ @media (min-width: 900px) { html { background: #EDE0CC; } /* Grid-Shell: Sidebar + Inhalt */ body.app-shell { display: grid !important; grid-template-columns: 200px 1fr !important; max-width: 1100px !important; margin: 0 auto !important; min-height: 100vh; box-shadow: 0 0 0 1px rgba(196,168,130,0.18), 0 0 60px rgba(107,80,56,0.10); } /* Topbar: sticky, volle Breite */ .app-topbar { grid-column: 1 / -1 !important; position: sticky !important; top: 0 !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; border-bottom: 1px solid rgba(196,168,130,0.15); z-index: 60; } /* Bottomnav → linke Sidebar */ .app-bottomnav { grid-column: 1 !important; grid-row: 2 / span 10 !important; position: sticky !important; top: 70px !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; height: calc(100vh - 70px); align-self: start; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.1rem !important; padding: 1.25rem 0 !important; border-top: none !important; border-bottom: none !important; border-right: 1px solid rgba(196,168,130,0.18); background: var(--white); } /* Admin-Link in Member-Sidebar */ .bottomnav-item-admin { margin-top: 1rem !important; color: var(--terra) !important; font-weight: 500 !important; border-top: 1px solid rgba(196,168,130,0.18); padding-top: 0.9rem !important; } /* Nav-Items: schlichte Text-Links, kein Kachel-Look */ .bottomnav-item { flex: none !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; padding: 0.28rem 1.25rem !important; border-radius: 0 !important; background: transparent !important; min-height: auto !important; font-size: 0.74rem !important; letter-spacing: 0.07em !important; color: #9a8472 !important; width: auto !important; border-left: 2px solid transparent; } .bottomnav-item:hover { color: var(--earth) !important; background: transparent !important; } .bottomnav-item.active { background: transparent !important; color: var(--earth) !important; font-weight: 600 !important; border-left-color: var(--terra) !important; } /* Aktiv-Pseudo ausblenden — border-left übernimmt */ .bottomnav-item.active::before { display: none !important; } /* Hauptinhalt: rechte Spalte */ .app-content { grid-column: 2 !important; padding: 2rem 2.5rem 5rem !important; } /* Kurs-Detail hat keine Topbar → Sidebar und Content ab Row 1 */ body.course-page.app-shell .app-bottomnav { grid-row: 1 / span 10 !important; } body.course-page.app-shell .app-content { grid-row: 1 !important; } /* Admin-Tabs in rechter Spalte, sticky */ .admin-tabs { grid-column: 2 !important; position: sticky !important; top: 70px !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; z-index: 50; } /* Grids: 4 Spalten statt 2 */ .quick-row-2x2, .cat-grid { grid-template-columns: repeat(4, 1fr) !important; } /* Content-Karten: 2 Spalten */ .content-grid { grid-template-columns: 1fr 1fr !important; } /* Impulse-Card: großzügiger */ .impulse-card { padding: 2.5rem 3rem !important; } .impulse-quote { font-size: 1.9rem !important; } /* Sheets: überlagern den vollen App-Bereich (translateY-Animation bleibt) */ .player-sheet, .breath-screen, .admin-sheet { left: max(0px, calc(50% - 550px)) !important; right: auto !important; width: min(1100px, 100vw) !important; } /* FAB-Buttons: innerhalb des App-Containers positionieren */ .admin-fab { right: max(1.5rem, calc(50vw - 550px + 1.5rem)) !important; bottom: 1.5rem !important; } /* ─── Quick-Tiles: kompakte Pill-Zeile statt große Kacheln ── */ .quick-row-2x2 { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: unset !important; gap: 0.45rem !important; margin-bottom: 1rem !important; } .quick-tile-lg { flex: 1 !important; min-height: 0 !important; padding: 0.65rem 0.9rem !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; border-radius: 10px !important; gap: 0.45rem !important; } .qt-symbol { position: static !important; font-size: 0.95rem !important; opacity: 0.45 !important; top: unset !important; right: unset !important; } .qt-label { font-size: 0.82rem !important; margin-bottom: 0 !important; font-weight: 500 !important; font-family: 'Jost', sans-serif !important; letter-spacing: 0.03em !important; } .qt-sub { display: none !important; } /* ─── Section-Titles: schlichter ────────────────────── */ .app-section-title { font-size: 0.72rem !important; letter-spacing: 0.12em !important; margin-bottom: 0.75rem !important; } /* ─── Impulse-Card: weniger wuchtig ─────────────────── */ .impulse-card { padding: 1.75rem 2rem !important; } .impulse-quote { font-size: 1.45rem !important; line-height: 1.45 !important; } /* ─── Kurse-Cover: kürzer auf Desktop ───────────────── */ .user-course-cover { height: 70px !important; } /* ─── Sidebar: Branding-Header ──────────────────────── */ .app-bottomnav::before { content: 'Good Feeling'; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.95rem; font-style: italic; letter-spacing: 0.05em; color: var(--earth); display: block; padding: 0 1.25rem 1rem; border-bottom: 1px solid rgba(196,168,130,0.18); margin-bottom: 0.6rem; } /* ─── Content-Grid: echtes 2-Spalten-Grid ───────────── */ .app-shell .content-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; } /* ─── Dashboard: Kurse als Raster statt Scroll ──────── */ .user-courses-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; overflow-x: visible !important; margin: 0 0 1rem !important; padding: 0 !important; scroll-snap-type: none !important; } .user-course-card { flex-shrink: unset !important; width: auto !important; } /* ─── Dashboard: Fortschritt 2-spaltig ──────────────── */ .progress-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 2rem !important; } /* ─── Admin-Inhaltsliste: kompakter ─────────────────── */ .admin-content-list { gap: 0.35rem !important; } .admin-content-item { padding: 0.55rem 0.85rem !important; border-radius: 10px !important; gap: 0.65rem !important; } .admin-content-thumb { width: 48px !important; height: 48px !important; font-size: 1.3rem !important; border-radius: 10px !important; } /* ─── Admin-Nutzerliste: kompakter ──────────────────── */ .admin-user-list { gap: 0.35rem !important; } .admin-user-item { padding: 0.6rem 0.85rem !important; border-radius: 10px !important; gap: 0.65rem !important; } } /* ================================================================ ADMIN-TABS: 6-Tab-Layout (mit Shop) ================================================================ */ .admin-tabs-6 { grid-template-columns: repeat(6, 1fr); } .admin-tabs-6 .admin-tab-btn { padding: 0.65rem 0.05rem; } .admin-tabs-6 .admin-tab-icon { font-size: 1rem; } .admin-tabs-6 .admin-tab-label { font-size: 0.58rem; letter-spacing: 0; } .admin-tabs-6 .admin-tab-count { position: static; margin-top: 0; font-size: 0.58rem; padding: 0.06em 0.4em; } /* ================================================================ SHOP-ADMIN — Produkt-Bilder-Vorschau ================================================================ */ .shop-img-preview-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .shop-img-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--beige); } .shop-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-img-remove { position: absolute; top: 2px; right: 2px; background: rgba(61,44,30,0.72); color: #fff; border: none; border-radius: 100px; width: 20px; height: 20px; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; } .shop-img-remove:hover { background: #c0392b; } /* ================================================================ SHOP-ADMIN: Kopfbereich + Stripe-Hinweis ================================================================ */ /* "Shop bearbeiten" Heading im Shop-Tab */ .admin-shop-header { padding: 0.5rem 0 0.25rem; margin-bottom: 0.25rem; position: relative; } .admin-stripe-sync-btn { margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; background: #fff; border: 1px solid var(--gold, #C9A96E); color: var(--terra, #8B5E3C); padding: 0.45rem 0.95rem; border-radius: 50px; font-size: 0.78rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.18s; } .admin-stripe-sync-btn:hover:not(:disabled) { background: var(--gold, #C9A96E); color: #fff; } .admin-stripe-sync-btn:disabled { opacity: 0.6; cursor: wait; } .admin-shop-title { font-family: var(--font-serif, Georgia, serif); font-size: 1.35rem; font-weight: 700; color: var(--warm-brown, #3D2C1E); margin: 0 0 0.25rem; letter-spacing: -0.01em; } .admin-shop-sub { font-size: 0.83rem; color: var(--text-light, #7A7267); margin: 0; line-height: 1.45; } /* Stripe-Auto-Hinweis im Produkt-Sheet */ .admin-stripe-auto-info { display: flex; align-items: flex-start; gap: 0.5rem; background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 10px; padding: 0.65rem 0.85rem; margin-top: 0.5rem; font-size: 0.82rem; color: #065F46; line-height: 1.45; } .admin-stripe-auto-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.3; } /* Bottom-Nav: Shop-Button (5 Items) */ .bottomnav-item-shop { color: var(--terra, #8B5E3C); font-weight: 600; } .bottomnav-item-shop.active, .bottomnav-item-shop:focus { color: var(--terra, #8B5E3C); } /* Shop-Tab im Top-Tab-Bar leicht hervorheben */ .admin-tabs-6 [data-tab="shop"].active .admin-tab-icon, .admin-tabs-6 [data-tab="shop"].active .admin-tab-label { color: var(--terra, #8B5E3C); } /* ================================================================ REIKI INFO-KARTE (Mitgliederbereich → Inhalte) ================================================================ */ .reiki-info-card { display: block; text-decoration: none; margin: 0.75rem 1rem 0.25rem; border-radius: 16px; background: linear-gradient(135deg, var(--gold-light, #FFF3CC), #F5E0A0); border: 1px solid rgba(201,169,110,0.35); padding: 0; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; } .reiki-info-card:active { transform: scale(0.98); } .reiki-info-inner { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; } .reiki-info-symbol { font-size: 1.6rem; flex-shrink: 0; line-height: 1; color: #C9A96E; } .reiki-info-text { flex: 1; min-width: 0; } .reiki-info-title { font-family: var(--font-serif, Georgia, serif); font-size: 1rem; font-weight: 700; color: var(--warm-brown, #3D2C1E); margin-bottom: 0.2rem; } .reiki-info-sub { font-size: 0.8rem; color: #8A7260; line-height: 1.4; } .reiki-info-arrow { font-size: 0.78rem; font-weight: 600; color: #8B5E3C; flex-shrink: 0; white-space: nowrap; } /* ================================================================ MULTI-FILE UPLOAD (Admin) ================================================================ */ .admin-field-hint-inline { font-size: 0.78rem; color: var(--text-light, #9A8C82); font-weight: 400; margin-left: 0.4rem; } .admin-file-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .admin-file-list-label { font-size: 0.78rem; color: var(--text-light,#9A8C82); margin-bottom: 0.2rem; } .admin-file-item { display: flex; align-items: center; gap: 0.5rem; background: var(--creme, #F5EEE4); border: 1px solid var(--border, #E8DDD0); border-radius: 10px; padding: 0.5rem 0.65rem; font-size: 0.83rem; } .admin-file-item-saved { background: #EEF7EE; border-color: #C3E0C3; } .admin-file-icon { font-size: 1.1rem; flex-shrink: 0; } .admin-file-name { flex: 1; color: var(--text-dark, #3D2C1E); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-file-size { font-size: 0.75rem; color: var(--text-light,#9A8C82); flex-shrink: 0; } .admin-file-remove { background: none; border: none; cursor: pointer; color: var(--text-light,#9A8C82); font-size: 0.9rem; padding: 0 0.25rem; flex-shrink: 0; } .admin-file-remove:hover { color: #c0392b; } .admin-file-preview-btn { background: var(--sage, #8A9E88); color: #fff; border: none; border-radius: 50px; padding: 0.18rem 0.6rem; font-size: 0.78rem; cursor: pointer; flex-shrink: 0; font-weight: 600; transition: background 0.18s; } .admin-file-preview-btn:hover { background: var(--terra, #8B5E3C); } .admin-file-download-btn { background: var(--gold, #C9A96E); color: #fff; border: none; border-radius: 50px; padding: 0.18rem 0.6rem; font-size: 0.85rem; cursor: pointer; flex-shrink: 0; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; transition: background 0.18s; line-height: 1; } .admin-file-download-btn:hover { background: var(--terra, #8B5E3C); } /* Event-Ticker auf Dashboard */ .event-ticker { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .event-card { background: #fff; border: 1px solid var(--border, #EDE4D4); border-radius: 16px; padding: 1rem 1.1rem; position: relative; transition: transform 0.18s, box-shadow 0.18s; } .event-card.today { background: linear-gradient(135deg, #FFF8E1, #FFE9B0); border-color: var(--gold, #C9A96E); box-shadow: 0 4px 16px rgba(201,169,110,0.18); } .event-card-live { position: absolute; top: 0.75rem; right: 0.75rem; background: #E53935; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.2rem 0.55rem; border-radius: 50px; animation: pulse-live 1.8s ease-in-out infinite; } @keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .event-card-date { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold, #C9A96E); font-family: 'Jost', sans-serif; margin-bottom: 0.35rem; } .event-card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--text-dark, #3D2C1E); margin-bottom: 0.3rem; line-height: 1.3; } .event-card-desc { font-size: 0.85rem; color: var(--text-mid, #6B5A47); line-height: 1.55; margin-bottom: 0.75rem; } .event-card-btn { display: inline-block; background: var(--terra, #8B5E3C); color: #fff; text-decoration: none; padding: 0.55rem 1.2rem; border-radius: 50px; font-size: 0.82rem; font-weight: 600; font-family: 'Jost', sans-serif; transition: opacity 0.18s; } .event-card-btn:hover { opacity: 0.88; } .event-card.today .event-card-btn { background: #E53935; } /* ================================================================ BONUSKARTE — Admin (im User-Edit-Sheet) ================================================================ */ .loyalty-admin-box { background: linear-gradient(135deg, var(--creme,#FAF6EE), #F2EADA); border: 1.5px solid var(--gold,#C9A96E); border-radius: 14px; padding: 1rem; } .loyalty-admin-stamps { display: flex; gap: 0.3rem; margin-bottom: 0.75rem; flex-wrap: wrap; justify-content: center; } .loyalty-stamp { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(196,168,130,0.45); border-radius: 50%; background: #fff; font-size: 0.85rem; color: rgba(196,168,130,0.4); } .loyalty-stamp.filled { background: linear-gradient(135deg, var(--terra,#8B5E3C), var(--gold,#C9A96E)); color: #fff; border-color: var(--terra,#8B5E3C); font-weight: 700; box-shadow: 0 2px 6px rgba(139,94,60,0.25); } .loyalty-admin-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding: 0.5rem 0; border-top: 1px solid rgba(196,168,130,0.2); border-bottom: 1px solid rgba(196,168,130,0.2); } .loyalty-admin-count { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 700; color: var(--warm-brown,#3D2C1E); } .loyalty-admin-history { font-size: 0.78rem; color: var(--text-light,#9A8C82); font-style: italic; } .loyalty-admin-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; } .loyalty-btn { flex: 1; min-width: 90px; padding: 0.55rem 0.75rem; border-radius: 50px; font-size: 0.82rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.18s; } .loyalty-btn-add { background: var(--sage,#8A9E88); color: #fff; border: 1px solid var(--sage,#8A9E88); } .loyalty-btn-minus { background: transparent; color: var(--text-mid,#6B5A47); border: 1px solid var(--border,#DDD4C4); flex: 0 0 50px; } .loyalty-btn-redeem { background: var(--gold,#C9A96E); color: #fff; border: 1px solid var(--gold,#C9A96E); } .loyalty-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } /* ================================================================ BONUSKARTE — Member-Profil ================================================================ */ .loyalty-card-section { padding: 1rem; } .loyalty-card { background: linear-gradient(135deg, #FFF8E1 0%, #F5E6C8 50%, #E8C97C 100%); border-radius: 24px; padding: 1.5rem 1.25rem; border: 1px solid rgba(196,168,130,0.5); box-shadow: 0 8px 28px rgba(201,169,110,0.22); position: relative; overflow: hidden; } .loyalty-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,255,255,0.4), transparent); border-radius: 50%; pointer-events: none; } .loyalty-card-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; position: relative; } .loyalty-card-icon { font-size: 2rem; flex-shrink: 0; } .loyalty-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #3D2C1E; margin: 0 0 0.2rem; } .loyalty-card-sub { font-size: 0.82rem; color: rgba(61,44,30,0.7); margin: 0; line-height: 1.4; } .loyalty-card-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; margin-bottom: 1rem; } .loyalty-stamp-big { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(139,94,60,0.35); border-radius: 50%; background: rgba(255,255,255,0.4); font-size: 1.3rem; color: transparent; transition: all 0.4s ease; } .loyalty-stamp-big.filled { background: linear-gradient(135deg, var(--terra,#8B5E3C), #5A3D26); color: #FFD700; border-color: var(--terra,#8B5E3C); border-style: solid; text-shadow: 0 1px 3px rgba(0,0,0,0.4); box-shadow: 0 3px 8px rgba(139,94,60,0.35), inset 0 1px 0 rgba(255,255,255,0.2); transform: scale(1.05); } .loyalty-card-status { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: rgba(61,44,30,0.8); margin-bottom: 0.5rem; } .loyalty-card-status #loyalty-card-count { font-weight: 700; color: var(--terra,#8B5E3C); font-size: 1.2rem; } .loyalty-card-reward { background: rgba(255,255,255,0.7); border-radius: 12px; padding: 0.85rem 1rem; margin-top: 0.5rem; font-size: 0.92rem; color: #3D2C1E; text-align: center; line-height: 1.5; border: 1px solid rgba(139,94,60,0.25); } /* ================================================================ PLAYER WORKBOOK / TEXT-INHALT ================================================================ */ .player-workbook { width: 100%; max-height: 65vh; overflow-y: auto; margin: 1rem 0; border-radius: 14px; background: var(--creme, #FAF6EE); border: 1px solid var(--border, #EDE4D4); } .player-workbook-inner { padding: 1.25rem 1.4rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.02rem; line-height: 1.75; color: var(--text-dark, #3D2C1E); } .player-workbook-inner h1, .player-workbook-inner h2, .player-workbook-inner h3 { font-family: 'Cormorant Garamond', Georgia, serif; margin: 1.25rem 0 0.5rem; color: var(--warm-brown, #3D2C1E); } .player-workbook-inner h1 { font-size: 1.6rem; } .player-workbook-inner h2 { font-size: 1.3rem; } .player-workbook-inner h3 { font-size: 1.1rem; } .player-workbook-inner p { margin: 0 0 0.85rem; } .player-workbook-inner img { max-width: 100%; border-radius: 10px; display: block; margin: 0.75rem 0; } .player-workbook-inner ul, .player-workbook-inner ol { padding-left: 1.4rem; margin: 0.5rem 0 0.85rem; } .player-workbook-inner li { margin-bottom: 0.35rem; } .player-workbook-inner blockquote { border-left: 3px solid var(--gold, #C9A96E); padding: 0.4rem 1rem; margin: 0.85rem 0; font-style: italic; color: var(--text-mid, #6B5A47); } .player-pdf-btn { display: inline-block; background: var(--terra, #8B5E3C); color: #fff; text-decoration: none; padding: 0.55rem 1.25rem; border-radius: 50px; font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 500; } .player-pdf-btn:hover { background: var(--gold, #C9A96E); } /* ================================================================ MOND-BILDER ADMIN ================================================================ */ .moon-images-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; } @media (min-width: 700px) { .moon-images-grid { grid-template-columns: repeat(4, 1fr); } } .moon-img-card { background: #fff; border: 1px solid var(--border, #EDE4D4); border-radius: 14px; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; } .moon-img-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(61,44,30,0.08); } .moon-img-preview { aspect-ratio: 1 / 1; background: linear-gradient(135deg, #2A1F3A, #1A0F2A); background-size: cover; background-position: center; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; } .moon-img-empty-icon { font-size: 3rem; opacity: 0.6; filter: drop-shadow(0 0 12px rgba(255,215,0,0.3)); } .moon-img-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; letter-spacing: 0.08em; opacity: 0; transition: opacity 0.2s; } .moon-img-preview:hover .moon-img-overlay { opacity: 1; } .moon-img-info { padding: 0.75rem 0.85rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .moon-img-emoji { font-size: 1.1rem; } .moon-img-label { font-size: 0.85rem; color: var(--text-dark, #3D2C1E); font-weight: 500; flex: 1; } .moon-img-placeholder { font-size: 0.72rem; color: var(--text-light, #9A8C82); font-style: italic; } .moon-img-remove { background: none; border: none; font-size: 0.72rem; color: var(--text-light, #9A8C82); cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 50px; transition: color 0.18s, background 0.18s; } .moon-img-remove:hover { color: #c0392b; background: rgba(192,57,43,0.08); } /* Mond-Phasen-Bild in der Mitglieder-Ansicht */ .moon-upcoming-img { width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; margin: 0 auto 0.4rem; box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 2px solid rgba(255,215,0,0.35); } /* Shop-Produkt Sortier-Buttons (hoch/runter) */ .shop-prod-row { position: relative; transition: background 0.18s, transform 0.15s; } .shop-sort-btns { display: flex; flex-direction: column; gap: 0.2rem; margin-left: 0.5rem; flex-shrink: 0; } .shop-sort-btn { background: var(--creme, #F5EEE4); border: 1px solid var(--border, #E8DDD0); color: var(--terra, #8B5E3C); width: 30px; height: 26px; border-radius: 8px; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: background 0.15s, color 0.15s, transform 0.1s; padding: 0; } .shop-sort-btn:hover:not(:disabled) { background: var(--terra, #8B5E3C); color: #fff; border-color: var(--terra, #8B5E3C); } .shop-sort-btn:active:not(:disabled) { transform: scale(0.92); } .shop-sort-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* 7-Tab Admin-Layout (mit Events) */ .admin-tabs-7 { grid-template-columns: repeat(7, 1fr); } .admin-tabs-7 .admin-tab-btn { padding: 0.7rem 0.05rem; } .admin-tabs-7 .admin-tab-icon { font-size: 1.05rem; } .admin-tabs-7 .admin-tab-label { font-size: 0.58rem; letter-spacing: 0; } .admin-tabs-7 .admin-tab-count { position: static; margin-top: 0; font-size: 0.58rem; padding: 0.08em 0.4em; } /* Titelbild Upload */ .admin-cover-wrap { border: 1.5px dashed var(--border,#DDD4C4); border-radius: 14px; overflow: hidden; cursor: pointer; min-height: 120px; display: flex; align-items: center; justify-content: center; background: var(--creme,#F5EEE4); transition: border-color 0.18s; } .admin-cover-wrap:hover { border-color: var(--gold,#C9A96E); } .admin-cover-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.5rem; text-align: center; color: var(--text-light,#9A8C82); font-size: 0.85rem; } .admin-cover-empty .admin-upload-icon { font-size: 1.6rem; } .admin-cover-preview { position: relative; width: 100%; min-height: 120px; } .admin-cover-remove { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(61,44,30,0.75); color: #fff; border: none; border-radius: 50px; padding: 0.3rem 0.7rem; font-size: 0.78rem; cursor: pointer; font-family: inherit; } /* content-thumb braucht position:relative für absolute img overlay */ .content-thumb { position: relative; overflow: hidden; } .admin-file-player { padding: 0.5rem 0 0.25rem; border-top: 1px solid var(--border, #E8DDD0); margin-top: 0.25rem; } /* ================================================================ ADMIN VORSCHAU-BUTTON (Content-Liste) ================================================================ */ .admin-preview-btn { background: var(--sage, #8A9E88); color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 0.75rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 0.25rem; transition: background 0.18s, transform 0.15s; } .admin-preview-btn:hover { background: var(--terra, #8B5E3C); transform: scale(1.1); } /* ================================================================ ADMIN VORSCHAU-MODAL ================================================================ */ .admin-preview-backdrop { position: fixed; inset: 0; background: rgba(30,20,10,0.82); backdrop-filter: blur(6px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .admin-preview-box { background: #1A1410; border-radius: 18px; width: 100%; max-width: 680px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.6); } .admin-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .admin-preview-title { font-family: var(--font-serif, Georgia, serif); font-size: 1rem; font-weight: 600; color: #F5EEE4; } .admin-preview-parts { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 0.2rem; } .admin-preview-close { background: rgba(255,255,255,0.1); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-preview-close:hover { background: rgba(255,255,255,0.2); } .admin-preview-media { padding: 0.75rem 1rem; } .admin-preview-nav { display: flex; gap: 0.5rem; padding: 0 1rem 1rem; } .admin-preview-nav-btn { flex: 1; padding: 0.5rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #F5EEE4; border-radius: 8px; font-size: 0.82rem; cursor: pointer; font-family: inherit; } .admin-preview-nav-btn:disabled { opacity: 0.3; pointer-events: none; } .admin-preview-nav-btn:not(:disabled):hover { background: rgba(255,255,255,0.15); } .admin-upload-progress { margin-top: 0.6rem; border-radius: 8px; overflow: hidden; background: var(--creme); border: 1px solid var(--border); padding: 0.5rem 0.75rem; } .admin-upload-progress-bar { height: 6px; background: linear-gradient(90deg, var(--sage,#8A9E88), var(--gold,#C9A96E)); border-radius: 50px; transition: width 0.3s ease; width: 0%; margin-bottom: 0.35rem; } .admin-upload-progress-label { font-size: 0.78rem; color: var(--text-mid,#6B5A47); } /* ================================================================ PLAYER: Playlist-Navigation + Video ================================================================ */ .player-parts { display: flex; gap: 0.5rem; justify-content: center; margin: 0.5rem 0 0; } .player-part-btn { flex: 1; background: var(--creme, #F5EEE4); border: 1px solid var(--border, #DDD4C4); border-radius: 50px; padding: 0.45rem 0.75rem; font-size: 0.78rem; color: var(--warm-brown, #3D2C1E); cursor: pointer; font-family: inherit; transition: background 0.18s; } .player-part-btn:disabled { opacity: 0.35; pointer-events: none; } .player-part-btn:not(:disabled):active { background: var(--beige, #EDE0CC); } /* ================================================================ ADMIN-RECORDER — Direkt aufnehmen ================================================================ */ .admin-upload-mode-toggle { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; } .admin-upload-mode-btn { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border, #DDD4C4); border-radius: 10px; background: var(--creme, #F5EEE4); color: var(--text-mid, #6B5A47); font-size: 0.84rem; font-family: inherit; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; font-weight: 400; } .admin-upload-mode-btn.active { background: var(--terra, #8B5E3C); color: #fff; border-color: var(--terra, #8B5E3C); font-weight: 600; } .admin-recorder { background: var(--creme, #F5EEE4); border: 1px solid var(--border, #E8DDD0); border-radius: 14px; padding: 1.25rem 1rem; } .admin-recorder-inner { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-bottom: 1rem; } .admin-recorder-orb { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--border, #E8DDD0); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: border-color 0.2s, box-shadow 0.2s; } .admin-recorder-orb.recording { border-color: #e74c3c; box-shadow: 0 0 0 4px rgba(231,76,60,0.15); animation: recorder-pulse 1.2s ease-in-out infinite; } @keyframes recorder-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(231,76,60,0.15); } 50% { box-shadow: 0 0 0 10px rgba(231,76,60,0.05); } } .admin-recorder-timer { font-family: var(--font-sans, sans-serif); font-size: 1.6rem; font-weight: 700; color: var(--warm-brown, #3D2C1E); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } .admin-recorder-status { font-size: 0.82rem; color: var(--text-light, #9A8C82); } .admin-recorder-btns { display: flex; gap: 0.5rem; justify-content: center; } .admin-recorder-start, .admin-recorder-stop { padding: 0.6rem 1.4rem; border-radius: 50px; font-size: 0.88rem; font-family: inherit; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.18s; } .admin-recorder-start { background: var(--terra, #8B5E3C); color: #fff; } .admin-recorder-stop { background: #e74c3c; color: #fff; } .admin-recorder-preview { margin-top: 1rem; } .admin-recorder-preview-btns { display: flex; gap: 0.5rem; } .admin-recorder-preview-btns .admin-btn-ghost, .admin-recorder-preview-btns .admin-btn-primary { flex: 1; text-align: center; }