/* 🌌 LifeClock Aurora Night Sky */
/* Dunkler Grundhimmel + sanft animierte Nordlichter + leises Funkeln */

/* === Zentrierung der Hauptbox (LifeClock) === */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(ellipse at bottom, #0a0a1a 0%, #030308 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

  html, body {
  overflow-x: hidden;
  background-color: #000;
  color-scheme: dark;
}

/* Nur für die Startseite */
body.index-page {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100vh;
}

/* Für andere Seiten: normales Scrollen */
body.results-page {
  overflow-y: auto;
}

.main-box {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  padding: 2rem;
  width: 100%;
  max-width: 42rem;
  text-align: center;
  margin: 50px;
}

.main-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  pointer-events: none;
}



/* Für Chrome & Edge */
.main-box::-webkit-scrollbar {
  width: 8px;
}
.main-box::-webkit-scrollbar-thumb {
  background: rgba(94, 234, 212, 0.6);
  border-radius: 4px;
}



/* ------------------ Aurora-Schleier ------------------ */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;     /* war 200% → jetzt breiter */
  height: 200%;    /* war 200% → jetzt höher */
  background:
    radial-gradient(ellipse at 30% 95%, rgba(90,255,200,0.15), transparent 60%),
    radial-gradient(ellipse at 70% 110%, rgba(160,120,255,0.18), transparent 60%),
    radial-gradient(ellipse at 40% 120%, rgba(0,255,170,0.12), transparent 70%),
    radial-gradient(ellipse at 80% 100%, rgba(200,150,255,0.1), transparent 60%);
  background-repeat: no-repeat;
  background-size: cover; /* skalieren auf gesamten Bereich */
  animation: auroraDrift 60s ease-in-out infinite alternate, auroraFlicker 30s ease-in-out infinite;
  z-index: 0;
  /*filter: blur(80px);*/
  /*opacity: 0.8;*/
  transform: translateY(18%) !important; /* leicht nach unten geschoben */
}



/* Sanftes Schweben und Flackern der Aurora */
@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-10%, 5%) scale(1.1); }
  100% { transform: translate(10%, -5%) scale(1); }
}

@keyframes auroraFlicker {
  0%, 100% { opacity: 0.8; filter: blur(80px) brightness(1); }
  20% { opacity: 0.85; filter: blur(82px) brightness(1.1); }
  40% { opacity: 0.75; filter: blur(85px) brightness(0.9); }
  60% { opacity: 0.9; filter: blur(80px) brightness(1.05); }
  80% { opacity: 0.78; filter: blur(83px) brightness(0.95); }
}

/* ------------------ Sterne (SVG-Pattern, dicht & twinkle) ------------------ */
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* liegt über body::before (Aurora), aber unter dem Inhalt */
  opacity: 0.9;
}

.stars,
body::before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-repeat: repeat;
  background-size: 800px 800px; /* Dichte der Sterne */
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.2));
}

