/* NORDIX — Serviceübersicht
   Grundgestalt der Karten plus drei Varianten, umgeschaltet über
   `data-variante` am Container `.leistungen`.

   1 · Raster — alles sichtbar, Karten wachsen mit ihrem Inhalt
   2 · Spur   — je Bereich eine waagerechte Spur, gleich hohe Karten
   3 · Faltung — Grundkarte kompakt, Beispiele auf Klick

   Alle Werte hängen an Variablen für die Tweaks-Bar. */

:root{
  --dn-r:14px;
  --dn-pad:clamp(18px,1.9vw,26px);
  --dn-gap:12px;
  --dn-ease:cubic-bezier(.25,1,.5,1);
}

/* Rasterfelder haben `min-width:auto` — ohne das Folgende schiebt die
   waagerechte Spur aus Variante 2 die Lesespalte auf und die ganze Seite
   bekommt einen Querlauf, statt dass die Spur in sich scrollt. */
#leistungen .body,
.leistungen,
.leistungen .bereich{min-width:0}

.leistungen{margin-top:6px}

/* ---------- Kopf eines Bereichs ---------- */
/* Abstand zwischen den Bereichen: um rund 30 % zurückgenommen (Björns Vorgabe).
   Vorher clamp(48px,6vw,86px). */
.bereich + .bereich{margin-top:clamp(34px,4.2vw,60px)}

.bkopf{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-bottom:22px;
  max-width:62ch;
}
.bkopf .bnr{
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--orange);
}
.bkopf h3{
  margin-top:10px;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(23px,2.6vw,36px);line-height:1.03;
  letter-spacing:var(--tr-h2);text-transform:uppercase;color:var(--ink);
}
.bkopf .bclaim{
  margin-top:8px;color:var(--ink-2);
  font-size:clamp(15px,1.35vw,18px);
}

/* Das Qualitätsversprechen ist kein Listenpunkt — es steht über dem Bereich */
.bkopf .versprechen{
  margin-top:16px;padding:14px 16px;
  border:1px solid var(--line-2);border-left:2px solid var(--orange);
  border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--orange) 5%,transparent);
  font-size:14.5px;line-height:1.55;color:var(--ink-2);
}
.bkopf .versprechen span{
  display:block;margin-bottom:5px;
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--orange);
}

/* ---------- Die Karte ---------- */
.dienst{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:var(--dn-pad);
  border:1px solid var(--line);
  border-radius:var(--dn-r);
  background:var(--panel);
  text-align:left;
  font:inherit;color:inherit;
  transition:border-color .35s ease,transform .35s var(--dn-ease);
}

/* Der Verlauf der Vorlage. Dort wechselt er pro Karte die Farbe; hier gibt es
   genau eine Signalfarbe, also wechselt die Stärke — je Bereich eine. */
.dienst .glanz{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 100% 0%,
      color-mix(in srgb,var(--orange) var(--dn-mix,9%),transparent) 0%,
      transparent 62%);
  opacity:.85;transition:opacity .45s ease;
}
.dienst[data-bereich="A"]{--dn-mix:7%}
.dienst[data-bereich="B"]{--dn-mix:13%}
.dienst[data-bereich="C"]{--dn-mix:9%}

.dienst:hover,.dienst:focus-visible{border-color:var(--orange)}
.dienst:hover .glanz,.dienst:focus-visible .glanz{opacity:1}

.dienst .kopf{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:16px;
}
.dienst .nr{
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  color:var(--orange);
}
.dienst .sym{
  display:grid;place-items:center;
  width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:10px;
  color:var(--ink-2);
  transition:color .3s ease,border-color .3s ease,background-color .3s ease;
}
.dienst .sym svg{width:19px;height:19px}
.dienst:hover .sym,.dienst:focus-visible .sym{
  color:var(--orange);border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 10%,transparent);
}

.dienst h4{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(18px,1.7vw,23px);line-height:1.08;
  letter-spacing:.005em;text-transform:uppercase;color:var(--ink);
}
.dienst .be{
  margin-top:10px;
  font-size:14.5px;line-height:1.6;color:var(--ink-2);
}

