/*
 * Wolfszäune.de – Gestaltung
 *
 * Aufbau: Grundwerte · Basis · Layout · Bausteine · Seiten.
 * Farben, Abstände und Schriftgrößen stehen als Variablen im Abschnitt "Grundwerte".
 * Die Schriften selbst stehen in fonts.css.
 */

@layer reset, tokens, base, layout, components, pages;

@view-transition {
    navigation: auto;
}

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

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body,
    h1, h2, h3, h4,
    p, figure, blockquote,
    dl, dd, ol, ul, fieldset, legend {
        margin: 0;
        padding: 0;
    }

    ul[class],
    ol[class] {
        list-style: none;
    }

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

    img {
        height: auto;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    fieldset {
        border: 0;
        min-width: 0;
    }

    address {
        font-style: normal;
    }

    [hidden] {
        display: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@layer tokens {
    :root {
        /* Farben, abgeleitet vom efence-Logo: Grün #6db437 und Grau #5a585c */
        --akzent: #6db437;       /* Logo-Grün: Schaltflächen, Markierungen */
        --akzent-tief: #5fa02f;  /* etwas dunkler, beim Überfahren */
        --link: #366f14;         /* dunkles Grün für Links auf hellem Grund (gut lesbar) */
        --dunkel: #2e2d30;       /* Anthrazit, aus dem Logo-Grau: dunkle Flächen */
        --dunkel-tief: #1f1e21;  /* Fußzeile */
        --grund: #f4f4f3;        /* Seitenhintergrund */
        --grund-tief: #e8e8e7;   /* abgesetzte Abschnitte */
        --weiss: #ffffff;
        --tinte: #242326;        /* Text */
        --stahl: #5a585c;        /* Logo-Grau: Nebentext */
        --linie: #cdccce;
        --pfahl: #c9b38a;        /* Holzpfähle in der Zaunzeichnung */
        --warn: #a3301a;         /* Fehlermeldungen */
        --warn-hell: #fbebe7;

        /* Schriftgrößen. Die Schrift selbst und ihre Feineinstellung stehen in fonts.css. */
        --size-small: 0.875rem;
        --size-body: calc(1.0625rem * var(--body-scale, 1));
        --size-lead: calc(clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem) * var(--body-scale, 1));
        --size-h3: calc(1.5rem * var(--display-scale, 1));
        --size-h2: calc(clamp(1.875rem, 1.35rem + 2.3vw, 2.875rem) * var(--display-scale, 1));
        --size-h1: calc(clamp(2.25rem, 1.4rem + 3.8vw, 3.875rem) * var(--display-scale, 1));

        /* Maße */
        --pad: clamp(1.125rem, 4vw, 2.5rem);
        --max: 76rem;
        --gap: clamp(1.5rem, 4vw, 4rem);
        --section: clamp(3.5rem, 8vw, 6.5rem);
        --radius: 4px;

        /* Fokusrahmen: dunkel auf hellen, grün auf dunklen Flächen */
        --focus: var(--tinte);
    }
}

@layer base {
    body {
        font-family: var(--font-body);
        font-size: var(--size-body);
        line-height: 1.6;
        color: var(--tinte);
        background: var(--grund);
        -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-display);
        font-weight: var(--display-weight, 700);
        line-height: var(--display-leading, 1.1);
        letter-spacing: 0.002em;
        text-wrap: balance;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    h1 {
        font-size: var(--size-h1);
    }

    h2 {
        font-size: var(--size-h2);
    }

    h3 {
        font-size: var(--size-h3);
        line-height: calc(var(--display-leading, 1.1) + 0.08);
    }

    p {
        text-wrap: pretty;
    }

    a {
        color: var(--link);
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.18em;
    }

    a:hover {
        text-decoration-thickness: 0.16em;
    }

    :focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: 3px;
        border-radius: 2px;
    }

    ::selection {
        background: var(--akzent);
        color: var(--tinte);
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .skip-link {
        position: absolute;
        left: var(--pad);
        top: -4rem;
        z-index: 100;
        padding: 0.75rem 1rem;
        background: var(--akzent);
        color: var(--tinte);
        font-weight: 600;
    }

    .skip-link:focus {
        top: 0.5rem;
    }
}

@layer layout {
    .wrap {
        width: 100%;
        max-width: calc(var(--max) + 2 * var(--pad));
        margin-inline: auto;
        padding-inline: var(--pad);
    }

    .section {
        padding-block: var(--section);
    }

    .section--tinted {
        background: var(--grund-tief);
    }

    .section--dark {
        background: var(--dunkel);
        color: var(--weiss);
        --focus: var(--akzent);
    }

    .section--dark a:not(.button) {
        color: var(--akzent);
    }

    .section--message {
        min-height: 50vh;
    }

    .section__head {
        max-width: 46rem;
        margin-bottom: clamp(2rem, 4vw, 3rem);
    }

    .section__title {
        margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    }

    .section__head .section__title {
        margin-bottom: 1rem;
    }

    .section__lead {
        font-size: var(--size-lead);
        line-height: 1.5;
        max-width: 40rem;
    }

    .section--dark .section__lead {
        color: rgb(255 255 255 / 0.86);
    }

    .split {
        display: grid;
        gap: var(--gap);
        align-items: start;
    }

    @media (min-width: 60rem) {
        .split {
            grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        }

        .split--even {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            align-items: center;
        }
    }

    .split--even .section__lead {
        margin-bottom: 2rem;
    }
}

@layer components {
    /* ---------- Schaltflächen ---------- */

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 3.25rem;
        padding: 0.75rem 1.5rem;
        border: 2px solid transparent;
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 1.0625rem;
        line-height: 1.2;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    }

    .button--small {
        min-height: 2.75rem;
        padding: 0.5rem 1.125rem;
        font-size: 1rem;
    }

    .button--primary {
        background: var(--akzent);
        color: var(--tinte);
    }

    .button--primary:hover {
        background: var(--akzent-tief);
    }

    .button--dark {
        background: var(--tinte);
        color: var(--weiss);
    }

    .button--ghost {
        border-color: rgb(255 255 255 / 0.55);
        color: var(--weiss);
    }

    .button--ghost:hover {
        border-color: var(--weiss);
        background: rgb(255 255 255 / 0.08);
    }

    .button--outline {
        border-color: var(--tinte);
        background: transparent;
        color: var(--tinte);
    }

    .button--outline:hover {
        background: var(--tinte);
        color: var(--weiss);
    }

    .textlink {
        font-weight: 600;
    }

    /* ---------- Kopfzeile ---------- */

    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--grund);
        border-bottom: 1px solid var(--linie);
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 4.5rem;
    }

    .logo {
        display: inline-flex;
        align-items: center;
        color: var(--stahl);
        text-decoration: none;
    }

    /* Seitenverhältnis des Logos: etwa 5,6 zu 1 */
    .logo__image {
        display: block;
        height: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
        width: auto;
        aspect-ratio: 209.72 / 37.64;
    }

    .logo__green {
        fill: #6db437;
    }

    .logo__ink {
        fill: currentColor;
    }

    .logo--light {
        color: var(--weiss);
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        min-height: 2.75rem;
        padding: 0.5rem 0.875rem;
        border: 2px solid var(--tinte);
        border-radius: var(--radius);
        background: transparent;
        font-weight: 600;
        cursor: pointer;
    }

    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        display: block;
        width: 1.125rem;
        height: 2px;
        background: currentColor;
        transition: transform 0.2s, opacity 0.2s;
    }

    .nav-toggle__bars {
        position: relative;
    }

    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .nav-toggle__bars::before {
        top: -6px;
    }

    .nav-toggle__bars::after {
        top: 6px;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
        background: transparent;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
        transform: translateY(-6px) rotate(-45deg);
    }

    .site-nav__list a {
        display: block;
        padding: 0.75rem 0;
        color: var(--tinte);
        font-weight: 600;
        text-decoration: none;
    }

    .site-nav__list a[aria-current="page"] {
        box-shadow: inset 0 -3px 0 var(--akzent);
    }

    .site-nav__list a:hover {
        color: var(--link);
    }

    .site-nav__phone {
        color: var(--tinte);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        text-decoration: none;
        white-space: nowrap;
    }

    .site-nav__actions {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    /* Schmale Bildschirme: Menü klappt unter der Kopfzeile auf */
    @media (max-width: 61.99rem) {
        .site-nav {
            position: absolute;
            inset: 100% 0 auto 0;
            display: none;
            padding: 0.5rem var(--pad) 1.5rem;
            background: var(--grund);
            border-bottom: 1px solid var(--linie);
            box-shadow: 0 1.5rem 2rem -1.5rem rgb(36 35 38 / 0.35);
        }

        .site-nav.is-open {
            display: block;
        }

        .site-nav__list li + li {
            border-top: 1px solid var(--linie);
        }

        .site-nav__list a {
            padding: 0.875rem 0;
            font-size: 1.125rem;
        }

        .site-nav__list a[aria-current="page"] {
            box-shadow: inset 4px 0 0 var(--akzent);
            padding-left: 0.875rem;
        }

        .site-nav__actions {
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 1rem;
            padding-top: 1.25rem;
            border-top: 1px solid var(--linie);
        }

        .site-nav__phone {
            font-size: 1.25rem;
        }
    }

    /* Ohne JavaScript bleibt das Menü sichtbar */
    html:not(.js) .site-nav {
        position: static;
        display: block;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    html:not(.js) .nav-toggle {
        display: none;
    }

    html:not(.js) .site-header__inner {
        flex-wrap: wrap;
        padding-block: 0.75rem;
    }

    @media (min-width: 62rem) {
        .nav-toggle {
            display: none;
        }

        .site-nav {
            display: flex;
            align-items: center;
            gap: clamp(1.25rem, 2.5vw, 2.5rem);
        }

        .site-nav__list {
            display: flex;
            gap: clamp(1rem, 2vw, 1.75rem);
        }

        .site-nav__list a {
            padding: 1.5rem 0;
            font-size: 1rem;
        }
    }

    @media (min-width: 62rem) and (max-width: 70rem) {
        .site-nav__phone {
            display: none;
        }
    }

    /* ---------- Kopf der Unterseiten ---------- */

    .page-head {
        background: var(--dunkel);
        color: var(--weiss);
        --focus: var(--akzent);
    }

    .page-head__inner {
        padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
    }

    .page-head__title {
        max-width: 24ch;
    }

    .page-head__lead {
        max-width: 42rem;
        margin-top: 1.25rem;
        font-size: var(--size-lead);
        line-height: 1.5;
        color: rgb(255 255 255 / 0.86);
    }

    /* Drei Litzen als Abschluss */
    .page-head__wires {
        height: 1.75rem;
        background:
            linear-gradient(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.4)) 0 0 / 100% 1px no-repeat,
            linear-gradient(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.4)) 0 50% / 100% 1px no-repeat,
            linear-gradient(var(--akzent), var(--akzent)) 0 100% / 100% 3px no-repeat;
    }

    /* ---------- Zaunprofil ---------- */

    .profil {
        --wire: #e8e8ea;
        color: var(--weiss);
    }

    .profil__tabs {
        display: flex;
        gap: 0.25rem 1.25rem;
        flex-wrap: wrap;
        border-bottom: 1px solid rgb(255 255 255 / 0.25);
    }

    .profil__tab {
        padding: 0.75rem 0;
        border: 0;
        border-bottom: 3px solid transparent;
        margin-bottom: -1px;
        background: none;
        color: rgb(255 255 255 / 0.72);
        font-weight: 600;
        cursor: pointer;
    }

    .profil__tab:hover {
        color: var(--weiss);
    }

    .profil__tab[aria-selected="true"] {
        border-bottom-color: var(--akzent);
        color: var(--weiss);
    }

    html:not(.js) .profil__tabs {
        display: none;
    }

    .profil__stage {
        aspect-ratio: 1 / 0.92;
        overflow: hidden;
    }

    @media (min-width: 36rem) {
        .profil__stage {
            aspect-ratio: 720 / 420;
        }
    }

    .profil__svg {
        width: 100%;
        height: 100%;
    }

    .profil__soil {
        fill: var(--dunkel-tief);
    }

    .profil__soil-line {
        stroke: rgb(255 255 255 / 0.07);
        stroke-width: 2;
    }

    .profil__ground {
        stroke: var(--wire);
        stroke-width: 2;
    }

    .profil__ruler path {
        stroke: rgb(255 255 255 / 0.5);
        stroke-width: 1.5;
        fill: none;
    }

    .profil__tick text {
        fill: rgb(255 255 255 / 0.5);
        font-family: var(--font-body);
        font-size: 17px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .profil__guide {
        stroke: rgb(255 255 255 / 0.16);
        stroke-width: 1;
        stroke-dasharray: 3 7;
    }

    .profil__tick--depth {
        display: none;
    }

    /* Die Maße, auf die es bei der gewählten Variante ankommt, leuchten grün */
    .profil[data-variant="elektro"] .profil__tick:is([data-cm="20"], [data-cm="90"]),
    .profil[data-variant="geflecht"] .profil__tick:is([data-cm="120"], [data-cm="-20"]),
    .profil[data-variant="erhoeht"] .profil__tick:is([data-cm="90"], [data-cm="120"], [data-cm="-20"]) {
        display: inline;

        & text {
            fill: var(--akzent);
        }

        & path {
            stroke: var(--akzent);
            stroke-width: 3;
        }
    }

    .profil[data-variant="elektro"] .profil__guide:is([data-cm="20"], [data-cm="90"]),
    .profil[data-variant="geflecht"] .profil__guide[data-cm="120"],
    .profil[data-variant="erhoeht"] .profil__guide:is([data-cm="90"], [data-cm="120"]) {
        stroke: color-mix(in srgb, var(--akzent) 60%, transparent);
    }

    .profil__variant {
        display: none;
    }

    .profil[data-variant="elektro"] .profil__variant[data-v="elektro"],
    .profil[data-variant="geflecht"] .profil__variant[data-v="geflecht"],
    .profil[data-variant="erhoeht"] .profil__variant[data-v="erhoeht"] {
        display: inline;
    }

    .profil__post {
        fill: var(--pfahl);
    }

    .profil__post--buried {
        opacity: 0.28;
    }

    .profil__wires path {
        stroke: var(--wire);
        stroke-width: 3;
        fill: none;
        stroke-dasharray: 600;
        animation: profil-draw 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) backwards;
    }

    .profil__wires path:nth-child(2) { animation-delay: 0.08s; }
    .profil__wires path:nth-child(3) { animation-delay: 0.16s; }
    .profil__wires path:nth-child(4) { animation-delay: 0.24s; }

    .profil__insulators rect {
        fill: var(--akzent);
        stroke: var(--dunkel-tief);
        stroke-width: 1.5;
    }

    .profil__pulse {
        fill: var(--akzent);
        filter: drop-shadow(0 0 6px var(--akzent));
        animation: profil-pulse 2.8s linear 1.2s infinite backwards;
    }

    .profil__mesh path {
        stroke: var(--wire);
        stroke-width: 1.5;
        fill: none;
    }

    .profil__mesh {
        animation: profil-fade 0.5s ease-out backwards;
    }

    .profil__mesh--buried path {
        stroke: var(--akzent);
        stroke-dasharray: 4 5;
        opacity: 0.75;
    }

    .profil__bands path {
        stroke: var(--akzent);
        stroke-width: 6;
        stroke-dasharray: 600;
        animation: profil-draw 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s backwards;
    }

    @keyframes profil-draw {
        from { stroke-dashoffset: 600; }
        to { stroke-dashoffset: 0; }
    }

    @keyframes profil-fade {
        from { opacity: 0; }
    }

    @keyframes profil-pulse {
        0% { transform: translateX(0); opacity: 0; }
        4% { opacity: 1; }
        38% { transform: translateX(592px); opacity: 1; }
        42%, 100% { transform: translateX(592px); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .profil__pulse {
            display: none;
        }
    }

    .profil__legend {
        padding-top: 1.25rem;
    }

    .js .profil__panel:not(.is-active) {
        display: none;
    }

    html:not(.js) .profil__panel + .profil__panel {
        margin-top: 1.5rem;
    }

    .profil__panel-title {
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0;
        color: rgb(255 255 255 / 0.72);
        margin-bottom: 0.625rem;
    }

    .profil__facts {
        display: grid;
        gap: 0.5rem;
    }

    .profil__facts li {
        position: relative;
        padding-left: 1.75rem;
    }

    /* Aufzählungszeichen in Form eines Isolators */
    .profil__facts li::before,
    .checkliste li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.5em;
        width: 1rem;
        height: 0.5rem;
        border-radius: 2px;
        background: var(--akzent);
    }

    .profil__facts strong {
        font-weight: 600;
    }

    .profil__facts span {
        display: block;
        margin-top: 0.25rem;
        color: rgb(255 255 255 / 0.82);
    }

    @media (min-width: 60rem) {
        .profil--detailed {
            display: grid;
            grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
            grid-template-areas: "tabs tabs" "stage legend";
            column-gap: var(--gap);
        }

        .profil--detailed .profil__tabs { grid-area: tabs; }
        .profil--detailed .profil__stage { grid-area: stage; }
        .profil--detailed .profil__legend { grid-area: legend; padding-top: 2rem; }
    }

    .profil--detailed .profil__panel-title {
        font-family: var(--font-display);
        font-weight: var(--display-weight, 700);
        font-size: var(--size-h3);
        line-height: 1.15;
        color: var(--weiss);
        margin-bottom: 1rem;
    }

    .profil--detailed .profil__facts {
        gap: 1.25rem;
    }

    /* ---------- Bilder ---------- */

    /* Platzhalterfläche, falls ein Foto nicht geladen werden kann */
    .media {
        display: block;
        overflow: hidden;
        border-radius: var(--radius);
        background:
            repeating-linear-gradient(0deg, transparent 0 22%, rgb(255 255 255 / 0.22) 22% calc(22% + 1px), transparent calc(22% + 1px) 25%),
            var(--dunkel);
    }

    .media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .media img.is-missing {
        visibility: hidden;
    }

    /* ---------- Förderhinweis ---------- */

    .schild {
        padding: clamp(1.5rem, 3vw, 2.25rem);
        border-radius: 10px;
        background: var(--akzent);
        color: var(--tinte);
    }

    .schild__title {
        font-size: calc(clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem) * var(--display-scale, 1));
        margin-bottom: 1rem;
    }

    .schild p + p {
        margin-top: 0.75rem;
    }

    .schild__link {
        display: inline-block;
        margin-top: 1.25rem;
        color: var(--tinte);
        font-weight: 700;
    }

    .hinweis {
        padding: 1.5rem;
        border-left: 5px solid var(--akzent);
        background: var(--weiss);
        border-radius: 0 var(--radius) var(--radius) 0;
    }

    .hinweis__title {
        font-size: var(--size-h3);
        margin-bottom: 0.625rem;
    }

    /* ---------- Fließtext ---------- */

    .prose {
        max-width: 44rem;
    }

    .prose--narrow {
        max-width: calc(42rem + 2 * var(--pad));
    }

    .prose > * + * {
        margin-top: 1.125rem;
    }

    .prose > h2 {
        margin-bottom: 1.5rem;
    }

    .prose > * + h2 {
        margin-top: 3rem;
    }

    .prose > * + h3 {
        margin-top: 2rem;
    }

    .prose ul:not([class]) {
        padding-left: 1.25rem;
    }

    .prose--legal h2 {
        font-size: calc(clamp(1.625rem, 1.3rem + 1.2vw, 2rem) * var(--display-scale, 1));
    }

    .prose--legal h3 {
        font-family: var(--font-body);
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0;
    }

    .todo {
        padding: 0.125rem 0.375rem;
        background: var(--akzent);
        color: var(--tinte);
        font-weight: 600;
    }

    .legal-date {
        color: var(--stahl);
    }

    /* ---------- Ablauf: vier Pfähle an einer Litze ---------- */

    .ablauf {
        position: relative;
        display: grid;
        gap: 2rem;
    }

    .ablauf::before {
        content: "";
        position: absolute;
        left: 1.25rem;
        top: 0.5rem;
        bottom: 0.5rem;
        width: 2px;
        background: var(--stahl);
        transform: translateX(-50%);
    }

    .ablauf__step {
        position: relative;
        padding-left: 4rem;
    }

    .ablauf__post {
        position: absolute;
        left: 0;
        top: 0;
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 3.25rem;
        border-radius: 3px 3px 0 0;
        background: var(--dunkel);
        color: var(--akzent);
        font-family: var(--font-display);
        font-weight: var(--display-weight, 700);
        font-size: calc(1.75rem * var(--display-scale));
        line-height: 1;
    }

    .ablauf__title {
        margin-bottom: 0.5rem;
        padding-top: 0.25rem;
    }

    @media (min-width: 56rem) {
        .ablauf {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 2.5rem;
        }

        .ablauf::before {
            left: 0;
            right: 0;
            top: 1.25rem;
            bottom: auto;
            width: auto;
            height: 2px;
            transform: none;
        }

        .ablauf__step {
            padding-left: 0;
            padding-top: 4.75rem;
        }

        .ablauf__title {
            padding-top: 0;
        }
    }

    /* ---------- Zauntypen ---------- */

    .zauntypen {
        display: grid;
        gap: 2rem 1.5rem;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    }

    .zauntyp__link {
        display: block;
        color: var(--tinte);
        text-decoration: none;
    }

    .zauntyp__image {
        aspect-ratio: 1;
    }

    .zauntyp__name {
        display: block;
        margin-top: 1rem;
        font-family: var(--font-display);
        font-weight: var(--display-weight, 700);
        font-size: calc(1.75rem * var(--display-scale));
        line-height: 1.1;
        text-decoration: underline;
        text-decoration-color: var(--akzent);
        text-decoration-thickness: 3px;
        text-underline-offset: 0.2em;
    }

    .zauntyp__link:hover .zauntyp__name {
        text-decoration-color: var(--tinte);
    }

    .zauntyp__text {
        margin-top: 0.625rem;
        color: var(--stahl);
    }

    /* ---------- Checkliste: jeder Punkt hängt an einer Litze ---------- */

    .checkliste li {
        position: relative;
        padding: 1rem 0 1rem 2rem;
        border-bottom: 1px solid rgb(255 255 255 / 0.3);
        font-size: var(--size-lead);
        line-height: 1.4;
    }

    .checkliste li:first-child {
        border-top: 1px solid rgb(255 255 255 / 0.3);
    }

    .checkliste li::before {
        top: 1.5em;
    }

    /* ---------- Ansprechpartner ---------- */

    .partner {
        display: grid;
        gap: var(--gap);
        align-items: center;
    }

    @media (min-width: 56rem) {
        .partner {
            grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        }
    }

    .partner__photo {
        position: relative;
        aspect-ratio: 4 / 3;
    }

    .partner__photo figcaption {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 0.5rem 0.875rem;
        background: var(--akzent);
        color: var(--tinte);
        font-weight: 600;
        font-size: var(--size-small);
    }

    /* ---------- Bundesländer ---------- */

    .laender {
        padding: 1.5rem;
        background: var(--weiss);
        border-radius: var(--radius);
        border-top: 5px solid var(--dunkel);
    }

    .laender__title {
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0;
        margin-bottom: 0.75rem;
    }

    .laender__list li {
        padding: 0.5rem 0;
        border-top: 1px solid var(--linie);
    }

    /* ---------- Werte (Elektrozaun) ---------- */

    .werte__row {
        display: grid;
        gap: 0.25rem 2rem;
        padding: 1.5rem 0;
        border-top: 2px solid var(--tinte);
    }

    .werte__row:last-child {
        border-bottom: 2px solid var(--tinte);
    }

    .werte__name {
        font-weight: 700;
    }

    .werte__value {
        font-family: var(--font-display);
        font-weight: var(--display-weight, 700);
        font-size: calc(clamp(2.5rem, 1.8rem + 3vw, 4rem) * var(--display-scale));
        line-height: 1;
        font-variant-numeric: lining-nums;
        white-space: nowrap;
    }

    .werte__text {
        max-width: 34rem;
        color: var(--stahl);
    }

    @media (min-width: 56rem) {
        .werte__row {
            grid-template-columns: 11rem 24rem minmax(0, 1fr);
            align-items: baseline;
        }
    }

    .werte__more {
        margin-top: 1.5rem;
    }

    /* ---------- Leistungen ---------- */

    .leistungen {
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    }

    .leistung {
        padding-top: 1.25rem;
        border-top: 5px solid var(--dunkel);
    }

    .leistung__title {
        font-size: calc(clamp(1.625rem, 1.4rem + 1vw, 2rem) * var(--display-scale, 1));
        margin-bottom: 0.75rem;
    }

    .leistungen--vier .leistung__title {
        font-size: var(--size-h3);
    }

    /* ---------- Galerie ---------- */

    .galerie {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: dense;
    }

    @media (min-width: 48rem) {
        .galerie {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }
    }

    .galerie__item {
        aspect-ratio: 4 / 3;
    }

    .galerie__item--hoch {
        grid-row: span 2;
        aspect-ratio: auto;
    }

    .galerie__link {
        position: relative;
        height: 100%;
        cursor: zoom-in;
    }

    .galerie__caption {
        position: absolute;
        left: 0;
        bottom: 0;
        max-width: 100%;
        padding: 0.375rem 0.75rem;
        background: var(--tinte);
        color: var(--weiss);
        font-size: var(--size-small);
        font-weight: 600;
    }

    .lightbox {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 1rem;
        border: 0;
        background: rgb(31 30 33 / 0.97);
        color: var(--weiss);
        --focus: var(--akzent);
    }

    .lightbox[open] {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 1rem;
    }

    .lightbox::backdrop {
        background: var(--dunkel-tief);
    }

    .lightbox__figure {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 0.5rem;
        justify-items: center;
        min-height: 0;
    }

    .lightbox__image {
        max-width: 100%;
        max-height: 100%;
        min-height: 0;
        object-fit: contain;
    }

    .lightbox__caption {
        font-size: var(--size-small);
        color: rgb(255 255 255 / 0.8);
    }

    .lightbox__controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.5rem 1rem;
    }

    .lightbox__button {
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
        border: 2px solid rgb(255 255 255 / 0.5);
        border-radius: var(--radius);
        background: none;
        font-weight: 600;
        cursor: pointer;
    }

    .lightbox__button:hover {
        border-color: var(--weiss);
    }

    .lightbox__button--close {
        border-color: var(--akzent);
        background: var(--akzent);
        color: var(--tinte);
    }

    .lightbox__count {
        font-variant-numeric: tabular-nums;
        min-width: 4rem;
        text-align: center;
    }

    /* ---------- Formulare ---------- */

    .form {
        display: grid;
        gap: 1.5rem;
    }

    .form .button {
        justify-self: start;
    }

    .form__row {
        display: grid;
        gap: 1.5rem;
    }

    @media (min-width: 36rem) {
        .form__row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
        }

        .form__row--plz {
            grid-template-columns: 9rem minmax(0, 1fr);
        }
    }

    .field__label {
        display: block;
        margin-bottom: 0.375rem;
        font-weight: 600;
    }

    .field__optional {
        margin-left: 0.375rem;
        font-weight: 400;
        font-size: var(--size-small);
        color: var(--stahl);
    }

    .field__hint {
        margin: -0.125rem 0 0.5rem;
        font-size: var(--size-small);
        color: var(--stahl);
    }

    .field__hint--warn {
        margin-top: -0.75rem;
        color: var(--warn);
        font-weight: 600;
    }

    .field__control {
        display: block;
        width: 100%;
        min-height: 3.25rem;
        padding: 0.75rem 0.875rem;
        border: 2px solid var(--stahl);
        border-radius: var(--radius);
        background: var(--weiss);
    }

    textarea.field__control {
        resize: vertical;
        line-height: 1.5;
    }

    .field__control--file {
        padding: 0.625rem;
        border-style: dashed;
    }

    .field__control:focus-visible {
        outline: 3px solid var(--akzent);
        outline-offset: 0;
        border-color: var(--tinte);
        border-radius: var(--radius);
    }

    .field--error .field__control {
        border-color: var(--warn);
    }

    .field__error {
        margin-top: 0.5rem;
        color: var(--warn);
        font-weight: 600;
        font-size: 1rem;
    }

    .choices {
        display: grid;
        gap: 0.5rem;
    }

    .choice {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 0.875rem;
        border: 2px solid var(--linie);
        border-radius: var(--radius);
        background: var(--weiss);
        cursor: pointer;
    }

    .choice:has(input:checked) {
        border-color: var(--dunkel);
        box-shadow: inset 4px 0 0 var(--akzent);
    }

    .choice:has(input:focus-visible) {
        outline: 3px solid var(--akzent);
    }

    .choice input {
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0.2rem 0 0;
        accent-color: var(--dunkel);
    }

    .choice--plain {
        padding: 0;
        border: 0;
        background: none;
    }

    .choice--plain:has(input:checked) {
        box-shadow: none;
    }

    .field--chips .choices {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    }

    .form-trap {
        position: absolute;
        left: -200vw;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .form-notice {
        padding: 1rem 1.25rem;
        border-left: 5px solid var(--warn);
        border-radius: 0 var(--radius) var(--radius) 0;
        background: var(--warn-hell);
    }

    .form-notice:focus {
        outline: none;
    }

    .form-notice p {
        font-weight: 600;
    }

    .form-notice ul {
        margin-top: 0.5rem;
        padding-left: 1.25rem;
    }

    .form-notice a {
        color: var(--warn);
    }

    /* Schritte der Angebotsanfrage */

    .steps-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .steps-nav__button {
        display: block;
        width: 100%;
        padding: 0.625rem 0 0;
        border: 0;
        border-top: 5px solid var(--linie);
        background: none;
        text-align: left;
        font-weight: 600;
        color: var(--stahl);
        cursor: pointer;
    }

    .steps-nav__button[aria-current="step"] {
        border-top-color: var(--akzent);
        color: var(--tinte);
    }

    .steps-nav__button.is-done {
        border-top-color: var(--dunkel);
        color: var(--tinte);
    }

    .steps-nav__number {
        display: block;
        font-size: var(--size-small);
        font-weight: 400;
    }

    .step {
        display: grid;
        gap: 1.5rem;
    }

    .step + .step {
        margin-top: 1.5rem;
        padding-top: 2.5rem;
        border-top: 2px solid var(--tinte);
    }

    .js .step + .step {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .step__title {
        font-family: var(--font-display);
        font-weight: var(--display-weight, 700);
        font-size: calc(clamp(1.625rem, 1.4rem + 1.2vw, 2.125rem) * var(--display-scale));
        line-height: 1.1;
        margin-bottom: 1.25rem;
    }

    /* "Andere Tierart" erscheint erst, wenn "Andere Tiere" angekreuzt ist */
    .js .field--conditional {
        display: none;
    }

    .js .step:has(input[value="sonstige"]:checked) .field--conditional {
        display: block;
    }

    .steps-controls {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    /* ---------- "Ihr Draht zu uns" ---------- */

    .draht {
        background: var(--dunkel);
        color: var(--weiss);
        border-top: 3px solid var(--akzent);
        --focus: var(--akzent);
    }

    .draht__inner {
        display: grid;
        gap: 2rem;
        padding-block: clamp(3rem, 6vw, 4.5rem);
        align-items: center;
    }

    @media (min-width: 56rem) {
        .draht__inner {
            grid-template-columns: minmax(0, 1fr) auto;
        }
    }

    .draht__title {
        margin-bottom: 0.75rem;
    }

    .draht__text {
        max-width: 36rem;
        color: rgb(255 255 255 / 0.86);
    }

    .draht__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.25rem 2rem;
    }

    .draht__actions .button--dark {
        background: var(--akzent);
        color: var(--tinte);
    }

    .draht__actions .button--dark:hover {
        background: var(--akzent-tief);
    }

    .draht__phone {
        display: grid;
        color: var(--weiss);
        text-decoration: none;
    }

    .draht__phone-label {
        font-size: var(--size-small);
        color: rgb(255 255 255 / 0.72);
    }

    .draht__phone-number {
        font-family: var(--font-display);
        font-weight: var(--display-weight, 700);
        font-size: calc(clamp(2rem, 1.6rem + 1.6vw, 2.75rem) * var(--display-scale));
        line-height: 1.05;
        white-space: nowrap;
    }

    .draht__phone:hover .draht__phone-number {
        color: var(--akzent);
    }

    /* ---------- Fußzeile ---------- */

    .site-footer {
        background: var(--dunkel-tief);
        color: rgb(255 255 255 / 0.82);
        font-size: 1rem;
        --focus: var(--akzent);
    }

    .site-footer a {
        color: var(--weiss);
    }

    .site-footer__grid {
        display: grid;
        gap: 2.5rem;
        padding-block: clamp(3rem, 6vw, 4.5rem);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    }

    .site-footer__brand p {
        margin-top: 1rem;
        max-width: 22rem;
    }

    .site-footer__heading {
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0;
        color: var(--weiss);
        margin-bottom: 0.75rem;
    }

    .site-footer__list {
        display: grid;
        gap: 0.375rem;
    }

    .site-footer address + .site-footer__list,
    .site-footer p + p {
        margin-top: 0.75rem;
    }

    .site-footer__legal {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.75rem 2rem;
        position: relative;
        padding-block: 1.25rem;
        font-size: var(--size-small);
    }

    .site-footer__legal::before {
        content: "";
        position: absolute;
        inset: 0 var(--pad) auto;
        border-top: 1px solid rgb(255 255 255 / 0.2);
    }

    .site-footer__legal ul {
        display: flex;
        gap: 1.5rem;
        list-style: none;
    }
}

@layer pages {
    /* ---------- Startseite: Einstieg ---------- */

    .hero {
        background: var(--dunkel);
        color: var(--weiss);
        overflow: hidden;
        --focus: var(--akzent);
    }

    .hero__inner {
        display: grid;
        gap: clamp(2.5rem, 6vw, 4rem);
        padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
    }

    .hero__text {
        container-type: inline-size;
    }

    /* Schriftgröße richtet sich nach der Spaltenbreite, damit lange Wörter wie "Wolfsabweisende" in eine Zeile passen */
    .hero__title {
        font-size: clamp(2rem, var(--hero-fit, 12cqi), 4.75rem);
        line-height: var(--display-leading, 1.1);
    }

    .hero__lead {
        max-width: 34rem;
        margin-top: 1.5rem;
        font-size: var(--size-lead);
        line-height: 1.5;
        color: rgb(255 255 255 / 0.88);
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        margin-top: 2rem;
    }

    .hero__profil-intro {
        max-width: 30rem;
        margin-bottom: 0.75rem;
        color: rgb(255 255 255 / 0.82);
    }

    .hero__profil-more {
        margin-top: 1.25rem;
    }

    .hero__profil-more a {
        color: var(--akzent);
        font-weight: 600;
    }

    @media (min-width: 64rem) {
        .hero__inner {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            align-items: center;
        }

        /* Der Zaun läuft rechts aus dem Bild */
        .hero__profil .profil__stage {
            margin-right: calc(-1 * max(var(--pad), (100vw - var(--max)) / 2));
            aspect-ratio: auto;
            height: clamp(20rem, 30vw, 27rem);
        }
    }

    /* ---------- Kontakt ---------- */

    .kontakt {
        display: grid;
        gap: var(--gap);
        align-items: start;
    }

    @media (min-width: 56rem) {
        .kontakt {
            grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        }
    }

    .kontakt__photo {
        aspect-ratio: 4 / 3;
        margin-bottom: 1.5rem;
    }

    .kontakt__name {
        margin-bottom: 0.5rem;
    }

    .kontakt__wege {
        margin-top: 1.5rem;
    }

    .kontakt__wege div {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        padding: 0.75rem 0;
        border-top: 1px solid var(--linie);
    }

    .kontakt__wege div:last-child {
        border-bottom: 1px solid var(--linie);
    }

    .kontakt__wege dt {
        color: var(--stahl);
    }

    .kontakt__wege dd {
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .kontakt__formular > h2 {
        margin-bottom: 0.75rem;
    }

    .kontakt__intro {
        margin-bottom: 2rem;
        max-width: 38rem;
    }

    .kontakt__formular .form {
        max-width: 40rem;
    }

    /* ---------- Angebotsanfrage ---------- */

    .angebot {
        display: grid;
        gap: var(--gap);
        align-items: start;
    }

    @media (min-width: 60rem) {
        .angebot {
            grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        }

        .angebot__seite {
            position: sticky;
            top: 6.5rem;
        }
    }

    .angebot__seite {
        padding: 1.5rem;
        background: var(--weiss);
        border-radius: var(--radius);
        border-top: 5px solid var(--akzent);
    }

    .angebot__seite h2 {
        font-size: var(--size-h3);
        margin-bottom: 0.5rem;
    }

    .angebot__seite * + h2 {
        margin-top: 2rem;
    }

    .angebot__phone {
        display: inline-block;
        margin-top: 0.5rem;
        font-family: var(--font-display);
        font-weight: var(--display-weight, 700);
        font-size: calc(2.25rem * var(--display-scale));
        line-height: 1.1;
        color: var(--tinte);
        text-decoration-color: var(--akzent);
        text-decoration-thickness: 3px;
    }

    .angebot__weiter {
        padding-left: 1.25rem;
        display: grid;
        gap: 0.5rem;
        list-style: decimal;
    }
}