/* Swiss ITSM — Website nach «Swiss ITSM · Styleguide» (Rev. 2, 07.07.2026).
 *
 * Die Namen der Variablen sind die des Styleguides, damit eine Aenderung
 * dort hier eine Zeile ist und nicht eine Suche nach Hex-Werten.
 *
 * Die Kontrastregeln aus Abschnitt 2 sind hier eingebaut, nicht bloss
 * eingehalten:
 *   - Fliesstext ist IMMER Anthrazit (12.7:1 auf Offwhite). Weinrot und
 *     Bordeaux sind Titel-, Akzent- und Flaechenfarben, nie Fliesstext.
 *   - Grau 60 ist die HELLSTE zulaessige Textfarbe (5.7:1). Hellere
 *     Grautoene unterschreiten AA und kommen deshalb nirgends vor.
 *   - Greige und Blaugrau erscheinen ausschliesslich als Linie oder
 *     Flaeche (1.9:1 bzw. 2.3:1 — als Text unbrauchbar).
 *   - Weinrot und Blaugrau liegen nie direkt uebereinander.
 */

:root {
    /* 1 · Farbpalette */
    --weinrot: #a70a2e;
    --bordeaux: #3f1118;
    --anthrazit: #2b2b2b;
    --grau60: #666666;
    --eisblau: #d8e8ee;
    --blaugrau: #8ea7b0;
    --offwhite: #f4f2ee;
    --greige: #b8afa2;

    /* 1c · Abgeleitete Flaechentoene — ausschliesslich als Flaeche */
    --blaugrau-dunkel: #5a7a85;
    --greige-tint-hell: #d8d2c9;
    --greige-tint: #c6bfb4;

    --wrap: 1140px;
}

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

body {
    margin: 0;
    font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
    /* Fliesstext: Anthrazit, nie ein Rotton. */
    color: var(--anthrazit);
    background: #fff;
    line-height: 1.65;
    font-weight: 400;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: var(--weinrot); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 3 · Typografie. Raster A als Verhaeltnis, nicht in Punkt: Titel deutlich
   ueber Fliesstext, Untertitel in Grau 60. */
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; color: var(--anthrazit); }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 700; }

/* Zweifarbige Titel: der Titel steht in Anthrazit, GENAU EIN Kernwort in
   Weinrot — in der Regel das letzte. Nie der ganze Titel. */
.tt-accent { color: var(--weinrot); }

/* --- Kopf ---------------------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--greige);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 88px;
    flex-wrap: wrap;
}

/* 4 · Logo. Wortmarke in Weinrot und Anthrazit, Unterzeile in Logobreite.
   Die Schutzzone (Hoehe des «S» rundum) steckt im padding. */
.logo {
    display: block;
    padding: 6px;
    line-height: 1.05;
    color: var(--anthrazit);
    min-width: 140px; /* Mindestbreite digital */
}
.logo:hover { text-decoration: none; }
.logo-word { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.logo-word .swiss { color: var(--weinrot); font-weight: 600; }
.logo-word .itsm { color: var(--anthrazit); }
.logo-rule { height: 2px; background: var(--weinrot); margin: 2px 0 3px; }
.logo-sub {
    display: block;
    font-size: .53rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--grau60);
    white-space: nowrap;
}

.site-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
    color: var(--anthrazit);
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .07em;
    font-weight: 600;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--weinrot); text-decoration: none; }

.site-nav .has-children { position: relative; }
.site-nav .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--greige);
    padding: 10px 0;
    min-width: 240px;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 10px 24px rgba(43, 43, 43, .10);
}
.site-nav .has-children:hover .submenu,
.site-nav .has-children:focus-within .submenu { display: flex; }
.site-nav .submenu a {
    display: block;
    padding: 8px 20px;
    text-transform: none;
    font-size: .9rem;
    letter-spacing: 0;
    font-weight: 400;
}

/* --- Hero ---------------------------------------------------------------- */
/* Eisblau als helle Grundflaeche, Titel zweifarbig, Weinrot als Balken
   NEBEN dem Text — die Anmutung des Corporate Decks (Abschnitt 8). */
