/* Fonts */
@font-face{
  font-family:'DSEG7 Classic';
  font-style:normal;
  font-display:swap;
  font-weight:400;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/dseg7-classic@latest/latin-400-normal.woff2) format('woff2'),
      url(https://cdn.jsdelivr.net/fontsource/fonts/dseg7-classic@latest/latin-400-normal.woff) format('woff');
}

/* Theme tokens */
:root{
  --brand-red:#D21315;
  --on-brand:#fff;
  --text:#111;
  --bg:#fff;
  --surface:#fff;
  --surface-subtle:#f6f6f6;
  --border:#c9c9c9;
  --border-subtle:#e6e6e6;
  --maxw:64rem;
}

/* Base */
*{ box-sizing:border-box; }
html{ color-scheme: light dark; }
body{
  margin:0;
  font-family:"Asap",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus-visible{
  left:0; top:0; width:auto; height:auto; padding:.75rem 1rem;
  background:#0009; color:#fff; z-index:2147483647; border-radius:.5rem;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(210,19,21,1);
  color:var(--on-brand);
  box-shadow:0 1px .5px rgba(0,0,0,.1), 0 6px 20px rgba(0,0,0,.2);
}
.header-inner{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem;
  padding:max(env(safe-area-inset-top), .75rem) max(env(safe-area-inset-right), 1rem) .75rem max(env(safe-area-inset-left), 1rem);
}
.brand{ display:flex; align-items:center; gap:.75rem; min-height:48px; }
.brand__logo{
  width:40px; height:40px; border-radius:.5rem; background:#fff1; padding:.25rem;
  box-shadow:inset 0 0 0 1px #ffffff1f; object-fit:contain; image-rendering:-webkit-optimize-contrast;
}
.brand__title{ margin:0; font-weight:700; font-size:clamp(1.0625rem,2.5vw + .75rem,1.25rem); letter-spacing:.2px; line-height:1.15; }
.brand__subtitle{ margin:0; opacity:.9; font-weight:600; line-height:1.1; font-size:clamp(.8125rem, 1.6vw + .6rem, .9375rem); }
.header-actions{ justify-self:end; display:flex; gap:.5rem; }
.icon-btn{
  -webkit-tap-highlight-color:transparent;
  appearance:none; border:none;
  background:#fff; color:var(--brand-red);
  width:40px; height:40px; border-radius:.6rem;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px #ffffff55, 0 1px 2px rgba(0,0,0,.08);
}
.icon-btn:active{ transform:translateY(1px); }
.icon-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.icon-btn svg{ width:22px; height:22px; display:block; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* Layout */
.container{ padding:1rem max(env(safe-area-inset-right), 1rem) 2rem max(env(safe-area-inset-left), 1rem); }
.teams{ display:grid; gap:.75rem; grid-template-columns:1fr; }

/* Team card */
.team-card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:0;
  padding:.875rem 1rem; box-shadow:none; overflow:hidden;
  display:grid; grid-template-columns:1fr 48px; column-gap:.75rem; align-items:center;
}
.team-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--brand-red); }
.team-card__body{ min-width:0; }
.team-card__class{ margin:0 0 .15rem; font-weight:700; font-size:1.15rem; letter-spacing:.2px; }
.team-card__name{ margin:0 0 .4rem; font-weight:600; font-size:1rem; }
.team-card__meta{ margin:0; font-weight:500; font-size:.95rem; }

/* Team actions (right column) */
.team-actions{ display:flex; flex-direction:column; gap:.4rem; align-items:stretch; }
.team-action{
  -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:36px;
  border:1px solid var(--brand-red);
  background:var(--brand-red); color:#fff; border-radius:0; text-decoration:none;
}
.team-action svg{ width:18px; height:18px; display:block; }

