/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HINTERZIMMER — GLOBAL STYLES v1.0 Einbinden per: Direkt nach dem öffnenden Tag. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); /* ── CSS VARIABLEN (Basis — werden von Seiten-CSS überschrieben) ── */ :root { --gold: #c9a84c; --gold-l: #e8c97a; --gold-d: #7a5e28; --black: #080808; --surf: #161616; --surf2: #1e1e1e; --border: rgba(201,168,76,.15); --text: #d4c5a0; --text-d: #8a7a58; /* etwas heller als vorher für besseren Kontrast */ --red: #c0392b; --red-l: #e74c3c; --green: #27ae60; --orange: #e67e22; --blue: #3498db; } /* ── RENDERING & KOMFORT ── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; /* von 16px auf 17px */ font-weight: 400; /* nicht mehr 300 */ line-height: 1.65; color: var(--text); background: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── TYPOGRAPHIE ── */ /* Überschriften immer Cinzel */ h1, h2, h3, h4, h5, h6 { font-family: 'Cinzel', serif; font-weight: 600; line-height: 1.3; color: var(--gold-l); letter-spacing: .05em; } /* Fließtext etwas kräftiger */ p { font-weight: 400; line-height: 1.7; color: var(--text); } /* Labels, kleine Texte — nicht mehr zu dünn */ small, .small { font-size: 13px; font-weight: 400; } /* Cinzel-Elemente global etwas schwerer */ [style*="Cinzel"], .nav-card-name, .section-title, .stat-label, .stat-value { font-weight: 600; } /* ── LINKS ── */ a { color: var(--gold); text-decoration: none; transition: color .2s; } a:hover { color: var(--gold-l); } /* ── INPUTS & BUTTONS — Touch-freundlich ── */ input, textarea, select { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; font-weight: 400; min-height: 44px; /* Touch-Target iOS/Android Mindestgröße */ color: var(--text); } button { font-family: 'Cinzel', serif; font-weight: 600; min-height: 44px; cursor: pointer; letter-spacing: .1em; } /* Placeholder lesbarer */ ::placeholder { color: var(--text-d); font-style: italic; opacity: 1; } /* ── SELECTION ── */ ::selection { background: rgba(201,168,76,.25); color: var(--gold-l); } ::-moz-selection { background: rgba(201,168,76,.25); color: var(--gold-l); } /* ── SCROLLBAR (WebKit) ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gold-d); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ── RESPONSIVE SCHRIFT ── */ @media (max-width: 480px) { body { font-size: 16px; line-height: 1.6; } h1 { font-size: clamp(20px, 5vw, 28px); } h2 { font-size: clamp(17px, 4vw, 22px); } h3 { font-size: clamp(15px, 3.5vw, 19px); } /* Touch-Targets auf Mobile noch großzügiger */ button, a[class*="btn"], a[class*="card"] { min-height: 48px; } } @media (min-width: 481px) and (max-width: 860px) { body { font-size: 16.5px; } } @media (min-width: 1400px) { body { font-size: 18px; } } /* ── UTILITY ── */ .text-gold { color: var(--gold); } .text-gold-l { color: var(--gold-l); } .text-dim { color: var(--text-d); } .text-green { color: var(--green); } .text-red { color: var(--red-l); } .font-cinzel { font-family: 'Cinzel', serif; } .italic { font-style: italic; }