:root{
  --bg: #0b0b0c;
  --fg: #f2f2f2;
  --muted: rgba(242,242,242,.72);
  --line: rgba(242,242,242,.12);
  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --max: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height: 1.45;
}
a{ color: var(--fg); text-decoration: none; }
a:hover{ opacity:.88; }
img{ max-width:100%; display:block; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:#fff; color:#000; padding:10px 12px; border-radius:12px;
}
.skip-link:focus{ left:14px; top:14px; z-index: 9999; }

.container{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

.site-header{
  position: sticky;
  top:0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(11,11,12,.65);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  height: 78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.brand{ display:flex; align-items:center; gap: 12px; }
.logo-placeholder{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  letter-spacing: .4px;
  font-size: 14px;
}

.nav-toggle{
  display:none;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
}
.nav-list{
  list-style:none;
  display:flex;
  gap: 16px;
  margin:0; padding:0;
}
.nav-link{
  font-size: 14px;
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.nav-link:hover{
  color: var(--fg);
  background: rgba(255,255,255,.06);
}
.nav-link.is-active{
  color: var(--fg);
  background: rgba(255,255,255,.08);
}

/* Sections */
.section{
  padding: 92px 0;
  border-bottom: 1px solid var(--line);
}
.section-head{
  margin-bottom: 26px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.section-title{
  font-size: 28px;
  letter-spacing: .2px;
  margin:0;
}
.section-subtitle{
  margin:0;
  color: var(--muted);
  max-width: 56ch;
}

/* --- HERO with local video --- */
.section-hero{
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  /* Cinemascope ratio to match 1920x804 (≈2.39:1) */
  aspect-ratio: 1920 / 804;
  max-height: 80vh; /* prevents overly tall hero on very large screens */
  display: grid;
  align-items: center;
}
.hero-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills the cinemascope box */
  object-position: 50% 50%;
  transform: none;        /* remove scaling that caused perceived crop */
}
.hero-bg-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 25% 30%, rgba(0,0,0,.25), rgba(0,0,0,.14) 45%, rgba(0,0,0,.06) 70%),
    linear-gradient(to bottom, rgba(8,10,12,.40), rgba(8,10,12,.18) 45%, rgba(8,10,12,.08));
  z-index: 1;
}
.hero-text-scrim{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* leicht mehr Abdunklung in der Textzone (rechts), damit Schrift besser lesbar ist */
  background:
    radial-gradient(900px 620px at 78% 40%, rgba(0,0,0,.30), rgba(0,0,0,0) 68%),
    linear-gradient(to left, rgba(0,0,0,.18), rgba(0,0,0,0) 58%);
}
.hero-overlay{
  position: relative;
  z-index: 3;
  padding: 96px 0;
  display:flex;
  justify-content:flex-end; /* Textblock rechts, damit er die Kirche nicht verdeckt */
}
.hero-copy--overlay{
  max-width: 560px;
  text-align: left;
}

.hero-logo-text{
  font-weight: 700;
  letter-spacing: .10em;
  margin: 0 0 4px;
  opacity: .92;
}
.hero-tagline{
  font-size: 14px;
  letter-spacing: .24em;
  
  opacity: .72;
  margin-left: 6px;     /* "edel" versetzt */
  margin-bottom: 18px;  /* kleiner Abstand */
}

.lead{
  margin: 0 0 18px;
  color: rgba(242,242,242,.82);
  font-size: 16px;
  max-width: 60ch;
}

.cta-row{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.08);
  transition: transform .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }
.btn-ghost{ background: transparent; }

/* Filme */
.film-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.film-card{
  position: relative;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  min-height: 220px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.film-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(242,242,242,.22), 0 10px 40px rgba(0,0,0,.25);
}
.film-thumb{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: grayscale(1) saturate(.65) contrast(1.02) brightness(0.5);
  transition: transform .45s ease, filter .45s ease;
}
.film-overlay{
  z-index: 3;
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 60%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.film-title{
  margin:0 0 6px;
  font-size: 16px;
  letter-spacing: .2px;
}
.film-desc{
  margin:0;
  color: rgba(242,242,242,.78);
  font-size: 13px;
  max-width: 46ch;
}
.film-card:hover .film-overlay,
.film-card:focus-visible .film-overlay{
  opacity: 1;
  transform: translateY(0);
}
.film-card:hover .film-thumb,
.film-card:focus-visible .film-thumb{
  transform: scale(1.06);
  filter: grayscale(0) saturate(1) contrast(1.05) brightness(1);
}

/* Platzhalter */
.placeholder-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.placeholder-card{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 16px;
}
.ph-image{
  height: 160px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid rgba(242,242,242,.12);
  background-color: rgba(255,255,255,.02);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 12px;
}
*/
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
  align-items:start;
}
.about-portrait-wrap{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
}
.about-portrait{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: contrast(1.02) saturate(.95);
  display: block;
}
.about-copy p{ color: var(--muted); max-width: 70ch; margin-top: 0; }
.tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding:0;
  margin: 16px 0 0;
}
.tags li{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 13px;
  color: rgba(242,242,242,.8);
}

/* Kontakt */
.section-contact{ border-bottom: none; }
.contact-card{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 18px;
}
.contact-line{ margin: 0 0 10px; color: var(--muted); }
.contact-links{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: 10px; }
.contact-links a{
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
  color: var(--fg);
  font-size: 13px;
}
.footer{ margin-top: 26px; color: rgba(242,242,242,.55); }

