/* ============================================================
   SALT030 - Stylesheet
   Gestaltungsidee: technisches Datenblatt / Style Sheet der
   Textilproduktion. Keine Akzentfarbe, keine Karten, keine
   Trennlinien-Deko, kein Radius ueber 2px, nichts zentriert.
   Gliederung durch Flaechenwechsel, Nummern und Weissraum.
   Fonts: Archivo (Headlines, Labels) + Inter (Fliesstext),
   beide lokal. Kein CDN, keine Drittanbieter.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* -- Design Tokens ------------------------------------------- */
:root {
    --ink:        #0C0F1A;
    --ink-soft:   #161B2B;
    --paper:      #FFFFFF;
    --raw:        #EDE9E1;   /* ungefaerbte Baumwolle */
    --text:       #0C0F1A;
    --text-body:  #4A5060;
    --muted:      #767E8E;   /* nur dekorativ, nicht fuer Fliesstext (Kontrast) */
    --rule:       #C9C3B8;   /* Nahtfarbe auf hellem Grund */
    --container:  1080px;
}

/* -- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-body);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
ol, ul { list-style: none; }

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* -- Layout -------------------------------------------------- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 5%;
}

/* -- Typografie ---------------------------------------------- */
h1, h2, h3 {
    font-family: 'Archivo', 'Inter', sans-serif;
    color: var(--text);
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem);   font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 750; line-height: 1.1;  letter-spacing: -0.03em; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
p  { line-height: 1.7; }

/* Kleinlabel: versal, stark gesperrt */
.label {
    font-family: 'Archivo', sans-serif;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-body);
}

/* ============================================================
   HERO (dunkel, linksbuendig)
   ============================================================ */
.hero {
    background: linear-gradient(170deg, var(--ink) 60%, var(--ink-soft) 100%);
    color: #FFFFFF;
    padding: 56px 0 0;
}
.hero a { color: #FFFFFF; }
.hero-logo {
    width: clamp(150px, 18vw, 220px);
    height: auto;
    margin-bottom: clamp(64px, 9vw, 112px);
}
.hero h1 {
    color: #FFFFFF;
    max-width: 15ch;
    margin-bottom: 28px;
}
.hero-sub {
    color: #C7CCDA;
    font-size: 1.05rem;
    max-width: 46ch;
    margin-bottom: 44px;
}
.cta-link {
    display: inline-block;
    font-family: 'Archivo', sans-serif;
    font-weight: 650;
    font-size: 1rem;
    text-underline-offset: 6px;
}
.hero-bottom { padding-bottom: 104px; }

/* ============================================================
   SEKTIONEN
   ============================================================ */
.section { padding: 88px 0; }
.section--raw { background: var(--raw); }
.section .label { margin-bottom: 14px; }
.section-intro {
    max-width: 62ch;
    margin: 20px 0 64px;
}

/* -- Was wir machen: 4 Spalten, gegliedert nur durch die Nummern
   01 bis 04 (tatsaechliche Produktionsreihenfolge) und Weissraum. */
.schritte {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 60px;
}
/* Subgrid: Nummer, Ueberschrift und Absatz liegen spaltenuebergreifend
   in derselben Rasterzeile, egal wie lang die Ueberschrift umbricht.
   Abstaende kommen von den margins der Kinder, nicht von row-gap
   (row-gap wuerde die Subgrid-Zeilen auseinanderreissen). */
.schritt {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
}
.schritt-nr {
    font-family: 'Archivo', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--text-body);
    display: block;
    margin-bottom: 18px;
}
.schritt h3 { margin-bottom: 12px; }
.schritt p { font-size: 0.92rem; }

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 72px;
    align-items: start;
    margin-top: 56px;
}

/* Linke Spalte: wie ein Versandetikett gesetzt */
.kontakt-etikett .label { margin-bottom: 8px; }
.kontakt-etikett address {
    font-style: normal;
    color: var(--text);
    margin-bottom: 32px;
}
.kontakt-etikett .etikett-mail { margin-bottom: 32px; }
.kontakt-hinweis-text { font-size: 0.92rem; max-width: 34ch; }

/* Formular: Papierformular, Felder nur unten unterstrichen */
.form-feld { margin-bottom: 30px; }
.form-feld label {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-body);
    margin-bottom: 6px;
}
.form-feld input,
.form-feld textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    padding: 8px 0 10px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
}
.form-feld input:focus,
.form-feld textarea:focus {
    outline: none;
    border-bottom-color: var(--ink);
    border-bottom-width: 2px;
    padding-bottom: 9px;
}
.form-feld textarea { resize: vertical; min-height: 110px; }
.form-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

