/*
 * DDI Terminbuchung - Gestaltung
 * ==============================
 *
 * Grundsatz nach Kapitel 8 des Anforderungsdokuments: kein erkennbares
 * Fremdelement. Deshalb bringt diese Datei WEDER Schriften NOCH Farben
 * mit. Beides kommt vom Theme:
 *
 *   Schrift  ueber font: inherit
 *   Farben   ueber die globalen Elementor-Variablen, mit neutralem
 *            Ersatzwert, falls Elementor fehlt
 *
 * Aendert jemand im Theme die Markenfarbe, aendert sich die
 * Buchungsstrecke mit. Es muss niemand hier nachziehen.
 */

.ddi-tb {
    /* Markenfarben nach Corporate Brand Guide 2026.
       Das Theme darf sie ueberschreiben, falls jemand dort die
       Markenfarbe aendert - dann zieht die Buchungsstrecke mit. */
    --ddi-gruen:   var(--e-global-color-primary, #005645);
    --ddi-schwarz: var(--e-global-color-secondary, #131313);
    --ddi-taupe:   #c3beba;
    --ddi-warnung: #a4262c;

    --ddi-rand:    #d8d5d2;   /* Taupe, deutlich aufgehellt */
    --ddi-grau:    #6b6764;   /* fuer Nebeninformationen */
    --ddi-flaeche: #f6f5f4;

    /* Am 05.10.2026 an daviddeindl.com/verkauf/ nachgemessen:
       Haupt-Knopf 48 px hoch, Radius 20 px, Polsterung 12/24 px,
       Schriftstaerke 600, Schriftgroesse 16 px, KEIN Schatten. */
    --ddi-rund-gross:  20px;   /* Knoepfe und Tageskacheln */
    --ddi-rund-mittel: 20px;
    --ddi-rund-klein:  16px;   /* Uhrzeiten, etwas kleiner */
    --ddi-rund-feld:   10px;   /* Eingabefelder            */

    /* Abstand nach unten, ueber den Kurzcode einstellbar */
    --ddi-abstand-unten: 3rem;

    font: inherit;
    color: inherit;
    max-width: 46rem;
    padding-bottom: var(--ddi-abstand-unten);
}


/* Das hidden-Attribut muss staerker sein als die Regeln weiter unten.
   Ohne diese Zeile bleibt die Ladeanzeige stehen, weil
   .ddi-tb__laden { display: flex } das Verstecken ueberschreibt. */
.ddi-tb [hidden] { display: none !important; }

/* Die Website hat nirgends Schatten. Das Theme setzt aber sowohl
   Kastenschatten als auch TEXTschatten - beide hier ausdruecklich aus.
   Der Textschatten laesst die Schrift weich und grau wirken statt klar. */
.ddi-tb,
.ddi-tb * {
    text-shadow: none !important;
}
.ddi-tb button,
.ddi-tb input,
.ddi-tb textarea,
.ddi-tb a,
.ddi-tb .ddi-tb__tag,
.ddi-tb .ddi-tb__zeit {
    box-shadow: none !important;
    filter: none !important;
}

.ddi-tb *,
.ddi-tb *::before,
.ddi-tb *::after { box-sizing: border-box; }


/* --- Schrittanzeige ------------------------------------------------ */
.ddi-tb__schritte {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .875em;
    opacity: .6;
}
.ddi-tb__schritt--aktiv {
    opacity: 1;
    font-weight: 600;
    color: var(--ddi-gruen);
}

/* --- Ueberschriften ------------------------------------------------ */
.ddi-tb__titel {
    font: inherit;
    font-size: 1.375em;
    font-weight: 700;
    margin: 0 0 .35em;
}
.ddi-tb__hinweis {
    margin: 0 0 1.5rem;
    color: var(--ddi-grau);
}

/* --- Ladeanzeige --------------------------------------------------- */
.ddi-tb__laden {
    display: flex;
    gap: .4rem;
    padding: 2.5rem 0;
    justify-content: center;
}
.ddi-tb__punkt {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .25;
    animation: ddi-tb-puls 1.2s infinite ease-in-out;
}
.ddi-tb__punkt:nth-child(2) { animation-delay: .15s; }
.ddi-tb__punkt:nth-child(3) { animation-delay: .3s; }

@keyframes ddi-tb-puls {
    0%, 80%, 100% { opacity: .25; transform: scale(1); }
    40%           { opacity: .8;  transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
    .ddi-tb__punkt { animation: none; }
}

/* --- Stoerung ------------------------------------------------------ */
.ddi-tb__stoerung {
    border: 1px solid var(--ddi-rand);
    border-left: 3px solid var(--ddi-warnung);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.ddi-tb__stoerung p { margin: 0 0 .5rem; }
.ddi-tb__stoerung p:last-child { margin-bottom: 0; }
.ddi-tb__telefon a { font-weight: 600; }

/* --- Kalender: Wochenansicht ---------------------------------------- */
.ddi-tb__wochenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem 0 1rem;
}

.ddi-tb .ddi-tb__pfeil {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ddi-rand);
    border-radius: 50%;
    background: #fff;
    color: var(--ddi-schwarz);
    cursor: pointer;
    box-shadow: none;
    padding: 0;
}
.ddi-tb .ddi-tb__pfeil:hover:not([disabled]) {
    border-color: var(--ddi-gruen);
    color: var(--ddi-gruen);
}
.ddi-tb .ddi-tb__pfeil:focus-visible {
    outline: 2px solid var(--ddi-gruen);
    outline-offset: 2px;
}
.ddi-tb .ddi-tb__pfeil[disabled] {
    opacity: .3;
    cursor: default;
}

.ddi-tb__wochentext {
    font-weight: 600;
    font-size: 1.0625rem;
}

/* Die sieben Tage */
.ddi-tb__woche {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .375rem;
}

.ddi-tb .ddi-tb__tag {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .7rem .25rem .8rem;
    border: 1px solid var(--ddi-rand);
    border-radius: var(--ddi-rund-mittel);
    background: #fff;
    color: var(--ddi-schwarz);
    cursor: pointer;
    box-shadow: none;
    text-align: center;
    line-height: 1.1;
    transition: border-color .15s, background-color .15s;
}
.ddi-tb .ddi-tb__tag:hover:not([disabled]) {
    border-color: var(--ddi-gruen);
}
.ddi-tb .ddi-tb__tag:focus-visible {
    outline: 2px solid var(--ddi-gruen);
    outline-offset: 2px;
}
.ddi-tb .ddi-tb__tag[aria-pressed="true"] {
    background: var(--ddi-gruen);
    border-color: var(--ddi-gruen);
    color: #fff;
}
/* Nicht buchbar: ausgegraut, nicht anklickbar */
.ddi-tb .ddi-tb__tag[disabled] {
    background: var(--ddi-flaeche);
    border-color: transparent;
    color: #a9a5a1;
    cursor: default;
}

.ddi-tb__tagkurz {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ddi-grau);
    opacity: 1;
}
.ddi-tb__tagzahl {
    font-size: 1.25rem;
    font-weight: 600;
}
.ddi-tb__tagfrei {
    font-size: .6875rem;
    color: var(--ddi-grau);
    opacity: 1;
}
.ddi-tb .ddi-tb__tag[aria-pressed="true"] .ddi-tb__tagkurz,
.ddi-tb .ddi-tb__tag[aria-pressed="true"] .ddi-tb__tagfrei {
    color: rgba(255, 255, 255, .85);
}
.ddi-tb .ddi-tb__tag[disabled] .ddi-tb__tagkurz,
.ddi-tb .ddi-tb__tag[disabled] .ddi-tb__tagfrei { color: #b4b0ac; }

/* --- Uhrzeiten des gewaehlten Tages --------------------------------- */
.ddi-tb__uhrzeiten { margin-top: 1.25rem; }

.ddi-tb__uhrzeiten-titel {
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ddi-schwarz);
    margin: 0 0 .6rem;
}

.ddi-tb__zeiten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
    gap: .375rem;
}

