/* ---------- Visitenkarte: Weiche für sechs Besuchertypen ----------
   Papier-Theme wie die übrige Site. Neu ist nur eines: die Seite
   übernimmt die Farbe der geöffneten Tür. Alles Farbige liest --ff
   (Neon, nur Grafik) und --kf (kräftig, AA-fest, trägt Text). */

/* Ausgangslage: keine Tür offen, also keine Farbe. */
:root {
  --kf: var(--tinte);
  --ff: var(--linie);
  --tf: var(--flaeche);
}

[data-farbe="ki"]      { --kf: var(--k-ki);      --ff: var(--f-ki);      --tf: var(--t-ki); }
[data-farbe="netz"]    { --kf: var(--k-netz);    --ff: var(--f-netz);    --tf: var(--t-netz); }
[data-farbe="fertig"]  { --kf: var(--k-fertig);  --ff: var(--f-fertig);  --tf: var(--t-fertig); }
[data-farbe="betrieb"] { --kf: var(--k-betrieb); --ff: var(--f-betrieb); --tf: var(--t-betrieb); }
[data-farbe="energie"] { --kf: var(--k-energie); --ff: var(--f-energie); --tf: var(--t-energie); }
[data-farbe="marke"]   { --kf: var(--k-marke);   --ff: var(--f-marke);   --tf: var(--t-marke); }

/* Der Farbumschlag der Seite läuft langsamer als das Aufgehen der Tür:
   er soll als Stimmungswechsel gelesen werden, nicht als Blinken. */
.vk__lead b { transition: color .7s var(--ease); }
.karte__linie path { transition: stroke .7s var(--ease); }

/* Diese Seite hat keinen Hero, die Nav klebt oben statt zu schweben. */
.mast { position: sticky; top: 0; background: var(--papier); }

/* ---------- Kopf ---------- */

.vk { padding-block: clamp(1.75rem, 5vw, 3.25rem) 0; }

.vk__kopf {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 6vw, 3.75rem);
}
@media (min-width: 780px) {
  .vk__kopf { grid-template-columns: 19rem minmax(0, 1fr); }
}
/* Am Handy zählt jede Zeile über der ersten Tür. Der Kopf wird kleiner,
   damit vier der sechs Türen ohne Scrollen im Bild stehen. */
@media (max-width: 34rem) {
  .vk { padding-block: 1.25rem 0; }
  .vk__kopf { gap: 1.1rem; margin-bottom: 1.5rem; }
  .karte { max-width: 15.5rem; }
  .vk h1 { margin-bottom: .5rem; }
  .vk__lead { font-size: 1rem; }
}

.vk h1 {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.9rem, 5.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  margin: 0 0 .7rem;
  max-width: 15ch;
}
.vk__lead {
  margin: 0;
  max-width: 44ch;
  color: var(--gedaempft);
  font-size: 1.0625rem;
}
.vk__lead b { color: var(--kf); font-weight: 600; }

/* ---------- Karten-Spiegel ----------
   PLATZHALTER. Sobald der Druckentwurf feststeht, wird der Inhalt von
   .karte gegen dessen Vorderseite getauscht; Seitenverhältnis, Rahmen
   und Position bleiben, wie sie sind. */

.karte {
  aspect-ratio: 85 / 55;
  width: 100%;
  max-width: 19rem;
  border: 1px solid var(--linie);
  background: var(--papier);
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.karte__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.karte__claim {
  margin: .3rem 0 0;
  font-size: .72rem;
  color: var(--gedaempft);
}
.karte__fuss {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gedaempft);
  position: relative;
  z-index: 1;
}
.karte__punkte { display: flex; gap: .28rem; margin-left: auto; }
.karte__punkte i {
  width: .42rem;
  height: .42rem;
  border-radius: var(--pill);
  display: block;
}
.karte__linie {
  position: absolute;
  inset: auto 0 2.2rem;
  width: 100%;
  height: 3.4rem;
  pointer-events: none;
}
.karte__linie path { fill: none; stroke: var(--ff); stroke-width: 1; opacity: .55; }
.karte__marke {
  position: absolute;
  inset: 0 0 auto auto;
  padding: .28rem .45rem;
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedaempft);
  background: var(--flaeche);
}

/* ---------- Klemmenreihe: die sechs Türen ---------- */

/* Sechs Türen gehen in 1, 2 oder 3 Spalten restlos auf. Ein
   auto-fit-Raster ließe je nach Breite leere Zellen stehen, und eine
   leere Zelle sieht aus wie ein Fehler. */
.klemmen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--haarlinie);
  border: 1px solid var(--haarlinie);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 34rem) { .klemmen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .klemmen { grid-template-columns: repeat(3, 1fr); } }

.klemme {
  appearance: none;
  border: 0;
  background: var(--papier);
  font: inherit;
  color: var(--tinte);
  text-align: left;
  padding: 1.05rem 1.15rem 1.05rem 1.6rem;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.9rem;
  transition: background-color .25s var(--ease);
}
/* Die Kante links ist die Klemmenmarkierung, nicht Zierrat: sie ist
   das einzige Teil der Tür, das ihre Farbe trägt. */
