/* werkatlas.de · Linie v2 „Werkstatt“ (freigegeben 15.10.2026)
   Baut auf werkatlas.css (Gestaltungssystem: Farben, Schriften, Bausteine) auf
   und übersetzt die Seitenbausteine des Generators in die neue Linie. */

body{font-size:17px}
a{color:var(--tinte);text-decoration-color:var(--messing);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--messing);outline-offset:3px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:10;background:rgba(245,243,238,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--tinte)}
.kopf .innen{max-width:var(--breite);margin:0 auto;padding:18px var(--rand);display:flex;justify-content:space-between;align-items:center;gap:24px}
.kopf .logo img{height:30px;width:auto;display:block}
.kopf nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.kopf nav a{text-decoration:none;font:500 14px/1 var(--sans);letter-spacing:.02em;padding:6px 0;border-bottom:1px solid transparent}
.kopf nav a:hover{border-bottom-color:var(--tinte)}
.kopf nav a[aria-current]{border-bottom-color:var(--messing)}
.kopf nav a.nav-knopf{background:var(--tinte);color:var(--papier);padding:11px 16px;border:0}
.kopf nav a.nav-knopf:hover{background:#3a3833}
.menue{display:none}

main{max-width:var(--breite);margin:0 auto;padding:0 var(--rand) var(--s7)}

/* Überschriften der Inhaltsseiten */
h1,h2,h3{color:var(--tinte)}
main h1{font:650 clamp(38px,5.4vw,72px)/1.02 var(--kraeftig);font-stretch:96%;letter-spacing:-.022em;margin:0 0 var(--s3)}
main h1 em,main h2 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:0;font-size:1.1em}
main h2{font:650 clamp(26px,3vw,38px)/1.08 var(--kraeftig);font-stretch:96%;letter-spacing:-.015em;margin:var(--s7) 0 var(--s3);padding-top:var(--s3);border-top:1px solid var(--tinte)}
main h3{font:600 18px/1.3 var(--sans);margin:0 0 6px}
.kicker{font:500 12px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--messing-text);margin:0 0 var(--s2)}
.lead{font:300 clamp(18px,1.6vw,22px)/1.5 var(--sans);color:var(--tinte);max-width:36em}
.note{font-size:13.5px;line-height:1.5;color:var(--grau)}

/* Hero (Start- und Produktseiten) */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:0;border-bottom:1px solid var(--linie);margin:0 calc(var(--rand) * -1);padding:0}
.hero > div:first-child{padding:var(--s7) var(--rand) var(--s6);border-right:0;display:flex;flex-direction:column;justify-content:center}
.hero .pages,.hero .bild{padding:var(--s5) var(--rand);background:var(--stein);align-content:center}
.hero .bild{padding:0;margin:0;position:relative;min-height:440px}
.hero .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 16px;background:rgba(245,243,238,.93);font-size:12px;color:var(--grau)}

/* Mappen-Seiten und Bilder */
.pages{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pages.vier{grid-template-columns:repeat(4,1fr);margin:var(--s3) 0}
.pages img,.gewerke img,.formulare img{width:100%;height:auto;display:block;border:1px solid var(--linie);background:var(--weiss);box-shadow:0 14px 30px -22px rgba(28,27,25,.55)}

/* Karten → Raster mit Linien statt Kästen */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--tinte)}
.cards.zwei{grid-template-columns:repeat(2,1fr)}
.cards article{padding:var(--s3) var(--s3) var(--s4) 0;border-right:1px solid var(--linie);padding-left:var(--s3)}
.cards article:first-child{padding-left:0}
.cards article:last-child{border-right:0}
.cards article p{margin:0;color:var(--grau);font-size:15.5px}
.cards article h3 .nr,.cards .nr{font:400 italic 22px/1 var(--serif);color:var(--messing-text);display:block;margin-bottom:10px}
main h2 + .cards{border-top:0}
/* 17.10.: Raster mit mehreren Reihen – Striche und Einzug je Reihe statt nur für das erste/letzte Feld */
.cards article:nth-child(3n+1){padding-left:0}
.cards article:nth-child(3n){border-right:0}
.cards article:nth-child(n+4){border-top:1px solid var(--linie)}
.cards.zwei article{padding-left:var(--s3);border-right:1px solid var(--linie);border-top:0}
.cards.zwei article:nth-child(odd){padding-left:0}
.cards.zwei article:nth-child(even){border-right:0}
.cards.zwei article:nth-child(n+3){border-top:1px solid var(--linie)}

