/*
 * Schichtkarten-Konfigurator, Ebene 2 Familie Laser (ADR 012) – eine Datei fuer Studio und Shop
 * (docs/designer-css.md): kein rem, Laengen in --u, Klassen unter twk-lk, Container-Anfragen, jeder Wert,
 * den ein Theme aendern darf, als Variable mit Rueckfall.
 *
 * Seit 01.10.2026 auf der Huelle des Baukastens wie Poster und Schriftzug: Raster, Spalte, Fussleiste,
 * Kacheln, Raster, Summe und Popup kommen aus huelle.css. Hier steht nur, was die Laserkarte eigen hat:
 * Buehne mit Karte und 3D, Felder, Ortszeile, Marker. Die alten Variablen der Bloecke (--twk-lk-*) nimmt
 * die Huelle als Rueckfall.
 */
@import url("../baukasten/huelle.css");

.twk-lk {
  --twk-lk-t: var(--twk-bk-t);
  --twk-lk-l: var(--twk-bk-l);
  --twk-lk-g: var(--twk-bk-grau);
  --twk-lk-a: var(--twk-bk-a);
  --twk-lk-at: var(--twk-bk-at);
  --twk-lk-p: var(--twk-bk-p);
  --twk-lk-r: var(--twk-bk-r);
}
/* Themes gestalten button und input global; in der Familie gilt nur das Eigene (die Bausteine der Huelle
   haben hoehere Spezifitaet und setzen ihre Werte selbst). */
.twk-lk button,
.twk-lk input,
.twk-lk select {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  min-width: 0;
  min-height: 0;
}
.twk-lk button {
  cursor: pointer;
}
.twk-lk button:disabled {
  cursor: default;
}
.twk-lk svg {
  display: block;
}
.twk-lk h3,
.twk-lk p,
.twk-lk ul {
  margin: 0;
  padding: 0;
}

