/* ==========================================================================
   JOTECH — Industrial Circuit Brutalism
   Palette: white surface / near-black ink / signal red
   Display: Big Shoulders Display · Mono/Labels: IBM Plex Mono · Body: IBM Plex Sans
   ========================================================================== */

:root{
  --black:      #fbfaf6;
  --black-soft: #f1efe6;
  --black-2:    #e7e2d3;
  --black-3:    #dad4bf;
  --line:       #c7c0a9;
  --white:      #110f0c;
  --white-dim:  #514c3e;
  --white-faint:#8a8571;
  --red:        #e30613;
  --red-bright: #ff2233;
  --red-dark:   #8f040d;
  /* fixed light tone for text/marks sitting on a red fill — must stay
     light regardless of the surface/ink swap above */
  --on-red:     #fdfcf9;

  --font-display: "Big Shoulders Display", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-body: "IBM Plex Sans", sans-serif;

  --gap: clamp(1.2rem, 2.5vw, 2.5rem);
  --edge: clamp(1.25rem, 5vw, 4rem);
  --radius: 2px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* subtle grain + circuit texture layered behind everything */
body::before{
  content:"";
  position: fixed;
  inset:0;
  z-index: 0;
  pointer-events: none;
  opacity:.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(17,15,12,.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
body::after{
  content:"";
  position: fixed;
  inset:0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main, header, footer{ position: relative; z-index: 1; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .92;
  margin: 0 0 .4em;
  color: var(--white);
}
h1{ font-size: clamp(2.8rem, 7.5vw, 6.4rem); font-weight: 800; }
h2{ font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p{ color: var(--white-dim); max-width: 62ch; }
a{ color: inherit; }

.mono{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--red);
  margin-bottom: 1em;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 2px;
  background: var(--red);
  display:inline-block;
}

.container{
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: var(--edge);
}

img{ max-width: 100%; display:block; }

::selection{ background: var(--red); color: var(--on-red); }

/* scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--black); }
::-webkit-scrollbar-thumb{ background: var(--red-dark); border: 2px solid var(--black); }

/* ==========================================================================
   Hazard stripe divider
   ========================================================================== */
.hazard{
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--red), var(--red) 14px,
    var(--white) 14px, var(--white) 28px
  );
}
.hazard--thin{ height: 6px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-color: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.05em 2em;
  font-family: var(--font-mono);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--btn-color);
  color: var(--btn-color);
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color .35s ease;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn::before{
  content:"";
  position: absolute;
  inset: 0;
  background: var(--btn-color);
  transform: translateX(-101%);
  transition: transform .35s cubic-bezier(.77,0,.18,1);
  z-index: -1;
}
.btn:hover{ color: var(--black); }
.btn:hover::before{ transform: translateX(0); }

.btn--primary{ --btn-color: var(--red); }
.btn--primary:hover{ color: var(--on-red); }
.btn--primary::before{ background: var(--red); }

.btn--ghost{ border-color: var(--line); color: var(--white-dim); }
.btn--ghost:hover{ color: var(--black); }
.btn--ghost::before{ background: var(--white); }

.btn--block{ width: 100%; }
.btn[disabled]{ opacity: .3; pointer-events: none; }
.btn .arrow{ transition: transform .3s ease; }
.btn:hover .arrow{ transform: translateX(4px); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(251,250,246,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-block: 1.1rem;
}
.logo{
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration:none;
  color: var(--white);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.logo em{
  font-style: normal;
  color: var(--red);
}
.logo .dot{
  width:8px;height:8px;background:var(--red);
  display:inline-block;
  animation: blink 2.4s infinite steps(1);
}
@keyframes blink{ 0%,45%{opacity:1;} 50%,95%{opacity:.15;} 100%{opacity:1;} }

.nav-links{
  display:flex;
  gap: 2.2rem;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration:none;
  color: var(--white-dim);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px; background: var(--red);
  transition: width .3s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--white); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }

.nav-cta{ display:flex; align-items:center; gap: 1.4rem; }
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); color:var(--white);
  width:42px; height:42px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--white);
  position:relative; transition: all .25s ease;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

@media (max-width: 860px){
  .nav-links{
    position:fixed; inset: 68px 0 0 0;
    background: var(--black);
    flex-direction:column;
    padding: 2.5rem var(--edge);
    gap: 1.6rem;
    transform: translateY(-110%);
    transition: transform .4s cubic-bezier(.77,0,.18,1);
    border-top: 1px solid var(--line);
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a{ font-size: 1.1rem; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn span.btn-label-long{ display:none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top: 1px solid var(--line);
  padding-block: 4rem 2rem;
  background: var(--black-soft);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-grid h4{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--white-faint);
  margin-bottom: 1.1em;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65em; }
.footer-grid a{ text-decoration:none; color: var(--white-dim); font-size:.92rem; }
.footer-grid a:hover{ color: var(--red); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--white-faint);
  flex-wrap: wrap;
  gap: 1rem;
}
@media (max-width: 780px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Utility layout
   ========================================================================== */
.section{ padding-block: clamp(4rem, 9vw, 8rem); }
.section--tight{ padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 900px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}
.stack{ display:flex; flex-direction:column; }
.center{ text-align:center; }
.tag{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: .3em .7em;
  color: var(--white-dim);
}
.tag--red{ border-color: var(--red); color: var(--red); }

/* reveal-on-scroll */
[data-reveal]{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.44,1);
}
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(3rem, 8vw, 5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-20%; right:-10%;
  width: 60vw; height: 60vw; max-width:900px; max-height:900px;
  background: radial-gradient(circle, rgba(227,6,19,.13), transparent 65%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--gap);
  align-items:end;
  position:relative;
}
.hero h1{ position:relative; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .strike{ color: var(--black); -webkit-text-stroke: 1.5px var(--white); }
.hero-meta{
  border-left: 2px solid var(--red);
  padding-left: 1.4rem;
  display:flex; flex-direction:column; gap: 1.6rem;
}
.hero-cta{ display:flex; gap: 1rem; margin-top: 2.2rem; flex-wrap:wrap; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.spec-strip{
  display:flex;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.spec-strip div{
  flex:1;
  padding: 1.4rem var(--edge);
  border-right:1px solid var(--line);
  font-family: var(--font-mono);
}
.spec-strip div:last-child{ border-right:none; }
.spec-strip .num{ color:var(--red); font-size:1.6rem; display:block; font-weight:600; }
.spec-strip .label{ font-size:.68rem; letter-spacing:.1em; color:var(--white-faint); text-transform:uppercase; }
@media (max-width: 780px){
  .spec-strip{ flex-wrap:wrap; }
  .spec-strip div{ flex: 1 1 50%; border-bottom:1px solid var(--line); }
}

/* ==========================================================================
   Service / pillar cards (Kaufen / Ankauf / Reparatur)
   ========================================================================== */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.pillar{
  background: var(--black-soft);
  padding: 2.6rem 2.2rem;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  display:flex; flex-direction:column;
  min-height: 360px;
  transition: background .4s ease;
}
.pillar:hover{ background: var(--black-2); }
.pillar .idx{
  font-family: var(--font-mono);
  color: var(--white-faint);
  font-size: .8rem;
}
.pillar h3{ margin-top: 1.6rem; }
.pillar p{ margin-top: .6rem; font-size: .92rem; }
.pillar .go{
  margin-top:auto;
  padding-top: 1.6rem;
  font-family: var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--red);
  display:flex; align-items:center; gap:.5em;
}
.pillar .go svg{ transition: transform .3s ease; }
.pillar:hover .go svg{ transform: translateX(6px); }
.pillar::after{
  content:"";
  position:absolute; left:0; bottom:0; height:3px; width:0;
  background: var(--red);
  transition: width .4s ease;
}
.pillar:hover::after{ width:100%; }
@media (max-width: 900px){ .pillars{ grid-template-columns:1fr; } }

/* ==========================================================================
   Product cards (Shop)
   ========================================================================== */
.filter-bar{
  display:flex; gap: .7rem; flex-wrap:wrap;
  margin-bottom: 2.6rem;
}
.filter-btn{
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--white-dim);
  padding: .7em 1.2em;
  cursor:pointer;
  transition: all .25s ease;
}
.filter-btn:hover{ border-color: var(--red); color: var(--white); }
.filter-btn.active{ background: var(--red); border-color: var(--red); color: var(--on-red); }

.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .product-grid{ grid-template-columns: 1fr; } }

.product-card{
  background: var(--black-soft);
  display:flex; flex-direction:column;
  transition: background .3s ease;
}
.product-card.is-hidden{ display:none; }
.product-card:hover{ background: var(--black-2); }
.product-media{
  aspect-ratio: 4/3;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(227,6,19,.08), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(17,15,12,.035) 7px 8px);
  overflow:hidden;
}
.product-media svg{ width: 46%; height: 46%; color: var(--white-dim); }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-media .stock{
  position:absolute; top:.8rem; left:.8rem;
  font-family: var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--red); border:1px solid var(--red);
  padding:.25em .6em;
}
.product-body{ padding: 1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.product-cat{ font-family: var(--font-mono); font-size:.66rem; letter-spacing:.14em; color: var(--white-faint); text-transform:uppercase; }
.product-body h3{ font-size: 1.25rem; margin:0; }
.product-specs{ font-family: var(--font-mono); font-size:.72rem; color: var(--white-dim); line-height:1.8; margin: .3rem 0 .8rem; }
.product-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top: .8rem; border-top: 1px dashed var(--line); }
.price{ font-family: var(--font-display); font-size: 1.5rem; color: var(--white); }
.price small{ font-family: var(--font-mono); font-size:.6rem; color: var(--white-faint); display:block; letter-spacing:.1em; }
.icon-btn{
  border:1px solid var(--line); background:transparent; color:var(--white-dim);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.6em 1em; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.4em;
  transition: all .25s ease;
}
.icon-btn:hover{ border-color:var(--red); color:var(--red); }

/* ==========================================================================
   About / photo frames (Werkstatt & Team)
   ========================================================================== */
.about-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gap);
  align-items:stretch;
}
@media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; } }

