/* =========================================================
   EHBC – style.css v2
   Basis: bestehende style.css, vollständig konsolidiert
   Ziel:
   - bestehende HTML-Klassen kompatibel halten
   - Desktop-Optik möglichst erhalten
   - Tablet und Smartphone sauber mit abdecken
   - doppelte / widersprüchliche Definitionen bereinigen
   ========================================================= */

/* =========================================================
   1) Design Tokens
   ========================================================= */
:root{
  /* Farben */
  --bgTop:#e1e3e1;
  --bgMid:#eceeed;
  --bgBot:#f4f5f4;
  --footerBg:#d7dad7;
  --headerBg:#ffffff;

  --text:#111111;
  --muted:#6b6b6b;
  --line:rgba(0,0,0,.12);
  --accent:#2b6a2e;

  /* Breiten */
  --contentMax:1100px;
  --headerMax:calc(var(--contentMax) + 100px);

  /* Globale Abstände */
  --padX:32px;
  --gap:40px;
  --sectionGap:38px;
  --sectionBorderGap:18px;

  /* Typografie */
  --fontSystem: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fontArial: Arial, Helvetica, sans-serif;
  --fontMono: "Cascadia Code","Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* Unterseiten-Abstände */
  --pageTitleTop:78px;
  --pageTitleBottom:28px;
  --pageTitleToHero:78px;
  --heroToIntro:18px;
  --introToContent:42px;

  /* Hero */
  --heroRatio:16 / 9;
  --heroFade:2.5s;
  --heroSlideDuration:3000ms;

  /* Hero-Text */
  --heroLabelFontFamily:var(--fontArial);
  --heroLabelFontSize:20px;
  --heroLabelFontWeight:700;
  --heroLabelLineHeight:1.5;
  --heroLabelLetterSpacing:.02em;
  --heroLabelColor:#ffffff;
  --heroLabelRight:20px;
  --heroLabelBottom:5%;
  --heroMediaLeft:18px;
  --heroMediaBottom:16px;
  --heroMediaBg:rgba(0,0,0,.35);
  --heroMediaPadding:6px 10px;
  --heroLabelShadow:0 1px 10px rgba(0,0,0,.45);

  /* Menü */
  --menuPanelW:240px;
  --menuPanelPadY:48px;
  --menuPanelPadX:56px;
  --menuPanelTop:18px;
  --menuPanelMinH:60vh;

  /* Footer */
  --footerPadY:4px;

  /* Index / Startseite */
  --heroMenuGap:40px;
  --heroMenuPad:0px;

  /* Logoband */
  --logoBandBg:#ffffff;
  --logoBandH:130px;
  --logoMinGap:28px;
  --logoBaseH:34px;
  --logoBandPadTop:12px;
  --logoLabelSize:12px;
  --logoLabelColor:var(--muted);
  --logoLabelLetter:.02em;
  --logoLabelH:14px;
  --logoLabelGap:8px;
  --logoBottomGap:12px;

  --logo1Scale:1.8;
  --logo2Scale:1.4;
  --logo3Scale:1;
  --logo4Scale:1;
  --logo5Scale:1.2;

  /* Büro / Personen */
  --peopleGap:26px;
  --peopleCols:2;
  --personCardBorder:rgba(0,0,0,.12);
  --personCardBg:#ffffff;
  --personPhotoSize:108px;
  --personPhotoRadius:8px;
  --personNameSize:16px;
  --personRoleSize:14px;
  --personTextSize:14px;
  --personCardPad:16px;
  --personCardGap:16px;
}

/* =========================================================
   2) Reset / Base
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }

html{
  height:100%;
  margin:0;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  background:var(--footerBg);
  color:var(--text);
  font-family:var(--fontSystem);
  overflow-x:hidden;
}

main{
  flex:1 0 auto;
  background:linear-gradient(to bottom, var(--bgTop) 0%, var(--bgMid) 55%, var(--bgBot) 100%);
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

button,
input,
textarea,
select{
  font:inherit;
}

.muted{ color:var(--muted); }

/* =========================================================
   3) Container-System
   ========================================================= */
.page-width,
.header-width{
  width:min(100%, var(--contentMax));
  margin:0 auto;
  padding-left:var(--padX);
  padding-right:var(--padX);
}

