/*
 * scan-angebote.css — Kasten «Hilfe beim Beheben» und Hinweis «Neue Website»
 * (scan-angebote.js), gemeinsam für Startseite und App. Nur Tokens beider Seiten
 * (--surface, --line, --signal, --paper, --muted, --radius); Fallbacks für die App.
 */
.ang { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.ang-hilfe, .ang-neu {
  border:1px solid var(--line); border-radius:var(--radius, 14px); padding:16px 18px;
  background:var(--surface);
}
/* Untergeordnet (Wachstumsplan Prio 6): kein Signalrand, der primäre Schritt steht darüber. */
.ang-hilfe, .ang-neu { background:transparent; }
.ang-kopf { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; }
.ang-kopf > div { flex:1 1 260px; min-width:0; }
.ang-titel { font-size:0.97rem; font-weight:600; margin:0; color:var(--paper); }
.ang-hilfe p, .ang-neu p { color:var(--muted); font-size:0.92rem; line-height:1.5; margin:4px 0 0; }
.ang .btn { min-height:44px; touch-action:manipulation; }
.ang-form { margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.ang-form[hidden] { display:none; }
.ang-bezug { font-family:var(--font-mono); font-size:0.82rem !important; overflow-wrap:anywhere; }
.ang-zeile { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ang-zeile[hidden] { display:none; }
.ang-feld { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ang-feld[hidden] { display:none; }
.ang-feld label { font-size:0.85rem; font-weight:600; color:var(--paper); }
.ang-feld input, .ang-feld textarea {
  width:100%; box-sizing:border-box; min-height:44px; padding:10px 12px; font:inherit; font-size:16px;
  color:var(--paper); background:var(--bg); border:1px solid var(--line); border-radius:10px;
}
.ang-feld textarea { resize:vertical; min-height:88px; }
.ang-feld input:focus-visible, .ang-feld textarea:focus-visible { outline:2px solid var(--signal); outline-offset:1px; }
.ang-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.ang-fuss { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.ang-fuss[hidden] { display:none; }
.ang-klein { font-size:0.8rem !important; color:var(--muted); }
.ang-meldung { font-size:0.9rem; margin:0; }
.ang-meldung.is-ok { color:var(--signal); }
.ang-meldung.is-fehler { color:var(--sev-high, #f79009); }
.ang-gruende { margin:8px 0 12px; padding-left:20px; color:var(--paper); font-size:0.92rem; line-height:1.6; }
.ang-link { display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.ang-transparenz { margin:0; }
@media (max-width:560px) {
  .ang-zeile { grid-template-columns:1fr; }
  .ang-kopf .btn, .ang-fuss .btn, .ang-link { width:100%; justify-content:center; }
}