/* PEWELI AI — gemeinsames Stylesheet
Keine externen Ressourcen: keine Webfonts, keine Bibliotheken, kein Tracking.
Das ist eine Design- und eine Datenschutzentscheidung zugleich. */
/* ── FARBE ────────────────────────────────────────────────────────────────
Die Palette war bis zum 17.08.2026 warmes Creme (#f7f6f2) mit Georgia als
Displayschrift und rotem Akzent. Das ist inzwischen die Handschrift
maschinell erzeugter Seiten — man erkennt sie sofort, und sie sagt ueber
diesen Betrieb nichts aus.
Der Gegenentwurf kommt aus der Sache: dem WACHBUCH. Amtliches Papier ist
nicht warm, es ist kuehl. Jeder Neutralton traegt hier deshalb einen
leichten Blaustich — gewaehlt, nicht geerbt. Das Rot bleibt: Es ist die
Hausfarbe von Sicherheitstechnik-PEWELI. Es wird nur sparsamer benutzt,
naeher am Stempel als am Werbebanner.
─────────────────────────────────────────────────────────────────────── */
:root{
--red:#d0021b; /* Signalrot — Stempelfarbe, nicht Bannerfarbe */
--red-dark:#a30115;
--ink:#101418; /* Stempelschwarz, blaustichig statt braeunlich */
--ink-soft:#333d47;
--mut:#5d6771;
--line:#dcdfe3; /* Haarlinie wie im Vordruck */
--line-soft:#eceef1;
--paper:#ffffff;
--bone:#f7f8fa; /* kuehles Papier statt warmem Creme */
--dark:#0c1014; /* Nachtgrund, blauschwarz */
--stahl:#4a5560; /* tragende Struktur */
/* ── SCHRIFT ───────────────────────────────────────────────────────────
Weiterhin OHNE Webfont — nicht aus Bequemlichkeit: Ein Aufruf bei
Google Fonts uebertraegt die IP-Adresse des Besuchers in die USA. Das
LG Muenchen I hat darin am 20.01.2022 (3 O 17493/20) einen Verstoss
gegen die DSGVO gesehen. Fuer eine Seite, die mit Datenschutz wirbt,
waere das ein Widerspruch im Quelltext.
Die Georgia-Serife ist trotzdem raus. An ihre Stelle tritt eine eng
gesetzte Grotesk fuer Ueberschriften — und, das ist der eigentliche
Griff, eine SCHREIBMASCHINENSCHRIFT fuer alles Belegbare: Uhrzeiten,
Laufnummern, Pruefsummen, Aktenzeichen. So sieht ein Wachbuch aus.
─────────────────────────────────────────────────────────────────── */
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--serif:var(--sans); /* Altlast: noch an einzelnen Stellen referenziert */
--mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace;
--gut:clamp(20px,5vw,48px);
--max:1180px;
--prose:68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--sans);font-size:17px;line-height:1.65;
font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dark)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.prose{max-width:var(--prose)}
/* ---------- Typografie ---------- */
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.08;font-weight:700}
h1{font-size:clamp(2.5rem,6.2vw,4.35rem);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.12rem;letter-spacing:-.01em;line-height:1.35}
p{margin:0 0 1.05em}
.eyebrow{
font-size:.735rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:var(--red);margin:0 0 1.15rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";flex:0 0 42px;height:1px;background:var(--red);opacity:.45}
.lead{font-size:clamp(1.1rem,1.9vw,1.32rem);line-height:1.55;color:var(--ink-soft)}
.small{font-size:.94rem;color:var(--mut)}
/* ---------- Kopfzeile ---------- */
.hdr{
position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line-soft);
}
.hdr .wrap{display:flex;align-items:center;gap:2rem;height:70px}
.hdr img{height:32px;width:auto}
.hdr nav{margin-left:auto;display:flex;gap:1.9rem;align-items:center}
.hdr nav a{
color:var(--ink-soft);font-size:.925rem;font-weight:500;position:relative;padding:.2rem 0;
}
.hdr nav a::after{
content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
background:var(--red);transition:right .28s cubic-bezier(.2,.7,.3,1);
}
.hdr nav a:hover{color:var(--ink)}
.hdr nav a:hover::after{right:0}
.hdr .cta{
background:var(--ink);color:#fff;padding:.55rem 1.05rem;border-radius:6px;font-size:.9rem;font-weight:600;
transition:background .2s;
}
.hdr .cta::after{display:none}
.hdr .cta:hover{background:var(--red);color:#fff}
/* ---------- Menüschalter (nur mobil sichtbar) ---------- */
.navToggle{
display:none;margin-left:auto;width:44px;height:44px;padding:0;
background:transparent;border:1px solid var(--line);border-radius:9px;
cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
transition:border-color .2s,background .2s;-webkit-tap-highlight-color:transparent;
}
.navToggle:hover{border-color:var(--stahl);background:var(--bone)}
.navToggle span{
display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;
transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .18s;
}
.navToggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navToggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navToggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
.navToggle{display:flex}
.hdr .wrap{gap:1rem}
.hdr nav{
position:absolute;top:100%;left:0;right:0;
background:var(--paper);border-bottom:1px solid var(--line);
flex-direction:column;align-items:stretch;gap:0;
padding:.4rem 0 1rem;margin:0;
box-shadow:0 18px 40px -26px rgba(20,20,15,.55);
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .24s ease,transform .24s cubic-bezier(.2,.7,.3,1),visibility .24s;
}
.hdr nav.open{opacity:1;visibility:visible;transform:none}
.hdr nav a{padding:.95rem var(--gut);font-size:1.02rem;border-bottom:1px solid var(--line-soft)}
.hdr nav a::after{display:none}
.hdr nav a:last-of-type{border-bottom:0}
.hdr .cta{
margin:.9rem var(--gut) 0;padding:.85rem 1rem;text-align:center;
border-radius:7px;border-bottom:0;font-size:1rem;
}
}
@media(prefers-reduced-motion:reduce){
.navToggle span,.hdr nav{transition:none}
}
/* ---------- Abschnitte ---------- */
section{padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--line-soft)}
section:first-of-type{border-top:0}
.sec-head{margin-bottom:clamp(34px,4.5vw,58px)}
.sec-head h2{margin-bottom:.55rem}
/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}
/* ---------- Karten & Raster ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card{
background:var(--paper);border:1px solid var(--line);border-radius:14px;
padding:clamp(22px,2.6vw,30px);transition:border-color .25s,transform .25s,box-shadow .25s;
}
.card:hover{border-color:var(--stahl);transform:translateY(-2px);box-shadow:0 10px 34px -22px rgba(20,20,15,.45)}
.card h3{margin-bottom:.5rem}
.card p{margin:0;color:var(--mut);font-size:.965rem;line-height:1.6}
.ico{width:34px;height:34px;margin-bottom:1.15rem;color:var(--red)}
/* ---------- Kennzahlen ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stat{background:var(--paper);padding:clamp(24px,3vw,34px)}
.stat .num{
font-size:clamp(2.3rem,4.4vw,3.1rem);font-weight:700;letter-spacing:-.04em;line-height:1;
color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:.5rem;
}
.stat .num span{color:var(--red)}
.stat p{margin:0;font-size:.93rem;color:var(--mut);line-height:1.55}
/* ---------- Dunkler Abschnitt ---------- */
.dark{background:var(--dark);color:#e8e6df;border-top:0}
.dark h2{color:#fff}
.dark .eyebrow{color:#ff6b62}
.dark .eyebrow::after{background:#ff6b62}
.dark .lead,.dark p{color:#b9b6ac}
.dark strong{color:#fff;font-weight:600}
.dark .rule{height:1px;background:#2e2e26;margin:2.4rem 0}
/* ---------- Definitionsliste ---------- */
.dl{display:grid;gap:0;border-top:1px solid var(--line)}
.dl > div{
display:grid;grid-template-columns:minmax(180px,.32fr) 1fr;gap:clamp(14px,3vw,44px);
padding:1.45rem 0;border-bottom:1px solid var(--line);
}
.dl dt{font-weight:650;letter-spacing:-.01em}
.dl dd{margin:0;color:var(--mut);font-size:.985rem}
@media(max-width:660px){.dl > div{grid-template-columns:1fr;gap:.35rem}}
/* ---------- Zeitstrahl ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{position:relative;padding:0 0 2.1rem 2.6rem;border-left:1px solid var(--line)}
.steps li:last-child{padding-bottom:0;border-left-color:transparent}
.steps li::before{
content:"";position:absolute;left:-5px;top:.42rem;width:9px;height:9px;border-radius:50%;
background:var(--paper);border:2px solid var(--line);
}
.steps li.now::before{background:var(--red);border-color:var(--red)}
.steps h3{margin-bottom:.25rem}
.steps p{margin:0;color:var(--mut);font-size:.965rem}
.steps .when{font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:.3rem}
.steps li.now .when{color:var(--red)}
/* ---------- Statusmarke ---------- */
.chip{
display:inline-flex;align-items:center;gap:.45rem;font-size:.735rem;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px;
border:1px solid var(--line);color:var(--mut);background:var(--paper);white-space:nowrap;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.chip.live{color:var(--red);border-color:rgba(226,10,23,.3);background:rgba(226,10,23,.05)}
/* ---------- Gegenüberstellung heute / mit PEWELI.app ---------- */
.gegen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);align-items:stretch}
@media(max-width:780px){.gegen{grid-template-columns:1fr}}
.gegen > div{border-radius:14px;padding:clamp(24px,3vw,34px)}
.gegen .heute{background:var(--bone);border:1px solid var(--line)}
.gegen .mit{background:var(--ink);color:#e8e6df}
.gegen h3{font-size:1.05rem;margin-bottom:1.15rem;letter-spacing:0}
.gegen .heute h3{color:var(--mut)}
.gegen .mit h3{color:#ff6b62}
.gegen ul{list-style:none;margin:0;padding:0}
.gegen li{position:relative;padding-left:1.85rem;margin-bottom:.85rem;font-size:.985rem;line-height:1.55}
.gegen li:last-child{margin-bottom:0}
.gegen .heute li{color:var(--ink-soft)}
.gegen .mit li{color:#c4c1b7}
.gegen .mit li b{color:#fff;font-weight:600}
.gegen li::before{
position:absolute;left:0;top:.1rem;width:1.2rem;height:1.2rem;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;
}
.gegen .heute li::before{content:"✕";background:#e6e3db;color:#8a8779}
.gegen .mit li::before{content:"✓";background:rgba(255,107,98,.16);color:#ff6b62}
/* ---------- Der Weg: Stationen ---------- */
.weg{list-style:none;margin:0;padding:0;counter-reset:st}
.weg li{
position:relative;padding:0 0 clamp(26px,3.4vw,38px) clamp(52px,5vw,68px);
border-left:2px solid var(--line);
}
.weg li:last-child{padding-bottom:0;border-left-color:transparent}
.weg li::before{
counter-increment:st;content:counter(st);
position:absolute;left:calc(-1 * clamp(17px,1.7vw,19px));top:0;
width:clamp(32px,3.4vw,36px);height:clamp(32px,3.4vw,36px);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:.87rem;font-weight:700;font-variant-numeric:tabular-nums;
background:var(--paper);border:2px solid var(--line);color:var(--mut);
}
.weg li.fertig{border-left-color:var(--ink)}
.weg li.fertig::before{background:var(--ink);border-color:var(--ink);color:#fff}
.weg li.jetzt{border-left-color:var(--red)}
.weg li.jetzt::before{
background:var(--red);border-color:var(--red);color:#fff;
box-shadow:0 0 0 5px rgba(226,10,23,.14);
}
.weg .marke{
display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--mut);margin-bottom:.42rem;
}
.weg li.fertig .marke{color:var(--ink)}
.weg li.jetzt .marke{color:var(--red)}
.weg h3{margin-bottom:.35rem}
.weg p{margin:0;color:var(--mut);font-size:.975rem;max-width:60ch}
.weg .hier{
display:inline-flex;align-items:center;gap:.45rem;margin-top:.75rem;
background:rgba(226,10,23,.07);border:1px solid rgba(226,10,23,.25);color:var(--red);
border-radius:999px;padding:.34rem .8rem;font-size:.78rem;font-weight:700;letter-spacing:.05em;
}
/* ---------- Einladung ---------- */
.laden{
background:var(--bone);border:1px solid var(--line);border-radius:16px;
padding:clamp(28px,4vw,52px);text-align:center;
}
.laden h2{margin-bottom:.9rem}
.laden p{margin-left:auto;margin-right:auto;max-width:58ch}
/* ---------- Hinweis ---------- */
.note{background:var(--bone);border-left:2px solid var(--red);border-radius:0 12px 12px 0;padding:clamp(20px,2.6vw,28px)}
.note p:last-child{margin-bottom:0}
.note p{font-size:.985rem}
/* ---------- Einblick / Bildschirmfotos ---------- */
.shots{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(22px,3.2vw,44px);align-items:center}
@media(max-width:860px){.shots{grid-template-columns:1fr}}
figure{margin:0}
figure img{
width:100%;border-radius:12px;border:1px solid var(--line);
box-shadow:0 24px 60px -34px rgba(20,20,15,.5);background:var(--paper);
}
figure.phone img{border:0;box-shadow:none;max-width:330px;margin:0 auto}
figcaption{margin-top:1rem;font-size:.94rem;color:var(--mut);line-height:1.55}
figcaption b{color:var(--ink);font-weight:650;display:block;margin-bottom:.2rem}
/* ---------- Kontakt ---------- */
.btn{
display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:#fff;
padding:.85rem 1.5rem;border-radius:7px;font-weight:600;font-size:.98rem;transition:background .2s,transform .2s;
}
.btn:hover{background:var(--red);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--stahl)}
.btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
/* ---------- Fußzeile ---------- */
footer{background:var(--dark);color:#8d8a80;padding:clamp(48px,6vw,72px) 0 2.4rem;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,4vw,54px);margin-bottom:3rem}
@media(max-width:720px){footer .cols{grid-template-columns:1fr;gap:2rem}}
footer h4{color:#fff;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1rem;font-weight:700}
footer a{color:#c9c6bc;display:block;margin-bottom:.55rem}
footer a:hover{color:#fff}
footer .base{border-top:1px solid #2a2a22;padding-top:1.8rem;display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap;font-size:.86rem;line-height:1.6}
/* ---------- Tippziele auf dem Handy ----------
Fuß- und Kontaktlinks sind im Fließtext nur rund 22–25 px hoch.
Auf Touchgeräten reicht das nicht; Fingerkuppen treffen ~44 px zuverlässig. */
@media(max-width:760px){
footer a{padding:.6rem 0;margin-bottom:0}
footer .base a{display:inline-block}
a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding:.42rem 0}
.legal a{padding:.2rem 0}
.btn{min-height:44px}
.hdr > .wrap > a:first-child{display:flex;align-items:center;min-height:44px}
}
/* ---------- Rechtsseiten ---------- */
.legal{padding:clamp(48px,7vw,90px) 0 clamp(60px,8vw,110px)}
.legal h1{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:2.4rem}
.legal h2{font-size:1.16rem;letter-spacing:-.01em;margin:2.6rem 0 .7rem}
.legal p,.legal li{color:var(--ink-soft)}
.legal ul{margin:0 0 1.05em;padding-left:1.2rem}
.legal li{margin-bottom:.4rem}
.legal .meta{color:var(--mut);font-size:.95rem}
/* --------------------------------------------------------------------------
Lesbarkeit auf dem Handy (17.08.2026)
--------------------------------------------------------------------------
Gemessen bei 375 px Breite: Etiketten und Statusmarken standen bei 11,2 bis
11,8 px. Fuer Grossbuchstaben-Beschriftungen ist das noch vertretbar — die
Marken im Fahrplan tragen aber echte Information ("Abgeschlossen · Juli
2026"), und die liest bei 11 px niemand gern.
Angehoben wird deshalb nur dort, wo Inhalt steht, nicht ueberall.
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
.weg .marke { font-size: .8rem; letter-spacing: .06em; }
.when { font-size: .82rem; }
.hier { font-size: .82rem; }
.eyebrow { font-size: .78rem; }
.chip { font-size: .76rem; }
/* Fliesstext bekommt etwas mehr Luft — bei schmaler Spalte zaehlt jede Zeile. */
.prose p, .card p, .note p { line-height: 1.72; }
}
/* ==========================================================================
HANDWERK · 17.08.2026
==========================================================================
Was eine sorgfältig gebaute Seite von einer zusammengesetzten unterscheidet,
sind selten die grossen Entscheidungen. Es sind die Stellen, an denen der
Browser sonst seine Voreinstellung durchreicht — und die sieht auf jeder
Seite der Welt gleich aus.
Vier davon waren hier offen:
· die Serifenschrift war definiert und wurde nirgends benutzt
· Formularfelder standen in Browser-Voreinstellung
· es gab keine Druckfassung — bei einer Rechtsseite
· Verweise und Textauswahl trugen Standardoptik
========================================================================== */
/* ---------- 1. Typografische Hierarchie ----------------------------------
Ueberschriften in der Serifenschrift, Fliesstext und Bedienelemente
serifenlos. Der Kontrast zwischen beiden traegt die Hierarchie — nicht die
Schriftgroesse allein. Fuer ein Haus, das mit Aktenlage und Rechtsprechung
arbeitet, ist die Serife ausserdem der richtige Ton. */
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.022em; }
h1 { letter-spacing: -.028em; }
.lead { font-family: var(--serif); font-weight: 400; }
blockquote { font-family: var(--serif); }
/* Zahlen: gleiche Breite, damit sie untereinander stehen wie in einer
Aufstellung. */
.num, .vgl td, .stat .num, table td { font-variant-numeric: tabular-nums; }
/* ---------- 2. Verweise im Fliesstext -------------------------------------
Ein Verweis soll erkennbar sein, ohne den Textfluss zu zerhacken:
unterstrichen mit Abstand zur Grundlinie, duenn, beim Zeigen kraeftiger. */
.prose a:not(.btn):not(.knopf):not(.knopf-still),
.note a, .rz a, .faq-frage a, .beitrag a, .card p a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
text-decoration-color: color-mix(in srgb, var(--red) 45%, transparent);
transition: text-decoration-color .15s ease, color .15s ease;
}
.prose a:hover:not(.btn), .note a:hover, .rz a:hover, .faq-frage a:hover {
text-decoration-color: var(--red);
}
/* ---------- 3. Textauswahl ------------------------------------------------ */
::selection { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--ink); }
/* ---------- 4. Formularfelder --------------------------------------------
Der groesste sichtbare Unterschied. Ein Feld in Browser-Voreinstellung
verraet eine Seite sofort — und die Modulauswahl besteht fast nur daraus. */
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=datetime-local], input[type=number], input[type=search],
input[type=password], select, textarea {
width: 100%;
font: inherit;
font-size: .98rem;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 9px;
padding: .62rem .8rem;
transition: border-color .15s ease, box-shadow .15s ease;
appearance: none; -webkit-appearance: none;
}
textarea { line-height: 1.6; resize: vertical; min-height: 5.5rem; }
input:hover, select:hover, textarea:hover { border-color: #c9c3b6; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--red);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent);
}
input::placeholder, textarea::placeholder { color: #a9a69c; }
/* Auswahlfeld mit eigenem Pfeil — der voreingestellte ist auf jedem
Betriebssystem ein anderer. */
select {
padding-right: 2.2rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .85rem center;
background-size: 11px;
}
label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .32rem; }
/* Ankreuzfeld — sichtbar, gross genug zum Treffen, in der Hausfarbe. */
input[type=checkbox]:not([hidden]), input[type=radio]:not([hidden]) {
/* Ohne dies zeichnet der Browser weiter sein eigenes Kaestchen und ignoriert
Rand, Radius und Farbe vollstaendig. */
appearance: none; -webkit-appearance: none;
width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
border: 1.5px solid #bfb9ac; border-radius: 4px;
background-color: #ffffff; cursor: pointer;
transition: background-color .12s ease, border-color .12s ease;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:checked:not([hidden]), input[type=radio]:checked:not([hidden]) {
/* AUSGESCHRIEBEN statt Kurzschreibweise: `background: var(--red)` gefolgt
von `background-image` setzte die Farbe nicht durch — die Kurzschreibweise
mit var() wird verzoegert aufgeloest und kam der Bildangabe in die Quere. */
background-color: var(--red);
border-color: var(--red);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center; background-size: 11px;
}
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
outline: 2px solid var(--red); outline-offset: 2px;
}
/* Knoepfe: klare Zustaende statt eines Sprungs beim Zeigen. */
.knopf, .knopf-still, button.knopf, button.knopf-still {
font: inherit; font-size: .94rem; font-weight: 600;
border-radius: 9px; padding: .6rem 1.15rem; cursor: pointer;
border: 1px solid transparent;
transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}
.knopf { background: var(--red); color: #fff; }
.knopf:hover { background: var(--red-dark); color: #fff; }
.knopf-still { background: var(--paper); color: var(--ink); border-color: var(--line); }
.knopf-still:hover { border-color: #c9c3b6; }
.knopf:active, .knopf-still:active { transform: translateY(1px); }
/* ---------- 5. Tabellen ---------------------------------------------------
Waagerechte Linien statt eines Gitters: Das Auge folgt der Zeile. */
.tabelle-rahmen table th { font-weight: 600; letter-spacing: .01em; }
.tabelle-rahmen table tbody tr { transition: background-color .12s ease; }
.tabelle-rahmen table tbody tr:hover { background: color-mix(in srgb, var(--bone) 60%, transparent); }
/* ---------- 6. Druckfassung ----------------------------------------------
Die Rechtsseite und die haeufigen Fragen werden ausgedruckt und in eine
Akte gelegt. Dann stoeren Navigation, Fusszeile und Schaltflaechen — und
ein Verweis ist wertlos, wenn man sein Ziel nicht sieht. */
@media print {
.hdr, footer, .navToggle, .btns, .knopf, .knopf-still,
.inhalt-nav, .faq-inhalt { display: none !important; }
body { font-size: 11pt; line-height: 1.5; background: #fff; color: #000; }
section { padding: 0 0 1.2rem !important; background: #fff !important; break-inside: avoid; }
.wrap { max-width: none; padding: 0; }
h1 { font-size: 20pt; }
h2 { font-size: 14pt; break-after: avoid; }
h3 { font-size: 11.5pt; break-after: avoid; }
.karte, .note, .offen, .card, .hinweiskarte { border: 1px solid #bbb; break-inside: avoid; }
.prose a[href^="http"]::after,
.rz a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
.vgl-rahmen { overflow: visible; }
.vgl { min-width: 0; font-size: 9.5pt; }
}
/* ---------- 7. Ruecksicht -------------------------------------------------
Wer Bewegung abgestellt hat, bekommt keine — auch nicht die feinen
Uebergaenge oben. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
.karten-rolle{font-size:.78rem;color:var(--mut);margin:.1rem 0 .6rem}
/* ---------- Knöpfe auf dunklem Grund -------------------------------------
Gefunden am 17.08.2026 an einem Bildschirmfoto des Auftraggebers: Der Knopf
„Gespräch vereinbaren" stand als schwarzer Kasten auf schwarzem Grund — nur
die Schrift war zu sehen.
Die Ursache ist eine, die man im Hellen nie bemerkt: `.btn` trägt
`background: var(--ink)`, und `--ink` (#14140f) ist DIESELBE Farbe wie
`--dark`. Im hellen Abschnitt ein kräftiger dunkler Knopf, im dunklen ein
unsichtbarer.
Der Geisterknopf war noch schlimmer: Seine Schrift steht in `--ink` — auf
dunklem Grund also schwarz auf schwarz, ohne jeden Kontrast.
Beides wird hier für JEDEN dunklen Abschnitt gelöst, nicht am Einzelfall:
Wer morgen einen weiteren dunklen Abschnitt anlegt, erbt die Korrektur. */
.dark .btn {
background: var(--red);
color: #fff;
}
.dark .btn:hover {
background: #ff3345; /* heller, nicht dunkler — auf Schwarz sonst unsichtbar */
color: #fff;
}
.dark .btn.ghost {
background: transparent;
color: #eef1f4;
border: 1px solid #3c454e;
}
.dark .btn.ghost:hover {
background: rgba(255, 255, 255, .08);
color: #fff;
border-color: #6f6f62;
}
/* Auch die kleineren Schaltflächen und Verweise im Fließtext. */
.dark .knopf { background: var(--red); color: #fff; }
.dark .knopf:hover { background: #ff3345; }
.dark .knopf-still { background: transparent; color: #eef1f4; border-color: #3c454e; }
.dark a:not(.btn):not(.knopf):not(.knopf-still) { color: #ff8a82; }
.dark a:not(.btn):hover { color: #ffb3ad; }
/* Der Fokusring muss auf dunklem Grund ebenfalls sichtbar bleiben. */
.dark :focus-visible { outline-color: #ff8a82; }
/* ---------------------------------------------------------------
Zweispaltige Kopfbereiche brechen auf schmalen Geraeten um.
Diese Regel stand bis zum 17.08.2026 NUR in index.html. preise.html
benutzte dieselbe Klasse und blieb deshalb auf dem Handy zweispaltig.
Eine Regel, die eine gemeinsame Klasse betrifft, gehoert hierher —
sonst gilt sie fuer die Seite, auf der sie zufaellig steht.
--------------------------------------------------------------- */
@media (max-width: 820px) {
.hero-grid { grid-template-columns: 1fr !important; }
}
/* ==========================================================================
WACHBUCH · 17.08.2026
==========================================================================
Der Auftraggeber hat die Seite angesehen und gesagt, sie sehe „typisch nach
KI" aus. Er hatte recht, und es liess sich benennen: warmes Creme, Georgia
als Displayschrift, ein roter Akzent, gerundete Karten mit Schlagschatten.
Das ist heute die Handschrift maschinell erzeugter Seiten. Sie sagt ueber
einen Sicherheitsbetrieb in Paderborn genau nichts.
Was stattdessen? Die Sache selbst. Diese Anwendung dreht sich um EINEN
Gedanken: dass eine Aufzeichnung spaeter standhaelt. Uhrzeiten, laufende
Nummern, Pruefsummen, unveraenderliche Eintraege, eine Kopie, die ein
Gericht bekommt. Das Vorbild dafuer gibt es seit hundert Jahren — das
WACHBUCH: liniiert, durchnummeriert, in Spalten, ohne Zierrat.
Drei Griffe setzen das um:
1. HAARLINIEN STATT KARTEN. Ein Vordruck hat keine schwebenden Kacheln.
Er hat Linien. Karten liegen jetzt in einem Raster aus 1px-Linien,
ohne Radius, ohne Schatten, ohne Anheben beim Zeigen.
2. SCHREIBMASCHINENSCHRIFT FUER ALLES BELEGBARE. Uhrzeit, Laufnummer,
Pruefsumme, Aktenzeichen, Paragraf. Nicht als Effekt — es ist die
Schrift, in der solche Angaben seit jeher stehen, und sie trennt auf
einen Blick Behauptung von Beleg.
3. UEBERSCHRIFTEN ENG UND SACHLICH. Keine Serife, kein Schwung.
Negative Laufweite, hohes Gewicht, kurze Zeilen.
Was bleibt: das Rot. Es ist die Hausfarbe von Sicherheitstechnik-PEWELI
und gehoert dem Betrieb, nicht dem Entwurf. Es wird nur seltener benutzt.
========================================================================== */
/* --- 1. Ueberschriften: eng, schwer, ohne Serife ------------------------- */
h1, h2 {
font-family: var(--sans);
font-weight: 700;
letter-spacing: -.028em;
text-wrap: balance;
}
h3 { letter-spacing: -.012em; }
/* Die Vorzeile war Georgia. Jetzt: gesperrte Versalien, wie ein Formularkopf. */
.lead {
font-family: var(--sans);
font-weight: 400;
color: var(--ink-soft);
}
blockquote { font-family: var(--sans); }
/* --- 2. Belege in Schreibmaschinenschrift -------------------------------- */
/*
Tabellenziffern, damit Uhrzeiten und Betraege untereinander fluchten —
in einer Proportionalschrift tun sie das nicht, und genau daran erkennt
man eine Aufstellung, die niemand gesetzt hat.
*/
.beleg, .when, .hier, time, code, kbd, samp,
td.zahl, th.zahl, .stat .zahl, .chip {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: -.01em;
}
.beleg { color: var(--stahl); font-size: .9em; }
table { font-variant-numeric: tabular-nums; }
/* --- 3. Das Linienraster ------------------------------------------------- */
/*
Der Radius geht auf 0, der Schatten weg, das Anheben beim Zeigen weg.
Ein Wachbuch bewegt sich nicht, wenn man mit dem Finger darueberfaehrt.
Stattdessen faerbt sich die Linie — sichtbar genug, um zu antworten,
ruhig genug, um nicht zu zappeln.
*/
.card {
border-radius: 0;
border-color: var(--line);
transition: border-color .18s, background-color .18s;
}
.card:hover {
border-color: var(--stahl);
transform: none;
box-shadow: none;
background: var(--bone);
}
.note { border-radius: 0; }
.btn, .knopf, .knopf-still { border-radius: 2px; }
/* Die Vorzeile: Linie links statt Linie rechts — sie liest sich als
Registerreiter am Rand, nicht als dekorativer Strich hinter dem Wort. */
.eyebrow {
font-family: var(--mono);
letter-spacing: .12em;
color: var(--stahl);
border-left: 2px solid var(--red);
padding-left: .7rem;
}
.eyebrow::after { display: none; }
/* --- 4. Dunkle Abschnitte auf den neuen Grund ---------------------------- */
/*
Der Nachtgrund ist jetzt blauschwarz (#0c1014). Die Werte hier sind gegen
IHN gerechnet, nicht gegen den alten braunschwarzen — `kaskade-pruefen.php`
loest die Kaskade auf und rechnet nach, welches Paar wirklich gewinnt.
*/
.dark { background: var(--dark); color: #e6e9ec; }
.dark .lead, .dark p { color: #a8b0b8; }
.dark .eyebrow { color: #9aa4ae; border-left-color: var(--red); }
.dark .btn.ghost { border-color: #3c454e; color: #eef1f4; }
.dark .knopf-still { border-color: #3c454e; color: #eef1f4; }
.dark .card { border-color: #2a323a; background: transparent; }
.dark .card:hover { border-color: #4a5560; background: rgba(255,255,255,.03); }
.dark .rule { background: #232b33; }
.dark .beleg { color: #8e99a4; }
/* ── DAS LOGO UND SEIN GRUND ────────────────────────────────────────────────
Die Logodatei ist RGBA — 59 % der Innenflaeche sind durchsichtig. Wo sie
liegt, entscheidet daher, ob der schwarze Schriftzug zu sehen ist.
Beide Faelle werden hier AUSDRUECKLICH beantwortet, auch der harmlose:
`background:transparent` ist eine Aussage ("der Grund ist hell, das ist
geprueft"), kein Weglassen. Ein Waechter verlangt genau das — er kann
nicht wissen, ob ein fehlender Hintergrund Absicht war oder Vergessen.
Am 18.08.2026 zweimal am selben Tag aufgetreten: erst im Kopf der
Anwendung, dann in der Fusszeile von peweli.de.
────────────────────────────────────────────────────────────────────────── */
.logo-kopf{background:transparent}
.logo-fuss{background:#fff;padding:5px 9px;border-radius:5px}