/* ========================================================================= MALIMA · Minimal-Mockup — gleiches Design, knappe Texte ========================================================================= */ :root{ --display:'Fraunces',serif; --body:'Spectral',Georgia,serif; --script:'Caveat',cursive; --cream:#F4E9D2; --oxblood-ink:#2A0709; --bg:#F4E9D2; --bg-soft:#EFE0C4; --bg-panel:#FBF4E4; --ink:#2A0709; --ink-soft:#7c5a4e; --line:rgba(92,14,21,.15); --line-strong:rgba(92,14,21,.28); --accent:#5C0E15; --accent-2:#E1969B; --rose-soft:#F4D2D2; --rose-pale:#FBE6E4; --sage:#7E8C5E; --sage-soft:#AFBA8E; --caramel:#B97A45; --shadow-1:0 12px 30px rgba(56,8,16,.08); --shadow-2:0 22px 55px rgba(56,8,16,.14); --shadow-rose:rgba(225,150,155,.4); --radius:18px; --radius-lg:26px; --gutter:clamp(20px,5vw,64px); --maxw:1180px; --ease:cubic-bezier(.4,.04,.2,1); } html[data-theme="night"]{ --bg:#1A0609; --bg-soft:#230a0d; --bg-panel:#2a0b0f; --ink:#F6E3D8; --ink-soft:#C9A6A0; --line:rgba(246,210,210,.15); --line-strong:rgba(246,210,210,.26); --accent:#E1969B; --accent-2:#E8B4B8; --rose-soft:#F4D2D2; --rose-pale:#3a0b12; --sage:#AFBA8E; --sage-soft:#9FB07A; --shadow-1:0 12px 30px rgba(0,0,0,.4); --shadow-2:0 22px 55px rgba(0,0,0,.5); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; /* Ohne das vergrößern mobile Browser Schriften eigenmächtig. Beim umlaufenden Text im Medaillon führt das dazu, dass er breiter wird als der Kreis und hinten abgeschnitten erscheint. */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* Sprungziele (#karte, #anfahrt …) sind ein beworbenes Feature — wer weiche Bewegung abgeschaltet hat, soll trotzdem springen, nur eben ohne Scrollfahrt. */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .6s var(--ease), color .6s var(--ease); overflow-x:hidden; } body::after{ /* grain */ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:multiply; 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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html[data-theme="night"] body::after{ mix-blend-mode:screen; opacity:.06; } a{ color:inherit; text-decoration:none; } /* height:auto ist Pflicht, sobald Bilder width/height als Attribute tragen (tun sie: Medaillon, Beitragsbilder). Ohne diese Zeile nimmt der Browser die Attribut-Höhe wörtlich — ein 854×856-Logo würde bei width:100% zu einem 400×856 hohen Element und risse das Layout auseinander. Mit height:auto dienen die Attribute nur noch als Seitenverhältnis, wofür sie gedacht sind: Der Platz ist reserviert, bevor die Datei da ist, ohne die Größe zu erzwingen. */ img{ max-width:100%; height:auto; display:block; } ::selection{ background:var(--accent-2); color:var(--oxblood-ink); } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } .wrap{ width:min(100% - 2*var(--gutter), var(--maxw)); margin-inline:auto; } .eyebrow{ font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); } html[data-theme="night"] .eyebrow{ color:var(--accent-2); } .section{ padding:clamp(48px,7vw,84px) 0; position:relative; z-index:2; } .section--soft{ background:var(--bg-soft); } .section--tight{ padding-top:clamp(20px,3vw,34px); } /* zwei weiche Abschnitte hintereinander sollen nicht wie ein Block wirken */ .section--soft + .section--soft{ padding-top:clamp(24px,4vw,48px); } .s-title{ font-family:var(--display); font-style:italic; font-weight:330; font-size:clamp(1.9rem,4vw,3rem); line-height:1; margin:.2em 0 0; letter-spacing:-.01em; } .s-title em{ color:var(--accent); font-style:italic; } /* buttons */ .btn{ display:inline-flex; align-items:center; gap:9px; justify-content:center; font-family:var(--body); font-weight:600; font-size:.98rem; padding:12px 22px; border-radius:32px; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s; } .btn-primary{ background:var(--accent); color:var(--cream); box-shadow:0 10px 24px var(--shadow-rose); } html[data-theme="night"] .btn-primary{ background:var(--accent-2); color:var(--oxblood-ink); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px var(--shadow-rose); } .btn-ghost{ background:transparent; color:var(--accent); border-color:var(--line-strong); } html[data-theme="night"] .btn-ghost{ color:var(--accent-2); } .btn-ghost:hover{ transform:translateY(-2px); border-color:var(--accent); } /* ---------- NAV ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; gap:18px; padding:12px var(--gutter); background:color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:.4s; } .nav.scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-1); padding-block:8px; } .brand{ display:flex; align-items:center; gap:11px; margin-right:auto; } .brand img{ width:38px; height:38px; object-fit:contain; } .brand .mk-night{ display:none; } html[data-theme="night"] .brand .mk-day{ display:none; } html[data-theme="night"] .brand .mk-night{ display:block; } .brand b{ font-family:var(--display); font-style:italic; font-weight:400; font-size:1.5rem; } .nav-links{ display:flex; gap:22px; } .nav-links a{ font-size:.95rem; position:relative; } .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; background:var(--accent-2); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .nav-links a:hover::after{ transform:scaleX(1); } .status-pill{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; padding:6px 13px; border-radius:30px; border:1px solid var(--line-strong); } .status-dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); position:relative; } .status-dot.closed{ background:var(--accent-2); } .status-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:ping 2.4s var(--ease) infinite; } @keyframes ping{ 0%{ transform:scale(1); opacity:.6; } 70%,100%{ transform:scale(2.4); opacity:0; } } .theme-toggle{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--accent); display:grid; place-items:center; cursor:pointer; transition:transform .4s; } html[data-theme="night"] .theme-toggle{ color:var(--accent-2); } .theme-toggle:hover{ transform:rotate(18deg); } .theme-toggle svg{ width:20px; height:20px; } .nav .desk{ display:inline-flex; } /* active section (scroll-spy) */ .nav-links a.active{ color:var(--accent); } html[data-theme="night"] .nav-links a.active{ color:var(--accent-2); } .nav-links a.active::after{ transform:scaleX(1); } /* dynamic mobile menu */ .burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; padding:0; place-items:center; } .burger span{ position:relative; display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:.3s var(--ease); } .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:2px; transition:.3s var(--ease); } .burger span::before{ top:-6px; } .burger span::after{ top:6px; } body.menu-open .burger span{ background:transparent; } body.menu-open .burger span::before{ top:0; transform:rotate(45deg); } body.menu-open .burger span::after{ top:0; transform:rotate(-45deg); } .mnav{ position:fixed; top:0; left:0; right:0; z-index:99; display:none; flex-direction:column; gap:2px; background:var(--bg); padding:84px var(--gutter) 30px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-2); transform:translateY(-100%); transition:transform .45s var(--ease); } body.menu-open .mnav{ transform:translateY(0); } .mnav a:not(.btn){ font-family:var(--display); font-style:italic; font-weight:340; font-size:1.9rem; padding:11px 0; border-bottom:1px solid var(--line); transition:color .3s, padding-left .3s; } .mnav a:not(.btn):hover,.mnav a.active{ color:var(--accent); padding-left:8px; } html[data-theme="night"] .mnav a:not(.btn):hover, html[data-theme="night"] .mnav a.active{ color:var(--accent-2); } .mnav .btn{ margin-top:20px; } .mnav-status{ margin-top:16px; display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.92rem; color:var(--ink-soft); } body.menu-open{ overflow:hidden; } section[id], header[id]{ scroll-margin-top:78px; } @media (max-width:860px){ .nav-links, .nav .desk{ display:none; } .nav .status-pill{ display:none; } .burger{ display:inline-grid; } .mnav{ display:flex; } } /* ---------- HERO (alles auf einen Blick) ---------- */ .hero{ padding:calc(86px + 3vw) 0 clamp(30px,4vw,54px); position:relative; z-index:2; } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,70px); align-items:center; } .badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); padding:7px 15px; border-radius:30px; background:color-mix(in srgb, var(--accent-2) 22%, transparent); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); margin-bottom:18px; } .badge .d{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%, transparent); } html[data-theme="night"] .badge{ color:var(--rose-soft); background:rgba(225,150,155,.16); border-color:rgba(225,150,155,.4); } html[data-theme="night"] .badge .d{ background:var(--accent-2); box-shadow:0 0 10px var(--accent-2); } .hero h1{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(2.8rem,7vw,5.6rem); line-height:.94; letter-spacing:-.02em; margin:0 0 .3em; } .hero h1 .b{ color:var(--accent); } .hero-sub{ font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--ink-soft); max-width:42ch; margin:0 0 1.3em; } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:1.5em; } .facts{ display:flex; flex-wrap:wrap; gap:10px; } .fact{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:500; color:var(--ink-soft); padding:7px 14px; border-radius:30px; border:1px solid var(--line); background:var(--bg-panel); } .fact svg{ width:15px; height:15px; color:var(--accent-2); flex:0 0 auto; } .fact .status-dot{ width:8px; height:8px; } /* medallion (gleich wie Hauptseite) */ .medallion{ position:relative; width:min(86%,400px); aspect-ratio:1; display:grid; place-items:center; margin-inline:auto; animation:float 9s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-12px) rotate(1deg); } } .medallion .halo{ position:absolute; inset:-10%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--rose-soft) 80%, transparent) 0%, transparent 64%); filter:blur(6px); z-index:0; } html[data-theme="night"] .medallion .halo{ background:radial-gradient(circle, rgba(225,150,155,.32) 0%, transparent 62%); } .medallion .ring{ position:absolute; inset:-3%; z-index:1; animation:spin 46s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } /* letter-spacing:3.1px ist nur der Rückfall ohne JavaScript (passt zum Standardtext) — malima.js berechnet den tatsächlichen Abstand zur Laufzeit passend zum Kreisumfang und überschreibt ihn immer per Inline-Stil. */ .medallion .ring text{ font-family:var(--body); font-size:8.1px; letter-spacing:3.1px; font-weight:500; text-transform:uppercase; fill:var(--accent); } html[data-theme="night"] .medallion .ring text{ fill:var(--rose-soft); } .medallion .logo{ position:relative; z-index:2; width:100%; object-fit:contain; } .medallion .logo.day{ filter:drop-shadow(0 10px 22px rgba(92,14,21,.18)); } .medallion .logo.night{ display:none; filter:drop-shadow(0 0 24px rgba(225,150,155,.45)); } html[data-theme="night"] .medallion .logo.day{ display:none; } html[data-theme="night"] .medallion .logo.night{ display:block; } @media (prefers-reduced-motion:reduce){ .medallion,.medallion .ring{ animation:none; } } @media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; text-align:center; } .badge{ margin-inline:auto; } .hero-sub{ margin-inline:auto; } .hero-cta,.facts{ justify-content:center; } .hero-art{ order:-1; } /* Größer als früher (64 %/260 px): Bei 260 px kam der Ring-Text nur noch mit rund 10,5 px auf dem Schirm an — unter der Mindestschriftgröße, die viele mobile Browser erzwingen. Die größere Grundschrift im viewBox schafft zusätzlich Luft; den Abstand rechnet assets/js/malima.js ohnehin passend zur Textlänge aus. */ .medallion{ width:min(84%,320px); } /* Rückfallwert passend zur größeren Grundschrift: greift, wenn JavaScript nicht läuft oder die Messung unplausibel war. Für den Standardtext (62 Zeichen) füllt er den Kreis nahezu lückenlos. */ .medallion .ring text{ font-size:10px; letter-spacing:0.8px; } } /* ---------- 3 PILLARS (knapp) ---------- */ .pillars{ display:grid; grid-template-columns:repeat(var(--pillar-count,3),1fr); gap:14px; } @media (max-width:900px){ .pillars{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } } @media (max-width:680px){ .pillars{ grid-template-columns:1fr; } } .pillar{ display:flex; gap:14px; align-items:center; padding:20px 22px; border-radius:var(--radius); background:var(--bg-panel); border:1px solid var(--line); box-shadow:var(--shadow-1); transition:transform .4s var(--ease); } .pillar:hover{ transform:translateY(-4px); } .pillar .ic{ width:38px; height:38px; color:var(--accent-2); flex:0 0 auto; } .pillar .ic svg{ width:100%; height:100%; } .pillar b{ font-family:var(--display); font-style:italic; font-weight:420; font-size:1.3rem; display:block; line-height:1; } /* Nur die Unterzeile, nicht „jedes span in der Kachel": im Klapp-Panel stehen ebenfalls s (Produktname, Preis, Beschreibung), die ihre eigenen .karte-*-Regeln behalten müssen. */ .pillar-copy span{ font-size:.86rem; color:var(--ink-soft); } /* ---------- Kacheln klappen die Produkte der Speisekarte auf ---------- Markup siehe template-parts/section-saeulen.php. Kacheln ohne Kategorie bleiben unverändert — sie bekommen keine dieser Klassen. */ /* Nur Kacheln mit Panel brauchen eine zweite Zeile. row-gap:0, weil das zugeklappte Panel zwar 0 hoch, aber weiterhin eine Flex-Zeile ist: mit den geerbten 14px wäre die zugeklappte Kachel höher als eine ohne Panel. Der Abstand nach oben steckt deshalb in .pillar-panel .karte-list. */ .pillar.pillar-has-panel{ flex-wrap:wrap; row-gap:0; } /* Der Knopf ersetzt die bisherige Kopfzeile 1:1: gleiche Flex-Achse, gleicher Abstand, keine eigene Fläche — die Kachel selbst bleibt der sichtbare Rahmen. */ .pillar-toggle{ flex:1 1 100%; display:flex; align-items:center; gap:14px; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; } .pillar-arrow{ margin-left:auto; flex:0 0 auto; width:18px; height:18px; color:var(--ink-soft); transition:transform .35s var(--ease); } .pillar-arrow svg{ display:block; width:100%; height:100%; } /* Der Pfeil zeigt „offen", solange die Liste offen ist — und das ist sie in jedem Zustand, in dem malima.js sie noch nicht (oder nie) zugeklappt hat: Der Server liefert aria-expanded="true", weil das ohne JavaScript die Wahrheit ist. Sobald malima.js den Knopf verdrahtet, führt zusätzlich die Klasse is-open den Zustand — sie gehört dem Skript und kann von keinem Serverwert überholt werden. Beide Regeln sagen in jedem Zustand dasselbe. (Der ursprünglich vorgeschlagene Selektor html:not(.js) wäre falsch geworden: Seit das Zuklappen nicht mehr an der Klasse „js" hängt, steht die Liste bis zum Anlauf von malima.js wirklich offen — der gedrehte Pfeil ist dann richtig, nicht falsch.) */ .pillar-toggle[aria-expanded="true"] .pillar-arrow, .pillar-toggle.is-open .pillar-arrow{ transform:rotate(180deg); } /* Hier steht bewusst KEINE Höhenbegrenzung. Der zugeklappte Zustand entsteht erst dort, wo malima.js den Knopf tatsächlich verdrahtet (Inline-max-height) — dieselbe Konvention wie beim Knopf „Karte laden" im Besuch-Abschnitt. Früher klappte die Regel html.js .pillar-panel{max-height:0} schon das Kopfskript zu; kam malima.js dann nicht durch (404, CSP, Ausnahme weiter oben), waren die Produktlisten dauerhaft verschwunden und der Knopf konnte sie nicht mehr holen. Der Preis dieser Umstellung: Die Liste kann zwischen erstem Bild und dem Anlauf des defer-Skripts kurz offen zu sehen sein. Ein sichtbarer Sprung ist verkraftbar, dauerhaft unerreichbare Inhalte nicht. */ .pillar-panel{ flex:1 1 100%; overflow:hidden; transition:max-height .45s var(--ease); } /* max-height:0 blendet nur optisch aus: der Inhalt bliebe für Screenreader lesbar und für die Seitensuche auffindbar, obwohl aria-expanded „zu" sagt — und ein später einmal hinzugefügter Link im Panel wäre eine Tastaturfalle. visibility:hidden nimmt das Panel deshalb aus dem Baum. malima.js setzt das Attribut erst nach der Zuklapp-Animation und entfernt es vor dem Aufklappen wieder als Allererstes. */ .pillar-panel[data-collapsed]{ visibility:hidden; } .pillar-panel .karte-list{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); } @media (prefers-reduced-motion:reduce){ .pillar-panel,.pillar-arrow{ transition:none; } } /* Eine aufgeklappte Kachel darf ihre Nachbarn nicht mitwachsen lassen — im Raster (align-items:stretch) wären sie sonst genauso hoch und hätten viel leere Fläche. Nur Raster mit Panel sind betroffen; Kacheln ohne Kategorie behalten die bisherige gleiche Höhe. */ .pillars:has(.pillar-panel){ align-items:start; } /* ---------- EVENTS chips ---------- */ .events-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; } .chip{ font-family:var(--body); font-weight:500; font-size:.95rem; padding:9px 17px; border-radius:30px; border:1px solid var(--line-strong); background:var(--bg-panel); } /* ---------- GALLERY slider ---------- */ .gal{ position:relative; margin-top:24px; } .gal-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 8px; scrollbar-width:none; } .gal-track::-webkit-scrollbar{ display:none; } .gtile{ position:relative; flex:0 0 min(360px,80vw); scroll-snap-align:center; height:clamp(260px,34vw,320px); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-1); display:flex; align-items:flex-end; padding:20px; isolation:isolate; } .gtile .soon{ position:absolute; top:14px; left:14px; z-index:3; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:20px; background:color-mix(in srgb,var(--cream) 86%, transparent); color:var(--oxblood-ink); } .gtile .grain{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.3)); } /* Kachel mit echtem Foto: Bild füllt die Kachel, Verlauf tritt zurück */ .gtile-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; } .gtile.has-img{ background:var(--bg-soft); color:var(--cream); } .gtile.has-img .grain{ background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); } .gtile .name{ position:relative; z-index:2; font-family:var(--display); font-style:italic; font-weight:360; font-size:1.45rem; line-height:1; } .t1{ background:linear-gradient(135deg,#5C0E15,#8a2a30 60%,#b9555a); color:var(--cream); } .t2{ background:linear-gradient(135deg,#AFBA8E,#7E8C5E 70%,#5e6b42); color:#1f2710; } .t3{ background:linear-gradient(150deg,#E1969B,#c96e76 60%,#8a2a30); color:var(--cream); } .t4{ background:linear-gradient(135deg,#380810,#5C0E15 70%,#8a2a30); color:var(--cream); } .t5{ background:linear-gradient(135deg,#D9A876,#B97A45 70%,#8a5523); color:#2c1808; } .t6{ background:linear-gradient(120deg,#2A060C,#5C0E15 60%,#6B0C0C); color:var(--cream); } .gal-arrow{ position:absolute; top:calc(50% - 24px); z-index:6; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); background:color-mix(in srgb,var(--bg) 84%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--accent); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-1); transition:.3s; } html[data-theme="night"] .gal-arrow{ color:var(--accent-2); } .gal-arrow:hover{ background:var(--accent); color:var(--cream); transform:scale(1.07); } .gal-arrow:disabled{ opacity:.3; cursor:default; } .gal-prev{ left:-8px; } .gal-next{ right:-8px; } .gal-arrow svg{ width:19px; height:19px; } .gal-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; } .gal-dot{ width:8px; height:8px; border:none; border-radius:50%; background:var(--line-strong); cursor:pointer; padding:0; transition:.3s; } .gal-dot.active{ background:var(--accent); transform:scale(1.4); } @media (max-width:540px){ .gal-prev{ left:2px; } .gal-next{ right:2px; } } /* ---------- BESUCH (kompakt) ---------- */ .visit{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px; } @media (max-width:760px){ .visit{ grid-template-columns:1fr; } } .card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-1); } .card h3{ font-family:var(--display); font-style:italic; font-weight:400; font-size:1.5rem; margin:0 0 16px; } .hours{ width:100%; border-collapse:collapse; } .hours td{ padding:8px 0; border-bottom:1px solid var(--line); font-size:.95rem; } .hours td:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft); } .hours tr.today td{ color:var(--accent); font-weight:600; } .hours tr.today td:last-child{ color:var(--accent); } .hours tr.off td:last-child{ font-style:italic; } .visit-status{ display:inline-flex; align-items:center; gap:9px; margin-top:14px; font-weight:600; } .cl{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; } .cl svg{ width:18px; height:18px; color:var(--accent-2); flex:0 0 auto; margin-top:3px; } .cl .l{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:block; } .cl .v{ font-weight:500; } .card .acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } /* ---------- FOOTER ---------- */ .footer{ background:linear-gradient(180deg,#3a0a12,#1a0408 80%); color:var(--cream); padding:clamp(40px,5vw,60px) 0 28px; position:relative; z-index:2; } .footer .wrap{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end; } .footer b{ font-family:var(--display); font-style:italic; font-weight:400; font-size:2.4rem; display:block; } /* Schrift/Größe überschreibbar: Malima ▸ Footer & Rechtliches ▸ Handschrift-Zeile */ .footer .ft-tag{ font-family:var(--ft-tag-font, var(--script)); font-size:var(--ft-tag-size, 1.3rem); color:var(--rose-soft); line-height:1.3; display:block; } .footer .ft-links{ display:flex; gap:18px; flex-wrap:wrap; font-size:.92rem; } .footer .ft-links a{ opacity:.85; } .footer .ft-links a:hover{ opacity:1; color:var(--rose-soft); } .footer .imp{ width:100%; margin-top:30px; padding-top:18px; border-top:1px solid rgba(244,233,210,.18); font-size:.78rem; opacity:.6; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; } .soc{ display:flex; gap:12px; } .soc a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(244,233,210,.25); display:grid; place-items:center; transition:.3s; } .soc a:hover{ background:var(--rose-soft); color:var(--oxblood-ink); } .soc svg{ width:18px; height:18px; } /* reveal Bewusst die eigenständige Eigenschaft `translate` statt `transform`: Die Einblendung endet auf `.rv.in{…}` und stünde als `transform:none` in Konkurrenz zu jedem Hover-Transform auf demselben Element. Genau das war der Fall — `.pillar:hover{transform:translateY(-4px)}` und der Speisekarten-Button (`btn btn-primary rv`) hatten dieselbe Spezifität (0,2,0) und verloren gegen das später in der Datei stehende `.rv.in`, ihr Hover war wirkungslos. Mit `translate` liegen Einblendung und Hover auf verschiedenen Eigenschaften und können sich nicht mehr gegenseitig aufheben (der Browser wendet erst `translate`, dann `transform` an). Unterstützung (MDN-Kompatibilitätsdaten, Stand Juli 2026): Chrome 104, Firefox 72, Safari 14.1 — deutlich früher als das im Theme bereits benutzte `:has()` (Chrome 105, Firefox 121, Safari 15.4) und `color-mix()` (Chrome 111, Firefox 113, Safari 16.2). Ein Rückfall ist damit unnötig: Jeder Browser, der das Theme überhaupt wie vorgesehen darstellt, kennt `translate`. `transform` und `box-shadow` stehen trotzdem in der Übergangsliste: `transition` ist eine Kurzschreibweise, und `.rv` steht später in der Datei als `.btn` (0,1,0) und `.pillar` (0,1,0) — es überschreibt deren Übergänge also vollständig. Ohne diese Einträge spränge der eben erst wieder wirksame Hover hart: der Versatz beim Speisekarten-Button und den Kacheln (`transform`) und der wachsende Schatten des Buttons (`box-shadow`, siehe .btn-primary:hover). Die 0,35 s liegen zwischen den 0,3 s der Buttons und den 0,4 s der Kacheln. */ .rv{ opacity:0; translate:0 22px; transition:opacity .8s var(--ease), translate .8s var(--ease), transform .35s var(--ease), box-shadow .3s var(--ease); } .rv.in{ opacity:1; translate:0 0; } @media (prefers-reduced-motion:reduce){ .rv{ opacity:1; translate:none; } } /* ========================================================================= Bausteine, die aus den Backend-Einstellungen entstehen ========================================================================= */ /* Barrierefreiheit: „Zum Inhalt springen" */ .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link:focus{ position:fixed !important; top:10px; left:10px; z-index:200; width:auto; height:auto; clip:auto; margin:0; padding:12px 20px; border-radius:24px; background:var(--accent); color:var(--cream); font-weight:600; box-shadow:var(--shadow-2); } /* Speisekarten-Abschnitt */ .karte-row{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; } .karte-text{ color:var(--ink-soft); margin:.5em 0 0; max-width:40ch; } /* Produkte aus „Speisekarte ▸ Produkte" (nur bei gesetztem Haken sichtbar). Preisspalte wie .hours td:last-child — rechtsbündig und mit gleich breiten Ziffern, damit die Beträge untereinander stehen. */ .karte-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:clamp(24px,3vw,36px); } .karte-group h3{ margin-bottom:10px; } .karte-list{ list-style:none; margin:0; padding:0; } .karte-item{ display:grid; grid-template-columns:1fr auto; column-gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.95rem; } .karte-item:last-child{ border-bottom:0; padding-bottom:0; } .karte-item-name{ grid-column:1; font-weight:500; } .karte-item-price{ grid-column:2; grid-row:1; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft); } .karte-item-desc{ grid-column:1; color:var(--ink-soft); font-size:.85rem; margin-top:2px; } /* Events */ .events-row{ margin-top:18px; } .events-note{ color:var(--ink-soft); margin-top:16px; font-size:.95rem; } .events-cta{ margin-top:20px; } /* Verlinkte Pillen bekommen einen dezenten Hover — die Schlagworte im Events-Abschnitt (a.chip) und die Fakten-Chips im Startbereich (a.fact, Statuschip und die Chips aus hero_facts). Beide sahen schon immer gleich aus; die Deklarationen standen nur dreimal wortgleich da. Nicht verlinkte Chips (weiterhin ) bleiben unberührt. */ a.chip, a.fact{ transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } a.chip:hover, a.fact:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } html[data-theme="night"] a.chip:hover, html[data-theme="night"] a.fact:hover{ color:var(--accent-2); border-color:var(--accent-2); } /* Öffnungszeiten */ .hours-note{ margin:12px 0 0; font-size:.85rem; color:var(--ink-soft); font-style:italic; } /* ---------- Karte & Anfahrt (Markup: template-parts/section-besuch.php) ---------- Fläche, Rundung, Rahmen und Schatten wie bei .card und .gtile — die Karte soll wie eine dritte Fläche desselben Bausatzes wirken. Alle Farben kommen aus den vorhandenen Variablen, damit Tag/Nacht und die Backend-Farben weiterhin greifen. scroll-margin-top: Der Anker #anfahrt sitzt auf einem
, die Regel section[id]{scroll-margin-top:78px} weiter oben greift dort also nicht — ohne diesen Wert landete der Sprung unter der fest stehenden Navigation. */ .visit-map{ margin-top:18px; scroll-margin-top:78px; } .map-frame{ position:relative; height:clamp(280px,36vw,420px); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-panel); box-shadow:var(--shadow-1); } /* Das