/* =====================================================================
   WEBSITES KOMPAKT — /websites und /en/websites auf dem Handy kuerzer
   Stand 17.10.2026. Gehoert zu /assets/js/websites-kompakt.*.js.

   Rueckmeldung: auf dem Handy ist der Scrollweg viel zu lang. Gemessen bei
   390x844: 14.765px = 17,5 Bildschirme. Die groessten Posten waren
   Branchen 2.662px, Preis 2.338px, Regionen 1.606px und Leistungen 1.446px.

   Drei Werkzeuge:
   1. KLAPPLISTE fuer Branchen und Regionen, bis 900px. Ab dort stehen beide
      Raster ohnehin einspaltig, also sechs bzw. vier volle Karten
      untereinander, auch auf dem Tablet im Hochformat. Die Namen bleiben auf einen
      Blick lesbar, so kann man schnell nach der eigenen Branche oder dem
      eigenen Ort suchen. Text, Begriffe und Ortslisten bleiben im HTML.
      Suchmaschinen lesen sie weiter, und die Seitensuche des Browsers
      klappt einen Treffer dank hidden="until-found" selbst auf.
      Optik wie bei den Fragen weiter unten: Haarlinie, Winkel, kein Kasten.
   2. WISCHREIHE fuer Preisfaktoren und Leistungen, bis 700px (dieselbe
      Grenze wie bei Buehne und Begriffszeilen; darueber stehen beide
      zweispaltig und sind kurz genug). Das sind gleichrangige
      Karten, die man nicht in einer Reihenfolge lesen muss. Die naechste
      Karte schaut rechts an, die Punkte darunter zeigen den Stand. Bei
      Listen, die man nur ueberfliegt (Branchen, Begriffe), bleibt es
      bewusst beim Senkrechten, siehe Kommentar zu .tags in websites.css.
   3. ZWISCHEN-CTA nach der Kundenstimme, auf allen Breiten. Danach kam
      bisher der naechste Knopf erst am Seitenende.

   Ohne das Skript bleibt alles wie vorher: offen und untereinander.
   ===================================================================== */

/* ---- 3. Zwischen-CTA: das blaue Band -------------------------------
   Die EINE Stelle, die bewusst aus dem kantigen Raster ausbricht (Wunsch
   vom 17.10.2026): ein vollbreites blaues Band zwischen Kundenstimme und
   Branchen, dessen Unterkante als weicher Bogen ins Weiss auslaeuft.
   Alles andere bleibt bei "Flaechen scharf, Bedienelemente rund"; die
   Ausnahme wirkt nur, solange sie die einzige bleibt.
   - KANTE: eine einzige Parabel direkt von Ecke zu Ecke, auf allen
     Breiten, ohne gerades Stueck am Rand. Tiefe 10 % der Breite, hoechstens
     40px + 3vw (390px: 39px, 1280px: 78px, 1920px: 98px). Bis 17.10.
     waren es 12 % und 70px + 4,5vw (1280px: 128px); das Band wirkte wuchtig
     und unter dem Inhalt stand viel leeres Blau.
   - INHALT: Titel, ein Satz, zwei klare Knoepfe (Anfrage per Mail, Anruf)
     und darunter "Deine Anfrage ist unverbindlich." Der Block steht
     optisch mittig: oben mehr Luft, unter dem Hinweis weniger, weil der
     Bogen selbst nach unten Gewicht hat.
   Verworfen: ein Smiley mit Glas-Augen (Zwinkern, Mausblick, Rundblick)
   und den beiden Links als Worte im Bogen, die einen Mund bildeten. Nett
   gedacht, passte aber nicht zur modernen, cleanen, professionellen Art
   der Seite. Davor: Knoepfe als Augen, schwarze Mundstriche und auf dem
   Desktop ein auf die Mitte begrenzter Bogen (mit Gesicht noetig, ohne
   wirkte er ausgestanzt).
   Farbe: Navy ueber Markenblau bis Cyan, senkrecht verlaufend, mit feiner
   Koernung und Lichtschein. Das helle Cyan und der Schein sitzen nur im
   Bauch des Bogens (Stop an --mund-t gebunden), wo kein Text steht: Alles
   darueber bleibt tiefblau, damit weisse Schrift reicht. Vorher lag der
   Schein hinter den Knoepfen; weisse Ghost-Schrift kam dort nur auf
   2,5:1 bis 4,3:1. */
