﻿/* ============================================================
   Minimales Bootstrap 4-kompatibles Grid
   Abdeckt alle in buchung.ascx verwendeten col-* Klassen:
   – Bootstrap 4:  col-N, col-sm-N, col-md-N, col-lg-N
   – Bootstrap 3:  col-xs-N  (Alias für col-N)
   – Reddank 16er: col-xs-16, col-md-16  → 100 %
   12-Spalten-Basis, Breakpoints: sm≥576px, md≥768px, lg≥992px
============================================================ */
.abstand10 {clear:both!important; height:10px!important;}
.text-right { text-align:right;}
/* ── Row ─────────────────────────────────────────────────── */
/* ============================================================
   Minimales Bootstrap 4-kompatibles Grid
   Alle Spaltengrößen 1–12 (+ Reddank 16er → 100 %)
   – Bootstrap 4:  col-N, col-sm-N, col-md-N, col-lg-N
   – Bootstrap 3:  col-xs-N  (Alias für col-N)
   – Reddank 16er: col-xs-16, col-md-16  → 100 %
   Breakpoints: sm ≥ 576 px · md ≥ 768 px · lg ≥ 992 px
============================================================ */

/* ── Row ─────────────────────────────────────────────────── */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
    margin-bottom:10px;
}

/* ── Basis aller Spalten (mobile first: 100 %) ───────────── */
[class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    min-height: 1px;
}
.btn {margin: .3125rem 0 0;background-color: #0a0a0a;
    border-color: #0a0a0a;
    color: #fff;font-weight:bold;padding:.8rem;}
.button_zurueck {background-color:#fff;border:1px solid #0a0a0a;color:#0a0a0a;}
.button_zurueck:hover {color:#0a0a0a;}

.btn:hover {color:#fff;}

/* ── Spaltenbreiten ohne Breakpoint (xs / col-N) ─────────── */
.col-1,  .col-xs-1  { flex: 0 0  8.3333%; max-width:  8.3333%; }
.col-2,  .col-xs-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3,  .col-xs-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4,  .col-xs-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5,  .col-xs-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6,  .col-xs-6  { flex: 0 0 50%;      max-width: 50%; }
.col-7,  .col-xs-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8,  .col-xs-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9,  .col-xs-9  { flex: 0 0 75%;      max-width: 75%; }
.col-10, .col-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11, .col-xs-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12, .col-xs-12 { flex: 0 0 100%;     max-width: 100%; }

/* Reddank 16-Spalter → volle Breite */
.col-16, .col-xs-16 { flex: 0 0 100%;     max-width: 100%; }

/* ── sm ≥ 576 px ─────────────────────────────────────────── */
@media (min-width: 576px) {
    .col-sm-1  { flex: 0 0  8.3333%; max-width:  8.3333%; }
    .col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-sm-3  { flex: 0 0 25%;      max-width: 25%; }
    .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-sm-6  { flex: 0 0 50%;      max-width: 50%; }
    .col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-sm-9  { flex: 0 0 75%;      max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .col-sm-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* ── md ≥ 768 px ─────────────────────────────────────────── */
@media (min-width: 768px) {
    .col-md-1  { flex: 0 0  8.3333%; max-width:  8.3333%; }
    .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
    .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
    .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
    .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .col-md-12 { flex: 0 0 100%;     max-width: 100%; }

    /* Reddank 16-Spalter → volle Breite */
    .col-md-16 { flex: 0 0 100%;     max-width: 100%; }
}

/* ── lg ≥ 992 px ─────────────────────────────────────────── */
@media (min-width: 992px) {
    .col-lg-1  { flex: 0 0  8.3333%; max-width:  8.3333%; }
    .col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
    .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
    .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .col-lg-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* ── Hilfsklassen ────────────────────────────────────────── */
.clearfix::after,
.clear      { display: block; clear: both; content: ""; }