* { box-sizing: border-box; }



body { 

font-family: Arial, sans-serif; 

background:#f2f2f2; 

margin:0; 

padding:14px; 

color:#222; 

}



.page {

    max-width: 760px;

    margin: 0 auto;

    padding: 12px;

}



.box { 

width:100%; 

max-width:560px; 

margin:0 auto; 

background:#fff; 

padding:22px; 

border-radius:14px; 

box-shadow:0 4px 18px rgba(0,0,0,0.12); 

}



.HeaderBox {

text-align:center; 

font-weight:normal; 

font-size:22px; 

margin-bottom:15px; 

width: 100%;

}



.Header { 

background:#fff; 

color:#000; 

border: 1px solid #ccc;

border-color:#000; 

padding:12px;

}



.datebar {

    width: 100%;

    max-width: 100%;

    margin: 10px auto;

    box-sizing: border-box;

}



.kalenderbox {

    width: 100%;

    box-sizing: border-box;

    border: 0px solid #fff;

    padding: 8px;

    background: white;

    overflow: hidden;

}



.wochentage,

.kalendertage {

    display: grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 3px;

}



.tag,

.leer {

    width: 100%;

    aspect-ratio: 1 / 1;

    min-width: 0;

}



.tag {

    border: none;

    background: #65bf45;

    color: white;

    font-size: clamp(18px, 6vw, 28px);

    font-weight: bold;

    border-radius: 4px;

    padding: 0;

}



.wochentage div {

    font-size: clamp(14px, 4.5vw, 22px);

    text-align: center;

    font-weight: bold;

    color: #5d7f21;

    padding: 6px 0;

    border-bottom: 2px solid #ddd;

}



.tag.wochenende {

    background: #4f9a34;

}





.kalender-nav {

    display: grid;

    grid-template-columns: 70px 1fr 70px;

    gap: 6px;

    align-items: center;

}



.kalender-nav button {

    width: 100%;

    font-size: 26px;

    padding: 12px 0;

}



.kalender-titel {

    text-align: center;

    font-size: clamp(20px, 9vw, 20px);

    line-height: 1.05;

}



.kalenderbox {

    border: 2px solid #ddd;

    padding: 18px;

    background: white;

}



.wochentage,

.kalendertage {

    display: grid;

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

    gap: 4px;

}



.wochentage div {

    text-align: center;

    font-weight: bold;

    color: #5d7f21;

    padding: 8px 0;

    border-bottom: 2px solid #ddd;

}



.tag {

    aspect-ratio: 1 / 1;

    border: none;

    background: #65bf45;

    color: white;

    font-size: 18px;

    font-weight: normal;

    border-radius: 4px;

}



.tag:hover {

    outline: 3px solid #444;

    cursor: pointer;

}



.leer {

    aspect-ratio: 1 / 1;

}



.tag.anreise {

    background: linear-gradient(

        to right,

        #65bf45 0%,

        #65bf45 50%,

        #f28c00 50%,

        #f28c00 100%

    );

}



.tag.wochenende.anreise {

    background: linear-gradient(

        to right,

        #4f9a34 0%,

        #4f9a34 50%,

        #f28c00 50%,

        #f28c00 100%

    );

}



.tag.abreise {

    background: linear-gradient(

        to right,

        #f28c00 0%,

        #f28c00 50%,

        #65bf45 50%,

        #65bf45 100%

    );

}



.tag.wochenende.abreise {

    background: linear-gradient(

        to right,

        #f28c00 0%,

        #f28c00 50%,

        #4f9a34 50%,

        #4f9a34 100%

    );

}



.tag.zwischen {

    background: #f28c00;

}



.datumanzeige {

    text-align: center;

    margin-top: 18px;

    font-size: 18px;

}



.datumanzeige span {

    font-weight: bold;

}



.pruefen {

    text-align: center;

    margin-top: 20px;

}





input, button {

    font-size: 17px;

    padding: 12px;

    box-sizing: border-box;

    width: 100%;

}



button {

    background: #1d7f3b;

    color: white;

    border: 0;

    font-weight: bold;

    cursor: pointer;

}



button:disabled {

    opacity: 0.4;

    cursor: not-allowed;

}



.planbox {

    position: relative;

    width: 100%;

    background: white;

    overflow: hidden;

    border: 0px solid #ccc;

}



.planbox img {

    width: 100%;

    display: block;

}



svg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.stellplatz {

    stroke: #006b2d;

    stroke-width: 0.35;

    cursor: pointer;

}



.frei {

    fill: rgba(80, 190, 60, 0.45);

}



.belegt {

    fill: rgba(210, 0, 0, 0.65);

}



