/* ===========================================================================
   paderkom — Seitenstil
   Farbe, Schrift und Maße kommen aus ../../Marke/tokens.css.
   Hier steht nur Layout, Bausteine und die Anwendung der Schrift.
   Stand 05.09.2026 · Gestaltung: Variante 1 „Werkbank" · Hausschrift Archivo
   =========================================================================== */

/* --- Schriftgrade -------------------------------------------------------
   Schnitt und Laufweite kommen aus tokens.css (Archivo: h1 800, h2/h3 700).
   Hier stehen nur die Grade, die von der Grundskala abweichen.
   --------------------------------------------------------------------- */
h1{font-size:clamp(2.3rem,3.5vw,3.2rem);}
h2{font-size:2rem;line-height:var(--pk-lh-kopf);}
h3{font-size:var(--pk-fs-l);line-height:var(--pk-lh-kopf);}
.pk-beleg__zahl,.pk-schritt::before{font-family:var(--pk-display);
  font-weight:800;letter-spacing:-.03em;}

/* --- Grundlage ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--pk-rot);outline-offset:2px;}

.pk-sprung{position:absolute;left:-9999px;}
.pk-sprung:focus{position:static;display:inline-block;
  padding:.75em 1.25em;background:var(--pk-rot);color:#fff;font-weight:700;}

.pk-inhalt{max-width:var(--pk-breite);margin-inline:auto;
  padding-inline:var(--pk-rand);}
.pk-abschnitt{padding-block:var(--pk-abstand-4);}
.pk-abschnitt--eng{padding-block:var(--pk-abstand-3);}
.pk-lesebreite{max-width:var(--pk-breite-text);}

/* --- Kopf --------------------------------------------------------------- */
.pk-kopf{display:flex;align-items:center;gap:var(--pk-abstand-3);
  padding-block:var(--pk-abstand-3);}
/* Der Link ist das Flexelement, nicht das Bild. Ohne flex:none schrumpft er
   und das Logo mit ihm — genau das war am 05.09.2026 der Fehler. */
.pk-kopf__logolink{flex:none;display:block;width:230px;}
.pk-kopf__logo{width:100%;display:block;}
/* Partnerlabel: Mindesthöhe digital horizontal 34 px, und es bleibt dem
   Händlerlogo immer untergeordnet — also kleiner als die Wortmarke. */
.pk-kopf__partner{height:34px;width:auto;flex:none;}
.pk-kopf nav{margin-left:auto;display:flex;gap:1.4rem;align-items:center;
  font-weight:700;font-size:var(--pk-fs-s);}
.pk-kopf nav a{text-decoration:none;}
.pk-kopf nav a:hover{color:var(--pk-rot);}