.ddi-tb .ddi-tb__zeit {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: .9375rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    padding: .6rem .4rem;
    border: 1px solid var(--ddi-rand);
    border-radius: var(--ddi-rund-klein);
    background: #fff;
    background-image: none;
    color: var(--ddi-schwarz);
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
    min-height: 2.5rem;
}
.ddi-tb .ddi-tb__zeit:hover {
    border-color: var(--ddi-gruen);
    background: var(--ddi-flaeche);
}
.ddi-tb .ddi-tb__zeit:focus-visible {
    outline: 2px solid var(--ddi-gruen);
    outline-offset: 2px;
}
.ddi-tb .ddi-tb__zeit[aria-pressed="true"] {
    background: var(--ddi-gruen);
    border-color: var(--ddi-gruen);
    color: #fff;
    font-weight: 600;
}

.ddi-tb__leer {
    padding: 1.5rem 0;
    opacity: .7;
}

@media (max-width: 30rem) {
    .ddi-tb__woche { gap: .25rem; }
    .ddi-tb .ddi-tb__tag { padding: .5rem .1rem .55rem; }
    .ddi-tb__tagzahl { font-size: 1.0625rem; }
    .ddi-tb__tagfrei { display: none; }
    .ddi-tb__zeiten {
        grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
    }
}

