/* AUFTRAG-STRUKTURKARTEN-CC.md: Gestaltung der erklaerenden Landkarten
   (Client/Pages/Karten/*.razor). BEWUSST GLOBAL statt scoped (.razor.css) -
   gleicher Grund wie bei event-editor.css/plan.css: ein Teil der Klassen
   haengt an SVG-Elementen, die eine Kindkomponente (MapInfoOverlay) rendert;
   Blazors CSS-Isolation setzt ihr Scope-Attribut nicht auf das Markup einer
   Kindkomponente.

   Farben ausschliesslich aus ci.css (Kap. 4 des Auftrags: "keine neuen
   Farbwerte erfinden"). Der Prototyp nutzte einen breiteren Grauton-Kasten
   (#6b5c64 & Co.) fuer Sekundaertext/Rahmen, den es in der CI nicht gibt -
   hier ersetzt durch color-mix() auf Aubergine (dasselbe Muster wie
   ci-bridge.css Zeile 279), keine neuen Hex-Werte. Reines Weiss (#fff) als
   Kartenflaeche folgt derselben Konvention wie plan.css. */

.karten-liste-hinweis {
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
    margin: 0 0 var(--tim-space-4);
}

.karten-liste-kacheln {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tim-space-4);
}

.karten-liste-kachel {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-1);
    width: 260px;
    padding: var(--tim-space-4);
    border-radius: var(--tim-radius-lg);
    background: var(--tim-minze-flaeche);
    color: var(--tim-aubergine);
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color .12s;
}

.karten-liste-kachel:hover {
    border-color: var(--tim-minze);
    color: var(--tim-aubergine);
}

.karten-liste-kachel-titel {
    font-weight: 800;
    font-size: 1.05rem;
    margin-top: var(--tim-space-2);
}

.karten-liste-kachel-untertitel {
    font-size: .85rem;
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
}

.karte-nicht-gefunden {
    padding: var(--tim-space-4);
}

/* ---------------- Kopfleiste: Hinweis + Zoom ---------------- */

.karte-bar {
    display: flex;
    align-items: center;
    gap: var(--tim-space-4);
    flex-wrap: wrap;
    margin: 0 0 var(--tim-space-3);
}

.karte-hinweis {
    font-size: .82rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--tim-aubergine) 18%, transparent);
    border-radius: 999px;
    padding: 6px 14px;
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
}

.karte-zoom {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    font-size: .82rem;
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
}

.karte-zoom input[type="range"] {
    width: 170px;
}

/* ---------------- Die Flaeche ---------------- */

.karte-mapbox {
    overflow-x: auto;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--tim-aubergine) 18%, transparent);
    border-radius: var(--tim-radius-lg);
    padding: var(--tim-space-2);
}

.karte-svg {
    display: block;
    height: auto;
}

.karte-cltitle {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
}

.karte-clnote {
    font-size: 12.5px;
    font-style: italic;
    fill: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
}

.karte-legende-kasten {
    fill: var(--tim-sand);
    stroke: color-mix(in srgb, var(--tim-aubergine) 18%, transparent);
}

.karte-node rect {
    fill: #fff;
    stroke: color-mix(in srgb, var(--tim-aubergine) 28%, transparent);
    stroke-width: 1.2;
    transition: stroke .12s;
}

.karte-node-strong rect {
    stroke: var(--tim-tomate);
    stroke-width: 2;
}

.karte-node-dark rect {
    stroke: var(--tim-aubergine);
    stroke-width: 2;
}

.karte-nlabel {
    font-size: 14px;
    font-weight: 700;
    fill: var(--tim-aubergine);
}

.karte-nsub {
    font-size: 11.5px;
    fill: color-mix(in srgb, var(--tim-aubergine) 60%, transparent);
}

.karte-badge-rect {
    fill: var(--tim-aubergine);
    stroke: var(--tim-aubergine);
}

.karte-badge-text {
    font-size: 11px;
    font-weight: 700;
    fill: #fff;
}

.karte-edge {
    fill: none;
    stroke: color-mix(in srgb, var(--tim-aubergine) 42%, transparent);
    stroke-width: 1.6;
    transition: stroke .12s, stroke-width .12s;
}

.karte-edge-strong {
    stroke: var(--tim-tomate);
    stroke-width: 2;
}

.karte-edge-dash {
    stroke: color-mix(in srgb, var(--tim-aubergine) 55%, transparent);
    stroke-dasharray: 5 4;
}

.karte-elabel {
    font-size: 11.5px;
    fill: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
}

.karte-elabel-strong {
    fill: var(--tim-tomate-tief);
    font-weight: 700;
}

.karte-pfeil {
    fill: color-mix(in srgb, var(--tim-aubergine) 42%, transparent);
}

.karte-pfeil-strong {
    fill: var(--tim-tomate);
}

.karte-pfeil-dash {
    fill: color-mix(in srgb, var(--tim-aubergine) 55%, transparent);
}

.karte-hit {
    cursor: pointer;
}

.karte-hit .karte-grab {
    stroke: transparent;
    stroke-width: 16;
    fill: none;
}

.karte-hit:hover rect,
.karte-hit:focus-visible rect {
    stroke: var(--tim-tomate);
    stroke-width: 2.4;
}