/* ---- Buehne: am Telefon hoch genug fuer die Platte, nebeneinander die ganze Flaeche ---- */
.twk-lk > .twk-bk__raster > .twk-bk__buehne {
  padding: 0;
}
.twk-lk-buehne {
  container: twk-lk-buehne / size;
  position: relative;
  overflow: hidden;
  height: min(64cqh, 125cqw);
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-lk-buehne {
    height: 100%;
  }
}
.twk-lk-buehne__bild {
  position: absolute;
  inset: 0;
  transition: filter 0.2s, opacity 0.2s;
}
.twk-lk-buehne[data-laedt] .twk-lk-buehne__bild {
  filter: blur(2px);
  opacity: 0.75;
}
/* 2D/3D links oben, am Rechner und am Telefon gleich. */
.twk-lk-buehne__ansichten {
  position: absolute;
  top: calc(var(--u) * 0.75);
  left: calc(var(--u) * 0.75);
  z-index: 3;
  flex-direction: row;
}
.twk-lk .twk-lk-buehne__ansichten > button {
  width: auto;
  min-width: calc(var(--u) * 2.75);
  padding: 0 calc(var(--u) * 0.6);
  font-size: var(--twk-bk-fs-chip);
  font-weight: 500;
}
.twk-lk__warte,
.twk-lk-3d__meldung {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--twk-lk-g);
  font-size: calc(var(--u) * 0.9);
}
/* Eine kleine Kartenbaustelle begleitet nur die tatsächliche Berechnung. */
.twk-lk-baustelle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(calc(var(--u) * 21), calc(100% - var(--u) * 2));
  box-sizing: border-box;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1);
  background: var(--twk-lk-p);
  text-align: center;
  pointer-events: none;
}
.twk-lk-baustelle__bild {
  display: block;
  width: calc(var(--u) * 6);
  max-width: 100%;
  height: auto;
  margin: 0 auto calc(var(--u) * .65);
}
.twk-lk .twk-lk-baustelle__titel {
  margin: 0;
  font-size: calc(var(--u) * 1.05);
  line-height: 1.35;
  font-weight: 650;
}
.twk-lk .twk-lk-baustelle__funk {
  display: grid;
  align-items: center;
  min-height: 3em;
  margin: calc(var(--u) * .4) 0 0;
  font-size: calc(var(--u) * .95);
  line-height: 1.5;
}
.twk-lk-baustelle__funk span {
  animation: twk-lk-baustellenfunk .4s ease-out;
}
.twk-lk-baustelle__wege path {
  stroke-dasharray: 1;
  animation: twk-lk-wege 5.2s ease-in-out infinite;
}
.twk-lk-baustelle__wege path:nth-child(2) { animation-delay: -.8s; }
.twk-lk-baustelle__zuhause {
  animation: twk-lk-zuhause 2.6s ease-in-out infinite;
}
@container twk-lk-buehne (max-height: 320px) {
  .twk-lk-baustelle { padding: calc(var(--u) * .6) calc(var(--u) * 1); }
  .twk-lk-baustelle__bild { width: calc(var(--u) * 5); margin-bottom: calc(var(--u) * .25); }
  .twk-lk .twk-lk-baustelle__titel { font-size: calc(var(--u) * .95); }
  .twk-lk .twk-lk-baustelle__funk { font-size: calc(var(--u) * .85); margin: calc(var(--u) * .3) 0; }
}
@keyframes twk-lk-wege {
  0% { stroke-dashoffset: 1; }
  70%, 100% { stroke-dashoffset: 0; }
}
@keyframes twk-lk-zuhause {
  50% { opacity: .35; }
}
@keyframes twk-lk-baustellenfunk {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.twk-lk__fehler,
.twk-lk__hinweise {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: max-content;
  max-width: calc(100% - var(--u) * 2);
  padding: calc(var(--u) * 0.55) calc(var(--u) * 0.9);
  border-radius: var(--twk-lk-r);
  background: var(--twk-lk-p);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  font-size: calc(var(--u) * 0.82);
}
.twk-lk__fehler {
  top: calc(var(--u) * 0.75);
  display: flex;
  gap: calc(var(--u) * 0.75);
  align-items: center;
  color: #9b2c1f;
}
.twk-lk .twk-lk__fehler button {
  text-decoration: underline;
}
.twk-lk__hinweise {
  bottom: calc(var(--u) * 2);
  list-style: none;
}
.twk-lk__quelle {
  position: absolute;
  right: calc(var(--u) * 0.6);
  bottom: calc(var(--u) * 0.4);
  z-index: 2;
  font-size: calc(var(--u) * 0.68);
  color: var(--twk-lk-g);
}


/* ---- Vorschau zum Anfassen ---- */
.twk-lk-flaeche {
  position: absolute;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.twk-lk-flaeche[data-zieht="karte"] {
  cursor: grabbing;
}
.twk-lk-flaeche[data-zieht="symbol"] {
  cursor: move;
}
/* Beim Ziehen eines Markers bleibt die Kopie stehen, die Marker der Vorschau treten zurueck. */
.twk-lk-flaeche[data-zieht="symbol"] [id^="symbol"] {
  opacity: 0.35;
}
.twk-lk-flaeche__platte,
.twk-lk-kopie,
.twk-lk-rahmen,
.twk-lk-flaeche__symbol {
  position: absolute;
  pointer-events: none;
}
.twk-lk-flaeche__platte {
  box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 2.2) rgba(0, 0, 0, var(--twk-lk-schattenstaerke, 0.22));
}
.twk-lk-flaeche__platte > svg,
.twk-lk-kopie__bild > svg {
  width: 100%;
  height: 100%;
}
.twk-lk-kopie {
  overflow: hidden;
}
.twk-lk-kopie__bild {
  position: absolute;
}
.twk-lk-rahmen svg {
  position: absolute;
  inset: 0;
}
.twk-lk-knoepfe {
  position: absolute;
  top: calc(var(--u) * 0.75);
  right: calc(var(--u) * 0.75);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 0.5);
  cursor: default;
}
.twk-lk-zoom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--twk-lk-r);
  background: var(--twk-lk-p);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}
