/*
 * Kartenseite: zweigeteilte Arbeitsfläche aus Papier (Karte) und Nachtseite
 * (3D-Ansicht), dazu Werkbank, Legende und Kacheltafel.
 */

.karten-seite {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-image: none;
}

/* ------------------------------------------------------------- Werkbank */

.werkbank {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    padding: var(--abstand-2) var(--abstand-3);
    background: var(--papier-blatt);
    border-bottom: 1px solid var(--linie-stark);
    box-shadow: 0 1px 0 rgba(40,32,20,.04);
    overflow-x: auto;
    flex-shrink: 0;
}

.werkbank .teiler { width: 1px; height: 20px; background: var(--linie); flex-shrink: 0; }
.werkbank-rest { margin-left: auto; display: flex; align-items: center; gap: var(--abstand-2); }

.suchfeld { position: relative; display: flex; align-items: center; flex-shrink: 0; }

.suchfeld > .symbol {
    position: absolute;
    left: 8px;
    font-size: 13px;
    color: var(--tinte-3);
    pointer-events: none;
}

.suchfeld input {
    width: 178px;
    padding: 6px 9px 6px 27px;
    font-family: inherit;
    font-size: var(--gr-klein);
    color: var(--tinte);
    background: var(--papier-warm);
    border: 1px solid var(--linie-stark);
    border-radius: var(--kante-feld);
    box-shadow: var(--schatten-innen);
    transition: border-color var(--dauer-schnell) var(--kurve);
}

.suchfeld input:focus { outline: none; border-color: var(--zinnober); background: var(--papier-blatt); }

.vorschlaege {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--papier-blatt);
    border: 1px solid var(--linie-stark);
    border-radius: var(--kante-blatt);
    box-shadow: var(--schatten-schwebe);
    z-index: var(--ebene-kopf);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dauer-schnell) var(--kurve), transform var(--dauer-schnell) var(--kurve);
    pointer-events: none;
}

.vorschlaege.offen { opacity: 1; transform: none; pointer-events: auto; }

.vorschlaege button {
    display: block;
    width: 100%;
    padding: 7px 10px;
    text-align: left;
    font-family: inherit;
    font-size: var(--gr-klein);
    color: var(--tinte);
    background: none;
    border: none;
    border-bottom: 1px solid var(--linie);
    cursor: pointer;
}

.vorschlaege button:last-child { border-bottom: none; }
.vorschlaege button:hover, .vorschlaege button:focus-visible { background: var(--zinnober-blass); outline: none; }
.vorschlaege button small { display: block; color: var(--tinte-3); font-size: var(--gr-mikro); }
.vorschlaege .leer { padding: 10px; font-size: var(--gr-klein); color: var(--tinte-3); }

.schalterpaar { display: flex; gap: 0; flex-shrink: 0; }
.schalterpaar .knopf { border-radius: 0; }
.schalterpaar .knopf:first-child { border-radius: var(--kante-knopf) 0 0 var(--kante-knopf); }
.schalterpaar .knopf:last-child { border-radius: 0 var(--kante-knopf) var(--kante-knopf) 0; margin-left: -1px; }

.rasterweite { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.rasterweite span { font-size: var(--gr-mikro); letter-spacing: var(--spur-weit); text-transform: uppercase; color: var(--tinte-2); }
.rasterweite input {
    width: 62px;
    padding: 5px 7px;
    font-family: inherit;
    font-size: var(--gr-klein);
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: var(--papier-warm);
    border: 1px solid var(--linie-stark);
    border-radius: var(--kante-feld);
}
.rasterweite input:focus { outline: none; border-color: var(--zinnober); }
.rasterweite em { font-style: normal; font-size: var(--gr-mikro); color: var(--tinte-3); }

/* -------------------------------------------------------- Arbeitsfläche */

.arbeitsflaeche { display: flex; flex: 1; min-height: 0; }
.kartenseite { position: relative; flex: 1 1 58%; min-width: 0; }
.karte { width: 100%; height: 100%; background: var(--papier-tief); }

.nachtseite {
    position: relative;
    flex: 1 1 42%;
    min-width: 0;
    background: var(--nacht);
    border-left: 1px solid #000;
    overflow: hidden;
}

.nachtseite canvas { display: block; }

.nachtseite-leer {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--abstand-2);
    padding: var(--abstand-6);
    color: var(--nacht-schrift);
}

