.fS_13 {
  font-size: 13px;
}
.fS_14 {
  font-size: 14px;
}
.lH_15 {
  line-height: 15px;
}
a {
  color: #868488;
  text-decoration: none;
}
/**a:visited {
  color: #868488;*/
}
a:hover {
  color: #c6c5c6;
}
html, body {
  font-family: "Lato";
  color: #6a6666;
}
body {
  overflow-y: scroll;
}
#container {
  display: block;
  width: 904px;
  margin: 0 auto 150px auto;
}
nav {
  display: block;
  height: 20px;
  margin-bottom: 20px;
}
nav ul li {
  float: left;
  margin-right: 9px;
}
nav ul li a:before {
  content: "//";
  margin-right: 9px;
}
nav ul li a.active {
  color: #c6c5c6;
}
#l {
  display: block;
  float: left;
  width: 300px;
  height: 200px;
/**  margin-right: 1px; */
  background: url(../images/logo.jpg) center no-repeat;
}
#r, #c {
  display: block;
  float: left;
  width: 603px;
  height: 200px;
}
#c {
  float: right;
  margin-top: 40px;
  height: auto;
}
#l, #r, #r {
  margin-bottom: 1px;
}
/*
#m {
  width: 350px;
  font-size: 18px;

  background: url(../images/layout/stripe1.png) 25px 25px no-repeat #C9C9BC;
} */
/*#r {*/
/*margin-left: 1px;*/
/*width: 200px;*/
/*font-size: 13px;*/
/*color: #3D3D3F;*/
/*background: url(../images/layout/stripe2.png) 25px 25px no-repeat #F0F0EB;*/
/*}*/
.h_1_1_1 {
  font-size: 20px;
  font-weight: normal;
}
.h_2_1_1 {
  font-size: 40px;
  line-height: 35px;
  font-weight: normal;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}
.h_5_1_1 {
  font-size: 20px;
  font-weight: normal;
}
.h_6_1_1 {
  font-size: 20px;
  font-weight: normal;
  color: #6a6666;
}
.b {
  font-weight: 900;
}
p {
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 20px;
}
/* helpers */
.fL {
  float: left;
}
.cB {
  clear: both;
}
.mB10 {
  margin-bottom: 10px;
}
.mB15 {
  margin-bottom: 15px;
}
.mB20 {
  margin-bottom: 20px;
}
/* box types */
.b_1_1 {
  display: block;
  float: left;
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0 1px 0 0;
  color: #ffffff;
  background-color: #828371;
/** background-image: url(../images/layout/stripe1.png); */
  background-position: 25px 25px;
  background-repeat: no-repeat;
}
.b_1_2 {
  display: block;
  float: left;
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0 1px 0 0;
  color: #ffffff;
  background-color: #828371;
/**  background-image: url(../images/layout/stripe1.png); */
  background-position: 25px 25px;
  background-repeat: no-repeat;
  background-color: #9e9f8a;
}
.b_1_2.link:hover {
  cursor: pointer;
  background-color: #6a6666;
}
.b_1_3 {
  display: block;
  float: left;
  width: 201px;
  height: 200px;
  padding: 0;
  margin: 0 1px 0 0;
  color: #ffffff;
  background-color: #828371;
/**  background-image: url(../images/layout/stripe1.png); */
  background-position: 25px 25px;
  background-repeat: no-repeat;
  background-color: #c1c2af;
}
.b_1_3.link:hover {
  cursor: pointer;
  background-color: #6a6666;
}
.b_2_1 {
  display: block;
  float: left;
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0 1px 0 0;
  color: #ffffff;
  background-color: #828371;
/**  background-image: url(../images/layout/stripe1.png); */
  background-position: 25px 25px;
  background-repeat: no-repeat;
  width: 401px;
}
.b_2_2 {
  display: block;
  float: left;
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0 0 0 0;
  color: #ffffff;
  background-color: #828371;
/**  background-image: url(../images/layout/stripe1.png); */
  background-position: 25px 25px;
  background-repeat: no-repeat;
  background-color: #9e9f8a;
  width: 401px;
}
.b_2_2.link:hover {
  cursor: pointer;
  background-color: #6a6666;
}
.b_2_3 {
  display: block;
  float: left;
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0 1px 0 0;
  color: #ffffff;
  background-color: #828371;
/**  background-image: url(../images/layout//images/layout/stripe1.png); */
  background-position: 25px 25px;
  background-repeat: no-repeat;
  background-color: #c1c2af;
  width: 401px;
}
.b_2_3.link:hover {
  cursor: pointer;
  background-color: #6a6666;
}
.padder {
  margin: 0;
  padding: 50px 25px 0 25px;
}
/* box links */
.bl_1 {
  display: block;
  height: 50px;
  float: right;
  margin-right: 1px;
}
/* link types */
.lT_1_1_1 {
  font-family: "Lato";
  font-size: 14px;
  color: #868488;
}
.lT_1_1_1:hover {
  color: #c6c5c6;
}
.lT_2_1_1 {
  color: #fff;
}
.lT_2_1_1:hover {
  color: #828371;
}
/* goodies */
#socialNetworksContainer {
  margin-bottom: 100px;
  height: 50px;
}
.o0 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0.0;
  -khtml-opacity: 0.0;
  opacity: 0.0;
}
.o90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}
.videoContainer, .play, .info {
  display: block;
  float: left;
  width: 300px;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
}
.videoContainer {
  background-color: #eee;
  margin: 0 1px 1px 0;
}
.play {
  background-image: url(../images/layout/playButton.png);
  background-position: 240px 140px;
}
.info {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0.0;
  -khtml-opacity: 0.0;
  opacity: 0.0;
  background-image: url(../images/layout/infoBackground.jpg);
  cursor: pointer;
}
.info:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}
.videoPadder {
  padding: 40px 25px 0 25px;
  color: #fff;
}
.personName {
  font-size: 25px;
  font-weight: bold;
}
.personAge {
  position: relative;
  bottom: 10px;
  left: 5px;
  font-size: 12px;
}
.personJob {
  font-size: 20px;
  font-weight: bold;
}
#player {
  display: block;
  background: url(../images/layout/hr.gif) top no-repeat;
  margin: -1px 0;
}
#hr {
  background: url(../images/layout/hr.gif) bottom no-repeat;
}
#playerPadder {
  padding: 25px;
}
.videoInfo {
  display: block;
  float: left;
  width: 190px;
  height: auto;
}
.youTubeContainer {
  display: block;
  float: right;
  width: 640px;
  height: auto;
  margin-bottom: 25px;
}

