/* Karl-Abschnitt. Fensterregeln aus Stunden-App/App/css/app.css (KI-Assistent, Stand v0.596), unter .karl-buehne
   gekapselt; position:fixed wird zu absolute, damit das Fenster in der Bühne bleibt. Farben nur aus App-Tokens. */
.karl-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:90px;align-items:center;border-top:1px solid var(--line)}
.karl-copy>p{margin-top:22px;max-width:470px}
.karl-copy .status{margin-top:25px}
.karl-copy .import-benefits{max-width:470px}
.karl-copy .small-note{font-size:14px;margin-top:12px;color:var(--muted)}
.karl-visual{min-width:0}
.karl-visual>.example-note{margin-top:18px}
.karl-steuer{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:14px}
.karl-steuer .text-button{color:var(--muted);font-size:14px}

.karl-buehne{--knopf-lg:54px;--abstand-5:1.5rem;--zeile-ui:1.3;--zeile-text:1.5;--wb-r-klein:var(--radius-klein);--wb-schatten-knopf:0 1px 2px rgba(20,24,28,.06);--akzent-hell:#1f6f541f;--dezent:#5f6566;--glas-rand:rgba(23,32,28,.14);--schatten:none;position:relative;height:720px;overflow:hidden;border:1px solid var(--glas-rand);border-radius:16px;box-shadow:0 22px 44px var(--shadow-deep);container-type:inline-size}
.karl-hintergrund{display:grid;gap:var(--abstand-3);max-width:calc(100% - 380px)}
.karl-hintergrund .karte{padding:1rem}
.karl-buehne .knopf-neutral{background:var(--wb-knopf-bg);color:var(--tinte);border:1px solid var(--wb-knopf-linie);border-radius:var(--wb-r-klein);padding:.7rem 1.2rem;font-size:var(--schrift-md);font-family:inherit;font-weight:400;cursor:pointer;box-shadow:var(--wb-schatten-knopf)}
.karl-buehne .knopf-primaer{border:0;padding:.7rem 1.2rem;font-size:var(--schrift-md);font-family:inherit;font-weight:600;border-radius:var(--radius);cursor:pointer}
.karl-buehne p{color:inherit}
.karl-buehne textarea{font:inherit;font-size:var(--schrift-md);letter-spacing:normal;border-radius:var(--radius)}
[data-theme="dark"] .karl-buehne{--schatten:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);--dezent:#929ba1;--glas-rand:rgba(255,255,255,.14);--akzent-lesbar:color-mix(in srgb,var(--akzent) 45%,var(--tinte));--wb-schatten-knopf:0 1px 2px rgba(0,0,0,.3)}
.karl-buehne select{width:100%;padding:.55rem .7rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--wb-feld);text-overflow:ellipsis}


.karl-buehne .einst-schalter {
  -webkit-appearance: none; appearance: none;
  width: 2.7rem; height: 1.55rem; border-radius: var(--radius-rund); margin: 0; cursor: pointer; position: relative;
  border: 1px solid var(--glas-rand);
  background: linear-gradient(160deg, var(--glas-fuell-2), var(--glas-fuell-1));
  box-shadow: inset 0 1px 0 var(--glas-kante), inset 0 0 0 1px color-mix(in srgb, var(--tinte) 8%, transparent);
  transition: box-shadow .2s, background .2s;
}
.karl-buehne .einst-schalter::before {
  content: ""; position: absolute; top: 50%; left: .2rem; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; border-radius: 50%;
  background: var(--dezent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left .2s cubic-bezier(.4, 1.4, .6, 1), background .2s, box-shadow .2s;
}
.karl-buehne .einst-schalter:checked {
  background: color-mix(in srgb, var(--akzent) 22%, transparent);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent), 0 0 14px -2px color-mix(in srgb, var(--akzent) 60%, transparent);
}
.karl-buehne .einst-schalter:checked::before {
  left: calc(100% - 1.3rem);
  background: var(--akzent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--akzent) 80%, transparent), 0 1px 3px rgba(0, 0, 0, .3);
}
.karl-buehne .einst-schalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.karl-buehne .einst-schalter:disabled { opacity: .5; cursor: default; }