.hero {
    background: var(--eisblau);
    padding: 84px 0;
    border-bottom: 1px solid var(--greige);
}
.hero-small { padding: 52px 0; }
.hero .wrap { position: relative; padding-left: 44px; }
.hero .wrap::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 4px;
    bottom: 4px;
    width: 6px;
    background: var(--weinrot);
}
/* Anthrazit auf Eisblau = 11.3:1 (Styleguide, Infoboxen). */
.hero h1 { color: var(--anthrazit); }
.hero-tagline { font-size: 1.2rem; margin: 0 0 .4em; color: var(--anthrazit); }
.hero-text { max-width: 640px; color: var(--grau60); margin: 0 0 1.7em; }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .74rem;
    font-weight: 600;
    margin: 0 0 .7em;
    color: var(--weinrot);
}

/* Buttons: Offwhite auf Weinrot (6.9:1). */
.btn {
    display: inline-block;
    background: var(--weinrot);
    color: var(--offwhite);
    padding: 13px 28px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .8rem;
}
.btn:hover { background: var(--bordeaux); color: var(--offwhite); text-decoration: none; }

/* --- Baender ------------------------------------------------------------- */
.band { padding: 68px 0; }
.band + .band { border-top: 1px solid var(--greige); }
.band-soft { background: var(--offwhite); }
/* Bandtitel linksbuendig wie im Corporate Deck — der Selektor muss durch
   den .wrap hindurchgreifen, sonst ist er wirkungslos. */
.band h2 { margin-bottom: 1.1em; }

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
    text-align: center;
}
/* Zahl als Akzent in Weinrot — ein Titel, kein Fliesstext. */
.metric-value {
    display: block;
    font-size: 2.7rem;
    font-weight: 700;
    color: var(--weinrot);
    line-height: 1.1;
}
.metric h3 { font-weight: 400; color: var(--grau60); font-size: 1rem; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 26px;
}
.card {
    border: 1px solid var(--greige);
    padding: 28px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.card:hover { border-color: var(--weinrot); }
.card h3 { margin-bottom: .2em; }
.card h3 a { color: var(--anthrazit); }
.card h3 a:hover { color: var(--weinrot); text-decoration: none; }
.card p { margin: 0 0 1em; color: var(--grau60); }

/* 5 · Icons: solid, einfarbig, pro Seite eine Groesse. */
.card-icon {
    width: 34px;
    height: 34px;
    fill: var(--weinrot);
    margin-bottom: 10px;
}

/* 1c · Pills. Flaechenton mit dem im Styleguide zugeordneten Textton —
   die Toene selbst erscheinen nie als Schrift. */
.pill {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: var(--greige-tint-hell);
    color: var(--anthrazit);
}
.pill-cool { background: var(--blaugrau-dunkel); color: var(--offwhite); }

.more {
    margin-top: auto;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* --- Fliesstext ---------------------------------------------------------- */
.prose { max-width: 760px; padding: 60px 0; }
.prose .lead { font-size: 1.14rem; color: var(--grau60); }
.prose h2 { margin-top: 1.6em; }
.prose a { font-weight: 600; }

/* Infobox: Anthrazit auf Eisblau (11.3:1). */
.infobox {
    background: var(--eisblau);
    padding: 22px 26px;
    border-left: 6px solid var(--weinrot);
    margin: 28px 0;
}

/* 6c · Kennzeichnung von KI-Bildern: kleine Zeile direkt unter dem Motiv,
   Greige auf Offwhite — als FLAECHE gesetzt, damit die Zeile lesbar bleibt. */
.bildnachweis {
    font-size: .68rem;
    color: var(--grau60);
    background: var(--offwhite);
    padding: 4px 8px;
    margin: 0;
}

/* --- Fuss ---------------------------------------------------------------- */
.site-footer {
    background: var(--offwhite);
    border-top: 1px solid var(--greige);
    padding: 58px 0 26px;
    font-size: .93rem;
}
.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 34px;
}
.site-footer h3 {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--grau60);
    font-weight: 700;
}
.site-footer p { margin: 0; }
.plain { list-style: none; margin: 0; padding: 0; }
.copyright {
    margin-top: 42px;
    padding-top: 20px;
    border-top: 1px solid var(--greige);
    font-size: .74rem;
    color: var(--grau60);
    text-transform: uppercase;
    letter-spacing: .07em;
}