.header-width{
  width:min(100%, var(--headerMax));
}

/* =========================================================
   4) Header
   ========================================================= */
header{
  background:var(--headerBg);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.header-inner{
  padding:26px 0 18px;
}

.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.brand{
  min-width:0;
}

.brand img{
  height:78px;
  width:auto;
  display:block;
}

.brand-accent{
  color:var(--accent);
  font-weight:700;
  letter-spacing:.01em;
}

.burger{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border:none;
  background:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  margin-top:4px;
  padding:0;
}

.burger span,
.burger span::before,
.burger span::after{
  display:block;
  width:30px;
  height:3px;
  background:var(--accent);
  content:"";
  position:relative;
  border-radius:2px;
}

.burger span::before{ position:absolute; top:-10px; }
.burger span::after{ position:absolute; top:10px; }

/* =========================================================
   5) Overlay Menü
   ========================================================= */
.overlay-menu{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.overlay-menu.is-open{
  opacity:1;
  pointer-events:auto;
}

.overlay-menu .menu-panel{
  position:absolute;
  top:var(--menuPanelTop);
  right:0;
  width:min(var(--menuPanelW), 88vw);
  min-height:var(--menuPanelMinH);
  max-height:90vh;
  padding:var(--menuPanelPadY) var(--menuPanelPadX);
  background:#ffffff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:auto;
  transform:translateX(110%);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}

.overlay-menu.is-open .menu-panel{
  transform:translateX(0);
}

.overlay-menu .menu-close{
  position:absolute;
  top:18px;
  right:18px;
  width:52px;
  height:52px;
  border:none;
  background:none;
  cursor:pointer;
  font-size:34px;
  line-height:1;
  color:var(--text);
  padding:0;
}

.overlay-menu .menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.overlay-menu .menu-list a{
  position:relative;
  font-family:var(--fontArial);
  font-size:22px;
  font-weight:400;
  letter-spacing:.02em;
  padding:6px 0;
}

.overlay-menu .menu-list a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:transparent;
  transition:.15s ease;
}

.overlay-menu .menu-list a:hover::after,
.overlay-menu .menu-list a.is-active::after{
  background:var(--accent);
}

body.menu-open{ overflow:hidden; }

/* =========================================================
   6) Unterseiten: Header / Hero / Intro
   ========================================================= */
.page-hero,
.page-header{
  padding:var(--pageTitleTop) 0 var(--heroToIntro);
  margin:0 0 var(--pageTitleBottom);
}

.page-title{
  margin:0 0 12px;
  text-align:center;
  font-family:var(--fontMono);
  font-size:18px;
  letter-spacing:.08em;
  text-transform:none;
  font-weight:700;
  line-height:1.35;
}

.hero-frame{
  position:relative;
  width:100%;
  aspect-ratio:var(--heroRatio);
  overflow:hidden;
  background:transparent;
  margin-top:var(--pageTitleToHero);
}

.hero-frame .hero-slider{
  position:absolute;
  inset:0;
}

.hero-frame .hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--heroFade) ease;
}

.hero-frame .hero-slide.is-active{
  opacity:1;
  pointer-events:auto;
}

.hero-frame .hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.hero-frame .media-label{
  position:absolute;
  left:var(--heroMediaLeft);
  bottom:var(--heroMediaBottom);
  font-family:var(--heroLabelFontFamily);
  font-weight:var(--heroLabelFontWeight);
  font-size:var(--heroLabelFontSize);
  letter-spacing:var(--heroLabelLetterSpacing);
  color:var(--heroLabelColor);
  background:var(--heroMediaBg);
  padding:var(--heroMediaPadding);
}

.hero-frame .hero-labels{
  position:absolute;
  right:var(--heroLabelRight);
  bottom:var(--heroLabelBottom);
  text-align:right;
  font-family:var(--heroLabelFontFamily);
  font-weight:var(--heroLabelFontWeight);
  font-size:var(--heroLabelFontSize);
  line-height:var(--heroLabelLineHeight);
  letter-spacing:var(--heroLabelLetterSpacing);
  color:var(--heroLabelColor);
  text-shadow:var(--heroLabelShadow);
  max-width:min(70%, 520px);
}

