/* ============================================================ cloudgarten.de — Das Beet CSS Holzrahmen-Galerie (Eiche + Kiefer + Pinie), Pixel-Ästhetik Ergänzt style.css — keine bestehenden Regeln überschrieben. Nur neue Klassen + .theme-wood Overrides. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); /* ── Holz-Variablen (lokal, ergänzen die globalen in style.css) ── */ :root { --holz-eiche: #d4a85a; /* Rahmen-Außenseite */ --holz-eiche-hell: #e8cc88; /* Glanzlinie / Nav-Leiste */ --holz-kiefer: #c49040; /* Rahmen-Innenrand / Stage-Bar */ --holz-schild: #fdf0d0; /* Schildhintergrund (Pinie) */ --bg-galerie: #f5edd8; /* Galeriewand-Sand */ --holz-dunkel: #6b4c1e; /* Dunkelstes Braun: Buchstaben, aktive Dots */ --holz-text: #5c3d1e; /* Body-Text auf Holz */ --holz-btn-hover: #8b6420; /* Button-Hover */ } /* ── Hamburger & Logo auf Holz-Seiten ────────────────────── .theme-wood auf → überschreibt das Standard-Dunkelgrün. Gilt unabhängig vom data-theme der Sektionen, weil der Hintergrund nie wirklich dunkel ist auf diesen Seiten. */ .theme-wood .cg-hamburger span, .theme-wood .cg-hamburger.is-light span, .theme-wood .cg-hamburger.is-open span { background: var(--holz-dunkel); } .theme-wood .cg-top-logo, .theme-wood .cg-top-logo.is-light { color: var(--holz-dunkel); font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 0.05em; } /* ── Galerie-Header ───────────────────────────────────────── Erste Sektion: Sandy-Hintergrund. padding-top: 90px → Hamburger sitzt bei top: 20px, also brauchen wir mindestens 60px Spielraum. 90px gibt noch Luft ohne zu groß zu wirken. */ .galerie-header { background: var(--bg-galerie); padding: 90px 1rem 1.5rem; text-align: center; } .galerie-title { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--holz-dunkel); letter-spacing: 3px; margin-bottom: 0.5rem; } .galerie-sub { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #b09060; letter-spacing: 2px; } /* ── Galerie-Wand ──────────────────────────────────────────── */ .galerie-wand { background: var(--bg-galerie); padding: 1.5rem 1rem 3rem; min-height: 400px; } .wand { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; max-width: 900px; margin: 0 auto; } /* ── Rahmen-Wrap (eine Pflanze) ──────────────────────────── */ .rahmen-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; } .pflanze-name { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--holz-text); letter-spacing: 1px; text-align: center; padding: 0 4px; } /* ── Eichenholz-Außenrahmen ──────────────────────────────── */ .rahmen { position: relative; background: var(--holz-eiche); padding: 8px; width: 100%; } /* * Glanzlinie als Pseudo-Element. * Simuliert die helle Innenkante eines echten Holzrahmens. * pointer-events: none → Klicks auf Bild/Pfeile werden nicht blockiert. */ .rahmen::before { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border: 2px solid var(--holz-eiche-hell); pointer-events: none; z-index: 2; } /* ── Kiefernholz-Innenrahmen ──────────────────────────────── */ .rahmen-inner { background: var(--holz-kiefer); padding: 5px; position: relative; } /* ── Bildfläche ──────────────────────────────────────────── */ .bild-area { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #4a9e5a; /* Greenscreen-Platzhalter */ display: flex; align-items: center; justify-content: center; } .bild-area img { width: 100%; height: 100%; object-fit: cover; display: block; } .bild-placeholder { font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(0, 0, 0, 0.22); letter-spacing: 1px; text-align: center; padding: 1rem; line-height: 2; } /* ── Navigations-Pfeile ───────────────────────────────────── */ .pfeil { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(180, 130, 40, 0.85); color: #fdf6e8; border: none; font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 8px 9px; cursor: pointer; z-index: 3; transition: background 0.2s; line-height: 1; } .pfeil-l { left: 0; } .pfeil-r { right: 0; } .pfeil:hover:not(:disabled) { background: rgba(140, 95, 20, 0.95); } .pfeil:disabled { opacity: 0.2; cursor: default; } /* ── Stadium-Leiste (Kiefernholz) ────────────────────────── */ .stage-info { background: var(--holz-eiche-hell); padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .stage-label { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--holz-text); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stage-dots { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .dot { width: 6px; height: 6px; background: var(--holz-kiefer); border: 1px solid var(--holz-eiche); } .dot.aktiv { background: var(--holz-dunkel); } /* ── Namensschild (Pinie) ────────────────────────────────── */ .schild { background: var(--holz-schild); border: 2px solid var(--holz-eiche); padding: 8px 12px; width: 100%; } .schild-text { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--holz-text); letter-spacing: 1px; line-height: 2; } /* ── „Ins Gartenbuch"-Button ─────────────────────────────── */ .btn-buch { display: block; width: 100%; background: var(--holz-kiefer); color: #fdf6e8; border: 2px solid var(--holz-eiche); font-family: 'Press Start 2P', monospace; font-size: 7px; padding: 10px; cursor: pointer; letter-spacing: 1px; text-align: center; text-decoration: none; transition: background 0.2s; line-height: 1.6; box-sizing: border-box; } .btn-buch:hover { background: var(--holz-btn-hover); color: #fdf6e8; } /* ── Leer-Zustand ────────────────────────────────────────── */ .galerie-leer { text-align: center; font-family: 'Press Start 2P', monospace; font-size: 7px; color: #b09060; padding: 3rem 1rem; letter-spacing: 1px; line-height: 2; } /* ── Footer auf Holz-Seiten ──────────────────────────────── Dunkelbraun statt Dunkelgrün — passt besser zur Holzpalette. */ .theme-wood .cg-footer { background: var(--holz-dunkel); } .theme-wood .cg-footer a { color: var(--holz-eiche-hell); } .theme-wood .cg-footer a:hover { color: #fdf6e8; } .theme-wood .cg-footer-kofi a { color: var(--holz-eiche); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 600px) { .galerie-title { font-size: 10px; } .wand { grid-template-columns: 1fr; } .galerie-header { padding-top: 80px; } }