/**
 * Theme Definitions
 */

/* Theme: Light (Standard) */
:root, [data-theme="light"] {
    --beige: #f5f0e8;
    --beige-dark: #e8e2d8;
    --black: #1a1a1a;
    --heading: #1a1a1a;
    --text: #333;
    --text-light: #666;
    --nav-bg: #f5f0e8;
    --nav-border: #e8e2d8;
    --footer-bg: #1a1a1a;
    --footer-text: rgba(255,255,255,0.5);
    --footer-link: rgba(255,255,255,0.7);
    --accent: #8b7355;
}

/* Theme: Dark */
[data-theme="dark"] {
    --beige: #1a1a1a;
    --beige-dark: #2d2d2d;
    --black: #f5f0e8;
    --heading: #f5f0e8;
    --text: #e8e2d8;
    --text-light: #a0a0a0;
    --nav-bg: #1a1a1a;
    --nav-border: #2d2d2d;
    --footer-bg: #0d0d0d;
    --footer-text: rgba(255,255,255,0.5);
    --footer-link: rgba(255,255,255,0.7);
    --accent: #c4a77d;
}

/* Theme: Regenbogen (Rainbow) */
[data-theme="rainbow"] {
    --beige: linear-gradient(135deg, #ffe6e6 0%, #fff5e6 20%, #ffffcc 40%, #e6ffe6 60%, #e6f2ff 80%, #f2e6ff 100%);
    --beige-solid: #fff5f0;
    --beige-dark: #f0e6f0;
    --black: #4a0080;
    --heading: #4a0080;
    --text: #2d1b4e;
    --text-light: #6b4d8a;
    --nav-bg: rgba(255,245,240,0.95);
    --nav-border: #e6d0e6;
    --footer-bg: linear-gradient(135deg, #4a0080 0%, #0066cc 50%, #00994d 100%);
    --footer-text: rgba(255,255,255,0.8);
    --footer-link: #ffffff;
    --accent: #ff6b6b;
}

/* Theme: Herbst (Autumn) */
[data-theme="autumn"] {
    --beige: #fdf6e3;
    --beige-dark: #e6d5b8;
    --black: #5c4033;
    --heading: #5c4033;
    --text: #4a3728;
    --text-light: #8b6914;
    --nav-bg: #fdf6e3;
    --nav-border: #d4a574;
    --footer-bg: #5c4033;
    --footer-text: rgba(255,220,180,0.7);
    --footer-link: #ffd9b3;
    --accent: #cc5500;
}

/* Theme: Marmor (Marble) - Eleganter dunkler Marmor mit Adern */
[data-theme="marble"] {
    --beige: #2a2a2a;
    --beige-dark: #3a3a3a;
    --black: #1a1a1a;
    --heading: #e8e8e8;
    --text: #e8e8e8;
    --text-light: #b0b0b0;
    --nav-bg: rgba(35, 35, 35, 0.95);
    --nav-border: #4a4a4a;
    --footer-bg: #0f0f0f;
    --footer-text: rgba(255,255,255,0.6);
    --footer-link: rgba(255,255,255,0.8);
    --accent: #9a8478;
    --base-color: #2a2a2a;
}

/* Theme: Wasser (Water) - Tiefes Ozean-Blau mit Wellen */
[data-theme="water"] {
    --beige: #1a2a3a;
    --beige-dark: #243648;
    --black: #0d1520;
    --heading: #d4e5f7;
    --text: #d4e5f7;
    --text-light: #8fb3d9;
    --nav-bg: rgba(20, 35, 50, 0.95);
    --nav-border: #2d4a66;
    --footer-bg: #0a1018;
    --footer-text: rgba(180,220,255,0.6);
    --footer-link: rgba(200,230,255,0.8);
    --accent: #5da9e9;
    --base-color: #1a2a3a;
}

/* Theme: Schiefer (Slate) - Dunkler eleganter Stein */
[data-theme="slate"] {
    --beige: #2d3436;
    --beige-dark: #3d4446;
    --black: #1e2324;
    --heading: #dfe6e9;
    --text: #dfe6e9;
    --text-light: #a0aeb3;
    --nav-bg: rgba(38, 45, 48, 0.95);
    --nav-border: #4d5759;
    --footer-bg: #151a1c;
    --footer-text: rgba(220,230,235,0.6);
    --footer-link: rgba(235,245,250,0.8);
    --accent: #74b9ff;
    --base-color: #2d3436;
}

/* Theme: Kiesel (Pebble) - Natürliche Stein-Textur */
[data-theme="pebble"] {
    --beige: #3a3632;
    --beige-dark: #4a4642;
    --black: #2a2622;
    --heading: #e8e4df;
    --text: #e8e4df;
    --text-light: #b5afa8;
    --nav-bg: rgba(50, 46, 42, 0.95);
    --nav-border: #5a5652;
    --footer-bg: #1f1c1a;
    --footer-text: rgba(230,225,220,0.6);
    --footer-link: rgba(245,240,235,0.8);
    --accent: #c9a66b;
    --base-color: #3a3632;
}

/* SVG Noise Texture für strukturierte Themes */
[data-theme="marble"] .page-container,
[data-theme="water"] .page-container,
[data-theme="slate"] .page-container,
[data-theme="pebble"] .page-container {
    background-color: var(--base-color);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
    background-size: 200px 200px;
}

/* Marmor: Zusätzliche Adern-Struktur */
[data-theme="marble"] .page-container {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='veins'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.02 0.06' numOctaves='2' result='turbulence'/%3E%3CfeDisplacementMap in2='turbulence' in='SourceGraphic' scale='15' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath d='M0,100 Q50,80 100,100 T200,100' stroke='rgba(255,255,255,0.08)' stroke-width='2' fill='none' filter='url(%23veins)'/%3E%3Cpath d='M0,50 Q80,30 150,70 T200,40' stroke='rgba(200,200,200,0.05)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M0,150 Q60,170 120,140 T200,160' stroke='rgba(180,180,180,0.04)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-blend-mode: overlay, soft-light;
    background-size: 150px 150px, 300px 300px;
}

/* Wasser: Wellenartige Struktur */
[data-theme="water"] .page-container {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='water'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.08' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23water)' opacity='0.4'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,10 Q25,5 50,10 T100,10' stroke='rgba(100,180,255,0.06)' stroke-width='0.5' fill='none'/%3E%3Cpath d='M0,15 Q25,10 50,15 T100,15' stroke='rgba(80,160,240,0.04)' stroke-width='0.3' fill='none'/%3E%3C/svg%3E");
    background-blend-mode: overlay, normal;
    background-size: 250px 250px, 100px 20px;
}

/* Schiefer: Geschichtete Stein-Struktur */
[data-theme="slate"] .page-container {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='slate'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4 0.01' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23slate)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='4' x2='100' y2='4' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3Cline x1='0' y1='2' x2='60' y2='2' stroke='rgba(255,255,255,0.02)' stroke-width='0.3'/%3E%3Cline x1='30' y1='6' x2='100' y2='6' stroke='rgba(200,200,200,0.02)' stroke-width='0.3'/%3E%3C/svg%3E");
    background-blend-mode: overlay, normal;
    background-size: 180px 180px, 100px 8px;
}

/* Kiesel: Organische Stein-Struktur */
[data-theme="pebble"] .page-container {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='pebble'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.08' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pebble)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='15' cy='20' rx='12' ry='10' fill='rgba(255,255,255,0.015)'/%3E%3Cellipse cx='45' cy='15' rx='10' ry='8' fill='rgba(200,190,180,0.02)'/%3E%3Cellipse cx='30' cy='45' rx='14' ry='11' fill='rgba(180,175,170,0.015)'/%3E%3Cellipse cx='50' cy='50' rx='8' ry='9' fill='rgba(220,215,210,0.012)'/%3E%3Cellipse cx='10' cy='50' rx='9' ry='7' fill='rgba(190,185,180,0.018)'/%3E%3C/svg%3E");
    background-blend-mode: overlay, normal;
    background-size: 120px 120px, 60px 60px;
}

/* ============================================
   THEMES MIT ECHTEN HINTERGRUNDBILDERN
   ============================================ */

/* Theme: Schwarzer Sand - Elegante dunkle Wellen */
[data-theme="black-sand"] {
    --beige: #1a1a1a;
    --beige-dark: #252525;
    --black: #0a0a0a;
    --heading: #e8e8e8;
    --text: #e8e8e8;
    --text-light: #a0a0a0;
    --nav-bg: rgba(15, 15, 15, 0.92);
    --nav-border: #333;
    --footer-bg: #050505;
    --footer-text: rgba(255,255,255,0.5);
    --footer-link: rgba(255,255,255,0.75);
    --accent: #8a8a8a;
}

[data-theme="black-sand"] .page-container {
    background:
        linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.25)),
        url('../../textures/dark-marble-black.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

/* Theme: Kieselsteine - Echte Stein-Textur */
[data-theme="pebbles-photo"] {
    --beige: #2a2a2a;
    --beige-dark: #3a3a3a;
    --black: #1a1a1a;
    --heading: #f0f0f0;
    --text: #f0f0f0;
    --text-light: #b0b0b0;
    --nav-bg: rgba(30, 30, 30, 0.94);
    --nav-border: #454545;
    --footer-bg: #0a0a0a;
    --footer-text: rgba(255,255,255,0.55);
    --footer-link: rgba(255,255,255,0.8);
    --accent: #7a9a8a;
}

[data-theme="pebbles-photo"] .page-container {
    background:
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
        url('../../textures/dark-stone.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

/* Theme: Pool/Wasser - Echte Wasser-Textur */
[data-theme="pool-photo"] {
    --beige: #1a3040;
    --beige-dark: #254050;
    --black: #0a1820;
    --heading: #e0f5ff;
    --text: #e0f5ff;
    --text-light: #80c0d8;
    --nav-bg: rgba(15, 35, 50, 0.94);
    --nav-border: #2a5565;
    --footer-bg: #050a10;
    --footer-text: rgba(150,220,240,0.6);
    --footer-link: rgba(180,240,255,0.85);
    --accent: #40b8d8;
}

[data-theme="pool-photo"] .page-container {
    background:
        linear-gradient(rgba(10,30,40,0.6), rgba(10,30,40,0.6)),
        url('../../textures/dark-water.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

/* Theme: Beton - Echte Beton/Putz-Textur */
[data-theme="concrete-photo"] {
    --beige: #3a3a3a;
    --beige-dark: #4a4a4a;
    --black: #2a2a2a;
    --heading: #e8e8e8;
    --text: #e8e8e8;
    --text-light: #a5a5a5;
    --nav-bg: rgba(45, 45, 45, 0.94);
    --nav-border: #555;
    --footer-bg: #1a1a1a;
    --footer-text: rgba(255,255,255,0.55);
    --footer-link: rgba(255,255,255,0.8);
    --accent: #8b9a85;
}

[data-theme="concrete-photo"] .page-container {
    background:
        linear-gradient(rgba(30,30,30,0.7), rgba(30,30,30,0.7)),
        url('../../textures/dark-concrete.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

/* Theme Icons */
.theme-icon.light {
    background: linear-gradient(135deg, #f5f0e8 50%, #e8e2d8 50%);
}

.theme-icon.dark {
    background: linear-gradient(135deg, #1a1a1a 50%, #2d2d2d 50%);
}

.theme-icon.rainbow {
    background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6);
}

.theme-icon.autumn {
    background: linear-gradient(135deg, #cc5500 0%, #d4a574 50%, #5c4033 100%);
}

.theme-icon.marble {
    background:
        linear-gradient(125deg, rgba(255,255,255,0.4) 0%, transparent 40%),
        linear-gradient(245deg, rgba(200,200,200,0.3) 0%, transparent 50%),
        linear-gradient(135deg, #2a2a2a 50%, #3a3a3a 50%);
}

.theme-icon.water {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(100,180,255,0.4) 0%, transparent 60%),
        linear-gradient(135deg, #1a2a3a 50%, #243648 50%);
}

.theme-icon.slate {
    background:
        repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(255,255,255,0.1) 4px, rgba(255,255,255,0.1) 5px),
        linear-gradient(135deg, #2d3436 50%, #3d4446 50%);
}

.theme-icon.pebble {
    background:
        radial-gradient(ellipse 6px 5px at 30% 30%, rgba(255,255,255,0.2) 0%, transparent 70%),
        radial-gradient(ellipse 5px 6px at 70% 60%, rgba(200,190,180,0.25) 0%, transparent 70%),
        linear-gradient(135deg, #3a3632 50%, #4a4642 50%);
}

/* Theme Icons für Foto-Themes */
.theme-icon.black-sand {
    background:
        linear-gradient(150deg, rgba(255,255,255,0.15) 0%, transparent 40%),
        linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

.theme-icon.pebbles-photo {
    background:
        radial-gradient(circle at 25% 35%, #5a6a6a 0%, transparent 25%),
        radial-gradient(circle at 70% 60%, #7a8080 0%, transparent 20%),
        radial-gradient(circle at 50% 80%, #4a5555 0%, transparent 22%),
        #2a3030;
}

.theme-icon.pool-photo {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(100,220,240,0.5) 0%, transparent 50%),
        linear-gradient(135deg, #1a4050 50%, #2a5060 50%);
}

.theme-icon.concrete-photo {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 50%),
        #4a4a4a;
}