* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body {
    font-family:Arial,sans-serif;
    background:#eaf4ff;
    color:#222;
}


.container {
    max-width:1000px;
    margin:auto;
    padding:20px;
}



.hero {
    background:#d7ebff;
    padding:45px 0;
    text-align:center;
}



.logo {
    font-size:38px;
    font-weight:bold;
}


.logo span {
    color:#2563eb;
}



.subtitle {
    margin-top:8px;
    font-size:18px;
}



.subjects {
    margin-top:12px;
    font-size:16px;
}



.top-bar {
    position:relative;
    text-align:center;
}



.rating-box {

    position:absolute;
    right:0;
    top:0;

    background:white;

    padding:15px;

    border-radius:12px;

    border:1px solid #cbd5e1;

}



.stars {

    color:#f59e0b;
    font-size:22px;

}



.avg {

    font-weight:bold;
    font-size:18px;

}



.nav {

    margin-top:25px;
    text-align:center;

}



/* ALLE BUTTONS DUNKELBLAU */

.btn,
button {

    display:inline-block;

    background:#2563eb !important;

    color:white !important;

    text-decoration:none;

    padding:12px 22px;

    margin:5px;

    border-radius:8px;

    border:none;

    cursor:pointer;

}



.btn:hover,
button:hover {

    background:#1d4ed8 !important;

}





.card {

    background:white;

    margin-top:25px;

    padding:25px;

    border-radius:12px;

    border:1px solid #dbeafe;

    border-left:5px solid #2563eb;

}



.card h2 {

    font-size:24px;

    margin-bottom:18px;

}



.card p,
.card li {

    font-size:17px;

    line-height:1.6;

}




form {

    width:100%;

    text-align:center;

}



input,
textarea,
select {

    width:85%;

    padding:15px;

    margin:10px auto;

    display:block;

    border-radius:10px;

    border:1px solid #ccc;

    font-size:17px;

}



textarea {

    height:140px;

}




.booking-bottom {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}



.price-box {

    background:white;

    padding:15px 25px;

    border-radius:10px;

    border:1px solid #dbeafe;

    font-size:18px;

}



footer {

    text-align:center;

    padding:30px;

}




.admin-small {

    font-size:11px;

    color:#999;

}






/* DANKESBALKEN */

.thanks-message {

    position:fixed;

    top:0;

    left:50%;

    transform:translateX(-50%) translateY(-100%);

    width:100%;

    background:#2563eb;

    color:white;

    padding:18px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    border-radius:0 0 18px 18px;

    z-index:99999;

    animation:messageTop 5s forwards;

}



.thanks-message span {

    display:block;

    margin-top:8px;

    font-size:15px;

}



@keyframes messageTop {


0% {

transform:translateX(-50%) translateY(-100%);

}


15% {

transform:translateX(-50%) translateY(0);

}


85% {

transform:translateX(-50%) translateY(0);

}


100% {

transform:translateX(-50%) translateY(-100%);

}

}






html {

scroll-behavior:smooth;

}







/* HANDY */

@media(max-width:700px){


.container {

    padding:10px;

}



.hero {

    padding:25px 10px;

}



.logo {

    font-size:30px;

}



.top-bar {

    display:flex;

    flex-direction:column;

}



.rating-box {

    position:static;

    width:92%;

    margin:20px auto;

}



.card {

    width:92%;

    margin-left:auto;

    margin-right:auto;

    padding:22px;

}



.card h2 {

    font-size:24px;

}



.card p,
.card li {

    font-size:18px;

}



input,
textarea,
select {

    width:100%;

    font-size:17px;

    padding:15px;

}



textarea {

    height:160px;

}



button,
.btn {

    width:100%;

    font-size:17px;

    padding:14px;

}



.booking-bottom {

    flex-direction:column;

}



.stars {

    font-size:24px;

}






/* Bewertung Handy */

.card h2 {

    font-size:24px;

}


input,
textarea,
select {

    font-size:17px;

}



}
/* KAUFEN SEITE HANDY FIX */

@media(max-width:700px){


body{
    font-size:18px;
}



.container{

    width:100%;
    padding:8px;

}



.hero{

    padding:25px 12px;

}



.hero h1{

    font-size:30px;

}



.hero p{

    font-size:17px;

    line-height:1.5;

}




.card{

    width:92% !important;

    margin:20px auto !important;

    padding:22px !important;

    border-radius:14px;

}



.card h2{

    font-size:26px !important;

}



.card p{

    font-size:18px;

    line-height:1.6;

}




form{

    width:100% !important;

}




input,
textarea,
select{

    width:100% !important;

    font-size:18px !important;

    padding:15px !important;

    margin:10px 0 !important;

}




button,
.btn{

    width:100% !important;

    display:block;

    font-size:18px !important;

    padding:15px !important;

    margin:10px 0 !important;

}




.booking-bottom{

    flex-direction:column !important;

    gap:15px;

}



.price-box{

    width:100%;

    text-align:center;

    font-size:20px;

}





#code-meldung{

    font-size:17px;

}



}
.vergleich-table {

    width:100%;

    border-collapse:separate;

    border-spacing:25px 12px;

}



.vergleich-table th {

    background:#d7ebff;

    padding:18px;

    border-radius:12px;

    font-size:20px;

}



.vergleich-table td {

    background:#f8fbff;

    padding:18px;

    border-radius:12px;

    text-align:center;

    font-size:17px;

    border:1px solid #dbeafe;

}



.vergleich-table .meinpreis {

    color:#2563eb;

    font-weight:bold;

    font-size:20px;

}




