/* -------------------------------------------------------------------------- nouri. Spezial V3.3 Eigenständige Umsetzung auf Basis der Coffee-Template-Struktur. Konzept, Frontend & Code: WebCore Dresden Keine Bootstrap-/jQuery-Abhängigkeit, keine externen Fonts, Mobile First. -------------------------------------------------------------------------- */ :root{ --green:#2b371e;--green-deep:#10170c;--sand:#d2b88d;--gold:#b88c2b;--cream:#f4ecd9;--white:#fffaf0;--muted:#b8ad96;--text:#f8f0df;--ink:#213016;--line:rgba(210,184,141,.22);--shadow:0 22px 70px rgba(0,0,0,.27);--container:min(1120px,calc(100% - 32px));--serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } *{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;min-width:320px;background:var(--green-deep);color:var(--text);font-family:var(--sans);line-height:1.65;text-rendering:optimizeLegibility;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 20% 10%,rgba(210,184,141,.08),transparent 28%),linear-gradient(rgba(16,23,12,.88),rgba(16,23,12,.92)),url('../img/template-texture.jpg') center/420px auto repeat}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.container{width:var(--container);margin-inline:auto}.skip-link{position:fixed;left:16px;top:-70px;z-index:200;background:var(--gold);color:var(--green);padding:10px 16px;border-radius:999px;font-weight:900}.skip-link:focus{top:14px}.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background .25s ease,box-shadow .25s ease,padding .25s ease}.site-header.is-scrolled,.site-header.is-open{background:rgba(16,23,12,.93);box-shadow:0 14px 44px rgba(0,0,0,.24);backdrop-filter:blur(14px)}.site-header.is-scrolled{padding:10px 0}.nav-shell{display:flex;align-items:center;gap:24px}.brand{display:inline-flex;align-items:center;gap:13px;color:#fff;font-weight:950;letter-spacing:.02em;min-width:0}.brand img{width:60px;height:60px;object-fit:contain;border-radius:50%;background:var(--green);padding:4px;border:4px solid var(--sand);box-shadow:0 0 0 2px rgba(255,250,240,.28),0 12px 30px rgba(0,0,0,.24)}.brand span{display:block;font-family:var(--serif);font-size:1.65rem;line-height:1;color:var(--sand)}.brand small{display:block;margin-top:5px;font-family:var(--sans);font-size:.74rem;font-weight:800;color:#fff;letter-spacing:.01em}.site-nav{margin-left:auto;display:flex;align-items:center;gap:4px}.site-nav a{display:inline-flex;align-items:center;min-height:42px;padding:10px 13px;border-radius:999px;font-size:.86rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#fff;transition:background .2s ease,color .2s ease,transform .2s ease}.site-nav a:hover,.site-nav a[aria-current="page"]{background:rgba(210,184,141,.14);color:var(--sand);transform:translateY(-1px)}.reservation-link{background:var(--gold)!important;color:var(--green)!important;box-shadow:0 12px 30px rgba(184,140,43,.22)}.menu-button{display:none;margin-left:auto;width:54px;height:54px;border:1px solid rgba(210,184,141,.35);border-radius:16px;background:var(--sand);color:var(--green);cursor:pointer;place-items:center}.menu-button span{display:block;width:23px;height:2px;background:currentColor;border-radius:4px;transition:transform .2s ease,opacity .2s ease}.menu-button em{position:absolute;clip:rect(0 0 0 0);white-space:nowrap}.menu-button.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-button.is-open span:nth-child(2){opacity:0}.menu-button.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Template-naher Hero-Slider */ .hero-slider{position:relative;min-height:100svh;overflow:hidden;background:#000}.slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s ease;background-image:linear-gradient(180deg,rgba(16,23,12,.34),rgba(16,23,12,.58)),var(--slide-image);background-position:center;background-size:cover}.slide::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(210,184,141,.06),transparent 31%),linear-gradient(90deg,rgba(16,23,12,.64),rgba(16,23,12,.22),rgba(16,23,12,.62))}.slide.is-active{opacity:1;visibility:visible}.slide-content{position:relative;z-index:1;text-align:center;max-width:880px;padding-top:110px}.script-label{display:block;margin-bottom:8px;font-family:var(--serif);font-size:clamp(2rem,5vw,3.6rem);font-style:italic;color:var(--gold);line-height:1}.slide h1,.page-hero h1{font-family:var(--serif);font-size:clamp(3rem,8vw,6.9rem);line-height:.95;letter-spacing:-.055em;margin:0 0 22px;color:#fff}.slide p,.page-hero p{max-width:680px;margin:0 auto 32px;color:#efe6d1;font-size:1.08rem}.button-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 24px;border-radius:0;border:1px solid transparent;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:950;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--gold);color:var(--green)}.button-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.52)}.button-outline:hover{background:#fff;color:var(--green)}.button-outline-gold{background:transparent;color:var(--gold);border-color:var(--gold)}.button-dark{background:var(--green);color:#fff}.slider-controls{position:absolute;z-index:2;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:10px}.dot{width:11px;height:11px;border-radius:50%;padding:0;border:1px solid rgba(255,255,255,.65);background:transparent;cursor:pointer}.dot.is-active{background:var(--gold);border-color:var(--gold)} /* Intro-Band wie im Coffee-Template: Info links, Buchung rechts */ .intro-band{display:grid;grid-template-columns:1.7fr 1fr;align-items:stretch;background:var(--green-deep)}.intro-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-left:max(16px,calc((100vw - 1120px)/2));background:#11180d}.intro-item{display:grid;align-content:center;gap:5px;min-height:144px;padding:26px;border-right:1px solid rgba(210,184,141,.14);min-width:0}.intro-item b{color:var(--gold);font-size:.83rem;text-transform:uppercase;letter-spacing:.12em}.intro-item span{font-size:.96rem;color:#fff;overflow-wrap:anywhere}.reservation-panel{padding:28px max(16px,calc((100vw - 1120px)/2)) 28px 30px;background:var(--gold);color:var(--green)}.reservation-panel h2{margin:0 0 14px;font-family:var(--serif);font-size:2rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-grid textarea{grid-column:1/-1;min-height:78px;resize:vertical}.form-grid input,.form-grid textarea,.contact-panel input,.contact-panel textarea{width:100%;border:0;border-bottom:1px solid rgba(43,55,30,.45);background:rgba(255,255,255,.22);padding:11px 12px;color:var(--green);outline:0}.form-grid input:focus,.form-grid textarea:focus,.contact-panel input:focus,.contact-panel textarea:focus{box-shadow:0 0 0 3px rgba(255,255,255,.18)}.form-grid .button{grid-column:1/-1;border-color:var(--green)} .story-section{display:grid;grid-template-columns:1fr 1fr;min-height:560px}.story-image{background-position:center;background-size:cover;min-height:420px}.story-copy{display:grid;align-items:center;padding:70px max(16px,calc((100vw - 1120px)/2)) 70px 0}.overlap-card{max-width:650px;margin-left:-78px;padding:50px;background:rgba(16,23,12,.88);box-shadow:var(--shadow);border:1px solid rgba(210,184,141,.18)}.overlap-card h2,.preview-copy h2,.section-heading h2,.catalog-heading h2{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.55rem);line-height:1.04;margin:0 0 22px;color:#fff;letter-spacing:-.035em}.overlap-card p,.preview-copy p,.section-heading p,.catalog-heading p{color:#d8cdb7;margin:0 0 16px}.service-section{background:var(--sand);color:var(--green);padding:78px 0}.three-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.service{text-align:center}.service span{display:grid;place-items:center;width:86px;height:86px;margin:0 auto 24px;border:1px solid var(--green);border-radius:50%;font-family:var(--serif);font-size:2rem}.service h3{font-size:1.1rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}.service p{margin:0;color:rgba(43,55,30,.74)} .section-space{padding:104px 0}.menu-preview-grid{display:grid;grid-template-columns:.85fr 1fr;gap:58px;align-items:center}.preview-copy{text-align:right}.preview-images{display:grid;grid-template-columns:1fr 1fr;gap:18px}.preview-img{display:block;min-height:210px;border:1px solid var(--line);background:rgba(210,184,141,.08);overflow:hidden}.preview-img img{width:100%;height:100%;object-fit:contain;transition:transform .42s ease}.preview-img:hover img{transform:scale(1.11)}.preview-img.offset{margin-top:36px}.number-band{position:relative;padding:92px 0;background-size:cover;background-position:center;background-attachment:fixed}.number-band::before{content:"";position:absolute;inset:0;background:rgba(16,23,12,.78)}.number-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.number-item{text-align:center}.number-item strong{display:block;font-family:var(--serif);font-size:3.2rem;color:var(--gold)}.number-item span{display:block;text-transform:uppercase;letter-spacing:.08em;font-weight:900;font-size:.78rem;color:#fff}.section-heading{text-align:center;max-width:760px;margin:0 auto 50px}.product-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.product{text-align:center;min-width:0}.product-image{display:grid;place-items:center;min-height:250px;margin-bottom:22px;background:var(--green-deep);border:1px solid rgba(210,184,141,.14);overflow:visible}.product-image img{max-height:260px;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.22));transition:transform .35s ease}.product:hover .product-image img{transform:scale(1.12)}.product h3{margin:0 0 10px;text-transform:uppercase;font-size:1rem;letter-spacing:.08em}.product p{margin:0 auto 12px;color:#cfc4ad;font-size:.94rem}.product strong{display:block;color:var(--gold);margin-bottom:15px}.mini-button{display:inline-flex;padding:9px 14px;border:1px solid var(--gold);color:var(--gold);text-transform:uppercase;font-size:.75rem;font-weight:900;letter-spacing:.08em}.mini-button:hover{background:var(--gold);color:var(--green)}.gallery-strip{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;background:var(--green)}.gallery-item{height:300px;border:0;padding:0;background:#000;overflow:visible;cursor:zoom-in}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .38s ease,box-shadow .38s ease;position:relative;z-index:1}.gallery-item:hover img,.gallery-item:focus-visible img,.gallery-item:active img{transform:scale(1.18);box-shadow:0 24px 70px rgba(0,0,0,.42);z-index:4}.tab-menu{background:rgba(210,184,141,.06)}.tab-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:42px}.tab-button{min-height:48px;padding:12px 22px;background:transparent;border:1px solid var(--gold);color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.tab-button.is-active{background:var(--gold);color:var(--green)}.tab-content{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.tab-content[hidden]{display:none}.tab-product{text-align:center}.tab-product a:first-child{display:block;color:inherit}.tab-product img{width:100%;height:280px;object-fit:contain;background:var(--green-deep);border:1px solid rgba(210,184,141,.14);border-radius:999px;margin-bottom:20px;transition:transform .35s ease,box-shadow .35s ease}.tab-product:hover img{transform:scale(1.06);box-shadow:0 22px 48px rgba(0,0,0,.24)}.tab-product h3{margin:0 0 8px;text-transform:uppercase;letter-spacing:.07em}.tab-product p{color:#cfc4ad}.tab-product strong{display:block;color:var(--gold);margin-bottom:15px}.tab-product .mini-button{margin-top:0}.reviews-section{position:relative;background-size:cover;background-position:center}.reviews-section::before{content:"";position:absolute;inset:0;background:rgba(16,23,12,.76)}.reviews-section>.container,.review-row{position:relative}.light-heading h2,.light-heading p{color:#fff}.review-row{display:grid;grid-template-columns:repeat(4,1fr);align-items:end}.review{min-height:240px;padding:34px 28px;background:rgba(184,140,43,.86);color:var(--green)}.review.highlight{background:rgba(210,184,141,.94)}.review p{margin:0 0 18px;font-size:1rem;font-weight:700}.review b{display:block;color:#fff;letter-spacing:.08em}.review span{font-size:.8rem;text-transform:uppercase;font-weight:900}.event-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.event-card{min-width:0;display:flex;flex-direction:column}.event-card>div{display:flex;flex-direction:column;flex:1}.event-image{display:block;height:260px;background-size:cover;background-position:center;margin-bottom:20px}.event-card time{color:var(--gold);font-size:.78rem;text-transform:uppercase;font-weight:900;letter-spacing:.1em}.event-card h3{font-size:1.3rem;margin:8px 0 10px}.event-card p{color:#cfc4ad}.event-card a:last-child{align-self:flex-start;margin-top:auto;color:var(--gold);font-weight:900;border-bottom:1px solid currentColor}.contact-section{display:grid;grid-template-columns:1fr 1fr;background:#0b1008}.map-panel{min-height:520px;display:grid;place-items:center;background:linear-gradient(rgba(43,55,30,.86),rgba(43,55,30,.86)),url('../img/outside.webp') center/cover;color:var(--sand);font-family:var(--serif);font-size:2rem;text-align:center}.contact-panel{padding:70px max(16px,calc((100vw - 1120px)/2)) 70px 52px}.contact-panel h2{font-family:var(--serif);font-size:clamp(2.15rem,4.2vw,3rem);margin:0 0 12px}.contact-panel p{color:#d8cdb7}.contact-panel{display:grid;gap:14px}.contact-panel input,.contact-panel textarea{background:transparent;border-color:rgba(210,184,141,.38);color:#fff}.contact-panel textarea{min-height:116px;resize:vertical}.site-footer{padding:76px 0 26px;background:#0a0f07;color:#fff}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr .7fr .7fr;gap:48px}.footer-col h3{margin:0 0 18px;color:var(--sand);font-size:.96rem}.footer-col p{color:#d6cbb6;margin:0}.footer-col a:not(.brand){display:block;color:#d6cbb6;margin:7px 0}.footer-col a:hover{color:var(--sand)}.footer-brand{align-items:flex-start;margin-bottom:16px}.copyright{text-align:center;margin:48px 0 0;color:#9d927c;font-size:.9rem}.scroll-top{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;justify-content:center;gap:8px;width:48px;height:48px;padding:0;border:1px solid rgba(210,184,141,.45);border-radius:999px;background:rgba(43,55,30,.96);color:var(--sand);box-shadow:0 16px 44px rgba(0,0,0,.22);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .22s ease,transform .22s ease,width .25s ease;cursor:pointer}.scroll-top.is-visible{opacity:1;pointer-events:auto;transform:none}.scroll-top:hover,.scroll-top.is-expanded{width:132px;background:var(--gold);color:var(--green)}.scroll-top em{font-style:normal;font-weight:900;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width .25s ease,opacity .2s ease}.scroll-top:hover em,.scroll-top.is-expanded em{max-width:90px;opacity:1}.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(0,0,0,.86);padding:24px}.lightbox[hidden]{display:none}.lightbox img{display:block;width:auto;height:auto;max-width:min(1040px,calc(100vw - 36px));max-height:calc(100svh - 96px);object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.55)}.lightbox button{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:48px;height:48px;padding:0;line-height:1;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:2rem;cursor:pointer}.page-hero{position:relative;min-height:620px;display:grid;place-items:center;background-size:cover;background-position:center;overflow:hidden}.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,23,12,.86),rgba(16,23,12,.58)),radial-gradient(circle at 78% 34%,rgba(210,184,141,.1),transparent 30%)}.page-hero-content{position:relative;text-align:center;padding:110px 0 68px}.category-bar{position:sticky;top:76px;z-index:60;background:rgba(16,23,12,.94);backdrop-filter:blur(12px);border-top:1px solid rgba(210,184,141,.12);border-bottom:1px solid rgba(210,184,141,.12)}.category-scroll{display:flex;gap:10px;overflow-x:auto;padding:12px 0;scrollbar-width:none}.category-scroll::-webkit-scrollbar{display:none}.category-scroll a{white-space:nowrap;padding:10px 16px;border:1px solid var(--gold);color:var(--gold);font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}.category-scroll a:hover{background:var(--gold);color:var(--green)}.catalog-list{display:grid;gap:36px}.catalog-category{display:grid;grid-template-columns:300px 1fr;gap:36px;padding:36px;border:1px solid rgba(210,184,141,.18);background:rgba(16,23,12,.52)}.catalog-category{scroll-margin-top:150px}.catalog-heading{position:sticky;top:145px;align-self:start}.dish-list{display:grid;gap:12px}.dish{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;padding:20px 0;border-bottom:1px solid rgba(210,184,141,.16)}.dish h3{margin:0 0 7px;font-size:1.05rem;text-transform:uppercase;letter-spacing:.07em}.dish p{margin:0;color:#cfc4ad}.dish strong{white-space:nowrap;color:var(--gold);font-size:1rem}.legal-page{padding:120px 0;color:#fff}.legal-page h1{font-family:var(--serif);font-size:clamp(2.35rem,5vw,4rem);line-height:1.04;letter-spacing:-.035em}.legal-page a:not(.button-primary){color:var(--gold)}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible,.reveal-on-load{opacity:1;transform:none} @media (max-width:1080px){.intro-band,.story-section,.menu-preview-grid,.contact-section{grid-template-columns:1fr}.intro-info{padding-left:16px}.reservation-panel{padding:30px 16px}.story-copy{padding:0 16px 70px}.overlap-card{margin:-90px auto 0}.preview-copy{text-align:center}.number-grid,.product-row,.review-row{grid-template-columns:repeat(2,1fr)}.event-cards,.tab-content{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.catalog-category{grid-template-columns:1fr}.catalog-heading{position:static}.contact-panel{padding:54px 16px}} @media (max-width:760px){:root{--container:calc(100% - 28px)}.site-header{padding:10px 0}.nav-shell{position:relative;display:flex;flex-wrap:wrap;background:rgba(16,23,12,.96);border:1px solid rgba(210,184,141,.18);border-radius:0 0 22px 22px;padding:10px 12px}.brand img{width:52px;height:52px}.brand span{font-size:1.34rem}.brand small{display:none}.menu-button{display:grid}.site-nav{flex:0 0 100%;display:grid;grid-template-columns:1fr;gap:8px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .28s ease,opacity .22s ease,padding .22s ease}.site-nav.is-open{max-height:520px;opacity:1;pointer-events:auto;padding-top:12px}.site-nav a{border:1px solid rgba(210,184,141,.13);background:rgba(255,255,255,.05);justify-content:space-between;border-radius:14px}.hero-slider{min-height:100svh}.slide{background-position:center}.slide::after{background:linear-gradient(180deg,rgba(16,23,12,.62),rgba(16,23,12,.74)),linear-gradient(90deg,rgba(16,23,12,.58),rgba(16,23,12,.18),rgba(16,23,12,.58))}.slide-content{padding-top:120px}.script-label{font-size:2.15rem}.slide h1,.page-hero h1{font-size:clamp(3rem,13vw,4.5rem)}.page-hero h1{font-size:clamp(2.15rem,9.4vw,3.25rem);line-height:1.02;letter-spacing:-.035em}.slide p,.page-hero p{font-size:1rem}.button-row{display:grid;grid-template-columns:1fr;gap:10px}.button{width:100%;min-height:52px}.intro-band{display:block}.intro-info{grid-template-columns:1fr;padding:0}.intro-item{min-height:104px;padding:22px 24px;border-right:0;border-bottom:1px solid rgba(210,184,141,.14)}.form-grid{grid-template-columns:1fr}.story-section{display:block}.story-image{min-height:360px}.overlap-card{margin:-72px 14px 0;padding:34px 26px}.three-columns,.preview-images,.number-grid,.product-row,.gallery-strip,.review-row,.event-cards,.tab-content,.footer-grid{grid-template-columns:1fr}.service-section{padding:58px 0}.section-space{padding:72px 0}.preview-images{gap:12px}.preview-img,.preview-img.offset{margin:0;min-height:230px}.number-band{background-attachment:scroll}.gallery-item{height:230px}.review{min-height:190px}.event-image{height:230px}.tab-buttons{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}.tab-button{white-space:nowrap}.page-hero{min-height:560px}.page-hero-content{padding-bottom:54px}.category-bar{top:74px}.category-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px;overflow:visible;padding:12px 14px}.category-scroll a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:10px 8px;white-space:normal;text-align:center;line-height:1.15}.catalog-category{padding:26px 20px}.dish{grid-template-columns:1fr;gap:10px}.dish strong{justify-self:start}.map-panel{min-height:300px;font-size:1.5rem}.site-footer{padding-top:54px}.footer-grid{gap:24px}.scroll-top.is-expanded{width:118px}} @media (max-width:420px){.slide h1{font-size:clamp(2.85rem,14vw,3.8rem)}.page-hero h1{font-size:clamp(1.9rem,8.8vw,2.45rem);line-height:1.04}.category-scroll{gap:8px;padding-inline:10px}.category-scroll a{font-size:.68rem;letter-spacing:.065em;padding-inline:6px}.overlap-card{padding:28px 22px}.product-image{min-height:220px}.product-image img{max-height:220px}.gallery-item{height:205px}.footer-brand{align-items:center}.footer-brand img{width:62px;height:62px}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.number-band{background-attachment:scroll}.reveal{opacity:1;transform:none}} /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Responsive-Framework-Feinschliff Konzept, Frontend & Code: WebCore Dresden Ziel: keine horizontale Überbreite, sauberer Mobile-Header, zentrierte Lightbox/Scroll-Controls, stabilere Unterseiten und hochwertiger Logo-Ring. -------------------------------------------------------------------------- */ html, body{ width:100%; max-width:100%; overflow-x:hidden; } body.menu-open{ overflow-x:hidden; } main, section, header, footer, .container, .nav-shell, .page-hero-content, .catalog-category, .dish, .button-row, .footer-grid{ min-width:0; } h1,h2,h3{ overflow-wrap:normal; word-break:normal; hyphens:none; text-wrap:balance; } p,a,strong,span{ overflow-wrap:break-word; } .slide{ background-color:var(--green-deep); } .slide-content{ filter:drop-shadow(0 16px 34px rgba(0,0,0,.2)); } .story-image{ background-position:center; image-rendering:auto; } .brand img{ image-rendering:auto; } .menu-button{ position:relative; overflow:hidden; } .menu-button span{ position:absolute; left:50%; top:50%; margin-left:-11.5px; } .menu-button span:nth-child(1){transform:translateY(-8px)} .menu-button span:nth-child(2){transform:translateY(0)} .menu-button span:nth-child(3){transform:translateY(8px)} .menu-button.is-open span:nth-child(1){transform:translateY(0) rotate(45deg)} .menu-button.is-open span:nth-child(2){opacity:0} .menu-button.is-open span:nth-child(3){transform:translateY(0) rotate(-45deg)} .scroll-top span{ display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; line-height:1; font-size:1.2rem; font-weight:950; } .scroll-top:hover, .scroll-top.is-expanded{ justify-content:flex-start; padding-left:0; padding-right:14px; } .lightbox{ overflow:hidden; } .lightbox button:hover{ background:var(--gold); color:var(--green); border-color:var(--gold); } @media (min-width:761px){ .site-header .container{ width:var(--container); } .slide:first-child{ background-position:center 47%; } .footer-grid{ align-items:start; } } @media (max-width:760px){ :root{ --container:calc(100% - 28px); } .site-header{ padding:0; } .site-header .container{ width:100%; } .nav-shell{ width:100%; border-left:0; border-right:0; border-top:0; border-radius:0 0 24px 24px; padding:10px 14px; } .brand{ max-width:calc(100% - 70px); } .brand img{ width:54px; height:54px; padding:4px; border-width:4px; } .brand span{ font-size:1.32rem; } .menu-button{ width:52px; height:52px; border-radius:18px; flex:0 0 52px; } .site-nav{ width:100%; flex-basis:100%; } .site-nav.is-open{ padding-top:12px; max-height:560px; } .site-nav a{ min-height:46px; width:100%; } .slide{ background-position:center; } .slide::after{ background: linear-gradient(180deg,rgba(16,23,12,.62),rgba(16,23,12,.72)), linear-gradient(90deg,rgba(16,23,12,.54),rgba(16,23,12,.12),rgba(16,23,12,.54)); } .slide-content, .page-hero-content{ width:var(--container); max-width:100%; padding-top:118px; } .slide h1{ max-width:100%; font-size:clamp(2.75rem,12.4vw,4.25rem); } .page-hero h1{ max-width:100%; font-size:clamp(2.2rem,9.4vw,3.25rem); line-height:1.02; letter-spacing:-.035em; } .slide p, .page-hero p{ max-width:34rem; } .button-row{ width:100%; max-width:100%; justify-items:stretch; } .button{ width:100%; max-width:100%; padding-inline:14px; white-space:normal; text-align:center; } .page-hero{ min-height:560px; overflow:hidden; } .page-hero::before{ background: linear-gradient(180deg,rgba(16,23,12,.68),rgba(16,23,12,.78)), radial-gradient(circle at 70% 30%,rgba(210,184,141,.08),transparent 32%); } .category-bar{ top:74px; overflow:hidden; } .category-bar .container{ width:100%; } .category-scroll{ width:100%; max-width:100%; padding-inline:14px; } .catalog-list, .catalog-category, .dish-list{ width:100%; max-width:100%; } .catalog-category{ padding:24px 18px; overflow:hidden; } .dish{ width:100%; } .dish strong{ max-width:100%; } .gallery-strip{ overflow:hidden; } .gallery-item{ overflow:hidden; } .gallery-item img{ transform-origin:center; } .gallery-item:hover img, .gallery-item:focus-visible img, .gallery-item:active img{ transform:scale(1.08); } .lightbox{ padding:64px 14px 22px; } .lightbox img{ max-width:calc(100vw - 28px); max-height:calc(100svh - 104px); } .lightbox button{ top:10px; right:10px; width:46px; height:46px; font-size:1.85rem; } .site-footer{ padding:44px 0 22px; } .footer-grid{ grid-template-columns:1fr; gap:14px; } .footer-col{ padding:20px; border:1px solid rgba(210,184,141,.16); border-radius:22px; background:rgba(255,255,255,.045); } .footer-col.footer-about{ padding:22px; } .footer-brand{ align-items:center; } .footer-brand img{ width:68px; height:68px; } .footer-col h3{ margin-bottom:10px; } .footer-col a:not(.brand){ display:inline-flex; margin:6px 8px 0 0; padding:7px 10px; border-radius:999px; background:rgba(210,184,141,.08); } .copyright{ margin-top:24px; } .scroll-top{ right:12px; bottom:12px; width:48px; height:48px; } .scroll-top.is-expanded{ width:124px; } } @media (max-width:420px){ .nav-shell{ padding-inline:12px; } .brand img{ width:52px; height:52px; } .slide h1{ font-size:clamp(2.55rem,12vw,3.7rem); } .page-hero h1{ font-size:clamp(1.95rem,8.6vw,2.65rem); line-height:1.04; } .page-hero-content{ padding-top:112px; } .catalog-category{ padding:22px 16px; } .footer-col{ padding:18px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Footer & Nach-oben-Button Konzept, Frontend & Code: WebCore Dresden Ziel: sichtbarer, sauber zentrierter Scroll-Button und hochwertigerer Mobile-Footer mit wärmerer Farblogik. -------------------------------------------------------------------------- */ /* Scroll-to-top: Kreis bleibt immer vollständig im Viewport. Der Pfeil sitzt als eigenes Grid-Element exakt mittig, statt durch Flex/Label verrutscht zu werden. */ .scroll-top{ right:18px; bottom:18px; display:grid; grid-template-columns:48px 0; place-items:center; gap:0; width:50px; height:50px; padding:0; overflow:hidden; border-radius:999px; background:linear-gradient(145deg,rgba(43,55,30,.98),rgba(28,40,20,.98)); border:1px solid rgba(210,184,141,.55); box-shadow:0 14px 38px rgba(0,0,0,.28); } .scroll-top span{ display:grid; place-items:center; width:48px; height:48px; line-height:1; font-size:1.05rem; font-weight:950; transform:translateY(-1px); } .scroll-top em{ display:block; max-width:0; overflow:hidden; opacity:0; white-space:nowrap; } .scroll-top:hover, .scroll-top.is-expanded{ width:132px; grid-template-columns:48px 76px; padding:0 8px 0 0; background:linear-gradient(145deg,var(--gold),#d4aa43); color:var(--green); } .scroll-top:hover em, .scroll-top.is-expanded em{ max-width:76px; opacity:1; } /* Footer-Grundlook: mehr nouri-Wärme, weniger harte dunkle Blöcke. */ .site-footer{ background: radial-gradient(circle at 18% 0%,rgba(210,184,141,.11),transparent 30%), linear-gradient(180deg,#10170c 0%,#0a0f07 100%); } .footer-col{ min-width:0; } .footer-col h3{ color:#efd7a8; letter-spacing:.03em; } /* Mobile-Footer als bewusste Karten, nicht als gestapelte Textblöcke. */ @media (max-width:760px){ .site-footer{ padding:42px 0 26px; } .footer-grid{ gap:13px; } .footer-col{ position:relative; overflow:hidden; padding:20px; border:1px solid rgba(210,184,141,.22); border-radius:24px; background: linear-gradient(145deg,rgba(251,247,238,.075),rgba(210,184,141,.035)), rgba(16,23,12,.88); box-shadow:0 16px 40px rgba(0,0,0,.16); } .footer-col::after{ content:""; position:absolute; right:-44px; bottom:-54px; width:128px; height:128px; border-radius:50%; background:rgba(210,184,141,.055); pointer-events:none; } .footer-col.footer-about{ padding:22px 20px; background: linear-gradient(135deg,rgba(210,184,141,.12),rgba(255,255,255,.045)), rgba(16,23,12,.94); } .footer-brand{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } .footer-brand img{ width:68px; height:68px; padding:4px; border:4px solid var(--sand); border-radius:50%; background:var(--green); box-shadow:0 0 0 2px rgba(255,250,240,.18),0 12px 26px rgba(0,0,0,.24); } .footer-brand span{ color:var(--sand); font-size:1.46rem; } .footer-brand small{ color:#fff4dd; } .footer-col p{ color:#f0e4cb; line-height:1.58; } .footer-col h3{ margin-bottom:12px; color:#f4d79d; font-size:.98rem; } .footer-col a:not(.brand){ position:relative; z-index:1; display:inline-flex; align-items:center; min-height:36px; margin:5px 7px 0 0; padding:8px 11px; border:1px solid rgba(210,184,141,.13); border-radius:999px; background:rgba(210,184,141,.105); color:#f6ead1; font-size:.92rem; } .footer-col a:not(.brand):hover{ background:var(--gold); color:var(--green); } .copyright{ margin-top:22px; padding-inline:18px; color:#bdae90; line-height:1.45; } .scroll-top{ right:14px; bottom:max(18px, env(safe-area-inset-bottom)); width:50px; height:50px; grid-template-columns:48px 0; } .scroll-top.is-expanded{ width:122px; grid-template-columns:48px 66px; } .scroll-top em{ font-size:.8rem; } } @media (max-width:420px){ .site-footer .container{ width:calc(100% - 26px); } .footer-col{ padding:18px; border-radius:22px; } .footer-col.footer-about{ padding:20px 18px; } .scroll-top{ right:12px; bottom:max(16px, env(safe-area-inset-bottom)); } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Hero-Bilder & Nach-oben-Button Konzept, Frontend & Code: WebCore Dresden Ziel: Hero-Bilder auf Desktop zuverlässig sichtbar und Scroll-Button nicht abgeschnitten. -------------------------------------------------------------------------- */ .slide{ isolation:isolate; } .slide-photo{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.82; filter:saturate(1.04) contrast(1.03) brightness(.82); transform:scale(1.01); } .slide:first-child .slide-photo{object-position:center 52%} .slide:nth-child(2) .slide-photo{object-position:center 56%} .slide:nth-child(3) .slide-photo{object-position:center 50%} .slide::after{ background: radial-gradient(circle at 50% 42%,rgba(210,184,141,.035),transparent 34%), linear-gradient(90deg,rgba(16,23,12,.58),rgba(16,23,12,.20),rgba(16,23,12,.58)); } @media (min-width:761px){ .hero-slider .slide{ background-image:none!important; } .slide-content{ text-shadow:0 8px 34px rgba(0,0,0,.24); } .slide p{ text-shadow:0 4px 20px rgba(0,0,0,.26); } } .scroll-top:hover, .scroll-top.is-expanded{ width:154px; grid-template-columns:48px 90px; } .scroll-top:hover em, .scroll-top.is-expanded em{ max-width:90px; opacity:1; } @media (max-width:760px){ .slide-photo{ opacity:.78; filter:saturate(1.04) contrast(1.03) brightness(.78); } .slide::after{ background: linear-gradient(180deg,rgba(16,23,12,.58),rgba(16,23,12,.72)), linear-gradient(90deg,rgba(16,23,12,.48),rgba(16,23,12,.10),rgba(16,23,12,.48)); } .scroll-top.is-expanded{ width:132px; grid-template-columns:48px 78px; } .scroll-top.is-expanded em{ max-width:78px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Mobile-Hero-Bilder Konzept, Frontend & Code: WebCore Dresden Ziel: Hero-Bilder mobil als erkennbare Bildfläche statt übergrüntem Vollbild- Crop. Text bleibt lesbar, Bildmotiv bleibt sichtbar. -------------------------------------------------------------------------- */ @media (max-width:760px){ .hero-slider{ min-height:100svh; background: radial-gradient(circle at 50% 24%,rgba(210,184,141,.12),transparent 34%), linear-gradient(180deg,#10170c 0%,#16200f 100%); } .slide{ display:block; padding-top:96px; background-image:none!important; overflow:hidden; } /* Das Bild wird mobil bewusst zur großen Mood-Karte verkleinert. Dadurch ist das Motiv erkennbar und nicht mehr nur ein dunkelgrüner Hintergrund-Crop. */ .slide-photo{ inset:96px 14px auto 14px; width:calc(100% - 28px); height:46svh; min-height:285px; max-height:390px; border-radius:30px; object-fit:cover; object-position:center; opacity:.96; filter:saturate(1.04) contrast(1.04) brightness(.96); transform:none; box-shadow:0 22px 58px rgba(0,0,0,.34); } .slide:first-child .slide-photo{ object-position:center 45%; } .slide:nth-child(2) .slide-photo{ object-position:center 46%; } .slide:nth-child(3) .slide-photo{ object-position:center 42%; } .slide::after{ inset:96px 14px auto 14px; width:calc(100% - 28px); height:46svh; min-height:285px; max-height:390px; border-radius:30px; background: linear-gradient(180deg, rgba(16,23,12,.06) 0%, rgba(16,23,12,.10) 38%, rgba(16,23,12,.38) 73%, rgba(16,23,12,.58) 100%); pointer-events:none; } .slide-content{ position:relative; z-index:2; width:var(--container); max-width:100%; margin-inline:auto; padding-top:calc(96px + min(46svh,390px) - 148px); text-align:center; filter:none; } .script-label{ margin-bottom:5px; color:#d2a23a; text-shadow:0 4px 18px rgba(0,0,0,.38); } .slide h1{ margin-bottom:18px; text-shadow:0 5px 28px rgba(0,0,0,.46); } .slide p{ max-width:32rem; margin-bottom:24px; color:#fff5df; text-shadow:0 4px 18px rgba(0,0,0,.48); } .slider-controls{ bottom:26px; } } @media (max-width:420px){ .slide-photo, .slide::after{ inset-inline:12px; width:calc(100% - 24px); height:44svh; min-height:275px; border-radius:27px; } .slide-content{ padding-top:calc(96px + min(44svh,370px) - 138px); } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Mobile-Hero wieder vollflächig, saubere Typografie, Header Scroll-Logik Konzept, Frontend & Code: WebCore Dresden Ziel: volle Hero-Bilder mit leichtem Grüntouch, keine hässlichen Wortumbrüche, keine Button-Überlagerung, Header versteckt sich beim Runterscrollen. -------------------------------------------------------------------------- */ .site-header{ will-change:transform; } .site-header.is-hidden{ transform:translateY(-115%); } @media (max-width:760px){ /* Header: keine abgerundeten Ecken, volle Breite, wie ein echtes App-/Website-Panel. */ .nav-shell{ border-radius:0; } /* Mobile-Hero zurück als vollflächige Bildbühne. Kein Karten-Crop mehr. */ .hero-slider{ min-height:100svh; background:var(--green-deep); } .slide{ display:grid; place-items:center; min-height:100svh; padding:0; background-image:none!important; } .slide-photo{ inset:0; width:100%; height:100%; min-height:0; max-height:none; border-radius:0; object-fit:cover; object-position:center; opacity:.92; filter:saturate(1.02) contrast(1.03) brightness(.84); transform:scale(1.015); box-shadow:none; } .slide:first-child .slide-photo{ object-position:center 47%; } .slide:nth-child(2) .slide-photo{ object-position:52% 45%; } .slide:nth-child(3) .slide-photo{ object-position:center 45%; } .slide::after{ inset:0; width:100%; height:100%; min-height:0; max-height:none; border-radius:0; background: linear-gradient(180deg, rgba(16,23,12,.54) 0%, rgba(16,23,12,.30) 24%, rgba(16,23,12,.26) 46%, rgba(16,23,12,.58) 74%, rgba(16,23,12,.74) 100%), linear-gradient(90deg, rgba(16,23,12,.44) 0%, rgba(16,23,12,.16) 48%, rgba(16,23,12,.44) 100%); } /* Content bekommt eine saubere vertikale Zone. Buttons liegen nicht mehr über den Slider-Dots und die Headline darf nicht einzelne Buchstaben umbrechen. */ .slide-content{ position:relative; z-index:2; width:var(--container); max-width:100%; margin-inline:auto; padding-top:118px; padding-bottom:86px; text-align:center; filter:none; } .script-label{ margin-bottom:8px; font-size:clamp(1.9rem,8vw,2.75rem); line-height:1; } .slide h1{ max-width:9.8ch; margin:0 auto 18px; font-size:clamp(2.85rem,11.2vw,4.35rem); line-height:.94; letter-spacing:-.048em; text-wrap:balance; overflow-wrap:normal; word-break:normal; hyphens:none; } .page-hero h1{ max-width:12.5ch; margin:0 auto 18px; font-size:clamp(2.15rem,8.8vw,3.25rem); line-height:1.02; letter-spacing:-.035em; text-wrap:balance; overflow-wrap:normal; word-break:normal; hyphens:none; } .slide p{ max-width:31rem; margin:0 auto 24px; line-height:1.55; } .button-row{ gap:9px; margin-top:0; } .button{ min-height:50px; } .slider-controls{ bottom:25px; } } @media (max-width:420px){ .slide-content{ padding-top:112px; padding-bottom:82px; } .slide h1{ max-width:9.2ch; font-size:clamp(2.55rem,10.8vw,3.75rem); } .page-hero h1{ max-width:12.5ch; font-size:clamp(1.9rem,8.4vw,2.55rem); line-height:1.04; } .slide p{ font-size:.96rem; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Mobile-Menüpanel Konzept, Frontend & Code: WebCore Dresden Ziel: einheitliche Header-Höhe, saubere Anordnung, kein Springen beim Öffnen und Schließen, weichere Scroll-/Menüanimation. -------------------------------------------------------------------------- */ .site-header{ transition: transform .38s cubic-bezier(.22,.61,.36,1), background .28s ease, box-shadow .28s ease, padding .28s ease; } @media (max-width:760px){ .site-header{ padding:0; background:transparent; } .site-header.is-scrolled, .site-header.is-open{ padding:0; background:transparent; box-shadow:none; backdrop-filter:none; } /* Das Menüpanel hat geschlossen und geöffnet dieselbe obere Kopfhöhe. Dadurch springt nichts und Logo/Button stehen immer sauber auf einer Linie. */ .nav-shell{ display:grid; grid-template-columns:minmax(0,1fr) 54px; align-items:center; column-gap:14px; row-gap:0; width:100%; min-height:88px; padding:14px 14px; border:0; border-bottom:1px solid rgba(210,184,141,.18); border-radius:0; background:rgba(16,23,12,.965); box-shadow:0 12px 34px rgba(0,0,0,.22); transition: min-height .32s cubic-bezier(.22,.61,.36,1), padding .32s cubic-bezier(.22,.61,.36,1), background .28s ease, box-shadow .28s ease; } .site-header.is-open .nav-shell{ min-height:88px; padding-bottom:14px; box-shadow:0 18px 48px rgba(0,0,0,.32); } .brand{ min-height:60px; max-width:100%; display:flex; align-items:center; gap:12px; } .brand img{ flex:0 0 54px; width:54px; height:54px; } .brand span{ min-width:0; line-height:1; } .menu-button{ justify-self:end; align-self:center; width:54px; height:54px; flex:0 0 54px; border-radius:16px; transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; } .menu-button:hover, .menu-button:focus-visible{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.2); } .menu-button.is-open{ background:var(--gold); color:var(--green); } /* Das Dropdown ist Teil des Panels, nicht ein Fremdkörper. Grid-Template-Rows animiert geschmeidiger als max-height-Sprünge. */ .site-nav{ grid-column:1 / -1; width:100%; display:grid; grid-template-rows:0fr; gap:0; margin:0; padding:0; overflow:hidden; opacity:0; transform:translateY(-8px); pointer-events:none; transition: grid-template-rows .36s cubic-bezier(.22,.61,.36,1), opacity .24s ease, transform .36s cubic-bezier(.22,.61,.36,1), padding-top .36s cubic-bezier(.22,.61,.36,1), gap .36s cubic-bezier(.22,.61,.36,1); } .site-nav::before{ content:""; grid-row:1; min-height:0; } .site-nav.is-open{ grid-template-rows:1fr; gap:8px; padding-top:14px; opacity:1; transform:none; pointer-events:auto; } .site-nav a{ width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-radius:0; border:1px solid rgba(210,184,141,.15); background:rgba(255,255,255,.045); color:#fff; transform:none; transition: background .2s ease, border-color .2s ease, color .2s ease, padding-left .2s ease; } .site-nav a::after{ content:"›"; color:var(--sand); opacity:.72; font-size:1.05rem; line-height:1; } .site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"]{ background:rgba(210,184,141,.13); border-color:rgba(210,184,141,.26); color:var(--sand); padding-left:18px; } .site-nav .reservation-link{ justify-content:center; margin-top:2px; min-height:50px; background:var(--gold)!important; color:var(--green)!important; border-color:var(--gold); } .site-nav .reservation-link::after{ content:""; } } @media (max-width:420px){ .nav-shell{ min-height:84px; padding:12px; grid-template-columns:minmax(0,1fr) 52px; } .brand{ min-height:58px; } .brand img{ flex-basis:52px; width:52px; height:52px; } .menu-button{ width:52px; height:52px; flex-basis:52px; } .site-nav a{ min-height:47px; } } @media (prefers-reduced-motion:reduce){ .site-header, .nav-shell, .site-nav, .site-nav a, .menu-button{ transition:none!important; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Live-/Safari-Absicherung Konzept, Frontend & Code: WebCore Dresden Ziel: Cache-Busting für echte iPhones + defensive Mobile-Navigation. -------------------------------------------------------------------------- */ @media (max-width:760px){ .site-header{ left:0; right:0; width:100%; } .site-nav:not(.is-open){ max-height:0!important; opacity:0!important; pointer-events:none!important; overflow:hidden!important; } .site-nav.is-open{ max-height:620px!important; } .menu-button{ appearance:none; -webkit-appearance:none; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Kontaktband & WhatsApp-Reservierung Konzept, Frontend & Code: WebCore Dresden Ziel: Info-Spalten gleich hoch, Telefon nicht mehr als Anruf-CTA, sondern Reservierung/Kontakt über WhatsApp. -------------------------------------------------------------------------- */ @media (min-width:1081px){ .intro-band{ align-items:stretch; } .intro-info{ align-items:stretch; } .intro-item{ min-height:154px; height:100%; align-content:start; padding-top:30px; padding-bottom:30px; } .intro-item b{ min-height:20px; display:flex; align-items:center; } .intro-item span{ display:block; max-width:28ch; line-height:1.45; } } .intro-item[href*="wa.me"] span::after{ content:" · WhatsApp"; color:var(--gold); font-weight:900; } @media (max-width:760px){ .intro-item{ min-height:108px; align-content:center; } .intro-item span{ line-height:1.45; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Kontaktband präzisiert Konzept, Frontend & Code: WebCore Dresden Ziel: WhatsApp statt Rufnummer-Optik, Adresse sauber zweizeilig, Öffnungszeiten strukturierter und ruhiger lesbar. -------------------------------------------------------------------------- */ .intro-whatsapp small{ display:block; margin-top:8px; color:rgba(255,255,255,.72); font-size:.78rem; font-weight:750; } .whatsapp-line{ display:flex!important; align-items:center; gap:10px; } .whatsapp-icon{ display:inline-grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--gold); color:var(--green); font-size:1rem; font-weight:950; line-height:1; } .intro-address span{ line-height:1.45; } .intro-hours dl{ display:grid; gap:7px; margin:0; } .intro-hours dl div{ display:grid; grid-template-columns:minmax(82px,.85fr) minmax(72px,1fr); gap:12px; align-items:baseline; } .intro-hours dt, .intro-hours dd{ margin:0; } .intro-hours dt{ color:#f5ddad; font-weight:900; } .intro-hours dd{ color:#fff; } .footer-hours{ display:grid; gap:8px; max-width:240px; } .footer-hours span{ display:grid; grid-template-columns:max-content max-content; justify-content:space-between; gap:22px; align-items:baseline; } .footer-hours b{ color:#f4d79d; font-weight:900; white-space:nowrap; } .footer-hours span:not(:last-child){ padding-bottom:6px; border-bottom:1px solid rgba(210,184,141,.11); } @media (min-width:1081px){ .intro-info{ grid-template-columns:repeat(3,minmax(0,1fr)); } .intro-item{ min-height:168px; } .intro-item span, .intro-hours dl{ max-width:none; } } @media (max-width:760px){ .intro-hours dl div{ grid-template-columns:92px 1fr; } .intro-whatsapp small{ margin-top:6px; } .footer-hours{ max-width:260px; } .footer-hours span{ grid-template-columns:max-content max-content; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — WhatsApp-Kontaktband repariert Konzept, Frontend & Code: WebCore Dresden Ziel: keine zerhackte WhatsApp-Dopplung, saubere kompakte Kontaktzeile. -------------------------------------------------------------------------- */ /* Alte automatische Dopplung deaktivieren. */ .intro-item[href*="wa.me"] span::after{ content:none!important; } .intro-whatsapp{ text-decoration:none; } .intro-whatsapp > b{ margin-bottom:14px; } .whatsapp-cardline{ display:grid!important; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:12px; width:100%; max-width:100%; } .whatsapp-icon{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--gold); color:var(--green); font-weight:950; font-size:1.05rem; line-height:1; box-shadow:0 8px 20px rgba(0,0,0,.18); } .whatsapp-copy{ display:grid!important; gap:3px; min-width:0; line-height:1.25; } .whatsapp-copy strong{ display:block; color:#fff; font-size:1rem; line-height:1.25; white-space:normal; } .whatsapp-copy small{ display:block; color:rgba(255,255,255,.72); font-size:.78rem; line-height:1.25; font-weight:750; } .intro-whatsapp:hover .whatsapp-icon{ background:#fff4dd; } @media (min-width:1081px){ .intro-whatsapp{ overflow:hidden; } .whatsapp-copy strong{ font-size:.98rem; } } @media (max-width:760px){ .whatsapp-cardline{ grid-template-columns:40px minmax(0,1fr); } .whatsapp-icon{ width:40px; height:40px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — WhatsApp-Icon ohne Rufnummer Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .intro-item[href*="wa.me"] span::after{ content:none!important; } .intro-whatsapp{ text-decoration:none; } .intro-whatsapp > b{ margin-bottom:12px; } .whatsapp-cardline{ display:grid!important; grid-template-columns:54px minmax(0,1fr)!important; align-items:center; gap:14px!important; width:100%; } .whatsapp-icon{ display:grid; place-items:center; width:54px!important; height:54px!important; border-radius:50%; background:var(--gold)!important; color:var(--green)!important; box-shadow:0 10px 24px rgba(0,0,0,.18); } .whatsapp-icon svg{ width:30px; height:30px; display:block; } .whatsapp-copy{ display:grid!important; min-width:0; align-self:center; } .whatsapp-copy strong{ display:none!important; } .whatsapp-copy small{ display:block; color:#f0e4cb!important; font-size:.82rem!important; line-height:1.35!important; font-weight:750; } @media (max-width:760px){ .whatsapp-cardline{ grid-template-columns:50px minmax(0,1fr)!important; gap:12px!important; } .whatsapp-icon{ width:50px!important; height:50px!important; } .whatsapp-icon svg{ width:28px; height:28px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Wix-Reservierung + originales WhatsApp-SVG Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .intro-item[href*="wa.me"] span::after{ content:none!important; } .intro-whatsapp{ text-decoration:none; } .whatsapp-cardline{ display:grid!important; grid-template-columns:54px minmax(0,1fr)!important; align-items:center; gap:14px!important; width:100%; } .whatsapp-icon{ display:grid!important; place-items:center; width:54px!important; height:54px!important; border-radius:50%; background:var(--gold)!important; color:var(--green)!important; box-shadow:0 10px 24px rgba(0,0,0,.18); overflow:hidden; } .whatsapp-icon img{ width:30px; height:30px; display:block; object-fit:contain; filter:brightness(0) saturate(100%) invert(17%) sepia(19%) saturate(1038%) hue-rotate(44deg) brightness(94%) contrast(90%); } .whatsapp-copy strong{ display:none!important; } .whatsapp-copy small{ display:block; color:#f0e4cb!important; font-size:.82rem!important; line-height:1.35!important; font-weight:750; } @media (max-width:760px){ .whatsapp-cardline{ grid-template-columns:50px minmax(0,1fr)!important; gap:12px!important; } .whatsapp-icon{ width:50px!important; height:50px!important; } .whatsapp-icon img{ width:28px; height:28px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Brand-Feinschliff Konzept, Frontend & Code: WebCore Dresden Ziel: nouri-Schriftzug und Claim wirken wie eine saubere Wortmarke: nouri. mittig über dem Claim, Claim in nouri-Farbe, ohne schwarze Kante. -------------------------------------------------------------------------- */ .brand{ align-items:center; } .brand span{ display:grid!important; justify-items:center; align-content:center; gap:4px; color:var(--sand)!important; text-align:center; line-height:.95!important; } .brand small{ display:block!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; color:var(--sand)!important; font-size:.68rem!important; font-weight:900!important; letter-spacing:.02em!important; line-height:1.05!important; text-align:center!important; text-shadow:0 2px 12px rgba(0,0,0,.28); } .footer-brand span{ justify-items:center; } .footer-brand small{ color:var(--sand)!important; } @media (max-width:760px){ .brand span{ font-size:1.38rem!important; } .brand small{ display:block!important; font-size:.58rem!important; max-width:110px; } } @media (max-width:420px){ .brand span{ font-size:1.28rem!important; } .brand small{ font-size:.55rem!important; max-width:104px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Service-Icons Konzept, Frontend & Code: WebCore Dresden Ziel: passende SVG-Icons statt 01/02/03, passend zu nouri-Farben. -------------------------------------------------------------------------- */ .service .service-icon{ display:grid; place-items:center; width:86px; height:86px; margin:0 auto 24px; border:1px solid var(--green); border-radius:50%; font-family:inherit; font-size:0; color:var(--green); background:rgba(255,250,240,.06); } .service-icon-svg{ width:43px; height:43px; display:block; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .service-icon-svg path:first-child{ fill:rgba(43,55,30,.055); } .service:hover .service-icon{ background:var(--green); color:var(--sand); transform:translateY(-3px); transition:background .2s ease,color .2s ease,transform .2s ease; } .service:hover .service-icon-svg path:first-child{ fill:rgba(210,184,141,.1); } @media (max-width:760px){ .service .service-icon{ width:78px; height:78px; margin-bottom:18px; } .service-icon-svg{ width:38px; height:38px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Trust-Band neutralisiert Konzept, Frontend & Code: WebCore Dresden Ziel: keine ungesicherten Aussagen über Teamgröße/Zukunft, sondern stabile Standort-, Bewertungs- und Markenbotschaften. -------------------------------------------------------------------------- */ .number-band{ background-position:center 42%; } .number-item strong{ font-size:clamp(2.45rem,5vw,3.45rem); } .number-item span{ max-width:16ch; margin-inline:auto; line-height:1.35; } @media (max-width:760px){ .number-grid{ gap:26px; } .number-item{ padding:6px 0; } .number-item strong{ font-size:2.65rem; } .number-item span{ max-width:20ch; } } /* -------------------------------------------------------------------------- nouri. Spezial V4.6 — Speisekartenbilder direkt aus Kundendaten Konzept, Frontend & Code: WebCore Dresden Ziel: neue Produktbilder ohne nachträgliches Freistellen oder harte Kanten. -------------------------------------------------------------------------- */ .product-image, .preview-img{ background:rgba(210,184,141,.045); border-color:rgba(210,184,141,.12); } .product-image img, .tab-product img{ filter:drop-shadow(0 22px 28px rgba(0,0,0,.22)); } .tab-product img{ background:rgba(210,184,141,.045); border-color:rgba(210,184,141,.12); } @media (max-width:760px){ .product-image{ min-height:230px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Speisekarte inhaltlich nach Kundenfeedback Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .catalog-category#cocktails{ border-color:rgba(184,140,43,.34); } .catalog-category#cocktails .catalog-heading p{ color:#e4d4b8; } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Kategorien mittig im Viewport Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .category-scroll{ justify-content:center; flex-wrap:wrap; } @media (max-width:900px){ .category-scroll{ justify-content:flex-start; flex-wrap:nowrap; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Kontaktbereich nach Originalseite Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .contact-hub-section{ display:grid; grid-template-columns:1fr 1fr; min-height:720px; background:var(--green); } .contact-hub{ display:grid; align-content:start; gap:24px; padding:70px max(16px,calc((100vw - 1120px)/2)) 70px 52px; } .contact-hub h2{ margin:0; font-family:var(--serif); font-size:clamp(2.6rem,5vw,4.3rem); line-height:1.02; } .contact-hub > p{ max-width:58ch; margin:0; color:#d8cdb7; font-size:1.06rem; line-height:1.75; } .contact-method-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .contact-method-card{ display:flex; gap:18px; align-items:flex-start; min-height:168px; padding:22px 22px 24px; border:1px solid rgba(210,184,141,.18); background:rgba(255,255,255,.025); color:#fff; text-decoration:none; transition:transform .22s ease,border-color .22s ease,background .22s ease; } .contact-method-card:hover{ transform:translateY(-3px); border-color:rgba(210,184,141,.42); background:rgba(255,255,255,.045); } .contact-method-card-static:hover{ transform:none; } .contact-icon{ display:grid; place-items:center; width:54px; height:54px; flex:0 0 54px; border-radius:50%; border:1px solid rgba(210,184,141,.38); color:var(--gold); background:rgba(210,184,141,.08); } .contact-icon svg{ width:24px; height:24px; display:block; } .contact-method-card h3{ margin:0 0 8px; font-size:1.2rem; color:#fff; } .contact-method-card p{ margin:0 0 12px; color:#d8cdb7; line-height:1.6; } .contact-method-card strong{ color:var(--sand); font-size:1rem; line-height:1.55; } .contact-social-links{ display:flex; flex-wrap:wrap; gap:12px; } .contact-social-links a{ display:inline-flex; align-items:center; gap:8px; color:var(--sand); text-decoration:none; border-bottom:1px solid rgba(210,184,141,.35); padding-bottom:2px; } .contact-note{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:4px; padding:22px 24px; border:1px solid rgba(210,184,141,.18); background:rgba(210,184,141,.05); } .contact-note-label{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border:1px solid rgba(210,184,141,.28); color:var(--gold); text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:700; } .contact-note p{ flex:1 1 360px; margin:0; color:#d8cdb7; line-height:1.7; } .contact-note .button{ flex:0 0 auto; } @media (max-width:1080px){ .contact-hub-section{ grid-template-columns:1fr; } .contact-hub{ padding:54px 16px; } .contact-method-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ .contact-method-grid{ grid-template-columns:1fr; } .contact-method-card{ min-height:auto; padding:18px; } .contact-note{ padding:18px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Kontakt nach Originalseite ohne Formular Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .contact-original-section{ display:block; background:#fffaf0; color:var(--green); } .contact-original-hero{ padding:92px 0 76px; background:var(--sand); text-align:center; } .contact-original-hero .script-label{ display:none; } .contact-original-hero h2{ margin:0 0 24px; color:var(--green); font-family:var(--sans); font-size:clamp(3rem,6vw,5.2rem); line-height:1; letter-spacing:-.04em; } .contact-original-hero p{ max-width:760px; margin:0 auto; color:rgba(43,55,30,.9); font-size:1.18rem; line-height:1.75; } .contact-original-body{ padding:86px 0 92px; background:#fff; } .contact-original-grid{ position:relative; display:grid; grid-template-columns:1px repeat(2,minmax(220px,320px)); justify-content:center; column-gap:96px; row-gap:66px; align-items:start; } .contact-original-divider{ grid-row:1 / span 2; width:1px; height:100%; min-height:430px; background:rgba(43,55,30,.42); } .contact-original-card{ display:grid; align-content:start; gap:14px; min-height:150px; color:var(--green); text-decoration:none; } .contact-original-card:hover h3, .contact-original-card:hover p{ color:var(--gold); } .contact-original-icon{ display:block; width:34px; height:34px; color:#050905; } .contact-original-icon svg{ width:34px; height:34px; display:block; } .contact-original-card h3{ margin:0; color:#0f180d; font-family:var(--sans); font-size:1.35rem; line-height:1.15; } .contact-original-card p{ margin:0; color:#30382b; font-size:1rem; line-height:1.7; } .contact-original-card p a, .contact-original-card[href] p{ color:#30382b; text-decoration:underline; text-underline-offset:3px; } .contact-original-socials{ display:flex; gap:18px; flex-wrap:wrap; } .contact-reservation-note{ display:flex; align-items:center; justify-content:center; gap:24px; max-width:930px; margin-top:72px; padding-top:34px; border-top:1px solid rgba(43,55,30,.18); text-align:left; } .contact-reservation-note p{ flex:1 1 420px; margin:0; color:rgba(43,55,30,.86); line-height:1.65; } .contact-reservation-note strong{ color:var(--green); } .contact-reservation-note .button{ flex:0 0 auto; } @media (max-width:900px){ .contact-original-hero{ padding:72px 0 56px; } .contact-original-body{ padding:60px 0 70px; } .contact-original-grid{ grid-template-columns:1fr 1fr; gap:44px 38px; } .contact-original-divider{ display:none; } .contact-reservation-note{ display:grid; text-align:center; } } @media (max-width:560px){ .contact-original-grid{ grid-template-columns:1fr; max-width:360px; } .contact-original-card{ min-height:auto; padding-bottom:28px; border-bottom:1px solid rgba(43,55,30,.12); } .contact-original-card:last-child{ border-bottom:0; } .contact-original-hero h2{ font-size:3rem; } .contact-original-hero p{ font-size:1.04rem; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Kontaktbereich final ersetzt Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .contact-original-section{ display:block!important; background:#fff; color:var(--green); } .contact-original-hero{ padding:92px 0 76px; background:var(--sand); text-align:center; } .contact-original-hero h2{ margin:0 0 24px; color:var(--green); font-family:var(--sans); font-size:clamp(3rem,6vw,5.2rem); line-height:1; letter-spacing:-.04em; } .contact-original-hero p{ max-width:760px; margin:0 auto; color:rgba(43,55,30,.9); font-size:1.18rem; line-height:1.75; } .contact-original-body{ padding:86px 0 92px; background:#fff; } .contact-original-grid{ position:relative; display:grid; grid-template-columns:1px repeat(2,minmax(220px,320px)); justify-content:center; column-gap:96px; row-gap:66px; align-items:start; } .contact-original-divider{ grid-row:1 / span 2; width:1px; height:100%; min-height:430px; background:rgba(43,55,30,.42); } .contact-original-card{ display:grid; align-content:start; gap:14px; min-height:150px; color:var(--green); text-decoration:none; background:transparent; border:0; } .contact-original-icon{ display:block; width:34px; height:34px; color:#050905; } .contact-original-icon svg{ width:34px; height:34px; display:block; } .contact-original-card h3{ margin:0; color:#0f180d; font-family:var(--sans); font-size:1.35rem; line-height:1.15; } .contact-original-card p{ margin:0; color:#30382b; font-size:1rem; line-height:1.7; } .contact-original-card[href] p, .contact-original-socials a{ color:#30382b; text-decoration:underline; text-underline-offset:3px; } .contact-original-socials{ display:flex; gap:18px; flex-wrap:wrap; } .contact-reservation-note{ display:flex; align-items:center; justify-content:center; gap:24px; max-width:930px; margin-top:72px; padding-top:34px; border-top:1px solid rgba(43,55,30,.18); text-align:left; } .contact-reservation-note p{ flex:1 1 420px; margin:0; color:rgba(43,55,30,.86); line-height:1.65; } @media (max-width:900px){ .contact-original-grid{ grid-template-columns:1fr 1fr; gap:44px 38px; } .contact-original-divider{ display:none; } .contact-reservation-note{ display:grid; text-align:center; } } @media (max-width:560px){ .contact-original-hero{ padding:72px 0 56px; } .contact-original-body{ padding:60px 0 70px; } .contact-original-grid{ grid-template-columns:1fr; max-width:360px; } .contact-original-card{ min-height:auto; padding-bottom:28px; border-bottom:1px solid rgba(43,55,30,.12); } .contact-original-card:last-child{ border-bottom:0; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.3 — Kontaktbereich im Template-Farbklang Konzept, Frontend & Code: WebCore Dresden Ziel: Originalseiten-Struktur ohne weißen Fremdkörper, aber in nouri/template- Farben mit dunklem Grund, Sandfläche und goldenen Akzenten. -------------------------------------------------------------------------- */ .contact-original-section{ display:block!important; background: radial-gradient(circle at 18% 0%,rgba(210,184,141,.08),transparent 34%), linear-gradient(180deg,#0b1008 0%,#10170c 100%)!important; color:#fff!important; } .contact-original-hero{ padding:92px 0 76px!important; background: linear-gradient(135deg,rgba(210,184,141,.92),rgba(188,150,73,.88))!important; text-align:center!important; color:var(--green)!important; } .contact-original-hero h2{ margin:0 0 24px!important; color:var(--green)!important; font-family:var(--sans)!important; font-size:clamp(3rem,6vw,5.2rem)!important; line-height:1!important; letter-spacing:-.04em!important; } .contact-original-hero p{ max-width:780px!important; margin:0 auto!important; color:rgba(43,55,30,.92)!important; font-size:1.18rem!important; line-height:1.75!important; } .contact-original-body{ padding:86px 0 92px!important; background: radial-gradient(circle at 72% 18%,rgba(210,184,141,.08),transparent 32%), linear-gradient(180deg,#10170c 0%,#0b1008 100%)!important; } .contact-original-grid{ position:relative!important; display:grid!important; grid-template-columns:1px repeat(2,minmax(220px,320px))!important; justify-content:center!important; column-gap:96px!important; row-gap:66px!important; align-items:start!important; } .contact-original-divider{ grid-row:1 / span 2!important; width:1px!important; height:100%!important; min-height:430px!important; background:linear-gradient(180deg,transparent,rgba(210,184,141,.42),transparent)!important; } .contact-original-card{ display:grid!important; align-content:start!important; gap:14px!important; min-height:150px!important; padding:0!important; color:#fff!important; text-decoration:none!important; background:transparent!important; border:0!important; } .contact-original-icon{ display:grid!important; place-items:center!important; width:42px!important; height:42px!important; border-radius:50%!important; color:var(--sand)!important; background:rgba(210,184,141,.08)!important; border:1px solid rgba(210,184,141,.22)!important; } .contact-original-icon svg{ width:23px!important; height:23px!important; display:block!important; } .contact-original-icon img{ width:20px!important; height:20px!important; display:block!important; } .contact-original-card h3{ margin:0!important; color:#fffaf0!important; font-family:var(--sans)!important; font-size:1.35rem!important; line-height:1.15!important; letter-spacing:-.02em!important; } .contact-original-card p{ margin:0!important; color:#d8cdb7!important; font-size:1rem!important; line-height:1.7!important; } .contact-original-card[href] p{ color:#d8cdb7!important; text-decoration:underline!important; text-underline-offset:3px!important; text-decoration-color:rgba(210,184,141,.45)!important; } .contact-original-card[href]:hover h3, .contact-original-card[href]:hover p{ color:var(--sand)!important; } .contact-original-socials{ display:flex!important; gap:12px!important; flex-wrap:wrap!important; } .contact-social-pill{ display:inline-flex!important; align-items:center!important; gap:10px!important; padding:8px 14px!important; border-radius:999px!important; background:rgba(210,184,141,.06)!important; border:1px solid rgba(210,184,141,.18)!important; color:#d8cdb7!important; text-decoration:none!important; transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease!important; } .contact-social-pill:hover{ background:rgba(210,184,141,.12)!important; border-color:rgba(210,184,141,.35)!important; color:var(--sand)!important; transform:translateY(-1px)!important; } .contact-social-pill span:last-child{ line-height:1.1!important; } .contact-social-pill-icon{ display:grid!important; place-items:center!important; width:24px!important; height:24px!important; flex:0 0 24px!important; } .contact-social-pill-icon img{ width:18px!important; height:18px!important; display:block!important; } .contact-reservation-note{ display:flex!important; align-items:center!important; justify-content:center!important; gap:24px!important; max-width:930px!important; margin-top:72px!important; padding-top:34px!important; border-top:1px solid rgba(210,184,141,.18)!important; text-align:left!important; } .contact-reservation-note p{ flex:1 1 420px!important; margin:0!important; color:#d8cdb7!important; line-height:1.65!important; } .contact-reservation-note strong{ color:var(--sand)!important; } @media (max-width:900px){ .contact-original-grid{ grid-template-columns:1fr 1fr!important; gap:44px 38px!important; } .contact-original-divider{ display:none!important; } .contact-reservation-note{ display:grid!important; text-align:center!important; } } @media (max-width:560px){ .contact-original-hero{ padding:72px 0 56px!important; } .contact-original-body{ padding:60px 0 70px!important; } .contact-original-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; max-width:460px!important; gap:28px 24px!important; } .contact-original-card{ min-height:auto!important; padding-bottom:24px!important; border-bottom:1px solid rgba(210,184,141,.13)!important; } .contact-original-card h3{ font-size:1.08rem!important; } .contact-original-card p{ font-size:.91rem!important; } .contact-original-socials{ gap:10px!important; } .contact-social-pill{ width:100%!important; justify-content:flex-start!important; } .contact-original-card:nth-last-child(-n+2){ border-bottom:0!important; } } @media (max-width:440px){ .contact-original-grid{ grid-template-columns:1fr!important; max-width:360px!important; } .contact-original-card:nth-last-child(-n+2){ border-bottom:1px solid rgba(210,184,141,.13)!important; } .contact-original-card:last-child{ border-bottom:0!important; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.4 — Reservierung, Speisekarte, Öffnungszeiten Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .opening-hours-list{ display:grid; gap:8px; margin:12px 0 0; } .opening-hours-list div{ display:grid; grid-template-columns:minmax(96px,1fr) auto; gap:18px; align-items:baseline; padding:7px 0; border-bottom:1px solid rgba(210,184,141,.13); } .opening-hours-list div:last-child{ border-bottom:0; } .opening-hours-list dt{ margin:0; color:#f5ddad; font-weight:950; } .opening-hours-list dd{ margin:0; color:#fff; text-align:right; font-weight:750; } .hours-subline{ display:block; color:#d8cdb7; font-size:.9rem; line-height:1.45; } .reservation-cta-panel{ display:grid; align-content:center; gap:16px; min-height:100%; padding-block:42px; } .reservation-cta-panel .eyebrow{ display:inline-flex; width:max-content; color:var(--green); font-size:.78rem; font-weight:950; text-transform:uppercase; letter-spacing:.14em; border-bottom:1px solid rgba(43,55,30,.35); padding-bottom:5px; } .reservation-cta-panel h2{ max-width:430px; margin:0; } .reservation-cta-panel p{ max-width:520px; margin:0 0 8px; color:rgba(43,55,30,.84); font-weight:750; line-height:1.65; } .reservation-cta-panel .button{ width:max-content; min-width:280px; justify-content:center; } .category-bar{ padding:12px 0; } .category-scroll{ justify-content:center; flex-wrap:wrap; gap:12px; padding:0; } .category-scroll a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 18px; } .catalog-category#cocktails, .catalog-category#fresh-fruity{ background:linear-gradient(135deg,rgba(184,140,43,.12),rgba(16,23,12,.52) 42%); } .dish-note{ padding-bottom:8px; border-bottom:0; } .dish-note h3{ color:var(--gold); } .dish-note p{ font-size:.92rem; } .dish-note strong:empty{ display:none; } .dish-addon{ margin-left:38px; padding-left:22px; border-left:2px solid rgba(210,184,141,.28); background:linear-gradient(90deg,rgba(210,184,141,.055),transparent 70%); } .dish-addon h3{ letter-spacing:.045em; } @media (max-width:1080px){ .reservation-cta-panel{ padding:34px 24px; } .reservation-cta-panel .button{ width:100%; min-width:0; } .opening-hours-list div{ grid-template-columns:minmax(104px,1fr) auto; } } @media (max-width:900px){ .category-bar{ padding:14px 0; } .category-scroll{ justify-content:flex-start; flex-wrap:nowrap; gap:10px; padding:0 18px 2px; scroll-padding-inline:18px; } .category-scroll a{ min-height:42px; padding:10px 15px; } } @media (max-width:760px){ .opening-hours-list div{ grid-template-columns:1fr auto; } .reservation-cta-panel{ padding:32px 24px 36px; } .reservation-cta-panel h2{ font-size:2.25rem; } .page-hero .button-row{ gap:12px; margin-bottom:18px; } .category-bar{ top:74px; } .category-scroll a{ font-size:.72rem; } .catalog-category{ padding:28px 20px; } .dish-addon{ margin-left:16px; padding-left:16px; } } @media (max-width:420px){ .category-scroll{ padding-inline:14px; } .category-scroll a{ min-height:40px; padding:9px 13px; } } /* -------------------------------------------------------------------------- nouri. Spezial V3.6 — Footer-Rhythmus, Kontaktlayout, korrekte Bewertungslinks Konzept, Frontend & Code: WebCore Dresden -------------------------------------------------------------------------- */ .footer-grid{ grid-template-columns:minmax(260px,1.15fr) minmax(250px,.95fr) minmax(150px,.55fr) minmax(150px,.55fr); align-items:start; } .footer-col{ min-width:0; } .footer-hours{ max-width:310px; } .footer-hours span{ grid-template-columns:minmax(112px,1fr) max-content; gap:18px; } .review, .number-item{ text-decoration:none; } .review:hover{ transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.24); } @media (max-width:1080px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-hours{ max-width:360px; } } @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } .footer-hours{ max-width:100%; } .footer-hours span{ justify-content:space-between; } } /* -------------------------------------------------------------------------- nouri. Spezial V4.0 — Inhaber-/Über-nouri.-Bereiche Konzept, Frontend & Code: WebCore Dresden Ziel: neue Fotostrecke sinnvoll nutzen, ohne Food-Bilder zu ersetzen. -------------------------------------------------------------------------- */ .owner-teaser{ background: radial-gradient(circle at 82% 12%,rgba(210,184,141,.1),transparent 32%), linear-gradient(180deg,#10170c 0%,#0b1008 100%); } .owner-teaser-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(280px,.72fr); gap:58px; align-items:center; } .owner-teaser-copy h2, .about-hero-copy h1, .about-intro-copy h2, .about-place-copy h2, .about-final-box h2{ margin:0 0 22px; font-family:var(--serif); font-size:clamp(2.6rem,5.8vw,5rem); line-height:1; letter-spacing:-.045em; color:#fff; } .owner-teaser-copy p, .about-hero-copy p, .about-intro-copy p, .about-place-copy p, .about-final-box p{ color:#d8cdb7; line-height:1.75; margin:0 0 16px; } .owner-button-row{ justify-content:flex-start; margin-top:26px; } .owner-teaser-media{ position:relative; min-width:0; } .owner-teaser-media img{ display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; object-position:center; border:1px solid rgba(210,184,141,.24); box-shadow:0 32px 80px rgba(0,0,0,.32); } .owner-teaser-media span{ position:absolute; left:22px; right:22px; bottom:22px; display:inline-flex; justify-content:center; padding:12px 18px; background:rgba(16,23,12,.84); border:1px solid rgba(210,184,141,.28); color:var(--sand); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:900; text-align:center; } .about-hero{ position:relative; padding:150px 0 92px; background: radial-gradient(circle at 18% 18%,rgba(210,184,141,.12),transparent 32%), linear-gradient(135deg,#10170c 0%,#0b1008 100%); overflow:hidden; } .about-hero::after{ content:""; position:absolute; right:-10vw; bottom:-18vw; width:44vw; height:44vw; border-radius:50%; background:rgba(210,184,141,.055); pointer-events:none; } .about-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.95fr) minmax(280px,.72fr); gap:58px; align-items:center; } .about-hero-copy p{ max-width:680px; font-size:1.08rem; } .about-hero-image{ margin:0; min-width:0; } .about-hero-image img{ display:block; width:100%; aspect-ratio:4 / 4.7; object-fit:cover; object-position:center; border:1px solid rgba(210,184,141,.25); box-shadow:0 34px 90px rgba(0,0,0,.36); } .about-intro{ background:var(--sand); color:var(--green); } .about-intro-grid, .about-place-grid{ display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1fr); gap:58px; align-items:center; } .about-intro-image img{ display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; object-position:center; box-shadow:0 24px 70px rgba(0,0,0,.18); } .about-intro-copy h2{ color:var(--green); } .about-intro-copy p{ color:rgba(43,55,30,.78); } .about-intro-copy .script-label{color:var(--green);opacity:.72} .about-values{ background:#10170c; } .about-value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .about-value-card{ min-height:240px; padding:30px 28px; border:1px solid rgba(210,184,141,.18); background:rgba(255,255,255,.035); } .about-value-card h3{ margin:0 0 14px; color:#fff; text-transform:uppercase; letter-spacing:.08em; font-size:1rem; } .about-value-card p{ margin:0; color:#d8cdb7; line-height:1.7; } .about-place{ background:#0b1008; } .about-place-grid{ grid-template-columns:minmax(0,.8fr) minmax(280px,1fr); } .about-place-images{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .about-place-images img{ width:100%; height:420px; object-fit:cover; border:1px solid rgba(210,184,141,.16); } .about-place-images img:nth-child(2){ margin-top:52px; } .about-final-cta{ background: linear-gradient(rgba(16,23,12,.78),rgba(16,23,12,.82)), url('../img/about-interior-wide.webp') center/cover; } .about-final-box{ max-width:820px; margin-inline:auto; padding:52px; text-align:center; background:rgba(16,23,12,.86); border:1px solid rgba(210,184,141,.22); box-shadow:0 30px 90px rgba(0,0,0,.32); } .about-final-box .button-row{ margin-top:26px; } @media (max-width:1080px){ .owner-teaser-grid, .about-hero-grid, .about-intro-grid, .about-place-grid{ grid-template-columns:1fr; } .owner-teaser-media, .about-hero-image, .about-intro-image{ max-width:640px; margin-inline:auto; width:100%; } .about-place-images img{ height:340px; } .owner-button-row{ justify-content:center; } .owner-teaser-copy, .about-hero-copy, .about-intro-copy, .about-place-copy{ text-align:center; } } @media (max-width:760px){ .owner-teaser-grid, .about-hero-grid, .about-intro-grid, .about-place-grid{ gap:34px; } .about-hero{ padding:122px 0 66px; } .owner-teaser-copy h2, .about-hero-copy h1, .about-intro-copy h2, .about-place-copy h2, .about-final-box h2{ font-size:clamp(2.05rem,9vw,3.15rem); line-height:1.04; letter-spacing:-.035em; } .owner-teaser-media span{ left:14px; right:14px; bottom:14px; font-size:.68rem; } .about-value-grid, .about-place-images{ grid-template-columns:1fr; } .about-value-card{ min-height:auto; padding:24px 22px; } .about-place-images img, .about-place-images img:nth-child(2){ height:260px; margin-top:0; } .about-final-box{ padding:34px 24px; } } /* -------------------------------------------------------------------------- nouri. Spezial V4.0 — Navigation mit zusätzlicher Über-Seite -------------------------------------------------------------------------- */ @media (min-width:761px) and (max-width:1220px){ .nav-shell{ gap:14px; } .site-nav a{ padding-inline:10px; font-size:.78rem; letter-spacing:.065em; } } @media (max-width:760px){ .site-nav.is-open{ max-height:700px; } } /* -------------------------------------------------------------------------- nouri. Spezial V4.2 — aktuelle Fotostrecke & ruhiger Hero-Zoom Ziel: neue Fotografiebasis ohne Food-Motive im Hero, mehr Bewegung ohne technische Spielerei. Keine !important-Regeln in diesem Patch. -------------------------------------------------------------------------- */ .slide-photo{ transform-origin:center; will-change:transform; } .slide.is-active .slide-photo{ animation:nouriHeroSlowZoom 7.6s ease-out forwards; } @keyframes nouriHeroSlowZoom{ from{transform:scale(1.015)} to{transform:scale(1.085)} } .slide:nth-child(2) .slide-photo{ object-position:center 55%; } .slide:nth-child(3) .slide-photo{ object-position:center 50%; } .number-band{ background-position:center 52%; } .gallery-strip{ grid-template-columns:repeat(4,minmax(0,1fr)); } .gallery-item img{ object-fit:cover; } .gallery-item:nth-child(1) img{object-position:center 55%} .gallery-item:nth-child(2) img{object-position:center 52%} .gallery-item:nth-child(3) img{object-position:center 48%} .gallery-item:nth-child(4) img{object-position:center 50%} .reviews-section{ background-position:center 48%; } @media (max-width:760px){ .slide:nth-child(1) .slide-photo{object-position:58% 50%} .slide:nth-child(2) .slide-photo{object-position:52% 50%} .slide:nth-child(3) .slide-photo{object-position:center 50%} .gallery-strip{grid-template-columns:1fr 1fr} .gallery-item{height:220px} } @media (max-width:420px){ .gallery-strip{grid-template-columns:1fr} .gallery-item{height:235px} } @media (prefers-reduced-motion:reduce){ .hero-closure-notice{ animation:none; } .slide.is-active .slide-photo{animation:none} } /* -------------------------------------------------------------------------- nouri. Spezial V4.2 — neue Fotostrecke finalisiert Ziel: Inhaber freundlicher, Trust-Band mit Kaffeemaschinen-Motiv und Eventkarten mit aktueller Fotostrecke. -------------------------------------------------------------------------- */ .owner-teaser-media img{ object-position:center 45%; } .number-band{ background-position:center 47%; } .event-card:nth-child(1) .event-image{background-position:center 42%;} .event-card:nth-child(2) .event-image{background-position:center 50%;} .event-card:nth-child(3) .event-image{background-position:center 47%;} @media (max-width:760px){ .owner-teaser-media img{object-position:center 42%;} .number-band{background-position:center 48%;} } /* -------------------------------------------------------------------------- nouri. Spezial V4.3 — Inhaberbilder gezielt nach Seitentyp Startseite: freundliches Thekenmotiv. Über-Seite: stehendes Inhaberportrait. -------------------------------------------------------------------------- */ .owner-teaser-media img{ object-position:center 46%; } .about-hero-image img{ object-position:center 42%; } @media (max-width:760px){ .owner-teaser-media img{object-position:center 44%;} .about-hero-image img{object-position:center 40%;} } /* -------------------------------------------------------------------------- nouri. Spezial V5.1 — Produkt-CTA-Rhythmus & mobile Navigation Konzept, Frontend & Code: WebCore Dresden Ziel: Produktbuttons auf einer Linie, Kategorien ohne mobilen Horizontal- scroll und Footer-Navigation mobil entfernen, weil sie bereits im Menü liegt. -------------------------------------------------------------------------- */ .product-row{ align-items:stretch; } .product{ display:flex; flex-direction:column; height:100%; } .product p{ flex:1 1 auto; } .product strong{ min-height:1.35em; } .product .mini-button{ align-self:center; margin-top:0; } @media (max-width:760px){ .tab-buttons{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:center; align-items:stretch; gap:10px; overflow:visible; flex-wrap:initial; padding-bottom:0; margin-inline:auto; width:100%; } .tab-button{ width:100%; min-width:0; min-height:56px; padding:12px 8px; white-space:normal; text-align:center; line-height:1.15; } .tab-buttons > .tab-button:last-child:nth-child(4){ grid-column:2; } .site-footer .footer-grid > .footer-col:nth-child(3){ display:none; } } @media (max-width:380px){ .tab-buttons{ gap:8px; } .tab-button{ font-size:.72rem; letter-spacing:.065em; padding-inline:6px; } } /* -------------------------------------------------------------------------- nouri. Spezial V5.2 — Produktbilder als Kreisflächen Konzept, Frontend & Code: WebCore Dresden Ziel: Speisebilder auf der Startseite visuell an den Logo-Ring anlehnen. -------------------------------------------------------------------------- */ .product-image{ width:min(286px,100%); aspect-ratio:1 / 1; min-height:0; margin:0 auto 22px; padding:0; border:4px solid var(--sand); border-radius:50%; background:rgba(255,250,240,.96); box-shadow:0 0 0 2px rgba(255,250,240,.18),0 20px 44px rgba(0,0,0,.24); overflow:hidden; } .product-image img{ width:100%; height:100%; max-height:none; object-fit:cover; border-radius:50%; filter:none; transition:transform .35s ease; } .tab-product{ display:flex; flex-direction:column; align-items:center; } .tab-product img{ width:min(286px,100%); aspect-ratio:1 / 1; height:auto; object-fit:cover; margin:0 auto 20px; padding:0; border:4px solid var(--sand); border-radius:50%; background:rgba(255,250,240,.96); box-shadow:0 0 0 2px rgba(255,250,240,.18),0 18px 38px rgba(0,0,0,.22); } @media (max-width:760px){ .product-image, .tab-product img{ width:min(264px,100%); } } @media (max-width:420px){ .product-image, .tab-product img{ width:min(246px,100%); } } /* -------------------------------------------------------------------------- nouri. Spezial V5.3 — Runde Speisekarten-Kacheln Konzept, Frontend & Code: WebCore Dresden Ziel: die Bildkacheln der Speisekarten-Vorschau formal an die runden Produktbilder und den Logo-Ring anlehnen. -------------------------------------------------------------------------- */ .preview-images{ align-items:start; } .preview-img{ width:min(280px,100%); aspect-ratio:1 / 1; min-height:0; margin-inline:auto; border:4px solid var(--sand); border-radius:50%; background:rgba(255,250,240,.96); box-shadow:0 0 0 2px rgba(255,250,240,.18),0 20px 44px rgba(0,0,0,.24); overflow:hidden; } .preview-img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } .preview-img.offset{ margin-top:34px; } @media (max-width:760px){ .preview-img{ width:min(260px,100%); } .preview-img.offset{ margin-top:0; } } /* Startseite: Tassen in runden Karten sauber mittig ausrichten */ .tab-product img.circle-center{object-fit:cover;object-position:center center;} .tab-product img.circle-center-cappuccino{object-position:50% 50%;} /* -------------------------------------------------------------------------- nouri. Spezial V5.9 — Hero-Crossfade ohne Zoom-Rücksprung + Urlaubshinweis -------------------------------------------------------------------------- */ .slide{ z-index:0; } .hero-slider .slide{ align-items:start; justify-items:center; } .hero-slider .slide-content{ padding-top:clamp(275px,32svh,350px); padding-bottom:120px; } .slide.is-active{ z-index:2; } .slide.is-leaving{ opacity:0; visibility:visible; z-index:1; pointer-events:none; } .slide.is-leaving .slide-photo{ transform:scale(1.085); } .hero-closure-notice{ position:absolute; top:clamp(96px,13svh,158px); left:50%; right:auto; bottom:auto; transform:translateX(-50%); z-index:8; width:min(600px,calc(100% - 36px)); padding:14px 24px 15px; border:1px solid rgba(210,184,141,.52); border-radius:999px; background: linear-gradient(135deg,rgba(16,23,12,.90),rgba(27,36,18,.88)); color:var(--text); box-shadow: 0 18px 56px rgba(0,0,0,.28), 0 0 0 0 rgba(184,140,43,.28); backdrop-filter:blur(14px); text-align:center; animation:nouriClosurePulse 2.2s ease-in-out infinite; } .hero-closure-kicker{ display:block; margin-bottom:3px; color:var(--gold); font-size:.68rem; font-weight:950; letter-spacing:.13em; line-height:1.1; text-transform:uppercase; } .hero-closure-notice strong{ display:block; color:#fffaf0; font-family:var(--serif); font-size:clamp(1.12rem,1.65vw,1.42rem); line-height:1.08; letter-spacing:-.02em; } .hero-closure-notice small{ display:block; margin-top:5px; color:#d8cdb7; font-size:.84rem; line-height:1.38; } @keyframes nouriClosurePulse{ 0%,100%{ border-color:rgba(210,184,141,.46); box-shadow: 0 18px 56px rgba(0,0,0,.28), 0 0 0 0 rgba(184,140,43,0), 0 0 0 rgba(184,140,43,0); background: linear-gradient(135deg,rgba(16,23,12,.90),rgba(27,36,18,.88)); filter:saturate(1) brightness(1); } 50%{ border-color:rgba(184,140,43,.98); box-shadow: 0 22px 68px rgba(0,0,0,.30), 0 0 0 10px rgba(184,140,43,.16), 0 0 26px rgba(184,140,43,.20); background: linear-gradient(135deg,rgba(28,39,18,.96),rgba(44,56,27,.93)); filter:saturate(1.08) brightness(1.08); } } @media (max-width:760px){ .hero-closure-notice{ top:clamp(104px,16svh,132px); left:14px; right:14px; width:auto; transform:none; padding:12px 14px; border-radius:20px; } .hero-closure-kicker{ font-size:.64rem; } .hero-closure-notice strong{ font-size:1.02rem; } .hero-closure-notice small{ font-size:.78rem; } } @media (max-width:420px){ .hero-closure-notice{ top:clamp(104px,16svh,122px); padding:11px 13px; } .hero-closure-notice small{ display:block; margin-top:5px; font-size:.72rem; line-height:1.28; } } @media (prefers-reduced-motion:reduce){ .slide.is-active .slide-photo{ animation:none; transform:scale(1.035); } .slide.is-leaving .slide-photo{ transform:scale(1.035); } } /* -------------------------------------------------------------------------- nouri. Spezial V6.3 — Social/WhatsApp Icon-Feinschliff Ziel: Social Icons nur als Markenicons über „Folgen“ und WhatsApp im gleichen Farbschema wie die übrigen Kontakticons. -------------------------------------------------------------------------- */ .intro-whatsapp .whatsapp-icon{ background:rgba(210,184,141,.08)!important; border:1px solid rgba(210,184,141,.22)!important; box-shadow:none!important; color:var(--sand)!important; } .intro-whatsapp .whatsapp-icon svg{ width:28px!important; height:28px!important; display:block!important; fill:currentColor!important; } .intro-whatsapp:hover .whatsapp-icon{ background:rgba(210,184,141,.14)!important; border-color:rgba(210,184,141,.38)!important; } .contact-original-icon svg{ width:20px!important; height:20px!important; display:block!important; fill:currentColor!important; } .contact-follow-card{ gap:12px!important; } .contact-follow-icons{ display:flex!important; align-items:center!important; gap:12px!important; flex-wrap:wrap!important; } .contact-follow-icon{ display:grid!important; place-items:center!important; width:42px!important; height:42px!important; border-radius:50%!important; color:var(--sand)!important; background:rgba(210,184,141,.08)!important; border:1px solid rgba(210,184,141,.22)!important; text-decoration:none!important; transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease!important; } .contact-follow-icon:hover{ background:rgba(210,184,141,.14)!important; border-color:rgba(210,184,141,.38)!important; color:var(--sand)!important; transform:translateY(-1px)!important; } .contact-follow-icon svg{ width:18px!important; height:18px!important; display:block!important; } .contact-follow-card h3{ margin-top:2px!important; } @media (max-width:560px){ .contact-follow-card{ min-height:auto!important; } } /* -------------------------------------------------------------------------- nouri. Spezial V6.7 — Social Follow Hinweis Ziel: Unter „Folgen“ kurzer, ruhiger CTA in der bestehenden Kontakt-DNA. -------------------------------------------------------------------------- */ .contact-follow-note{ margin:0!important; max-width:280px!important; color:#d8cdb7!important; font-size:.96rem!important; line-height:1.55!important; } @media (max-width:560px){ .contact-follow-note{ max-width:100%!important; font-size:.9rem!important; } } /* -------------------------------------------------------------------------- nouri. Spezial V6.8 — Mobile Wellenmitte, Button-Sicherheit, Hero-Hinweis Ziel: 1) Wellenförmige Bildreihe mobil um die Viewport-Mitte herum führen. 2) Tab-Buttons mobil so absichern, dass Texte sauber im Button bleiben. 3) Urlaubshinweis im Hero oberhalb der Copy halten, ohne Überlagerung. -------------------------------------------------------------------------- */ @media (max-width: 760px){ /* Wellenartige Vorschau mittig um die Viewport-Achse aufbauen */ .menu-preview-grid{ gap: 40px; } .preview-images{ justify-items: center; align-items: start; gap: 18px; width: 100%; } .preview-img, .preview-img.offset{ margin-top: 0; margin-inline: auto; transform: translateX(0); } .preview-images .preview-img:nth-child(odd){ transform: translateX(clamp(-18px, -4vw, -10px)); } .preview-images .preview-img:nth-child(even){ transform: translateX(clamp(10px, 4vw, 18px)); } /* Buttontexte sicher innerhalb der Tabs halten */ .tab-buttons{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; justify-items: stretch; width: 100%; max-width: 100%; } .tab-button{ display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: 100%; box-sizing: border-box; padding: 12px 10px; font-size: clamp(.74rem, 2.85vw, .92rem); letter-spacing: .055em; line-height: 1.12; text-align: center; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } /* Urlaubshinweis klar zwischen Menüpanel und Hero-Headline */ .hero-closure-notice{ top: 124px; left: 14px; right: 14px; width: auto; transform: none; } .hero-slider .slide-content{ padding-top: 268px; } } @media (max-width: 560px){ .preview-images .preview-img:nth-child(odd){ transform: translateX(clamp(-14px, -3.6vw, -8px)); } .preview-images .preview-img:nth-child(even){ transform: translateX(clamp(8px, 3.6vw, 14px)); } .tab-button{ padding: 11px 8px; font-size: clamp(.7rem, 2.95vw, .84rem); letter-spacing: .05em; } .hero-slider .slide-content{ padding-top: 292px; } } @media (max-width: 420px){ .tab-buttons{ gap: 8px; } .tab-button{ min-height: 54px; padding: 10px 7px; font-size: .68rem; letter-spacing: .045em; } .hero-closure-notice{ top: 118px; padding: 11px 12px; } .hero-slider .slide-content{ padding-top: 282px; } } /* -------------------------------------------------------------------------- nouri. Spezial V6.9 — Mobile Hero Höhe + Dots unter Buttons Ziel: 1) Hero mobil darf unten nicht abgeschnitten werden. 2) Slider-Dots liegen klar unter den CTA-Buttons. 3) Zusätzliche Luft für iPhone-Browserleisten / Safe-Area. -------------------------------------------------------------------------- */ @media (max-width:760px){ .hero-slider{ min-height:calc(100svh + 120px); } .hero-slider .slide{ min-height:calc(100svh + 120px); align-items:start; justify-items:center; } .hero-slider .slide-content{ padding-bottom:calc(168px + env(safe-area-inset-bottom, 0px)); } .hero-slider .slider-controls{ bottom:calc(36px + env(safe-area-inset-bottom, 0px)); } } @media (max-width:560px){ .hero-slider{ min-height:calc(100svh + 136px); } .hero-slider .slide{ min-height:calc(100svh + 136px); } .hero-slider .slide-content{ padding-bottom:calc(182px + env(safe-area-inset-bottom, 0px)); } .hero-slider .slider-controls{ bottom:calc(40px + env(safe-area-inset-bottom, 0px)); } } @media (max-width:420px){ .hero-slider{ min-height:calc(100svh + 154px); } .hero-slider .slide{ min-height:calc(100svh + 154px); } .hero-slider .slide-content{ padding-bottom:calc(198px + env(safe-area-inset-bottom, 0px)); } .hero-slider .slider-controls{ bottom:calc(46px + env(safe-area-inset-bottom, 0px)); } }