/* ===========================================================================
   id4web - Aufwertung (optional)
   ---------------------------------------------------------------------------
   Diese Datei enthaelt AUSSCHLIESSLICH gestalterische Verbesserungen, die ueber
   die 1:1-Uebernahme des Bestands hinausgehen. Farben, Schriften, Inhalte und
   Seitenstruktur bleiben unveraendert.

   VOLLSTAENDIG RUECKGAENGIG MACHEN:
   In Configuration/Sets/Id4web/setup.typoscript die Zeile
       id4webAufwertung = EXT:id4web/Resources/Public/Css/aufwertung.css
   entfernen oder auskommentieren und den Cache leeren. Sonst aendert sich
   nichts - alle Regeln stehen nur hier.

   Enthalten:
     2. Kachelmenue modernisiert
     3. Einheitliche Bildformate und dezente Tiefe
     4. Zitate

   Nicht enthalten:
     1. Zeilenlaenge und typografischer Feinschliff - auf Wunsch
        zurueckgenommen, der Fliesstext laeuft wieder in voller Containerbreite.
   =========================================================================== */


/* ===========================================================================
   2. KACHELMENUE
   ---------------------------------------------------------------------------
   Aufbau wie im Bestand: Bild oben in seinen eigenen Proportionen, darunter
   der farbige Block mit Titel und Link.

   WICHTIG - nicht erneut aendern: Die Kachelbilder sind Breitbanner
   (521 x 160, Verhaeltnis 3.26:1), keine Kartenbilder. Ein erzwungenes
   Kartenformat mit "object-fit: cover" skaliert sie auf 286px Hoehe hoch -
   das 1.79-fache - und sie werden sichtbar unscharf. Deshalb hier KEIN
   aspect-ratio und KEIN cover.

   Verbessert gegenueber dem Bestand sind nur Zustaende und Details:
   sanfter Bildzoom, wandernder Pfeil statt Unterstreichung, ganze Kachel
   anklickbar, feine Tiefe.
   =========================================================================== */

.card-menu .card {
    position: relative;
    overflow: hidden;
    border: none;
    /* Kontrastsicherer Ton, weil der Kacheltitel weiss darauf steht.
       Siehe --id4-primary-bg in custom.css. */
    background-color: var(--id4-primary-bg);
}

.card-menu .card .card-img-top {
    overflow: hidden;
    line-height: 0;
}

/* Bild in eigenen Proportionen - keine Skalierung, kein Anschnitt */
.card-menu .card .card-img-top img {
    width: 100%;
    height: auto;
    transition: transform 450ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.card-menu .card .card-body {
    padding: 16px 20px 4px;
    text-align: left;
    color: #fff;
}

.card-menu .card .card-footer {
    padding: 0 20px 16px;
    text-align: left;
    background: none;
    border: none;
}

.card-menu .card .card-title {
    margin: 0;
    text-align: left;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.12em;
    line-height: 1.3;
}

/* "Mehr erfahren!" als Pfeil-Link statt unterstrichen.
   Die Auswahl muss "a.card-link" lauten: custom.css setzt den Link ueber
   ".card-menu .card a:not(.btn)" auf display:block. */
.card-menu .card .card-footer a.card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
    color: #fff;
    text-decoration: none;
    font-size: 0.92em;
}

.card-menu .card .card-footer a.card-link::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 250ms ease;
}

/* Ganze Kachel anklickbar */
.card-menu .card .card-footer a.card-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Zustaende */
.card-menu .card:hover .card-img-top img,
.card-menu .card:focus-within .card-img-top img {
    transform: scale(1.05);
}

.card-menu .card:hover .card-footer a.card-link::after,
.card-menu .card:focus-within .card-footer a.card-link::after {
    transform: rotate(45deg) translate(3px, -3px);
}

.card-menu .card:hover .card-body,
.card-menu .card:hover .card-footer,
.card-menu .card:focus-within .card-body,
.card-menu .card:focus-within .card-footer {
    background-color: var(--id4-primary-dark);
    transition: background-color 200ms ease;
}

.card-menu .card:focus-within {
    outline: 3px solid var(--id4-secondary);
    outline-offset: 2px;
}

