/* Die Werkstatt (/leistungen): Aufbau wie die Rechtsseiten (rechtliches.css: Schriften, Kopfzeile, Folie, Fußzeile), dazu drei Abschnittsgruppen
   mit je einem seitenfüllenden Werkstatt-Bild als festem Hintergrund. Die drei Bilder liegen als Ebenen in einem festen Behälter hinter dem
   Inhalt (background-attachment: fixed auf dem Desktop, scroll bis 700 px wie auf den Rechtsseiten – die Ebene selbst steht fest);
   werkstatt.js schaltet beim Scrollen in die nächste Gruppe die Ebene um (Überblendung 400 ms, keine bei reduced motion). Ohne Skript
   bleibt das erste Bild stehen. Lesefläche wie die Rechtsseiten (rechtliches.css: dunkle Folie 0,62 ohne Weichzeichner, Spalte 640 px,
   innen 36 px, helle Schrift); Kontrast je Werkstatt-Bild geprüft (alle über 7:1, keine Anhebung auf 0,70 nötig). Abstände auf dem
   8-px-Raster, alle Texte vollständig. */
body.werkstatt::before{content:none}
/* Grundfarbe hinter den Bildern = mittlerer Ton der drei Werkstatt-Bilder (#8e7465): sichtbar nur, bevor ein Bild geladen ist; zugleich die
   Farbe, gegen die Prüfwerkzeuge (axe/Lighthouse) die Lese-Folie verrechnen, weil sie das Bild nicht sehen (dunkle Folie darüber: 9,4:1 zum Text). */
body.werkstatt{background:#8e7465}
.werkstatt-bilder{position:fixed;inset:0;z-index:-1;background:#8e7465}
.werkstatt-bild{position:absolute;inset:0;background-color:#8e7465;background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;opacity:0;transition:opacity .4s ease}
.werkstatt-bild.aktiv{opacity:1}
.werkstatt-bild--halle{background-image:url(/werkstatt-halle.webp)}
.werkstatt-bild--oben{background-image:url(/werkstatt-oben.webp)}
.werkstatt-bild--nah{background-image:url(/werkstatt-nah.webp)}
.werkstatt-inhalt{display:block}
.gruppe{max-width:640px;margin:64px auto;padding:0 36px;overflow-wrap:anywhere}
.gruppe + .gruppe{margin-top:96px}
.gruppe h1{margin:0 0 20px}
.einleitung{font-size:20px;line-height:1.5;margin:0}
.gruppe section{margin-top:64px;scroll-margin-top:24px}
.gruppe section:first-child{margin-top:0}
.gruppe section:focus{outline:none}
.kennung{font-family:"Inter","Inter Ersatz",Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;letter-spacing:.12em;margin:0 0 10px;color:#d9c7ad}
.gruppe h2{margin:0 0 14px}.gruppe p{margin:0 0 14px}.gruppe p:last-child{margin-bottom:0}

.primaer{display:inline-block;margin-top:16px;height:48px;line-height:48px;padding:0 24px;background:#f3ead9;color:#1c1309;text-shadow:none;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px}
.primaer:focus-visible{outline:3px solid #fbf5ea;outline-offset:3px}
/* Kontaktformular wie bisher auf der Startseite: Felder 48 px hoch, 16 px Schrift, Textfeld 112 px, Button in Feldhöhe. */
.contact-section form{display:grid;gap:8px;margin-top:16px}
.contact-section label{font-size:15px;line-height:1.6;justify-self:start}
.contact-section input:not([type="checkbox"]),.contact-section textarea{display:block;width:100%;height:48px;padding:0 16px;border:1px solid rgba(28,19,12,.4);background:#fbf5ea;color:#1c2328;text-shadow:none;font:inherit;font-size:16px;line-height:1.4;border-radius:8px}
.contact-section textarea{resize:vertical;height:112px;min-height:48px;padding:8px 16px}
.contact-section :is(input,textarea,button):focus-visible{outline:3px solid #fbf5ea;outline-offset:3px}
.contact-section button{justify-self:start;height:48px;padding:0 24px;font:inherit;font-size:16px;font-weight:600;background:#f3ead9;color:#1c1309;text-shadow:none;border:1px solid #f3ead9;border-radius:8px;cursor:pointer}
/* Hinweiszeile über dem Formular (nur bei ?fehler=1 sichtbar, werkstatt.js): dieselbe Buchstaben-Folie wie der übrige Text, dazu ein heller Rand als Signal. */
.hinweis{margin:16px 0 0}.hinweis .wort{outline:2px solid #f3ead9;outline-offset:-1px;font-weight:600}
.consent{display:flex;align-items:flex-start;gap:8px;margin:8px 0 8px .45em}.consent span{background:rgba(28,19,12,.72);padding:.14em .45em;border-radius:6px}.consent input{margin-top:4px;flex:0 0 auto;width:16px;height:16px}.honeypot{display:none!important}
@media(max-width:700px){
.werkstatt-bild{background-attachment:scroll}
/* Mobil-Varianten (mittlere 50 % der Breite, aus den Originalen gerechnet): bis 700 px zeigt cover/center nie mehr als die mittlere Hälfte. */
.werkstatt-bild--halle{background-image:url(/werkstatt-halle-mobil.webp)}
.werkstatt-bild--oben{background-image:url(/werkstatt-oben-mobil.webp)}
.werkstatt-bild--nah{background-image:url(/werkstatt-nah-mobil.webp)}
.gruppe{margin:64px 16px;padding:0 8px}
.gruppe + .gruppe{margin-top:64px}
.gruppe section{margin-top:48px}
.einleitung{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.werkstatt-bild{transition:none}}