/* ========================================================= */
/*  BASE + GLOBAL LAYOUT                                     */
/* ========================================================= */
html, body {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  margin: 0;
  padding: 0;
}

.layout {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-1);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: var(--grid-gutter);
}

/* Headings */

h1, .h1 {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-1);
}

h2, .h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-1);
}

h3, .h3 {
  font-size: var(--font-size-md);
  margin: 0 0 var(--space-1);
}

/* Grid helpers */

.col-span-12 { grid-column: span 12; }

/* ======================================= */
/* LOGIN PAGE                               */
/* ======================================= */

  .login-body {
    background: var(--bg-page);
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  /* --------------------------------------- */
  /* Logo oben (100px Abstand)               */
  /* --------------------------------------- */

  .logo {
    height: 5vh;
    width: auto;

    margin-top: 100px;
    margin-bottom: 60px;
  }

  /* --------------------------------------- */
  /* Der mittlere Wrapper                    */
  /* sitzt zwischen Logo und Footer          */
  /* --------------------------------------- */

  .login-wrapper {
    width: 90%;
    max-width: 480px;

    /* 5% Abstand links/rechts bei schmalen Fenstern */
    padding: 0 5%;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* Platz abhängig vom Viewport: */
    flex: 1;                         /* nimmt den restlichen Platz ein */
    justify-content: center;         /* vertikale Zentrierung */
  }

  /* --------------------------------------- */
  /* Inhalte im Wrapper                      */
  /* --------------------------------------- */

  .login-title {
    font-family: var(--font-family-bold);
    font-size: 40px;
    margin-bottom: 20px;
  }

  .login-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 30px;
  }

  .login-input {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    box-sizing: border-box;
    margin-bottom: 20px;
  }

  .login-button {
    width: 100%;
    padding: 18px;
    font-size: 20px;
    font-family: var(--font-family-bold);
    background: var(--color-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .login-button:hover {
    background: var(--color-blue-dark);
  }

  .login-error {
    color: var(--state-wrong);
    margin-top: 12px;
    font-size: 16px;
  }

  /* --------------------------------------- */
  /* Footer (100px Abstand unten)            */
  /* --------------------------------------- */

  .login-footer-link {
    margin-bottom: 100px;
    margin-top: 40px;
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
  }

  .login-footer-link:hover {
    text-decoration: underline;
  }

/* ========================================================= */
/* HEADER                                                     */
/* ========================================================= */

.header {
  grid-column: 1 / -1;
  margin-bottom: var(--space-2);
}

.header-grid {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
  column-gap: var(--grid-gutter);
  align-items: flex-start;
}

.header-title {
  align-self: flex-start;
}

.header-scoreboard-wrapper {
  justify-self: center;
}

.header-points-wrapper {
  justify-self: flex-end;
  text-align: left;
}

.points-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-xs);
}

.points-inline label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.points-inline input {
  width: 60px;
}

.mode-label {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  text-align: right;
}

/* SCOREBOARD */

.scoreboard {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 60px;
  row-gap: 4px;
  font-size: var(--font-size-sm);
}

.scoreboard p {
  margin: 0;
}

.scoreboard-item {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-md);
}

.scoreboard-points {
  font-family: var(--font-family-bold);
}

/* Modus-Benennung ausblenden */
.mode-label {
  display: none;
}

/* ========================================================= */
/* TABS + TIMER gemeinsame Zeile                             */
/* ========================================================= */

.tabs-timer-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 9fr 3fr;  /* 9/12 Tabs + 3/12 Timer */
  align-items: start;
  margin-bottom: var(--space-2);
  column-gap: var(--grid-gutter);
}

/* ========================================================= */
/* TABS (linke Hälfte der Tabs-Timer-Zeile)                  */
/* ========================================================= */

.tabs-wide {
  display: flex;
  gap: var(--space-1);
}

/* Jeder Tab gleich breit über die 6/12-Spalte verteilt */
.tab {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-family-bold);
  font-size: var(--font-size-md);
  border: none;
}

