/* ===================================================================== schatzwoerter.at - Pergament/Schatzkarten-Theme ===================================================================== */ /* Wird angewandt, wenn gesetzt ist */ body.theme-treasure { background: #F4E4BD; background-image: /* Vergilbung am Rand */ radial-gradient(ellipse at top left, rgba(139, 87, 42, 0.22) 0%, transparent 45%), radial-gradient(ellipse at top right, rgba(139, 87, 42, 0.18) 0%, transparent 45%), radial-gradient(ellipse at bottom left, rgba(139, 87, 42, 0.20) 0%, transparent 45%), radial-gradient(ellipse at bottom right, rgba(139, 87, 42, 0.24) 0%, transparent 45%), /* Papierstruktur als feine Noise */ radial-gradient(circle at 20% 30%, rgba(186, 117, 23, 0.06) 0%, transparent 8%), radial-gradient(circle at 70% 60%, rgba(133, 79, 11, 0.05) 0%, transparent 10%), radial-gradient(circle at 40% 80%, rgba(99, 56, 6, 0.04) 0%, transparent 6%); background-attachment: fixed; } /* Subtile Insel-Deko in den Ecken (Schiff, Kompass, Mini-Inseln, Wellen) */ body.theme-treasure::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.26; background-image: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } /* Stelle sicher, dass der Inhalt über der Hintergrund-Deko liegt */ body.theme-treasure .page { position: relative; z-index: 1; } /* ===================================================================== Animations-Ebene: Wolken oben, Fische unten - per Container im DOM ===================================================================== */ /* Container für die animierten Hintergrund-Elemente */ .bg-life { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } /* Wolken - ziehen langsam von links nach rechts */ .bg-cloud { position: absolute; opacity: 0.32; will-change: transform; } .bg-cloud-1 { top: 6%; animation: cloud-drift-1 95s linear infinite; } .bg-cloud-2 { top: 14%; animation: cloud-drift-2 130s linear infinite; animation-delay: -40s; } .bg-cloud-3 { top: 9%; animation: cloud-drift-1 110s linear infinite; animation-delay: -70s; } @keyframes cloud-drift-1 { from { transform: translateX(-15vw); } to { transform: translateX(115vw); } } @keyframes cloud-drift-2 { from { transform: translateX(-15vw); } to { transform: translateX(115vw); } } /* Fische - schwimmen unten, manche von rechts nach links */ .bg-fish { position: absolute; opacity: 0.28; will-change: transform; } .bg-fish-1 { bottom: 8%; animation: fish-swim-r 75s linear infinite; } .bg-fish-2 { bottom: 14%; animation: fish-swim-l 90s linear infinite; animation-delay: -35s; } .bg-fish-3 { bottom: 5%; animation: fish-swim-r 105s linear infinite; animation-delay: -60s; } @keyframes fish-swim-r { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } } @keyframes fish-swim-l { from { transform: translateX(112vw) scaleX(-1); } to { transform: translateX(-12vw) scaleX(-1); } } /* Vogel-Schwarm oben rechts, sehr klein und langsam */ .bg-birds { position: absolute; top: 4%; opacity: 0.30; animation: birds-fly 140s linear infinite; animation-delay: -50s; will-change: transform; } @keyframes birds-fly { from { transform: translateX(112vw); } to { transform: translateX(-12vw); } } /* Auf der Karten-Seite (Holztisch) keine Wolken/Fische - die wäre zu viel */ body.theme-treasure-map .bg-life { display: none; } /* Animationen pausieren für Nutzer, die das nicht wollen */ @media (prefers-reduced-motion: reduce) { .bg-cloud, .bg-fish, .bg-birds { animation: none; opacity: 0.15; } } /* Karten-Seite spezial: Holztisch-Hintergrund */ body.theme-treasure-map { background: #8B5A2B; background-image: /* Hauptmaserung horizontale Streifen */ repeating-linear-gradient( 180deg, transparent 0px, transparent 60px, rgba(0, 0, 0, 0.06) 60px, rgba(0, 0, 0, 0.06) 62px, transparent 62px, transparent 140px, rgba(255, 255, 255, 0.04) 140px, rgba(255, 255, 255, 0.04) 142px ), /* Feine Maserung */ repeating-linear-gradient( 180deg, transparent 0px, transparent 8px, rgba(99, 56, 6, 0.05) 8px, rgba(99, 56, 6, 0.05) 9px ), /* Astlöcher / dunklere Stellen */ radial-gradient(ellipse 100px 60px at 20% 15%, rgba(60, 30, 10, 0.4) 0%, transparent 70%), radial-gradient(ellipse 80px 40px at 85% 75%, rgba(60, 30, 10, 0.35) 0%, transparent 70%), radial-gradient(ellipse 60px 30px at 60% 50%, rgba(60, 30, 10, 0.25) 0%, transparent 70%), /* Grundfarbe Holz */ linear-gradient(180deg, #A0764A 0%, #8B5A2B 100%); background-attachment: fixed; } body.theme-treasure-map::before { display: none; } /* Auf dem Holztisch: Header und Karten-Boxen heller, damit sie sich abheben */ body.theme-treasure-map .map-header { background: #FFFBF0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(186, 117, 23, 0.06); } body.theme-treasure-map .card { background: #FFFBF0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 0 30px rgba(186, 117, 23, 0.08); border-color: #8B5728; } body.theme-treasure-map .mode-card { box-shadow: 0 3px 0 #8A5410, 0 5px 14px rgba(0, 0, 0, 0.3); } /* Marke (Schatzwörter-Schriftzug) im Pergament-Look */ body.theme-treasure .brand-title { font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 3rem; color: #854F0B; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4), 2px 2px 4px rgba(99, 56, 6, 0.2); letter-spacing: 0.01em; transform: rotate(-1.5deg); } body.theme-treasure .brand-sub { font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 1.3rem; color: #633806; } /* Karten im Pergament-Stil */ body.theme-treasure .card { background: #FFFBF0; background-image: radial-gradient(ellipse at top left, rgba(186, 117, 23, 0.08) 0%, transparent 60%), radial-gradient(ellipse at bottom right, rgba(133, 79, 11, 0.06) 0%, transparent 60%); border: 2px solid #C8A56B; box-shadow: 0 4px 12px rgba(99, 56, 6, 0.15), inset 0 0 30px rgba(186, 117, 23, 0.08); } body.theme-treasure .card-soft { background: #FFF3D9; border-color: var(--c-sun-dark); } /* Buttons im Holz-/Schatzkartenstil */ body.theme-treasure .btn-primary { background: linear-gradient(180deg, #1D9E75 0%, #0F6E56 100%); box-shadow: 0 3px 0 #0a4a3b, 0 4px 8px rgba(0,0,0,0.15); border-radius: 14px; } body.theme-treasure .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a4a3b, 0 2px 4px rgba(0,0,0,0.15); } body.theme-treasure .btn-secondary { background: #FFFBF0; border: 2px solid #C8A56B; color: #633806; box-shadow: 0 3px 0 #C8A56B, 0 4px 8px rgba(0,0,0,0.1); } body.theme-treasure .btn-secondary:active { transform: translateY(2px); box-shadow: 0 1px 0 #C8A56B, 0 2px 4px rgba(0,0,0,0.1); } body.theme-treasure .btn-sun { background: linear-gradient(180deg, #FAC775 0%, #E8AC4F 100%); color: #633806; box-shadow: 0 3px 0 #BA7517, 0 4px 8px rgba(0,0,0,0.15); } /* Kind-Header im Schatzkarten-Stil */ body.theme-treasure .child-header, body.theme-treasure .map-header { background: #FFFBF0; background-image: radial-gradient(ellipse at top left, rgba(186, 117, 23, 0.08) 0%, transparent 60%); border: 2px solid #C8A56B; box-shadow: 0 3px 8px rgba(99, 56, 6, 0.15), inset 0 0 20px rgba(186, 117, 23, 0.06); } body.theme-treasure .child-header-name, body.theme-treasure .map-header-title { font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 1.6rem; color: #633806; } body.theme-treasure .map-header-title { transform: rotate(-0.5deg); display: inline-block; } body.theme-treasure .child-switch, body.theme-treasure .map-back { background: #FAC775; color: #633806; border: 2px solid #BA7517; } /* Kinder-Auswahl-Karten als kleine Schatztruhen */ body.theme-treasure .child-pick { background: #FFFBF0; background-image: radial-gradient(ellipse at top left, rgba(186, 117, 23, 0.08) 0%, transparent 60%), radial-gradient(ellipse at bottom right, rgba(133, 79, 11, 0.06) 0%, transparent 60%); border: 3px solid #C8A56B; box-shadow: 0 4px 0 #B89456, 0 6px 12px rgba(99, 56, 6, 0.2), inset 0 0 25px rgba(186, 117, 23, 0.06); } body.theme-treasure .child-pick:hover, body.theme-treasure .child-pick:focus { border-color: var(--c-sun-dark); box-shadow: 0 6px 0 #B89456, 0 8px 16px rgba(99, 56, 6, 0.25), inset 0 0 25px rgba(186, 117, 23, 0.06); } body.theme-treasure .child-name { font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 1.6rem; color: #633806; } body.theme-treasure .child-class { color: #854F0B; } body.theme-treasure .child-stars { color: #BA7517; } /* Schatzkarten-Listen-Übersicht: Karten als kleine Schatzkarten */ body.theme-treasure .treasure-card { background: #FFF8E4; background-image: /* Verbrannte Ecken-Imitation */ radial-gradient(ellipse at top left, rgba(186, 117, 23, 0.15) 0%, transparent 25%), radial-gradient(ellipse at top right, rgba(186, 117, 23, 0.13) 0%, transparent 25%), radial-gradient(ellipse at bottom left, rgba(133, 79, 11, 0.14) 0%, transparent 25%), radial-gradient(ellipse at bottom right, rgba(133, 79, 11, 0.16) 0%, transparent 25%), radial-gradient(circle at 30% 70%, rgba(186, 117, 23, 0.05) 0%, transparent 30%); border: 3px solid #BA7517; color: #633806; transform: rotate(-0.8deg); transition: all 0.25s; box-shadow: 0 4px 0 #8A5410, 0 6px 14px rgba(99, 56, 6, 0.25), inset 0 0 30px rgba(186, 117, 23, 0.08); } body.theme-treasure .treasure-card:nth-child(even) { transform: rotate(0.8deg); } body.theme-treasure .treasure-card:hover, body.theme-treasure .treasure-card:focus { transform: rotate(0) translateY(-4px) scale(1.02); border-color: var(--c-grass-dark); box-shadow: 0 6px 0 #8A5410, 0 10px 20px rgba(99, 56, 6, 0.3), inset 0 0 30px rgba(186, 117, 23, 0.08); } body.theme-treasure .treasure-card-done { background: #FFEFC8; border-color: var(--c-grass-dark); } body.theme-treasure .treasure-card-title { font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 1.5rem; color: #633806; line-height: 1.1; } body.theme-treasure .treasure-card-desc { font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 1.05rem; color: #854F0B; } body.theme-treasure .treasure-progress { background: #F4E4BD; border-color: #BA7517; } /* Die alten Wachs-Siegel sind jetzt Teil der neuen Insel-Deko oben (::before). Hier nicht mehr definieren. */ .map-list-title { font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 2rem !important; transform: rotate(-1deg); color: #854F0B !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.5); }