/* ============================================================ Vino e Gusto — Stylesheet der Startseite Ausgelagert aus index.html: 27 KB, die sonst bei JEDEM Aufruf neu geladen würden. Als Datei ist es cachebar und beim zweiten Besuch (und auf Unterseiten) sofort da. ============================================================ */ /* ============================================================ Vino e Gusto — Majolika Farben aus dem handgemalten Kachelbild entnommen. ============================================================ */ html{scroll-behavior:smooth} body{ margin:0;color:var(--ink);background:var(--ceramic); font-family:var(--body);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } a{color:inherit} .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--edge)} .sec{padding-block:clamp(4.5rem,10vw,8.5rem)} /* ---------- Typografie ---------- */ .eyebrow{ font-family:var(--body);font-weight:500;font-size:.7rem; letter-spacing:.32em;text-transform:uppercase;color:var(--blu-mid);margin:0 0 1rem; } .title{ font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,6vw,4.2rem); line-height:1.04;color:var(--blu);margin:0;letter-spacing:-.015em; } .title em{font-style:italic;font-weight:500} .lede{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--ink-2);max-width:56ch;margin:1.4rem 0 0} .center{text-align:center} .center .lede{margin-inline:auto} /* ---------- Kachel-Fries ---------- */ .frieze{ height:clamp(96px,13vw,168px); background:url("az_wide.webp") repeat-x center/auto 100%; border-block:3px solid var(--blu);position:relative; } .frieze::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 42%,rgba(18,38,106,.12)); pointer-events:none; } /* ---------- Kopfzeile ---------- */ .topbar{ position:sticky;top:0;z-index:80; background:rgba(247,241,228,.9);backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--grout); } .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem} .mark{display:flex;align-items:center;gap:.7rem;text-decoration:none} .mark img{width:42px;height:42px;border-radius:3px;box-shadow:0 2px 8px rgba(18,38,106,.22)} .mark span{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.3rem;color:var(--blu)} .menu{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0} .menu a{ font-size:.76rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase; text-decoration:none;color:var(--ink-2);position:relative;padding-block:.3rem; } .menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--lemon);transition:right .3s ease} .menu a:hover::after,.menu a:focus-visible::after{right:0} .menu a:hover,.menu a:focus-visible{color:var(--blu)} .burger{display:none;background:none;border:1px solid var(--blu);color:var(--blu); min-width:44px;min-height:44px;border-radius:3px;cursor:pointer;font-size:1.1rem;line-height:1} /* ---------- Hero ---------- */ .hero{ position:relative;overflow:hidden;padding-block:clamp(3.5rem,9vw,7rem) 0; isolation:isolate;background:#0a536b; } .hero-coast{ position:absolute;z-index:0;inset:-7% 0 -12%;pointer-events:none; background:url('hero-amalfi-coast.webp') center/cover no-repeat; transform:translate3d(0,var(--coast-y,0),0) scale(1.075); transform-origin:50% 60%;will-change:transform; } .hero::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(circle at 50% 24%,rgba(191,239,231,.08),transparent 28%),linear-gradient(180deg,rgba(1,30,43,.08),rgba(1,32,43,.28) 56%,rgba(2,52,65,.66)); } .hero-in{position:relative;z-index:3;display:grid;justify-items:center;text-align:center} .plaque-motion{ display:block;line-height:0; animation:logo-float 7s ease-in-out infinite; will-change:transform; } .plaque{ display:block;width:min(74vw,330px);border-radius:4px; box-shadow:0 2px 0 rgba(255,255,255,.85),0 0 60px rgba(234,179,8,.3),0 24px 55px rgba(18,38,106,.3),0 6px 16px rgba(18,38,106,.14); animation:set 1.05s cubic-bezier(.2,.75,.25,1) both; } .hero h1{ font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,9vw,6rem); line-height:.98;color:#fff;margin:1.7rem 0 0;letter-spacing:-.02em;text-shadow:0 3px 24px rgba(0,25,39,.55); animation:set 1.05s .12s cubic-bezier(.2,.75,.25,1) both; } .hero h1 em{display:block;font-style:italic;font-weight:500;color:var(--lemon)} .pills{ display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;list-style:none; margin:1.5rem 0 0;padding:0;animation:set 1.05s .24s cubic-bezier(.2,.75,.25,1) both; } .pills li{ font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--blu);background:rgba(255,255,255,.75); border:1px solid var(--grout);border-radius:999px;padding:.42rem 1rem; } .hero .lede{ font-size:clamp(1.05rem,2.2vw,1.28rem);margin-top:1.5rem;max-width:38ch; animation:set 1.05s .34s cubic-bezier(.2,.75,.25,1) both;color:#fff;text-shadow:0 2px 18px rgba(0,25,39,.7); } .actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem; animation:set 1.05s .44s cubic-bezier(.2,.75,.25,1) both;padding-bottom:clamp(3rem,7vw,5rem)} @keyframes set{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes logo-float{ 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} } .btn{ font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;padding:1rem 1.9rem;border-radius:2px; border:1.5px solid var(--blu);color:var(--blu);background:transparent; transition:background .25s,color .25s,transform .25s,box-shadow .25s;display:inline-block; } .btn:hover,.btn:focus-visible{background:var(--blu);color:var(--ceramic);transform:translateY(-2px);box-shadow:0 12px 26px rgba(18,38,106,.26)} .btn--fill{background:var(--blu);color:var(--ceramic);box-shadow:0 8px 20px rgba(18,38,106,.24)} .btn--fill:hover,.btn--fill:focus-visible{background:#0c1c50;border-color:#0c1c50} .hero .btn{border-color:rgba(255,255,255,.88);color:#fff;background:rgba(0,27,43,.28);box-shadow:0 8px 24px rgba(0,18,29,.18)} .hero .btn:hover,.hero .btn:focus-visible{background:#fff;border-color:#fff;color:var(--blu)} .hero .btn--fill{background:var(--kunde-gelb);border-color:var(--kunde-gelb);color:var(--blu)} .hero .btn--fill:hover,.hero .btn--fill:focus-visible{background:#fff;border-color:#fff;color:var(--blu)} /* ---------- Handwerk ---------- */ .craft{background:var(--ceramic-2)} /* Bezugspunkt fuer das absolut gesetzte Bild. */ .craft .wrap{position:relative} .craft-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2.2rem,6vw,5rem);align-items:center} .craft p{color:#413a31;margin:0 0 1.15rem;font-size:1.06rem} .quote{ font-family:var(--display);font-style:italic;font-weight:400; font-size:clamp(1.45rem,3.2vw,2.1rem);line-height:1.3;color:var(--blu); margin:2rem 0;padding-left:1.5rem;border-left:3px solid var(--lemon); } .quote footer{ font-family:var(--body);font-style:normal;font-size:.7rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--blu-soft);margin-top:.85rem; } .framed{ /* Messingrahmen statt weissem Passepartout — passt zur Schaukasten-Tafel der Karte. Der Verlauf gibt dem Metall Tiefe: hell an der Lichtkante, dunkel in der Schattenkante. */ /* Feine Goldlinie statt breitem Rahmen: 7px Verlauf wirkten als Flaeche und billig. Eine 1px-Kontur plus ein Hauch Abstand liest sich als Fassung, nicht als Passepartout. */ padding:0; background:none; border:1px solid #c9a349; border-radius:2px; box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 18px 40px rgba(18,38,106,.16); transform:rotate(-1.2deg); line-height:0; } .framed > *{display:block;margin:0} .framed:has(img[height="1604"]) img{ height:100%; object-fit:cover; object-position:center 38%; /* 374px bei 1180px Inhalt = 32% — schmaler als zuvor (446). */ width:100%; max-width:none; border:1px solid #c9a349; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 18px 40px rgba(18,38,106,.16); transform:rotate(-1.2deg); } .framed img{ border:0; display:block; width:100%; height:auto; } /* Hochformatiges Bild: Der RAHMEN wird begrenzt, nicht das Bild. Vorher stand max-height am img mit width:auto — dadurch wurde das Bild schmaler als seine Fassung und links/rechts blieb heller Grund stehen. Jetzt schrumpft die Fassung mit, das Bild fuellt sie randlos. */ .framed:has(img[height="1604"]){ /* Absolut zum .wrap positioniert. Grund: Als Grid-Kind veraenderte jeder margin-Wert die Spaltenbreite gleich mit — der Zusammenhang war nicht linear, fuenf Anlaeufe trafen die Vorgabe nicht. Absolut positioniert ist der Wert direkt der Abstand. Vorgabe des Kunden: Bild von 701 bis 1074 bei 1180px Inhaltsbreite -> rechter Abstand 106px, Breite 373px. */ position:absolute; right:106px; /* Oben buendig zum Text statt mittig: Bei 50% ragte das Bild unten in die Kaesten der naechsten Sektion. Die Hoehe folgt jetzt der Textspalte (827px), das Seitenverhaeltnis bleibt gewahrt. */ top:26px; transform:none; width:373px; height:min(827px,calc(100% - 52px)); object-fit:cover; max-width:none; margin:0; display:block; background:none; border:0; box-shadow:none; } .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grout); border:1px solid var(--grout);margin-top:2.4rem} .fact{background:var(--ceramic-2);padding:1.3rem 1rem;text-align:center} .fact b{display:block;font-family:var(--display);font-size:1.85rem;color:var(--blu);font-weight:500;line-height:1} .fact span{font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:.4rem;display:block} /* ---------- Küchen-Philosophie (3 Schritte) ---------- */ .craftsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px; background:var(--grout);border:1px solid var(--grout);margin-top:clamp(3rem,7vw,5rem)} .step{background:var(--ceramic);padding:2.2rem 1.8rem} .step .n{ font-family:var(--display);font-style:italic;font-size:2.4rem;color:var(--lemon-deep); line-height:1;margin-bottom:.8rem;display:block; } .step h3{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--blu);margin:0 0 .6rem} .step p{margin:0;font-size:.96rem;color:var(--ink-2);line-height:1.6} /* ---------- Signature-Gerichte ---------- */ .signature{background:var(--ceramic-2)} .signature.marine-host{ --marine-overlap:clamp(180px,34vh,320px); isolation:isolate;overflow:visible;background:#063b4e; } .signature.marine-host::before{ z-index:2;top:calc(-1 * var(--marine-overlap));opacity:1; background:linear-gradient(180deg,rgba(7,79,91,.06),rgba(1,32,45,.34) 24%,rgba(1,22,34,.72)); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); } .signature.marine-host>.wrap{position:relative;z-index:3} .marine-stage{position:absolute;z-index:0;overflow:hidden;pointer-events:none;left:0;right:0;top:calc(-1 * var(--marine-overlap));bottom:0} .marine-stage>span,.marine-stage canvas{position:absolute;inset:0;width:100%;height:100%} .marine-underwater{ background:url('hero-mediterranean-underwater.webp') center top/cover no-repeat; transform:scale(1.035);transform-origin:50% 12%; filter:saturate(.82) brightness(.78) hue-rotate(-4deg);opacity:var(--marine-reveal,.35); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); } .marine-light{ z-index:1;opacity:var(--marine-reveal,.35); background:radial-gradient(ellipse at 50% 5%,rgba(164,230,220,.28),transparent 43%),linear-gradient(180deg,rgba(77,169,174,.16),transparent 42%); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); } #heroMarineCanvas{ z-index:2;top:var(--marine-overlap);height:calc(100% - var(--marine-overlap)); opacity:var(--fish-reveal,0);filter:saturate(.86) contrast(.94); } /* --- Signature-Slider --- */ .slider{position:relative;margin-top:3rem} .rail{ display:flex;gap:1.6rem;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:.5rem .25rem 1.6rem; scrollbar-width:none;-ms-overflow-style:none; } .rail::-webkit-scrollbar{display:none} .sig{ flex:0 0 clamp(268px,31%,340px);scroll-snap-align:start; background:var(--ceramic);border:1px solid var(--grout); position:relative;overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s; } .sig-body{padding:1.5rem 1.6rem 2rem} .sig-shot{ aspect-ratio:4/3;overflow:hidden;background:var(--ceramic-2); border-bottom:1px solid var(--grout); } .sig-shot img{ width:100%;height:100%;object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); } .sig:hover .sig-shot img{transform:scale(1.07)} .sig:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(18,38,106,.16);border-color:var(--blu-soft)} .sig::after{ /* Zitronen-Akzent, wächst bei Hover */ content:"";position:absolute;left:1.6rem;right:1.6rem;bottom:1.1rem;height:2px; background:var(--lemon);transform:scaleX(0);transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.3,1); } .sig:hover::after{transform:scaleX(1)} .slider-ui{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem} .dots{display:flex;gap:1.1rem} .dot{ width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer; background:var(--grout);transition:background .25s,width .25s; position:relative; } /* Sichtbar bleibt der 8px-Punkt, treffbar sind 44px (WCAG 2.5.8) */ .dot::before{content:"";position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%)} .dot[aria-current="true"]{background:var(--blu);width:24px;border-radius:4px} .arrows{display:flex;gap:.5rem} .arrow{ width:44px;height:44px;border-radius:50%;cursor:pointer; background:transparent;border:1px solid var(--grout);color:var(--blu); font-size:1rem;line-height:1;display:grid;place-items:center; transition:background .25s,color .25s,border-color .25s,transform .25s; } .arrow:hover:not(:disabled){background:var(--blu);border-color:var(--blu);color:var(--ceramic);transform:scale(1.06)} .arrow:disabled{opacity:.3;cursor:default} .sig .kind{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#2f4fb0} .sig h3{font-family:var(--display);font-size:1.42rem;font-weight:600;color:var(--blu);margin:.7rem 0 .5rem;line-height:1.2} .sig p{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.6} .sig .price{ display:inline-block;margin-top:1.1rem;font-family:var(--display);font-size:1.3rem; font-weight:600;color:var(--lemon-deep); } /* ---------- Speisekarte ---------- */ .tabs{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-bottom:3rem} .tab{ font-family:var(--body);font-size:.75rem;font-weight:500;letter-spacing:.13em; text-transform:uppercase;padding:.85rem 1.3rem;min-height:44px;cursor:pointer;border-radius:2px; background:#fff;border:1px solid var(--grout);color:var(--ink-2);transition:all .22s; } .tab:hover{border-color:var(--blu-soft);color:var(--blu)} .tab[aria-selected="true"]{background:var(--blu);border-color:var(--blu);color:var(--ceramic)} .panel{display:none} .panel.on{display:block;animation:in .4s ease both} .course{ font-family:var(--display);font-style:italic;font-weight:500;font-size:1.75rem;color:var(--blu); margin:3rem 0 1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--grout); display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap; } .course:first-child{margin-top:0} .course small{font-family:var(--body);font-style:normal;font-size:.66rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--blu-soft)} .course-note{color:var(--ink-2);font-size:.97rem;margin:-.4rem 0 1.4rem;max-width:70ch;font-style:italic} .dishes{display:grid;grid-template-columns:repeat(auto-fit,minmax(345px,1fr));gap:0 3.4rem} .dish{padding:1.1rem 0;border-bottom:1px solid var(--grout)} .dish-head{display:flex;align-items:baseline;gap:.6rem} .dish-name{font-family:var(--display);font-size:1.22rem;font-weight:600;color:var(--blu);letter-spacing:-.005em} .dish-fill{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--grout) 0 3px,transparent 3px 7px);transform:translateY(-3px)} .dish-price{ font-family:var(--body);font-size:.86rem;font-weight:600;color:var(--blu); background:#fff;border:1px solid var(--grout);border-radius:2px; padding:.22rem .55rem;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.9) inset; } .dish-desc{margin:.4rem 0 0;font-size:.95rem;color:var(--ink-2);line-height:1.55;max-width:52ch} .tag{display:inline-block;margin-top:.5rem;font-size:.62rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--lemon-deep)} .tag::before{content:"◆ ";color:var(--lemon)} /* --- Allergene: aufklappbar, damit die Karte nicht erschlagen wird --- */ .allergene{margin-top:3.2rem;border:1px solid var(--grout);background:#fff} .allergene summary{ cursor:pointer;padding:1.15rem 1.4rem;list-style:none; font-family:var(--display);font-style:italic;font-weight:600;font-size:1.2rem;color:var(--blu); display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px; } .allergene summary::-webkit-details-marker{display:none} .allergene summary::after{content:"+";font-family:var(--body);font-style:normal;font-weight:400; font-size:1.5rem;color:var(--lemon-deep);transition:transform .3s} .allergene[open] summary::after{transform:rotate(45deg)} .allergene summary:hover{background:var(--ceramic)} .alg-body{padding:0 1.4rem 1.5rem;border-top:1px solid var(--grout)} .alg-hinweis{ margin:1.2rem 0 1.4rem;padding:.9rem 1.1rem;background:#fff8e3; border-left:3px solid var(--lemon-deep);font-size:.94rem;color:#5c4a1c;line-height:1.6; } .alg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.4rem 2.4rem} .alg-cols h4{ grid-column:1/-1;font-family:var(--body);font-size:.68rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--blu-soft); margin:1.2rem 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--grout); } .alg-cols h4:first-child{margin-top:0} .alg-item{display:flex;gap:.7rem;padding:.32rem 0;font-size:.93rem;color:var(--ink-2);line-height:1.45} .alg-item b{ flex:none;min-width:1.9rem;height:1.45rem;display:grid;place-items:center; background:var(--blu);color:var(--ceramic);border-radius:2px; font-size:.72rem;font-weight:600;font-family:var(--body); } /* ---------- Enoteca ---------- */ .cellar{background:var(--blu);color:var(--ceramic);position:relative;overflow:hidden} .cellar::before{ content:"";position:absolute;inset:0;opacity:.055;pointer-events:none; background:url("az_corner.webp") repeat;background-size:210px; } .cellar::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 60% at 50% 0%,rgba(255,255,255,.16),transparent 60%); } .cellar .wrap{position:relative;z-index:1} .cellar .eyebrow{color:var(--lemon)} .cellar .title{color:var(--ceramic)} .cellar .lede{color:rgba(247,241,228,.78)} .cellar .course{color:var(--lemon);border-bottom-color:rgba(242,194,48,.28)} .cellar .course small{color:rgba(247,241,228,.6)} .cellar .course-note{color:rgba(247,241,228,.72)} .cellar .dish{border-bottom-color:rgba(247,241,228,.16)} .cellar .dish-name{color:#fff} .cellar .dish-desc{color:rgba(247,241,228,.68)} .cellar .dish-fill{background:repeating-linear-gradient(90deg,rgba(242,194,48,.4) 0 3px,transparent 3px 7px)} .cellar .dish-price{background:rgba(255,255,255,.08);border-color:rgba(242,194,48,.4);color:var(--lemon)} /* ---------- Events ---------- */ .events{background:var(--ceramic)} .ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:2.6rem} .ev-list{display:grid;gap:1px;background:var(--grout);border:1px solid var(--grout)} .ev{background:var(--ceramic);padding:1.5rem 1.6rem;display:flex;gap:1.3rem;align-items:flex-start} .ev .when{ font-family:var(--display);font-style:italic;font-weight:600;font-size:1.05rem; color:var(--lemon-deep);min-width:6.5rem;line-height:1.3; } .ev h3{font-family:var(--display);font-size:1.18rem;font-weight:600;color:var(--blu);margin:0 0 .3rem} .ev p{margin:0;font-size:.94rem;color:var(--ink-2);line-height:1.55} /* ---------- Kopfbild einer Unterseite ---------- */ .seiten-bild{ margin:0;overflow:hidden;border-bottom:3px solid var(--blu); max-height:min(42vh,340px); } .seiten-bild img{width:100%;height:100%;object-fit:cover;object-position:center} /* ---------- Weinregionen ---------- */ .wein-intro{max-width:64ch;margin:0 auto 2.6rem;text-align:center} .wein-intro p{color:var(--ink-2);font-size:1.02rem;line-height:1.7;margin:0 0 .8rem} .wein-intro strong{color:var(--blu);font-weight:600} .cellar .wein-intro p{color:rgba(247,241,228,.78)} .cellar .wein-intro strong{color:var(--lemon)} .regionen{background:var(--ceramic-2)} .reg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px; background:var(--grout);border:1px solid var(--grout);max-width:1000px;margin:0 auto} .reg{background:var(--ceramic);padding:1.7rem 1.6rem} .reg h3{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--blu);margin:0 0 .3rem} .reg-weine{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--lemon-deep);margin:0 0 .8rem} .reg p:last-child{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.65} .wein-hinweis{max-width:1000px;margin:2rem auto 0;padding:1.3rem 1.5rem;text-align:center; background:#fff8e3;border-left:3px solid var(--lemon-deep)} .wein-hinweis p{margin:0;color:#5c4a1c;font-size:.98rem;line-height:1.65} /* ---------- Küchen-Prinzipien ---------- */ .kueche:not(.wand){background:var(--ceramic)} .prinzip-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem;max-width:1000px;margin:0 auto;align-items:stretch} /* Gleiche Höhe je Reihe: unterschiedlich lange Texte ließen die Karten sonst wie ein Treppenmuster aussehen. */ .prinzip{display:flex;flex-direction:column} /* Vierter Kasten ueber die volle Breite: Bei drei Spalten stand er allein links und liess rechts zwei leere Felder stehen. Als durchgehende Zeile schliesst er den Block ab. Gilt nur, wenn es GENAU vier sind — bei anderer Anzahl bleibt das Raster wie es ist. */ .prinzip-liste > .prinzip:nth-child(4):nth-last-child(1){ grid-column:1 / -1; } /* Quer statt hoch: Ueberschrift links, Text daneben — sonst wirkt die breite Karte oben leer. */ @media (min-width:760px){ .prinzip-liste > .prinzip:nth-child(4):nth-last-child(1){ display:grid; grid-template-columns:minmax(0,18rem) 1fr; gap:0 clamp(1.5rem,4vw,3rem); align-items:start; } } .prinzip{background:#fff;border:1px solid var(--grout);border-top:3px solid var(--lemon); padding:1.7rem 1.6rem} .prinzip h3{font-family:var(--display);font-size:1.22rem;font-weight:600;color:var(--blu); margin:0 0 .6rem;line-height:1.3} .prinzip p{margin:0;font-size:.96rem;color:var(--ink-2);line-height:1.68} .kueche-schluss{max-width:1000px;margin:2.2rem auto 0;text-align:center} .kueche-schluss p{color:var(--ink-2);font-size:1.02rem;line-height:1.7;margin:0} .kueche-schluss a{color:var(--blu-mid);border-bottom:1px solid rgba(27,58,143,.35);text-decoration:none} /* ---------- Anfahrt (Kontakt) ---------- */ .anfahrt{background:var(--ceramic-2)} .weg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px; background:var(--grout);border:1px solid var(--grout);max-width:960px;margin:0 auto} .weg{background:var(--ceramic);padding:1.8rem 1.6rem} .weg-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%; background:rgba(18,38,106,.07);color:var(--blu);margin-bottom:1rem} .weg h3{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--blu);margin:0 0 .5rem} .weg p{margin:0;font-size:.96rem;color:var(--ink-2);line-height:1.6} .kontakt-hinweis{max-width:960px;margin:2rem auto 0;padding:1.3rem 1.5rem; background:#fff8e3;border-left:3px solid var(--lemon-deep)} .kontakt-hinweis p{margin:0;color:#5c4a1c;font-size:.98rem;line-height:1.6} .kontakt-hinweis a{color:var(--blu-mid)} /* ---------- Ablauf einer Feier (Events) ---------- */ .feiern{background:var(--ceramic-2)} .ablauf{list-style:none;margin:0 auto;padding:0;max-width:820px;display:grid;gap:1px; background:var(--grout);border:1px solid var(--grout)} .ablauf li{background:var(--ceramic);padding:1.6rem;display:flex;gap:1.3rem;align-items:flex-start} .schritt{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%; background:var(--blu);color:var(--ceramic);font-family:var(--display);font-size:1.25rem;font-weight:600} .ablauf h3{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--blu);margin:0 0 .4rem} .ablauf p{margin:0;font-size:.96rem;color:var(--ink-2);line-height:1.6} .ablauf a{color:var(--blu-mid)} .feier-hinweis{max-width:820px;margin:2rem auto 0;text-align:center} .feier-hinweis p{color:var(--ink-2);font-size:.98rem;line-height:1.65} .feier-hinweis strong{color:var(--blu)} /* ---------- Dunkler Abschnitt, leichte Variante ---------- Die Kundenseite wechselt zwischen zwei Blautönen (#1E3A5F / #0F2340) und hellem Creme — sie macht NICHT alles dunkel. Diesen Rhythmus übernehmen wir: .karte-dunkel ist das tiefe Blau für die Karten, .wand-hell das ruhigere für erzählende Abschnitte. So bleibt der Wechsel erhalten und die Seite wird nicht monoton. */ .wand-hell{background:#1e3a5f;color:var(--ceramic);position:relative;overflow:hidden} .wand-hell::before{ content:"";position:absolute;inset:0;opacity:.05;pointer-events:none; background:url("az_corner.webp") repeat;background-size:210px; } .wand-hell .wrap{position:relative;z-index:1} .wand-hell .eyebrow{color:var(--kunde-gelb)} .wand-hell .title{color:var(--ceramic)} .wand-hell .title em{color:var(--kunde-gelb)} .wand-hell .lede{color:rgba(247,241,228,.8)} .wand-hell p{color:rgba(247,241,228,.8)} /* Kennzahlen */ .wand-hell .facts{background:rgba(234,179,8,.25);border-color:rgba(234,179,8,.3)} .wand-hell .fact{background:rgba(15,35,64,.85)} .wand-hell .fact b{color:var(--kunde-gelb)} .wand-hell .fact span{color:rgba(247,241,228,.7)} /* Bildrahmen */ .wand-hell .framed{background:rgba(255,255,255,.06);border-color:rgba(234,179,8,.25)} /* Veranstaltungsliste */ .wand-hell .ev-list{background:rgba(234,179,8,.25);border-color:rgba(234,179,8,.3)} .wand-hell .ev{background:rgba(15,35,64,.85)} .wand-hell .ev h3{color:var(--kunde-gelb)} .wand-hell .ev p{color:rgba(247,241,228,.75)} .wand-hell .when{color:rgba(247,241,228,.6)} /* Ablauf einer Feier */ .wand-hell .ablauf{background:rgba(234,179,8,.25);border-color:rgba(234,179,8,.3)} .wand-hell .ablauf li{background:rgba(15,35,64,.85)} .wand-hell .ablauf h3{color:var(--kunde-gelb)} .wand-hell .ablauf p{color:rgba(247,241,228,.75)} .wand-hell .ablauf a{color:var(--kunde-gelb)} .wand-hell .schritt{background:var(--kunde-gelb);color:var(--blu)} .wand-hell .feier-hinweis p{color:rgba(247,241,228,.8)} .wand-hell .feier-hinweis strong{color:var(--kunde-gelb)} /* Karte und Signature-Slider auf dunklem Grund */ .wand-hell .map{background:rgba(255,255,255,.06);border-color:rgba(234,179,8,.25)} .wand-hell .map figcaption strong{color:var(--kunde-gelb)} .wand-hell .map figcaption span{color:rgba(247,241,228,.72)} .wand-hell .sig{background:rgba(15,35,64,.85);border-color:rgba(234,179,8,.25)} .wand-hell .sig h3{color:var(--kunde-gelb)} .wand-hell .sig p{color:rgba(247,241,228,.75)} .wand-hell .sig .kind{color:rgba(247,241,228,.55)} .wand-hell .sig .price{color:var(--kunde-gelb)} .wand-hell .sig::after{background:var(--kunde-gelb)} .wand-hell .dot{background:rgba(247,241,228,.3)} .wand-hell .dot[aria-current="true"]{background:var(--kunde-gelb)} .wand-hell .arrow{border-color:rgba(234,179,8,.4);color:var(--kunde-gelb)} .wand-hell .arrow:hover:not(:disabled){background:var(--kunde-gelb);color:var(--blu);border-color:var(--kunde-gelb)} /* Schaltflächen */ .wand-hell .btn--ink{border-color:var(--kunde-gelb);color:var(--kunde-gelb)} .wand-hell .btn--ink:hover{background:var(--kunde-gelb);color:var(--blu)} .wand-hell .btn--fill{background:var(--kunde-gelb);border-color:var(--kunde-gelb);color:var(--blu)} .wand-hell .btn--fill:hover{background:#f6cf4a;border-color:#f6cf4a} /* ---------- Karte auf der Kachelwand ---------- Vorbild ist die Kundenseite vinoegusto-alzey.de: Gerichtnamen in Gelb (#EAB308) auf dunkelblauem Grund, Beschreibung hell, Preis gelb. Der Kunde hat genau diese Kombination als seine Textfarbe benannt. */ .karte-dunkel{background:var(--blu);color:var(--ceramic);position:relative;overflow:hidden} .karte-dunkel::before{ content:"";position:absolute;inset:0;opacity:.055;pointer-events:none; background:url("az_corner.webp") repeat;background-size:210px; } .karte-dunkel .wrap{position:relative;z-index:1} .karte-dunkel .eyebrow{color:var(--kunde-gelb)} .karte-dunkel .title{color:var(--kunde-gelb)} .karte-dunkel .title em{color:var(--ceramic)} .karte-dunkel .lede{color:rgba(247,241,228,.78)} /* Reiter */ .karte-dunkel .tab{ background:transparent;border-color:rgba(234,179,8,.35);color:rgba(247,241,228,.85); } .karte-dunkel .tab:hover{border-color:var(--kunde-gelb);color:var(--kunde-gelb)} .karte-dunkel .tab[aria-selected="true"]{ background:var(--kunde-gelb);border-color:var(--kunde-gelb);color:var(--blu);font-weight:600; } /* Gerichte: Name GELB — das ist der Kern des Kundenwunsches */ .karte-dunkel .course{color:var(--kunde-gelb);border-bottom-color:rgba(234,179,8,.3)} .karte-dunkel .course small{color:rgba(247,241,228,.6)} .karte-dunkel .course-note{color:rgba(247,241,228,.72)} .karte-dunkel .dish{border-bottom-color:rgba(247,241,228,.14)} .karte-dunkel .dish-name{color:var(--kunde-gelb)} .karte-dunkel .dish-desc{color:rgba(247,241,228,.72)} .karte-dunkel .dish-fill{background:repeating-linear-gradient(90deg,rgba(234,179,8,.35) 0 3px,transparent 3px 7px)} .karte-dunkel .dish-price{ background:transparent;border-color:rgba(234,179,8,.4);color:var(--kunde-gelb); } .karte-dunkel .dish:hover .dish-name{color:#f6cf4a} .karte-dunkel .tag{color:rgba(247,241,228,.62)} .karte-dunkel .tag::before{color:var(--kunde-gelb)} /* Allergene und Aufklapper */ .karte-dunkel .allergene{background:rgba(255,255,255,.05);border-color:rgba(234,179,8,.28)} .karte-dunkel .allergene summary{color:var(--kunde-gelb)} .karte-dunkel .allergene summary:hover{background:rgba(255,255,255,.05)} .karte-dunkel .alg-body{border-top-color:rgba(234,179,8,.22)} .karte-dunkel .alg-cols h4{color:var(--kunde-gelb);border-bottom-color:rgba(234,179,8,.25)} .karte-dunkel .alg-item{color:rgba(247,241,228,.78)} .karte-dunkel .alg-item b{background:var(--kunde-gelb);color:var(--blu)} .karte-dunkel .btn{border-color:var(--kunde-gelb);color:var(--kunde-gelb)} .karte-dunkel .btn:hover{background:var(--kunde-gelb);color:var(--blu)} /* Regionen auf dunklem Grund */ .karte-dunkel .reg-grid{background:rgba(234,179,8,.25);border-color:rgba(234,179,8,.28)} .karte-dunkel .reg{background:rgba(18,38,106,.75)} .karte-dunkel .reg h3{color:var(--kunde-gelb)} .karte-dunkel .reg-weine{color:rgba(247,241,228,.65)} .karte-dunkel .reg p:last-child{color:rgba(247,241,228,.75)} .karte-dunkel .wein-hinweis{background:rgba(234,179,8,.12);border-left-color:var(--kunde-gelb)} .karte-dunkel .wein-hinweis p{color:rgba(247,241,228,.85)} .karte-dunkel .wein-intro p{color:rgba(247,241,228,.78)} .karte-dunkel .wein-intro strong{color:var(--kunde-gelb)} /* ---------- Kachelwand für die Restaurant-Seite ---------- Wunsch des Kunden: Im Lokal hängen genau solche Fliesen an der Wand. Derselbe Aufbau wie .cellar (Enoteca), damit beide Bereiche als ein Material gelesen werden. Schriftfarbe ist das Gelb der Kundenseite (#EAB308) — dort für Überschriften bereits im Einsatz. */ .wand{background:var(--blu);color:var(--ceramic);position:relative;overflow:hidden} .wand::before{ content:"";position:absolute;inset:0;opacity:.055;pointer-events:none; background:url("az_corner.webp") repeat;background-size:210px; } .wand::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 60% at 50% 0%,rgba(255,255,255,.16),transparent 60%); } .wand .wrap{position:relative;z-index:1} .wand .eyebrow{color:var(--kunde-gelb)} .wand .title{color:var(--ceramic)} .wand .title em{color:var(--kunde-gelb)} .wand .lede{color:rgba(247,241,228,.78)} /* Küchen-Prinzipien auf der Kachelwand */ .wand .prinzip{ background:rgba(255,255,255,.055); border:1px solid rgba(234,179,8,.28); border-top:3px solid var(--kunde-gelb); } .wand .prinzip h3{color:var(--kunde-gelb)} .wand .prinzip p{color:rgba(247,241,228,.82)} .wand .kueche-schluss p{color:rgba(247,241,228,.78)} .wand .kueche-schluss a{color:var(--kunde-gelb);border-bottom-color:rgba(234,179,8,.45)} /* Zitat und Fakten auf der Wand */ .wand .zitat-gross{border-left-color:var(--kunde-gelb)} .wand .zitat-gross blockquote{color:var(--ceramic)} .wand .z-wer{color:rgba(247,241,228,.6)} .wand .z-quelle{color:var(--kunde-gelb);border-bottom-color:rgba(234,179,8,.4)} .wand .presse-fakten{background:rgba(234,179,8,.22);border-color:rgba(234,179,8,.28)} .wand .pf{background:transparent} .wand .pf b{color:var(--kunde-gelb)} .wand .pf span{color:rgba(247,241,228,.78)} /* ---------- In der Presse ---------- */ .presse:not(.wand){background:var(--ceramic)} .zitat-gross{ max-width:860px;margin:0 auto;padding:0; border-left:3px solid var(--lemon);padding-left:clamp(1.2rem,3vw,2.2rem); } .zitat-gross blockquote{ margin:0;font-family:var(--display);font-style:italic;font-weight:400; font-size:clamp(1.35rem,3.2vw,2rem);line-height:1.35;color:var(--blu); } /* Der Zeilenumbruch im HTML rendert als Leerzeichen — ohne dieses margin stünde ein sichtbarer Abstand zwischen Anführungszeichen und Text. */ .zitat-gross blockquote::before{content:"„";margin-right:-.12em} .zitat-gross blockquote::after{content:"“";margin-left:-.22em} .zitat-gross figcaption{ margin-top:1.2rem;display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;align-items:baseline; } .z-wer{ font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-2); } .z-quelle{ font-size:.84rem;color:var(--blu-mid);text-decoration:none; border-bottom:1px solid rgba(27,58,143,.35); } .z-quelle:hover{border-color:var(--blu-mid)} .presse-fakten{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;background:var(--grout);border:1px solid var(--grout); max-width:860px;margin:clamp(2.4rem,5vw,3.4rem) auto 0; } .pf{background:var(--ceramic);padding:1.5rem 1.4rem} .pf b{ display:block;font-family:var(--display);font-size:1.15rem;font-weight:600; color:var(--blu);margin-bottom:.45rem;line-height:1.25; } .pf span{font-size:.94rem;color:var(--ink-2);line-height:1.6} /* ---------- Gut zu wissen (FAQ) ---------- */ .faq{background:var(--ceramic-2)} .faq-liste{ max-width:860px;margin:0 auto; border:1px solid var(--grout);border-bottom:0;background:#fff; } .fq{border-bottom:1px solid var(--grout)} .fq summary{ cursor:pointer;list-style:none;padding:1.15rem 1.4rem;min-height:44px; font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--blu); display:flex;align-items:center;justify-content:space-between;gap:1rem; transition:background .2s; } .fq summary::-webkit-details-marker{display:none} .fq summary::after{ content:"+";font-family:var(--body);font-weight:400;font-size:1.45rem; color:var(--lemon-deep);flex:none;transition:transform .3s;line-height:1; } .fq[open] summary::after{transform:rotate(45deg)} .fq summary:hover{background:var(--ceramic)} .fq p{ margin:0;padding:0 1.4rem 1.3rem;color:var(--ink-2); font-size:.97rem;line-height:1.65;max-width:68ch; } .fq a{color:var(--blu-mid);text-decoration:none;border-bottom:1px solid rgba(27,58,143,.35)} .fq a:hover{border-color:var(--blu-mid)} .faq-fuss{ max-width:860px;margin:1.6rem auto 0;text-align:center; font-size:.94rem;color:var(--ink-2); } .faq-fuss a{color:var(--blu-mid)} /* ---------- Besuch: Karte + Infos ---------- */ .visit-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:1.6rem;align-items:start} .map{margin:0;background:#fff;border:1px solid var(--grout);box-shadow:0 14px 34px rgba(18,38,106,.09)} .map a{display:block;line-height:0;overflow:hidden} .map img{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .map a:hover img{transform:scale(1.03)} .map figcaption{padding:1.1rem 1.3rem;display:grid;gap:.3rem;line-height:1.5} .map figcaption strong{color:var(--blu);font-size:1rem} .map figcaption span{color:var(--ink-2);font-size:.92rem} .map-links{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:.5rem} .map-links a{ color:var(--blu-mid);text-decoration:none;font-size:.86rem;font-weight:500; border-bottom:1px solid rgba(27,58,143,.35);padding:.5rem 0; } .map-links a:hover{border-color:var(--blu-mid)} .visit-side{display:grid;gap:1.6rem} /* ---------- Reservierung ---------- */ .reserve{background:var(--ceramic)} .resv{ max-width:760px;margin:0 auto;background:#fff; border:1px solid var(--grout);border-top:3px solid var(--blu); padding:clamp(1.6rem,4vw,2.4rem);box-shadow:0 14px 34px rgba(18,38,106,.09); } .resv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem} .f{margin:0;display:grid;gap:.4rem} .f-voll{grid-column:1/-1} .f label{ font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--blu);display:flex;gap:.5rem;align-items:baseline; } .f label span[aria-hidden]{color:var(--lemon-deep)} .opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:#6f665a;font-size:.78rem} .f input,.f textarea{ font-family:var(--body);font-size:1rem;color:var(--ink); padding:.8rem .9rem;min-height:48px;background:var(--ceramic); border:1px solid var(--grout);border-radius:2px;width:100%; transition:border-color .2s,box-shadow .2s,background .2s; } .f textarea{min-height:96px;resize:vertical;line-height:1.55} .f input:focus,.f textarea:focus{ outline:none;background:#fff;border-color:var(--blu-soft); box-shadow:0 0 0 3px rgba(74,111,212,.16); } .f input[aria-invalid="true"]{border-color:#a3271f;background:#fdf4f3} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .resv-recht{ margin:1.4rem 0 0;font-size:.86rem;color:var(--ink-2);line-height:1.6; padding-top:1.1rem;border-top:1px solid var(--grout); } .resv-recht a{color:var(--blu-mid)} .resv-aktion{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.3rem} .resv-status{font-size:.94rem;line-height:1.5} .resv-status.ok{color:#2c5c33;font-weight:500} .resv-status.err{color:#a3271f;font-weight:500} button[disabled]{opacity:.55;cursor:progress} /* ---------- Footer ---------- */ body > footer{background:var(--blu);color:rgba(247,241,228,.8);padding-block:3.4rem 2.4rem;text-align:left} .f-top{ display:grid;grid-template-columns:1.5fr 1fr 1.1fr;gap:2.4rem;text-align:left; padding-bottom:2.2rem;border-bottom:1px solid rgba(247,241,228,.18); } .f-top > *{text-align:left} .f-brand{display:flex;gap:1rem;align-items:flex-start} .f-brand img{border-radius:3px;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.28)} .fmark{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.75rem;color:var(--ceramic);margin:0;line-height:1.1} .f-claim{margin:.35rem 0 0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,241,228,.55)} body > footer h2{ font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--lemon);margin:0 0 .9rem; } .f-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem} .f-nav a,.f-kontakt a{color:rgba(247,241,228,.82);text-decoration:none;display:inline-block;padding:.4rem 0;transition:color .2s} .f-nav a:hover,.f-kontakt a:hover{color:var(--lemon)} .f-kontakt address{font-style:normal;color:rgba(247,241,228,.82);line-height:1.7;margin:0 0 .5rem} .f-zeile{margin:.1rem 0;font-size:.92rem;color:rgba(247,241,228,.6)} .f-bottom{ display:flex;align-items:center;justify-content:space-between;gap:1.2rem; flex-wrap:wrap;padding-top:1.6rem; } .f-recht{display:flex;gap:1.6rem;margin:0} .f-recht a{color:rgba(247,241,228,.7);text-decoration:none;font-size:.88rem;padding:.6rem 0} .f-recht a:hover{color:var(--lemon)} .credit{margin:0} @media (max-width:880px){ .visit-grid{grid-template-columns:1fr} .resv-grid{grid-template-columns:1fr} .f-top{grid-template-columns:1fr;gap:1.8rem} .f-bottom{flex-direction:column;align-items:flex-start} } /* ---------- Besuch (alt) ---------- */ .visit{background:var(--ceramic-2)} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.5rem} .card{ background:#fff;padding:2rem 1.8rem;border:1px solid var(--grout); border-top:3px solid var(--blu);box-shadow:0 14px 34px rgba(18,38,106,.09); } .card h3{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.4rem;color:var(--blu);margin:0 0 1.1rem} .card p{margin:0 0 .4rem;color:#413a31;font-size:.98rem} .card a{color:var(--blu-mid);text-decoration:none;border-bottom:1px solid rgba(27,58,143,.35)} .card a:hover{border-color:var(--blu-mid)} .pending{color:#9d9486;font-style:italic} .hours{width:100%;border-collapse:collapse;font-size:.95rem} .hours th,.hours td{padding:.45rem 0;border-bottom:1px dotted var(--grout);text-align:left} .hours th{font-weight:500;color:#413a31} .hours td{text-align:right;color:#8a5f06;font-weight:600} .hours tr:last-child th,.hours tr:last-child td{border-bottom:0} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hint{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--grout);font-size:.9rem;color:var(--ink-2)} /* Die frühere Fassung dieser Regel (text-align:center, eigene .fmark-Größe) überschrieb die maßgebliche footer-Regel weiter oben und wurde nur durch ".f-top > *{text-align:left}" wieder geradegebogen. Entfernt — der Fuß wird oben definiert. Übrig bleibt allein die Linkfarbe. */ body > footer a{color:var(--lemon);text-decoration:none} .rv{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease} .rv.seen{opacity:1;transform:none} /* Gestaffelte Reveals: Gerichte erscheinen nacheinander */ .stagger > *{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease} .stagger.seen > *{opacity:1;transform:none} .stagger.seen > *:nth-child(1){transition-delay:.04s} .stagger.seen > *:nth-child(2){transition-delay:.10s} .stagger.seen > *:nth-child(3){transition-delay:.16s} .stagger.seen > *:nth-child(4){transition-delay:.22s} .stagger.seen > *:nth-child(5){transition-delay:.28s} .stagger.seen > *:nth-child(6){transition-delay:.34s} .stagger.seen > *:nth-child(n+7){transition-delay:.40s} /* Gericht: Hover hebt Namen und Preis */ .dish{transition:padding-left .3s cubic-bezier(.2,.7,.3,1)} .dish:hover{padding-left:.7rem} .dish-name,.dish-price{transition:color .25s,transform .25s} .dish:hover .dish-name{color:var(--blu-mid)} .dish:hover .dish-price{transform:scale(1.06)} /* Kennzahlen zählen hoch */ .fact b{font-variant-numeric:tabular-nums} /* Parallax-Fries */ .frieze{background-position-x:var(--px,0px)} .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--blu);color:var(--ceramic);padding:.9rem 1.4rem; font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none; } .skip:focus{left:.6rem;top:.6rem} /* Mobile Aktionsleiste: Anrufen + Route immer erreichbar. Auf dem Handy sucht man unterwegs Telefonnummer und Weg — nicht die Historie. */ .bar{ position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; background:rgba(247,241,228,.96);backdrop-filter:blur(12px); border-top:1px solid var(--grout);padding:.55rem .7rem; padding-bottom:calc(.55rem + env(safe-area-inset-bottom)); gap:.5rem; } .bar a{ flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem; padding:.85rem .5rem;border-radius:3px;text-decoration:none; font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; } /* Mobile Aktionsleiste: beide Knöpfe blau gefüllt mit gelber Schrift. .b-map trug blaue Schrift auf blauem Grund und war dadurch unsichtbar — diese Regel ist mit zwei Klassen spezifischer als die allgemeine .btn/.b-map-Regel weiter unten und muss daher hier selbst korrigiert werden, statt sie unten zu überschreiben. */ .bar .b-call{background:var(--blu);color:var(--kunde-gelb)} .bar .b-map{background:var(--blu);border:1.5px solid var(--blu);color:var(--kunde-gelb)} @media (max-width:760px){ .bar{display:flex} body{padding-bottom:4.6rem} } /* Footer-Links: Trefferflaeche auf 44px, ohne die Optik zu aendern (WCAG 2.5.8) */ body > footer .fmeta a,footer p a{display:inline-block;padding:.7rem .35rem;margin:-.7rem 0} /* Die Herkunfts-Blasen bringen ihre Hoehe selbst mit (min-height:44px) und duerfen das negative Margin von "footer p a" NICHT erben: es zieht sie um 11px zusammen, waehrend die Zeile nur mit 28px Zeilenhoehe rechnet. Beim Umbruch auf zwei Zeilen ragten sie dadurch messbar ineinander (webliq bei y=3458 +44px hoch, otaku begann schon bei y=3489). Margin zurueckgesetzt und der Zeile echten Abstand gegeben. */ .badge{ min-height:44px; margin:0; padding:6px 13px; } .credit{ gap:8px 9px; row-gap:10px; line-height:1.2; } /* Scroll-Fortschritt */ .progress{ position:fixed;top:0;left:0;height:3px;width:0;z-index:100; background:linear-gradient(90deg,var(--lemon),var(--lemon-deep)); transition:width .12s linear;pointer-events:none; } /* Tab-Wechsel: Panel gleitet ein */ @keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* Buttons: Glanz beim Hover */ .btn{position:relative;overflow:hidden} .btn::before{ content:"";position:absolute;inset:0;transform:translateX(-101%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transition:transform .55s ease; } .btn:hover::before{transform:translateX(101%)} @media (max-width:880px){ .craft-grid,.ev-grid{grid-template-columns:1fr} /* Einspaltig: Der negative Rand und die Spaltenlogik von oben gelten hier nicht mehr — das Bild klebte sonst rechts und schrumpfte auf 152px. Zurueck auf schlichtes Zentrieren. */ /* Bild NICHT mehr vor den Text ziehen: Auf schmalen Schirmen stand das Foto ueber der Ueberschrift, die es beschriftet. Ueberschrift zuerst, dann das Bild. */ .framed{transform:none} .framed:has(img[height="1604"]){ /* Absolute Positionierung AUFHEBEN — sie gilt nur fuers Zweispalten-Layout. Blieb sie stehen, legte sich das Bild auf schmalen Schirmen ueber Text und Kennzahlen. */ position:static; right:auto; top:auto; grid-column:auto; width:auto; height:auto; margin:0 auto; justify-content:center; } .framed:has(img[height="1604"]) img{ width:100%; height:auto; max-width:min(72vw,340px); object-fit:fill; margin-inline:auto; } .menu{ display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; background:var(--ceramic);border-bottom:1px solid var(--grout);padding:.4rem var(--edge) 1.1rem; } .menu.open{display:flex} .menu a{display:block;padding:.9rem 0;border-bottom:1px solid var(--grout)} .menu a::after{display:none} .burger{display:block} .dishes{grid-template-columns:1fr;gap:0} .facts{grid-template-columns:1fr} .ev{flex-direction:column;gap:.4rem} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} html{scroll-behavior:auto} } /* ============================================================ Druckansicht Die Speisekarte wird ausgedruckt — von Gästen und vom Restaurant selbst. Ohne diese Regeln kämen nur die Antipasti aufs Papier: die vier anderen Reiter sind per display:none versteckt, und der Drucker übernimmt das. Dazu Navigation, Footer-Badges und Aufklapper, die auf Papier nichts verloren haben. ============================================================ */ @media print{ /* Alle Reiter-Inhalte zeigen — sonst fehlen 4 von 5 Kategorien */ .panel{display:block!important;break-inside:auto} .tabs{display:none!important} /* Aufklapper geöffnet drucken */ details{display:block!important} details > summary{list-style:none} details > summary::after{content:""!important} details:not([open]) > *:not(summary){display:block!important} /* Bildschirm-Zubehör weglassen */ .topbar,.bar,.progress,.frieze,.slider-ui,.faq-fuss, .credit,.f-nav,.map-links,form,.resv{display:none!important} /* Ruhiges Schwarz auf Weiß, kein Farbverbrauch */ body{background:#fff!important;color:#000;font-size:11pt} .sec{padding-block:0!important} .cellar,.faq,.presse,.visit,.craft,.signature{background:#fff!important} .cellar .title,.cellar .dish-name,.cellar .course h3,.cellar .dish-desc{color:#000!important} .title,.course h3,.dish-name,.fq summary{color:#000!important} .dish-price{color:#000!important;border-color:#999!important;background:transparent!important} /* Umbrüche dort, wo sie Sinn ergeben */ .course{break-after:avoid;page-break-after:avoid} .dish,.fq,.pf{break-inside:avoid;page-break-inside:avoid} section{break-before:auto} /* Verweise ausschreiben — auf Papier ist ein Link ohne Adresse wertlos */ main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all} main a[href^="#"]::after{content:""} /* Adresse auf jede Seite */ @page{margin:16mm} } /* Öffnungszeiten im Footer — auf JEDER Seite erreichbar. Vorher standen sie nur auf der Kontaktseite; ein Gast auf der Speisekarte fand weder Zeiten noch Telefonnummer. Als , damit Screenreader Tag und Zeit als Paar vorlesen. */ .f-zeiten{border-collapse:collapse;margin:.5rem 0 0;font-size:.86rem;width:100%;max-width:19rem} .f-zeiten th,.f-zeiten td{text-align:left;padding:.2rem 0;font-weight:400;vertical-align:top} .f-zeiten th{color:rgba(247,241,228,.6);padding-right:.9rem;white-space:nowrap} .f-zeiten td{color:rgba(247,241,228,.85)} /* ---------- Hero-Schriftfarbe ---------- Das Gelb der Speisekarte (#EAB308) — ausdrücklicher Kundenwunsch. Damit es auf dem hellen Grund steht statt zu verschwinden, bekommt die Kursivzeile eine dunkle Kontur: text-shadow als feiner Umriss. Die Buchstabenkanten liegen damit auf Blau, die Fläche bleibt Gelb. */ .hero h1 em{ color:var(--kunde-gelb); text-shadow: -1px -1px 0 rgba(18,38,106,.92), 1px -1px 0 rgba(18,38,106,.92), -1px 1px 0 rgba(18,38,106,.92), 1px 1px 0 rgba(18,38,106,.92), 0 2px 6px rgba(18,38,106,.32); } /* Eyebrow und Chips sind klein — dort trägt reines Gelb nicht. Sie bekommen das Gelb als Fläche, mit dunkler Schrift darauf. */ .hero .eyebrow{color:var(--blu)} .hero .chip{ background:var(--kunde-gelb); border-color:var(--kunde-gelb); color:var(--blu); font-weight:600; } /* ---------- Überschriften seitenweit im Kundengelb ---------- Ausdrücklicher Kundenwunsch: das Gelb der Speisekarte (#EAB308) als Schriftfarbe. Auf hellem Grund trägt reines Gelb nicht (Kontrast 1,7), deshalb bekommen Überschriften dort dieselbe dunkle Kontur wie die Hero-Zeile: Buchstabenkanten auf Blau, Fläche bleibt Gelb. Auf den dunklen Sektionen steht das Gelb ohnehin frei — dort ist die Kontur nicht nötig und wird ausdrücklich zurückgenommen. */ .title, .sec .title, .craft h2,.signature h2,.events h2,.regionen h2,.anfahrt h2, .feiern h2,.faq h2,.reserve h2,.visit h2, .craft h3,.signature h3,.events h3,.anfahrt h3,.faq h3,.visit h3, .ev h3,.reg h3,.weg h3,.step h3,.fact b{ color:var(--kunde-gelb); text-shadow: -1px -1px 0 rgba(18,38,106,.92), 1px -1px 0 rgba(18,38,106,.92), -1px 1px 0 rgba(18,38,106,.92), 1px 1px 0 rgba(18,38,106,.92), 0 2px 6px rgba(18,38,106,.30); } /* Auf dunklem Grund: Gelb ohne Kontur — dort steht es frei. */ .karte-dunkel .title,.wand-hell .title,.cellar .title,.wand .title, .karte-dunkel h2,.wand-hell h2,.cellar h2,.wand h2, .karte-dunkel h3,.wand-hell h3,.cellar h3,.wand h3, .karte-dunkel .course,.karte-dunkel .dish-name, .wand-hell .ev h3,.wand-hell .ablauf h3,.wand-hell .sig h3, .wand .prinzip h3,.wand-hell .fact b{ color:var(--kunde-gelb); text-shadow:none; } /* Eyebrow-Zeilen ebenfalls gelb. Sie sind klein und gesperrt gesetzt — auf hellem Grund mit Kontur, sonst ohne. */ .sec .eyebrow{ color:var(--kunde-gelb); text-shadow: -1px -1px 0 rgba(18,38,106,.9), 1px -1px 0 rgba(18,38,106,.9), -1px 1px 0 rgba(18,38,106,.9), 1px 1px 0 rgba(18,38,106,.9); } .karte-dunkel .eyebrow,.wand-hell .eyebrow,.cellar .eyebrow,.wand .eyebrow{ text-shadow:none; } /* ---------- Wortmarke, Navigation, Adresse im Kundengelb ---------- Ergänzt die Überschriften-Regel oben: auch die Textstellen, die keine Überschrift sind, tragen jetzt #EAB308. Auf der hellen Keramik-Fläche des Kopfbereichs mit derselben dunklen Kontur wie die Überschriften. */ .brand span,.nav a,.burger,.b-adr strong,.visit .b-adr strong{ color:var(--kunde-gelb); text-shadow: -1px -1px 0 rgba(18,38,106,.92), 1px -1px 0 rgba(18,38,106,.92), -1px 1px 0 rgba(18,38,106,.92), 1px 1px 0 rgba(18,38,106,.92); } .burger{border-color:var(--kunde-gelb)} /* Auf dunklem Grund keine Kontur nötig. */ .karte-dunkel .b-adr strong,.wand-hell .b-adr strong, .cellar .b-adr strong,.wand .b-adr strong{text-shadow:none} /* ---------- Helle Knöpfe: blau gefüllt, gelbe Schrift ---------- Kundenwunsch „Text gelb" trifft bei den hellen Knöpfen auf ein Lesbarkeitsproblem: Gelb auf Weiß trägt nicht (Kontrast 1,7). Deshalb bekommen sie den blauen Grund, den .btn--fill schon hat — gelb auf Blau liegt bei ~8:1 und ist damit klar lesbar. Der Hover setzte color:var(--ceramic) — das würde die Schrift beim Überfahren wieder weiß machen und wird hier mit überschrieben. */ .btn,.b-map,.btn--ink{ background:var(--blu); border-color:var(--blu); color:var(--kunde-gelb); text-shadow:none; } .btn:hover,.btn:focus-visible, .b-map:hover,.b-map:focus-visible, .btn--ink:hover,.btn--ink:focus-visible{ background:#0c1c50; border-color:#0c1c50; color:var(--kunde-gelb); } /* Auf dunklen Sektionen sind die Knöpfe bereits hell abgesetzt — dort bleibt der bestehende Umkehr-Hover (gelber Grund, blaue Schrift). */ .karte-dunkel .btn:hover,.wand-hell .btn--ink:hover{ background:var(--kunde-gelb); color:var(--blu); } /* ---------- Wortmarke im Kundengelb ---------- Die Wortmarke im Kopf trägt die Klasse .mark (nicht .brand) — ein früherer Versuch über .brand span griff deshalb ins Leere. Kopfbereich steht auf heller Keramik: Kontur wie bei den Überschriften. Im Fuß (.fmark) steht sie auf Blau und braucht keine. */ .mark span{ color:var(--kunde-gelb); text-shadow: -1px -1px 0 rgba(18,38,106,.92), 1px -1px 0 rgba(18,38,106,.92), -1px 1px 0 rgba(18,38,106,.92), 1px 1px 0 rgba(18,38,106,.92); } .fmark{color:var(--kunde-gelb);text-shadow:none} /* ---------- Fußbereich kompakter ---------- Am Handy stapelten sich Wortmarke, Menü, Adresse, Zeiten und Links auf ~950px — fast ein ganzer Bildschirm nur für den Fuß. Die Blöcke sind schmal genug, um paarweise nebeneinander zu stehen. */ body > footer{padding-block:2.6rem 1.8rem} .f-top{gap:1.8rem;padding-bottom:1.6rem} /* Tapp-Ziele: gemessen lagen die Links bei 33-37px, der Richtwert ist 44px. Statt über Polsterung (die den Fuß wieder aufbläht) über min-height mit zentriertem Text — kostet keine zusätzliche Höhe, weil die Zeilen ohnehin Abstand brauchen. */ .f-nav a,.f-kontakt a{ padding:.2rem 0; /* Gleicher Zeilenabstand in "Entdecken" und "Besuch": Die 44px Mindesthoehe bleibt als bequemes Tippziel, line-height haelt beide Spalten gleich dicht. */ min-height:44px; .f-kontakt .f-zeile{margin:0} line-height:1.45; display:flex; align-items:center; } .f-nav ul{gap:0} .f-zeiten{margin-top:.35rem;font-size:.82rem} .f-zeiten th,.f-zeiten td{padding:.14rem 0} .f-brand img{width:44px;height:44px} .fmark{font-size:1.5rem} .f-claim{margin-top:.25rem;font-size:.72rem;letter-spacing:.13em} @media (max-width:900px){ /* Gemessen bei 375px: Menülinks sind max. 103px breit, Kontaktinhalte max. 156px — zusammen 259px von 375px. Ein starres "1fr 1fr" verschenkte links ~142px. "auto 1fr" gibt dem Menü seine Inhaltsbreite und den Rest dem Kontakt, sodass beide bequem nebeneinander passen. Die Zeitentabelle (338px) sprengte jeden Zweispalter und steht deshalb seit diesem Commit als eigener Block darunter über die volle Breite. */ .f-top{ /* 1fr 1fr statt auto 1fr: Mit "auto" nahm die erste Spalte so viel Platz wie ihr breitester Inhalt und schnitt die Navigation rechts ab ("Spezialitäte…"). */ grid-template-columns:1fr 1fr; gap:1.5rem 1.4rem; align-items:start; } .f-nav a{font-size:.94rem;line-height:1.9} .f-brand{grid-column:1 / -1;align-items:center} .f-zeitenblock{ grid-column:1 / -1; padding-top:1rem; border-top:1px solid rgba(247,241,228,.15); } /* Die Zeiten sind kurz genug für zwei Paare nebeneinander — halbiert die Tabellenhöhe von ~130px auf ~70px. */ .f-zeiten{ max-width:none; display:grid; grid-template-columns:auto 1fr; gap:.32rem .9rem; font-size:.84rem; } .f-zeiten td{white-space:nowrap} .f-zeiten tbody{display:contents} .f-zeiten tr{display:contents} .f-zeiten th{padding-right:.4rem} } @media (max-width:360px){ /* Sehr schmal: Zeiten wieder einspaltig, sonst brechen die Paare um. */ .f-zeiten{grid-template-columns:auto 1fr} } /* Zeitenblock: auf breiten Schirmen sitzt er in der dritten Spalte beim Kontakt, am Handy (siehe 900px-Regel) über die volle Breite darunter. */ .f-zeitenblock{margin-top:.6rem} /* ---------- Footer: Leerfläche unter der Wortmarke nutzen ---------- Gemessen: .f-brand trug nur Logo + Namenszug (49px) und wurde von der Navigationsspalte auf 253px gezogen — 204px Leerfläche. Der Zeitenblock stand als VIERTES Kind eines Dreispalters und rutschte deshalb in eine eigene Zeile darunter, direkt neben diesen Leerraum. Statt Abstände zu verkleinern (behandelt das Symptom) wandert der Zeitenblock in die erste Spalte unter die Wortmarke: Er füllt den Raum, der ohnehin da war, und der Fuß verliert eine ganze Zeile. Gilt nur für Desktop — der Mobil-Zweig (max-width:640px) legt den Block @media (min-width:641px){ /* KEIN Zeilenraster. Denkfehler der Vorversuche: `grid-template-rows:min-content` heißt nicht "so hoch wie das kleinste Element", sondern "so hoch wie das GRÖSSTE der Zeile". Marke und Nav lagen in Zeile 1, also war sie stets 224px hoch — die Öffnungszeiten darunter starteten entsprechend tief, dazwischen klaffte Leerraum (gemessen 178px auf Desktop). Jetzt stehen Marke und Zeiten in EINER Rasterzelle und stapeln sich per Flex. Ohne zweite Zeile gibt es keine Fremdhöhe, auf die sie warten könnten. */ .f-top{ grid-template-columns:1.5fr 1fr 1.1fr; align-items:start; } .f-spalte-links{grid-column:1;display:flex;flex-direction:column;gap:.85rem} .f-nav{grid-column:2} .f-kontakt{grid-column:3} .f-zeitenblock{margin-top:0} } /* ---------- Kontrast-Nachzug in der Feiern-Sektion ---------- Beim Messen des Musterwechsels aufgefallen, aber älteren Datums: 1) Die Ablaufliste (.ablauf) steht als HELLE Karte innerhalb der dunklen .feiern-Sektion. Die seitenweite Gelb-Regel färbte ihre h3 gelb und der Ausschluss ".karte-dunkel h3 {text-shadow:none}" nahm zugleich die Kontur weg — Gelb auf Creme ergab Kontrast 1,70. Auf heller Karte gehört die Überschrift ins Tintenblau, nicht ins Gelb. 2) Der Hinweisblock (.feier-hinweis) erbte die dunkle Grundschrift statt der hellen Sektionsfarbe: Grau auf Dunkelblau, Kontrast 1,95. */ /* Helle Karten in der dunklen Sektion: Überschrift blau, ohne Kontur. */ .feiern .ablauf h3, .feiern .ablauf li h3{ color:var(--blu); text-shadow:none; } .feiern .ablauf p{color:#3f3a33} /* Der Kommentar hier behauptete "dunkler Grund" — .feiern hat aber background:var(--ceramic-2), also HELL. Die helle Schrift lag dadurch bei Kontrast 1,09 und war praktisch unsichtbar. */ .feiern .feier-hinweis p{color:#413a31} .feiern .feier-hinweis strong{color:#7a5f06} /* ---------- Kachel im Footer ---------- Auf Wunsch zurück: Der Footer bleibt blau, bekommt aber wieder die Kachel-Struktur, damit er nicht als glatte Fläche abbricht. Kein Lichtschein, kein Verlauf — nur die Textur. */ body > footer{position:relative;overflow:hidden} body > footer::before{ content:"";position:absolute;inset:0;pointer-events:none; background:url("az_corner.webp") repeat;background-size:210px; opacity:.055; } body > footer > *{position:relative;z-index:1} /* ---------- Karte auf der Kontaktseite: volle Breite ---------- Vorher teilte sich die Karte die Zeile mit den Kontaktdaten (1.35fr 1fr) und wurde nur ~420px breit — zu klein und bei doppelter Pixeldichte unscharf. Jetzt liegt sie über die ganze Breite, die Kontaktkarten darunter. Die Karte ist SVG, also in jeder Größe scharf. */ .visit-grid{grid-template-columns:1fr;gap:1.8rem} .visit-grid > .map{order:-1} /* Die .card-Blöcke (Kontakt, Öffnungszeiten) stehen jetzt UNTER der Karte nebeneinander statt daneben gestapelt. */ /* Kontakt und Öffnungszeiten stehen nebeneinander, nicht untereinander */ .visit-grid > .card{min-width:0} @media (min-width:760px){ .visit-grid{grid-template-columns:1fr 1fr} .visit-grid > .map{grid-column:1 / -1} } /* ================= Footer folgt der letzten Sektion ================= Grundregel: Blau darf nicht auf Blau enden. Endet eine Seite mit einer dunklen Sektion (speisekarte, weine, restaurant, events), wird der Footer HELL — Keramik statt Blau. Endet sie hell (index, reservieren, kontakt), bleibt der Footer blau. So entsteht am Seitenende immer ein Farbwechsel, ohne dass etwas dazwischengeschoben werden muss. ~ statt +: zwischen main und footer liegt