/* Schicht 1: viele sehr kleine Sterne */
.stars::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'>\
<rect width='800' height='800' fill='transparent'/>\
<g fill='white' fill-opacity='0.8'>\
<circle cx='30' cy='40' r='0.8'/> <circle cx='120' cy='75' r='0.7'/> <circle cx='210' cy='60' r='0.9'/>\
<circle cx='300' cy='110' r='0.8'/> <circle cx='410' cy='50' r='0.8'/> <circle cx='515' cy='90' r='0.7'/>\
<circle cx='620' cy='65' r='0.8'/> <circle cx='740' cy='40' r='0.9'/>\
<circle cx='70' cy='160' r='0.7'/> <circle cx='180' cy='140' r='0.8'/> <circle cx='260' cy='190' r='0.6'/>\
<circle cx='360' cy='150' r='0.7'/> <circle cx='460' cy='180' r='0.8'/> <circle cx='560' cy='170' r='0.7'/>\
<circle cx='650' cy='155' r='0.6'/> <circle cx='740' cy='180' r='0.8'/>\
<circle cx='40' cy='260' r='0.7'/> <circle cx='135' cy='240' r='0.8'/> <circle cx='230' cy='280' r='0.7'/>\
<circle cx='320' cy='260' r='0.6'/> <circle cx='420' cy='230' r='0.8'/> <circle cx='510' cy='275' r='0.7'/>\
<circle cx='600' cy='255' r='0.7'/> <circle cx='700' cy='245' r='0.7'/>\
<circle cx='85' cy='350' r='0.8'/> <circle cx='170' cy='330' r='0.7'/> <circle cx='260' cy='360' r='0.8'/>\
<circle cx='345' cy='340' r='0.6'/> <circle cx='430' cy='370' r='0.8'/> <circle cx='520' cy='335' r='0.7'/>\
<circle cx='610' cy='360' r='0.8'/> <circle cx='705' cy='335' r='0.7'/>\
<circle cx='55' cy='450' r='0.7'/> <circle cx='150' cy='465' r='0.9'/> <circle cx='235' cy='430' r='0.7'/>\
<circle cx='315' cy='470' r='0.6'/> <circle cx='405' cy='440' r='0.8'/> <circle cx='495' cy='455' r='0.7'/>\
<circle cx='585' cy='470' r='0.8'/> <circle cx='680' cy='445' r='0.7'/>\
<circle cx='90' cy='550' r='0.7'/> <circle cx='175' cy='530' r='0.7'/> <circle cx='260' cy='575' r='0.8'/>\
<circle cx='350' cy='560' r='0.7'/> <circle cx='435' cy='540' r='0.6'/> <circle cx='520' cy='580' r='0.8'/>\
<circle cx='605' cy='545' r='0.7'/> <circle cx='695' cy='565' r='0.7'/>\
<circle cx='40' cy='650' r='0.7'/> <circle cx='130' cy='625' r='0.7'/> <circle cx='220' cy='660' r='0.8'/>\
<circle cx='310' cy='640' r='0.6'/> <circle cx='400' cy='670' r='0.8'/> <circle cx='490' cy='635' r='0.7'/>\
<circle cx='580' cy='665' r='0.7'/> <circle cx='670' cy='650' r='0.8'/> <circle cx='760' cy='630' r='0.7'/>\
</g></svg>");
  opacity: 0.65;
  animation: twinkleLayer1 22s ease-in-out infinite;
}

/* Schicht 2: weniger, dafür etwas größere Sterne */
.stars::after {
  background-size: 900px 900px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'>\
<rect width='900' height='900' fill='transparent'/>\
<g fill='white' fill-opacity='0.9'>\
<circle cx='120' cy='120' r='1.2'/> <circle cx='380' cy='90' r='1.4'/> <circle cx='700' cy='130' r='1.3'/>\
<circle cx='240' cy='260' r='1.2'/> <circle cx='520' cy='210' r='1.3'/> <circle cx='820' cy='240' r='1.1'/>\
<circle cx='160' cy='420' r='1.3'/> <circle cx='420' cy='390' r='1.2'/> <circle cx='680' cy='430' r='1.4'/>\
<circle cx='100' cy='600' r='1.2'/> <circle cx='420' cy='570' r='1.3'/> <circle cx='760' cy='610' r='1.2'/>\
<circle cx='220' cy='760' r='1.2'/> <circle cx='500' cy='720' r='1.4'/> <circle cx='820' cy='780' r='1.3'/>\
</g></svg>");
  opacity: 0.75;
  animation: twinkleLayer2 26s ease-in-out infinite;
  animation-delay: 8s;
}