.teilfrei {

    fill: rgba(255, 200, 0, 0.65);

}



.selected {

    fill: rgba(0, 90, 255, 0.65) !important;

}











.formbox {

    margin-top: 14px;

    display: grid;

    gap: 8px;

}



.legend {

    display: grid;

    grid-template-columns: repeat(4, auto);

    gap: 18px;

    align-items: center;

    margin: 12px 0;

}



.legend div {

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

}



.legend span {

    display: inline-block;

    width: 18px;

    height: 18px;

}



.legend .frei {

    background: #65bf45;

}



.legend .belegt {

    background: #d00000;

}



.legend .teilfrei {

    background: #ffd400;

}



.legend .gewaehlt {

    background: #0066ff;

}



.msg {

    background: #fff8d6;

    padding: 10px;

    margin-top: 10px;

    font-size: 14px;

    display: none;

}



h1 { 

font-size:24px; 

line-height:1.2; 

margin:0 0 18px 0;

}



h2 { 

font-size:18px; 

margin:24px 0 12px 0; 

}



.zusammenfassung { 

width:100%; 

border-collapse:collapse; 

margin-bottom:18px; 

}



.zusammenfassung td { 

padding:9px 0; 

border-bottom:1px solid #ddd; 

vertical-align:top; 

}



.zusammenfassung td:last-child { 

text-align:right; 

font-weight:bold; 

}



.summe { 

font-size:22px; 

font-weight:bold; 

text-align:right;

margin:22px 0; 

}



.paypal { 

text-align:center; 

margin-top:24px; 

}



.paypal-btn { 

display:flex; 

align-items:center; 

justify-content:center; 

gap:12px; 

width:100%; 

padding:16px; 

background:#ffc125; 

color:#111; 

border:none; 

border-radius:10px; 

font-size:18px; 

font-weight:bold; 

cursor:pointer; 

}



.paypal-btn:hover { 

background:#ffd700; 

}



.paypal-btn img { 

height:30px; width:auto; 

}



.hinweis { 

font-size:14px; 

line-height:1.45; 

color:#555; 

margin-top:20px; 

}



.statusbox {

border-radius:10px; 

text-align:center; 

font-weight:normal; 

font-size:22px; 

margin:5px; 

border:0px; 

}



.status-bezahlt { 

background:#d4edda; 

color:#000; 

border-color:#c3e6cb; 

padding:13px;

}



.status-offen { 

background: #f8d7da;

color:#000; 

border-color:#f5c6cb; 

padding:13px;

}



.qrbox { 

text-align:center; 

margin:24px 0 8px 0; 

padding:18px; 

background:#fafafa; 

border:1px solid #ddd; 

border-radius:12px; 

}



.qrbox img { 

width:260px; 

height:260px; 

max-width:100%; 

}



.token { 

margin-top:10px; 

font-family:Consolas, monospace; 

font-size:16px; 

word-break:break-all; 

color:#333; 

}



.formrow { 

margin-bottom:14px; 

}





input[type="text"], input[type="email"], input[type="tel"] { 

width:100%; 

font-size:18px; 

padding:13px 12px; 

border:1px solid #bbb; 

border-radius:10px; 

background:#fff; 

}



input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus { 

outline:none; 

border-color:#555; 

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

}



.summe { 

font-size:22px; 

font-weight:bold; 

text-align:right; 

margin:22px 0; 

}



.weiter-btn { 

width:100%; 

padding:16px; 

background:#333; 

color:#fff; 

border:none; 

border-radius:10px; 

font-size:18px; 

font-weight:bold; 

cursor:pointer; 

}



.weiter-btn:hover { 

background:#111; 

}

.paypal { 

text-align:center; 

margin-top:24px; 

}



.paypal-btn { 

display:flex; 

align-items:center; 

justify-content:center; 

gap:12px; 

width:100%; 

padding:16px;

background:#ffc125; 

color:#111; 

border:none; 

border-radius:10px; 

font-size:18px; 

font-weight:bold; 

cursor:pointer; 

}



.paypal-btn:hover { 

background:#ffd700; 

}



.paypal-btn img { 

height:30px; 

width:auto; 

}



@media (max-width: 600px) {

    .box {

        padding: 12px;

    }



    .kalenderbox {

        padding: 6px;

    }



    .datumanzeige {

        font-size: 17px;

    }



@media (max-width: 600px) {

    .legend {

        grid-template-columns: repeat(2, auto);

    }

}



}