/* Zustände */
.tab.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
}

.tab.inactive {
  background: var(--tab-inactive-bg);
  color: var(--tab-inactive-text);
}

.tab.inactive:hover {
  background: var(--btn-bg-hover);
  color: var(--color-bg-light);
}

/* ========================================================= */
/* TIMERBEREICH (rechte Seite)                               */
/* ========================================================= */

.timer-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* --------------------------------------------------------- */
/* OBERSTE ZEILE (3 Spalten)                                 */
/* --------------------------------------------------------- */

.timer-row-top {
  display: flex;
  align-items: stretch;
  justify-content: right;
  gap: var(--space-1);
  height: 56px;
  width: 100%;
  margin-bottom: var(--space-1);
}

.timer-btn {
  height: 56px !important;
  padding: 0 16px;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: right;
}

/* Countdown */
.timer-count {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-lg);
  line-height: 56px;
  min-width: 48px;
  text-align: right;
  margin-right: var(--space-1);
}

/* Select */
.timer-select {
  height: 56px;
  padding: 0 10px;
  font-size: var(--font-size-md);
}


/* --------------------------------------------------------- */
/*  2 Buttons 50%.                                           */
/* --------------------------------------------------------- */
.timer-two-buttons {
  display: flex;
  gap: var(--space-1);
  width: 100%;
}

/* Nur Layout, Look kommt aus .btn */
.timer-half-button {
  flex: 1;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------- */
/* UNTEN (volle Breite)                                      */
/* --------------------------------------------------------- */

.timer-block-button {
  width: 100%;
  max-width: 100%;
  height: 56px;
  font-size: var(--font-size-md);
  box-sizing: border-box;
  margin-bottom: var(--space-1);
}

/* ========================================================= */
/* PANELS                                                     */
/* ========================================================= */

.panel {
  grid-column: 1 / -1;
  margin-bottom: var(--space-3);
}

/* BUZZER PANEL */

.buzzer-btn-neutral {
  background: var(--color-gray) !important;
  color: var(--color-navy) !important;
}

.buzzer-header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-lg);
}

.buzzer-info-main {
  font-family: var(--font-family-bold);
}

.buzzer-info-ghost {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  opacity: 0.25;
}

.buzzer-buttons-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--grid-gutter);
}

.buzzer-hidden {
  display: none;
}

/* ========================================================= */
/* TEXT-ANTWORT-KARTE (GM Panel)                             */
/* ========================================================= */

.text-answer {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-bottom: var(--space-2);

  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Header: Teamname + Buttons in einer Reihe */
.ta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Teamname */
.text-answer .ta-header strong {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-default);
}

/* Antworttext */
.text-answer .ta-text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  margin: 0;
  padding: 0;
}

/* Buttons */
.text-answer .ta-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.text-answer .ta-actions .btn {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-xs);
  padding: 10px 20px;
  height: 43px;
  display: flex;
  align-items: center;
}

/* Farben der Buttons */
.text-answer .text-correct {
  background: var(--state-correct);
  color: var(--color-bg-light);
}

.text-answer .text-wrong {
  background: var(--state-wrong);
  color: var(--color-bg-light);
}

.text-answer .text-free,
.text-answer .text-unlock {
  background: var(--tab-inactive-bg);
  color: var(--text-primary);
}

.text-answer .text-free:hover,
.text-answer .text-unlock:hover {
  background: var(--btn-bg-hover);
  color: var(--color-bg-light);
}


/* ABGEGEBENE ANTWORT (final) */
.text-answer.answered {
  border: 2px solid var(--state-info);
  background: rgba(0, 0, 255, 0.05);        /* 5% Deckkraft */
}


/* ========================================================= */
/* NUMBER MODE – KORREKTE ZAHL HEADER                        */
/* ========================================================= */

