@font-face {  font-display: block;   font-family: 'Barlow';  font-style: normal;  font-weight: 200;  src: url('fonts/barlow-v12-latin-200.woff2')       format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: italic;  font-weight: 200;  src: url('fonts/barlow-v12-latin-200italic.woff2') format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: normal;  font-weight: 300;  src: url('fonts/barlow-v12-latin-300.woff2')       format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: italic;  font-weight: 300;  src: url('fonts/barlow-v12-latin-300italic.woff2') format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: normal;  font-weight: 400;  src: url('fonts/barlow-v12-latin-regular.woff2')   format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: italic;  font-weight: 400;  src: url('fonts/barlow-v12-latin-italic.woff2')    format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: normal;  font-weight: 500;  src: url('fonts/barlow-v12-latin-500.woff2')       format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: italic;  font-weight: 500;  src: url('fonts/barlow-v12-latin-500italic.woff2') format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: normal;  font-weight: 600;  src: url('fonts/barlow-v12-latin-600.woff2')       format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: italic;  font-weight: 600;  src: url('fonts/barlow-v12-latin-600italic.woff2') format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: normal;  font-weight: 700;  src: url('fonts/barlow-v12-latin-700.woff2')       format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: italic;  font-weight: 700;  src: url('fonts/barlow-v12-latin-700italic.woff2') format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: normal;  font-weight: 800;  src: url('fonts/barlow-v12-latin-800.woff2')       format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: italic;  font-weight: 800;  src: url('fonts/barlow-v12-latin-800italic.woff2') format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: normal;  font-weight: 900;  src: url('fonts/barlow-v12-latin-900.woff2')       format('woff2'); }
@font-face {  font-display: block;   font-family: 'Barlow';  font-style: italic;  font-weight: 900;  src: url('fonts/barlow-v12-latin-900italic.woff2') format('woff2'); }