/* Modal */
.modal{
  position: fixed;
  inset:0;
  display:none;
  z-index: 60;
}
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
}
.modal-panel{
  position: relative;
  width: min(980px, calc(100% - 34px));
  margin: 90px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(14,14,15,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-video{
  aspect-ratio: 16 / 9;
  background: #000;
}
.modal-video iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Scroll-reveal */
.reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .film-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .placeholder-grid{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .hero-overlay{ justify-content:flex-start; }
  .hero-copy--overlay{ max-width: 92%; }
  .modal-panel{ margin-top: 78px; }
}
@media (max-width: 640px){
  .header-inner{ height: 64px; }
  .nav-toggle{ display:inline-flex; }
  .nav-list{
    position:absolute;
    right: 20px;
    top: 64px;
    flex-direction:column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(11,11,12,.92);
    display:none;
  }
  .nav-list.is-open{ display:flex; }
  .film-grid{ grid-template-columns: 1fr; }
  .section{ padding: 76px 0; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ transition: none; transform: none; opacity: 1; }
  .film-thumb, .film-overlay, .btn{ transition: none; }
}


/* --- Hero: Text links (Logo-Position) --- */
.hero-overlay--left{
  justify-content: flex-start;
}

.hero-copy--left{
  max-width: 560px;
}

/* Größere, näher gesetzte Unterzeile */
.hero-tagline--big{
  font-size: 16px;           /* größer */
  letter-spacing: .22em;
  margin-left: 0;
  margin-top: -2px;          /* näher an SEEGEWERK */
  margin-bottom: 14px;
  opacity: .8;
}

/* Filme: Meta-Zeile */
.film-meta{
  margin: 10px 0 0;
  color: rgba(242,242,242,.68);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* Hero: Block-Typo */
.hero-logo-text{
  line-height: .92;
}
.hero-tagline--big{
  font-weight: 600;
  letter-spacing: .18em;
  margin-top: -6px;
}


}


/* Hero: single-line logo, narrower & higher placement */
.hero-logo-text--single{
  letter-spacing: .06em; /* schmaler */
}

/* Use a taller, condensed-friendly stack (no external fonts required) */
.hero-logo-text{
  font-family: "Inter Tight", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  margin-top: -28px; /* nach oben schieben, Startpunkt wie vorher SEEGE */
}


/* Hero: extra narrow wordmark */
.hero-logo-text--single{
  letter-spacing: .02em; /* noch schmaler */
}


/* Aktuelles */
.news-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.news-card{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding: 16px;
}
.news-date{
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 12px;
  color: rgba(242,242,242,.7);
  margin-bottom: 8px;
}
.news-text{
  margin:0;
  color: var(--muted);
  font-size: 14px;
}

/* Divider between Filme and Über mich */
.section-divider{
  height: 1px;
  background: linear-gradient(to right, rgba(242,242,242,0), rgba(242,242,242,.18), rgba(242,242,242,0));
}

/* Responsive */
@media (max-width: 980px){
  .news-grid{ grid-template-columns: 1fr; }
}


/* Technik > Postproduktion: Bild entsättigt, bei Hover farbig */
.postproduktion-media{
  height: 160px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid rgba(242,242,242,.2);
  background: rgba(255,255,255,.02);
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
}
.postproduktion-preview{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .4s ease, transform .4s ease;
}
.postproduktion-media:hover .postproduktion-preview{
  transform: scale(1.02);
}

/* Modal: Bild-Voransicht im gleichen Overlay wie Videos */
.modal-video.is-image{
  aspect-ratio: auto;
  background: transparent;
}
.modal-video.is-image img{
  width: 100%;
  height: auto;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  display:block;
}

/* Vimeo Hover-Preview innerhalb der Film-Kachel */
.film-hover-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  pointer-events:none; /* Klick bleibt auf der Kachel */
}

/* Filme: Platzhalter-Kachel */
.film-card--placeholder .film-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(255,255,255,.25);
}
.film-card--placeholder .film-placeholder-inner{
  text-align:center;
  padding:18px;
  opacity:.9;
}
.film-card--placeholder .film-placeholder-title{
  font-weight:600;
  letter-spacing:.02em;
}
.film-card--placeholder .film-placeholder-sub{
  font-size:.9em;
  opacity:.75;
  margin-top:6px;
}

/* Portrait Lightbox */






.portrait-wrapper:hover 

.portrait-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}



.portrait-wrapper:hover 

 – Abstand Text näher ans Bild */
#ueber-mich .about-grid,
#ueber-mich .ueber-mich-grid,
#ueber-mich .about-layout,
#ueber-mich .content-grid{
  gap: 18px;
}

#ueber-mich .about-text,
#ueber-mich .ueber-mich-text{
  margin-top: 0;
}

/* sorgt dafür, dass Wrapper exakt Bildgröße hat */
}



.portrait-wrapper:hover 

/* Rahmen exakt am Bild */
.portrait-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none;
}

/* Unterzeile */


.portrait-wrapper:hover 

 – Text näher ans Bild */
#ueber-mich .about-grid,
#ueber-mich .ueber-mich-grid,


/* ================================
   Über mich – Portrait (exakt Filmkachelbreite)
   ================================ */

/* Eine einzige Quelle für die Breite */
:root{
  --film-card-width: 360px;
}

.film-card{
  max-width: var(--film-card-width);
}

/* Portrait übernimmt exakt dieselbe Breite */




.portrait-wrapper:hover 

/* Rahmen exakt am Bild */
.portrait-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
}

/* Unterzeile wie Filmkacheln */


.portrait-wrapper:hover 

/* Text näher ans Bild */


/* ================================
   Über mich – Portrait (Rahmen = Bild, kein Leerraum)
   ================================ */

/* Portrait darf NICHT die Spalte aufblasen */




.portrait-wrapper:hover 

/* Rahmen exakt am Bild */
.portrait-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
}

/* Unterzeile */


.portrait-wrapper:hover 

 – Layout: Text rückt an Bild */


 – Buttons */

.portrait-wrapper{
  position: relative;
  display: inline-block; /* sorgt dafür, dass Wrapper exakt Bildgröße hat */
}

.portrait-image{
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

.portrait-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  color:#fff;
  padding:12px 14px;
  font-size:0.95rem;
  opacity:0;
  transition: opacity .3s ease;
  pointer-events:none;
}

.portrait-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
}

.portrait-lightbox-inner img{
  max-width:90vw;
  max-height:90vh;
}

.about-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Über mich – Fix: 2 Spalten (Foto links, Text rechts) */
:root{ --film-card-width: 360px; }

#ueber-mich .ueber-mich-grid{
  display:grid;
  grid-template-columns: var(--film-card-width) 1fr;
  column-gap: 18px;
  align-items:start;
}

#ueber-mich .portrait-wrapper{
  position:relative;
  width: var(--film-card-width);
  display:block;
}

#ueber-mich .portrait-image{
  width:100%;
  max-width:none;
  display:block;
}

#ueber-mich .about-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Mobile: untereinander */
@media (max-width: 820px){
  #ueber-mich .ueber-mich-grid{
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  #ueber-mich .portrait-wrapper{
    width: min(100%, var(--film-card-width));
  }
}

/* Über mich – gleiche maximale Breite wie restliche Seite */
#ueber-mich{
  width: 100%;
}

#ueber-mich > .ueber-mich-grid{
  max-width: var(--content-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
}


/* Portrait – Styling wie Kacheln (abgerundete Ecken + dünner Rahmen) */
#ueber-mich .portrait-wrapper{
  position: relative;
  border-radius: 14px;
  overflow: hidden; /* sorgt dafür, dass Overlay & Bild die Rundung respektieren */
  border: 1px solid rgba(255,255,255,.14);
}

#ueber-mich .portrait-image{
  display:block;
  width:100%;
  height:auto;
}

/* Name beim Hover (wie bei den Filmkacheln) */
#ueber-mich .portrait-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:12px 14px;
  font-size:0.95rem;
  color:#fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  opacity:0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}