.number-correct-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.number-correct-row label {
  display: flex;
  flex-direction: row; /* Beschreibt: Text + Input nebeneinander */
  align-items: center;
  gap: var(--space-2); /* Abstand zwischen Text und Input */
  font-family: var(--font-family-bold);
  font-size: var(--font-size-lg);
}

/* Input an die Typo angepasst */
.number-correct-row input {
  font-size: var(--font-size-lg);
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  width: 140px; /* entspricht deiner Vorlage */
  background: var(--bg-surface);
}


/* =============== */
/* RANKING CARDS   */
/* =============== */

.rank-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);

  padding: 24px 28px;
  margin-bottom: var(--space-1);

  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-page);

  position: relative;
  will-change: transform;
}

/* logged in */
.rank-card-final {
  border: 2px solid var(--state-info);
  background: var(--bg-page);
}

/* Linke Spalte: Rank */
.rank-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 50px;
}

.rank-number {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-bold);
}

.rank-tie-icon {
  font-size: var(--font-size-lg);
  color: var(--state-warning);
  font-family: var(--font-family-bold);
}

/* Mittlere Spalte (Werte) */
.rank-middle {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rank-value-number {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-bold);
}

.rank-distance {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.rank-tie-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-bold);
  color: var(--state-warning);
}

/* Rechte Spalte */
.rank-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 150px;
}

.rank-teamname {
  font-size: var(--font-size-md);
  font-family: var(--font-family-bold);
}



/* ========================================================= */
/* TEAM MANAGEMENT                             */
/* ========================================================= */

.team-management {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  width: 100%;
  max-width: 1500px;
}

.team-management-header,
.team-management-row {
  display: grid;
  grid-template-columns:
    40px    /* delete */
    1fr     /* teamname */
    120px   /* punkte */
    1fr     /* name */
    150px   /* code */
    1fr     /* team url */
    120px;  /* update btn */
  gap: var(--space-3);
  align-items: center;
  width: 100%;
}

/* Überschrift */
.team-management-header span {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Zeilen-Abstand */
.team-management-row {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

/* Inputs */
.team-management-row input {
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  width: 100%;
}

/* URL Text */
.team-management-row .tm-url {
  font-size: var(--font-size-sm);
  color: var(--state-info);
  word-break: break-all;
}

/* Delete Button */
.team-management-delete {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: #D8D8D8;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: bold;
}

.team-management-delete:hover {
  background: #c1c1c1;
}

/* Update */
.team-management-update {
  background: #D8D8D8;
  color: #000;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
}

.team-management-update:hover {
  background: #c1c1c1;
}

/* Add Button */
.team-management-addbtn {
  margin-top: 20px;
  background: #ff7a00;
  color: white;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-size-md);
  margin-left: 0;
}

.team-management-addbtn:hover {
  background: #e96c00;
}




/* TEAM-Seite =====================================================*/
/* ================================================================*/

.team-body {
  background: var(--bg-page);
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-family-base);
}

.team-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Logo oben (analog Login) */
.logo {
  height: 5vh;
  width: auto;
  margin-top: 100px;
  margin-bottom: 80px;
}

/* Hauptbereich */
.team-main {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.team-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ========================================================= */
/* BUZZER                                                    */
/* ========================================================= */

.team-buzzer-button {
  width: min(350px, 60vw);
  height: min(350px, 60vw);
  border-radius: 50%;
  border: none;
  background: var(--color-blue);
  color: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  margin-top: 20px; /* fixer Abstand nach Logo */

  margin-left: auto;
  margin-right: auto;
}

.team-buzzer-button:disabled {
  background: var(--color-gray);
  color: var(--text-primary);
  cursor: default;
}

.team-buzzer-label {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-xl); /* Vorgabe */
}

/* Texte unter dem Buzzer */
.team-buzzer-info {
  margin-top: 40px;
  text-align: center;
}

/* Fontgrößen laut Vorgabe */
.team-status-lg {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-bold);
  margin: 8px 0 0;
}

