/* ===========================================
   HOME – CSS (Seite ID 462)
   Design-System: design-rules.md
   =========================================== */

/* ===========================================
   HERO SECTION
   =========================================== */
/* Der obere Abstand ist auf die vh-hero-Seiten (Vergleich, ROI, Umbau)
   eingenordet, damit beim Umschalten zwischen den Bereichen nichts springt.
   Gemessen am 13.08.2026, Header 73 Pixel hoch: dort sitzt das erste Element
   47 Pixel unter dem Header, hier waren es 31. Die fehlenden 16 stecken hier,
   weil .site-content auf der Startseite zusaetzlich 40 Pixel Polster hat und
   64 + 40 = 104 statt 120 ergab. */
.t3k-hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 32px 64px;
  display: grid;
  grid-template-columns: 6fr 4fr;
  column-gap: 48px;
  row-gap: 0;
  align-items: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Desktop: Trust + Visual im richtigen Grid-Slot */
.t3k-hero-visual {
  grid-column: 2;
  grid-row: 1 / 3;
}

.t3k-hero-trust {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.t3k-hero h1 br.br-desktop {
  display: block;
}

.t3k-hero h1 br.br-mobile {
  display: none;
}

/* Badge */
.t3k-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: var(--primary-bg, #ECFDF5);
  color: var(--primary, #069669);
  border-radius: 50px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  /* 24 auf 30: die vh-hero-Seiten haben 54 Pixel zwischen Augenbraue und h1,
     hier waren es 48. Damit landet auch die Ueberschrift auf gleicher Hoehe. */
  margin-bottom: 30px;
}

.t3k-hero-badge .material-symbols-outlined {
  font-size: 14px;
}

/* Headline */
.t3k-hero h1 {
  /* Der Deckel lag bis zum 20.09.2026 bei 3.2rem. Seit die Ueberschrift
     "KI-Telefonassistenten" heisst, passt das nicht mehr: bei 1280 Pixeln
     Fensterbreite braucht das Wort 554 Pixel, die Textspalte des Heros bietet
     aber nur 509. Der Browser bricht dann am Bindestrich um, und in der ersten
     Zeile steht "KI-" allein.

     Statt eines festen Umbruchs skaliert die Groesse mit dem Fenster und ist so
     gedeckelt, dass das Wort in jeder Breite in eine Zeile passt. Am Handy
     greift weiter die eigene Regel weiter unten (1.65rem), dort darf und soll
     es umbrechen. */
  font-size: clamp(2.2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--on-surface, #191c1e);
  margin: 0 0 20px 0;
}

.t3k-hero h1 span {
  color: var(--primary, #069669);
}

/* Subtitle */
.t3k-hero-subtitle {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-surface-variant, #4b5563);
  margin: 0 0 32px 0;
  max-width: 480px;
}

/* Trust Row im Hero */
.t3k-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.t3k-hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.t3k-hero-trust-item .material-symbols-outlined {
  font-size: 18px !important;
  padding: 6px;
  background: rgba(5, 150, 105, 0.08);
  border-radius: 8px;
  color: var(--primary, #069669);
  line-height: 1;
  flex-shrink: 0;
}

.t3k-hero-trust-item span:last-child {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-surface-variant, #4b5563);
  line-height: 1;
}

/* Hero Visual (Bild rechts) */
.t3k-hero-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9 / 8;
  background: var(--surface-low, #f2f4f6);
  box-shadow: 0 4px 32px rgba(5, 150, 105, 0.06);
  max-width: 90%;
  margin-left: auto;
}

.t3k-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient-Overlay über dem Bild */
.t3k-hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 24, 39, 0.7) 0%, transparent 50%);
  pointer-events: none;
}

/* Kennzeichnung des KI-generierten Hero-Bildes, Artikel 50 KI-Verordnung,
   gueltig seit 02.08.2026. Sitzt unten rechts, weil der Verlauf dort ohnehin
   abdunkelt. Der Schatten faengt die helleren Bildstellen ab.
   Bis 28.09.2026 als Wasserzeichen in 8 Pixel bei 60 % Weiss. Gilt Artikel
   50 fuer dieses Bild, verlangt Absatz 5 eine "klare und unterscheidbare"
   Angabe, und das Bild zeigt drei echt wirkende Menschen, die es nicht gibt.
   Deshalb jetzt 11 Pixel wie am Handy und volles Weiss.
   Die Regel stand bis dahin zweimal hier. Die erste wollte bottom 10, weil
   das Stat-Overlay unten links am 20.08.2026 entfallen ist, die zweite mit
   bottom 20 hat gewonnen. Es bleibt bei 20, damit der Hinweis nicht wandert. */
.t3k-hero-credit {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .t3k-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    /* Am Handy war der Abstand mit 5 Pixeln praktisch null, die Vergleichs-
       seite hat 35. Header ist hier 77 Pixel hoch, .site-content steuert
       30 Pixel bei: 30 + 82 = 112, gleiche Hoehe wie dort. */
    padding: 82px 20px 60px;
  }
  .t3k-hero-badge {
    /* 68 Pixel bis zur h1 wie auf den vh-hero-Seiten, vorher 48. */
    margin-bottom: 44px;
  }
  .t3k-hero h1 {
    font-size: 1.65rem;
  }
  .t3k-hero h1 br.br-desktop {
    display: none;
  }
  .t3k-hero h1 br.br-mobile {
    display: block;
  }
  .t3k-hero-visual {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  .t3k-hero-trust {
    grid-column: 1;
    grid-row: auto;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
  }
  .t3k-hero-trust-item {
    gap: 4px;
  }
  .t3k-hero-trust-item .material-symbols-outlined {
    font-size: 14px !important;
    padding: 6px;
  }
  .t3k-hero-trust-item span:last-child {
    font-size: 7px;
    letter-spacing: 0.08em;
  }
}

/* ===========================================
   DASHBOARD – Bento Grid
   =========================================== */
#home-dashboard {
  max-width: 960px;
  margin: 0 auto 80px;
  padding: 0 32px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Featured Card (aktiver Vergleich) ---- */
.dash-featured {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--surface-card, #ffffff);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 20px 24px;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  box-shadow:
    0 16px 48px rgba(17, 24, 39, 0.18),
    0 4px 12px rgba(17, 24, 39, 0.06);
  cursor: pointer;
}

.dash-featured:hover {
  box-shadow:
    0 16px 48px rgba(5, 150, 105, 0.22),
    0 4px 12px rgba(5, 150, 105, 0.12);
  transform: translateY(-2px);
}

/* Invisible stretched link */
.dash-featured-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Left: Text */
.dash-featured-left {
  padding: 0 0 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.dash-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--primary-bg, #ECFDF5);
  color: var(--primary, #069669);
  border-radius: 50px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
  width: fit-content;
}

.dash-featured-badge .material-symbols-outlined {
  font-size: 11px;
}

.dash-featured h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--on-surface, #191c1e);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dash-featured p {
  font-size: 13px;
  font-weight: 400;
  color: var(--on-surface-variant, #4b5563);
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 320px;
}

.dash-featured-cta {
  display: none;
}
.dash-featured-arrow {
  position: absolute;
  bottom: 20px;
  right: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 150, 105, 0.08);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.dash-featured-arrow .material-symbols-outlined {
  font-size: 18px;
  color: var(--primary, #069669);
  transition: transform 0.25s ease;
}
.dash-featured:hover .dash-featured-arrow {
  background: var(--primary, #069669);
}
.dash-featured:hover .dash-featured-arrow .material-symbols-outlined {
  color: #fff;
  transform: translateX(2px);
}

.dash-featured-cta .material-symbols-outlined {
  font-size: 13px;
  color: var(--primary, #069669);
  transition: transform 0.25s ease;
}

.dash-featured:hover .dash-featured-cta {
  background: none;
  box-shadow: none;
  color: var(--primary-dark, #047857);
}

.dash-featured:hover .dash-featured-cta .material-symbols-outlined {
  transform: translateX(3px);
}

/* Right: Logos */
.dash-featured-right {
  background: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.dash-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border-radius: 0;
  transition: opacity 0.3s ease;
  box-shadow: none;
}

.dash-featured:hover .dash-logo-item {
  box-shadow: none;
}

/* 58 auf 46 Pixel am 19.08.2026. Vorher nahmen die drei Logos 483 der 960
   Pixel breiten Karte ein und der Text nur 405, obwohl er der wichtigere
   Inhalt ist. Ueberschrift und Absatz brachen dadurch unnoetig um. Mit 46
   Pixel bleiben die Logos gut erkennbar und der Text bekommt 479 Pixel. */
.dash-logo-item img {
  height: auto;
  max-height: 46px;
  width: auto;
  min-width: 80px;
  max-width: 200px;
  object-fit: contain;
  opacity: 1;
}

/* ---- Coming Soon Grid ---- */
.dash-grid-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dash-card-small {
  position: relative;
  background: var(--surface-card, #ffffff);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  overflow: hidden;
  cursor: not-allowed;
  box-shadow:
    0 2px 16px rgba(5, 150, 105, 0.05),
    0 1px 3px rgba(5, 150, 105, 0.03),
    0 4px 8px -2px rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.3s ease;
}

.dash-card-small:hover {
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.10);
}

.dash-card-small h3 {
  font-size: 13px;
  font-weight: 800;
  color: var(--on-surface, #191c1e);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.dash-placeholder-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.dash-placeholder {
  width: 80px;
  height: 28px;
  background: var(--surface-active, #e6e8ea);
  border-radius: 8px;
}

/* Blur + Badge (shared) */
.blur-box {
  filter: blur(8px);
  opacity: 0.3;
  pointer-events: none;
}

.badge-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #6b7280;
  color: #fff;
  padding: 7px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  z-index: 10;
  transition: box-shadow 0.3s ease;
}

.dash-card-small:hover .badge-soon {
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.2);
}

/* ---- Dashboard Mobile ---- */
@media (max-width: 768px) {
  #home-dashboard { padding: 0 20px; margin-bottom: 48px; }
  .dash-featured {
    grid-template-columns: 1fr;
  }
  .dash-featured { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  /* Abstand von 16 auf 12: das VITAS-Logo ist am Handy 88 Pixel breit, wo goai
     50 war. Mit 16 Pixel Abstand misst die Reihe 239 Pixel bei 235 verfuegbaren
     und das letzte Logo wird beschnitten. Bei 375 Pixel nachgemessen. */
  .dash-featured-right { justify-content: flex-start; gap: 10px; flex-wrap: nowrap; width: 100%; }
  /* 30 auf 26 Pixel am 22.09.2026. Bei 30 brauchten die drei Logos mit ihren
     Seitenverhaeltnissen 227 Pixel, verfuegbar sind bei 360 Pixel Geraetebreite
     220: VITAS fiel in eine zweite Zeile und die Kachel wurde 242 statt 205
     Pixel hoch. Mit 26 Pixel Hoehe und 10 Pixel Abstand sind es 205, also 15
     Pixel Reserve. Unter etwa 350 Pixel Geraetebreite bricht es weiterhin um,
     dort ist eine Reihe mit lesbaren Logos nicht zu haben. */
  .dash-featured-right .dash-logo-item img { max-height: 26px; min-width: 0; max-width: 90px; }
  .dash-featured h2 { font-size: 15px; }
  .dash-grid-small { grid-template-columns: 1fr; gap: 16px; }
  .dash-card-small { padding: 28px 20px; }
}

/* Der Affiliate-Hinweis unter den Kacheln ist am 28.09.2026 entfallen. Er
   stand in 12 Pixel bei 50 % Deckkraft, und dasselbe sagt die Karte "Wie wir
   Geld verdienen" weiter unten in normaler Schrift. Partnerlinks hat die
   Startseite keine, alle Links fuehren auf eigene Seiten. Das CSS dazu ist
   entfernt; die Blogseiten nutzen die Klasse t3k-affiliate-note mit eigenem
   Stil im Seiteninhalt, home.css laedt dort nicht. */

/* Die drei Feature-Karten (Zeitersparnis, DSGVO-Fokus, Mittelstand) sind am
   11.09.2026 entfallen. Ihr Inhalt steht jetzt im Portal-Abschnitt weiter
   unten, und zwar ohne die Dopplungen: "Reihenfolge alphabetisch" und
   "keine Rangfolge" standen zuletzt an drei Stellen derselben Seite.
   Das CSS dazu ist hier entfernt, weil keine Seite die Klassen mehr
   benutzt, geprueft ueber alle 13 Seiteninhalte und das Theme. */

/* ===========================================
   ANIMATION
   =========================================== */
@keyframes pulse-soft {
  0%   { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}


/* ===========================================
   NACHBESSERUNG 19.08.2026, korrigiert 20.08.2026
   Der Aufrufknopf der grossen Karte ist ausgeblendet, sein Abstand blieb
   aber als toter Raum unter dem Text stehen. Dadurch sass der sichtbare
   Text acht Pixel zu hoch, waehrend die Logos daneben mittig standen.
   Gemessen: Textmitte 633, Kartenmitte 641.

   Der erste Versuch griff auf :last-of-type zu und lief ins Leere: wpautop
   wickelt den Aufrufknopf, einen span auf eigener Zeile, in ein eigenes
   <p>. Damit war nicht der Untertitel das letzte p, sondern dieses leere.
   Deshalb jetzt ohne :last-of-type. Den Abstand zwischen Ueberschrift und
   Untertitel liefert das margin-bottom der h2, den unter dem Knopf, falls
   er je wieder sichtbar wird, sein eigenes margin-top.
   =========================================== */
.dash-featured-left > p {
  margin-bottom: 0;
}

.dash-featured-cta {
  margin-top: 16px;
}

/* Das VITAS-Logo ist ein SVG ohne width- und height-Attribut in der Datei.
   Mit width:auto und height:auto hat der Browser damit keine Ausgangsgroesse
   und zieht die min-width von 80 Pixel heran, woraus sich 27 statt 58 Pixel
   Hoehe ergeben. Fonio und Meiti sind PNG und bringen ihre Groesse mit.
   Deshalb bekommen nur SVG-Logos hier eine feste Hoehe. */
.dash-logo-item img[src$=".svg"] {
  height: 46px;
  width: auto;
}

@media (max-width: 768px) {
  .dash-featured-right .dash-logo-item img[src$=".svg"] {
    height: 26px;
  }
}

/* Ohne diese Ausnahme bricht die Ueberschrift am Bindestrich um und es steht
   "Die passenden KI-" auf der einen und "Tools" auf der naechsten Zeile.
   Aufgefallen bei 583 Pixel Breite. Die Farbregel darueber faerbt jeden span
   in der Ueberschrift gruen, deshalb setzt diese hier die Farbe zurueck. */
.t3k-hero h1 span.nowrap {
  color: inherit;
  white-space: nowrap;
}

/* Am Handy stand in der H1 "KI-" allein auf der ersten Zeile und
   "Telefonassistenten" auf der zweiten. Der geschuetzte Begriff allein loest
   das nicht: bei 26,4 Pixel Schrift braucht "KI-Telefonassistenten" 278 Pixel,
   Platz sind 260, das Wort waere 18 Pixel herausgestanden. Bei 24 Pixel sind
   es 252 und es passt mit 8 Pixel Reserve. Gemessen am 22.09.2026 bei 360
   Pixel Geraetebreite.

   Silbentrennung war der naheliegende Weg und wirkt nicht: mit hyphens: auto
   und lang="de" blieb die Hoehe der Ueberschrift unveraendert, Chrome trennt
   dieses Wort nicht. Dasselbe stand schon bei "Datenschutzerklaerung" in
   mobile.css. */
@media (max-width: 768px) {
  .t3k-hero h1 {
    font-size: 24px;
  }
}

/* Zwischenbereich der Dashboard-Karte, kleine Laptops und Tablets im
   Querformat. Zwischen dem Handy-Umbruch bei 768 und rund 1000 Pixel steht
   die Karte noch zweispaltig, hat aber deutlich weniger Breite: gemessen bei
   900 Pixel Fenster blieben dem Text 307 Pixel gegen 409 fuer die Logos.
   Damit kippt das Verhaeltnis wieder zugunsten der Logos.

   Zwei Stellschrauben: 38 statt 46 Pixel Hoehe, und die min-width faellt weg.
   Letztere kostete am meisten, weil das quadratische Meiti-Logo bei 38 Pixel
   Hoehe nur 38 breit ist, durch min-width aber auf 80 gestreckt wurde. */
@media (min-width: 769px) and (max-width: 1024px) {
  .dash-featured-right .dash-logo-item img {
    max-height: 38px;
    min-width: 0;
  }
  .dash-featured-right .dash-logo-item img[src$=".svg"] {
    height: 38px;
  }
}

/* ==========================================================================
   Portal-Abschnitt (11.09.2026)

   Erklaert, was top3-ki.de ist, wie ausgewaehlt wird und wie sich die Seite
   finanziert. Fuer ein Portal mit Affiliate-Links ist das die Stelle, an der
   Vertrauen entsteht, und der Inhalt, den KI-Antwortmaschinen zitieren.

   Die Formensprache ist bewusst dieselbe wie beim Methodikblock auf 1100 und
   bei den Kacheln darueber: weisse Karte, 16 Pixel Rundung, weicher gruener
   Schatten, Pillen-Label, Icon in Gruen. Die erste Fassung vom selben Tag
   hatte nackten Text mit einem kleinen Strich und wirkte neben den Kacheln
   darueber wie ein Fremdkoerper.

   Unterschied zu 1100: die Kartentexte sind hier laenger, deshalb linksbuendig
   statt zentriert. Zentriert bleiben nur Label, Ueberschrift und Einleitung.
   ========================================================================== */

.t3k-portal {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 32px 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: center;
}

.t3k-portal *,
.t3k-portal *::before,
.t3k-portal *::after {
  box-sizing: border-box;
}

.t3k-portal-label {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(6, 150, 105, 0.08);
  color: #047857;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.t3k-portal h2 {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #191c1e;
}

.t3k-portal-lead {
  font-size: 16px;
  line-height: 1.7;
  color: #6B7280;
  max-width: 660px;
  margin: 0 auto 14px;
}

.t3k-portal-lead:last-of-type {
  margin-bottom: 36px;
}

.t3k-portal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  text-align: left;
}

.t3k-portal-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 24px 40px -12px rgba(6, 150, 105, 0.06),
              0 2px 6px -2px rgba(17, 24, 39, 0.05);
}

.t3k-portal-card .material-symbols-outlined {
  color: #069669;
  font-size: 22px;
  display: block;
  margin-bottom: 10px;
}

.t3k-portal-card h3 {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #191c1e;
}

.t3k-portal-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #6B7280;
  margin: 0 0 10px;
}

.t3k-portal-card p:last-child {
  margin-bottom: 0;
}

/* Autorenblock. Etwas anders getoent als die vier Karten darueber, damit er
   als eigene Aussage gelesen wird und nicht als fuenfte Kategorie. Der
   Person-Knoten im JSON-LD zeigt auf dasselbe Bild, siehe inc/autor-bild.php. */
.t3k-portal-autor {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  text-align: left;
  margin-top: 16px;
  padding: 26px 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid rgba(6, 150, 105, 0.12);
  border-radius: 16px;
}

.t3k-portal-autor img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.10);
}

.t3k-portal-autor h3 {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #191c1e;
}

.t3k-portal-autor p {
  font-size: 14px;
  line-height: 1.7;
  color: #6B7280;
  margin: 0 0 10px;
}

.t3k-portal-autor p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .t3k-portal {
    padding: 16px 20px 4px;
  }

  .t3k-portal h2 {
    font-size: 23px;
  }

  .t3k-portal-lead {
    font-size: 15px;
  }

  .t3k-portal-grid {
    grid-template-columns: 1fr;
  }

  .t3k-portal-autor {
    flex-direction: column;
    gap: 16px;
  }
}

/* ==========================================================================
   Zweite grosse Kachel: ROI-Rechner (11.09.2026)

   Bis heute standen unter der Vergleichskachel zwei kleine Kacheln mit
   "Demnaechst" und "In Arbeit" fuer Kategorien, die es nicht gibt. Zwei leere
   Versprechen neben einer fertigen Sache. Stattdessen zeigt die zweite grosse
   Kachel jetzt den ROI-Rechner: fertig, nuetzlich, mit echtem Ziel.

   Sie nutzt dieselbe .dash-featured wie die Kachel darueber. Rechts stehen
   statt der Anbieterlogos drei Schritte des Rechenwegs, damit die Flaeche
   nicht leer wirkt und sofort klar ist, was der Rechner tut.

   Welche Kategorie als naechstes kommt, steht bewusst nirgends: das ist noch
   nicht entschieden, und ein Portal, das Kategorien ankuendigt und nicht
   liefert, verliert mehr als es gewinnt.
   ========================================================================== */

.dash-roi-steps {
  display: grid;
  grid-template-columns: 32px 20px 32px 20px 32px;
  align-items: center;
  justify-items: center;
  column-gap: 12px;
  flex-shrink: 0;
}

/* Die Beschriftungen unter den Symbolen sind am 11.09.2026 wieder entfallen,
   aus zwei Gruenden.
   
   Erstens die Hoehe: Symbol plus Abstand plus Text ergaben 65 Pixel, die
   Anbieterlogos in der Kachel darueber sind 46 hoch. Die ROI-Kachel wurde
   dadurch hoeher als die Vergleichskachel, und die ist die wichtigere.
   
   Zweitens die Verteilung: die Spalten richteten sich nach der breitesten
   Zelle, also nach dem Text. "Verpasste Anrufe" und "Entgangener Umsatz" sind
   lang, "Ihr Vorteil" ist kurz, und die Symbole standen dadurch ungleich weit
   auseinander. Feste Spaltenbreiten loesen das unabhaengig vom Inhalt.
   
   Was die Symbole bedeuten, steht im Text links daneben. Fuer Screenreader
   tragen sie ein aria-label, sichtbarer Text ist dafuer nicht noetig. */
/* Zurueckhaltend gehalten, 11.09.2026. Die Symbole standen zuerst als gruen
   gefuellte Kreise da und zogen damit mehr Aufmerksamkeit auf sich als die
   bunten Anbieterlogos in der Kachel darueber. Die ist die wichtigere, und
   zwei verschiedene Bildsprachen direkt untereinander wirken unruhig. Jetzt
   nur die Umrisse in Grau, ohne Fuellung, kleiner. Sie zeigen den Rechenweg
   an, ohne mit den Logos zu konkurrieren. */
.dash-roi-icon {
  font-size: 22px;
  color: #9ca3af;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-roi-pfeil {
  color: #d9dde3;
  font-size: 16px;
}

/* Hinweis auf kommende Kategorien. Bewusst eine schlanke Zeile und keine
   Kachel: sie kuendigt nichts Bestimmtes an, sie sagt nur, dass es
   weitergeht. */
.dash-weiter {
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #9ca3af;
  margin: 20px auto 0;
  max-width: 560px;
}

@media (max-width: 768px) {
  .dash-roi-steps {
    display: none;
  }
}

/* ==========================================================================
   Korrektur der grossen Kacheln, 11.09.2026

   .dash-featured-left stand auf "flex: 1; min-width: 0", durfte also beliebig
   schrumpfen. .dash-featured-right stand auf "flex-shrink: 0", schrumpfte also
   nie. Zusammen mit "max-width: 200px" je Logo nahmen die drei Anbieterlogos
   dadurch den Platz zuerst.

   Gemessen am 11.09.2026 bei 1265 Pixeln Fensterbreite: Kachel 680 Pixel
   breit, davon 433 fuer die Logos und 127 fuer die Ueberschrift. Die brach
   dadurch auf fuenf Zeilen um: "KI- / Telefonas / sistenten- / Vergleich /
   2026". Bei sehr breiten Fenstern faellt es nicht auf, weil dann genug uebrig
   bleibt; dazwischen sieht es kaputt aus.

   Jetzt bekommt der Textteil eine Mindestbreite und die Logos duerfen
   schrumpfen. Unter 620 Pixeln bricht die Kachel ohnehin um.
   ========================================================================== */

.dash-featured-left {
  flex: 1 1 auto;
  min-width: 270px;
}

.dash-featured-right {
  flex-shrink: 1;
  min-width: 0;
}

.dash-logo-item img {
  max-width: 120px;
}

.dash-logo-item {
  min-width: 0;
}

@media (max-width: 620px) {
  .dash-featured {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-featured-left {
    min-width: 0;
    padding-left: 0;
  }

  .dash-featured-right {
    justify-content: flex-start;
    margin-top: 16px;
  }
}

/* Autorenblock, Feinschliff vom 11.09.2026:
   Der Name stand im Fliesstext und das Bild allein daneben. Jetzt steht er
   als Bildunterschrift unter dem Foto, wo ihn das Auge sucht. Und die
   E-Mail-Adresse darf nicht mehr umbrechen: "info@top3-" am Zeilenende und
   "ki.de" in der naechsten Zeile las sich wie zwei verschiedene Angaben. */
.t3k-portal-autor-bild {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.t3k-portal-autor-name {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #191c1e;
  white-space: nowrap;
}

.t3k-portal-autor a {
  white-space: nowrap;
}

/* Die Schrittleiste darf nicht schrumpfen. Sie traegt beide Klassen,
   .dash-featured-right und .dash-roi-steps, und die weiter oben stehende
   Korrektur der Kachelaufteilung setzt fuer .dash-featured-right bewusst
   "flex-shrink: 1". Fuer die Anbieterlogos ist das richtig, sie sollen bei
   wenig Platz nachgeben. Das Raster hier hat dagegen feste Spaltenbreiten und
   wurde dadurch gequetscht: gemessen am 11.09.2026 brach es in zwei Zeilen
   um, der Abstand zwischen zwei Symbolen war minus 46 Pixel, und die Kachel
   wurde 152 statt 135 Pixel hoch.

   Zwei Klassen im Selektor genuegen, um die vorherige Regel zu schlagen,
   ohne !important. Feste Breite: 3 mal 44 plus 2 mal 24 plus 4 mal 12 Pixel
   Abstand ergibt 228, das passt neben den Text, weil die Logos in der Kachel
   darueber mit 278 Pixeln mehr brauchen und dort auch passen. */
.dash-featured-right.dash-roi-steps {
  flex-shrink: 0;
  min-width: auto;
  /* So breit wie die Logoreihe in der Kachel darueber, und die Symbole darin
     zentriert. Vorher klebte die Leiste am rechten Rand: ihre Mitte lag bei
     564 Pixeln, die der Logoreihe bei 514. Die beiden Kachelhaelften fluchteten
     dadurch nicht, und die kleinere Leiste wirkte an den Rand gedrueckt.
     Gemessen am 11.09.2026: Logoreihe 284 Pixel breit, Symbolleiste 184.
     Mit 284 liegen beide Mitten exakt bei 514 Pixeln ab Kachelrand. */
  width: 284px;
  justify-content: center;
}

@media (max-width: 620px) {
  .dash-featured-right.dash-roi-steps {
    width: auto;
    justify-content: flex-start;
  }
}