/*
 * AIO 0.2 — nach Entwurf v2 (docs/entwurf-aio-assistent.html).
 * Kapaso-Werte aus AIO-HUB/HUB Code/smil-frontend/src/styles.scss: --akzent (oklch 0.78 0.13 215), Schriften, Größen, Radien.
 * Thema „Nachtwache“ (dunkel, Vorgabe) und „Tag“ (hell): folgt dem System, umschaltbar ([data-thema] am <html>).
 * Zustandsfarben (dataviz-Skill): gut #0ca30c, Warnung #fab219, kritisch #d03b3b — nie ohne Symbol und Wort.
 */
:root {
  color-scheme: dark;
  --seite: #08101c; --flaeche: #0e1726; --flaeche-2: #132036; --linie: #1d2b42; --linie-2: #2a3b57;
  --tinte: #e8edf5; --tinte-2: #a9b4c6; --tinte-3: #8a97ad;
  --akzent: oklch(0.78 0.13 215); --akzent-hauch: oklch(0.78 0.13 215 / 0.14); --auf-akzent: #04131b;
  --denken: #9085e9;
  --gut: #0ca30c; --warn: #fab219; --krit: #d03b3b; --krit-tinte: #f07a7a;
  --gitter: #1a273b; --achse: #2c3d58;
  --schatten: 0 18px 50px rgb(0 0 0 / 0.45);
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 19px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-thema="dunkel"]) {
    color-scheme: light;
    --seite: #eef2f7; --flaeche: #ffffff; --flaeche-2: #f3f6fa; --linie: #dbe2ec; --linie-2: #c6d0de;
    --tinte: #121a26; --tinte-2: #44516a; --tinte-3: #5d6a80;
    --akzent: oklch(0.55 0.11 215); --akzent-hauch: oklch(0.55 0.11 215 / 0.10); --auf-akzent: #ffffff;
    --denken: #6250d6; --krit-tinte: #a8262a; --gitter: #e6ebf2; --achse: #c3cddb;
    --schatten: 0 14px 40px rgb(20 30 50 / 0.12);
  }
}
:root[data-thema="hell"] {
  color-scheme: light;
  --seite: #eef2f7; --flaeche: #ffffff; --flaeche-2: #f3f6fa; --linie: #dbe2ec; --linie-2: #c6d0de;
  --tinte: #121a26; --tinte-2: #44516a; --tinte-3: #5d6a80;
  --akzent: oklch(0.55 0.11 215); --akzent-hauch: oklch(0.55 0.11 215 / 0.10); --auf-akzent: #ffffff;
  --denken: #6250d6; --krit-tinte: #a8262a; --gitter: #e6ebf2; --achse: #c3cddb;
  --schatten: 0 14px 40px rgb(20 30 50 / 0.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--seite); color: var(--tinte); font: var(--fs-base)/1.5 var(--font-sans); }
[hidden] { display: none !important; }
.defs { position: absolute; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.leise { color: var(--tinte-3); font-size: var(--fs-sm); }
code { font-family: var(--font-mono); font-size: 12px; }

.knopf { height: 34px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--linie-2); background: var(--flaeche-2);
  color: var(--tinte); font: 500 var(--fs-sm) var(--font-sans); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.knopf:hover { border-color: var(--akzent); }
.knopf.voll { background: var(--akzent); color: var(--auf-akzent); border-color: transparent; font-weight: 600; }
.verweis { background: none; border: 0; padding: 0; color: var(--tinte-2); font: inherit; text-decoration: underline; cursor: pointer; }
.rund { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linie-2);
  background: var(--flaeche-2); color: var(--tinte); cursor: pointer; flex: none; padding: 0; }
.rund svg { width: 18px; height: 18px; }
.rund.senden { background: var(--akzent); color: var(--auf-akzent); border-color: transparent; }
.rund:disabled { opacity: .5; cursor: not-allowed; }