/* --- Knöpfe ------------------------------------------------------------- */
.pk-knopf{display:inline-block;border:0;cursor:pointer;
  font-family:var(--pk-text-schrift);font-weight:700;font-size:var(--pk-fs-m);
  line-height:1.2;padding:.95em 1.6em;text-decoration:none;
  border-radius:var(--pk-radius);background:var(--pk-rot);color:#fff;}
.pk-knopf:hover{background:#B41316;}
.pk-knopf--linie{background:transparent;color:inherit;
  box-shadow:inset 0 0 0 2px currentColor;padding:.85em 1.5em;}
.pk-knopf--linie:hover{background:transparent;color:var(--pk-rot);}

/* --- Hero --------------------------------------------------------------- */
/* Unten reicht abstand-4: Der folgende Abschnitt bringt seinen eigenen
   Innenabstand mit, zusammen ergaben abstand-5 + abstand-4 ein Loch — auf
   Seiten mit kurzem Hero (z. B. /leistungen) fiel es auf. */
.pk-hero{padding-block:var(--pk-abstand-4);}
.pk-hero__raster{display:grid;grid-template-columns:1.15fr .85fr;
  gap:var(--pk-abstand-5);align-items:start;}
.pk-hero h1{margin:0 0 var(--pk-abstand-3);}
.pk-hero__zeichen{display:flex;gap:.75rem;align-items:center;
  margin-bottom:var(--pk-abstand-3);}
.pk-hero__zeichen span{font-weight:700;font-size:var(--pk-fs-s);
  letter-spacing:var(--pk-ls-label);text-transform:uppercase;
  color:var(--pk-text-leise);}
.pk-vorspann{font-size:var(--pk-fs-l);line-height:1.45;
  max-width:var(--pk-breite-text);}

/* Der Kostencheck-Kasten — das Werkzeug, nicht die Werbefläche */
.pk-kasten{box-shadow:inset 0 0 0 2px var(--pk-dunkel);
  padding:var(--pk-abstand-3);}
.pk-kasten h2{font-size:var(--pk-fs-xl);margin:0 0 var(--pk-abstand-2);}
.pk-frage{font-weight:700;font-size:var(--pk-fs-l);
  line-height:var(--pk-lh-kopf);margin:0 0 var(--pk-abstand-2);}
.pk-wahl{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--pk-abstand-2);
  border:0;padding:0;}
.pk-wahl label{display:inline-block;padding:.55em 1em;font-weight:700;
  font-size:var(--pk-fs-s);box-shadow:inset 0 0 0 2px var(--pk-linie);
  cursor:pointer;}
.pk-wahl input{position:absolute;opacity:0;width:0;height:0;}
.pk-wahl input:checked + label{box-shadow:inset 0 0 0 2px var(--pk-rot);
  background:var(--pk-rot);color:#fff;}
.pk-wahl input:focus-visible + label{outline:3px solid var(--pk-rot);
  outline-offset:2px;}
.pk-kleingedruckt{font-size:var(--pk-fs-s);color:var(--pk-text-leise);
  max-width:34rem;margin:var(--pk-abstand-2) 0 0;}

/* --- Belege ------------------------------------------------------------- */
.pk-belegband{border-block:var(--pk-trenner);}
.pk-belege{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--pk-abstand-3);}
.pk-beleg__zahl{font-size:2.75rem;line-height:1;color:var(--pk-rot);}
.pk-beleg h3{margin:.2em 0 .35em;}
.pk-beleg p{margin:0;color:var(--pk-text-leise);}

/* --- Partner ------------------------------------------------------------ */
/* Die Partnerzeile haengt unter dem Belegband, sie ist kein eigener Abschnitt.
   Sie heisst „Vertragspartner", nicht „Netze": der Kostencheck vergleicht drei
   Mobilfunknetze, die Reihe zeigt vier Marken plus die Kooperation. */
.pk-partner__titel{font-family:var(--pk-text-schrift);font-weight:700;
  font-size:var(--pk-fs-xs);letter-spacing:var(--pk-ls-label);
  text-transform:uppercase;color:var(--pk-text-leise);
  margin:0 0 var(--pk-abstand-1);}
/* Die Logozeile braucht unten Luft: Der folgende Abschnitt bringt eine rote
   4-px-Linie mit, und die darf die Logos nicht streifen. */
.pk-partnerzeile{padding-block:var(--pk-abstand-3);}
.pk-partner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pk-abstand-3);
  font-weight:700;margin:0;}
.pk-partner__stufe{color:var(--pk-rot);}

/* --- Leistungen und Branchen -------------------------------------------- */
.pk-leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--pk-linie);}
.pk-leistung{background:var(--pk-grund);padding:var(--pk-abstand-3);}
.pk-leistung h3{margin:0 0 .5rem;}
.pk-leistung p{margin:0 0 1rem;color:var(--pk-text-leise);}
.pk-leistung a{font-weight:700;color:var(--pk-rot);text-decoration:none;}
.pk-leistung a:hover{text-decoration:underline;}

.pk-branchen{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--pk-abstand-3);}
.pk-branche{border-top:var(--pk-trenner);padding-top:var(--pk-abstand-2);}
.pk-branche h3{font-size:var(--pk-fs-l);margin:0 0 .4rem;}
.pk-branche p{margin:0;color:var(--pk-text-leise);font-size:var(--pk-fs-s);}

