/* ========================================================================== Design Tokens ========================================================================== */ :root { --bg: #0b0c0f; --bg-elevated: #131418; --surface: #17181d; --surface-2: #1e2026; --surface-3: #26282f; --border: #24262c; --border-strong: #34363e; --text: #f5f6f7; --text-dim: #9a9ca3; --text-faint: #6b6d74; --accent: #17c3b2; --accent-strong: #0fa89a; --accent-soft: rgba(23, 195, 178, 0.14); --accent-contrast: #04201d; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px; --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --header-h: 60px; --carousel-item-h: 84px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur: 250ms; /* Safe-Area-Insets (Notch/Dynamic Island/Statusleiste/Home-Indicator). Der 0px-Fallback sorgt dafür, dass auf Geräten ohne Aussparung kein zusätzlicher Abstand entsteht. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Von theme.js gesetzt, damit Verläufe/Transparenzen den Akzent auch ohne festen Hex-Wert im CSS nachbilden können. */ --accent-r: 23; --accent-g: 195; --accent-b: 178; --header-bg: rgba(11, 12, 15, 0.85); --select-option-bg: #1c1d22; } /* ========================================================================== Heller Modus — wird von theme.js per data-theme="light" auf gesetzt. Icons sind weiße Linien-Grafiken für den dunklen Modus; im hellen Modus werden sie invertiert statt als zweiter Bildsatz gepflegt. ========================================================================== */ :root[data-theme="light"] { --bg: #f2f3f6; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #eef0f4; --surface-3: #e3e5ea; --border: #e1e3e9; --border-strong: #cacdd5; --text: #14161a; --text-dim: #5b5e67; --text-faint: #8a8d95; --shadow-md: 0 8px 24px rgba(20, 22, 30, 0.10); --shadow-lg: 0 16px 48px rgba(20, 22, 30, 0.16); --header-bg: rgba(255, 255, 255, 0.8); --select-option-bg: #ffffff; } :root[data-theme="light"] img:not(.no-invert) { filter: invert(1); } /* ========================================================================== Reset & Scroll-/Zoom-Sperre ========================================================================== */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; margin: 0; padding: 0; background-color: var(--bg); color: var(--text); font-family: "Inter", sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; cursor: default; overflow: hidden; overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select { touch-action: manipulation; -webkit-user-select: text; user-select: text; } ::selection { background-color: var(--accent); color: var(--accent-contrast); } h1, h2, h3, h4, p, ul { margin: 0; padding: 0; } /* Das hidden-Attribut muss IMMER gewinnen, komplett unabhängig davon, wie spezifisch eine andere Regel ist. Ohne dieses !important überschreibt z.B. eine simple ID- oder Klassenregel mit "display: flex" (wie an mehreren Stellen in dieser App) die eingebaute [hidden]{display:none} des Browsers, weil Autor-Regeln grundsätzlich vor User-Agent-Regeln gewinnen, auch bei gleicher/niedrigerer Spezifität - das Element bliebe dann sichtbar, obwohl .hidden = true gesetzt wurde. Echter Bug, der genau das ausgelöst hat (Login-Formular UND "Angemeldet als..." gleichzeitig sichtbar). Diese eine globale Regel ist robuster als das an jeder einzelnen Stelle mit :not([hidden]) nachzuziehen. */ [hidden] { display: none !important; } img { display: block; max-width: 100%; } button { font-family: inherit; } /* ========================================================================== App-Shell ========================================================================== */ .app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .app-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; display: flex; flex-direction: column; /* Seitliche Insets wirken hier einmalig für den gesamten Inhalt (Querformat mit Notch); unten sorgt das Inset dafür, dass gescrollter Inhalt nicht hinter dem Home-Indikator verschwindet. */ padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right); } .app-main::-webkit-scrollbar { display: none; } .header { flex: 0 0 auto; height: calc(var(--header-h) + var(--safe-top)); padding: var(--safe-top) calc(var(--space-3) + var(--safe-right)) 0 calc(var(--space-3) + var(--safe-left)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background-color: var(--header-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border); position: relative; z-index: 10; } .site-name { flex: 1; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: 0.2px; } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-pill); border: none; background-color: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .icon-btn img { width: 18px; height: 18px; opacity: 0.9; } .icon-btn svg { width: 18px; height: 18px; color: var(--text); opacity: 0.9; } .icon-btn-sm { width: 30px; height: 30px; flex-shrink: 0; } .icon-btn-sm img, .icon-btn-sm svg { width: 14px; height: 14px; } .icon-btn:active { transform: scale(0.9); background-color: var(--surface-2); } .icon-btn.is-home { opacity: 0.45; } .icon-btn.is-home:active { transform: none; background-color: var(--surface); } .view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; animation: viewIn var(--dur) var(--ease); } /* Bewusst margin-top statt transform: ein transform (auch nur kurz während einer Animation) macht das Element zum Containing Block für alle position:fixed-Nachfahren - .kette-controls/.dreieck-controls würden sich dann nicht mehr an den echten Viewport-Rand anhängen, sondern an die (durch das Safe-Area-Padding von .app-main bereits leicht nach oben verschobene) Kante von .view. Genau das war die Ursache dafür, dass diese Leisten auf iOS nicht ganz am unteren Bildschirmrand saßen. */ @keyframes viewIn { from { opacity: 0; margin-top: 8px; } to { opacity: 1; margin-top: 0; } } .content-wrapper { position: sticky; top: 0; z-index: 5; background-color: var(--bg); padding: var(--space-5) var(--space-4) var(--space-1) var(--space-4); } h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; text-align: left; } /* ========================================================================== Buttons & Formularelemente ========================================================================== */ .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 15px; border-radius: var(--radius-lg); font-size: 16px; font-weight: 700; border: none; cursor: pointer; font-family: "Inter", sans-serif; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .btn:active { transform: scale(0.97); } .btn-primary { background-color: var(--accent); color: var(--accent-contrast); margin-top: var(--space-2); } select.select-field { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; outline: none; background-color: var(--surface-2); color: var(--text); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; padding: 8px 26px 8px 12px; border-radius: var(--radius-pill); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a9ca3' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; } select.select-field option { background-color: var(--select-option-bg); color: var(--text); } .pill-group { display: flex; gap: 8px; } .pill { flex: 1; text-align: center; padding: 10px 0; border-radius: var(--radius-pill); background-color: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .pill.active { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .pill:active { transform: scale(0.92); } .swatch-group { display: flex; gap: var(--space-3); } .swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; padding: 3px; cursor: pointer; background: transparent; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .swatch-dot { display: block; width: 100%; height: 100%; border-radius: 50%; } .swatch.active { border-color: var(--text); } .swatch:active { transform: scale(0.9); } .hint { color: var(--text-dim); font-size: 14px; font-weight: 400; padding: var(--space-4) 0; text-align: center; } /* ========================================================================== Dashboard ========================================================================== */ .install-banner { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) var(--space-4) 0 var(--space-4); padding: var(--space-3); background-color: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); } .install-banner[hidden] { display: none; } .install-banner-icon { width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0; } .install-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .install-banner-text strong { font-size: 14px; font-weight: 700; } .install-banner-text span { font-size: 12px; color: var(--text-dim); } .install-banner-action { width: auto; flex-shrink: 0; padding: 10px 16px; font-size: 13px; margin-top: 0; } .install-banner-close { flex-shrink: 0; } .cat_wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4) var(--space-4); } .cat { position: relative; background-color: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; cursor: pointer; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .cat:active { transform: scale(0.96); border-color: var(--accent); } .cat-icon { width: 56px; height: 56px; border-radius: var(--radius-pill); background: linear-gradient(155deg, var(--accent-soft), rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.02)); display: flex; align-items: center; justify-content: center; } .cat-icon img, .cat-icon svg { width: 26px; height: 26px; color: var(--accent); } .cat-label { font-size: 15px; font-weight: 600; } .cat-disabled { opacity: 0.45; cursor: default; } .cat-disabled:active { transform: none; border-color: var(--border); } .cat-disabled .cat-icon { background: var(--surface-3); } .cat-badge { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-dim); background-color: var(--surface-2); border-radius: var(--radius-pill); padding: 4px 8px; } /* ========================================================================== Bundmaßrechner ========================================================================== */ .rechner-fields { position: sticky; top: 0; z-index: 5; background-color: var(--bg); padding-top: var(--space-3); padding-bottom: var(--space-3); } /* Flache Reihen im Stil der ursprünglichen bun.php: Label links, Eingabe rechtsbündig, Einheit dahinter. Gesamtlänge bleibt unverkastelt auf dem Hintergrund, die drei Einteilungsoptionen sind auswählbare Karten, deren Auswahl sich allein über die Randfarbe zeigt (kein zusätzliches Icon). */ .label { flex: 1; text-align: left; font-size: 15px; font-weight: 500; color: var(--text-dim); } .input-field { border: none; background: transparent; outline: none; font-family: "Inter", sans-serif; font-size: 18px; font-weight: 300; color: var(--text); text-align: right; width: 40%; min-width: 0; } .unit-static { font-size: 13px; font-weight: 600; color: var(--text-dim); white-space: nowrap; } .lenght { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); margin: 0 var(--space-4) var(--space-3) var(--space-4); } .lenght .label { font-size: 17px; font-weight: 600; color: var(--text); } .lenght-input { font-size: 24px !important; font-weight: 300 !important; } .lenght-input::-webkit-outer-spin-button, .lenght-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lenght-input { -moz-appearance: textfield; } .selectable-div { background-color: var(--surface); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 var(--space-4) var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-2); border: 2px solid transparent; cursor: pointer; transition: border-color var(--dur-fast) var(--ease); } .selectable-div.selected { border-color: var(--accent); } .selectable-div.selected .label { color: var(--text); } .selectable-div:not(.selected) input, .selectable-div:not(.selected) select { opacity: 0.4; pointer-events: none; } .half-width { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; } .half-width .label { flex: 0 0 auto; font-size: 13px; } .half-width .input-field { flex: 1; width: auto; } .output-line-wrapper { display: flex; justify-content: center; } .output-line { width: 36px; height: 4px; border-radius: 4px; background-color: var(--border-strong); } /* Maßketten-Panel: füllt den verfügbaren Platz, damit möglichst viele Markierungen auf einmal sichtbar sind. */ .kette-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: var(--space-2) var(--space-4) 0 var(--space-4); padding: var(--space-2) 0; } /* Ergebnis-/Maßketten-Karussell: das erste/aktuelle Element erscheint mittig im Rahmen, weitere Optionen lassen sich mit Snap-Scroll durchblättern. Oben/unten blendet eine Maske den Inhalt weich aus, als Hinweis, dass sich dort noch mehr befindet. */ .results-carousel-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .results-carousel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent 0, black 28px, black calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 28px, black calc(100% - 28px), transparent 100%); } .results-carousel::-webkit-scrollbar { display: none; } .carousel-pad { height: calc(50% - (var(--carousel-item-h) / 2)); } .results-frame { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: var(--carousel-item-h); border-radius: var(--radius-md); border: 1.5px solid var(--accent); background-color: var(--accent-soft); pointer-events: none; z-index: 1; } /* Einfache antippbare Ergebniszeile (keine Auswahlanimation nötig - ein Klick navigiert direkt zur Maßkette). */ .result-container { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: opacity var(--dur-fast) var(--ease); } .result-container:last-child { border-bottom: none; } .result-container:active { opacity: 0.6; } .result-wrapper { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .result-container .left { text-align: left; } .result-container .number { font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1; } .result-container .label { font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .result-container .center { flex-grow: 1; text-align: center; } .result-container .number2 { font-size: 16px; font-weight: 600; color: var(--text); } .right img { width: 18px; height: 18px; opacity: 0.5; } /* Ziehbares Ergebnis-Sheet im Rechner */ .rechner-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; flex-direction: column; height: 78vh; max-height: calc(100dvh - var(--header-h) - var(--safe-top) - 24px); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right); transition: transform var(--dur) var(--ease); } .rechner-sheet.dragging { transition: none; } .rechner-sheet-handle { flex: 0 0 auto; padding: 10px var(--space-4) var(--space-2) var(--space-4); touch-action: none; cursor: grab; } .rechner-sheet-handle:active { cursor: grabbing; } .rechner-sheet-summary { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; } .rechner-sheet-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); } .rechner-sheet-count { font-size: 12px; font-weight: 600; color: var(--text-dim); background-color: var(--surface-2); padding: 4px 10px; border-radius: var(--radius-pill); } .usage-badge { font-size: 11px; font-weight: 700; color: var(--accent); background-color: var(--accent-soft); padding: 4px 10px; border-radius: var(--radius-pill); margin-left: auto; } /* Premium-gesperrte Regler: sichtbar, aber optisch zurückgenommen. Klicks bleiben bewusst aktiv - sie öffnen das Premium-Sheet statt zu ändern. */ .locked { opacity: 0.4; } .locked .pill, .locked .swatch { cursor: pointer; } .rechner-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 0 var(--space-4) var(--space-4) var(--space-4); scrollbar-width: none; } .rechner-sheet-body::-webkit-scrollbar { display: none; } .vis { display: flex; width: 100%; height: 6px; gap: 2px; } .field { flex-grow: 1; height: 6px; border-radius: 2px; background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35); } /* ========================================================================== Maßkette (gleiches Karussell-Muster wie die Ergebnisliste) ========================================================================== */ .kette-summary-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: var(--space-2) 0 var(--space-3) 0; } .kette-summary-main { display: flex; align-items: baseline; gap: 10px; } .kette-summary-count { font-size: 40px; font-weight: 800; letter-spacing: -1px; color: var(--accent); line-height: 1; } .kette-summary-desc { font-size: 15px; font-weight: 600; color: var(--text-dim); } .kette-summary-total { font-size: 12px; font-weight: 600; color: var(--text-dim); background-color: var(--surface-2); padding: 5px 14px; border-radius: var(--radius-pill); } .kette-point { height: var(--carousel-item-h); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; scroll-snap-align: center; scroll-snap-stop: always; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .kette-point-index { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; } .kette-point-value { font-size: 26px; font-weight: 700; color: var(--text-dim); transition: color var(--dur-fast) var(--ease); } .kette-point.is-current .kette-point-value { color: var(--accent); } /* Punkt 0: sichtbar, aber kein Auswahlschritt - kein Snap-Ziel, nicht antippbar, optisch zurückgenommen. */ .kette-point-lead { scroll-snap-align: none; scroll-snap-stop: normal; cursor: default; pointer-events: none; opacity: 0.4; } .kette-point.kette-endpoint .kette-point-index { color: var(--accent); } /* Fest über der (dahinter weiterlaufenden) Maßketten-Liste verankert - wie das gezogene Ergebnis-Sheet im Rechner "schwebt" auch diese Leiste, statt im normalen Fluss Platz einzunehmen. */ .kette-controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) calc(var(--space-4) + var(--safe-right)) calc(var(--space-3) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left)); background-color: var(--header-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid var(--border); } .kette-controls .btn { flex: 1; padding: 13px; font-size: 15px; } .btn-secondary { background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border); } /* ========================================================================== Bottom-Sheets (Einstellungen & Maß laden) ========================================================================== */ .sheet { position: fixed; inset: 0; z-index: 40; visibility: hidden; pointer-events: none; /* Visibility erst NACH der Slide-Transition umschalten, sonst wird die Slide-out-Animation beim Schließen sofort abgeschnitten. */ transition: visibility 0s linear var(--dur); } .sheet.active { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; } .sheet-backdrop { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity var(--dur) var(--ease); } .sheet.active .sheet-backdrop { opacity: 1; } .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; box-sizing: border-box; background-color: var(--bg-elevated); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 0 calc(var(--space-5) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left)); transform: translateY(100%); transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-lg); } .sheet.active .sheet-panel { transform: translateY(0); } .sheet-panel.dragging { transition: none; } /* Größere, unsichtbare Ziehfläche über dem eigentlichen Griff-Strich, damit das Zuziehen per Runterziehen auch auf kleinen Displays gut trifft. */ .sheet-handle { width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; margin-bottom: 8px; } .sheet-handle::before { content: ""; width: 36px; height: 4px; border-radius: 4px; background-color: var(--border-strong); } .sheet-handle:active { cursor: grabbing; } .sheet h3 { margin-bottom: var(--space-4); } .settings-option { margin-bottom: var(--space-5); } .settings-option-title { font-size: 15px; font-weight: 700; display: block; } .settings-option-desc { font-size: 13px; color: var(--text-dim); margin: 2px 0 var(--space-3) 0; } .settings-option select.select-field { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 12px 36px 12px 14px; background-color: var(--surface); border: 1px solid var(--border); font-size: 15px; background-position: right 14px center; } .preset-categories { list-style: none; margin: 0 0 var(--space-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .preset-category { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); background-color: var(--surface); border: 1.5px solid var(--border); cursor: pointer; font-size: 15px; font-weight: 600; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .preset-category:active { transform: scale(0.98); } .preset-category img { width: 22px; height: 22px; } .preset-category.active { border-color: var(--accent); background-color: var(--accent-soft); color: var(--accent); } .preset-items { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); } .preset-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background-color: var(--surface-2); border-radius: var(--radius-md); cursor: pointer; font-size: 15px; font-weight: 600; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .preset-item:active { transform: scale(0.98); background-color: var(--accent-soft); } .dreieck-preset-item { width: 100%; box-sizing: border-box; border: none; justify-content: flex-start; text-align: left; color: var(--text); font-family: "Inter", sans-serif; gap: var(--space-3); } .dreieck-preset-icon { width: 34px; height: 34px; flex: 0 0 auto; color: var(--text-dim); } .preset-item-value { color: var(--text-dim); font-size: 13px; font-weight: 500; } /* Admin-Panel ("Maße verwalten") */ .admin-category-group { margin-bottom: var(--space-4); } .admin-category-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin: 0 0 var(--space-2) 0; } .admin-item-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px 10px 10px 14px; background-color: var(--surface-2); border-radius: var(--radius-md); margin-bottom: var(--space-2); } .admin-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .admin-item-label { font-size: 14px; font-weight: 600; } .admin-item-value { font-size: 12px; color: var(--text-dim); } .admin-delete-btn { flex-shrink: 0; } .admin-form { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-2); } .admin-form .settings-option-title { margin-bottom: 2px; } .admin-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); background-color: var(--surface); color: var(--text); font-family: "Inter", sans-serif; font-size: 15px; outline: none; transition: border-color var(--dur-fast) var(--ease); } .admin-input::placeholder { color: var(--text-faint); } .admin-input:focus { border-color: var(--accent); } .admin-select { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 12px 36px 12px 14px; background-color: var(--surface); border: 1px solid var(--border); background-position: right 14px center; } .admin-value-row { display: flex; gap: var(--space-2); } .admin-value-row .admin-input { flex: 1; min-width: 0; } .admin-value-row .admin-select { flex: 0 0 auto; width: auto; } .admin-reset-link { display: block; width: 100%; margin-top: var(--space-5); padding: 10px; background: none; border: none; color: var(--text-faint); font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; text-decoration: underline; } .preset-item-cat { color: var(--text-dim); font-weight: 500; margin-right: 4px; } .preset-item-cat::after { content: "·"; margin-left: 4px; } /* Admincode/Code-Generator im Admin-Panel und Custom-Markierungsabstand in der Maßkette - gleiches kompaktes "Eingabe + Button"-Zeilenmuster. */ .admin-code-row { display: flex; align-items: center; gap: var(--space-2); } .admin-code-row .admin-input { flex: 1; min-width: 0; } .admin-code-display { flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); background-color: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-align: center; } .admin-code-label { margin-top: var(--space-3); } /* Admin-Dashboard (Statistik + Premium-Codes) */ .admin-dashboard { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); } .admin-range-group { margin-bottom: var(--space-3); } .admin-create-code-form { border-top: none; padding-top: 0; margin-top: 0; } .admin-stat-overview { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); } .admin-stat-overview-item { flex: 1; background-color: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; } .admin-stat-overview-value { font-size: 20px; font-weight: 800; color: var(--accent); } .admin-stat-overview-label { font-size: 12px; font-weight: 600; color: var(--text-dim); } .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); } .admin-stat-card { background-color: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-3); } .admin-stat-value { font-size: 24px; font-weight: 800; color: var(--text); } .admin-stat-label { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-top: 2px; } .admin-stat-sub { font-size: 11px; color: var(--text-faint); margin-top: 4px; } .admin-chart-section { margin-top: var(--space-4); } .admin-chart { display: block; width: 100%; height: 100px; margin-top: var(--space-2); } .admin-chart rect { fill: var(--accent); } .admin-code-mono { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: 0.5px; } .admin-code-status { font-weight: 700; } .admin-code-status-available { color: var(--accent); } .admin-code-status-redeemed { color: var(--text-dim); } .admin-code-status-deactivated { color: #ff6161; } .kette-step-custom { margin-top: var(--space-2); } /* Premium-Sheet */ .premium-benefits { list-style: none; margin: 0 0 var(--space-4) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .premium-benefits li { position: relative; padding-left: 26px; font-size: 14px; font-weight: 500; color: var(--text); } .premium-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } .settings-option-title-row { display: flex; align-items: center; gap: var(--space-2); } .settings-title-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); background-color: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; } .settings-title-badge.is-admin { background-color: var(--surface-3); color: var(--text); } .premium-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-pill); background-color: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700; margin-bottom: var(--space-3); } .premium-badge-admin { background-color: var(--surface-2); color: var(--text); } .premium-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); } .premium-error { color: #ff6161; padding: 0; text-align: left; } #account-logged-out, #account-logged-in { display: flex; flex-direction: column; gap: var(--space-2); } .account-actions { display: flex; gap: var(--space-2); } .account-actions .btn { flex: 1; } /* Eigenes "Anzeigen"-Banner statt echter Drittanbieter-Werbung (die Offline-Fähigkeit der App würde das nicht erlauben) - verschwindet mit Premium. */ .ad-banner { display: flex; flex-direction: column; gap: 4px; margin: 0 var(--space-4) var(--space-4) var(--space-4); padding: var(--space-3); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); cursor: pointer; } .ad-banner[hidden] { display: none; } .ad-banner-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); } .ad-banner-text { font-size: 13px; font-weight: 600; color: var(--text-dim); } .preset-sheet-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .preset-sheet-header h3 { margin: 0; } .search-field { margin-bottom: var(--space-3); } .search-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); background-color: var(--surface); color: var(--text); font-family: "Inter", sans-serif; font-size: 15px; outline: none; transition: border-color var(--dur-fast) var(--ease); } .search-field input::placeholder { color: var(--text-faint); } .search-field input:focus { border-color: var(--accent); } /* ========================================================================== Dreiecksrechner ========================================================================== */ /* .dreieck-controls schwebt jetzt fest über dem Inhalt (siehe unten) - Platz dafür am unteren Rand freihalten, damit Canvas/Zusammenfassung nicht darunter verschwinden. ~74px Leisten-Eigenhöhe (Innenabstand + Button) plus das Safe-Area-Inset, das die Leiste selbst schon abzieht. */ .dreieck-view { padding-bottom: calc(74px + var(--safe-bottom)); } .dreieck-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; margin: var(--space-3) var(--space-4) 0 var(--space-4); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .dreieck-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; } .dreieck-svg text { font-family: "Inter", sans-serif; user-select: none; } .dreieck-hint { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--space-6); color: var(--text-faint); font-size: 14px; font-weight: 500; text-align: center; pointer-events: none; } .dreieck-hint[hidden] { display: none; } .dreieck-error { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); background-color: rgba(255, 97, 97, 0.14); border: 1px solid #ff6161; border-radius: var(--radius-md); color: #ff6161; font-size: 14px; font-weight: 600; text-align: center; pointer-events: none; } .dreieck-error[hidden] { display: none; } .dreieck-summary { display: flex; justify-content: center; gap: var(--space-5); padding: var(--space-3) var(--space-4) 0 var(--space-4); } .dreieck-summary[hidden] { display: none; } .dreieck-summary-item { font-size: 14px; font-weight: 700; color: var(--text); } .dreieck-summary-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); } /* Fest am unteren Bildschirmrand verankert - wie .kette-controls, statt im normalen Fluss Platz einzunehmen (dessen Safe-Area-Padding sonst mit dem von .app-main doppelt gezählt würde, siehe Kommentar bei @keyframes viewIn). */ .dreieck-controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) calc(var(--space-4) + var(--safe-right)) calc(var(--space-3) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left)); background-color: var(--header-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid var(--border); } .dreieck-controls .btn { flex: 1; } .tri-raw-polyline { fill: none; stroke: var(--text-dim); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .tri-side-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; pointer-events: none; } .tri-side-hit { stroke: transparent; stroke-width: 32; pointer-events: stroke; cursor: pointer; } .tri-side-label { fill: var(--text-dim); font-size: 14px; font-weight: 600; } .tri-side-label.has-value { fill: var(--accent); font-weight: 700; } .tri-side-label.is-computed { fill: var(--text); font-weight: 600; font-style: italic; } .tri-vertex-dot { fill: var(--bg-elevated); stroke: var(--accent); stroke-width: 2.5; pointer-events: none; } .tri-vertex-hit { fill: transparent; pointer-events: all; cursor: pointer; } .tri-vertex-label { fill: var(--text); font-size: 15px; font-weight: 700; } .tri-angle-arc { fill: none; stroke: var(--text-faint); stroke-width: 1.5; pointer-events: none; } .tri-angle-label { fill: var(--text-dim); font-size: 12px; font-weight: 600; } .tri-angle-label.has-value { fill: var(--accent); font-weight: 700; } .tri-angle-label.is-computed { fill: var(--text); font-weight: 600; font-style: italic; } .dreieck-value-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); } .dreieck-computed-hint { padding: 0 0 var(--space-2) 0; text-align: left; } .dreieck-value-row { display: flex; align-items: center; gap: var(--space-2); } .dreieck-value-row .admin-input { flex: 1; min-width: 0; } .dreieck-value-row .unit-static { font-size: 15px; font-weight: 700; color: var(--text); } .dreieck-value-actions { display: flex; align-items: center; gap: var(--space-2); } .dreieck-value-actions .btn-primary { flex: 1; margin-top: 0; }