/* ══ Kern ══ */
.kern { width: 132px; height: 132px; position: relative; display: grid; place-items: center; }
.kern > svg { width: 100%; height: 100%; overflow: visible; }
.kern .glut { fill: url(#glut); transform-origin: 60px 60px; }
.kern .skala, .kern .bogen { transform-origin: 60px 60px; }
.kern .bogen { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linecap: round; }
.kern .zacke { stroke: var(--akzent); stroke-width: 1.2; opacity: .55; }
.kern .zustand { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--tinte-2); white-space: nowrap; }
.kern .pegel { opacity: 0; }
.kern .pegel rect { transform-box: fill-box; transform-origin: center; fill: var(--akzent); }
.kern[data-zustand="ruht"] .glut { animation: atmen 6s ease-in-out infinite; }
.kern[data-zustand="hoert"] .zacke { opacity: .9; }
.kern[data-zustand="hoert"] .pegel { opacity: 1; }
.kern[data-zustand="hoert"] .pegel rect { animation: pegel .8s ease-in-out infinite; }
.kern[data-zustand="hoert"] .pegel rect:nth-child(2) { animation-delay: .15s }
.kern[data-zustand="hoert"] .pegel rect:nth-child(3) { animation-delay: .3s }
.kern[data-zustand="hoert"] .pegel rect:nth-child(4) { animation-delay: .1s }
.kern[data-zustand="denkt"] .bogen { stroke: var(--denken); animation: drehen 2.4s linear infinite; }
.kern[data-zustand="denkt"] .zacke { stroke: var(--denken); }
.kern[data-zustand="denkt"] .glut { fill: url(#glut-denken); }
.kern[data-zustand="spricht"] .glut { animation: sprechen .42s ease-in-out infinite alternate; }
.kern[data-zustand="spricht"] .bogen { animation: drehen 9s linear infinite; }
@keyframes atmen { 0%,100% { transform: scale(.94); opacity: .85 } 50% { transform: scale(1); opacity: 1 } }
@keyframes drehen { to { transform: rotate(360deg) } }
@keyframes sprechen { from { transform: scale(.9) } to { transform: scale(1.06) } }
@keyframes pegel { 0%,100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }
@media (prefers-reduced-motion: reduce) { .kern, .kern * { animation: none !important; } }

/* ══ Einstieg ══ */
.einstieg { min-height: 100%; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(600px 300px at 50% 30%, var(--akzent-hauch), transparent 70%), var(--seite); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-lg); padding: 14px 16px 12px; min-width: 0; }
.einstieg-karte { width: min(380px, 100%); padding: 26px; }
.einstieg-karte .kern { width: 92px; height: 92px; margin: 0 auto 18px; }
.einstieg h1 { margin: 0 0 4px; font-size: var(--fs-lg); font-weight: 600; text-align: center; }
.einstieg h2 { margin: 12px 0 4px; font-size: var(--fs-base); }
.einstieg .leise { text-align: center; margin: 0 0 16px; }
.formular { display: grid; gap: 12px; }
.formular label { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--tinte-2); }
.formular input { height: 38px; border-radius: var(--r-md); border: 1px solid var(--linie-2); background: var(--flaeche-2); color: var(--tinte);
  font: var(--fs-base) var(--font-sans); padding: 0 10px; }
.formular input:focus { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hauch); outline: none; }
.formular .knopf.voll { height: 40px; margin-top: 4px; }
.code { display: flex; gap: 8px; justify-content: center; }
.code input { width: 44px; height: 52px; padding: 0; text-align: center; font: 300 24px var(--font-sans); }
.qr { display: grid; place-items: center; background: #fff; border-radius: var(--r-md); padding: 8px; }
.qr svg { width: 200px; height: 200px; }
.geheimnis { font-size: var(--fs-xs); color: var(--tinte-3); word-break: break-all; margin: 0; }
.codes { columns: 2; font-family: var(--font-mono); font-size: 13px; padding-left: 22px; }
.fehler { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--krit-tinte); }

