/* Fügen Sie dies zu Ihrer bestehenden styles.css hinzu */
/* Für noch größere Bildschirme, falls nötig */
#book-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media screen and (min-width: 1200px) {
  .seating-plan {
    max-width: 1920px; /* oder ein anderer fester Maximalwert */
  }
}



.logged-in .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
      max-width: 1920px; /* oder ein anderer fester Maximalwert */
  min-height: auto;
/*  min-height: calc(30vh - 50px); Anpassen basierend auf der Navbar-Höhe */
  perspective: 1000px;
  margin-bottom: 30px;
  color: black;
}



form {
    margin-top: 20px;
}

.form-row {
    margin-bottom: 10px;
}

label {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}

input[type="text"], input[type="password"], input[type="email"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.submit-row {
    margin-top: 20px;
    text-align: right;
}

input[type="submit"] {
    background: #79aec8; 
    border: none;
    border-radius: 4px;
    color: #000000;	/* Alte Farbe "weiß" #fff */
    cursor: pointer;
    padding: 10px 15px;
    font-size: 14px;
}

input[type="submit"]:hover {
    background: #609ab6; 
}

.errorlist {
    color: #ba2121;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.messages {
    margin-bottom: 20px;
    padding: 0;
    list-style-type: none;
}

.messages li {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
}

.messages .success {
    background: #dfd;
    border: 1px solid #0f0;
}

.messages .error {
    background: #fdd;
    border: 1px solid #f00;
}


.navbar {
    background-color: #716D43; /* Braun - Farbschema von flensburger-theaterfreunde.de */
    padding: 10px 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.navbar ul li {
    display: inline;
    margin-right: 15px;
}

.navbar ul li a {
    color: #f5f5dc; /* Beige/Creme - hoher Kontrast auf Braun */
    text-decoration: none;
    font-weight: 500;
}

.navbar ul li a:hover {
    color: #ffffff; /* Weiß beim Hover */
    text-decoration: underline;
}

.logout-form {
    display: inline;
}

.logout-form button {
    background: none;
    border: none;
    color: #f5f5dc; /* Gleiche Farbe wie Links */
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
}

.logout-form button:hover {
    color: #ffffff;
    text-decoration: underline;
}
/* Styles für die Admin Navbar
/* Anpassungen für den Admin-Bereich */
.admin-navbar {
    background-color: #79aec8;
    padding: 10px 0;
}

.admin-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.admin-navbar ul li {
    display: inline;
    margin-right: 15px;
}

.admin-navbar ul li a,
.admin-navbar ul li button {
    color: white;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.admin-navbar ul li a:hover,
.admin-navbar ul li button:hover {
    text-decoration: underline;
}




        /* Angepasste Schriftart */
        body {
            font-family: 'Inter', sans-serif;
        }

        /* Zusätzliches CSS für spezifisches Layout und Interaktivität, das nicht direkt in Tailwind ist */
        .seating-area {
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Inhalt am Anfang ausrichten */
            align-items: center;
            border-radius: 0.75rem; /* rounded-lg */
            padding: 1rem; /* p-4 */
            position: relative; /* Für absolute Positionierung von Text */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
        }
        
        /* === RESERVIERUNGS-STATUS FARBEN === */
        
        /* Frei (hellgrau) */
        .individual-seat.available {
            background-color: #e5e7eb; /* gray-200 - deutlich sichtbar */
            border: 2px solid #9ca3af; /* gray-400 */
            color: #374151; /* gray-700 */
        }
        
        /* Reserviert (gelb - Tisch-Reservierungen) */
        .individual-seat.reserviert {
            background-color: #fbbf24; /* yellow-400 - kräftiges Gelb */
            border: 2px solid #f59e0b; /* yellow-500 */
            color: #78350f; /* yellow-900 */
        }
        
        /* Rang-Reserviert (gelb - Rang-Reservierungen) */
        .individual-seat.reserviert-rang {
            background-color: rgb(250, 204, 21); /* gelb -400 - kräftiges gelb*/
            border: 2px solid rgb(234, 179, 8); /* gelb - 500 */
            color: #ffffff; /* weißer Text für Kontrast */
        }
        
        /* Bestätigt (grün - vollfarbig) */
        .individual-seat.bestaetigt {
            background-color: #22c55e; /* green-500 - kräftiges Grün */
            border: 2px solid #16a34a; /* green-600 */
            color: #ffffff; /* white text für Kontrast */
        }
        
        /* Belegt/Gebucht (rot - vollfarbig) */
        .individual-seat.taken,
        .individual-seat.gebucht {
            background-color: #ef4444; /* red-500 - kräftiges Rot */
            border: 2px solid #dc2626; /* red-600 */
            color: #ffffff; /* white text für Kontrast */
        }
        
        /* Ausgewählt (blau - vollfarbig mit Glow) */
        .individual-seat.selected {
            background-color: #3b82f6; /* blue-500 - kräftiges Blau */
            border: 2px solid #2563eb; /* blue-600 */
            color: #ffffff; /* white text */
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
            transform: scale(1.05); /* leicht vergrößert */
        }
        
        /* === TISCH-STATUS FARBEN (gleiche Logik wie Sitzplätze) === */
        
        /* Frei */
        .table-block.available {
            background-color: #e5e7eb; /* gray-200 */
            border: 2px solid #9ca3af; /* gray-400 */
        }
        
        /* Reserviert */
        .table-block.reserviert {
            background-color: #fbbf24; /* yellow-400 */
            border: 2px solid #f59e0b; /* yellow-500 */
            color: #78350f; /* yellow-900 */
        }
        
        /* Bestätigt */
        .table-block.bestaetigt {
            background-color: #22c55e; /* green-500 */
            border: 2px solid #16a34a; /* green-600 */
            color: #ffffff;
        }
        
        /* Belegt/Voll */
        .table-block.full {
            background-color: #ef4444; /* red-500 */
            border: 2px solid #dc2626; /* red-600 */
            color: #ffffff;
        }
        
        /* Ausgewählt */
        .table-block.selected {
            background-color: #3b82f6; /* blue-500 */
            border: 2px solid #2563eb; /* blue-600 */
            color: #ffffff;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }
            transition: all 0.2s ease-in-out; /* Übergang für Hover/Klick-Effekte */
        }

        .seat-block {
            cursor: pointer;
            border: 1px solid rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            border-radius: 0.5rem; /* rounded-md */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm */
            padding: 0.5rem; /* p-2 */
            text-align: center; /* Textzentrierung für Verfügbarkeitsanzeige */
            overflow: hidden; /* Versteckt überlaufenden Inhalt */
        }

        /* Farben für Sitzblöcke - diese steuern primär den Rand und Schatten, nicht den Hintergrund für Ränge */
        .seat-block.available {
            /* Hintergrundfarbe wird für Rang-Blöcke durch individuelle Sitze bestimmt */
            color: #065f46; /* Tailwind green-800 */
            border-color: #34d399; /* Tailwind green-400 */
        }

        .seat-block.full {
            /* Hintergrundfarbe wird für Rang-Blöcke durch individuelle Sitze bestimmt */
            color: #991b1b; /* Tailwind red-800 */
            border-color: #ef4444; /* Tailwind red-500 */
            cursor: not-allowed;
        }

        .seat-block.selected {
            background-color: #bfdbfe; /* Tailwind blue-200 */
            color: #1e40af; /* Tailwind blue-800 */
            border-color: #60a5fa; /* Tailwind blue-400 */
            box-shadow: 0 0 0 3px #93c5fd; /* Tailwind blue-300 ring */
        }

		.individual-seat.selected {
			background-color: #fbbf24; /* Gelb (Tailwind yellow-400) - gleiche Farbe wie eigene Tisch-Reservierungen */
			border-color: #f59e0b; /* Gelb-Border (Tailwind yellow-500) */
			color: #78350f; /* Dunkler Text für bessere Lesbarkeit */
		}


        /* Modal Styling */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Änderung von center zu flex-start */
            padding-top: 10vh; /* Modal startet 10% vom oberen Bildschirmrand */
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        .modal-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background-color: white;
            padding: 2.5rem; /* p-10 */
            border-radius: 1rem; /* rounded-xl */
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* shadow-xl */
            width: 90%;
            max-width: 500px;
            position: relative;
            transform: translateY(-20px);
            transition: transform 0.3s ease-in-out;
        }

        .modal-overlay.open .modal-content {
            transform: translateY(0);
        }

	.table-block {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

/* Entfernt: table-select - Tische verwenden jetzt echte Reservierungen */

		#modal-tables-list ul {
			list-style-type: none;
			padding-left: 0;
		}
		#modal-tables-list li {
			margin-bottom: 5px;
		}
        .close-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #6b7280; /* Tailwind gray-500 */
        }

        /* Stage Styling */
        .stage {
            border: 2px solid #1f2937; /* Tailwind gray-800 */
            background-color: #374151; /* Tailwind gray-700 */
            color: white;
            text-align: center;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Container für die Ränge */
        .rang-container {
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* Abstand zwischen den Rang-Boxen */
            flex-grow: 1; /* Rang-Container wächst, um den verfügbaren Platz auszufüllen */
            height: 100%; /* Füllt die Höhe des übergeordneten .seating-area aus */
        }
        .rang-container .seat-block {
            width: 100%; /* Füllt die Breite des Rang-Containers */
            flex-grow: 1; /* Jeder Rang-Sitzblock wächst, um den verfügbaren Platz im Rang-Container gleichmäßig aufzuteilen */
            height: auto; /* Entfernt feste Höhe für dynamische Anpassung */
            min-height: 80px; /* Mindesthöhe, um zu verhindern, dass die Blöcke zu klein werden */
            
            /* Zusätzliche Styles für Rang-Sitzblöcke, um interne Sitze zu zeigen */
            display: flex;
            flex-direction: column; /* Stack text overlay and seat columns vertically */
            justify-content: space-evenly; /* Distribute content evenly */
            align-items: center;
            position: relative; /* For text-overlay */
            background-color: #f3f4f6; /* A light background for the Rang block container to distinguish it */
            border: 1px solid rgba(0, 0, 0, 0.1); /* Re-add a subtle border to the block container */
            padding: 0; /* Remove padding as seat columns will handle spacing */
        }

        /* Stil für den Text im Rang-Block, damit er über den Sitzen liegt */
        .rang-block-text-overlay {
            position: absolute;
            z-index: 10; /* Über den Sitzen */
            color: inherit; /* Vererbt die Farbe vom .seat-block.available/full */
            text-shadow: 0 0 3px rgba(255,255,255,0.7); /* Leichter Schatten für bessere Lesbarkeit */
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            pointer-events: none; /* Klicks gehen durch zum Block */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Zentrieren */
        }


        /* Grid für Parkett Mitte - wird zu Flex Container für links/aisle/rechts */
        .parkett-outer-grid-container {
            display: flex;
            justify-content: center;
            align-items: stretch; /* Kinder strecken sich in der Höhe */
            width: 100%;
            gap: 2rem; /* Abstand für den Gang */
        }
        /* Inner grids for tables */
        .parkett-inner-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 2 Spalten für Tische */
            gap: 1.5rem; /* Abstand zwischen den Tischen */
            flex: 1; /* Füllt den verfügbaren Platz aus */
        }
        .parkett-inner-grid .seat-block {
            width: 100%; /* Füllt die Spaltenbreite */
            height: 80px; /* Längliche Form für Tische */
            padding: 0.5rem; /* p-2 */
        }

        /* Gang-Styling */
        .aisle-divider {
            width: 2rem; /* Breite des Ganges */
            background-color: #e5e7eb; /* Tailwind gray-200 */
            border-radius: 0.5rem;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
            flex-shrink: 0; /* Verhindert, dass der Gang kleiner wird */
        }

        /* Grid für Parkett Unten - wird zu Flex Container für links/aisle/rechts */
        .parkett-unten-outer-grid-container {
            display: flex;
            justify-content: center;
            align-items: stretch; /* Kinder strecken sich in der Höhe */
            width: 100%;
            gap: 2rem; /* Abstand für den Gang */
        }
        /* Inner grids for tables */
        .parkett-unten-inner-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr); /* 8 Spalten für 3x8 Tisch-Layout */
            gap: 1rem; /* Kleinerer Abstand */
            flex: 1; /* Füllt den verfügbaren Platz aus */
        }
        .parkett-unten-inner-grid .seat-block {
            width: 70px; /* Schmalere Breite */
            height: 90px; /* Längliche Form (vertikal) */
            margin: auto; /* Zentrieren innerhalb der Grid-Zelle */
            padding: 0.5rem; /* p-2 */
        }


        /* Haupt-Sitzplan-Container */
        .main-seating-layout {
            display: flex;
            flex-direction: column; /* Standard auf Spalte für kleinere Bildschirme */
            gap: 2rem;
            width: 100%;
            align-items: stretch; /* Kinder strecken sich, um die Höhe des höchsten Kindes zu füllen */
        }
        @media (min-width: 768px) {
            .main-seating-layout {
                flex-direction: row; /* Auf größeren Bildschirmen in einer Reihe */
                /* align-items: stretch ist der Standard für flex-direction: row, muss hier nicht explizit genannt werden */
            }
            .main-seating-layout > div {
                flex: 1; /* Gleichmäßige Verteilung des Platzes */
            }
            .parkett-center-section {
                flex: 2; /* Mitte nimmt mehr Platz ein */
            }
        }
        
        /* Proportionale Höhenanpassung für Ränge und Tische */
        .flex-auto-height {
            flex-grow: 1;
        }

        /* Styles für den Container der Sitze (innerhalb des Rang-Blocks) */
        .seats-grid-container {
            display: flex;
            flex-direction: row; /* Ordnet die 4 "Reihen" horizontal an */
            flex-wrap: wrap; /* Erlaubt Umbruch auf kleinere Bildschirme */
            justify-content: center;
            align-items: stretch; /* Spalten strecken sich, um gleiche Höhe zu haben */
            width: 95%; /* Breite des gesamten Sitzrasters */
            height: 100%; /* Höhe, um den Elternblock auszufüllen */
            gap: 6px; /* Abstand zwischen den "Reihen" (die jetzt Spalten sind) */
        }

        /* Styles für individuelle Sitzspalten (ursprünglich Ihre "Reihen") */
        .seat-column {
            display: flex;
            flex-direction: column; /* Sitze in dieser "Spalte" gehen vertikal runter */
            justify-content: space-evenly; /* Verteilt die Sitze vertikal gleichmäßig */
            align-items: center;
            gap: 4px; /* Abstand zwischen den Sitzen in einer Spalte */
            height: 100%; /* Jede Spalte füllt die Höhe des seats-grid-container */
            flex-shrink: 0; /* Verhindert Schrumpfen der Spalten */
            flex-grow: 1; /* Spalten versuchen, den verfügbaren Platz auszufüllen */
            max-width: calc(100% / 4 - 6px); /* Begrenzt die Breite, um 4 Spalten nebeneinander zu ermöglichen */
        }

        /* Styles für individuelle Sitze */
        .individual-seat {
            width: 12px; /* Größe der einzelnen Sitze */
            height: 12px;
            border-radius: 3px; /* Leicht abgerundete Ecken */
            transition: background-color 0.2s ease-in-out;
            flex-shrink: 0; /* Verhindert Schrumpfen der Sitze */
            box-shadow: inset 0 0 1px rgba(0,0,0,0.2);
            /* Standardfarbe für freie Plätze */
            background-color: #f3f4f6; /* Hellgrau (frei) */
            border: 1px solid #9ca3af;
        }
        
        /* Freie Plätze - explizit */
        .individual-seat.available {
            background-color: #f3f4f6 !important; /* Hellgrau (frei) */
            border-color: #9ca3af !important;
            cursor: pointer;
        }

        .individual-seat.taken { /* Für belegte Sitze */
            background-color: #fee2e2; /* Rot (belegt) */
            border-color: #ef4444;
        }
        
        .individual-seat.fremde-buchung { /* Für fremde Buchungen */
            background-color: #1f2937 !important; /* Schwarz (fremde Buchung) */
            border-color: #374151 !important;
            cursor: not-allowed !important;
        }
        
        .individual-seat.reserviert { /* Für eigene Reservierungen */
            background-color: #3b82f6 !important; /* Vollblau gefüllt (eigene Reservierung) */
            border-color: #1e40af !important;
            cursor: pointer;
        }
        
        .individual-seat.bestaetigt { /* Für bestätigte Buchungen */
            background-color: #10b981 !important; /* Vollgrün gefüllt (bestätigt) */
            border-color: #059669 !important;
            cursor: not-allowed;
        }
        
        /* Wenn der Rang-Block ausgewählt ist (zusätzlich zur 'full' Logik),
           könnte man die Sitze leicht anders stylen, z.B. etwas heller oder mit einem Rand.
           Derzeit wird die 'full' Farbe beibehalten, wenn der Block ausgewählt und simuliert voll ist.
           Wenn der Block ausgewählt ist, aber noch Plätze frei hat, bleiben die Sitze grün.
        */
        .seat-block.selected .individual-seat {
            /* Hier könnte man spezifische Stile für ausgewählte individuelle Sitze hinzufügen,
               z.B. einen blauen Rand oder eine hellere Farbe.
               Aktuell behalten sie ihre `taken` oder `available` Farbe.
            */
        }


