/* Pet Monitor - gemeinsames Stylesheet fuer alle Seiten. Stand: 04.09.2026 Seitentyp ueber eine Klasse am : (ohne Klasse) Startseite, Fuer Tierarztpraxen, Impressum Inhalt 860px class="lesen" FAQ, Datenschutzerklaerung Inhalt 760px Vorher stand dieser Block inline in jeder der 25 Seiten. */ /* ---------- Token ---------- */ :root{ --petrol:#1f6b67; --petrol-hell:#287a76; --ink:#16211f; --muted:#64736f; --bg:#eef5f4; --karte:#ffffff; --linie:#cfe6e2; --chip:#ddefec; --breite:860px; } body.lesen{ --breite:760px; } /* ---------- Grundlage ---------- */ *{box-sizing:border-box} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;margin:0;padding:0;color:var(--ink);line-height:1.6;background:var(--bg)} a{color:var(--petrol-hell)} .wrap{max-width:var(--breite);margin:0 auto;padding:28px 20px 60px} /* Tastaturfokus. Ohne diese Regeln zeigt der Browser seinen eigenen Rahmen, der auf dem Petrol-Band kaum zu sehen ist. Fuer Mausnutzer aendert sich nichts. */ :focus-visible{outline:2px solid var(--petrol-hell);outline-offset:2px} header :focus-visible{outline-color:#fff} .langpop .menu a:focus-visible{outline:2px solid var(--petrol);outline-offset:-2px} /* ---------- Kopfzeile ---------- */ header{background:var(--petrol);color:#fff;padding:26px 20px 22px} header .inner{max-width:var(--breite);margin:0 auto;display:flex;align-items:center;gap:16px} header img.logo{width:56px;height:56px;border-radius:13px;flex:0 0 auto} header h1{margin:0;font-size:24px} header .tag{margin:2px 0 0;opacity:.9;font-size:14.5px} header p{margin:0;opacity:.9} header .wrap{padding:0;max-width:var(--breite);margin:0 auto} body.lesen header{padding:34px 20px 26px} body.lesen header h1{margin:0 0 6px;font-size:26px} /* ---------- Bereichsnavigation ---------- */ nav.top{max-width:var(--breite);margin:16px auto 0;display:flex;flex-wrap:wrap;gap:8px} nav.top a,nav.top span{font-size:14px;padding:5px 13px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.45);color:#fff} nav.top a:hover{background:rgba(255,255,255,.15)} nav.top span[aria-current]{background:#fff;color:var(--petrol);border-color:#fff;font-weight:600} /* ---------- Sprachwahl als Klappmenue (alle Seiten ausser Datenschutz) ---------- */ .langpop{position:relative;margin-left:auto;flex:0 0 auto} .langpop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:14px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.55);color:#fff} .langpop>summary::-webkit-details-marker{display:none} .langpop>summary::after{content:"\25BE";font-size:12px;opacity:.85} .langpop[open]>summary{background:rgba(255,255,255,.15)} .langpop .menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--linie);border-radius:12px;box-shadow:0 12px 30px rgba(20,80,76,.22);min-width:168px;overflow:hidden;z-index:20} .langpop .menu a{display:block;padding:9px 15px;color:var(--petrol-hell);text-decoration:none;font-size:14.5px} .langpop .menu a:hover{background:var(--chip);color:var(--petrol)} .langpop .menu a[aria-current]{color:var(--petrol);font-weight:600;background:var(--bg)} /* ---------- Sprachwahl als Leiste (Datenschutz) ---------- */ .langbar{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px} .langbar a,.langbar span{font-size:14px;padding:4px 11px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.45);color:#fff} .langbar a:hover{background:rgba(255,255,255,.15)} .langbar span[aria-current]{background:#fff;color:var(--petrol);border-color:#fff;font-weight:600} .langbar.dunkel a,.langbar.dunkel span{border-color:var(--linie);color:var(--petrol-hell)} .langbar.dunkel span[aria-current]{background:var(--petrol);color:#fff;border-color:var(--petrol)} /* ---------- Startseite und Fuer Tierarztpraxen ---------- */ .hero{margin:34px 0 6px} .hero h2{color:var(--petrol);font-size:27px;line-height:1.2;margin:0} .hero .sub{color:var(--petrol-hell);font-size:18px;margin:12px 0 0} p.lead{margin:20px 0 0;font-size:16.5px} h2.sec{color:var(--petrol);font-size:20px;margin:38px 0 4px} h3.zwh{color:var(--petrol);font-size:18px;margin:28px 0 0} h3.b{color:var(--petrol);margin:0 0 6px;font-size:17px} .shots{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0 6px} .shots figure{margin:0} .shots img{width:100%;border-radius:10px;border:1px solid var(--linie);display:block} .shots figcaption{font-size:13px;color:var(--petrol-hell);text-align:center;margin-top:7px;line-height:1.35} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .chip{background:var(--karte);border:1px solid var(--linie);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--petrol)} .boxes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px} .box{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:18px 20px} .cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px} .cta .badges{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .cta img.ap{height:52px} .cta img.gp{height:52px} .cta .note{color:var(--muted);font-size:13.5px} .legal{color:var(--muted);font-size:13.5px;margin-top:26px;padding-top:16px;border-top:1px solid var(--linie)} /* ---------- Screenshot-Leiste mit Klick-Vergroesserung ---------- Eigene Klasse, damit .shots auf den Tierarztseiten unveraendert bleibt. Ohne JavaScript bleibt jede Kachel ein normaler Link auf das grosse Bild. */ .leiste{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:10px 0 6px} .leiste a{display:block;border:1px solid var(--linie);border-radius:10px;overflow:hidden; line-height:0;background:var(--karte); transition:border-color .12s ease, transform .12s ease} .leiste img{width:100%;height:auto;display:block} .leiste a:hover,.leiste a:focus-visible{border-color:var(--petrol-hell);transform:translateY(-2px)} .leiste-hinweis{color:var(--muted);font-size:13.5px;margin:30px 0 0} .leiste-download{margin:16px 0 0;font-size:15px} .leiste-download span{color:var(--muted);font-size:13.5px} @media (prefers-reduced-motion:reduce){ .leiste a{transition:none} .leiste a:hover{transform:none} } /* Grossansicht */ dialog.lupe{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;overflow:visible} dialog.lupe::backdrop{background:rgba(22,33,31,.88)} .lupe-innen{display:flex;align-items:center;gap:14px} .lupe-innen img{max-height:84vh;max-width:min(86vw,420px);width:auto;display:block; border-radius:14px;box-shadow:0 12px 30px rgba(20,80,76,.45);background:#fff} .lupe-innen button{flex:0 0 auto;width:44px;height:44px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12); color:#fff;font-size:22px;line-height:1; display:flex;align-items:center;justify-content:center} .lupe-innen button:hover{background:rgba(255,255,255,.24)} .lupe-innen button:focus-visible{outline:2px solid #fff;outline-offset:2px} .lupe-bild{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0} .lupe-zu{position:absolute;top:-14px;right:-14px;width:38px;height:38px;font-size:19px; background:#fff;color:var(--petrol);border-color:#fff} .lupe-zu:hover{background:var(--chip)} .lupe-innen figcaption{color:#fff;text-align:center;font-size:12.5px;opacity:.75; font-variant-numeric:tabular-nums} /* ---------- Karte ---------- */ .karte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:18px 20px;margin:22px 0} .info{background:var(--chip);border-left:5px solid var(--petrol-hell)} body.lesen .karte{margin:18px 0} /* ---------- Lesestrecken (FAQ, Datenschutz) ---------- */ body.lesen h2{color:var(--petrol);font-size:19px;margin:34px 0 10px} body.lesen h3{font-size:16px;margin:22px 0 4px} body.lesen ul{padding-left:20px} .kontakt{font-size:18px;font-weight:600} .muted{color:var(--muted);font-size:14px} /* ---------- Fusszeile ---------- */ footer{margin-top:30px;padding-top:18px;border-top:1px solid var(--linie);color:var(--muted);font-size:14px} body.lesen footer{margin-top:40px} /* ---------- Schmale Fenster ---------- */ @media(max-width:680px){ .shots{grid-template-columns:repeat(2,1fr)} /* fuenf nebeneinander waeren auf dem Telefon 44px breit - stattdessen wischbar */ .leiste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px; -webkit-overflow-scrolling:touch} .leiste a{flex:0 0 132px;scroll-snap-align:start} .lupe-innen{gap:6px} .lupe-innen button{width:38px;height:38px} .lupe-innen img{max-width:calc(100vw - 110px)} .boxes{grid-template-columns:1fr} .hero h2{font-size:23px} }