/* ==========================================================================
   WordPress-Ergänzungen
   Alles, was erst durch das CMS dazukommt: Barrierefreiheits-Helfer,
   Formular-Rückmeldungen, Fließtextseiten (Impressum, Datenschutz, Blog),
   Ausrichtungsklassen des Editors und der Admin-Balken.
   Reine Ergänzung – die Sektionen der Vorlage bleiben unberührt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barrierefreiheit
   -------------------------------------------------------------------------- */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:static;width:auto;height:auto;margin:0;
  overflow:visible;clip:auto;clip-path:none;white-space:normal;
}

/* Sprunglink – erst bei Tastaturfokus sichtbar */
.sph-skip-link:focus{
  position:absolute;top:10px;left:10px;z-index:100;
  display:block;padding:12px 20px;
  background:var(--sph-yellow);color:#000;font-weight:600;
  border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.3);
}

/* Sichtbarer Fokusrahmen für Tastaturbedienung */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--sph-orange);outline-offset:2px;
}

/* Honeypot (.sph-form__hp) und die Rückmeldungen (.sph-fbox__notice) des
   theme-eigenen Formulars sind mit 1.1.0 entfallen – Formulare kommen vom
   Plugin, das seine eigenen Meldungen mitbringt. */

/* --------------------------------------------------------------------------
   Fließtextseiten: Impressum, Datenschutz, Blogbeiträge, Suchergebnisse
   -------------------------------------------------------------------------- */
.sph-prose{padding:4% 0;background:#fff}
.sph-prose__inner{max-width:1340px}
.sph-prose__title{
  font-size:2.5em;font-weight:600;line-height:1.3;
  color:var(--sph-gray);margin-bottom:24px;
}
.sph-prose h2{font-size:1.8em;font-weight:600;line-height:1.3;color:var(--sph-gray);margin:32px 0 14px}
.sph-prose h3{font-size:1.4em;font-weight:600;line-height:1.3;color:var(--sph-gray);margin:26px 0 12px}
.sph-prose p{font-size:var(--sph-p-size);line-height:var(--sph-p-line);margin-bottom:var(--sph-p-gap)}
.sph-prose p:last-child{margin-bottom:0}
.sph-prose a{color:var(--sph-orange);font-weight:600}
.sph-prose strong{font-weight:600}
.sph-prose ul,.sph-prose ol{margin:0 0 var(--sph-p-gap);padding-left:26px}
.sph-prose ul{list-style:disc}
.sph-prose ol{list-style:decimal}
.sph-prose li{font-size:var(--sph-li-size);line-height:var(--sph-p-line);margin-bottom:8px}
.sph-prose img{border-radius:10px}
.sph-prose blockquote{
  margin:0 0 var(--sph-p-gap);padding:14px 20px;
  border-left:4px solid var(--sph-yellow);background:var(--sph-light);
}
.sph-prose table{width:100%;border-collapse:collapse;margin-bottom:var(--sph-p-gap)}
.sph-prose th,.sph-prose td{padding:10px 12px;border:1px solid #e2e2e2;text-align:left}
.sph-prose th{background:var(--sph-light);font-weight:600}
/* Breite Tabellen scrollen in sich, statt die Seite zu sprengen. */
.sph-prose .wp-block-table{overflow-x:auto}

.sph-prose__pages{display:flex;gap:10px;margin-top:24px}

/* Beitragsliste */
.sph-teaser{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid #e6e6e6}
.sph-teaser:last-of-type{border-bottom:0}
.sph-teaser__title{font-size:1.5em;font-weight:600;line-height:1.3;margin-bottom:10px}
.sph-teaser p{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:var(--sph-gray);margin-bottom:var(--sph-p-gap)}
.sph-teaser p:last-child{margin-bottom:0}
.sph-teaser__title a{color:var(--sph-gray)}
.sph-teaser__title a:hover{color:var(--sph-yellow)}

.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.pagination .page-numbers,.nav-links .page-numbers{
  display:inline-block;padding:8px 14px;border-radius:6px;
  background:var(--sph-light);color:var(--sph-gray);font-weight:600;
}
.pagination .page-numbers.current,.nav-links .page-numbers.current{
  background:var(--sph-yellow);color:#000;
}

/* --------------------------------------------------------------------------
   Editor-Ausrichtungen
   -------------------------------------------------------------------------- */
.alignleft{float:left;margin:0 20px 16px 0}
.alignright{float:right;margin:0 0 16px 20px}
.aligncenter{display:block;margin-inline:auto}
.alignwide{max-width:1100px;margin-inline:auto}
.alignfull{max-width:none}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.85em;color:#777;margin-top:6px}
.sticky,.gallery-caption,.bypostauthor{}

/* Ein per Custom Logo gesetztes Bild wie das Vorlagenlogo behandeln */
.sph-nav__brand .custom-logo{width:125px;max-width:none;height:auto;display:block}

/* --------------------------------------------------------------------------
   Admin-Balken: der Topbar-Abstand darf nicht darunter rutschen
   -------------------------------------------------------------------------- */
body.admin-bar .sph-wa{bottom:90px}

@media (max-width:1024px){
  /* Dieselbe Skala wie in style.css und pages.css: h1 2.5em → 2em,
     h2 1.8em → 1.6em, h3 1.4em → 1.3em. */
  .sph-prose__title{font-size:2em}
  .sph-prose h2{font-size:1.6em}
  .sph-prose h3{font-size:1.3em}
  .sph-prose h2{margin:28px 0 12px}
  .sph-teaser__title{font-size:1.35em}
  .alignleft,.alignright{float:none;margin:0 0 16px}
}

@media (max-width:767px){
  .sph-prose__title{font-size:1.7em}
  .sph-prose h2{font-size:1.45em}
  .sph-prose h3{font-size:1.25em}
  .sph-teaser__title{font-size:1.25em}
  /* Aufzählungen näher an die Textkante – 26px Einzug kosten am Telefon
     ein Wort je Zeile. */
  .sph-prose ul,.sph-prose ol{padding-left:20px}
  .sph-nav__brand .custom-logo{width:110px}
}