/* =============== BASIS =============== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;
  min-height: 100vh;
  padding: 20px;
  overflow-x: hidden;
  max-width: 100vw;
}

/* =============== CONTAINER =============== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255,255,255,0.95);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
}

/* =============== BOXEN & GRIDS =============== */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.info-box,
.analysis,
.five-zone-info,
.training-analysis {
  background: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 12px;
  margin: 0 auto 30px auto;
  max-width: 1200px;
  padding: 20px;
}

.info-box         { border-top: 4px solid #667eea; }
.analysis         { border-top: 4px solid #28a745; }
.five-zone-info   { border-top: 4px solid #ffc107; }
.training-analysis{ border-top: 4px solid #17a2b8; }

/* =============== ÜBERSCHRIFTEN =============== */
.modern-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 15px;
}
.modern-header h2 { font-size: 28px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

.info-box h3,
.input-titel h3,
.tests-list h3,
.chart-container h3,
.analysis h3,
.five-zone-info h3,
.training-analysis h3 {
  margin: 0 0 14px 0;
  font-size: 20px;
  color: #667eea;
  line-height: 1.2;
}
.training-analysis h3 { color: #17a2b8; font-size: 22px; }
.five-zone-info h3  { color: #ffc107; }

/* =============== EINGABE =============== */
.input-section {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 1px solid #dee2e6;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
}
.input-section h3 { color: #495057; margin-bottom: 20px; font-size: 22px; }

.input-header { display: flex; gap: 15px; align-items: end; margin-bottom: 20px; flex-wrap: wrap; }
.input-header button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: #fff; border: none; border-radius: 8px; cursor: pointer;
  font-weight: 600; transition: all .3s ease;
}
.input-header button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(40,167,69,.4); }

input[type="text"],
input[type="number"],
input[type="date"] {
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 8px;
  font-size: 17px;
  border: 1.5px solid #a4b3d4;
  border-radius: 8px;
  background: #fff;
  color: #222;
  box-shadow: 0 2px 8px rgba(102,126,234,.06);
  transition: border .2s, box-shadow .2s;
  outline: none;
}

input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus {
  border: 2px solid #667eea;
  box-shadow: 0 0 0 2px #667eea33;
}
input::placeholder { color: #b1b1b1; font-size: 15px; }

/* =============== STUFEN-GRID =============== */
.stufen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.stufe-input {
  background: #f8f9fb;
  padding: 15px;
  border-radius: 14px;
  border: 1.5px solid #dee2e6;
  box-shadow: 0 4px 12px rgba(90,110,190,.09);
  transition: all .3s ease;
}
.stufe-input:hover { border-color: #667eea; transform: translateY(-2px); }
.stufe-input h4 { color: #667eea; margin-bottom: 10px; font-size: 16px; text-align: center; }
.stufe-input input { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; }
.tempo-display { text-align: center; font-weight: 700; color: #495057; margin-bottom: 8px; font-size: 14px; }
.stufe-input input[type="text"] {
  width: 80px; min-width: 70px; margin: 0 auto 8px; text-align: center; font-size: 17px;
}

/* =============== BUTTONS =============== */
.controls {
  display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap;
}
.controls button {
  padding: 12px 24px; border: 2px solid #667eea; background: #fff; color: #667eea;
  border-radius: 25px; cursor: pointer; font-weight: 600; transition: all .3s ease;
}
.controls button.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.controls button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102,126,234,.4); }
.method-btn { padding: 8px 12px; margin: 4px; border: 2px solid #dee2e6; background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all .3s ease; }
.method-btn.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: #667eea; }
.method-btn:hover { border-color: #667eea; transform: translateY(-1px); }

/* Erfolg/Fehler Buttons */
.button-success { background:#28a745; color:#fff; border:none; padding:10px 18px; border-radius:6px; font-weight:700; cursor:pointer; }
.button-success:hover { background:#218838; }
.button-danger { background:#dc3545; color:#fff; border:none; padding:10px 18px; border-radius:6px; font-weight:700; cursor:pointer; }
.button-danger:hover { background:#c82333; }

/* =============== LISTEN & HINWEISE =============== */
.validation-alert { margin: 20px 0; padding: 15px; border-radius: 8px; font-weight: 500; display:none; }
.validation-alert.warning { background:#fff3cd; border:1px solid #ffeaa7; color:#856404; }
.validation-alert.error   { background:#f8d7da; border:1px solid #f5c6cb; color:#721c24; }

.recommendation-box { background:#d1ecf1; padding:15px; border-radius:8px; margin-bottom:20px; border-left:4px solid #17a2b8; }

.tests-list { background:#f8f9fa; padding:20px; border-radius:12px; margin-bottom:20px; }
.test-item { display:flex; justify-content:space-between; align-items:center; background:#fff; padding:15px; margin-bottom:10px; border-radius:8px; border:1px solid #dee2e6; transition:all .3s ease; }
.test-item:hover { transform: translateX(5px); box-shadow:0 4px 8px rgba(0,0,0,.1); }
.test-item.current { border-left:4px solid #28a745; background: linear-gradient(to right, #d4edda, #fff); }
.delete-btn { background:#dc3545; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; font-size:12px; }

/* =============== CHART =============== */
/* Wichtig: keine feste Höhe, Box wächst mit Inhalt */
.chart-container {
  position: relative;
  width: 100%;
  height: 420px;   /* Desktop/iPad Default; nach Bedarf anpassen */
  overflow: visible;
}

.chart-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;  /* keine auto-Höhe, keine max-height */
}

/* =============== ACCESSIBILITY =============== */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =============== ZONEN =============== */
.threshold { margin-bottom: 15px; padding: 15px; background:#f8f9fa; border-radius:8px; border-left:4px solid #17a2b8; }

.zone,
.zone-highlight { background:#f8f9fa; border-radius:6px; }
.zone { display:flex; align-items:center; margin-bottom:10px; padding:8px; }
.zone-highlight { padding:15px; margin-bottom:15px; }
.zone-color { width:20px; height:20px; border-radius:4px; margin-right:10px; }

.zone-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:15px; margin-top:20px; }
.zone-card { padding:15px; border-radius:8px; text-align:center; color:#fff; font-weight:700; }
.zone1-card { background:#22c55e; } .zone2-card { background:#3b82f6; } .zone3-card { background:#f59e0b; }
.zone4-card { background:#ef4444; } .zone5-card { background:#8b5cf6; }

/* =============== REFERENZEN =============== */
.scientific-warning { background:#fff3cd; border:1px solid #ffeaa7; border-radius:8px; padding:15px; margin:20px 0; }
.scientific-warning h4 { color:#856404; margin-bottom:10px; }

.scientific-references { margin-top:40px; padding-top:20px; border-top:2px solid #e9ecef; font-size:12px; color:#666; }
.scientific-references h3 { color:#333; margin-bottom:5px; font-size:18px; }
.scientific-references h4, .scientific-references h5 { color:#667eea; }
.references-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.sources-container { margin-top:25px; padding:20px; background:#f8f9fa; border-radius:8px; border-left:4px solid #667eea; }
.reference-text { font-size:11px; line-height:1.6; color:#555; }
.disclaimer { margin-top:20px; text-align:center; font-size:11px; color:#888; border-top:1px solid #dee2e6; padding-top:15px; }

/* =============== ANALYSE =============== */
.analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  font-size: 15.5px;
}
.analysis-grid h5 {
  font-size: 1em;
  color: #384b9c;
  margin-bottom: 8px;
  font-weight: 700;
}
.analysis-grid ul { padding-left: 18px; margin: 0 0 6px 0; }
.analysis-grid li { margin-bottom: 5px; font-size: 1em; }

.analysis-interpretation {
  margin-top: 15px; padding: 11px 13px; background:#d1ecf1; border-radius:6px; font-size:15px; color:#324298;
}
.analysis-zones {
  margin-top: 15px; padding: 11px 13px; background:#e8f5e9; border-radius:6px; font-size:15px; color:#267d41;
}
.analysis-zones span { font-size:.97em; color:#333; }

.primary-btn {
  width: 100%; padding: 14px 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color:#fff; border:none; border-radius:8px; font-weight:700; font-size:1.08em; cursor:pointer;
  box-shadow: 0 2px 8px rgba(102,126,234,.07);
  margin-top: 18px; transition: background .18s, box-shadow .18s; letter-spacing:.02em;
}
.primary-btn:hover,
.primary-btn:focus {
  background: linear-gradient(135deg, #556ad9, #764ba2);
  box-shadow: 0 4px 18px rgba(102,126,234,.15);
}

/* ===== MOBILE PACK (bereinigt) ===== */
@media (max-width: 768px) {
  :root { --radius:14px; --space:14px; --shadow:0 8px 20px rgba(0,0,0,.08); }

  body { padding:12px env(safe-area-inset-right) 12px env(safe-area-inset-left); }
  .container { padding:16px; border-radius:var(--radius); box-shadow:var(--shadow); }
  .modern-header { padding:16px; border-radius:var(--radius); }
  .modern-header h1 { font-size:clamp(18px,5vw,22px); margin-bottom:6px; }
  .modern-header p { font-size:13.5px; opacity:.95; }

  .info-box, .analysis, .five-zone-info, .training-analysis {
    padding:var(--space); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:var(--space);
  }

  /* Eingabe */
  .input-section { padding:var(--space); }
  .input-header { gap:10px; }
  .input-header .input-group { flex:1 1 100%; }
  .input-header button { width:100%; padding:12px; border-radius:10px; }

  /* Stufen: 3×2 (immer zwei nebeneinander) */
  .stufen-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:12px; }
  .stufe-input { padding:12px; border-radius:12px; }
  .stufe-input input { font-size:15px; padding:10px; }

  /* Chart-Schalter */
  .controls { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px; }
  .controls button { border-radius:999px; padding:10px 12px; }
  .controls button.active { box-shadow:0 6px 18px rgba(102,126,234,.35); }

  /* Methoden-Buttons */
  .method-buttons { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .method-btn { border-radius:10px; padding:10px 8px; font-size:12.5px; line-height:1.2; }
  .method-btn small { display:block; opacity:.9; }

  /* Diagramm + Deckel */
  .chart-container { border-radius:var(--radius); }
  .chart-container h3 { font-size:16px; margin-bottom:8px; }
  .chart-container canvas {
    height:clamp(520px, 82vh, 720px) !important;  /* Obergrenze, kein endloses Wachsen */
    width:100% !important;
    max-height:400px !important;
  }

  /* Schwellen & Zonen: untereinander, volle Breite */
  .info-grid { display:grid; grid-template-columns:1fr; gap:20px; }
  .info-grid > .info-box { width:100%; max-width:100%; margin:0; }

  /* Analyse / Referenzen */
  .analysis-grid { grid-template-columns:1fr; gap:12px; font-size:14.5px; }
  .analysis-input { padding:12px; font-size:15px; }
  .references-grid { grid-template-columns:1fr; gap:12px; }
  footer.info-box { padding:18px; }

  /* Detail-Abschnitt: Overflow-sicheres 2er-Grid (iOS) */
  #fiveZoneDetailSection .info-box > div {
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(12px,3vw,20px); width:100%; max-width:100%;
  }
  #fiveZoneDetailSection .zone-highlight { min-width:0; overflow-wrap:anywhere; }
}

@media (max-width: 540px) {
  :root { --radius:12px; --space:12px; }
  .modern-header h1 { font-size:clamp(17px,6vw,20px); }
  .controls { gap:6px; }
  .method-buttons { gap:6px; }
  .chart-container canvas {
    height:clamp(500px, 86vh, 680px) !important;
    max-height:340px !important;
  }
  /* Vier Info-Kacheln lieber 1-spaltig auf sehr schmalen Geräten */
  #fiveZoneDetailSection .info-box > div { grid-template-columns:1fr; }
}

/* Optionale Feinheiten */
@media (hover:hover) and (max-width:768px){
  .controls button:hover, .input-header button:hover, .method-btn:hover { transform:translateY(-1px); }
}

/* =============== STUFEN-KONTROLLE (NEU) =============== */
/* Input Labels in der Stufen-Eingabe */
.input-label {
    display: block;
    margin-bottom: 5px;
    color: #495057;
}

.input-label-maxhf {
    margin: 10px 0 5px;
}

.input-date,
.input-number-small {
    padding: 6px;
}

.btn-danger {
    background: rgba(220,53,69,0.8);
    border-color: rgba(220,53,69,0.9);
}

/* Stufen-Kontrolle Container */
.stage-controls {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    align-items: center;
    flex-wrap: wrap;
}

.btn-add-stage {
    padding: 8px 16px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-add-stage:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40,167,69,0.3);
}

.btn-remove-stage {
    padding: 8px 16px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-remove-stage:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220,53,69,0.3);
}

.stage-count-info {
    color: #666;
    font-size: 14px;
}

.stage-increment-info {
    color: #17a2b8;
    font-size: 13px;
    font-style: italic;
}

/* Pace Input in Stufen */
.pace-input {
    width: 80px;
    min-width: 70px;
    margin: 0 auto 8px;
    text-align: center;
    font-size: 17px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 6px;
    padding: 6px;
}

.hr-percent-display {
    font-size: 11px;
    margin-top: 3px;
    margin-bottom: 12px;
    min-height: 16px;
    color: #17a2b8;
}

/* Top-Navigation (überstimmt Basis-Styles durch spätere Lade-Reihenfolge) */
main.container > nav.top-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 22px;
}

main.container > nav.top-nav a.nav-link {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background: #fff;
  color: #111827;
  text-decoration: none;
  font-weight: 500;
  line-height: 1;
}

main.container > nav.top-nav a.nav-link:hover {
  background: #f3f4f6;
}

main.container > nav.top-nav a.nav-link.active,
main.container > nav.top-nav a.nav-link[aria-current="page"] {
  background: #111827;
  color: #fff;
  border-color: #111827;
}



/* =============== ERWEITERTE STUFEN-GRID RESPONSIVE =============== */
/* Große Bildschirme - mehr Spalten bei vielen Stufen */
@media (min-width: 1400px) {
    .stufen-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* Kleine Bildschirme - Scroll bei vielen Stufen */
@media (max-width: 768px) {
    .stufen-grid {
        padding-right: 10px;
    }
    
    /* Scrollbar Styling */
    .stufen-grid::-webkit-scrollbar {
        width: 6px;
    }
    
    .stufen-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .stufen-grid::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 3px;
    }
    
    .stufen-grid::-webkit-scrollbar-thumb:hover {
        background: #764ba2;
    }
    
    /* Mobile Anpassungen für Stufen-Kontrolle */
    .stage-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .btn-add-stage,
    .btn-remove-stage {
        width: 100%;
        padding: 10px;
    }
    
    .stage-count-info,
    .stage-increment-info {
        text-align: center;
        display: block;
        width: 100%;
    }
}

/* Extra kleine Bildschirme */
@media (max-width: 540px) {
        .stufen-grid {
        padding-right: 10px;
    }
    
    /* Scrollbar Styling */
    .stufen-grid::-webkit-scrollbar {
        width: 6px;
    }
    
    .stufen-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .stufen-grid::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 3px;
    }
    
    .stufen-grid::-webkit-scrollbar-thumb:hover {
        background: #764ba2;
    }
    
    /* Mobile Anpassungen für Stufen-Kontrolle */
    .stage-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .btn-add-stage,
    .btn-remove-stage {
        width: 100%;
        padding: 10px;
    }
    
    .stage-count-info,
    .stage-increment-info {
        text-align: center;
        display: block;
        width: 100%;
    }
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }