@charset "utf-8";

:root
{
    /* Bootstrap-Variablen überschreiben: https://getbootstrap.com/docs/5.3/customize/css-variables/ */
    --bs-primary: var(--bs-green); /* Bootstrap-Default: #0d6efd */

    /* Eigene Variablen: */
    --gruenBorder    : #b8d5b8; /* Bootstrap-Farbe für `.alert-success`-Border, wenn `$green:#006800` ist */
    --rotBorder      : #ebb8b8; /* Bootstrap-Farbe für `.alert-danger`-Border, wenn `$red:#b60000` ist */
    --fontSizeAlert  : 1.5rem; /* Color Contrast von `--bs-green` in `.card-header` ist: 6,57:1 (#006800 auf #f7f7f7). Für WCAG 2.1 Level AAA ist daher mindestens 18pt Schriftgröße erforderlich, d.h. `1.5rem` */
    --linkColor      : var(--bs-green); /* Text-Farbe eines Links */
    --hoverColor     : white; /* Text-Farbe eines :hover-Links */
    --hoverBackground: var(--bs-green); /* Hintergrund-Farbe eines :hover-Links */
}

/* 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
================================================================================================================================================================================================= */
/* Ab hier übernommen von Bootstrap5 mit `$primary:#006800;`: */
.btn-primary:hover{color:#fff;background-color:#005800;border-color:#005300}
.btn-primary:focus{color:#fff;background-color:#005800;border-color:#005300;box-shadow:0 0 0 .25rem rgba(38,127,38,.5)}
.btn-primary:active,.btn-primary.active{color:#fff;background-color:#005300;border-color:#004e00}
.btn-primary:active:focus,.btn-primary.active:focus{box-shadow:0 0 0 .25rem rgba(38,127,38,.5)}
.btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus {background:var(--bs-green); box-shadow:0 0 0 .25rem rgba(0,104,0,.5); color:white;}
.form-check-input:focus{border-color:#80b480;outline:0;box-shadow:0 0 0 .25rem rgba(0,104,0,.25)}

/* Weitere Bootstrap-Konfigurationen und -Ergänzungen
================================================================================================================================================================================================= */
.form-control:hover, .paintedSignature canvas:hover { border-color:#00e800; outline:0; box-shadow:0 0 0 .2rem rgba(0,104,0,0.25); } /* Bootstrap, wenn `$primary:#006800` ist: .form-control:focus{color:#495057;background-color:#fff;border-color:#00e800;outline:0;box-shadow:0 0 0 .2rem rgba(0,104,0,0.25)} */
@media (prefers-reduced-motion:reduce) { .progress-bar-animated { animation:none; } }

/* Grundlayout
================================================================================================================================================================================================= */
main a:not(.pdfDownload, .logo):hover, main a:not(.pdfDownload, .logo):active, main a:not(.pdfDownload, .logo):focus { color:var(--hoverColor); background:var(--hoverBackground); text-decoration-color:white; border-radius:1px; } /* http://caniuse.com/#feat=text-decoration */
/* TODO: Schrift als SVG machen - wie bei AA: */
.kopfbereich .okLogo { font-size:3.5rem; line-height:4rem; font-family:"Bookman Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif; border-radius:0.25rem; hyphens:none; } /* `border-radius:0.25rem` ist analog zu Bootstrap4: .nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem} */
.kopfbereich .okLogo svg { display:inline-block; height:3.0rem; padding:0.275rem 1rem; position:relative; top:-0.3rem; border:0.2rem solid var(--bs-white); border-radius:0.25rem; }
.kopfbereich .okLogo svg path, .kopfbereich .okLogo svg circle, .kopfbereich .okLogo svg rect { fill:var(--bs-white); stroke:var(--bs-white); }
.kopfbereich a:hover, .kopfbereich a:active, .kopfbereich a:focus { color:var(--bs-green) !important; background-color:var(--bs-body-bg) !important; text-decoration-color:var(--bs-green) !important; }
.kopfbereich a.nav-link:hover, .kopfbereich a.nav-link:focus { border-bottom-color:var(--bs-body-bg) !important; border-bottom-width:1px; border-bottom-style:solid !important; } /* Überschreiben von Bootstrap4: .nav-link:hover,.nav-link:focus{text-decoration:none} */
.kopfbereich .hyphensNone:hover svg path, .kopfbereich .hyphensNone:active svg path, .kopfbereich .hyphensNone:focus svg path { fill:var(--bs-green); }
.kopfbereich .nav-tabs .nav-link.active { color:var(--bs-body-color); background-color:var(--bs-body-bg); } /* Überschreiben von Bootstrap4: .nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff} */
.kopfbereich .active .hyphensNone svg path { fill:var(--bs-body-color); }
.logoDerStandard { background:#FDE2BA; }
.logoTrend { background-color:#24364B; }
.logoEMedia { background-color:#100911; }
.logoKurier { background-color:#D70005; }

/* Oft verwendete Deklarationen
================================================================================================================================================================================================= */
.logo:hover, .logo:hover img { filter:opacity(80%); }

summary { text-decoration:underline; color:var(--bs-primary) !important; }
summary:hover { background:var(--bs-green); color:white !important; }
summary h3, summary a { font-size:var(--fontSizeAlert); }
summary h4 { font-size:1.3rem; } /* Empfänger-Ausreden auf "Meine Kündigung" */
details:not([open]) .card-header { border-bottom:none; } /* `details:[open]` ist ein Workaround, weil es keine CSS-Pseudoclass `:open` gibt: https://github.com/w3c/html/issues/600 */

.durchgestrichen { text-decoration:var(--bs-red) double line-through; }
.unterschriftDurchgestrichen { border-top:3px double var(--bs-red); position:relative; }
.pflichtfeld { color:var(--bs-red); }
.borderBottomRadius0 { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.w-0 { width:0; }

/* Suche
================================================================================================================================================================================================= */
div.suchergebnis a { text-decoration:none; }
div.suchergebnis a span.name { text-decoration:underline; }
div.suchergebnis .list-group-item-action:hover, div.suchergebnis .list-group-item-action:active, div.suchergebnis .list-group-item-action:focus { background:var(--bs-green); color:white; text-decoration:none; }
div.suchergebnis .list-group-item-action:hover strong.pfeil, div.suchergebnis .list-group-item-action:active strong.pfeil, div.suchergebnis .list-group-item-action:focus strong.pfeil,
div.suchergebnis .list-group-item-action:hover span.text-body-secondary, div.suchergebnis .list-group-item-action:active span.text-body-secondary, div.suchergebnis .list-group-item-action:focus span.text-body-secondary
{ color:white !important; }


/* Brief
================================================================================================================================================================================================= */
#brief .poststempel { position:absolute; top:5rem; right:2rem; transform:rotate(20deg); }
#brief .poststempel--animation { animation:resizePoststempel 1s cubic-bezier(0.8,0,1,1); }
@keyframes resizePoststempel { 0% { width:100vw; height:100vh; transform:rotate(0); } }
@media (prefers-reduced-motion:reduce) { #brief .poststempel--animation { animation:none; } }
.sichtbareSignatur { padding:0.25rem 0.5rem; border:1px solid var(--bs-green); }

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

/* Kuendigung
================================================================================================================================================================================================= */
#Kuendigung .fehlermeldung { color:var(--bs-form-invalid-color); }
#Kuendigung .progress { height:calc(1.5rem + .5rem + 2px + 2px); background-color:rgba(0,0,0,0.175); border-color:rgba(0,0,0,0.175); } /* `height` ist analog zu Bootstrap 4: .form-control-sm{height:calc(1.5em + .5rem + 2px); ...}; `background-color` und `border-color` sind übernommen von Bootstrap 5.3 `--bs-card-border-color` */
#Kuendigung .progress.form-control:hover { box-shadow:none; border-color:rgba(0,0,0,0.125); } /* Übernommen von Boostrap4: .form-control{border:1px solid #ced4da;} */
#Kuendigung .paintedSignature canvas { border:1px solid #929598; border-radius:.25rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; } /* Übernommen von Bootstrap 5.1 `.form-control` */
@media (prefers-reduced-motion:reduce) { #Kuendigung .paintedSignature canvas { transition:none; } }
.iframeIdAustria { width:100%; min-width:331px; min-height:371px; border:none; } /* Bei `width`<=330px reduziert sich die Schriftgröße. Bei `height`<=370px wechselt das A-Trust-Logo zur Mini-Version (nur rotes "A"). */
canvas { width:100%; height:200px; } /* Größe von jSignature (bis Oktober 2022) war: 1200 x 130 */
.briefUnterschrift__stift img { width:100%; }

/* Kuendigung Abgeschickt
================================================================================================================================================================================================= */
.progress-bar { background-color:var(--bs-green); }

/* Häufige Fragen
================================================================================================================================================================================================= */
.haeufigeFragen blockquote { padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem; } /* Überschreiben von `blockquote` in `aaok.css` */

/* Spenden
================================================================================================================================================================================================= */
#imgSepaQrCode { box-sizing:content-box; padding:5px; border:3px solid black; border-radius:8px; }
svg.hakerlKopiert { width:1.2rem; height:1.2rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); visibility:hidden; }
.spendenButton { color:transparent; } /* IDEA: Symfony 8.1: Schauen, ob sich der Label von Submit-Button schon abschalten lässt: https://github.com/symfony/symfony/issues/62580   Dann auch in der nächsten Zeile `color:transparent;` wieder löschen */
/* FIXME: Buttons brauchen Rahmen als Focus-Indikator: */
.spendenButton:hover, .spendenButton:focus, .spendenButton:active { opacity:0.8; color:transparent !important; }
.spendenButton:focus, .spendenButton:active { box-shadow: 0 0 0 0.25rem #7FB37F; }
svg.revolutLogo { fill: var(--bs-body-color); width:90px; height:calc((90px*32)/145); }
svg.bunqLogo { fill: var(--bs-body-color); width:62px; height:calc((62px*169.04)/405.75); }
.revolutRevtag { border:10px solid black; }
svg.bitcoinLogo { width:120px; height:calc((64.001px*120)/306.5); }
.bitcoinLink:hover, .bitcoinLink:active, .bitcoinLink:focus { padding:0; }

/* MeineKuendigungen
================================================================================================================================================================================================= */
#MeineKuendigungen h2 { font-size:1.5rem; } /* Größe wie `h5` */
#MeineKuendigungen a.kuendigungCard { text-decoration:none; color:black; }
#MeineKuendigungen a.kuendigungCard .card-header, a.kuendigungCard .card-footer { text-decoration:underline; color:var(--bs-green); }
#MeineKuendigungen a.kuendigungCard:hover .card-header, a.kuendigungCard:hover .card-footer, a.kuendigungCard:hover li, a.kuendigungCard:hover .card { background-color:var(--bs-green); color:var(--bs-white); }
#MeineKuendigungen a.kuendigungCard:hover li.text-danger { color:white !important; } /* Überschreiben von Bootstrap4: .text-danger{color:#b60000 !important} */
#MeineKuendigungen a.kuendigungCard .card-body { min-height:0; }

/* Meine Kündigung
================================================================================================================================================================================================= */
section.postfach summary { padding:.75rem 1.25rem; } /* Übernommen von Bootstrap4: .list-group-item{position:relative;display:block;padding:.75rem 1.25rem; */
section.postfach div.details { padding:.75rem 1.25rem; }
section.postfach .card-footer a { padding:.75rem 1.25rem; } /* Übernommen von Bootstrap4: .card-footer{padding:.75rem 1.25rem; */
section.postfach .card-footer a:hover { border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px); } /* Übernommen von Bootstrap4: .card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)} */

/* Impressum
================================================================================================================================================================================================= */
#direktlink { font-size:1.25rem; padding:.75rem 1.25rem; border-bottom:none; border-radius:0.25rem; }
.impressumMedienberichte .medienLink { font-size:1rem; line-height:1.2rem; }
#logoOrf { background-color:#BDBDBB; color:white; }
#logoRadioWien { background-color:#DA021A; }
.kronen-zeitung { background-color:#E3000F; } /* Aus `kronen-zeitung.svg` */

/* Einstellungen für Bootstrap Dark-Mode: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode
================================================================================================================================================================================================= */
:root[data-bs-theme="dark"] {
    --bs-green     : #003800;
    --bs-red       : #770000;
    --bs-white     : #e1e1e1;
    --bs-body-color: var(--bs-white);
    --gruenLink    : #009000;

    .kopfbereich a { color:var(--bs-white) !important; }
    .kopfbereich a:hover, .kopfbereich a:active, .kopfbereich a:focus { color:var(--bs-green) !important; background-color:var(--bs-white) !important; }
    a:not(.btn), a:visited { color:var(--gruenLink); }
    a:hover:not(.medienberichte .logo):not(.pdfDownload), a:active:not(.medienberichte .logo):not(.pdfDownload), a:focus:not(.medienberichte .logo):not(.pdfDownload) { color:var(--bs-body-color); background:var(--bs-green); }
    .kopfbereich .hyphensNone svg path { fill:var(--bs-body-color); }
    .moreInfoLink svg circle { stroke:var(--gruenLink) !important; }
    a.moreInfoLink svg .i-punkt { fill:var(--gruenLink); }
    .moreInfoLink svg rect { fill:var(--gruenLink) !important; }
    a.moreInfoLink:hover, a.moreInfoLink:active, a.moreInfoLink:focus { background:none; }
    a.moreInfoLink:hover svg .kreis  , a.moreInfoLink:active svg .kreis  , a.moreInfoLink:focus svg .kreis   { fill:var(--bs-green); }
    a.moreInfoLink:hover svg .i-punkt, a.moreInfoLink:active svg .i-punkt, a.moreInfoLink:focus svg .i-punkt { fill:var(--bs-body-color) !important; stroke:var(--bs-body-color) !important; }
    a.moreInfoLink:hover svg rect    , a.moreInfoLink:active svg rect    , a.moreInfoLink:focus svg rect     { fill:var(--bs-body-color) !important; }
    #buttonSuchen svg path { fill:var(--bs-white); }
    summary { color:var(--gruenLink) !important; }
    summary:hover { color:var(--bs-body-color); }
    .btn-outline-primary { color:var(--gruenLink); border-color:var(--gruenLink); }
    section.feedbacks figcaption { color: #9e9e9e; } /* =Bootstrap-Dark5 `.text-muted` */
    #MeineKuendigungen a.kuendigungCard .card-header, a.kuendigungCard .card-footer { text-decoration:underline; color:var(--gruenLink); }
    svg path.orf_at { fill:var(--bs-white); }
    .netzpolitik_org,.scs-shopping-intern { background-color:white; }
    .form-switch #toggleLightDark.form-check-input { --bs-form-switch-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-80 -40 464 592" style="display: block; transform: scale(-1,1)"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="%23e1e1e1" d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>'); }
    svg.bitcoinLogo path.bitcoin { fill:var(--bs-body-color); }
    .form-control, .form-select, .paintedSignature canvas { background-color: #3b4148; } /* Selber errechnet: #272B30 (= `.card-header`) Mal 1,5 */
}