:root{
  --bg:#ffffff;
  --text:#0f0f0f;
  --muted:#61646b;
  --accent:#111;
  --border:#e8e8ea;
  --container:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:#0b57d0;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px;top:auto;overflow:hidden}
.skip:focus{left:8px;top:8px;background:#000;color:#fff;padding:8px 10px;border-radius:8px;z-index:9999}

.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.brand img{height:56px;width:auto}

.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:0}
.nav-toggle span{width:22px;height:2px;background:#111;display:block}

.nav-list{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{color:#111;text-decoration:none;font-weight:500}
.nav-list .btn{margin-left:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;border:1px solid transparent;font-weight:600;text-decoration:none}
.btn-primary{background:#111;color:#fff;border-color:#111}
.btn-primary:hover{filter:brightness(.95)}
.btn-link{border-color:transparent;color:#111}

.section{padding:84px 0}
.section-title{text-align:center;font-size:clamp(24px,4.2vw,36px);margin:0 0 32px}

.hero{padding:64px 0 36px;border-bottom:1px solid var(--border);background:#fff}
.hero-grid{display:grid;grid-template-columns:1.1fr;gap:28px;align-items:center}
.hero-copy h1{margin:0 0 12px;font-weight:700;letter-spacing:-0.02em;line-height:1.04}
.hero-copy h1 span{display:block;font-size:clamp(36px,7vw,68px)}
.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:60ch}
.hero-cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.hero-photo{border-radius:16px;overflow:hidden;border:1px solid var(--border)}

.focus-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px}
.focus-card{border:1px solid var(--border);border-radius:16px;padding:24px;text-align:center}
.focus-card .icon{width:52px;height:auto;margin-bottom:10px}
.focus-card h3{margin:6px 0 8px}
.focus-card p{margin:0;color:var(--muted)}

.team-grid{display:grid;gap:16px;grid-template-columns:1fr}
.person{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#fff}
.person img{width:100%;height:auto;display:block}
.person figcaption{padding:12px 16px}
.person h3{margin:0 0 6px}
.person p{margin:0;color:var(--muted)}

.service{border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px}
.service h3{margin-top:0}
.cols{display:grid;grid-template-columns:1fr;gap:14px}
.cols h4{margin:0 0 8px}
.cols ul{margin:0 0 0 18px;padding:0}
.cols li{margin:4px 0}

.contact-grid{display:grid;gap:16px;grid-template-columns:1fr}
.contact-card{border:1px solid var(--border);border-radius:16px;padding:20px}
.map-wrap{border:1px solid var(--border);border-radius:16px;overflow:hidden;min-height:320px}
.map-wrap iframe{width:100%;height:100%;min-height:320px;border:0}

.footer{border-top:1px solid var(--border);padding:28px 0;margin-top:40px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
.footer a{color:#555}

@media (min-width: 760px){
  .hero-grid{grid-template-columns:1.1fr 1fr}
  .focus-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns: 1fr 1.2fr;align-items:stretch}
}

/* --- Adjustments per user feedback (v3) --- */
.nav-list .btn-primary,
.btn-primary{
  color:#fff !important;
}

/* Larger hero image similar to current design */
@media (min-width: 760px){
  .hero-grid{
    grid-template-columns: 1fr 1.25fr;
    min-height: 74vh;
  }
  .hero-photo{
    height: 74vh;
    border-radius: 20px;
  }
  .hero-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

/* --- v4: Show full hero photo (no cropping) --- */
@media (min-width: 760px){
  .hero-grid{
    grid-template-columns: 1fr 1.25fr;
    min-height: 74vh;
  }
  .hero-photo{
    height: auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#fff;
  }
  .hero-photo img{
    width:100%;
    height:auto !important;
    max-height:74vh;
    object-fit: cover !important;
  }
}

@media (max-width: 759.98px){
  .hero-photo{
    height:auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#fff;
  }
  .hero-photo img{
    width:100%;
    height:auto !important;
    max-height:50vh;
    object-fit: cover !important;
  }
}

/* --- v6: CV text under photos --- */
.person .cv{padding:12px 16px 16px;border-top:1px dashed var(--border);background:#fff}
.person .cv p{margin:0 0 10px}
.person .cv p:last-child{margin-bottom:0}

/* v7: style linked headings for Publikationen */
.person figcaption .cv h4 a{color:inherit;text-decoration:none}
.person figcaption .cv h4 a:hover{text-decoration:underline}

/* v11: Hero without letterboxing */
@media (min-width: 760px){
  .hero-grid{grid-template-columns: 1fr 1.25fr; min-height: 78vh;}
  .hero-photo{height: 78vh !important; border-radius: 20px; overflow: hidden; border:1px solid var(--border);}
  .hero-photo img{width:100%; height:100% !important; object-fit: cover !important;}
}
@media (max-width: 759.98px){
  .hero-photo{height: 56vh !important; border-radius: 16px; overflow: hidden; border:1px solid var(--border);}
  .hero-photo img{width:100%; height:100% !important; object-fit: cover !important;}
}

/* v11: center icons in Schwerpunkte cards */
.focus-card .icon{display:block;margin:0 auto 10px}

/* v12: Full hero photo visible, no boxing */
.hero-photo{
  height:auto !important;
  border:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
}
.hero-photo img{
  width:100%;
  height:auto !important;
  object-fit:contain !important;
}
@media (min-width:760px){
  .hero-grid{min-height:unset}
}

/* v15: legal section typography */
.legal{max-width: 900px}
.legal h3{margin-top: 8px}
.legal h4{margin: 14px 0 6px}
.legal p{margin: 8px 0;color:var(--text)}

/* v22: single combined legal box */
details.legal-details{border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:#fff}
details.legal-details[open]{background:#fafafa}
details.legal-details summary{font-weight:700; cursor:pointer; list-style:none; margin:0}
details.legal-details summary::-webkit-details-marker{display:none}
.legal-content-body p{margin:8px 0}
.legal-content-body h4{margin:14px 0 6px}
.legal-actions{display:flex; justify-content:flex-end; margin-top:12px}
.legal-close-btn{background:#f3f4f6; border:1px solid var(--border); padding:6px 10px; border-radius:8px; cursor:pointer}
.legal-close-btn:hover{filter:brightness(.98)}

/* v24: ensure the first figcaption paragraph uses main text color (not muted) */
.person figcaption > p{ color: var(--text) }

/* v25: MOBILE-ONLY adjustments (desktop unchanged) */
@media (max-width: 767.98px){

  /* 1) Hide all nav links except the primary CTA */
  .nav-list a { display: none; }
  .nav-list a.btn.btn-primary { display: inline-flex; }

  /* 3) Ensure logo is visible and aligned top-left */
  .brand { display: block; }
  .brand img { height: 48px; width: auto; }

  /* 4) Reorder hero: photo first, then text; widen photo */
  .hero-grid { display: flex; flex-direction: column; }
  .hero-photo { order: -1; margin: 8px 0 12px; }
  .hero-photo img {
    width: calc(100vw - 24px); /* nearly edge-to-edge with small gutter */
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* 5) Slightly larger headline on mobile */
  .hero-copy h1 span { font-size: clamp(30px, 9.8vw, 44px); }
}

/* v26: Tighter header on mobile */
@media (max-width: 767.98px){
  .header-inner{ min-height: 56px !important; padding-top: 4px; padding-bottom: 4px; }
  .brand img{ height: 40px !important; }
  .nav-list a.btn.btn-primary{ padding: 6px 10px !important; font-size: 0.95rem !important; border-radius: 8px; }
}
/* --- CTA Button Behavior Fix --- */
/* Show exactly ONE "Termin vereinbaren" button depending on device */
@media (min-width: 768px){
  .nav-list .cta-scroll { display: inline-flex !important; } /* desktop/tablet: scroll */
  .nav-list .cta-call   { display: none !important; }
}
@media (max-width: 767.98px){
  .nav-list .cta-scroll { display: none !important; }
  .nav-list .cta-call   { display: inline-flex !important; } /* mobile: call */
}