/* HTS Consulting, Webseite (Stand 22.10.2026)
   Eine Schrift (Plus Jakarta Sans, selbst gehostet, keine Verbindung zu Google), Ueberschriften aus
   dickem und duennem Schnitt, dunkle Knoepfe.
   Farben aus dem silbernen HS Logo: Graphit, Silber, kuehle helle Flaechen. Nur hell, keine
   Verlaeufe, keine Farbpunkte, kein Glas, keine Trennlinien als Schmuck. */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../schrift/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../schrift/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light;
    --ink: #15171c;
    --ink-soft: #454852;
    --muted: #6b6f7b;
    --silber: #a9adb6;
    --flaeche: #f3f4f6;
    --flaeche-tief: #e7e9ed;
    --dunkel: #121418;
    --dunkel-karte: #1c1f25;
    --seite: 78rem;
    --rand: clamp(1rem, 3.2vw, 2rem);
    --radius-gross: 28px;
    --radius: 20px;
    --schatten: 0 1px 2px rgba(21, 23, 28, 0.05), 0 14px 36px -18px rgba(21, 23, 28, 0.22);
    --sanft: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ===== Grundlagen ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 104px;
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
body {
    margin: 0;
    background: #ffffff;
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
    margin: 0;
}
ul {
    padding: 0;
    list-style: none;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
a {
    color: inherit;
}
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 8px;
}
.einstieg :focus-visible,
.ki :focus-visible {
    outline-color: #ffffff;
}
::selection {
    background: var(--flaeche-tief);
    color: var(--ink);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.zum-inhalt {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: var(--schatten);
}
.zum-inhalt:focus {
    top: 12px;
}
.seite {
    width: 100%;
    max-width: var(--seite);
    margin-inline: auto;
    padding-inline: var(--rand);
}

/* ===== Knoepfe (Pille mit Pfeil im Kreis) ===== */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 6px 6px 6px 24px;
    border-radius: 999px;
    border: 0;
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.2s var(--sanft),
        color 0.2s var(--sanft),
        border-color 0.2s var(--sanft);
}
.knopf__pfeil {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    transition: transform 0.25s var(--sanft);
}
.knopf__pfeil svg {
    width: 18px;
    height: 18px;
}
.knopf:hover .knopf__pfeil {
    transform: translateX(3px);
}
.knopf--extern:hover .knopf__pfeil {
    transform: translate(2px, -2px);
}
.knopf--dunkel {
    background: var(--ink);
    color: #ffffff;
}
.knopf--dunkel .knopf__pfeil {
    background: #ffffff;
    color: var(--ink);
}
.knopf--dunkel:hover {
    background: #2b2e36;
}
.knopf--hell {
    background: #ffffff;
    color: var(--ink);
}
.knopf--hell .knopf__pfeil {
    background: var(--ink);
    color: #ffffff;
}
.knopf--hell:hover {
    background: #eceef1;
}
/* Ohne Pfeil, mit Rand */
.knopf--rand {
    padding: 6px 24px;
    background: transparent;
    border: 1px solid #d5d8df;
    color: var(--ink);
}
.knopf--rand:hover {
    border-color: #b9bdc7;
    background: var(--flaeche);
}
.knopf--rand-hell {
    padding: 6px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
}
.knopf--rand-hell:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}
.knopf svg.knopf__symbol {
    width: 18px;
    height: 18px;
    margin-left: -4px;
}

