@import url('https://fonts.googleapis.com/css2?family=Rye&family=Cinzel:wght@500;600&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap'); :root{ --copper:#c1743f; --copper-light:#d59b6e; --copper-mid:#dba572; --copper-dim:#8a7c68; --copper-dim2:#7d715f; --copper-warm:#a8916f; --bg:#0b0908; --text:#e9dfc9; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} /* ---------- Sanftes Einblenden beim Scrollen ("reveal on scroll") ---------- Standard: alle .reveal-Elemente sind ganz normal sofort sichtbar (falls JS/IntersectionObserver fehlt, geht so nie Inhalt "verloren"). Erst wenn main.js tatsächlich läuft, setzt es die Klasse "js-anim" auf -- nur dann greifen die folgenden Regeln und blenden Elemente sanft ein, sobald sie beim Scrollen ins Bild kommen (Klasse "in-view" wird per IntersectionObserver gesetzt). */ .reveal{opacity:1;transform:none;} html.js-anim .reveal{ opacity:0;transform:translateY(22px); transition:opacity .7s ease-out,transform .7s ease-out; } html.js-anim .reveal.in-view{opacity:1;transform:none;} @media (prefers-reduced-motion: reduce){ html.js-anim .reveal{opacity:1;transform:none;transition:none;} } body{ background:var(--bg); color:var(--text); font-family:'EB Garamond',Georgia,serif; font-size:18px; line-height:1.6; } a{color:var(--copper-light);} a:hover{color:var(--copper);} img{max-width:100%;display:block;} .wrap{max-width:1180px;margin:0 auto;padding:0 24px;} /* ---------- header / nav ---------- */ .site-header{ position:relative; padding:28px 0 18px; text-align:center; border-bottom:1px solid rgba(197,134,90,0.25); } .site-header .logo-link{display:inline-block;} .site-header img.logo{width:220px;height:auto;margin:0 auto;} .site-header .tagline{ font-family:'Cinzel',serif;letter-spacing:3.2px;font-size:12px; color:var(--copper-light);text-transform:uppercase;margin-top:4px; } nav.main-nav{ display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px; margin-top:18px;font-family:'Cinzel',serif;letter-spacing:1.6px; font-size:13px;text-transform:uppercase; } /* ---------- language switch (top right) ---------- */ .lang-switch{ position:absolute;top:28px;right:24px;font-family:'Cinzel',serif; letter-spacing:1px;font-size:12px;color:var(--copper-dim); display:flex;align-items:center;gap:5px; } .lang-switch a{color:var(--copper-dim);text-decoration:none;} .lang-switch a:hover, .lang-switch a.active{color:var(--copper-light);} .lang-switch span{opacity:.5;} nav.main-nav a{ color:var(--text);text-decoration:none;padding:8px 14px;border-radius:2px; border:1px solid transparent;transition:border-color .15s,color .15s,background .15s; } nav.main-nav a:hover, nav.main-nav a.active{ color:var(--copper-light);border-color:rgba(197,134,90,0.4);background:rgba(197,134,90,0.07); } /* ---------- mobile burger menu ---------- */ .header-top{display:inline-block;} .nav-toggle-input{display:none;} .nav-toggle-label{display:none;} @media (max-width:820px){ .site-header img.logo{width:150px;} .header-top{display:block;} /* Burger-Icon sitzt bei top:30px;right:6px -- Sprachumschalter etwas höher/weiter links platzieren, damit sich beide nicht überlappen. */ .lang-switch{top:6px;right:6px;font-size:11px;} /* Checkbox and label share the exact same fixed anchor (relative to .site-header, which is position:relative) so their boxes overlap precisely — a percentage-based "50%" would shift once the menu opens and .site-header grows taller, so a fixed px offset is used instead to keep the icon anchored to the logo row. */ .nav-toggle-input, .nav-toggle-label{position:absolute;top:30px;right:6px;} .nav-toggle-input{ display:block;width:38px;height:30px;margin:0;opacity:0;cursor:pointer;z-index:2; } .nav-toggle-label{ display:flex;flex-direction:column;justify-content:space-between; width:26px;height:18px;pointer-events:none;z-index:1; } .nav-toggle-label span{ display:block;height:2px;width:100%;background:var(--copper-light); border-radius:2px;transition:transform .2s ease,opacity .2s ease; } .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(1){transform:translateY(8px) rotate(45deg);} .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(2){opacity:0;} .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} nav.main-nav{ display:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch; gap:2px;margin-top:14px;text-align:center; } .nav-toggle-input:checked ~ nav.main-nav{display:flex;} nav.main-nav a{padding:12px 14px;border-bottom:1px solid rgba(197,134,90,0.12);border-radius:0;} nav.main-nav a:hover, nav.main-nav a.active{border-color:rgba(197,134,90,0.12);background:rgba(197,134,90,0.06);} } /* ---------- hero ---------- */ .hero{ position:relative;padding:70px 0 60px;text-align:center;overflow:hidden; } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 0%, rgba(197,134,90,0.09), transparent 55%); } .hero h1{ font-family:'Rye',serif;font-weight:400;color:var(--copper); font-size:56px;margin:0 0 14px;letter-spacing:1px;position:relative;z-index:1; } .hero p.sub{ font-family:'Cinzel',serif;letter-spacing:2.4px;text-transform:uppercase; color:var(--copper-mid);font-size:14px;margin:0 0 28px;position:relative;z-index:1; } .hero .intro{ max-width:680px;margin:0 auto 30px;font-size:19px;color:var(--text);opacity:.92; position:relative;z-index:1; } .hero-image-wrap{ position:relative;width:100%;max-height:440px;overflow:hidden;border-radius:3px; box-shadow:0 20px 60px rgba(0,0,0,.5);margin-top:10px; } .hero-image-wrap::after{ /* Sanfter Verlauf am unteren Rand des Hero-Bilds, damit es optisch in den dunklen Seitenhintergrund "ausläuft" statt hart abzuschneiden. */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, transparent 70%, rgba(11,9,8,.55) 100%); } .hero-image{ width:100%;max-height:440px;object-fit:cover;display:block; margin:0;border-radius:3px; } /* Sanftes, sehr langsames Heranzoomen des Hero-Bilds (Ken-Burns-Effekt) -- rein dekorativ und respektiert "reduzierte Bewegung"-Einstellungen. */ @keyframes heroKenBurns{ from{transform:scale(1);} to{transform:scale(1.08);} } @media (prefers-reduced-motion: no-preference){ .hero-image{animation:heroKenBurns 22s ease-in-out infinite alternate;} } /* Beim ersten Laden der Seite blenden Überschrift, Untertitel, Text und Buttons im Hero-Bereich sanft nacheinander ein (kein Warten auf Scrollen nötig, da direkt im sichtbaren Bereich) -- reduzierte Bewegung lässt alles wie gehabt sofort sichtbar. */ @media (prefers-reduced-motion: no-preference){ @keyframes heroFadeUp{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} } .hero h1,.hero p.sub,.hero .intro,.hero .hero-image-wrap,.hero .btn-row{ opacity:0;animation:heroFadeUp .8s ease-out forwards; } .hero h1{animation-delay:.05s;} .hero p.sub{animation-delay:.18s;} .hero .intro{animation-delay:.3s;} .hero .btn-row{animation-delay:.42s;} .hero .hero-image-wrap{animation-delay:.5s;} } .btn{ display:inline-block;font-family:'Cinzel',serif;letter-spacing:1.8px;text-transform:uppercase; font-size:13px;padding:12px 28px;border:1px solid var(--copper);color:var(--copper-light); text-decoration:none;border-radius:2px; transition:background .15s,color .15s,transform .18s ease,box-shadow .18s ease; } .btn:hover{background:var(--copper);color:#0b0908;transform:translateY(-2px);box-shadow:0 8px 20px rgba(193,116,63,.35);} .btn:active{transform:translateY(0);box-shadow:none;} .btn.solid{background:var(--copper);color:#0b0908;} .btn.solid:hover{background:var(--copper-light);} .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px;position:relative;z-index:1;} /* ---------- sections ---------- */ section.block{padding:50px 0;} section.block + section.block{border-top:1px solid rgba(197,134,90,0.15);} h2.section-title{ font-family:'Rye',serif;font-weight:400;color:var(--copper); font-size:34px;text-align:center;margin:0 0 8px; } p.section-sub{ text-align:center;font-family:'Cinzel',serif;letter-spacing:2px;text-transform:uppercase; font-size:12px;color:var(--copper-dim);margin:0 0 34px; } /* ---------- opening hours widget ---------- */ .hours-table{width:100%;max-width:420px;margin:0 auto;border-collapse:collapse;font-size:16px;} .hours-table td{padding:6px 4px;border-bottom:1px dotted rgba(197,134,90,0.25);} .hours-table td:last-child{text-align:right;color:var(--copper-mid);font-weight:600;white-space:nowrap;} .hours-table tr.today td{color:var(--copper-light);} .hours-note{text-align:center;font-size:13px;color:var(--copper-dim);font-style:italic;margin-top:10px;} /* ---------- live status badge (geöffnet / schließt bald / geschlossen) ---------- */ .status-badge{ display:inline-flex;align-items:center;gap:8px; font-family:'Cinzel',serif;letter-spacing:1px;text-transform:uppercase;font-size:12px; padding:7px 16px;border-radius:20px;border:1px solid;margin-bottom:18px; } .status-badge.centered{display:table;margin:0 auto 22px;} .status-badge .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;} .status-badge .detail{text-transform:none;letter-spacing:.2px;font-family:'EB Garamond',Georgia,serif;font-size:13px;opacity:.85;} .status-badge.open{background:rgba(120,180,120,.1);border-color:rgba(120,180,120,.5);color:#a9d9a9;} .status-badge.open .dot{background:#6fbf6f;box-shadow:0 0 6px #6fbf6f;} @media (prefers-reduced-motion: no-preference){ @keyframes statusDotPulse{ 0%,100%{box-shadow:0 0 6px #6fbf6f;} 50%{box-shadow:0 0 12px 2px #6fbf6f;} } .status-badge.open .dot{animation:statusDotPulse 2.4s ease-in-out infinite;} } .status-badge.soon{background:rgba(210,175,90,.12);border-color:rgba(210,175,90,.55);color:#e6c877;} .status-badge.soon .dot{background:#dcb84a;box-shadow:0 0 6px #dcb84a;} .status-badge.closed{background:rgba(200,90,90,.1);border-color:rgba(200,90,90,.5);color:#e6a3a3;} .status-badge.closed .dot{background:#c85a5a;box-shadow:0 0 6px #c85a5a;} /* ---------- Tisch-Hinweis (via QR-Code auf der Tischkarte, ?tisch=) ---------- */ .table-hint{ text-align:center;font-family:'Cinzel',serif;letter-spacing:1px;font-size:13px; color:var(--copper-light);background:rgba(197,134,90,0.1);border:1px solid rgba(197,134,90,0.3); border-radius:20px;display:table;margin:-16px auto 30px;padding:6px 18px; } /* ---------- menu page ---------- */ .menu-toggle{display:flex;justify-content:center;gap:10px;margin:0 0 40px;} .menu-toggle a{ font-family:'Cinzel',serif;letter-spacing:2px;text-transform:uppercase;font-size:14px; padding:10px 26px;border:1px solid var(--copper);color:var(--copper-light);text-decoration:none;border-radius:2px; } .menu-toggle a.active{background:var(--copper);color:#0b0908;} .menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;align-items:start;} .menu-cat{margin-bottom:8px;} .menu-cat h3{font-family:'Rye',serif;font-weight:400;font-size:23px;color:var(--copper);margin:0 0 2px;} .menu-cat .cat-sub{ font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--copper-dim);margin:0 0 10px; } .menu-row{ display:flex;align-items:baseline;gap:6px;font-size:17px;line-height:1.5;margin-bottom:2px; border-radius:3px;transition:background .15s; } .menu-row:hover{background:rgba(197,134,90,0.06);} .menu-row .name{white-space:nowrap;} .menu-row .fill{flex:1;border-bottom:1px dotted rgba(197,134,90,0.4);transform:translateY(-6px);margin:0 2px;min-width:8px;} .menu-row .price{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--copper-mid);font-weight:600;} .menu-desc{font-size:13px;color:var(--copper-dim);font-style:italic;margin:0 0 8px;line-height:1.4;} .menu-tag{font-family:'Cinzel',serif;font-size:10px;color:var(--copper);opacity:.9;margin-left:3px;vertical-align:super;} .menu-variants{font-size:14px;color:var(--copper-dim2);margin:0 0 8px 2px;} .menu-variants span{margin-right:14px;white-space:nowrap;} .menu-legend{ margin-top:44px;font-size:12px;line-height:1.7;color:var(--copper-dim);text-align:center;font-style:italic; border-top:1px solid rgba(197,134,90,.15);padding-top:20px; } .menu-legend b{font-style:normal;color:var(--copper-warm);font-weight:600;} /* ---------- gallery ---------- */ .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;} .gallery-grid figure{ margin:0;position:relative;overflow:hidden;border-radius:2px;cursor:pointer; box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .3s; } .gallery-grid img{width:100%;height:220px;object-fit:cover;transition:transform .4s;} .gallery-grid figure:hover{box-shadow:0 14px 34px rgba(0,0,0,.45);} .gallery-grid figure:hover img{transform:scale(1.06);} .gallery-grid figcaption{ position:absolute;left:0;right:0;bottom:0;padding:8px 10px; background:linear-gradient(transparent,rgba(0,0,0,.75)); font-size:13px;color:var(--text); } .gallery-grid figure:focus-visible{outline:2px solid var(--copper-light);outline-offset:3px;} /* ---------- Galerie-Lightbox ---------- */ .lightbox{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:24px;} .lightbox[hidden]{display:none;} .lightbox-backdrop{position:absolute;inset:0;background:rgba(5,4,3,.9);} .lightbox-figure{position:relative;z-index:1;margin:0;max-width:min(92vw,1100px);max-height:88vh;text-align:center;} .lightbox-figure img{max-width:100%;max-height:80vh;width:auto;margin:0 auto;border-radius:3px;box-shadow:0 24px 70px rgba(0,0,0,.6);} .lightbox-figure figcaption{margin-top:12px;color:var(--copper-mid);font-size:14px;font-style:italic;} .lightbox-close, .lightbox-nav{ position:absolute;z-index:2;background:rgba(20,16,13,.7);border:1px solid rgba(197,134,90,0.4); color:var(--text);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center; transition:background .15s,color .15s; } .lightbox-close{top:18px;right:18px;width:42px;height:42px;font-size:26px;line-height:1;} .lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:18px;} .lightbox-prev{left:12px;} .lightbox-next{right:12px;} .lightbox-close:hover, .lightbox-nav:hover{background:var(--copper);color:#0b0908;} @media (max-width:620px){ .lightbox-nav{width:38px;height:38px;} .lightbox-close{width:36px;height:36px;top:10px;right:10px;} } /* ---------- Empfehlung des Tages ---------- */ .tip-of-day{ max-width:640px;margin:0 auto;text-align:center;padding:30px 34px; background:rgba(197,134,90,0.06);border:1px solid rgba(197,134,90,0.3);border-radius:6px; position:relative; } .tip-of-day-badge{ display:inline-block;font-family:'Cinzel',serif;letter-spacing:1.5px;text-transform:uppercase; font-size:12px;color:#0b0908;background:var(--copper);padding:5px 16px;border-radius:20px; margin-bottom:14px; } .tip-of-day h3{font-family:'Rye',serif;font-weight:400;color:var(--copper-light);font-size:28px;margin:0 0 10px;} .tip-of-day p{margin:0 0 8px;color:var(--text);opacity:.9;} .tip-of-day-price{font-family:'Cinzel',serif;letter-spacing:1px;color:var(--copper-mid);font-size:18px;margin-top:10px;} /* ---------- WhatsApp-Button ---------- */ .whatsapp-fab{ position:fixed;right:20px;bottom:20px;z-index:500; width:56px;height:56px;border-radius:50%; background:var(--copper);color:#0b0908; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.45); transition:transform .15s,box-shadow .15s,background .15s; } .whatsapp-fab svg{width:29px;height:29px;} .whatsapp-fab:hover{background:var(--copper-light);transform:translateY(-2px) scale(1.05);box-shadow:0 12px 28px rgba(0,0,0,.5);} .whatsapp-fab:focus-visible{outline:2px solid var(--copper-light);outline-offset:3px;} @media (max-width:620px){ .whatsapp-fab{right:14px;bottom:14px;width:50px;height:50px;} .whatsapp-fab svg{width:26px;height:26px;} } /* ---------- forms ---------- */ form.card{ max-width:560px;margin:0 auto;background:rgba(197,134,90,0.05); border:1px solid rgba(197,134,90,0.25);border-radius:4px;padding:30px 32px; } .field{margin-bottom:18px;} .field label{ display:block;font-family:'Cinzel',serif;letter-spacing:1px;text-transform:uppercase; font-size:12px;color:var(--copper-dim);margin-bottom:6px; } .field input, .field select, .field textarea{ width:100%;background:#161210;border:1px solid rgba(197,134,90,0.35);color:var(--text); font-family:'EB Garamond',Georgia,serif;font-size:16px;padding:10px 12px;border-radius:2px; } .field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--copper);} /* Ohne diese Regel fällt der Platzhaltertext auf die Browser-Vorgabe zurück, die auf diesem dunklen Hintergrund kaum blasser wirkt als echter, eingegebener Text — ein leeres Feld mit Beispieltext (z. B. "smtp.ionos.de") sieht dann aus wie ausgefüllt. Deutlich abgedunkelt und kursiv, damit "nur Platzhalter" und "wirklich gespeicherter Wert" auf den ersten Blick unterscheidbar sind. */ .field input::placeholder, .field textarea::placeholder{color:var(--text);opacity:.4;font-style:italic;} .field-row{display:flex;gap:16px;} .field-row .field{flex:1;} .form-msg{max-width:560px;margin:0 auto 20px;padding:14px 18px;border-radius:3px;font-size:15px;} .form-msg.ok{background:rgba(120,180,120,.12);border:1px solid rgba(120,180,120,.4);color:#bfe6bf;} .form-msg.err{background:rgba(200,90,90,.12);border:1px solid rgba(200,90,90,.4);color:#f0bcbc;} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;} .contact-grid iframe{width:100%;height:340px;border:0;border-radius:3px;filter:grayscale(.3) invert(.92) contrast(.85);} .contact-info p{margin:0 0 10px;} .contact-info .label{color:var(--copper-dim);font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:3px;} /* ---------- footer ---------- */ footer.site-footer{ border-top:1px solid rgba(197,134,90,0.2);padding:34px 0;text-align:center; font-family:'Cinzel',serif;letter-spacing:.6px;font-size:12px;color:var(--copper-dim2); } footer.site-footer a{color:var(--copper-dim2);} footer.site-footer .social{margin-top:10px;} footer.site-footer .social a{margin:0 8px;} footer.site-footer .legal-links{margin-top:14px;font-size:11px;opacity:.75;} .link-btn{ background:none;border:0;padding:0;margin:0;cursor:pointer; font:inherit;color:var(--copper-dim2);text-decoration:underline;text-underline-offset:2px; } .link-btn:hover{color:var(--copper-light);} /* ---------- Cookie-Banner (Layer 1) ---------- */ .cookie-banner{ position:fixed;left:0;right:0;bottom:0;z-index:9999; background:#14100d;border-top:1px solid rgba(197,134,90,0.35); box-shadow:0 -12px 32px rgba(0,0,0,.5); } .cookie-banner-inner{ max-width:1100px;margin:0 auto;padding:22px 24px; /* Zusätzlicher Abstand nach unten auf Geräten mit Home-Indicator/abgerundeten Ecken (iPhone), damit die Buttons nicht darunter gequetscht wirken. env() greift nur mit viewport-fit=cover (siehe includes/header.php) und fällt sonst auf 0px zurück -- daher zusätzlich der feste Mindestwert. */ padding-bottom:max(22px, env(safe-area-inset-bottom, 0px)); display:flex;align-items:center;gap:28px;flex-wrap:wrap; } .cookie-banner-inner p{ flex:1 1 420px;margin:0;font-family:'EB Garamond',Georgia,serif;font-size:15.5px; line-height:1.55;color:var(--text); } .cookie-banner-inner a{color:var(--copper-light);} .cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto;margin-left:auto;} /* Beide Haupt-Entscheidungen (annehmen/ablehnen) sind bewusst GLEICH groß und gleich gestaltet (nur Rahmen vs. Füllung) — keine der beiden Optionen wird durch Farbe/Größe/Kontrast bevorzugt (Dark-Pattern-Vermeidung). */ .cookie-btn{ font-family:'Cinzel',serif;letter-spacing:1px;text-transform:uppercase;font-size:12.5px; padding:11px 22px;border-radius:2px;cursor:pointer;white-space:nowrap; border:1px solid var(--copper);transition:background .15s,color .15s; } .cookie-btn.outline{background:none;color:var(--copper-light);} .cookie-btn.outline:hover{background:rgba(197,134,90,0.12);} .cookie-btn.solid{background:var(--copper);color:#0b0908;} .cookie-btn.solid:hover{background:var(--copper-light);} .cookie-btn.text{background:none;border-color:transparent;color:var(--copper-dim);text-decoration:underline;text-underline-offset:2px;padding:11px 8px;} .cookie-btn.text:hover{color:var(--copper-light);} /* ---------- Cookie-Einstellungen (Layer 2, Modal) ---------- */ .cookie-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;padding-bottom:max(20px, env(safe-area-inset-bottom, 0px));} .cookie-modal[hidden]{display:none;} .cookie-modal-backdrop{position:absolute;inset:0;background:rgba(5,4,3,.72);} .cookie-modal-box{ position:relative;z-index:1;width:100%;max-width:560px;max-height:86vh;overflow-y:auto; background:#14100d;border:1px solid rgba(197,134,90,0.35);border-radius:6px; padding:30px 34px;box-shadow:0 24px 60px rgba(0,0,0,.6); } .cookie-modal-box h3{font-family:'Rye',serif;font-weight:400;color:var(--copper);font-size:24px;margin:0 0 12px;} .cookie-modal-intro{font-size:14.5px;line-height:1.6;color:var(--copper-dim);margin:0 0 22px;} .cookie-category{border-top:1px solid rgba(197,134,90,0.18);padding:16px 0;} .cookie-category:last-of-type{border-bottom:1px solid rgba(197,134,90,0.18);} .cookie-category-head{display:flex;align-items:center;gap:14px;} .cookie-category-title{font-family:'Cinzel',serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--text);} .cookie-category-desc{margin:8px 0 0 60px;font-size:14px;line-height:1.55;color:var(--copper-dim);} .cookie-toggle{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto;} .cookie-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;} .cookie-toggle-track{ position:absolute;inset:0;background:rgba(197,134,90,0.2);border:1px solid rgba(197,134,90,0.4); border-radius:20px;transition:background .15s; } .cookie-toggle-track::before{ content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%; background:var(--copper-dim);transition:transform .15s,background .15s; } .cookie-toggle input:checked + .cookie-toggle-track{background:rgba(197,134,90,0.4);} .cookie-toggle input:checked + .cookie-toggle-track::before{transform:translateX(20px);background:var(--copper);} .cookie-toggle.disabled{opacity:.65;} .cookie-toggle.disabled input{cursor:not-allowed;} .cookie-modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;justify-content:flex-end;} @media (max-width:620px){ .cookie-banner-inner{flex-direction:column;align-items:stretch;} .cookie-banner-actions{margin-left:0;justify-content:stretch;} .cookie-banner-actions .cookie-btn{flex:1 1 0;text-align:center;} .cookie-modal-actions{justify-content:stretch;} .cookie-modal-actions .cookie-btn{flex:1 1 0;text-align:center;} .cookie-category-desc{margin-left:0;} } /* ---------- misc ---------- */ .text-block{max-width:760px;margin:0 auto;font-size:18px;} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;} .two-col img{ border-radius:3px;box-shadow:0 16px 40px rgba(0,0,0,.4); transition:transform .3s ease,box-shadow .3s ease; } .two-col img:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.5);} @media (max-width:820px){ .contact-grid,.two-col{grid-template-columns:1fr;} .hero h1{font-size:38px;} h2.section-title{font-size:27px;} .field-row{flex-direction:column;gap:0;} }