/* Gemeinsames Haus-Design fuer das oeffentliche Hilfe-Center von NonStop Deals. */
/* Angelehnt an wwwroot/koeder/, seit 21.07.2026. Same-Origin, keine externen Requests, kein Tracking. */

:root {
  --blau:#14639e; --gruen:#1a7f5a; --rot:#b02a2a; --orange:#b56b1a;
  --rand:#d9dee3; --bg:#f5f7f9; --text:#1c2530; --grau:#5a6673;
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55;
}
.wrap { max-width:720px; margin:0 auto; padding:24px 16px 60px; }
a { color:var(--blau); }

/* Kopf */
.zurueck { display:inline-block; text-decoration:none; color:var(--grau); font-size:.9rem; margin-bottom:14px; }
.zurueck:hover { color:var(--blau); }
h1 { font-size:1.7rem; margin:0 0 6px; line-height:1.25; }
.unter { color:var(--grau); margin:0 0 24px; font-size:1rem; }

/* Suche (nur Uebersicht) */
.suche { width:100%; padding:13px 16px; font-size:1rem; border:1px solid var(--rand);
         border-radius:10px; background:#fff; color:var(--text); margin:0 0 8px; }
.suche:focus { outline:none; border-color:var(--blau); box-shadow:0 0 0 3px rgba(20,99,158,.12); }
.suche-hinweis { color:var(--grau); font-size:.85rem; margin:0 0 22px; }
.kein-treffer { display:none; color:var(--grau); background:#fff; border:1px solid var(--rand);
                border-radius:12px; padding:18px; }

/* Kategorien + Artikel-Liste */
.kategorie { margin:0 0 26px; }
.kategorie > h2 { font-size:1.1rem; color:var(--text); margin:0 0 10px;
                  padding-bottom:6px; border-bottom:1px solid var(--rand); }
a.karte { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--rand);
          border-radius:12px; padding:16px 18px; margin:0 0 12px; transition:border-color .1s, box-shadow .1s; }
a.karte:hover { border-color:var(--blau); box-shadow:0 2px 10px rgba(20,99,158,.08); }
a.karte h3 { margin:0 0 4px; font-size:1.05rem; color:var(--blau); }
a.karte p { margin:0; color:var(--grau); font-size:.93rem; }

/* Artikel-Seite */
.artikel { background:#fff; border:1px solid var(--rand); border-radius:12px; padding:22px 22px 8px; }
.artikel h2 { font-size:1.2rem; margin:26px 0 8px; }
.artikel h2:first-child { margin-top:4px; }
.artikel p { margin:0 0 14px; }
.artikel ul, .artikel ol { margin:0 0 14px; padding-left:22px; }
.artikel li { margin:7px 0; }
.artikel b { color:var(--text); }
.badge { display:inline-block; font-size:.78rem; font-weight:600; color:var(--grau);
         text-transform:uppercase; letter-spacing:.03em; margin:0 0 10px; }
.hinweis { background:#fffaf0; border:1px solid #f0e2c4; border-radius:8px; padding:13px 15px;
           font-size:.92rem; margin:0 0 16px; }
.hinweis.wichtig { background:#fdf0f0; border-color:#f0cccc; }

/* Verwandte Artikel */
.verwandt { margin-top:22px; }
.verwandt .kopf { color:var(--grau); font-size:.82rem; font-weight:600; text-transform:uppercase;
                  letter-spacing:.03em; margin:0 0 10px; }
.verwandt a { display:block; text-decoration:none; color:var(--blau); background:#fff;
              border:1px solid var(--rand); border-radius:8px; padding:11px 14px; margin:0 0 8px; font-size:.95rem; }
.verwandt a:hover { border-color:var(--blau); background:#f7fafc; }

/* Anruf-Bezug (jede Seite) */
.cta { text-align:center; margin:24px 0 0; font-size:1rem; }
.cta b { color:var(--blau); }
.cta a { color:inherit; text-decoration:none; }

/* Fuss */
footer { text-align:center; color:var(--grau); font-size:.82rem; margin-top:32px;
         border-top:1px solid var(--rand); padding-top:16px; }
footer a { color:var(--grau); }