/* Eberli Metallgestaltung – Entwurf Seetalwebsites, 31.10.2026
   Anthrazit, Kalk, eine Corten-Fläche, Glut nur für Knöpfe und das Glühen.
   Abstände nur 8 · 16 · 24 · 40 · 64 · 104 */

:root {
  --anthrazit: #1C1B19;
  --anthrazit-2: #262421;
  --kalk: #EEE8DF;
  --corten: #8F3F1D;
  --glut: #FF6A2B;
  --t1: rgba(238, 232, 223, .92);
  --t2: rgba(238, 232, 223, .68);
  --t3: rgba(238, 232, 223, .48);
  --linie: rgba(238, 232, 223, .16);
  --d1: rgba(28, 27, 25, .92);
  --d2: rgba(28, 27, 25, .68);
  --d3: rgba(28, 27, 25, .48);
  --serif: "Young Serif", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
  --rand: 20px;
  --luft: 72px;
  --r: 4px;
}
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 120px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--anthrazit);
  color: var(--t1);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }

.rahmen { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; font-weight: 400; }
.klein { color: var(--t3); }

h2 {
  font: 400 clamp(40px, 6.4vw, 80px)/1 var(--serif);
  letter-spacing: -0.03em;
}
.gross {
  font: 400 clamp(21px, 2.6vw, 32px)/1.3 var(--serif);
  letter-spacing: -0.01em;
  max-width: 30ch;
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--glut); color: var(--anthrazit);
  border: 0; border-radius: var(--r);
  font: 500 17px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: #FF8550; }
.knopf:active { transform: translateY(1px); }
.knopf-hell { background: var(--kalk); }
.knopf-hell:hover { background: #fff7ee; }
:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; }

/* Kopf */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--rand);
  background: rgba(28, 27, 25, .86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf-name { display: inline-flex; align-items: baseline; padding: 12px 0; font: 400 20px/1 var(--serif); text-decoration: none; }
.kopf-name span { font: 400 13px/1 var(--mono); color: var(--t3); margin-left: 8px; }
.kopf-nav { display: flex; align-items: center; gap: 24px; }
.kopf-nav a { font-size: 15px; text-decoration: none; color: var(--t2); transition: color 150ms ease-out; }
.kopf-nav a:hover { color: var(--t1); }
.kopf-nav a:not(.kopf-knopf) { display: none; }
.kopf-nav .kopf-knopf {
  color: var(--anthrazit); background: var(--glut);
  padding: 8px 16px; border-radius: var(--r); font-weight: 500;
}
@media (min-width: 900px) {
  .kopf-nav a:not(.kopf-knopf) { display: inline; }
}

/* Einstieg */
.einstieg { padding: 104px 0 var(--luft); }
.einstieg-raster { display: grid; gap: 24px; }
.mono-zeile {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  font: 400 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t3);
  padding-bottom: 16px; border-bottom: 1px solid var(--linie);
}
h1 { display: block; margin-top: 16px; font-weight: 400; }
.maske { display: block; overflow: hidden; padding-bottom: .06em; }
.maske > span { display: block; }
.name {
  font: 400 28vw/0.92 var(--serif);
  letter-spacing: -0.04em;
  margin-left: -0.04em;
  color: var(--kalk);
}
.h1-zeile {
  font: 400 21px/1.25 var(--sans);
  letter-spacing: -0.01em;
  color: var(--t1);
  margin-top: 8px;
}
.einstieg-satz { margin-top: 16px; color: var(--t2); max-width: 46ch; }
.einstieg-aktion { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.einstieg-bild .bild-huelle { aspect-ratio: 4 / 3; }
.einstieg-bild img { object-position: 58% 40%; }

/* Handy: Bild vor den Satz, damit Name, Bild und Knopf im ersten Bildschirm stehen */
@media (max-width: 899px) {
  .einstieg-raster { display: flex; flex-direction: column; }
  .einstieg-text { display: contents; }
  .mono-zeile { order: 1; }
  h1 { order: 2; }
  .einstieg-bild { order: 3; margin-top: 8px; }
  .einstieg-aktion { order: 4; margin-top: 0; }
  .einstieg-satz { order: 5; margin-top: 0; }
}
@media (min-width: 900px) {
  .einstieg { padding: 120px 0 64px; min-height: 100svh; display: flex; align-items: center; }
  .einstieg-raster { grid-template-columns: 5fr 6fr; gap: 64px; align-items: end; width: 100%; }
  .name { font-size: min(15vw, 200px); }
  .h1-zeile { font-size: 24px; }
  .einstieg-bild .bild-huelle { aspect-ratio: 4 / 5; max-height: 76svh; }
}

/* Bilder */
.bild-huelle { overflow: hidden; border-radius: var(--r); background: var(--anthrazit-2); }
.bild-huelle img { width: 100%; height: 100%; object-fit: cover; }
figcaption { display: flex; gap: 16px; align-items: baseline; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--t2); }
figcaption .mono { color: var(--glut); font-size: 12px; }