/* Leicht versetztes, langsames Funkeln */
@keyframes twinkleLayer1 {
  0%, 100% { opacity: 0.45; transform: translate3d(0,0,0) scale(1); }
  50%      { opacity: 0.85; transform: translate3d(-1%, 0.5%, 0) scale(1.01); }
}
@keyframes twinkleLayer2 {
  0%, 100% { opacity: 0.5; transform: translate3d(0,0,0) scale(1); }
  50%      { opacity: 0.9; transform: translate3d(1%, -0.5%, 0) scale(0.99); }
}

/* Langsames Funkeln */
@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}


/* ===== Globale Schriftanpassungen ===== */

@font-face {
  font-family: 'alarm clock';
  src: url('../fonts/alarm clock.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Basis-Schrift */
body, h2, h3, p, button, a {
  font-family: 'Roboto', Segoe UI, Helvetica, Arial, sans-serif;
  color: #ffffff;
}

/* H1-Überschrift */
h1 {
  font-family: 'Roboto', Segoe UI, Helvetica, Arial, sans-serif;
  font-size: 2.25rem; /* entspricht Tailwind text-4xl */
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(94, 234, 212, 0.33);
}

/* Digitale Zahlen */
.digital {
  font-family: 'alarm clock', monospace;
  color: #5eead4;
  text-shadow: 0 0 15px rgba(94, 234, 212, 1);
  font-size: 1.8rem;
  letter-spacing: 1px;
  
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  text-rendering: geometricPrecision;
}

/* Buttons */
.btn-aurora {
  background: linear-gradient(90deg, #2dd4bf 0%, #0f766e 100%);
  color: #ffffff;
  font-weight: 600;
  border: none;
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.3);
  transition: opacity 0.3s ease;
}

.btn-aurora:hover {
  opacity: 0.8;
}


/* === Eingabefeld im Digital-Stil === */
.input-digital {
  font-family: 'alarm clock', monospace;
  font-size: 1.8rem;
  color: #5eead4;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.4);
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  text-align: center;
  text-shadow: 0 0 8px rgba(94, 234, 212, 0.4);
  outline: none;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Hover- & Fokus-Effekt */
.input-digital:hover,
.input-digital:focus {
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

input[type="date"], input[type="text"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
}


/* === Überschrift === */

.main-title {
  text-align: left !important;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.main-title span {
  display: block;
}


/* === Dekobild in der Mainbox (rechts oben) === */
.main-box {
  position: relative; /* wichtig für absolute Positionierung des Bildes */
}

.decor-image {
  position: absolute;
  top: -3rem;
  right: 0rem;
  /* width: 80px;       Größe anpassen */
  height: auto;
  /*opacity: 0.8;       leicht transparent, fügt sich in Design ein */
  pointer-events: none; /* klickt nicht durch */
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)); /*(94, 234, 212, 0.4)*/
  /*transition: opacity 0.3s ease, transform 0.4s ease;*/
}

/*
.decor-image:hover {
  opacity: 1;
  transform: scale(1.05);
}
*/

/* 🇩🇪 WM-Kachel mit Flaggenverlauf */
.wm-tile, .us-tile {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.01); /* ersetzt bg-white/10 */
  /*backdrop-filter: blur(8px);*/
}

/* Halbtransparenter Flaggenverlauf */
.wm-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    150deg,
    rgba(0, 0, 0, 0) 63%,      
    #00000040 75%,      /* Schwarz */
    #90000040 85%,   /* Rot */
    #ffd70040 96% /* Gelb */
  );
  z-index: 0;
  mix-blend-mode: overlay; /* ✨ mischt Farben subtil ins Glas */
}

/* Halbtransparenter Flaggenverlauf */
.us-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    20deg,
	rgba(255, 255, 255, 0) 65%,
	rgba(200, 16, 46, 0.3) 70%,
	rgba(255, 255, 255, 0.3) 75%,
    rgba(200, 16, 46, 0.3) 80%,
	rgba(255, 255, 255, 0.3) 85%,
    rgba(10, 25, 100, 0.3) 90%
  );
  z-index: 0;
  mix-blend-mode: overlay; /* ✨ mischt Farben subtil ins Glas */
}

