/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
/*.terms-of-service .terms-hero {   Der Hauptbereich ganz oben (Hero-Bereich) für die AGB-Seite */
    /*text-align: center;   Inhalt zentrieren */
    /*margin-bottom: 70px;   Abstand nach unten */
    /*padding: 60px 0;   Oben und unten 60px Innenabstand, seitlich 0 */
    /*background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 97%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);   Farbverlauf als Hintergrund */
    /*border-radius: 30px;   Ecken abrunden */
/*}*/

.terms-of-service .terms-hero .badge {  /* Badge im Hero-Bereich */
    display: inline-block;  /* Nebeneinander darstellbar, aber wie Block */
    padding: 8px 20px;  /* Innenabstand oben/unten 8px, seitlich 20px */
    background-color: var(--surface-color);  /* Hintergrundfarbe */
    border-radius: 30px;  /* Starke Abrundung, Pillenform */
    color: var(--accent-color);  /* Textfarbe */
    font-size: 0.95rem;  /* Leicht verkleinerte Schrift */
    margin-bottom: 25px;  /* Abstand nach unten */
}

.terms-of-service .terms-hero h2 {  /* Überschrift im Hero */
    font-size: 3rem;  /* Sehr große Schrift */
    margin-bottom: 15px;  /* Abstand nach unten */
    background: linear-gradient(45deg, var(--heading-color), var(--accent-color));  /* Farbverlauf im Text */
    -webkit-background-clip: text;  /* Verlauf auf Text anwenden (Webkit) */
    -webkit-text-fill-color: transparent;  /* Text durchsichtig, Verlauf sichtbar (Webkit) */
    background-clip: text;  /* Verlauf auf Text anwenden (Standard) */
}

.terms-of-service .terms-hero p {  /* Text im Hero */
    font-size: 1.2rem;  /* Etwas größere Schrift */
    color: color-mix(in srgb, var(--default-color), transparent 20%);  /* Etwas heller als Standardfarbe */
    max-width: 600px;  /* Maximale Breite 600px */
    margin: 0 auto 30px;  /* Oben 0, unten 30px, horizontal zentriert */
}

.terms-of-service .terms-hero .terms-highlights {  /* Container für Highlights */
    display: flex;  /* Flexbox-Layout */
    justify-content: center;  /* Zentriert Kinder horizontal */
    gap: 30px;  /* Abstand zwischen den Elementen */
}

@media (max-width: 576px) {
    .terms-of-service .terms-hero .terms-highlights {  /* Responsive: Highlights untereinander */
        flex-direction: column;  /* Senkrecht anordnen */
        align-items: center;  /* Zentrieren */
        gap: 15px;  /* Kleinerer Abstand */
    }
}

.terms-of-service .terms-hero .terms-highlights .highlight-item {  /* Einzelnes Highlight */
    display: flex;  /* Flex-Layout */
    align-items: center;  /* Vertikal zentrieren */
    gap: 10px;  /* Abstand zwischen Icon und Text */
    padding: 12px 25px;  /* Innenabstand */
    background-color: var(--surface-color);  /* Hintergrund */
    border-radius: 15px;  /* Abrundung */
}

.terms-of-service .terms-hero .terms-highlights .highlight-item i {  /* Icon im Highlight */
    font-size: 1.2rem;  /* Größe des Icons */
    color: var(--accent-color);  /* Farbe des Icons */
}

.terms-of-service .terms-hero .terms-highlights .highlight-item span {  /* Text im Highlight */
    font-weight: 500;  /* Halbfette Schrift */
}

.terms-of-service .terms-grid {  /* Grid für die Cards */
    display: grid;  /* Grid-Layout */
    grid-template-columns: repeat(3, 1fr);  /* 3 gleich breite Spalten */
    gap: 30px;  /* Abstand zwischen den Cards */
    margin-bottom: 70px;  /* Abstand nach unten */
}

@media (max-width: 991px) {
    .terms-of-service .terms-grid {  /* Grid bei kleinerem Bildschirm */
        grid-template-columns: repeat(2, 1fr);  /* 2 Spalten */
    }
}