/* Arbeiten */
.arbeiten { padding: var(--luft) 0; border-top: 1px solid var(--linie); }
.kopfzeile { display: grid; gap: 16px; margin-bottom: 40px; }
.kopfzeile-text { color: var(--t2); max-width: 46ch; }
@media (min-width: 900px) {
  .kopfzeile { grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 64px; }
}
.liste { border-top: 1px solid var(--linie); }
.zeile {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 72px; gap: 8px 16px;
  padding: 24px 0; border-bottom: 1px solid var(--linie);
  position: relative;
}
.nr { color: var(--t3); padding-top: 6px; grid-row: 1 / span 2; }
.zeile-titel { font: 400 22px/1.15 var(--serif); letter-spacing: -0.01em; grid-column: 2; hyphens: manual; overflow-wrap: break-word; }
.zeile-text { color: var(--t2); font-size: 16px; grid-column: 2; max-width: 52ch; }
.zeile-bild { grid-column: 3; grid-row: 1 / span 2; width: 72px; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--r); }
@media (min-width: 900px) {
  .zeile { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 4fr); align-items: baseline; padding: 40px 0; }
  .nr { grid-row: auto; padding: 0; }
  .zeile-titel { font-size: 36px; transition: transform 600ms var(--expo), color 150ms ease-out; }
  .zeile-text { grid-column: 3; }
  .zeile-bild { display: none; }
  .zeile:hover .zeile-titel { transform: translateX(16px); color: var(--kalk); }
}
.folger {
  position: fixed; left: 0; top: 0; z-index: 15;
  width: 320px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r);
  pointer-events: none; opacity: 0; transform: translate(-9999px, 0);
  transition: opacity 150ms ease-out;
}
.folger.an { opacity: 1; }

.streifen {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px;
  margin: 64px calc(var(--rand) * -1) 0; padding: 0 var(--rand);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none;
}
.streifen::-webkit-scrollbar { display: none; }
.streifen figure { scroll-snap-align: start; }
.streifen .bild-huelle { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .streifen { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 104px 0 0; padding: 0; overflow: visible; }
}

