/* ═════════════════════════════════════════════════════════════════════
   site-common.css  —  Shared chrome for inner pages
   Nav · footer · base type · buttons · mobile nav · notice banner
   Inner pages (contact, education, impressum) all import this; the
   homepage (desktop-preview.html) keeps its own elaborated styles.
   ═════════════════════════════════════════════════════════════════════ */

/* Comfort scale: render the desktop/tablet layout at 80% — the "80% browser
   zoom" look the team preferred. Phones (<=720px) keep their compact layout. */
@media (min-width:721px){ html{ zoom:0.9; } }

:root{
  --green:#1b6b4a; --green-light:#e8f5ee; --dark:#1a1a2e; --mid:#4a4a5a; --fade:#67726d;
  --bg:#f5f5f0; --border:#e5e5e0;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);font-size:16px;line-height:1.6;
  color:var(--dark);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}

/* ───────── Notice (preview) banner ───────── */
.notice{
  background:#0f1a2e;color:rgba(255,255,255,0.85);
  font-size:12px;font-weight:500;letter-spacing:0.3px;
  padding:8px 24px;text-align:center;
}
.notice strong{color:#fff;font-weight:700}

/* ───────── Type ───────── */
.label{
  font-size:12px;font-weight:600;color:var(--green);
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--dark);text-wrap:balance}
h1{font-size:clamp(34px,5vw,56px);line-height:1.1;letter-spacing:-0.01em;margin-bottom:18px}
h2{font-size:clamp(26px,3.5vw,40px);line-height:1.2;margin-bottom:16px}
h3{font-size:clamp(18px,2vw,22px);line-height:1.3;margin-bottom:8px}
h4{font-size:15px;line-height:1.3;margin-bottom:6px}
p{text-wrap:pretty}
em{font-style:italic;color:var(--green);font-weight:600}

.lead{font-size:18px;line-height:1.6;color:var(--mid);max-width:680px;text-wrap:pretty}

