/* WG Bausteine: Widget „karten“ (Kartenraster). Mehrfach nutzbar: Alle Selektoren hängen an der gedoppelten Klasse
   .wgb-karten.wgb-karten und nie an der ID der Sektion.
   Karten und nummerierte Karten: Glaskarten mit Symbol oder Nummer in kleiner Lime-Glasfläche, im Flex-Raster, damit
   eine unvollständige letzte Reihe mittig oder bewusst linksbündig steht.
   Checkliste und Fehlerliste: kompakte Zeilen mit feiner Linie darüber, Lime-Häkchen oder ruhiges graues Kreuz. */
.wgb-karten.wgb-karten{isolation:isolate}
.wgb-karten.wgb-karten .v3-head h2{text-wrap:balance}
.wgb-karten.wgb-karten .v3-head--center{max-width:860px}
.wgb-karten.wgb-karten .v3-head--center .v3-lead{max-width:720px}

/* ---------- Karten ---------- */
.wgb-karten.wgb-karten .kr-grid{--cols:3;--gap:18px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--gap);margin:56px 0 0;padding:0;list-style:none}
.wgb-karten.wgb-karten .kr-grid.kr-rest-mitte{justify-content:center}
.wgb-karten.wgb-karten .kr-grid.kr-cols-1{--cols:1;max-width:560px}
.wgb-karten.wgb-karten .kr-grid.kr-cols-2{--cols:2;max-width:920px}
.wgb-karten.wgb-karten .kr-grid.kr-cols-3{--cols:3}
.wgb-karten.wgb-karten .kr-grid.kr-cols-4{--cols:4}
.wgb-karten.wgb-karten.kr-center .kr-grid{margin-left:auto;margin-right:auto}
.wgb-karten.wgb-karten .v3-wrap>:is(.kr-grid,.kr-list):first-child{margin-top:0}
.wgb-karten.wgb-karten .kr-item{display:flex;flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - .1px);min-width:0;margin:0;padding:0}
.wgb-karten.wgb-karten .kr-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;padding:26px 26px 28px;border-radius:20px}

/* Symbol oder Nummer in kleiner Lime-Glasfläche */
.wgb-karten.wgb-karten .kr-badge{position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;color:var(--lime-ink)}
.wgb-karten.wgb-karten .kr-badge .v3-glassdot{left:0;top:0;width:100%;border-radius:15px;box-shadow:0 0 0 1px rgba(20,23,12,.05),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -6px 12px rgba(110,150,0,.16),0 6px 14px rgba(110,150,0,.16),0 0 22px rgba(194,242,28,.34);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.wgb-karten.wgb-karten .kr-badge .v3-ico{position:relative;z-index:3;transition:transform .5s var(--ease)}
.wgb-karten.wgb-karten .kr-num{position:relative;z-index:3;font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:600;font-size:15px;line-height:1;letter-spacing:.02em;color:var(--lime-ink);transition:transform .5s var(--ease)}

.wgb-karten.wgb-karten .kr-title{margin:22px 0 0;padding:0;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.wgb-karten.wgb-karten .kr-text{margin:8px 0 0;padding:0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.55;color:var(--muted)}
.wgb-karten.wgb-karten .kr-foot{margin-top:auto;padding-top:18px}
.wgb-karten.wgb-karten .kr-cols-4 .kr-card{padding:24px 22px 26px}
.wgb-karten.wgb-karten .kr-cols-4 .kr-title{font-size:19px}

@media (hover:hover){
  .wgb-karten.wgb-karten .kr-card:hover .kr-badge .v3-glassdot,
  .wgb-karten.wgb-karten .kr-card:hover .kr-badge .v3-ico,
  .wgb-karten.wgb-karten .kr-card:hover .kr-num{transform:translateY(-3px)}
  .wgb-karten.wgb-karten .kr-card:hover .kr-badge .v3-glassdot{box-shadow:0 0 0 1px rgba(20,23,12,.05),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -6px 12px rgba(110,150,0,.16),0 10px 18px rgba(110,150,0,.2),0 0 28px rgba(194,242,28,.42)}
}

/* Link unter einer Karte oder Zeile */
.wgb-karten.wgb-karten .kr-link{display:inline-flex;align-items:center;gap:8px;padding:0 0 2px;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-weight:500;font-size:15px;line-height:1.35;color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--lime),var(--lime));background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat}
.wgb-karten.wgb-karten .kr-link:hover{color:var(--ink)}
.wgb-karten.wgb-karten .kr-link .v3-ico{width:16px;height:16px;transition:transform .4s var(--ease)}
.wgb-karten.wgb-karten .kr-link:is(:hover,:focus-visible) .v3-ico{transform:translateX(3px)}
.wgb-karten.wgb-karten .kr-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}

/* Links im Text von Einleitung, Karten und Zeilen, gestaltet wie im Fließtext des Textabschnitts */
.wgb-karten.wgb-karten :is(.v3-lead,.kr-text,.kr-row-text) a{color:var(--ink);font-weight:500;text-decoration:none;background-image:linear-gradient(var(--lime),var(--lime));background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease)}
.wgb-karten.wgb-karten :is(.v3-lead,.kr-text,.kr-row-text) a:hover{color:var(--ink);background-size:100% .42em}
.wgb-karten.wgb-karten :is(.v3-lead,.kr-text,.kr-row-text) a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}

