/**
 * Markenblock
 *
 * Nur .hitlife-brand* – gehört ausschliesslich zum Widget "Markenblock"
 * und teilt sich mit keinem anderen Widget eine Regel.
 */

.hitlife-brand {
    --hitlife-brand-green-dark: #1d4d36;
    --hitlife-brand-text: #1d4d36;
    --hitlife-brand-kicker: #efa027;
    --hitlife-brand-bg: #eaf3ee;
    --hitlife-brand-radius: 24px;
    --hitlife-brand-align: left;
    --hitlife-brand-logo: 56px;

    /* Ein Logo mit feinen Linien deckt nur einen kleinen Teil der Flaeche
       ab. Bei sehr niedriger Deckkraft bleibt davon nichts sichtbar,
       deshalb hier bewusst mehr als beim Textslider. */
    --hitlife-brand-mark-opacity: 0.14;
    --hitlife-brand-mark-size: 62%;
    --hitlife-brand-mark-position: right bottom;

    /* Umfaerben des Wasserzeichens. brightness(0) macht aus jeder Farbe
       Schwarz, invert(1) daraus Weiss - so wird jedes Logo zur Silhouette
       in der gewuenschten Helligkeit, ohne zweite Bilddatei. */
    --hitlife-brand-tone-original: none;
    --hitlife-brand-tone-dark: brightness(0);
    --hitlife-brand-tone-light: brightness(0) invert(1);
    --hitlife-brand-mark-filter: var(--hitlife-brand-tone-original);

    --hitlife-brand-social: #2a6b4b;
    --hitlife-brand-social-bg: #fff;
    --hitlife-brand-social-size: 44px;

    position: relative;
    display: block;
    overflow: hidden;
    padding: 40px;
    border-radius: var(--hitlife-brand-radius);
    background-color: var(--hitlife-brand-bg);
    color: var(--hitlife-brand-text);
    text-align: var(--hitlife-brand-align);
}

.hitlife-brand *,
.hitlife-brand *::before,
.hitlife-brand *::after {
    box-sizing: border-box;
}

/* Wasserzeichen ----------------------------------------------------------- */

/* Liegt hinter dem Inhalt, aber vor dem Hintergrund. Der Ueberlauf der
   Box schneidet ab, was ueber den Rand hinausragt - genau das macht die
   angeschnittene Wirkung aus. */
.hitlife-brand--watermark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hitlife-brand-mark);
    background-repeat: no-repeat;
    background-position: var(--hitlife-brand-mark-position);
    background-size: var(--hitlife-brand-mark-size) auto;
    filter: var(--hitlife-brand-mark-filter);
    opacity: var(--hitlife-brand-mark-opacity);
    pointer-events: none;
}

.hitlife-brand__inner {
    position: relative;
    z-index: 1;
}

/* Sichtbares Logo --------------------------------------------------------- */

.hitlife-brand__logo-wrap {
    margin: 0 0 20px;
}

.hitlife-brand .hitlife-brand__logo {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: var(--hitlife-brand-logo);
    object-fit: contain;
}

/* Text -------------------------------------------------------------------- */

.hitlife-brand__kicker {
    margin: 0 0 10px;
    color: var(--hitlife-brand-kicker);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Der Leitsatz traegt den Block. Die Zeilenbegrenzung haelt ihn lesbar,
   auch wenn der Block ueber die ganze Breite geht.

   inline-block statt block: ein begrenzter Block bliebe sonst links
   kleben, auch wenn der Kasten mittig ausgerichtet ist. So folgt er der
   Textausrichtung von selbst - ohne zweite Einstellung. */
.hitlife-brand__text {
    display: inline-block;
    max-width: 46ch;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--hitlife-brand-text);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    font-weight: 600;
    font-style: normal;
    line-height: 1.55;
}

/* Als Zitat ausgezeichnet bekommt der Satz eine Linie an der Seite */
blockquote.hitlife-brand__text {
    padding-left: 18px;
    border-left: 3px solid var(--hitlife-brand-social);
}

.hitlife-brand__footnote {
    display: inline-block;
    max-width: 52ch;
    margin: 18px 0 0;
    font-size: 0.86rem;
    line-height: 1.6;
    opacity: 0.75;
}

/* Netzwerke --------------------------------------------------------------- */

.hitlife-brand__social-heading {
    margin: 24px 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
    opacity: 0.75;
}

/* justify-content kennt "left" und "center" - dieselbe Variable steuert
   damit die Ausrichtung von Text und Symbolen. */
.hitlife-brand__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--hitlife-brand-align);
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.hitlife-brand__social-item {
    display: flex;
}

/* Die Auszeichnung mit Klasse und Elementname setzt sich gegen die
   allgemeinen Verweisregeln des Themes durch. */
.hitlife-brand a.hitlife-brand__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: var(--hitlife-brand-social-size);
    min-height: var(--hitlife-brand-social-size);
    color: var(--hitlife-brand-social);
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.hitlife-brand__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(var(--hitlife-brand-social-size) * 0.5);
    height: calc(var(--hitlife-brand-social-size) * 0.5);
}

.hitlife-brand__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hitlife-brand__name {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Runde Flaeche ----------------------------------------------------------- */

.hitlife-brand--social-round a.hitlife-brand__link {
    width: var(--hitlife-brand-social-size);
    border-radius: 50%;
    background-color: var(--hitlife-brand-social-bg);
}

.hitlife-brand--social-round a.hitlife-brand__link:hover {
    background-color: var(--hitlife-brand-social);
    color: var(--hitlife-brand-social-bg);
}

/* Flaeche mit Namen ------------------------------------------------------- */

.hitlife-brand--social-pill a.hitlife-brand__link {
    padding: 0 18px 0 14px;
    border-radius: 999px;
    background-color: var(--hitlife-brand-social-bg);
}

.hitlife-brand--social-pill a.hitlife-brand__link:hover {
    background-color: var(--hitlife-brand-social);
    color: var(--hitlife-brand-social-bg);
}

/* Ohne Flaeche ------------------------------------------------------------ */

.hitlife-brand--social-plain a.hitlife-brand__link:hover {
    transform: translateY(-2px);
}

.hitlife-brand a.hitlife-brand__link:focus-visible {
    outline: 2px solid var(--hitlife-brand-social);
    outline-offset: 3px;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 767px) {
    .hitlife-brand {
        padding: 28px 22px;
    }

    .hitlife-brand__social {
        margin-top: 18px;
    }

    .hitlife-brand__logo-wrap {
        margin-bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hitlife-brand * {
        transition-duration: 0.01ms !important;
        transform: none !important;
    }
}