/**
 * ProcesssWire.com site template stylesheet. Prepared for use in the basic site profile.
 *
 * Please feel free to use and/or modify under the same license as ProcessWire.
 *
 * Copyright 2010 by Ryan Cramer Design, LLC
 *
 */
@font-face {
    font-family: 'Theodor Display Black';
    src: url('fonts/TheodorDisplay-Black.eot');
    src: url('fonts/TheodorDisplay-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/TheodorDisplay-Black.woff2') format('woff2'),
        url('fonts/TheodorDisplay-Black.woff') format('woff');
    font-weight: bolder;
    font-style: normal;
/*    font-display: swap;*/
}

@font-face {
    font-family: 'Theodor Display';
    src: url('fonts/TheodorDisplay-Bold.eot');
    src: url('fonts/TheodorDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/TheodorDisplay-Bold.woff2') format('woff2'),
        url('fonts/TheodorDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
/*    font-display: swap;*/
}

@font-face {
    font-family: 'Theodor Display';
    src: url('fonts/TheodorDisplay-Regular.eot');
    src: url('fonts/TheodorDisplay-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/TheodorDisplay-Regular.woff2') format('woff2'),
        url('fonts/TheodorDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
/*    font-display: swap;*/
}



html {
	font-family: 'Theodor Display', sans-serif !important;
  font-weight: bold;
  font-size: 18px !important;
  color: #000 !important;
}


body {
  background: #fff;
}

a.plus-link {
  cursor: url(images/plus.png) 50 50, crosshair !important;
  /*cursor: crosshair !important;*/
}

h1, h2, h3, h4, h5 {
  font-family: 'Theodor Display Black', sans-serif !important;
	text-transform: uppercase;
}

a {
  color: #000;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block; /* Verhindert ungewollte Freiräume unter dem Bild */
}

main {
  padding: 4rem;
}

@media screen and (max-width:640px) {
  main {
    padding: 1rem;
  }
}
/*
.mobile-logo {
  position: fixed;
  text-indent: -9999px;
  width: 200px;
  height: 200px;
}*/



.adresse {
  display: none;
  position: fixed;
  left: 100px;
  bottom: 0;
}




.monogramm {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 200px;
  height: 200px;
  display: block;
  z-index: 1001;
  /* Sanfter Übergang für Größenänderung und Position */
  transition: transform 0.3s ease, top 0.3s ease, right 0.3s ease;
  transform-origin: top right; /* Skaliert ausgehend von der oberen rechten Ecke */
}

.monogramm a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(images/logo.svg) no-repeat center / contain;
  text-indent: -9999px;
}

/* Zustand beim Scrollen (z. B. auf 60% skaliert) */
.monogramm.is-scrolled {
  transform: scale(0.6);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* Abstand zwischen Pfeil und Text */
  color: #111111;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Skalierung und Ausrichtung des SVG-Pfeils */
.back-icon {
  width: 4rem;  /* Skaliert proportional zur Schriftgröße (oder z.B. 24px) */
  height: 4rem;
  transition: transform 0.2s ease;
}

/* Optionaler Hover-Effekt: Pfeil bewegt sich leicht nach links */
.back-link:hover {
  color: #002fa7;
}

.back-link:hover .back-icon {
  transform: translateX(-4px);
}

@media screen and (max-width: 640px) {

}

.video-container {
  width: 100%;
  max-width: 1200px; /* Beliebige maximale Breite */
  margin: 0 auto;
}

.video-container iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px; /* Optional: leicht abgerundete Ecken */
  display: block;
}


/* Grundstyling für den Link, damit der Zoom nicht übersteht */
a.projekt-link {
  display: block; /* Oder inline-block */
  text-decoration: none;
  color: inherit;
}

.image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* Schneidet den herausragenden Zoom exakt ab */
  display: block;
}