/* ══ Anwendung ══ */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr) 312px; height: 100vh; height: 100dvh; }
.leiste { grid-column: 1; grid-row: 1; background: var(--flaeche); border-right: 1px solid var(--linie); display: flex; flex-direction: column; min-height: 0; }
.leiste .name { padding: 18px 18px 12px; font-weight: 650; font-size: 17px; letter-spacing: 0.02em; display: flex; gap: 10px; align-items: center; }
.leiste .name .rund { margin-left: auto; width: 34px; height: 34px; }
.marke { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #e9fbff, #5fd0ec 40%, transparent 72%); box-shadow: 0 0 0 3px var(--linie-2); }
.leiste .neu { margin: 0 14px 10px; }
.liste { flex: 1; overflow: auto; padding: 4px 8px; }
.liste h3 { font-size: var(--fs-xs); font-weight: 600; color: var(--tinte-3); margin: 14px 10px 4px; }
.eintrag { display: flex; width: 100%; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: var(--r-md); color: var(--tinte-2);
  font: var(--fs-sm) var(--font-sans); text-align: left; background: none; border: 0; cursor: pointer; }
.eintrag .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eintrag[aria-current="true"] { background: var(--flaeche-2); color: var(--tinte); }
.eintrag:hover { color: var(--tinte); }
.ort { flex: none; font: 600 10px var(--font-sans); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--linie-2); color: var(--tinte-2); }
.ort.eu { border-color: color-mix(in oklab, var(--gut) 55%, transparent); }
.leiste .fuss { border-top: 1px solid var(--linie); padding: 12px 16px; font-size: var(--fs-xs); color: var(--tinte-3); display: grid; gap: 8px; }
.leiste .fuss .z { display: flex; justify-content: space-between; gap: 8px; }
.leiste .fuss b { font-weight: 500; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.schleier { display: none; }

.mitte { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: radial-gradient(1200px 380px at 50% -120px, var(--akzent-hauch), transparent 70%), var(--seite); }
.kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 24px 26px; }
.titel-zeile { display: flex; gap: 10px; align-items: center; min-width: 0; }
.titel { font-size: var(--fs-sm); color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf .rechts { justify-self: end; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.modell { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); padding: 4px 10px 4px 8px;
  border: 1px solid var(--linie-2); border-radius: 999px; background: var(--flaeche); white-space: nowrap; }
.modell i { width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-3); }
.modell.eu i { background: var(--gut); } .modell.us i { background: var(--akzent); }
.weiche { display: inline-flex; border: 1px solid var(--linie-2); border-radius: var(--r-md); overflow: hidden; }
.weiche button { height: 30px; border: 0; padding: 0 10px; background: var(--flaeche); color: var(--tinte-2); font-size: 12px; cursor: pointer; }
.weiche button[aria-pressed="true"] { background: var(--akzent-hauch); color: var(--tinte); }
.weiche button:disabled { color: var(--tinte-3); opacity: .6; cursor: not-allowed; }

