/* Eigene Anpassungen zusätzlich zu Bootstrap */

/* Akzentfarbe (Indigo) für primäre Buttons und Links */
:root {
    --akzent: #4f46e5;
    --akzent-dunkel: #4338ca;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color-rgb: 67, 56, 202;
}

.btn-primary {
    --bs-btn-bg: var(--akzent);
    --bs-btn-border-color: var(--akzent);
    --bs-btn-hover-bg: var(--akzent-dunkel);
    --bs-btn-hover-border-color: var(--akzent-dunkel);
    --bs-btn-active-bg: var(--akzent-dunkel);
    --bs-btn-active-border-color: var(--akzent-dunkel);
    --bs-btn-disabled-bg: var(--akzent);
    --bs-btn-disabled-border-color: var(--akzent);
}

/* Wortmarke */
.marke {
    font-weight: 700;
    letter-spacing: -.02em;
}

.marke span {
    color: var(--akzent);
}

/* Startseite */
.startseite-held {
    padding: 5rem 0 4rem;
    background: linear-gradient(180deg, #eef2ff 0%, var(--bs-body-bg) 100%);
}

.schritt-nummer {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 0 auto;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--akzent);
    font-weight: 700;
}

/* Impressum und Datenschutz */
.rechtstext {
    max-width: 48rem;
}

.rechtstext h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 2rem;
}

/* Schrittanzeige im Workflow „Terminoptionen erstellen“ */
.schritte li {
    color: var(--bs-secondary-color);
}

.schritte li + li::before {
    content: "›";
    margin-right: .5rem;
}

.schritte li span {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    font-size: .8rem;
}

.schritte li.aktiv {
    color: var(--bs-body-color);
    font-weight: 600;
}

.schritte li.aktiv span {
    background: var(--akzent);
    color: #fff;
}

/* Deutlich sichtbare graue Ränder für Eingabefelder, Auswahllisten, Radiobuttons und Checkboxen */
.form-control,
.form-select,
.form-check-input {
    border: 1px solid var(--bs-gray-700);
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

/* Formatauswahl: Tabelle ohne Hintergrund, Beispiele in der zweiten Spalte */
.format-tabelle td {
    background: transparent;
    padding-left: 0;
    vertical-align: middle;
}

/* Seite 2: Terminoptionen als dauerhaft editierbare Zeilen */
.termin-felder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.termin-zeile {
    margin-bottom: .5rem;
}

.termin-felder .feld-datum {
    width: 7rem;
}

.termin-felder .feld-zeit {
    width: 7rem;
}

.termin-kopf {
    margin-bottom: .25rem;
}

.termin-felder .wochentag {
    min-width: 5.5rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.termin-felder .feld-kommentar {
    flex: 1 1 10rem;
    min-width: 8rem;
}

/* Seite 1: Ablaufdatum der Umfrage */
.feld-ablauf {
    max-width: 9rem;
}

.info-knopf {
    line-height: 1;
    color: var(--bs-secondary-color);
}

/* Workflow 2: Abstimmung (Terminoptionen als Zeilen, Teilnehmer als Spalten).
   Kompakt gehalten, damit auf dem Handy möglichst viele Teilnehmerspalten sichtbar sind. */
.beschreibung {
    white-space: pre-line;
}

.abstimmung-tabelle th,
.abstimmung-tabelle td {
    padding: .25rem .3rem;
}

.abstimmung-tabelle .spalte-termin {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    min-width: 7.5rem;
    max-width: 11rem;
    font-size: .875rem;
}

.abstimmung-tabelle .spalte-eigene {
    background: var(--bs-tertiary-bg);
    text-align: center;
}

.name-eingabe input {
    max-width: 20rem;
}

.abstimmung-tabelle .spalte-teilnehmer {
    text-align: center;
}

/* Namen der anderen dürfen umbrechen, damit die Spalten schmal bleiben. */
.abstimmung-tabelle thead .spalte-teilnehmer {
    max-width: 4.5rem;
    font-size: .75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    vertical-align: bottom;
}

/* Antworten werden für alle Teilnehmer gleich als Button dargestellt, immer in derselben Breite. */
.antwort-knopf {
    width: 2.75rem;
    padding: .1rem 0;
    font-size: .75rem;
    line-height: 1.3;
}