/* PM — KOMPONENTEN (Ebene 3), Fassung 14.08.2026
   Header, Flyout, Footer, Kategorie-Archiv und Listen-Karten.
   Also: alles, was auf MEHREREN Seiten vorkommt.

   ENTFERNT am 14.08.2026: der komplette Seitenblock von /testsiegel
   (Sektionen 1-12, Textabstand-Reparatur, Mobil-Korrekturen und die
   Abstandsskala). Er lag hier global und hat auf jeder anderen Seite
   dieselben Klassennamen belegt - Ursache der Kollisionen bei
   .pm-tile, .pm-card, .pm-head, .pm-seal, .pm-hero und .pm-faq.
   Diese Regeln stehen jetzt im Seitencode von /testsiegel (Ebene 4).

   REGEL: hier kommt nichts hinein, was nur eine einzige Seite
   braucht. Seitenspezifisches gehoert in den wp:html-Block der
   jeweiligen Seite.
   =========================================================== */
/* --- Kopfzeile ---------------------------------------------------------- */
.pm-head{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linie);
  transition:transform var(--t-panel) var(--ease-out);}
.pm-head.is-weg{transform:translateY(-101%);}
/* Kopfzeile hoeher, damit der zweizeilige Claim im Logo lesbar bleibt.
   Beim Scrollen schrumpft sie auf 68 px — dann ist der Claim gelesen
   und die Leiste darf Platz zurueckgeben. Umschalten uebernimmt das
   Header-Skript ueber die Klasse .is-klein am selben Element, das
   bereits .is-weg setzt. */
.pm-head__in{display:flex;align-items:center;gap:28px;height:84px;
  max-width:1360px;margin:0 auto;padding:0 32px;
  transition:height var(--t-hover) var(--ease-out);}
.pm-head.is-klein .pm-head__in{height:68px;}

.pm-head__logo{flex:0 0 auto;display:flex;align-items:center;}
/* Zweifarbiges Logo mit Claim, eigene Datei je Hintergrund.
   Der frueher hier stehende CSS-Farbfilter ist entfallen — er kann
   nur einfarbig einfaerben. */
.pm-head__logo img{height:64px;width:auto;display:block;
  transition:height var(--t-hover) var(--ease-out);}
.pm-head.is-klein .pm-head__logo img{height:46px;}
@media(max-width:900px){
  .pm-head__logo img{height:46px;}
  .pm-head.is-klein .pm-head__logo img{height:40px;}
}

/* Navigation */
.pm-nav2{display:flex;align-items:center;gap:26px;margin-left:6px;}
.pm-nav2 a{position:relative;font-size:0.9062rem;font-weight:500;color:var(--blau);
  padding:6px 0;white-space:nowrap;}
.pm-nav2 a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--akzent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-panel) var(--ease-out);}
.pm-nav2 a:hover::after,.pm-nav2 a.is-akt::after{transform:scaleX(1);}

/* Flyout */
.pm-nav2{position:static;}
.pm-fly{position:absolute;left:0;right:0;top:100%;
  background:#fff;border-radius:14px;
  box-shadow:0 12px 32px rgba(27,38,59,.10), 0 2px 8px rgba(27,38,59,.06);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--t-hover) var(--ease-out),
             transform var(--t-hover) var(--ease-out),visibility var(--t-hover);}
#flyTestberichte,#flyMagazin{max-width:760px;margin-inline:auto;}
.pm-mag__big .pm-fly__bild{aspect-ratio:16/9;}
.pm-fly.is-auf{opacity:1;visibility:visible;transform:none;}
.pm-fly__in{margin:0 auto;padding:30px 30px 32px;
  display:grid;grid-template-columns:1.5fr 1px 1fr;gap:0 34px;}
#flyMagazin .pm-fly__in{grid-template-columns:1fr 1px 1fr;}
.pm-fly__linie{background:var(--linie);}
.pm-fly__lbl{font-size:0.625rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--schwach);margin:0 0 20px;}

/* Kategorien */
.pm-fly__kat{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;}
.pm-fly__kat a{position:relative;display:block;font-size:0.875rem;color:var(--grau);
  padding:9px 0 9px 16px;transition:color var(--t-hover);}
.pm-fly__kat a::before{content:"";position:absolute;left:0;top:50%;
  width:5px;height:5px;border-radius:50%;background:var(--akzent);
  transform:translateY(-50%) scale(0);transition:transform var(--t-hover) var(--ease-out);}
.pm-fly__kat a:hover{color:var(--blau);}
.pm-fly__kat a:hover::before{transform:translateY(-50%) scale(1);}

/* Aufmacher rechts */
.pm-fly__auf{display:block;}
.pm-fly__bild{overflow:hidden;border-radius:12px;background:var(--flaeche);
  border:1px solid var(--linie);aspect-ratio:16/10;margin-bottom:16px;}
.pm-fly__bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out);}
.pm-fly__auf:hover .pm-fly__bild img{transform:scale(1.04);}
.pm-fly__kick{font-size:0.625rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);margin:0 0 8px;}
.pm-fly__t{font-size:1rem;line-height:1.36;font-weight:600;color:var(--blau);
  letter-spacing:-.01em;margin:0;}
.pm-fly__zeilen{margin-top:22px;border-top:1px solid var(--linie);}
.pm-fly__zeilen a{display:block;padding:13px 0;border-bottom:1px solid var(--linie);
  font-size:0.8438rem;line-height:1.4;color:var(--grau);transition:color var(--t-hover);}
.pm-fly__zeilen a:last-child{border-bottom:0;}
.pm-fly__zeilen a:hover{color:var(--blau);}
.pm-fly__alle{display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  font-size:0.8438rem;font-weight:500;color:var(--blau);
  border-bottom:1px solid var(--linie);padding-bottom:3px;transition:border-color var(--t-hover);}
.pm-fly__alle:hover{border-color:var(--akzent);}
.pm-fly__alle svg{transition:transform var(--t-hover);}
.pm-fly__alle:hover svg{transform:translateX(3px);}

/* Kategorie-Kacheln (Testberichte-Flyout) */
/* KOLLISION: .pm-tile heisst in Sektion 3 (Listing-Raster) ebenfalls so und
   steht dort auf opacity:0, sichtbar nur ueber .pm-serp.is-in. Im Flyout gibt
   es kein .pm-serp — deshalb blieben die Kacheln unsichtbar. Hier neutralisiert. */
.pm-fly__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 8px;}
/* ALLE Flyout-Regeln sind auf .pm-fly__tiles gescopt. ".pm .pm-tile"
   ohne Scope hatte 0,2,0 und schlug das Listing-Raster der
   Testsiegel-Seite (0,1,0) — dort lagen Bild, Sterne und Preis
   dadurch nebeneinander statt untereinander. */
.pm .pm-fly__tiles .pm-tile{opacity:1 !important;transform:none !important;
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;}
.pm .pm-fly__tiles .pm-tile:hover{background:var(--flaeche);}
.pm-fly__tiles .pm-tile__ic{flex:none;display:flex;color:var(--akzent);}
.pm-fly__tiles .pm-tile__ic svg{width:15px;height:15px;}
.pm-fly__tiles .pm-tile__name{font-size:0.75rem;font-weight:600;color:var(--blau);white-space:normal;
  line-height:1.25;height:2.5em;display:flex;align-items:center;overflow:hidden;}

.pm-fly__card{display:flex;gap:10px;align-items:center;margin-bottom:12px;}
.pm-fly__thumb{width:46px;height:46px;border-radius:8px;flex:none;overflow:hidden;}
.pm-fly__thumb img{width:100%;height:100%;object-fit:cover;}

/* Zweite „Zuletzt geprüft"-Karte */
.pm-fly__auf + .pm-fly__auf{margin-top:22px;}

/* Magazin-Flyout: umschaltbare Panels */
.pm-mag__stage{position:relative;}
.pm-mag__panel{display:none;}
.pm-mag__panel.is-akt{display:block;}
/* Zwei kleine Bildkacheln rechts oben. Panel-Logik hat Vorrang, deshalb
   beide Klassen im Selektor - sonst waere die Kachelreihe immer sichtbar. */
.pm .pm-mag__panel.pm-mag__mini{display:none;}
.pm .pm-mag__panel.pm-mag__mini.is-akt{display:block;}
.pm-mag__rechts{display:flex;flex-direction:column;}
.pm-mag__rechts .pm-mag__stage{margin-bottom:24px;}
.pm-mag__rechts .pm-fly__lbl{margin-bottom:14px;}