.karl-buehne .ki-start { flex: none; margin: auto 0; padding: var(--abstand-2) 0; display: grid; justify-items: center; gap: var(--abstand-2); text-align: center; }
.karl-buehne .ki-start-titel { margin: 0; font-size: var(--schrift-xl); line-height: var(--zeile-ui); text-wrap: balance; }
.karl-buehne .ki-start-hinweis { max-width: 34ch; margin: 0; color: var(--dezent); font-size: var(--schrift-sm); }
.karl-buehne .ki-start-vorschlaege { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-2); margin-top: var(--abstand-4); }
.karl-buehne .ki-start-knopf { display: flex; gap: var(--abstand-2); align-items: center; min-width: 0; max-width: 100%; padding: .5rem .95rem;
  border-radius: var(--radius-rund); background: var(--glas); font-size: var(--schrift-sm); text-align: left; }
.karl-buehne .ki-start-knopf .sym { flex: none; color: var(--akzent-lesbar); }
.karl-buehne .ki-start-knopf:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }

.karl-buehne .ki-oeffnen { position: absolute; right: max(var(--abstand-4), env(safe-area-inset-right)); bottom: var(--abstand-4); z-index: 3;
  width: var(--knopf-lg); height: var(--knopf-lg); padding: 0; border-radius: var(--radius-rund); border: 1px solid var(--glas-rand);
  background: var(--akzent); color: var(--akzent-text); box-shadow: var(--schatten); font: inherit; font-weight: 700; cursor: pointer; }
.karl-buehne .ki-fenster { position: absolute; top: 61px; right: 0; bottom: 0; z-index: 3; width: 380px; max-width: 100%;
  display: flex; flex-direction: column; background: linear-gradient(var(--karte), var(--karte)), var(--flaeche); color: var(--tinte); border-left: 1px solid var(--glas-rand); box-shadow: var(--schatten); }
.karl-buehne .ki-assistent[hidden], .karl-buehne .ki-assistent [hidden] { display: none; }
.karl-buehne .ki-kopf { flex: none; display: flex; align-items: center; gap: var(--abstand-3); padding: var(--abstand-3) var(--abstand-2) var(--abstand-3) var(--abstand-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 16%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--akzent) 28%, var(--linie)); }
.karl-buehne .ki-kopf-text { flex: 1; min-width: 0; }
.karl-buehne .ki-kopf h2 { font-size: var(--schrift-lg); margin: 0; }
.karl-buehne .ki-status { margin: 0; color: var(--tinte); font-size: var(--schrift-xs); }
.karl-buehne .ki-zeichen { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius);
  background: var(--akzent); color: var(--akzent-text); font-size: var(--schrift-md); font-weight: 700; line-height: 1; }
.karl-buehne .ki-kopf > .ki-zeichen { box-shadow: 0 0 0 3px var(--akzent-hell); }
.karl-buehne .ki-start > .ki-zeichen { width: 3.5rem; height: 3.5rem; margin-bottom: var(--abstand-2); border-radius: var(--radius-gross); font-size: var(--schrift-xl);
  box-shadow: 0 0 0 6px var(--akzent-hell), 0 12px 28px -10px var(--akzent); }
.karl-buehne .ki-symbolknopf { flex: none; display: grid; place-items: center; width: var(--knopf-md); height: var(--knopf-md); min-height: var(--knopf-md); padding: 0; }
.karl-buehne .ki-symbolknopf .sym { width: 1.25rem; height: 1.25rem; }
.karl-buehne .ki-schliessen, .karl-buehne .ki-mikro { border-color: transparent; background: transparent; box-shadow: none; color: var(--dezent); }
.karl-buehne .ki-schliessen:hover, .karl-buehne .ki-mikro:hover { background: var(--eingabe); color: var(--tinte); }
.karl-buehne .ki-schliessen { flex: none; min-width: var(--knopf-md); min-height: var(--knopf-md); }
.karl-buehne .ki-verlauf { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--abstand-5); padding: var(--abstand-4); }
.karl-buehne .ki-blase { flex: none; max-width: 100%; min-width: 0; padding: var(--abstand-3); border-radius: var(--radius-gross); overflow-wrap: anywhere; }
.karl-buehne .ki-nutzer { align-self: flex-end; max-width: 85%; background: var(--akzent); color: var(--akzent-text);
  border-radius: var(--radius-gross) var(--radius-gross) var(--radius-klein) var(--radius-gross); }
