/*
 * Ergaenzungen zu app.css. app.css wird aus layout-dev/resources/sass gebaut;
 * diese Datei wird danach geladen (Page/HeaderData/setup.ts).
 */

/* K17: Veroeffentlichungsdatum vor dem Titel. Uebersichten in der normalen
   Textschrift; auf den Detailseiten bleibt die fette Byline aus app.css. */
.col4--text .pubdate {
    display: block;
    font-family: "Avenir Next W01 Light", sans-serif;
    font-weight: 400;
    margin-bottom: 6px;
}

/* Header-Bild als <img> statt background-image (Alt-Text). Liegt wie vorher
   der Hintergrund unter dem dunklen Overlay (:before) und dem Titel. */
.pageheader .pageheader--inner .pageheader--image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: -1;
}

/* DCE Header, Feld "title offset": verschiebt H4 und H1 senkrecht. Der Wert gilt in Pixeln
   bei 1440 px Fensterbreite und skaliert mit der Breite wie der Header selbst. */
.pageheader .pageheader--inner .headline[style*="--title-offset"] {
    transform: translateY(calc(var(--title-offset) * 100vw / 1440));
}

/* DCE "FAQ" (Seite Haeufige Fragen / FAQ): Sprungliste, Kapitel (H2), Fragen (H3) mit Anker,
   Quellenzeilen klein. Alle Antworten offen sichtbar. */
/* Kapitel wie die H2 der Startseite (.teaserblock-a h2, z. B. «Expertise und Qualität») */
.textblock.faq h2.faq-category {
    font-family: "Avenir Next W01 Light", sans-serif;
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 10px;
    margin-top: 1.5em;
}
@media screen and (min-width: 720px) {
    .textblock.faq h2.faq-category { font-size: 30px; line-height: 1.3; margin-bottom: 13.3px; }
}
@media screen and (min-width: 1024px) {
    .textblock.faq h2.faq-category { font-size: 40px; line-height: 1.25; margin-bottom: 16.7px; }
}
@media screen and (min-width: 1400px) {
    .textblock.faq h2.faq-category { font-size: 48px; line-height: 1.2; margin-bottom: 20px; }
}
/* Fragen fett (gleicher Schnitt wie strong und die H1 im Header) */
.textblock.faq h3 {
    font-family: "Avenir Next LT W01 Bold", sans-serif;
    font-size: 20px;
    line-height: 1.3;
    margin-top: 1.4em;
}
@media screen and (min-width: 720px) {
    .textblock.faq h3 { font-size: 22px; }
}
@media screen and (min-width: 1024px) {
    .textblock.faq h3 { font-size: 24px; }
}
@media screen and (min-width: 1400px) {
    .textblock.faq h3 { font-size: 26px; }
}
/* Sprungziel nicht unter der fixen Kopfzeile */
.textblock.faq h3[id] {
    scroll-margin-top: 140px;
}
.textblock.faq .faq-item ul {
    list-style: disc;
    margin: 0 0 1em 1.2em;
}
/* Listen im Element "Text" (und FAQ) nicht ganz fett wie sonst in main (app.css),
   nur was im Editor fett ist; im Element "Content" (.imagetext) bleiben sie fett */
.textblock li {
    font-family: "Avenir Next W01 Light", sans-serif;
}
.textblock li strong {
    font-family: "Avenir Next LT W01 Bold", sans-serif;
}
/* Element "Text": Absaetze und Listen bis 1024 px breit (app.css: Absaetze 800 px);
   Titel und PDF-Listen bleiben bei 800 px */
@media only screen and (min-width: 720px) {
    .textblock > p,
    .textblock > ul:not(.pdflist),
    .textblock > ol {
        max-width: 87%;
        width: 1024px;
    }
}
.textblock.faq .faq-source,
.textblock.faq .faq-source p {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 0;
}
.textblock.faq .faq-item a,
.textblock.faq .faq-toc a {
    text-decoration: underline;
}
.textblock.faq .faq-toc {
    font-size: 16px;
    line-height: 1.4;
    margin: 1em 0 2em;
}
.textblock.faq .faq-toc-category {
    font-family: "Avenir Next LT W01 Bold", sans-serif;
    font-size: 18px;
    margin: 1em 0 0.3em;
}
.textblock.faq .faq-toc li {
    margin-bottom: 0.2em;
}
.textblock.faq .faq-toc ul {
    list-style: disc;
    margin: 0 0 0 1.2em;
}
/* Lange Adressen in Quellenzeilen umbrechen, sonst wird die Seite mobil breiter als der Bildschirm */
.textblock.faq a {
    overflow-wrap: anywhere;
}
/* Abstand zwischen den Fragen-Bloecken und vor jedem Kapitel */
.textblock.faq .faq-item {
    margin-top: 36px;
}
.textblock.faq .faq-item h3 {
    margin-top: 0;
}
.textblock.faq h2.faq-category {
    margin-top: 56px;
}
@media screen and (min-width: 1024px) {
    .textblock.faq .faq-item { margin-top: 52px; }
    .textblock.faq h2.faq-category { margin-top: 96px; }
}
/* Sprungliste mit Aufzaehlungspunkten wie die Inhaltslisten (main ul li);
   "nav li { list-style-type: none }" aus app.css aufheben */
