/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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; --gold-d-text: #96753a; /* WCAG 4.68:1 auf Schwarz — für Textfarbe statt --gold-d */ --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; } /* ── ADDITIV: Accessibility — Reduced Motion (Freigabe Schritt A) ── Greift automatisch, wenn der Nutzer "Bewegung reduzieren" im Betriebssystem/Browser aktiviert hat. Original-Regeln bleiben unberührt. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── ADDITIV: Komfortmodus (Stufe B — Nutzer-Einstellung) ── Wird über hzKomfortClass($user) in config.php gesetzt, gespeichert in users.komfort_schrift / users.komfort_animation. Unabhängig vom OS-Setting oben — hier entscheidet der Nutzer selbst in profil.php. "zoom" statt einzelner font-size-Overrides: das Projekt arbeitet durchgehend mit festen px-Werten statt rem, ein sauberes globales Skalieren ohne jede Datei einzeln anzufassen geht zuverlässig nur so. Skaliert Layout + Touch-Flächen einheitlich mit. */ /* ── ADDITIV: Komfortmodus (Stufe B — Nutzer-Einstellung) ── Wird über hzKomfortClass($user) in config.php gesetzt, gespeichert in users.komfort_schrift / users.komfort_animation. Unabhängig vom OS-Setting oben — hier entscheidet der Nutzer selbst in profil.php. REVISION: "zoom" wurde entfernt — bricht position:fixed in Chromium (Nav, Popover, Modals rutschen aus ihrer Position). Stattdessen reine font-size-Anhebung: sicher, kollidiert mit nichts, wirkt aber nur auf Text der seine Größe vom body erbt, nicht auf fest gesetzte px-Werte einzelner Elemente. */ body.komfort-schrift { font-size: 19px !important; } body.komfort-schrift, body.komfort-schrift * { font-style: normal !important; text-shadow: 0 0 1px currentColor, 0 0 6px rgba(232,201,122,.22) !important; } body.komfort-noanim *, body.komfort-noanim *::before, body.komfort-noanim *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ── ADDITIV: Komfort-Widget (fliegender Button + Popover) ── Fest positioniert, unabhängig von der jeweiligen Seiten-Nav. Position: oben rechts, unterhalb jeder Top-Nav (46-58px), bewusst NICHT unten wegen der Bottom-Nav auf Bank-Seiten. !important auf Layout-kritischen Eigenschaften, damit nichts von Lade-Reihenfolge oder Seiten-eigenem CSS überschrieben wird. */ .hz-komfort-btn{ position:fixed !important;top:50% !important;right:12px !important; transform:translateY(-50%) !important;z-index:200 !important; width:44px !important;height:44px !important;min-height:0 !important;border-radius:50% !important; display:flex !important;align-items:center;justify-content:center; background:rgba(8,8,8,.88);border:1.5px solid rgba(201,168,76,.45); backdrop-filter:blur(8px);cursor:pointer; box-shadow:0 2px 14px rgba(0,0,0,.5),0 0 16px -4px rgba(201,168,76,.35); animation:hkGlow 3.6s ease-in-out infinite; } .hz-komfort-btn:hover{border-color:rgba(201,168,76,.8)} .hz-komfort-btn i,.hz-komfort-btn svg{ width:22px !important;height:22px !important;stroke:#c9a84c;stroke-width:1.6; animation:hkBlink 4.5s ease-in-out infinite; } @keyframes hkGlow{ 0%,100%{box-shadow:0 2px 14px rgba(0,0,0,.5),0 0 16px -4px rgba(201,168,76,.35)} 50%{box-shadow:0 2px 14px rgba(0,0,0,.5),0 0 22px -2px rgba(201,168,76,.6)} } @keyframes hkBlink{ 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.15)} 97%{transform:scaleY(1)} } .hz-komfort-badge{ position:absolute !important;top:-1px !important;right:-1px !important; width:11px !important;height:11px !important;min-height:0 !important;border-radius:50% !important; background:#e74c3c;border:1.5px solid #080808; } .hz-komfort-badge.off{display:none !important} .hz-komfort-popover{ position:fixed !important;top:50% !important;right:64px !important; transform:translateY(-50%) !important;z-index:200 !important; width:min(280px,calc(100vw - 88px)) !important; max-height:calc(100vh - 40px) !important;overflow-y:auto !important; background:rgba(10,9,6,.97);border:1px solid rgba(201,168,76,.25); border-radius:8px;padding:14px;backdrop-filter:blur(12px); box-shadow:0 8px 30px rgba(0,0,0,.5); font-family:'Cormorant Garamond',Georgia,serif !important;color:#d4c5a0; display:none !important; } .hz-komfort-popover.on{display:block !important} .hkp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .hkp-head span{font-family:'Cinzel',serif !important;font-size:12px !important;letter-spacing:.1em;color:#e8c97a;text-transform:uppercase} .hkp-close{background:none;border:none;color:#9a8a6a;font-size:15px !important;cursor:pointer;line-height:1;padding:2px 4px;min-height:0 !important} .hkp-close:hover{color:#c9a84c} .hkp-row{display:flex !important;align-items:center;justify-content:space-between;gap:10px; padding:9px 0;border-top:1px solid rgba(201,168,76,.12);font-size:14px !important} .hkp-row:first-of-type{border-top:none} .hkp-row input[type="checkbox"]{ -webkit-appearance:none !important;appearance:none !important; width:38px !important;height:22px !important;min-height:0 !important;min-width:0 !important; background:rgba(154,138,106,.3);border-radius:11px !important;position:relative;cursor:pointer;flex-shrink:0; transition:background .2s;margin:0;padding:0;border:none;outline:none; } .hkp-row input[type="checkbox"]::before{content:'';position:absolute !important;top:2px !important;left:2px !important; width:18px !important;height:18px !important;min-height:0 !important;border-radius:50% !important;background:#d4c5a0;transition:transform .2s} .hkp-row input[type="checkbox"]:checked{background:#7a5e28} .hkp-row input[type="checkbox"]:checked::before{transform:translateX(16px);background:#e8c97a} .hkp-info-toggle{width:100%;text-align:left;background:none;border:none;color:#9a8a6a; font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:13px; padding:8px 0 2px;cursor:pointer;display:flex;align-items:center;justify-content:space-between; min-height:0;letter-spacing:0} .hkp-info-toggle:hover{color:#c9a84c} .hkp-info-toggle i{width:14px;height:14px;transition:transform .2s} .hkp-info-toggle.open i{transform:rotate(180deg)} .hkp-info-box{font-size:13px;line-height:1.55;color:#b8a07e;padding-top:6px} .hkp-info-box p{margin-bottom:8px} .hkp-info-box p:last-child{margin-bottom:0} .hkp-info-box b{color:#d4c5a0}