/* ==========================================================================
   Dent | Remove — Norbert Unger, Erkner
   Gestaltung: Lichtlinien. Eine Delle sieht man nur daran, dass sich gerade
   Linien im Lack kruemmen. Dieses Prinzip traegt die ganze Seite.
   ========================================================================== */

:root{
  --papier:#f2f0ea;
  --papier-2:#e7e4da;
  --tinte:#16141f;
  --tinte-60:#5d5a69;
  --indigo:#1b1747;
  --indigo-2:#272160;
  --orange:#d58927;
  --akzent:#90530a;
  --gold:#ecd087;
  --gold-dunkel:#d8b45a;
  --blau:#342c8f;
  --peri:#c3c8e6;

  --linie:rgba(22,20,31,.16);
  --linie-hell:rgba(195,200,230,.22);

  --gitter:min(1320px, 90vw);
  --kopfhoehe:72px;
  --d:'Archivo','Helvetica Neue',Arial,sans-serif;
  --m:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --e:cubic-bezier(.2,.7,.3,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;background:var(--papier);color:var(--tinte);
  font-family:var(--d);font-size:1.0625rem;line-height:1.62;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
picture{display:block}
figure{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.gitter{width:var(--gitter);margin-inline:auto}

/* ---------- Schrift ---------- */
h1,h2,h3{margin:0;font-weight:800;line-height:.98;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:clamp(2.9rem,7.4vw,6.4rem);font-variation-settings:'wdth' 112,'wght' 800}
h2{font-size:clamp(2rem,4.4vw,3.5rem);font-variation-settings:'wdth' 108,'wght' 800}
h3{font-size:1.16rem;font-weight:700;letter-spacing:-.012em;line-height:1.25}
p{margin:0 0 1.05em}
.fliess{max-width:58ch;color:#3a3746}
.gross{font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.55;color:#2b2836;max-width:46ch}

.mono{
  font-family:var(--m);font-size:.735rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
.marke{color:var(--akzent)}

/* ---------- Schalter ---------- */
.tat{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--m);font-size:.8rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  padding:1.05rem 1.7rem;
  border:1px solid var(--tinte);background:var(--gold);color:var(--tinte);
  transition:background .2s var(--e);
}
.tat:hover{background:var(--gold-dunkel)}
.dunkel .tat{border-color:var(--gold);background:var(--gold);color:var(--tinte)}
.dunkel .tat:hover{background:var(--gold-dunkel);border-color:var(--gold-dunkel)}

.unter{
  text-decoration:none;border-bottom:2px solid var(--orange);
  padding-bottom:.14rem;transition:border-color .2s var(--e),color .2s var(--e);
}
.unter:hover{border-color:var(--tinte)}
.dunkel .unter:hover{border-color:var(--papier)}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:var(--papier);border-bottom:1px solid var(--linie);
}
.kopf__in{display:flex;align-items:center;gap:2rem;height:var(--kopfhoehe)}
.kopf__logo{flex:none;display:block}
.kopf__logo img{height:34px;width:auto}
.kopf__nav{margin-left:auto;display:flex;gap:2.1rem}
.kopf__nav a{
  font-family:var(--m);font-size:.735rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:#4a4757;
  padding-block:.35rem;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.kopf__nav a:hover{color:var(--tinte);border-bottom-color:var(--orange)}
.kopf__ruf{
  flex:none;font-family:var(--m);font-size:.8rem;font-weight:500;letter-spacing:.06em;
  text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:.1rem;
}
.kopf__ruf-kurz{display:none}
.kopf__schalter{display:none}

/* ---------- Lichtlinien ---------- */
.linien{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.linien svg{width:calc(100% + 48px);max-width:none;height:100%;margin-left:-24px}
.linien--papier{
  color:var(--blau);opacity:.46;
  -webkit-mask-image:linear-gradient(102deg,transparent 5%,rgba(0,0,0,.13) 27%,rgba(0,0,0,.58) 48%,#000 70%);
  mask-image:linear-gradient(102deg,transparent 5%,rgba(0,0,0,.13) 27%,rgba(0,0,0,.58) 48%,#000 70%);
}
@media (prefers-reduced-motion:no-preference){
  /* Einmal beim Laden von links aufziehen — auf dem Rahmen, nicht auf der Grafik,
     damit der gehaltene Zuschnitt die wandernde Grafik sauber begrenzt. */
  .linien--anim{animation:streifen 1.5s var(--e) both}
  @keyframes streifen{
    from{clip-path:inset(0 100% 0 0)}
    to{clip-path:inset(0 0 0 0)}
  }
  /* Danach wandert das Feld sehr langsam seitwaerts. Waagerechte Linien
     veraendern sich dabei nicht — sichtbar wird die Bewegung nur an der Delle. */
  .linien--anim svg{
    animation:driften 30s ease-in-out 1.7s infinite alternate;
  }
  @keyframes driften{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-17px,0,0)}
  }
}

/* ---------- Auftakt ---------- */
.auftakt{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(540px, calc(100svh - var(--kopfhoehe)), 880px);
  padding:clamp(3rem,7vw,5.5rem) 0;
}
.auftakt .linien{z-index:-1}
.auftakt__in{display:block}
.auftakt h1{
  margin:1.5rem 0 0;
  font-size:clamp(3rem,8.4vw,7.2rem);line-height:.98;
  font-variation-settings:'wdth' 114,'wght' 800;
}
.auftakt h1 em{font-style:normal;position:relative;white-space:nowrap}
.auftakt h1 em::after{
  content:'';position:absolute;left:0;right:0;bottom:.09em;height:.075em;
  background:var(--orange);z-index:-1;
}
.auftakt__satz{
  margin:2.1rem 0 0;max-width:30ch;font-weight:500;color:#2b2836;
  font-size:clamp(1.15rem,1.85vw,1.62rem);line-height:1.38;
}
.auftakt__tat{margin-top:2.9rem;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}

/* ---------- Ueberblick: eigener Block, nicht am Auftakt ---------- */
.ueberblick .mono{margin:0 0 1.6rem}
.ueberblick__in{
  display:grid;grid-template-columns:repeat(4,1fr);margin:0;
  border-top:1px solid var(--tinte);
}
.ueberblick__in > div{
  padding:1.7rem 1.8rem 1.9rem;
  border-left:1px solid var(--linie);border-bottom:1px solid var(--linie);
}
.ueberblick__in > div:first-child{border-left:0;padding-left:0}
.ueberblick__in > div:last-child{padding-right:0}
.ueberblick dt{
  font-family:var(--m);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#63606f;
}
.ueberblick dd{margin:.6rem 0 0;font-size:1.04rem;line-height:1.35}

/* ---------- Baender ---------- */
.band{padding:clamp(4rem,8vw,7rem) 0;position:relative}
.dunkel{background:var(--indigo);color:#e5e7f2}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}
.dunkel .fliess{color:#b9bcd4}
.dunkel .gross{color:#d3d6e8}
.dunkel .mono{color:var(--gold)}

/* ---------- Erklaerung: heiles Blech / Delle ---------- */
.probe{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;align-items:start}
.probe__text{grid-column:1/span 4}
.probe__text h2{margin-bottom:1.5rem}
.probe__bilder{grid-column:6/span 7;display:grid;grid-template-columns:1fr 1fr;gap:2.2rem}
.probe__feld{border:1px solid var(--linie-hell);padding:1.5rem 1.2rem 1.1rem;position:relative}
.probe__feld svg{color:var(--peri);width:100%;height:auto}
.probe__feld figcaption{
  margin-top:1.1rem;font-family:var(--m);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.probe__feld--delle{border-color:rgba(213,137,39,.5)}
.probe__feld--delle figcaption{color:var(--orange)}

/* ---------- Nummerierte Leistungszeilen ---------- */
.werk{border-top:1px solid var(--tinte);padding-top:1.6rem;margin-top:clamp(3rem,6vw,5rem)}
.werk:first-of-type{margin-top:0}
.werk__nr{
  font-family:var(--m);font-size:.75rem;font-weight:500;letter-spacing:.18em;
  color:var(--akzent);display:block;margin-bottom:1.4rem;
}
.dunkel .werk{border-top-color:rgba(195,200,230,.4)}
.dunkel .werk__nr{color:var(--gold)}
.werk__in{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;align-items:start}
.werk__spalte{grid-column:1/span 5}
.werk__spalte h2{margin-bottom:1.6rem}
.werk__bild{grid-column:7/span 6}
.werk__bild img{width:100%;filter:saturate(.88) contrast(1.06)}

.beleg{position:relative}
.beleg figcaption{
  margin-top:.7rem;font-family:var(--m);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#63606f;
}
.dunkel .beleg figcaption{color:#8d90ab}

/* ---------- Belegstrecke ---------- */
.strecke{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6rem 2rem;margin-top:clamp(2.5rem,5vw,4rem)}
.strecke .beleg:nth-child(1){grid-column:1/span 5}
.strecke .beleg:nth-child(2){grid-column:7/span 4;margin-top:3.5rem}
.strecke .beleg:nth-child(3){grid-column:2/span 4;margin-top:1rem}
.strecke .beleg:nth-child(4){grid-column:7/span 6;margin-top:1.6rem}
.strecke img{width:100%;filter:saturate(.88) contrast(1.06)}

/* ---------- Haeufige Fragen ---------- */
.fragen h2{margin-bottom:clamp(2rem,4vw,3rem)}
.fragen__liste{margin:0;border-top:1px solid var(--tinte)}
.fragen__liste > div{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:.8rem 2.6rem;
  padding:1.7rem 0 1.8rem;border-bottom:1px solid var(--linie);
}
.fragen__liste dt{
  font-weight:700;font-size:1.05rem;line-height:1.3;
  font-variation-settings:'wdth' 104,'wght' 700;
}
.fragen__liste dd{margin:0;color:#3a3746;font-size:.98rem;line-height:1.6}

/* ---------- Kontakt ---------- */
.kontakt{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,3.6rem)}
.kontakt__text{grid-column:1/span 6}
.kontakt__text h2{margin-bottom:1.4rem}
.kontakt__tat{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}

/* Anschrift: reine Datenspalte. Die Aktionen stehen links, deshalb hier
   keine Link-Unterstriche und keine Zeilentrenner — nur eine Kante oben. */
.anschrift{
  grid-column:8/span 5;align-self:start;margin:0;
  border-top:1px solid var(--tinte);padding-top:2rem;
}
.anschrift > div{padding:0;border:0;margin-bottom:2.3rem}
.anschrift > div:last-child{margin-bottom:0}
.anschrift dt{
  font-family:var(--m);font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#63606f;margin-bottom:.6rem;
}
.anschrift dd{
  margin:0;font-weight:700;line-height:1.18;letter-spacing:-.022em;
  font-size:clamp(1.22rem,1.95vw,1.68rem);font-variation-settings:'wdth' 104,'wght' 700;
}
.anschrift address{font-style:normal}
.anschrift dd > a{
  text-decoration:none;color:var(--tinte);
  border-bottom:2px solid transparent;   /* Platz reservieren, kein Sprung beim Hover */
  transition:border-color .2s var(--e);
}
.anschrift dd > a:hover,.anschrift dd > a:focus-visible{border-bottom-color:var(--orange)}
.anschrift__maps{
  display:inline-block;margin-top:1.1rem;
  font-family:var(--m);font-size:.71rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--akzent);text-decoration:none;
  border-bottom:1px solid rgba(213,137,39,.55);padding-bottom:.16rem;
  transition:color .2s var(--e),border-color .2s var(--e);
}
.anschrift__maps:hover{color:var(--tinte);border-bottom-color:var(--tinte)}

.hinweis-js{grid-column:1/span 12;font-size:.88rem;color:#63606f;margin:.4rem 0 0}

/* ---------- Fuss ---------- */
.fuss{background:var(--tinte);color:#b9b7c4;padding:3.2rem 0 2.2rem}
.fuss__in{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;align-items:start}
.fuss__logo{grid-column:1/span 4}
.fuss__logo img{height:36px;width:auto}
.fuss__nav{grid-column:6/span 7;display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:flex-end}
.fuss a{color:#d5d3de;text-decoration:none;font-family:var(--m);font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid transparent}
.fuss a:hover{border-bottom-color:var(--orange)}
.fuss__rechte{grid-column:1/span 12;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:#8b8998}

/* ---------- Rechtstexte ---------- */
.recht{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3.5rem,7vw,6rem)}
.recht__in{width:min(680px,90vw);margin-inline:auto}
.recht h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:2.4rem}
.recht h2{font-size:clamp(1.15rem,1.9vw,1.4rem);margin:2.6rem 0 .8rem;font-variation-settings:'wdth' 104,'wght' 800;padding-top:1.1rem;border-top:1px solid var(--linie)}
.recht h3{font-size:.98rem;margin:1.7rem 0 .5rem;color:var(--akzent)}
.recht p,.recht li{color:#3a3746;font-size:.98rem}
.recht ul{padding-left:1.1rem;margin:0 0 1.05em;display:grid;gap:.35rem}
.recht a{color:var(--tinte);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--orange)}
.recht address{font-style:normal;line-height:1.75}
.zurueck{
  display:inline-block;margin-bottom:2rem;text-decoration:none;
  font-family:var(--m);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--orange);padding-bottom:.15rem;
}

/* ---------- Schmale Ansichten ---------- */

/* Kopf: der Inhalt braucht rund 750px, der Satzspiegel sind 90vw.
   Deshalb wird das Menue schon ab 980px eingeklappt, nicht erst ab 720px. */
@media (max-width:980px){
  .kopf__in{gap:1.2rem}
  .kopf__nav{
    /* absolut zum Kopf, nicht fixed: sonst bemisst sich die Breite am
       Ansichtsfenster statt am Dokument und erzeugt seitlichen Ueberlauf. */
    position:absolute;top:100%;left:0;right:0;z-index:59;
    flex-direction:column;gap:0;margin-left:0;
    background:var(--papier);border-bottom:1px solid var(--tinte);
    padding:0 5vw 1.2rem;
    /* Vollstaendig ueber den oberen Rand schieben: eigene Hoehe PLUS Kopfhoehe.
       Zusaetzlich unsichtbar und nicht anklickbar, sonst liegt der letzte Link
       des eingeklappten Menues ueber dem Kopf und faengt Klicks ab. */
    transform:translateY(calc(-100% - var(--kopfhoehe)));
    visibility:hidden;pointer-events:none;
    transition:transform .35s var(--e), visibility 0s linear .35s;
  }
  .kopf__nav.auf{
    transform:none;visibility:visible;pointer-events:auto;
    transition:transform .35s var(--e), visibility 0s;
  }
  .kopf__nav a{padding:1rem 0;border-bottom:1px solid var(--linie);font-size:.8rem}
  .kopf__nav a:hover{color:var(--tinte);border-bottom-color:var(--linie)}
  .kopf__schalter{
    display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
    padding:.55rem .85rem;border:1px solid var(--tinte);background:none;
    font-family:var(--m);font-size:.7rem;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;cursor:pointer;color:var(--tinte);
  }
}

@media (max-width:1000px){
  .auftakt__satz{max-width:34ch}
  .probe__text{grid-column:1/span 12}
  .probe__text h2{margin-bottom:1.2rem}
  .probe__bilder{grid-column:1/span 12;margin-top:2rem}
  .werk__spalte{grid-column:1/span 12}
  .werk__bild{grid-column:1/span 12;margin-top:1.8rem}
  .kontakt__text,.anschrift{grid-column:1/span 12}
  .strecke .beleg:nth-child(n){grid-column:span 6;margin-top:0}
  .fuss__logo{grid-column:1/span 12}
  .fuss__nav{grid-column:1/span 12;justify-content:flex-start;margin-top:1.4rem}
}

@media (max-width:900px){
  /* Linien nur oben hinter der Zeile, damit der Text ruhig steht */
  .linien--papier{
    opacity:.40;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 34%,transparent 62%);
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 34%,transparent 62%);
  }
  .ueberblick__in{grid-template-columns:1fr 1fr}
  .ueberblick__in > div{padding:1.4rem 1.5rem 1.5rem}
  .ueberblick__in > div:nth-child(odd){border-left:0;padding-left:0}
  .ueberblick__in > div:nth-child(even){padding-right:0}
}

@media (max-width:720px){
  .auftakt{min-height:auto;padding:clamp(2.5rem,9vw,4rem) 0 clamp(3rem,9vw,4.5rem)}
  .auftakt__satz{max-width:none}
  .fragen__liste > div{grid-template-columns:1fr;gap:.5rem}
  .anschrift > div{grid-template-columns:1fr;gap:.25rem}
  .strecke .beleg:nth-child(n){grid-column:span 12}
  .probe__bilder{grid-template-columns:1fr;gap:1.6rem}
  .tat{width:100%;justify-content:center}
}

@media (max-width:560px){
  .kopf__logo img{height:29px}
  .kopf__ruf-lang{display:none}
  .kopf__ruf-kurz{display:inline}
  .kopf__in{gap:.8rem}
  .ueberblick__in{grid-template-columns:1fr}
  .ueberblick__in > div{border-left:0;padding:1.2rem 0}
}