/*
 * Netzmal Designsystem: Basis
 * ---------------------------
 * Seitenraster, Abstände, Typografie, Links und reine Textkapitel.
 * Diese Datei enthält keine eigenständigen UI-Komponenten.
 */

/* Minimale Browser-Normalisierung, unabhängig von externen Frameworks */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Seite und Inhaltsbreiten */
body {
    margin: 0;
    background: var(--nm-color-page);
    color: var(--nm-color-text);
    font-family: 'LatoWebLight', sans-serif;
    font-size: 20px;
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Auf schmalen Displays hilft Silbentrennung, unnötige Umbrüche zu vermeiden. */
@media (max-width: 820px) {
    body {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

img,
svg {
    max-width: 100%;
}

/* Einheitlicher, deutlich sichtbarer Tastaturfokus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--nm-color-focus);
    outline-offset: 3px;
}

/* Doppeltipps aktivieren Bedienelemente, nicht den iOS-Seitenzoom. */
:where(a, button, input[type='button'], input[type='submit'], input[type='reset'], summary, [role='button']) {
    touch-action: manipulation;
}

/* Wiederholte Navigation für Tastaturnutzung überspringen */
.nm-skip-link {
    position: fixed;
    z-index: 30000;
    top: var(--nm-space-md);
    left: var(--nm-space-md);
    padding: var(--nm-space-sm) var(--nm-space-md);
    border-radius: var(--nm-radius);
    background: var(--nm-color-text);
    color: var(--nm-color-on-text);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--nm-space-xl)));
}

.nm-skip-link:focus {
    transform: translateY(0);
}

/* Bewegungen auf ausdrücklichen Wunsch des Betriebssystems minimieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

button,
input,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
}

.nm-container {
    width: min(calc(100% - var(--nm-space-xl) - var(--nm-space-lg)), 1280px);
    margin-inline: auto;
}

.nm-section {
    margin-block: clamp(80px, 11vw, 150px);
}

/* Einfache Layouthelfer */
.nm-stack > * {
    margin-block: 0;
}

.nm-stack > * + * {
    margin-top: var(--nm-stack-space, 20px);
}

.nm-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nm-cluster-space, 14px);
    align-items: center;
}

/* Mehrere eigenständige Textlinks benötigen mehr horizontale Trennung. */
.nm-cluster-links {
    gap: var(--nm-space-sm) var(--nm-space-xl);
}

.nm-grid {
    display: grid;
    grid-template-columns: repeat(var(--nm-grid-columns, 3), minmax(0, 1fr));
    gap: var(--nm-grid-gap, 22px);
}

.nm-grid-two {
    --nm-grid-columns: 2;
}

/* Kurze, zusammengehörige Wortgruppen nicht allein umbrechen lassen. */
.nm-keep-together {
    white-space: nowrap;
}

@media (max-width: 340px) {
    .nm-keep-together {
        white-space: normal;
    }
}

/* Kleine Kapitelkennzeichnung mit optionaler Akzentlinie */
.nm-eyebrow {
    margin: 0 0 12px;
    color: var(--nm-color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nm-eyebrow-line {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--nm-color-text-muted);
}

.nm-eyebrow-line::before {
    width: 34px;
    height: 4px;
    flex: 0 0 34px;
    background: var(--nm-eyebrow-accent, var(--nm-color-primary));
    content: '';
}

.nm-eyebrow-line-secondary {
    --nm-eyebrow-accent: var(--nm-color-secondary);
}

.nm-eyebrow-line-success {
    --nm-eyebrow-accent: var(--nm-color-success);
}

.nm-eyebrow-line-warning {
    --nm-eyebrow-accent: var(--nm-color-warning);
}

.nm-eyebrow-line-danger {
    --nm-eyebrow-accent: var(--nm-color-danger);
}

.nm-eyebrow-line-odoo {
    --nm-eyebrow-accent: var(--nm-color-odoo);
}

/* Markennamen mit definierter Binnen-Schreibweise nicht versal setzen. */
.nm-brand-odoo {
    text-transform: none;
}

/* Überschriften und Fließtexte */
.nm-display {
    margin: 0;
    color: var(--nm-color-heading);
    font-size: clamp(2.6rem, 5.8vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.nm-heading {
    margin: 0;
    color: var(--nm-color-heading);
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.nm-subheading {
    margin: 0;
    color: var(--nm-color-heading);
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    line-height: 1.25;
}

.nm-text {
    color: var(--nm-color-text-muted);
    font-size: var(--nm-font-size-text);
    line-height: 1.65;
}

.nm-text-right {
    text-align: right;
}

.nm-caption {
    margin: 0;
    color: var(--nm-color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Textlinks */
.nm-link {
    color: var(--nm-color-primary);
    font-family: inherit;
    font-size: var(--nm-font-size-text);
    font-weight: 700;
    line-height: 1.65;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 160ms ease, text-decoration-color 160ms ease;
}

.nm-link:visited {
    color: var(--nm-color-primary);
}

/* Letztes Linkwort und Richtungssymbol dürfen nicht getrennt umbrechen. */
.nm-link-tail {
    white-space: nowrap;
}

.nm-link:hover,
.nm-link:focus-visible {
    color: var(--nm-color-primary);
    text-decoration-color: var(--nm-color-primary);
}

/* Automatische Kennzeichnung externer Links aus script.js. */
.ext_link::after {
    content: "\f35d";
    display: inline-block;
    padding-left: 0.25em;
    font-family: 'Font Awesome 7 Free';
    font-size: 0.8em;
    font-style: normal;
    font-weight: 900;
    text-decoration: none;
}

/* Offene Textkapitel ohne umgebende Karte */
.nm-prose {
    max-width: 900px;
}

.nm-prose-wide {
    max-width: none;
}

.nm-prose > * {
    margin-block: 0;
}

.nm-prose > * + * {
    margin-top: 22px;
}

.nm-prose .nm-heading + .nm-text {
    margin-top: 28px;
}

.nm-prose h4 {
    margin-top: 42px;
    color: var(--nm-color-text);
    font-size: 1.25rem;
    line-height: 1.35;
}

.nm-prose ul,
.nm-prose ol {
    padding-left: 1.25rem;
    color: var(--nm-color-text-muted);
    line-height: 1.7;
}

.nm-prose li + li {
    margin-top: 0;
}

/* Responsive Basis */
@media (max-width: 820px) {
    .nm-grid {
        grid-template-columns: 1fr;
    }

}