/* Linke Spalte: Kicker ueber dem Titel, darunter Trenner und Textlink */
.pm-mag__big .pm-fly__kick{margin-top:14px;}
.pm-mag__trenner{border-top:1px solid var(--linie);margin-top:20px;}
.pm-mag__stage .pm-fly__alle{margin-top:16px;}

/* Kategorie-Chips: umbrechendes Raster, waechst zeilenweise mit */
.pm .pm-mag__nav{display:flex;flex-wrap:wrap;gap:8px;
  margin-top:0;border-top:0;}
.pm .pm-mag__cat{display:inline-flex;align-items:center;padding:7px 15px;
  border:1px solid var(--linie);border-radius:100px;
  font-size:0.7812rem;font-weight:500;line-height:1.2;color:var(--grau);
  background:#fff;cursor:pointer;white-space:nowrap;
  transition:border-color var(--t-hover),background var(--t-hover),color var(--t-hover);}
.pm .pm-mag__cat:hover{border-color:var(--hell);color:var(--blau);}
.pm .pm-mag__cat.is-akt{background:var(--blau);border-color:var(--blau);
  color:#fff;font-weight:600;}

/* ===== Kategorie-Archiv — 1:1 nach Live (/baumarkt/), token-basiert ===== */
.pm-hero{padding:56px 0 var(--sp-sec);}
.pm-kat__in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-col);align-items:center;}
.pm-kat__text .pm-lead{max-width:46ch;}
.pm .pm-subs__k{font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--akzent);margin:0 0 18px;}
.pm-subs{display:flex;flex-wrap:wrap;gap:10px;}
.pm .pm-sub{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--linie);border-radius:100px;padding:9px 18px;font-size:0.875rem;font-weight:500;color:var(--blau);letter-spacing:-.008em;white-space:nowrap;}
.pm-sub::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--akzent);flex:none;opacity:.55;}
.pm .pm-subs__note{font-size:0.8125rem;line-height:1.6;color:var(--schwach);margin-top:var(--sp-card);}
.pm-liste{background:var(--flaeche);padding:var(--sp-sec) 0;}

/* TESTBERICHT-KARTEN — eine Fassung fuer alle Seiten.
   Startseite, /testberichte und die Kategorieseiten zeigen dieselben
   Karten aus demselben Shortcode; die Optik gehoert deshalb hierher
   und NICHT in den Seitencode. Kein Kartenkasten mehr: gerahmt ist
   nur die Bildflaeche, der Text steht frei darunter. Goldener Kicker
   statt Kategorie-Pille, Goldstrich unter dem Titel laeuft beim
   Ueberfahren ein. */
.pm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-col) var(--sp-card);}
.pm .pm-card,.pm a.pm-card:link,.pm a.pm-card:visited,.pm a.pm-card:hover{color:var(--blau) !important;text-decoration:none !important;}
.pm .pm-card{display:flex;flex-direction:column;background:none;border:0;border-radius:0;overflow:visible;}
.pm-liste .pm-card{opacity:1 !important;transform:none !important;}
.pm .pm-card:hover{transform:none;box-shadow:none;}
.pm-card__img{aspect-ratio:4/3;background:#fff;overflow:hidden;
  border:1px solid var(--linie);border-radius:12px;
  transition:border-color var(--t-hover) var(--ease-out),
             box-shadow var(--t-hover) var(--ease-out);}
.pm-card__img img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out);}
.pm .pm-card:hover .pm-card__img{border-color:var(--hell);box-shadow:0 16px 36px rgba(27,38,59,.10);}
.pm .pm-card:hover .pm-card__img img{transform:scale(1.04);}
.pm-card__body{padding:18px 2px 0;display:flex;flex-direction:column;flex:1;}
.pm-card .pm-card__cat{display:block;font-size:0.6562rem !important;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent) !important;font-weight:700 !important;margin:0 0 10px !important;padding:0;background:none;border-radius:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.pm-card h3.pm-card__title{font-size:1rem !important;line-height:1.35 !important;font-weight:600 !important;color:var(--blau) !important;margin:0 !important;padding:0 0 3px !important;letter-spacing:-.014em;display:inline;
  background-image:linear-gradient(var(--akzent),var(--akzent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  transition:background-size var(--t-panel) var(--ease-out);}
.pm .pm-card:hover h3.pm-card__title{background-size:100% 1.5px;}
.pm-card .pm-card__more{margin-top:14px;padding-top:0;border-top:0;font-size:0.8125rem !important;font-weight:600 !important;color:var(--schwach) !important;display:flex;align-items:center;gap:7px;transition:color var(--t-hover) var(--ease-out);}
.pm-card__more::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-hover) var(--ease-out);}
.pm .pm-card:hover .pm-card__more{color:var(--blau) !important;}
.pm .pm-card:hover .pm-card__more::after{transform:rotate(-45deg) translate(2px,2px);}
.pm-card.is-aus{display:none;}
.pm-mehr{margin-top:var(--sp-block);display:flex;justify-content:center;}
.pm .pm-mehr__btn{display:inline-flex;align-items:center;gap:11px;background:#fff;color:var(--blau);border:1.5px solid var(--linie);border-radius:2px;padding:16px 34px;font-family:var(--f);font-size:0.9375rem;font-weight:600;line-height:1.2;cursor:pointer;transition:border-color var(--t-hover),transform var(--t-hover);}
.pm .pm-mehr__btn:hover{border-color:var(--blau);transform:translateY(-1px);}
.pm-mehr__btn::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--akzent);border-bottom:1.5px solid var(--akzent);transform:rotate(45deg) translateY(-2px);transition:transform var(--t-hover);}
.pm-mehr__btn:hover::after{transform:rotate(45deg) translate(1px,1px);}
.pm-ende{display:none;text-align:center;margin-top:var(--sp-block);}
.pm-ende.is-on{display:flex;justify-content:center;}
.pm .pm-link{font-size:0.875rem;font-weight:600;color:var(--blau) !important;white-space:nowrap;border-bottom:1.5px solid var(--akzent);padding-bottom:4px;transition:var(--t-hover);text-decoration:none;}
.pm .pm-link:hover{border-bottom-color:var(--blau);}
.pm-hints{padding:var(--sp-sec) 0;}
.pm-hints__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-card);align-items:stretch;}
.pm .pm-hint{display:flex;flex-direction:column;height:100%;border:1px solid var(--linie);border-radius:12px;padding:var(--sp-block);background:#fff;transition:border-color var(--t-hover),box-shadow var(--t-hover);}
.pm .pm-hint:hover{border-color:var(--hell);box-shadow:0 14px 32px rgba(27,38,59,.07);}
.pm-hint .pm-link{align-self:flex-start;}
.pm .pm-hint__k{font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--akzent);margin:0 0 12px;}
.pm .pm-hint__t{font-size:1.1875rem;font-weight:700;color:var(--blau);letter-spacing:-.018em;line-height:1.3;margin:0 0 var(--tp-title);}
.pm .pm-hint__x{font-size:0.9062rem;line-height:1.7;color:var(--grau);margin:0 0 var(--sp-card);max-width:46ch;flex:1;}
@media(max-width:900px){
  .pm-hero{padding:48px 0 var(--sp-sec);}
  .pm-kat__in{grid-template-columns:1fr;gap:var(--sp-block);align-items:start;}
  .pm-kat__text .pm-lead{max-width:60ch;}
  .pm-subs{gap:8px;} .pm .pm-sub{padding:8px 14px;font-size:0.8125rem;gap:7px;}
  .pm-cards{grid-template-columns:repeat(2,1fr);gap:12px;}
  .pm-card__body{padding:14px 14px 18px;}
  .pm-card .pm-card__cat{font-size:0.5625rem !important;padding:4px 8px;margin:0 0 10px !important;letter-spacing:.06em;}
  .pm-card h3.pm-card__title{font-size:0.8438rem !important;line-height:1.3 !important;min-height:2.6em;}
  .pm-card .pm-card__more{font-size:0.7188rem !important;margin-top:12px;padding-top:10px;}
  .pm .pm-mehr__btn{width:100%;justify-content:center;}
  .pm-hints__grid{grid-template-columns:1fr;} .pm .pm-hint{padding:var(--sp-card);}
}

/* Lizenzsuche */
/* 300 px waren zu schmal: der eigene Platzhalter "Lizenznummer" wurde
   abgeschnitten und stand als "Lizenznumr" in der Leiste. */