.gewerke{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}
.gewerke.formkarten{grid-template-columns:repeat(5,1fr);gap:var(--s2);margin:var(--s4) 0} /* 17.10.: Formular-Vorschau gleich groß, Querformat eingepasst */
.formkarten img{aspect-ratio:707/1000;object-fit:contain}
.karte{text-decoration:none;font:500 15px/1.3 var(--sans)}
.karte span{display:block;margin-top:12px;padding-top:8px;border-top:1px solid var(--tinte)}
.karte:hover span{border-top-color:var(--messing)}

.formulare{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--s4);align-items:start}
.formulare figure{margin:0}
.formulare figcaption{margin-top:14px;font-size:15.5px}

/* Knöpfe (alte Klasse .btn = neuer Knopf) */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;margin:10px 10px 0 0;background:var(--tinte);color:var(--papier);font:500 15px/1 var(--sans);letter-spacing:.03em;text-decoration:none;border:1px solid var(--tinte);transition:background .2s,color .2s}
.btn::after{content:"";width:18px;height:1px;background:var(--messing);transition:width .2s}
.btn:hover{background:transparent;color:var(--tinte)}
.btn:hover::after{width:28px}
.btn.hell{background:transparent;color:var(--tinte)}
.btn.hell:hover{background:var(--tinte);color:var(--papier)}

/* Fließtext-Seiten */
article.text{max-width:780px;margin-inline:auto;padding-top:var(--s6)} /* 17.10.: Textspalte mittig statt links (Thomas: rechts leer) */
article.text h1{font-size:clamp(34px,4.4vw,56px)}
article.text li{margin-bottom:8px}
article.text ol,article.text ul{padding-left:1.2em}
article.text li::marker{color:var(--messing-text)}

/* Startseite: Bausteine */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--tinte);margin:0 calc(var(--rand) * -1)}
.fakten > div{padding:var(--s3) var(--rand) var(--s4);border-right:1px solid var(--linie)}
.fakten > div:last-child{border-right:0}
.fakten b{display:block;font:400 clamp(40px,4.4vw,60px)/1 var(--kraeftig);font-weight:600;font-stretch:92%;letter-spacing:-.02em}
.fakten b small{font-size:.42em;color:var(--messing);font-weight:500;margin-left:2px}
.fakten span{display:block;margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--grau)}
.angebote{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--tinte)}
.angebote > a{display:flex;flex-direction:column;gap:12px;padding:var(--s4) var(--s3) var(--s4);border-right:1px solid var(--linie);text-decoration:none}
.angebote > a:first-child{padding-left:0}
.angebote > a:last-child{border-right:0}
.angebote .nr{font:400 italic 22px/1 var(--serif);color:var(--messing-text)}
.angebote h3{font:650 26px/1.1 var(--kraeftig);font-stretch:96%;letter-spacing:-.01em;margin:0}
.angebote p{margin:0;color:var(--grau);font-size:15.5px}
.angebote .preis{margin-top:auto;padding-top:var(--s2);font:500 15px/1.2 var(--sans);color:var(--tinte)}
.angebote > a:hover h3{text-decoration:underline;text-decoration-color:var(--messing);text-underline-offset:5px}
.ich{display:grid;grid-template-columns:5fr 7fr;gap:var(--s5);align-items:start}
.ich .zitat{font:400 italic clamp(28px,3vw,40px)/1.15 var(--serif);margin:0}

