/* WERT.pro – Styles aus der Penpot-Vorlage
   Jede Stufe skaliert innerhalb ihres Bereichs proportional zur Referenz-Zeichenfläche:
   <=480: rem = vw/30 (Board 480) | 481-767: rem = vw/48 (Board 768) | 768-1279: rem = vw/80 (Board 1280)
   1280-1920: 16px, Inhalt 1280px zentriert | >1920: rem = vw/120 */

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url("../Fonts/roboto-latin-var.woff2") format("woff2");
}

:root {
    --c-bg: #fafafa;
    --c-text: #262520;
    --c-black: #000;
    --c-white: #fff;
    --c-accent: #c2b17e;
    --c-error: #e95454;
    --c-success: #2e6b2f;
    --ls: 0.078125rem; /* 1.25px */
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
@media (max-width: 480px) { html { font-size: calc(100vw / 30); } }
@media (min-width: 481px) and (max-width: 767px) { html { font-size: calc(100vw / 48); } }
@media (min-width: 768px) and (max-width: 1279px) { html { font-size: calc(100vw / 80); } }
@media (min-width: 1921px) { html { font-size: calc(100vw / 120); } }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.site {
    max-width: 80rem;
    min-height: 100vh;
    margin: 0 auto;
    background: var(--c-bg);
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

img, svg, picture { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}
.center { text-align: center; }
.strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Button ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.375rem;
    padding: .625rem 1rem;
    border: 1px solid var(--c-text);
    border-radius: 100rem;
    background: var(--c-text);
    color: var(--c-bg);
    font: inherit;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: var(--ls);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--c-bg); color: var(--c-text); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Header ---------- */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.5rem;
    padding: 1rem 1.25rem;
}
.logo img { width: 7.4375rem; height: auto; }
@media (max-width: 480px) { .header { padding: 1rem .625rem; } }
@media (min-width: 768px) {
    .header { height: 6rem; padding: 1rem 2.5rem; }
    .logo img { width: 13rem; }
}

/* ---------- Hero ---------- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    padding: 2.25rem 1.25rem 0;
}
.hero-text { display: flex; flex-direction: column; gap: .75rem; width: 100%; text-align: center; }
h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: var(--ls);
    text-transform: uppercase;
}
.lead { font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
@media (min-width: 481px) {
    h1 { font-size: 2rem; }
    .lead { font-size: 1.5rem; }
}
@media (min-width: 768px) {
    .hero { gap: 3rem; padding: 4rem 2.5rem 0; }
    h1 { font-size: 2.5rem; }
    .br-m { display: none; }
}

/* Karten / Slider */
.cards { position: relative; width: 100%; }
.cards-track { display: flex; gap: 1rem; }
.card {
    flex: 0 0 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.card picture { width: 100%; }
.card img {
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 248;
    object-fit: cover;
    border-radius: .5rem;
}
.card figcaption { font-size: 1.125rem; line-height: 1.5; color: var(--c-text); text-align: center; }

@media (max-width: 767px) {
    .cards { overflow: hidden; touch-action: pan-y; }
    .cards-track { gap: 0; transform: translateX(-100%); transition: transform .5s ease; will-change: transform; }
    .cards-track.no-anim { transition: none; }
    .card { transition: opacity .3s; user-select: none; -webkit-user-drag: none; }
    .card img { pointer-events: none; }
    .slider-btn {
        position: absolute;
        top: 0;
        width: 3.75rem;
        height: 3.75rem;
        display: flex; align-items: center; justify-content: center;
        padding: 0; border: 0; border-radius: .1875rem;
        background: rgba(250, 250, 250, .45);
        color: var(--c-text);
        cursor: pointer;
        transition: background-color .2s;
    }
    .slider-btn:hover, .slider-btn:active { background: rgba(250, 250, 250, .8); }
    .slider-btn svg { width: 2.3125rem; height: 3.6875rem; fill: currentColor; }
    .slider-btn.prev { left: 0; }
    .slider-btn.next { right: 0; }
}
@media (min-width: 481px) and (max-width: 767px) {
    .card img { aspect-ratio: 728 / 312; }
    .card figcaption { font-size: 1.5rem; }
}
@media (min-width: 768px) {
    .cards-track { align-items: flex-start; }
    .card { flex: 1 1 0; }
    .card img { aspect-ratio: 392 / 219; }
    .card figcaption { color: var(--c-black); }
    .card.clone, .slider-btn { display: none; }
}

/* ---------- Content ---------- */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.25rem 1.25rem 0;
}
h2 {
    width: 100%;
    max-width: 60rem;
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: var(--ls);
    text-align: center;
}
.content .text { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.content .text p { font-size: 1.125rem; line-height: 1.5; color: var(--c-black); text-align: center; }
@media (min-width: 481px) {
    h2 { font-size: 1.75rem; }
    .content .text p { font-size: 1.5rem; }
}
@media (min-width: 768px) {
    .content { gap: 1rem; padding: 4rem 2.5rem 0; }
    h2 { font-size: 2.5rem; }
}

/* ---------- Kontakt / Formular ---------- */
.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.25rem 1.25rem;
    scroll-margin-top: 1rem;
}
@media (min-width: 768px) { .contact { padding: 4rem 2.5rem; } }