/* Honeypot: fuer Menschen unsichtbar */
.hp-feld {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Absenden: der einzige massive Farbblock der Seite */
.btn-submit {
    width: 100%;
    background: var(--ink);
    color: #FFFFFF;
    border: none;
    border-radius: 2px;
    padding: 16px;
    font-family: 'Archivo', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.btn-submit:hover { background: var(--ink-soft); }
.btn-submit:disabled { opacity: 0.55; cursor: default; }

.form-einwilligung {
    font-size: 0.8rem;
    color: var(--text-body);
    margin-top: 14px;
    line-height: 1.55;
}

/* Statusmeldungen: per JS oder per URL-Fragment (:target) sichtbar */
.form-status { display: none; border-radius: 2px; padding: 14px 16px; margin-bottom: 28px; font-size: 0.93rem; }
.form-status:target, .form-status.sichtbar { display: block; }
.form-status--ok { background: #DCE9DD; color: #1C4A26; }
.form-status--fehler { background: #F0DBD8; color: #6E211A; }
.form-status--fehler a { color: inherit; }

/* ============================================================
   FOOTER (Beleg-Element: Rechtslinks + Firmenangaben)
   Haarlinie oben als schlichte Konvention, keine Deko.
   ============================================================ */
.site-footer {
    border-top: 1px solid var(--rule);
    padding: 30px 0 36px;
    font-size: 0.88rem;
}
.footer-inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 40px;
    flex-wrap: wrap;
}
.footer-firma { color: var(--text-body); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: var(--text-body); }
.footer-bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 40px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: var(--text-body);
}
.footer-bottom a { color: var(--text-body); }

/* ============================================================
   HINWEIS-STREIFEN (kein Cookie-Banner, nur Information)
   ============================================================ */
.hinweis-streifen {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--ink);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 5%;
    font-size: 0.85rem;
}
/* Autoren-display schlaegt das UA-Stylesheet: [hidden] explizit durchsetzen */
.hinweis-streifen[hidden] { display: none; }
.hinweis-streifen p { margin: 0; }
.hinweis-streifen a { color: #FFFFFF; }
.hinweis-btn {
    background: #FFFFFF;
    color: var(--ink);
    border: none;
    border-radius: 2px;
    padding: 7px 18px;
    font-size: 0.8rem;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
}
.hinweis-btn:hover { background: var(--raw); }

/* ============================================================
   UNTERSEITEN: .page-hero + .legal
   (Impressum, Datenschutz, AGB brauchen kein eigenes CSS.)
   ============================================================ */
.page-hero {
    background: var(--raw);
    padding: 48px 0 40px;
}
.page-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.page-hero-back {
    font-size: 0.85rem;
    margin-bottom: 28px;
}
.page-hero-back a { color: var(--text-body); }
.page-hero p:not(.page-hero-back) { color: var(--text-body); margin-top: 12px; max-width: 62ch; }

.legal-section { background: var(--paper); }
/* .legal uebernimmt die Container-Geometrie (das Markup ist
   <div class="container legal">, .legal gewinnt die Kaskade).
   Die Lesebreite von 760px liegt an den Kindelementen, damit die
   linke Textkante exakt unter h1 und Footer steht. */
.legal {
    max-width: var(--container);
    margin-inline: auto;
    padding: 56px 5% 96px;
}
.legal > * { max-width: 760px; }
.legal > table { max-width: none; }
.legal h1 { font-size: 1.9rem; margin-bottom: 24px; }
.legal h2 { font-size: 1.25rem; margin: 44px 0 14px; }
.legal h3 { font-size: 1.02rem; margin: 28px 0 10px; }
.legal p  { margin-bottom: 16px; font-size: 0.95rem; }
.legal ul, .legal ol { margin: 0 0 16px 22px; font-size: 0.95rem; list-style: revert; }
.legal li { margin-bottom: 6px; }
.legal table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.legal th, .legal td {
    border-bottom: 1px solid var(--rule);
    padding: 10px 12px 10px 0;
    text-align: left;
    vertical-align: top;
}
.legal th {
    font-family: 'Archivo', sans-serif;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-body);
    border-bottom: 2px solid var(--text);
}
.legal a { word-break: break-word; }
.legal address { font-style: normal; margin-bottom: 16px; }
.legal strong { color: var(--text); }

/* ============================================================
   RESPONSIVE
   Kacheln bewusst gestaffelt: 4 Spalten ab 900px,
   2 Spalten ab 560px, darunter 1. Kein auto-fit.
   ============================================================ */
@media (max-width: 900px) {
    /* Kein row-gap: der wuerde auch zwischen die Subgrid-Zeilen fahren.
       Reihenabstand stattdessen als padding-bottom der ersten Reihe. */
    .schritte { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
    .schritt:nth-child(-n+2) { padding-bottom: 48px; }
}
@media (max-width: 560px) {
    .schritte { grid-template-columns: 1fr; }
    .schritt:nth-child(-n+2) { padding-bottom: 0; }
    .schritt + .schritt { padding-top: 40px; }
}
@media (max-width: 760px) {
    .hero { padding-top: 40px; }
    .hero-bottom { padding-bottom: 72px; }
    .section { padding: 64px 0; }
    .kontakt-grid { grid-template-columns: 1fr; gap: 48px; }
    .form-zeile { grid-template-columns: 1fr; gap: 0; }
    .footer-inner, .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}