:root{

  --background: #F7F9FC;

  --text: #333;
  --highlight: #2C7BE5;

  --seg-unter3: #7c7cbc;   /* blau */
  --seg-unter2: #7c7cfc;   /* blau */
  --seg-unter1: #7cfcfc;   /* blau */
  --seg-normal: #5cb85c;  /* gr�n */
  --seg-ueber:  #f0ad4e;   /* orange */
  --seg-adipo1: #fc9191;   /* rot */
  --seg-adipo2: #c08080;   /* rot */
  --seg-adipo3: #d9534f;   /* rot */
  --gauge-bg: #eee;

  --warn: #d9534f;
  --menu-width: 300px;
  --menu-bg: #eee;            /* Hintergrund Menü */
  --menu-fg: #333;            /* Schriftfarbe Menü */
  --menu-fg-muted: #94a3b8;      /* Sekundärtext */
  --backdrop: rgba(15, 23, 42, .4); /* Overlay bei offenem Menü */
  --icon-size: 20px;
  --item-gap: 0.75rem;
  --item-pad: 0.85rem 1rem;
  --radius: 10px;
  --transition: 280ms cubic-bezier(.2,.7,.1,1);
}


* {
  background: var(--background);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: var(--text);
  margin: 0px;
}

body {
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;
}

p {
  margin-bottom: 12px;
}


h1 {
  color: var(  --highlight);
  margin-bottom: 12px;
}

h2 {
  margin-bottom: 12px;
}

.flex-container {
  margin-top: 0px;
  /*border: 2px solid rgb(247, 10, 101);*/
  width: min(90vw, 700px);   /* responsiv, max 700px */
  display: flex;
  flex-direction: row;
  font-size: 16px;
  align-items: top;
  justify-content: top;

}

.adbox {
    text-align: left;
    /*border: 2px solid rgb(255, 230, 0);*/
    padding: 10px;
    /*flex: 50%;*/
}

.textbox {
    margin-top: 0px;
    text-align: left;
    width: 80%;
    /*border: 1px solid #00f;*/
    padding: 10px;
    /*flex: 50%;*/
}

.cookie_container {
    padding: 20px;
    width: 80%;
    max-width: 100%; /* Stellt sicher, dass die Box nicht über den Bildschirm hinausgeht */
    text-align: center;
    background-color: var(--background);

  }


.cookie_area {
    background-color: var(--background);
    text-align: left;
    margin-bottom: 25px;
}

.button-group {
    display: flex; /* Standardmäßig nebeneinander */
    justify-content: space-evenly;
    gap: 10px; /* Abstand zwischen den Buttons */
    flex-wrap: wrap; /* Erlaubt das Umbrechen der Buttons, wenn der Platz nicht reicht */
}

.button-group button {
    background-color: #2C7BE5;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    /* flex-grow: 1; /* Buttons füllen den verfügbaren Platz aus */
    min-width: 120px; /* Minimale Breite für Buttons, um sie lesbar zu halten */
}

.button-group button:hover {
    background-color: #05B;
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 600px) {
    .textbox {
      margin-top: 50px;
    }
    .flex-container {
      margin-top: 50px;
      flex-direction: column;
    }
    .button-group {
      flex-direction: column; /* Buttons untereinander bei kleineren Bildschirmen */
      align-items: stretch; /* Buttons erstrecken sich über die volle Breite */
    }

    .button-group button {
      width: 90%;
      margin-bottom: 10px; /* Abstand zwischen den untereinander liegenden Buttons */
    }

    .button-group button:last-child {
      margin-bottom: 0; /* Kein zusätzlicher Abstand nach dem letzten Button */
    }
}

