/* =================================
   🌐 GLOBAL – ruhiger Hintergrund
================================= */

body{
  background:
    linear-gradient(
      180deg,
      #f3f6fb 0%,
      #eef2f7 100%
    ) !important;
      font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color:var(--text) !important;
}

/* Dark Mode Hintergrund → nicht einfach schwarz! */
@media (prefers-color-scheme: dark){
  body{
    background:
      radial-gradient(circle at 20% 10%, rgba(80,120,180,0.08), transparent 40%),
      #0f141a !important;
  }
}


/* =================================
   ✍️ TYPO – mehr Premium
================================= */

h1{
  font-size:clamp(2.2rem,5vw,2.8rem);
  letter-spacing:-0.025em;
  margin-bottom:10px;
  text-align:center;
text-shadow: 0 1px 1px rgba(0,0,0,0.08);

  background:linear-gradient(
    135deg,
    #1c1c1e 0%,      /* sattes Apple-Dark */
    #4b4a57 35%,     /* mehr Kontrast */
    #8e6f7e 65%,     /* edles Rosé */
    #b89572 100%     /* warmes Gold-Beige */
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media (prefers-color-scheme: light){
  h1{
    filter: saturate(1.05) contrast(1.05);
  }
}
@media (prefers-color-scheme: dark){

  h1{
    background:linear-gradient(
      120deg,
      #e6f1f5 0%,
      #7fa3b8 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }

}
.subtitle{
  text-align:left;
  color:var(--text-soft);
  line-height:1.6;
  max-width:560px;
  margin:0 auto;
}


/* =================================
   🧊 CONTAINER – Apple Card
================================= */

.container-yellow{
  max-width:820px !important;
  margin:48px auto !important;
  padding:32px 26px !important;

  background:none !important;
  backdrop-filter:blur(20px);

  border:1px solid rgba(0,0,0,0.06) !important;
  border-radius:32px !important;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);

}

.container-yellow{
  transform:translateY(0);
  transition:transform .3s ease;
}


/* Dark Mode Container */
@media (prefers-color-scheme: dark){

  .container-yellow{
    background:rgba(255,255,255,0.04) !important;

    border:1px solid rgba(255,255,255,0.08) !important;

    box-shadow:
      0 30px 80px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }

}


/* =================================
   📊 GRID – mehr Luft
================================= */

.tool-grid{
  display:grid !important;
  gap:16px;
  margin-top:30px;

  grid-template-columns:repeat(2,1fr);
}

@media (min-width:740px){
  .tool-grid{
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
}


/* =================================
   🧩 CARDS – Premium Feel
================================= */

.tool-card{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding:22px 18px;
  min-height:115px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.9),
      rgba(245,248,255,0.9)
    ) !important;
  border-radius:22px;
  border:1px solid rgba(0,0,0,0.05);

  text-align:center;
  text-decoration:none;
  color:var(--text);

  box-shadow:
    0 8px 24px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition:
    transform .22s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s ease,
    background .22s ease;
}

/* Hover → subtil + hochwertig */
.tool-card:hover .tool-icon i{
  color:#8e6f7e; /* Rosé aus dem h1 */
  filter:drop-shadow(0 2px 6px rgba(142,111,126,0.35));
}

/* Dark Mode Cards */
@media (prefers-color-scheme: dark){

  .tool-card{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(80,120,180,0.04)
      ) !important;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
      0 12px 30px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }

  .tool-card:hover{
    box-shadow:
      0 18px 50px rgba(0,0,0,0.65);
  }

}

.tool-card:hover .tool-icon i{
  color:#4e4d5e;
  filter:drop-shadow(0 2px 6px rgba(142,111,126,0.25));
}
/* =================================
   🧠 CARD CONTENT
================================= */

.tool-title{
  font-weight:600;
  margin-bottom:8px;
  letter-spacing:-0.01em;
   font-size:0.98rem;
 
}

.tool-icon{
  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:rgba(0,0,0,0.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 6px 16px rgba(0,0,0,0.08);

  transition:all .25s cubic-bezier(.22,.61,.36,1);
}
.tool-icon i{
  color:#1d1d1f;
  font-size:18px;
  opacity:0.9;
}

@media (prefers-color-scheme: dark){
  .tool-icon i{
    color:#f5f5f7;
    opacity:0.9;
  }
}

@media (prefers-color-scheme: dark){

  .tool-icon{
    background:rgba(255,255,255,0.05);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 8px 20px rgba(0,0,0,0.6);
  }

}

.tool-card:hover .tool-icon{
  transform:translateY(-2px);

  background:rgba(142,111,126,0.08); /* statt blau */

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 10px 22px rgba(0,0,0,0.12);
}

.tool-card:hover .tool-icon i{
  color:#4e4d5e; /* neutral violett-grau */
  filter:drop-shadow(0 2px 6px rgba(21, 6, 6, 0.25));
}

.tool-card:hover .tool-icon{
  background:rgba(0,0,0,0.05);
}


@media (prefers-color-scheme: dark){

  .tool-card:hover .tool-icon{
    transform:translateY(-2px);

    /* leicht aufgehellt statt dunkler */
    background:rgba(255,255,255,0.06);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 10px 26px rgba(0,0,0,0.7);
  }

  .tool-card:hover .tool-icon i{
    color:#d0d0d0; /* aufgehellte Rosé-Variante */
    filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  }

}
/* =================================
   🔙 BACK BUTTON – minimalistisch
================================= */

#back-button{
  display:block;
  margin:28px auto;

  padding:10px 18px;

  border-radius:999px;
  border:1px solid rgba(0,0,0,0.08);

  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(8px);

  color:var(--text);

  transition:all .18s ease;
}

#back-button:hover{
  background:rgba(255,255,255,0.9);
}