.photo-frame{
  position:relative;
  border: 1px solid var(--line);
  background: var(--black-soft);
  overflow:hidden;
  aspect-ratio: 4/3;
}
.photo-frame--tall{ aspect-ratio: 3/4; }
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-frame .frame-tag{
  position:absolute; top:0; left:0; z-index:2;
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--on-red); background: var(--red);
  padding: .5em .9em;
}
.photo-frame .frame-corner{
  position:absolute; bottom:0; right:0; z-index:2;
  width: 26px; height: 26px;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  background: var(--black-soft);
}

.photo-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  text-align:center;
  padding: 1.5rem;
  background: repeating-linear-gradient(-45deg, var(--black-2), var(--black-2) 12px, var(--black-3) 12px, var(--black-3) 24px);
  color: var(--white-faint);
}
.photo-placeholder svg{ width:34px; height:34px; opacity:.7; }
.photo-placeholder .mono{ opacity:.85; }

.about-copy{ display:flex; flex-direction:column; justify-content:center; gap:1.4rem; }
.about-stats{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:.4rem; }
.about-stats div{ font-family:var(--font-mono); }
.about-stats .num{ color:var(--red); font-size:1.4rem; font-weight:600; display:block; }
.about-stats .label{ font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--white-faint); }

/* ==========================================================================
   Process steps (numbered rail)
   ========================================================================== */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); position:relative; }