.twk-lk .twk-lk-zoom button {
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 1.3);
  line-height: 1;
}
.twk-lk .twk-lk-zoom button:disabled,
.twk-lk .twk-lk-zentrieren:disabled {
  opacity: 0.3;
}
.twk-lk-zoom__km {
  padding: calc(var(--u) * 0.15) 0;
  border-block: 1px solid var(--twk-lk-l);
  font-size: calc(var(--u) * 0.62);
  text-align: center;
  color: var(--twk-lk-g);
}
.twk-lk .twk-lk-zentrieren {
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  display: grid;
  place-items: center;
  border-radius: var(--twk-lk-r);
  background: var(--twk-lk-p);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}
.twk-lk-zentrieren svg {
  width: 50%;
  height: 50%;
}

/* ---- 3D ---- */
.twk-lk-3d,
.twk-lk-3d__leinwand {
  position: absolute;
  inset: 0;
}
.twk-lk-3d__leinwand {
  display: flex;
  align-items: center;
  justify-content: center;
}
.twk-lk-3d__leiste {
  position: absolute;
  top: calc(var(--u) * 0.75);
  right: calc(var(--u) * 0.75);
  display: flex;
  gap: calc(var(--u) * 0.4);
}
.twk-lk .twk-lk-pille {
  padding: calc(var(--u) * 0.45) calc(var(--u) * 0.9);
  border-radius: 999px;
  background: var(--twk-lk-p);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  font-size: calc(var(--u) * 0.85);
}
.twk-lk .twk-lk-pille[aria-pressed="true"] {
  background: var(--twk-lk-a);
  color: var(--twk-lk-at);
}
.twk-lk-3d__hinweis {
  position: absolute;
  left: calc(var(--u) * 0.75);
  bottom: calc(var(--u) * 0.4);
  font-size: calc(var(--u) * 0.68);
  color: var(--twk-lk-g);
  pointer-events: none;
}

.twk-lk-beschriftung {
  display: block;
  font-size: calc(var(--u) * 0.85);
  color: var(--twk-lk-g);
}
.twk-lk-tipp,
.twk-lk-meldung {
  font-size: calc(var(--u) * 0.8);
  color: var(--twk-lk-g);
}
.twk-lk-meldung {
  color: #9b2c1f;
}
.twk-lk .twk-lk-feld {
  width: 100%;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 0.9);
  border: 1px solid var(--twk-lk-l);
  border-radius: var(--twk-lk-r);
  background: var(--twk-lk-p);
  font-size: max(16px, calc(var(--u) * 1));
}
.twk-lk .twk-lk-feld:focus {
  border-color: var(--twk-lk-a);
  outline: none;
}
.twk-lk-suche {
  position: relative;
}
.twk-lk-suche__icon {
  position: absolute;
  left: calc(var(--u) * 0.8);
  top: 50%;
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
  transform: translateY(-50%);
  color: var(--twk-lk-g);
}
.twk-lk .twk-lk-suche .twk-lk-feld {
  padding-left: calc(var(--u) * 2.6);
}
.twk-lk-vorschlaege {
  list-style: none;
  border: 1px solid var(--twk-lk-l);
  border-radius: var(--twk-lk-r);
  overflow: hidden;
}
.twk-lk .twk-lk-vorschlaege button {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.9);
  border-bottom: 1px solid var(--twk-lk-l);
  text-align: left;
}
.twk-lk-vorschlaege li:last-child button {
  border-bottom: 0;
}
.twk-lk-vorschlaege span {
  font-size: calc(var(--u) * 0.8);
  color: var(--twk-lk-g);
}
.twk-lk .twk-lk-vorschlaege button:hover {
  background: color-mix(in srgb, var(--twk-lk-t) 4%, transparent);
}
.twk-lk-farbfleck {
  display: block;
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.twk-lk-farbfleck[data-ohne] {
  background: linear-gradient(135deg, transparent 46%, var(--twk-lk-g) 46% 54%, transparent 54%);
}
.twk-lk .twk-lk-kachel[aria-checked="true"],
.twk-lk .twk-lk-zeile[aria-checked="true"],
.twk-lk-umschalter {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: calc(var(--u) * 0.2);
  border-radius: var(--twk-lk-r);
  background: color-mix(in srgb, var(--twk-lk-t) 6%, transparent);
}
.twk-lk .twk-lk-umschalter button {
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.4);
  border-radius: calc(var(--twk-lk-r) * 0.8);
  font-size: calc(var(--u) * 0.85);
}
.twk-lk .twk-lk-umschalter button[aria-checked="true"] {
  background: var(--twk-lk-p);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.twk-lk-textfeld {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.35);
}
.twk-lk-textfeld__kopf {
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--u) * 0.85);
  color: var(--twk-lk-g);
}
.twk-lk-textfeld__zaehler[data-knapp] {
  color: #9b5b12;
}
.twk-lk-gruppe {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
}


