/* ============================================================
master.css · Hermas Marketing
Gemeinsames Stylesheet für alle Marken-Dokumente.
Abgeleitet aus dem Style Guide Version 1.4.
Einbinden im jeder Seite, NACH der Schriftzeile:
Inhalt
01 Farben, Schrift, Form (Variablen)
02 Grundlagen
03 Typografie
04 Struktur: Kopf, Sektion, Fuss
05 Raster und Karten
06 Tabellen
07 Buttons
08 Badges
09 Hinweiskästen
10 Zitate und Zahlenlisten
11 Steckbrief und Gegenüberstellung
12 Prüflisten
13 Icons
14 Formulare
15 Inhaltsverzeichnis
16 Hilfsklassen
17 Umbrüche, Bewegung, Druck
============================================================ */
/* ---------- 01 Farben, Schrift, Form ---------- */
:root{
/* Blau – trägt die Struktur */
--blau: #256690; /* Primär, aus dem Logo */
--blau-tief: #16455F; /* dunkle Flächen, Footer, Überschriften */
--blau-nebel: #E7EFF4; /* ruhige Abschnittsflächen */
/* Grün – trägt die Handlung */
--gruen: #7CB034; /* Aktion, nur Fläche, nie Schrift */
--gruen-tief: #567A22; /* Grün als Schrift und Hauptbutton */
--gruen-dunkel:#456519; /* Hover des Hauptbuttons */
--gruen-hauch: #EDF4E1; /* Hinweisfläche */
/* Bernstein – Warnung, sehr sparsam */
--bernstein: #E39A16;
--bernstein-t: #8A5A08;
--bernstein-h: #FDF3E0;
/* Rot – ausschliesslich Fehlerzustände */
--rot: #C4463A;
--rot-tief: #8E2B22;
--rot-hauch: #FCEBE9;
/* Neutral */
--tinte: #16303B; /* Schrift auf Grün und Bernstein */
--anthrazit: #262B2E; /* Fliesstext */
--grau: #5C6A72; /* Sekundärtext */
--linie: #D6E0E7; /* Rahmen, Trenner */
--papier: #F7F9FA; /* Seitenhintergrund */
--weiss: #FFFFFF;
/* Schrift */
--display: 'Outfit', system-ui, sans-serif;
--text: 'IBM Plex Sans', system-ui, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, monospace;
/* Form */
--radius: 14px;
--radius-s: 8px;
--schatten: 0 2px 4px rgba(22,69,95,.06), 0 12px 28px rgba(22,69,95,.08);
/* Breiten */
--breite: 1000px;
--zeile: 66ch; /* maximale Lesebreite für Fliesstext */
}
/* ---------- 02 Grundlagen ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--papier);
color:var(--anthrazit);
font-family:var(--text);
font-size:16.5px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px}
.wrap-schmal{max-width:760px;margin:0 auto;padding:0 24px}
::selection{background:var(--gruen-hauch);color:var(--blau-tief)}
:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
/* ---------- 03 Typografie ---------- */
h1,h2,h3,h4,h5{
font-family:var(--display);
color:var(--blau-tief);
margin:0 0 .4em;
line-height:1.15;
letter-spacing:-.02em;
}
h1{font-size:clamp(34px,5.5vw,58px);font-weight:800}
h2{font-size:clamp(26px,3.5vw,36px);font-weight:700}
h3{font-size:21px;font-weight:600;letter-spacing:-.01em}
h4{font-size:17px;font-weight:600;letter-spacing:0}
h5{font-size:15px;font-weight:600;letter-spacing:0}
p{margin:0 0 1.05em;max-width:var(--zeile)}
p:last-child{margin-bottom:0}
.lead{font-size:18.5px;color:var(--grau)}
.klein{font-size:14px;color:var(--grau)}
strong{font-weight:600;color:var(--blau-tief)}
em{font-style:italic}
a{color:var(--gruen-tief);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--blau)}
.mono{font-family:var(--mono);font-size:.86em}
ul,ol{max-width:var(--zeile)}
li{margin-bottom:6px}
hr{border:none;border-top:1px solid var(--linie);margin:38px 0}
/* Eyebrow – das wiederkehrende Struktur-Element über jeder Überschrift */
.eyebrow{
font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--gruen-tief);
display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--gruen);border-radius:2px;flex:none}
/* ---------- 04 Struktur: Kopf, Sektion, Fuss ---------- */
.kopf{background:var(--blau-tief);color:#B9CEDA;padding:56px 0 62px}
.kopf h1,.kopf h2{color:var(--weiss);margin-bottom:.25em}
.kopf p{color:#B9CEDA;font-size:19px;max-width:58ch}
.kopf .eyebrow{color:var(--gruen)}
.kopf a{color:#DCE8EF}
.kopf-logo{width:104px;height:104px;border-radius:50%;display:block;margin-bottom:26px;
box-shadow:0 0 0 8px rgba(255,255,255,.07)}
section{padding:50px 0;border-bottom:1px solid var(--linie)}
section:last-of-type{border-bottom:none}
.fuss{background:var(--blau-tief);color:#A9C4D2;font-size:14px;line-height:1.7;padding:32px 0 42px}
.fuss strong{color:var(--weiss)}
.fuss a{color:#DCE8EF}
/* ---------- 05 Raster und Karten ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:22px}
.card h4{margin-bottom:.35em}
.card p{font-size:15px;color:var(--grau);margin:0;max-width:none}
.card.dunkel{background:var(--blau-tief);border-color:var(--blau-tief)}
.card.dunkel h3,.card.dunkel h4{color:var(--weiss)}
.card.dunkel p{color:#A9C4D2}
.card.hebt{transition:transform .12s ease, box-shadow .12s ease}
.card.hebt:hover{transform:translateY(-2px);box-shadow:var(--schatten)}
/* Gegenüberstellung so ja / so nicht */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.do,.dont{border-radius:var(--radius);padding:18px 20px;border:1px solid var(--linie);background:var(--weiss)}
.do{border-top:4px solid var(--gruen)}
.dont{border-top:4px solid var(--rot)}
.do h4{color:var(--gruen-tief)}
.dont h4{color:var(--rot-tief)}
.dd ul{margin:0;padding-left:18px;font-size:15px;color:var(--grau)}
/* ---------- 06 Tabellen ---------- */
table{
width:100%;border-collapse:collapse;background:var(--weiss);
border:1px solid var(--linie);border-radius:var(--radius);
overflow:hidden;font-size:15px;
}
th{
background:var(--blau-nebel);text-align:left;font-family:var(--display);
font-weight:600;color:var(--blau-tief);font-size:14px;padding:11px 14px;
}
td{padding:11px 14px;border-top:1px solid var(--linie);vertical-align:top}
td.mono{font-family:var(--mono);font-size:13px;white-space:nowrap}
tbody tr:hover td{background:var(--papier)}
/* ---------- 07 Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--display);font-weight:600;font-size:16px;
padding:13px 26px;border-radius:999px;border:2px solid transparent;
text-decoration:none;cursor:pointer;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
/* Grundregel Hover: Fläche eine Stufe dunkler, Schriftfarbe bleibt.
Jede Variante braucht eine eigene :hover-Regel, sonst greift
die allgemeine a:hover-Regel und färbt die Schrift blau ein. */
.btn-primary{background:var(--gruen-tief);color:var(--weiss);box-shadow:0 6px 16px rgba(86,122,34,.28)}
.btn-primary:hover{background:var(--gruen-dunkel);color:var(--weiss);box-shadow:0 10px 22px rgba(86,122,34,.34)}
.btn-secondary{background:var(--blau);color:var(--weiss)}
.btn-secondary:hover{background:var(--blau-tief);color:var(--weiss)}
.btn-ghost{background:transparent;color:var(--blau);border-color:var(--blau)}
.btn-ghost:hover{background:var(--blau-nebel);color:var(--blau-tief);border-color:var(--blau-tief)}
.btn-dark{background:var(--blau-tief);color:var(--weiss)}
.btn-dark:hover{background:#1D5878;color:var(--weiss)}
/* Auf dunklen Flächen darf das helle Logogrün leuchten, Schrift in Tinte */
.btn-hell{background:var(--gruen);color:var(--tinte);box-shadow:0 6px 18px rgba(124,176,52,.30)}
.btn-hell:hover{background:#8CC13C;color:var(--tinte)}
.btn-linie{background:transparent;color:var(--weiss);border-color:rgba(255,255,255,.55)}
.btn-linie:hover{background:rgba(255,255,255,.10);color:var(--weiss);border-color:var(--gruen)}
/* ---------- 08 Badges ---------- */
.badge{
display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;
letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
}
.b-gruen{background:var(--gruen-hauch);color:var(--gruen-tief)}
.b-blau{background:var(--blau-nebel);color:var(--blau)}
.b-signal{background:var(--bernstein);color:var(--tinte)}
.b-rot{background:var(--rot-hauch);color:var(--rot-tief)}
.b-grau{background:#EEF1F3;color:var(--grau)}
/* ---------- 09 Hinweiskästen ---------- */
.note{
background:var(--gruen-hauch);border-left:5px solid var(--gruen);
border-radius:0 var(--radius-s) var(--radius-s) 0;padding:16px 20px;margin:20px 0;
}
.note p{margin:0;font-size:15.5px;max-width:none}
.note strong{color:var(--gruen-tief)}
.warn{background:var(--bernstein-h);border-left-color:var(--bernstein)}
.warn strong{color:var(--bernstein-t)}
.err{background:var(--rot-hauch);border-left-color:var(--rot)}
.err strong{color:var(--rot-tief)}
/* ---------- 10 Zitate und Zahlenlisten ---------- */
blockquote{
margin:22px 0;padding-left:22px;border-left:5px solid var(--gruen);
font-family:var(--display);font-size:22px;font-weight:500;
color:var(--blau-tief);line-height:1.4;
}
/* Zitatkarte mit optionaler Einordnung darunter */
.zitat{
background:var(--weiss);border:1px solid var(--linie);border-left:5px solid var(--blau);
border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:14px 0;
font-family:var(--display);font-size:19px;font-weight:500;
color:var(--blau-tief);line-height:1.4;
}
.zitat span{
display:block;font-family:var(--text);font-size:14px;font-weight:400;
color:var(--grau);margin-top:7px;letter-spacing:0;
}
/* Nummerierte Schritte – nur verwenden, wenn die Reihenfolge wirklich zählt */
ol.schritte{counter-reset:s;list-style:none;padding:0;margin:18px 0;max-width:var(--zeile)}
ol.schritte li{counter-increment:s;position:relative;padding:0 0 0 52px;margin-bottom:18px}
ol.schritte li::before{
content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
font-family:var(--mono);font-size:13px;color:var(--gruen-tief);background:var(--gruen-hauch);
width:36px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;
}
ol.schritte b{font-family:var(--display);font-size:17px;color:var(--blau-tief);display:block;margin-bottom:2px}
/* ---------- 11 Steckbrief und Gegenüberstellung ---------- */
.steck{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
background:var(--linie);border:1px solid var(--linie);
border-radius:var(--radius);overflow:hidden;margin:22px 0;
}
.steck div{background:var(--weiss);padding:16px 18px}
.steck b{
display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--gruen-tief);margin-bottom:5px;
}
.steck span{font-family:var(--display);font-weight:600;font-size:16px;color:var(--blau-tief)}
/* Vorher/Nachher nebeneinander, mit Begründung darunter */
.paar{
display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--weiss);
border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;margin:16px 0;
}
.paar>div{padding:18px 20px}
.paar .nein{background:var(--rot-hauch);border-right:1px solid var(--linie)}
.paar .ja{background:var(--gruen-hauch)}
.paar b{
display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;margin-bottom:8px;
}
.paar .nein b{color:var(--rot-tief)}
.paar .ja b{color:var(--gruen-tief)}
.paar p{margin:0;font-size:15.5px;max-width:none}
.paar .warum{
grid-column:1/-1;background:var(--weiss);border-top:1px solid var(--linie);
font-size:14px;color:var(--grau);
}
/* ---------- 12 Prüflisten ---------- */
ul.check{list-style:none;padding:0;margin:16px 0}
ul.check li{position:relative;padding-left:32px;margin-bottom:11px;font-size:15.5px}
ul.check li::before{
content:"";position:absolute;left:0;top:6px;width:17px;height:17px;
border:2px solid var(--gruen);border-radius:4px;
}
ul.check li.erledigt::before{background:var(--gruen)}
/* ---------- 13 Icons ---------- */
/* Phosphor Icons, Schnitt Regular. Grössen über font-size steuern,
Farbe über color – die SVG-Dateien nutzen fill="currentColor". */
.ic{width:1em;height:1em;display:block;flex:none}
.ictile{
width:58px;height:58px;border-radius:50%;background:var(--blau-nebel);color:var(--blau);
display:flex;align-items:center;justify-content:center;flex:none;
}
.ictile .ic{font-size:28px}
.ictile.gruen{background:var(--gruen-hauch);color:var(--gruen-tief)}
.ictile.dunkel{background:var(--blau-tief);color:var(--gruen)}
.ictile.rot{background:var(--rot-hauch);color:var(--rot-tief)}
.feat{display:flex;gap:15px;align-items:flex-start}
.feat h4{margin:2px 0 3px}
/* ---------- 14 Formulare ---------- */
label{
display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--gruen-tief);margin-bottom:8px;
}
input[type=text],input[type=email],input[type=search],input[type=tel],textarea,select{
width:100%;padding:13px 15px;border:1.5px solid var(--linie);border-radius:var(--radius-s);
font-family:var(--text);font-size:16px;color:var(--anthrazit);background:var(--papier);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blau);background:var(--weiss)}
.feldhinweis{font-size:13px;color:var(--grau);margin-top:8px}
/* ---------- 15 Inhaltsverzeichnis ---------- */
.toc{
background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
padding:20px 24px;margin:-34px 0 0;box-shadow:var(--schatten);position:relative;z-index:2;
}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:15px;max-width:none}
.toc li{margin-bottom:5px;break-inside:avoid}
.toc a{text-decoration:none;color:var(--blau)}
.toc a:hover{text-decoration:underline}
/* ---------- 16 Hilfsklassen ---------- */
.mt0{margin-top:0} .mt8{margin-top:8px} .mt16{margin-top:16px}
.mt24{margin-top:24px} .mt32{margin-top:32px} .mt48{margin-top:48px}
.mb0{margin-bottom:0} .mb16{margin-bottom:16px} .mb32{margin-bottom:32px}
.breit{max-width:none}
.zentriert{text-align:center}
.reihe{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.nur-druck{display:none}
/* ---------- 17 Umbrüche, Bewegung, Druck ---------- */
@media (max-width:860px){
.g3,.g4,.steck{grid-template-columns:repeat(2,1fr)}
.g2,.dd,.paar{grid-template-columns:1fr}
.paar .nein{border-right:none;border-bottom:1px solid var(--linie)}
.toc ol{columns:1}
section{padding:40px 0}
}
@media (max-width:520px){
body{font-size:16px}
.g2,.g3,.g4,.steck{grid-template-columns:1fr}
.wrap,.wrap-schmal{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
html{scroll-behavior:auto}
}
@media print{
body{background:var(--weiss);font-size:11pt}
.kopf,.fuss{background:var(--blau-tief)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.toc,.btn{display:none}
.nur-druck{display:block}
section{page-break-inside:avoid;border-bottom:1px solid var(--linie)}
a{text-decoration:none;color:var(--anthrazit)}
}