.pm-such{position:relative;flex:1 1 auto;min-width:240px;max-width:340px;margin-left:auto;}
.pm-such input{width:100%;height:40px;border:1px solid var(--linie);border-radius:8px;
  background:var(--flaeche);padding:0 40px 0 14px;font-family:var(--f);
  font-size:0.875rem;color:var(--blau);transition:border-color var(--t-hover),background var(--t-hover);}
.pm-such input::placeholder{color:var(--schwach);}
.pm-such input:focus{outline:none;border-color:var(--blau-2);background:#fff;}
.pm-such.is-fehler input{border-color:var(--fehler);}
.pm-such.is-busy input{opacity:.6;}
.pm-such__msg{position:absolute;left:0;top:calc(100% + 7px);z-index:2;
  display:none;max-width:340px;padding:9px 13px;border-radius:8px;
  background:#fff;border:1px solid var(--linie);
  box-shadow:0 8px 22px rgba(27,38,59,.10);
  font-size:0.7812rem;line-height:1.45;color:var(--grau);}
.pm-such__msg.is-on{display:block;}
/* Auslöser statt Zierde: die Lupe stand links und tat nichts. Rechts als
   Knopf ist sie das, was der Nutzer sucht — und die Beschriftung
   "Lizenznummer eingeben" passt jetzt vollstaendig ins Feld. */
.pm-such__go{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;border-radius:6px;cursor:pointer;color:var(--schwach);
  transition:color var(--t-hover) var(--ease-out),background var(--t-hover) var(--ease-out);}
.pm-such__go:hover{color:var(--blau);background:var(--flaeche);}
.pm-such.is-busy .pm-such__go{opacity:.4;pointer-events:none;}
.pm button.pm-such__go,.pm button.pm-such__go:hover,
.pm button.pm-such__go:focus,.pm button.pm-such__go:active{
  border:0 !important;box-shadow:none !important;}

/* Sprache */
.pm-lang{position:relative;flex:0 0 auto;}
/* Als Pille mit Weltkugel: zwei graue Buchstaben waren fuer jemanden,
   der die Seite nicht lesen kann, praktisch unsichtbar. Gleiche Form wie
   die Sprachchips im mobilen Menue. */
.pm-lang__btn{display:flex;align-items:center;gap:7px;background:none;
  border:1px solid var(--linie);border-radius:100px;
  cursor:pointer;font-family:var(--f);font-size:0.8438rem;font-weight:600;
  letter-spacing:.06em;color:var(--grau);padding:7px 14px;
  transition:color var(--t-hover),border-color var(--t-hover) var(--ease-out);}
.pm-lang__btn:hover,.pm-lang.is-auf .pm-lang__btn{color:var(--blau);border-color:var(--blau);}
.pm-lang__globus{color:var(--akzent);flex:none;}

/* Astra und Divi faerben JEDES <button> ein. Hier neutralisieren, sonst
   schlaegt deren Button-Hintergrund durch (das war das Blau). */
.pm button.pm-lang__btn,.pm button.pm-lang__btn:hover,
.pm button.pm-lang__btn:focus,.pm button.pm-lang__btn:active,
.pm button.pm-burger,.pm button.pm-burger:hover,.pm button.pm-burger:focus{
  background:none !important;background-color:transparent !important;
  box-shadow:none !important;text-decoration:none !important;}
.pm button.pm-burger{border:0 !important;}
.pm button.pm-lang__btn{color:var(--grau) !important;padding:7px 14px !important;
  border:1px solid var(--linie) !important;}
.pm-lang.is-auf button.pm-lang__btn{border-color:var(--blau) !important;}
.pm button.pm-lang__btn:hover,.pm-lang.is-auf button.pm-lang__btn{
  color:var(--blau) !important;}
.pm-lang__btn svg:last-of-type{transition:transform var(--t-hover);}
.pm-lang.is-auf .pm-lang__btn svg:last-of-type{transform:rotate(180deg);}
.pm-lang__pn{position:absolute;top:calc(100% + 14px);right:0;min-width:200px;
  background:#fff;border:1px solid var(--linie);border-radius:12px;padding:8px;
  box-shadow:0 18px 50px rgba(27,38,59,.10);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-hover),transform var(--t-hover),visibility var(--t-hover);}
.pm-lang.is-auf .pm-lang__pn{opacity:1;visibility:visible;transform:none;}
.pm-lang__pn a{display:block;padding:9px 14px;border-radius:8px;font-size:0.875rem;
  color:var(--grau);transition:background var(--t-hover),color var(--t-hover);}
/* GTranslate rendert die Links selbst als a.glink. Gleiche Optik wie zuvor. */
.pm .pm-lang__pn a.glink,.pm .pm-mob__spr a.glink{
  display:block !important;padding:9px 14px !important;border-radius:8px;
  font-size:0.875rem;font-weight:500;text-decoration:none !important;
  background:transparent !important;color:var(--grau) !important;}
.pm .pm-lang__pn a.glink:hover,.pm .pm-mob__spr a.glink:hover{
  background:var(--flaeche) !important;color:var(--blau) !important;}
.pm .pm-lang__pn a.glink.gt-current-lang,.pm .pm-mob__spr a.glink.gt-current-lang{
  color:var(--blau) !important;font-weight:600;}
.pm .pm-lang__pn a.glink img,.pm .pm-mob__spr a.glink img{display:none !important;}

.pm .pm-lang__pn a,.pm .pm-lang__pn a:link,.pm .pm-lang__pn a:visited{
  background:transparent !important;color:var(--grau) !important;}
.pm .pm-lang__pn a:hover,.pm .pm-lang__pn a:focus,.pm .pm-lang__pn a:active{
  background:var(--flaeche) !important;color:var(--blau) !important;}
.pm .pm-lang__pn a.is-akt{background:transparent !important;
  color:var(--blau) !important;font-weight:600;}
.pm-lang__pn a.is-akt{color:var(--blau);font-weight:600;}

/* Button */
.pm-head .pm-cta{display:inline-block;flex:0 0 auto;padding:12px 20px;border-radius:8px;
  background:var(--blau);color:#fff !important;font-size:0.875rem;font-weight:500;
  white-space:nowrap;transition:background var(--t-hover);}
.pm-head .pm-cta:hover{background:var(--blau-2);}

/* Burger */
.pm-burger{display:none;width:40px;height:40px;margin-left:auto;background:none;
  border:0;cursor:pointer;position:relative;}
.pm-burger span{position:absolute;left:9px;width:22px;height:1.5px;background:var(--blau);
  transition:transform var(--t-panel) var(--ease-out),opacity var(--t-hover);}
.pm-burger span:nth-child(1){top:14px;}
.pm-burger span:nth-child(2){top:20px;}
.pm-burger span:nth-child(3){top:26px;}
body.pm-offen .pm-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.pm-offen .pm-burger span:nth-child(2){opacity:0;}
body.pm-offen .pm-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Mobiles Vollbildmenue */
/* Der obere Rand folgt der tatsaechlichen Leistenhoehe. Das Header-Skript
   meldet sie als --pm-head-h; 74px ist der Rueckfall ohne Skript. Fest
   gesetzte 64px lagen hinter der Leiste. */
.pm-mob{display:none;position:fixed;inset:var(--pm-head-h,74px) 0 0;z-index:99;background:#fff;
  flex-direction:column;padding:28px 22px 32px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-hover),transform var(--t-hover),visibility var(--t-hover);overflow-y:auto;}
body.pm-offen .pm-mob{opacity:1;visibility:visible;transform:none;}
.pm-mob__such{max-width:none;margin:0 0 26px;}
.pm-mob__nav a{display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;border-bottom:1px solid var(--linie);
  font-size:1.1875rem;font-weight:500;color:var(--blau);letter-spacing:-.01em;}
.pm-mob__nav a:first-child{border-top:1px solid var(--linie);}
.pm-mob__nav svg{color:var(--hell);}
.pm-mob__fuss{margin-top:auto;padding-top:32px;}
.pm-mob__fuss .pm-cta{display:block;text-align:center;padding:16px 20px;
  background:var(--blau);color:#fff !important;border-radius:8px;
  font-size:0.9375rem;font-weight:500;}