/*---------------------------------------------------Menu----------------------------------------------

  /* =========================
     Toggle-Button (Hamburger)
     ========================= */
  .menu-toggle{
    position: fixed; left: 16px; top: 16px; z-index: 1001;
    display: inline-grid; place-items:center;
    width: 44px; height: 44px;
    border: 0; border-radius: 10px;
    background: white; color:#0f172a;
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
    cursor: pointer;
  }
  /*.menu-toggle:focus-visible{ outline: 3px solid var(--highlight); outline-offset: 2px; }*/
  .menu-toggle:focus-visible{ outline: 0px solid var(--highlight); outline-offset: 2px; }

  /* Hamburger-Icon */
  .menu-toggle svg{ width: 26px; height: 26px; }

  /* =========================
     Overlay (schließt bei Klick)
     ========================= */
  .backdrop{
    position: fixed; inset: 0; background: var(--backdrop);
    opacity: 0; pointer-events: none; transition: opacity var(--transition);
    z-index: 1000;
  }
  .backdrop.is-open{ opacity: 1; pointer-events: auto; }

  /* =========================
     Schiebemenü
     ========================= */
  .side-menu{
    position: fixed; inset: 0 auto 0 0; width: var(--menu-width);
    background: var(--menu-bg); color: var(--menu-fg);
    transform: translateX(-100%);
    transition: transform var(--transition);
    z-index: 1002;
    display: grid; grid-template-rows: auto 1fr auto;
    box-shadow: 6px 0 24px rgba(0,0,0,.22);
  }
  .side-menu.is-open{ transform: translateX(0); }

  .menu-header{
    padding: 18px 18px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .menu-header h2{
    font-size: 1rem; margin: 0 0 4px; font-weight: 600; color: var(--menu-fg);
  }
  .menu-header p{
    margin: 0 0 8px; font-size: .9rem; color: var(--menu-fg-muted);
  }

  nav.menu-nav{
    padding: 10px; overflow:auto;
  }
  .menu-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

  .menu-item{
    display: grid; grid-auto-flow: column; grid-auto-columns: max-content 1fr;
    align-items: center; gap: var(--item-gap);
    padding: var(--item-pad);
    border-radius: var(--radius);
    color: var(--menu-fg); text-decoration: none;
    transition: background var(--transition), color var(--transition);
  }
  .menu-item:hover, .menu-item:focus-visible{
    font-weight: bold;
  }
  
  .menu-item svg{ width: var(--icon-size); height: var(--icon-size); opacity: .95; }
  .menu-item small{ display:block; color: var(--menu-fg-muted); font-size: .8rem; }

  .menu-footer{
    padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.08);
    font-size: .85rem; color: var(--menu-fg-muted);
  }

  /* Barrierearme Bewegungen */
  @media (prefers-reduced-motion: reduce){
    .side-menu, .backdrop{ transition: none; }
  }

/* ------------------------------------------- Cookie-Banner -------------------------------------------- */
.cookie_banner {
  position: fixed;
  bottom: -1000px; /* Start außerhalb des sichtbaren Bereichs */
  left: 0;
  width: 100%;
  background-color: #EEE;
  background-color: var(--background);
  /*color: #000;*/
  text-align: left;
  margin: 0px;
  padding: 10px 50px;
  box-shadow: 0 -5px 10px rgba(0,0,0,0.3);
  transition: bottom 0.5s ease;
  z-index: 1000;
}

.cookie_banner.show {
  bottom: 0;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 60px;
  font-size: 18px;
  color: #000;
  cursor: pointer;
}

.close-btn:hover {
  color: #888;
}


/* ------------------------------------------- BMI_berechnen -------------------------------------------- */


.bmi_berechnen{
  flex-direction: column;
  align-items: center;
  justify-content: top;
  height: auto;
  text-align: left;
  /*width: 500px;*/
  max-width: 90vw;
  /*border: 1px solid #00f;*/
  /*margin: 24px;*/
  padding: 16px;
  color: var(--text);
}

form{display:grid; gap:10px; max-width:820px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); align-items:end; margin-bottom:16px}
label{font-weight:600}
input, select, button{
    padding:10px; border:1px solid #ccc; border-radius:8px; font-size:16px
}
button{cursor:pointer}
.wrap{display:grid; gap:18px; max-width:820px}
#ergebnis{font-size:1.1rem; font-weight:700}

/* Gauge-Container */
/*.gauge-box{position:relative; width:100%; max-width:820px; aspect-ratio: 1 / 1;}*/
.gauge-box{position:relative; width:300px; aspect-ratio: 1 / 1;}
.gauge-box svg{width:100%; height:100%; display:block}

/*.tick text{font-size:12px; fill:#666}*/
.tick text{font-size:8px; fill:#666}
.legend{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:14px}
.legend i{width:14px; height:14px; display:inline-block; border-radius:3px; outline:1px solid #bbb}

.readout { font-weight:700; font-size:16px; fill:#222 }
.subtitle { font-size:12px; fill:#666 }

.panel{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end}
.note{font-size:.9rem; color:#555}
.error{color:var(--warn); font-weight:600}

/* --------------------------------------------------- Cookie-Einstellungen -----------------------------------------------------------*/

.cookie_table {
  display: grid;
  grid-template-columns: auto 20%;
  text-align: left;
  align-items: center;

  row-gap: 50px;
  column-gap: 10px;
}

    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
      margin-right: 15px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0;
      right: 0; bottom: 0;
      background-color: #cccccc;
      transition: 0.4s;
      border-radius: 34px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: #4CAF50;
    }

    input:checked + .slider:before {
      transform: translateX(26px);
    }

/* Overlay, das den Rest der Seite abdunkelt */
    #overlay_gray {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none; /* wird per JS aktiviert */
      z-index: 10;
    }