@media (max-width: 767px) {
    .terms-of-service .terms-grid {  /* Grid bei sehr schmalem Bildschirm */
        grid-template-columns: 1fr;  /* 1 Spalte */
    }
}

.terms-of-service .terms-grid .terms-card {  /* Einzelne Card im Grid */
    background-color: var(--surface-color);  /* Hintergrund */
    border-radius: 20px;  /* Abrundung */
    overflow: hidden;  /* Inhalt nicht rauslaufen lassen */
    transition: transform 0.3s;  /* Animation für Transformationen */
}

.terms-of-service .terms-grid .terms-card:hover {  /* Card bei Hover */
    transform: translateY(-10px);  /* Card hebt leicht ab */
}

.terms-of-service .terms-grid .terms-card:hover .header-icon {  /* Icon-Box bei Hover */
    transform: scale(1.1);  /* Etwas größer */
    background-color: var(--accent-color);  /* Neue Hintergrundfarbe */
}

.terms-of-service .terms-grid .terms-card:hover .header-icon i {  /* Icon bei Hover */
    color: var(--contrast-color);  /* Kontrastfarbe */
}

.terms-of-service .terms-grid .terms-card .card-header {  /* Kopf der Card */
    padding: 30px;  /* Innenabstand */
    text-align: center;  /* Zentriert */
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);  /* Sehr heller Rand unten */
}

.terms-of-service .terms-grid .terms-card .card-header .header-icon {  /* Icon-Box */
    width: 60px;  /* Breite */
    height: 60px;  /* Höhe */
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);  /* Sehr heller Verlauf-Hintergrund */
    border-radius: 15px;  /* Abrundung */
    display: flex;  /* Flex-Layout */
    align-items: center;  /* Vertikal zentriert */
    justify-content: center;  /* Horizontal zentriert */
    margin: 0 auto 20px;  /* Zentriert mit Abstand nach unten */
    transition: all 0.3s;  /* Weiche Animationen */
}

.terms-of-service .terms-grid .terms-card .card-header .header-icon i {  /* Icon */
    font-size: 1.5rem;  /* Größe */
    color: var(--accent-color);  /* Farbe */
    transition: color 0.3s;  /* Weiche Farb-Übergänge */
}

.terms-of-service .terms-grid .terms-card .card-header h3 {  /* Überschrift in Card */
    font-size: 1.4rem;  /* Größe */
    margin: 0;  /* Kein Abstand */
}

.terms-of-service .terms-grid .terms-card .card-content {  /* Card-Inhalt */
    padding: 30px;  /* Innenabstand */
}

.terms-of-service .terms-grid .terms-card .card-content p {  /* Text im Card-Inhalt */
    color: color-mix(in srgb, var(--default-color), transparent 30%);  /* Heller Text */
    margin-bottom: 20px;  /* Abstand nach unten */
    line-height: 1.6;  /* Zeilenhöhe */
}

.terms-of-service .terms-grid .terms-card .card-content .check-list {  /* Checkliste */
    list-style: none;  /* Keine Standard-Aufzählung */
    padding: 0;  /* Kein Innenabstand */
    margin: 0;  /* Kein Außenabstand */
}

.terms-of-service .terms-grid .terms-card .card-content .check-list li {  /* Ein Punkt der Checkliste */
    position: relative;  /* Ermöglicht Pseudoelemente */
    padding-left: 25px;  /* Platz für Häkchen */
    margin-bottom: 12px;  /* Abstand nach unten */
    color: color-mix(in srgb, var(--default-color), transparent 20%);  /* Leicht heller Text */
}

.terms-of-service .terms-grid .terms-card .card-content .check-list li:last-child {  /* Letzter Checklistenpunkt */
    margin-bottom: 0;  /* Kein Abstand nach unten */
}

.terms-of-service .terms-grid .terms-card .card-content .check-list li::before {  /* Häkchen vor jedem Punkt */
    content: "✓";  /* Häkchen als Symbol */
    position: absolute;  /* Absolut positioniert */
    left: 0;  /* Ganz links */
    color: var(--accent-color);  /* In Akzentfarbe */
}

