@viewport {
  width: device-width;
  zoom: 1.0;
}

.content_wrapper {
  overflow: auto;
}

/* InitDialog position fix */
.ui-dialog[aria-describedby="InitDialog"] {
  position: fixed !important;
  top: 50px !important;
}

body {
  font: 62.5% "Trebuchet MS", sans-serif;
  height: auto;
  overflow: auto;
  margin: 0;
  padding: 10px;
}

#wrapper {
  margin: 0 auto;
  position: relative;
  width: 1024px;
  min-height: 768px;
}

#contentPane {
  width: 1024px;
  min-height: 768px;
  margin-top: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #ecf0f1 100%);
}

#contentPaneTop {
  min-height: 300px;
  padding-bottom: 20px;
}

#contentPaneTopText {
  position: relative;
  left: 49px;
  top: 30px;
  clear: both;
  width: 380px;
  min-height: 200px;
  font-size: 11px;
  color: black;
}

#divGameRules {
  position: relative;
  height: 30px;
  float: left;
}

#divGameOptions {
  position: relative;
  width: 120px;
  float: right;
}

#divProgressInfo {
  position: relative;
  top: 25px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 5px;
}

#divProgressBar {
  position: relative;
  top: 30px;
}

#contentPaneTopButtons {
  position: relative;
  top: 20px;
  margin-top: 20px;
}

#contentPaneTopChart {
  position: absolute;
  left: 480px;
  top: 60px;
  width: 470px;
  min-height: 270px;
}

/* Ergebnisbereich - vereinfachtes Layout */
#contentPaneResults {
  position: relative;
  top: 20px;
  clear: both;
  background: url("../images/result_graphics.jpg") no-repeat left top;
  background-size: 100% auto;       /* Grafik passt sich der Breite an, Hoehe proportional (258/1024) */
  width: 100%;
  height: 0;
  padding-top: 25.2%;               /* Grafikhoehe als Anteil der Breite (Seitenverhaeltnis 258/1024) */
  overflow: visible;                /* Erklaerungstexte duerfen unter der Grafik erscheinen */
  margin-bottom: 80px;              /* Platz fuer die Beschriftungszeile unter der Grafik */
}

/* Ein Wert-Label-Paar je Spalte. Der Wrapper (.result-item) traegt die
   Spaltenposition (left). Wert und Text positionieren sich relativ zum
   Wrapper, bleiben also horizontal immer zusammen. */
.result-item {
  position: absolute;
  top: 0;
  width: 113px;
  height: 100%;
  text-align: center;
}

.result-value {
  position: absolute;
  top: 25%;                              /* ehemals 50%: nach oben, klar ueber dem Titel (~50-60%) */
  left: 0;
  width: 100%;
  transform: translate(-25px, -50%);     /* Zahl leicht nach links, vertikal zentriert */
  font-size: 20px;
  font-weight: bold;
  color: black;
}

/* Projektfortschritt (leere Kreisscheibe): Zahl bleibt mittig, kein Linksversatz */
#itemFertigstellung .result-value {
  transform: translateY(-50%);
}

.result-label {
  position: absolute;
  top: 58%;                 /* direkt unter dem eingebrannten Spaltentitel (~60%), im gespiegelten Bereich */
  left: 0;
  width: 100%;
  font-size: 9px;
  color: black;
  text-align: center;
}

.ProgressbarFertigstellung {
  position: absolute;
  top: 39%;
  left: 8%;
  width: 70px;
  height: 12px;
}

#itemFertigstellung { left: 6%; }
#itemMotivation { left: 18%; }
#itemTeamgeist { left: 31%; }
#itemRollenverteilung { left: 44%; }
#itemKnowHow { left: 57%; }
#itemFehleranzahl { left: 69%; }
#itemProduktivitaet { left: 82%; }

/* Feinkorrektur der Zahlen-Position je Spalte - nur Desktop (>1024px).
   Mobile behaelt den einheitlichen Versatz aus dem @media-Block unten. */
