/* SICHER3 Magazin: Uebersicht (blog_index_page.html) und Artikel (blog_page.html).
   Eigenstaendig, nur .mag-* Klassen. Eine Schrift: Jost (Seitenschrift, selbst gehostet ueber sicher3-theme.css).
   Themenfarben: kommen aus dem Snippet "Magazin-Thema" und stehen inline als --mag-topic an Karte, Aufmacher und Artikel. */

.mag {
    --mag-navy: #103b61;
    --mag-ink: #14202e;
    --mag-muted: #566474;
    --mag-line: #dde4ec;
    --mag-paper: #fbfcfe;
    --mag-topic: var(--mag-navy);
    --mag-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mag-ease: cubic-bezier(0.23, 1, 0.32, 1);
    background: var(--mag-paper);
    color: var(--mag-ink);
    font-family: var(--mag-sans);
    padding-bottom: clamp(3rem, 7vw, 6rem);
}

.mag *, .mag *::before, .mag *::after { box-sizing: border-box; }
.mag h1, .mag h2, .mag h3 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 9 4 4; overflow-wrap: break-word; }
.mag a { color: inherit; text-decoration: none; }
.mag :focus-visible { outline: 3px solid var(--mag-topic); outline-offset: 3px; border-radius: 2px; }
/* Dunkles Band unter dem (weissen) Menue, wie auf den uebrigen Seiten: das Menue braucht den dunklen Hintergrund */
.mag-navband { height: 90px; background: #103b61; }
/* gleiche Spalte wie das Menue (Bootstrap-Container 1140 px, 15 px Rand), damit Logo und Inhalt buendig stehen */
.mag-wrap { width: min(71.25rem, 100%); padding-inline: 15px; margin-inline: auto; }

/* Themenlabel: farbiger Balken + Name */
.mag-topic {
    display: inline-flex; align-items: center; gap: .55rem;
    font: 600 .95rem/1 var(--mag-sans); color: var(--mag-topic);
}
.mag a.mag-topic { color: var(--mag-topic); }
.mag-topic::before { content: ""; width: .3rem; height: 1.15em; background: currentColor; border-radius: 1px; }

/* Meta: Datum, Lesezeit; getrennt durch duenne Linie statt Satzzeichen */
.mag-meta { display: flex; flex-wrap: wrap; gap: .25rem 0; margin: 0; font: 400 .95rem/1.3 var(--mag-sans); color: var(--mag-muted); }
.mag-meta > * + * { margin-left: .8rem; padding-left: .8rem; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 35%, transparent); }
.mag-meta time { font-variant-numeric: tabular-nums; }
@media (max-width: 39.99rem) {
    .mag-meta { column-gap: 1.1rem; }
    .mag-meta > * + * { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* ---------- Uebersicht ---------- */
/* Kopf: heller Titelbalken wie bei einer Zeitung (Titel links, Themen rechts, duenne Linie darunter) */
.mag-masthead { padding: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
.mag-masthead__bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .25rem 2rem;
    border-top: 3px solid var(--mag-navy); border-bottom: 1px solid var(--mag-line);
}
.mag-title { margin: 0; padding: .9rem 0 .7rem; font: 600 clamp(2.4rem, 5vw, 3.6rem)/1 var(--mag-sans); letter-spacing: -.03em; color: var(--mag-navy); }
.mag-sub { max-width: 44rem; margin: 1rem 0 0; font: 400 1.1rem/1.5 var(--mag-sans); color: var(--mag-muted); }
.mag-sub p { margin: 0; color: inherit; font: inherit; }
.mag-topics { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 0; }
.mag-topics a {
    display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 0; margin-bottom: -1px;
    font: 500 1.05rem/1 var(--mag-sans); color: var(--mag-ink); border-bottom: 3px solid transparent;
    transition: border-color 160ms ease, color 160ms ease;
}
.mag-topics a[data-topic]::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mag-topic); }
.mag-topics a.is-active { font-weight: 600; color: var(--mag-navy); border-bottom-color: var(--mag-navy); }
@media (hover: hover) and (pointer: fine) { .mag-topics a:hover { border-bottom-color: var(--mag-topic, var(--mag-navy)); } }

