.card { border: 1px solid var(--color-line); border-radius: var(--radius-large); background: linear-gradient(180deg, rgb(37 44 56 / 98%), rgb(27 32 41 / 98%)); box-shadow: var(--shadow-card); padding: clamp(16px, 4vw, 24px); }
.card h1 { margin-bottom: 7px; font-size: clamp(1.55rem, 6vw, 2.15rem); line-height: 1.08; letter-spacing: -.035em; }
.eyebrow { margin-bottom: 7px; color: #9bb7ff; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--color-muted); }
.hero-input { margin-top: 18px; padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-medium); background: var(--color-panel-muted); }
textarea, input { width: 100%; border: 1px solid var(--color-line); border-radius: 12px; background: #111720; color: var(--color-text); padding: 13px 14px; min-height: var(--touch-min); }
textarea { resize: vertical; min-height: 112px; }
textarea::placeholder, input::placeholder { color: #8290a2; }
.action-row { display: grid; grid-template-columns: var(--touch-min) 1fr; gap: 10px; margin-top: 10px; }
.button { min-height: var(--touch-min); border: 1px solid transparent; border-radius: 12px; padding: 11px 15px; font-weight: 800; }
.button--primary { background: var(--color-blue); box-shadow: inset 0 1px 0 #ffffff35; }
.button--primary:not(:disabled):hover { background: var(--color-blue-hover); }
.button--secondary { border-color: var(--color-line); background: var(--color-panel-raised); }
.button--icon { padding: 0; font-size: 1.2rem; background: var(--color-panel-raised); border-color: var(--color-line); }
.button--full { width: 100%; margin-top: 12px; }
.field-note { margin: 10px 0 0; color: var(--color-muted); font-size: .78rem; }
.status-panel { display: grid; gap: 5px; margin-top: 14px; padding: 12px 14px; border: 1px solid #2d5d38; border-radius: 13px; background: var(--color-green-soft); color: #d9f3df; }
.status-panel > div { display: flex; align-items: center; gap: 9px; }
.status-panel p { margin: 0; color: #b9d7c1; font-size: .78rem; }
.status-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--color-yellow); box-shadow: 0 0 0 4px rgb(214 163 65 / 12%); }
.status-dot.is-online { background: var(--color-green); box-shadow: 0 0 0 4px rgb(73 168 91 / 14%); }
.status-dot.is-offline { background: var(--color-red); box-shadow: 0 0 0 4px rgb(220 85 85 / 14%); }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.feature-tile { min-height: 104px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 3px; border: 1px solid var(--color-line); border-radius: var(--radius-medium); background: linear-gradient(145deg, var(--color-panel-raised), var(--color-panel-muted)); padding: 15px; box-shadow: inset 0 1px 0 #ffffff0d; }
.feature-tile:hover { border-color: #566274; transform: translateY(-1px); }
.feature-tile strong { font-size: 1rem; }
.feature-tile span { color: var(--color-muted); font-size: .82rem; }
.feature-tile small { margin-top: 4px; color: #9bb7ff; font-weight: 800; }
.technical-card { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px dashed #566274; border-radius: 14px; color: var(--color-muted); }
.technical-card > div { display: grid; gap: 2px; }
.technical-card strong { color: var(--color-text); }
.technical-card span { font-size: .78rem; }
.diagnostics-comment { display: grid; gap: 5px; margin-top: 9px; color: var(--color-muted); font-size: .76rem; font-weight: 800; }
.diagnostics-comment textarea { min-height: 72px; padding: 10px 12px; font-size: .84rem; font-weight: 500; }
.back-button { min-height: var(--touch-min); margin: 0 0 10px; border: 0; background: transparent; color: #b9c7dd; font-weight: 800; padding: 8px 4px; }
.module-lock { margin-top: 16px; border: 1px solid #5a5030; border-radius: 14px; background: #302a18; padding: 15px; color: #f6e4ad; }
.module-lock p { margin: 4px 0 0; color: #d9c99a; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 50; transform: translateX(-50%); width: min(calc(100% - 28px), 520px); border: 1px solid var(--color-line); border-radius: 13px; background: #0f141bf0; box-shadow: 0 18px 50px #0009; padding: 13px 15px; text-align: center; }
@media (min-width: 560px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .technical-card { grid-template-columns: 1fr auto; align-items: center; } }
.feature-tile--active { border-color: #487fe8; background: linear-gradient(145deg, #263754, #202b3f); }
.feature-tile--active small { color: #b9d0ff; }
.chip { display: inline-flex; align-items: center; min-height: 28px; border: 1px solid var(--color-line); border-radius: 999px; padding: 4px 9px; background: #121821; color: #cbd5e3; font-size: .74rem; font-weight: 800; }
.scope-notice { display: grid; gap: 3px; margin-top: 12px; padding: 12px; border: 1px solid #5a5030; border-radius: 12px; background: #302a18; }
.scope-notice strong { color: #f6e4ad; font-size: .82rem; }
.scope-notice span { color: #d9c99a; font-size: .75rem; line-height: 1.45; }
.app-footer a { color: #b9d0ff; }
.app-footer--stacked { flex-direction: column; }
.publication-warning { color: #d6bf74; }
.button--danger { border-color: #743d44; background: #3a1d20; color: #ffced1; }
.button--danger:hover { background: #4a2227; }
.check-row, .check-card { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; border: 1px solid var(--color-line); border-radius: 12px; background: #171d26; padding: 11px; }
.check-row input, .check-card input { width: 22px; height: 22px; flex: 0 0 auto; }
.check-card span { display: grid; gap: 3px; }
.check-card small { color: var(--color-muted); font-size: .72rem; line-height: 1.35; }
.option-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.compact-input { display: grid; gap: 5px; color: var(--color-muted); font-size: .76rem; font-weight: 800; }
.compact-input select { min-height: var(--touch-min); border: 1px solid var(--color-line); border-radius: 10px; background: #111720; color: var(--color-text); padding: 8px 10px; }
.via-panel { display: grid; gap: 10px; margin-top: 10px; border: 1px solid #3d5b87; border-radius: 12px; background: #162235; padding: 12px; }
.location-row { display: grid; gap: 6px; margin-top: 10px; }
.location-row small { color: var(--color-muted); line-height: 1.35; }
.page-actions, .route-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.alert-list, .disruption-results, .favorite-list, .board-results { display: grid; gap: 9px; margin-top: 14px; }
.alert-card, .disruption-card, .capability-card { border: 1px solid #8b6b28; border-radius: 12px; background: #302a18; color: #f6e4ad; padding: 11px 13px; }
.alert-card summary { cursor: pointer; font-weight: 850; }
.alert-card p, .disruption-card p, .capability-card p { margin: 7px 0 0; color: #d9c99a; line-height: 1.45; }
.disruption-card h2 { margin: 0; font-size: 1rem; }
.disruption-card small { display: block; margin-top: 7px; color: #c7b77e; }
.favorite-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; border: 1px solid var(--color-line); border-radius: 12px; background: #171d26; padding: 10px; }
.favorite-row > div { display: grid; gap: 3px; min-width: 0; }
.favorite-row small { color: var(--color-muted); overflow-wrap: anywhere; }
.board-event { display: grid; grid-template-columns: 62px 1fr; gap: 10px; border: 1px solid var(--color-line); border-radius: 12px; background: #171d26; padding: 11px; }
.board-event.is-cancelled { border-color: #88434a; background: #321d20; }
.board-event__time { font-size: 1.12rem; }
.board-event p { margin: 3px 0; color: var(--color-muted); font-size: .78rem; }
.board-event small { color: var(--color-soft); }
.ticket-chip--eligible { border-color: #356642; background: #173a21; color: #d9f3df; }
.ticket-chip--excluded { border-color: #743d44; background: #3a1d20; color: #ffced1; }
.ticket-chip--uncertain { border-color: #8b6b28; background: #302a18; color: #f6e4ad; }
.route-page-note { margin: 0; border-radius: 10px; background: #302a18; color: #f6e4ad; padding: 10px; font-size: .76rem; }
@media (min-width: 640px) { .option-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
@media (max-width: 620px) { .favorite-row { grid-template-columns: 1fr 1fr; } .favorite-row > div { grid-column: 1 / -1; } }
.disruption-search-panel { display: grid; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-medium); background: var(--color-panel-muted); }
.journey-monitor-button { width: calc(100% - 28px); margin: 0 14px 12px; }
.journey-card.is-monitor-selected { border-color: #487fe8; box-shadow: inset 0 0 0 1px #487fe8; }
.reroute-results:empty { display: none; }
.reroute-heading { margin: 16px 0 0; color: #f6e4ad; }

/* UI-Referenzabgleich Debug-Build 16 */
.card {
  margin-bottom: 14px;
  border-radius: 26px;
  border-color: #3a4350;
  background: rgb(31 37 48 / 94%);
  box-shadow: 0 16px 38px rgb(0 0 0 / 26%);
  padding: 17px;
}
.card h1 { margin-bottom: 8px; font-size: 31px; line-height: 1.05; letter-spacing: -.7px; }
.eyebrow { color: #809cff; }
.hero-input {
  margin-top: 16px;
  border-color: #3b4656;
  border-radius: 22px;
  background: #151b24;
  padding: 14px;
}
.hero-input > label { display: block; margin-bottom: 3px; color: #aab3bf; font-size: 12px; font-weight: 850; }
textarea, input, select {
  border-color: #3b4656;
  border-radius: 16px;
  background: #151b24;
  color: #f2f5f8;
}
textarea { min-height: 132px; border: 0; border-bottom: 1px solid #37404d; border-radius: 0; background: transparent; padding: 8px 0 13px; font-size: 17px; font-weight: 750; }
.action-row { grid-template-columns: 56px 1fr; gap: 10px; margin-top: 12px; }
.button { border-radius: 16px; font-size: 15px; font-weight: 900; }
.button--primary { background: #2f6df6; box-shadow: none; }
.button--icon { background: #343c49; border-color: transparent; font-size: 23px; }
.button--secondary { border-color: #3b4656; background: #252c38; }
.back-button {
  width: auto;
  margin-bottom: 14px;
  border: 1px solid #3a4350;
  border-radius: 999px;
  background: #252c38;
  color: #f2f5f8;
  padding: 10px 14px;
}
.field-note {
  margin-top: 11px;
  border: 1px solid #3b4552;
  border-radius: 15px;
  background: #242b36;
  color: #b5becb;
  padding: 10px 12px;
  line-height: 1.35;
}
.status-panel {
  margin-top: 11px;
  border-color: #3b4552;
  border-radius: 15px;
  background: #242b36;
  color: #dfe5ee;
  padding: 10px 12px;
}
.status-panel p { color: #aab3bf; }
.feature-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.feature-tile {
  min-height: 100px;
  border-radius: 21px;
  border-color: #3b4553;
  background: #252c38;
  padding: 15px;
  box-shadow: none;
}
.feature-tile--active { border-color: #3b4553; background: #252c38; }
.feature-tile strong { font-size: 16px; }
.feature-tile span { color: #aab3bf; font-size: 13px; line-height: 1.3; }
.feature-tile small { display: none; }
.technical-card {
  border-style: solid;
  border-color: #3b4552;
  border-radius: 16px;
  background: #242b36;
}
.station-suggestion {
  border-radius: 16px;
  border-color: #394452;
  background: #242b36;
  padding: 11px 12px;
}
.station-suggestion:hover, .station-suggestion:focus-visible { border-color: #78a8ff; background: #293342; }
.station-selected { border-left: 0; border: 1px solid #2f6d4b; border-radius: 16px; background: #122519; padding: 11px 12px; }
.chip { border-color: #465160; background: #202632; color: #dfe5ee; }
.alert-card, .disruption-card, .capability-card { border-radius: 16px; }
.route-status, .route-result-summary, .route-empty { border-radius: 16px; }
.page-actions, .route-actions { gap: 10px; }
@media (max-width: 430px) {
  .card { padding: 14px; border-radius: 22px; }
  .card h1 { font-size: 27px; }
  .hero-input { margin-top: 12px; padding: 12px; border-radius: 20px; }
  textarea { min-height: 118px; font-size: 16px; }
  .action-row { grid-template-columns: 52px 1fr; }
  .feature-tile { min-height: 96px; padding: 13px; }
}

/* Arbeitsblock 20 F6: eindeutige Zustände des Diagnoseexports */
.button--export {
  border-color: #78a8ff;
  background: #2f6df6;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 0 0 1px rgb(47 109 246 / 18%);
}
.button--export:not(:disabled):hover { background: #3d79f7; border-color: #a8c7ff; }
.button--export:not(:disabled):focus-visible { outline: 3px solid #b9d0ff; outline-offset: 3px; }
.button--export:not(:disabled):active { background: #1f56ce; transform: translateY(1px); box-shadow: inset 0 2px 4px rgb(0 0 0 / 24%); }
.button--export:disabled { border-color: #3b4656; background: #252c38; color: #7f8b9a; box-shadow: none; opacity: .58; }


/* Arbeitsblock 22A: kompakte App-Shell auf der historischen visuellen Referenz */
.card {
  border-radius: var(--radius-large);
  background: rgb(31 37 48 / 96%);
  box-shadow: var(--shadow-card);
  padding: 14px;
}
.card h1 { margin-bottom: 6px; font-size: clamp(1.55rem, 7vw, 1.95rem); line-height: 1.05; letter-spacing: -.04em; }
.card h2 { line-height: 1.12; }
.eyebrow { margin-bottom: 5px; font-size: .66rem; line-height: 1.35; letter-spacing: .075em; }
.muted { font-size: .86rem; line-height: 1.42; }
.hero-input { margin-top: 12px; border-radius: 18px; background: #151b24; padding: 11px; }
.hero-input > label { color: #c4cedb; font-size: .75rem; font-weight: 850; }
textarea, input { min-height: 46px; border-radius: 14px; padding: 11px 12px; }
textarea { min-height: 92px; }
.action-row { grid-template-columns: 48px 1fr; gap: 8px; margin-top: 8px; }
.button { min-height: 46px; border-radius: 14px; padding: 9px 13px; font-size: .86rem; }
.button--icon { font-size: 1.12rem; }
.button--full { margin-top: 10px; }
.field-note { margin-top: 8px; font-size: .7rem; line-height: 1.42; }
.status-panel { grid-template-columns: 1fr; gap: 3px; margin-top: 10px; border-radius: 14px; padding: 9px 11px; }
.status-panel strong { font-size: .82rem; line-height: 1.3; }
.status-panel p { font-size: .68rem; line-height: 1.35; }
.status-dot { width: 8px; height: 8px; }
.feature-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.feature-tile { min-height: 88px; justify-content: flex-start; gap: 4px; border-radius: 18px; padding: 12px; }
.feature-tile:hover { transform: none; }
.feature-tile strong { font-size: .9rem; line-height: 1.2; }
.feature-tile span { font-size: .72rem; line-height: 1.32; }
.feature-tile small { display: none; }
.technical-card { gap: 9px; margin-top: 10px; border-style: solid; border-radius: 18px; padding: 11px; }
.technical-card strong { font-size: .9rem; }
.technical-card span { font-size: .7rem; line-height: 1.38; }
.diagnostics-comment { margin-top: 7px; font-size: .7rem; }
.diagnostics-comment textarea { min-height: 58px; padding: 9px 10px; font-size: .78rem; }
.back-button { min-height: 42px; margin-bottom: 8px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-panel-raised); padding: 8px 12px; color: var(--color-text); }
.option-grid { gap: 8px; margin-top: 8px; }
.compact-input, .date-input { gap: 4px; font-size: .69rem; }
.compact-input select { min-height: 46px; border-radius: 14px; }
.check-row, .check-card { gap: 8px; margin-top: 9px; border-radius: 16px; padding: 9px 10px; }
.check-row input, .check-card input { width: 20px; height: 20px; }
.page-actions, .route-actions { gap: 8px; margin-top: 10px; }
.alert-list, .disruption-results, .favorite-list, .board-results { gap: 7px; margin-top: 10px; }
.alert-card, .disruption-card, .capability-card { border-radius: 14px; padding: 9px 11px; }
.favorite-row { border-radius: 14px; padding: 9px; }
.scope-notice { margin-top: 9px; border-radius: 14px; padding: 9px 10px; }
.scope-notice strong { font-size: .74rem; }
.scope-notice span { font-size: .68rem; }
.toast { border-radius: 14px; padding: 11px 13px; font-size: .82rem; }

@media (min-width: 430px) {
  .status-panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .status-panel p { text-align: right; }
}
@media (min-width: 560px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .technical-card { grid-template-columns: minmax(0, 1fr) 170px; align-items: end; }
}
@media (max-width: 340px) {
  .card { padding: 12px; border-radius: 19px; }
  .card h1 { font-size: 1.48rem; }
  .feature-grid { gap: 7px; }
  .feature-tile { min-height: 86px; padding: 10px; border-radius: 16px; }
  .feature-tile strong { font-size: .82rem; }
  .feature-tile span { font-size: .67rem; }
}

/* Arbeitsblock 22A Korrektur 01 – AppShell05: Referenznähe, Hierarchie und responsive Bedienhülle */
.card {
  margin-bottom: 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-large);
  background: linear-gradient(180deg, rgb(31 40 53 / 98%), rgb(27 35 46 / 98%));
  box-shadow: var(--shadow-card);
  padding: 15px;
}
.card h1 {
  margin-bottom: 5px;
  font-size: clamp(1.68rem, 7.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.card h2 { line-height: 1.12; }
.screen-heading { margin-bottom: 13px; }
.screen-heading .muted { margin-bottom: 0; }
.eyebrow { margin-bottom: 4px; color: #91aaff; font-size: .66rem; line-height: 1.35; letter-spacing: .075em; }
.muted { color: var(--color-muted); font-size: .88rem; line-height: 1.45; }

.hero-card > .eyebrow { display: none; }
.hero-input {
  margin-top: 11px;
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: #151d27;
}
.hero-input > label { display: block; margin-bottom: 3px; color: var(--color-muted); font-size: .74rem; font-weight: 850; }
textarea, input, select {
  width: 100%;
  min-height: var(--touch-min);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #111821;
  color: var(--color-text);
  padding: 11px 13px;
}
textarea::placeholder, input::placeholder { color: #8c98a8; }
.hero-input textarea {
  min-height: 112px;
  border: 0;
  border-bottom: 1px solid #354252;
  border-radius: 0;
  background: transparent;
  padding: 9px 0 13px;
  resize: vertical;
  font-size: 1rem;
  font-weight: 720;
  line-height: 1.38;
}
.action-row { grid-template-columns: 52px 1fr; gap: 10px; margin-top: 11px; }
.button {
  min-height: 46px;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 900;
}
.button--primary { background: var(--color-blue); box-shadow: none; }
.button--primary:not(:disabled):hover { background: #3d79f7; }
.button--secondary { border-color: var(--color-line); background: var(--color-panel-raised); }
.button--icon { padding: 0; border-color: transparent; background: #343f50; font-size: 1.25rem; }
.button--full { width: 100%; margin-top: 10px; }
.field-note {
  margin: 9px 0 0;
  color: var(--color-muted);
  font-size: .73rem;
  line-height: 1.42;
}
.hero-input > .field-note,
#home-review-summary {
  border: 1px solid #344252;
  border-radius: 14px;
  background: #222c39;
  padding: 9px 10px;
}

.status-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  margin-top: 11px;
  border: 1px solid #344252;
  border-radius: 15px;
  background: #222c39;
  color: #dfe7f2;
  padding: 9px 11px;
}
.status-panel strong { font-size: .8rem; line-height: 1.25; }
.status-panel p { color: var(--color-muted); font-size: .68rem; text-align: right; }
.status-dot { width: 8px; height: 8px; }

.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.feature-tile,
.feature-tile--active {
  min-height: 106px;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--color-line);
  border-radius: 21px;
  background: #273140;
  padding: 14px;
  box-shadow: none;
}
.feature-tile:hover { border-color: #61728a; transform: none; }
.feature-tile strong { font-size: .98rem; line-height: 1.1; }
.feature-tile span { color: var(--color-muted); font-size: .78rem; line-height: 1.35; }

.technical-card {
  grid-template-columns: minmax(0, 1fr) 156px;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid #5e5334;
  border-radius: 18px;
  background: linear-gradient(180deg, #252418, #1c2025);
  color: var(--color-muted);
  padding: 12px;
}
.technical-card > div { gap: 3px; }
.technical-card strong { color: var(--color-text); font-size: .9rem; }
.technical-card span { font-size: .72rem; line-height: 1.38; }
.diagnostics-comment { margin-top: 8px; font-size: .7rem; }
.diagnostics-comment textarea { min-height: 62px; border-radius: 13px; padding: 9px 10px; font-size: .78rem; }
.button--export { min-width: 0; width: 100%; }

.back-button {
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #273140;
  color: var(--color-text);
  padding: 8px 13px;
  font-size: .84rem;
  font-weight: 900;
}

.primary-form {
  display: grid;
  gap: 10px;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: #171f2a;
  padding: 12px;
}
.compact-input, .date-input { display: grid; gap: 5px; color: var(--color-muted); font-size: .72rem; font-weight: 850; }
.compact-input > small { color: var(--color-soft); font-size: .68rem; font-weight: 600; line-height: 1.4; }
.compact-input select, .date-input input { min-height: 48px; border-radius: 15px; background: #111821; padding: 9px 11px; }
.option-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 0; }
.check-row, .check-card {
  gap: 9px;
  margin-top: 0;
  border-radius: 16px;
  background: #202a37;
  padding: 10px;
}
.check-row input, .check-card input { width: 21px; height: 21px; }
.check-card small { font-size: .69rem; }
.via-panel { gap: 9px; margin-top: 9px; border-radius: 16px; padding: 10px; }
.location-row { margin-top: 9px; }
.location-row small { font-size: .68rem; }
.page-actions, .route-actions { gap: 9px; margin-top: 11px; }
.alert-list, .disruption-results, .favorite-list, .board-results { gap: 9px; margin-top: 12px; }
.favorite-row { border-radius: 16px; background: #18212c; padding: 10px; }
.alert-card, .disruption-card, .capability-card { border-radius: 16px; padding: 10px 12px; }

.form-disclosure {
  margin-top: 10px;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: #151d27;
  overflow: clip;
}
.form-disclosure > summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 9px 13px;
}
.form-disclosure > summary > span:first-child { display: grid; gap: 1px; min-width: 0; }
.form-disclosure summary small { color: var(--color-muted); font-size: .69rem; font-weight: 750; }
.form-disclosure summary strong { overflow-wrap: anywhere; font-size: .88rem; line-height: 1.25; }
.disclosure-chevron { flex: 0 0 auto; color: #75a0ff; font-size: 1.45rem; font-weight: 900; transition: transform .16s ease; }
.form-disclosure[open] .disclosure-chevron { transform: rotate(90deg); }
.form-disclosure__body { display: grid; gap: 10px; border-top: 1px solid var(--color-line); padding: 11px 12px 12px; }
.safety-note {
  margin: 11px 0 0;
  border: 1px solid #5c5132;
  border-radius: 14px;
  background: #292615;
  color: #e4d5a5;
  padding: 9px 10px;
  font-size: .7rem;
  line-height: 1.42;
}
.context-refresh { width: 100%; margin-top: 9px; }

@media (min-width: 640px) {
  .card { padding: 18px; }
  .option-grid { grid-template-columns: 1fr 1fr; }
  .feature-tile { min-height: 112px; }
}

@media (min-width: 900px) {
  .technical-card { grid-template-columns: minmax(0, 1fr) 156px; }
}

@media (max-width: 520px) {
  .status-panel { grid-template-columns: 1fr; }
  .status-panel p { text-align: left; }
  .technical-card { grid-template-columns: 1fr; }
  .technical-card .button--export { min-height: 50px; }
}

@media (max-width: 360px) {
  .card { padding: 12px; border-radius: 20px; }
  .card h1 { font-size: 1.52rem; }
  .hero-input { padding: 10px; }
  .hero-input textarea { min-height: 104px; font-size: .94rem; }
  .action-row { grid-template-columns: 48px 1fr; gap: 8px; }
  .feature-grid { gap: 8px; }
  .feature-tile { min-height: 98px; border-radius: 18px; padding: 11px; }
  .feature-tile strong { font-size: .87rem; }
  .feature-tile span { font-size: .69rem; }
}


/* Arbeitsblock 22A Korrektur 03 – AppShell07: Startseite nach historischer Einzel-HTML-Referenz. */
.hero-card {
  border-radius: 26px;
  background: rgb(31 37 48 / 94%);
  box-shadow: 0 16px 38px rgb(0 0 0 / 26%);
  padding: 17px;
}
.hero-card > .eyebrow { display: none; }
.hero-card > h1 { margin: 0 0 8px; font-size: 31px; line-height: 1.05; letter-spacing: -.7px; }
.hero-input { margin-top: 16px; border-radius: 22px; padding: 14px; background: #151b24; }
.hero-input > label { color: #aab3bf; font-size: 12px; font-weight: 800; }
.hero-input textarea { min-height: 118px; padding: 8px 0 13px; font-size: 17px; font-weight: 750; line-height: 1.35; }
.action-row { grid-template-columns: 56px 1fr; gap: 10px; margin-top: 12px; }
.hero-input .button { min-height: 50px; border-radius: 16px; font-size: 16px; }
.hero-input .button--icon { font-size: 23px; }
.hero-input > .field-note {
  margin-top: 11px;
  border: 1px solid #3b4552;
  border-radius: 15px;
  background: #242b36;
  color: #b5becb;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}
.hero-input .status-panel {
  grid-template-columns: 1fr;
  gap: 3px;
  margin-top: 9px;
  border-color: #3b4552;
  border-radius: 15px;
  background: #202632;
  padding: 8px 10px;
}
.hero-input .status-panel strong { font-size: 12px; }
.hero-input .status-panel p { color: #9fa9b7; font-size: 11px; text-align: left; }
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.feature-tile, .feature-tile--active {
  min-height: 100px;
  justify-content: flex-start;
  gap: 0;
  border: 1px solid #3b4553;
  border-radius: 21px;
  background: #252c38;
  padding: 15px;
}
.feature-tile strong { display: block; margin-bottom: 5px; font-size: 16px; line-height: 1.15; }
.feature-tile span { color: #aab3bf; font-size: 13px; line-height: 1.3; }
.technical-card {
  grid-template-columns: minmax(0, 1fr) 145px;
  align-items: start;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid #514a35;
  border-radius: 22px;
  background: linear-gradient(180deg, #242216 0%, #1a1d22 100%);
  padding: 13px;
}
.technical-card strong { display: block; margin-bottom: 3px; font-size: 15px; }
.technical-card span { display: block; color: #b9c1cb; font-size: 12px; line-height: 1.32; }
.diagnostics-comment { margin-top: 9px; color: #b9c1cb; font-size: 11px; }
.diagnostics-comment textarea { min-height: 44px; border-radius: 14px; padding: 8px 9px; font-size: 12px; line-height: 1.25; }
.technical-card .button--export { min-height: 44px; border-radius: 14px; padding-inline: 10px; font-size: 13px; }
@media (min-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-tile { min-height: 100px; }
}
@media (max-width: 430px) {
  .hero-card { padding: 13px; }
  .hero-card > h1 { font-size: 26px; }
  .hero-input { padding: 12px; }
  .hero-input textarea { min-height: 112px; font-size: 15px; }
  .feature-grid { gap: 9px; }
  .feature-tile { min-height: 96px; padding: 12px; }
  .feature-tile strong { font-size: 14px; }
  .feature-tile span { font-size: 12px; }
  .technical-card { grid-template-columns: minmax(0, 1fr) 128px; gap: 9px; padding: 11px; }
}
@media (max-width: 360px) {
  .hero-card { padding: 12px; border-radius: 22px; }
  .hero-card > h1 { font-size: 24px; }
  .action-row { grid-template-columns: 52px 1fr; gap: 8px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .feature-tile { min-height: 92px; border-radius: 18px; padding: 10px; }
  .feature-tile strong { font-size: 13px; }
  .feature-tile span { font-size: 11px; }
  .technical-card { grid-template-columns: 1fr; }
}