/* =============================================================================
Praxis Sarah Flannery Meister · Design-Snippet „Editorial" · Fassung 2
-----------------------------------------------------------------------------
Grund #EDECE8 (warmes Grau) und weiße „Papier"-Flächen im Wechsel, dunkler
Fuß. Praxisblau #004D9E nur für Telefon, Buttons, Links. Rot nur für 112.
IBM Plex Sans 300/400/500/600 · IBM Plex Sans Condensed 500 (Labels).
Zwölferraster, 32 px Abstand; Bilder brechen rechts aus dem Raster aus.
Nur WordPress-Core-Blöcke. Einbau: Customizer → Zusätzliches CSS oder
style.css des Child-Themes. Zusätzlich: body { background:#EDECE8 }
============================================================================= */
/* ---------- 1. Tokens ------------------------------------------------------ */
:root{
--pm-bg: #EDECE8;
--pm-paper: #FFFFFF;
--pm-ink: #1A1D20;
--pm-body: #33373B;
--pm-muted: #64655D; /* warm getoent, 4,99:1 auf Grund / 5,90:1 auf Papier */
--pm-line: #D3D1CB;
--pm-line-p: #E4E2DC; /* Linie auf Papier */
--pm-tint: #DCDBD4;
--pm-blue: #004D9E;
--pm-blue-dk:#003B7A;
--pm-blue-lt:#E8EFF7; /* helle Tönung für Bänder */
--pm-blue-md:#CFDDF0; /* Linien auf der Tönung */
--pm-navy: #0C2C50; /* Fuß */
--pm-muted-b:#A9BBD2; /* gedämpfter Text auf Nachtblau, 7,19:1 */
--pm-red: #B3261E;
--pm-field: #93908A; /* Formularrahmen, 3,18:1 gegen Weiss (WCAG 1.4.11) */
--pm-ph: #6C6C66; /* Platzhaltertext, 5,28:1 gegen Weiss */
--pm-map: #4F514A; /* Text auf der Kartenflaeche, 5,9:1 gegen Tint */
--pm-shadow: 0 1px 2px rgba(26,29,32,.05), 0 10px 28px -14px rgba(12,44,80,.30);
--pm-ease: cubic-bezier(.32,.72,0,1); /* exponentielles Ausklingen */
--pm-r: 4px;
--pm-r-img: 6px;
--pm-font: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--pm-font-c: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
--pm-col: 81.33px; /* Rasterspalte bei 1328 px Inhaltsbreite */
}
/* ---------- 1b. Schriften selbst hosten (empfohlen) ------------------------ */
/* IBM Plex Sans 300/400/500/600 + Condensed 500 als .woff2 ins Child-Theme.
Kein auf fonts.googleapis.com (LG München I, 3 O 17493/20). */
/*
@font-face{ font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-300.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face{ font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"IBM Plex Sans Condensed"; src:url("fonts/ibm-plex-sans-condensed-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
*/
/* ---------- 2. Grundgerüst ------------------------------------------------- */
.pm-page{
font-family: var(--pm-font); color: var(--pm-body);
font-size: 1.0625rem; line-height: 1.6; background: var(--pm-bg); max-width: none;
-webkit-font-smoothing: antialiased;
color-scheme: light; caret-color: var(--pm-blue); accent-color: var(--pm-blue);
}
/* Flaechen, die der Browser stellt, gehoeren auch zum Entwurf. */
html{ scrollbar-color: #B9B7B0 var(--pm-bg); }
.pm-page li::marker{ color: var(--pm-muted); }
.pm-page :target{ scroll-margin-top: 96px; }
.pm-page h1, .pm-page h2, .pm-page h3, .pm-page [id]{ scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } }
/* Sprunglink zum Inhalt (im Theme als erstes Element einfuegen:
Zum Inhalt springen) */
.pm-skip{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%); }
.pm-skip:focus{
position:fixed; top:16px; left:16px; z-index:9999; width:auto; height:auto; clip-path:none;
background: var(--pm-blue); color:#fff; padding: 12px 18px; border-radius: var(--pm-r);
font-family: var(--pm-font); font-size:.9375rem; font-weight:600; text-decoration:none;
}
.pm-page *{ box-sizing: border-box; }
.pm-page ::selection{ background: var(--pm-blue); color:#fff; }
.pm-page a{ color: var(--pm-blue); text-decoration: none; }
.pm-page a:hover{ color: var(--pm-blue-dk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pm-page a:focus-visible{ outline: 2px solid var(--pm-blue); outline-offset: 3px; }
.pm-page p{ margin: 0 0 1rem; text-wrap: pretty; }
.pm-page p:last-child{ margin-bottom: 0; }
/* Inhaltsbreite */
.pm-wrap{ padding: 0 56px; }
.pm-wrap > *{ max-width: 1328px; margin-left:auto; margin-right:auto; }
/* Papierflächen (weiß, volle Breite) */
.pm-paper{ background: var(--pm-paper); }
.pm-paper > *{ max-width: 1328px; margin-left:auto; margin-right:auto; }
.pm-paper{ padding-left: 56px; padding-right: 56px; }
/* Abschnitte */
.pm-section{ padding: 96px 0; border-bottom: 1px solid var(--pm-line); }
.pm-section--paper{ padding: 96px 0; }
.pm-section--last{ border-bottom: 0; }
/* Raster-Spalten */
.pm-page .wp-block-columns{ display:flex; flex-wrap:wrap; gap: 32px; margin:0; align-items:flex-start; }
.pm-page .wp-block-column{ flex: 1 1 0; min-width:0; margin:0; }
@media (min-width: 782px){
.pm-page .wp-block-columns{ flex-wrap: nowrap; }
.pm-page .wp-block-column[style*="flex-basis"]{ flex-grow: 0; }
/* Spaltenabstand aus der Prozentbreite herausrechnen (sonst 100 % + 32 px) */
.pm-page .wp-block-column[style*="flex-basis:25%"]{ flex-basis: calc(25% - 24px); }
.pm-page .wp-block-column[style*="flex-basis:75%"]{ flex-basis: calc(75% - 8px); }
.pm-page .wp-block-column[style*="flex-basis:58.33%"]{ flex-basis: calc(58.33% - 19px); }
.pm-page .wp-block-column[style*="flex-basis:41.67%"]{ flex-basis: calc(41.67% - 13px); }
}
.pm-page .wp-block-columns.pm-end{ align-items: flex-end; }
.pm-page .wp-block-columns.pm-center{ align-items: center; }
/* ---------- 3. Typografie -------------------------------------------------- */
.pm-page h1, .pm-page h2, .pm-page h3{
font-family: var(--pm-font); color: var(--pm-ink); margin: 0; text-wrap: balance;
-webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; /* lange Komposita brechen sauber */
}
.pm-page h1{
font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); font-weight: 300;
line-height: 1.02; letter-spacing: -0.025em;
}
.pm-page h1 strong{ font-weight: 500; color: var(--pm-blue); }
.pm-page h2{ font-size: clamp(1.625rem, 1.35rem + .9vw, 2.125rem); font-weight: 400; line-height: 1.14; letter-spacing: -0.02em; }
.pm-page h3{ font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin-bottom: .4em; }
.pm-page .pm-label{
font-family: var(--pm-font-c); font-size: .8125rem; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; color: var(--pm-blue); margin: 0 0 14px;
}
.pm-page .pm-label--grey{ color: var(--pm-muted); }
.pm-page .pm-lead{ font-size: 1.1875rem; line-height: 1.55; color: var(--pm-body); }
.pm-page .pm-lead--ink{ color: var(--pm-ink); }
.pm-page .pm-sub{ font-size: .875rem; line-height: 1.5; color: var(--pm-muted); }
.pm-page .pm-ink{ color: var(--pm-ink); }
.pm-page .pm-intro{ max-width: 34rem; }
.pm-page .pm-listhead{
font-family: var(--pm-font-c); font-size: .8125rem; font-weight: 500; letter-spacing: .14em;
text-transform: uppercase; color: var(--pm-blue);
padding-bottom: 10px; border-bottom: 1px solid var(--pm-ink); margin: 0;
}
.pm-page .pm-textlink a, .pm-page a.pm-textlink{
display: inline-block; font-size: .9375rem; font-weight: 600; color: var(--pm-ink);
border-bottom: 1px solid var(--pm-ink); padding-bottom: 2px; text-decoration: none;
}
.pm-page .pm-textlink a, .pm-page a.pm-textlink{ transition: color .18s var(--pm-ease), border-color .18s var(--pm-ease); }
.pm-page .pm-textlink a:hover, .pm-page a.pm-textlink:hover{ color: var(--pm-blue); border-color: var(--pm-blue); text-decoration:none; }
/* ---------- 4. Buttons ----------------------------------------------------- */
.pm-page .wp-block-buttons{ display:flex; flex-wrap:wrap; gap: 24px; align-items:center; margin: 28px 0 0; }
.pm-page .wp-block-button__link{
display:inline-flex; align-items:center; gap:10px; height: 52px; padding: 0 22px;
border-radius: var(--pm-r); background: var(--pm-blue); color:#fff;
font-family: var(--pm-font); font-size: .9375rem; font-weight: 600; line-height:1; letter-spacing: .01em;
text-decoration:none; border:0; white-space:nowrap;
box-shadow: 0 1px 2px rgba(0,58,120,.22);
transition: background .2s var(--pm-ease), box-shadow .2s var(--pm-ease), transform .12s var(--pm-ease);
}
.pm-page .wp-block-button__link:hover{
background: var(--pm-blue-dk); color:#fff; text-decoration:none;
box-shadow: 0 2px 10px -2px rgba(0,58,120,.42);
}
.pm-page .wp-block-button__link:active{ transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,58,120,.22); }
.pm-page .wp-block-button__link:focus-visible{ outline: 2px solid var(--pm-blue); outline-offset: 3px; }
.pm-page .pm-btn-text .wp-block-button__link{
background: transparent; color: var(--pm-ink); padding: 0 0 2px; height:auto; border-radius:0;
border-bottom: 1px solid var(--pm-ink); box-shadow:none;
transition: color .18s var(--pm-ease), border-color .18s var(--pm-ease);
}
.pm-page .pm-btn-text .wp-block-button__link:active{ transform:none; box-shadow:none; }
.pm-page .pm-btn-text .wp-block-button__link:hover{ background:transparent; color: var(--pm-blue); border-color: var(--pm-blue); }
/* ---------- 5. Hero: Text links, Bild bricht rechts aus -------------------- */
/* Ein Spalten-Block, per CSS zum Vollbreiten-Raster:
[Rand] [12 Inhaltsspalten] [Rand]. Text: Spalten 1–5, Bild: 7 bis Rand. */
.pm-page .wp-block-columns.pm-hero{
display: grid !important;
grid-template-columns: minmax(20px, 1fr) repeat(12, minmax(0, var(--pm-col))) minmax(20px, 1fr);
gap: 0 32px; align-items: stretch; background: var(--pm-paper);
margin: 0; max-width: none;
}
.pm-page .pm-hero > .pm-hero-text{
grid-column: 2 / span 5; padding: 88px 0 72px; display:flex; flex-direction:column; justify-content:center;
}
/* Das Bild liegt absolut im Feld. Sonst bestimmt seine natuerliche Hoehe die
Zeilenhoehe des Rasters: ein Hochformat trieb den Kopf auf ueber 1000 px und
der kurze Text schwamm in der Mitte einer leeren Spalte. */
.pm-page .pm-hero > .pm-hero-media{
grid-column: 8 / -1; position: relative; min-height: 620px; overflow: hidden;
background: var(--pm-tint);
}
.pm-page .pm-hero > .pm-hero-media .wp-block-image,
.pm-page .pm-hero > .pm-hero-media figure{ position:absolute; inset:0; margin:0; height:auto; }
.pm-page .pm-hero > .pm-hero-media img{
display:block; width:100%; height:100%; min-height:0; object-fit: cover; object-position: center 30%;
background: var(--pm-tint);
}
.pm-page .pm-hero--low > .pm-hero-media{ min-height: 470px; }
.pm-page .pm-hero--low > .pm-hero-text{ padding: 72px 0 64px; }
.pm-page .pm-hero .pm-label{ margin-bottom: 20px; }
.pm-page .pm-hero h1{ margin-bottom: 24px; }
.pm-page .pm-hero .pm-lead{ max-width: 30rem; }
/* Seitenkopf ohne Bild */
.pm-pagehead{ padding: 88px 0 64px; }
.pm-pagehead .pm-label{ margin-bottom: 20px; }
.pm-pagehead h1{ margin-bottom: 0; }
/* ---------- 6. Auf einen Blick (Infoleiste, Praxisblau) -------------------- */
.pm-glance{ padding: 0; }
.pm-page .pm-glance .wp-block-columns{
gap: 0; background: var(--pm-blue); border-radius: var(--pm-r-img); color:#fff;
box-shadow: var(--pm-shadow);
}
.pm-page .pm-glance .wp-block-column{ padding: 28px 30px 30px; border-left: 1px solid rgba(255,255,255,.18); }
.pm-page .pm-glance .wp-block-column:first-child{ border-left: 0; }
.pm-page .pm-glance .pm-label{ color: rgba(255,255,255,.80); margin-bottom: 8px; }
.pm-page .pm-glance p{ margin: 0; color: #fff; }
.pm-page .pm-glance .pm-big{ font-size: 1.625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pm-page .pm-glance a{ color:#fff; text-decoration:none; }
.pm-page .pm-glance a:hover{ text-decoration: underline; text-underline-offset: 3px; color:#fff; }
.pm-page .pm-glance a:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.pm-page .pm-glance .pm-hours-mini{ display:grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: .9375rem; }
.pm-page .pm-glance .pm-hours-mini span:nth-child(odd){ color: rgba(255,255,255,.80); }
.pm-page .pm-glance .pm-hours-mini span:nth-child(even){ color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-page .pm-glance .pm-sub{ margin-top: 6px; color: rgba(255,255,255,.86); }
.pm-glance-wrap{ padding: 0 56px; }
.pm-glance-wrap > *{ max-width: 1328px; margin-left:auto; margin-right:auto; }
.pm-glance-space{ height: 56px; }
/* ---------- 7. Wichtige Mitteilung (helles Blau-Band) ---------------------- */
.pm-noticeband{ background: var(--pm-blue-lt); border-top: 1px solid var(--pm-blue-md); border-bottom: 1px solid var(--pm-blue-md); padding: 0 56px; }
.pm-noticeband > *{ max-width: 1328px; margin-left:auto; margin-right:auto; }
.pm-notice{ padding: 28px 0; }
.pm-notice .pm-label{ margin: 0; }
.pm-notice p{ font-size: 1.0625rem; line-height: 1.55; color: var(--pm-ink); max-width: 38rem; }
.pm-page > .pm-noticeband:first-child{ border-top: 0; }
/* ---------- 8. Verzeichnis-Tabelle (Vorsorge) ------------------------------ */
.pm-page .wp-block-table.pm-verzeichnis{ margin:0; }
.pm-verzeichnis table{ width:100%; border-collapse: collapse; }
.pm-verzeichnis td{ padding: 18px 0; vertical-align: top; border:0; border-bottom: 1px solid var(--pm-line-p); }
.pm-section:not(.pm-section--paper) .pm-verzeichnis td{ border-bottom-color: var(--pm-line); }
.pm-verzeichnis td:first-child{ width: 52%; padding-right: 24px; font-size: 1.125rem; font-weight: 500; color: var(--pm-ink); }
.pm-verzeichnis td:last-child{ font-size: .9375rem; line-height: 1.5; color: var(--pm-muted); padding-top: 21px; }
/* ---------- 9. Zweispaltige Liste (Diagnostik) ----------------------------- */
.pm-page ul.pm-zweispaltig{ list-style:none; margin:0; padding:0; columns:2; column-gap: 48px; }
.pm-page ul.pm-zweispaltig li{
break-inside: avoid; padding: 15px 0; border-bottom: 1px solid var(--pm-line-p);
font-size: 1.125rem; font-weight: 500; color: var(--pm-ink);
}
.pm-section:not(.pm-section--paper) ul.pm-zweispaltig li{ border-bottom-color: var(--pm-line); }
/* ---------- 10. Downloads --------------------------------------------------- */
.pm-page ul.pm-links{ list-style:none; margin:0; padding:0; }
.pm-page ul.pm-links li{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--pm-line); }
.pm-page ul.pm-links a{ min-width:0; overflow-wrap: break-word; }
.pm-page ul.pm-links a{ font-size: 1.125rem; font-weight: 500; color: var(--pm-ink); }
.pm-page ul.pm-links a:hover{ color: var(--pm-blue); }
.pm-page ul.pm-links .pm-ext{ font-family: var(--pm-font-c); font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color: var(--pm-muted); white-space:nowrap; }
/* ---------- 11. Team ------------------------------------------------------- */
/* Liste auf der Startseite */
.pm-page .pm-person.wp-block-media-text{
display:grid !important; grid-template-columns: 64px 1fr !important; gap: 18px;
align-items:center; padding: 16px 0; margin:0; border-bottom: 1px solid var(--pm-line);
}
.pm-page .pm-person .wp-block-media-text__media{ margin:0; }
.pm-page .pm-person .wp-block-media-text__media img{
display:block; width:64px; height:64px; object-fit:cover; object-position:center 15%;
border-radius: 50%; background: var(--pm-tint);
}
.pm-page .pm-person .wp-block-media-text__content{ padding:0; }
.pm-page .pm-person h3{ font-size: 1.0625rem; font-weight: 500; margin: 0 0 1px; }
.pm-page .pm-person p{ margin:0; font-size: .875rem; color: var(--pm-muted); }
/* Bild rechts, aus dem Raster ausbrechend (Startseite Team) */
.pm-page .wp-block-columns.pm-bleed{
display:grid !important;
grid-template-columns: minmax(20px,1fr) repeat(12, minmax(0, var(--pm-col))) minmax(20px,1fr);
gap: 0 32px; align-items: stretch; margin:0; max-width:none;
}
.pm-page .pm-bleed > .pm-bleed-a{ grid-column: 2 / span 3; padding: 96px 0; }
.pm-page .pm-bleed > .pm-bleed-b{ grid-column: 5 / span 5; padding: 96px 0; }
.pm-page .pm-bleed > .pm-bleed-media{ grid-column: 11 / -1; }
.pm-page .pm-bleed > .pm-bleed-media .wp-block-image, .pm-page .pm-bleed > .pm-bleed-media figure{ margin:0; height:100%; }
.pm-page .pm-bleed > .pm-bleed-media img{ display:block; width:100%; height:100%; min-height: 560px; object-fit:cover; object-position: center; background: var(--pm-tint); }
/* Karten auf der Teamseite */
.pm-card .wp-block-image, .pm-card figure{ margin: 0 0 16px; }
.pm-page .pm-card img{ display:block; width:100%; aspect-ratio: 4/5; object-fit:cover; object-position: center 12%; border-radius: var(--pm-r-img); background: var(--pm-tint); }
.pm-card h3{ font-size: 1.125rem; font-weight: 500; margin: 0 0 2px; }
.pm-card p{ margin:0; font-size:.9375rem; color: var(--pm-muted); }
.pm-card p.pm-sub{ font-size:.8125rem; margin-top: 3px; }
.pm-page .pm-cards.wp-block-columns{ gap: 24px; }
/* ---------- 12. Sprechzeiten-Tabelle (Kontakt) ----------------------------- */
.pm-page .wp-block-table.pm-hours{ margin:0; }
.pm-hours table{ width:100%; border-collapse: collapse; }
.pm-hours td{ padding: 15px 0; border:0; border-bottom: 1px solid var(--pm-line); font-size: 1.125rem; color: var(--pm-ink); }
.pm-hours td:first-child{ width: 33%; font-weight: 500; }
.pm-hours td:last-child{ font-variant-numeric: tabular-nums; }
.pm-hours .pm-closed td{ color: var(--pm-muted); font-weight: 400; }
/* ---------- 13. Anfahrt ---------------------------------------------------- */
/* Zwei-Klick-Loesung: die Karte wird erst auf Knopfdruck von OpenStreetMap
geladen, vorher verlaesst keine IP-Adresse den Browser. */
.pm-map{
position: relative; height: 380px; border-radius: var(--pm-r-img);
background: var(--pm-tint); overflow: hidden;
}
.pm-map__vorschau{
position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap: 14px; padding: 24px 32px; text-align:center;
}
.pm-page .pm-map__titel{
margin:0; font-family: var(--pm-font-c); font-size:.8125rem; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color: var(--pm-map);
}
.pm-page .pm-map__text{
margin:0; max-width: 32rem; font-size:.875rem; line-height:1.5; color: var(--pm-map);
overflow-wrap: break-word;
}
.pm-page .pm-map__text a{ color: var(--pm-blue-dk); text-decoration: underline; text-underline-offset: 3px; }
.pm-page .pm-map__knopf{
display:inline-flex; align-items:center; height:48px; padding: 0 22px; cursor:pointer;
font-family: var(--pm-font); font-size:.9375rem; font-weight:600; line-height:1;
color:#fff; background: var(--pm-blue); border:0; border-radius: var(--pm-r);
box-shadow: 0 1px 2px rgba(0,58,120,.22);
transition: background .2s var(--pm-ease), box-shadow .2s var(--pm-ease), transform .12s var(--pm-ease);
}
.pm-page .pm-map__knopf:hover{ background: var(--pm-blue-dk); box-shadow: 0 2px 10px -2px rgba(0,58,120,.42); }
.pm-page .pm-map__knopf:active{ transform: translateY(1px); }
.pm-page .pm-map__knopf:focus-visible{ outline: 2px solid var(--pm-blue); outline-offset: 3px; }
.pm-map iframe{ display:block; width:100%; height:100%; border:0; }
.pm-map__hinweis{
margin: 8px 0 0; font-size:.8125rem; color: var(--pm-muted);
}
/* ---------- 14. Notfall ---------------------------------------------------- */
.pm-nf{ padding-top: 18px; border-top: 2px solid var(--pm-blue); }
.pm-nf--112{ border-top-color: var(--pm-red); }
.pm-nf .pm-label{ margin-bottom: 10px; }
.pm-nf p{ margin:0; }
.pm-nf .pm-num{ font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pm-nf .pm-num a{ color: var(--pm-blue); text-decoration:none; }
.pm-nf--112 .pm-num a{ color: var(--pm-red); }
/* ---------- 15. Formular (Contact Form 7) ---------------------------------- */
.pm-form{ background: var(--pm-paper); border: 1px solid var(--pm-blue-md); border-radius: var(--pm-r-img); padding: 40px; box-shadow: var(--pm-shadow); }
.pm-form label{ display:block; font-size:.875rem; font-weight:500; color: var(--pm-ink); margin-bottom: 6px; }
.pm-form input[type=text], .pm-form input[type=email], .pm-form input[type=tel], .pm-form select, .pm-form textarea{
width:100%; font-family: var(--pm-font); font-size:.9375rem; color: var(--pm-ink);
background:#fff; border:1px solid var(--pm-field); border-radius: var(--pm-r); padding: 12px 14px; min-height: 48px;
transition: border-color .16s var(--pm-ease), box-shadow .16s var(--pm-ease);
}
.pm-form ::placeholder{ color: var(--pm-ph); opacity: 1; }
.pm-form input:hover, .pm-form select:hover, .pm-form textarea:hover{ border-color: #74716B; }
/* Chrome faerbt ausgefuellte Felder sonst gelb ein. */
.pm-form input:-webkit-autofill, .pm-form textarea:-webkit-autofill, .pm-form select:-webkit-autofill{
-webkit-text-fill-color: var(--pm-ink);
-webkit-box-shadow: 0 0 0 1000px var(--pm-blue-lt) inset;
box-shadow: 0 0 0 1000px var(--pm-blue-lt) inset;
border-color: var(--pm-blue-md);
}
.pm-form input:focus, .pm-form select:focus, .pm-form textarea:focus{ outline: 2px solid var(--pm-blue); outline-offset: 1px; border-color: var(--pm-blue); }
.pm-form textarea{ min-height: 160px; resize: vertical; }
.pm-form .pm-field{ margin-bottom: 20px; }
.pm-form .pm-field--short{ max-width: 220px; }
.pm-form .pm-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pm-form .pm-consent{ display:flex; gap:12px; align-items:flex-start; font-size:.875rem; font-weight:400; line-height:1.5; color: var(--pm-body); }
.pm-form .pm-consent input{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color: var(--pm-blue); }
.pm-form .pm-required{ color: var(--pm-red); }
.pm-form input[type=submit], .pm-form .wpcf7-submit{
font-family: var(--pm-font); font-size:.9375rem; font-weight:600; cursor:pointer; height:52px; padding:0 22px;
background: var(--pm-blue); color:#fff; border:0; border-radius: var(--pm-r);
box-shadow: 0 1px 2px rgba(0,58,120,.22);
transition: background .2s var(--pm-ease), box-shadow .2s var(--pm-ease), transform .12s var(--pm-ease);
}
.pm-form input[type=submit]:hover, .pm-form .wpcf7-submit:hover{ background: var(--pm-blue-dk); box-shadow: 0 2px 10px -2px rgba(0,58,120,.42); }
.pm-form input[type=submit]:active, .pm-form .wpcf7-submit:active{ transform: translateY(1px); }
.pm-form input[type=submit]:focus-visible, .pm-form .wpcf7-submit:focus-visible{ outline: 2px solid var(--pm-blue); outline-offset: 3px; }
/* Waehrend des Absendens sperrt CF7 den Knopf. */
.pm-form .wpcf7-submit:disabled, .wpcf7 form.submitting .wpcf7-submit{ opacity:.6; cursor: progress; }
.wpcf7 form .wpcf7-response-output{ border:1px solid var(--pm-line) !important; border-radius: var(--pm-r); padding:12px 16px !important; margin:20px 0 0 !important; background:#fff; color: var(--pm-ink); font-size:.9375rem; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output{ color: var(--pm-red); border-color:#E5B9B6 !important; }
.wpcf7-not-valid-tip{ color: var(--pm-red) !important; font-size:.8125rem !important; }
/* ---------- 16. Rechtstexte ------------------------------------------------ */
.pm-legal{ max-width: 760px; padding: 72px 0 96px; }
.pm-legal p, .pm-legal li{ max-width: 38rem; } /* 65-70 Zeichen Zeilenlaenge */
.pm-legal h2{ font-size: 1.375rem; font-weight: 500; padding-top: 16px; border-top: 1px solid var(--pm-ink); margin-top: 40px; margin-bottom: .5em; }
.pm-legal .pm-todo{ background:#fff; border: 1px solid var(--pm-line); border-radius: var(--pm-r); padding: 14px 16px; margin: 12px 0 20px; font-size:.9375rem; }
/* ---------- 16b. Fussbereich (Template-Teil des Themes) -------------------
Vier Spalten auf Nachtblau, darunter eine Zeile mit Jahr, Terminhinweis und
dem Urhebervermerk. Das Theme steuert nur die Position, das Aussehen hier. */
.pm-sitefoot{
background: var(--pm-navy); color:#fff; padding: 0 56px;
font-family: var(--pm-font); font-size: 1.0625rem; line-height: 1.6;
}
.pm-sitefoot *{ box-sizing: border-box; }
.pm-sitefoot__in{ max-width: 1328px; margin: 0 auto; padding: 72px 0 0; }
.pm-sitefoot .wp-block-columns{ display:flex; flex-wrap:wrap; gap: 32px; margin: 0; align-items: flex-start; }
.pm-sitefoot .wp-block-column{ flex: 1 1 0; min-width: 0; margin: 0; }
.pm-sitefoot p{ margin: 0 0 1rem; }
.pm-sitefoot p:last-child{ margin-bottom: 0; }
.pm-sitefoot a{ color:#fff; text-decoration: none; transition: color .18s var(--pm-ease); }
.pm-sitefoot a:hover{ color: var(--pm-muted-b); text-decoration: underline; text-underline-offset: 3px; }
.pm-sitefoot a:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.pm-sitefoot .pm-foot__name{
font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 300;
letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; color:#fff;
}
.pm-sitefoot .pm-foot__adr{ color: var(--pm-muted-b); font-size: .9375rem; line-height: 1.6; }
.pm-sitefoot .pm-foot__head{
font-family: var(--pm-font-c); font-size: .8125rem; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; color: var(--pm-muted-b);
margin-bottom: 12px;
}
.pm-sitefoot .wp-block-column p:not(.pm-foot__name):not(.pm-foot__head){ font-size: .9375rem; line-height: 1.7; }
.pm-sitefoot .pm-foot__bar{
display:flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px;
margin-top: 56px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.16);
}
.pm-sitefoot .pm-foot__zeile{ margin:0; font-size: .8125rem; color: var(--pm-muted-b); }
.pm-sitefoot .pm-foot__zeile:nth-of-type(2){ margin-left: auto; }
.pm-sitefoot .pm-foot__urheber{
flex: 1 1 100%; margin: 6px 0 0; font-size: .75rem; line-height: 1.5; color: #8CA3C0;
}
.pm-sitefoot .pm-foot__urheber a{ color: #8CA3C0; text-decoration: underline; text-underline-offset: 2px; }
.pm-sitefoot .pm-foot__urheber a:hover{ color:#fff; }
@media (max-width: 1100px){ .pm-sitefoot{ padding: 0 32px; } }
@media (max-width: 900px){
.pm-sitefoot .wp-block-columns{ gap: 32px 24px; }
.pm-sitefoot .wp-block-column{ flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 600px){
.pm-sitefoot{ padding: 0 20px; }
.pm-sitefoot__in{ padding-top: 48px; }
.pm-sitefoot .wp-block-columns{ flex-direction: column; gap: 28px; align-items: stretch; }
.pm-sitefoot .wp-block-column{ flex: 1 1 100%; }
.pm-sitefoot .pm-foot__bar{ margin-top: 36px; gap: 6px; }
.pm-sitefoot .pm-foot__zeile:nth-of-type(2){ margin-left: 0; }
}
@media print{ .pm-sitefoot{ display:none !important; } }
/* ---------- 17. Responsive ------------------------------------------------- */
@media (max-width: 1100px){
.pm-wrap, .pm-paper, .pm-glance-wrap, .pm-noticeband{ padding-left: 32px; padding-right: 32px; }
/* Label-Spalte breiter, damit lange Wörter nicht anstoßen */
.pm-page .wp-block-column[style*="flex-basis:25%"]{ flex-basis: calc(33.33% - 22px) !important; }
.pm-page .wp-block-column[style*="flex-basis:75%"]{ flex-basis: calc(66.67% - 10px) !important; }
.pm-page .pm-label{ -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.pm-card p{ overflow-wrap: anywhere; }
/* Infoleiste zweireihig */
.pm-page .pm-glance .wp-block-columns{ flex-wrap: wrap; }
.pm-page .pm-glance .wp-block-column{ flex: 1 1 50% !important; }
.pm-page .pm-glance .wp-block-column:nth-child(3){ border-left: 0; }
.pm-page .pm-glance .wp-block-column:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,.18); }
}
@media (max-width: 900px) and (min-width: 782px){
.pm-page .pm-cards.wp-block-columns{ flex-wrap: wrap; }
.pm-page .pm-cards .wp-block-column{ flex: 1 1 calc(50% - 12px) !important; }
.pm-page .pm-hero > .pm-hero-text{ grid-column: 2 / span 6; }
.pm-page .pm-hero > .pm-hero-media{ grid-column: 9 / -1; }
}
@media (max-width: 781px){
.pm-wrap, .pm-paper, .pm-glance-wrap, .pm-noticeband{ padding-left: 20px; padding-right: 20px; }
.pm-section, .pm-section--paper{ padding: 56px 0; }
.pm-page .wp-block-columns{ flex-direction: column; gap: 24px; }
.pm-page .wp-block-column{ flex-basis: 100% !important; }
/* Hero: Bild oben, Text darunter */
.pm-page .wp-block-columns.pm-hero{ grid-template-columns: 20px 1fr 20px; gap: 0; }
.pm-page .pm-hero > .pm-hero-media{ grid-column: 1 / -1; grid-row: 1; min-height: 0; height: 62vw; max-height: 420px; }
.pm-page .pm-hero--low > .pm-hero-media{ min-height: 0; }
.pm-page .pm-hero > .pm-hero-media img, .pm-page .pm-hero--low > .pm-hero-media img{ min-height: 0; height: 100%; }
.pm-page .pm-hero > .pm-hero-text, .pm-page .pm-hero--low > .pm-hero-text{ grid-column: 2; grid-row: 2; padding: 36px 0 44px; }
.pm-pagehead{ padding: 48px 0 40px; }
/* Infoleiste gestapelt */
.pm-page .pm-glance .wp-block-columns{ flex-direction: column; gap:0; }
.pm-page .pm-glance .wp-block-column{ border-left:0; border-top: 1px solid rgba(255,255,255,.18); padding: 20px 22px; }
.pm-page .pm-glance .wp-block-column:first-child{ border-top: 0; }
.pm-glance-space{ height: 32px; }
/* Team-Ausbruch gestapelt */
.pm-page .wp-block-columns.pm-bleed{ grid-template-columns: 20px 1fr 20px; gap:0; }
.pm-page .pm-bleed > .pm-bleed-a{ grid-column: 2; padding: 56px 0 24px; }
.pm-page .pm-bleed > .pm-bleed-b{ grid-column: 2; padding: 0 0 40px; }
.pm-page .pm-bleed > .pm-bleed-media{ grid-column: 1 / -1; }
.pm-page .pm-bleed > .pm-bleed-media img{ min-height: 0; height: 70vw; max-height: 460px; }
.pm-page ul.pm-zweispaltig{ columns:1; }
.pm-verzeichnis td{ display:block; width:auto !important; padding: 4px 0; border:0; }
.pm-verzeichnis td:first-child{ padding-top: 14px; }
.pm-verzeichnis td:last-child{ padding-bottom: 14px; padding-top: 0; border-bottom: 1px solid var(--pm-line); }
.pm-verzeichnis td:last-child:empty{ display:none; }
.pm-verzeichnis td:first-child:has(+ td:empty){ padding-bottom: 14px; border-bottom: 1px solid var(--pm-line); }
.pm-form{ padding: 24px 20px; }
.pm-form .pm-row{ grid-template-columns: 1fr; }
.pm-map{ height: 240px; }
.pm-page .pm-cards.wp-block-columns{ flex-direction: row; flex-wrap: wrap; gap: 16px; }
.pm-page .pm-cards .wp-block-column{ flex: 1 1 calc(50% - 8px) !important; }
.pm-page .wp-block-buttons{ gap: 14px; margin-top: 22px; }
.pm-page .wp-block-button:not(.pm-btn-text){ width:100%; }
.pm-page .wp-block-button:not(.pm-btn-text) .wp-block-button__link{ width:100%; justify-content:center; }
}
/* ---------- 17b. Bewegung: ein Auftritt, sonst nichts ----------------------
Der Standardzustand ist sichtbar. Die Bewegung liegt vollstaendig in der
Abfrage unten; wer sie abbestellt hat, sieht die Seite unveraendert. */
@media (prefers-reduced-motion: no-preference){
@keyframes pm-rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes pm-reveal{ from{ opacity:0; transform: scale(1.035); } to{ opacity:1; transform:none; } }
.pm-page .pm-hero > .pm-hero-text > *{ animation: pm-rise .68s var(--pm-ease) both; }
.pm-page .pm-hero > .pm-hero-text > *:nth-child(1){ animation-delay: .04s; }
.pm-page .pm-hero > .pm-hero-text > *:nth-child(2){ animation-delay: .10s; }
.pm-page .pm-hero > .pm-hero-text > *:nth-child(3){ animation-delay: .17s; }
.pm-page .pm-hero > .pm-hero-text > *:nth-child(4){ animation-delay: .24s; }
.pm-page .pm-hero > .pm-hero-media{ overflow: hidden; }
.pm-page .pm-hero > .pm-hero-media img{ animation: pm-reveal .9s var(--pm-ease) both; }
.pm-page .pm-pagehead > .wp-block-columns > *{ animation: pm-rise .6s var(--pm-ease) both; }
.pm-page .pm-pagehead > .wp-block-columns > *:nth-child(2){ animation-delay: .08s; }
}
@media (prefers-reduced-motion: reduce){ .pm-page *{ transition:none !important; animation:none !important; } }
/* ---------- 17c. Druck ------------------------------------------------------
Sprechzeiten und Anschrift werden in einer Praxis wirklich ausgedruckt. */
@media print{
html{ scrollbar-color: auto; }
.pm-page{ background:#fff !important; color:#000; font-size: 11pt; }
.pm-page .wp-block-columns{ display:block !important; }
.pm-page .pm-paper, .pm-page .pm-noticeband{ background:#fff !important; }
.pm-wrap, .pm-paper, .pm-glance-wrap, .pm-noticeband{ padding-left:0; padding-right:0; }
.pm-section, .pm-section--paper{ padding: 12pt 0; border-bottom: .5pt solid #999; }
.pm-page h1{ font-size: 22pt; }
.pm-page h2{ font-size: 14pt; break-after: avoid; }
.pm-page h3{ break-after: avoid; }
.pm-page .pm-label, .pm-page .pm-listhead{ color:#000; }
.pm-page .pm-glance .wp-block-columns{ background:#fff !important; color:#000; box-shadow:none; border: .5pt solid #000; }
.pm-page .pm-glance .wp-block-column{ border-left:0; border-top: .5pt solid #999; }
.pm-page .pm-glance p, .pm-page .pm-glance .pm-label, .pm-page .pm-glance a,
.pm-page .pm-glance .pm-hours-mini span{ color:#000 !important; }
.pm-page .pm-hero > .pm-hero-media, .pm-map, .pm-page .wp-block-buttons,
.pm-page .pm-form, .pm-page .pm-bleed > .pm-bleed-media{ display:none !important; }
.pm-page .pm-hero{ display:block !important; }
.pm-page .pm-person .wp-block-media-text__media{ display:none; }
.pm-verzeichnis tr, .pm-hours tr, .pm-page ul.pm-zweispaltig li{ break-inside: avoid; }
.pm-page ul.pm-zweispaltig{ columns: 2; }
/* Ziele der Verweise sichtbar machen */
.pm-page a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 8pt; color:#444; }
.pm-page a[href^="tel:"]::after, .pm-page a[href^="mailto:"]::after,
.pm-page a[href^="/"]::after, .pm-page a[href^="#"]::after{ content: ""; }
}
/* ---------- 18. Fallback: volle Breite ohne alignfull-Support -------------- */
/*
.pm-page.alignfull, .entry-content > .pm-page{ width:100%; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
*/