/* lr-job.eu · anfass.css (30.10.2026): neun Bausteine + Unterseiten-Einbau · Copyright ONLINE NETWORK VISION S.L. · Kennung lrj-anfass-20261030 */
/* ============================================================
   Bausteinlager „Deine neue Webseite" — tastknopf.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-tastknopf-20261029
   Ein Knopf, den man wirklich drückt: Fläche liegt auf einer Wand, beim Drücken sinkt sie ein,
   beim Loslassen federt sie zurück. Eigene Umsetzung (Idee: physische Knöpfe), kein fremder Code.
   EINBAU:
     <a class="tastknopf" href="tel:+49…"><span class="tk-flaeche"><svg …/>Jetzt anrufen</span></a>
     <button class="tastknopf -hell" type="button"><span class="tk-flaeche">Mehr erfahren</span></button>
   Farben: kommen ohne Zutun aus glas.css (--signal, --signal-hell, --signal-tief). Eigene Farbe für
   einen einzelnen Knopf: data-farbe="#2F4F46" (tastknopf.js rechnet Licht, Wand und Schriftfarbe).
   Größen: .-klein / .-gross. Rund statt Kapsel: style="--tk-r:14px".
   REGELN: Kein stehendes transform auf Text — die Fläche sinkt über `top`, nicht über transform.
   :hover nur unter (hover:hover) and (pointer:fine). Reduzierte Bewegung: keine Übergänge.
   ============================================================ */