/* --- Formular ------------------------------------------------------ */
.ddi-tb__gewaehlt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--ddi-gruen);
    border-radius: 0 var(--ddi-rund-klein) var(--ddi-rund-klein) 0;
    background: var(--ddi-flaeche);
    margin: 0 0 1.5rem;
}
.ddi-tb__gewaehlt-wert { font-weight: 600; }
.ddi-tb .ddi-tb__aendern {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--ddi-gruen);
    border-radius: var(--ddi-rund-klein);
    padding: .4rem 1rem;
    color: var(--ddi-gruen);
    text-decoration: none;
    cursor: pointer;
    min-height: 0;
    margin-left: auto;
}
.ddi-tb .ddi-tb__aendern:hover {
    background: var(--ddi-gruen);
    color: #fff;
}
.ddi-tb .ddi-tb__aendern:focus-visible {
    outline: 2px solid var(--ddi-gruen);
    outline-offset: 2px;
}

.ddi-tb__reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
@media (max-width: 36rem) {
    .ddi-tb__reihe { grid-template-columns: 1fr; }
}

.ddi-tb__feld { margin: 0 0 1.1rem; }
.ddi-tb__feld label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9375em;
    font-weight: 600;
}
.ddi-tb__optional { font-weight: 400; opacity: .6; }

.ddi-tb__feld input,
.ddi-tb__feld textarea {
    font: inherit;
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--ddi-rand);
    background: transparent;
    color: inherit;
}
.ddi-tb__feld input:focus-visible,
.ddi-tb__feld textarea:focus-visible {
    outline: 2px solid var(--ddi-gruen);
    outline-offset: 1px;
    border-color: transparent;
}
.ddi-tb__feld input[aria-invalid="true"],
.ddi-tb__feld textarea[aria-invalid="true"] {
    border-color: var(--ddi-warnung);
}
.ddi-tb__feldfehler {
    display: block;
    margin-top: .3rem;
    font-size: .875em;
    color: var(--ddi-warnung);
}

/* Honigtopf: unsichtbar, aber nicht display:none - manche Bots
   erkennen display:none und lassen das Feld dann leer. */
.ddi-tb__topf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ddi-tb__datenschutz {
    font-size: .875em;
    opacity: .7;
    margin: 0 0 1.25rem;
}

/* Steht unter dem Absendeknopf und nimmt die letzte Unsicherheit:
   der Interessent weiss, dass gleich etwas bei ihm ankommt. */
.ddi-tb__nachsatz {
    font-size: .875em;
    opacity: .7;
    text-align: center;
    margin: .75rem 0 0;
}

.ddi-tb__fehler {
    border-left: 3px solid var(--ddi-warnung);
    background: var(--ddi-flaeche);
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
}

.ddi-tb .ddi-tb__absenden {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 24px;
    border: none;
    border-radius: var(--ddi-rund-gross);
    background: var(--ddi-gruen);
    color: #fff;
    cursor: pointer;
    min-height: 3rem;
    box-shadow: none;
}
.ddi-tb .ddi-tb__absenden:hover {
    background: var(--ddi-schwarz);
    color: #fff;
}
.ddi-tb .ddi-tb__absenden:focus-visible {
    outline: 2px solid var(--ddi-schwarz);
    outline-offset: 2px;
}
.ddi-tb .ddi-tb__absenden[disabled] {
    opacity: .55;
    cursor: wait;
}
@media (max-width: 36rem) {
    .ddi-tb .ddi-tb__absenden { width: 100%; }
}

/* Eingabefelder ebenfalls absichern */
.ddi-tb .ddi-tb__feld input,
.ddi-tb .ddi-tb__feld textarea {
    border-radius: var(--ddi-rund-feld);
    background: #fff;
}

/* Nur fuer Screenreader */
.ddi-tb .screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}