/* Feuer: die eine Corten-Fläche */
.feuer { background: var(--corten); padding: var(--luft) 0; color: var(--t1); }
.feuer figcaption { color: rgba(238, 232, 223, .78); }
.feuer figcaption .mono { color: var(--kalk); }
.feuer-raster { display: grid; gap: 40px; }
.feuer-text { display: grid; gap: 24px; align-content: start; }
.feuer-text > p:not(.gross) { color: rgba(238, 232, 223, .82); max-width: 46ch; }
.feuer-bild .bild-huelle { aspect-ratio: 3 / 4; background: #6f3016; }
.feuer-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.feuer-paar .bild-huelle { aspect-ratio: 1; background: #6f3016; }
.feuer-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.platzhalter {
  font: 400 13px/1.3 var(--mono); color: rgba(238, 232, 223, .78);
  border: 1px dashed rgba(238, 232, 223, .5); border-radius: var(--r); padding: 8px 16px;
}
@media (min-width: 900px) {
  .feuer-raster { grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
  .feuer-bild { position: sticky; top: 80px; }
}

/* Schmitte: hell */
.schmitte { background: var(--kalk); color: var(--d1); padding: var(--luft) 0; }
.schmitte figcaption { color: var(--d2); }
.schmitte figcaption .mono { color: var(--corten); }
.schmitte-raster { display: grid; gap: 40px; }
.schmitte-text { display: grid; gap: 24px; align-content: start; }
.schmitte-text > p:not(.gross) { color: var(--d2); max-width: 52ch; }
blockquote { border-left: 2px solid var(--corten); padding-left: 24px; margin-top: 16px; }
blockquote p { font: 400 21px/1.4 var(--serif); color: var(--d1); max-width: 34ch; }
blockquote footer { margin-top: 8px; color: var(--d3); }
.daten { margin-top: 16px; border-top: 1px solid rgba(28, 27, 25, .16); }
.daten div { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(28, 27, 25, .16); }
.daten dt { color: var(--corten); font-size: 14px; padding-top: 2px; }
.daten dd { color: var(--d2); }
.schmitte-bild .bild-huelle { aspect-ratio: 3 / 4; background: #ddd5ca; }
@media (min-width: 900px) {
  .schmitte-raster { grid-template-columns: 6fr 5fr; gap: 104px; align-items: start; }
  .schmitte-bild { position: sticky; top: 80px; }
}

/* Kontakt: Mittelpunkt */
.kontakt { padding: var(--luft) 0 104px; }
.kontakt-satz { margin-top: 24px; color: var(--t2); max-width: 46ch; }
.mail {
  display: inline-block; margin-top: 24px;
  font: 400 clamp(26px, 5vw, 64px)/1.1 var(--serif); letter-spacing: -0.02em;
  text-decoration: underline; text-decoration-color: var(--glut); text-decoration-thickness: 2px; text-underline-offset: .15em;
  overflow-wrap: anywhere;
  transition: color 150ms ease-out;
}
.mail:hover { color: var(--glut); }
.kontakt-raster { display: grid; gap: 64px; margin-top: 64px; }
@media (min-width: 900px) {
  .kontakt-raster { grid-template-columns: 7fr 4fr; gap: 104px; }
}
.anfrage { display: grid; gap: 24px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend, .feld > span { font: 400 13px/1 var(--mono); color: var(--t3); margin-bottom: 16px; padding: 0; letter-spacing: .02em; }
.feld > span { display: block; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-block; padding: 8px 16px; min-height: 40px; line-height: 24px;
  border: 1px solid var(--linie); border-radius: var(--r); font-size: 15px; color: var(--t2); cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.chips input:checked + span { background: var(--kalk); color: var(--anthrazit); border-color: var(--kalk); }
.chips input:focus-visible + span { outline: 2px solid var(--glut); outline-offset: 2px; }
.feld input, .feld textarea {
  width: 100%; padding: 16px; border-radius: var(--r);
  background: var(--anthrazit-2); border: 1px solid var(--linie); color: var(--t1);
  font: 400 17px/1.4 var(--sans);
  transition: border-color 150ms ease-out;
}
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--glut); }
.feld textarea { resize: vertical; }
.feld-paar { display: grid; gap: 24px; }
@media (min-width: 600px) { .feld-paar { grid-template-columns: 1fr 1fr; } }
.anfrage .knopf { justify-self: start; }
.hinweis { font-size: 14px; color: var(--t3); }
.infos { display: grid; gap: 40px; align-content: start; }
.info h3 { color: var(--t3); margin-bottom: 16px; }
.info p { color: var(--t1); }
.zeiten { border-collapse: collapse; width: 100%; }
.zeiten th, .zeiten td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--linie); font-weight: 400; vertical-align: top; }
.zeiten th { color: var(--t2); width: 72px; font-size: 15px; }
.zeiten td { color: var(--t1); font-size: 14px; }
.leise { margin-top: 16px; color: var(--t2) !important; font-size: 15px; }

/* Fuss */
.fuss { border-top: 1px solid var(--linie); padding: 64px 0 40px; }
.fuss-raster { display: grid; gap: 16px; color: var(--t3); font-size: 14px; }
.fuss-name { font: 400 22vw/0.9 var(--serif); letter-spacing: -0.04em; color: var(--anthrazit-2); -webkit-text-stroke: 1px rgba(238, 232, 223, .18); }
@media (min-width: 900px) { .fuss-name { font-size: 180px; } }
.entwurf a { color: var(--t2); display: inline-block; padding: 8px 0; }

/* Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .js .maske > span { transform: translateY(105%); }
  .js.los .maske > span { transform: none; transition: transform 1000ms var(--expo); }
  .js.los .maske:nth-child(2) > span { transition-delay: 90ms; }
  .js.los .name { animation: gluehen 2200ms ease-out 200ms both; }

  .js .oeffnen { clip-path: inset(100% 0 0 0); }
  .js .oeffnen img { transform: scale(1.15); }
  .js .oeffnen.da { clip-path: inset(0 0 0 0); transition: clip-path 1000ms var(--expo); }
  .js .oeffnen.da img { transform: none; transition: transform 1400ms var(--expo); }
}
/* Eisen aus der Esse: hellorange, dann rot, dann kalt */
@keyframes gluehen {
  0%   { color: #FFE2B0; text-shadow: 0 0 18px rgba(255, 150, 60, .9), 0 0 64px rgba(255, 90, 30, .7); }
  35%  { color: #FF8A3D; text-shadow: 0 0 14px rgba(255, 106, 43, .7), 0 0 48px rgba(200, 60, 20, .5); }
  65%  { color: #B8452A; text-shadow: 0 0 8px rgba(160, 50, 20, .35); }
  100% { color: var(--kalk); text-shadow: none; }
}