/* ProBit Unterseiten — Kern (alle Seiten). Seitenspezifik in leistungen/ueberuns/referenzen.css. */

/* --- Layout-Reset für Unterseiten -----------------------------------
   Parent begrenzt .site-main auf 1024px + Klammer-Paddings. Für den
   Full-Width-Hero lösen wir das; Content bleibt lesbar über einen
   eigenen Container zentriert. */

body:not(.home) { background: var(--pb-canvas); }

/* heller Canvas — Cards sitzen darauf */

   
body:not(.home) #page.site { max-width: none; padding-top: 0; overflow: visible; background: transparent; }

body:not(.home) .site-content { background: transparent; }

body:not(.home) .site-content .site-content-container { padding: 0; }

body:not(.home) .site-main,
body:not(.home).page-template-template-fullwidth .site-main {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Parent-Extra-Paddings über dem Content neutralisieren (Hero übernimmt) */

body:not(.home).page-leistungsuebersicht .site-content,
body:not(.home).page-kontakt .site-content,
body:not(.home).page-referenzen .site-content,
body:not(.home).page-impressum .site-content { padding-top: 0; }

/* --- Theme-Beitragsbild-Banner ausblenden (Hero übernimmt das Bild) -- */

body:not(.home) #headimg.featured-header-image,
body:not(.home) .header-image.featured-header-image { display: none; }

/* --- Page-Hero = full-width Navy-Banner (nahtlos am Header) ---------- */

.pb-page-hero {
  position: relative;
  width: var(--pb-bleed-w);
  margin-left: var(--pb-bleed-m);
  overflow: hidden;
  background-color: var(--pb-navy);
  background-image:
    radial-gradient(120% 150% at 88% -30%, rgba(41,163,224,0.22) 0%, rgba(41,163,224,0) 55%),
    linear-gradient(180deg, #0e2c4d 0%, var(--pb-navy) 100%);
  color: #fff;
  /* Tag 9: ein Hero-Rhythmus site-weit. top: Navy zieht hinter den fixen Header */
  padding: 7.5rem var(--pb-gutter) var(--pb-rhythm);
}

/* Variante mit Beitragsbild: Bild + Navy-Scrim für Textkontrast */

.pb-page-hero--image {
  background-image:
    linear-gradient(180deg, rgba(9,31,56,0.74) 0%, rgba(9,28,52,0.88) 100%),
    var(--pb-hero-img);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  padding-top: 7.5rem;
  padding-bottom: var(--pb-rhythm);
}

.pb-page-hero__inner {
  /* Tag 9: Hero-Text steht exakt auf der Kante des Inhalts darunter.
     Der Hero traegt den Gutter selbst, also muss der Inner um zwei Gutter
     schmaler sein als der Container - sonst sitzt die H1 32px weiter links. */
  max-width: calc(var(--pb-container) - 2 * var(--pb-gutter));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Bit-Cluster (Marken-Atom) — am rechten Rand des Inhaltscontainers */

.pb-hero-bits {
  position: absolute;
  top: -0.4rem;
  right: 0;
  width: 120px; height: 100px;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 959px) { .pb-page-hero { padding-top: 5.5rem; } }

@media (max-width: 1180px) { .pb-hero-bits { right: 0.5rem; } }

.pb-hero-bits i { position: absolute; display: block; }

.pb-hero-bits i:nth-child(1) { top: 8px;  right: 60px; width: 26px; height: 26px; background: var(--pb-cyan);        transform: rotate(-15deg); }

.pb-hero-bits i:nth-child(2) { top: 30px; right: 18px; width: 34px; height: 34px; background: var(--pb-cyan-bright); transform: rotate(-15deg); }

.pb-hero-bits i:nth-child(3) { top: 2px;  right: 2px;  width: 18px; height: 18px; border: 2px solid var(--pb-cyan-bright); transform: rotate(-15deg); }

.pb-hero-bits i:nth-child(4) { top: 60px; right: 66px; width: 15px; height: 15px; border: 2px solid var(--pb-cyan);   transform: rotate(-15deg); }

@media (max-width: 560px) { .pb-hero-bits { display: none; } }

/* Akzent unter dem Lead: kurzer Cyan-Balken, der in Bits ausfranst */

.pb-hero-accent { display: flex; align-items: center; gap: 6px; margin-top: 1.5rem; }

.pb-hero-accent b { display: block; width: 34px; height: 4px; background: var(--pb-cyan); }

.pb-hero-accent i { display: block; background: var(--pb-cyan-bright); transform: rotate(-15deg); }

.pb-hero-accent i:nth-child(2) { width: 8px; height: 8px; }

.pb-hero-accent i:nth-child(3) { width: 5px; height: 5px; }

.pb-page-hero__eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pb-cyan-bright);
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Eyebrow-Bit (kleinstes Vorkommen des Marken-Atoms) */

.pb-page-hero__eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--pb-cyan-bright);
  transform: rotate(-15deg);
  flex: none;
}