/* ==========================================================================   Base styles: opinionated defaults   ================================== */
::-moz-selection {  background: #cccccc;  text-shadow: none; }
::selection {  background: #999999;  text-shadow: none; }
hr {  display: block;  height: 1px;  border: 0;  border-top: 1px solid #ccc;  margin: 1em 0;  padding: 0; }
audio,canvas,iframe,img,svg,video {  vertical-align: middle;}
fieldset {  border: 0;  margin: 0;  padding: 0;}
textarea { resize: vertical;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

* { box-sizing:border-box; }

html {
  color: #222;
  font-size: 20px;
  line-height: 1.4;
  scroll-behavior: smooth;
  font-family:"Barlow";

  --navheight:5svh;  /*smallviewport svh wegen handys */ 
  --ci1:hsl(75 55% 35%);
  --ci1hell:hsl(75 50% 55%);
  --ci2:hsl(190, 25%, 70%);
  --ci2dunkel:hsl(190 25% 45%);
}

body {
  background-color:#111;
}


/* Mikroformate */
/* Mikroformate */
/* Mikroformate */

.bg-schwarz    { background-color:#000; }
.bg-grau       { background-color:#ccc; }
.bg-weiss      { background-color:#fff; }
.bg-ci1        { background-color: var(--ci1); }
.bg-ci1hell    { background-color: var(--ci1hell); }
.bg-ci1grad    { background-color: var(--ci1hell); box-shadow:inset 0 0 10vw var(--ci1); }
.bg-ci2        { background-color: var(--ci2); }
.bg-ci2grad    { background-color: var(--ci2); box-shadow:inset 0 0 10vw var(--ci2dunkel); }



.t-left   { text-align:left; }
.t-right   { text-align:right; }
.t-center   { text-align:center; }
.t-justify   { text-align:justify; }
@media (max-width:767px) {
  .t-s-center  { text-align:center;  }
  .t-s-justify { text-align:justify; }
}

.t-weiss    { color:#fff !important; }
.t-schwarz  { color:#000 !important; }
.t-ci1      { color: var(--ci1) !important; }
.t-ci1hell  { color: var(--ci1hell) !important; }
.t-ci2      { color: var(--ci2) !important; }

.t-bold     { font-weight:600; }


/* Typografie */
/* Typografie */
/* Typografie */

p {
  margin-top:0rem;
  margin-bottom:0rem;
  font-size:clamp(0.7rem,2vw,1rem);
  text-wrap: balance;
}

a { 
  color:white;
}

h1, h2, h3, h4, h5, h6 {
  font-weight:500;
  margin:0 0 1rem 0;
  color:#fff;
  text-align:center;
  text-wrap: balance;
}

h1 {  font-size:clamp(1.7rem,4vw,3rem); }
h2 {  font-size:clamp(1.5rem,3vw,2.333rem);  text-shadow:0 3px 15px rgba(0,0,0,0.5); }
h3 {  font-size:clamp(1.33rem,2vw,1.666rem); line-height:1.2;}
h4 {  font-size:1.333rem; }


h2 {
  position:relative;
  height:var(--navheight);
  margin-bottom:var(--navheight);
  z-index:100;
}
h2:before {
  content:"";
  position:absolute;
  left:calc(50% - 1px);
  top:calc(-1 * var(--navheight));
  height:var(--navheight);
  width:2px;
  background-color: var(--ci1hell);
  box-shadow: 0 0 10px 1px rgba(0,0,0,0.5);
}

blockquote {
  font-family:"Gelica";
  font-size:clamp(0.9rem, 2.3vw, 1.75rem);
  line-height:1.2;
  text-wrap: balance;
  color:#fff; 
  text-shadow:0 5px 12px rgba(0,0,0,0.3);
  text-shadow:0 5px 20px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.66);
  margin:1rem 1rem 0 max(7vw,2.5rem); 
  padding:0;
  position:relative;
}
blockquote:before {
  content:"„";
  font-size:500%;
  color:var(--ci2);
  font-weight:500;
  position:absolute;

  line-height:0;
  top:-2rem;
  left:min(-5vw,-2.33rem);
}
blockquote.noquote:before {
  content:"";
}

cite {
  font-size:clamp(0.8rem, 1.66vw, 1.33rem);
  color:#fff;
  margin:1rem 1rem 1rem max(7vw,2.5rem); 
  padding:0;
}


.factsandfigures .col {
  border-left:2px solid #fff;
}
.factsandfigures .col:first-child {
  border-left:none;
}
@media (max-width:1023px) {
  .factsandfigures .col { border-left:none; }
}

.factsandfigures .big { 
  font-family:"Gelica";
  font-style:italic;
  font-size:clamp(1.7rem, 2.5vw, 2.3rem);
  color:var(--ci1hell);
  font-weight:500;
}
.factsandfigures .big img { 
  max-width:40%;
  margin:0 auto;
}

.factsandfigures .medium { 
  font-family:"Gelica";
  font-style:italic;
  font-size:clamp(1.2rem, 1.66vw, 1.4rem);
  color:#fff;
  font-weight:500;
  margin-top:-0.33em;
  margin-bottom:0.33em;
}
.factsandfigures .small { 
  color:#fff;
  margin-top:auto;
  font-size:clamp(0.7rem,2vw,1rem);
}







/* Layout */
/* Layout */
/* Layout */

section {
  padding-top:calc(2 * var(--navheight));
}

.row {
  margin-left:auto;
  margin-right:auto;
  width:96%;
  max-width:1600px;
  display:flex;
  flex-wrap:wrap;
}

.row.fullwidth  { width:100%; max-width:none; }
.row.fullheight { height:100%; }
.nowrap         { flex-wrap: nowrap; }

.row            { align-items:stretch; }            /* default */   /* die Inhalte von rows (das sollten cols sein) innerhalb der row ausrichten */
.row.V-top      { align-items:flex-start; }         
.row.V-center   { align-items:center; }
.row.V-bottom   { align-items:flex-end; }
.row.V-stretch  { align-items:stretch; }

.row            { justify-content:space-between; }  /* default */ 
.row.H-left     { justify-content:flex-start; }
.row.H-center   { justify-content:center; }
.row.H-right    { justify-content:flex-end; }


.col {
  display:flex;
  flex-direction:column;
}

.col   {  width:auto; }                   /* die inhalte von rows sind cols */
.col-5 {  width:5%   !important; }
.col-10 {  width:10%  !important; }
.col-20 {  width:20%  !important; }
.col-25 {  width:25%  !important; }
.col-30 {  width:30%  !important; }
.col-33 {  width:calc(100% / 3)  !important; }
.col-40 {  width:40%  !important; }
.col-45 {  width:45%  !important; }
.col-50 {  width:50%  !important; }
.col-60 {  width:60%  !important; }
.col-66 {  width:calc(100% / 3 * 2)  !important; }
.col-70 {  width:70%  !important; }
.col-80 {  width:80%  !important; }
.col-90 {  width:90%  !important; }
.col-100 {  width:100%  !important; }

@media (max-width:1365px) {
.col-l-5 {  width:5%   !important; }
.col-l-10 {  width:10%  !important; }
.col-l-20 {  width:20%  !important; }
.col-l-30 {  width:30%  !important; }
.col-l-33 {  width:calc(100% / 3)  !important; }
.col-l-40 {  width:40%  !important; }
.col-l-50 {  width:50%  !important; }
.col-l-60 {  width:60%  !important; }
.col-l-66 {  width:calc(100% / 3 * 2)  !important; }
.col-l-70 {  width:70%  !important; }
.col-l-80 {  width:80%  !important; }
.col-l-90 {  width:90%  !important; }
.col-l-100 {  width:100%  !important; }
}
@media (max-width:1023px) {
.col-m-5 {  width:5%   !important; }
.col-m-10 {  width:10%  !important; }
.col-m-20 {  width:20%  !important; }
.col-m-30 {  width:30%  !important; }
.col-m-33 {  width:calc(100% / 3)  !important; }
.col-m-40 {  width:40%  !important; }
.col-m-50 {  width:50%  !important; }
.col-m-60 {  width:60%  !important; }
.col-m-66 {  width:calc(100% / 3 * 2)  !important; }
.col-m-70 {  width:70%  !important; }
.col-m-80 {  width:80%  !important; }
.col-m-90 {  width:90%  !important; }
.col-m-100 {  width:100%  !important; }
}
@media (max-width:767px) {
.col-s-5 {  width:5%   !important; }
.col-s-10 {  width:10%  !important; }
.col-s-15 {  width:15%  !important; }
.col-s-20 {  width:20%  !important; }
.col-s-30 {  width:30%  !important; }
.col-s-33 {  width:calc(100% / 3)  !important; }
.col-s-40 {  width:40%  !important; }
.col-s-50 {  width:50%  !important; }
.col-s-55 {  width:55%  !important; } 
.col-s-60 {  width:60%  !important; }
.col-s-66 {  width:calc(100% / 3 * 2)  !important; }
.col-s-70 {  width:70%  !important; }
.col-s-80 {  width:80%  !important; }
.col-s-90 {  width:90%  !important; }
.col-s-100 {  width:100%  !important; }
}

.col            { justify-content:flex-start; }
.col.V-top      { justify-content:flex-start;    }             /* die inhalte von cols (sollten texte etc. sein) innerhalb der col ausrichten */
.col.V-center   { justify-content:center; }
.col.V-bottom   { justify-content:flex-end; }
.col.V-spacebetween   { justify-content:space-between; }

.col            { align-items:stretch; }
.col.H-left     { align-items:flex-start;    }
.col.H-center   { align-items:center; }
.col.H-right    { align-items:flex-end; }
.col.H-stretch  { align-items:stretch; }

@media (max-width:767px) {  /* -s */
  .col.V-s-top      { justify-content:flex-start;    }         /* die inhalte von cols (sollten texte etc. sein) innerhalb der col ausrichten */
  .col.V-s-center   { justify-content:center; }
  .col.V-s-bottom   { justify-content:flex-end; }
  .col.V-s-spacebetween   { justify-content:space-between; }
  .col.H-s-left     { align-items:left;    }
  .col.H-s-center   { align-items:center; }
  .col.H-s-right    { align-items:right; }
  .col.H-s-stretch  { align-items:stretch; }
}

.gridstack {                                                    /* kein echtes Grid, aber bildebenen und texte übereinander platzieren - header, quote, ... */
  display:grid;
  grid-template: 1fr / 1fr;
  max-height:calc(100vh - var(--navheight));
  overflow:hidden;  /*edge chrome lassen bild sonst entkommen? */

  min-height:60vh;  /* für hannes-zitat, vielleicht ist das hier zu allgemein? */
}

.gridstack > * {
  grid-column:  1 / -1;
  grid-row:     1 / -1;
  width: 100%;
  height: 100%;
}


/*bilder in boxen platzieren*/
img, picture, video, svg {
  width:100%;
  height:auto;
  display:block;
}
.cover {  /* bilder in box einpassen ohne ränder. nützlich bei gridstack, aber auch sonst*/
  width:100%;
  height:100%;
  object-fit: cover;
  overflow: hidden;   /* nötig für images die in grid-zellen gecovert werden sollen? komisches verhalten */
  object-position:50% 50%;
}
.contain {  /* bilder in box einpassen, mit ränder (ganzes Bild immer sichtbar, aber so groß wie möglich*/
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 50%;
}










/* startbereich */
/* startbereich */
/* startbereich */

.startgroup {
  display:grid;
  grid-template: 1fr / 1fr;
  place-items:center center;
  overflow:hidden;
}
.startgroup img {
  grid-column: 1 / -1;
  grid-row:    1 / -1;
}

.startlogo {
  grid-column: 1 / -1;
  grid-row:    1 / -1;

  z-index:100;
  place-self: center;

  width: 86vw;
  max-width:800px;
  height: auto;
  aspect-ratio:1000 / 269; 

  backdrop-filter:blur(2px) brightness(0.7) contrast(1);
}




/* Referenzen */ 
/* Referenzen */ 
/* Referenzen */ 

.referenzen {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-teamplate-rows: auto;
  grid-auto-flow: dense;
  grid-gap:4px;
  place-items: end start;
}
@media (max-width:1279px) { .referenzen {  grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width:1023px) { .referenzen {  grid-template-columns: 1fr 1fr;     } }

.referenzen .projekt {
  cursor:pointer;
  height: 100%;
  width: 100%;
  display:grid;
  grid-template: 1fr / 1fr;
  place-items: end end;
  text-decoration:none;
  opacity:0;
}

.referenzen .projektinsert {
  cursor:default;
}

.referenzen .projekt.eins {
  grid-column: span 1;
  grid-row: span 1;
}

.referenzen .projekt.zwei {
  grid-column: span 2;
  grid-row: span 1;
}

.referenzen .projekt.vier {
  grid-column: span 4;
  grid-row: span 1;
}
@media (max-width:1279px) { .referenzen .projekt.vier {  grid-column: span 3; } }
@media (max-width:1023px) { .referenzen .projekt.vier {  grid-column: span 2; } }


.referenzen .projekt .abbildung {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width:100%;
  height:100%;
  overflow:hidden;

  display:grid;
  place-items:center;
}

.referenzen .projekt .abbildung img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:all 0.25s ease-in-out;
}

.referenzen .projekt.eins .abbildung {
  aspect-ratio: 1 / 1;                         /* resultiert in nicht exakt 1:1, wenn daneben ein 2:1-Element platziert ist, weil der grid-gap nicht einberechnet wird, müsste 2+gap:1 sein. sind aber nur weniger Pixel --> egal */
}
.referenzen .projekt.zwei .abbildung {
  aspect-ratio: 2 / 1;
}
.referenzen .projekt.vier .abbildung {
  aspect-ratio: 4 / 1;
}
@media (max-width:1279px) { .referenzen .projekt.vier {  aspect-ratio: 3 / 1; } }
@media (max-width:1023px) { .referenzen .projekt.vier {  aspect-ratio: 2 / 1; } }

.referenzen .projekt:hover .abbildung img {
  width:105%;
  height:105%;
}  

.referenzen .projekt .beschreibung {
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  width:fit-content;
  height:fit-content;
  margin:2vw;

  color:black;
  transition:all 0.25s ease-in-out;
}
.referenzen .projekt:hover .beschreibung {
  font-size:110%;
}  

.referenzen .projekt .beschreibung > img {
  width:3vw;
  height:auto;
  filter:brightness(10) drop-shadow(0 2px 5px rgba(0,0,0,0.5));
  opacity:0;
  transition:all 0.25s ease-in-out;
}
.referenzen .projekt:hover .beschreibung > img {
  opacity:0.75;
} 






/* Team */
/* Team */
/* Team */
.team-slide {
  height: 100% !important;
  width: 100%;
  display:grid;
  grid-template-rows: auto 2em 2em;
  place-items:start center;
  opacity:0.25;
  transition:opacity 0.5s ease;
}
.team-slide.swiper-slide-prev,
.team-slide.swiper-slide-next {
  opacity:0.75;
}
.team-slide.swiper-slide-active {
  opacity:1;
}
@media (max-width:1365px) {
  .team-slide.swiper-slide-prev,
  .team-slide.swiper-slide-next {
    opacity:0.25;
  }
}

.team-slide > * {
  grid-column: 1 / -1;
  text-align:center;
  font-size:clamp(0.9rem,2vw,1rem);
  line-height: 1.2;
  transition:all 0.5s ease-in-out;
}

.team-slide img {
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio: 1;
  overflow: hidden;
  grid-row: 1 / -1;
}

.team-slide .werte {
  grid-row: 1 / 2; z-index:10;
  margin:0.5rem 0 0 0;  
  place-self:center;
  font-family: "Gelica"; font-style: italic; color:white; text-shadow:0 1px 2px rgba(0,0,0,1), 0 1px 4px rgba(0,0,0,1), 0 5px 10px rgba(0,0,0,0.85);
  opacity:0;
}

.team-slide h3 {
  grid-row: 2 / 3;
  color:var(--ci2);
  opacity:0;
  margin:0.75rem 0 0 0;
  text-shadow:0 1px 2px rgba(0,0,0,1), 0 1px 4px rgba(0,0,0,1), 0 5px 10px rgba(0,0,0,0.85);
}

.team-slide h4 {
  grid-row: 3 / 4;
  opacity:0;
  margin:0.25rem 0 0 0;
  text-shadow:0 1px 2px rgba(0,0,0,1), 0 1px 4px rgba(0,0,0,1), 0 5px 10px rgba(0,0,0,0.85);
}



@media (max-width:767px) {
  .team-slide {
    xxgrid-template: auto auto auto auto / 1fr;
  }
  .xxteam-slide .werte {  grid-row: 2 / 3; margin: 0.5rem 0; }
  .xxteam-slide h3 {      grid-row: 3 / 4; margin: 0.00rem 0 0 0; }
  .xxteam-slide h4 {      grid-row: 4 / 5; margin: 0.00rem 0 0 0; }
}




.team-slide.swiper-slide-active h3,
.team-slide.swiper-slide-active h4,
.team-slide.swiper-slide-active .werte {
  opacity:1;
}






.teamtext {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  padding:1rem;
  position:relative;

  place-self: start center;
  width: 100%;
  aspect-ratio: 1;
}

.teamtext .gross {
  font-family:"Gelica";
  font-size:clamp(1rem, 2.5vw, 2rem);
  line-height:1.2;
  color:#fff; 
}

.teamtext .klein {
  margin-top:1rem;
}











/* Lightbox Stage */
/* Lightbox Stage */
/* Lightbox Stage */

#stage {
  position:fixed;
  top:0; bottom:0; left:0; right:0; z-index:1000;
  background-color:rgba(0,0,0,0.75);
  backdrop-filter:blur(4px);

  display:grid; 
  opacity:0; /*wegen jquery show muss das hier auf grid sein damit show/hide passt. beim Start verstecken über opacity*/
  grid-template: 1fr / 1fr;
  place-items:center;
}

.closestage {
  position:absolute;
  top:calc( var(--navheight) + 1rem );
  top:1rem;
  right:1rem;

  width: clamp(2.5rem,5vw,3.25rem);
  height: clamp(2.5rem,5vw,3.25rem);
  font-size: clamp(1.75rem,4vw,2.25rem);
  padding-bottom: clamp(0.2rem,0.4vw,0.225rem);
  line-height: 1;

  background-color:var(--ci2);
  border-radius:50%;
  color:black;

  display:grid;
  place-items:center center;
 
  transition:all 0.25s ease-in-out;
}
.closestage:hover {
  transform:scale(1.1);
}
.closestage:after {
  content:"×";
}

.innerstage {
  width:96%;
  margin-top:1.2rem; 
  max-width:133vh;    /* experiment ohne fixes aspect-ratio und overflow-hidden. hält die Bühne im Viewport und verkleinert notfalls die Breite. */
  height:auto;
  /*max-height:80vh;*/  /* noch experimenteller. für mobile*/
  background:white;
  overflow:hidden;    /* wieder komischer grid-bug der inhalte nicht zentriert wenn overflow nicht verboten ist? */
 }

.innerstage .projektbilderslider {
  aspect-ratio:16 / 9;                /* wenn defekt, dann wieder einschalten */
  width:100%;
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(0, 1fr);   /* seltsamer Firefox-bug, bei nur 1fr erzeugt FF Spalten mit 2 Milliarden Pixel Breite und swiper dreht dann in Folge durch und flackert ...   https://github.com/kenwheeler/slick/issues/3415 */
  grid-template-rows:1fr;
}

.innerstage .projektbilderslider .swiper1 {
  width:100%; 
  height:auto; 
  aspect-ratio:16 / 9;                /* wenn defekt, dann wieder einschalten */

  grid-row: 1 / -1;
  grid-column: 1 / -1;
      min-height: 100%;  /* chrome/edge machen sonst höhe 0 ... auch bei height:auto oder height:100% */
}

.innerstage .swiper-slide {
  aspect-ratio: 16 / 9;
  overflow:hidden;
  display:flex;
  gap:calc(2px);
}

.innerstage .swiper-slide picture {
  height:100%;
  width: 100%;
  flex-grow:1;

  display: grid;
  display: block; /*grid geht nicht mit object-fit in chrome?*/
  grid-template: 1fr / 1fr;
  place-items: center center;

}

@media (max-width:767px) {
  .innerstage .swiper-slide {
    aspect-ratio: 4 / 4;
    flex-direction:column;
  }
  .innerstage .projektbilderslider .swiper1 {
    aspect-ratio: 4 / 4; 
  }
  .innerstage .projektbilderslider {
    aspect-ratio: 4 / 4; 
  }

  .innerstage .swiper-slide .contain {
    object-fit:cover;
  }
  .innerstage .swiper-slide picture {
    /*height:50%;*/
  }
}


.swiper-button-next, 
.swiper-button-prev {
  color:white;
  text-shadow:0 0 5px rgba(0,0,0,0.25),0 0 2px rgba(0,0,0,0.5);
  height: 100%;
  top: 0;
  margin: 0;
  width:10%;
  justify-content:flex-start;
}
.swiper-button-next {
  justify-content: flex-end;
}

.swiper-button-next img,
.swiper-button-prev img {
  width:70%;
  max-width:3rem;
  aspect-ratio: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.33)) brightness(10);
  opacity:0.85;
}

.swiper-button-next.swiper-button-next-team img,
.swiper-button-prev.swiper-button-prev-team img {
  xxwidth:100% !important;
  filter:none;
  opacity:1;
}
 
.swiper-button-next::after {
  content:"";
}
.swiper-button-prev::after {
  content:"";
}

.projektbilderslider .swiper-slide {
  background-color:#f7f7f7;
  background-color:#000000;
}

.swiper-button-next-team, 
.swiper-button-prev-team {
  position:unset !important;
  height:unset !important;
  justify-content:center;
}
.swiper-button-next-team:after, 
.swiper-button-prev-team:after {
  content:"" !important;
}

.innerstage .projektbeschreibung {
  width:100%;
  overflow:hidden;
}
.innerstage .projektbeschreibung h4 {
  text-align:right;
  margin-bottom:0;
}

@media (max-width:767px) {
  .innerstage .projektbeschreibung h4 {
    text-align:center;
  }
}

.innerstage .projektbeschreibung p {
  margin:0;
  font-size:0.8rem;
}




/* NAV Sonderformate */
/* NAV Sonderformate */
/* NAV Sonderformate */

.navsection {
  position: sticky;
  top: 0;
  background-color:rgba(0,0,0,0.7);
  backdrop-filter:blur(4px);
  border-bottom:2px solid #fff;
  z-index:200;
}


nav {
    height:var(--navheight);
}
nav .logo {
  color:white;
  font-weight:800;
  height:100%;
  display:flex;
  align-items:center;
}
nav .logo img {
  max-height: var(--navheight);
  width: auto;
  max-width:90%;
  aspect-ratio:1000 / 150;
}
nav .menu {
  
  list-style-type: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  height:100%;
  display:flex;
  gap:clamp(1rem,2vw,2rem);
  justify-content:flex-end;
  align-items:stretch;
}
@media (max-width:767px) {
  nav .menu {
    display:none;
  }
}
nav .menu li {
  display: block;
}
nav .menu a {
  display: block;
  height:100%;
  font-weight:500;
 color: white;
  text-decoration: none;
  transition:all 0.25s ease;

  display:flex;
  align-items:center;
}

nav .menu a:hover {
 //font-weight:700;
 transform:scale(1.1);
}



/* Footer */
/* Footer */
/* Footer */

footer {
    min-height:calc(var(--navheight) - 2px);
    border-top:2px solid #fff;
}

footer a {
  text-decoration:none;
}
footer a:hover {
  text-decoration:underline;
}



 



a.mehranzeigen {
  color:#fff; 
  text-decoration:none;
  font-family:"Gelica";
  font-style:italic;

  display:inline-flex;    /* innen flex, außen inline */
  flex-direction:column;
  align-items:center;

  transition:all 0.25s ease-in-out;
}

a.mehranzeigen.quer {
  flex-direction:row;
  gap:0.5rem;
}

@media (max-width:579px) {
  a.mehranzeigen.quer {
    flex-direction:column;
    gap:0rem;
  }
}


a.mehranzeigen img {
  width:clamp(70px, 4vw, 80px);
}

.bg-ci1 a.mehranzeigen img, 
.bg-ci1grad a.mehranzeigen img, 
.bg-ci2 a.mehranzeigen img, 
.bg-ci2grad a.mehranzeigen img, 
.bg-schwarz a.mehranzeigen img {
    filter:brightness(10) drop-shadow(0 2px 15px rgba(0,0,0,0.15));
}

a.mehranzeigen:hover {
  transform:scale(1.05);
}












/* layout overrides */

.p-0       { padding: 0rem !important; }
.p-1       { padding: 1rem !important; }
.p-2       { padding: 2rem !important; }
.p-3       { padding: 3rem !important; }
.p-4       { padding: 4rem !important; }

.p-2vw     { padding: 2vw !important; }

.pt-0       { padding-top: 0rem !important; }
.pt-05       { padding-top: 0.5rem !important; }
.pt-1       { padding-top: 1rem !important; }
.pt-2       { padding-top: 2rem !important; }
.pt-3       { padding-top: 3rem !important; }
.pt-4       { padding-top: 4rem !important; }
.pt-5       { padding-top: 5rem !important; }

.pb-0       { padding-bottom: 0rem !important; }
.pb-05       { padding-bottom: 0.5rem !important; }
.pb-1       { padding-bottom: 1rem !important; }
.pb-2       { padding-bottom: 2rem !important; }
.pb-3       { padding-bottom: 3rem !important; }
.pb-4       { padding-bottom: 4rem !important; }
.pb-5       { padding-bottom: 5rem !important; }

.pl-0       { padding-left: 0rem !important; }
.pl-05       { padding-left: 0.5rem !important; }
.pl-1       { padding-left: 1rem !important; }
.pl-2       { padding-left: 2rem !important; }
.pl-3       { padding-left: 3rem !important; }
.pl-4       { padding-left: 4rem !important; }
.pl-5       { padding-left: 5rem !important; }

.pl-2vw     { padding-left: 2vw !important; }


.pr-0       { padding-right: 0rem !important; }
.pr-05       { padding-right: 0.5rem !important; }
.pr-1       { padding-right: 1rem !important; }
.pr-2       { padding-right: 2rem !important; }
.pr-3       { padding-right: 3rem !important; }
.pr-4       { padding-right: 4rem !important; }
.pr-5       { padding-right: 5rem !important; }

.pr-1vw     { padding-right: 1vw !important; }
.pr-2vw     { padding-right: 2vw !important; }

@media (max-width:767px) {
.p-s-0       { padding: 0rem 0rem 0rem 0rem !important; }
.p-s-1       { padding: 1rem 1rem 1rem 1rem !important; }
.p-s-2       { padding: 2rem 2rem 2rem 2rem !important; }
.p-s-3       { padding: 3rem 3rem 3rem 3rem !important; }
.p-s-4       { padding: 4rem 4rem 4rem 4rem !important; }

.pt-s-0       { padding-top: 0rem !important; }
.pr-s-0       { padding-right: 0rem !important; }

}




.mt-0       { margin-top: 0rem !important; }
.mt-05       { margin-top: 0.5rem !important; }
.mt-1       { margin-top: 1rem !important; }
.mt-2       { margin-top: 2rem !important; }
.mt-3       { margin-top: 3rem !important; }
.mt-4       { margin-top: 4rem !important; }
.mt-5       { margin-top: 5rem !important; }

.mt-1nav    { margin-top: var(--navheight); }
.mt-2nav    { margin-top: calc(2 * var(--navheight)); }
.mt--1nav   { margin-top: calc(-1 * var(--navheight)); }
.mt--2nav   { margin-top: calc(-2 * var(--navheight)); }
.mt--3nav   { margin-top: calc(-3 * var(--navheight)); }

@media (max-width:767px) {
.mt-s-05      { margin-top: 0.5rem !important; }
.mt-s-1       { margin-top: 1rem !important; }
.mt-s-2       { margin-top: 2rem !important; }
.mt-s-3       { margin-top: 3rem !important; }
.mt-s-4       { margin-top: 4rem !important; }
}


.mb-0       { margin-bottom: 0rem !important; }
.mb-05       { margin-bottom: 0.5rem !important; }
.mb-1       { margin-bottom: 1rem !important; }
.mb-2       { margin-bottom: 2rem !important; }
.mb-3       { margin-bottom: 3rem !important; }
.mb-4       { margin-bottom: 4rem !important; }
.mb-5       { margin-bottom: 5rem !important; }

.mb-1nav    { margin-bottom: var(--navheight); }
.mb-2nav    { margin-bottom: calc(2 * var(--navheight)); }
.mb--1nav   { margin-bottom: calc(-1 * var(--navheight)); }
.mb--2nav   { margin-bottom: calc(-2 * var(--navheight)); }
.mb--3nav   { margin-bottom: calc(-3 * var(--navheight)); }

@media (max-width:767px) {
  .mb-s-1       { margin-bottom: 1rem !important; }
  .mb-s-2       { margin-bottom: 2rem !important; }
  .mb-s-3       { margin-bottom: 3rem !important; }
  .mb-s-4       { margin-bottom: 4rem !important; }
}


.ml-0       { margin-left: 0rem !important; }
.ml-1       { margin-left: 1rem !important; }
.ml-2       { margin-left: 2rem !important; }
.ml-3       { margin-left: 3rem !important; }
.ml-4       { margin-left: 4rem !important; }
.ml-5       { margin-left: 5rem !important; }

.mr-0       { margin-right: 0rem !important; }
.mr-1       { margin-right: 1rem !important; }
.mr-2       { margin-right: 2rem !important; }
.mr-3       { margin-right: 3rem !important; }
.mr-4       { margin-right: 4rem !important; }
.mr-5       { margin-right: 5rem !important; }



@media (max-width:767px) {
  .s-hide     { display:none; }
  .s-block    { display:block; }
}