@media(max-width:700px){


.vergleich-table {

    border-spacing:8px;

}


.vergleich-table th,
.vergleich-table td {

    font-size:15px;

    padding:12px;

}


}
.review-rating {
    margin-top: 6px;
    text-align: center;
}


.review-rating .avg {
    font-size: 28px;
    font-weight: bold;
    color: #222;
    margin-top: 4px;
}

.review-rating .count {
    font-size: 20px;
    color: #555;
    margin-top: 8px;
    font-weight: 500;
}

@media (max-width:700px) {

.review-rating .avg {
    font-size: 30px;
}

.review-rating .count {
    font-size: 20px;
}

}



/* =========================
   ABLAUFPLAN DESIGN
========================= */


.days-container {

    display:grid;

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

    gap:25px;

    max-width:1200px;

    margin:40px auto;

}




.day-box {

    background:white;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #dbeafe;

    box-shadow:0 6px 18px rgba(0,0,0,0.08);

    transition:0.3s;

}



.day-box:hover {

    transform:translateY(-5px);

}




.day-title {

    background:#2563eb;

    color:white;

    padding:25px 15px;

    text-align:center;

}



.day-title h2 {

    font-size:30px;

    margin-bottom:10px;

}



.day-title p {

    font-size:17px;

    margin-bottom:15px;

}



.day-title strong {

    background:white;

    color:#2563eb;

    padding:8px 18px;

    border-radius:20px;

    display:inline-block;

}




.day-content {

    padding:20px;

}





.topic {

    background:#f8fbff;

    border:1px solid #dbeafe;

    border-left:5px solid #2563eb;

    padding:15px;

    border-radius:12px;

    margin-bottom:15px;

    font-size:15px;

    line-height:1.5;

}



.topic b {

    color:#2563eb;

    font-size:16px;

}



.pause-box {

    background:#d7ebff;

    padding:12px;

    border-radius:12px;

    text-align:center;

    font-weight:bold;

    margin:15px 0;

}




/* TABLET */

@media(max-width:900px){

.days-container {

    grid-template-columns:1fr;

    max-width:700px;

}

}



/* HANDY */

@media(max-width:700px){


.days-container {

    width:92%;

    margin:25px auto;

}



.day-title {

    padding:20px 10px;

}



.day-title h2 {

    font-size:24px;

}



.day-content {

    padding:15px;

}



.topic {

    font-size:14px;

}



}
/* FIX ABLAUFSEITE DESKTOP */

.Ablaufseite {

    max-width:1400px !important;

}



.Ablaufseite .days-container {

    display:grid !important;

    grid-template-columns:repeat(3, 1fr) !important;

    gap:30px;

    width:100%;

}



.Ablaufseite .day-box {

    min-width:0;

}



@media(max-width:1000px){

.Ablaufseite .days-container {

    grid-template-columns:1fr !important;

}

}das ist style.css 
/* =========================
   ABLAUFPLAN DESKTOP FIX
========================= */


.Ablaufseite.container {

    max-width:1400px !important;
    width:100%;

}



.Ablaufseite .days-container {

    display:grid !important;

    grid-template-columns:repeat(3, minmax(300px, 1fr)) !important;

    gap:30px;

    width:100%;

}



.Ablaufseite .day-box {

    min-width:0;

}



.Ablaufseite .topic {

    word-wrap:break-word;

}



@media(max-width:1100px){

    .Ablaufseite .days-container {

        grid-template-columns:1fr 1fr !important;

    }

}



@media(max-width:700px){


    .Ablaufseite.container {

        width:100%;

        padding:8px;

    }


    .Ablaufseite .days-container {

        width:92%;

        margin:25px auto;

        grid-template-columns:1fr !important;

    }


    .Ablaufseite .day-title h2 {

        font-size:24px;

    }


    .Ablaufseite .topic {

        font-size:14px;

    }


}
/* =========================
   FOOTER
========================= */

.footer{

    margin-top:50px;

    padding:35px 20px;

    text-align:center;

    border-top:1px solid #dbeafe;

    background:white;

}

.footer p{

    margin-bottom:12px;

    color:#555;

}

.footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

}

.footer-links a{

    text-decoration:none;

    color:#2563eb;

    font-size:15px;

    transition:.2s;

}

.footer-links a:hover{

    text-decoration:underline;

}

.footer-links span{

    color:#bbb;

}

@media(max-width:700px){

    .footer-links{

        gap:8px;

    }

    .footer-links a{

        font-size:14px;

    }

}
/* =========================
   RECHTLICHE SEITEN
========================= */

.footer{

    margin-top:50px;

    padding:35px 20px;

    text-align:center;

    background:white;

    border-top:1px solid #dbeafe;

}

.footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-top:10px;

}

.footer-links a{

    color:#2563eb;

    text-decoration:none;

}

.footer-links a:hover{

    text-decoration:underline;

}

.footer-links span{

    color:#bbb;

}

/* ==========================
   DATENSCHUTZ-CHECKBOX
========================== */

.datenschutz-box{

    width:100%;
    margin:18px 0;

}

.checkbox-label{

    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:10px;

    width:100%;

    cursor:pointer;

    text-align:left;

    font-size:15px;
    line-height:1.5;

}

.checkbox-label input[type="checkbox"]{

    width:18px !important;
    height:18px !important;

    min-width:18px;

    margin-top:2px;

    display:block !important;

    flex-shrink:0;

}

.checkbox-label span{

    flex:1;

}

.checkbox-label a{

    color:#2563eb;
    font-weight:bold;
    text-decoration:none;

}

.checkbox-label a:hover{

    text-decoration:underline;

}

@media(max-width:700px){

.checkbox-label{

    font-size:14px;

}

}