.process::before{
  content:"";
  position:absolute; top:22px; left:0; right:0; height:1px;
  background: var(--line);
  z-index:0;
}
.process-step{ position:relative; z-index:1; }
.process-step .n{
  width:44px; height:44px; border:1px solid var(--red); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:600;
  background: var(--black);
  margin-bottom: 1.4rem;
}
.process-step h4{ font-family: var(--font-display); text-transform:uppercase; font-size:1.15rem; margin-bottom:.4em; color:var(--white); }
.process-step p{ font-size: .88rem; }
@media (max-width: 900px){ .process{ grid-template-columns: 1fr 1fr; } .process::before{ display:none; } }

/* ==========================================================================
   WIZARD (Ankauf / Reparatur)
   ========================================================================== */
.wizard{
  border: 1px solid var(--line);
  background: var(--black-soft);
}
.wizard-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.6rem var(--edge);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 1rem;
}
.wizard-steps{ display:flex; gap: 0; }
.wizard-steps .ws{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white-faint);
  display:flex; align-items:center; gap:.6em;
  padding-right: 1.4rem;
  margin-right: 1.4rem;
  border-right: 1px solid var(--line);
}
.wizard-steps .ws:last-child{ border-right:none; margin-right:0; padding-right:0; }
.wizard-steps .ws .b{
  width:22px;height:22px; border:1px solid var(--white-faint);
  display:flex; align-items:center; justify-content:center; font-size:.68rem;
  transition: all .3s ease;
}
.wizard-steps .ws.active{ color: var(--white); }
.wizard-steps .ws.active .b{ border-color: var(--red); background:var(--red); color:var(--on-red); }
.wizard-steps .ws.done .b{ border-color: var(--red); color: var(--red); }
.wizard-steps .ws.done{ color: var(--white-dim); }