@media (max-width:480px) {

body { padding:10px; 

}

    .box {

    padding:18px; 

    border-radius:12px; 

    }

    

    h1 { 

    font-size:22px; 

    }

    .zusammenfassung td { 

    display:block; 

    width:100%; 

    padding:5px 0; 

    border-bottom:none; 

    }

    

    .zusammenfassung tr { 

    display:block; 

    padding:8px 0; 

    border-bottom:1px solid #ddd; 

    }

    

    .zusammenfassung td:last-child { 

    text-align:left; 

    font-size:17px; 

    }

    

    .summe { 

    text-align:left; 

    font-size:21px; 

    }

}



.platzinfo-box {

    margin-top: 18px;

    margin-bottom: 18px;

    padding: 16px;

    background: #f7f7f7;

    border-radius: 1px;

    border: 1px solid #ddd;

}



.platzinfo-box h3 {

    margin: 0 0 10px 0;

    font-size: 1.2rem;

}



.platzinfo-tabelle {

    width: 100%;

    border-collapse: collapse;

    font-size: 1rem;

}



.platzinfo-tabelle th,

.platzinfo-tabelle td {

    padding: 8px 10px;

    border-bottom: 1px solid #ddd;

    text-align: left;

    font-weight: normal;

}



.platzinfo-tabelle th {

    width: 42%;

    font-weight: normal;

    color: #333;

}



.platzinfo-tabelle tr:last-child th,

.platzinfo-tabelle tr:last-child td {

    border-bottom: none;

}



.platzplan {

    position: relative;

    width: 100%;

    max-width: 1000px;

    margin: 20px auto;

}



.platzplan img {

    width: 100%;

    height: auto;

    display: block;

}



.platzplan svg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.stellplatz {

    fill: rgba(80, 190, 70, 0.60);

    stroke: #006b34;

    stroke-width: 0.35;

    cursor: pointer;

}



.stellplatz.frei {

    fill: rgba(80, 190, 70, 0.60);

}



.stellplatz.belegt {

    fill: rgba(210, 0, 0, 0.70);

}



.stellplatz.teilfrei {

    fill: rgba(255, 200, 0, 0.75);

}



.stellplatz.inaktiv {

    fill: #999999;

    cursor: default;

}





.stellplatz.selected {

    stroke: #004cff;

    stroke-width: 1.2;

}



.label {

    font-family: Arial, sans-serif;

    font-size: 1.6px;

    text-anchor: middle;

    pointer-events: none;

    fill: #ffffff;

    paint-order: stroke fill;

    font-weight: normal;

}



.platzplan { position: relative; }

.platzplan svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.platzplan img { width: 100%; display: block; }



.fahrzeug-grid input[type="radio"] {

    position: absolute !important;

    opacity: 0 !important;

    width: 0 !important;

    height: 0 !important;

    pointer-events: none !important;

    appearance: none !important;

    -webkit-appearance: none !important;

}



.fahrzeug-grid label {

    display: flex !important;

    align-items: center;

    justify-content: center;



    background: #18b51f;

    color: #fff;

    border-radius: 4px;

    min-height: 38px;

    padding: 8px 6px;

    text-align: center;

    cursor: pointer;

}



.fahrzeug-grid input[type="radio"]:checked + label {

    background: #f08a00 !important;

}



/* --------------------------------------------------------------

   Fahrzeugauswahl: Radio-Buttons als grüne/orange Buttons

   -------------------------------------------------------------- */



.fahrzeugauswahl {

    margin-top: 18px;

}



.fahrzeug-box {

    width: 100%;

    max-width: 520px;

    margin: 0 auto 22px auto;

    padding: 12px;

    border: 2px solid #ddd;

    background: #fff;

}



.fahrzeug-box h3 {

    margin: 0 0 10px 0;

    text-align: center;

    font-size: 18px;

}



.fahrzeug-grid {

    display: grid !important;

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

    gap: 8px 24px;

}



.fahrzeug-grid input[type="radio"] {

    position: fixed !important;

    left: -9999px !important;

    top: -9999px !important;

    opacity: 0 !important;

    width: 1px !important;

    height: 1px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    appearance: none !important;

    -webkit-appearance: none !important;

}



.fahrzeug-grid label {

    display: flex !important;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    width: 100%;

    padding: 8px 6px;

    background: #65bf45;

    color: #fff;

    border-radius: 4px;

    text-align: center;

    font-size: 15px;

    line-height: 1.2;

    cursor: pointer;

    user-select: none;

}



.fahrzeug-grid input[type="radio"]:checked + label {

    background: #f08a00 !important;

    color: #fff !important;

}



@media (max-width: 600px) {

    .fahrzeug-box {

        margin-left: 0;

        margin-right: 0;

        padding: 10px;

    }



    .fahrzeug-grid {

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

        gap: 8px;

    }



    .fahrzeug-grid label {

        min-height: 42px;

        font-size: 13px;

        padding: 8px 5px;

    }

}