/* KI im Mittelstand, Kachel-Stil nach Apple-Vorbild auf der Gestaltung 2026-10
   (Schalter KIM_ACCENT, Vorschau ?kim_accent=1). Baut auf kim-refine.css auf, JEDE Regel unter body.kim-accent.
   Prinzip: große Radien, keine Rahmen/Kanten/Reiter, neutrales Hellgrau als Kachelgrund, viel Innenraum,
   kräftige Überschriften, Links mit Chevron, beim Überfahren minimal größer. Säulen bleiben Farbkacheln. */

body.kim-accent{
  --ka-r:22px;            /* Kachelradius */
  --ka-r-sm:18px;         /* kleinere Kacheln */
  --ka-tile:#F5F5F7;      /* Kachelgrund (neutral, leicht kühl) */
  --ka-ease:cubic-bezier(.25,.1,.25,1);
}

/* ===== Säulen: Farbkacheln ===== */
body.kim-accent .kim-pillars{gap:16px}
body.kim-accent .kim-pillar a{
  border-radius:var(--ka-r);padding:30px 28px 26px;gap:12px;min-height:340px;
  transition:transform .4s var(--ka-ease),background-color .3s ease;will-change:transform}
body.kim-accent .kim-pillar a:hover{transform:scale(1.015);background:var(--p)}
body.kim-accent .kim-pillar--kak a:hover{background:var(--c-dark,#34363F)}
body.kim-accent .kim-pillar-name{font-size:13px;letter-spacing:.02em;text-transform:none;font-weight:600;color:rgba(255,255,255,.8)}
body.kim-accent .kim-pillar--kak .kim-pillar-name{color:#F08A4B}
body.kim-accent .kim-pillar-q{hyphens:auto;-webkit-hyphens:auto;font-size:clamp(24px,2.3vw,30px);line-height:1.1;letter-spacing:-.025em;font-weight:700}
body.kim-accent .kim-pillar-text{font-size:15.5px;line-height:1.47}
body.kim-accent .kim-pillar-more{border-top:0;padding-top:4px;justify-content:flex-start;gap:4px;font-size:15px;font-weight:500}
body.kim-accent .kim-pillar-more span{font-size:0}
body.kim-accent .kim-pillar-more span::after{content:"›";font-size:20px;line-height:1;position:relative;top:1px}
body.kim-accent .kim-pillar-bar{height:3px;margin-top:0}

/* ===== Beitragskarten: hellgraue Kacheln ===== */
body.kim-accent .kim-cards{gap:16px}
body.kim-accent .kim-card a{
  border-radius:var(--ka-r-sm);background:var(--ka-tile);padding:28px 26px 24px;gap:10px;
  transition:transform .4s var(--ka-ease)}
body.kim-accent .kim-card a:hover{transform:scale(1.015);background:var(--ka-tile)}
body.kim-accent .kim-card-meta::before{display:none}
body.kim-accent .kim-card-meta{font-size:12.5px;letter-spacing:.02em;text-transform:none;font-weight:600}
body.kim-accent .kim-card-title{font-size:21px;line-height:1.2;letter-spacing:-.02em;font-weight:700;hyphens:auto;-webkit-hyphens:auto}
body.kim-accent .kim-card-hook{font-size:15px;line-height:1.47;color:var(--c-text,#40434C)}
body.kim-accent .kim-card-more{font-weight:500;font-size:15px;color:var(--p)}
body.kim-accent .kim-card-more span{font-size:0}
body.kim-accent .kim-card-more span::after{content:"›";font-size:20px;line-height:1;margin-left:4px;position:relative;top:1px}
body.kim-accent .kim-card a:hover .kim-card-more span{transform:none}
body.kim-accent .kim-card a:hover .kim-card-more{text-decoration:underline;text-underline-offset:3px}
/* Aufmacher bleibt in Säulenfarbe */
body.kim-accent .kim-card.is-lead a{border-radius:var(--ka-r);background:var(--p);padding:clamp(30px,3.4vw,44px)}
body.kim-accent .kim-card.is-lead a:hover{background:var(--p)}
body.kim-accent .kim-card.is-lead .kim-card-hook{color:rgba(255,255,255,.88)}
body.kim-accent .kim-card.is-lead .kim-card-title{font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-.03em}

/* ===== Phasen und Use-Case-Einstiege ===== */
body.kim-accent .kim-phases{gap:16px}
body.kim-accent .kim-phase{border-radius:var(--ka-r-sm);background:var(--ka-tile);padding:28px 26px 22px}
body.kim-accent .kim-phase h3{font-size:22px;letter-spacing:-.02em}
body.kim-accent .kim-phase-links li{border-top-color:rgba(0,0,0,.08)}
body.kim-accent .kim-stepper{border-radius:var(--ka-r)}
body.kim-accent .kim-uc-jump a{border-radius:var(--ka-r-sm);background:var(--ka-tile);padding:28px 26px;transition:transform .4s var(--ka-ease)}
body.kim-accent .kim-uc-jump a:hover{background:var(--ka-tile);transform:scale(1.015)}
body.kim-accent .kim-contact{border-radius:var(--ka-r)}
body.kim-accent .kim-next{border-radius:var(--ka-r-sm);background:var(--ka-tile)}
body.kim-accent .kim-btn{border-radius:980px;padding:12px 24px}

@media (prefers-reduced-motion:reduce){
  body.kim-accent .kim-pillar a,body.kim-accent .kim-card a,body.kim-accent .kim-uc-jump a{transition:none}
  body.kim-accent .kim-pillar a:hover,body.kim-accent .kim-card a:hover,body.kim-accent .kim-uc-jump a:hover{transform:none}
}

/* >>> Icons (scripts/design/build_kim_icons.py) */
body.kim-accent{
  --ic-compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M15.8 8.2 13.7 13.7 8.2 15.8 10.3 10.3z'/%3E%3C/svg%3E");
  --ic-bulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21.5h4'/%3E%3Cpath d='M12 2.5a6.5 6.5 0 0 0-3.9 11.7c.6.5.9 1.2.9 1.9V17h6v-.9c0-.7.3-1.4.9-1.9A6.5 6.5 0 0 0 12 2.5z'/%3E%3C/svg%3E");
  --ic-chip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2.5'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E");
  --ic-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2 18.2A2 2 0 0 0 3.7 21h16.6a2 2 0 0 0 1.7-2.8L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E");
  --ic-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2.5V8h5.5M15.5 13h-7M15.5 17h-7'/%3E%3C/svg%3E");
  --ic-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4 13.5h7.5l-1 8 9-11h-7.5z'/%3E%3C/svg%3E");
  --ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.5-4.5'/%3E%3C/svg%3E");
  --ic-flow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='6' height='6' rx='1.5'/%3E%3Crect x='15' y='14.5' width='6' height='6' rx='1.5'/%3E%3Cpath d='M9 6.5h4a2 2 0 0 1 2 2v6'/%3E%3C/svg%3E");
  --ic-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21.5V4M5 4.5c4-2.5 7 2.5 14 0v9c-7 2.5-10-2.5-14 0'/%3E%3C/svg%3E");
  --ic-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A1.5 1.5 0 0 1 5.5 3H12v17H5.5A1.5 1.5 0 0 1 4 18.5zM20 4.5A1.5 1.5 0 0 0 18.5 3H12v17h6.5a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E");
}

/* Symbol je Säule */
body.kim-accent .kim-map--strategie,body.kim-accent .kim-pillar--strategie{--ic:var(--ic-compass)}
body.kim-accent .kim-map--use-cases,body.kim-accent .kim-pillar--use-cases{--ic:var(--ic-bulb)}
body.kim-accent .kim-map--technik,body.kim-accent .kim-pillar--technik{--ic:var(--ic-chip)}
body.kim-accent .kim-map--kak,body.kim-accent .kim-pillar--kak{--ic:var(--ic-alert)}

/* ===== Kopf: „Vier Bereiche“ als Glaskacheln ===== */
body.kim-accent .kim-map ol{display:grid;grid-template-columns:1fr;gap:8px;border:0}
body.kim-accent .kim-map a{
  display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto 1fr;gap:2px 12px;align-items:start;height:100%;box-sizing:border-box;
  padding:12px 16px 12px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);box-shadow:none;
  transition:background-color .25s ease,transform .3s cubic-bezier(.25,.1,.25,1)}
body.kim-accent .kim-map a:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}
body.kim-accent .kim-map-no{grid-row:1 / span 2;width:40px;height:40px;border-radius:11px;background:var(--p);font-size:0;display:grid;place-items:center}
body.kim-accent .kim-map-no::before{content:"";width:20px;height:20px;background:#fff;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body.kim-accent .kim-map-name{font-size:14.5px;line-height:1.25;color:#fff;padding-top:1px}
body.kim-accent .kim-map-q{font-size:12.5px;line-height:1.35;opacity:.7}
body.kim-accent .kim-map .is-here a{background:#fff;border-color:#fff}
body.kim-accent .kim-map .is-here .kim-map-name{color:var(--c-ink,#26282F)}
body.kim-accent .kim-map .is-here .kim-map-q{color:var(--c-text,#40434C);opacity:1}
body.kim-accent .kim-map .is-here .kim-map-no{color:transparent}
@media (max-width:860px){body.kim-accent .kim-map a{grid-template-rows:auto;align-items:center}body.kim-accent .kim-map-no{grid-row:auto;width:34px;height:34px}}

/* ===== Säulenkacheln: Symbol oben ===== */
body.kim-accent .kim-pillar-no{opacity:1;display:grid;place-items:center;order:-2;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.16);font-size:0;margin-bottom:6px}
body.kim-accent .kim-pillar-no::before{content:"";width:24px;height:24px;background:#fff;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body.kim-accent .kim-pillar--kak .kim-pillar-no{background:rgba(240,138,75,.18)}
body.kim-accent .kim-pillar--kak .kim-pillar-no::before{background:#F08A4B}

/* ===== „Wo Sie am besten beginnen“ (#anfangen): Aufmacher links, weitere Einstiege rechts als Liste in einer Kachel ===== */
@media (min-width:861px){
  body.kim-accent #anfangen .kim-cards{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0 16px;align-items:stretch}
  body.kim-accent #anfangen .kim-card.is-lead{grid-column:1;grid-row:1 / span 6}
  body.kim-accent #anfangen .kim-card:not(.is-lead){grid-column:2}
}
body.kim-accent #anfangen .kim-card:not(.is-lead) a{
  display:grid;grid-template-columns:44px minmax(0,1fr) 16px;grid-template-areas:"ic meta go" "ic title go";gap:2px 14px;align-items:center;
  border-radius:0;padding:18px 20px;background:var(--ka-tile)}
body.kim-accent #anfangen .kim-card:not(.is-lead):nth-child(2) a{border-radius:var(--ka-r) var(--ka-r) 0 0}
body.kim-accent #anfangen .kim-card:not(.is-lead):last-child a{border-radius:0 0 var(--ka-r) var(--ka-r)}
body.kim-accent #anfangen .kim-card:nth-child(2):last-child a{border-radius:var(--ka-r)}
body.kim-accent #anfangen .kim-card:not(.is-lead) + .kim-card a{box-shadow:inset 0 1px 0 rgba(0,0,0,.07)}
body.kim-accent #anfangen .kim-card:not(.is-lead) a::before{
  content:"";grid-area:ic;width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb,var(--p) 14%,#fff) var(--ic-doc) center/0 no-repeat}
body.kim-accent #anfangen .kim-card:not(.is-lead) a::after{
  content:"";grid-area:ic;justify-self:center;width:22px;height:22px;background:var(--p);
  -webkit-mask:var(--ic-doc) center/contain no-repeat;mask:var(--ic-doc) center/contain no-repeat}
body.kim-accent #anfangen .kim-card:not(.is-lead) .kim-card-meta{grid-area:meta}
body.kim-accent #anfangen .kim-card:not(.is-lead) .kim-card-title{grid-area:title;font-size:17px;line-height:1.25}
body.kim-accent #anfangen .kim-card:not(.is-lead) .kim-card-hook{display:none}
body.kim-accent #anfangen .kim-card:not(.is-lead) .kim-card-more{grid-area:go;font-size:0}
body.kim-accent #anfangen .kim-card:not(.is-lead) .kim-card-more span::after{font-size:22px;color:var(--c-faint,#9A9CA5)}
body.kim-accent #anfangen .kim-card:not(.is-lead) a:hover{transform:none;background:color-mix(in srgb,var(--ka-tile) 92%,#000)}
body.kim-accent #anfangen .kim-card:not(.is-lead) a:hover .kim-card-title{color:var(--p)}
/* Aufmacher: Symbol, Label „Empfohlener Einstieg“, Button als Pille */
body.kim-accent #anfangen .kim-card.is-lead a{justify-content:flex-start;gap:14px;min-height:100%}
body.kim-accent #anfangen .kim-card.is-lead a::before{
  content:"";width:52px;height:52px;border-radius:14px;margin-bottom:8px;
  background:rgba(255,255,255,.16)}
body.kim-accent #anfangen .kim-card.is-lead a::after{
  content:"";position:absolute;top:clamp(30px,3.4vw,44px);left:clamp(30px,3.4vw,44px);width:52px;height:52px;background:#fff;
  -webkit-mask:var(--ic-flag) center/26px no-repeat;mask:var(--ic-flag) center/26px no-repeat}
body.kim-accent #anfangen .kim-card.is-lead .kim-card-meta::after{content:"Empfohlener Einstieg";margin-left:4px;padding:3px 10px;border-radius:980px;background:rgba(255,255,255,.18);letter-spacing:.01em}
body.kim-accent #anfangen .kim-card.is-lead .kim-card-more{margin-top:auto;align-self:flex-start;padding:11px 20px;border-radius:980px;background:#fff;color:var(--p);font-size:15px;font-weight:600}
body.kim-accent #anfangen .kim-card.is-lead .kim-card-more span::after{color:var(--p)}
body.kim-accent #anfangen .kim-card.is-lead a:hover .kim-card-more{text-decoration:none}
@media (max-width:860px){body.kim-accent #anfangen .kim-cards{gap:0}body.kim-accent #anfangen .kim-card.is-lead{margin-bottom:16px}}
/* <<< Icons */