/* home.css - nur index.html */

html,body{
  height:100%;
  margin:0;
}

body{
  font-family:var(--font-body);
  background:var(--c-warm-white);
  color:var(--c-steel-blue);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
  word-break:break-word;
}

a{ color:inherit; }

button{ font-family:inherit; }

.page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding: clamp(20px, 3vh, 40px) clamp(20px, 5vw, 64px);
  max-width:1440px;
  margin:0 auto;
}

.site-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding-bottom: clamp(16px, 3vh, 32px);
}

.logo{
  height: clamp(42px, 4.8vw, 60px);
  width:auto;
  display:block;
}

main.hero{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items:stretch;
}

.hero-content{
  max-width:600px;
  align-self:center;
  display:flex;
  flex-direction:column;
  gap: clamp(10px, 1.6vh, 16px);
}

.role-eyebrow{
  display:flex;
  align-items:center;
  gap: var(--sp-3);
  color:var(--c-text-gray);
  font-size: 18px;
  font-weight:600;
  letter-spacing:0.03em;
}

.role-eyebrow-text{
  min-width:0;
  flex:1 1 auto;
}

.role-eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--c-primary-blue);
  flex:0 0 auto;
}

h1.name{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--c-steel-blue);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height:1.1;
  margin:0;
  letter-spacing:0.002em;
}

p.positioning{
  font-size: clamp(13.5px, 1vw, 15px);
  color:var(--c-text-gray);
  font-weight:500;
  letter-spacing:0.015em;
  margin:0;
}

p.lead{
  font-size: clamp(16px, 1.25vw, 19px);
  color:var(--c-steel-blue);
  font-weight:600;
  margin:0;
  max-width:46ch;
}

p.profile{
  font-size: 18px;
  color:var(--c-text-gray);
  max-width:52ch;
  margin:0;
}

.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-2);
}

.cta{
  display:inline-flex;
  align-items:center;
  background:var(--c-steel-blue);
  color:var(--c-paper);
  text-decoration:none;
  font-weight:600;
  font-size: 18px;
  padding: clamp(12px,1.6vh,15px) clamp(22px,2.4vw,30px);
  border-radius:var(--radius-lg);
  border:1px solid var(--c-steel-blue);
  transition: background-color .18s ease, border-color .18s ease;
}

.cta:hover,
.cta:focus-visible{
  background:#33495a;
  border-color:#33495a;
}

.more-link{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:var(--c-steel-blue);
  font-size: 18px;
  font-weight:500;
  position:relative;
  padding-bottom:3px;
  border-bottom:1px solid var(--c-primary-blue);
  transition: color .18s ease, border-color .18s ease;
}

.more-link:hover,
.more-link:focus-visible{
  border-color:var(--c-steel-blue);
}

.hero-photo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: clamp(16px, 2vw, 24px);
}

.photo-frame{
  /* Nicht wachsen: der Rahmen bleibt so hoch wie das Bild, damit die
     Caption mit konstantem Abstand direkt darunter sitzt. Der freie
     Platz verteilt sich ueber justify-content der Spalte. */
  flex:0 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c-warm-white);
}

.photo-frame img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  border-radius:var(--radius-lg);
}

.photo-caption{
  flex:0 0 auto;
  background:var(--c-light-blue);
  border-left:8px solid var(--c-gold);
  border-radius:var(--radius-lg);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap: var(--sp-2);
  overflow:hidden;
}

.caption-lead{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  color:var(--c-gold-text);
  font-size: clamp(17px, 1.5vw, 21px);
}

.caption-main{
  margin:0;
  font-family:var(--font-display);
  font-style:normal;
  font-weight:500;
  color:var(--c-steel-blue);
  font-size: clamp(21px, 2.1vw, 27px);
  line-height:1.28;
}

.site-footer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: var(--sp-3);
  padding-top: clamp(16px, 3vh, 32px);
  margin-top: clamp(8px, 1.5vh, 16px);
  border-top:1px solid rgba(61,90,107,0.12);
  font-size: clamp(12.5px, 0.85vw, 13.5px);
  color:var(--c-text-gray);
}