/* ───────── Buttons ───────── */
.btn{
  font-weight:600;font-size:15px;padding:13px 26px;border-radius:8px;
  cursor:pointer;white-space:nowrap;transition:all .15s;
  font-family:inherit;display:inline-block;text-align:center;
  border:none;
}
.btn-solid{background:var(--green);color:#fff}
.btn-solid:hover{background:#155139}
.btn-outline{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn-outline:hover{background:var(--green-light)}

.btn-ghost{
  font-size:13px;font-weight:500;color:#fff;
  border:1px solid rgba(255,255,255,0.3);padding:8px 16px;
  border-radius:6px;cursor:pointer;background:transparent;
  font-family:inherit;
}
.btn-primary{
  font-size:13px;font-weight:500;color:#fff;background:var(--green);
  padding:8px 16px;border-radius:6px;border:none;cursor:pointer;
  font-family:inherit;
}

/* ───────── NAV ───────── */
.nav-outer{position:sticky;top:0;z-index:50;background:#000}
.nav{
  position:relative;padding:14px clamp(16px,3vw,36px);color:#fff;
  background:#000;border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}
.nav::before,.nav::after{display:none !important}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url('Website-BA/Website-BA/public/images/nav-banner.png?v=4');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.nav::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Layered: localized darkroom over the logo area (radial), then a darker
     left→right gradient so the whole bar reads less green-on-green while
     keeping the histology imagery visible on the right side.
     Radial is centered ~13% from the left and wider so BERLIN/ANALYTIX
     both sit on the same darkness — prevents the white stroke from looking
     uneven across the wordmark. */
  background:
    radial-gradient(ellipse 460px 180% at 13% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 55%, transparent 85%),
    linear-gradient(90deg,rgba(7,16,11,0.6) 0%,rgba(13,26,18,0.45) 55%,rgba(13,26,18,0.55) 100%);
}
.nav-inner{
  max-width:1360px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,2.6vw,44px);position:relative;z-index:1;flex-wrap:nowrap;
}
.nav-brand{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:nowrap}
.logo-mark{
  position:relative;display:block;
  height:clamp(46px,5vw,62px);
  aspect-ratio:219/80;flex-shrink:0;
}
.logo-mark img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
}
.glp-mark{height:clamp(48px,5.2vw,64px);width:auto;aspect-ratio:300/208;display:block;flex-shrink:0}
/* Halo only on the green BERLIN wordmark — ANALYTIX is already white and
   doesn't need rescuing from the histology banner.
   Hairline ~0.5px outline via 4 cardinal zero-blur shadows. Tight and clean,
   not chunky. */
.lm-berlin{
  filter:
    drop-shadow( 0.5px 0    0 #fff) drop-shadow(-0.5px 0    0 #fff)
    drop-shadow( 0    0.5px 0 #fff) drop-shadow( 0   -0.5px 0 #fff)
    drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}
.lm-analytix{
  filter:drop-shadow(0 1px 4px rgba(0,0,0,0.55));
}
.accred-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:6px;padding:6px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.28),0 0 0 1px rgba(255,255,255,0.35);
  flex-shrink:0;text-decoration:none;
}
.accred-mark{
  height:clamp(30px,3.2vw,40px);width:auto;display:block;
}
.nav-links{display:flex;gap:clamp(12px,1.6vw,24px);flex-wrap:nowrap}
.nav-links a{
  font-size:14px;font-weight:500;color:rgba(255,255,255,0.78);
  transition:color .15s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active{font-weight:600;border-bottom:2px solid var(--green);padding-bottom:2px}
.nav-cta{display:flex;gap:12px;align-items:center;margin-left:clamp(8px,1.6vw,28px)}

/* ───────── Language toggle ───────── */
.lang-toggle{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;padding:2px;
  font-family:inherit;
}
.lang-opt{
  background:transparent;border:none;cursor:pointer;
  color:rgba(255,255,255,0.55);
  font-size:11px;font-weight:600;letter-spacing:0.6px;
  padding:4px 10px;border-radius:999px;
  transition:background .15s,color .15s;
  font-family:inherit;
}
.lang-opt:hover{color:#fff}
.lang-opt.active{background:rgba(255,255,255,0.95);color:#0d1a12}

/* Mobile nav toggle */
.nav-toggle-input{display:none}
.nav-toggle{
  display:none;width:42px;height:42px;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:rgba(0,0,0,0.3);border-radius:8px;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.15);
}
.nav-toggle span{
  display:block;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:transform .25s,opacity .25s;
}
.nav-toggle-input:checked ~ .nav-inner .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle-input:checked ~ .nav-inner .nav-toggle span:nth-child(2){opacity:0}
.nav-toggle-input:checked ~ .nav-inner .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1000px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(0,0,0,0.97);backdrop-filter:blur(14px);
    padding:6px 0;border-top:1px solid rgba(255,255,255,0.08);
    box-shadow:0 14px 30px rgba(0,0,0,0.3);
  }
  .nav-links a{padding:14px 22px;font-size:16px;border-bottom:1px solid rgba(255,255,255,0.08);color:#fff;white-space:normal;text-shadow:none}
  .nav-links a:last-child{border-bottom:none}
  .nav-cta .btn-ghost{display:none !important}
  .nav-toggle-input:checked ~ .nav-inner .nav-links{display:flex}
}

@media (max-width:720px){
  .nav-toggle{display:flex}
  .nav-inner{flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:0 14px;gap:8px;position:relative}
  .nav-brand{flex:0 1 auto;min-width:0;flex-wrap:nowrap;gap:10px}
  .logo-mark{height:38px}
  /* Declutter the cramped phone nav: the GLP and DAkkS marks already appear in
     the hero and footer, so drop them from the nav bar on small screens. */
  .glp-mark{display:none}
  .accred-badge{display:none}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(0,0,0,0.97);backdrop-filter:blur(14px);
    padding:6px 0;
    border-top:1px solid rgba(255,255,255,0.08);
    box-shadow:0 14px 30px rgba(0,0,0,0.3);
  }
  .nav-links a{
    padding:14px 22px;font-size:16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-shadow:none;color:#fff;
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{gap:6px}
  .nav-cta .btn-ghost{display:none !important}
  /* Keep only the EN/DE toggle + burger in the phone bar so it never crams. */
  .nav-cta .btn-primary{display:none}
  .nav-toggle-input:checked ~ .nav-inner .nav-links{display:flex}
}

/* ───────── PAGE HEADER (used on inner pages) ───────── */
.page-head{
  padding:clamp(48px,7vw,84px) 0 clamp(32px,4vw,56px);
  border-bottom:1px solid var(--border);
  text-align:center;
}
.page-head .lead{margin-left:auto;margin-right:auto;font-size:17px}

/* ───────── FOOTER ───────── */
footer{background:#0f1a2e;padding:60px 0 28px;color:#fff;margin-top:auto}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:40px;
}
.footer-logo{height:48px;margin-bottom:16px}
.footer-brand p{font-size:14px;line-height:1.7;color:rgba(255,255,255,0.6)}
.footer-col h4{
  font-family:var(--sans);font-weight:600;font-size:13px;color:#fff;
  margin-bottom:14px;letter-spacing:0.4px;text-transform:uppercase;
}
.footer-col a{
  display:block;font-size:13.5px;color:rgba(255,255,255,0.6);
  margin-bottom:8px;transition:color .15s;
}
.footer-col a:hover{color:#fff}
.footer-bar{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:rgba(255,255,255,0.5);
}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bar{flex-direction:column;gap:8px;text-align:center}
}

/* layout: body becomes a flex column so footer sticks to bottom on short pages */
html,body{min-height:100%}
body{display:flex;flex-direction:column}
main{flex:1 0 auto}