/* =================================================================== Art of Beauty Trier — Mobile Enhance & Polish Layer ------------------------------------------------------------------- Wird ZULETZT geladen (nach site.css). Rein additiv: haertet und verfeinert die mobile Darstellung, ohne das bestehende — bereits responsive — Layout zu ueberschreiben. Desktop bleibt unberuehrt. Erstellt 2026-05-19. =================================================================== */ /* ---- Global: Sprungmarken/Anker nicht hinter dem Sticky-Header ---- */ html { scroll-padding-top: 6.5rem; } /* ---- Global: klar sichtbarer Fokusrahmen (Tastatur-Bedienung) ---- */ :focus-visible { outline: 2px solid var(--primary, #90a7ac); outline-offset: 2px; border-radius: 4px; } /* =================================================================== 1) UNIVERSELLE HAERTUNG — Tablet + Smartphone (<= 1024px) =================================================================== */ @media (max-width: 1024px) { /* iOS skaliert sonst Schrift beim Drehen eigenmaechtig */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Medien nie breiter als der Bildschirm -> kein seitliches Scrollen */ img, svg, video, iframe, canvas, audio, embed, object { max-width: 100%; } img, video { height: auto; } /* Lange Woerter / E-Mails / URLs umbrechen statt Layout zu sprengen */ p, li, h1, h2, h3, h4, h5, a, span, td, th, dd, dt, figcaption, blockquote, label { overflow-wrap: break-word; word-break: break-word; } /* Dezentes Marken-Tap-Feedback statt grauem iOS-Kasten; touch-action: manipulation entfernt die 300ms-Klickverzoegerung */ a, button, .btn, .button, [role="button"], summary, label, input, select, textarea { -webkit-tap-highlight-color: rgba(144, 167, 172, .18); touch-action: manipulation; } /* Safe-Area: im Querformat ragt der iPhone-Notch sonst in den Inhalt */ .container, .container-narrow, .page-title-block, .newsletter, .site-footer, .breadcrumb { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); } } /* =================================================================== 2) FORMULARE (<= 768px) =================================================================== */ @media (max-width: 768px) { /* >= 16px verhindert das stoerende Auto-Zoom von iOS beim Antippen */ input, select, textarea, .form-control { font-size: 16px !important; line-height: 1.4; } /* Komfortable Tap-Hoehe fuer Eingabefelder */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, .form-control { min-height: 46px; } textarea { min-height: 130px; } /* Generische Datentabellen horizontal scrollbar statt das Layout zu sprengen */ .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* =================================================================== 3) TOUCH-ZIELE & BUTTONS (<= 940px) =================================================================== */ @media (max-width: 940px) { /* Buttons sicher auf >= 44px Tap-Hoehe (Apple/Google-Richtwert) */ .btn, .button, button.btn, a.btn { min-height: 44px; padding-top: .7em; padding-bottom: .7em; } /* Footer-Links grosszuegiger antippbar */ .site-footer a { padding: .5rem 0; } /* Breadcrumb-Links mit echter Tap-Flaeche */ .breadcrumb a { display: inline-block; padding: .3rem 0; } /* Social-Icons im Footer angenehm gross */ .social-icons a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; } /* Fixe untere Navigation: Seiteninhalt darf nicht dahinter verschwinden */ body:has(.mobile-bottom-nav) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } } /* =================================================================== 4) ABSTAENDE / RHYTHMUS auf dem Smartphone (<= 768px) Grosse Desktop-Paddings wirken auf dem Handy uebertrieben. =================================================================== */ @media (max-width: 768px) { .section { padding: 2.75rem 0; } .page-title-block { padding: 2.5rem 1.25rem 1.25rem; } .newsletter { padding: 2.75rem 1.25rem; } .banner-card .banner-text { padding: 2rem 1.5rem; } .split { gap: 1.75rem; } .lightbox { padding: 1rem; } } /* =================================================================== 5) FEIN-SCHLIFF kleine Smartphones (<= 480px) =================================================================== */ @media (max-width: 480px) { .container, .container-narrow { padding-left: 1.1rem; padding-right: 1.1rem; } .section { padding: 2.2rem 0; } .services-grid { gap: 1.1rem; } .product-grid { gap: 1.1rem; } .service-card-body { padding: 1.2rem; } .banner-card .banner-text { padding: 1.6rem 1.2rem; } h1 { font-size: 2.05em; } h3 { font-size: 1.7em; } /* Newsletter-Formular auf Mini-Screens sauber stapeln */ .newsletter form { flex-direction: column; } .newsletter form input { flex: 0 0 auto; width: 100%; } .newsletter form .btn, .newsletter form button { width: 100%; } } /* =================================================================== 6) SEHR KLEINE GERAETE (<= 360px) =================================================================== */ @media (max-width: 360px) { .container, .container-narrow { padding-left: .9rem; padding-right: .9rem; } .brand-logo { width: 108px; } h1 { font-size: 1.9em; } } /* =================================================================== 7) BURGER-MENÜ — Off-Canvas-Panel feiner gestalten (Open-State: .main-nav.open / body.menu-open — siehe mobile-nav.js) =================================================================== */ /* Die Schließen-Zeile gibt es nur im mobilen Off-Canvas-Panel */ .nav-x { display: none; } @media (max-width: 940px) { /* Panel: weicher, hochwertiger, mit abgerundeter Innenkante */ .main-nav { padding-top: 0; background: radial-gradient(135% 55% at 100% 0%, rgba(218,190,146,.16), transparent 62%), linear-gradient(180deg, #ffffff 0%, #fcf9f3 100%); border-radius: 22px 0 0 22px; box-shadow: -26px 0 64px rgba(31,37,40,.22); transition: transform .42s cubic-bezier(.16,1,.3,1); } /* Kopfzeile im Panel mit rundem Schließen-Button (oben rechts) */ .nav-x { display: flex; align-items: center; justify-content: flex-end; padding: calc(.85rem + env(safe-area-inset-top)) 1rem .85rem; margin: 0; border-bottom: 1px solid #ece4d3; list-style: none; } .nav-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.65rem; line-height: 1; color: #5a4a30; background: rgba(218,190,146,.16); border: 0; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s ease, color .2s ease, transform .25s cubic-bezier(.16,1,.3,1); } .nav-close:hover, .nav-close:active { background: rgba(218,190,146,.32); color: #2a2c30; transform: rotate(90deg); } /* Menüpunkte gestaffelt einblenden, sobald das Panel offen ist */ @keyframes navItemIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } .main-nav.open > li:not(.nav-x) { animation: navItemIn .44s cubic-bezier(.16,1,.3,1) both; } .main-nav.open > li:nth-child(2) { animation-delay: .05s; } .main-nav.open > li:nth-child(3) { animation-delay: .09s; } .main-nav.open > li:nth-child(4) { animation-delay: .13s; } .main-nav.open > li:nth-child(5) { animation-delay: .17s; } .main-nav.open > li:nth-child(6) { animation-delay: .21s; } .main-nav.open > li:nth-child(7) { animation-delay: .25s; } .main-nav.open > li:nth-child(8) { animation-delay: .29s; } .main-nav.open > li:nth-child(9) { animation-delay: .33s; } .main-nav.open > li:nth-child(10) { animation-delay: .37s; } /* Parent-Links: gleitender Gold-Akzent statt flachem Hover */ .main-nav > li > a { position: relative; transition: background .18s ease, color .18s ease, padding-left .2s ease; } .main-nav > li > a::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: linear-gradient(180deg, #dabe92, #b89261); border-radius: 0 3px 3px 0; transform: translateY(-50%); transition: height .24s cubic-bezier(.16,1,.3,1); } .main-nav > li > a:hover::before, .main-nav > li > a:active::before { height: 62%; } .main-nav > li > a:hover, .main-nav > li > a:active { padding-left: 1.8rem; } /* Overlay hinter dem Menü: klare Abdunklung — KEIN Blur (war „verschwommen") */ body.menu-open::after { background: rgba(18,22,26,.42); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Navbar: solides Weiß statt Glas-Unschärfe — und ZWINGEND über dem Menü-Overlay. Das Panel sitzt im Stacking-Context des Headers; lag der Header (z-index 100) unter dem Overlay (z-index 150), lag der graue Schleier auch über dem geöffneten Menü. */ .site-header { z-index: 300; background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Dropdown-Untermenüs: die Desktop-Zentrierung (left:50% + translateX(-50%)) darf auf Mobile NICHT greifen — sonst rutscht das Untermenü ~170px nach links aus dem Panel heraus (Text war abgeschnitten). */ .main-nav .dropdown-menu, .main-nav .dropdown.is-open .dropdown-menu { left: auto !important; right: auto !important; transform: none !important; } } /* Bewegungsreduzierung respektieren */ @media (max-width: 940px) and (prefers-reduced-motion: reduce) { .main-nav.open > li:not(.nav-x) { animation: none; opacity: 1; transform: none; } .nav-close:hover, .nav-close:active { transform: none; } } /* =================================================================== 9) APPLE / iOS-SAFARI — Feinschliff Wirkt zusammen mit viewport-fit=cover (in header.php gesetzt). =================================================================== */ @media (max-width: 1024px) { /* Trägheits-Scrollen in scrollbaren Bereichen (iOS) */ .main-nav, .lightbox, .table { -webkit-overflow-scrolling: touch; } .main-nav { overscroll-behavior: contain; } /* iOS gibt Formularfeldern einen Eigen-Look (Innenschatten, runde Ecken) — auf das Design der Seite vereinheitlichen */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea, select { -webkit-appearance: none; appearance: none; } /*