/* Leistungs-Detailseiten: ein Bildschirm, links das Wort, rechts das Bild
   mit vier Stichpunkten, unten der Ablauf in sechs Schritten. */
.ls {
  height: 100svh; width: min(1340px, 100%); margin: 0 auto;
  padding: min(112px, 13vh) var(--rand) min(92px, 11vh);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(30px, 4vw, 64px); row-gap: min(24px, 2.8vh);
  align-items: start;
}
.ls-links { grid-column: 1; grid-row: 1; align-self: center; }
/* rechts steht echte Arbeit aus den Projekten, keine Stimmungsbilder */
.ls-rechts {
  grid-column: 2; grid-row: 1; align-self: center; min-width: 0;
  display: flex; flex-direction: column; gap: min(26px, 3vh);
}
.ls-belege {
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: clamp(16px, 2vw, 28px); flex-wrap: nowrap;
}
/* Bildschirmaufnahmen sitzen im Geraeterahmen, wie auf den Projektseiten */
.ls-belege .pj-schau { flex: 0 1 auto; min-width: 0; opacity: 1; }
.ls-belege .pj-breit .pj-rahmen { height: min(27vh, 250px); }
.ls-belege .pj-hoch .pj-rahmen { height: min(34vh, 330px); }
.ls-belege figcaption {
  margin-top: 10px;
  font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--grau);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Fotos stehen frei und werden nie angeschnitten */
.ls-foto { margin: 0; flex: 0 1 auto; min-width: 0; }
.ls-foto img {
  display: block; width: auto; max-width: 100%;
  height: min(30vh, 290px); object-fit: contain;
  border-radius: 10px; border: 1px solid var(--linie); background: #EFEDE6;
}

.ls-beleg-zeile { font-size: min(12px, 1.6vh); color: var(--grau); }
.ls-beleg-zeile a { border-bottom: 1px solid var(--linie); padding-bottom: 1px; color: var(--ink); }
.ls-beleg-zeile a:hover { border-bottom-color: var(--ink); }

.ls-punkte { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(14px, 1.8vh) clamp(16px, 2vw, 28px); }
.ls-punkte li { border-top: 1px solid var(--linie); padding-top: min(12px, 1.5vh); }
.ls-punkte b {
  display: block; font-size: min(14.5px, 1.95vh); font-weight: 500; letter-spacing: -0.012em;
}
.ls-punkte span {
  display: block; margin-top: 6px;
  font-size: min(12.5px, 1.65vh); line-height: 1.5; color: var(--grau);
}

