:root{ --bg: #ffffff; --fg: #1a1a1a; --muted:#666; --panel:#f7f7f9; --shadow: 0 8px 24px rgba(0,0,0,.08); --accent:#6aa9e9; /* Pastell-Blau */ --radius: 14px; --maxw: 1100px; --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --size: 16px; --motion: 1; /* 1 = enabled, 0 = reduced */ } /* Dark mode vars will be toggled via class on */ html.dark{ --bg: #0f1216; --fg: #e8eaed; --muted:#a1a7b2; --panel:#151a20; --shadow: 0 8px 24px rgba(0,0,0,.4); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: var(--font); font-size: var(--size); color:var(--fg); background:var(--bg); line-height:1.7; } .container{max-width:var(--maxw); margin:0 auto; padding: 24px} .header{ position: sticky; top:0; z-index: 50; background: color-mix(in oklab, var(--bg), transparent 0%); border-bottom:1px solid color-mix(in oklab, var(--fg), transparent 90%); backdrop-filter: blur(8px); } .navbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 24px; } .brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; } .brand a{color:var(--fg); text-decoration:none} .nav{ display:flex; gap:18px; align-items:center; } .nav a{ color:var(--fg); text-decoration:none; padding:8px 12px; border-radius:10px; } .nav a.active, .nav a:hover{ background: color-mix(in oklab, var(--accent), var(--bg) 80%); } .settings-btn{ margin-left: 6px; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; border:1px solid color-mix(in oklab, var(--fg), transparent 85%); background: var(--panel); color: var(--fg); cursor:pointer; box-shadow: var(--shadow); } .settings-btn img{ width:22px; height:22px; opacity:.9 } .hero{ display:grid; gap:18px; grid-template-columns: 1.1fr .9fr; padding: 48px 24px; align-items:center; } .hero h1{font-size: clamp(28px, 4vw, 56px); line-height:1.1; margin:0;} .hero p.lead{font-size: clamp(16px, 2vw, 22px); color:var(--muted); margin:0;} .hero .media{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background: var(--panel); } .hero img{width:100%; height:auto; display:block} .section{ padding: 24px; margin: 18px auto; border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); } .section h2{margin-top:0} .grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .footer{ margin-top: 60px; padding: 24px; text-align:center; color:var(--muted); border-top:1px dashed color-mix(in oklab, var(--fg), transparent 80%); } /* Bio page */ .infokarten{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .infokarte{ background: var(--bg); border:1px solid color-mix(in oklab, var(--fg), transparent 85%); border-radius: 14px; padding:16px; box-shadow: var(--shadow) } .infokarte h4{margin:.2rem 0} /* Werke gallery */ .controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom: 12px; } input[type="search"]{ padding:10px 12px; border-radius: 12px; border:1px solid color-mix(in oklab, var(--fg), transparent 85%); background:var(--bg); color:var(--fg); min-width: 240px; } .gallery{ display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .card{ background:var(--bg); border:1px solid color-mix(in oklab, var(--fg), transparent 85%); border-radius:14px; overflow:hidden; box-shadow: var(--shadow); } .card .thumb{ aspect-ratio: 4/3; background:#e9edf3; display:grid; place-items:center; color:#5b7ea3; } .card .content{ padding: 12px 14px } .card h4{ margin: 6px 0 4px } .card p{ margin: 0; color: var(--muted); font-size:.95em } /* Lightbox */ .lightbox{ position: fixed; inset:0; background: rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index: 1000; } .lightbox.open{ display:flex } .lightbox .frame{ background: var(--bg); color: var(--fg); width:min(1000px, 96vw); max-height: 92vh; border-radius:16px; overflow:hidden; box-shadow: var(--shadow); display:grid; grid-template-rows:auto 1fr auto; } .lightbox header, .lightbox footer{ padding: 10px 14px; border-bottom:1px solid color-mix(in oklab, var(--fg), transparent 85%)} .lightbox footer{ border-top:1px solid color-mix(in oklab, var(--fg), transparent 85%); border-bottom:none} .lightbox .stage{ display:grid; place-items:center; overflow:auto; background:var(--panel)} .lightbox img{ max-width: 100%; max-height: 70vh; transform: scale(var(--z, 1)); transition: transform 160ms ease } .lightbox .actions{ display:flex; gap:8px; justify-content:flex-end } button.btn{ background: var(--accent); color:#000; border:none; border-radius: 10px; padding:8px 12px; cursor:pointer; font-weight:600; } button.ghost{ background: color-mix(in oklab, var(--accent), var(--bg) 85%); color: var(--fg); } button.link{ background:transparent; color: var(--fg) } /* Back to top */ #backToTop{ position: fixed; right:18px; bottom:22px; width:46px; height:46px; border-radius:12px; border:1px solid color-mix(in oklab, var(--fg), transparent 85%); background: var(--panel); display:none; place-items:center; box-shadow: var(--shadow); } #backToTop.show{ display:grid } #backToTop img{ width:22px; height:22px } /* Settings panel */ .settings-panel{ position: fixed; right:18px; top:70px; width: min(360px, 92vw); background: var(--panel); border:1px solid color-mix(in oklab, var(--fg), transparent 85%); border-radius: 16px; box-shadow: var(--shadow); padding: 14px; display:none; z-index: 999; } .settings-panel.open{ display:block } .settings-panel h3{ margin: 6px 0 10px } .settings-panel .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items:center; margin:8px 0 } /* Reveal animations */ .reveal{ opacity:0; transform: translateY(12px); transition: opacity 600ms ease, transform 600ms ease } .reveal.visible{ opacity:1; transform:none } /* Responsive hero */ @media (max-width: 900px){ .hero{ grid-template-columns: 1fr; padding: 24px } } /* Link styles */ a{ color: color-mix(in oklab, var(--accent), black 15%) } a:hover{ text-decoration: underline } .small{ font-size:.94em; color:var(--muted) }