@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@300;400;500;600;700&family=Noto%20Sans%20Thai:wght@300;400;500;600&display=swap&subset=thai,latin');

/* Designsystem für L’Orangerie Vegetarian Restaurant — gerechnet, nicht ausgewählt.
   Ton 30°, Gegenton 215°, Typo-Verhältnis 1.414,
   Charakter: satt / weich / kraftvoll.
   Gemessener Kontrast (hell): Tinte 4.89:1 ·
   Matt 4.53:1 · auf Akzent 13.78:1 */

:root{
  --grund:#dc4333;--flaeche:#ffe4df;--erhoben:#ffbfb4;
  --linie:#bd0000;--tinte:#010000;--matt:#1c0705;
  --akzent:#3e2723;--akzent-text:#1a0705;
  --auf-akzent:#ffffff;--gegen:#51b4cb;
  color-scheme:light dark;

  /* Typo: EIN Verhältnis (1.414), sieben Stufen daraus. */
  --t-display:clamp(40px,5.2vw,78px);
  --t-h1:clamp(32px,3.2vw,55px);
  --t-h2:clamp(29px,1.7vw,38px);
  --t-h3:25px;--t-lead:21px;--t-body:17px;
  --t-klein:13px;--t-label:11px;

  /* Raum: EINE Skala. Ein Wert daneben ist ein Fehler. */
  --r1:4px;--r2:8px;--r3:12px;--r4:18px;
  --r5:26px;--r6:38px;--r7:56px;--r8:84px;
  --luft:clamp(56px,8vw,112px);

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

  --kopfschrift:'Pridi',system-ui,sans-serif;
  --textschrift:'Noto Sans Thai',system-ui,sans-serif;
  --spur:0em;--kopfgewicht:600;

  --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%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23ffe4df%22%2F%3E%3Cpath%20d%3D%22M0%2030%20Q60%20-5.052901656832546%20120%2030%22%20fill%3D%22none%22%20stroke%3D%22%23010000%22%20stroke-width%3D%221.9892944626510145%22%20opacity%3D%220.16%22%2F%3E%3Cpath%20d%3D%22M0%2044%20Q60%205.139529468026012%20120%2044%22%20fill%3D%22none%22%20stroke%3D%22%233e2723%22%20stroke-width%3D%221.4187962234020235%22%20opacity%3D%220.23%22%2F%3E%3Cpath%20d%3D%22M0%2058%20Q60%2025.68349614413455%20120%2058%22%20fill%3D%22none%22%20stroke%3D%22%23010000%22%20stroke-width%3D%221.0515473730862142%22%20opacity%3D%220.30000000000000004%22%2F%3E%3Cpath%20d%3D%22M0%2072%20Q60%2045.22493027104065%20120%2072%22%20fill%3D%22none%22%20stroke%3D%22%233e2723%22%20stroke-width%3D%221.9724284067749978%22%20opacity%3D%220.37%22%2F%3E%3Cpath%20d%3D%22M0%2086%20Q60%2051.32067101681605%20120%2086%22%20fill%3D%22none%22%20stroke%3D%22%23010000%22%20stroke-width%3D%221.0066629134118559%22%20opacity%3D%220.44000000000000006%22%2F%3E%3Cpath%20d%3D%22M0%20100%20Q60%2065.40887421136722%20120%20100%22%20fill%3D%22none%22%20stroke%3D%22%233e2723%22%20stroke-width%3D%221.8580042213201524%22%20opacity%3D%220.51%22%2F%3E%3Cpath%20d%3D%22M0%20114%20Q60%2073.89023106591776%20120%20114%22%20fill%3D%22none%22%20stroke%3D%22%23010000%22%20stroke-width%3D%221.634153489023447%22%20opacity%3D%220.5800000000000001%22%2F%3E%3C%2Fsvg%3E");
  --foto:url('../bilder/restaurant-1.jpg');
  --foto2:url('../bilder/restaurant-2.jpg');--foto3:url('../bilder/restaurant-2.jpg');
  
  
  --txt-beispiel:"ภาพตัวอย่าง";
}
@media (prefers-color-scheme:dark){:root{
  --grund:#180e0c;--flaeche:#211311;--erhoben:#2d1b18;
  --linie:#432c28;--tinte:#ffefed;--matt:#bd9b95;
  --akzent:#f68c7c;--akzent-text:#f68c7c;
  --auf-akzent:#110c0b;--gegen:#007f96;
  --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%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23211311%22%2F%3E%3Cpath%20d%3D%22M0%2030%20Q60%20-5.052901656832546%20120%2030%22%20fill%3D%22none%22%20stroke%3D%22%23ffefed%22%20stroke-width%3D%221.9892944626510145%22%20opacity%3D%220.16%22%2F%3E%3Cpath%20d%3D%22M0%2044%20Q60%205.139529468026012%20120%2044%22%20fill%3D%22none%22%20stroke%3D%22%23f68c7c%22%20stroke-width%3D%221.4187962234020235%22%20opacity%3D%220.23%22%2F%3E%3Cpath%20d%3D%22M0%2058%20Q60%2025.68349614413455%20120%2058%22%20fill%3D%22none%22%20stroke%3D%22%23ffefed%22%20stroke-width%3D%221.0515473730862142%22%20opacity%3D%220.30000000000000004%22%2F%3E%3Cpath%20d%3D%22M0%2072%20Q60%2045.22493027104065%20120%2072%22%20fill%3D%22none%22%20stroke%3D%22%23f68c7c%22%20stroke-width%3D%221.9724284067749978%22%20opacity%3D%220.37%22%2F%3E%3Cpath%20d%3D%22M0%2086%20Q60%2051.32067101681605%20120%2086%22%20fill%3D%22none%22%20stroke%3D%22%23ffefed%22%20stroke-width%3D%221.0066629134118559%22%20opacity%3D%220.44000000000000006%22%2F%3E%3Cpath%20d%3D%22M0%20100%20Q60%2065.40887421136722%20120%20100%22%20fill%3D%22none%22%20stroke%3D%22%23f68c7c%22%20stroke-width%3D%221.8580042213201524%22%20opacity%3D%220.51%22%2F%3E%3Cpath%20d%3D%22M0%20114%20Q60%2073.89023106591776%20120%20114%22%20fill%3D%22none%22%20stroke%3D%22%23ffefed%22%20stroke-width%3D%221.634153489023447%22%20opacity%3D%220.5800000000000001%22%2F%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. */

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}
  .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(--r5)}
.hinweis p{margin:0;max-width:64ch;font-size:var(--t-klein);color:var(--matt);line-height:1.55}
.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;font-size:var(--t-body)!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)}

/* --- 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);
  object-fit:contain;background:var(--grund);padding:2px}
.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:1240px}
.kopf__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.nav{display:flex;gap:20px;font-size:15px}
.laufband{overflow:hidden;background:var(--akzent);color:var(--auf-akzent);padding-block:var(--r3);
  border-block:1px solid var(--akzent)}
.laufband__in{display:flex;gap:44px;white-space:nowrap;animation:lauf 26s linear infinite;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero{padding-block:clamp(40px,7vw,96px)}
.hero h1{font-size:clamp(42px,10vw,120px);line-height:.94;letter-spacing:-.04em}
.reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;
  border-top:1px solid var(--linie)}
.reihe>div{padding:26px 24px;border-bottom:1px solid var(--linie);
  border-right:1px solid var(--linie)}
.reihe>div:last-child{border-right:0}
.streifen{height:clamp(180px,30vw,360px);background-image:var(--foto);background-size:cover;
  background-position:center}
.gross{font-size:clamp(30px,4.4vw,58px);line-height:1;letter-spacing:-.03em;font-weight:700}