/* Fahrzeugdatenbank Esselmann – Apple-inspiriertes Design Hell, ruhig, viel Weißraum, große Typo-Hierarchie, ein Orange-Akzent (#ef7d00). Systemschriften (SF Pro auf Apple-Geräten, Segoe UI Variable auf Windows) – keine externen Requests (DSGVO). Zwei Themes über data-theme am . */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --orange: #ef7d00; --orange-dunkel: #d97100; --ok: #34c759; --warn: #ff9f0a; --rot: #ff3b30; --radius: 18px; --radius-s: 12px; --schatten: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); --schatten-hover: 0 2px 6px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.12); --uebergang: .2s cubic-bezier(.25,.1,.25,1); } html[data-theme="hell"] { --bg: #f5f5f7; --flaeche: #ffffff; --flaeche2: #f5f5f7; --ink: #1d1d1f; --muted: #6e6e73; --border: rgba(0,0,0,.09); --topbar: rgba(251,251,253,.82); --overlay: rgba(0,0,0,.4); --input-bg: #ffffff; } html[data-theme="dunkel"] { --bg: #000000; --flaeche: #1d1d1f; --flaeche2: #2c2c2e; --ink: #f5f5f7; --muted: #98989d; --border: rgba(255,255,255,.14); --topbar: rgba(22,22,23,.82); --overlay: rgba(0,0,0,.6); --input-bg: #2c2c2e; --schatten: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5); --schatten-hover: 0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.6); } /* Schriftgrößen A / A+ / A++ */ html[data-fs="0"] { font-size: 14px; } html[data-fs="1"] { font-size: 15.5px; } html[data-fs="2"] { font-size: 17px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-s); padding: .62rem .8rem; width: 100%; transition: border-color var(--uebergang), box-shadow var(--uebergang); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3.5px rgba(239,125,0,.18); } textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; } label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin: .85rem 0 .3rem; } a { color: var(--orange); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--muted); } .small { font-size: .85rem; } .grow, .spacer { flex: 1; } .nowrap { white-space: nowrap; } /* ---------- Topbar (Frosted Glass, sticky) ---------- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .55rem; padding: .55rem 1.2rem; background: var(--topbar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); } .wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; font-size: .95rem; cursor: pointer; white-space: nowrap; } .wm-sub { font-weight: 400; letter-spacing: 0; color: var(--muted); } .testchip { font-size: .72rem; font-weight: 600; color: #fff; background: var(--warn); border-radius: 999px; padding: .18rem .6rem; white-space: nowrap; } .iconbtn { position: relative; min-width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 1rem; transition: background var(--uebergang); } .iconbtn:hover { background: var(--flaeche2); } .badge-dot { position: absolute; top: .05rem; right: .05rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; background: var(--rot); color: #fff; border-radius: 999px; font-size: .65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .userchip { font-size: .8rem; color: var(--muted); white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; } .burger { display: none; } /* Navigation als ruhige Textlinks (apple.com-artig) */ .topnav { display: flex; align-items: center; gap: .15rem; margin-left: 1.2rem; } .navlink { font-size: .9rem; color: var(--muted); padding: .42rem .85rem; border-radius: 999px; transition: color var(--uebergang), background var(--uebergang); white-space: nowrap; } .navlink:hover { color: var(--ink); } .navlink.on { color: var(--ink); background: var(--flaeche2); font-weight: 600; } /* Schnellsuche */ .tsearch { position: relative; } .tsearch input { width: 11rem; border-radius: 999px; padding: .42rem .95rem; background: var(--flaeche2); border-color: transparent; font-size: .9rem; transition: width var(--uebergang), background var(--uebergang), box-shadow var(--uebergang); } .tsearch input:focus { width: 17rem; background: var(--input-bg); } .tsearch-pop { position: absolute; top: 2.6rem; right: 0; min-width: 20rem; z-index: 60; background: var(--flaeche); border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: var(--schatten-hover); overflow: hidden; } .tsearch-row { padding: .6rem .9rem; font-size: .9rem; cursor: pointer; } .tsearch-row:hover { background: var(--flaeche2); } /* Segmented Control */ .seg { display: inline-flex; background: var(--flaeche2); border-radius: 999px; padding: .16rem; gap: .1rem; } .seg button { padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; color: var(--muted); transition: all var(--uebergang); } .seg button.on { background: var(--flaeche); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); } .seg.small button { padding: .22rem .55rem; font-size: .72rem; } .seg.gross button { padding: .45rem 1.1rem; font-size: .9rem; } /* ---------- Inhalt ---------- */ .content { max-width: 1200px; margin: 0 auto; padding: 2rem 1.4rem 5rem; } .seitenkopf { margin: .8rem 0 1.6rem; } .seitenkopf h1 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; } .seitenkopf .untertitel { color: var(--muted); font-size: 1.05rem; margin-top: .25rem; } .kopfzeile { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1.1rem; border-radius: 999px; font-size: .92rem; font-weight: 500; background: var(--flaeche2); color: var(--ink); transition: all var(--uebergang); white-space: nowrap; } .btn:hover { filter: brightness(.96); } html[data-theme="dunkel"] .btn:hover { filter: brightness(1.15); } .btn.primary { background: var(--orange); color: #fff; font-weight: 600; } .btn.primary:hover { background: var(--orange-dunkel); filter: none; } .btn.danger { background: var(--rot); color: #fff; } .btn.ok { background: var(--ok); color: #fff; } .btn.ghost { background: transparent; color: var(--orange); } .btn.ghost:hover { background: rgba(239,125,0,.1); filter: none; } .btn.small { padding: .3rem .75rem; font-size: .8rem; } .btn.big { padding: .7rem 1.6rem; font-size: 1rem; } .btn:disabled { opacity: .45; cursor: default; } /* ---------- Status-Badges (dezente Punkte) ---------- */ .badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--flaeche2); border-radius: 999px; padding: .22rem .65rem; white-space: nowrap; } .badge i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--muted); } .badge.ok { color: var(--ok); background: rgba(52,199,89,.12); } .badge.ok i { background: var(--ok); } .badge.warn { color: var(--warn); background: rgba(255,159,10,.14); } .badge.warn i { background: var(--warn); } /* ---------- Filterleiste ---------- */ .filterleiste { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .filterleiste select { width: auto; border-radius: 999px; padding: .4rem 2rem .4rem .9rem; font-size: .88rem; } .filterleiste input[type="search"] { width: 14rem; border-radius: 999px; font-size: .9rem; padding: .4rem .95rem; } /* ---------- Fahrzeugkarten (Apple-Produktkacheln) ---------- */ .kartenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.2rem; } .fzkarte { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; cursor: pointer; transition: transform var(--uebergang), box-shadow var(--uebergang); display: flex; flex-direction: column; text-align: center; } .fzkarte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); } .fzkarte .bild { aspect-ratio: 4/3; background: var(--flaeche2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .fzkarte .bild img { width: 100%; height: 100%; object-fit: cover; } .fzkarte .bild .platzhalter { font-size: 2.6rem; opacity: .3; } .fzkarte .kern { padding: 1.1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; } .fzkarte .serie { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); } .fzkarte h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; } .fzkarte .tagline { font-size: .86rem; color: var(--muted); line-height: 1.45; flex: 1; } .fzkarte .fuss { margin-top: .7rem; display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; } /* Neue-Karte (gestrichelt) */ .fzkarte.neu { border: 2px dashed var(--border); background: transparent; box-shadow: none; align-items: center; justify-content: center; min-height: 16rem; color: var(--muted); font-weight: 500; gap: .5rem; } .fzkarte.neu:hover { border-color: var(--orange); color: var(--orange); transform: none; } .fzkarte.neu .plus { font-size: 2rem; font-weight: 300; } /* ---------- Panels (Detailseite) ---------- */ .panel { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: 1.3rem; overflow: hidden; } .p-h { display: flex; align-items: center; gap: .6rem; padding: 1.05rem 1.4rem .2rem; font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; } .p-h .p-sub { font-size: .8rem; font-weight: 400; color: var(--muted); letter-spacing: 0; } .p-b { padding: .9rem 1.4rem 1.3rem; } /* Fahrzeug-Kopf */ .fzkopf { display: flex; gap: 1.6rem; align-items: flex-start; margin-bottom: 1.6rem; flex-wrap: wrap; } .fzkopf .hero { width: 320px; max-width: 100%; aspect-ratio: 4/3; border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .fzkopf .hero img { width: 100%; height: 100%; object-fit: cover; } .fzkopf .hero .platzhalter { font-size: 3.2rem; opacity: .25; } .fzkopf .kern { flex: 1; min-width: 260px; } .fzkopf .serie { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); } .fzkopf h1 { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; letter-spacing: -.02em; margin: .1rem 0; } .fzkopf .tagline { font-size: 1.12rem; color: var(--muted); margin-bottom: .7rem; line-height: 1.45; } .fzkopf .aktionen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; } .zurueck { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; display: inline-flex; gap: .3rem; cursor: pointer; } .zurueck:hover { color: var(--ink); } /* Kundennutzen-Liste */ .nutzenliste { list-style: none; display: flex; flex-direction: column; gap: .55rem; } .nutzenliste li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.5; } .nutzenliste li::before { content: "✓"; color: var(--ok); font-weight: 700; flex-shrink: 0; } /* Spec-Tabelle */ .spectbl { width: 100%; border-collapse: collapse; font-size: .95rem; } .spectbl th, .spectbl td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid var(--border); vertical-align: top; } .spectbl th { width: 42%; color: var(--muted); font-weight: 500; } .spectbl tr:last-child th, .spectbl tr:last-child td { border-bottom: none; } .spectbl .gruppe td { padding-top: 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); border-bottom: none; } /* Optionen-Chips + Listen */ .optliste { display: flex; flex-direction: column; gap: .7rem; } .optzeile { display: flex; gap: .8rem; align-items: baseline; line-height: 1.5; } .optzeile b { white-space: nowrap; } /* interne Notiz */ .internnotiz { margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--radius-s); background: rgba(255,159,10,.09); font-size: .88rem; line-height: 1.5; } .internnotiz b { color: var(--warn); } /* ---------- Galerie ---------- */ .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; } .gbild { border-radius: var(--radius-s); overflow: hidden; background: var(--flaeche2); position: relative; } .gbild .gimg { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; } .gbild .gimg img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--uebergang); } .gbild .gimg:hover img { transform: scale(1.04); } .gbild .gimg .pdficon { font-size: 2.4rem; opacity: .5; } .gbild .gname { font-size: .74rem; padding: .4rem .55rem 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gbild .gaktionen { display: flex; gap: .1rem; padding: .1rem .3rem .3rem; } .gbild .gaktionen .iconbtn { min-width: 1.7rem; height: 1.7rem; font-size: .8rem; } .gbild .stern { position: absolute; top: .4rem; left: .4rem; font-size: 1rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .uploadzone { border: 2px dashed var(--border); border-radius: var(--radius-s); padding: 1.3rem; text-align: center; color: var(--muted); font-size: .9rem; cursor: pointer; transition: all var(--uebergang); } .uploadzone:hover, .uploadzone.drag { border-color: var(--orange); color: var(--orange); background: rgba(239,125,0,.05); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 8px; } /* ---------- Tabellen ---------- */ .tblwrap { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; font-size: .92rem; } .tbl th { text-align: left; padding: .55rem .7rem; font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); } .tbl td { padding: .65rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.45; } .tbl tr:last-child td { border-bottom: none; } .tbl tr.klickbar { cursor: pointer; } .tbl tr.klickbar:hover td { background: var(--flaeche2); } /* ---------- Historie ---------- */ .histliste { display: flex; flex-direction: column; gap: .1rem; max-height: 22rem; overflow-y: auto; } .histzeile { display: flex; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .87rem; } .histzeile:last-child { border-bottom: none; } .histzeile .wer { color: var(--muted); white-space: nowrap; } /* ---------- iOS-Switch ---------- */ .switch { position: relative; display: inline-block; width: 2.9rem; height: 1.7rem; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .knopf { position: absolute; inset: 0; border-radius: 999px; background: var(--flaeche2); border: 1px solid var(--border); transition: background var(--uebergang); } .switch .knopf::before { content: ""; position: absolute; width: 1.4rem; height: 1.4rem; left: .12rem; top: .1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--uebergang); } .switch input:checked + .knopf { background: var(--ok); border-color: var(--ok); } .switch input:checked + .knopf::before { transform: translateX(1.2rem); } /* Checkbox-Listen in Modals */ .checkliste { display: flex; flex-direction: column; gap: .15rem; max-height: 20rem; overflow-y: auto; margin-top: .4rem; } .checkliste label { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .5rem .6rem; border-radius: var(--radius-s); font-size: .92rem; font-weight: 400; color: var(--ink); cursor: pointer; } .checkliste label:hover { background: var(--flaeche2); } .checkliste input[type="checkbox"] { width: auto; accent-color: var(--orange); transform: scale(1.15); } /* ---------- Modal (zentriertes Sheet) ---------- */ .modal-bg { position: fixed; inset: 0; z-index: 70; background: var(--overlay); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 1.2rem; animation: einblenden .18s ease-out; } @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--flaeche); border-radius: 22px; box-shadow: 0 24px 80px rgba(0,0,0,.35); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; animation: hochkommen .22s cubic-bezier(.2,.9,.3,1.05); } @keyframes hochkommen { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .modal.breit { max-width: 760px; } .m-h { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.4rem .3rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; } .m-b { padding: .5rem 1.4rem; overflow-y: auto; } .m-foot { display: flex; justify-content: flex-end; gap: .55rem; padding: .9rem 1.4rem 1.2rem; } .hinweis { font-size: .88rem; line-height: 1.55; color: var(--muted); margin: .4rem 0; } .hinweis.orange { color: var(--orange); } /* Spec-Editor-Zeilen */ .specedit { display: flex; flex-direction: column; gap: .45rem; margin-top: .4rem; } .specedit .zeile { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr auto; gap: .4rem; align-items: center; } .specedit .zeile input { padding: .45rem .65rem; font-size: .88rem; } /* ---------- Toast ---------- */ #toast { display: none; position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 100; background: var(--ink); color: var(--bg); padding: .65rem 1.3rem; border-radius: 999px; font-size: .9rem; font-weight: 500; box-shadow: var(--schatten-hover); max-width: 90vw; } #toast.err { background: var(--rot); color: #fff; } /* ---------- Mitteilungen ---------- */ .inbox-pop { position: fixed; top: 3.6rem; right: 1rem; width: 24rem; max-width: 94vw; z-index: 65; margin-bottom: 0; box-shadow: var(--schatten-hover); } .inbox-liste { max-height: 60vh; overflow-y: auto; padding: 0 .4rem .4rem; } .inbox-pop .item { padding: .6rem .8rem; border-radius: var(--radius-s); font-size: .88rem; line-height: 1.45; } .inbox-pop .item[data-o] { cursor: pointer; } .inbox-pop .item[data-o]:hover { background: var(--flaeche2); } .inbox-pop .item.unread { background: rgba(239,125,0,.07); } .inbox-pop .item .ts { font-size: .74rem; color: var(--muted); margin-top: .15rem; } /* ---------- Login ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 1.5rem; } .login-box { background: var(--flaeche); border-radius: 26px; box-shadow: var(--schatten-hover); padding: 2.6rem 2.4rem 2rem; width: 100%; max-width: 400px; text-align: center; } .login-logo { font-size: 2.6rem; margin-bottom: .8rem; } .login-box h1 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; } .login-box .sub { color: var(--muted); font-size: .92rem; margin: .3rem 0 1.6rem; } .login-box input { margin-bottom: .7rem; text-align: center; padding: .75rem; border-radius: var(--radius-s); } .login-box .btn { width: 100%; margin-top: .4rem; } .login-err { color: var(--rot); font-size: .85rem; min-height: 1.2rem; margin-bottom: .3rem; } .login-fuss { margin-top: 1.6rem; font-size: .78rem; color: var(--muted); line-height: 1.6; } /* ---------- Druck (Datenblatt) ---------- */ #printarea { display: none; } @media print { body > *:not(#printarea) { display: none !important; } #printarea { display: block; color: #1d1d1f; } #printarea h1 { font-size: 24pt; margin-bottom: 2pt; } #printarea .pr-tagline { color: #6e6e73; font-size: 12pt; margin-bottom: 4pt; } #printarea .pr-brand { color: #ef7d00; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 9pt; margin-bottom: 8pt; } #printarea h2 { font-size: 13pt; margin: 14pt 0 6pt; border-bottom: 2pt solid #ef7d00; padding-bottom: 3pt; } #printarea table { width: 100%; border-collapse: collapse; font-size: 10pt; } #printarea th, #printarea td { text-align: left; padding: 4pt 6pt; border-bottom: .5pt solid #ddd; vertical-align: top; } #printarea th { width: 40%; color: #6e6e73; } #printarea ul { padding-left: 14pt; font-size: 10.5pt; line-height: 1.5; } #printarea .pr-fuss { margin-top: 18pt; padding-top: 6pt; border-top: .5pt solid #ddd; font-size: 8pt; color: #6e6e73; } } /* ---------- Responsiv ---------- */ @media (max-width: 980px) { .topnav { display: none; margin-left: 0; } .topnav.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 3.3rem; left: .8rem; right: .8rem; background: var(--flaeche); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--schatten-hover); padding: .5rem; z-index: 50; } .topnav.open .navlink { text-align: left; padding: .7rem 1rem; font-size: 1rem; } .burger { display: inline-flex; } .tsearch input { width: 7.5rem; } .tsearch input:focus { width: 11rem; } .userchip, #fsseg { display: none; } .fzkopf .hero { width: 100%; } .seitenkopf h1 { font-size: 1.7rem; } .specedit .zeile { grid-template-columns: 1fr 1fr; } }