.pm-mob__spr{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.pm-mob__spr a{padding:8px 14px;border:1px solid var(--linie);border-radius:100px;
  font-size:0.8438rem;color:var(--grau);}
.pm-mob__spr a.is-akt{border-color:var(--blau);color:var(--blau);font-weight:600;}
.pm-mob__spr a{min-width:44px;text-align:center;letter-spacing:.04em;}
/* Ueberschrift ueber den Chips — zweistellige Kuerzel allein sagen nicht,
   wofuer sie stehen. */
.pm-mob__sprkopf{display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-size:var(--fs-kicker);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--schwach);}
.pm-mob__sprkopf svg{color:var(--akzent);flex:none;}

/* Aktiver Menuepunkt: Goldstrich unter dem Wort. Nicht fett und nicht
   farbig — beides kollidierte mit dem Hover-Zustand. */
.pm-nav2 a{position:relative;}
.pm-nav2 a.is-hier::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:2px;background:var(--akzent);border-radius:2px;}
.pm-mob__nav a.is-hier{color:var(--akzent);}

@media(max-width:1180px){
  .pm-nav2{gap:20px;}
  .pm-such{max-width:210px;}
  .pm-such input{padding-right:40px;}
}
@media(max-width:1000px){
  /* Mobil ist die Leiste ohnehin knapp; der geschrumpfte Zustand muss
     kleiner sein als der normale, sonst waechst sie beim Scrollen. */
  .pm-head__in{height:74px;padding:0 22px;gap:0;}
  .pm-head.is-klein .pm-head__in{height:60px;}
  /* .pm-such NUR in der Kopfzeile ausblenden: das mobile Menue nutzt
     dieselbe Klasse und verschwand sonst mit. */
  .pm-nav2,.pm-head .pm-such,.pm-lang,.pm-head .pm-cta{display:none;}
  .pm-burger{display:block;}
  .pm-mob{display:flex;}
}
/* --- Fußzeile ----------------------------------------------------------- */
.pm-foot{background:var(--blau);position:relative;overflow:hidden;}
.pm-foot::after{content:"";position:absolute;top:-60%;right:-8%;
  width:48%;height:200%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(184,134,59,.09),transparent 72%);}
.pm-foot .pm-wrap{position:relative;z-index:1;max-width:1360px;}

/* Zeile 1: Marke + Navigation */
/* Vollbreite Flaeche, unabhaengig davon wie breit der Theme-Container ist.
   calc(50% - 50vw) korrigiert sich selbst: bei vollbreitem Elternelement = 0. */
.pm-bleed{width:100vw;margin-left:calc(50% - 50vw);}
/* Logospalte schmaler und oben ausgerichtet: mittig zur Navigation
   sah nach Ausrichtung auf nichts aus, weil die Kicker oben stehen.
   Spaltenabstand von --sp-col auf --sp-block: 64 px zwischen vier
   kurzen Linklisten war die groesste Flaeche im Footer. */
.pm-foot__oben{display:grid;grid-template-columns:minmax(180px,auto) 1fr;
  gap:var(--sp-block);align-items:center;
  padding:var(--sp-lead) 0 var(--sp-block);}
/* Der Claim steckt jetzt wieder in der Logodatei — eine separate
   Textzeile im Footer entfaellt damit. */
.pm-foot__logo img{height:64px !important;width:auto !important;max-width:none !important;display:block;}
.pm-foot__nav{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-block);}
.pm-foot__lbl{font-size:0.625rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--akzent-hell);margin:0 0 var(--sp-card);}
.pm-foot__nav ul{display:flex;flex-direction:column;gap:1px;}
.pm .pm-foot__nav a,.pm .pm-foot__nav a:link,.pm .pm-foot__nav a:visited{
  display:inline-block;font-size:0.9062rem;color:var(--hell);padding:6px 0;
  transition:color var(--t-hover),transform var(--t-hover);}