/* Fuß */
.fuss{background:var(--stein);color:var(--tinte);margin-top:var(--s7);border-top:1px solid var(--tinte)}
.fuss .innen{max-width:var(--breite);margin:0 auto;padding:var(--s6) var(--rand) var(--s4);display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s5)}
.fuss img{height:28px;width:auto}
.fuss p,.fuss a{color:var(--grau);font-size:14px;text-decoration:none}
.fuss a:hover{color:var(--tinte)}
.fuss h4{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--messing-text);margin:0 0 14px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0 0 8px}
.fuss .unten{max-width:var(--breite);margin:0 auto;padding:var(--s2) var(--rand) var(--s3);border-top:1px solid var(--linie);font-size:12.5px;color:var(--grau)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero > div:first-child{border-right:0;border-bottom:1px solid var(--tinte);padding:var(--s6) var(--rand) var(--s5)}
  .hero .bild{min-height:300px}
  .pages.vier{grid-template-columns:repeat(2,1fr)}
  .cards,.cards.zwei,.angebote{grid-template-columns:1fr}
  .cards article,.angebote > a{padding-left:0!important;padding-right:0;border-right:0!important;border-top:0!important;border-bottom:1px solid var(--linie)}
  .gewerke,.gewerke.formkarten{grid-template-columns:repeat(2,1fr)}
  .formulare{grid-template-columns:1fr}
  .fakten{grid-template-columns:repeat(2,1fr)}
  .fakten > div:nth-child(2){border-right:0}
  .fakten > div:nth-child(-n+2){border-bottom:1px solid var(--linie)}
  .ich{grid-template-columns:1fr}
  .fuss .innen{grid-template-columns:1fr}
  .kopf nav{display:none}
  .kopf nav.offen{display:flex;flex-direction:column;align-items:flex-start;position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--tinte);padding:var(--s3) var(--rand);gap:18px}
  .menue{display:block;background:none;border:1px solid var(--tinte);font:500 14px/1 var(--sans);padding:10px 14px;color:var(--tinte)}
}
/* 17.10.: Abschluss Gewerk-Seiten, Weitere Gewerke (5), Kontakt */
.gewerke.fuenf{grid-template-columns:repeat(5,1fr)}
.abschluss{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-top:var(--s6);padding:var(--s5);background:var(--stein)}
.abschluss h2{margin:0 0 8px;border-top:0;padding-top:0}
.abschluss > p{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.abschluss p{margin:0}
.cards article h3 a{text-decoration:none}
.cards article h3 a:hover{color:var(--messing-text)}
.cards article p.kontakt-mail{font:650 clamp(22px,2.4vw,30px)/1.2 "Archivo",sans-serif;margin:6px 0 18px}
.cards article p.knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.kontakt-mail a{text-decoration:none;color:var(--tinte)}
@media (max-width:900px){.gewerke.fuenf{grid-template-columns:repeat(2,1fr)}.abschluss{flex-direction:column;align-items:flex-start}}
/* 17.10.: Einblenden beim Scrollen – nur wenn JS läuft (Klasse reveal-an), Elemente im ersten Bild sofort sichtbar */
.reveal-an main .pages img,.reveal-an main .gewerke .karte,.reveal-an main figure,.reveal-an main .cards article,.reveal-an main .abschluss,.reveal-an main .angebote > a{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal-an main .sichtbar{opacity:1!important;transform:none!important}
/* 17.10.: Verkaufsseiten – auch Abschnitts-Überschriften und Listen einblenden */
.reveal-an .verkauf main > h2,.reveal-an .verkauf main > ul,.reveal-an .verkauf main > ol,.reveal-an .verkauf main > p,.reveal-an .verkauf main .text > h2,.reveal-an .verkauf main .text > ul{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}