.nachtseite-leer .symbol { font-size: 34px; color: var(--zinnober-hell); stroke-width: 1.1; }
.nachtseite-leer b { font-family: var(--schrift-titel); font-size: var(--gr-gross); font-weight: 600; }
.nachtseite-leer p { max-width: 38ch; font-size: var(--gr-klein); color: #8b9199; }

.nachtseite-werkzeuge {
    position: absolute;
    right: var(--abstand-3);
    bottom: var(--abstand-3);
    z-index: 5;
    display: grid;
    gap: var(--abstand-1);
    justify-items: center;
    padding: var(--abstand-2);
    background: rgba(23,26,31,.82);
    border: 1px solid var(--nacht-3);
    border-radius: var(--kante-blatt);
    backdrop-filter: blur(4px);
}

.nachtseite-werkzeuge .marke { color: #767c85; }
.himmelsrichtungen { display: grid; grid-template-columns: repeat(3, 30px); gap: 3px; }
.himmelsrichtungen .knopf { justify-content: center; padding: 4px 0; }
.himmelsrichtungen .knopf:nth-child(1) { grid-column: 2; }

.nachtseite-angaben {
    position: absolute;
    left: var(--abstand-3);
    top: var(--abstand-3);
    z-index: 5;
    display: flex;
    gap: var(--abstand-4);
    padding: var(--abstand-2) var(--abstand-3);
    background: rgba(23,26,31,.82);
    border: 1px solid var(--nacht-3);
    border-radius: var(--kante-blatt);
    backdrop-filter: blur(4px);
    color: var(--nacht-schrift);
}

.nachtseite-angaben div span {
    display: block;
    font-size: var(--gr-mikro);
    letter-spacing: var(--spur-weit);
    text-transform: uppercase;
    color: #767c85;
}

.nachtseite-angaben div b {
    font-family: var(--schrift-titel);
    font-size: var(--gr-mittel);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Legende */

.legende {
    position: absolute;
    left: var(--abstand-3);
    bottom: var(--abstand-3);
    z-index: var(--ebene-aufsatz);
    width: 244px;
    background: var(--papier-blatt);
    border: 1px solid var(--linie-stark);
    border-radius: var(--kante-blatt);
    box-shadow: var(--schatten-schwebe);
}

.legende > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-2);
    padding: var(--abstand-2) var(--abstand-3);
    border-bottom: 1px solid var(--linie);
}

.legende > header b { display: block; font-family: var(--schrift-titel); font-size: var(--gr-basis); font-weight: 600; }

.legende-koerper {
    overflow: hidden;
    transform-origin: bottom;
    transition: opacity var(--dauer-mittel) var(--kurve);
}

.legende-koerper[hidden] { display: none; }
.stufen { display: flex; flex-direction: column; padding: var(--abstand-2) 0; }

.stufe {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    width: 100%;
    padding: 4px var(--abstand-3);
    font-family: inherit;
    font-size: var(--gr-klein);
    color: var(--tinte-3);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color var(--dauer-schnell) var(--kurve), background-color var(--dauer-schnell) var(--kurve);
}

.stufe:hover { background: var(--papier-warm); }
.stufe:focus-visible { outline: 2px solid var(--zinnober); outline-offset: -2px; }
.stufe.an { color: var(--tinte); }

.stufe i {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.18);
    opacity: .35;
    transition: opacity var(--dauer-schnell) var(--kurve), transform var(--dauer-schnell) var(--kurve);
}

