/* Fugenwerk · Prototyp Fliesenleger Bruchsal
   Richtung „Musterbad hell“ mit Messing und Mono-Maßen (Stilblatt 10.10.2026, Wahl Jan) */

@font-face{font-family:"Familjen Grotesk";src:url(fonts/familjen-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(fonts/familjen-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* Farbrollen */
  --papier:#F6F4F0;      /* Kalkweiß */
  --stein:#E4DFD7;       /* Kalkstein, zweite Fläche */
  --tinte:#1D1F1E;
  --neben:#55585A;
  --messing:#C2A56B;     /* Signal: Flächen, Knöpfe, auf dunkel */
  --messing-text:#6E5524;/* Signal als Schrift auf hell, 6,4:1 */
  --schiefer:#1D1F1E;    /* das eine dunkle Kapitel */
  --schiefer-text:#ECE8E1;
  --schiefer-neben:#B3AEA5;
  --fuge:rgba(29,31,30,.12);

  /* Schrift */
  --kopf:"Familjen Grotesk",system-ui,sans-serif;
  --text:"Public Sans",system-ui,sans-serif;
  --mass:"IBM Plex Mono",ui-monospace,monospace;

  /* Größenleiter, Faktor ≥ 1,4 je Stufe */
  --s-text:1.0625rem;
  --s-h3:1.5rem;
  --s-h2:clamp(2.1rem,3.2vw,3rem);
  --s-h1:clamp(2.95rem,4.6vw,4.4rem);

  /* zwei Sektionsabstände, sonst keine */
  --abst:clamp(4rem,8vw,6.5rem);
  --abst-k:clamp(2.2rem,4vw,3.25rem);
  --rand:clamp(1rem,4vw,3.5rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--papier);scroll-behavior:smooth}
body{background:var(--papier);color:var(--tinte);font:400 var(--s-text)/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
.rand{padding-inline:var(--rand)}
.abschnitt{padding-block:var(--abst)}

/* Etikett mit Fugenstrich */
.etikett{display:flex;align-items:center;gap:.75rem;font:500 .8rem/1 var(--mass);letter-spacing:.1em;text-transform:uppercase;color:var(--messing-text)}
.etikett::before{content:"";width:2.2rem;height:3px;background:var(--messing)}

h1,h2,h3{font-family:var(--kopf);font-weight:600;letter-spacing:-.02em}
h2{font-size:var(--s-h2);line-height:1.05;max-width:18ch;margin:1.2rem 0 var(--abst-k)}
h3{font-size:var(--s-h3);line-height:1.15}

/* Knöpfe: Versal, 1,5 px Kante, ohne Rundung */
.knopf{display:inline-block;padding:1rem 1.6rem;font:600 .82rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--messing);background:var(--messing);color:var(--tinte);cursor:pointer;transition:background .2s,border-color .2s}
.knopf:hover{background:#D3BA86;border-color:#D3BA86}
.knopf.leise{background:transparent;border-color:var(--tinte)}
.knopf.leise:hover{background:var(--tinte);color:var(--papier)}
.knopf:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--messing-text);outline-offset:3px}

/* Maße in Monoschrift */
.masse{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font:400 .85rem/1.3 var(--mass);color:var(--neben)}

/* Kopfleiste: Zeichen aus vier Fliesen, eine in Messing */
.leiste{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:2rem;height:4.5rem;background:var(--papier);border-bottom:1px solid var(--fuge)}
.marke{display:flex;align-items:center;gap:.8rem;text-decoration:none;font:600 1.6rem/1 var(--kopf);letter-spacing:-.02em}
.zeichen{display:grid;grid-template-columns:repeat(2,.78rem);gap:3px}
.zeichen i{width:.78rem;height:.78rem;background:var(--tinte)}
.zeichen i:nth-child(2){background:var(--messing)}
.leiste nav{display:flex;gap:1.8rem;font-size:.95rem}
.leiste nav a{text-decoration:none;color:var(--neben)}
.leiste nav a:hover{color:var(--tinte)}
.leiste .knopf{padding:.8rem 1.2rem}

/* Kopf */
.kopf{display:grid;grid-template-columns:1.05fr 1fr;min-height:min(calc(100svh - 4.5rem),52rem)}
.kopf-text{display:flex;flex-direction:column;justify-content:center;padding-block:2.2rem;padding-right:3rem}
.kopf h1{font-size:var(--s-h1);line-height:1;max-width:14ch;margin:1.2rem 0 1.3rem}
.kopf .lead{max-width:34rem;color:var(--neben);font-size:1.15rem}
.knoepfe{display:flex;gap:1rem;flex-wrap:wrap;margin:2.2rem 0 1.8rem}
.knoepfe .knopf{text-align:center}
.kopf-bild{position:relative;margin-right:calc(-1*var(--rand))}
.kopf-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* Leistungen: das eine dunkle Kapitel */
.kapitel-dunkel{background:var(--schiefer);color:var(--schiefer-text);--fuge:rgba(236,232,225,.14)}
.kapitel-dunkel .etikett{color:var(--messing)}
.kapitel-dunkel h2{max-width:24ch}
.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--fuge);border:2px solid var(--fuge)}
.leistung{background:var(--schiefer);padding:2rem 1.6rem 2.4rem;display:flex;flex-direction:column;gap:.8rem}
.leistung h3{margin-top:.2rem}
.leistung p{color:var(--schiefer-neben);font-size:.98rem}
.leistung .masse{color:var(--messing);font-size:.8rem}