#ueber-mich .portrait-wrapper:hover .portrait-overlay{
  opacity:1;
  transform: translateY(0);
}

/* Über mich – Kurzvita wie Filme-Hinweis, rechtsbündig */
#ueber-mich .ueber-mich-kurzvita{
  text-align: right;
  margin-top: 0;
}


/* Über mich – Kurzvita auf Höhe der Überschrift, rechtsbündig */
#ueber-mich .section-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; /* Unterkante Schrift bündig */
}

#ueber-mich .ueber-mich-kurzvita{
  justify-self: end;
  text-align: right;
}


/* Technik – Untertitel auf Höhe der Überschrift, wie Kurzvita */
#technik .section-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

#technik .technik-equipment{
  justify-self: end;
  text-align: right;
}


/* Über mich – Buttons mittig unter dem Fließtext */
#ueber-mich .about-buttons{
  justify-content: center;
  text-align: center;
}


/* Technik – Header-Grid darf Module nicht beeinflussen */
#technik .section-head{
  grid-template-columns: 1fr auto;
}

/* Technik – Module wieder volle Breite wie zuvor */
#technik .technik-grid,
#technik .technik-cards,
#technik .cards,
#technik .module-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}


/* Kurzvita & Mein Equipment – gleiche Farbe wie Filme-Hinweis */
#ueber-mich .ueber-mich-kurzvita,
#technik .technik-equipment{
  color: var(--text-muted, rgba(255,255,255,0.65));
}


/* Über mich – einzelne Buttons mittig unter jeweiligen Absätzen */
#ueber-mich .about-button-row{
  display:flex;
  justify-content:center;
  margin: 14px 0 18px;
}


/* === TECHNIK – MODULE AUF URSPRÜNGLICHE BREITE ZURÜCKSETZEN === */
/* Header-Grid darf NICHT auf Content wirken */
#technik .section-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

/* Expliziter Content-Wrapper */
#technik .section-content{
  width: 100%;
}

/* Ursprüngliches Modul-Grid (breit, wie ältere Entwürfe) */
#technik .technik-grid,
#technik .technik-cards,
#technik .module-grid,
#technik .cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Responsive: ab Tablet */
@media (max-width: 1024px){
  #technik .technik-grid,
  #technik .technik-cards,
  #technik .module-grid,
  #technik .cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px){
  #technik .technik-grid,
  #technik .technik-cards,
  #technik .module-grid,
  #technik .cards{
    grid-template-columns: 1fr;
  }
}


/* Technik – Platzhalter-Module wieder breit (3 Spalten) */
#technik .placeholder-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px){
  #technik .placeholder-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #technik .placeholder-grid{ grid-template-columns: 1fr; }
}


/* Über mich – Fließtext als zwei Kacheln wie Technik-Module */
#ueber-mich .ueber-mich-grid{
  align-items: stretch; /* damit rechte Spalte auf Höhe des Fotos strecken kann */
}

#ueber-mich .ueber-mich-right{
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}

#ueber-mich .about-card{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  padding: 18px 18px;
  background: rgba(255,255,255,.04);
}

/* Untere Kachel füllt Resthöhe, damit sie unten bündig mit dem Foto abschließt */
#ueber-mich .about-card--bottom{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Buttons innerhalb der Kacheln mittig */
#ueber-mich .about-card .about-button-row{
  display: flex;
  justify-content: center;
  margin: 14px 0 0;
}

#ueber-mich .about-card{ background: rgba(255,255,255,.03); }



.film-card::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.0) 100%
  );
}

/* Text immer über dem Verlauf */
.film-card .film-info,
.film-card .film-meta{
  position: relative;
  z-index: 2;
}




/* Videokacheln – Verlauf unter dem Text, Text bleibt unverändert weiß */
.film-card{
  position: relative;
  overflow: hidden;
}

/* Text explizit über dem Verlauf */
.film-card .film-info,
.film-card .film-meta{
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.film-card .film-info *,
.film-card .film-meta *{
  color: #ffffff;
}


/* Videokacheln – Fix: Verlauf darf Text nicht abdunkeln (korrektes Layering) */
.film-thumb{ z-index: 0; }
.film-overlay{
  z-index: 2;
  color: #fff;
}
.film-overlay *{
  color: #fff;
}


/* Videokacheln – dezente Entsättigung + Abdunklung im Ruhezustand */
.film-thumb{
  filter: saturate(0.65) brightness(0.8);
  transition: filter .25s ease;
}

.film-card:hover .film-thumb,
.film-card:focus-visible .film-thumb{
  filter: saturate(1) brightness(1);
}


/* Videokacheln – Verlauf & Text erst beim Hover einblenden */
.film-card{
  position: relative;
  overflow: hidden;
}

.film-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:45%;
  pointer-events:none;
  z-index:1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.0) 100%
  );
  opacity: 0;
  transition: opacity .25s ease;
}

.film-card:hover::before{
  opacity: 1;
}

/* Text-Overlay ebenfalls erst beim Hover */
.film-overlay{
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
  color: #fff;
}

.film-card:hover .film-overlay{
  opacity: 1;
}


/* Fix: Film-Overlay & Verlauf müssen an der unteren Kante sitzen */
.film-card{
  position: relative;
  overflow: hidden;
}

.film-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

/* sicherstellen, dass der Text nicht "hochgezogen" wird */
.film-overlay{
  transform: none;
}


/* Portrait – sanfter Zoom beim Hover wie Filmkacheln */
#ueber-mich .portrait-image{
  transition: transform .35s ease;
}

#ueber-mich .portrait-wrapper:hover .portrait-image{
  transform: scale(1.04);
}


/* --- Tile darkening default state --- */
.tile video,
.tile img {
    filter: brightness(0.9);
    transition: filter 0.4s ease;
}

.tile:hover video,
.tile:hover img {
    filter: brightness(1);
}




.film-card:hover




.film-card:hover /* Local preview assets */
.film-thumb{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.film-thumb video.local-preview-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition: opacity .2s ease;
}

.film-card.is-hovering .film-thumb video.local-preview-video{
  opacity:1;
}


/* Über mich – Buttons rechts ausrichten */
#about .actions,
#about .button-row,
#about .cta-row{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}


/* Hero logo text font: Khand Regular */
@font-face {
  font-family: "KhandHero";
  src: url("assets/fonts/Khand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

#start .hero-logo-text{
  font-family: "KhandHero", sans-serif;
  letter-spacing: 0.04em;
}

#start .hero-logo-text .initial{
  font-size: 1.15em;
  display: inline-block;
  transform: translateY(-0.02em);
}


