/* GLOBAL */
 body {
     margin: 0;
     font-family: "Segoe UI", Arial, sans-serif;
     background: #05070b;
     color: #e5e7eb;
 }
 
 /* HERO */
 .hero {
     background: radial-gradient(circle at top, #ff3b3b, #1a1f2b 55%);
     color: #fff;
     padding: 70px 20px;
     text-align: center;
     box-shadow: 0 20px 40px rgba(0,0,0,0.7);
     border-bottom: 1px solid #ff3b3b;
 }
 
 .hero h1 {
     font-size: 40px;
     letter-spacing: 2px;
     text-transform: uppercase;
 }
 
 .hero p {
     margin-top: 10px;
     font-size: 18px;
     color: #f9fafb;
 }
 
 /* MAIN */
 main {
     max-width: 1200px;
     margin: 0 auto;
     padding: 40px 20px 60px;
 }
 
 /* SECTIONS */
 .section {
     margin-bottom: 60px;
 }
 
 .section h2 {
     font-size: 26px;
     margin-bottom: 25px;
     text-align: center;
     color: #f97373;
     letter-spacing: 1px;
     text-transform: uppercase;
 }
 
 /* GRID */
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 25px;
 }
 
 /* CARDS */
 .card, .infoBox {
     background: #0b0f17;
     border-radius: 18px;
     padding: 22px 20px;
     box-shadow: 0 12px 30px rgba(0,0,0,0.8);
     border: 1px solid #1f2937;
     transition: 0.3s ease;
 }
 
 .card:hover, .infoBox:hover {
     transform: translateY(-6px);
     box-shadow: 0 18px 40px rgba(0,0,0,0.9);
     border-color: #ff3b3b;
 }
 
 /* CARD HEADINGS */
 .card h3, .infoBox h3 {
     margin-top: 0;
     margin-bottom: 10px;
     font-size: 20px;
     color: #f9fafb;
 }
 
 /* CARD TEXT */
 .card p, .infoBox p {
     font-size: 15px;
     color: #d1d5db;
     margin: 6px 0;
 }
 
 .tipList {
     list-style: none;
     padding-left: 0;
     margin-top: 12px;
     opacity: 0;
     max-height: 0;
     overflow: hidden;
     transition: 0.4s ease;
 }
 
 .tipList li {
     font-size: 14px;
     margin: 4px 0;
     color: #e5e7eb;
 }
 
 /* INFOBOX TEXT (FADE-IN ON HOVER) */
 .infoText {
     opacity: 0;
     max-height: 0;
     overflow: hidden;
     transition: 0.35s ease;
 }
 
 .infoBox:hover .infoText {
     opacity: 1;
     max-height: 300px;
 }
 
 /* DISCIPLIN BUTTON */
 .discBtn {
     margin-top: 10px;
     width: 100%;
     padding: 10px;
     border-radius: 10px;
     border: none;
     background: linear-gradient(90deg, #ef4444, #b91c1c);
     color: #fff;
     font-size: 15px;
     cursor: pointer;
     transition: 0.25s ease;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .discBtn:hover {
     filter: brightness(1.15);
     transform: translateY(-2px);
 }
 
 /* FORM ELEMENTS (PACE) */
 .card form label {
     display: block;
     font-size: 13px;
     margin-top: 8px;
     margin-bottom: 3px;
     color: #9ca3af;
 }
 
 .card input {
     width: 100%;
     padding: 6px 8px;
     border-radius: 8px;
     border: 1px solid #374151;
     background: #020617;
     color: #e5e7eb;
     font-size: 14px;
     margin-bottom: 4px;
 }
 
 .card input:focus {
     outline: none;
     border-color: #ff3b3b;
     box-shadow: 0 0 0 1px #ff3b3b;
 }
 
 /* PACE BUTTON */
 .paceBtn {
     margin-top: 10px;
     width: 100%;
     padding: 9px;
     border-radius: 10px;
     border: none;
     background: linear-gradient(90deg, #ef4444, #b91c1c);
     color: #fff;
     font-size: 15px;
     cursor: pointer;
     transition: 0.25s ease;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .paceBtn:hover {
     filter: brightness(1.1);
     transform: translateY(-2px);
 }
 
 /* PACE OUTPUT */
 #paceOutput {
     margin-top: 10px;
     font-size: 14px;
     color: #e5e7eb;
 }
 
 /* FEATURE LISTS */
 .featureList {
     list-style: none;
     padding-left: 0;
     margin: 0 0 15px 0;
 }
 
 .featureList li {
     font-size: 14px;
     margin: 4px 0;
     color: #e5e7eb;
 }
 
 /* PREMIUM LINK BUTTON */
 .linkBtn {
     display: inline-block;
     margin-top: 12px;
     padding: 10px 14px;
     background: #ff3b3b;
     color: white;
     border-radius: 10px;
     text-decoration: none;
     font-weight: 600;
     transition: 0.25s ease;
 }
 
 .linkBtn:hover {
     background: #ff5555;
     transform: translateY(-2px);
 }
 
 /* FOOTER */
 footer {
     text-align: center;
     padding: 18px;
     border-top: 1px solid #111827;
     background: #020617;
     color: #9ca3af;
     font-size: 13px;

 }
/* Sichtbarkeit aktivieren, wenn JS die Klasse .show setzt */
.tipList.show {
    opacity: 1;
    max-height: 500px;
    padding-top: 10px;
}