/* Aufmacher: Bild gross, Schlagzeile darunter (links), weitere Geschichten rechts */
.mag-front { display: grid; gap: 1.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 62rem) { .mag-front:not(.mag-front--single) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; } }
.mag-lead { display: flex; flex-direction: column; gap: 1.1rem; }
.mag-lead__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--mag-line); }
.mag-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--mag-ease); }
.mag-lead__text { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.mag-lead__title { margin: 0; font: 600 clamp(2rem, 3.6vw, 3rem)/1.05 var(--mag-sans); letter-spacing: -.028em; text-wrap: balance; color: var(--mag-ink); }
.mag-lead__title a { font: inherit; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .06em; text-underline-offset: .16em; transition: text-decoration-color 160ms ease; }
.mag-lead__deck { margin: 0; font: 400 clamp(1.1rem, 1.6vw, 1.25rem)/1.5 var(--mag-sans); color: var(--mag-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
    .mag-lead:hover .mag-lead__media img { transform: scale(1.025); }
    .mag-lead:hover .mag-lead__title a { text-decoration-color: var(--mag-topic); }
}

.mag-side { display: flex; flex-direction: column; justify-content: space-between; }
.mag-side__item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.1rem 0; border-top: 1px solid var(--mag-line); }
.mag-side__item:first-child { border-top: 0; padding-top: 0; }
.mag-side__item:last-child { padding-bottom: 0; }
.mag-side__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--mag-line); }
.mag-side__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--mag-ease); }
.mag-side__body { display: flex; flex-direction: column; gap: .45rem; }
.mag-side__title { margin: 0; font: 600 1.3rem/1.15 var(--mag-sans); letter-spacing: -.012em; }
.mag-side__title a { font: inherit; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .06em; text-underline-offset: .18em; transition: text-decoration-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
    .mag-side__item:hover .mag-side__media img { transform: scale(1.04); }
    .mag-side__item:hover .mag-side__title a { text-decoration-color: var(--mag-topic); }
}
@media (min-width: 62rem) { .mag-side__item { grid-template-columns: 8.5rem minmax(0, 1fr); } }

/* Hauptbereich: Artikelraster + Neuigkeiten */
.mag-main { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); }
.mag-free { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 62rem) {
    .mag-main--split { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
    .mag-main--split > aside { position: sticky; top: 2rem; }
}
.mag-sectionhead {
    margin: 0 0 1.5rem; padding-top: .7rem; border-top: 3px solid var(--mag-navy);
    font: 600 1.15rem/1.2 var(--mag-sans); color: var(--mag-navy);
}
.mag-grid { display: grid; gap: clamp(2rem, 4vw, 3rem) 2rem; }
@media (min-width: 40rem) { .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mag-grid--wide { }
@media (min-width: 62rem) { .mag-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mag-card { display: flex; flex-direction: column; gap: .75rem; }
.mag-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mag-line); border-radius: 2px; }
.mag-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--mag-ease); }
.mag-card__title { margin: .15rem 0 0; font: 600 clamp(1.4rem, 2.2vw, 1.7rem)/1.14 var(--mag-sans); letter-spacing: -.012em; text-wrap: balance; }
.mag-card__title a { font: inherit; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .06em; text-underline-offset: .18em; transition: text-decoration-color 160ms ease; }
.mag-card__text { margin: 0; font: 400 1.075rem/1.5 var(--mag-sans); color: var(--mag-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
    .mag-card:hover .mag-card__media img { transform: scale(1.035); }
    .mag-card:hover .mag-card__title a { text-decoration-color: var(--mag-topic); }
}

/* Neuigkeiten als Datumsliste */
.mag-newslist { list-style: none; margin: 0; padding: 0; }
.mag-newslist li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--mag-line); }
.mag-newslist li:first-child { border-top: 0; padding-top: 0; }
.mag-newslist time { font: 500 .95rem/1.5 var(--mag-sans); font-variant-numeric: tabular-nums; color: var(--mag-muted); }
.mag-newslist a { color: var(--mag-ink); font: 600 1.1rem/1.3 var(--mag-sans); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .18em; transition: text-decoration-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .mag-newslist a:hover { text-decoration-color: currentColor; } }
.mag-more-link { display: inline-block; margin-top: 1.25rem; font: 600 1rem/1 var(--mag-sans); color: var(--mag-navy); text-decoration: underline; text-underline-offset: .22em; }