.intro-text{
  margin:0 0 var(--introToContent);
}

.projects-intro{
  margin:0;
  font-family:var(--fontArial);
  font-weight:700;
  font-size:15px;
  line-height:1.45;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* =========================================================
   7) Unterseiten-Content
   ========================================================= */
.page-content{
  padding:0 0 34px;
}

.content-block{
  margin-top:var(--sectionGap);
}

.content-block:first-child{
  margin-top:18px;
}

.content-block + .content-block{
  padding-top:var(--sectionBorderGap);
  border-top:1px solid rgba(0,0,0,.06);
}

.section-title{
  margin:0 0 18px;
  font-family:var(--fontArial);
  font-size:18px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.3;
}

/* Grid / Cards */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--gap);
  align-items:start;
}

.card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
  min-width:0;
}

.card-media{
  position:relative;
  aspect-ratio:2 / 3;
  overflow:hidden;
  background:#111111;
}

.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-overlay-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-family:var(--fontMono);
  font-weight:700;
  font-size:16px;
  letter-spacing:.08em;
  text-align:center;
  padding:14px;
  pointer-events:none;
}

.card img{
  outline:1px solid transparent;
  outline-offset:5px;
  transition:outline-color .15s ease;
}

.card:hover img{
  outline-color:var(--accent);
}