.pm .pm-foot__nav a:hover{color:#fff;transform:translateX(3px);}

/* Zeile 2: Hinweis + Belege */
.pm-foot__mitte{display:grid;grid-template-columns:1fr auto;gap:var(--sp-col);
  align-items:center;padding:var(--sp-block) 0;
  border-top:1px solid rgba(255,255,255,.12);}
.pm-foot__hinweis{font-size:0.8125rem;line-height:1.7;color:var(--hell);margin:0;max-width:78ch;}
.pm-foot__hinweis strong{color:#fff;font-weight:600;}
.pm .pm-foot__hinweis a,.pm .pm-foot__hinweis a:link,.pm .pm-foot__hinweis a:visited{
  color:#fff;border-bottom:1px solid rgba(255,255,255,.28);}
.pm .pm-foot__hinweis a:hover{border-color:var(--akzent);}

/* Belege: kein Kasten, sondern Haarlinien-Trennung */
.pm-foot__belege{display:flex;align-items:center;gap:28px;flex:none;}
.pm-foot__bg{display:flex;align-items:center;gap:13px;position:relative;}
.pm-foot__bg + .pm-foot__bg{padding-left:28px;}
.pm-foot__bg + .pm-foot__bg::before{content:"";position:absolute;left:0;top:2px;bottom:2px;
  width:1px;background:rgba(255,255,255,.14);}
.pm-foot__bgic{flex:none;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;
  justify-content:center;color:var(--akzent-hell);}
.pm-foot__bgtx{font-size:0.75rem;line-height:1.45;color:var(--hell);white-space:nowrap;}
.pm-foot__bgtx b{display:block;font-size:0.8438rem;font-weight:600;color:#fff;
  letter-spacing:-.005em;margin-bottom:1px;}
.pm-foot__sterne{display:flex;gap:2px;margin-bottom:5px;}
.pm .pm-foot__bgtx a,.pm .pm-foot__bgtx a:link,.pm .pm-foot__bgtx a:visited{
  color:var(--hell);border-bottom:1px solid rgba(255,255,255,.22);}
.pm .pm-foot__bgtx a:hover{color:#fff;border-color:var(--akzent-hell);}

/* Zeile 3: Schlusszeile */
.pm-foot__unten{border-top:1px solid rgba(255,255,255,.12);
  padding:20px 0 var(--sp-block);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:0.7812rem;color:var(--hell);}
.pm .pm-foot__unten a,.pm .pm-foot__unten a:link,.pm .pm-foot__unten a:visited{
  color:var(--hell);border-bottom:1px solid rgba(255,255,255,.2);}
.pm .pm-foot__unten a:hover{color:#fff;border-color:var(--akzent-hell);}
/* Complianz-Verwalten-Reiter ausblenden: der Zugang laeuft ueber den
   Footer-Link (Klasse cmplz-show-banner, Ausloeser in functions.php). */
#cmplz-manage-consent{display:none;}


@media(max-width:1100px){
  .pm-foot__mitte{grid-template-columns:1fr;gap:var(--sp-block);align-items:start;}
  .pm-foot__hinweis{max-width:none;}
}
@media(max-width:1000px){
  /* Mobil steht das Logo ueber der Navigation und wird dort zentriert.
     Links angeschlagen wirkte es wie ein vergessenes Element, weil
     darunter zwei gleich breite Linkspalten stehen. */
  .pm-foot__oben{grid-template-columns:1fr;gap:var(--sp-block);justify-items:center;}
  .pm-foot__logo{display:block;}
  .pm-foot__nav{justify-items:start;width:100%;}
  .pm-foot__nav{grid-template-columns:1fr 1fr;gap:var(--sp-block) var(--sp-card);}
}
@media(max-width:560px){
  .pm-foot__belege{flex-direction:column;align-items:flex-start;gap:18px;}
  .pm-foot__bg + .pm-foot__bg{padding-left:0;padding-top:18px;}
  .pm-foot__bg + .pm-foot__bg::before{left:0;right:auto;top:0;bottom:auto;
    width:56px;height:1px;}
  .pm-foot__bgtx{white-space:normal;}
  .pm-foot__unten{flex-direction:column;align-items:flex-start;gap:12px;}
  /* Mobil groesser: das Logo traegt hier den Claim und ist der einzige
     Absender im Bild. Haarlinie darunter schliesst den Block ab. */
  .pm-foot__logo img{height:76px !important;}
  .pm-foot__logo{padding-bottom:var(--sp-card);
    border-bottom:1px solid rgba(255,255,255,.14);width:100%;
    display:flex;justify-content:center;}
}

/* ===========================================================
   RECHTSTEXTE  ·  .pm-legal
   Impressum, Datenschutz, AGB und Affiliate-Hinweis nutzen
   denselben Block. Er lag bis 14.08.2026 wortgleich in jedem
   Seitencode — derselbe Fehler musste dreimal repariert werden.
   Ab jetzt: eine Fassung, hier.

   Alle Regeln tragen das .pm-Praefix. Ohne es hat ".pm-legal p"
   nur 0,1,1 und verliert gegen ".pm .pm-text{margin:0}" aus
   Ebene 2 (0,2,0) — dann stehen saemtliche Absaetze und
   Zwischenueberschriften ohne Abstand aufeinander.
   =========================================================== */
.pm-legal{background:#fff;}
.pm-legal__wrap{max-width:820px;}
.pm .pm-legal .pm-h1{margin-bottom:var(--tp-head);}
.pm .pm-legal__intro{margin-bottom:var(--sp-lead);}

.pm .pm-legal h2{font-size:1.5rem;line-height:1.3;font-weight:600;color:var(--blau);
  letter-spacing:-.015em;margin:var(--sp-lead) 0 var(--tp-title);
  padding-top:var(--sp-block);border-top:1px solid var(--linie);}
.pm .pm-legal h2:first-of-type{padding-top:0;border-top:0;}
.pm .pm-legal h3{font-size:1.0625rem;line-height:1.35;font-weight:600;color:var(--blau);
  margin:var(--sp-block) 0 var(--tp-title);}

.pm .pm-legal p{margin:0 0 var(--sp-card);}
.pm .pm-legal p:last-child{margin-bottom:0;}

.pm .pm-legal ul{margin:0 0 var(--sp-card);padding-left:0 !important;max-width:var(--measure);}
.pm .pm-legal ul li{position:relative;padding-left:20px;margin-bottom:8px;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2);}
.pm .pm-legal ul li::before{content:"";position:absolute;left:2px;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--akzent);opacity:.7;}

.pm .pm-legal a{color:var(--blau);border-bottom:1px solid var(--linie);
  word-break:break-word;transition:border-color var(--t-hover) var(--ease-out);}
.pm .pm-legal a:hover{border-color:var(--akzent);}

/* Adresskasten (Impressum) */
.pm .pm-legal__daten{max-width:66ch;border:1px solid var(--linie);border-radius:12px;
  padding:24px 28px;margin:0 0 var(--sp-card);}
.pm .pm-legal__daten p{margin:0;}

/* Download-Zeile (AGB) */
.pm .pm-legal__dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin:0 0 var(--sp-lead);}
.pm .pm-legal__dl a{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:15px 20px;border:1px solid var(--linie);border-radius:2px;
  font-size:0.9062rem;font-weight:500;color:var(--blau);border-bottom-width:1px;
  transition:border-color var(--t-hover) var(--ease-out),
             background var(--t-hover) var(--ease-out);}
.pm .pm-legal__dl a:hover{border-color:var(--akzent);background:var(--flaeche);}
.pm-legal__dl svg{flex:0 0 auto;opacity:.7;}
@media(max-width:640px){.pm .pm-legal__dl{grid-template-columns:1fr;}}


/* ===========================================================
   MAGAZIN-ARCHIV  ·  .pm-mag
   Kategorieseiten (/kaufratgeber/, /handel/, …) und der
   Magazin-Hub. Zeitungslogik: der Rhythmus wechselt viermal,
   nicht die Farbe.

     1  Leitartikel gross + drei Kurzmeldungen daneben
     2  Raster mit Bild
     3  Textliste ohne Bild
     4  Seitenzahlen
     5  Weitere Ressorts

   Alle Formen sind bereits im Haus: Bildrahmen, Goldkicker und
   der Goldstrich beim Ueberfahren stammen von den
   Testbericht-Karten. Kein zweites Formenvokabular.
   =========================================================== */

/* ---------- Kopf ----------
   Einspaltig, solange kein Lead da ist. Mit Lead zweispaltig: links
   Kicker und Titel, rechts der Text — einspaltig blieb die rechte
   Bildschirmhaelfte leer. */
.pm .pm-mag__kopf{margin:0 0 var(--sp-lead);max-width:720px;}
.pm .pm-mag__kopf--zwei{
  max-width:none;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-col);align-items:start;}
.pm .pm-mag__kopf--zwei .pm-lead{max-width:46ch;}
@media(max-width:900px){
  /* Gestapelt traegt die H1 den Standardabstand (--tp-head);
     der Rasterabstand wuerde sich sonst daraufstapeln. */
  .pm .pm-mag__kopf--zwei{grid-template-columns:1fr;gap:0;align-items:start;}
}

/* ---------- 1 · Leitartikel und Kurzmeldungen ---------- */
.pm-mag__auftakt{
  display:grid;grid-template-columns:1.35fr 1fr;gap:var(--sp-col);
  align-items:start;border-top:1px solid var(--linie);
  padding-top:var(--sp-block);
}
.pm .pm-mag__lead-a{display:block;color:var(--blau) !important;}
.pm-mag__lead-bild{
  aspect-ratio:16/9;background:#fff;overflow:hidden;
  border:1px solid var(--linie);border-radius:12px;
  transition:border-color var(--t-hover) var(--ease-out),
             box-shadow var(--t-hover) var(--ease-out);
}
.pm-mag__lead-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out);}
.pm .pm-mag__lead-a:hover .pm-mag__lead-bild{
  border-color:var(--hell);box-shadow:0 16px 36px rgba(27,38,59,.10);}
.pm .pm-mag__lead-a:hover .pm-mag__lead-bild img{transform:scale(1.04);}

.pm .pm-mag__kicker{
  display:block;font-size:0.6562rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);margin:18px 0 10px;}
.pm .pm-mag__lead-titel{
  font-size:clamp(1.25rem,1.05rem + .8vw,1.5rem);line-height:1.25;font-weight:600;
  letter-spacing:-.018em;color:var(--blau);margin:0 0 10px;display:inline;
  background-image:linear-gradient(var(--akzent),var(--akzent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  transition:background-size var(--t-panel) var(--ease-out);}
.pm .pm-mag__lead-a:hover .pm-mag__lead-titel{background-size:100% 1.5px;}
.pm .pm-mag__lead-text{
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--grau);
  margin:12px 0 0;max-width:52ch;}

/* Kurzmeldungen */
.pm-mag__neben{display:flex;flex-direction:column;}
.pm .pm-mag__spaltentitel{
  font-size:0.6562rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--schwach);margin:0 0 var(--sp-card);
  padding-bottom:12px;border-bottom:1px solid var(--linie);}
.pm a.pm-mag__kurz{
  display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;
  padding:0 0 var(--sp-card);margin-bottom:var(--sp-card);
  border-bottom:1px solid var(--linie);color:var(--blau) !important;
  transition:padding-left var(--t-hover) var(--ease-out);}
.pm a.pm-mag__kurz:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.pm a.pm-mag__kurz:hover{padding-left:8px;}
.pm-mag__kurz-bild{aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#fff;
  border:1px solid var(--linie);}
.pm-mag__kurz-bild img{width:100%;height:100%;object-fit:cover;}
.pm .pm-mag__kurz-titel{
  font-size:0.9062rem;line-height:1.35;font-weight:600;color:var(--blau);margin:0;}
.pm a.pm-mag__kurz .pm-mag__kicker{margin:0 0 6px;font-size:0.5938rem;}

/* ---------- 2 · Raster mit Bild ---------- */
.pm-mag__raster{
  border-top:1px solid var(--linie);padding-top:var(--sp-block);
  margin-top:var(--sp-sec);}
.pm-mag__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-block) var(--sp-card);margin-top:var(--sp-card);}
.pm a.pm-mag__karte{display:flex;flex-direction:column;color:var(--blau) !important;}
.pm-mag__karte-bild{
  aspect-ratio:4/3;background:#fff;overflow:hidden;
  border:1px solid var(--linie);border-radius:10px;
  transition:border-color var(--t-hover) var(--ease-out),
             box-shadow var(--t-hover) var(--ease-out);}
.pm-mag__karte-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out);}
.pm a.pm-mag__karte:hover .pm-mag__karte-bild{
  border-color:var(--hell);box-shadow:0 16px 36px rgba(27,38,59,.10);}