/* ---------- Beispiele ---------- */
.dienst .bsp{
  margin-top:14px;padding-top:13px;
  border-top:1px dashed var(--line-2);
  list-style:none;
  display:flex;flex-direction:column;gap:7px;
}
.dienst .bsp li{
  position:relative;padding-left:16px;
  font-size:13.5px;line-height:1.45;color:var(--ink-3);
}
.dienst .bsp li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:1px;background:var(--orange);
}

/* ======================================================================
   VARIANTE 1 — Raster (gewählt)
   Alles steht offen. Karten wachsen mit ihrem Inhalt.

   Kein gewöhnliches Raster: Bei unterschiedlich hohen Karten richtet sich
   jede Zeile an der höchsten aus, unter den kurzen bleibt Leerraum stehen —
   der Flickenteppich, den Björn bemängelt hat. Stattdessen packen die Karten
   dicht: gleicher Abstand überall, dafür stehen sie waagerecht nicht auf
   einer Linie. Umgesetzt über feine Rasterzeilen (1 px) und eine Spannweite
   je Karte, die `leistungen.js` aus ihrer Höhe rechnet.
   ====================================================================== */
.leistungen[data-variante="1"] .spur{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--dn-min,264px)),1fr));
  column-gap:var(--dn-gap);
  row-gap:0;              /* der senkrechte Abstand steckt in der Spannweite */
  grid-auto-rows:1px;
  align-items:start;
}
/* Solange das Skript noch nicht gerechnet hat (oder ausfällt): normales
   Raster mit gleichem Abstand statt übereinanderliegender Karten. */
.leistungen[data-variante="1"] .spur:not([data-dicht]){
  grid-auto-rows:auto;
  row-gap:var(--dn-gap);
}

/* ======================================================================
   VARIANTE 2 — Spur
   Nah an der Vorlage: je Bereich eine waagerechte Spur, die Karten sind
   gleich hoch und gleich breit, gescrollt wird seitlich.
   ====================================================================== */
.leistungen[data-variante="2"] .spur{
  display:flex;gap:var(--dn-gap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  padding-bottom:16px;
  /* damit die Karten am rechten Rand nicht abgeschnitten wirken */
  -webkit-overflow-scrolling:touch;
  scrollbar-color:var(--line-2) transparent;
}
.leistungen[data-variante="2"] .dienst{
  flex:0 0 clamp(258px,25vw,310px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.leistungen[data-variante="2"] .dienst .bsp{margin-top:auto}
.leistungen[data-variante="2"] .spur::-webkit-scrollbar{height:6px}
.leistungen[data-variante="2"] .spur::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:99px;
}
.leistungen[data-variante="2"] .spur::-webkit-scrollbar-track{background:transparent}

/* Hinweis, dass hier gescrollt wird — sonst findet es niemand */
.leistungen[data-variante="2"] .bkopf::after{
  content:"Seitlich scrollen →";
  display:block;margin-top:14px;
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-3);
}

/* ======================================================================
   VARIANTE 3 — Faltung
   Die Grundkarte bleibt kurz. Wo es Beispiele gibt, klappen sie auf Klick
   auf. Kürzeste Sektion, aber ein Teil des Inhalts ist erst nach einer
   Handlung sichtbar.
   ====================================================================== */
.leistungen[data-variante="3"] .spur{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,264px),1fr));
  gap:var(--dn-gap);
  align-items:start;
}
.leistungen[data-variante="3"] .dienst[aria-expanded]{cursor:pointer;width:100%}
.leistungen[data-variante="3"] .dienst[aria-expanded] .bsp{
  display:grid;grid-template-rows:0fr;
  margin-top:0;padding-top:0;border-top:0;
  opacity:0;
  transition:grid-template-rows .45s var(--dn-ease),opacity .3s ease,
             margin-top .45s var(--dn-ease),padding-top .45s var(--dn-ease);
}
/* Die Liste braucht einen Wrapper mit overflow:hidden — bei grid-template-rows
   0fr→1fr ist das Kind der Wrapper. Deshalb overflow hier, nicht am li. */
