/* ==========================================================================
   nibomed Redesign — Globales CSS
   --------------------------------------------------------------------------
   EINMAL einfügen unter:  Avada  →  Optionen  →  Benutzerdefiniertes CSS
   (englisch: Avada → Options → Custom CSS). Danach nie wieder anfassen.

   WICHTIG — warum das hier steht und NICHT in der Seite:
   Der Classic Editor von WordPress zerschießt <style>-Blöcke im Seiteninhalt.
   Er hängt an jeden Zeilenumbruch ein <br /> und packt Absätze in <p>…</p>.
   Innerhalb von CSS ist beides Müll: der Browser bricht die Regel ab und
   verwirft alles danach. Genau das ist im bisherigen Entwurf passiert —
   dort ist von 13 Farb-Variablen nur die allererste (--blue) angekommen,
   der Rest wurde still verworfen. Deshalb: CSS gehört ins Theme, nicht in
   den Seiteninhalt.

   Alles ist auf ".nb" begrenzt. Solange der Seiteninhalt in
   <div class="nb"> … </div> steht, kann dieses CSS den Rest der Website
   (Header, Menü, Footer, andere Seiten) nicht beeinflussen.
   ========================================================================== */

.nb{
  /* ---- Marken-Farben ------------------------------------------------------
     Gemessen aus dem echten nibomed-Logo (Pixel-Sampling) und aus der aktiven
     Seite. Wer stattdessen die Palette aus dem eigenen Entwurf möchte, tauscht
     nur diese vier Zeilen:
        --nb-blue:#1E78BE;  --nb-blue-deep:#0E4670;
        --nb-accent:#EE8B2D; --nb-accent-dark:#D9761B;
     Alles andere passt sich automatisch an. */
  --nb-blue:#0878a8;          /* Logo-Blau, 52,5 % aller Logo-Pixel */
  --nb-blue-deep:#05587c;     /* dunkle Variante für dunkle Flächen */
  --nb-blue-soft:#eaf3f8;
  --nb-accent:#ff7e31;        /* Marken-Orange: Linien, Icons, Badges, Flaechen */
  --nb-accent-dark:#e2661a;
  /* WCAG-Entscheidung (Variante B, Stephens Wahl): Buttons behalten das leuchtende
     Marken-Orange, tragen aber DUNKLE Schrift (#1b2429 auf #ff7e31 = 6,2:1, AA-fest).
     Das vertiefte Orange unten dient nur noch kleinem Orange-TEXT auf Weiss
     (Eyebrows, FAQ-Plus), wo #ff7e31 zu blass waere. */
  --nb-accent-deep:#c25400;
  --nb-accent-deep-2:#a84800;
  --nb-accent-soft:#fff0e5;

  --nb-ink:#1b2429;
  --nb-ink-soft:#55646d;
  --nb-paper:#f2f7fa;         /* zarter Blaustich statt Neutralgrau – aus dem eigenen Entwurf übernommen */
  --nb-paper-2:#e4eef4;
  --nb-line:#d8e4ec;
  --nb-radius:16px;
  --nb-radius-sm:9px;
  --nb-shadow:0 22px 44px -26px rgba(8,60,90,.42);
  --nb-maxw:1180px;
  --nb-font:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--nb-font);
  color:var(--nb-ink);
  line-height:1.65;
  font-size:16px;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* --- Avada-Erbe neutralisieren (Avada setzt eigene Abstände/Größen) --- */
.nb *,.nb *::before,.nb *::after{box-sizing:border-box}
.nb p,.nb ul,.nb ol,.nb h1,.nb h2,.nb h3,.nb h4,.nb figure{margin:0;padding:0}
/* Alle Abstaende werden bewusst gesetzt — bis auf diesen einen: zwei aufeinander
   folgende Absaetze brauchen Luft, sonst kleben sie aneinander. */