.pm a.pm-mag__karte:hover .pm-mag__karte-bild img{transform:scale(1.04);}
.pm .pm-mag__karte-titel{
  font-size:0.9375rem;line-height:1.35;font-weight:600;color:var(--blau);margin:0;
  display:inline;
  background-image:linear-gradient(var(--akzent),var(--akzent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  transition:background-size var(--t-panel) var(--ease-out);}
.pm a.pm-mag__karte:hover .pm-mag__karte-titel{background-size:100% 1.5px;}
.pm a.pm-mag__karte .pm-mag__kicker{margin:14px 0 8px;font-size:0.5938rem;}

/* ---------- 3 · Textliste, bewusst ohne Bild ---------- */
.pm-mag__textliste{
  border-top:1px solid var(--linie);padding-top:var(--sp-block);
  margin-top:var(--sp-sec);}
.pm a.pm-mag__zeile{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--linie);position:relative;
  color:var(--blau) !important;
  transition:padding-left var(--t-hover) var(--ease-out);}
.pm a.pm-mag__zeile::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:0;height:2px;background:var(--akzent);
  transition:width var(--t-hover) var(--ease-out);}
.pm a.pm-mag__zeile:hover{padding-left:22px;}
.pm a.pm-mag__zeile:hover::before{width:14px;}
.pm .pm-mag__zeile-kicker{
  font-size:0.5938rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);min-width:88px;}
.pm .pm-mag__zeile-titel{font-size:0.9062rem;font-weight:600;color:var(--blau);}
/* Lesezeit statt Datum: ein Datum laesst auch topaktuelle Beitraege alt
   wirken. Das Datum bleibt als <time> im Markup, nur unsichtbar —
   Suchmaschinen brauchen es. */
.pm .pm-mag__zeit{font-size:0.75rem;color:var(--schwach);white-space:nowrap;}
.pm .pm-mag__datum{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- 4 · Seitenzahlen ---------- */
.pm-mag__seiten{
  display:flex;gap:8px;align-items:center;justify-content:center;
  margin-top:var(--sp-sec);}
.pm .pm-mag__seiten a,
.pm .pm-mag__seiten span{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--linie);
  font-size:0.8438rem;font-weight:600;color:var(--blau);
  transition:border-color var(--t-hover) var(--ease-out),
             background var(--t-hover) var(--ease-out);}
.pm .pm-mag__seiten a:hover{border-color:var(--akzent);background:var(--flaeche);}
.pm .pm-mag__seiten .current{background:var(--blau);border-color:var(--blau);color:#fff;}
.pm .pm-mag__seiten .next,
.pm .pm-mag__seiten .prev{
  width:auto;height:auto;border:0;border-radius:0;padding:0 0 3px;margin-left:8px;
  border-bottom:1.5px solid var(--akzent);}
.pm .pm-mag__seiten .next:hover,
.pm .pm-mag__seiten .prev:hover{background:none;border-bottom-color:var(--blau);}

/* ---------- 5 · Weitere Ressorts ---------- */
/* Der ganze Block entfaellt im Template, solange es keine zweite
   Kategorie gibt — sonst steht eine leere Ueberschrift auf der Seite. */
.pm-mag__ressorts{
  border-top:1px solid var(--linie);padding-top:var(--sp-block);
  margin-top:var(--sp-sec);}
.pm-mag__ressorts-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--sp-block);margin-top:var(--sp-card);}
.pm a.pm-mag__ressort{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--linie);color:var(--blau) !important;
  transition:padding-left var(--t-hover) var(--ease-out);}
.pm a.pm-mag__ressort:hover{padding-left:12px;}
.pm-mag__ressort-ic{
  width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--linie);background:#fff;color:var(--akzent);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--t-hover) var(--ease-out),
             background var(--t-hover) var(--ease-out);}
.pm-mag__ressort-ic svg{width:16px;height:16px;}
.pm a.pm-mag__ressort:hover .pm-mag__ressort-ic{
  border-color:var(--akzent);background:rgba(184,134,59,.09);}
.pm .pm-mag__ressort-t{display:block;font-size:0.9062rem;font-weight:600;}
.pm .pm-mag__ressort-s{display:block;font-size:0.75rem;line-height:1.4;
  color:var(--grau);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pm-mag__ressort-ar{
  width:7px;height:7px;justify-self:end;
  border-right:1.5px solid var(--hell);border-bottom:1.5px solid var(--hell);
  transform:rotate(-45deg);
  transition:border-color var(--t-hover) var(--ease-out),
             transform var(--t-hover) var(--ease-out);}
.pm a.pm-mag__ressort:hover .pm-mag__ressort-ar{
  border-color:var(--akzent);transform:rotate(-45deg) translate(2px,2px);}

/* ---------- Mobil ---------- */
@media(max-width:1100px){
  .pm-mag__grid{grid-template-columns:repeat(2,1fr);}
  .pm-mag__ressorts-grid{grid-template-columns:1fr 1fr;column-gap:var(--sp-col);}
}
@media(max-width:900px){
  .pm-mag__auftakt{grid-template-columns:1fr;gap:var(--sp-block);}
  .pm-mag__raster,.pm-mag__textliste,.pm-mag__ressorts{margin-top:var(--sp-sec);}
}
@media(max-width:700px){
  .pm-mag__ressorts-grid{grid-template-columns:1fr;}
  .pm a.pm-mag__zeile{grid-template-columns:1fr auto;gap:6px 14px;}
  .pm .pm-mag__zeile-kicker{grid-column:1/-1;min-width:0;}
}
@media(max-width:560px){
  .pm-mag__grid{grid-template-columns:1fr;}
}


/* ===========================================================
   MAGAZINBEITRAG  ·  .pm-post
   single.php fuer Kategoriebeitraege.

   GRUNDREGEL: Beitraege liefern KEIN eigenes Design mehr.
   Die Pipeline schreibt nur noch Klassen, das Aussehen steht
   hier. Vorher trug jeder Beitrag seine Farben als style=""
   im Text — dadurch liefen die Fassungen auseinander (ein
   Beitrag Schwarz/Grau, der naechste Navy/Gold).
   =========================================================== */

/* Der Beitrag beginnt direkt unter der Kopfzeile — eine volle
   Sektionshoehe Vorlauf laesst die Seite leer wirken. */
.pm .pm-post > section{padding-top:var(--sp-block);}

/* Schmalerer Satzspiegel als auf den Uebersichtsseiten. Vorher war
   die Textspalte breit, der Text darin aber auf Lesebreite gedeckelt —
   die Differenz stand als Loch zwischen Text und Verzeichnis.
   1060 = 808 Text + 32 Abstand + 220 Leiste, also exakt aufgeteilt. */
.pm .pm-post .pm-wrap{max-width:1060px;}

/* ---------- Kopf ---------- */
.pm .pm-post__kopf{max-width:760px;margin:0 0 var(--sp-lead);}
.pm .pm-post__kicker{
  display:block;font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);margin:0 0 var(--tp-kicker);}
.pm .pm-post__lead{
  font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--grau);
  margin:var(--tp-head) 0 0;max-width:52ch;}
/* Zeile mit Trennpunkten statt Chips: drei reine Angaben brauchen
   kein Gehaeuse, und Chips laden zum Klicken ein, wo nichts folgt. */
.pm .pm-post__meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:0.7812rem;color:var(--schwach);margin:var(--sp-block) 0 0;}
/* Jede Angabe bleibt als Ganzes zusammen — sonst rutscht mobil das
   Uhrsymbol allein in eine eigene Zeile. */
.pm .pm-post__meta-teil{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:inherit;}
.pm-post__meta svg{width:13px;height:13px;color:var(--akzent);flex:none;}
.pm-post__meta .pm-post__punkt{opacity:.5;}

/* ---------- Beitragsbild ---------- */
.pm-post__bild{
  aspect-ratio:21/9;background:#fff;overflow:hidden;
  border:1px solid var(--linie);border-radius:12px;margin:0 0 var(--sp-lead);}
.pm-post__bild img{width:100%;height:100%;object-fit:cover;}
@media(max-width:700px){ .pm-post__bild{aspect-ratio:16/9;} }

/* ---------- Raster: Text + Inhaltsverzeichnis ---------- */
/* Textspalte bekommt den Platz, die Leiste bleibt Leiste.
   Spaltenabstand bewusst kleiner als --sp-col: das Verzeichnis ist
   eine Randnotiz, kein zweiter Inhaltsblock — mit 64 px Luft sah der
   Text daneben schmaler aus, als er ist. */
.pm-post__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 220px;max-width:100%;
  column-gap:var(--sp-block);row-gap:0;align-items:start;
  border-top:1px solid var(--linie);padding-top:var(--sp-block);}