.card-meta{
  flex:0 0 88px;
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.card-title,
.card-sub,
.card-role,
.card-text{
  overflow-wrap:anywhere;
}

.card-title{
  font-family:var(--fontArial);
  font-weight:700;
  margin:0 0 6px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card-sub{
  font-family:var(--fontArial);
  color:#4d4d4d;
  margin:0;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.people-grid{
  /* semantischer Marker, gleiches Grid-System */
}

.card.card--person .card-media{
  aspect-ratio:1 / 1;
}

.card.card--person .card-meta{
  flex:0 0 auto;
  min-height:140px;
}

.card-role{
  font-family:var(--fontArial);
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  color:var(--muted);
  margin:0 0 8px;
}

.card-text{
  font-family:var(--fontArial);
  font-weight:400;
  font-size:14px;
  line-height:1.45;
  color:#222222;
  margin:0;
}

/* Profil */
.profile-row{
  display:flex;
  align-items:stretch;
  gap:32px;
  margin:20px 0;
}

.profile-photo,
.profile-text{
  flex:0 0 calc(50% - 16px);
  min-width:0;
}

.profile-photo{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
}

.profile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:1 / 1;
}

.profile-text{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
  display:flex;
}

.profile-text-inner{
  width:100%;
  padding:28px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-family:var(--fontArial);
  color:#222222;
}

.profile-name{
  font-size:30px;
  line-height:1.2;
  font-weight:700;
  margin:0 0 16px;
}

.profile-text-inner p{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.4;
}

.profile-text-inner p:last-child{
  margin-bottom:0;
}

/* Fließtext */
.prosa{
  font-family:var(--fontArial);
  font-size:17px;
  line-height:1.65;
  color:#222222;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

.prosa > :first-child{ margin-top:0; }
.prosa p{ margin:0 0 1.1em; }

/* =========================================================
   8) Index / Startseite
   ========================================================= */
.hero-menu-grid{
  height:100%;
  display:flex;
  gap:var(--heroMenuGap);
  padding:var(--heroMenuPad);
  align-items:stretch;
}

.hero-tile{
  position:relative;
  flex:1 1 0;
  height:100%;
  display:block;
  overflow:hidden;
  background:transparent;
  min-width:0;
}

.hero-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  outline:1px solid transparent;
  outline-offset:5px;
  transition:outline-color .15s ease;
}

.hero-tile:hover img{
  outline-color:var(--accent);
}

.hero-tile-label{
  position:absolute;
  right:18px;
  bottom:7%;
  text-align:right;
  pointer-events:none;
  max-width:75%;
  z-index:2;
}

.hero-tile-title{
  font-family:var(--fontArial);
  font-weight:700;
  font-size:18px;
  letter-spacing:.06em;
  color:#ffffff;
  text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

.hero-tile-sub{
  margin-top:4px;
  font-family:var(--fontArial);
  font-size:13px;
  color:rgba(255,255,255,.85);
  letter-spacing:.04em;
}


/* =========================================================
   INDEX HERO – Mobile: 1 Spalte, 3 Zeilen
   ========================================================= */

@media (max-width:1000px){

  /* Frame darf wachsen */
  .hero-frame{
    aspect-ratio:auto;
    height:auto;
    overflow:visible;
  }

  /* Grid wird vertikal */
  .hero-menu-grid{
    display:flex;
    flex-direction:column;
    height:auto;
    gap:22px;
    padding:0;
  }

  /* Jede Kachel eine eigene Zeile */
  .hero-tile{
    flex:none;
    width:100%;
    aspect-ratio:16 / 9;
    height:auto;
  }

}
/* =========================================================
   9) Logo-Band
   ========================================================= */
.logo-band{
  width:100%;
  background:var(--logoBandBg);
  min-height:var(--logoBandH);
  display:block;
  overflow:hidden;
}

.logo-band .page-width{
  min-height:var(--logoBandH);
  display:flex;
  align-items:flex-start;
  padding-top:var(--logoBandPadTop);
}

.logo-row{
  width:100%;
  min-height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--logoMinGap);
  position:relative;
}

.logo-row img{
  height:var(--logoBaseH);
  width:auto;
  object-fit:contain;
  opacity:.95;
}

.logo-item{
  height:100%;
  display:grid;
  grid-template-rows:var(--logoLabelH) auto;
  row-gap:var(--logoLabelGap);
  justify-items:start;
}

.logo-item img{
  align-self:end;
  margin-bottom:var(--logoBottomGap);
}

.logo-item:nth-child(1) img{ height:calc(var(--logoBaseH) * var(--logo1Scale)); }
.logo-item:nth-child(2) img{ height:calc(var(--logoBaseH) * var(--logo2Scale)); }
.logo-item:nth-child(3) img{ height:calc(var(--logoBaseH) * var(--logo3Scale)); }
.logo-item:nth-child(4) img{ height:calc(var(--logoBaseH) * var(--logo4Scale)); }
.logo-item:nth-child(5) img{ height:calc(var(--logoBaseH) * var(--logo5Scale)); }

.logo-label{
  font-family:var(--fontArial);
  font-size:var(--logoLabelSize);
  color:var(--logoLabelColor);
  line-height:var(--logoLabelH);
  letter-spacing:var(--logoLabelLetter);
  white-space:nowrap;
}

.logo-label.is-empty{
  visibility:hidden;
}

/* =========================================================
   10) Footer
   ========================================================= */
footer{
  flex:0 0 auto;
  background:var(--footerBg);
  padding:var(--footerPadY) 0;
  margin:0;
}

footer *{ margin:0; }

footer,
footer a,
footer nav{
  font-family:var(--fontArial);
}

footer nav{
  display:flex;
  justify-content:center;
  gap:28px;
  padding:0;
  flex-wrap:wrap;
}

footer a{
  position:relative;
  padding:2px 0;
  line-height:1.2;
  color:var(--muted);
}

footer a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:transparent;
  transition:.15s ease;
}

footer a:hover::after{
  background:var(--accent);
}

/* =========================================================
   11) Kontakt
   ========================================================= */
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr);
  gap:40px;
  align-items:start;
}

.contact-info,
.contact-form-wrap{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
  padding:28px 30px;
  min-width:0;
}

.contact-info h2{
  margin:0 0 18px;
  font-family:var(--fontArial);
  font-size:18px;
  font-weight:700;
  letter-spacing:.02em;
}

.contact-form{
  font-family:var(--fontArial);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px 22px;
}

.form-field{
  margin:0 0 20px;
  min-width:0;
}

.form-field--full{
  grid-column:1 / -1;
}

.form-field label,
.form-fieldset legend{
  display:block;
  margin:0 0 8px;
  font-family:var(--fontArial);
  font-size:15px;
  font-weight:700;
  color:#222222;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.18);
  background:#ffffff;
  padding:12px 14px;
  color:#111111;
  outline:none;
  border-radius:0;
}

.form-field textarea{
  resize:vertical;
  min-height:180px;
  line-height:1.5;
}

