/* Designsystem für ห้างทองไทยทองดี — gerechnet, nicht ausgewählt.
   Ton 88°, Gegenton 250°, Typo-Verhältnis 1.333,
   Charakter: gedeckt / kantig / edel.
   Gemessener Kontrast (hell): Tinte 14.05:1 ·
   Matt 7.09:1 · auf Akzent 7.84:1 */

:root{
  --grund:#12110d;--flaeche:#1e1c17;--erhoben:#272521;
  --linie:#3b382e;--tinte:#e2ded3;--matt:#a49e8f;
  --akzent:#bda25f;--akzent-text:#bda25f;
  --auf-akzent:#0f0d08;--gegen:#587492;
  color-scheme:light dark;

  /* Typo: EIN Verhältnis (1.333), sieben Stufen daraus. */
  --t-display:clamp(32px,4.0vw,60px);
  --t-h1:clamp(28px,2.6vw,45px);
  --t-h2:clamp(28px,1.5vw,33px);
  --t-h3:24px;--t-lead:20px;--t-body:17px;
  --t-klein:14px;--t-label:12px;

  /* Raum: EINE Skala. Ein Wert daneben ist ein Fehler. */
  --r1:4px;--r2:8px;--r3:14px;--r4:22px;
  --r5:34px;--r6:52px;--r7:78px;--r8:116px;
  --luft:clamp(78px,8vw,144px);

  --r:3px;--r-klein:2px;
  --r-gross:5px;
  --schatten-1:0 1px 2px oklch(0.169 0.02 88 / .06);--schatten-2:0 10px 24px -14px oklch(0.169 0.03 88 / .28);
  --schatten-3:0 34px 70px -40px oklch(0.169 0.04 88 / .42);

  --kopfschrift:'K2D',system-ui,sans-serif;
  --textschrift:'Sarabun',system-ui,sans-serif;
  --spur:-0.03em;--kopfgewicht:700;

  --raus:cubic-bezier(.2,.7,.3,1);--rein:cubic-bezier(.4,0,1,1);
  --kurz:160ms;--mittel:240ms;--lang:420ms;

  --muster:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2214%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%231e1c17%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Ccircle%20cx%3D%2244.22981678508222%22%20cy%3D%22104.11234572529793%22%20r%3D%2266.55207136739045%22%20fill%3D%22%23e2ded3%22%20opacity%3D%220.22673553072847427%22%2F%3E%3Ccircle%20cx%3D%2254.51869915239513%22%20cy%3D%2246.03479724377394%22%20r%3D%2262.37712816987187%22%20fill%3D%22%23bda25f%22%20opacity%3D%220.12312978225760163%22%2F%3E%3Ccircle%20cx%3D%2282.20304629765451%22%20cy%3D%2213.966760113835335%22%20r%3D%2258.892434117384255%22%20fill%3D%22%23e2ded3%22%20opacity%3D%220.23617094022221863%22%2F%3E%3Ccircle%20cx%3D%2211.17708238773048%22%20cy%3D%221.389593817293644%22%20r%3D%2241.39152539614588%22%20fill%3D%22%23bda25f%22%20opacity%3D%220.1703514066990465%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --foto:url('../bilder/juwelier-2.jpg');
  --foto2:url('../bilder/juwelier-3.jpg');--foto3:url('../bilder/juwelier-2.jpg');
  
  
  --txt-beispiel:"ภาพตัวอย่าง";
}
@media (prefers-color-scheme:dark){:root{
  --grund:#100f0c;--flaeche:#191713;--erhoben:#22201b;
  --linie:#373228;--tinte:#f8f3e8;--matt:#aba495;
  --akzent:#c7ab64;--akzent-text:#c7ab64;
  --auf-akzent:#0f0d08;--gegen:#587492;
  --muster:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2214%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23191713%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Ccircle%20cx%3D%2244.22981678508222%22%20cy%3D%22104.11234572529793%22%20r%3D%2266.55207136739045%22%20fill%3D%22%23f8f3e8%22%20opacity%3D%220.22673553072847427%22%2F%3E%3Ccircle%20cx%3D%2254.51869915239513%22%20cy%3D%2246.03479724377394%22%20r%3D%2262.37712816987187%22%20fill%3D%22%23c7ab64%22%20opacity%3D%220.12312978225760163%22%2F%3E%3Ccircle%20cx%3D%2282.20304629765451%22%20cy%3D%2213.966760113835335%22%20r%3D%2258.892434117384255%22%20fill%3D%22%23f8f3e8%22%20opacity%3D%220.23617094022221863%22%2F%3E%3Ccircle%20cx%3D%2211.17708238773048%22%20cy%3D%221.389593817293644%22%20r%3D%2241.39152539614588%22%20fill%3D%22%23c7ab64%22%20opacity%3D%220.1703514066990465%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--textschrift);
  font-size:var(--t-body);line-height:1.62;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;min-height:100vh}