/* ===== Layout-Variablen ===== */
:root{
  --container-w: 904px;
  --nav-h: 200px; /* Höhe der 3 Header-Kacheln */
}

nav::after{ content:""; display:block; clear:both; }

/* Genug Platz unter dem fixen Header schaffen */
#container{ padding-top: calc(var(--nav-h) + 30px); }

/* #c darf nicht auf 603px schrumpfen – volle Breite & kein zusätzlicher Versatz */
#c{
  float: none;
  width: var(--container-w);
  margin-top: 0;
  height: auto;
}

/* Player klebt unter dem Header, Grid „läuft darunter durch“ */
#player{
  position: sticky;
  top: var(--nav-h);
  z-index: 950;          /* unter nav (1000), über den Kacheln */
  background: #fff;      /* damit Thumbs optisch darunter verschwinden */
  scroll-margin-top: calc(var(--nav-h) + 10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Overlay-Fix (Play/Info decken die ganze Kachel ab) */
.videoContainer{ position:relative; overflow:hidden; cursor:pointer; }
.videoContainer .play,
.videoContainer .info{
  position:absolute; left:0; top:0; width:100%; height:100%; float:none;
}
.videoContainer .play{ z-index:2; }
.videoContainer .info{ z-index:3; pointer-events:none; transition:opacity .2s ease; }
.videoContainer:hover .info{ opacity:.9; }

/* Moderne Clearfixe – .cB-Divs können weg */
#container, #player #hr, #playerPadder{ display: flow-root; }

/* Player bleibt fix unter dem Header, solange ein Video offen ist */
body.player-open #player{
  position: fixed;             /* statt sticky */
  top: var(--nav-h);           /* exakt unter dem Header andocken */
  left: 50%;
  transform: translateX(-50%);
  width: var(--container-w);   /* 904px */
  z-index: 999;                /* unter nav (1000), über Grid */
  background: #fff;            /* Thumbs „laufen“ darunter durch */
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Optional hübsch: wenn Player offen, etwas mehr Abstand unten,
   damit die Thumbs weicher unter ihm verschwinden */
body.player-open #container{
  padding-bottom: 40px;
}



/* ===========================
   Responsive & Cleanup Add-on
   =========================== */

/* Variablen: Breiten/Höhen für Layout */
:root{
  --container-w: 904px;   /* Desktop-Breite deiner Seite */
  --nav-h: 200px;         /* Höhe der 3 Header-Kacheln */
  --footer-h: 46px;       /* Fußzeilen-Höhe (ca.) */
}

/* Grundlayout zentrieren & Abstände zu fixem Header/Footer */
#container{
  width: min(100%, var(--container-w));
  margin: 0 auto;
  padding-top: calc(var(--nav-h) + 30px);
  padding-bottom: calc(var(--footer-h) + 20px);
}