/* --- Ablauf ------------------------------------------------------------- */
.pk-ablauf{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--pk-abstand-3);counter-reset:schritt;list-style:none;padding:0;margin:0;}
.pk-schritt{counter-increment:schritt;}
.pk-schritt::before{content:counter(schritt);display:block;font-size:2.25rem;
  line-height:1;color:var(--pk-rot);margin-bottom:.4rem;}
.pk-schritt b{display:block;margin-bottom:.3rem;}
.pk-schritt p{margin:0;color:var(--pk-text-leise);font-size:var(--pk-fs-s);}

/* --- Ansprechpartnerinnen ----------------------------------------------- */
.pk-personen{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--pk-abstand-3);max-width:52rem;}
.pk-person{box-shadow:inset 0 0 0 2px var(--pk-linie);padding:var(--pk-abstand-3);}
.pk-person h3{margin:0 0 .2rem;}
.pk-person p{margin:0;color:var(--pk-text-leise);font-size:var(--pk-fs-s);}
.pk-person__rolle{font-weight:700;color:var(--pk-text)!important;
  font-size:var(--pk-fs-s)!important;margin-bottom:.6rem!important;}
.pk-person__nummer{font-size:var(--pk-fs-m)!important;color:var(--pk-text)!important;
  margin-bottom:.6rem!important;}
.pk-person__nummer a{font-weight:700;color:var(--pk-rot);text-decoration:none;}
.pk-person__nummer a:hover{text-decoration:underline;}

/* --- Fragen ------------------------------------------------------------- */
.pk-fragen{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--pk-abstand-3) var(--pk-abstand-4);}
.pk-frageblock h3{margin:0 0 .4rem;font-size:var(--pk-fs-m);}
.pk-frageblock p{margin:0;color:var(--pk-text-leise);}

/* --- Abschluss und Abbinder --------------------------------------------- */
.pk-abschluss h2{font-weight:800;font-size:var(--pk-fs-2xl);
  letter-spacing:var(--pk-ls-display);margin:0 0 var(--pk-abstand-2);}
.pk-knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;}

/* Abbinder auf --pk-dunkel. Anthrazit ist am 05.09.2026 gestrichen worden.
   Der Namenspunkt wird hier heller — siehe Designsystem, Der Name. */