/* Korn: nur bei Kreide- und Nachtfassung. Eine Papierfläche ohne Struktur
   wirkt auf großen Flächen tot, aber sichtbares Rauschen wirkt billig —
   deshalb 3 % Deckung, fest verankert, und nie über dem Text. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size:140px 140px}
body>*{position:relative;z-index:1}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}

/* Typo — Betonung über Gewicht und Farbe, erst dann über Größe.
   Enge Laufweite nur bei großen Graden, offene bei Versalien. */
h1,h2,h3{font-family:var(--kopfschrift);font-weight:var(--kopfgewicht);
  letter-spacing:var(--spur);margin:0;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:1.04}
h2{font-size:var(--t-h2);line-height:1.1}
h3{font-size:var(--t-h3);line-height:1.28}
.lead{color:var(--matt);font-size:var(--t-lead);max-width:62ch;text-wrap:pretty}
.eyebrow{font-size:var(--t-label);letter-spacing:.15em;text-transform:uppercase;
  color:var(--matt);font-weight:600}
time,.zahl,.zeit__w,.num__n,.b__zahl,.z span:last-child{font-variant-numeric:tabular-nums}

/* Fokus: sichtbar, immer, auf jedem Steuerelement — nicht der Browserring
   auf einem eigenen Knopf. */
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:var(--r-klein)}
.sprung{position:absolute;left:-9999px;top:0;z-index:99;background:var(--akzent);
  color:var(--auf-akzent);padding:var(--r3) var(--r4);border-radius:var(--r-klein)}
.sprung:focus{left:var(--r3);top:var(--r3)}

/* Demo-Band — Charta 9.5, nicht wegklickbar */
.band{position:sticky;top:0;z-index:50;background:var(--tinte);color:var(--grund);
  font-size:var(--t-label);line-height:1.4;padding:var(--r2) var(--r4);
  display:flex;flex-wrap:wrap;gap:var(--r2) var(--r4);align-items:center;justify-content:center}
.band b{font-weight:700}
/* Die eine Handlung, die dem Ladenbesitzer offensteht, ohne die ganze Seite zu
   scrollen — und ohne die Demo als seine Seite zu zerstören. */
.band__weg{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--r3);
  border:1px solid color-mix(in srgb,var(--grund) 45%,transparent);border-radius:999px;
  font-weight:600;white-space:nowrap;
  transition:background var(--kurz) var(--raus)}
.band__weg:hover{background:color-mix(in srgb,var(--grund) 16%,transparent)}

.kopf{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--linie)}
/* Der Ladenname ist ein Link zur Startseite — also ein Tap-Ziel, also 44px.
   Gemessen: er war 20px hoch. */
.marke{font-family:var(--kopfschrift);font-weight:var(--kopfgewicht);font-size:var(--t-h3);
  letter-spacing:var(--spur);line-height:1.15;max-width:44vw;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;
  justify-content:center;min-height:44px}
.marke small{display:block;font-family:var(--textschrift);font-weight:400;
  font-size:var(--t-label);color:var(--matt);letter-spacing:.04em}
.nav{white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--matt);padding:var(--r1) 0;border-bottom:2px solid transparent;
  transition:color var(--kurz) var(--raus),border-color var(--kurz) var(--raus)}