@media (max-width: 720px) {
    .header-inner { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
    .site-nav ul { gap: 18px; flex-wrap: wrap; }
    .site-nav .submenu { position: static; display: flex; border: 0; box-shadow: none; padding: 4px 0 8px; min-width: 0; }
    .site-nav .submenu a { padding: 4px 0 4px 14px; }
    .hero { padding: 56px 0; }
    .hero .wrap { padding-left: 38px; }
    .hero .wrap::before { width: 5px; }
}

/* --- Leistungsbausteine -------------------------------------------------- */
/* Kacheln, keine Aufzaehlung: Greige-Tint als Flaeche, Anthrazit als Text
   (Styleguide 1c). Die Toene selbst stehen nie als Schrift. */
.tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.tile {
    /* Weinrot flaechig mit Offwhite darauf (6.9:1, Styleguide 2) — die
       Kachelstufe des bestehenden Auftritts, aber mit soliden Icons statt
       Outline, wie Abschnitt 5 es verlangt. */
    background: var(--weinrot);
    color: var(--offwhite);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: center;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
    min-height: 140px;
    border-left: 0;
}
.tile-icon {
    width: 42px;
    height: 42px;
    fill: var(--offwhite);
    flex: none;
}

/* --- Referenzen ---------------------------------------------------------- */
.quote {
    margin: 0;
    background: var(--eisblau);
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.quote blockquote {
    margin: 0;
    /* Anthrazit auf Eisblau = 11.3:1 (Styleguide 2). */
    color: var(--anthrazit);
    font-size: 1.02rem;
}
.quote blockquote::before { content: "«"; color: var(--weinrot); font-weight: 700; }
.quote blockquote::after { content: "»"; color: var(--weinrot); font-weight: 700; }
.quote figcaption {
    margin-top: auto;
    font-size: .84rem;
    font-weight: 700;
    color: var(--grau60);
}

/* --- Handlungsaufforderung ----------------------------------------------- */
.cta { text-align: center; }
.cta p { color: var(--grau60); margin: 0 0 1.6em; }

/* --- Hero mit Video ------------------------------------------------------ */
/* Das Video liegt hinter dem Text, nicht unter ihm: darum position:absolute
   plus ein Schleier. Ohne den Schleier stuende Anthrazit auf bewegtem Bild —
   der Kontrast waere je nach Bildstelle ein anderer, und der Styleguide
   verlangt Text auf ruhiger Flaeche (Abschnitt 6: Weinrot begleitet das Bild
   als Balken, nicht als Ueberdruck). */
.hero-video { position: relative; overflow: hidden; }
.hero-video .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-video .hero-veil {
    position: absolute;
    inset: 0;
    /* Eisblau als Schleier — dieselbe Grundflaeche wie ohne Video, nur
       durchscheinend. Der gemessene Kontrast von Anthrazit bleibt damit
       ueber jeder Bildstelle mindestens auf dem Niveau der Vorgabe. */
    background: linear-gradient(90deg, rgba(216, 232, 238, .97) 0%, rgba(216, 232, 238, .93) 42%, rgba(216, 232, 238, .62) 100%);
}
.hero-video .wrap { position: relative; z-index: 1; }

@media (max-width: 720px) {
    /* Auf schmalen Schirmen bleibt vom Bild ohnehin nichts uebrig, und ein
       Autoplay-Video kostet dort Daten: der Schleier wird deckend. */
    .hero-video .hero-veil { background: rgba(216, 232, 238, .96); }
}
@media (prefers-reduced-motion: reduce) {
    /* Wer Bewegung abbestellt hat, bekommt das Standbild. */
    .hero-video .hero-media { display: none; }
}

/* --- Bilder -------------------------------------------------------------- */
.figure-wide { margin: 0; padding-top: 48px; }
.figure-wide img { width: 100%; height: auto; display: block; }

.portrait {
    width: 100%;
    max-width: 190px;
    height: auto;
    display: block;
    margin-bottom: 14px;
    /* Weinrot begleitet das Bild als Linie, nicht darueber (Styleguide 6). */
    border-bottom: 4px solid var(--weinrot);
}
.card-person { gap: 0; }
.portrait-small {
    width: 56px;
    height: 56px;
    max-width: none;
    border-radius: 50%;
    border-bottom: 0;
    margin: 0;
    object-fit: cover;
    flex: none;
}
.quote figcaption { display: flex; align-items: center; gap: 12px; }