.pb-page-hero__title {
  margin: 0;
  color: #fff;
  font-size: var(--pb-fs-display);
  line-height: var(--pb-lh-tight);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pb-page-hero__lead {
  margin: 1rem 0 0;
  max-width: 60ch;
  color: #dbe4ef;
  font-size: var(--pb-fs-md);
  line-height: var(--pb-lh-snug);
}

/* --- Content-Container (lesbar zentriert, auf Canvas) --------------- */

body:not(.home) .entry-content {
  max-width: var(--pb-container);
  margin: 0 auto;
  padding: clamp(0.6rem, 2vw, 1.4rem) var(--pb-gutter) clamp(2rem, 4vw, 3rem);
}

/* --- Typo im Content ------------------------------------------------- */

body:not(.home) .entry-content h1,
body:not(.home) .entry-content h2,
body:not(.home) .entry-content h3,
body:not(.home) .entry-content h4 {
  color: var(--pb-heading);
  font-weight: 600;
  line-height: var(--pb-lh-snug);
}

/* Tag 9 - zwei Rollen, nicht ein Tag:
   Ein h2 direkt im Inhalt eroeffnet einen ganzen Abschnitt und bekommt
   dieselbe Groesse wie die Sektionstitel der Startseite (48px). Fuer
   laufenden Text (Rechtstexte, Artikel) gilt weiter die kleinere Stufe -
   siehe Ausnahme-Regel unten. Vorher stand beides pauschal auf 31px,
   wodurch die Unterseiten eine flachere Hierarchie hatten als die
   Startseite (dort 61/48, hier 61/31). */
body:not(.home) .entry-content > h2 {
  font-size: var(--pb-fs-section);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1.6em 0 0.7em;
  padding-bottom: 0.5rem;
  position: relative;
}

body:not(.home) .entry-content > h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 3px;
  background: var(--pb-cyan);
}

body:not(.home) .entry-content > h2:first-child { margin-top: 0.2em; }

/* Ausnahme: Fliesstext-Seiten (Rechtstexte) und Einzelbeitraege - dort ist
   ein h2 eine Zwischenueberschrift im Lesefluss, kein Abschnittstitel. */
body.page-datenschutz .entry-content > h2,
body.page-impressum .entry-content > h2,
body.single-post .entry-content > h2 {
  font-size: var(--pb-fs-sub);
  margin-top: 2.2em;   /* kleinere Schrift braucht relativ mehr Vorlauf */
}

body:not(.home) .entry-content h3 { font-size: var(--pb-fs-lg); margin: 1.8em 0 0.6em; }

body:not(.home) .entry-content p { color: var(--pb-text); }

/* --- Lesespalte (Tag 9) ----------------------------------------------
   Fliesstext lief bisher ueber die volle Inhaltsbreite (Datenschutz:
   1016px = weit ueber 100 Zeichen pro Zeile). Nur DIREKTE Kinder werden
   begrenzt - Text in Karten, Rastern und Sektionen bleibt unberuehrt.
   Linksbuendig, damit die Spaltenkante auf der Kante der Raster sitzt. */
body:not(.home) .entry-content > p,
body:not(.home) .entry-content > ul,
body:not(.home) .entry-content > ol,
body:not(.home) .entry-content > h2,
body:not(.home) .entry-content > h3,
body:not(.home) .entry-content > h4 {
  max-width: var(--pb-measure-read);
}

body:not(.home) .entry-content a:not(.wp-block-button__link) {
  color: var(--pb-cyan-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--pb-transition);
}

body:not(.home) .entry-content a:not(.wp-block-button__link):hover,
body:not(.home) .entry-content a:not(.wp-block-button__link):focus-visible {
  color: var(--pb-navy);
}

body:not(.home) .entry-content strong { color: var(--pb-navy); }

body:not(.home) .entry-content ul { padding-left: 1.2em; }

body:not(.home) .entry-content ul li { margin-bottom: 0.5em; line-height: var(--pb-lh-body); }

body:not(.home) .entry-content ul li::marker { color: var(--pb-cyan); }

/* --- Bilder ---------------------------------------------------------- */

body:not(.home) .entry-content .wp-block-image img,
body:not(.home) .entry-content figure img {
  border-radius: var(--pb-radius-md);
  box-shadow: var(--pb-shadow-md);
}

/* --- Blockquote ------------------------------------------------------ */

body:not(.home) .entry-content blockquote {
  border-left: 4px solid var(--pb-cyan);
  text-align: left;
  background: var(--pb-surface-alt);
  border-radius: 0 var(--pb-radius-md) var(--pb-radius-md) 0;
  padding: 1.6rem 2rem;
  margin: 2.5rem auto;
  color: var(--pb-navy);
  font-size: var(--pb-fs-md);
}

/* --- Buttons (Gutenberg) → Brand-Button ------------------------------ */

body:not(.home) .entry-content .wp-block-button__link {
  background: var(--pb-cyan);
  color: #04223b;
  border-radius: var(--pb-radius-sm);
  font-weight: 600;
  padding: 0.85rem 1.7rem;
  transition: background var(--pb-transition);
}