/* ===== Kopfzeile: weisse Leiste, schwebt ueber dem Einstieg ===== */
.kopf {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding-top: 16px;
    pointer-events: none;
}
.kopf__leiste {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 68px;
    padding: 0 8px 0 22px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow:
        0 0 0 1px rgba(21, 23, 28, 0.06),
        0 1px 2px rgba(21, 23, 28, 0.06);
    transition: box-shadow 0.3s var(--sanft);
}
.kopf.ist-gescrollt .kopf__leiste,
.kopf.ist-offen .kopf__leiste {
    box-shadow: var(--schatten);
}
.kopf__marke {
    display: block;
    flex: none;
    border-radius: 10px;
}
.kopf__marke img {
    height: 38px;
    width: auto;
    mix-blend-mode: multiply;
}
.kopf__nav {
    display: none;
    align-items: center;
    gap: 2px;
}
.kopf__link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition:
        color 0.2s var(--sanft),
        background-color 0.2s var(--sanft);
}
.kopf__link:hover,
.kopf__link[aria-current='true'] {
    color: var(--ink);
    background: var(--flaeche);
}
.kopf__aktionen {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kopf__aktionen .knopf {
    min-height: 52px;
}
.kopf__kontakt {
    display: none;
}
.kopf__menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 18px 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.kopf__menue-knopf svg {
    width: 20px;
    height: 20px;
}
.kopf__menue-knopf .symbol-zu,
.kopf.ist-offen .kopf__menue-knopf .symbol-auf {
    display: none;
}
.kopf.ist-offen .kopf__menue-knopf .symbol-zu {
    display: block;
}
/* Menue auf Handy und Tablet */
.kopf__panel {
    pointer-events: auto;
    margin-top: 8px;
    padding: 12px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--schatten);
}
.kopf__panel[hidden] {
    display: none;
}
.kopf__panel ul {
    display: grid;
    gap: 2px;
}
.kopf__panel a:not(.knopf) {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
.kopf__panel a:not(.knopf):hover {
    background: var(--flaeche);
}
.kopf__panel .knopf {
    width: 100%;
    margin-top: 8px;
    justify-content: space-between;
}
@media (min-width: 640px) {
    .kopf__kontakt {
        display: inline-flex;
    }
    .kopf__panel .knopf {
        display: none;
    }
}
@media (min-width: 1080px) {
    .kopf__nav {
        display: flex;
    }
    .kopf__menue-knopf,
    .kopf__panel {
        display: none;
    }
}
@media (max-width: 479px) {
    .kopf {
        padding-top: 12px;
    }
    .kopf__leiste {
        height: 60px;
        padding-left: 16px;
        padding-right: 6px;
    }
    .kopf__marke img {
        height: 32px;
    }
    .kopf__menue-knopf {
        height: 48px;
    }
}

/* ===== Einstieg: grosses Foto im abgerundeten Rahmen ===== */
.einstieg {
    padding: 10px;
}
.einstieg__rahmen {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: max(600px, min(94svh, 920px));
    overflow: hidden;
    border-radius: var(--radius-gross);
    background: #2c2f35;
    color: #ffffff;
    isolation: isolate;
}
.einstieg__bild,
.einstieg__bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.einstieg__bild img {
    object-fit: cover;
    object-position: 55% 40%;
}
/* Gleichmaessig abgedunkelt (kein Verlauf), damit die weisse Schrift lesbar bleibt. Seit dem hellen
   Teamfoto (22.10.2026) nur noch 42 Prozent, damit der Einstieg hell wirkt. */
.einstieg__rahmen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(8, 12, 24, 0.42);
}
.einstieg__inhalt {
    position: relative;
    z-index: 1;
    padding-top: 136px;
    padding-bottom: clamp(40px, 6vw, 72px);
}
.einstieg__ort {
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
}
.einstieg h1 {
    font-size: clamp(2.5rem, 6.6vw, 6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.038em;
}
.einstieg h1 .zeile {
    display: block;
}
.einstieg h1 .duenn {
    font-weight: 300;
    color: rgba(255, 255, 255, 0.84);
}
.einstieg__text {
    max-width: 38rem;
    margin-top: 28px;
    font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}
.einstieg__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}
.einstieg__bereiche {
    display: none;
}
@media (min-width: 1080px) {
    /* Ueberschrift ueber die ganze Breite, darunter Text links und Fachbereiche rechts */
    .einstieg__inhalt {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'kopf kopf'
            'unten bereiche';
        align-items: end;
        column-gap: 64px;
        row-gap: 40px;
    }
    .einstieg__kopf {
        grid-area: kopf;
    }
    .einstieg__unten {
        grid-area: unten;
    }
    .einstieg__bereiche {
        grid-area: bereiche;
    }
    /* Die drei Fachbereiche als ruhige Liste unten rechts */
    .einstieg__bereiche {
        display: grid;
        gap: 6px;
        min-width: 300px;
    }
    .einstieg__bereiche a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 14px 16px 14px 20px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        text-decoration: none;
        transition: background-color 0.2s var(--sanft);
    }
    .einstieg__bereiche a:hover {
        background: rgba(255, 255, 255, 0.18);
    }
    .einstieg__bereiche strong {
        display: block;
        font-size: 15.5px;
        font-weight: 700;
    }
    .einstieg__bereiche span span {
        display: block;
        font-size: 13.5px;
        color: rgba(255, 255, 255, 0.72);
    }
    .einstieg__bereiche svg {
        flex: none;
        width: 18px;
        height: 18px;
        opacity: 0.8;
    }
}
@media (max-width: 479px) {
    .einstieg {
        padding: 6px;
    }
    .einstieg__rahmen {
        border-radius: 22px;
        min-height: max(560px, calc(100svh - 12px));
    }
    .einstieg__inhalt {
        padding-top: 112px;
    }
    .einstieg__knoepfe .knopf {
        flex: 1 1 100%;
        justify-content: space-between;
    }
    .einstieg__knoepfe .knopf--rand-hell {
        justify-content: center;
    }
}
/* Sanftes Erscheinen beim Laden, reines CSS */
@keyframes hoch {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: no-preference) {
    .einstieg__ort,
    .einstieg h1 .zeile,
    .einstieg__text,
    .einstieg__knoepfe,
    .einstieg__bereiche {
        animation: hoch 0.8s var(--sanft) both;
    }
    .einstieg h1 .zeile:nth-child(1) {
        animation-delay: 0.08s;
    }
    .einstieg h1 .zeile:nth-child(2) {
        animation-delay: 0.18s;
    }
    .einstieg__text {
        animation-delay: 0.3s;
    }
    .einstieg__knoepfe {
        animation-delay: 0.4s;
    }
    .einstieg__bereiche {
        animation-delay: 0.5s;
    }
}

