/* korrektur-ki-kostenlos-online: inline */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --green: #006b3e; --green-dark: #006b3e; --green-bg: #ecf7f1; --text: #1a1a2e; --muted: #374151; --bg: #fff; --bg-alt: #f5f7fa; --bg-top: #f1f3f5; --border: #e5e7eb; --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 14px rgba(0,0,0,.08); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif; --max: 1120px; }
body { font-family: var(--font); color: var(--text); background: var(--bg-alt); font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.topbar { background: linear-gradient(to right, #00c06a, #005430); border-bottom: 1px solid rgba(0,0,0,.18); font-size:14px; color: rgba(255,255,255,.92); }
.topbar-inner { max-width: var(--max); margin: auto; padding: .45rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar-left { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.topbar-left span { display: flex; align-items: center; gap: .3rem; }
.topbar-right a { color: rgba(255,255,255,.92); transition: color .2s; }
.topbar-right a:hover { color: #fff; }
.mainnav { background: var(--bg); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: var(--max); margin: auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 2rem; height: 62px; }
.nav-logo { font-size: 1.25rem; font-weight: 800; color: var(--green); letter-spacing: -.5px; white-space: nowrap; }
.nav-links { display: flex; gap: .25rem; align-items: center; list-style: none; margin-left: .5rem; }
.nav-links a { padding: .45rem .85rem; border-radius: 6px; font-size: .88rem; font-weight: 500; color: var(--text); transition: background .15s, color .15s; white-space: nowrap; }
.nav-links a:hover { background: var(--bg-alt); color: var(--green); }
.nav-links a.active { background: var(--green-bg); color: var(--green); font-weight: 700; }
.nav-cta { margin-left: auto; flex-shrink: 0; display: flex; gap: .5rem; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.2rem; border-radius: 7px; font-size: .88rem; font-weight: 600; cursor: pointer; border: none; transition: all .18s; text-decoration: none; }
.btn-primary { background: linear-gradient(to right, #00c06a, #005430); color: #fff; }
.btn-primary:hover { background: linear-gradient(to right, #009a58, #003d24); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,135,78,.25); }
.btn-outline { background: transparent; color: var(--green); border: 2px solid var(--green); }
.btn-outline:hover { background: linear-gradient(var(--green-bg),var(--green-bg)) padding-box, linear-gradient(to right, #00c06a, #005430) border-box; }
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .4rem; background: none; border: none; }
.burger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: all .25s; }
.hero { background: var(--bg-alt); padding: 3.5rem 1.5rem 0.5rem; }
.hero-inner { max-width: var(--max); margin: auto; display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; }
/* Kopfband als umbrechende Reihe: die Textspalte haelt 340 Pixel, die Karte 300, und sobald beide mit dem Abstand nicht mehr nebeneinander passen, rutscht die Karte unter die Ueberschrift. Die Karte waechst hoechstens auf 460 Pixel und gibt den Rest an die Textspalte zurueck, breite Fenster bleiben deshalb unveraendert. */
.hero-inner > * { flex: 1 1 340px; min-width: 0; }
.hero-inner > .hero-card { flex: 1 1 300px; max-width: 460px; }
.hero-label {
      display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem;
      background: var(--green-bg); color: var(--green-dark);
      padding: .28rem .8rem; border-radius: 100px;
      font-size:14px; font-weight: 600; margin-bottom: 1.1rem;
    }
.hero h1 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.hero-sub { font-size: 1.05rem; color: var(--muted); max-width: 520px; margin-bottom: 1.5rem; line-height: 1.7; }
.hero-btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow-md); padding: 1rem 1.4rem; border: 1px solid var(--border); }
.hero-card h3 { font-size:14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .5rem; }
.hrow { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border); gap: .75rem; text-decoration: none; color: inherit; transition: background .15s; border-radius: 6px; margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; }
    a.hrow:hover { background: var(--green-bg); }
.hrow:last-child { border-bottom: none; }
.hrow-label { font-size: .85rem; font-weight: 600; }
.hrow-sub { font-size:12px; color: var(--muted); margin-top: 0; }
.hrow-price { background: var(--green-bg); color: #004d2b; font-weight: 800; font-size: .85rem; padding: .2rem .6rem; border-radius: 20px; white-space: nowrap; }
.hero-card-note { font-size:12px; color: var(--muted); margin-top: .5rem; text-align: center; }
.usp-strip { background: var(--green); color: #fff; padding: .85rem 1.5rem; }
.usp-inner { max-width: var(--max); margin: auto; display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.usp-item { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 500; }
.features { padding: 3.5rem 1.5rem; background: var(--bg-alt); }
.section-header { text-align: center; margin-bottom: 2.2rem; max-width: var(--max); margin-left: auto; margin-right: auto; }
.section-label { display: inline-block; background: var(--green-bg); color: var(--green); font-size:14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 20px; margin-bottom: .6rem; }
.section-header h2 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 800; }
.section-header p { color: var(--muted); margin-top: .5rem; font-size: .97rem; }
.cards-grid { max-width: var(--max); margin: auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.card { background: #fff; border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); border: 1px solid var(--border); }
.card-icon { font-size: 1.8rem; margin-bottom: .8rem; }
.card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.card p { font-size: .88rem; color: var(--muted); line-height: 1.6; }
.content-wrap { max-width: var(--max); margin: 3rem auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
.prose h2 { font-size: 1.35rem; font-weight: 800; margin: 1.6rem 0 .7rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); margin-bottom: .9rem; font-size: .96rem; line-height: 1.75; }
.aside-box { background: var(--green-bg); border: 1px solid rgba(0,135,78,.2); border-radius: var(--radius); padding: 1.4rem; }
.aside-box h4 { font-size: .95rem; font-weight: 700; margin-bottom: .9rem; color: var(--green); }
.aside-list { list-style: none; }
.aside-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; color: var(--text); padding: .35rem 0; border-bottom: 1px solid rgba(0,135,78,.12); }
.aside-list li:last-child { border-bottom: none; }
.aside-list li::before { content: "\2713"; color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: .05rem; }
.faq-section { background: var(--bg-alt); padding: 3.5rem 1.5rem; }
.faq-grid { max-width: var(--max); margin: 2rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.faq-item { background: #fff; border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow); border: 1px solid var(--border); }
.faq-item h3 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; }
.faq-item p { font-size: .88rem; color: var(--muted); line-height: 1.65; }
.cta-banner { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; padding: 3rem 1.5rem; text-align: center; }
.cta-banner h2 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 800; margin-bottom: .6rem; }
.cta-banner p { opacity: .9; margin-bottom: 1.5rem; font-size: 1rem; }
.cta-banner .btn-white { background: #fff; color: var(--green); font-weight: 700; padding: .75rem 2rem; border-radius: 8px; font-size: 1rem; display: inline-flex; align-items: center; gap: .5rem; transition: all .18s; }
.cta-banner .btn-white:hover { background: #f0fdf4; transform: translateY(-1px); }
.footer { background: #111827; color: #9ca3af; padding: 3rem 1.5rem 1.5rem; }
.footer-grid { max-width: 1240px; margin: auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer-brand p { font-size:14px; line-height: 1.7; margin-top: .6rem; }
.footer-col h4 { color: #f9fafb; font-size:14px; font-weight: 700; margin-bottom: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0; }
.footer-col ul li a { font-size:14px; color: #9ca3af; transition: color .2s; }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom { max-width: var(--max); margin: auto; padding-top: 1.2rem; border-top: 1px solid #374151; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; font-size:14px; }
.footer-logo { font-size: 1.1rem; font-weight: 800; color: #fff; }
@media(max-width:900px) { .hero-inner { grid-template-columns: 1fr; } .cards-grid { grid-template-columns: repeat(2,1fr); } .content-wrap { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:640px) { .nav-links { display: none; flex-direction: column; position: absolute; top: 62px; left: 0; right: 0; background: #fff; border-bottom: 2px solid var(--border); padding: 1rem 1.5rem; gap: .25rem; } .nav-links.open { display: flex; } .burger { display: flex; } .cards-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .usp-inner { gap: 1rem; } }

    /* ─── nav v2 override ─────────────────────── */
    .btn-sm { padding: .45rem 1rem; font-size:14px; }
    .btn-secondary { background:#fff; color:#000; border:2px solid #000; padding-top:calc(.45rem - 2px); padding-bottom:calc(.45rem - 2px); }
    .btn-secondary:hover { background:#000; color:#fff; border-color:#000; }
    .topbar { font-size:14px; }
    .topbar-inner { height: 34px; padding: 0 1.5rem; flex-wrap: nowrap; }
    .topbar-left { color: rgba(255,255,255,.92); flex-wrap: nowrap; gap: 1.25rem; }
    .topbar-left a { color: rgba(255,255,255,.92); transition: color .15s; }
    .topbar-left a:hover { color: #fff; }
    .topbar-right { display: flex; align-items: center; gap: .85rem; }
    .topbar-right a { font-weight: 500; transition: color .15s; white-space: nowrap; }
    .topbar-sep { color: rgba(255,255,255,.45); }
    nav.mainnav { background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.05); }
    .nav-inner { height: 60px; gap: 1.5rem; }
    .nav-logo { font-size: 0; }
    .nav-logo img { height: 32px; width: auto; display: block; }
    .nav-links { list-style: none; margin-left: 0; gap: .1rem; flex: 1; }
    .nav-links li { display: contents; }
    .nav-links a { color: var(--muted); padding: .38rem .62rem; font-size:14px; }
    .nav-links a:hover { color: var(--green); background: var(--green-bg); }
    .nav-cta { flex-shrink: 0; }
    .nav-burger { display: none; flex-direction: column; gap: 5px; padding: 6px; margin-left: auto; cursor: pointer; border: none; background: none; }
    .nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
    .nav-mobile { max-height: 0; overflow: hidden; visibility: hidden; background: var(--bg); border-top: 1px solid var(--border); flex-direction: column; display: flex; }
    .nav-mobile.open { max-height: calc(100vh - 60px); min-height: calc(100vh - 60px); overflow-y: auto; visibility: visible; background: #fff; }
    .nav-mobile a { padding: .7rem 1.5rem; font-size: .95rem; color: var(--text); border-bottom: 1px solid var(--border); font-weight: 500; }
    .nav-mobile .btn { margin: 1rem 1.5rem; justify-content: center; }
    @media (max-width: 640px) {
      .topbar { display: none; }
      .nav-links, .nav-cta { display: none; }
      .nav-burger { display: flex; }
    }

    h1.hero-label { font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; }
/* korrektur-ki-kostenlos-online: hero-h2-fix */
h1.hero-label ~ h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem) !important; line-height: 1.2 !important; font-weight: 800 !important; margin-bottom: 1.2rem !important; }
  .footer-social { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .5rem; }
  .footer-social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7) !important; transition: background .15s, color .15s; text-decoration: none !important; }
  .footer-social a:hover { background: rgba(255,255,255,.2) !important; color: #fff !important; }
/* korrektur-ki-kostenlos-online: inline */
.rsp-tool{max-width:900px;margin:0 auto;padding:0 1.5rem}
.rsp-box{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:1.5rem;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.rsp-tool h2{font-size:1.5rem;font-weight:800;margin-bottom:.4rem;text-align:center}
.rsp-tool .rsp-sub{color:#374151;text-align:center;margin-bottom:1.2rem;font-size:.95rem}
.rsp-ta{width:100%;min-height:170px;border:1.5px solid #d1d5db;border-radius:10px;padding:.9rem 1rem;font-family:inherit;font-size:.95rem;line-height:1.6;resize:vertical;outline:none}
.rsp-ta:focus{border-color:#006b3e}
.rsp-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.7rem;flex-wrap:wrap}
.rsp-count{font-size:.8rem;color:#6b7280}
.rsp-btn{background:linear-gradient(to right,#00c06a,#005430);color:#fff;border:none;border-radius:8px;padding:.65rem 1.4rem;font-weight:700;font-size:.95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
.rsp-btn:disabled{opacity:.6;cursor:not-allowed}
.rsp-result{margin-top:1.2rem;display:none}
.rsp-result.on{display:block}
.rsp-out{border:1px solid #e5e7eb;border-radius:10px;padding:1rem;background:#f9fafb;line-height:1.7;font-size:.95rem;white-space:pre-wrap}
.rsp-ch{background:#d1fae5;color:#065f46;border-radius:3px;padding:0 2px;font-weight:600}
.rsp-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap}
.rsp-badge{font-weight:700;color:#006b3e}
.rsp-sm{background:#fff;border:1.5px solid #006b3e;color:#006b3e;border-radius:7px;padding:.4rem .9rem;font-weight:600;font-size:.85rem;cursor:pointer}
.rsp-upsell{margin-top:1rem;background:#ecf7f1;border:1px solid #a7d5bc;border-radius:10px;padding:.9rem 1.1rem;font-size:.9rem;color:#1a1a2e}
.rsp-upsell a{color:#006b3e;font-weight:700}
.rsp-err{color:#dc2626;font-size:.9rem;margin-top:.6rem}
.rsp-note{margin-top:.9rem;font-size:.82rem;color:#6b7280;text-align:center}
.rsp-left{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.rsp-upload{cursor:pointer;font-size:.85rem;color:#006b3e;font-weight:600;border:1.5px solid #006b3e;border-radius:7px;padding:.4rem .8rem;white-space:nowrap}
.rsp-upload:hover{background:#ecf7f1}
.hero-trust{display:inline-flex;align-items:center;gap:.45rem;background:var(--green-bg);color:#004d2b;border:1px solid #a7d5bc;border-radius:8px;padding:.6rem .95rem;font-weight:600;font-size:.9rem}
/* korrektur-ki-kostenlos-online: css/ki-tool-hero-title-v1.css */
.hero .ki-tool-hero-title {
  font-size: clamp(1.85rem, 4.5vw, 2.9rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  margin-bottom: 1.2rem !important;
}
/* korrektur-ki-kostenlos-online: css/hero-card-header-v4.css */
/* Rechte Desktop-Hero-Cards beginnen auf der Oberkante der grossen H2. */
@media(min-width:821px){
  .hero.hero-card-top{padding-top:60px}
  .hero.hero-card-top>.hero-inner{align-items:start}
}
@media(min-width:961px){
  .hero.hero-card-top:not(.hero-card-flush)>.hero-inner>.hero-card,
  .hero.hero-card-top:not(.hero-card-flush)>.hero-inner>.hero-result-img{margin-top:44.328125px}
}
/* Die lange Uebersetzungs-Pill ist am schmalsten Desktop zweizeilig. */
@media(min-width:961px) and (max-width:971px){
  .hero.hero-card-top.hero-card-heading-wrap>.hero-inner>.hero-card,
  .hero.hero-card-top.hero-card-heading-wrap>.hero-inner>.hero-result-img{margin-top:65.328125px}
}
@media(min-width:961px){
  .hero.hero-card-reference>.hero-inner{align-items:start}
  .hero.hero-card-reference>.hero-inner>.hero-card{margin-top:97.1875px}
}
/* Steht eine Autorzeile zwischen H1 und H2 (Pflicht seit 03.11.2026), liegt die H2 um die Zeilenhoehe tiefer. Die Zeile bekommt feste Mindesthoehe (zweizeilig am schmalen Desktop), die Card den Versatz 44.328125 + 41.1875 + 25.578125. */
@media(min-width:961px){
  .hero.hero-card-top.hero-card-autorzeile .autor-zeile{min-height:41.1875px;box-sizing:border-box}
  .hero.hero-card-top.hero-card-autorzeile>.hero-inner>.hero-card,
  .hero.hero-card-top.hero-card-autorzeile>.hero-inner>.hero-result-img{margin-top:111.09375px}
}
/* korrektur-ki-kostenlos-online: css/hero-card-flush-v1.css */
/* KI-Tool-Seiten: rechte Hero-Card buendig auf der linken Oberkante.
   Bewusste Ausnahme vom Gleichlauf mit der Startseitenkarte. Die fuenf
   Klassen im Selektor schlagen die vier Klassen des Gleichlaufs in
   css/hero-card-header-v4.css unabhaengig von der Ladereihenfolge. */
@media(min-width:821px){
  .hero.hero-card-top.hero-card-flush>.hero-inner>.hero-card,
  .hero.hero-card-top.hero-card-flush>.hero-inner>.hero-result-img{margin-top:0}
}
/* korrektur-ki-kostenlos-online: tnav-produktseite */
/* Themen-Navigation im linken Seitenrand. Der Inhalt bleibt exakt so breit
   und so mittig wie auf einer Seite ohne Navigation: nichts rutscht nach
   rechts, nichts wird schmaler. Unter 1720px passt die Box nicht mehr in den
   Rand und wird ausgeblendet, ab 770px abwaerts bleibt das aufklappbare Navi
   ueber dem Inhalt. Die Klasse steht dreimal im Selektor, damit die Regeln
   die site-shell-Regel mit :not(:has(...)) schlagen, die auf drei Klassen
   kommt. */
@media (min-width: 1720px) {
  body main.has-topicnav.has-topicnav.has-topicnav {
    max-width: none; padding: 0;
    /* ohne Abstand zwischen den Spuren und Zeilen, damit der Inhalt
       genauso dicht unter dem Hero sitzt wie ohne Navigation */
    gap: 0;
    /* Spur 1 ist der linke Seitenrand minus 1,5rem Abstand zum Inhalt */
    grid-template-columns: calc(50% - 584px) minmax(0, 1fr);
  }
  /* holt die Inhaltsspalte ueber Spur 1 zurueck auf die volle Breite,
     Spur 1 entspricht dabei der Breite von Spur 2 minus 1168px */
  body main.has-topicnav.has-topicnav.has-topicnav > .content-col { margin-left: calc(1168px - 100%); }
  body main.has-topicnav.has-topicnav.has-topicnav .topicnav {
    grid-column: 1; justify-self: end; width: 226px; margin-right: 10px; z-index: 5;
  }
}
/* Die Karten-Raster stehen wieder auf voller Breite, die Navigation
   schnuert die Inhaltsspalte nicht mehr ein. */
@media (min-width: 771px) {
  body main.has-topicnav.has-topicnav.has-topicnav .kdtp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* korrektur-ki-kostenlos-online: tnav-breite */
/* Ab 1440 stellt die Site-Shell die Inhaltsspalte auf feste 800 Pixel
   und zentriert sie. Die Navigation steht links daneben, rechts blieben
   gemessene 344 bis 484 Pixel leer, waehrend die Ueberschrift in der
   linken Kopfbandspalte auf drei Zeilen umbrach. Die Spalte waechst
   deshalb mit dem Fenster mit, bis 1168 Pixel. Spur 1 haelt 321 Pixel,
   damit die Navigation nicht an der Fensterkante klebt, und die dritte
   Spur nimmt den Rest, wodurch das Paar aus Navigation und Inhalt ab
   1550 Pixeln wieder mittig steht. Die Klasse steht dreimal im
   Selektor, damit die Regel die Shell-Regel schlaegt, die auf drei
   Klassen kommt.
   Ab 1720 uebernimmt der eigene Randnavi-Block, deshalb endet diese
   Regel dort. */
@media (min-width: 1440px) and (max-width: 1719.98px) {
  body main.has-topicnav.has-topicnav.has-topicnav:not(:has(>.content-col>.wrap)) {
    grid-template-columns: minmax(321px, 1fr) minmax(0, min(1168px, 100% - 380px)) minmax(0, 1fr);
  }
}
/* korrektur-ki-kostenlos-online: hero-abstand */
/* Mindestabstand zwischen Kopfband und dem, was darunter kommt. Nach dem
   Zusammenruecken vom 01.09.2026 begann das Werkzeug 26 Pixel unter der
   Kopfbandkante und wirkte angeklebt. Der Abstand steht bewusst als
   margin ausserhalb des Kopfbands: als padding waere er Teil des farbigen
   Bandes, und das Werkzeug klebte weiterhin an dessen Unterkante. Der
   Selektor nimmt main dazu, damit er die seiteneigene .hero-Regel schlaegt,
   egal in welcher Reihenfolge die Bloecke stehen. */
main .hero { margin-bottom: 2rem; }
/* Ab 1720 setzt der Randnavi-Block den Zeilenabstand des Rasters auf 0,
   damit der Inhalt so dicht unter dem Kopfband sitzt wie ohne Navigation.
   Damit faellt die Zeile von 26 Pixeln weg, die unterhalb dieser Grenze
   zum Abstand beitraegt, und aus 58 Pixeln wuerden 32. Hier stehen
   deshalb 3,5rem, damit der Abstand ueber alle Breiten derselbe bleibt. */
@media (min-width: 1720px) { main .hero { margin-bottom: 3.5rem; } }
/* korrektur-ki-kostenlos-online: hero-callout-hoehe */
/* Der Callout endet unten auf derselben Linie wie die Karte rechts.
   `hero-card-header-v4.css` stellt die Kopfbandspalten auf
   align-items: start, damit die Karte buendig oben sitzt; das bleibt so.
   Nur die linke Spalte bekommt align-self: stretch, wird damit so hoch
   wie die Zeile, und der Callout als ihr letztes Element nimmt den Rest.
   Wo die linke Spalte ohnehin die hoehere ist, aendert sich nichts.
   Erst ab 1440, weil das Kopfband darunter zu schmal fuer die
   Nebeneinander-Fassung des Ablagefeldes ist. */
@media (min-width: 1440px) {
  main .hero-inner > *:first-child {
    align-self: stretch; display: flex; flex-direction: column;
  }
  main .hero-inner > *:first-child > .ki-scan-callout--in-hero-col { flex: 1 1 auto; }
}
/* korrektur-ki-kostenlos-online: upload-dsgvo-reihe */
/* Upload-Trichter und Datenschutzkarte stehen nebeneinander, sobald die
   Inhaltsspalte breit genug ist. Beide Karten sind auf 560 Pixel
   gedeckelt; mit der Basis von 480 und 2rem Abstand brauchen sie
   nebeneinander 992 Pixel. Passt das nicht, bricht die Reihe um und beide
   stehen wieder untereinander, genau wie vorher. Die Aussenabstaende der
   beiden Karten wandern dabei an die Reihe, sonst zoege der eigene
   auto-Rand jede Karte weiter in die Mitte ihrer halben Zeile. */
.kd-upload-dsgvo {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  align-items: flex-start;
  justify-content: center;
  margin: 2.2rem auto 2.6rem;
}
.kd-upload-dsgvo > section { flex: 1 1 480px; }
/* Sobald eine Datei im Trichter liegt, blendet er die Produktwahl ein
   und wird breiter. Dafuer braucht er die ganze Zeile, sonst bleibt er
   auf seiner halben stehen: der Kasten meldete im Test 511 statt der
   verlangten 780 Pixel. Die Reihe loest sich in diesem Zustand auf und
   beide Karten stehen wieder untereinander. */
.kd-upload-dsgvo:has(> section.kd-upload-filled) { display: block; }
/* korrektur-ki-kostenlos-online: css/ki-scan-callout-v1.css */
.ki-scan-callout {
  display: grid;
  /* Die Textspalte nimmt nur so viel Breite, wie ihre Copy braucht. Alles,
     was danach frei bleibt, geht an das Drop-Feld. Bei langer Copy faellt es
     auf seine 154 Pixel zurueck, damit die Zeilenzahl unveraendert bleibt. */
  grid-template-columns: 40px minmax(0, auto) minmax(154px, 1fr);
  align-items: center;
  gap: 12px 28px;
  width: min(820px, calc(100% - 3rem));
  margin: .2rem auto 1.6rem;
  padding: 9px 10px 9px 12px;
  border: 1px solid #d8e5f5;
  border-radius: 9px;
  background: #f9fbfe;
  color: #1f2937;
  box-sizing: border-box;
}

/* Im Werkzeugkasten fuellt der Callout die Spalte des Kastens darunter aus:
   gleiche Breite, gleiche Kante, nur ein schmaler Spalt dazwischen. */
.ki-scan-callout--in-box {
  width: auto;
  margin: 0 0 .5rem;
}

/* Seit dem 01.09.2026 steht der Callout im Kopfband selbst, direkt unter der
   Ueberschriftenzeile. Dort erbt er den Innenraum des Hero und braucht weder
   eigene Breite noch eigene Seitenraender; den Abstand nach unten setzt die
   Hero-Polsterung. */
.ki-scan-callout--in-hero {
  width: auto;
  max-width: var(--max);
  margin: 0 auto;
}

/* Seit dem 01.09.2026 steht der Callout in der linken Kopfbandspalte, direkt
   unter der Verlaufsueberschrift, und nicht mehr unter dem gesamten Kopfband:
   dort stuende er auch unterhalb der Karte rechts. Diese Spalte ist je nach
   Layout und Fensterbreite nur 235 bis 620 Pixel breit, gemessen auf den vier
   Bauarten der Seiten. Die dreispaltige Zeile der Grundregel braeche darin auf
   ein Wort je Zeile um, deshalb liegt das Ablagefeld hier immer in einer
   eigenen Zeile unter Symbol und Text: dieselbe Aufteilung, die unterhalb von
   720 Pixeln ohnehin greift.
   Die Regel --in-hero darueber bleibt stehen, bis der Rollout durch ist: das
   Stylesheet geht vor den Seiten live, und in diesem Fenster tragen die Seiten
   noch die alte Klasse. */
.ki-scan-callout--in-hero-col {
  width: auto;
  max-width: none;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 1rem 0 0;
}

.ki-scan-callout--in-hero-col .ki-scan-callout__drop {
  grid-column: 1 / -1;
  min-height: 38px;
}

.ki-scan-callout--in-hero-col .ki-scan-callout__drop-text small {
  display: inline;
  margin-left: 4px;
}

/* Ab 1440 Pixeln ist die Kopfbandspalte mindestens 504 Pixel breit. Dort steht
   das Ablagefeld neben der Copy statt darunter und nimmt die rechte Haelfte
   ueber die volle Hoehe des Blocks ein: es wird dadurch hoeher statt schmal
   und lang. Unterhalb bleibt die gestapelte Fassung, denn bei 359 Pixeln
   Spaltenbreite blieben der Copy daneben nur rund 116 Pixel. */
@media (min-width: 1440px) {
  .ki-scan-callout--in-hero-col {
    grid-template-columns: 40px minmax(0, 1fr) minmax(170px, 38%);
    align-items: center;
    row-gap: 0;
  }

  .ki-scan-callout--in-hero-col .ki-scan-callout__drop {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
  }
}

/* Zwischen dem Mobilbruch der Seite und rund 1240 Pixeln bleibt vom
   Kopfbandraster `1fr 460px` neben dem Themenbaum nur eine sehr schmale linke
   Spalte uebrig: auf roter-faden-check bei 950 Pixeln gemessene 137. Das
   trifft die Ueberschrift dort ohnehin, der Callout soll es nicht
   verschlimmern, deshalb faellt in diesem Band das Symbol weg und der Text
   bekommt die ganze Zeile. Ueber die Fensterbreite und nicht ueber die
   Spaltenbreite: `container-type: inline-size` waere der genauere Weg,
   nimmt der Spalte aber ihren Mindestinhalt und liess sie im Test von 137
   auf 57 Pixel zusammenfallen. */
@media (min-width: 721px) and (max-width: 1240px) {
  .ki-scan-callout--in-hero-col {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .ki-scan-callout--in-hero-col .ki-scan-callout__icon {
    display: none;
  }
}

/* Bleibt der Callout im Kopfband ueber dem Themenbaum, hat er keinen Kasten,
   dessen Breite er erben koennte. Dann spiegelt er die Inhaltsspalte samt der
   1,5rem Polsterung, mit der dort jeder Kasten eingerueckt ist. Die Werte
   stammen aus `main.has-topicnav` der Site-Shell; die drei Sprungmarken sind
   deren Breakpoints und in `_tests.test_ki_tool_scan_callout_browser`
   nachgemessen. */
main.has-topicnav > .topicnav-lead > .ki-scan-callout {
  width: auto;
  margin-left: calc(226px + 3.95rem + 1.5rem);
  margin-right: 1.5rem;
}

/* Ab 1440 steht die Inhaltsspalte mittig und ist auf 800 Pixel gedeckelt. */
@media (min-width: 1440px) {
  main.has-topicnav > .topicnav-lead > .ki-scan-callout {
    width: min(752px, calc(100% - 3rem));
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ab 1720 haengt der Themenbaum am Seitenrand und der Inhalt geht auf 1120. */
@media (min-width: 1720px) {
  main.has-topicnav > .topicnav-lead > .ki-scan-callout {
    width: min(1072px, calc(100% - 3rem));
  }
}

@media (max-width: 900px) {
  main.has-topicnav > .topicnav-lead > .ki-scan-callout {
    margin-left: calc(210px + 1.1rem + 1.5rem);
  }
}

@media (max-width: 770px) {
  main.has-topicnav > .topicnav-lead > .ki-scan-callout {
    width: min(820px, calc(100% - 3rem));
    margin-left: auto;
    margin-right: auto;
  }
}

.ki-scan-callout__icon {
  display: block;
  width: 40px;
  height: 40px;
  background: url("/images/ki-scanner-icon-ki-scanner-uni.png?v=20260717k") center / contain no-repeat;
}

.ki-scan-callout__copy {
  min-width: 0;
}

.ki-scan-callout__title {
  display: inline-block;
  color: #006b3e;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.ki-scan-callout__title:hover,
.ki-scan-callout__title:focus-visible {
  text-decoration: underline;
}

.ki-scan-callout__copy p {
  margin: 3px 0 0;
  color: #526071;
  font-size: .78rem;
  line-height: 1.35;
}

.ki-scan-callout__drop-icon {
  flex: 0 0 auto;
  color: #7c93ad;
}

.ki-scan-callout__drop {
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 5px 9px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #8fb2df;
  border-radius: 7px;
  background: #fff;
  color: #35577f;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease;
}

.ki-scan-callout__drop:hover,
.ki-scan-callout__drop:focus-within,
.ki-scan-callout__drop.is-dragging {
  border-color: #006b3e;
  background: #eef8f2;
}

.ki-scan-callout__drop-text {
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.25;
}

.ki-scan-callout__drop-text small {
  display: block;
  /* #738297 auf Weiss sind 3,91:1 und damit unter der WCAG-AA-Schwelle von
     4,5:1 (im Browser gemessen, 10,24px, nicht fett). Genau daran hing
     text-kuerzen-ki-online seit Wochen bei Accessibility 96, und der
     automatische Fix griff nicht: seine Liste kennt nur ganze Farbwerte in
     der Seite, diese Farbe steht aber in dieser gemeinsamen Datei.
     text-umschreiben-paraphrasieren-ki-online trug deshalb einen
     seitenlokalen Style-Override. #4b5563 hat 7,56:1 und dieselbe Grautoenung
     und wirkt hier fuer alle 28 einbindenden Seiten. */
  color: #4b5563;
  font-size: .64rem;
  font-weight: 500;
}

.ki-scan-callout__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Liegt eine Datei im Upload, braucht die Seitenauswahl den Platz: die drei
   Scan-Bubbles verschwinden, der schmale Kasten geht auf Inhaltsbreite und die
   Seitenvorschau nutzt dieselbe Kachelgroesse wie der KI-Detektor. */
.kd-upload-filled .kd-scan-badges {
  display: none;
}

section[aria-label="Plagiat- oder KI-Scan starten"].kd-upload-filled {
  max-width: min(820px, 100%) !important;
}

.kd-upload-filled #up-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
}

html[data-theme="dark"] .ki-scan-callout {
  border-color: #334b68;
  background: #172235;
  color: #e5edf7;
}

html[data-theme="dark"] .ki-scan-callout__copy p {
  color: #b9c5d5;
}

html[data-theme="dark"] .ki-scan-callout__drop {
  border-color: #58789f;
  background: #111c2c;
  color: #d8e8fb;
}

@media (max-width: 720px) {
  .ki-scan-callout {
    grid-template-columns: 34px minmax(0, 1fr);
    width: min(820px, calc(100% - 2rem));
    gap: 9px 10px;
    padding: 9px;
  }

  /* Im Kasten und in der Kopfbandspalte bleibt die Breite die des
     umgebenden Blocks, sonst steht der Callout auf dem Handy 32 Pixel
     schmaler als der Inhalt darunter und haengt neben der Ueberschrift. */
  .ki-scan-callout--in-box,
  .ki-scan-callout--in-hero-col {
    width: auto;
  }

  .ki-scan-callout__icon {
    width: 34px;
    height: 34px;
  }

  .ki-scan-callout__drop {
    grid-column: 1 / -1;
    min-height: 38px;
  }

  .ki-scan-callout__drop-text small {
    display: inline;
    margin-left: 4px;
  }
}
/* korrektur-ki-kostenlos-online: css/topicnav-edge.css */
/* Seiten mit Partnerleiste (`.topicnav-lead`) tragen dieses Stylesheet nicht
   alle absichtlich: der Kopf wird ueber die Seitenfamilien geteilt, deshalb
   liegt der Link auch auf rund 228 Ratgeber- und Wissensseiten. Echte
   Randnavi-Seiten sind allein die Landingpages aus
   `_topicnav_inject.EDGE_NAV_SLUGS`; nur bei ihnen enthaelt die Inhaltsspalte
   weder `.article` noch `.wrap`, sondern volle Seitenflaechen. Genau diese
   Unterscheidung steht unten in jedem Selektor: ab 1720 Pixeln darf die
   Navigation nur auf ihnen an den freien Seitenrand wandern. Auf allen
   anderen bleibt sie in Spalte 1 des Rasters, sonst reisst zwischen Baum und
   Inhaltskarte eine Luecke von 222 bis 363 Pixeln auf. */
@media(min-width:771px) and (max-width:1719.98px){
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.topicnav-lead{grid-column:2!important;grid-row:1;min-width:0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.topicnav-wrap{display:block;grid-column:1;grid-row:1/span 2;align-self:stretch}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.topicnav-wrap>.topicnav{margin:2rem 0}
  /* Nur die Artikelspalte gehoert in Zeile 2. Der Nachtragsblock nach der
     Partnerleiste traegt dieselbe Klasse content-col und landete dadurch in
     derselben Gitterzelle, also passgenau ueber dem Artikel: sichtbar auf 142
     Seiten zwischen 771 und 1719 Pixeln, also auf den haeufigsten
     Desktopbreiten. */
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col:not(.content-col-after-partner){grid-column:2;grid-row:2;min-width:0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col.content-col-after-partner{grid-column:2;grid-row:auto;min-width:0}
}
@media(min-width:1440px) and (max-width:1719.98px){
  body main.has-topicnav.has-topicnav.has-topicnav:not(:has(>.content-col>.wrap)):has(>.topicnav-lead)>.topicnav-wrap>.topicnav{width:226px;margin:2rem 4.45rem 2rem auto}
}
/* Ab 1720 Pixeln gilt fuer alle Seiten, die keine echten Randnavi-Seiten sind,
   dieselbe Rasterlage wie darunter. Ohne diesen Block faellt der Wrapper auf
   `display:contents` zurueck, die Partnerleiste zieht sich ueber beide
   Spalten und der Baum rutscht unter sie. */
@media(min-width:1720px){
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.topicnav-lead{grid-column:2!important;grid-row:1;min-width:0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.topicnav-wrap{display:block;grid-column:1;grid-row:1/span 2;align-self:stretch}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.topicnav-wrap>.topicnav{margin:2rem 0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.content-col:not(.content-col-after-partner){grid-column:2;grid-row:2;min-width:0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):is(:has(>.content-col>.wrap),:has(>.content-col>.article))>.content-col.content-col-after-partner{grid-column:2;grid-row:auto;min-width:0}
  /* Artikelseiten zentrieren ihre 800-Pixel-Spalte im Viewport. Der Baum
     steht deshalb rechtsbuendig in Spalte 1, genau wie zwischen 1440 und
     1719 Pixeln. Diese Regel muss hinter der Zeile mit `margin:2rem 0`
     stehen, beide Selektoren sind gleich spezifisch. */
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):has(>.content-col>.article)>.topicnav-wrap>.topicnav{width:226px;margin:2rem 4.45rem 2rem auto}
}
@media(min-width:1720px){
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):not(:has(>.content-col>.wrap)):not(:has(>.content-col>.article)){position:relative}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):not(:has(>.content-col>.wrap)):not(:has(>.content-col>.article))>.topicnav-wrap{display:block;position:absolute;top:0;bottom:0;left:calc(50% - 848px);width:226px;z-index:5;background:transparent!important;border:0!important}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead):not(:has(>.content-col>.wrap)):not(:has(>.content-col>.article))>.topicnav-wrap>.topicnav{width:226px;margin:2rem 0}
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col .section-header,
  body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col>.cta-banner>:is(h2,h3,p){box-sizing:border-box;width:min(calc(100% - 3rem),1168px);margin-left:auto;margin-right:auto}
  html[data-kd-theme-page="typ-ki"] body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.topicnav-wrap{display:block!important}
  html[data-kd-theme-page="typ-ki"] body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col{width:auto!important;grid-column:2!important}
}
/* korrektur-ki-kostenlos-online: inline */
.kd-scan-badges{position:absolute;left:-82px;top:50%;transform:translateY(calc(-50% - 44px));display:flex;flex-direction:column;gap:7px;align-items:flex-end;width:155px;z-index:5;}
@media(max-width:820px){.kd-scan-badges{position:static;left:auto;top:auto;transform:none;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;margin:2px 0 12px;}}
/* korrektur-ki-kostenlos-online: inline */
@media(max-width:770px){main.has-topicnav>.content-col>article>section>.wrap,main.has-grpnav>.content-col>article>section>.wrap{box-sizing:border-box;padding-left:1.5rem;padding-right:1.5rem}}
/* korrektur-ki-kostenlos-online: inline */
@media(min-width:1720px){body main.has-topicnav.has-topicnav.has-topicnav:has(>.topicnav-lead)>.content-col>article>.cta-banner>:is(h2,h3,p){box-sizing:border-box;width:min(calc(100% - 3rem),1168px);margin-left:auto;margin-right:auto}}
/* korrektur-ki-kostenlos-online: inline */
.kdtp-wrap{max-width:1040px;margin:2.6rem auto;padding:0 1.25rem;font-family:inherit}
.kdtp-head{display:flex;align-items:center;justify-content:center;gap:.5rem .7rem;flex-wrap:wrap;margin-bottom:1.2rem;text-align:center}
.kdtp-head .kdtp-htxt{font-size:1.05rem;font-weight:700;color:#1a1a2e}
.kdtp-head a{color:#16794a;text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.kdtp-head a:hover{text-decoration:underline}
.kdtp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}@media(max-width:770px){.kdtp-grid{grid-template-columns:1fr}}@media(max-width:1100px){main.has-topicnav .kdtp-grid{grid-template-columns:1fr}}
.kdtp-card{border:1px solid #0f5c38;border-radius:12px;background:linear-gradient(to right,#00c06a,#005430);padding:1.1rem 1.2rem;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(22,121,74,.22)}
.kdtp-card .kdtp-ttl{font-size:1rem;font-weight:700;margin:0 0 .45rem;color:#fff;line-height:1.3}
.kdtp-card .kdtp-txt{font-size:.92rem;line-height:1.62;color:#fff;margin:0 0 .9rem;flex:1}
.kdtp-card .kdtp-meta{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#fff;margin-top:auto;flex-wrap:wrap}
.kdtp-card .kdtp-auth{font-weight:700;color:#fff}

.usp-strip .usp-item { padding: 0; border: 0; }
.usp-strip .usp-item span { color: inherit; font-size: inherit; display: inline; }
.kd-scan-badges { position: static !important; transform: none !important; width: auto !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; margin: 2px 0 12px !important; display: flex; gap: .4rem; }
.cta-banner p { color: #fff; }
/* Gruene Leiste buendig mit den Karten darueber (die Sektionen haben 24px Innenabstand). */
@media (min-width: 1100px) { .content-col > .usp-strip { margin-inline: 24px; } }