.team-status-md {
  font-size: var(--font-size-md);
  margin: 0;
}


#buzzerArea.team-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal */
  justify-content: flex-start;
}

/* ========================================================= */
/* TEXT / ZAHLEN                                             */
/* ========================================================= */

/* Zentrierter Input-Bereich */
.team-input-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 300px; /* Abstand unter dem Logo – Vorgabe */
}

/* Eingabefeld (Basis) */
.team-input {
  width: 100%;
  max-width: 750px;

  height: 60px;
  padding: 0 24px;

  font-size: var(--font-size-lg);
  font-family: var(--font-family-base);

  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);

  box-sizing: border-box;
  outline: none;

  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Platzhalter */
.team-input::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

/* Fokus */
.team-input:focus {
  border-color: var(--color-blue);
}

/* Zustand: nutzbar */
.team-input.enabled {
  background: var(--color-white);
}

/* Zustand: gesperrt */
.team-input.disabled {
  background: var(--bg-surface);
}

/* Submit-Button */
.team-submit-button {
  margin-top: 30px;
  padding: 14px 36px;

  font-size: var(--font-size-md);   /* Vorgabe */
  font-family: var(--font-family-bold);

  background: var(--btn-bg);
  color: var(--btn-text);

  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;

  display: block;
  margin-left: auto;
  margin-right: auto;
}

.team-submit-button:hover:not(:disabled) {
  background: var(--color-blue-dark);
}

.team-submit-button:disabled {
  background: var(--color-gray);
  color: var(--text-primary);
  cursor: default;
}

/* Status-Text (Eingabe gesperrt etc.) */
.team-status-message {
  font-size: var(--font-size-md); /* Vorgabe */
  margin-top: 30px;
  text-align: center;
}

/* ========================================================= */
/* TIMER OBEN RECHTS                                         */
/* ========================================================= */

.team-timer {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--state-wrong);
  color: var(--text-inverse);
  padding: 10px 16px;
  border-radius: 3px;
  font-family: var(--font-family-bold);
  font-size: var(--font-size-lg); /* Vorgabe */
  min-width: 48px;
  text-align: center;
  z-index: 10;
}

/* Wenn leer, ausblenden */
.team-timer:empty {
  display: none;
}

/* ========================================================= */
/* FOOTER + LOGOUT                                           */
/* ========================================================= */

.team-footer {
  margin-bottom: 80px;
}

.team-footer-link {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.team-footer-link:hover {
  text-decoration: underline;
}

/* Logout unten rechts */
.logout-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* H1 visuell verstecken, aber für JS/SEO behalten */
.team-title-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* ========================================================= */
/* PRESENTATION PAGE                                         */
/* ========================================================= */

.presentation-body {
  background: var(--bg-page);
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-family-base);
  overflow: hidden;          /* kein Scrollen */
}

.presentation-main {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 40px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;                     
}

/* Logo in der Präsentation */
.presentation-logo {
  margin-top:var(--space-1) !important;
  margin-bottom: 0px !important; 
  height: 48px;
  width: auto;
}

/* TEAM-REIHE (4 Spalten in einer Zeile) */
.presentation-teams-row {
  display: flex;
  flex: 1;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
}

/* Antworttext etwas größer als im Screenshot */
.presentation-team-answer {
  font-size: var(--font-size-lg);    /* vorher md */
  text-align: center;
  max-width: 90%;
  min-height: 1.6em;
  margin-top: 24px;                  /* Abstand zu den Punkten */
}

/* Einzelner Team-Block */
.presentation-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.presentation-team-name {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-lg);
  text-align: center;
}

/* Fläche, die bei Buzzer hervorgehoben wird */
.presentation-team-area {
  flex: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-surface-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  box-sizing: border-box;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Highlight bei Buzz (Farbe: --color-bg-hover, Text: --btn-text) */
.presentation-team-area--highlight {
  background: var(--color-bg-hover);
  color: var(--btn-text);
  animation: presentationBuzz 0.5s ease-out;
}

@keyframes presentationBuzz {
  0%   { transform: scale(1);   }
  40%  { transform: scale(1.03); }
  100% { transform: scale(1);   }
}

.presentation-team-points {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-1);
}