/* ---- Marker (schritt-marker.tsx) ---- */
.twk-lk-satz {
  display: block;
  font-size: var(--twk-bk-fs-klein);
  color: var(--twk-bk-grau);
}
.twk-lk-symbolbild {
  width: 100%;
  height: 100%;
}
.twk-lk-formkachel {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 22%;
}
.twk-lk-marker {
  border: 1px solid var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
  background: var(--twk-bk-p);
}
.twk-lk-marker + .twk-lk-marker {
  margin-top: var(--twk-bk-a2);
}
.twk-lk-marker__leiste {
  display: flex;
  align-items: center;
  gap: var(--twk-bk-a1);
  padding: var(--twk-bk-a2);
}
.twk-lk .twk-lk-marker__form {
  width: calc(var(--u) * 2.75);
  height: calc(var(--u) * 2.75);
  padding: calc(var(--u) * 0.45);
  border: 1px solid var(--twk-bk-rand);
  border-radius: var(--twk-bk-r-klein);
  background: var(--twk-bk-p);
}
.twk-lk-marker__trenner {
  width: 1px;
  height: calc(var(--u) * 1.75);
  margin: 0 var(--twk-bk-a1);
  background: var(--twk-bk-l);
}
.twk-lk .twk-lk-marker__werkzeug {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
  border-radius: var(--twk-bk-r-klein);
  color: var(--twk-bk-grau);
}
.twk-lk .twk-lk-marker__werkzeug:hover,
.twk-lk .twk-lk-marker__werkzeug[aria-pressed="true"] {
  background: color-mix(in srgb, var(--twk-bk-t) 7%, var(--twk-bk-p));
  color: var(--twk-bk-t);
}
.twk-lk .twk-lk-marker__werkzeug[data-rechts] {
  margin-left: auto;
}
.twk-lk-marker__werkzeug svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twk-lk-marker__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--twk-bk-a2);
  padding: var(--twk-bk-a2) var(--twk-bk-a3);
  border-top: 1px solid var(--twk-bk-l);
  font-size: var(--twk-bk-fs-chip);
}
.twk-lk-marker__zeile > span:first-child {
  margin-right: auto;
}
.twk-lk-farbpunkt {
  display: block;
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}
.twk-lk .twk-lk-farbwahl {
  padding: calc(var(--u) * 0.2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px transparent;
}
.twk-lk .twk-lk-farbwahl[aria-checked="true"] {
  box-shadow: inset 0 0 0 2px var(--twk-bk-a);
}
.twk-lk .twk-lk-markerkarte-knopf {
  display: grid;
  justify-items: center;
  gap: var(--twk-bk-a2);
  width: 100%;
  padding: var(--twk-bk-a4);
  border: 1px solid var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
  background: var(--twk-bk-p);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
}
.twk-lk .twk-lk-markerkarte-knopf:hover {
  border-color: var(--twk-bk-a);
}
.twk-lk-markerkarte-knopf__bilder {
  display: flex;
  align-items: flex-end;
  height: calc(var(--u) * 3.5);
}
.twk-lk-markerkarte-knopf__bilder > svg {
  width: calc(var(--u) * 2.2);
  height: auto;
  margin: 0 calc(var(--u) * -0.35);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));
}
.twk-lk-markerkarte-knopf__bilder > svg:nth-child(2) {
  width: calc(var(--u) * 2.8);
  position: relative;
  z-index: 1;
}
.twk-lk-markerkarte-knopf__name {
  font-size: calc(var(--u) * 1.1);
  font-weight: 500;
}

