/* * Startseite neu (Entwurf, nicht live). Ergänzt framework/vorlage/framework/werkzeuge/wegweiser-startseite.css (W6). * Fünf Abschnitte wie am 06.10. (Prüfstand). Jede dunkle Fläche endet in einer ruhigen Pixelkante (punktuell.js, * data-tp-flaeche). Tarnfleck nur an zwei Stellen (Mauritz' Wahl 07.10.: A Futter unter dem Wegweiser + Aufnäher aus B im „Warum“). * Gilt auch für die Startseite im Vergleich tarnfleck-punktuell (eine Datei für beide, vorher seiten/start.css). * Fachpresse 07.10.: Datum je Artikel, Cash. mit zwei Wegen (Artikel, Video) und breiterer Karte, Laufband 56 s für sechs Karten. */ #ps-home-w6.ps-home-tp { --tp-kante-h: calc(var(--tp-block) * 4); /* Höhe der Pixelkante (4 Blöcke) */ overflow: visible; overflow-x: clip; background: var(--ps-farbe-flaeche); } #ps-home-w6.ps-home-tp .w6-dunkel { background: var(--ps-farbe-dunkel-marke); } #ps-home-w6.ps-home-tp .w6-dunkel.tp-bereit { background: transparent; } #ps-home-w6.ps-home-tp .w6-dunkel::before, #ps-home-w6.ps-home-tp .w6-umhang { content: none; display: none; } #ps-home-w6.ps-home-tp .n-hell { position: relative; z-index: 1; background: transparent; } /* ---- Kopf ---- */ #ps-home-w6.ps-home-tp .w6-kopf { padding-block: calc(var(--tp-kante-h) + var(--ps-a-6)) calc(var(--tp-kante-h) + var(--ps-a-7)); } #ps-home-w6.ps-home-tp .w6-kopf h1 { max-width: 15em; } #ps-home-w6.ps-home-tp .w6-marke { color: var(--ps-bronze-300); } #ps-home-w6.ps-home-tp .w6-moritz .w6-presse { display: none; } /* Presse steht als eigenes Band darunter */ /* ---- Warum: rechte Spalte mit Aufnäher (aus Richtung B, mit dem Schild) über den Zahlen ---- */ #ps-home-w6.ps-home-tp .n-warum__rechts { display: grid; gap: var(--ps-a-5); align-content: start; } #ps-home-w6.ps-home-tp .tp-abzeichen { width: 176px; height: 152px; justify-self: start; } /* vier Zahlen (3.500 wie live, Mauritz 07.10.) als 2 × 2, sonst wird die rechte Spalte doppelt so hoch wie der Text */ #ps-home-w6.ps-home-tp .n-warum .w6-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ps-home-w6.ps-home-tp .n-warum .w6-zahl { padding: var(--ps-a-4); } /* ---- Fachpresse (läuft, als Aufnäher: Mauritz' Wahl 06.10.) ---- */ #ps-home-w6.ps-home-tp .n-presse { padding-block: var(--ps-a-7) var(--ps-a-5); } #ps-home-w6.ps-home-tp .n-namensband { width: fit-content; margin: 0; padding: 6px 14px 7px; border-radius: var(--ps-radius-sm); background: var(--ps-navy); box-shadow: inset 0 0 0 2px var(--ps-navy), inset 0 0 0 3px color-mix(in srgb, var(--ps-messing-licht) 55%, transparent); color: var(--ps-white); font: var(--ps-staerke-kopf) 17px/1.2 var(--ps-font-head); letter-spacing: 0.01em; } #ps-home-w6.ps-home-tp .n-presse__spur { margin-top: var(--ps-a-4); scroll-padding-inline: max(20px, calc((100vw - 1220px) / 2)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; } #ps-home-w6.ps-home-tp .n-presse__spur::-webkit-scrollbar { display: none; } #ps-home-w6.ps-home-tp .n-presse__spur:focus-visible { outline: 3px solid var(--ps-farbe-fokus); outline-offset: -3px; } #ps-home-w6.ps-home-tp .n-presse__reihen { display: flex; width: max-content; padding-inline: max(20px, calc((100vw - 1220px) / 2)); } #ps-home-w6.ps-home-tp .n-presse__reihe { display: flex; gap: var(--ps-a-6); margin: 0; padding: 4px var(--ps-a-6) 8px 0; list-style: none; } #ps-home-w6.ps-home-tp .n-presse__reihe li { scroll-snap-align: start; } #ps-home-w6.ps-home-tp .n-artikel { position: relative; display: flex; flex-direction: column; gap: var(--ps-a-2); width: 206px; height: 100%; padding: 4px 0; color: var(--ps-navy); text-decoration: none; transition: transform var(--ps-dauer-kurz) linear; } #ps-home-w6.ps-home-tp .n-artikel--breit { width: 268px; } #ps-home-w6.ps-home-tp .n-artikel__logo { display: flex; flex: none; align-items: center; height: 40px; } #ps-home-w6.ps-home-tp .n-artikel__logo img { width: auto; height: auto; max-width: 150px; max-height: 34px; object-fit: contain; } #ps-home-w6.ps-home-tp .n-artikel__titel { font: var(--ps-staerke-kopf) 16px/1.3 var(--ps-font-head); } #ps-home-w6.ps-home-tp .n-artikel__datum { color: var(--ps-farbe-leise); font-size: var(--ps-gr-fein); line-height: 1.35; } #ps-home-w6.ps-home-tp .n-artikel__anlass { color: var(--ps-farbe-leise); font-size: var(--ps-gr-fein); line-height: 1.4; } #ps-home-w6.ps-home-tp a.n-artikel .n-artikel__mehr, #ps-home-w6.ps-home-tp a.n-artikel__mehr { align-self: flex-start; margin-top: auto; padding-top: var(--ps-a-1); color: var(--ps-farbe-link); font-size: var(--ps-gr-fein); font-weight: var(--ps-staerke-betont); text-decoration: underline; text-underline-offset: 3px; } #ps-home-w6.ps-home-tp .n-artikel__wege { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: var(--ps-a-1); } #ps-home-w6.ps-home-tp .n-artikel__wege .n-artikel__mehr { margin-top: 0; padding-top: 0; } #ps-home-w6.ps-home-tp .n-artikel__wege .n-artikel__mehr:hover { color: var(--ps-navy); } #ps-home-w6.ps-home-tp a.n-artikel:hover { transform: translateY(-3px); color: var(--ps-navy); } #ps-home-w6.ps-home-tp a.n-artikel:hover .n-artikel__titel { text-decoration: underline; text-underline-offset: 3px; } /* Fassung „Aufnäher“ (Schalter in der Vorschau) */ #ps-home-w6.ps-home-tp[data-presse-stil="aufnaeher"] .n-artikel { padding: 14px 16px 12px; border-radius: var(--ps-radius); background: var(--ps-white); box-shadow: 0 2px 0 color-mix(in srgb, var(--ps-navy) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--ps-navy) 12%, transparent); } #ps-home-w6.ps-home-tp[data-presse-stil="aufnaeher"] .n-artikel::before { content: ""; position: absolute; inset: 5px; border: 1px dashed color-mix(in srgb, var(--ps-navy) 28%, transparent); border-radius: 2px; pointer-events: none; } /* steht (Vorgabe) oder läuft (Schalter in der Vorschau; Regel 01.10.: keine Dauerschleife) */ #ps-home-w6.ps-home-tp:not([data-presse="lauf"]) .n-presse__reihe[aria-hidden="true"] { display: none; } #ps-home-w6.ps-home-tp[data-presse="lauf"] .n-presse__spur { overflow: hidden; } #ps-home-w6.ps-home-tp[data-presse="lauf"] .n-presse__reihen { padding-inline: 0; animation: n-lauf 56s linear infinite; } #ps-home-w6.ps-home-tp[data-presse="lauf"] .n-presse__spur:hover .n-presse__reihen, #ps-home-w6.ps-home-tp[data-presse="lauf"] .n-presse__spur:focus-within .n-presse__reihen { animation-play-state: paused; } @keyframes n-lauf { to { transform: translateX(-50%); } } /* Pause-Knopf (Mauritz 07.10.2026): Das Band läuft dauernd; ein kleiner Knopf ‖ (angehalten ▶) ohne Text hält es an – WCAG 2.2.2 (Bewegung über 5 s braucht einen Weg zum Anhalten; Hover/Fokus gibt es am Handy nicht). Fläche 28 px (≥ 24 px, WCAG 2.5.8), Zeichen in --ps-farbe-leise auf Weiß 6,4 : 1 (≥ 3 : 1). Zeichen aus CSS, nicht ‖/▶ als Schrift (iOS macht ▶ zum Emoji). Ohne JS bleibt er verborgen (hidden), dann hält das Band nur bei Hover und Fokus. Kein Speicher: gilt für den Besuch. */ #ps-home-w6.ps-home-tp .n-presse__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-a-4); } #ps-home-w6.ps-home-tp .n-presse__pause { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 1px solid var(--ps-grau-300); border-radius: var(--ps-radius); background: transparent; color: var(--ps-farbe-leise); cursor: pointer; } #ps-home-w6.ps-home-tp .n-presse__pause[hidden] { display: none; } #ps-home-w6.ps-home-tp .n-presse__pause:hover { border-color: var(--ps-farbe-leise); color: var(--ps-farbe-text); } #ps-home-w6.ps-home-tp .n-presse__pause:focus-visible { outline: 3px solid var(--ps-farbe-fokus); outline-offset: 2px; } #ps-home-w6.ps-home-tp .n-presse__pause span { display: block; width: 10px; height: 12px; border-inline: 3px solid currentColor; } #ps-home-w6.ps-home-tp .n-presse__pause[aria-pressed="true"] span { width: 0; height: 0; margin-left: 3px; border-block: 6px solid transparent; border-inline: 10px solid currentColor; border-inline-end: 0; } #ps-home-w6.ps-home-tp .n-presse.ist-pausiert .n-presse__reihen { animation-play-state: paused; } /* ---- Vertrauensleiste + vier Themen ---- */ #ps-home-w6.ps-home-tp .n-themen { padding-block: var(--ps-a-7) var(--ps-a-9); } #ps-home-w6.ps-home-tp .n-themen .mk-vertrauen { padding-bottom: var(--ps-a-7); } @media (min-width: 1025px) { #ps-home-w6.ps-home-tp .mk-vertrauen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #ps-home-w6.ps-home-tp .n-themen__kopf { margin-bottom: var(--ps-a-6); } #ps-home-w6.ps-home-tp .n-themen__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ps-a-6) var(--ps-a-5); } #ps-home-w6.ps-home-tp .n-thema { display: flex; flex-direction: column; gap: var(--ps-a-2); } #ps-home-w6.ps-home-tp .n-thema img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ps-radius-lg); } #ps-home-w6.ps-home-tp .n-thema h3 { margin-top: var(--ps-a-2); font-size: var(--ps-gr-h3); } #ps-home-w6.ps-home-tp .n-thema p { font-size: var(--ps-gr-klein); line-height: var(--ps-zeile-klein); } #ps-home-w6.ps-home-tp .n-thema .w6-weiter { margin-top: auto; } /* ---- Warum wir (dunkle Lichtung) ---- */ #ps-home-w6.ps-home-tp .n-warum { padding-block: calc(var(--tp-kante-h) + var(--ps-a-7)); } #ps-home-w6.ps-home-tp .n-warum__raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--ps-a-7); align-items: center; } #ps-home-w6.ps-home-tp .n-warum__raster p { margin-top: var(--ps-a-4); max-width: 40em; } #ps-home-w6.ps-home-tp .n-warum .w6-haken-liste { margin-top: var(--ps-a-4); } #ps-home-w6.ps-home-tp .n-ablauf { margin-top: var(--ps-a-7); } #ps-home-w6.ps-home-tp .n-ablauf h3 { margin-bottom: var(--ps-a-5); color: var(--ps-farbe-auf-dunkel); font-size: var(--ps-gr-h3); } #ps-home-w6.ps-home-tp .n-warum .w6-ablauf li h3 { margin: 0; font-size: var(--ps-gr-text); } #ps-home-w6.ps-home-tp .n-warum .w6-ablauf li p { color: var(--ps-farbe-auf-dunkel-leise); } /* ---- Fragen ---- */ #ps-home-w6.ps-home-tp .n-fragen { padding-block: var(--ps-a-9); } /* ---- Stimmen und Gespräch (dunkle Lichtung, läuft unten ins Weiß aus) ---- */ #ps-home-w6.ps-home-tp .n-schluss { padding-block: calc(var(--tp-kante-h) + var(--ps-a-7)) calc(var(--tp-kante-h) + var(--ps-a-7)); } #ps-home-w6.ps-home-tp .n-schluss .w6-schluss { margin-top: var(--ps-a-8); } /* ---- Handy ---- */ @media (max-width: 1100px) { #ps-home-w6.ps-home-tp .n-themen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { #ps-home-w6.ps-home-tp .n-warum__raster { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { #ps-home-w6.ps-home-tp .w6-kopf { padding-block: calc(var(--tp-kante-h) + var(--ps-a-5)) calc(var(--tp-kante-h) + var(--ps-a-6)); } #ps-home-w6.ps-home-tp .n-themen__liste { grid-template-columns: minmax(0, 1fr); } #ps-home-w6.ps-home-tp .n-artikel { width: 180px; } #ps-home-w6.ps-home-tp .n-artikel--breit { width: 236px; } #ps-home-w6.ps-home-tp .n-themen { padding-bottom: var(--ps-a-8); } #ps-home-w6.ps-home-tp .n-fragen { padding-block: var(--ps-a-8); } #ps-home-w6.ps-home-tp .tp-abzeichen { width: 144px; height: 120px; } } @media (prefers-reduced-motion: reduce) { #ps-home-w6.ps-home-tp[data-presse="lauf"] .n-presse__reihen { animation: none; } #ps-home-w6.ps-home-tp .n-presse__pause { display: none; } /* nichts bewegt sich, also nichts anzuhalten */ #ps-home-w6.ps-home-tp[data-presse="lauf"] .n-presse__spur { overflow-x: auto; } #ps-home-w6.ps-home-tp a.n-artikel:hover { transform: none; } }