/* Über mich – CV & YouTube rechtsbündig */
#about .actions,
#about .about-actions,
#about .button-row,
#about .cta-row{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}


/* Technik placeholder images */
.ph-image{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Technik hover overlay */
#technik .ph-image{
  position: relative;
  overflow: hidden;
  transform: scale(1);
  transition: transform 260ms ease;
}

#technik .tech-card:hover .ph-image,
#technik .tech-card:focus-visible .ph-image{
  transform: scale(1.05);
}

#technik .tech-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
}

#technik .tech-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
}

#technik .tech-title{
  position: relative;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 16px;
}

#technik .tech-card:hover .tech-overlay,
#technik .tech-card:focus-visible .tech-overlay{
  opacity: 1;
  transform: translateY(0);
}

#technik .tech-card{
  cursor: pointer;
}

#technik .tech-card:focus-visible{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 4px;
}


/* Technik idle dim */
#technik .ph-image{
  filter: brightness(0.9);
  transition: filter 260ms ease, transform 260ms ease;
}

#technik .tech-card:hover .ph-image,
#technik .tech-card:focus-visible .ph-image{
  filter: brightness(1);
}


/* About buttons right aligned */
#about .actions,
#about .about-actions,
#about .button-row,
#about .cta-row{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Über mich – Buttons (CV / YouTube) rechtsbündig erzwingen */
#ueber-mich .about-button-row{
  justify-content: flex-end !important;
}


/* Über mich – Buttons (CV / YouTube) wirklich rechtsbündig (Row auf volle Breite) */
#ueber-mich .about-button-row{
  width: 100%;
  justify-content: flex-end !important;
}

#ueber-mich .about-button-row .btn{
  margin-left: auto; /* falls die Row sonst "shrink" ist */
}


/* Fix Technik overlay gradient gap at bottom */
#technik .ph-image{
  overflow: hidden;
}

#technik .tech-overlay{
  bottom: 0;
}

#technik .tech-overlay::before{
  inset: 0;
  bottom: -1px; /* force gradient to extend fully */
}




/* If buttons use specific padding variables or classes, enforce a small reduction */
.btn-primary,
.btn-secondary,
.nav-cta,
.hero-actions .btn{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Fallback for buttons defined with padding shorthand */
.btn{
  padding: 10px 18px !important;
}


/* Buttons flatter – final (8px) */
.btn,
a.btn,
button.btn,
.btn-primary,
.btn-secondary,
.nav-cta,
.hero-actions .btn{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}



/* Coaching split boxes */
.coaching-split{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 900px){
  .coaching-split{
    grid-template-columns: 1fr;
  }
}

.coaching-book{
  display: block;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

.coaching-book-image{
  width: 100%;
  aspect-ratio: 4 / 5; /* book-ish */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 260ms ease;
  position: relative;
  /* Warm wood tone alignment hint (adjustable) */
  filter: saturate(1.05) contrast(1.02) brightness(1.02);
}

/* Vignette overlay */
.coaching-book-image::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
  pointer-events:none;
}

.coaching-book:hover .coaching-book-image{
  transform: scale(1.03);
}

.coaching-textbox{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 18px 18px 16px;
}

.coaching-textbox p{
  margin: 0 0 14px 0;
}


/* Coaching book fine tuning */
.coaching-book-image{
  filter: saturate(1.08) contrast(1.05) brightness(1.03);
}

.coaching-textbox{
  display: flex;
  flex-direction: column;
}

.coaching-textbox .btn{
  align-self: flex-end;
}


/* Coaching book – reduce saturation and match profile image width */
.coaching-left{
  max-width: var(--about-image-width, 420px);
}

.coaching-book-image{
  filter: saturate(0.92) contrast(1.05) brightness(1.03);
}


/* Coaching book – match profile image exactly and avoid cropping */
.coaching-left{
  max-width: 360px; /* matches about/profile image container */
  width: 100%;
}

.coaching-book{
  width: 100%;
}

.coaching-book-image{
  aspect-ratio: auto;
  background-size: contain; /* show whole book */
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 140%; /* visual book ratio without cropping */
}



/* === FIX (Coaching Buchkachel): Höhe exakt wie Bild + Technik-ähnlicher Hover === */
.coaching-split{ align-items: start; }

.coaching-book{ cursor: pointer; }
.coaching-book:focus-visible{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 4px;
}

.coaching-book-image{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  transform: scale(1);
  filter: brightness(0.95);
  transition: filter 260ms ease, transform 260ms ease;
}

.coaching-book-image img{
  display: block;
  width: 100%;
  height: auto;
}

.coaching-book:hover .coaching-book-image,
.coaching-book:focus-visible .coaching-book-image{
  transform: scale(1.05);
  filter: brightness(1);
}

.coaching-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.coaching-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
}

.coaching-title{
  position: relative;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 16px;
}

.coaching-book:hover .coaching-overlay,
.coaching-book:focus-visible .coaching-overlay{
  opacity: 1;
  transform: translateY(0);
}



/* === STRONG FIX: Buchkachel darf KEINE erzwungene Höhe haben === */
.coaching-book{ height: auto !important; }
.coaching-book-image{
  aspect-ratio: unset !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  line-height: 0 !important; /* vermeidet Rest-Abstände */
}
.coaching-book-image img{
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}



/* === FIX: Rechte Coaching-Kachel exakt wie rechte Kacheln unter 'Über mich' === */
.coaching-split{
  grid-template-columns: auto var(--about-text-width, 1fr);
}

.coaching-right{
  max-width: var(--about-text-width, 1fr);
}



/* === FIX: Buchkachel Hover wie Technik (idle leicht dunkler -> hover normal hell) + Text-Höhe wie Technik === */

/* Helligkeit: auf das IMG legen (nicht auf den Container), damit nichts "umkippt" */
.coaching-book-image{ filter: none !important; }
.coaching-book-image img{
  filter: brightness(0.95) !important; /* idle: ganz dezent dunkler */
  transition: filter 260ms ease, transform 260ms ease;
}
.coaching-book:hover .coaching-book-image img,
.coaching-book:focus-visible .coaching-book-image img{
  filter: brightness(1) !important; /* hover: normal hell */
}

/* Zoom weiterhin wie Technik */
.coaching-book:hover .coaching-book-image,
.coaching-book:focus-visible .coaching-book-image{
  transform: scale(1.05);
}

/* Overlay-Text exakt wie Technik positionieren (Padding + Line-Height) */
.coaching-overlay{
  padding: 14px 14px 12px !important;
  bottom: 0;
  line-height: 1.2;
}
.coaching-title{
  line-height: 1.2;
}



