/* Vitren · Rahmen der Unterseiten (#902): Siegel oben links, Leiste mit «Gespräch vereinbaren» + Menü-Knopf, Menü-Overlay und
   Kontakt-Fenster, 1:1 wie auf der Hauptseite (index.html). Die Regeln sind wörtlich aus index.html übernommen (Herkunft je Block
   in Klammern). Laden NACH werkzeug.css (und test-seite.css), Markup: _werkzeug/rahmen.html, Verhalten: assets/rahmen.js.
   Weggelassen: Ton-Knöpfe (Klang), Kuppel-Rabatt, Pegel/Scroll-Hinweis, Ton-Wechsel der Navigation (hell/dunkel). */

/* Tokens, die werkzeug.css nicht hat oder anders setzt (Werte der Hauptseite) */
:root{--g:clamp(20px,3.4vw,52px);--nav:var(--tinte);--creme-2:rgba(247,242,233,.74)}
.ks{--tinte-3:#655F55}
/* Fokus-Rahmen rund wie auf der Hauptseite (werkzeug.css: 10px) */
:where(.plakette):focus-visible,:where(.leiste,.menue,.ks) :focus-visible{border-radius:999px}   /* :where, damit eigene Radien (Eingabefelder 14 px) gewinnen */

/* Pillen-Knopf der Leiste (index.html .pille / .pille--klein), auf die Leiste begrenzt: werkzeug.css hat eine eigene .pille
   (zentriert, anderer Innenabstand, Drücken skaliert), die übrigen Pillen der Unterseiten bleiben unberührt */
.leiste > .pille{--pf:var(--tinte);--pt:var(--creme);--ph:var(--lapis);position:relative;display:inline-flex;align-items:center;gap:.8rem;height:56px;padding:0 1.55rem 0 1.75rem;border-radius:999px;background:var(--pf);color:var(--pt);text-decoration:none;font-weight:500;font-size:1rem;letter-spacing:.005em;overflow:hidden;isolation:isolate;white-space:nowrap;transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 10px 30px -14px rgba(23,23,26,.5)}
.leiste > .pille::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ph);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
.leiste > .pille:hover::before,.leiste > .pille:focus-visible::before{transform:none}
.leiste > .pille .pfeil{width:30px;height:30px;border-radius:50%;background:var(--pt);color:var(--pf);display:grid;place-items:center;overflow:hidden;flex:none;transition:background .5s var(--ease)}
.leiste > .pille .pfeil svg{width:13px;height:13px;transition:transform .55s var(--ease)}
.leiste > .pille--klein{height:46px;padding:0 1.25rem 0 1.35rem;font-size:.95rem}
.leiste > .pille--klein .pfeil{width:26px;height:26px}
.leiste > .pille{justify-content:flex-start}
.leiste > .pille:active{transform:none}
.leiste > .pille:hover .pfeil svg{animation:rahmen-pfeil .6s var(--ease)}
@keyframes rahmen-pfeil{0%{transform:none}45%{transform:translateX(160%)}46%{transform:translateX(-160%)}100%{transform:none}}   /* Hauptseite: @keyframes pfeil mit 160 %, werkzeug.css hat unter gleichem Namen 130 % */

