:root {
  --navy: #003777;
  --navy-dark: #00285a;
  --blue: #2ea3f2;
  --blue-soft: #e8f4fd;
  --ink: #1f2a37;
  --muted: #5b6878;
  --line: #d9e2ec;
  --bg: #f5f8fb;
  --red: #e2001a;
  --radius: 14px;
  --font-head: 'Raleway', Helvetica, Arial, sans-serif;
  --font-body: 'Poppins', Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Kopfzeile */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.brand__dot {
  color: var(--blue);
}
.status {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 60%, #0a4a96 100%);
  color: #fff;
  padding-block: 48px 72px;
}
.hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 12px;
}
.lead {
  max-width: 62ch;
  margin: 0;
  color: #d6e4f5;
}

/* Karten */
main {
  margin-top: -40px;
  padding-bottom: 48px;
}
.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    inset 0 6px 0 var(--team, var(--blue)),
    0 6px 24px rgba(0, 55, 119, 0.08);
}
.card__name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card__name::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--team, var(--blue));
}
.card__name input {
  min-width: 0;
  flex: 1;
  font: 700 1.25rem var(--font-head);
  color: var(--navy);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 8px;
  background: transparent;
}
.card__name input:hover {
  border-color: var(--line);
}
.card__name input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--blue-soft);
}

/* Kreis */
.dial {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}
.dial svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dial__bg {
  fill: #fff;
}
.dial__q {
  fill: var(--blue-soft);
  transition: fill 0.2s;
}
.dial__q:nth-of-type(odd) {
  fill: #f2f8fe;
}
.dial__q.is-active {
  fill: rgba(46, 163, 242, 0.32);
  fill: color-mix(in srgb, var(--team, var(--blue)) 35%, #fff);
}
.dial__axis {
  stroke: #fff;
  stroke-width: 2;
}
.dial__ring {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
}
.dial__center {
  fill: none;
  stroke: var(--navy);
  stroke-opacity: 0.25;
  stroke-dasharray: 2 2;
}
.dial__label {
  font: 600 11px var(--font-head);
  fill: var(--navy);
  text-anchor: middle;
  pointer-events: none;
}

.dot {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--red);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: grab;
  padding: 0;
  transition: transform 0.15s;
}
.dot:hover {
  transform: scale(1.12);
}
.dot:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.dial.is-dragging .dot {
  cursor: grabbing;
  transform: scale(1.18);
}

/* Fußzeile der Karte */
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.phase {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.reset {
  flex: none;
}
.phase__name {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
}
.phase__hint {
  font-size: 0.82rem;
  color: var(--muted);
}
.reset {
  font: 500 0.85rem var(--font-body);
  color: var(--navy);
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.reset:hover,
.reset:focus-visible {
  background: var(--navy);
  color: #fff;
  outline: none;
}

.footer {
  background: var(--navy);
  color: #c7d6ea;
  font-size: 0.85rem;
  padding-block: 20px;
  text-align: center;
}