/* Google Fonts Import */
    @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

    /* CSS Variablen - Schriftdefinitionen laut Design Cheatsheet */
    :root {
        --font-headline: 'Instrument Serif', serif;
        --font-subtitel: 'Inter', sans-serif;
        --font-fliesstext: 'Inter', sans-serif;
        --font-caption: 'Libre Baskerville', serif;

        --submenu-titel-text: 700 16px/1.4 'Inter', sans-serif;
        --fliess-text-gross: 400 15px/1.6 'Inter', sans-serif;

        --farbe-dunkelgruen: #283f3a;
        --farbe-hellgruen: #e8efe4;
    }

    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.6;
        color: #333;
        -webkit-font-smoothing: antialiased;
    }

    /* Debug Info */
    .debug-info {
        position: fixed;
        top: 0;
        left: 0;
        background: #333;
        color: #0f0;
        padding: 4px 12px;
        font-size: 11px;
        font-family: 'Courier New', monospace;
        z-index: 9999;
        border-radius: 0 0 4px 0;
        opacity: 0.8;
    }

    .container {
        max-width: 1000px;
        background: #ffffff;
        padding: 20px;
        border-radius: 15px;
        margin: auto;
        margin-top: 30px;
        border: 1px solid #e0e0e0;  
        text-align: left;      
    }

    /* Warenkorb Sidebar */
    .warenkorb {
        position: fixed;
        right: 20px;
        top: 100px;
        width: 240px;
        background: #f7f7f7;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        display: none;
        flex-direction: column;
        max-height: calc(100vh - 140px);
    }

    .warenkorb.visible {
        display: flex;
    }

    .warenkorb-header {
        background: #e8efe4;
        padding: 12px;
        font-weight: bold;
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
        color: #333;
        border-bottom: 2px solid #e8efe4;
        font-size: 0.9em;
    }

    .warenkorb-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .warenkorb-items {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
    }

    .warenkorb-item {
        padding: 8px 0;
        border-bottom: 1px solid #e8efe4;
        font-size: 0.85em;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .warenkorb-item:last-child {
        border-bottom: none;
    }

    .warenkorb-item-text {
        flex: 1;
        margin-right: 5px;
        word-break: break-word;
        font-size: 0.8em;
    }

    .warenkorb-item-price {
        font-weight: bold;
        color: #283f3a;
        white-space: nowrap;
        font-size: 0.8em;
    }

    .warenkorb-empty {
        padding: 15px;
        text-align: center;
        color: #999;
        font-style: italic;
        font-size: 0.85em;
    }

    .warenkorb-footer {
        border-top: 2px solid #e8efe4;
        padding: 12px;
        background: #f9f7f4;
    }

    .warenkorb-summe {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9em;
        color: #333;
    }

    .warenkorb-summe span:first-child {
        font-weight: bold;
    }

    .warenkorb-summe span:last-child {
        font-weight: bold;
        color: #283f3a;
        font-size: 1.1em;
    }

    /* Responsive - Warenkorb als Bottom-Bar auf schmalen Screens */
    @media (max-width: 1200px) {
        .warenkorb {
            position: fixed;
            right: 10px;
            left: auto;
            bottom: 0;
            top: auto;
            width: 60%;
            max-width: 500px;
            border-radius: 12px 12px 0 0;
            max-height: 50vh;
            border: none;
            border-top: 2px solid #e8efe4;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        }

        .warenkorb .warenkorb-header {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .warenkorb .warenkorb-header::after {
            content: '▲';
            font-size: 0.8em;
            transition: transform 0.3s ease;
        }

        .warenkorb.collapsed .warenkorb-header::after {
            transform: rotate(180deg);
        }

        .warenkorb.collapsed .warenkorb-items {
            display: none;
        }
    }

    .container {
        max-width: 1000px;
        background: #ffffff;
        padding: 20px;
        border-radius: 15px;
        margin: auto;
        margin-top: 30px;
        border: 1px solid #e0e0e0;  
        text-align: left;      
    }

    /* Accordion Styles */
    .accordion-item {
        margin-bottom: 8px;
        background: #f7f7f7;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
    }

    .accordion-header {
        background: #e8efe4;
        padding: 12px 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
        font-family: var(--font-headline);
        font-size: 22px;
        font-weight: bold;
        line-height: 1.4;
        color: #333;
        user-select: none;
    }

    .accordion-header:hover {
        background: #c8d9c4;
    }

    .accordion-header.active {
        background: #283f3a;
        color: white;
    }

    .accordion-icon {
        font-size: 24px;
        transition: transform 0.3s ease;
    }

    .accordion-header.active .accordion-icon {
        transform: rotate(180deg);
    }

    .accordion-content {
        display: none;
        padding: 30px;
        background: #f2f2f2;
        animation: slideDown 0.3s ease;
        font-family: var(--font-fliesstext);
        font-weight: 400;
        font-size: 15px;
        line-height: 1.6;
    }

    /* DB-Inhalte: Schrift erzwingen, auch bei inline styles */
    .accordion-content *:not(.accordion-header):not(.boot-name):not(.trinken-titel):not(.essen-titel):not(button) {
        font-family: var(--font-fliesstext) !important;
    }

    .accordion-content.active {
        display: block;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 1000px;
        }
    }

    .section-title {
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
        color: #333;
        margin-bottom: 25px;    
    }

    .intro-text {
        font-family: var(--font-fliesstext);
        font-weight: 400;
        font-size: 15px;
        color: #555;
        line-height: 1.8;
        margin-bottom: 20px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    @media (max-width: 700px) {
        .form-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .form-grid.full-width {
        grid-template-columns: 1fr;
    }

    .form-label {
        display: block;
        margin-bottom: 10px;
        color: #333;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;             
        font-weight: bold;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        width: 100%;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #ffffff;
        color: #333;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .field-error {
        border-color: #c0392b !important;
        box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.3) !important;
    }

    .checkbox-group.field-error {
        background: rgba(192, 57, 43, 0.08);
        border-radius: 6px;
        padding: 8px 12px;
        margin: -8px -12px;
    }

    textarea {
        min-height: 120px;
        resize: vertical;
    }

    select {
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 20px;
        padding-right: 40px;
    }

    /* Checkboxen */
    .checkbox-group {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 15px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        cursor: pointer;
        width: 24px;
        height: 24px;
        accent-color: #283f3a;
        border: 2px solid #e0e0e0;
        border-radius: 4px;
        flex-shrink: 0;
        appearance: none;
        -webkit-appearance: none;
        background: #ffffff;
        position: relative;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    input[type="radio"] {
        border-radius: 50%;
    }

    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background: #283f3a;
        border-color: #283f3a;
    }

    input[type="checkbox"]:checked::after {
        content: '✓';
        color: white;
        font-weight: bold;
        font-size: 16px;
        position: absolute;
    }

    input[type="radio"]:checked::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .checkbox-group label {
        color: #333;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        cursor: pointer;
    }

    /* Navigation Buttons */
    .accordion-footer {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #e0e0e0;
    }

    @media (max-width: 1200px) {
        .accordion-footer {
            padding-bottom: 60px;
        }
    }

    button {
        background: #e8efe4;
        color: #333;
        border: none;
        border-radius: 8px;
        padding: 14px 30px;
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 150px;
    }

    button:hover:not(:disabled) {
        background: #283f3a;
        color: white;
    }

    button:disabled {
        background: #ccc;
        color: #666;
        cursor: not-allowed;
    }

    .btn-primary {
        background: #3f655f;
        color: white;
    }

    .btn-primary:hover {
        background: #283f3a;
    }

    /* Bestätigungsmeldung */
    .confirmation {
        display: none;
        background: #f9f7f4;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 30px;
        margin-top: 30px;
        text-align: center;
    }

    .confirmation.show {
        display: block;
    }

    .confirmation h3 {
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;  
        color: #333;
        margin-bottom: 10px;
    }

    .confirmation p {
        color: #666;
        margin-bottom: 20px;
    }

    /* Boots-Container */
    .boots-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .boot-card {
        position: relative;
        cursor: pointer;
    }

    .boot-card input[type="checkbox"] {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        z-index: 10;
    }

    .boot-card-inner {
        background: #f7f7f7;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .boot-card input[type="checkbox"]:checked + .boot-card-inner {
        border-color: #283f3a;
        background: #fff;
        box-shadow: 0 0 10px rgba(162, 46, 62, 0.2);
    }

    .boot-header {
        background: #ffffff;
        padding: 20px;
        padding-right: 50px;
        border-bottom: 1px solid #e8efe4;
    }

    .boot-name {
        font-family: var(--font-subtitel);
        font-weight: 700;
        font-size: 16px;
        line-height: 1.4;
        color: #333;
        margin: 0;
    }

    .boot-content {
        display: flex;
        gap: 20px;
        padding: 20px;
        flex: 1;
    }

    .boot-text {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .boot-pax {
        color: #283f3a;
        font-weight: bold;
        margin: 0 0 10px 0;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
    }

    .boot-beschreibung {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    .boot-preis-info {
        color: #283f3a;
        font-weight: bold;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0 0 10px 0;
    }

    .boot-bild {
        width: 50%;
        min-width: 200px;
        height: 200px;
        background: #f0f0f0;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        cursor: zoom-in;
    }

    .boot-bild img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .zoom-icon {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(255, 255, 255, 0.85);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    .zoom-icon:hover {
        background: rgba(255, 255, 255, 1);
        transform: scale(1.1);
    }

    /* Zoom Modal */
    .zoom-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 1000;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .zoom-modal.active {
        display: flex !important;
    }

    .zoom-modal-content {
        position: relative;
        max-width: 90%;
        max-height: 90%;
    }

    .zoom-modal img {
        max-width: 100%;
        max-height: 90vh;
        object-fit: contain;
    }

    /* Error Notification */
    .error-notification {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(-200px);
        opacity: 0;
        width: 60%;
        min-width: 300px;
        max-width: 500px;
        background: #fff;
        border: 2px solid #c0392b;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
        padding: 0;
        z-index: 2000;
        transition: transform 0.3s ease, opacity 0.3s ease;
        pointer-events: none;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }

    .error-notification.warning {
        border-color: #3f655f;
        box-shadow: 0 4px 12px rgba(63, 101, 95, 0.3);
    }

    .error-notification.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .error-notification-content {
        padding: 20px;
        display: flex;
        gap: 15px;
        align-items: flex-start;
        position: relative;
    }

    .error-notification-content::before {
        content: '⚠';
        font-size: 24px;
        color: #c0392b;
        flex-shrink: 0;
    }

    .error-notification.warning .error-notification-content::before {
        content: 'ℹ';
        color: #3f655f;
    }

    #errorMessage {
        color: #333;
        margin: 0;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        line-height: 1.5;
        flex: 1;
        word-break: break-word;
    }

    .error-notification-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 28px;
        color: #283f3a;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .error-notification.warning .error-notification-close {
        color: #3f655f;
    }

    .error-notification-close:hover {
        color: #d4324e;
        transform: scale(1.2);
    }

    .error-notification.warning .error-notification-close:hover {
        color: #2a4a42;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .error-notification {
            width: calc(100% - 40px);
            min-width: auto;
            max-width: none;
            left: 20px;
            right: 20px;
            transform: translateX(0) translateY(-200px);
        }
        .error-notification.show {
            transform: translateX(0) translateY(0);
        }
    }

    /* Strecken-Container */
    .strecken-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .strecke-card {
        position: relative;
        cursor: pointer;
    }

    .strecke-card input[type="radio"] {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        z-index: 10;
    }

    .strecke-card-inner {
        background: #f7f7f7;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .strecke-card input[type="radio"]:checked + .strecke-card-inner {
        border-color: #283f3a;
        background: #fff;
        box-shadow: 0 0 10px rgba(162, 46, 62, 0.2);
    }

    .strecke-content {
        display: flex;
        gap: 20px;
        padding: 20px;
        flex: 1;
    }

    .strecke-text {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .strecke-beschreibung {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    .strecke-bild {
        width: 50%;
        min-width: 200px;
        height: 200px;
        background: #f0f0f0;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        cursor: zoom-in;
    }

    .strecke-bild img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Responsive - unter 700px */
    @media (max-width: 700px) {
        .strecke-content {
            flex-direction: column;
            gap: 15px;
        }

        .strecke-bild {
            width: 100%;
            height: 200px;
        }
    }

    /* Trinken-Container */
    .trinken-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .trinken-card {
        position: relative;
        cursor: pointer;
    }

    .trinken-card input[type="radio"] {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 24px;
        height: 24px;
        z-index: 10;
    }

    .trinken-card-inner {
        background: #f7f7f7;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .trinken-card input[type="radio"]:checked + .trinken-card-inner {
        border-color: #283f3a;
        background: #fff;
        box-shadow: 0 0 10px rgba(162, 46, 62, 0.2);
    }

    .trinken-header {
        background: #ffffff;
        padding: 15px 20px;
        padding-right: 50px;
        border-bottom: 1px solid #e8efe4;
    }

    .trinken-titel {
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
        color: #333;
        margin: 0;
        font-weight: bold;
    }

    .trinken-content {
        display: flex;
        gap: 30px;
        padding: 20px;
        flex: 1;
        justify-content: space-between;
        align-items: flex-start;
    }

    .trinken-text {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .trinken-beschreibung {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    .trinken-info {
        text-align: right;
        white-space: nowrap;
    }

    .trinken-preis {
        color: #283f3a;
        font-weight: bold;
        font-size: 20px;
        margin: 0 0 10px 0;
    }

    .trinken-anzahl {
        color: #666;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        font-size: 12px;
    }

    .trinken-kosten {
        color: #666;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        font-size: 12px;
    }

    .trinken-kostenlos {
        color: #27ae60;
        font-weight: bold;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        font-size: 14px;
    }

    /* Essen-Container */
    .essen-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .essen-card {
        position: relative;
        cursor: pointer;
    }

    .essen-card input[type="radio"] {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 20px;
        height: 20px;
        z-index: 10;
        cursor: pointer;
    }

    .essen-card-inner {
        background: #f7f7f7;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .essen-card input[type="radio"]:checked + .essen-card-inner {
        border-color: #283f3a;
        background: #fff;
        box-shadow: 0 0 10px rgba(162, 46, 62, 0.2);
    }

    .essen-header {
        background: #ffffff;
        padding: 15px 20px;
        padding-right: 50px;
        border-bottom: 1px solid #e8efe4;
    }

    .essen-titel {
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
        color: #333;
        margin: 0;
        font-weight: bold;
    }

    .essen-content {
        display: flex;
        gap: 20px;
        padding: 20px;
        flex: 1;
    }

    .essen-text {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .essen-beschreibung {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    .essen-bild {
        width: 50%;
        min-width: 200px;
        height: 200px;
        background: #f0f0f0;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        cursor: zoom-in;
    }

    .essen-bild img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .essen-footer {
        padding: 15px 20px;
        border-top: 1px solid #e0e0e0;
        background: #f7f7f7;
        text-align: right;
    }

    .essen-preis {
        color: #283f3a;
        font-weight: bold;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
    }

    .essen-kostenlos {
        color: #27ae60;
        font-weight: bold;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
    }

    /* Docks-Container */
    .docks-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .dock-card {
        position: relative;
        cursor: pointer;
    }

    .dock-card input[type="radio"] {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 24px;
        height: 24px;
        z-index: 10;
    }

    .dock-card-inner {
        background: #f7f7f7;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .dock-card input[type="radio"]:checked + .dock-card-inner {
        border-color: #283f3a;
        background: #fff;
        box-shadow: 0 0 10px rgba(162, 46, 62, 0.2);
    }

    .dock-header {
        background: #ffffff;
        padding: 15px 20px;
        padding-right: 50px;
        border-bottom: 1px solid #e8efe4;
    }

    .dock-titel {
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
        color: #333;
        margin: 0;
        font-weight: bold;
    }

    .dock-content {
        display: flex;
        gap: 20px;
        padding: 20px;
        flex: 1;
    }

    .dock-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .dock-beschreibung {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    .dock-maps-link {
        color: #283f3a;
        text-decoration: none;
        font-weight: bold;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        display: inline-block;
        transition: all 0.3s ease;
    }

    .dock-maps-link:hover {
        text-decoration: underline;
        color: #d4324e;
    }

    .dock-bild {
        width: 50%;
        min-width: 200px;
        height: 200px;
        background: #f0f0f0;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        cursor: zoom-in;
    }

    .dock-bild img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dock-footer {
        padding: 15px 20px;
        border-top: 1px solid #e0e0e0;
        background: #f7f7f7;
        text-align: right;
    }

    .dock-kosten {
        color: #283f3a;
        font-weight: bold;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
    }

    .dock-kostenlos {
        color: #27ae60;
        font-weight: bold;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
    }

    /* AGB Container */
    .agb-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .agb-info {
        background: #f5f5f5;
        border-left: 4px solid #3f655f;
        padding: 15px;
        border-radius: 4px;
    }

    .agb-info .agb-titel {
        color: #333;
        font-weight: bold;
        margin: 0 0 10px 0;
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
    }

    .agb-info .agb-text {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    .agb-item {
        background: #f7f7f7;
        border: 1px solid #e0e0e0;
        padding: 15px;
        border-radius: 4px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .agb-checkbox {
        margin-top: 2px;
        flex-shrink: 0;
    }

    .agb-checkbox-label {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .agb-checkbox-label .agb-titel {
        color: #333;
        font-weight: bold;
        margin: 0;
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
    }

    .agb-checkbox-label .agb-text {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    .agb-radio-group {
        background: #f7f7f7;
        border: 1px solid #e0e0e0;
        padding: 20px;
        border-radius: 4px;
    }

    .agb-group-title {
        color: #333;
        font-weight: bold;
        margin: 0 0 15px 0;
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
    }

    .agb-radio-header {
        padding: 0 0 15px 0;
        margin-bottom: 15px;
        border-bottom: 2px solid #e8efe4;
    }

    .agb-group-titel {
        color: #333;
        font-weight: bold;
        margin: 0 0 8px 0;
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
    }

    .agb-group-beschreibung {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    .agb-radio-options {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 20px;
    }

    .agb-radio-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid #e8efe4;
    }

    .agb-radio-item:last-child {
        border-bottom: none;
    }

    .agb-radio {
        margin-top: 2px;
        flex-shrink: 0;
    }

    .agb-radio-label {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .agb-radio-label .agb-titel {
        color: #333;
        font-weight: bold;
        margin: 0;
        font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.4;
    }

    .agb-radio-label .agb-text {
        color: #555;
        font-family: var(--font-fliesstext); font-weight: 400; font-size: 15px; line-height: 1.6;
        margin: 0;
        line-height: 1.6;
    }

    /* Responsive - unter 700px */
    @media (max-width: 700px) {
        .dock-content {
            flex-direction: column;
            gap: 15px;
        }

        .dock-bild {
            width: 100%;
            height: 200px;
        }
    }

    /* Responsive - unter 700px */
    @media (max-width: 700px) {
        .essen-content {
            flex-direction: column;
            gap: 15px;
        }

        .essen-bild {
            width: 100%;
            height: 200px;
        }
    }

    /* Responsive - unter 700px */
    @media (max-width: 700px) {
        .boot-content {
            flex-direction: column;
            gap: 15px;
        }

        .boot-bild {
            width: 100%;
            height: 200px;
        }
    }

    /* ============================================================
       MOBILE OPTIMIERUNG - unter 600px
       ============================================================ */
    @media (max-width: 600px) {
        /* Container weniger Padding */
        .container {
            padding: 10px !important;
            margin-top: 10px !important;
            border-radius: 10px !important;
        }

        /* Accordion Header groesser */
        .accordion-header {
            font-family: var(--font-headline) !important;
            font-weight: bold !important;
            font-size: 22px !important;
            line-height: 1.3 !important;
            padding: 16px 16px !important;
        }

        .accordion-icon {
            font-size: 22px !important;
        }

        .accordion-content {
            padding: 15px !important;
        }

        /* Alle Textelemente groesser */
        .intro-text,
        .intro-text *,
        .accordion-content p,
        .accordion-content span,
        .accordion-content div,
        .accordion-content label {
            font-family: var(--font-fliesstext) !important;
            font-weight: 400 !important;
            font-size: 16px !important;
            line-height: 1.6 !important;
        }

        .accordion-content b,
        .accordion-content strong {
            font-family: var(--font-subtitel) !important;
            font-weight: 700 !important;
            font-size: 16px !important;
            line-height: 1.6 !important;
        }

        /* Form Labels */
        .form-label {
            font-family: var(--font-subtitel) !important;
            font-weight: 700 !important;
            font-size: 16px !important;
            line-height: 1.4 !important;
        }

        /* Inputs - 16px verhindert iOS Auto-Zoom */
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        input[type="date"],
        input[type="time"],
        textarea,
        select {
            font-family: var(--font-fliesstext) !important;
            font-weight: 400 !important;
            font-size: 16px !important;
            line-height: 1.4 !important;
            padding: 14px !important;
            min-height: 48px !important;
        }

        /* Buttons - Touch-Target mindestens 48px */
        button {
            font-family: var(--font-subtitel) !important;
            font-weight: 700 !important;
            font-size: 16px !important;
            line-height: 1.3 !important;
            padding: 16px 24px !important;
            min-width: 120px !important;
            min-height: 48px !important;
        }

        /* Footer Buttons untereinander */
        .accordion-footer {
            flex-direction: column !important;
            gap: 12px !important;
        }

        .accordion-footer button {
            width: 100% !important;
            min-width: auto !important;
        }

        /* Card-Titel */
        .boot-name, .strecke-name, .dock-name {
            font-family: var(--font-subtitel) !important;
            font-weight: 700 !important;
            font-size: 16px !important;
            line-height: 1.3 !important;
        }

        .trinken-titel, .essen-titel {
            font-family: var(--font-subtitel) !important;
            font-weight: 700 !important;
            font-size: 16px !important;
            line-height: 1.3 !important;
        }

        /* Card Beschreibungen */
        .boot-beschreibung, .strecke-beschreibung,
        .trinken-beschreibung, .essen-beschreibung,
        .dock-beschreibung {
            font-family: var(--font-fliesstext) !important;
            font-weight: 400 !important;
            font-size: 17px !important;
            line-height: 1.5 !important;
        }

        /* Card Preise / Info */
        .boot-pax, .boot-preis,
        .trinken-preis, .trinken-kostenlos,
        .essen-preis, .essen-kostenlos {
            font-family: var(--font-subtitel) !important; font-weight: 700 !important; font-size: 17px !important; line-height: 1.4 !important;
        }

        .trinken-info, .trinken-anzahl {
            font-family: var(--font-fliesstext) !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.4 !important;
        }

        /* Checkboxen und Radios groesser */
        input[type="checkbox"],
        input[type="radio"] {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
        }

        /* AGBs */
        .agb-titel, .agb-group-titel {
            font-family: var(--font-subtitel) !important; font-weight: 700 !important; font-size: 17px !important; line-height: 1.4 !important;
        }

        .agb-text, .agb-group-beschreibung,
        .agb-radio-label .agb-text,
        .agb-checkbox-label .agb-text {
            font-family: var(--font-fliesstext) !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.5 !important;
        }

        /* Warenkorb */
        .warenkorb, .warenkorb * {
            font-family: var(--font-fliesstext) !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.4 !important;
        }

        .warenkorb strong, .warenkorb b {
            font-family: var(--font-subtitel) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.4 !important;
        }

        /* Error Notification */
        .error-notification {
            width: calc(100% - 20px) !important;
            left: 10px !important;
            right: 10px !important;
            min-width: auto !important;
        }
        .error-notification.show {
            transform: translateX(0) translateY(0) !important;
        }

        #errorMessage {
            font-family: var(--font-fliesstext); font-weight: 400; font-size: 14px; line-height: 1.5 !important;
        }

        /* Edit-Formular spezifisch */
        .btn-aendern, .btn-abbrechen {
            width: 100% !important;
            min-height: 48px !important;
            font-family: var(--font-subtitel); font-weight: 700; font-size: 16px; line-height: 1.3 !important;
        }

        .current-info, .current-info * {
            font: 15px/1.5 'Inter', sans-serif !important;
        }

        .current-info b, .current-info strong {
            font-family: var(--font-subtitel); font-weight: 700; font-size: 15px; line-height: 1.5 !important;
        }

        .section-locked {
            font-family: var(--font-fliesstext); font-weight: 400; font-style: italic; font-size: 14px; line-height: 1.4 !important;
        }

        /* Logo kleiner auf Mobile */
        .container > div:first-child img {
            max-width: 180px !important;
        }

        .container > div:first-child h1 {
            font-family: var(--font-headline); font-weight: normal; font-size: 18px; line-height: 1.3 !important;
        }

        /* Dock Google Maps Links */
        .dock-karte a {
            font-family: var(--font-fliesstext); font-weight: 400; font-size: 14px; line-height: 1.4 !important;
        }
    }

    @media (max-width: 600px) {
        /* Trinken: Preis/Info über dem Beschreibungstext */
        .trinken-content {
            flex-direction: column-reverse !important;
            gap: 10px !important;
        }

        .trinken-info {
            text-align: left !important;
            white-space: normal !important;
        }

        /* Essen: Preis/Footer über Content */
        .essen-content {
            flex-direction: column !important;
            gap: 10px !important;
        }

        .essen-footer {
            text-align: left !important;
        }

        /* Dock: Content stapeln */
        .dock-content {
            flex-direction: column !important;
            gap: 10px !important;
        }

        .dock-footer {
            text-align: left !important;
        }

        /* Boot: Content stapeln */
        .boot-content {
            flex-direction: column !important;
            gap: 10px !important;
        }
    }