.seating-plan {
  font-family: 'Lato', sans-serif;
  background-color: #242333;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.movie-container {
  margin: 20px 0;
}

.movie-container select {
  background-color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 14px;
  margin-left: 10px;
  padding: 5px 15px;
  appearance: none;
}

.theater-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.rang-links, .rang-rechts, .parkett-mitte, .parkett-unten {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 10px;
}

.seats-grid, .tables-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.seat, .table {
  background-color: #444451;
  height: 12px;
  width: 15px;
  margin: 3px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.table {
  height: 30px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.seat.selected {
  background-color: #6feaf6;
}

.seat.occupied {
  background-color: #fff;
  border: 2px solid red; /* Rot umrandet für belegte Plätze */
}

.seat:not(.occupied):hover {
  cursor: pointer;
  transform: scale(1.2);
}

.legend {
  background: rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  border-radius: 5px;
  color: #777;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.legend > * {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.text {
  margin: 5px 0;
}

.text span {
  color: #6feaf6;
}

/* Print-Styles: Nur Modal anzeigen beim Drucken */
@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  
  /* Verstecke alles außer Modal */
  .seating-area,
  .stage,
  .main-seating-layout,
  #booking-controls,
  #booking-controls-top,
  #booking-controls-header,
  header,
  nav {
    display: none !important;
  }
  
  /* Modal-Overlay als einziges sichtbares Element */
  #universal-modal {
    display: block !important;
    position: relative !important;
    background: white !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Modal-Content für Druck optimieren - eine Seite */
  #universal-modal .modal-content {
    position: relative !important;
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 5mm 15mm 10mm 15mm !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    page-break-after: avoid !important;
    page-break-before: avoid !important;
  }
  
  /* Close-Button und Buttons beim Drucken ausblenden */
  #universal-modal .close-button,
  #modal-buttons {
    display: none !important;
  }
  
  /* Keine Seitenumbrüche im Modal-Inhalt */
  #modal-body,
  #modal-body > *,
  #modal-details,
  #modal-details > * {
    page-break-inside: avoid !important;
  }
  
  /* Font-Größe anpassen falls nötig */
  #universal-modal {
    font-size: 10pt !important;
  }
  
  #universal-modal h3 {
    font-size: 14pt !important;
    margin-top: 0 !important;
    margin-bottom: 8pt !important;
    padding-top: 0 !important;
  }
  
  #modal-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  #universal-modal h4 {
    font-size: 11pt !important;
    margin-bottom: 6pt !important;
  }
  
  /* Rabattberechtigung kleiner machen */
  #universal-modal .bg-yellow-50 {
    padding: 6pt !important;
    font-size: 8.5pt !important;
    line-height: 1.3 !important;
  }
  
  #universal-modal .bg-yellow-50 strong {
    font-size: 9pt !important;
  }
  
  #universal-modal .bg-yellow-50 br {
    display: none !important;
  }
  
  #universal-modal .bg-yellow-50 .mt-2 {
    margin-top: 4pt !important;
  }
  
  /* Abstände im Modal reduzieren */
  #universal-modal .mb-4 {
    margin-bottom: 6pt !important;
  }
  
  #universal-modal .mb-2 {
    margin-bottom: 3pt !important;
  }
  
  #universal-modal p {
    margin-bottom: 4pt !important;
    line-height: 1.3 !important;
  }
  
  /* Blue-Box Zahlungsoptionen kompakter */
  #universal-modal .bg-blue-50 {
    padding: 6pt !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
  }
  
  #universal-modal .bg-blue-50 h5 {
    font-size: 10pt !important;
    margin-bottom: 4pt !important;
  }
  
  #universal-modal .bg-blue-50 p {
    margin-bottom: 3pt !important;
  }
}