/* Referenzen – Schlossberginstitut (Artikel 55) */
:is(.ref-page, #article-55){--sb-red:#d60525;--sb-rose:#fbb7a5;--sb-text:#222;--sb-white:#fff}

/* Grundlayout */
:is(.ref-page, #article-55) .sb-ref{font-family:Verdana,sans-serif;font-size:11pt;line-height:1.65;color:var(--sb-text)}
:is(.ref-page, #article-55) .sb-ref h1{font-size:22pt;line-height:1.25;margin:0 0 .7em;color:var(--sb-red)}
:is(.ref-page, #article-55) .sb-ref p{margin:.6em 0}

/* Grid */
:is(.ref-page, #article-55) .sb-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){:is(.ref-page, #article-55) .sb-grid{grid-template-columns:1fr 1fr}}

/* Card */
:is(.ref-page, #article-55) .sb-card{position:relative;background:var(--sb-white);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden;transition:box-shadow .18s ease}
:is(.ref-page, #article-55) .sb-card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 0% 0%, rgba(251,183,165,.0), rgba(251,183,165,.12));opacity:0;transition:opacity .18s ease;pointer-events:none}
:is(.ref-page, #article-55) .sb-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.12)}
:is(.ref-page, #article-55) .sb-card:hover::after{opacity:1}

/* Kopfzeile: Foto | Name, Claim, Links */
:is(.ref-page, #article-55) .sb-header{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:16px}
@media (max-width:420px){:is(.ref-page, #article-55) .sb-header{grid-template-columns:100px 1fr;padding:12px}}
:is(.ref-page, #article-55) .sb-card-media{width:120px}
:is(.ref-page, #article-55) .sb-card-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:10px}
:is(.ref-page, #article-55) .sb-main{min-width:0}
:is(.ref-page, #article-55) .sb-card-title{font-size:14.5pt;line-height:1.4;margin:0 0 .15rem;font-weight:700;color:var(--sb-red)}
:is(.ref-page, #article-55) .sb-card-claim{font-size:12.5pt;line-height:1.5;margin:0 0 .45rem}

/* Buttons */
:is(.ref-page, #article-55) .sb-card-cta-top{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
:is(.ref-page, #article-55) .sb-btn{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .8rem;border-radius:999px;text-decoration:none;font-weight:700;color:#fff}
:is(.ref-page, #article-55) .sb-btn-primary{background:var(--sb-red)}
:is(.ref-page, #article-55) .sb-btn-rose{background:var(--sb-rose)}
:is(.ref-page, #article-55) .sb-btn:hover{filter:brightness(0.95)}
:is(.ref-page, #article-55) .sb-btn:focus-visible{outline:2px solid var(--sb-rose);outline-offset:2px}

/* Textblock unter Kopfzeile */
:is(.ref-page, #article-55) .sb-bodytext{padding:0 16px}
:is(.ref-page, #article-55) .sb-card-text{margin:.2rem 0 .5rem}

/* Zitat mit rosa Streifen links */
:is(.ref-page, #article-55) .sb-quote{margin:.2rem 0 .6rem;padding-left:.8rem;border-left:4px solid var(--sb-rose);font-style:italic}

/* „Mehr Details“ (optional) */
:is(.ref-page, #article-55) details.sb-more{margin:.1rem 16px .2rem}
:is(.ref-page, #article-55) details.sb-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;border-radius:12px;border:1px solid #e8e8e8;user-select:none}
:is(.ref-page, #article-55) details.sb-more summary::-webkit-details-marker{display:none}
:is(.ref-page, #article-55) details.sb-more[open] summary{border-color:#ddd}

/* Ausbildungslinks unten */
:is(.ref-page, #article-55) .sb-edu{padding:0 16px 16px;color:#555;font-size:10.5pt}
:is(.ref-page, #article-55) .sb-edu b{font-weight:700;color:#333}
:is(.ref-page, #article-55) .sb-edu a{color:#0645ad;text-underline-offset:2px}

/* Tabs (optional) */
:is(.ref-page, #article-55) .sb-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.25rem}
:is(.ref-page, #article-55) .sb-tab{border:0;padding:.45rem .7rem;background:#f6f6f6;border-radius:999px;cursor:pointer;font:inherit}
:is(.ref-page, #article-55) .sb-tab.is-active{background:var(--sb-red);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
:is(.ref-page, #article-55) .sb-tab:focus-visible{outline:2px solid var(--sb-rose);outline-offset:2px}

/* Utilities */
:is(.ref-page, #article-55) .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){:is(.ref-page, #article-55) .sb-card{transition:none}}
/* Mobile-Fixes */
@media (max-width: 640px){
  .sb-header{
    display:grid;
    grid-template-columns: 108px 1fr; /* Bild | Text */
    align-items:start;
    gap:12px;
  }
  .sb-card-media{width:108px}
  .sb-card-media img{width:108px; height:auto; max-width:none; aspect-ratio:4/5; object-fit:cover}
  .sb-card-title{font-size:18px; line-height:1.2; margin:0 0 .2rem}
  .sb-card-claim{font-size:14px; line-height:1.35; margin:0 0 .35rem}
}
/* CTA kompakt + stabil */
.sb-main{display:flex; flex-direction:column}
.sb-card-cta-top{margin-top:.35rem; display:flex; flex-wrap:wrap; gap:.4rem}
@media (max-width:640px){
  .sb-btn{padding:.35rem .7rem; font-size:0.95rem}
}
/* Fix: Mobil – Text darf nicht ins Foto laufen */
.ref-page .sb-main{min-width:0; display:flex; flex-direction:column}
.ref-page .sb-card-title,
.ref-page .sb-card-claim{overflow-wrap:anywhere; word-break:normal}

/* sichere Spaltenbreite fürs Bild */
@media (max-width:640px){
  .ref-page .sb-header{
    display:grid;
    grid-template-columns:110px 1fr; /* Foto | Text */
    gap:12px; align-items:start;
  }
  .ref-page .sb-card-media{width:110px}
  .ref-page .sb-card-media img{width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover}
}
/* Fix: Text läuft ins Foto – Header robuster machen */
.ref-page .sb-header{
  display:grid;
  grid-template-columns:minmax(112px, 120px) 1fr; /* Foto | Text */
  gap:14px;
  align-items:start;
}

/* Bild darf Spalte nicht überragen */
.ref-page .sb-card-media{width:auto}
.ref-page .sb-card-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
}

/* Mobil feinabstimmen */
@media (max-width:640px){
  .ref-page .sb-header{grid-template-columns:120px 1fr}
  .ref-page .sb-card-title{font-size:18px; line-height:1.25}
  .ref-page .sb-card-claim{font-size:14px; line-height:1.3}
  .ref-page .sb-main{min-width:0}
}
/* --- Mobile-Fix: Bildspalte hart auf 110px begrenzen --- */
@media (max-width:640px){
  .ref-page .sb-header{
    display:grid;
    grid-template-columns:110px 1fr; /* Foto | Text */
    gap:12px; align-items:start;
  }
  .ref-page .sb-header .sb-card-media{
    width:110px; min-width:110px; max-width:110px;  /* kein Wachsen mehr */
  }
  .ref-page .sb-header .sb-card-media img{
    display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  }
  .ref-page .sb-header .sb-main{min-width:0}
}
/* MOBIL – Ziel-Layout */
@media (max-width:640px){
  .ref-page .sb-card .sb-header{
    display:grid;
    grid-template-columns:122px 1fr;   /* Foto | Text */
    grid-template-rows:auto 1fr;       /* Titel | Claim bis Fotounterkante */
    column-gap:18px; row-gap:8px;
    align-items:start; padding:16px;
  }
  .ref-page .sb-card .sb-card-media{
    grid-column:1; grid-row:1 / span 2;
    width:122px; min-width:122px; max-width:122px;
  }
  .ref-page .sb-card .sb-card-media img{
    display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:10px;
  }

  /* Inhalt rechts */
  .ref-page .sb-card .sb-main{display:contents}
  .ref-page .sb-card .sb-card-title{
    grid-column:2; grid-row:1; margin:0 0 .2rem; font-size:18px; line-height:1.25;
  }
  .ref-page .sb-card .sb-card-claim{
    grid-column:2; grid-row:2; align-self:end; margin:0; font-size:14px; line-height:1.35; overflow-wrap:anywhere;
  }

  /* CTAs unter Foto + Text, volle Breite */
  .ref-page .sb-card .sb-card-cta-top{
    grid-column:1 / -1; grid-row:3;
    display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem;
  }
  .ref-page .sb-card .sb-btn{padding:.4rem .85rem}
}
/* MOBIL – robust: Text rechts, nie im Foto; CTAs groß und darunter */
@media (max-width:640px){
  .ref-page .sb-card .sb-header{
    display:grid !important;
    grid-template-columns:124px 1fr !important; /* Foto | Text */
    grid-template-rows:auto 1fr;
    column-gap:18px; row-gap:8px;
    align-items:start;
  }
  .ref-page .sb-card .sb-card-media{
    grid-column:1; grid-row:1 / span 2;
    width:124px !important; min-width:124px !important; max-width:124px !important;
  }
  .ref-page .sb-card .sb-card-media img{
    display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  }

  /* Inhalt rechts, sauber in Spalte 2 */
  .ref-page .sb-card .sb-main{display:contents; min-width:0}
  .ref-page .sb-card .sb-card-title{grid-column:2 / 3; grid-row:1; margin:0 0 .2rem}
  .ref-page .sb-card .sb-card-claim{
    grid-column:2 / 3; grid-row:2; align-self:end; margin:0;
    overflow-wrap:anywhere; word-break:normal; min-width:0;
  }

  /* CTAs unter Foto+Text, Schriftgröße wie Fließtext */
  .ref-page .sb-card .sb-card-cta-top{
    grid-column:1 / -1; grid-row:3;
    display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem;
  }
  .ref-page .sb-card .sb-btn{
    font-size:11pt; line-height:1.35; padding:.5rem 1rem; border-radius:999px;
  }
}
/* ===== Layout: Titel oben, dann Foto+Claim, dann CTAs ===== */
:is(.ref-page, #article-55) .sb-header{
  display:grid !important;
  grid-template-columns:120px 1fr;          /* Foto | Text */
  grid-template-rows:auto auto auto;        /* title | media+claim | ctas */
  grid-template-areas:
    "title title"
    "media claim"
    "cta   cta";
  column-gap:16px; row-gap:10px;
  align-items:start; padding:16px;
}
:is(.ref-page, #article-55) .sb-main{display:contents; min-width:0}
:is(.ref-page, #article-55) .sb-card-title{grid-area:title; margin:0; color:#d60525}
:is(.ref-page, #article-55) .sb-card-claim{
  grid-area:claim; margin:0; line-height:1.45;
  display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere;
}
:is(.ref-page, #article-55) .sb-card-claim span{display:block}  /* jede Bezeichnung eigene Zeile */
:is(.ref-page, #article-55) .sb-card-cta-top{grid-area:cta; display:flex; flex-wrap:wrap; gap:.6rem}
:is(.ref-page, #article-55) .sb-card-media{grid-area:media; width:120px; min-width:120px; max-width:120px}
:is(.ref-page, #article-55) .sb-card-media img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block}

/* Mobil-Feintuning */
@media (max-width:640px){
  :is(.ref-page, #article-55) .sb-header{
    grid-template-columns:124px 1fr;
    column-gap:18px; row-gap:8px;
  }
  :is(.ref-page, #article-55) .sb-card-media{width:124px; min-width:124px; max-width:124px}
  :is(.ref-page, #article-55) .sb-card-title{font-size:18px; line-height:1.25}
  :is(.ref-page, #article-55) .sb-card-claim{font-size:14px; line-height:1.35}
  :is(.ref-page, #article-55) .sb-card-cta-top .sb-btn{font-size:11pt; line-height:1.35; padding:.5rem 1rem}
}

/* Sicherheit: Text nie ins Foto */
:is(.ref-page, #article-55) .sb-card-title,
:is(.ref-page, #article-55) .sb-card-claim{word-break:normal; overflow-wrap:anywhere}
/* Claim zeilenweise + mehr Abstand Bild|Text */
:is(.ref-page,#article-55) .sb-header{column-gap:20px}
:is(.ref-page,#article-55) .sb-card-claim{
  display:flex; flex-direction:column; gap:2px; margin:0; line-height:1.45; overflow-wrap:anywhere;
}
:is(.ref-page,#article-55) .sb-card-claim span{display:block}
@media (max-width:640px){
  :is(.ref-page,#article-55) .sb-header{
    grid-template-columns:128px 1fr; column-gap:22px !important;
  }
  :is(.ref-page,#article-55) .sb-card-media{width:128px; min-width:128px; max-width:128px}
  :is(.ref-page,#article-55) .sb-card-cta-top .sb-btn{font-size:11pt; padding:.5rem 1rem}
}
/* Mobile: Kurzbeschreibung weiter nach oben, dicht an den Namen */
@media (max-width:640px){
  .ref-page .sb-header{
    grid-template-columns:116px 1fr; /* Bild | Text */
    gap:10px;
    align-items:start;
    grid-auto-rows:min-content;
  }
  .ref-page .sb-main{
    display:flex;
    flex-direction:column;
    justify-content:flex-start; /* Text startet ganz oben */
  }
  .ref-page .sb-card-title{
    font-size:16.5px;     /* etwas kleiner → Claim rückt hoch */
    line-height:1.15;
    margin:0 0 .05rem;    /* fast kein Abstand unter dem Namen */
  }
  .ref-page .sb-card-claim{
    margin:.10rem 0 .45rem; /* Claim näher an den Namen */
  }
}
/* MOBIL – Claim direkt unter dem Namen, bündig mit dem Foto */
@media (max-width:640px){
  .ref-page .sb-header{
    display:grid !important;
    grid-template-columns:118px 1fr !important;   /* Foto | Text */
    grid-template-areas:
      "title title"
      "media claim"
      "cta   cta";
    column-gap:16px;
    row-gap:4px;               /* weniger Abstand -> Claim höher */
    align-items:start;
    padding:14px 16px;
  }

  .ref-page .sb-card-media{
    grid-area:media;
    width:118px !important; min-width:118px !important; max-width:118px !important;
  }

  .ref-page .sb-main{display:contents !important;}  /* Title/Claim in die Grid-Zellen */

  .ref-page .sb-card-title{
    grid-area:title;
    margin:0 0 2px !important;  /* fast kein Abstand unter dem Namen */
  }

  .ref-page .sb-card-claim{
    grid-area:claim;
    margin:0 !important;
    align-self:start !important; /* oben ausrichten */
    line-height:1.35;
  }

  .ref-page .sb-card-cta-top{
    grid-area:cta;
    margin-top:8px !important;   /* Buttons darunter */
  }
}
/* MOBIL – Claim leicht unter die Fotokante setzen */
@media (max-width:640px){
  .ref-page .sb-card-claim{
    padding-top:.5rem !important;   /* ~eine Zeile Abstand */
  }
}
/* --- Bild-Zoom (Lightbox) --- */
/* Klick-Hinweis */
.sb-card-media .sb-zoom{display:block}
.sb-card-media .sb-zoom img{cursor:zoom-in}

/* Overlay standard: ausblenden */
.sb-lightbox{
  position:fixed; inset:0;
  display:none;                      /* unsichtbar, bis :target */
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.85);
  z-index:9999; padding:2rem; cursor:zoom-out;
}

/* Overlay sichtbar, wenn Anker im URL-Hash ist */
.sb-lightbox:target{display:flex}

/* Großes Bild zentrieren und begrenzen */
.sb-lightbox img{
  max-width:min(96vw,1200px);
  max-height:92vh;
  width:auto; height:auto;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}