/* 1. BUTTON-STYLES (Unverändert übernommen) */
.btn-anfrage {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #bd2126 0%, #7d0d0e 100%);
    border: 1px solid #6d0a0b;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

.icon-mail {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    margin-left: 12px;
}

.btn-anfrage:hover {
    background: linear-gradient(to bottom, #39be5e 0%, #29763f 100%);
    border-color: #236536;
    color: #ffffff !important;
}

/* 2. DAS NEUE OVERLAY (Jetzt als Klasse für unbegrenzt viele Formulare) */
.custom-dialog-overlay {
    border: none;
    border-radius: 8px;
    padding: 0;
    background-color: lightyellow;
    /* Flexibel auf Smartphones (90% der Bildschirmbreite) */
    max-width: 90vw !important;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative !important;
    /* Zwingt den Dialog, die Grafik NIEMALS abzuschneiden */
    overflow: visible !important;
    height: max-content !important;
}

    /* WICHTIG: Das unsichtbare, von ASP.NET generierte Panel-Div im Inneren weiten */
    .custom-dialog-overlay > div {
        width: 100% !important;
        min-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

/* NEUER INNERER CONTAINER: Übernimmt das intelligente Scrollen auf kleinen Bildschirmen */
.dialog-inner-content {
    padding: 25px; /* Dein originales Padding */
    box-sizing: border-box;
    max-height: 90vh; /* Begrenzt den Inhalt auf 90% der Bildschirmhöhe */
    overflow-y: auto; /* Scrollbalken NUR hier drinnen, falls nötig */
    width: 100%;
    /* KORREKTUR: display: flex und flex-wrap entfernt, da es Layout-Konflikte mit Tabellen & Floats erzeugt */
    display: block !important;
}

/* KORREKTUR: Zwingt die Button-Zone im Dialog nach ganz unten unter alle Tabellen/Elemente */
.custom-dialog-overlay .fiftyRight {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    padding-top: 15px;
    box-sizing: border-box;
}

/* Der schicke, abgedunkelte Hintergrund-Effekt */
.custom-dialog-overlay::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

/* NEUER GRAFIK-SCHLIESSEN-BUTTON (ABSOLUTE POSITIONIERUNG AUF DER ECKE) */
.dialog-close-btn {
    position: absolute;
    transform: translate(23%, -95%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10000; /* Liegt garantiert über absolut allem */
}

    .dialog-close-btn img {
        display: block;
        width: auto;
        height: auto;
    }

/* 3. INNENLEBEN DES FORMULARS (KORREKTUR: ID #contform durch .custom-dialog-overlay Klasse ersetzt) */
.custom-dialog-overlay table {
    width: 100%;
    border-collapse: collapse;
}

/* Verhindert das Herausragen der Textfelder und optimiert das Design */
.anfrage,
.custom-dialog-overlay textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px; /* Leicht erhöht für besseres Tippgefühl */
    border: 1px solid #dcdbd9; /* Subtilerer, weicherer Rahmen */
    border-radius: 6px; /* Moderne, leicht abgerundete Ecken */
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    /* Wenn der Nutzer mit der Maus über ein Feld fährt */
    .anfrage:hover,
    .custom-dialog-overlay textarea:hover {
        border-color: #b5b4b0;
    }

    /* Wenn der Nutzer in das Feld hineinklickt (Fokus-Zustand) */
    .anfrage:focus,
    .custom-dialog-overlay textarea:focus {
        outline: none !important;
        border-color: #7d0d0e; /* Nimmt das edle Dunkelrot deines Buttons auf */
        box-shadow: 0 0 0 3px rgba(125, 13, 14, 0.15); /* Subtiler, roter Leuchteffekt */
    }

/* KORREKTUR: Über Klasse statt dynamischer ID gesteuert, damit das große Textfeld seine 120px behält */
.custom-dialog-overlay textarea {
    height: 120px;
    margin-top: 5px;
}

/* Das unsichtbare Server-Textfeld kompakt halten */
.custom-dialog-overlay [id*="_MST"] {
    display: none !important;
}