/* ============================================================ Pantech Katalog - Shop-Oberfläche Die Markenfarbe kommt aus der .env (MARKE_FARBE) und wird im als --marke gesetzt. Hier steht nur der Rückfallwert. ============================================================ */ :root { --marke: #0F7A4D; --marke-tief: #12241C; --papier: #ffffff; --flaeche: #f4f6f4; --flaeche-tief: #ecefec; --rand: #dfe4e0; --rand-stark: #c6cec8; --tinte: #14201a; --tinte-leise: #62706a; --gut: #1a7f45; --achtung: #b45309; --aus: #78837d; --r-klein: 8px; --r: 14px; --r-gross: 20px; --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --knopf-bg: var(--papier); --knopf-text: var(--tinte); --knopf-rand: var(--rand-stark); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3 { letter-spacing: -0.02em; } :focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } .klein { font-size: 12.5px; color: var(--tinte-leise); } /* ---------------------------------------------------------- Kopfleiste */ /* Kopf und Kategorieleiste kleben als ein Block. Vorher hatte die Kategorieleiste einen festen Abstand von oben - der stimmte nicht mehr, sobald der Kopf durch Logo oder Umbruch eine andere Höhe bekam. */ .kopfblock { position: sticky; top: 0; z-index: 40; background: var(--papier); } .kopf { background: var(--papier); border-bottom: 1px solid var(--rand); } .kopf-innen { max-width: 1240px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; } .marke { flex: none; display: flex; align-items: center; } .logo { height: 34px; width: auto; } .marke-wort { font-weight: 700; font-size: 19px; letter-spacing: -0.03em; } .kopf-suche { flex: 1; max-width: 480px; position: relative; display: flex; } .kopf-suche input { width: 100%; padding: 10px 44px 10px 15px; border: 1px solid var(--rand-stark); border-radius: 999px; background: var(--flaeche); color: var(--tinte); font-family: var(--sans); font-size: 15px; } .kopf-suche input::placeholder { color: var(--tinte-leise); } .kopf-suche input:focus { background: var(--papier); border-color: var(--marke); outline: none; } .kopf-suche button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 36px; border: 0; border-radius: 999px; background: var(--marke); color: #fff; display: grid; place-items: center; cursor: pointer; } .kopf-nav { display: flex; gap: 20px; font-size: 14.5px; font-weight: 500; margin-left: auto; } .kopf-nav a { color: var(--tinte-leise); } .kopf-nav a:hover { color: var(--marke); } @media (max-width: 780px) { .kopf-innen { flex-wrap: wrap; gap: 10px 14px; padding: 10px 16px; } .kopf-suche { order: 3; flex-basis: 100%; max-width: none; } .kopf-nav { gap: 14px; font-size: 13.5px; } .logo { height: 28px; } } /* ------------------------------------------------------------ Einstieg */ .einstieg { background: var(--marke-tief); color: #f0f4f1; background-image: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--marke) 40%, transparent), transparent 62%); } .einstieg-innen { max-width: 1240px; margin: 0 auto; padding: 44px 20px 36px; } .einstieg h1 { font-size: clamp(27px, 4.4vw, 42px); line-height: 1.08; margin: 0 0 12px; max-width: 17ch; font-weight: 700; } .einstieg p { margin: 0; max-width: 54ch; color: #b9c7bf; font-size: 16.5px; } .vertrauen { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; } @media (max-width: 700px) { .einstieg-innen { padding: 26px 16px 20px; } .einstieg h1 { max-width: none; } .einstieg p { font-size: 15px; } /* eine scrollende Zeile statt vier gestapelter Blöcke */ .vertrauen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 18px -16px 0; padding: 0 16px 2px; } .vertrauen::-webkit-scrollbar { display: none; } .vertrauen li { flex: none; } } .vertrauen li { font-size: 13px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); color: #dbe5df; } .vertrauen b { color: #fff; } /* ------------------------------------------------------ Kategorie-Rail */ .rail { position: sticky; top: var(--kopf-h, 56px); z-index: 30; background: var(--papier); border-bottom: 1px solid var(--rand); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* Weiche Kante rechts zeigt, dass die Leiste weiterscrollt */ @media (max-width: 900px) { .rail { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } .vertrauen { -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); } } .rail::-webkit-scrollbar { display: none; } .pillen { max-width: 1240px; margin: 0 auto; padding: 12px 20px; display: flex; gap: 8px; white-space: nowrap; } .pille { flex: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--rand-stark); border-radius: 999px; color: var(--tinte); background: var(--papier); } .pille i { font-style: normal; margin-left: 7px; color: var(--tinte-leise); font-size: 12.5px; } .pille:hover { border-color: var(--marke); } .pille.aktiv { background: var(--marke); border-color: var(--marke); color: #fff; } .pille.aktiv i { color: rgba(255,255,255,.72); } @media (max-width: 900px) { .pillen { padding: 10px 16px; } /* Auf dem Handy klebt nur der Kopf, nicht auch noch die Kategorieleiste - sonst bleibt zu wenig Bildschirm für die Ware. */ .rail { position: relative; top: auto; } } /* Auf der Artikelseite hat das Handy die Kaufleiste unten; der Kopf darf dort mitscrollen, damit der ganze Schirm dem Gerät gehört. */ @media (max-width: 900px) { body[data-seite="detail"] .kopfblock { position: static; } } /* --------------------------------------------------------------- Liste */ .inhalt { max-width: 1240px; margin: 0 auto; padding: 22px 20px 48px; } .listen-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .listen-kopf .sortierung { flex: none; } @media (max-width: 520px) { .treffer { font-size: 13.5px; } .sortierung span { display: none; } .sortierung select { padding: 7px 9px; font-size: 13.5px; } } .treffer { margin: 0; font-size: 14.5px; color: var(--tinte-leise); } .treffer a { color: var(--marke); font-weight: 500; } .sortierung { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinte-leise); } .sortierung select { font-family: var(--sans); font-size: 14px; color: var(--tinte); background: var(--papier); border: 1px solid var(--rand-stark); border-radius: var(--r-klein); padding: 8px 11px; } .raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); } @media (max-width: 520px) { .raster { grid-template-columns: 1fr 1fr; gap: 11px; } .inhalt { padding: 18px 14px 40px; } } /* ----------------------------------------------------------- Karte */ .karte { background: var(--papier); border: 1px solid var(--rand); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color .14s ease, box-shadow .14s ease; } .karte:hover { border-color: var(--rand-stark); box-shadow: 0 6px 20px rgba(20, 32, 26, .07); } .karte-bild { position: relative; flex: none; aspect-ratio: 4 / 5; background: var(--flaeche); } .karte-bild img { width: 100%; height: 100%; object-fit: cover; } .kein-bild { width: 100%; height: 100%; display: grid; place-items: center; color: var(--tinte-leise); font-size: 13px; background: var(--flaeche); } .plakette { position: absolute; top: 9px; left: 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.94); color: var(--tinte); box-shadow: 0 1px 3px rgba(20,32,26,.14); } .plakette.top { background: var(--marke); color: #fff; } .plakette.defekt { background: #fee2e2; color: #991b1b; } .plakette.rechts { left: auto; right: 9px; } .plakette.res { background: #fef3c7; color: #92400e; } .akku { position: absolute; bottom: 9px; left: 9px; font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 5px; background: rgba(18, 36, 28, .78); color: #fff; } .karte-text { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; } .karte-text h3 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .karte-spec { margin: 0; font-size: 12.5px; color: var(--tinte-leise); } .karte-fuss { margin-top: auto; padding-top: 9px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .karte-preis { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } .karte-preis i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--tinte-leise); margin-left: 4px; } .tag { font-family: var(--mono); font-size: 11px; color: var(--tinte-leise); background: var(--flaeche); border-radius: 4px; padding: 2px 6px; } .leer { grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: var(--flaeche); border-radius: var(--r-gross); } .leer p { margin: 0 0 6px; color: var(--tinte-leise); } .leer-titel { font-size: 17px; font-weight: 600; color: var(--tinte) !important; } .leer .knopf { margin-top: 16px; display: inline-block; } /* ------------------------------------------------------------- Knöpfe */ .knopf { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: var(--r-klein); border: 1px solid var(--knopf-rand); background: var(--knopf-bg); color: var(--knopf-text); font-family: var(--sans); font-size: 15px; font-weight: 500; cursor: pointer; transition: background .14s ease, border-color .14s ease; } .knopf:hover { border-color: var(--tinte); } .knopf.haupt { background: var(--marke); border-color: var(--marke); color: #fff; } .knopf.haupt:hover { background: color-mix(in srgb, var(--marke) 86%, black); border-color: transparent; } .knopf.still { background: transparent; border-color: transparent; color: var(--tinte-leise); padding-inline: 10px; } .knopf.still:hover { color: var(--marke); border-color: transparent; } /* -------------------------------------------------------- Detailseite */ .detail { max-width: 1240px; margin: 0 auto; padding: 18px 20px 40px; } .brotkrumen { display: flex; gap: 8px; font-size: 13.5px; color: var(--tinte-leise); margin-bottom: 18px; } .brotkrumen a:hover { color: var(--marke); } .detail-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; } @media (max-width: 900px) { .detail-raster { grid-template-columns: 1fr; gap: 26px; } } .galerie { position: sticky; top: 84px; align-self: start; } @media (max-width: 900px) { .galerie { position: static; } } .buehne { aspect-ratio: 4 / 5; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-gross); overflow: hidden; } .buehne img { width: 100%; height: 100%; object-fit: contain; } .streifen { display: flex; gap: 9px; margin-top: 11px; flex-wrap: wrap; } .mini { width: 66px; height: 66px; padding: 0; overflow: hidden; cursor: pointer; border: 1px solid var(--rand); border-radius: var(--r-klein); background: var(--flaeche); } .mini img { width: 100%; height: 100%; object-fit: cover; } .mini.aktiv { border-color: var(--marke); border-width: 2px; } .detail-info h1 { font-size: clamp(23px, 3.2vw, 32px); margin: 0 0 8px; line-height: 1.14; } .detail-spec { margin: 0 0 22px; color: var(--tinte-leise); font-size: 15px; } .preisblock { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .detail-preis { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; } .detail-preis i { font-style: normal; font-size: 15px; font-weight: 500; color: var(--tinte-leise); margin-left: 6px; } .lage { font-size: 13.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px; } .lage.da { background: color-mix(in srgb, var(--gut) 12%, white); color: var(--gut); } .lage.res { background: #fef3c7; color: #92400e; } .lage.weg { background: var(--flaeche-tief); color: var(--aus); } .aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .zusicherung { list-style: none; margin: 0 0 28px; padding: 16px 18px; background: var(--flaeche); border-radius: var(--r); } .zusicherung li { position: relative; padding-left: 24px; font-size: 14.5px; margin-bottom: 7px; } .zusicherung li:last-child { margin-bottom: 0; } .zusicherung li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 6px; height: 10px; border: solid var(--marke); border-width: 0 2px 2px 0; transform: rotate(45deg); } .hinweis { padding: 13px 16px; border-radius: var(--r); font-size: 14.5px; background: var(--flaeche); color: var(--tinte-leise); margin: 0 0 20px; } .beschreibung, .datenblatt { margin-bottom: 28px; } .beschreibung h2, .datenblatt h2, .auch h2 { font-size: 18px; margin: 0 0 12px; font-weight: 600; } .beschreibung p { margin: 0; font-size: 15.5px; line-height: 1.68; max-width: 62ch; color: #34423b; } .datenblatt dl { margin: 0; border-top: 1px solid var(--rand); } .datenblatt dl > div { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--rand); } .datenblatt dt { color: var(--tinte-leise); font-size: 14px; } .datenblatt dd { margin: 0; font-size: 14.5px; font-weight: 500; } .datenblatt dd.mono { font-family: var(--mono); font-weight: 400; font-size: 13.5px; } .auch { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--rand); } /* Feste Kaufleiste unten - vor allem fürs Handy */ .kaufleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--rand); backdrop-filter: blur(8px); } .kaufleiste-text { display: flex; flex-direction: column; } .kaufleiste-preis { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .kaufleiste-nr { font-family: var(--mono); font-size: 11px; color: var(--tinte-leise); } @media (max-width: 900px) { .kaufleiste { display: flex; } .detail { padding-bottom: 96px; } } /* ----------------------------------------------------------- Fußzeile */ .fuss { background: var(--marke-tief); color: #aebbb4; margin-top: 8px; } .fuss-innen { max-width: 1240px; margin: 0 auto; padding: 40px 20px 22px; display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: space-between; } .fuss p { margin: 0 0 5px; font-size: 14.5px; } .fuss-name { color: #fff; font-weight: 600; font-size: 16px !important; margin-bottom: 9px !important; } .fuss a:hover { color: #fff; } .fuss-links { display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; } .fuss-recht { max-width: 1240px; margin: 0 auto; padding: 16px 20px 34px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #7f8d86; } /* ------------------------------------------- Zugangs- und Login-Seite */ .tor-body { display: grid; place-items: center; min-height: 100vh; background: var(--marke-tief); color: #eef2ef; padding: 20px; } .tor { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-gross); padding: 32px; width: min(390px, 100%); display: flex; flex-direction: column; gap: 15px; } .tor h1 { font-size: 20px; margin: 0; } .tor .klein { color: #9fb0a7; margin: -6px 0 0; } .tor label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: #b9c7bf; } .tor input { padding: 12px 14px; border-radius: var(--r-klein); border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.22); color: #fff; font-family: var(--sans); font-size: 15px; } .tor input:focus { border-color: var(--marke); outline: none; } .tor button { padding: 13px; border-radius: var(--r-klein); border: 0; cursor: pointer; background: var(--marke); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 15px; } .fehler { color: #fca5a5; font-size: 14px; margin: 0; } /* ============================================================ Verwaltung: bleibt dunkel. Die alten Variablennamen werden hier für admin.css neu belegt. ============================================================ */ body.admin { --bg: #0f1512; --flaeche: #171f1b; --flaeche-hoch: #1f2924; --rand: #2b3833; --text: #e7ede9; --text-leise: #93a49c; --violett: var(--marke); --tuerkis: #34d399; --warn: #f59e0b; --weg: #6b7d75; --radius: 12px; --knopf-bg: var(--flaeche-hoch); --knopf-text: var(--text); --knopf-rand: var(--rand); background: var(--bg); color: var(--text); } body.admin a { color: inherit; } body.admin .knopf:hover { border-color: var(--marke); } body.admin .klein { color: var(--text-leise); } /* Basisform der Filter-Pillen in der Verwaltung */ body.admin .kat { font-family: var(--mono); font-size: 13px; padding: 7px 12px; border: 1px solid var(--rand); border-radius: 999px; color: var(--text-leise); background: none; cursor: pointer; } body.admin .kat span { opacity: .55; margin-left: 5px; } body.admin .kat:hover { border-color: var(--marke); color: var(--text); } body.admin .kat.aktiv { background: var(--marke); border-color: var(--marke); color: #fff; } body.admin .marke-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--tuerkis); box-shadow: 0 0 10px var(--tuerkis); display: inline-block; } /* ============================================================ Vertrauensleiste, Filterspalte, Seitenblättern, Fußmarken ============================================================ */ .oben { background: var(--marke-tief); color: #b6c5bd; font-size: 12.5px; } .oben-innen { max-width: 1240px; margin: 0 auto; padding: 7px 20px; display: flex; gap: 26px; align-items: center; white-space: nowrap; overflow-x: auto; scrollbar-width: none; } .oben-innen::-webkit-scrollbar { display: none; } .oben-sterne { margin-left: auto; } .oben-sterne b { color: #fff; } @media (max-width: 900px) { .oben-innen { gap: 18px; padding: 6px 16px; } .oben-sterne { margin-left: 0; } .oben { -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); } } .kopf-kontakt { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; line-height: 1.35; } .kopf-kontakt a { font-weight: 600; font-size: 14.5px; } .kopf-kontakt a:hover { color: var(--marke); } .kopf-kontakt span { color: var(--tinte-leise); } @media (max-width: 1080px) { .kopf-kontakt { display: none; } } /* ------------------------------------------------------ Katalograster */ .katalog { max-width: 1240px; margin: 0 auto; padding: 24px 20px 56px; display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 32px; align-items: start; } @media (max-width: 900px) { .katalog { grid-template-columns: 1fr; gap: 0; padding: 18px 14px 48px; } } .filter { position: sticky; top: calc(var(--kopf-h, 56px) + 14px); } .filter-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .filter-kopf h2 { font-size: 16px; margin: 0; } .filter-weg { font-size: 13px; color: var(--marke); font-weight: 500; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .chip { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--marke) 12%, white); color: color-mix(in srgb, var(--marke) 80%, black); border: 1px solid color-mix(in srgb, var(--marke) 26%, white); } .chip:hover { background: color-mix(in srgb, var(--marke) 20%, white); } .fgruppe { border-top: 1px solid var(--rand); padding: 14px 0 4px; } .fgruppe:first-of-type { border-top: 0; padding-top: 0; } .fgruppe h3 { font-size: 13px; margin: 0 0 8px; color: var(--tinte-leise); font-weight: 500; } .fliste { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; } .fzeile { display: flex; align-items: center; gap: 9px; padding: 6px 6px 6px 0; font-size: 14px; border-radius: var(--r-klein); } .fzeile:hover { background: var(--flaeche); } .kaestchen { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--rand-stark); border-radius: 4px; background: var(--papier); } .fzeile.an .kaestchen { background: var(--marke); border-color: var(--marke); position: relative; } .fzeile.an .kaestchen::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fzeile.an .fname { font-weight: 600; } .fzahl { color: var(--tinte-leise); font-size: 12.5px; font-family: var(--mono); } .preisform { display: flex; align-items: flex-end; gap: 7px; } .preisform label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .preisform input { width: 100%; padding: 8px 9px; font-family: var(--sans); font-size: 14px; border: 1px solid var(--rand-stark); border-radius: var(--r-klein); background: var(--papier); color: var(--tinte); } .preisform input:focus { border-color: var(--marke); outline: none; } .preisform button { padding: 8px 12px; border: 1px solid var(--marke); background: var(--marke); color: #fff; border-radius: var(--r-klein); font-family: var(--sans); font-size: 14px; cursor: pointer; } .ergebnisse { min-width: 0; } /* Der Knopf zum Schließen der Filterschublade gehört nur aufs Handy */ .filter-zu { display: none; } .listen-werkzeuge { display: flex; align-items: center; gap: 10px; } .filter-auf { display: none; padding: 8px 15px; font-size: 14px; } /* Auf dem Handy fährt die Filterspalte als Schublade herein */ @media (max-width: 900px) { .filter-auf { display: inline-flex; } .filter { position: fixed; inset: 0; z-index: 60; background: var(--papier); padding: 18px 16px 90px; overflow-y: auto; display: none; } .filter.offen { display: block; } .filter-kopf { position: sticky; top: 0; background: var(--papier); padding: 4px 0 10px; margin: 0 0 8px; } .filter-kopf h2 { font-size: 19px; } .fliste { max-height: none; } body.filter-offen .filter-zu { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 61; display: flex; justify-content: center; } body.filter-offen .filter-zu .knopf { width: 100%; } } /* ---------------------------------------------------------- Blättern */ .blaettern { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 32px; } .bl { min-width: 40px; padding: 9px 13px; text-align: center; border: 1px solid var(--rand-stark); border-radius: var(--r-klein); font-size: 14.5px; font-weight: 500; background: var(--papier); } .bl:hover { border-color: var(--marke); } .bl.an { background: var(--marke); border-color: var(--marke); color: #fff; } .bl.aus { color: var(--tinte-leise); border-color: var(--rand); } .bl.luecke { border: 0; min-width: 22px; padding-inline: 4px; color: var(--tinte-leise); } /* -------------------------------------------------------- Fußmarken */ .fuss-marken { max-width: 1240px; margin: 0 auto; padding: 4px 20px 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 40px; } .fuss-marken h4 { font-size: 12.5px; margin: 0 0 8px; color: #fff; font-weight: 600; letter-spacing: .01em; } .fuss-marken ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .fuss-marken li { font-size: 12.5px; padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); } /* ------------------------------------------------------ Textseiten */ .text-seite { max-width: 760px; margin: 0 auto; padding: 22px 20px 60px; } .text-seite h1 { font-size: clamp(25px, 3.4vw, 33px); margin: 12px 0 8px; } .text-seite section { margin-top: 32px; } .text-seite h2 { font-size: 17px; margin: 0 0 12px; font-weight: 600; } .text-seite p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; color: #34423b; } .text-seite a { color: var(--marke); font-weight: 500; } .datenblatt-liste { margin: 0; border-top: 1px solid var(--rand); } .datenblatt-liste > div { display: grid; grid-template-columns: 38% 1fr; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--rand); } .datenblatt-liste dt { color: var(--tinte-leise); font-size: 14px; } .datenblatt-liste dd { margin: 0; font-size: 15px; } @media (max-width: 520px) { .datenblatt-liste > div { grid-template-columns: 1fr; gap: 2px; } }