.terms-of-service .terms-grid .terms-card .card-content .restrictions-list {  /* Einschränkungs-Liste */
    display: grid;  /* Grid-Layout */
    gap: 15px;  /* Abstand zwischen Items */
}

.terms-of-service .terms-grid .terms-card .card-content .restrictions-list .restriction-item {  /* Einzelne Einschränkung */
    display: flex;  /* Flex-Layout */
    align-items: center;  /* Vertikal zentriert */
    gap: 12px;  /* Abstand zwischen Icon und Text */
}

.terms-of-service .terms-grid .terms-card .card-content .restrictions-list .restriction-item i {  /* Icon der Einschränkung */
    color: #dc3545;  /* Rote Farbe (Fehler/Hinweis) */
    font-size: 1.1rem;  /* Größe */
}

.terms-of-service .terms-grid .terms-card .card-content .restrictions-list .restriction-item span {  /* Text zur Einschränkung */
    color: #444;  /* Heller Text */
    font-size: 0.95rem;  /* Etwas kleiner */
}

.terms-of-service .terms-points {  /* Bereich für weitere wichtige Punkte */
    margin-bottom: 70px;  /* Abstand nach unten */
    text-align: center;  /* Zentriert */
}

.terms-of-service .terms-points h3 {  /* Überschrift bei den Punkten */
    font-size: 2rem;  /* Große Schrift */
    margin-bottom: 40px;  /* Abstand nach unten */
}

.terms-of-service .terms-points .points-grid {  /* Grid für die Punkte */
    display: grid;  /* Grid-Layout */
    grid-template-columns: repeat(3, 1fr);  /* 3 Spalten */
    gap: 30px;  /* Abstand zwischen Items */
}

@media (max-width: 991px) {
    .terms-of-service .terms-points .points-grid {  /* 2 Spalten auf kleinerem Bildschirm */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .terms-of-service .terms-points .points-grid {  /* 1 Spalte bei Mobil */
        grid-template-columns: 1fr;
    }
}

.terms-of-service .terms-points .point-item {  /* Einzelner Punkt */
    background-color: var(--surface-color);  /* Hintergrund */
    border-radius: 20px;  /* Abrundung */
    padding: 30px;  /* Innenabstand */
    transition: transform 0.3s;  /* Animation beim Bewegen */
}

.terms-of-service .terms-points .point-item:hover {  /* Punkt bei Hover */
    transform: translateY(-5px);  /* Leicht nach oben schieben */
}

.terms-of-service .terms-points .point-item:hover .point-icon {  /* Icon-Box bei Hover */
    background-color: var(--accent-color);  /* Farbwechsel */
}

.terms-of-service .terms-points .point-item:hover .point-icon i {  /* Icon bei Hover */
    color: var(--contrast-color);  /* Farbwechsel */
}

.terms-of-service .terms-points .point-item .point-icon {  /* Icon-Box */
    width: 50px;  /* Breite */
    height: 50px;  /* Höhe */
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);  /* Heller Hintergrund */
    border-radius: 15px;  /* Abrundung */
    display: flex;  /* Flexbox */
    align-items: center;  /* Vertikal zentriert */
    justify-content: center;  /* Horizontal zentriert */
    margin: 0 auto 20px;  /* Zentriert, Abstand nach unten */
    transition: all 0.3s;  /* Sanfte Übergänge */
}

.terms-of-service .terms-points .point-item .point-icon i {  /* Icon */
    font-size: 1.3rem;  /* Größe */
    color: var(--accent-color);  /* Farbe */
    transition: color 0.3s;  /* Sanfte Farbwechsel */
}

.terms-of-service .terms-points .point-item .point-content h4 {  /* Überschrift zu Punkt */
    font-size: 1.2rem;  /* Größe */
    margin-bottom: 10px;  /* Abstand nach unten */
}

.terms-of-service .terms-points .point-item .point-content p {  /* Beschreibung zum Punkt */
    color: color-mix(in srgb, var(--default-color), transparent 30%);  /* Heller Text */
    font-size: 0.95rem;  /* Etwas kleiner */
    margin: 0;  /* Kein Abstand */
}

