/* ==========================================================================
   utilities.css
   Inhalt:
   - Kleine, einzeilige Helferklassen (Utilities)
   - Keine Komponenten, kein Seitenkontext, kein komplexes Layout
   - Utilities dürfen überall kombiniert werden
   ========================================================================== */

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.full_width {
    width: 100%;
}

/* Push content down (e.g. after fixed header) */
.u-under-fixed-header {
    padding-top: 7rem;
}

/* Vertical spacing helpers */
.u-content-offset {
    margin-top: 4rem;
}

.fill-space-vertical {
    padding-bottom: 3rem;
}

.below-text-space {
    padding-bottom: 10px;
}

/* ==========================================================================
   Visibility & accessibility
   ========================================================================== */

.is-hidden {
    display: none !important;
}

/* Screenreader-only text */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Text helpers
   ========================================================================== */

.text_center {
    text-align: center;
}

.text_right {
    text-align: right;
}

.no_margin_bottom {
    margin-bottom: 0;
}

/* Prevent ugly line breaks (e.g. email addresses) */
.email-protected {
    word-break: break-all;
}

/* ==========================================================================
   List helpers
   ========================================================================== */

.ul_wo_bullet {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ul_wo_bullet li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem;
}

.ul_wo_bullet img {
    width: 1rem;
    height: 1rem;
    margin-top: 0.3em;
}

.ul_bold li {
    font-weight: 700;
}

/* ==========================================================================
   Color utility classes
   ========================================================================== */

.is-dark-blue {
    background: var(--color-dark-blue);
    color: var(--color-white);
}

.is-light-blue {
    background: var(--color-light-blue);
    color: var(--color-black);
}

.is-lighter-light-blue {
    background: var(--color-lighter-light-blue);
    color: var(--color-black);
}

.is-white {
    background: var(--color-white);
    color: var(--color-black);
}

.is-lighter-light-coral {
    background: var(--lighter-light-coral);
    color: var(--color-black);
}

.is-light-coral {
    background: var(--color-light-coral);
    color: var(--color-black);
}

.is-coral {
    background: var(--color-coral);
    color: var(--color-white);
}

.is-wheat {
    background: wheat;
    color: var(--color-black);
}

.is-gray {
    background: lightgray;
    color: var(--color-black);
}

/* ==========================================================================
   Spacing / inline helpers
   ========================================================================== */

.space {
    display: inline-block;
    width: 20px;
}