/* start.css — öffentliche Startseite nach Renés Entwurf (07.08.2026). Zwei Farbwelten: hell (Vorgabe) und dunkel. Renés Entwurf zeigt keinen Umschalter, deshalb folgt die Seite der Systemeinstellung; ein manueller Wechsel geht über data-farbwelt auf . Bewegung ausschließlich über transform/opacity und nur am angefassten Element (ADR-077) — kein Layout-Nachrücken der Nachbarn. */ :root { --grund: #ffffff; --grund2: #f6f6fb; --flaeche: #ffffff; --flaeche2: #fafaff; --linie: #e7e7f0; --linie2: #eeeef6; --griffFarbe: #c8c8dc; --griffAktiv: #a8a8c4; --text: #0e0e1a; --text2: #5c5c74; --text3: #6b6b84; --akzent: #4f46e5; --akzentText: #4338ca; --akzentTief: #4338ca; --akzentHell: #7c4dee; --akzentWeich: #eff0fe; --akzentRand: #dedeff; --gruen: #16a34a; --gruenText: #166534; --gruenWeich: #e8f7ee; --blau: #2563eb; --blauText: #1d4ed8; --blauWeich: #e8f0fe; --orange: #ea580c; --orangeText: #9a3412; --orangeWeich: #fdeee5; --amber: #d97706; --amberText: #92400e; --amberWeich: #fdf3e2; --schatten: 0 1px 2px rgba(16, 16, 40, .04), 0 12px 32px rgba(16, 16, 40, .06); --schattenTief: 0 2px 6px rgba(16, 16, 40, .06), 0 24px 60px rgba(16, 16, 40, .10); --heroSchein: transparent; --rund: 14px; --rundKlein: 10px; --bahn: 1180px; } html[data-farbwelt="dunkel"] { --grund: #05060d; --grund2: #090a14; --flaeche: #0f1020; --flaeche2: #12132a; --linie: #21223a; --linie2: #1a1b2e; --griffFarbe: #2e3050; --griffAktiv: #454770; --text: #f3f3fa; --text2: #a0a0bb; --text3: #9494ad; --akzent: #6366f1; --akzentText: #a5b4fc; --akzentTief: #4f46e5; --akzentHell: #a78bfa; --akzentWeich: rgba(99, 102, 241, .16); --akzentRand: rgba(129, 132, 248, .30); --gruen: #34d399; --gruenText: #34d399; --gruenWeich: rgba(52, 211, 153, .14); --blau: #60a5fa; --blauText: #60a5fa; --blauWeich: rgba(96, 165, 250, .14); --orange: #fb923c; --orangeText: #fb923c; --orangeWeich: rgba(251, 146, 60, .14); --amber: #fbbf24; --amberText: #fbbf24; --amberWeich: rgba(251, 191, 36, .14); --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45); --schattenTief: 0 2px 6px rgba(0, 0, 0, .55), 0 30px 70px rgba(0, 0, 0, .6); --heroSchein: radial-gradient(900px 520px at 22% -8%, rgba(99, 102, 241, .22), transparent 62%), radial-gradient(700px 420px at 88% 4%, rgba(167, 139, 250, .16), transparent 60%); } @media (prefers-color-scheme: dark) { html:not([data-farbwelt="hell"]) { --grund: #05060d; --grund2: #090a14; --flaeche: #0f1020; --flaeche2: #12132a; --linie: #21223a; --linie2: #1a1b2e; --griffFarbe: #2e3050; --griffAktiv: #454770; --text: #f3f3fa; --text2: #a0a0bb; --text3: #9494ad; --akzent: #6366f1; --akzentTief: #4f46e5; --akzentHell: #a78bfa; --akzentWeich: rgba(99, 102, 241, .16); --akzentRand: rgba(129, 132, 248, .30); --gruen: #34d399; --gruenText: #34d399; --gruenWeich: rgba(52, 211, 153, .14); --blau: #60a5fa; --blauText: #60a5fa; --blauWeich: rgba(96, 165, 250, .14); --orange: #fb923c; --orangeText: #fb923c; --orangeWeich: rgba(251, 146, 60, .14); --amber: #fbbf24; --amberText: #fbbf24; --amberWeich: rgba(251, 191, 36, .14); --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45); --schattenTief: 0 2px 6px rgba(0, 0, 0, .55), 0 30px 70px rgba(0, 0, 0, .6); --heroSchein: radial-gradient(900px 520px at 22% -8%, rgba(99, 102, 241, .22), transparent 62%), radial-gradient(700px 420px at 88% 4%, rgba(167, 139, 250, .16), transparent 60%); } } * { box-sizing: border-box; margin: 0; } /* Rollbalken (09.08.2026): dieselbe Griff-Farbe wie in der Anwendung, damit die Startseite nicht mit einem hellen System-Balken im dunklen Thema endet. Norm-Schreibweise nur fuer Browser ohne die ::-webkit-Bausteine — sonst ueberstimmt sie diese in Blink und der Balken faellt in die Systemform. */ @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--griffFarbe) transparent; } } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--griffFarbe); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--griffAktiv); background-clip: padding-box; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-corner { background: transparent; } body { background: var(--grund); color: var(--text); font: 400 16px/1.6 "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } .bahn { width: 100%; max-width: var(--bahn); margin: 0 auto; padding: 0 28px; } .ikon { width: 20px; height: 20px; flex: none; display: block; } h1, h2, h3 { letter-spacing: -.022em; line-height: 1.12; font-weight: 700; } /* --- Kopfzeile ------------------------------------------------------------- */ .kopf { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--grund) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .kopf.gescrollt { border-bottom-color: var(--linie); } .kopfInhalt { display: flex; align-items: center; gap: 34px; height: 74px; } .marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; } .markeZeichen { width: 30px; height: 30px; color: var(--akzent); } .markeZeichen .ikon { width: 30px; height: 30px; } .kopfNavi { display: flex; gap: 18px; margin-right: auto; } .kopfNavi a, .kopfNavi button { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; justify-content: center; padding: 0 6px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 14.5px; color: var(--text2); transition: color .16s ease; } .kopfNavi a:hover, .kopfNavi button:hover, .kopfNavi a:focus-visible, .kopfNavi button:focus-visible { color: var(--text); outline: none; } .kopfAktionen { display: flex; align-items: center; gap: 12px; } .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--rundKlein); border: 1px solid transparent; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; padding: 11px 20px; white-space: nowrap; transition: transform .16s ease, opacity .16s ease, background-color .16s ease, border-color .16s ease; } .knopf:hover { transform: translateY(-1px); } .knopf:active { transform: translateY(0); } .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } .knopf .ikon { width: 17px; height: 17px; } .knopf.voll { background: var(--akzent); color: #fff; box-shadow: 0 6px 18px rgba(79, 70, 229, .28); } .knopf.voll:hover { background: var(--akzentTief); } .knopf.rand { border-color: var(--linie); color: var(--text); background: var(--flaeche); } .knopf.rand:hover { border-color: var(--text3); } .knopf.leer { color: var(--text2); } .knopf.leer:hover { color: var(--text); } .knopf.xl { padding: 14px 24px; font-size: 15.5px; } /* --- Hero ------------------------------------------------------------------ */ .hero { position: relative; padding: 62px 0 84px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -80px 0 0; background: var(--heroSchein); pointer-events: none; } .heroGitter { position: relative; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 54px; align-items: start; } .plakette { display: inline-flex; align-items: center; gap: 8px; background: var(--akzentWeich); border: 1px solid var(--akzentRand); color: var(--akzentText); border-radius: 999px; padding: 7px 15px 7px 12px; font-size: 13.5px; font-weight: 500; } .plakette .ikon { width: 14px; height: 14px; } .heroTitel { font-size: clamp(40px, 5.1vw, 60px); margin: 22px 0 0; } .heroTitel .hervor { color: var(--akzentHell); } .heroText { color: var(--text2); font-size: 16.5px; margin-top: 20px; max-width: 40ch; } .heroKnoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .vertrauen { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; } .vertrauenTeil { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text2); } .vertrauenTeil .ikon { width: 19px; height: 19px; color: var(--text); } /* --- Hero-Schaubild: die App als Standbild -------------------------------- */ .schaubild { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schattenTief); overflow: hidden; display: grid; grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .sbKopf { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--linie2); font-size: 13.5px; font-weight: 600; } .sbKopf .sbRund { width: 20px; height: 20px; border-radius: 6px; background: var(--akzentWeich); color: var(--akzentText); display: grid; place-items: center; } .sbKopf .sbRund .ikon { width: 13px; height: 13px; } .sbKopf .ikonKlein { width: 13px; height: 13px; color: var(--text3); } .sbLeiste { border-right: 1px solid var(--linie2); padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; min-height: 330px; } .sbPunkt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 12.5px; color: var(--text2); } .sbPunkt .ikon { width: 14px; height: 14px; color: var(--text3); } .sbPunkt.aktiv { background: var(--akzentWeich); color: var(--akzentText); font-weight: 500; } .sbPunkt.aktiv .ikon { color: var(--akzentText); } .sbNutzer { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--linie2); border-radius: 9px; } .sbNutzerBild { width: 26px; height: 26px; border-radius: 50%; background: var(--akzentWeich); color: var(--akzentText); display: grid; place-items: center; flex: none; } .sbNutzerBild .ikon { width: 15px; height: 15px; } .sbNutzerName { font-size: 12px; font-weight: 600; line-height: 1.25; } .sbNutzerPlan { font-size: 10.5px; color: var(--text3); } .sbHaupt { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 14px; } .sbTitelZeile { display: flex; align-items: flex-start; gap: 14px; } .sbTitel { font-size: 15px; font-weight: 700; } .sbUnter { font-size: 11.5px; color: var(--text2); margin-top: 4px; max-width: 46ch; } .sbKnopf { margin-left: auto; background: var(--akzent); color: #fff; border-radius: 7px; font-size: 11px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 5px; flex: none; } .sbKnopf .ikon { width: 11px; height: 11px; } .sbZahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .sbZahl { border: 1px solid var(--linie2); border-radius: 9px; padding: 10px; } .sbZahlName { font-size: 10px; color: var(--text3); } .sbZahlWert { font-size: 21px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; } .sbZahlDelta { font-size: 9.5px; color: var(--gruenText); margin-top: 2px; } .sbListe { border: 1px solid var(--linie2); border-radius: 9px; padding: 12px 13px; } .sbListeTitel { font-size: 12px; font-weight: 700; margin-bottom: 8px; } .sbZeile { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 11.5px; } .sbZeile .ikon { width: 13px; height: 13px; color: var(--text3); } .sbZeit { margin-left: auto; font-size: 10px; color: var(--text3); white-space: nowrap; } .marker { font-size: 9.5px; border-radius: 999px; padding: 2px 7px; font-weight: 500; white-space: nowrap; } .marker.wissen { background: var(--blauWeich); color: var(--blauText); } .marker.entscheidung { background: var(--orangeWeich); color: var(--orangeText); } .marker.dokument { background: var(--gruenWeich); color: var(--gruenText); } /* --- Abschnitte ------------------------------------------------------------ */ .abschnitt { padding: 84px 0; } .abschnitt.getoent { background: var(--grund2); border-block: 1px solid var(--linie2); } .augenbraue { display: inline-flex; align-items: center; background: var(--akzentWeich); color: var(--akzentText); border-radius: 999px; padding: 5px 13px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; } .mitte { text-align: center; } .mitte .augenbraue { margin: 0 auto; } .abschnittTitel { font-size: clamp(27px, 3.1vw, 34px); margin-top: 18px; } .abschnittText { color: var(--text2); margin-top: 14px; font-size: 15.5px; } .mitte .abschnittText { max-width: 62ch; margin-left: auto; margin-right: auto; } /* Problem und Lösung nebeneinander, getrennt durch eine feine Linie */ .paarGitter { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 54px; align-items: start; } .paarLinie { background: var(--linie); align-self: stretch; } .schritte { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 10px; margin-top: 42px; } .schrittRund { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--akzentRand); background: var(--akzentWeich); color: var(--akzent); display: grid; place-items: center; } .schrittRund .ikon { width: 25px; height: 25px; } .schrittStrich { height: 1px; border-top: 2px dashed var(--linie); position: relative; } .schrittStrich::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 6px solid var(--linie); border-block: 4px solid transparent; } .schrittTexte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; text-align: center; } .schrittTitel { font-size: 14.5px; font-weight: 700; } .schrittText { font-size: 13px; color: var(--text2); margin-top: 6px; } /* Das Projektgehirn mit seinen fünf Anschlüssen */ .gehirnBild { position: relative; margin-top: 34px; display: grid; place-items: center; min-height: 260px; } .gehirnKern { width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, var(--akzentHell), var(--akzent) 72%); color: #fff; box-shadow: 0 14px 40px rgba(79, 70, 229, .32); } .gehirnKern .ikon { width: 62px; height: 62px; } .gehirnChip { position: absolute; display: inline-flex; align-items: center; gap: 7px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 9px; padding: 7px 12px; font-size: 12.5px; font-weight: 500; box-shadow: var(--schatten); transition: transform .18s ease; } .gehirnChip:hover { transform: translateY(-2px); } .gehirnChip .ikon { width: 15px; height: 15px; } .gehirnChip[data-platz="oben"] { top: 0; left: 50%; transform: translateX(-50%); color: var(--blauText); } .gehirnChip[data-platz="oben"]:hover { transform: translateX(-50%) translateY(-2px); } .gehirnChip[data-platz="links"] { top: 40%; left: 0; color: var(--akzentText); } .gehirnChip[data-platz="rechts"] { top: 40%; right: 0; color: var(--gruenText); } .gehirnChip[data-platz="untenlinks"] { bottom: 6px; left: 4%; color: var(--amberText); } .gehirnChip[data-platz="untenrechts"] { bottom: 6px; right: 4%; color: var(--orangeText); } .gehirnFaden { position: absolute; inset: 0; pointer-events: none; } .gehirnFaden line { stroke: var(--linie); stroke-width: 1.5; stroke-dasharray: 5 5; } /* --- Projekttypen ---------------------------------------------------------- */ .kartenReihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 46px; } .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 20px 18px; display: flex; flex-direction: column; gap: 11px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .karte:hover { transform: translateY(-3px); box-shadow: var(--schatten); border-color: var(--akzentRand); } .karteKopf { display: flex; align-items: center; gap: 9px; } .karteKopf .ikon { width: 20px; height: 20px; } .karteTitel { font-size: 14.5px; font-weight: 700; } .karteText { font-size: 13px; color: var(--text2); flex: 1; } .karteMarke { font-size: 11.5px; color: var(--text3); background: var(--flaeche2); border: 1px solid var(--linie2); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; } .karte[data-ton="violett"] .karteKopf .ikon { color: var(--akzent); } .karte[data-ton="blau"] .karteKopf .ikon { color: var(--blau); } .karte[data-ton="gruen"] .karteKopf .ikon { color: var(--gruen); } .karte[data-ton="orange"] .karteKopf .ikon { color: var(--orange); } .karte[data-ton="amber"] .karteKopf .ikon { color: var(--amberText); } .weiterLink { display: inline-flex; align-items: center; gap: 8px; margin: 34px auto 0; min-height: 32px; padding: 0 4px; color: var(--akzentText); font-size: 14.5px; font-weight: 500; cursor: pointer; background: none; border: 0; font-family: inherit; transition: transform .16s ease; } .weiterLink:hover { transform: translateX(2px); } .weiterLink .ikon { width: 16px; height: 16px; } /* --- Vorteile -------------------------------------------------------------- */ .vorteile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 48px; } .vorteil { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } .vorteilRund { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; } .vorteilRund .ikon { width: 20px; height: 20px; } .vorteil[data-ton="violett"] .vorteilRund { background: var(--akzentWeich); color: var(--akzent); } .vorteil[data-ton="gruen"] .vorteilRund { background: var(--gruenWeich); color: var(--gruen); } .vorteil[data-ton="amber"] .vorteilRund { background: var(--amberWeich); color: var(--amber); } .vorteil[data-ton="orange"] .vorteilRund { background: var(--orangeWeich); color: var(--orange); } .vorteilTitel { font-size: 14.5px; font-weight: 700; } .vorteilText { font-size: 13px; color: var(--text2); margin-top: 6px; } /* --- Abschluss ------------------------------------------------------------- */ .abschluss { padding: 20px 0 88px; } .abschlussKasten { border: 1px solid var(--linie); border-radius: 18px; background: var(--flaeche); padding: 40px 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 36px; align-items: center; box-shadow: var(--schatten); } html[data-farbwelt="dunkel"] .abschlussKasten, .abschlussKasten { background: var(--flaeche); } .abschlussTitel { font-size: clamp(23px, 2.7vw, 30px); } .abschlussText { color: var(--text2); margin-top: 12px; font-size: 15px; } .abschlussFeld { display: flex; gap: 12px; } .abschlussFeld input { flex: 1; min-width: 0; border: 1px solid var(--linie); border-radius: var(--rundKlein); background: var(--grund); color: var(--text); font: inherit; font-size: 14.5px; padding: 14px 16px; } .abschlussFeld input::placeholder { color: var(--text3); } .abschlussFeld input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: transparent; } .abschlussHaken { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; } .abschlussHaken span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); } .abschlussHaken .ikon { width: 14px; height: 14px; color: var(--gruen); } /* --- Fuß ------------------------------------------------------------------- */ .fuss { border-top: 1px solid var(--linie); padding: 28px 0; } .fussInhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 13px; color: var(--text3); } .fussLinks { margin-left: auto; display: flex; gap: 8px; } .fussLinks a { color: var(--text2); display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; justify-content: center; padding: 0 6px; } .fussLinks a:hover { color: var(--text); } /* --- Schmalere Schirme ----------------------------------------------------- */ @media (max-width: 1080px) { .heroGitter { grid-template-columns: 1fr; gap: 44px; } .heroText { max-width: none; } .kartenReihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .kopfNavi { display: none; } .paarGitter { grid-template-columns: 1fr; gap: 46px; } .paarLinie { display: none; } .abschlussKasten { grid-template-columns: 1fr; padding: 32px 26px; } } @media (max-width: 720px) { /* Kontrollgang 31.08.2026: Auf 375 px ragte die Kopfzeile 39 px nach rechts hinaus — Marke, „Anmelden" und „Jetzt starten" passten nicht nebeneinander. Der Knopf bleibt stehen und wird schmaler; er ist der Weg in die Anwendung und darf nicht der Erste sein, der weicht. */ .kopfInhalt { gap: 14px; } .kopfAktionen { gap: 6px; } .kopfAktionen .knopf { padding: 9px 13px; min-height: 36px; font-size: 14px; } .bahn { padding: 0 18px; } .abschnitt { padding: 58px 0; } .kartenReihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vorteile { grid-template-columns: 1fr; } .schaubild { grid-template-columns: 1fr; } .sbLeiste { display: none; } .sbZahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .schritte { grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; } .schrittStrich { display: none; } .abschlussFeld { flex-direction: column; } } /* ---- Kreislauf, Zeitleiste, Eigentumsfrage (30.08.2026) ------------------ Die drei Abschnitte aus Renés Landingpage-Entwurf, die der Seite fehlten. Der Kapitel-Abschnitt ist in BEIDEN Farbwelten dunkel. Deshalb hat er eigene Marken, die unter prefers-color-scheme absichtlich NICHT umdefiniert werden — ein Abschnitt, der auch in der dunklen Welt dunkel bleiben soll, darf nicht an den Marken hängen, die dort umschlagen. */ :root { --kapitelGrund: #0b0c1a; --kapitelFlaeche: #15162c; --kapitelLinie: #262745; --kapitelText: #eeeef8; --kapitelText2: #9a9ab8; } .kreislauf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 46px; text-align: left; } .krSchritt { position: relative; padding: 22px 18px 20px; border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten); } .krZahl { position: absolute; top: 15px; right: 16px; font-size: 13px; font-weight: 700; color: var(--text3); font-variant-numeric: tabular-nums; } .krRund { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--akzentWeich); color: var(--akzentText); } .krTitel { font-size: 16px; margin: 15px 0 6px; } .krText { font-size: 14px; line-height: 1.55; color: var(--text2); margin: 0; } .krSchluss { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 18px 22px; border: 1px solid var(--akzentRand); border-radius: 16px; background: var(--akzentWeich); text-align: left; } .krSchlussRund { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--flaeche); color: var(--akzentText); } .krSchluss strong { display: block; font-size: 16px; color: var(--text); } .krSchluss > div > span { font-size: 14px; color: var(--text2); } .kapitel { background: var(--kapitelGrund); color: var(--kapitelText); border-block: 1px solid var(--kapitelLinie); } .kapitel .abschnittTitel { color: var(--kapitelText); } .kapitel .augenbraue { color: var(--akzentHell); } .kapitelGitter { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 54px; align-items: start; } .kapitelText p { font-size: 16px; line-height: 1.7; color: var(--kapitelText2); margin: 0 0 18px; } .kapitelSatz { color: var(--akzentHell) !important; font-weight: 600; } .zeitleiste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 12px; margin-top: 40px; } .zlStation { position: relative; text-align: left; display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; } /* Die Verbindungslinie liegt HINTER dem nächsten Kreis, nicht zwischen den Spalten: so bricht sie beim Umbruch mit um, statt in der Luft zu enden. */ .zlStation + .zlStation::before { content: ""; position: absolute; left: -12px; top: 19px; width: 12px; height: 1px; background: var(--kapitelLinie); } .zlRund { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--kapitelFlaeche); border: 1px solid var(--kapitelLinie); color: var(--kapitelText); } .zlName { font-size: 14px; font-weight: 600; margin-top: 13px; color: var(--kapitelText); } .zlTat { font-size: 13px; line-height: 1.5; color: var(--kapitelText2); margin-top: 3px; } .besitz { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 44px; text-align: left; } .bsSpalte { padding: 26px 24px; border-radius: 18px; border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten); } .bsSpalte[data-seite="eigen"] { border-color: var(--akzentRand); background: var(--akzentWeich); } .bsTitel { font-size: 17px; margin: 0; } .bsUnter { font-size: 13px; color: var(--text3); margin: 4px 0 18px; } .bsListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .bsListe li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text2); } .bsSpalte[data-seite="gemietet"] .ikon { color: var(--orange); flex: none; } .bsSpalte[data-seite="eigen"] .ikon { color: var(--gruen); flex: none; } .bsSpalte[data-seite="eigen"] .bsListe li { color: var(--text); } .bsGegen { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); } @media (max-width: 900px) { .kreislauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kapitelGitter { grid-template-columns: minmax(0, 1fr); gap: 34px; } .zeitleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .zlStation + .zlStation::before { display: none; } .besitz { grid-template-columns: minmax(0, 1fr); } .bsGegen { text-align: center; } } @media (max-width: 720px) { .kopfNavi a, .kopfNavi button, .fussLinks a, .weiterLink { min-height: 36px; } .kreislauf { grid-template-columns: minmax(0, 1fr); } .zeitleiste { grid-template-columns: minmax(0, 1fr); } .krSchluss { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }