/* Am 22.09.2026 gingen diese Dateien auf members kurzzeitig per 301 auf www, und ein 301 ist dauerhaft: die Browser, die ihn geholt haben, merken ihn sich. Der Name traegt einen Pruefwert des Inhalts, also loest eine Aenderung am Inhalt den Knoten. Genau dafuer steht dieser Absatz hier, er hat sonst keine Aufgabe. */ /* Blaupause: das Aussehen des Entwurfszweigs. * * Das hier ist kein Aufsatz auf basis.css, sondern dessen Ersatz. Auf * Entwurfsseiten wird nur diese Datei geladen. Der Grund ist, dass sich die * beiden Bauweisen an der Wurzel unterscheiden: basis.css setzt auf Fraunces * und eine warme Creme-Bronze-Palette, hier gilt Bauzeichnung auf Papier, * schmale Grotesk, kuehle Graphit-Toene und keine Serifen. Zwei solche * Systeme uebereinanderzulegen ergibt nur ein Ueberschreibungsknaeuel, in dem * am Ende niemand mehr weiss, welche Regel gilt. * * Der Bestand unter /de/ und /en/ bleibt unberuehrt. * * Stand: 31.08.2026 * * RASTERREGEL: Jeder senkrechte und waagerechte Abstand ist ein Vielfaches * von --raster. Keine krummen Werte. Abschnitte 4x oder 6x, Innenabstaende * 1x bis 3x. Wer hier 18px schreibt, bricht die Anmutung, bevor jemand * sagen kann, warum. */ :root { color-scheme: light only; --papier: #f4f2ee; --papier-hell: #fbfaf8; --graphit: #1f2124; --graphit-weich: #4a4d52; --blau: #2f4858; /* Stahl war #8d9299 und traf auf dem Papier 2,80:1. Verlangt sind 4,50:1, und die Farbe traegt hier keine Zierde, sondern Text: Augenbrauen, Feldbeschriftungen, Bildunterschriften, den Knopf "Ueberspringen" im Statik-Check und die ganze Fusszeile. Bei 10 und 11 Pixeln in Versalien war das nicht mehr zu lesen. #676c72 ist derselbe Ton, nur so weit abgedunkelt, dass er die Pruefung besteht (4,74:1 auf Papier, 5,30:1 auf Weiss). */ --stahl: #676c72; --linie: rgba(31, 33, 36, 0.12); --raster: 24px; /* Die Spaltenbreite. Grundlinie und Massband rechnen ihre Lage daraus aus, deshalb steht sie an einer Stelle und nicht an sechs. */ --spalte: 1128px; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--papier); } /* Die Sprungmarke. Sie steht als erstes im Dokument, ist unsichtbar, bis sie den Fokus bekommt, und erspart dem, der mit der Tastatur liest, auf jeder Seite denselben Weg durch Marke, Login, Sprachwahl und Menue. */ .sprungmarke { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--graphit); color: var(--papier); padding: .8em 1.2em; text-decoration: none; } .sprungmarke:focus { left: 0; } /* Die Papierflaeche, zweilagig. * * Erst versucht mit einem erzeugten Bild. Das war der falsche Weg: ein * Diffusionsmodell glaettet Papier weg und liefert eine fast weisse Flaeche, * die auf fast gleichfarbigem Grund unsichtbar bleibt. Papierkorn ist * prozedurales Rauschen, also wird es hier auch prozedural erzeugt. Das * kachelt sauber, ist schaerfer und wiegt ein paar hundert Byte statt * mehrerer Kilobyte. * * Darueber das Raster aus --raster. Es ist dieselbe Einheit, nach der jeder * Abstand auf dieser Seite bemessen ist, und damit die einzige Dekoration, * die tatsaechlich etwas ueber den Bau aussagt. */ body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; } body::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E"); background-size: 180px 180px; opacity: 0.085; mix-blend-mode: multiply; z-index: 0; } body::after { background-image: repeating-linear-gradient(to right, var(--linie) 0 1px, transparent 1px var(--raster)), repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px var(--raster)); opacity: 0.20; z-index: 0; } /* Der Inhalt liegt ueber beiden Lagen. */ body > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { } body { background: var(--papier); color: var(--graphit-weich); font-family: 'Archivo', system-ui, sans-serif; font-size: 17px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* --- Typografie -------------------------------------------------------- * Ueberschrift und Fliesstext sind dieselbe Familie. Den Unterschied machen * Gewicht und Laufweite, nicht ein zweiter Schriftschnitt. */ h1, h2, h3, h4 { font-family: 'Archivo', system-ui, sans-serif; font-weight: 600; color: var(--graphit); letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 5.8vw, 4.4rem); font-weight: 700; letter-spacing: -0.035em; } h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); } h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); } h4 { font-size: 1rem; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } strong { font-weight: 600; color: var(--graphit); } em { font-style: normal; font-weight: 600; color: var(--blau); } a { color: var(--blau); text-decoration: none; border-bottom: 1px solid var(--linie); transition: border-color .2s; } a:hover { border-bottom-color: var(--blau); } hr.rule { border: none; height: 1px; background: var(--linie); } /* Alles Zaehlende, Messende und Beschriftende steht klein, versal und weit * gesperrt. Die Anmutung kommt aus Groesse, Sperrung und Farbe, nicht aus * einer zweiten Schriftfamilie: eine Monospace liest sich maschinell, und * maschinell ist nicht dasselbe wie praezise. Eine Familie fuer die ganze * Seite, wie es der Brief ohnehin fuer Ueberschrift und Fliesstext will. */ .eyebrow, .block-nr, .camp-num, .stage-num, .posten-preis, .portraet-rolle, .dg-dim, .dg-zaehler, .dg-punkte, .dg-schwaeche-dim, .dg-wert, .dg-feld > span, .footer-links a, .footer-copy, .footer-brand, .topnav-links a, .lang-btn, .lang-sep, .beleg figcaption, .mono { font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stahl); } .eyebrow { display: block; margin-bottom: calc(var(--raster) * 0.75); } .eyebrow-num { color: var(--graphit); margin-right: 0.9em; } /* --- Geruest ------------------------------------------------------------ */ main { display: block; } section { position: relative; padding: calc(var(--raster) * 6) 0; } main > section + section { border-top: 1px solid var(--linie); } .wrap { max-width: var(--spalte); margin: 0 auto; padding: 0 calc(var(--raster) * 1.5); } /* Auf breiten Schirmen wurde die Seite unzentriert. * * Das Hero-Foto laeuft bis an den rechten Rand, der Inhalt hielt links den * halben Rest des Fensters frei: bei 1920 Pixeln waren das knapp 400 Pixel * blasses Papier auf der einen und null auf der anderen Seite. Die Loesung * ist nicht, das Foto zu beschneiden, sondern die Spalte mitwachsen zu * lassen. Menue, Kopf und alle Abschnitte teilen sich dieselbe Regel und * bleiben deshalb weiter auf einer Flucht. Die Lesebreite haengt nicht * daran, die steht in ch an den Textelementen selbst. */ @media (min-width: 1280px) { :root { --spalte: clamp(1128px, 88vw, 1360px); } .hero .hero-lede { max-width: 46ch; } } /* Die groessere Ueberschrift nur dort, wo auch Hoehe da ist. Ohne die * zweite Bedingung schlaegt diese Regel die fuer flache Fenster weiter * oben, weil sie spaeter in der Datei steht, und der Knopf rutscht auf * einem 13-Zoll-Notebook unter die Kante. */ @media (min-width: 1280px) and (min-height: 901px) { .hero h1 { font-size: clamp(2.8rem, 5vw, 5.6rem); } } /* Die senkrechte Grundlinie. Sie faengt im Hero an und laeuft in jedem * Abschnitt an derselben x-Position weiter. Auf schmalen Schirmen entfaellt * sie, dort gibt es die Spalte nicht, an der sie liegt. */ @media (min-width: 940px) { main > section::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; left: max(calc(var(--raster) * 1.5), calc((100vw - var(--spalte)) / 2 + var(--raster) * 1.5)); background: var(--linie); pointer-events: none; } .wrap { padding-left: calc(var(--raster) * 3.5); } } .fliesstext { max-width: 62ch; } .lede, .hero-lede { max-width: 58ch; font-size: 1.12rem; color: var(--graphit); margin-bottom: calc(var(--raster) * 1.25); } /* Im Kopfbereich ist die Betonung kursiv, sonst nirgends. * * Auf der uebrigen Seite steht *Sternchen* fuer blau und halbfett, weil es * lange keinen kursiven Schnitt gab. Seit dem 23.09.2026 gibt es ihn, und * im Kopf ist er der bessere Akzent: blau und halbfett und schraeg * zugleich waeren drei Betonungen auf einer Stelle. Hier also nur der * Schnitt, Farbe und Gewicht bleiben die des Satzes. Nach rechts etwas * Luft, sonst laufen die geneigten Buchstaben in das naechste Wort. */ /* Kein Abstand nach rechts: er landete vor dem Satzzeichen, und aus "takes." wurde "takes ." Der kursive Schnitt steht von selbst weit genug, weil er als Schnitt gezeichnet ist und nicht geneigt wurde. */ .hero em { font-style: italic; font-weight: inherit; color: inherit; } .hero h1 em { letter-spacing: -0.02em; } .kopf { margin-bottom: calc(var(--raster) * 2); } .kopf h1, .kopf h2 { margin-bottom: var(--raster); } .textblock .fliesstext { margin-bottom: 0; } .kasten { border-left: 2px solid var(--blau); background: var(--papier-hell); padding: calc(var(--raster) * 1.25) calc(var(--raster) * 1.5); margin: calc(var(--raster) * 1.5) 0; max-width: 62ch; } .kasten p { color: var(--graphit); font-weight: 500; } .stempel { margin-top: calc(var(--raster) * 2); color: var(--stahl); font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; max-width: 52ch; line-height: 1.7; } /* --- Knoepfe ------------------------------------------------------------ */ .hero-cta { display: flex; flex-wrap: wrap; gap: var(--raster); margin-top: calc(var(--raster) * 2); } .btn { display: inline-block; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; padding: calc(var(--raster) * 0.75) calc(var(--raster) * 1.5); background: var(--graphit); color: var(--papier-hell); border: 1px solid var(--graphit); border-radius: 2px; cursor: pointer; transition: background .2s, border-color .2s; } .btn:hover { background: var(--blau); border-color: var(--blau); } /* Der stille Knopf. Er braucht zweierlei: eigenen Grund, damit er ueber * dem Hero-Foto lesbar bleibt, und eine dunkle Kante, damit er auf hellem * Papier ueberhaupt als Knopf zu erkennen ist. Nur eins von beidem hat * jeweils an einer der zwei Stellen versagt. */ .btn-ghost { background: var(--papier-hell); color: var(--graphit); border-color: var(--graphit); } .btn-ghost:hover { background: var(--graphit); color: var(--papier-hell); border-color: var(--graphit); } /* --- Kopfzeile ---------------------------------------------------------- */ .topnav { position: sticky; top: 0; z-index: 100; background: rgba(244, 242, 238, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); } .topnav-inner { display: flex; align-items: center; gap: var(--raster); padding-top: var(--raster); padding-bottom: var(--raster); } .topnav-brand { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; color: var(--graphit); border: none; text-transform: none; /* Ein Name, der umbricht, ist kein Name mehr, sondern zwei Woerter untereinander. Auf 375 Pixeln wurde er eng, seit rechts der Login dazugekommen ist. */ white-space: nowrap; } .topnav-rechts { display: flex; align-items: center; gap: calc(var(--raster) * 1.25); margin-left: auto; } .topnav-links { display: flex; gap: calc(var(--raster) * 1.25); align-items: center; } /* Kein Umbruch innerhalb eines Menuepunkts. Seit "Built from Pleasure" dort steht und rechts Login und Aufruf dazugekommen sind, wurden die Punkte gequetscht statt die Leiste zu sprengen: "Statik-Check" brach am Bindestrich, "Ueber mich" nach dem Ueber. Ist wirklich zu wenig Platz, greift die Klappe bei 1100 Pixeln. */ .topnav-links a { white-space: nowrap; } .topnav-links a, .lang-btn { font-size: 11px; font-weight: 400; color: var(--graphit-weich); border: none; } .topnav-links a:hover, .lang-btn:hover { color: var(--blau); } .lang-btn.active { color: var(--graphit); font-weight: 500; } .lang-switcher { display: flex; gap: calc(var(--raster) * 0.25); align-items: baseline; } .lang-sep { color: var(--linie); } /* Der Login steht oben rechts allein, und als Text. Der Aufruf, der daneben stand, kommt auf jeder Seite unten in der Laufleiste mit, und zweimal derselbe Weg macht die Zeile nur voll. Der Login wird gesucht, nicht angeboten, also braucht er kein Knopfkleid. */ .topnav-login { font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stahl); border: none; } .topnav-login:hover { color: var(--graphit); } /* Der Schalter war display:none und damit fuer die Tastatur nicht vorhanden. Auf dem Telefon waren das Menue und damit fuenf der sechs Seiten fuer Tastatur- und Vorlesenutzer unerreichbar: die Reihenfolge sprang von der Marke ueber Login und Sprachwahl direkt in den Inhalt. Jetzt ist er unsichtbar, aber vorhanden, und das Menuezeichen bekommt einen Fokusrahmen, wenn er ihn traegt. */ .nav-schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-klappe-knopf { display: none; } @media (max-width: 1100px) { .nav-klappe-knopf { display: inline-block; width: 26px; height: 26px; background: none; border: none; cursor: pointer; position: relative; order: 3; } .nav-schalter:focus-visible ~ .nav-klappe-knopf, .nav-schalter:focus ~ .nav-klappe-knopf { outline: 2px solid var(--blau); outline-offset: 4px; } .nav-klappe-knopf::before, .nav-klappe-knopf::after { content: ''; position: absolute; left: 1px; width: 24px; height: 1px; background: var(--graphit); } .nav-klappe-knopf::before { top: 9px; } .nav-klappe-knopf::after { top: 17px; } .topnav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--raster); padding: calc(var(--raster) * 1.5); background: var(--papier); border-bottom: 1px solid var(--linie); display: none; } .nav-schalter:checked ~ .topnav-links, .topnav:has(.nav-schalter:checked) .topnav-links { display: flex; } /* Enger zusammenruecken, damit Marke, Login, Sprachwahl und Menuezeichen nebeneinander in eine Zeile passen. */ .topnav-inner { gap: calc(var(--raster) * 0.5); } .topnav-rechts { gap: calc(var(--raster) * 0.75); } } /* --- Hero --------------------------------------------------------------- */ .hero { padding: calc(var(--raster) * 6) 0; } .hero-kompakt { padding: calc(var(--raster) * 4) 0 calc(var(--raster) * 3); } /* Das Foto liegt in voller Breite hinter dem Text und klart nach links in * die Papierflaeche auf. Der Verlauf ist hier kein Schmuck, sondern das, * was die Schrift lesbar haelt: ohne ihn stuende die Ueberschrift auf dem * Bild. Er verlaeuft deshalb genau in --papier und in nichts anderes. * * Das Bild selbst ist stark zurueckgenommen, damit die warme Aufnahme die * kuehle Palette nicht sprengt. */ .hero { position: relative; overflow: hidden; padding: 0; min-height: min(74vh, 760px); display: flex; align-items: center; } /* Das hidden-Attribut schlaegt jede Klasse. * * Die Browservorgabe fuer [hidden] ist display:none, aber sie verliert * gegen jede Autorenregel mit gleicher Spezifitaet. Ein Element mit * display:grid in der Klasse war deshalb trotz hidden sichtbar: das * Arbeitsfenster des Statik-Checks lag am 02.09.2026 dauerhaft ueber der * Seite, und die Seite sah aus, als haenge sie. Diese Regel gilt fuer alle * Elemente und nimmt der Falle die Grundlage. */ [hidden] { display: none !important; } .hero-oben { display: contents; } .hero-bg { position: absolute; inset: 0; z-index: 0; display: block; } .hero-bg picture { display: block; width: 100%; height: 100%; } /* Das Bild wird nach links durchsichtig, statt von einem deckenden Verlauf * ueberdeckt zu werden. Ein deckender Verlauf haette den Papieruntergrund * mit zugedeckt, und dann faedet das Foto in eine einfarbige Flaeche aus * statt in das Papier. Mit einer Maske bleibt darunter sichtbar, was * darunter liegt. */ .hero-bg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 100% 32%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 24%, rgba(0,0,0,0.3) 42%, rgba(0,0,0,0.72) 60%, #000 80%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 24%, rgba(0,0,0,0.3) 42%, rgba(0,0,0,0.72) 60%, #000 80%); } /* Der Hero zentriert seinen Inhalt senkrecht. Was oben an Luft steht, ist * also halber Freiraum plus Innenabstand plus der Abstand unter der * Grundlinie. Alle drei zusammen ergaben ueber hundert Pixel Leere zwischen * Menue und Augenbraue. Innenabstand und Linienabstand auf je eine * Rastereinheit, dann sitzt die Marke an der Augenbraue statt daneben. */ /* Der Hero ist ein Flex-Container. Ein .wrap darin nimmt ohne width nicht * seine Maximalbreite, sondern schrumpft auf Inhaltsbreite und wird dann von * margin:auto zentriert. Genau dadurch sass der Kopf der Unterseiten 224 * Pixel weiter rechts als jeder Abschnitt darunter. */ .hero .wrap { width: 100%; } .hero-inner { position: relative; z-index: 2; padding-top: calc(var(--raster) * 1.5); padding-bottom: calc(var(--raster) * 2); } /* Breit genug, dass die zwei Knoepfe nebeneinander stehen. Die Lesebreite * von Ueberschrift und Vorspann wird darunter einzeln begrenzt, damit sie * nicht an der Knopfbreite haengt. */ .hero-text { max-width: 560px; } .hero h1 { max-width: 14ch; margin-bottom: var(--raster); } .hero .hero-lede { max-width: 44ch; margin-bottom: calc(var(--raster) * 1.5); } .hero .hero-cta { margin-top: calc(var(--raster) * 1.5); } /* Flache Fenster. * * Die Anzeigengroesse der Ueberschrift ist fuer hohe Fenster bemessen: * 14ch Zeilenbreite und bis zu 4,4rem ergeben bei einem Satz aus zwei * Haelften fuenf Zeilen und knapp vierhundert Pixel. Auf einem Notebook * mit 720 oder 760 Pixeln Hoehe schiebt das den Aufruf unter die Kante, * und ein Knopf, den niemand sieht, ist keiner. * * Gekuerzt wird die Schrift und die Zeilenbreite, nicht der Text. Auf * hohen Schirmen bleibt der Kopfbereich, wie er gedacht ist. */ @media (min-width: 861px) and (max-height: 900px) { .hero h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); max-width: 21ch; margin-bottom: calc(var(--raster) * 0.75); } .hero-inner { padding-top: var(--raster); padding-bottom: calc(var(--raster) * 1.25); } .hero .hero-lede { margin-bottom: var(--raster); } .hero .hero-cta { margin-top: var(--raster); } /* Der Vorspann sind vier Absaetze. Auf einem flachen Notebookfenster entscheidet deren Zeilenabstand darueber, ob der Knopf noch ueber der Kante steht. */ .hero .hero-lede { font-size: 1rem; } .hero .hero-lede p { margin-bottom: .6em; line-height: 1.55; } } /* Steht eine Merkmalszeile darueber, gehoert der Knopf naeher an sie: die * beiden sind eine Einheit, die Zeile beantwortet die Frage vor dem Klick. */ .hero-merkmale + .hero-cta { margin-top: var(--raster); } .hero-text::before { content: ''; display: block; height: 1px; background: var(--graphit); width: calc(var(--raster) * 2); margin-bottom: var(--raster); } /* Auf schmalen Schirmen greift der Verlauf nicht: dort deckt das Bild die * ganze Breite, und der Text stuende mittendrin. Also Bild unter den Text, * wie im Bestand auch. */ /* --- Der Kopfbereich auf dem Telefon ------------------------------------- * * Ueber der Falz steht genau vier Dinge: Augenbraue, Ueberschrift, Bild und * die Knoepfe. Der Absatz darunter wandert unter die Falz, damit der erste * Eindruck aufgeraeumt ist. Er ist dieselbe Stelle im HTML, nur weiter * unten im Fluss, also gibt es ihn nicht zweimal. * * Gemessen wird in dvh und nicht in vh. vh rechnet mit der Fensterhoehe * ohne die ein- und ausfahrenden Browserleisten, und genau deshalb sitzen * Knoepfe auf dem einen Geraet richtig und auf dem naechsten unter dem * Bildrand. Mit dvh und einem festen Abstand nach unten steht der Knopf auf * jedem Geraet gleich weit ueber dem unteren Rand, egal ob iPhone oder * Pixel. */ @media (max-width: 860px) { .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; } .hero-bg { position: relative; inset: auto; order: 2; height: 30dvh; min-height: 200px; max-height: 300px; flex: none; } .hero-bg img { object-position: 100% 20%; -webkit-mask-image: none; mask-image: none; } .hero-inner { order: 1; padding-top: calc(var(--raster) * 2); padding-bottom: 0; } /* Die beiden Huellen loesen sich auf, damit Kopfteil, Bild, Knoepfe und Nachtrag direkte Kinder des Kopfbereichs werden und sich frei ordnen lassen. display:contents nimmt ihnen dabei auch die Innenabstaende, deshalb bekommen die Kinder sie selbst. */ /* Der obere Block ist genau eine Bildschirmhoehe hoch. Was danach kommt, liegt ausserhalb und kann ihn nicht mehr auseinanderdruecken. */ .hero .hero-oben { display: flex; flex-direction: column; min-height: calc(100dvh - var(--kopfzeile, 64px)); } .hero .hero-inner, .hero .hero-text { display: contents; } .hero .hero-kopfteil, .hero .hero-handlung { max-width: var(--spalte); width: 100%; margin: 0 auto; padding-left: calc(var(--raster) * 1.5); padding-right: calc(var(--raster) * 1.5); } .hero { min-height: 0; } /* Weniger Luft ueber der Augenbraue. Der Rasterabstand von zwei Einheiten sah auf dem Telefon wie ein Fehler aus, weil darueber schon die Kopfzeile mit eigener Hoehe steht. */ .hero .hero-kopfteil { order: 1; flex: 0 0 auto; padding-top: calc(var(--raster) * 0.75); } .hero-kompakt { padding-top: 0; padding-bottom: 0; min-height: 0; } /* Das Bild nimmt genau den Platz, der zwischen Ueberschrift und Knoepfen uebrig bleibt. Auf einem langen Geraet wird es hoeher, auf einem kurzen niedriger, und der Abstand der Knoepfe zum unteren Rand bleibt auf jedem Geraet derselbe. */ /* Das Schluesselbild steht zwischen Ueberschrift und Knoepfen und nimmt allen Platz, der uebrig bleibt. Es ist damit das groesste Element ueber der Falz, und die Knoepfe stehen darunter, nicht darueber. */ /* flex-basis 0, nicht auto: mit auto zieht das Bild seine eigene Hoehe als Ausgangswert heran und waechst ueber die Falz hinaus. Mit 0 nimmt es genau den Platz, der nach Ueberschrift und Knoepfen uebrig ist. */ .hero .hero-bg { order: 2; flex: 1 1 0; height: auto; min-height: 160px; max-height: none; position: relative; inset: auto; z-index: 0; } .hero .hero-bg img, .hero .hero-bg picture { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* Das freigestellte Foto laeuft nicht im Fluss mit, sondern liegt als Ebene hinter allem. Nur so kann es gross sein, ohne Ueberschrift oder Knoepfe zu verschieben, und ueberdecken kann es nichts, weil Text und Knoepfe darueber liegen. */ .hero .hero-bg-frei { position: absolute; inset: 0; flex: none; min-height: 0; z-index: 0; pointer-events: none; } /* Die Regel muss genauer sein als .hero .hero-bg img darueber, sonst zieht das Bild wieder auf volle Breite und laeuft rechts aus dem Schirm. */ .hero .hero-bg-frei img, .hero .hero-bg-frei picture { width: 76%; margin-left: 24%; height: 76%; margin-top: 24%; object-fit: contain; object-position: right bottom; /* Nach unten ausblenden, damit Knoepfe und der Satz darunter auf Papier stehen und nicht auf dem Hemd. */ -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 92%); mask-image: linear-gradient(to bottom, #000 52%, transparent 92%); } /* Ohne mitlaufendes Bild braucht die Handlung den freien Platz, damit sie am unteren Rand steht. */ .hero:has(.hero-bg-frei) .hero-handlung { margin-top: auto; } .hero .hero-kopfteil, .hero .hero-handlung { position: relative; z-index: 2; } .hero .hero-handlung { order: 3; flex: 0 0 auto; padding-top: calc(var(--raster) * 1.25); padding-bottom: calc(var(--raster) * 1.5); } /* Die Ueberschrift darf auf schmalen Schirmen etwas kleiner sein, damit Bild und Knoepfe zuverlaessig in dieselbe Bildschirmhoehe passen. */ .hero h1 { font-size: clamp(2rem, 9.5vw, 2.75rem); } .hero-nachsatz { margin-top: calc(var(--raster) * 0.75); font-size: .9rem; } /* Ohne eigene Ordnungszahl stuende der Nachtrag vor allem anderen: die Geschwister tragen 1 und 2, die Vorgabe ist 0. */ .hero-nachtrag { order: 3; padding-top: calc(var(--raster) * 2); padding-bottom: calc(var(--raster) * 2); } .hero .hero-lede { max-width: none; margin-bottom: var(--raster); } .hero-nachsatz { max-width: none; } .hero-text::before { display: none; } .hero .hero-kopfteil::before { content: ''; display: block; height: 1px; width: 48px; background: var(--graphit); margin-bottom: calc(var(--raster) * 1.5); } } /* Der Nachtrag steht auf breiten Schirmen wieder da, wo er immer stand: direkt unter der Ueberschrift und ueber den Knoepfen. */ @media (min-width: 861px) { /* Auf breiten Schirmen steht der Nachtrag wieder zwischen Ueberschrift und Knoepfen in derselben Spalte. Wichtig ist die Richtung: mit dem alten align-items:center und zwei Kindern wurde aus dem Kopfbereich eine Zweispalter, und der Absatz landete rechts ueber dem Bild. Untereinander und senkrecht zentriert ist das, was vorher schon galt, als es nur ein Kind gab. */ .hero { display: flex; flex-direction: column; justify-content: center; align-items: stretch; } /* Die drei Huellen loesen sich auch hier auf, damit der Absatz wieder zwischen Ueberschrift und Knoepfen steht und nicht darunter. Die Innenabstaende der Huelle uebernehmen die Kinder. */ .hero .hero-oben, .hero .hero-inner, .hero .hero-text { display: contents; } .hero .hero-kopfteil, .hero .hero-nachtrag, .hero .hero-handlung { position: relative; z-index: 2; width: 100%; max-width: var(--spalte); margin-left: auto; margin-right: auto; padding-left: calc(var(--raster) * 1.5); padding-right: calc(var(--raster) * 1.5); } .hero .hero-kopfteil > *, .hero .hero-nachtrag > *, .hero .hero-handlung > * { max-width: 560px; } .hero .hero-kopfteil { order: 1; } .hero .hero-nachtrag { order: 2; padding-top: var(--raster); } .hero .hero-handlung { order: 3; padding-top: calc(var(--raster) * 0.5); } .hero .hero-nachtrag .hero-lede { max-width: 44ch; } } /* Der Kopf ruckt auf breiten Schirmen nach. * * Die senkrechte Grundlinie sitzt bei 1,5 Rastereinheiten, der Text jedes * anderen Abschnitts bei 3,5. Der Kopf blieb bei 1,5, und dadurch lief die * Linie genau auf der linken Textkante: das Massband klebte beim Lesen am * ersten Buchstaben. Zwei Rastereinheiten Abstand, wie ueberall sonst. * * Die Regel steht hier und nicht im 940er-Block weiter oben, weil der * 861er-Block spaeter in der Datei kommt und bei gleicher Spezifitaet * gewinnt. Beim ersten Versuch aenderte sich deshalb gar nichts. */ @media (min-width: 940px) { .hero .hero-kopfteil, .hero .hero-nachtrag, .hero .hero-handlung { padding-left: calc(var(--raster) * 3.5); } } /* Der kompakte Hero der Unterseiten traegt kein Bild und braucht deshalb * weder Mindesthoehe noch Verlauf. */ .hero-kompakt { min-height: 0; display: block; padding: calc(var(--raster) * 4) 0 calc(var(--raster) * 3); } /* --- 01 Nummerierte Bloecke --------------------------------------------- */ /* Nummerierte Zeilen statt Fliesstext. Links die Mono-Nummer, rechts die * Szene, oben je eine feine Linie. Der Baustein, der den Rhythmus bricht. */ .bloecke { margin-top: calc(var(--raster) * 2); } .block { display: grid; grid-template-columns: calc(var(--raster) * 3) 1fr; gap: var(--raster); padding: calc(var(--raster) * 1.5) 0; border-top: 1px solid var(--linie); } .block:last-child { border-bottom: 1px solid var(--linie); } .block-nr { padding-top: 0.4em; } .block-text { max-width: 58ch; } .block-text strong { color: var(--graphit); } @media (max-width: 720px) { .block { grid-template-columns: 1fr; gap: calc(var(--raster) * 0.5); } .block-nr { padding-top: 0; } } /* --- 02 Ja-Nein-Zweispalte ---------------------------------------------- */ /* Gleiche Hoehe, senkrechte Trennlinie, keine Haekchen, keine Kreuze. Der * Unterschied zwischen den Spalten ist die Ueberschrift, sonst nichts. */ .janein { display: grid; grid-template-columns: 1fr 1px 1fr; gap: calc(var(--raster) * 2); margin-top: calc(var(--raster) * 2); } .janein-linie { background: var(--linie); } .janein-spalte h3 { margin-bottom: var(--raster); padding-bottom: calc(var(--raster) * 0.75); border-bottom: 1px solid var(--linie); } .janein-spalte ul { list-style: none; } .janein-spalte li { padding: calc(var(--raster) * 0.75) 0; border-bottom: 1px solid var(--linie); } .janein-spalte li:last-child { border-bottom: none; } .janein-nein h3 { color: var(--stahl); } /* Der Nachsatz gehoert zu beiden Spalten und darf sich deshalb nicht an die * linke anlehnen. Eigener Abstand, eigene Lesebreite. */ .janein-nach { margin-top: calc(var(--raster) * 2); padding-top: calc(var(--raster) * 1.5); border-top: 1px solid var(--linie); } @media (max-width: 800px) { .janein { grid-template-columns: 1fr; gap: calc(var(--raster) * 1.5); } .janein-linie { height: 1px; } } /* --- 03 Systemnachweis --------------------------------------------------- */ /* Zwei Portraets mit Name und Rolle in Mono, daneben Belege des gebauten * Systems. Streng begrenzt: Beleg, keine Galerie. */ .nachweis { display: grid; gap: calc(var(--raster) * 2); margin-top: calc(var(--raster) * 2); } @media (min-width: 940px) { .nachweis { grid-template-columns: 5fr 1px 7fr; } .nachweis::after { content: ''; grid-column: 2; background: var(--linie); } .portraets { grid-column: 1; } .belege { grid-column: 3; } } .portraets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raster); align-content: start; } /* Portraets und Belege stehen in ihrer eigenen Farbe, wie das Headerbild * auch. Ein Filter darauf haette sie zu Gestaltungselementen gemacht, und * sie sind Nachweis. */ .portraet img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--linie); border-radius: 2px; } .portraet-name { display: block; margin-top: calc(var(--raster) * 0.5); color: var(--graphit); font-weight: 600; font-size: .95rem; } .portraet-rolle { display: block; text-transform: none; letter-spacing: 0.05em; font-size: 11px; margin-top: 2px; } .belege { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raster); align-content: start; } .beleg img { width: 100%; height: auto; display: block; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border: 1px solid var(--linie); border-radius: 2px; } .beleg figcaption { margin-top: calc(var(--raster) * 0.5); font-size: 10px; letter-spacing: 0.1em; line-height: 1.5; } @media (max-width: 560px) { .belege { grid-template-columns: repeat(2, 1fr); } } /* --- Ruhepunkt ----------------------------------------------------------- */ /* Ein grosser Satz auf leerer Flaeche. Der Bruch im Rhythmus ist die * Gestaltung, deshalb steht hier ausser dem Satz nichts. */ .ruhepunkt { padding: calc(var(--raster) * 8) 0; } .ruhepunkt::before { display: none; } .ruhepunkt p { font-size: clamp(1.45rem, 3.2vw, 2.3rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; color: var(--graphit); max-width: 24ch; margin: 0 auto; text-align: center; text-wrap: balance; } /* --- Die weiche Flaeche --------------------------------------------------- */ .weich { background: var(--papier-hell); padding: calc(var(--raster) * 7) 0; } .weich .fliesstext { max-width: 68ch; line-height: 1.8; font-size: 1.06rem; } /* --- Bild und Text -------------------------------------------------------- */ .bio-inner { display: grid; gap: calc(var(--raster) * 2); align-items: start; } @media (min-width: 940px) { .bio-inner { grid-template-columns: 1fr 1fr; } } .bio-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); border-radius: 2px; } .bio-text .fliesstext { max-width: 54ch; } /* --- Szenen, Saeulen, Etappen (Bestandstypen im neuen Kleid) -------------- */ .szenen-liste { list-style: none; margin-top: calc(var(--raster) * 2); } .szene { padding: calc(var(--raster) * 1.25) 0; border-top: 1px solid var(--linie); max-width: 62ch; } .szene:last-child { border-bottom: 1px solid var(--linie); } .camps { margin-top: calc(var(--raster) * 2); } /* Ordnungswort und Name sind zwei Angaben, keine. Ohne eigenen Block laufen * sie ineinander: "THE INSIDEAVIANNA MCKEE". */ .camp-num em { display: block; margin-top: calc(var(--raster) * 0.4); font-style: normal; font-weight: 600; color: var(--graphit); letter-spacing: 0.1em; } .camp { display: grid; grid-template-columns: calc(var(--raster) * 7) 1fr; gap: var(--raster); padding: calc(var(--raster) * 1.5) 0; border-top: 1px solid var(--linie); align-items: start; } .camp-body { max-width: 58ch; } .path-stages { margin-top: calc(var(--raster) * 2); } .stage { display: grid; grid-template-columns: calc(var(--raster) * 3) 1fr; gap: var(--raster); padding: calc(var(--raster) * 1.5) 0; border-top: 1px solid var(--linie); } .stage-spacer { display: none; } .stage-title { margin-bottom: calc(var(--raster) * 0.5); } .stage-content { max-width: 58ch; } @media (max-width: 720px) { .camp, .stage { grid-template-columns: 1fr; gap: calc(var(--raster) * 0.5); } } /* --- Zwei Listen ---------------------------------------------------------- */ /* Die zwei Listen stehen als abgesetzte Flaeche, sonst schwimmen sie im * Fliesstext und der Nachsatz darunter lehnt sich an die linke Spalte. */ .foryou-grid { display: grid; gap: 0; margin: calc(var(--raster) * 2) 0 calc(var(--raster) * 2); background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 2px; } .foryou-col { padding: calc(var(--raster) * 1.5); } @media (min-width: 800px) { .foryou-grid { grid-template-columns: 1fr 1fr; } .foryou-col + .foryou-col { border-left: 1px solid var(--linie); } } @media (max-width: 799px) { .foryou-col + .foryou-col { border-top: 1px solid var(--linie); } } .foryou-grid ul, .foryou-grid ol { list-style: none; } .foryou-grid li { padding: calc(var(--raster) * 0.75) 0; border-bottom: 1px solid var(--linie); } .foryou-grid li:last-child { border-bottom: none; padding-bottom: 0; } .foryou-grid h3 { margin-bottom: var(--raster); padding-bottom: calc(var(--raster) * 0.75); border-bottom: 1px solid var(--linie); } .foryou-grid + .fliesstext, .foryou-grid + * { margin-top: calc(var(--raster) * 2); } /* --- Preise --------------------------------------------------------------- */ .preiszeile { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; color: var(--graphit); letter-spacing: -0.03em; margin-top: calc(var(--raster) * 1.5); } .preiszeile-detail { color: var(--graphit-weich); font-size: .95rem; margin-top: calc(var(--raster) * 0.5); max-width: 52ch; } .stufen-raster { display: grid; gap: calc(var(--raster) * 1.5); margin-top: calc(var(--raster) * 2); } @media (min-width: 900px) { .stufen-raster { grid-template-columns: 1fr 1fr; } } .stufen-raster .stufe { display: block; border: 1px solid var(--linie); background: var(--papier-hell); border-radius: 2px; padding: calc(var(--raster) * 1.5); } .stufen-raster .preis { font-size: 1.5rem; font-weight: 700; color: var(--graphit); letter-spacing: -0.03em; margin: var(--raster) 0 0; } .stufen-raster ul { list-style: none; margin-top: var(--raster); } .stufen-raster li { padding: calc(var(--raster) * 0.5) 0; border-top: 1px solid var(--linie); font-size: .95rem; } /* Der Nachsatz gehoert zu beiden Karten und klebte bisher an ihrer * Unterkante. Derselbe Fehler wie bei der Ja-Nein-Spalte und bei den zwei * Listen: ein Block nach einem Raster braucht seinen eigenen Abstand. */ .stufen-raster + .fliesstext { margin-top: calc(var(--raster) * 2); padding-top: calc(var(--raster) * 1.5); border-top: 1px solid var(--linie); } .stufe-lede { color: var(--graphit-weich); margin-top: calc(var(--raster) * 0.5); } .stufen-raster .stufe h3 { margin-bottom: calc(var(--raster) * 0.25); } .stufen-raster .btn { margin-top: calc(var(--raster) * 1.25); } .posten-liste { list-style: none; margin-top: calc(var(--raster) * 2); max-width: 720px; } .posten { display: flex; justify-content: space-between; gap: var(--raster); padding: calc(var(--raster) * 0.75) 0; border-top: 1px solid var(--linie); } .posten-name { color: var(--graphit-weich); } .posten-preis { white-space: nowrap; color: var(--graphit); } .posten-summe { border-top: 1px solid var(--graphit); margin-top: var(--raster); } .posten-summe .posten-name, .posten-summe .posten-preis { color: var(--graphit); font-weight: 600; } /* Der eigene Preis, direkt unter der Vergleichssumme. Kein Rahmen, keine * Farbe, nur die blaue Kante links: der Unterschied soll aus der Zahl * kommen und nicht aus der Gestaltung. */ .posten-unser { border-top: 0; margin-top: 0; margin-bottom: calc(var(--raster) * 2); padding-left: var(--raster); border-left: 3px solid var(--blau); background: var(--papier-hell); } .posten-unser .posten-name, .posten-unser .posten-preis { color: var(--graphit); } .posten-unser .posten-preis { padding-right: var(--raster); } /* Eine Nachweis-Sektion ohne Portraets ist einspaltig: sonst bleiben die * Belege in der rechten Spalte kleben und die linke Haelfte steht leer. * :has() faellt auf aelteren Browsern aus, dort steht der Block dann wie * vorher, also lesbar und nur nicht ideal ausgerichtet. */ .portraets:empty { display: none; } @media (min-width: 940px) { .nachweis:has(.portraets:empty) { grid-template-columns: 1fr; } .nachweis:has(.portraets:empty)::after { display: none; } .nachweis:has(.portraets:empty) .belege { grid-column: 1; } } /* --- FAQ ------------------------------------------------------------------ */ .faq-liste { margin-top: calc(var(--raster) * 2); } .faq-item { padding: calc(var(--raster) * 1.5) 0; border-top: 1px solid var(--linie); } .faq-item:last-child { border-bottom: 1px solid var(--linie); } .faq-frage { margin-bottom: var(--raster); } .faq-antwort { max-width: 62ch; } /* --- Schluss und Fusszeile ------------------------------------------------ */ .final-inner .fliesstext { max-width: 52ch; } .site-footer { border-top: 1px solid var(--linie); padding: calc(var(--raster) * 3) 0; } .footer-inner { display: flex; flex-wrap: wrap; gap: var(--raster); align-items: baseline; } .footer-brand { color: var(--graphit); } .footer-links { display: flex; gap: var(--raster); margin-left: auto; } .footer-links a { border: none; } .footer-links a:hover { color: var(--blau); } /* --- Fortschritt und Einblendungen ---------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 101; pointer-events: none; } .scroll-progress-bar { height: 100%; background: var(--blau); width: 0; } .js .reveal-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; } .js .reveal-on-scroll.is-revealed { opacity: 1; transform: none; } /* --- Bewerbungsfenster ----------------------------------------------------- */ .wr-modal { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(31, 33, 36, 0.55); } /* Die Klasse heisst "open", nicht "is-open". Mit dem falschen Namen laedt * der Knopf die Survey brav und das Fenster bleibt unsichtbar: der Knopf * wirkt tot, obwohl alles laeuft. */ .wr-modal.open { display: grid; place-items: center; padding: var(--raster); } .wr-modal-inner { background: var(--papier-hell); width: min(760px, 100%); height: min(80vh, 900px); position: relative; border: 1px solid var(--linie); border-radius: 2px; } .wr-survey-frame { width: 100%; height: 100%; border: 0; } .wr-modal-close { position: absolute; top: var(--raster); right: var(--raster); background: none; border: none; cursor: pointer; z-index: 2; font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphit-weich); } .wr-survey-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stahl); } .wr-survey-loading-dot { display: none; } /* Das Skript blendet den Ladehinweis mit dieser Klasse aus. Ohne die Regel * bleibt er ueber dem Formular stehen, sobald es geladen hat. */ .wr-survey-loading.is-hidden { display: none; } /* --- Musterhaus: die eingebettete Anwendung ----------------------------- * * Auf breiten Schirmen steht die Anwendung in einem Telefonrahmen, daneben * vier Zeilen, die sagen, was zu sehen ist. Auf dem Handy entfaellt beides: * ein Telefon im Telefon ist albern, und bedienen laesst sich eine * Anwendung in einem 300 Pixel breiten Fenster ohnehin nicht. Dort steht * ein Standbild und darunter der Knopf, der die Anwendung ganz normal * aufmacht. */ .mh-buehne { display: grid; gap: calc(var(--raster) * 2); align-items: start; } .mh-geraet { display: none; } .mh-standbild { max-width: 300px; } .mh-standbild img { display: block; width: 100%; height: auto; border: 1px solid var(--linie-stark, rgba(31,33,36,.22)); } .mh-liste { list-style: none; margin: 0 0 calc(var(--raster) * 1.5); padding: 0; max-width: 46ch; } .mh-liste li { position: relative; padding-left: calc(var(--raster) * 1.25); margin-bottom: calc(var(--raster) * 0.75); } .mh-liste li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 12px; height: 1px; background: var(--graphit); } @media (min-width: 940px) { .mh-buehne { grid-template-columns: 430px 1fr; } .mh-standbild { display: none; } .mh-geraet { display: block; width: 430px; padding: 20px 20px 26px; border: 1px solid var(--graphit); background: var(--papier-hell); position: relative; } /* Der Steg unter dem Bild, wie am Geraet. Kein Foto eines Telefons: die * Zeichnung der Seite kommt ohne Abbildungen von Dingen aus. */ .mh-geraet::after { content: ''; position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); width: 96px; height: 3px; background: var(--linie-stark); } .mh-rahmen { display: block; width: 390px; height: 760px; border: 0; background: var(--papier); } } /* --- Rechtstexte ----------------------------------------------------------- */ .rechtstext { max-width: 68ch; } .rechtstext h2 { font-size: 1.1rem; margin: calc(var(--raster) * 2) 0 var(--raster); } .rechtstext ul { margin: 0 0 1em calc(var(--raster)); } /* --- Diagnose -------------------------------------------------------------- * Der Test erbt die Grundformen und braucht nur die Stellen, an denen * basis.css eigene Farben gesetzt hatte. */ .dg-form, .dg-ergebnis { max-width: 46rem; margin-top: calc(var(--raster) * 2); } /* Laeuft der Bogen, ist der Abschnitt der ganze Seiteninhalt. * * Der Abstand oben ist fuer einen Abschnitt bemessen, der eine * Ueberschrift traegt und unter anderen Abschnitten steht. Ohne Kopfbereich * und ohne "Fangen wir an." stuenden darueber sechs Rasterhoehen Nichts. */ .diagnose.ist-im-bogen { padding-top: calc(var(--raster) * 1.5); } .diagnose.ist-im-bogen { border-top: none; } /* Das mitwachsende Tragwerk anstelle eines Balkens. * * Es steht klebend oben, damit es beim Scrollen im Bild bleibt: das Teil, * das gerade dazugekommen ist, soll man sehen, ohne nach oben zu gehen. * Der Hintergrund ist deckend, sonst laufen die Linien durch die Frage * darunter. */ .dg-fortschritt { position: sticky; top: var(--kopfzeile, 64px); z-index: 3; display: flex; align-items: center; gap: var(--raster); padding: calc(var(--raster) * 0.5) 0; background: var(--papier); border-bottom: 1px solid var(--linie); } .dg-bau { width: 232px; height: auto; flex: none; overflow: visible; } .dg-bau path { fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Der Bauplan: von Anfang an da, damit der leere Platz nach dem aussieht, * was er ist. */ .dg-bau-plan path { stroke: var(--graphit); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.16; } .dg-bau-bau path { stroke: var(--stahl); stroke-width: 2; opacity: 0; } .dg-bau-bau path.ist-da { opacity: 1; } /* Das zuletzt gebaute Teil bleibt kurz blau stehen. Eine Rueckmeldung, * die man nicht lesen muss. */ .dg-bau path.ist-frisch { stroke: var(--blau); } .dg-zaehler { margin: 0; } @media (max-width: 520px) { .dg-bau { width: 168px; } .dg-fortschritt { gap: calc(var(--raster) * 0.75); } } /* Das fertige Bauwerk bleibt stehen. * * Es einfach verschwinden zu lassen, sobald die letzte Frage beantwortet * ist, nimmt der Sache ihren Schluss: fuenfzehn Antworten lang baut jemand * etwas auf, und dann ist es weg. Hier steht es gross ueber dem Ergebnis. */ .dg-bau-gross { margin-bottom: calc(var(--raster) * 1.5); } .dg-bau-gross:empty { display: none; } .dg-bau-gross .dg-bau { width: min(100%, 420px); } .dg-bau-hinweis { margin-top: calc(var(--raster) * 0.5); color: var(--stahl); } /* Die Beats bauen nichts. Statt eines Teils atmet das Bauwerk einmal, * damit die Pause als Pause zu sehen ist und nicht als Stillstand. */ @media (prefers-reduced-motion: no-preference) { .dg-fortschritt.ist-pause .dg-bau { animation: dgAtem 2.4s ease-in-out infinite; } } @keyframes dgAtem { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .dg-fragen { list-style: none; } /* Der Wechsel von Frage zu Frage. * * Vorher verschwand die eine und die naechste stand da. Das liest sich wie * ein Formular, das weiterspringt, und nicht wie etwas, durch das man * geht. Die neue Frage kommt von rechts herein, leicht und kurz: lang * genug, dass die Bewegung ankommt, kurz genug, dass sie bei fuenfzehn * Fragen nicht nervt. */ @media (prefers-reduced-motion: no-preference) { .dg-frage:not([hidden]) { animation: dgHerein .46s cubic-bezier(.22,.61,.36,1) both; } .dg-fragen.geht-zurueck .dg-frage:not([hidden]) { animation-name: dgZurueck; } /* Der Abgang. Vorher wurde die alte Frage einfach versteckt, und damit * war von "geht nach links" nichts zu sehen. Kuerzer als der Auftritt: * das Weggehen muss man nicht ansehen, das Kommen schon. */ .dg-frage.geht-raus { animation: dgRaus .24s cubic-bezier(.55,.06,.68,.19) both; } .dg-fragen.geht-zurueck .dg-frage.geht-raus { animation-name: dgRausZurueck; } } @keyframes dgHerein { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } } @keyframes dgZurueck { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } } @keyframes dgRaus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-48px); } } @keyframes dgRausZurueck { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(48px); } } /* Die getroffene Wahl bleibt 220 Millisekunden stehen, bevor es * weitergeht. In dieser Zeit muss sie auch zu sehen sein. */ .dg-antwort:has(input:checked) { background: var(--papier); } .dg-antwort input:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; } .dg-dim { margin-bottom: calc(var(--raster) * 0.5); } .dg-frage-text { margin-bottom: var(--raster); } .dg-nr { display: inline-block; min-width: 2.6em; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; color: var(--stahl); letter-spacing: 0.12em; vertical-align: middle; } .dg-antworten { display: grid; gap: calc(var(--raster) * 0.5); } .dg-antwort { display: flex; gap: var(--raster); align-items: flex-start; padding: var(--raster); border: 1px solid var(--linie); background: var(--papier-hell); cursor: pointer; border-radius: 2px; transition: border-color .2s; } .dg-antwort:hover { border-color: var(--stahl); } .dg-antwort:has(input:checked) { border-color: var(--graphit); } .dg-antwort input { margin-top: .4em; accent-color: var(--blau); flex: none; } /* Die Rueckfrage unter der Antwort. * * Sie gehoert sichtbar zu der Antwort, die sie ausgeloest hat, also * eingerueckt und mit derselben blauen Linie wie die Beats. Sie klappt auf * und faellt nicht ein: eine Bewegung von null auf ihre Hoehe liest sich * als Folge des eigenen Klicks. */ .dg-nach { margin-top: var(--raster); border-left: 2px solid var(--blau); padding-left: calc(var(--raster) * 1.25); } @media (prefers-reduced-motion: no-preference) { .dg-nach:not([hidden]) { animation: dgAuf .28s cubic-bezier(.22,.61,.36,1) both; } } @keyframes dgAuf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .dg-nach-frage { display: block; margin-bottom: calc(var(--raster) * 0.5); color: var(--graphit); font-weight: 500; } .dg-nach-feld { width: 100%; padding: calc(var(--raster) * 0.75) var(--raster); font: inherit; color: var(--graphit); background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 2px; outline: none; } .dg-nach-feld:focus { border-color: var(--blau); } .dg-nach-knoepfe { display: flex; align-items: center; gap: var(--raster); margin-top: var(--raster); } .dg-nach-weg { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: .9rem; color: var(--stahl); text-decoration: underline; text-underline-offset: 3px; } .dg-nach-weg:hover { color: var(--graphit); } /* Die Beats. * * Sie muessen anders aussehen als die Fragen, sonst fuehlt sich der Check * nach sechzehn Fragen an statt nach zwoelf plus vier Pausen. Deshalb: * keine Nummer, ein eingerueckter Block mit einer Linie an der Seite, und * ein Feld, das wie eine Zeile aussieht und nicht wie ein Aufsatz. Ein * Rahmen ueber zweitausend Zeichen liest sich als Hausaufgabe. */ .dg-beat { border-left: 2px solid var(--blau); padding-left: calc(var(--raster) * 1.25); } .dg-beat .dg-dim { display: flex; gap: calc(var(--raster) * 0.5); align-items: baseline; color: var(--blau); } .dg-beat-frei { color: var(--stahl); } .dg-beat .dg-frage-text { margin-bottom: calc(var(--raster) * 0.75); } .dg-beat-feld { width: 100%; padding: var(--raster); font: inherit; color: var(--graphit); background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 2px; outline: none; resize: vertical; min-height: calc(var(--raster) * 3); } .dg-beat-feld:focus { border-color: var(--blau); } .dg-beat-klein { margin-top: calc(var(--raster) * 0.75); color: var(--stahl); } .dg-beat-knoepfe { display: flex; align-items: center; gap: var(--raster); margin-top: calc(var(--raster) * 1.25); } .dg-beat-weg { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: .9rem; color: var(--stahl); text-decoration: underline; text-underline-offset: 3px; } .dg-beat-weg:hover { color: var(--graphit); } .dg-steuerung { margin-top: calc(var(--raster) * 1.5); } .dg-steuerung .btn[disabled] { opacity: .3; pointer-events: none; } .dg-ergebnis-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--raster); padding-bottom: var(--raster); border-bottom: 1px solid var(--linie); margin-bottom: calc(var(--raster) * 1.5); } .dg-stufe h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: var(--raster); } .dg-schwaechen { margin-top: calc(var(--raster) * 2); padding-top: calc(var(--raster) * 1.5); border-top: 1px solid var(--linie); } .dg-schwaeche { border-left: 2px solid var(--linie); padding: var(--raster) calc(var(--raster) * 1.25); background: var(--papier-hell); } .dg-schwaeche.dg-ist-schwach { border-left-color: var(--blau); } .dg-schwaeche + .dg-schwaeche { margin-top: calc(var(--raster) * 0.5); } .dg-schwaeche-dim { display: flex; justify-content: space-between; gap: var(--raster); margin-bottom: calc(var(--raster) * 0.5); color: var(--graphit); } .dg-wert { text-transform: none; letter-spacing: 0.08em; color: var(--stahl); } .dg-optin > h3 { margin-bottom: var(--raster); } .dg-optin { margin-top: calc(var(--raster) * 2); padding: calc(var(--raster) * 1.5); border: 1px solid var(--linie); background: var(--papier-hell); border-radius: 2px; } .dg-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raster); margin: var(--raster) 0; } .dg-feld { display: block; } .dg-feld > label { display: block; margin-bottom: calc(var(--raster) * 0.5); } .dg-feld span { display: block; margin-bottom: calc(var(--raster) * 0.4); } .dg-feld input, .dg-feld textarea { width: 100%; padding: calc(var(--raster) * 0.6) var(--raster); font: inherit; color: var(--graphit); background: var(--papier); border: 1px solid var(--linie); border-radius: 2px; } .dg-feld textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .dg-feld input:focus, .dg-feld textarea:focus { outline: none; border-color: var(--blau); } .dg-feld-breit { margin-bottom: var(--raster); } .dg-stichpunkte { list-style: none; margin: 0 0 var(--raster); } .dg-stichpunkte li { position: relative; padding-left: var(--raster); margin-bottom: calc(var(--raster) * 0.3); font-size: .9rem; color: var(--graphit-weich); } .dg-stichpunkte li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--stahl); } .dg-klein, .dg-feld-hinweis { display: block; font-size: .85rem; line-height: 1.6; color: var(--graphit-weich); text-transform: none; letter-spacing: 0; margin-top: calc(var(--raster) * 0.5); } .dg-meldung { margin-top: var(--raster); color: var(--blau); } /* display:none, nicht nur aus dem Bild geschoben. Ein Feld, das links * ausserhalb liegt, ist fuer Chromes Ausfuellhilfe weiterhin vorhanden, und * genau daran ist am 03.09.2026 eine echte Bewerbung als Bot * durchgefallen. */ .dg-honig { display: none; } .dg-bericht { margin-top: calc(var(--raster) * 2); padding: calc(var(--raster) * 1.5); background: var(--papier-hell); border-top: 2px solid var(--blau); border-left: 1px solid var(--linie); border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } .dg-bericht-text p { margin-bottom: 1.1em; } .dg-bericht-fuss { margin-top: calc(var(--raster) * 1.5); padding-top: var(--raster); border-top: 1px solid var(--linie); } .dg-bericht-fuss p { font-size: .87rem; color: var(--stahl); } .dg-schluss { margin-top: calc(var(--raster) * 2); padding-top: calc(var(--raster) * 1.5); border-top: 1px solid var(--linie); } .js .dg-ergebnis[hidden] { display: none; } @media (max-width: 560px) { .dg-felder { grid-template-columns: 1fr; } } /* --- Nachtraege ----------------------------------------------------------- */ /* Das breite Bild zwischen Kopf und Spalten. Ohne Begrenzung stand es in * seiner natuerlichen Breite da und lief ueber den Rand hinaus. */ .bildband { margin: calc(var(--raster) * 2) 0; } .bildband img, .bildband picture { display: block; width: 100%; height: auto; } /* 21:9 auf einem Hochkantmotiv schneidet die Koepfe ab, wenn mittig * ausgerichtet wird. Der Ausschnitt sitzt deshalb im oberen Drittel. */ .bildband img { aspect-ratio: 21 / 9; object-fit: cover; object-position: center 22%; border: 1px solid var(--linie); border-radius: 2px; } /* Die Nummer vor der Augenbraue bekommt eine eigene Kante, damit sie als * Zaehlung liest und nicht als Teil des Wortes. */ .eyebrow-num { position: relative; padding-right: 0.9em; } .eyebrow-num::after { content: ''; position: absolute; right: 0.35em; top: 0.15em; bottom: 0.15em; width: 1px; background: var(--linie); } /* Der Hero der Unterseiten. Er traegt ein eigenes Bild und dieselbe Maske * wie die Startseite, nur flacher. */ .hero-kompakt { min-height: min(56vh, 520px); display: flex; align-items: center; padding: calc(var(--raster) * 3) 0; } /* Auf den Unterseiten traegt die Ueberschrift eine Aussage, keine Parole. * In Startseitengroesse braucht sie vier Zeilen, schiebt den Knopf unter die * Kante und laeuft ins Bild. Kleiner und breiter gesetzt passt beides. */ .hero-kompakt h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); max-width: 19ch; letter-spacing: -0.03em; } .hero-kompakt .hero-lede { max-width: 50ch; } /* Die Kopfzeichnungen der Unterseiten sind Vektor und sollen nicht * beschnitten werden: eine Konstruktionszeichnung, der eine Kante fehlt, ist * keine mehr. Deshalb contain statt cover, rechts ausgerichtet, und keine * Maske, denn die Zeichnung hat ihre leere Haelfte schon eingebaut. */ /* Der Kopf einer Unterseite traegt entweder eine Konstruktionszeichnung * oder ein Foto, und die beiden wollen das Gegenteil voneinander. * * Die Zeichnung darf nicht beschnitten werden, denn einer Zeichnung, der * eine Kante fehlt, kann man nicht mehr trauen. Sie braucht auch keinen * Verlauf, ihre leere Haelfte ist eingebaut. Also: vollstaendig einpassen, * rechts ausrichten, keine Maske. * * Das Foto fuellt die Flaeche und laeuft nach links in das Papier aus, wie * auf der Startseite. Es erbt damit einfach die Regeln von .hero-bg. */ /* Die Breite allein wiegt die beiden Kopfzeichnungen nicht gleich: die eine * ist fast quadratisch, die andere doppelt so breit wie hoch. Deshalb * begrenzt zusaetzlich die Hoehe, und jede Seite darf ihren Faktor setzen. */ /* Die Zeichnung steht neben dem Text, nicht in der oberen Ecke. Vorher * sass sie oben, weil margin:auto nur im Flex- oder Rasterfluss zentriert * und der Kopfbereich beides nicht war. */ .hero-bg-zeichnung { left: auto; width: min(46%, 760px); display: flex; align-items: center; justify-content: flex-end; padding-right: calc(var(--raster) * 2); } .hero-bg-zeichnung img, .hero-bg-zeichnung picture { width: auto; height: auto; max-width: 100%; max-height: var(--zeichnung-hoehe, 62%); margin: 0; object-fit: contain; -webkit-mask-image: none; mask-image: none; } /* Feste Stufen statt eines Inline-Stils. Jede Seite waehlt ueber * data-hoehe, wieviel Hoehe ihre Kopfzeichnung einnehmen darf. */ .hero-bg-zeichnung[data-hoehe="42"] { --zeichnung-hoehe: 42%; } .hero-bg-zeichnung[data-hoehe="46"] { --zeichnung-hoehe: 46%; } .hero-bg-zeichnung[data-hoehe="55"] { --zeichnung-hoehe: 55%; } .hero-bg-zeichnung[data-hoehe="66"] { --zeichnung-hoehe: 66%; } .hero-bg-zeichnung[data-hoehe="78"] { --zeichnung-hoehe: 78%; } /* Die Merkmalszeile unter dem Vorspann: was der Test kostet, wie lange er * dauert, was danach passiert. Sie steht ueber dem Knopf, weil genau diese * drei Angaben die Frage beantworten, die vor dem Klick im Kopf steht. */ .hero-merkmale { display: flex; flex-wrap: wrap; gap: calc(var(--raster) * 0.75); align-items: center; margin: calc(var(--raster) * 1.25) 0 0; padding: 0; list-style: none; } .hero-merkmale li { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphit); } .hero-merkmale li + li::before { content: ''; display: inline-block; width: 14px; height: 1px; background: var(--stahl); vertical-align: middle; margin-right: calc(var(--raster) * 0.75); } /* Die Zeile unter dem Knopf raeumt den letzten Einwand ab, bevor jemand klickt. Sie stand in Stahl, und nur fuer die Startseite war das einmal korrigiert worden. Jetzt gilt die Korrektur ueberall. */ .hero-nachsatz { margin-top: var(--raster); font-size: .95rem; color: var(--graphit-weich); max-width: 44ch; } @media (max-width: 860px) { .hero-kompakt { min-height: 0; } .hero-kompakt .hero-bg { height: 34vh; min-height: 220px; } } /* Ein Abschnitt mit Zeichnung: Text links, Konstruktion rechts. Die * Zeichnung steht nicht als Schmuck daneben, sie zeigt, wovon der Absatz * spricht. Auf schmalen Schirmen rutscht sie unter den Text. */ .mit-zeichnung .wrap { display: grid; gap: calc(var(--raster) * 2); align-items: start; } @media (min-width: 940px) { .mit-zeichnung .wrap { grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "kopf zeichnung" "text zeichnung"; } .mit-zeichnung .kopf { grid-area: kopf; margin-bottom: 0; } .mit-zeichnung .fliesstext { grid-area: text; } .mit-zeichnung .zeichnung { grid-area: zeichnung; width: 100%; } } .zeichnung { margin: 0; } /* Zeichnung und Unterschrift gehoeren zusammen: die Zeichnung steht auf * hellerem Papier mit Rahmen, wie ein eingeklebtes Blatt, darunter die * Erklaerung. Ohne Unterschrift waere sie Dekoration mit gutem Gewissen. */ .zeichnung img, .zeichnung-mitte img { display: block; width: 100%; height: auto; background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 2px; padding: var(--raster); } .zeichnung figcaption, .zeichnung-mitte figcaption { margin-top: var(--raster); font-size: .88rem; line-height: 1.6; color: var(--graphit-weich); max-width: 46ch; } @media (max-width: 640px) { } /* Eine Zeichnung, die das Verhaeltnis zweier Spalten zeigt, steht neben dem * Text, der sie erklaert, und nicht darunter: unter dem Absatz liest sie * sich als Abschluss, daneben als Beleg des Gesagten. Auf schmalen Schirmen * rutscht sie darunter, dort gibt es keine zweite Spalte. */ .zeichnung-mitte { margin: calc(var(--raster) * 2) 0; max-width: 420px; } @media (min-width: 940px) { /* Kopf links, Zeichnung rechts, alles Weitere darunter ueber die volle * Breite. Gilt fuer alle Abschnitte, die eine Nebenzeichnung tragen. */ .mit-nebenzeichnung .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: calc(var(--raster) * 3); align-items: start; } .mit-nebenzeichnung .kopf { grid-column: 1; grid-row: 1; } .mit-nebenzeichnung .wrap > .fliesstext:first-of-type { grid-column: 1; grid-row: 2; } .mit-nebenzeichnung .zeichnung-mitte { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; } .mit-nebenzeichnung .bildband, .mit-nebenzeichnung .camps-list, .mit-nebenzeichnung .szenen-liste, .mit-nebenzeichnung .bloecke, .mit-nebenzeichnung .stempel, .mit-nebenzeichnung .wrap > .fliesstext:last-of-type { grid-column: 1 / -1; } } /* --- Instagram-Stand ------------------------------------------------------ * Kein Fremdkoerper: dieselbe Linienstaerke wie die Zeichnungen, dieselbe * Kante wie die Belege, keine Markenfarbe. Die Zahl traegt, nicht das Logo. */ /* Ein einzelner Beleg fuellt die Spalte und behaelt seine eigenen * Proportionen. Das 9/16 darueber ist fuer Telefonaufnahmen gedacht und * wuerde ein Querformat an der rechten Kante abschneiden. */ .belege-eins { grid-template-columns: 1fr; } .belege-eins .beleg img { aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; } .ig-stand { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; text-decoration: none; color: var(--graphit); margin-top: var(--raster); padding-top: var(--raster); border-top: 1px solid var(--linie); } .ig-stand:hover { color: var(--blau); } .ig-marke { align-self: center; flex: none; } /* Die Zahl zaehlt sich beim Hinscrollen hoch. Feste Ziffernbreite und eine * Mindestbreite fuer die Endzahl, sonst wackelt die Zeile beim Zaehlen. */ .ig-zahl { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; display: inline-block; } .ig-label { font-size: .95rem; color: var(--graphit-weich); } .ig-handle { margin-left: auto; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stahl); } /* --- Rechtstexte -------------------------------------------------------- * Impressum, Datenschutz und AGB liegen im Entwurfszweig unter eigener * Adresse, damit ein Klick ins Kleingedruckte den Entwurf nicht verlaesst * und im alten Aussehen landet. * * Ein Rechtstext wird gelesen und nicht ueberflogen: eine Spalte, ruhige * Abstaende, und die Zwischentitel deutlich kleiner als auf den anderen * Seiten. Die grossen h2 der Verkaufsseiten wuerden hier wie vierzig * Ueberschriften hintereinander wirken. Die Linie ueber jedem Titel * uebernimmt das Trennen, das sonst die Groesse leisten muesste. */ /* Ein Kopf ohne Bild und ohne Handlungsaufruf braucht auch keine halbe * Bildschirmhoehe. Vor einem Rechtstext stand sonst ein Titel allein in * einer leeren Flaeche, und der Text begann erst nach dem ersten Scrollen. */ .hero:has(+ .rechtstext) { min-height: 0; } .hero:has(+ .rechtstext) .hero-oben { min-height: 0; } .hero:has(+ .rechtstext) .hero-nachtrag { margin-top: calc(var(--raster) * 0.5); } .rechtstext .wrap { max-width: calc(var(--spalte) * 0.72); } .rechtstext h2 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -0.01em; margin: calc(var(--raster) * 2.5) 0 calc(var(--raster) * 0.75); padding-top: calc(var(--raster) * 0.75); border-top: 1px solid var(--linie); } .rechtstext h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .rechtstext p, .rechtstext li { max-width: 68ch; } .rechtstext ul { margin: 0 0 1em; padding-left: 1.2em; } .rechtstext li { margin-bottom: 0.35em; } /* Ein Kundenlogo, kein Schmuck: klein, ohne Rahmen, mit Abstand nach oben. */ .kundenlogo { margin-top: calc(var(--raster) * 2); } .kundenlogo img { display: block; width: 120px; height: auto; } .kundenlogo figcaption { margin-top: calc(var(--raster) * 0.75); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stahl); } /* Im Bild-Text-Abschnitt steht die Ueberschrift ohne .kopf-Huelle direkt * ueber dem Fliesstext und bekam deshalb keinen Abstand nach unten. */ .bio-text > h2, .bio-text > h3 { margin-bottom: calc(var(--raster) * 1.5); } /* Der Stand unter der Followerzahl. Klein, aber vorhanden: eine Zahl ohne * Datum behauptet, sie waere von jetzt. */ .ig-datum { flex-basis: 100%; margin-top: calc(var(--raster) * 0.4); font-size: 11px; letter-spacing: 0.08em; color: var(--stahl); } /* --- Das Arbeitsfenster --------------------------------------------------- * Waehrend die Auswertung geschrieben wird, dauert es eine halbe Minute. Ein * Knopf, der in dieser Zeit nichts sagt, sieht kaputt aus, und wer die Seite * verlaesst, verliert sein Ergebnis. Das Fenster haelt die Aufmerksamkeit * und zeigt, dass etwas laeuft, indem es benennt, was gerade laeuft. */ .dg-arbeit { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--raster); background: rgba(31, 33, 36, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .dg-arbeit-karte { width: min(100%, 30rem); background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 2px; padding: calc(var(--raster) * 1.75); } .dg-arbeit-balken { height: 3px; background: var(--linie); border-radius: 2px; overflow: hidden; } .dg-arbeit-balken span { display: block; height: 100%; width: 40%; background: var(--blau); border-radius: 2px; animation: dgLauf 1.6s ease-in-out infinite; } @keyframes dgLauf { 0% { transform: translateX(-100%); } 50% { transform: translateX(90%); } 100% { transform: translateX(250%); } } .dg-arbeit-schritt { margin-top: var(--raster); font-size: 1.05rem; line-height: 1.5; color: var(--graphit); min-height: 3.2em; } .dg-arbeit-fuss { margin-top: calc(var(--raster) * 0.75); font-size: .88rem; color: var(--stahl); } @media (prefers-reduced-motion: reduce) { .dg-arbeit-balken span { animation: none; width: 100%; } } /* --- Die Ergebnisseite --------------------------------------------------- */ .dg-post { margin-top: calc(var(--raster) * 2); padding: calc(var(--raster) * 1.75); background: var(--papier-hell); border: 1px solid var(--linie); border-left: 3px solid var(--blau); border-radius: 2px; } .dg-post h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: var(--raster) 0; } .dg-post .dg-klein { margin-top: var(--raster); color: var(--stahl); } .dg-leer { margin-top: calc(var(--raster) * 2); max-width: 46rem; } .ergebnis-seite { padding-top: calc(var(--raster) * 4); } /* Die Kontextfragen und die drei Freitextfelder im Opt-in. */ .dg-kontext, .dg-felder-block { margin-top: calc(var(--raster) * 2); } .dg-kontext > h4, .dg-felder-block > h4 { font-size: 1.05rem; margin-bottom: calc(var(--raster) * 0.5); } .dg-kontext + .dg-felder-block { margin-top: calc(var(--raster) * 2.5); } .dg-feld select { width: 100%; padding: calc(var(--raster) * 0.6) var(--raster); font: inherit; color: var(--graphit); background: var(--papier); border: 1px solid var(--linie); border-radius: 2px; } .dg-feld select:focus { outline: none; border-color: var(--blau); } .dg-felder-block .dg-feld-breit { margin-top: var(--raster); } /* --- Der Nachweis unter dem Ergebnis -------------------------------------- * Kein Kleingedrucktes. Der Block ist ein Argument: er zeigt, was die * Maschine wirklich gelesen hat, und die Liste kommt aus den Werkzeug- * Ergebnissen der Schnittstelle, nicht aus dem Text des Modells. */ .dg-nachweis { margin-top: calc(var(--raster) * 3); padding-top: calc(var(--raster) * 2); border-top: 1px solid var(--linie); } .dg-nachweis h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: var(--raster); } .dg-nachweis-satz { max-width: 46rem; line-height: 1.7; } .dg-nachweis-liste { list-style: none; margin: var(--raster) 0; padding-left: var(--raster); border-left: 2px solid var(--linie); font-family: 'Archivo', ui-monospace, monospace; font-size: .85rem; letter-spacing: 0.02em; color: var(--graphit-weich); } .dg-nachweis-liste li { padding: calc(var(--raster) * 0.2) 0; overflow-wrap: anywhere; } .dg-nachweis .fliesstext { margin-top: var(--raster); } /* Stand frueher als style-Attribut im HTML. Ausgelagert, damit die * Inhaltsrichtlinie ohne unsafe-inline fuer Stile auskommt. */ .nachweis-text { margin-top: calc(var(--raster) * 2); } /* Der Sprung auf die erste Frage darf nicht unter der klebenden Kopfzeile * landen. scroll-margin schiebt das Ziel um deren Hoehe nach unten. */ #dgFragen { scroll-margin-top: calc(var(--raster) * 5); } /* Kurze Geraete, etwa ein iPhone SE mit 667 Punkten Hoehe. Dort passt die * vierzeilige Ueberschrift nicht mehr neben Bild und Knoepfe, also wird sie * kleiner und die Abstaende enger. Gemessen wird die Hoehe, nicht die * Breite: entscheidend ist, wieviel senkrecht zur Verfuegung steht. */ @media (max-width: 860px) and (max-height: 740px) { .hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); } .hero .hero-kopfteil { padding-top: var(--raster); } .hero .hero-kopfteil::before { margin-bottom: var(--raster); } .hero .hero-bg { min-height: 110px; } .hero-handlung { padding-top: var(--raster); padding-bottom: calc(var(--raster) * 0.75); } .hero .eyebrow { font-size: 11px; } } /* --- Die mitlaufende Leiste ---------------------------------------------- * Erscheint, sobald der Kopfbereich vorbei ist, und geht wieder weg, sobald * der Abschluss im Bild ist. Sie klebt am unteren Rand, weil dort auf dem * Telefon der Daumen liegt. */ .laufleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--papier-hell); border-top: 1px solid var(--linie); padding: calc(var(--raster) * 0.6) 0; padding-bottom: calc(var(--raster) * 0.6 + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .28s ease; } .laufleiste.ist-da { transform: none; } .laufleiste-inner { display: flex; align-items: center; gap: var(--raster); justify-content: space-between; } .laufleiste-text { font-size: .9rem; line-height: 1.4; color: var(--graphit-weich); } .laufleiste .btn { flex: none; } @media (max-width: 560px) { .laufleiste-text { font-size: .82rem; } .laufleiste-text strong { display: block; } .laufleiste .btn { padding: calc(var(--raster) * 0.7) var(--raster); } } @media (prefers-reduced-motion: reduce) { .laufleiste { transition: none; } } /* Der eingeklappte Block mit den drei Fragen. Zugeklappt sieht das Formular * nach drei Feldern aus statt nach acht, aufgeklappt liefert es das beste * Material fuer die Auswertung. */ .dg-felder-block > summary { cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 600; color: var(--graphit); padding: calc(var(--raster) * 0.75) 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } .dg-felder-block > summary::-webkit-details-marker { display: none; } .dg-felder-block > summary::after { content: '+'; float: right; font-weight: 400; color: var(--stahl); } .dg-felder-block[open] > summary::after { content: '–'; } .dg-felder-block > summary .dg-klein { display: block; font-weight: 400; margin-top: 2px; color: var(--stahl); } .dg-felder-block > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; } .dg-felder-block[open] > .dg-feld-hinweis { margin-top: var(--raster); } /* Die wiederholte Ergebnisstufe auf der Ergebnisseite. */ .dg-stufen-ergebnis { margin-bottom: calc(var(--raster) * 2); } .dg-stufen-ergebnis h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: var(--raster); } /* Der Satz, der den schwaechsten Bereich nennt, ist der Anschluss an das, was darueber steht, und darf deshalb etwas schwerer wiegen als der Fliesstext darunter. */ .dg-schluss-bereich { font-size: 1.05rem; font-weight: 600; margin-bottom: .6em; } .dg-schluss-nachsatz { margin-top: var(--raster); color: var(--stahl); max-width: 46ch; } @media (prefers-reduced-motion: reduce) { } /* Tippziele. Gemessen wurden fuenf Stellen unter 44 Punkten: der * Sprachumschalter mit 18, die drei Rechtslinks mit 19 und die Wortmarke * mit 26. Die sichtbare Groesse bleibt, die Trefferflaeche waechst. */ .lang-btn, .fuss-links a, .topnav .marke, .fuss-marke { position: relative; display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 860px) { .fuss-links { gap: calc(var(--raster) * 0.5) var(--raster); } } /* ========================================================================== * Kopfbereich auf dem Telefon, abschliessend. * * Diese Regeln stehen am Ende, weil frueher im Stylesheet mehrere aeltere * .hero-kompakt-Bloecke liegen, die sonst gewinnen. Hier wird der Aufbau * fuer alle Kopfbereiche festgelegt: Augenbraue und Ueberschrift oben, das * Schluesselbild dazwischen, die Knoepfe in festem Abstand ueber dem * unteren Rand. * ====================================================================== */ @media (max-width: 860px) { .hero, .hero-kompakt { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; } .hero .hero-oben { display: flex; flex-direction: column; min-height: calc(100dvh - var(--kopfzeile, 64px)); } /* Der Strich ueber der Augenbraue entfaellt, er kostet Hoehe und traegt auf dem Telefon nichts bei. */ .hero .hero-kopfteil::before, .hero .hero-text::before { display: none; } .hero .hero-kopfteil { order: 1; flex: 0 0 auto; padding-top: calc(var(--raster) * 0.75); } /* Die Zeichnung der Unterseiten steht mittig und nimmt den ganzen Platz zwischen Ueberschrift und Knoepfen. Die Regeln fuer breite Schirme haben sie nach rechts gedrueckt und auf 46 Prozent begrenzt. */ .hero .hero-bg-zeichnung { position: relative; inset: auto; left: auto; width: 100%; max-width: none; padding-right: 0; order: 2; display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-height: 180px; } .hero .hero-bg-zeichnung img, .hero .hero-bg-zeichnung picture, .hero .hero-bg-zeichnung .bewegt { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; object-position: center; } /* Ein gerendertes Objekt ist quadratisch, die Zeichnungen davor waren querformatig. Bei voller Breite waere es auf dem Telefon so hoch wie breit und schoebe den Text aus dem ersten Bild. Deshalb hier gedeckelt, und zwar in vh und nicht in Pixeln, damit es auf einem kleinen Geraet mitgeht. */ .hero .hero-bg-zeichnung .bewegt { max-height: 34vh; width: auto; } /* Das freigestellte Foto liegt als Ebene hinter allem, gross genug, dass der Scheitel auf Hoehe der Ueberschrift sitzt, und links leicht beschnitten, damit das Gesicht frei steht. */ .hero .hero-bg-frei { position: absolute; inset: 0; flex: none; min-height: 0; z-index: 0; pointer-events: none; display: block; } /* Gemessen statt geschaetzt: der Kopfbereich ist 759 Punkte hoch, die Ueberschrift endet 239 Punkte unter seiner Oberkante, das sind 32 Prozent. Der Scheitel setzt knapp darunter an, damit das Gesicht in keinem Fall hinter der Schrift liegt. Hoeher ginge nur, wenn die Ueberschrift schmaler waere, und die soll ihre Zeilen behalten. */ .hero .hero-bg-frei img, .hero .hero-bg-frei picture { width: 96%; margin-left: 4%; height: 70%; margin-top: 33%; object-fit: contain; object-position: right top; -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 97%); mask-image: linear-gradient(to bottom, #000 66%, transparent 97%); } .hero:has(.hero-bg-frei) .hero-handlung { margin-top: auto; } .hero .hero-kopfteil, .hero .hero-handlung { position: relative; z-index: 2; } .hero .hero-handlung { order: 3; flex: 0 0 auto; padding-top: calc(var(--raster) * 1.25); padding-bottom: calc(var(--raster) * 1.5); } .hero .hero-nachtrag { order: 4; } } @media (max-width: 860px) and (max-height: 740px) { .hero .hero-bg-zeichnung { min-height: 130px; } .hero .hero-bg-frei img, .hero .hero-bg-frei picture { height: 80%; margin-top: 20%; } } /* Knopf und Nachsatz stehen immer auf Papier, nie auf dem Hemd. * * Das Bild blendet nach unten aus, aber die Maske rechnet in Prozent der * BILDhoehe, und die ist nicht konstant: auf niedrigen Schirmen wird das * Bild von 70 auf 80 Prozent gezogen, damit es nicht winzig wirkt. Damit * rutscht der noch deckende Teil nach unten, genau dorthin, wo der Satz * "Kostenlos, acht Minuten, Ergebnis sofort." steht. Auf einem iPhone mit * ausgefahrener Adresszeile (402 auf 690) lag der Unterarm dahinter und * die zweite Zeile war nicht mehr zu lesen. * * Eine schaerfere Maske waere die naheliegende Antwort und die falsche: * sie haengt an derselben wandernden Prozentzahl und nimmt auf hohen * Schirmen unnoetig viel vom Foto weg. Diese Flaeche dagegen liegt am * Text selbst und gilt deshalb bei jeder Bildhoehe. * * Der Verlauf oben ist kurz: der Knopf ist dunkel und braucht ihn nicht, * die zwei Zeilen darunter schon. */ @media (max-width: 860px) { /* Die Flaeche haengt am Block selbst und nicht an einem negativen Rand: margin-top wird hier von "auto" getragen, das den Block an den unteren Rand schiebt. Ein negativer Wert ersetzt dieses auto, der Kopfbereich wuchs dadurch von 690 auf 1143 Punkte und das Foto kam unter dem Text wieder hervor. Einmal probiert, einmal verworfen. Der Verlauf beginnt deshalb an der Oberkante und reicht ueber ein Viertel der Blockhoehe. Der Knopf liegt darin und braucht ihn nicht, die zwei Zeilen darunter stehen auf vollem Papier. */ .hero:has(.hero-bg-frei) .hero-handlung { background: linear-gradient(to bottom, rgba(244, 242, 238, 0) 0%, var(--papier) 26%); } } /* Die Zeichnungen in den hellen Kaesten fuellen ihren Rahmen jetzt aus. * Vorher stand um jede eine Rasterbreite Rand, wodurch die eigentliche * Zeichnung klein wirkte und Details verlorengingen. */ .zeichnung img, .zeichnung-mitte img { padding: calc(var(--raster) * 0.4); } .zeichnung-mitte { max-width: 560px; } /* Ein Foto an derselben Stelle. * * Der helle Innenrand ist fuer Strichzeichnungen gedacht, er gibt ihnen * Luft im Rahmen. Ein Foto bringt seine eigene Flaeche mit und sieht mit * Innenrand aus wie ein Passepartout, das niemand bestellt hat. */ .zeichnung-foto img { padding: 0; background: none; } @media (min-width: 940px) { .mit-zeichnung .wrap { grid-template-columns: minmax(0, 1fr) 500px; } .mit-nebenzeichnung .wrap { grid-template-columns: minmax(0, 1fr) 500px; } } /* Der Zwischenstand nach der Haelfte der Fragen. Er zeigt zum ersten Mal, * dass die Maschine mitliest, und zwar genau dort, wo die meisten sonst * abbrechen. Gebaut aus den bisherigen Antworten, ohne Modell und ohne * Kosten. */ .dg-zwischenstand { margin-bottom: calc(var(--raster) * 1.5); padding: var(--raster) calc(var(--raster) * 1.25); background: var(--papier-hell); border-left: 3px solid var(--blau); border-radius: 2px; font-size: 1rem; line-height: 1.6; color: var(--graphit); animation: dgAuf .4s ease; } @keyframes dgAuf { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .dg-zwischenstand { animation: none; } } /* --- Lange Woerter brechen ------------------------------------------------ * "Persoenlichkeitsentwicklungsszene" ist in einer grossen Ueberschrift * breiter als ein Telefon. Ohne Umbruchregel schiebt so ein Wort die ganze * Seite auf und macht sie waagerecht scrollbar. Trennung, wo es geht, * Bruch als letzte Rettung. */ h1, h2, h3, h4, p, li, summary, .eyebrow, .btn { overflow-wrap: break-word; } /* Kein hyphens:auto und kein anywhere: beides hat die Ueberschrift der * Startseite mitten im Wort getrennt und ihre gesetzten Zeilen zerlegt. * break-word greift nur, wenn ein Wort allein nicht in die Zeile passt, * und genau das ist der Fall, den es zu loesen gab. */ /* Und ein Netz darunter: nichts darf breiter sein als der Schirm. */ html, body { overflow-x: hidden; max-width: 100%; } /* --- Der Freisteller: kleiner, rechts angeschnitten, faehrt herein -------- * Er soll gross wirken, ohne in die Ueberschrift zu laufen. Deshalb sitzt * er tiefer, ist schmaler als vorher, und die rechte Schulter laeuft aus * dem Bild. Beim Laden faehrt er von rechts ein, das gibt der Seite einen * Moment Bewegung, ohne dass etwas springt. */ @media (max-width: 860px) { /* Ausgerichtet, nicht geschaetzt. * * Vorher standen hier Prozentwerte, die auf einem Geraet gut aussahen und * auf dem naechsten nicht: der Kopf rutschte in die Schrift oder das * Gesicht landete in der Mitte, und die Zeile unter den Knoepfen lag auf * dem Foto und war nicht mehr zu lesen. * * Jetzt gilt eine Regel, und verhalten.js rechnet sie fuer jede * Bildschirmhoehe aus: * * Der Scheitel liegt auf der Oberkante der Ueberschrift. * Die Kopfmitte liegt bei drei Vierteln der Breite. * Der Text endet dort, wo die Gestalt anfaengt. * * Die drei Masse dafuer sind am Bild abgelesen und stehen im Skript: * Scheitel bei 1,9 Prozent der Bildhoehe, Kopfmitte bei 54,2 Prozent der * Breite, linke Kante der Gestalt bei 32,2 Prozent. Aendert sich das * Foto, aendern sich diese drei Zahlen und sonst nichts. */ .hero .hero-bg-frei { overflow: hidden; } .hero .hero-bg-frei picture { display: contents; } .hero .hero-bg-frei img { position: absolute; left: var(--bild-x, 0); top: var(--bild-y, 36%); width: var(--bild-b, 112%); height: var(--bild-h, 72%); margin: 0; object-fit: contain; object-position: left top; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); } /* Die Schrift bleibt links von der Gestalt. * * Nur die Ueberschrift und die Zeile unter den Knoepfen, nicht die * Augenbraue: die steht oberhalb des Scheitels und hat die ganze Breite * fuer sich. Die Knoepfe duerfen ueber dem Foto liegen, sie haben eine * eigene Flaeche und bleiben lesbar. */ .hero:has(.hero-bg-frei) .hero-kopfteil h1, .hero:has(.hero-bg-frei) .hero-nachsatz { max-width: var(--text-breite, 54%); } /* Die Zeile unter den Knoepfen stand in Stahlgrau und lag auf einem kurzen Schirm am Aermel: hellgrau auf Haut ist nicht zu lesen. Sie bekommt hier die Textfarbe, damit sie auf Papier wie auf Foto steht. */ .hero:has(.hero-bg-frei) .hero-nachsatz { color: var(--graphit-weich); } /* In der halben Breite braucht die Ueberschrift einen kleineren Grad, sonst bricht sie mitten im Wort. Vier Zeilen sind gesetzt, nicht zufaellig: "Ich baue / die Struktur / hinter Arbeit, / die tief geht." */ /* Der Grad steht hier als Rueckfallwert. Den geltenden rechnet verhalten.js aus der Spaltenbreite aus, damit das laengste Wort immer hineinpasst: bei 360 Punkten brach sonst "aufzuzehren." um, und der Punkt stand allein auf der letzten Zeile. */ .hero:has(.hero-bg-frei) .hero-kopfteil h1 { font-size: var(--h1-groesse, clamp(1.65rem, 7.4vw, 2.05rem)); line-height: 1.1; } } .js .hero-bg-frei img, .js .hero-bg-frei picture { animation: heroHerein .8s cubic-bezier(.22,.61,.36,1) both; } @keyframes heroHerein { from { opacity: 0; transform: translateX(14%); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js .hero-bg-frei img, .js .hero-bg-frei picture { animation: none; } } /* --- Die Zeichnungen zeichnen sich selbst -------------------------------- * * Die Steuerung liegt im JavaScript, nicht hier. Der Versuch ueber CSS ist * an der Kaskade gescheitert: die Regel fuer den gezeichneten Zustand hat * nachweislich gepasst und trotzdem nicht gegriffen, die Zeichnungen * blieben unsichtbar. Inline gesetzte Werte und die Web-Animations- * Schnittstelle sind eindeutig, und eine Zeichnung, die man nicht sieht, * ist der schlimmste aller Ausgaenge. Deshalb steht hier nichts mehr. */ /* Inline statt : die Groesse kommt jetzt vom Element selbst. */ .zeichnung svg, .zeichnung-mitte svg { display: block; width: 100%; height: auto; background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 2px; padding: calc(var(--raster) * 0.4); } .hero-bg-zeichnung svg { display: block; width: 100%; height: auto; } /* --- Die technische Zeile in der Fusszeile -------------------------------- * Vier Angaben, alle wahr und im Browser nachprüfbar. Die letzten beiden * erzwingt die Inhaltsrichtlinie, die ersten beiden misst die Seite an sich * selbst. Ohne JavaScript steht dort der Teil, der immer gilt. */ .footer-technik { margin-top: var(--raster); padding-top: var(--raster); border-top: 1px solid var(--linie); } .footer-technik p { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stahl); line-height: 1.7; max-width: 70ch; } /* --- Die Grundlinie als Massband ---------------------------------------- * Die senkrechte Linie laeuft ohnehin durch jeden Abschnitt. Hier bekommt * sie eine Marke, die mit dem Lesen mitwandert: ein dunkler Abschnitt vom * oberen Rand bis zum Lesestand, unten mit zwei Haekchen abgeschlossen, wie * ein Mass auf einer Bauzeichnung. Kein Balken, kein Prozentwert. */ @media (min-width: 940px) { .massband { position: fixed; top: var(--kopfzeile, 64px); z-index: 40; left: max(calc(var(--raster) * 1.5), calc((100vw - var(--spalte)) / 2 + var(--raster) * 1.5)); width: 1px; height: 0; background: var(--graphit); pointer-events: none; will-change: height; } .massband::after { content: ''; position: absolute; bottom: 0; left: -4px; width: 9px; height: 1px; background: var(--graphit); } .massband::before { content: ''; position: absolute; top: 0; left: -4px; width: 9px; height: 1px; background: var(--graphit); } } @media (max-width: 939px) { .massband { display: none; } } /* --- Die Buchungsseite -------------------------------------------------- * * Eine Seite, eine Aufgabe. Deshalb keine Spalten, keine Zeichnung und * nichts darunter: was hier ablenkt, kostet eine Buchung. */ .buchung .wrap { max-width: 46rem; } .bu-schritte { margin-bottom: calc(var(--raster) * 1.5); } .bu-tor { border-left: 2px solid var(--blau); padding: var(--raster) 0 var(--raster) calc(var(--raster) * 1.25); } .bu-haken { display: flex; gap: var(--raster); align-items: flex-start; cursor: pointer; } .bu-haken input { margin-top: .3em; width: 20px; height: 20px; flex: none; accent-color: var(--blau); cursor: pointer; } .bu-haken span { color: var(--graphit); } .bu-hinweis { margin-top: calc(var(--raster) * 0.75); color: var(--stahl); } .bu-stand { margin-top: calc(var(--raster) * 0.75); color: var(--blau); font-size: .9rem; } /* Der Rahmen bekommt eine feste Hoehe: das Widget ist eine fremde Seite * und kann ihre eigene nicht melden. Zu niedrig heisst scrollen im * Scrollen, deshalb lieber zu hoch. */ .bu-rahmen { margin-top: calc(var(--raster) * 1.5); border: 1px solid var(--linie); background: var(--papier-hell); min-height: 720px; } .bu-rahmen iframe { display: block; width: 100%; height: 720px; border: 0; } .bu-laedt { padding: calc(var(--raster) * 2); color: var(--stahl); } .bu-offen .bu-laedt { display: none; } /* Gesperrt heisst grau, nicht weg. * * Solange die Widerrufserklaerung fehlt, ist der Kalender zu sehen und * nicht zu bedienen. Das Farbloswerden sagt das ohne ein Wort, und weil * der Rahmen inert traegt, gilt es auch fuer Tastatur und Vorlesehilfe. * Der Uebergang ist langsam genug, dass man ihn bemerkt: er ist die * Belohnung fuer das Haekchen. */ .bu-rahmen { transition: filter .45s ease, opacity .45s ease; } .bu-gesperrt { filter: grayscale(1); opacity: .42; user-select: none; } .bu-sperrwort { margin-top: calc(var(--raster) * 0.6); color: var(--stahl); text-align: center; } /* Die Attrappe. * * Sie hat die Proportionen des echten Kalenders und keinen seiner * Inhalte: ein Kopf, sieben Wochentage, fuenf Reihen. Aus Balken und * Scheiben in der Linienfarbe, damit auf den ersten Blick klar ist, dass * hier nichts zu lesen ist, sondern etwas zu erwarten. */ .bu-attrappe { padding: calc(var(--raster) * 1.5); } .bu-att-kopf { display: flex; align-items: center; gap: var(--raster); margin-bottom: calc(var(--raster) * 1.5); } .bu-att-scheibe { width: 46px; height: 46px; border-radius: 50%; background: var(--linie); flex: none; } .bu-att-balken { height: 12px; width: min(220px, 55%); background: var(--linie); } .bu-att-woche, .bu-att-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--raster) * 0.75); justify-items: center; } .bu-att-woche { margin-bottom: calc(var(--raster) * 1.25); } .bu-att-tag { width: 60%; height: 8px; background: var(--linie); } .bu-att-feld { width: 26px; height: 26px; border-radius: 50%; background: var(--linie); opacity: .55; } .bu-offen .bu-attrappe { display: none; } /* "Der Kalender wird geladen" gilt erst, wenn er auch geholt wird. Neben der Attrappe waere es eine Ankuendigung ohne Vorgang. */ .bu-gesperrt .bu-laedt { display: none; } /* Solange die Attrappe steht, ist sie das Mass. Die feste Hoehe gehoert dem echten Kalender, der seine eigene nicht melden kann; der Attrappe uebergestuelpt liesse sie unter den Punkten dieselbe Leere stehen, die sie gerade fuellen soll. Der Sprung beim Haekchen faellt nicht auf, das Haekchen scrollt ohnehin hierher. */ .bu-rahmen.bu-gesperrt { min-height: 0; height: auto; } @media (prefers-reduced-motion: reduce) { .bu-rahmen { transition: none; } } @media (max-width: 620px) { .bu-rahmen, .bu-rahmen iframe { min-height: 860px; height: 860px; } .bu-rahmen.bu-gesperrt { min-height: 0; height: auto; } /* Sieben Spalten auf 300 Pixel: die Scheiben duerfen kleiner werden, sonst sprengen sie das Raster. */ .bu-attrappe { padding: var(--raster); } .bu-att-feld { width: 22px; height: 22px; } .bu-att-scheibe { width: 38px; height: 38px; } } /* --- Fokus --------------------------------------------------------------- * * Sechs Regeln weiter oben schalten den Rahmen des Browsers ab und * ersetzen ihn nur durch einen Farbwechsel an einer 1-Pixel-Linie. Bei * Verknuepfungen und Knoepfen greift dagegen der Standard, die * Formularfelder fielen also als einzige aus der Reihe. Diese Regel * steht am Ende und gilt damit fuer alles, was bedient wird. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; } /* --- Die Buchungsseite ---------------------------------------------------- * * Links der Weg, rechts das Gekaufte. Vorher stand vor dem Kalender nur * die gesetzliche Erklaerung, und das Letzte vor der Zahlung war ein * Haekchen zum Verzicht auf das Widerrufsrecht. */ .bu-oben { display: grid; gap: calc(var(--raster) * 2); grid-template-columns: 1fr; align-items: start; } @media (min-width: 861px) { .bu-oben { grid-template-columns: 1.15fr 1fr; } } .bu-vorher { margin-top: calc(var(--raster) * 1.2); border-left: 2px solid var(--linie); padding-left: var(--raster); } .bu-umriss { border: 1px solid var(--linie); padding: calc(var(--raster) * 1.2); background: var(--papier-hell); } .bu-umriss h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stahl); margin: 0 0 1em; } .bu-umriss ul { list-style: none; margin: 0; padding: 0; } .bu-umriss li { padding-block: .6em; border-top: 1px solid var(--linie); font-size: .95rem; line-height: 1.55; } .bu-umriss li:first-child { border-top: 0; padding-top: 0; } /* --- Vorher und Nachher -------------------------------------------------- * * Das Foto steht frei, die Punkte stehen darunter. * * Erst lagen sie als Text auf dem Bild. Lesbar wurden sie nur durch einen * Schleier, und der nahm genau das weg, wofuer das Bild da ist: die * Huette im Eis, die Abendsonne, die Kinder auf dem Holz. Ueber Gesichter * lief er obendrein. Ein Verlauf, der ein Foto rettet, ist immer ein * Verlauf, der dasselbe Foto beschaedigt. * * Darunter braucht es nichts davon: keinen Schleier, keinen Schattenwurf, * keine Ruecksicht auf helle Stellen im Motiv. Die Spalten stehen unter * ihrer Bildhaelfte, damit bleibt die Zuordnung ohne ein einziges Wort * Erklaerung. Und sie duerfen verschieden lang sein: auf Papier ist eine * Spalte, die frueher endet, keine Luecke, sondern Luft. */ .vergleich { margin: calc(var(--raster) * 2) 0 calc(var(--raster) * 2.5); } /* Die Unterschrift ist hier keine Fussnote, sondern die Schlagzeile ueber der Doppelseite. Sie bleibt unter der h2 darueber: zwei gleich laute Zeilen uebereinander liest niemand als Folge. */ .vgl-unterschrift { margin: 0 0 var(--raster); font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--graphit); } /* Das Bild bricht aus der Spalte aus und laeuft ueber das ganze Fenster. * * Der Bruch ist Absicht: er gibt der Aufnahme den Auftritt, den sie in * einer 1240 Pixel breiten Spalte nicht hat. Unterschrift und Punkte * bleiben in der Spalte, sonst begaenne der Text am Fensterrand und * stuende nicht mehr auf einer Flucht mit der Ueberschrift darueber. * * Gedeckelt bei 1600 Pixeln: die Vorlage ist 1376 Pixel breit, darueber * wuerde sie sichtbar weichgerechnet. Das Abschneiden uebernimmt * overflow-x an der Sektion, denn 100vw ist um die Breite des Rollbalkens * groesser als die Seite und ergaebe sonst waagerechtes Scrollen. */ .bloecke-sektion:has(.vergleich) { overflow-x: clip; } .vgl-bild { position: relative; left: 50%; transform: translateX(-50%); width: min(100vw, 1600px); display: grid; grid-template-columns: 1fr 1fr; /* Die Fuge. Zwei Aufnahmen mit Papier dazwischen liest man als zwei, stumpf aneinander als eine Montage. */ gap: calc(var(--raster) * 0.5); } .vgl-haelfte { position: relative; overflow: hidden; } /* picture ist ohne Zutun ein Inline-Element und damit so breit wie das Bild darin, nicht so breit wie die Zelle. Das img darin auf 100 Prozent zu setzen bezieht sich dann auf diese Eigenbreite und aendert nichts: die Haelften blieben 666 statt 714 Pixel breit, und die Fuge sah aus wie ein Fehler. */ .vgl-bild picture { display: block; width: 100%; } .vgl-bild img { display: block; width: 100%; height: auto; } /* Das Wort in der Bildhaelfte gibt es nur auf schmalen Schirmen. Darueber stehen die Spalten nebeneinander unter ihrer Haelfte, und dann sagt die Stellung schon, welche gemeint ist. Es sitzt oben links, wo auf beiden Aufnahmen Himmel und Dach liegen und kein Gesicht. */ .vgl-marke-bild { display: none; } @media (max-width: 640px) { .vgl-marke-bild { display: block; position: absolute; top: calc(var(--raster) * 0.5); left: calc(var(--raster) * 0.5); margin: 0; padding: .35em .7em; background: rgba(18,20,23,.72); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 2px; } } .vgl-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: calc(var(--raster) * 1.25); align-items: start; } /* Die Rinne zwischen den Textspalten. Ausdruecklich nur dort: dieselben zwei Klassen tragen auch die Bildhaelften, und die hatten dadurch 48 Pixel Innenabstand, in denen das Foto fehlte. Die Fuge sah aus wie ein Fehler, obwohl sie 12 Pixel breit war. */ .vgl-spalten .vgl-links { padding-right: calc(var(--raster) * 2); } .vgl-spalten .vgl-rechts { padding-left: calc(var(--raster) * 2); } .vgl-marke { margin: 0 0 calc(var(--raster) * 0.75); padding-bottom: calc(var(--raster) * 0.5); border-bottom: 1px solid var(--linie); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stahl); } /* Der Punkt vorn ist ein eigenes Zeichen und kein list-style: so steht er in der Farbe der Nebensache, waehrend die Zeile selbst im Fliesston bleibt, und der Einzug haengt nicht an der Vorgabe des Browsers. */ .vgl-punkte { list-style: none; margin: 0; padding: 0; font-size: .98rem; line-height: 1.45; color: var(--graphit); } .vgl-punkte li { position: relative; padding-left: 1.1em; margin-bottom: calc(var(--raster) * 0.6); } .vgl-punkte li::before { content: ''; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; background: var(--stahl); border-radius: 50%; } .vgl-rechts .vgl-punkte li::before { background: var(--blau); } .vgl-punkte li:last-child { margin-bottom: 0; } /* Auf dem Telefon stehen die beiden untereinander. Nebeneinander waere jede Spalte 150 Pixel breit, und darin steht kein Satz mehr. */ @media (max-width: 640px) { .vgl-spalten { grid-template-columns: 1fr; gap: calc(var(--raster) * 1.5); } .vgl-spalten .vgl-links { padding-right: 0; } .vgl-spalten .vgl-rechts { padding-left: 0; } } /* --- Drei Groessen im Kopfbereich ---------------------------------------- * * Ueberschrift, Unterzeile, Begruendung. Der erste Absatz traegt die * Aussage und ist deutlich groesser als die drei darunter: waeren alle * vier gleich gross, waere keiner davon eine Unterzeile. * * Die Groesse haengt an der Fensterbreite und nicht an der Hoehe. Vorher * stand sie hinter einer Bedingung fuer hohe Fenster, und auf einem * normalen Notebook sah der Kopf deshalb aus wie vier gleich grosse * Absaetze. Klein gemacht wird erst, wenn die Hoehe wirklich knapp wird, * und das steht weiter unten. * * Die Spalte reicht bis in die Bildmitte. Sie endete im vorderen Drittel, * und dahinter lag eine Bildhaelfte Meer ohne Aufgabe. Der Verlauf im * Foto ist dort noch weit offen, die Schrift steht also auf Papier und * nicht auf dem Motiv. */ @media (min-width: 861px) { .hero .hero-kopfteil > *, .hero .hero-nachtrag > *, .hero .hero-handlung > * { max-width: min(56vw, 1240px); } /* Keine Zeichenbegrenzung mehr an der Ueberschrift: die Spalte begrenzt sie. Mit 20ch brach sie auf einem breiten Schirm mitten im Satz um, obwohl rechts daneben noch Platz war. */ .hero h1 { max-width: none; } .hero .hero-nachtrag .hero-lede { max-width: min(50vw, 960px); } /* Die Unterzeile traegt etwas mehr Gewicht als der Rest. Nicht 700: das ist die Ueberschrift, und zwei Fettungen untereinander heben sich gegenseitig auf. */ .hero .hero-lede p:first-child { font-size: clamp(1.25rem, 1.8vw, 1.9rem); font-weight: 500; line-height: 1.34; letter-spacing: -0.012em; max-width: 44ch; margin-bottom: .8em; } .hero .hero-lede p + p { font-size: 1.02rem; line-height: 1.6; max-width: 62ch; } } /* Wird die Hoehe knapp, schrumpfen beide Groessen, nicht der Text. Sonst steht der Knopf auf einem 13-Zoll-Notebook unter der Fensterkante, und ein Knopf, den niemand sieht, ist keiner. */ @media (min-width: 861px) and (max-height: 880px) { .hero .hero-lede p:first-child { font-size: 1.22rem; margin-bottom: .55em; } .hero .hero-lede p + p { font-size: .96rem; line-height: 1.5; } .hero .hero-lede p { margin-bottom: .55em; } } /* Der Schlusssatz unter dem Vergleich. * * Ueberall sonst ist der Stempel eine kleine Zeile in Versalien, die den * Abschnitt unten zumacht. Hier ist er das Einzige, was nach dem Bild noch * kommt, also traegt er den Abschluss allein und darf entsprechend laut * sein. Kursiv und nicht fett: fett waere eine zweite Ueberschrift, kursiv * ist eine Unterschrift unter das Gesagte. Moeglich ist das erst, seit ein * echter kursiver Schnitt geladen wird. */ .bloecke-sektion:has(.vergleich) .stempel { margin-top: calc(var(--raster) * 2.5); padding-top: calc(var(--raster) * 1.5); border-top: 1px solid var(--linie); /* Eine Zeile, kein Umbruch. Die Groesse haengt deshalb an der Fensterbreite und nicht an einer festen Stufe: 2,1vw ist knapp die Breite, die der Satz auf der Spalte braucht. Die Zeichenbreite ist aufgehoben, sonst bricht sie ihn genau dort um, wo er stehen soll. */ font-size: clamp(1.05rem, 2.1vw, 1.95rem); font-style: italic; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; text-transform: none; color: var(--graphit); max-width: none; } @media (min-width: 641px) { .bloecke-sektion:has(.vergleich) .stempel { white-space: nowrap; } } /* Die Zeichnung steht nur neben dem Kopf, der Text laeuft darunter durch. * * Die uebliche Anordnung stellt die Abbildung neben den ganzen Abschnitt. * Ist sie flach und der Text lang, bleibt rechts unter ihr ein leeres Feld * stehen, und der Text draengt sich links in einer schmalen Spalte. Mit * zeichnung_oben: true in der Inhaltsdatei sitzt die Abbildung oben rechts * neben der Ueberschrift, und der Fliesstext nimmt darunter die ganze * Breite. Ein Schalter am Inhalt und keine Regel fuer alle: bei einer * hohen Zeichnung neben kurzem Text ist die alte Anordnung die richtige. */ @media (min-width: 940px) { /* Kein Raster, sondern ein umflossenes Bild. * * Im Raster liegen Kopf und Abbildung in derselben Zeile, und die Zeile * ist so hoch wie das hoehere von beiden. Ist die Abbildung hoeher als * die Ueberschrift, entsteht darunter ein Loch von hundert Pixeln, * bevor der Text anfaengt. Als Gleitobjekt haengt die Abbildung rechts * oben, und der Text laeuft ohne Sprung durch. Seine Breite ist so * bemessen, dass er neben der Abbildung nicht angeschnitten wird. */ .mit-zeichnung.zeichnung-oben .wrap { display: block; } .mit-zeichnung.zeichnung-oben .wrap::after { content: ''; display: block; clear: both; } .mit-zeichnung.zeichnung-oben .zeichnung { /* Mitwachsend, nicht fest: bei 940 Pixeln Fenster liesse eine feste Breite fuer den Text zu wenig uebrig. */ float: right; width: min(560px, 46%); margin: 0 0 calc(var(--raster) * 1.5) calc(var(--raster) * 2); } .mit-zeichnung.zeichnung-oben .kopf { margin-bottom: var(--raster); } /* Der Text laeuft um das Bild herum und darunter weiter. * * Vorher war er auf die Restbreite neben dem Bild gedeckelt, und damit * blieb unter dem Bild eine leere Flaeche stehen. Jetzt hat er die volle * Lesebreite: die ersten Absaetze werden vom Gleitobjekt schmal gehalten, * die spaeteren laufen unter ihm durch. Genau das kann ein Gleitobjekt * und ein Raster nicht. */ .mit-zeichnung.zeichnung-oben .kopf > * { max-width: 62ch; } .mit-zeichnung.zeichnung-oben .fliesstext { max-width: 74ch; } } /* --- Ein Satz auf einem Bild --------------------------------------------- * * Das Bild ist Flaeche, kein Beleg: es soll faerben, nicht erklaeren. * Deshalb keine Unterschrift, kein Rahmen, keine Nummer, nur der eine * Satz in der Mitte. * * Die Schrift steht in Graphit und nicht in Weiss. Die Aufnahme ist hell, * weisse Schrift brauchte einen Schleier darunter, und ein Schleier deckt * genau das zu, wofuer das Bild da ist. Mit dunkler Schrift auf hellem * Himmel reicht der Kontrast von selbst. */ .bildsatz { position: relative; padding: 0; overflow: hidden; } .bildsatz-bild { position: absolute; inset: 0; } .bildsatz-bild picture { display: block; width: 100%; height: 100%; } .bildsatz-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; } .bildsatz-text { position: relative; z-index: 1; margin: 0 auto; max-width: 22ch; padding-block: clamp(calc(var(--raster) * 5), 16vw, calc(var(--raster) * 9)); padding-inline: calc(var(--raster) * 1.5); text-align: center; color: var(--graphit); font-size: clamp(1.35rem, 2.6vw, 2.3rem); font-style: italic; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; } /* Auf dem Telefon ist die Aufnahme breiter als hoch und der Satz braucht mehr Platz, als sie hergibt. object-fit schneidet sie dann seitlich zu, statt die Flaeche flach zu druecken. */ @media (max-width: 640px) { .bildsatz-text { max-width: 18ch; padding-block: calc(var(--raster) * 4); } /* Das Motiv steht im Bild rechts aussen: das Segel beginnt bei etwa 62 Prozent der Breite, sein Schwerpunkt liegt bei 78. Auf dem Telefon schneidet "cover" um die Mitte herum zu, und damit faellt genau das Motiv an den rechten Rand. Der Himmel ist dann die ganze Flaeche und das Segel ein Rest. Die Zahl steht hier und nicht am Bild, weil sie zum Zuschnitt gehoert und nicht zur Aufnahme. Ein anderes Motiv an dieser Stelle braucht eine andere. */ .bildsatz-bild img { object-position: 78% 45%; } } /* Der Satz auf dem Bild als Zitat. Die Anfuehrungszeichen kommen aus der Schrift und nicht aus dem Text, damit die Inhaltsdatei den Satz ohne Zierrat enthaelt. Der Innenabstand liegt am blockquote und nicht mehr an den beiden Kindern: dort hatten sich Satz und Namensnennung ueberlagert, weil der Satz seinen eigenen Abstand nach unten mitbrachte. */ .bildsatz-zitat { /* Eigene Ebene, sonst malt das absolut gesetzte Bild die Namensnennung zu: sie steht im Fluss und ohne Stapelplatz, das Bild nicht. Der Satz hatte seinen eigenen, die Nennung nicht. */ position: relative; z-index: 1; margin: 0; padding-block: clamp(calc(var(--raster) * 5), 16vw, calc(var(--raster) * 9)); } .bildsatz-zitat .bildsatz-text { padding-block: 0; } .bildsatz-zitat .bildsatz-text::before { content: '\201C'; } .bildsatz-zitat .bildsatz-text::after { content: '\201D'; } .bildsatz-wer { display: block; text-align: center; font-style: normal; margin-top: calc(var(--raster) * 1.2); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphit-weich); } /* Der Power Move Finder traegt seinen Namen als Ueberschrift, und der soll das erste und groesste Wort der Seite sein. Der flache Kopf der Unterseiten ist dafuer zu klein bemessen: er ist fuer Saetze gedacht, hier stehen drei Worte. */ .seite-statik-check .hero-kompakt h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: none; letter-spacing: -0.04em; } @media (min-width: 861px) { .seite-statik-check .hero .hero-lede p:first-child { max-width: 30ch; } } /* Der Power Move Finder auf dem Telefon. * * Ueber der Falz steht alles, was zur Entscheidung gehoert: der Name, der * Satz, was man bekommt, die vier Eckdaten, der Knopf und die Entwarnung * darunter. Das Bild kommt danach. Es ist schoen, aber es hat noch nie * jemanden dazu gebracht, fuenfzehn Fragen zu beantworten, und es stand * vorher zwischen dem Versprechen und dem Knopf. */ @media (max-width: 860px) { /* Die Huelle loest sich auf, sonst haengen Bild, Kopf und Knopf in einem gemeinsamen Kasten und der Vorspann kann nicht zwischen sie. Erst als Geschwister lassen sich alle vier frei ordnen. */ .seite-statik-check .hero .hero-oben { display: contents; } .seite-statik-check .hero .hero-kopfteil { order: 1; } .seite-statik-check .hero .hero-nachtrag { order: 2; padding-top: calc(var(--raster) * 0.75); padding-bottom: 0; } .seite-statik-check .hero .hero-handlung { order: 3; padding-top: var(--raster); } .seite-statik-check .hero .hero-bg { order: 4; flex: 0 0 auto; height: 34vh; min-height: 200px; margin-top: var(--raster); } .seite-statik-check .hero .hero-oben { min-height: 0; } .seite-statik-check .hero h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); } /* Der zweite Absatz erklaert die Maschine. Er gehoert dazu, aber nicht zwischen das Versprechen und den Knopf: auf dem Telefon rueckt er enger und kleiner, damit beides zusammen sichtbar bleibt. */ .seite-statik-check .hero .hero-lede p:first-child { font-size: 1.12rem; line-height: 1.35; margin-bottom: .5em; } .seite-statik-check .hero .hero-lede p + p { font-size: .94rem; line-height: 1.5; } /* Die vier Eckdaten sollen zwei Zeilen brauchen, nicht drei: jede gesparte Zeile ist eine Zeile, die der Knopf naeher an die Falz rueckt. */ .seite-statik-check .hero-merkmale { margin-top: calc(var(--raster) * 0.75); gap: calc(var(--raster) * 0.5); font-size: 11px; } .seite-statik-check .hero-merkmale li { font-size: 11px; letter-spacing: .08em; } .seite-statik-check .hero .hero-nachsatz { margin-top: calc(var(--raster) * 0.6); font-size: .86rem; } } /* --- Kopfbild und Text duerfen sich nie beruehren ------------------------ * * Das Kopfbild liegt absolut und richtet sich am Fenster aus, der Text an * der Spalte. Auf breiten Schirmen lief der Text deshalb unter das Bild: * 56 Prozent Textbreite plus 46 Prozent Bildbreite sind 102 Prozent. * * Jetzt haengt beides aneinander. Das Bild sitzt an der rechten * Spaltenkante statt am Fensterrand, und die Textbreite ist so gedeckelt, * dass sie die linke Bildkante bei keiner Fensterbreite erreicht. */ @media (min-width: 861px) { .hero-bg-zeichnung { right: max(0px, calc((100vw - var(--spalte)) / 2)); width: min(42%, calc(var(--spalte) * 0.42)); } .hero:has(.hero-bg-zeichnung) .hero-kopfteil > *, .hero:has(.hero-bg-zeichnung) .hero-nachtrag > *, .hero:has(.hero-bg-zeichnung) .hero-handlung > *, .hero:has(.hero-bg-zeichnung) .hero-text { max-width: min(560px, calc(50vw - var(--raster) * 3)); } } /* Gestapelte Abbildungen bekommen eine Obergrenze. * * Unter 940 Pixeln faellt die zweite Spalte weg und die Abbildung nimmt * die ganze Breite. Auf einem Telefon ist das richtig, auf einem Tablet * mit 900 Pixeln wird daraus ein 830 Pixel breites Foto ueber vier Zeilen * Text. Ab hier waechst sie nicht mehr mit. */ @media (max-width: 939px) { .zeichnung, .zeichnung-mitte { max-width: min(520px, 100%); } } /* ===================================================================== Die Landingpage fuer bezahlten Traffic ===================================================================== Mobile first, und hier ist das keine Floskel: wer aus einer Anzeige kommt, kommt mit dem Telefon, und der erste Bildschirm ist rund 640 Pixel hoch. Alles, was darin steht, muss arbeiten. Deshalb wird die Hoehe hier verteilt und nicht gefuellt: der Kopf ist ein Flex-Container ueber die volle sichtbare Hoehe, oben das Versprechen, unten Knopf und Beleg, dazwischen der Rest. Kein fester Abstand, der auf einem kleinen Geraet den Knopf unter die Kante schiebt, und keine Luecke, die auf einem grossen Geraet leer dasteht. svh und nicht vh: vh rechnet auf dem Telefon mit der ausgefahrenen Adresszeile und ist beim ersten Blick zu gross, genau dann also, wenn es zaehlt. */ .lp-seite { --lp-leiste: 52px; } .lp-leiste { border-bottom: 1px solid var(--linie); background: var(--papier); } .lp-leiste-innen { display: flex; align-items: center; height: var(--lp-leiste); } /* Der Name ist hier kein Link, traegt aber dieselbe Schrift wie sonst. */ .lp-leiste .topnav-brand { cursor: default; } .lp-kopf { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100svh - var(--lp-leiste)); /* Unten Platz fuer den Pfeil: ohne ihn liegt er auf den Belegen. */ padding: calc(var(--raster) * 1.2) 0 calc(var(--raster) * 2.6); overflow: hidden; } .lp-kopf-bild { position: absolute; inset: 0; z-index: 0; } .lp-kopf-bild img, .lp-kopf-bild picture { width: 100%; height: 100%; object-fit: cover; display: block; } /* Der Verlauf macht den Text lesbar, ohne ihm einen Schatten zu geben. Oben deckt er fast ganz, unten laeuft er aus: so bleibt vom Bild das sichtbar, was es zeigen soll, und der Text steht trotzdem auf Papier. */ /* Der Verlauf deckt von OBEN und von UNTEN, das Bild bleibt als Band in der Mitte. Erst lief er nur nach unten aus, und genau dort unten stand dann der Knopf samt Kleingedrucktem auf der hellsten Stelle des Fotos. Lesbarkeit entscheidet hier, nicht die Bildwirkung. */ .lp-kopf-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--papier) 0%, var(--papier) 34%, rgba(244, 242, 238, 0.86) 42%, rgba(244, 242, 238, 0.48) 52%, rgba(244, 242, 238, 0.58) 62%, rgba(244, 242, 238, 0.90) 70%, var(--papier) 78%, var(--papier) 100%); } /* Zwei Gruppen statt fuenf Einzelteilen: oben das Versprechen, unten der Knopf. Dazwischen darf das Bild atmen, und der Knopf landet dort, wo auf einem Telefon der Daumen ohnehin liegt. Ohne die Gruppierung klebte alles oben und unter den Belegen standen 270 Pixel, in denen nichts passierte. */ .lp-kopf-innen { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--raster) * 1.5); /* width und align-self sind kein Zierrat, sondern die Reparatur eines Nebeneffekts: .wrap bringt margin-inline:auto mit, und ein Flex-Element mit automatischen Seitenrändern schrumpft auf seinen Inhalt, statt sich zu strecken. Der Kopftext fing dadurch auf 1440 Pixeln erst bei 472 an, waehrend jede Sektion darunter bei 170 beginnt. Die linke Haelfte stand leer, und es sah nach Absicht aus. */ width: 100%; align-self: stretch; } .lp-kopf-oben, .lp-kopf-unten { min-width: 0; } .lp-augenbraue { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); margin: 0 0 .7rem; } /* Die Schlagzeile darf gross werden, aber nie umbrechen, wo es weh tut. text-wrap: balance verteilt die Zeilen gleichmaessig, statt eine einzelne Waise stehen zu lassen. */ .lp-schlagzeile { font-size: clamp(2rem, 8.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .lp-unterzeile { font-size: clamp(1rem, 4.2vw, 1.2rem); line-height: 1.5; color: var(--graphit-weich); margin: .9rem 0 0; max-width: 34em; } .lp-handlung { margin-top: calc(var(--raster) * 1.1); } /* Auf dem Telefon ueber die ganze Breite: ein Knopf, der nur so breit ist wie sein Text, sieht aus wie ein Nebenweg. */ .lp-handlung .hero-cta { margin: 0; } .lp-handlung .hero-cta .btn { width: 100%; justify-content: center; text-align: center; } .lp-nachsatz { margin: .7rem 0 0; font-size: .85rem; color: var(--stahl); } /* Die Belege stehen als Zeile und nicht als Liste: drei Punkte untereinander kosten 90 Pixel Hoehe und sagen dasselbe. */ .lp-merkmale { list-style: none; margin: calc(var(--raster) * 0.9) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; color: var(--graphit-weich); } .lp-merkmale li { position: relative; padding-left: .95rem; } .lp-merkmale li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--blau); } /* Der Sprungpunkt liegt an der Unterkante des Kopfes: der Pfeil soll den Kopf wegscrollen und nicht irgendwohin in die Seite springen. */ #lpWeiter { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; } .lp-weiter { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); z-index: 1; color: var(--stahl); line-height: 0; animation: lp-winken 2.4s ease-in-out infinite; } @keyframes lp-winken { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } } @media (prefers-reduced-motion: reduce) { .lp-weiter { animation: none; } } /* Die Fusszeile traegt nur die Pflichtangaben und soll nichts einladen. */ .lp-fuss { border-top: 1px solid var(--linie); padding: calc(var(--raster) * 1.4) 0; /* Platz fuer die mitlaufende Leiste, sonst liegt sie auf dem Impressum. */ padding-bottom: calc(var(--raster) * 4); font-size: .8rem; color: var(--stahl); } .lp-fuss .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline; } .lp-fuss-links { display: flex; flex-wrap: wrap; gap: 1rem; } .lp-fuss-links a { color: var(--stahl); } .lp-fuss-copy { margin-left: auto; } /* Ab Tablet steht mehr Hoehe zur Verfuegung, als der Kopf braucht. Dann darf das Bild zur Seite ruecken und der Verlauf von links kommen. */ @media (min-width: 760px) { .lp-seite { --lp-leiste: 64px; } .lp-kopf { padding: calc(var(--raster) * 2) 0 calc(var(--raster) * 3); } /* Ab Tablet steht der Text in einer Spalte links, und das Bild darf rechts offen stehen. Von unten deckt nichts mehr: dort liegt kein Text mehr auf dem Foto. */ .lp-kopf-bild::after { background: linear-gradient(to right, var(--papier) 0%, var(--papier) 44%, rgba(244, 242, 238, 0.88) 56%, rgba(244, 242, 238, 0.42) 78%, rgba(244, 242, 238, 0.22) 100%); } /* Die Textspalte endet dort, wo der Verlauf noch deckt. Ohne die Grenze lief der Vorspann in die Zahnraeder hinein und war auf den letzten Woertern nicht mehr zu lesen. */ .lp-kopf-oben, .lp-kopf-unten { max-width: 34rem; } .lp-unterzeile { max-width: 26em; } .lp-schlagzeile { max-width: 15ch; } .lp-unterzeile { max-width: 30em; } .lp-handlung .hero-cta .btn { width: auto; } } @media (min-width: 1040px) { .lp-schlagzeile { font-size: 3.8rem; max-width: 16ch; } } /* Die Zeile unter der Followerzahl, sobald sie live geholt wurde. Der Punkt davor ist der einzige Unterschied zum Datum: er sagt "laeuft gerade", ohne dass dafuer eine Farbe oder ein zweites Element noetig waere. Kein Blinken, das waere Jahrmarkt. */ .ig-datum-live { color: var(--blau); } .ig-datum-live::before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin-right: .4em; border-radius: 50%; background: var(--blau); } /* --- Sprach-Assistent (Kontaktseite) -------------------------------------- * Der Oeffner ist ein button, kein Link, und ohne JavaScript tut er nichts. * Deshalb bleibt er ohne die Klasse "js" unsichtbar, und assistent.js blendet * ihn selbst aus, wenn der Browser Mikrofon oder AudioWorklet nicht kann. */ button.btn { appearance: none; -webkit-appearance: none; } .btn[data-assistent-oeffnen] { display: none; } .js .btn[data-assistent-oeffnen] { display: inline-block; } .js .btn[data-assistent-oeffnen][hidden] { display: none; } dialog.assistent { /* Das Grundstil setzt margin auf 0 und nimmt dem Fenster damit die Mitte, die der Browser ihm sonst gibt. */ margin: auto; width: min(92vw, 40rem); max-height: 90vh; overflow: auto; padding: calc(var(--raster) * 3); background: var(--papier-hell); color: var(--graphit); border: 1px solid var(--graphit); border-radius: 2px; } dialog.assistent::backdrop { background: rgba(31, 33, 36, 0.55); } dialog.assistent h2 { margin: 0 0 calc(var(--raster) * 2); font-size: 1.5rem; line-height: 1.2; } dialog.assistent p { margin: 0 0 var(--raster); line-height: 1.6; } dialog.assistent .assistent-klein { color: var(--graphit-weich); font-size: 0.9rem; } /* Hinweis im Instagram-/Facebook-Browser (assistent.js inAppHinweis) */ dialog.assistent .assistent-inapp { padding: var(--raster); border: 1px solid currentColor; border-radius: 6px; font-size: 0.95rem; } dialog.assistent .assistent-inapp-knopf { display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(var(--raster) / 2); font-weight: 600; } dialog.assistent a { color: inherit; text-decoration: underline; } dialog.assistent .assistent-haken { display: flex; gap: var(--raster); align-items: flex-start; margin: calc(var(--raster) * 2) 0; line-height: 1.5; cursor: pointer; } dialog.assistent .assistent-haken input { margin-top: 0.3em; flex: none; width: 1.1em; height: 1.1em; } dialog.assistent .assistent-knoepfe { display: flex; flex-wrap: wrap; gap: var(--raster); margin-top: calc(var(--raster) * 2); } dialog.assistent .btn[disabled] { opacity: 0.4; cursor: not-allowed; } dialog.assistent .btn[disabled]:hover { background: var(--graphit); border-color: var(--graphit); } dialog.assistent [hidden] { display: none !important; } .assistent-live { display: flex; align-items: center; gap: calc(var(--raster) * 2); margin: calc(var(--raster) * 3) 0 var(--raster); } .assistent-puls { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--stahl); } [data-zustand="zuhoeren"] .assistent-puls { background: var(--blau); animation: assistent-atmen 2.4s ease-in-out infinite; } [data-zustand="spricht"] .assistent-puls { background: var(--graphit); animation: assistent-atmen 0.9s ease-in-out infinite; } @keyframes assistent-atmen { 50% { transform: scale(1.35); opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .assistent-puls { animation: none !important; } } .assistent-status { font-size: 1.05rem; margin: 0; } .assistent-zeit { font-family: 'Archivo', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--graphit-weich); margin: 0; font-size: 0.9rem; } /* Eingabemaske des Assistenten: Vorname, Mail, Telefon, darunter das * Kleingedruckte mit der Zustimmung. Der Rechtstext steht klein und ruhig, * ist aber ein richtiger Haken: bei einem Rueckruf per Telefon reicht ein * stilles "mit dem Absenden stimmst Du zu" nicht. */ .assistent-form { margin-top: calc(var(--raster) * 1.5); } .assistent-form label { display: block; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphit-weich); margin-bottom: var(--raster); } .assistent-form input[type=text], .assistent-form input[type=email], .assistent-form input[type=tel] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: calc(var(--raster) * 0.5) var(--raster); font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--graphit); background: #fff; border: 1px solid var(--graphit-weich); border-radius: 2px; } .assistent-form input:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; } .assistent-fall { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } dialog.assistent .assistent-recht { font-size: 0.72rem; line-height: 1.5; margin: var(--raster) 0 0; } dialog.assistent .assistent-haken-klein { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--graphit-weich); margin: 0; } dialog.assistent .assistent-haken-klein input { flex: none; width: 1em; height: 1em; margin-top: 0.15em; } .assistent-fehler { color: #8a2d1c; font-size: 0.9rem; margin: var(--raster) 0 0; } /* Zwei Wege in den Power Move Finder, direkt unter der Ueberschrift. Je ein * Knopf mit einer Zeile darunter, die sagt, was er verlangt und was man * bekommt. Kompakt, damit mindestens ein Knopf ohne Scrollen sichtbar ist. */ .wege { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raster); margin-top: var(--raster); } .weg { display: flex; flex-direction: column; gap: calc(var(--raster) * 0.35); } .weg .btn { text-align: center; } .weg-titel { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blau); } .weg-text { margin: 0; line-height: 1.4; font-size: 0.82rem; color: var(--graphit-weich); } @media (max-width: 720px) { .wege { grid-template-columns: 1fr; gap: calc(var(--raster) * 0.75); margin-top: calc(var(--raster) * 0.75); } } /* Die Beta-Kennzeichnung des Power Move Finders. * * Als Augenbraue steht sie an der richtigen Stelle, ganz oben vor der * Ueberschrift, sieht dort aber aus wie eine Kapitelbezeichnung und wird * entsprechend ueberlesen. Als Abzeichen mit Rahmen liest sie sich als * Hinweis. Mehr Alarm waere falsch: das Werkzeug laeuft, es ist nur noch * nicht fertig, und eine rote Warnung haette mehr Leute abgehalten, als * der Hinweis wert ist. */ .seite-statik-check .hero .eyebrow { display: inline-block; padding: .3em .7em; border: 1px solid var(--stahl); border-radius: 2px; color: var(--graphit-weich); letter-spacing: .08em; } /* --------------------------------------------------------------------- * Gerenderte Objekte als Endlosschleife * * Resends rotierender Wuerfel ist kein WebGL, sondern ein vorgerendertes * Video mit 400x400 und zehn Sekunden Laufzeit. Hier dasselbe Verfahren. * Der Grund ist durchsichtig, denn das Papier dieser Seite traegt ein * Korn: eine deckende Flaeche stuende darauf als sichtbares Rechteck. * Deshalb auch kein Rahmen und kein helleres Blatt wie bei den * Zeichnungen, das Objekt soll schweben. * ------------------------------------------------------------------ */ .bewegt { display: block; width: 100%; height: auto; max-width: 100%; } .zeichnung .bewegt, .zeichnung-mitte .bewegt { background: none; border: none; border-radius: 0; padding: 0; } .hero-bg-zeichnung .bewegt { width: auto; height: auto; max-width: 100%; max-height: var(--zeichnung-hoehe, 62%); margin: 0; object-fit: contain; } /* Wer im Betriebssystem weniger Bewegung verlangt hat, bekommt das * Standbild. Ein Video laesst sich mit CSS nicht anhalten, das erledigt * verhalten.js; hier bleibt nur die Zusicherung, dass nichts blinkt. */ @media (prefers-reduced-motion: reduce) { .bewegt { animation: none; transition: none; } }