.nav a:hover{color:var(--tinte)}
.nav a[aria-current]{color:var(--tinte);border-color:var(--akzent)}
@media(max-width:640px){.marke{font-size:var(--t-body);max-width:32vw}.marke small{display:none}
  /* ⛔ Bei einer Kundenvorschau trägt diese Zeile die Branche — sie ist auf
     „Bilder" und „Kontakt" die einzige Stelle, die sagt, was der Betrieb tut.
     Sie auszublenden hiesse, die Seite dort stumm zu schalten. */
  .marke--logo small{display:block}
  .nav{font-size:var(--t-klein)!important;gap:var(--r3)!important}}

/* Knöpfe: alle Zustände, Tap-Ziel 48. Nur transform und opacity bewegen sich. */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--r2);
  min-height:48px;padding:0 var(--r4);border-radius:var(--r);border:1px solid var(--linie);
  background:var(--flaeche);color:var(--tinte);font-weight:600;font-size:var(--t-body);
  font-family:var(--textschrift);cursor:pointer;
  transition:transform var(--kurz) var(--raus),border-color var(--kurz) var(--raus),
    box-shadow var(--kurz) var(--raus)}
.knopf:hover{transform:translateY(-2px);border-color:var(--akzent);box-shadow:var(--schatten-2)}
.knopf:active{transform:translateY(0)}
.knopf[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.knopf--haupt{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.knopf--haupt:hover{box-shadow:var(--schatten-3)}
.hero__tat{display:flex;flex-wrap:wrap;gap:var(--r3);margin-top:var(--r5)}
.hero__tat.mitte{justify-content:center}

.merk{display:flex;flex-wrap:wrap;gap:var(--r2);margin-top:var(--r4)}
.merk li{display:inline-flex;align-items:center;gap:var(--r2);border:1px solid var(--linie);
  border-radius:999px;padding:var(--r2) var(--r4);font-size:var(--t-klein);background:var(--flaeche)}
.merk .pkt{width:6px;height:6px;border-radius:50%;background:var(--akzent);flex:none}

.gal{display:grid;gap:var(--r3);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* ⛔ 07.08.2026: Vorher trug nur die erste und fünfte Kachel ein Bild, der Rest
   das Muster mit dem Wort „รูปของคุณ" auf leerer Fläche — das sah aus wie ein
   unfertiger Kasten. Jetzt trägt JEDE Kachel ein echtes Foto, reihum aus drei
   verschiedenen, damit nie zwei gleiche nebeneinander liegen.
   Und jede trägt ihr Abzeichen: das Foto zeigt NICHT diesen Betrieb. */
.gal__f{aspect-ratio:1;border-radius:var(--r);background-image:var(--foto);background-size:cover;
  background-position:center;display:grid;place-items:end start;padding:var(--r3);overflow:hidden;
  position:relative}
.gal__f:nth-child(3n+2){background-image:var(--foto2)}
.gal__f:nth-child(3n+3){background-image:var(--foto3)}
/* Lesbar auf hell wie auf dunkel: das Abzeichen sitzt auf einer eigenen Fläche,
   nicht auf dem Foto. Ein Verlauf am unteren Rand trägt es. */
.gal__f::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
  background:linear-gradient(to top,oklch(0 0 0/.55),transparent)}
.gal__f span{position:relative;z-index:1;font-size:var(--t-label);font-weight:600;
  background:oklch(0 0 0/.62);color:#fff;padding:var(--r1) var(--r3);border-radius:999px;
  backdrop-filter:blur(3px)}

/* ⛔ Auch die grossen Bildflächen der Architekturen tragen ihr Abzeichen —
   Kopfbild, Bildband und Bento-Kachel. Der Text kommt aus einer Eigenschaft,
   damit derselbe Baustein auf Thai und Englisch funktioniert, ohne dass zehn
   Architekturen ihre Auszeichnung ändern müssen. */
.streifen,.b--foto,.buehne{position:relative}
.streifen::after,.b--foto::after,.buehne::before{content:var(--txt-beispiel);
  position:absolute;top:var(--r3);right:var(--r3);z-index:2;
  font-size:var(--t-label);font-weight:600;line-height:1;
  background:oklch(0 0 0/.62);color:#fff;padding:var(--r1) var(--r3);border-radius:999px;
  backdrop-filter:blur(3px);pointer-events:none}

/* Der Satz, der einmal je Seite unübersehbar dastehen muss. */
.fotonote{background:color-mix(in srgb,var(--akzent) 9%,var(--flaeche));
  border-bottom:1px solid var(--linie)}
.fotonote__in{max-width:1180px;margin:0 auto;padding:var(--r3) var(--r4);
  display:flex;gap:var(--r2) var(--r4);align-items:baseline;flex-wrap:wrap}
.fotonote b{font-size:var(--t-klein);color:var(--akzent-text);font-weight:700}
.fotonote i{font-style:normal;font-size:var(--t-label);color:var(--tinte);opacity:.85}
.fotonote em{font-style:normal;font-size:var(--t-label);color:var(--matt)}
/* ⛔ Am Telefon gemessen: Demo-Band und Hinweis zusammen nahmen 380 von 844 px,
   bevor der Betrieb seinen eigenen Namen sah. Der Hinweis muss ehrlich sein,
   nicht laut — deshalb dieselbe Aussage auf halber Höhe. */
@media(max-width:640px){
  .fotonote__in{padding:var(--r2) var(--r3);gap:1px var(--r2);line-height:1.45}
  .fotonote b{font-size:13px}
  .fotonote i,.fotonote em{font-size:11.5px}
}
.gal__f:nth-child(3n+1){aspect-ratio:4/5}
.gal__f:nth-child(4n){aspect-ratio:5/4}

.form{display:grid;gap:var(--r3);max-width:520px}
.form input,.form textarea{font:inherit;font-size:var(--t-body);padding:var(--r3) var(--r4);
  border-radius:var(--r);border:1px solid var(--linie);background:var(--flaeche);
  color:var(--tinte);width:100%}
.form input[disabled],.form textarea[disabled]{opacity:.55}
.form__hinweis{font-size:var(--t-klein);color:var(--matt);border-left:3px solid var(--akzent);
  padding-left:var(--r3)}

.tel{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:var(--r3);
  padding:var(--r3) var(--r4) calc(var(--r3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--grund) 94%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--linie)}
.tel .knopf{flex:1}
@media(max-width:720px){.tel{display:flex}body{padding-bottom:86px}}

.angebot{background:var(--tinte);color:var(--grund);text-align:center;padding-block:var(--luft)}
.angebot h2{color:var(--grund)}
.angebot p{color:color-mix(in srgb,var(--grund) 76%,var(--tinte));margin-inline:auto}
.angebot__vertrauen{margin-top:var(--r3);font-weight:600;
  color:color-mix(in srgb,var(--grund) 92%,var(--tinte))!important;max-width:48ch}
.angebot__tat{display:flex;flex-wrap:wrap;gap:var(--r3);justify-content:center;margin-top:var(--r5)}
.angebot .knopf{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.angebot .knopf--rand{background:transparent;border-color:currentColor;color:inherit}

/* ======================================================================
   KUNDENVORSCHAU — unser Anteil an einer Seite, die uns nicht gehört

   ⛔ 07.08.2026, auf 390 px nachgemessen: Band 91 px + Fotohinweis 105 px +
   Angebotsblock 502 px + Fuss 181 px = 879 px von 1788 px. Wir waren 49 %
   der Seite, der Betrieb 42 %. Sun: „man muss echt nicht hier zur zahlung
   gross anzeigen."

   Wie es die machen, die es können: WordPress-Adminleiste 32 px (46 px auf
   dem Telefon), Shopify-Ankündigungsleiste 39 px, Webflow-Signatur 26 px,
   Squarespace bewirbt sein eigenes Produkt auf der eigenen Demo mit einer
   Karte von 243 × 76 px — 9 % der Höhe eines 844-px-Schirms. Keiner von
   ihnen legt einen VerkaufsABSCHNITT in die fremde Seite.

   Zielbudget hier: unter 15 % der Seitenhöhe, ein Preis, ein Knopf.
   ====================================================================== */
.band--kunde{min-height:36px;padding:var(--r1) var(--r3);gap:var(--r2) var(--r3);
  justify-content:space-between;flex-wrap:nowrap;font-size:13px}
.band--kunde .band__satz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Kein Knopf im Band. Ein Knopf ist eine Aufforderung, und wir fordern hier
   nichts — der Kunde soll SEINE Seite ansehen. */
.band--kunde .band__weg{border:0;padding:0 var(--r1);min-height:32px;flex:none;
  text-decoration:underline;text-underline-offset:3px;opacity:.85;font-weight:500}
.band--kunde .band__weg:hover{background:none;opacity:1}
@media(max-width:640px){.band--kunde{min-height:44px;font-size:14px}}

.fotonote--schmal .fotonote__in{padding:var(--r2) var(--r4);gap:2px var(--r2);line-height:1.4}
.fotonote--schmal b{font-size:var(--t-label)}
.fotonote--schmal i{font-size:var(--t-label)}

/* --- Sprachumschalter ---------------------------------------------------
   ⛔ Er sitzt im Kopf SEINER Seite, nicht in unserem Band. Im Band wäre er
   ein Werkzeug von uns; im Kopf ist er eine Eigenschaft seiner Website —
   und genau die verkaufen wir ihm („ภาษาไทยและอังกฤษ").

   Keine Flaggen (eine Flagge ist ein Land, keine Sprache). Trefferflächen
   nach WCAG 2.5.8: mindestens 24 × 24 px, hier 44 × 32 px, auf dem Telefon
   40 × 36 px. Der aktive Zustand ist eine gefüllte Fläche PLUS Fettung —
   nie allein eine Farbe (Sprünglis Goldton schafft nur 2,8:1). */
.kopf__rechts{display:flex;align-items:center;gap:var(--r3);min-width:0}
.sprachen{display:inline-flex;align-items:center;gap:2px;padding:2px;flex:none;
  border:1px solid var(--linie);border-radius:999px;background:var(--flaeche)}
.sprachen a{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:32px;padding:0 var(--r2);border-radius:999px;
  font-size:var(--t-label);font-weight:600;color:var(--matt);white-space:nowrap;
  transition:background var(--kurz) var(--raus),color var(--kurz) var(--raus)}
.sprachen a:hover{color:var(--tinte)}
.sprachen abbr{text-decoration:none;border:0;cursor:inherit}
.sprachen a[aria-current]{background:var(--tinte);color:var(--grund);font-weight:700}
@media(max-width:640px){.sprachen a{min-width:40px;min-height:36px;font-size:12px}}

/* --- Der leise Hinweis am Fuss ------------------------------------------ */
.hinweis{border-top:1px solid var(--linie);background:var(--flaeche);padding-block:var(--r4)}
.hinweis p{margin:0;max-width:64ch;font-size:var(--t-klein);color:var(--matt);line-height:1.5}
.hinweis__marke{font-weight:700;color:var(--tinte)!important;font-size:var(--t-label)!important;
  letter-spacing:.12em;text-transform:uppercase}
.hinweis__satz{margin-top:var(--r2)!important;color:var(--tinte)!important}
.hinweis__preis{margin-top:var(--r2)!important}
.hinweis__mwst{margin-top:var(--r1)!important;font-size:var(--t-label)!important;opacity:.8}
.hinweis__tat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3);margin-top:var(--r4)}
.knopf--klein{min-height:44px;padding:0 var(--r4);font-size:var(--t-klein)}
.hinweis__wir{font-size:var(--t-klein);color:var(--matt);text-decoration:underline;
  text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.hinweis__wir:hover{color:var(--tinte)}
/* Die zur Überschrift beförderte Augenbraue — siehe h1Sichern. */
.seitentitel{font-size:var(--t-h2);letter-spacing:var(--spur);text-transform:none;
  color:var(--tinte);margin-bottom:var(--r3)}

/* --- Das Logo des Kunden ------------------------------------------------
   Vollständig sichtbar (object-fit contain), nie beschnitten, auf ruhiger
   Fläche — ein Logo verträgt keinen Anschnitt, dafür ist es gezeichnet. */
.marke--logo{flex-direction:row;align-items:center;gap:var(--r3);max-width:62vw;white-space:normal}
.marke__logo{width:44px;height:44px;flex:none;border-radius:var(--r-klein);
  /* Weiss, nicht die Seitenfarbe: fast jedes eingesandte Logo hat selbst
     einen weissen Grund. Auf hellblau ergäbe das ein weisses Rechteck mitten
     im Kopf — mit Rahmen und Radius liest es sich als Logoplatte. */
  object-fit:contain;background:#fff;border:1px solid var(--linie);padding:3px}
.marke__wort{display:flex;flex-direction:column;justify-content:center;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fuss{font-size:var(--t-klein);color:var(--matt);padding-block:var(--r6);
  border-top:1px solid var(--linie)}
.fuss a{color:var(--akzent-text);text-decoration:underline;text-underline-offset:3px}


/* ============================================================
   Kräftige Fassung — Farbe als Fläche, Licht das sich bewegt.

   ⛔ 07.08.2026, Suns Befund: „ohne coole Animationen und so, auch farblich
   sieht alles so gleich aus und verblasste Farben." Gemessen stimmte beides:
   genau EINE Bewegung je Seite (das Laufband), kein einziger Verlauf im CSS,
   jeder Grund entweder fast weiß oder fast schwarz.

   Was hier dazukommt, bewegt sich langsam und erklärt etwas: das Licht wandert
   über den Kopf (die Seite lebt), das Foto fährt kaum merklich (es ist ein Ort,
   kein Katalogbild), die Abschnitte kommen gestaffelt (Reihenfolge). Nichts
   blinkt, nichts springt, alles nur transform und opacity.
   ============================================================ */
.hero,.sec.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.sec.hero::before{content:'';position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 52% at 18% 8%,color-mix(in oklab,var(--akzent) 42%,transparent),transparent 68%),
    radial-gradient(40% 46% at 88% 22%,color-mix(in oklab,var(--gegen,var(--akzent)) 30%,transparent),transparent 70%);
  animation:schweben 19s var(--raus) infinite alternate}
@keyframes schweben{to{transform:translate3d(3%,2%,0) scale(1.06)}}

/* Das Foto fährt — Ken-Burns über die Hintergrundlage, kein Layoutwechsel. */
/* ⛔ Nur EIN Bild fährt. Seit jede Kachel ein Foto trägt, hiesse „alle" neun
   gleichzeitig laufende Hintergrundanimationen — auf einem Telefon im
   Mobilfunknetz ist das genau der Effekt, der die Seite billig macht. */
.gal__f:first-child,.b--foto{
  background-size:112%;animation:fahrt 26s ease-in-out infinite alternate}
@keyframes fahrt{from{background-position:48% 46%}to{background-position:54% 56%}}

/* Der Hauptknopf trägt sein eigenes Licht und hebt beim Berühren ab. */
.knopf--voll,.angebot .knopf{box-shadow:0 12px 32px -14px var(--akzent);
  transition:transform var(--kurz) var(--raus),box-shadow var(--kurz) var(--raus)}
.knopf--voll:hover,.angebot .knopf:hover{transform:translateY(-2px);
  box-shadow:0 18px 40px -14px var(--akzent)}

/* Karten heben sich, wenn der Finger darauf liegt. */
.gal__f,.karte,.b{transition:transform var(--mittel) var(--raus)}
.gal__f:hover,.karte:hover,.b:hover{transform:translateY(-3px)}

/* Gestaffelt statt gleichzeitig: der Blick bekommt eine Reihenfolge. */
[data-auf]:nth-of-type(2){transition-delay:80ms}
[data-auf]:nth-of-type(3){transition-delay:160ms}
[data-auf]:nth-of-type(4){transition-delay:240ms}

/* Bewegung: 240 ms Eingang, ease-out, nur transform und opacity. */
[data-auf]{opacity:0;transform:translateY(14px);
  transition:opacity var(--lang) var(--raus),transform var(--lang) var(--raus)}
[data-auf].da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-auf]{opacity:1;transform:none}
}


.wrap{width:min(100% - 40px,var(--breit));margin-inline:auto}
.sec{padding-block:var(--luft);position:relative}
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--matt);font-weight:600}
.lead{color:var(--matt);font-size:clamp(16.5px,1.7vw,19px);max-width:60ch}
.muster{background-image:var(--muster);background-size:cover;background-position:center}

