/* ========================================================================== Baustein: Prozess-Raster (Sektion 6, Wie tun wir es?) Datei: css/bausteine/prozess-raster.css Gebraucht auf: index.html (Board), work-zone.html (Variante "rows" und .button-tab) Bauvorschrift: DESIGN.md, Baustein "Prozess-Raster" Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten, Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert. ========================================================================== */ /* Präfix: .process-* /* -------------------------------------------------------------------------- 1. Prozess-Raster, geliefert 4 Spalten, Linie in --ink oben, Trennlinien rechts, 260 px Mindesthöhe, Ziffer kursiv (.index aus style.css, D3: --muted), H3 heading-m mit 74 px Abstand darüber. -------------------------------------------------------------------------- */ .process-grid { list-style: none; margin: 75px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); } .process-step { padding: 23px 25px 0 0; border-right: 1px solid var(--line); min-height: 260px; } .process-step + .process-step { padding-left: 25px; } .process-step:last-child { border-right: 0; } .process-step h3 { margin: 74px 0 10px; } /* -------------------------------------------------------------------------- 2. Nein-Botschaft, abgeleitet Spaltenverhältnis aus dem Split-Kopf (1.35fr / .65fr, --gap-col). Seit 2026-09-20 steht in diesem Raster nur noch die Copy, die Karte "Zwei Arbeitsmodelle" ist auf Weisung entfallen. Die zweite Spalte bleibt leer und hält damit das Textmaß der Copy unverändert. Mit ihr sind die Blöcke 3 (Gewinngründe) und 4 (Kundenzitat) entfallen, die Nummerierung springt deshalb von 2 auf 5. -------------------------------------------------------------------------- */ .process-stance { /* 72px statt 96px: die Sektion ist die laengste der Startseite, und dieser Abstand ist abgeleitet, nicht geliefert. Das Sektionspolster (D7) und die 75px des Rasters bleiben unangetastet. */ margin-top: 72px; display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--gap-col); align-items: start; } /* -------------------------------------------------------------------------- 7. Variante "feature": Nein-Botschaft als Karte mit Kunstfläche Materialien aus dem Baustein Feature-Raster: Karte --white (seit D17) mit --line-card und --r-md, Kunstfläche, Body mit Haarlinie. Abweichung: die Kunstfläche sitzt links statt oben, weil sie über die volle Containerbreite ein zu hohes Band wäre. Ab 980 px stapelt sie nach oben und entspricht damit wieder der Vorschrift. -------------------------------------------------------------------------- */ .process-stance--feature { grid-template-columns: 1fr; gap: 0; align-items: center; min-height: 420px; position: relative; isolation: isolate; /* Foto als Grund der Karte (2026-09-18, Weisung Christian Hansmann). Der Verlauf bleibt als Unterlage stehen: er traegt die Karte, solange das Bild noch nicht dekodiert ist, und fuellt die Raender, wenn cover das Seitenverhaeltnis anders schneidet. Beides in einer Kurzschreibweise, das Bild zuerst, also oben. */ background: url('../../assets/texture/tree-landscape.webp') center / cover no-repeat, linear-gradient(150deg, var(--ink) 0%, var(--paper) 50%, var(--ink) 100%); border: 1px solid transparent; /* Gleicher Wert wie in der Board-Fassung weiter unten, die diese Regel mit zwei Klassen schlaegt. Beide stehen auf --r-xl, damit hier kein zweiter Wert steht, der nur so aussieht, als wuerde er gelten. */ border-radius: var(--r-xl); overflow: hidden; /* Fallback */ overflow: clip; /* kein Scroll-Container, bricht kein sticky, D15 */ } .process-stance--feature .process-stance-copy { padding: 42px 50px 46px; align-self: center; } /* -------------------------------------------------------------------------- 8. Variante "roadmap": Status je Schritt Eigene Klasse, weil der Status ein Beispielprojekt beschreibt und nicht zu jeder Seite gehört, die das Raster teilt. -------------------------------------------------------------------------- */ .process-grid--roadmap { margin-top: 26px; } .process-grid--roadmap .process-step { display: flex; flex-direction: column; padding-bottom: 26px; } .process-grid--roadmap .process-status { margin-top: auto; padding-top: 22px; } .process-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px 0 8px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--muted); } .process-pill-icon { width: 16px; height: 16px; flex: none; } /* Gemeinsame Mindestbreite der drei Pillen. Sie sind unterschiedlich breit ("Geplant" 100 px, "Erledigt" 85, "Laeuft" 66, gemessen 2026-09-17), und in der Variante "board" bestimmt die breiteste sichtbare Pille die Mindestbreite der ganzen linken Spalte. Wandert der aktive Schritt, wandert damit die Spaltenbreite: bei 1024 px sprang die rechte Spalte um 4,6 px, also bei jedem Takt. Mit einheitlicher Breite steht die Spalte still, und die drei Pillen fluchten zugleich untereinander. */ .process-grid--roadmap .process-pill { min-width: 100px; justify-content: center; } /* "Erledigt" bleibt monochrom. Auf --ink stand es in Weiss mit einer Linie in rgba(255,255,255,.46), also im staerksten neutralen Ton, nicht in einer Signalfarbe. Die Grundfassung setzte hier --success, und beim Wechsel der Sektion auf --paper am 2026-09-17 kam dieses Gruen durch. Auf Weisung vom selben Tag zurueck auf neutral: --ink ist das helle Gegenstueck zu Weiss, --line-strong das zur .46-Linie. */ .process-grid--roadmap .process-step--done .process-pill { color: var(--ink); border-color: var(--line-strong); } .process-grid--roadmap .process-step--now .process-pill { color: var(--blue); border-color: var(--blue); } /* -------------------------------------------------------------------------- 10. Breakpoint 980 px Raster auf 2 Spalten, die erste Zeile bekommt die Trennlinie unten. Abweichung von der Vorlage: dort tragen alle vier Zellen border-bottom, dadurch steht eine Linie unter der letzten Zeile. Hier nur die erste. -------------------------------------------------------------------------- */ @media (max-width: 980px) { .process-grid { grid-template-columns: 1fr 1fr; } .process-step:nth-child(2n) { border-right: 0; } .process-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .process-step:nth-child(odd) { padding-left: 0; } .process-step:nth-child(n+3) { padding-top: 23px; } .process-stance { grid-template-columns: 1fr; gap: 42px; margin-top: 64px; } .process-stance--feature { gap: 0; min-height: 380px; } .process-stance--feature .process-stance-copy { padding: 34px 28px 34px; } } /* -------------------------------------------------------------------------- 11. Breakpoint 640 px Alles einspaltig, Mindesthöhe 190 px, H3-Abstand 46 px. -------------------------------------------------------------------------- */ @media (max-width: 640px) { .process-grid { grid-template-columns: 1fr; margin-top: 50px; } .process-step { padding: 23px 0 0; border-right: 0; min-height: 190px; } .process-step + .process-step { padding-left: 0; } .process-step:nth-child(-n+3) { border-bottom: 1px solid var(--line); } .process-step:last-child { border-bottom: 0; min-height: 0; padding-bottom: 0; } .process-step h3 { margin-top: 46px; } /* Varianten-Zusätze. */ .process-stance--feature { min-height: 0; } .process-stance--feature .process-stance-copy { padding: 28px 24px 32px; } .process-grid--roadmap { margin-top: 22px; } /* Ohne margin-top:auto: bei 190 px Mindesthöhe klebte der Chip sonst weit unter dem Text an der Trennlinie der nächsten Zelle. */ .process-grid--roadmap .process-status { margin-top: 0; padding-top: 18px; } .process-grid--roadmap .process-step { padding-bottom: 22px; } /* Die letzte Zelle trägt hier keine Trennlinie, also auch kein Polster. Muss nach der Regel darüber stehen, gleiche Spezifität. */ .process-grid--roadmap .process-step:last-child { padding-bottom: 0; } } /* -------------------------------------------------------------------------- 12. Zustandspillen, Anzeige Am Ende der Datei, damit diese Regeln bei gleicher Spezifität auch die Breakpoint-Linien aus Block 10 und 11 schlagen. -------------------------------------------------------------------------- */ .process-pill--done, .process-pill--now, .process-pill--next { display: none; } .process-grid--roadmap .process-step--done .process-pill--done, .process-grid--roadmap .process-step--now .process-pill--now, .process-grid--roadmap .process-step--next .process-pill--next { display: inline-flex; } .process-step-jump { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .process-step-jump::after { content: ''; position: absolute; inset: 0; z-index: 1; } .process-step-jump:focus-visible { outline: none; } .process-step-jump:focus-visible::after { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: var(--r-xs); } .process-panel[hidden] { display: none; } .js .process-stance--feature .process-stance-copy { display: grid; } .js .process-stance--feature .process-panel { grid-area: 1 / 1; } /* Ueberblendung statt hartem Wechsel (2026-09-17). Die vier Tafeln liegen in derselben Rasterzelle, die ein- und die ausgehende blenden also ineinander. */ .js .process-stance--feature .process-panel { opacity: 1; visibility: visible; transition: opacity var(--t) var(--ease-reveal), visibility 0s; } .js .process-stance--feature .process-panel[hidden] { display: block; opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease-reveal), visibility 0s var(--t); } /* Frueher das Gitter nach D11 (34 px, Weiss .13, ausmaskiert). Seit dem Foto vom 2026-09-18 liegt hier stattdessen ein Schleier, seit 2026-11-02 neutral: ueber dem bewegten Blattwerk waeren Gitterlinien nur Unruhe, und der Schleier setzt die Tafel vom Grund ab, ohne das Bild zuzudecken. Abweichung von D11, Phase-4-Nachtrag offen, siehe README.md. Weiter als Pseudoelement mit z-index -1 unter dem Inhalt: isolation: isolate an der Karte haelt die -1 innerhalb der Karte, overflow: clip beschneidet es an der Rundung. */ .process-stance--feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, rgba(16,17,19,.42), rgba(16,17,19,.14) 55%, rgba(16,17,19,.46)); } /* Auf --white gelten die hellen Rollen: h3 erbt --ink (18.89), .lead traegt --lead aus style.css (7.39). Keine eigene Farbe noetig. */ .process-panel + .process-panel { margin-top: 34px; } .js .process-panel + .process-panel { margin-top: 0; } .process-stance { margin-top: 72px; } @media (max-width: 640px) { /* Das Zustandszeichen faellt hier weg. Gemessen am 2026-09-17 bei 375 px: der Container ist 319 px breit, die Kopfzeile der Karte "Uebergeben" braucht 48 Polster + 141 (Ziffer, Abstand, Titel) + 116 (Abstand, Pille) + 38 (Abstand, Zeichen) = 343 px. Die Karte wurde damit breiter als der Container und stand 25 px ueber dessen Kante. Ohne das Zeichen sind es 306 px und es passt. Umbrechen statt ausblenden waere die Alternative, kostet aber eine zweite Zeile in jeder eingeklappten Karte. Das Zeichen ist dekorativ und traegt keine eigene Information: den Zustand sagt die Pille im Wort, und die bleibt. */ .process-step-icon { display: none; } } /* -------------------------------------------------------------------------- Variante "board": zwei Spalten, Schritte als Akkordeon Vorlage: awesomic.com, Sektion "How it works", ausgemessen am 2026-09-16. Dort: Flex-Row mit 12 px, links Spalte 450 px mit vier Karten im selben Abstand, rechts 435 px Inhalt. Karten mit gleichem Grund, Radius 36 px, Innenabstand 8 px, eingeklappt 97 px, aktiv 281 px, Uebergang 0,25 s. Fortschritt als Pille 40x8 in der aktiven Karte, Takt 4807 ms. Abweichungen beim Uebertragen: 1. Radius 36 px gibt es in D8 nicht. Es gilt nicht der naechste Wert, sondern die Rolle: --r-md ist "Karten", und die Schritte sind Karten. Damit tragen sie denselben Radius wie die Karte rechts daneben. 2. Der Grund ist weiss, die Sektion liegt auf --paper. 3. Die Ziffer steht in body-s aufrecht statt in display-3 kursiv. Im kompakten Kartenkopf waere die 66-px-Ziffer aus der Variante "staged" nicht unterzubringen. Doppelte Abweichung vom gelieferten Baustein, der "Ziffer kursiv" verlangt, und von DESIGN.md, wo die synthetische Schraeglage fuer .index, .feature-no und .expertise-code ausdruecklich bleiben soll. Auf Weisung vom 2026-09-18. Umgesetzt ohne Gegenregel: das Markup traegt .feature-no nicht mehr, denn die Klasse setzt nur font-style, und eine Klasse aus style.css wird nach Regel 4 benutzt und nicht ueberschrieben. -------------------------------------------------------------------------- */ /* 72 px nach D20 ("Sektionskopf ... 72 px Abstand zum Inhalt"). Bis 2026-09-21 trug diesen Abstand die Legende darueber (75 px plus ihre Hoehe), das Board stand nur 26 px unter ihr. Mit der Legende ist der Abstand hierher gewandert, sonst klebte das Board unter der Ueberschrift. Ohne Breakpoint-Fassung: die Legende ging bei 980 px auf 50 px zurueck, aber ihr Media-Block steht in dieser Datei vor dieser Regel und wuerde bei gleicher Spezifitaet verlieren. D20 nennt ohnehin nur den einen Wert. */ /* Ausgeblendeter Kopf (work-zone.html, seit 2026-10-12): .split-head setzt in style.css display: grid und schlägt damit das hidden-Attribut. */ .split-head[hidden] { display: none; } .process-board { --process-dwell: 4800ms; margin-top: 72px; display: grid; grid-template-columns: 1fr 2fr; gap: 12px; align-items: stretch; } /* Flex statt Grid in dieser Variante, damit der Restplatz gezielt in die aktive Karte geht. Die Hoehe des Boards gibt die rechte Karte vor, sie richtet sich nach der hoechsten der vier Tafeln. Links bleibt deshalb etwas uebrig, und wie viel, haengt vom offenen Schritt ab: bei 1440 px 7 px bei 01, 03 und 04, aber 31 px bei 02, dessen Absatz kuerzer ist. In breiteren Fenstern mehr, weil die Absaetze dann weniger Zeilen brauchen. Zwei verworfene Wege: align-content: start liess den Rest unten liegen, die letzte Karte endete ueber der rechten Kante. align-content: stretch verteilt ihn auf alle vier Zeilen, dann wackeln die eingeklappten Karten bei jedem Takt um 6 px mit. Mit flex nimmt nur die aktive Karte den Rest auf, die eingeklappten behalten ihre Hoehe. */ .process-grid--board { display: flex; flex-direction: column; gap: 12px; margin: 0; border-top: 0; } .process-grid--board .process-step { flex: 0 0 auto; } .process-grid--board .process-step--now { flex: 1 1 auto; } .process-grid--board .process-step { display: block; /* Bezugsrahmen fuer die Trefferflaeche des Knopfes. Ohne das greift dessen ::after mit inset: 0 auf den naechsten positionierten Vorfahren durch, und das ist .section mit position: relative. Alle vier Flaechen lagen dann uebereinander auf der ganzen Sektion, und der letzte Schritt im Markup gewann jeden Klick. Gemessen und behoben am 2026-09-16. position: relative kam vorher aus Block 6 ueber die Variante "staged", die dieses
    nicht mehr traegt. */ position: relative; min-height: 0; padding: 22px 24px; border-right: 0; background: var(--white); /* --r-xl, damit die Schrittkarten denselben Radius tragen wie die Karte rechts daneben. Weisung vom 2026-09-21, nachdem beide auseinandergelaufen waren: die rechte Karte steht seit dem Foto-Umbau auf --r-xl. Abweichung von D8: dort ist --r-md die Rolle "Karten" und --r-xl gehoert Geraete-Attrappen in Illustrationen. Die Einheitlichkeit der zwei Container geht hier vor. Gehoert als benannte Abweichung in den PR. */ border-radius: var(--r-xl); /* Rahmen an allen vier, damit das Hervorheben des aktiven Schritts die Hoehen nicht verschiebt. Der aktive verstaerkt ihn unten. */ border: 1px solid var(--line); } /* Der aktive Schritt hat keinen Rahmen, Weisung vom 2026-09-17. Vorher trug er eine Haarlinie in --line-strong als Kennzeichnung, die drei anderen --line. Jetzt ist seine Kante offen, die anderen behalten ihre Linie. Der Rahmen bleibt als transparente Geometrie stehen, damit die Kartenhoehen sich nicht um 2 px gegeneinander verschieben. Den Zustand tragen weiterhin drei Dinge: die Karte ist aufgeklappt, die Pille sagt "Laeuft" im Wort, und der Fortschrittsbalken laeuft. Farbe oder Linie allein entscheidet nichts (D9). */ .process-grid--board .process-step--now { border-color: transparent; } .process-grid--board .process-step + .process-step { padding-left: 24px; } /* Spezifitaet: .process-step h3 aus Block 1 traegt margin 74px 0 10px und schlaegt eine Klasse allein. Deshalb mit dem Varianten-Selektor davor. */ .process-grid--board .process-step-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; font: inherit; } .process-grid--board .process-status { margin: 0; padding: 0; flex: none; } .process-step-jump { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; } .process-step-no { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--muted); } .process-step-title { display: block; } .process-step-icon { flex: none; width: 22px; height: 22px; color: var(--muted); transition: transform var(--t) var(--ease-reveal); } .process-grid--board .process-step--now .process-step-icon { transform: rotate(-90deg); } .process-step-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t) var(--ease-reveal), opacity var(--t); } .process-step-detail-inner { overflow: hidden; } .process-grid--board .process-step--now .process-step-detail { grid-template-rows: 1fr; opacity: 1; } /* Der Fortschrittsbalken gehoert an den Fuss der aktiven Karte. Die Karte waechst ueber flex: 1 1 auto auf die Hoehe der Spalte, ihr Inhalt aber nicht: sie ist display: block, der Balken stand deshalb direkt unter dem Absatz und damit mitten in der Karte. Auffaellig wurde das, als die rechte Karte mit dem Foto hoeher wurde und die Spalte mit ihr. Gemeldet am 2026-09-21. Nur die aktive Karte wird dafuer zur Flex-Spalte. Die drei zugeklappten bleiben Bloecke, sonst greift das Wachsen in die Auf- und Zuklapp-Animation der Rasterzeilen. */ .process-grid--board .process-step--now { display: flex; flex-direction: column; } .process-grid--board .process-step--now .process-step-detail { flex: 1 1 auto; } .process-grid--board .process-step--now .process-step-detail-inner { display: flex; flex-direction: column; } .process-grid--board .process-step--now .process-step-progress { margin-top: auto; } .process-step-detail-inner > p { margin: 14px 0 0; min-height: calc(6 * 1.55em); overflow-wrap: anywhere; } /* Fortschrittspille, Mass aus der Vorlage: 40 x 8, voll gerundet. */ .process-step-progress { display: block; width: 40px; height: 8px; margin-top: 18px; border-radius: var(--r-pill); /* Spur in --paper: auf der weissen Karte zeigt sie die Sektionsflaeche und liest sich als Rille. Die Fuellung erreicht dagegen 7.40. */ background: var(--paper); overflow: hidden; } .process-step-progress-fill { display: block; width: 100%; height: 100%; border-radius: var(--r-pill); /* Blau statt Gelb: D17 laesst Gelb auf hellen Flaechen nicht als Linie zu. Blau ist hier ohnehin die Farbe des laufenden Zustands, siehe Pille und Zeichen. */ background: var(--blue); transform: scaleX(0); transform-origin: left center; } .process-grid--board.is-running .process-step--now .process-step-progress-fill { animation: process-step-fill var(--process-dwell) linear forwards; } .process-grid--board.is-paused .process-step--now .process-step-progress-fill { animation-play-state: paused; } @keyframes process-step-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Knopf von work-zone.html (Hero, Preise, Kontakt, Floating Button), flach wie die Header-CTA (.header-cta in style.css), seit 2026-11-05: Fläche --ink, --r-sm, Innenabstand 12/17 px, --fs-label in Versalien mit .1em Laufweite, 400, Zeilenhöhe geerbt wie dort (42 px hoch), ohne Rand und ohne Schatten. Beim Darüberfahren Fläche --blue ohne Hub, wie die Header-CTA; beim Drücken --press wie .button. Anders als die Header-CTA mit Pfeil (.icon-pfeil, 8 px Abstand), der seit 2026-10-12 an allen Knöpfen der Seite steht. Vorher (2026-10-01 bis 2026-11-05) im Stil von awesomic.com (.tab_button-imitation): --r-lg, 13 px in 500 ohne Versalien, Rand Weiß .2 und vier Schattenlagen. Eigene Klasse statt .header-cta, weil die Kopfzeile gesperrt ist und .header-cta dort justify-self trägt; ohne .button, sonst setzen sich dessen 48 px Höhe und 700 durch. Liegt hier, weil gesperrt ist und die Seite diese Datei schon lädt. */ .button-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 17px; border-radius: var(--r-sm); background: var(--ink); color: var(--white); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 400; white-space: nowrap; transition: transform var(--t), background-color var(--t); } .button-tab:hover { background-color: var(--blue); } /* Auf der blauen Kontakt-Fläche verschwände die Fläche beim Darüberfahren im Grund, dort --blue-deep (Weiß darauf 13.6). */ .on-blue .button-tab:hover { background-color: var(--blue-deep); } /* Drücken wie .button (2026-10-13, Skill apple-design): sofort, auf --press, zurück mit --t. Der Floating Button steht mit, weil seine eigene transition-Regel unten sonst die Dauer überschreibt. */ .button-tab:active, .button-tab.floating-cta:active { transform: scale(var(--press)); transition-duration: var(--t-press); transition-timing-function: ease-out; } /* Floating Button: Lage und Schatten aus .floating-cta (style.css, --shadow-2, als freigestelltes Objekt nach DESIGN.md Regel 8 erlaubt), Optik von oben. Die Überblendung beim Ein- und Ausblenden bleibt. */ .button-tab.floating-cta { height: auto; box-shadow: var(--shadow-2); transition: transform var(--t), background-color var(--t), opacity var(--t), visibility var(--t); } /* Die rechte Karte fuellt die Hoehe der linken Spalte. */ .process-board .process-stance--feature { margin: 0; min-height: 0; height: 100%; } /* Ohne Skript laeuft nichts und klappt nichts: alle vier Beschreibungen stehen offen, damit kein Inhalt an JavaScript haengt (D10). */ html:not(.js) .process-step-detail { grid-template-rows: 1fr; opacity: 1; } html:not(.js) .process-step-progress { display: none; } /* Bewegung aus: kein Selbstlauf, der Balken steht voll, nichts klappt. */ /* Bewegung aus: das Skript startet den Durchlauf gar nicht erst. Damit misst die Fortschrittspille eine Zeit, die nicht laeuft, und waere in jedem Zustand irrefuehrend, leer wie voll. Sie geht deshalb weg, genau wie im Fall ohne JavaScript. Das Auf- und Zuklappen bleibt, springt aber. */ @media (prefers-reduced-motion: reduce) { .process-step-progress { display: none; } .process-step-detail { transition: none; } } /* Einspaltig ab 980 px: die rechte Karte ruecht unter die Schritte. */ @media (max-width: 980px) { .process-board { grid-template-columns: 1fr; } /* Einspaltig ist die Karte breit, die Absaetze brauchen weniger Zeilen. Die Reserve waere hier nur Leerraum. */ .process-step-detail-inner > p { min-height: 0; } } /* -------------------------------------------------------------------------- Prozess-Illustration: Foto, Milchglas und gelieferte AVIF-Bilder (2026-09-18). Die Scheibe bleibt beim Tafelwechsel stehen. Ihr Blur liegt außerhalb der überblendeten Panels: opacity/filter an einem Vorfahren würden den Zugriff auf das Hintergrundbild als Backdrop begrenzen. -------------------------------------------------------------------------- */ .process-board .process-stance--feature { padding: 48px clamp(24px, 4vw, 64px); min-width: 0; border: 0; border-radius: var(--r-xl); /* Helle Grundfläche passend zur Schwarzweiß-Waldlandschaft. */ background: var(--paper); } /* Das Foto beginnt tiefer, darüber setzt sich sein Himmelgrau fort. Die Glasebene und die Abmessungen der Karte bleiben an ihrer Position. */ .process-board .process-stance--feature::after { content: ''; position: absolute; inset: clamp(28px, 4vw, 56px) 0 0; z-index: -2; background: url('../../assets/texture/tree-landscape.webp') center top / cover no-repeat; pointer-events: none; } /* Mehr Helligkeitsunterschiede im Foto geben dem Glas Tiefe. */ .process-board .process-stance--feature::before { background: linear-gradient(150deg, rgba(16,17,19,.08), transparent 55%, rgba(16,17,19,.24)); } .process-stance--feature .process-glass { position: relative; width: 100%; max-width: 660px; margin: auto; /* Die gelieferten Bilder enthalten bereits einen transparenten Saum. */ padding: 0; /* Unsichtbarer Rahmen erhält die bisherigen Abmessungen ohne Haarlinie. */ border: 1px solid transparent; border-radius: var(--r-xl); box-shadow: 0 24px 48px -16px rgba(16,17,19,.35), 0 4px 12px rgba(16,17,19,.08); color: var(--ink); } .process-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; /* Eine dünne Lichtschicht statt gleichmäßig deckender weißer Farbe. Der kleinere Blur erhält die großen Konturen der Landschaft. */ background: radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.20), transparent 100%), linear-gradient(135deg, rgba(255,255,255,.01), rgba(255,255,255,.01) 52%, rgba(255,255,255,.01)); -webkit-backdrop-filter: blur(14px) saturate(1.2) brightness(1.08); backdrop-filter: blur(10px) saturate(1.2) brightness(1); pointer-events: none; } .process-glass > * { position: relative; } .js .process-stance--feature .process-glass .process-panel { grid-area: 1 / 1; min-width: 0; } .process-tab { display: block; width: 100%; height: auto; } /* Heller Ersatz, falls ein Browser keinen Backdrop-Blur unterstützt. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .process-glass::before { background: rgba(255,255,255,.92); } } /* Derselbe Ersatz bei weniger Transparenz und bei mehr Kontrast, dort zusätzlich mit sichtbarem Rand (2026-10-13, Skill apple-design, wie Kapitel 14 in style.css). */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .process-glass::before { background: rgba(255,255,255,.92); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { .process-stance--feature .process-glass { border-color: var(--line-strong); } } @media (max-width: 980px) { .process-board .process-stance--feature { min-height: 520px; padding: 42px; } } @media (max-width: 640px) { .process-board .process-stance--feature { min-height: 0; padding: 28px 14px; } .process-stance--feature .process-glass { padding: 0; } } /* Bewegung aus: css/style.css drosselt unter prefers-reduced-motion die animation- und transition-duration, aber nicht die Verzoegerung. Ohne diese Zeile bliebe die ausgehende Tafel 250 ms lang auf visible stehen, wenn auch durchsichtig. */ @media (prefers-reduced-motion: reduce) { .js .process-stance--feature .process-panel[hidden] { transition-delay: 0s; } } /* -------------------------------------------------------------------------- Variante "rows": vier Zeilen mit Titel und Satz, ohne Skript Nur work-zone.html, Sektion Ablauf (DEV-1667). Ausgewählt aus zehn Entwürfen als Nummer 9 (2026-11-05), ohne Knopf und seit demselben Tag ohne das Vorschaubild rechts. Löst die Variante "split" ab. Alles ist gleichzeitig sichtbar, nichts klappt auf. Eigene Klassen statt .process-grid und .process-step, sonst greifen Raster, Trennlinien und Mindesthöhen aus Block 1, 10 und 11. Je Zeile links der Titel (heading-s, 700), rechts der Satz (.body-m). Zeilen durch 1 px --line getrennt, unten abgeschlossen. Spalten 3 : 6 mit 32 px Abstand, senkrecht mittig, der Titel mindestens 170 px, sonst bräche "Übersichtlich" unter 1200 px um. 36 px Polster oben und unten halten die Zeilen so hoch wie im gewählten Entwurf mit Bild (rund 120 px). Der Satz läuft bis 85 % seiner Spalte, nicht bis an den Rand (2026-11-05). Bis 980 px 24 px Abstand, bis 640 px der Satz unter dem Titel über die volle Breite und 24 px Polster. -------------------------------------------------------------------------- */ .process-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); } .process-row { display: grid; grid-template-columns: minmax(170px, 3fr) minmax(0, 6fr); gap: 32px; align-items: center; padding: 36px 0; border-top: 1px solid var(--line); } .process-row-title { margin: 0; font-weight: 700; } .process-row > p { max-width: 85%; margin: 0; overflow-wrap: anywhere; } @media (max-width: 980px) { .process-row { gap: 24px; } } @media (max-width: 640px) { .process-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; } .process-row > p { max-width: none; } } /* -------------------------------------------------------------------------- Feature-Flag: Sektion 6 abschalten (Weisung 2026-10-07) -------------------------------------------------------------------------- Schalter ist die Klasse ff-arbeitsweise-aus am von index.html und work-zone.html. Sie steht dort, nicht hier, damit der Schalter an einer Stelle je Seite sichtbar ist und nicht im CSS gesucht werden muss. Einschalten, also die Sektion wieder zeigen: die Klasse aus den zwei html-Tags entfernen. Diese Datei bleibt dabei unberuehrt. Was verschwindet: die Sektion selbst (#arbeitsweise, "Beratung, die auch Nein sagt.") jeder Link darauf, also Kopfzeile, mobiles Menue und Footer, je zweimal drei Der Footer-Link steht bewusst mit drin: Er zeigt auf einen Anker, den es dann nicht mehr gibt, und wuerde ins Leere springen. display: none und nicht nur visuell verstecken (Weisung "Nicht visible"): So ist die Sektion auch fuer Screenreader und die Tastatur weg, nicht nur fuer das Auge. js/bausteine/prozess-raster.js bleibt eingebunden und laeuft an, findet sein Raster aber nie im Sichtfeld, startet also keine Uhr. Das kostet nichts und bleibt deshalb stehen, damit das Flag ohne zweite Aenderung umlegbar ist. -------------------------------------------------------------------------- */ .ff-arbeitsweise-aus #arbeitsweise, .ff-arbeitsweise-aus a[href$="#arbeitsweise"] { display: none; }