.pk-abbinder{background:var(--pk-dunkel);color:#fff;border-top:var(--pk-trenner);
  --pk-punkt-farbe:#F2494D;}
.pk-abbinder .pk-inhalt{display:flex;align-items:center;gap:var(--pk-abstand-3);
  min-height:130px;padding-block:var(--pk-abstand-3);}
.pk-abbinder__text{font-size:var(--pk-fs-s);color:#D8D8D8;}
.pk-abbinder__text a{text-decoration:none;}
.pk-abbinder__text a:hover{text-decoration:underline;}
.pk-abbinder__logo{margin-left:auto;width:180px;}

/* --- Bausteine der Marke ------------------------------------------------ */
.pk-raster--3{display:flex;gap:6px;}
.pk-raster--3 i{display:block;width:10px;height:10px;background:var(--pk-rot);}
.pk-raster--9{display:grid;grid-template-columns:repeat(3,10px);gap:6px;}
.pk-raster--9 i{display:block;width:10px;height:10px;background:var(--pk-rot);}
.pk-bild{border:var(--pk-rahmen);}

/* Offene Betriebsangabe. Absichtlich hässlich — keine geht live. */
.pk-luecke{display:inline-block;padding:.15em .5em;font-weight:700;
  font-size:var(--pk-fs-s);color:var(--pk-rot);background:#fff;
  box-shadow:inset 0 0 0 2px var(--pk-rot);}

/* --- Schmale Fenster ---------------------------------------------------- */
@media (max-width:60rem){
  .pk-hero__raster{grid-template-columns:1fr;gap:var(--pk-abstand-4);}
  .pk-belege,.pk-branchen,.pk-ablauf,.pk-fragen,.pk-personen,
  .pk-leistungen{grid-template-columns:1fr;}
  .pk-kopf{flex-wrap:wrap;gap:var(--pk-abstand-2);}
  .pk-kopf nav{width:100%;margin-left:0;flex-wrap:wrap;gap:.9rem;}
  .pk-abbinder .pk-inhalt{flex-wrap:wrap;}
  .pk-abbinder__logo{margin-left:0;}
}

/* ===========================================================================
   Kostencheck — /kostencheck
   =========================================================================== */

.pk-gruende{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pk-abstand-3);}
.pk-grund{border-top:var(--pk-trenner);padding-top:var(--pk-abstand-2);}
.pk-grund h3{margin:0 0 .5rem;}
.pk-grund p{margin:0;color:var(--pk-text-leise);}

.pk-quelle{font-size:var(--pk-fs-s);color:var(--pk-text-leise);
  max-width:var(--pk-breite-text);margin:var(--pk-abstand-3) 0 0;
  padding-left:var(--pk-abstand-2);box-shadow:inset 3px 0 0 var(--pk-linie);}

/* Ablauf in vier Schritten, untereinander mit Nummernspalte */
.pk-ablauf4{list-style:none;padding:0;margin:0;counter-reset:s4;
  max-width:52rem;}
.pk-ablauf4 li{counter-increment:s4;display:grid;
  grid-template-columns:3.5rem 1fr;gap:var(--pk-abstand-2);
  padding-block:var(--pk-abstand-2);border-top:1px solid var(--pk-linie);}
.pk-ablauf4 li:first-child{border-top:0;padding-top:0;}
.pk-ablauf4 li::before{content:counter(s4);font-family:var(--pk-display);
  font-weight:800;font-size:2rem;line-height:1;color:var(--pk-rot);
  letter-spacing:-.03em;}
.pk-ablauf4 b{display:block;margin-bottom:.25rem;}
.pk-ablauf4 p{margin:0;color:var(--pk-text-leise);}

/* Formular */
.pk-formular{max-width:44rem;}
.pk-feld{margin-bottom:var(--pk-abstand-2);}
.pk-feld label,.pk-feld legend{display:block;font-weight:700;
  margin-bottom:.35rem;padding:0;}
.pk-feld input[type=text],.pk-feld input[type=tel],.pk-feld input[type=email],
.pk-feld select,.pk-feld textarea,.pk-feld input[type=file]{
  width:100%;font:inherit;padding:.7em .8em;border:0;border-radius:0;
  background:#fff;box-shadow:inset 0 0 0 2px var(--pk-linie);}
.pk-feld input:focus,.pk-feld select:focus,.pk-feld textarea:focus{
  outline:0;box-shadow:inset 0 0 0 2px var(--pk-dunkel);}
.pk-feld textarea{min-height:6rem;resize:vertical;}
.pk-feld--zwei{display:grid;grid-template-columns:1fr 1fr;gap:var(--pk-abstand-2);}
.pk-pflicht{color:var(--pk-rot);}
.pk-hinweis{font-size:var(--pk-fs-s);color:var(--pk-text-leise);margin:.35rem 0 0;}
.pk-einwilligung{display:grid;grid-template-columns:1.4rem 1fr;gap:.7rem;
  align-items:start;margin-block:var(--pk-abstand-3);
  font-size:var(--pk-fs-s);line-height:1.5;}
.pk-einwilligung input{width:1.4rem;height:1.4rem;margin:0;accent-color:var(--pk-rot);}

/* Was Sie nicht bekommen — Negativliste */
.pk-negativ{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--pk-abstand-3);list-style:none;padding:0;margin:0;}
.pk-negativ li{padding-left:2.2rem;position:relative;}
.pk-negativ li::before{content:'';position:absolute;left:0;top:.45em;
  width:1.1rem;height:.3rem;background:var(--pk-rot);}
.pk-negativ b{display:block;}
.pk-negativ span{color:var(--pk-text-leise);}

/* Wege zum Kostencheck */
.pk-wege{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--pk-linie);}
.pk-weg{background:var(--pk-grund);padding:var(--pk-abstand-3);}
.pk-weg h3{margin:0 0 .5rem;}
.pk-weg p{margin:0;color:var(--pk-text-leise);}