.textblock.faq .faq-toc ul {
    list-style: disc;
    margin: 0;
    padding: 0;
}
.textblock.faq .faq-toc li {
    display: list-item;
    list-style-type: disc;
    margin: 0 0 0 1em;
    padding: 5px 0;
}
/* Links in den Quellenzeilen wie der Text, nur unterstrichen (nicht orange und fett) */
.textblock.faq .faq-source a {
    color: inherit;
    font-family: "Avenir Next W01 Light", sans-serif;
    text-decoration: underline;
}
/* Sprungliste: mehr Abstand zwischen den Kapitel-Gruppen */
.textblock.faq .faq-toc-category {
    margin-top: 32px;
}
.textblock.faq .faq-toc-category:first-child {
    margin-top: 0;
}
@media screen and (min-width: 1024px) {
    .textblock.faq .faq-toc-category { margin-top: 44px; }
    .textblock.faq .faq-toc-category:first-child { margin-top: 0; }
}
/* Textbreite der FAQ auf 800 px begrenzen (wie die Ueberschriften im Textblock) */
/* FAQ wie das Element "Text": Antworten und Sprungliste bis 1024 px, Fragen (Titel) 800 px */
.textblock.faq .faq-item,
.textblock.faq .faq-toc {
    max-width: 1024px;
}
.textblock.faq .faq-item h3 {
    max-width: min(800px, 100%);
}
@media only screen and (min-width: 720px) {
    .textblock.faq .faq-item,
    .textblock.faq .faq-toc {
        max-width: min(1024px, 87%);
    }
}
/* Listen im Element "Text" und in den FAQ-Antworten in der Groesse des Fliesstexts statt fix 15 px;
   die FAQ-Sprungliste bleibt bei 15 px */
.textblock li {
    font-size: 14px;
    line-height: 1.5;
}
@media screen and (min-width: 720px) {
    .textblock li { font-size: 16px; line-height: 1.4; }
}
@media screen and (min-width: 1400px) {
    .textblock li { font-size: 18px; line-height: 1.4; }
}
.textblock.faq .faq-toc li {
    font-size: 15px;
    line-height: 1.4;
}

/* Schwebender Link zurueck zur Sprungliste (wird per Skript eingefuegt, page.jsFooterInline.911):
   Pfeil U+2B61 (gleiche Zeichenfamilie wie U+2B62, schon nach oben gezeichnet und deshalb mittig;
   aus einer Systemschrift, die Avenir enthaelt ihn nicht), darunter "nach oben" / "top". Rechts buendig am Satzspiegel wie .textblock; den Abstand unten
   setzt das Skript ueber die fixierte Teaser-Leiste bzw. den Cookie-Hinweis. */
.faq-totop {
    align-items: center;
    background-color: rgba(255, 255, 255, .92);
    border-radius: 6px;
    bottom: 24px;
    color: #192a64;
    display: flex;
    flex-direction: column;
    font-family: "Avenir Next W01 Light", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    opacity: 0;
    padding: 12px 8px 6px;
    position: fixed;
    right: 20px;
    text-decoration: none;
    transition: opacity .2s, visibility .2s;
    visibility: hidden;
    z-index: 900;
}
.faq-totop .faq-totop-arrow {
    display: block;
    font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
    font-size: 36px;
    line-height: 1;
}
.faq-totop.is-visible {
    opacity: 1;
    visibility: visible;
}
.faq-totop:hover,
.faq-totop:focus {
    color: #516dcb;
}
@media screen and (min-width: 1024px) {
    .faq-totop { font-size: 16px; }
    .faq-totop .faq-totop-arrow { font-size: 44px; }
}
@media screen and (min-width: 1024px) { .faq-totop { right: 80px; } }
@media screen and (min-width: 1400px) { .faq-totop { right: 120px; } }
@media screen and (min-width: 1600px) { .faq-totop { right: 200px; } }
@media screen and (min-width: 1800px) { .faq-totop { right: 250px; } }
/* Sprungziel nicht unter der fixen Kopfzeile */
.textblock.faq .faq-toc {
    scroll-margin-top: 140px;
}

/* Footer, Kasten "Mit globegarden verbinden": Profil-Symbole (PNG 24 px); der Abstand rechts
   kommt aus app.css und soll das Symbol nicht verkleinern */
footer .footer-teaser .link img {
    box-sizing: content-box;
    height: 24px;
    vertical-align: middle;
    width: 24px;
}

/* Element "Text", Feld "Box" (text.html): derselbe Textblock in einer Box, weiss oder blau wie
   News-Detail. Die Box sitzt im Satzspiegel (seitlicher Abstand wie sonst der Text), innen
   oben und unten doppelt so viel Abstand wie die Box auf News-Detail, seitlich 25 % mehr. */
.textblock.textblock-box {
    margin-left: 20px;
    margin-right: 20px;
    padding: 40px 50px;
}
.textblock.textblock-box.box1 { background-color: #fff; }
.textblock.textblock-box.box2 { background-color: #eceef4; }
.textblock.textblock-box > :last-child { margin-bottom: 0; }
@media screen and (min-width: 720px) { .textblock.textblock-box { padding: 53.2px 66.5px; } }
@media screen and (min-width: 1024px) { .textblock.textblock-box { margin-left: 80px; margin-right: 80px; padding: 66.8px 83.5px; } }
@media screen and (min-width: 1400px) { .textblock.textblock-box { margin-left: 120px; margin-right: 120px; padding: 80px 100px; } }
@media screen and (min-width: 1600px) { .textblock.textblock-box { margin-left: 200px; margin-right: 200px; } }
@media screen and (min-width: 1800px) { .textblock.textblock-box { margin-left: 250px; margin-right: 250px; } }
/* In der Box ohne die 87-%-Begrenzung; die Breiten 800 px (Titel) und 1024 px (Text) bleiben */
@media only screen and (min-width: 720px) {
    .textblock.textblock-box > p,
    .textblock.textblock-box > h1,
    .textblock.textblock-box > h2,
    .textblock.textblock-box > h3,
    .textblock.textblock-box > ul:not(.pdflist),
    .textblock.textblock-box > ol {
        max-width: 100%;
    }
}