.form-field input:focus,
.form-field textarea:focus{
  border-color:var(--accent);
}

.form-fieldset{
  margin:0 0 22px;
  padding:0;
  border:none;
  min-width:0;
}

.form-fieldset--inline{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.check-row--inline{
  margin:0;
}

.check-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 10px;
  font-family:var(--fontArial);
  font-size:15px;
  line-height:1.45;
  color:#222222;
}

.check-row input{
  margin-top:3px;
  flex:0 0 auto;
}

.check-row--legal a{
  text-decoration:underline;
  text-underline-offset:2px;
}

.form-hint{
  margin:0 0 10px;
  font-family:var(--fontArial);
  font-size:14px;
  line-height:1.45;
  color:var(--muted);
}

.form-actions{
  margin-top:10px;
}

.form-button{
  border:1px solid var(--accent);
  background:#ffffff;
  color:#111111;
  padding:12px 22px;
  font-family:var(--fontArial);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}

.form-button:hover{
  background:var(--accent);
  color:#ffffff;
}

.form-message{
  margin:0 0 22px;
  padding:14px 16px;
  font-family:var(--fontArial);
  font-size:15px;
  line-height:1.5;
  border:1px solid rgba(0,0,0,.12);
}

.form-message--success{
  background:#f3f8f3;
  border-color:rgba(43,106,46,.28);
}

.form-message--error{
  background:#faf3f3;
  border-color:rgba(140,40,40,.22);
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* =========================================================
   12) Tablet / mittlere Breiten
   ========================================================= */
@media (max-width:1100px){
  :root{
    --padX:28px;
    --gap:22px;
    --pageTitleTop:64px;
    --pageTitleBottom:24px;
    --pageTitleToHero:48px;
    --heroToIntro:16px;
    --introToContent:34px;
    --heroLabelFontSize:18px;
  }

  .card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .hero-menu-grid{
    gap:22px;
  }
}

@media (max-width:1000px){
  .hero-menu-grid{
    flex-direction:column;
    height:auto;
    gap:22px;
    padding:0;
  }

  .hero-tile{
    min-height:0;
    aspect-ratio:16 / 9;
  }
}

@media (max-width:900px){
  :root{
    --padX:24px;
    --pageTitleTop:56px;
    --pageTitleBottom:20px;
    --pageTitleToHero:34px;
    --heroLabelFontSize:16px;
    --menuPanelW:320px;
    --menuPanelPadY:40px;
    --menuPanelPadX:34px;
    --logoBandH:unset;
  }

  .overlay-menu .menu-list a{
    font-size:20px;
  }

  .profile-row{
    flex-direction:column;
  }

  .profile-photo,
  .profile-text{
    flex:0 0 auto;
    width:100%;
  }

  .profile-name{
    font-size:24px;
  }

  .profile-text-inner p{
    font-size:17px;
  }

  .logo-band{
    min-height:0;
    padding:18px 0;
    overflow:visible;
  }

  .logo-band .page-width{
    min-height:0;
    padding-top:0;
  }

  .logo-row{
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:22px 28px;
  }

  .contact-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .form-grid{
    grid-template-columns:1fr;
    gap:0;
  }
}

/* =========================================================
   13) Smartphone
   ========================================================= */
