/* TB2B Beitragsraster, Verfeinerung 13.10.2026 Grundregeln stehen in projekt.css (.bc-card, .bc-head, .bc-body). Hier: Kategorie und Datum in einer Zeile, Kurztext aus der Yoast-Beschreibung mit fester Hoehe, „Weiterlesen →“ als ruhiger Textlink. */ :is(.bklp, body) .bc-card{transition:border-color .3s var(--ease-premium, ease), box-shadow .3s var(--ease-premium, ease), transform .3s var(--ease-premium, ease)} :is(.bklp, body) .bc-card:hover{transform:translateY(-2px)} /* Kopf wie der Beitragskopf: helle Pille mit Kategoriepunkt, Datum, darunter der Titel. Oben buendig, damit alle Titel einer Reihe auf einer Linie starten. */ :is(.bklp, body) .bc-card{border-radius:8px} :is(.bklp, body) .bc-head{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;min-height:190px;padding:26px 28px 30px} :is(.bklp, body) .bc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0} :is(.bklp, body) .bc-card .bc-meta .bc-pill{ display:inline-flex;align-items:center;gap:7px;margin:0;padding:5px 12px 5px 10px; background:#eef1f6 !important;color:var(--ink) !important; font-size:.72rem;letter-spacing:.02em;text-transform:none;font-weight:600; } :is(.bklp, body) .bc-meta .bc-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)} :is(.bklp, body) .bc-card[data-slug="ki-suche"] .bc-meta .bc-pill::before{background:var(--signal)} :is(.bklp, body) .bc-card[data-slug="geo-seo-anleitungen"] .bc-meta .bc-pill::before{background:#0a7d55} :is(.bklp, body) .bc-card[data-slug="einblicke-vortraege"] .bc-meta .bc-pill::before{background:#FBBC05} :is(.bklp, body) .bc-datum{font-size:.85rem;color:#A9B6CB;font-variant-numeric:tabular-nums} :is(.bklp, body) .bc-head :is(h2, h3){font-size:1.22rem;line-height:1.32} :is(.bklp, body) .bc-body{padding-top:22px} @media (max-width:560px){:is(.bklp, body) .bc-head{min-height:0;padding:22px 22px 26px;gap:14px}} /* Kurztext: ganze Saetze, hoechstens fuenf Zeilen, damit die Karten gleich ruhig stehen */ :is(.bklp, body) .bc-body p{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden; margin-bottom:20px; } :is(.bklp, body) .bc-mehr{ display:inline-flex;align-items:center;gap:8px; font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--ink) !important;text-decoration:none !important; border-bottom:1px solid var(--hair);padding-bottom:3px; transition:color .3s var(--ease-premium, ease), border-color .3s var(--ease-premium, ease); } :is(.bklp, body) .bc-pfeil{display:inline-block;transition:transform .3s var(--ease-premium, ease)} :is(.bklp, body) .bc-card:hover .bc-mehr{color:var(--signal) !important;border-color:var(--signal)} :is(.bklp, body) .bc-card:hover .bc-pfeil{transform:translateX(4px)} @media (prefers-reduced-motion: reduce){ :is(.bklp, body) .bc-card, :is(.bklp, body) .bc-pfeil{transition:none} :is(.bklp, body) .bc-card:hover{transform:none} :is(.bklp, body) .bc-card:hover .bc-pfeil{transform:none} } /* Hervorgehobener Beitrag: Platz fuer den ganzen Studientitel am Schirm */ :is(.bklp, body) .bc-featured{max-width:min(820px, calc(100vw - 76px))} /* Bewusst unterscheiden (13.10.2026): Studien behalten den dunklen Kopf und stechen heraus, alle anderen Karten sind hell mit einer Linie in der Kategoriefarbe. Achtzehn dunkle Koepfe wirkten wie eine Wand. */ :is(.bklp, body) .bc-card:not([data-slug="studien"]){background:#fff;--bc-farbe:var(--ink)} :is(.bklp, body) .bc-card[data-slug="ki-suche"]{--bc-farbe:var(--signal)} :is(.bklp, body) .bc-card[data-slug="geo-seo-anleitungen"]{--bc-farbe:#0a7d55} :is(.bklp, body) .bc-card[data-slug="einblicke-vortraege"]{--bc-farbe:#FBBC05} :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head{ background:#fff;box-shadow:inset 0 3px 0 var(--bc-farbe);border-bottom:1px solid #e3e6ee; } :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head :is(h2, h3){color:var(--ink)} :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head :is(h2, h3) a{color:var(--ink) !important} :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-datum{color:var(--grey)} :is(.bklp, body) .bc-card:not([data-slug="studien"]):hover .bc-head :is(h2, h3) a{color:var(--signal) !important} /* Studie: dunkler Kopf, dunkler Rand, Pille mit Akzent */ :is(.bklp, body) .bc-card[data-slug="studien"]{border-color:var(--ink)} :is(.bklp, body) .bc-card[data-slug="studien"] .bc-head{background:var(--ink)} /* Nachschaerfung 13.10.2026 (Oliver: „looks a bit white“): Koepfe in einer zarten Toenung der Kategoriefarbe statt Weiss mit Linie, Pille weiss. */ :is(.bklp, body) .bc-card[data-slug="ki-suche"]{--bc-ton:#e6edff} :is(.bklp, body) .bc-card[data-slug="geo-seo-anleitungen"]{--bc-ton:#e2f2ea} :is(.bklp, body) .bc-card[data-slug="einblicke-vortraege"]{--bc-ton:#fbf1d3} :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head{background:var(--bc-ton,#eef1f6);box-shadow:none;border-bottom:0} :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-meta .bc-pill{background:#fff !important} :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-datum{color:#4b5568} /* Blogseite: Kopf wie der Beitragskopf (13.10.2026) */ :is(.bklp, body) section.bc-seite{background:var(--paper-2,#eef1f7) !important} :is(.bklp, body) .bc-kopf{background:var(--ink);color:#fff;padding:clamp(56px,6vw,88px) 0 clamp(52px,5vw,72px);margin:0 0 40px} :is(.bklp, body) .bc-kopf__eyebrow{display:block;margin:0 0 14px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8FB0FF} :is(.bklp, body) .bc-kopf h1{margin:0 0 16px;max-width:22ch;color:#fff !important;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1.1;text-align:left} :is(.bklp, body) .bc-kopf p.bc-kopf__lead{margin:0 0 32px;max-width:60ch;color:#C9D3E3 !important;font-size:1.15rem;line-height:1.55;text-align:left} /* Hervorgehobener Beitrag auf dunklem Grund */ :is(.bklp, body) .bc-kopf .bc-featured-wrap{margin:0;text-align:left} :is(.bklp, body) .bc-kopf .bc-featured{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff} :is(.bklp, body) .bc-kopf .bc-featured:hover{border-color:rgba(255,255,255,.55)} :is(.bklp, body) .bc-kopf .bc-featured-flag{color:#8FB0FF;border-right-color:rgba(255,255,255,.22)} :is(.bklp, body) .bc-kopf .bc-featured-title{color:#fff} :is(.bklp, body) .bc-kopf .bc-featured-cta{background:var(--signal) !important;color:#fff !important} :is(.bklp, body) .bc-seite .bc-filter{justify-content:flex-start} @media (max-width:700px){ :is(.bklp, body) .bc-kopf{padding:40px 0 44px;margin-bottom:28px} :is(.bklp, body) .bc-kopf h1{font-size:2rem} :is(.bklp, body) .bc-kopf p.bc-kopf__lead{font-size:1.02rem;margin-bottom:24px} } /* 13.10.2026 abends: Lücke über dem dunklen Seitenkopf weg. Die Fassung „Kopf dunkel, Flaeche farbig“ hat Oliver verworfen („looks weird“); es bleibt der getoente Kopf, etwas klarer („a bit soft“). */ :is(.bklp, body) section.bc-seite{padding-top:0 !important} :is(.bklp, body) .bc-card:not([data-slug="studien"]){border-color:#cfd5e2} :is(.bklp, body) .bc-card[data-slug="ki-suche"]{--bc-ton:#dce6ff} :is(.bklp, body) .bc-card[data-slug="geo-seo-anleitungen"]{--bc-ton:#d5eee1} :is(.bklp, body) .bc-card[data-slug="einblicke-vortraege"]{--bc-ton:#f9ebbd} :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head{border-bottom:1px solid rgba(11,28,48,.10)} :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head :is(h2, h3){font-weight:700} :is(.bklp, body) .bc-card:not([data-slug="studien"]):hover{border-color:var(--ink)} /* Kopf und Raster auf derselben Kante (13.10.2026, Oliver: „the offset is weird“): gleicher Container .wrap.bc-wrap, kleinere Luecke zum Filter. */ :is(.bklp, body) .bc-kopf{margin-bottom:0} :is(.bklp, body) section.bc-seite{row-gap:0 !important} :is(.bklp, body) .bc-seite > div > .bc-wrap{padding-top:56px} /* Hervorgehobener Beitrag als breite Karte und Checklisten-Anmeldung als eigene Zeile im Raster (13.10.2026, UIUX Nachtrag 04). Bei aktivem Filter tritt die Anmeldung zurueck, damit nur Beitraege bleiben. */ :is(.bklp, body) .bc-hervor{margin:0 0 48px} :is(.bklp, body) .bc-hervor .tb2b-vk{max-width:none} :is(.bklp, body) .ref-grid > li.bc-anmeldung{grid-column:1 / -1;list-style:none;margin:8px 0} :is(.bklp, body) .bc-anmeldung .tb2b-cl-karte{max-width:none;margin:0} :is(.bklp, body) .bc-anmeldung .tb2b-cl-meldung{max-width:none;margin:12px 0 0} :is(.bklp, body) .bc-wrap:has(.bc-filter-btn.is-active) .bc-anmeldung{display:none} @media (max-width:700px){:is(.bklp, body) .bc-hervor{margin-bottom:32px}} /* Archivseiten (13.10.2026): gleicher Kopf, Eyebrow als Link zur Blogübersicht */ :is(.bklp, body) a.bc-kopf__eyebrow{text-decoration:none;color:#8FB0FF !important} :is(.bklp, body) a.bc-kopf__eyebrow:hover{color:#fff !important} :is(.bklp, body) .bc-archiv .bc-alle{margin:48px 0 0} :is(.bklp, body) .bc-archiv > div > .bc-wrap{padding-bottom:88px} /* Breite Vorschaukarte auf der Blogseite: Text und Bild als Gruppe mittig, Bild nah am Text (13.10.2026, Oliver: „image also closer here?“). */ @media (min-width:761px){ :is(.bklp, body) .bc-hervor .tb2b-vk{grid-template-columns:minmax(0,640px) 250px;justify-content:center;column-gap:clamp(48px,6vw,96px)} :is(.bklp, body) .bc-hervor .tb2b-vk__bild{justify-self:start} } /* Dunkle Karten (13.10.2026, Oliver: „I still don't like the layout here“, „darker mode would be better“). Alle Beitragskarten im Markenblau wie die Studienkarte; die Rubrik zeigt nur noch der farbige Punkt und eine feine Kante oben. Hover hellt die Flaeche leicht auf. */ :is(.bklp, body) .bc-card, :is(.bklp, body) .bc-card:not([data-slug="studien"]){background:#0b1c30;border-color:#0b1c30;--bc-akzent:#5b8cff;transition:background-color .2s ease, transform .2s ease} :is(.bklp, body) .bc-card[data-slug="geo-seo-anleitungen"]{--bc-akzent:#3fbf8a} :is(.bklp, body) .bc-card[data-slug="einblicke-vortraege"]{--bc-akzent:#FBBC05} :is(.bklp, body) .bc-card[data-slug="studien"]{--bc-akzent:#ffffff} :is(.bklp, body) .bc-card .bc-head, :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head{background:transparent;box-shadow:inset 0 3px 0 var(--bc-akzent);border-bottom:1px solid rgba(255,255,255,.08)} :is(.bklp, body) .bc-card .bc-head :is(h2, h3), :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head :is(h2, h3), :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head :is(h2, h3) a{color:#fff !important} :is(.bklp, body) .bc-card .bc-datum, :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-datum{color:#93a0b8} :is(.bklp, body) .bc-card .bc-meta .bc-pill, :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-meta .bc-pill{background:rgba(255,255,255,.08) !important;color:#fff !important;border-color:transparent !important} :is(.bklp, body) .bc-card[data-slug="ki-suche"] .bc-meta .bc-pill::before{background:#5b8cff} :is(.bklp, body) .bc-card[data-slug="geo-seo-anleitungen"] .bc-meta .bc-pill::before{background:#3fbf8a} :is(.bklp, body) .bc-card[data-slug="studien"] .bc-meta .bc-pill::before{background:#fff} :is(.bklp, body) .bc-card :is(.bc-body, .bc-text, p){color:#b8c2d6} :is(.bklp, body) .bc-card .bc-mehr{color:#fff !important;border-color:rgba(255,255,255,.35)} :is(.bklp, body) .bc-card:hover, :is(.bklp, body) .bc-card:not([data-slug="studien"]):hover{background:#13294a;border-color:#13294a} :is(.bklp, body) .bc-card:not([data-slug="studien"]):hover .bc-head :is(h2, h3) a{color:#fff !important} :is(.bklp, body) .bc-card:hover .bc-mehr{color:#9cc0ff !important;border-color:#9cc0ff} /* Kopf dunkel, Textteil weiss (13.10.2026, Oliver: „bottom part in white?“) */ :is(.bklp, body) .bc-card, :is(.bklp, body) .bc-card:not([data-slug="studien"]){background:#fff;border-color:#cfd5e2} :is(.bklp, body) .bc-card .bc-head, :is(.bklp, body) .bc-card:not([data-slug="studien"]) .bc-head{background:#0b1c30;border-bottom:0;transition:background-color .2s ease} :is(.bklp, body) .bc-card :is(.bc-body, .bc-text, p){color:#3b4559} :is(.bklp, body) .bc-card .bc-head p,:is(.bklp, body) .bc-card .bc-datum{color:#93a0b8} :is(.bklp, body) .bc-card .bc-mehr{color:var(--ink,#0b1b33) !important;border-color:var(--ink,#0b1b33)} :is(.bklp, body) .bc-card:hover, :is(.bklp, body) .bc-card:not([data-slug="studien"]):hover{background:#fff;border-color:#0b1c30} :is(.bklp, body) .bc-card:hover .bc-head, :is(.bklp, body) .bc-card:not([data-slug="studien"]):hover .bc-head{background:#13294a} :is(.bklp, body) .bc-card:hover .bc-mehr{color:var(--signal,#0052ff) !important;border-color:var(--signal,#0052ff)} /* Startseite: Einblicke auf hellblauem Band, damit die weissen Kartenkoerper sich abheben (13.10.2026, Oliver: „add colour here in the back on home?“). Folge danach: Anfrage weiss, FAQ hell. */ body.home section.bklp:has(.bc-card){background:var(--paper,#eef1f8)}