@media(max-width:1000px){
  .pm-post__grid{grid-template-columns:1fr;gap:var(--sp-block);}
}

/* Inhaltsverzeichnis */
.pm-post__nav{position:sticky;top:120px;}
.pm .pm-post__nav-titel{
  font-size:0.6562rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--schwach);margin:0 0 var(--sp-card);
  padding-bottom:12px;border-bottom:1px solid var(--linie);}
.pm .pm-post__nav a{
  display:block;font-size:0.8125rem;line-height:1.4;color:var(--grau);
  padding:0 0 0 12px;margin-bottom:11px;
  border-left:1.5px solid transparent;
  transition:color var(--t-hover) var(--ease-out),
             border-color var(--t-hover) var(--ease-out);}
.pm .pm-post__nav a:hover{color:var(--blau);border-left-color:var(--linie);}
.pm .pm-post__nav a.is-hier{color:var(--blau);font-weight:600;border-left-color:var(--akzent);}
@media(max-width:1000px){
  .pm-post__nav{position:static;order:-1;margin-bottom:var(--sp-block);}
  .pm .pm-post__nav a{display:inline-block;margin:0 14px 8px 0;padding-left:0;
    border-left:0;border-bottom:1.5px solid transparent;}
  .pm .pm-post__nav a.is-hier{border-left:0;border-bottom-color:var(--akzent);}
}

/* ---------- Fliesstext ---------- */
/* Der Reset in Ebene 2 setzt overflow-wrap:normal, damit Ueberschriften
   nicht mitten im Wort brechen. Im Fliesstext ist das falsch: lange
   Komposita wie "300-Euro-High-Cut-Bergschuh" finden mobil sonst keinen
   Umbruchpunkt und schieben die ganze Seite auf. */
.pm .pm-post__text{max-width:none;min-width:0;}
.pm .pm-post__text,
.pm .pm-post__text p,
.pm .pm-post__text li,
.pm .pm-post__text td,
.pm .pm-post__text a,
.pm .pm-post__text h2,
.pm .pm-post__text h3{overflow-wrap:break-word;word-break:normal;}
.pm .pm-post__text p{
  font-size:var(--fs-body);line-height:1.8;color:var(--grau);
  margin:0 0 var(--sp-card);}
.pm .pm-post__text h2{
  font-size:clamp(1.25rem,1.05rem + .8vw,1.5rem);line-height:1.25;font-weight:600;
  letter-spacing:-.018em;color:var(--blau);
  margin:var(--sp-lead) 0 var(--sp-card);
  padding-bottom:10px;border-bottom:1.5px solid var(--blau);}
.pm .pm-post__text h3{
  font-size:1.125rem;line-height:1.35;font-weight:600;color:var(--blau);
  margin:var(--sp-block) 0 var(--tp-title);}
/* Der fett gesetzte Antwortsatz direkt unter jeder Zwischenueberschrift */
.pm .pm-post__text h2 + p strong:first-child,
.pm .pm-post__text h3 + p strong:first-child{color:var(--blau);}
.pm .pm-post__text a{
  color:var(--blau);border-bottom:1px solid var(--linie);
  transition:border-color var(--t-hover) var(--ease-out);}
.pm .pm-post__text a:hover{border-color:var(--akzent);}
.pm .pm-post__text img{
  width:100%;height:auto;border-radius:12px;border:1px solid var(--linie);
  margin:var(--sp-block) 0;}
.pm .pm-post__text ul{margin:0 0 var(--sp-card);}
.pm .pm-post__text ul li{
  position:relative;padding-left:20px;margin-bottom:8px;
  font-size:var(--fs-body);line-height:1.7;color:var(--grau);}
.pm .pm-post__text ul li::before{
  content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--akzent);opacity:.7;}

/* ---------- Tabellen ---------- */
.pm .pm-post__tabelle{overflow-x:auto;margin:var(--sp-block) 0;}
.pm .pm-post__tabelle table{width:100%;border-collapse:collapse;font-size:0.9062rem;}
.pm .pm-post__tabelle th{
  background:var(--blau);color:#fff;font-weight:600;text-align:left;
  padding:12px 16px;}
.pm .pm-post__tabelle td{
  padding:11px 16px;border-bottom:1px solid var(--linie);color:var(--grau);}
.pm .pm-post__tabelle td:first-child{font-weight:600;color:var(--blau);}
.pm .pm-post__tabelle tr:nth-child(even) td{background:var(--flaeche);}

/* ---------- Modul: Das Wichtigste auf einen Blick ---------- */
.pm .pm-post__box{
  background:var(--blau);border-radius:12px;padding:26px 30px;
  margin:var(--sp-block) 0;}
.pm .pm-post__box-titel{
  font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);margin:0 0 var(--sp-card);}
.pm .pm-post__box ul{margin:0;}
.pm .pm-post__box ul li{
  padding:0 0 12px;margin:0 0 12px;color:#fff;font-size:0.9062rem;line-height:1.55;
  border-bottom:1px solid rgba(255,255,255,.14);}
.pm .pm-post__box ul li::before{display:none;}
.pm .pm-post__box ul li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0;}

/* ---------- Modul: Zitat ---------- */
.pm .pm-post__zitat{
  border-left:2px solid var(--akzent);padding:2px 0 2px 24px;
  margin:var(--sp-lead) 0;}
.pm .pm-post__zitat p{
  font-size:1.125rem;line-height:1.6;font-style:italic;color:var(--blau);
  margin:0 0 10px;}
.pm .pm-post__zitat cite{
  display:block;font-size:0.7812rem;font-style:normal;color:var(--schwach);}

/* ---------- Modul: Aus der Praxis (frueher Expert Insight) ----------
   Englische Marketingbegriffe brechen den Institutston — dieselbe
   Regel wie bei den Kickern. */
.pm .pm-post__praxis{
  background:var(--flaeche);border-left:2px solid var(--blau);
  padding:20px 24px;margin:var(--sp-block) 0;}
.pm .pm-post__praxis-titel{
  font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);margin:0 0 8px;}
.pm .pm-post__praxis p{margin:0;font-size:0.9062rem;line-height:1.7;}

/* ---------- Modul: Hinweis ---------- */
.pm .pm-post__hinweis{
  border-left:2px solid var(--akzent);background:var(--akzent-flaeche);
  padding:18px 22px;margin:var(--sp-block) 0;}
.pm .pm-post__hinweis p{margin:0;font-size:0.9062rem;line-height:1.7;}
.pm .pm-post__hinweis strong{color:var(--blau);}

/* ---------- Modul: Verweis auf eine PM-Seite ---------- */
.pm .pm-post__cta{
  border-left:2px solid var(--blau);background:var(--flaeche);
  padding:18px 22px;margin:var(--sp-block) 0;}
.pm .pm-post__cta p{margin:0;font-size:0.9062rem;line-height:1.7;}

/* ---------- Modul: FAQ ---------- */
.pm .pm-post__faq{margin:var(--sp-block) 0;}
.pm .pm-post__faq-item{
  border-bottom:1px solid var(--linie);padding:0 0 var(--sp-card);
  margin-bottom:var(--sp-card);}
.pm .pm-post__faq-item:last-child{border-bottom:0;margin-bottom:0;}
.pm .pm-post__faq-f{
  display:block;font-size:0.9688rem;font-weight:600;color:var(--blau);
  margin:0 0 var(--tp-title);}
.pm .pm-post__faq-a{margin:0;font-size:0.9062rem;line-height:1.75;}

/* ---------- Modul: Schluesselerkenntnisse ---------- */
.pm .pm-post__fazit{
  border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);
  padding:26px 30px;margin:var(--sp-block) 0;}
.pm .pm-post__fazit-titel{
  font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);margin:0 0 var(--sp-card);}
.pm .pm-post__fazit ul li{
  padding:0 0 10px 20px;margin:0 0 10px;
  border-bottom:1px solid var(--linie);}
.pm .pm-post__fazit ul li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0;}

/* ---------- Fusszeile: weiter im Ressort ---------- */
.pm-post__weiter{
  border-top:1px solid var(--linie);padding-top:var(--sp-block);
  margin-top:var(--sp-sec);}


/* ---------- Mobil, in einem Block ----------
   Alle Bausteine des Beitrags an einer Stelle, damit nicht bei jeder
   Korrektur eine neue Ausnahme irgendwo dazukommt. */