@media (max-width:680px){
  :root{
    --padX:18px;
    --gap:18px;
    --sectionGap:30px;
    --sectionBorderGap:14px;
    --pageTitleTop:40px;
    --pageTitleBottom:16px;
    --pageTitleToHero:24px;
    --heroToIntro:14px;
    --introToContent:26px;
    --heroLabelFontSize:14px;
    --heroMediaLeft:12px;
    --heroMediaBottom:12px;
    --heroLabelRight:12px;
    --heroMenuGap:18px;
    --menuPanelPadY:34px;
    --menuPanelPadX:24px;
    --menuPanelTop:0px;
  }

  .header-inner{
    padding:18px 0 14px;
  }

  .top{
    align-items:center;
    gap:16px;
  }

  .brand img{
    height:58px;
    max-width:100%;
  }

  .burger{
    width:46px;
    height:46px;
    flex-basis:46px;
    margin-top:0;
  }

  .burger span,
  .burger span::before,
  .burger span::after{
    width:26px;
  }

  .burger span::before{ top:-8px; }
  .burger span::after{ top:8px; }

  .overlay-menu .menu-panel{
    width:100%;
    max-width:100%;
    min-height:100dvh;
    max-height:100dvh;
    top:0;
    padding-top:72px;
    padding-bottom:28px;
  }

  .overlay-menu .menu-close{
    top:10px;
    right:10px;
    width:46px;
    height:46px;
  }

  .overlay-menu .menu-list{
    gap:20px;
  }

  .overlay-menu .menu-list a{
    font-size:18px;
  }

  .page-title{
    font-size:16px;
    letter-spacing:.06em;
  }

  .hero-frame{
    aspect-ratio:var(--heroRatio);
  }

  .hero-frame .hero-labels{
    max-width:82%;
    line-height:1.35;
  }

  .hero-frame .media-label{
    max-width:78%;
    line-height:1.3;
    padding:5px 8px;
  }

  .projects-intro,
  .section-title,
  .contact-info h2{
    font-size:16px;
  }

  .card-grid{
    grid-template-columns:1fr;
  }

  .card-meta{
    flex-basis:auto;
    min-height:0;
  }

  .media-overlay-text{
    font-size:14px;
    letter-spacing:.06em;
  }

  .profile-row{
    gap:18px;
  }

  .profile-text-inner{
    padding:20px 20px 22px;
  }

  .profile-name{
    font-size:22px;
    margin-bottom:12px;
  }

  .profile-text-inner p,
  .prosa{
    font-size:16px;
    line-height:1.55;
  }

  .hero-menu-grid{
    padding:0;
  }

  .hero-tile{
    min-height:0;
    aspect-ratio:var(--heroRatio);
  }

  .hero-tile-label{
    right:12px;
    bottom:7%;
    max-width:82%;
  }

  .hero-tile-title{
    font-size:15px;
  }

  .hero-tile-sub{
    font-size:12px;
  }

  .logo-row{
    gap:18px 20px;
  }

  .logo-item{
    justify-items:center;
  }

  .logo-label{
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }

  footer nav{
    gap:16px 20px;
  }

  .contact-info,
  .contact-form-wrap{
    padding:20px 18px;
  }

  .form-field,
  .form-fieldset{
    margin-bottom:16px;
  }

  .form-field textarea{
    min-height:150px;
  }

  .form-button{
    width:100%;
  }
}

/* =========================================================
   14) Sehr kleine Smartphones
   ========================================================= */
@media (max-width:420px){
  :root{
    --padX:14px;
    --heroLabelFontSize:13px;
    --pageTitleTop:30px;
    --pageTitleToHero:18px;
    --introToContent:22px;
  }

  .brand img{
    height:50px;
  }

  .page-title{
    font-size:15px;
    letter-spacing:.05em;
  }

  .hero-frame{
    aspect-ratio:var(--heroRatio);
  }

  .hero-tile{
    min-height:0;
    aspect-ratio:var(--heroRatio);
  }

  .profile-text-inner,
  .contact-info,
  .contact-form-wrap{
    padding-left:16px;
    padding-right:16px;
  }

  .overlay-menu .menu-list a{
    font-size:17px;
  }
}


/* =========================================================
   14) Index-Mobile-Fix
   - Auf der Startseite liegt .hero-menu-grid direkt in .hero-frame
   - Bei Mobile wurde .hero-menu-grid vertikal, aber .hero-frame blieb 16:9 hoch
   - Dadurch wurden die Kacheln abgeschnitten bzw. die Menüpunkte verschwanden
   ========================================================= */
.hero-frame > .hero-menu-grid{
  width:100%;
}

@media (max-width:1000px){
  .hero-frame:has(> .hero-menu-grid){
    aspect-ratio:auto;
    overflow:visible;
    background:transparent;
  }

  .hero-frame:has(> .hero-menu-grid) > .hero-menu-grid{
    position:relative;
    inset:auto;
    height:auto;
  }
}

@media (max-width:680px){
  .hero-frame:has(> .hero-menu-grid) > .hero-menu-grid{
    gap:18px;
  }
}