.zwischen-cta{
  --mund-b:100vw;                        /* Breite des Bogens */
  --mund-t:min(calc(var(--mund-b) * .1),calc(40px + 3vw));       /* Tiefe des Bogens */
  --tinte:#0c1e33;
  position:relative;
}
.zwischen-cta__band{
  position:relative;isolation:isolate;
  padding:clamp(48px,6.2vw,84px) var(--page) calc(var(--mund-t) + clamp(22px,2.2vw,28px));
  text-align:center;
}
/* Die Flaeche liegt auf ::before und nicht auf dem Band selbst: So schneidet
   die Maske nur die Flaeche und nichts, was spaeter ueber die Kante ragt.
   Zwei Masken-Ebenen: oben voll, unten der Bogen ueber die ganze Breite
   (100 %). 1px Ueberlapp, damit an der Naht keine Haarlinie stehen bleibt.
   Die Kurve (Einheiten 1000 x 100) ist eine einzige Parabel von Ecke zu
   Ecke mit tiefstem Punkt 500|100: M0 0 Q500 200 1000 0. Fruehere Formen
   mit kurzen Schultern am Rand wirkten an den Seiten gerade. */
.zwischen-cta__band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(42% calc(var(--mund-t) + 44px) at 50% 100%,rgba(120,222,255,.45),transparent 72%),
    radial-gradient(60% 46% at 50% 0%,rgba(255,255,255,.12),transparent 70%),
    linear-gradient(180deg,#0a2e78 0%,#0e4bb0 40%,#1561cc calc(100% - var(--mund-t) - 8px),#27b2f7 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - var(--mund-t) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q500 200 1000 0Z'/%3E%3C/svg%3E") bottom/100% var(--mund-t) no-repeat;
          mask:
    linear-gradient(#000 0 0) top/100% calc(100% - var(--mund-t) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q500 200 1000 0Z'/%3E%3C/svg%3E") bottom/100% var(--mund-t) no-repeat;
}
.zwischen-cta__innen{
  position:relative;max-width:var(--wrap);margin:0 auto;
  display:grid;justify-items:center;
}
.zwischen-cta__titel{
  margin:0 0 clamp(14px,1.6vw,18px);max-width:24ch;color:#fff;
  font-size:clamp(1.6rem,3.3vw,2.5rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.08;
  text-wrap:balance;
}
.zwischen-cta__text{
  margin:0;max-width:52ch;color:rgba(255,255,255,.9);
  font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.55;
}
/* Zwei klare Knoepfe, eckig und so hoch wie .web-btn ("Flaechen scharf"):
   Anfrage als weisser Hauptknopf, Anruf als Ghost-Knopf (durchsichtig,
   weisse Schrift, feine weisse Linie), damit der Hauptknopf allein die
   Buehne hat. Bis 17.10. war der Anruf ein voller Navy-Block, der neben
   dem Weiss schwer und blockig wirkte. Cyan scheidet aus, es sticht auf
   dem Blau kaum ab. */
.zwischen-cta__knoepfe{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:clamp(26px,3.2vw,36px) 0 0;
}
.zwischen-cta__knopf{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:52px;padding:0 26px;border-radius:0;
  border:1.5px solid rgba(255,255,255,.78);
  background:transparent;color:#fff;font-weight:700;font-size:1rem;
  text-decoration:none;
  transition:transform .15s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.zwischen-cta__knopf--haupt{border-color:#fff;background:#fff;color:var(--tinte)}
.zwischen-cta__knopf:hover{transform:translateY(-1px);border-color:#fff;background:rgba(255,255,255,.12)}
.zwischen-cta__knopf--haupt:hover{background:#fff;box-shadow:0 12px 26px rgba(2,18,60,.35)}
.zwischen-cta__knopf:focus-visible{outline:2.5px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .zwischen-cta__knopf{transition:none}
  .zwischen-cta__knopf:hover{transform:none}
}
/* Ab 861px: ein handgezeichneter Pfeil links vor den Knoepfen. Er laeuft
   als flacher, gleichmaessiger Bogen wie eine Klammer (etwa 60 Grad, kein
   rechter Winkel) schraeg von oben in "Jetzt anfragen". Nur
   Schmuck (Hintergrundbild am ::before). Darunter fehlt links der Platz,
   auf dem Handy stehen die Knoepfe ohnehin in voller Breite. */
@media(min-width:861px){
  .zwischen-cta__knoepfe{position:relative}
  .zwischen-cta__knoepfe::before{
    content:"";position:absolute;left:-124px;top:-64px;width:120px;height:102px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 110'%3E%3Cpath d='M14.9 5.9C16.4 9.2 20.4 19.0 24.1 25.5C27.8 32.0 32.7 39.0 37.3 45.0C41.8 51.0 46.2 56.6 51.5 61.5C56.8 66.5 62.9 70.6 69.0 74.6C75.2 78.7 81.4 82.9 88.2 85.8C95.0 88.7 106.4 91.0 110.0 92.0M15.2 5.7C16.8 9.3 21.2 20.8 24.7 27.2C28.2 33.7 31.8 38.5 36.2 44.3C40.6 50.1 45.3 57.0 50.9 62.1C56.4 67.3 63.0 71.4 69.3 75.2C75.6 79.0 82.0 82.0 88.8 84.8C95.5 87.6 106.5 90.8 110.0 92.0M110.7 92.5Q103.0 94.9 94.8 96.0M110.1 91.8Q102.1 94.5 96.4 96.6M111.8 91.7Q106.4 87.2 99.7 81.0M111.8 91.6Q106.4 87.7 98.3 82.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
    opacity:.92;pointer-events:none;
  }
}
/* Messflaeche fuer die Menuepunkte (edge-nav.js, data-edge-dark): deckt nur
   das echte Blau. An der Stelle der Punkte (x = Breite - 41px) reicht das
   Blau noch etwa 13px unter den Bogenansatz, der Rest des Kastens ist dort
   schon weiss. Unsichtbar, keine Klicks. */
.zwischen-cta__flaeche{position:absolute;left:0;right:0;top:0;bottom:calc(var(--mund-t) - 13px);pointer-events:none}
/* Handy: beide Knoepfe volle Breite untereinander. */
@media(max-width:560px){
  .zwischen-cta__knoepfe{width:100%;max-width:420px}
  .zwischen-cta__knopf{flex:1 1 100%}
}
/* Feine Zusatzzeile unter den Knoepfen, weiss wie der restliche Text.
   Bis 17.10. Navy, solange das Blau dort schon hell war; seit das Cyan
   nur noch im Bogen sitzt, ist Navy dort zu schwach und Weiss reicht. */
.zwischen-cta__hinweis{
  margin:16px 0 0;color:rgba(255,255,255,.92);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
}

/* ---- 4. Branchen-Avatare ------------------------------------------
   Freigestellte Portraets (KI, keine echten Kunden, darum ohne Namen und
   aria-hidden) ragen aus einem Kreis in der Farbe ihrer Branche: hell
   gefuellt, Ring in der vollen Branchenfarbe. Unten ist der Kasten rund
   beschnitten, oben gerade, so ragt der Kopf ueber den Kreis hinaus.
   Sitzt vor dem Namen: auf dem Handy in der Klappzeile (statt des
   Farbstrichs), auf dem Desktop links neben dem Kartentitel. */
.branche__kopf{
  --kopf:68px;
  position:relative;display:block;flex:0 0 auto;
  width:var(--kopf);height:calc(var(--kopf) * 1.25);
  border-radius:0 0 999px 999px;overflow:hidden;
}
.branche__kopf::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--kopf);
  border-radius:50%;background:var(--bra-hell,var(--paper));
  box-shadow:inset 0 0 0 2px var(--bra,var(--navy));
}
.branche__kopf img{
  position:absolute;left:50%;bottom:0;display:block;
  width:120%;height:auto;max-width:none;transform:translateX(-50%);
}
.branche h3:has(> .branche__kopf){display:flex;align-items:flex-end;gap:16px}
.branche h3:has(> .branche__kopf) + p{margin-top:14px}

/* Grenzen muessen zu MQ_KLAPP und MQ_WISCH in websites-kompakt.*.js passen. */
@media(max-width:900px){

  /* ---- 1. Klappliste ------------------------------------------------- */
  .klappliste{display:block;border-top:1px solid var(--line)}
  /* Die Karte loest sich in eine Zeile auf: kein Kasten, keine Standkante
     (Branchen), keine cyane Oberkante (Regionen). Getrennt wird mit der
     Haarlinie, wie bei den Fragen. */
  .klappliste > .ist-klapp{
    margin:0;padding:0;border:0;border-bottom:1px solid var(--line);
    border-radius:0;background:none;box-shadow:none;
  }
  .klappliste > .ist-klapp::before,
  .klappliste > .ist-klapp::after{display:none}
  .klappliste > .ist-klapp h3{
    margin:0;font-size:1.06rem;font-weight:640;letter-spacing:-.01em;line-height:1.3;
  }
  .klapp__knopf{
    display:flex;align-items:center;gap:14px;
    width:100%;min-height:58px;margin:0;padding:15px 4px;
    border:0;border-radius:0;background:none;color:var(--ink);
    font:inherit;text-align:left;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s ease;
  }
  /* Winkel wie bei .faq__item summary::after — derselbe Baustein, nicht
     ein zweiter, der nur aehnlich aussieht. */
  .klapp__knopf::after{
    content:"";flex:0 0 auto;width:11px;height:11px;margin:0 4px 0 auto;
    border-right:2.4px solid var(--cyan-ink);border-bottom:2.4px solid var(--cyan-ink);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease;
  }
  .klapp__knopf[aria-expanded="true"]{color:var(--cyan-ink)}
  .klapp__knopf[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
  .klapp__knopf:focus-visible{outline:2.5px solid var(--cyan-ink);outline-offset:-2px}
  /* Polster nur, wenn offen: hidden="until-found" laesst den Kasten stehen
     (content-visibility statt display:none), sonst blieben zugeklappt
     22px Luft unter jeder Zeile. */
  .klapp__inhalt:not([hidden]){padding:0 4px 22px}

  /* Branchen: die Farbe je Branche steckt im Avatar-Kreis vor dem Namen.
     Fehlt der Avatar, bleibt die schmale Farbmarke als Rueckfall. */
  .branche.ist-klapp .klapp__knopf::before{
    content:"";flex:0 0 auto;width:3px;height:22px;background:var(--bra,var(--navy));
  }
  .branche.ist-klapp .klapp__knopf:has(> .branche__kopf)::before{display:none}
  .branche.ist-klapp .branche__kopf{--kopf:46px}
  .branche.ist-klapp .klapp__knopf:has(> .branche__kopf){padding-top:8px;padding-bottom:8px}
  .branche.ist-klapp .klapp__inhalt > p{margin:0 0 12px;font-size:.98rem}

  /* Regionen: Die Marke "Unser Standort" steht rechts in der Zeile vor dem
     Winkel und ist aus dem Fluss genommen. So ist die Zeile Niederkassel
     genauso hoch wie die anderen und der Name sitzt auf derselben Hoehe.
     Ein Tipp aufs Label geht an den Knopf darunter. */
  .region.ist-klapp{position:relative}
  .region.ist-klapp .region__marke{
    position:absolute;top:29px;right:30px;margin:0;
    transform:translateY(-50%);pointer-events:none;
    /* etwas enger als sonst, damit es bei 320px nicht am Namen klebt */
    font-size:.68rem;letter-spacing:.08em;
  }
  .region.ist-klapp .klapp__inhalt > p{margin:0 0 12px}
  .region.ist-klapp .region__mehr{margin-top:16px}

  /* Die Notiz darunter stand auf Abstand zu Karten mit Standfuss. */
  .klappliste + .branchen__note,
  .klappliste + .regionen__note{margin-top:28px}
}

@media(max-width:700px){

  /* ---- 2. Wischreihe ------------------------------------------------- */
  /* Die Reihe laeuft bis an beide Bildkanten (negatives --page) und haelt
     mit gleich grossem padding den Text der ersten Karte auf der Flucht
     der Ueberschrift. scroll-padding sorgt dafuer, dass jede Karte an
     derselben Flucht einrastet. */
  .preis__grid.wisch,
  .umfang__grid.wisch{
    display:flex;gap:12px;max-width:none;
    margin-left:calc(var(--page) * -1);margin-right:calc(var(--page) * -1);
    padding:2px var(--page) 4px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--page);
    scrollbar-width:none;
    background:none;border:0;border-radius:0;
  }
  .wisch::-webkit-scrollbar{display:none}
  /* 84%: die naechste Karte schaut gut 60px herein. Das ist genug, damit
     sie als Karte erkennbar ist und nicht wie ein abgeschnittener Rand. */
  .wisch > *{flex:0 0 84%;max-width:340px;min-width:0;scroll-snap-align:start}
  /* Die Leistungen hatten Haarlinien-Fugen aus dem Hintergrund des Rasters.
     In der Reihe traegt jede Karte ihren eigenen Rahmen. */
  .umfang__grid.wisch > .feat{border:1px solid var(--line)}
  .wisch:focus-visible{outline:2.5px solid var(--cyan-ink);outline-offset:-3px}
  /* Karten rechts ausserhalb des Bildes werden vom Einblenden nie
     "gesehen". Das Skript setzt is-in, diese Regel sichert es ab. */
  .rv-on .wisch > .rv{opacity:1;transform:none}

  .wisch__punkte{display:flex;justify-content:center;gap:7px;margin:16px 0 0}
  .wisch__punkte i{
    display:block;width:7px;height:7px;border-radius:4px;
    background:rgba(98,116,134,.32);
    transition:width .25s ease,background-color .25s ease;
  }
  .wisch__punkte i.ist-an{width:20px;background:var(--cyan-ink)}
}

@media(prefers-reduced-motion:reduce){
  .klapp__knopf,.klapp__knopf::after,.wisch__punkte i{transition:none}
}

/* ---- 5. Unterer Teil: Farbe und Karte --------------------------------
   Nach dem Takt liefen Preis, Leistungen, Regionen und Fragen in denselben
   hellen Kaesten mit duennen grauen Icons hintereinander, auf dem Handy
   ueber 4.000px ohne Bild. Ein Akzent aus der Sprache des Smiley-Bands
   lockert das auf. Die Rundung wiederholt er nicht, die bleibt dem
   Band; Takt und Abschluss bleiben fast schwarz.
   - Die Festpreis-Zusage (.zusage) steht als Panel im Blau des Bands:
     Verlauf Navy bis Blau, Koernung, schwacher Lichtschein in der Ecke,
     weisse Schrift.
   Ausprobiert und verworfen: eine schematische Rhein-Karte ueber den
   Regionen und die Leistungs-Icons in Verlaufskacheln (.feat__ico bleibt
   wie im Perf-Bundle). */
.zusage{
  position:relative;overflow:hidden;border:0;color:#e8f1fa;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(38% 80% at 100% 0%,rgba(39,178,247,.26),transparent 70%),
    linear-gradient(135deg,#0a2e78 0%,#0e4bb0 70%,#1462d0 100%);
}
.zusage h3,.zusage__punkte strong{color:#fff}
.zusage>div>p{color:rgba(232,241,250,.88)}
.zusage__ico{color:#7fd8ff}
.zusage__punkte li{color:rgba(240,246,252,.94)}
.zusage__punkte li:before{background:#7fd8ff}
/* Zweispaltig (ab 901px): Die Haekchenliste beginnt auf Hoehe der
   Ueberschrift statt senkrecht mittig. Versatz = Icon (26px) + Abstand
   (14px) + halber Unterschied der ersten Zeilenhoehen, damit die erste
   Haekchenzeile mittig zur ersten Ueberschriftzeile steht. */
@media(min-width:901px){
  .zusage{align-items:start}
  .zusage__punkte{margin-top:calc(42px + (clamp(1.3rem,2.1vw,1.65rem) * 1.2 - 1.45rem) / 2)}
}

/* Messflaeche fuer die Menuepunkte ueber dem blauen Festpreis-Panel. Nur bis
   480px: Die Punkte sitzen bei Breite - 28..24px, das Panel endet bei Breite
   minus --page (22px bis 480px, darueber 5vw). Breiter laufen die Punkte am
   weissen Rand neben dem Panel vorbei und muessen dunkel bleiben; display:none
   gibt einen leeren Kasten, der nichts ueberdeckt. */
.zusage{position:relative}
.zusage__flaeche{display:none}
@media(max-width:480px){.zusage__flaeche{display:block;position:absolute;inset:0;pointer-events:none}}

/* "Preis anfragen" unter dem Festpreis-Panel ist ein echter Knopf (.web-btn,
   das Cyan der Seite), kein Textlink mehr: Direkt nach dem Preis ist das
   Interesse am groessten, der kleine Link ging dort unter (Wunsch 17.10.).
   Eigene Zeile, mittig; auf dem Handy volle Breite wie die anderen Knoepfe. */
.preis__laufend .preis__knopf{display:flex;width:fit-content;margin:clamp(18px,2.2vw,24px) auto 0}
@media(max-width:560px){.preis__laufend .preis__knopf{width:100%;max-width:420px}}

/* ---- 6. Takt mit Bogen oben -----------------------------------------
   Gegenstueck zum blauen Band: Oben senkt sich der helle Ablauf als Bogen
   in den fast schwarzen Takt ("Deine Kunden suchen abends um zehn"),
   dieselbe Kurve und Tiefe wie die Unterkante des Bands (eine Parabel von
   Ecke zu Ecke). ::before legt diese
   Bogenflaeche in --paper, der Farbe des Ablaufs direkt darueber, oben
   in den Takt. Steht dort einmal ein anderer Abschnitt, muss die Farbe
   mit. */
.takt{
  --bogen-t:min(10vw,calc(40px + 3vw));   /* = --mund-t des Bands */
  padding-top:calc(var(--bogen-t) + clamp(52px,7vw,104px));
}
/* Die 22:00 im Hintergrund ist eine Spur heller als in websites.css
   (dort Weiss .05, Handy .042): gemessen etwa 7 Punkte mehr Helligkeit
   (L* rund 14 statt 7 auf #020914). Sie bleibt Flaeche, kein Text. */
.takt__uhr{color:rgba(255,255,255,.11)}
@media(max-width:700px){.takt__uhr{color:rgba(255,255,255,.095)}}
/* Messflaeche fuer die Menuepunkte: der helle Bogen oben reicht an der Stelle
   der Punkte etwa 13px in den Takt, erst darunter ist er schwarz. */
.takt__flaeche{position:absolute;left:0;right:0;top:13px;bottom:0;pointer-events:none}
.takt::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:0;
  height:var(--bogen-t);background:var(--paper);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q500 200 1000 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q500 200 1000 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}

/* ---- 7. Figur im Abschluss -----------------------------------------
   Eine freigestellte Zeichnung (Mann am Laptop, Fuesse hoch) im dunklen
   Abschluss (#kontakt, Klasse cta--figur nur auf /websites; finale.css
   gilt auch fuer /shops und /software und bleibt unberuehrt). Sie fuellt
   die leere rechte Haelfte und erzaehlt die Zeile daneben mit: "kein
   Druck". Unten ist das Bild angeschnitten (Stuhlbeine, Jacke), deshalb
   sitzt es immer genau auf der Unterkante des Abschnitts; die Footerlinie
   wirkt als Boden. Der Muelleimer aus dem Rohbild ist herausgenommen.
   - ab 861px: absolut unten rechts neben dem Text, 380 bis 620px breit.
   - darunter: im Fluss unter den Links, rechtsbuendig, hoechstens 440px.
     Eine 1fr-Zeile vor der Figur haelt den Text oben und die Figur auf
     der Kante, auch auf hohen Handys (finale.css zentriert sonst alles
     senkrecht, dann schwebte sie ueber dem Boden).
   Nur Schmuck: alt="", lazy, keine Klicks. */
.cta--figur > .cta__figur{display:block;height:auto;pointer-events:none;-webkit-user-select:none;user-select:none}
@media(min-width:861px){
  .cta--figur > .cta__figur{position:absolute;z-index:1;right:var(--page);bottom:0;width:clamp(380px,40vw,620px)}
}
@media(max-width:860px){
  .cta--figur{align-content:stretch;grid-template-rows:auto auto auto auto 1fr}
  .cta--figur > .cta__figur{align-self:end;justify-self:end;width:min(100%,440px);margin:30px 0 calc(-1 * clamp(22px,4vh,64px))}
}

/* ---- 8. Footer aufgeraeumt ------------------------------------------
   Vorher eine lange Linkkette mit Mittelpunkten, die auf dem Handy in drei
   unruhige Zeilen brach (Wunsch 17.10.: aufraeumen). Jetzt EINE Linkliste
   ohne Trennpunkte, darunter nach einer Haarlinie (c), Impressum und
   Datenschutz. Eine Zwischenfassung mit zwei Gruppen und Mono-Ueberschriften
   ("Auf dieser Seite" / "Mehr von SNX") las sich wie zwei Footer.
   - Handy/Tablet: Links in zwei Spalten, jeder Link mit Polster auf 28px
     Hoehe zum Tippen.
   - ab 861px: Links in einer Zeile (bricht bei Bedarf um).
   Listenlinks ohne Unterstreichung, beim Zeigen weiss und unterstrichen;
   Impressum, Datenschutz und Analyse-Einstellungen unterstrichen. Auf #020914: Links 12:1,
   (c) 7:1. */
.web-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;
  padding:clamp(28px,3.6vw,36px) var(--page) clamp(22px,3vw,28px)}
.web-foot__links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,4vw,40px)}
.web-foot__links a{display:inline-block;padding:5px 0;line-height:1.35;color:#c4d2e0;text-decoration:none}
.web-foot__links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.web-foot{row-gap:16px}
.web-foot__nav{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)}
.web-foot__recht{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;color:#8ea1b5;font-size:.85rem}
/* Live (nur auf snxcloud.de) haengt snx-analytics.js einen Knopf
   .snx-analytics-settings ("Analyse-Einstellungen") ans Ende des Footers, den
   Weg zurueck in die Cookie-Wahl. Lokal fehlt er, darum fiel er erst live auf:
   als Raster-Kind stand er gestreckt und mittig als eigene Zeile darunter.
   Jetzt sieht er aus wie ein weiterer Rechtslink: auf dem Handy linksbuendig
   unter der Rechtszeile, ab 861px direkt hinter "Datenschutz". Die Haarlinie
   haengt deshalb unter der Linkliste statt ueber der Rechtszeile. */
.web-foot > .snx-analytics-settings{justify-self:start;margin:-8px 0 0;padding:4px 0;border:0;border-radius:0;
  background:none;color:#c4d2e0;font:inherit;font-size:.85rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.web-foot > .snx-analytics-settings:hover{color:#fff}
.web-foot__recht a{color:#c4d2e0;text-decoration:underline;text-underline-offset:3px}
.web-foot__recht a:hover{color:#fff}
@media(min-width:861px){
  .web-foot__links{display:flex;flex-wrap:wrap;gap:2px 26px}
  .web-foot__links a{padding:3px 0}
  .web-foot{grid-template-columns:auto minmax(0,1fr);column-gap:18px}
  .web-foot__nav{grid-column:1 / -1}
  .web-foot__recht{grid-column:1}
  .web-foot > .snx-analytics-settings{grid-column:2;grid-row:2;align-self:center;margin:0;padding:0}
}

/* ---- 9. Abschluss allein im Bild -------------------------------------
   finale.css legt Abschluss + Footer zusammen auf GENAU einen Bildschirm.
   Auf /websites (Klasse cta--figur) fuellt der Abschluss den Schirm unter
   der Kopfleiste allein, auf allen Breiten (Wunsch 17.10.): Die Figur steht
   auf der Bildschirmkante statt auf einem hereinragenden Footer, und im
   entscheidenden Moment lenkt keine Linkliste ab. Der Footer folgt erst
   beim Weiterscrollen; ganz am Seitenende rutscht der Abschluss dafuer um
   die Footerhoehe nach oben. Bis 700px blendet hero.js die Kopfleiste beim
   Runterscrollen aus, dort zaehlt der ganze Schirm. lvh (Schirm bei
   EINGEKLAPPTER Browserleiste): Wer zum Abschluss scrollt, hat die Leiste
   eingeklappt. Bis 17.10. stand hier svh (Leiste ausgeklappt); dann blieb
   beim Scrollen genau die Leistenhoehe (rund 56px) frei und der Footer
   ragte herein, gemeldet auf Android. Headless-Tests sehen das nicht, dort
   gibt es keine Leiste. vh davor als Rueckfall. */
body.web .cta.cta--figur{min-height:calc(100vh - var(--nav-hoehe,80px));min-height:calc(100lvh - var(--nav-hoehe,80px))}
@media(max-width:700px){
  body.web .cta.cta--figur{min-height:100vh;min-height:100lvh}
}

/* ---- 10. Mobil-Menue (edge-menu) -----------------------------------
   Der Anfrage-Knopf im Menue sieht aus wie der Hauptknopf der Seite (.web-btn):
   volle Breite, 52px hoch, eckig, Text mittig ohne Sperrung. Vorher stand er
   aus edge-nav.css klein, gesperrt (.05em), linksbuendig und mit 30px
   Seitenpolster; "Enquire without obligation" brach so in zwei Zeilen. EN heisst
   er im Menue deshalb "Enquire now" wie im blauen Band. Die Nummern 01-05 vor
   den Abschnitten sind aus dem Markup entfernt (Wunsch 17.10.); kein Skript
   nutzt sie. !important, weil edge-nav.css Polster, Groesse und Sperrung so setzt. */
.edge-menu>a.edge-menu__cta{align-self:stretch;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;min-height:52px;margin-top:26px;padding:12px 18px!important;border-radius:0;
  font-size:1rem!important;font-weight:700;letter-spacing:0!important;line-height:1.25;text-align:center}
.edge-menu>a.edge-menu__ab{gap:0}

/* ---- 11. Hinweiszeilen mittig im Weissraum ---------------------------
   Die Zeilen am Ende von Preis, Branchen, Regionen und Fragen ("Deine Branche
   ist nicht dabei?" usw.) standen nah an der Liste darueber (Handy 10-28px)
   und hatten darunter die volle Sektionspolsterung (52px, Desktop 90px). Jetzt
   ist der Abstand oben gleich dem unten: dieselbe clamp() wie das padding der
   Sektionen, die Zeile steht mittig im Weissraum (Wunsch 17.10.). Selektor mit
   section davor, damit er die Klapplisten-Regel (.klappliste + ...) schlaegt. */
section.preis .preis__laufend,section.branchen .branchen__note,
section.regionen .regionen__note,section.faq .faq__note{margin-top:clamp(52px,7vw,100px)}

/* ---- 12. Knopf in der Kachel "Dein Projekt" (Vorschau-Geraet) -------
   Die Kachel ist im Handy-Mockup nur 225 bis 270px breit; "Enquire without
   obligation" (EN) und bei 320px auch "Unverbindlich anfragen" brachen dort in
   zwei Zeilen und wurden in die 46px Hoehe gequetscht. Seit 17.10. steht dort
   der kurze Text des blauen Bands ("Jetzt anfragen" / "Enquire now") und der
   Knopf bricht nie um. */
.neu .web-btn{white-space:nowrap}

/* ---- 13. Hero-Ueberschrift auf dem Handy ----------------------------
   Bis 18.10. brach die Ueberschrift auf dem Handy nach "die" um ("Eine
   Website, die / Kunden bringt."), das "die" hing allein am Zeilenende. Jetzt
   haelt .h1zeile "die Kunden bringt." ohne Umbruch zusammen, die Zeile bricht
   also nach "Website," (Wunsch 18.10.). Passt die ganze Ueberschrift in eine
   Zeile (etwa ab 550px), bleibt sie einzeilig wie vorher. Die Zeile ist 8,3em
   breit, die Schrift bleibt 2.1rem und schrumpft erst unter etwa 330px Breite
   (bzw. bei vergroesserter Systemschrift), damit sie zwischen die 22px Raender
   passt. Ab 701px bleibt alles wie vorher. Auf Englisch fehlt .h1zeile, dort
   bricht die Zeile wie bisher, nur die Schrift folgt unter 330px derselben
   Grenze. */
@media(max-width:700px){
  .stage__text h1{font-size:min(2.1rem,calc((100vw - 44px) / 8.6))}
  .stage__text h1 .h1zeile{white-space:nowrap}
}

/* ---- 14. Leistungen mit neun Karten (25.10.2026) ------------------- */
/* Seit dem 25.10.2026 stehen unter "Alles dabei" neun Leistungen (dazu KI-Suche,
   Bild- und Videobearbeitung, Flyer und Print). Am Rechner ergibt das 3 x 3.
   Zwischen 701 und 900px steht das Raster zweispaltig; ohne diese Regel bliebe
   rechts unten ein leeres Feld in der Linienfarbe des Rasters. Die letzte Karte
   geht dort ueber beide Spalten. Bis 700px laeuft die Wischreihe (Abschnitt 2),
   ab 901px drei Spalten; beide bleiben unberuehrt. */
@media(min-width:701px) and (max-width:900px){
  .umfang__grid > .feat:last-child:nth-child(odd){grid-column:1 / -1}
}