:root{
  --bg:#eaf5ff;
  --panel:#ffffff;
  --ink:#17212b;
  --muted:#5b6b7a;
  --line:#d7e3ee;
  --primary:#0f5f7a;
  --primary-dark:#0b4255;
  --soft:#eef6fb;
  --shadow:0 14px 35px rgba(20,42,68,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}
.app-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem clamp(1rem,3vw,2.5rem);background:#f8fcff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:1rem}.brand img{width:72px;height:52px;object-fit:contain}.eyebrow{margin:0;color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em}h1{margin:.1rem 0 0;font-size:clamp(1.45rem,3vw,2.35rem)}.status{font-size:.95rem;color:var(--muted);text-align:right}.top-nav{display:flex;gap:.5rem;align-items:center}.top-nav a{padding:.65rem .9rem;border-radius:999px;text-decoration:none;color:#123447;background:var(--soft);font-weight:700}.top-nav a[aria-current="page"]{background:var(--primary);color:white}
.layout{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:1rem;padding:1rem clamp(1rem,3vw,2.5rem)}.single-layout{padding:1rem clamp(1rem,3vw,2.5rem)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:1rem}.overview-panel{grid-column:1/-1}h2{margin:0 0 .75rem;font-size:1.25rem}.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.8rem}.subline{display:block;color:var(--muted);font-size:.95rem}.input-label{display:block;color:var(--muted);margin-bottom:.35rem}.search-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;font-size:1.08rem;background:#fbfdff}.search-input:focus{outline:3px solid rgba(15,95,122,.14);border-color:var(--primary)}
button,.secondary{border:0;border-radius:12px;padding:.72rem .95rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.secondary{background:var(--soft);color:#123447}.secondary:hover{background:#ddeef7}.quick-info{margin-top:.8rem;padding:.75rem .85rem;border-radius:12px;background:#f6fbff;color:var(--muted);border:1px solid var(--line)}
.qr-panel{align-self:start}.qr-box{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);background:#f6fbff;border-radius:16px;min-height:260px;padding:1rem}.qr-box img{width:min(230px,100%);height:auto;image-rendering:pixelated}.hint{color:var(--muted);line-height:1.45}.link{display:block;word-break:break-all;color:var(--primary);font-weight:700}
.song-card{display:grid;grid-template-columns:minmax(130px,170px) 1fr;gap:1rem;margin-top:1rem}.cover-wrap{border:1px dashed var(--line);border-radius:16px;min-height:160px;display:flex;align-items:center;justify-content:center;background:#f6fbff;overflow:hidden;position:relative}.cover-wrap-small{width:170px;max-width:100%;height:170px;min-height:0}.cover-wrap img{width:100%;height:100%;object-fit:contain}.cover-placeholder{position:absolute;color:var(--muted);text-align:center;padding:1rem}.cover-wrap img:not([hidden]) + .cover-placeholder{display:none}.details{display:grid;gap:.65rem;margin:0}.details div{border-bottom:1px solid var(--line);padding-bottom:.65rem}dt{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.15rem}dd{margin:0;font-size:1.18rem;font-weight:700}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem}.song-tile{border:1px solid var(--line);background:#fbfdff;border-radius:14px;padding:.8rem;text-align:left;cursor:pointer;display:grid;gap:.45rem;min-height:150px}.song-tile:hover{background:#f3fbff;transform:translateY(-1px)}.song-tile .tile-id{font-weight:800;color:var(--primary)}.song-tile .tile-title{font-size:1.03rem;font-weight:800}.song-tile .tile-meta{color:var(--muted);font-size:.92rem}.song-tile img{width:60px;height:60px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#f7fbff;justify-self:end}
.table-wrap{max-height:62vh;overflow:auto;border:1px solid var(--line);border-radius:14px;margin-top:1rem}.table-wrap-large{max-height:calc(100vh - 260px)}table{width:100%;border-collapse:collapse;background:white}th,td{padding:.72rem .85rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{position:sticky;top:0;background:#f4f9fd;z-index:1}.sortable-table th button{border:0;background:transparent;color:var(--ink);font:inherit;font-weight:800;padding:0;cursor:pointer}.sortable-table th button::after{content:' ↕';color:var(--muted);font-size:.85em}.sortable-table th button[data-active="asc"]::after{content:' ↑';color:var(--primary)}.sortable-table th button[data-active="desc"]::after{content:' ↓';color:var(--primary)}tbody tr{cursor:pointer}tbody tr:hover{background:#f3fbff}.id-cell{font-weight:700;color:var(--primary)}.cover-thumb{width:52px;height:52px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#f7fbff}footer{padding:1rem clamp(1rem,3vw,2.5rem);color:var(--muted);font-size:.9rem}
@media(max-width:850px){.app-header{position:static;align-items:flex-start;flex-direction:column}.layout{grid-template-columns:1fr}.song-card{grid-template-columns:1fr}.cover-wrap-small{width:150px;height:150px}.status{text-align:left}.brand img{width:56px}.section-title{flex-direction:column}.secondary{width:100%}.qr-panel{display:none}.top-nav{width:100%;flex-wrap:wrap}.top-nav a{flex:1;text-align:center;justify-content:center}.table-wrap{max-height:none}th,td{padding:.62rem .65rem}.cards{grid-template-columns:1fr}}

/* Version 6: Smartphone-Optimierung */
@media(max-width:700px){
  html{font-size:16px;-webkit-text-size-adjust:100%}
  body{background:#f3f8fc}
  .app-header{padding:.75rem .85rem;gap:.75rem;background:#ffffff}
  .brand{gap:.65rem;width:100%}
  .brand img{width:44px;height:38px}
  .eyebrow{font-size:.72rem;letter-spacing:.06em}
  h1{font-size:1.28rem;line-height:1.15}
  .status{font-size:.85rem}
  .top-nav{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;width:100%}
  .top-nav a{border-radius:12px;padding:.7rem .55rem;font-size:.95rem;min-height:44px}
  .layout,.single-layout{padding:.75rem;display:block}
  .panel{border-radius:14px;padding:.85rem;margin-bottom:.75rem;box-shadow:0 8px 22px rgba(20,42,68,.08)}
  .section-title{gap:.6rem;margin-bottom:.7rem}
  .section-title h2,h2{font-size:1.08rem;margin-bottom:.25rem}
  .search-input{font-size:16px;min-height:46px;padding:.78rem .85rem;border-radius:11px}
  button,.secondary{min-height:44px;border-radius:11px;padding:.68rem .75rem;font-size:.95rem}
  .quick-info{margin-top:.65rem}
  .song-card{display:block;margin-top:.8rem}
  .cover-wrap-small{width:112px;height:112px;min-height:112px;margin:0 auto .8rem}
  .details{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  .details div{display:grid;grid-template-columns:42% 58%;gap:.6rem;padding:.65rem .7rem;border-bottom:1px solid var(--line)}
  .details div:last-child{border-bottom:0}
  dt{font-size:.72rem;letter-spacing:.04em;margin:0;align-self:center}
  dd{font-size:.98rem;line-height:1.25;word-break:break-word}
  footer{padding:.75rem;font-size:.8rem}

  .table-wrap,.table-wrap-large{max-height:none;overflow:visible;border:0;border-radius:0;margin-top:.75rem}
  table,thead,tbody,tr,th,td{display:block;width:100%}
  thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  tbody{display:grid;gap:.65rem}
  tbody tr{background:#fff;border:1px solid var(--line);border-radius:13px;padding:.62rem .7rem;box-shadow:0 6px 16px rgba(20,42,68,.06);cursor:pointer}
  tbody tr:hover{background:#fff}
  th,td{border-bottom:0;padding:0;text-align:left}
  td{display:grid;grid-template-columns:38% 62%;gap:.55rem;align-items:start;padding:.28rem 0;font-size:.92rem;line-height:1.25;word-break:break-word}
  td::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.035em}
  .title-cell{font-weight:800;font-size:1rem;color:var(--ink)}
  .id-cell{font-weight:800;color:var(--primary)}
  .cover-thumb{width:46px;height:46px}
  td[data-label="Bild"]{grid-template-columns:38% 62%;align-items:center}
}

@media(max-width:390px){
  .app-header{padding:.65rem}
  .layout,.single-layout{padding:.6rem}
  .panel{padding:.75rem}
  .details div,td{grid-template-columns:44% 56%}
  .top-nav a{font-size:.9rem}
}


/* Version 7: Korrektur Smartphone-Layout und Vermeidung horizontaler Überläufe */
html,body{width:100%;max-width:100%;overflow-x:hidden}
[hidden]{display:none!important}
.app-header,.layout,.single-layout,.panel,.table-wrap,.search-panel,.overview-panel{min-width:0;max-width:100%}
.section-title{flex-wrap:wrap;min-width:0}.section-title>*{min-width:0}.secondary{max-width:100%;white-space:normal;text-align:center}.status{display:none}
.search-input{min-width:0}.details dd,.details dt,.title-cell,td{overflow-wrap:anywhere}

@media(max-width:900px){
  html{font-size:16px;-webkit-text-size-adjust:100%}
  body{background:#f3f8fc}
  .app-header{position:static;display:block;padding:.7rem .75rem;background:#fff;border-bottom:1px solid var(--line)}
  .brand{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);gap:.65rem;align-items:center;margin-bottom:.65rem}
  .brand img{width:44px;height:38px}.eyebrow{font-size:.72rem;letter-spacing:.055em}h1{font-size:1.25rem;line-height:1.12}
  .top-nav{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;width:100%}.top-nav a{min-width:0;min-height:44px;border-radius:13px;padding:.68rem .45rem;font-size:.95rem;justify-content:center;text-align:center}
  .layout,.single-layout{display:block;padding:.65rem;width:100%;max-width:100%}
  .panel{width:100%;padding:.8rem;border-radius:14px;margin:0 0 .7rem 0;box-shadow:0 8px 20px rgba(20,42,68,.08)}
  .qr-panel{display:none!important}.overview-panel{grid-column:auto}.section-title{display:block;margin-bottom:.65rem}.section-title .secondary{display:flex;width:100%;margin-top:.55rem}
  .section-title h2,h2{font-size:1.08rem;margin:0 0 .35rem}.subline{font-size:.88rem}.input-label{font-size:.92rem;line-height:1.3}
  .search-input{width:100%;max-width:100%;height:46px;font-size:16px;padding:.72rem .8rem;border-radius:11px}
  button,.secondary{min-height:44px;border-radius:11px;padding:.65rem .75rem;font-size:.94rem}
  .quick-info{margin-top:.6rem;padding:.65rem .7rem;font-size:.9rem}
  .song-card{display:block;width:100%;margin-top:.75rem}.cover-wrap-small{width:104px;height:104px;min-height:104px;margin:0 0 .7rem 0}
  .details{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.details div{display:grid;grid-template-columns:minmax(92px,38%) minmax(0,1fr);gap:.55rem;padding:.58rem .65rem;border-bottom:1px solid var(--line)}.details div:last-child{border-bottom:0}dt{font-size:.72rem;margin:0;align-self:start}dd{font-size:.98rem;line-height:1.25}
  .table-wrap,.table-wrap-large{width:100%;max-height:none;overflow:visible;border:0;border-radius:0;margin-top:.7rem}table,thead,tbody,tr,th,td{display:block;width:100%}thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}tbody{display:grid;gap:.62rem}tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:13px;padding:.62rem .68rem;box-shadow:0 6px 14px rgba(20,42,68,.06)}th,td{border:0;padding:0}td{display:grid;grid-template-columns:minmax(88px,36%) minmax(0,1fr);gap:.55rem;align-items:start;padding:.25rem 0;font-size:.92rem;line-height:1.25}td::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em}.title-cell{font-weight:800;font-size:1rem}.cover-thumb{width:44px;height:44px}
}
@media(max-width:390px){.layout,.single-layout{padding:.5rem}.panel{padding:.68rem}.details div,td{grid-template-columns:minmax(86px,42%) minmax(0,1fr)}.top-nav a{font-size:.9rem}}

/* Version 8: mobile-first Stabilisierung gegen horizontales Überlaufen */
:root { --page-pad: clamp(.55rem, 3vw, 1rem); }
html, body { margin:0; width:100%; max-width:100%; overflow-x:hidden; }
body { min-width:0; }
* { min-width:0; }
img, svg, video, canvas { max-width:100%; height:auto; }
[hidden] { display:none !important; }

.app-header {
  width:100%;
  max-width:100%;
  display:block;
  padding:.7rem var(--page-pad);
  position:static;
  overflow:hidden;
}
.brand {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:.65rem;
  width:100%;
  margin-bottom:.7rem;
}
.brand img { width:44px; height:38px; object-fit:contain; }
.brand h1, .brand .eyebrow { white-space:normal; overflow-wrap:anywhere; }
.top-nav {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.45rem;
  width:100%;
}
.top-nav a { width:100%; min-height:44px; padding:.7rem .45rem; justify-content:center; text-align:center; white-space:normal; }
.status { display:none !important; }

.layout, .single-layout {
  display:block;
  width:100%;
  max-width:100%;
  padding:var(--page-pad);
  overflow:hidden;
}
.panel {
  width:100%;
  max-width:100%;
  margin:0 0 .75rem 0;
  padding:.85rem;
  border-radius:14px;
  overflow:hidden;
}
.qr-panel { display:none !important; }
.section-title { display:block; width:100%; }
.section-title .secondary, .section-title button.secondary { width:100%; margin-top:.55rem; }
.search-panel .section-title button.secondary { display:none; }
.input-label { display:block; max-width:100%; line-height:1.3; }
.search-input { width:100%; max-width:100%; height:46px; font-size:16px; padding:.72rem .85rem; }
.quick-info { display:none !important; }

.song-card { display:block; width:100%; max-width:100%; margin-top:.75rem; overflow:hidden; }
.cover-wrap-small { width:96px; height:96px; min-height:96px; margin:0 0 .7rem 0; }
.details { display:block; width:100%; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.details div { display:grid; grid-template-columns:minmax(86px,38%) minmax(0,1fr); gap:.55rem; padding:.58rem .65rem; border-bottom:1px solid var(--line); }
.details div:last-child { border-bottom:0; }
dt { margin:0; font-size:.72rem; overflow-wrap:anywhere; }
dd { margin:0; font-size:.98rem; line-height:1.25; overflow-wrap:anywhere; word-break:break-word; }

.table-wrap, .table-wrap-large { width:100%; max-width:100%; max-height:none; overflow:visible; border:0; border-radius:0; margin-top:.75rem; }
table, thead, tbody, tr, th, td { display:block; width:100%; max-width:100%; }
thead { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
tbody { display:grid; gap:.62rem; }
tbody tr { display:block; width:100%; background:#fff; border:1px solid var(--line); border-radius:13px; padding:.62rem .68rem; box-shadow:0 6px 14px rgba(20,42,68,.06); }
th, td { border:0; padding:0; }
td { display:grid; grid-template-columns:minmax(84px,36%) minmax(0,1fr); gap:.55rem; align-items:start; padding:.25rem 0; font-size:.92rem; line-height:1.25; overflow-wrap:anywhere; }
td::before { content:attr(data-label); font-weight:700; color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; }
.cover-thumb { width:44px; height:44px; object-fit:contain; }

@media (min-width: 901px) {
  .app-header { display:flex; justify-content:space-between; align-items:center; padding:1.2rem clamp(1rem,3vw,2.5rem); overflow:visible; }
  .brand { display:flex; width:auto; margin-bottom:0; }
  .brand img { width:72px; height:52px; }
  .top-nav { display:flex; width:auto; }
  .top-nav a { width:auto; min-height:auto; padding:.65rem .9rem; }
  .status { display:block !important; }
  .layout { display:grid; grid-template-columns:minmax(260px,320px) 1fr; gap:1rem; padding:1rem clamp(1rem,3vw,2.5rem); overflow:visible; }
  .single-layout { padding:1rem clamp(1rem,3vw,2.5rem); overflow:visible; }
  .panel { padding:1rem; border-radius:18px; overflow:visible; }
  .qr-panel { display:block !important; }
  .section-title { display:flex; }
  .section-title .secondary, .section-title button.secondary { width:auto; margin-top:0; }
  .search-panel .section-title button.secondary { display:inline-flex; }
  .song-card { display:grid; grid-template-columns:minmax(130px,170px) 1fr; gap:1rem; overflow:visible; }
  .cover-wrap-small { width:170px; height:170px; min-height:0; }
  .details { display:grid; gap:.65rem; border:0; border-radius:0; overflow:visible; }
  .details div { display:block; padding-bottom:.65rem; border-bottom:1px solid var(--line); }
  dt { font-size:.82rem; }
  dd { font-size:1.18rem; }
  .table-wrap { max-height:62vh; overflow:auto; border:1px solid var(--line); border-radius:14px; }
  .table-wrap-large { max-height:calc(100vh - 260px); overflow:auto; }
  table { display:table; width:100%; border-collapse:collapse; }
  thead { display:table-header-group; position:static; width:auto; height:auto; overflow:visible; }
  tbody { display:table-row-group; }
  tr { display:table-row; }
  th, td { display:table-cell; width:auto; padding:.72rem .85rem; border-bottom:1px solid var(--line); }
  th { position:sticky; top:0; }
  td::before { content:none; }
}

@media (max-width:390px) {
  :root { --page-pad:.5rem; }
  .panel { padding:.68rem; }
  .details div, td { grid-template-columns:minmax(80px,42%) minmax(0,1fr); }
  .top-nav a { font-size:.9rem; }
}

/* Version 10: Desktop-Layout wieder als klassische Arbeitsansicht */
@media (min-width: 901px) {
  :root { --desktop-pad: clamp(1.25rem, 2.4vw, 2.75rem); }

  body {
    background: linear-gradient(180deg, #eaf5ff 0%, #f7fbff 55%, #eef6fb 100%);
  }

  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem var(--desktop-pad);
    background: rgba(248,252,255,.96);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .brand {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
  }

  .brand img { width:72px; height:52px; }
  h1 { font-size: clamp(1.65rem, 2.1vw, 2.25rem); }
  .top-nav { gap:.65rem; }
  .top-nav a { min-width: 128px; border-radius: 999px; }

  .layout {
    width: min(100%, 1520px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas:
      "search qr"
      "overview overview";
    gap: 1rem;
    padding: 1rem var(--desktop-pad) 1.5rem;
  }

  .single-layout {
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: 1rem var(--desktop-pad) 1.5rem;
  }

  .search-panel { grid-area: search; }
  .qr-panel { grid-area: qr; align-self: stretch; }
  .overview-panel { grid-area: overview; }

  .panel {
    background: rgba(255,255,255,.98);
    border-radius: 16px;
    border: 1px solid #cfe0ed;
    box-shadow: 0 10px 26px rgba(20,42,68,.10);
  }

  .search-panel {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "input detail";
    gap: .85rem 1rem;
    align-items: start;
  }

  .search-panel .section-title { grid-area: head; margin-bottom: 0; }
  .search-panel .input-label { grid-area: input; margin-bottom: -0.45rem; }
  .search-panel .search-input { grid-area: input; margin-top: 1.65rem; }
  .search-panel .song-card { grid-area: detail; margin-top: 0; }

  .song-card {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: .85rem;
  }

  .cover-wrap-small {
    width: 132px;
    height: 132px;
  }

  .details {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .5rem .9rem;
  }

  .details div { padding-bottom: .5rem; }
  dt { font-size: .74rem; }
  dd { font-size: 1rem; line-height: 1.22; }

  .qr-box { min-height: 190px; }
  .qr-box img { width: 176px; }

  .table-wrap,
  .table-wrap-large {
    max-height: calc(100vh - 310px);
    overflow: auto;
    border-radius: 12px;
  }

  table {
    table-layout: fixed;
    font-size: .95rem;
  }

  th, td {
    padding: .62rem .7rem;
    line-height: 1.25;
  }

  th {
    background: #edf6fb;
    box-shadow: inset 0 -1px 0 var(--line);
  }

  tbody tr:nth-child(even) { background:#fbfdff; }
  tbody tr:hover { background:#edf8ff; }

  .sortable-table th:nth-child(1), .sortable-table td:nth-child(1) { width: 17%; }
  .sortable-table th:nth-child(2), .sortable-table td:nth-child(2) { width: 24%; }
  .sortable-table th:nth-child(3), .sortable-table td:nth-child(3) { width: 7.5%; }
  .sortable-table th:nth-child(4), .sortable-table td:nth-child(4) { width: 13%; }
  .sortable-table th:nth-child(5), .sortable-table td:nth-child(5) { width: 9%; }
  .sortable-table th:nth-child(6), .sortable-table td:nth-child(6) { width: 14%; }
  .sortable-table th:nth-child(7), .sortable-table td:nth-child(7) { width: 7.5%; }
  .sortable-table th:nth-child(8), .sortable-table td:nth-child(8) { width: 8%; text-align:center; }

  .title-cell { font-weight: 700; }
  .cover-thumb { width: 44px; height: 44px; }

  footer {
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: .75rem var(--desktop-pad) 1.25rem;
  }
}

@media (min-width: 901px) and (max-width: 1160px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "search"
      "overview";
  }
  .qr-panel { display:none !important; }
  .search-panel {
    grid-template-columns: minmax(260px, 360px) minmax(0,1fr);
  }
}


/* Version 11: PC-/Tablet-Tabellenansicht repariert.
   Die Kartenansicht gilt nur noch für echte Smartphone-Breiten. */
@media (min-width: 641px) {
  .single-layout,
  .layout {
    overflow: visible !important;
  }

  .table-wrap,
  .table-wrap-large {
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  table.sortable-table {
    display: table !important;
    width: 100% !important;
    min-width: 1080px !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
  }

  table.sortable-table thead {
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  table.sortable-table tbody {
    display: table-row-group !important;
  }

  table.sortable-table tr {
    display: table-row !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
  }

  table.sortable-table th,
  table.sortable-table td {
    display: table-cell !important;
    width: auto !important;
    padding: .68rem .75rem !important;
    border-bottom: 1px solid var(--line) !important;
    vertical-align: middle !important;
    text-align: left !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  table.sortable-table td::before {
    content: none !important;
  }

  table.sortable-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #edf6fb !important;
  }

  table.sortable-table th:nth-child(1), table.sortable-table td:nth-child(1) { min-width: 185px; }
  table.sortable-table th:nth-child(2), table.sortable-table td:nth-child(2) { min-width: 250px; }
  table.sortable-table th:nth-child(3), table.sortable-table td:nth-child(3) { min-width: 80px; }
  table.sortable-table th:nth-child(4), table.sortable-table td:nth-child(4) { min-width: 150px; }
  table.sortable-table th:nth-child(5), table.sortable-table td:nth-child(5) { min-width: 110px; }
  table.sortable-table th:nth-child(6), table.sortable-table td:nth-child(6) { min-width: 170px; }
  table.sortable-table th:nth-child(7), table.sortable-table td:nth-child(7) { min-width: 95px; }
  table.sortable-table th:nth-child(8), table.sortable-table td:nth-child(8) { min-width: 70px; text-align:center !important; }

  .cover-thumb {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 640px) {
  table.sortable-table th:nth-child(8),
  table.sortable-table td:nth-child(8) {
    display: none !important;
  }
}


/* Version 12: Vorhörfunktion und saubere Spaltenbreiten */
.preview-box {
  grid-column: 1 / -1;
  margin-top: .75rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fcff;
}
.preview-title { font-weight: 800; margin-bottom: .55rem; }
.preview-box audio { width: 100%; max-width: 520px; display: block; }
.preview-note { margin-top: .4rem; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.preview-mini {
  min-width: 2.2rem;
  min-height: 2.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.inline-audio { width: 180px; max-width: 100%; height: 34px; }
@media (min-width: 641px) {
  table.sortable-table th:nth-child(9), table.sortable-table td:nth-child(9) { min-width: 130px; text-align:center !important; }
  .table-wrap-large table.sortable-table { min-width: 1230px !important; }
}
@media (max-width: 640px) {
  .preview-box { padding: .75rem; }
  .preview-note { display:none; }
  .inline-audio { width: 100%; }
  table.sortable-table th:nth-child(8), table.sortable-table td:nth-child(8) { display: none !important; }
}

/* Vorhörfunktion nur nach serverseitiger Freigabe anzeigen. */
.audio-disabled .audio-col,
.audio-disabled .preview-box {
  display: none !important;
}

/* Version 15: optionale IP-Information in der Fußzeile */
.ip-info-footer[hidden] { display: none !important; }
.ip-info-footer {
  width: min(100%, 1520px);
  margin: 0 auto;
  padding: .8rem clamp(1rem,3vw,2.5rem) 1.1rem;
  color: var(--muted);
  font-size: .88rem;
}
.ip-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  padding: .65rem .8rem;
}
.ip-info-grid span { white-space: nowrap; }
@media (max-width: 640px) {
  .ip-info-footer { padding: .65rem .5rem .9rem; font-size: .78rem; }
  .ip-info-grid { display: grid; grid-template-columns: 1fr; gap: .3rem; }
  .ip-info-grid span { white-space: normal; overflow-wrap: anywhere; }
}

/* Version 18: Vorhörsteuerung */
.preview-player-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.preview-player-row audio {
  flex: 1 1 320px;
  min-width: 0;
}
.preview-stop {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  min-height: 38px;
  padding: .45rem .95rem;
  font-weight: 800;
  cursor: pointer;
}
.preview-stop:hover { border-color: var(--primary); }
.preview-mini[aria-pressed="true"] { background: #374151; }
@media (max-width: 640px) {
  .preview-player-row { gap: .5rem; }
  .preview-player-row audio { flex-basis: 100%; }
  .preview-stop { width: 100%; }
}