/* ===== Abschnitte ===== */
.abschnitt {
    padding-block: clamp(80px, 9vw, 128px);
}
/* Zwei helle Abschnitte direkt hintereinander: nur einmal Abstand */
.abschnitt + .abschnitt {
    padding-top: 0;
}
.augenbraue {
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
}
.titel {
    font-size: clamp(2.125rem, 4.4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.032em;
    color: var(--ink);
    text-wrap: balance;
}
.titel .duenn {
    font-weight: 300;
    color: var(--muted);
}
.einleitung {
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    line-height: 1.65;
    color: var(--ink-soft);
}

/* ===== Fachbereiche ===== */
.bereiche__kopf {
    display: grid;
    gap: 24px;
    margin-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 960px) {
    .bereiche__kopf {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: end;
        gap: 64px;
    }
}
.bereiche__raster {
    display: grid;
    gap: 16px;
}
@media (min-width: 760px) and (max-width: 1079px) {
    .bereiche__raster {
        grid-template-columns: 1fr 1fr;
    }
    .bereiche__raster .kachel:first-child {
        grid-column: 1 / -1;
    }
    .bereiche__raster .kachel:first-child .kachel__bild {
        aspect-ratio: 16 / 7;
    }
}
@media (min-width: 1080px) {
    .bereiche__raster {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}
.kachel {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: var(--radius-gross);
    background: var(--flaeche);
}
.kachel__bild {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--flaeche-tief);
}
.kachel__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--sanft);
}
@media (hover: hover) {
    .kachel:hover .kachel__bild img {
        transform: scale(1.035);
    }
}
/* Zeichen des Fachbereichs auf dem Foto, oben rechts (dort ist bei allen drei Fotos freie Flaeche) */
.kachel__marke {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    background: #ffffff;
}
.kachel__marke img {
    width: auto;
    height: 26px;
    mix-blend-mode: multiply;
}
.kachel__marke--guardium img {
    height: 24px;
}
/* UniquePixels als Kurzform: nur der Schriftzug, ohne Raster und DesignStudio */
.kachel__marke--uniquepixels img {
    height: 18px;
}
.kachel__inhalt {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 24px 16px 16px;
}
.kachel__bereich {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}
.kachel h3 {
    margin-top: -8px;
    font-size: clamp(1.3125rem, 1.7vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.022em;
}
.kachel p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.pillen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pillen li {
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink-soft);
}
.kachel__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: auto;
    padding-top: 10px;
}
.kachel__fuss .knopf {
    min-height: 48px;
    padding-left: 20px;
}
.kachel__fuss .knopf__pfeil {
    width: 36px;
    height: 36px;
}
.textlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(21, 23, 28, 0.25);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s var(--sanft);
}
.textlink:hover {
    text-decoration-color: var(--ink);
}
.textlink svg {
    width: 16px;
    height: 16px;
}

