/* ============================================================ Deep5 — Unterseiten Abschnitte, die es auf der Startseite nicht gibt. Geladen nach abschnitte.css und vor bewegung.css; die Reihenfolge im ist bindend wie bei den anderen fünf Dateien. Warum eine eigene Datei: abschnitte.css ist „ein Block je Abschnitt, in der Reihenfolge des Dokuments" — und dieses Dokument ist index.html. Unterseiten haben eine andere Reihenfolge und andere Abschnitte; sie hier zu ergänzen würde diese Zusage brechen. ============================================================ */ /* ============================================================ U1 — Seitenkopf einer Unterseite Ersetzt den Hero. Kein Bild, keine Bewegung: Wer hier landet, hat schon geklickt und sucht Inhalt, keine Begrüßung. ============================================================ */ .seitenkopf{ padding-top:clamp(48px,6vw,96px); padding-bottom:clamp(36px,4.4vw,64px); border-bottom:var(--strich) solid var(--linie-stark); } .seitenkopf h1{ max-width:22ch; } .seitenkopf .lead{ margin-top:var(--raum-20); max-width:52ch; } .seitenkopf__zahl{ margin-top:var(--raum-24); font-family:var(--mono); font-size:var(--grad-mono-5); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } /* ============================================================ U2 — Industriegruppe Die Startseite bekommt keine eigenen Industrieseiten: Kein gemessenes Keyword trägt sie, und eine dünne Branchenseite ohne Case ist schwächer als gar keine. Was die Industrie trotzdem leisten muss, leistet sie hier — als Gruppe über den Cases, mit Sprungziel, damit die Branchenzeile eines Case-Teasers darauf zeigen kann. ============================================================ */ .industrie{ padding-block:clamp(44px,5.4vw,88px); } .industrie + .industrie{ border-top:var(--strich) solid var(--linie); } .industrie__kopf{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.68fr); gap:var(--steg); align-items:end; margin-bottom:clamp(28px,3.4vw,52px); } .industrie__kopf h2{ max-width:18ch; } .industrie__kopf p{ margin-top:var(--raum-16); max-width:46ch; color:var(--text-2); } .industrie__motiv{ width:100%; height:clamp(150px,15vw,230px); object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.04) brightness(.94); border-radius:var(--radius); } /* ============================================================ U3 — Ein Fall in der Übersicht Kein Teaser wie auf der Startseite: Dort steht ein Case pro Bildschirm und wirbt. Hier stehen sechs untereinander und werden verglichen. Also eine Zeile je Fall, links wozu, rechts womit, und der Weg hinein am Ende. ============================================================ */ .faelle{ display:grid; gap:0; } .fall{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--raum-12) var(--steg); padding-block:clamp(26px,3vw,42px); border-top:var(--strich) solid var(--linie); } .fall:last-child{ border-bottom:var(--strich) solid var(--linie); } .fall__titel{ grid-column:1; margin:0; } .fall__titel a{ color:var(--text-1); text-decoration:none; border-bottom:var(--strich) solid transparent; } .fall__titel a:hover{ color:var(--bordeaux); border-bottom-color:var(--bordeaux); } .fall__satz{ grid-column:1; margin:0; max-width:52ch; font-size:var(--grad-text-3); line-height:1.6; color:var(--text-2); text-wrap:pretty; } .fall__seite{ grid-column:2; grid-row:1 / span 3; align-self:start; } .fall__zeile{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--raum-14); padding-block:var(--raum-10); border-top:var(--strich) solid var(--linie); } .fall__zeile:first-child{ border-top:0; padding-top:0; } .fall__zeile dt{ font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); min-width:5.5em; } .fall__zeile dd{ margin:0; font-size:var(--grad-text-2); line-height:1.55; color:var(--text-2); } /* Eine belegte Zahl steht dunkler als der Rest der Zeile. Sie ist der einzige Grund, warum diese Zeile überhaupt dasteht. */ .fall__zeile dd b{ font-weight:600; color:var(--text-1); } .fall__fuss{ grid-column:1; margin-top:var(--raum-6); } @media (max-width:899px){ .industrie__kopf{ grid-template-columns:minmax(0,1fr); } .industrie__motiv{ height:clamp(140px,32vw,200px); } .fall{ grid-template-columns:minmax(0,1fr); } .fall__titel,.fall__satz,.fall__fuss{ grid-column:1; } .fall__seite{ grid-column:1; grid-row:auto; margin-top:var(--raum-8); } } /* ============================================================ U4 — Schlussband einer Unterseite Jede Unterseite endet mit demselben Angebot wie die Startseite, damit niemand zurückscrollen muss, um zu buchen. ============================================================ */ .schluss{ padding-block:clamp(56px,7vw,110px); } .schluss__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--steg); align-items:center; } .schluss h2{ max-width:16ch; } .schluss p{ max-width:48ch; } .schluss__cta{ display:flex; flex-wrap:wrap; gap:var(--raum-14); margin-top:var(--raum-24); } @media (max-width:899px){ .schluss__in{ grid-template-columns:minmax(0,1fr); } } /* ============================================================ U5 — Ein Fallbericht Die Startseite zeigt den Teaser, die Übersicht die Eckdaten, der Bericht die ganze Geschichte. Vier Abschnitte in fester Reihenfolge: Ausgangslage, Was wir gebaut haben, Was heute läuft, Das beweist. Die Reihenfolge steht in 00_Website_Konzept.md und ist nicht verhandelbar — sie ist der Grund, warum sich zwei Berichte vergleichen lassen. ============================================================ */ .bericht__kopf{ padding-top:clamp(40px,5vw,84px); padding-bottom:clamp(30px,3.6vw,52px); } .bericht__branche{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:var(--grad-mono-5); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); text-decoration:none; border-bottom:var(--strich) solid transparent; transition:color var(--zeit-zustand) var(--kurve-zustand), border-color var(--zeit-zustand) var(--kurve-zustand); } .bericht__branche:hover{ color:var(--bordeaux); border-bottom-color:var(--bordeaux); } .bericht__kopf h1{ margin-top:var(--raum-14); max-width:20ch; } .bericht__vorspann{ margin-top:var(--raum-22); max-width:54ch; font-size:var(--grad-lead); line-height:1.5; color:var(--text-2); text-wrap:pretty; } /* Die eine belegte Zahl, falls es eine gibt. Sie steht groß und allein, weil sie in diesem Portfolio selten ist: die meisten Fälle haben keine, und ein erfundener Ersatz wäre teurer als eine Leerstelle. */ .bericht__zahl{ margin-top:clamp(26px,3vw,40px); padding-top:var(--raum-20); border-top:var(--strich) solid var(--linie-stark); display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--raum-8) clamp(18px,2.4vw,32px); align-items:baseline; } .bericht__zahl b{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.02em; color:var(--text-1); } .bericht__zahl span{ font-size:var(--grad-text-2); line-height:1.55; color:var(--text-2); max-width:44ch; } /* Der Fließtext des Berichts. Lesebreite, nicht Bahnbreite. */ .bericht__text, .blatt__text{ padding-block:clamp(36px,4.4vw,68px); } .bericht__teil + .bericht__teil, .blatt__teil + .blatt__teil{ margin-top:clamp(32px,3.8vw,56px); } .bericht__teil h2, .blatt__teil h2{ font-size:clamp(1.2rem,1.9vw,1.62rem); letter-spacing:-.01em; max-width:24ch; } .bericht__teil p, .blatt__teil p{ /* 54ch, nicht 64ch. Die ch-Einheit misst die Breite der Null, und die ist in Bai Jamjuree schmaler als der Durchschnittsbuchstabe: Bei 64ch standen gemessene 91 Zeichen in der Zeile, weit über den 60 bis 80, ab denen das Auge die nächste Zeile nicht mehr sicher findet. 54ch ergeben 75. */ margin-top:var(--raum-16); max-width:54ch; font-size:var(--grad-text-4); line-height:1.68; color:var(--text-2); text-wrap:pretty; } .bericht__teil p + p, .blatt__teil p + p{ margin-top:var(--raum-14); } /* Eckdaten. Dieselbe Bauweise wie die rechte Spalte der Übersicht, damit ein Leser, der von dort kommt, nichts neu lernen muss. Ohne durchgehenden Strich über dem Block: Jedes Datenpaar trägt seinen eigenen, und ein zweiter über die volle Breite direkt darüber liest sich als doppelte Kante statt als Anfang. Den Abstand macht das padding. */ .bericht__daten, .blatt__daten{ padding-block:clamp(30px,3.6vw,52px); } .bericht__daten dl, .blatt__daten dl{ margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 var(--steg); } /* `dl > div`, nicht `div`: Sonst trifft die Regel auch die Shell und die Schiene links, und die tragen dann einen Strich, der zu keinem Datenpaar gehört. Solange darüber noch eine starke Kante lag, sah man ihn nicht. */ .bericht__daten dl > div, .blatt__daten dl > div{ padding-block:var(--raum-14); border-top:var(--strich) solid var(--linie); } .bericht__daten dt, .blatt__daten dt{ font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); } .bericht__daten dd, .blatt__daten dd{ margin:var(--raum-8) 0 0; font-size:var(--grad-text-2); line-height:1.55; color:var(--text-2); } /* Weiter zum nächsten Fall. Kein Bericht endet in einer Sackgasse. */ .bericht__weiter, .blatt__weiter{ padding-block:clamp(36px,4.4vw,68px); } .bericht__weiter ul, .blatt__weiter ul{ list-style:none; margin:var(--raum-24) 0 0; padding:0; display:grid; gap:0; } .bericht__weiter li, .blatt__weiter li{ border-top:var(--strich) solid var(--linie); } .bericht__weiter li:last-child, .blatt__weiter li:last-child{ border-bottom:var(--strich) solid var(--linie); } .bericht__weiter a, .blatt__weiter a{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--raum-16); align-items:baseline; padding-block:var(--raum-20); color:var(--text-1); text-decoration:none; font-size:clamp(1.05rem,1.5vw,1.28rem); font-weight:600; } .bericht__weiter a span, .blatt__weiter a span{ font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } .bericht__weiter a:hover, .blatt__weiter a:hover{ color:var(--bordeaux); } /* „Passend dazu" auf dunklem Grund. Der Block sitzt zwischen dem Ende des Textes und dem Weiterlesen: Er ist die Stelle, an der ein Bericht oder ein Artikel in ein Angebot übergeht. Ein Farbwechsel sagt hier etwas Wahres, nämlich dass der Text vorbei ist und jetzt etwas anderes kommt. */ .dienst.sec--dark{ border-block:var(--strich) solid var(--linie-hell); } .dienst.sec--dark h2{ color:var(--text-hell-1); } .dienst.sec--dark p{ color:var(--text-hell-2); } .dienst.sec--dark .btn{ background:var(--hellblau); border-color:var(--hellblau); color:var(--tinte); } @media (hover:hover){ .dienst.sec--dark .btn:hover{ background:var(--weiss); border-color:var(--weiss); } } .bericht__weiter a:hover span, .blatt__weiter a:hover span{ color:var(--bordeaux); } @media (max-width:719px){ .bericht__zahl{ grid-template-columns:minmax(0,1fr); } .bericht__weiter a, .blatt__weiter a{ grid-template-columns:minmax(0,1fr); gap:var(--raum-6); } } /* ============================================================ U6 — Lange Wörter Deutsch baut Komposita, und ein Bericht über einen „Funknetz-Infrastrukturbetreiber" hat davon reichlich. Bei 320 px passt so ein Wort nicht mehr in die Spalte und schiebt die Seite seitlich auf, gemessen 8 bis 24 px. Trennung nach Sprachregel statt harter Umbruch: Das Dokument ist lang="de", also weiß der Browser, wo er trennen darf. `break-word` ist der Notnagel für den Fall, dass ein Wort auch getrennt nicht passt. ============================================================ */ @media (max-width:719px){ .bericht__kopf h1, .seitenkopf h1, .industrie__kopf h2, .fall__titel, .bericht__vorspann, .bericht__teil h2, .bericht__teil p, .bericht__daten dd, .bericht__branche, .fall__satz, .fall__zeile dd{ hyphens:auto; overflow-wrap:break-word; } } /* ============================================================ U7 — Aufzählung im Fließtext Eine Leistungsseite besteht zur Hälfte aus Listen: was enthalten ist, was nicht, was der Kunde stellt. Sie stehen auf Lesebreite wie der Absatz darüber und tragen einen Strich statt eines Punktes, weil die ganze Seite mit Strichen arbeitet und ein runder Punkt hier ein Fremdkörper wäre. ============================================================ */ .blatt__liste{ list-style:none; margin:var(--raum-18) 0 0; padding:0; max-width:58ch; } .blatt__liste li{ position:relative; padding-left:calc(var(--raum-14) + 14px); padding-block:var(--raum-8); font-size:var(--grad-text-3); line-height:1.6; color:var(--text-2); text-wrap:pretty; } .blatt__liste li + li{ border-top:var(--strich) solid var(--linie); } .blatt__liste li::before{ content:""; position:absolute; left:0; top:calc(.8em + var(--raum-8)); width:14px; height:var(--strich); background:var(--text-3); } /* Der Satz nach einer Liste braucht mehr Luft als ein Absatz nach einem Absatz, sonst klebt er als sechster Punkt an den fünf darüber. */ .blatt__teil .blatt__nachsatz{ margin-top:var(--raum-20); } .blatt__liste-titel{ margin-top:var(--raum-20); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); } /* ============================================================ U8 — Preistafel Preise gehören auf diese Seite, das steht so im Projekt. Drei Stufen nebeneinander, gleich hoch, ohne Rahmen. Keine Stufe ist hervorgehoben: Sobald eine „empfohlen" heißt, liest sich die Tafel als Verkaufsdruck statt als Auskunft. ============================================================ */ .tafel{ padding-block:clamp(30px,3.6vw,52px); } /* Die Karten nehmen die ganze Breite, nicht nur die rechte Spalte. Bei drei Karten blieben sonst 288 Pixel je Karte, und dann bricht jede Zeile nach drei Wörtern um. Die Schiene bleibt sichtbar, sie überlappt die erste Karte aber nicht, weil das Gitter erst dahinter beginnt. */ .tafel .grid{ grid-template-columns:minmax(0,1fr); } .tafel .rail{ position:static; margin-bottom:var(--raum-16); } .tafel__gitter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:var(--steg); } .tafel__name{ margin:0; font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); } .tafel__preis{ margin:var(--raum-10) 0 0; font-family:var(--display); font-weight:900; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.1; letter-spacing:-.02em; color:var(--text-1); } .tafel__fuer{ margin:var(--raum-8) 0 0; max-width:34ch; font-size:var(--grad-text-2); line-height:1.55; color:var(--text-2); } .tafel__stufe ul{ list-style:none; margin:var(--raum-16) 0 0; padding:0; } .tafel__stufe li{ padding-block:var(--raum-12); border-top:var(--strich) solid var(--linie); font-size:var(--grad-text-2); line-height:1.62; color:var(--text-2); text-wrap:pretty; } @media (max-width:719px){ .tafel__gitter{ grid-template-columns:minmax(0,1fr); } } /* ============================================================ U9 — Hinweis Ein Kasten für das, was rechtlich gesagt werden muss. Er ist bewusst leise: keine Warnfarbe, kein Symbol. Was hier steht, ist keine Ausnahme vom Text, sondern Teil davon. ============================================================ */ .hinweis{ margin-top:clamp(28px,3.2vw,44px); padding:var(--raum-20) 0 var(--raum-20) clamp(18px,2vw,28px); border-left:2px solid var(--linie-stark); max-width:62ch; } .hinweis p{ margin:0; font-size:var(--grad-text-2); line-height:1.6; color:var(--text-2); text-wrap:pretty; } /* ============================================================ U10 — Person Über uns zeigt einen Menschen, nicht ein Team-Raster mit Platzhaltern. Das Bild steht rechts und ist so breit wie die Schiene plus Steg, damit es zur Rasterlogik der Startseite passt. ============================================================ */ .person{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:var(--steg); align-items:start; padding-block:clamp(36px,4.4vw,68px); border-top:var(--strich) solid var(--linie-stark); } .person__bild{ /* height:auto wie bei .stimme__bild: sonst gewinnt das height-Attribut aus dem HTML und das Bild wird so hoch, wie die Datei es vorgibt. */ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center 22%; filter:grayscale(1) contrast(1.04) brightness(.96); border-radius:var(--radius); } .person__rolle{ font-family:var(--mono); font-size:var(--grad-mono-5); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); } .person h2{ margin-top:var(--raum-12); } .person p{ margin-top:var(--raum-16); max-width:52ch; font-size:var(--grad-text-4); line-height:1.68; color:var(--text-2); text-wrap:pretty; } @media (max-width:899px){ .person{ grid-template-columns:minmax(0,1fr); } .person__bild{ aspect-ratio:3/2; object-position:center 18%; max-height:340px; } } /* ============================================================ U11 — Kopfzeile eines Artikels Kategorie, Datum und Lesezeit in einer Zeile. Die Lesezeit ist die einzige Zahl auf einer Blogseite, die niemand belegen kann, und sie steht trotzdem da, weil sie eine Entscheidungshilfe ist und nichts behauptet. ============================================================ */ .blatt__meta{ display:flex; flex-wrap:wrap; gap:var(--raum-8) var(--raum-18); font-family:var(--mono); font-size:var(--grad-mono-5); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); } .blatt__meta span{ display:inline-flex; align-items:center; gap:var(--raum-18); } .blatt__meta span + span::before{ content:""; width:14px; height:var(--strich); background:var(--linie-stark); } /* ============================================================ U12 — Lange Wörter, zweiter Teil Gleiche Begründung wie U6, nur für die Bausteine, die es dort noch nicht gab. ============================================================ */ @media (max-width:719px){ .blatt__teil h2, .blatt__teil p, .blatt__liste li, .blatt__daten dd, .tafel__preis, .tafel__fuer, .tafel__stufe li, .hinweis p, .person h2, .person p{ hyphens:auto; overflow-wrap:break-word; } } /* ============================================================ U13 — Stimmen Die Startseite zeigt dieselben drei Stimmen in einem eigenen Abschnitt. Hier stehen sie ungekürzt, weil die Seite, auf die „Alle Stimmen" zeigt, sonst weniger hätte als die, von der man kommt. Portrait links, Zitat rechts, kein Kasten: Ein Rahmen um ein Zitat sagt „Werbung", ein Strich darüber sagt „Beleg". ============================================================ */ .stimmen{ padding-block:clamp(30px,3.6vw,52px); } .stimme{ display:grid; grid-template-columns:clamp(64px,7vw,92px) minmax(0,1fr); gap:var(--raum-16) clamp(18px,2.4vw,32px); align-items:start; padding-block:clamp(26px,3vw,42px); border-top:var(--strich) solid var(--linie); } .stimme:last-child{ border-bottom:var(--strich) solid var(--linie); } .stimme__bild{ /* height:auto ist nicht kosmetisch: Ohne sie gewinnt das height-Attribut aus dem HTML, aspect-ratio wird ignoriert, und aus dem Kreis wird eine Ellipse. */ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; filter:grayscale(1) contrast(1.04) brightness(.96); } .stimme blockquote{ margin:0; } .stimme blockquote p{ margin:0; max-width:58ch; font-size:var(--grad-text-4); line-height:1.62; color:var(--text-1); text-wrap:pretty; } .stimme figcaption{ margin-top:var(--raum-14); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } .stimme figcaption strong{ color:var(--text-2); font-weight:500; } @media (max-width:599px){ .stimme{ grid-template-columns:minmax(0,1fr); } .stimme__bild{ width:clamp(56px,16vw,76px); } .stimme blockquote p{ hyphens:auto; overflow-wrap:break-word; } } /* Eine Zwischenüberschrift, die ein Link ist. Nur auf der Blog-Übersicht: Dort ist die Überschrift der Weg in den Artikel. Sie bekommt keine Unterstreichung im Ruhezustand, weil sonst eine Seite mit fünf Artikeln fünf unterstrichene Zeilen hat und wie ein Verzeichnis aussieht. */ .blatt__teil h2 a{ color:inherit; text-decoration:none; border-bottom:var(--strich) solid transparent; transition:color var(--zeit-zustand) var(--kurve-zustand), border-color var(--zeit-zustand) var(--kurve-zustand); } .blatt__teil h2 a:hover{ color:var(--bordeaux); border-bottom-color:var(--bordeaux); } /* ============================================================ U14 — Kopfband Der Seitenkopf einer Unterseite war bisher hell und ruhig, mit der Begründung: Wer hier landet, hat schon geklickt. Das galt, solange es drei Unterseiten gab. Bei 23 fehlt der Anfang: Man scrollt durch und merkt nicht, dass eine neue Seite begonnen hat. Das Kopfband ist der Anfang, den die Startseite mit dem Hero hat und die Unterseiten bisher nicht hatten. Bauweise wie das Scharnier: Bild, Farbschleier, Verlauf nach unten ins Papier. Nur dass hier Text darauf steht, also muss der Schleier dichter sein. ============================================================ */ .kopfband{ position:relative; background:var(--tinte); color:var(--text-hell-1); padding-top:clamp(64px,8vw,132px); padding-bottom:clamp(52px,6.4vw,104px); overflow:hidden; isolation:isolate; } .kopfband__bild{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 46%; filter:grayscale(1) contrast(1.06) brightness(.42); } /* Zwei Lagen statt einer: Der Schleier nimmt dem Bild die Farbe und die Aufmerksamkeit, der Verlauf setzt es unten auf dem Papier ab, damit die Kante nicht als Strich sichtbar wird. */ .kopfband__schleier{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--tinte-72) 0%, var(--tinte-58) 46%, var(--tinte-86) 100%); } .kopfband .rail .label{ color:var(--text-hell-3); } .kopfband .rail .label::before{ background:var(--text-hell-3); } .kopfband .rail__link{ color:var(--text-hell-2); } .kopfband h1{ color:var(--weiss); max-width:19ch; } .kopfband__oberzeile{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:var(--grad-mono-5); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-hell-3); text-decoration:none; border-bottom:var(--strich) solid transparent; transition:color var(--zeit-zustand) var(--kurve-zustand), border-color var(--zeit-zustand) var(--kurve-zustand); } .kopfband__oberzeile:hover{ color:var(--weiss); border-bottom-color:var(--weiss); } .kopfband h1{ margin-top:var(--raum-14); } .kopfband__vorspann{ margin-top:var(--raum-22); max-width:52ch; font-size:var(--grad-lead); line-height:1.5; color:var(--text-hell-2); text-wrap:pretty; } .kopfband__meta{ margin-top:var(--raum-20); display:flex; flex-wrap:wrap; gap:var(--raum-8) var(--raum-18); font-family:var(--mono); font-size:var(--grad-mono-5); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-hell-3); } .kopfband__meta span{ display:inline-flex; align-items:center; gap:var(--raum-18); } .kopfband__meta span + span::before{ content:""; width:14px; height:var(--strich); background:var(--text-hell-4); } /* Die große Zahl steht im Kopfband hell und ohne eigene Trennlinie: Der dunkle Grund trennt schon. */ .kopfband__zahl{ margin-top:clamp(26px,3vw,40px); padding-top:var(--raum-20); border-top:var(--strich) solid var(--text-hell-5); display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--raum-8) clamp(18px,2.4vw,32px); align-items:baseline; } .kopfband__zahl b{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.02em; color:var(--weiss); } .kopfband__zahl span{ font-size:var(--grad-text-2); line-height:1.55; color:var(--text-hell-2); max-width:44ch; } @media (max-width:719px){ .kopfband__zahl{ grid-template-columns:minmax(0,1fr); } .kopfband h1,.kopfband__vorspann,.kopfband__oberzeile{ hyphens:auto; overflow-wrap:break-word; } } /* ============================================================ U15 — Trennband Zwischen zwei Industriegruppen auf der Übersicht. Dieselbe Bauweise wie das Scharnier der Startseite, nur flacher: Es trennt, es leitet nicht über. Rein dekorativ, deshalb aria-hidden im Markup. ============================================================ */ .trennband{ position:relative; height:clamp(210px,26vw,380px); overflow:hidden; background:var(--tinte); } .trennband img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; filter:grayscale(1) contrast(1.06) brightness(.82); } .trennband__tint{ position:absolute; inset:0; background:var(--stahl); mix-blend-mode:color; opacity:.42; } /* Der Verlauf greift nur die Kanten. Die erste Fassung liess ihn über die ganze Hoehe laufen, und uebrig blieb ein grauer Streifen, in dem man das Bild erahnen konnte. Ein Banner soll man sehen: Es trennt nicht durch Abwesenheit von Inhalt, sondern indem es selbst einer ist. */ .trennband__fade{ position:absolute; inset:0; background:linear-gradient(180deg, var(--papier) 0%, var(--papier-90) 4%, var(--papier-34) 11%, transparent 22%, transparent 78%, var(--papier-34) 89%, var(--papier-90) 96%, var(--papier) 100%); } /* Eine Zeile im Banner, damit es nicht nur Fläche ist: Sie nennt die Industrie, die gleich kommt. Steht unten links, wo sie den Bildaufbau nicht stört. */ .trennband__wort{ position:absolute; left:0; right:0; bottom:clamp(20px,2.6vw,36px); z-index:2; } .trennband__wort span{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--mono); font-size:var(--grad-mono-5); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--weiss); text-shadow:0 1px 12px rgba(26,28,34,.85); } .trennband__wort span::before{ content:""; width:26px; height:2px; background:var(--bordeaux); } /* ============================================================ U16 — Falte Ein ausklappbarer Textteil. Grund: Auf den Leistungsseiten stehen sechs Abschnitte, von denen die ersten drei die Frage beantworten und die letzten drei sie belegen. Wer kauft, liest drei. Wer prüft, klappt auf. Beides ist legitim, aber nur eins darf voreingestellt sein. Der Inhalt steht im Markup, nicht im Skript: Suchmaschinen und Sprachmodelle lesen ihn, auch wenn er zugeklappt ist. Ein Ausklappen per JavaScript hätte das nicht. ============================================================ */ .falte{ margin-top:clamp(28px,3.4vw,48px); } /* Die Zusammenfassung muss aussehen wie ein Knopf, nicht wie ein Etikett. Der erste Entwurf setzte sie in Azeret Mono, 11 px, in Versalien, also in genau derselben Schrift, Größe und Farbe wie die Listenüberschriften daneben, die niemand anklicken kann. Das Pluszeichen stand 700 px entfernt am Zeilenende. Wer nicht wusste, dass dort etwas eingeklappt ist, hat es nicht erfahren. Jetzt: Fließtextschrift, Lesegröße, umlaufender Rahmen, Zeichen direkt hinter dem Text. */ .falte > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:var(--raum-14); margin-block:var(--raum-18); padding:var(--raum-14) var(--raum-20); border:var(--strich) solid var(--linie-stark); border-radius:var(--radius); background:var(--weiss); font-size:var(--grad-text-2); font-weight:600; line-height:1.4; color:var(--text-1); max-width:62ch; transition:border-color var(--zeit-zustand) var(--kurve-zustand), color var(--zeit-zustand) var(--kurve-zustand); } .falte > summary::-webkit-details-marker{ display:none; } .falte > summary:hover{ color:var(--bordeaux); border-color:var(--bordeaux); } .falte > summary:focus-visible{ outline:2px solid var(--bordeaux); outline-offset:3px; } /* Das Zeichen ist ein Plus, das sich zum Minus dreht. Kein Pfeil: Ein Pfeil zeigt woandershin, ein Plus zeigt „hier ist mehr". */ .falte__zeichen{ position:relative; width:14px; height:14px; flex:none; color:var(--bordeaux); } .falte__zeichen::before, .falte__zeichen::after{ content:""; position:absolute; background:currentColor; } .falte__zeichen::before{ inset:6px 0; height:2px; } .falte__zeichen::after{ inset:0 6px; width:2px; } .falte[open] .falte__zeichen::after{ opacity:0; } .falte__in{ padding:var(--raum-8) 0 var(--raum-24) clamp(14px,1.6vw,22px); border-left:2px solid var(--linie-stark); } .falte__in > .blatt__teil:first-child{ margin-top:0; } /* ============================================================ U17 — Skizze Eine gezeichnete Grafik im Fließtext. Sie unterbricht, sie erklärt, und sie ist der einzige Bildtyp, der nichts behauptet: Eine Zeichnung ist offensichtlich eine Zeichnung. Deshalb braucht sie auch keine Herkunftszeile. Strichstärke und Rundungen kommen von der Startseite, damit eine Skizze im Bericht und ein Zeichen im Hero erkennbar aus derselben Hand sind. ============================================================ */ /* Der Abstand nach unten fehlte, und zwar überall dort, wo ein Baustein im Fließtext steht. Ergebnis: Der untere Strich der Skizze klebte am nächsten Absatz, und ein Bild stieß direkt an die folgende Überschrift. Ein Element, das den Text unterbricht, braucht auf beiden Seiten Luft, sonst unterbricht es nicht, sondern drängelt. */ .skizze{ margin-block:clamp(32px,3.8vw,56px) clamp(36px,4.2vw,60px); padding-block:clamp(22px,2.6vw,36px); border-block:var(--strich) solid var(--linie); max-width:64ch; } .skizze svg{ display:block; width:100%; height:auto; color:var(--text-2); } .skizze svg [stroke]{ vector-effect:non-scaling-stroke; } .skizze figcaption{ margin-top:var(--raum-14); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } /* ============================================================ U18 — Einwurf Ein Zitat mitten im Text, mal links, mal rechts eingerückt. Es unterbricht den Lesefluss absichtlich: Nach vier Absätzen Fachtext ist ein Satz von jemandem, der das System benutzt, die stärkste Unterbrechung, die es gibt. ============================================================ */ .einwurf{ margin:clamp(30px,3.6vw,52px) 0; padding-left:clamp(18px,2vw,28px); border-left:2px solid var(--bordeaux); max-width:52ch; } .einwurf p{ margin:0; font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.55; color:var(--text-1); text-wrap:pretty; } .einwurf footer{ margin-top:var(--raum-12); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } @media (min-width:900px){ .einwurf--rechts{ margin-left:auto; margin-right:calc(-1 * clamp(18px,3vw,64px)); border-left:0; border-right:2px solid var(--bordeaux); padding-left:0; padding-right:clamp(18px,2vw,28px); text-align:right; } } /* ============================================================ U20 — Beitrag in der Blogübersicht War bisher ein Textabschnitt wie jeder andere. Ein Blog, dessen Beiträge aussehen wie Kapitel, liest sich als ein langer Text und nicht als fünf Angebote. Also: eigene Zeile, Grafik links, Datum und Lesedauer sichtbar, klare Kante nach unten. ============================================================ */ .beitraege{ display:grid; gap:0; } .beitrag{ display:grid; grid-template-columns:clamp(120px,15vw,196px) minmax(0,1fr); gap:var(--raum-16) clamp(20px,2.6vw,40px); padding-block:clamp(32px,4vw,58px); border-top:var(--strich) solid var(--linie-stark); } .beitrag:last-child{ border-bottom:var(--strich) solid var(--linie-stark); } /* Kein weißer Grund. Die Seite steht auf Papier, und eine weiße Kachel darauf liest sich als Fremdkörper. Runde Fläche im Papierton mit dünner Linie, wie die Zeichen im Ablauf der Startseite. */ .beitrag__zeichen{ align-self:start; aspect-ratio:1; width:clamp(96px,11vw,132px); display:grid; place-items:center; padding:clamp(20px,2.4vw,30px); border:var(--strich) solid var(--linie-stark); border-radius:50%; background:var(--papier); transition:border-color var(--zeit-zustand) var(--kurve-zustand), color var(--zeit-zustand) var(--kurve-zustand); } .beitrag:hover .beitrag__zeichen{ border-color:var(--stahl); } .beitrag__zeichen svg{ display:block; width:100%; height:auto; color:var(--text-2); } .beitrag__meta{ display:flex; flex-wrap:wrap; gap:var(--raum-6) var(--raum-16); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); } .beitrag__meta span{ display:inline-flex; align-items:center; gap:var(--raum-16); } .beitrag__meta span + span::before{ content:""; width:12px; height:var(--strich); background:var(--linie-stark); } .beitrag h2{ margin-top:var(--raum-12); font-size:clamp(1.24rem,2.1vw,1.78rem); letter-spacing:-.01em; max-width:26ch; } .beitrag h2 a{ color:var(--text-1); text-decoration:none; border-bottom:var(--strich) solid transparent; transition:color var(--zeit-zustand) var(--kurve-zustand), border-color var(--zeit-zustand) var(--kurve-zustand); } .beitrag h2 a:hover{ color:var(--bordeaux); border-bottom-color:var(--bordeaux); } .beitrag p{ margin-top:var(--raum-14); max-width:60ch; font-size:var(--grad-text-3); line-height:1.62; color:var(--text-2); text-wrap:pretty; } @media (max-width:719px){ .beitrag{ grid-template-columns:minmax(0,1fr); } .beitrag__zeichen{ max-width:150px; } .beitrag h2,.beitrag p{ hyphens:auto; overflow-wrap:break-word; } } /* ============================================================ U21 — Passend dazu Am Ende eines Fallberichts steht bisher „Weiter": zwei andere Berichte. Das hält jemanden im Lesemodus. Wer aber gerade gelesen hat, dass ein Betrieb wie seiner ein System bekommen hat, ist nicht mehr im Lesemodus. Also davor ein Block, der sagt, welche Leistung genau das baut. ============================================================ */ .dienst{ padding-block:clamp(32px,4vw,60px); border-top:var(--strich) solid var(--linie-stark); } .dienst__in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--raum-20) var(--steg); align-items:center; } .dienst h2{ max-width:22ch; } .dienst p{ margin-top:var(--raum-14); max-width:52ch; font-size:var(--grad-text-3); line-height:1.6; color:var(--text-2); text-wrap:pretty; } @media (max-width:719px){ .dienst__in{ grid-template-columns:minmax(0,1fr); } .dienst h2,.dienst p{ hyphens:auto; overflow-wrap:break-word; } } /* ============================================================ U22 — Gezeichnete Zeichen Dieselbe Hand wie die Zeichen auf der Startseite: 1,6 px Strich auf einem Raster von 64 zu 48, weiße Flächen, ein einziger farbiger Akzent je Bild. Der Akzent ist immer das, worum es geht, nie Dekoration. Warum gezeichnet und nicht fotografiert: Ein Foto zu „Was ist ein RAG-System" gibt es nicht. Jedes Foto wäre eine Behauptung über etwas, das man nicht fotografieren kann. Eine Zeichnung ist erkennbar eine Erklärung. ============================================================ */ .zn{ overflow:visible; display:block; width:100%; height:auto; color:var(--stahl); } /* Strichzeichnung wie die Zeichen im Ablauf der Startseite: 1,5 px Linie, keine gefüllten Flächen, ein einziger farbiger Akzent. Der erste Entwurf arbeitete mit weiß gefüllten Rechtecken auf weißem Grund, und das sah auf dem Papierton der Seite aus wie ein aufgeklebter Zettel. */ .zn__r{ fill:none; stroke:currentColor; stroke-width:1.5; } .zn__l{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; opacity:.55; } .zn__akzent{ fill:none; stroke:var(--bordeaux); stroke-width:1.5; stroke-linecap:round; } circle.zn__akzent[r="1.4"],circle.zn__akzent[r="1.5"],circle.zn__akzent[r="1.6"]{ fill:var(--bordeaux); stroke:none; } .zn__gestrichelt{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-dasharray:3 4; opacity:.4; } /* Namen statt Logos. Die beiden Marken hier nachzuzeichnen hieße, sie aus dem Gedächtnis zu rekonstruieren, und eine ungefähr getroffene fremde Marke ist schlechter als gar keine. Der Name in der Hausschrift sagt dasselbe und behauptet nichts Falsches. Echte SVG-Logos lassen sich hier eintauschen. */ .zn__wort{ font-family:var(--mono); font-size:5.4px; font-weight:500; letter-spacing:.06em; fill:var(--text-1); text-anchor:middle; } .zn__wort--akzent{ fill:var(--bordeaux); }6; } /* ============================================================ U23 — Schritte Der Ablauf, den die Startseite als umschaltbares Element zeigt, hier als feste Folge. Bewusst ohne Reiter und ohne Skript: Auf der Startseite darf man spielen, auf der Leistungsseite will jemand alle sechs Schritte auf einmal sehen und mit dem Finger entlangfahren. Ein Element, das man erst anklicken muss, um zu sehen, was Schritt 4 kostet, ist hier ein Hindernis. Die Nummer steht links und ist groß: Die Reihenfolge ist die Aussage, nicht die Überschrift. ============================================================ */ .schritte{ display:grid; gap:0; counter-reset:schritt; } .schritt{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--raum-10) clamp(18px,2.6vw,40px); padding-block:clamp(22px,2.8vw,38px); border-top:var(--strich) solid var(--linie); } .schritt:last-child{ border-bottom:var(--strich) solid var(--linie); } .schritt__no{ grid-row:1 / span 3; font-family:var(--display); font-weight:900; font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1; letter-spacing:-.02em; color:var(--linie-stark); min-width:2.4ch; } .schritt h3{ margin:0; font-size:clamp(1.05rem,1.5vw,1.28rem); } .schritt__wann{ margin:var(--raum-6) 0 0; font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } .schritt p:not(.schritt__wann){ margin:var(--raum-12) 0 0; max-width:58ch; font-size:var(--grad-text-2); line-height:1.6; color:var(--text-2); text-wrap:pretty; } @media (max-width:599px){ .schritt{ grid-template-columns:minmax(0,1fr); } .schritt__no{ grid-row:auto; } .schritt h3,.schritt p{ hyphens:auto; overflow-wrap:break-word; } } /* ============================================================ U24 — Prozessskizze Stationen von links nach rechts, dazwischen Pfeile. Eine Station ist farbig: die, an der das System die Arbeit übernimmt, die vorher jemand von Hand gemacht hat. Das ist die Aussage jedes Fallberichts in einer Zeile. ============================================================ */ .sk{ overflow:visible; display:block; width:100%; height:auto; color:var(--stahl); } .sk__kasten{ fill:none; stroke:var(--anthrazit); stroke-width:1; } .sk__voll{ fill:var(--vanille); stroke:var(--anthrazit); stroke-width:1; } /* Ein Kasten mit unterbrochener Linie steht für den Zustand, der nicht trägt: übernommen ohne Tests, Zeitreihe ohne Labels. Die Linie sagt das, ohne dass es jemand dazuschreiben muss. */ .sk__kasten-lose{ fill:none; stroke:var(--anthrazit-32); stroke-width:1; stroke-dasharray:4 3; } .sk__pfeil, .sk__spitze{ fill:none; stroke:var(--anthrazit-32); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; } .sk__achse{ fill:none; stroke:var(--anthrazit-32); stroke-width:1; } .sk__band{ fill:var(--vanille); stroke:none; opacity:.55; } .sk__linie{ fill:none; stroke:var(--anthrazit); stroke-width:1.4; stroke-linejoin:round; } .sk__punkt{ fill:var(--anthrazit); } .sk__punkt-alarm{ fill:var(--bordeaux); } .sk__zelle{ fill:none; stroke:var(--anthrazit-32); stroke-width:.8; } .sk__zelle-treffer{ fill:var(--bordeaux); stroke:none; opacity:.82; } .sk__strich{ fill:none; stroke:var(--anthrazit-32); stroke-width:1; } .sk__strich-lose{ fill:none; stroke:var(--anthrazit-32); stroke-width:1; stroke-dasharray:3 3; } .sk__wort{ font-family:var(--mono); font-size:8px; font-weight:500; letter-spacing:.04em; fill:var(--text-1); } .sk__klein{ font-family:var(--mono); font-size:6.4px; letter-spacing:.02em; fill:var(--text-3); } /* ============================================================ U25 — Tabelle Für Gegenüberstellungen. Eine Tabelle ist die einzige Stelle, an der zwei Dinge wirklich nebeneinander stehen und nicht nacheinander behauptet werden. Schmal wird sie zur Liste umgebaut, nicht zusammengequetscht: Eine vierspaltige Tabelle auf 320 px ist unlesbar, egal wie klein man die Schrift macht. Deshalb trägt jede Zelle ihren Spaltennamen als data-Attribut mit und zeigt ihn dort an. ============================================================ */ .tabelle{ margin-top:clamp(24px,3vw,40px); max-width:66ch; } .tabelle table{ width:100%; border-collapse:collapse; font-size:var(--grad-text-2); line-height:1.55; } .tabelle th, .tabelle td{ text-align:left; vertical-align:top; padding:var(--raum-12) var(--raum-16) var(--raum-12) 0; border-top:var(--strich) solid var(--linie); } .tabelle thead th{ border-top:var(--strich) solid var(--linie-stark); border-bottom:var(--strich) solid var(--linie-stark); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } .tabelle tbody th{ font-weight:600; color:var(--text-1); } .tabelle td{ color:var(--text-2); } .tabelle tbody tr:last-child th, .tabelle tbody tr:last-child td{ border-bottom:var(--strich) solid var(--linie-stark); } .tabelle caption{ caption-side:bottom; margin-top:var(--raum-12); text-align:left; font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } @media (max-width:719px){ .tabelle thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .tabelle tr{ display:block; border-top:var(--strich) solid var(--linie-stark); padding-block:var(--raum-12); } .tabelle th,.tabelle td{ display:block; border:0; padding:var(--raum-6) 0; } .tabelle tbody th{ font-size:var(--grad-text-3); } .tabelle td::before{ content:attr(data-spalte) " "; display:block; margin-bottom:var(--raum-4); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } .tabelle td,.tabelle th{ hyphens:auto; overflow-wrap:break-word; } } /* ============================================================ U26 — Luft um die Bausteine im Fließtext Ein Bild, eine Tabelle, eine Skizze oder ein Zitat mitten im Text braucht oben und unten denselben Abstand wie eine Zwischenüberschrift, sonst liest es sich als Teil des Absatzes davor. Gemessen war der Abstand nach unten überall null. Die Regel steht hier gesammelt und nicht bei jedem Baustein einzeln, weil sie für alle dieselbe ist und sonst beim nächsten Baustein wieder vergessen wird. ============================================================ */ .blatt__teil > .beleg, .blatt__teil > .tabelle, .blatt__teil > .skizze, .blatt__teil > .einwurf, .bericht__teil > .beleg, .blatt__text .beleg{ margin-block:clamp(32px,3.8vw,56px); } /* Folgt direkt eine Überschrift, darf der Abstand größer sein: Dort beginnt etwas Neues, und die Überschrift bringt ihren eigenen Abstand nicht mit. */ .beleg + .blatt__teil, .skizze + .blatt__teil, .tabelle + .blatt__teil, .einwurf + .blatt__teil{ margin-top:clamp(38px,4.6vw,66px); } /* Umgekehrt: Steht ein Baustein direkt unter einer Bildunterschrift oder einer Tabelle, braucht er oben weniger, sonst reißt die Seite auseinander. */ .tabelle + .skizze, .skizze + .tabelle{ margin-top:clamp(24px,2.8vw,40px); } /* ============================================================ U27 — Bühne Die Leistungsübersicht war eine Textseite mit drei Kapiteln, und genau so hat sie sich gelesen: Man sah nicht, wo eine Leistung aufhört und die nächste anfängt. Jede Leistung bekommt jetzt eine eigene Bühne über die volle Breite, mit Bild, kurzem Text, vier Punkten und einem Knopf. Sie wechseln zwischen hell und dunkel. Das ist nicht Dekoration: Der Farbwechsel ist die Trennung, die drei Überschriften auf demselben Grund nicht leisten können. Und das Bild wechselt die Seite, damit das Auge beim Scrollen etwas zu tun hat. ============================================================ */ .buehne{ position:relative; padding-block:clamp(48px,6vw,96px); } .buehne--dunkel{ background:var(--tinte); color:var(--text-hell-1); } .buehne--dunkel h2{ color:var(--weiss); } .buehne--dunkel .label{ color:var(--text-hell-3); } .buehne--dunkel .label::before{ background:var(--text-hell-3); } .buehne--dunkel .buehne__satz{ color:var(--text-hell-2); } .buehne--dunkel .buehne__liste li{ color:var(--text-hell-2); border-color:var(--text-hell-5); } .buehne--dunkel .buehne__liste li::before{ background:var(--text-hell-4); } .buehne--dunkel .buehne__preis{ color:var(--text-hell-3); } .buehne__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(28px,3.6vw,60px) var(--steg); align-items:center; } .buehne--gedreht .buehne__in{ grid-template-columns:minmax(0,.86fr) minmax(0,1fr); } .buehne--gedreht .buehne__text{ order:2; } .buehne--gedreht .buehne__bild{ order:1; } .buehne__bild{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.04) brightness(.94); border-radius:var(--radius); } .buehne--dunkel .buehne__bild{ filter:grayscale(1) contrast(1.06) brightness(.72); } .buehne h2{ margin-top:var(--raum-12); max-width:17ch; } .buehne__satz{ margin-top:var(--raum-16); max-width:46ch; font-size:var(--grad-lead); line-height:1.5; color:var(--text-2); text-wrap:pretty; } .buehne__liste{ list-style:none; margin:var(--raum-22) 0 0; padding:0; max-width:46ch; } .buehne__liste li{ position:relative; padding-left:26px; padding-block:var(--raum-9); border-top:var(--strich) solid var(--linie); font-size:var(--grad-text-2); line-height:1.55; color:var(--text-2); text-wrap:pretty; } .buehne__liste li::before{ content:""; position:absolute; left:0; top:calc(.78em + var(--raum-9)); width:14px; height:var(--strich); background:var(--text-3); } .buehne__preis{ margin-top:var(--raum-18); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } .buehne__cta{ margin-top:var(--raum-22); display:flex; flex-wrap:wrap; gap:var(--raum-14); } @media (max-width:899px){ .buehne__in, .buehne--gedreht .buehne__in{ grid-template-columns:minmax(0,1fr); } .buehne--gedreht .buehne__text{ order:1; } .buehne--gedreht .buehne__bild{ order:2; } .buehne__bild{ aspect-ratio:16/10; } .buehne h2,.buehne__satz,.buehne__liste li{ hyphens:auto; overflow-wrap:break-word; } } /* Die Ablaufzeichen neben den Schritten. Dieselben Strichbilder wie im Ablauf der Startseite, damit ein Leser, der von dort kommt, sie wiedererkennt. */ .schritt__zeichen{ width:clamp(40px,4.4vw,52px); aspect-ratio:1; display:grid; place-items:center; border:var(--strich) solid var(--linie-stark); border-radius:50%; background:var(--papier); color:var(--stahl); grid-row:1 / span 3; } .schritt__zeichen svg{ width:64%; height:64%; display:block; } .schritt__zeichen svg [stroke],.schritt__zeichen svg path,.schritt__zeichen svg circle{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .schritt__zeichen svg circle[r="2"]{ fill:currentColor; stroke:none; } .schritt--mit-zeichen{ grid-template-columns:auto auto minmax(0,1fr); } @media (max-width:599px){ .schritt--mit-zeichen{ grid-template-columns:auto auto; } .schritt__zeichen{ grid-row:auto; } } /* ============================================================ U28 — Zeichen am Abschnitt Eine Leistungsseite war nach der Preistafel eine reine Textspalte: Überschrift, Absatz, Liste, Überschrift, Absatz. Wer sie überflog, sah keinen Anfang und kein Ende, nur Schrift. Das Zeichen links neben der Überschrift ist dieselbe Bauweise wie die Zeichen im Ablauf der Startseite: 48er Raster, dünne Linie, runde Fläche im Papierton. Es erklärt nichts, es markiert. Genau das fehlte. ============================================================ */ .blatt__teil--zeichen{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--raum-10) clamp(16px,2vw,26px); align-items:start; } .blatt__teil--zeichen > *{ grid-column:2; } .blatt__zeichen{ grid-column:1; grid-row:1 / span 20; width:clamp(38px,4.2vw,50px); aspect-ratio:1; display:grid; place-items:center; border:var(--strich) solid var(--linie-stark); border-radius:50%; background:var(--papier); color:var(--stahl); } .blatt__zeichen svg{ width:60%; height:60%; display:block; } .blatt__zeichen svg path, .blatt__zeichen svg rect, .blatt__zeichen svg circle{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:599px){ .blatt__teil--zeichen{ grid-template-columns:minmax(0,1fr); } .blatt__teil--zeichen > *{ grid-column:1; } .blatt__zeichen{ grid-column:1; grid-row:auto; margin-bottom:var(--raum-6); } } /* ============================================================ U29 — Zwischenband Ein dunkles Band mitten im Text, über die volle Breite, mit Bild und einem Satz. Es unterbricht die Textspalte einmal deutlich, statt sie durchlaufen zu lassen. Der Satz darin ist nie neu: Er fasst zusammen, was der Abschnitt davor gesagt hat. Ein Band, in dem etwas steht, das sonst nirgends steht, wäre ein versteckter Absatz. ============================================================ */ .zwischenband{ position:relative; margin-block:clamp(30px,3.6vw,56px); background:var(--tinte); color:var(--text-hell-1); overflow:hidden; isolation:isolate; } .zwischenband__bild{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 42%; /* .44 wie im Kopfband war hier zu dunkel: Dort liegt der Text über dem ganzen Bild, hier nur über der linken Hälfte, und rechts soll man sehen, was da ist. */ filter:grayscale(1) contrast(1.06) brightness(.72); } .zwischenband__schleier{ position:absolute; inset:0; z-index:-1; /* Dicht, wo der Satz steht, offen, wo keiner steht. */ background:linear-gradient(90deg, var(--tinte-86) 0%, var(--tinte-72) 40%, var(--tinte-10) 78%, transparent 100%); } .zwischenband__in{ padding:clamp(34px,4.4vw,68px) clamp(22px,3vw,52px); max-width:52ch; } .zwischenband p{ margin:0; font-size:clamp(1.06rem,1.7vw,1.42rem); line-height:1.45; color:var(--weiss); text-wrap:pretty; } .zwischenband footer{ margin-top:var(--raum-16); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-hell-3); } /* Ein kleines Bild im Fließtext, das den Abschnitt stützt. Halb so breit wie die Lesespalte und rechts eingerückt: Es soll begleiten, nicht unterbrechen. */ .beibild{ margin-block:clamp(26px,3.2vw,44px); max-width:54ch; } .beibild img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); filter:grayscale(1) contrast(1.04) brightness(.96); } .beibild figcaption{ margin-top:var(--raum-12); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); } /* ============================================================ U30 — Preistafel, Tabelle und Aufmerksamkeit Drei Kleinigkeiten, die zusammen den Unterschied machen zwischen „das steht hier" und „das kann ich anfassen". ============================================================ */ /* Die Preisstufen stehen auf Weiß, nicht erst unter der Maus. Der weiße Grund war zuerst ein Effekt beim Überfahren, und genau das war der Fehler: Er sah hochwertig aus und blieb trotzdem die meiste Zeit unsichtbar, weil niemand über eine Karte fährt, die er nur liest. Jetzt trägt die Karte ihren Grund von Anfang an, und der Zeiger hebt sie nur noch etwas an. */ .tafel__stufe{ padding-inline:clamp(18px,2vw,26px); padding-block:clamp(22px,2.4vw,30px); background:var(--weiss); border:var(--strich) solid var(--linie); border-radius:var(--radius); box-shadow:0 10px 26px -20px rgba(26,28,34,.42); transition:box-shadow var(--zeit-zustand) var(--kurve-zustand), transform var(--zeit-zustand) var(--kurve-zustand); } /* Eine einzelne Karte läuft sonst über die ganze Breite und liest sich als Kasten, nicht als Karte. */ .tafel__gitter--einzeln{ grid-template-columns:minmax(0,min(560px,100%)); } @media (hover:hover){ .tafel__stufe:hover{ box-shadow:0 18px 38px -22px rgba(26,28,34,.5); transform:translateY(-2px); } .tafel__stufe:hover .tafel__preis{ color:var(--bordeaux); } } .tafel__preis{ transition:color var(--zeit-zustand) var(--kurve-zustand); } /* Eine nummerierte Folge im Fließtext. Die Zahl steht in der Schiene links, nicht im Text: So bleibt die linke Kante der Absätze durchgehend, und die Ziffern bilden eine eigene Spalte, an der man den Ablauf abzählen kann, ohne ihn zu lesen. */ .blatt__schritte{ list-style:none; counter-reset:sch; margin:var(--raum-20) 0 0; padding:0; max-width:58ch; border-top:var(--strich) solid var(--linie-stark); } .blatt__schritte li{ counter-increment:sch; position:relative; padding:var(--raum-12) 0 var(--raum-12) 2.6em; border-bottom:var(--strich) solid var(--linie); font-size:var(--grad-text-3); line-height:1.6; color:var(--text-2); text-wrap:pretty; } .blatt__schritte li::before{ content:counter(sch,decimal-leading-zero); position:absolute; left:0; top:calc(.42em + var(--raum-12)); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.08em; color:var(--bordeaux); font-variant-numeric:tabular-nums; } .blatt__schritte b{ color:var(--text-1); font-weight:600; } /* ============================================================ U31 — Fragen mit Antwort Auf der Faktenseite. Als Beschreibungsliste, weil genau das die Beziehung ist. Die Frage steht fett und für sich, die Antwort eingerückt darunter: So bleibt beim Überfliegen die Fragenspalte lesbar, ohne dass jemand die Antworten mitlesen muss. ============================================================ */ .faq{ margin:var(--raum-20) 0 0; max-width:62ch; } .faq__paar{ padding-block:var(--raum-18); border-top:var(--strich) solid var(--linie); } .faq__paar:last-child{ border-bottom:var(--strich) solid var(--linie); } .faq dt{ font-size:var(--grad-text-3); font-weight:600; line-height:1.5; color:var(--text-1); text-wrap:balance; } .faq dd{ margin:var(--raum-8) 0 0; font-size:var(--grad-text-2); line-height:1.62; color:var(--text-2); text-wrap:pretty; } /* Überschrift über einem Teil der Folge. Sie steht auf der Zahlenspalte, damit die Nummern darunter nicht einrücken müssen. */ .blatt__schritte-gruppe{ margin:var(--raum-24) 0 var(--raum-8); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--bordeaux); } .blatt__schritte-gruppe:first-of-type{ margin-top:var(--raum-20); } /* Eine Tabelle bekommt einen eigenen Grund. Auf Papier stehend war sie vom Fließtext nur durch Striche getrennt, und Striche hat die Seite überall. */ .tabelle{ background:var(--weiss); border:var(--strich) solid var(--linie); border-radius:var(--radius); padding:clamp(16px,2vw,26px) clamp(16px,2vw,26px) clamp(8px,1vw,14px); max-width:none; } .tabelle table{ max-width:66ch; } .tabelle thead th{ border-top:0; } .tabelle tbody tr:last-child th, .tabelle tbody tr:last-child td{ border-bottom:0; } .tabelle caption{ max-width:60ch; } /* ============================================================ U31 — Dunkler Teil Das Zwischenband nimmt 450 px in einer Seite von 8.000. Zwischen Kopfband und Schluss liegen dadurch sechs Bildschirmlängen in einer Farbe. Gemessen: 16 bis 19 Prozent dunkel, und davon liegt alles am Anfang und am Ende. Der dunkle Teil ist ein ganzer Abschnitt, nicht ein Streifen: Überschrift, ein paar Sätze, eine Zeichnung in der dunklen Palette. Dieselbe Bauweise wie die Ausgangslage der Startseite, und derselbe Zweck: einmal in der Mitte die Farbe wechseln, damit man merkt, dass ein neuer Gedanke anfängt. ============================================================ */ .dunkelteil{ background:var(--tinte); color:var(--text-hell-1); padding-block:clamp(52px,6.4vw,104px); margin-block:clamp(36px,4.4vw,68px); } .dunkelteil__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(28px,3.6vw,60px) var(--steg); align-items:center; } .dunkelteil h2{ color:var(--weiss); max-width:19ch; margin-top:var(--raum-12); } .dunkelteil p{ margin-top:var(--raum-18); max-width:48ch; font-size:var(--grad-text-4); line-height:1.62; color:var(--text-hell-2); text-wrap:pretty; } .dunkelteil .label{ color:var(--text-hell-3); } .dunkelteil .label::before{ background:var(--text-hell-3); } .dunkelteil .zeichnung{ max-width:none; margin:0; } .dunkelteil__liste{ list-style:none; margin:var(--raum-22) 0 0; padding:0; max-width:48ch; } .dunkelteil__liste li{ position:relative; padding-left:26px; padding-block:var(--raum-9); border-top:var(--strich) solid var(--text-hell-5); font-size:var(--grad-text-2); line-height:1.55; color:var(--text-hell-2); text-wrap:pretty; } .dunkelteil__liste li::before{ content:""; position:absolute; left:0; top:calc(.78em + var(--raum-9)); width:14px; height:var(--strich); background:var(--text-hell-4); } @media (max-width:899px){ .dunkelteil__in{ grid-template-columns:minmax(0,1fr); } .dunkelteil h2,.dunkelteil p,.dunkelteil__liste li{ hyphens:auto; overflow-wrap:break-word; } } /* ============================================================ U — Kontaktformular Die Felder stehen untereinander in voller Breite, nur Vor- und Nachname teilen sich eine Zeile. Kein Kasten, kein Schatten: Das Formular ist Teil der Seite, kein Fremdkörper darin. ============================================================ */ .blatt__formular{ border-top:var(--strich) solid var(--linie-stark); } .blatt__formular-vor{ margin:var(--raum-14) 0 0; max-width:56ch; font-size:var(--grad-text-2); line-height:1.6; color:var(--text-2); } .form{ margin-top:var(--raum-30); max-width:44rem; } .form__paar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--raum-20); } .form__feld{ margin:0 0 var(--raum-20); } .form__feld label{ display:block; margin-bottom:var(--raum-8); font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); } .form__feld label b{ color:var(--bordeaux); font-weight:500; } .form__feld input, .form__feld textarea{ display:block; width:100%; padding:var(--raum-14) var(--raum-16); font-family:var(--body); font-size:var(--grad-text-2); line-height:1.5; color:var(--text-1); background:var(--weiss); border:var(--strich) solid var(--linie-stark); border-radius:var(--radius); transition:border-color var(--zeit-zustand) var(--kurve-zustand); } .form__feld textarea{ resize:vertical; min-height:9rem; } .form__feld input:hover, .form__feld textarea:hover{ border-color:var(--stahl); } .form__feld input:focus-visible, .form__feld textarea:focus-visible{ outline:var(--strich-stark) solid var(--bordeaux); outline-offset:2px; border-color:var(--bordeaux); } /* Ein Feld, das kein Mensch sieht und keine Tastatur erreicht. Nicht display:none: Manche Maschinen prüfen darauf und lassen es dann aus. */ .form__falle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form__hinweis{ margin:0 0 var(--raum-24); max-width:56ch; font-size:var(--grad-mono-3); line-height:1.6; color:var(--text-3); } .form__hinweis b{ color:var(--bordeaux); font-weight:500; } .form__aktion{ margin:0; } .form__stand{ margin:var(--raum-16) 0 0; max-width:56ch; font-size:var(--grad-text-2); line-height:1.6; } .form__stand:empty{ display:none; } .form__stand[data-art="fehler"]{ color:var(--bordeaux); } @media (max-width:719px){ .form__paar{ grid-template-columns:minmax(0,1fr); gap:0; } }