/* Referenzkunden — Namensform, ohne Kennzahl (Entscheidung 05.09.2026) */
.pk-kunden{display:grid;grid-template-columns:repeat(6,1fr);
  gap:var(--pk-abstand-3);align-items:center;margin-top:var(--pk-abstand-3);}
.pk-kunden img{width:100%;height:auto;}
.pk-kunden figcaption{font-size:var(--pk-fs-xs);color:var(--pk-text-leise);
  margin-top:.5rem;}
.pk-kunden figure{margin:0;}

@media (max-width:60rem){
  .pk-gruende,.pk-negativ,.pk-wege,.pk-feld--zwei{grid-template-columns:1fr;}
  .pk-kunden{grid-template-columns:repeat(2,1fr);}
  .pk-ablauf4 li{grid-template-columns:2.5rem 1fr;}
}

/* ===========================================================================
   Firmenhandys mieten — /leistungen/firmenhandys-mieten
   =========================================================================== */

.pk-tabelle{width:100%;border-collapse:collapse;font-size:var(--pk-fs-s);}
.pk-tabelle caption{text-align:left;font-weight:700;
  margin-bottom:var(--pk-abstand-2);font-size:var(--pk-fs-m);}
.pk-tabelle th,.pk-tabelle td{text-align:left;vertical-align:top;
  padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--pk-linie);}
.pk-tabelle thead th{border-bottom:var(--pk-trenner);font-weight:700;}
.pk-tabelle tbody th{font-weight:700;width:12rem;}
.pk-tabelle--paderkom td:first-of-type{background:#FBF2F2;padding-left:1rem;}
.pk-tabellenrahmen{overflow-x:auto;}

.pk-leistungsliste{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem var(--pk-abstand-3);
  max-width:52rem;}
.pk-leistungsliste li{padding-left:2.2rem;position:relative;}
.pk-leistungsliste li::before{content:'';position:absolute;left:0;top:.42em;
  width:.75rem;height:.75rem;background:var(--pk-rot);}

.pk-preisbeispiele{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--pk-linie);}
.pk-preis{background:var(--pk-grund);padding:var(--pk-abstand-3);}
.pk-preis b{display:block;font-family:var(--pk-display);font-weight:800;
  font-size:2rem;letter-spacing:-.03em;color:var(--pk-rot);line-height:1;
  margin-bottom:.4rem;}

@media (max-width:60rem){
  .pk-leistungsliste,.pk-preisbeispiele{grid-template-columns:1fr;}
  .pk-tabelle tbody th{width:auto;}
}

/* ===========================================================================
   Intelligente Cloud-Telefonie — /leistungen/cloud-telefonie (E13)
   =========================================================================== */

.pk-pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--pk-linie);}
.pk-paket{background:var(--pk-grund);padding:var(--pk-abstand-3);}
.pk-paket h3{margin:0 0 .2rem;}
.pk-paket__ab{display:block;font-size:var(--pk-fs-s);color:var(--pk-text-leise);
  margin-bottom:var(--pk-abstand-2);}
.pk-paket p{margin:0 0 var(--pk-abstand-2);}
.pk-paket ul{margin:0;}

.pk-zusatz{list-style:none;padding:0;margin:0;max-width:52rem;}
.pk-zusatz li{padding:var(--pk-abstand-2) 0;border-top:1px solid var(--pk-linie);}
.pk-zusatz li:first-child{border-top:0;padding-top:0;}
.pk-zusatz b{display:block;margin-bottom:.2rem;}
.pk-zusatz span{color:var(--pk-text-leise);}

