/* Hebler Betreuung — gemeinsames Stylesheet für alle Seiten
   Maße aus _quellen/vorlage.pdf entnommen:
   Fjordblau #075985 (flach, Kundenwunsch Aug 2026 statt Vorlagen-Violett #3a1d71), Linienwinkel 1,98° (= 3,46vw Anstieg über die volle Breite) */

@font-face {
    font-family: 'SUSE';
    src: url('/fonts/SUSE-Variable.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand: #075985;
    --ink: #221b3d;
    --ink-soft: #4a4463;
    --rise: 3.46vw;          /* Höhenversatz der schrägen Linie über 100vw */
    --tilt: -1.98deg;        /* atan(3.46/100) — muss zu --rise passen */
    --col: 37vw;             /* linke Kante der Adress-Spalte (Vorlage: 37,1 %) */
    --name-x: 8.6vw;         /* linke Kante des Namens (Vorlage: 8,6 %) */
    --display: clamp(1.45rem, 2.7vw, 2.4rem);
    --body-size: clamp(1.02rem, 1.9vw, 1.45rem);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: 'SUSE', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    background: #fff;
    color: var(--ink);
    line-height: 1.6;
}

/* ---------- Startseite: weiße Fläche oben, schräges Band unten ---------- */

.hero-spacer {
    flex: 0 0 auto;
    height: 43.5vh;
}

.band-wrap {
    position: relative;
    flex: 1 0 auto;
    display: flex;
}

.band-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand);
    clip-path: polygon(0 var(--rise), 100% 0, 100% 100%, 0 100%);
}

/* Name sitzt gedreht AUF der Linie; der Anker markiert den Punkt der Linie bei --name-x */
.name-anchor {
    position: absolute;
    left: var(--name-x);
    /* Linien-Gleichung y = rise − tan(1,98°)·x — gilt für vw- und rem-Werte */
    top: calc(var(--rise) - 0.0346 * var(--name-x));
}

.name-anchor h1 {
    position: absolute;
    left: 0;
    bottom: 0.12em;
    margin: 0;
    white-space: nowrap;
    transform: rotate(var(--tilt));
    transform-origin: left bottom;
    color: var(--brand);
    font-size: var(--display);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

/* Rolle hängt gedreht UNTER der Linie, gleiche Schriftgröße wie der Name, aber leicht */
.role-anchor {
    position: absolute;
    left: var(--col);
    top: calc(var(--rise) - 0.0346 * var(--col));
}

.role-anchor .role {
    position: absolute;
    left: 0;
    top: 0.4em;
    margin: 0;
    width: max-content;
    white-space: nowrap;
    transform: rotate(var(--tilt));
    transform-origin: left top;
    color: #fff;
    font-size: var(--display);
    font-weight: 300;
    line-height: 1.15;
}

.band-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--rise) - 0.0346 * var(--col) + var(--display) * 1.6 + 1.4rem) 1.5rem 0 var(--col);
}

.address-info,
.reg-detail {
    color: #fff;
    font-size: var(--body-size);
    font-weight: 300;
    line-height: 1.45;
}

.reg-detail {
    margin-bottom: 0.9em;
}

.address-info p,
.reg-detail p {
    margin: 0;
}

.contact-list {
    display: flex;
    flex-direction: column;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin-left: -1.55em;   /* Icon hängt links aus der Textspalte heraus */
    color: #fff;
    text-decoration: none;
    font-size: var(--body-size);
    font-weight: 300;
    line-height: 1.45;
}

.contact-item .icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.contact-item .icon svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}

.contact-item#email-link .contact-text {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a.contact-item:hover .contact-text,
a.contact-item:focus-visible .contact-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.band-content footer {
    margin-top: auto;
    padding: 2.5rem 0 2rem;
    font-size: clamp(0.85rem, 1.42vw, 1.1rem);
    font-weight: 300;
    color: #fff;
}

.band-content footer a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.band-content footer a:hover {
    text-decoration-thickness: 2px;
}

/* Sichtbarer Tastatur-Fokus auf dem violetten Band */
.contact-item:focus-visible,
.band-content footer a:focus-visible,
.back-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---------- Innenseiten (Impressum, Datenschutz) ---------- */

.page-header {
    position: relative;
    flex: 0 0 auto;
    color: #fff;
    /* linke Textkante = linke Kante von .page-header-inner (39rem) und main.content */
    --title-x: max(1.5rem, calc((100vw - 39rem) / 2));
    padding: clamp(1.75rem, 4vw, 2.75rem) 1.5rem calc(var(--rise) + 5rem);
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand);
    /* Unterkante von links unten nach rechts oben */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rise)), 0 100%);
}

.page-header-inner {
    position: relative;
    /* 42rem − 2×1,5rem Seiten-Padding von main.content, damit beide Spalten bündig sind */
    max-width: 39rem;
    margin: 0 auto;
}

.back-link {
    display: inline-block;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.back-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* H1 sitzt wie der Name der Startseite mit der Grundlinie auf der schrägen Kante:
   Kanten-Gleichung von unten gemessen y = tan(1,98°)·x */
.page-header h1 {
    position: absolute;
    /* Optischer Überhang: leicht links der Spaltenkante, mit etwas Luft über der Schräge */
    left: calc(var(--title-x) - 0.65rem);
    bottom: calc(0.0346 * var(--title-x) + 0.45em);
    margin: 0;
    width: max-content;
    max-width: calc(100vw - var(--title-x) - 1.5rem);
    transform: rotate(var(--tilt));
    transform-origin: left bottom;
    font-size: clamp(1.5rem, 2.7vw, 2.1rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

main.content {
    flex: 1 0 auto;
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
    padding: clamp(1.75rem, 5vw, 2.5rem) 1.5rem clamp(2.5rem, 6vw, 3.5rem);
}

main.content h2 {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 2.1rem;
    margin-bottom: 0.5rem;
}

main.content h2:first-child {
    margin-top: 0;
}

main.content p,
main.content li {
    color: var(--ink-soft);
    font-size: 0.98rem;
    font-weight: 300;
}

/* Hervorgehobener Hinweis (Art. 21 Abs. 4 DSGVO: getrennt und verständlich) */
main.content .hinweis {
    border-left: 3px solid var(--brand);
    padding: 0.75em 1em;
    background: #eff5f9;
}

main.content .hinweis strong {
    font-weight: 600;
    color: var(--ink);
}

main.content a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

main.content a:hover {
    text-decoration-thickness: 2px;
}

main.content footer {
    margin-top: 3rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

main.content footer a {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

main.content footer a:hover {
    color: var(--brand);
}

/* ---------- Schmale Viewports ---------- */

@media (max-width: 860px) {
    :root {
        --col: 3rem;
        --name-x: 7vw;
    }

    /* Mobil sitzt die Schräge höher (analog sebasolo.de), damit das Band
       mit allen Kontakten im ersten Viewport liegt (Desktop: 43,5vh nach Vorlage) */
    .hero-spacer {
        height: 30.5vh;
    }

    .role-anchor .role {
        white-space: normal;
        max-width: calc(100vw - var(--col) - 1.25rem);
    }

    .band-content {
        padding-top: calc(var(--rise) * 0.63 + var(--display) * 2.7 + 1.75rem);
    }
}