/* Unsichtware – Firmenseite. Gleiche Familie wie die Tresentafel-Seite (DESIGN.md dort):
   Papier, Tinte, ein Signalrot. Grotesk + Festbreite. Keine Rundungen, keine Schatten. */

@font-face{font-family:"DM Sans";src:url(schriften/dm-sans-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(schriften/dm-sans-700.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --papier:#fafaf7;--tinte:#111;--rot:#d7261e;--grau:#6e6e6a;--hellgrau:#858580;--linie:#d9d8d2;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.rahmen{width:min(1040px,100% - 48px);margin-inline:auto}
.etikett,.nummer,.preis,.regeln span,.entwurf,.fuss{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}

.entwurf{background:var(--tinte);color:#fff;padding:8px 24px;text-align:center}
.entwurf span{background:var(--rot);padding:1px 6px;margin-right:10px}

.kopf{border-bottom:1px solid var(--tinte)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.marke{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.marke img{width:28px;height:28px;flex:none}
.punkt{color:var(--rot);margin-left:-10px}
.kopf nav{display:flex;gap:28px;font-size:15px}
.kopf nav a{text-decoration:none}
.kopf nav a:hover{text-decoration:underline;text-underline-offset:4px}

.auftakt{padding:72px 0 96px}
.etikett{color:var(--grau);margin-bottom:24px}
h1{font-size:clamp(40px,6.6vw,88px);font-weight:700;letter-spacing:-.035em;line-height:.98;max-width:14ch}
.grau{color:var(--hellgrau)}
.einleitung{font-size:20px;line-height:1.5;max-width:34em;margin-top:40px;padding-top:24px;border-top:1px solid var(--tinte)}

.abschnitt{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 48px;border-top:1px solid var(--tinte);padding:22px 0 72px}
.nummer{color:var(--grau);padding-top:6px}

.produkte{list-style:none;margin:0;padding:0}
.produkte li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) 9.5em;gap:6px 32px;align-items:baseline;padding:0 0 22px}
.produkte li+li{border-top:1px solid var(--linie);padding-top:22px}
.produkte h2{font-size:30px;letter-spacing:-.03em;line-height:1.05;grid-row:span 2}
.produkte p{color:#333}
.produkte .preis{grid-column:2;color:var(--grau)}
.produkte .link{grid-column:3;grid-row:1}
/* Status statt Link, solange die Produktseite noch nicht online ist */
.produkte .status{grid-column:3;grid-row:1;justify-self:end;align-self:start;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--tinte);border:1px solid var(--tinte);padding:3px 8px;white-space:nowrap}
.leer h2,.leer p{color:var(--hellgrau)}
/* Aufnahmen aus der Musterinstanz „Gasthof Muster“ */
.produkt-bilder{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);gap:16px;margin-top:22px;align-items:start}
.produkt-bilder figure{margin:0;border:1px solid var(--tinte);background:#fff}
.produkt-bilder img{display:block;width:100%;height:auto}
/* gleiche Höhe: das hochformatige Backoffice wird oben bündig auf die Höhe der Webseite zugeschnitten */
.produkt-bilder figure:last-child img{aspect-ratio:.99;object-fit:cover;object-position:top left}
.produkt-bilder figcaption{border-top:1px solid var(--tinte);padding:8px 12px;font-family:var(--mono);font-size:12px;color:var(--grau);background:var(--papier)}
.link{font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;white-space:nowrap}
.link::after{content:" →"}
.link:hover{color:var(--rot)}

.regeln{list-style:none;margin:0;padding:0}
.regeln li{display:grid;grid-template-columns:48px 1fr;padding:14px 0;border-bottom:1px solid var(--linie);color:#333}
.regeln li:first-child{padding-top:4px}
.regeln span{color:var(--grau);grid-row:span 2;padding-top:3px}
.regeln b{color:var(--tinte);display:block}

.kontakt{font-size:20px;color:var(--grau)}

.fuss{border-top:1px solid var(--tinte);padding:24px 0 40px;color:var(--grau)}
.fuss-innen{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fuss nav{display:flex;gap:22px}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}

/* Rechtsseiten */
.recht{padding:48px 0 80px;max-width:760px;margin-left:max(24px,calc((100% - 1040px)/2))}
.recht h1{font-size:clamp(34px,5vw,56px);margin:10px 0 28px}
.recht h2{font-size:19px;letter-spacing:-.01em;margin:34px 0 8px;padding-top:16px;border-top:1px solid var(--linie)}
.recht p{margin:0 0 12px;color:#333}
.recht a{color:var(--tinte)}
.einleitung-klein{font-size:18px;border-top:1px solid var(--tinte);padding-top:16px}
.fehlt{background:#ffe9e6;color:var(--rot);padding:0 4px}

@media (max-width:720px){
  body{font-size:16px}
  .rahmen{width:calc(100% - 32px)}
  .kopf-innen{height:58px}
  .recht{margin-left:16px;padding-top:32px}
  .kopf nav{gap:18px;font-size:14px}
  .auftakt{padding:44px 0 64px}
  .einleitung{font-size:17.5px;margin-top:28px}
  .abschnitt{grid-template-columns:1fr;padding-bottom:56px}
  .nummer{padding:0 0 16px}
  .produkte li{grid-template-columns:1fr}
  .produkte h2{grid-row:auto;font-size:26px}
  .produkte .preis,.produkte .link{grid-column:1;grid-row:auto}
  .produkte .link{margin-top:6px}
  .produkt-bilder{grid-template-columns:1fr}
  .produkte .status{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .produkt-bilder figure:last-child img{aspect-ratio:auto}
}