/* ========================================================================== Fundament, tkohns.de -------------------------------------------------------------------------- Das ist der Entwurf „Neu gedacht" vom 09.08.2026, unverändert übernommen und zum Gestaltungssystem der ganzen Website erklärt. Vorgeschichte, damit sie niemand wiederholt: Am 10.08. habe ich ein eigenes, schlankeres Fundament gebaut und die Startseite darin nachgezogen. Das Ergebnis war messbar enger und flacher: Abschnittsabstand 72 statt bis zu 140 Punkt, h1 bis 4,0 statt 4,6 rem, Seitenbreite 1120 statt 1180. Dazu fehlten die Dinge, die die Seite lebendig machen: die kursive Auszeichnung in der Hauptzeile mit dem Unterstrich, das feine Raster im Kopfbereich, die schwebende Karte, die Pillen, das Einblenden beim Scrollen. Thomas' Urteil war eindeutig, und die Zahlen gaben ihm recht. Geändert gegenüber dem Entwurf sind genau zwei Dinge: 1. Überschriftenschrift Literata statt Gelasio, lokal eingebunden statt über Google Fonts. Entschieden am 10.08. 2. Die Auszeichnung auf dunklem Grund steht in #9FC5EA. Das war im Entwurf schon so für `.card-band`, `.case` und `.final`, gilt jetzt überall. Klassennamen bleiben, wie sie sind. Sie umzubenennen hätte nur Fehler eingeführt, ohne dass eine Zeile besser aussieht. ========================================================================== */ @import url("schriften-website.css"); /* ============================================================ tkohns. Startseite, neu gedacht Entwurf 2026-08-09 ============================================================ */ :root{ /* Am Abend des 10.08. durchgaengig kraeftiger gestellt. Thomas' Befund: die Seite wirkt blass gegen tkohns.de, wo der Fliesstext in #374151 steht. Nachgemessen gegen den Grund #FEFEFE war das der ganze Unterschied: der bisherige Fliesstext kam auf 5,4 zu 1, der von tkohns.de auf 10,2 zu 1. Nicht die Ueberschriften waren zu schwach, die standen schon bei 14,7. Deshalb ist --muted der grosse Sprung und --navy nur nachgeschaerft. */ --navy: #0F2032; --navy-mid: #1E3A5F; --navy-soft: #3A4C61; --akzent: #2F6099; /* Akzentblau, ersetzt das frühere Karmesin */ --akzent-hell: #4A7FBF; --akzent-dark: #26507F; --brand-rot: #922B3E; /* sparsam: Logo-Punkt, Auszeichnungs-Strich, Ziffern */ --brand-rot-hell: #C4586A; /* dieselbe Rolle auf dunklem Grund */ --ivory: #FEFEFE; /* Grundfläche, das Off-White der Marke */ --paper: #FFFFFF; /* Karten, damit sie sich abheben */ --sand: #F1F4F9; /* ruhige Zwischenfläche, kühl statt beige */ --sand-tief: #E8EDF4; /* die dunklere Hälfte in den Reiterkarten */ --muted: #374151; /* der Fliesstextwert von tkohns.de, 10,2 zu 1 */ --line: rgba(20,41,63,.12); --line-soft: rgba(20,41,63,.07); --shadow-s: 0 1px 2px rgba(20,41,63,.04), 0 4px 16px rgba(20,41,63,.05); --shadow-m: 0 2px 4px rgba(20,41,63,.04), 0 18px 44px rgba(20,41,63,.09); --shadow-l: 0 4px 8px rgba(20,41,63,.05), 0 36px 80px rgba(20,41,63,.13); --r-s: 10px; --r-m: 18px; --r-l: 28px; --wrap: 1180px; --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} body{ margin:0; background:var(--ivory); color:var(--navy); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%; display:block} a{color:inherit} button{font:inherit; color:inherit} h1,h2,h3,.display{ font-family:"Literata",Georgia,"Times New Roman",serif; /* Verteilt die Zeilen gleichmaessig, statt die letzte Zeile mit einem einzelnen Wort stehen zu lassen. Greift ueberall dort, wo kein fester Umbruch gesetzt ist. */ text-wrap:balance; /* 600 statt 500, entschieden von Thomas am 10.08. am Regler der Schriftprobe. Literata ist für Bildschirme gezeichnet und verträgt die kräftigere Stufe, ohne fett zu wirken. Sie gibt der Kopfzeile den Halt, der bei 500 fehlte. */ font-weight:600; letter-spacing:-.015em; line-height:1.12; margin:0; } h1{font-size:clamp(2.7rem,6.2vw,4.6rem); line-height:1.04; letter-spacing:-.028em} h2{font-size:clamp(2rem,4vw,3.1rem)} h3{font-size:clamp(1.2rem,1.7vw,1.45rem); line-height:1.25} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px} /* Enger als im Entwurf, zweimal auf Thomas' Hinweis nachgezogen: erst von 80 bis 140 auf 64 bis 112, am Abend des 10.08. noch einmal auf 52 bis 88. Zu bedenken ist dabei, dass sich der Wert verdoppelt: unten am einen und oben am naechsten Abschnitt. Zwischen zwei Bloecken liegen also bis zu 176 Punkt und nicht 88. Das ist der Grund, warum es hier grosszuegiger wirkt, als die Zahl vermuten laesst. */ .section{padding:clamp(52px,6vw,88px) 0} .lead{font-size:clamp(1.08rem,1.4vw,1.24rem); color:var(--muted); line-height:1.62} /* ---------- Eyebrow ---------- */ .eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--akzent); display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; } /* Der kurze Strich vor jeder Auszeichnung ist der Ort für Rot. Klein, aber überall wiederkehrend. */ .eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--brand-rot); opacity:.9; } /* Auf dunklem Grund stand hier bisher die aufgehellte Fassung. Thomas will am 10.08. ueberall dasselbe Rot, auch dort. Es traegt weniger Kontrast gegen das Navy, ist aber dieselbe Farbe wie im Logo, und darum geht es. */ .card-band .eyebrow::before, .case .eyebrow::before, .final .eyebrow::before{background:var(--brand-rot); opacity:1} .eyebrow.plain::before{display:none} /* ---------- Buttons ---------- */ /* Der Knopf hat drei Bewegungen, die zusammen den Eindruck machen. Sie stammen aus der bisherigen Website und sind am 10.08. hierher zurueckgeholt worden, weil sie beim Neubau verlorengegangen waren. 1. Der Grund ist kein flaches Blau, sondern ein Verlauf auf doppelter Flaeche. Beim Zeigen wandert seine Position, dadurch hellt der Knopf auf, ohne dass die Farbe springt. 2. Ein schraeger Lichtstreifen laeuft einmal darueber. Das ist der Teil, den man sieht, ohne ihn benennen zu koennen. 3. Eine haarfeine helle Oberkante, innen liegend. Sie gibt dem Knopf Koerper, wie Licht von oben. Der Streifen liegt ueber der Schrift, das ist Absicht: bei 45 Prozent Weiss ist er ein Reflex und kein Vorhang. */ .btn{ display:inline-flex; align-items:center; gap:11px; background:linear-gradient(135deg, var(--navy-mid), var(--akzent-dark), var(--navy-mid)); background-size:200% 200%; color:#fff; text-decoration:none; padding:16px 28px; border-radius:999px; white-space:nowrap; font-size:.95rem; font-weight:600; letter-spacing:.005em; border:0; cursor:pointer; position:relative; overflow:hidden; box-shadow:0 2px 6px rgba(20,41,63,.20), 0 14px 30px rgba(20,41,63,.20), inset 0 1px 0 rgba(255,255,255,.12); transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-position .6s var(--ease); } .btn::before{ content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; pointer-events:none; transform:skew(-20deg); background:linear-gradient(120deg, transparent, rgba(255,255,255,.25) 45%, rgba(255,255,255,.45), rgba(255,255,255,.25) 55%, transparent); transition:left 1.4s var(--ease); } .btn:hover::before{left:125%} .btn:hover{ transform:translateY(-2px); background-position:100% 100%; box-shadow:0 4px 10px rgba(20,41,63,.22), 0 22px 44px rgba(20,41,63,.26), inset 0 1px 0 rgba(255,255,255,.18); } .btn .arw{transition:transform .35s var(--ease)} .btn:hover .arw{transform:translateX(4px)} .btn.ghost{ background:transparent; color:var(--navy); border:1px solid var(--line); box-shadow:none; } .btn.ghost::before{display:none} .btn.ghost:hover{background:#fff; border-color:rgba(20,41,63,.25); box-shadow:var(--shadow-s)} /* Die helle Fassung, fuer dunklen Grund. Sie behaelt den Lichtstreifen, er laeuft hier nur dunkel statt hell. Ohne das waere sie der einzige Knopf auf der Seite ohne Bewegung. */ .btn.light{ background:linear-gradient(135deg,#fff,#EEF2F8,#fff); background-size:200% 200%; color:var(--navy); box-shadow:var(--shadow-m); } .btn.light::before{ background:linear-gradient(120deg, transparent, rgba(20,41,63,.06) 45%, rgba(20,41,63,.12), rgba(20,41,63,.06) 55%, transparent); } .btn.light:hover{background-position:100% 100%; box-shadow:var(--shadow-l)} /* Auf dunklem Grund ist der dunkelblaue Knopf kaum zu sehen. Dort gilt ueberall die helle Fassung, ohne dass jede Stelle im HTML die Klasse tragen muss. Am 10.08. auf Thomas' Hinweis. */ .card-band .btn:not(.ghost), .case .btn:not(.ghost), .final .btn:not(.ghost){ background:linear-gradient(135deg,#fff,#EEF2F8,#fff); background-size:200% 200%; color:var(--navy); box-shadow:var(--shadow-m); } .card-band .btn:not(.ghost)::before, .case .btn:not(.ghost)::before, .final .btn:not(.ghost)::before{ background:linear-gradient(120deg, transparent, rgba(20,41,63,.06) 45%, rgba(20,41,63,.12), rgba(20,41,63,.06) 55%, transparent); } /* Der Knopf in der Kopfzeile steht auf hellem Grund und soll dort nicht als blauer Block sitzen, sondern als ruhiger Umriss. So haelt es auch die bisherige Website. */ .nav-cta{ padding:11px 22px; font-size:.88rem; background:transparent; color:var(--navy); border:1.5px solid var(--line); box-shadow:none; } .nav-cta::before{display:none} .nav-cta:hover{ background:#fff; color:var(--navy); border-color:var(--akzent); box-shadow:var(--shadow-s); } .linkline{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:.95rem; color:var(--navy); border-bottom:1px solid rgba(20,41,63,.22); padding-bottom:3px; transition:color .3s, border-color .3s; } .linkline:hover{color:var(--akzent); border-color:var(--akzent)} /* ============================================================ Header ============================================================ */ /* Die Kopfzeile trug oben gar keinen Grund und bekam ihn erst beim Scrollen. Am ersten Bildschirm schwebten Logo und Menue dadurch frei auf Weiss und wirkten blass. Sie hat jetzt von Anfang an eine leichte Flaeche und eine feine Unterkante, beim Scrollen wird beides nur dichter. Am 10.08. auf Thomas' Hinweis geaendert. */ header{ position:fixed; inset:0 0 auto 0; z-index:100; padding:18px 0; background:rgba(254,254,254,.78); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); transition:padding .4s var(--ease), background .4s, box-shadow .4s, border-color .4s; border-bottom:1px solid var(--line-soft); } header.stuck{ padding:12px 0; background:rgba(254,254,254,.93); border-color:var(--line); box-shadow:0 8px 24px rgba(20,41,63,.05); } .navrow{display:flex; align-items:center; justify-content:space-between; gap:28px} /* Das Logo ist eine Datei, keine nachgebaute Schrift: Plus Jakarta Sans Bold, im SVG eingebettet */ .brand{display:block; line-height:0; flex:none} .brand img{height:34px; width:auto; transition:opacity .3s} .brand:hover img{opacity:.78} nav.links{display:flex; align-items:center; gap:24px} nav.links a{ text-decoration:none; font-size:.92rem; font-weight:600; color:var(--navy); position:relative; padding:4px 0; transition:color .3s; } nav.links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--akzent); transition:width .35s var(--ease); } nav.links a:hover{color:var(--navy)} nav.links a:hover::after{width:100%} /* Aussehen steht oben bei den Knoepfen, damit es nicht an zwei Stellen liegt. */ @media(max-width:1040px){ nav.links{display:none} } /* ------------------------------------------------------------ Menue auf schmalen Bildschirmen -------------------------------------------------------------- Bis zum 11.08. verschwand `nav.links` unter 1040 Punkt ersatzlos: auf Handy und Tablet standen nur Logo und Knopf, und man kam von einer Unterseite nur ueber die Fusszeile weiter. Thomas' Befund beim ersten mobilen Durchgang. Das Panel klappt unter der Kopfzeile auf, statt den Bildschirm zu ueberdecken. Das passt zur ruhigen Anmutung der Seite, und der Leser verliert nicht den Ort, an dem er gerade war. Aufgeklappt wird ueber `grid-template-rows` von 0fr auf 1fr: das ist der einzige Weg, eine unbekannte Hoehe weich zu animieren, `height:auto` laesst sich nicht uebergehen. ------------------------------------------------------------ */ .burger{ display:none; flex:none; width:44px; height:44px; /* Fingerbreite, nicht kleiner */ align-items:center; justify-content:center; padding:0; cursor:pointer; background:transparent; border:1.5px solid var(--line); border-radius:999px; transition:border-color .3s, background .3s; } .burger:hover{border-color:var(--akzent); background:#fff} /* Die drei Striche sind ein Element und seine zwei Schatten. Beim Oeffnen wandert der mittlere weg und die aeusseren legen sich zum Kreuz. */ .burger i{position:relative; display:block; width:19px; height:1.6px; background:var(--navy); transition:background .2s} .burger i::before, .burger i::after{ content:""; position:absolute; left:0; width:19px; height:1.6px; background:var(--navy); transition:top .3s var(--ease), transform .3s var(--ease); } .burger i::before{top:-6px} .burger i::after{top:6px} header[data-menue="offen"] .burger i{background:transparent} header[data-menue="offen"] .burger i::before{top:0; transform:rotate(45deg)} header[data-menue="offen"] .burger i::after{top:0; transform:rotate(-45deg)} .menue{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease)} header[data-menue="offen"] .menue{grid-template-rows:1fr} /* Solange das Panel offen steht, wird die ganze Kopfzeile fast deckend. Mit den voreingestellten 78 Prozent schimmerte der Seiteninhalt zwischen den Menuepunkten durch, und die Liste wirkte unruhig. */ header[data-menue="offen"]{background:rgba(254,254,254,.97); box-shadow:0 12px 30px rgba(20,41,63,.07)} .menue > div{overflow:hidden; min-height:0} .menue nav{display:flex; flex-direction:column; padding-block:6px 18px} .menue a{ text-decoration:none; font-weight:600; font-size:1.05rem; color:var(--navy); padding:15px 0; border-bottom:1px solid var(--line-soft); transition:color .3s; } .menue a:last-child{border-bottom:0} .menue a:hover{color:var(--akzent)} /* Wo der Leser gerade steht. Das Panel zeigt alle Punkte, auch den eigenen, sonst sucht man auf dem Handy den Ort, an dem man ist. */ .menue a[aria-current="page"]{color:var(--muted)} .menue a[aria-current="page"]::before{ content:""; display:inline-block; width:14px; height:1.5px; background:var(--brand-rot); vertical-align:middle; margin-right:10px; } /* Der Knopf im Panel wird nur gebraucht, wo er oben keinen Platz mehr hat. Das Polster muss hier stehen: `.menue a` weiter oben ist ein Selektor mehr als `.btn` und hat dem Knopf sonst sein waagerechtes Polster genommen. Die Beschriftung klebte dann an beiden Kanten und war links angeschnitten. */ .menue .menue-cta{ align-self:flex-start; margin-top:20px; border-bottom:0; color:#fff; padding:16px 30px; } @media(min-width:621px){ .menue .menue-cta{display:none} } @media(max-width:1040px){ .burger{display:inline-flex} /* Ohne das Menue in der Mitte verteilt `space-between` die drei uebrigen Teile ueber die ganze Breite, und der Knopf landet mitten in der Zeile. Er gehoert mit dem Burger zusammen nach rechts. */ .nav-cta{margin-left:auto} } /* Unter 620 Punkt wird es in der Zeile eng: Logo, Knopf und Burger passen nicht mehr nebeneinander. Dann traegt das Panel den Knopf. */ @media(max-width:620px){ .nav-cta{display:none} } /* Ohne Bewegung bleibt das Auf und Zu, nur ohne Uebergang. */ @media(prefers-reduced-motion:reduce){ .menue{transition:none} .burger i, .burger i::before, .burger i::after{transition:none} } /* ============================================================ Hero ============================================================ */ /* Oben deutlich weniger Polster. Vorher bis 200 Punkt, das war unter der festen Kopfzeile zu viel Leere. Unten mehr, weil die Modulkarte ueber die untere Kante des Fotos hinausragt. */ .hero{position:relative; padding:clamp(104px,10vw,150px) 0 clamp(84px,8vw,116px); overflow:hidden} .hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none} .hero-bg .blob{position:absolute; border-radius:50%; filter:blur(90px)} .hero-bg .b1{width:640px; height:640px; right:-180px; top:-200px; background:radial-gradient(circle,rgba(30,58,95,.16),transparent 68%)} .hero-bg .b2{width:520px; height:520px; left:-200px; top:180px; background:radial-gradient(circle,rgba(47,96,153,.11),transparent 68%)} /* Das feine Gitternetz im Kopfbereich ist am 10.08. auf Thomas' Wunsch entfernt worden. Die weichen Farbflächen (.blob) bleiben, sie tragen die Tiefe allein. */ .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:70px; align-items:center; } @media(max-width:1020px){ .hero-grid{grid-template-columns:1fr; gap:56px} } /* Die kursive Zeile stand auf dem Akzentblau und wirkte neben der fast schwarzen Zeile darueber blass. Hier gilt es abzuwaegen: je dunkler das Blau, desto kraeftiger steht es auf dem Grund, desto weniger hebt es sich aber von der Titelzeile ab. Gemessen gegen den Grund waren es 6,4 zu 1, jetzt 8,7. Der Farbabstand zur Zeile darueber sinkt dabei von 2,6 auf 1,9 und traegt zusammen mit der Kursiven weiterhin. Noch dunkler waere die Auszeichnung keine mehr. */ h1 .em{ font-style:italic; color:#1F4C7C; position:relative; white-space:nowrap; } h1 .em::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.09em; /* Karmesin statt Blau, damit die Marke auf den ersten Blick auftaucht. Auf Thomas Wunsch vom 10.08.: das Rot soll vorne sichtbar sein. */ background:linear-gradient(90deg,rgba(146,43,62,.55),rgba(146,43,62,.10)); border-radius:3px; transform:scaleX(0); transform-origin:left; animation:swipe 1s .55s var(--ease) forwards; } @keyframes swipe{to{transform:scaleX(1)}} .hero-sub{max-width:31em; margin-top:26px; font-size:clamp(1.08rem,1.35vw,1.24rem); color:var(--muted)} .hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:38px} .hero-note{ display:flex; align-items:center; gap:9px; margin-top:22px; font-size:.88rem; color:var(--muted); } .hero-note svg{flex:none; color:var(--akzent)} /* Vertrauensleiste */ .trust{ margin-top:56px; padding-top:26px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px; } .trust span{font-size:.79rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:600} .trust .t-item{font-size:.9rem; font-weight:600; color:var(--navy-soft); display:flex; align-items:center; gap:8px} .trust .t-item::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--brand-rot); opacity:.65} /* Hier steht dieselbe weisse Logodatei auf hellem Grund und war damit unsichtbar. Umgekehrt eingefaerbt wird aus Weiss ein Dunkelgrau, das zu den Texten der Leiste passt. Das geht, weil das Zeichen einfarbig auf durchsichtigem Grund liegt. Die farbige Fassung war am 11.08. kurz eingebaut und ist auf Thomas' Urteil wieder heraus: das BVMW-Rot ist ein Signalrot, es lenkt ab und stoesst sich mit dem Karmesin der Marke, das in derselben Zeile als Punkt vor der Kundennennung steht. Beide Originaldateien liegen in `05 Marketing/Medien/BVMW Logo`, die farbige heisst dort „negativ" und ist fuer dunkle Flaechen gedacht. Diese Zeile also bitte nicht erneut „aufloesen", die graue Fassung ist gewollt und geprueft. */ .trust img{height:40px; width:auto; filter:invert(1); opacity:.55} /* ---------- Modul-Karte im Hero ---------- */ .modulcard{ position:relative; background:var(--paper); border:1px solid var(--line-soft); /* unten mehr Platz: dort hängt die Porträtkarte über die Kante */ border-radius:var(--r-l); padding:30px 30px 54px; box-shadow:var(--shadow-l); transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); transition:transform .8s var(--ease); } .modulcard:hover{transform:perspective(1400px) rotateY(0deg) rotateX(0deg)} .mc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px} .mc-tag{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--akzent); background:rgba(47,96,153,.07); padding:6px 12px; border-radius:999px; } .mc-time{font-size:.8rem; color:var(--muted)} .mc-title{font-family:"Literata",Georgia,serif; font-size:1.5rem; margin-bottom:6px} .mc-desc{font-size:.88rem; color:var(--muted); margin-bottom:24px} .mc-bar{height:5px; border-radius:999px; background:var(--sand); overflow:hidden; margin-bottom:26px} .mc-bar i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--navy-mid),var(--akzent)); transition:width 2.4s var(--ease)} .modulcard.on .mc-bar i{width:100%} .mc-row{ display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line-soft); opacity:.35; transform:translateX(-6px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .modulcard.on .mc-row{opacity:1; transform:none} .modulcard.on .mc-row:nth-child(1){transition-delay:.35s} .modulcard.on .mc-row:nth-child(2){transition-delay:.75s} .modulcard.on .mc-row:nth-child(3){transition-delay:1.15s} .mc-check{ flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:#fff; background:transparent; transition:background .5s var(--ease), border-color .5s; } .mc-check svg{opacity:0; transition:opacity .4s .1s} .modulcard.on .mc-row .mc-check{background:var(--navy-mid); border-color:var(--navy-mid)} .modulcard.on .mc-row .mc-check svg{opacity:1} .mc-row b{font-weight:600; font-size:.95rem; display:block} .mc-row em{font-style:normal; font-size:.82rem; color:var(--muted)} .mc-foot{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.85rem; color:var(--muted); } .mc-foot b{color:var(--navy); font-weight:600} /* Die schwebende Karte trägt jetzt ein Porträt statt einer Aussage. Zwei Gründe, beide von Thomas am 10.08.: die dunkle Kachel saß über der Fußzeile der Modulkarte und verdeckte „Gehört Ihnen. Ohne Bindung an mich.", und der ganze Kopfbereich war zu kühl. Ein Gesicht wärmt, wo Text es nicht kann. Sie sitzt jetzt unten links, also über der leeren Ecke, nicht über dem Text. */ .mc-float{ position:absolute; left:-34px; bottom:-40px; display:flex; align-items:center; gap:18px; /* Dünner Rahmen in Karmesin, der zweite Ort fuer Waerme im Kopfbereich */ background:var(--paper); border:1px solid rgba(146,43,62,.45); /* Grosszuegiger als beim ersten Anlauf. Thomas: zu gequetscht. Oben und unten 18 statt 12, rechts 30 statt 20. */ border-radius:var(--r-m); padding:18px 30px 18px 18px; box-shadow:var(--shadow-l); margin:0; max-width:none; } .mc-float img{ width:62px; height:62px; border-radius:50%; object-fit:cover; object-position:50% 16%; flex:none; } /* Beide Zeilen bleiben einzeilig. Ohne das bricht „Berufspaedagoge" um, und die Karte wirkt wieder gequetscht statt luftig. */ .mc-float figcaption{line-height:1.4; white-space:nowrap} .mc-float b{ display:block; font-family:"Literata",Georgia,serif; font-weight:600; font-size:1.02rem; line-height:1.3; color:var(--navy); margin-bottom:5px; } .mc-float span{font-size:.82rem; color:var(--muted)} @media(max-width:1020px){ .mc-float{left:auto; right:0} } @media(max-width:520px){ .mc-float{position:static; margin-top:22px} .modulcard{transform:none} } /* ============================================================ Visitenkarten-Band ============================================================ */ .card-band{ background:var(--navy); color:#fff; position:relative; overflow:hidden; } .card-band::after{ content:""; position:absolute; right:-140px; top:-140px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(47,96,153,.30),transparent 66%); } /* Volle Breite statt 900 px, und eine Stufe kleiner. Thomas am 10.08.: „Das darf über die ganze Breite gehen und muss nicht zu riesig sein." */ .card-band .inner{position:relative; z-index:1; text-align:center} .card-band .eyebrow{color:#9FC5EA} .card-band .statement{ font-family:"Literata",Georgia,serif; font-weight:400; font-size:clamp(1.3rem,2.1vw,1.85rem); line-height:1.45; letter-spacing:-.015em; } .card-band .statement b{font-weight:600; color:#fff} .card-band .statement .hl{color:#BFDBF7; font-style:italic} .card-band .sig{ margin-top:34px; font-size:.9rem; letter-spacing:.05em; opacity:.62; } /* ============================================================ Drei Schritte ============================================================ */ /* Ueberschrift links bekommt mehr Platz als der Vorspann rechts. Gemessen: „Mehr passiert bei Ihnen nicht." braucht 681 Punkt, „wie weit Sie gehen wollen." 586. Bei halbe-halbe (528) brachen beide um und liessen einzelne Woerter allein stehen. Bei 1.3 zu 0.7 sind es 686 Punkt, alle festen Umbrueche halten. */ /* Zwei Drittel Ueberschrift, ein Drittel Text, und der rechte Text beginnt auf Hoehe der Ueberschrift, nicht auf Hoehe der Auszeichnung darueber. Warum es ein Raster mit zwei Zeilen ist und keine Randabstaende: Die Auszeichnung steht in Zeile eins, Ueberschrift und Text stehen beide in Zeile zwei. Damit sind sie oben buendig, egal wie hoch die Auszeichnung gerade ist oder ob sie umbricht. Ein fester Abstand von oben waere geraten und bei jeder Schriftaenderung wieder falsch. Das innere div wird dafuer mit `display:contents` aufgeloest, seine Kinder werden dadurch selbst zu Rasterfeldern. Der Aufbau ist auf allen Seiten derselbe: div mit Auszeichnung und Ueberschrift, daneben ein Absatz. */ .head-2col{ display:grid; grid-template-columns:2fr 1fr; column-gap:60px; align-items:start; margin-bottom:64px; } .head-2col > div{display:contents} .head-2col > div > .eyebrow{grid-column:1; grid-row:1} .head-2col > div > h2{grid-column:1; grid-row:2; margin-top:0} .head-2col > *:not(div){grid-column:2; grid-row:2; margin-top:0} /* Die Ueberschriftenspalte ist enger als frueher, dadurch brachen Zeilen an schlechten Stellen. Der Ausgleich verteilt sie gleichmaessig. */ .head-2col h2{text-wrap:balance} /* Eine gestapelte Fassung: der Text steht unter der Ueberschrift und beginnt an derselben Kante, statt rechts daneben. Beim WissensHub gewollt, weil dort ein breiter Faecher folgt und ein Kopf ueber die halbe Breite daneben unruhig wirkt. */ .head-2col.gestapelt{grid-template-columns:1fr} .head-2col.gestapelt > *:not(div){grid-column:1; grid-row:3; margin-top:22px; max-width:62ch} @media(max-width:860px){ .head-2col{grid-template-columns:1fr} .head-2col > div > .eyebrow{grid-row:1} .head-2col > div > h2{grid-row:2} .head-2col > *:not(div){grid-column:1; grid-row:3; margin-top:24px} } .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0} @media(max-width:860px){ .steps{grid-template-columns:1fr} } .step{ padding:38px 34px 38px 0; border-top:2px solid var(--navy); position:relative; display:flex; flex-direction:column; } .step + .step{padding-left:34px; border-left:1px solid var(--line-soft)} @media(max-width:860px){ .step + .step{padding-left:0; border-left:0} } .step .n{ font-family:"Literata",Georgia,serif; font-size:.95rem; font-weight:600; color:var(--brand-rot); letter-spacing:.08em; display:block; margin-bottom:16px; } .step h3{margin-bottom:12px} .step p{font-size:.96rem; color:var(--muted)} .step .tag{ align-self:flex-start; margin-top:auto; font-size:.78rem; font-weight:600; letter-spacing:.06em; color:var(--navy-soft); background:var(--sand); padding:6px 13px; border-radius:999px; } .step p{margin-bottom:22px} /* ============================================================ Erklärsituation (Foto) ============================================================ */ .fotoband{margin-top:clamp(48px,5vw,66px); position:relative} .fotoband figure{margin:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-l); position:relative} .fotoband img{ width:100%; aspect-ratio:3/1; object-fit:cover; object-position:62% 44%; display:block; } .fotoband figure::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(0deg,rgba(20,41,63,.55) 0%,rgba(20,41,63,.12) 34%,transparent 56%), linear-gradient(100deg,rgba(20,41,63,.66) 0%,rgba(20,41,63,.30) 36%,transparent 64%); } .fotoband figcaption{ position:absolute; left:clamp(28px,4vw,52px); bottom:clamp(28px,4vw,46px); z-index:2; color:#fff; max-width:23em; } .fotoband figcaption b{ display:block; font-family:"Literata",Georgia,serif; font-weight:600; font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.26; margin-bottom:7px; } .fotoband figcaption span{font-size:.92rem; color:rgba(255,255,255,.8); line-height:1.5; display:block} @media(max-width:620px){ .fotoband img{aspect-ratio:4/5} .fotoband figure::after{background:linear-gradient(0deg,rgba(20,41,63,.82) 0%,rgba(20,41,63,.3) 46%,transparent 72%)} .fotoband figcaption{left:24px; right:24px; bottom:24px; max-width:none} } /* ============================================================ WissensHub ============================================================ */ .hubgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px} @media(max-width:820px){ .hubgrid{grid-template-columns:1fr} } .hub{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r-m); padding:34px 32px; box-shadow:var(--shadow-s); transition:transform .45s var(--ease), box-shadow .45s var(--ease); } .hub:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)} .hub .n{ font-family:"Literata",Georgia,serif; font-size:.9rem; font-weight:600; color:var(--brand-rot); letter-spacing:.08em; display:block; margin-bottom:14px; } .hub h3{margin-bottom:10px} .hub p{font-size:.95rem; color:var(--muted)} /* ---------- Der Faecher im WissensHub -------------------------------------- Erst waren es vier Karten nebeneinander, Thomas' Urteil: nichtssagend. Dann Reiter, die waren brauchbar, aber nicht originell. Jetzt liegen die Karten uebereinander wie ein aufgefaecherter Stapel und richten sich auf, sobald man sie anfasst. Warum es kein Karussell wie bei LinkedIn geworden ist: Ein Karussell versteckt drei von vier Karten hinter einer Wischgeste, die auf dem Rechner niemand macht. Der Faecher zeigt alle vier auf einmal, man sieht die Tiefe, und jede einzelne holt man sich mit dem Zeiger nach vorn. Die Aussage „aus einzelnen Modulen wird ein Ort" bekommt damit ein Bild: ein Stapel, der zusammengehoert. Die Karten liegen leicht gedreht und versetzt, --i ist die Nummer von 0 an. Auf schmalen Bildschirmen faellt der Stapel auseinander und wird zur Liste, dort gibt es keinen Zeiger, mit dem man auffaechern koennte. */ /* --i muss ausdruecklich als Zahl angemeldet werden. Ohne das kennt der Browser ihren Typ beim Auswerten nicht, und `calc((var(--i) - 1.5) * 1.6deg)` faellt still durch: die Karten lagen dann alle gerade. Bei z-index ist es gutgegangen, dort steht die Zahl allein. Deshalb unten auch die einfachere Schreibweise `var(--i) * 1.6deg - 2.4deg` statt der Klammer davor. */ @property --i{ syntax:""; inherits:false; initial-value:0 } .faecher{ display:flex; gap:0; padding:26px 0 46px; perspective:1400px; } .fkarte{ flex:1 1 0; min-width:0; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r-m); box-shadow:var(--shadow-m); padding:32px 28px 28px; margin-left:-34px; transform-origin:bottom center; transform:rotate(calc(var(--i) * 1.7deg - 2.55deg)) translateY(calc(var(--i) * 5px)); transition:transform .5s var(--ease), box-shadow .5s var(--ease); position:relative; z-index:calc(4 - var(--i)); cursor:default; } .fkarte:first-child{margin-left:0} .faecher:hover .fkarte{transform:rotate(0deg) translateY(0)} .fkarte:hover{ z-index:9; transform:rotate(0deg) translateY(-12px) scale(1.03); box-shadow:var(--shadow-l); border-color:var(--line); } .fkarte .n{ font-family:"Literata",Georgia,serif; font-size:.9rem; font-weight:600; color:var(--brand-rot); letter-spacing:.08em; display:block; margin-bottom:14px; } .fkarte h3{margin-bottom:12px; font-size:clamp(1.15rem,1.7vw,1.42rem)} .fkarte p{font-size:.95rem; color:var(--muted)} /* Der Merksatz steht in Rot. Er ist das, was von der Karte haengenbleibt, und hebt sich so vom Erklaertext darueber ab. Auf dem weissen Kartengrund kommt das Karmesin auf gut 8 zu 1 und ist damit ohne Einschraenkung lesbar. */ .fkarte .merk{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft); font-family:"Literata",Georgia,serif; font-size:1.02rem; color:var(--brand-rot); text-wrap:balance; } @media(max-width:900px){ .faecher{flex-direction:column; gap:16px; padding-bottom:20px; perspective:none} .fkarte{margin-left:0; transform:none; z-index:auto} .faecher:hover .fkarte, .fkarte:hover{transform:none; box-shadow:var(--shadow-m)} } /* ------------------------------------------------------------ Ruhiger Fächer, für die Reports auf /wissen -------------------------------------------------------------- Dieselbe Bauweise wie der WissensHub-Fächer, nur ohne Neigung und ohne Versatz: die Karten stehen gerade nebeneinander und schieben sich nur leicht ineinander. Thomas' Ansage vom 11.08.: der Fächer spart den Platz, den fünf Kacheln in zwei Reihen weggenommen haben, aber hier soll er ruhig liegen. Der Stapel als Bild passt ohnehin: es sind Hefte. Angefasst wird nur die eine Karte, die man zeigt. Beim Neigungsfächer richtet sich der ganze Stapel auf, hier gibt es nichts aufzurichten. ------------------------------------------------------------ */ .faecher.gerade{padding:26px 0 34px} .faecher.gerade .fkarte{ transform:none; margin-left:-22px; padding:0 0 24px; overflow:hidden; display:flex; flex-direction:column; } .faecher.gerade .fkarte:first-child{margin-left:0} .faecher.gerade:hover .fkarte{transform:none} .faecher.gerade .fkarte:hover{ z-index:9; transform:translateY(-10px); box-shadow:var(--shadow-l); border-color:var(--line); } /* Das Titelbild ist der Deckel des Hefts und sitzt bündig in der Karte. */ .faecher.gerade .fkarte img{ width:100%; height:auto; aspect-ratio:595 / 500; object-fit:cover; object-position:top center; border-bottom:1px solid var(--line-soft); } .faecher.gerade .fkarte .kick, .faecher.gerade .fkarte h3, .faecher.gerade .fkarte p, .faecher.gerade .fkarte .linkline{margin-left:24px; margin-right:24px} .faecher.gerade .fkarte .kick{ display:block; margin-top:20px; margin-bottom:8px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; } .faecher.gerade .fkarte h3{font-size:1.06rem; line-height:1.28; margin-bottom:10px} .faecher.gerade .fkarte p{font-size:.88rem; line-height:1.5; margin-bottom:0} /* Der Link sitzt unten, damit er bei allen fünf auf einer Linie liegt. */ .faecher.gerade .fkarte .linkline{margin-top:auto; padding-top:18px; font-size:.85rem} @media(max-width:900px){ /* `flex:0 0 auto` ist hier Pflicht und nicht Kosmetik. Gestapelt wird aus der Reihe eine Spalte, und `flex:1 1 0` von `.fkarte` bezieht sich dann auf die Hoehe: Basis null. Normalerweise faengt die automatische Mindestgroesse das ab, aber `overflow:hidden` weiter oben setzt genau die ausser Kraft. Ohne diese Zeile fallen die Karten auf 26 Punkt zusammen, also auf Rand plus Polster, mit dem ganzen Inhalt unsichtbar darin. Am 11.08. so gemessen. */ .faecher.gerade .fkarte{margin-left:0; flex:0 0 auto} .faecher.gerade .fkarte:hover{transform:none} .faecher.gerade .fkarte img{aspect-ratio:16 / 7} } .hub-foot{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; } .hub-foot .claim{font-family:"Literata",Georgia,serif; font-size:clamp(1.3rem,2.2vw,1.75rem)} /* ============================================================ Ressourcen ============================================================ */ .reso{ display:grid; grid-template-columns:.42fr .58fr; gap:0; border:1px solid var(--line-soft); border-radius:var(--r-l); overflow:hidden; background:var(--paper); box-shadow:var(--shadow-m); } @media(max-width:820px){ .reso{grid-template-columns:1fr} } .reso-cover{ background:linear-gradient(155deg,#1E3A5F,#14293F 60%,#2F6099); color:#fff; padding:clamp(34px,4vw,48px); display:flex; flex-direction:column; justify-content:space-between; gap:40px; min-height:300px; position:relative; overflow:hidden; } .reso-cover::after{ content:""; position:absolute; right:-90px; bottom:-90px; width:280px; height:280px; border-radius:50%; border:1px solid rgba(255,255,255,.14); } .reso-cover .kick{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; opacity:.72} .reso-cover .tt{font-family:"Literata",Georgia,serif; font-size:1.75rem; line-height:1.2; position:relative; z-index:1} .reso-cover .by{font-size:.8rem; opacity:.6} .reso-body{padding:clamp(34px,4vw,48px); display:flex; flex-direction:column; justify-content:center} .reso-body p{color:var(--muted)} .reso-cta{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:28px} /* ============================================================ Momente (Flip-Karten) ============================================================ */ .moments{background:linear-gradient(180deg,var(--ivory),var(--sand) 52%,var(--ivory))} /* `grid-auto-rows:1fr` gibt allen Zeilen dieselbe Hoehe, naemlich die der hoechsten Kachel. Damit sind alle sechs gleich gross, in drei Spalten wie in einer. Thomas' Ansage vom 11.08., und es ist die breitenunabhaengige Loesung: eine feste Hoehe in Punkt waere bei jedem anderen Geraet wieder falsch, weil dort andere Zeilenumbrueche entstehen. Die Kacheln wachsen weiter mit ihrem Inhalt, nur eben alle gemeinsam. */ .mgrid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:20px} @media(max-width:980px){ .mgrid{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .mgrid{grid-template-columns:1fr} } /* Am 11.08. umgebaut, Thomas' Befund beim mobilen Durchgang: unter dem Zitat klaffte eine Luecke, bevor die Person kam. Ursache waren zwei Dinge zusammen. Beide Kartenseiten lagen absolut, damit bestimmte der Inhalt die Hoehe nie und jede Kachel stand starr auf 230 Punkt, waehrend die laengste nur 194 brauchte. Und `space-between` schob den Rest genau zwischen Zitat und Person. Jetzt traegt die Vorderseite die Hoehe, sie steht im Fluss. Nur die Rueckseite liegt darueber. `min-height` ist die Untergrenze und richtet sich nach der laengsten Rueckseite, die 189 Punkt braucht: wird sie kleiner gesetzt, wird die Rueckseite abgeschnitten. Wer dort laengere Texte einsetzt, prueft diesen Wert nach. */ .moment{ position:relative; min-height:200px; cursor:pointer; perspective:1400px; background:none; border:0; padding:0; text-align:left; /* Flex-Spalte, damit die Vorderseite die Kachel ausfuellen kann. Ohne das bleibt sie auf ihrer Inhaltshoehe stehen, waehrend das Raster die Kachel auf die Hoehe der hoechsten streckt: die weisse Flaeche war dann 187 Punkt hoch in einer 214 Punkt hohen Kachel, die blaue Rueckseite dagegen 214, weil sie absolut liegt und den Rahmen von selbst fuellt. Genau dieser Unterschied war am 11.08. zu sehen. */ display:flex; flex-direction:column; } .moment .face{ position:absolute; inset:0; border-radius:var(--r-m); padding:30px; display:flex; flex-direction:column; justify-content:flex-start; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .75s var(--ease), box-shadow .4s; } .moment .front{ position:relative; inset:auto; flex:1 1 auto; background:var(--paper); border:1px solid var(--line-soft); box-shadow:var(--shadow-s); } /* Der feste, ruhige Abstand zwischen Zitat und Person. Er bleibt gleich, auch wenn das Raster die Kachel auf die Hoehe ihrer Nachbarin streckt. */ .moment .front > div:last-child{margin-top:20px} .moment:hover .front{box-shadow:var(--shadow-m)} .moment .back{ background:var(--navy); color:#fff; transform:rotateY(180deg); box-shadow:var(--shadow-m); } .moment.flipped .front{transform:rotateY(180deg)} .moment.flipped .back{transform:rotateY(360deg)} .moment q{ font-family:"Literata",Georgia,serif; font-size:1.16rem; line-height:1.42; quotes:"„" "“"; display:block; } .moment .who{font-size:.79rem; color:var(--muted); letter-spacing:.03em} .moment .flipnote{ font-size:.75rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--akzent); display:flex; align-items:center; gap:8px; } .moment .back .label{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-rot); margin-bottom:12px; display:block; } .moment .back p{font-size:1.02rem; line-height:1.5} .moments .after{ margin-top:46px; text-align:center; font-size:1.02rem; color:var(--muted); } /* ============================================================ Rechner ============================================================ */ .calc{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-l); background:var(--paper); border:1px solid var(--line-soft); } @media(max-width:860px){ .calc{grid-template-columns:1fr} } .calc-l{padding:clamp(34px,4vw,52px)} .calc-r{ background:var(--navy); color:#fff; padding:clamp(34px,4vw,52px); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; } .calc-r::after{ content:""; position:absolute; left:-90px; bottom:-90px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(47,96,153,.34),transparent 66%); } .calc-r > *{position:relative; z-index:1} .field{margin-bottom:32px} .field:last-child{margin-bottom:0} .field label{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px} .field .lb{font-size:.95rem; font-weight:500} .field .val{font-family:"Literata",Georgia,serif; font-size:1.3rem; font-weight:600; color:var(--akzent); white-space:nowrap} input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; background:var(--sand); outline:none; cursor:pointer; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--paper); border:1.5px solid var(--akzent); cursor:grab; box-shadow:0 2px 8px rgba(20,41,63,.16); transition:transform .25s var(--ease), box-shadow .25s; } input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12); box-shadow:0 4px 14px rgba(47,96,153,.3)} input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--paper); border:1.5px solid var(--akzent); cursor:grab; } .calc-out .num{ font-family:"Literata",Georgia,serif; font-size:clamp(3.4rem,7vw,5.4rem); line-height:1; font-weight:600; letter-spacing:-.03em; } .calc-out .unit{font-size:1.05rem; margin-top:10px; letter-spacing:.04em; color:var(--brand-rot); font-weight:600} .calc-out p{margin-top:26px; font-size:1rem; opacity:.82; max-width:26em} .calc-out .fine{margin-top:18px; font-size:.78rem; opacity:.5} /* ============================================================ Wege (Tabs) ============================================================ */ .tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px} .tab{ background:transparent; border:1px solid var(--line); border-radius:999px; padding:13px 24px; cursor:pointer; font-size:.93rem; font-weight:600; color:var(--navy-soft); transition:all .35s var(--ease); } .tab:hover{border-color:rgba(20,41,63,.3); color:var(--navy)} .tab[aria-selected=true]{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:var(--shadow-m)} .pane{display:none} .pane.active{display:block; animation:fadeUp .55s var(--ease)} @keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}} .pane-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; border:1px solid var(--line-soft); border-radius:var(--r-l); overflow:hidden; background:var(--paper); box-shadow:var(--shadow-m); } @media(max-width:920px){ .pane-grid{grid-template-columns:1fr} } .pane-l{padding:clamp(34px,4vw,54px)} .pane-l h3{font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:16px} .pane-l p{color:var(--muted)} .pane-r{background:var(--sand-tief); padding:clamp(34px,4vw,54px)} .spec{display:flex; gap:16px; padding:17px 0; border-bottom:1px solid rgba(20,41,63,.09)} .spec:last-of-type{border-bottom:0} .spec .k{flex:none; width:120px; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; padding-top:3px} .spec .v{font-size:.98rem; font-weight:500} .pane-r .out{ margin-top:22px; padding:20px 22px; background:var(--paper); border-radius:var(--r-m); border:1px solid var(--line-soft); box-shadow:var(--shadow-s); } .pane-r .out b{display:block; font-family:"Literata",Georgia,serif; font-size:1.1rem; margin-bottom:5px} .pane-r .out span{font-size:.9rem; color:var(--muted)} .pane-cta{margin-top:34px; display:flex; flex-wrap:wrap; gap:18px; align-items:center} /* ============================================================ Fall ============================================================ */ .case{background:var(--navy); color:#fff; position:relative; overflow:hidden} .case::before{ content:""; position:absolute; left:50%; top:-260px; width:760px; height:760px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(47,96,153,.22),transparent 64%); } .case .inner{position:relative; z-index:1} .case .eyebrow{color:#9FC5EA} .case-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center} @media(max-width:900px){ .case-grid{grid-template-columns:1fr; gap:44px} } .case h2{color:#fff; margin-bottom:24px} .case p{color:rgba(255,255,255,.76)} .quotebox{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-l); padding:clamp(32px,4vw,46px); backdrop-filter:blur(8px); } .quotebox q{font-family:"Literata",Georgia,serif; font-size:clamp(1.3rem,2.1vw,1.6rem); line-height:1.45; quotes:"„" "“"} .quotebox q::before,.quotebox q::after{color:#9FC5EA} .quotebox .by{margin-top:26px; display:flex; align-items:center; gap:13px; font-size:.9rem} .quotebox .by .ln{width:26px; height:1px; background:rgba(255,255,255,.35)} .quotebox .by b{font-weight:600} .quotebox .by span{color:rgba(255,255,255,.6)} .case-facts{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px} .case-facts i{ font-style:normal; font-size:.83rem; padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); } .case a.linkline{color:#fff; border-color:rgba(255,255,255,.35)} .case a.linkline:hover{color:#BFDBF7; border-color:#BFDBF7} /* ============================================================ Person ============================================================ */ .person-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center} @media(max-width:900px){ .person-grid{grid-template-columns:1fr; gap:44px} } .portrait{position:relative} .portrait img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:62% 34%; border-radius:var(--r-l); box-shadow:var(--shadow-l); position:relative; z-index:1; } .portrait::before{ content:""; position:absolute; inset:22px -22px -22px 22px; border-radius:var(--r-l); border:1px solid var(--line); } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:52px; border-top:1px solid var(--line-soft); } @media(max-width:700px){ .stats{grid-template-columns:repeat(2,1fr)} } .stat{padding:26px 20px 0 0} .stat + .stat{padding-left:20px; border-left:1px solid var(--line-soft)} @media(max-width:700px){ .stat:nth-child(3){border-left:0; padding-left:0} } .stat b{ display:block; font-family:"Literata",Georgia,serif; font-size:clamp(1.9rem,3.2vw,2.5rem); font-weight:600; letter-spacing:-.02em; line-height:1; } .stat span{display:block; margin-top:9px; font-size:.83rem; color:var(--muted); line-height:1.4} /* ============================================================ Schluss-CTA ============================================================ */ /* Dieselbe Farbgebung wie „Ein echter Fall" und das Band darueber: die Navy- Flaeche mit einem Lichtfleck, kein eigener Verlauf. Vorher lief hier ein deutlich helleres Blau, dadurch sahen die drei dunklen Bloecke der Seite nach drei verschiedenen Blautoenen aus. Am 10.08. angeglichen. Nebeneffekt, der einen frueheren Handgriff ueberfluessig macht: der Block endet jetzt von selbst auf der Farbe der Fusszeile, die Naht dorthin ist ohne Zutun nahtlos. */ .final{ background:var(--navy); color:#fff; position:relative; overflow:hidden; } .final::after{ content:""; position:absolute; right:-180px; bottom:-220px; width:660px; height:660px; border-radius:50%; background:radial-gradient(circle,rgba(47,96,153,.32),transparent 66%); } .final .inner{position:relative; z-index:1; max-width:760px} .final .eyebrow{color:#9FC5EA} .final h2{color:#fff; font-size:clamp(2.2rem,4.6vw,3.5rem)} .final p{color:rgba(255,255,255,.78); font-size:1.1rem; margin-top:22px; max-width:34em} .final .row{display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:40px} .final .meta{ margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:12px 34px; font-size:.88rem; color:rgba(255,255,255,.62); } /* ---------- Footer ---------- */ footer{background:var(--navy); color:rgba(255,255,255,.58); padding:62px 0 34px; font-size:.86rem} footer a{text-decoration:none; transition:color .3s} footer a:hover{color:#fff} /* Drei Spalten seit dem 10.08. Die Spalte „Angebot" ist entfallen, sie zeigte nach der Stilllegung der Angebotsseite ohnehin nur noch auf Anker derselben Seite. Das BVMW-Zeichen steht jetzt unter der Marke statt allein in der Schlusszeile, dort sah es aus wie vergessen. */ .fcols{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px} @media(max-width:860px){ .fcols{grid-template-columns:1fr 1fr; gap:34px} } @media(max-width:520px){ .fcols{grid-template-columns:1fr} } /* Das Zeichen lag bei 46 Punkt Breite, da war die Schrift darin nicht zu lesen. Die Datei hat 329 Punkt Aufloesung, 130 bleiben scharf. Wichtig zu wissen: `bvmw-logo.png` ist eine **weisse** Fassung auf durch- sichtigem Grund. In der Fusszeile ist das richtig, dort steht sie auf Navy. Die Deckkraft ist auf denselben Wert gestellt wie die Schrift ringsum, damit das Zeichen mit den Texten auf einer Ebene liegt und nicht darueber. */ .fmitglied{margin-top:16px; width:130px; height:auto; opacity:.58} .fcols > div{display:flex; flex-direction:column; gap:11px; align-items:flex-start} .fcols b{color:#fff; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin-bottom:4px} .fcols p{margin:0; line-height:1.65} .fbrand{height:30px; width:auto; margin-bottom:4px} .frow{margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px} footer img{height:26px; opacity:.55; filter:brightness(0) invert(1)} /* ---------- Reveal ---------- */ /* Ohne JavaScript bleibt alles sichtbar, die Klasse js kommt aus dem Inline-Skript im head */ .js .rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)} .js .rv.in{opacity:1; transform:none} @media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} *{animation:none !important} } /* ---------- Kleine Bildschirme ---------- */ @media(max-width:620px){ body{font-size:16px} .wrap{padding:0 22px} h1{font-size:2.15rem} h1 .em{white-space:normal} h1 .em::after{display:none} .brand img{height:24px} .nav-cta{padding:11px 17px; font-size:.8rem} .hero{padding:112px 0 70px} .modulcard{padding:24px} .quotebox q{font-size:1.15rem} /* Hier stand `.moment{min-height:250px}`. Das war noetig, solange beide Kartenseiten absolut lagen und die Hoehe nur aus dieser Zahl kam: auf schmalen Bildschirmen laufen die Zitate ueber mehr Zeilen. Seit die Vorderseite im Fluss steht, waechst die Kachel von selbst mit, und die Zahl erzeugte nur noch genau den Leerraum unter dem Zitat, den Thomas am 11.08. bemaengelt hat. Die Untergrenze von 200 Punkt steht oben. */ .step{padding-right:0} .trust{gap:12px 20px} } /* ---------- Fortschrittsbalken ---------- */ .progress{position:fixed; top:0; left:0; height:2px; z-index:200; background:linear-gradient(90deg,var(--navy-mid),var(--akzent)); width:0} /* ============================================================ Reinschauen, die Tür ins Demo-Modul Ergänzt am 10.08.2026. Im Entwurf gab es diesen Abschnitt nicht, er ist mit derselben Sprache gebaut: Karte auf Papier, Pille als Etikett, ein Feld, ein Häkchen, ein Knopf. ============================================================ */ .demo-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; } @media(max-width:900px){ .demo-grid{grid-template-columns:1fr; gap:40px} } /* Auf der Gespraechsseite starten beide Spalten oben auf derselben Linie. Mit der zentrierten Voreinstellung ragte das Formular 148 Punkt ueber die Auszeichnung hinaus und begann fast unter der Kopfzeile, weil es hoeher ist als die Textspalte und `center` den Ueberschuss nach oben verteilt. Thomas' Befund vom 11.08. Bewusst nur hier: `.demo-grid` steht auf fuenf Seiten, und auf den anderen vier ist die mittige Ausrichtung richtig. */ body.ziel .demo-grid{align-items:start} /* Der zweite Weg auf der Gespraechsseite: wer sich sicher ist, sucht sich gleich einen Termin, ohne den Umweg ueber das Formular. Bewusst ein Umrisssknopf und kein voller: er soll sichtbar sein, aber dem Formular nicht die Aufmerksamkeit nehmen. Calendly wird verlinkt und nicht eingebettet, ein eingebetteter Kalender laedt beim Seitenaufruf ungefragt Daten in die USA und braeuchte damit eine Einwilligung, genau an der Stelle, an der wir jede Huerde abgebaut haben. Beim Klick entscheidet der Besucher selbst. */ .direktbuchung{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line-soft); } .direktbuchung p{font-size:.95rem; color:var(--muted); margin:0 0 16px; max-width:38em} .direktbuchung .btn{padding:13px 24px; font-size:.85rem} /* ---------- Videokopf der Demo-Seite --------------------------------------- Wer auf /demo kommt, soll zuerst sehen und dann lesen. Deshalb steht hier ein Film und kein Formular. Das Feld ist noch ein Platzhalter, es haelt aber bereits das Seitenverhaeltnis 16 zu 9, damit beim Einsetzen des Mitschnitts nichts springt. */ /* Aufbau seit dem 10.08., in dieser Reihenfolge gewuenscht: Auszeichnung, Ueberschrift und Ansage ueber die ganze Breite, darunter nebeneinander der Film und die Karte zum Starten, darunter wieder ueber die ganze Breite, was drin ist. Der Film zeigt, die Karte laesst handeln, beide auf einer Hoehe: wer nach zehn Sekunden Film ueberzeugt ist, muss nicht scrollen, um einzusteigen. */ .videokopf{padding-bottom:clamp(40px,4vw,64px)} /* Ueberschrift und Ansage laufen ueber die volle Breite, ohne Zeilenbremse. Das ist hier gewollt: der Kopf soll die Seite aufmachen und nicht in einer Spalte stehen. */ .videokopf-text{max-width:none; margin-bottom:clamp(30px,3.6vw,48px)} .videokopf-text h1{margin-bottom:18px; font-size:clamp(2.1rem,4.4vw,3.5rem)} .videokopf-text .hero-sub{max-width:none} /* Film und Karte teilen sich die Breite genau haelftig. */ .video-und-zugang{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.2vw,48px); align-items:start; } @media(max-width:980px){ .video-und-zugang{grid-template-columns:1fr; gap:34px} } /* Der Satz steht in der linken Spalte unter der Bildunterschrift des Films, nicht quer unter beiden Spalten. So gehoert er sichtbar zum Film und nicht zur Karte daneben. */ .unter-paar{ margin:22px 0 0; font-size:1rem; line-height:1.62; color:var(--muted); } .videofeld{margin:0} .videoplatz{ aspect-ratio:16 / 9; width:100%; border-radius:var(--r-l); overflow:hidden; background:linear-gradient(150deg,#1E3A5F,#0F2032 62%,#2A3F55); box-shadow:var(--shadow-l); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; color:rgba(255,255,255,.72); } .vp-knopf{ width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center; color:#fff; padding-left:5px; } .vp-text{font-size:.92rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600} /* Die zentrierte Bildunterschrift unter dem Videofeld ist am 11.08. entfallen. Sie sagte dasselbe wie der Absatz darunter, nur in einer zweiten Schriftgroesse und mittig, und liess den Bereich unter dem Film zerfallen. Beides steht jetzt als ein Fliesstext in `.unter-paar`. */ .demo-liste{list-style:none; padding:0; margin:26px 0 0} .demo-liste li{ position:relative; padding-left:30px; margin-top:13px; font-size:.96rem; color:var(--muted); line-height:1.55; } .demo-liste li::before{ content:""; position:absolute; left:0; top:.45em; width:8px; height:8px; border-radius:50%; background:var(--brand-rot); opacity:.9; } .demo-karte{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:clamp(28px,3.4vw,40px); box-shadow:var(--shadow-l); } .demo-karte .mc-title{margin-top:16px} .demo-karte .mc-desc{margin-bottom:4px} .feld{display:block; margin-top:24px} .feld > span{display:block; font-size:.8rem; font-weight:600; letter-spacing:.04em; margin-bottom:8px} /* Bewusst nach Feldtyp ausgenommen statt nach Feldtyp aufgezählt. Die alte Fassung listete nur email und text, deshalb stand das Telefonfeld als ungestyltes Browserfeld zwischen vier gestylten: 22 statt 58 Punkt hoch und 13,3 statt 16 Punkt Schrift. Unter 16 Punkt zoomt Safari auf dem iPhone beim Antippen selbsttätig in die Seite hinein. Jeder künftige Feldtyp ist damit von selbst mit dabei. Haken und Auswahlknöpfe stehen unter `.haken`. */ .feld input:not([type="checkbox"]):not([type="radio"]), .feld textarea, .feld select{ width:100%; padding:15px 17px; font:inherit; color:var(--navy); background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-s); transition:border-color .3s, box-shadow .3s, background .3s; } .feld input:focus, .feld textarea:focus{ outline:none; background:#fff; border-color:var(--akzent); box-shadow:0 0 0 3px rgba(47,96,153,.14); } /* Kleiner gesetzt als der uebrige Text, aber bewusst nicht ausgegraut. Eine Einwilligung, die man ueberliest, ist keine, und dann darf niemand anrufen. 0,78 rem sind rund 12,5 Punkt und damit lesbar. */ .haken{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; margin:18px 0 24px; cursor:pointer; font-size:.78rem; color:var(--muted); line-height:1.45; } .haken input{margin-top:.15em; width:.95em; height:.95em; accent-color:var(--akzent); flex:none} .demo-fuss{margin-top:16px; font-size:.82rem; color:var(--muted)} /* ============================================================ Fenster für die Reportanforderung -------------------------------------------------------------- Ein `` und kein nachgebautes Fenster: der Browser bringt die Bedienung schon mit, die man sonst von Hand nachbauen und dabei halb vergessen wuerde. Escape schliesst, der Rest der Seite ist nicht mehr erreichbar, der Blick springt beim Schliessen zurueck. Die Karten der Reports sind deshalb `