@media(max-width:1000px){
  /* Verzeichnis wird zur Zeile ueber dem Text und verliert das Sticky —
     sonst klebt es beim Scrollen ueber dem Inhalt. */
  .pm-post__nav{position:static;top:auto;order:-1;
    margin:0 0 var(--sp-block);padding-bottom:var(--sp-card);
    border-bottom:1px solid var(--linie);}
  .pm .pm-post .pm-wrap{max-width:none;}
}

@media(max-width:700px){
  .pm-post__bild{aspect-ratio:4/3;}
  .pm .pm-post__kopf{max-width:none;}
  .pm .pm-post__lead{max-width:none;}

  /* Kaesten: weniger Innenabstand, sonst bleibt kaum Textbreite */
  .pm .pm-post__box,
  .pm .pm-post__fazit{padding:20px 20px;}
  .pm .pm-post__praxis,
  .pm .pm-post__hinweis{padding:16px 18px;}
  .pm .pm-post__zitat{padding-left:18px;}
  .pm .pm-post__zitat p{font-size:1.0312rem;}

  /* Tabellen scrollen in ihrem Kasten. KEINE negativen Aussenraender:
     zusammen mit overflow-x sprengen sie den Seitenbereich. */
  .pm .pm-post__tabelle{overflow-x:auto;}
  .pm .pm-post__tabelle table{font-size:0.8438rem;min-width:480px;}
  .pm .pm-post__tabelle th,
  .pm .pm-post__tabelle td{padding:10px 12px;}

  .pm .pm-post__text h2{margin-top:var(--sp-lead);}
  .pm .pm-post__text img{margin:var(--sp-block) 0;}
  .pm .pm-post__meta{gap:6px;font-size:0.75rem;}
}

/* ---------- Altbeitraege mit eigenen Inline-Farben ----------
   Bis die Pipeline nur noch Klassen liefert, bringen die bestehenden
   Beitraege ihr Design als style="" mit. Diese Regeln fangen die
   groebsten Folgen ab: feste Innenabstaende und Tabellen mit fester
   Spaltenaufteilung sprengen sonst mobil das Raster. */
@media(max-width:700px){
  .pm .pm-post__text div[style]{
    padding-left:18px !important;padding-right:18px !important;max-width:100%;}
  .pm .pm-post__text div[style*="overflow-x"]{
    padding-left:0 !important;padding-right:0 !important;}
  .pm .pm-post__text table[style]{table-layout:auto !important;min-width:480px;}
}
.pm .pm-post__text img[style]{max-width:100% !important;height:auto !important;}
.pm .pm-post__text blockquote[style]{margin-left:0 !important;margin-right:0 !important;}

/* ============================================================
   SEITE 404 und SUCHERGEBNISSE  ·  .pm-404*
   Seiten-CSS, gebaut wie /lizenzsuche und /testsiegel.
   Das Suchfeld übernimmt die Werte des Lizenzsuche-Moduls
   (dort .pm-lic__form) unverändert — gleiche Rahmenstärke,
   gleicher Radius, gleiche Polsterung, gleiche Schriftgrößen.
   ============================================================ */

/* ---- Auftakt ---- */
.pm .pm-404 .pm-skopf{margin-bottom:0;}

/* ---- Suchmodul, zweispaltig wie .pm-find__grid ---- */
.pm .pm-404s{background:var(--flaeche);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);}
.pm .pm-404s__in{display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--sp-col);align-items:center;}
.pm .pm-404s .pm-skopf{margin-bottom:0;max-width:540px;}
.pm .pm-404s .pm-text{margin-top:var(--tp-para);}

/* ---- Suchfeld ---- */
.pm form.pm-404f{
  display:flex !important;background:#fff !important;
  border:1.5px solid var(--linie) !important;border-radius:8px !important;
  overflow:hidden !important;transition:var(--t-hover) var(--ease-out);
  max-width:520px;padding:0 !important;margin:0;
}
.pm form.pm-404f:focus-within{
  border-color:var(--blau) !important;box-shadow:0 0 0 4px rgba(27,38,59,.08);}
.pm form.pm-404f input[type="search"]{
  flex:1;border:0 !important;outline:0 !important;box-shadow:none !important;
  background:transparent !important;border-radius:0 !important;
  padding:20px 24px !important;font-family:var(--f);font-size:1.0625rem;font-weight:500;
  color:var(--blau);min-width:0;-webkit-appearance:none;appearance:none;
}
.pm form.pm-404f input::placeholder{color:var(--schwach);font-weight:400;letter-spacing:.02em;}
.pm form.pm-404f input::-webkit-search-cancel-button{display:none;}

.pm form.pm-404f button.pm-404f__go,
.pm form.pm-404f button.pm-404f__go:hover,
.pm form.pm-404f button.pm-404f__go:focus{
  padding:20px 32px !important;border-radius:0 !important;background:var(--blau);
  color:#fff;border:0;font-family:var(--f);font-size:0.9375rem;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-hover) var(--ease-out);
}
.pm form.pm-404f button.pm-404f__go:hover{background:var(--blau-2);}

/* ---- Verweis auf die Lizenzsuche, Muster von .pm-find__help ---- */
.pm .pm-404s__hin{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:520px;margin:var(--sp-card) 0 0;padding:15px 0 0;
  border-top:1px solid var(--linie);}
.pm .pm-404s__lbl{font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);white-space:nowrap;}

/* ---- Bereiche ---- */
.pm .pm-404b .pm-eyebrow{margin-bottom:var(--sp-lead);}
.pm .pm-404b__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-card);align-items:stretch;}

/* ---- Suchergebnisse ---- */
.pm .pm-404 .pm-404s__feld{margin-top:var(--sp-lead);}
.pm .pm-liste + section{padding-top:var(--sp-sec);}
.pm .pm-404z{padding-top:0;}

@media(max-width:960px){
  .pm .pm-404s__in{grid-template-columns:1fr;gap:var(--sp-mod);}
  .pm .pm-404s .pm-skopf{max-width:none;}
  .pm .pm-404b__grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .pm form.pm-404f{flex-direction:column;}
  .pm form.pm-404f input[type="search"]{text-align:center;padding:18px 20px !important;}
  .pm form.pm-404f button.pm-404f__go{width:100%;}
}

/* ============================================================
   MOBILMENÜ — Höhe an das tatsächlich sichtbare Fenster binden
   ------------------------------------------------------------
   Vorher: inset:74px 0 0 mit position:fixed. Das bezieht sich auf
   das GROSSE Ansichtsfenster — also die Höhe ohne eingeklappte
   Adressleiste. Solange die Adressleiste sichtbar ist, liegt der
   untere Teil des Menüs unterhalb des Bildschirms und ist nur
   durch Scrollen erreichbar.

   dvh ist die dynamische Fensterhöhe: sie folgt der Adressleiste.
   svh als Rückfall für ältere Browser.

   Zweite Änderung: Der Inhalt sammelt sich oben. Der Fußbereich
   rückt nur dann nach unten, wenn Platz übrig ist — vorher zog
   er den Block bei hohen Fenstern weit auseinander.
   ============================================================ */
@media(max-width:1000px){
  .pm-mob{
    inset:var(--pm-head-h,74px) 0 auto;
    height:calc(100svh - var(--pm-head-h,74px));
    height:calc(100dvh - var(--pm-head-h,74px));
    justify-content:flex-start;
  }
  /* URSACHE DER LUECKE: .pm-such traegt flex:1 1 auto — in der Kopfzeile
     soll das Feld die Breite fuellen. Im Mobilmenue steht es aber in einer
     SPALTE, dort waechst es dadurch in die HOEHE und schiebt die Navigation
     nach unten. .pm-mob__such ueberschrieb bisher nur max-width. */
  .pm-mob .pm-mob__such{flex:0 0 auto;}
  .pm-mob__nav{flex:0 0 auto;}
  /* Kein margin-top:auto mehr — das schob den Fussbereich an den unteren
     Rand und riss bei hohen Fenstern eine Luecke unter die Navigation.
     Alles sammelt sich jetzt oben, mit festem Abstand. */
  .pm-mob__fuss{margin-top:0;padding-top:32px;}
}

/* ============================================================
   MUSTERBERICHT — Hinweis im Kopf, nur Beitrag 255826
   Nutzt .pm-note aus pm-basis.css. Hier nur die Breite, damit
   der Kasten nicht ueber die Textspalte hinauslaeuft.
   ============================================================ */
.pm .pm-hero__muster{max-width:520px;}
.pm .pm-hero__muster p{color:var(--text-2);}