/* ===========================================================================
   3. EINHEITLICHE BILDFORMATE UND DEZENTE TIEFE
   Gilt bewusst nur fuer dekorative Kachel- und Bildmenues, damit redaktionelle
   Bilder im Fliesstext nicht angeschnitten werden.
   =========================================================================== */

/* Nur das Bildmenue vereinheitlichen - die Kacheln des Kartenmenues NICHT,
   siehe Begruendung in Abschnitt 2. */
.thumbnail-menu .thumbnail-item img {
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.thumbnail-menu .thumbnail-item {
    overflow: hidden;
}

.thumbnail-menu .thumbnail-item img {
    transition: transform 450ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.thumbnail-menu .thumbnail-item:hover img,
.thumbnail-menu .thumbnail-item:focus-within img {
    transform: scale(1.05);
}

/* Feine Tiefe statt harter Kanten */
.card-menu .card,
.thumbnail-menu .thumbnail-item {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 250ms ease, transform 250ms ease;
}

.card-menu .card:hover,
.card-menu .card:focus-within,
.thumbnail-menu .thumbnail-item:hover,
.thumbnail-menu .thumbnail-item:focus-within {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

/* Einheitliche Uebergaenge bei allen interaktiven Elementen */
.btn,
.frame a.more,
.news-list-view .more,
.news-backlink-wrap a {
    transition: background-color 200ms ease, color 200ms ease,
                border-color 200ms ease;
}

/* Bewegung respektiert die Systemeinstellung */
@media (prefers-reduced-motion: reduce) {
    .card-menu .card .card-img-top img,
    .thumbnail-menu .thumbnail-item img,
    .card-menu .card .card-link::after,
    .card-menu .card,
    .thumbnail-menu .thumbnail-item,
    .btn {
        transition: none !important;
    }

    .card-menu .card:hover .card-img-top img,
    .thumbnail-menu .thumbnail-item:hover img {
        transform: none;
    }
}


/* ===========================================================================
   4. ZITATE
   Grosses Anfuehrungszeichen als ruhiges Hintergrundelement, Text darueber.
   Ohne Rahmen und ohne Akzentlinie.
   =========================================================================== */

.main-section blockquote {
    position: relative;
    margin: 1.8em 0;
    padding: 40px 34px 30px 88px;
    background: none;
    border: none;
    border-left: none;
    font-size: 1.06em;
    line-height: 1.6;
    color: #4a4a4a;
    isolation: isolate;
}

/* Grosses Anfuehrungszeichen - liegt hinter dem Text */
.main-section blockquote::before {
    content: "\201C";
    position: absolute;
    /* Georgias Anfuehrungszeichen sitzt hoch im Zeilenkasten - der negative
       Wert holt die sichtbare Form an den oberen Rand des Zitats, ohne sie
       abzuschneiden (deshalb auch kein overflow: hidden). */
    top: -52px;
    left: 2px;
    z-index: -1;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 430px;
    line-height: 1;
    font-weight: 700;
    color: var(--id4-primary);
    opacity: 0.11;
    pointer-events: none;
    user-select: none;
}

/* Text liegt ueber dem Zeichen */
.main-section blockquote > * {
    position: relative;
    z-index: 1;
}

.main-section blockquote > p {
    margin-bottom: 0.7em;
}

/* Leere Absaetze im Zitat ausblenden (Altlast aus der Redaktion) */
.main-section blockquote > p:empty {
    display: none;
}

.main-section blockquote > p:last-child {
    margin-bottom: 0;
}

/* Quellenangabe absetzen: letzter, rechtsbuendiger Absatz */
.main-section blockquote > p.text-right:last-child,
.main-section blockquote > p[style*="text-align: right"]:last-child {
    margin-top: 1.1em;
    font-size: 0.9em;
    font-style: normal;
    color: var(--id4-secondary);
}

.main-section blockquote em {
    font-style: italic;
}

@media (max-width: 767.98px) {
    .main-section blockquote {
        padding: 30px 8px 24px 34px;
    }

    .main-section blockquote::before {
        font-size: 220px;
        top: -28px;
        left: -4px;
    }
}