/* ============================================================
beitrag.css · Hermas Marketing
Layout für Blogbeiträge und Kategorieübersichten.
Setzt die master.css voraus und wird NACH ihr eingebunden:
Hier steht nur, was die master.css nicht abdeckt: Kopfzeile,
Brotkrumen, Zweispalter, Fliesstext im Beitrag, Seitenspalte,
Signatur, Fusszeile. Farben, Schrift, .wrap, .eyebrow, .btn,
.card und .badge kommen aus der master.css 1.4.
Inhalt
01 Seitengerüst
02 Kopfzeile
03 Brotkrumen
04 Seitenkopf
05 Zweispalter
06 Fliesstext im Beitrag, Infokarten, Video
07 Seitenspalte
08 Signatur und weiterführende Links
09 Kategorieübersicht
10 Fusszeile
11 Umbrüche und Druck
============================================================ */
/* ---------- 01 Seitengerüst ---------- */
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
/* ---------- 02 Kopfzeile (identisch zu Startseite und Kontakt) ---------- */
.hm-kopf{
position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);
}
.hm-kopf-innen{
max-width:var(--breite);margin:0 auto;padding:12px 24px;
display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hm-kopf img{width:200px;display:block}
.hm-kopf .btn{font-size:15px;padding:10px 20px}
/* ---------- 03 Brotkrumen ---------- */
.hm-krumen{border-bottom:1px solid var(--linie);background:var(--weiss)}
.hm-krumen ol{
max-width:var(--breite);margin:0 auto;padding:12px 24px;
list-style:none;display:flex;flex-wrap:wrap;gap:8px;
font-family:var(--mono);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--grau);
}
.hm-krumen li{margin:0;display:flex;gap:8px;align-items:center}
.hm-krumen li+li::before{content:"/";color:var(--linie)}
.hm-krumen a{color:var(--blau);text-decoration:none}
.hm-krumen a:hover{text-decoration:underline}
.hm-krumen [aria-current]{color:var(--anthrazit)}
/* ---------- 04 Seitenkopf ---------- */
.hm-seitenkopf{
background:linear-gradient(180deg,var(--weiss) 0%,var(--papier) 100%);
padding:56px 0 44px;border-bottom:1px solid var(--linie);
}
.hm-seitenkopf h1{font-size:clamp(30px,4.4vw,44px);max-width:28ch;margin-bottom:18px}
.hm-seitenkopf .lead{color:var(--anthrazit);font-size:19px;max-width:58ch;margin-bottom:0}
/* ---------- 05 Zweispalter ---------- */
.hm-beitrag{padding:52px 0 78px}
.hm-beitrag-raster{
max-width:var(--breite);margin:0 auto;padding:0 24px;
display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start;
}
/* ---------- 06 Fliesstext im Beitrag ---------- */
.hm-inhalt{min-width:0}
.hm-inhalt h2{
font-size:27px;margin:44px 0 .5em;padding-top:0;
scroll-margin-top:96px;
}
.hm-inhalt h2:first-child{margin-top:0}
.hm-inhalt h3{font-size:21px;margin:32px 0 .5em;color:var(--blau)}
.hm-inhalt h4{font-size:17.5px;margin:26px 0 .5em;color:var(--anthrazit)}
.hm-inhalt p{font-size:16.5px;color:var(--anthrazit);max-width:66ch}
.hm-inhalt ul,.hm-inhalt ol{margin:0 0 1.05em;padding-left:22px;max-width:66ch}
.hm-inhalt li{font-size:16.5px;color:var(--anthrazit);margin-bottom:8px}
.hm-inhalt ul li::marker{color:var(--gruen)}
.hm-inhalt ol li::marker{color:var(--gruen-tief);font-family:var(--mono);font-size:.9em}
.hm-inhalt a{color:var(--gruen-tief);overflow-wrap:anywhere}
.hm-inhalt a:hover{color:var(--blau)}
.hm-inhalt img{
max-width:100%;height:auto;display:block;
border-radius:var(--radius);margin:26px 0;
}
.hm-inhalt figure{margin:26px 0}
.hm-inhalt figure img{margin:0}
.hm-inhalt figcaption{
font-size:14px;color:var(--grau);margin-top:10px;
padding-left:14px;border-left:3px solid var(--linie);
}
/* Infokarte im Fliesstext, aus den alten Bootstrap-Karten uebersetzt */
.hm-inhalt .card{margin:28px 0;padding:22px 24px}
.hm-inhalt .card h3{margin:0 0 .5em;font-size:19px;color:var(--blau-tief)}
.hm-inhalt .card p{font-size:16px;color:var(--anthrazit);margin-bottom:.9em}
.hm-inhalt .card p:last-child{margin-bottom:0}
.hm-inhalt .card img{margin:0 0 14px}
/* Video-Einbettungen: 16:9 und mitwachsend, unabhaengig von width/height im Tag */
.hm-inhalt iframe{
display:block;width:100%;aspect-ratio:16/9;height:auto;
border:none;border-radius:var(--radius);margin:26px 0;
}
/* ---------- 07 Seitenspalte ---------- */
.hm-seite{
position:sticky;top:96px;display:flex;flex-direction:column;gap:20px;
min-width:0; /* ohne das sprengt ein breites Bild die 300px-Spalte auf */
}
.hm-seite img,.hm-seite svg{max-width:100%}
.hm-daten{padding:20px 22px}
.hm-daten ul{list-style:none;padding:0;margin:0;max-width:none}
.hm-daten li{
font-size:14.5px;color:var(--grau);margin:0;padding:9px 0;
border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;gap:12px;
}
.hm-daten li:first-child{padding-top:0}
.hm-daten li:last-child{border-bottom:none;padding-bottom:0}
.hm-daten strong{
font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--blau-tief);font-weight:500;flex:none;
}
.hm-siegel{width:100%;max-width:100%;height:auto;display:block;border-radius:var(--radius-s)}
.hm-infokarte{padding:20px 22px}
.hm-infokarte h2{
font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--grau);margin:0 0 14px;
}
.hm-infokarte img{
width:100%;height:auto;max-height:260px;object-fit:cover;object-position:top;
display:block;border-radius:var(--radius-s);margin-bottom:14px;
}
.hm-infokarte svg{width:22px;height:22px;color:var(--blau)}
.hm-infokarte p{font-size:14.5px;color:var(--grau);max-width:none;margin-bottom:.9em}
.hm-infokarte p:last-child{margin-bottom:0}
.hm-infokarte a{color:var(--blau)}
.hm-extra{padding:20px 22px}
.hm-extra p{font-size:15px;color:var(--grau);max-width:none;margin-bottom:.8em}
.hm-extra p:last-child{margin-bottom:0}
.hm-extra img{width:100%;height:auto;display:block;border-radius:var(--radius-s);margin:0 0 12px}
.hm-extra a{color:var(--blau)}
.hm-extra svg{display:none}
.hm-schlagworte{padding:20px 22px}
.hm-schlagworte h2{
font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--grau);margin:0 0 14px;
}
.hm-schlagworte div{display:flex;flex-wrap:wrap;gap:8px}
.hm-werbung{display:block;border-radius:var(--radius);overflow:hidden;line-height:0}
.hm-werbung img{width:100%;max-width:100%;height:auto;display:block}
.hm-werbung-hinweis{
font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:var(--grau);margin:8px 0 0;
}
/* ---------- 08 Signatur und weiterführende Links ---------- */
.hm-signatur{
display:flex;align-items:center;gap:22px;margin-top:56px;padding-top:30px;
border-top:1px solid var(--linie);
}
.hm-signatur img{
width:110px;height:110px;border-radius:50%;background:var(--blau-nebel);
object-fit:cover;object-position:top;flex:none;margin:0;
}
.hm-signatur p{margin:0;font-size:16.5px;color:var(--grau)}
.hm-signatur strong{font-family:var(--display);font-size:19px;color:var(--blau-tief)}
.hm-signatur em{font-size:14px;font-style:italic}
.hm-weiter{margin-top:34px;padding:20px 24px;background:var(--blau-nebel);border-radius:var(--radius)}
.hm-weiter p{
font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--grau);margin:0 0 12px;max-width:none;
}
.hm-weiter ul{list-style:none;padding:0;margin:0;max-width:none}
.hm-weiter li{margin-bottom:8px;font-size:16px}
.hm-weiter li:last-child{margin-bottom:0}
.hm-weiter a{color:var(--blau);font-weight:500}
.hm-weiter a:hover{color:var(--gruen-tief)}
/* ---------- 09 Kategorieübersicht ---------- */
.hm-sprung{background:var(--blau-nebel);border-bottom:1px solid var(--linie);padding:20px 0}
.hm-sprung-innen{max-width:var(--breite);margin:0 auto;padding:0 24px}
.hm-sprung p{
font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--grau);margin:0 0 12px;
}
.hm-sprung nav{display:flex;flex-wrap:wrap;gap:10px}
.hm-sprung a{
display:inline-block;background:var(--weiss);border:1px solid var(--linie);
border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:500;
color:var(--blau);text-decoration:none;transition:background .12s ease,border-color .12s ease;
}
.hm-sprung a:hover{background:var(--gruen-hauch);border-color:var(--gruen);color:var(--gruen-tief)}
.hm-kategorie{padding:0;border-bottom:none;scroll-margin-top:96px}
.hm-kategorie+.hm-kategorie{margin-top:64px}
.hm-kategorie h2{font-size:28px;margin-bottom:26px}
.hm-vorschau{padding:24px 26px;margin-bottom:14px}
.hm-vorschau h3{font-size:20px;line-height:1.3;margin-bottom:.45em}
.hm-vorschau h3 a{color:var(--blau-tief);text-decoration:none}
.hm-vorschau h3 a:hover{color:var(--gruen-tief);text-decoration:underline}
.hm-vorschau p{font-size:15.5px;color:var(--grau);max-width:62ch}
.hm-alle{margin:20px 0 0}
.hm-alle a{
font-family:var(--mono);font-size:13px;letter-spacing:.06em;
color:var(--gruen-tief);text-decoration:none;
}
.hm-alle a::after{content:" \2192"}
.hm-alle a:hover{color:var(--blau);text-decoration:underline}
/* ---------- 10 Fusszeile ---------- */
.hm-fuss{background:var(--tinte);padding:30px 0 26px}
.hm-fuss-innen{
max-width:var(--breite);margin:0 auto;padding:0 24px;
display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;justify-content:space-between;
}
.hm-fuss img{width:180px}
.hm-fuss nav{display:flex;flex-wrap:wrap;gap:22px}
.hm-fuss a{color:#B9CEDA;font-size:14px;text-decoration:none}
.hm-fuss a:hover{color:var(--gruen)}
.hm-fuss small{display:block;width:100%;color:#8FA9B8;font-size:13px;
border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:4px}
/* ---------- 11 Umbrüche und Druck ---------- */
@media (max-width:860px){
.hm-seitenkopf{padding:40px 0 32px}
.hm-beitrag{padding:34px 0 56px}
.hm-beitrag-raster{grid-template-columns:1fr;gap:44px}
.hm-seite{position:static}
.hm-werbung{max-width:300px}
.hm-inhalt h2{font-size:24px;margin-top:36px}
.hm-kategorie+.hm-kategorie{margin-top:48px}
.hm-kopf img{width:168px}
}
@media (max-width:520px){
.hm-kopf .btn{display:none}
.hm-vorschau{padding:20px}
.hm-vorschau h3{font-size:18.5px}
.hm-signatur{flex-direction:column;align-items:flex-start;gap:16px}
.hm-daten li{flex-direction:column;gap:2px}
}
@media print{
.hm-kopf,.hm-sprung,.hm-seite,.hm-werbung,.hm-fuss nav{display:none}
.hm-beitrag-raster{grid-template-columns:1fr;padding:0}
.hm-inhalt a{color:var(--anthrazit);text-decoration:none}
}