.pk-einwaende{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--pk-abstand-3) var(--pk-abstand-4);}
.pk-einwand h3{font-size:var(--pk-fs-m);margin:0 0 .4rem;
  padding-left:1.4rem;position:relative;}
.pk-einwand h3::before{content:'„';position:absolute;left:0;top:-.1em;
  color:var(--pk-rot);font-family:var(--pk-display);font-weight:800;
  font-size:1.5em;line-height:1;}
.pk-einwand p{margin:0;color:var(--pk-text-leise);}

.pk-eignung{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--pk-abstand-3);}
.pk-eignung > div{padding-top:var(--pk-abstand-2);border-top:var(--pk-trenner);}
.pk-eignung--nein{border-top-color:var(--pk-linie)!important;}
.pk-eignung h3{margin:0 0 .5rem;}

@media (max-width:60rem){
  .pk-pakete,.pk-einwaende,.pk-eignung{grid-template-columns:1fr;}
}

/* Öffnungszeiten im Kasten — /privatkunden */
.pk-oeffnung{margin:0 0 var(--pk-abstand-2);padding-left:var(--pk-abstand-2);
  box-shadow:inset 3px 0 0 var(--pk-rot);line-height:1.35;}
.pk-oeffnung b{font-size:var(--pk-fs-l);}

/* ===========================================================================
   Partnerlogos
   Fremdmarken bringen ihre eigenen Farben mit — Vodafone-Rot liegt nah am
   Hausrot. Deshalb stehen sie auf einer eigenen, ruhigen Fläche und nie
   unmittelbar neben einem roten Bedienelement.
   =========================================================================== */

.pk-logoreihe{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--pk-abstand-3) var(--pk-abstand-4);margin-top:var(--pk-abstand-2);}
/* Höhen je Marke, nicht einheitlich: die Logos haben sehr unterschiedliche
   Proportionen — ein hochkantes T und ein gestapeltes Vodafone-Lockup wirken
   bei gleicher Pixelhöhe nicht gleich groß. Die Werte sind nach Augenmaß
   angeglichen, nicht gerechnet. */
.pk-logoreihe img{height:38px;width:auto;flex:none;}
.pk-logoreihe img.hoch{height:52px;}
.pk-logoreihe img.logo-telekom{height:34px;}
.pk-logoreihe img.logo-vodafone{height:40px;}
.pk-logoreihe img.logo-o2{height:40px;}
.pk-logoreihe img.logo-1und1{height:34px;}
.pk-logoreihe .pk-partner__stufe{font-weight:700;color:var(--pk-rot);
  font-size:var(--pk-fs-m);}

/* Standorte auf /privatkunden */
.pk-standorte{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--pk-linie);box-shadow:0 0 0 1px var(--pk-linie);}
.pk-standort{background:var(--pk-grund);padding:var(--pk-abstand-3);
  display:flex;flex-direction:column;gap:var(--pk-abstand-2);}
.pk-standort h3{margin:0;}
.pk-standort__adresse{margin:0;color:var(--pk-text-leise);}
.pk-standort__zeit{margin:0;padding-left:var(--pk-abstand-2);
  box-shadow:inset 3px 0 0 var(--pk-rot);line-height:1.35;}
.pk-standort__zeit b{display:block;font-size:var(--pk-fs-l);}
.pk-standort ul{margin:0;}
.pk-standort ul li{margin-bottom:.6rem;}
.pk-standort__marken{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--pk-abstand-3);padding-top:var(--pk-abstand-2);
  border-top:1px solid var(--pk-linie);margin-top:auto;}
.pk-standort__marken img{height:32px;width:auto;}

@media (max-width:60rem){
  .pk-standorte{grid-template-columns:1fr;}
}

/* Preisbeispiele je Gerät — die Rate hängt am Gerät, nicht an der Stückzahl */
.pk-preis__geraet{display:block;font-weight:700;margin-bottom:.25rem;}
.pk-preis__zusatz{display:block;font-size:var(--pk-fs-s);color:var(--pk-text-leise);}