body:not(.home) .entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--pb-cyan-ink);
  border: 2px solid var(--pb-cyan);
}

body:not(.home) .entry-content .wp-block-button__link:hover,
body:not(.home) .entry-content .wp-block-button__link:focus-visible {
  background: var(--pb-cyan-bright);
  color: #04223b;
}

/* --- Columns --------------------------------------------------------- */

body:not(.home) .entry-content .wp-block-columns { gap: clamp(1.5rem, 4vw, 3rem); }

/* --- Media-Text-Blöcke (Über uns) ----------------------------------- */

body:not(.home) .entry-content .wp-block-media-text {
  margin: 3.5rem auto !important;
  border-radius: var(--pb-radius-md);
  overflow: hidden;
  box-shadow: var(--pb-shadow-md);
  background: #fff;
}

body:not(.home) .entry-content .wp-block-media-text__content { padding: clamp(1.5rem, 3vw, 2.5rem) !important; }

body:not(.home) .entry-content .wp-block-media-text img { border-radius: 0; box-shadow: none; }

/* --- Magazin-Karten (Leistungen / News) — Bit-System ----------------
   .tz-post-wrap = Spalten-Wrapper (Gutter), Karte = .tz-magazine-post. */

body:not(.home) .tz-post-wrap { box-shadow: none; margin: 0 0 1.5rem; }

body:not(.home) .tz-magazine-post {
  position: relative;
  border: 1px solid var(--pb-card-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--pb-shadow-md);
  transition: transform var(--pb-transition), box-shadow var(--pb-transition), border-color var(--pb-transition);
}

body:not(.home) .tz-magazine-post .tz-entry-image { margin: 0; }

body:not(.home) .tz-magazine-post .tz-entry-header { padding-top: 1.1rem; }

body:not(.home) .tz-magazine-post .tz-entry-content { padding-bottom: 1.3rem; }

/* Bit-Marker (Marken-Atom) oben links über dem Kartenbild */

body:not(.home) .tz-magazine-post::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  z-index: 20;
  width: 12px; height: 12px;
  background: var(--pb-cyan);
  transform: rotate(-15deg);
  pointer-events: none;
}

body:not(.home) .tz-magazine-post:hover { transform: translateY(-4px); box-shadow: var(--pb-shadow-lg); border-color: transparent; }

body:not(.home) .tz-entry-title a { color: var(--pb-navy); }

body:not(.home) .tz-entry-title a:hover { color: var(--pb-cyan-ink); }

/* Read-More → Cyan-Button (Theme füllt .more-link blau → überschreiben) */

body:not(.home) .tz-more-link,
body:not(.home) .tz-read-more {
  background: var(--pb-cyan) !important;
  color: #04223b !important;
  border: 0 !important;
  border-radius: var(--pb-radius-sm) !important;
  font-weight: 600;
  transition: background var(--pb-transition) !important;
}

body:not(.home) .tz-more-link:hover,
body:not(.home) .tz-read-more:hover,
body:not(.home) .tz-more-link:focus-visible,
body:not(.home) .tz-read-more:focus-visible {
  background: var(--pb-cyan-bright) !important;
  color: #04223b !important;
}

/* =====================================================================
   "Mehr entdecken"-Band — after-pages-widget-area (Jobangebote / News)
   Auf Unterseiten als sauberes Kartenband statt ungestyltem Schweben.
   (Startseite blendet den Bereich weiterhin aus.)
   ===================================================================== */

body:not(.home) #page .after-pages-widget-area {
  width: var(--pb-bleed-w);
  margin-left: var(--pb-bleed-m);
  background: transparent;
  border-top: 0;
  padding: clamp(2rem, 4vw, 3rem) 2rem clamp(3rem, 6vw, 4.2rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
}

body:not(.home) #page .after-pages-widget-area::before {
  content: "Mehr entdecken";
  flex-basis: 100%;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pb-cyan-ink);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

body:not(.home) #page .after-pages-widget-area .widget_block { display: none; }

body:not(.home) #page .after-pages-widget-area .widget_media_image {
  position: relative;
  width: 320px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--pb-card-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;   /* Bild oben, Titel unten */
  transition: transform var(--pb-transition), box-shadow var(--pb-transition), border-color var(--pb-transition);
}

body:not(.home) #page .after-pages-widget-area .widget_media_image::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  width: 12px; height: 12px;
  background: var(--pb-cyan);
  transform: rotate(-15deg);
}

body:not(.home) #page .after-pages-widget-area .widget_media_image:hover {
  transform: translateY(-4px);
  box-shadow: var(--pb-shadow-md);
  border-color: transparent;
}

body:not(.home) #page .after-pages-widget-area .widget_media_image .widget-title {
  margin: 0;
  padding: 1rem 1.25rem 1.15rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pb-navy);
}

body:not(.home) #page .after-pages-widget-area .widget_media_image a { display: block; line-height: 0; }

body:not(.home) #page .after-pages-widget-area .widget_media_image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  float: none;
  border-radius: 0;
  box-shadow: none;
}