/* NexTao Artikel (seit 08.11.2026): Artikelkarten, Artikelseite, KI-Kennzeichnung.
   Ergänzt nx.css und wird nur auf Startseite, Kategorieseiten und Artikeln geladen (css: true in der Seite). */

/* KI-Kennzeichnung, Standard aus C:\cc\_ki-hinweis\badge: Einblendung bleibt 18 px hoch */
.ki-bild { position: relative; margin: 0; }
.ki-bild > .ki-badge { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: auto; height: 18px; margin: 0; pointer-events: none; }

/* ---------- Artikelkarten ---------- */
.artikelkarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); }
.artikelkarten--eins { grid-template-columns: minmax(0, 1fr); }
.artikelkarte {
  --f: 16px;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch;
  background: var(--weiss); color: inherit; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--f)) 0, 100% var(--f), 100% 100%, 0 100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.abschnitt--weiss .artikelkarte { background: var(--papier); }
.artikelkarte:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.artikelkarte__bild { position: relative; overflow: hidden; background: var(--himmel); min-height: 230px; }
.artikelkarte__bild > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.artikelkarte:hover .artikelkarte__bild > img:first-child { transform: scale(1.04); }
.artikelkarte__text { display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.1rem, 2.2vw, 1.6rem); }
.artikelkarte__kicker { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rot); }
.artikelkarte h3 { font-size: clamp(1.08rem, 1.5vw, 1.28rem); font-stretch: 115%; line-height: 1.2; transition: color .2s ease; }
.artikelkarte p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.artikelkarte__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--nebel); font-family: var(--mono); font-size: .74rem; color: var(--stahl); }
.artikelkarte__mehr { color: var(--rot); font-weight: 600; }
.artikelkarte:hover h3 { color: var(--rot); }
.artikelkarten--eins .artikelkarte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.artikelkarten--eins .artikelkarte__bild { min-height: 320px; }
.artikelkarten--eins .artikelkarte__text { padding: clamp(1.3rem, 3vw, 2.4rem); gap: .7rem; }
.artikelkarten--eins .artikelkarte h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.artikelkarten--eins .artikelkarte p { font-size: 1.02rem; }
@media (max-width: 1100px) { .artikelkarten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .artikelkarte, .artikelkarten--eins .artikelkarte { grid-template-columns: minmax(0, 1fr); }
  .artikelkarte__bild { aspect-ratio: 16 / 9; min-height: 0; }
}

/* Teaser-Reihe auf der Startseite, schließt an den Hero an */
.neu { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.neu__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 3rem; align-items: end; border-top: 1px solid var(--nebel); padding-top: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.neu__kopf .marke { margin-bottom: .6rem; }
.neu__kopf p:last-child { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .neu__kopf { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Artikelseite ---------- */
.artikelkopf { border-bottom: 0; padding-bottom: clamp(2rem, 4vw, 3rem); }
.artikelkopf__innen { position: relative; max-width: 62rem; }
.artikelkopf h1 { max-width: 22em; }
.artikelkopf .lead { margin: 1.3rem 0 1.5rem; max-width: 44em; }
.artikelkopf__meta { display: flex; flex-wrap: wrap; gap: .4rem 0; margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--stahl); }
.artikelkopf__meta > * + *::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .8rem; background: var(--rot); transform: rotate(45deg) translateY(-2px); }

.artikelbild-band { background: linear-gradient(var(--weiss) 55%, transparent 55%); }
.artikelbild { aspect-ratio: 2 / 1; overflow: hidden; background: var(--himmel); box-shadow: var(--schatten); }
.artikelbild > img:first-child { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .artikelbild { aspect-ratio: 16 / 10; } }

.artikelkoerper { padding-top: clamp(3rem, 6vw, 5rem); }
.artikel { display: grid; grid-template-columns: 15.5rem minmax(0, 46rem); gap: clamp(2rem, 5vw, 5rem); justify-content: center; }
.artikel__inhalt { position: sticky; top: 108px; border-top: 2px solid var(--ink); padding-top: 1rem; }
.artikel__inhalt .mono { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stahl); margin-bottom: .9rem; }
.artikel__inhalt ol { list-style: none; counter-reset: punkt; display: grid; gap: .65rem; }
.artikel__inhalt li { counter-increment: punkt; display: grid; grid-template-columns: 2rem minmax(0, 1fr); font-size: .9rem; line-height: 1.35; }
.artikel__inhalt li::before { content: counter(punkt, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--rot); padding-top: .12rem; }
.artikel__inhalt a { color: var(--ink-2); text-decoration: none; }
.artikel__inhalt a:hover { color: var(--rot); }
@media (max-width: 1020px) { .artikel { grid-template-columns: minmax(0, 46rem); } .artikel__rand { display: none; } }