.legal-link{
  background:none;
  text-decoration:none;
  border:none;
  padding:2px 0;
  cursor:pointer;
  color:var(--c-text-gray);
  font-size:inherit;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}

.legal-link:hover,
.legal-link:focus-visible{
  color:var(--c-steel-blue);
  border-color:var(--c-text-gray);
}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(61,90,107,0.42);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 4vw, 40px);
  z-index:100;
}

.modal-overlay[hidden]{ display:none; }

.modal{
  background:var(--c-paper);
  border-radius:var(--radius-lg);
  max-width:640px;
  width:100%;
  max-height:min(84vh, 720px);
  overflow-y:auto;
  padding: clamp(28px, 4vw, 48px);
  position:relative;
  box-shadow:var(--shadow-soft);
}

.modal-close{
  position:absolute;
  top: clamp(16px, 2vw, 22px);
  right: clamp(16px, 2vw, 22px);
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(61,90,107,0.25);
  background:var(--c-paper);
  color:var(--c-steel-blue);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background-color .18s ease, border-color .18s ease;
}

.modal-close:hover,
.modal-close:focus-visible{
  background:var(--c-warm-white);
  border-color:var(--c-steel-blue);
}

#modalTitle{
  font-family:var(--font-display);
  font-weight:500;
  font-size: clamp(24px, 3vw, 30px);
  color:var(--c-steel-blue);
  margin: 0 var(--sp-8) var(--sp-6) 0;
}

.modal-body section + section{
  margin-top: var(--sp-7);
}

.modal-body h3{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--c-steel-blue);
  margin:0 0 var(--sp-4) 0;
  padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--c-primary-blue);
  display:inline-block;
}

.modal-body li{
  position:relative;
  padding-left: var(--sp-5);
  font-size:14.5px;
  color:var(--c-text-gray);
  line-height:1.55;
}

.modal-body li + li{ margin-top: var(--sp-3); }

.modal-body li::before{
  content:"";
  position:absolute;
  left:2px;
  top:0.65em;
  width:5px;
  height:5px;
  border-radius:1px;
  background:var(--c-gold);
}

@media (max-width: 860px){
  .page{ min-height:auto; }
  .site-header{ padding-bottom: var(--sp-4); }
  main.hero{
    grid-template-columns:1fr;
    gap: clamp(28px, 5vh, 40px);
    padding: clamp(4px,2vh,12px) 0;
  }
  .hero-content{ max-width:none; order:1; }
  .hero-photo{ order:2; }
  .photo-frame{ min-height:0; }
  .role-eyebrow, p.profile, .cta, .more-link{ font-size: 16px; }
  body{ overflow-y:auto; }
}

@media (max-width: 520px){
  .site-footer{ flex-direction:column; align-items:flex-start; }
  .actions{ gap: var(--sp-4); }
  .footer-nav{ width:100%; justify-content:space-between; }
  .footer-divider{ display:none; }
}

@media (max-height: 720px) and (min-width: 861px){
  h1.name{ font-size: clamp(26px, 3.4vw, 36px); }
  .caption-main{ font-size: clamp(17px, 1.6vw, 21px); }
}

/* -------------------------------------------------- */
/* Bildhöhe an den verfügbaren Platz binden            */
/* -------------------------------------------------- */
/* Damit max-height:100% am Foto aufgeht, braucht die gesamte
   Flex-Kette eine definite Höhe: .page -> main.hero -> .hero-photo
   -> .photo-frame. Nur ab dem zweispaltigen Layout; darunter
   stapelt die Seite und darf normal scrollen. */
@media (min-width: 861px){
  .page{ height:100dvh; }
  .hero-photo{ min-height:0; }
}

/* -------------------------------------------------- */
/* Bildunterschrift auf Bildbreite                     */
/* -------------------------------------------------- */
/* Das Foto ist quadratisch und schrumpft mit der Fensterhoehe; der
   Kasten soll mitgehen, statt die volle Spaltenbreite zu behalten.
   Die gemessene Bildbreite liefert --bildbreite (siehe Skript in
   index.html). Ohne JavaScript bleibt der bisherige Zustand: 100%. */
@media (min-width: 861px){
  .photo-caption{
    width: var(--bildbreite, 100%);
    margin-inline: auto;
  }
}