/* ---------- unten: der Ablauf ---------- */
.ls-boden {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 54px); align-items: end;
  border-top: 1px solid var(--linie); padding-top: min(20px, 2.4vh);
}
.ls-schritte {
  list-style: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px);
}
.ls-schritte span {
  display: block; font-size: 9.5px; letter-spacing: .16em; color: var(--grau); margin-bottom: 7px;
}
.ls-schritte b { display: block; font-size: min(13px, 1.75vh); font-weight: 500; letter-spacing: -0.01em; }
.ls-schritte i {
  display: block; margin-top: 5px; font-style: normal;
  font-size: min(11px, 1.45vh); line-height: 1.45; color: var(--grau);
}
.ls-naechste { text-align: right; }
.ls-naechste .pj-augen { margin-bottom: 6px; }
.ls-naechste a {
  font-size: min(clamp(15px, 1.5vw, 21px), 2.8vh); font-weight: 500; letter-spacing: -0.018em;
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
}
.ls-naechste a span { font-size: .68em; color: var(--grau); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ls-naechste a:hover span { transform: translate(4px, -4px); }

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  .ls { height: auto; display: block; padding: 22px var(--rand) 40px; }
  .ls-rechts { margin-top: 30px; gap: 20px; }
  /* Am Handy bleiben die beiden Bilder nebeneinander wie am Rechner,
     nur kleiner. Untereinander gestapelt sahen sie zufaellig aus. */
  .ls-belege {
    flex-wrap: nowrap; gap: 12px; align-items: flex-end; justify-content: center;
    margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand);
  }
  .ls-belege .pj-breit .pj-rahmen { height: 142px; }
  .ls-belege .pj-hoch .pj-rahmen { height: 208px; }
  /* die Unterschrift darf am Handy umbrechen statt abgeschnitten zu werden */
  .ls-belege figcaption {
    font-size: 8px; letter-spacing: .1em; text-align: center;
    white-space: normal; line-height: 1.5;
  }
  .ls-foto img { height: 168px; }
  .ls-belege .pj-schau, .ls-foto { text-align: center; }
  .ls-schau img { aspect-ratio: 16 / 10; max-height: 240px; }

  /* ---------- Gliederung am Handy ----------
     Die Seite ist am Telefon eine lange Bahn. Damit man beim Scrollen
     weiss, wo man ist, werden die Überschriften hier sichtbar, die am
     Rechner die Gestaltung übernimmt. Dazu ein gleichmässiger Takt:
     34 px zwischen den Blöcken, 18 px innerhalb. */
  .ls-rechts > .vh, .ls-boden .vh {
    position: static; width: auto; height: auto; margin: 34px 0 14px;
    clip-path: none; overflow: visible; white-space: normal;
    font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 400; color: var(--grau);
  }
  .ls-rechts { margin-top: 34px; gap: 0; }
  .ls-beleg-zeile { margin-top: 18px; font-size: 14px; }

  /* die vier Merkmale stehen zu zweit nebeneinander, das kürzt die Bahn */
  .ls-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .ls-punkte li { padding-top: 12px; }
  .ls-punkte b { font-size: 15px; }
  .ls-punkte span { font-size: 13.5px; margin-top: 4px; }

  /* der Ablauf läuft seitwärts wie ein Filmstreifen statt sechsfach
     untereinander; das spart rund 300 px Höhe */
  .ls-boden { display: block; margin-top: 0; border-top: 0; padding-top: 0; }
  .ls-schritte {
    display: flex; gap: 14px; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0; padding: 18px 0 6px;
    border-top: 1px solid var(--linie);
    /* am rechten Rand laeuft es aus: das zeigt, dass es weitergeht */
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .ls-schritte::-webkit-scrollbar { display: none; }
  .ls-schritte li {
    flex: 0 0 auto; width: 46vw; max-width: 210px; scroll-snap-align: start;
  }
  .ls-schritte span { font-size: 9px; letter-spacing: .18em; margin-bottom: 8px; }
  .ls-schritte b { font-size: 15px; }
  .ls-schritte i { font-size: 13.5px; margin-top: 5px; }

  .ls-naechste { text-align: left; margin-top: 26px; }
}


/* ---------- Leistungs-Übersicht ---------- */
.lu {
  height: 100svh; width: min(1340px, 100%); margin: 0 auto;
  padding: min(112px, 13vh) var(--rand) min(92px, 11vh);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(30px, 4vw, 70px); row-gap: min(24px, 2.8vh);
}
.lu-links { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
.lu-titel {
  margin-top: min(16px, 2vh);
  font-size: min(clamp(30px, 3.6vw, 50px), 6.6vh);
  font-weight: 700; text-transform: uppercase; line-height: .98; letter-spacing: -0.038em;
}
.lu-titel em {
  display: block; font-style: normal; font-weight: 400; text-transform: none;
  letter-spacing: -0.03em; margin-top: 2px;
}
.lu-text {
  margin-top: min(18px, 2.2vh); max-width: 34ch;
  font-size: min(14px, 1.9vh); line-height: 1.6; color: rgba(20,24,15,.66);
}
.lu-zahlen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-top: min(30px, 3.6vh); padding-top: min(20px, 2.4vh);
  border-top: 1px solid var(--linie);
}
.lu-zahlen b {
  display: block; font-size: min(clamp(24px, 2.6vw, 34px), 4.4vh); font-weight: 500;
  color: var(--moos); line-height: 1; letter-spacing: -0.03em;
}
.lu-zahlen i {
  display: block; margin-top: 8px; font-style: normal;
  font-size: min(11.5px, 1.5vh); color: var(--grau);
}