.klemme::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ff);
  transition: width .25s var(--ease);
}
.klemme[data-ton="ki"]      { --tf: var(--t-ki);      --ff: var(--f-ki);      --kf: var(--k-ki); }
.klemme[data-ton="netz"]    { --tf: var(--t-netz);    --ff: var(--f-netz);    --kf: var(--k-netz); }
.klemme[data-ton="fertig"]  { --tf: var(--t-fertig);  --ff: var(--f-fertig);  --kf: var(--k-fertig); }
.klemme[data-ton="betrieb"] { --tf: var(--t-betrieb); --ff: var(--f-betrieb); --kf: var(--k-betrieb); }
.klemme[data-ton="energie"] { --tf: var(--t-energie); --ff: var(--f-energie); --kf: var(--k-energie); }
.klemme[data-ton="marke"]   { --tf: var(--t-marke);   --ff: var(--f-marke);   --kf: var(--k-marke); }

/* Nur wo es einen Zeiger gibt. Auf Sensorbildschirmen bliebe der
   Hover-Zustand nach dem Tippen kleben und die falsche Tür sähe
   dauerhaft ausgewählt aus. */
@media (hover: hover) {
  .klemme:hover { background: var(--tf); }
  .klemme:hover::before { width: 6px; }
}
.klemme:active { background: var(--tf); }
.klemme:active::before { width: 6px; }
.klemme[aria-expanded="true"]::before,
.klemme:focus-visible::before { width: 6px; }
.klemme[aria-expanded="true"] { background: var(--tf); }
.klemme[aria-expanded="true"] .klemme__wort { color: var(--kf); }
/* Innen liegender Ring, damit er die Nachbarzelle nicht überlappt. Die
   Klemmenkante wächst dabei auf 6px, sonst verdeckte der Ring die Farbe. */
.klemme:focus-visible { outline: 2px solid var(--tinte); outline-offset: -2px; }

.klemme__wort {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-wrap: balance;
  transition: color .25s var(--ease);
}
.klemme__pfeil {
  margin-left: auto;
  color: var(--gedaempft);
  transition: transform .25s var(--ease), color .25s var(--ease);
  flex: none;
}
.klemme[aria-expanded="true"] .klemme__pfeil { transform: rotate(90deg); color: var(--kf); }

.klemme__bald {
  margin-left: auto;
  white-space: nowrap;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gedaempft);
  border: 1px dashed var(--haarlinie);
  border-radius: var(--pill);
  padding: .18rem .5rem;
  flex: none;
}
.klemme--stumm .klemme__wort { color: var(--gedaempft); }

/* ---------- Der geöffnete Raum ---------- */

.tuer { border-top: 1px solid var(--linie); }
.tuer__in { padding-block: clamp(1.5rem, 4vw, 2.4rem) clamp(2rem, 5vw, 3rem); }

.tuer__tag {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kf);
  margin-bottom: .9rem;
}
.tuer__satz {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.2vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -.025em;
  max-width: 32ch;
  margin: 0 0 1.5rem;
}
.tuer__ziele { display: flex; flex-wrap: wrap; gap: .7rem; }

.ziel {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinte);
  font-size: .95rem;
  font-weight: 500;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
@media (hover: hover) {
  .ziel:hover { background: var(--tf); border-color: var(--kf); }
  .ziel--erst:hover { background: var(--kf); border-color: var(--kf); color: var(--papier); }
}
.ziel:active { background: var(--tf); border-color: var(--kf); }
.ziel--erst:active { background: var(--kf); border-color: var(--kf); color: var(--papier); }
.ziel:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.ziel--erst { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.ziel__pfeil { color: var(--ff); }
.ziel--erst .ziel__pfeil { color: currentColor; }

.tuer__notiz {
  margin: 1.35rem 0 0;
  font-size: .9rem;
  color: var(--gedaempft);
  max-width: 48ch;
}

/* ---------- Aufwachsen (nur mit JS) ----------
   Ohne JS steht jede Tür offen; die Seite ist dann länger, aber
   vollständig. Mit JS wächst genau eine auf. */

.js .tuer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.js .tuer > .tuer__in { overflow: hidden; min-height: 0; }
.js .tuer.ist-auf { grid-template-rows: 1fr; }
.tuer[hidden] { display: none; }

/* ---------- Direkter Draht ---------- */

.draht {
  border-top: 1px solid var(--linie);
  background: var(--papier);
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.25rem;
}
.draht__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: baseline;
  margin: 0;
  font-size: .95rem;
}
.draht a { color: var(--tinte); }
.draht__weich { color: var(--gedaempft); font-size: .88rem; }

.speichern {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1rem;
  border: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinte);
  font-size: .92rem;
  font-weight: 500;
  transition: background-color .25s var(--ease);
}
@media (hover: hover) {
  .speichern:hover { background: var(--tf); }
}
.speichern:active { background: var(--tf); }
.speichern:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.speichern svg { color: var(--ff); flex: none; }

@media (max-width: 700px) {
  .draht {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -1px 0 var(--haarlinie);
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ---------- Druck: alles klappt auf, Ziele stehen als Adresse dabei ---------- */

@media print {
  .mast, .draht, .klemme__pfeil, .karte__marke { display: none; }
  .js .tuer, .tuer { display: block; grid-template-rows: none; }
  .tuer[hidden] { display: block; }
  .js .tuer > .tuer__in { overflow: visible; }
  .ziel::after { content: " (" attr(href) ")"; font-size: .75em; }
  .ziel--erst { background: none; color: var(--tinte); }
}