/* ==========================================================================
   Dentaprimo — Bereich „Wissen" (Erhebungen, Marktstudien, Papers, Fachbeiträge)
   Stand 27.09.2026. Ergänzt website.css, ändert dort nichts: website.css gehört
   Strang A. Hier nur neue Klassen mit Vorsilbe „w-", damit nichts kollidiert.
   Entwurf in Brilliant: Leinwand „Dentaprimo Wissen" (Projekt starsmedia).
   ========================================================================== */

.w-kopf{ padding:118px 0 44px; background:linear-gradient(180deg,var(--dunst),var(--papier)); }
.w-kopf .riese{ font-size:clamp(38px,5.2vw,68px); max-width:16ch; }

/* Filter: echte Knöpfe, damit Tastatur und Vorlesewerkzeuge sie bedienen */
.w-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; }
.w-filter button{
  font:inherit; font-size:14px; color:var(--tief-2); background:transparent;
  border:1px solid var(--linie-stark); border-radius:100px; padding:9px 18px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.w-filter button:hover{ border-color:var(--accent); }
.w-filter button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.w-filter button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Typ-Marke */
.w-typ{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.w-typ[data-typ="fachbeitrag"]{ color:#b4533f; }  /* --funke ist auf Weiß zu hell für 11px */
.w-typ[data-typ="paper"]{ color:var(--tief-2); }
.w-meta{ font-size:13px; color:var(--ink-mute); }

/* Hauptbeitrag */
.w-haupt{
  display:grid; border-radius:18px; overflow:hidden; background:var(--tief); color:var(--hell);
  text-decoration:none;
}
@media (min-width:900px){ .w-haupt{ grid-template-columns:1.15fr 1fr; } }
.w-haupt-text{ padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; gap:16px; }
.w-haupt-text .w-typ{ align-self:flex-start; color:var(--tief); background:#9bd6cc; padding:5px 10px; border-radius:6px; }
.w-haupt-text .w-meta{ color:var(--hell-2); }
.w-haupt h2{ font-family:var(--jost); font-weight:400; font-size:clamp(30px,3.4vw,44px); line-height:1.08; letter-spacing:-.014em; margin:0; color:#fff; }
.w-haupt p{ margin:0; font-size:17px; line-height:1.6; color:#b9cacd; }
.w-haupt-knoepfe{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.w-haupt-knoepfe a{ font-size:15px; font-weight:600; text-decoration:none; padding:13px 22px; border-radius:100px; }
.w-haupt-knoepfe .hell{ background:#fff; color:var(--tief); }
.w-haupt-knoepfe .rand{ border:1px solid #2c5058; color:var(--hell); font-weight:500; }
.w-haupt-zahlen{ background:var(--tief-2); padding:clamp(22px,4vw,52px); display:grid; gap:14px; align-content:center; }
.w-haupt-zahlen div{ background:var(--tief); border-radius:12px; padding:22px; }
.w-haupt-zahlen b{ display:block; font-family:var(--jost); font-weight:300; font-size:clamp(36px,4vw,48px); line-height:1; color:#fff; margin-bottom:6px; }
.w-haupt-zahlen span{ font-size:14px; color:var(--hell-2); }

/* Raster */
.w-abschnitt{ padding:72px 0 0; }
.w-abschnitt-kopf{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; }
.w-raster{ display:grid; gap:22px; }
@media (min-width:760px){ .w-raster{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .w-raster{ grid-template-columns:repeat(3,1fr); } }
.w-karte{
  display:flex; flex-direction:column; gap:12px; padding:26px; border:1px solid var(--linie);
  border-radius:14px; text-decoration:none; color:inherit; transition:transform .25s, box-shadow .25s;
}
.w-karte:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(11,34,38,.09); }
.w-karte .w-bild{ height:150px; border-radius:10px; background:linear-gradient(135deg,var(--wash-2),var(--wash-3)); }
.w-karte[data-typ="fachbeitrag"] .w-bild{ background:linear-gradient(135deg,var(--dunst),var(--wash-1)); }
.w-karte[data-typ="paper"] .w-bild{ background:var(--tief); }
.w-karte h3{ font-family:var(--jost); font-weight:500; font-size:22px; line-height:1.22; margin:0; }
.w-karte p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }
.w-karte .w-weiter{ margin-top:auto; font-size:14px; font-weight:600; color:var(--accent); }
.w-zeile-kopf{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.w-leer{ display:none; padding:28px 0; color:var(--ink-mute); }
.w-leer.da{ display:block; }

/* Bezug per E-Mail */
.w-bezug{
  margin:72px 0; padding:clamp(26px,3.5vw,40px) clamp(22px,3.5vw,44px); border-radius:16px; background:var(--wash-1);
  display:grid; gap:22px; align-items:center;
}
@media (min-width:900px){ .w-bezug{ grid-template-columns:1fr auto; } }
.w-bezug h2{ font-family:var(--jost); font-weight:400; font-size:28px; margin:0 0 6px; }
.w-bezug p{ margin:0; color:var(--ink-soft); font-size:15px; }

/* ---- Beitragsseite ------------------------------------------------------ */
.w-artikel-kopf{ padding:118px 0 36px; }
.w-artikel-kopf .gross{ max-width:20ch; }
.w-metazeile{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; padding-top:18px; border-top:1px solid var(--linie); font-size:14px; color:var(--ink-soft); }
.w-metazeile b{ color:var(--ink); font-weight:600; margin-right:6px; }

.w-koerper{ display:grid; gap:40px; padding-bottom:40px; }
@media (min-width:1000px){ .w-koerper{ grid-template-columns:240px minmax(0,720px); gap:80px; } }
.w-inhalt{ align-self:start; display:flex; flex-direction:column; gap:10px; }
@media (min-width:1000px){ .w-inhalt{ position:sticky; top:96px; } }
.w-inhalt a{ font-size:14px; color:var(--ink-soft); text-decoration:none; padding-left:12px; border-left:2px solid transparent; }
.w-inhalt a:hover, .w-inhalt a.aktiv{ color:var(--accent); border-left-color:var(--accent); }
.w-inhalt .knopf-voll{ margin-top:18px; align-self:flex-start; }

.w-kurz{ background:var(--dunst); border-left:3px solid var(--accent); border-radius:0 14px 14px 0; padding:24px 28px; margin:0 0 40px; }
.w-kurz .w-typ{ display:block; margin-bottom:8px; }
.w-kurz ul{ margin:0 !important; }
.w-kurz li{ border:0 !important; padding:6px 0 6px 22px !important; }

.w-abb{ margin:30px 0; padding:24px; border:1px solid var(--linie); border-radius:14px; }
.w-abb figcaption{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:14px; }
.w-balken{ display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center; margin:8px 0; font-size:13.5px; color:var(--ink-soft); }
.w-balken i{ display:block; height:22px; border-radius:4px; background:var(--accent); }
.w-balken b{ color:var(--ink); }
.w-abb small{ display:block; margin-top:12px; font-size:12.5px; color:var(--ink-mute); }
@media (max-width:560px){ .w-balken{ grid-template-columns:1fr auto; } .w-balken i{ grid-column:1 / -1; order:3; } }

.w-handlung{
  display:grid; gap:18px; align-items:center; margin:48px 0 0; padding:28px; border-radius:16px;
  background:var(--tief); color:var(--hell);
}
@media (min-width:700px){ .w-handlung{ grid-template-columns:1fr auto; } }
.w-handlung b{ display:block; font-family:var(--jost); font-weight:400; font-size:22px; color:#fff; margin-bottom:4px; }
.w-handlung span{ font-size:14px; color:var(--hell-2); }
.w-handlung a{ background:#fff; color:var(--tief); font-weight:600; font-size:14px; padding:12px 20px; border-radius:100px; text-decoration:none; white-space:nowrap; }
/* Der Knopf im Inhaltsverzeichnis darf die Linkregel oben nicht erben */
.w-inhalt a.knopf-voll{ color:#fff; border-left:0; }
.w-inhalt a.knopf-voll:hover{ color:#fff; }

/* ---- Magazin-Bausteine (27.09.2026, zweite Runde) ------------------------ */
/* Kennzahlen-Leiste unter dem Kopf eines Beitrags */
.w-kennzahlen{ display:grid; gap:12px; margin:0 0 40px; }
@media (min-width:640px){ .w-kennzahlen{ grid-template-columns:repeat(3,1fr); } }
.w-kennzahlen div{ background:var(--dunst); border-radius:12px; padding:18px 20px; }
.w-kennzahlen b{ display:block; font-family:var(--jost); font-weight:300; font-size:clamp(30px,3.2vw,40px); line-height:1; color:var(--accent-tief); margin-bottom:8px; }
.w-kennzahlen span{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); }

/* Herausgehobenes Zitat */
.w-zitat{ margin:36px 0; padding:4px 0 4px 26px; border-left:3px solid var(--funke); }
.w-zitat p{ font-family:var(--jost) !important; font-weight:400; font-size:clamp(21px,2.2vw,26px) !important; line-height:1.35 !important; color:var(--ink) !important; margin:0 0 10px !important; }
.w-zitat cite{ font-style:normal; font-size:13px; color:var(--ink-mute); }

/* So nicht / Besser so */
.w-paar{ display:grid; gap:10px; margin:14px 0 30px; }
@media (min-width:700px){ .w-paar{ grid-template-columns:1fr 1fr; } }
.w-paar div{ border-radius:12px; padding:16px 18px; font-size:15.5px; line-height:1.55; }
.w-paar .nein{ background:#fbeeea; color:#6d2b1f; }
.w-paar .ja{ background:var(--wash-1); color:var(--tief-2); }
.w-paar small{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; opacity:.8; }
.w-regel{ font-family:var(--inter); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--funke); margin:44px 0 4px; }
.lese h2.w-nach-regel{ margin-top:0; }

/* Hinweiskasten */
.w-hinweis{ font-size:14px; line-height:1.6; color:var(--ink-soft); background:var(--dunst); border-radius:12px; padding:16px 18px; margin:0 0 36px; }

/* Tabelle im Beitrag */
.w-tabelle{ width:100%; border-collapse:collapse; font-size:15px; margin:6px 0 4px; }
.w-tabelle th{ text-align:left; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); padding:0 0 8px; border-bottom:1px solid var(--linie-stark); }
.w-tabelle td{ padding:11px 0; border-bottom:1px solid var(--linie); color:var(--ink-soft); vertical-align:top; }
.w-tabelle td:last-child, .w-tabelle th:last-child{ text-align:right; white-space:nowrap; color:var(--ink); font-weight:600; }
.w-tabelle tr.summe td{ border-bottom:0; border-top:1px solid var(--linie-stark); color:var(--ink); font-weight:600; }

/* Karten mit Titelzahl statt Bild (keine Fotos, keine KI-Bilder) */
.w-karte .w-bild{ display:flex; align-items:flex-end; padding:16px 18px; }
.w-karte .w-bild b{ font-family:var(--jost); font-weight:300; font-size:44px; line-height:1; color:var(--tief); letter-spacing:-.02em; }
.w-karte[data-typ="paper"] .w-bild b{ color:#fff; }
.w-karte .w-bild small{ font-size:12px; color:var(--ink-soft); margin-left:10px; margin-bottom:5px; }
.w-karte[data-typ="paper"] .w-bild small{ color:var(--hell-2); }

/* ---- Fotos (28.09.2026) ------------------------------------------------- */
/* Karten: Foto als Hintergrund, Titelzahl bleibt lesbar über einem Verlauf */
.w-karte .w-bild.foto{ height:180px; position:relative; overflow:hidden; background:var(--tief) center/cover no-repeat; }
.w-karte .w-bild.foto::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,34,38,0) 35%,rgba(11,34,38,.78)); }
.w-karte .w-bild.foto b, .w-karte .w-bild.foto small{ position:relative; color:#fff !important; }
.w-karte .w-bild.foto small{ color:rgba(255,255,255,.85) !important; }
.w-karte:hover .w-bild.foto{ background-size:cover; }
/* Titelbild im Beitrag */
.w-titelbild{ margin:0 0 32px; }
.w-titelbild img{ display:block; width:100%; height:clamp(220px,34vw,440px); object-fit:cover; border-radius:16px; }
.w-titelbild figcaption{ font-size:12px; color:var(--ink-mute); margin-top:8px; }
/* Hauptbeitrag mit Foto */
.w-haupt-text.foto{ background:linear-gradient(90deg,rgba(11,34,38,.94) 45%,rgba(11,34,38,.55)), var(--foto) center/cover no-repeat; }

/* ---- Passende Leistungen am Beitragsende (28.09.2026) -------------------- */
.w-leistungen{ margin:44px 0 0; padding:26px 28px; border:1px solid var(--linie); border-radius:16px; }
.w-leistungen .w-typ{ display:block; margin-bottom:14px; }
.w-leistungen div{ display:grid; gap:10px; }
@media (min-width:700px){ .w-leistungen div{ grid-template-columns:repeat(3,1fr); } }
.w-leistungen a{ display:block; padding:14px 16px; border-radius:12px; background:var(--dunst); text-decoration:none; transition:background .2s; }
.w-leistungen a:hover{ background:var(--wash-1); }
.w-leistungen b{ display:block; font-family:var(--jost); font-weight:500; font-size:17px; color:var(--accent-tief); margin-bottom:4px; }
.w-leistungen span{ font-size:13.5px; line-height:1.45; color:var(--ink-soft); }
.lese a.w-link{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.w-typ[data-typ="ratgeber"]{ color:var(--accent-tief); }  /* 28.09.2026: eigene Rubrik Ratgeber */