/* ============================================================ FALLSTUDIE — der Baustein, den Ruben aus A, B und C gewaehlt hat (Variante A, Phasenleiste). Stand 16.08.2026, v21. SELBSTTRAGEND. Das ist der Kern dieser Datei: sie greift auf KEINE fremde Klasse und KEIN fremdes Token zu. Eine
plus diese Datei plus assets/fall.js ergibt ueberall dasselbe Bild — auf der Startseite (die ihr eigenes Vokabular hat und .wr/.fr/.kick gar nicht kennt), auf den Leistungsseiten, in einem leeren Dokument, und spaeter in einer isolierten OnePage-Section. Wer hier eine Regel ergaenzt: NICHTS von aussen lesen. Farben erben mit Fallback, alles andere steht selbst drin. Die vier Regeln aus den Abstimmungsrunden, nicht neu verhandeln: 1. EIN Seitenverhaeltnis pro Projekt, und JEDES Bild des Projekts hat genau dieses. Sonst stehen graue Raender neben dem Bild ("sieht uebelst billig aus"). Steuerung ueber --ar. Seit v30 fuellt object-fit:cover die Buehne randlos, graue Raender kann es also gar nicht mehr geben. Dafuer wird beschnitten, wenn Bild und --ar auseinandergehen. Der Ausschnitt laesst sich pro Strecke ueber --pos verschieben. 1b. ALLE Fallstudien einer Seite sind GLEICH HOCH. Ruben v29: "Treppe riesig, Dachgeschoss klein, Boden gross, tut im Auge weh beim Durchscrollen." Zielwert ist eine Buehnenhoehe von 560 px bei 1440 px Viewport. Erreicht wird sie ueber --col, nicht ueber eine feste Hoehe (die wuerde bei schmalen Fenstern uebermaessig beschneiden): hochkant + Video --ar:4/5 --col:41% quer --ar:1/1 --col:50.7% Wer eine neue Fallstudie baut: diese Paare uebernehmen und danach die Buehnenhoehen nachmessen, nicht schaetzen. 2. Die Bedienung sitzt IM Rahmen, exakt so breit wie das Bild. Nichts haengt darunter im Freien. 3. Das Ergebnis hebt sich durch die FORM ab, nicht durch Groesse. Kurze Punkte statt Fliesstext. Kein blauer Strich daneben, keine groessere Schrift, beides wurde abgelehnt. 4. Der Rahmen ist IMMER weiss, auch auf dunkler Flaeche. Deshalb bleibt die Bedienung darin IMMER dunkel. Eine Umfaerbung auf Dunkel ergab weisse Schrift auf weissem Grund, Kontrast 1.00, auf zwei Sektionen komplett unsichtbar. ============================================================ */ .fall{ /* Farben erben, wenn die Seite sie hat, sonst Hausfarbe. --f-ease erbt BEWUSST NICHT: --ease heisst auf der Startseite cubic-bezier(.6,.05,.2,1) und auf den Leistungsseiten cubic-bezier(.2,.75,.2,1). Die Ueberblendung soll ueberall gleich sein, also steht die Kurve hier fest. */ --f-navy:var(--navy,#0a1a30); --f-blue:var(--blue,#1c4c9c); --f-sky:var(--sky,#8fb6e8); --f-ink:var(--ink,#14202c); --f-ink-80:var(--ink-80,#2e3b52); --f-wrap:var(--wrap,1200px); --f-ease:cubic-bezier(.2,.75,.2,1); position:relative; padding:clamp(32px,3.4vw,50px) 0; background:#fff; color:var(--f-ink); font-family:Inter,system-ui,-apple-system,sans-serif; overflow:clip; /* Sicherheitsnetz mobil. clip statt hidden, weil hidden auf Vorfahren position:sticky killt. */ } /* Rand der GRUPPE. Innen stehen mehrere Fallstudien eng gestapelt, nach aussen zu den Nachbarsektionen atmet sie. */ .fall.f-top{padding-top:clamp(56px,6vw,86px)} .fall.f-bot{padding-bottom:clamp(56px,6vw,86px)} /* Dunkle Fassung. Haengt an .is-dark und NICHT an .on-navy oder .s-navy — die gibt es auf der Startseite nicht. */ .fall.is-dark{background:var(--f-navy);color:#fff} /* ---------- Reset, nur innerhalb von .fall ---------- Die Startseite hat keinen globalen button-Reset (nur .qa button), ohne das hier rendern Phasenleiste und Pfeile dort mit UA-Rahmen und Systemschrift. MUSS vor .f-rail button / .f-switch button stehen, sonst frisst padding:0 deren Polster. */ .fall button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} .fall img{display:block;max-width:100%} .fall :focus-visible{outline:2px solid var(--f-blue);outline-offset:3px} .fall.is-dark :focus-visible{outline-color:var(--f-sky)} /* ---------- Container ---------- */ .fall .f-wr{max-width:var(--f-wrap);margin:0 auto;padding:0 26px} .fall .f-in{max-width:1180px;margin:0 auto} /* Zwei Spalten. --col wird pro Projekt gesetzt, weil ein hochkantes Projekt anders baut als ein querformatiges. Die Werte sind gemessen, nicht geschaetzt: bei ihnen enden beide Spalten gleich hoch. */ .fall .f-split{display:grid;grid-template-columns:var(--col,36%) 1fr; gap:clamp(26px,3.4vw,50px);align-items:start} .fall .f-split > *{min-width:0} /* Ein hochkantes Video baut zwangslaeufig hoeher als drei Textbloecke. Statt die Spalte kuenstlich zu strecken steht der Text mittig, dann verteilt sich die Luft oben UND unten statt als Loch am Fuss. */ .fall .f-split.f-mid{align-items:center} /* ---------- Rahmen (Passepartout) ---------- Weisse Fassung mit tiefem Schatten. Auf Dunkel bleibt sie weiss, nur der Schatten wird schwarzbasiert, sonst blitzt er blau. Ein Winkel-Marker rechts oben: zwei blaue Haarlinien, Aufmass- Zeichen, rein geometrisch. Kein Bildchen. */ .fall .f-frame{position:relative;display:block;background:#fff;padding:12px; box-shadow:0 34px 64px -30px rgba(10,26,48,.45);transition:box-shadow .45s var(--f-ease)} .fall .f-frame:hover{box-shadow:0 46px 84px -30px rgba(10,26,48,.55)} .fall.is-dark .f-frame{box-shadow:0 34px 64px -28px rgba(0,0,0,.85)} .fall .f-frame::before,.fall .f-frame::after{content:"";position:absolute; background:var(--f-blue);pointer-events:none;top:-14px;right:-14px} .fall .f-frame::before{width:64px;height:1.5px} .fall .f-frame::after{width:1.5px;height:64px} .fall.is-dark .f-frame::before,.fall.is-dark .f-frame::after{background:var(--f-sky)} /* ---------- Buehne ---------- */ .fall .f-stage{position:relative;overflow:hidden;background:var(--f-navy);aspect-ratio:var(--ar,4/5)} .fall .f-layers{position:absolute;inset:0} .fall .f-layers img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:var(--pos,50% 50%); opacity:0;transition:opacity .38s var(--f-ease)} .fall .f-layers img.is-on{opacity:1} .fall .f-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; box-shadow:inset 0 0 100px rgba(3,10,20,.55)} /* Pfeile. Immer sichtbar, nicht erst bei Hover. Ohne sie sieht man dem Bild nicht an, dass es weitergeht. */ .fall .f-arrows{position:absolute;inset:0;z-index:4;display:flex;align-items:center; justify-content:space-between;pointer-events:none} .fall .f-arrows button{pointer-events:auto;width:42px;height:42px;display:grid;place-items:center; background:rgba(8,20,38,.62);color:#fff;transition:background .2s} .fall .f-arrows button:hover{background:var(--f-blue)} .fall .f-arrows svg{width:18px;height:18px} /* ---------- Phasenleiste ---------- Die Phasen fassen mehrere Bilder zusammen. Die Pfeile laufen durch ALLE Bilder, die Leiste zeigt nur, in welcher Phase man gerade ist. So faellt kein Bild weg, nur damit die Phasenzahl aufgeht. Hiess bis v20 .rail und sass in einem Wrapper namens .nav — das kollidierte mit dem klebenden Seitenkopf aus _base.css (position:sticky, z-index 90). Der Wrapper ist ersatzlos weg, sein margin-top steht jetzt hier. */ .fall .f-rail{margin-top:12px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr; border-top:2px solid var(--f-navy)} .fall .f-rail button{text-align:left;padding:11px 8px 2px 0;border-top:3px solid transparent; margin-top:-2px;transition:border-color .25s var(--f-ease)} .fall .f-rail button b{display:block;font:800 11px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--f-ink-80)} .fall .f-rail button em{display:block;font-style:normal;margin-top:6px;font:700 12px/1.2 Inter,sans-serif;color:var(--f-ink-80)} .fall .f-rail button[aria-current="true"]{border-top-color:var(--f-blue)} .fall .f-rail button[aria-current="true"] b{color:var(--f-blue)} .fall .f-rail button[aria-current="true"] em{color:var(--f-navy)} .fall .f-rail button:hover em{color:var(--f-navy)} /* ---------- Textspalte ---------- Hierarchie kommt aus Groesse und Position, nicht aus blasser Farbe. Graue Sub-Texte sind der groesste KI-Verraeter. Die H2 ist explizit gepinnt und erbt NICHT von der Seite: die Leistungsseiten setzen 800/-.03em, die Startseite 700/-.02em. Ohne das hier saehe derselbe Baustein auf beiden anders aus. */ .fall .f-txt h2{margin:10px 0 0;max-width:19ch; font:800 clamp(1.55rem,2.8vw,2rem)/1.06 'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.03em;color:var(--f-navy)} .fall.is-dark .f-txt h2{color:#fff} /* Kicker: kurzer Strich plus Versalien. Blau auf hell, sky auf dunkel. */ .fall .f-kick{display:inline-flex;align-items:center;gap:12px; font:700 11.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--f-blue)} .fall .f-kick::before{content:"";width:30px;height:2px;background:var(--f-blue)} .fall.is-dark .f-kick{color:var(--f-sky)} .fall.is-dark .f-kick::before{background:var(--f-sky)} .fall .f-lbl{display:block;font:800 11.5px/1 Inter,sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--f-blue);margin-bottom:9px} .fall .f-blk{margin-top:clamp(16px,1.8vw,22px)} .fall .f-blk p{margin:0;font-size:15.5px;line-height:1.62;color:var(--f-ink);max-width:58ch} .fall .f-erg{margin-top:clamp(18px,2vw,26px)} /* Ergebnis-Liste. Marker ist derselbe kurze Strich wie beim Kicker, also Hausstil, kein Haekchen-Icon (Haekchenlisten wurden bei den Leistungsseiten als KI-Look abgelehnt). */ .fall .f-list{margin:0;padding:0;list-style:none} .fall .f-list li{position:relative;padding-left:22px;margin-top:10px;font-size:15.5px; line-height:1.5;color:var(--f-ink)} .fall .f-list li:first-child{margin-top:0} .fall .f-list li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:2px;background:var(--f-blue)} .fall .f-list b{font-weight:700;color:var(--f-navy)} /* Verweis auf die ausfuehrliche Fassung. Nur auf der Startseite in Gebrauch. Textlink mit Pfeil, kein Button: es ist ein Weiterlesen, kein Handlungsaufruf. */ .fall .f-more{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(18px,2vw,24px); font:700 14px/1.35 Inter,sans-serif;color:var(--f-blue);text-decoration:none; border-bottom:2px solid var(--f-blue);padding-bottom:3px;transition:gap .25s var(--f-ease)} .fall .f-more:hover{gap:14px} .fall .f-more svg{width:15px;height:15px;flex:0 0 auto} .fall.is-dark .f-more{color:#fff;border-bottom-color:var(--f-sky)} /* ---------- auf Dunkel gespiegelt ---------- */ .fall.is-dark .f-lbl{color:var(--f-sky)} .fall.is-dark .f-blk p{color:#fff} .fall.is-dark .f-list li{color:#fff} .fall.is-dark .f-list li::before{background:var(--f-sky)} .fall.is-dark .f-list b{color:#fff} /* KEINE Umfaerbung fuer Phasenleiste und Video-Schalter: die sitzen IM weissen Rahmen, nicht auf der Sektionsflaeche. Weisse Schrift darauf war Kontrast 1.00, also unsichtbar. Der Rahmen ist ueberall weiss, also bleibt die Bedienung darin ueberall dunkel. */ @media (max-width:900px){ .fall .f-split{grid-template-columns:1fr} .fall .f-txt{margin-top:24px} .fall .f-txt h2{max-width:none} .fall .f-rail button em{font-size:11.5px} /* Die Winkel-Marker sitzen bei -14px. Mobil ist das Polster nur noch 26px, dann ragen sie in die Sektionskante. */ .fall .f-frame::before,.fall .f-frame::after{display:none} } /* ============================================================ VIDEO-FALLSTUDIE Gleicher Aufbau wie die Foto-Fallstudie, nur haelt die Buehne Videos. Alle sechs Aufnahmen stehen hochkant. Achtung: ffprobe meldet fuer vier davon 1024x576, sie tragen aber eine Drehung, angezeigt werden 576x1024. Nach den Rohmassen gehen heisst Querformat bauen und Hochformat bekommen. Ton ist aus den DATEIEN entfernt, nicht nur stummgeschaltet. Nur das sichtbare Video laedt, die anderen stehen auf preload="none" und werden erst beim Umschalten geholt. ============================================================ */ .fall .f-vstage{position:relative;background:#000;overflow:hidden;aspect-ratio:var(--ar,4/5)} .fall .f-vstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .3s var(--f-ease)} .fall .f-vstage video.is-on{opacity:1} /* Der Schalter muss wie ein Schalter aussehen, nicht wie eine Beschriftung. Deshalb Rahmen, Trennlinien und eine gefuellte aktive Haelfte. Sitzt wie die Phasenleiste im weissen Rahmen, also auch hier keine Umfaerbung auf Dunkel. */ .fall .f-switch{display:grid;grid-auto-flow:column;grid-auto-columns:1fr; margin-top:12px;border:1.5px solid var(--f-navy)} .fall .f-switch button{display:flex;align-items:center;justify-content:center;gap:8px; padding:11px 6px;font:800 11px/1 Inter,sans-serif;letter-spacing:.1em; text-transform:uppercase;color:var(--f-navy);background:#fff; transition:background .2s,color .2s} .fall .f-switch button + button{border-left:1.5px solid var(--f-navy)} /* Ab DREI Schaltern wird es eng. grid-auto-columns:1fr verteilt zwar gleichmaessig, aber Grid-Kinder haben min-width:auto und schrumpfen nicht unter ihre Inhaltsbreite: bei vier Schaltern brauchten sie zusammen 344 px in einem 320 px breiten Rahmen, der letzte ragte raus und "Fertig" stand ohne Polster an der Kante. Gemessen, nicht geschaetzt. Der Punkt entfaellt hier, die gefuellte aktive Haelfte zeigt den Zustand ohnehin deutlicher. nth-last-child(n+3) trifft alle Schalter, sobald es mindestens drei gibt. */ .fall .f-switch button:nth-last-child(n+3), .fall .f-switch button:nth-last-child(n+3) ~ button{ letter-spacing:.03em;padding:11px 4px;gap:0} .fall .f-switch button:nth-last-child(n+3) .f-dot, .fall .f-switch button:nth-last-child(n+3) ~ button .f-dot{display:none} .fall .f-switch button:hover{background:#eceff4} .fall .f-switch button[aria-current="true"]{background:var(--f-blue);color:#fff} .fall .f-switch button[aria-current="true"]:hover{background:var(--f-blue)} .fall .f-switch .f-dot{width:7px;height:7px;background:currentColor;flex:0 0 auto;opacity:.4} .fall .f-switch button[aria-current="true"] .f-dot{opacity:1} @media (max-width:900px){ .fall .f-switch button{font-size:10.5px;gap:6px} } /* ############################################################ LAYOUT-VARIANTEN — Abstimmungsrunde 19.08.2026 ############################################################ Anlass, Rubens Wortlaut: "die Leistungen und Fallstudie sahen fast gleich aus, Bild links Text rechts so meinte ich das." Gemessen: alle 11 Fallstudien auf allen fuenf Seiten stehen identisch (.f-media zuerst = Bild links). Auf /boeden laufen drei am Stueck so. Und die Grundform ist dieselbe wie beim Leistungsblock darueber: zwei Spalten, weisses Passepartout, Kicker + H2 + Text daneben. Drei Varianten zur Wahl. Jede haengt an EINER Klasse auf der Sektion, damit sich das Ausrollen auf die 11 Stellen auf einen Klassennamen reduziert. Die Selbsttragung gilt weiter: nichts hier liest eine fremde Klasse oder ein fremdes Token. Nur --f-*. ############################################################ */ /* ============================================================ A — KONTAKTBOGEN .f-lay-bogen Die urspruengliche Idee war ein seitenbreites Kinoband. Die Messung hat sie gekippt: terp-, gb- und trp- liegen alle in 4:5 HOCHKANT vor und laufen heute bei --ar:4/5 voellig beschnittfrei. Ein 2:1-Band haette von jedem dieser Fotos rund 62 % weggeschnitten, und die Alternative (Bild mittig, Fond daneben) verbietet Regel 1 ausdruecklich. Also andersherum: die volle Breite wird nicht mit EINEM grossen Bild gefuellt, sondern mit ALLEN Phasenbildern nebeneinander. Kein Beschnitt, und man sieht den Ablauf auf einen Blick statt ihn durchklicken zu muessen. Mit einem Leistungsblock hat das keine Form mehr gemeinsam. Kein Passepartout: vier weisse Rahmen nebeneinander waeren unruhig. Die Beschriftung sitzt deshalb AUSSERHALB des Rahmens auf der Sektionsflaeche und muss auf Dunkel umgefaerbt werden (Regel 4 greift hier nicht, weil es keinen weissen Rahmen gibt). ============================================================ */ .fall.f-lay-bogen .f-head{max-width:760px;margin:0 0 clamp(26px,3vw,40px)} .fall.f-lay-bogen .f-head h2{margin:12px 0 0;max-width:24ch; font:800 clamp(1.75rem,3.2vw,2.6rem)/1.04 'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.03em;color:var(--f-navy)} .fall.f-lay-bogen.is-dark .f-head h2{color:#fff} /* Spaltenzahl kommt aus dem Markup ueber --cols. ⚠️ NICHT repeat(var(--n),...) schreiben: repeat() akzeptiert in der Zaehlerposition kein var(). Die Deklaration wird dann komplett ungueltig, das Grid faellt auf EINE Spalte zurueck und stapelt alles untereinander. Gemessen: .f-bogen war damit 11707 px hoch statt 650. Deshalb steht der ganze Spaltenausdruck in --cols. Zweiter Grund fuer diesen Weg: der Handy-Breakpoint unten setzt grid-template-columns direkt und gewinnt so gegen den Inline-Wert im Markup (der setzt ja nur die Variable, nicht die Eigenschaft). minmax(0,1fr) statt 1fr, sonst schrumpfen Grid-Kinder nicht unter ihre Inhaltsbreite. */ .fall.f-lay-bogen .f-bogen{display:grid; grid-template-columns:var(--cols,repeat(4,minmax(0,1fr))); gap:clamp(10px,1.3vw,18px)} .fall.f-lay-bogen .f-tile{margin:0} .fall.f-lay-bogen .f-tstage{position:relative;overflow:hidden; background:var(--f-navy);aspect-ratio:var(--ar,4/5)} .fall.f-lay-bogen .f-tstage img, .fall.f-lay-bogen .f-tstage video{position:absolute;inset:0; width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)} /* Dieselbe Tiefe wie auf der Buehne, damit die Kacheln nicht flach wirken. */ .fall.f-lay-bogen .f-tstage::after{content:"";position:absolute;inset:0; pointer-events:none;box-shadow:inset 0 0 70px rgba(3,10,20,.5)} /* Beschriftung: Nummer und Phase, getrennt durch eine Haarlinie in Bildbreite. Das ist die Phasenleiste, nur pro Kachel. */ /* Die Beschriftung traegt die Phase nur dort, wo sie WECHSELT. Bei neun Bildern stuende sonst dreimal "Rueckbau" untereinander. Die Folgekacheln behalten die Nummer und eine blasse Linie, damit sichtbar bleibt, dass sie zur selben Phase gehoeren. min-height haelt die Zeilen im Raster auf gleicher Grundlinie. */ .fall.f-lay-bogen .f-tile figcaption{display:block;margin-top:10px; padding-top:9px;border-top:2px solid var(--f-navy);min-height:44px} .fall.f-lay-bogen .f-tile.f-cont figcaption{border-top-color:rgba(20,32,44,.2)} .fall.f-lay-bogen.is-dark .f-tile.f-cont figcaption{border-top-color:rgba(255,255,255,.2)} .fall.f-lay-bogen .f-tile figcaption b{display:block; font:800 11px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--f-blue)} .fall.f-lay-bogen .f-tile.f-cont figcaption b{color:var(--f-ink-80)} .fall.f-lay-bogen.is-dark .f-tile.f-cont figcaption b{color:rgba(255,255,255,.6)} .fall.f-lay-bogen .f-tile figcaption em{display:block;font-style:normal;margin-top:6px; font:700 12.5px/1.25 Inter,sans-serif;color:var(--f-navy)} .fall.f-lay-bogen.is-dark .f-tile figcaption{border-top-color:rgba(255,255,255,.34)} .fall.f-lay-bogen.is-dark .f-tile figcaption b{color:var(--f-sky)} .fall.f-lay-bogen.is-dark .f-tile figcaption em{color:#fff} /* Zwei hochkante Clips fuellen die volle Breite nicht sinnvoll aus, deshalb bekommen sie einen eigenen Korridor. 9/16 ist ihr echtes Verhaeltnis, in der 2-Spalten-Fassung laufen sie auf 4/5 und werden dabei beschnitten. */ .fall.f-lay-bogen .f-bogen.f-vid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:660px;margin-inline:auto} /* Fuss: Ausgangslage links, Ergebnis rechts, ueber die volle Breite. Die Trennlinie oben bindet ihn an die Bildzeile. */ .fall.f-lay-bogen .f-under{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr); gap:clamp(26px,4vw,64px);margin-top:clamp(30px,3.6vw,46px); padding-top:clamp(24px,2.6vw,34px);border-top:1px solid rgba(20,32,44,.16)} .fall.f-lay-bogen.is-dark .f-under{border-top-color:rgba(255,255,255,.2)} .fall.f-lay-bogen .f-under .f-blk:first-child{margin-top:0} .fall.f-lay-bogen .f-under .f-erg{margin-top:0} @media (max-width:900px){ /* Fuenf Hochkant-Kacheln in 390 px waeren 70 px breit. Ab hier zwei Zeilen, die Beschriftung bleibt lesbar. */ .fall.f-lay-bogen .f-bogen{grid-template-columns:repeat(2,minmax(0,1fr))} .fall.f-lay-bogen .f-bogen.f-vid{max-width:none} .fall.f-lay-bogen .f-under{grid-template-columns:1fr;gap:24px} } /* ============================================================ B — WECHSEL .f-lay-wechsel (+ .f-alt fuer die Gegenseite) Die schwaechste der drei, bewusst mitgebaut als Vergleichs- massstab. Ruben vorab: "wuerde ich nicht empfehlen, weil dann sieht es genauso aus vom Layout wie direkt oben drueber die Leistungssektionen." Zwei Eingriffe: die Seiten wechseln von Fallstudie zu Fallstudie, und das Passepartout faellt weg (Bild randabfallend). ⚠️ Damit sitzt die Phasenleiste zum ersten Mal auf der Sektionsflaeche statt im weissen Rahmen. Auf .is-dark waere sie navy auf navy — genau das Muster, das in diesem Projekt schon dreimal zugeschlagen hat. Regel 4 des Bausteins gilt hier also nicht, die Leiste MUSS umgefaerbt werden. ============================================================ */ .fall.f-lay-wechsel .f-split{grid-template-columns:1fr var(--col,41%)} .fall.f-lay-wechsel .f-media{order:2} .fall.f-lay-wechsel .f-txt{order:1} /* .f-alt dreht zurueck auf Bild links, damit sich die Seiten ueber mehrere Fallstudien hinweg abwechseln. */ .fall.f-lay-wechsel.f-alt .f-split{grid-template-columns:var(--col,41%) 1fr} .fall.f-lay-wechsel.f-alt .f-media{order:1} .fall.f-lay-wechsel.f-alt .f-txt{order:2} /* Randabfallend: Rahmen weg, Schatten bleibt. Sonst steht das Bild ohne jede Tiefe auf der Flaeche. */ .fall.f-lay-wechsel .f-frame{background:none;padding:0} .fall.f-lay-wechsel .f-frame::before{top:-11px;right:-11px} .fall.f-lay-wechsel .f-frame::after{top:-11px;right:-11px} /* Umfaerbung der Bedienung, siehe Warnung oben. */ .fall.f-lay-wechsel.is-dark .f-rail{border-top-color:rgba(255,255,255,.38)} .fall.f-lay-wechsel.is-dark .f-rail button b{color:var(--f-sky)} .fall.f-lay-wechsel.is-dark .f-rail button em{color:rgba(255,255,255,.82)} .fall.f-lay-wechsel.is-dark .f-rail button[aria-current="true"]{border-top-color:var(--f-sky)} .fall.f-lay-wechsel.is-dark .f-rail button[aria-current="true"] b, .fall.f-lay-wechsel.is-dark .f-rail button[aria-current="true"] em, .fall.f-lay-wechsel.is-dark .f-rail button:hover em{color:#fff} .fall.f-lay-wechsel.is-dark .f-switch{border-color:rgba(255,255,255,.55)} .fall.f-lay-wechsel.is-dark .f-switch button{background:transparent;color:#fff} .fall.f-lay-wechsel.is-dark .f-switch button + button{border-left-color:rgba(255,255,255,.55)} .fall.f-lay-wechsel.is-dark .f-switch button:hover{background:rgba(255,255,255,.12)} .fall.f-lay-wechsel.is-dark .f-switch button[aria-current="true"]{background:var(--f-sky);color:var(--f-navy)} @media (max-width:900px){ .fall.f-lay-wechsel .f-split, .fall.f-lay-wechsel.f-alt .f-split{grid-template-columns:1fr} .fall.f-lay-wechsel .f-media, .fall.f-lay-wechsel.f-alt .f-media{order:1} .fall.f-lay-wechsel .f-txt, .fall.f-lay-wechsel.f-alt .f-txt{order:2} } /* ============================================================ C — ACHSE .f-lay-achse Die Phasenleiste ist heute ein schmaler Streifen unter dem Bild — das einzige Element, das die Fallstudie inhaltlich vom Leistungsblock unterscheidet, sitzt also als Fussnote da. Hier wird sie zur senkrechten Schiene und traegt die ganze Sektion. Aufbau: Schiene | Bild | Kopf, darunter der Fuss ueber beide Inhaltsspalten. Drei Zonen plus Fuss, das kann ein Leistungsblock nicht. Die Bedienung laeuft OHNE Aenderung an fall.js weiter: das Skript sucht [data-jump] und .f-stage .f-layers img innerhalb des [data-gal]-Elements. data-gal wandert dafuer im Markup von .f-media auf .f-achse. ============================================================ */ .fall.f-lay-achse .f-achse{display:grid; grid-template-columns:auto minmax(0,var(--col,42%)) minmax(0,1fr); gap:0 clamp(22px,3vw,44px)} /* ---- die Schiene ---- */ /* grid-row:1 und align-self:start, NICHT span 2. Gemessen am ersten Rendering: mit span 2 reichte die Schiene bis unter den Fliesstext und die Linie lief 400 px ins Leere, weil die Knoten oben zusammensitzen. Jetzt ist die Schiene genau so hoch wie ihre Knoten. */ .fall.f-lay-achse .f-vrail{grid-row:1;align-self:start;position:relative; display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px); padding-right:clamp(16px,2vw,26px)} /* Die Linie laeuft vom ersten bis zum letzten Knoten. */ .fall.f-lay-achse .f-vrail::before{content:"";position:absolute; top:9px;bottom:9px;right:0;width:2px;background:rgba(20,32,44,.18)} .fall.f-lay-achse.is-dark .f-vrail::before{background:rgba(255,255,255,.24)} .fall.f-lay-achse .f-vrail button{position:relative;text-align:right; padding-right:clamp(16px,2vw,26px);margin-right:calc(-1 * clamp(16px,2vw,26px)); transition:opacity .25s var(--f-ease)} /* Der Knoten auf der Linie. Quadratisch, weil auf dieser Seite jeder Radius auf 0 steht. */ .fall.f-lay-achse .f-vrail button::after{content:"";position:absolute; right:-4px;top:7px;width:10px;height:10px;background:rgba(20,32,44,.28); transition:background .25s var(--f-ease),transform .25s var(--f-ease)} .fall.f-lay-achse.is-dark .f-vrail button::after{background:rgba(255,255,255,.34)} .fall.f-lay-achse .f-vrail button b{display:block;font:800 11px/1 Inter,sans-serif; letter-spacing:.14em;color:var(--f-ink-80)} .fall.f-lay-achse .f-vrail button em{display:block;font-style:normal;margin-top:5px; font:700 12.5px/1.2 Inter,sans-serif;color:var(--f-ink-80);white-space:nowrap} .fall.f-lay-achse.is-dark .f-vrail button b, .fall.f-lay-achse.is-dark .f-vrail button em{color:rgba(255,255,255,.72)} .fall.f-lay-achse .f-vrail button[aria-current="true"]::after{background:var(--f-blue);transform:scale(1.35)} .fall.f-lay-achse .f-vrail button[aria-current="true"] b{color:var(--f-blue)} .fall.f-lay-achse .f-vrail button[aria-current="true"] em{color:var(--f-navy)} .fall.f-lay-achse.is-dark .f-vrail button[aria-current="true"]::after{background:var(--f-sky)} .fall.f-lay-achse.is-dark .f-vrail button[aria-current="true"] b{color:var(--f-sky)} .fall.f-lay-achse.is-dark .f-vrail button[aria-current="true"] em{color:#fff} .fall.f-lay-achse .f-vrail button:hover em{color:var(--f-navy)} .fall.f-lay-achse.is-dark .f-vrail button:hover em{color:#fff} /* ---- Bild und Kopf nebeneinander, Fuss darunter ---- */ .fall.f-lay-achse .f-amedia{grid-column:2;grid-row:1} .fall.f-lay-achse .f-ahead{grid-column:3;grid-row:1;align-self:center} .fall.f-lay-achse .f-ahead h2{margin:12px 0 0;max-width:20ch; font:800 clamp(1.7rem,3vw,2.45rem)/1.04 'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.03em;color:var(--f-navy)} .fall.f-lay-achse.is-dark .f-ahead h2{color:#fff} /* Der Fliesstext steht in der rechten Spalte NEBEN dem Bild, nicht hier unten. Grund, gemessen am ersten Rendering: neben einem 558 px hohen Bild standen dort nur Kicker und H2, der Rest der Spalte war leer. Unten bleibt allein das Ergebnis, dafuer quer ueber beide Inhaltsspalten und zweispaltig gesetzt. */ .fall.f-lay-achse .f-under{grid-column:2 / span 2;grid-row:2; margin-top:clamp(26px,3vw,38px); padding-top:clamp(22px,2.4vw,32px);border-top:1px solid rgba(20,32,44,.16)} .fall.f-lay-achse.is-dark .f-under{border-top-color:rgba(255,255,255,.2)} .fall.f-lay-achse .f-under .f-erg{margin-top:0} .fall.f-lay-achse .f-under .f-list{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(26px,4vw,58px)} .fall.f-lay-achse .f-under .f-list li:nth-child(2){margin-top:0} /* Der Text neben dem Bild. */ .fall.f-lay-achse .f-ahead .f-blk{margin-top:clamp(18px,2vw,26px)} .fall.f-lay-achse .f-ahead .f-blk p{font-size:15px} @media (max-width:900px){ /* Die Schiene legt sich waagerecht ueber das Bild. Senkrecht frisst sie mobil zu viel Breite. */ .fall.f-lay-achse .f-achse{grid-template-columns:1fr} .fall.f-lay-achse .f-vrail{grid-row:auto;grid-column:1; flex-direction:row;justify-content:space-between;gap:8px; padding:0 0 12px;margin-bottom:16px} .fall.f-lay-achse .f-vrail::before{top:auto;bottom:0;right:0;left:0;width:auto;height:2px} .fall.f-lay-achse .f-vrail button{text-align:left;padding:0 0 12px;margin:0} .fall.f-lay-achse .f-vrail button::after{right:auto;left:0;top:auto;bottom:-4px} .fall.f-lay-achse .f-vrail button em{white-space:normal;font-size:11.5px} .fall.f-lay-achse .f-amedia, .fall.f-lay-achse .f-ahead, .fall.f-lay-achse .f-under{grid-column:1;grid-row:auto} .fall.f-lay-achse .f-ahead{margin-top:20px} .fall.f-lay-achse .f-under .f-list{grid-template-columns:1fr;gap:0} .fall.f-lay-achse .f-under .f-list li:nth-child(2){margin-top:10px} } /* Video in C: der Umschalter wird zur Schiene. Die Klasse .f-switch muss bleiben, weil fall.js genau darauf bindet — die Basis-Optik (Rahmen, Raster, Versalien) wird hier zurueckgenommen. */ .fall.f-lay-achse .f-vrail.f-switch{display:flex;flex-direction:column;border:0;margin-top:0} .fall.f-lay-achse .f-vrail.f-switch button{display:block;background:none;padding:0; font:inherit;letter-spacing:normal;text-transform:none;color:inherit; text-align:right;padding-right:clamp(16px,2vw,26px);margin-right:calc(-1 * clamp(16px,2vw,26px))} .fall.f-lay-achse .f-vrail.f-switch button + button{border-left:0} .fall.f-lay-achse .f-vrail.f-switch button:hover, .fall.f-lay-achse .f-vrail.f-switch button[aria-current="true"]{background:none} .fall.f-lay-achse .f-vrail .f-dot{display:none} /* ============================================================ D — KASTEN .f-lay-kasten (+ .f-alt fuer die Gegenseite) Rubens Einwand nach Runde 1, und er trifft den Kern: "irgendwie zu leer, alles so leer hingeklatscht ohne System, ohne dass es einen Untergrund hat. Bild in einen Container packen und den Text der daneben steht auch, also einen Container, dass es bisschen abgegrenzt ist." Dazu sein zweiter Punkt, der Variante B erledigt: "bloed ist, dass es wieder links rechts links rechts ist. Oben bei den Leistungen ist auch schon Wechsel, genau dasselbe." Er hat recht: wenn die Leistungsbloecke darueber ohnehin die Seite wechseln, ist ein zweites Wechseln kein Unterschied. Der Unterschied kommt woanders her: der Leistungsblock LIEGT auf der Seite, die Fallstudie STEHT in einem Kasten. Runde 2, seine drei Nachforderungen: 1. "aussen rum noch ein bisschen mehr Platz und eine Linie da drum" -> der Hof (.f-in) mit Umrisslinie 2. "diese Haken, diese halb abgeschnittenen Quadrate" -> Winkel-Marker, dasselbe Motiv wie .bcard.plan und .f-frame im Hausstil, hier an zwei diagonalen Ecken 3. "die Bilder duerfen nicht direkt auf dem Weissen liegen, die brauchen noch so eine kleine Umrandung aussen rum" -> das Foto sitzt mit Navy-Polster im Kasten, dazu eine Sky-Haarlinie direkt an der Bildkante 4. Hintergrund "passend zum Thema, nicht so 08/15" -> Bauplan-Raster mit Maskenverlauf. Das ist bereits Hausvokabular (.rast in _v16.css, .bcard.plan im Bento) und thematisch: Aufmass, technische Zeichnung. Hier selbsttragend nachgebaut, weil fall.css nichts von aussen lesen darf. Der Kasten ist IMMER navy, egal ob die Sektion hell oder dunkel ist. Deshalb koennen die Farbregeln hier nicht an .is-dark haengen wie sonst im Baustein, sondern stehen fest. Genau dieses Muster (Element wechselt den Untergrund, behaelt aber seine alte Umfaerbung) hat in diesem Projekt schon dreimal unlesbaren Text erzeugt. ============================================================ */ /* ---- Sektionsgrund: schlicht. ---- Runde 3, Ruben: "mach mal die Quadrate im Hintergrund weg, das sieht mir ein bisschen zu technisch aus, zu sehr nach Agentur." Das Bauplan-Raster ist deshalb ersatzlos gestrichen. Den Untergrund, den er in Runde 2 vermisst hat, liefert der Kasten selbst — dafuer braucht die Flaeche dahinter kein Muster. */ .fall.f-lay-kasten{background:#fff} /* ---- Kein Rahmenwerk aussen herum ---- Runde 4, Ruben: "diese Striche nochmal aussen rum um den Container sehen mir nicht so geil aus, das ist to much, mach das mal wieder weg." Damit sind Hof, Umrisslinie und die Winkel-Marker aus Runde 2 wieder gestrichen. Der Kasten traegt sich ueber seine eigene Kante und den Schatten. Nicht erneut vorschlagen. */ /* ---- Der Kasten selbst ---- */ .fall.f-lay-kasten .f-split{ grid-template-columns:var(--col,41%) 1fr; gap:0;align-items:stretch; background:var(--f-navy); box-shadow:0 42px 78px -34px rgba(10,26,48,.55); overflow:clip} /* clip statt hidden: hidden killt sticky auf Vorfahren */ .fall.f-lay-kasten.is-dark .f-split{box-shadow:0 42px 78px -30px rgba(0,0,0,.8)} .fall.f-lay-kasten .f-split.f-mid{align-items:stretch} /* ---- Foto randlos, weisser Streifen nur unter der Leiste ---- Runde 5, Ruben: "mach mal um das Bild den weissen Rand weg. Vielleicht unten bei Vorher/Rueckbau/Ausgleich den weissen Kasten lassen. Oder beide weg, aber ich glaub das ist zu wenig abgegrenzt." Genau so umgesetzt: das Passepartout um das Foto faellt weg, der weisse Grund bleibt unter der Phasenleiste. Beides wegzunehmen waere tatsaechlich zu wenig — die Leiste stuende dann navy auf navy und muesste umgefaerbt werden, womit sie ihre gewohnte Optik verliert. Das Polster von .f-media zum Kastenrand bleibt, sonst klebt das Foto an der Kante. ⚠️ Die Tuerkis-Haarlinie aus Runde 3 kommt hier NICHT zurueck ("sieht scheisse aus"). Nicht erneut vorschlagen. */ .fall.f-lay-kasten .f-media{align-self:start;padding:clamp(14px,1.5vw,20px)} .fall.f-lay-kasten .f-frame{background:none;padding:0;box-shadow:none} .fall.f-lay-kasten .f-frame:hover{box-shadow:none} .fall.f-lay-kasten .f-frame::before, .fall.f-lay-kasten .f-frame::after{display:none} .fall.f-lay-kasten .f-txt{align-self:center; padding:clamp(28px,3.2vw,46px) clamp(28px,3.2vw,46px) clamp(28px,3.2vw,46px) clamp(10px,1.2vw,16px)} /* ---- Farben im Kasten. Fest, nicht an .is-dark gehaengt. ---- */ .fall.f-lay-kasten .f-txt h2{color:#fff} .fall.f-lay-kasten .f-kick{color:var(--f-sky)} .fall.f-lay-kasten .f-kick::before{background:var(--f-sky)} .fall.f-lay-kasten .f-lbl{color:var(--f-sky)} .fall.f-lay-kasten .f-blk p{color:#fff} .fall.f-lay-kasten .f-list li{color:#fff} .fall.f-lay-kasten .f-list li::before{background:var(--f-sky)} .fall.f-lay-kasten .f-list b{color:#fff} .fall.f-lay-kasten .f-more{color:#fff;border-bottom-color:var(--f-sky)} /* ---- Die Phasenleiste sitzt mittig UNTER dem Bild ---- Runde 4, Ruben: "du sollst es mittig unter das Bild packen, auf den ganzen Kasten gestreckt macht es gar keinen Sinn." Die Ursache des Gequetsches war nicht die Breite, sondern dass die Knoepfe als Raster mit grid-auto-columns:1fr je ein gleich breites Fach bekamen und linksbuendig darin klebten. Deshalb sass "01" auf der Bildkante. Jetzt Flex, Knoepfe so breit wie ihr Text, Gruppe mittig. Farben bleiben die Standardfarben des Bausteins, weil die Leiste seit der Rueckkehr des weissen Passepartouts wieder auf Weiss sitzt. */ .fall.f-lay-kasten .f-rail{display:flex;justify-content:center; gap:clamp(12px,1.6vw,26px); background:#fff;margin-top:0;border-top:0; padding:0 clamp(10px,1.4vw,18px)} .fall.f-lay-kasten .f-rail button{text-align:center;padding:12px 2px 13px; border-top:0;border-bottom:2px solid transparent;margin-top:0} .fall.f-lay-kasten .f-rail button em{white-space:nowrap} .fall.f-lay-kasten .f-rail button[aria-current="true"]{border-bottom-color:var(--f-blue)} /* Der Video-Umschalter braucht denselben weissen Grund, sonst stuende sein Navy-Rahmen unsichtbar auf dem Navy-Kasten. */ .fall.f-lay-kasten .f-switch{background:#fff;margin-top:0;border:0} .fall.f-lay-kasten .f-switch button{background:#fff;color:var(--f-navy)} .fall.f-lay-kasten .f-switch button + button{border-left:1.5px solid var(--f-navy)} .fall.f-lay-kasten .f-switch button:hover{background:#eceff4} .fall.f-lay-kasten .f-switch button[aria-current="true"]{background:var(--f-blue);color:#fff} .fall.f-lay-kasten .f-switch button[aria-current="true"]:hover{background:var(--f-blue)} /* Gegenseite. Nur fuer den Vergleich mitgebaut, siehe Rubens Einwand oben. */ .fall.f-lay-kasten.f-alt .f-split{grid-template-columns:1fr var(--col,41%)} .fall.f-lay-kasten.f-alt .f-media{order:2} .fall.f-lay-kasten.f-alt .f-txt{order:1; padding:clamp(28px,3.2vw,46px) clamp(10px,1.2vw,16px) clamp(28px,3.2vw,46px) clamp(28px,3.2vw,46px)} @media (max-width:900px){ .fall.f-lay-kasten .f-split, .fall.f-lay-kasten.f-alt .f-split{grid-template-columns:1fr} .fall.f-lay-kasten .f-media, .fall.f-lay-kasten.f-alt .f-media{order:1} .fall.f-lay-kasten .f-txt, .fall.f-lay-kasten.f-alt .f-txt{order:2;margin-top:0; padding:clamp(22px,5vw,32px)} .fall.f-lay-kasten .f-rail{gap:10px} .fall.f-lay-kasten .f-rail button em{font-size:11px} } /* ============================================================ F — BAND .f-lay-band Runde 4, Rubens Richtungswechsel: "vom Gefuehl gefaellt mir jetzt sogar besser, aber es gibt kein Gefuehl von verschiedenen Fallstudien. Versuch mal einfach den Hintergrund blau zu machen und die Kante die oben ist auf so ein Tuerkis." Also kein Kasten, sondern die SEKTION selbst ist der Container. Proportionen wie im Ist-Zustand, dazu zwei Aenderungen: 1. Jede Fallstudie laeuft auf Navy. Damit faellt der Wechsel hell/dunkel/hell weg, an dem sich beim Durchscrollen das Auge gestossen hat. 2. Eine Sky-Kante oben trennt die Fallstudien voneinander. Das ist die Antwort auf "man merkt nicht, dass es verschiedene sind": drei Navy-Sektionen ohne Trenner lesen sich als eine Flaeche. Die Farbregeln kommen ueber .is-dark, das die Sektion im Markup mitbekommt. Hier steht nur, was dazukommt. ============================================================ */ .fall.f-lay-band{border-top:2px solid var(--f-sky)} /* Die Gruppe atmet nach aussen, innen stehen die Fallstudien eng. f-top/f-bot setzen das Polster, die Kante braucht trotzdem an jeder Fallstudie zu sitzen, sonst trennt sie nichts. */ .fall.f-lay-band + .fall.f-lay-band{border-top-width:2px}