/* Manrope, variabel 400-800, selbst gehostet. SIL Open Font License 1.1, Selbsthosting ausdruecklich erlaubt. Zwei Schnitte statt vier Dateien: 39 KB statt 447 KB. Gemessen an foerderung.de am 29.10.2026, dort laeuft dieselbe Schrift. */ @font-face{ font-family:Manrope;src:url(schrift/Manrope-var-latin.woff2) format('woff2-variations'); font-weight:400 800;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:Manrope;src:url(schrift/Manrope-var-latin-ext.woff2) format('woff2-variations'); font-weight:400 800;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ========================================================================== [FIRMA] · Startseite Bauplan: grabosch.com, 1:1 uebersetzt. Werte gemessen am 26.10.2026. Quelle der Masse: IMMENS/Website/01_Referenz-Grabosch.md ========================================================================== */ /* 1 · Token ---------------------------------------------------------------- */ :root{ --grund:#FFFFFF; /* Rafi 28.10.2026: Grund ist Weiss, nicht Papier */ --flaeche:#ffffff; --schrift:#15161A; --schrift-still:#6E6A60; --linie:rgb(21 22 26 / .085); --linie-stark:rgb(21 22 26 / .15); --signal:#177CB7; --signal-weich:#E7F2F9; --signal-tief:#15669A; --breite:1152px; --sektion:96px; --luft:16px; --radius:12px; --radius-karte:16px; --radius-gross:24px; --an:40ms; --aus:240ms; --kurve:cubic-bezier(.4,0,.2,1); --kurve-aus:cubic-bezier(0,0,.2,1); --balken-h:43px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--grund); color:var(--schrift); font-family:"Manrope",ui-sans-serif,system-ui,sans-serif; font-size:16px; line-height:24px; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,p,figure,dl,dd{margin:0} ul{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} /* 2 · Raster --------------------------------------------------------------- */ .sektion{border-top:1px solid var(--linie);position:relative} .bahn{ max-width:var(--breite); margin-inline:auto; padding-inline:var(--luft); position:relative; } @media (min-width:1200px){ /* Rafi 28.10.2026: Das Hairline-Raster von Grabosch ist raus. Keine senkrechten Linien, keine Knotenkreuze. Nur das Polster bleibt, damit die Inhaltsbreite bei 1104 bleibt. */ .bahn{padding-inline:24px} } .innen{padding-block:var(--sektion)} /* 3 · Schrift -------------------------------------------------------------- */ .titel-xl{ font-size:clamp(2.48rem,1.1rem + 6.34vw,6.8rem); line-height:.95; letter-spacing:-.025em; font-weight:400; text-wrap:balance; } .titel-l{ font-size:clamp(1.75rem,1.1rem + 2.2vw,3rem); line-height:1; font-weight:500; text-wrap:balance; } .titel-m{font-size:1.125rem;line-height:1.75rem;font-weight:600} .titel-s{font-size:1rem;line-height:1.5rem;font-weight:600} .still{color:var(--schrift-still)} .vorspann{ font-size:clamp(1rem,.95rem + .25vw,1.125rem); line-height:1.7; color:var(--schrift-still); max-width:46rem; } .vorspann strong{color:var(--schrift);font-weight:500} .kapitelmarke{ display:inline-block; font-size:.75rem; line-height:1rem; font-weight:500; letter-spacing:.05em; color:var(--schrift-still); } .kapitelmarke b{color:var(--schrift);font-weight:500} .pille{ display:inline-flex;align-items:center;gap:.5rem; font-size:.875rem;line-height:20px;font-weight:500;color:var(--signal-tief); } .pille svg{width:16px;height:16px} /* 4 · Knoepfe -------------------------------------------------------------- */ .knopf{ display:inline-flex;align-items:center;justify-content:center;gap:.625rem; height:48px;padding-inline:32px; border-radius:999px; font-size:.875rem;font-weight:500; white-space:nowrap; transition:color var(--aus) var(--kurve), background-color var(--aus) var(--kurve), border-color var(--aus) var(--kurve), transform var(--an) var(--kurve); } .knopf svg{width:16px;height:16px;flex:none} .knopf:active{transform:scale(.98)} .knopf--dunkel{background:var(--schrift);color:var(--grund)} .knopf__zeichen{ width:18px;height:18px;border-radius:5px;background:currentColor; display:inline-block;position:relative;flex:none;opacity:.95; } .knopf__zeichen::after{ content:"";position:absolute;inset:5px 5px auto auto; width:6px;height:6px;border-radius:2px;background:var(--schrift); } .knopf--dunkel:hover{background:#000000} .knopf--hell{background:var(--flaeche);color:var(--schrift);border:1px solid var(--linie-stark)} .knopf--hell:hover{background:#F0F0F2} .knopf--klein{height:36px;padding-inline:16px;font-size:.75rem} .knopf--weiss{background:#fff;color:var(--schrift)} .knopf--rand-hell{border:1px solid rgb(255 255 255 / .35);color:#fff} .knopf--rand-hell:hover{background:rgb(255 255 255 / .12)} /* 5 · Balken und Kopf ------------------------------------------------------ */ .balken{ background:var(--schrift);color:var(--grund); min-height:var(--balken-h); display:flex;align-items:center;justify-content:center;gap:1rem; padding:.5rem 2.5rem; font-size:.875rem;line-height:1.25rem; position:relative;z-index:60; } .balken a{text-decoration:underline;text-underline-offset:3px;font-weight:500} .balken__zu{ position:absolute;right:1rem;top:50%;transform:translateY(-50%); width:24px;height:24px;display:grid;place-items:center; opacity:.6;transition:opacity var(--aus) var(--kurve); } .balken__zu:hover{opacity:1} .kopf{position:fixed;inset-inline:0;top:var(--balken-rest,var(--balken-h));z-index:50;padding-top:12px} .kopf__leiste{ max-width:var(--breite);margin-inline:auto; padding:14px 12px; border-radius:var(--radius-karte); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem; background:transparent; box-shadow:0 0 0 1px transparent, 0 8px 24px transparent; backdrop-filter:none; transition:background-color .3s var(--kurve-aus), box-shadow .3s var(--kurve-aus), backdrop-filter .3s var(--kurve-aus), padding .3s var(--kurve-aus); } [data-scrolled="true"] .kopf__leiste{ background:rgb(250 250 250 / .75); backdrop-filter:blur(12px); box-shadow:0 0 0 1px rgb(9 9 11 / .05), 0 6px 20px rgb(0 0 0 / .065); padding:14px 20px; } .marke{display:inline-flex;align-items:center;justify-self:start} .marke img{display:block;height:20px;width:auto} .marke--gross img{height:26px} .menue{display:flex;gap:1.75rem;font-size:.875rem;justify-self:center} .menue a{color:var(--schrift-still);transition:color var(--an) var(--kurve)} .menue a:hover{color:var(--schrift)} .kopf__rechts{display:flex;align-items:center;gap:1rem;justify-self:end} .kopf__draht{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--schrift-still)} .kopf__draht:hover{color:var(--schrift)} .menue-schalter{display:none} /* 6 · Auftakt -------------------------------------------------------------- */ .auftakt{padding-top:129px;padding-bottom:124px;overflow:hidden;background:var(--grund);border-top:0} /* Das Hairline-Raster beginnt erst nach dem Auftakt, wie bei der Vorlage */ /* Abstandsfolge der Vorlage: 24 · 24 · 32 · 24, unten 56 */ .auftakt__kopf{ text-align:center;display:grid;grid-template-columns:minmax(0,1fr); gap:24px;justify-items:center;padding-bottom:56px; } .auftakt__kopf .titel-xl{justify-self:stretch} .auftakt__kopf .vorspann{ width:100%;max-width:768px;text-align:center;font-size:18px;line-height:24.75px; } .auftakt__kopf .vorspann strong{font-weight:500;color:var(--schrift)} .auftakt__knoepfe{margin-top:8px} .auftakt__knoepfe{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center} .auftakt__beweis{display:flex;align-items:center;gap:16px;font-size:16px;color:var(--schrift-still)} .auftakt__beweis b{color:var(--schrift);font-weight:500} /* Karten-Bahn nach der Vorlage: alle Karten auf einer Mittelachse, nach aussen kleiner und blasser, die Luecken schrumpfen mit. Masse und Lage rechnet seite.js, damit das Ziehen stufenlos bleibt. */ .bahn-karten{ position:relative;height:582px;cursor:grab;touch-action:pan-y;overflow:hidden; } .bahn-karten.greift{cursor:grabbing} .bahn-karten__spur{position:absolute;inset:0} .arbeit{ position:absolute;top:50%;left:50%; width:356px;height:558px;transform:translate(-50%,-50%); background:#EAE6DD;border-radius:24px; transform-origin:center center; will-change:transform,opacity; } .bahn-karten__pfeile{display:flex;gap:12px;justify-content:center;padding-top:32px} .pfeil{ width:36px;height:36px;border-radius:999px;border:1px solid var(--linie-stark); background:var(--flaeche);display:grid;place-items:center; transition:background-color var(--aus) var(--kurve),opacity var(--aus) var(--kurve); } .pfeil:hover{background:rgb(21 22 26 / .05)} .pfeil[disabled]{opacity:.35;cursor:default} /* 7 · Beweiszeile ---------------------------------------------------------- */ .beweiszeile__text{text-align:center;font-size:.875rem;color:var(--schrift-still);padding-bottom:1.5rem} .beweiszeile__text b{color:var(--schrift);font-weight:500} .band{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;padding-bottom:.5rem} .band span{ font-size:.875rem;font-weight:600;letter-spacing:.02em; color:var(--schrift-still); /* kein Alpha: halbtransparent faellt beim Kontrast durch */ } .beweiszeile .innen{padding-block:40px} /* 8 · Die drei Ebenen als Kartenstapel ------------------------------------ Mechanik von creme.digital (klebende Karten, Haltepunkte je 30 px tiefer, 100 px Abstand im Fluss). Optik von grabosch.com: heller Grund, Hairline- Raster, weisse Karten mit Linie statt bunter Flaeche. */ .stapel{border-top:1px solid var(--linie)} .stapel__kopf{padding-block:var(--sektion) 0;display:grid;gap:1rem;max-width:42rem} .stapel__lead{text-wrap:balance} .stapel__unterzeile{font-size:16px;line-height:24px;color:var(--schrift-still)} .stapel__flaeche{padding-block:56px 0} /* Dieser Kasten ist der Halteraum der klebenden Karten. Blocksatz, nicht Raster: ein Rasterkind klebt nur in seiner eigenen Zeile. */ .stapel__karten{position:relative} .stapelkarte + .stapelkarte{margin-top:100px} /* Halteraum als echtes Element, nicht als Polster: Chrome begrenzt das Kleben am Inhaltskasten, ein padding-bottom zaehlt dafuer nicht mit. Ohne ihn fallen am Ende alle Karten auf einen Punkt. */ .stapel__halt{height:360px} .stapelkarte{ position:sticky;top:var(--halt); background:var(--flaeche);border-radius:var(--radius-gross); box-shadow:0 0 0 1px var(--linie), 0 -12px 32px rgb(0 0 0 / .045); display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; padding:48px;min-height:480px; } .stapelkarte__text{display:grid;gap:16px;align-content:center;justify-items:start} .stapelkarte__marke{ display:inline-flex;align-items:center;gap:.5rem; font-size:.75rem;line-height:1rem;font-weight:500;letter-spacing:.05em; color:var(--schrift-still); } .stapelkarte__hier{ display:inline-flex;align-items:center; padding:4px 10px;border-radius:999px; background:var(--signal-weich);color:var(--signal-tief); font-size:.75rem;font-weight:500; } .stapelkarte__titel{ font-size:48px;line-height:48px;font-weight:500;text-wrap:balance; } .stapelkarte p{color:var(--schrift-still);max-width:34rem} .stapelkarte__bild{ align-self:stretch;min-height:300px;border-radius:var(--radius-karte); background:rgb(21 22 26 / .05);box-shadow:inset 0 0 0 1px var(--linie); display:grid;place-items:center;padding:28px; } /* --- Prozessgrafiken in den Karten ------------------------------------ Gebaute Szenen statt Bilder, Bewegung aus Graboschs Bausteinen: Pulsring, Lichtpunkt auf der Verbindung, Haken nacheinander. Reine CSS-Schleifen, kein Skript. */ .balkenbild{display:flex;align-items:flex-end;gap:5px;height:34px} .balkenbild i{width:7px;border-radius:2px;background:var(--signal);display:block} .grafik{width:100%;max-width:300px;display:grid;justify-items:center;gap:0} .grafik--punkte,.grafik--muster{max-width:270px} /* Szene 1 · Die Berührungspunkte */ .punkt{ position:relative;width:100%; display:flex;align-items:center;gap:12px; background:var(--flaeche);border-radius:12px; box-shadow:0 0 0 1px var(--linie); padding:12px 14px;font-size:.8125rem;font-weight:500; animation:punkt-an 4.8s var(--kurve) infinite;animation-delay:var(--takt); } .punkt__mark{ width:20px;height:20px;border-radius:6px;background:var(--schrift);flex:none;position:relative; } .punkt__mark::after{ content:"";position:absolute;inset:6px 6px auto auto; width:6px;height:6px;border-radius:2px;background:var(--flaeche); } .punkt__name{color:var(--schrift)} .punkt__ring{ position:absolute;inset:-1px;border-radius:12px; box-shadow:0 0 0 1px var(--signal);opacity:0; animation:ring-an 4.8s var(--kurve) infinite;animation-delay:var(--takt); } @keyframes punkt-an{0%,22%{box-shadow:0 0 0 1px var(--linie)}8%,16%{box-shadow:0 0 0 1px var(--linie),0 6px 18px rgb(10 92 255 / .12)}} @keyframes ring-an{0%,22%,100%{opacity:0}6%,18%{opacity:1}} .ader{width:2px;height:40px} .ader--kurz{height:28px} .ader svg{width:2px;height:100%;overflow:visible} .ader line{stroke:var(--linie-stark);stroke-width:2} .ader line.laeuft{ stroke:var(--signal);stroke-dasharray:5 34; animation:ader-strahl 4.8s linear infinite; } @keyframes ader-strahl{0%{stroke-dashoffset:8}30%{stroke-dashoffset:-34}100%{stroke-dashoffset:-34}} /* Szene 2 · Gebiet und Takt */ .grafik--gebiet{gap:20px} .gebiet{display:grid;grid-template-columns:repeat(12,1fr);gap:7px;width:100%} .gebiet i{aspect-ratio:1;border-radius:999px;background:rgb(21 22 26 / .14);display:block} .gebiet i.nadel{ background:var(--signal); animation:nadel-puls 3.6s var(--kurve) infinite;animation-delay:var(--takt); } @keyframes nadel-puls{ 0%,70%,100%{box-shadow:0 0 0 0 rgb(10 92 255 / 0);transform:scale(1)} 12%{box-shadow:0 0 0 4px rgb(10 92 255 / .18);transform:scale(1.25)} 30%{box-shadow:0 0 0 0 rgb(10 92 255 / 0);transform:scale(1)} } .takt{width:100%;display:grid;gap:8px} .takt__zeile{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:10px; font-size:.6875rem;color:var(--schrift-still)} .takt__zeile i{ height:8px;border-radius:999px;background:var(--signal);display:block; width:var(--breit);transform-origin:left center; animation:takt-wachsen 3.6s var(--kurve) infinite; } .takt__zeile:nth-child(2) i{animation-delay:.25s} .takt__zeile:nth-child(3) i{animation-delay:.5s} @keyframes takt-wachsen{0%,100%{transform:scaleX(.25);opacity:.45}25%,70%{transform:scaleX(1);opacity:1}} /* Szene 3 des Auftakt-Karussells ist am 29.10.2026 entfernt worden. Die Markierung dazu gibt es im HTML nicht mehr, die Regeln liefen aber weiter und trafen ueber den gleichen Namen .schritt die drei Schritte der Loesung: die bekamen dort Flaeche, Radius 12, einen Rahmen und ein Polster von 12/14. Das war der unsaubere Kasten um jeden Schritt. .haken-kasten bleibt, das ist eine andere Klasse und wird benutzt. */ /* Die Lichtpunkte zwischen den Schritten laufen im selben Takt */ .grafik--muster .ader line.laeuft{animation:muster-strahl-1 5.4s linear infinite} .grafik--muster .ader:nth-of-type(4) line.laeuft{animation-name:muster-strahl-2} @keyframes muster-strahl-1{0%,10%{stroke-dashoffset:8}28%,100%{stroke-dashoffset:-28}} @keyframes muster-strahl-2{0%,32%{stroke-dashoffset:8}50%,100%{stroke-dashoffset:-28}} /* 10 · Kapitel ------------------------------------------------------------- */ .kapitel__kopf{text-align:center;display:grid;gap:1.25rem;justify-items:center;max-width:46rem;margin-inline:auto} .kacheln{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie);margin-top:4rem} .kachel{ padding:2.5rem;border-bottom:1px solid var(--linie); display:grid;gap:1rem;align-content:start; transition:background-color var(--aus) var(--kurve); } .kachel:nth-child(odd){border-right:1px solid var(--linie)} .kachel:hover{background:rgb(255 255 255 / .6)} .kachel__bild{min-height:230px;display:grid;place-items:center;margin-bottom:.5rem} .kachel p{color:var(--schrift-still);font-size:.9375rem} /* Attrappen */ .attrappe{ width:100%;max-width:340px;background:var(--flaeche); border:1px solid var(--linie);border-radius:var(--radius-karte); box-shadow:0 10px 30px rgb(0 0 0 / .05);overflow:hidden; } .attrappe__leiste{padding:10px 14px;border-bottom:1px solid var(--linie); display:flex;align-items:center;gap:8px;font-size:.6875rem;color:var(--schrift-still)} .attrappe__koerper{padding:14px;display:grid;gap:10px} .feld{ border:1px solid var(--linie-stark);border-radius:8px;padding:8px 10px; display:flex;align-items:center;gap:2px;font-size:.8125rem; } .marke-strich{ width:1px;height:20px;background:var(--signal);display:inline-block; animation:puls 2s cubic-bezier(.4,0,.6,1) infinite; } @keyframes puls{0%,100%{opacity:1}50%{opacity:.25}} .zeile-grau{height:8px;border-radius:4px;background:rgb(21 22 26 / .07)} .zeile-grau.kurz{width:55%} .zeile-grau.mittel{width:75%} .karte-anfrage{display:grid;gap:8px;font-size:.75rem} .karte-anfrage__kopf{display:flex;justify-content:space-between;align-items:center} .status{ display:inline-flex;align-items:center;gap:6px; padding:3px 8px;border-radius:999px; background:var(--signal-weich);color:var(--signal-tief); font-size:.6875rem;font-weight:500; } .status i{width:6px;height:6px;border-radius:999px;background:currentColor;display:block; animation:punkt 2s cubic-bezier(.4,0,.6,1) infinite} @keyframes punkt{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}} .karte-punkte{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;width:220px} .karte-punkte i{aspect-ratio:1;border-radius:999px;background:rgb(21 22 26 / .08);display:block} .karte-punkte i[data-nadel]{background:var(--signal);box-shadow:0 0 0 3px rgb(10 92 255 / .15)} .ablauf{display:grid;gap:0;width:100%;max-width:300px} .ablauf__knoten{ display:block; background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius); padding:10px 12px;font-size:.8125rem; color:var(--schrift); /* sonst erbt der Knoten das Weiss der Verlaufkachel */ } .ablauf__knoten strong{display:block;font-weight:600} .ablauf__knoten small{color:var(--schrift-still);font-size:.6875rem;display:block} .ablauf__strecke{height:34px;display:grid;place-items:center} .ablauf__strecke svg{width:2px;height:34px;overflow:visible} .ablauf__strecke line{stroke:rgb(255 255 255 / .35);stroke-width:2} .ablauf__strecke line.laeuft{ stroke:#fff;stroke-dasharray:6 40; animation:strahl 4.4s linear infinite; } @keyframes strahl{0%{stroke-dashoffset:10}68%{stroke-dashoffset:-40}100%{stroke-dashoffset:-40}} .sprachnachricht{display:flex;align-items:center;gap:12px;padding:12px 14px} .sprachnachricht__knopf{width:28px;height:28px;border-radius:999px;background:var(--signal); display:grid;place-items:center;color:#fff;flex:none} .welle{display:flex;align-items:center;gap:3px;height:24px;flex:1} .welle i{width:3px;border-radius:2px;background:rgb(21 22 26 / .18);display:block;height:100%; transform-origin:center;animation:wellen 1.4s cubic-bezier(.4,0,.6,1) infinite} @keyframes wellen{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.6);opacity:.6}} .verlaufkachel{ border-radius:var(--radius-gross);padding:2rem;min-height:420px; display:grid;align-content:space-between;gap:2rem;color:#fff; } .verlaufkachel h3{font-size:.875rem;font-weight:500;color:rgb(255 255 255 / .75)} .verlaufkachel p{font-size:1.125rem;line-height:1.6;font-weight:500} .verlaufkachel--a{background:linear-gradient(145deg,#0F4A6E,var(--signal) 58%,#2D96CF)} .verlaufkachel--b{background:linear-gradient(145deg,#15161A,#2A2D33 60%,#4A4E57)} .verlaufkachel__buehne{display:grid;place-items:center;padding:1rem 0} /* 11 · Die Zahl als dunkle Karte ------------------------------------------ Eigene Schicht: dunkler Grund, Partikel-Sphaere, Tempo-Skala. Der Akzent ist die aufgehellte Signalfarbe, damit die Seite bei einem Ton bleibt. Auf Cyan umstellen heisst: --karte-akzent aendern. */ /* Sphaere */ @keyframes funkeln{0%,100%{fill-opacity:.2}50%{fill-opacity:1}} /* Ohne diesen weichen Grund liegen die Zahlen direkt auf den Punkten und sind kaum lesbar. */ /* Text rechts */ /* Tempo-Skala */ @keyframes skala-puls{0%,100%{box-shadow:0 0 12px 2px rgb(77 155 255 / .55)}50%{box-shadow:0 0 18px 4px rgb(77 155 255 / .8)}} /* 12 · Stimmen ------------------------------------------------------------- */ /* 13 · Abschluss ----------------------------------------------------------- */ .angebotskarte{background:#fff;border-radius:var(--radius-karte);padding:1rem;display:grid;gap:.75rem;color:var(--schrift)} .angebotskarte__kopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .angebotskarte__titel{font-size:.8125rem;font-weight:600} .angebotskarte small{font-size:.6875rem;color:var(--schrift-still)} /* 14 · FAQ ----------------------------------------------------------------- */ .faq__kopf{display:grid;gap:1rem;max-width:40rem} .faq__gitter{display:grid;grid-template-columns:220px 1fr;gap:4rem;padding-top:3.5rem} .faq__menue{position:sticky;top:120px;align-self:start;display:grid;gap:.25rem} .faq__menue a{ display:flex;align-items:center;gap:.5rem; padding:.5rem .625rem;border-radius:var(--radius); font-size:.8125rem;color:var(--schrift-still); transition:background-color var(--aus) var(--kurve),color var(--aus) var(--kurve); } .faq__menue a:hover{background:rgb(9 9 11 / .04);color:var(--schrift)} .faq__menue a[aria-current="true"]{background:var(--signal-weich);color:var(--signal-tief);font-weight:500} .faq__gruppe + .faq__gruppe{padding-top:2.5rem} .faq__gruppe h3{padding-bottom:.5rem} .faq__frage{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1rem 0;border-bottom:1px solid var(--linie);text-align:left; font-size:1rem;font-weight:300; } .faq__frage svg{width:16px;height:16px;color:var(--schrift-still);flex:none; transition:transform .2s ease-out} .faq__frage[aria-expanded="true"] svg{transform:rotate(180deg)} .faq__antwort{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .2s ease-out; border-bottom:1px solid var(--linie); } .faq__antwort[data-offen="true"]{grid-template-rows:1fr} .faq__antwort > div{overflow:hidden} .faq__antwort p{padding:0 0 1.25rem;font-size:.9375rem;line-height:1.6;color:var(--schrift-still);max-width:44rem} /* 15 · Fuss ---------------------------------------------------------------- */ .fuss{border-top:1px solid var(--linie);background:var(--grund)} .fuss__gitter{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:3rem;padding-block:64px} .fuss__marke{display:grid;gap:1rem;align-content:start} .fuss__marke p{font-size:.875rem;color:var(--schrift-still);max-width:18rem} .fuss h4{margin:0 0 1rem;font-size:.8125rem;font-weight:600} .fuss li + li{margin-top:.5rem} .fuss li a{font-size:.875rem;color:var(--schrift-still);transition:color var(--an) var(--kurve)} .fuss li a:hover{color:var(--schrift)} .fuss__kontakt{display:grid;gap:.75rem} .fuss__person{display:flex;align-items:center;gap:.625rem} .fuss__recht{ border-top:1px solid var(--linie);padding-block:24px; display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center; font-size:.75rem;color:var(--schrift-still); } .fuss__recht a:hover{color:var(--schrift)} /* 16 · Einblenden beim Scrollen -------------------------------------------- */ /* Umgekehrte Logik: der Inhalt ist sichtbar, bis das Skript das Verstecken ausdruecklich einschaltet. Faellt das Skript aus, bleibt alles lesbar. (Grund: im verborgenen Tab melden sich Beobachter nicht, 26.10.2026 gemessen) */ .blendet .auf{opacity:0;transform:translateY(12px); transition:opacity .4s var(--kurve-aus),transform .4s var(--kurve-aus)} .blendet .auf.da{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .blendet .auf{opacity:1;transform:none;transition:none} *{animation-duration:.001ms !important;animation-iteration-count:1 !important} } /* 17 · Telefon und Tablet -------------------------------------------------- */ @media (max-width:1024px){ .stapelkarte{grid-template-columns:1fr;gap:32px;padding:32px;min-height:0} .stapelkarte__hier{ display:inline-flex;align-items:center;width:fit-content; padding:6px 12px;border-radius:999px; background:var(--signal-weich);color:var(--signal-tief); font-size:.8125rem;font-weight:500; } .stapelkarte__titel{font-size:34px;line-height:40px;letter-spacing:-.8px} .stapelkarte__bild{min-height:200px} .faq__gitter{grid-template-columns:1fr;gap:2rem} .faq__menue{position:static;display:flex;flex-wrap:wrap;gap:.5rem} .fuss__gitter{grid-template-columns:1fr 1fr;gap:2.5rem} } @media (max-width:760px){ :root{--sektion:64px} .balken{font-size:.8125rem;line-height:1.15rem;padding:.625rem 2.25rem;gap:.5rem;text-align:center} .balken__lang{display:none} .menue,.kopf__draht{display:none} .menue-schalter{display:grid;place-items:center;width:36px;height:36px} .kacheln, .kachel:nth-child(odd), .kachel, .fuss__gitter{grid-template-columns:1fr;gap:2rem} .auftakt{padding-top:96px} .auftakt__beweis{flex-direction:column;gap:.75rem;text-align:center} } /* 18 · Terminseite --------------------------------------------------------- */ .termin{padding-top:calc(var(--balken-h) + 112px);min-height:100vh} .termin__gitter{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linie); border-radius:var(--radius-gross);overflow:hidden;background:var(--flaeche)} .termin__text{padding:3rem;display:grid;gap:1.25rem;align-content:start} .termin__haken{display:grid;gap:.625rem;padding-top:.5rem} .termin__haken li{display:flex;gap:.625rem;align-items:center;font-size:.875rem;color:var(--schrift-still)} .termin__haken svg{width:16px;height:16px;color:var(--signal);flex:none} .termin__draht{border-top:1px solid var(--linie);margin-top:1.5rem;padding-top:1.5rem;display:grid;gap:.5rem} .termin__draht h2{font-size:.875rem;font-weight:600} .termin__draht a{font-size:.875rem;color:var(--schrift-still)} .termin__draht a:hover{color:var(--schrift)} .termin__kalender{padding:3rem;border-left:1px solid var(--linie);background:var(--grund)} .kalender__kopf{display:flex;align-items:center;justify-content:space-between;padding-bottom:1.25rem} .kalender__monat{font-size:.9375rem;font-weight:600} .kalender__gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .kalender__gitter span{font-size:.6875rem;color:var(--schrift-still);text-align:center;padding-bottom:.25rem} .kalender__tag{ aspect-ratio:1;display:grid;place-items:center;border-radius:8px; font-size:.8125rem;color:var(--schrift-still); transition:background-color var(--aus) var(--kurve),color var(--aus) var(--kurve); } .kalender__tag[data-frei="true"]{background:var(--flaeche);color:var(--schrift);font-weight:500; box-shadow:0 0 0 1px var(--linie);cursor:pointer} .kalender__tag[data-frei="true"]:hover{background:var(--signal-weich);color:var(--signal-tief)} .kalender__hinweis{font-size:.75rem;color:var(--schrift-still);padding-top:1.25rem} @media (max-width:860px){ .termin__gitter{grid-template-columns:1fr} .termin__kalender{border-left:0;border-top:1px solid var(--linie)} .termin__text,.termin__kalender{padding:2rem} } /* --- Ansprechpartner im Fuss -------------------------------------------- */ .fuss__person{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem} .fuss__person .kreis{width:32px;height:32px;border-radius:999px;display:grid;place-items:center; background:rgb(246 244 239 / .10);color:var(--karte-schrift,#F6F4EF);font-size:.75rem;font-weight:600} .stimme__name{font-weight:500} .stimme__rolle{display:block;font-size:.8125rem;color:rgb(246 244 239 / .62)} /* --- Zweierraster unter den Kapiteln ------------------------------------ */ .zahlkacheln{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie)} .zahlkachel{padding:2.5rem 2rem;text-align:center} .zahlkachel:first-child{border-right:1px solid var(--linie)} .zahlkachel b{display:block;font-size:2rem;line-height:1.1;font-weight:500;letter-spacing:-.02em} .zahlkachel span{display:block;margin-top:.5rem;font-size:.9375rem;line-height:1.5; color:var(--schrift-still)} @media (max-width:760px){.zahlkacheln{grid-template-columns:1fr} .zahlkachel:first-child{border-right:0;border-bottom:1px solid var(--linie)}} /* --- Einwände statt FAQ ---------------------------------------------------- */ .sektion.einwaende{padding-block:var(--sektion)} .einwaende__liste{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem} .einwaende__liste dt{font-size:1rem;font-weight:600;margin-bottom:.625rem} .einwaende__liste dd{font-size:.9375rem;line-height:1.6;color:var(--schrift-still)} @media (max-width:760px){.einwaende__liste{grid-template-columns:1fr;gap:1.75rem}} /* 14 · Kapitel [01] ------------------------------------------------------- 1:1 nach grabosch.com, Abschnitt "Webseite & Brand". Alle Klassen hier sind neu vergeben, gegen das Stilblatt geprueft: keine kollidiert mit einer bestehenden. */ .kapitel-eins .kapitel__kopf{display:grid;justify-items:center;gap:1.25rem;text-align:center} .kapitel-eins .kapitel__kopf .titel-l{max-width:22ch} .kapitel-eins .kacheln{margin-top:3.5rem} .kapitel-eins .kacheln + .zahl-stimme{margin-top:0} /* Werkzeugmarke, bei der Vorlage das blaue Partner-Abzeichen */ .werkzeugmarke{ display:inline-flex;align-items:center;gap:.5rem; background:var(--signal);color:#fff; border-radius:8px;padding:.5rem .75rem; font-size:.875rem;line-height:1.25rem;font-weight:500; } .werkzeugmarke__zeichen{ display:grid;place-items:center; width:20px;height:20px;border-radius:5px; background:#fff;color:var(--signal); font-weight:700;font-size:.8125rem;line-height:1;font-style:normal; } .werkzeugmarke__zeichen--gross{width:28px;height:28px;border-radius:7px; background:var(--schrift);color:#fff;font-size:1rem} /* Attrappe: Suchfeld mit KI-Vorschlaegen */ .ki-suche{width:min(100%,330px);display:grid;gap:.75rem;font-size:.8125rem} .ki-suche__feld{ background:#fff;border:1px solid var(--linie-stark);border-radius:var(--radius); padding:.875rem 1rem;color:var(--schrift-still);display:flex;align-items:center; } .ki-suche__strich{ display:inline-block;width:1px;height:1.05em;margin-left:2px; background:var(--schrift);animation:kiblinken 1.1s steps(1,end) infinite; } @keyframes kiblinken{0%,49%{opacity:1}50%,100%{opacity:0}} .ki-suche__liste{ background:#fff;border:1px solid var(--linie-stark);border-radius:var(--radius); overflow:hidden; } .ki-suche__zeile{ display:flex;align-items:center;gap:.5rem; padding:.625rem .875rem;color:var(--schrift-still); border-bottom:1px solid var(--linie); } .ki-suche__zeile:last-child{border-bottom:0} .ki-suche__zeile--aktiv{background:var(--signal-weich);color:var(--signal-tief);font-weight:500} .ki-suche__zeile svg{width:14px;height:14px;flex:none} .ki-suche__taste{ margin-left:auto;font-size:.6875rem;color:var(--schrift-still); border:1px solid var(--linie-stark);border-radius:6px;padding:.125rem .375rem; } .ki-suche__fuss{ display:flex;justify-content:space-between;align-items:center; font-size:.75rem;color:var(--schrift-still); } .ki-suche__waehlen{display:inline-flex;align-items:center;gap:.25rem} .ki-suche__waehlen i{ font-style:normal;border:1px solid var(--linie-stark);border-radius:5px; width:18px;height:18px;display:grid;place-items:center;font-size:.6875rem; } /* Attrappe: Anfragekarte auf einem Stapel */ .anfrage-stapel{position:relative;width:min(100%,300px);padding-top:10px} .anfrage-stapel__hinten{ position:absolute;top:0;left:14px;right:14px;height:40px; background:#fff;border:1px solid var(--linie);border-radius:var(--radius-karte); } .anfrage-stapel__vorn{ position:relative;background:#fff;border:1px solid var(--linie); border-radius:var(--radius-karte);padding:1rem;display:grid;gap:.375rem; } .anfrage-stapel__kopf{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.25rem} .anfrage-stapel__blatt{ width:40px;height:48px;border:1px solid var(--linie-stark);border-radius:6px; background: linear-gradient(var(--linie-stark),var(--linie-stark)) 8px 12px/16px 2px no-repeat, linear-gradient(var(--linie-stark),var(--linie-stark)) 8px 20px/24px 2px no-repeat, linear-gradient(var(--linie-stark),var(--linie-stark)) 8px 28px/20px 2px no-repeat, #fff; } .anfrage-stapel__nr{font-size:.6875rem;color:var(--schrift-still);letter-spacing:.04em} .anfrage-stapel__summe{font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.02em} .anfrage-stapel__status{font-size:.75rem;font-weight:500;margin-bottom:.5rem} .anfrage-stapel__felder{display:grid;gap:.5rem;margin:0} .anfrage-stapel__felder > div{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:.75rem} .anfrage-stapel__felder dt{font-size:.75rem;color:var(--schrift-still)} .anfrage-stapel__felder dd{margin:0} /* Zahlenzeile mit Stimme daneben */ .zahl-stimme{ display:grid;grid-template-columns:1fr 1fr; border-top:1px solid var(--linie);border-bottom:1px solid var(--linie); } .zahl-stimme .zahlkacheln{border-top:0;border-right:1px solid var(--linie)} .stimme-balken{margin:0;padding:2.5rem 2rem;display:grid;gap:1.25rem;align-content:center} .stimme-balken p{ border-left:3px solid var(--signal);padding-left:1.25rem; font-size:1.0625rem;line-height:1.65;margin:0; } .stimme-balken footer{display:flex;align-items:center;gap:.5rem;padding-left:1.5rem;flex-wrap:wrap} .kreiszeichen{ display:grid;place-items:center;width:28px;height:28px;border-radius:999px; background:var(--signal-weich);color:var(--signal-tief); font-size:.8125rem;font-weight:600;flex:none; } .kreiszeichen--gross{width:44px;height:44px;font-size:1rem} /* Attrappe: Knoten mit Ader zur Kundenkarte */ .knoten-bau{display:grid;justify-items:center;width:min(100%,300px)} .knoten-bau__marke{ display:grid;place-items:center;width:40px;height:40px; background:#fff;border:1px solid var(--linie-stark);border-radius:10px; } .knoten-bau .ader{display:block} /* Attrappe: Nachricht und Sprachnachricht */ .nachricht{width:min(100%,330px);display:grid;gap:.625rem;font-size:.8125rem} .nachricht__kopf{display:flex;align-items:center;gap:.5rem} .nachricht__blase{ background:#fff;border:1px solid var(--linie);border-radius:var(--radius); padding:.875rem 1rem;line-height:1.6; } .nachricht .sprachnachricht{ background:#fff;border:1px solid var(--linie);border-radius:var(--radius); } .sprachnachricht__zeit{font-size:.75rem;color:var(--schrift-still)} /* Grosses Zitat */ .grosszitat{margin:0;padding:4rem 0;display:grid;gap:1.75rem;max-width:52rem} .grosszitat__marke{ display:inline-grid;place-items:center;height:36px;padding:0 1rem; border:1px dashed var(--linie-stark);border-radius:8px; font-size:.75rem;color:var(--schrift-still);justify-self:start; } .grosszitat blockquote{ margin:0;font-size:clamp(1.125rem,1rem + .8vw,1.5rem);line-height:1.5; letter-spacing:-.015em; } .grosszitat figcaption{display:flex;align-items:center;gap:.75rem} .grosszitat figcaption .stimme__name{display:block} .grosszitat figcaption .stimme__rolle{display:block;font-size:.8125rem} /* Grosse Zahl */ .grosszahl{border-top:1px solid var(--linie);padding:5rem 0 4rem;text-align:center;display:grid;gap:1rem;justify-items:center} .grosszahl b{ font-size:clamp(3rem,1.5rem + 7vw,7.5rem);line-height:1;font-weight:600; letter-spacing:.02em;font-variant-numeric:tabular-nums; } .grosszahl p{margin:0;color:var(--schrift-still);font-size:1.0625rem} .grosszahl small{color:var(--schrift-still);opacity:.7;font-size:.8125rem} @media (max-width:860px){ .zahl-stimme{grid-template-columns:1fr} .zahl-stimme .zahlkacheln{border-right:0;border-bottom:1px solid var(--linie)} .kapitel-eins .kacheln{grid-template-columns:1fr} .kapitel-eins .kachel:nth-child(odd){border-right:0;border-bottom:1px solid var(--linie)} } /* Korrektur 29.10.2026, am Abzug gemessen: .stimme__rolle ist fuer die DUNKLEN Karten definiert, rgb(246 244 239 / .62). Auf dem weissen Grund dieser Sektion ergibt das Kontrast 1,04:1, also unsichtbar. Ein schon vergebener Klassenname erbt stumm fremde Regeln. */ .kapitel-eins .stimme__rolle{color:var(--schrift-still);display:inline} .grosszitat figcaption .stimme__rolle{display:block;color:var(--schrift-still)} .kapitel-eins .zahlkachel b{font-size:2.75rem;font-weight:600} .kapitel-eins .zahlkachel span{color:var(--schrift-still);font-size:.9375rem;line-height:1.55;display:block;max-width:22ch;margin-inline:auto} /* Angleich an die Vorlage, 29.10.2026 bei 1440 px im Browser gemessen. Gemessen auf grabosch.com, nicht geschaetzt: Kapitelmarke 14/20, Gewicht 300, ohne Laufweite H2 48/48, Gewicht 500, Satzbreite 672 Vorspann 16/22, Gewicht 300, Satzbreite 672 Abstand Marke -> H2 27, H2 -> Vorspann 16 Kacheltitel 16/24, Gewicht 600, MITTIG Kacheltext 16/24, Gewicht 300, MITTIG Kachelspalte 384 breit, Polsterung 0 Zahl 36/40, Gewicht 700 Zitat 16/24, Gewicht 300 Nicht schliessbar: die Vorlage nutzt Gewicht 300, Archivo liegt uns erst ab 400 vor. Fliesstext ist dadurch eine Stufe fetter. */ .kapitel-eins .kapitel__kopf{gap:0} .kapitel-eins .kapitelmarke{ font-size:14px;line-height:20px;font-weight:400;letter-spacing:normal; margin-bottom:27px; } .kapitel-eins .kapitel__kopf .titel-l{ font-size:48px;line-height:48px;font-weight:500;letter-spacing:normal; max-width:672px;margin-bottom:16px; } .kapitel-eins .kapitel__kopf .vorspann{ font-size:16px;line-height:22px;font-weight:400; max-width:672px;margin-bottom:32px; } .kapitel-eins .kachel{text-align:center;padding:3rem 1.5rem} .kapitel-eins .kachel__bild{min-height:300px;margin-bottom:2rem} .kapitel-eins .titel-s{font-size:16px;line-height:24px;font-weight:600;margin-bottom:8px} .kapitel-eins .kachel p{font-size:16px;line-height:24px;font-weight:400;max-width:384px;margin-inline:auto} .kapitel-eins .zahlkachel b{font-size:36px;line-height:40px;font-weight:700;letter-spacing:normal} .kapitel-eins .zahlkachel span{font-size:16px;line-height:24px} .kapitel-eins .stimme-balken p{font-size:16px;line-height:24px;font-weight:400} .kapitel-eins .grosszitat blockquote{font-size:16px;line-height:24px;font-weight:400;letter-spacing:normal} /* Geruest der Vorlage, am 29.10.2026 bei 1440 px im DOM ausgelesen: aeussere Bahn 1280 breit, Innenabstand 48 Kachelgitter 1182, vier Spalten a 295,5 — eine Kachel nimmt zwei davon Kachel also 591 breit, Polsterung 48 rundum Textblock in der Kachel 384 breit, mittig Unser Entwurf laeuft sonst auf 1152/16. Nur diese Sektion folgt der Vorlage. */ .kapitel-eins .bahn{max-width:1280px;padding-inline:48px} .kapitel-eins .kachel{padding:48px} .kapitel-eins .kachel__bild{min-height:327px;margin-bottom:0} .kapitel-eins .zahlkachel{padding:48px} .kapitel-eins .stimme-balken{padding:48px} /* Attrappen 1:1, am 29.10.2026 im DOM von grabosch.com ausgelesen. Das, was den Unterschied macht und sich nicht beschreiben liess: TIEFE. Ring 0 0 0 1px rgb(9 9 11 / .075) statt eines border Schatten 0 10px 15px -3px + 0 4px 6px -4px in rgb(49 44 133 / .15) also INDIGO, nicht schwarz Maße der Vorlage: Suchfeld 288 x 44, Polsterung 12, Radius 10 Anfragekarte 320 x 270, Polsterung 32, Radius 12 Schrift darin 14/20, Nummer 12/16 */ :root{ --ring:0 0 0 1px rgb(9 9 11 / .075); --schwebe:0 10px 15px -3px rgb(49 44 133 / .15), 0 4px 6px -4px rgb(49 44 133 / .15); } .kapitel-eins .ki-suche{width:288px;gap:10px} .kapitel-eins .ki-suche__feld{ height:44px;padding:12px;border:0;border-radius:10px;background:#fff; box-shadow:var(--ring);font-size:16px;line-height:20px; } .kapitel-eins .ki-suche__wahl{ background:#DBEAFE;color:var(--schrift);border-radius:2px;padding:1px 2px; } .kapitel-eins .ki-suche__strich{height:18px;margin-left:3px} .kapitel-eins .ki-suche__liste{ border:0;border-radius:10px;background:#fff; box-shadow:var(--ring), var(--schwebe); } .kapitel-eins .ki-suche__zeile{ padding:12px;font-size:14px;line-height:20px;border-bottom:1px solid rgb(9 9 11 / .06); } .kapitel-eins .ki-suche__zeile--aktiv{background:#EEF2FF;color:#4338CA;font-weight:500} .kapitel-eins .ki-suche__zeile svg{width:16px;height:16px} .kapitel-eins .ki-suche__taste{ margin-left:auto;font-size:12px;line-height:16px;color:var(--schrift-still); border:0;box-shadow:var(--ring);border-radius:6px;padding:2px 6px;background:#fff; } .kapitel-eins .ki-suche__fuss{font-size:12px;line-height:16px;padding-top:2px} .kapitel-eins .ki-suche__waehlen i{border:0;box-shadow:var(--ring);width:20px;height:20px;font-size:12px} .kapitel-eins .anfrage-stapel{position:relative;width:320px;padding:0} .kapitel-eins .anfrage-stapel__kante{ position:absolute;left:50%;transform:translateX(-50%); background:#fff;border-radius:12px;box-shadow:var(--ring);display:block; } .kapitel-eins .anfrage-stapel__kante--2{top:-10px;width:296px;height:40px} .kapitel-eins .anfrage-stapel__kante--3{top:-20px;width:272px;height:40px} .kapitel-eins .anfrage-stapel__karte{ position:relative;width:320px;min-height:270px; background:#fff;border:0;border-radius:12px;padding:32px; box-shadow:var(--ring), var(--schwebe); display:grid;gap:4px;align-content:start;text-align:left; } .kapitel-eins .anfrage-stapel__kopf{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px} .kapitel-eins .anfrage-stapel__marke{ display:grid;place-items:center;width:32px;height:32px;border-radius:8px; background:var(--schrift);color:#fff;font-weight:700;font-size:16px;line-height:1; } .kapitel-eins .anfrage-stapel__beleg{ position:relative;display:grid;align-content:center;gap:5px; width:52px;height:60px;border-radius:8px;background:#fff;box-shadow:var(--ring); padding:0 10px; } .kapitel-eins .anfrage-stapel__beleg i{display:block;height:3px;border-radius:2px;background:rgb(9 9 11 / .12)} .kapitel-eins .anfrage-stapel__beleg i:nth-child(1){width:100%} .kapitel-eins .anfrage-stapel__beleg i:nth-child(2){width:72%} .kapitel-eins .anfrage-stapel__beleg i:nth-child(3){width:86%} .kapitel-eins .anfrage-stapel__stift{ position:absolute;right:-7px;bottom:-7px;width:18px;height:18px; padding:3px;border-radius:999px;background:#fff;box-shadow:var(--ring); color:var(--schrift-still); } .kapitel-eins .anfrage-stapel__nr{font-size:12px;line-height:16px;color:var(--schrift-still);letter-spacing:.02em} .kapitel-eins .anfrage-stapel__summe{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em} .kapitel-eins .anfrage-stapel__status{font-size:14px;line-height:20px;font-weight:500;margin-bottom:16px} .kapitel-eins .anfrage-stapel__felder{display:grid;gap:12px;margin:0} .kapitel-eins .anfrage-stapel__felder > div{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px} .kapitel-eins .anfrage-stapel__felder dt{font-size:14px;line-height:20px;color:var(--schrift-still)} .kapitel-eins .anfrage-stapel__felder dd{margin:0} .kapitel-eins .anfrage-stapel__felder dd i{display:block;height:8px;border-radius:4px;background:rgb(9 9 11 / .08)} /* 15 · Problem-Sektion fuer Makler ---------------------------------------- Aufbau 1:1 nach Rafis Vorlage: Kopf mittig, darunter ein Dreispalter. Links zwei Kacheln gestapelt, Mitte eine hohe Kachel, rechts eine flache und eine hohe. Die Marke ist bei der Vorlage gruen, bei uns das Markenblau. */ .problem{background:#fff} .problem__kopf{display:grid;justify-items:center;text-align:center;margin-bottom:3rem} .problem__marke{ display:inline-block;font-size:13px;line-height:18px;font-weight:600; color:var(--signal);margin-bottom:1rem; } .problem__kopf .titel-l{font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);line-height:1.08;font-weight:500;margin-bottom:1rem} .problem__kopf .vorspann{max-width:46rem;text-align:center;font-size:17px;line-height:1.6} .problem__gitter{ display:grid;gap:20px; grid-template-columns:1fr 1.18fr 1fr; grid-template-areas: "a mitte c" "b mitte d"; align-items:stretch; } .pkachel--a{grid-area:a} .pkachel--b{grid-area:b} .pkachel--mitte{grid-area:mitte} .pkachel--c{grid-area:c} .pkachel--d{grid-area:d} .pkachel{ background:#F3F5F7;border-radius:24px;padding:32px; display:flex;flex-direction:column;overflow:hidden; } .pkachel__bild{ flex:1;display:grid;place-items:center;min-height:200px;margin-bottom:24px; } .pkachel__bild img{width:100%;height:auto;max-width:360px;display:block;mix-blend-mode:multiply} .pkachel__bild--gross img{max-width:none;width:100%} .pkachel .titel-s{font-size:19px;line-height:26px;font-weight:600;margin-bottom:10px} .pkachel p{color:var(--schrift-still);font-size:16px;line-height:25px;margin:0} /* Mittelkachel: Marke und Titel oben, Bild fuellt den Rest */ .pkachel--mitte{text-align:center;padding:40px 32px 0} .pkachel--mitte .problem__marke{margin-bottom:.75rem} .pkachel--mitte .titel-l{ font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);line-height:1.2;font-weight:600; margin-bottom:1.5rem; } .pkachel--mitte .pkachel__bild{margin-bottom:0;align-items:end} /* Tacho statt eines erzeugten Bildes: eine Zahl muss stimmen koennen */ .pkachel--c .pkachel__bild{min-height:0;margin-bottom:20px;position:relative;padding-top:8px} .tacho{width:100%;max-width:240px;height:auto;display:block} .tacho__wert{ position:absolute;left:50%;transform:translateX(-50%);bottom:26px; font-size:28px;line-height:1;font-weight:600;letter-spacing:-.02em; } .tacho__fuss{ position:absolute;left:50%;transform:translateX(-50%);bottom:6px; font-size:13px;color:var(--schrift-still); } @media (max-width:1000px){ .problem__gitter{grid-template-columns:1fr 1fr;grid-template-areas:"a c" "b d" "mitte mitte"} } @media (max-width:680px){ .problem__gitter{grid-template-columns:1fr;grid-template-areas:"a" "b" "mitte" "c" "d"} .pkachel{padding:24px} } /* Korrektur nach dem Abzug, 29.10.2026: 1 Mittelkachel war zu schmal, der Titel brach auf vier statt zwei Zeilen 2 Bilder waren auf 360 px gedeckelt, in der Vorlage fuellen sie die Kachel 3 Tacho zu gross im Verhaeltnis zur flachen Kachel 4 Mappe in der Mitte muss unten angeschnitten sein, nicht schweben */ .problem__gitter{grid-template-columns:1fr 1.42fr 1fr} .pkachel__bild img{max-width:none} .pkachel--a .pkachel__bild img, .pkachel--b .pkachel__bild img, .pkachel--d .pkachel__bild img{width:112%;max-width:112%;margin-inline:-6%} .pkachel--mitte .pkachel__bild{margin-inline:-32px;margin-bottom:-24px} .pkachel--mitte .pkachel__bild img{width:100%} .pkachel--c .tacho{max-width:190px} .pkachel--c .tacho__wert{font-size:24px;bottom:22px} .pkachel--c .tacho__fuss{bottom:4px;font-size:12px} /* Mitteltitel brach auf drei Zeilen, die Vorlage hat zwei. Groesse runter, Bild groesser, damit die Kachel nicht in der Mitte leer steht. */ .pkachel--mitte .pkachel__bild img{width:118%;max-width:118%;margin-inline:-9%} /* .titel-l traegt im Basisstil text-wrap:balance. Das verteilt die Zeilen gleichmaessig und macht aus zwei Zeilen drei, obwohl die Breite reicht. Hier zaehlt der gesetzte Umbruch, also balance abschalten. */ /* Der Mitteltitel hing an .titel-l und blieb dort auf 48px und text-wrap balance stehen, obwohl vier spaetere Regeln mit hoeherer Spezifitaet etwas anderes sagten. Statt weiter an der Kaskade zu drehen bekommt er eine eigene Klasse ohne Konkurrenz. Gemessen am gerenderten DOM. */ .pkachel__gross{ font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em; text-wrap:normal;margin:0 0 20px; } /* 16 · Loesungs-Sektion, drei Schritte ------------------------------------ An foerderung.de gemessen: Marke 11/19,5 Gewicht 600, H2 32/36,8 Gewicht 600 mit Laufweite -0,8, Schrittmarke 14/15,7 Gewicht 600, Fensterkarte Radius 20 mit Schatten rgba(0,0,0,.08) 0 2px 32px. Die Schrittmarke steht dort in gesperrten Versalien. Bei uns nicht, gesperrte Versalien sind gesetzt verboten. */ .loesung{background:#fff} .loesung__kopf{display:grid;justify-items:center;text-align:center;margin-bottom:4rem} .loesung__titel{ font-size:clamp(1.9rem,1.1rem + 2.4vw,3rem);line-height:1.15;font-weight:600; letter-spacing:-.025em;text-wrap:normal;margin:0 0 1rem;max-width:26ch; } .loesung__kopf .vorspann{max-width:40rem;text-align:center} .schritte{list-style:none;margin:0;padding:0 0 0 48px;position:relative} .schritte::before{ content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px; background:var(--linie-stark); } .schritt{ display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center; padding:48px 0;position:relative; } .schritt::before{ content:"";position:absolute;left:-48px;top:48px;bottom:48px;width:3px; background:var(--signal);border-radius:2px; } .schritt__marke{ display:inline-flex;align-items:center;gap:10px; font-size:14px;line-height:16px;font-weight:600;color:var(--schrift); margin-bottom:20px; } .schritt__marke i{ width:14px;height:14px;border-radius:999px;background:#fff; box-shadow:0 0 0 1px var(--linie-stark), inset 0 0 0 3px #fff, 0 0 0 4px rgb(9 9 11 / .04); background:var(--schrift-still);display:block; } .schritt__titel{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.2;font-weight:600;letter-spacing:-.02em;margin:0 0 12px} .schritt__text p{color:var(--schrift-still);font-size:16px;line-height:26px;margin:0;max-width:34rem} /* Fenster-Attrappe */ .fenster-attrappe{ background:#fff;border-radius:20px;box-shadow:0 2px 32px rgb(0 0 0 / .08); overflow:hidden; } .fenster-attrappe__leiste{ display:flex;align-items:center;gap:12px;padding:14px 16px; border-bottom:1px solid var(--linie);position:relative; } .fenster-attrappe__punkte{display:flex;gap:6px} .fenster-attrappe__punkte i{width:10px;height:10px;border-radius:999px;display:block} .fenster-attrappe__punkte i:nth-child(1){background:#FF5F57} .fenster-attrappe__punkte i:nth-child(2){background:#FEBC2E} .fenster-attrappe__punkte i:nth-child(3){background:#28C840} .fenster-attrappe__adresse{ position:absolute;left:50%;transform:translateX(-50%); font-size:13px;color:var(--schrift-still); } .fenster-attrappe__koerper{padding:20px} .fenster-attrappe__phase{ font-size:12px;font-weight:600;color:var(--signal);margin-bottom:12px; } .fenster-attrappe__feld{ border:1px solid color-mix(in srgb, var(--signal) 22%, transparent); border-radius:14px;padding:18px; background:linear-gradient(180deg, color-mix(in srgb, var(--signal) 4%, #fff), #fff); } /* Attrappe 1: Frage */ .frage__zaehler{font-size:12px;font-weight:600;color:var(--signal)} .frage__text{font-size:15px;font-weight:600;margin:6px 0 14px} .frage__wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px} .frage__wahl span{ border:1px solid var(--linie);border-radius:8px;padding:10px 12px; font-size:13px;background:#fff;color:var(--schrift-still); } .frage__wahl .frage__wahl--an{ border-color:var(--signal);background:var(--signal-weich);color:var(--signal-tief);font-weight:500; } .frage__balken{height:4px;border-radius:999px;background:var(--linie);margin-top:16px;overflow:hidden} .frage__balken i{display:block;height:100%;width:50%;background:var(--signal);border-radius:999px} /* Attrappe 2: Aufbau */ .aufbau{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center} .aufbau__liste{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14px} .aufbau__liste li{display:flex;align-items:center;gap:10px} .haken-kasten{width:15px;height:15px;border:1px solid var(--linie-stark);border-radius:4px;display:block;flex:none;background:#fff} .aufbau__ringe{display:grid;gap:8px;justify-items:end} .ringkarte{ display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px; padding:8px 12px;box-shadow:0 1px 10px rgb(0 0 0 / .06);font-size:12px; } .ringkarte b{font-weight:500;color:var(--schrift-still)} .ringkarte em{font-style:normal;font-size:17px;font-weight:600} .ringkarte--hoch{margin-right:-14px} .ringkarte--flach{margin-right:14px} .ring{width:30px;height:30px;transform:rotate(-90deg);flex:none} .ring circle{fill:none;stroke:var(--linie);stroke-width:5} .ring .ring__an{stroke:var(--signal);stroke-linecap:round; stroke-dasharray:113;stroke-dashoffset:calc(113 - 113 * var(--teil))} .kurve{width:52px;height:20px;flex:none} .kurve path{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Attrappe 3: Lauf */ .lauf{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start} .lauf__spur,.lauf__offen{list-style:none;margin:0;padding:0;display:grid;gap:10px} .lauf__punkt{ display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px; padding:9px 12px;font-size:13px;box-shadow:0 1px 8px rgb(0 0 0 / .05);position:relative; } .lauf__punkt::before{ content:"";width:18px;height:18px;border-radius:999px;flex:none; background:var(--signal); } .lauf__punkt--jetzt::before{background:#fff;box-shadow:0 0 0 2px var(--signal) inset, 0 0 0 4px color-mix(in srgb, var(--signal) 20%, transparent)} .lauf__punkt time{margin-left:auto;color:var(--schrift-still);font-size:12px} .lauf__offen{margin-top:18px} .lauf__offen li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--schrift-still)} .lauf__offen i{width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--linie-stark);display:block;flex:none} @media (max-width:900px){ .schritt{grid-template-columns:1fr;gap:28px} .schritte{padding-left:28px} .schritt::before{left:-28px} .aufbau,.lauf{grid-template-columns:1fr} } /* 19 · Korrektur 29.10.2026, Rafis Abgleich mit der Vorlage ---------------- An foerderung.de im DOM gemessen, Fenster 1440 breit: Kopfleiste 1200 breit, also 120 zum Rand, Polster innen 22, Hoehe 62. Unsere war 1152 breit mit 144 zum Rand und 12 Polster: zu weit vom Rand. Zweitens war die Problem-Sektion 1555 hoch und passte nicht auf einen Schirm. Treiber waren quadratische Bilder, die so hoch wurden wie die Kachel breit ist. Die Bilder liegen jetzt als 2:1-Zuschnitt vor (bilder/problem-*-breit.webp), das Motiv darin ist groesser als vorher. Spaltenverhaeltnis ebenfalls an der Vorlage: 1 : 1,16 : 1. */ .kopf__leiste{max-width:1200px;padding:14px 22px} /* Die gescrollte Fassung traegt hoehere Spezifitaet und muss mit, sonst springt das Polster beim Scrollen zurueck auf 20. */ [data-scrolled="true"] .kopf__leiste{padding:14px 22px} /* Rafis Fenster ist rund 1000 hoch, die Sektion war 1163. Alles unten gemessen und so weit zurueckgenommen, dass sie auf einen Schirm passt. */ .problem .innen{padding-block:48px} .problem__kopf{margin-bottom:1.5rem} .problem__kopf .titel-l{font-size:clamp(1.75rem,1.1rem + 1.9vw,2.5rem);margin-bottom:.625rem} .problem__kopf .vorspann{font-size:16px;line-height:1.55} .problem__gitter{grid-template-columns:1fr 1.16fr 1fr} .pkachel{padding:24px} .pkachel--mitte{padding:32px 24px 0} .pkachel__bild{min-height:0;margin-bottom:16px} .pkachel--a .pkachel__bild img, .pkachel--b .pkachel__bild img, .pkachel--d .pkachel__bild img{width:112%;max-width:112%;margin-inline:-6%;height:auto} /* Mittelkachel: die Mappe fuellt bei der Vorlage die untere Haelfte. Mit 118 Prozent blieb zwischen Titel und Mappe ein totes Feld. */ .pkachel--mitte .pkachel__bild{margin-inline:-24px;margin-bottom:-24px} /* Nur im Dreispalter darf die Mappe so weit ueberstehen. Im Zweispalter und auf dem Handy ist die Mittelkachel breit und flach, dort wuerde der Ueberstand ein Drittel des Bildes wegschneiden. */ @media (min-width:1001px){ .pkachel--mitte .pkachel__bild img{width:158%;max-width:158%;margin-inline:-29%} } /* Unterhalb von 1200 lag die Leiste bisher am Fensterrand auf. Ein Steg, damit die gescrollte Flaeche nie die Kante beruehrt. */ .kopf{padding-inline:16px} /* Der Block oben steht hinter den Umbruchregeln von Abschnitt 15 und hat das Stapeln auf schmalen Schirmen ausgehebelt: bei 375 waren die Kacheln 96 px breit. Die beiden Regeln kommen deshalb hier noch einmal. */ @media (max-width:1000px){ .problem__gitter{grid-template-columns:1fr 1fr;grid-template-areas:"a c" "b d" "mitte mitte"} } @media (max-width:680px){ .problem__gitter{grid-template-columns:1fr;grid-template-areas:"a" "b" "mitte" "c" "d"} .pkachel{padding:24px} .pkachel--mitte{padding:28px 24px 0} .pkachel--mitte .pkachel__bild{margin-inline:-24px;margin-bottom:-24px} } /* Tacho: Zahl und Fusszeile hingen per position:absolute am Bildkasten. Sobald der Kasten die Hoehe aendert, rutschen sie auf den Bogen und die Nadel laeuft durch die Zahl. Jetzt stehen alle drei im Fluss untereinander, so wie im ersten Entwurf. */ .pkachel--c .pkachel__bild{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;padding-top:0;min-height:0;margin-bottom:16px; } .pkachel--c .tacho{width:190px;max-width:190px;margin-bottom:2px} .pkachel--c .tacho__wert{ position:static;left:auto;bottom:auto;transform:none; font-size:24px;line-height:1; } .pkachel--c .tacho__fuss{ position:static;left:auto;bottom:auto;transform:none; font-size:12px;line-height:15px; } /* ========================================================================== 20 · Massstab nach der Vorlage Am 29.10.2026 an foerderung.de im DOM gemessen, Fenster 1728 breit, ueber das Debug-Protokoll in einem sichtbaren Chrome (im verborgenen Fenster deckt die Seite nicht auf und misst falsch). Inhaltsbreite 1200, Steg 40, Sektionspolster 72 oben / 80 unten Marke Manrope 600 11 / 19,5 Laufweite +0,13 Titel Manrope 600 56 / 58,24 Laufweite -1,45 (-0,026em) Vorspann Manrope 400 18 / 27,9 Laufweite -0,208 (-0,0116em) Kacheltitel Manrope 700 20 / 24 Laufweite normal Kacheltext Manrope 400 15 / 20 Laufweite normal Kachel Grund #F6F7F9, Radius 20, Polster 24 Abstaende Marke 12 Titel 12 Vorspann 44 Raster · Titel 8 Text Raster Spalten 368 / 424 / 368 = 1 : 1,152 : 1, Spalt 20 Abweichung mit Absicht: die Marke steht bei uns gemischt statt in Versalien. Rafis gesetzte Regel. Eine Zeile zum Umstellen. ========================================================================== */ /* Bei der Vorlage ist der Inhalt 1200 breit und der Steg 40. Die Bahn traegt den Steg innen, also 1280 als Deckel, damit innen 1200 stehen. */ :root{ --breite:1280px; --luft:20px; } /* 40 ist der Steg der Vorlage am Schreibtisch. Auf dem Handy waeren 40 je Seite ein Fuenftel des Schirms, dort bleiben 20. */ @media (min-width:768px){ :root{ --luft:40px } } @media (min-width:1200px){ .bahn{padding-inline:var(--luft)} } .problem .innen{padding-block:72px 80px} .problem__kopf{margin-bottom:0} .problem__marke{ font-size:12px;line-height:18px;font-weight:600;letter-spacing:0; text-transform:none;margin-bottom:12px; } .problem__kopf .titel-l{ font-size:clamp(2rem,1.1rem + 3.2vw,3.5rem); line-height:1.04;letter-spacing:-.026em;font-weight:600; margin-bottom:12px; } .problem__kopf .vorspann{ font-size:18px;line-height:1.55;letter-spacing:-.0116em;font-weight:400; max-width:43.5rem;margin-bottom:44px; } .problem__gitter{grid-template-columns:1fr 1.152fr 1fr;gap:20px} .pkachel{background:#F6F7F9;border-radius:20px;padding:24px} .pkachel--mitte{padding:24px 24px 0} .pkachel .titel-s{font-size:20px;line-height:24px;font-weight:700;letter-spacing:0;margin-bottom:8px} .pkachel p{font-size:15px;line-height:20px;letter-spacing:0;font-weight:400} .pkachel__bild{margin-bottom:20px} .pkachel--mitte .pkachel__bild{margin-inline:-24px;margin-bottom:-24px} .pkachel__gross{ font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.026em; margin:0 0 20px; } /* -- Aufdecken ------------------------------------------------------------ Zwei Arten, beide an der Vorlage abgetastet (Bildrate 60, 110 Proben): 1 Bloecke und Kacheln: y 20 -> 0 mit Einblenden, kein Weichzeichner. Das ist eine Feder: Nulldurchgang nach 256 ms, Ueberschwingen 1,96 px bei 406 ms, Ruhe nach 707 ms. Als linear() abgetastet statt geraten. Versatz von Kachel zu Kachel gemessen 70 / 51 / 68 / 82, also rund 68. 2 Ueberschriften Wort fuer Wort: opacity 0 -> 1, blur(10px) -> 0, y 0,25em -> 0. Dauer 520 ms, Kurve cubic-bezier(.16,1,.3,1) (Abweichung der Anpassung 0,02), Versatz je Wort 60 ms. -------------------------------------------------------------------- */ :root{ --feder:linear(0 0%, .092 2.5%, .187 5%, .277 7.4%, .365 9.9%, .447 12.4%, .519 14.9%, .657 17.4%, .717 19.7%, .769 22.1%, .819 24.5%, .862 26.9%, .902 29.3%, .939 31.7%, .971 33.9%, .998 36.2%, 1.021 38.5%, 1.041 40.9%, 1.058 43.3%, 1.071 45.7%, 1.081 47.9%, 1.089 50.4%, 1.094 52.6%, 1.097 55%, 1.098 57.4%, 1.097 60%, 1.094 62.2%, 1.09 64.6%, 1.085 67%, 1.078 69.4%, 1.071 71.9%, 1.064 74.1%, 1.056 76.4%, 1.048 78.8%, 1.04 81.2%, 1.032 83.6%, 1.025 85.9%, 1.019 88.3%, 1.013 90.5%, 1.008 92.9%, 1.004 95.3%, 1.001 97.6%, 1 100%); --feder-zeit:707ms; /* Erst mit cubic-bezier(.16,1,.3,1) genaehert, lief rund 20 Prozent zu schnell. Jetzt die abgetastete Kurve selbst, wie bei der Feder. */ --wort-kurve:linear(0 0%, .107 1.4%, .247 5.2%, .373 9.3%, .478 13.3%, .575 17.1%, .657 21.1%, .721 24.9%, .777 29%, .823 32.8%, .858 36.8%, .888 40.6%, .911 44.7%, .931 48.5%, .946 52.5%, .959 56.5%, .968 60.3%, .976 64.4%, .982 68.2%, .987 72.2%, .991 76.2%, .994 80.3%, .996 84.1%, .997 88.1%, .998 92.2%, .999 96.2%, 1 100%); --wort-zeit:421ms; --wort-versatz:60ms; --kachel-versatz:68ms; } .blendet .auf{ opacity:0;transform:translateY(20px); transition:opacity var(--feder-zeit) var(--feder), transform var(--feder-zeit) var(--feder); transition-delay:calc(var(--n,0) * var(--kachel-versatz)); } .blendet .auf.da{opacity:1;transform:none} /* Wort fuer Wort. Das Zerlegen macht erst das Skript, ohne Skript steht der Satz normal da. */ .blendet .wort{ display:inline-block;will-change:transform,filter,opacity; opacity:0;filter:blur(10px);transform:translateY(.25em); transition:opacity var(--wort-zeit) var(--wort-kurve), filter var(--wort-zeit) var(--wort-kurve), transform var(--wort-zeit) var(--wort-kurve); transition-delay:calc(var(--n,0) * var(--wort-versatz)); } .blendet .da .wort, .blendet .wort.da{opacity:1;filter:blur(0);transform:none} @media (prefers-reduced-motion:reduce){ .blendet .auf,.blendet .wort{opacity:1;filter:none;transform:none;transition:none} } @media (max-width:1000px){ .problem__gitter{grid-template-columns:1fr 1fr;grid-template-areas:"a c" "b d" "mitte mitte"} } @media (max-width:680px){ .problem .innen{padding-block:48px 56px} .problem__gitter{grid-template-columns:1fr;grid-template-areas:"a" "b" "mitte" "c" "d"} .problem__kopf .vorspann{font-size:16px;margin-bottom:28px} .pkachel,.pkachel--mitte{padding:20px} .pkachel--mitte{padding-bottom:0} .pkachel--mitte .pkachel__bild{margin-inline:-20px;margin-bottom:-20px} .pkachel--mitte .pkachel__bild img{width:118%;max-width:118%;margin-inline:-9%} } /* Sprungziele: die feste Leiste deckte den Sektionskopf zu, wenn man ueber das Menue springt. */ .sektion[id]{scroll-margin-top:88px} /* ========================================================================== 21 · Kacheln randlos, 29.10.2026 Rafi sah bei der Vorlage einen glasigen Zug. Die Kacheln dort tragen weder Transparenz noch Schatten noch Kante, im DOM gemessen: background #F6F7F9 · border none · box-shadow none · backdrop-filter none border-radius 20 · padding 0 · overflow hidden Der Eindruck kommt allein vom Bild: img.cardImg laeuft ueber die volle Kachelbreite, sitzt buendig an der Oberkante, ist 368 x 256 gross und object-fit cover, also angeschnitten. Darunter ein Textblock mit padding 0 24 24. Unsere Bilder schwebten dagegen mit Luft ringsum. ========================================================================== */ .pkachel{padding:0;overflow:hidden;display:flex;flex-direction:column} .pkachel__bild{ margin:0;flex:0 0 auto;display:block; width:100%;aspect-ratio:368/256;overflow:hidden; } .pkachel__bild img{ width:100%;height:100%;max-width:none;margin:0; object-fit:cover;object-position:center; } .pkachel__text{padding:0 24px 24px;margin-top:auto} .pkachel__text .titel-s{margin-bottom:8px} /* Mittelkachel: Kopf mit grossem Polster oben, Bild unten mittig. Vorlage: midHead padding 98 24 0, Marke 13/600, Titel 30/40 700, Bild 386 breit in einer 424 breiten Kachel. */ .pkachel--mitte{padding:0;text-align:center} .pkachel--mitte .problem__marke{ display:block;font-size:13px;line-height:24px;padding:98px 24px 0;margin:0; } .pkachel--mitte .pkachel__gross{ font-size:30px;line-height:40px;font-weight:700;letter-spacing:-.02em; padding:10px 24px 0;margin:0; } .pkachel--mitte .pkachel__bild{ aspect-ratio:386/358;width:91%;margin:auto auto 40px;padding:0; } .pkachel--mitte .pkachel__bild img{width:100%;height:100%;object-fit:cover} /* Tacho: bei der Vorlage 280 breit in einer 368 breiten Kachel, die Zahl sitzt im Bogen, nicht darunter. Dafuer muss der Bogen gross genug sein. */ .pkachel--c .pkachel__bild{ aspect-ratio:auto;width:280px;max-width:calc(100% - 48px); margin:14px auto 0;position:relative;display:block;padding:0; } .pkachel--c .tacho{width:100%;max-width:none;height:auto;display:block} .pkachel--c .tacho__wert{ position:absolute;left:50%;transform:translateX(-50%); bottom:26px;font-size:30px;line-height:36px;font-weight:500;letter-spacing:-.02em; } .pkachel--c .tacho__fuss{ position:absolute;left:50%;transform:translateX(-50%); bottom:6px;font-size:11px;line-height:16px;color:var(--schrift-still); } .pkachel--c .pkachel__text{padding-top:20px} @media (max-width:680px){ .pkachel,.pkachel--mitte{padding:0} .pkachel__text{padding:0 20px 20px} .pkachel--mitte .problem__marke{padding:40px 20px 0} .pkachel--mitte .pkachel__gross{padding:10px 20px 0} } /* ========================================================================== 22 · Lösungs-Sektion nach der Vorlage, 29.10.2026 im DOM gemessen Spur 2 breit, #DBE2E9, volle Hoehe der Schrittliste Segment 3 breit, 104 hoch, Signalfarbe, wandert per translateY Schritt Text 454 breit, Fenster 606 x 338, Abstand 100 zwischen den Schritten, Textspalte beginnt 62 rechts der Spur Kopfzeile Punkt 20 rund, weiss, Schatten rgba(11,19,37,.08) 0 2px 4px Abstand 12 zur Marke, Marke 14/15,71 Gewicht 600 Titel 32, Gewicht 500 · Text 16/24 Fenster weiss, Radius 20, Schatten rgba(0,0,0,.08) 0 2px 32px Leiste 41 hoch, Polster 12 / 24 · Koerper 28 Einzug, 54 oben ========================================================================== */ .loesung__kopf{margin-bottom:44px} .loesung__kopf .problem__marke{margin-bottom:12px} .loesung__titel{ font-size:clamp(2rem,1.1rem + 3.2vw,3.5rem); line-height:1.04;letter-spacing:-.026em;font-weight:600;margin-bottom:12px; } .loesung__kopf .vorspann{ font-size:18px;line-height:1.55;letter-spacing:-.0116em;max-width:43.5rem; } .schritte{position:relative;padding:0;margin:0;list-style:none} .schritte::before{display:none} .schiene{ position:absolute;left:0;top:0;width:2px; background:#DBE2E9;border-radius:2px;pointer-events:none; } .schiene__segment{ position:absolute;left:-.5px;top:0;width:3px;height:104px; background:var(--signal);border-radius:2px; transition:transform 120ms linear; } @media (prefers-reduced-motion:reduce){ .schiene__segment{transition:none} } .schritt{ display:grid;grid-template-columns:454px 1fr;gap:78px;align-items:center; padding:0 0 0 62px;margin:0 0 100px;position:relative; } .schritt:last-child{margin-bottom:0} .schritt::before{display:none} .schritt__marke{ display:inline-flex;align-items:center;gap:12px; font-size:14px;line-height:15.71px;font-weight:600;letter-spacing:0; text-transform:none;color:var(--schrift);margin-bottom:20px; } .schritt__marke i{ width:20px;height:20px;border-radius:999px;background:#fff; box-shadow:0 2px 4px rgb(11 19 37 / .08); display:grid;place-items:center;flex:0 0 auto; } .schritt__marke i::after{ content:"";width:7px;height:7px;border-radius:999px;background:var(--signal); } .schritt__titel{font-size:32px;line-height:42px;font-weight:500;letter-spacing:-.02em;margin:0 0 8px} .schritt__text p{font-size:16px;line-height:24px;max-width:none;color:var(--schrift-still)} .fenster-attrappe{border-radius:20px;box-shadow:0 2px 32px rgb(0 0 0 / .08)} @media (max-width:900px){ .schritt{grid-template-columns:1fr;gap:28px;padding-left:44px;margin-bottom:64px} .schritt__titel{font-size:26px;line-height:34px} } /* Die Schiene sass am Rand der Bahn statt an der Schrittspalte, weil .innen kein Bezugspunkt ist. Sie liegt jetzt in der Liste selbst. */ .schritte{position:relative} .schiene{left:0;top:0;bottom:0;height:auto} /* Punkte der Fensterleiste: bei der Vorlage drei graue, keine Ampel. */ .fenster-attrappe__punkte i:nth-child(1), .fenster-attrappe__punkte i:nth-child(2), .fenster-attrappe__punkte i:nth-child(3){background:#D7DCE3;width:8px;height:8px} .fenster-attrappe__leiste{padding:12px 24px;gap:24px;border-bottom:0} /* ========================================================================== 23 · USP-Sektion, 29.10.2026 an foerderung.de im DOM gemessen Sektion Polster 81 oben und unten, Inhalt 1200 Kopf 850 breit, Abstand 12 zwischen Marke und Titel Titel 56/58,24 Gewicht 700 Laufweite -1,45 Zahl 64/79,36 Gewicht 700 Laufweite -0,77 · Text 18/21,43 Abstaende Kopf 52 Zahlen · Zahlen 80 Raster · Zahlen untereinander 48 Raster 3 x 2, Zelle 399 breit, Polster 40 / 24 / 40 / 0 Sinnbild 36 · Zellentitel 20/28 Gewicht 700 Laufweite -0,4 ========================================================================== */ .usp{background:#fff} .usp .innen{padding-block:81px} .usp__oben{position:relative;margin-bottom:80px} .usp__kopf{display:grid;gap:12px;max-width:850px;position:relative;z-index:1} .usp__titel-gross{ font-size:clamp(2rem,1.1rem + 3.2vw,3.5rem); line-height:1.04;letter-spacing:-.026em;font-weight:700;margin:0; } .usp__zahlen{display:flex;gap:48px;margin:52px 0 0;position:relative;z-index:1} .usp__zahl{display:grid;gap:16px} .usp__zahl dt{ font-size:64px;line-height:79.36px;font-weight:700;letter-spacing:-.012em; color:var(--schrift);margin:0; } .usp__zahl dd{font-size:18px;line-height:21.43px;color:var(--schrift);margin:0} /* Kerzenfeld: bei der Vorlage ein Streufeld aus 6 breiten Balken mit einem Punkt an einem Ende, steigend nach rechts. Hier als HTML, damit es beim Aufdecken wachsen kann und spaeter korrigierbar bleibt. */ .usp__kerzen{ position:absolute;right:0;top:-24px;width:320px;height:380px; pointer-events:none; } .kerze{ position:absolute;left:var(--x);top:var(--y);width:6px;height:var(--h); border-radius:3px;display:block;transform-origin:center bottom; } .kerze--oben{background:linear-gradient(to bottom,var(--signal),rgb(23 124 183 / 0))} .kerze--unten{background:linear-gradient(to top,var(--signal),rgb(23 124 183 / 0))} .kerze::after{ content:"";position:absolute;left:-1px;width:8px;height:8px;border-radius:999px; background:var(--signal); } .kerze--oben::after{top:0} .kerze--unten::after{bottom:0} .blendet .usp__kerzen .kerze{ transform:scaleY(0);opacity:0; transition:transform var(--feder-zeit) var(--feder), opacity 260ms linear; transition-delay:calc(var(--n,0) * 34ms); } .blendet .usp__kerzen.da .kerze{transform:none;opacity:1} @media (prefers-reduced-motion:reduce){ .blendet .usp__kerzen .kerze{transform:none;opacity:1;transition:none} } /* Raster mit Haarlinien statt Kacheln, wie bei der Vorlage */ .usp__raster{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--linie); } .usp__zelle{ display:grid;gap:24px;align-content:start; padding:40px 24px 40px 0; border-bottom:1px solid var(--linie); } .usp__zelle:not(:nth-child(3n)){ border-right:1px solid var(--linie); padding-right:40px; } .usp__zelle:not(:nth-child(3n+1)){padding-left:40px} .usp__icon{width:36px;height:36px;color:var(--signal)} .usp__text{display:grid;gap:8px} .usp__titel{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.02em;margin:0} .usp__zelle p{font-size:16px;line-height:24px;color:var(--schrift-still);margin:0} @media (max-width:900px){ .usp__raster{grid-template-columns:repeat(2,1fr)} .usp__zelle:not(:nth-child(3n)){border-right:0;padding-right:24px} .usp__zelle:not(:nth-child(3n+1)){padding-left:0} .usp__zelle:nth-child(odd){border-right:1px solid var(--linie);padding-right:32px} .usp__zelle:nth-child(even){padding-left:32px} .usp__kerzen{display:none} .usp__zahl dt{font-size:48px;line-height:58px} } @media (max-width:640px){ .usp .innen{padding-block:56px} .usp__raster{grid-template-columns:1fr} .usp__zelle,.usp__zelle:nth-child(odd),.usp__zelle:nth-child(even){ border-right:0;padding:28px 0; } .usp__zahlen{flex-direction:column;gap:28px} .usp__oben{margin-bottom:40px} } /* Korrektur USP 29.10.2026, nach Rafis Abgleich mit der Vorlage: 1 Das Kerzenfeld war 320 breit und sass unter der Ueberschrift. Bei der Vorlage ist es 643 x 425, sitzt neben dem Kopf und ragt 61 ueber den Inhalt hinaus. 39 Balken statt 18. 2 Die Trennlinien sind dort gepunktet und es gibt keine Linie unter der zweiten Reihe. */ .usp__kerzen{ right:0;top:-61px;width:643px;height:470px;overflow:visible; } .kerze--oben{background:linear-gradient(to bottom,var(--signal),rgb(23 124 183 / 0))} .kerze--unten{background:linear-gradient(to top,var(--signal),rgb(23 124 183 / 0))} .kerze{opacity:.85} .usp__raster{border-top:1px dashed rgb(21 22 26 / .16)} .usp__zelle{border-bottom:0} .usp__zelle:nth-child(-n+3){border-bottom:1px dashed rgb(21 22 26 / .16)} .usp__zelle:not(:nth-child(3n)){border-right:1px dashed rgb(21 22 26 / .16)} @media (max-width:900px){ .usp__zelle:nth-child(-n+3){border-bottom:1px dashed rgb(21 22 26 / .16)} .usp__zelle:nth-child(4),.usp__zelle:nth-child(5){border-bottom:1px dashed rgb(21 22 26 / .16)} .usp__zelle:not(:nth-child(3n)){border-right:0} .usp__zelle:nth-child(odd){border-right:1px dashed rgb(21 22 26 / .16)} } @media (max-width:640px){ .usp__zelle,.usp__zelle:nth-child(odd),.usp__zelle:nth-child(even){border-right:0} .usp__zelle:not(:last-child){border-bottom:1px dashed rgb(21 22 26 / .16)} } /* ========================================================================== 24 · Leben in den Attrappen, 29.10.2026 Rafi: die Fenster rechts sind nicht animiert. Jede Attrappe bekommt beim Aufdecken genau eine Bewegung, die zu ihrem Inhalt passt. Sie laeuft einmal, nicht in Schleife, und haengt an .da des jeweiligen Schritts. Ohne Skript und bei reduzierter Bewegung steht alles im Endzustand. ========================================================================== */ /* Schritt I: der Balken laeuft auf 50 Prozent, die Wahl setzt sich danach */ .blendet .schritt .frage__balken i{width:0;transition:width 900ms var(--kurve-aus) 260ms} .blendet .schritt.da .frage__balken i{width:50%} .blendet .schritt .frage__wahl--an{ background:#fff;border-color:var(--linie);color:var(--schrift-still); transition:background 300ms linear 980ms, border-color 300ms linear 980ms, color 300ms linear 980ms; } /* Schritt II: die vier Haken setzen nacheinander, die Ringe zeichnen sich */ .blendet .schritt .aufbau__liste li{--n:0} .blendet .schritt .aufbau__liste li:nth-child(2){--n:1} .blendet .schritt .aufbau__liste li:nth-child(3){--n:2} .blendet .schritt .aufbau__liste li:nth-child(4){--n:3} .haken-kasten{position:relative;transition:background 220ms linear, border-color 220ms linear} .haken-kasten::after{ content:"";position:absolute;left:4px;top:4px;width:6px;height:3px; border-left:1.6px solid #fff;border-bottom:1.6px solid #fff; transform:rotate(-45deg) scale(0);transform-origin:center; transition:transform 260ms var(--kurve-aus); } .blendet .schritt.da .aufbau__liste li .haken-kasten{ background:var(--signal);border-color:var(--signal); transition-delay:calc(360ms + var(--n) * 180ms); } .blendet .schritt.da .aufbau__liste li .haken-kasten::after{ transform:rotate(-45deg) scale(1); transition-delay:calc(420ms + var(--n) * 180ms); } .blendet .schritt .ring .ring__an{ stroke-dasharray:113;stroke-dashoffset:113; transition:stroke-dashoffset 1100ms var(--kurve-aus) 420ms; } .blendet .schritt.da .ring .ring__an{stroke-dashoffset:calc(113 - 113 * var(--teil))} .blendet .schritt .kurve path{ stroke-dasharray:90;stroke-dashoffset:90; transition:stroke-dashoffset 900ms var(--kurve-aus) 620ms; } .blendet .schritt.da .kurve path{stroke-dashoffset:0} /* Schritt III: die Punkte laufen nacheinander ein */ .blendet .schritt .lauf__punkt{--n:0;opacity:0;transform:translateY(10px); transition:opacity 320ms linear, transform var(--feder-zeit) var(--feder);} .blendet .schritt .lauf__punkt:nth-child(2){--n:1} .blendet .schritt .lauf__punkt:nth-child(3){--n:2} .blendet .schritt.da .lauf__punkt{ opacity:1;transform:none;transition-delay:calc(300ms + var(--n) * 150ms); } @media (prefers-reduced-motion:reduce){ .blendet .schritt .frage__balken i{width:50%;transition:none} .blendet .schritt .haken-kasten::after{transform:rotate(-45deg) scale(1);transition:none} .blendet .schritt .ring .ring__an{stroke-dashoffset:calc(113 - 113 * var(--teil));transition:none} .blendet .schritt .kurve path{stroke-dashoffset:0;transition:none} .blendet .schritt .lauf__punkt{opacity:1;transform:none;transition:none} } /* Korrektur Kerzenfeld 29.10.2026, Rafis Nahaufnahmen nebeneinander gelegt. Drei Unterschiede zur Vorlage, alle drei behoben: 1 Der Punkt sass bei jedem zweiten Balken unten und der Schweif lief nach oben. Bei der Vorlage sitzt er immer oben. 2 Alle Balken hatten dieselbe Deckkraft. Dort steigt sie von links nach rechts, die linken sind fast weiss. 3 Das Feld lief als exaktes Zickzack auf einer geraden Linie. Dort streuen die Balken um eine steigende Grundlinie. */ .kerze,.kerze--oben,.kerze--unten{ background:linear-gradient(to bottom, rgb(23 124 183 / var(--o,1)) 0%, rgb(23 124 183 / calc(var(--o,1) * .55)) 38%, rgb(23 124 183 / 0) 100%); opacity:1; } .kerze::after,.kerze--oben::after,.kerze--unten::after{ top:0;bottom:auto;background:rgb(23 124 183 / var(--o,1)); } /* ========================================================================== 25 · Auftakt wieder an grabosch.com, 29.10.2026 dort im DOM gemessen (Fenster 1728): Marke 14/20 Gewicht 500, Zeichen 16, Abstand 6, Farbe rgb(1,98,244) Titel 108,8 / 103,36 Laufweite -2,72 (-0,025em), Breite 1104 Vorspann 18 / 24,75 Gewicht 400, Hoechstbreite 768, darin eine Zeile 500 Knoepfe 48 hoch, Polster 0/32, Pille, 14/20 Gewicht 500, Abstand 12 Beweis 14 / 19,25 Gewicht 300 gedeckt, darin ein Teil Gewicht 500 Abstaende Marke 24 Titel 24 Vorspann 32 Knoepfe 24 Beweis Rafi wollte den Titel kraeftiger als dort: Grabosch setzt Geist in 400, Manrope wirkt in 400 duenner. Deshalb 500. ========================================================================== */ /* Keine grauen Trennlinien mehr zwischen den Sektionen. */ .sektion{border-top:0} .auftakt__kopf{gap:0} .auftakt .pille{ font-size:14px;line-height:20px;font-weight:500;gap:6px; padding:0;background:none;border:0;color:var(--signal);margin-bottom:24px; } .auftakt .pille svg{width:16px;height:16px} .auftakt__kopf .titel-xl{ max-width:1104px;margin-inline:auto;justify-self:center; font-size:clamp(2.4rem,.6rem + 5.9vw,6.8rem); line-height:.95;letter-spacing:-.025em;font-weight:500; margin-bottom:24px; } .auftakt__kopf .vorspann{ max-width:768px;margin-inline:auto;margin-bottom:32px; font-size:18px;line-height:24.75px;font-weight:400;letter-spacing:0; color:var(--schrift-still); } .auftakt__kopf .vorspann strong{font-weight:500;color:var(--schrift)} .auftakt__kopf .vorspann .still{color:var(--schrift-still)} .auftakt__knoepfe{margin-top:0;gap:12px;margin-bottom:24px} .auftakt__knoepfe .knopf{ height:48px;padding:0 32px;border-radius:999px;gap:8px; font-size:14px;line-height:20px;font-weight:500; } .auftakt__knoepfe .knopf svg{width:16px;height:16px} .auftakt__beweis{ display:block;text-align:center; font-size:14px;line-height:19.25px;font-weight:300;color:var(--schrift-still); } .auftakt__beweis strong{font-weight:500;color:var(--schrift)} /* ========================================================================== 26 · Kunden-Ticker unter der Bahn Optik nach Rafis Vorlage: ein gedecktes Blaugrau fuer alle Logos, damit kein Kundenlogo das andere ueberstrahlt. Die Logos sind dafuer auf ihre Silhouette reduziert, sonst waere das weisse LM Real Estate unsichtbar. Links und rechts blendet der Streifen aus, die Spur laeuft endlos. ========================================================================== */ .ticker{margin-top:56px} .ticker__kopf{ text-align:center;font-size:14px;line-height:19.25px;font-weight:400; color:var(--schrift-still);margin:0 0 28px; } .ticker__fenster{ overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent); } .ticker__spur{ display:flex;align-items:center;gap:72px;width:max-content; animation:ticker-lauf 42s linear infinite; } .ticker__spur img{height:34px;width:auto;display:block;flex:0 0 auto} .ticker__fenster:hover .ticker__spur{animation-play-state:paused} @keyframes ticker-lauf{ /* Die Spur traegt die Logos zweimal. Ein halber Durchlauf plus der halbe Spalt setzt sie nahtlos wieder auf den Anfang. */ from{transform:translateX(0)} to{transform:translateX(calc(-50% - 36px))} } @media (prefers-reduced-motion:reduce){ .ticker__spur{animation:none;justify-content:center;width:100%;flex-wrap:wrap} } @media (max-width:680px){ .ticker{margin-top:40px} .ticker__spur{gap:48px} .ticker__spur img{height:26px} } /* ========================================================================== 27 · Leistungs-Sektion, dunkle Tafel Masse an foerderung.de gemessen, Werte im HTML-Kopf der Sektion notiert. Die Tafel ist 1200 statt deren 1400, damit sie in der Flucht der uebrigen Seite bleibt. Die Karten werden dadurch anteilig schmaler. ========================================================================== */ :root{ --tafel:#0B1A24; /* tiefes Blauschwarz aus dem Signalton heraus */ --tafel-hell:#123A52; --tafel-schrift:#FFFFFF; --tafel-still:#DBE2E9; --tafel-flaeche:rgb(255 255 255 / .07); --tafel-kante:rgb(255 255 255 / .18); } .leistung{background:#fff} .leistung .innen{padding-block:81px} .tafel{ background: radial-gradient(120% 80% at 80% 0%, var(--tafel-hell) 0%, rgb(18 58 82 / 0) 55%), var(--tafel); border-radius:28px;padding:48px;color:var(--tafel-schrift);overflow:hidden; } .tafel__kopf{display:grid;justify-items:center;text-align:center;gap:12px;max-width:850px;margin:0 auto 54px} .tafel__marke{font-size:12px;line-height:18px;font-weight:600;color:#7FC4E8;margin:0} .tafel__titel{ font-size:clamp(1.9rem,1.1rem + 2.9vw,3.5rem); line-height:1.04;letter-spacing:-.026em;font-weight:600;margin:0;color:var(--tafel-schrift); } .tafel__vorspann{ font-size:15px;line-height:21.6px;color:var(--tafel-still);max-width:566px;margin:0; } .tafel__karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .lkarte{ background:var(--tafel-flaeche);border:1px solid var(--tafel-kante); border-radius:20px;overflow:hidden;display:flex;flex-direction:column; } .lkarte__bild{aspect-ratio:419/251;padding:20px;display:block} /* Kein margin-top:auto. Die Karten sind durch das Raster ohnehin gleich hoch, mit auto rutschte der Text der kuerzesten Karte nach unten und die drei Ueberschriften standen auf drei verschiedenen Hoehen. */ .lkarte__text{padding:24px;display:grid;gap:12px;text-align:center;align-content:start} .lkarte__text h3{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.018em;margin:0} .lkarte__text p{font-size:15px;line-height:21.6px;color:var(--tafel-still);margin:0} /* Breite Karte */ .tafel__breit{ margin-top:20px;background:var(--tafel-flaeche);border:1px solid var(--tafel-kante); border-radius:20px;display:grid;grid-template-columns:434px 1fr;align-items:center; overflow:hidden; } .tafel__breit-text{padding:44px;display:grid;gap:24px;align-content:center} .tafel__logo{height:24px;width:auto;filter:brightness(0) invert(1);opacity:.92} /* 38 brach den Titel auf drei Zeilen, die Vorlage hat zwei. */ .tafel__breit-text h3{font-size:34px;line-height:42px;font-weight:700;letter-spacing:-.022em;margin:0} .tafel__breit-text p{font-size:15px;line-height:21.6px;color:var(--tafel-still);margin:0} .tafel__breit-bild{padding:44px 0 44px 0;overflow:hidden} /* Der Anschnitt rechts war so tief, dass die dritte Zahl halb wegfiel. */ .tafel__breit-bild .fenster-attrappe{width:107%;max-width:none} /* Fusszeile */ .tafel__fussmarke{ text-align:center;font-size:12px;line-height:18px;font-weight:600; color:#7FC4E8;margin:56px 0 24px; } .tafel__fuss{display:grid;grid-template-columns:repeat(3,1fr);gap:75px} .tafel__fuss article{display:grid;gap:16px;justify-items:center;text-align:center;position:relative} .tafel__fuss article + article::before{ content:"";position:absolute;left:-37px;top:4px;bottom:4px;width:1px; background:rgb(255 255 255 / .14); } /* Glas-Sinnbilder, mit Higgsfield erzeugt und auf Schwarz freigestellt. mix-blend-mode screen laesst das Schwarz restlos verschwinden, egal welche Farbe die Tafel an der Stelle gerade hat. */ .leistung__sym{ height:72px;width:auto;display:block; mix-blend-mode:screen; } .tafel__fuss h4{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.02em;margin:0} .tafel__fuss p{font-size:15px;line-height:21.6px;color:var(--tafel-still);margin:0} /* Wochenstand in der breiten Karte */ .stand{display:grid;gap:14px} .stand__zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .stand__zahlen div{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:10px 12px} .stand__zahlen em{display:block;font-style:normal;font-size:20px;line-height:26px;font-weight:600;color:var(--schrift)} .stand__zahlen span{font-size:11px;line-height:15px;color:var(--schrift-still)} .stand__liste{display:grid;gap:8px;font-size:12px;line-height:16px;color:var(--schrift-still)} .stand__liste li{display:flex;align-items:center;gap:8px} /* Die kleinen Attrappen in den drei Karten */ .mini{ width:100%;height:100%;background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .12);border-radius:14px; padding:16px;display:grid;gap:8px;align-content:start;position:relative;overflow:hidden; } .mini__zeile{display:flex;align-items:center;justify-content:space-between;font-size:11px;line-height:16px;color:var(--tafel-still)} .mini__zeile b{font-weight:600;color:#fff} .mini__an{color:#7FC4E8} .mini__zeile--aus,.mini__zeile--aus b{color:rgb(255 255 255 / .35)} .mini__balken{height:5px;border-radius:999px;background:rgb(255 255 255 / .12);overflow:hidden} .mini__balken i{display:block;height:100%;width:var(--f);border-radius:999px;background:#7FC4E8} .mini__zeile--aus + .mini__balken i{background:rgb(255 255 255 / .22)} .mini__fuss{ display:flex;align-items:baseline;justify-content:space-between;margin-top:auto; font-size:11px;line-height:16px;color:var(--tafel-still); } .mini__fuss em{font-style:normal;font-size:18px;font-weight:600;color:#fff} .mini--gebiet{place-content:center;justify-items:center} .mini__ring{position:absolute;width:140px;height:140px;border-radius:999px;border:1px solid rgb(127 196 232 / .35)} .mini__ring--2{width:88px;height:88px;border-color:rgb(127 196 232 / .55)} .mini__nadel{position:absolute;width:12px;height:12px;border-radius:999px;background:#7FC4E8;box-shadow:0 0 0 5px rgb(127 196 232 / .22)} .mini__chips{position:absolute;bottom:14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center} .mini__chips span{ font-size:10px;line-height:14px;padding:3px 8px;border-radius:999px; background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .16);color:var(--tafel-still); } .mini--motive{grid-template-columns:repeat(3,1fr);gap:8px;align-content:start} .mini__kachel{ aspect-ratio:3/4;border-radius:10px;background:rgb(255 255 255 / .1); border:1px solid rgb(255 255 255 / .14);position:relative; } .mini__kachel--an{border-color:rgb(127 196 232 / .7);background:rgb(127 196 232 / .16)} .mini__kachel em{ position:absolute;left:6px;top:6px;font-style:normal;font-size:9px;line-height:13px; padding:1px 6px;border-radius:999px;background:#7FC4E8;color:var(--tafel);font-weight:600; } .mini--motive .mini__fuss{grid-column:1 / -1} @media (max-width:1000px){ .tafel{padding:32px} .tafel__karten{grid-template-columns:1fr 1fr} .tafel__breit{grid-template-columns:1fr} .tafel__breit-bild{padding:0 0 32px 32px} .tafel__fuss{grid-template-columns:1fr;gap:32px} .tafel__fuss article + article::before{display:none} } @media (max-width:680px){ .leistung .innen{padding-block:56px} .tafel{padding:24px;border-radius:20px} .tafel__karten{grid-template-columns:1fr} .tafel__breit-text{padding:28px} .tafel__breit-text h3{font-size:28px;line-height:34px} } /* ========================================================================== 28 · Kartengrafiken neu, 29.10.2026 Rafis Urteil: zu duenn. Der Vergleich mit der Vorlage zeigt warum. Dort liegen echte Oberflaechen-Schnipsel als weisse Karten auf der dunklen Tafel, gestapelt, leicht gedreht, mit Schatten und einer Gluehkante in der Signalfarbe, dahinter ein feines Raster. Bei mir waren es flache Balken ohne Ebene und ohne Kontrast. Jetzt derselbe Aufbau. ========================================================================== */ .lkarte__bild{padding:0;position:relative;overflow:hidden} .buehne{ position:absolute;inset:0;overflow:hidden; background: radial-gradient(90% 70% at 50% 0%, rgb(127 196 232 / .10) 0%, rgb(127 196 232 / 0) 70%), rgb(255 255 255 / .03); } .buehne__raster{ position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(to right, rgb(255 255 255 / .05) 0 1px, transparent 1px 26px), repeating-linear-gradient(to bottom, rgb(255 255 255 / .05) 0 1px, transparent 1px 26px); -webkit-mask-image:radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 100%); mask-image:radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 100%); } .buehne__marke{ position:absolute;left:18px;top:16px;z-index:3; font-size:11px;line-height:15px;font-weight:600;color:rgb(255 255 255 / .55); } /* Weisse Blaetter: das Bauteil, das der Grafik ihre Tiefe gibt */ .blatt{ position:absolute;background:#fff;border-radius:12px;color:var(--schrift); box-shadow:0 18px 38px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .25); padding:12px 14px;display:grid;gap:8px;z-index:2; } .blatt__zeile{ display:flex;align-items:center;gap:8px; font-size:11.5px;line-height:16px;font-weight:500; } .blatt__zeile i{ width:7px;height:7px;border-radius:999px;background:var(--linie-stark);flex:none; } .blatt__zeile--an i{background:var(--signal);box-shadow:0 0 0 3px rgb(23 124 183 / .18)} .blatt__zeile em{ margin-left:auto;font-style:normal;font-size:10px;line-height:14px; color:var(--schrift-still);font-weight:500; } .blatt__zeile--an em{color:var(--signal)} .blatt__zeile--aus,.blatt__zeile--aus em{color:rgb(21 22 26 / .38)} .blatt__fuss{ display:flex;align-items:baseline;justify-content:space-between; font-size:10.5px;line-height:15px;color:var(--schrift-still); } .blatt__fuss b{font-size:11.5px;color:var(--schrift);font-weight:600} .blatt__fuss em{font-style:normal;font-weight:600;color:var(--schrift)} .blatt__fuss .gut{color:var(--signal)} .blatt__balken{height:4px;border-radius:999px;background:var(--linie);overflow:hidden} .blatt__balken i{display:block;height:100%;width:var(--f);background:var(--signal);border-radius:999px} /* Karte 1 · Ausspielung auf das Gebiet */ .kreis{ position:absolute;left:50%;top:38%;transform:translate(-50%,-50%); border-radius:999px;border:1px solid rgb(127 196 232 / .30); } .kreis--1{width:172px;height:172px} .kreis--2{width:116px;height:116px;border-color:rgb(127 196 232 / .45)} .kreis--3{width:62px;height:62px;border-color:rgb(127 196 232 / .65)} .nadel{ position:absolute;left:50%;top:38%;transform:translate(-50%,-50%); width:10px;height:10px;border-radius:999px;background:#7FC4E8; box-shadow:0 0 0 6px rgb(127 196 232 / .20), 0 0 18px 4px rgb(127 196 232 / .55); } .blatt--gebiet{left:14px;right:14px;bottom:14px;transform:rotate(-1.2deg)} /* Karte 2 · Motive im Test */ .blatt--hinten{ left:10px;bottom:30px;width:40%;transform:rotate(-7deg); opacity:.72;filter:saturate(.6); } .blatt--vorn{right:12px;bottom:14px;width:52%;transform:rotate(3deg);z-index:3} .blatt__bild{ display:block;aspect-ratio:4/3;border-radius:8px;position:relative; background:linear-gradient(145deg, rgb(21 22 26 / .10), rgb(21 22 26 / .04)); } .blatt__bild--an{background:linear-gradient(145deg, rgb(23 124 183 / .26), rgb(23 124 183 / .08))} .blatt__bild s{ position:absolute;left:6px;top:6px;text-decoration:none; font-size:9px;line-height:13px;font-weight:600;padding:1px 6px;border-radius:999px; background:var(--signal);color:#fff; } .kurve-gluehen{ position:absolute;left:0;right:0;bottom:36%;width:100%;height:70px;z-index:1; overflow:visible; } .kurve-gluehen path{ fill:none;stroke:#7FC4E8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 7px rgb(127 196 232 / .8)); } /* Karte 3 · Vorqualifizierung */ .blatt--stapel-3{left:34px;right:34px;top:34px;height:60px;opacity:.28;transform:rotate(-3deg)} .blatt--stapel-2{left:24px;right:24px;top:26px;height:70px;opacity:.5;transform:rotate(2deg)} .blatt--pruefung{left:16px;right:16px;top:40px;transform:rotate(-.8deg);z-index:3;gap:7px} .blatt__kopf{font-size:11.5px;line-height:16px;font-weight:700} .blatt__haken{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:16px} .blatt__haken i{ width:14px;height:14px;border-radius:4px;background:var(--signal);flex:none; position:relative; } .blatt__haken i::after{ content:"";position:absolute;left:4px;top:4px;width:5px;height:2.5px; border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg); } /* -- Bewegung: jede Buehne laeuft einmal, wenn ihre Karte aufdeckt -------- */ .blendet .lkarte .blatt{opacity:0;transform:translateY(14px) rotate(0deg)} .blendet .lkarte.da .blatt{ opacity:1; transition:opacity 320ms linear 160ms, transform var(--feder-zeit) var(--feder) 160ms; } .blendet .lkarte.da .blatt--gebiet{transform:rotate(-1.2deg)} .blendet .lkarte.da .blatt--hinten{opacity:.72;transform:rotate(-7deg);transition-delay:60ms} .blendet .lkarte.da .blatt--vorn{transform:rotate(3deg);transition-delay:220ms} .blendet .lkarte.da .blatt--stapel-3{opacity:.28;transform:rotate(-3deg);transition-delay:40ms} .blendet .lkarte.da .blatt--stapel-2{opacity:.5;transform:rotate(2deg);transition-delay:120ms} .blendet .lkarte.da .blatt--pruefung{transform:rotate(-.8deg);transition-delay:220ms} .blendet .lkarte .kreis{opacity:0;transform:translate(-50%,-50%) scale(.6)} .blendet .lkarte.da .kreis{ opacity:1;transform:translate(-50%,-50%) scale(1); transition:opacity 420ms linear, transform var(--feder-zeit) var(--feder); } .blendet .lkarte.da .kreis--2{transition-delay:90ms} .blendet .lkarte.da .kreis--1{transition-delay:180ms} .blendet .lkarte .nadel{opacity:0} .blendet .lkarte.da .nadel{opacity:1;transition:opacity 300ms linear 260ms} .blendet .lkarte .blatt__balken i{width:0;transition:width 900ms var(--kurve-aus) 520ms} .blendet .lkarte.da .blatt__balken i{width:var(--f)} .blendet .lkarte .blatt__haken i::after{transform:rotate(-45deg) scale(0);transition:transform 240ms var(--kurve-aus)} .blendet .lkarte.da .blatt__haken i::after{transform:rotate(-45deg) scale(1)} .blendet .lkarte.da .blatt__haken:nth-of-type(1) i::after{transition-delay:460ms} .blendet .lkarte.da .blatt__haken:nth-of-type(2) i::after{transition-delay:620ms} .blendet .lkarte.da .blatt__haken:nth-of-type(3) i::after{transition-delay:780ms} .blendet .lkarte .kurve-gluehen path{stroke-dasharray:300;stroke-dashoffset:300; transition:stroke-dashoffset 1100ms var(--kurve-aus) 300ms} .blendet .lkarte.da .kurve-gluehen path{stroke-dashoffset:0} @media (prefers-reduced-motion:reduce){ .blendet .lkarte .blatt,.blendet .lkarte .kreis,.blendet .lkarte .nadel{opacity:1;transition:none} .blendet .lkarte .blatt__balken i{width:var(--f);transition:none} .blendet .lkarte .blatt__haken i::after{transform:rotate(-45deg) scale(1);transition:none} .blendet .lkarte .kurve-gluehen path{stroke-dashoffset:0;transition:none} } /* ========================================================================== 29 · Abschluss-Aufruf Aufbau wie bei der Vorlage: Glasbild randlos oben, darunter mittig Marke, Titel, Vorspann und ein einzelner Knopf. ========================================================================== */ .aufruf{background:#fff} .aufruf .innen{padding-block:81px} .aufruf__bild{margin:0 auto 8px;max-width:980px} .aufruf__bild img{width:100%;height:auto;display:block} .aufruf__kopf{display:grid;justify-items:center;text-align:center;gap:0;max-width:850px;margin-inline:auto} .aufruf__kopf .problem__marke{margin-bottom:12px} .aufruf__titel{ font-size:clamp(1.9rem,1.1rem + 2.9vw,3.5rem); line-height:1.04;letter-spacing:-.026em;font-weight:600;margin:0 0 12px; } .aufruf__kopf .vorspann{ font-size:18px;line-height:1.55;letter-spacing:-.0116em;max-width:700px;margin:0 0 32px; } .aufruf__knopf .knopf{height:48px;padding:0 32px;border-radius:999px;gap:8px;font-size:14px;font-weight:500} .aufruf__knopf .knopf svg{width:16px;height:16px} @media (max-width:680px){ .aufruf .innen{padding-block:56px} .aufruf__kopf .vorspann{font-size:16px;margin-bottom:24px} } /* ========================================================================== 30 · Bento statt drei Karten, 29.10.2026 Rafis Urteil zur zweiten Fassung: immer noch geklebt. Stimmt. Die weissen Blaetter schwebten ohne Anker, die Buehne war oben leer und die grauen Platzhalter hinter dem Stapel waren tote Flaechen. Jetzt liegt in jeder Kachel ein Glas-Objekt als Tiefenebene, darueber die echten Oberflaechen-Schnipsel mit den Woertern und Zahlen. Das Glas ist mit Higgsfield erzeugt, auf Schwarz freigestellt und liegt im Modus screen, deshalb gibt es keinen Kasten um das Objekt. Sechs Leistungen statt drei, Inhalt aus dem, was starke deutsche Performance-Agenturen zeigen: Segmentierung, Angle Testing, Vorqualifizierung, serverseitiges Tracking, taegliche Steuerung, Lead-Routing. ========================================================================== */ .bento{ display:grid;grid-template-columns:repeat(6,1fr);gap:20px; grid-auto-rows:minmax(0,auto); } .bfeld--a{grid-column:span 4} .bfeld--b{grid-column:span 2} .bfeld--c,.bfeld--d,.bfeld--e{grid-column:span 2} .bfeld--f{grid-column:span 6} .bfeld{ background:var(--tafel-flaeche);border:1px solid var(--tafel-kante); border-radius:20px;overflow:hidden;display:flex;flex-direction:column; } .bfeld__buehne{ position:relative;overflow:hidden;aspect-ratio:16/9; background: radial-gradient(90% 80% at 50% 10%, rgb(127 196 232 / .12) 0%, rgb(127 196 232 / 0) 70%), rgb(255 255 255 / .03); } .bfeld--a .bfeld__buehne{aspect-ratio:21/9} .bfeld__buehne--quer{aspect-ratio:48/9} .bfeld__glas{ position:absolute;right:6%;top:50%;transform:translateY(-50%); height:84%;width:auto;mix-blend-mode:screen;opacity:.95;z-index:1; } .bfeld--f .bfeld__glas{right:4%;height:120%} .bfeld__text{padding:24px;display:grid;gap:10px;align-content:start} .bfeld__text h3{font-size:20px;line-height:27px;font-weight:700;letter-spacing:-.018em;margin:0} .bfeld__text p{font-size:15px;line-height:21.6px;color:var(--tafel-still);margin:0} .bfeld--a .bfeld__text h3{font-size:24px;line-height:31px} /* Die weissen Schnipsel sitzen links und sind am Rand verankert, nicht mittig schwebend. */ .bfeld .blatt{position:absolute;z-index:2} .blatt--zielgruppe{left:28px;top:50%;transform:translateY(-50%);width:252px;gap:6px} .blatt--motivA{left:16px;bottom:30px;width:112px;transform:rotate(-7deg);opacity:.62} .blatt--motivB{left:84px;bottom:16px;width:152px;transform:rotate(2deg);z-index:3} .blatt--pruefung{left:22px;top:50%;transform:translateY(-50%);width:186px;gap:7px} .blatt--tracking{left:22px;top:50%;transform:translateY(-50%);width:208px;gap:6px} .blatt--steuerung{left:22px;top:50%;transform:translateY(-50%);width:186px;gap:8px} .chip{ position:absolute;z-index:3;font-size:10px;line-height:14px;font-weight:500; padding:4px 9px;border-radius:999px;background:#fff;color:var(--schrift); box-shadow:0 8px 18px rgb(0 0 0 / .38); } .chip--1{left:300px;top:18%} .chip--2{left:342px;top:44%} .chip--3{left:296px;top:70%} .marke-chip{ position:absolute;z-index:4;left:92px;bottom:96px; font-size:10px;line-height:14px;font-weight:600;padding:2px 8px;border-radius:999px; background:var(--signal);color:#fff;box-shadow:0 6px 14px rgb(0 0 0 / .35); } /* Die Flusskette in der breiten Kachel */ .fluss{ position:absolute;left:28px;top:50%;transform:translateY(-50%);z-index:2; display:flex;align-items:center;gap:12px; } .fluss__halt{ font-size:11.5px;line-height:16px;font-weight:600;color:var(--schrift); background:#fff;border-radius:999px;padding:7px 14px; box-shadow:0 10px 24px rgb(0 0 0 / .38);white-space:nowrap; } .fluss__halt--an{background:var(--signal);color:#fff} .fluss__strich{ width:44px;height:2px;border-radius:999px; background:linear-gradient(to right, rgb(127 196 232 / .25), rgb(127 196 232 / .9)); } /* -- Bewegung ------------------------------------------------------------- */ .blendet .bfeld .bfeld__glas{opacity:0;transform:translateY(-50%) scale(.92)} .blendet .bfeld.da .bfeld__glas{ opacity:.95;transform:translateY(-50%) scale(1); transition:opacity 480ms linear, transform var(--feder-zeit) var(--feder); } .blendet .bfeld .blatt,.blendet .bfeld .chip,.blendet .bfeld .marke-chip, .blendet .bfeld .fluss__halt{opacity:0;transform:translateY(12px)} .blendet .bfeld.da .blatt,.blendet .bfeld.da .chip,.blendet .bfeld.da .marke-chip, .blendet .bfeld.da .fluss__halt{ opacity:1; transition:opacity 300ms linear 180ms, transform var(--feder-zeit) var(--feder) 180ms; } .blendet .bfeld.da .blatt--zielgruppe, .blendet .bfeld.da .blatt--pruefung, .blendet .bfeld.da .blatt--tracking, .blendet .bfeld.da .blatt--steuerung{transform:translateY(-50%)} .blendet .bfeld.da .blatt--motivA{opacity:.62;transform:rotate(-7deg);transition-delay:120ms} .blendet .bfeld.da .blatt--motivB{transform:rotate(2deg);transition-delay:260ms} .blendet .bfeld.da .chip--1{transition-delay:300ms} .blendet .bfeld.da .chip--2{transition-delay:380ms} .blendet .bfeld.da .chip--3{transition-delay:460ms} .blendet .bfeld.da .marke-chip{transition-delay:420ms} .blendet .bfeld.da .fluss__halt:nth-of-type(1){transition-delay:180ms} .blendet .bfeld.da .fluss__halt:nth-of-type(3){transition-delay:300ms} .blendet .bfeld.da .fluss__halt:nth-of-type(5){transition-delay:420ms} .blendet .bfeld.da .fluss__halt:nth-of-type(7){transition-delay:540ms} .blendet .bfeld .fluss__strich{transform:scaleX(0);transform-origin:left} .blendet .bfeld.da .fluss__strich{ transform:none;transition:transform 420ms var(--kurve-aus); } .blendet .bfeld.da .fluss__strich:nth-of-type(2){transition-delay:240ms} .blendet .bfeld.da .fluss__strich:nth-of-type(4){transition-delay:360ms} .blendet .bfeld.da .fluss__strich:nth-of-type(6){transition-delay:480ms} .blendet .bfeld .blatt__balken i{width:0;transition:width 900ms var(--kurve-aus) 520ms} .blendet .bfeld.da .blatt__balken i{width:var(--f)} .blendet .bfeld .blatt__haken i::after{transform:rotate(-45deg) scale(0);transition:transform 240ms var(--kurve-aus)} .blendet .bfeld.da .blatt__haken i::after{transform:rotate(-45deg) scale(1)} .blendet .bfeld.da .blatt__haken:nth-of-type(1) i::after{transition-delay:420ms} .blendet .bfeld.da .blatt__haken:nth-of-type(2) i::after{transition-delay:560ms} .blendet .bfeld.da .blatt__haken:nth-of-type(3) i::after{transition-delay:700ms} @media (prefers-reduced-motion:reduce){ .blendet .bfeld .bfeld__glas,.blendet .bfeld .blatt,.blendet .bfeld .chip, .blendet .bfeld .marke-chip,.blendet .bfeld .fluss__halt{opacity:1;transition:none} .blendet .bfeld .fluss__strich{transform:none;transition:none} .blendet .bfeld .blatt__balken i{width:var(--f);transition:none} .blendet .bfeld .blatt__haken i::after{transform:rotate(-45deg) scale(1);transition:none} } @media (max-width:1000px){ .bento{grid-template-columns:repeat(2,1fr)} .bfeld--a,.bfeld--b,.bfeld--c,.bfeld--d,.bfeld--e,.bfeld--f{grid-column:span 2} .bfeld__buehne,.bfeld--a .bfeld__buehne,.bfeld__buehne--quer{aspect-ratio:21/9} } @media (max-width:680px){ .bfeld__text{padding:20px} .blatt--zielgruppe{width:200px;left:18px} .chip--1,.chip--2,.chip--3{display:none} /* Die Kette war bei 375 breiter als die Kachel und wurde abgeschnitten. Jetzt bricht sie um. */ .fluss{gap:8px;left:16px;right:16px;flex-wrap:wrap;max-width:none} .fluss__strich{width:18px} .fluss__halt{font-size:10.5px;padding:6px 10px} } /* ========================================================================== 31 · Anfragen-Rechner Aufbau nach dem Foerdermittelcheck: heller Grund, weisse Karte mit Fortschrittsbalken und Zaehler, eine Frage je Schritt, am Ende die Summe. ========================================================================== */ .rechner{background:#F6F7F9} .rechner .innen{padding-block:81px} .rechner__kopf{display:grid;justify-items:center;text-align:center;max-width:850px;margin:0 auto 44px} .rechner__kopf .problem__marke{margin-bottom:12px} .rechner__titel{ font-size:clamp(1.9rem,1.1rem + 2.9vw,3.5rem); line-height:1.04;letter-spacing:-.026em;font-weight:600;margin:0 0 12px; } .rechner__kopf .vorspann{font-size:18px;line-height:1.55;max-width:640px;margin:0} .rechner__karte{ background:#fff;border-radius:24px;max-width:800px;margin-inline:auto; padding:32px 40px 32px;box-shadow:0 2px 40px rgb(0 0 0 / .06); } .rechner__leiste{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .rechner__marke{font-size:14px;line-height:20px;font-weight:600;color:var(--signal)} .rechner__zaehler{font-size:14px;line-height:20px;color:var(--schrift-still)} .rechner__zaehler b{font-weight:600;color:var(--schrift)} .rechner__fortschritt{height:5px;border-radius:999px;background:var(--linie);overflow:hidden;margin-bottom:30px} .rechner__fortschritt i{ display:block;height:100%;border-radius:999px;background:var(--signal); transition:width 420ms var(--kurve-aus); } .rechner__felder{min-height:222px} .rfrage{display:none} .rfrage.ist-da{display:grid;gap:18px;animation:rfrage-rein 380ms var(--kurve-aus) both} @keyframes rfrage-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .rfrage h3{font-size:24px;line-height:31px;font-weight:600;letter-spacing:-.02em;margin:0} .rwahl{display:grid;grid-template-columns:1fr 1fr;gap:12px} .rwahl button{ text-align:left;padding:15px 18px;border-radius:12px; border:1px solid var(--linie);background:#fff; font-size:15px;line-height:21px;font-weight:500; transition:border-color var(--aus) var(--kurve), background var(--aus) var(--kurve); } .rwahl button:hover{border-color:var(--linie-stark)} .rwahl button.ist-gewaehlt{ border-color:var(--signal);background:var(--signal-weich);color:var(--signal-tief); } .rwert{display:block;font-size:34px;line-height:42px;font-weight:600;letter-spacing:-.02em} .rregler{ -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px; background:linear-gradient(to right, var(--signal) 0 var(--anteil,50%), var(--linie) var(--anteil,50%) 100%); outline:none; } .rregler::-webkit-slider-thumb{ -webkit-appearance:none;width:24px;height:24px;border-radius:999px;background:#fff; border:1px solid var(--linie-stark);box-shadow:0 2px 8px rgb(0 0 0 / .18);cursor:grab; } .rregler::-moz-range-thumb{ width:24px;height:24px;border-radius:999px;background:#fff; border:1px solid var(--linie-stark);box-shadow:0 2px 8px rgb(0 0 0 / .18);cursor:grab; } .rskala{display:flex;justify-content:space-between;font-size:12px;color:var(--schrift-still)} .rfrage--ergebnis{justify-items:center;text-align:center;gap:10px} .rergebnis__marke{font-size:13px;line-height:18px;font-weight:600;color:var(--signal)} .rergebnis__zahl{ font-size:clamp(2.6rem,1.4rem + 3.4vw,4rem);line-height:1.02;font-weight:700; letter-spacing:-.03em; } .rergebnis__text{font-size:16px;line-height:24px;color:var(--schrift-still);margin:0} .rfrage--ergebnis .knopf{height:48px;padding:0 32px;border-radius:999px;gap:8px;font-size:14px;font-weight:500} .rfrage--ergebnis .knopf svg{width:16px;height:16px} .rechner__fuss{display:flex;align-items:center;justify-content:space-between;margin-top:28px} .rechner__zurueck{font-size:14px;font-weight:500;color:var(--schrift-still)} .rechner__zurueck:hover{color:var(--schrift)} .rechner__weiter{height:44px;padding:0 26px;border-radius:999px;gap:8px;font-size:14px;font-weight:500;margin-left:auto} .rechner__weiter svg{width:16px;height:16px} @media (max-width:680px){ .rechner .innen{padding-block:56px} .rechner__karte{padding:24px 20px;border-radius:20px} .rwahl{grid-template-columns:1fr} .rfrage h3{font-size:20px;line-height:27px} .rechner__felder{min-height:0} } /* ========================================================================== 32 · Vergleich, drei Wege Aufbau nach der Vorlage: aussen zwei helle Spalten mit Kreuzen, in der Mitte die dunkle Spalte mit Haken, erhoeht und ueberlappend. ========================================================================== */ .vergleich{background:#fff} .vergleich .innen{padding-block:81px} .vergleich__kopf{display:grid;justify-items:center;text-align:center;max-width:900px;margin:0 auto 44px} .vergleich__kopf .problem__marke{margin-bottom:12px} .vergleich__titel{ font-size:clamp(1.9rem,1.1rem + 2.9vw,3.5rem); line-height:1.04;letter-spacing:-.026em;font-weight:600;margin:0 0 12px; } .vergleich__kopf .vorspann{font-size:18px;line-height:1.55;max-width:700px;margin:0} .vergleich__feld{ display:grid;grid-template-columns:1fr 1.06fr 1fr;align-items:center; background:#F6F7F9;border-radius:24px;padding:40px 36px; } .vspalte h3{font-size:22px;line-height:29px;font-weight:700;letter-spacing:-.02em;margin:0 0 18px} .vspalte ul{display:grid;gap:0} .vspalte li{ display:flex;align-items:flex-start;gap:12px; font-size:15px;line-height:21px;padding:13px 0; } .vspalte--aussen li + li{border-top:1px solid var(--linie)} .vspalte--aussen{color:var(--schrift-still);padding:0 28px} .vspalte--aussen h3{color:var(--schrift)} .vhaken{width:18px;height:18px;flex:none;margin-top:1px;position:relative} .vhaken--nein::before,.vhaken--nein::after{ content:"";position:absolute;left:3px;top:8px;width:12px;height:1.8px; border-radius:2px;background:#D1495B; } .vhaken--nein::before{transform:rotate(45deg)} .vhaken--nein::after{transform:rotate(-45deg)} .vhaken--ja::after{ content:"";position:absolute;left:4px;top:4px;width:9px;height:5px; border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg); } .vspalte--wir{ background: radial-gradient(120% 90% at 80% 0%, var(--tafel-hell) 0%, rgb(18 58 82 / 0) 60%), var(--tafel); color:#fff;border-radius:20px;padding:34px 30px; box-shadow:0 26px 60px rgb(11 26 36 / .34); position:relative;z-index:2;margin-block:-28px; } .vspalte--wir h3{color:#fff} .vspalte--wir li + li{border-top:1px solid rgb(255 255 255 / .12)} .vspalte--wir .vhaken{border-radius:999px;background:var(--signal)} @media (max-width:900px){ .vergleich__feld{grid-template-columns:1fr;gap:20px;padding:24px} .vspalte--wir{margin-block:0} .vspalte--aussen{padding:0} } @media (max-width:680px){ .vergleich .innen{padding-block:56px} } /* ========================================================================== 33 · Kunden, Stimmen und zweiter Aufruf Die Tafel hat abgerundete Ecken und steht in der Inhaltsbreite, links und rechts bleibt Weiss stehen. So wie in Rafis beigem Beispiel, nur mit unseren Radien. ========================================================================== */ /* Stimmen als laufender Streifen, gleiche Mechanik wie der Kunden-Ticker */ .stimmen{margin-top:64px} .stimmen__kopf{text-align:center;font-size:14px;line-height:20px;color:var(--schrift-still);margin:0 0 24px} .stimmen__fenster{ overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent); } .stimmen__spur{display:flex;gap:20px;width:max-content;animation:stimmen-lauf 64s linear infinite} .stimmen__fenster:hover .stimmen__spur{animation-play-state:paused} @keyframes stimmen-lauf{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}} .bkarte{ width:360px;flex:0 0 auto;margin:0;background:#F6F7F9;border-radius:20px;padding:26px; display:grid;gap:12px;align-content:start; } .bkarte__sterne{display:flex;gap:4px} .bkarte__sterne i{ width:14px;height:14px;background:var(--signal);display:block; clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); } .bkarte blockquote{margin:0;font-size:15px;line-height:22px;color:var(--schrift)} .bkarte figcaption{font-size:13px;line-height:18px;color:var(--schrift-still)} @media (prefers-reduced-motion:reduce){ .stimmen__spur{animation:none} } .aufruf2{background:#fff} .aufruf2 .innen{padding-block:0 81px} .aufruf2__karte{ background: radial-gradient(110% 90% at 20% 0%, var(--tafel-hell) 0%, rgb(18 58 82 / 0) 62%), var(--tafel); border-radius:28px;padding:64px 48px;color:#fff; display:grid;justify-items:center;text-align:center;gap:14px; } .aufruf2__titel{ font-size:clamp(1.7rem,1.1rem + 2.1vw,2.75rem); line-height:1.08;letter-spacing:-.026em;font-weight:600;margin:0; } .aufruf2__karte p{font-size:17px;line-height:26px;color:var(--tafel-still);margin:0 0 10px} .aufruf2__karte .knopf{height:48px;padding:0 32px;border-radius:999px;gap:8px;font-size:14px;font-weight:500} .aufruf2__karte .knopf svg{width:16px;height:16px} @media (max-width:900px){ } @media (max-width:680px){ .bkarte{width:272px;padding:20px} .aufruf2__karte{padding:40px 24px;border-radius:20px} .aufruf2 .innen{padding-block:0 56px} } /* ========================================================================== 34 · Häufige Fragen Ein Aufklapper je Frage. Ohne Skript bleibt details/summary bedienbar, das ist der Grund fuer das Bauteil statt einer eigenen Mechanik. ========================================================================== */ .faq{background:#fff} .faq .innen{padding-block:81px} .faq__kopf2{display:grid;justify-items:center;text-align:center;max-width:800px;margin:0 auto 44px} .faq__kopf2 .problem__marke{margin-bottom:12px} .faq__titel{ font-size:clamp(1.9rem,1.1rem + 2.9vw,3.5rem); line-height:1.04;letter-spacing:-.026em;font-weight:600;margin:0; } .faq__liste{max-width:800px;margin-inline:auto;border-top:1px solid var(--linie)} .faq__punkt{border-bottom:1px solid var(--linie)} .faq__punkt summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px; padding:22px 0;font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.012em; } .faq__punkt summary::-webkit-details-marker{display:none} .faq__zeichen{ margin-left:auto;width:20px;height:20px;flex:none;position:relative; } .faq__zeichen::before,.faq__zeichen::after{ content:"";position:absolute;left:50%;top:50%;background:var(--schrift-still); border-radius:2px;transition:transform var(--aus) var(--kurve); } .faq__zeichen::before{width:14px;height:1.8px;transform:translate(-50%,-50%)} .faq__zeichen::after{width:1.8px;height:14px;transform:translate(-50%,-50%)} .faq__punkt[open] .faq__zeichen::after{transform:translate(-50%,-50%) scaleY(0)} .faq__antwort{padding:0 44px 22px 0} .faq__antwort p{font-size:16px;line-height:25px;color:var(--schrift-still);margin:0} .faq__punkt[open] summary{color:var(--schrift)} @media (max-width:680px){ .faq .innen{padding-block:56px} .faq__punkt summary{font-size:16px;line-height:24px;padding:18px 0} .faq__antwort{padding-right:0} } /* ========================================================================== 35 · Korrekturen 29.10.2026 ========================================================================== */ /* Der Ankuendigungsbalken ist raus. Ohne ihn braucht die Leiste keinen Vorhalt mehr und sitzt direkt oben. */ .kopf{top:0} .balken{display:none} /* Rechner auf Weiss, der graue Grund stach aus der Seite heraus. */ .rechner{background:#fff} .rechner__karte{box-shadow:0 2px 40px rgb(0 0 0 / .08);border:1px solid var(--linie)} .rhinweis{font-size:13px;line-height:19px;color:var(--schrift-still);margin:-6px 0 0} .rergebnis__text b{font-weight:600;color:var(--schrift)} /* Der Kunden-Ticker im Auftakt lief von Fensterkante zu Fensterkante. Er soll nur so breit sein wie die Sektionen darunter. */ .ticker{max-width:var(--breite);margin-inline:auto;padding-inline:var(--luft)} /* Die Glasbilder lagen im Modus screen. Der greift erst, wenn der Browser die Ebene zusammensetzt, und bis dahin stand der schwarze Grund der PNG als Kasten im Bild. Die Dateien tragen jetzt echte Transparenz, der Mischmodus faellt weg und es gibt nichts mehr zu blinken. */ .bfeld__glas,.leistung__sym{mix-blend-mode:normal} /* ========================================================================== 36 · Kundentafel, zweite Fassung Erste Fassung war eine duenne Leiste mit fuenf Logos. Bei der Vorlage fuellen 23 Logos vier Reihen, dazu ein feines Gitter und eine Ausblendung nach unten. Die Menge kann ich nicht erfinden, also hole ich die Dichte ueber Inhalt: Kopf, Logos und die Stimmen liegen jetzt in derselben Tafel. Das Gitter und die Ausblendung kommen dazu. ========================================================================== */ /* Die Stimmen liegen jetzt auf der dunklen Tafel, also weisse Karten. */ .stimmen{margin-top:0} @media (max-width:680px){ } /* ========================================================================== 37 · Vergleich, zweite Fassung Gegen das Original fehlten vier Dinge: der Rahmen war grau statt weiss, die Mittelkarte ragte kaum heraus, es gab kein Fähnchen mit der Marke und die Haken waren gefuellte Kreise statt duenner Striche. Dazu eine feine Textur hinter den Aussenspalten. ========================================================================== */ .vergleich__feld{ background:#fff;border:1px solid var(--linie); box-shadow:0 2px 48px rgb(0 0 0 / .05); padding:52px 40px;align-items:center; } .vspalte--aussen{position:relative;overflow:hidden;border-radius:16px;padding:28px} .vraster{ position:absolute;inset:0;z-index:0;pointer-events:none; background-image: repeating-linear-gradient(to right, rgb(209 73 91 / .10) 0 1px, transparent 1px 26px), repeating-linear-gradient(to bottom, rgb(209 73 91 / .10) 0 1px, transparent 1px 26px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 46%); mask-image:linear-gradient(to bottom, #000 0%, transparent 46%); } .vspalte--aussen > *{position:relative;z-index:1} .vspalte li{padding:15px 0} /* Mittelkarte ragt deutlicher heraus und traegt das Fähnchen */ .vspalte--wir{ margin-block:-64px;padding:44px 32px 40px;border-radius:22px; box-shadow:0 34px 70px rgb(11 26 36 / .38);overflow:visible;position:relative; } /* Haken als duenne weisse Striche, kein gefuellter Kreis */ .vspalte--wir .vhaken{background:none;border-radius:0} .vspalte--wir .vhaken::after{ left:2px;top:4px;width:11px;height:6px; border-left:2px solid #fff;border-bottom:2px solid #fff; } @media (max-width:900px){ .vergleich__feld{padding:24px} .vspalte--wir{margin-block:0;padding:32px 24px} .vspalte--aussen{padding:20px} } /* ========================================================================== 38 · Attrappen der Lösungs-Sektion, zweite Fassung Vorher drei duenne Einzelbilder. Jetzt je ein Fenster mit Seitenleiste, Kopfzeile, Kennzahlen und einer Karte darunter, also die Dichte, die die Vorlage in ihren Kacheln zeigt. ========================================================================== */ .fenster-attrappe__koerper.fk{ display:grid;grid-template-columns:44px 1fr;gap:0;padding:0;background:#fff; } .fk__spalte{ display:grid;align-content:start;gap:10px;padding:18px 0 0; border-right:1px solid var(--linie);justify-items:center; } .fk__punkt{width:16px;height:16px;border-radius:5px;background:var(--linie);display:block} .fk__punkt--an{background:var(--signal)} .fk__inhalt{padding:16px 18px 18px;display:grid;gap:12px;align-content:start} .fk__kopf{display:flex;align-items:baseline;justify-content:space-between} .fk__kopf b{font-size:13px;line-height:18px;font-weight:600} .fk__kennung{font-size:10.5px;line-height:15px;color:var(--schrift-still)} .fk__reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .fk__feld{border:1px solid var(--linie);border-radius:10px;padding:9px 10px} .fk__feld em{display:block;font-style:normal;font-size:15px;line-height:20px;font-weight:600} .fk__feld span{font-size:10px;line-height:14px;color:var(--schrift-still)} .fk__karte{border:1px solid var(--linie);border-radius:12px;padding:12px;display:grid;gap:9px} .fk__karte--flach{padding:6px 12px} .fk__zeile{display:flex;align-items:baseline;justify-content:space-between} .fk__klein{font-size:10.5px;line-height:15px;color:var(--schrift-still)} .fk__anteil{font-size:10.5px;line-height:15px;font-weight:600;color:var(--signal)} .fk__balken{height:4px;border-radius:999px;background:var(--linie);overflow:hidden} .fk__balken i{display:block;height:100%;width:var(--f);background:var(--signal);border-radius:999px} .fk__frage{font-size:12.5px;line-height:17px;font-weight:600;margin:0} .fk__wahl{display:grid;grid-template-columns:1fr 1fr;gap:6px} .fk__wahl span{ font-size:10.5px;line-height:15px;padding:6px 8px;border-radius:7px; border:1px solid var(--linie);color:var(--schrift-still); } .fk__wahl .an{border-color:var(--signal);background:var(--signal-weich);color:var(--signal-tief);font-weight:600} .fk__liste{display:grid;gap:8px} .fk__liste li{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:16px} .fk__liste em{margin-left:auto;font-style:normal;font-size:9.5px;line-height:13px;font-weight:600; padding:2px 7px;border-radius:999px} .fk__liste .fertig{background:var(--signal-weich);color:var(--signal-tief)} .fk__liste .laeuft{background:rgb(21 22 26 / .06);color:var(--schrift-still)} .fk__saeulen{display:flex;align-items:flex-end;gap:6px;height:54px} .fk__saeulen i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:var(--linie-stark);display:block} .fk__saeulen .an{background:var(--signal)} .fk__anfrage{ display:flex;align-items:baseline;gap:8px;padding:7px 0; font-size:11px;line-height:15px;color:var(--schrift-still); } .fk__anfrage + .fk__anfrage{border-top:1px solid var(--linie)} .fk__anfrage b{font-size:11.5px;color:var(--schrift);font-weight:600} .fk__anfrage time{margin-left:auto;font-size:10px} .fk__anfrage--neu b::after{ content:"neu";margin-left:6px;font-size:9px;font-weight:600;padding:1px 6px; border-radius:999px;background:var(--signal);color:#fff;vertical-align:1px; } /* Bewegung: Balken, Säulen und Haken laufen beim Aufdecken einmal */ .blendet .schritt .fk__balken i{width:0;transition:width 900ms var(--kurve-aus) 300ms} .blendet .schritt.da .fk__balken i{width:var(--f)} .blendet .schritt .fk__saeulen i{height:0;transition:height 620ms var(--kurve-aus)} .blendet .schritt.da .fk__saeulen i{height:var(--h)} .blendet .schritt.da .fk__saeulen i:nth-child(1){transition-delay:260ms} .blendet .schritt.da .fk__saeulen i:nth-child(2){transition-delay:330ms} .blendet .schritt.da .fk__saeulen i:nth-child(3){transition-delay:400ms} .blendet .schritt.da .fk__saeulen i:nth-child(4){transition-delay:470ms} .blendet .schritt.da .fk__saeulen i:nth-child(5){transition-delay:540ms} .blendet .schritt.da .fk__saeulen i:nth-child(6){transition-delay:610ms} .blendet .schritt.da .fk__saeulen i:nth-child(7){transition-delay:680ms} .blendet .schritt .fk__liste li{opacity:0;transform:translateY(8px)} .blendet .schritt.da .fk__liste li{opacity:1;transform:none; transition:opacity 260ms linear, transform 420ms var(--kurve-aus)} .blendet .schritt.da .fk__liste li:nth-child(1){transition-delay:260ms} .blendet .schritt.da .fk__liste li:nth-child(2){transition-delay:360ms} .blendet .schritt.da .fk__liste li:nth-child(3){transition-delay:460ms} .blendet .schritt.da .fk__liste li:nth-child(4){transition-delay:560ms} .blendet .schritt .fk__anfrage{opacity:0;transform:translateY(8px)} .blendet .schritt.da .fk__anfrage{opacity:1;transform:none; transition:opacity 260ms linear, transform 420ms var(--kurve-aus)} .blendet .schritt.da .fk__anfrage:nth-child(2){transition-delay:420ms} .blendet .schritt.da .fk__anfrage:nth-child(3){transition-delay:560ms} @media (prefers-reduced-motion:reduce){ .blendet .schritt .fk__balken i{width:var(--f);transition:none} .blendet .schritt .fk__saeulen i{height:var(--h);transition:none} .blendet .schritt .fk__liste li,.blendet .schritt .fk__anfrage{opacity:1;transform:none;transition:none} } @media (max-width:680px){ .fenster-attrappe__koerper.fk{grid-template-columns:34px 1fr} .fk__inhalt{padding:12px 14px 14px} } /* Die drei Kennzahlenfelder nebeneinander hatten eine Mindestbreite, die bei 375 das ganze Fenster aufgeschoben hat. Rasterkinder duerfen nicht kleiner als ihr Inhalt werden, solange min-width auf auto steht. */ .fk__reihe > *,.fk__inhalt > *,.fk__karte > *{min-width:0} .fenster-attrappe,.schritt__bild{min-width:0} @media (max-width:560px){ .fk__reihe{grid-template-columns:1fr 1fr} .fk__reihe .fk__feld:last-child{grid-column:span 2} .fk__wahl{grid-template-columns:1fr} } /* ========================================================================== 39 · Vergleich, dritte Fassung Rafis Befund: unsere Karten sind voll breit, das Rot fehlt, das Kreuz ist zu gross. Beim Original sind es drei sichtbare Karten, die sich ueberlappen: links und rechts je eine weisse mit rotem Raster in der oberen Haelfte, in der Mitte die dunkle darueber. Bei mir war es eine grosse weisse Flaeche, in der keine Karte zu erkennen war. ========================================================================== */ .vergleich__feld{ background:none;border:0;box-shadow:none;padding:0; grid-template-columns:1fr 1.02fr 1fr;align-items:center; } .vspalte--aussen{ background:#fff;border:1px solid var(--linie);border-radius:24px; box-shadow:0 2px 36px rgb(0 0 0 / .05); padding:44px 40px;overflow:hidden; } .vraster{ background-image: repeating-linear-gradient(to right, rgb(209 73 91 / .22) 0 1px, transparent 1px 22px), repeating-linear-gradient(to bottom, rgb(209 73 91 / .22) 0 1px, transparent 1px 22px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .55) 38%, transparent 62%); mask-image:linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .55) 38%, transparent 62%); } /* Die Mittelkarte liegt ueber den beiden aeusseren, oben, unten und seitlich. */ .vspalte--wir{margin-block:-72px;margin-inline:-34px;z-index:3} /* Das Kreuz war 18 breit mit 1,8 starken Balken. Beim Original ist es ein duenner Strich. */ .vhaken{width:14px;height:14px} .vhaken--nein::before,.vhaken--nein::after{left:1px;top:6px;width:12px;height:1.4px} .vhaken--ja::after{left:1px;top:3px;width:8px;height:4px;border-width:1.8px} .vspalte--wir .vhaken::after{left:0;top:3px;width:10px;height:5px;border-width:2px} @media (max-width:900px){ .vergleich__feld{grid-template-columns:1fr;gap:20px} .vspalte--wir{margin-block:0;margin-inline:0} .vspalte--aussen{padding:28px 24px} } /* Das rote Raster war unsichtbar: die Regel .vspalte--aussen > * setzt alle direkten Kinder auf position:relative und z-index 1, und traf damit auch das Raster selbst. Aus absolut wurde relativ, also ein Element ohne Hoehe. Dazu lief der Text der Aussenkarten unter die Mittelkarte. */ .vspalte--aussen > .vraster{position:absolute;inset:0;z-index:0} .vergleich__feld .vspalte--aussen:first-child{padding-right:66px} .vergleich__feld .vspalte--aussen:last-child{padding-left:66px} @media (max-width:900px){ .vergleich__feld .vspalte--aussen:first-child, .vergleich__feld .vspalte--aussen:last-child{padding:28px 24px} } /* ========================================================================== 40 · Vergleich, vierte Fassung Der Unterschied zur Vorlage war die Naht. Dort liegt EINE weisse Flaeche mit EINER durchgehenden roten Textur darunter und die dunkle Karte darueber. Bei mir waren es zwei Karten mit eigenem Rand, eigenem Schatten und zwei Texturen, die an den Kartenkanten abrissen. Dadurch las sich das Ganze als Reihe statt als eine Flaeche mit herausgehobener Mitte. ========================================================================== */ .vergleich__feld{ position:relative;overflow:visible; background:#fff;border:1px solid var(--linie);border-radius:24px; box-shadow:0 2px 44px rgb(0 0 0 / .05); padding:52px 44px;grid-template-columns:1fr 1.04fr 1fr;align-items:center; } .vergleich__feld > .vraster{ position:absolute;inset:0;z-index:0;border-radius:24px;overflow:hidden; background-image: repeating-linear-gradient(to right, rgb(209 73 91 / .16) 0 1px, transparent 1px 20px), repeating-linear-gradient(to bottom, rgb(209 73 91 / .16) 0 1px, transparent 1px 20px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .5) 26%, transparent 48%); mask-image:linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .5) 26%, transparent 48%); } /* Die Aussenspalten sind keine eigenen Karten mehr, nur Textblöcke. */ .vspalte--aussen{ background:none;border:0;border-radius:0;box-shadow:none;overflow:visible; padding:0;position:relative;z-index:1; } .vergleich__feld .vspalte--aussen:first-child{padding-right:52px} .vergleich__feld .vspalte--aussen:last-child{padding-left:52px} /* Die Mittelkarte ragt deutlicher heraus und hat mehr Luft im Inneren. */ .vspalte--wir{ margin-block:-76px;margin-inline:-28px;z-index:3; padding:44px 36px 40px;border-radius:24px; box-shadow:0 40px 80px rgb(11 26 36 / .34); } .vspalte--wir li{padding:18px 0} .vspalte--wir h3{margin-bottom:22px} @media (max-width:900px){ .vergleich__feld{padding:24px;grid-template-columns:1fr;gap:20px} .vergleich__feld .vspalte--aussen:first-child, .vergleich__feld .vspalte--aussen:last-child{padding:0} .vspalte--wir{margin-block:0;margin-inline:0;padding:28px 24px} } /* Seit das Raster als erstes Kind im Feld liegt, trifft :first-child nicht mehr die erste Spalte. Deshalb stand das Polster zur Mitte wieder auf null und der Text lief unter die dunkle Karte. :first-of-type zaehlt nur die article-Elemente und ist gegen weitere Kinder unempfindlich. */ .vergleich__feld .vspalte--aussen:first-of-type{padding-right:84px} .vergleich__feld .vspalte--aussen:last-of-type{padding-left:84px} @media (max-width:900px){ .vergleich__feld .vspalte--aussen:first-of-type, .vergleich__feld .vspalte--aussen:last-of-type{padding:0} } /* ========================================================================== 41 · Fallkarten in der Auftaktbahn Aufbau nach Grabosch: Logoplatz oben, darunter ein bis drei Abzeichen mit Zeichen, dann eine zweifarbige Ueberschrift, unten das Bild. Die Karte behaelt ihre Masse aus der Bahn, 356 x 558. ========================================================================== */ .arbeit.fall{ background:#F1EFEA;overflow:hidden;display:flex;flex-direction:column; text-align:left; } .fall__kopf{padding:26px 26px 0;display:grid;gap:14px;align-content:start;position:relative;z-index:2} .fall__logo{height:22px;width:auto;display:block;object-fit:contain;object-position:left center} .fall__logo--wort{ height:22px;display:flex;align-items:center; font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.02em;color:var(--schrift); } .fall__abzeichen-reihe{display:flex;flex-wrap:wrap;gap:8px} .fall__abzeichen{ display:inline-flex;align-items:center;gap:7px; background:#fff;border-radius:999px;padding:7px 13px 7px 11px; font-size:12.5px;line-height:17px;font-weight:600;color:var(--schrift); box-shadow:0 1px 2px rgb(0 0 0 / .05); } .fall__abzeichen svg{width:15px;height:15px;flex:none;color:var(--schrift)} .fall__titel{ font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.018em; color:rgb(21 22 26 / .42);margin:2px 0 0; } .fall__titel b{font-weight:600;color:var(--schrift)} .fall__bild{ position:absolute;left:0;right:0;bottom:0;height:330px; display:flex;align-items:flex-end;justify-content:center;overflow:hidden; } .fall__foto{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block} .fall__fehlt{ width:100%;height:100%;display:grid;place-items:center;padding:24px; background:repeating-linear-gradient(45deg, rgb(21 22 26 / .035) 0 10px, transparent 10px 20px); } .fall__fehlt span{ font-size:12.5px;line-height:18px;color:var(--schrift-still);text-align:center;max-width:200px; } /* Attrappe „Anfrage" nach dem Muster der Vorlage, mit unserem I */ .mock{width:100%;height:100%;position:relative} .mock__blatt{position:absolute;background:#fff;border-radius:16px} .mock__blatt--hinten{left:34px;right:34px;top:14px;height:40px;opacity:.55} .mock__blatt--vorn{ left:20px;right:20px;top:30px;bottom:0;padding:22px; box-shadow:0 18px 40px rgb(0 0 0 / .10);display:grid;gap:12px;align-content:start; } .mock__marke{ width:34px;height:34px;border-radius:9px;background:var(--schrift);color:#fff; display:grid;place-items:center;font-size:19px;font-weight:700;line-height:1; } .mock__nummer{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.04em;margin:0} .mock__strich{display:block;height:10px;width:118px;border-radius:999px;background:rgb(21 22 26 / .08)} .mock__status{font-size:14px;font-weight:600;color:var(--signal);margin:4px 0 0} .mock__felder{display:grid;gap:9px;margin:0} .mock__felder div{display:flex;align-items:center;gap:14px} .mock__felder dt{font-size:13px;color:var(--schrift-still);width:52px;margin:0} .mock__felder dd{margin:0} .mock__felder i{display:block;height:9px;width:var(--b);border-radius:999px;background:rgb(21 22 26 / .08)} .mock__zettel{ position:absolute;right:26px;top:66px;width:84px;padding:12px; background:#fff;border-radius:10px;box-shadow:0 10px 26px rgb(0 0 0 / .12); display:grid;gap:6px; } .mock__punkt{width:11px;height:11px;border-radius:999px;background:rgb(21 22 26 / .14);display:block} .mock__zettel i{display:block;height:5px;width:var(--b);max-width:100%;border-radius:999px;background:rgb(21 22 26 / .09)} /* Attrappe „Anzeigen" nach dem Muster der letzten Vorlagenkarte */ .mock--ads{padding:0 18px 18px} .mock__anzeige{ position:absolute;background:#fff;border-radius:14px;padding:14px; box-shadow:0 14px 32px rgb(0 0 0 / .10);display:grid;gap:9px; } .mock__anzeige p{font-size:12.5px;line-height:17px;font-weight:600;margin:0} .mock__logozeile{font-size:11px;font-weight:700;letter-spacing:-.01em} .mock__knopf{ justify-self:start;font-size:11px;line-height:15px;font-weight:600; padding:6px 11px;border-radius:999px;background:var(--schrift);color:#fff; } .mock__knopf--hell{background:#fff;color:var(--schrift);box-shadow:inset 0 0 0 1px var(--linie-stark)} .mock__anzeige--1{left:16px;top:16px;width:188px} .mock__anzeige--2{right:10px;top:104px;width:184px} .mock__anzeige--3{left:8px;bottom:12px;width:176px;opacity:.9} @media (max-width:680px){ .fall__kopf{padding:20px 20px 0;gap:12px} .fall__titel{font-size:17px;line-height:23px} } /* ========================================================================== 42 · Fallkarten, zweite Fassung Gegen die Vorlage gehalten, Unterschied fuer Unterschied: Grund beige #F1EFEA -> helles Grau wie dort Abzeichen volle Pille -> abgerundetes Rechteck, Radius 10 Titel 19/26 lief unten aus der Karte -> 18/25 und feste Hoehe Bild sass mittig mit Rand -> fuellt die Karte bis an drei Kanten Logo unterschiedlich hoch -> einheitlich 20 mit Breitendeckel ========================================================================== */ .arbeit.fall{background:#F1F2F4;border-radius:20px} .fall__kopf{padding:24px 24px 0;gap:12px} .fall__logo{height:20px;max-width:190px} .fall__logo--wort{height:20px;font-size:16px;line-height:20px} .fall__abzeichen{ border-radius:10px;padding:6px 11px 6px 9px;gap:6px; font-size:12px;line-height:16px; } .fall__abzeichen svg{width:14px;height:14px} .fall__titel{ font-size:18px;line-height:25px;margin:4px 0 0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } /* Das Bild fuellt die Karte bis an die linke, rechte und untere Kante. Wie hoch es steht, rechnet seite.js: in der Mitte nur das untere Drittel, weiter aussen die ganze Karte, weil der Kopf dort weicht. */ /* Oben stoesst das Bild an den Text, unten an die Kartenkante. */ .fall__bild{border-radius:0 0 20px 20px} /* Wie in der Vorlage: das Foto fuellt die Flaeche und laeuft unten aus der Karte. Freigestellt wurde nichts mehr - dabei brachen die Haende mitten in der Luft ab. Stattdessen liegt der Studiogrund der Fotos auf dem Kartenton, deshalb sieht man keinen Kasten. */ .fall__foto{object-fit:cover;object-position:center bottom} .fall__fehlt{border-radius:0 0 20px 20px} /* Die gebauten Attrappen wachsen nicht mit, sie bleiben am unteren Rand. */ .fall__bild > .mock{position:absolute;left:0;right:0;bottom:0;height:330px} /* Die beiden gebauten Attrappen muessen in die neue Hoehe passen. */ .mock--anfrage{padding:0 18px} .mock__blatt--vorn{left:18px;right:18px;top:26px;bottom:18px;padding:18px;gap:10px} .mock__marke{width:30px;height:30px;border-radius:8px;font-size:17px} .mock__zettel{right:24px;top:56px;width:76px;padding:10px} .mock__anzeige--1{left:14px;top:12px;width:180px} .mock__anzeige--2{right:8px;top:96px;width:178px} .mock__anzeige--3{left:6px;bottom:14px;width:170px} /* Keine eigenen Telefonmasse mehr: die Karte wird als Ganzes skaliert, eine zweite Verkleinerung von innen wuerde die Masse doppelt stauchen. */ /* Zwei Ueberschriften brauchten eine vierte Zeile und wurden vom Deckel abgeschnitten. Manrope laeuft in 18 breiter als gerechnet. Eine Stufe kleiner, dafuer passt jeder Satz vollstaendig in drei Zeilen. */ .fall__titel{font-size:17px;line-height:24px} /* ========================================================================== 33b · Drei Wege, Nachlese am 29.10.2026 Fuenf Befunde aus dem Abgleich mit der Vorlage: Fahne oben rechts raus · Punkt hinter IMMENS in der Signalfarbe · Karten zu breit · Haken und Kreuz zu fett · Rot in der Ecke zu flaechig. ========================================================================== */ /* Der Punkt traegt dieselbe Farbe wie in der Wortmarke im Kopf. */ .vpunkt{color:var(--signal)} /* Haken und Kreuz als gezeichnete Striche statt als Rahmenecken. Mit Rahmenecken gebaut hat der Haken einen harten rechten Winkel und beide Zeichen wirkten fett. Als Maske sitzt die Strichstaerke genau. */ .vhaken{ width:19px;height:19px;flex:none;margin-top:0;position:relative; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } .vhaken::before,.vhaken::after{content:none} .vhaken--nein{ background:#F2374A; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } .vspalte--wir .vhaken--ja, .vhaken--ja{ background:#fff;border-radius:0; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"); } .vspalte li{gap:16px;align-items:center} /* Die Mittelkarte war breiter als in der Vorlage und die Aussenspalten liefen zu weit. In der Vorlage nachgemessen: Mitte 32 % des Feldes, die beiden Aussenspalten je 30 %. */ .vergleich__feld{grid-template-columns:1fr .86fr 1fr;padding:52px 56px} .vspalte--wir{margin-inline:-18px;padding:44px 34px 40px} .vergleich__feld .vspalte--aussen:first-of-type{padding-right:72px} .vergleich__feld .vspalte--aussen:last-of-type{padding-left:72px} /* Das Raster lag als Band ueber die ganze Breite und schob sich damit auch hinter die dunkle Karte. In der Vorlage sitzt es nur in den beiden oberen Ecken und laeuft nach innen aus. */ .vergleich__feld > .vraster{ background-image: repeating-linear-gradient(to right, rgb(242 55 74 / .13) 0 1px, transparent 1px 26px), repeating-linear-gradient(to bottom, rgb(242 55 74 / .13) 0 1px, transparent 1px 26px); -webkit-mask-image: radial-gradient(52% 62% at 0% 0%, #000 0%, rgb(0 0 0 / .45) 45%, transparent 78%), radial-gradient(52% 62% at 100% 0%, #000 0%, rgb(0 0 0 / .45) 45%, transparent 78%); mask-image: radial-gradient(52% 62% at 0% 0%, #000 0%, rgb(0 0 0 / .45) 45%, transparent 78%), radial-gradient(52% 62% at 100% 0%, #000 0%, rgb(0 0 0 / .45) 45%, transparent 78%); -webkit-mask-composite:source-over;mask-composite:add; } @media (max-width:900px){ .vergleich__feld{grid-template-columns:1fr;padding:24px} .vspalte--wir{margin-inline:0;padding:28px 24px} } /* ========================================================================== 40 · Rechtstexte: Impressum, Datenschutz, AGB Eine Spalte, enge Zeile, nichts Dekoratives. Diese Seiten werden gelesen oder ueberflogen, nicht angeschaut. ========================================================================== */ .rechtstext .innen{max-width:760px;padding-block:136px 96px} .rechtstext__zurueck{ display:inline-block;margin-bottom:40px; font-size:14px;line-height:20px;color:var(--schrift-still);text-decoration:none; } .rechtstext__zurueck:hover{color:var(--schrift)} .rechtstext h1{ font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);line-height:1.12; letter-spacing:-.025em;font-weight:600;margin:0 0 8px; } .rechtstext__stand{font-size:14px;line-height:20px;color:var(--schrift-still);margin:0 0 44px} .rechtstext h2{ font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.015em; margin:40px 0 12px; } .rechtstext h3{font-size:17px;line-height:25px;font-weight:600;margin:28px 0 8px} .rechtstext p,.rechtstext li{ font-size:16px;line-height:27px;color:var(--schrift-still);margin:0 0 14px; } .rechtstext strong,.rechtstext b{color:var(--schrift);font-weight:600} .rechtstext ul,.rechtstext ol{margin:0 0 14px;padding-left:22px} .rechtstext li{margin-bottom:8px} .rechtstext a{color:var(--signal);text-decoration:underline;text-underline-offset:2px} .rechtstext a:hover{color:var(--signal-tief)} .rechtstext table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px} .rechtstext th,.rechtstext td{ text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top; } .rechtstext th{font-weight:600;color:var(--schrift)} @media (max-width:680px){ .rechtstext .innen{padding-block:112px 64px} .rechtstext h2{margin-top:32px} } /* ========================================================================== 41 · Schwebende Buchung, unten rechts Nachbau der Vorlage aus Rafis Bild, mit einer Abweichung: der Rueckwaertszaehler und die Zeile "diese Woche kaum noch Plaetze" sind nicht uebernommen. Beides laeuft bei jedem Aufruf neu und behauptet eine Knappheit, die niemand nachhalten kann. Statt dessen steht dort, was wirklich gilt: die naechsten freien Tage, aus dem Datum gerechnet. ========================================================================== */ /* Knopf unten, Karte darueber: im Markup steht der Knopf zuerst, damit die Tastatur ihn zuerst erreicht. Die Reihenfolge im Bild dreht order um. */ .buchfeld{ position:fixed;right:24px;bottom:24px;z-index:900; display:flex;flex-direction:column;align-items:flex-end;gap:14px; } .buchfeld__karte{order:1} .buchfeld__knopf{order:2} .buchfeld__knopf{ width:54px;height:54px;border-radius:999px;cursor:pointer; background:var(--flaeche);color:var(--signal);border:1px solid var(--linie); display:grid;place-items:center; box-shadow:0 8px 22px rgb(11 26 36 / .12); transition:transform var(--aus) var(--kurve),box-shadow var(--aus) var(--kurve), border-color var(--aus) var(--kurve); } .buchfeld__knopf svg{width:22px;height:22px} .buchfeld__knopf:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgb(11 26 36 / .16)} .buchfeld[data-offen="true"] .buchfeld__knopf{border-color:var(--signal);box-shadow:0 8px 22px rgb(23 124 183 / .2)} .buchfeld__karte{ width:min(340px, calc(100vw - 48px)); background:var(--flaeche);border:1px solid var(--linie);border-radius:22px; box-shadow:0 26px 60px rgb(11 26 36 / .18);padding:22px 22px 18px; display:grid;gap:12px;position:relative; transform-origin:bottom right; } .buchfeld__karte[hidden]{display:none} .buchfeld[data-offen="true"] .buchfeld__karte{animation:buchfeld-auf 260ms var(--kurve) both} @keyframes buchfeld-auf{ from{opacity:0;transform:translateY(10px) scale(.96)} to{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .buchfeld[data-offen="true"] .buchfeld__karte{animation:none} } .buchfeld__zu{ position:absolute;top:16px;right:16px;width:28px;height:28px;border:0;border-radius:999px; background:none;color:var(--schrift-still);display:grid;place-items:center;cursor:pointer; } .buchfeld__zu svg{width:16px;height:16px} .buchfeld__zu:hover{background:rgb(21 22 26 / .05);color:var(--schrift)} .buchfeld__person{display:flex;align-items:center;gap:12px} .buchfeld__bild{position:relative;flex:none} /* Eigener Name: .kreis war im Fuss schon als absolut gesetztes Zierstueck vergeben und hat die Initialen auf null Breite gezogen. */ .buchfeld__initialen{ width:38px;height:38px;border-radius:999px;display:grid;place-items:center; background:var(--signal-weich);color:var(--signal-tief); font-size:15px;line-height:1;font-weight:600;letter-spacing:.01em; } .buchfeld__ampel{ position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:999px; background:#2FBF5B;border:2.5px solid var(--flaeche);display:block; } .buchfeld__wer{display:grid;line-height:1.3} .buchfeld__wer b{font-size:14px;font-weight:600;color:var(--schrift)} .buchfeld__wer small{font-size:12.5px;color:var(--schrift-still)} .buchfeld__titel{font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.018em;margin:2px 0 0} .buchfeld__satz{font-size:14px;line-height:21px;color:var(--schrift-still);margin:0} .buchfeld__zeile{ font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em; color:var(--schrift-still);margin:4px 0 0;text-transform:none; } .buchfeld__tage{display:grid;grid-template-columns:repeat(5,1fr);gap:7px} .buchfeld__tag{ border:1px solid var(--linie);border-radius:11px;padding:8px 4px; display:grid;justify-items:center;gap:1px;background:var(--flaeche); text-decoration:none;color:var(--schrift); transition:border-color var(--aus) var(--kurve),background-color var(--aus) var(--kurve); } .buchfeld__tag span{font-size:11.5px;line-height:15px;color:var(--schrift-still)} .buchfeld__tag b{font-size:16px;line-height:21px;font-weight:600} .buchfeld__tag:hover{border-color:var(--signal);background:var(--signal-weich)} .buchfeld__tag[data-zu]{opacity:.42;pointer-events:none} .buchfeld__haupt{width:100%;justify-content:center;margin-top:4px} .buchfeld__haupt svg{width:17px;height:17px} .buchfeld__neben{ display:inline-flex;align-items:center;justify-content:center;gap:7px; font-size:14px;line-height:20px;color:var(--schrift-still);text-decoration:none; padding:9px 0 2px; } .buchfeld__neben svg{width:15px;height:15px} .buchfeld__neben:hover{color:var(--schrift)} @media (max-width:680px){ .buchfeld{right:16px;bottom:16px} .buchfeld__knopf{width:52px;height:52px} } @media print{ .buchfeld{display:none} } /* Fenster des Kalenderdienstes auf der Terminseite */ .buchung{min-height:420px} .buchung__vorhang{ border:1px dashed var(--linie-stark);border-radius:18px;padding:28px 24px; display:grid;justify-items:start;gap:14px;background:var(--flaeche-still); } .buchung__zeichen{width:26px;height:26px;color:var(--schrift-still)} .buchung__text{font-size:15px;line-height:23px;color:var(--schrift-still);margin:0;max-width:46ch} .buchung__klein{font-size:13px;line-height:20px;color:var(--schrift-still);margin:2px 0 0;max-width:46ch} .buchung__fenster{min-width:300px;height:660px} @media (max-width:680px){ .buchung__fenster{height:720px} } /* ========================================================================== 42 · Webdesign und Branding, Raster nach Rafis Vorlage Dort dunkel, bei uns hell: Karte weiss, Buehne im Kartengrau, Blaetter weiss mit weichem Schatten, Akzent in der Signalfarbe. Alle fuenf Buehnen sind gebaut, es kommt kein Bild dazu. ========================================================================== */ .handwerk{background:var(--grund)} .handwerk .innen{padding-block:96px} .handwerk__kopf{display:grid;justify-items:center;text-align:center;gap:10px;max-width:720px;margin:0 auto 56px} .handwerk__titel{ font-size:clamp(2.1rem,1.6rem + 2vw,3.25rem);line-height:1.06; letter-spacing:-.026em;font-weight:600;margin:0; } .handwerk__kopf .vorspann{font-size:18px;line-height:1.55;margin:6px 0 0} /* Sechs Spalten: oben zwei Halbe, unten ein Hohes und zwei Breite. */ .hraster{display:grid;grid-template-columns:repeat(6,1fr);gap:20px} .hfeld--seiten{grid-column:1 / 4} .hfeld--text {grid-column:4 / 7} .hfeld--pflege{grid-column:1 / 3;grid-row:span 2} .hfeld--marke {grid-column:3 / 7} .hfeld--suche {grid-column:3 / 7} .hfeld{ background:var(--flaeche);border:1px solid var(--linie);border-radius:22px; padding:18px 18px 24px;display:flex;flex-direction:column;gap:18px; box-shadow:0 2px 30px rgb(0 0 0 / .04); } .hfeld__text{padding:0 8px;display:grid;gap:8px;align-content:start} .hfeld__text h3{font-size:21px;line-height:28px;font-weight:600;letter-spacing:-.02em;margin:0} .hfeld__text p{font-size:15px;line-height:23px;color:var(--schrift-still);margin:0} /* --- Buehne, gemeinsame Teile ------------------------------------------- */ .hbuehne{ position:relative;height:216px;border-radius:16px;overflow:hidden; background: radial-gradient(130% 110% at 20% 0%, #fff 0%, rgb(255 255 255 / 0) 64%), #F1F2F4; } .hbuehne--hoch{height:auto;flex:1;min-height:420px} .hb__zeile{display:block;height:7px;border-radius:999px;background:rgb(21 22 26 / .11);width:var(--b,70%)} .hb__titel{display:block;height:9px;width:46%;border-radius:999px;background:var(--signal)} /* --- 1 Webseiten: drei Platten, vorn ein Fenster ------------------------- */ .hb__platte{ position:absolute;border-radius:12px;background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / .06); } .hb__platte--links {left:22px;top:30px;width:150px;height:150px;opacity:.75} .hb__platte--rechts{right:22px;top:22px;width:160px;height:166px;opacity:.75} .hb__fenster{ position:absolute;left:50%;top:22px;transform:translateX(-50%); width:206px;padding:0 0 16px;border-radius:12px;background:#fff; box-shadow:0 14px 34px rgb(11 26 36 / .14);display:grid;gap:9px;justify-items:start; } .hb__fenster > *{margin-left:16px} .hb__leiste{ display:flex;gap:5px;align-items:center;width:100%;margin:0 !important; padding:9px 0 9px 14px;border-bottom:1px solid var(--linie); } .hb__leiste i{width:6px;height:6px;border-radius:999px;background:rgb(21 22 26 / .16)} .hb__knopf{display:block;height:17px;width:70px;border-radius:999px;background:var(--signal)} .hb__kacheln{display:flex;gap:8px;margin-top:2px} .hb__kacheln i{width:64px;height:46px;border-radius:9px;background:rgb(21 22 26 / .07)} .hb__kacheln i.an{background:var(--signal-weich)} /* --- 2 Texte: Blatt mit zwei Pillen -------------------------------------- */ .hb__blatt{ position:absolute;left:46px;right:26px;top:22px; background:#fff;border-radius:12px;padding:16px; box-shadow:0 10px 28px rgb(11 26 36 / .10);display:grid;gap:9px; } .hb__pille{ position:absolute;display:flex;align-items:center;gap:8px; padding:7px 14px 7px 8px;border-radius:999px;background:#fff; box-shadow:0 6px 18px rgb(11 26 36 / .12); } .hb__pille i{width:15px;height:15px;border-radius:999px;background:var(--signal)} .hb__pille b{display:block;height:6px;width:52px;border-radius:999px;background:rgb(21 22 26 / .13)} .hb__pille--1{left:18px;top:58px} .hb__pille--2{right:16px;top:116px} .hb__balken{ position:absolute;left:92px;bottom:24px;width:104px;height:22px; border-radius:999px;background:var(--signal-weich); } /* --- 3 Pflege: hohe Posten-Tafel ----------------------------------------- */ .hb__tafel{ position:absolute;left:20px;right:20px;top:20px;bottom:20px; background:#fff;border-radius:14px;padding:14px; box-shadow:0 10px 28px rgb(11 26 36 / .10); display:grid;grid-template-rows:auto repeat(9,1fr);gap:8px;align-content:stretch; } .hb__kopfzeile{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px} .hb__kopfzeile i{display:block;height:8px;width:54%;border-radius:999px;background:rgb(21 22 26 / .13)} .hb__kopfzeile b{display:block;height:14px;width:48px;border-radius:999px;background:var(--signal)} .hb__posten{ display:flex;align-items:center;gap:10px; background:var(--flaeche-still,#F6F7F9);border-radius:9px;padding:9px 10px; } .hb__posten i{ width:15px;height:15px;border-radius:999px;flex:none; background:rgb(21 22 26 / .10);position:relative; } .hb__posten b{display:block;height:6px;border-radius:999px;background:rgb(21 22 26 / .12);width:var(--b,60%)} .hb__posten.erledigt i{background:var(--signal)} .hb__posten.erledigt i::after{ content:"";position:absolute;left:4px;top:5px;width:6px;height:3px; border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg); } /* --- 4 Marke: Brett mit Zeichen, Schrift und Farben ---------------------- */ /* Das Brett ist hoeher als die Standardbuehne. Statt es zu beschneiden bekommt dieses eine Feld eine hoehere Buehne. */ .hfeld--marke .hbuehne{height:264px} .hb__brett{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(420px,64%);background:#fff;border-radius:14px;padding:22px; box-shadow:0 12px 32px rgb(11 26 36 / .12);display:grid;gap:11px; } .hb__zeichen{ width:56px;height:56px;border-radius:14px;background:var(--signal);color:#fff; display:grid;place-items:center;font-size:27px;line-height:1;font-weight:700;letter-spacing:-.03em; } .hb__schrift{display:flex;align-items:center;gap:10px} .hb__schrift b{font-size:30px;line-height:1;font-weight:700;letter-spacing:-.03em} .hb__schrift i{display:block;height:6px;border-radius:999px;background:rgb(21 22 26 / .12);width:var(--b,60%)} .hb__farben{display:flex;gap:7px} .hb__farben i{ width:44px;height:44px;border-radius:11px;background:var(--f); box-shadow:inset 0 0 0 1px rgb(21 22 26 / .07); } /* --- 5 Suche: Feld, Treffer mit Rang und drei Ringen --------------------- */ .hb__suche{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);display:grid;gap:10px} .hb__feld{ display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px; padding:11px 16px;box-shadow:0 2px 8px rgb(11 26 36 / .07);color:var(--schrift-still); } .hb__feld svg{width:15px;height:15px;flex:none} .hb__feld i{display:block;height:6px;flex:1;border-radius:999px;background:rgb(21 22 26 / .11)} .hb__treffer{ display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px; background:#fff;border:1px solid var(--signal-weich);border-radius:12px;padding:12px 14px; box-shadow:0 8px 22px rgb(11 26 36 / .08); } .hb__rang{ width:22px;height:22px;border-radius:7px;background:var(--signal);color:#fff; display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1; } .hb__name{font-size:12.5px;line-height:17px;font-weight:600;color:var(--schrift);white-space:nowrap} .hb__ringe{display:flex;gap:-6px;justify-self:end} .hb__ringe i{ width:17px;height:17px;border-radius:999px;border:1.6px solid var(--signal);margin-left:-6px; } .hb__treffer .hb__zeile{grid-column:1 / -1;margin-top:2px} .hb__treffer--matt{ grid-template-columns:auto 1fr;border-color:var(--linie);box-shadow:none;opacity:.7; } .hb__kasten{width:22px;height:22px;border-radius:7px;background:rgb(21 22 26 / .09)} @media (max-width:1000px){ .hraster{grid-template-columns:repeat(2,1fr)} .hfeld--seiten,.hfeld--text,.hfeld--marke,.hfeld--suche{grid-column:span 1} .hfeld--pflege{grid-column:span 2;grid-row:auto} .hbuehne--hoch{min-height:300px} } @media (max-width:680px){ .handwerk .innen{padding-block:72px} .handwerk__kopf{margin-bottom:40px} .hraster{grid-template-columns:1fr} .hfeld--pflege{grid-column:span 1} .hbuehne{height:200px} .hbuehne--hoch{min-height:280px} } @media (max-width:680px){ .hfeld--marke .hbuehne{height:248px} .hb__brett{width:86%;padding:18px;gap:9px} .hb__zeichen{width:46px;height:46px;border-radius:12px;font-size:22px} .hb__farben i{width:34px;height:34px;border-radius:9px} .hb__schrift b{font-size:24px} } /* ========================================================================== 43 · Fusszeile nach Rafis Vorlage Fuenf Spalten: Marke mit Satz und Abzeichen, drei Linkspalten, rechts die Kontaktwege als Zeilen mit rundem Zeichen. Darunter eine gepunktete Naht, eine Aufrufzeile und die Rechtszeile. ========================================================================== */ .fuss{border-top:1px solid var(--linie);background:var(--grund)} .fuss .innen{padding-block:72px 40px} .fuss__gitter{ display:grid;grid-template-columns:1.35fr .8fr 1.1fr .7fr 1.5fr; gap:36px;padding-block:0;align-items:start; } .fuss__marke{display:grid;gap:16px;align-content:start;max-width:300px} .fuss__marke img{display:block;height:29px;width:auto} .fuss__marke p{font-size:14.5px;line-height:22px;color:var(--schrift-still);margin:0} .fuss__abzeichen{ display:inline-flex;align-items:center;gap:8px;justify-self:start; border:1px solid var(--linie-stark);border-radius:999px;padding:8px 14px 8px 11px; font-size:13px;line-height:18px;font-weight:600;color:var(--schrift);text-decoration:none; transition:background-color var(--an) var(--kurve); } .fuss__abzeichen svg{width:15px;height:15px} .fuss__abzeichen:hover{background:rgb(21 22 26 / .04)} .fuss h4{ margin:0 0 16px;font-size:13px;line-height:18px;font-weight:600; color:var(--schrift-still);letter-spacing:.01em; } .fuss__spalte ul{list-style:none;margin:0;padding:0} .fuss li + li{margin-top:10px} .fuss li a{ font-size:14.5px;line-height:21px;color:var(--schrift);text-decoration:none; transition:color var(--an) var(--kurve); } .fuss li a:hover{color:var(--signal)} .fuss__draht{display:grid;gap:12px;align-content:start} .fuss__wer{display:flex;align-items:center;gap:11px;margin-bottom:2px} .fuss__initialen{ width:40px;height:40px;border-radius:999px;display:grid;place-items:center;flex:none; background:var(--signal-weich);color:var(--signal-tief); font-size:14px;line-height:1;font-weight:600; } .fuss__wer b{display:block;font-size:14.5px;line-height:20px;font-weight:600;color:var(--schrift)} .fuss__wer small{display:block;font-size:13px;line-height:18px;color:var(--schrift-still)} /* Die Mailadresse ist lang: nicht umbrechen lassen, lieber eine Spur kleiner setzen. Umgebrochen rutschte der Pfeil von der Zeile weg. */ .fuss__weg{ display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap; font-size:14px;line-height:21px;color:var(--schrift); } .fuss__rund{ width:38px;height:38px;border-radius:999px;flex:none;display:grid;place-items:center; border:1px solid var(--linie-stark);color:var(--schrift); transition:background-color var(--an) var(--kurve),border-color var(--an) var(--kurve); } .fuss__rund svg{width:17px;height:17px} .fuss__pfeil{width:13px;height:13px;color:var(--schrift-still);flex:none} .fuss__weg:hover .fuss__rund{background:var(--signal-weich);border-color:var(--signal-weich)} .fuss__weg:hover{color:var(--signal)} .fuss__naht{ height:1px;margin:52px 0 28px; background-image:linear-gradient(to right, var(--linie-stark) 0 4px, transparent 4px 10px); background-size:10px 1px; } .fuss__unten{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .fuss__aufruf{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-size:17px;line-height:24px;font-weight:600;letter-spacing:-.015em;color:var(--schrift); } .fuss__aufruf svg{width:15px;height:15px;color:var(--signal)} .fuss__aufruf:hover{color:var(--signal)} .fuss__ki{display:flex;align-items:center;gap:10px} .fuss__ki > span{font-size:13.5px;line-height:19px;color:var(--schrift-still)} .fuss__kiknopf{ width:36px;height:36px;border-radius:999px;display:grid;place-items:center; border:1px solid var(--linie-stark);text-decoration:none; font-size:11.5px;line-height:1;font-weight:700;letter-spacing:.01em;color:var(--schrift-still); transition:background-color var(--an) var(--kurve),color var(--an) var(--kurve); } .fuss__kiknopf:hover{background:var(--signal-weich);color:var(--signal-tief);border-color:var(--signal-weich)} .fuss__recht{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:36px;padding-top:0;border-top:0; font-size:13px;line-height:19px;color:var(--schrift-still); } .fuss__rechtlinks{display:flex;gap:20px} .fuss__recht a{color:var(--schrift-still);text-decoration:none} .fuss__recht a:hover{color:var(--schrift)} @media (max-width:1100px){ .fuss__gitter{grid-template-columns:1.4fr 1fr 1fr;gap:36px 32px} .fuss__draht{grid-column:span 3} } @media (max-width:680px){ .fuss .innen{padding-block:56px 32px} .fuss__gitter{grid-template-columns:1fr;gap:32px} .fuss__draht{grid-column:auto} .fuss__naht{margin:36px 0 24px} .fuss__unten{align-items:flex-start;flex-direction:column;gap:20px} .fuss__aufruf{font-size:16px} } /* ========================================================================== 44 · Referenzseite Kopf mit Logoband und Versprechen, darunter ein Raster aus Fallkarten. Zwei Sorten: mit Geraetebild und, wo kein Bild da ist, mit Wortmarke auf dem Kartengrund. Keine Ergebniszahlen, keine Stimmen. ========================================================================== */ .arbeiten .innen{padding-block:136px 96px} .arbeiten__kopf{display:grid;justify-items:center;text-align:center;gap:14px;max-width:760px;margin:0 auto 64px} .arbeiten__band{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px; margin-bottom:14px; } .arbeiten__band img{height:22px;width:auto;opacity:.5;filter:grayscale(1)} .arbeiten__titel{ font-size:clamp(2.2rem,1.6rem + 2.4vw,3.5rem);line-height:1.06; letter-spacing:-.028em;font-weight:600;margin:0; } .arbeiten__kopf .vorspann{font-size:18px;line-height:1.55;margin:4px 0 10px} .arbeiten__raster{display:grid;grid-template-columns:1fr 1fr;gap:24px} .akarte{ background:var(--flaeche);border:1px solid var(--linie);border-radius:24px; overflow:hidden;display:flex;flex-direction:column; box-shadow:0 2px 34px rgb(0 0 0 / .05); } .akarte__buehne{ height:320px;background:#F1F2F4;overflow:hidden; display:flex;align-items:center;justify-content:center; } .akarte__buehne img{width:100%;height:100%;object-fit:cover;object-position:center 26%;display:block} .akarte__text{padding:26px 28px 30px;display:grid;gap:10px;align-content:start} .akarte__marken{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:2px} .akarte__marke{ display:inline-flex;align-items:center; background:var(--signal-weich);color:var(--signal-tief);border-radius:999px; padding:5px 11px;font-size:12px;line-height:16px;font-weight:600; } .akarte__text h2{font-size:23px;line-height:30px;font-weight:600;letter-spacing:-.022em;margin:0} .akarte__text p{font-size:15px;line-height:23px;color:var(--schrift-still);margin:0} .akarte__weg{ display:inline-flex;align-items:center;gap:7px;justify-self:start;margin-top:6px; font-size:14.5px;line-height:20px;font-weight:600;color:var(--schrift);text-decoration:none; } .akarte__weg svg{width:14px;height:14px;color:var(--signal)} .akarte__weg:hover{color:var(--signal)} .arbeiten__fuss{ display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap; margin-top:48px;padding-top:32px;border-top:1px solid var(--linie); } .arbeiten__fuss p{font-size:15px;line-height:23px;color:var(--schrift-still);margin:0;max-width:52ch} @media (max-width:900px){ .arbeiten__raster{grid-template-columns:1fr} .akarte__buehne{height:280px} } @media (max-width:680px){ .arbeiten .innen{padding-block:112px 72px} .arbeiten__band{gap:22px} .arbeiten__band img{height:18px} .akarte__text{padding:22px 22px 26px} } /* --- 43b · Fuss, Nachlese gegen die Vorlage ------------------------------ Dazugekommen: hervorgehobener erster Menuepunkt, Spalte "Fuer wen", Logostapel neben dem Aufruf, benannte KI-Knoepfe und ein Siegel in der Rechtszeile. Weggelassen: Trustpilot-Wertung und Partner-Abzeichen, fuer beides gibt es keinen Beleg, und die Spalte "Folgen", weil die Profiladressen fehlen. */ .fuss__hervor{ display:inline-flex;align-items:center;gap:7px; border:1px solid var(--signal);border-radius:10px;padding:7px 11px; color:var(--signal) !important;font-weight:600; transition:background-color var(--an) var(--kurve); } .fuss__hervor svg{width:14px;height:14px;flex:none} .fuss__hervor:hover{background:var(--signal-weich)} .fuss__spalte li:first-child:has(.fuss__hervor){margin-bottom:4px} .fuss__arbeiten{display:grid;gap:12px;justify-items:start} /* Gestapelte Kreise wie in der Vorlage gehen nur mit Gesichtern. Unsere Kunden haben Wortmarken, die darin unlesbar werden. Also eine Reihe. */ .fuss__stapel{display:flex;align-items:center;flex-wrap:wrap;gap:22px} .fuss__stapel img{height:17px;width:auto;filter:grayscale(1);opacity:.45} .fuss__kiknopf{ width:auto;height:32px;border-radius:999px;padding:0 13px; font-size:12.5px;font-weight:600;letter-spacing:0; } .fuss__recht{align-items:center} .fuss__rechtlinks{flex-wrap:wrap;align-items:center;row-gap:8px} .fuss__siegel{ display:inline-flex;align-items:center;gap:10px; border:1px solid var(--linie-stark);border-radius:12px;padding:8px 14px 8px 10px; } .fuss__flagge{ width:22px;height:22px;border-radius:999px;flex:none; background:linear-gradient(180deg,#15161A 0 33.3%,#D7141A 33.3% 66.6%,#F2C200 66.6% 100%); } .fuss__siegel b{display:block;font-size:12.5px;line-height:16px;font-weight:600;color:var(--schrift)} .fuss__siegel small{display:block;font-size:11.5px;line-height:15px;color:var(--schrift-still)} /* Untergrenze noetig: dieser Block steht hinter dem 680er und hat ihn sonst ueberschrieben. Die Spalten blieben am Telefon stehen und der Fuss lief 76 Punkte aus der Seite. */ @media (min-width:681px) and (max-width:1100px){ .fuss__gitter{grid-template-columns:1.3fr 1fr 1fr} .fuss__draht{grid-column:span 3} } @media (max-width:680px){ .fuss__recht{align-items:flex-start;flex-direction:column;gap:18px} .fuss__rechtlinks{gap:14px} /* Logoreihe und KI-Knoepfe umbrechen lassen. Ohne min-width:0 waechst das Gitterfeld auf seine Inhaltsbreite und schiebt die Seite auf. */ .fuss__arbeiten,.fuss__ki{min-width:0;max-width:100%;flex-wrap:wrap} .fuss__stapel{gap:16px} .fuss__stapel img{height:15px} .fuss__ki{row-gap:10px} .fuss__ki > span{width:100%} } /* --- 41b · Buchungsfeld kraeftiger --------------------------------------- Die erste Fassung war zu zaghaft: schwarzer Hauptknopf, nackter Nebenlink, duenne Karte. Jetzt traegt der Hauptknopf die Signalfarbe wie der Starter darunter, der Nebenweg ist eine Pille, und eine Zeile mit Fortschritts- balken gibt der Karte Koerper. Der Rueckwaertszaehler der Vorlage bleibt draussen: er laeuft bei jedem Aufruf neu und behauptet eine Knappheit, die niemand nachhaelt. */ /* Eine Stufe kleiner als der erste Wurf: die Karte stand groesser da als in der Vorlage und die Ueberschrift brach dadurch um. */ .buchfeld__karte{ width:min(314px, calc(100vw - 40px)); padding:19px 19px 16px;gap:11px;border-radius:21px; box-shadow:0 26px 60px rgb(11 26 36 / .2); } /* Eine Stufe kleiner, damit die Zeile nicht umbricht. In der Vorlage steht sie auf einer Zeile, umgebrochen wirkt die Karte hoeher. */ .buchfeld__titel{font-size:16px;line-height:22px;letter-spacing:-.026em;margin:2px 0 0;text-wrap:balance} .buchfeld__satz{font-size:13.5px;line-height:20px} .buchfeld__zeile{ border:1px solid var(--linie);border-radius:14px;padding:0;overflow:hidden;background:var(--flaeche); } .buchfeld__balken{display:block;height:4px;background:var(--linie)} .buchfeld__balken i{display:block;height:100%;width:62%;background:var(--signal);border-radius:0 999px 999px 0} /* Die Zeile traegt jetzt nur noch den Hinweis, keine zweite Angabe. Der Balken bleibt als ruhige Markierung, ohne Rueckwaertszaehler. */ .buchfeld__zeileninhalt{ display:flex;align-items:center;gap:10px;padding:10px 12px; } .buchfeld__zeileninhalt span{font-size:13px;line-height:18px;font-weight:500;color:var(--schrift)} .buchfeld__zeileninhalt b{font-size:13.5px;line-height:18px;font-weight:600;color:var(--schrift)} .buchfeld__tage{gap:6px} .buchfeld__tag{border-radius:10px;padding:7px 3px} .buchfeld__tag b{font-size:15px;line-height:20px} .buchfeld__tag span{font-size:10.5px;line-height:14px} .buchfeld__haupt{ display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%; background:var(--signal);color:#fff;border-radius:999px;padding:12px 16px; font-size:14.5px;line-height:19px;font-weight:600;letter-spacing:-.01em;text-decoration:none; box-shadow:0 10px 24px rgb(23 124 183 / .3); transition:background-color var(--an) var(--kurve); } .buchfeld__haupt svg{width:16px;height:16px} .buchfeld__haupt:hover{background:var(--signal-tief)} .buchfeld__neben{ display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%; border:1px solid var(--linie-stark);border-radius:999px;padding:10px 16px; font-size:13.5px;line-height:19px;font-weight:600;color:var(--schrift);text-decoration:none; transition:background-color var(--an) var(--kurve); } .buchfeld__neben svg{width:15px;height:15px;color:var(--signal)} .buchfeld__neben:hover{background:rgb(21 22 26 / .04);color:var(--schrift)} /* --- 45 · Stapelordnung richtiggestellt --------------------------------- Die Kopfleiste stand auf 50, die Karten der Bahn bekommen von seite.js bis zu 100. Dadurch schoben sie sich beim Scrollen ueber die Leiste. Leiste und Buchungsfeld gehoeren ueber alles, was im Fluss liegt. */ .kopf{z-index:900} .buchfeld{z-index:950} .bahn-karten__spur{z-index:1} /* --- 42b · Buehnen in Form gebracht -------------------------------------- Gemessen am 30.10.2026: die Markentafel fuellte 420 von 755 Punkten und stand verloren in der Flaeche, die Suche dagegen 707 von 755 und war ueber die ganze Breite gezerrt. Beide bekommen jetzt eine Hoechstbreite und stehen mittig, das Fenster der ersten Karte wird groesser. */ /* 1 Webseiten: Fenster und Platten eine Nummer groesser */ .hb__fenster{width:238px;top:18px} .hb__platte--links {left:12px;top:26px;width:172px;height:164px} .hb__platte--rechts{right:12px;top:18px;width:182px;height:180px} .hb__kacheln i{width:74px;height:50px} /* 4 Marke: zweispaltig, damit die Breite getragen wird */ .hb__brett{ width:min(560px,86%);padding:24px 26px; grid-template-columns:auto 1fr;grid-template-rows:auto auto; column-gap:22px;row-gap:14px;align-items:center; } .hb__zeichen{grid-row:1 / 3;align-self:center;width:72px;height:72px;border-radius:18px;font-size:34px} .hb__schrift{grid-column:2;align-self:end} .hb__farben{grid-column:2;align-self:start} .hb__brett > .hb__zeile{display:none} /* 5 Auffindbarkeit: Komposition mittig, nicht ueber die ganze Breite */ .hb__suche{left:50%;right:auto;transform:translate(-50%,-50%);width:min(520px,82%)} /* Die Zeilen neben dem Aa liefen bis an den Brettrand und liessen die rechte Haelfte leer wirken. Kuerzer, dafuer sitzt die Gruppe zusammen. */ .hb__brett{width:min(470px,80%)} .hb__schrift{gap:12px} .hb__schrift i:nth-of-type(1){width:84px} .hb__schrift i:nth-of-type(2){width:58px} .hb__farben{gap:8px} .hb__farben i{width:40px;height:40px} /* --- 44b · Projektkarten auf der Referenzseite --------------------------- Raster nach Rafis Vorlage: oben zwei breite, in der Mitte drei schmale, unten wieder zwei breite. Jede Karte traegt wie bei Grabosch Leistung, Ueberschrift und einen Ergebnisabsatz. Keine Links: zwei der sieben Seiten sind nicht oeffentlich erreichbar, ein halber Satz Knoepfe waere schlechter als gar keiner. */ .arbeiten__raster{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:stretch} .pkarte{grid-column:span 2} .pkarte--gross{grid-column:span 3} .pkarte{ display:flex;flex-direction:column;gap:24px; background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:24px; box-shadow:0 1px 2px rgb(0 0 0 / .04); } .pkarte__buehne{display:block;border-radius:12px;overflow:hidden;background:#F1F2F4;aspect-ratio:1250 / 950} .pkarte__buehne img{width:100%;height:100%;object-fit:cover;display:block} .pkarte__text{display:flex;flex-direction:column;gap:24px;padding:0;flex:1} .pkarte__marken{display:flex;flex-wrap:wrap;gap:6px} .pkarte__marke{ display:inline-flex;align-items:center;background:rgb(0 0 0 / .05);color:var(--schrift-still); border-radius:999px;padding:5px 11px;font-size:12px;line-height:16px;font-weight:500; } .pkarte__text h2{ font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.018em;margin:0; } .pkarte__ergebnis{ margin:0;font-size:14px;line-height:20px;color:var(--schrift-still);flex:1; } .pkarte__ergebnis b{ display:block;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.05em; text-transform:uppercase;color:var(--signal);margin-bottom:4px; } .pkarte__marke-zeile{display:flex;align-items:center;height:36px;margin:0} .pkarte__marke-zeile img{width:auto;display:block;object-fit:contain} .pkarte__name{font-size:16px;line-height:22px;font-weight:700;letter-spacing:-.02em;color:var(--schrift)} @media (max-width:1000px){ .arbeiten__raster{grid-template-columns:repeat(2,1fr)} .pkarte,.pkarte--gross{grid-column:span 1} } @media (max-width:640px){ .arbeiten__raster{grid-template-columns:1fr} .pkarte,.pkarte--gross{grid-column:span 1} } /* ========================================================================== 42c · Buehnen mit beschriftetem Inhalt Die grauen Balken sind raus, die Buehnen tragen jetzt echte Zeilen. Dieser Block setzt sie; er steht hinter allen frueheren und gewinnt damit. ========================================================================== */ /* --- 1 Objektseite im Browserfenster ------------------------------------ */ .hb__fenster{ position:absolute;left:50%;top:20px;transform:translateX(-50%); width:272px;padding:0 0 14px;border-radius:12px;background:#fff; box-shadow:0 14px 34px rgb(11 26 36 / .14);display:block; } .hb__fenster > *{margin-left:0} .hb__leiste{ display:flex;align-items:center;gap:5px;width:100%;margin:0; padding:8px 12px;border-bottom:1px solid var(--linie); } .hb__leiste i{width:6px;height:6px;border-radius:999px;background:rgb(21 22 26 / .16);flex:none} .hb__leiste em{ font-style:normal;margin-left:8px;font-size:9.5px;line-height:13px; color:var(--schrift-still);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .hb__inhalt{display:grid;gap:9px;padding:13px 14px 0} .hb__ueber{ display:block;font-size:13px;line-height:18px;font-weight:600; letter-spacing:-.015em;color:var(--schrift); } .hb__preis{ display:inline-flex;align-self:start;background:var(--signal-weich);color:var(--signal-tief); border-radius:999px;padding:4px 10px;font-size:12px;line-height:16px;font-weight:600; } .hb__fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .hb__fakten span{ display:grid;gap:1px;border:1px solid var(--linie);border-radius:8px;padding:7px 8px; font-size:9.5px;line-height:13px;color:var(--schrift-still); } .hb__fakten b{font-size:12px;line-height:16px;font-weight:600;color:var(--schrift)} .hb__knopf{ display:block;width:100%;text-align:center;height:auto;border-radius:8px; background:var(--signal);color:#fff;padding:8px 10px;margin-top:2px; font-size:11.5px;line-height:15px;font-weight:600; } /* --- 2 Textblatt mit zwei Pillen ---------------------------------------- */ .hb__blatt{ position:absolute;left:40px;right:40px;top:26px; background:#fff;border-radius:12px;padding:16px 18px; box-shadow:0 10px 28px rgb(11 26 36 / .10);display:grid;gap:7px; } .hb__blatt p{ margin:0;font-size:11px;line-height:16px;color:var(--schrift-still); } .hb__blatt .hb__ueber{font-size:12.5px;line-height:17px} .hb__trenner{display:block;height:1px;background:var(--linie);margin:3px 0} .hb__pille{ position:absolute;display:inline-flex;align-items:center;gap:7px; padding:6px 12px 6px 9px;border-radius:999px;background:#fff; box-shadow:0 6px 18px rgb(11 26 36 / .14); font-size:11px;line-height:15px;font-weight:600;color:var(--schrift);white-space:nowrap; } .hb__pille i{width:11px;height:11px;border-radius:999px;background:var(--signal);flex:none} .hb__pille b{display:none} .hb__pille--1{left:10px;top:76px} .hb__pille--2{right:10px;bottom:30px;top:auto} /* --- 3 Pflegeliste ------------------------------------------------------- */ .hb__tafel{ position:absolute;left:18px;right:18px;top:18px;bottom:18px; background:#fff;border-radius:14px;padding:14px; box-shadow:0 10px 28px rgb(11 26 36 / .10); display:grid;grid-template-rows:auto repeat(9,1fr);gap:6px;align-content:stretch; } .hb__tafelkopf{ display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 4px 8px; } .hb__tafelkopf b{font-size:12.5px;line-height:17px;font-weight:600;color:var(--schrift)} .hb__tafelkopf em{font-style:normal;font-size:11px;line-height:15px;color:var(--schrift-still)} .hb__posten{ display:flex;align-items:center;gap:9px; background:#F6F7F9;border-radius:9px;padding:0 10px; font-size:11px;line-height:15px;color:var(--schrift-still); } .hb__posten i{ width:14px;height:14px;border-radius:999px;flex:none; background:rgb(21 22 26 / .10);position:relative; } .hb__posten b{display:none} .hb__posten em{ font-style:normal;margin-left:auto;font-size:10px;line-height:14px; color:var(--schrift-still);flex:none; } .hb__posten.erledigt{color:var(--schrift)} .hb__posten.erledigt i{background:var(--signal)} .hb__posten.erledigt i::after{ content:"";position:absolute;left:4px;top:5px;width:5px;height:2.5px; border-left:1.4px solid #fff;border-bottom:1.4px solid #fff;transform:rotate(-45deg); } /* --- 4 Markentafel ------------------------------------------------------- */ .hb__brett{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(440px,84%);background:#fff;border-radius:14px;padding:20px 22px; box-shadow:0 12px 32px rgb(11 26 36 / .12); display:grid;gap:16px;grid-template-columns:1fr; } .hb__markenkopf{display:flex;align-items:center;gap:13px} .hb__markenkopf span{display:grid;gap:2px} .hb__markenkopf b{font-size:13px;line-height:17px;font-weight:600;color:var(--schrift)} .hb__markenkopf em{font-style:normal;font-size:11px;line-height:15px;color:var(--schrift-still)} .hb__zeichen{ width:48px;height:48px;border-radius:13px;background:var(--signal);color:#fff; display:grid;place-items:center;font-size:23px;line-height:1;font-weight:700; letter-spacing:-.03em;flex:none; } .hb__gruppe{display:grid;gap:8px} .hb__gtitel{ font-size:10px;line-height:14px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--schrift-still); } .hb__schriftprobe{display:flex;align-items:baseline;gap:11px} .hb__schriftprobe b{font-size:24px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--schrift)} .hb__schriftprobe em{font-style:normal;font-size:11.5px;line-height:16px;color:var(--schrift-still)} .hb__farben{display:flex;gap:10px} .hb__farben i{ width:auto;height:auto;border-radius:0;background:none;box-shadow:none; display:grid;gap:5px;justify-items:center; } .hb__farben i::before{ content:"";width:40px;height:40px;border-radius:10px;background:var(--f); box-shadow:inset 0 0 0 1px rgb(21 22 26 / .08); } .hb__farben em{ font-style:normal;font-size:8.5px;line-height:12px;letter-spacing:.02em; color:var(--schrift-still); } /* --- 5 Suchtreffer ------------------------------------------------------- */ .hb__suche{ position:absolute;left:50%;top:50%;right:auto;transform:translate(-50%,-50%); width:min(440px,84%);display:grid;gap:9px; } .hb__feld{ display:flex;align-items:center;gap:9px;background:#fff;border-radius:999px; padding:10px 16px;box-shadow:0 2px 8px rgb(11 26 36 / .07); font-size:12px;line-height:16px;color:var(--schrift); } .hb__feld svg{width:14px;height:14px;flex:none;color:var(--schrift-still)} .hb__feld i{display:none} .hb__treffer{ display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px; background:#fff;border:1px solid var(--signal-weich);border-radius:12px;padding:11px 14px; box-shadow:0 8px 22px rgb(11 26 36 / .08); } .hb__rang{ width:20px;height:20px;border-radius:6px;background:var(--signal);color:#fff; display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;grid-row:1; } .hb__name{font-size:12px;line-height:16px;font-weight:600;color:var(--schrift);grid-row:1} .hb__fund{ grid-column:2;font-style:normal;font-size:10.5px;line-height:14px;color:var(--schrift-still); } .hb__antwort{ display:flex;align-items:center;gap:10px; background:#F6F7F9;border-radius:12px;padding:10px 14px; } .hb__antwort em{font-style:normal;font-size:10.5px;line-height:15px;color:var(--schrift-still)} .hb__ringe{display:flex;flex:none} .hb__ringe i{ width:15px;height:15px;border-radius:999px;border:1.5px solid var(--signal);margin-left:-5px; } .hb__ringe i:first-child{margin-left:0} @media (max-width:680px){ .hb__fenster{width:min(272px,86%)} .hb__blatt{left:16px;right:16px} .hb__pille--1{left:4px} .hb__pille--2{right:4px} .hb__brett,.hb__suche{width:90%} } /* Nachlese: das Browserfenster ragte 9 Punkte aus seiner Buehne, und die beiden Pillen lagen auf dem Textblatt statt daneben. */ .hfeld--seiten .hbuehne{height:248px} .hfeld--text .hbuehne{height:248px} .hb__blatt{left:150px;right:24px;top:34px} /* Pille 1 lag auf dem Blatt. Auf 74 Punkte gequetscht brach sie auf drei Zeilen und der Punkt rutschte aus der Mitte. Jetzt steht sie wieder auf einer Zeile, dafuer beginnt das Blatt weiter rechts. */ .hb__pille--1{left:10px;top:92px;white-space:nowrap;padding:6px 12px 6px 9px} .hb__pille--2{right:14px;bottom:18px;top:auto} /* Die drei Ringe steckten mit minus 5 Punkten so eng ineinander, dass sie wie ein Klecks lasen. Lockerer und eine Spur groesser. */ .hb__ringe i{width:17px;height:17px;border-width:1.6px;margin-left:-4px} .hb__ringe i:nth-child(2){opacity:.75} .hb__ringe i:nth-child(3){opacity:.5} .hb__antwort{gap:12px;padding:10px 14px} /* ========================================================================== 46 Leistungsseiten (KI-Beratung, Karriere) Zwei eigenstaendige Seiten, die sich am Aufbau der Referenzseite orientieren: Kopf mit Marke, Titel, Vorspann und Knopf, darunter ein Raster aus Karten. Eigene Klassen, damit nichts an den bestehenden Sektionen haengt. ========================================================================== */ .lseite .innen{padding-block:136px 96px} .lseite__kopf{max-width:760px;margin:0 0 56px} .lseite__kopf .pille{margin-bottom:18px} .lseite__titel{font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);line-height:1.08; font-weight:600;letter-spacing:-.03em;margin:0 0 18px} .lseite__kopf .vorspann{margin:0 0 28px} .lseite__block{margin-top:72px} .lseite__blockkopf{max-width:640px;margin:0 0 28px} .lseite__blockkopf h2{font-size:1.6rem;line-height:2.1rem;font-weight:600; letter-spacing:-.025em;margin:0 0 10px} .lseite__blockkopf p{font-size:1rem;line-height:1.6rem;color:var(--schrift-still);margin:0} .lpkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .lpkarten--zwei{grid-template-columns:repeat(2,1fr)} .lpkarte{ display:flex;flex-direction:column;gap:10px; background:var(--flaeche);border:1px solid var(--linie);border-radius:14px; padding:24px;box-shadow:0 1px 2px rgb(0 0 0 / .04); } .lpkarte__nr{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:9px;background:var(--signal-weich); color:var(--signal-tief);font-size:13px;font-weight:600;margin-bottom:4px; } .lpkarte h3{font-size:1.0625rem;line-height:1.5rem;font-weight:600;letter-spacing:-.015em;margin:0} .lpkarte p{font-size:.9375rem;line-height:1.45rem;color:var(--schrift-still);margin:0} .lliste{list-style:none;margin:0;padding:0;display:grid;gap:12px} .lliste li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;line-height:1.55rem} .lliste svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--signal)} .leckdaten{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--linie);border:1px solid var(--linie);border-radius:14px;overflow:hidden; } .leckdaten div{background:var(--flaeche);padding:18px 20px} .leckdaten dt{font-size:.8125rem;line-height:1.1rem;color:var(--schrift-still);margin:0 0 4px} .leckdaten dd{font-size:1rem;line-height:1.5rem;font-weight:500;margin:0} @media (max-width:1000px){ .lpkarten{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .lseite .innen{padding-block:110px 72px} .lpkarten,.lpkarten--zwei{grid-template-columns:1fr} .leckdaten{grid-template-columns:1fr} } /* ========================================================================== 47 KI-Tafel auf der Startseite Dieselbe Tafel wie "Unser Schwerpunkt", nur ohne Glasobjekte: die sechs aus bilder/bento sind in der Anzeigen-Tafel alle schon vergeben, und dasselbe Objekt zweimal auf einer Seite faellt auf. Die Buehnen tragen hier nur das Raster und die Attrappen. ========================================================================== */ .blatt--eu{left:22px;top:50%;transform:translateY(-50%);width:212px;gap:7px} .blatt--schulung{left:28px;top:50%;transform:translateY(-50%);width:232px;gap:6px} .ki-tafel .bfeld__buehne{aspect-ratio:16/9} .ki-tafel .bfeld--a .bfeld__buehne{aspect-ratio:21/9} .ki-tafel .bfeld__buehne--quer{aspect-ratio:48/9} /* ========================================================================== 48 Anfrageformular auf der Terminseite Loest die Calendly-Einbindung ab. Erste Partei, eigener Host, deshalb kein Zweiklick und kein Einwilligungsbanner noetig. Netlify erkennt das Formular ueber data-netlify am
. Die Falle: im Netlify-Team steht processing_settings.ignore_html_forms teils auf true, dann verschwindet jede Anfrage ohne Fehlermeldung. Vor dem Livegang pruefen, siehe Register. ========================================================================== */ .anfrage{display:grid;gap:18px} .anfrage__reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px} .feld{display:grid;gap:7px} .feld label{font-size:13px;line-height:18px;font-weight:500;color:var(--schrift)} .feld span{font-weight:400;color:var(--schrift-still)} .feld input,.feld textarea{ font:inherit;font-size:15px;line-height:22px;color:var(--schrift); background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:11px; padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s; } .feld textarea{min-height:104px;resize:vertical} .feld input:focus,.feld textarea:focus{ outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgb(23 124 183 / .15); } .feld input:user-invalid{border-color:#C0392B} .anfrage__fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .anfrage__klein{font-size:13px;line-height:19px;color:var(--schrift-still);margin:0} .anfrage__klein a{color:var(--signal)} .anfrage__falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (max-width:640px){ .anfrage__reihe{grid-template-columns:1fr} } /* ========================================================================== 49 Fusszeile: echtes Portrait und KI-Kreise Die Initialen RU sind durch das Foto ersetzt. Die KI-Knoepfe trugen eine spaetere Regel, die sie zu Textpillen machte; sie sind wieder Kreise und tragen jetzt die Zeichen der Dienste. ========================================================================== */ .fuss__bild{ width:44px;height:44px;border-radius:999px;flex:none;object-fit:cover; background:var(--signal-weich); } .fuss__wer b{display:flex;align-items:center;gap:6px} .fuss__haken{width:15px;height:15px;flex:none;color:var(--signal)} .fuss__kiknopf{ width:38px;height:38px;border-radius:999px;padding:0; background:var(--flaeche);color:var(--schrift); display:grid;place-items:center; } .fuss__kiknopf svg{width:19px;height:19px} .fuss__kiknopf--gem svg{width:17px;height:17px} .fuss__kiknopf--cl{color:#D97757} .fuss__kiknopf--gem{color:#4285F4} .fuss__kiknopf:hover{background:var(--flaeche);border-color:var(--schrift-still)} .fuss__ki{gap:8px} .fuss__ki > span{margin-right:4px} /* ========================================================================== 50 Sichtbarkeits-Pruefung (/analyse/) ========================================================================== */ .pruef__feld{ display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:26px 0 10px; } .pruef__eingabe{ flex:1 1 320px;min-width:0;font:inherit;font-size:16px;line-height:24px; background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:11px; padding:13px 16px;color:var(--schrift); } .pruef__eingabe:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgb(23 124 183 / .15)} .pruef__klein{font-size:13px;line-height:19px;color:var(--schrift-still);margin:0} .pruef__ergebnis{margin-top:40px} .pruef__ergebnis[hidden]{display:none} .pruef__kopfkarte{ display:flex;gap:28px;align-items:center;flex-wrap:wrap; background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:26px 28px; box-shadow:0 1px 2px rgb(0 0 0 / .04); } .pruef__zahl{display:grid;place-items:center;gap:2px;flex:none} .pruef__zahl b{font-size:46px;line-height:1;font-weight:600;letter-spacing:-.03em} .pruef__zahl span{font-size:12px;color:var(--schrift-still)} .pruef__wer{min-width:0} .pruef__wer h2{font-size:19px;line-height:26px;font-weight:600;margin:0 0 4px;word-break:break-word} .pruef__wer p{font-size:14.5px;line-height:21px;color:var(--schrift-still);margin:0} .pruef__stufe{ display:inline-flex;align-items:center;border-radius:999px;padding:5px 12px; font-size:12px;font-weight:600;margin-bottom:8px; } .pruef__stufe[data-stufe="Gut"]{background:#E6F4EC;color:#1B6B45} .pruef__stufe[data-stufe="Brauchbar"]{background:#FFF4E0;color:#8A5A12} .pruef__stufe[data-stufe="Schwach"],.pruef__stufe[data-stufe="Kritisch"]{background:#FCE9E7;color:#A33225} .pruef__liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px} .pruef__zeile{ display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start; background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:15px 17px; } .pruef__zeichen{ width:22px;height:22px;border-radius:999px;display:grid;place-items:center;margin-top:1px; font-size:13px;font-weight:700;color:#fff; } .pruef__zeile[data-ok="ja"] .pruef__zeichen{background:#2E8B5E} .pruef__zeile[data-ok="nein"] .pruef__zeichen{background:#C0392B} .pruef__zeile b{display:block;font-size:15px;line-height:22px;font-weight:600;margin-bottom:2px} .pruef__zeile span{font-size:14px;line-height:20px;color:var(--schrift-still)} .pruef__hinweis{ border-left:3px solid var(--signal);padding:2px 0 2px 16px;margin-top:22px; } .pruef__hinweis b{display:block;font-size:14px;font-weight:600;margin-bottom:3px} .pruef__hinweis p{font-size:14px;line-height:21px;color:var(--schrift-still);margin:0} .pruef__laeuft{font-size:15px;color:var(--schrift-still);margin:26px 0 0} .pruef__fehler{ margin-top:22px;padding:14px 16px;border-radius:12px; background:#FCE9E7;color:#A33225;font-size:14.5px;line-height:21px; } @media (max-width:640px){ .pruef__kopfkarte{gap:18px;padding:22px} .pruef__zahl b{font-size:38px} } .pruef__zeile[data-ok="offen"] .pruef__zeichen{background:#8A8A8A} .pruef__zeile[data-ok="offen"]{opacity:.78}