@charset "utf-8";

:root
{
    /* Bootstrap-Variablen überschreiben: https://getbootstrap.com/docs/5.3/customize/css-variables/ */
    --bs-green         : #006800; /* Color Contrast zu Weiß ist 7,05:1. Für WCAG 2.2 Level AAA ist mindestens 7:1 erforderlich: https://www.w3.org/TR/WCAG22/#contrast-enhanced */
    --bs-red           : #b60000; /* Color Contrast zu Weiß: 7,02:1 */
    --bs-body-font-size: 1.2rem; /* Bootstrap-Default: 1rem */
    --bs-body-color    : var(--bs-black); /* Bootstrap-Default: #212529; */
    /* Bootstrap-Variablen übernehmen:
    --bs-white
    --bs-body-font-size
    --bs-body-color
    --bs-body-bg
    */
}

/* Div. Bootstrap-Klassen mit diesen Einstellungen überschreiben: Die sind wahrscheinlich alle unnötig, sobald Bootstrap komplett auf CSS-Variablen umgestellt hat: https://github.com/twbs/bootstrap/issues/35319
================================================================================================================================================================================================= */
.bg-primary { background-color:var(--bs-primary) !important; }
.bg-success { background-color:var(--bs-green) !important; }
.bg-danger  { background-color:var(--bs-red) !important; }
.btn-primary { background-color:var(--bs-primary); border-color:var(--bs-primary); }
.btn-outline-primary { color:var(--bs-primary); border-color:var(--bs-primary); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { background-color:var(--bs-primary); border-color:var(--bs-primary); }
.form-check-input:checked { background-color:var(--bs-primary); border-color:var(--bs-primary); }
.invalid-feedback { font-size:var(--bs-body-font-size); font-style:italic; } /* https://github.com/twbs/bootstrap/pull/41488 */
.help-text { color:black; } /* `form_help()` */
select { font-size:var(--bs-body-font-size) !important; }

/* Weitere Bootstrap-Konfigurationen und -Ergänzungen
================================================================================================================================================================================================= */
.container { max-width:1880px !important; } /* = Full-HD (1920x1080) minus 40px für Scrollbalken&Co. */
.form-control, .form-select, .paintedSignature canvas { background-color:var(--bs-card-cap-bg); }
#inputSuchen { background-color: var(--bs-body-bg); } /* Überschreiben der Zeile darüber */
.form-control, .form-select, .form-check-input { border-color:#929598; }
.form-control, .btn { font-size:var(--bs-body-font-size); }
.btn-sm { font-size:1.1rem; }
.card-success { border-color:var(--gruenBorder); }
.card-success > .card-header { font-size:var(--fontSizeAlert); background:var(--bs-green); color:white; }
.card-danger { border-color:var(--rotBorder); }
.card-danger .card-header { font-size:var(--fontSizeAlert); background:var(--bs-red); color:white; }
.card-warning { border-color: #ffeeba; }
.card-warning .card-header { font-size:var(--fontSizeAlert); background:#fff3cd; border-bottom-color:#ffeeba; color:black; } /* Übernommen von Bootstrap4: .alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba} */
.alert { font-size:var(--fontSizeAlert); }
.alert-success { background:var(--bs-green); color:white; }
.alert-danger  { background:var(--bs-red)  ; color:white; }
.form-check-label { display:inline; } /* Damit die MoreInfo-Links bei *mehrzeiligen* Radiobuttons in der selben Zeile angezeigt werden */
legend { font-size:var(--bs-body-font-size); }
.btn:disabled { background-color:var(--bs-gray); border-color:var(--bs-gray); color:white; }
summary.card-header { border-bottom:none; }

/* `bd-callout` übernommen von Bootstrap 5.1: https://getbootstrap.com/docs/5.1/assets/css/docs.css */
.bd-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #e9ecef;border-left-width:.25rem;border-radius:.25rem}
.bd-callout h4{margin-bottom:.25rem}
.bd-callout p:last-child{margin-bottom:0}
.bd-callout code{border-radius:.25rem}
.bd-callout + .bd-callout{margin-top:-.25rem}
/* Thomas hinzugefügt: */
.bd-callout { margin-top:0; margin-bottom:0.75rem; border-left-color:var(--bs-primary);
    position:relative; /* Übernommen von Bootstrap 5.1 `.alert` für die Positionierung von `.btn-close` */
    padding-right:3rem !important; /* Übernommen von Bootstrap 5.1 `.alert-dismissible` */
}
.bd-callout-danger { border-left-color:var(--bs-red); }
.bd-callout-inactive { border-left-color:#eee; }

/* Grundlayout
================================================================================================================================================================================================= */
body { display:flex; min-height:100vh; flex-direction:column; hyphens:auto; } /* `display`, `min-height` & `flex-direction` ist für Positionierung der Feedbacks ganz unten */
a:not(.btn), a:visited { padding:0 2px; text-decoration:underline; color:var(--linkColor); }
.kopfbereich, .kopfbereich a, .kopfbereich a:link, .kopfbereich a:visited { color:var(--bs-white); }
.nav-link { transition:none; }
.kopfbereich .hyphensNone svg { height:0.75rem; width:auto; margin-right:0.4rem; }
.kopfbereich .hyphensNone svg path { fill:white; }
main { flex:1; } /* `flex:1;` ist für Positionierung der Feedbacks ganz unten */

/* Light-Dark-Toggle: */
.form-check.form-switch { font-size: 1.4rem; }
#toggleLightDark.form-check-input, #toggleLightDark.form-check-input:checked { background-color:var(--bs-primary); border-width:2px; border-color:var(--bs-white); }
.form-switch #toggleLightDark.form-check-input {
    /* SVG stammt von Bootstrap 5.3 Docs: https://getbootstrap.com/docs/5.3/forms/checks-radios/ */
    --bs-form-switch-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 20 20"><path fill="%23fff" d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path></svg>');
}

.divATrustLogo { width:100px; padding-left:5px; }

section.feedbacks { font-size:1.1rem; }
section.feedbacks blockquote { padding:0; margin:0; border:none; font-style:normal; } /* Überschreiben von `blockquote` oben */
section.feedbacks .anfuehrungszeichen { position:absolute; top:-0.6rem; left:-0.6rem; width:1.75rem; height:1.75rem; border-radius:1rem; background-color:var(--bs-primary); background-size:1.1rem; background-position:center; background-repeat:no-repeat; background-image:url('data:image/svg+xml;utf8,<!-- Entypo pictograms by Daniel Bruce — www.entypo.com --><svg version="1.1" id="Quote" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><path d="M5.315,3.401c-1.61,0-2.916,1.343-2.916,3c0,1.656,1.306,3,2.916,3c2.915,0,0.972,5.799-2.916,5.799v1.4 C9.338,16.601,12.057,3.401,5.315,3.401z M13.715,3.401c-1.609,0-2.915,1.343-2.915,3c0,1.656,1.306,3,2.915,3 c2.916,0,0.973,5.799-2.915,5.799v1.4C17.738,16.601,20.457,3.401,13.715,3.401z" fill="white"/></svg>'); }
section.feedbacks figcaption { font-size:1rem; color:#545454; } /* Color Contrast zu `#f7f7f7` (= Bootstrap 5 `.card-header`) ist 7,06:1 */

/* Oft verwendete Deklarationen
================================================================================================================================================================================================= */
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
h1 { text-align:center; }
a.list-group-item { padding:.5rem 1rem; } /* Wegen Suchergebnis: Angleichen an `<summary class="card-footer">`, Bootstrap 5: .card-footer{padding:.5rem 1rem; */
main li { margin-bottom:0.25rem; }
code, i { padding:0 0.25rem; background:rgba(var(--bs-body-color-rgb), 0.03); border:1px solid var(--bs-border-color-translucent); color:var(--bs-body-color); font-size:1.1rem; hyphens:none; } /* `background-color` ist `--bs-card-cap-bg` und `border-color` ist `--bs-card-border-color` von Bootstrap 5.3 */
.moreInfo {
    padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #e9ecef;border-left-width:.25rem;border-radius:.25rem; /* = Bootstrap 5.1: `.bd-callout` */
    margin-top:0.5rem; border-left-color:var(--bs-primary);
    position:relative; /* Übernommen von Bootstrap 5.1 `.alert` für die Positionierung von `.btn-close` */
    padding-right:3rem !important; /* Übernommen von Bootstrap 5.1 `.alert-dismissible` */
}
.bd-callout .btn-close, .moreInfo .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem} /* Übernommen von Bootstrap 5.1 `alert-dismissible .btn-close` */
button.moreInfoLink {
    all: unset;
    position:relative; top:-2px;
    display:inline-block; padding:0 5px !important; margin-left:-4px; margin-right:-4px; /* Zur (horizontalen) Vergrößerung des klickbaren Bereichs */
}
button.moreInfoLink svg circle { stroke:var(--linkColor);  }
button.moreInfoLink svg .i-punkt { fill:var(--linkColor); }
button.moreInfoLink svg rect { fill:var(--linkColor); }
button.moreInfoLink:hover, button.moreInfoLink:active, button.moreInfoLink:focus { background:none !important; }
button.moreInfoLink:hover svg .kreis  , button.moreInfoLink:active svg .kreis  , button.moreInfoLink:focus svg .kreis   { fill:var(--bs-primary); stroke:var(--bs-primary); }
button.moreInfoLink:hover svg .i-punkt, button.moreInfoLink:active svg .i-punkt, button.moreInfoLink:focus svg .i-punkt { fill:var(--hoverColor) !important; stroke:var(--hoverColor); }
button.moreInfoLink:hover svg rect    , button.moreInfoLink:active svg rect    , button.moreInfoLink:focus svg rect     { fill:var(--hoverColor); }

.alert-card { padding:.75rem 1.25rem !important; background-color:rgba(0,0,0,0.03); border:1px solid rgba(0,0,0,0.125); display:block; font-size:var(--bs-body-font-size); } /* Übernommen von Bootstrap: .card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,0.03);border-bottom:1px solid rgba(0,0,0,0.125)} */
.alert-card:hover { border-radius:0.25rem; }
.fs-normal { font-size:var(--bs-body-font-size); } /* Name analog zu `fw-normal` https://getbootstrap.com/docs/5.1/utilities/text/#font-weight-and-italics */

.hyphensNone { white-space:nowrap; hyphens:none; } /* `hyphens:none` verhindert Zeilenumbruch innerhalb der Adresse, z.B. bei `foo-bar@example.com`. `white-space:nowrap;` verhindert Zeilenumbruch zwischen den spitzen Klammern und der Adresse, z.B. "Irgendein Text < | foobar@example.com>"*/
.nl2br { white-space:pre-line; } /* Gibt's nicht in Bootstrap: https://github.com/twbs/bootstrap/issues/28324 */

.spinner { width:20px; height:20px; border:3px solid var(--bs-primary); margin:5px auto 5px auto; border-radius:50%; border-top-color:transparent; animation:rotateSpinner 1.5s infinite linear; }
@keyframes rotateSpinner { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:rotateSpinner 8s infinite linear; } }

.leerLassen { display:none; } /* `honeypot > attributes > class` in `config/packages/antispam.php` */
.wertepaar { margin-bottom:0.5rem; } /* Übernommen von Bootstrap4: .mb-2,.my-2{margin-bottom:.5rem !important} */
.wertepaar__ueberschrift { font-style:italic; }

.pdfDownload { background-repeat:no-repeat; padding-left:2rem; background-position:0.5rem center; background-image:url("images/pdf-07WuCOv.svg"); }
.iconNewTab { height:0.9rem; position:relative; top:-1px; margin-left:0.25rem; margin-right:0.25rem; }
a:hover .iconNewTab, a:active .iconNewTab, a:focus .iconNewTab { fill:white !important; }
.fehlermeldungGesamtesFormular { margin-bottom:1rem; padding:0.5rem 1rem; border:1px solid #f5c2c7; border-radius:0.25rem; background-color:var(--bs-red); color:white; } /* Fehlermeldungen, die sich auf das *gesamte* Formular beziehen (z.B. "Du musst die Kündigung unterschreiben") ganz oben. Wird verwendet in `templates/form/checkbox_radio_label.html.twig` und `templates/kuendigung.html.twig` und `kuendigung.js` */
blockquote {
    padding:0.5rem;margin-top:0.5rem;margin-bottom:0.5rem;border:1px solid #e9ecef;border-left-width:.25rem;border-radius:.25rem; /* ≈ Bootstrap 5.1 `.bd-callout` */
    font-style:italic;
}

/* Suche
================================================================================================================================================================================================= */
#formSuchen input { color:var(--bs-body-color); }
#formSuchen input::placeholder { color:var(--bs-body-color); opacity:1; }
#formSuchen.card-header:not(.suchergebnisVorhanden) { border-bottom:none; border-radius:calc(.25rem - 1px); } /* Damit der `.card-header` zu Beginn (d.h. ohne Suchergebnis) unten auch abgerundet ist */
#formSuchen.card-header.suchergebnisVorhanden { border-bottom-left-radius:0; border-bottom-right-radius:0; }
#formSuchen svg { position:relative; top:-1px; }
#formSuchen svg path { fill:var(--bs-primary); }
#formSuchen .input-group-text:hover{color:#fff;background-color:#6c757d;border-color:#6c757d;} /* Übernommen von Bootstrap 5.1.3 `btn-outline-secondary:hover` */
div#suchergebnis .list-group-item { border-left:none; border-right:none; border-top:none; }
div#suchergebnis .alert-danger { border-bottom:1px solid #dfdfdf; } /* Farbe ist von Bootstrap 5.1 `.card-header` */
div#suchergebnis a { border-radius:0; }
#detailsTippNeuerEmpfaenger summary.card-footer { border-top:none; }
#detailsTippNeuerEmpfaenger > summary:hover { border-bottom-left-radius:calc(.25rem - 1px); border-bottom-right-radius:calc(.25rem - 1px); }
.pfeil { font-family: sans-serif; color:var(--bs-body-color); }

/* Brief
================================================================================================================================================================================================= */
#brief { min-height:700px; padding:2rem; box-shadow:0 0 15px rgba(0,0,0,.1); }

/* 'Vorschau'-Banner im Brief: https://codepen.io/nxworld/pen/oLdoWb und wahrscheinlich auch https://www.cssportal.com/css-ribbon-generator/ */
#brief .ribbon { width:200px; height:200px; overflow:hidden; position:absolute; }
#brief .ribbon span { position:absolute; display:block; width:330px; padding:0.25rem; color:white; text-align:center; font-size:1.2rem; }
#brief .ribbon-top-right { top:0; right:0; }
#brief .ribbon-top-right span { padding-left:30px; left:-25px; top:30px; transform:rotate(45deg); }

/* Startseite
================================================================================================================================================================================================= */
.anleitung li::marker { font-weight:1000; }

/* UploadedAttachments
================================================================================================================================================================================================= */
#inputUploadedAttachments { position:fixed; top:-1000em; } /* Bei `display:none` funktioniert das `<input>`-Element in Safari angeblich nicht mehr: http://stackoverflow.com/a/28075416/1668200 */

/* Häufige Fragen
================================================================================================================================================================================================= */
.haeufigeFragen details:not([open]) summary:hover { border-bottom-left-radius:calc(.25rem - 1px); border-bottom-right-radius:calc(.25rem - 1px); } /* Übernommen von Bootstrap 4: .card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0} */

/* Zahlung
================================================================================================================================================================================================= */
.buttonEps        { height:34px; width:calc(58px/40*34) ; background-image:url("images/eps--4EeRLT.svg"); background-position:0 center; background-repeat:no-repeat; background-size:contain; }
.buttonCreditcard { height:32px; width:274px; background-image:url("images/visa--akONrU.svg"), url("images/mastercard-qu-CU1q.svg"), url("images/amex-eeg7AS3.svg"), url("images/google-pay-AJFVDk9.svg"), url("images/apple-pay-1iv4cGS.svg"); background-position:0 center, 55px center, 108px center, 161px center, 224px center; background-repeat:no-repeat; background-size:contain; }
.buttonVisa       { height:32px; width:calc(40px/24*32); background-image:url("images/visa--akONrU.svg"); background-position:0 center; background-repeat:no-repeat; background-size:contain; }
.buttonMastercard { height:32px; width:calc(116.49471px/72.01416*32); background-image:url("images/mastercard-qu-CU1q.svg"); background-position:0 center; background-repeat:no-repeat; background-size:contain; }
.buttonAmex       { height:32px; width:calc(58.599998px/37.5*32); background-image:url("images/amex-eeg7AS3.svg"); background-position:0 center; background-repeat:no-repeat; background-size:contain; }
.buttonApplePay   { height:32px; width:calc(165.52px/105.97*32); background-image:url("images/apple-pay-1iv4cGS.svg") ; background-position:0 center; background-repeat:no-repeat; background-size:contain; }
.buttonGooglePay  { height:32px; width:calc(752px/400*32)      ; background-image:url("images/google-pay-AJFVDk9.svg"); background-position:0 center; background-repeat:no-repeat; background-size:contain; }
.buttonPayPal     { height:28px; width:94px; background-image:url("images/paypal-pp-fw0g8Gc.svg"), url("images/paypal-vMObJA1.svg"); background-position:10px center, 27px center; background-size:auto 18px, auto 18px; background-repeat:no-repeat; background-color:#FFC439 !important; border:none; border-radius:18px; }

/* Impressum
================================================================================================================================================================================================= */
.dataMarker > li::marker { content:attr(data-marker) " "; } /* Nimmt den Inhalt von `data-marker` als Aufzählungszeichen (z.B. bei Datenschutz) */

/* Einstellungen für Bootstrap Dark-Mode: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode
================================================================================================================================================================================================= */
[data-bs-theme="dark"] {
    .iconNewTab { fill:var(--bs-card-border-color); }
}