:root{
  --bg:#fff; --fg:#000; --accent:#00a983;
  --card:#f9f9f9; --line:#ececec;
}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:var(--bg);color:var(--fg)}
.container{max-width:1100px;margin:0 auto;padding:24px}

/* Header */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.topbar h1{margin:0;color:var(--accent);font-weight:700}

/* Karten/Abschnitte */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.hidden{display:none}

/* Tabs */
.tabs{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;color:var(--fg);cursor:pointer;flex:0 0 auto}
.tab.active{background:#e6f6f2;border-color:var(--accent)}

/* Buttons */
.btn{background:var(--accent);color:#fff;border:0;padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(0.95)}
.btn-outline{background:#fff;color:var(--accent);border:1px solid var(--accent)}

/* Formulare */
.row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
input,select,textarea{padding:8px;border:1px solid var(--line);border-radius:8px;color:#000;background:#fff}

/* Tabellen (Desktop) */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:10px;text-align:left;color:#000;vertical-align:top}
.table th{font-weight:700}
.table td.actions{width:1%; white-space:nowrap}

/* Hinweise */
.hint{font-size:12px;color:#555}

/* Modal */
.modal{position:fixed;inset:0;z-index:1000}
.modal.hidden{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.25)}
.modal__dialog{
  position:relative;max-width:520px;margin:10vh auto 0; background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.2)
}
.modal__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.form label{display:flex;flex-direction:column;gap:6px;margin:8px 0}

/* Actions menu (details) */
.actions-menu{position:relative;display:inline-block}
.actions-menu summary{list-style:none}
.actions-menu summary::-webkit-details-marker{display:none}
.actions-menu__list{
  display:none; position:absolute; top:100%; right:0; min-width:220px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.2); z-index:5;
}
.actions-menu[open] .actions-menu__list{display:block}
.actions-menu__list .btn{display:block;width:100%;text-align:left;margin:4px 0}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .container{padding:16px}
}
@media (max-width: 700px){
  .row > *{flex:1 1 100%}
  .btn{padding:10px 12px;border-radius:12px}

  /* Tabellen -> Kartenlayout */
  .table{display:block}
  .table thead{display:none}
  .table tbody{display:block}
  .table tr{
    display:block; margin:12px 0; background:#fff;
    border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.02);
  }
  .table td{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:12px; padding:10px 12px; border-bottom:1px solid var(--line);
  }
  .table tr td:last-child{border-bottom:0}
  .table td::before{
    content:attr(data-label); font-weight:600; color:#333; flex:0 0 45%; max-width:45%;
  }
  .table td.actions{display:block}
  .table td.actions::before{content:'';display:none}
  /* Actions menu: im Flow anzeigen */
  .actions-menu__list{position:static; display:block; box-shadow:none; border:0; padding:8px 0 0}
  .actions-menu summary{width:100%}
  .actions-menu .btn-outline{width:100%; text-align:center}
  .actions-menu__list .btn{width:100%}
}

/* Links im Namen */
.table a{color:inherit; text-decoration:underline}

/* Öffentliche Ansicht: Links grün */
.public-view .table a {
  color: var(--accent);          /* #00a983 */
  text-decoration: underline;
}
.public-view .table a:visited {
  color: var(--accent);
}
.public-view .table a:hover {
  text-decoration-thickness: 2px;
}
.public-view .table a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}