/* Theme Name: Suvantra Theme URI: https://suvantra.eu/ Author: Suvantra Labs Description: Minimales Theme fuer suvantra.eu. Laedt nichts von fremden Servern, setzt keine Cookies und bringt keine Analysedienste mit — sonst waere die eigene Datenschutzerklaerung unwahr. Kein Build, keine Abhaengigkeit: diese Datei ist zugleich das komplette Stylesheet. Version: 1.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: proprietaer Text Domain: suvantra */ /* Suvantra Labs — eine Datei fuer die ganze Seite. Kein Build, keine Abhaengigkeit, kein Framework: dieselbe Haltung wie in den Programmen selbst. Wer die Seite spaeter anfasst, braucht nur einen Editor. Farben: die Firmenebene bleibt ruhig (Papier und Tinte), den Akzent traegt das jeweilige Produkt. PureQuill setzt darum sein Terrakotta selbst, ueber die Klasse .p-purequill am . Ein zweites Produkt bekommt seine eigene Klasse und faerbt damit dieselbe Seite um. */ :root{ --paper:#FCFBF8; --chrome:#EAE8E0; --chrome-2:#F3F1EA; --ink:#1E2023; --ink-soft:#5C6064; --rule:#D6D3C9; --akzent:#3C4147; /* Firmenebene: gedecktes Schiefer */ --akzent-ink:#FFFFFF; --radius:6px; --radius-lg:12px; --ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --serif:Georgia,"Iowan Old Style","Times New Roman",serif; --breit:1080px; } body.p-purequill{ --akzent:#8C3B2E; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font:16px/1.65 var(--ui); /* Auf grossen Schirmen wird die Zeile sonst zu lang zum Lesen */ text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:inherit} a:focus-visible,button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px} /* Nur die Seitenraender setzen, nicht oben und unten. Als Kurzform (padding:0 24px) schlug diese Regel die Abstaende aus `section` — Klasse gewinnt gegen Element, und die Abschnitte klebten aneinander. */ .wrap{max-width:var(--breit);margin:0 auto;padding-left:24px;padding-right:24px} /* ---- Kopf ---- */ .top{border-bottom:1px solid var(--rule);background:var(--chrome-2)} .top .wrap{display:flex;align-items:center;gap:18px;height:62px} .marke{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:.01em} .marke .m-punkt{width:11px;height:11px;border-radius:2px;background:var(--akzent);flex:none} .top nav{margin-left:auto;display:flex;gap:20px;font-size:14.5px} .top nav a{color:var(--ink-soft);text-decoration:none} .top nav a:hover,.top nav a[aria-current]{color:var(--ink)} .lang{font-size:13px;color:var(--ink-soft);text-decoration:none;border:1px solid var(--rule); border-radius:var(--radius);padding:3px 8px} .lang:hover{background:var(--paper)} /* ---- Fliesstext ---- */ h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.22;margin:0} h1{font-size:clamp(30px,4.4vw,42px);letter-spacing:-.01em} h2{font-size:clamp(22px,2.8vw,27px);margin:0 0 12px} h3{font-size:19px;margin:0 0 6px} p{margin:0 0 14px;max-width:68ch} .lead{font-size:18.5px;line-height:1.6;color:var(--ink-soft);max-width:62ch} section{padding-top:52px;padding-bottom:52px} section+section{border-top:1px solid var(--rule)} .klein{font-size:14px;color:var(--ink-soft)} /* ---- Kopfbereich der Produktseite ---- */ .held{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap;padding-top:56px;padding-bottom:44px} .held-icon{width:104px;flex:none;border-radius:22px;overflow:hidden} .held-text{flex:1;min-width:280px} .held h1{margin-bottom:10px} .knopfreihe{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px} .btn{display:inline-block;text-decoration:none;font:600 15px/1 var(--ui); padding:12px 19px;border-radius:var(--radius);border:1px solid var(--rule); background:var(--chrome-2);color:var(--ink)} .btn:hover{background:var(--chrome)} .btn.pri{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-ink)} .btn.pri:hover{filter:brightness(1.08)} .btn small{display:block;font-weight:400;font-size:12px;opacity:.75;margin-top:3px} /* ---- Bilder ---- */ figure{margin:0 0 30px} figure img{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--chrome)} figcaption{margin-top:9px;font-size:14px;color:var(--ink-soft);max-width:66ch} /* ---- Listen und Raster ---- */ .merkmale{list-style:none;padding:0;margin:0;display:grid;gap:9px 26px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .merkmale li{position:relative;padding-left:19px;color:var(--ink);font-size:15.5px} .merkmale li::before{content:"";position:absolute;left:0;top:.62em; width:7px;height:7px;border-radius:2px;background:var(--akzent)} .karten{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:8px} .karte{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--chrome-2); padding:22px;text-decoration:none;color:inherit;display:block} a.karte:hover{background:var(--chrome)} .karte .kicon{width:52px;border-radius:11px;margin-bottom:13px} .karte h3{margin-bottom:5px} .karte p{margin:0;font-size:14.5px;color:var(--ink-soft)} .karte .bald{display:inline-block;font-size:12px;color:var(--ink-soft); border:1px solid var(--rule);border-radius:20px;padding:2px 9px;margin-bottom:11px} /* ---- Rechtstexte ---- */ .recht{max-width:70ch;padding-top:48px;padding-bottom:60px} .recht h2{margin-top:34px} .recht dl{margin:0 0 14px} .recht dt{font-weight:600;margin-top:12px} .recht dd{margin:2px 0 0} /* ---- Fuss ---- */ footer{border-top:1px solid var(--rule);background:var(--chrome-2);padding:30px 0;margin-top:0} footer .wrap{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center; font-size:14px;color:var(--ink-soft)} footer a{color:var(--ink-soft)} footer .grow{flex:1} @media (max-width:640px){ section{padding-top:40px;padding-bottom:40px} .held{padding-top:38px;padding-bottom:30px;gap:22px} .held-icon{width:78px} .top .wrap{gap:12px} .top nav{gap:14px;font-size:14px} } /* Auf dem Handy passen Marke, Navigation und Sprachwahl nicht in eine Zeile — „PureQuill Writer“ brach um und schob sich in den Markennamen. Darum zwei Zeilen: oben Marke und Sprache, darunter die Navigation. */ @media (max-width:560px){ .top .wrap{height:auto;flex-wrap:wrap;padding-top:11px;padding-bottom:11px;gap:10px} .top nav{order:3;width:100%;margin-left:0;gap:18px} .lang{margin-left:auto} } @media (prefers-reduced-motion:no-preference){ .btn,.karte,.top nav a{transition:background-color .14s,color .14s,filter .14s} } /* ================= WordPress-Anpassungen ================= Die Navigation kommt aus wp_nav_menu und damit als