/*
* Podologia Miller – Komponenten (v2) für Divi-5-Module.
* Klassen werden in Divi 5 über Modul > Erweitert > CSS-ID & Klassen gesetzt (module.decoration.attributes, ADR-017).
* Übersicht und Einsatzregeln: docs/DESIGN_SYSTEM.md
*/
/* ======================================================================
Sektionen
====================================================================== */
.et_pb_section.pm-section {
padding: var(--pm-space-section) 0;
background: var(--pm-color-bg);
scroll-margin-top: 96px; /* Ankerziele nicht unter dem fixierten Header */
}
.et_pb_section.pm-section--surface { background: var(--pm-color-surface); }
.et_pb_section.pm-section--stone { background: var(--pm-color-surface-alt); }
.et_pb_section.pm-section--dark {
background: var(--pm-color-brand);
color: var(--pm-color-text-inverse-muted);
}
.et_pb_section.pm-section--tight { padding: var(--pm-space-16) 0; }
.pm-section--dark :is(h1, h2, h3, h4) { color: var(--pm-color-text-inverse); }
.pm-section--dark a:not(.et_pb_button) { color: var(--pm-accent-strong); }
/* Divi-Textmodule setzen Listenpunkte und Einzug; eigene Listenkomponenten ohne Marker */
.et_pb_text :is(ul.pm-quality, ol.pm-steps) {
list-style: none;
padding: 0;
}
/* Gleich hohe Spalten für Kartenreihen (Row-Klasse pm-grid) */
@media (min-width: 981px) {
.et_pb_row.pm-grid { display: flex; }
.et_pb_row.pm-grid > .et_pb_column { display: flex; flex-direction: column; }
.et_pb_row.pm-grid > .et_pb_column > .et_pb_module { flex: 1 1 auto; margin-bottom: 0; }
.et_pb_row.pm-align-center { display: flex; align-items: center; }
}
/* ======================================================================
Typografie-Bausteine
====================================================================== */
.pm-eyebrow {
display: flex;
align-items: center;
gap: var(--pm-space-3);
margin-bottom: var(--pm-space-5);
font-family: var(--pm-font-text);
font-size: var(--pm-text-xs);
font-weight: 700;
letter-spacing: var(--pm-tracking-caps);
text-transform: uppercase;
color: var(--pm-accent-text);
}
.pm-eyebrow::before {
content: "";
width: 2.25rem;
height: 1px;
background: var(--pm-accent);
}
.pm-section--dark .pm-eyebrow { color: var(--pm-accent); }
.pm-center .pm-eyebrow { justify-content: center; }
.pm-heading h1 {
font-size: var(--pm-text-h1);
margin-bottom: var(--pm-space-6);
}
.pm-heading h2 {
font-size: var(--pm-text-h2);
margin-bottom: var(--pm-space-5);
}
.pm-heading h1 em,
.pm-heading h2 em {
font-style: italic;
color: var(--pm-color-brand-strong);
}
.pm-section--dark .pm-heading :is(h1, h2) em { color: var(--pm-accent-soft); }
.pm-lead,
body #page-container .et_pb_text .pm-lead {
max-width: 52ch;
font-size: var(--pm-text-lg);
line-height: 1.65;
color: var(--pm-color-text-muted);
}
.pm-section--dark .pm-lead,
body #page-container .pm-section--dark .et_pb_text .pm-lead { color: var(--pm-color-text-inverse-muted); }
.pm-center { text-align: center; }
.pm-center .pm-lead { margin-left: auto; margin-right: auto; }
.pm-statement :is(p, h2),
body #page-container .et_pb_text.pm-statement :is(p, h2) {
max-width: 30ch;
margin: 0 auto;
font-family: var(--pm-font-display);
font-size: var(--pm-text-statement);
line-height: 1.3;
color: var(--pm-color-heading);
text-align: center;
}
.pm-rule {
display: block;
width: 3rem;
height: 1px;
margin: var(--pm-space-8) auto 0;
background: var(--pm-accent);
}
/* ======================================================================
Buttons (Divi-Button-Modul: Klasse sitzt am )
Höhere Spezifität nötig, da Divi .et_pb_button mit eigenen Farben/Größen setzt.
====================================================================== */
body #page-container .et_pb_button.pm-btn {
display: inline-flex;
align-items: center;
gap: var(--pm-space-2);
min-height: var(--pm-touch-min);
padding: 0.85rem 1.55rem;
border: 1px solid var(--pm-color-brand);
border-radius: var(--pm-radius-pill);
background: var(--pm-color-brand);
color: var(--pm-color-text-inverse);
font-family: var(--pm-font-text);
font-size: var(--pm-text-sm);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3;
transition: background-color var(--pm-transition), color var(--pm-transition), border-color var(--pm-transition);
}
body #page-container .et_pb_button.pm-btn::after { display: none; }
body #page-container .et_pb_button.pm-btn:hover {
padding: 0.85rem 1.55rem;
background: var(--pm-color-brand-strong);
border-color: var(--pm-color-brand-strong);
}
/* Akzent-Button (Gold/Silber) – nur auf dunklem Grund */
body #page-container .et_pb_button.pm-btn--accent {
background: var(--pm-accent);
border-color: var(--pm-accent);
color: var(--pm-color-brand-deep);
}
body #page-container .et_pb_button.pm-btn--accent:hover {
background: var(--pm-accent-strong);
border-color: var(--pm-accent-strong);
}
/* Kontur-Button */
body #page-container .et_pb_button.pm-btn--ghost {
background: transparent;
color: var(--pm-color-brand);
border-color: var(--pm-color-border-strong);
}
body #page-container .et_pb_button.pm-btn--ghost:hover {
background: var(--pm-color-surface-tint);
border-color: var(--pm-color-brand);
}
body #page-container .pm-section--dark .et_pb_button.pm-btn--ghost {
color: var(--pm-color-text-inverse);
border-color: rgba(250, 246, 239, 0.45);
}
body #page-container .pm-section--dark .et_pb_button.pm-btn--ghost:hover {
background: rgba(250, 246, 239, 0.08);
border-color: var(--pm-color-text-inverse);
}
.pm-btn-row .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 var(--pm-space-3) var(--pm-space-3) 0;
}
.pm-center.pm-btn-row,
.pm-btn-row.pm-center .et_pb_button_module_wrapper { text-align: center; }
/* Textlink mit Pfeil (im Textmodul: ) */
.pm-arrow-link {
display: inline-flex;
align-items: center;
gap: var(--pm-space-2);
min-height: var(--pm-touch-min);
font-weight: 700;
font-size: var(--pm-text-sm);
text-decoration: none;
color: var(--pm-color-brand);
}
.pm-arrow-link::after {
content: "";
width: 1.1em;
height: 1.1em;
background: currentColor;
-webkit-mask: var(--pm-i-arrow) center / contain no-repeat;
mask: var(--pm-i-arrow) center / contain no-repeat;
transition: transform var(--pm-transition);
}
.pm-arrow-link:hover::after { transform: translateX(3px); }
/* ======================================================================
Icons (CSS-Masken, Linienstil 1.5px, Farbe = currentColor)
====================================================================== */
:root {
--pm-i-precision: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 1.5v4M12 18.5v4M1.5 12h4M18.5 12h4'/%3E%3C/svg%3E");
--pm-i-hygiene: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 4.5 5.5v6c0 4.6 3.1 8.4 7.5 10 4.4-1.6 7.5-5.4 7.5-10v-6z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
--pm-i-care: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E");
--pm-i-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c1-4 4-6 7.5-6s6.5 2 7.5 6'/%3E%3C/svg%3E");
--pm-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
--pm-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
--pm-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a11 11 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2 2A17 17 0 0 1 4.5 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
--pm-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
--pm-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
--pm-i-consult: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10H9.5L4 19.5z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5' stroke-linecap='round'/%3E%3C/svg%3E");
--pm-i-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3c.8 4.6 2.4 6.2 7 7-4.6.8-6.2 2.4-7 7-.8-4.6-2.4-6.2-7-7 4.6-.8 6.2-2.4 7-7z'/%3E%3Cpath d='M18.5 16.5c.3 1.6.9 2.2 2.5 2.5-1.6.3-2.2.9-2.5 2.5-.3-1.6-.9-2.2-2.5-2.5 1.6-.3 2.2-.9 2.5-2.5z'/%3E%3C/svg%3E");
--pm-i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5z'/%3E%3Cpath d='m3 12.5 9 5 9-5M3 16.5l9 5 9-5'/%3E%3C/svg%3E");
--pm-i-foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M11 22c-2.7 0-3.9-2.4-3.7-5.2.2-3 1.6-5.4 4-5.4s3.5 2.5 3.1 5.5c-.4 2.9-1 5.1-3.4 5.1z'/%3E%3Ccircle cx='8.6' cy='7' r='1.7'/%3E%3Ccircle cx='12.2' cy='5.6' r='1.3'/%3E%3Ccircle cx='15' cy='6.6' r='1.1'/%3E%3Ccircle cx='16.9' cy='8.6' r='.9'/%3E%3Ccircle cx='17.9' cy='11' r='.8'/%3E%3C/svg%3E");
--pm-i-nail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M7 21.5V9.5a5 5 0 0 1 10 0v12'/%3E%3Cpath d='M9.5 10a2.5 2.5 0 0 1 5 0v3.5h-5z'/%3E%3C/svg%3E");
--pm-i-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4M6 10l6-6 6 6'/%3E%3C/svg%3E");
--pm-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
}
.pm-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border: 1px solid var(--pm-color-border-strong);
border-radius: 50%;
color: var(--pm-accent-text);
background: var(--pm-color-bg);
}
.pm-icon::before {
content: "";
width: 1.45rem;
height: 1.45rem;
background: currentColor;
-webkit-mask: var(--pm-icon) center / contain no-repeat;
mask: var(--pm-icon) center / contain no-repeat;
}
.pm-section--dark .pm-icon {
border-color: rgba(196, 162, 98, 0.45);
background: transparent;
color: var(--pm-accent);
}
.pm-accent-silver .pm-section--dark .pm-icon { border-color: rgba(201, 205, 211, 0.45); }
.pm-icon--precision { --pm-icon: var(--pm-i-precision); }
.pm-icon--hygiene { --pm-icon: var(--pm-i-hygiene); }
.pm-icon--care { --pm-icon: var(--pm-i-care); }
.pm-icon--person { --pm-icon: var(--pm-i-person); }
.pm-icon--pin { --pm-icon: var(--pm-i-pin); }
.pm-icon--calendar { --pm-icon: var(--pm-i-calendar); }
.pm-icon--phone { --pm-icon: var(--pm-i-phone); }
.pm-icon--clock { --pm-icon: var(--pm-i-clock); }
.pm-icon--mail { --pm-icon: var(--pm-i-mail); }
.pm-icon--consult { --pm-icon: var(--pm-i-consult); }
.pm-icon--sparkle { --pm-icon: var(--pm-i-sparkle); }
.pm-icon--layers { --pm-icon: var(--pm-i-layers); }
.pm-icon--foot { --pm-icon: var(--pm-i-foot); }
.pm-icon--nail { --pm-icon: var(--pm-i-nail); }
/* ======================================================================
Hero (Startseite)
Bildbereich = Divi-Bildmodul (.pm-media--hero) mit Platzhaltergrafik, bis ein freigegebenes Foto vorliegt.
Rahmen, Bogenform und Ornamente kommen aus CSS und bleiben beim Bildtausch erhalten.
====================================================================== */
.et_pb_section.pm-hero {
position: relative;
overflow: hidden;
padding: clamp(2.5rem, 1rem + 5vw, 6.5rem) 0 clamp(3rem, 1.5rem + 5vw, 7rem);
background:
radial-gradient(60rem 30rem at 85% 10%, rgba(221, 208, 228, 0.55), transparent 70%),
var(--pm-color-surface);
}
.pm-hero .pm-heading h1 {
max-width: 15ch;
margin-bottom: var(--pm-space-6);
}
.pm-hero .pm-lead {
max-width: 40ch;
margin-bottom: var(--pm-space-8);
}
.et_pb_column.pm-hero-media {
position: relative;
}
.pm-hero-media > .et_pb_module {
max-width: 480px;
margin-left: auto;
}
/* Gemeinsame Bildrahmen (Hero, Porträts) */
.et_pb_image.pm-media {
position: relative;
margin-bottom: 0;
}
.pm-media .et_pb_image_wrap {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 5;
border-radius: var(--pm-radius-arch);
background: var(--pm-color-surface-alt);
}
.pm-media .et_pb_image_wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pm-media--hero .et_pb_image_wrap {
box-shadow: var(--pm-shadow-lift);
}
.pm-media--hero .et_pb_image_wrap::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(226, 203, 155, 0.55);
border-radius: var(--pm-radius-arch);
pointer-events: none;
}
.pm-accent-silver .pm-media--hero .et_pb_image_wrap::after { border-color: rgba(223, 226, 230, 0.6); }
.pm-media--hero::after {
content: "";
position: absolute;
right: -28px;
top: 22%;
width: 56px;
height: 56px;
border: 1px solid var(--pm-accent);
border-radius: 50%;
pointer-events: none;
}
/* Bildhinweis: nur sichtbar, solange die Platzhaltergrafik im Bildmodul steht */
.et_pb_module.pm-media-note-module {
position: absolute;
top: var(--pm-space-8);
right: 0;
left: auto;
width: 100%;
margin: 0;
text-align: center;
pointer-events: none;
}
.pm-hero-media > .pm-media-note-module {
width: min(100%, 480px);
}
.pm-media-note {
display: inline-block;
max-width: calc(100% - 4rem);
padding: var(--pm-space-1) var(--pm-space-3);
border: 1px dashed rgba(226, 203, 155, 0.7);
border-radius: var(--pm-radius-pill);
background: rgba(36, 19, 47, 0.92);
color: var(--pm-cream);
font-size: var(--pm-text-xs);
font-weight: 600;
line-height: 1.5;
}
body #page-container .et_pb_text.pm-media-note-module p.pm-media-note {
padding: var(--pm-space-1) var(--pm-space-3);
font-size: var(--pm-text-xs);
line-height: 1.5;
}
.et_pb_column:not(:has(img[src*="pm-placeholder"])) > .pm-media-note-module {
display: none;
}
/* Statuskarte über dem Bild */
.et_pb_module.pm-hero-card {
position: absolute;
left: 0;
bottom: var(--pm-space-10);
z-index: 1;
max-width: 320px;
margin: 0;
padding: var(--pm-space-4) var(--pm-space-6) var(--pm-space-4) var(--pm-space-5);
border-radius: var(--pm-radius-md);
background: var(--pm-color-bg);
box-shadow: var(--pm-shadow-lift);
color: var(--pm-color-text);
}
.pm-hero-card .et_pb_text_inner {
display: flex;
align-items: center;
gap: var(--pm-space-3);
}
body #page-container .et_pb_text.pm-hero-card p {
padding: 0;
font-size: var(--pm-text-sm);
line-height: 1.4;
color: var(--pm-color-text-muted);
}
.pm-hero-card .pm-icon {
width: 2.5rem;
height: 2.5rem;
flex: none;
}
.pm-hero-card strong {
display: block;
color: var(--pm-color-heading);
}
@media (max-width: 980px) {
.pm-hero .pm-heading h1 { margin-bottom: var(--pm-space-4); }
.pm-hero .pm-lead { margin-bottom: var(--pm-space-6); }
/* Divi erzwingt margin-right: 0 an der letzten Spalte; zentriert werden daher die Module in der Spalte */
.et_pb_column.pm-hero-media {
margin-top: var(--pm-space-10);
}
.pm-hero-media > .et_pb_module {
max-width: 440px;
margin-right: auto;
margin-left: auto;
}
.pm-hero-media > .pm-media-note-module {
left: 0;
right: 0;
width: min(100%, 440px);
margin: 0 auto;
}
.pm-media--hero::after { right: -12px; }
/*
* Korrekturrunde 2026-10-21: Die Karte war absolut am Spaltenende verankert; die Spalte enthält auch die
* Bildunterschrift, daher lag die Karte über der Unterschrift. Mobil im normalen Fluss: Sie greift nur um einen
* festen Betrag ins Bild, wächst bei längeren Übersetzungen nach unten und schiebt die Unterschrift mit.
*/
.et_pb_module.pm-hero-card {
position: relative;
left: auto;
bottom: auto;
width: fit-content;
max-width: min(calc(100% - 2rem), 408px);
margin: calc(-1 * var(--pm-space-10)) auto 0 max(var(--pm-space-4), calc(50% - 220px + var(--pm-space-4)));
}
.pm-hero-media > .pm-hero-caption {
margin-top: var(--pm-space-3);
}
}
@media (max-width: 480px) {
.et_pb_column.pm-hero-media { margin-top: var(--pm-space-8); }
.pm-media--hero .et_pb_image_wrap { aspect-ratio: 5 / 6; }
.pm-media--hero::after { display: none; }
.et_pb_module.pm-media-note-module { top: var(--pm-space-6); }
.et_pb_module.pm-hero-card {
margin-left: var(--pm-space-3);
max-width: calc(100% - 1.5rem);
padding: var(--pm-space-3) var(--pm-space-4);
}
}
/* ======================================================================
Säulen / Infoblöcke
====================================================================== */
.pm-pillar .pm-icon { margin-bottom: var(--pm-space-5); }
.pm-pillar h3 {
font-size: var(--pm-text-h3);
margin-bottom: var(--pm-space-3);
}
.pm-pillar p { color: var(--pm-color-text-muted); }
.pm-section--dark .pm-pillar p { color: var(--pm-color-text-inverse-muted); }
/* ======================================================================
Karten (Leistungen)
====================================================================== */
.pm-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: var(--pm-space-8) var(--pm-space-8) var(--pm-space-6);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-md);
background: var(--pm-color-bg);
transition: box-shadow var(--pm-transition), transform var(--pm-transition), border-color var(--pm-transition);
}
.pm-card::before {
content: "";
position: absolute;
left: var(--pm-space-8);
right: var(--pm-space-8);
top: -1px;
height: 2px;
background: var(--pm-accent);
transform: scaleX(0.25);
transform-origin: left;
transition: transform var(--pm-transition);
}
.pm-card:hover {
border-color: var(--pm-color-border-strong);
box-shadow: var(--pm-shadow-soft);
transform: translateY(-2px);
}
.pm-card:hover::before { transform: scaleX(1); }
.pm-card .pm-icon { margin-bottom: var(--pm-space-6); }
.pm-card h3 {
font-size: var(--pm-text-h3);
margin-bottom: var(--pm-space-3);
}
.pm-card p {
color: var(--pm-color-text-muted);
font-size: var(--pm-text-sm);
}
.pm-card .pm-arrow-link { margin-top: auto; }
/* Platzhalterkarte: gleiche Gestalt wie eine echte Leistung; der Status steht im Freigabe-Hinweis (.pm-pending) */
.pm-card--placeholder { background: var(--pm-color-bg); }
.pm-card--placeholder .pm-icon { opacity: 0.7; }
/* Mehrere Kartenreihen (z. B. sechs Leistungen): engerer Abstand als zwischen Kopf und Karten */
.pm-section .et_pb_row.pm-grid + .et_pb_row.pm-grid { margin-top: var(--pm-space-8); }
/* Kopfzeile einer Sektion mit Link rechts */
@media (min-width: 981px) {
.et_pb_row.pm-split-head { display: flex; align-items: flex-end; }
.pm-split-head .et_pb_column_1_3,
.pm-split-head .et_pb_column_1_3 .et_pb_text { text-align: right; }
}
/* ======================================================================
Team / Personen (Startseite, Praxisseite, Teamseite)
Spalte .pm-person-col: Porträt (Bildmodul .pm-media--portrait), Bildhinweis, Name und Rolle (.pm-person).
====================================================================== */
.et_pb_column.pm-person-col {
position: relative;
}
.pm-team-grid .et_pb_column.pm-person-col {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
grid-template-areas: "photo text";
align-items: center;
gap: var(--pm-space-6);
padding: var(--pm-space-5);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-md);
background: var(--pm-color-bg);
}
.pm-team-grid .pm-person-col > .pm-media,
.pm-team-grid .pm-person-col > .pm-media-note-module {
grid-area: photo;
}
.pm-team-grid .pm-person-col > .pm-person {
grid-area: text;
margin: 0;
}
.pm-team-grid .pm-person-col > .pm-media-note-module {
position: static;
align-self: start;
justify-self: center;
width: auto;
margin-top: var(--pm-space-4);
z-index: 1;
}
.pm-media--portrait .et_pb_image_wrap {
background: var(--pm-taupe);
}
.pm-media--portrait::after {
content: "";
position: absolute;
left: -12px;
bottom: -12px;
width: 40%;
height: 40%;
border-left: 1px solid var(--pm-accent);
border-bottom: 1px solid var(--pm-accent);
border-radius: 0 0 0 var(--pm-radius-md);
pointer-events: none;
}
.pm-team-grid .pm-media--portrait::after { content: none; }
.pm-media-note-module .pm-media-note {
max-width: 100%;
}
.pm-person h3 {
margin-bottom: var(--pm-space-3);
font-size: var(--pm-text-h3);
}
.pm-person-role {
margin-bottom: var(--pm-space-4);
font-weight: 700;
color: var(--pm-accent-text);
}
body #page-container .et_pb_text.pm-person p.pm-person-role {
padding: 0;
margin: 0;
font-size: var(--pm-text-sm);
line-height: 1.45;
}
body #page-container .et_pb_text.pm-person p.pm-person-bio {
margin-top: var(--pm-space-4);
padding: 0;
font-size: var(--pm-text-sm);
line-height: 1.65;
color: var(--pm-color-text-muted);
}
body #page-container .et_pb_text.pm-person p.pm-person-fact {
margin-top: var(--pm-space-4);
padding: var(--pm-space-3) 0 0;
border-top: var(--pm-border-hair);
font-size: var(--pm-text-xs);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--pm-color-text);
}
/* Teamkarten mit Kurzvorstellung: Porträt schmaler, Text oben ausgerichtet */
.pm-team-grid .et_pb_column.pm-person-col {
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
align-items: start;
padding: var(--pm-space-6);
}
@media (max-width: 600px) {
body #page-container .pm-team-grid .et_pb_text.pm-media-note-module p.pm-media-note {
padding: 2px var(--pm-space-2);
font-size: 0.6875rem;
white-space: nowrap;
}
}
/* Teamseite: Porträt neben dem Werdegang */
.pm-section .et_pb_column_1_3.pm-person-col > .pm-media {
max-width: 360px;
}
@media (max-width: 980px) {
.pm-team-grid .et_pb_column.pm-person-col { margin-bottom: var(--pm-space-6); }
.pm-section .et_pb_column_1_3.pm-person-col { margin: 0 auto var(--pm-space-8); max-width: 360px; }
}
/* Schmale Bildschirme: Porträt über dem Text, damit die Kurzvorstellung nicht in eine schmale Spalte gedrängt wird */
@media (max-width: 560px) {
.pm-team-grid .et_pb_column.pm-person-col {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "photo" "text";
gap: var(--pm-space-5);
padding: var(--pm-space-5);
}
.pm-team-grid .pm-person-col > .pm-media {
width: 100%;
max-width: 240px;
}
.pm-team-grid .pm-person-col > .pm-media-note-module { justify-self: start; }
}
/* ======================================================================
Bildabschnitt (Foto neben Text, pm_sec_feature) und Bildunterschrift
====================================================================== */
.et_pb_column.pm-feature-media { position: relative; }
.pm-feature-media > .et_pb_module { max-width: 460px; }
.pm-feature--reverse .pm-feature-media > .et_pb_module { margin-left: auto; }
.pm-media--feature .et_pb_image_wrap {
border-radius: var(--pm-radius-lg);
box-shadow: var(--pm-shadow-soft);
}
.pm-feature-media > .pm-media-note-module { width: min(100%, 460px); left: 0; }
.pm-feature--reverse .pm-feature-media > .pm-media-note-module { left: auto; right: 0; }
.pm-feature-text p { max-width: 54ch; }
body #page-container .et_pb_text.pm-media-caption-module p.pm-media-caption {
margin-top: var(--pm-space-3);
padding: 0;
font-size: var(--pm-text-xs);
line-height: 1.5;
color: var(--pm-color-text-muted);
}
/* Bildunterschrift („Archivfoto“) gehört zum echten Foto, nicht zum Platzhalter */
.et_pb_column:has(img[src*="pm-placeholder"]) > .pm-media-caption-module { display: none; }
@media (max-width: 980px) {
/* Mobil steht das Foto immer vor dem Text */
.et_pb_row.pm-feature { display: flex; flex-direction: column; }
.et_pb_row.pm-feature > .pm-feature-media { order: -1; margin-bottom: var(--pm-space-8); }
.pm-feature-media > .et_pb_module,
.pm-feature--reverse .pm-feature-media > .et_pb_module { margin-right: auto; margin-left: auto; }
.pm-feature-media > .pm-media-note-module,
.pm-feature--reverse .pm-feature-media > .pm-media-note-module { left: 0; right: 0; }
}
/* Hinweiszeile (z. B. „nur mit Termin“) und Statusbox der Kontaktseite */
.pm-note {
display: flex;
align-items: center;
gap: var(--pm-space-4);
margin-top: var(--pm-space-6);
padding: var(--pm-space-4) var(--pm-space-5);
border-radius: var(--pm-radius-md);
background: var(--pm-color-surface-tint);
color: var(--pm-color-text);
font-size: var(--pm-text-sm);
line-height: 1.5;
}
.pm-note .pm-icon { flex: none; width: 2.5rem; height: 2.5rem; }
.pm-note > span:not(.pm-icon) { min-width: 0; overflow-wrap: break-word; }
body #page-container .et_pb_text p.pm-note { font-size: var(--pm-text-sm); line-height: 1.5; padding: var(--pm-space-4) var(--pm-space-5); }
.pm-notice {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--pm-space-6);
max-width: 880px;
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
border: 1px solid var(--pm-color-border-strong);
border-left: 3px solid var(--pm-accent);
border-radius: var(--pm-radius-md);
background: var(--pm-color-surface-tint);
}
.pm-notice h2 { font-size: var(--pm-text-h3); margin-bottom: var(--pm-space-3); }
.pm-notice h3 {
margin: var(--pm-space-6) 0 var(--pm-space-2);
font-family: var(--pm-font-text);
font-size: var(--pm-text-base);
font-weight: 700;
letter-spacing: 0;
}
.pm-notice p { color: var(--pm-color-text); }
@media (max-width: 480px) {
.pm-notice { grid-template-columns: minmax(0, 1fr); gap: var(--pm-space-4); }
}
/* ======================================================================
Qualitätsliste (auf dunklem Grund)
====================================================================== */
.pm-quality {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--pm-space-8) var(--pm-space-8);
margin: 0;
padding: 0;
list-style: none;
}
.pm-quality li {
padding: var(--pm-space-6) 0 0;
border-top: 1px solid var(--pm-color-border-inverse);
}
.pm-quality h3 {
margin: var(--pm-space-4) 0 var(--pm-space-2);
font-size: var(--pm-text-h3);
}
.pm-quality p {
font-size: var(--pm-text-sm);
color: var(--pm-color-text-inverse-muted);
}
@media (max-width: 640px) {
.pm-quality { grid-template-columns: 1fr; }
}
/* ======================================================================
Ablauf (Schritte)
====================================================================== */
.pm-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--pm-space-8);
margin: 0;
padding: 0;
list-style: none;
counter-reset: pm-step;
}
.pm-steps li {
position: relative;
padding: var(--pm-space-8) 0 0;
border-top: 1px solid var(--pm-color-border-strong);
counter-increment: pm-step;
}
.pm-steps li::before {
content: counter(pm-step, decimal-leading-zero);
position: absolute;
top: -0.85em;
left: 0;
padding-right: var(--pm-space-3);
background: var(--pm-color-surface);
font-family: var(--pm-font-display);
font-size: var(--pm-text-xl);
line-height: 1.4;
color: var(--pm-accent-text);
}
.pm-section:not(.pm-section--surface) .pm-steps li::before { background: var(--pm-color-bg); }
.pm-steps h3 {
font-size: var(--pm-text-h3);
margin-bottom: var(--pm-space-2);
}
.pm-steps p {
font-size: var(--pm-text-sm);
color: var(--pm-color-text-muted);
}
@media (max-width: 860px) {
.pm-steps { grid-template-columns: 1fr; gap: var(--pm-space-10); }
}
/* ======================================================================
Kontakt-/Terminkarte
====================================================================== */
.pm-contact-panel {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--pm-space-12);
padding: clamp(2rem, 1rem + 4vw, 4.5rem);
border-radius: var(--pm-radius-lg);
background:
radial-gradient(30rem 20rem at 100% 0%, rgba(212, 180, 119, 0.16), transparent 70%),
var(--pm-color-brand);
color: var(--pm-color-text-inverse-muted);
box-shadow: var(--pm-shadow-lift);
}
.pm-contact-panel h2 {
font-size: var(--pm-text-h2);
color: var(--pm-color-text-inverse);
margin-bottom: var(--pm-space-4);
}
.pm-contact-panel .pm-eyebrow { color: var(--pm-accent); }
.pm-contact-panel .pm-cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--pm-space-3);
margin-top: var(--pm-space-8);
}
.pm-contact-panel .pm-cta-row a {
display: inline-flex;
align-items: center;
min-height: var(--pm-touch-min);
max-width: 100%; /* bei großer Textgröße umbrechen statt überstehen */
padding: 0.85rem 1.55rem;
border-radius: var(--pm-radius-pill);
font-size: var(--pm-text-sm);
font-weight: 700;
line-height: 1.3;
text-decoration: none;
}
.pm-contact-panel .pm-cta-row .pm-cta-primary {
background: var(--pm-accent);
color: var(--pm-color-brand-deep);
}
.pm-contact-panel .pm-cta-row .pm-cta-primary:hover { background: var(--pm-accent-strong); }
.pm-contact-panel .pm-cta-row .pm-cta-secondary {
border: 1px solid rgba(250, 246, 239, 0.45);
color: var(--pm-color-text-inverse);
}
.pm-facts {
margin: 0;
display: grid;
gap: var(--pm-space-5);
}
.pm-facts div {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "icon label" "icon value";
column-gap: var(--pm-space-4);
row-gap: var(--pm-space-1);
align-items: start;
padding-bottom: var(--pm-space-5);
border-bottom: 1px solid var(--pm-color-border-inverse);
}
.pm-facts .pm-icon { grid-area: icon; width: 2.75rem; height: 2.75rem; }
.pm-facts dt { grid-area: label; align-self: end; }
.pm-facts dd { grid-area: value; }
.pm-facts dt {
font-size: var(--pm-text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pm-accent);
}
.pm-facts dd {
margin: 0;
color: var(--pm-color-text-inverse);
}
.pm-contact-panel .pm-pending { color: var(--pm-color-text-inverse-muted); }
.pm-contact-panel .pm-icon {
background: transparent;
border-color: rgba(196, 162, 98, 0.45);
color: var(--pm-accent);
}
.pm-accent-silver .pm-contact-panel .pm-icon { border-color: rgba(201, 205, 211, 0.45); }
@media (max-width: 980px) {
/* minmax(0, …): bei 200 % Textgröße darf die Spalte schmaler als ihr längstes Wort werden (kein Überlauf) */
.pm-contact-panel { grid-template-columns: minmax(0, 1fr); gap: var(--pm-space-10); }
}
.pm-facts div { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 600px) {
.pm-contact-panel { padding: var(--pm-space-8) var(--pm-space-5); }
.pm-contact-panel .pm-cta-row a {
padding: 0.85rem var(--pm-space-5);
overflow-wrap: anywhere; /* nur bei starker Textvergrößerung relevant */
}
}
/* Helle Variante der Fakten (Kontaktseite) */
.pm-facts--light div { border-bottom-color: var(--pm-color-border); }
.pm-facts--light dt { color: var(--pm-accent-text); }
.pm-facts--light dd { color: var(--pm-color-text); }
.pm-facts--light .pm-pending { color: var(--pm-color-text-muted); }
/* ======================================================================
Bildplätze und Freigabe-Markierungen
====================================================================== */
.pm-media-placeholder {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
aspect-ratio: 3 / 2;
padding: var(--pm-space-8);
border-radius: var(--pm-radius-md);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 55%),
var(--pm-taupe);
color: var(--pm-color-text-muted);
font-size: var(--pm-text-xs);
text-align: center;
}
.pm-media-placeholder--tall { aspect-ratio: 4 / 5; }
.pm-media-placeholder--map {
aspect-ratio: 16 / 10;
background:
repeating-linear-gradient(0deg, transparent 0 38px, rgba(36, 19, 47, 0.06) 38px 39px),
repeating-linear-gradient(90deg, transparent 0 38px, rgba(36, 19, 47, 0.06) 38px 39px),
var(--pm-color-surface-alt);
}
.pm-media-label {
display: inline-block;
padding: var(--pm-space-1) var(--pm-space-3);
border-radius: var(--pm-radius-pill);
background: rgba(255, 255, 255, 0.75);
color: var(--pm-ink);
font-weight: 600;
}
/* Interner Freigabepunkt: dezent, aber eindeutig */
.pm-pending {
display: inline-flex;
align-items: center;
max-width: 100%; /* langer Freigabetext umbricht statt überzustehen, notfalls im Wort (200 % Text) */
overflow-wrap: anywhere;
gap: var(--pm-space-2);
padding: 2px var(--pm-space-2);
border: 1px dashed currentColor;
border-radius: var(--pm-radius-sm);
font-family: var(--pm-font-text);
font-size: var(--pm-text-xs);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.01em;
color: var(--pm-accent-text);
opacity: 0.95;
}
.pm-section--dark .pm-pending { color: var(--pm-accent-soft); }
/* ======================================================================
Seitenkopf für Unterseiten
====================================================================== */
.et_pb_section.pm-page-hero {
padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
background:
radial-gradient(50rem 22rem at 90% 0%, rgba(221, 208, 228, 0.5), transparent 70%),
var(--pm-color-surface);
border-bottom: 1px solid var(--pm-color-border);
}
.pm-page-hero .pm-heading h1 {
font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
max-width: 20ch;
}
/* Fließtext auf Inhaltsseiten */
.pm-prose h2 {
font-size: var(--pm-text-h2);
margin: var(--pm-space-10) 0 var(--pm-space-4);
}
.pm-prose h2:first-child { margin-top: 0; }
.pm-prose h3 {
font-size: var(--pm-text-h3);
margin: var(--pm-space-8) 0 var(--pm-space-3);
}
/* FAQ (natives details/summary, tastaturbedienbar) */
.pm-faq details {
border-bottom: 1px solid var(--pm-color-border);
}
.pm-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pm-space-4);
min-height: var(--pm-touch-min);
padding: var(--pm-space-5) 0;
cursor: pointer;
font-family: var(--pm-font-display);
font-size: var(--pm-text-h3);
color: var(--pm-color-heading);
list-style: none;
}
.pm-faq summary::-webkit-details-marker { display: none; }
.pm-faq summary::after {
content: "+";
font-family: var(--pm-font-text);
font-size: 1.5rem;
color: var(--pm-accent-text);
}
.pm-faq details[open] summary::after { content: "–"; }
.pm-faq details > *:not(summary) { padding-bottom: var(--pm-space-5); color: var(--pm-color-text-muted); }
/* ======================================================================
Journal: Übersicht (Divi-Blog-Modul)
====================================================================== */
.pm-journal-list .et_pb_post {
margin-bottom: var(--pm-space-6);
padding: var(--pm-space-8);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-md);
background: var(--pm-color-bg);
transition: box-shadow var(--pm-transition);
}
.pm-journal-list .et_pb_post:hover { box-shadow: var(--pm-shadow-soft); }
.pm-journal-list .entry-title {
font-family: var(--pm-font-display);
font-size: var(--pm-text-h3);
line-height: var(--pm-leading-snug);
}
.pm-journal-list .entry-title a { color: var(--pm-color-heading); }
.pm-journal-list .post-meta {
font-size: var(--pm-text-xs);
color: var(--pm-color-text-muted);
}
.pm-journal-list .et_pb_no_results h2,
.pm-journal-list .entry h2 {
font-size: var(--pm-text-h3);
}
/* ======================================================================
Journal: Einzelartikel (Divi single.php)
====================================================================== */
.single-post #main-content { background: var(--pm-color-bg); }
.single-post #main-content .container::before { display: none; }
.single-post #left-area {
float: none;
width: 100%;
max-width: var(--pm-container-narrow);
margin: 0 auto;
padding: var(--pm-space-12) 0 var(--pm-space-section);
}
.single-post #sidebar { display: none; }
.pm-backlink {
margin-bottom: var(--pm-space-6);
font-size: var(--pm-text-sm);
}
.pm-backlink a {
font-weight: 700;
text-decoration: none;
}
.single-post .et_post_meta_wrapper .entry-title {
font-size: clamp(2rem, 1.5rem + 2.4vw, 3.125rem);
color: var(--pm-color-heading);
margin-bottom: var(--pm-space-5);
}
.single-post .et_post_meta_wrapper .post-meta {
font-size: var(--pm-text-sm);
color: var(--pm-color-text-muted);
padding-bottom: var(--pm-space-6);
margin-bottom: var(--pm-space-8);
border-bottom: var(--pm-border-hair);
}
.pm-updated {
margin: calc(-1 * var(--pm-space-6)) 0 var(--pm-space-8);
font-size: var(--pm-text-sm);
color: var(--pm-color-text-muted);
}
.single-post .entry-content {
font-size: 1.125rem;
line-height: 1.8;
}
/* Korrekturrunde Journal 2: H2 im Artikel etwas kleiner (eigenes Token), Zeilenhöhe für mehrzeilige Titel,
Abstand oben 40 px (mobil 32 px) statt 48 px, unten 12 px statt 16 px. Designfeedback 3: 24 bis 33 px, Zeilenhöhe 1,25;
H3 20 bis 24 px (eigenes Token, vorher --pm-text-h3 bis 25 px). Nur Beiträge (.single-post), keine Seiten. */
.single-post .entry-content h2 {
font-size: var(--pm-text-article-h2);
line-height: 1.25;
margin: var(--pm-space-10) 0 var(--pm-space-3);
}
@media (max-width: 767px) {
.single-post .entry-content h2 { margin-top: var(--pm-space-8); }
}
.single-post .entry-content h3 {
font-size: var(--pm-text-article-h3);
margin: var(--pm-space-8) 0 var(--pm-space-3);
}
.single-post .entry-content :is(ul, ol) { padding-left: 1.25em; }
.single-post .entry-content li { margin-bottom: var(--pm-space-2); }
.single-post .entry-content img { border-radius: var(--pm-radius-md); height: auto; }
.single-post .entry-content figcaption {
margin-top: var(--pm-space-2);
font-size: var(--pm-text-sm);
color: var(--pm-color-text-muted);
}
.single-post .entry-content blockquote {
margin: var(--pm-space-10) 0;
padding: var(--pm-space-2) 0 var(--pm-space-2) var(--pm-space-6);
border-left: 2px solid var(--pm-accent);
font-family: var(--pm-font-display);
font-size: var(--pm-text-xl);
line-height: 1.45;
color: var(--pm-color-heading);
}
.single-post .entry-content .wp-block-table { overflow-x: auto; }
.single-post .entry-content table {
width: 100%;
border-collapse: collapse;
font-size: var(--pm-text-sm);
}
.single-post .entry-content th,
.single-post .entry-content td {
padding: var(--pm-space-3) var(--pm-space-4);
border: 0;
border-bottom: var(--pm-border-hair);
text-align: left;
}
.single-post .entry-content th {
background: var(--pm-color-surface);
font-weight: var(--pm-weight-strong);
}
/* ======================================================================
404
====================================================================== */
.pm-404 {
width: calc(100% - 2 * var(--pm-gutter));
max-width: var(--pm-container-narrow);
margin: 0 auto;
padding: var(--pm-space-section) 0;
text-align: center;
}
.pm-404__code {
font-family: var(--pm-font-display);
font-size: clamp(4rem, 3rem + 6vw, 8rem);
line-height: 1;
color: var(--pm-amethyst-200);
}
.pm-404 h1 {
font-size: var(--pm-text-h2);
margin: var(--pm-space-4) 0;
}
.pm-404 .pm-lead { margin: 0 auto var(--pm-space-8); }
.pm-404__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pm-space-3);
}
.pm-404__links a {
display: inline-flex;
align-items: center;
min-height: var(--pm-touch-min);
padding: 0.8rem 1.5rem;
border: 1px solid var(--pm-color-border-strong);
border-radius: var(--pm-radius-pill);
font-weight: 700;
text-decoration: none;
}
.pm-404__links a:first-child {
background: var(--pm-color-brand);
border-color: var(--pm-color-brand);
color: var(--pm-color-text-inverse);
}
/* ======================================================================
Lauf 2.3: Hero-Bildunterschrift, Kontaktbereich mit Formular, Karte, Urkunde
====================================================================== */
/* Hinweis „Archivfoto“ unter dem Hero-Bild (nur bei echtem Foto sichtbar, siehe .pm-media-caption-module) */
.pm-hero-media > .pm-hero-caption {
max-width: 480px;
margin: var(--pm-space-4) 0 0 auto;
}
.pm-media--hero .et_pb_image_wrap img { object-position: 50% 45%; }
@media (max-width: 980px) {
.pm-hero-media > .pm-hero-caption { max-width: 440px; margin-right: auto; }
}
@media (max-width: 480px) {
/* 5:6 auf kleinen Geräten: Stuhl und Lupenleuchte bleiben im Ausschnitt */
.pm-media--hero .et_pb_image_wrap img { object-position: 50% 40%; }
}
/* Kontaktangaben: Hinweistexte (z. B. „Адресът ще бъде обявен скоро.“) etwas zurückgenommen */
.pm-facts__note { color: var(--pm-color-text-inverse-muted); }
.pm-facts--light .pm-facts__note { color: var(--pm-color-text-muted); }
.pm-contact-intro .pm-facts { margin-top: var(--pm-space-8); }
.pm-contact-intro .pm-note { margin-top: var(--pm-space-5); }
@media (min-width: 981px) {
.et_pb_row.pm-contact-row { display: flex; align-items: flex-start; }
}
.pm-cf-card {
padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-lg);
background: var(--pm-color-bg);
box-shadow: var(--pm-shadow-soft);
}
.pm-cf-card .pm-cf-title { font-size: var(--pm-text-h3); margin-bottom: var(--pm-space-2); }
body #page-container .pm-cf-card p.pm-cf-lead { margin-bottom: var(--pm-space-6); color: var(--pm-color-text-muted); font-size: var(--pm-text-sm); }
@media (max-width: 980px) {
.pm-contact-row .et_pb_column + .et_pb_column { margin-top: var(--pm-space-10); }
}
/* Formular (inc/contact-form.php) */
.pm-cf fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
body #page-container .pm-cf p { padding-bottom: 0; }
.pm-cf__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--pm-space-5); }
@media (min-width: 600px) {
.pm-cf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pm-cf__field { display: flex; flex-direction: column; gap: var(--pm-space-2); margin: 0 0 var(--pm-space-5); }
.pm-cf label {
font-size: var(--pm-text-sm);
font-weight: 700;
line-height: 1.4;
color: var(--pm-color-text);
}
.pm-cf__req { margin-left: 2px; color: var(--pm-color-error); }
.pm-cf__opt { font-weight: 500; color: var(--pm-color-text-muted); }
.pm-cf input[type="text"],
.pm-cf input[type="email"],
.pm-cf input[type="tel"],
.pm-cf textarea {
width: 100%;
min-height: 48px;
padding: var(--pm-space-3) var(--pm-space-4);
border: 1px solid var(--pm-color-border-strong);
border-radius: 10px;
background: var(--pm-color-bg);
color: var(--pm-color-text);
font-family: var(--pm-font-text);
font-size: var(--pm-text-base); /* mindestens 16 px: kein automatisches Zoomen auf iOS */
line-height: 1.5;
transition: border-color var(--pm-transition), box-shadow var(--pm-transition);
}
.pm-cf textarea { min-height: 150px; resize: vertical; }
.pm-cf input:hover,
.pm-cf textarea:hover { border-color: var(--pm-amethyst-600); }
.pm-cf input:focus-visible,
.pm-cf textarea:focus-visible {
border-color: var(--pm-color-focus);
outline: 2px solid var(--pm-color-focus);
outline-offset: 1px;
}
.pm-cf .has-error input,
.pm-cf .has-error textarea { border-color: var(--pm-color-error); }
.pm-cf__hint { font-size: var(--pm-text-xs); line-height: 1.5; color: var(--pm-color-text-muted); }
.pm-cf__error { font-size: var(--pm-text-xs); font-weight: 700; line-height: 1.5; color: var(--pm-color-error); }
.pm-cf__consent {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--pm-space-1) var(--pm-space-3);
}
.pm-cf__consent input {
width: 22px;
height: 22px;
margin: 1px 0 0;
accent-color: var(--pm-color-brand);
}
.pm-cf__consent label { font-weight: 500; color: var(--pm-color-text-muted); }
.pm-cf__consent .pm-cf__error { grid-column: 2; }
/* Honeypot: für Menschen unsichtbar, nicht fokussierbar (tabindex -1) */
.pm-cf__hp {
position: absolute !important; /* Standardmuster, wie .pm-visually-hidden */
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pm-cf__actions { margin-top: var(--pm-space-6); }
.pm-cf__submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
max-width: 100%;
padding: var(--pm-space-3) var(--pm-space-8);
border: 0;
border-radius: var(--pm-radius-pill);
background: var(--pm-color-brand);
color: var(--pm-color-text-inverse);
font-family: var(--pm-font-text);
font-size: var(--pm-text-sm);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3;
cursor: pointer;
transition: background-color var(--pm-transition);
}
.pm-cf__submit:hover { background: var(--pm-color-brand-strong); }
.pm-cf__submit:focus-visible { outline: none; box-shadow: var(--pm-focus-ring); }
@media (max-width: 600px) {
.pm-cf__submit { width: 100%; }
}
.pm-cf__summary,
.pm-cf--sent {
margin-bottom: var(--pm-space-6);
padding: var(--pm-space-4) var(--pm-space-5);
border-radius: var(--pm-radius-md);
font-size: var(--pm-text-sm);
}
.pm-cf__summary {
border-left: 3px solid var(--pm-color-error);
background: var(--pm-color-error-bg);
color: var(--pm-color-text);
}
.pm-cf__summary ul { margin: var(--pm-space-2) 0 0; padding-left: 1.2em; }
.pm-cf__summary a { color: var(--pm-color-error); font-weight: 700; }
.pm-cf--sent {
border-left: 3px solid var(--pm-accent);
background: var(--pm-color-surface-tint);
}
body #page-container .pm-cf--sent p.pm-cf__ok-title { font-family: var(--pm-font-display); font-size: var(--pm-text-h3); color: var(--pm-color-heading); padding-bottom: var(--pm-space-2); }
.pm-cf__off { color: var(--pm-color-text-muted); }
.pm-cf:focus,
.pm-cf__summary:focus { outline: none; }
/* Karte Varna (statisch, scripts/media/build-map.php) */
.pm-map-section > .et_pb_text_inner > p { max-width: 60ch; color: var(--pm-color-text-muted); }
.pm-map { margin: var(--pm-space-8) 0 0; }
.pm-map img {
display: block;
width: 100%;
height: auto;
border: var(--pm-border-hair);
border-radius: var(--pm-radius-lg);
background: var(--pm-color-surface-alt);
}
.pm-map figcaption {
margin-top: var(--pm-space-3);
font-size: var(--pm-text-xs);
line-height: 1.5;
color: var(--pm-color-text-muted);
}
/* Urkunde mit Großansicht (Teamseite) */
.pm-cert {
display: flex;
align-items: center;
gap: var(--pm-space-5);
max-width: 560px;
margin: var(--pm-space-6) 0 0;
padding: var(--pm-space-4);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-md);
background: var(--pm-color-bg);
}
.pm-cert__link {
display: flex;
flex: none;
flex-direction: column;
align-items: center;
gap: var(--pm-space-2);
width: 128px;
font-size: var(--pm-text-xs);
font-weight: 700;
text-align: center;
color: var(--pm-color-brand);
}
.pm-cert__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--pm-radius-sm);
box-shadow: var(--pm-shadow-soft);
transition: transform var(--pm-transition);
}
.pm-cert__link:hover .pm-cert__img { transform: translateY(-2px); }
.pm-cert figcaption { font-size: var(--pm-text-sm); line-height: 1.55; color: var(--pm-color-text-muted); }
@media (max-width: 420px) {
.pm-cert { flex-direction: column; align-items: flex-start; }
}
.pm-lightbox {
max-width: min(92vw, 760px);
max-height: 94vh;
padding: 0;
border: 0;
background: transparent;
overflow: visible;
}
.pm-lightbox::backdrop { background: rgba(27, 14, 36, 0.86); }
.pm-lightbox img {
display: block;
max-width: 100%;
max-height: 88vh;
width: auto;
height: auto;
margin: 0 auto;
border-radius: var(--pm-radius-md);
}
.pm-lightbox__close {
position: absolute;
top: calc(-1 * var(--pm-space-3));
right: calc(-1 * var(--pm-space-3));
width: var(--pm-touch-min);
height: var(--pm-touch-min);
padding: 0;
border: 1px solid var(--pm-color-border-strong);
border-radius: 50%;
background: var(--pm-color-bg);
color: var(--pm-color-brand);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.pm-lightbox__close:focus-visible { outline: none; box-shadow: var(--pm-focus-ring); }
@media (max-width: 600px) {
.pm-lightbox__close { top: var(--pm-space-2); right: var(--pm-space-2); }
}
/* ======================================================================
Journal-Migration (inc/journal-migration.php): Platzhalter für lokal deaktivierte Dienste und Tabellen
====================================================================== */
.pm-sim {
display: grid;
gap: var(--pm-space-1);
margin: var(--pm-space-6) 0;
padding: var(--pm-space-4) var(--pm-space-5);
border: 1px dashed var(--pm-color-border-strong);
border-radius: var(--pm-radius-md);
background: var(--pm-color-surface-tint);
color: var(--pm-color-text);
font-size: var(--pm-text-sm);
line-height: 1.5;
}
.pm-sim span { color: var(--pm-color-text-muted); font-size: var(--pm-text-xs); }
.pm-sim--ad { min-height: 90px; align-content: center; border-color: var(--pm-gold-700); background: var(--pm-color-surface); text-align: center; }
.pm-sim--product { border-style: solid; background: var(--pm-color-bg); }
.pm-sim-dialog {
max-width: min(92vw, 460px);
padding: var(--pm-space-6);
border: 0;
border-radius: var(--pm-radius-md);
box-shadow: var(--pm-shadow-lift);
}
.pm-sim-dialog::backdrop { background: rgba(27, 14, 36, 0.6); }
.pm-sim-dialog button {
min-height: var(--pm-touch-min);
padding: 0 var(--pm-space-6);
border: 0;
border-radius: var(--pm-radius-pill);
background: var(--pm-color-brand);
color: var(--pm-color-text-inverse);
font-weight: 700;
cursor: pointer;
}
.pm-table-wrap { overflow-x: auto; margin: var(--pm-space-6) 0; }
.pm-table-wrap table.tablepress { width: 100%; border-collapse: collapse; font-size: var(--pm-text-sm); }
.pm-table-wrap table.tablepress th,
.pm-table-wrap table.tablepress td { padding: var(--pm-space-3) var(--pm-space-4); border-bottom: var(--pm-border-hair); text-align: left; vertical-align: top; }
.pm-table-wrap table.tablepress th { background: var(--pm-color-surface); font-weight: var(--pm-weight-strong); }
/* ======================================================================
Journal M2.3: Übersicht mit Beitragskarten ([pm_journal_cards], inc/journal.php)
====================================================================== */
.pm-journal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: var(--pm-space-8);
}
.pm-journal-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: var(--pm-border-hair);
border-radius: var(--pm-radius-md);
background: var(--pm-color-bg);
transition: box-shadow var(--pm-transition), transform var(--pm-transition), border-color var(--pm-transition);
}
.pm-journal-card:hover,
.pm-journal-card:focus-within {
border-color: var(--pm-color-border-strong);
box-shadow: var(--pm-shadow-soft);
transform: translateY(-2px);
}
.pm-journal-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--pm-color-surface-tint); }
.pm-journal-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-journal-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--pm-space-2); padding: var(--pm-space-5) var(--pm-space-6) var(--pm-space-4); }
/* Rubrik als dezente Zusatzangabe (Korrekturrunde Journal): klein, ohne Versalien und weite Laufweite */
.pm-journal-card__cat {
margin: 0;
font-size: var(--pm-text-2xs);
font-weight: var(--pm-weight-strong);
letter-spacing: 0.02em;
line-height: 1.4;
color: var(--pm-color-text-muted);
}
/* Titel: mehr Zeilenhöhe; Trennung nur in langen Wörtern (lang="de", mindestens 4 Zeichen je Teil) */
.pm-journal-card__title { margin: 0 0 var(--pm-space-1); font-size: var(--pm-text-card-title); line-height: 1.35; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.pm-journal-card__title a { color: var(--pm-color-heading); text-decoration: none; }
/* ganze Karte klickbar, ein einziger Link je Karte */
.pm-journal-card__title a::after { content: ""; position: absolute; inset: 0; }
.pm-journal-card__title a:focus-visible { outline: none; }
.pm-journal-card:focus-within { outline: var(--pm-focus-ring); outline-offset: 2px; }
.pm-journal-card__excerpt { margin: 0; color: var(--pm-color-text-muted); font-size: var(--pm-text-sm); line-height: 1.6; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
/* Korrekturrunde Journal: In Divi-Textmodulen überschrieben bisher .et_pb_module h2 (Zeilenhöhe 1,12) und
body #page-container .et_pb_text p (17 px, Zeilenhöhe 1,7) die Kartenregeln. Höhere Spezifität, gleiche Werte wie oben. */
body #page-container .pm-journal-card .pm-journal-card__title { font-size: var(--pm-text-card-title); line-height: 1.35; padding-bottom: 0; } /* Größe aus der Karte, unabhängig von H2/H3 */
body #page-container .pm-journal-card .pm-journal-card__cat { font-size: var(--pm-text-2xs); line-height: 1.4; }
body #page-container .pm-journal-card .pm-journal-card__excerpt { font-size: var(--pm-text-sm); line-height: 1.6; }
body #page-container .pm-journal-card .pm-journal-card__meta { font-size: var(--pm-text-xs); line-height: 1.5; padding-bottom: 0; }
.pm-journal-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--pm-space-4);
margin: auto 0 0;
padding-top: var(--pm-space-3);
border-top: var(--pm-border-hair);
font-size: var(--pm-text-xs);
color: var(--pm-color-text-muted);
}
.pm-journal-card__more { margin-left: auto; font-weight: var(--pm-weight-strong); color: var(--pm-color-link); }
.pm-journal-card__more::after { content: " →"; }
.pm-journal-empty { color: var(--pm-color-text-muted); }
.pm-journal-pagination { margin-top: var(--pm-space-12); }
.pm-journal-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pm-space-2); margin: 0; padding: 0; list-style: none; }
.pm-journal-pagination :is(a, span).page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--pm-touch-min);
min-height: var(--pm-touch-min);
padding: 0 var(--pm-space-4);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-pill);
color: var(--pm-color-heading);
font-weight: var(--pm-weight-strong);
text-decoration: none;
}
.pm-journal-pagination .page-numbers.current { border-color: var(--pm-color-brand); background: var(--pm-color-brand); color: var(--pm-color-text-inverse); }
.pm-journal-pagination a.page-numbers:hover { border-color: var(--pm-color-border-strong); background: var(--pm-color-surface-tint); }
/* ======================================================================
Journal M2.3: migrierte Fachartikel (body.pm-migrated, inc/journal-migration.php)
Struktur der Quelle: Sektion .beitrag-inner-container, Zeile .beitrag-row (1/4 Inhaltsverzeichnis, 3/4 Text)
====================================================================== */
.pm-migrated #left-area { max-width: min(1160px, 100%); }
.pm-migrated .entry-content .et_pb_section.beitrag-inner-container { padding: 0; background: transparent; }
.pm-migrated .entry-content .beitrag-row { width: 100%; max-width: none; padding: 0; }
.pm-migrated .entry-content :is(p, li) { color: var(--pm-color-text); }
.pm-migrated .entry-content a { color: var(--pm-color-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pm-migrated .entry-content a:hover { color: var(--pm-color-link-hover); }
.pm-migrated .entry-content :is(h2, h3, h4) { color: var(--pm-color-heading); font-family: var(--pm-font-display); }
.pm-migrated .entry-content .et_pb_module { margin-bottom: var(--pm-space-6); }
.pm-migrated .entry-content img { max-width: 100%; height: auto; }
.pm-migrated .entry-content .kappoint { scroll-margin-top: calc(var(--pm-header-h-fixed) + var(--pm-space-6)); }
@media (min-width: 981px) {
.pm-migrated .et_post_meta_wrapper { margin-left: calc(240px + var(--pm-space-12)); max-width: 760px; }
.pm-migrated .entry-content .beitrag-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--pm-space-12); }
.pm-migrated .entry-content .beitrag-row > .et_pb_column { width: auto; margin: 0; }
.pm-migrated .entry-content .beitrag-row > .et_pb_column:last-child { max-width: 760px; }
.pm-migrated .entry-content .inhaltsverzeichnis { position: sticky; top: calc(var(--pm-header-h-fixed) + var(--pm-space-6)); }
.pm-migrated .pm-backlink { margin-left: calc(240px + var(--pm-space-12)); }
}
/* Inhaltsverzeichnis */
.pm-migrated .entry-content .inhaltsverzeichnis {
padding: var(--pm-space-5);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-md);
background: var(--pm-color-surface);
font-size: var(--pm-text-sm);
}
.pm-migrated .entry-content .inhaltsverzeichnis :is(h2, h3, h4, p:first-child strong) {
margin: 0 0 var(--pm-space-3);
font-family: var(--pm-font-text);
font-size: var(--pm-text-xs);
letter-spacing: var(--pm-tracking-caps);
text-transform: uppercase;
color: var(--pm-accent-text);
}
.pm-migrated .entry-content .inhaltsverzeichnis ul { margin: 0; padding: 0 !important; list-style: none !important; }
.pm-migrated .entry-content .inhaltsverzeichnis li { margin: 0; padding: var(--pm-space-2) 0; border-top: var(--pm-border-hair); list-style: none !important; font-size: var(--pm-text-sm); line-height: 1.4; hyphens: auto; }
.pm-migrated .entry-content .inhaltsverzeichnis li:first-child { border-top: 0; }
/* Korrekturrunde Journal 2: Einträge in neutraler Textfarbe statt Linkfarbe (auch besucht, Hover, Fokus); Hover unterstreicht */
.pm-migrated .entry-content .inhaltsverzeichnis a,
.pm-migrated .entry-content .inhaltsverzeichnis a:visited { color: var(--pm-color-text); text-decoration: none; }
.pm-migrated .entry-content .inhaltsverzeichnis a:is(:hover, :focus-visible) { color: var(--pm-color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* Infoboxen, Kurzfassung, Expertentipps, Hinweise, Linkboxen */
.pm-migrated .entry-content :is(.info-box, .expert-box, .link-box) {
padding: var(--pm-space-6) var(--pm-space-8);
border: 0;
border-left: 3px solid var(--pm-accent);
border-radius: 0 var(--pm-radius-md) var(--pm-radius-md) 0;
background: var(--pm-color-surface) !important;
box-shadow: none;
}
.pm-migrated .entry-content .info-box.key-facts { border-left-color: var(--pm-color-brand); background: var(--pm-color-surface-tint) !important; }
.pm-migrated .entry-content .expert-box { border-left-color: var(--pm-color-brand); }
.pm-migrated .entry-content .expert-box.attention { border-left-color: var(--pm-error-700); background: var(--pm-error-100) !important; }
.pm-migrated .entry-content .link-box { border-left-color: var(--pm-color-link); }
.pm-migrated .entry-content :is(.info-box, .expert-box, .link-box) .et_pb_text_inner > :last-child { margin-bottom: 0; }
/* Zitat der Autorin (Divi-Testimonial, Klasse zitat-article) */
.pm-migrated .entry-content .et_pb_testimonial {
padding: var(--pm-space-8) !important;
border-radius: var(--pm-radius-md);
background: var(--pm-color-surface-tint) !important;
}
.pm-migrated .entry-content .et_pb_testimonial::before { color: var(--pm-accent-text) !important; background: var(--pm-color-bg) !important; }
.pm-migrated .entry-content .et_pb_testimonial_description_inner { font-family: var(--pm-font-display); font-size: var(--pm-text-lg); line-height: 1.5; color: var(--pm-color-heading); }
.pm-migrated .entry-content .et_pb_testimonial_author { font-family: var(--pm-font-text); color: var(--pm-color-heading); }
.pm-migrated .entry-content .et_pb_testimonial_position { color: var(--pm-color-text-muted); }
/* Ratgeber- und Newsletter-Boxen (E-Book-Teaser mit Pop-up-Link) */
.pm-migrated .entry-content :is(.newsletter-content-container, .newsletter-modul, .ebook-banner) {
padding: var(--pm-space-6) var(--pm-space-8);
border: var(--pm-border-hair);
border-top: 2px solid var(--pm-accent);
border-radius: var(--pm-radius-md);
background: var(--pm-color-bg) !important;
}
.pm-migrated .entry-content p > a[class*="popup-"]:only-child {
display: inline-flex;
align-items: center;
min-height: var(--pm-touch-min);
padding: 0 var(--pm-space-6);
border-radius: var(--pm-radius-pill);
background: var(--pm-color-brand);
color: var(--pm-color-text-inverse);
font-weight: 700;
text-decoration: none;
}
/* Produktboxen (affiliate-toolkit im Divi-Slider) */
.pm-migrated .entry-content .produkt-slider { background: transparent !important; }
.pm-migrated .entry-content .produkt-slider .et_pb_slide { padding: 0 !important; background: transparent !important; }
.pm-migrated .entry-content .produkt-slider .et_pb_container { width: 100% !important; max-width: none !important; height: auto !important; padding: var(--pm-space-4) !important; }
.pm-migrated .entry-content .produkt-slider .et_pb_slider_container_inner { display: block; width: 100%; }
.pm-migrated .entry-content .produkt-slider .et_pb_slide_description { width: 100%; }
.pm-migrated .entry-content .produkt-slider .et_pb_slide_description { padding: 0 !important; text-shadow: none; }
.pm-migrated .entry-content .produkt-slider .et_pb_slide_content { color: var(--pm-color-text) !important; }
.pm-migrated .entry-content .produkt-slider :is(.et-pb-arrow-prev, .et-pb-arrow-next) { color: var(--pm-color-brand) !important; }
/* Bilder und Tabellen */
.pm-migrated .entry-content .et_pb_image img { border-radius: var(--pm-radius-md); }
.pm-table-wrap { border: var(--pm-border-hair); border-radius: var(--pm-radius-md); }
.pm-table-wrap:focus-visible { outline: var(--pm-focus-ring); outline-offset: 2px; }
.pm-table-wrap table.tablepress { margin: 0; }
.pm-table-wrap table.tablepress.min-width-column td:first-child { min-width: 9rem; }
.pm-table-wrap table.tablepress.big-table { min-width: 640px; }
.pm-table-wrap table.pm-table--striped tbody tr:nth-child(even) td { background: var(--pm-color-surface); }
.pm-table-wrap table.tablepress tr:last-child td { border-bottom: 0; }
/* Anzeigenplätze: unaufdringlich, mit Abstand zum Text; mobil ausgedünnt */
.pm-ad, .pm-sim--ad { margin: var(--pm-space-10) 0; }
@media (max-width: 767px) {
:is(.pm-ad, .pm-sim--ad)[data-pm-ad-mobile="off"] { display: none; }
}
a[data-pm-pending] { color: inherit; text-decoration: none; cursor: default; }
.pm-journal-pagination .page-numbers.dots { border-color: transparent; }
@media (min-width: 981px) {
/* Endanzeige in der Textspalte, nicht unter dem Inhaltsverzeichnis */
.pm-migrated .entry-content > :is(.pm-ad, .pm-sim--ad) { max-width: 760px; margin-left: calc(240px + var(--pm-space-12)); }
}
/* ======================================================================
Journal M2.4: Rubriken, Archive, Bildplatzhalter, Artikelkopf und -ende
(inc/journal.php, category.php, inc/journal-migration.php)
====================================================================== */
/* Rubriknavigation: ruhige Pillen, aktuelle Rubrik gefüllt; mobil horizontal scrollbar statt vieler Zeilen */
.pm-rubriken { margin: 0 0 var(--pm-space-10); }
.pm-rubriken ul { display: flex; flex-wrap: wrap; gap: var(--pm-space-2) var(--pm-space-3); margin: 0; padding: 0 !important; list-style: none !important; }
.pm-rubriken li { margin: 0; padding: 0; list-style: none !important; }
.pm-rubriken a {
display: inline-flex;
align-items: center;
gap: var(--pm-space-2);
min-height: var(--pm-touch-min);
padding: 0 var(--pm-space-5);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-pill);
background: var(--pm-color-bg);
color: var(--pm-color-heading);
font-size: var(--pm-text-sm);
font-weight: var(--pm-weight-strong);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--pm-transition), border-color var(--pm-transition), color var(--pm-transition);
}
.pm-rubriken a:hover { border-color: var(--pm-color-border-strong); background: var(--pm-color-surface-tint); }
.pm-rubriken a:focus-visible { outline: var(--pm-focus-ring); outline-offset: 2px; }
.pm-rubriken a[aria-current="page"] { border-color: var(--pm-color-brand); background: var(--pm-color-brand); color: var(--pm-color-text-inverse); }
.pm-rubriken__count { font-size: var(--pm-text-xs); font-weight: var(--pm-weight-text); color: var(--pm-color-text-muted); }
.pm-rubriken a[aria-current="page"] .pm-rubriken__count { color: var(--pm-color-text-inverse-muted); }
@media (max-width: 599px) {
/* bis an den Rand: angeschnittene Pille zeigt, dass weitere Rubriken folgen */
.pm-rubriken ul { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-right: calc(-1 * var(--pm-gutter)); padding-right: var(--pm-gutter) !important; padding-bottom: var(--pm-space-2) !important; scrollbar-width: thin; }
.pm-rubriken li { flex: 0 0 auto; scroll-snap-align: start; }
}
/* Übersicht und Rubrikarchiv */
.et_pb_section.pm-journal-archive__list { padding: var(--pm-space-12) 0 var(--pm-space-section); }
.pm-page-hero .pm-lead p { margin: 0; }
.pm-journal-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/*
* Bildplatzhalter (Bildkonzept M2.4, docs/MEDIA.md): solange Beitragsbilder nicht freigegeben sind, eine typografische
* Fläche je Rubrik in Amethyst mit metallischem Akzent (Token --pm-accent, Gold oder Silber laut Markenentscheid).
*/
.pm-journal-card__media--cover {
position: relative;
display: flex;
align-items: flex-end;
padding: var(--pm-space-5) var(--pm-space-6);
background:
radial-gradient(120% 90% at 88% 8%, rgba(255, 255, 255, 0.12), transparent 55%),
linear-gradient(140deg, var(--pm-amethyst-800), var(--pm-amethyst-950));
}
.pm-journal-card__media--cover::before {
content: "";
position: absolute;
inset: var(--pm-space-3);
border: 1px solid color-mix(in srgb, var(--pm-accent) 45%, transparent);
border-radius: calc(var(--pm-radius-md) - 4px);
pointer-events: none;
}
.pm-cover__mark {
position: absolute;
top: var(--pm-space-6);
right: var(--pm-space-6);
width: 2.25rem;
height: 2.75rem;
border: 1px solid var(--pm-accent);
border-radius: var(--pm-radius-arch);
opacity: 0.85;
}
.pm-cover__label {
position: relative;
font-family: var(--pm-font-display);
font-size: var(--pm-text-lg);
line-height: var(--pm-leading-snug);
color: var(--pm-white);
}
.pm-cover--nagel { background: radial-gradient(120% 90% at 88% 8%, rgba(255, 255, 255, 0.12), transparent 55%), linear-gradient(140deg, var(--pm-amethyst-600), var(--pm-amethyst-900)); }
.pm-cover--huehneraugen { background: radial-gradient(120% 90% at 12% 8%, rgba(255, 255, 255, 0.12), transparent 55%), linear-gradient(200deg, var(--pm-amethyst-800), var(--pm-amethyst-950)); }
.pm-cover--hornhaut { background: radial-gradient(120% 90% at 88% 92%, rgba(255, 255, 255, 0.14), transparent 55%), linear-gradient(160deg, var(--pm-amethyst-600), var(--pm-amethyst-950)); }
.pm-cover--hilfsmittel { background: radial-gradient(120% 90% at 88% 8%, rgba(255, 255, 255, 0.10), transparent 55%), linear-gradient(140deg, var(--pm-amethyst-900), var(--pm-amethyst-950)); }
.pm-cover--behandlung { background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 60%), linear-gradient(180deg, var(--pm-amethyst-800), var(--pm-amethyst-950)); }
/* Breadcrumbs (Rank Math) */
.pm-breadcrumbs { margin: 0 0 var(--pm-space-6); font-size: var(--pm-text-xs); line-height: 1.5; color: var(--pm-color-text-muted); }
.pm-breadcrumbs p { margin: 0; padding: 0; }
.pm-breadcrumbs a { color: var(--pm-color-text-muted); text-decoration: none; }
.pm-breadcrumbs a:hover { color: var(--pm-color-link); text-decoration: underline; }
.pm-breadcrumbs .separator { margin: 0 var(--pm-space-2); color: var(--pm-color-text-muted); }
.pm-breadcrumbs .last { color: var(--pm-color-heading); }
.pm-migrated .pm-breadcrumbs { margin-top: 0; }
@media (min-width: 981px) {
.pm-migrated .pm-breadcrumbs { margin-left: calc(240px + var(--pm-space-12)); max-width: 760px; }
}
/* Hinweis Geltungsbereich (deutsches Gesundheitssystem) */
.pm-region-note {
max-width: 760px;
margin: 0 0 var(--pm-space-8);
padding: var(--pm-space-4) var(--pm-space-5);
border: var(--pm-border-hair);
border-left: 3px solid var(--pm-accent);
border-radius: var(--pm-radius-sm);
background: var(--pm-color-surface);
font-size: var(--pm-text-sm);
line-height: 1.6;
color: var(--pm-color-text);
}
.pm-region-note strong { margin-right: var(--pm-space-2); color: var(--pm-color-heading); }
/* Warnhinweis vor sensiblen Befundbildern (natives details, ohne Skript) */
.pm-sensitive { border: var(--pm-border-hair); border-radius: var(--pm-radius-md); background: var(--pm-color-surface); overflow: hidden; }
.pm-sensitive summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--pm-space-1) var(--pm-space-5);
min-height: var(--pm-touch-min);
padding: var(--pm-space-5) var(--pm-space-6);
cursor: pointer;
list-style: none;
}
.pm-sensitive summary::-webkit-details-marker { display: none; }
.pm-sensitive summary:focus-visible { outline: var(--pm-focus-ring); outline-offset: -2px; }
.pm-sensitive__title { grid-column: 1; font-size: var(--pm-text-xs); font-weight: var(--pm-weight-strong); letter-spacing: var(--pm-tracking-caps); text-transform: uppercase; color: var(--pm-accent-text); }
.pm-sensitive__text { grid-column: 1; font-size: var(--pm-text-sm); line-height: 1.5; color: var(--pm-color-text); }
.pm-sensitive__action {
grid-column: 2;
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
min-height: var(--pm-touch-min);
padding: 0 var(--pm-space-5);
border: 1px solid var(--pm-color-brand);
border-radius: var(--pm-radius-pill);
font-size: var(--pm-text-sm);
font-weight: var(--pm-weight-strong);
color: var(--pm-color-brand);
}
.pm-sensitive[open] .pm-sensitive__action { background: var(--pm-color-brand); color: var(--pm-color-text-inverse); }
.pm-sensitive__media { padding: 0 var(--pm-space-6) var(--pm-space-6); }
.pm-sensitive__media :is(p, img) { margin: 0; }
@media (max-width: 599px) {
.pm-sensitive summary { grid-template-columns: 1fr; }
.pm-sensitive__action { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--pm-space-3); }
}
/* Anzeigen: immer als „Anzeige“ gekennzeichnet */
.pm-ad__label { display: block; margin-bottom: var(--pm-space-2); font-size: var(--pm-text-xs); letter-spacing: var(--pm-tracking-caps); text-transform: uppercase; color: var(--pm-color-text-muted); }
/* Autorin am Artikelende (nur freigegebene Angaben) */
.pm-author {
display: flex;
align-items: center;
gap: var(--pm-space-6);
max-width: 760px;
margin: var(--pm-space-12) 0 var(--pm-space-8);
padding: var(--pm-space-6) 0;
border-top: var(--pm-border-hair);
border-bottom: var(--pm-border-hair);
}
.pm-author__img { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.pm-author p { margin: 0; padding: 0; }
.pm-author__eyebrow { font-size: var(--pm-text-xs); font-weight: var(--pm-weight-strong); letter-spacing: var(--pm-tracking-caps); text-transform: uppercase; color: var(--pm-accent-text); }
.pm-author__name { margin-top: var(--pm-space-1) !important; font-family: var(--pm-font-display); font-size: var(--pm-text-xl); color: var(--pm-color-heading); }
.pm-author__role { color: var(--pm-color-text-muted); font-size: var(--pm-text-sm); }
.pm-author__link { margin-top: var(--pm-space-2) !important; font-size: var(--pm-text-sm); }
/* Weitere Artikel der Rubrik */
.pm-related { margin: var(--pm-space-16) 0 var(--pm-space-8); padding-top: var(--pm-space-10); border-top: var(--pm-border-hair); }
.pm-related__title { margin-bottom: var(--pm-space-6); font-size: var(--pm-text-h3); }
/* Karten im Artikel: Fließtextstile des Artikels (Überschriften, Links, Absätze) nicht auf die Karten übertragen */
.pm-migrated .entry-content .pm-related__title { margin: 0 0 var(--pm-space-6); font-size: var(--pm-text-h3); }
.pm-migrated .entry-content .pm-related .pm-journal-card__title { margin: 0; font-size: var(--pm-text-lg); line-height: var(--pm-leading-snug); }
.pm-migrated .entry-content .pm-related .pm-journal-card__title a { color: var(--pm-color-heading); text-decoration: none; }
.pm-migrated .entry-content .pm-related .pm-journal-card p { margin: 0; padding: 0; }
.pm-migrated .entry-content .pm-related .pm-journal-card__excerpt { color: var(--pm-color-text-muted); }
.pm-migrated .entry-content .pm-related .pm-journal-card__meta { margin-top: auto; }
@media (min-width: 600px) { .pm-journal-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) { .pm-journal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Platzhalterbild nennt die Rubrik bereits: Rubrikzeile im Kartentext nicht doppeln */
.pm-journal-card__media--cover + .pm-journal-card__body .pm-journal-card__cat { display: none; }
@media (min-width: 981px) {
.pm-migrated .entry-content > :is(.pm-region-note, .pm-author) { margin-left: calc(240px + var(--pm-space-12)); }
}
/* Video externer Plattformen als Link ohne Einbettung (keine Daten an den Anbieter vor dem Klick) */
.pm-video-link { display: flex; flex-direction: column; gap: var(--pm-space-1); margin: 0; padding: var(--pm-space-5) var(--pm-space-6); border: var(--pm-border-hair); border-radius: var(--pm-radius-md); background: var(--pm-color-surface); }
.pm-video-link a { font-weight: var(--pm-weight-strong); }
.pm-video-link a::before { content: "▶ "; color: var(--pm-accent-text); }
.pm-video-link span { font-size: var(--pm-text-xs); color: var(--pm-color-text-muted); }
/* ADR-053: Beitragsbild der Serie im Artikelkopf; Bildunterschrift „Archivfoto“ direkt unter dem Bild */
.single-post .et_post_meta_wrapper > img[src*="/beitragsbild-"] { display: block; width: 100%; height: auto; border-radius: var(--pm-radius-md); }
.pm-featured-caption { margin: var(--pm-space-2) 0 var(--pm-space-6); padding: 0; font-size: var(--pm-text-xs); line-height: 1.5; color: var(--pm-color-text-muted); }
@media (min-width: 981px) {
/* wie Hinweisboxen: in der Textspalte unter dem Bild, nicht über dem Inhaltsverzeichnis */
.pm-migrated .entry-content > .pm-featured-caption { margin-left: calc(240px + var(--pm-space-12)); }
}
/* Journalkarten: Serienbild im vollständigen Format 1200:630 (kein Beschnitt); Rückfall ohne :has(): 16:9, nur rechts im Fotobereich beschnitten */
.pm-journal-card__img[src*="/beitragsbild-"] { object-position: 0 50%; }
.pm-journal-card__media:has(> .pm-journal-card__img[src*="/beitragsbild-"]) { aspect-ratio: 1200 / 630; }
/* ======================================================================
M2.5: Artikelaufbau Journal (nur Einzelartikel), Produktboxen und Newsletter-Vorschau
====================================================================== */
/* Abstand Header → Brotkrumen: Divi-Container ohne eigenen Innenabstand (vorher 58 + 48 px) */
body.single-post:not(.et-tb) #main-content .container { padding-top: 0; } /* stärker als Divis body:not(.et-tb) #main-content .container */
.single-post #left-area { padding-top: var(--pm-space-12); }
@media (max-width: 980px) {
.single-post #left-area { padding-top: var(--pm-space-8); }
}
@media (max-width: 767px) {
.single-post #left-area { padding-top: var(--pm-space-5); }
}
/* Hinweis- und Werbehinweisboxen: kompakter, Kennzeichnung als kleine Überschrift */
.pm-region-note { margin-bottom: var(--pm-space-6); padding: var(--pm-space-3) var(--pm-space-4); line-height: 1.55; }
.pm-region-note strong { display: block; margin: 0 0 var(--pm-space-1); font-size: var(--pm-text-xs); letter-spacing: var(--pm-tracking-caps); text-transform: uppercase; color: var(--pm-accent-text); }
.pm-region-note + .pm-region-note { margin-top: calc(-1 * var(--pm-space-3)); }
.pm-migrated .entry-content > .pm-region-note:first-child { margin-top: var(--pm-space-6); } /* ohne Bildunterschrift nicht direkt am Bild */
/* „Das Wichtigste in Kürze“ und weitere Infoboxen: kein Divi-Listenabstand (23 px) unter der letzten Liste; mobil kompakter.
Mit #left-area: stärker als Divis #left-area ul */
.pm-migrated #left-area .entry-content :is(.info-box, .expert-box, .link-box) :is(ul, ol):last-child { padding-bottom: 0; }
.pm-migrated .entry-content :is(.info-box, .expert-box, .link-box) { hyphens: auto; hyphenate-limit-chars: 6 3 3; overflow-wrap: break-word; } /* lange Komposita in schmalen Kästen (lang=de) */
@media (max-width: 767px) {
.pm-migrated .entry-content :is(.info-box, .expert-box, .link-box) { padding: var(--pm-space-4) var(--pm-space-5); }
.pm-migrated #left-area .entry-content :is(.info-box, .expert-box, .link-box) :is(ul, ol) { margin-left: 0; padding-left: 1.15em; }
}
/* Produktbox (Migrationsdaten, inc/journal-migration.php: pm_atkp_product_preview) */
.pm-migrated .entry-content .produkt-slider .et_pb_container { padding: 0 !important; }
.pm-migrated .entry-content .produkt-slider .et_pb_slide_overlay_container { display: none; } /* eckige Cremefläche hinter der Box */
.pm-migrated .entry-content .produkt-slider { margin-bottom: var(--pm-space-8); }
.pm-migrated .entry-content .pm-product {
padding: var(--pm-space-5) var(--pm-space-6);
border: var(--pm-border-hair);
border-radius: var(--pm-radius-md);
background: var(--pm-color-surface);
color: var(--pm-color-text);
font-family: var(--pm-font-text);
text-align: left;
text-shadow: none;
}
.pm-migrated .entry-content .pm-product p { margin: 0; padding: 0; }
body #page-container .pm-product .pm-product__label { margin-bottom: var(--pm-space-2); font-size: var(--pm-text-xs); font-weight: 700; letter-spacing: var(--pm-tracking-caps); line-height: 1.4; text-transform: uppercase; color: var(--pm-accent-text); }
body #page-container .pm-product .pm-product__title { margin-bottom: var(--pm-space-2); font-family: var(--pm-font-display); font-size: var(--pm-text-lg); font-weight: 400; line-height: 1.3; color: var(--pm-color-heading); }
body #page-container .pm-product .pm-product__text { font-size: var(--pm-text-sm); line-height: 1.6; color: var(--pm-color-text); }
body #page-container .pm-product .pm-product__action { margin-top: var(--pm-space-4); }
.pm-migrated .entry-content .pm-product__link {
display: inline-flex;
align-items: center;
gap: var(--pm-space-2);
min-height: var(--pm-touch-min);
padding: 0.6rem 1.25rem;
border: 1px solid var(--pm-color-brand);
border-radius: var(--pm-radius-pill);
color: var(--pm-color-brand);
font-size: var(--pm-text-sm);
font-weight: var(--pm-weight-strong);
line-height: 1.3;
text-decoration: none;
transition: background-color var(--pm-transition), color var(--pm-transition);
}
.pm-migrated .entry-content .pm-product__link::after { content: "→" / ""; }
.pm-migrated .entry-content .pm-product__link:hover { background: var(--pm-color-brand); color: var(--pm-color-text-inverse); }
.pm-migrated .entry-content .pm-product__link:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
@media (max-width: 767px) {
.pm-migrated .entry-content .pm-product { padding: var(--pm-space-4) var(--pm-space-5); }
.pm-migrated .entry-content .pm-product__link { display: flex; justify-content: center; width: 100%; }
}
/* Newsletter-Vorschau (lokal, inc/journal-migration.php: pm_newsletter_preview); Rahmen liefert .newsletter-modul.
Textregeln mit #page-container: stärker als body #page-container .et_pb_text p (base.css) */
.pm-migrated .entry-content :is(.newsletter-modul, .newsletter-content-container):has(.pm-newsletter, .pm-nl-invite) { background: var(--pm-color-surface) !important; }
.pm-newsletter { font-family: var(--pm-font-text); color: var(--pm-color-text); }
.pm-migrated .entry-content .pm-newsletter p { margin: 0; padding: 0; }
body #page-container .pm-newsletter .pm-newsletter__title { margin-bottom: var(--pm-space-2); font-family: var(--pm-font-display); font-size: var(--pm-text-xl); line-height: 1.25; color: var(--pm-color-heading); }
body #page-container .pm-newsletter .pm-newsletter__intro { margin-bottom: var(--pm-space-5); font-size: var(--pm-text-sm); line-height: 1.6; }
.pm-newsletter fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pm-newsletter__label { display: block; margin-bottom: var(--pm-space-2); font-size: var(--pm-text-sm); font-weight: 700; line-height: 1.4; color: var(--pm-color-text); }
.pm-newsletter__row { display: flex; flex-wrap: wrap; gap: var(--pm-space-3); }
.pm-newsletter__input {
flex: 1 1 16rem;
min-width: 0;
min-height: 48px;
padding: var(--pm-space-3) var(--pm-space-4);
border: 1px solid var(--pm-color-border-strong);
border-radius: 10px;
background: var(--pm-color-bg);
color: var(--pm-color-text);
font-family: var(--pm-font-text);
font-size: var(--pm-text-base); /* mindestens 16 px: kein automatisches Zoomen auf iOS */
line-height: 1.5;
}
.pm-newsletter__input:hover { border-color: var(--pm-amethyst-600); }
.pm-newsletter__input:focus-visible { border-color: var(--pm-color-focus); outline: 2px solid var(--pm-color-focus); outline-offset: 1px; }
.pm-newsletter__input[aria-invalid="true"] { border-color: var(--pm-color-error); }
.pm-newsletter__button {
flex: 0 0 auto;
min-height: 48px;
padding: 0 var(--pm-space-6);
border: 1px solid var(--pm-color-brand);
border-radius: var(--pm-radius-pill);
background: var(--pm-color-brand);
color: var(--pm-color-text-inverse);
font-family: var(--pm-font-text);
font-size: var(--pm-text-sm);
font-weight: var(--pm-weight-strong);
cursor: pointer;
transition: background-color var(--pm-transition);
}
.pm-newsletter__button:hover { background: var(--pm-color-brand-strong); }
.pm-newsletter__button:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
.pm-newsletter fieldset:disabled :is(.pm-newsletter__input, .pm-newsletter__button) { opacity: 0.6; cursor: not-allowed; }
body #page-container .pm-newsletter .pm-newsletter__error { order: 3; flex-basis: 100%; margin-top: calc(-1 * var(--pm-space-1)); font-size: var(--pm-text-xs); font-weight: 700; line-height: 1.5; color: var(--pm-color-error); }
body #page-container .pm-newsletter .pm-newsletter__consent { margin-top: var(--pm-space-4); font-size: var(--pm-text-xs); line-height: 1.55; color: var(--pm-color-text-muted); }
body #page-container .pm-newsletter .pm-newsletter__status:not(:empty) { margin-top: var(--pm-space-4); padding: var(--pm-space-3) var(--pm-space-4); border-left: 3px solid var(--pm-color-brand); border-radius: var(--pm-radius-sm); background: var(--pm-color-surface-tint); font-size: var(--pm-text-sm); font-weight: 700; line-height: 1.5; color: var(--pm-color-heading); }
@media (max-width: 767px) {
.pm-migrated .entry-content :is(.newsletter-content-container, .newsletter-modul, .ebook-banner) { padding: var(--pm-space-5); }
.pm-newsletter__button { flex-basis: 100%; order: 3; }
body #page-container .pm-newsletter .pm-newsletter__error { order: 2; }
}
/* ======================================================================
M2.6: Artikelansicht (inc/journal-article.php): Titelzeile, Bild in der Textspalte, Leseorientierung,
mitlaufende Seitenleiste, Teilen, Autorin
====================================================================== */
/* Kopf: durchgehende Titelzeile linksbündig über Inhaltsverzeichnis und Text (Kategorie seit der Korrekturrunde in der Metazeile) */
.pm-migrated .et_post_meta_wrapper { margin-left: 0 !important; max-width: none !important; }
.pm-migrated .et_post_meta_wrapper .entry-title { max-width: 980px; margin-bottom: var(--pm-space-4); padding-bottom: 0; text-wrap: balance; }
body.pm-migrated #page-container .entry-content > .pm-article-meta { margin: 0 0 var(--pm-space-8); padding: 0 0 var(--pm-space-5); border-bottom: var(--pm-border-hair); font-size: var(--pm-text-sm); line-height: 1.6; color: var(--pm-color-text-muted); }
.pm-migrated .entry-content .pm-article-meta a { color: var(--pm-color-text-muted); text-decoration: none; }
.pm-migrated .entry-content .pm-article-meta a:hover { color: var(--pm-color-link); text-decoration: underline; }
.pm-article-meta__sep { color: var(--pm-color-border-strong); }
/* Beitragsbild, Bildkennzeichnung und Hinweise als erstes Element der Textspalte */
.pm-article-lead { margin-bottom: var(--pm-space-8); }
.pm-article-figure { margin: 0 0 var(--pm-space-6); }
.pm-article-figure:last-child { margin-bottom: 0; }
.pm-article-figure__img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: var(--pm-radius-md); }
.pm-article-figure .pm-featured-caption { display: block; margin: var(--pm-space-2) 0 0; }
.pm-migrated .entry-content .pm-article-lead .pm-region-note { margin-top: 0; margin-left: 0; }
.pm-migrated .entry-content .pm-article-lead .pm-region-note:last-child { margin-bottom: 0; }
.pm-migrated .entry-content .pm-article-lead .pm-region-note + .pm-region-note { margin-top: calc(-1 * var(--pm-space-3)); }
/* Raster: 2 Spalten ab 981 px (Inhaltsverzeichnis | Text), 3 Spalten ab 1280 px (+ Seitenleiste) */
@media (min-width: 981px) {
/* Zeile 2 flexibel: Höhe von Inhaltsverzeichnis und Seitenleiste (über zwei Zeilen) nicht unter das Beitragsbild verteilen */
.pm-migrated .entry-content .beitrag-row { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 0 var(--pm-space-10); }
.pm-migrated .entry-content .beitrag-row > .pm-article-lead { grid-column: 2; grid-row: 1; max-width: 760px; }
.pm-migrated .entry-content .beitrag-row > #inhaltsverzeichnis-spalte { grid-column: 1; grid-row: 1 / span 2; }
.pm-migrated .entry-content .beitrag-row > .et_pb_column:not(#inhaltsverzeichnis-spalte) { grid-column: 2; grid-row: 2; }
.pm-migrated .entry-content .beitrag-row > .pm-article-aside { grid-column: 2; grid-row: 3; max-width: 760px; }
/* Elemente nach der Zeile (Teilen, Autorin, Anzeige) bündig mit der Textspalte */
.pm-migrated .entry-content > :is(.pm-share, .pm-author, .pm-ad, .pm-sim--ad) { max-width: 760px; margin-left: calc(220px + var(--pm-space-10)); }
}
@media (min-width: 1280px) {
.pm-migrated #left-area { max-width: min(1240px, 100%); }
.pm-migrated .entry-content .beitrag-row { grid-template-columns: 220px minmax(0, 1fr) 250px; grid-template-rows: auto 1fr; gap: 0 var(--pm-space-8); }
.pm-migrated .entry-content .beitrag-row > .pm-article-aside { grid-column: 3; grid-row: 1 / span 2; max-width: none; }
.pm-migrated .entry-content > :is(.pm-share, .pm-author, .pm-ad, .pm-sim--ad) { max-width: 760px; margin-left: calc(220px + var(--pm-space-8)); }
.pm-article-aside__sticky { position: sticky; top: calc(var(--pm-header-h-fixed) + var(--pm-space-6)); }
}
@media (max-width: 1279px) {
/* ohne Seitenleiste: Newsletter-Karte im Lesefluss nach dem Text, nicht doppelt, wenn der Artikel schon eine enthält */
.pm-article-aside--inline-nl { display: none; }
.pm-article-aside { clear: both; margin: var(--pm-space-4) 0 var(--pm-space-8); } /* nach den Divi-Spalten (float) */
}
/* Seitenleiste: Newsletter-Vorschau kompakt */
.pm-newsletter--aside { padding: var(--pm-space-5); border: var(--pm-border-hair); border-top: 2px solid var(--pm-accent); border-radius: var(--pm-radius-md); background: var(--pm-color-surface); }
.pm-migrated .entry-content .pm-newsletter--aside p { margin: 0; padding: 0; }
body #page-container .pm-newsletter--aside .pm-newsletter__title { font-size: var(--pm-text-lg); }
@media (min-width: 1280px) {
.pm-newsletter--aside .pm-newsletter__row { flex-direction: column; }
.pm-newsletter--aside .pm-newsletter__input { flex: 0 0 auto; width: 100%; }
.pm-newsletter--aside .pm-newsletter__button { order: 3; width: 100%; }
body #page-container .pm-newsletter--aside .pm-newsletter__error { order: 2; margin-top: 0; }
}
/* Kopfzeile „Inhaltsverzeichnis“ in der schmalen Spalte nicht mitten im Wort umbrechen */
.pm-migrated .entry-content .inhaltsverzeichnis p:first-child strong { letter-spacing: 0.06em; }
/* Inhaltsverzeichnis: aktueller Abschnitt (aria-current, navigation.js) */
.pm-migrated .entry-content .inhaltsverzeichnis a { display: block; margin-left: calc(-1 * var(--pm-space-3)); padding-left: calc(var(--pm-space-3) - 3px); border-left: 3px solid transparent; transition: color var(--pm-transition), border-color var(--pm-transition); }
.pm-migrated .entry-content .inhaltsverzeichnis a[aria-current="location"] { border-left-color: var(--pm-accent); color: var(--pm-color-text); font-weight: var(--pm-weight-strong); }
@media (min-width: 981px) {
.pm-migrated .entry-content .inhaltsverzeichnis { max-height: calc(100vh - var(--pm-header-h-fixed) - var(--pm-space-12)); overflow-y: auto; overscroll-behavior: contain; }
}
/* Sprungziele unter der fixierten Navigation und dem Fortschrittsbalken */
.pm-migrated .entry-content :is(.kappoint, [id]) { scroll-margin-top: calc(var(--pm-header-h-fixed) + var(--pm-space-6)); }
/* Lesefortschritt am unteren Rand des fixierten Headers (navigation.js) */
.pm-progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; height: 3px; pointer-events: none; }
.pm-progress__bar { display: block; height: 100%; background: var(--pm-accent); transform: scaleX(0); transform-origin: 0 50%; }
/* Teilen */
.pm-share { margin: var(--pm-space-10) 0 0; }
body #page-container .pm-share .pm-share__title { margin: 0 0 var(--pm-space-3); padding: 0; font-size: var(--pm-text-xs); font-weight: var(--pm-weight-strong); letter-spacing: var(--pm-tracking-caps); text-transform: uppercase; color: var(--pm-accent-text); }
.pm-migrated #left-area .pm-share__list { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); margin: 0; padding: 0; list-style: none; }
.pm-migrated #left-area .pm-share__list li { margin: 0; padding: 0; list-style: none; }
.pm-migrated .entry-content .pm-share__btn {
display: inline-flex;
align-items: center;
min-height: var(--pm-touch-min);
padding: 0 var(--pm-space-4);
border: 1px solid var(--pm-color-border-strong);
border-radius: var(--pm-radius-pill);
background: var(--pm-color-bg);
color: var(--pm-color-heading);
font-family: var(--pm-font-text);
font-size: var(--pm-text-sm);
font-weight: var(--pm-weight-strong);
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.pm-migrated .entry-content .pm-share__btn:hover { border-color: var(--pm-color-brand); background: var(--pm-color-surface-tint); color: var(--pm-color-heading); }
.pm-migrated .entry-content .pm-share__btn:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
.pm-migrated .entry-content .pm-share__btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
body #page-container .pm-share .pm-share__status:not(:empty) { margin: var(--pm-space-3) 0 0; padding: 0; font-size: var(--pm-text-xs); line-height: 1.5; color: var(--pm-color-text-muted); }
/* Autorin: Kurzprofil */
.pm-author { align-items: flex-start; }
body #page-container .pm-author .pm-author__bio { margin-top: var(--pm-space-3); font-size: var(--pm-text-sm); line-height: 1.6; color: var(--pm-color-text); }
@media (max-width: 599px) {
.pm-author { flex-direction: column; gap: var(--pm-space-4); }
}
/* Produktbox affiliate-toolkit, Vorlage „wide“ (M2.6, scripts/wp/12-affiliate-produkte.php): Gestaltung wie die bisherige
Produktbox (Literata, Amethyst, Creme). Rastersatz statt der Float-Spalten des Plugins; ohne Bild nur Text.
Mit body #page-container: stärker als dist/style.css des Plugins und Divis Slider-Textregeln */
body #page-container .atkp-wide-box { margin: 0; font-family: var(--pm-font-text); text-align: left; text-shadow: none; }
body #page-container .atkp-wide-box .atkp-box {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "label" "content" "bottom";
gap: var(--pm-space-3) var(--pm-space-6);
margin: 0;
padding: var(--pm-space-5) var(--pm-space-6);
border: var(--pm-border-hair) !important;
border-radius: var(--pm-radius-md);
background: var(--pm-color-bg); /* weiß: Produktfotos mit weißem Grund fügen sich ein (Korrekturrunde Journal) */
color: var(--pm-color-text);
}
body #page-container .atkp-wide-box .atkp-box::before {
content: "Produktempfehlung";
grid-area: label;
margin-bottom: calc(-1 * var(--pm-space-1));
font-size: var(--pm-text-xs);
font-weight: 700;
letter-spacing: var(--pm-tracking-caps);
line-height: 1.4;
text-transform: uppercase;
color: var(--pm-accent-text);
}
body #page-container .atkp-wide-box .atkp-box:has(.atkp-thumb img:not([src*="image-not-found"])) {
grid-template-columns: 140px minmax(0, 1fr);
grid-template-areas: "thumb label" "thumb content" "thumb bottom";
grid-template-rows: auto auto 1fr;
}
body #page-container .atkp-wide-box :is(.atkp-predicateheadline, .atkp-author, .atkp-bottom > .atkp-container) { display: none; }
body #page-container .atkp-wide-box .atkp-thumb { grid-area: thumb; float: none; width: auto; margin: 0; text-align: left; }
body #page-container .atkp-wide-box .atkp-thumb:has(img[src*="image-not-found"]) { display: none; } /* kein Produktbild vorhanden */
body #page-container .atkp-wide-box .atkp-image { display: block; width: 100%; max-width: 140px; height: auto; margin: 0; border-radius: var(--pm-radius-sm); background: #fff; }
body #page-container .atkp-wide-box .atkp-content { grid-area: content; margin: 0; padding: 0; }
body #page-container .atkp-wide-box .atkp-title {
display: block;
margin: 0 0 var(--pm-space-2);
font-family: var(--pm-font-display);
font-size: var(--pm-text-lg);
font-weight: 400;
line-height: 1.3;
color: var(--pm-color-heading);
text-decoration: none;
}
body #page-container .atkp-wide-box .atkp-title:hover { color: var(--pm-color-link-hover); text-decoration: underline; }
body #page-container .atkp-wide-box .atkp-description { margin: 0; font-size: var(--pm-text-sm); line-height: 1.6; color: var(--pm-color-text); }
body #page-container .atkp-wide-box .atkp-description :is(p, ul, ol) { margin: 0 0 var(--pm-space-2); padding-bottom: 0; font-size: inherit; line-height: inherit; color: inherit; }
body #page-container .atkp-wide-box .atkp-description :is(p, ul, ol):last-child { margin-bottom: 0; }
body #page-container .atkp-wide-box .atkp-description :is(ul, ol) { padding-left: 1.15em; }
body #page-container .atkp-wide-box .atkp-bottom { grid-area: bottom; margin: var(--pm-space-2) 0 0; text-align: left; }
body #page-container .atkp-wide-box .atkp-button {
display: inline-flex;
align-items: center;
gap: var(--pm-space-2);
width: auto;
min-height: var(--pm-touch-min);
margin: 0;
padding: 0.6rem 1.25rem;
border: 1px solid var(--pm-color-brand);
border-radius: var(--pm-radius-pill);
background: transparent;
box-shadow: none;
color: var(--pm-color-brand);
font-size: var(--pm-text-sm);
font-weight: var(--pm-weight-strong);
line-height: 1.3;
text-decoration: none;
transition: background-color var(--pm-transition), color var(--pm-transition);
}
body #page-container .atkp-wide-box .atkp-button::after { content: "→" / ""; }
body #page-container .atkp-wide-box .atkp-button:hover { background: var(--pm-color-brand); color: var(--pm-color-text-inverse); }
body #page-container .atkp-wide-box :is(.atkp-button, .atkp-title, .atkp-thumb a):focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
@media (max-width: 767px) {
body #page-container .atkp-wide-box .atkp-box { padding: var(--pm-space-4) var(--pm-space-5); }
body #page-container .atkp-wide-box .atkp-box:has(.atkp-thumb img:not([src*="image-not-found"])) { grid-template-columns: 1fr; grid-template-areas: "label" "thumb" "content" "bottom"; grid-template-rows: none; }
body #page-container .atkp-wide-box .atkp-image { max-width: 120px; }
body #page-container .atkp-wide-box .atkp-button { display: flex; justify-content: center; width: 100%; }
}
/* ======================================================================
Korrekturrunde Journal (2026-10-20): Metazeile mit Kategorie, Produktbox mit Preis, Kastensymbole, Tabellen,
nummerierte Listen, mobile Inhaltsleiste, Newsletter-Einladung (docs/migration/M2_8_KORREKTURRUNDE_JOURNAL.md)
====================================================================== */
/* Korrekturrunde Journal 2: deutsche Silbentrennung im Artikeltext (Sprache aus , Browser-Wörterbuch).
Nur Fließtext, Listen, Kastentexte und Zitat; nicht Tabellenzellen, Inhaltsverzeichnis-Links, Produktboxen, Buttons,
Navigation. Designfeedback 3 (gemessen in Chrome 155 bei 320 und 390 px, #611, #709, #797): Trennung ab 6 Zeichen, mindestens
3 Zeichen je Teil (vorher 10 4 4: viele Zeilen unter 85 % gefüllt); keine Reste aus zwei Buchstaben; linksbündig. */
.pm-migrated .entry-content .beitrag-row .et_pb_text_inner :is(p, li):not(:is(td, th) *),
.pm-migrated .entry-content .et_pb_testimonial_description_inner { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; overflow-wrap: break-word; word-break: normal; text-align: left; }
/* Überschriften im Artikel: nur sehr lange Wörter trennen (verhindert Überlauf schmaler Spalten) */
.pm-migrated .entry-content .beitrag-row :is(h2, h3, h4) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; }
/* Metazeile: jeder Teil bleibt zusammen, mobil Umbruch zwischen den Teilen */
.pm-article-meta__item { white-space: nowrap; }
@media (max-width: 380px) {
.pm-article-meta__item { white-space: normal; }
}
/* Produktbox: Abstände, Preiszeile, Button in allen Zuständen lesbar. affiliate-toolkit setzt per Inline-CSS
color: #111 !important auf .atkp-button; deshalb hier ebenfalls !important (sonst dunkle Schrift auf Amethyst). */
body #page-container .atkp-wide-box .atkp-box { gap: var(--pm-space-2) var(--pm-space-6); padding: var(--pm-space-6); }
body #page-container .atkp-wide-box .atkp-thumb { align-self: start; }
body #page-container .atkp-wide-box .atkp-image { border-radius: 0; background: transparent; }
body #page-container .atkp-wide-box .atkp-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-2) var(--pm-space-4); margin-top: var(--pm-space-3); }
body #page-container .atkp-wide-box .atkp-bottom > .atkp-container:empty { display: none; }
body #page-container .atkp-wide-box .atkp-saleprice { flex: 0 0 auto; margin: 0; color: var(--pm-color-heading) !important; font-size: var(--pm-text-lg); font-weight: var(--pm-weight-strong); line-height: 1.3; }
body #page-container .atkp-wide-box .pm-price-note { flex: 1 1 100%; order: 3; margin: 0; padding: 0; font-size: var(--pm-text-xs); line-height: 1.5; color: var(--pm-color-text-muted); }
body #page-container .atkp-wide-box .atkp-button,
body #page-container .atkp-wide-box .atkp-button:visited { color: var(--pm-color-brand) !important; background: var(--pm-color-bg); }
body #page-container .atkp-wide-box .atkp-button:is(:hover, :focus-visible, :active) { border-color: var(--pm-color-brand); background: var(--pm-color-brand); color: var(--pm-color-text-inverse) !important; text-decoration: none; }
body #page-container .atkp-wide-box .atkp-button:active { background: var(--pm-color-brand-deep); }
body #page-container .atkp-wide-box .atkp-button:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 3px; }
body #page-container .atkp-wide-box .pm-product-unavailable { margin: 0; padding: 0; font-size: var(--pm-text-sm); font-weight: var(--pm-weight-strong); color: var(--pm-color-text-muted); }
@media (max-width: 767px) {
body #page-container .atkp-wide-box .atkp-box { padding: var(--pm-space-5); }
body #page-container .atkp-wide-box .atkp-button { flex: 1 1 100%; }
}
/* Divi-Slider: Folieninhalt ohne Einblendeffekt (die Box erschien sonst zeitweise blass) */
.pm-migrated .entry-content .produkt-slider .et_pb_slide_description { animation: none !important; opacity: 1 !important; }
/* Kastensymbole (Tipp, Information, Frage, Warnung): lokale SVGs als Maske, Farbe aus Tokens; rein dekorativ.
Runde 4 (2026-10-20): Symbol und Titel bilden eine Kopfzeile. Das Symbol hängt links vor dem Titel und ist auf die
erste Titelzeile mittig ausgerichtet (1lh = Zeilenhöhe des Titels, gilt für H2, H3 und Absatztitel gleichermaßen);
weitere Titelzeilen beginnen bündig unter der ersten. Vorher stand es als Inline-Block mit fester Verschiebung
(-0,28 em) und damit je nach Schriftgröße unter der Textlinie. */
.pm-migrated .entry-content .pm-box .et_pb_text_inner > :first-child { position: relative; padding-left: calc(var(--pm-icon-box) + var(--pm-space-3)); }
/* einheitlicher Abstand Titel zu Text (H2, H3 und H4 als Kastentitel; H4 hatte bisher 0 px) */
.pm-migrated #left-area .entry-content .pm-box .et_pb_text_inner > :is(h2, h3, h4):first-child { margin-bottom: var(--pm-space-3); padding-bottom: 0; }
.pm-migrated .entry-content .pm-box .et_pb_text_inner > :first-child::before {
content: "";
position: absolute;
top: 0.2em; /* ohne lh-Unterstützung */
top: calc((1lh - var(--pm-icon-box)) / 2);
left: 0;
display: block;
width: var(--pm-icon-box);
height: var(--pm-icon-box);
margin: 0;
background-color: var(--pm-box-icon, var(--pm-color-brand));
-webkit-mask: var(--pm-box-mask) center / contain no-repeat;
mask: var(--pm-box-mask) center / contain no-repeat;
}
/* Kastentitel (H2/H3 als erstes Element in Info-, Experten- und Linkkästen) ohne Abstand oben: die Artikel-H2-Regel
(40 px) und Divis H3-Abstand erzeugten im Kasten Leerraum über dem Titel */
.pm-migrated #left-area .entry-content :is(.info-box, .expert-box, .link-box) .et_pb_text_inner > :first-child { margin-top: 0; padding-top: 0; }
/* H2 als Kastentitel optisch wie die übrigen Kastentitel (H3-Stufe), Auszeichnung unverändert; Titel und Links bilden
eine Einheit (Prüffall „Jetzt passende Socken finden“, #611) */
.pm-migrated #left-area .entry-content :is(.info-box, .expert-box, .link-box) h2 { font-size: var(--pm-text-article-h3); line-height: 1.25; margin-bottom: var(--pm-space-2); }
.pm-migrated .entry-content .pm-box--tip { --pm-box-mask: url("../img/icons/tipp.svg"); --pm-box-icon: var(--pm-accent-text); }
.pm-migrated .entry-content .pm-box--info { --pm-box-mask: url("../img/icons/information.svg"); --pm-box-icon: var(--pm-color-link); }
.pm-migrated .entry-content .pm-box--question { --pm-box-mask: url("../img/icons/frage.svg"); --pm-box-icon: var(--pm-color-link); }
.pm-migrated .entry-content .pm-box--warn { --pm-box-mask: url("../img/icons/warnung.svg"); --pm-box-icon: var(--pm-error-700); }
.pm-migrated .entry-content .expert-box.pm-box--warn:not(.attention) { border-left-color: var(--pm-error-700); }
/* Bedeutungstragende Zeichen in Kurzfassungen (⚠️, ❗, ✅ der Quelle) im gleichen Symbolsystem */
.pm-sym { display: inline-block; width: var(--pm-icon-inline); height: var(--pm-icon-inline); margin-right: 0.3em; vertical-align: -0.18em; background-color: currentColor; -webkit-mask: var(--pm-sym-mask) center / contain no-repeat; mask: var(--pm-sym-mask) center / contain no-repeat; }
.pm-sym--warn { --pm-sym-mask: url("../img/icons/warnung.svg"); color: var(--pm-error-700); }
.pm-sym--check { --pm-sym-mask: url("../img/icons/haken.svg"); color: var(--pm-color-success); }
/* Tabellen: Mindestbreiten statt schmaler Textstreifen; bei Platzmangel scrollt nur der Container */
.pm-table-wrap table.tablepress :is(th, td) { min-width: var(--pm-table-cell-min); }
.pm-table-wrap table.tablepress td:has(> :is(ul, ol)) { min-width: var(--pm-table-cell-min-list); }
.pm-table-wrap table.tablepress td :is(ul, ol) { margin: 0; padding: 0 0 0 1.1em; }
.pm-table-wrap table.tablepress td li { margin: 0 0 var(--pm-space-1); }
.pm-table-wrap { overscroll-behavior-x: contain; scrollbar-width: thin; }
.pm-table-frame { position: relative; margin: var(--pm-space-6) 0; }
.pm-table-frame > .pm-table-wrap { margin: 0; }
body #page-container .pm-table-frame .pm-table-hint { padding: 0; font-size: var(--pm-text-xs); line-height: 1.4; } /* stärker als .et_pb_text p */
.pm-table-hint { display: none; align-items: center; gap: var(--pm-space-2); margin: 0 0 var(--pm-space-2); font-size: var(--pm-text-xs); font-weight: var(--pm-weight-strong); line-height: 1.4; color: var(--pm-color-text-muted); transition: opacity var(--pm-transition); }
.pm-table-hint::after { content: ""; width: 1.1em; height: 1.1em; background-color: currentColor; -webkit-mask: url("../img/icons/pfeil-rechts.svg") center / contain no-repeat; mask: url("../img/icons/pfeil-rechts.svg") center / contain no-repeat; }
.pm-table-frame.is-scrollable .pm-table-hint { display: flex; }
.pm-table-frame.is-scrollable.is-end .pm-table-hint { opacity: 0.55; }
.pm-table-frame::before,
.pm-table-frame::after { content: ""; position: absolute; bottom: 1px; z-index: 1; width: 2.5rem; height: var(--pm-table-fade-h, 0); pointer-events: none; opacity: 0; transition: opacity var(--pm-transition); }
.pm-table-frame::before { left: 1px; border-radius: var(--pm-radius-md) 0 0 var(--pm-radius-md); background: linear-gradient(to right, var(--pm-color-bg), rgba(255, 255, 255, 0)); }
.pm-table-frame::after { right: 1px; border-radius: 0 var(--pm-radius-md) var(--pm-radius-md) 0; background: linear-gradient(to left, var(--pm-color-bg), rgba(255, 255, 255, 0)); }
.pm-table-frame.is-scrollable:not(.is-start)::before,
.pm-table-frame.is-scrollable:not(.is-end)::after { opacity: 1; }
/* Nummerierte Listen im Artikeltext: Nummer außen, mehrzeilige Einträge bündig, ruhiger Abstand; Beginn (start),
Reihenfolge und Verschachtelung bleiben über die nativen Listenzähler erhalten */
.pm-migrated #left-area .entry-content .beitrag-row .et_pb_text_inner ol { margin: 0 0 var(--pm-space-6); padding: 0 0 0 1.9em; list-style-position: outside; }
.pm-migrated #left-area .entry-content .beitrag-row .et_pb_text_inner ol > li { margin: 0 0 var(--pm-space-3); padding-left: 0.4em; line-height: var(--pm-leading-text); }
.pm-migrated #left-area .entry-content .beitrag-row .et_pb_text_inner ol > li:last-child { margin-bottom: 0; }
.pm-migrated #left-area .entry-content .beitrag-row .et_pb_text_inner ol > li::marker { color: var(--pm-color-heading); font-family: var(--pm-font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-migrated #left-area .entry-content .beitrag-row .et_pb_text_inner li :is(ol, ul) { margin: var(--pm-space-2) 0 0; padding-bottom: 0; }
.pm-migrated #left-area .entry-content .beitrag-row .et_pb_text_inner li > ol > li { margin-bottom: var(--pm-space-2); }
.pm-migrated #left-area .entry-content .beitrag-row :is(.info-box, .expert-box, .link-box) ol:last-child { margin-bottom: 0; }
.pm-migrated #left-area .entry-content .beitrag-row .inhaltsverzeichnis ol { padding-left: 0; } /* Inhaltsverzeichnis unverändert */
@media (max-width: 767px) {
.pm-migrated #left-area .entry-content .beitrag-row .et_pb_text_inner ol { padding-left: 1.6em; }
.pm-migrated #left-area .entry-content .beitrag-row .et_pb_text_inner ol > li { padding-left: 0.25em; }
}
/* Mobile Inhaltsleiste (navigation.js, initTocBar): unter dem fixierten Header, aktueller Abschnitt, aufklappbar */
.pm-toc-bar { position: fixed; right: 0; left: 0; z-index: 99; display: none; padding: 0 var(--pm-gutter); border-bottom: var(--pm-border-hair); background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 18px -16px rgba(36, 19, 47, 0.5); }
.pm-toc-bar.is-visible { display: block; }
.pm-toc-bar__toggle {
display: flex;
align-items: center;
gap: var(--pm-space-2);
width: 100%;
min-height: var(--pm-toc-bar-h);
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--pm-color-heading);
font-family: var(--pm-font-text);
font-size: var(--pm-text-sm);
line-height: 1.3;
text-align: left;
cursor: pointer;
}
.pm-toc-bar__toggle:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: -2px; }
.pm-toc-bar__icon,
.pm-toc-bar__chev { flex: none; width: 1.15rem; height: 1.15rem; background-color: currentColor; -webkit-mask: var(--pm-m) center / contain no-repeat; mask: var(--pm-m) center / contain no-repeat; }
.pm-toc-bar__icon { --pm-m: url("../img/icons/liste.svg"); color: var(--pm-accent-text); }
.pm-toc-bar__chev { --pm-m: url("../img/icons/chevron.svg"); margin-left: auto; transition: transform var(--pm-transition); }
.pm-toc-bar.is-open .pm-toc-bar__chev { transform: rotate(180deg); }
.pm-toc-bar__label { flex: none; font-size: var(--pm-text-xs); font-weight: var(--pm-weight-strong); letter-spacing: 0.06em; text-transform: uppercase; }
.pm-toc-bar__current { flex: 1; min-width: 0; overflow: hidden; color: var(--pm-color-text-muted); font-weight: var(--pm-weight-strong); text-overflow: ellipsis; white-space: nowrap; }
.pm-toc-bar__current:not(:empty)::before { content: "· "; color: var(--pm-color-border-strong); }
.pm-toc-bar__panel { position: relative; max-height: var(--pm-toc-panel-max, 60vh); margin: 0 calc(-1 * var(--pm-gutter)); padding: 0 var(--pm-gutter) var(--pm-space-3); overflow-y: auto; overscroll-behavior: contain; border-top: var(--pm-border-hair); background: var(--pm-color-bg); box-shadow: 0 18px 30px -18px rgba(36, 19, 47, 0.45); }
.pm-toc-bar.is-open { background: var(--pm-color-bg); }
.pm-toc-bar__panel[hidden] { display: none; }
.pm-toc-bar__panel ul { margin: 0; padding: 0; list-style: none; }
.pm-toc-bar__panel li { margin: 0; padding: 0; border-bottom: var(--pm-border-hair); list-style: none; }
.pm-toc-bar__panel li:last-child { border-bottom: 0; }
.pm-toc-bar__panel a { display: block; padding: var(--pm-space-3) 0 var(--pm-space-3) var(--pm-space-3); border-left: 3px solid transparent; color: var(--pm-color-text); font-family: var(--pm-font-text); font-size: var(--pm-text-sm); line-height: 1.4; text-decoration: none; }
.pm-toc-bar__panel a:visited { color: var(--pm-color-text); }
.pm-toc-bar__panel a:hover { color: var(--pm-color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pm-toc-bar__panel a[aria-current="location"] { border-left-color: var(--pm-accent); color: var(--pm-color-text); font-weight: var(--pm-weight-strong); }
.pm-toc-bar__panel a:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: -2px; }
@media (min-width: 981px) {
.pm-toc-bar { display: none !important; }
}
/* Sprungziele unter Header und Leiste (Wert setzt navigation.js) */
.pm-migrated .entry-content :is(.kappoint, [id]) { scroll-margin-top: var(--pm-jump-offset, calc(var(--pm-header-h-fixed) + var(--pm-space-6))); }
/* Newsletter: kompakte Einladung (Artikel und Seitenleiste) und Dialog mit der Formularvorschau */
.pm-nl-invite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-3) var(--pm-space-6); font-family: var(--pm-font-text); color: var(--pm-color-text); }
.pm-migrated .entry-content .pm-nl-invite p { margin: 0; padding: 0; }
body #page-container .pm-nl-invite .pm-nl-invite__title { flex: 1 1 100%; font-family: var(--pm-font-display); font-size: var(--pm-text-lg); line-height: 1.3; color: var(--pm-color-heading); }
body #page-container .pm-nl-invite .pm-nl-invite__text { flex: 1 1 18rem; font-size: var(--pm-text-sm); line-height: 1.55; color: var(--pm-color-text); }
.pm-nl-invite__action { flex: 0 0 auto; }
.pm-nl-invite__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--pm-touch-min);
padding: 0 var(--pm-space-6);
border: 1px solid var(--pm-color-brand);
border-radius: var(--pm-radius-pill);
background: var(--pm-color-brand);
color: var(--pm-color-text-inverse);
font-family: var(--pm-font-text);
font-size: var(--pm-text-sm);
font-weight: var(--pm-weight-strong);
cursor: pointer;
transition: background-color var(--pm-transition);
}
.pm-nl-invite__button:hover { background: var(--pm-color-brand-strong); }
.pm-nl-invite__button:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
.pm-nl-invite--aside { padding: var(--pm-space-5); border: var(--pm-border-hair); border-top: 2px solid var(--pm-accent); border-radius: var(--pm-radius-md); background: var(--pm-color-surface); }
.pm-nl-invite--aside .pm-nl-invite__action,
.pm-nl-invite--aside .pm-nl-invite__button { flex-basis: 100%; width: 100%; padding: 0 var(--pm-space-3); }
@media (max-width: 767px) {
.pm-nl-invite__action,
.pm-nl-invite__button { flex-basis: 100%; width: 100%; }
}
.pm-nl-dialog { width: min(36rem, calc(100vw - 2 * var(--pm-space-4))); max-height: calc(100dvh - 2 * var(--pm-space-4)); margin: auto; padding: var(--pm-space-8) var(--pm-space-6) var(--pm-space-6); border: 0; border-radius: var(--pm-radius-md); background: var(--pm-color-bg); color: var(--pm-color-text); box-shadow: var(--pm-shadow-lift); overflow-y: auto; }
.pm-nl-dialog::backdrop { background: rgba(27, 14, 36, 0.6); }
.pm-nl-dialog__close { position: absolute; top: var(--pm-space-2); right: var(--pm-space-2); display: grid; place-items: center; width: var(--pm-touch-min); height: var(--pm-touch-min); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pm-color-heading); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.pm-nl-dialog__close:hover { background: var(--pm-color-surface-tint); }
.pm-nl-dialog__close:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
.pm-nl-dialog .pm-newsletter p { margin: 0; padding: 0; }
.pm-nl-dialog .pm-newsletter .pm-newsletter__title { margin: 0 var(--pm-space-8) var(--pm-space-2) 0; font-family: var(--pm-font-display); font-size: var(--pm-text-xl); line-height: 1.25; color: var(--pm-color-heading); }
.pm-nl-dialog .pm-newsletter .pm-newsletter__intro { margin-bottom: var(--pm-space-5); font-size: var(--pm-text-sm); line-height: 1.6; }
.pm-nl-dialog .pm-newsletter .pm-newsletter__error { order: 3; flex-basis: 100%; font-size: var(--pm-text-xs); font-weight: 700; line-height: 1.5; color: var(--pm-color-error); }
.pm-nl-dialog .pm-newsletter .pm-newsletter__preview-note { margin-top: var(--pm-space-3); font-size: var(--pm-text-xs); line-height: 1.5; color: var(--pm-color-text-muted); }
.pm-nl-dialog .pm-newsletter .pm-newsletter__consent { margin-top: var(--pm-space-3); font-size: var(--pm-text-xs); line-height: 1.55; color: var(--pm-color-text-muted); }
.pm-nl-dialog .pm-newsletter .pm-newsletter__status:not(:empty) { margin-top: var(--pm-space-4); padding: var(--pm-space-3) var(--pm-space-4); border-left: 3px solid var(--pm-color-brand); border-radius: var(--pm-radius-sm); background: var(--pm-color-surface-tint); font-size: var(--pm-text-sm); font-weight: 700; line-height: 1.5; color: var(--pm-color-heading); }
@media (max-width: 767px) {
.pm-nl-dialog .pm-newsletter__button { flex-basis: 100%; order: 3; }
.pm-nl-dialog .pm-newsletter .pm-newsletter__error { order: 2; }
}
/* ======================================================================
Designfeedback Journal 3 (2026-10-20): Journalkopf, Themenfilter mit Scrollhinweisen, Kartentitel, Preis- und
Affiliate-Zeile, Fußnote, Quellenkasten (docs/migration/M2_8_KORREKTURRUNDE_JOURNAL.md, Abschnitt 12)
====================================================================== */
/* Journalkopf (Übersicht und Rubrikarchiv): „Fachjournal“ als kleine Dachzeile. Divis body #page-container .et_pb_text p
setzte sie bisher auf 17 px; andere Seiten behalten ihre Dachzeilen unverändert. */
body #page-container .pm-page-hero:has(~ .pm-journal-archive__list) .pm-eyebrow {
gap: var(--pm-space-2);
margin-bottom: var(--pm-space-3);
font-size: var(--pm-text-2xs);
font-weight: var(--pm-weight-strong);
line-height: 1.4;
letter-spacing: var(--pm-tracking-caps-soft);
}
body #page-container .pm-page-hero:has(~ .pm-journal-archive__list) .pm-eyebrow::before { width: 1.5rem; }
/* Bereichsüberschrift über Themenfilter und Artikelergebnissen */
body #page-container .pm-journal-topics__title { margin: 0 0 var(--pm-space-4); padding: 0; font-size: var(--pm-text-section-title); line-height: 1.25; }
.pm-rubriken ul { scroll-padding-inline: var(--pm-scroll-fade); }
.pm-rubriken a:focus-visible { box-shadow: var(--pm-focus-ring); }
/* Themenfilter: Verlauf und Pfeile nur, wenn Themen außerhalb des sichtbaren Bereichs liegen (navigation.js,
initTopicScroller: is-scrollable, is-start, is-end). Ohne Skript bleibt der Filter wie bisher wisch- und tabbar. */
.pm-rubriken__scroller { position: relative; }
.pm-rubriken__scroller::before,
.pm-rubriken__scroller::after { content: ""; position: absolute; top: var(--pm-rubriken-pad, 0px); z-index: 1; width: var(--pm-scroll-fade); height: var(--pm-touch-min); pointer-events: none; opacity: 0; transition: opacity var(--pm-transition); }
.pm-rubriken__scroller::before { left: 0; background: linear-gradient(to right, var(--pm-color-bg) 35%, rgba(255, 255, 255, 0)); }
.pm-rubriken__scroller::after { right: 0; background: linear-gradient(to left, var(--pm-color-bg) 35%, rgba(255, 255, 255, 0)); }
.pm-rubriken__scroller.is-scrollable:not(.is-start)::before,
.pm-rubriken__scroller.is-scrollable:not(.is-end)::after { opacity: 1; }
.pm-rubriken__arrow {
position: absolute;
top: calc(var(--pm-touch-min) / 2 + var(--pm-rubriken-pad, 0px));
z-index: 2;
display: none;
place-items: center;
width: var(--pm-scroll-arrow);
height: var(--pm-scroll-arrow);
margin: 0;
padding: 0;
border: var(--pm-border-hair);
border-radius: 50%;
background: var(--pm-color-bg);
color: var(--pm-color-heading);
box-shadow: var(--pm-shadow-soft);
cursor: pointer;
transform: translateY(-50%);
transition: background-color var(--pm-transition), border-color var(--pm-transition);
}
.pm-rubriken__arrow::before { content: ""; width: 1.125rem; height: 1.125rem; background-color: currentColor; -webkit-mask: url("../img/icons/chevron.svg") center / contain no-repeat; mask: url("../img/icons/chevron.svg") center / contain no-repeat; }
.pm-rubriken__arrow--prev { left: 0; }
.pm-rubriken__arrow--prev::before { transform: rotate(90deg); }
.pm-rubriken__arrow--next { right: 0; }
.pm-rubriken__arrow--next::before { transform: rotate(-90deg); }
.pm-rubriken__arrow:hover { border-color: var(--pm-color-border-strong); background: var(--pm-color-surface-tint); }
.pm-rubriken__arrow:focus-visible { outline: none; box-shadow: var(--pm-focus-ring); }
.pm-rubriken__scroller.is-scrollable:not(.is-start) .pm-rubriken__arrow--prev,
.pm-rubriken__scroller.is-scrollable:not(.is-end) .pm-rubriken__arrow--next { display: grid; }
@media (max-width: 599px) {
/* Der Filter läuft bis an den rechten Bildschirmrand: Verlauf und Pfeil dort ansetzen; oben und links Platz für den
Fokusrahmen der ersten Pille (sonst vom Scrollbereich abgeschnitten) */
.pm-rubriken__scroller { --pm-rubriken-pad: 6px; }
.pm-rubriken ul { margin-top: -6px; margin-left: -6px; padding-top: var(--pm-rubriken-pad) !important; padding-left: 6px !important; }
.pm-rubriken__scroller::after { right: calc(-1 * var(--pm-gutter)); }
.pm-rubriken__scroller::before { left: -6px; }
.pm-rubriken__arrow--next { right: calc(var(--pm-space-2) - var(--pm-gutter)); }
}
@media (prefers-reduced-motion: reduce) {
.pm-rubriken__scroller::before,
.pm-rubriken__scroller::after { transition: none; }
}
/* Produktbox: Preis groß, Zusatzangaben als kompakte Metazeile darunter (Teile bleiben zusammen, Umbruch zwischen den
Teilen); vollständiger Hinweis zu Preis und Verfügbarkeit über „Details“ (navigation.js, initPriceDetails) */
body #page-container .atkp-wide-box .pm-price-note { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: baseline; gap: 0 var(--pm-space-2); order: 3; margin: 0; padding: 0; font-size: var(--pm-text-xs); line-height: 1.55; color: var(--pm-color-text-muted); }
body #page-container .atkp-wide-box .pm-price-note__item { white-space: nowrap; }
body #page-container .atkp-wide-box .pm-price-note > :is(.pm-price-note__item, .pm-price-note__toggle) + :is(.pm-price-note__item, .pm-price-note__toggle)::before { content: "·"; display: inline-block; margin-right: var(--pm-space-2); color: var(--pm-color-text-muted); text-decoration: none; }
body #page-container .atkp-wide-box .pm-price-note__toggle { display: inline-flex; align-items: baseline; min-height: 24px; margin: 0; padding: 0; border: 0; background: none; color: var(--pm-color-link); font: inherit; cursor: pointer; }
body #page-container .atkp-wide-box .pm-price-note__toggle span { text-decoration: underline; text-underline-offset: 0.2em; }
body #page-container .atkp-wide-box .pm-price-note__toggle:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; border-radius: 2px; }
body #page-container .atkp-wide-box .pm-price-note__details { flex: 1 1 100%; margin: var(--pm-space-1) 0 0; padding: 0; font-size: var(--pm-text-xs); line-height: 1.55; color: var(--pm-color-text-muted); }
body #page-container .atkp-wide-box .pm-price-note__details[hidden] { display: none; }
body #page-container .atkp-wide-box .pm-aff-star { margin-left: 0.1em; }
/* „* Affiliate-Link“ direkt unter dem Kaufbutton (Korrekturrunde 2026-10-21; vorher rechts in der Kopfzeile der Box) */
body #page-container .atkp-wide-box .pm-aff-note { flex: 1 1 100%; order: 2; margin: calc(-1 * var(--pm-space-1)) 0 0; padding: 0; font-size: var(--pm-text-xs); line-height: 1.4; color: var(--pm-color-text-muted); }
@media (max-width: 599px) {
/* schmal: Steuerhinweis eine Zeile, Zeitstempel und „Details“ darunter; ohne Trennpunkte (kein Punkt am Zeilenanfang) */
body #page-container .atkp-wide-box .pm-price-note { gap: 0 var(--pm-space-3); }
body #page-container .atkp-wide-box .pm-price-note > :is(.pm-price-note__item, .pm-price-note__toggle) + :is(.pm-price-note__item, .pm-price-note__toggle)::before { content: none; }
body #page-container .atkp-wide-box .pm-price-note > .pm-price-note__item:first-child { flex-basis: 100%; }
}
/* Gemeinsame Erläuterung der Sternchen am Artikelende: ruhig, ohne Kastenfläche */
.pm-migrated .entry-content .pm-affiliate-footnote { margin-top: var(--pm-space-8); margin-bottom: var(--pm-space-6); padding: var(--pm-space-3) 0 0; border: 0; border-top: var(--pm-border-hair); border-radius: 0; background: none; font-size: var(--pm-text-sm); line-height: 1.6; color: var(--pm-color-text-muted); }
.pm-migrated .entry-content .pm-affiliate-footnote p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
/* Quellenkasten: weniger Innenabstand und Listeneinzug, mehr Textbreite; lange Links brechen innerhalb des Kastens um */
.pm-migrated .entry-content .info-box.pm-box--sources { padding-right: var(--pm-space-5); padding-left: var(--pm-space-5); }
.pm-migrated #left-area .entry-content .beitrag-row .pm-box--sources .et_pb_text_inner :is(ol, ul) { padding-left: 1.5em; }
.pm-migrated #left-area .entry-content .beitrag-row .pm-box--sources .et_pb_text_inner :is(ol, ul) > li { padding-left: 0.2em; }
@media (max-width: 767px) {
.pm-migrated .entry-content .info-box.pm-box--sources { padding: var(--pm-space-4) var(--pm-space-3) var(--pm-space-4) var(--pm-space-4); }
.pm-migrated #left-area .entry-content .beitrag-row .pm-box--sources .et_pb_text_inner :is(ol, ul) { padding-left: 1.25em; }
.pm-migrated #left-area .entry-content .beitrag-row .pm-box--sources .et_pb_text_inner :is(ol, ul) > li { padding-left: 0.1em; }
}
/* Lange Adressen im Artikeltext: Umbruch nur, wenn ein Link sonst über die Zeile hinausliefe (kein Einfluss auf Wörter) */
.pm-migrated .entry-content .beitrag-row .et_pb_text_inner :is(p, li) a { overflow-wrap: anywhere; }
/* TablePress (Premium, ab 2026-10-20): Darstellung wie das bisherige Theme-Rendering. TablePress-Variablen auf Tokens,
kein Außenabstand der Tabelle im Scrollrahmen; Bedienzeile (Kopieren, Excel, PDF) unter dem Rahmen (navigation.js). */
.pm-table-wrap .tablepress { --text-color: var(--pm-color-text); --head-text-color: var(--pm-color-heading); --head-bg-color: var(--pm-color-surface); --odd-bg-color: var(--pm-color-bg); --even-bg-color: var(--pm-color-surface); --border-color: var(--pm-color-border); --padding: var(--pm-space-3) var(--pm-space-4); margin: 0; }
.pm-table-wrap .dt-container, .pm-table-wrap .dt-layout-row, .pm-table-wrap .dt-layout-cell { margin: 0; padding: 0; }
.pm-table-controls { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); margin: calc(-1 * var(--pm-space-3)) 0 var(--pm-space-6); }
.pm-table-controls .dt-layout-row, .pm-table-controls .dt-layout-cell { margin: 0; padding: 0; }
.pm-table-controls .dt-buttons { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); }
.pm-table-controls .dt-button { display: inline-flex; align-items: center; min-height: var(--pm-touch-min); margin: 0; padding: 0 var(--pm-space-4); border: var(--pm-border-hair); border-radius: var(--pm-radius-pill); background: var(--pm-color-bg); color: var(--pm-color-heading); font: inherit; font-size: var(--pm-text-sm); font-weight: var(--pm-weight-strong); cursor: pointer; }
.pm-table-controls .dt-button:hover { border-color: var(--pm-color-border-strong); background: var(--pm-color-surface-tint); }
.pm-table-controls .dt-button:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
/* ======================================================================
Korrekturrunde 2026-10-21: mobiler Artikelkopf, Typografie, Links, Zitat, Quellen, Inhaltsbilder, Produktbox,
Newsletter-Karte (docs/migration/KORREKTURRUNDE_2026-10-21.md). Desktop bleibt, wo nicht anders vermerkt, unverändert.
====================================================================== */
/* Silbentrennung: auch Artikel-H1 und Produkttitel (bisher hyphens: manual). Lange Wörter erst ab 10 Zeichen, je Teil
mindestens 4; Sprache aus . Preise, Buttons, Navigation und Metazeile bleiben ohne Trennung. */
body.pm-migrated .et_post_meta_wrapper h1.entry-title,
body #page-container .atkp-wide-box .atkp-title { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
/* lange Adressen in Quellen- und Linkkästen: Umbruch innerhalb der URL statt Überlauf */
.pm-migrated .entry-content :is(.pm-box--sources, .link-box) a { overflow-wrap: anywhere; }
/* Redaktionelle Textlinks dauerhaft unterstrichen (der Lilaton allein reicht nicht). Nur Links ohne eigene Klasse im
Fließtext, in Listen und Kästen; nicht Buttons, Inhaltsverzeichnis, Produktboxen, Überschriften, Navigation. */
.pm-migrated .entry-content .beitrag-row .et_pb_text_inner :is(p, li, td) a:not([class]):not(.inhaltsverzeichnis a),
.pm-prose :is(p, li) a:not([class]) {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: currentColor;
}
.pm-migrated .entry-content .beitrag-row .et_pb_text_inner :is(p, li, td) a:not([class]):hover { text-decoration-thickness: 2px; }
/* Inhaltsbilder: kleiner Radius passend zur Logoplatte des Wasserzeichens (vorher 14 px); Porträts bleiben rund,
Beitragsbild und Produktbilder unverändert */
.single-post .entry-content .beitrag-row img:not(.atkp-image):not([class*="portrait"]):not(.et_pb_testimonial_portrait img),
.pm-migrated .entry-content .et_pb_image img { border-radius: var(--pm-radius-sm); }
@media (max-width: 767px) {
/* Artikelkopf kompakter: H1 maßvoll kleiner (Desktop unverändert), weniger Abstand zu Metazeile und Inhalt */
body.pm-migrated .et_post_meta_wrapper h1.entry-title { margin-bottom: var(--pm-space-2); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.0625rem); line-height: 1.14; }
body.pm-migrated #page-container .entry-content > .pm-article-meta { margin-bottom: var(--pm-space-5); padding-bottom: var(--pm-space-3); font-size: var(--pm-text-xs); line-height: 1.5; }
.pm-article-meta__item { white-space: normal; }
.pm-article-meta__item:has(.pm-article-meta__reading), .pm-article-meta__reading { white-space: nowrap; }
/* Artikel-H3 etwas größer (vorher 20 px bei 390 px), H2 bleibt 24,6 px: Hierarchie bleibt sichtbar. Gilt nur für
Zwischenüberschriften im Text, nicht für Produkttitel, Kastentitel oder Journalkarten. */
.single-post .entry-content .beitrag-row .et_pb_text_inner > h3 { font-size: 1.3125rem; line-height: 1.28; }
/* Autorenbox: Name größer, ruhige Zeilenhöhe */
.pm-author .pm-author__name { font-size: 1.5rem; line-height: 1.25; }
/* Zitat: Innenabstand vor allem seitlich verringern (vorher 32 px rundum), Schrift unverändert */
body.pm-migrated .entry-content .et_pb_testimonial { padding: var(--pm-space-6) var(--pm-space-4) var(--pm-space-5) !important; }
body.pm-migrated .entry-content .et_pb_testimonial .et_pb_testimonial_portrait { margin-bottom: var(--pm-space-4) !important; }
/* Newsletter-Karten (frühere Download-Karten und Einladungen): weniger Innenabstand und Höhe */
.pm-migrated .entry-content :is(.newsletter-content-container, .newsletter-modul, .ebook-banner) { padding: var(--pm-space-4); }
}
/* Quellenkasten: Schrift wie Zusatztexte (15 px, eine Schriftfamilie, gleiche Zeilenhöhe), Titelzeile fett */
.pm-migrated #left-area .entry-content .beitrag-row .pm-box--sources .et_pb_text_inner :is(p, li, h2, h3, h4) { font-family: var(--pm-font-text); font-size: var(--pm-text-sm); line-height: 1.55; }
.pm-migrated #left-area .entry-content .beitrag-row .pm-box--sources .et_pb_text_inner > :first-child { font-weight: var(--pm-weight-strong); color: var(--pm-color-heading); }
.pm-migrated #left-area .entry-content .beitrag-row .pm-box--sources .et_pb_text_inner p { padding-bottom: var(--pm-space-2); }
.pm-migrated #left-area .entry-content .beitrag-row .pm-box--sources .et_pb_text_inner li { margin-bottom: var(--pm-space-1); }
/* Newsletter-Karte: Überschrift wie eine redaktionelle Zwischenüberschrift (kein Link), Aktion als Button */
body #page-container .pm-nl-invite--card .pm-nl-invite__title { font-size: var(--pm-text-article-h3); line-height: 1.28; }
.pm-migrated .entry-content :is(.newsletter-content-container, .newsletter-modul, .ebook-banner):has([data-pm-nl-removed]) { display: none; }
/* Produktbox mobil: größeres, zentriertes Produktbild ohne Beschnitt, mehr Abstand unter „Produktempfehlung“, größerer
Titel; Bild, Titel, Text, Preis und Button als geordnete Einheit */
@media (max-width: 767px) {
body #page-container .atkp-wide-box .atkp-box { gap: var(--pm-space-3); padding: var(--pm-space-4); }
body #page-container .atkp-wide-box .atkp-box::before { margin-bottom: var(--pm-space-1); }
body #page-container .atkp-wide-box .atkp-thumb { justify-self: center; width: 100%; text-align: center; }
body #page-container .atkp-wide-box .atkp-thumb a { display: block; }
body #page-container .atkp-wide-box .atkp-image { width: auto; max-width: min(100%, 240px); max-height: 220px; margin: 0 auto; object-fit: contain; }
body #page-container .atkp-wide-box .atkp-title { margin-bottom: var(--pm-space-2); font-size: 1.25rem; line-height: 1.3; }
body #page-container .atkp-wide-box .atkp-bottom { margin-top: var(--pm-space-1); }
body #page-container .atkp-wide-box .pm-aff-note { margin-top: calc(-1 * var(--pm-space-1)); text-align: center; }
body #page-container .atkp-wide-box .pm-price-note { justify-content: center; text-align: center; }
}
/* Einwilligung (inc/consent.php): Platzhalter für Amazon-Produktbilder, Footer-Knopf und Dialog „Datenschutz-Einstellungen“ */
.pm-ext-image { position: relative; display: block; }
.pm-ext-image:not(.is-loaded) { display: grid; place-items: center; width: 140px; aspect-ratio: 1; border-radius: var(--pm-radius-sm); background: var(--pm-color-surface); }
.pm-ext-image:not(.is-loaded) img { position: absolute; inset: 0; width: 1px !important; height: 1px !important; opacity: 0; }
.pm-ext-image.is-loaded .pm-ext-image__gate { display: none; }
.pm-ext-image__gate { display: grid; justify-items: center; gap: var(--pm-space-1); padding: var(--pm-space-2); text-align: center; }
body #page-container .pm-ext-image__btn { min-height: var(--pm-touch-min); padding: 0.4rem 0.9rem; border: 1px solid var(--pm-color-brand); border-radius: var(--pm-radius-pill); background: var(--pm-color-bg); color: var(--pm-color-brand); font: inherit; font-size: var(--pm-text-xs); font-weight: var(--pm-weight-strong); line-height: 1.3; cursor: pointer; }
body #page-container .pm-ext-image__btn:hover { background: var(--pm-color-brand); color: var(--pm-color-text-inverse); }
.pm-ext-image__btn:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
.pm-ext-image__note { font-size: var(--pm-text-2xs); line-height: 1.3; color: var(--pm-color-text-muted); }
@media (max-width: 767px) {
.pm-ext-image:not(.is-loaded) { width: min(100%, 240px); margin: 0 auto; aspect-ratio: 4 / 3; }
}
.pm-footer__consent { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.pm-footer__consent:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pm-consent-dialog { width: min(92vw, 32rem); padding: var(--pm-space-6); border: 0; border-radius: var(--pm-radius-md); box-shadow: var(--pm-shadow-lift); color: var(--pm-color-text); font-family: var(--pm-font-text); }
.pm-consent-dialog::backdrop { background: rgba(27, 2, 25, 0.45); }
.pm-consent-dialog__title { margin: 0 var(--pm-space-8) var(--pm-space-4) 0; font-family: var(--pm-font-display); font-size: var(--pm-text-lg); color: var(--pm-color-heading); }
.pm-consent-dialog__row { display: grid; gap: var(--pm-space-2); padding: var(--pm-space-4) 0; border-top: var(--pm-border-hair); }
.pm-consent-dialog__row p { margin: 0; padding: 0; font-size: var(--pm-text-sm); line-height: 1.5; }
.pm-consent-dialog__hint { display: block; margin-top: var(--pm-space-1); font-size: var(--pm-text-xs); color: var(--pm-color-text-muted); }
.pm-consent-dialog__btn { justify-self: start; min-height: var(--pm-touch-min); padding: 0.5rem 1.1rem; border: 1px solid var(--pm-color-brand); border-radius: var(--pm-radius-pill); background: var(--pm-color-bg); color: var(--pm-color-brand); font: inherit; font-size: var(--pm-text-sm); font-weight: var(--pm-weight-strong); cursor: pointer; }
.pm-consent-dialog__btn[hidden] { display: none; }
.pm-consent-dialog__close { position: absolute; top: var(--pm-space-3); right: var(--pm-space-3); width: var(--pm-touch-min); height: var(--pm-touch-min); border: 0; border-radius: 50%; background: none; color: var(--pm-color-heading); font-size: 1.5rem; cursor: pointer; }
:is(.pm-consent-dialog__btn, .pm-consent-dialog__close):focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
.pm-consent-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); }
.pm-consent-dialog__btn[aria-pressed="true"] { background: var(--pm-color-brand); color: var(--pm-color-text-inverse); }
/* Statistik-Banner (consent.js, ADR-062): kompakt am unteren Rand, Zustimmen und Ablehnen gleichwertig; unter dem Mobilmenü */
.pm-consent-banner { position: fixed; right: var(--pm-space-4); bottom: var(--pm-space-4); left: var(--pm-space-4); z-index: 100000; display: grid; gap: var(--pm-space-2); max-width: 44rem; max-height: calc(100vh - 2 * var(--pm-space-4)); margin: 0 auto; padding: var(--pm-space-5) var(--pm-space-6); overflow-y: auto; border: 1px solid var(--pm-color-border); border-radius: var(--pm-radius-md); background: var(--pm-color-bg); box-shadow: var(--pm-shadow-lift); color: var(--pm-color-text); font-family: var(--pm-font-text); }
.pm-consent-banner p { margin: 0; padding: 0; }
.pm-consent-banner__title { font-family: var(--pm-font-display); font-size: var(--pm-text-lg); line-height: var(--pm-leading-snug); color: var(--pm-color-heading); }
.pm-consent-banner__text { font-size: var(--pm-text-sm); line-height: 1.5; }
.pm-consent-banner__text a { color: var(--pm-color-link); text-decoration: underline; text-underline-offset: 0.2em; }
.pm-consent-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-2) var(--pm-space-3); margin-top: var(--pm-space-2); }
.pm-consent-banner__btn { min-height: var(--pm-touch-min); padding: 0.5rem 1.25rem; border: 1px solid var(--pm-color-brand); border-radius: var(--pm-radius-pill); background: var(--pm-color-brand); color: var(--pm-color-text-inverse); font: inherit; font-size: var(--pm-text-sm); font-weight: var(--pm-weight-strong); line-height: 1.3; cursor: pointer; }
.pm-consent-banner__btn:hover { background: var(--pm-color-brand-strong); }
.pm-consent-banner__btn--link { padding-inline: var(--pm-space-2); border-color: transparent; background: none; color: var(--pm-color-link); text-decoration: underline; text-underline-offset: 0.2em; }
.pm-consent-banner__btn--link:hover { background: none; color: var(--pm-color-link-hover); }
:is(.pm-consent-banner__btn, .pm-consent-banner__text a):focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
@media (max-width: 599px) {
.pm-consent-banner { right: var(--pm-space-2); bottom: var(--pm-space-2); left: var(--pm-space-2); padding: var(--pm-space-4); }
.pm-consent-banner__btn:not(.pm-consent-banner__btn--link) { flex: 1 1 8rem; }
}
.pm-legal p:empty { display: none; }
/* ---------- Autorenprofil /de/autoren// und Übersicht (inc/author-profiles.php, autorenprofil.php) ---------- */
/* Seite ohne Builder-Inhalt: Divi lädt sein Raster-CSS nicht, Rows daher hier zentrieren (Breite aus base.css) */
.pm-profile-page .et_pb_row { margin-left: auto; margin-right: auto; }
.et_pb_section.pm-profile { padding: var(--pm-space-12) 0 var(--pm-space-section); }
.pm-profile .et_pb_row { padding-top: 0; }
.pm-profile__intro { display: grid; gap: var(--pm-space-8); align-items: start; }
.pm-profile__portrait { margin: 0; }
.pm-profile__img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--pm-radius-arch); }
.pm-profile__text { max-width: 720px; }
.pm-profile__text h2, .pm-profile__articles h2 { margin: var(--pm-space-8) 0 var(--pm-space-3); padding: 0; font-size: var(--pm-text-xl); }
.pm-profile__text h2:first-child { margin-top: 0; }
.pm-profile__text p { padding: 0; margin: 0 0 var(--pm-space-3); }
.pm-profile__list, .pm-profile__posts { margin: 0; padding: 0 0 0 1.2em; }
.pm-profile__list li, .pm-profile__posts li { margin: 0 0 var(--pm-space-2); padding: 0; line-height: 1.5; }
.pm-profile__links { font-size: var(--pm-text-sm); }
.pm-profile__articles { margin-top: var(--pm-space-12); padding-top: var(--pm-space-8); border-top: var(--pm-border-hair); }
.pm-profile__group { margin-top: var(--pm-space-6); }
.pm-profile__group h3 { margin: 0 0 var(--pm-space-3); padding: 0; font-size: var(--pm-text-lg); }
.pm-profile__posts { columns: 1; }
.pm-profile__cards { display: grid; gap: var(--pm-space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pm-profile-card { padding: var(--pm-space-6); border: var(--pm-border-hair); border-radius: var(--pm-radius-md); background: var(--pm-color-surface); }
.pm-profile-card__img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin-bottom: var(--pm-space-4); }
.pm-profile-card__name { margin: 0; padding: 0; font-size: var(--pm-text-xl); }
.pm-profile-card__role { margin: var(--pm-space-1) 0 0; padding: 0; color: var(--pm-color-text-muted); font-size: var(--pm-text-sm); }
.pm-quote-author { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.pm-author__name a { color: inherit; text-decoration: none; }
.pm-author__name a:hover, .pm-author__name a:focus-visible { text-decoration: underline; }
@media (min-width: 768px) {
.pm-profile__intro { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: var(--pm-space-12); }
.pm-profile__posts { columns: 2; column-gap: var(--pm-space-10); }
.pm-profile__posts li { break-inside: avoid; }
}