/* ========================================================================= PE-DI-BE Getränkehandel — Stylesheet Eine Datei, keine Abhängigkeiten, keine externen Schriften oder Dienste. ========================================================================= */ :root{ /* Farben nach dem Hausflyer: dunkles Indigoblau als Grundfarbe, dazu der Himbeer-/Magentaton als einzige Akzentfarbe. Magenta ist AUSSCHLIESSLICH für Anruf-Buttons reserviert — der Besucher lernt so binnen Sekunden: magenta = hier tippen zum Anrufen. Weiße Schrift auf Magenta: 7,26:1 Kontrast (Stufe AA erfüllt). */ --blau: #2E2A60; --blau-tief: #211E4A; --magenta: #9B2B5C; --magenta-dkl: #7F2049; --gruen: #3F6B4C; --neutral: #6E6558; --papier: #FAF7F2; --papier-2: #F1EBE1; --text: #2B2B2B; --text-leise: #5F5A54; --linie: #DED5C7; --breite: 1140px; --radius: 14px; --schatten: 0 2px 4px rgba(46,42,96,.06), 0 12px 28px rgba(46,42,96,.08); /* Systemschriften: nichts nachzuladen, kein CDN, keine Lizenzfragen, null Datenübertragung an Dritte. */ --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } /* Grundgröße bewusst groß — ein guter Teil der Kundschaft ist 60+. Sie steht auf , damit sämtliche rem-Angaben darauf aufbauen. */ html{ font-size:19px; scroll-behavior:smooth; scroll-padding-top:96px; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--schrift); font-size:1rem; line-height:1.6; color:var(--text); background:var(--papier); -webkit-text-size-adjust:100%; } img,svg{ max-width:100%; height:auto; display:block; } figure{ margin:0; } /* Browser setzen hier sonst 40px Rand links und rechts */ h1,h2,h3{ line-height:1.15; letter-spacing:-.02em; color:var(--blau); margin:0 0 .4em; } h1{ font-size:clamp(2.1rem,5.2vw,3.6rem); } h2{ font-size:clamp(1.65rem,3.6vw,2.5rem); } h3{ font-size:1.22rem; letter-spacing:-.01em; } p{ margin:0 0 1em; } a{ color:var(--blau); } a:focus-visible, button:focus-visible{ outline:3px solid var(--magenta); outline-offset:3px; border-radius:4px; } .wrap{ width:min(100% - 2.5rem, var(--breite)); margin-inline:auto; } .mitte{ text-align:center; } .max60{ max-width:56ch; } .zentriert{ margin-inline:auto; } .visuell-versteckt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--blau); color:#fff; padding:.8rem 1.2rem; } .skip:focus{ left:.5rem; top:.5rem; } /* ---------------------------------------------------- Kopfleiste ------- */ .kopf{ position:sticky; top:0; z-index:50; background:rgba(250,247,242,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie); } .kopf-inner{ display:flex; align-items:center; gap:1.25rem; min-height:72px; padding-block:.6rem; } .logo{ display:flex; gap:4px; text-decoration:none; flex:none; } .logo-kasten{ display:grid; place-items:center; min-width:38px; height:34px; padding-inline:6px; background:var(--blau); color:#fff; font-weight:800; font-size:1rem; letter-spacing:.06em; border-radius:5px; } .status{ display:flex; align-items:center; gap:.5rem; margin:0 auto 0 .5rem; font-size:.94rem; font-weight:600; color:var(--text-leise); } .status-punkt{ width:11px; height:11px; border-radius:50%; background:var(--text-leise); flex:none; } .status.offen{ color:var(--gruen); } .status.offen .status-punkt{ background:var(--gruen); box-shadow:0 0 0 4px rgba(63,107,76,.16); } /* Die Statusanzeige benutzt bewusst KEIN Magenta: die Akzentfarbe soll ausschließlich „hier tippen zum Anrufen" bedeuten. */ .status.telefon{ color:var(--blau); } .status.telefon .status-punkt{ background:var(--blau); box-shadow:0 0 0 4px rgba(46,42,96,.14); } .status.zu{ color:var(--neutral); } .status.zu .status-punkt{ background:var(--neutral); } /* Kurzfassung des Status — nur auf schmalen Bildschirmen sichtbar (siehe unten). */ .status-kurz{ display:none; } /* ---------------------------------------------------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.8rem 1.35rem; font:inherit; font-weight:700; text-decoration:none; border-radius:var(--radius); border:2px solid transparent; transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease; } .btn:hover{ transform:translateY(-2px); } @media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } } .btn-anruf{ background:var(--magenta); color:#fff; box-shadow:0 4px 14px rgba(155,43,92,.32); } .btn-anruf:hover{ background:var(--magenta-dkl); } .btn-zweit{ background:transparent; color:var(--blau); border-color:var(--blau); } .btn-zweit:hover{ background:var(--blau); color:#fff; } .btn-gross{ padding:1rem 1.5rem; font-size:1.06rem; } .btn-riesig{ padding:1.3rem 2.6rem; font-size:clamp(1.2rem,3.4vw,1.6rem); } .btn-reihe{ display:flex; flex-wrap:wrap; gap:.9rem; margin:2rem 0 1.4rem; } .ico{ width:1.15em; height:1.15em; fill:currentColor; flex:none; } /* ---------------------------------------------------- Hero ------------- */ .hero{ padding:clamp(2.5rem,6vw,5rem) 0 clamp(2.5rem,5vw,4.5rem); } .hero-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); /* Die Textspalte ist bewusst breiter: der vierzeilige Hausspruch braucht Platz, damit keine Verszeile umbricht. */ grid-template-columns:1.2fr .8fr; align-items:center; } .kicker{ font-size:.85rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--magenta-dkl); margin-bottom:.9rem; } .kicker.hell{ color:#C9C4E8; } .lead{ font-size:1.16rem; color:var(--text-leise); } .lead.hell{ color:#C6C2DE; } /* Der Reim braucht zwei ganze Zeilen, sonst zerfällt er. Deshalb kleiner gesetzt als eine normale H1 — die Wirkung kommt hier aus dem Sprachrhythmus, nicht aus der Schriftgröße. */ h1.reim{ font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.3; letter-spacing:-.01em; } .hero-mobil{ font-size:1.02rem; color:var(--text-leise); margin:0 0 .5rem; } .hero-mobil a{ color:var(--magenta-dkl); font-weight:800; text-decoration:none; } .hero-mobil a:hover{ text-decoration:underline; } .hero-adresse{ font-size:1rem; color:var(--text-leise); margin:0; } .hero-bild img{ width:100%; border-radius:var(--radius); box-shadow:var(--schatten); object-fit:cover; aspect-ratio:4/3; } /* ---------------------------------------------------- Bänder ----------- */ .band{ padding:clamp(3rem,6vw,5.5rem) 0; } .band-hell{ background:var(--papier-2); } .band-dunkel{ background:var(--blau); } .band-dunkel h2, .band-dunkel h3{ color:#fff; } .band-akzent{ background:var(--papier-2); } /* ---------------------------------------------------- Kacheln ---------- */ .kacheln{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem; } .kacheln.drei{ grid-template-columns:repeat(3,1fr); } /* Vier Kundengruppen als 2×2 statt in einer Reihe — vier Spalten wären für die längeren deutschen Wörter zu schmal. */ .kacheln.vier{ grid-template-columns:repeat(2,1fr); } .kacheln.sechs{ grid-template-columns:repeat(3,1fr); } .kachel{ background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:2rem 1.7rem; box-shadow:var(--schatten); } .kachel p{ margin:0; color:var(--text-leise); font-size:1.02rem; } .kachel-ico{ width:44px; height:44px; margin-bottom:1.1rem; stroke:var(--magenta); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .sortiment li{ text-align:center; } .sortiment img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius); box-shadow:var(--schatten); margin-bottom:.9rem; } .sortiment h3{ margin:0; font-size:1.08rem; } .marken{ margin:.35rem 0 0; font-size:.88rem; line-height:1.4; color:var(--text-leise); } /* ---------------------------------------------------- Bier-Notdienst --- */ /* Abgesetzte Karte statt eigenem Farbband: die Nachbarabschnitte oben und unten haben sonst denselben Hintergrund und der Block verschwindet darin. */ .notdienst{ padding-block:clamp(2rem,4vw,3.5rem); } .notdienst-inner{ display:flex; align-items:center; justify-content:space-between; gap:clamp(1.5rem,4vw,2.5rem); flex-wrap:wrap; background:#fff; border:1px solid var(--linie); border-left:6px solid var(--magenta); border-radius:var(--radius); box-shadow:var(--schatten); padding:clamp(1.6rem,3vw,2.4rem); } .notdienst h2{ margin-bottom:.3em; font-size:clamp(1.4rem,2.6vw,1.9rem); } .notdienst .kicker{ margin-bottom:.5rem; } .notdienst .lead{ margin:0; max-width:44ch; } .notdienst .btn{ flex:none; } .hinweis{ margin:2.5rem 0 0; text-align:center; font-size:1.08rem; color:var(--text-leise); } /* ---------------------------------------------------- Vergleich -------- */ .vergleich{ width:100%; border-collapse:collapse; margin:2.5rem 0 2rem; background:rgba(255,255,255,.06); border-radius:var(--radius); overflow:hidden; } .vergleich th, .vergleich td{ padding:1rem 1.3rem; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.14); } .vergleich thead th{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:#A7A2CE; font-weight:800; } .vergleich tbody td{ color:#C6C2DE; } /* Auf dem dunklen Band wird die „Bei uns"-Spalte mit Weiß hervorgehoben, nicht mit Magenta: dunkles Magenta auf dunklem Indigo wird matschig, und die Akzentfarbe soll ohnehin nur auf Anruf-Buttons vorkommen. */ .vergleich tbody td:last-child{ color:#fff; font-weight:700; background:rgba(255,255,255,.10); box-shadow:inset 3px 0 0 rgba(255,255,255,.6); } .vergleich tbody tr:last-child td{ border-bottom:0; } .pointe{ font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:700; color:#fff; margin:0; max-width:34ch; } /* ---------------------------------------------------- Feier ------------ */ .feier-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1.15fr .85fr; align-items:center; } .schritte{ margin:0 0 2rem; padding:0; list-style:none; counter-reset:s; } .schritte li{ counter-increment:s; position:relative; padding:0 0 1.2rem 3.6rem; color:var(--text-leise); font-size:1.06rem; } .schritte li::before{ content:counter(s); position:absolute; left:0; top:-2px; width:2.5rem; height:2.5rem; display:grid; place-items:center; background:var(--blau); color:#fff; border-radius:50%; font-weight:800; font-size:1.05rem; } .schritte strong{ color:var(--text); } .feier-bild img{ width:100%; border-radius:var(--radius); box-shadow:var(--schatten); object-fit:cover; aspect-ratio:3/4; } /* ---------------------------------------------------- Bestellablauf ---- */ /* Die drei Schritte stehen nebeneinander — untereinander wären die Zeilen über die volle Seitenbreite zu lang zum Lesen. */ .schritte.quer{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin:2.5rem 0 0; } .schritte.quer li{ padding-bottom:0; } /* ---------------------------------------------------- Laden ------------ */ .laden-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; } .karte-box{ background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.3rem); box-shadow:var(--schatten); } .karte-box h3{ margin-top:0; } .zeiten{ width:100%; border-collapse:collapse; margin-bottom:1.4rem; } .zeiten th, .zeiten td{ padding:.6rem .5rem; text-align:left; border-bottom:1px solid var(--linie); font-size:1.05rem; } .zeiten th{ font-weight:800; color:var(--blau); width:7.5rem; } .zeiten td:nth-child(2){ font-variant-numeric:tabular-nums; font-weight:600; } .zeiten .zusatz{ font-size:.92rem; color:var(--text-leise); } .zeiten .zusatz.stark{ color:var(--gruen); font-weight:700; } .zeiten tr:last-child th, .zeiten tr:last-child td{ border-bottom:0; } .absprache{ margin:0; padding:1.1rem 1.3rem; background:var(--papier-2); border-left:4px solid var(--magenta); border-radius:0 8px 8px 0; font-size:1rem; } .adresse-gross{ font-size:1.3rem; font-weight:700; color:var(--blau); margin-bottom:.6rem; } .wegweiser{ color:var(--text-leise); font-size:1.02rem; margin-bottom:1.6rem; } .extern{ font-size:.85em; } /* ---------------------------------------------------- Über uns --------- */ .ueber-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; } .ueber-bild img{ width:100%; border-radius:var(--radius); box-shadow:var(--schatten); object-fit:cover; aspect-ratio:9/7; } .claim{ font-size:clamp(1.1rem,2.4vw,1.4rem); font-weight:700; font-style:italic; color:var(--blau); border-left:4px solid var(--magenta); padding-left:1.2rem; margin:1.8rem 0 0; } /* ---------------------------------------------------- Abschluss -------- */ /* Beide Rufnummern gleichwertig nebeneinander. Die Beschriftung darunter sagt, wo man landet — Laden oder Handy. */ .nummern{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:1.8rem 0 2rem; } .nummern .btn{ flex:1 1 15rem; max-width:20rem; margin:0; } .nummern .btn span{ display:flex; flex-direction:column; align-items:center; line-height:1.15; } .nummern .btn small{ font-size:.5em; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; margin-top:.3rem; } .kontaktliste{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2rem; color:#C6C2DE; font-size:1.02rem; } .kontaktliste a{ color:#fff; } /* ---------------------------------------------------- Fußzeile --------- */ .fuss{ background:var(--blau-tief); color:#A9A5C6; padding:2.2rem 0 calc(2.2rem + env(safe-area-inset-bottom)); font-size:.95rem; } .fuss-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 2rem; } .fuss p{ margin:0; } .fuss nav{ display:flex; gap:1.5rem; } .fuss a{ color:#fff; } .jugendschutz{ flex-basis:100%; color:#7E90AB; font-size:.88rem; } /* ---------------------------------------------------- Handyleiste ------ */ .handyleiste{ display:none; } /* ---------------------------------------------------- Rechtstexte ------ */ /* Impressum und Datenschutzerklärung */ .rechtstext{ padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem); } .rechtstext .wrap{ max-width:36rem; } /* angenehme Zeilenlänge für Fließtext */ .rechtstext h1{ font-size:clamp(1.9rem,4.5vw,2.8rem); margin-bottom:1.5rem; } .rechtstext h2{ font-size:1.22rem; margin:2.6rem 0 .7rem; padding-top:1.4rem; border-top:1px solid var(--linie); } .rechtstext h2:first-of-type{ border-top:0; padding-top:0; } .rechtstext p, .rechtstext li{ font-size:1.02rem; color:var(--text-leise); } .rechtstext strong{ color:var(--text); } .rechtstext ul{ margin:0 0 1em; padding-left:1.3rem; } .rechtstext li{ margin-bottom:.4rem; } .kurzfassung{ background:#fff; border:1px solid var(--linie); border-left:5px solid var(--magenta); border-radius:var(--radius); padding:1.6rem 1.8rem; margin-bottom:2.5rem; box-shadow:var(--schatten); } .kurzfassung h2{ margin:0 0 .7rem; border-top:0; padding-top:0; } .kurzfassung p:last-child{ margin-bottom:0; } /* Gelb markierte Stellen müssen vor dem Livegang gefüllt oder gelöscht werden. */ .ergaenzen{ background:#FFF3C4; color:#6B4E00; padding:.15em .45em; border-radius:4px; font-size:.94em; font-style:italic; } .zurueck{ margin-top:3rem; font-weight:700; } .zurueck a{ text-decoration:none; } .zurueck a:hover{ text-decoration:underline; } .stand{ font-size:.94rem; } /* ========================================================================= Umbrüche ========================================================================= */ @media (max-width:900px){ .hero-grid, .feier-grid, .ueber-grid, .laden-grid{ grid-template-columns:1fr; } .schritte.quer{ grid-template-columns:1fr; gap:0; } .schritte.quer li{ padding-bottom:1.2rem; } .schritte.quer li:last-child{ padding-bottom:0; } /* Der Spruch steht auf schmalen Bildschirmen als Achtzeiler und ist entsprechend hoch. Käme das Foto davor, läge der Anruf-Button weit unter der Falz — deshalb hier Text zuerst, Bild danach. */ .hero-bild{ margin:0; } .ueber-bild{ margin:0; } .feier-bild{ margin:0; } .feier-bild img{ aspect-ratio:4/3; } .kacheln.drei, .kacheln.vier, .kacheln.sechs{ grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ html{ font-size:17.5px; } .kacheln.drei, .kacheln.vier{ grid-template-columns:1fr; } .kacheln.sechs{ grid-template-columns:repeat(2,1fr); } .notdienst .btn{ width:100%; } /* Auf dem Handy verschwindet die Nummer aus der Kopfleiste — sie sitzt stattdessen dauerhaft in der Leiste am unteren Bildschirmrand. */ /* Der Reim wird zum Vierzeiler — jedes Versviertel auf eine eigene Zeile, statt an beliebiger Stelle umzubrechen. */ h1.reim{ font-size:1.5rem; } h1.reim span{ display:block; } h1.reim br{ display:none; } .kopf-anruf{ display:none; } .status{ margin-left:auto; margin-right:0; font-size:.92rem; text-align:right; } .status-text{ display:none; } .status-kurz{ display:inline; } .btn-reihe .btn{ width:100%; } /* Vergleichstabelle wird zu Kartenpaaren gestapelt. */ .vergleich thead{ display:none; } .vergleich, .vergleich tbody, .vergleich tr, .vergleich td{ display:block; width:100%; } .vergleich tr{ margin-bottom:1rem; border:1px solid rgba(255,255,255,.16); border-radius:10px; overflow:hidden; } .vergleich td{ border-bottom:0; padding:.9rem 1.1rem; } .vergleich tbody td:first-child::before{ content:"Großer Markt: "; color:#9B95C8; font-weight:700; } .vergleich tbody td:last-child::before{ content:"Bei uns: "; color:#fff; font-weight:800; } .zeiten th{ width:5.5rem; } .zeiten th, .zeiten td{ font-size:.98rem; padding:.55rem .3rem; } /* Feste Kontaktleiste unten */ .handyleiste{ display:grid; grid-template-columns:1fr 1fr; position:fixed; inset:auto 0 0 0; z-index:60; background:#fff; border-top:1px solid var(--linie); box-shadow:0 -4px 18px rgba(46,42,96,.14); padding-bottom:env(safe-area-inset-bottom); } .handyleiste a{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1.05rem .5rem; min-height:60px; font-weight:800; text-decoration:none; color:var(--blau); } .handyleiste a:first-child{ background:var(--magenta); color:#fff; } .handyleiste a:last-child{ border-left:1px solid var(--linie); } /* Platz schaffen, damit die Leiste nichts verdeckt */ .fuss{ padding-bottom:calc(6rem + env(safe-area-inset-bottom)); } } @media (max-width:400px){ /* Das Sortiment bleibt bewusst zweispaltig — einspaltig würde der Abschnitt zu sechs bildschirmfüllenden Kacheln aufquellen. */ .kacheln.sechs{ gap:.9rem; } .sortiment h3{ font-size:.98rem; } .wrap{ width:calc(100% - 1.8rem); } } /* ========================================================================= Druck — ergibt eine saubere Info-Seite mit Zeiten und Telefonnummer ========================================================================= */ @media print{ .kopf, .handyleiste, .btn, .hero-bild, .feier-bild, .ueber-bild, .sortiment img{ display:none !important; } body{ font-size:11pt; background:#fff; color:#000; } .band, .band-dunkel, .band-akzent, .band-hell{ background:#fff !important; padding:.6rem 0; } .band-dunkel h2, .band-dunkel h3, .pointe, .lead.hell, .kontaktliste{ color:#000 !important; } a[href^="tel:"]::after{ content:" (" attr(href) ")"; } }