.mag-pager { display: flex; justify-content: center; gap: 1.5rem; margin-top: 3rem; font: 500 1.05rem/1 var(--mag-sans); }
.mag-empty { font: 400 1.2rem/1.5 var(--mag-sans); color: var(--mag-muted); }

/* ---------- Startseiten-Block ---------- */
.mag-home { background: transparent; padding-bottom: 0; }
.mag-home__head { max-width: 44rem; margin: 0 auto clamp(1.25rem, 2.5vw, 2rem); text-align: center; }
.mag-home .mag-grid { grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); gap: 1.75rem 1.5rem; }
.mag-home .mag-card { gap: .6rem; }
.mag-home .mag-card__title { font-size: 1.3rem; }
/* Mobil: kleine Bilder links neben dem Text, damit der Block kurz bleibt */
@media (max-width: 39.99rem) {
    .mag-home .mag-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .mag-home .mag-card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .35rem; align-items: start; }
    .mag-home .mag-card__media { grid-row: 1 / span 3; grid-column: 1; aspect-ratio: 1; }
    .mag-home .mag-card > :not(.mag-card__media) { grid-column: 2; }
    .mag-home .mag-card__title { font-size: 1.15rem; margin: 0; }
}
.mag-home__title { margin: 0; font: 600 clamp(2rem, 4vw, 3rem)/1.1 var(--mag-sans); letter-spacing: -.025em; color: var(--mag-navy); }
.mag-home__intro { margin: .8rem 0 0; font: 400 1.2rem/1.5 var(--mag-sans); color: var(--mag-muted); }
.mag-home__news { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.mag-newslist--row { display: grid; gap: 0 2rem; }
@media (min-width: 48rem) { .mag-newslist--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mag-newslist--row li { grid-template-columns: 1fr; gap: .25rem; padding: 1rem 0 0; border-top: 1px solid var(--mag-line); }
.mag-newslist--row li:first-child { padding-top: 1rem; border-top: 1px solid var(--mag-line); }
.mag-home__more { margin: 1.5rem 0 clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.mag-home__more .mag-more-link {
    margin: 0; padding: .85rem 1.6rem; border: 2px solid var(--mag-navy); border-radius: 4px; text-decoration: none;
    font: 600 1.05rem/1 var(--mag-sans); color: var(--mag-navy);
    transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--mag-ease);
}
.mag-home__more .mag-more-link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .mag-home__more .mag-more-link:hover { background: var(--mag-navy); color: #fff; } }

/* ---------- Artikel ---------- */
.mag-progress {
    position: fixed; top: 0; left: 0; z-index: 1100; width: 100%; height: 3px; background: var(--mag-topic);
    transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
    .mag-progress { animation: mag-progress linear both; animation-timeline: scroll(root); }
    @keyframes mag-progress { to { transform: scaleX(1); } }
}
.mag-hero { padding: clamp(2.25rem, 5vw, 4rem) 0 0; }
.mag-hero__text { width: min(48rem, 100% - 2.5rem); margin-inline: auto; }
.mag-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-bottom: 1.5rem; font: 500 1rem/1 var(--mag-sans); color: var(--mag-muted); }
.mag-crumb a { text-decoration: underline; text-underline-offset: .22em; }
.mag-h1 { margin: 0; font: 600 clamp(2.3rem, 5.4vw, 3.9rem)/1.06 var(--mag-sans); letter-spacing: -.025em; color: var(--mag-navy); text-wrap: balance; }
.mag-deck { margin: 1.25rem 0 0; font: 400 clamp(1.2rem, 2vw, 1.4rem)/1.5 var(--mag-sans); color: var(--mag-muted); }
.mag-hero .mag-meta { margin-top: 1.5rem; }
.mag-hero__figure { width: min(66rem, 100% - 2.5rem); margin: clamp(1.75rem, 4vw, 3rem) auto 0; }
.mag-hero__figure img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 2px; background: var(--mag-line); }

/* Lesespalte: ueberschreibt die Mobirise-Bausteine (textblock, rawhtml) im Artikeltext */
.mag-body { width: min(48rem, 100% - 2.5rem); padding-right: clamp(0rem, 8vw, 6rem); margin: clamp(2rem, 4vw, 3rem) auto 0; font: 400 1.15rem/1.7 var(--mag-sans); color: var(--mag-ink); }
.mag-body section { padding: 0 !important; background: none !important; }
.mag-body .container, .mag-body .container-fluid { width: 100%; max-width: none; padding: 0; }
.mag-body .row { margin: 0; }
.mag-body [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
.mag-body .row.display-7 [class*="col-"] { flex: 1 1 0; }
.mag-body .row.display-7 [class*="col-"][class*="col-3"] { flex: 0 0 25%; max-width: 25%; }
.mag-body .display-4, .mag-body .display-5, .mag-body .display-7, .mag-body .mbr-fonts-style, .mag-body .mbr-text {
    font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit; color: inherit;
}
.mag-body .row.display-7 img { max-width: 8rem !important; margin-bottom: .75rem; }
@media (max-width: 39.99rem) {
    .mag-body .row.display-7 [class*="col-"], .mag-body .row.display-7 [class*="col-"][class*="col-3"] { flex: 0 0 100%; max-width: 100%; }
}
.mag-body p { margin: 0 0 1.35em; }
.mag-body p:empty { display: none; }
.mag-body h2, .mag-body h3, .mag-body h4 { font-family: var(--mag-sans); color: var(--mag-navy); letter-spacing: -.018em; text-align: left; }
.mag-body h2 { margin: 2.2em 0 .6em; font-size: 1.95rem; line-height: 1.15; font-weight: 600; }
.mag-body h3 { margin: 2em 0 .5em; font-size: 1.5rem; line-height: 1.2; font-weight: 600; }
.mag-body h4 { margin: 1.8em 0 .4em; font-size: 1.25rem; line-height: 1.25; font-weight: 600; }
.mag-body > :first-child h2, .mag-body > :first-child h3 { margin-top: 0; }
.mag-body ul, .mag-body ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.mag-body li { margin-bottom: .45em; padding-left: .2em; }
.mag-body li::marker { color: var(--mag-topic); }
.mag-body a { color: var(--mag-navy); text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .2em; transition: text-decoration-thickness 120ms ease; }
@media (hover: hover) and (pointer: fine) { .mag-body a:hover { text-decoration-thickness: .16em; } }
.mag-body img { max-width: 100%; height: auto; }
.mag-body b, .mag-body strong { font-weight: 600; }
.mag-body blockquote { margin: 1.8em 0; padding-left: 1.25rem; border-left: 4px solid var(--mag-topic); font-style: italic; }

/* Abschluss: CTA und Weiterlesen */
.mag-cta { margin-top: clamp(3rem, 6vw, 5rem); background: var(--mag-navy); color: #fff; padding: clamp(2.25rem, 5vw, 3.75rem) 0; }
.mag-cta__inner { width: min(48rem, 100% - 2.5rem); margin-inline: auto; }
.mag-cta__title { margin: 0; font: 600 clamp(1.7rem, 3.4vw, 2.4rem)/1.12 var(--mag-sans); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.mag-cta__text { margin: .9rem 0 0; font: 400 1.2rem/1.5 var(--mag-sans); color: rgba(255, 255, 255, .88); }
.mag-btn {
    display: inline-block; margin-top: 1.5rem; padding: .95rem 1.6rem; border-radius: 4px;
    background: #fff; color: var(--mag-navy) !important; font: 600 1.05rem/1 var(--mag-sans);
    transition: transform 160ms var(--mag-ease), background-color 160ms ease;
}
.mag-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .mag-btn:hover { background: #e8f1fa; } }
.mag .mag-cta :focus-visible { outline-color: #fff; }

.mag-more { padding-top: clamp(2.5rem, 5vw, 4rem); }

@media (prefers-reduced-motion: reduce) {
    .mag *, .mag *::before, .mag *::after { transition-duration: 0.01ms !important; animation: none !important; }
    .mag-progress { display: none; }
}