/* === OVERRIDE: Coaching-Buch Helligkeit exakt wie Technik-Kacheln ===
   Technik: idle brightness(0.9) -> hover brightness(1)
   Wir setzen das auf den Container (wie #technik .ph-image) und neutralisieren IMG-Filter. */
.coaching-book-image img{ filter: none !important; }

.coaching-book-image{
  filter: brightness(0.9) !important;
  transition: filter 260ms ease, transform 260ms ease !important;
}

.coaching-book:hover .coaching-book-image,
.coaching-book:focus-visible .coaching-book-image{
  filter: brightness(1) !important;
}



/* === RESET: remove ALL prior brightness logic for Coaching === */
.coaching-book-image,
.coaching-book-image *{
  filter: none !important;
}


/* === Coaching Buch – Helligkeit 1:1 wie Technik-Kacheln === */
.coaching-book-image{
  filter: brightness(0.9);
  transition: filter 260ms ease, transform 260ms ease;
}

.coaching-book:hover .coaching-book-image,
.coaching-book:focus-visible .coaching-book-image{
  filter: brightness(1);
}



/* === FIX: Technik Hover-Verlauf bis ganz unten (1-2px Gap schließen) === */
#technik .ph-image{ overflow:hidden; }
#technik .tech-overlay{ bottom:0; }
#technik .tech-overlay::before{
  inset:-1px;
  bottom:-2px; /* überdeckt die letzten Pixelreihen */
}



/* === FIX v2: Technik-Verlauf bis in die letzten Pixel (Gradient auf .ph-image selbst) === */

/* vorhandenes ::before neutralisieren, damit nichts dazwischenfunkt */
#technik .tech-overlay::before{
  background: none !important;
}

/* Gradient-Layer direkt auf das Bild legen */
#technik .ph-image::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:-3px; /* deckt die letzten hellen Pixel sicher ab */
  pointer-events:none;
  opacity:0;
  transition: opacity 220ms ease;
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
}

/* Gradient nur beim Hover/Focus sichtbar (wie bisher) */
#technik .tech-card:hover .ph-image::after,
#technik .tech-card:focus-visible .ph-image::after{
  opacity:1;
}



/* === FINAL FIX: Technik-Verlauf bis unten, Text bleibt unverändert === */

/* Verlauf wieder INS Overlay, aber physisch über den Rand gezogen */
#technik .tech-overlay{
  bottom: 0;
}

#technik .tech-overlay::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:-4px; /* deckt die letzten hellen Pixel ab */
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
  pointer-events:none;
}

/* Text immer über dem Verlauf */
#technik .tech-overlay > *{
  position: relative;
  z-index: 1;
}



/* === Technik FINAL v3: keine Filter auf Container (Text bleibt rein weiss), Gradient bis ganz unten === */

/* 1) Filter komplett entfernen (Filter dimmt immer auch die Schrift) */
#technik .ph-image{
  filter: none !important;
}

/* 2) Idle-Dimmung wie vorher, aber als Overlay-Layer (betrifft nur Bild, nicht Text) */
#technik .ph-image::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.10); /* idle: ganz dezent dunkler */
  opacity: 1;
  pointer-events:none;
  transition: opacity 260ms ease;
  z-index: 1; /* über Background, unter Text/Gradient */
}

/* Hover: Idle-Dimmung weg */
#technik .tech-card:hover .ph-image::before,
#technik .tech-card:focus-visible .ph-image::before{
  opacity: 0;
}

/* 3) Hover-Verlauf: im Overlay, aber bis unter die letzten Pixel gezogen */
#technik .tech-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 12px;
  z-index: 3; /* über allen Overlays */
}

#technik .tech-overlay::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:-8px; /* schließt den hellen Pixel-Saum sicher */
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
  pointer-events:none;
  z-index: 0;
}

/* 4) Text immer rein weiss und über dem Verlauf */
#technik .tech-title{
  position: relative;
  z-index: 1;
  color: #fff !important;
  opacity: 1 !important;
}

/* Sicherstellen: ph-image ist Stacking Context */
#technik .ph-image{ position: relative; }



/* === Technik: Titel nicht fett + Verlauf bis ganz unten ohne Text zu dimmen === */

/* 1) Tech-Titel: nicht fett */
#technik .tech-title{
  font-weight: 400 !important;
}

/* 2) Verlauf-Layer direkt auf .ph-image (über Bild, unter Text) */
#technik .tech-overlay::before{
  background: none !important; /* alten Verlauf deaktivieren */
}

#technik .ph-image::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:-10px; /* schließt den hellen Pixel-Saum zuverlässig */
  pointer-events:none;
  opacity:0;
  transition: opacity 220ms ease;
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
  z-index: 2; /* über Bild/idle-dim, unter Text */
}

/* Verlauf nur bei Hover/Focus sichtbar */
#technik .tech-card:hover .ph-image::after,
#technik .tech-card:focus-visible .ph-image::after{
  opacity:1;
}

/* Textlayer sicher über dem Verlauf */
#technik .tech-overlay{
  z-index: 3 !important;
}
#technik .tech-title{
  position: relative;
  z-index: 1;
  color:#fff !important;
}



/* === Technik: feinen Rahmen beim Hover ausblenden === */

/* Rahmen im Ruhezustand beibehalten, aber beim Hover unsichtbar */
#technik .tech-card:hover,
#technik .tech-card:focus-visible{
  border-color: transparent !important;
}

/* Falls der Rahmen vom Bild kommt */
#technik .tech-card:hover .ph-image,
#technik .tech-card:focus-visible .ph-image{
  outline: none !important;
}



/* === Technik: nur den Bild-Rahmen beim Hover ausblenden (Kachel-Rahmen bleibt!) === */

/* Kachel-Rahmen explizit zurücksetzen (Sicherheitsnetz) */
#technik .tech-card{
  border-color: rgba(255,255,255,.10) !important;
}

/* Problemursache: feiner Bild-Rahmen (subtile Linie um .ph-image) */
#technik .ph-image{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Beim Hover: diesen inneren Bild-Rahmen ausblenden */
#technik .tech-card:hover .ph-image,
#technik .tech-card:focus-visible .ph-image{
  box-shadow: none !important;
}



/* === FIX: Technik – nur den Rahmen um das Bild (ph-image) beim Hover ausblenden === */
/* Der Rahmen sitzt auf .ph-image (border). Wir lassen ihn im Idle, blenden ihn beim Hover aus. */
#technik .tech-card:hover .ph-image,
#technik .tech-card:focus-visible .ph-image{
  border-color: transparent !important;
}



/* === FIX: Technik – Rahmen IMMER sichtbar (Idle + Hover), nichts ausblenden === */

/* Kachel-Rahmen festnageln */
#technik .tech-card{
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Bild-Rahmen festnageln */
#technik .ph-image{
  border: 1px solid rgba(242,242,242,.12) !important;
}