.karl-buehne .ki-ki { position: relative; align-self: flex-start; margin-left: 2.5rem; width: calc(100% - 2.5rem); border: 1px solid var(--linie);
  border-radius: var(--radius-klein) var(--radius-gross) var(--radius-gross) var(--radius-gross); background: var(--glas); }
.karl-buehne .ki-ki > .ki-zeichen { position: absolute; left: -2.5rem; top: 0; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-klein); font-size: var(--schrift-xs); }
.karl-buehne .ki-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.karl-buehne .ki-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-3); }
.karl-buehne .ki-aktionen button { min-height: var(--knopf-md); font-size: var(--schrift-sm); }
.karl-buehne .ki-quelle, .karl-buehne .ki-rueckmeldung { margin: var(--abstand-2) 0 0; }
.karl-buehne .ki-quelle a { color: var(--tinte); text-decoration: underline; }
.karl-buehne .ki-rueckmeldung:empty { display: none; }
.karl-buehne .ki-form { flex: none; display: grid; gap: var(--abstand-2); padding: var(--abstand-3) var(--abstand-4); border-top: 1px solid var(--linie); }
.karl-buehne .ki-form p { margin: 0; }
.karl-buehne .ki-ansicht { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--abstand-3); margin: 0;
  padding: var(--abstand-1) 0; color: var(--tinte); font-size: var(--schrift-sm); font-weight: 500; cursor: pointer; }
.karl-buehne .ki-ansicht small { display: block; color: var(--dezent); font-size: var(--schrift-xs); font-weight: 400; }
.karl-buehne .ki-ansicht input { flex: none; }
.karl-buehne .ki-leiste { display: flex; align-items: flex-end; gap: var(--abstand-1); padding: var(--abstand-1); border: 1px solid var(--glas-rand);
  border-radius: var(--radius-gross); background: var(--eingabe); }
.karl-buehne .ki-leiste:focus-within { border-color: var(--akzent-lesbar); box-shadow: 0 0 0 3px var(--akzent-hell); }
.karl-buehne .ki-eingabe-label { flex: 1; min-width: 0; margin: 0; }
.karl-buehne .ki-eingabe, .karl-buehne .ki-eingabe:focus { width: 100%; min-width: 0; min-height: var(--knopf-md); max-height: 25dvh; resize: vertical; margin: 0; padding: .6rem .5rem;
  border: 0; background: transparent; box-shadow: none; color: var(--tinte); line-height: var(--zeile-text); caret-color: var(--akzent-lesbar); }
.karl-buehne .ki-eingabe::placeholder { color: var(--dezent); opacity: 1; }
.karl-buehne .ki-senden { background: var(--akzent); color: var(--akzent-text); }
.karl-buehne .ki-senden .sym { transform: rotate(180deg); }
.karl-buehne .ki-senden:hover:not(:disabled) { background: var(--akzent); filter: brightness(.95); }
.karl-buehne .ki-senden:disabled { opacity: 1; background: var(--eingabe); color: var(--tinte); border-color: var(--linie); box-shadow: none; cursor: default; }
.karl-buehne .ki-mikro[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent-lesbar); }
.karl-buehne .ki-fuss { text-align: center; color: var(--dezent); font-size: var(--schrift-xs); }
.karl-buehne .ki-assistent :focus-visible { outline: 2px solid var(--akzent-lesbar); outline-offset: 2px; }
.karl-buehne .ki-vorschlag { margin-top: var(--abstand-2); padding: var(--abstand-3); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--akzent-hell); color: var(--tinte); }
.karl-buehne .ki-vorschlag-titel { margin: 0 0 var(--abstand-2); font-weight: 600; }
.karl-buehne .ki-vorschlag dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--abstand-1) var(--abstand-3); margin: 0; font-size: var(--schrift-sm); }
.karl-buehne .ki-vorschlag dt { color: var(--tinte); }
.karl-buehne .ki-vorschlag dd { margin: 0; overflow-wrap: anywhere; }
.karl-buehne .ki-vorschlag select { width: 100%; }
.karl-buehne .ki-vorschlag-wer { display: grid; gap: var(--abstand-1); }
.karl-buehne .ki-schirm { display: none; position: absolute; inset: 0; z-index: 2; background: color-mix(in srgb, var(--tinte) 45%, transparent); }