.tastknopf{
  --tk-farbe:var(--signal,#306CC0);
  --tk-hell:var(--signal-hell,#3A86E0);
  --tk-kante:var(--signal-tief,#1F4E8C);
  --tk-text:#fff;
  --tk-tiefe:6px;
  --tk-r:999px;
  --tk-schatten:rgba(10,20,30,.34);
  position:relative;display:inline-flex;vertical-align:top;
  margin:0 0 var(--tk-tiefe);padding:0;border:0;background:none;
  border-radius:var(--tk-r);color:var(--tk-text);text-decoration:none;
  font:inherit;font-weight:700;line-height:1.1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none
}
/* Wand unter der Fläche und weicher Schatten auf dem Untergrund (kein Text darin) */
.tastknopf::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:var(--tk-kante);
  transform:translateY(var(--tk-tiefe));
  box-shadow:0 calc(var(--tk-tiefe) + 10px) 22px -8px var(--tk-schatten),0 2px 0 rgba(0,0,0,.08);
  transition:box-shadow .16s ease
}
.tk-flaeche{
  position:relative;top:0;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:54px;min-width:44px;padding:0 1.55em;border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 52%),
    linear-gradient(180deg,var(--tk-hell),var(--tk-farbe));
  background-color:var(--tk-farbe);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:top .18s cubic-bezier(.22,1.6,.4,1),box-shadow .18s ease
}
.tk-flaeche svg{width:1.2em;height:1.2em;flex:none}
.tastknopf:active .tk-flaeche,.tastknopf.-gedrueckt .tk-flaeche{
  top:calc(var(--tk-tiefe) - 1px);transition-duration:.05s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 3px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.06)
}
.tastknopf:active::before,.tastknopf.-gedrueckt::before{box-shadow:0 calc(var(--tk-tiefe) + 2px) 8px -6px var(--tk-schatten),0 1px 0 rgba(0,0,0,.08)}
@media (hover:hover) and (pointer:fine){
  .tastknopf:hover .tk-flaeche{top:-1px}
  .tastknopf:hover:active .tk-flaeche,.tastknopf.-gedrueckt:hover .tk-flaeche{top:calc(var(--tk-tiefe) - 1px);transition-duration:.05s;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 3px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.06)}   /* sonst gewinnt :hover gegen :active (gleiche Spezifität) */
  .tastknopf:hover::before{box-shadow:0 calc(var(--tk-tiefe) + 14px) 26px -8px var(--tk-schatten),0 2px 0 rgba(0,0,0,.08)}
}
.tastknopf:focus-visible{outline:none}
.tastknopf:focus-visible .tk-flaeche{outline:3px solid var(--tinte,#14213A);outline-offset:3px}
/* Heller Knopf (zweite Wahl neben dem Signalknopf) */
.tastknopf.-hell{--tk-farbe:#F4F6F8;--tk-hell:#FFFFFF;--tk-kante:#C9D0D8;--tk-text:var(--tinte,#14213A);--tk-schatten:rgba(10,20,30,.22)}
.tastknopf.-klein .tk-flaeche{min-height:44px;padding:0 1.1em;font-size:.92em}
.tastknopf.-klein{--tk-tiefe:4px}
.tastknopf.-gross .tk-flaeche{min-height:64px;padding:0 1.9em;font-size:1.12em}
.tastknopf.-gross{--tk-tiefe:8px}
.tastknopf[disabled],.tastknopf[aria-disabled="true"]{cursor:default;opacity:.55}
@media (prefers-reduced-motion:reduce){.tk-flaeche,.tastknopf::before{transition:none}}

/* ============================================================
   Bausteinlager „Deine neue Webseite" — sendeknopf.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-sendeknopf-20261029
   Der Knopf denkt mit: „Anfrage senden" → „Wird gesendet …" (Kreisel) → „Gesendet" (Haken zeichnet sich).
   Die Breite gleitet zum neuen Text, die Schrift blendet über, nichts springt.
   Läuft allein oder zusammen mit dem Tastknopf: <button class="tastknopf" data-sendeknopf>
     <span class="tk-flaeche">Anfrage senden</span></button>
   ============================================================ */
.sk-text{position:relative;display:inline-block;height:1.25em;line-height:1.25em;overflow:hidden;vertical-align:middle;
  transition:width .38s cubic-bezier(.3,1.25,.45,1);white-space:nowrap}
.sk-text > span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;transition:opacity .22s ease,top .3s cubic-bezier(.3,1.3,.45,1)}
.sk-text > span.-weg{opacity:0;top:-1.1em}
.sk-text > span.-kommt{opacity:0;top:1.1em}
.sk-icon{width:1.1em;height:1.1em;flex:none;overflow:visible}
.sk-kreisel{animation:skDreh .8s linear infinite;transform-origin:50% 50%}
@keyframes skDreh{to{transform:rotate(360deg)}}
.sk-haken path{stroke-dasharray:1;stroke-dashoffset:1;animation:skHaken .42s .08s cubic-bezier(.4,0,.2,1) forwards}
@keyframes skHaken{to{stroke-dashoffset:0}}
[data-sendeknopf].-fehler{animation:skWackel .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes skWackel{20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:2px 0}100%{translate:0 0}}
[data-sendeknopf][aria-busy="true"]{cursor:progress}
.sk-ansage{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .sk-text,.sk-text > span{transition:none}.sk-kreisel{animation-duration:2.4s}
  .sk-haken path{animation:none;stroke-dashoffset:0}[data-sendeknopf].-fehler{animation:none}
}

/* ============================================================
   Bausteinlager „Deine neue Webseite" — holofolie.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-holofolie-20261029
   Schillernde Folie wie auf Kreditkarten, Gutscheinen oder Sammelkarten. Die Farben wandern beim Scrollen
   und folgen dem Finger bzw. der Maus, die Karte kippt dabei leicht. Reine Verläufe, keine Bilder, keine Pakete.
   EINBAU:
     <div class="holofolie" data-holofolie> …Inhalt der Karte… </div>
   Varianten: .-hell (heller Kartengrund), .-zart (weniger Farbe, für Karten mit viel Text)
   Nur ein Teil soll schillern (z. B. das Logo als Siegel): data-holo-maske="bilder/logo-maske.png"
   Farben: --hf-grund (Kartengrund, Standard --marke), --hf-staerke (0–1, Standard .62)
   REGELN: Die Folie liegt UNTER dem Inhalt (z-index 1), Schrift bleibt scharf und kontraststark.
   Kippen nur während Zeiger/Finger auf der Karte ist; in Ruhe kein transform.
   ============================================================ */
.holofolie{
  --hf-x:50;--hf-y:50;--hf-staerke:.62;
  --hf-grund:var(--marke,#121E36);
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--hf-r,var(--r,22px));
  background-color:var(--hf-grund);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(255,255,255,.08) inset,0 26px 60px -30px rgba(0,0,0,.6);
  transition:transform .55s cubic-bezier(.2,.9,.25,1),box-shadow .4s ease;
  -webkit-tap-highlight-color:transparent
}
.holofolie > *{position:relative;z-index:2}
.holofolie:not(.-hell){text-shadow:0 1px 2px rgba(0,0,0,.22)}
.holofolie > .hf-folie,.holofolie > .hf-glanz,.holofolie > .hf-funkeln{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}
.hf-folie{
  background:
    repeating-linear-gradient(calc(96deg + var(--hf-x) * .5deg),rgba(255,255,255,0) 0 7px,rgba(255,255,255,.07) 7px 8px),
    /* Regenbogen mit ausgeglichener Helligkeit: kräftig, aber ohne grelle Stellen hinter weißer Schrift */
    linear-gradient(115deg,#ff5fc0 0%,#f0a850 14%,#3cc89a 28%,#4aa8ff 42%,#a07cff 56%,#ff5fc0 70%,#f0a850 84%,#3cc89a 100%);
  background-size:100% 100%,420% 420%;
  background-position:0 0,calc(var(--hf-x) * 1%) calc(var(--hf-y) * 1%);
  mix-blend-mode:color-dodge;opacity:var(--hf-staerke)
}
.hf-funkeln{
  background:
    radial-gradient(circle,rgba(255,255,255,.95) 0 .7px,rgba(255,255,255,0) 1.3px),
    radial-gradient(circle,rgba(255,255,255,.8) 0 .6px,rgba(255,255,255,0) 1.2px);
  background-size:37px 41px,53px 47px;
  background-position:calc(var(--hf-x) * -.6px) calc(var(--hf-y) * -.4px),calc(var(--hf-x) * .5px) calc(var(--hf-y) * .7px);
  mix-blend-mode:overlay;opacity:calc(var(--hf-staerke) * .9)
}
.hf-glanz{
  background:radial-gradient(circle at calc(var(--hf-x) * 1%) calc(var(--hf-y) * 1%),rgba(255,255,255,.62),rgba(255,255,255,.14) 24%,rgba(255,255,255,0) 52%);
  mix-blend-mode:soft-light
}
.holofolie.-hell{--hf-grund:#F4F2EE;color:var(--tinte,#14213A)}
.holofolie.-hell .hf-folie{mix-blend-mode:multiply;opacity:calc(var(--hf-staerke) * .55)}
.holofolie.-hell .hf-funkeln{opacity:.25}
.holofolie.-zart{--hf-staerke:.36}
.holofolie.-maske .hf-folie,.holofolie.-maske .hf-funkeln,.holofolie.-maske .hf-glanz{
  -webkit-mask-image:var(--hf-maske);mask-image:var(--hf-maske);
  -webkit-mask-size:var(--hf-maske-groesse,contain);mask-size:var(--hf-maske-groesse,contain);
  -webkit-mask-position:var(--hf-maske-ort,center);mask-position:var(--hf-maske-ort,center);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}
.holofolie.-aktiv{transition:transform .08s linear,box-shadow .4s ease;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(255,255,255,.08) inset,0 34px 70px -30px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){.holofolie{transition:none}}

/* ============================================================
   Bausteinlager „Deine neue Webseite" — ticket.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-ticket-20261029
   Eintrittskarte mit Lochung und Abriss. Man kann den Abschnitt mit dem Finger abreißen; danach erscheint,
   was der Kunde will (z. B. „Platz anfragen" oder die WhatsApp-Anmeldung). Am PC kippt das Ticket leicht.
   Für: Events, Fortbildungen, Konzerte, Webinare, Live-Shopping, Gutscheine.
   EINBAU:
     <div class="ticket" data-ticket>
       <div class="tkt-haupt"> … Titel, Ort, Beschreibung … </div>
       <div class="tkt-abriss" tabindex="0" role="button" aria-label="Abschnitt abreißen"> … Datum, Einlass, Nr. … </div>
       <div class="tkt-danach" hidden> … was nach dem Abreißen erscheint (Knopf, Text) … </div>
     </div>
   Farben: --tkt-papier, --tkt-tinte, --tkt-akzent (Standard aus glas.css: --tinte, --signal-tief)
   Unter 560 px Breite steht der Abschnitt unten (Lochung waagrecht), sonst rechts.
   ============================================================ */
.ticket{
  --tkt-papier:#FFFDF8;--tkt-papier-2:#F6F1E6;
  --tkt-tinte:var(--tinte,#14213A);--tkt-tinte-2:var(--tinte-2,#4A5568);
  --tkt-akzent:var(--signal-tief,#245A9F);
  --tkt-kerbe:13px;--tkt-r:16px;--tkt-abriss:30%;
  position:relative;display:flex;align-items:stretch;max-width:760px;color:var(--tkt-tinte);
  -webkit-tap-highlight-color:transparent
}
/* Schatten als eigene Ebene (kein filter auf Text), folgt grob der Kartenform */
/* Zwei Schatten (Hauptteil, Abschnitt) mit Lücke an der Lochung, damit durch die Kerben kein Schatten scheint.
   --tkt-trenn (Lage der Lochung) setzt ticket.js. */
.ticket::before,.ticket::after{content:"";position:absolute;z-index:0;bottom:-5px;height:42%;border-radius:30px;
  background:rgba(10,18,30,.3);filter:blur(16px);transition:opacity .4s,bottom .45s ease}
.ticket::before{left:4%;right:calc(100% - var(--tkt-trenn,70%) + var(--tkt-kerbe) + 10px)}
.ticket::after{left:calc(var(--tkt-trenn,70%) + var(--tkt-kerbe) + 10px);right:4%}
.ticket.-ab::after{opacity:0}
.tkt-haupt,.tkt-abriss{position:relative;z-index:1;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,var(--tkt-papier),var(--tkt-papier-2));
  background-color:var(--tkt-papier)}
.tkt-haupt{flex:1 1 auto;min-width:0;padding:26px 26px 24px 32px;border-radius:var(--tkt-r) 0 0 var(--tkt-r);box-shadow:inset 6px 0 0 var(--tkt-akzent);
  -webkit-mask:radial-gradient(circle var(--tkt-kerbe) at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--tkt-kerbe) at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.tkt-abriss{flex:0 0 var(--tkt-abriss);min-width:150px;padding:22px 20px 22px 24px;border-radius:0 var(--tkt-r) var(--tkt-r) 0;
  display:flex;flex-direction:column;justify-content:center;gap:10px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-mask:radial-gradient(circle var(--tkt-kerbe) at 0 0,transparent 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--tkt-kerbe) at 0 0,transparent 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
/* Lochung: Punkte entlang der Kante des Abschnitts */
.tkt-abriss::before{content:"";position:absolute;left:0;top:calc(var(--tkt-kerbe) + 6px);bottom:calc(var(--tkt-kerbe) + 6px);width:2px;
  background:radial-gradient(circle,rgba(20,33,58,.32) 0 1.2px,transparent 1.6px) 0 0/2px 9px repeat-y}
.tkt-abriss.-zieht{cursor:grabbing}
.tkt-abriss:focus-visible{outline:3px solid var(--tkt-akzent);outline-offset:-6px}
.tkt-griff{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tkt-akzent)}
.tkt-griff svg{width:16px;height:16px}
/* Nach dem Abreißen: Inhalt erscheint an der Stelle des Abschnitts */
.tkt-danach{position:absolute;z-index:0;top:0;bottom:0;right:0;width:var(--tkt-abriss);min-width:150px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 16px 18px 22px;
  opacity:0;transition:opacity .45s .15s ease}
.ticket.-ab .tkt-danach{opacity:1;z-index:2}
.ticket.-ab .tkt-haupt{border-radius:var(--tkt-r) 6px 6px var(--tkt-r)}
.tkt-danach[hidden]{display:flex}
.ticket:not(.-ab) .tkt-danach{visibility:hidden}
/* Hochkant: Abschnitt unten */
.ticket.-hoch{flex-direction:column}
.ticket.-hoch::before{left:calc(var(--tkt-kerbe) + 7%);right:calc(var(--tkt-kerbe) + 7%);height:30%}
.ticket.-hoch::after{display:none}
.ticket.-hoch.-ab::before{bottom:calc(100% - var(--tkt-trenn,70%) - 5px)}
.ticket.-hoch .tkt-haupt{border-radius:var(--tkt-r) var(--tkt-r) 0 0;padding:26px 20px 22px;box-shadow:inset 0 6px 0 var(--tkt-akzent);
  -webkit-mask:radial-gradient(circle var(--tkt-kerbe) at 0 100%,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 100%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--tkt-kerbe) at 0 100%,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 100%,transparent 98%,#000) right/51% 100% no-repeat}
.ticket.-hoch .tkt-abriss{flex:0 0 auto;min-width:0;border-radius:0 0 var(--tkt-r) var(--tkt-r);padding:20px 20px 18px;touch-action:pan-y;
  -webkit-mask:radial-gradient(circle var(--tkt-kerbe) at 0 0,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 0,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--tkt-kerbe) at 0 0,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 0,transparent 98%,#000) right/51% 100% no-repeat}
.ticket.-hoch .tkt-abriss::before{left:calc(var(--tkt-kerbe) + 6px);right:calc(var(--tkt-kerbe) + 6px);top:0;bottom:auto;width:auto;height:2px;
  background:radial-gradient(circle,rgba(20,33,58,.32) 0 1.2px,transparent 1.6px) 0 0/9px 2px repeat-x}
.ticket.-hoch .tkt-danach{top:auto;left:0;right:0;bottom:0;width:auto;min-width:0;height:var(--tkt-danach-h,120px);padding:16px 20px}
.ticket.-hoch.-ab .tkt-haupt{border-radius:var(--tkt-r) var(--tkt-r) 6px 6px}
/* Kleine Hilfen für den Inhalt */
.tkt-ober{margin:0 0 6px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tkt-akzent)}
.tkt-titel{margin:0 0 8px;font-size:clamp(24px,3.2vw,34px);line-height:1.08;font-weight:800;letter-spacing:-.01em}
.tkt-text{margin:0;color:var(--tkt-tinte-2);font-size:15.5px;line-height:1.5}
.tkt-feld{display:flex;flex-direction:column;gap:2px}
.tkt-feld small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tkt-tinte-2)}
.tkt-feld b{font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
.tkt-felder{display:flex;flex-wrap:wrap;gap:12px 22px}
.ticket.-hoch .tkt-abriss .tkt-felder{gap:10px 26px}
.tkt-danach .tastknopf,.tkt-danach .knopf{align-self:flex-start}   /* Spalte dehnt sonst die Wand, nicht die Fläche */
.tkt-nochmal{align-self:flex-start;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--tkt-tinte-2);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.tkt-danach{transition:none}}

/* ============================================================
   Bausteinlager „Deine neue Webseite" — kartenfaecher.css (29.10.2026, Galerie 31.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-kartenfaecher-20261029
   Karten wie ein Blatt in der Hand. Mit Maus oder Finger durchblättern, Karte antippen (mit der Maus auch nach oben ziehen)
   = sie fliegt heraus und zeigt alles groß; dort wischt man zur nächsten Karte weiter, ohne zu schließen. Für Leistungen, Pakete, Speisekarte, Team, Referenzen.
   EINBAU:
     <div class="faecher" data-faecher aria-label="Unsere Leistungen">
       <button class="fk" type="button">
         <img src="bilder/x.webp" alt="" width="400" height="300">
         <span class="fk-titel">Umzugsreinigung</span>
         <span class="fk-kurz">Besenrein bis abnahmefertig.</span>
         <span class="fk-mehr" hidden>Langer Text … <a href="#kontakt">Jetzt anfragen</a></span>
       </button> … (3–9 Karten)
     </div>
   Farben: --fk-papier, --fk-tinte, --fk-akzent (Standard aus glas.css)
   ============================================================ */
.faecher{
  --fk-papier:#fff;--fk-tinte:var(--tinte,#14213A);--fk-tinte-2:var(--tinte-2,#4A5568);--fk-akzent:var(--signal-tief,#245A9F);
  --fk-b:clamp(128px,38vw,224px);--fk-h:calc(var(--fk-b) * 1.42);
  position:relative;height:calc(var(--fk-h) + 46px + var(--fk-unten,40px) + 30px);margin:0 auto;max-width:900px;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none
}
.fk{position:absolute;left:calc(50% - var(--fk-b) / 2);bottom:calc(var(--fk-unten,40px) + 30px);width:var(--fk-b);height:var(--fk-h);padding:0;margin:0;border:0;cursor:pointer;
  display:flex;flex-direction:column;text-align:left;overflow:hidden;border-radius:16px;background:var(--fk-papier);color:var(--fk-tinte);font:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,33,58,.08),0 18px 36px -18px rgba(10,18,30,.55),0 4px 10px -4px rgba(10,18,30,.18);
  transform-origin:50% 122%;transition:transform .42s cubic-bezier(.25,1.25,.45,1),box-shadow .3s ease,opacity .35s ease;will-change:transform}
.fk img{display:block;flex:none;width:100%;height:54%;object-fit:cover;pointer-events:none;background:#E8ECF1}
.fk-titel{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none;padding:12px 13px 0;margin-bottom:3px;font-weight:800;font-size:clamp(15px,1.6vw,17px);line-height:1.15}
.fk-kurz{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:0 13px;font-size:13px;line-height:1.35;color:var(--fk-tinte-2)}
.fk-mehr{display:none}
/* Dicht (viele Karten): Karten zeigen nur ihr Bild, die gehobene Karte trägt ihren Namen als Schild */
.faecher.-dicht .fk img{height:100%}
.faecher.-dicht .fk .fk-titel,.faecher.-dicht .fk .fk-kurz{position:absolute;left:0;right:0;z-index:1;margin:0;opacity:0;transition:opacity .25s ease;color:#fff}
.faecher.-dicht .fk .fk-titel{bottom:30px;padding:0 12px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.faecher.-dicht .fk .fk-kurz{bottom:10px;padding:0 12px;font-size:12px;color:rgba(255,255,255,.9);-webkit-line-clamp:1}
.faecher.-dicht .fk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(8,10,14,.86));opacity:0;transition:opacity .25s ease;pointer-events:none}
.faecher.-dicht .fk.-oben .fk-titel,.faecher.-dicht .fk.-oben .fk-kurz,.faecher.-dicht .fk.-oben::after{opacity:1}
.fk.-oben{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 2px var(--fk-akzent),0 30px 50px -22px rgba(10,18,30,.6),0 6px 14px -6px rgba(10,18,30,.25)}
.fk:focus-visible{outline:3px solid var(--fk-akzent);outline-offset:3px}
.faecher-hinweis{position:absolute;left:0;right:0;bottom:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:13px;font-weight:700;color:var(--fk-tinte-2);transition:opacity .4s}
.faecher.-beruehrt .faecher-hinweis{opacity:0}
/* Groß gezeigt: Galerie aller Karten (Bahn mit Einrasten), Pfeile und Zähler darunter, Schließen oben rechts */
.fk-schleier{position:fixed;inset:0;z-index:9000;background:rgba(8,12,20,.6);opacity:0;transition:opacity .35s ease}
.fk-schleier.-da{opacity:1}
.fk-ebene{position:fixed;inset:0;z-index:9001;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:12px}   /* feste Spalte, sonst wächst die Spalte mit dem Inhalt der Bahn über den Schirm hinaus */
.fk-galerie{position:relative;width:min(100%,460px);min-width:0;max-height:calc(100svh - 24px);display:flex;flex-direction:column;gap:10px}
.fk-bahn{position:relative;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:14px 10px;margin:-14px -10px;outline:none}
.fk-bahn::-webkit-scrollbar{display:none}
/* Gläserne Karte (Matze 31.10.2026: „gläsern durchzuschauen“): man sieht den Fächer dahinter durch Bild und Fläche.
   Lesbarkeit gerechnet gegen den hellsten und dunkelsten Grund hinter dem Schleier: Fläche 62 % Weiß, Schrift dunkel, Link als Kapsel */
.fk-gross{position:relative;flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;max-height:calc(100svh - 110px);overflow:auto;margin:0;isolation:isolate;
  border-radius:20px;background:rgba(255,255,255,.62);color:#121722;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.8);transition:transform .35s ease,opacity .35s ease}
.fk-gross::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;-webkit-backdrop-filter:blur(2px) saturate(1.35);backdrop-filter:blur(2px) saturate(1.35);pointer-events:none}
.fk-gross:not(.-aktiv){transform:scale(.94);opacity:.4}
.fk-gross img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;background:transparent;opacity:.8}
.fk-gross .fk-innen{padding:20px 22px 22px}
.fk-gross h3{margin:0 0 8px;font-size:24px;line-height:1.15;color:#0f141d}
.fk-gross p{margin:0 0 12px;font-size:16px;line-height:1.55;color:#262c38}
.fk-gross a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--fk-akzent,#245A9F);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.fk-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:6px;border-radius:999px;background:rgba(16,19,26,.82);color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fk-pfeil{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#14213A;cursor:pointer;display:grid;place-items:center}
.fk-pfeil svg{width:20px;height:20px}
.fk-pfeil:disabled{opacity:.3;cursor:default}
.fk-pfeil:focus-visible,.fk-zu:focus-visible{outline:3px solid var(--fk-akzent,#245A9F);outline-offset:2px}
.fk-stand{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.fk-punkte{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:240px}
.fk-punkte i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .25s,transform .25s}
.fk-punkte i.-hier{background:#fff;transform:scale(1.3)}
.fk-zaehler{font-size:13px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.fk-zu{position:absolute;right:8px;top:8px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#14213A;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.fk-zu svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.fk,.fk-schleier,.fk-gross{transition:none}.fk-gross:not(.-aktiv){transform:none}}

/* ============================================================
   Bausteinlager „Deine neue Webseite" — kassenbon.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-kassenbon-20261029
   Nach dem Absenden druckt ein kleiner Drucker einen Beleg aus: Reservierung, Anfrage, Bestellung, Gutschein.
   Ruckelt wie ein echter Bondrucker, gezackte Abrisskante, Strichcode aus der Belegnummer.
   EINBAU:
     <div class="kassenbon" data-kassenbon data-form="#reservierung"
          data-kopf="Gasthaus zum Beispiel" data-unterkopf="Tischreservierung"
          data-felder='{"Name":"name","Personen":"personen","Datum":"datum","Uhrzeit":"uhrzeit"}'
          data-fuss="Wir freuen uns auf euch!"></div>
     Druckt, sobald das Formular über den Senden-Knopf erfolgreich gesendet wurde (Ereignis sendeknopf:gesendet).
     Von Hand: Kassenbon.drucke(el, { kopf, unterkopf, zeilen:[["Name","Anna"],…], summe:["Gesamt","…"], fuss, nummer })
   Farben: --kb-gehaeuse (Standard --marke), --kb-papier, --kb-tinte
   ============================================================ */
.kassenbon{--kb-gehaeuse:var(--marke,#1E2A3A);--kb-papier:#FBF9F2;--kb-tinte:#23201C;--kb-breite:300px;
  position:relative;width:min(100%,calc(var(--kb-breite) + 60px));margin:0 auto;-webkit-tap-highlight-color:transparent}
.kb-drucker{position:relative;z-index:2;height:74px;border-radius:18px 18px 12px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%,rgba(0,0,0,.25)),var(--kb-gehaeuse);background-color:var(--kb-gehaeuse);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 18px 30px -16px rgba(0,0,0,.55)}
.kb-schlitz{position:absolute;left:24px;right:24px;bottom:14px;height:8px;border-radius:6px;background:#0B0A09;box-shadow:0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(0,0,0,.6) inset}
.kb-led{position:absolute;right:22px;top:16px;width:9px;height:9px;border-radius:50%;background:#3A3F45;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.kassenbon.-druckt .kb-led{background:#47E39A;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 10px #47E39A;animation:kbBlink .5s steps(2) infinite}
.kassenbon.-fertig .kb-led{background:#47E39A;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 8px #47E39A}
@keyframes kbBlink{50%{opacity:.35}}
.kb-name{position:absolute;left:22px;top:13px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.kb-ausgabe{position:relative;z-index:1;margin:-20px auto 0;width:min(var(--kb-breite),calc(100% - 40px));height:0;overflow:hidden}
.kb-beleg{position:absolute;left:0;right:0;bottom:0;padding:28px 20px 30px;color:var(--kb-tinte);
  /* Papierwölbung an den Seiten, Schatten unten, damit die Zacken auch auf hellem Grund sichtbar sind */
  background:linear-gradient(0deg,rgba(70,55,30,.16),rgba(70,55,30,.05) 9px,rgba(70,55,30,0) 34px),
    linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,0) 9%,rgba(0,0,0,0) 91%,rgba(0,0,0,.07)),var(--kb-papier);background-color:var(--kb-papier);
  font:500 14px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;font-variant-numeric:tabular-nums;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) bottom/14px 9px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) bottom/14px 9px repeat-x}
.kb-kopf{margin:0;text-align:center;font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.kb-unterkopf{margin:2px 0 0;text-align:center;font-size:13px}
.kb-strich{margin:12px 0;border:0;border-top:1.5px dashed rgba(35,32,28,.45)}
.kb-zeile{display:flex;justify-content:space-between;gap:12px;margin:0}
.kb-zeile span:last-child{text-align:right;font-weight:700;overflow-wrap:anywhere}
.kb-zeile.-klein span:first-child{font-size:12px;letter-spacing:-.01em;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}   /* lange Einzelwerte (Links, Namen): kleiner, bricht notfalls um, nie abgeschnitten */
.kb-summe{font-weight:800;font-size:16px}
.kb-fuss{margin:14px 0 0;text-align:center;font-size:13.5px}
.kb-code{height:38px;margin:14px 6px 4px}
.kb-nummer{margin:0;text-align:center;font-size:12px;letter-spacing:.2em}
.kb-ansage{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kb-hinweis{text-align:center;font-size:13.5px;font-weight:600;color:var(--tinte-2,#4A5568);margin:16px 0 0;transition:opacity .3s}
.kassenbon.-druckt .kb-hinweis,.kassenbon.-fertig .kb-hinweis{opacity:0;height:0;margin:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.kassenbon.-druckt .kb-led{animation:none}}

/* ============================================================
   Bausteinlager „Deine neue Webseite" — kassette.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-kassette-20261029
   Der Firmensong als Kassette: Spulen drehen sich beim Abspielen, links wird das Band weniger, rechts mehr.
   Mit dem Finger am Sichtfenster ziehen = spulen. Aus, bis man drückt (Matzes Regel für Songs).
   EINBAU:
     <div class="kassette" data-kassette data-src="musik/firmensong.mp3" data-titel="Sem Clean – Klare Sicht"
          data-unter="Unser Song · Seite A"></div>
   Farben: --ks-koerper (Gehäuse), --ks-etikett (Aufkleber), --ks-akzent (Streifen), --ks-tinte (Schrift)
   Standard aus glas.css: Gehäuse --marke, Streifen --signal.
   ============================================================ */
.kassette{
  --ks-koerper:var(--marke,#1E2A3A);--ks-etikett:#F7F2E7;--ks-akzent:var(--signal,#306CC0);--ks-tinte:#1B1B1B;
  position:relative;width:100%;max-width:440px;margin:0 auto;color:var(--tinte,#14213A);-webkit-tap-highlight-color:transparent
}
.ks-buehne{position:relative;isolation:isolate}
.ks-buehne svg{display:block;width:100%;height:auto;overflow:visible}
.ks-schatten{position:absolute;left:6%;right:6%;bottom:-8px;height:40%;border-radius:40px;background:rgba(10,18,30,.35);filter:blur(16px);z-index:-1}
/* Titel auf dem Aufkleber als echte Schrift (scharf, wechselt mit der Seite) */
.ks-etikett{position:absolute;left:8.5%;right:8.5%;top:9.5%;height:11.5%;display:flex;align-items:center;gap:8px;overflow:hidden;
  color:var(--ks-tinte);font-weight:800;font-size:clamp(13px,3.6vw,17px);line-height:1.1;letter-spacing:.01em;pointer-events:none}
.ks-etikett .ks-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-etikett .ks-seite{margin-left:auto;flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:6px;background:var(--ks-akzent);color:#fff;font-size:.82em}
.ks-fenster{position:absolute;left:21%;width:58%;top:29%;height:33%;border-radius:999px;cursor:grab;touch-action:pan-y}
.ks-fenster.-zieht{cursor:grabbing}
.ks-fenster:focus-visible{outline:3px solid var(--ks-akzent);outline-offset:4px}
.ks-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:20px}
.ks-zeit{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--tinte-2,#4A5568);min-width:92px}
.ks-spur{flex:1 1 120px;min-width:120px;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.ks-spur::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ks-akzent) var(--ks-p,0%),rgba(20,33,58,.16) var(--ks-p,0%))}
.ks-spur::-moz-range-track{height:4px;border-radius:4px;background:rgba(20,33,58,.16)}
.ks-spur::-moz-range-progress{height:4px;border-radius:4px;background:var(--ks-akzent)}
.ks-spur::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px var(--ks-akzent),0 2px 6px rgba(0,0,0,.25)}
.ks-spur::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px var(--ks-akzent),0 2px 6px rgba(0,0,0,.25)}
.ks-spur:focus-visible{outline:3px solid var(--ks-akzent);outline-offset:2px;border-radius:6px}
.ks-knopf .tk-flaeche{width:58px;min-height:58px;padding:0;border-radius:50%}
.ks-knopf .tk-flaeche svg{width:24px;height:24px}
.ks-hinweis{margin:10px 0 0;text-align:center;font-size:13px;font-weight:600;color:var(--tinte-2,#4A5568)}

/* ============================================================
   Bausteinlager „Deine neue Webseite" — logozug.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-logozug-20261029
   Das Logo zeichnet sich: erst die Umrisse wie mit dem Stift, dann füllt es sich mit Farbe.
   Zwei Arten:
   1) Im Inhalt (z. B. Über uns, Fuß, Danke-Seite): <div class="logozug" data-logozug><svg …>…</svg></div>
      Startet, sobald es ins Bild kommt; Antippen zeichnet es noch einmal.
   2) Als Auftakt beim ersten Besuch (höchstens 1,8 s, Antippen überspringt, einmal pro Sitzung):
      <div class="logozug -auftakt" data-logozug="auftakt"><svg …>…</svg></div> direkt nach <body>.
   Das SVG braucht echte Vektorpfade (Logo per potrace aus dem Kundenlogo, wie bei den Entwürfen üblich).
   Farben: --lz-strich (Stift), Füllungen bleiben wie im SVG. Auftakt-Grund: --lz-grund (Standard --marke).
   ============================================================ */
.logozug{--lz-strich:var(--signal-tief,#245A9F);display:inline-block;width:100%;max-width:220px;color:var(--lz-strich);-webkit-tap-highlight-color:transparent}
.logozug svg{display:block;width:100%;height:auto;overflow:visible}
.logozug.-wartet svg{visibility:hidden}
.logozug.-auftakt{--lz-grund:var(--marke,#121E36);position:fixed;inset:0;z-index:10000;max-width:none;display:grid;place-items:center;
  background:var(--lz-grund);transition:opacity .5s ease,visibility 0s .5s;cursor:pointer}
.logozug.-auftakt svg{width:min(42vw,200px)}
.logozug.-auftakt.-weg{opacity:0;visibility:hidden;pointer-events:none}
.logozug.-auftakt .lz-ueberspringen{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.72)}
@media (prefers-reduced-motion:reduce){.logozug.-auftakt{display:none}}

/* ============================================================
   Bausteinlager „Deine neue Webseite" — unterschrift.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-unterschrift-20261029
   Eine Unterschrift, die sich selbst schreibt — unter dem „Über mich", dem Gründerbrief oder der Danke-Seite.
   Am liebsten die ECHTE Unterschrift des Kunden: Er unterschreibt einmal mit dem Finger auf der Aufnahme-Seite
   (data-unterschrift-aufnahme), wir bekommen die Datei und die Seite schreibt sie genau so nach — mit seinem Tempo.
   EINBAU Wiedergabe: <canvas class="unterschrift" data-unterschrift="unterschrift.json" role="img" aria-label="Unterschrift Jürgen Hirs"></canvas>
   EINBAU Aufnahme:   <div data-unterschrift-aufnahme></div>   (nur auf einer Hilfsseite, nie auf der Kundenseite)
   Farbe: color der Leinwand (Standard: tiefe Tinte), Breite per CSS (Höhe ergibt sich).
   ============================================================ */
.unterschrift{display:block;width:100%;max-width:420px;height:auto;color:#1F2B5C;-webkit-tap-highlight-color:transparent}
.us-aufnahme{max-width:560px}
.us-feld{position:relative;border-radius:16px;background:
  linear-gradient(transparent calc(100% - 46px),rgba(20,33,58,.22) calc(100% - 46px),rgba(20,33,58,.22) calc(100% - 45px),transparent calc(100% - 45px)),#FFFDF8;
  box-shadow:0 0 0 1px rgba(20,33,58,.1),0 14px 30px -18px rgba(10,18,30,.4)}
.us-feld canvas{display:block;width:100%;height:220px;touch-action:none;cursor:crosshair;border-radius:16px}
.us-feld .us-leer{position:absolute;left:0;right:0;top:42%;text-align:center;font-weight:700;font-size:15px;color:rgba(20,33,58,.66);pointer-events:none;transition:opacity .2s}
.us-feld.-hat .us-leer{opacity:0}
.us-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.us-knoepfe button{min-height:44px;padding:0 16px;border:1px solid rgba(20,33,58,.16);border-radius:999px;background:#fff;color:var(--tinte,#14213A);font:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
.us-knoepfe button:focus-visible{outline:3px solid var(--signal-tief,#245A9F);outline-offset:2px}
.us-knoepfe button[disabled]{color:#69727F;border-color:rgba(20,33,58,.08);background:rgba(255,255,255,.6);cursor:default}
.us-meldung{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--tinte-2,#4A5568);min-height:1.4em}

/* ============================================================
   lr-job.eu — Anfass-Bausteine auf den Unterseiten (30.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung lrj-anfass-20261030
   Wird NACH der jeweiligen stil.css geladen (/anfass/anfass.css). Zwei Knopf-Familien:
   Medienhost-Seiten (/team, /start/, /lr-partner-werden/): .knopf.gold = Hauptknopf, .klein, .voll = volle Breite
   Unterseiten (/auto/, /fasttrack/, …): .knopf.voll = Hauptknopf (gefüllt), .glasig = Zweitknopf, .klein
   ============================================================ */
:root{--signal:var(--gruen,#0F7A5A);--signal-hell:#118463;--signal-tief:var(--gruen2,#0B5C44);--tinte:var(--ink,#10201A);--tinte-2:var(--ink2,#3E5249);--marke:#0B5C44;--akzent:var(--gold,#C9A24A)}

/* ---- Tastknopf ---- */
/* Bis das Skript übernimmt: Hauptknöpfe sehen schon aus wie die Fläche des Tastknopfs (kein Sprung) */
.knopf.gold,.knopf.voll:not(.glasig){background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 52%),linear-gradient(180deg,#149B74,#0F7A5A);box-shadow:0 6px 0 #0B5C44,0 16px 22px -8px rgba(16,32,26,.3);margin-bottom:6px}
.knopf.gold.klein,.knopf.voll.klein{box-shadow:0 4px 0 #0B5C44,0 14px 22px -8px rgba(16,32,26,.3);margin-bottom:4px}
.tastknopf{font-family:var(--f-text);font-size:.95rem;font-weight:700;--tk-schatten:rgba(16,32,26,.3);
  --tk-farbe:#0F7A5A;--tk-hell:#118463;--tk-kante:#07432F;--tk-text:#fff;white-space:nowrap}
.tastknopf .tk-flaeche{min-height:50px;padding:0 1.45em}
.tastknopf.-klein .tk-flaeche{min-height:44px;padding:0 1.1em;font-size:.9rem}
.tastknopf.-hell{--tk-farbe:#F6F7F4;--tk-hell:#FFFFFF;--tk-kante:#C7D0CB;--tk-text:var(--ink,#10201A);--tk-schatten:rgba(16,32,26,.18)}
.tastknopf.-breit{display:flex;width:100%}
.tastknopf.-breit .tk-flaeche{flex:1 1 auto;justify-content:center}
/* 02.11.2026 (Matze, Screenshot /patches/ „Button sieht scheiße aus“): wird der Knopf von der Seite breit gezogen (z. B. „knopf voll“ in einer Flex-Spalte),
   füllt die Fläche jetzt die ganze Breite. Vorher stand die grüne Fläche halb auf einer breiten dunklen Wand. */
.tastknopf>.tk-flaeche{flex:1 1 auto;justify-content:center}
.tastknopf svg{width:18px;height:18px}
/* Kopfzeilen beider Familien */
.leiste-kopf .tastknopf,.kopf .tastknopf{margin-left:auto}
@media(min-width:1040px){.leiste-kopf .tastknopf{margin-left:0}}
@media(min-width:960px){.kopf .tastknopf{margin-left:0}}
/* Kopfzeile mit Menü-Knopf: unter 1400 px passt die Menüzeile nicht mehr neben Lina und den Knopf */
@media(min-width:960px) and (max-width:1399px){.leiste-kopf:has(#menue-knopf) nav,.kopf .leiste:has(#menue-knopf) nav{display:none}.leiste-kopf:has(#menue-knopf) .tastknopf,.kopf .leiste:has(#menue-knopf) .tastknopf{margin-left:auto}}
/* Feste Leiste unten (Medienhost-Seiten) */
body > .leiste .tastknopf{flex:1;margin-bottom:4px;--tk-tiefe:4px}
.kopf .leiste .tastknopf{flex:none}
body > .leiste .tastknopf .tk-flaeche{width:100%;white-space:nowrap}
@media(max-width:380px){body > .leiste .tastknopf .tk-flaeche{font-size:.88rem;padding:0 .7em}}
/* Anrufleiste unten (Unterseiten): der grüne Lina-Knopf wird Tastknopf, Ecken wie die Leiste */
.anrufleiste a.lina.tastknopf{background:none;border:0;padding:0;display:flex;align-items:stretch;min-height:0;border-radius:14px;--tk-r:14px;--tk-tiefe:4px;margin-bottom:4px;color:#fff}
.anrufleiste a.lina.tastknopf .tk-flaeche{width:100%;min-height:44px;border-radius:14px;gap:8px;font-size:.92rem}
/* Knopfreihen: Tastknopf (mit Wand) und Glasknopf stehen oben bündig */
.reihe,.set-knoepfe,.knoepfe,.cta-reihe{align-items:flex-start}

/* ---- /team: Senden-Knopf + Kassenbon „Deine Links" ---- */
.ergebnis-box .lrj-bon{--kb-gehaeuse:#10201A;--kb-breite:300px;margin:4px auto 18px}
.ergebnis-box.-bon > b,.ergebnis-box.-bon .link{display:none}
.ergebnis-box .reihe{align-items:flex-start}
.lrj-bon .kb-zeile span:first-child{white-space:pre-wrap;text-align:left}
.lrj-bon .kb-zeile.-klein span:first-child{white-space:pre-wrap}
.lrj-bon .kb-ausgabe{width:min(var(--kb-breite),calc(100% - 28px))}
.lrj-bon .kb-beleg{padding-left:16px;padding-right:16px}
.lrj-bon .kb-zeile span:last-child{white-space:nowrap}

/* ---- Ticket (Fast Track, Business Track) ---- */
.lrj-ticket{--tkt-papier:#FFFEFA;--tkt-papier-2:#F2F6F1;--tkt-akzent:var(--gruen);--tkt-tinte:var(--ink);--tkt-tinte-2:var(--ink2,#3E5249);--tkt-abriss:34%;max-width:none;width:100%;margin:0}
.lrj-ticket .tkt-haupt{display:grid;gap:4px;padding:20px 20px 18px 26px}
.lrj-ticket.-hoch .tkt-haupt{padding:20px 18px 16px}
.lrj-ticket .euro-anzeige{background:none;padding:0;gap:4px 10px}
.lrj-ticket .euro-anzeige>span{display:none}
.lrj-ticket .euro-anzeige b{font-size:clamp(2.2rem,6.5vw,3rem);color:var(--ink)}
.lrj-ticket .tkt-klein{font-size:12.5px;color:var(--ink2,#3E5249);margin:6px 0 0;line-height:1.4}
.lrj-ticket .tkt-feld b{font-size:17px;line-height:1.15}
.lrj-ticket .tkt-feld small{font-size:12px}
.lrj-ticket .tkt-abriss{padding:18px 16px 18px 22px}
.lrj-ticket.-hoch .tkt-abriss{padding:18px 18px 16px}
.lrj-ticket .tkt-danach{padding:14px 14px 14px 20px}
.lrj-ticket .tkt-danach .tastknopf{align-self:flex-start}
.lrj-ticket .tkt-nochmal{font-size:13px}
.st-info .lrj-ticket{margin-top:6px}
.st-info .lrj-ticket p{min-height:0}   /* .st-info p hat min-height fürs Stufen-Textfeld */
.cockpit-rechts .lrj-ticket p{min-height:0}

/* ---- /auto: Kassenbon „Deine Rate" ---- */
.lrj-auto-bon{--kb-gehaeuse:#10201A;--kb-breite:300px;margin:18px auto 6px}
.lrj-auto-bon[hidden]{display:none}
.lrj-tipp{margin:14px 0 0;font-size:.92rem;color:var(--ink2,#3E5249);display:flex;align-items:center;gap:8px}
.lrj-tipp::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 5px rgba(15,122,90,.18);flex:none}
.modell.-antippbar{cursor:pointer}
.modell.-antippbar:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.modell.-antippbar:hover{box-shadow:0 0 0 2px var(--gruen),0 20px 50px rgba(16,32,26,.12)}}
.modell.-gewaehlt{box-shadow:0 0 0 2px var(--gruen),0 20px 50px rgba(16,32,26,.12)}

/* ---- /patches: Kartenfächer in der Bento-Fläche ---- */
.lrj-faecher-zelle{grid-column:1/-1}
.lrj-faecher{--fk-papier:#fff;--fk-tinte:var(--ink);--fk-tinte-2:var(--ink2,#3E5249);--fk-akzent:var(--gruen);--fk-b:clamp(136px,40vw,230px);margin:4px auto 0}
.lrj-faecher .fk img{height:56%;object-fit:cover;object-position:50% 40%;background:#EEF4F0}
.lrj-faecher .fk-titel{font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.8vw,20px);letter-spacing:-.01em}
.lrj-faecher .fk-kurz{font-size:13px}
.lrj-faecher .faecher-hinweis{color:var(--dim,#5F6F68)}
.fk-gross img{object-fit:cover;aspect-ratio:1/1;background:#EEF4F0}
.fk-gross h3{font-family:var(--f-display);font-weight:600}
/* Galerie-Links: Kapsel aus dem Baustein (weiß auf --fk-akzent = LR-Grün) */
.fk-gross .lrj-stoffe{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.fk-gross .lrj-stoffe span{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:#EEF4F0;color:var(--ink)}

/* ---- /lr-partner-werden: Unterschrift unter „Mathias meldet sich" ---- */
.lpw-schritt .lrj-us{display:block;margin-top:10px}
.lpw-schritt .lrj-us .unterschrift{width:clamp(120px,30vw,160px);max-width:none;color:#10201A}

/* ---- Mindestgröße 12 px (Prüfkette) für kleine Beschriftungen, die auf den Unterseiten darunter lagen ---- */
.st-grafik .st small{font-size:12px}
.st-grafik .st em{font-size:12px;letter-spacing:.06em}
.produkt .pp small,.kombi .teil small{font-size:12px}
.fussnote sup{font-size:12px}

/* Ticket-Abschnitt sagt, was er tut (31.10.2026): Griff = Knopftext, Antippen reicht */
.lrj-ticket .tkt-abriss{cursor:pointer}
.lrj-ticket .tkt-griff{font-size:13px;gap:7px}
.lrj-ticket .tkt-griff svg{width:17px;height:17px}
.lrj-ticket .tkt-tipp{display:block;margin-top:8px;font-size:12px;font-weight:600;color:var(--tkt-tinte-2)}
/* Marke für den Zwischenspeicher-Schutz in kern.js (31.10.2026) */
:root{--lrj-anfass:1}