/* Inhalt wieder nach oben holen */
.wm-tile, us.tile > * {
  position: relative;
  z-index: 1;
}


/* === Atmen-Animation für Atemzüge === 
[data-field="breaths"] {
  animation: breathe 5s ease-in-out infinite;
  display: inline-block;
  transform-origin: center;
}

@keyframes breathe {
  0%, 100% {
    text-shadow: 0 0 8px rgba(94, 234, 212, 0.6);
    opacity: 0.9;
  }
  50% {
    text-shadow: 0 0 16px rgba(94, 234, 212, 1);
    opacity: 1;
  }
}
*/

    /* --- Nur Zusatz für Kategorien & Pfeile --- */
    .categories-wrapper {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
	  gap: 2rem; /* sanfter Abstand zwischen den Slides */
    }
    .category-slide {
      flex: 0 0 100%;
      scroll-snap-align: center;
      padding: 1rem 0;
      box-sizing: border-box;
    }
    .categories-wrapper::-webkit-scrollbar {
      display: none;
    }
/*
    .nav-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2rem;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      z-index: 50;
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(8px);
      border-radius: 50%;
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    .nav-arrow:hover {
      background: rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.9);
    }
*/
    .nav-arrow.left {
      left: -2.5rem;
    }
    .nav-arrow.right {
      right: -2.5rem;
    }


/* === Pfeil-Navigation für Kategorien (LifeClock) === */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  z-index: 50;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, color 0.25s ease;
  background: none !important;      /* kein Hintergrund, selbst bei Hover */
  outline: none !important;         /* keine Umrandung */
  border: none !important;          /* kein Border-Highlight */
  box-shadow: none !important;      /* keine Schatten */
  -webkit-tap-highlight-color: transparent; /* verhindert grauen iOS-Touch-Hintergrund */
}

.nav-arrow:hover,
/*.nav-arrow:focus,
.nav-arrow:active*/ {
  background: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.nav-arrow:hover {
  transform: translateY(-50%) scale(1.2);
  color: rgba(255,255,255,0.9);
}


/* === Zu alt Popup === 
#tooOldModal {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
*/


/* === Allgemeine Popup-Animation & Layout === 
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;	
  animation: fadeIn 0.3s ease forwards;
}

.modal.flex { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
*/


/* === Responsive Anpassung für .main-box === */
@media (max-width: 768px) {
  .main-box {
    width: 90% !important;
    margin: 20px;
  }
}


/* === Kompakteres Layout auf mobilen Geräten === */
@media (max-width: 768px) {
  /* Box enger machen */
  .main-box {
    width: 80%;
    padding: 1.2rem;
  }
  
     .nav-arrow {
       width: 5rem;
       height: 3rem;
	 }
	 
	 .mt-8 {
       margin-top: 0 !important;
	   padding-bottom: 2rem;
     }
	 
  /* Weniger Abstand zwischen Überschriften und Inhalten */
  h1 {
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
  }

  h2 {
    font-size: 1.4rem !important;
    margin-bottom: 0.75rem !important;
  }
  
.text-3xl {
    font-size: 1.5rem !important;
    line-height: 1.5rem !important;
}

  /* Gitter enger zusammen */
  .grid {
    gap: 1rem !important;
  }

  /* Etwas weniger Abstand nach unten bei Texten */
  .text-gray-300.mb-8 {
    margin-bottom: 1.5rem !important;
  }

  /* Buttons kompakter */
  a.btn-aurora,
  a[href="index.php"] {
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
  }

  .main-box .bg-white\/10 {
    padding: 5px !important;
  }

  /* Zahlen etwas kleiner für bessere Lesbarkeit im kleineren Feld */
  .main-box .digital {
    font-size: 1.3rem;
  }

  /* Titel leicht kleiner und dichter dran */
  .main-box .text-sm {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }

}