.karl-buehne .ki-sprung{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-3);width:100%;margin-top:var(--abstand-2);text-align:left;background:var(--karte);border:1px solid var(--linie)}
.karl-buehne .ki-sprung small{display:block;margin-top:var(--abstand-1)}
.karl-buehne .ki-pfeil{flex:none;width:.5rem;height:.5rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.karl-buehne .ki-tabelle{max-width:100%;overflow-x:auto;margin-top:var(--abstand-2)}
.karl-buehne .ki-tabelle table{width:100%;border-collapse:collapse;font-size:var(--schrift-sm)}
.karl-buehne .ki-tabelle th,.karl-buehne .ki-tabelle td{padding:var(--abstand-2);border-bottom:1px solid var(--linie);text-align:left;white-space:nowrap}
.karl-buehne .ki-tabelle .ki-zahl{text-align:right;font-variant-numeric:tabular-nums}
.karl-buehne .ki-tabelle tfoot{font-weight:700}
.karl-buehne .ki-daumen{display:flex;gap:var(--abstand-1);margin-left:auto}
.karl-buehne .ki-bewerten[aria-pressed="true"]{color:var(--akzent-lesbar);border-color:var(--akzent)}
.karl-buehne .ki-daumen-symbol{display:block;width:1.1rem;height:1.1rem;background:currentColor;clip-path:polygon(0 43%,18% 43%,18% 100%,0 100%,0 43%,25% 43%,46% 18%,49% 0,64% 0,70% 16%,63% 39%,96% 39%,100% 52%,87% 100%,25% 100%)}
.karl-buehne .ki-daumen-runter{transform:rotate(180deg)}
.karl-buehne .ki-feld-hinweis{margin:var(--abstand-1) 0 0;padding:var(--abstand-1) var(--abstand-2);border-radius:var(--radius);color:var(--warn-text);background:var(--warn-flaeche)}

/* Lokale Bühne statt Viewport; gleiche Handy-Anordnung und 82 % Höhe wie in der App. */
@media(max-width:899px){
  .karl-hintergrund{max-width:none}
  .karl-buehne .ki-fenster{top:auto;left:0;width:100%;height:82%;max-height:calc(100% - 61px);border:1px solid var(--glas-rand);border-radius:var(--radius-gross) var(--radius-gross) 0 0}
  .karl-buehne .ki-fenster:not([hidden])~.ki-schirm{display:block}
  .karl-buehne .ki-verlauf,.karl-buehne .ki-form,.karl-buehne .ki-kopf{padding:var(--abstand-3)}
  .karl-buehne .ki-kopf{border-radius:var(--radius-gross) var(--radius-gross) 0 0}
  .karl-buehne .ki-mikro{display:none}
  .karl-buehne .ki-oeffnen{bottom:5.5rem}
}
@media(min-width:900px){.karl-buehne .ki-schirm{display:none}}
@media(max-width:1180px){.karl-section{gap:45px}}
@media(max-width:900px){.karl-section{grid-template-columns:minmax(0,1fr);gap:30px}.karl-copy>p,.karl-copy .import-benefits{max-width:650px}.karl-visual{max-width:560px;margin-inline:auto;width:100%}}
@media(max-width:560px){.karl-copy>p{font-size:15px}.karl-buehne{height:680px}}
@media(prefers-reduced-motion:reduce){.karl-buehne .ki-assistent,.karl-buehne .ki-assistent *{animation:none;transition:none;scroll-behavior:auto}}
@media print{.karl-visual{display:none!important}.karl-section{display:block;padding:16px 0}}