.nb p + p{margin-top:14px}
.nb ul{list-style:none}
.nb img{max-width:100%;height:auto;display:block}
.nb a{color:inherit;text-decoration:none}
.nb h1,.nb h2,.nb h3,.nb h4{
  font-family:var(--nb-font);
  font-weight:400;              /* auf nibomed.de sind ALLE Überschriften regulär, nicht fett – auf ~20 Elementen gemessen */
  line-height:1.18;
  letter-spacing:-.012em;
  color:var(--nb-ink);
  text-transform:none;
}
.nb h1{font-size:clamp(2.05rem,4.5vw,3.25rem);margin-bottom:20px}
.nb h2{font-size:clamp(1.6rem,3.1vw,2.35rem);margin-bottom:14px}
.nb h3{font-size:1.24rem;margin-bottom:9px}
.nb h4{font-size:1rem;font-weight:700;margin-bottom:3px}

/* Zweifarbige Überschriften – echtes, wiederkehrendes Muster auf nibomed.de */
.nb .hl-a{color:var(--nb-blue)}
.nb .hl-b{color:var(--nb-accent)}

.nb .wrap{max-width:var(--nb-maxw);margin:0 auto;padding:0 24px;width:100%}
.nb .sec{padding:82px 0;position:relative}
.nb .sec-soft{background:var(--nb-paper)}

/* Vollbreite Farbbänder. Setzt voraus, dass der Fusion-Container auf
   100 % Breite steht. Steht er es nicht, wird das Band einfach schmaler –
   es bricht nichts. */
.nb .band{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}

.nb .eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nb-accent-deep);margin-bottom:16px
}
.nb .eyebrow::before{content:"";width:28px;height:2px;background:var(--nb-accent);flex:none}
.nb .eyebrow.blue{color:var(--nb-blue)}
.nb .eyebrow.blue::before{background:var(--nb-blue)}
.nb .lead{font-size:1.09rem;color:var(--nb-ink-soft);max-width:62ch;margin-bottom:0}
.nb .lead + .lead{margin-top:14px}
.nb .shead{margin-bottom:38px;max-width:760px}

/* --- Buttons --- */
.nb .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--nb-font);font-weight:700;font-size:.95rem;line-height:1;
  padding:15px 27px;border-radius:var(--nb-radius-sm);border:2px solid transparent;
  background:var(--nb-accent);color:var(--nb-ink);cursor:pointer;
  transition:background .2s ease,transform .2s ease,color .2s ease,border-color .2s ease;
  text-align:center
}
.nb .btn:hover,.nb .btn:focus-visible{background:var(--nb-accent-dark);color:var(--nb-ink);transform:translateY(-2px)}
.nb .btn.ghost{background:transparent;color:var(--nb-blue);border-color:var(--nb-blue)}
.nb .btn.ghost:hover{background:var(--nb-blue);color:#fff}
.nb .btn.onblue{background:#fff;color:var(--nb-blue-deep)}
.nb .btn.onblue:hover{background:var(--nb-accent);color:var(--nb-ink)}
.nb .btn.wide{width:100%}
.nb .tlink{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:.87rem;color:var(--nb-blue);
  border-bottom:2px solid var(--nb-accent);padding-bottom:2px;transition:color .2s
}
.nb .tlink:hover{color:var(--nb-accent-deep)}
.nb .ctarow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}

/* --- Marken-Signet (Kreis blau + Bogen orange, greift das "o" im Logo auf) --- */
.nb .mark{display:block;margin:0 auto 16px;width:34px;height:34px}
.nb .mark circle{stroke:var(--nb-blue);fill:none}
.nb .mark path{stroke:var(--nb-accent);fill:none}

/* --- Hero --- */
.nb .hero{padding:70px 0 66px;position:relative;overflow:hidden}
.nb .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 440px at 88% 8%,rgba(8,120,168,.13),transparent 62%),
    radial-gradient(560px 420px at 4% 96%,rgba(255,126,49,.10),transparent 60%)
}
.nb .hero > *{position:relative;z-index:1}
.nb .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.nb .hero .lead{font-size:1.16rem}
.nb .hero-phone{display:flex;align-items:center;gap:13px;margin-top:26px}
.nb .hero-phone .ic{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:var(--nb-blue-soft);color:var(--nb-blue);display:grid;place-items:center
}
.nb .hero-phone .n{font-size:1.22rem;font-weight:700;color:var(--nb-blue);line-height:1.2}
.nb .hero-phone .l{font-size:.83rem;color:var(--nb-ink-soft)}
.nb .hero-visual{position:relative}
.nb .hero-visual .frame{
  background:#fff;border:1px solid var(--nb-line);border-radius:22px;
  padding:24px;box-shadow:var(--nb-shadow)
}
.nb .hero-visual img{border-radius:14px;background:var(--nb-paper-2);padding:0;width:100%;aspect-ratio:4/3.2;object-fit:contain}
.nb .hero-badge{
  position:absolute;left:-18px;bottom:26px;
  background:var(--nb-blue);color:#fff;padding:16px 22px;border-radius:15px;
  box-shadow:0 18px 34px -14px rgba(5,70,100,.55);max-width:210px
}
.nb .hero-badge b{font-size:1.55rem;display:block;line-height:1;font-weight:800;margin-bottom:4px}
.nb .hero-badge span{font-size:.78rem;line-height:1.4;display:block}

