/* ครัวคุณทวีทรัพย์ — öffentliche Website. Zweisprachig TH/EN über [data-lang] am , zwei Themes über [data-theme]. Default: Thai + Dark. Beides in localStorage gemerkt. Farben sind aus dem Ladenschild gemessen, und zwar aus der SCHRIFT und der Figur, nicht aus den Gerichtsfotos: die sind nur die Tapete des Banners. Alle drei Schriftzuege zeigen dasselbe Muster, Schwarz #241419 (24 %) und Weiss #e1e7f4 (21 %); die Katze bringt das Orange #d67346 / #9c2b1d. Daraus die drei Leitfarben Weiss, Schwarz, Orange. Dark = weisse Schrift auf Schwarz, wie das Schild bei Nacht. Light = schwarze Schrift auf Weiss, wie das Schild bei Tag. */ /* ---------------------------------------------------------------- tokens */ :root, html[data-theme="dark"] { --bg: #121011; --bg-2: #191617; --surface: #1e1a1b; --surface-2: #272223; --line: #332c2d; --line-strong: #4c4243; --ink: #f2f2f0; --ink-dim: #a8a4a0; --accent: #e8834a; --accent-deep: #c96a35; --hot: #e0523a; --on-accent: #121011; --glow: rgba(232, 131, 74, 0.13); --shadow: 0 18px 44px rgba(0, 0, 0, 0.6); } html[data-theme="light"] { --bg: #fbfaf8; --bg-2: #f2efec; --surface: #ffffff; --surface-2: #f6eee7; --line: #e2dcd6; --line-strong: #c2b8b0; --ink: #161315; --ink-dim: #5f5a58; --accent: #b8491a; --accent-deep: #94370f; --hot: #9c2b1d; --on-accent: #ffffff; --glow: rgba(184, 73, 26, 0.09); --shadow: 0 18px 44px rgba(22, 19, 21, 0.14); } :root { --wrap: 1140px; --r: 14px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --display: "Kanit", "Noto Sans Thai", "Segoe UI", sans-serif; --body: "Sarabun", "Noto Sans Thai", "Segoe UI", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 74px; } body { font-family: var(--body); background: var(--bg); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.3s var(--ease), color 0.3s var(--ease); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; } /* ---------------------------------------------------------- Zweisprachig */ /* Beide Sprachen stehen im DOM; umgeschaltet wird per CSS. Damit funktioniert die Seite auch, bevor das Skript geladen ist, und Suchmaschinen sehen alles. */ html[data-lang="th"] [data-l="en"] { display: none; } html[data-lang="en"] [data-l="th"] { display: none; } /* ------------------------------------------------------------------- nav */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.25s, background 0.25s; } .nav.scrolled { border-bottom-color: var(--line); } .nav .wrap { display: flex; align-items: center; gap: 18px; height: 66px; } .nav .mark { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; } .nav .mark [data-l] > span { color: var(--accent); } .nav .links { display: flex; gap: 26px; margin-left: auto; font-size: 0.92rem; font-weight: 500; } .nav .links a { color: var(--ink-dim); transition: color 0.18s; } .nav .links a:hover, .nav .links a:focus-visible { color: var(--accent); } .nav .tools { display: flex; align-items: center; gap: 8px; margin-left: auto; } .nav .links + .tools { margin-left: 22px; } .pill { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; } .pill button { padding: 6px 11px; color: var(--ink-dim); transition: background 0.18s, color 0.18s; } .pill button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim); transition: color 0.18s, border-color 0.18s; } .icon-btn:hover { color: var(--accent); border-color: var(--accent); } .icon-btn .sun { display: none; } html[data-theme="light"] .icon-btn .sun { display: block; } html[data-theme="light"] .icon-btn .moon { display: none; } .cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--display); font-weight: 600; font-size: 0.95rem; white-space: nowrap; transition: transform 0.15s var(--ease), background 0.2s; } .cta:hover { background: var(--accent-deep); transform: translateY(-2px); } .cta.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .cta.ghost:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); } .nav .cta { padding: 9px 16px; font-size: 0.88rem; } @media (max-width: 860px) { .nav .links { display: none; } } /* ----------------------------------------------------------------- hero */ .hero { position: relative; padding: 132px 0 64px; overflow: hidden; } .hero::before { content: ""; position: absolute; top: -30%; left: -10%; width: 70%; height: 150%; background: radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events: none; } .hero .wrap { position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); } .hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 8vw, 4.9rem); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 20px; } .hero h1 .lead { display: block; color: var(--accent); } .hero .lede { font-size: clamp(1rem, 2.2vw, 1.16rem); color: var(--ink-dim); max-width: 46ch; margin-bottom: 30px; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 46px; } /* Zwei Spalten: Text links, die Koch-Katze rechts in dem Leerraum, den die Textspalte ohnehin frei laesst. Unter 900 px stapelt es und die Katze schrumpft, damit sie auf dem Telefon nicht den halben ersten Bildschirm frisst. */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; } .hero-cat { width: clamp(180px, 24vw, 320px); height: auto; justify-self: end; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35)); } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 8px; } .hero-cat { width: clamp(130px, 34vw, 200px); justify-self: start; order: -1; } } /* Signature: das Preisband. Thailändische Ziffern über den arabischen — genau so stehen die Preise auf den Tafeln in einer Garküche. Trägt Information (die echte Preisspanne) und ist zugleich das Merkmal, an dem die Seite wiedererkennbar ist. */ .price-rail { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; display: flex; align-items: flex-end; gap: clamp(18px, 5vw, 54px); overflow-x: auto; scrollbar-width: none; } .price-rail::-webkit-scrollbar { display: none; } .price-rail .tick { flex: 0 0 auto; text-align: center; opacity: 0; transform: translateY(10px); animation: tick-in 0.6s var(--ease) forwards; } .price-rail .tick .thai { display: block; font-family: var(--display); font-size: clamp(1.7rem, 5vw, 2.7rem); font-weight: 500; line-height: 1; color: var(--accent); } .price-rail .tick .arab { display: block; font-family: var(--display); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.12em; color: var(--ink-dim); margin-top: 6px; font-variant-numeric: tabular-nums; } .price-rail .rail-note { flex: 0 0 auto; margin-left: auto; padding-left: 24px; font-size: 0.84rem; color: var(--ink-dim); max-width: 22ch; border-left: 1px solid var(--line); align-self: center; } @keyframes tick-in { to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------- marks */ .marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 56px 0; } .marks div { background: var(--bg); padding: 22px 20px; } .marks dt { font-family: var(--display); font-weight: 600; font-size: 1rem; margin-bottom: 4px; } .marks dd { font-size: 0.86rem; color: var(--ink-dim); } @media (max-width: 780px) { .marks { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------- section */ section { padding: 74px 0; } .sec-head { margin-bottom: 38px; max-width: 58ch; } .sec-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 10px; } .sec-head p { color: var(--ink-dim); } /* ------------------------------------------------------- Menü/Preistafel */ .menu-board { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; } .board-group + .board-group { border-top: 1px solid var(--line); } .board-group > h3 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; padding: 16px 22px; background: var(--surface-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .board-group > h3 .ico { font-size: 1rem; opacity: 0.75; } /* Gezeichnetes Kategorie-Icon; der Selektor oben gilt weiter für den Emoji-Fallback. Die Icons sind in Terrakotta gezeichnet und tragen deshalb in beiden Themes ohne eigene Datei je Theme. */ .board-group > h3 img.ico { width: 30px; height: 30px; opacity: 1; flex: 0 0 auto; } .board-row { display: flex; align-items: baseline; gap: 14px; padding: 13px 22px; transition: background 0.16s; } .board-row + .board-row { border-top: 1px dashed var(--line); } .board-row:hover { background: var(--surface-2); } .board-row .dish { font-family: var(--display); font-weight: 500; font-size: 1.02rem; line-height: 1.3; } .board-row .alt { font-size: 0.8rem; color: var(--ink-dim); font-style: normal; } /* Führungspunkte wie auf einer gedruckten Karte. */ .board-row .dots { flex: 1 1 auto; min-width: 18px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); opacity: 0.75; } .board-row .price { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-variant-numeric: tabular-nums; } .board-row .price .thai { font-size: 0.9rem; font-weight: 400; color: var(--ink-dim); } .board-row .price .arab { font-size: 1.28rem; font-weight: 600; color: var(--accent); min-width: 2.4ch; text-align: right; } .board-row .price .unit { font-size: 0.78rem; color: var(--ink-dim); } .board-note { padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 0.84rem; color: var(--ink-dim); } .board-loading { padding: 40px 22px; text-align: center; color: var(--ink-dim); } /* ------------------------------------------------------------- Bestellen */ .channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .channel { display: block; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 22px; transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s; } .channel:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); } .channel .ico { font-size: 1.7rem; display: block; margin-bottom: 12px; } .channel h3 { font-family: var(--display); font-weight: 600; font-size: 1.08rem; margin-bottom: 4px; } .channel p { font-size: 0.86rem; color: var(--ink-dim); } .channel.primary { border-color: var(--accent); background: linear-gradient(150deg, var(--surface-2), var(--surface)); } .channel .tag { display: inline-block; margin-top: 12px; font-family: var(--display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 10px; } .channel[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } /* ------------------------------------------------------------ Ladenfoto */ /* Steht im Ort-Abschnitt, nicht im Hero: dort ist es funktional — der Abschnitt sagt „achte auf das Schild", das Bild zeigt es. Bewusst ungeschnitten, weil Schildtext und Hausnummer 315/28 darauf lesbar sind; ein Beschnitt auf feste Höhe nähme genau die weg. */ .shot { position: relative; max-width: 760px; margin: 0 0 34px; } .shot img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); } .shot figcaption { padding-top: 12px; font-size: 0.84rem; color: var(--ink-dim); } /* ------------------------------------------------------------------- Ort */ .place { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: start; } @media (max-width: 880px) { .place { grid-template-columns: 1fr; } } .facts { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .fact { display: grid; grid-template-columns: 108px 1fr; gap: 16px; padding: 16px 20px; background: var(--surface); } .fact + .fact { border-top: 1px solid var(--line); } .fact dt { font-family: var(--display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); padding-top: 3px; } .fact dd { font-size: 0.97rem; } .fact dd a { color: var(--accent); } .fact dd a:hover { text-decoration: underline; } .fact .sub { display: block; font-size: 0.82rem; color: var(--ink-dim); margin-top: 3px; } .hours { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 22px; } .hours h3 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-bottom: 14px; } .hours .band { display: flex; align-items: baseline; gap: 12px; font-family: var(--display); font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 600; color: var(--accent); line-height: 1; } .hours .band .sep { color: var(--line-strong); font-weight: 400; } .hours .every { margin-top: 10px; font-size: 0.9rem; color: var(--ink-dim); } .hours .open-now { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.85rem; font-weight: 600; } .hours .open-now .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); } .hours .open-now.is-open .dot { background: #4caf50; box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.18); } .hours .open-now.is-closed .dot { background: var(--hot); } /* ---------------------------------------------------------------- footer */ .ft { border-top: 1px solid var(--line); padding: 44px 0 30px; background: var(--bg-2); } .ft .cols { display: flex; flex-wrap: wrap; gap: 30px 60px; margin-bottom: 30px; } .ft .brand { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.3; } .ft .brand small { display: block; font-family: var(--body); font-weight: 400; font-size: 0.85rem; color: var(--ink-dim); margin-top: 4px; } .ft nav { display: flex; flex-direction: column; gap: 7px; font-size: 0.9rem; } .ft nav a { color: var(--ink-dim); } .ft nav a:hover { color: var(--accent); } .ft .legal { border-top: 1px solid var(--line); padding-top: 18px; font-size: 0.8rem; color: var(--ink-dim); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; } /* Platzhalter-Streifen. Verschwindet, sobald die echten Zahlen da sind. */ .todo { border: 1px dashed var(--hot); border-radius: var(--r); background: color-mix(in srgb, var(--hot) 9%, transparent); color: var(--hot); padding: 13px 18px; font-size: 0.85rem; margin-top: 26px; } .todo b { font-family: var(--display); font-weight: 600; } /* ------------------------------------------------------------------ legal */ /* Impressum und Datenschutz. Lesetext statt Schaufenster: schmales Maß, ruhige Farben, keine Reveal-Animation — die Seiten muessen auch dann vollstaendig dastehen, wenn JavaScript aus ist. */ .legal { padding: 130px 0 90px; } .legal .sec-head { max-width: 62ch; margin-bottom: 30px; } .legal .sec-head h1 { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; margin-bottom: 14px; } .legal .sec-head p { color: var(--ink-dim); } /* Pflichtangaben-Karte. Bewusst wie .facts auf der Startseite gebaut, damit die Rechtsseiten nicht wie ein Fremdkoerper wirken. */ .imp-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; max-width: 760px; } .imp-card > dl > div { display: grid; grid-template-columns: 220px 1fr; gap: 18px; padding: 18px 22px; } .imp-card > dl > div + div { border-top: 1px solid var(--line); } .imp-card dt { font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-dim); } .imp-card dd { font-size: 0.97rem; line-height: 1.65; } .imp-card dd a { color: var(--accent); } .imp-card dd a:hover { text-decoration: underline; } .imp-card .sub { display: block; font-size: 0.82rem; color: var(--ink-dim); margin-top: 6px; } @media (max-width: 700px) { .imp-card > dl > div { grid-template-columns: 1fr; gap: 6px; } } .prose { max-width: 68ch; margin-top: 46px; } .prose h2 { font-family: var(--display); font-weight: 600; font-size: 1.45rem; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 22px; } .prose h3 { font-family: var(--display); font-weight: 600; font-size: 1.03rem; color: var(--accent); margin: 28px 0 8px; } .prose p { color: var(--ink-dim); font-size: 0.94rem; line-height: 1.75; } .prose p + p { margin-top: 12px; } .prose a { color: var(--accent); } .prose a:hover { text-decoration: underline; } .prose code { font-size: 0.86em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); color: var(--ink); } /* Der deutsche Rechtsteil steht unabhaengig vom Sprachschalter — Adressat ist deutsches Recht, nicht der Gast in Pattaya. Deshalb hier KEIN [data-l]. */ .legal-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.9rem; } .legal-nav a { color: var(--ink-dim); } .legal-nav a:hover { color: var(--accent); } /* Preisvorbehalt und Allergenhinweis unter der Karte. Leiser als .todo: das ist Dauerinhalt, kein Platzhalter. */ .board-legal { margin-top: 18px; font-size: 0.82rem; line-height: 1.7; color: var(--ink-dim); } .board-legal p + p { margin-top: 4px; } /* ---------------------------------------------------------------- motion */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } .price-rail .tick { opacity: 1; transform: none; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } @media print { .nav, .hero::before, .todo, .cta { display: none !important; } body { background: #fff; color: #000; } .menu-board { border-color: #999; } }