/* Grundstyling für das Bild */
.grid-image {
  display: block;
  margin: 0;
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält Proportionen bei */
  
  /* Definiert, welche Eigenschaften animiert werden sollen */
  transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out;
  
  /* Stellt sicher, dass der Zoom flüssig ist */
  backface-visibility: hidden;
  will-change: transform, filter;
}

/* Der Effekt, wenn man über den umschließenden Link hovert */
a.projekt-link:hover .grid-image {
  /* 1. Der Duotone-Filter (referenziert die ID aus dem SVG) */
  filter: url(#duotone-ikb);
  /* 2. Der Zoom-Effekt (1.05 = 5% Vergrößerung) */
  transform: scale(1.05);
}

/* Optional: Styling für den Titel, falls gewünscht */
.projekt-link h3 {
  margin-top: 0.5rem;
  transition: color 0.3s ease;
}

a.projekt-link:hover h3 {
  color: #002fa7; /* Titel färbt sich auch Blau beim Hover */
}

/* NEUES GRID */


@media screen and (min-width:640px) {
  .grid, .grid-odd, .grid-even {
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: auto;
    margin-bottom: calc(100vw / 18) !important;
  }

  .grid-section:nth-child(even) .grid-for-one,
  .grid-even .grid-for-one {
    grid-row: 1;
    grid-column: 1/span 6;
    display: grid;
    row-gap: 2rem;
    grid-template-columns: repeat(6, 1fr);
    /*grid-template-rows: repeat(4,2rem);*/
    grid-template-rows: auto;
  }

  .grid-section:nth-child(even) .grid-for-two,
  .grid-even .grid-for-two {
    grid-row: 1;
    grid-column: 7/span 12;
    display: grid;
    row-gap: 2rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
  }

  .grid-section:nth-child(odd) .grid-for-two,
  .grid-odd .grid-for-two {
    grid-row: 1;
    grid-column: 1/span 12;
    display: grid;
    row-gap: 2rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
  }

  .grid-section:nth-child(odd) .grid-for-one,
  .grid-odd .grid-for-one {
    grid-row: 1;
    grid-column: 11/span 8;
    display: grid;
    row-gap: 2rem;
    grid-template-columns: repeat(6, 1fr);
    /*grid-template-rows: repeat(4,2rem);*/
    grid-template-rows: auto;
  }

  .grid-section:nth-child(even) .grid-for-two .grid-item:nth-child(1),
  .grid-even .grid-for-two .grid-item:nth-child(1) {
    grid-row: 1;
    grid-column: 7/span 6;
  }

  .grid-section:nth-child(even) .grid-for-two .grid-item:nth-child(1).portrait:has(+.portrait) {
    grid-row: 1;
    grid-column: 8/span 4;
  }

  .grid-even .grid-for-two .grid-item:nth-child(1) {
    grid-row: 1;
    grid-column: 6/span 6;
  }


  .grid-section:nth-child(even) .grid-for-two .grid-item:nth-child(2).landscape,
  .grid-section:nth-child(even) .grid-for-two .grid-item:nth-child(2) {
    grid-row: 2;
    grid-column: 3/span 9;
  }

  .grid-section:nth-child(even) .grid-for-two .grid-item:nth-child(2).portrait {
    grid-row: 2;
    grid-column: 3/span 6;
  }

  .grid-section:nth-child(even) .grid-for-two .grid-item:nth-child(1).portrait + .portrait {
    grid-row: 2;
    grid-column: 5/span 4;
  }

  .grid-even .grid-for-two .grid-item:nth-child(2) {
    grid-column: 3/span 6;
  }

  .grid-section:nth-child(even) .grid-for-one .grid-item:nth-child(1),
  .grid-even .grid-for-one .grid-item:nth-child(1) {
    grid-row: 3;
    grid-column: 2/span 6;
  }

  .grid-section:nth-child(even) .grid-1 .grid-for-one .grid-item:nth-child(1),
  .grid-even .grid-1 .grid-for-one .grid-item:nth-child(1) {
    grid-row: 1;
    grid-column: 1/span 6;
  }

  .grid-section:nth-child(odd) .grid-for-two .grid-item:nth-child(1) {
    grid-row: 1;
    grid-column: 1/span 6;
  }

  .grid-section:nth-child(odd) .grid-for-two .grid-item:nth-child(1).portrait:has(+.portrait),
  .grid-odd .grid-for-two .grid-item:nth-child(1) {
    grid-row: 1;
    grid-column: 1/span 5;
  }

  .grid-odd .grid-for-two .grid-item:nth-child(1) {
    grid-row: 1;
    grid-column: 1/span 6;
  }

  .grid-section:nth-child(odd) .grid-for-two .grid-item:nth-child(2),
  .grid-odd .grid-for-two .grid-item:nth-child(2) {
    grid-row: 2;
    grid-column: 3/span 7;
  }

  .grid-section:nth-child(odd) .grid-for-two .grid-item:nth-child(2).portrait {
    grid-row: 2;
    grid-column: 3/span 6;
  }

  .grid-section:nth-child(odd) .grid-for-two .grid-item:nth-child(1).portrait + .portrait {
    grid-row: 2;
    grid-column: 4/span 5;
  }

  .grid-odd .grid-for-two .grid-item:nth-child(2) {
    grid-row: 2;
    grid-column: 3/span 6;
  }

  .grid-section:nth-child(odd) .grid-for-one .grid-item:nth-child(1),
  .grid-odd .grid-for-one .grid-item:nth-child(1) {
    grid-row: 3;
    grid-column: 1/span 6;
  }

  .grid-section:nth-child(odd) .grid-for-one .grid-item:nth-child(1).portrait,
  .grid-odd .grid-for-one .grid-item:nth-child(1) {
    grid-row: 3;
    grid-column: 2/span 5;
  }

  .grid-section:nth-child(odd) .grid-1 > div .grid-item:nth-child(1).portrait {
    grid-row: 1;
    grid-column: 4/span 4;
  }

  .grid-section:nth-child(odd) .grid-2 .grid-for-two {
    grid-row: 1;
    grid-column: 1/span 18;
    display: grid;
    row-gap: 2rem;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: auto auto;
  }

  .grid-section:nth-child(odd) .grid-2 .grid-for-two .grid-item:nth-child(1).portrait {
    grid-row: 1;
    grid-column: 2/span 4;
  }

  .grid-section:nth-child(odd) .grid-2 .grid-for-two .grid-item:nth-child(2).portrait {
    grid-row: 1;
    grid-column: 10/span 4;
    margin-top: calc(100vw / 18);
  }




  /*PROJEKT GRID */
  .projekt-grid {
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: auto;
    margin-bottom: calc(100vw / 18) !important;
  }

  .projekt-box {
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-row: 1;
    grid-column: 1/span 7;
  }

  .projekt-back {
    grid-row: 1;
    grid-column: 1/span 4;
  }

  .projekt-title {
    grid-row: 2;
    grid-column: 3/span 4;
  }

  .projekt-text {
    grid-row: 3;
    grid-column: 2/span 4;
  }

  .projekt-bilder {
    grid-row: 1;
    grid-column: 8/span 11;
  }
}

.projekt-bilder .grid-image {
  margin-bottom: 1rem;
}

@media screen and (max-width:640px) {
  .grid-item {
    margin-bottom: 1rem;
  }
}

/**
 * WireFatalError is a class that ProcessWire will use to output
 * fatal errors in the design, but only if debug mode is on, or if
 * you are logged in as a superuser.
 *
 */
.WireFatalError {
	background: #a30000;
	color: #fff;
	padding: 1em;
	position: relative;
	z-index: 9999;
}

/*********************************************************************
 * 6. Accessibility helpers
 *
 */

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	border: 0;
}

/* Show bypass link on hover */

.element-focusable:focus {
	clip: auto;
	overflow: visible;
	height: auto;
}

/* Sample styling for bypass link */

.bypass-to-main:focus {
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #333;
	color: #fff;
}