/* Fließtext */
.prosa { font-size: 1.08rem; line-height: 1.72; }
.prosa > p, .prosa > ul, .prosa > ol { max-width: 44em; }
.prosa > h2 { margin: 3.2rem 0 1rem; font-size: clamp(1.45rem, 2.5vw, 1.95rem); font-stretch: 118%; font-weight: 760; line-height: 1.14; letter-spacing: -.016em; scroll-margin-top: 108px; }
.prosa > h3 { margin: 2.2rem 0 .6rem; font-size: 1.18rem; font-stretch: 112%; }
.prosa a:not(.knopf) { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa a:not(.knopf):hover { text-decoration-thickness: 2px; }
.prosa > ul { padding-left: 1.2em; margin: 0 0 1.3em; }
.prosa > ul li { margin: .4em 0; padding-left: .2em; }
.prosa > ul li::marker { color: var(--rot); }
.prosa strong, .prosa b { font-weight: 680; }

/* Das Wichtigste in Kürze */
.kurzbox { background: var(--weiss); border-left: 4px solid var(--rot); padding: clamp(1.2rem, 2.6vw, 1.75rem); margin: 0 0 1rem; box-shadow: var(--schatten); }
.kurzbox .mono { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rot); margin-bottom: .9rem; }
.kurzbox ul { list-style: none; display: grid; gap: .65rem; }
.kurzbox li { position: relative; padding-left: 1.5em; font-size: 1rem; line-height: 1.55; }
.kurzbox li::before { content: ""; position: absolute; left: .1em; top: .6em; width: 7px; height: 7px; background: var(--rot); transform: rotate(45deg); }

/* Ablauf im Text */
.ablaufliste { list-style: none; counter-reset: schritt; margin: 1.6rem 0 2rem 14px; border-left: 2px solid var(--nebel); }
.ablaufliste li { counter-increment: schritt; position: relative; padding: 0 0 1.3rem 2.2rem; }
.ablaufliste li:last-child { padding-bottom: .2rem; }
.ablaufliste li::before {
  content: counter(schritt); position: absolute; left: -15px; top: .1rem; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--rot); color: #fff; font-family: var(--mono); font-size: .78rem; font-weight: 700;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.ablaufliste b { display: block; font-stretch: 112%; font-size: 1.05rem; margin-bottom: .15rem; }

/* Vergleichstabelle */
.tabelle { position: relative; overflow-x: auto; margin: 1.6rem 0 2rem; background: var(--weiss); border: 1px solid var(--nebel); }
.tabelle:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.tabelle table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .94rem; line-height: 1.45; }
.tabelle th, .tabelle td { padding: .75rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--nebel); }
.tabelle tr:last-child th, .tabelle tr:last-child td { border-bottom: 0; }
.tabelle thead th { background: var(--ink); color: #fff; font-stretch: 115%; font-weight: 720; font-size: 1rem; }
.tabelle thead td { background: var(--ink); }
.tabelle thead th:nth-child(3) { background: var(--rot); }
.tabelle tbody th { width: 34%; font-weight: 600; color: var(--ink-2); }
.tabelle tbody td:nth-child(3) { background: var(--rosa); }
.tabelle .preiszeile td { font-size: 1.2rem; font-weight: 780; font-stretch: 115%; color: var(--ink); }
.tabelle .ja, .tabelle .nein { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
.tabelle .ja { background: var(--gruen); clip-path: polygon(14% 50%, 0 64%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.tabelle .nein { width: 12px; height: 2px; background: #b9c5cf; vertical-align: middle; }
@media (max-width: 600px) {
  .tabelle table { min-width: 0; font-size: .82rem; }
  .tabelle th, .tabelle td { padding: .6rem .45rem; hyphens: auto; -webkit-hyphens: auto; }
  .tabelle thead th { font-size: .86rem; }
  .tabelle tbody th { width: 31%; }
  .tabelle .preiszeile td { font-size: 1rem; }
}

/* Rechenbeispiel */
.beispiel { position: relative; margin: 1.4rem 0 1.6rem; padding: clamp(1.3rem, 3vw, 2rem); background: var(--himmel); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.beispiel__marke { display: inline-block; margin-bottom: 1rem; padding: .3rem .6rem; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.beispiel p { max-width: 44em; }
.beispiel > :last-child { margin-bottom: 0; }
.rechnung { margin: 1.2rem 0; background: var(--weiss); border: 1px solid var(--nebel); }
.rechnung div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--nebel); }
.rechnung div:last-child { border-bottom: 0; }
.rechnung dt { font-size: .95rem; color: var(--ink-2); }
.rechnung dd { margin: 0; font-weight: 750; font-stretch: 112%; white-space: nowrap; }

/* FAQ im Fließtext */
.prosa .fragen { margin-top: .5rem; }
.prosa .fragen summary { font-size: 1.06rem; }
.prosa .fragen details p { font-size: 1rem; }

/* Abschlusskasten zur Marke */
.ctabox {
  position: relative; overflow: hidden; margin-top: 3.4rem; padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--ink); color: #fff;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.ctabox .bogen { position: absolute; color: rgba(255, 255, 255, .09); right: -18%; bottom: -12%; width: 92%; height: 150px; }
.ctabox > :not(.bogen) { position: relative; }
.ctabox .mono { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f2b9bd; }
.ctabox__titel { margin: .5rem 0 .7rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-stretch: 118%; font-weight: 780; line-height: 1.12; letter-spacing: -.014em; color: #fff; }
.ctabox p { color: #d3dde5; max-width: 36em; }
.ctabox .knoepfe { margin-top: 1.4rem; }
.knopf--weiss { background: #fff; color: var(--ink); }
.knopf--weiss:hover { background: var(--himmel); }
.knopf--weiss:focus-visible { outline-color: var(--rot); }

/* Weiterlesen */
.verwandt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); align-items: stretch; }
.verwandt__links .raster { height: 100%; grid-template-rows: 1fr 1fr; }
@media (max-width: 980px) { .verwandt { grid-template-columns: minmax(0, 1fr); } .verwandt__links .raster { grid-template-rows: none; } }

@media print {
  .artikel__rand, .ctabox .bogen, .verwandt { display: none; }
  .artikel { grid-template-columns: 1fr; }
}