/* Hover darf NICHT am Rahmen drehen */
#technik .tech-card:hover,
#technik .tech-card:focus-visible,
#technik .tech-card:hover .ph-image,
#technik .tech-card:focus-visible .ph-image{
  border-color: inherit !important;
}



/* === FINAL FIX: Technik-Kachelrahmen exakt wie Idle (kein Aufhellen beim Hover) === */

/* Referenzfarbe aus Idle (wie in Version 70) */
#technik .tech-card{
  border-color: rgba(255,255,255,.10) !important;
}

/* Hover/Focus dürfen die Farbe NICHT ändern */
#technik .tech-card:hover,
#technik .tech-card:focus-visible{
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

/* Sicherstellen, dass kein anderes Hover-Rule reinfunkt */
#technik .tech-card:hover *{
  box-shadow: inherit;
}



/* === Technik: Bild-Rahmen (direkt um das Bild) beim Hover ausblenden, Kachel-Rahmen bleibt === */
#technik .ph-image{
  border-style: solid;
  border-width: 1px;
  border-color: rgba(242,242,242,.12);
}

#technik .tech-card:hover .ph-image,
#technik .tech-card:focus-visible .ph-image{
  border-color: transparent !important; /* Breite bleibt, nur die Linie verschwindet */
}



/* === Coaching: Abstand exakt wie im Bereich 'Über mich' === */
.coaching-split{
  gap: var(--about-gap, 26px) !important;
}



/* === Coaching: Abstand wie 'Über mich' (column-gap: 18px) === */
.coaching-split{
  column-gap: 18px !important;
  gap: 18px !important;
}



/* === Hero-Feinschliff === */

/* Abstand zwischen Seegewerk und Unterzeile verringern */
.hero-title{
  margin-bottom: 10px; /* vorher größer */
}

/* Seegewerk etwas schmaler */
.hero-title{
  letter-spacing: 0.06em;
}

/* Unterzeile kompakter */
.hero-subtitle{
  margin-top: 0;
}

/* Trennlinie unter der Unterzeile */
.hero-divider{
  width: fit-content;
  margin: 12px auto 0;
}
.hero-divider::after{
  content:"";
  display:block;
  height:1px;
  width:100%;
  background: rgba(255,255,255,0.8);
}


/* === Hero-Feinschliff (Startseite) === */
.hero-brand{
  display: inline-block; /* Breite = Seegewerk */
}

.hero-logo-text{
  margin-bottom: 2px !important;     /* Abstand nach unten verkleinern */
  letter-spacing: .06em !important;  /* etwas schmaler */
}

.hero-logo-text--single{
  transform: scaleX(0.94);           /* minimal schmaler, ohne Schriftwechsel */
  transform-origin: left center;
}

.hero-tagline{
  margin-bottom: 12px !important;    /* kompakter vor Lead/Buttons */
}

.hero-divider{
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.85);
  margin: 10px 0 0;
}



/* === Hero-Feinschliff v2 === */

/* SEEGEWERK noch etwas dünner */
.hero-logo-text{
  font-weight: 300 !important;
  letter-spacing: .07em !important;
}

/* Trennlinie zwischen Logo und Tagline */
.hero-divider{
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.85);
  margin: 8px 0 8px;
}



/* === Hero-Feinschliff v3: Logo-Block zusammenziehen === */
.hero-logo-text{
  margin-bottom: 2px !important;
}

.hero-tagline{
  margin-top: -2px !important;
}



/* === Hero-Feinschliff v4 (klarer Aufbau) === */

/* SEEGEWERK + Film und Fernsehproduktion eng koppeln */
.hero-logo-text{
  margin-bottom: 2px !important;
}

.hero-tagline{
  margin-top: -4px !important;
  margin-bottom: 10px !important;
}

/* Trennlinie zwischen Markenblock und Fließtext */
.hero-divider{
  width: 140px;
  max-width: 60%;
  height: 1px;
  background: rgba(255,255,255,0.85);
  margin: 8px 0 14px;
}



/* === Hero FIX (Logo-Block): Seegewerk + Tagline zusammen, dann Linie, dann Fließtext === */
.hero-logo-text{
  margin: 0 0 1px !important;      /* enger an Tagline */
  letter-spacing: .06em !important; /* Buchstaben näher zusammen */
}

.hero-tagline{
  margin-top: -4px !important;     /* deutlich näher an Seegewerk */
  margin-bottom: 8px !important;   /* Platz vor Trennlinie */
}

/* Linie zwischen Markenblock und Fließtext */
.hero-divider{
  width: 100%;
  max-width: 260px;               /* dezent, nicht zu lang */
  height: 1px;
  background: rgba(255,255,255,0.85);
  margin: 0 0 14px;               /* direkt nach Tagline, dann Luft zum Text */
}

/* Fließtext startet nach der Linie */
.lead.hero-welcome{
  margin-top: 0 !important;
}



/* === Hero FEINSCHLIFF v5: noch kompakter === */
.hero-logo-text{
  letter-spacing: .03em !important;   /* Buchstaben deutlich näher zusammen */
  margin-bottom: 0 !important;
}

.hero-tagline{
  margin-top: -8px !important;        /* noch näher an SEEGEWERK */
  margin-bottom: 8px !important;
}



/* === Hero FEINSCHLIFF v6: letzte Justage === */

/* Tagline minimal näher an SEEGEWERK */
.hero-tagline{
  margin-top: -10px !important;   /* nur ein Hauch näher */
}

/* Trennlinie exakt so breit wie der Fließtext */
.hero-divider{
  width: 100% !important;
  max-width: none !important;
}

/* Sicherstellen, dass sich die Linie am Fließtext orientiert */
.lead.hero-welcome{
  max-width: var(--text-width, 720px);
}



/* === Hero FEINSCHLIFF v7: SEEGEWERK noch enger === */
.hero-logo-text{
  letter-spacing: .02em !important;
}



/* === Hero Textbreite: Umbruch nach „ich“ === */
.lead.hero-welcome{
  max-width: 520px; /* bewusst so gewählt, dass der Umbruch nach 'ich' kommt */
}


/* === Hero Textumbruch fix: Umbruch nach „ich“ per <br>, Breite wieder frei === */
.lead.hero-welcome{ 
  max-width: 360px; }


/* === Hero Layout v8: Block nach oben, Buttons weiter nach unten === */

/* Gesamten Hero-Textblock eine Zeilenhöhe nach oben */
.hero-copy{
  transform: translateY(-1.2em);
}

/* Abstand vor den Buttons vergrößern */
.hero-actions{
  margin-top: 1.6em !important;
}