.form { display: flex; flex-direction: column; gap: .75rem; width: 100%; }
.row { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 768px) {
    .row { flex-direction: row; gap: 1rem; }
    .row .field { flex: 1 1 0; }
}
/* Kein flex-gap: Browser-Erweiterungen fuegen Elemente ins Feld ein, jedes Kind wuerde sonst einen weiteren Abstand erzeugen */
.field { display: flex; flex-direction: column; gap: 0; }
.field > label:not(.check), .field > .label { margin-bottom: .375rem; }
.field > .hint { margin-top: .375rem; }
.field > div:not(.captcha-row):empty { display: none; }
.field > label:not(.check), .field > .label { display: block; height: 1.6875rem; font-size: 1.125rem; line-height: 1.5; color: var(--c-text); }
.req { font-size: .875rem; line-height: 1; vertical-align: .35em; }
.req { color: var(--c-error); }

.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea {
    width: 100%;
    height: 2.8125rem; /* feste Hoehe: 8px + 27px Zeile + 8px + Rahmen – kein Springen bei Fokus/Fehler */
    min-height: 2.8125rem;
    max-height: 2.8125rem;
    margin: 0;
    padding: .5rem;
    border: 1px solid var(--c-text);
    border-radius: .5rem;
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
}
.field textarea { height: 8rem; min-height: 8rem; max-height: 8rem; resize: none; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-accent); }
.field.invalid input:focus, .field.invalid textarea:focus { border-color: var(--c-error); }
.field.invalid input, .field.invalid textarea, .field.invalid .box { border-color: var(--c-error); }
/* Fehlerzustand aus Penpot: Ausrufezeichen-Icon (20x20) rechts im Feld */
.field.invalid input[type="text"], .field.invalid input[type="tel"], .field.invalid input[type="email"], .field.invalid textarea {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%23e95454' stroke-width='1.5'/%3E%3Cpath d='M10 5.5v5.5' stroke='%23e95454' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1.1' fill='%23e95454'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    background-position: right .5rem center;
}
.field.invalid textarea { background-position: right .5rem top .5rem; }
.field.invalid .hint { color: var(--c-error); }
@media (min-width: 768px) {
    .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea { font-size: 1.125rem; }
}

/* Platz fuer die Fehlermeldung ist immer reserviert, damit beim Validieren nichts springt */
.hint { display: block; height: 1.125rem; min-height: 1.125rem; max-height: 1.125rem; overflow: visible; white-space: nowrap; font-size: .875rem; line-height: 1.25; color: var(--c-error); }