.wizard-body{ padding: clamp(1.8rem, 4vw, 3rem) var(--edge); }
.wizard-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.4rem var(--edge);
  border-top: 1px solid var(--line);
}

.step{ display:none; }
.js .step.active{ display:block; }
.js .step{ display: none; }
.no-js-note{ display:none; }

.step-title{ display:flex; align-items:baseline; gap:.8rem; margin-bottom: 1.8rem; }
.step-title .step-index{ font-family:var(--font-mono); color:var(--red); font-size:.85rem; }

.option-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
@media (max-width: 760px){ .option-grid{ grid-template-columns: repeat(2,1fr); } }

.option-card{ position:relative; }
.option-card input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0; }
.option-card label{
  display:flex; flex-direction:column; gap:.7rem;
  background: var(--black-soft);
  padding: 1.5rem 1.2rem;
  height:100%;
  cursor:pointer;
  transition: background .25s ease, color .25s ease;
  border: 2px solid transparent;
}
.option-card label .ic{ color: var(--white-dim); }
.option-card label .t{ font-family: var(--font-mono); text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; color: var(--white); }
.option-card label .d{ font-size:.78rem; color: var(--white-faint); }
.option-card input:hover + label{ background: var(--black-2); }
.option-card input:checked + label{ border-color: var(--red); background: var(--black-2); }
.option-card input:checked + label .ic{ color: var(--red); }
.option-card input:focus-visible + label{ outline: 2px solid var(--red); outline-offset: -2px; }

.option-grid.error-shake{ animation: shake .4s ease; box-shadow: 0 0 0 1px var(--red); }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

.field{ margin-bottom: 1.5rem; }
.field label{
  display:block; font-family: var(--font-mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.1em; color: var(--white-faint);
  margin-bottom: .6em;
}
.field .hint{ font-size:.72rem; color:var(--white-faint); margin-top:.4em; font-family: var(--font-mono); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--white);
  padding: .9em 1em;
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--red); }
.field textarea{ min-height: 130px; resize: vertical; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }

.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }

.summary-box{
  border: 1px solid var(--line);
  background: var(--black);
  padding: 1.6rem;
  margin-bottom: 1.6rem;
}
.summary-box h4{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  color: var(--red); text-transform:uppercase; margin-bottom:1rem;
}
.summary-row{ display:flex; justify-content:space-between; gap:1rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size:.86rem; }
.summary-row:last-child{ border-bottom:none; }
.summary-row .k{ color: var(--white-faint); font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.summary-row .v{ color: var(--white); text-align:right; }

.consent{ display:flex; gap:.8em; align-items:flex-start; font-size:.82rem; color: var(--white-dim); margin: 1.4rem 0; }
.consent input{ margin-top:.3em; accent-color: var(--red); }

.wizard-nav-btn{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  background:none; border:none; color: var(--white-dim); cursor:pointer;
  display:flex; align-items:center; gap:.5em;
}
.wizard-nav-btn:hover{ color: var(--white); }
.wizard-nav-btn:disabled{ opacity:.25; pointer-events:none; }

/* ==========================================================================
   Contact / page hero (sub pages)
   ========================================================================== */
.page-hero{
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.breadcrumb{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--white-faint); margin-bottom: 1.2rem;
}
.breadcrumb a{ color: var(--white-faint); text-decoration:none; }
.breadcrumb a:hover{ color: var(--red); }
.breadcrumb .sep{ margin: 0 .5em; color: var(--line); }

.info-card{ border:1px solid var(--line); padding: 1.8rem; background: var(--black-soft); }
.info-card h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; color: var(--red); text-transform:uppercase; margin-bottom: .8em; }