.leistungen[data-variante="3"] .dienst[aria-expanded] .bsp > li{
  overflow:hidden;min-height:0;
}
.leistungen[data-variante="3"] .dienst[aria-expanded="true"] .bsp{
  grid-template-rows:1fr;opacity:1;
  margin-top:14px;padding-top:13px;border-top:1px dashed var(--line-2);
}
.leistungen[data-variante="3"] .mehr2{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);transition:color .25s ease;
}
.leistungen[data-variante="3"] .mehr2::after{
  content:"";width:8px;height:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .35s var(--dn-ease);
}
.leistungen[data-variante="3"] .dienst:hover .mehr2{color:var(--orange)}
.leistungen[data-variante="3"] .dienst[aria-expanded="true"] .mehr2::after{
  transform:translateY(1px) rotate(-135deg);
}
.leistungen[data-variante="3"] .zu2{display:none}
.leistungen[data-variante="3"] .dienst[aria-expanded="true"] .auf{display:none}
.leistungen[data-variante="3"] .dienst[aria-expanded="true"] .zu2{display:inline}

/* ======================================================================
   AUSBRUCH AUS DER LESESPALTE
   Alle Sektionen der Seite halten eine Lesespalte von 74 Zeichen. Für Text
   ist das richtig, für ein Kartenraster kostet es Spalten: Bei 1440 px
   bleiben 622 px übrig, also zwei Karten nebeneinander.

   `data-breite="voll"` gibt der Sektion die volle Restbreite. Überschrift
   und Vorspann bleiben trotzdem lesbar schmal — h2 hat 20ch, .lead 60ch und
   .bkopf 62ch als eigene Grenze, die greift unabhängig von der Spaltenbreite.
   ====================================================================== */
#leistungen .sec:has(.leistungen[data-breite="voll"]){
  grid-template-columns:var(--marg) minmax(0,1fr);
}

/* ---------- Handy ---------- */
@media(max-width:640px){
  .leistungen[data-variante="2"] .dienst{flex-basis:82%}
}

/* ======================================================================
   AM TELEFON ZUGEKLAPPT — ✅ Runde 20, Fassung n1

   Der Befund: Achtzehn Karten untereinander sind auf 375 px 6.391 Pixel am
   Stück, bei 15.729 px Gesamtseite über vierzig Prozent der Startseite.
   Zugeklappt sind es 1.155 px.

   Drei Zeilen statt achtzehn Karten: Jeder Bereich zeigt Nummer, Namen und
   seinen Satz, die Karten kommen auf Tippen. Der Schalter entsteht in
   leistungen.js.

   Alles hier gilt nur bis 700 px — dieselbe Grenze, an der auch die Menüleiste
   zum Schalter wird und die kleine Videofassung greift. Darüber stehen zwei
   bis drei Karten nebeneinander und die dichte Packung aus Runde 9 bleibt
   unangetastet: am Tablet (820 px) sind es zwei Spalten und 3.757 px, am
   Rechner (1440 px) ebenfalls zwei und 4.597 px.

   Die Karten selbst brechen erst unter rund 585 px auf eine Spalte um. Die
   Grenze bei 700 nimmt also einen schmalen Streifen mit, in dem schon zwei
   Spalten stünden — bewusst: Ein Gerät unter 700 px hält man in der Hand, und
   dort ist auch die halbe Länge noch zu viel. Eine eigene, dritte Grenze für
   diese eine Sektion wäre eine Zahl mehr, die niemand im Kopf hat.
   ====================================================================== */

/* Am Rechner muss der Schalter ganz weg, nicht nur durchsichtig: Ein Knopf,
   der sichtbar ist und nichts bewirkt, ist schlimmer als keiner — und ein nur
   durchsichtiger bliebe für die Tastatur erreichbar und führte ins Leere. */
.bmehr{display:none}