/* --- Vertrauensband (dunkelblau) --- */
.nb .trust{background:var(--nb-blue-deep);color:#dbe9f1;padding:34px 0}
.nb .trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.nb .trust-item b{display:block;color:#fff;font-size:1.28rem;font-weight:800;margin-bottom:4px;line-height:1.25}
.nb .trust-item span{font-size:.85rem;color:#bfd6e4;line-height:1.5;display:block}

/* --- Produktkarten --- */
.nb .products{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.nb .pcard{
  background:#fff;border:1px solid var(--nb-line);border-radius:var(--nb-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .28s ease,box-shadow .28s ease
}
.nb .pcard:hover{transform:translateY(-4px);box-shadow:var(--nb-shadow)}
.nb .pcard.wide{grid-column:span 2;flex-direction:row}
.nb .pcard .thumb{background:var(--nb-paper-2);display:flex;align-items:center;justify-content:center;padding:26px}
.nb .pcard .thumb img{max-height:230px;aspect-ratio:1/1;object-fit:contain;margin:0 auto}
.nb .pcard.wide .thumb{flex:0 0 42%}
.nb .pbody{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.nb .kick{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--nb-accent-deep);margin-bottom:8px;display:block}
.nb .pcard.wide h3{font-size:1.6rem}
.nb .pbody p{font-size:.95rem;color:var(--nb-ink-soft);margin-bottom:15px}
.nb .plist{margin-bottom:20px}
.nb .plist li{font-size:.9rem;color:#3f515b;padding-left:25px;position:relative;margin-bottom:8px;line-height:1.5}
.nb .plist li::before{
  content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;
  background:var(--nb-blue);box-shadow:inset 0 0 0 3px #fff
}
.nb .plist li.alt::before{background:var(--nb-accent)}
.nb .pactions{margin-top:auto;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* --- Vorteile / Feature-Raster --- */
.nb .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.nb .feat{background:#fff;border:1px solid var(--nb-line);border-radius:var(--nb-radius);padding:28px}
.nb .feat .ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--nb-blue-soft);color:var(--nb-blue)
}
.nb .feat .ic.alt{background:var(--nb-accent-soft);color:var(--nb-accent-deep)}
.nb .feat p{font-size:.92rem;color:var(--nb-ink-soft)}
.nb .feats.two{grid-template-columns:repeat(2,1fr)}
.nb .feats.plain{grid-template-columns:repeat(4,1fr)}
.nb .feats.plain .feat{background:transparent;border:0;padding:0}
@media (max-width:980px){.nb .feats.plain{grid-template-columns:repeat(2,1fr)}}

/* --- Vollton-Orange-Block (echtes Element der aktiven Seite) --- */
.nb .callout{
  background:var(--nb-accent);color:var(--nb-ink);border-radius:var(--nb-radius);
  padding:40px 44px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center
}
.nb .callout h3{color:var(--nb-ink);font-size:1.5rem;margin-bottom:6px}
.nb .callout p{color:var(--nb-ink);opacity:.9;font-size:1rem;max-width:60ch}
.nb .callout .btn{background:#fff;color:var(--nb-ink);white-space:nowrap}
.nb .callout .btn:hover{background:var(--nb-ink);color:#fff}

/* --- Referenzen --- */
.nb .refs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nb .quote{
  background:#fff;border:1px solid var(--nb-line);border-left:3px solid var(--nb-blue);
  border-radius:var(--nb-radius);padding:30px;display:flex;flex-direction:column
}
.nb .quote .qm{font-size:2.6rem;line-height:.7;color:var(--nb-accent);margin-bottom:14px;font-weight:700}
.nb .quote .qh{font-size:1.08rem;color:var(--nb-blue-deep);margin-bottom:12px;line-height:1.35}
.nb .quote p{font-size:.92rem;color:var(--nb-ink-soft);margin-bottom:20px;flex:1}
.nb .quote .who{font-size:.85rem;color:var(--nb-ink-soft);padding-top:16px;border-top:1px solid var(--nb-line)}
.nb .quote .who b{display:block;color:var(--nb-ink);font-weight:700;font-size:.92rem}

/* --- Ansprechpartner --- */
.nb .person{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.nb .person p{color:var(--nb-ink-soft);margin-bottom:16px;font-size:1.02rem}
/* Gutachten-Fix v1.0.5: Karte hell, damit sie sich vom dunklen Kontaktband
   darunter abhebt (vorher Dunkel-auf-Dunkel am Seitenende). */
.nb .pc{background:var(--nb-blue-soft);color:var(--nb-ink);border:1px solid var(--nb-line);border-radius:var(--nb-radius);padding:36px}
.nb .pc h3{color:var(--nb-blue-deep);font-size:1.5rem;margin-bottom:2px}
.nb .pc .role{font-size:.9rem;color:var(--nb-ink-soft);margin-bottom:24px}
.nb .pc .line{
  display:flex;flex-direction:column;gap:2px;
  background:#fff;border:1px solid var(--nb-line);
  border-radius:12px;padding:16px 20px;margin-bottom:12px;transition:box-shadow .2s,border-color .2s
}
.nb .pc .line:hover{border-color:var(--nb-blue);box-shadow:var(--nb-shadow)}
.nb .pc .line b{color:var(--nb-blue-deep);font-size:1.05rem;font-weight:700}
.nb .pc .line span{font-size:.8rem;color:var(--nb-ink-soft)}

/* --- Kontakt --- */
.nb .contact{background:var(--nb-blue-deep);color:#dbe9f1;padding:78px 0}
.nb .contact h2{color:#fff}
.nb .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.nb .contact .lead{color:#bfd6e4}
.nb .bigphone{
  display:inline-flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  padding:20px 26px;border-radius:14px;margin:28px 0 14px;transition:background .2s
}
.nb .bigphone:hover{background:rgba(255,255,255,.14)}
.nb .bigphone .ic{color:#fff;flex:none;display:grid;place-items:center}
.nb .bigphone b{font-size:1.4rem;color:#fff;display:block;line-height:1.2;font-weight:700}
.nb .bigphone span{font-size:.8rem;color:#a9c6d8}
.nb .cmail{font-size:.98rem;color:#bfd6e4}
.nb .cmail a{border-bottom:1px solid var(--nb-accent);color:#fff}
/* Gutachten-Fix v1.0.5: Adresse stand doppelt (Kontaktband + Footer direkt
   darunter). Der Block bleibt im Seiteninhalt erhalten, wird aber ausgeblendet. */
.nb .caddr{display:none}
.nb .formbox{background:#fff;border-radius:var(--nb-radius);padding:34px;color:var(--nb-ink);box-shadow:var(--nb-shadow)}
.nb .formbox h3{color:var(--nb-blue-deep);margin-bottom:20px}

/* Avada-Formular im weißen Kasten an das Design angleichen */
.nb .formbox .fusion-form-form-wrapper input[type=text],
.nb .formbox .fusion-form-form-wrapper input[type=email],
.nb .formbox .fusion-form-form-wrapper input[type=tel],
.nb .formbox .fusion-form-form-wrapper textarea,
.nb .formbox .fusion-form-form-wrapper select{
  width:100%;font-family:var(--nb-font);font-size:.97rem;color:var(--nb-ink);
  background:var(--nb-paper);border:1px solid var(--nb-line);border-radius:11px;
  padding:13px 15px
}
.nb .formbox .fusion-form-form-wrapper textarea{min-height:110px;resize:vertical}
.nb .formbox .fusion-form-form-wrapper label{font-size:.8rem;font-weight:700;color:var(--nb-blue);margin-bottom:6px;display:block}
.nb .formbox .fusion-button,
.nb .formbox button[type=submit],
.nb .formbox input[type=submit]{
  width:100%;background:var(--nb-accent);border:0;color:var(--nb-ink);font-weight:700;
  border-radius:var(--nb-radius-sm);padding:15px 27px;font-size:.95rem;cursor:pointer
}
.nb .formbox .fusion-button:hover,
.nb .formbox button[type=submit]:hover,
.nb .formbox input[type=submit]:hover{background:var(--nb-accent-dark)}
.nb .privnote{font-size:.74rem;color:var(--nb-ink-soft);margin-top:14px;text-align:center;line-height:1.55}
.nb .privnote a{color:var(--nb-blue);text-decoration:underline}

/* --- Produktseiten: Spezifikationstabelle --- */
.nb .spectable{width:100%;border-collapse:collapse;margin-top:8px;font-size:.93rem}
.nb .spectable th,.nb .spectable td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--nb-line);vertical-align:top}
.nb .spectable th{width:38%;font-weight:700;color:var(--nb-blue-deep);background:var(--nb-paper)}
.nb .spectable tr:last-child th,.nb .spectable tr:last-child td{border-bottom:0}

/* --- Produktseiten: zweispaltiges Spotlight --- */
.nb .spot{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.nb .spot.rev .spot-media{order:2}
.nb .spot-media{background:#fff;border:1px solid var(--nb-line);border-radius:var(--nb-radius);padding:24px;box-shadow:var(--nb-shadow)}
.nb .spot-media img{border-radius:12px;background:var(--nb-paper-2);padding:0;aspect-ratio:4/3;object-fit:contain;width:100%}

/* --- Varianten-Kacheln --- */
.nb .variants{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.nb .variant{background:#fff;border:1px solid var(--nb-line);border-radius:var(--nb-radius-sm);padding:22px}
.nb .variant h4{color:var(--nb-blue-deep);font-size:1.05rem;margin-bottom:5px}
.nb .variant p{font-size:.87rem;color:var(--nb-ink-soft)}

/* --- FAQ (Rich-Result-fähig) --- */
.nb .faq{max-width:820px;margin:0 auto}
.nb .faq details{background:#fff;border:1px solid var(--nb-line);border-radius:var(--nb-radius-sm);padding:20px 24px;margin-bottom:12px}
.nb .faq summary{font-weight:700;cursor:pointer;color:var(--nb-blue-deep);font-size:1.02rem;list-style:none}
.nb .faq summary::-webkit-details-marker{display:none}
.nb .faq summary::after{content:"+";float:right;color:var(--nb-accent-deep);font-weight:700;font-size:1.3rem;line-height:1}
.nb .faq details[open] summary::after{content:"–"}
.nb .faq details p{margin-top:12px;color:var(--nb-ink-soft);font-size:.95rem}

/* --- Brotkrumen --- */
.nb .crumbs{font-size:.83rem;color:var(--nb-ink-soft);padding:22px 0 0}
.nb .crumbs a{color:var(--nb-blue)}
.nb .crumbs a:hover{text-decoration:underline}

/* --- Bild-Platzhalter (nur solange echte Fotos fehlen) --- */
.nb .ph{
  background:linear-gradient(135deg,var(--nb-paper),var(--nb-paper-2));
  border:1px dashed var(--nb-line);border-radius:12px;
  display:grid;place-items:center;min-height:220px;color:#7d949f;
  font-size:.8rem;font-weight:600;text-align:center;padding:20px
}

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width:980px){
  .nb .hero-grid,.nb .contact-grid,.nb .person,.nb .spot{grid-template-columns:1fr;gap:38px}
  .nb .spot.rev .spot-media{order:0}
  .nb .trust-row{grid-template-columns:1fr 1fr;gap:24px}
  .nb .feats,.nb .refs,.nb .variants{grid-template-columns:1fr 1fr}
  .nb .pcard.wide{grid-column:span 2}
}
@media (max-width:760px){
  .nb .sec{padding:56px 0}
  .nb .hero{padding:44px 0 48px}
  .nb .wrap{padding:0 20px}
  .nb .products,.nb .feats,.nb .refs,.nb .variants,.nb .feats.two{grid-template-columns:1fr}
  .nb .pcard.wide{grid-column:span 1;flex-direction:column}
  .nb .pcard.wide .thumb{flex:none}
  .nb .trust-row{grid-template-columns:1fr;gap:18px}
  .nb .callout{grid-template-columns:1fr;padding:30px 26px}
  .nb .hero-badge{position:static;margin-top:16px;max-width:none}
  .nb .hero-visual .frame{padding:16px}
  .nb .contact{padding:56px 0}
  .nb .pbody{padding:24px}
  .nb .spectable th{width:44%}
  .nb .btn{width:100%}
  .nb .ctarow{gap:10px}
}

/* Bewegungsreduktion respektieren (Barrierefreiheit) */
@media (prefers-reduced-motion:reduce){
  .nb *{transition:none !important;animation:none !important}
}


/* --------------------------------------------------------------------------
   Gutachten-Fixes v1.0.2 (Kap. 3):
   Konversionshierarchie — Voll-Orange nur fuer echte Anfrage-CTAs; Buttons in
   Produktkarten wirken als ruhige Zweitaktion. Plus sichtbare Fokus-Stile.
   -------------------------------------------------------------------------- */
.nb .pcard .btn{background:transparent;color:var(--nb-blue);border-color:var(--nb-blue)}
.nb .pcard .btn:hover,.nb .pcard .btn:focus-visible{background:var(--nb-blue);color:#fff}
.nb :is(a,.btn,summary):focus-visible{outline:3px solid var(--nb-blue);outline-offset:2px}

/* ==========================================================================
   ENDE nibomed-CSS — alles zwischen diesem Block und dem Kopf oben gehoert
   zusammen. Zum Rueckgaengigmachen: von der ersten Zeile "nibomed Redesign
   — Globales CSS" bis hier markieren, loeschen, speichern. Fertig.
   ========================================================================== */


/* ===== v1.3.0 – Bild-Playbook „Form folgt Inhaltstyp" (29.07.2026) =====
   Renders (freigestellt) behalten das Kreis-Badge.
   Echte FOTOS füllen die Bühne: Kartenkopf randlos, Hero mit cover.
   Foto-Erkennung über den Dateinamen – neue Fotos einfach hier ergänzen. */
.nb .pcard .thumb:has(img[src*="/assets/img/"]){padding:0}
.nb .pcard .thumb img[src*="/assets/img/"]{
  aspect-ratio:4/3;object-fit:cover;max-height:none;width:100%
}
.nb .hero-visual img[src*="/assets/img/"]{object-fit:cover;padding:0}