.stufe.an i { opacity: 1; }
.stufe:hover i { transform: scale(1.14); }

.stufe i.schraffur {
    background-image: repeating-linear-gradient(45deg,
        #5c646d 0 2px, #c3c8ce 2px 4px);
}

.stufe span { flex: 1; }
.stufe em { font-style: normal; font-variant-numeric: tabular-nums; font-size: var(--gr-mikro); color: var(--tinte-3); }

.legende-fuss {
    padding: var(--abstand-2) var(--abstand-3) var(--abstand-3);
    font-size: var(--gr-mikro);
    line-height: 1.5;
    color: var(--tinte-3);
    border-top: 1px solid var(--linie);
}

/* ----------------------------------------------------------- Kacheltafel */

.kacheltafel {
    position: absolute;
    right: var(--abstand-3);
    top: var(--abstand-3);
    bottom: var(--abstand-3);
    z-index: var(--ebene-aufsatz);
    width: 306px;
    display: flex;
    flex-direction: column;
    background: var(--papier-blatt);
    border: 1px solid var(--linie-stark);
    border-radius: var(--kante-blatt);
    box-shadow: var(--schatten-schwebe);
    opacity: 0;
    transform: translateX(14px);
    transition: opacity var(--dauer-mittel) var(--kurve), transform var(--dauer-mittel) var(--kurve);
}

.kacheltafel[hidden] { display: none; }
.kacheltafel.offen { opacity: 1; transform: none; }

.kacheltafel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-2) var(--abstand-2) var(--abstand-2) var(--abstand-3);
    border-bottom: 1px solid var(--linie);
    background: var(--papier-warm);
}

.kacheltafel-koerper { flex: 1; overflow-y: auto; padding: var(--abstand-3); }

.stand-kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    flex-wrap: wrap;
    padding-bottom: var(--abstand-3);
    margin-bottom: var(--abstand-3);
    border-bottom: 1px solid var(--linie);
}

.stand-jahr {
    font-family: var(--schrift-titel);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    padding: 4px 9px;
    color: var(--papier-blatt);
    background: var(--stand, var(--jahr-ohne));
    border-radius: var(--kante-feld);
}

.stand-jahr.ohne { font-size: var(--gr-basis); padding: 9px; letter-spacing: .02em; }
.stand-text { flex: 1; min-width: 90px; }
.stand-text b { display: block; font-size: var(--gr-klein); }
.stand-text span { display: block; font-size: var(--gr-mikro); color: var(--tinte-3); line-height: 1.4; }

.saetze { display: flex; flex-direction: column; }

.satz {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--abstand-3);
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px dotted var(--linie);
    font-size: var(--gr-klein);
}

.satz span { color: var(--tinte-3); font-size: var(--gr-mikro); letter-spacing: .05em; text-transform: uppercase; }
.satz b { font-weight: 500; text-align: right; word-break: break-word; }

.quelle-link { display: inline-block; margin-top: var(--abstand-3); font-size: var(--gr-klein); }

/* --------------------------------------------------------- Kartenmeldung */

.kartenmeldung {
    position: absolute;
    left: 50%;
    top: var(--abstand-3);
    z-index: var(--ebene-aufsatz);
    padding: 6px 14px;
    font-size: var(--gr-klein);
    color: var(--nacht-schrift);
    background: rgba(23,26,31,.9);
    border-radius: var(--kante-chip);
    backdrop-filter: blur(3px);
    transform: translate(-50%, -6px);
    opacity: 0;
    transition: opacity var(--dauer-mittel) var(--kurve), transform var(--dauer-mittel) var(--kurve);
}

.kartenmeldung[hidden] { display: none; }
.kartenmeldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }

.regionknopf {
    position: absolute;
    right: var(--abstand-3);
    bottom: var(--abstand-3);
    z-index: var(--ebene-aufsatz);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: var(--gr-klein);
    color: var(--papier-blatt);
    background: var(--zinnober);
    border: none;
    border-radius: var(--kante-chip);
    cursor: pointer;
    box-shadow: var(--schatten-schwebe);
    transition: transform var(--dauer-schnell) var(--kurve);
}