.verlauf { flex: 1; overflow: auto; padding: 22px 28px 12px; display: flex; flex-direction: column; gap: 22px; }
.leer { margin: auto; text-align: center; color: var(--tinte-2); }
.vorschlaege { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.frage { align-self: flex-end; max-width: 70%; background: var(--flaeche-2); border: 1px solid var(--linie); padding: 10px 14px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.frage small { display: block; color: var(--tinte-3); font-size: var(--fs-xs); margin-top: 2px; text-align: right; }
.antwort { max-width: 860px; }
.antwort .wer { font-size: var(--fs-xs); color: var(--tinte-3); margin-bottom: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.antwort p { margin: 0 0 12px; max-width: 72ch; overflow-wrap: anywhere; }
.antwort.fehlt p { color: var(--tinte-2); }

/* Karten */
.karten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.karte h4 { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.karte .kk { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.karte .unter { font-size: var(--fs-xs); color: var(--tinte-3); margin: 1px 0 10px; }
.art-ring .quelle { flex-direction: column; gap: 2px; }
.karte .quelle { margin-top: 10px; display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--tinte-3); }
.b4 { grid-column: span 4; } .b5 { grid-column: span 5; } .b7 { grid-column: span 7; } .b8 { grid-column: span 8; } .b12 { grid-column: span 12; }
.umschalten { font-size: var(--fs-xs); color: var(--tinte-2); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.zeichen { width: 14px; height: 14px; flex: none; }
.status { display: inline-flex; align-items: center; gap: 6px; }
.status.leer { color: var(--tinte-3); }

.art-ring { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.art-ring > svg { width: 112px; height: 112px; }
.art-ring .spur { fill: none; stroke: var(--gitter); stroke-width: 9; }
.art-ring .wert { fill: none; stroke: var(--gut); stroke-width: 9; stroke-linecap: round; }
.art-ring .wert.warn { stroke: var(--warn); } .art-ring .wert.krit { stroke: var(--krit); }
.art-ring .zahl { font: 300 34px var(--font-sans); fill: var(--tinte); }
.art-ring .von { font: 400 12px var(--font-sans); fill: var(--tinte-3); }
.art-ring dl { margin: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.art-ring dl div { display: flex; align-items: center; gap: 8px; }
.art-ring dt { color: var(--tinte-2); } .art-ring dd { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; }

.linie-grafik { position: relative; }
.art-linie .plot { width: 100%; min-height: 160px; }
.tipp { position: absolute; pointer-events: none; background: var(--flaeche-2); border: 1px solid var(--linie-2); border-radius: var(--r-sm); padding: 4px 8px; font-size: 12px; white-space: nowrap; box-shadow: var(--schatten); }
.art-linie .u-legend { font-size: 12px; color: var(--tinte-2); text-align: left; }
.art-linie .u-legend .u-marker { border-radius: 2px; }
.art-linie .u-axis { color: var(--tinte-3); }

table.daten { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.daten th { text-align: left; font-weight: 500; color: var(--tinte-3); font-size: var(--fs-xs); padding: 0 8px 6px 0; border-bottom: 1px solid var(--linie); }
table.daten td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; vertical-align: top; overflow-wrap: anywhere; }
table.daten tr:last-child td { border-bottom: 0; }
table.daten .z { text-align: right; white-space: nowrap; }
table.daten th + th, table.daten td + td { padding-left: 14px; }
table.daten td { overflow-wrap: normal; word-break: normal; }
table.daten .unterzeile { display: none; }
.tabelle-huelle { overflow-x: auto; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kachel { border: 1px solid var(--linie); border-radius: var(--r-md); padding: 10px 12px; background: var(--flaeche-2); position: relative; min-width: 0; }
.kachel::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gut); }
.kachel.warn::before { background: var(--warn); } .kachel.krit::before { background: var(--krit); } .kachel.leer::before { background: var(--linie-2); }
.kachel .n { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.kachel .f { font-size: 20px; font-weight: 300; font-variant-numeric: tabular-nums; margin: 2px 0; overflow-wrap: anywhere; }
.kachel .f.ohne { color: var(--tinte-3); font-size: 16px; }
.kachel .s { font-size: var(--fs-xs); }

.art-zeitleiste > svg { width: 100%; height: 86px; display: block; }
.art-zeitleiste .strich { stroke: var(--achse); stroke-width: 1; }
.art-zeitleiste text { font: 11px var(--font-sans); fill: var(--tinte-3); }
.art-zeitleiste .gut { fill: var(--gut); } .art-zeitleiste .warn { fill: var(--warn); } .art-zeitleiste .krit { fill: var(--krit); }
.art-zeitleiste circle { stroke: var(--flaeche); stroke-width: 2; }
.art-zeitleiste circle.heute { stroke: var(--akzent); }

.balkenliste { display: grid; gap: 8px; font-size: var(--fs-sm); }
.balkenliste .bz { display: grid; grid-template-columns: minmax(80px, 150px) 1fr 40px; gap: 10px; align-items: center; }
.balkenliste .bz span:first-child { color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balkenliste .spur { height: 14px; background: var(--gitter); border-radius: 0 4px 4px 0; }
.balkenliste .spur i { display: block; height: 100%; background: var(--akzent); border-radius: 0 4px 4px 0; }
.balkenliste .bz b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

.art-kennzahl .gross { font-size: 34px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

details.herkunft { margin: 0 0 12px; font-size: var(--fs-xs); color: var(--tinte-3); }
details.herkunft summary { cursor: pointer; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.herkunft summary::-webkit-details-marker { display: none; }
details.herkunft summary::before { content: "▸"; } details.herkunft[open] summary::before { content: "▾"; }
details.herkunft ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
details.herkunft code { color: var(--tinte-2); overflow-wrap: anywhere; }
.klasse { font-size: 10px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--linie-2); color: var(--tinte-2); margin-left: 6px; }
.klasse.kunde { border-color: color-mix(in oklab, var(--warn) 60%, transparent); }

.eingabe { padding: 10px 28px 18px; }
.feld { display: flex; align-items: flex-end; gap: 10px; background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 22px; padding: 8px 8px 8px 16px; }
.feld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hauch); }
.feld textarea { flex: 1; resize: none; border: 0; background: transparent; color: var(--tinte); font: var(--fs-base)/1.4 var(--font-sans); padding: 8px 0; outline: none; max-height: 200px; }
.feld textarea::placeholder { color: var(--tinte-3); }
.eingabe .hinweis { font-size: var(--fs-xs); color: var(--tinte-3); margin: 6px 4px 0; }

.lage { grid-column: 3; grid-row: 1; border-left: 1px solid var(--linie); background: var(--flaeche); padding: 18px 16px; overflow: auto; }
.lage h2 { margin: 0 0 14px; font-size: var(--fs-sm); font-weight: 600; }
.lage-inhalt { display: grid; gap: 14px; }
.lage .zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-sm); padding: 6px 0; border-bottom: 1px solid var(--linie); }
.lage .zeile:last-child { border-bottom: 0; }
.lage .gross { font-size: 28px; font-weight: 300; font-variant-numeric: tabular-nums; }
.lage .klein { font-size: var(--fs-xs); color: var(--tinte-3); }
.lage-streifen { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 4px; scroll-snap-type: x proximity;
  mask-image: linear-gradient(to right, #000 85%, transparent); }
.lage-streifen .chip { scroll-snap-align: start; }
.chip { flex: none; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; padding: 5px 10px; border: 1px solid var(--linie-2); border-radius: 999px; background: var(--flaeche); color: var(--tinte-2); }

.nur-telefon { display: none; }

/* ══ Telefon ══ */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .mitte { grid-column: 1; }
  .nur-gross { display: none !important; }
  .nur-telefon { display: flex; }
  .leiste { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 20; transform: translateX(-102%); transition: transform .2s ease; }
  .leiste.offen { transform: none; }
  .schleier { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 10; }
  @media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }
  .kopf { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px 8px; }
  .kopf .rechts .weiche { display: none; }
  .kopf.weiche-offen .rechts .weiche { display: inline-flex; }
  .modell { cursor: pointer; }
  .titel { font-weight: 600; color: var(--tinte); }
  .verlauf { padding: 12px 14px; gap: 16px; }
  .frage { max-width: 86%; }
  .karten { grid-template-columns: minmax(0, 1fr); }
  table.daten .lang { display: none; }
  table.daten td:not(:first-child), table.daten th:not(:first-child) { white-space: nowrap; }
  table.daten .unterzeile { display: block; font-size: var(--fs-xs); color: var(--tinte-3); margin-top: 2px; }
  .kopf.weiche-offen .rechts { grid-column: 1 / -1; justify-content: flex-start; }
  .karten > * { grid-column: 1 / -1; }
  .art-ring { grid-template-columns: 96px 1fr; }
  .art-ring > svg { width: 96px; height: 96px; }
  .eingabe { display: grid; justify-items: center; gap: 8px; padding: 8px 14px 18px; border-top: 1px solid var(--linie); background: var(--flaeche); }
  .eingabe .kern { width: 86px; height: 86px; margin-bottom: 18px; cursor: pointer; }
  .eingabe .kern .zustand { bottom: -18px; }
  .eingabe .feld { width: 100%; }
  .eingabe #mikro { display: none; }
  .eingabe .hinweis { justify-self: start; }
}