/* Inter, lokal gehostet statt über Google Fonts eingebunden - keine Verbindung zu fonts.googleapis.com/fonts.gstatic.com mehr, also auch keine IP-Übertragung an Google beim Laden der Seite (siehe docs/PRIVACY.md). Eine Datei deckt alle drei genutzten Schnitte ab (Variable Font). */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ============================================================ DESIGN-SYSTEM "NOCTURNE" – dunkel, mobil, ruhig. Grundsatz: ein Akzent (#1beaac) als Linie, Marke und Glühen – niemals als Flächenfüllung. Kontrast kommt aus den Grauramp- Stufen, nicht aus Sättigung. Farbsemantik bewusst NICHT über Rot/Grün: Abzüge sind gedämpft, Netto trägt den Akzent. Typografie: Inter in 400/500 – Hierarchie über Größe und Raum, nicht über fette Schnitte. Alle Werte hängen an den Tokens unten; hier ändern = überall ändern. Nur Dark Mode: das Produkt hat eine Optik, keine zwei. ============================================================ */ :root{ --bg:#161826; --bg-deep:#10121c; --surface:#232532; --surface-2:#292b31; --text:#e9e9ed; --muted:#9397ab; --dim:#75798c; --faint:#595d6c; --line:rgba(233,233,237,0.16); --line-soft:rgba(233,233,237,0.09); --accent:#1beaac; --accent-light:#6ef1ca; --accent-deep:#0d8863; --accent-soft:rgba(27,234,172,0.16); --accent-softer:rgba(27,234,172,0.10); --neutral-800:#3f424d; --radius-sm:6px; --radius:8px; --radius-md:10px; --radius-lg:14px; --shadow-sm:0 0 0 1px #3f424d; --shadow-md:0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55); --maxw:440px; --font:'Inter',system-ui,-apple-system,sans-serif; font-size:16px; color-scheme:dark; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; padding-bottom:104px; } @media (min-width:520px){ body{background:radial-gradient(900px 520px at 50% -10%, #262a60 0%, #1a1c2c 42%, var(--bg-deep) 100%);background-attachment:fixed;} } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px;} /* Muss nach den Komponenten stehen: [hidden] der UA-Regel verliert sonst gegen jede Klasse, die display setzt (.block, .field, .btn ...). */ [hidden]{display:none !important;} h1,h2,h3,h4{font-weight:500;letter-spacing:-0.02em;line-height:1.14;margin:0;} p{margin:0;} .num{font-variant-numeric:tabular-nums;} :focus{outline:none;} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;} ::selection{background:rgba(27,234,172,0.3);} a{color:var(--accent);text-decoration:none;text-underline-offset:3px;} a:hover{color:var(--accent-light);text-decoration:underline;} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;} } /* ---------- Kopf ---------- */ .appbar{position:sticky;top:0;z-index:30;background:linear-gradient(var(--bg) 76%, rgba(22,24,38,0));padding:14px 0 12px;} .brandrow{display:flex;align-items:center;gap:9px;} .mark{width:27px;height:27px;border-radius:7px;border:1px solid var(--accent);display:grid;place-items:center;flex:none;} .brandname{font-size:15px;font-weight:500;letter-spacing:-0.01em;line-height:1.2;} .brandsub{font-size:10.5px;color:var(--dim);line-height:1.3;} .year{margin-left:auto;font-size:11px;padding:3px 10px;border-radius:6px;border:1px solid var(--accent);color:var(--accent);} .headerlink{font-size:11px;color:var(--dim);text-decoration:none;} .headerlink:hover{color:var(--accent-light);text-decoration:underline;} .legalrow{margin-top:8px;display:flex;gap:14px;} .langswitch{margin-left:10px;font-size:11px;color:var(--dim);letter-spacing:0.02em;white-space:nowrap;} .langswitch strong{color:var(--text);font-weight:600;} .langswitch a{color:var(--dim);text-decoration:none;} .langswitch a:hover{color:var(--accent-light);text-decoration:underline;} .progress{display:flex;gap:4px;margin-top:14px;} .progress i{flex:1;height:3px;border-radius:2px;background:var(--surface-2);transition:background .2s ease;} .progress i.done{background:var(--accent-deep);} .progress i.now{background:var(--accent);} .steplabel{margin-top:7px;font-size:11px;color:var(--muted);} /* ---------- Struktur ---------- */ .screen{display:none;} .screen.active{display:flex;flex-direction:column;gap:22px;padding-top:10px;animation:fadeUp .28s cubic-bezier(.22,.61,.36,1) both;} @keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .screen-title{font-size:21px;margin-bottom:2px;} .screen-sub{font-size:12.5px;color:var(--muted);text-wrap:pretty;} .block{display:flex;flex-direction:column;gap:12px;} .block.sep{padding-top:12px;border-top:1px solid var(--line);} h6.eyebrow{margin:0;font-size:11px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;color:var(--dim);} /* ---------- Formular ---------- */ .field{display:block;} .field > label{display:block;font-size:12px;margin-bottom:5px;color:rgba(233,233,237,0.7);} .hint{font-size:11.5px;line-height:1.55;color:var(--dim);margin-top:6px;text-wrap:pretty;} input[type=text],input[type=number],input[type=time],select{ width:100%;min-height:44px;padding:8px 12px;font-family:inherit;font-size:15px; color:var(--text);caret-color:var(--accent);background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);appearance:none;-webkit-appearance:none; transition:border-color .12s ease; } input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} input[type=number]{-moz-appearance:textfield;} input:hover,select:hover{border-color:rgba(233,233,237,0.45);} input:focus-visible,select:focus-visible{border-color:var(--accent);outline-offset:0;} input.invalid{border-color:var(--accent-light);} .selectwrap{position:relative;} .selectwrap svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;} select{padding-right:32px;} .big-input{position:relative;} .big-input input{min-height:54px;font-size:24px;font-weight:500;letter-spacing:-0.015em;padding-right:38px;border-radius:var(--radius-md);} .big-input .cur{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--dim);pointer-events:none;} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} input[type=range]{width:100%;height:24px;padding:0;background:none;border:0;min-height:0;accent-color:var(--accent);} /* Pills (Radiogruppen) */ .pillrow{display:grid;gap:6px;} .pillrow.c6{grid-template-columns:repeat(6,1fr);} .pillrow.c3{grid-template-columns:repeat(3,1fr);} .pillrow.c2{grid-template-columns:repeat(2,1fr);} .pill{ min-height:44px;padding:0 8px;border-radius:var(--radius);cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:500; background:var(--surface);color:var(--muted);border:1px solid var(--line); transition:background .12s ease,border-color .12s ease,color .12s ease; } .pill:hover{background:var(--surface-2);color:var(--text);} .pill[aria-checked="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-light);} .pillrow.c6 .pill{font-size:14px;padding:0;} /* Schalter */ .switch-row{ display:flex;align-items:center;gap:12px;width:100%;min-height:48px; background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:14.5px; text-align:left;color:var(--text); } .track{width:42px;height:25px;border-radius:99px;flex:none;padding:2.5px;display:flex;align-items:center; justify-content:flex-start;background:transparent;border:1px solid rgba(233,233,237,0.18);transition:.15s;} .track i{width:18px;height:18px;border-radius:50%;background:var(--neutral-800);display:block;transition:.15s;} .switch-row[aria-pressed="true"] .track{background:rgba(27,234,172,0.22);border-color:var(--accent);justify-content:flex-end;} .switch-row[aria-pressed="true"] .track i{background:var(--accent);} /* Stepper */ .stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);height:44px;background:var(--surface);} .stepper button{width:44px;height:100%;border:0;background:none;color:#b2b6ca;font-family:inherit;font-size:19px;cursor:pointer;border-radius:var(--radius);} .stepper button:hover{background:var(--surface-2);color:var(--text);} .stepper .val{flex:1;text-align:center;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;} /* Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer; font-family:inherit;font-size:14.5px;font-weight:500;color:var(--text); background:transparent;border:1px solid transparent;min-height:46px;padding:0 18px;border-radius:var(--radius-md); transition:background .12s ease; } .btn-primary{color:var(--accent);border-color:var(--accent);} .btn-primary:hover{background:var(--accent-softer);} .btn-primary:active{background:var(--accent-soft);} .btn-secondary{border-color:var(--line);} .btn-secondary:hover{background:rgba(233,233,237,0.07);} .btn-dashed{border:1px dashed var(--line);width:100%;color:var(--muted);} .btn-dashed:hover{background:rgba(233,233,237,0.05);color:var(--text);} .btn-ghost{color:var(--accent);border:0;padding:0 4px;min-height:40px;align-self:flex-start;} .btn-ghost:hover{background:var(--accent-softer);} /* ---------- Karten, Kacheln, Hinweise ---------- */ .tile{padding:12px;border-radius:var(--radius);background:var(--surface);} .tile .k{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim);} .tile .v{margin-top:3px;font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;} .tile .v.accent{color:var(--accent-light);} .notice{padding:12px;border-radius:var(--radius);background:var(--surface-2);border-left:2px solid var(--accent-deep); font-size:11.5px;line-height:1.55;color:#b2b6ca;text-wrap:pretty;} .notice.accent{border-left-color:var(--accent);} .shiftcard{padding:12px;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm); display:flex;flex-direction:column;gap:9px;} .shifthead{display:flex;align-items:center;gap:9px;} .shifthead .n{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);} .shifthead .s{margin-left:auto;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;} .iconbtn{width:28px;height:28px;border-radius:var(--radius-sm);border:0;background:none;color:var(--dim); cursor:pointer;font-family:inherit;font-size:16px;line-height:1;} .iconbtn:hover{background:rgba(233,233,237,0.07);color:var(--text);} /* ---------- Ergebnis ---------- */ .hero .k{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);} .hero .amount{display:flex;align-items:baseline;gap:3px;margin-top:6px;} .hero .amount .e{font-size:clamp(44px,13vw,54px);line-height:0.95;font-weight:500;letter-spacing:-0.035em;} .hero .amount .c{font-size:21px;font-weight:500;color:#b2b6ca;} .hero .amount .u{font-size:21px;font-weight:500;color:var(--dim);margin-left:2px;} .hero .sub{margin-top:6px;font-size:12.5px;color:var(--muted);text-wrap:pretty;} .bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--surface-2);} .bar span{height:100%;transition:width .3s ease;} .bar .b1{background:var(--accent);} .bar .b2{background:var(--accent-deep);} .bar .b3{background:var(--neutral-800);} .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;} .legend div{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#b2b6ca;} .legend i{width:8px;height:8px;border-radius:2px;display:block;} .rows{display:flex;flex-direction:column;} .row{display:flex;align-items:center;gap:12px;padding:12px 0; background:linear-gradient(to right,transparent,var(--line-soft) 24px,var(--line-soft) calc(100% - 24px),transparent) no-repeat bottom / 100% 1px;} .row .k{font-size:13.5px;color:var(--muted);} .row .v{margin-left:auto;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;} .row.total{background:none;padding-top:14px;} .row.total .k{color:var(--text);} .row.total .v{font-size:19px;color:var(--accent);} .row .v.free{color:var(--accent-light);} .row .v.minus{color:#b2b6ca;font-weight:400;} details.acc{border-bottom:1px solid var(--line-soft);} details.acc summary{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;list-style:none; font-size:13.5px;font-weight:500;} details.acc summary::-webkit-details-marker{display:none;} details.acc summary:after{content:"";width:8px;height:8px;margin-left:auto;flex:none; border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease;} details.acc[open] summary:after{transform:rotate(225deg) translate(-2px,-2px);} .accbody{padding:0 0 14px;display:flex;flex-direction:column;gap:7px;} .accrow{display:flex;align-items:baseline;gap:12px;font-size:12.5px;} .accrow .k{color:var(--muted);text-wrap:pretty;} .accrow .v{margin-left:auto;color:#b2b6ca;font-variant-numeric:tabular-nums;white-space:nowrap;} .accrow.strong .v,.accrow.strong .k{color:var(--text);} table.shifts{width:100%;border-collapse:collapse;font-size:12.5px;} table.shifts th{text-align:right;font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase; color:var(--dim);padding:6px;} table.shifts th:first-child,table.shifts td:first-child{text-align:left;} table.shifts td{padding:6px;text-align:right;font-variant-numeric:tabular-nums;} table.shifts thead tr{background:linear-gradient(to right,transparent,var(--line) 24px,var(--line) calc(100% - 24px),transparent) no-repeat bottom / 100% 1px;} table.shifts tbody tr{background:linear-gradient(to right,transparent,var(--line-soft) 24px,var(--line-soft) calc(100% - 24px),transparent) no-repeat bottom / 100% 1px;} /* Werbeflaechen: die App ist ohnehin eine einzelne schmale Spalte (max. var(--maxw), keine Desktop-Mehrspalten-Ansicht), deshalb feste 728px-Breiten wie bei klassischen Desktop-Bannern nicht sinnvoll - stattdessen responsive innerhalb der bestehenden Spaltenbreite, mit fester Mindesthoehe je Format, damit beim Nachladen kein Layout-Sprung entsteht (Cumulative Layout Shift). Bewusst NICHT ueber dem Netto- Ergebnis platziert (.ad-banner-middle sitzt erst NACH der Netto-Anzeige und dem Balkendiagramm), damit keine Werbeflaeche die Kernfunktion verdeckt. Optik (gestrichelter Rahmen, Platzhalter-Look) bleibt erhalten, solange keine echte AdSense-ID konfiguriert ist. */ .ad-banner-result,.ad-banner-middle{ width:100%;max-width:100%;margin:0;overflow:hidden;box-sizing:border-box; border:1px dashed rgba(233,233,237,0.14);border-radius:var(--radius); display:grid;place-items:center; } .ad-banner-result{min-height:250px;} .ad-banner-middle{min-height:100px;} .ad-placeholder-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);} .ad-banner-result .adsbygoogle,.ad-banner-middle .adsbygoogle{width:100%;} .legal{font-size:11px;line-height:1.6;color:var(--faint);text-wrap:pretty;} .legal p + p{margin-top:8px;} /* ---------- Fußleiste ---------- */ .bottombar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 0 12px; background:linear-gradient(rgba(22,24,38,0),var(--bg) 42%); transition:transform .25s ease,opacity .25s ease;} /* Die feste Leiste (Weiter/Netto-Live-Anzeige) gehoert zum Assistenten - sobald der SEO-Bereich darunter in den sichtbaren Bereich scrollt, wuerde sie sonst permanent Text verdecken. Wird per IntersectionObserver in app.js umgeschaltet, sobald .seo-content sichtbar wird. */ .bottombar.is-hidden{transform:translateY(120%);opacity:0;pointer-events:none;} .bottombar .inner{max-width:var(--maxw);margin:0 auto;padding:9px;display:flex;align-items:center;gap:9px; border-radius:var(--radius-lg);background:rgba(35,37,50,0.94);backdrop-filter:blur(16px);box-shadow:var(--shadow-md);} .bottombar .live{display:flex;flex-direction:column;padding-left:6px;min-width:0;} .bottombar .live .k{font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim);} .bottombar .live .v{font-size:16px;font-weight:500;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;} .bottombar .btn-primary{margin-left:auto;} @media (max-width:519px){.bottombar .inner{margin:0 12px;}} /* ---------- SEO-Inhalt (Intro + aufklappbare Sections unterhalb des Rechners) ---------- Bewusst NACH platziert, nicht davor: der Rechner selbst bleibt die erste Interaktion, der lange Text kommt erst danach - gaengiges Muster bei Tool-Seiten (Inhalt crawlbar, aber der Rechner konkurriert nicht mit Lesetext um aufmerksamkeit). Traegt das einzige echte

der Seite (vorher gab es nur eins versteckt im