/* ============================================================ Café Bernstein — Haupt-Stylesheet Stack: Vanilla HTML + CSS + wenig JS Design: Dunkel/Gold, editorial, atmosphärisch ============================================================ */ /* --- Fonts --- Bewusst KEIN @import: das blockiert den kritischen Ladepfad, weil der Browser erst dieses Stylesheet parsen muss, bevor er die Schriften anfordert. Die Fonts werden stattdessen per im jeder Seite geladen. */ /* --- Custom Properties --- */ :root { --color-black: #0a0a0a; --color-dark: #141414; --color-dark-mid: #1e1e1e; --color-dark-light: #2a2a2a; --color-gold: #c8a96e; --color-gold-light: #d4b882; --color-gold-dark: #a0834a; --color-white: #ffffff; --color-off-white: #f5f2ed; --color-text: #e8e4de; --color-text-muted: #9a9188; --color-border: rgba(200, 169, 110, 0.2); --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; --nav-height: 70px; --max-width: 1280px; --focus-inner: #ffffff; --focus-outer: #161616; --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --transition: 0.3s var(--ease-smooth); } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 1rem); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background-color: var(--color-black); color: var(--color-text); line-height: 1.7; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font-family: inherit; font-size: inherit; } /* --- Utilities --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; } .section-pad { padding: 120px 0; } .section-pad-sm { padding: 70px 0; } .text-center { text-align: center; } .text-gold { color: var(--color-gold); } /* --- Typography Scale --- */ .label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); } h1, .h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; color: var(--color-white); } h2, .h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4rem); font-weight: 700; line-height: 1.1; color: var(--color-white); } h3, .h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.2; color: var(--color-white); } h4, .h4 { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); } p { font-size: 1rem; color: var(--color-text-muted); line-height: 1.8; } p.lead { font-size: 1.1rem; color: var(--color-text); line-height: 1.75; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 2.2rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; border: none; cursor: pointer; transition: var(--transition); text-decoration: none; white-space: nowrap; } .btn-gold { background-color: var(--color-gold); color: var(--color-black); } .btn-gold:hover { background-color: var(--color-gold-light); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--color-white); border: 1.5px solid rgba(255,255,255,0.4); } .btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold); } .btn-dark { background-color: var(--color-dark-mid); color: var(--color-white); border: 1px solid rgba(255,255,255,0.1); } .btn-dark:hover { background-color: var(--color-dark-light); border-color: var(--color-gold); color: var(--color-gold); } /* --- Navigation --- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-height); display: flex; align-items: center; transition: background-color 0.4s ease, box-shadow 0.4s ease; } .site-nav.scrolled { background-color: rgba(10, 10, 10, 0.97); box-shadow: 0 1px 0 var(--color-border); backdrop-filter: blur(12px); } .nav-inner { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; } /* Wortmarke ist das Original-SVG (assets/img/logo.svg), weiss auf transparent. Kein Filter noetig, die Farbe steckt in der Datei. */ .nav-logo-img { display: block; /* Das Original misst am 2026-08-22 nachgemessen 57 px hoch, bei 375 px Fensterbreite wie am Rechner gleich. Wir standen auf 54. */ height: 57px; width: auto; } .nav-links { display: flex; align-items: center; gap: 0.25rem; } .nav-links a { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); padding: 0.5rem 0.9rem; border-bottom: 2px solid transparent; transition: var(--transition); white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--color-gold); border-bottom-color: var(--color-gold); } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; background: none; border: none; } .nav-toggle span { display: block; width: 24px; height: 2px; background-color: var(--color-white); transition: var(--transition); } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Nav Drawer */ .nav-drawer { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; background-color: var(--color-dark); border-top: 1px solid var(--color-border); padding: 1.5rem 2rem; z-index: 999; flex-direction: column; gap: 0; } .nav-drawer.open { display: flex; } .nav-drawer a { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); padding: 1rem 0; border-bottom: 1px solid var(--color-border); transition: color var(--transition); } .nav-drawer a:last-child { border-bottom: none; } .nav-drawer a:hover { color: var(--color-gold); } /* Page top padding for fixed nav */ .page-body { padding-top: var(--nav-height); } /* --- Hero Section --- */ .hero { position: relative; width: 100%; min-height: 100vh; overflow: hidden; display: flex; align-items: center; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.15) 100% ); } .hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; } .hero-content-inner { max-width: 600px; } .hero-label { margin-bottom: 1.5rem; } .hero h1 { margin-bottom: 1.5rem; } .hero p { font-size: 1.05rem; color: rgba(255,255,255,0.75); margin-bottom: 2.5rem; max-width: 480px; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; } /* --- Section Headers --- */ .section-header { margin-bottom: 4rem; } .section-header .label { display: block; margin-bottom: 1rem; } .section-header h2 { margin-bottom: 1.25rem; } .section-header .divider { width: 50px; height: 2px; background: var(--color-gold); margin: 0 auto 1.5rem; } .section-header p { max-width: 600px; margin: 0 auto; } /* --- Split Layout (Text + Bild nebeneinander) --- */ .split { display: grid; grid-template-columns: 45fr 55fr; gap: 0; align-items: stretch; } .split.reverse { direction: rtl; } .split.reverse > * { direction: ltr; } .split-text { display: flex; flex-direction: column; justify-content: center; padding: 80px 70px; background-color: var(--color-dark); } .split-text .label { display: block; margin-bottom: 1rem; } .split-text h2 { margin-bottom: 0.5rem; } .split-text h3 { margin-bottom: 1.5rem; } .split-text p { margin-bottom: 1rem; } .split-text p:last-of-type { margin-bottom: 2rem; } .split-image { position: relative; min-height: 520px; overflow: hidden; } .split-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s var(--ease-smooth); } .split-image:hover img { transform: scale(1.03); } /* --- Image Grid / Galerie --- */ .img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .img-grid-item { position: relative; overflow: hidden; aspect-ratio: 1; } .img-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-smooth); } .img-grid-item:hover img { transform: scale(1.08); } /* 3-col grid */ .img-grid-3 { grid-template-columns: repeat(3, 1fr); } /* --- Full-Bleed Banner --- */ .banner { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .banner-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); } .banner-content { position: relative; z-index: 2; text-align: center; padding: 3rem 2rem; max-width: 700px; } .banner-content .label { display: block; margin-bottom: 1rem; } .banner-content h2 { margin-bottom: 1rem; } .banner-content p { color: rgba(255,255,255,0.7); margin-bottom: 2rem; } /* --- Menu Grid --- */ .menu-section { margin-bottom: 5rem; } .menu-section-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-weight: 700; color: var(--color-white); text-align: center; margin-bottom: 0.5rem; padding-top: 3rem; border-top: 1px solid var(--color-border); } .menu-section-title:first-child { border-top: none; padding-top: 0; } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .menu-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .menu-item-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; margin-bottom: 1rem; transition: transform 0.4s ease; } .menu-item:hover .menu-item-img { transform: scale(1.03); } .menu-item-name { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-white); margin-bottom: 0.4rem; } .menu-item-desc { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; } /* Horizontale Menü-Liste (für Paninos, Croissants etc.) */ .menu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 2rem; } .menu-list-item { padding: 1.2rem 1.5rem; border: 1px solid var(--color-border); background: var(--color-dark); } .menu-list-item .menu-item-name { font-size: 0.82rem; margin-bottom: 0.3rem; } .menu-list-item .menu-item-desc { font-size: 0.75rem; } /* --- Kontakt-Karte --- */ .info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .info-card { padding: 2.5rem; background-color: var(--color-dark); } .info-card h4 { margin-bottom: 1.2rem; } .info-card p, .info-card a, .info-card address { color: var(--color-text-muted); font-style: normal; font-size: 0.9rem; line-height: 1.9; } .info-card a:hover { color: var(--color-gold); } /* Öffnungszeiten Tabelle */ .hours-table { width: 100%; border-collapse: collapse; } .hours-table tr { border-bottom: 1px solid var(--color-border); } .hours-table tr:last-child { border-bottom: none; } .hours-table td, .hours-table th { padding: 0.5rem 0; font-size: 0.85rem; font-weight: 400; text-align: left; color: var(--color-text-muted); } .hours-table td:first-child, .hours-table th:first-child { color: var(--color-text); width: 50%; } /* --- Formulare --- */ .form-group { margin-bottom: 1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-input, .form-textarea { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--color-white); padding: 0.9rem 1.1rem; font-size: 0.9rem; transition: border-color var(--transition); resize: vertical; } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); } .form-input:focus, .form-textarea:focus { border-color: var(--color-gold); } .form-textarea { min-height: 140px; } .form-check { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; } .form-check input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; accent-color: var(--color-gold); cursor: pointer; margin-top: 2px; } .form-check label { font-size: 0.83rem; color: var(--color-text-muted); cursor: pointer; } .form-check a { color: var(--color-gold); } /* --- Karriere Jobs --- */ .job-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; } .job-item { padding: 2rem; background: var(--color-dark); display: flex; align-items: center; gap: 1rem; } .job-dot { width: 8px; height: 8px; background: var(--color-gold); border-radius: 50%; flex-shrink: 0; } .job-item span { font-size: 0.9rem; font-weight: 500; color: var(--color-text); } /* --- Bewertung Stars --- */ .star-group { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .star { font-size: 1.5rem; color: var(--color-gold); cursor: pointer; transition: opacity var(--transition); } .star:hover { opacity: 0.8; } .rating-question { margin-bottom: 1.5rem; } .rating-question p { font-size: 0.9rem; color: var(--color-text); margin-bottom: 0.5rem; } /* --- Footer --- */ .site-footer { background-color: var(--color-dark); border-top: 1px solid var(--color-border); padding: 60px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; } .footer-logo { display: inline-block; font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-white); border: 1.5px solid var(--color-white); padding: 0.3rem 0.7rem; margin-bottom: 1.25rem; } .footer-brand p { font-size: 0.82rem; line-height: 1.75; margin-bottom: 1.5rem; } .footer-social { display: flex; gap: 0.75rem; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-dark-light); color: var(--color-text-muted); font-size: 0.85rem; transition: var(--transition); border: 1px solid var(--color-border); } .footer-social a:hover { background: var(--color-gold); color: var(--color-black); border-color: var(--color-gold); } .footer-col h4 { margin-bottom: 1.2rem; font-size: 0.72rem; letter-spacing: 0.15em; } .footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; } .footer-col ul li a { font-size: 0.83rem; color: var(--color-text-muted); transition: color var(--transition); } .footer-col ul li a:hover { color: var(--color-gold); } .footer-col address { font-style: normal; font-size: 0.83rem; color: var(--color-text-muted); line-height: 1.9; } .footer-col address a:hover { color: var(--color-gold); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; flex-wrap: wrap; gap: 1rem; } .footer-bottom p { font-size: 0.78rem; color: var(--color-text-muted); } .footer-bottom-links { display: flex; gap: 1.5rem; } .footer-bottom-links a { font-size: 0.78rem; color: var(--color-text-muted); transition: color var(--transition); } .footer-bottom-links a:hover { color: var(--color-gold); } /* --- Map Embed --- */ .map-container { height: 380px; overflow: hidden; background: var(--color-dark-mid); } .map-container iframe { width: 100%; height: 100%; border: none; filter: grayscale(0.2) brightness(0.85); } /* --- Hero Sub-Pages --- */ .page-hero { position: relative; height: 420px; display: flex; align-items: flex-end; overflow: hidden; } .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.25) 100%); } .page-hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 2rem 3.5rem; } .page-hero-content .label { display: block; margin-bottom: 0.75rem; } /* --- Dark Section Backgrounds --- */ .bg-dark { background-color: var(--color-dark); } .bg-dark-mid { background-color: var(--color-dark-mid); } .bg-black { background-color: var(--color-black); } /* --- Divider --- */ .gold-divider { width: 50px; height: 2px; background: var(--color-gold); margin: 1.25rem 0 1.75rem; } .gold-divider.center { margin: 1.25rem auto 1.75rem; } /* --- Hinweis Box --- */ .notice-box { padding: 1.5rem 2rem; border: 1px solid var(--color-border); background: var(--color-dark); font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.7; } .notice-box a { color: var(--color-gold); } /* --- Datenschutz / Impressum Prose --- */ .prose { max-width: 800px; margin: 0 auto; overflow-wrap: anywhere; word-break: break-word; } /* Lange URLs / Mail-Adressen umbrechen statt überlaufen (Mobile-Overflow-Fix) */ .prose a, .info-card a, .footer-col address a { overflow-wrap: anywhere; word-break: break-word; } .prose h2 { font-size: 1.4rem; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } .prose h3 { font-size: 1.1rem; margin-top: 2rem; margin-bottom: 0.75rem; } .prose p { margin-bottom: 1rem; } .prose a { color: var(--color-gold); } .prose a:hover { text-decoration: underline; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .split-text { padding: 60px 50px; } } @media (max-width: 900px) { :root { --nav-height: 62px; } .nav-links { display: none; } .nav-toggle { display: flex; } .split { grid-template-columns: 1fr; } .split.reverse { direction: ltr; } .split-image { min-height: 340px; order: -1; } .split-text { padding: 50px 2rem; } .info-cards { grid-template-columns: 1fr; gap: 2px; } .img-grid { grid-template-columns: repeat(2, 1fr); } .img-grid-3 { grid-template-columns: repeat(2, 1fr); } .form-row { grid-template-columns: 1fr; } .section-pad { padding: 80px 0; } } @media (max-width: 600px) { .container { padding: 0 1.25rem; } .hero { min-height: 85vh; } .hero-cta { flex-direction: column; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; align-items: flex-start; } .menu-grid { grid-template-columns: repeat(2, 1fr); } .job-list { grid-template-columns: 1fr; } .banner { min-height: 320px; } .page-hero { height: 300px; } .section-pad { padding: 60px 0; } .split-text { padding: 40px 1.25rem; } } /* --- Cookie Banner --- */ .cookie-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; background: rgba(14,14,14,0.97); border-top: 1px solid var(--color-border); backdrop-filter: blur(10px); padding: 1.25rem 2rem; } .cookie-banner.show { display: block; } .cookie-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .cookie-inner p { font-size: 0.82rem; color: var(--color-text-muted); flex: 1; min-width: 250px; } .cookie-inner a { color: var(--color-gold); } .cookie-actions { display: flex; gap: 0.75rem; flex-shrink: 0; } .cookie-actions button { padding: 0.55rem 1.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: var(--transition); } .cookie-accept { background: var(--color-gold); color: var(--color-black); } .cookie-accept:hover { background: var(--color-gold-light); } .cookie-decline { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border) !important; } .cookie-decline:hover { color: var(--color-white); } /* ============================================================ 1:1 LIGHT-THEME REBUILD — exakt nach bernsteincafe.de Helles Theme · schwarze Navi + Footer · Bebas Neue + Poppins (überschreibt das frühere dunkle/goldene Theme vollständig) ============================================================ */ :root { --accent: #eb9007; /* Original: aktiver Navigationspunkt auf Mobilgeräten */ --accent-dark: #b96f05; --ink: #0c0c0c; /* dunkle Flächen: Navi, Footer, Banner */ --paper: #ffffff; --paper-alt: #f6f2ec; /* warmes Off-White für Karten/Wechselflächen */ --line: #e7e2da; --muted: #6f6f6f; /* Schriften aufs Original umstellen (überschreibt Playfair/Inter) */ --font-display: 'Bebas Neue', Impact, sans-serif; --font-body: 'Poppins', -apple-system, "Segoe UI", sans-serif; } /* ---- Grundtypografie ---- */ body { font-family: 'Poppins', -apple-system, "Segoe UI", sans-serif; background: var(--paper); color: #2c2c2c; line-height: 1.75; } h1, .h1, h2, .h2, h3, .h3, .menu-section-title, .cat-title, .footer-logo, .menu-page-header h1 { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; color: #161616; } h1, .h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: 0.98; letter-spacing: 0.015em; } h2, .h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.0; letter-spacing: 0.015em; } h3, .h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.05; letter-spacing: 0.01em; } p { color: #555; } p.lead { color: #3d3d3d; font-size: clamp(1.05rem, 1.4vw, 1.2rem); } .label { color: var(--accent); letter-spacing: 0.22em; } /* Sub-Zeile unter Headlines: auf hellen Sektionen dunkel/fett (wie Original), auf dunklen Sektionen amber (via .sec-dark .sub weiter unten) */ .sub { color: #1f1f1f; font-weight: 600; font-size: 1.1rem; margin-bottom: 0.3rem; } /* ---- Helle Inhaltsflächen (dunkle Sektions-BG umkehren) ---- */ .bg-black { background: var(--paper); } .bg-dark { background: var(--paper); } .bg-dark-mid { background: var(--paper-alt); } .split-text { background: var(--paper); } .split-text h2, .split-text h3 { color: #161616; } /* ---- Akzent-Linien ---- */ .gold-divider, .cat-divider, .section-header .divider { background: var(--accent); } .text-gold { color: var(--accent); } /* ---- Buttons (minimal dunkel, Amber-Hover) ---- */ .btn-gold { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); } .btn-gold:hover { background: var(--accent); border-color: var(--accent); color: #161616; transform: translateY(-1px); } .btn-outline { color: #161616; border: 1.5px solid #161616; background: transparent; } .btn-outline:hover { border-color: var(--accent); color: var(--accent); background: transparent; } .btn-dark { background: var(--ink); color: #fff; border: 1px solid var(--ink); } .btn-dark:hover { background: var(--accent); color: #161616; border-color: var(--accent); } /* ---- Karten / Flächen ---- */ .info-card, .job-item, .menu-list-item, .notice-box, .menu-card, .menu-list-card { background: var(--paper); border: 1px solid var(--line); } .menu-list-grid, .menu-extra-list { background: var(--line); } .info-card p, .info-card a, .info-card address { color: var(--muted); } .job-item span { color: #2c2c2c; } .menu-card-name, .menu-list-card .name, .menu-item-name { color: #161616; } .menu-card-desc, .menu-list-card .desc, .menu-item-desc, .cat-note, .menu-card-waffel-list { color: var(--muted); } .notice-box { color: #555; } .notice-box strong { color: #161616 !important; } h4, .h4, .info-card h4 { color: var(--accent); } /* ---- Formulare ---- */ .form-input, .form-textarea { background: #fff; border: 1px solid #d6d0c7; color: #222; } .form-input::placeholder, .form-textarea::placeholder { color: #999; } .form-input:focus, .form-textarea:focus { border-color: var(--accent); } .form-check label, .rating-question p { color: #555; } .form-check a, .notice-box a, .prose a { color: var(--accent-dark); } /* ---- Tabellen (Inhaltsbereich) ---- */ .hours-table tr { border-bottom: 1px solid var(--line); } .hours-table td, .hours-table th { color: var(--muted); } .hours-table td:first-child, .hours-table th:first-child { color: #2c2c2c; } /* ---- Prose ---- */ .prose, .prose p { color: #4a4a4a; } .prose h2, .prose h3 { color: #161616; } .prose h2 { border-bottom: 1px solid var(--line); } /* ---- Navigation: durchgehend schwarz ---- */ .site-nav, .site-nav.scrolled { background: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.07); backdrop-filter: none; } /* Logo ist das Original-SVG von bernsteincafe.de (assets/img/logo.svg, 25 Vektorpfade, weiss). Gezeichnet wird es dort konstant 181x57 px bei jeder Breite; wir halten das Verhaeltnis und bleiben bei 54 px Hoehe, damit die Kopfzeile ihre Hoehe behaelt. */ .nav-links a { color: rgba(255,255,255,0.82); } .nav-links a:hover, .nav-links a.active { color: var(--accent); border-bottom-color: var(--accent); } .nav-toggle span { background: #fff; } .nav-drawer { background: var(--ink); border-top-color: rgba(255,255,255,0.1); } .nav-drawer a { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.08); } .nav-drawer a:hover { color: var(--accent); } /* ---- Hero (Startseite): reines Foto, kein Text-Overlay ---- */ .hero { min-height: clamp(420px, 46vw, 680px); } .hero-overlay { background: linear-gradient(to top, rgba(0,0,0,0.18), rgba(0,0,0,0) 45%); } /* ---- Sub-Page-Hero + Banner: dunkles Foto, heller Text (bleibt dunkel) ---- */ .page-hero { height: clamp(320px, 42vw, 480px); } .page-hero-content h1 { color: #fff; } .page-hero-content p { color: rgba(255,255,255,0.8); } .banner { min-height: 460px; } .banner-content h2 { color: #fff; } .banner-content .label { color: var(--accent); } .banner-content p { color: rgba(255,255,255,0.82); } /* ---- Footer: schwarz mit heller Schrift ---- */ .site-footer { background: var(--ink); border-top: none; } .footer-logo { color: #fff; border-color: #fff; font-size: 1.45rem; } .footer-brand p { color: rgba(255,255,255,0.6); } .footer-col h4 { color: var(--accent); } .footer-col ul li a, .footer-col address, .footer-col address a { color: rgba(255,255,255,0.65); } .footer-col ul li a:hover, .footer-col address a:hover { color: var(--accent); } .footer-social a { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.7); } .footer-social a:hover { background: var(--accent); color: #161616; border-color: var(--accent); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); } .footer-bottom p, .footer-bottom-links a { color: rgba(255,255,255,0.5); } .footer-bottom-links a:hover { color: var(--accent); } .site-footer .hours-table tr { border-bottom-color: rgba(255,255,255,0.1); } .site-footer .hours-table td, .site-footer .hours-table th { color: rgba(255,255,255,0.6); } .site-footer .hours-table td:first-child, .site-footer .hours-table th:first-child { color: rgba(255,255,255,0.82); } /* ---- Full-Bleed Bildband (z.B. Burger auf Startseite) ---- */ .fullbleed { width: 100%; height: clamp(340px, 40vw, 580px); overflow: hidden; } .fullbleed img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; } /* ---- Map ---- */ .map-container { background: var(--paper-alt); } .map-container iframe { filter: none; } /* ---- Karten-Platzhalter bis zur Einwilligung ---- */ .map-consent { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 2rem 1.5rem; text-align: center; } .map-consent-lead { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.02em; color: #161616; margin: 0; } .map-consent-text { max-width: 52ch; margin: 0; font-size: 0.92rem; line-height: 1.65; color: #555; } .map-consent-text a { color: var(--accent-dark); text-decoration: underline; } .map-consent-addr { margin: 0; font-size: 0.85rem; color: var(--muted); } .map-load-btn { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.75rem 1.9rem; cursor: pointer; background: var(--ink); color: #fff; border: 1.5px solid var(--ink); transition: var(--transition); } .map-load-btn:hover { background: var(--accent); border-color: var(--accent); color: #161616; } .map-load-btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; } /* ---- Cookie-Banner: dunkel ---- */ .cookie-banner { background: rgba(12,12,12,0.97); } .cookie-inner p { color: rgba(255,255,255,0.75); } .cookie-inner a { color: var(--accent); } .cookie-accept { background: var(--accent); color: #161616; } .cookie-accept:hover { background: var(--accent-dark); } .cookie-decline { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2) !important; } .cookie-decline:hover { color: #fff; } /* ---- Abstände: Original ist kompakter ---- */ .section-pad { padding: 90px 0; } .section-pad-sm { padding: 60px 0; } .section-header { margin-bottom: 3.5rem; } .split-image { min-height: 520px; } .split-text { padding: 70px 64px; } @media (max-width: 900px) { .split-image { min-height: 360px; } .split-text { padding: 48px 1.5rem; } .section-pad { padding: 64px 0; } } /* ============================================================ DUNKLE SEKTIONEN (das Original mischt dunkle + helle Sektionen) ============================================================ */ .sec-dark { background: var(--ink); color: rgba(255,255,255,0.74); } .sec-dark h1, .sec-dark h2, .sec-dark h3 { color: #fff; } .sec-dark p { color: rgba(255,255,255,0.74); } .sec-dark .sub { color: var(--accent); } .sec-dark .split-text { background: transparent; } .sec-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); } .sec-dark .btn-outline:hover { color: var(--accent); border-color: var(--accent); } .sec-dark .form-input, .sec-dark .form-textarea, .sec-dark .form-line { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; } .sec-dark .form-input::placeholder, .sec-dark .form-textarea::placeholder, .sec-dark .form-line::placeholder { color: rgba(255,255,255,0.55); } .sec-dark .form-check label, .sec-dark .rate-group label, .sec-dark .rate-q > p { color: rgba(255,255,255,0.78); } .sec-dark .hours-table tr { border-bottom-color: rgba(255,255,255,0.12); } .sec-dark .hours-table td, .sec-dark .hours-table th { color: rgba(255,255,255,0.65); } .sec-dark .hours-table td:first-child, .sec-dark .hours-table th:first-child { color: rgba(255,255,255,0.9); } /* Unterstrichene Section-Headings (wie Original) */ .u-head { display: inline-block; border-bottom: 2px solid currentColor; padding-bottom: 0.12em; } /* Originalformular: eingerückte, helle Felder mit vollständigem Rahmen. 16 px auf Mobilgeräten bleiben erhalten, damit iOS nicht in das Feld zoomt. */ .form-line { width: 100%; min-height: 60px; background: #fff; border: 2px solid #373b4d; border-radius: 5px; color: #222; padding: 0.65rem 0.8rem; font-size: 0.95rem; } .form-line::placeholder { color: #6f6f6f; } .form-line:focus { border-color: var(--accent); } .form-line:is(textarea) { min-height: 80px; } /* Zweifarbiger Ring bleibt auf hellen, dunklen und fotografischen Flaechen erkennbar. Outline und Schatten beeinflussen die Layoutmasse nicht. */ :where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid var(--focus-inner); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-outer); } .rate-q { margin-bottom: 1.8rem; } .rate-q > p { color: #333; margin-bottom: 0.5rem; font-weight: 500; } .rate-group { display: flex; flex-direction: column; gap: 0.5rem; } .rate-group label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: #555; cursor: pointer; } .rate-group input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; } /* Zentriertes schmales Formular (Kontakt/Bewertung) */ .form-narrow { max-width: 680px; margin: 0 auto; } .form-head { text-align: center; margin-bottom: 2.5rem; } .form-head h1, .form-head h2 { margin-bottom: 0.5rem; } .field-label { display: block; margin: 0 0 0.45rem; color: #2c2c2c; font-weight: 500; } /* Netlify Forms: Honeypot (unsichtbar) + Status-Meldung */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Nur für Screenreader — visuell unsichtbar, ohne Layout-Einfluss. Trägt Formular-Labels, den Menü-Seitentitel und Tabellen-Captions. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .form-status { margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; text-align: center; } .form-status.ok { color: #2f7a3f; font-weight: 600; } .form-status.err { color: #b3261e; font-weight: 600; } .sec-dark .form-status.ok { color: #7fd694; } .sec-dark .form-status.err { color: #ff9c94; } /* ============================================================ BUCHUNGSSTRECKE — Kalender, Zeitfenster, Formular, Verwaltung Aufbau wie im Original: drei Spalten aus Kalender, Verfügbarkeit und Servicedetails, darunter ein zweispaltiges Buchungsformular. ============================================================ */ .booking-head { margin-bottom: 2.5rem; } .booking-head .sub { margin-bottom: 0.6rem; } .booking-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.1fr) minmax(220px, 0.75fr); gap: 3rem; align-items: start; } .booking-col-head { margin-bottom: 1.4rem; } .booking-col-head h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: 0.02em; margin: 0; } .booking-tz { display: block; margin-top: 0.35rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* ---- Monatskalender ---- */ .cal-nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.2rem; } .cal-titel { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; color: #161616; min-width: 11ch; text-align: center; } .cal-pfeil { width: 2.2rem; height: 2.2rem; font-size: 1.4rem; line-height: 1; background: transparent; border: 1px solid var(--line); color: #161616; cursor: pointer; transition: var(--transition); } .cal-pfeil:hover { border-color: var(--accent); color: var(--accent-dark); } .cal-pfeil:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; } .cal-wochentage, .cal-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; } .cal-wochentage { margin-bottom: 0.5rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; } .cal-tag { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.92rem; background: transparent; border: none; cursor: pointer; transition: var(--transition); } .cal-tag span { font-size: 0.68rem; font-weight: 400; line-height: 1; } .cal-tag strong { display: block; font-size: 1rem; line-height: 1.1; } .cal-tag:has(span) { flex-direction: column; gap: 0.1rem; } .cal-leer { visibility: hidden; } /* Buchbare Tage tragen den Punkt, den auch das Original zeigt. */ .cal-tag-frei { color: var(--accent-dark); font-weight: 600; } .cal-tag-frei::after { content: ""; position: absolute; bottom: 0.28rem; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .cal-tag-frei:hover { background: var(--paper-alt); } .cal-tag-aus { color: #c2c2c2; cursor: default; } .cal-tag-aktiv, .cal-tag-aktiv.cal-tag-frei { background: var(--accent); color: #161616; font-weight: 600; } .cal-tag-aktiv::after { background: #161616; } .cal-tag:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: -3px; } /* ---- Zeitfenster ---- */ .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.7rem; } .slot { padding: 0.85rem 0.5rem; font-family: var(--font-body); font-size: 0.95rem; background: var(--paper); border: 1px solid var(--line); color: #161616; cursor: pointer; transition: var(--transition); } .slot:hover { border-color: var(--accent); } .slot-aktiv { background: var(--accent); border-color: var(--accent); font-weight: 600; } .slot:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; } .slot-hinweis { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.92rem; } /* ---- Servicedetails ---- */ .booking-aside { border-left: 1px solid var(--line); padding-left: 2rem; } .booking-service { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.04em; color: #161616; margin: 0 0 0.8rem; } .booking-infos summary { cursor: pointer; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); padding: 0.4rem 0; } .booking-infos p { margin: 0.6rem 0 0; font-size: 0.9rem; } .booking-auswahl { margin: 1.6rem 0 1rem; font-size: 0.92rem; font-weight: 600; color: #161616; } .booking-aside .btn { width: 100%; text-align: center; } .booking-aside .btn:disabled { opacity: 0.45; cursor: not-allowed; } /* Galt bisher NUR fuer .booking-aside. Der Absende-Knopf des Formulars steht nicht darin und sah deshalb auch dann bedienbar aus, wenn er gesperrt war - ein Knopf, der wie ein Knopf aussieht und nichts tut, liest sich als kaputte Seite. Jetzt gilt der Zustand fuer jede gesperrte Schaltflaeche. */ .btn:disabled, button:disabled.btn { opacity: 0.45; cursor: not-allowed; } /* ---- Service-Kachel auf reservieren.html ---- */ .service-card { max-width: 620px; margin: 0 auto; padding: 2.5rem; background: var(--paper-alt); text-align: center; } .service-card-title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 0.6rem; } .service-card .gold-divider { margin: 0 auto 1.4rem; } .service-card-text { margin: 0 auto 1.8rem; max-width: 46ch; } .service-card-meta { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin: 0 0 2rem; text-align: left; } .service-card-meta dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .service-card-meta dd { margin: 0.15rem 0 0; font-weight: 600; color: #161616; } .service-card-hint { margin: 1.4rem 0 0; font-size: 0.88rem; color: var(--muted); } .service-card-hint a { color: var(--accent-dark); } /* ---- Buchungsformular ---- */ .booking-zurueck { display: inline-block; margin-bottom: 1.5rem; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); } .booking-form-grid { display: grid; grid-template-columns: minmax(320px, 1.3fr) minmax(240px, 0.7fr); gap: 3.5rem; align-items: start; } .booking-abschnitt { font-size: 1.2rem; letter-spacing: 0.04em; margin: 0 0 1.5rem; } .booking-hinweis { margin-top: 1.5rem; font-size: 0.88rem; color: var(--muted); } .booking-zusammenfassung { background: var(--paper-alt); padding: 2rem; } .booking-termin { font-weight: 600; color: #161616; margin: 0 0 0.4rem; } .booking-dauer, .booking-ort { margin: 0 0 0.3rem; font-size: 0.9rem; } .booking-aendern { display: inline-block; margin-top: 1.2rem; font-size: 0.85rem; color: var(--accent-dark); text-decoration: underline; } /* ---- Bestätigung und Verwaltung ---- */ .danke-box, .verwalten-box { max-width: 660px; margin: 0 auto; } .danke-text { margin-bottom: 2rem; } .danke-details { display: grid; gap: 0.9rem; margin: 0 0 2.5rem; padding: 1.6rem; background: var(--paper-alt); } .danke-details > div { display: flex; justify-content: space-between; gap: 1.5rem; } .danke-details dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .danke-details dd { margin: 0; font-weight: 600; color: #161616; text-align: right; } .danke-link h2 { font-size: 1.2rem; margin: 0 0 0.6rem; } .danke-url { word-break: break-all; margin: 0.8rem 0 1.2rem; } .danke-url a { color: var(--accent-dark); text-decoration: underline; } .danke-zurueck { margin-top: 2.5rem; } .danke-zurueck a { color: var(--accent-dark); } .verwalten-aktionen h2 { font-size: 1.2rem; margin: 0 0 0.5rem; } .verwalten-neu { margin: 1.2rem 0; } .verwalten-neu label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .verwalten-neu .form-input { max-width: 240px; margin-bottom: 1.2rem; } @media (max-width: 980px) { .booking-grid, .booking-form-grid { grid-template-columns: 1fr; gap: 2.5rem; } .booking-aside { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 2rem; } } @media (max-width: 560px) { .service-card { padding: 1.8rem 1.2rem; } .slot-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .danke-details > div { flex-direction: column; gap: 0.2rem; } .danke-details dd { text-align: left; } } /* Der Verweis auf die Fruehstuecksseite traegt einen langen Text, und .btn verbietet Umbrueche grundsaetzlich. Auf schmalen Schirmen ragte er dadurch aus dem Bild. Nur hier wird der Umbruch wieder erlaubt. */ @media (max-width: 600px) { .menu-cat .btn { white-space: normal; } } /* ============================================================ MOBILE BEDIENBARKEIT Touchziele und iOS-Feldschrift, ohne die Desktop-Optik zu aendern. ============================================================ */ @media (max-width: 900px) { /* Das Original öffnet unter der schwarzen Leiste eine ruhige, weiße Vollbildnavigation. Der Toggle bleibt als Schließen-Knopf erreichbar. */ .nav-drawer { top: var(--nav-height); bottom: 0; padding: 1.2rem 1.5rem 2rem; align-items: stretch; justify-content: center; background: #fff; border: 0; } .nav-drawer a { min-height: 45px; display: flex; align-items: center; justify-content: center; padding: 0.25rem 0; color: #161616; border: 0; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.375rem; font-weight: 400; letter-spacing: 0.02em; } .nav-drawer a.active, .nav-drawer a:hover { color: var(--accent); } .nav-drawer-submenu { font-family: 'Poppins', -apple-system, sans-serif !important; font-size: 1rem !important; letter-spacing: 0 !important; text-transform: none !important; } .nav-drawer-submenu[hidden] { display: none; } .nav-drawer-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; min-height: 45px; margin: -45px calc(50% - 126px) 0 auto; padding: 0; color: #161616; border: 0; background: transparent; font-size: 1.15rem; cursor: pointer; } .nav-drawer-menu-toggle[aria-expanded="true"] { color: var(--accent); transform: rotate(180deg); } body.nav-open .nav-logo { visibility: hidden; } .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } } @media (max-width: 600px) { /* Die beiden langen Überschriften der Buchungsstrecke bleiben innerhalb der 350-px-Inhaltsbreite; Desktop-Typografie bleibt davon unberührt. */ .booking-head h1 { font-size: clamp(2.3rem, 11vw, 3rem); } /* 16 px verhindern den automatischen Fokus-Zoom in iOS. */ .form-input, .form-textarea, .form-line { font-size: 1rem; } /* Bei 360 px bleiben nach dem Container-Padding 320 px: 7 * 44 px Tagesbreite + 6 * 2 px Abstand = 320 px. */ .cal-wochentage, .cal-tage { grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 2px; } .cal-nav { gap: 0.75rem; } .cal-pfeil, .cal-tag { min-width: 44px; min-height: 44px; } .booking-zurueck, .booking-aendern { display: inline-flex; align-items: center; min-height: 44px; } .footer-social a { width: 44px; height: 44px; } .footer-col ul { gap: 0; } .footer-col ul li a, .footer-col address a, .footer-bottom-links a { display: inline-flex; align-items: center; min-height: 44px; } .cookie-actions button { min-height: 44px; } /* Die seitenspezifische Regel in menue.html kommt spaeter in der Kaskade; der zusaetzliche .menu-cat-Kontext gewinnt per Spezifitaet. */ .menu-cat .menu-card-desc { font-size: 0.875rem; } } @media (max-width: 374px) { /* Lange Hero-Titel passen in die 296 px Inhaltsbreite bei 360 px. */ .page-hero-content h1 { font-size: clamp(2.25rem, 12vw, 3rem); } } /* Karriere-Kopfbereich: die Hoehe stand vorher inline im HTML und liess sich deshalb per Media Query nicht aendern. Jetzt als Klasse, damit die Handy-Regel weiter unten greifen kann. Desktop-Wert unveraendert 500px. */ .page-hero-karriere { height: 500px; } /* ============================================================ Angleichung an das Original, Handy — Stand 2026-08-05 Grundlage: _audit/06-mobil-vollabgleich.md, Befunde 9 und 18. Şafak-Entscheid 2026-08-05: beide Seiten duerfen gleich sein, Ausnahme ist allein die Buchungsstrecke. ============================================================ */ @media (max-width: 700px) { /* --- Befund 18: Fliesstext hoch, Ueberschriften runter --- Gemessen am Original: Fliesstext 16-22px bei Zeilenhoehe bis 35,2; H1 34-45px. Der Klon setzte Ueberschriften groesser (48px) und Fliesstext kleiner (17,6px) — auf den Textseiten fehlten dadurch 15 bis 25 Prozent Schriftgroesse. */ .prose p, .prose li { font-size: 1.375rem; line-height: 1.6; } .page-hero-content h1, h1, .h1 { font-size: 2.4rem; line-height: 1.05; } /* Hier stand Blocksatz fuer die Stellenkaertchen. Er hat nie gegriffen, weil die Kaertchen ihren Text in tragen, nicht in

. Entfernt am 2026-08-21, zusammen mit dem Blocksatz im Einstiegstext: auf Handybreite reisst er in beiden Faellen Loecher zwischen die Woerter. Am Rechner bleibt der Einstiegstext im Blocksatz, so wie im Original. */ /* Kein text-transform auf den Job-Seiten: am Original gemessen steht dort `none`. Die Versalien im Bericht stammen aus dem Text selbst, nicht aus CSS. */ /* Kein zusaetzlicher text-decoration-Unterstrich: `.u-head` zieht die Linie bereits als border-bottom (Zeile 1470). Beides zusammen ergab einen doppelten Strich, den das Original nicht hat — dort ist es genau eine Linie. */ /* Oeffnungszeiten mit Sommer und Winter nebeneinander (Şafak 2026-08-05). Drei Spalten muessen bei 360px in rund 296px Inhaltsbreite passen, deshalb kurze Tagesnamen und kompakte Zellen. Der lange Name bleibt fuer Screenreader im DOM. */ .hours-table-saison { width: 100%; font-size: 0.8rem; } .hours-table-saison td, .hours-table-saison th { padding: 0.2rem 0.15rem; white-space: nowrap; } .hours-table-saison thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); line-height: 1.25; } .hours-table-saison .hours-span { display: block; font-size: 0.62rem; letter-spacing: 0.04em; opacity: 0.75; text-transform: none; } .hours-table-saison tbody th { text-align: left; font-weight: 500; } .hours-table-saison tbody td { text-align: right; } /* Letzter offener Rest aus Befund 20: der Datenschutz-Link im Cookie-Banner mass 144x19 px und war damit auf 19 von 20 Seiten das kleinste antippbare Ziel der ganzen Seite. Der Banner selbst bleibt bewusst anders als im Original, weil der Klon wirklich keine Cookies setzt. */ /* Nachtrag 2026-08-22: Die erste Fassung dieser Regel loeste das Trefferflaechen-Problem, schuf aber ein groesseres. `line-height: 44px` auf einem Link mitten im Satz vergroessert die Zeilenhoehe des ganzen Absatzes und erzwingt einen Umbruch davor - im Simulator auf dem iPhone stand "vorher." dadurch allein in einer 44 px hohen Zeile. Der Balken kam so auf 232 px und verdeckte auf einem iPhone SE 42 % des ersten Bildschirms. Die Trefferflaeche waechst jetzt ueber ein Pseudoelement statt ueber die Zeilenhoehe: der Link bleibt typografisch eine normale Inline-Auszeichnung, antippbar ist er trotzdem auf 44 px Hoehe. Das Pseudoelement liegt im Link selbst, vergroessert also nur dessen eigene Flaeche und schluckt keine Beruehrungen, die woanders hin gehoeren. */ .cookie-inner a { position: relative; } .cookie-inner a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); /* 48 statt der geforderten 44 px: die Flaeche liegt mittig auf einer 19 px hohen Zeile, und bei genau 44 landet man je nach Rundung auf 43. Die Reserve kostet nichts, weil das Pseudoelement nicht im Fluss liegt. */ height: 48px; } /* Der Balken war am Handy rund 180 px hoch - die groesste Flaeche auf dem ersten Bildschirm, fuer die Aussage, dass nichts passiert. Er hat damit auf /fruehstueck-dortmund den Handlungsaufruf verdeckt und auf der Startseite die beiden Hero-Schaltflaechen; letzteres ist ueber --cookie-hoehe geloest, aber die Ursache war die Hoehe selbst. Gekuerzt wird jetzt der Text, nicht nur der Abstand: Der Zusatz zur Google-Karte steckt in .cookie-detail und entfaellt am Handy. Die tragende Aussage und beide Antworten bleiben vollstaendig sichtbar, der Zusatz steht weiterhin in der Datenschutzerklaerung dahinter. */ .cookie-banner { padding: 0.8rem 1.1rem; /* Der Balken sitzt am unteren Rand, wo beim iPhone der Bedienbalken liegt. Ohne den Zuschlag rutschen die Knoepfe darunter. */ padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)); } .cookie-inner { gap: 0.65rem; } .cookie-inner p { font-size: 0.8rem; line-height: 1.45; min-width: 0; } .cookie-detail { display: none; } /* Beide Antworten nebeneinander statt untereinander. Gleich breit, damit keine der beiden wie die vorgesehene aussieht. */ .cookie-actions { width: 100%; gap: 0.5rem; } .cookie-actions button { flex: 1 1 0; min-width: 0; } } /* Auf niedrigen Bildschirmen zaehlt jede Zeile doppelt. Enger gestellt wird nur der Abstand, nicht die Trefferflaeche: die 44 px der beiden Knoepfe bleiben, dafuer gibt es keine Untergrenze zu unterbieten. */ @media (max-width: 600px) and (max-height: 700px) { .cookie-banner { padding: 0.55rem 1rem; padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)); } .cookie-inner { gap: 0.45rem; } .cookie-inner p { font-size: 0.78rem; line-height: 1.4; } /* --- Befund 6: /karriere, Teamfoto vollstaendig --- Ein 500px hoher Kasten schneidet ein Querformat-Teamfoto zwangslaeufig seitlich an — sichtbar waren 52 Prozent, also vier bis fuenf statt neun Personen. Das Original loest das anders: Foto frei bei 200px Hoehe, Text darunter. Genau das machen wir auf dem Handy, mit der fuers Handy zugeschnittenen Originaldatei (780x400). Der Aufbau am Desktop bleibt. */ .karriere-seite .page-hero { height: auto; display: block; } .karriere-seite .page-hero-bg { position: static; height: 200px; } /* --- Befund 9: Fusszeile kompakter und zentriert --- Original 695-800px hoch, zentriert, Versalien. Der Klon kam auf 1235px und machte damit auf /reservieren 49 Prozent der Seite aus. Der Navigationsblock bleibt (Şafak-Entscheid 2026-08-02), ebenso die 44px-Bedienziele — gekuerzt werden nur die Abstaende. */ .site-footer { padding-top: 32px; text-align: center; } .footer-grid { gap: 1.25rem; padding-bottom: 1.75rem; } .footer-col h4 { text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.4rem; } .footer-col ul li a { padding: 0.25rem 0; } .footer-col address { font-style: normal; line-height: 1.6; } .hours-table { margin: 0 auto; } .hours-table tr { border: none; } .hours-table td, .hours-table th { padding: 0.15rem 0.5rem; } .footer-social { justify-content: center; } .footer-bottom { align-items: center; text-align: center; gap: 0.25rem; padding: 0.75rem 0; } .footer-bottom-links { justify-content: center; } } /* Saison-Tabelle: am Desktop die vollen Tagesnamen, auf dem Handy die kurzen (Regel in der Media Query weiter oben). */ .hours-table-saison .tag-kurz { display: none; } .hours-table-saison .tag-lang { display: inline; } .hours-table-saison thead th { color: var(--accent); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3; } .hours-table-saison .hours-span { display: block; font-size: 0.68rem; opacity: 0.75; text-transform: none; letter-spacing: 0.03em; } .hours-table-saison tbody th { text-align: left; font-weight: 500; padding-right: 1rem; } .hours-table-saison tbody td { text-align: right; padding-left: 0.9rem; white-space: nowrap; } /* Erst unter 380px wird es eng genug fuer Kurznamen. Bei 390px passen die vollen Tagesnamen und lesen sich besser. Der lange Name bleibt im DOM, damit Screenreader ihn immer bekommen. */ @media (max-width: 379px) { .hours-table-saison .tag-lang { display: none; } .hours-table-saison .tag-kurz { display: inline; } .hours-table-saison { font-size: 0.75rem; } } /* ============================================================ Angleichung ans Original, Runde 2 — Stand 2026-08-05 Regel von Şafak: klonen, ausser er hat ausdruecklich widersprochen. Alle Werte am Original bei 390px gemessen, nicht geschaetzt. ============================================================ */ /* --- Muster 1: Laufweite. Das Original sperrt Ueberschriften nirgends, der Klon durchgehend um 0,34 bis 0,58px (kommt von Bebas Neue). --- */ h1, .h1, h2, .h2, h3, .h3, .menu-section-title, .cat-title, .menu-page-header h1, .page-hero-content h1, .u-head { letter-spacing: normal; } /* --- Muster 2: Ueberschriftenfarbe. Original reines Schwarz, Klon #161616. --- */ h1, .h1, h2, .h2, h3, .h3, .menu-section-title, .cat-title, .menu-page-header h1, .prose h1, .prose h2, .prose h3 { color: #000; } /* Ausgenommen bleibt, was auf einem Foto steht. Diese Regel hatte `.page-hero-content h1` mitgenommen und damit die weisse Zeile aus Zeile 1346 ueberschrieben - gleiche Spezifitaet, spaeter im Blatt, also gewinnt Schwarz. Ergebnis: auf /reservieren und den fuenf Stellenseiten stand die Hauptzeile schwarz auf einem dunklen Innenraumfoto und war praktisch nicht zu lesen. Gefunden am 2026-08-21 beim Ansehen, nicht beim Messen: die Kontrastmessung an der Glyphe haelt die Schrift selbst fuer den Grund und meldete brav 1,00:1 auch dort, wo alles stimmt. */ .page-hero-content h1, .banner-content h2 { color: #fff; } /* --- Muster 3: Fliesstext auf den Job-Seiten. Original schwarz, Klon grau. --- */ .job-seite .prose p, .job-seite .prose li { color: #000; } /* --- Muster 4: Formular-Knoepfe. Am Original nachgemessen (2026-08-21, /kontakt): Flaeche #4f4f4f, weisse Schrift, gemischte Schreibung, 6px Radius, 13,3px. Die frueher hier notierte schwarze Schrift stimmte nicht; sie gehoert zum Ueberfahren-Zustand. Der Klon hatte an dieser Stelle ein Braun, das im Original nirgends vorkommt. --- */ .seite-kontakt form button[type="submit"], .seite-bewertung form button[type="submit"], .seite-bewerbungsformular form button[type="submit"] { background-color: #4f4f4f; border-color: #4f4f4f; color: #fff; text-transform: none; border-radius: 6px; font-size: 13.3px; letter-spacing: normal; } @media (hover: hover) and (pointer: fine) { .seite-kontakt form button[type="submit"]:hover, .seite-bewertung form button[type="submit"]:hover, .seite-bewerbungsformular form button[type="submit"]:hover { background-color: #000; border-color: #000; color: #91857a; } } /* --- Muster 5 und 6: Ausrichtung, Versalien und Schriftgrad je Seite. Das Original hat kein durchgaengiges System, jede Seite traegt eigene Werte. Şafak-Entscheid 2026-08-05: Einzelwerte hart setzen. Zugeordnet wird nach sichtbarer Rolle, nicht nach Tag — das Original nutzt oft h2 als Hauptzeile. --- */ .seite-dasbernstein h1, .seite-dasbernstein h2 { font-size: 45px; text-align: center; } .seite-menue .menu-page-header h1 { font-size: 34px; text-align: center; } .seite-menue .menu-section-title, .seite-menue h1:not(.sr-only), .seite-menue h2, .seite-menue h3 { font-size: 28px; text-align: center; font-weight: 400; color: #000; } .seite-reservieren h1, .seite-reservieren h2 { font-size: 40px; text-align: left; } .karriere-seite h1 { font-size: 26px; text-align: center; } .karriere-seite h2, .karriere-seite h3 { font-size: 28px; text-align: center; } .seite-bewertung h1 { font-size: 30px; text-align: center; } .seite-impressum h1, .seite-impressum h2, .seite-impressum h3, .seite-datenschutz h1, .seite-datenschutz h2, .seite-datenschutz h3 { font-size: 19px; text-align: center; } /* Kein text-transform: das Original steht auf `none`. Dass die Datenschutz- Ueberschriften dort gross erscheinen, liegt am Text selbst, nicht am CSS — das waere eine Inhalts-, keine Stilfrage. */ .job-seite .page-hero-content h1 { font-size: 50px; text-align: center; } .job-seite .prose h2, .job-seite .prose h3 { font-size: 22px; text-align: start; } .seite-bewerbungsformular h1, .seite-bewerbungsformular h2 { font-size: 22px; text-align: center; } .seite-fruehstueck-dortmund h1 { font-size: 35px; text-align: start; } .seite-fruehstueck-dortmund h2, .seite-fruehstueck-dortmund h3 { font-size: 30px; text-align: start; } /* /dasbernstein ist die einzige Seite, auf der das Original die Ueberschriften sperrt — dort 2,7px. Die pauschale Regel `letter-spacing: normal` weiter oben waere hier also falsch. */ .seite-dasbernstein h1, .seite-dasbernstein h2, .seite-dasbernstein h3 { letter-spacing: 2.7px; } /* ============================================================ Schriftgrade am Original gemessen, 2026-08-06. Der Durchgang vom 05.08. hatte nur die mobile Sicht abgedeckt und deshalb mehrere Seiten am Desktop auf falschen Werten gelassen — unter anderem sprang h1 dort auf die Grundregel von 96px zurueck. Gemessen wurde je Seite mit getComputedStyle am Original. ============================================================ */ /* Startseite: H1 35, Abschnittsueberschriften 50 (Laufweite 3px), der Kaffee-Block 48 (Laufweite 6,24px), Unterzeilen 25, Fliesstext 20. */ body.seite-index h1 { font-size: 35px; } body.seite-index h2 { font-size: 50px; letter-spacing: 3px; } body.seite-index .banner-content h2 { font-size: 48px; letter-spacing: 6.24px; } /* Menue: Titel 36, Rubriken 37 mit 2,22px Laufweite, Artikelnamen 28, Beschreibungen 18. Der Klon lag bei 13,76 und 12,8 — das ist der Grund, warum unsere Karte 7881 statt 11076 Pixel hoch war. */ body.seite-menue .menu-page-header h1 { font-size: 36px; } body.seite-menue .cat-title { font-size: 37px; letter-spacing: 2.22px; } body.seite-menue .menu-card-name { font-size: 28px; font-weight: 400; letter-spacing: normal; } body.seite-menue .menu-card-desc { font-size: 18px; } body.seite-menue .cat-note, body.seite-menue .menu-card-waffel-list { font-size: 18px; } /* Fruehstueck: H1 40, alle weiteren Ueberschriften 30 mit 1,8px Laufweite. */ body.seite-fruehstueck-dortmund h1 { font-size: 40px; } body.seite-fruehstueck-dortmund h2, body.seite-fruehstueck-dortmund h3 { font-size: 30px; letter-spacing: 1.8px; } /* Kontakt: die Hauptzeile misst im Original 40px. */ body.seite-kontakt h1, body.seite-kontakt h2 { font-size: 40px; } /* Impressum und Datenschutz: Hauptzeile 28, alle Zwischenzeilen 19. */ body.seite-impressum h1, body.seite-datenschutz h1 { font-size: 28px; } body.seite-impressum h2, body.seite-impressum h3, body.seite-datenschutz h2, body.seite-datenschutz h3 { font-size: 19px; } /* Bewerbungsformular: "Jobs" 40 mit 6,4px Laufweite, die Ansprache 22 mit 3,52px. */ body.seite-bewerbungsformular h1 { font-size: 40px; letter-spacing: 6.4px; } body.seite-bewerbungsformular h2, body.seite-bewerbungsformular .application-head p { font-size: 22px; letter-spacing: 3.52px; } @media (max-width: 600px) { body.seite-index h2, body.seite-index .sec-dark h2 { font-size: 32px; letter-spacing: 2px; } body.seite-menue .menu-card-name { font-size: 20px; } body.seite-menue .menu-card-desc { font-size: 15px; } body.seite-menue .cat-title { font-size: 28px; } } /* Auf /fruehstueck-dortmund ist "Frühstück für jeden Geschmack" im Original eine Zwischenzeile in 30px, bei uns lief sie als Unterzeile in 17,6px. */ body.seite-fruehstueck-dortmund .breakfast-sub { font-size: 30px; letter-spacing: 1.8px; } @media (max-width: 600px) { body.seite-fruehstueck-dortmund .breakfast-sub { font-size: 22px; } } /* ===== Korrekturen aus dem Gesamttest 2026-08-20 ===== */ /* 1. Split-Bloecke: die Bilder liegen im Hochformat (1056x1584) vor und haben die Zeile auf 1188px gestreckt, waehrend der Text nur 279px braucht. Das ergab bis zu 769px leere Flaeche neben dem Bild. Die Bildspalte bekommt jetzt eine Deckelung, object-fit: cover beschneidet statt zu strecken. */ .split-image { max-height: 560px; } @media (max-width: 900px) { .split-image { max-height: 320px; min-height: 220px; } } /* 2. Fliesstext im gespiegelten Split war rechtsbuendig. Ueber sechs Zeilen flattert dabei der linke Rand, an dem das Auge die naechste Zeile sucht. Ueberschriften duerfen ausgerichtet bleiben, der Lauftext nicht. */ .split-text.align-right p, .split-text.align-right ul, .split-text.align-right ol { text-align: left; } /* 3. Hinweiskasten auf /menue stand weiss auf weiss (gemessen 1,00:1). Der Kasten erbte die helle Schrift der dunklen Section, hatte aber selbst einen hellen Hintergrund. */ .notice-box, .bg-black .notice-box, .sec-dark .notice-box { color: #2c2c2c; } .notice-box p, .bg-black .notice-box p, .sec-dark .notice-box p { color: #2c2c2c; } .notice-box strong { color: #161616; } /* 4. Kontrast: das Gold #b96f05 erreichte auf Weiss nur 3,93:1 und auf dem beigen Grund 3,53:1, gefordert sind 4,5:1 fuer Fliesstext. Der dunklere Ton haelt die Anmutung und kommt ueber die Schwelle. */ :root { --accent-dark: #8a5203; } .form-check a:not(.btn), .notice-box a:not(.btn), .prose a:not(.btn), .map-consent-text a:not(.btn), .service-card-hint a:not(.btn), .booking-zurueck, .booking-aendern, .danke-zurueck a:not(.btn), .booking-infos > summary { color: #8a5203; } /* Schaltflaechen behalten ihre eigene Schriftfarbe. Ohne das :not(.btn) oben erbte der Knopf "Jetzt Bewerben" auf den Stellenseiten die Linkfarbe und stand damit braun auf braunem Grund, also unsichtbar. */ .prose a.btn-gold, .prose .btn-gold { color: #fff; } /* Beschriftungen in Gold auf Weiss: /karriere H1 und Labels lagen bei 2,46:1. */ .kar-intro-text h1, .section-pad .label { color: #8a5203; } /* Achtung: .bg-dark und .bg-black liefern seit dem Hell-Umbau weissen Grund (style.css Zeile 1280), nur .sec-dark ist wirklich dunkel. Deshalb bekommt ausschliesslich .sec-dark das helle Gold. */ .sec-dark .label { color: var(--color-gold-light); } /* Schaltflaechen: schwarze Schrift auf mittelgrauem Gold ergab 1,50:1 bis 2,56:1. Heller Text auf dem dunklen Gold loest das. */ /* Schaltflaechen nach dem Original. Am gerenderten Element von bernsteincafe.de gemessen (Start, Reservieren, Kontakt, Karriere - ueberall dieselbe): Flaeche #4f4f4f, weisse Schrift, Ecken 5 px; beim Ueberfahren Flaeche Schwarz und Schrift #91857a. Der Klon trug hier ein Gold, das im Original nirgends als Flaeche vorkommt - dort ist Gold allein die Schriftfarbe des aktiven Menuepunkts. Kontrast beider Zustaende geprueft: 8,19:1 und 5,84:1. */ .btn-gold { background: #4f4f4f; color: #fff; border: 1.5px solid #4f4f4f; border-radius: 5px; } /* Der Schwarz-Zustand gilt nur fuer Zeigegeraete. Auf einem Beruehrungsgeraet kennt der Browser kein Verlassen des Elements: nach dem Antippen bliebe der Knopf schwarz stehen, bis irgendwo anders getippt wird. Das Original hat diese Absicherung nicht. */ @media (hover: hover) and (pointer: fine) { .btn-gold:hover { background: #000; border-color: #000; color: #91857a; transform: none; } } /* Der Umriss-Knopf traegt Sekundaeraktionen auf hellem Grund. Sein Gold-Ueberfahren passte nicht mehr zur Flaeche oben. */ .btn-outline { border-radius: 5px; } .btn-outline:hover { border-color: #4f4f4f; color: #4f4f4f; background: transparent; } .btn-hell { border-radius: 5px; } /* Auf dem Hero liegt der Knopf auf bewegtem Bild statt auf Weiss. Das Grau des Originals verliert dort seine Kante, weil das Video an dieser Stelle selbst dunkel ist. Eine helle Umrandung stellt sie wieder her, ohne die Farbe zu aendern. Das Original hat an dieser Stelle keinen Knopf, es gibt also keine Vorlage, von der das abweichen koennte. */ .hero-home-aktionen .btn-gold { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); } .hero-home-aktionen .btn-gold:hover { border-color: #fff; } /* Kalender: inaktive Tage lagen bei 1,78:1 und waren nicht mehr als Datum erkennbar, freie Tage bei 3,93:1. */ .cal-tag-aus span, .cal-tag-aus strong { color: #6b6b6b; } .cal-tag-frei span, .cal-tag-frei strong { color: #8a5203; } /* Urheberhinweis auf /datenschutz lag bei 3,10:1. */ .prose p { color: #4a463f; } /* 5. Fingerbedienung: Auswahlfelder waren 16x16 bzw. 18x18 px, die Galeriepfeile 34x34 px. Empfohlen sind 44x44 px. Die Kaestchen selbst bleiben klein, die Trefferflaeche waechst ueber das Label. */ .rate-group input[type="radio"], .form-check input[type="checkbox"] { width: 22px; height: 22px; } .rate-group label, .form-check label { min-height: 44px; align-items: center; } .db-pfeil { width: 44px; height: 44px; } /* 6. Hero der Startseite: bis dahin ein stummes Video ohne ein Wort Text. Die Ueberschrift der Seite stand erst bei 1363px, also nach zwei vollen Bildschirmhoehen. Jetzt tragen Name, Einordnung und zwei Wege in den Hero. */ .hero-home-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.75) 100%); } /* Der Datenschutz-Balken liegt fest am unteren Rand des Sichtfensters (position: fixed, z-index 2000) und ist am Handy rund 180px hoch. Der Hero ist 690px hoch und haengt seinen Textblock unten an - beide trafen sich genau dort, wo die beiden Schaltflaechen sitzen. Gemessen am 2026-08-24 auf 412x732: von "Tisch reservieren" blieben 20px Oberkante uebrig, "Zur Speisekarte" lag vollstaendig darunter, und ein Fingertipp traf den Balken statt den Knopf (Eckentest 0 von 4 frei). HTTP 200 kam trotzdem, deshalb hat es keine der bestehenden Pruefungen gesehen. main.js misst jetzt, wie viel vom Hero der Balken wirklich verdeckt, und legt das Ergebnis in --cookie-hoehe ab. Der Textblock weicht so weit aus, wie noetig ist, und rutscht nach der Entscheidung von selbst zurueck. */ .hero-home-inhalt { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--cookie-hoehe, 0px); padding: 0 2rem 3.5rem; max-width: var(--max-width); margin: 0 auto; text-align: left; transition: bottom 0.25s ease; } @media (prefers-reduced-motion: reduce) { .hero-home-inhalt { transition: none; } } .hero-home-name { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; letter-spacing: 0.02em; color: #fff; margin: 0 0 0.35rem; } .hero-home-zeile { font-size: clamp(1rem, 2.2vw, 1.25rem); color: rgba(255,255,255,0.94); margin: 0 0 1.6rem; } .hero-home-aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; } .hero-home-aktionen .btn { min-height: 48px; display: inline-flex; align-items: center; } .btn-hell { background: rgba(255,255,255,0.96); color: #161616; border: 1.5px solid rgba(255,255,255,0.96); } .btn-hell:hover { background: #fff; color: #000; } .hero-home-zeiten { font-size: 0.92rem; color: rgba(255,255,255,0.9); margin: 0; } @media (max-width: 600px) { .hero-home-inhalt { padding: 0 1.25rem 2.25rem; } .hero-home-aktionen .btn { flex: 1 1 100%; justify-content: center; } } /* 7. Oeffnungszeiten: Sommer und Winter standen gleichwertig nebeneinander, ohne Hinweis, welche Spalte heute gilt. oeffnungszeiten.js setzt die Klassen. */ .hours-table-saison .hours-aktiv { color: #fff; font-weight: 600; } .hours-table-saison thead th.hours-aktiv { color: var(--color-gold-light); } .hours-table-saison tr.hours-heute th, .hours-table-saison tr.hours-heute td { background: rgba(255,255,255,0.07); } /* Der helle Streifen lag vorher nur auf dem Wochentag und auf der Zelle der laufenden Saison, nicht auf der zweiten Zeitspalte. Damit endete er mitten in der Tabelle, und die Zeile sah aus, als waere sie abgeschnitten. Welche Saison gerade gilt, sagt weiterhin `.hours-aktiv` ueber Farbe und Fettung - dafuer braucht es den Streifen nicht, der markiert den heutigen Tag. Gefunden am 2026-08-21 im Fussbild bei 393 px. */ /* 8. Stellenliste auf /karriere: fuenf flache Kaestchen von rund 50px Hoehe mit je einem Punkt und einem Wort. Das wichtigste Element der Seite sah aus wie eine Tabellenzelle und gab nicht zu erkennen, dass es ein Link ist. */ .job-list { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .job-item { min-height: 96px; padding: 1.35rem 1.5rem; border: 1px solid var(--color-border); background: #fff; justify-content: space-between; transition: border-color 0.2s ease, transform 0.2s ease; } .job-item:hover, .job-item:focus-visible { border-color: #8a5203; transform: translateY(-2px); } .job-item span { font-size: 1.05rem; font-weight: 600; } /* Der Punkt war reine Dekoration; ein Pfeil sagt, dass es weitergeht. */ .job-item .job-dot { display: none; } .job-item::after { content: "\203A"; font-size: 1.6rem; line-height: 1; color: #8a5203; flex-shrink: 0; } .job-item-zusatz { display: block; font-size: 0.82rem; font-weight: 400; color: #6b6459; margin-top: 0.2rem; } /* 9. Horizontaler Ueberlauf bei 320px auf /booking-calendar (20px) und /fruehstueck-dortmund (6px). Beide Male dieselbe Ursache: Kinder eines Grids haben von sich aus min-width: auto und koennen deshalb breiter werden als die Spalte, wenn ihr Inhalt nicht schrumpfen will. */ .booking-grid > *, .split > *, .booking-col, .split-text, .split-image { min-width: 0; } .booking-col, .cal, .cal-nav, .booking-col-head { max-width: 100%; } /* Das Tagesraster stand auf sieben festen 44px-Spalten. Zusammen mit den Abstaenden sind das mehr als die 280px, die bei einem 320px breiten Gerät im Inhaltsbereich zur Verfuegung stehen - daher der 20px-Ueberlauf. Flexible Spalten fuellen die Breite, ohne sie zu ueberschreiten. */ .cal-tage { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-tage .slot-hinweis { grid-column: 1 / -1; min-width: 0; } /* 10. Abstaende: zwischen einzelnen Abschnitten standen bis zu 576px Leere. Das ist mehr als ein halber Bildschirm ohne Inhalt. */ @media (min-width: 901px) { .section-pad { padding-top: 72px; padding-bottom: 72px; } } /* ===== Ende Korrekturen Gesamttest ===== */ /* ===== Formular-Korrekturen 2026-08-20 ===== */ /* Die Felder trugen ihre Bedeutung allein im Platzhalter. Der verschwindet beim ersten Zeichen, und wer das Formular danach durchsieht, sieht nur noch Werte ohne Bezeichnung. Die bereits vorhandene Beschriftung fuer Screenreader wird deshalb sichtbar, sobald das Feld angesteuert wird oder Inhalt hat. Der Platz ist dauerhaft reserviert, damit beim Tippen nichts springt. */ .form-group:has(:is(input, textarea)[placeholder]) > label.sr-only, .form-group:has(> select) > label.sr-only { position: relative; z-index: 1; display: block; width: auto; height: 1.95rem; margin: 0; padding: 0.55rem 0 0.5rem; clip: auto; overflow: visible; white-space: nowrap; font-size: 0.75rem; line-height: 0.95rem; letter-spacing: 0.02em; color: #5f5f5f; opacity: 0; transition: opacity 0.15s ease; } /* Sichtbar wird die Beschriftung nur ueber Feldern mit Platzhalter. Eine Auswahlliste traegt ihre Bedeutung in der ersten Option und stuende sonst doppelt da - sie bekommt oben aber trotzdem denselben reservierten Streifen. Ohne den war ihre Gruppe rund 32 px flacher als die Nachbarn, und im Bewerbungsformular sprang der Abstand zwischen den Feldern von 54 px auf 23 px. Aufgefallen ist das nicht beim Zaehlen, sondern beim Ansehen bei 393 px: die Reihe wirkte an einer Stelle zusammengeschoben. */ .form-group:has(:is(input, textarea)[placeholder]:not(:placeholder-shown)) > label.sr-only, .form-group:has(:is(input, textarea)[placeholder]:focus) > label.sr-only { opacity: 1; } /* Ein Feld, das die Pruefung nicht besteht, ist bisher nur am Browser-Hinweis erkennbar, der nach wenigen Sekunden verschwindet. Der rote Rahmen bleibt. */ .form-line[aria-invalid="true"], .form-input[aria-invalid="true"] { border-color: #b3261e; } .form-group:has(:is(input, textarea)[placeholder][aria-invalid="true"]) > label.sr-only { opacity: 1; color: #b3261e; } /* ===== Ende Formular-Korrekturen ===== */ /* ===== Reservierungskachel auf schmalen Ansichten (2026-08-21) ===== Die Kachel ist durchgehend mittig aufgebaut: Ueberschrift, Trennstrich, Text und Knopf teilen sich eine Achse. Die beiden Angaben darunter lagen in einer Reihe mit linksbuendigem Text. Sobald sie untereinander brechen, wird jeder Block einzeln mittig gesetzt - und weil "90 Minuten" viel kuerzer ist als die Adresse, standen die Beschriftungen gemessene 89 px versetzt. Untereinander folgen sie jetzt derselben Achse wie der Rest. Die Telefonnummer brach ausserdem mitten in der Vorwahl um. */ @media (max-width: 767px) { .service-card-meta { display: grid; grid-template-columns: 1fr; gap: 1.15rem; text-align: center; } .service-card-hint a { white-space: nowrap; } } /* ===== Hero-Video am Handy (2026-08-21) ===== Das Video liegt im Querformat vor, der Hero steht am Handy im Hochformat. Bei object-fit: cover bleibt davon nur das mittlere Drittel uebrig, und das zeigt Stuhllehnen und eine Vase in starker Vergroesserung - vom Cafe ist nichts zu erkennen. Die Aussage des Bildes sitzt links: Fassade, Schriftzug, Sonnenschirme. Der Ausschnitt wandert deshalb dorthin. Am Rechner bleibt alles wie bisher, dort passt das Seitenverhaeltnis ohnehin. */ @media (max-width: 700px) { .hero-home video, .hero-home img { object-position: 32% center; } } /* ===== Seitentitel der Speisekarte (2026-08-21) ===== Fuellt den Platz, der vorher leer war, und nennt die Seite beim Namen. Der obere Abstand wird gleichzeitig verkleinert, damit die Seite dadurch nicht laenger wird als vorher - der Raum bekommt eine Aufgabe, statt zusaetzlichen dazuzunehmen. */ .menue-titel { margin: 0 0 1.1rem; text-align: center; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.06; letter-spacing: -0.01em; } .seite-menue .section-pad { padding-top: 24px; } @media (min-width: 768px) { .seite-menue .section-pad { padding-top: 40px; } } /* ===== Linke Kanten auf /fruehstueck-dortmund (2026-08-21) ===== Die Seite baut ihre Wechselbloecke auf zwei Arten: die meisten als `section.split` direkt im Dokument, zwei aber als `.split` innerhalb eines `.container`. Am Rechner faellt das nicht auf, weil beide Varianten in derselben Spalte landen. Auf dem Handy stapeln sie sich, und dann traegt der `.container` seine eigenen 20 px zusaetzlich: gemessen bei 393 px standen Bilder mal auf 0 und mal auf 20, Text mal auf 24 und mal auf 44. Vier verschiedene linke Kanten auf einer Seite - das Auge sucht beim Scrollen jedes Mal neu, wo die Zeile anfaengt. Sobald die Spalten uebereinanderliegen, gibt der Container seinen seitlichen Abstand deshalb ab; die Abstaende kommen dann allein aus `.split-text`, genau wie bei den anderen Bloecken. */ @media (max-width: 900px) { .container:has(> .split) { padding-left: 0; padding-right: 0; } } /* ===== Eine linke Kante fuer die ganze Seite (2026-08-21) ===== Beim Durchblaettern auf dem Handy wanderte der Textrand von Seite zu Seite: gemessen bei 393 px lagen Speisekarte, Bewertung, Impressum, Datenschutz und Reservierungsbedingungen auf 20 px, die Wechselbloecke auf Start- und Fruehstuecksseite auf 24 px, die grossen Kopfbilder auf /reservieren und den Stellenseiten auf 32 px, der Einstieg auf /karriere ebenfalls auf 32 px. Jede Seite fuer sich wirkt ordentlich; nacheinander gelesen springt die Kante, an der das Auge die Zeile ansetzt, dreimal um bis zu 12 px. Der haeufigste Wert gewinnt, weil dann am wenigsten Seiten sich aendern: 20 px, also die 1,25 rem, die `.container` mobil ohnehin schon setzt. Am Rechner bleibt alles wie es war - dort tragen die breiteren Abstaende das Layout, und dort faellt der Unterschied auch nicht auf, weil die Bloecke nebeneinander statt untereinander stehen. */ @media (max-width: 767px) { .page-hero-content { padding-left: 1.25rem; padding-right: 1.25rem; } .split-text { padding-left: 1.25rem; padding-right: 1.25rem; } .hero-home-inhalt { padding-left: 1.25rem; padding-right: 1.25rem; } } /* ===== Rechtstexte: Ueberschrift wieder groesser als ihr Text (2026-08-22) ===== Auf dem iPhone standen Impressum und Datenschutz auf dem Kopf: 17 Zwischen- ueberschriften in 19 px ueber einem Fliesstext in 22 px. Die Ueberschrift war also kleiner als der Text, den sie ankuendigt - und weil sie zusaetzlich in der schmalen Anzeigeschrift steht, wirkte sie noch kleiner, als die Zahl sagt. Die Datenschutzseite kam so auf 8.926 px Hoehe. Nicht die Ueberschrift war zu klein, der Text war zu gross. Verursacher ist die Sammelregel `.prose p { font-size: 1.375rem }` weiter oben, die aus einem Befund zu den Stellenseiten stammt und dort auch richtig ist - das Original misst auf /servicekraft wirklich 22 px. Auf /impressum und /datenschutz misst es 15 px (nachgemessen am 2026-08-22 bei 402 px), und genau die stehen jetzt auch hier. Bewusst NICHT uebernommen: das Original zentriert diese Texte. Ueber mehrere hundert Woerter Rechtstext flattert dabei der linke Rand, an dem das Auge die naechste Zeile sucht. Dieselbe Entscheidung wie beim Blocksatz auf /karriere - Ausrichtung folgt der Lesbarkeit, Groesse folgt dem Original. */ body.seite-impressum .prose p, body.seite-impressum .prose li, body.seite-datenschutz .prose p, body.seite-datenschutz .prose li { font-size: 15px; line-height: 1.65; } /* ===== Oeffnungszeiten: Kopf ueber seine eigene Spalte (2026-08-22) ===== Die Werte stehen mobil rechtsbuendig, die Spaltenkoepfe SOMMER und WINTER aber linksbuendig. Kopf und Zahlen hingen damit an entgegengesetzten Kanten derselben Spalte - gemessen 110 px auseinander. Das ist derselbe Fehler, den Safak am 2026-08-21 auf der Reservierungskachel bemaengelt hat ("Dauer, Ort, Telefonnr"), nur im Fuss jeder einzelnen Seite. */ @media (max-width: 767px) { .hours-table-saison thead th { text-align: right; } /* Die erste Kopfzelle steht ueber den Wochentagen und bleibt links. */ .hours-table-saison thead th:first-child { text-align: left; } }