.karte-hit:hover .karte-nlabel,
.karte-hit:focus-visible .karte-nlabel {
    fill: var(--tim-tomate-tief);
}

.karte-hit:hover .karte-edge,
.karte-hit:focus-visible .karte-edge {
    stroke: var(--tim-tomate);
    stroke-width: 3;
}

.karte-hit:hover .karte-elabel,
.karte-hit:focus-visible .karte-elabel {
    fill: var(--tim-tomate-tief);
    font-weight: 700;
}

.karte-hit:focus {
    outline: none;
}

/* ---------------- Erklaerfenster ---------------- */

.karte-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--tim-aubergine-tief) 55%, transparent);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    z-index: 1050;
    overflow-y: auto;
}

.karte-sheet {
    background: #fff;
    border-radius: var(--tim-radius-lg);
    max-width: 820px;
    width: 100%;
    box-shadow: 0 24px 60px color-mix(in srgb, var(--tim-aubergine-tief) 28%, transparent);
    overflow: hidden;
}

.karte-sheet-kopf {
    padding: var(--tim-space-5) var(--tim-space-5) var(--tim-space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--tim-aubergine) 14%, transparent);
    border-left: 6px solid var(--tim-tomate);
    position: relative;
}

.karte-kind-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tim-aubergine-flaeche);
    color: var(--tim-aubergine-tief);
    margin-bottom: var(--tim-space-2);
}

.karte-sheet-titel {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tim-aubergine);
}

.karte-claim {
    margin: var(--tim-space-2) 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tim-tomate-tief);
    line-height: 1.4;
}

.karte-sheet-body {
    padding: var(--tim-space-4) var(--tim-space-5) var(--tim-space-1);
    font-size: .92rem;
    line-height: 1.62;
    color: var(--tim-aubergine);
}

.karte-sheet-body p {
    margin: 0 0 var(--tim-space-3);
}

.karte-sheet-body em {
    color: var(--tim-aubergine-tief);
    font-style: italic;
}

.karte-sheet-body strong {
    color: var(--tim-aubergine-tief);
}

.karte-sektion-titel {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
    margin: var(--tim-space-5) 0 var(--tim-space-2);
}

.karte-rel-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--tim-space-1);
}

.karte-rel-liste li {
    position: relative;
    padding: 5px 0 5px 24px;
    border-bottom: 1px dotted color-mix(in srgb, var(--tim-aubergine) 14%, transparent);
}

.karte-rel-liste li:last-child {
    border-bottom: none;
}

.karte-rel-liste li::before {
    content: "→";
    position: absolute;
    left: 2px;
    color: var(--tim-minze);
    font-weight: 800;
}

.karte-grenzen-liste li::before {
    content: "×";
    color: var(--tim-tomate);
}

.karte-beispiel {
    background: var(--tim-sand);
    border: 1px solid color-mix(in srgb, var(--tim-aubergine) 14%, transparent);
    border-radius: var(--tim-radius);
    padding: var(--tim-space-3) var(--tim-space-4);
    margin: 0 0 var(--tim-space-2);
}

.karte-beispiel b {
    display: block;
    color: var(--tim-aubergine-tief);
    margin-bottom: 2px;
    font-size: .9rem;
}

.karte-beispiel span {
    color: color-mix(in srgb, var(--tim-aubergine) 80%, transparent);
}

.karte-figur {
    margin: var(--tim-space-2) 0 var(--tim-space-4);
    padding: var(--tim-space-3);
    background: var(--tim-sand);
    border: 1px solid color-mix(in srgb, var(--tim-aubergine) 14%, transparent);
    border-radius: var(--tim-radius);
}

.karte-figur svg {
    display: block;
    width: 100%;
    height: auto;
}

.karte-figur-unterschrift {
    font-size: 12px;
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
    font-style: italic;
    margin-top: var(--tim-space-2);
}

.karte-sheet-fuss {
    padding: var(--tim-space-3) var(--tim-space-5) var(--tim-space-4);
    border-top: 1px solid color-mix(in srgb, var(--tim-aubergine) 14%, transparent);
    background: var(--tim-sand);
    display: flex;
    gap: var(--tim-space-2);
    flex-wrap: wrap;
    align-items: center;
}

.karte-fuss-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
    margin-right: 2px;
}

.karte-chip {
    border: 1px solid color-mix(in srgb, var(--tim-aubergine) 22%, transparent);
    background: #fff;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--tim-aubergine);
    transition: .12s;
}

.karte-chip:hover {
    border-color: var(--tim-tomate);
    color: var(--tim-tomate-tief);
}

.karte-hier-einrichten {
    border-color: var(--tim-tomate);
    color: var(--tim-tomate-tief);
    font-weight: 700;
}

.karte-sheet-close,
.karte-sheet-back {
    position: absolute;
    top: 14px;
    border: none;
    background: color-mix(in srgb, var(--tim-aubergine) 8%, transparent);
    cursor: pointer;
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
    font-family: inherit;
}

.karte-sheet-close {
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
}

.karte-sheet-close:hover {
    background: var(--tim-tomate);
    color: #fff;
}

.karte-sheet-back {
    right: 56px;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
}

.karte-sheet-back:hover {
    background: color-mix(in srgb, var(--tim-aubergine) 16%, transparent);
}