.regionknopf[hidden] { display: none; }
.regionknopf:hover { transform: translateY(-2px); }

.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-3); }
#region-formular footer .knopf-warn { margin-right: auto; }

/* ------------------------------------------------- Leaflet an das Blatt */

.leaflet-container { font-family: var(--schrift-werk); background: var(--papier-tief); }

.leaflet-control-zoom a {
    color: var(--tinte);
    background: var(--papier-blatt);
    border-color: var(--linie-stark);
}

.leaflet-control-zoom a:hover { background: var(--papier-warm); color: var(--zinnober); }

.leaflet-control-attribution {
    font-size: 9px;
    background: rgba(251,248,242,.82);
    color: var(--tinte-3);
}

.leaflet-tooltip.kachel-hinweis {
    padding: 5px 9px;
    font-family: var(--schrift-werk);
    font-size: var(--gr-mikro);
    color: var(--nacht-schrift);
    background: var(--nacht);
    border: none;
    border-radius: var(--kante-feld);
    box-shadow: var(--schatten-schwebe);
}

.leaflet-tooltip.kachel-hinweis::before { display: none; }
.leaflet-tooltip.kachel-hinweis b { color: #fff; }
.leaflet-tooltip.kachel-hinweis .jahrzeile { color: var(--zinnober-hell); }

path.kachel { transition: fill-opacity var(--dauer-schnell) var(--kurve); }
path.kachel:hover { fill-opacity: .82 !important; }
path.kachel-ohne { fill: url(#schraffurmuster) !important; }

.regionmarke {
    padding: 5px 8px;
    font-family: var(--schrift-werk);
    font-size: var(--gr-mikro);
    color: var(--tinte);
    background: var(--papier-blatt);
    border: 1px solid var(--tinte);
    border-radius: var(--kante-feld);
    box-shadow: var(--schatten-blatt);
    white-space: nowrap;
    cursor: pointer;
}

/* -------------------------------------------------------------- Schmal */

/* ------------------------------------------ In 3D geladener Ausschnitt */
/* Das Quadrat ist bei 200 m Kantenlänge und kleinem Maßstab nur ein Fleck,
   deshalb trägt der Punkt mit fester Pixelgröße die Auffindbarkeit. */

.standort-rahmen {
    stroke: var(--zinnober);
    stroke-dasharray: 5 3;
    fill: none;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85));
}

.standort-punkt {
    stroke: var(--zinnober);
    fill: var(--zinnober);
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9));
}

.standort-punkt.standort-laedt {
    animation: standort-puls 1.1s var(--kurve) infinite;
}

.standort-laedt { opacity: .6; }

.standort-fehl {
    stroke: var(--tinte-3);
    fill: var(--tinte-3);
}

@keyframes standort-puls {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
    .standort-punkt.standort-laedt { animation: none; }
}

@media (max-width: 1080px) {
    .kacheltafel { width: 266px; }
    .legende { width: 214px; }
}

@media (max-width: 900px) {
    .karten-seite { height: auto; min-height: 100vh; overflow: visible; }
    .arbeitsflaeche { flex-direction: column; }
    .kartenseite { height: 62vh; flex: none; }
    .nachtseite { height: 46vh; flex: none; border-left: none; border-top: 1px solid #000; }
    .kacheltafel { width: auto; left: var(--abstand-3); top: auto; max-height: 56%; }
    .legende { width: 200px; }
    .nachtseite-leer { padding: var(--abstand-4); }
}

@media (max-width: 560px) {
    .legende { right: var(--abstand-3); width: auto; }
    .kacheltafel { bottom: auto; top: var(--abstand-3); max-height: 70%; }
    .werkbank .suchfeld input { width: 140px; }
}