@media (prefers-color-scheme: dark){

  #back-button{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
  }

  #back-button:hover{
    background:rgba(255,255,255,0.1);
  }

}


/* =================================
   🍞 BREADCRUMB – ultra clean
================================= */

.breadcrumb{
  opacity:.7;
  font-size:.9rem;
}

.breadcrumb a{
  color:var(--text-soft);
}


/* =================================
   📱 MOBILE FEINSCHLIFF
================================= */

@media (max-width:520px){

  .container-yellow{
    padding:24px 16px !important;
    border-radius:24px !important;
  }

  .tool-card{
    min-height:100px;
    padding:16px;
  }

}

.social-icons a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:38px !important;
  height:38px !important;

  border-radius:12px !important;

  background:rgba(0,0,0,0.04) !important;
  border:1px solid rgba(0,0,0,0.06) !important;

  color:#6b6a7a !important;

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease !important;
}

.social-icons a:hover{
  transform:translateY(-2px) !important;

  background:rgba(142,111,126,0.08) !important;

  color:#4e4d5e !important;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.12) !important;
}

@media (prefers-color-scheme: dark){

  .social-icons a{
    background:rgba(255,255,255,0.04) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    color:#9aa3ad !important;
  }

  .social-icons a:hover{
    background:rgba(255,255,255,0.06) !important;
    color:#e7e5e6dc  !important;

    box-shadow:
      0 10px 24px rgba(0,0,0,0.6) !important;
  }

}

footer{
  margin-top:60px !important;
  padding:28px 20px !important;

  text-align:center !important;

  color:rgba(0,0,0,0.55) !important;

  font-size:0.9rem !important;
  line-height:1.6 !important;
  letter-spacing:0.01em !important;

  border-top:1px solid rgba(0,0,0,0.06) !important;
}

footer a{
  color:rgba(0,0,0,0.6) !important;
  text-decoration:none !important;

  transition:color .2s ease !important;
}

footer a:hover{
  color:#4e4d5e !important;
}

@media (prefers-color-scheme: dark){

  footer{
    color:rgba(255,255,255,0.5) !important;
    border-top:1px solid rgba(255,255,255,0.08) !important;
  }

  footer a{
    color:rgba(255,255,255,0.6) !important;
  }

  footer a:hover{
    color:#e7e5e6dc !important;
  }

}

@media (max-width:520px){

  h1{
    font-size:clamp(1.9rem,6vw,2.2rem); /* etwas kleiner */
    line-height:1.15;                   /* enger + cleaner */
    
    word-break:break-word;
    hyphens:auto;

    padding:0 4px; /* verhindert Rand-Kollision */
  }

}

@media (max-width:520px){

  .container-yellow{
    background:transparent !important;
    backdrop-filter:none !important;

    box-shadow:none !important;
    border:none !important;

    margin:20px auto !important;
    padding:12px 12px !important;
  }

}

@media (max-width:520px){

  .tool-card{
    border-radius:18px;
  }

}

@media (max-width:520px){

  .subtitle{
    font-size:0.95rem;
    line-height:1.5;
  }

}

.subtitle{
  text-align:center;
  color:rgba(0,0,0,0.65);

  font-size:1rem;
  line-height:1.6;
  letter-spacing:-0.005em !important;

  max-width:560px;
  margin:0 auto !important;

  font-weight:400 !important;
}

@media (prefers-color-scheme: dark){
  .subtitle{
    color:rgba(255,255,255,0.7);
  }
}
@media (max-width:520px){

  .subtitle{
    max-width:100% !important;
    padding:0 8px !important;
  }

}