/* Anbieterseiten */
.pk-anbieter__logo{height:44px;width:auto;margin-bottom:var(--pk-abstand-2);}
.pk-zweispalt{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--pk-abstand-4);}
.pk-zweispalt h2{margin:0 0 var(--pk-abstand-2);}
.pk-geschwister{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;
  padding-top:var(--pk-abstand-2);border-top:1px solid var(--pk-linie);}
.pk-geschwister__label{font-size:var(--pk-fs-xs);letter-spacing:var(--pk-ls-label);
  text-transform:uppercase;font-weight:700;color:var(--pk-text-leise);}
.pk-geschwister a{font-weight:700;color:var(--pk-rot);text-decoration:none;}
.pk-geschwister a:hover{text-decoration:underline;}
.pk-geschwister__hier{font-weight:700;}
@media (max-width:60rem){ .pk-zweispalt{grid-template-columns:1fr;} }

/* ===========================================================================
   Wissen — Übersicht und Artikel
   Eine Ratgeberseite lebt von Belegen. Deshalb hat jeder Artikel eine
   sichtbare Standzeile und einen Quellenblock am Fuß, nicht im Kleingedruckten.
   =========================================================================== */

.pk-artikelliste{display:flex;flex-direction:column;gap:0;}
.pk-artikelkarte{border-top:1px solid var(--pk-linie);padding-block:var(--pk-abstand-3);
  display:grid;grid-template-columns:1fr auto;gap:var(--pk-abstand-2) var(--pk-abstand-4);
  align-items:start;}
.pk-artikelkarte:first-child{border-top:var(--pk-trenner);}
.pk-artikelkarte h3{margin:0 0 .4rem;font-size:var(--pk-fs-l);}
.pk-artikelkarte h3 a{text-decoration:none;}
.pk-artikelkarte h3 a:hover{color:var(--pk-rot);}
.pk-artikelkarte p{margin:0;color:var(--pk-text-leise);max-width:var(--pk-breite-text);}
.pk-artikelkarte__stand{font-size:var(--pk-fs-xs);letter-spacing:var(--pk-ls-label);
  text-transform:uppercase;font-weight:700;color:var(--pk-text-leise);
  white-space:nowrap;padding-top:.3rem;}

.pk-artikel{max-width:var(--pk-breite-text);}
.pk-artikel h2{font-size:1.6rem;margin:var(--pk-abstand-4) 0 var(--pk-abstand-2);}
.pk-artikel h2:first-child{margin-top:0;}
.pk-artikel h3{font-size:var(--pk-fs-l);margin:var(--pk-abstand-3) 0 .5rem;}
.pk-artikel p{margin:0 0 var(--pk-abstand-2);}
.pk-artikel ul{margin:0 0 var(--pk-abstand-2);}
.pk-artikel li{margin-bottom:.5rem;}
.pk-artikel table{width:100%;border-collapse:collapse;font-size:var(--pk-fs-s);
  margin:0 0 var(--pk-abstand-2);}
.pk-artikel th,.pk-artikel td{text-align:left;vertical-align:top;
  padding:.7rem 1rem .7rem 0;border-bottom:1px solid var(--pk-linie);}
.pk-artikel thead th{border-bottom:var(--pk-trenner);}

.pk-stand{font-size:var(--pk-fs-s);color:var(--pk-text-leise);
  padding-left:var(--pk-abstand-2);box-shadow:inset 3px 0 0 var(--pk-linie);
  margin-bottom:var(--pk-abstand-3);}