.check {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    font-size: 1.125rem;
    line-height: 1.5;
    cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check .box {
    flex: 0 0 auto;
    width: 1.25rem; height: 1.25rem;
    margin-top: .125rem;
    border: 1px solid var(--c-text);
    border-radius: .25rem;
    background: var(--c-bg);
    position: relative;
    transition: background-color .15s;
}
.check input:checked + .box { background: var(--c-text); }
.check input:checked + .box::after {
    content: "";
    position: absolute; left: .375rem; top: .125rem;
    width: .375rem; height: .6875rem;
    border: solid var(--c-bg); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.check input:focus-visible + .box { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.captcha-row { display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: center; justify-items: center; }
.captcha-input { display: flex; align-items: center; gap: .5rem; width: 100%; }
@media (min-width: 768px) {
    /* Bild exakt in der Seitenmitte: linke und rechte Spalte gleich breit */
    .captcha-row { grid-template-columns: minmax(0, 1fr) 13.75rem minmax(0, 1fr); justify-items: stretch; }
}
#captcha-img {
    width: 13.75rem; height: 4rem;
    border: 1px solid var(--c-text);
    border-radius: .5rem;
    background: #eee;
}
.captcha-reload {
    flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-text); border-radius: .5rem;
    background: var(--c-bg); color: var(--c-text);
    cursor: pointer;
}
.captcha-reload:hover { background: var(--c-text); color: var(--c-bg); }
.captcha-reload.spin svg { animation: spin .6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }
.captcha-row input { flex: 1 1 0; min-width: 0; text-transform: uppercase; letter-spacing: .15em; }
.captcha-row input::placeholder { text-transform: none; letter-spacing: normal; color: #6f6e69; }

.hp { position: absolute; left: -200vw; top: 0; width: 1px; height: 1px; overflow: hidden; }

.actions { display: flex; justify-content: center; margin-top: .5rem; }

.form-error {
    padding: .75rem 1rem;
    border: 1px solid var(--c-error);
    border-radius: .5rem;
    color: var(--c-error);
    font-size: 1rem;
    line-height: 1.5;
}
.form-success {
    width: 100%;
    padding: 2rem 1.5rem;
    border: 1px solid var(--c-success);
    border-radius: .5rem;
    background: #eef5ee;
    color: var(--c-success);
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.5;
}
.form-success strong { display: block; font-size: 1.5rem; margin-bottom: .5rem; }
[hidden] { display: none !important; }

/* ---------- Footer ---------- */
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    padding: 2rem 2.5rem;
    background: var(--c-text);
    color: var(--c-bg);
    /* dunkler Balken laeuft ueber den zentrierten Inhalt hinaus bis zum Fensterrand */
    box-shadow: 0 0 0 100vmax var(--c-text);
    clip-path: inset(0 -100vmax);
}
.footer-nav { display: flex; gap: 1.5rem; }
.footer-nav a {
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: var(--ls);
    text-transform: uppercase;
    text-decoration: none;
}
.footer-nav a:hover, .footer-nav a:focus-visible { text-decoration: underline; text-underline-offset: .25rem; }

/* ---------- Unterseiten ---------- */
.legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem 1.25rem;
}
.legal h1 { text-align: center; }
.legal-text { width: 100%; font-style: normal; font-size: 1rem; line-height: 1.5; color: var(--c-black); text-align: center; }
.legal-text p + p { margin-top: 1.5em; }
.legal-text a { color: inherit; text-underline-offset: .15em; }
.legal-text.left { text-align: left; }
.legal-text.left h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: 0; margin: 2rem 0 .75rem; max-width: none; text-align: left; color: var(--c-text); }
.legal-text.left h3 { font-size: 1.125rem; font-weight: 700; margin: 1.25rem 0 .5rem; color: var(--c-text); }
.legal-text.left h2:first-child { margin-top: 0; }
.legal-text.left p + p, .legal-text.left ul + p, .legal-text.left p + ul { margin-top: .75em; }
.legal-text.left ul { margin: 0; padding-left: 1.5rem; }
.legal-text.left a { word-break: break-word; }
@media (min-width: 768px) {
    .legal { padding: 3rem 2.5rem 4rem; }
    .legal-text { font-size: 1.125rem; }
    .legal-text.left h3 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cards-track { transition: none; }
}