/* © 2026 Martin Scherer · Fachwerte (https://www.fachwerte.de) · Alle Rechte vorbehalten.
   Die Nutzung im Browser ist frei. Vervielfältigung, Bearbeitung, Umbenennung
   oder Veröffentlichung dieses Quelltexts, auch in Teilen, nur mit
   schriftlicher Zustimmung des Urhebers (§§ 69a ff. UrhG). */
/* ==========================================================================
   Grundriss-Kern — Gestaltung von Bühne, Griffen, Fadenkreuz, Werkzeugleiste,
   Dialogen und Statuszeile.

   Alles mit gk- präfixiert, damit nichts mit site.css oder einem Werkzeug
   kollidiert. Die Farben kommen ausschließlich aus den --fw-Tokens der Seite
   (assets/site.css); die Rückfallwerte in var(…) halten den Kern auch auf
   einer Seite ohne site.css lesbar.
   ========================================================================== */

.gk-app {
    font-family: var(--fw-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);
    color: var(--fw-text, #111);
    display: flex;
    flex-direction: column;
}
/* Eigene display-Regeln (flex, grid) schlagen das [hidden] des Browsers. Ohne
   diese Zeile bliebe der leere Zustand als undurchsichtige Fläche über dem
   Grundriss liegen. */
.gk-app [hidden], .gk-dialog [hidden] { display: none !important; }

/* ─── Bühne ──────────────────────────────────────────────────────────────── */
.gk-plan {
    position: relative;
    flex: 1 1 auto;
    min-height: 22rem;
    height: 38rem;
    max-height: 75vh;
    overflow: hidden;
    border: 1px solid var(--fw-border, #e6e6e3);
    border-radius: var(--fw-radius, 4px);
    background: var(--fw-surface-2, #f0f0ed);
    touch-action: none;             /* Zoom und Verschieben macht der Kern selbst */
    cursor: grab;
}
@media (max-width: 68rem) { .gk-plan { height: 28rem; } }
.gk-plan.ist-gegriffen { cursor: grabbing; }
.gk-plan[data-modus="auswahl"] { cursor: default; }
/* Jeder Zeichenmodus bekommt das Fadenkreuz — was der Klick auslöst, steht in
   der Statuszeile darunter. */
.gk-plan[data-modus="massstab"],
.gk-plan[data-modus="messen"],
.gk-plan[data-modus="raum"],
.gk-plan[data-modus="polygon"],
.gk-plan[data-modus="teilflaeche"],
.gk-plan[data-modus="teilflaechePoly"] { cursor: crosshair; }

.gk-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.gk-stage img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* Der leere Zustand steht mitten in der Planfläche, nicht als Randnotiz. */
.gk-leer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--fw-text-2, #4a4a48);
    background: var(--fw-surface-2, #f0f0ed);
}
.gk-leer h3 { font-size: 1rem; font-weight: 600; color: var(--fw-text, #111); margin: 0; }
.gk-leer p { font-size: .85rem; line-height: 1.6; max-width: 34ch; margin: 0; }
.gk-leer.ist-ziel { outline: 2px dashed var(--fw-accent, #0057b8); outline-offset: -12px; background: var(--fw-accent-sf, #eef4fc); }

/* ─── Griffe an der aktiven Fläche ───────────────────────────────────────
   Ecken ziehen die Fläche zurecht, das ⊕ an der Kante zieht einen Anbau
   heraus — so wird aus dem Grundrechteck eine verwinkelte Form. */
.gk-raumgriff {
    position: absolute;
    background: var(--fw-accent, #0057b8);
    border: 1.5px solid var(--fw-bg, #fff);
    border-radius: 2.5px;
    pointer-events: auto;
}
.gk-raumplus {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    background: var(--fw-bg, #fff);
    color: var(--fw-accent, #0057b8);
    border: 1.5px solid var(--fw-accent, #0057b8);
    border-radius: 50%;
    font-weight: 700; line-height: 1;
    cursor: crosshair;
    pointer-events: auto;
    user-select: none;
}
.gk-raumplus:hover { background: var(--fw-accent, #0057b8); color: var(--fw-bg, #fff); transform: scale(1.25); }
.gk-raumgriff, .gk-raumplus { transition: transform .12s ease; }
/* Ecken eines Vielecks sind rund — so unterscheiden sie sich von den
   Rechteck-Ecken, die nur ihre Kante schieben. */
.gk-raumgriff--rund { border-radius: 50%; }
.gk-raumplus--klein { opacity: .75; }
.gk-raumplus--klein:hover { opacity: 1; }
.gk-raumgriff:hover { transform: scale(1.35); }
/* Teilungsgriff auf einer geteilten Kante: ein Querbalken auf der Linie. Er
   verschiebt die Teilung; ein Antippen entfernt sie wieder. */
.gk-raumteiler {
    position: absolute;
    background: var(--fw-bg, #fff);
    border: 1.5px solid var(--fw-accent, #0057b8);
    border-radius: 999px;
    pointer-events: auto;
    transition: transform .12s ease;
}
.gk-raumteiler:hover { background: var(--fw-accent, #0057b8); transform: scale(1.25); }
/* Beim Aktivieren pulsen die Griffe zweimal kurz auf — das Auge findet sie,
   ohne dass ein Hinweistext im Weg steht. */
.gk-raumgriff.ist-puls, .gk-raumplus.ist-puls { animation: gk-griff-puls .8s ease 2; }
@keyframes gk-griff-puls {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.55); }
}

/* Der Schatten am ⊕: beim Überfahren zeigt er, dass hier ein Anbau
   herausgezogen wird — gestrichelt wie der laufende Zug, mit Pfeil in die
   Zugrichtung. */
.gk-anbau-schatten {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--fw-accent, #0057b8);
    background: rgba(0, 87, 184, .07);
    color: var(--fw-accent, #0057b8);
    border-radius: 3px;
    font-weight: 700;
    pointer-events: none;
    animation: gk-anbau-atmen 1s ease-in-out infinite alternate;
}
@keyframes gk-anbau-atmen { from { opacity: .5; } to { opacity: 1; } }

/* Die Maße des laufenden Zugs, mitten im Rechteck. */
.gk-zugmass {
    position: absolute;
    padding: .18em .5em;
    background: var(--fw-bg, #fff);
    color: var(--fw-accent, #0057b8);
    border-radius: 999px;
    font-family: var(--fw-font, Arial, sans-serif);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 87, 184, .25);
}
/* Kantenlänge am Polygonzug: kleiner und grau, die Fläche bleibt blau. */
.gk-zugmass--kante { color: var(--fw-muted, #85857f); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); font-weight: 500; }

/* ─── Senkrechte Werkzeugleiste ──────────────────────────────────────────
   Am linken Rand der Planfläche, nach dem Vorbild des Steckdosenplaners. */
.gk-vtools {
    position: absolute;
    left: .55rem;
    top: .55rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .3rem;
    max-height: calc(100% - 1.1rem);
    overflow-y: auto;
    scrollbar-width: thin;
    background: var(--fw-surface, #f7f7f5);
    border: 1px solid var(--fw-border, #e6e6e3);
    border-radius: .55rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.gk-vt-kn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: none;
    color: var(--fw-text, #111);
    cursor: pointer;
    font: inherit;
}
.gk-vt-kn:hover { background: var(--fw-surface-2, #f0f0ed); }
.gk-vt-kn:disabled { opacity: .35; cursor: default; }
.gk-vt-kn:disabled:hover { background: none; }
.gk-vt-kn[aria-pressed="true"] {
    background: var(--fw-surface-2, #f0f0ed);
    border-color: var(--fw-border, #e6e6e3);
    color: var(--fw-accent, #0057b8);
    box-shadow: inset 0 0 0 1px var(--fw-accent, #0057b8);
}
.gk-vt-kn svg { width: 1.25rem; height: 1.25rem; display: block; }
.gk-vt-strich { height: 1px; background: var(--fw-border, #e6e6e3); margin: .15rem .2rem; }
/* Der Zoomwert unter den Lupenknöpfen. */
.gk-vt-wert { font-size: .58rem; font-weight: 600; color: var(--fw-muted, #85857f); text-align: center; line-height: 1.4; }

/* ─── Statuszeile ────────────────────────────────────────────────────────── */
.gk-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .9rem;
    padding: .4rem .65rem;
    border: 1px solid var(--fw-border, #e6e6e3);
    border-top: 0;
    border-radius: 0 0 var(--fw-radius, 4px) var(--fw-radius, 4px);
    background: var(--fw-surface, #f7f7f5);
    font-size: .74rem;
    color: var(--fw-muted, #85857f);
}
.gk-status strong { color: var(--fw-text-2, #4a4a48); font-weight: 600; }
.gk-warn { color: #9a5200; font-weight: 600; }

/* ─── Bedienelemente in den Dialogen ─────────────────────────────────────── */
.gk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.3rem;
    padding: .4rem .75rem;
    border: 1px solid var(--fw-border-str, #d4d4d0);
    border-radius: var(--fw-radius-lg, 8px);
    background: var(--fw-bg, #fff);
    color: var(--fw-text, #111);
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.gk-btn:hover { background: var(--fw-surface, #f7f7f5); }
.gk-btn:disabled { opacity: .4; cursor: default; }
.gk-btn--primary {
    background: var(--fw-accent, #0057b8);
    border-color: var(--fw-accent, #0057b8);
    color: #fff;
    font-weight: 600;
}
.gk-btn--primary:hover { background: var(--fw-accent-dk, #003d82); border-color: var(--fw-accent-dk, #003d82); }

.gk-input, .gk-select, .gk-textarea {
    width: 100%;
    padding: .45rem .55rem;
    font: inherit;
    font-size: 1rem;              /* unter 16px zoomt iOS beim Hineintippen */
    color: var(--fw-text, #111);
    background: var(--fw-bg, #fff);
    border: 1px solid var(--fw-border-str, #d4d4d0);
    border-radius: var(--fw-radius, 4px);
}
@media (min-width: 48rem) {
    .gk-input, .gk-select, .gk-textarea { font-size: .85rem; }
}
.gk-input:focus, .gk-select:focus, .gk-textarea:focus {
    outline: 2px solid var(--fw-accent, #0057b8);
    outline-offset: -1px;
    border-color: var(--fw-accent, #0057b8);
}
.gk-textarea { min-height: 4rem; resize: vertical; line-height: 1.5; }
.gk-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--fw-muted, #85857f);
    margin-bottom: .25rem;
}
.gk-feld { margin-bottom: .7rem; }
.gk-feldhinweis { font-size: .78rem; color: var(--fw-muted, #85857f); line-height: 1.5; margin: .2rem 0 0; }

/* ─── Dialoge ────────────────────────────────────────────────────────────── */
.gk-dialog {
    /* margin:auto muss hier stehen: ein Reset wie .fw-page * { margin: 0 } aus
       site.css nimmt dem Dialog sonst seine Zentrierung. */
    margin: auto;
    border: 1px solid var(--fw-border-str, #d4d4d0);
    border-radius: var(--fw-radius-lg, 8px);
    padding: 0;
    max-width: 30rem;
    width: calc(100vw - 2rem);
    background: var(--fw-bg, #fff);
    color: var(--fw-text, #111);
    font-family: var(--fw-font, Arial, sans-serif);
    box-shadow: var(--fw-shadow, 0 8px 32px rgba(0, 0, 0, .10));
}
.gk-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.gk-dialog-inhalt { padding: 1.1rem 1.2rem; }
.gk-dialog h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
.gk-dialog p { font-size: .85rem; line-height: 1.6; color: var(--fw-text-2, #4a4a48); margin: 0 0 .8rem; }
.gk-dialog-knoepfe { display: flex; justify-content: flex-end; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }

/* ═══ Touch-Bedienung (Klasse ist-touch, gesetzt bei grobem Zeiger) ═══════
   Trefferflächen auf Fingerbreite. Die Griffe sind in Bildpunkten gesetzt und
   mittig ausgerichtet — deshalb Vergrößerung über transform, nicht über
   Breite. */
.gk-app.ist-touch .gk-vt-kn { width: 2.75rem; height: 2.75rem; }
.gk-app.ist-touch .gk-vtools { gap: .35rem; }
.gk-app.ist-touch .gk-btn { min-height: 2.75rem; }
.gk-app.ist-touch .gk-raumgriff,
.gk-app.ist-touch .gk-raumteiler { transform: scale(1.6); }
.gk-app.ist-touch .gk-raumplus { transform: scale(1.5); }
.gk-app.ist-touch .gk-raumgriff:hover { transform: scale(1.6); }
.gk-app.ist-touch .gk-raumplus:hover { transform: scale(1.5); }
/* Der Knopf „Fang aus" ersetzt die Umschalttaste — nur am Tablet nötig. */
.gk-app:not(.ist-touch) .gk-vt-kn[data-gk="frei"] { display: none; }