/* Anklickbare Bereiche im Grundriss der Startseite und die Aufgabenkarte darunter.
   Farben aus der Branchen-Palette; Akzent kommt aus --plan-accent (rahmen.css). */
.iso-area{fill:var(--plan-accent);fill-opacity:0;stroke:var(--plan-accent);stroke-opacity:0;stroke-width:2;stroke-dasharray:6 5;cursor:pointer;transition:fill-opacity .15s,stroke-opacity .15s}
.iso-area:hover{fill-opacity:.1;stroke-opacity:.6}
.iso-area.is-selected{fill-opacity:.16;stroke-opacity:1}
.iso-area:focus{outline:none}
.iso-area:focus-visible{fill-opacity:.12;stroke:#102c26;stroke-opacity:1;stroke-dasharray:none}
.iso-tag,.p-route{pointer-events:none}
.hero-grid.is-pinned{align-items:start}

.area-panel{margin:8px 0 0;padding:16px 18px 14px;background:#fff;border:1px solid #d9e2d3;border-radius:10px;box-shadow:0 10px 30px #16302412;animation:area-in .2s ease-out}
.area-panel[hidden]{display:none}
@keyframes area-in{from{opacity:0;transform:translateY(6px)}}
.area-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.area-kicker{font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#607169}
.area-title{font:700 20px/1.2 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em;color:#102c26;margin:2px 0}
.area-summary{font-size:12.5px;color:#607169}
.area-close{flex-shrink:0;width:32px;height:32px;border:1px solid #d9e2d3;border-radius:50%;background:#fff;color:#102c26;font-size:18px;line-height:1;cursor:pointer}
.area-close:hover{border-color:#102c26}
.area-tasks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.area-task{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;background:#f6f6f0;border-left:3px solid #8fa78c}
.area-task.is-offen{border-left-color:var(--plan-accent)}
.area-task.is-spaet{border-left-color:#c8453a;background:#fbf1ee}
.area-task-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.area-task-main strong{font-size:13.5px;font-weight:600;color:#102c26}
.area-task-main small{font-size:11.5px;color:#607169}
.area-type{align-self:flex-start;font:600 9.5px/1.6 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;padding:0 6px;border-radius:3px;background:#e9eee2;color:#345b47}
.area-type.type-doku{background:#102c26;color:#fff}
.area-task-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;text-align:right}
.area-status{font-size:11px;font-weight:600;padding:1px 8px;border-radius:99px;background:#e2eacc;color:#214e3c}
.is-offen .area-status{background:#fff;border:1px solid var(--plan-accent);color:#102c26}
.is-spaet .area-status{background:#c8453a;color:#fff}
.area-who{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#4a5a52;white-space:nowrap}
.area-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#345b47;color:#fff;font-size:9.5px;font-weight:600;letter-spacing:.02em}
.area-note{margin-top:10px;font-size:11px;color:#607169}

@media (max-width:600px){
  .area-panel{padding:14px 12px 12px}
  .area-task{flex-direction:column;gap:6px}
  .area-task-side{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
}
@media (prefers-reduced-motion:reduce){.area-panel{animation:none}.iso-area{transition:none}}

/* Ablaufkarte zu einer Nummer im Grundriss */
.bn-4::after{animation-delay:2.4s}
.balloon.is-open{background:var(--plan-accent);color:#fff}
.point-steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:6px}
.point-steps li{counter-increment:step;display:flex;gap:10px;align-items:baseline;font-size:13.5px;color:#102c26;padding:8px 12px;background:#f6f6f0;border-radius:8px}
.point-steps li::before{content:counter(step);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#102c26;color:#fff;font:600 10.5px "IBM Plex Mono",monospace;transform:translateY(-1px)}
.point-not{margin-top:8px;padding:9px 12px;border-radius:8px;background:#fbf1ee;border-left:3px solid #c8453a;font-size:13px;color:#102c26}
.point-not strong{color:#a63d31}
.point-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.point-foot .area-who{white-space:normal}
.point-ask{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;color:#102c26;cursor:pointer}

/* Grundriss nicht größer als die Illustrationen der Branchenseiten */
.hero .drawing-canvas{max-width:650px;margin:0 auto}