/* Last match */
.team-card__last{
  grid-column:1 / -1; background:var(--surface-subtle); border-top:1px solid var(--border-subtle);
  margin:.75rem -1rem 0; padding:.6rem 1rem;
}
.team-card__last .last-label{
  margin:0 0 .35rem; font-weight:700; font-size:.85rem; letter-spacing:.2px; text-transform:uppercase;
  text-align:center;
}
.score-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; }
.score-row .team{ white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; hyphens:auto; font-weight:600; line-height:1.2; }
.score-row .home{ text-align:right; }
.score-row .away{ text-align:left; }
.score-row .score{
  font-family:'DSEG7 Classic', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight:400; font-size:2rem; line-height:1; letter-spacing:.05em;
  padding:.1rem .25rem; text-align:center; background:transparent; color:currentColor; border:none; border-radius:0; min-width:0; box-shadow:none;
}
.score-row .score.win{ color:#1ec268; }
.score-row .score.loss{ color:#ff5252; }
.score-row .score.draw{ color:#9aa0a6; }

/* Next match */
.team-card__next{
  grid-column:1 / -1; background:var(--surface-subtle); border-top:1px solid var(--border-subtle);
  margin:.5rem -1rem 0; padding:.45rem 1rem;
}
.team-card__next .next-date{ margin:0 0 .25rem; text-align:center; font-weight:700; font-size:.9rem; letter-spacing:.2px; }
.next-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; }
.next-row .home{ text-align:right; font-weight:600; }
.next-row .away{ text-align:left; font-weight:600; }
.next-row .colon{ font-family:'DSEG7 Classic', ui-monospace, monospace; font-size:1.6rem; line-height:1; text-align:center; }

/* All matches (collapsible table) */
.team-card__all{ grid-column:1 / -1; background:var(--surface-subtle); border-top:1px solid var(--border-subtle); margin:.5rem -1rem 0; }
.team-card__all summary{ list-style:none; cursor:pointer; padding:.6rem 1rem; font-weight:700; letter-spacing:.2px; }
.team-card__all summary::-webkit-details-marker{ display:none; }
.team-card__all .all-wrapper{ padding:.25rem 1rem 1rem; overflow:visible; max-height:none; }

/* Table sizing */
table.games{ width:100%; border-collapse:collapse; font-size:.875rem; table-layout:fixed; }
table.games thead th{ text-align:left; font-weight:700; padding:.35rem .5rem; border-bottom:1px solid var(--border); font-size:.82rem; }
table.games tbody td{ padding:.4rem .5rem; border-bottom:1px solid var(--border-subtle); vertical-align:top; }
table.games td.result{ text-align:center; font-family:'DSEG7 Classic', ui-monospace, monospace; font-size:1rem; }
table.games td.result.win{ color:#1ec268; }
table.games td.result.loss{ color:#ff5252; }
table.games td.result.draw{ color:#9aa0a6; }
table.games tr.date-line td{ font-size:.8rem; color:#666; text-align:center; padding:.5rem .5rem .25rem; border-bottom:none; }
.games td.home, .games td.away{ overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.games col.col-res{ width:64px; }
@media (max-width:480px){ .games col.col-res{ width:56px; } }
@media (prefers-color-scheme:dark){ table.games tr.date-line td{ color:#b5b5b5; } }
/* Clickable rows */
.games tbody tr.data-row{ cursor:pointer; }
.games tbody tr.data-row:hover td{ background:rgba(0,0,0,.03); }
@media (prefers-color-scheme:dark){ .games tbody tr.data-row:hover td{ background:rgba(255,255,255,.06); } }
.games td a.cell-link{ display:block; color:inherit; text-decoration:none; }

/* Drawers (Sortierung & Benachrichtigungen) */
.drawer{ position:fixed; inset:0; display:none; z-index:1200; }
.drawer.open{ display:block; }
.drawer .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(2px); }
.drawer .panel{
  position:absolute; left:0; right:0; top:64px; background:var(--surface);
  border-top:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.2);
  max-height:calc(100vh - 80px); overflow:auto; padding:.75rem 1rem 1rem;
  -webkit-overflow-scrolling:touch;
}
.drawer-header{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:0 0 .25rem; }
.drawer-header h3{ margin:.25rem 0; font-size:1.05rem; }
.drawer-close{
  appearance:none; border:1px solid var(--border); background:var(--surface); color:inherit;
  width:36px; height:36px; border-radius:.5rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem;
}

/* Sortierliste */
.sort-list{ list-style:none; margin:.25rem 0 0; padding:0; user-select:none; }
.sort-item{
  display:grid; grid-template-columns:32px 1fr 32px; align-items:flex-start; gap:.5rem;
  padding:.5rem .25rem; border-bottom:1px solid var(--border-subtle); touch-action:pan-y;
}
.sort-item__info{
  display:flex; flex-direction:column; gap:.15rem; line-height:1.2;
}
.sort-item__type{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:#666; font-weight:600; }
.sort-item__team{ font-size:1rem; font-weight:700; }
.sort-item__league{ font-size:.8rem; color:#555; }
.sort-item__type:empty, .sort-item__league:empty{ display:none; }
.sort-item.hidden .sort-item__team{ text-decoration:line-through; }
.sort-item.hidden .sort-item__info{ opacity:.6; }
.sort-item.dragging{ background:var(--surface-subtle); }

/* Handle / Eye buttons */
.handle, .eye{
  -webkit-tap-highlight-color:transparent;
  appearance:none; border:1px solid var(--border);
  background:#fff; color:var(--brand-red);
  width:32px; height:32px; border-radius:.5rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.handle svg, .eye svg{
  width:18px; height:18px; display:block;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none;
}

/* Only one eye visible depending on state */
.sort-list .eye .off{ display:none !important; }
.sort-item.hidden .eye .on{ display:none !important; }
.sort-item.hidden .eye .off{ display:inline !important; }
/* Ensure paths don't fill black on some browsers */
.sort-list .handle svg *, .sort-list .eye svg *{ fill:none; stroke:currentColor; }

.drawer .drawer-content{ display:grid; gap:.75rem; }
.drawer .toggle{ display:flex; align-items:center; gap:.5rem; }
.drawer .toggle input{ inline-size:1.25rem; block-size:1.25rem; }
.drawer .note{ margin:.25rem 0 0; font-size:.9rem; color:#555; }
.drawer .note.small{ font-size:.8rem; }
.drawer .note.note--subtle{ margin-top:.5rem; }
.drawer .note.note--spaced{ margin-top:1rem; }
#team-selector{ margin-top:1rem; }
@media (prefers-color-scheme:dark){
  .drawer .note{ color:#bbb; }
  .handle, .eye{ background:#fff; color:var(--brand-red); }
  .handle svg, .eye svg{ stroke:currentColor; fill:none; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{ --bg:#0c0c0c; --text:#f1f1f1; --surface:#111; --surface-subtle:#161616; --border:#2f2f2f; --border-subtle:#2a2a2a; }
  .site-header{ box-shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.6); }
  .brand__logo{ box-shadow:inset 0 0 0 1px #ffffff2a; }
}

/* Focus */
:focus-visible{ outline:3px solid rgba(255,255,255,.85); outline-offset:2px; }
main:focus{ outline:none; }

/* Layout tweaks */
@media (max-width:480px){
  .container{ padding:.75rem max(env(safe-area-inset-right), .5rem) 1.5rem max(env(safe-area-inset-left), .5rem); }
}
@media (min-width:768px){
  .teams{ grid-template-columns:repeat(2, 1fr); }
  .score-row .score{ font-size:2.4rem; }
}

/* Footer */
.site-footer{ background:var(--surface-subtle); border-top:1px solid var(--border-subtle); }
.site-footer .footer-inner{ max-width:var(--maxw); margin:0 auto; padding:1rem max(env(safe-area-inset-right), 1rem) 2rem max(env(safe-area-inset-left), 1rem); }
.footer-note{ margin:0; font-size:.8125rem; line-height:1.4; color:#555; }
@media (prefers-color-scheme:dark){ .footer-note{ color:#bbb; } }

/* --- Pull to refresh (overlay, kein Layout-Shift) --- */
.ptr{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 1500;               /* über dem Header */
  display: flex;
  align-items: center;
  justify-content: center;
  /* standardmäßig oberhalb des Viewports „versteckt“ */
  transform: translateY(-56px);
  transition: transform 200ms ease;
  pointer-events: none;         /* nie anklickbar */
  background: transparent;
}
.ptr__spinner{
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--brand-red);
  border-radius: 50%;
  animation: ptr-spin 1s linear infinite;
  opacity: .8;
}
.ptr[data-state="pull"] .ptr__spinner{ animation-play-state: paused; opacity: .6; }
.ptr.ready .ptr__spinner{ border-top-color: var(--brand-red); opacity: .9; }
.ptr[data-state="refresh"] .ptr__spinner{ animation-play-state: running; opacity: 1; }

@keyframes ptr-spin { to { transform: rotate(360deg); } }

@media (prefers-color-scheme: dark){
  .ptr__spinner{ border-color: var(--border); border-top-color: var(--brand-red); }
}

/* Optional – verhindert Bounce/„Gummi“-Scroll etwas */
html, body{ overscroll-behavior-y: contain; }