/* Arbeiten */
.arbeiten-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--fuge);border:2px solid var(--fuge)}
.arbeit{background:var(--papier);display:flex;flex-direction:column}
.arbeit img{width:100%;height:clamp(22rem,36vw,30rem);object-fit:cover}
.arbeit figcaption{padding:1rem 1.2rem 1.4rem;display:grid;gap:.35rem}
.arbeit figcaption b{font:600 1.05rem/1.3 var(--kopf)}

/* Ablauf */
.ablauf{background:var(--stein)}
.ablauf-bild{margin:0 0 var(--abst-k)}
.ablauf-bild img{width:100%;height:clamp(14rem,26vw,22rem);object-fit:cover;object-position:50% 38%}
.ablauf-bild figcaption{margin-top:.8rem}
.schritte{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--tinte)}
.schritt{padding:1.6rem 1.6rem 0 0;display:grid;gap:.7rem;align-content:start}
.schritt .wann{font:500 .85rem/1 var(--mass);color:var(--messing-text)}
.schritt p{color:var(--neben)}

/* Einsatzgebiet */
.gebiet{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.gebiet h2{margin-bottom:1.4rem}
.gebiet p{color:var(--neben);max-width:32rem}
.orte{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--fuge);border:2px solid var(--fuge)}
.orte li{background:var(--papier);padding:1rem 1.2rem;display:flex;justify-content:space-between;gap:1rem}
.orte li span{font:400 .8rem/1.6 var(--mass);color:var(--neben);white-space:nowrap}
.orte li.kern{background:var(--stein)}

/* Fragen */
.fragen{border-top:1px solid var(--fuge);display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:start}
.fragen h2{margin-bottom:0}
.fragen-liste{border-top:1px solid var(--fuge)}
.fragen details{border-bottom:1px solid var(--fuge)}
.fragen summary{list-style:none;cursor:pointer;padding:1.4rem 3rem 1.4rem 0;position:relative;font:600 1.2rem/1.35 var(--kopf)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:.2rem;top:1.2rem;font:400 1.5rem/1 var(--mass);color:var(--messing-text)}
.fragen details[open] summary::after{content:"–"}
.fragen details p{padding:0 0 1.6rem;color:var(--neben);max-width:44rem}

/* Aufmaß */
.aufmass{display:grid;grid-template-columns:1fr 1fr;gap:4rem;background:var(--stein)}
.aufmass p{color:var(--neben);max-width:30rem}
.aufmass .masse{margin-top:1.6rem}
form{display:grid;gap:1rem;align-content:start;background:var(--papier);padding:clamp(1.2rem,2.5vw,2rem)}
label{font-size:.85rem;font-weight:600}
input,select,textarea{width:100%;padding:.9rem 1rem;font:inherit;background:var(--papier);color:inherit;border:1.5px solid var(--tinte);border-radius:0;margin-top:.35rem}
textarea{min-height:7rem;resize:vertical}
.hinweis{font-size:.8rem;color:var(--neben)}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1rem);background:var(--tinte);color:var(--papier);padding:.9rem 1.3rem;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:20}
.toast.an{opacity:1;transform:translate(-50%,0)}

/* Fuß */
.fuss a{color:inherit}
.fuss{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem;padding-block:2rem;font-size:.85rem;color:var(--neben);border-top:1px solid var(--fuge)}
.fuss .marke{font-size:1.1rem;color:var(--tinte)}
.prototyp-fuss{display:flex;gap:1rem 2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:1.1rem var(--rand);font-size:.82rem;line-height:1.6;background:var(--schiefer);color:var(--schiefer-text)}
.prototyp-fuss b{font-weight:600}
.prototyp-fuss a{color:var(--messing);text-decoration:none;border-bottom:1px solid rgba(194,165,107,.45);padding-bottom:1px}

/* ein Auftakt, sonst Ruhe */
.js-bewegung .auftakt{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.js-bewegung .auftakt.da{opacity:1;transform:none}
.js-bewegung .auftakt:nth-child(2){transition-delay:.12s}
.js-bewegung .auftakt:nth-child(3){transition-delay:.24s}
.js-bewegung .auftakt:nth-child(4){transition-delay:.36s}
.js-bewegung .auftakt:nth-child(5){transition-delay:.48s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js-bewegung .auftakt{opacity:1;transform:none;transition:none}}

@media (max-width:1100px){
  .raster{grid-template-columns:1fr 1fr}
  .schritte{grid-template-columns:1fr 1fr;row-gap:2rem}
}
@media (max-width:800px){
  .leiste nav{display:none}
  .kopf{grid-template-columns:1fr;min-height:0}
  .kopf-text{padding-right:0;padding-block:2.5rem 2rem}
  .kopf-bild{margin-inline:calc(-1*var(--rand));aspect-ratio:4/3}
  .raster,.schritte,.orte{grid-template-columns:1fr}
  .arbeiten-raster{grid-template-columns:1fr}
  .arbeit img{height:auto;aspect-ratio:4/3}
  .gebiet,.aufmass,.fragen{grid-template-columns:1fr;gap:2rem}
  .knoepfe .knopf{flex:1 1 100%}
  .schritt{padding-right:0}
}
@media (max-width:480px){.leiste .knopf{padding:.7rem .85rem;font-size:.7rem;letter-spacing:.06em}.marke{font-size:1.35rem}}