/* ===  Pakete Seite (Javascript) Pakete.html CSS ========== *//* LAYOUT */main,.containerpaket{flex:1}.containerpaket{max-width:1400px;margin:120px auto;padding:32px 16px 50px;/*background-color: #e5ff1d;*/text-align:center;align-items:start}/* pakettitel */.pakettitel{text-align:center;margin-bottom:3rem}.pakettitel h1{font-size:clamp(2.5rem, 4vw, 3rem);/* min 1.8rem, ideal 4vw, max 3rem */margin-bottom:0.2rem;font-weight:bold;color:#222;/* dunkler Text für guten Kontrast */text-shadow:0px 3px 3px rgba(80, 50, 0, 0.2)/* schwebender Effekt: 3px nach rechts, 3px nach unten, Blur 6px */}.pakettitel p{font-size:clamp(0.9rem, 2.5vw, 1.3rem);max-width:850px;/* Textzeilen werden nicht zu lang */margin:0px auto;/* zentriert den <p> */line-height:1.5;/* angenehmer Zeilenabstand */text-align:center;/* Text innerhalb des <p> zentrieren */color:#222;text-shadow:0px 1px 2px rgba(80, 50, 0, 0.2);/* dezenter Schatten für Lesbarkeit und Tiefe */padding:0rem}/* PAKET BOXEN */#paketBox{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));align-items:stretch;gap:20px;padding:20px 20px;/*background-color: #fc0808;*/color:#191414;border-radius:16px;margin-bottom:3rem}/* === HEADER: Titel + Preis nebeneinander === */.paket-header{display:flex;flex-direction:column;justify-content:space-between;align-items:center;margin-bottom:12px;margin-top:10px;padding:10px}.paket-header h2{font-size:1.4rem;font-weight:700;text-transform:uppercase;margin:0}.paket-header .preis-container{display:flex;gap:6px;align-items:baseline;margin:0}.paket-header .alter-preis{font-size:0.95rem;text-decoration:line-through;color:#ef4444}.paket-header .neuer-preis{font-size:1.6rem;font-weight:700;color:#111}/* BADGE */.paket-badge{position:absolute;top:-6px;left:10px;background:#f92626;color:#ffffff;font-size:0.65rem;font-weight:700;padding:3px 8px;border-radius:8px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.3)}/* CARD STYLING */.paket-content{position:relative;box-sizing:border-box;width:100%;padding:16px;border-radius:12px;background:#fff;box-shadow:10px 10px rgba(0, 0, 0, 0.4);display:flex;flex-direction:column;justify-content:flex-start}/* Paket-Hintergründe ändern
.paket-start { background-color: transparent; }
.paket-pro { background-color:  transparent; }
.paket-premium { background-color: transparent; }
.paket-standard { background-color: silver; } *//* Badge-Farben */.badge-pro{background-color:rgb(59, 230, 252);color:rgb(0, 0, 0)}.badge-premium{background-color:rgb(252, 129, 15);color:rgb(0, 0, 0)}.badge-champion{background-color:rgb(35, 67, 154);color:rgb(255, 255, 255)}.badge-start{background-color:rgb(255, 115, 115);color:rgb(0, 0, 0)}/* Icon-Farben */.icon-vip i{color:red}.icon-standard i{color:blue}.paket-content .subtext{font-size:0.85rem;color:#ffffff;margin-bottom:12px;background:#e30615ce;border-radius:8px;padding:4px 8px}/* LISTE DER LEISTUNGEN */.leistungen{list-style:none;padding:0;margin:0;border-radius:12px;box-shadow:0 1px 4px rgba(0, 0, 0, 0.05);flex:1;display:flex;flex-direction:column}.leistungen li{display:flex;align-items:center;padding:0.3em 0.8em;font-size:0.9rem;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb;transition:background-color .2s ease}.leistungen li:last-child{border-bottom:none}.leistungen li:hover{background-color:#f3f4f6}.leistung-icon{flex-shrink:0;/* Verhindert, dass der Icon-Container schrumpft */width:1.8em;/* Feste Breite für den Icon-Platz */margin-right:0.6em}.leistung-icon svg{width:1.8em;height:1.8em;stroke:#10b981;/* margin-right: 0.6em; <-- ENTFERNEN, ist jetzt am Container */flex-shrink:0}.leistung-icon.icon-hidden{opacity:0/* Icon unsichtbar, aber Platz bleibt */}.leistungen li.negativ .leistung-icon svg{stroke:#ef4444}.leistung-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}.leistung-subtext{display:block;font-size:0.75rem;color:#6b7280;margin-top:2px;white-space:normal}.leistung-preis{font-size:0.85rem;font-weight:600;padding-left:6px;flex-shrink:0}/* BUTTON */.anmelden-button{margin:1.5rem auto;padding:10px 20px;background:#e30615ce;color:#ffffff;border:none;border-radius:12px;cursor:pointer;font-size:clamp(0.9rem, 2.5vw, 1rem);font-weight:600;transition:background .3s ease;width:100%;text-decoration:none}.anmelden-button:hover{color:#000000;background-color:rgb(75, 255, 123)}/* Toggle-Button */.toggle-desc{margin-top:8px;background:none;border:none;color:#2f2b2b;font-size:0.85rem;font-weight:600;cursor:pointer}/* Wichtige Hinweise zu unseren Paketen*/.hinweisepakete{display:flexbox;max-width:1200px;text-align:start;background-color:rgb(255, 255, 255);align-items:flex-start;padding:1rem 2rem;margin:10px auto}.hinweisepakete h4{position:relative;padding-bottom:0.5rem;margin-bottom:1rem;font-size:clamp(0.95rem, 3.5vw, 1.2rem)}.hinweisepakete h4::after{content:"";display:block;width:100%;/* Länge der Linie */height:1px;/* Stärke der Linie */background-color:#333;/* Farbe */margin:0.1rem auto 0/* zentriert unter der Überschrift */}.hinweisepakete p{font-size:clamp(0.8rem, 2.5vw, 1rem)}/* Container mit Icon + Text */.iconhinweis{display:flex;align-items:flex-start;/* Icon oben mit Textbeginn ausrichten */gap:0.5rem;/* Abstand zwischen Icon und Text */margin-bottom:0.75rem/* Abstand nach unten */}/* Das Lucide Icon selbst */.iconhinweis svg{flex-shrink:0;/* verhindert, dass das Icon gestaucht wird */width:10px;height:10px;color:#333;/* Iconfarbe */margin-top:2px;stroke-width:4px/* leicht nach unten verschoben für optische Mitte */}/* Text daneben */.iconhinweis p{margin:0;/* Standardabstand entfernen */flex:1;/* Text nimmt restliche Breite */font-size:0.95rem;line-height:1.4}/*=====Preisaushang $ 32 FahrlG======*/.tabelle-wrapper{display:flex;justify-content:center;transform-origin:top center;width:100%;padding:0 10px;/* Verhindert, dass Inhalt am Rand klebt */box-sizing:border-box}/* Dein Tabellencontainer */.tabelleaushang{/*background-color: chartreuse;*/padding:20px;width:100%;/* Flexibel statt feste 1400px */max-width:1400px;/* Maximum für große Bildschirme */margin:0 auto;box-sizing:border-box;overflow-x:auto/* Für breite Tabellen */}/* Grunddesign bleibt gleich */h2{text-align:center;margin-bottom:20px}table{border-collapse:collapse;width:100%/*background-color: #f92626;*/}th,td{border:1px solid #000;padding:6px;text-align:center;vertical-align:middle}th{background:#f5f5f5}td:first-child{text-align:left;font-weight:bold}.sub-row{font-weight:normal;padding-left:20px}.noteg{font-size:12px;font-weight:200;text-wrap:break}.note{font-size:12px;margin-top:15px}.two-col{display:flex;justify-content:space-between;margin-top:30px;width:100%}.col{width:48%}.col table{width:100%}@media (max-width: 1024px){#paketBox{grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:20px}.paket-header h2{font-size:1.2rem}.paket-header .neuer-preis{font-size:1.3rem}/*preisaushang*/.tabelle-wrapper{scale:clamp(0.4, calc(100vw / 1400), 1);padding:4px;margin:0}.tabelleaushang{padding:15px}}@media (max-width: 900px){/*preisaushang*/.tabelle-wrapper{transform:scale(0.99);padding:4px}}@media (max-width: 768px){#paketBox{grid-template-columns:1fr;/* Nur 1 Karte pro Reihe */padding:clamp(8px, 4vw, 16px);gap:12px}.paket-links h2{font-size:clamp(2.3rem, 4vw, 2.3rem)}.alter-preis{font-size:clamp(0.7rem, 2.5vw, 0.9rem)}.neuer-preis{font-size:clamp(1.4rem, 2.5vw, 2rem);margin-bottom:4px}.paket-links .subtext{font-size:clamp(0.7rem, 2.5vw, 0.9rem);margin-bottom:14px}.leistungen li{font-size:clamp(1rem, 2.5vw, 1.1rem);font-weight:600;padding:0.1em 0.8em}.leistung-preis{font-size:clamp(0.75rem, 2.2vw, 0.95rem);font-weight:500;padding:2px 4px}.leistung-subtext{font-size:clamp(0.65rem, 2vw, 0.8rem)}.anmelden-button{width:100%/* Button volle Breite */}.tabelle-wrapper{transform:scale(0.98);padding:4px}.tabelleaushang{font-size:12px;padding:10px}.tabelleaushang h2{font-size:1rem}}@media (max-width:500px){.containerpaket{margin:100px auto;padding:32px 15px 0px;box-sizing:border-box;/* verhindert Überlauf durch Padding */overflow-x:hidden/* keine horizontale Scrollleiste */}#paketBox{grid-template-columns:1fr;gap:16px;padding:12px}.paket-header{flex-direction:column;align-items:flex-start;gap:4px;align-items:center}.paket-header h2{font-size:1.5rem}.paket-header .neuer-preis{font-size:1.5rem}.paket-header .alter-preis{font-size:0.99rem}.leistungen li{font-size:0.95rem;padding:0.25em 0.6em}.leistung-preis{font-size:0.95rem}.tabelle-wrapper{transform:scale(0.95)}}/* Sehr kleine Geräte (bis 400px) */@media (max-width: 400px){.pakettitel h1{font-size:1.7rem}.paket-links h2{font-size:1.1rem}.neuer-preis{font-size:1.2rem}.leistungen li{font-size:0.9rem}/*====Preisliste====*/.tabelle-wrapper{transform:scale(0.98)}}