@media screen and (min-width: 1025px) {
  #itemMotivation .result-value { transform: translate(-15px, -50%); }       /* etwas weiter rechts */
  #itemKnowHow .result-value { transform: translate(-35px, -50%); }          /* etwas weiter links */
  #itemProduktivitaet .result-value { transform: translate(-35px, -50%); }   /* etwas weiter links */
}

/* Dialoge */
#dialog_link, #dialog_link1 {
  padding: .4em 1em .4em 20px;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

#dialog_link span.ui-icon, #dialog_link1 span.ui-icon {
  margin: 0 5px 0 0;
  position: relative;
  left: .2em;
  top: 50%;
  margin-top: -8px;
}

.divSliderValue {
  margin-top: 20px;
}

.spnSliderValue {
  color: Green;
}

#radioSonstiges {
  margin-top: 30px;
}

#radioSonstiges input {
  margin-left: 20px;
}

/* Mobile Ansicht (480-1024px) */
@media screen and (max-width: 1024px) and (min-width: 480px) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  body {
    font: 40% "Trebuchet MS", sans-serif;
    height: 100%;
    overflow: scroll;
    margin: 0;
  }

  #wrapper {
    margin: 0 auto;
    position: relative;
    width: 480px;
  }

  #contentPane {
    width: 480px;
    height: 100%;
    margin-top: 0;
    background: url("../images/background_short_pmgame.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
  }

  #contentPaneTop {
    height: auto;
    min-height: 0;
    padding-bottom: 10px;
  }

  /* Text und Chart im Fluss (wie Phone-Block). Die alte Absolute-
     Positionierung (Text top:100 h:500, Chart top:510 bzgl. Wrappers)
     kollidierte mit dem im Fluss nachfolgenden Ergebnisbrett: Brett
     ~430-551 ueberlappte den Chart ab 515, und die Label-Captions unter
     dem Brett landeten im Diagrammbereich. */
  #contentPaneTopText {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0 10px;
    font-size: 11px;
    color: black;
  }

  #contentPaneTopChart {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 0;
    margin-top: 15px;
  }

  #pmChartCanvas {
    width: 100% !important;
    height: auto !important;
  }

  #contentPaneResults {
    width: 480px;
    /* Hoehe folgt aus padding-top im Basisregelwerk (25,2 % von 480 = 121 px) */
    /* Platz fuer Label-Ueberhang unterhalb des Brettrands (s. .result-label) */
    margin-bottom: 60px;
  }

  /* 11% statt fixer 60px: Spaltenzentren landen auf den Icon-Zentren der
     Grafik (11.5/24/36.6/...%), und zwar automatisch ueber die gesamte
     480-1024px-Spanne (gemessen: fixe 60px lagen +0.7% zu weit rechts). */
  .result-item {
    width: 11%;
  }

  /* Zahl-Offsets prozentual (bezogen auf die Spaltenbreite, skaliert also
     mit): entspricht Desktop -25px/113px = -22%, -15px = -13%, -35px = -31%.
     Fertigstellung bleibt zentriert (Basisregel, hoehere Spezifitaet). */
  .result-value {
    font-size: 14px;
    transform: translate(-22%, -50%);
  }

  #itemMotivation .result-value { transform: translate(-13%, -50%); }
  #itemKnowHow .result-value,
  #itemProduktivitaet .result-value { transform: translate(-31%, -50%); }

  /* Labels beginnen in der Reflexionszone (Basis top:58%, direkt unter
     dem dunklen Icon-/Titel-Band, das laut Pixel-Scan bei 54,7% endet -
     wie Desktop) und laufen bei langem Text ueber den Brettrand aus. */
  .result-label {
    width: 140%;
    left: -20%;
    font-size: 6px;
  }

  /* Desktop 70px bei 1024er Brett, hier variabel 480-1024 -> 7% */
  .ProgressbarFertigstellung {
    width: 7%;
  }
}

/* ---------------------------------------------------------------------
   Mobile geteilt (<=1024px): Ruecklink zur Startseite (nur sichtbar,
   wenn das Spiel standalone geoeffnet ist - nie im Desktop-iframe) und
   Dialog-Netz fuer kleine Screens (Inhalt scrollt statt ueberzulaufen).
   --------------------------------------------------------------------- */