.terms-of-service .terms-notices {  /* Bereich für Hinweise */
    margin-bottom: 70px;  /* Abstand nach unten */
}

.terms-of-service .terms-notices .notice-wrapper {  /* Wrapper für Hinweise */
    background-color: var(--surface-color);  /* Hintergrund */
    border-radius: 30px;  /* Abrundung */
    padding: 0px;  /* Innenabstand */
}

.terms-of-service .terms-notices .notice-items {  /* Grid für Hinweis-Elemente */
    display: grid;  /* Grid-Layout */
    gap: 2px;  /* Abstand zwischen den Items */
}

.terms-of-service .terms-notices .notice-items .notice-item {  /* Einzelner Hinweis */
    display: flex;  /* Flex-Layout */
    gap: 10px;  /* Abstand zwischen Marker und Inhalt */
    padding: 25px;  /* Innenabstand */
    background-color: var(--background-color);  /* Hintergrund */
    border-radius: 15px;  /* Abrundung */
}

.terms-of-service .terms-notices .notice-items .notice-item .notice-marker {  /* Marker-Icon */
    flex-shrink: 0;  /* Wird nicht kleiner */
    width: 40px;  /* Breite */
    height: 40px;  /* Höhe */
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);  /* Heller Hintergrund */
    border-radius: 12px;  /* Abrundung */
    display: flex;  /* Flexbox */
    align-items: center;  /* Vertikal zentriert */
    justify-content: center;  /* Horizontal zentriert */
}

.terms-of-service .terms-notices .notice-items .notice-item .notice-marker i {  /* Marker-Icon selbst */
    font-size: 1.2rem;  /* Größe */
    color: var(--accent-color);  /* Farbe */
}

.terms-of-service .terms-notices .notice-items .notice-item .notice-content h4 {  /* Überschrift des Hinweises */
    font-size: 1.2rem;  /* Größe */
    margin-bottom: 8px;  /* Abstand nach unten */
}

.terms-of-service .terms-notices .notice-items .notice-item .notice-content p {  /* Text im Hinweis */
    color: #444;  /* Heller Text */
    margin: 0;  /* Kein Abstand */
    font-size: 1.05rem;  /* Etwas kleiner */
}

.terms-of-service .terms-contact .contact-wrapper {  /* Kontaktbereich */
    background: none;  /* Kein Hintergrund */
    border-radius: 30px;  /* Abrundung */
    padding: 0px;  /* Innenabstand */
    text-align: left;  /* Text linksbündig */
}

.terms-of-service .terms-contact .contact-wrapper .contact-content {  /* Inhalt Kontaktbereich */
    max-width: 600px;  /* Maximale Breite */
    margin: 0 auto;  /* Horizontale Zentrierung des Blocks, Text bleibt links */
    text-align: left;  /* Text linksbündig */
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-text {  /* Textblock */
    margin-bottom: 30px;  /* Abstand nach unten */
    text-align: left;  /* Text linksbündig */
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-text h4 {  /* Überschrift */
    font-size: 1.8rem;  /* Größe */
    margin-bottom: 10px;  /* Abstand nach unten */
    text-align: left;  /* Text linksbündig */
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-text p {  /* Text */
    color: color-mix(in srgb, var(--default-color), transparent 30%);  /* Heller Text */
    text-align: left;  /* Text linksbündig */
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-actions {  /* Aktionen (z.B. Buttons) */
    display: flex;  /* Flex-Layout */
    justify-content: flex-start;  /* Buttons nach links ausrichten */
    gap: 20px;  /* Abstand zwischen Buttons */
}


@media (max-width: 576px) {
    .terms-of-service .terms-contact .contact-wrapper .contact-content .contact-actions {
        flex-direction: column;
        align-items: center;
    }
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-actions a {
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-actions .btn-primary {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-actions .btn-outline {
    background-color: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
}

.terms-of-service .terms-contact .contact-wrapper .contact-content .contact-actions .btn-outline:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}