/* ---------- Navigation (index.html, Navigation + R6) ---------- */
.plakette{position:fixed;left:clamp(16px,3vw,44px);top:clamp(14px,2.4vw,30px);z-index:60;width:clamp(82px,7.6vw,112px);aspect-ratio:1;color:var(--nav);text-decoration:none;transition:color .5s}
.plakette svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plakette__dreh{position:absolute;inset:0;display:block;will-change:transform} /* #811: Ringe drehen als ganze Elemente (Grafikkarte) statt SVG-Gruppen (Neuzeichnen je Bild) */
.plakette text{font-family:'Archivo';font-stretch:112%;font-weight:600;font-size:8.6px;letter-spacing:.1em;fill:currentColor}
.plakette .kern{fill:currentColor}
.plakette__ring{animation:dreh 26s linear infinite;will-change:transform}
@media (prefers-reduced-motion:reduce){.plakette__ring{animation:none}}
@keyframes dreh{to{transform:rotate(360deg)}}
.leiste{position:fixed;right:clamp(16px,3vw,44px);top:clamp(20px,2.8vw,36px);z-index:60;display:flex;gap:.6rem;align-items:center}
.menu-knopf{height:46px;padding:0 1.1rem 0 1.25rem;border-radius:999px;display:inline-flex;align-items:center;gap:.75rem;font-weight:500;font-size:.95rem;background:rgba(247,242,233,.55);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);color:var(--tinte);transition:background .4s}
.menu-knopf:hover{background:rgba(247,242,233,.9)}
.menu-knopf .striche{display:grid;gap:5px;width:18px}
.menu-knopf .striche i{height:1.5px;background:currentColor;border-radius:2px;transition:transform .5s var(--ease)}
.menu-knopf:hover .striche i:first-child{transform:translateX(3px)}
.menu-knopf:hover .striche i:last-child{transform:translateX(-3px)}
/* R6: der Menü-Knopf bleibt beim Öffnen an seiner Stelle (über dem Overlay), das Wort rollt zu «Schliessen», die Striche morphen zum X */
.leiste{z-index:85}
.leiste > .pille{transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .45s var(--ease)}
html.menue-auf .leiste > .pille{--pf:var(--creme);--pt:var(--tinte);--ph:#fff}   /* #873 Esteban: «Gespräch vereinbaren» bleibt bei offenem Menü sichtbar (vorher ausgeblendet = ergonomisch fehlerhaft), hell auf Lapis */
.menu-knopf{position:relative;transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.menu-knopf .wort{display:grid;grid-template-columns:minmax(0,1fr);height:1.3em;overflow:hidden;line-height:1.3em;text-align:right;justify-items:end;width:var(--ww,auto);transition:width .6s var(--ease)}
.menu-knopf .wort span{white-space:nowrap}
.menu-knopf .wort span{grid-area:1/1;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.menu-knopf .wort span + span{transform:translateY(110%);opacity:0}
.menu-knopf[aria-expanded="true"] .wort span:first-child{transform:translateY(-110%);opacity:0}
.menu-knopf[aria-expanded="true"] .wort span + span{transform:none;opacity:1}
.menu-knopf[aria-expanded="true"]{background:var(--creme);color:var(--lapis);box-shadow:0 14px 34px -16px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.8)}
.menu-knopf[aria-expanded="true"] .striche i{transition:transform .6s var(--ease) .08s}
.menu-knopf[aria-expanded="true"] .striche i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-knopf[aria-expanded="true"] .striche i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.menu-knopf[aria-expanded="true"]:hover .striche{transform:rotate(90deg)}
.menu-knopf .striche{transition:transform .6s var(--ease)}
.menu-knopf:focus-visible{outline-color:var(--creme)}
html:not(.menue-auf) .menu-knopf:focus-visible{outline-color:var(--lapis)}
@media (max-width:760px){.plakette{width:70px}.leiste .pille{display:none}}

/* Menü-Overlay (index.html, Menü-Overlay + #811) */
/* Menü-Overlay */
/* R6: Kreis öffnet und schliesst am Knopf (Mitte per JS in --mx/--my). Schliessen = gleiche Kurve rückwärts, Sichtbarkeit fällt erst nach der Kurve. */
.menue{--mx:calc(100% - 90px);--my:58px;position:fixed;inset:0;z-index:80;background:var(--lapis);color:var(--creme);clip-path:circle(0 at var(--mx) var(--my));transition:clip-path .85s cubic-bezier(.7,0,.2,1) .18s,visibility 0s linear 1.05s;visibility:hidden;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);padding:clamp(110px,14vh,150px) var(--g) clamp(28px,4vh,44px)}
.menue.offen{clip-path:circle(150vmax at var(--mx) var(--my));visibility:visible;transition:clip-path .9s var(--ease) 0s,visibility 0s linear 0s}
.menue__links li,.menue__vorschau,.menue__fuss{opacity:0;transform:translateY(34px);transition:opacity .3s ease,transform .45s cubic-bezier(.7,0,.84,0)}
.menue__links li{transition-delay:calc((5 - var(--i,0)) * .025s)}
.menue.offen .menue__links li,.menue.offen .menue__vorschau,.menue.offen .menue__fuss{opacity:1;transform:none;transition:opacity .7s ease,transform 1s var(--ease);transition-delay:calc(.22s + var(--i,0) * .06s)}
.menue.offen .menue__vorschau{transition-delay:.38s}.menue.offen .menue__fuss{transition-delay:.55s}
.menue__links{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.menue__links a{display:inline-flex;align-items:baseline;gap:1rem;text-decoration:none;font-size:clamp(2.4rem,5.1vw,5.6rem);color:var(--creme);opacity:1;transition:opacity .35s,transform .6s var(--ease)}
.menue__links a:hover,.menue__links a:focus-visible{opacity:1;transform:translateX(14px)}
/* R7: Hover wie bei Rot, in der Vitrinen-Welt. Das Wort wird messinghell, darunter zieht eine Messing-Linie von links auf,
   daneben schreibt sich ein Ruthie-Zusatz («ansehen», «verstehen» ...) von links nach rechts ins Bild. Die übrigen Links treten zurück. */
.menue__links a{position:relative;padding:.04em 0}
.menue__wort{position:relative;display:inline-block;transition:color .45s var(--ease)}
.menue__wort::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;border-radius:2px;background:linear-gradient(90deg,#b08a44,#f0d99b 45%,var(--messing));transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.menue__zusatz{font-size:.5em;color:#F0D99B;display:inline-block;padding:0 .12em .1em 0;clip-path:inset(-20% 100% -30% 0);opacity:0;transform:translate(-.5em,.08em) rotate(-6deg);transition:clip-path .55s cubic-bezier(.5,0,.2,1),opacity .3s ease,transform .7s var(--ease)}
@media (hover:hover){
  .menue__links a:hover .menue__wort,.menue__links a:focus-visible .menue__wort{color:#F0D99B}
  .menue__links a:hover .menue__wort::after,.menue__links a:focus-visible .menue__wort::after{transform:scaleX(1);transform-origin:left}
  .menue__links a:hover .menue__zusatz,.menue__links a:focus-visible .menue__zusatz{clip-path:inset(-20% -10% -30% 0);opacity:1;transform:translate(0,.08em) rotate(-6deg);transition:clip-path .9s cubic-bezier(.3,0,.2,1) .08s,opacity .2s ease .08s,transform .8s var(--ease) .08s}
}
@media (hover:none){.menue__zusatz{display:none}}
.menue__vorschau{align-self:center;justify-self:center;width:min(100%,520px)}
.menue__marke{width:min(100%,clamp(240px,26vw,400px));aspect-ratio:1;color:var(--creme)}
.menue__marke{position:relative}
.menue__marke svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.menue__marke text{font-family:'Archivo';font-stretch:112%;font-weight:600;font-size:8.6px;letter-spacing:.1em;fill:currentColor}
.menue__marke .kern{fill:#F0D99B}
.menue__marke .ring{animation:dreh 40s linear infinite;will-change:transform}
/* #814: Endlos-Animationen ruhen, solange sie nicht zu sehen sind (Menü zu, Abschnitt ausserhalb des Bildes); sie drehen beim
   Wiedereintritt vom gleichen Winkel weiter */
.menue:not(.offen) .menue__marke .ring{animation-play-state:paused!important}
.menue__fuss{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center;justify-content:space-between;border-top:1px solid rgba(247,242,233,.22);padding-top:1.2rem;font-size:.95rem}
.menue__fuss a{text-decoration:none}
.menue__kanaele{display:flex;gap:.5rem} /* #899 */
.menue__kanaele a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(247,242,233,.4);transition:background .35s var(--ease),color .35s var(--ease)}
.menue__kanaele a:hover,.menue__kanaele a:focus-visible{background:var(--creme);color:var(--lapis)}
.menue__kanaele svg{width:18px;height:18px;display:block}
.sprache{display:inline-flex;gap:.3rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(247,242,233,.35);padding:4px}
.sprache a{padding:.25rem .8rem;border-radius:999px;font-size:.85rem;font-weight:600;text-decoration:none;color:var(--creme-2);transition:color .3s,background-color .3s}
.sprache a.an{background:var(--creme);color:var(--lapis)}
.sprache a:not(.an):hover,.sprache a:not(.an):focus-visible{color:var(--creme)}
@media (max-width:760px){.menue{grid-template-columns:1fr}.menue__vorschau{display:none}}
/* #811 Menü: fünf Punkte in Seitenreihenfolge, grösser; Zeilen steigen beim Öffnen aus der Maske; «hier» = Abschnitt, in dem man steht. Rechts bleibt das Siegel (ruhig). */
.menue__links li{opacity:1;transform:none}
.menue__links a{font-size:clamp(2.5rem,min(6.4vw,10vh),6.2rem);line-height:1}
.menue__zeile{display:inline-block;overflow:hidden;padding:.03em .08em .07em 0;margin:-.03em 0 0;vertical-align:bottom}
.menue__wort{transform:translateY(112%) rotate(3deg);transform-origin:0 100%;transition:transform .5s cubic-bezier(.7,0,.84,0),color .45s var(--ease)}
.menue.offen .menue__wort{transform:none;transition:transform 1.05s var(--ease) calc(.28s + var(--i,0) * .06s),color .45s var(--ease)}
.menue__links a.hier .menue__wort::after{transform:scaleX(1);transform-origin:left;opacity:.5}
@media (max-width:760px){.menue__links a{font-size:clamp(2.1rem,min(10.5vw,7.6vh),3.6rem)}}
@media (prefers-reduced-motion:reduce){.menue__wort{transform:none}}
.plakette .marke,.menue__marke .marke{fill:currentColor}
.menue__marke .marke{color:#F0D99B}

/* Handy (index.html, desk837) */
@media (max-width:760px){ /* #837 Esteban: oben mittig «Gespräch vereinbaren» als Hauptknopf, das Menü nur noch als Burger */
  .leiste{left:0;pointer-events:none}   /* #923 Esteban: die Leiste geht über die ganze Breite und lag über dem Logo; nur ihre Knöpfe fangen Klicks */
  .leiste > *{pointer-events:auto}
  .leiste .pille{display:inline-flex;position:absolute;left:calc(50% + 21px);top:50%;transform:translate(-50%,-50%);height:44px;padding:0 .4rem 0 .85rem;gap:.45rem;font-size:.82rem;letter-spacing:-.005em;white-space:nowrap} /* Mitte zwischen Logo und Burger */
  .leiste .pille .pfeil{width:28px;height:28px}
  .leiste > .pille:active{transform:translate(-50%,-50%)}   /* Rahmen: Drücken behält die Mitte */
  /* #873: Knopf bleibt bei offenem Menü an seiner Stelle (siehe oben) */
  .leiste{justify-content:flex-end}
  .menu-knopf{width:44px;height:44px;padding:0;justify-content:center} /* #837 Esteban: Burger so hoch wie «Gespräch vereinbaren» */
  .menu-knopf .wort{display:none}
  /* #837 Menü am Handy: das längste Wort («Einzelstücke») bestimmt die Grösse, nichts läuft mehr rechts aus dem Bild */
  .menue{grid-template-columns:minmax(0,1fr)}
  .menue__links a{font-size:min(8.4vw,7vh,3.6rem)}
  .menue__fuss{gap:.9rem 1.6rem;justify-content:flex-start}
}
@media (max-width:374px){ .leiste .pille .pfeil{display:none} .leiste .pille{padding:0 .9rem} }

/* (index.html, mobil868) */
@media (max-width:860px){
  .leiste,.ablauf__reiter{-webkit-transform:translateZ(0);will-change:transform}
  .leiste{transform:translateZ(0)}
}
/* #868 Esteban: im Menü das Vitren-Zeichen gross und leise im Hintergrund (wie auf den Empfehlungs-Seiten); es tritt beim Öffnen
   weich heran und atmet langsam, Desktop rechts angeschnitten, Handy unten rechts */
.menue__grund{position:absolute;z-index:0;right:-9vw;top:50%;height:132vh;width:auto;aspect-ratio:58.3/82.3;transform:translateY(-50%) scale(1.08);color:rgba(247,242,233,.055);pointer-events:none;opacity:0;transition:opacity .9s ease .1s,transform 1.6s var(--ease) .1s}
.menue.offen .menue__grund{opacity:1;transform:translateY(-50%) scale(1)}
.menue > :not(.menue__grund){position:relative;z-index:1}
@media (max-width:760px){ .menue__grund{right:-30vw;top:auto;bottom:-14vh;height:88vh;transform:scale(1.08)} .menue.offen .menue__grund{transform:none} }
@media (prefers-reduced-motion:reduce){ .menue__grund{transition:opacity .3s ease} }
/* #868 Esteban Menü: die Schreibschrift-Zusätze («ansehen», «kennenlernen» …) am Desktop grösser; am Handy stehen sie unter
   Handy ausgeblendet (bei «Einzelstücke ansehen» ragte die Zeile sonst aus dem Bild) */
@media (min-width:761px){ .menue__zusatz{font-size:.7em} }
@media (max-width:760px){ .menue__zusatz{display:none} }   /* auf echten Handys ohnehin aus (hover:none), so auch in der Handy-Vorschau am PC */
/* Rahmen: sechs Punkte statt fünf. «Website prüfen» ist das längste Wort (11,1 em, «Einzelstücke» 9,6 em) und bestimmt die Grösse,
   wie auf der Hauptseite am Handy «Einzelstücke» (#837): jede Zeile bleibt einzeilig, nichts läuft in das Siegel rechts oder unter
   den Fuss. Nie grösser als auf der Hauptseite. */
.menue__links a{white-space:nowrap}
@media (min-width:761px){ .menue__links a{font-size:min(clamp(2.5rem,min(6.4vw,10vh),6.2rem),calc((100vw - 2 * var(--g)) * .058))} }
@media (max-width:760px){ .menue__links a{font-size:min(8.4vw,7vh,3.6rem,calc((100vw - 2 * var(--g)) / 11.4))} }
/* Rahmen: ohne Ton-Schalter rückt DE/EN wie auf der Hauptseite an den rechten Rand */
@media (min-width:761px){ .menue__fuss .sprache{margin-left:auto} }

/* ---------- Kontakt-Fenster (index.html, #868 Runde 2 + 3, #873) ---------- */
/* #868 Kontakt-Fenster «Gespräch vereinbaren» (Runde 2): der Entscheidungsmoment. Lapis wie das Menü, Vitren-Zeichen leise im Grund,
   Gesicht + SRF oben, die Nummer als EIN Fokuspunkt (am Desktop mit QR fürs Handy), die übrigen Wege als Zeilen mit Messing-Haarlinie.
   Kein Verschieben der Seite (kein overflow:hidden), kleine Öffnung, Schliessen läuft fertig; am Handy Blatt von unten mit Griff. */
.ks{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:var(--g)}
.ks[hidden]{display:none}
.ks__grund{position:absolute;inset:0;background:rgba(9,15,34,.62);opacity:0;transition:opacity .35s ease}   /* #868: ohne Weichzeichner (der musste die ganze Seite samt 3D verwischen und liess das Öffnen ruckeln) */
.ks__karte{--gold:#E4CC92;position:relative;width:min(100%,500px);max-height:calc(100svh - 2 * var(--g));overflow:auto;overscroll-behavior:contain;isolation:isolate;
  background:radial-gradient(80% 50% at 90% 0%,#2C50AB,rgba(44,80,171,0) 70%),linear-gradient(170deg,var(--lapis),#0D1C47);color:var(--creme);
  border-radius:28px;padding:30px 30px 22px;box-shadow:0 50px 90px -40px rgba(5,10,30,.85),inset 0 0 0 1px rgba(228,204,146,.22);
  opacity:0;transform:translateY(10px) scale(.985);transition:opacity .3s ease,transform .45s var(--ease)}
.ks.offen .ks__grund{opacity:1}
.ks.offen .ks__karte{opacity:1;transform:none}
.ks__zeichen{position:absolute;z-index:-1;right:-70px;bottom:-60px;height:110%;width:auto;color:rgba(247,242,233,.05);pointer-events:none}
.ks__griff{display:none}
.ks__zu{position:absolute;right:12px;top:12px;width:52px;height:52px;border-radius:50%;border:0;background:rgba(247,242,233,.1);color:var(--creme);display:grid;place-items:center;cursor:pointer;transition:background .2s}
.ks__zu:hover{background:rgba(247,242,233,.2)}
.ks__zu svg{width:15px;height:15px}
.ks__kopf{display:flex;align-items:center;gap:.9rem}
.ks__siegel{position:relative;flex:none;width:70px;height:70px;display:grid;place-items:center}
.ks__ring{position:absolute;inset:0;width:100%;height:100%;color:rgba(247,242,233,.75);animation:dreh 28s linear infinite}
.ks__ring text{font-family:'Archivo';font-stretch:112%;font-weight:600;font-size:7.6px;letter-spacing:.08em;fill:currentColor}
.ks__siegel img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--gold),0 10px 18px -8px rgba(0,0,0,.6)}
.ks__name{font-weight:600;font-stretch:112%;font-size:1.02rem;line-height:1.2}
.ks__srf{display:flex;align-items:center;gap:.5rem;margin-top:.15rem;font-size:.86rem;color:rgba(247,242,233,.72)}
.ks__srf .srf--farbe{height:17px;width:auto;border-radius:2px}
.ks__titel{margin-top:1.3rem;font-weight:640;font-stretch:122%;font-size:clamp(1.85rem,7.2vw,2.5rem);line-height:.92;letter-spacing:-.025em;text-transform:uppercase}
.ks__notiz{margin-top:.25rem;font-size:2.1rem;color:var(--gold);transform:rotate(-3deg);transform-origin:left center}
.ks__unter{margin-top:.5rem;font-size:.98rem;line-height:1.45;color:rgba(247,242,233,.78)}
.ks__unter a{color:var(--gold);font-weight:600;text-decoration:none}
.ks__wege{margin-top:1.3rem;display:grid}
.ks__wege[hidden]{display:none}
.ks__haupt{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.1rem 1.05rem 1.25rem;border-radius:20px;background:var(--creme);color:var(--lapis);text-decoration:none;box-shadow:0 20px 34px -22px rgba(0,0,0,.8);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ks__haupt:hover{transform:translateY(-2px);box-shadow:0 26px 40px -22px rgba(0,0,0,.85)}
.ks__haupt-text{display:grid;gap:.15rem;min-width:0}
.ks__haupt .ks__art{display:flex;align-items:center;gap:.45rem;color:var(--tinte-3)}
.ks__haupt .ks__art svg{width:15px;height:15px;color:var(--lapis)}
.ks__nummer{font-weight:280;font-stretch:125%;font-size:clamp(1.75rem,7.4vw,2.2rem);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ks__qr{flex:none;display:grid;justify-items:center;gap:.35rem;padding:8px;border-radius:12px;background:var(--lapis)}
.ks__qr svg{display:block;width:74px;height:74px}
.ks__qr small{font-size:.58rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,242,233,.75);max-width:74px;text-align:center;line-height:1.2}
.ks__art{font-size:.7rem;font-weight:600;font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,233,.6)}
.ks__weg{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;width:100%;min-height:72px;padding:.95rem .25rem;border:0;border-top:1px solid rgba(228,204,146,.22);background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.ks__haupt + .ks__weg{margin-top:.7rem;border-top:0}
.ks__ikon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(247,242,233,.08);box-shadow:inset 0 0 0 1px rgba(228,204,146,.28);color:var(--gold)}
.ks__ikon svg{width:19px;height:19px}
.ks__weg-text{display:grid;gap:.12rem}
.ks__wert{font-weight:560;font-stretch:115%;font-size:1.18rem;letter-spacing:-.01em}
.ks__pfeil{width:16px;height:16px;transition:transform .45s var(--ease)}
.ks__weg .ks__pfeil{color:var(--gold)}
.ks__weg:hover .ks__pfeil,.ks__weg:focus-visible .ks__pfeil{transform:translateX(4px)}
.ks__weg:hover .ks__ikon{background:rgba(247,242,233,.14)}
.ks__haupt:focus-visible,.ks__weg:focus-visible,.ks__zu:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ks__form{margin-top:1.2rem;display:grid;gap:.8rem}
.ks__form[hidden]{display:none}
.ks__feld{display:grid;gap:.35rem}
.ks__feld span{font-size:.7rem;font-weight:600;font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,233,.65)}
.ks__feld i{font-style:normal;font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.8}
.ks__feld input{height:54px;padding:0 15px;border-radius:14px;border:1px solid transparent;background:var(--creme);font:inherit;font-size:1rem;color:var(--tinte);caret-color:var(--lapis);transition:border-color .2s,box-shadow .3s var(--ease)}
.ks__feld input::placeholder{color:#8B857A}
.ks__feld input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(228,204,146,.3)}
.ks__feld input[aria-invalid=true]{border-color:#FFB4C0;box-shadow:0 0 0 3px rgba(255,180,192,.25)}
.ks__falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ks__hinweis{min-height:1.2em;font-size:.9rem;color:#FFC2CC}
.ks__hinweis a{color:inherit}
.ks__los{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;height:58px;border:0;border-radius:999px;background:var(--gold);color:#0D1C47;font:600 1.02rem/1 'Archivo',sans-serif;font-stretch:112%;cursor:pointer;box-shadow:0 16px 28px -16px rgba(0,0,0,.8);transition:filter .2s,transform .3s var(--ease)}
.ks__los:hover{filter:brightness(1.06)}
.ks__los:active{transform:scale(.98)}
.ks__los[disabled]{opacity:.7;cursor:progress}
.ks__los-pfeil{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0D1C47;color:var(--gold)}
.ks__los-pfeil .ks__pfeil{width:13px;height:13px}
.ks__zurueck{justify-self:center;min-height:44px;padding:0 1rem;border:0;background:none;color:rgba(247,242,233,.75);font:inherit;font-size:.92rem;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.ks__danke{margin-top:1.3rem;padding:1.2rem 0 .3rem;border-top:1px solid rgba(228,204,146,.22)}
.ks__danke[hidden]{display:none}
.ks__danke-titel{font-weight:600;font-stretch:115%;font-size:1.35rem}
.ks__mail{margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(228,204,146,.18);font-size:.9rem;color:rgba(247,242,233,.6)}
.ks__karte:focus{outline:none}
.ks__mail a{display:inline-flex;align-items:center;min-height:44px;color:rgba(247,242,233,.85);text-decoration:underline;text-underline-offset:.22em}
@media (hover:none),(max-width:760px){ .ks__qr{display:none} }   /* am Handy tippt man direkt auf die Nummer */
@media (max-width:760px){
  .ks{align-items:flex-end;padding:0}
  .ks__karte{width:100%;max-height:94svh;border-radius:28px 28px 0 0;padding:16px 22px max(20px,env(safe-area-inset-bottom));transform:translateY(28px);transition:opacity .25s ease,transform .45s var(--ease)}
  .ks__griff{display:block;width:44px;height:5px;margin:0 auto 14px;border-radius:999px;background:rgba(247,242,233,.3)}
  .ks__zu{top:10px;right:10px}
  .ks__titel{margin-top:1.05rem}
}
@media (prefers-reduced-motion:reduce){ .ks__karte,.ks__grund{transition:opacity .2s ease} .ks__karte{transform:none} .ks__ring{animation:none} }
/* Esteban: «direkt zu mir, wie es Ihnen am liebsten ist.» auf EINER Zeile (Handschrift + Text), «Am Telefon bin ich es selbst» fällt weg */
.ks__zeile{margin-top:.8rem;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55rem;row-gap:.1rem}
.ks__zeile .ks__notiz{font-size:1.85rem;line-height:1.05}
.ks.offen .ks__zeile .ks__notiz{transform:rotate(-1.5deg)}
@media (max-width:760px){ .ks__zeile{margin-top:.7rem} .ks__zeile .ks__notiz{font-size:1.55rem} }
.ks__zeile .ks__notiz{margin:0;display:inline-block}
.ks__unter-text{font-size:.98rem;line-height:1.4;color:rgba(247,242,233,.8);opacity:0;transition:opacity .25s ease}
.ks.offen .ks__unter-text{opacity:1;transition:opacity .6s ease .55s}
.ks__karte{overflow-x:hidden;overflow-y:auto;scrollbar-width:none;opacity:1;transform:none;clip-path:circle(0 at var(--kx,50%) var(--ky,0));transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.ks__karte::-webkit-scrollbar{display:none}
.ks.offen .ks__karte{clip-path:circle(var(--kr,160%) at var(--kx,50%) var(--ky,0));transition:clip-path .85s var(--ease)}
.ks__zeichen-rahmen{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.ks__zeichen{position:absolute;right:-70px;bottom:-60px;height:110%;width:auto;color:rgba(247,242,233,.05);transform:scale(1.12) rotate(-4deg);transition:transform 1.4s var(--ease)}
.ks.offen .ks__zeichen{transform:none}
/* Inhalt staffelt sich nach dem Kreis herein */
.ks__kopf,.ks__titel,.ks__notiz,.ks__unter,.ks__haupt,.ks__weg,.ks__mail{opacity:0;transform:translateY(14px);transition:opacity .25s ease,transform .3s ease}
.ks.offen .ks__kopf,.ks.offen .ks__titel,.ks.offen .ks__notiz,.ks.offen .ks__unter,.ks.offen .ks__haupt,.ks.offen .ks__weg,.ks.offen .ks__mail{opacity:1;transform:none;transition:opacity .6s ease,transform .9s var(--ease)}
.ks.offen .ks__kopf{transition-delay:.12s}.ks.offen .ks__titel{transition-delay:.18s}.ks.offen .ks__notiz{transition-delay:.42s}.ks.offen .ks__unter{transition-delay:.26s}
.ks.offen .ks__haupt{transition-delay:.3s}.ks.offen .ks__weg{transition-delay:.36s}.ks.offen .ks__weg + .ks__weg{transition-delay:.42s}.ks.offen .ks__mail{transition-delay:.48s}
.ks.offen .ks__notiz{transform:rotate(-3deg)}
.ks__notiz{clip-path:inset(-30% 100% -30% 0)}
.ks.offen .ks__notiz{clip-path:inset(-30% -5% -30% 0);transition:clip-path 1s cubic-bezier(.65,0,.35,1) .45s,opacity .2s ease .45s}
/* Zeilen: eine helle Fläche gleitet von links herein, das Symbol macht seine kleine Geste, der Pfeil zieht nach */
.ks__weg{position:relative;isolation:isolate}
.ks__weg::before{content:"";position:absolute;inset:4px -10px;z-index:-1;border-radius:16px;background:rgba(247,242,233,.07);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ks__weg:hover::before,.ks__weg:focus-visible::before{transform:none}
.ks__ikon{transition:transform .5s var(--ease),background .3s}
.ks__ikon svg{transition:transform .6s var(--ease)}
.ks__weg:hover .ks__ikon{transform:scale(1.08)}
.ks__weg[data-ks-weg="whatsapp"]:hover .ks__ikon svg{animation:ks-wackel .6s ease}
.ks__weg[data-ks-rueckruf]:hover .ks__ikon svg{transform:rotate(180deg)}
.ks__weg-text{transition:transform .45s var(--ease)}
.ks__weg:hover .ks__weg-text{transform:translateX(4px)}
@keyframes ks-wackel{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
/* QR: beim Überfahren hebt er sich, eine goldene Scan-Linie läuft darüber, die Beschriftung wechselt */
.ks__qr{position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ks__qr::after{content:"";position:absolute;left:6px;right:6px;top:6px;height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(228,204,146,0),#E4CC92,rgba(228,204,146,0));box-shadow:0 0 14px 3px rgba(228,204,146,.55);opacity:0}
.ks__haupt:hover .ks__qr{transform:scale(1.08) rotate(-2deg);box-shadow:0 14px 24px -12px rgba(0,0,0,.6)}
.ks__haupt:hover .ks__qr::after{opacity:1;animation:ks-scan 1.4s cubic-bezier(.45,0,.55,1) infinite}
.ks__qr svg path{transition:fill .4s}
@keyframes ks-scan{0%{transform:translateY(0)}50%{transform:translateY(74px)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .ks__karte,.ks.offen .ks__karte{clip-path:none;transition:opacity .2s} .ks__kopf,.ks__titel,.ks__notiz,.ks__unter,.ks__haupt,.ks__weg,.ks__mail{opacity:1;transform:none;clip-path:none} .ks__haupt:hover .ks__qr::after{animation:none} }
/* Handy: Blatt von unten, kompakter (Kopf kleiner, Satz unter dem Titel weg, Zeilen flacher) */
@media (max-width:760px){
  .ks__karte{clip-path:inset(100% 0 0 0 round 28px 28px 0 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
  .ks.offen .ks__karte{clip-path:inset(0 0 0 0 round 28px 28px 0 0);transition:clip-path .7s var(--ease)}
  .ks__kopf{gap:.7rem}.ks__siegel{width:54px;height:54px}.ks__siegel img{width:34px;height:34px}
  .ks__titel{margin-top:.8rem;font-size:1.75rem}
  .ks__notiz{font-size:1.75rem}
  .ks__unter-text{font-size:.94rem}
  .ks__unter{display:none}
  .ks__wege{margin-top:1rem}
  .ks__haupt{padding:.85rem 1rem .85rem 1.1rem}
  .ks__weg{min-height:62px;padding:.65rem .2rem}
  .ks__ikon{width:40px;height:40px}
  .ks__mail{margin-top:.6rem;padding-top:.4rem}
  .ks__danke .ks__unter{display:block}
}
@keyframes held-auf{from{opacity:0;transform:translateY(16px)}}
/* #873 Esteban: das Rückruf-Formular erscheint animiert (Felder gestaffelt), und zur eingetippten Website zeigt ein Browser-Rahmen gleich
   ihr Bildschirmfoto (wie im Empfehlungs-Netzwerk, funktionen/emp-blick.js) */
@media (prefers-reduced-motion:no-preference){
  .ks__form:not([hidden]) > *{animation:held-auf .6s cubic-bezier(.16,1,.3,1) both}
  .ks__form > :nth-child(1){animation-delay:.03s}.ks__form > :nth-child(2){animation-delay:.09s}.ks__form > :nth-child(3){animation-delay:.15s}
  .ks__form > :nth-child(4){animation-delay:.2s}.ks__form > :nth-child(6){animation-delay:.24s}.ks__form > :nth-child(7){animation-delay:.28s}.ks__form > :nth-child(8){animation-delay:.32s}
  .ks .blick:not([hidden]){animation:held-auf .6s cubic-bezier(.16,1,.3,1) both}
}
.ks .blick{margin:.1rem 0 .2rem}
.ks .blick__glas{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 22px 40px -26px rgba(0,0,0,.8)}
.ks .blick__leiste{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#EFEAE2}
.ks .blick__leiste i{width:7px;height:7px;border-radius:999px;background:#CFC6B6}
.ks .blick__leiste em{margin-left:8px;padding:2px 10px;border-radius:999px;background:#F7F3EC;font-style:normal;font-size:11.5px;color:#55514A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%}
.ks .blick__bild{position:relative;background:#F4F0E9}
.ks .blick__bild:has(img:not(.geladen)){min-height:150px}
.ks .blick__bild img{display:block;width:100%;height:auto;max-height:220px;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s ease-out}
.ks .blick__bild img:not(.geladen){position:absolute;inset:0;height:100%}
.ks .blick__bild img.geladen{opacity:1}
.ks .blick__laedt{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:#857F74}
/* Rahmen: test-seite.css setzt .blick als Raster (Ergebnis-Ansicht); im Kontakt-Fenster ist .blick nur der Browser-Rahmen */
.ks .blick{display:block;grid-template-columns:none;gap:0}
.ks .blick[hidden]{display:none}
html{scrollbar-gutter:stable}   /* #873: Platz des Scrollbalkens bleibt, wenn das Kontakt-Fenster die Seite sperrt */
html.ks-auf{overflow:hidden}   /* #873 Esteban «im Hintergrund kann man scrollen, dadurch bricht vieles» */

/* #902 Ton-Schalter im Menü (aus index.html Z. 1479-1487) */
.ton-knopf svg,.ton-zeile svg{width:20px;height:20px}
.ton-an-zeichen,.ton-zeile__an{display:none}
html.ton-an .ton-an-zeichen,html.ton-an .ton-zeile__an{display:inline}
html.ton-an .ton-aus-zeichen,html.ton-an .ton-zeile__aus{display:none}
html.ton-an .ton-knopf{background:var(--creme)}
html.menue-auf .leiste > .ton-knopf{opacity:0;pointer-events:none}
.ton-zeile{display:none;align-items:center;gap:.5rem;height:44px;padding:0 1rem 0 .8rem;border-radius:999px;border:0;background:rgba(247,242,233,.12);box-shadow:inset 0 0 0 1px rgba(247,242,233,.3);color:var(--creme);font:inherit;font-size:.95rem;cursor:pointer}
.ton-zeile{display:inline-flex}
@media (min-width:761px){ .menue__fuss .ton-zeile{margin-left:auto;margin-right:-1.4rem} } /* direkt neben DE/EN */

/* #931: «KI» in der Schreibschrift-Zeile in Druckschrift (Schreibschrift-I las sich wie J) */
.schrift__ki{font-family:'Archivo',sans-serif;font-weight:700;font-style:normal;font-stretch:125%;font-size:.6em;letter-spacing:.04em;vertical-align:.12em;margin:0 .06em}

/* #931: KI-Versprechen auf der Link-Seite, ruhige Zeile unter dem Feld */
.lk__ki{margin:14px 0 0;text-align:center;font-family:'Archivo',sans-serif;font-size:15px;line-height:1.35;color:#4A453E}
.lk__ki b{font-weight:600;color:#17171A}
@media (max-width:760px){.lk__ki{font-size:13.5px;margin-top:10px}}
.lk__ki{text-wrap:balance}.lk__ki b{white-space:nowrap}