/* ============================================================== bento.css · Besitzer: P4 Start-Bausteine · v4 „Passer“ (25.09.2026) Plan 8.3 K23 (Bento Leistungen), 7 (Raster, Flaechen, Laengenbudget). Markup: includes/bento.php (kh_bento). Nur Tokens (tokens.css). Inhalt 1 Gemeinsam fuer alle P4-Bausteine (.sb): Polster, Kopf, Weiter-Zeile, dazu Kopf/Knoepfe des Fragen-Anreissers K28 (faq-kurz.php; die Listen-Optik selbst ist K70 in faq.css, Besitzer P10) 2 K23 Bento: Buehne, Foto-Kachel, Kachel, Wischreihe unter 48rem 3 ALTBESTAND v3 (.services/.service/.ik-feld) - nur noch fuer index.php, bis P12 die Startseite auf kh_bento() umstellt; danach zurueckbauen (P14) ============================================================== */ /* ---- 1 Gemeinsam --------------------------------------------------- Ein P4-Baustein ist EIN Kapitel mit eigener Flaeche (Plan 7: Grenze = Flaechenwechsel, keine Haarlinie). Polster: die kleine Stufe - die Startseite muss mobil auf 13 Bildschirme (Plan 7). overflow-x:clip haelt gedrehte Zettel und gleitende Ortsnamen im Kapitel (kein Querscrollen). */ .sb{padding-block:var(--abstand-klein);overflow-x:clip} .sb > .weiter{padding-block:clamp(1.25rem, .9rem + 1vw, 1.75rem) 0} /* Mobil (Laengenbudget Plan 7): die kompakte Weiter-Zeile in EINER Zeile - Primaerknopf + Telefon als 48-px-Hoerer-Knopf. Die Nummer bleibt als Linktext im DOM (Name fuer Screenreader, nur visuell verborgen); sichtbar steht sie ohnehin im Anruf-Knopf des Kopfs (K10). Spart je Zeile ~60 px. */ /* fix2: die Regel steht jetzt global in weiter.css (.weiter--kompakt). */ .sb-kopf{ display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:1rem 2rem;margin:0 0 clamp(1.25rem, .9rem + 1.4vw, 2.25rem); } .sb-kopf-text{min-width:0;max-width:46rem} .sb-kopf .kicker{margin-bottom:.75rem} .sb-kopf h2{margin:0} .sb-kopf .sub{margin-top:.55rem} /* K28 Fragen-Anreisser: mobil Kopf - Liste - Knoepfe; ab 60rem stehen die Knoepfe rechts neben dem Kopf (spart eine Zeile). (0,3,0), weil faq.css (P10) spaeter laedt und „.faq + .cta-row“ einen Abstand oben setzt. */ .fk-raster{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "liste" "knoepfe"} .fk-kopf{grid-area:kopf} .fk-raster > .faq{grid-area:liste} .fk-knoepfe{grid-area:knoepfe;column-gap:1.25rem} @media (min-width:60rem){ .fk-raster{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kopf knoepfe" "liste liste";column-gap:2rem} .sb.fk .fk-knoepfe{align-self:end;margin:0 0 clamp(1.25rem, .9rem + 1.4vw, 2.25rem)} } /* ---- 2 K23 Bento ---------------------------------------------------- */ .bt-buehne{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(.9rem, .6rem + .8vw, 1.25rem)} .bt-raster{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(.9rem, .6rem + .8vw, 1.25rem); } /* Kachel = Leuchtkasten-Karte. Oberkante: Fehlregister-Strich (Cyan-Platte, Magenta 2 px versetzt) wie am Kicker, waechst beim Zeigen per scaleX. */ .bt-kachel{ position:relative;min-width:0; display:flex;flex-direction:column;gap:.6rem; padding:clamp(1.15rem, .95rem + .6vw, 1.5rem); background-color:var(--flaeche-licht);color:var(--text); border-radius:var(--r-karte);box-shadow:var(--sh-1); transition:translate var(--t-mittel) var(--ease),box-shadow var(--t-mittel) var(--ease); } .bt-kachel::before{ content:"";position:absolute;left:clamp(1.15rem, .95rem + .6vw, 1.5rem); right:clamp(1.15rem, .95rem + .6vw, 1.5rem);top:0;height:3px; background:var(--platte);box-shadow:2px 2px 0 var(--haar); transform-origin:left;transform:scaleX(.12); transition:transform var(--t-mittel) var(--ease); } .bt-zeile{display:flex;align-items:center;gap:.85rem;min-width:0;margin-top:.35rem} /* Piktogramm auf der versetzten Platte - dasselbe Material wie die Themen-Platten auf /fragen.php (faq.css .fr-platte). */ .bt-platte{ display:grid;place-items:center;flex:0 0 auto; width:2.75rem;height:2.75rem;border-radius:var(--r-bogen); background-color:var(--flaeche-licht);border:1px solid var(--line-2); box-shadow:4px 4px 0 var(--platte), -3px -3px 0 -2px var(--haar); color:var(--accent-text); transition:box-shadow var(--t-mittel) var(--ease); } .bt-ik{width:1.6rem;height:1.6rem} .bt-etikett{margin:0;min-width:0;hyphens:manual} .bt-zeile--titel{gap:1rem} .bt-zeile--titel .bt-titel{margin:0;min-width:0} .bt-titel{margin:.2rem 0 0;font-size:clamp(1.15rem, 1.07rem + .3vw, 1.3rem);line-height:1.2} .bt-link{color:var(--text);text-decoration:none} /* Stretch-Link: die ganze Karte ist der Link. Der Fokusring sitzt auf der Flaeche des Links, also um die ganze Karte (ohne :has). */ .bt-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-karte)} .bt-link:focus-visible{outline:none} .bt-link:focus-visible::after{outline:3px solid var(--fokus);outline-offset:3px} .bt-text{margin:0;color:var(--muted);font-size:1rem;line-height:1.55} .bt-punkte{list-style:none;margin:.1rem 0 0;padding:0;display:grid;gap:.2rem;font-size:1rem;line-height:1.45;color:var(--text)} .bt-punkte li{position:relative;padding-left:1.1rem} .bt-punkte li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:2px;background:var(--platte)} .bt-mehr{ margin-top:auto;padding-top:.35rem; display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start; font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1rem;line-height:1.3; color:var(--accent-text); } .bt-pfeil{display:inline-block;transition:translate var(--t-kurz) var(--ease)} @media (hover:hover) and (pointer:fine){ .bt-kachel:hover{translate:0 -4px;box-shadow:var(--sh-2)} .bt-kachel:hover::before{transform:scaleX(1)} .bt-kachel:hover .bt-platte{box-shadow:6px 6px 0 var(--platte), -3px -3px 0 -2px var(--haar)} .bt-kachel:hover .bt-link{color:var(--accent-text)} .bt-kachel:hover .bt-pfeil{translate:4px 0} } .ohne-deko .bt-platte{box-shadow:none} .ohne-deko .bt-kachel::before{display:none} /* Kachel mit Motiv (Fuer Zuhause): Bogen oben, Bild 16:9 */ .bt-bild{margin:0 0 .25rem} .bt-bild .bogen{margin-top:4px} .bt-bild .bogen-bild img{aspect-ratio:16 / 9;object-fit:cover} .bt-kachel--motiv .bt-zeile{margin-top:0} /* Boegen ohne Randtext (echte Fotos) bekommen die Hoehe des Randes als Luft, damit Kacheln mit KI-Hinweis nicht tiefer beginnen (eine Linie). */ .bt-bild .bogen:not(:has(.bogen-rand)){padding-bottom:calc(var(--rand) + 1.75rem)} /* Foto-Kachel (nur ab 64rem, sonst nicht geladen: display:none + lazy). Das Bild fuellt die Hoehe der beiden Kachelreihen, bestimmt sie aber nicht (absolut im Bogen), sonst wuerde das Hochformat die Reihen dehnen. */ .bt-foto{display:none;min-width:0} .bt-foto .bogen{flex:1;display:flex;flex-direction:column;min-height:0} .bt-foto .bogen-bild{position:relative;flex:1;min-height:14rem} .bt-foto .bogen-bild picture{position:absolute;inset:0} .bt-foto .bogen-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 18%} /* Raster (Spaltenzahl je Umbruch neu entschieden, Plan 7) */ @media (min-width:48rem){ .bt-buehne--6 .bt-raster{grid-template-columns:repeat(2, minmax(0,1fr))} .bt-buehne--3 .bt-raster{grid-template-columns:repeat(3, minmax(0,1fr))} } @media (min-width:64rem){ .bt-buehne--6 .bt-raster{grid-template-columns:repeat(3, minmax(0,1fr))} .bt-buehne--foto{grid-template-columns:minmax(0,1fr) minmax(0,3.4fr);gap:clamp(1.25rem, .6rem + 1.4vw, 2rem)} .bt-buehne--foto .bt-foto{display:flex} } /* ---- fix2 (Jury Befund 2): Start-Bento asymmetrisch mit Motiven ------- Plan 7/K23: 12 Spalten, 7/5 · 5/7 · 7/5. Die breiten Kacheln (1, 4, 5) tragen links ein Motiv auf voller Kachelhoehe, rechts Titel/Text - die Reihenhoehe waechst dadurch nicht. Unter 64rem kein Motiv (nicht geladen). */ .bt-buehne--6 .bt-bild{display:none} @media (min-width:64rem){ .bt-buehne--6.bt-buehne--motiv .bt-raster{grid-template-columns:repeat(12, minmax(0,1fr))} .bt-buehne--6.bt-buehne--motiv .bt-kachel{grid-column:span 5} .bt-buehne--6.bt-buehne--motiv .bt-kachel:nth-child(4n+1), .bt-buehne--6.bt-buehne--motiv .bt-kachel:nth-child(4n+4){grid-column:span 7} .bt-buehne--6 .bt-kachel--motiv{ display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); grid-template-rows:auto auto 1fr;column-gap:clamp(1rem, .6rem + 1vw, 1.5rem);align-content:start; } .bt-buehne--6 .bt-kachel--motiv > *{grid-column:2} .bt-buehne--6 .bt-kachel--motiv > .bt-bild{ display:block;grid-column:1;grid-row:1 / -1;margin:0;min-height:11rem;position:relative; } .bt-buehne--6 .bt-bild .bogen{position:absolute;inset:0;display:flex;flex-direction:column} .bt-buehne--6 .bt-bild .bogen:not(:has(.bogen-rand)){padding-bottom:var(--rand)} .bt-buehne--6 .bt-bild .bogen-bild{position:relative;flex:1;min-height:0;display:flex;flex-direction:column} .bt-buehne--6 .bt-bild .bogen-bild picture{position:relative;display:block;flex:1;min-height:0} .bt-buehne--6 .bt-bild .bogen-bild img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%} .bt-buehne--6 .bt-kachel--motiv .bt-zeile{margin-top:.35rem} } /* Unter 48rem: Wischreihe mit sichtbarer Nachbarkarte (Plan K23). Die Kacheln enthalten Links - die Reihe ist also per Tastatur erreichbar, der Browser scrollt die fokussierte Kachel selbst ins Bild. */ @media (max-width:47.99rem){ .bt-raster{ grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%, 21rem); overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1); padding:.35rem var(--gut) 1.1rem; scrollbar-width:thin;scrollbar-color:var(--line-2) transparent; } .bt-kachel{scroll-snap-align:start} } /* ############################################################## 3 ALTBESTAND v3 - nur fuer die v3-Kaesten in index.php (bis P12 montiert). Unveraendert aus style.css (CSS_VER 56), herausgeloest von P0. Nach der Montage zurueckbauen (P14). ############################################################## */ /* ===== Leistungen ============================================= */ /* Die Magenta-Haarlinie aus dem Logo als Kopfkante jeder Karte */ /* ---- Leistungs-Icons ----------------------------------------- */ /* ---- Tippziele: haengen am Finger, nicht an der Fensterbreite ---- */ /* Startseite: Leistungsblock je Zielgruppe (28.09.2026), wie .magazin-sektion */ body:has(#zg-privat:checked) .bt[data-zg="gewerbe"], body:has(#zg-gewerbe:checked) .bt[data-zg="privat"]{display:none}