:root{--breit:960px}
.kopf__in{display:flex;align-items:center;justify-content:center;gap:26px;padding-block:16px;
  flex-wrap:wrap}
.nav{display:flex;gap:20px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.hero{text-align:center;padding-block:clamp(46px,8vw,110px);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(120vw,900px);aspect-ratio:1;border-radius:50%;background-image:var(--muster);
  background-size:cover;opacity:.34}
.hero>*{position:relative;z-index:1}
.siegel{width:clamp(150px,26vw,230px);aspect-ratio:1;border-radius:50%;margin:0 auto 30px;
  border:2px solid var(--akzent);display:grid;place-items:center;text-align:center;padding:22px;
  background:var(--flaeche)}
.siegel b{display:block;font-size:clamp(15px,2vw,20px);line-height:1.15}
.siegel span{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--matt);margin-top:8px}
.hero h1{font-size:clamp(34px,6.6vw,72px);line-height:1.02}
.hero .lead{margin-inline:auto}
.hero__tat{justify-content:center}
.kreise{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px}
.kreis{border:1px solid var(--linie);border-radius:999px;padding:11px 22px;font-size:15px;
  background:var(--flaeche)}
.mitte{text-align:center}
.mitte .lead{margin-inline:auto}


/* ===== Welle 2 ===== gemessene Werte, siehe Kommentar im Bauer ===== */
:root{
  --name-em:6.90;
  /* Fünf Stufen, keine sechste. Mindestwert = 45 % des Höchstwerts, Wachstum
     8vw — das Muster aller fünf geprüften Referenzen. */
  --t-display:min(clamp(34px,8vw,104px),calc((100vw - 44px) * 2 / var(--name-em)));
  --t-h1:var(--t-display);
  --t-h2:clamp(26px,5vw,56px);
  --t-h3:clamp(20px,3vw,30px);
  --t-lead:clamp(17px,2vw,21px);
  --t-body:clamp(15.5px,1vw,18px);
  --t-klein:14px;--t-label:12.5px;
  --lh-kopf:1.35;
  --r:clamp(10px,2.2vw,22px);--r-gross:clamp(14px,3vw,30px);
  /* ⛔ EIN Schattentoken. Sunbeam Bagels hat in einem preisgekrönten Stylesheet
     genau einen; Tiefe kommt dort aus Verlauf und Überlagerung, nicht aus
     Schlagschatten. Weiche graue Kästen sind das Kennzeichen der Vorlage. */
  --schatten-1:0 0 0 1px oklch(0 0 0/.10),0 1px 3px oklch(0 0 0/.10);
  --luft:clamp(96px,11vw,190px);
}
/* Typografie vor Farbe: das ist der billigste Weg zu „teuer". */
h1,h2,.gross,.saeule h1,.b h1,.hero h1{line-height:var(--lh-kopf);letter-spacing:-.02em;
  text-wrap:balance}