.pk-merksatz{padding:var(--pk-abstand-2) var(--pk-abstand-3);
  background:var(--pk-flaeche,#F6F4F4);box-shadow:inset 4px 0 0 var(--pk-rot);
  margin:0 0 var(--pk-abstand-3);font-weight:700;}
.pk-quellen{margin-top:var(--pk-abstand-4);padding-top:var(--pk-abstand-2);
  border-top:var(--pk-trenner);font-size:var(--pk-fs-s);
  color:var(--pk-text-leise);}
.pk-quellen h2{font-size:var(--pk-fs-m);margin:0 0 .5rem;}
.pk-quellen ul{list-style:none;padding:0;margin:0;}
.pk-quellen li{margin-bottom:.35rem;}

@media (max-width:60rem){
  .pk-artikelkarte{grid-template-columns:1fr;}
  .pk-artikelkarte__stand{padding-top:0;}
}

/* Rechtstexte — Lesbarkeit vor Gestaltung */
.pk-recht h2{font-size:1.35rem;margin:var(--pk-abstand-4) 0 var(--pk-abstand-2);
  padding-top:var(--pk-abstand-2);border-top:1px solid var(--pk-linie);}
.pk-recht h2:first-child{border-top:0;padding-top:0;margin-top:0;}
.pk-recht code{font-family:inherit;font-weight:700;}
.pk-recht a{color:var(--pk-rot);}

/* Honigtopf — unsichtbar, aber nicht display:none.
   Ein Feld mit display:none füllen manche Bots gerade deshalb aus; ein aus dem
   Bild geschobenes Feld wirkt für sie wie ein echtes. Für Screenreader ist es
   über aria-hidden und tabindex ausgenommen. */
.pk-honigtopf{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;}

/* Der Cookie-Satz im Abbinder. Kleiner als die Verweise, aber nicht versteckt. */
.pk-keinecookies{display:inline-block;margin-top:.4rem;font-size:var(--pk-fs-xs);
  color:#8E8888;}

/* ===========================================================================
   Restseiten — bauen/restseiten.py (15.09.2026)
   =========================================================================== */
.pk-kunden--gross{grid-template-columns:repeat(3,1fr);gap:var(--pk-abstand-3);}
.pk-kunden--gross img{box-shadow:inset 0 0 0 1px var(--pk-linie);}
.pk-kunden--gross figcaption{font-size:var(--pk-fs-s);margin-top:.5rem;}
.pk-personen--drei{grid-template-columns:repeat(3,minmax(0,1fr));max-width:60rem;}
.pk-personen--vier{grid-template-columns:repeat(4,1fr);}
.pk-textblock p{margin:0 0 1em;}
.pk-textblock p:last-child{margin-bottom:0;}
.pk-kopf nav a[aria-current="page"]:not(.pk-knopf){color:var(--pk-rot);}
@media (max-width:60rem){
  .pk-kunden--gross{grid-template-columns:repeat(2,1fr);}
  .pk-personen--drei{grid-template-columns:1fr;}
  .pk-personen--vier{grid-template-columns:repeat(2,1fr);}
}
.pk-leistungen--zwei{grid-template-columns:repeat(2,1fr);}
/* Porträts im Verhältnis 4:5. Quadratisch schnitt es bei eng fotografierten
   Vorlagen entweder den Haaransatz oder die Schultern ab (17.09.2026). */
.pk-person__foto{display:block;width:100%;max-width:14rem;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 20%;margin:0 0 var(--pk-abstand-2);height:auto;}
@media (max-width:60rem){ .pk-leistungen--zwei{grid-template-columns:1fr;} }
.pk-person__nummer a{overflow-wrap:anywhere;}
.pk-leistungen--fuenf{grid-template-columns:repeat(6,1fr);}
.pk-leistungen--fuenf > *{grid-column:span 2;}
.pk-leistungen--fuenf > *:nth-child(4),
.pk-leistungen--fuenf > *:nth-child(5){grid-column:span 3;}
@media (max-width:60rem){
  .pk-leistungen--fuenf{grid-template-columns:1fr;}
  .pk-leistungen--fuenf > *,
  .pk-leistungen--fuenf > *:nth-child(4),
  .pk-leistungen--fuenf > *:nth-child(5){grid-column:auto;}
}
.pk-logoreihe img.logo-congstar{height:40px;}  /* gestapeltes Lockup, wie Vodafone */
.pk-logoreihe img.logo-wertgarantie{height:30px;}
.pk-logoreihe img.logo-placetel{height:30px;}