.lu-rechts { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.lu-liste { margin-top: min(14px, 1.8vh); border-top: 1px solid var(--linie); }
.lz {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 20px;
  align-items: center; gap: 18px;
  padding: min(15px, 1.9vh) 2px; border-bottom: 1px solid var(--linie);
  transition: padding-left .5s cubic-bezier(.2,.8,.2,1);
}
.lz:hover { padding-left: 14px; }
.lz-nr { font-size: 10px; letter-spacing: .16em; color: var(--grau); }
.lz-name {
  font-size: min(clamp(16px, 1.5vw, 21px), 2.7vh); font-weight: 500; letter-spacing: -0.018em;
}
.lz-feld { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--grau); }
.lz-pfeil {
  font-size: 13px; color: var(--grau); justify-self: end;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), color .4s;
}
.lz:hover .lz-pfeil { transform: translate(4px, -4px); color: var(--ink); }

.lu-boden {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 50px); align-items: center;
  background: #F4F2EB; border: 1px solid var(--linie); border-radius: 8px;
  padding: min(20px, 2.4vh) min(28px, 2.2vw);
}
.lu-boden .pj-augen { margin-bottom: 8px; }
.lu-boden p:not(.pj-augen) {
  font-size: min(12px, 1.6vh); line-height: 1.55; color: var(--grau); max-width: 72ch;
}

@media (max-width: 900px) {
  .lu { height: auto; display: block; padding: 22px var(--rand) 40px; }
  .lu-titel { font-size: 34px; }
  .lu-zahlen { gap: 14px; }
  .lu-rechts { margin-top: 30px; }
  .lu-boden { grid-template-columns: 1fr; margin-top: 30px; gap: 16px; padding: 22px 18px; }
  /* jede Zelle bekommt ihren Platz zugewiesen; ohne das rutschte der Name
     in die schmale Pfeilspalte und schob die Seite waagrecht auf */
  .lz { grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 10px 12px; }
  .lz-nr { grid-column: 1; grid-row: 1 / 3; }
  .lz-name { grid-column: 2; grid-row: 1; }
  .lz-feld { grid-column: 2; grid-row: 2; }
  .lz-pfeil { grid-column: 3; grid-row: 1 / 3; }
  .lz-name { font-size: 17px; }
}

/* ---------- Kontaktseite ----------
   Sie ist bewusst keine gewöhnliche Kontaktseite mit Anschrift und
   Öffnungszeiten. Sie ist das Anfragefenster, das sich von selbst
   öffnet. Was hier steht, ist nur für den Moment davor und für
   Suchmaschinen. */
.ka {
  min-height: 100svh; width: min(1340px, 100%); margin: 0 auto;
  padding: min(112px, 13vh) var(--rand) min(112px, 13vh);
  display: grid; place-items: center;
}
.ka-innen { max-width: 44ch; text-align: center; }
.ka-titel {
  margin-top: min(18px, 2.2vh);
  font-size: min(clamp(34px, 4.6vw, 62px), 8vh);
  font-weight: 700; text-transform: uppercase; line-height: .98; letter-spacing: -0.038em;
}
.ka-titel em {
  display: block; font-style: normal; font-weight: 400; text-transform: none;
  letter-spacing: -0.03em; margin-top: 2px;
}
.ka-text {
  margin-top: min(22px, 2.6vh);
  font-size: min(15px, 2vh); line-height: 1.7; color: var(--grau);
}
.ka-wege {
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center; align-items: center;
  margin-top: min(30px, 3.6vh);
  font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase; color: var(--grau);
}
.ka-wege a { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.ka-wege a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ka .pj-schild { display: inline-flex; }

@media (max-width: 900px) {
  .ka { padding: 90px var(--rand) 90px; }
  .ka-titel { font-size: clamp(30px, 9vw, 44px); }
  .ka-text { font-size: 15px; }
}