/* Right column: room bar, steering patch, conversation labels, the input strip, choices; protocol and rules. */

/* ---- room bar and time tape (online) -------------------------------------------------------------- */
.raum-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); font-size: 13.5px; color: var(--auf-tisch-leise); padding-bottom: var(--s3); border-bottom: 1px solid var(--tisch-linie); }
.raum-code .mono { color: var(--auf-tisch); }
.raum-leute { display: flex; flex-wrap: wrap; gap: 4px var(--s3); }
.raum-leute li { display: inline-flex; align-items: center; gap: 5px; color: var(--auf-tisch); }
.raum-leute li.ist-weg { opacity: 0.55; }
.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25); flex: none; }
.uhr { display: inline-grid; justify-items: end; gap: 3px; margin-left: auto; }
.uhr-zeit { font-size: 12.5px; color: var(--auf-tisch-leise); }
.uhr-zeit .zahl { font-size: 19px; color: var(--auf-tisch); }
.massband { display: block; width: 120px; height: 12px; background: rgba(255, 255, 255, 0.08); border-radius: 1px; overflow: hidden; }
.massband-rest {
  display: block; height: 100%; width: calc(var(--rest, 1) * 100%);
  background:
    repeating-linear-gradient(90deg, #2B2622 0 1px, transparent 1px 6px) 0 0 / 100% 45% no-repeat,
    repeating-linear-gradient(90deg, #2B2622 0 1.4px, transparent 1.4px 30px) 0 0 / 100% 75% no-repeat,
    #F1E9C9;
  transition: width 1s linear;
}
.uhr.knapp .uhr-zeit .zahl { color: #FF9C8F; }
.uhr.knapp .massband-rest { background-color: #F4B9A8; }
@media (prefers-reduced-motion: reduce) { .massband-rest { transition: none; } }
.weg-hinweis { background: var(--leinen); background-image: var(--webung); padding: var(--s3) var(--s4); border-left: 4px solid var(--rot); display: grid; gap: var(--s2); font-size: 14.5px; }

/* ---- the active steering card as an embroidered patch, with the earlier ones beneath ------------------- */
.lenkung-leiste { display: none; }
.verordnung-stapel { position: relative; display: grid; isolation: isolate; }
.verordnung-stapel > .verordnung { grid-area: 1 / 1; }
.verordnung-stapel > .stapel-hinweis, .verordnung-stapel > .verlauf { grid-row: 2; }
.verordnung {
  display: grid; gap: 2px; width: 100%; text-align: left;
  background: var(--leinen); background-image: var(--webung);
  border: 0; border-radius: 10px;
  padding: 10px 16px 11px;
  box-shadow: inset 0 0 0 3px var(--wa-eigen), inset 0 0 0 5px var(--leinen), 0 3px 0 var(--leinen-schatten), 0 8px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer; font: inherit; color: var(--tinte);
  position: relative;
}
.verordnung::after { content: ''; position: absolute; inset: 7px; border: 1.5px dashed rgba(34, 68, 176, 0.5); border-radius: 6px; pointer-events: none; }
.verordnung.alt > * { visibility: hidden; }
.verordnung.alt { transform: translate(calc(var(--i) * 5px), calc(var(--i) * 5px)) rotate(calc(var(--i) * 1.2deg)); opacity: 0.7; z-index: -1; cursor: default; }
.verordnung-stapel .verordnung.aktiv { z-index: 1; }
.vo-kopf { display: flex; justify-content: space-between; gap: var(--s3); font-size: 12px; color: var(--tinte-2); }
.vo-name { font-family: var(--f-titel); font-weight: 800; font-size: 20px; color: var(--wa-eigen); line-height: 1.15; }
.vo-pole { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); font-size: 13.5px; }
.vo-pol { font-weight: 600; }
.vo-fuss { font-size: 12px; color: var(--tinte-2); }
.vo-stempel { display: none; }
.verordnung.landet { animation: aufnaehen 0.5s ease-out; }
@keyframes aufnaehen { from { transform: scale(1.06) rotate(-2deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .verordnung.landet { animation: none; } }
.stapel-hinweis { font-size: 12.5px; color: var(--auf-tisch-leise); margin-top: var(--s3); }
.verlauf { display: grid; gap: var(--s2); margin-top: var(--s3); }
.verlauf .verordnung { cursor: default; opacity: 0.85; }
.lenkwahl { display: grid; gap: var(--s3); margin-top: var(--s3); }
.lenkwahl .verordnung:hover, .lenkwahl .verordnung:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 3px var(--wa-eigen), inset 0 0 0 5px var(--leinen), 0 5px 0 var(--leinen-schatten), 0 12px 22px rgba(0, 0, 0, 0.35); }

/* ---- conversation: woven labels --------------------------------------------------------------------- */
.gespraech summary { display: flex; align-items: baseline; gap: var(--s3); cursor: pointer; list-style: none; padding: 2px 0; }
.gespraech summary::-webkit-details-marker { display: none; }
.gespraech-titel { font-family: var(--f-titel); font-weight: 700; font-size: 18px; }
.gespraech-kurz { display: none; font-size: 13px; color: var(--auf-tisch-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.gespraech:not([open]) .gespraech-kurz { display: block; }
.gespraech-knopf { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--auf-tisch-leise); border-bottom: 2px solid var(--auf-tisch-leise); transform: rotate(45deg); align-self: center; flex: none; }
.gespraech[open] .gespraech-knopf { transform: rotate(-135deg); }
.gespraech-leer { font-size: 14px; color: var(--auf-tisch-leise); font-style: italic; }
.etiketten { display: grid; gap: var(--s2); margin-top: var(--s2); }
.etikett {
  position: relative;
  background: var(--leinen-hell); background-image: var(--webung);
  padding: 6px 16px 8px 18px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%);
  box-shadow: 0 3px 0 var(--leinen-schatten);
}
.etikett::before { content: ''; position: absolute; left: 12px; right: 12px; top: 3px; bottom: 3px; border-top: 1.5px dashed var(--ink); border-bottom: 1.5px dashed var(--ink); opacity: 0.8; pointer-events: none; }
.etikett.ist-letzter { background-color: var(--leinen-weiss); }
.g-kopf { display: flex; align-items: baseline; gap: var(--s2); font-size: 12.5px; }
.g-name { font-family: var(--f-titel); font-weight: 800; font-size: 14px; color: var(--ink-text); }
.g-mech { color: var(--tinte-2); }
.g-wert { margin-left: auto; color: var(--tinte-2); white-space: nowrap; }
.g-wert .zahl { color: var(--tinte); }
.g-satz { font-size: 14px; line-height: 1.38; margin-top: 1px; }
.vorgabe-klein { color: var(--tinte-2); }
.gespraech-mehr { display: inline-block; margin-top: var(--s2); font-size: 13px; color: var(--auf-tisch-leise); }

/* note on the previous turn */
.vermerk { background: var(--leinen); background-image: var(--webung); border-left: 4px solid var(--ink); padding: 6px 12px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 2px 0 var(--leinen-schatten); }
.v-wert { font-family: var(--f-zahl); font-weight: 500; }
.v-minus { color: var(--rot); font-weight: 600; }
.vermerk .knopf-link { margin-left: var(--s3); }

/* ---- the input: a strip of linen with a stitched border in the player's thread ------------------------------ */
.karte, .notiz-karte, .warte-karte {
  position: relative;
  background: var(--leinen); background-image: var(--webung);
  padding: var(--s4) var(--s5) var(--s4);
  border-radius: 2px;
  box-shadow: 0 3px 0 var(--leinen-schatten), 0 14px 28px rgba(0, 0, 0, 0.35);
  --knopf-farbe: var(--ink-text, var(--kreuz-rot));
}
.karte::before, .notiz-karte::before, .warte-karte::before { content: ''; position: absolute; inset: 6px; border: 1.5px dashed var(--ink, var(--kreuz-rot)); opacity: 0.6; pointer-events: none; }
.karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.karte-titel { font-family: var(--f-titel); font-weight: 750; font-size: 20px; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.karte-titel .an { font-family: var(--f-text); font-weight: 500; font-size: 15px; color: var(--tinte-2); }
.feld-stempel {
  flex: none; color: #fff; background: var(--ink-text, var(--mech-garn));
  font-family: var(--f-titel); font-weight: 700; font-size: 15px;
  padding: 2px 10px 3px; border-radius: 2px;
  outline: 1.5px dashed rgba(255, 255, 255, 0.55); outline-offset: -4px;
}
.karte-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tinte-2); margin-top: 4px; }
.karte-zeile b { color: var(--tinte); }
.karte-feld { margin-top: var(--s3); }
.feld-bez { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--tinte-2); margin-bottom: 2px; }
.vorgabe { font-size: 16px; color: var(--tinte-2); }
.hinweis-zeile { font-size: 13px; color: var(--kreuz-dunkel); margin-top: 4px; }

/* typing field: coloured mirror behind a transparent textarea, same font so the caret lines up */
.schreibfeld { position: relative; scroll-margin-top: 40svh; scroll-margin-bottom: 120px; }
.ergaenzung, .spiegel, .ergaenzung-text {
  margin: 0;
  font-family: var(--f-titel); font-weight: 600; font-size: 21px;
  line-height: 40px; letter-spacing: 0;
  padding: 6px 0 0;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
}
.schreibfeld .spiegel { position: absolute; inset: 0; color: var(--tinte); pointer-events: none; min-height: 86px; }
.schreibfeld textarea {
  position: relative; display: block; width: 100%; min-height: 86px;
  border: 0; background: transparent; resize: none; overflow: hidden;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ink-text, var(--tinte));
}
.schreibfeld textarea:focus { outline: none; }
.schreibfeld:focus-within { box-shadow: 0 2px 0 var(--ink-text, var(--tinte)); }
.schreibfeld textarea::placeholder { color: var(--tinte-3); -webkit-text-fill-color: var(--tinte-3); font-weight: 500; }
.schreibfeld textarea::selection { background: rgba(34, 68, 176, 0.25); -webkit-text-fill-color: transparent; }

/* word marks: colour = part of speech, badge = word number, small graphic = effect */
mark.m { background: transparent; color: inherit; position: relative; }
mark.m-haupt { color: var(--wa-haupt); }
mark.m-zeit { color: var(--wa-zeit); }
mark.m-eigen { color: var(--wa-eigen); }
.m-anfang { color: var(--wa-flug); text-shadow: 0 1px 0 #F6E3A0; }
.m-weg { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--tinte-3); }
.m-nicht, .m-vorbei { text-decoration: underline dotted var(--tinte-3); text-decoration-thickness: 2px; text-underline-offset: 6px; color: var(--wa-ohne); }
.m-verst { text-decoration: underline wavy var(--wa-eigen); text-underline-offset: 6px; }
.m-vorlaeufig { opacity: 0.6; }
.spiegel mark.m-schritt, .ergaenzung-text mark.m-schritt, .demo-text mark.m-schritt {
  background-repeat: repeat-x; background-position: 0 100%; background-size: 12px 6px;
}
.spiegel mark.m-haupt, .ergaenzung-text mark.m-haupt, .demo-text mark.m-haupt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M0 5.5 L6 1 L12 5.5' fill='none' stroke='%23B0105F' stroke-width='1.6'/%3E%3C/svg%3E"); }
.spiegel mark.m-zeit, .ergaenzung-text mark.m-zeit, .demo-text mark.m-zeit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M0 5 L3 1 L6 5 L9 1 L12 5' fill='none' stroke='%23066640' stroke-width='1.3'/%3E%3C/svg%3E"); }
.spiegel mark.m-flug::after, .ergaenzung-text mark.m-flug::after, .demo-text mark.m-flug::after {
  content: ''; position: absolute; left: -6px; top: -6px; width: 26px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cpath d='M5 1 L6 4 L9 5 L6 6 L5 9 L4 6 L1 5 L4 4 Z M20 5 L20.7 7.3 L23 8 L20.7 8.7 L20 11 L19.3 8.7 L17 8 L19.3 7.3 Z' fill='%23C9A23C' stroke='%236E5510' stroke-width='0.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.spiegel mark.m-links::after, .spiegel mark.m-rechts::after, .ergaenzung-text mark.m-links::after, .ergaenzung-text mark.m-rechts::after, .demo-text mark.m-links::after, .demo-text mark.m-rechts::after {
  content: ''; position: absolute; top: -9px; width: 18px; height: 11px; pointer-events: none; background-repeat: no-repeat; background-size: contain;
}
.spiegel mark.m-links::after, .ergaenzung-text mark.m-links::after, .demo-text mark.m-links::after { right: -4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M16 10 C16 4 11 2.5 3 2.5 M6.5 0.5 L2.5 2.5 L6.5 4.8' fill='none' stroke='%232244B0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.spiegel mark.m-rechts::after, .ergaenzung-text mark.m-rechts::after, .demo-text mark.m-rechts::after { right: -4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M2 10 C2 4 7 2.5 15 2.5 M11.5 0.5 L15.5 2.5 L11.5 4.8' fill='none' stroke='%232244B0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.spiegel mark[data-nr]::before, .ergaenzung-text mark[data-nr]::before {
  content: attr(data-nr); position: absolute; left: -8px; top: -7px;
  width: 15px; height: 15px; border-radius: 50%;
  font-family: var(--f-zahl); font-size: 10px; font-weight: 500; line-height: 15px; text-align: center;
  color: #fff; background: var(--wa-haupt); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.spiegel mark.m-zeit[data-nr]::before, .ergaenzung-text mark.m-zeit[data-nr]::before { background: var(--wa-zeit); }
.spiegel mark.m-eigen[data-nr]::before, .ergaenzung-text mark.m-eigen[data-nr]::before { background: var(--wa-eigen); }
.zug-satz mark.m-haupt, .g-satz mark.m-haupt { font-weight: 650; }

/* thread assortment: colour legend */
.farb-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: var(--s3); font-size: 12.5px; color: var(--tinte-2); }
.fl { display: inline-flex; align-items: center; gap: 6px; }
.fl::before {
  content: ''; width: 22px; height: 11px; flex: none; border-radius: 6px;
  background: repeating-linear-gradient(100deg, var(--c1) 0 2px, var(--c2) 2px 3px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.fl-haupt { --c1: #E0288C; --c2: #8E0B4C; }
.fl-zeit { --c1: #10A064; --c2: #055233; }
.fl-eigen { --c1: #3F66DA; --c2: #1C3790; }
.fl-flug { --c1: #E7CF84; --c2: #8C6A18; }
.fl-grau { --c1: #BDB5A5; --c2: #8C8475; }

/* effect of each word, numbered like the pins on the board */
.marken { display: flex; flex-wrap: wrap; gap: 6px; }
.marke {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 1.25;
  background: var(--leinen-weiss);
  border-left: 3px solid var(--tinte-3);
  padding: 4px 9px 4px 6px;
  border-radius: 1px;
  box-shadow: 0 1px 0 var(--leinen-schatten);
}
.marke > span:last-child { display: inline-flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; }
.marke b { font-weight: 700; }
.marke-nr { width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; color: #fff; background: var(--wa-haupt); flex: none; }
.marke-haupt { border-left-color: var(--wa-haupt); } .marke-haupt b { color: var(--wa-haupt); }
.marke-zeit { border-left-color: var(--wa-zeit); } .marke-zeit b { color: var(--wa-zeit); } .marke-zeit .marke-nr { background: var(--wa-zeit); }
.marke-eigen { border-left-color: var(--wa-eigen); } .marke-eigen b { color: var(--wa-eigen); } .marke-eigen .marke-nr { background: var(--wa-eigen); }
.marke-flug { box-shadow: 0 1px 0 var(--leinen-schatten), inset 0 0 0 1px rgba(156, 116, 20, 0.5); }
.marke.leer { background: transparent; box-shadow: none; border-left-style: dotted; color: var(--tinte-2); }
.marke.minus { border-left-color: var(--rot); } .marke.minus b { color: var(--rot); }
.marke.vorlaeufig { opacity: 0.65; }
.marken.klein .marke { font-size: 12px; padding: 2px 7px 2px 5px; }
.marken.klein .glyph { height: 11px; }
.satz-lenkt { font-size: 13.5px; color: var(--wa-eigen); margin-top: var(--s2); }
.frei { font-size: 12.5px; color: var(--tinte-2); margin-top: var(--s2); }
.karte-urteil { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s3); margin-top: var(--s3); font-size: 14px; }
.karte-urteil:empty { display: none; }
.karte-urteil .mono { font-family: var(--f-text); }
.karte-urteil .jev { font-weight: 700; }
.karte-urteil .wert { font-family: var(--f-zahl); font-weight: 500; display: inline; }
.punkte { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.punkte svg { width: 22px; height: 16px; }
.punkte svg path { fill: none; stroke: var(--wa-zeit); stroke-width: 2.4; stroke-linecap: round; }
.status-vorlaeufig { font-size: 13px; color: var(--tinte-2); font-style: italic; }
.karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed rgba(43, 38, 34, 0.25); }
.karte-fuss .hilfe { font-size: 12.5px; }
.karte-fuss .knopf { white-space: nowrap; flex: none; }
.karte .hilfe { color: var(--tinte-2); font-size: 12.5px; margin-top: var(--s2); }
.warten { display: flex; align-items: center; gap: var(--s2); font-size: 14px; color: var(--tinte-2); }
.warten svg { width: 48px; height: 14px; flex: none; }
.warten path { fill: none; stroke: var(--ink, var(--kreuz-rot)); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 3; animation: heften 1.2s linear infinite; }
@keyframes heften { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .warten path { animation: none; } }
.warten.gross { font-size: 16px; margin: var(--s4) 0; }
.tippt { color: var(--tinte-3); font-style: italic; font-weight: 400; font-size: 17px; }
.zuschauer .ergaenzung-text { min-height: 46px; }
.notiz-titel { font-family: var(--f-titel); font-weight: 750; font-size: 18px; margin-bottom: var(--s2); }
.notiz-karte p + p { margin-top: var(--s2); }
.warte-karte p + p { margin-top: var(--s2); }
.messwerte { font-family: var(--f-zahl); font-size: 12px; color: var(--auf-tisch-leise); }

/* field choice */
.wahl-karte-kopf { font-family: var(--f-titel); font-weight: 750; font-size: 21px; }
.wahl-text { font-size: 14.5px; margin-top: 4px; color: var(--tinte-2); }
.feldwahl { display: grid; gap: var(--s2); margin-top: var(--s3); }
.feldkarte {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); width: 100%; text-align: left;
  font: inherit; color: var(--tinte); cursor: pointer;
  background: var(--leinen-weiss); border: 0; border-radius: 2px;
  padding: 10px 14px;
  box-shadow: inset 0 0 0 2px rgba(156, 116, 20, 0.55), 0 2px 0 var(--leinen-schatten);
}
.feldkarte:hover, .feldkarte.ist-fokus, .feldkarte:focus-visible { box-shadow: inset 0 0 0 3px #9C7414, 0 3px 0 var(--leinen-schatten); background: #FFF8E2; }
.fk-name { font-family: var(--f-titel); font-weight: 750; font-size: 17px; }
.fk-nr { font-family: var(--f-zahl); font-size: 12px; color: var(--tinte-2); align-self: center; }
.fk-satz { grid-column: 1 / -1; font-size: 14.5px; }
.fk-wirkung { grid-column: 1 / -1; font-size: 12.5px; color: var(--kreuz-dunkel); }

/* ---- protocol: the whole conversation as a ribbon of labels -------------------------------------------- */
.protokoll .leer { color: var(--auf-tisch-leise); font-size: 14px; }
.zuege { display: grid; gap: var(--s2); }
.zug { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--s3); background: var(--leinen-hell); background-image: var(--webung); color: var(--tinte); padding: 8px 14px 10px 10px; border-left: 4px solid var(--ink); box-shadow: 0 2px 0 var(--leinen-schatten); }
.zug-rand { display: grid; align-content: start; gap: 2px; font-size: 12px; color: var(--tinte-2); }
.zug-nr { font-size: 14px; color: var(--tinte); }
.zug-kopf { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.zug-kopf b { font-family: var(--f-titel); font-size: 15px; color: var(--ink-text); }
.zug-feld { color: var(--tinte-2); }
.zug-satz { font-size: 14.5px; margin: 2px 0 6px; }
.zug-satz .mono { font-family: var(--f-text); font-weight: 500; }
.randbemerkung { font-size: 12.5px; color: var(--kreuz-dunkel); font-style: italic; margin-top: 4px; }

/* ---- the rules as a pattern sheet on squared paper --------------------------------------------------------- */
.musterbogen summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--tisch-linie); }
.musterbogen summary::-webkit-details-marker { display: none; }
.muster-titel { font-family: var(--f-titel); font-weight: 750; font-size: 24px; }
.muster-sub { font-size: 13.5px; color: var(--auf-tisch-leise); }
.musterbogen summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--auf-tisch-leise); border-bottom: 2px solid var(--auf-tisch-leise); transform: rotate(45deg); align-self: center; }
.musterbogen[open] summary::after { transform: rotate(-135deg); }
.muster-inhalt, aside.merkblatt {
  margin-top: var(--s3);
  background-color: var(--papier);
  background-image: linear-gradient(rgba(79, 121, 188, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 121, 188, 0.18) 1px, transparent 1px);
  background-size: 8px 8px;
  color: var(--tinte);
  padding: var(--s5);
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.muster-inhalt .abschnitt { display: none; }
aside.merkblatt .abschnitt { font-size: 22px; }
.regeln { display: grid; gap: var(--s3); }
.regel dt { display: flex; align-items: center; gap: var(--s3); font-family: var(--f-titel); font-weight: 750; font-size: 16px; }
.regel-bild { width: 44px; display: inline-flex; justify-content: center; flex: none; }
.regel-bild .glyph { height: 16px; }
.regel dd { font-size: 14px; line-height: 1.45; padding-left: calc(44px + var(--s3)); color: var(--tinte-2); }
.regel dd b { color: var(--tinte); }
.merkblatt-schluss { margin-top: var(--s4); font-size: 13.5px; font-style: italic; color: var(--tinte-2); }

@media (max-width: 760px) {
  .karte, .notiz-karte, .warte-karte { padding: var(--s3) var(--s4); }
  .karte-titel { font-size: 18px; }
  .ergaenzung, .spiegel, .ergaenzung-text { font-size: 19px; line-height: 38px; }
  .farb-legende { gap: 3px 10px; }
  .karte-fuss { flex-wrap: wrap; }
  .karte-fuss .hilfe { display: none; }
  .karte-fuss .knopf { width: 100%; }
  .gespraech { background: rgba(0, 0, 0, 0.16); padding: 6px var(--s3); border-radius: 2px; }
  .gespraech-titel { font-size: 15px; }
  .lenkung-leiste {
    display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left;
    background: rgba(0, 0, 0, 0.16); border: 0; border-radius: 2px; padding: 8px var(--s3); cursor: pointer; color: var(--auf-tisch);
  }
  .ll-name { font-family: var(--f-titel); font-weight: 750; font-size: 15px; color: var(--wa-eigen-hell); }
  .ll-pole { font-size: 12.5px; color: var(--auf-tisch-leise); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ll-auf { font-family: var(--f-zahl); font-size: 18px; }
  .verordnung-stapel { display: none; }
  .verordnung-stapel.ist-offen { display: block; margin-top: calc(-1 * var(--s2)); }
  .zug { grid-template-columns: 42px minmax(0, 1fr); padding: 8px 10px; }
  .regel dd { padding-left: 0; }
  .muster-inhalt, aside.merkblatt { padding: var(--s4); }
}