/* Sticky Header (Kachel-Nav) zentriert */
nav{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--container-w);
  height: auto;
  margin-bottom: 0;
  z-index: 1000;
  background: transparent;
}
nav::after{ content:""; display:block; clear:both; }

/* Content-Spalte nicht auf 603px schrumpfen */
#c{
  float: none;
  width: min(100%, var(--container-w));
  margin-top: 0;
  height: auto;
}

/* Player direkt unter Header andocken; bei offenem Player „fix“ */
#player{
  position: sticky;
  top: var(--nav-h);
  z-index: 950;
  background: #fff;
  scroll-margin-top: calc(var(--nav-h) + 10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
body.player-open #player{
  position: fixed;
  top: var(--nav-h);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--container-w));
  z-index: 999; /* unter nav (1000), über Grid */
}

/* Overlay-Fix (Play/Info decken die ganze Kachel ab) */
.videoContainer{ position:relative; overflow:hidden; cursor:pointer; background-size: cover; background-position: center; }
.videoContainer .play,
.videoContainer .info{
  position:absolute; left:0; top:0; width:100%; height:100%; float:none;
}
.videoContainer .play{ z-index:2; }
.videoContainer .info{ z-index:3; pointer-events:none; transition:opacity .2s ease; }
.videoContainer:hover .info{ opacity:.9; }

/* Modernes „Clearfix“ – leere .cB-Divs sind nicht nötig */
#container, #player #hr, #playerPadder{ display: flow-root; }

/* Typografie für editierbare Seiten (Projekt/Kontakt) */
.page{
  max-width: 68ch;
  padding: 10px 0 20px;
}
.page h1{ font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); line-height: 1.2; margin: 0 0 0.6em; }
.page h2{ font-size: clamp(1.2rem, 1rem + 1.2vw, 1.5rem); margin: 1.2em 0 .5em; }
.page p, .page li{ font-size: clamp(1rem, 0.95rem + .4vw, 1.125rem); line-height: 1.6; }
.page ul{ padding-left: 1.1em; }
.page .note{ opacity:.9; }

/* Fester Footer unten, Inhalt darüber sichtbar */
.site-footer{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(255,255,255,.98);
  border-top: 1px solid #e5e5e5;
  backdrop-filter: saturate(180%) blur(6px);
  font-size: 0.95rem;
}
.site-footer .footer-inner{
  width: min(100%, var(--container-w));
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-footer a{ color: #868488; text-decoration: none; }
.site-footer a:hover{ color: #c6c5c6; }

/* ===========================
   Breakpoints
   =========================== */

/* Tablet / kleinere Laptops */
@media (max-width: 980px){

  /* Header: nicht absolut zentrieren, sondern vollbreit mit Innenabstand */
  nav{
    left: 0; right: 0; transform: none;
    width: auto; max-width: var(--container-w);
    margin-left: auto; margin-right: auto;
/*    padding: 0 10px; */
  }

  /* Drei Header-Kacheln untereinander (höherer Touch-Komfort) */
  #l,
  .b_2_2,
  .b_1_3{
    float: none;
    width: 100%;
    height: 140px;
    margin: 0 0 6px 0;
  }

  /* Videos: 2 Spalten */
  .videoContainer{
    float: left;
    width: calc(50% - 6px);
    height: 180px;
    margin: 0 6px 6px 0;
  }
  /* Jede zweite Kachel ohne rechten Rand */
  .videoContainer:nth-child(2n){ margin-right: 0; }

  /* Player-Infos: unter dem Video, volle Breite */
  .videoInfo, .youTubeContainer{
    float: none; width: 100%;
  }
  .youTubeContainer iframe{
    width: 100%; height: auto; aspect-ratio: 16 / 9;
  }

  /* Footer-Innenbreite */
  .site-footer .footer-inner{ padding: 10px; }
}

/* Smartphones */
@media (max-width: 600px){

  /* Player direkt unter Header – Höhe des Headers in JS gesetzt */
  #container{ padding-top: calc(var(--nav-h) + 14px); }

  /* Videos: 1 Spalte */
  .videoContainer{
    width: 100%;
    height: 180px;
    margin-right: 0;
  }

  /* Typo wenig kleiner, dafür gut lesbar */
  .page{ padding: 6px 0 16px; }
  .page p, .page li{ font-size: clamp(.98rem, .94rem + .6vw, 1.06rem); }
}

/* Footer-Ausrichtung sicherstellen */
.site-footer .footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between; /* links Copyright, rechts Links */
  gap: 12px;
}
.site-footer .footer-left{
  text-align: left;
}
.site-footer .footer-right{
  margin-left: auto;     /* schiebt den Block nach rechts */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: right;
  white-space: nowrap;   /* bleibt einzeilig, soweit möglich */
}
.site-footer .footer-right span[aria-hidden="true"]{
  opacity: .6;
}