/* === Hero Layout v9: Buttons noch weiter nach unten === */
.hero-actions{
  margin-top: 2.4em !important; /* weiter nach unten */
}



/* === Hero Layout v10: Buttons deutlich weiter nach unten === */
.hero-actions{
  margin-top: 3.6em !important;
}



/* === Hero: Abstand Fließtext -> Buttons um ca. eine Textzeile vergrößern === */
.cta-row{
  margin-top: calc(14px + 1.4em) !important;
}


/* === Hover-Text Anpassung: wie Technik-Schlagworte (nicht fett) === */
.coaching-tile .overlay-text,
.coaching-tile .overlay-text strong{
  font-weight: 400 !important;
}

/* === Buch-Hover: Fernsehjournalismus nicht fett === */
.book-tile .overlay-text,
.book-tile .overlay-text strong{
  font-weight: 400 !important;
}

/* === FIX: Buch-Hovertext wie Technik (nicht fett) === */
.coaching-title{
  font-weight: 400 !important;
}

/* === Kontakt: Adresse links, Kontaktangaben rechts === */
.contact-card .contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 14px;
}

.contact-card .contact-right{
  text-align: right;
}

/* Footer unter Kontakt: links Copyright, rechts Impressum-Link */
.footer--kontakt{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.impressum-link{
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
}

.impressum-link:hover{
  color: rgba(255,255,255,0.95);
  text-decoration: underline;
}

/* Modal Content Typo (Impressum) */
#impressumModal .modal-content{
  color: var(--fg);
}
#impressumModal .modal-title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
}
#impressumModal .modal-subtitle{
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 500;
  opacity: .9;
}
#impressumModal .modal-text{
  margin: 0 0 10px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}

/* Responsive */
@media (max-width: 720px){
  .contact-card .contact-grid{
    grid-template-columns: 1fr;
  }
  .contact-card .contact-right{
    text-align: left;
  }
  .footer--kontakt{
    flex-direction: column;
    align-items: flex-start;
  }
   /* Mobile: Copyright wirklich zentrieren */
  .footer--kontakt.footer--center{
    align-items: center;
    width: 100%;
    text-align: center;
  }
}

/* === Kontakt: Social-Buttons mittig in der Box === */
.contact-links{
  justify-content: center;
}

/* Footer exakt auf Boxbreite ausrichten */
.contact-footer-wrap{
  max-width: 900px;
  margin: 12px auto 0;
}

/* Impressum-Lightbox: mehr Innenabstand */
#impressumModal .modal-panel{
  padding: 18px 22px 20px !important;
}

/* Kontakt: Buttons rechtsbündig unter E-Mail */
.contact-links--right{
  justify-content: flex-end;
}

/* Kontakt: Impressum-Button links */
.contact-links--left{
  justify-content: flex-start;
}

/* Footer Copyright zentrieren */
.footer--center{
  justify-content: center;
}

/* Buttons in Kontakt: gleicher Stil wie bisher */
.contact-card .btn{
  padding: 8px 14px;
}

/* === Kontakt: Korrektur Layout (Box + Footer darunter) === */
.contact-spacer{ height: 14px; }

.contact-links--right{ justify-content: flex-end; }
.contact-links--left{ justify-content: flex-start; }

.contact-footer-wrap{
  max-width: 900px;
  margin: 12px auto 0;
}

.footer--center{ justify-content: center; }

/* Impressum: kleiner Fließtext unter Haftungsausschluss */
.modal-text--small{
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.85;
}

/* Image Lightbox: Close X */
.portrait-lightbox-inner{ position: relative; }

.portrait-lightbox-close{
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(0,0,0,0.35);
  border: 0;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .9;
}

.portrait-lightbox-close:hover{ opacity: 1; }

/* SEO/Accessibility: visually hidden heading (keeps semantics without changing layout) */
.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Filmografie (Modal) – Kachel-Layout wie auf der Homepage */
.filmografie-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.fg-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  padding: 14px 14px 12px;
}

.fg-date{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 8px;
}

.fg-title{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 6px;
}

.fg-sub{
  font-size: 13px;
  opacity: .92;
  line-height: 1.3;
  margin-bottom: 8px;
}

.fg-credits{
  font-size: 12.5px;
  opacity: .78;
  line-height: 1.35;
  margin-bottom: 6px;
}

.fg-meta{
  font-size: 12.5px;
  opacity: .78;
  line-height: 1.35;
}

/* Bei schmaleren Fenstern: 1 Spalte (nur fürs Modal, Desktop bleibt unverändert) */
@media (max-width: 820px){
  .filmografie-grid{ grid-template-columns: 1fr; }
}

/* Filmografie Modal – Abstände & Scroll */
#filmografieModal .modal-panel{
  max-height: 85vh;
  padding-left: 20px;
  padding-right: 20px;

  margin-top: 100px;

  margin-top: 100px;
}

#filmografieModal .modal-content{
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 26px; /* Platz für Scrollbar */
}

/* etwas mehr Luft zum Fensterrand */
@media (min-width: 769px){
  #filmografieModal .modal-panel{
    margin-left: 40px;
    margin-right: 40px;
  }
}


/* Scrollbar im Inhaltbereich */
#filmografieModal .modal-content{
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* dezente Scrollbar (WebKit) */
#filmografieModal .modal-content::-webkit-scrollbar{
  width: 10px;
}
#filmografieModal .modal-content::-webkit-scrollbar-track{
  background: transparent;
}
#filmografieModal .modal-content::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#filmografieModal .modal-content::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.28);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Filmografie Modal – exakt Container/Kontakt-Kachel Breite + kompaktere Höhe */
#filmografieModal .modal-panel{
  width: min(var(--max), calc(100% - 40px)); /* exakt wie .container => Kontakt-Kachel */
  margin: 90px auto 0; /* zentriert */
  max-height: 60vh;    /* etwa halb so hoch wie vorher */
}

#filmografieModal .modal-content{
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 26px; /* Abstand zwischen rechter Spalte und Scrollbar */
  scrollbar-gutter: stable;
}

/* Scrollbar (WebKit) – dezent sichtbar */
#filmografieModal .modal-content::-webkit-scrollbar{ width: 10px; }
#filmografieModal .modal-content::-webkit-scrollbar-track{ background: transparent; }
#filmografieModal .modal-content::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#filmografieModal .modal-content::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.28);
  border: 2px solid transparent;
  background-clip: content-box;
}


#filmografieModal .modal-title{ font-size:28px; letter-spacing:.2px; margin:0 0 10px; 
  margin-top: 18px;

  margin-bottom: 20px;
}

