/* ========================================================== calcbox.eu – Design Tokens (Pixel/Terminal Theme) Hinweis: [data-theme="dark"] ist vorbereitet, aber aktuell ungenutzt – setzt data-theme fest auf "light" (siehe inc/header.php) und es gibt keinen Umschalter im UI/JS. Bei Bedarf hier andocken statt einen zweiten Tokensatz anzulegen. ========================================================== */ :root { --color-bg: #0b1020; --color-surface: #121a2e; --color-border: #293858; --color-text: #f4f7ff; --color-text-secondary: #a9b7d4; --color-text-muted: #687797; --color-primary: #58e6b1; --color-primary-light: #8af5cc; --color-accent: #ffca5c; --color-success: #58e6b1; --color-warning: #ffca5c; --color-danger: #ff6b86; --font-sans: 'Space Mono', 'Courier New', monospace; --font-mono: 'Space Mono', 'Courier New', monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-sm: 0; --radius-md: 0; --shadow-sm: 4px 4px 0 #050811; --shadow-md: 6px 6px 0 #050811; --container-width: 1200px; } [data-theme="dark"] { --color-bg: #070b16; --color-surface: #0e1628; --color-border: #263653; --color-primary: #67f0bb; --color-primary-light: #9df8d2; --color-accent: #ffd166; --shadow-sm: 4px 4px 0 #02040a; --shadow-md: 6px 6px 0 #02040a; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-4); } h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-4); } h1 { font-size: 2.25rem; color: var(--color-text); } h2 { font-size: 1.75rem; color: var(--color-text); } h3 { font-size: 1.25rem; font-weight: 600; color: var(--color-text); } h4 { font-size: 1rem; font-weight: 600; } p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); } a { color: var(--color-primary); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--color-accent); } @media (min-width: 768px) { h1 { font-size: 2.5rem; } h2 { font-size: 1.875rem; } } /* ---------- Header ---------- */ .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); } .header-top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; } .logo-link { display: flex; align-items: center; gap: var(--space-2); } .logo-text { font-weight: 700; font-size: 1.1rem; color: var(--color-text); } .logo-suffix { color: var(--color-primary); } .nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: 1px solid var(--color-border); cursor: pointer; padding: var(--space-2); transition: all .15s ease; } .nav-toggle:hover { border-color: var(--color-primary); } .nav-toggle span { width: 22px; height: 2px; background: var(--color-primary); } /* Category Menu */ .category-menu { border-top: 1px solid var(--color-border); padding: var(--space-4) 0 0; display: none; } .category-menu.open { display: flex; } .category-menu-inner { display: flex; flex-direction: column; gap: var(--space-2); } .category-menu a, .category-menu .category-item, .category-toggle, .nav-subgroup-toggle { padding: var(--space-2) 0; font-weight: 500; color: var(--color-text); transition: color .15s ease; border: 0; border-left: 3px solid transparent; padding-left: var(--space-2); cursor: pointer; background: transparent; font-family: inherit; font-size: inherit; text-align: left; } .category-menu a:hover, .category-menu .category-item:hover, .category-toggle:hover, .nav-subgroup-toggle:hover { color: var(--color-primary); border-left-color: var(--color-primary); } .category-toggle, .nav-subgroup-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; } .category-toggle-icon, .nav-subgroup-icon { font-size: 1.1rem; line-height: 1; color: var(--color-primary); } .category-submenu { padding-left: var(--space-4); display: none; flex-direction: column; gap: var(--space-1); font-size: .9rem; } .category-submenu.open { display: flex; } .nav-subgroup { display: flex; flex-direction: column; } .nav-subgroup-menu { display: none; flex-direction: column; gap: var(--space-1); padding-left: var(--space-4); } .nav-subgroup-menu.open { display: flex; } .main-nav { display: none; border-top: 1px solid var(--color-border); padding: var(--space-4) 0; } .main-nav.open { display: flex; flex-direction: column; gap: var(--space-3); } .main-nav a { color: var(--color-text); font-weight: 500; } .main-nav a:hover { color: var(--color-primary); } .nav-utils { display: flex; align-items: center; gap: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3); } .lang-switch a { font-weight: 500; color: var(--color-text-secondary); padding: 0 4px; transition: color .15s ease; } .lang-switch a.active { color: var(--color-primary); } @media (min-width: 900px) { .nav-toggle { display: none; } .category-menu, .main-nav { display: flex !important; flex-direction: row; border: none; padding: 0; gap: var(--space-5); align-items: center; } .category-menu-inner { flex-direction: row; gap: var(--space-6); align-items: center; } .category-menu a, .category-menu .category-item, .category-toggle, .nav-subgroup-toggle { padding: var(--space-2) 0; border: none; } .category-toggle-icon, .nav-subgroup-icon { display: none; } .category-item { position: relative; } .category-submenu { position: absolute; top: calc(100% - 8px); left: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-4) var(--space-3); flex-direction: column; gap: var(--space-2); font-size: 0.95rem; font-weight: 400; width: max-content; box-shadow: var(--shadow-md); } .nav-subgroup { position: relative; } .nav-subgroup-menu { position: absolute; top: calc(var(--space-5) * -1); left: 100%; min-width: 220px; padding: var(--space-5) var(--space-4) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); } .nav-subgroup:hover .nav-subgroup-menu { display: flex; } .category-item:hover .category-submenu { display: flex; } .nav-utils { border: none; padding: 0; margin: 0; gap: var(--space-4); } } /* ---------- Breadcrumb ---------- */ .breadcrumb { padding: var(--space-3) var(--space-4); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: .8rem; } .breadcrumb a { color: var(--color-text-secondary); } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb span[aria-current="page"] { color: var(--color-primary); font-weight: 600; } .breadcrumb .breadcrumb-sep { color: var(--color-text-muted); } /* ---------- Hero / Home ---------- */ .hero { padding: var(--space-8) 0 var(--space-7); text-align: center; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .hero h1 { max-width: 780px; margin: 0 auto var(--space-4); font-size: 2.5rem; } .hero p { max-width: 620px; margin: 0 auto var(--space-6); font-size: 1.1rem; } /* ---------- Tool Finder (hero search) ---------- */ .hero-search { max-width: 640px; margin: 0 auto; } .tool-search-input { width: 100%; font-family: var(--font-sans); font-size: 1rem; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); color: var(--color-text); text-align: center; } .tool-search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.15); text-align: left; } .tool-search-empty { text-align: center; padding: var(--space-6) 0 0; color: var(--color-text-secondary); } .tools-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-7) 0; } @media (min-width: 640px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .tools-grid { grid-template-columns: repeat(4, 1fr); } } .tool-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: all .2s ease; display: flex; flex-direction: column; gap: var(--space-2); border-radius: var(--radius-md); } .tool-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .tool-card .icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: var(--space-2); background: #F0F1F3; border-radius: var(--radius-sm); } .tool-card h3 { margin-bottom: var(--space-1); color: var(--color-text); font-size: 1.1rem; } .tool-card p { font-size: .95rem; margin-bottom: var(--space-3); } .tool-card .cta { font-weight: 600; font-size: .9rem; margin-top: auto; color: var(--color-primary); } /* ---------- Buttons ---------- */ .btn { font-family: var(--font-sans); font-weight: 600; font-size: .95rem; padding: var(--space-3) var(--space-5); border: 1px solid; cursor: pointer; transition: all .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); } .btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-secondary:hover { background: var(--color-bg); border-color: var(--color-accent); color: var(--color-accent); } .btn-block { width: 100%; } /* ---------- Tool Page Layout ---------- */ .tool-page-header { padding: var(--space-6) 0 var(--space-4); } .category-badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 6px var(--space-3); background: var(--color-bg); color: var(--color-primary); margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .tool-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-8); } .example-box { margin: var(--space-4) 0 var(--space-5); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-surface); color: var(--color-text-secondary); } .example-box strong { color: var(--color-text); } @media (min-width: 900px) { .tool-layout { grid-template-columns: 1.1fr 0.9fr; align-items: start; } .result-panel { position: sticky; top: 90px; } } .tool-form, .result-panel, .protips { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-5); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); transition: all .2s ease; } .tool-form:hover, .result-panel:hover, .protips:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .unit-switch { display: flex; gap: 0; margin-bottom: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .unit-switch label { flex: 1; text-align: center; padding: 0; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--color-text-secondary); border-right: 1px solid var(--color-border); transition: all .15s ease; } .unit-switch label:last-child { border-right: none; } .unit-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; } .unit-switch label span { display: block; padding: var(--space-2) var(--space-3); } .unit-switch input:checked + span { background: var(--color-primary); color: white; } .unit-switch input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: -2px; } .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .field-label { font-size: .875rem; font-weight: 600; color: var(--color-text); } .field-input-wrap { position: relative; display: flex; align-items: center; } .field-input, select.field-input { width: 100%; font-family: var(--font-sans); font-size: 1rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); appearance: none; transition: all .15s ease; border-radius: var(--radius-sm); } input.field-input[type="number"] { padding-right: 64px; } input.field-input[type="number"]::-webkit-inner-spin-button, input.field-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input.field-input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .field-input:focus { outline: none; border-color: var(--color-primary); box-shadow: inset 0 0 0 2px rgba(75,85,99,0.1); background: var(--color-bg); } .field-input.has-error { border-color: var(--color-danger); } .field-unit { position: absolute; right: var(--space-4); color: var(--color-text-secondary); font-size: .8rem; pointer-events: none; font-weight: 600; } .field-hint { font-size: .78rem; color: var(--color-text-secondary); } .field-error { font-size: .78rem; color: var(--color-danger); font-weight: 600; display: none; } .field-error.show { display: block; } .result-box { background: var(--color-bg); border: 1px solid var(--color-border); padding: var(--space-6); text-align: center; margin-bottom: var(--space-4); border-radius: var(--radius-md); transition: all .2s ease; } .result-box:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .result-value { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--color-primary); word-break: break-word; } .result-value.status-success { color: var(--color-success); } .result-value.status-warning { color: var(--color-warning); } .result-value.status-danger { color: var(--color-danger); } .result-label { font-size: .85rem; color: var(--color-text-secondary); margin-top: var(--space-2); font-weight: 600; } .result-breakdown { margin-top: var(--space-4); text-align: left; font-size: .85rem; } .result-breakdown div { display: flex; justify-content: space-between; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); } .protips { margin-top: var(--space-5); } .protips h4 { color: var(--color-primary); font-size: .95rem; } .protips ul { margin: 0; padding-left: var(--space-5); } .protips li { margin-bottom: var(--space-2); color: var(--color-text-secondary); font-size: .92rem; } .disclaimer { font-size: .78rem; color: var(--color-text-secondary); background: #FEF3F2; border: 1px solid #FCA5A5; padding: var(--space-3) var(--space-4); margin-top: var(--space-5); border-radius: var(--radius-sm); } /* ---------- Legal pages ---------- */ .legal-content { padding: var(--space-7) 0; max-width: 780px; } .legal-content h2 { margin-top: var(--space-6); font-size: 1.25rem; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); } /* ---------- Footer ---------- */ .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); margin-top: var(--space-8); } .footer-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) 0 var(--space-5); } @media (min-width: 768px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; } } .footer-brand { display: flex; gap: var(--space-3); align-items: flex-start; } .footer-brand p { font-size: .85rem; margin: var(--space-1) 0 0; } .footer-col h4 { font-size: .85rem; font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-3); } .footer-col a { display: block; color: var(--color-text); font-size: .9rem; margin-bottom: var(--space-2); transition: color .15s ease; } .footer-col a:hover { color: var(--color-primary); } .footer-bottom { border-top: 1px solid var(--color-border); padding: var(--space-4) 0; font-size: .8rem; color: var(--color-text-secondary); } /* ---------- Cookie banner ---------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-surface); color: var(--color-text); z-index: 100; border-top: 1px solid var(--color-border); box-shadow: 0 -2px 8px rgba(0,0,0,0.1); } .cookie-inner { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; padding: var(--space-4); text-align: center; } .cookie-inner p { color: var(--color-text-secondary); margin: 0; font-size: .85rem; } @media (min-width: 640px) { .cookie-inner { flex-direction: row; justify-content: space-between; text-align: left; } } /* ========================================================== Erweiterungsmodul: dynamische Abzüge (Fenster/Türen) ========================================================== */ .deductions-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); } .deduction-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); align-items: center; } .deduction-row .field-input { padding: var(--space-2) var(--space-3); font-size: .9rem; } .deduction-remove { background: transparent; border: 1px solid var(--color-border); color: var(--color-danger); width: 36px; height: 36px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; line-height: 1; transition: all .15s ease; flex-shrink: 0; } .deduction-remove:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); } .deduction-add { background: transparent; border: 1px dashed var(--color-border); color: var(--color-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); cursor: pointer; font-size: .85rem; font-weight: 600; width: 100%; transition: all .15s ease; } .deduction-add:hover { border-color: var(--color-primary); background: var(--color-bg); } .deduction-empty-hint { font-size: .78rem; color: var(--color-text-muted); font-style: italic; } /* ---------- Ergebnis-Export-Button ---------- */ .result-export-btn { margin-top: var(--space-4); } /* ---------- Notendurchschnitts-Rechner ---------- */ .grades-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); } .grade-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--space-2); align-items: center; } .grade-row .field-input { padding: var(--space-2) var(--space-3); font-size: .9rem; } .grade-row-labels { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--space-2); font-size: .72rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .02em; padding: 0 var(--space-1); } .grade-row-labels span:last-child { visibility: hidden; } @media (max-width: 480px) { .grade-row, .grade-row-labels { grid-template-columns: 1.6fr 1fr 1fr auto; } } /* ---------- Print-Stylesheet für Ergebnis-Export ---------- */ @media print { .site-header, .site-footer, .cookie-banner, .tool-form, .protips, .disclaimer, .result-export-btn, .nav-toggle { display: none !important; } body { background: #fff; color: #000; } .tool-layout { display: block; } .result-panel { box-shadow: none; border: none; padding: 0; } } /* ========================================================== Pixel-Theme-Overrides (baut auf den Design Tokens ganz oben in dieser Datei auf) ========================================================== */ body { background-color: var(--color-bg); background-image: linear-gradient(rgba(88, 230, 177, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 230, 177, .045) 1px, transparent 1px); background-size: 24px 24px; font-size: .95rem; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } h1, h2, h3, h4, .logo-text, .category-menu strong, .btn { font-family: var(--font-mono); font-weight: 700; } h1 { font-size: clamp(1.45rem, 4vw, 2.5rem); line-height: 1.55; text-transform: uppercase; text-shadow: 4px 4px 0 #050811; } h2 { font-size: clamp(1rem, 2vw, 1.45rem); color: var(--color-primary); text-transform: uppercase; letter-spacing: .04em; } h3 { font-size: .85rem; line-height: 1.8; } p { color: var(--color-text-secondary); } a { color: var(--color-primary); } a:hover { color: var(--color-accent); } .site-header { background: rgba(14, 22, 40, .96); border-bottom: 2px solid var(--color-primary); box-shadow: 0 4px 0 #050811; } .header-top { min-height: 72px; } .logo-link { image-rendering: pixelated; } .logo-text { font-size: .9rem; color: var(--color-text); } .logo-suffix { color: var(--color-accent); } .nav-toggle { border: 2px solid var(--color-primary); color: var(--color-primary); border-radius: 0; box-shadow: 3px 3px 0 #050811; } .nav-toggle span { background: var(--color-primary); } .nav-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #050811; } .main-nav, .category-menu { border-color: var(--color-border); } .main-nav a, .category-menu a, .category-menu .category-item { color: var(--color-text-secondary); } .main-nav a:hover, .category-menu a:hover, .category-menu .category-item:hover { color: var(--color-primary); } .category-submenu { box-shadow: var(--shadow-md); } .hero { position: relative; padding: clamp(56px, 10vw, 112px) 0 72px; background: linear-gradient(135deg, rgba(18, 26, 46, .98), rgba(11, 16, 32, .93)); border-bottom: 2px solid var(--color-border); overflow: hidden; } .hero::before { content: '01001011 01000001 01001100 01000011'; position: absolute; inset: 18px auto auto 5%; color: rgba(88, 230, 177, .12); font: .65rem var(--font-mono); letter-spacing: .15em; } .hero::after { content: ''; position: absolute; width: 140px; height: 140px; right: 7%; bottom: -70px; border: 2px solid var(--color-accent); box-shadow: 8px -8px 0 rgba(255, 202, 92, .2), 16px -16px 0 rgba(255, 202, 92, .1); transform: rotate(45deg); } .hero h1, .hero p, .hero-search { position: relative; z-index: 1; } .hero p { font-size: .95rem; line-height: 1.9; } .tool-search-input { border: 2px solid var(--color-primary); border-radius: 0; background: #070b16; color: var(--color-text); box-shadow: 5px 5px 0 #050811; text-align: left; } .tool-search-input::placeholder { color: var(--color-text-muted); } .tool-search-input:focus { box-shadow: 5px 5px 0 #050811, 0 0 0 3px rgba(88, 230, 177, .2); } .tools-grid { gap: 20px; padding: 32px 0 56px; } .tool-card { border: 2px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); border-radius: 0; padding: 22px; } .tool-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translate(-2px, -2px); } .tool-card .icon { width: 52px; height: 52px; border: 2px solid var(--color-primary); border-radius: 0; background: #0a1222; image-rendering: pixelated; } .tool-card h3 { color: var(--color-text); } .tool-card .cta { color: var(--color-accent); font-family: var(--font-mono); } .btn { border-radius: 0; font-size: .65rem; line-height: 1.7; text-transform: uppercase; box-shadow: 4px 4px 0 #050811; } .btn-primary { background: var(--color-primary); color: #071017; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #071017; transform: translate(2px, 2px); box-shadow: 2px 2px 0 #050811; } .btn-secondary { border-width: 2px; } .tool-page-header { padding-top: 40px; } .category-badge { border: 2px solid var(--color-accent); background: transparent; color: var(--color-accent); font-family: var(--font-mono); } .tool-form, .result-panel, .protips { border: 2px solid var(--color-border); box-shadow: var(--shadow-sm); border-radius: 0; } .tool-form:hover, .result-panel:hover, .protips:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .unit-switch, .field-input, select.field-input, .result-box { border-radius: 0; } .unit-switch { border: 2px solid var(--color-border); } .unit-switch input:checked + span { background: var(--color-primary); color: #071017; } .field-input, select.field-input { border: 2px solid var(--color-border); background: #0a1222; } .field-input:focus { box-shadow: 3px 3px 0 rgba(88, 230, 177, .2); } .result-box { border: 2px solid var(--color-primary); background: #0a1222; box-shadow: inset 0 0 24px rgba(88, 230, 177, .06); } .result-value { color: var(--color-primary); text-shadow: 3px 3px 0 #050811; } .disclaimer { background: rgba(255, 107, 134, .1); border: 2px solid var(--color-danger); border-radius: 0; } .site-footer { background: #080d19; border-top: 2px solid var(--color-border); } .footer-col h4 { color: var(--color-accent); } .footer-bottom { border-top: 2px solid var(--color-border); } .cookie-banner { background: var(--color-surface); border-top: 2px solid var(--color-primary); box-shadow: 0 -4px 0 #050811; } .deduction-remove, .deduction-add { border-radius: 0; } @media (max-width: 639px) { .hero::after { right: -48px; } .hero { padding: 42px 0 48px; } .hero h1 { max-width: 680px; font-size: 15px; line-height: 26px; } .hero p { font-size: 12px; line-height: 22px; } .tool-card { padding: 16px; } .tool-card h3 { font-size: 11px; line-height: 19px; } .container { padding-left: 14px; padding-right: 14px; } } @media (min-width: 640px) { .hero { padding: 58px 0 54px; } .hero h1 { max-width: 920px; font-size: 27px; line-height: 43px; } .hero p { font-size: 13px; line-height: 24px; } .category-menu strong { font-size: 12px; line-height: 18px; } .tool-card h3 { font-size: 12px; line-height: 20px; } } @media (min-width: 900px) { .header-top { min-height: 62px; } .category-menu-inner { width: 100%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; align-items: stretch; } .category-menu .category-item { min-width: 0; display: flex; align-items: flex-start; justify-content: center; text-align: center; } .category-menu .category-item > strong { display: inline-block; width: max-content; max-width: 100%; } .hero h1 { font-size: 30px; line-height: 46px; } .tools-grid { gap: 16px; padding-top: 24px; } .tool-card { padding: 18px; } } /* ---------- Accessibility utility ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- E-Auto-Reichweitenrechner ---------- */ .form-group-title { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin: var(--space-5) 0 var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--color-border); } .form-group-title:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .ev-bars { display: grid; gap: var(--space-3); margin-top: var(--space-4); text-align: left; } .ev-bar-label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: .78rem; color: var(--color-text-secondary); margin-bottom: 4px; } .ev-bar-label strong { color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .ev-bar-track { height: 10px; background: var(--color-bg); border: 2px solid var(--color-border); } .ev-bar-fill { height: 100%; background: var(--color-primary); transition: width .3s ease; } .ev-bar-fill.is-ref { background: var(--color-text-muted); } .ev-bar-fill.is-accent { background: var(--color-accent); } .ev-split-title { margin: var(--space-5) 0 var(--space-2); font-size: .78rem; font-weight: 700; text-align: left; color: var(--color-text-secondary); } .ev-split { display: flex; height: 14px; border: 2px solid var(--color-border); overflow: hidden; background: var(--color-bg); } .ev-split span { display: block; height: 100%; } .ev-legend { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 4px; font-size: .78rem; text-align: left; } .ev-legend li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); } .ev-legend i { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; } .ev-legend b { margin-left: auto; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .ev-notes { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: .8rem; text-align: left; } .ev-notes li { padding: var(--space-2) var(--space-3); border: 2px solid var(--color-border); color: var(--color-text-secondary); } .ev-notes li.is-warn { border-color: var(--color-danger); color: var(--color-text); } .ev-method { margin-top: var(--space-5); border: 2px solid var(--color-border); background: var(--color-surface); padding: var(--space-3) var(--space-4); } .ev-method summary { cursor: pointer; font-weight: 700; color: var(--color-primary); } .ev-method p { font-size: .88rem; margin: var(--space-3) 0 0; } /* Werte in der Ergebnis-Aufschlüsselung nicht mitten in "63,2 kWh" umbrechen; reicht der Platz nicht, rutscht der Wert unter das Label (statt die Seite breiter als das Display zu machen). */ .tool-form, .result-panel { min-width: 0; } .result-breakdown div { flex-wrap: wrap; column-gap: var(--space-3); } .result-breakdown div span:last-child:not(:first-child) { white-space: nowrap; margin-left: auto; } /* ---------- E-Auto Anhänger-Check: Fahrplan ---------- */ .ev-plan { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 0; font-size: .82rem; text-align: left; } .ev-plan li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); } .ev-plan li span:last-child { color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; } .ev-plan li.is-stop span:first-child { color: var(--color-accent); } .ev-plan li.is-end { border-bottom: 0; font-weight: 700; }