/* ---- Marker-Dialog: Suche, Karte mit Ausschnitt, Hinweis ---- */
.twk-lk-markerdialog {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--twk-bk-a3);
  height: 100%;
}
.twk-lk-suchbereich {
  position: relative;
}
.twk-lk-markerdialog .twk-lk-vorschlaege {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--twk-bk-p);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}
.twk-lk-markerdialog__hinweis {
  margin: 0;
  font-size: var(--twk-bk-fs-chip);
  color: #9b5b12;
}


/* ---- Knopf im Theme-Block ---- */
.twk-lk-block {
  --u: 1em;
  container-type: inline-size;
}
.twk-lk-block .twk-lk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  width: var(--twk-lk-cta-breite, 100%);
  min-height: calc(var(--u) * 3.2);
  padding: 0 calc(var(--u) * 1.4);
  border: 0;
  border-radius: var(--twk-lk-radius, calc(var(--u) * 0.625));
  background: var(--twk-lk-akzent, rgb(var(--color-button, 29, 28, 26)));
  color: var(--twk-lk-akzent-text, rgb(var(--color-button-text, 255, 255, 255)));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.twk-lk-block .twk-lk-cta svg {
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.twk-lk-block:not([data-bereit]) .twk-lk-cta {
  opacity: 0.6;
  pointer-events: none;
}
.twk-lk-block__hinweis {
  margin: calc(var(--u) * 0.5) 0 0;
  font-size: calc(var(--u) * 0.85);
  opacity: 0.75;
}

/* Ortswahl: gewöhnliche Straßenkarte mit dem tatsächlichen Ausschnitt. */
.twk-lk-orts { position: relative; width: 100%; height: 100%; min-height: 280px; overflow: hidden; touch-action: none; cursor: grab; }
.twk-lk-orts:focus-visible { outline: 3px solid var(--twk-lk-akzent, #0865ac); outline-offset: -3px; }
.twk-lk-orts__titel { position: absolute; top: 10px; left: 10px; right: 70px; padding: 7px 10px; border-radius: 8px; background: #fffffff0; color: #242424; font-size: 12px; pointer-events: none; }
.twk-lk-orts__meldung { position: absolute; left: 12px; right: 12px; bottom: 28px; padding: 10px; background: white; color: #242424; border-radius: 8px; }

/* ---- Ortszeile: der gewaehlte Ort in jedem Schritt, mit deutlichem Weg zurueck ---- */
.twk-lk .twk-lk-ort {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(var(--u) * 0.15) calc(var(--u) * 0.7);
  width: 100%;
  margin-bottom: calc(var(--u) * 1);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 0.9);
  border: 1px solid var(--twk-lk-l);
  border-radius: var(--twk-lk-r);
  background: color-mix(in srgb, var(--twk-lk-t) 3%, var(--twk-lk-p));
  text-align: left;
}
.twk-lk .twk-lk-ort:hover {
  border-color: var(--twk-lk-a);
}
.twk-lk-ort svg {
  width: calc(var(--u) * 1.3);
  height: calc(var(--u) * 1.3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.twk-lk-ort__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.twk-lk-ort__text strong {
  font-size: calc(var(--u) * 0.9);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.twk-lk-ort__text small {
  font-size: calc(var(--u) * 0.75);
  color: var(--twk-lk-g);
}
.twk-lk-ort__aktion {
  grid-column: 1 / -1;
  font-size: calc(var(--u) * 0.8);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: calc(var(--u) * 0.15);
}
.twk-lk-marker__passen {
  display: grid;
  justify-items: start;
  gap: var(--twk-bk-a2);
  margin-top: var(--twk-bk-a3);
}
/* Ort-Schritt: Suche und Marker sind zwei Abschnitte untereinander. */
.twk-lk .twk-bk-felder + .twk-bk-felder {
  margin-top: var(--twk-bk-a5);
  padding-top: var(--twk-bk-a5);
  border-top: 1px solid var(--twk-bk-l);
}