/* Button in Filmografie-Kacheln */
.fg-card{ position: relative; padding-bottom: 46px; }
.fg-btn{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  font-size: 12.5px;
  text-decoration: none;
  color: inherit;
}
.fg-btn:hover{ background: rgba(255,255,255,.06); }

/* Filmografie-Kachel-Button an Hauptseiten-Grauton angleichen */
.fg-btn{
  color: var(--btn-secondary-color, inherit);
  border-color: var(--btn-secondary-border, rgba(255,255,255,.22));
  background: var(--btn-secondary-bg, rgba(255,255,255,.04));
}
.fg-btn:hover{
  background: var(--btn-secondary-bg-hover, rgba(255,255,255,.08));
}

/* Filmografie Modal – Abstand zur oberen Fensterkante */
#filmografieModal .modal-panel{
  margin-top: 110px;
}
#filmografieModal .modal-content{
  padding-top: 6px;
}

/* Filmografie Modal – Höhe so, dass die 4. Reihe (Alpe-Adria-Trail + Tomary) komplett sichtbar ist */
#filmografieModal .modal-panel{ max-height: 60vh; }
#filmografieModal .modal-content{ max-height: 52vh; }

/* Oskar: 3-teilig (Button-Gruppe) */
.fg-btn-group{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
}
.fg-btn-group .fg-btn{
  position: static;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1;
}


/* === Filmografie Popup: alle Buttons gleiche Höhe (wie "Teil 1/2/3") === */
:root{
  --fg-btn-height: 30px;
  --fg-btn-py: 7px;
  --fg-btn-px: 10px;
  --fg-btn-font: 12px;
}

.fg-btn,
.fg-btn-group .fg-btn{
  height: var(--fg-btn-height);
  padding: var(--fg-btn-py) var(--fg-btn-px);
  font-size: var(--fg-btn-font);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Stacking fix: Video-Lightbox immer vor Filmografie-Lightbox */
#filmografieModal { z-index: 60; }
#videoModal { z-index: 100; }

/* Video-Lightbox: Close-X im Look der Foto-Lightbox, Position oben links, nur bei Hover/Fokus sichtbar */
#videoModal .modal-panel{ position: relative; }

#videoModal .modal-close{
  position: absolute;
  top: 16px;
  left: 16px;
  right: auto;

  background: rgba(0,0,0,0.35);
  border: 0;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;

  transition: opacity .2s ease;
}

#videoModal .modal-panel:hover .modal-close,
#videoModal .modal-panel:focus-within .modal-close{
  opacity: .9;
  pointer-events: auto;
}


/* Hero: Linie unter der Überschrift "Seegewerk" dunkelgrau */
.section-hero .hero-divider::after{
  background: rgba(60, 60, 60, 0.8);
}



/* Kapitel-Überschriften exakt im Look von "Seegewerk" */
.section-title {
  display: inline-block;
  font-size: inherit;
  border: 1px solid rgba(120,120,120,0.6);
  border-radius: 999px;
  padding: 6px 14px;
  width: fit-content;
  margin: 0;
}


/* Kapitel-Überschriften: etwas weniger Abstand zu den Kacheln darunter */
.section-title{
  margin-bottom: 0;
}


/* Section-Header: Titel links + "Seitenanfang" rechts (wie Menü) */
.section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px; /* weniger Abstand zu den Kacheln */
  flex-wrap: wrap;
}

.section-toplink{
  margin-left: auto;
}


/* Section-Titel: Abstand wird vom .section-head gesteuert */
.section-title{ margin-bottom: 0; }


/* Abschnitts-Header: Seitenanfang-Button visuell tiefer setzen,
   ohne Größe/ Hover-Box zu verändern (wie Menü oben) */
.section-head{
  align-items: center;
}

.section-toplink{
  margin-top: 10px; /* feinjustierter Versatz nach unten */
}



/* === HARD FIX: SEEGEWERK darf beim Resize NICHT skalieren (immer gleiche Groesse) === */
#start .hero-logo-text{
  font-size: 88px !important;   /* entspricht der "normalen" Groesse */
  line-height: 0.95;
  letter-spacing: .02em;
}
#start .hero-logo-text .initial{
  font-size: 1.1em;
  display: inline-block;
  transform: translateY(-0.00em);
}

/* Copyright-Hinweis in Bild-Lightboxen */
.portrait-lightbox-inner::after{
  content: "© Seegewerk";
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 10px;
  opacity: 0.35;
  color: #fff;
  letter-spacing: .04em;
  pointer-events: none;
}
.hero-video-credit{
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 10px;
  opacity: 0.35;
  color: #fff;
  letter-spacing: .04em;
  pointer-events: none;
  z-index: 3;
}

/* HERO: Wortmarke darf niemals umbrechen (Mobile-Fix) */
#start .hero-logo-text{
  white-space: nowrap;
}

#start .hero-logo-text,
#start .hero-logo-text *{
  word-break: keep-all;
  hyphens: none;
}

/* === HERO: Mobile höher (nur Phones) === */
@media (max-width: 768px) and (orientation: portrait){
  .section-hero{
    aspect-ratio: auto;   /* Ratio aufheben */
    min-height: 92vh;     /* fast Fullscreen */
    max-height: none;
  }

  .hero-bg-video{
    height: 100%;
    object-position: 50% 30%; /* Bildausschnitt nach oben schieben */
  }
}
/* === HERO: gesamter Textblock auf Mobile nach oben schieben === */
@media (max-width: 768px) and (orientation: portrait){
  .hero-copy{
    transform: translateY(-8.5rem);
  }
}
/* === Fortbildungen: Mobile untereinander, beide Kacheln volle Breite === */
@media (max-width: 768px) and (orientation: portrait){
  #coaching .coaching-split{
    grid-template-columns: 1fr !important;
  }

  #coaching .coaching-left,
  #coaching .coaching-right{
    width: 100%;
    max-width: none !important;
  }
}

/* === Mobile: Play-Button als eigenes Overlay-Element (ohne ::before/::after Konflikt) === */
@media (pointer: coarse){
  .film-card .mobile-play-btn{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity .2s ease;
  }

  .film-card.is-hovering .mobile-play-btn{
    opacity: 1;
  }

  /* Rechteckiger Play-Button */
  .film-card .mobile-play-rect{
    position: absolute;
    right: 16px;
    top: 16px; /* sitzt über dem Infotext */
    height: 40px;
    min-width: 52px;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(0,0,0,0.6);

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .film-card .mobile-play-triangle{
    width: 0;
    height: 0;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    transform: translateX(1px); /* optisch mittig */
  }
}
/* === Mobile: Impressum-Button rechtsbündig === */
@media (max-width: 768px){
  #impressumLink{
    margin-left: auto;
    margin-right: 0;
    text-align: right;
  }
}