.map-block{
  border:1px solid var(--line);
  aspect-ratio: 16/9;
  background: var(--black-soft);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.map-block::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.5;
}
.map-block .pin{ position:relative; z-index:1; color:var(--red); text-align:center; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }

/* success / danke page */
.status-panel{
  border: 1px solid var(--line);
  background: var(--black-soft);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align:center;
  max-width: 720px;
  margin: 0 auto;
}
.status-panel .mark{
  width:70px; height:70px; border:2px solid var(--red); color: var(--red);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 1.6rem;
  font-family: var(--font-display); font-size: 2rem;
}

/* legal pages */
.legal p, .legal li{ color: var(--white-dim); }
.legal h2{ margin-top: 2rem; font-size: 1.5rem; }
.legal h3{ margin-top: 1.4rem; font-size: 1.1rem; color: var(--white); }
.legal ul{ color: var(--white-dim); }

/* back to top */
.to-top{
  position: fixed; right: 1.6rem; bottom: 1.6rem;
  width: 48px; height:48px;
  border: 1px solid var(--line);
  background: var(--black-soft);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index: 40;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease, border-color .3s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   Admin-Bereich
   ========================================================================== */
.admin-shell{ padding: clamp(1.5rem,3vw,2.5rem) var(--edge) 4rem; max-width: 1100px; margin: 0 auto; }
.admin-topbar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line); margin-bottom: 2rem; flex-wrap:wrap;
}
.admin-topbar .who{ font-family: var(--font-mono); font-size:.78rem; color: var(--white-faint); }
.admin-nav{ display:flex; gap: 1.4rem; flex-wrap:wrap; }
.admin-nav a{ color: var(--white-dim); text-decoration:none; font-family: var(--font-mono); font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; }
.admin-nav a.is-active{ color: var(--red); }
.admin-nav a:hover{ color: var(--red); }

.admin-title-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom: 1.6rem; }

.stat-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin-bottom: 2.4rem; }
.stat-card{ border:1px solid var(--line); background: var(--black-soft); padding: 1.2rem 1.4rem; }
.stat-card .num{ display:block; font-family: var(--font-display); font-size: 2.2rem; font-weight:800; line-height:1; }
.stat-card .label{ font-family: var(--font-mono); font-size:.72rem; color: var(--white-faint); text-transform:uppercase; letter-spacing:.08em; }

.table-wrap{ overflow-x:auto; border:1px solid var(--line); }
table.admin-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width: 640px; }
table.admin-table th, table.admin-table td{ padding:.75rem 1rem; border-bottom:1px solid var(--line); text-align:left; vertical-align: top; }
table.admin-table th{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--white-faint); background: var(--black-soft); }
table.admin-table tr:last-child td{ border-bottom:none; }
table.admin-table td.actions{ white-space:nowrap; }
table.admin-table td.actions a, table.admin-table td.actions button{ margin-right: .8rem; }

.status-pill{ display:inline-block; padding:.2em .7em; font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; border:1px solid var(--line); border-radius: 999px; }
.status-pill--neu{ border-color: var(--red); color: var(--red); }
.status-pill--bearbeitet{ border-color: var(--white-dim); color: var(--white-dim); }
.status-pill--erledigt{ border-color: var(--line); color: var(--white-faint); }

.link-btn{ background:none; border:none; padding:0; font: inherit; color: var(--red); cursor:pointer; text-decoration: underline; }
.link-btn--muted{ color: var(--white-dim); }

.flash{ padding: .8rem 1.1rem; border:1px solid var(--red); color: var(--white); margin-bottom: 1.6rem; font-size:.88rem; }
.flash--ok{ border-color: var(--white-dim); }

.login-shell{ max-width: 380px; margin: clamp(3rem,10vh,7rem) auto 0; padding: 0 var(--edge); }
.login-shell .btn{ margin-top: .6rem; }
.to-top:hover{ border-color: var(--red); color: var(--red); }