/* ========================= */
/* ✅ BASIS + WALLPAPER (NEU BALANCIERT) */
/* ========================= */

body{
  margin:0;
  font-family:Arial, sans-serif;
  text-align:center;

  /* ✅ Neurofreundliches Overlay */
  background:
    linear-gradient(
      rgba(4,56,93,0.58) 0%,
      rgba(4,56,93,0.78) 100%
    ),
    url("wallpaper.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ========================= */
/* ✅ KLARA LOGO */
/* ========================= */

.intro-logo{
  position:fixed;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
}

.intro-logo img{
  width:180px;
}

/* ========================= */
/* ✅ CONTENT BEREICH */
/* ========================= */

.intro{
  padding:220px 20px 40px;
  max-width:420px;
  margin:auto;
}

/* ========================= */
/* ✅ GLASS BOX */
/* ========================= */

.glass-box{
  background:#04385d;
  color:#e6f0fa;

  padding:22px;
  border-radius:20px;
  margin:20px 0;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.35),
    0 8px 18px rgba(0,0,0,0.35);
}

/* ========================= */
/* ✅ OPTIONEN (WIZARD) */
/* ========================= */

.options{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ========================= */
/* ✅ STEP CARDS */
/* ========================= */

.card{
  background: linear-gradient(180deg, #3486cc 0%, #04385d 100%);
  color:white;

  padding:16px;
  border-radius:16px;
  cursor:pointer;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -3px 8px rgba(0,0,0,0.35),
    0 8px 18px rgba(0,0,0,0.35);

  transition:0.2s ease;
}

.card:hover{
  background: linear-gradient(180deg, #4fa3ea 0%, #0e507f 100%);
  transform:translateY(-3px);
}

.card:active{
  transform:translateY(1px);
}

/* ========================= */
/* ✅ BUTTONS */
/* ========================= */

button{
  padding:14px 22px;
  color:white;
  border:none;
  border-radius:14px;
  cursor:pointer;
  margin-top:15px;

  background: linear-gradient(180deg, #4fa3ea 0%, #0e507f 100%);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.5),
    0 6px 14px rgba(0,0,0,0.35);

  transition:0.2s;
}

button:hover{
  background: linear-gradient(180deg, #6bb7ff 0%, #0a3d63 100%);
}

button:active{
  transform:translateY(1px);
}

/* ✅ Mehr laden Button leicht abgesetzt */
#loadMoreBtn{
  margin-top:10px;
}

/* ========================= */
/* ✅ ERGEBNIS CARDS */
/* ========================= */

.results-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

/* ✅ Ergebniskarte */
.result-card{
  display:flex;
  gap:12px;
  align-items:flex-start;

  background: linear-gradient(180deg, #3486cc 0%, #04385d 100%);
  color:white;

  padding:12px;
  border-radius:16px;
  cursor:pointer;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -3px 8px rgba(0,0,0,0.35),
    0 8px 18px rgba(0,0,0,0.35);

  transition:0.2s;
}

.result-card:hover{
  background: linear-gradient(180deg, #4fa3ea 0%, #0e507f 100%);
}

/* ✅ Bild */
.result-card img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
}

/* ✅ Text */
.result-text{
  text-align:left;
}

.result-title{
  font-weight:600;
  font-size:15px;
  margin-bottom:4px;
}

.result-excerpt{
  font-size:13px;
  opacity:0.95;
  line-height:1.5;
}

/* ========================= */
/* ✅ RESPONSIVE */
/* ========================= */

@media (min-width:650px){

  .intro{
    max-width:600px;
  }

  .result-card img{
    width:90px;
    height:90px;
  }
}