/* Leiste „In Zusammenarbeit mit“ wie auf der HygioSave Seite von guardium.de. Jedes Logo passt in eine Box
   von 168 x 56 Pixeln, so wirken breite und hohe Logos ungefaehr gleich gross. */
.partner {
    margin-top: 20px;
    padding: clamp(24px, 3.5vw, 36px) clamp(16px, 4vw, 48px);
    border-radius: var(--radius-gross);
    background: var(--flaeche);
}
.partner__titel {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--muted);
    text-align: center;
}
.partner__liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px clamp(28px, 5vw, 64px);
    margin-top: 24px;
}
.partner__liste a {
    display: block;
    border-radius: 8px;
    transition: opacity 0.2s var(--sanft);
}
.partner__liste a:hover {
    opacity: 0.7;
}
.partner__liste img {
    width: auto;
    height: auto;
    max-width: min(168px, 36vw);
    max-height: 56px;
    mix-blend-mode: multiply;
}
.partner__liste .partner__bafa {
    max-height: 68px;
}
/* Das Hygieneregister ist mit fetter Schrift und Streifen das schwerste Logo */
.partner__liste .partner__register {
    max-height: 46px;
}

/* ===== Beratung ===== */
.beratung {
    display: grid;
    gap: 48px;
}
@media (min-width: 1080px) {
    .beratung {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 72px;
        align-items: start;
    }
}
.beratung .einleitung {
    max-width: 36rem;
    margin-top: 24px;
}
.punkte {
    display: grid;
    gap: 12px;
    margin-top: 40px;
}
.punkt {
    padding: 24px 26px 26px;
    border-radius: var(--radius);
    background: var(--flaeche);
}
.punkt h3 {
    margin-bottom: 6px;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.punkt p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.beratung__aktion {
    margin-top: 32px;
}
/* Oben ein grosses Foto, darunter zwei quadratische nebeneinander */
.beratung__bilder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.beratung__bilder img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--flaeche-tief);
}
.beratung__bilder .beratung__gross {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
}
@media (min-width: 1080px) {
    .beratung__bilder {
        position: sticky;
        top: 112px;
        padding-top: 8px;
    }
}

/* ===== KI und Marketing: dunkle Flaeche ===== */
.ki {
    margin-inline: 10px;
    border-radius: var(--radius-gross);
    background: var(--dunkel);
    color: #ffffff;
}
.ki__raster {
    display: grid;
    gap: 48px;
    padding-block: clamp(64px, 8vw, 120px);
}
@media (min-width: 1080px) {
    .ki__raster {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 72px;
        align-items: center;
    }
}
.ki__bild {
    display: block;
}
.ki__bild img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--dunkel-karte);
}
@media (max-width: 1079px) {
    .ki__bild img {
        aspect-ratio: 16 / 10;
    }
}
.ki .augenbraue {
    color: var(--silber);
}
.ki .titel {
    color: #ffffff;
}
.ki .titel .duenn {
    color: var(--silber);
}
.ki .einleitung {
    max-width: 38rem;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.78);
}
.ki__punkte {
    display: grid;
    gap: 12px;
    margin-top: 36px;
}
@media (min-width: 640px) {
    .ki__punkte {
        grid-template-columns: 1fr 1fr;
    }
}
.ki__punkt {
    padding: 24px;
    border-radius: var(--radius);
    background: var(--dunkel-karte);
}
.ki__punkt h3 {
    margin-bottom: 6px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.ki__punkt p {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}
.ki__hinweis {
    margin-top: 12px;
    padding: 22px 24px;
    border-radius: var(--radius);
    background: var(--dunkel-karte);
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}
.ki__hinweis strong {
    color: #ffffff;
    font-weight: 600;
}
.ki__hinweis a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 4px;
}
.ki__hinweis a:hover {
    text-decoration-color: #ffffff;
}
.ki__aktion {
    margin-top: 36px;
}

