body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f6f7fb;color:#111}
.wrap{max-width:1200px;margin:0 auto;padding:20px}
.card{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 6px 20px rgba(0,0,0,.06);margin:14px 0}
h1,h2{margin:0 0 12px}
a{color:#0b57d0;text-decoration:none}
a:hover{text-decoration:underline}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;background:#eef2ff}
.ok{background:#eaffea}
.bad{background:#ffecec}
.flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select,button{padding:10px 12px;border-radius:10px;border:1px solid #ddd;font:inherit}
button{cursor:pointer;background:#111;color:#fff;border:none}
button.secondary{background:#fff;color:#111;border:1px solid #ddd}
small{color:#555}
.hr{height:1px;background:#eee;margin:14px 0}
.red{color:#b00020;font-weight:700}
.green{color:#0b6b0b;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.col6{grid-column:span 6}
.col4{grid-column:span 4}
.col3{grid-column:span 3}
.col12{grid-column:span 12}
@media(max-width:900px){.col6,.col4,.col3{grid-column:span 12}}

.pwwrap{display:flex;gap:8px;align-items:center}
.pwwrap input{flex:1}
.pwbtn{padding:10px 12px;border-radius:10px;border:1px solid #ddd;background:#fff;color:#111}
.pwbtn:hover{background:#f3f4f6}

/* =========================
   Mobile / Responsive Helpers
   ========================= */

/* Tabellen auf Handy wischbar machen */
.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-scroll table{
  min-width:900px; /* verhindert Quetschen von großen Tabellen */
}

/* Inputs/Buttons sauber */
input,select,button{
  box-sizing:border-box;
}

/* Mobile Feinschliff */
@media (max-width:900px){
  .wrap{padding:12px}
  .card{padding:14px;border-radius:14px}

  h1{font-size:22px}
  h2{font-size:18px}

  /* Badges nicht umbrechen */
  .badge{white-space:nowrap}

  /* Details-Inhalte dürfen nicht „rausdrücken“ */
  details > div{min-width:0 !important}

  /* Buttons/Inputs volle Breite auf Handy */
  input,select,button{width:100%}

  /* Tabellenzellen etwas kompakter */
  th,td{padding:8px}
}