/* ══════════════════════════════════════════════════════════════════════ DIE TÜR — Stylesheet für die vier Einstiegsschirme (Phase 20) Bis Phase 19 brachte jeder der vier Schirme sein eigenes Aussehen mit: Plus Jakarta Sans und Inter auf warmem Papier (#f1f1ee), eine einzelne Karte mit 28px Radius, ein blauer Verlaufsknopf. Der Check dahinter sieht anders aus — Mulish und Newsreader, kühles Weiß, ein zweispaltiges Feld mit Seitenspalte. Zwei Gestaltungen für einen Vorgang. Wer die Tür durchschritt, landete optisch woanders. Ab hier gilt: Die Tür IST der erste Schritt des Checks, nicht sein Vorzimmer. Sie benutzt dieselbe Hülle (.nq-shell), dieselbe Seiten- spalte, dieselbe Schrift, dieselben Antwortkacheln. Der Klick auf eine Antwort tauscht danach nur noch den Inhalt des Hauptfelds — Rahmen, Logo, Seitenspalte und Fortschrittsbalken stehen schon. Alle Werte hier sind aus dem Stylesheet in check/index.html übernommen, nicht nachempfunden. Ändert sich dort ein Ton, muss er hier mitgehen — die Datei ist bewusst schlank gehalten, damit dieser Abgleich in einem Durchgang zu machen ist. Was sie NICHT enthält: Mappe, Ergebnis, Formularfelder, Ausstiegsdialog. Die Tür stellt eine Frage, mehr nicht. ══════════════════════════════════════════════════════════════════ */ /* ══ Schriften ════════════════════════════════════════════════════════ Absolute Pfade wie in site.css: Diese Datei wird aus /finanzierungs- check/, /avgs-check/, /businessplan-check/ und /kaufpreis-check/ geladen — relative Pfade zeigten aus jedem Ordner woanders hin. */ @font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-latinext-wght.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Mulish';font-style:normal;font-weight:200 1000;font-display:swap;src:url(/assets/fonts/mulish-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Mulish';font-style:normal;font-weight:200 1000;font-display:swap;src:url(/assets/fonts/mulish-latinext-wght.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ══ Werte ════════════════════════════════════════════════════════════ Wortgleich zu :root in check/index.html. */ :root{ --nq-navy:#082d5f; --nq-navy-deep:#062754; --nq-ink:#18345a; --nq-muted:#5e6b7f; --nq-line:#e8eaee; --nq-line-soft:#f0f2f5; --nq-paper:#fdfdfc; --nq-shadow:0 9px 26px rgba(28,45,70,.08),0 2px 6px rgba(28,45,70,.035); --nq-sans:"Mulish","Avenir Next",Avenir,"Segoe UI",Arial,sans-serif; --nq-serif:"Newsreader","Iowan Old Style","Baskerville","Times New Roman",Georgia,serif; /* Registerfarben der sechs Fächer. Nur die Tinte wird hier gebraucht — die Bögen gehören zur Ergebnisseite, die es auf der Tür nicht gibt. */ --reg-tinte:#082d5f; --reg-pflaume:#59446e; --reg-beere:#7d3f56; --reg-messing:#6f5c22; --reg-schiefer:#44576d; --reg-salbei:#3a6152; } [data-reg="tinte"]{ --reg:var(--reg-tinte); } [data-reg="pflaume"]{ --reg:var(--reg-pflaume); } [data-reg="beere"]{ --reg:var(--reg-beere); } [data-reg="messing"]{ --reg:var(--reg-messing); } [data-reg="schiefer"]{ --reg:var(--reg-schiefer); } [data-reg="salbei"]{ --reg:var(--reg-salbei); } /* Auf den Check gescoped, wie drüben — kann nichts anfassen, was nicht zu diesem Schirm gehört. Nur box-sizing, keine Margin-Nullung. */ #q-funnel,#q-funnel *,#q-funnel *::before,#q-funnel *::after{ box-sizing:border-box; } body.nq-mode{ margin:0; min-width:320px; min-height:100vh; padding:0; color:var(--nq-ink); font-family:var(--nq-sans); font-size:16px; background:radial-gradient(circle at 10% 8%,rgba(255,255,255,.96) 0 17%,transparent 37%),linear-gradient(135deg,#f4f5f5 0%,#fafafa 45%,#f1f3f4 100%); -webkit-font-smoothing:antialiased; } /* Die Wortmarke über der Karte. Sie steht als statisches HTML im Dokument, damit ohne JavaScript wenigstens das Logo dasteht; sobald die Hülle gebaut ist, nimmt tuer.js sie aus dem Dokument — die Seitenspalte bringt dann ihre eigene mit. Bewusst per JS entfernt und nicht per CSS versteckt: Eine Regel wie `body.nq-mode .qf-brandrow` griffe auch dann, wenn das Modul gar nicht erst geladen hat, und dann stünde die Seite ganz ohne Logo da. */ .qf-brandrow{ max-width:1120px; margin:0 auto; padding:22px 16px 0; } .qf-brandrow a{ display:inline-block; line-height:0; text-decoration:none; } .qf-brandrow img{ display:block; height:26px; width:auto; } .nq-sprite{ position:absolute; width:0; height:0; overflow:hidden; } /* Ohne JavaScript bleibt die Bühne leer. Dann soll wenigstens der Weg in den Check dastehen, statt einer weißen Fläche. */ .nq-ohnejs{ max-width:560px; margin:40px auto; padding:0 20px; text-align:center; color:var(--nq-ink); font-family:var(--nq-sans); font-size:16px; line-height:1.6; } .nq-ohnejs a{ color:var(--nq-navy); } /* ══ Hülle ════════════════════════════════════════════════════════════ */ .nq-shell{ position:relative; display:grid; grid-template-columns:258px minmax(0,1fr); width:min(1120px,calc(100% - 32px)); min-height:calc(100vh - 32px); margin:16px auto; overflow:hidden; background:rgba(253,253,252,.97); border:1px solid rgba(15,43,80,.06); border-radius:16px; box-shadow:0 6px 23px rgba(31,46,66,.10); } /* ══ Seitenspalte ═════════════════════════════════════════════════════ Inhalt kommt aus dem `side` der Frage in fragen.js — dieselbe Quelle, aus der sich der Check bedient. Wer auf /finanzierungs-check/ steht, liest hier schon den Satz, der zur Bedarfsfrage gehört. */ .nq-side{ position:relative; z-index:1; min-height:100%; overflow:hidden; padding:27px 44px 36px 49px; background:radial-gradient(ellipse 118% 44% at 9% 19%,rgba(230,234,241,.57),transparent 72%),linear-gradient(162deg,rgba(250,250,250,.98) 5%,rgba(245,247,250,.86) 62%,rgba(253,253,252,.98) 100%); } .nq-side::before{ content:""; position:absolute; top:-282px; left:-198px; width:452px; height:605px; border-radius:50%; background:rgba(255,255,255,.42); box-shadow:74px 407px 120px rgba(224,229,236,.22); pointer-events:none; } .nq-brand{ position:relative; z-index:2; line-height:0; text-decoration:none; display:inline-block; } .nq-brand img{ display:block; height:30px; width:auto; } .nq-side-copy{ position:relative; z-index:2; margin-top:clamp(270px,34vh,332px); transition:opacity .28s ease; } .nq-side-icon{ display:block; width:49px; height:49px; margin:0 0 21px 1px; color:var(--nq-navy); transform:rotate(-5deg); } .nq-side-copy h2{ margin:0 0 9px; color:var(--nq-ink); font-size:14px; font-weight:700; line-height:1.5; } .nq-side-copy p{ margin:0; color:#4e5e75; font-size:13px; line-height:1.78; } .nq-metric{ position:relative; margin-top:40px; padding-top:22px; } .nq-metric::before{ content:""; position:absolute; top:0; width:67px; height:1px; background:#a8b0bd; } .nq-metric span,.nq-metric-cap{ display:block; color:#5d6a7e; font-size:12px; line-height:1.55; } .nq-metric strong{ display:block; margin:3px 0 2px; color:var(--nq-navy); font-family:var(--nq-serif); font-size:31px; font-weight:400; line-height:1; } .nq-waves{ position:absolute; z-index:0; bottom:-22px; left:-36px; width:332px; height:250px; color:#a6afbe; opacity:.28; pointer-events:none; } /* ══ Hauptfeld ════════════════════════════════════════════════════════ */ .nq-main{ position:relative; min-width:0; padding-bottom:28px; overflow:hidden; background:radial-gradient(ellipse 41% 36% at 68% 10%,rgba(241,243,247,.36),transparent 72%),radial-gradient(ellipse 25% 43% at 78% 84%,rgba(246,247,249,.4),transparent 75%); } .nq-main::before{ content:""; position:absolute; top:122px; left:-62px; width:205px; height:485px; border-radius:50%; background:linear-gradient(100deg,rgba(230,233,239,.45),rgba(255,255,255,0)); filter:blur(1px); pointer-events:none; } /* ══ Kopfzeile ════════════════════════════════════════════════════════ Der Fortschrittsbalken steht hier bewusst schon auf der Tür. Er ist keine Zierde: Er sagt vor dem ersten Klick, dass die Strecke endlich ist — und er steht danach an derselben Stelle weiter, statt beim Seitenwechsel aufzutauchen. „Zurück" ist deaktiviert, genau wie an der ersten Frage des Checks. */ .nq-top{ position:relative; z-index:2; height:116px; } .nq-mobrand{ display:none; } #qf-prog{ position:absolute; top:54px; left:163px; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; width:395px; height:5px; } #qf-prog i{ overflow:hidden; border-radius:999px; background:#e8e9ec; } #qf-prog i b{ display:block; width:0; height:100%; border-radius:inherit; background:var(--nq-navy); transition:width .5s ease .25s; } .nq-proglbl{ position:absolute; top:58px; left:126px; display:flex; justify-content:space-between; width:min(340px,calc(100% - 300px)); color:var(--nq-muted); font-size:11.5px; font-weight:600; letter-spacing:.03em; } .nq-proglbl span:first-child{ max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nq-back{ position:absolute; top:45px; right:45px; display:inline-flex; align-items:center; gap:9px; padding:8px 0; background:none; border:0; cursor:pointer; color:var(--nq-navy); font-family:inherit; font-size:14px; font-weight:600; } .nq-back[disabled]{ opacity:.4; cursor:default; } .nq-back svg{ width:16px; height:16px; } /* ══ Inhalt ═══════════════════════════════════════════════════════════ */ .nq-content{ position:relative; z-index:1; width:min(650px,calc(100% - 72px)); margin-left:35px; padding-top:34px; } .nq-step{ animation:nqfade .4s ease; } @keyframes nqfade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} } .nq-hero{ text-align:center; } .nq-who{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:24px; } .nq-avatar-img{ width:46px; height:46px; border-radius:50%; object-fit:cover; } .nq-whoname{ text-align:left; font-size:14px; font-weight:700; color:var(--nq-ink); line-height:1.25; } .nq-whoname span{ display:block; font-weight:500; font-size:12.5px; color:var(--nq-muted); } .nq-eyebrow{ display:block; margin-bottom:14px; color:#626d7f; font-size:13px; font-weight:600; letter-spacing:.04em; } .nq-h1{ margin:0; color:#0b315f; font-family:var(--nq-serif); font-size:clamp(34px,3.6vw,48px); font-weight:500; line-height:1.1; letter-spacing:-1.4px; } .nq-rule{ display:block; width:39px; height:1px; margin:20px auto 18px; background:#aeb4bd; } .nq-sub{ max-width:440px; margin:0 auto; color:#485a72; font-size:16px; line-height:1.55; } .nq-checks{ list-style:none; margin:24px auto 0; padding:0; display:flex; flex-direction:column; gap:11px; width:max-content; max-width:100%; } .nq-checks li{ display:flex; align-items:center; gap:11px; color:#4e5e75; font-size:14.5px; } .nq-checks svg{ width:20px; height:20px; fill:none; stroke:var(--nq-navy); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; flex:none; } /* ══ Die Frage auf der Tür ════════════════════════════════════════════ Der Schirm trägt zwei Dinge: die Erwartung (Überschrift, Absatz, drei Häkchen) und die Frage, die diese Tür definiert. Damit beides nicht ineinanderläuft, steht dazwischen ein Absatz Luft und eine hauchdünne Linie über die ganze Breite — kein Kasten, kein Farbwechsel: Die Trennung soll gelesen, nicht gesehen werden. Die Frage selbst ist bewusst KEINE zweite .nq-h1. Drüben im Check ist die Frage die Überschrift des Schirms; hier steht schon eine. Also dieselbe Serifenschrift, aber eine Stufe kleiner — die Machart der Blocktitel auf der Ergebnisseite (.nq-block-n). */ .nq-frageblock{ margin-top:38px; padding-top:32px; border-top:1px solid rgba(24,52,90,.07); } .nq-frage{ margin:0; color:var(--nq-ink); font-family:var(--nq-serif); font-weight:500; font-size:clamp(19px,2.2vw,23px); line-height:1.28; letter-spacing:-.3px; text-align:center; } .nq-fragehint{ max-width:440px; margin:9px auto 0; color:#485a72; font-size:14.5px; line-height:1.55; text-align:center; } .nq-fragehint--vor{ color:var(--nq-navy); font-weight:600; } /* ══ Antwortkacheln ═══════════════════════════════════════════════════ Wortgleich zu .nq-qopt im Check — dieselbe Kachel, die nach dem Klick auf der nächsten Frage wieder dasteht. */ .nq-qlist{ display:grid; gap:13px; margin-top:26px; } .nq-qopt{ position:relative; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:17px; min-height:70px; padding:16px 24px; text-align:left; cursor:pointer; font-family:var(--nq-sans); background:rgba(255,255,255,.93); border:1px solid rgba(17,47,83,.055); border-radius:10px; box-shadow:var(--nq-shadow); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; } .nq-qopt:hover{ transform:translateY(-1px); border-color:rgba(8,45,95,.20); box-shadow:0 11px 27px rgba(28,45,70,.11),0 2px 6px rgba(28,45,70,.04); } .nq-qopt:focus-visible{ outline:3px solid rgba(37,99,163,.25); outline-offset:2px; } .nq-qopt.sel{ border-color:rgba(8,45,95,.54); box-shadow:0 9px 27px rgba(17,50,89,.13); } .nq-mark{ position:relative; width:25px; height:25px; border:1.5px solid #aeb5c0; border-radius:50%; background:#fff; transition:border-color .15s ease; } .nq-mark::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--nq-navy); transform:scale(0); transition:transform .16s ease; } .nq-qopt:hover .nq-mark,.nq-qopt.sel .nq-mark{ border-color:var(--nq-navy); } .nq-qopt.sel .nq-mark::after{ transform:scale(1); } .nq-qtext{ color:#183a68; font-size:17px; font-weight:600; line-height:1.35; padding:2px 0; } .nq-qsub{ display:block; margin-top:3px; color:var(--nq-muted); font-size:13.5px; font-weight:500; line-height:1.4; } .nq-arrow{ display:grid; place-items:center; color:var(--nq-navy); opacity:0; transform:translateX(-6px); transition:opacity .16s ease,transform .16s ease; } .nq-arrow svg{ width:21px; height:21px; } .nq-qopt:hover .nq-arrow,.nq-qopt:focus-visible .nq-arrow{ opacity:.9; transform:translateX(0); } /* Aus einem Ratgeber übernommene Antwort: steht vorausgewählt da und wird mit demselben Klick bestätigt, den der Besucher ohnehin getan hätte. Markierung wie .sel, damit es keine zweite Sprache dafür gibt. */ .nq-qopt--vor{ border-color:rgba(8,45,95,.54); box-shadow:0 9px 27px rgba(17,50,89,.13); } .nq-qopt--vor .nq-mark{ border-color:var(--nq-navy); } .nq-qopt--vor .nq-arrow{ opacity:.9; transform:translateX(0); } /* ══ Ausweg ═══════════════════════════════════════════════════════════ */ .nq-skip{ display:block; margin:14px 0 0 auto; padding:9px 4px; background:none; border:0; cursor:pointer; color:var(--nq-muted); font-family:inherit; font-size:13px; text-decoration:underline; text-underline-offset:2px; } .nq-skip:hover{ color:var(--nq-navy); } .nq-skip:focus-visible{ outline:3px solid rgba(37,99,163,.25); outline-offset:2px; border-radius:6px; } /* ══ Knopf (nur Rückfallebene) ════════════════════════════════════════ Steht sonst nirgends auf der Tür — greift, wenn die Frage aus fragen.js verschwunden ist und zeigeNotweg() übernimmt. */ .nq-actions{ width:min(460px,100%); margin:26px auto 0; } .nq-btn{ display:flex; align-items:center; justify-content:center; gap:27px; width:100%; min-height:68px; padding:15px 30px; cursor:pointer; color:#fff; background:linear-gradient(100deg,#092e61 0%,#0a3268 100%); border:0; border-radius:7px; box-shadow:0 6px 13px rgba(5,37,81,.12); font-family:var(--nq-sans); font-size:18px; font-weight:700; letter-spacing:.005em; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } .nq-btn:hover{ transform:translateY(-1px); background:#062754; box-shadow:0 9px 18px rgba(5,37,81,.18); } .nq-btn:focus-visible{ outline:3px solid rgba(37,99,163,.28); outline-offset:3px; } .nq-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } /* ══ § 5 DDG ══════════════════════════════════════════════════════════ Impressum und Datenschutz, von jeder Seite unmittelbar erreichbar. Der