/* ===== Ueber uns ===== */
.ueber {
    display: grid;
    gap: 48px;
}
@media (min-width: 1080px) {
    .ueber {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 88px;
        align-items: center;
    }
}
.ueber .einleitung {
    max-width: 38rem;
    margin-top: 24px;
}
.ueber .einleitung + .einleitung {
    margin-top: 16px;
}
.ueber__fakten {
    margin-top: 32px;
}
.ueber__fakten li {
    background: var(--flaeche);
}
.ueber__unterschrift {
    margin-top: 40px;
}
.ueber__unterschrift img {
    width: auto;
    height: 52px;
}
.ueber__unterschrift p {
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
}
.ueber__bild {
    position: relative;
    max-width: 520px;
}
@media (min-width: 1080px) {
    .ueber__bild {
        justify-self: end;
        width: 100%;
    }
}
.ueber__bild img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-gross);
    background: var(--flaeche-tief);
}

/* ===== Kontakt ===== */
.kontakt__block {
    display: grid;
    gap: 40px;
    padding: clamp(28px, 5vw, 72px);
    border-radius: var(--radius-gross);
    background: var(--flaeche);
}
@media (min-width: 1080px) {
    .kontakt__block {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 64px;
        align-items: center;
    }
}
.kontakt__block .einleitung {
    max-width: 32rem;
    margin-top: 24px;
}
.kontakt__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}
@media (max-width: 479px) {
    .kontakt__knoepfe .knopf {
        flex: 1 1 100%;
        justify-content: space-between;
    }
    .kontakt__knoepfe .knopf--rand {
        justify-content: center;
    }
    .kontakt__karte dd {
        font-size: 15.5px;
    }
}
.kontakt__karte {
    display: grid;
    gap: 22px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--radius);
    background: #ffffff;
}
.kontakt__karte dt {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
}
.kontakt__karte dd {
    margin-top: 4px;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
}
.kontakt__karte dd a {
    text-decoration: none;
    overflow-wrap: anywhere;
}
.kontakt__karte dd a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ===== Fusszeile ===== */
/* Unten Platz fuer den WhatsApp Knopf, damit er die letzte Zeile nicht verdeckt */
.fuss {
    padding-block: clamp(64px, 8vw, 96px) 104px;
}
.fuss__oben {
    display: grid;
    gap: 40px;
}
@media (min-width: 640px) {
    .fuss__oben {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1080px) {
    .fuss__oben {
        grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
        gap: 48px;
    }
}
.fuss__marke img {
    width: 236px;
    height: auto;
    mix-blend-mode: multiply;
}
.fuss__marke p {
    max-width: 22rem;
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}
/* Hiscox Siegel wie unten auf guardium.de */
.fuss__marke .fuss__siegel {
    width: 88px;
    margin-top: 24px;
    mix-blend-mode: normal;
}
.fuss h2 {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.fuss ul {
    display: grid;
    gap: 8px;
}
.fuss ul a {
    font-size: 15px;
    color: var(--ink-soft);
    text-decoration: none;
}
.fuss ul a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.fuss__unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 32px;
    margin-top: 64px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* ===== Rechtsseiten (Impressum, Datenschutz) ===== */
.recht {
    padding-top: 136px;
    padding-bottom: clamp(64px, 8vw, 112px);
}
.recht > * {
    max-width: 46rem;
}
.recht h1 {
    margin-bottom: 40px;
    font-size: clamp(2.125rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.recht h2 {
    margin: 48px 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.recht h3 {
    margin: 24px 0 8px;
    font-size: 1.0625rem;
    font-weight: 700;
}
.recht p,
.recht ul {
    margin-bottom: 16px;
    color: var(--ink-soft);
}
.recht ul {
    padding-left: 22px;
    list-style: disc;
}
.recht li + li {
    margin-top: 4px;
}
.recht a {
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(21, 23, 28, 0.3);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.recht a:hover {
    text-decoration-color: var(--ink);
}
.recht strong {
    font-weight: 600;
    color: var(--ink);
}
.recht__stand {
    margin-top: 40px;
    font-size: 14px;
}
.nicht-gefunden {
    min-height: 70vh;
    display: grid;
    align-content: center;
    padding-top: 136px;
    padding-bottom: 96px;
}
.nicht-gefunden .einleitung {
    max-width: 32rem;
    margin-top: 20px;
}
.nicht-gefunden .knopf {
    margin-top: 32px;
    justify-self: start;
}

/* ===== WhatsApp Chat und Nach oben, unten rechts (seite.js). Aufbau wie bei ProxyClock: gruener Knopf
   in WhatsApp Gruen, darueber die Chatkarte in Graphit und der Knopf nach oben (erst ab Tablet). ===== */
.ecke {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}
@media (min-width: 640px) {
    .ecke {
        right: 24px;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}
.ecke > * {
    pointer-events: auto;
}
.whatsapp-knopf {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(24, 26, 34, 0.06), 0 18px 40px -18px rgba(24, 26, 34, 0.26);
    transition: background-color 0.2s var(--sanft);
}
.whatsapp-knopf:hover,
.whatsapp-knopf:active {
    background: #1ebe5d;
}
.whatsapp-knopf svg {
    width: 28px;
    height: 28px;
}
.nach-oben {
    position: absolute;
    right: 6px;
    bottom: 68px;
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--flaeche-tief);
    border-radius: 50%;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(24, 26, 34, 0.06), 0 18px 40px -18px rgba(24, 26, 34, 0.26);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity 0.2s var(--sanft),
        transform 0.2s var(--sanft),
        visibility 0.2s,
        background-color 0.2s var(--sanft);
}
@media (min-width: 768px) {
    .nach-oben {
        display: grid;
    }
}
.nach-oben.ist-da {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.ecke.chat-offen .nach-oben {
    opacity: 0;
    visibility: hidden;
}
.nach-oben:hover {
    background: var(--flaeche);
}
.nach-oben svg {
    width: 20px;
    height: 20px;
}
.chat {
    width: 21.5rem;
    max-width: calc(100vw - 32px);
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 0 0 1px rgba(24, 26, 34, 0.05),
        0 2px 6px rgba(24, 26, 34, 0.05),
        0 22px 44px -20px rgba(24, 26, 34, 0.28);
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.95);
    transition:
        opacity 0.2s var(--sanft),
        transform 0.2s var(--sanft),
        visibility 0s linear 0.2s;
}
/* Beim Oeffnen sofort sichtbar, damit sich „Chat starten“ gleich fokussieren laesst */
.chat.ist-offen {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.2s var(--sanft),
        transform 0.2s var(--sanft),
        visibility 0s;
}
.chat__kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ink);
    color: #ffffff;
}
.chat__zeichen {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 24%;
    background: #ffffff;
}
.chat__zeichen img {
    width: 100%;
    height: auto;
}
.chat__name {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}
.chat__name strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}
.chat__name span {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.75);
}
.chat__zu {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: background-color 0.2s var(--sanft);
}
.chat__zu:hover {
    background: rgba(255, 255, 255, 0.15);
}
.chat__zu svg {
    width: 19px;
    height: 19px;
}
.chat__verlauf {
    padding: 20px 16px;
    background: var(--flaeche);
}
/* Sprechblase wie in WhatsApp, mit Spitze oben links */
.chat__blase {
    position: relative;
    max-width: 17rem;
    margin-left: 8px;
    padding: 12px 16px 8px;
    border-radius: 0 16px 16px 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(21, 23, 28, 0.06);
}
.chat__blase::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    width: 10px;
    height: 10px;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.chat__blase p {
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
}
.chat__blase .chat__zeit {
    min-height: 1em;
    margin-top: 4px;
    font-size: 12px;
    text-align: right;
    color: var(--muted);
}
.chat__fuss {
    padding: 12px;
}
.chat__start {
    width: 100%;
    min-height: 48px;
    padding: 6px 24px;
}
/* WhatsApp Zeichen im Knopf beim Kontakt in WhatsApp Gruen */
.knopf svg.knopf__symbol--whatsapp {
    color: #25d366;
}
@media (prefers-reduced-motion: reduce) {
    .chat,
    .nach-oben {
        transition: none;
    }
}

/* ===== Sanftes Einblenden beim Scrollen (seite.js). Nur fuer Inhalte, die beim Laden noch
   unter dem sichtbaren Bereich liegen, ohne Skript ist alles sofort sichtbar. ===== */
.wartet {
    opacity: 0;
    transform: translateY(24px);
}
.ist-sichtbar {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.8s var(--sanft),
        transform 0.8s var(--sanft);
}
@media (prefers-reduced-motion: reduce) {
    .wartet {
        opacity: 1;
        transform: none;
    }
    .ist-sichtbar {
        transition: none;
    }
}