@media(max-width:700px){
  /* Volle Breite und 52 px hoch: ein Ziel, das der Daumen trifft, ohne zu
     zielen. Die Richtlinie nennt 24 px als Mindestmaß; das hier ist eine
     Zeile, kein Knöpfchen. */
  .bmehr{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    width:100%;margin-top:18px;min-height:52px;padding:0 16px;
    border:1px solid var(--line-2);border-radius:10px;
    background:color-mix(in srgb,var(--orange) 5%,transparent);
    font:inherit;font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
    text-transform:uppercase;color:var(--ink-2);
    cursor:pointer;text-align:left;
    transition:border-color .25s ease,color .25s ease;
  }
  .bmehr:hover,.bmehr:focus-visible{
    border-color:var(--orange);color:var(--orange);
  }
  /* Der Winkel dreht sich, statt dass zwei Zeichen getauscht werden: Ein
     Wechsel von ▾ zu ▴ springt, eine Drehung führt das Auge mit. */
  .bmehr .pfeil{
    flex:0 0 auto;width:11px;height:11px;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:translateY(-3px) rotate(45deg);
    transition:transform .3s cubic-bezier(.25,1,.5,1);
  }
  .bmehr[aria-expanded="true"] .pfeil{transform:translateY(2px) rotate(-135deg)}
  .bmehr .zu{display:none}
  .bmehr[aria-expanded="true"] .auf{display:none}
  .bmehr[aria-expanded="true"] .zu{display:inline}

  /* Das Qualitätsversprechen geht mit zu. Es gehört zum Inhalt des Bereichs,
     nicht zu seiner Überschrift — bliebe es stehen, wäre der zugeklappte
     Bereich 02 allein 296 px hoch und die halbe Ersparnis dahin.

     Der `:not()`-Vorbehalt hält die verworfenen Gegenvorschläge derselben
     Runde am Leben: `n2` und `n3` setzen ein Attribut am `<html>` und bringen
     ihre eigenen Regeln mit (leistungen-mobil.css). */
  html:not([data-dienste-mobil]) .bereich[data-offen="nein"] .spur,
  html:not([data-dienste-mobil]) .bereich[data-offen="nein"] .versprechen{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .dienst,.dienst .glanz,.dienst .sym,
  .bmehr,.bmehr .pfeil,
  .leistungen[data-variante="3"] .dienst .bsp,
  .leistungen[data-variante="3"] .mehr2::after{transition:none}
}

/* ---------------------------------------------------------------------------
   Materialtafel und "Fuer Betriebe" in Bereich 03 — neu am 06.10.2026 (W-216).

   GEMESSEN: Die Lesespalte in #leistungen ist bei 1400 px Fenster nur 622 px
   breit — die Randspalte der Sektion nimmt den Rest. Eine dreispaltige Tafel
   (Einsatzfall | Material | Eigenschaft) quetscht die dritte Spalte auf 148 px
   und zerreisst den Satz. Deshalb zwei Zeilen je Eintrag: oben Einsatzfall und
   Materialnamen nebeneinander, darunter die Eigenschaft ueber die volle Breite.

   Beide Raster rechnen mit auto-fit gegen die BEHAELTERbreite, nicht mit
   Medienabfragen gegen die FENSTERbreite: Der Behaelter ist hier schmaler als
   das Fenster, eine Abfrage auf 860 px haette am Schreibtisch nie gegriffen.
   --------------------------------------------------------------------------- */
.mtafel{
  margin:clamp(18px,2.2vw,28px) 0 clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line-2);
  padding-top:16px;
}
.mt-kopf{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;color:var(--orange);margin-bottom:12px;
}
.mt-z{
  display:grid;grid-template-columns:minmax(0,190px) 1fr;
  column-gap:clamp(12px,1.6vw,22px);row-gap:5px;
  padding:11px 0;
  border-bottom:1px solid color-mix(in srgb,var(--line-2) 60%,transparent);
}
.mt-k{
  grid-column:1;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.09em;
  font-size:15px;line-height:1.2;color:var(--ink);
}
.mt-m{
  grid-column:2;align-self:baseline;
  font-size:12.5px;letter-spacing:.04em;color:var(--orange);line-height:1.35;
}
.mt-t{
  grid-column:1 / -1;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:72ch;
}
@media (max-width:620px){
  .mt-z{grid-template-columns:1fr;row-gap:4px}
  .mt-k,.mt-m,.mt-t{grid-column:1}
}
.mt-fuss{margin-top:14px;font-size:13px;line-height:1.65;color:var(--ink-3);max-width:80ch}

.fbetrieb{
  margin-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--line-2);
  padding-top:20px;
}
.fb-kopf{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;color:var(--orange);margin-bottom:14px;
}
.fb-drei{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:clamp(14px,1.8vw,26px);
}
.fb-p{border-left:2px solid var(--line-2);padding-left:14px}
.fb-p h4{font-family:var(--font-display);text-transform:uppercase;font-size:16px;line-height:1.15;margin-bottom:8px}
.fb-p p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}