/* ---------- Checkliste und Fehlerliste ---------- */
.wgb-karten.wgb-karten .kr-list{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:clamp(32px,4.4vw,64px);row-gap:0;margin:48px 0 0;padding:0;list-style:none}
.wgb-karten.wgb-karten .kr-list.kr-cols-1{--cols:1;max-width:760px}
.wgb-karten.wgb-karten .kr-list.kr-cols-2{--cols:2}
.wgb-karten.wgb-karten .kr-list.kr-cols-3{--cols:3}
.wgb-karten.wgb-karten .kr-list.kr-cols-4{--cols:4;column-gap:32px}
.wgb-karten.wgb-karten.kr-center .kr-list.kr-cols-1{margin-left:auto;margin-right:auto}
.wgb-karten.wgb-karten .kr-row{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:start;min-width:0;margin:0;padding:18px 0 20px;border:0;border-top:1px solid var(--line-2);font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.55;color:var(--ink-2)}
.wgb-karten.wgb-karten .kr-mark{display:grid;place-items:center;width:24px;height:24px;margin:0;border-radius:50%}
.wgb-karten.wgb-karten .kr-mark .v3-ico{width:12px;height:12px;stroke-width:2.6}
.wgb-karten.wgb-karten .kr-mark--ok{background:rgba(194,242,28,.42);color:var(--lime-ink);box-shadow:inset 0 0 0 1px rgba(110,150,0,.18)}
/* Fehler: ruhiges dunkelgraues Kreuz auf hellgrauem Kreis, bewusst ohne Rot */
.wgb-karten.wgb-karten .kr-mark--x{background:rgba(20,20,20,.05);color:#4F554A;box-shadow:inset 0 0 0 1px rgba(20,20,20,.1)}
.wgb-karten.wgb-karten .kr-mark--x .v3-ico{width:11px;height:11px;stroke-width:2.2}
.wgb-karten.wgb-karten .kr-row-body{min-width:0}
.wgb-karten.wgb-karten .kr-row-text{margin:0;padding:0;font:inherit;color:inherit;text-wrap:pretty}
.wgb-karten.wgb-karten .kr-row-title{font-weight:700;color:var(--ink)}
.wgb-karten.wgb-karten .kr-row .kr-link{margin-top:8px;font-size:14.5px}

/* Leere Einträge nur im Editor: gestrichelter Platzhalter */
.wgb-karten.wgb-karten .kr-item.is-leer .kr-card{background:rgba(255,255,255,.35);box-shadow:none;border:1px dashed var(--line-2)}
.wgb-karten.wgb-karten .kr-leer{margin:18px 0 0;padding:0;font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:11px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.wgb-karten.wgb-karten .kr-row .kr-leer{margin:3px 0 0}

/* ---------- Breakpoints ---------- */
@media (max-width:1099px){
  .wgb-karten.wgb-karten .kr-grid.kr-cols-4{--cols:2;max-width:920px}
  .wgb-karten.wgb-karten .kr-cols-4 .kr-card{padding:26px 26px 28px}
  .wgb-karten.wgb-karten .kr-cols-4 .kr-title{font-size:20px}
  .wgb-karten.wgb-karten .kr-list.kr-cols-3,.wgb-karten.wgb-karten .kr-list.kr-cols-4{--cols:2;column-gap:clamp(32px,4.4vw,64px)}
}
@media (max-width:959px){
  .wgb-karten.wgb-karten .kr-grid.kr-cols-3{--cols:2}
}
@media (max-width:719px){
  .wgb-karten.wgb-karten .kr-grid.kr-grid{--cols:1;--gap:12px;max-width:none;margin-top:40px}
  .wgb-karten.wgb-karten .kr-card,.wgb-karten.wgb-karten .kr-cols-4 .kr-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 20px 22px;border-radius:18px}
  .wgb-karten.wgb-karten .kr-badge{grid-row:1 / span 3;width:44px;height:44px}
  .wgb-karten.wgb-karten .kr-badge .v3-glassdot{border-radius:14px}
  .wgb-karten.wgb-karten .kr-card>:not(.kr-badge){grid-column:2}
  .wgb-karten.wgb-karten .kr-title,.wgb-karten.wgb-karten .kr-cols-4 .kr-title{margin:2px 0 0;font-size:18px}
  .wgb-karten.wgb-karten .kr-text{margin-top:6px;font-size:15px}
  .wgb-karten.wgb-karten .kr-foot{padding-top:12px}
  .wgb-karten.wgb-karten .kr-leer{margin-top:4px}
  .wgb-karten.wgb-karten .kr-list.kr-list{--cols:1;max-width:none;margin-top:36px}
  .wgb-karten.wgb-karten .kr-row{padding:16px 0 18px;font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .wgb-karten.wgb-karten .kr-badge .v3-glassdot,.wgb-karten.wgb-karten .kr-badge .v3-ico,.wgb-karten.wgb-karten .kr-num,.wgb-karten.wgb-karten .kr-link .v3-ico,.wgb-karten.wgb-karten :is(.v3-lead,.kr-text,.kr-row-text) a{transition:none}
}