.presentation-team-answer {
  font-size: var(--font-size-lg);
  text-align: center;
  max-width: 90%;
  min-height: 1.3em;
}

.presentation-team-answer--visible {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Unten zentrierter Bereich für Timer / Zahl */
.presentation-bottom-center {
  position: relative;               /* Referenz für absolute Positionierung */
  display: block;
  height: 120px;                    /* feste Höhe – Platz bleibt immer frei */
}

/* Gemeinsamer Badge-Stil: quadratisches Feld, exakt zentriert */
.presentation-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* exakt Mitte des Containers */

  padding: 0 20px;
  width: min(96px);
  height: 96px;
  border-radius: 3px;

  font-family: var(--font-family-bold);
  font-size: var(--font-size-xl);
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  visibility: hidden;               /* unsichtbar, aber im Layout */
}

/* sichtbarer Zustand */
.presentation-badge.is-visible {
  visibility: visible;
}

/* Timer (rot) */
.presentation-badge--timer {
  background: var(--state-wrong);
  color: var(--text-inverse);
}

/* Korrekte Zahl (grün) */
.presentation-badge--number {
  background: var(--state-correct);
  color: var(--text-inverse);
}

/* Footer unter dem Feld */
.presentation-footer {
  margin-top: 12px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}



/* ========================================================= */
/* TEAM-SEITE: MOBILE LAYOUT FÜR BUZZER, TEXT & ZAHL         */
/* ========================================================= */

@media (max-width: 768px) {

  /* Nur horizontales Scrollen verhindern */
  body.team-body {
    overflow-x: hidden;
  }

  /* Logo kleiner, weniger Abstand */
  .team-layout .logo {
    margin-bottom: 16px;
    height: 32px;
  }

  /* Main startet oben, nicht zentriert über die ganze Seite */
  .team-main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  /* ================= BUZZER ================= */

  #buzzerArea.team-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Abstand unter dem Logo, oben nicht “kleben” */
    margin-top: 10vh;
  }

  /* Buzzer mit ca. 5 % Rand links/rechts, möglichst groß */
  .team-buzzer-button {
    width: min(75vw, 60vh);   /* 90vw => 5vw Rand links/rechts */
    height: min(75vw, 60vh);
    margin-top: 0;
    margin-bottom: 0;
  }

  .team-buzzer-label {
    font-size: clamp(22px, 6vw, 30px);
  }

  .team-buzzer-info {
    margin-top: 20px;
    padding: 0 5vw;
    text-align: center;
  }

  .team-status-lg {
    font-size: clamp(18px, 4.8vw, 22px);
  }

  .team-status-md {
    font-size: clamp(16px, 4vw, 20px);
  }

  /* ================= TEXT / ZAHL ================= */

  #textArea.team-section,
  #numberArea.team-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* sitzt etwa im oberen Mitteldrittel */
    margin-top: 15vh;
  }

  .team-input-row {
    width: 100%;
    margin-top: 0;
    padding: 0;              /* Padding nehmen wir raus, Breite steuern wir am Input */
    display: flex;
    justify-content: center;
  }

  /* Exakt ca. 5 % Rand links/rechts */
  .team-input {
    width: 90vw;
    max-width: 90vw;
    height: 64px;
    font-size: clamp(18px, 5vw, 24px);
  }

  .team-submit-button {
    margin-top: 24px;
    padding: 16px 32px;
    font-size: clamp(18px, 4.6vw, 22px);
  }

  .team-status-message {
    margin-top: 20px;
    padding: 0 5vw;
    font-size: clamp(16px, 4vw, 20px);
    text-align: center;
  }

  .team-footer {
    margin-bottom: 16px;
  }
}