/* Thai braucht Kopfraum, sonst stösst die obere Tinte an die Zeile darüber.
   Der gegenläufige Aussenabstand hält den optischen Rhythmus. */
h1,.gross{padding-top:.24em;margin-top:-.24em}
body{line-height:1.75}
.eyebrow{letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-label);font-weight:600}

/* ⛔ Tiefe ohne Schatten: ein Verlauf über jedem Foto, das Text trägt. Der Text
   bleibt lesbar, ohne dass ein Kasten die Bildwirkung zerschneidet. */
.buehne::after,.hero--bild::after{background:linear-gradient(180deg,transparent 35%,oklch(0 0 0/.72) 100%)}

/* Korn über allem — 4 %, überlagernd, nie über dem Text klickbar. Das ist der
   Unterschied zwischen „flache Fläche" und „bedrucktes Papier". */
body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== Die EINE grosse Geste: der Kopfbereich baut sich auf ==============
   Bild und Text zeitversetzt, höchstens drei Stufen, danach passiert auf der
   Seite nichts Grosses mehr. Nur transform und opacity — alles andere kostet
   auf einem Telefon im Mobilfunknetz Bilder pro Sekunde. */
.hero>*,.buehne>*,.saeule>*,.b--breit>*{animation:heldRein 700ms cubic-bezier(.16,1,.3,1) both}
.hero>*:nth-child(1),.buehne>*:nth-child(1),.saeule>*:nth-child(1),.b--breit>*:nth-child(1){animation-delay:120ms}
.hero>*:nth-child(2),.buehne>*:nth-child(2),.saeule>*:nth-child(2),.b--breit>*:nth-child(2){animation-delay:180ms}
.hero>*:nth-child(3),.buehne>*:nth-child(3),.saeule>*:nth-child(3),.b--breit>*:nth-child(3){animation-delay:240ms}
.hero>*:nth-child(n+4),.buehne>*:nth-child(n+4),.saeule>*:nth-child(n+4),.b--breit>*:nth-child(n+4){animation-delay:300ms}
@keyframes heldRein{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}

