/* Softwarehansl e.U. — Stylesheet
   Eine Schrift (Bricolage Grotesque, selbst gehostet). Drei Flächen: Ziegel, Papier, Tinte. */

@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --ziegel: #D56144; /* Terrakotta. Tinte darauf 4,6:1, Papier-hell 3,5:1 (nur für große Schrift) */
  --ziegel-dunkel: #B8401F;
  --papier: #F6EBDF;
  --papier-hell: #FBF5EE;
  --tinte: #231A16;
  --tinte-hell: #3A2C26;
  --grau: #6E5E57;
  --linie: rgba(35, 26, 22, 0.18);
  --stempel: #B8401F;

  --font: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 1180px;
  --ease: cubic-bezier(.2,.9,.3,1.1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.5;
  color: var(--tinte);
  background: var(--papier);
  font-feature-settings: "kern";
}
h1, h2, h3 { margin: 0; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; }
.ziegel :focus-visible, .tinte :focus-visible { outline-color: var(--papier); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ Kopf ============ */
.site-head { position: relative; z-index: 2; padding: 1.25rem 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.brand { display: inline-flex; line-height: 0; text-decoration: none; }
.brand svg { height: 44px; width: auto; }
.brand .hut { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s var(--ease); }
.brand:hover .hut { transform: rotate(-18deg) translate(-3px, -4px); }
.site-nav { display: flex; gap: clamp(.9rem, 2.5vw, 2rem); font-weight: 700; font-size: 1rem; }
.site-nav a { text-decoration: none; padding: .2em 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: currentColor; }

/* ============ Hero: Ziegel ============ */
.ziegel { background: var(--ziegel); color: var(--tinte); }
.ziegel .brand svg .wort { fill: var(--papier-hell); }
.ziegel .brand svg .hut-fill { fill: var(--tinte); }

.hero { position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 8vw, 7rem); }
/* Leichte Papierkörnung auf allen Ziegelflächen, auch unter dem Kopf, damit Kopf und Hero dieselbe Farbe haben */
.ziegel, .kontakt, .produkt-cta { position: relative; }
.ziegel::after, .kontakt::after, .produkt-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .wrap, .kontakt .wrap, .produkt-cta .wrap { position: relative; z-index: 1; }
.hero .servus {
  font-size: clamp(5rem, 22vw, 17rem); font-weight: 800; letter-spacing: -0.05em; line-height: .85;
  margin-left: -0.04em; color: var(--papier-hell);
}
.hero h1 {
  font-size: clamp(2rem, 1.1rem + 4.4vw, 4.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.28;
  max-width: 14ch; margin-top: clamp(1.25rem, 3vw, 2.25rem);
}
.hero .lead { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 500; max-width: 36ch; margin: 1.75rem 0 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; font-weight: 700; }
.hero-actions a:not(.button) { text-decoration: none; border-bottom: 2px solid currentColor; }

/* Der Hut, der auf das h fällt */
.mit-hut { position: relative; display: inline-block; }
.mit-hut .hut-svg {
  position: absolute; left: -0.12em; top: -0.3em; width: 0.72em; height: auto;
  color: var(--papier-hell); pointer-events: none;
  filter: drop-shadow(0 0 2px var(--ziegel)) drop-shadow(0 0 2px var(--ziegel)); /* Hof, damit der Hut nicht in die Zeile darüber beißt */
  animation: hutfall .9s var(--ease) .35s both;
}
@keyframes hutfall {
  0%   { transform: translateY(-1.4em) rotate(14deg); opacity: 0; }
  60%  { transform: translateY(.06em) rotate(-3deg); opacity: 1; }
  80%  { transform: translateY(-.03em) rotate(1deg); }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mit-hut .hut-svg { animation: none; } }

/* ============ Knöpfe ============ */
.button {
  display: inline-block; background: var(--tinte); color: var(--papier-hell);
  padding: .9em 1.5em; border-radius: 999px; font-weight: 700; line-height: 1.1; text-decoration: none;
  transition: transform .25s var(--ease), background .2s;
}
.button:hover { background: var(--tinte-hell); transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.tinte .button { background: var(--papier-hell); color: var(--tinte); }
.tinte .button:hover { background: #fff; }

/* ============ Abschnitte ============ */
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section-kopf { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-kopf h2 { font-size: clamp(2.4rem, 1.5rem + 4vw, 5rem); font-weight: 800; }
.section-kopf p { max-width: 48ch; font-size: 1.1em; color: var(--grau); }
@media (min-width: 860px) {
  .section-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
}

/* ============ Die Karte (Leistungen als Speisekarte) ============ */
.karte { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); }
.karte > li { border-bottom: 1px solid var(--linie); padding: 1.4rem 0 1.2rem; }
.gang-titel { margin: 0; font: inherit; letter-spacing: normal; text-wrap: wrap; }
.gang { width: 100%; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.gang .zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6em; }
.gang .name { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; flex: 0 1 auto; }
.gang .rest { flex: 1 1 9rem; display: flex; align-items: baseline; gap: .6em; }
.gang .punkte { flex: 1 1 2rem; border-bottom: 3px dotted var(--tinte); transform: translateY(-.35em); opacity: .55; min-width: 2rem; }
.gang .preis { font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.karte .kurz { margin: .5rem 0 0; max-width: 60ch; color: var(--tinte-hell); }
/* "Details zeigen / schließen" liegt außerhalb des Knopfs (der ist nur die Zeile mit Name und Preis) und ist ein zweites Klickziel.
   Welches der beiden Wörter zu sehen ist, hängt am data-offen des Eintrags. */
.karte .mehr { display: inline-flex; align-items: center; gap: .35em; margin-top: .6rem; font-weight: 700; font-size: .95rem; border-bottom: 2px solid var(--ziegel); cursor: pointer; transition: border-color .2s; }
.karte .mehr::before { content: "+"; display: inline-block; width: 1em; text-align: center; font-size: 1.25em; line-height: 1; color: var(--ziegel); transition: transform .3s var(--ease); }
.karte > li[data-offen="true"] .mehr::before { transform: rotate(45deg); }
.karte > li[data-offen="true"] .mehr-zu, .karte > li[data-offen="false"] .mehr-auf { display: none; }
.gang:hover .name, .gang:focus-visible .name { color: var(--ziegel-dunkel); }
.gang:hover .punkte { opacity: 1; }
.karte .mehr:hover { border-color: var(--tinte); }
@media (prefers-reduced-motion: reduce) { .karte .mehr::before { transition: none; } }

.details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
/* Zugeklappt auch für Screenreader weg (visibility), aber erst, wenn die Animation durch ist. */
.details > div { overflow: hidden; visibility: hidden; transition: visibility 0s .4s; }
.karte > li[data-offen="true"] .details { grid-template-rows: 1fr; }
.karte > li[data-offen="true"] .details > div { visibility: visible; transition-delay: 0s; }
.details .inhalt { display: grid; gap: 1.5rem 3rem; padding: .5rem 0 2rem; }
.details h4 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1; letter-spacing: -0.03em; }
.details ul { margin: 0; padding-left: 1.1em; }
.details li { margin: .3em 0; }
.details li::marker { color: var(--ziegel); }
@media (min-width: 760px) { .details .inhalt { grid-template-columns: 1fr 1fr 1fr; } }
.details .gang-link { grid-column: 1 / -1; margin: 0; }
.details .gang-link a { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--ziegel); }
.details .gang-link a:hover { border-color: var(--tinte); }
@media (prefers-reduced-motion: reduce) { .details, .details > div { transition: none; } }

.beilagen { margin-top: 3rem; }
.beilagen h3 { font-size: 1rem; font-weight: 700; color: var(--grau); margin-bottom: .75rem; }
.beilagen ul { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.beilagen li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6em; padding: .45rem 0; }
.beilagen .rest { flex: 1 1 8rem; display: flex; align-items: baseline; gap: .6em; }
.beilagen .punkte { flex: 1; min-width: 2rem; border-bottom: 2px dotted var(--tinte); transform: translateY(-.3em); opacity: .4; }
.beilagen .preis { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kleingedruckt { margin-top: 2rem; font-size: .9rem; color: var(--grau); max-width: 60ch; }

/* ============ Aus der Werkstatt (Produkte) ============ */
.tinte { background: var(--tinte); color: var(--papier); }
.tinte .section-kopf p { color: #CDBFB6; }
.werkstatt { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(246,235,223,.25); }
.werkstatt li { border-bottom: 1px solid rgba(246,235,223,.25); }
.werkstatt a {
  position: relative; display: grid; gap: .5rem 2rem; align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0; text-decoration: none; color: inherit;
}
.werkstatt .name { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); hyphens: manual; font-weight: 800; letter-spacing: -0.035em; line-height: .95; transition: transform .3s var(--ease); }
.werkstatt a:hover .name { transform: translateX(.15em); color: #FFB89A; }
.werkstatt .kurz { max-width: 44ch; color: #E7DCD3; }
.werkstatt .pfeil { font-weight: 700; color: #FFB89A; white-space: nowrap; }
@media (min-width: 860px) {
  .werkstatt a { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr) 8.5rem 6.5rem; }
}

/* Stempel */
.stempel {
  display: inline-block; align-self: start; justify-self: start;
  padding: .25em .6em; border: 3px solid var(--stempel); border-radius: .35em;
  color: var(--stempel); font-weight: 800; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  transform: rotate(-6deg); white-space: nowrap;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-composite: source-over; mask-composite: add;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tinte .stempel { color: #FF8A5B; border-color: #FF8A5B; }
.werkstatt .stempel { position: absolute; right: 0; top: 1rem; }
.werkstatt .pfeil { margin-top: .25rem; }
@media (min-width: 860px) { .werkstatt .stempel { position: static; margin-right: 1rem; } .werkstatt .pfeil { margin-top: 0; } }

/* ============ Fragen ============ */
.fragen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); max-width: 52rem; }
.fragen li { display: grid; gap: .4rem 2.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.fragen .frage { font-weight: 800; font-size: 1.2em; letter-spacing: -0.02em; }
.fragen .antwort { color: var(--tinte-hell); max-width: 48ch; }
@media (min-width: 700px) { .fragen li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* ============ Kontakt ============ */
.kontakt { background: var(--ziegel); overflow: hidden; }
.kontakt h2 { font-size: clamp(2.6rem, 1.4rem + 6vw, 7rem); font-weight: 800; color: var(--papier-hell); }
.kontakt p { max-width: 40ch; font-size: 1.15em; font-weight: 500; margin: 1.25rem 0 2rem; }
.kontakt .mail {
  display: inline-block; font-size: clamp(1.3rem, .9rem + 2.6vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em;
  text-decoration: none; border-bottom: .12em solid var(--tinte); overflow-wrap: anywhere; transition: color .2s, border-color .2s;
}
.kontakt .mail:hover { color: var(--papier-hell); border-color: var(--papier-hell); }
.kontakt .grosser-hut { position: absolute; right: 0; bottom: -6%; width: clamp(160px, 28vw, 380px); color: var(--tinte); opacity: .18; transform: rotate(-10deg); pointer-events: none; }
@media (max-width: 600px) { .kontakt .grosser-hut { display: none; } }

/* ============ Fuß ============ */
.site-foot { background: var(--tinte); color: #B9ABA2; padding: 2.25rem 0 2.5rem; font-size: .95rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; justify-content: space-between; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--papier); }

/* ============ Unterseiten ============ */
.unterseite .site-head { background: var(--papier); }
.produkt-kopf { padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem); }
.produkt-kopf .zurueck { display: inline-block; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--ziegel); margin-bottom: 2.5rem; }
.produkt-kopf .stempel { margin-bottom: 1.25rem; transform: rotate(-4deg); font-size: 1.25rem; border-width: 4px; }
.produkt-kopf h1 { font-size: clamp(3rem, 1.5rem + 7vw, 7.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: .95; }
.produkt-kopf .lead { font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); font-weight: 500; max-width: 38ch; margin-top: 1.5rem; }

.produkt-body { padding-bottom: clamp(3rem, 7vw, 6rem); }
.produkt-body .block { display: grid; gap: .75rem 3rem; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 2px solid var(--tinte); }
.produkt-body .block + .block { border-top-width: 1px; border-top-color: var(--linie); }
.produkt-body h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; }
.produkt-body .block p, .produkt-body .block ul, .produkt-body .block ol { max-width: 58ch; }
.produkt-body ul, .produkt-body ol { margin: 0; padding-left: 1.1em; }
.produkt-body li { margin: .4em 0; }
.produkt-body ol li { margin: .6em 0; }
.produkt-body .block .kleingedruckt { margin-top: 1.25rem; }
.produkt-body li::marker { color: var(--ziegel); }
@media (min-width: 760px) { .produkt-body .block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.produkt-cta { background: var(--ziegel); padding: clamp(3rem, 7vw, 6rem) 0; }
.produkt-cta p { font-size: clamp(1.3rem, 1rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; max-width: 24ch; margin-bottom: 1.5rem; line-height: 1.1; }

.impressum .produkt-body h2 { font-size: 1.1rem; margin: 2rem 0 .4rem; }
.impressum .produkt-body p { margin-bottom: .5em; max-width: 60ch; }
.impressum .produkt-body ul { max-width: 60ch; margin-bottom: .5em; }