#btnBackToStart {
  display: none;               /* Basis: unsichtbar; Freigabe nur standalone + schmal */
  margin: 10px 0 0 10px;
  font-size: 1.4em;
  color: #1a5276;
}

@media screen and (max-width: 1024px) {
  body.standalone #btnBackToStart {
    display: block;
  }

  .ui-dialog {
    max-width: calc(100vw - 20px);
  }

  .ui-dialog .ui-dialog-content {
    /* height:'auto'-Dialoge (Init) kappt jQuery UI 1.8 nicht zuverlaessig
       ueber die maxHeight-Option - deshalb hier eine harte CSS-Kappung am
       Content: 50px Dialog-Top + Titelleiste + Button-Pane + Rand. Der
       Button-Pane ("Los geht's") bleibt damit immer im Viewport. */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------
   Phones (<480px): voll fluessig statt festem 480px-Raster. Die Grenze
   479/480 schliesst nahtlos an den Tablet-Block oben an. Tuning-Knobs:
   result-value/result-label-Groessen, Progressbar-Masse.
   --------------------------------------------------------------------- */
@media screen and (max-width: 479px) {
  body {
    padding: 5px;
  }

  #wrapper {
    width: 100%;
    min-height: 0;
  }

  #contentPane {
    width: 100%;
    min-height: 0;
    background: url("../images/background_short_pmgame.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
  }

  #contentPaneTop {
    min-height: 0;
    height: auto;
    padding-bottom: 10px;
  }

  /* Text in den Fluss, volle Breite */
  #contentPaneTopText {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    min-height: 0;
    margin: 0 10px;
  }

  #divGameOptions {
    width: auto;
  }

  /* Chart unter den Text (DOM-Reihenfolge), volle Breite; Canvas wird nur
     verkleinert (450 -> ~340px) - bleibt scharf, responsive:false bleibt. */
  #contentPaneTopChart {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 0;              /* Basis-Mindesthoehe 270px galt fuer Desktop-Nebeneinander */
    margin-top: 15px;
  }

  #pmChartCanvas {
    width: 100% !important;
    height: auto !important;
  }

  /* Ergebnisbrett: skaliert ueber die %-Spalten mit. Platz fuer Label-
     Ueberhang unterhalb des Brettrands einplanen (max ~50px). */
  #contentPaneResults {
    margin-bottom: 60px;
  }

  /* 11% entspricht Desktop 113px/1024: Spaltenzentren landen dann exakt
     auf den Icon-Zentren der Grafik (11.5/24/36.6/49.3/61.9/74.7/87%). */
  .result-item {
    width: 11%;
  }

  /* Zahl-Offsets prozentual (Spaltenbreite als Bezugsbasis, skaliert mit):
     Desktop -25px/113px = -22%, -15px = -13%, -35px = -31%. Bei 365px-Brett
     entspricht das -9/-5/-12px. Fertigstellung bleibt zentriert
     (Basisregel #itemFertigstellung, hoehere Spezifitaet). */
  .result-value {
    font-size: 13px;
    transform: translate(-22%, -50%);
  }

  #itemMotivation .result-value { transform: translate(-13%, -50%); }
  #itemKnowHow .result-value,
  #itemProduktivitaet .result-value { transform: translate(-31%, -50%); }

  /* Labels beginnen in der Reflexionszone (Basis top:58%, direkt unter
     dem dunklen Icon-/Titel-Band, das laut Pixel-Scan bei 54,7% endet -
     wie Desktop) und laufen bei langem Text ueber den Brettrand aus. */
  .result-label {
    width: 140%;               /* breiter als die Spalte: lange Woerter passen */
    left: -20%;                /* Box um Spaltenzentrum zentriert halten */
    font-size: 6px;
  }

  /* Desktop 70px bei 1024er Brett, skaliert ~25px = 7% */
  .ProgressbarFertigstellung {
    width: 7%;
    height: 9px;
  }
}