/* Eine einzige Enthüllung je Abschnitt — 600 ms, 24 px, einmalig. */
[data-auf]{transition:opacity 600ms cubic-bezier(.16,1,.3,1),transform 600ms cubic-bezier(.16,1,.3,1)}
[data-auf]:not(.da){opacity:0;transform:translate3d(0,24px,0)}

/* Antippen: kurz und mit Tiefe statt mit Farbe. */
.knopf{transition:transform 160ms cubic-bezier(.16,1,.3,1),box-shadow 160ms}
.knopf:active{transform:scale(.97);transition-duration:120ms}
.knopf--haupt,.knopf--voll{box-shadow:var(--schatten-1)}

/* ⛔ Ohne dieses Netz bleibt eine Demo leer, wenn der Beobachter nie feuert —
   und eine leere Demo ist eine verlorene Demo. */
@media (prefers-reduced-motion:reduce){
  .hero>*,.buehne>*,.saeule>*,.b--breit>*{animation:none}
  [data-auf]:not(.da){opacity:1;transform:none}
}
html:not(.js) [data-auf]:not(.da){opacity:1;transform:none}

/* ⛔ Gemessen am Telefon (390 px): „Takraihom Thai Massage 3" stand als
   „Takraihom Thai M…" im Kopf. „.marke" war auf 32vw gedeckelt — bei einem
   zweispaltigen Kopf sinnvoll, bei einem MITTIGEN Kopf (Siegel, Kassenzettel)
   verschenkt es die halbe Zeile. Der Name des Betriebs ist das Erste, was der
   Inhaber sucht; abgeschnitten wirkt er wie ein Fehler, und ein Fehler
   verkauft nicht. */
@media(max-width:640px){.marke{max-width:86vw;white-space:normal;text-overflow:clip;line-height:1.3}}

/* Die klebende Kopfleiste bekommt Tiefe statt einer Trennlinie. Nur hier —
   „backdrop-filter" auf mehreren Flächen kostet auf dem Telefon spürbar. */
.kopf{backdrop-filter:blur(12px)}

/* ⛔ Die Architektur „Siegel" zeichnete ihren Kopfbereich als Muster, auch wenn
   ein echtes Foto vorlag — genau der leere Kopf, den Sun bemängelt hat. Jetzt
   trägt der grosse Kreis das Foto, ruhig hinterlegt, damit die Schrift darüber
   ihren gemessenen Kontrast behält. */
.hero::before{background-image:var(--foto);opacity:.2}