/* ===========================================================================
   Projekt: AI basierte Softwareentwicklung – René Frutiger, Juli 2025
   Konsolidiertes Stylesheet
============================================================================ */

/* ===========================================================================
   1. CSS-Variablen
============================================================================ */
:root {
  /* Farben Header & Footer */
  --header-bg:           #005f73;
  --header-text:         #ffffff;
  --header-bg-light:     rgba(0, 95, 115, 0.6);

  /* Seitenhintergrund & Tabelle */
  --page-bg:             linear-gradient(to bottom right, #e0fbfc, #f0fdfa);
  --table-text:          var(--header-bg);
  --row-odd-bg:          #ecfdf5;

  /* Windklassen */
  --speed-0-bg:          #ffffff;
  --speed-1-bg:          #e6ffe6;
  --speed-2-bg:          #3cb371;
  --speed-2-text:        #ffffff;

  /* Transparenzen Overlay & Modal */
  --overlay-bg-alpha:    0.5;

  /* Layout-Höhen */
  --header-height:       80px;
  --footer-height:       3rem;
}

/* ===========================================================================
   2. Reset & Grundlegendes
============================================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

ul {
  list-style: none;
}

body {
  display: grid;
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
  min-height: 100vh;
  margin: 0;
  font-family: 'Aboreto', sans-serif;
  /* background: var(--header-bg); */  /* entfernt, damit Main-Hintergrund sichtbar bleibt */
  color: #233c42;
}

/* ===========================================================================
   3. Header
============================================================================ */
header {
  grid-row: 1;
  position: relative;           /* Hier ergänzt */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: var(--header-bg);
  color: var(--header-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ===========================================================================
   Header-Titel
============================================================================ */
.header-center {
  position: absolute;     /* bleibt relativ zum Header */
  top: 0;                 /* volle Höhe des Headers abdecken */
  left: 0;
  width: 100%;
  height: 100%;
  
  display: flex;          /* Flexbox für zentrierten Content */
  align-items: center;    /* vertikal zentrieren */
  justify-content: center;/* horizontal zentrieren */

  pointer-events: none;   /* Klicks passieren lassen */
}

.header-center a {
  pointer-events: auto;   /* Link wieder klickbar */
}

header .white-link {
  color: var(--header-text);
  text-decoration: none;
  font-weight: 400;    /* setzt auf „normal“ zurück */
  font-size: 1.8rem;
}


/* ===================================================================
   TITEL Erste Überschtift und Zeile darunter
=================================================================== */
.lake-title {
  color: var(--header-bg);
  text-align: center;
  font-size: 1.4rem;
  margin: 2rem 0 1.5rem;
  font-weight: 500;
}

#lastUpdate {
    color: var(--header-bg);
    text-align: center;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    padding: 0 2rem;
}

/* ===========================================================================
   4. Main (zweite, flexible Zeile)
============================================================================ */
main {
  grid-row: 2;
  background: var(--page-bg);
  padding: 1rem;
  overflow-y: auto;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* ===========================================================================
   5. Footer (dritte Zeile)
============================================================================ */
footer {
  grid-row: 3;
  display: flex;
  flex-direction: column;    /* Stapelt <p> untereinander */
  align-items: center;       /* Horizontale Zentrierung */
  justify-content: center;   /* Vertikale Zentrierung */
  
  padding: 0.5em 0;          /* Innenabstand statt fixer Höhe */
  background: var(--header-bg-light);
  color: var(--header-text);
  font-size: 0.7rem;
  font-weight: 300;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

footer p {
  margin: 0.2em 0;           /* Abstand zwischen den Zeilen */
  line-height: normal;       /* Standard-Zeilenabstand */
}

/* ===================================================================
   FIXIERTER FOOTER MIT KONSTANTER HÖHE
=================================================================== */
footer {
  position: fixed;       /* Footer aus dem Flow und am Viewport fixiert */
  bottom: 0;             /* ganz unten ansetzen */
  left: 0;               /* linksbündig */
  width: 100%;           /* volle Breite */

  height: 3rem;          /* feste Höhe (z. B. 3 rem) */
  padding: 0;            /* kein zusätzliches vertikales Padding */
  line-height: 3rem;     /* Text vertikal zentrieren */

  background: var(--header-bg-light);
  color: var(--header-text);
  font-size: 0.7rem;
  font-weight: 300;
  text-align: center;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
  z-index: 100;          /* über dem Main-Content, falls nötig */
}

/* Abstand am Seitenende, damit Main-Inhalt nicht vom Footer überlappt wird */
body {
  padding-bottom: 3rem;  /* exakt so hoch wie der Footer */
}

/* ===================================================================
   RESPONSIVE ANPASSUNGEN
=================================================================== */
@media (max-width: 480px) {
  main { padding: 1rem 0.5rem; }
  header .white-link { font-size: 1.5rem; }
  th, td { padding: 0.6rem 0.5rem; font-size: 0.9rem; }
}


/* ----------------------------------
   Icon Back-Buttons Unterseiten
   ---------------------------------- */
.icon-btn {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--header-text);
}

.icon-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}