/* THIS IS THE BASE TAMPLATE */



/* In the following, der are different stages of css, which will probably later be seperperated
into different files, for more modular approach */

/* table of contents:

1. CSS RESET
2. CSS PRIMER CONFIGURATION
3. CSS BASE CONFIGURATION
4.
5.
6.
(...)

*/

@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Michroma-Regular.ttf')   format('truetype'); /* Backup */
  font-display: swap;
}




 /* 1. CSS Reset */

 /*
    1.1
    1.2
    1.3
    1.4
    1.5
 */


 /* 1.1 General reset */

 *,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 1.2 Anchor reset */

a {
  text-decoration: none; /* Keine Unterstreichung */
  color: inherit; /* Erbt die Textfarbe */
}


/* 1.3 Link reset */

ul, ol {
  list-style: none; /* Keine Aufzählungszeichen */
}

dl {
  margin: 0;
}



/* 1.4 Form / Input reset*/

input, textarea, select {
  border: none; /* Entfernt Standard-Bordüren */
  outline: none; /* Entfernt den Fokusrahmen */
  font-family: inherit; /* Erbt die Schriftart */
  font-size: inherit; /* Erbt die Schriftgröße */
}


/* 1.5 Table reset */

table {
  border-collapse: collapse; /* Verhindert doppelte Ränder */
  width: 100%; /* Tabellen spannen sich über den gesamten verfügbaren Raum */
}

th, td {
  padding: 0;
  text-align: left; /* Standard-Ausrichtung */
}










  /* 2. CSS PRIMER CONFIGURATION */

  /*

  2.1
  2.2

  */

 /* 2.1 Basic body styles */

body {
  -webkit-font-smoothing: antialiased; /* Weichere Schriftanzeige */
  -moz-osx-font-smoothing: grayscale; /* Weichere Schriftanzeige auf macOS */
}

/* 2.2 Basic Image styles */

img {
  max-width: 100%; /* Verhindert, dass Bilder die Breite des Containers überschreiten */
  display: block; /* Entfernt den unteren Abstand */
  margin: 0 auto;
}

/* Focus styles */

:focus {
  outline: none; /* Entfernt Standard-Fokusrahmen */
}

input:focus, button:focus {
  outline: 2px solid #0056b3; /* Eigener Fokusrahmen */
}



  /* 3. CSS BASE / ROOT CONFIGURATION */

 /* 3.1 root definition */

/* This is the main area for maintenance, as you have many parameters in one place */

/*#384152 – Ein gedämpftes Dunkelgrau, vermutlich für Container oder Karten.*/
  :root {
  --background-color: #111725; /* Hintergrundfarbe */
  --alt-background-color: #1f2837;
  --article-background-color: #374051;/*rgba(255, 255, 255, 0.3); /* Hintergrundfarbe der Artikel */
  --primary-color: #111725; /* Hauptfarbe */
  --secondary-color: #FFFFFF; /* Sekundärfarbe */
  --hover-color: purple; /* Sekundärfarbe */
  --text-color: #cbcfda; /* Standard Textfarbe */
  --font-family: 'Michroma', sans-serif; /* Schriftart */
  --line-height: 1.6; /* Standard Zeilenhöhe */
  --base-spacing: 16px; /* Grundabstand für Margin und Padding */

  --text-size: 14px; /* Allg. Textfarbe */
  --main-text-align: center; /* Standart Textausrichtung für sections (vllt besser in section element direkt festlegen) */

  /* grid layouts */


  --grid-one: repeat(1, 1fr);
  --grid-two: repeat(2, 1fr);
  --grid-three: repeat(3, 1fr);
  --grid-four: repeat(4, 1fr);
  --grid-five: repeat(5, 1fr);
  --grid-six: repeat(6, minmax(0, 1fr));
  --grid-seven: repeat(7, minmax(0, 1fr));

  /* NAVIGATION PARAMETERS */

  --nav-height: 80px;
  --footer-height: 190px;


  /* sections */

  --mainSection-maxWidth: 100%;

  /* grids */



  /* optinal Elements */

  --devider-height: 150px;
  --devider-color: ...;
}


/* 3.2 Typografie definition */

body {
  font-family: var(--font-family);
  font-family:'Michroma','Segoe UI','Helvetica Neue',sans-serif;

  color: var(--text-color);
  line-height: var(--line-height);
  background-color: var(--background-color);
  font-size: var(--text-size); /* Grundschriftgröße */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: bold;
/*  margin-top: calc(var(--base-spacing) * 2);*/
}

h1 {
  font-size: 2em; /* Größte Überschrift */
}

h2 {
  font-size: 1.5em; /* Zweitgrößte Überschrift */
}

h3 {
  font-size: 1.15em; /* Drittgrößte Überschrift */
}

h4 {
  font-size: 1em; /* Viertgrößte Überschrift */
}

h5 {
  font-size: .85em; /* Fünftgrößte Überschrift */
}

h6 {
  font-size: .74em; /* Sechstgrößte Überschrift */
}


p {
  /*margin-bottom: var(--base-spacing); /* Abstand zwischen Absätzen */
}


/* 3.3 basic Layout / Container configuration */


/* Container für das Layout */

.container {
  /*max-width: 1200px; /* Maximale Breite */
  margin: 0 auto; /* Zentriert den Container */
  /*padding: 0 var(--base-spacing); /* Innenabstand */
  text-align: var(--main-text-align);


}

.grid-limited {
width: 1200px;
margin: 0 auto;
}

/* Grid-Layout vorlage*/

.grid-container {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-three); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(3, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-item {
  background-color: transparent; /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}


/* 4. CSS SECTION / (Anderes Wort  z.B Ground Zero / Playground) DEFINITION


/* 4.1 Navigation definition */

/* Grundlegende Navigation (standart ist alles nach links ausgerichtet) */

nav {
  display: flex;
  align-items: center;
  z-index: 9999;

  /* eventuell auf einen standar wert setzen oder unten im echten stylesheet festlegen */
  padding: var(--base-spacing) 0;
  background-color: var(--primary-color);
}



nav ul {
  display: flex; /* evtl. interessant für horizontales design*/
  list-style: none;
  margin: 0;
  padding: 0;
}


/* 4.1.2 Desktop Nav */


/* 4.1.3 Mobile Nav */

/* Burger Menu */

/* Burger Menu Container */

.burger-menu-container {
display: none; /* Standardmäßig unsichtbar */
padding: var(--base-spacing);
}

/* Burger-Menü Icon */
.burger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
}

.burger-menu div {
  background-color: var(--secondary-color);
  height: 4px;
  width: 100%;
}

@media (max-width: 860px) {
  nav ul.container_nav {
    display: none; /* Standardmäßig ausblenden */
    flex-direction: column;
    width: 100%;
    text-align: center;
    background-color: var(--primary-color);
    position: absolute;
    top: 60px; /* Position unter der Navigation */
    left: 0;
    right: 0;
    padding: var(--base-spacing);
    gap: var(--base-spacing);
  }

  nav ul.container_nav.show {
    display: flex; /* Menü anzeigen */
  }

  .burger-menu-container {
    display: inline-block; /* Burger-Menü anzeigen */

  }
}





/* 5. LAYOUT CONFIGURATION */


/* 5.1 Nav layout configuration */


nav.rightWing {
    justify-content: space-between;
    flex-direction: row;
}

nav.leftWing {
    justify-content: space-between;
    flex-direction: row-reverse;
}

nav.centerRightWing {
    justify-content: center;
    flex-direction: row;
}

nav.centerLeftWing {
    justify-content: center;
    flex-direction: row-reverse;
}

nav.topWing {
      justify-content: center;
      flex-direction: column;
}

nav.bottomWing {
      justify-content: center;
      flex-direction: column-reverse;
}



/* 5.2 Nav position konfiguration */


 nav.fixed {
   position: fixed;
   width: 100%;
 }

 nav.normal {
   position: relative;
   width: auto;
 }


 /* 5.3 Bionic Nav konfiguration */






 /* Basis-Styles für den Container und Items */
 .container_nav {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .item {
   margin: 0.25rem;

   text-align: center;
 }



 /* Beispielregeln: Je nach Anzahl der Elemente werden unterschiedliche Hintergründe und Styles verwendet */

 /* Wenn genau 1 Element vorhanden ist */
 .container_nav.elements-1 .item {

   font-size: 16px;
   padding: var(--text-size);
 }

 /* Wenn genau 2 Elemente vorhanden sind */
 .container_nav.elements-2 .item {

   font-size: var(--text-size);
   padding: 16px;
 }

 /* Wenn genau 3 Elemente vorhanden sind */
 .container_nav.elements-3 .item {

   font-size: var(--text-size);
   padding: 16px;
 }

 /* Wenn genau 4 Elemente vorhanden sind */
 .container_nav.elements-4 .item {

  font-size: var(--text-size);
   padding: 16px;
 }

 /* Wenn genau 5 Elemente vorhanden sind */
 .container_nav.elements-5 .item {

   font-size: var(--text-size);
   padding: 16px;
 }

 /* Wenn genau 6 Elemente */
 .container_nav.elements-6 .item {

  font-size: var(--text-size);
   padding: 14px;
 }

 /* Wenn genau 7 Elemente vorhanden sind */
 .container_nav.elements-7 .item {

  font-size: var(--text-size);
   padding: 14px;
 }

 /* Genau 8 Elemente */
 .container_nav.elements-8 .item {

   font-size: var(--text-size);
   padding: 14px;
 }

 /* Genau 9 Elemente */
 .container_nav.elements-9 .item {

   font-size: var(--text-size);
   padding: 14px;
 }

 /* Wenn genau 10 Elemente vorhanden sind */
 .container_nav.elements-10 .item {

   font-size: 15px;
   padding: 14px;
 }

 /* Wenn genau 11 Elemente vorhanden sind */
 .container_nav.elements-11 .item {

   font-size: 14.5px;
   padding: 14px;
 }

 /* Wenn genau 12 Elemente vorhanden sind */
 .container_nav.elements-12 .item {

   font-size: 14px;
   padding: 12px;
 }

 /* Wenn 13 oder mehr Elemente vorhanden sind – diese Regel gilt dann für alle Fälle ab 13 */
 .container_nav.elements-13 .item {

   font-size: 12px;
   padding: 8px;
 }

 /* Optionale Standardstile für andere Fälle können hier definiert werden */





 /* RESPONSIVE NAV ITEMS */

 @media (max-width: 1350px) {





   /* Genau 11 Elemente */
 .container_nav.elements-11 .item {

   font-size: 13.5px;
   padding: 8px;
 }


   /* Genau 12 Elemente */
 .container_nav.elements-12 .item {

   font-size: 13px;
   padding: 7px;
 }


 /* Ab 13 Elementen */
 .container_nav.elements-13 .item {

   font-size: 11px;
   padding: 4px;
 }

 }


 @media (max-width: 1150px) {


   /* Genau 9 Elemente */
 .container_nav.elements-9 .item {

   font-size: 15px;
   padding: 8px;
 }

 /* Genau 10 Elemente */
 .container_nav.elements-10 .item {

   font-size: 13px;
   padding: 6px;
 }

 }



 @media (max-width: 1100px) {

 /* Genau 8 Elemente */
 .container_nav.elements-8 .item {

   font-size: 15px;
   padding: 12px;
 }






     /* Genau 11 Elemente */
 .container_nav.elements-11 .item {

   font-size: 12px;
   padding: 4px;
 }


     /* Genau 12 Elemente */
 .container_nav.elements-12 .item {

   font-size: 12px;
   padding: 3px;
 }


 /* Ab 13 Elementen */
 .container_nav.elements-13 .item {

   font-size: 10px;
   padding: 2px;
 }
 }


 @media (max-width: 950px) {

   /* Genau 8 Elemente */
 .container_nav.elements-8 .item {

   font-size: 14px;
   padding: 4px;
 }

     /* Genau 9 Elemente */
 .container_nav.elements-9 .item {

   font-size: 13px;
   padding: 2px;
 }



   /* Wenn genau 10 Elemente vorhanden sind */
 .container_nav.elements-10 .item {

   font-size: 12px;
   padding: 0px;
 }


       /* Genau 11 Elemente */
 .container_nav.elements-11 .item {

   font-size: 11px;
   padding: 0px;
 }


       /* Genau 12 Elemente */
 .container_nav.elements-12 .item {

   font-size: 10px;
   padding: 0px;
 }


   /* Ab 13 Elementen */
 .container_nav.elements-13 .item {

   font-size: 8px;
   padding: 0px;
 }

 }


 @media (max-width: 1136px) {

  .container_nav.elements-7 .item {
     font-size: 12px;

}
 }


 @media (max-width: 950px) {

 /* Genau 7 Elemente */
 .container_nav.elements-7 .item {

   font-size: 12px;
   padding: 10px;
 }

 }


 @media (max-width: 878px) {

 /* Genau 7 Elemente */
 .container_nav.elements-7 .item {

   font-size: 11px;
   padding: 10px;
 }

 }












/* 7. CSS Element Definition */

/* 7.1 Buttons */

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  /*margin: var(--base-spacing);*/
  display: inline-block;
  padding: calc(var(--base-spacing) * 0.5) calc(var(--base-spacing) * 1);
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}




















button:hover {
  background-color: var(--secondary-color);
  color: #000;
}



/* 7.1.1 Anchor as button */

.button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  margin: var(--base-spacing);
  padding: var(--base-spacing) calc(var(--base-spacing) * 4);
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.button:hover {
  background-color: var(--secondary-color);
  color: #000;
}


/* 7.2 Inputs */

input, textarea, select {
  width: 100%;
  padding: var(--base-spacing);
  margin: var(--base-spacing) 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary-color);
  outline: none;
}



/* 8. Optional Elements */



/* 9. Basic Animations */




/*** END OF BASE ***/


/* The Two below might rather be at style.css */

nav a {
  color: var(--secondary-color);
  text-decoration: none;
  padding: var(--base-spacing);
  font-weight: 600;
}

nav a:hover {
  background-color: var(--hover-color);
}

/** STYLE.CSS **/

/* Sections and preset Sections */

section {
  padding: 60px 0px;          /* 60px oben/unten, 20px seitlich */
  margin: 0 auto 0px auto;     /* Zentriert und 40px Abstand unten || section margin */
         /* Maximale Breite für bessere Lesbarkeit */
}

/* preset, um jeder section einer alternierende hintergrundfarbe zu geben */

.mainSection:nth-child(even) {
  background-color: var(--alt-background-color);

}

.mainSection:nth-child(odd) {
  background-color: var(--background-color);
}


.landingPage {
  padding-top: 200px;
  min-height: 100vh; /* volle viewport als höhe */
  width: 100%;

  background-image: url('https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-image: url('img/bg-made3.png');
  background-size: cover;       /* Bild füllt den Container, ohne das Seitenverhältnis zu verlieren */
  background-position: center;  /* Bild zentriert im Container */
  background-repeat: no-repeat; /* Verhindert Wiederholungen */
  /* Optional: für Parallax-Effekt */
  background-attachment: fixed;

}


.mainSection {
  max-width: var(--mainSection-maxWidth); /* Maximale Breite */
  height: auto;
  padding: var(--base-spacing);
}



/* Grid Layouts for Sections */


/* 1. Landing Page */

.grid-container-landing {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-one); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(3, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-container-landing .grid-item {
  background-color: lightgray; /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}

@media screen and (max-width: 950px) {
  .landingPage {
    padding-top: 200px;
    min-height: 100vh; /* volle viewport als höhe */
    width: 100%;

    background-image: url('https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    background-image: url('img/bg-made3.png');
    background-size: cover;       /* Bild füllt den Container, ohne das Seitenverhältnis zu verlieren */
    background-position: right;  /* Bild zentriert im Container */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    /* Optional: für Parallax-Effekt */
    background-attachment: fixed;

  }
}



/* 2. Page 1 */

.grid-container-pagename1 {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-two); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(1, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-container-pagename1 .grid-item {
  /*background-color: var(--article-background-color); /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}


/* 2. Page 2 */

.grid-container-pagename2 {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-three); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(2, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-container-pagename2 .grid-item {
  /*background-color: var(--article-background-color); /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}




/* 2. Page 3 */

.grid-container-pagename3 {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-three); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(3, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-container-pagename3.grid-item {
  background-color: lightgray; /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}


/* 2. Page 4 */

.grid-container-pagename4 {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-three); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(3, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-container-pagename4.grid-item {
  background-color: lightgray; /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}


/* 2. Page 5 */

.grid-container-pagename5 {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-four); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(1, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-container-pagename5.grid-item {
  background-color: lightgray; /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}




/* 2. Page 6 */

.grid-container-pagename6 {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-three); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(1, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-container-pagename6.grid-item {
  background-color: lightgray; /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}





/* 2. Page 7 */

.grid-container-pagename7 {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-four); /* 3 gleichmäßig breite Spalten */
  grid-template-rows: repeat(2, 1fr);
  gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
}

.grid-container-pagename7 .grid-item {
  /*background-color: var(--article-background-color); /* Hintergrundfarbe für jedes Grid-Item */
  padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
}











nav {
  height: var(--nav-height);
/* THOESE ARE DOUBLED, because they're already above */
  padding: var(--base-spacing) 0;
  background-color: var(--primary-color);
}

footer {
  height: var(--footer-height);
  padding: var(--base-spacing) 0;
  background-color: var(--primary-color);
  background-color: #000;
}







/* 6. CSS RESPONSIVE / MOBILE  SECTION / (Anderes Wort) DEFINITION */

@media screen and (max-width: 768px) {
  .container {
  max-width: 100%;
}

#section2 {
  height: 1080px!important;

}


#section2 h2 {
  display: none;
}


/* Grid-Layout */
.grid-container {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-one); /* 3 gleichmäßig breite Spalten */
  gap: var(--base-spacing); /* Abstand zwischen den Grid-Items */
}


.grid-container-pagename1 {
  display: grid; /* Aktiviert das Grid-Layout */
  grid-template-columns: var(--grid-one); /* 3 gleichmäßig breite Spalten */
  gap: var(--base-spacing); /* Abstand zwischen den Grid-Items */

}


#section2 .col-span-1 {
  margin-top: 0!important;
  margin-bottom: 100px;
}

}




/* 7. INDIVIDUAL STYLES */

/* SECTION 1 */

.logo a img {
width: 320px;
padding: var(--base-spacing);
}

nav a {
  font-size: 4px;
  letter-spacing: 1.2px;
}

nav .special-item {
  font-size: 11px!important;
  background-color: transparent;

  border-radius: 10px;
  padding: .3rem .6rem!important;
  font-weight: 600;
  cursor: pointer;
  transition: .3s ease;

  box-shadow:
     inset 0 1px 3px   rgba(255,255,255,.60),   /* feiner oberer Lichtsaum   */
     inset 0 -1px 4px  rgba(255,255,255,.35),   /* feiner unterer Lichtsaum  */
     inset 0 0 12px 8px rgba(255,255,255,.20),  /* weicher Flächen‑Glow      */
           0 0 10px 4px rgba(0,0,0,.45);        /* subtile äußere Abdunklung */
   transition: .3s;
}

#section1 h1{
  font-family: 'Michroma', sans-serif;
  font-size: 50px;
}

#section1 p {
  font-family: 'Michroma', sans-serif;
  font-size: 25px;
  padding-bottom: 80px;
}

#section1 #appointment_btn {
  background-color: transparent;

  border-radius: 10px;
  padding: .6rem 3rem;
  font-weight: 600;
  cursor: pointer;
  transition: .3s ease;

  box-shadow:
     inset 0 1px 3px   rgba(255,255,255,.60),   /* feiner oberer Lichtsaum   */
     inset 0 -1px 4px  rgba(255,255,255,.35),   /* feiner unterer Lichtsaum  */
     inset 0 0 12px 8px rgba(255,255,255,.20),  /* weicher Flächen‑Glow      */
           0 0 10px 4px rgba(0,0,0,.45);        /* subtile äußere Abdunklung */
   transition: .3s;
}


#section1 #appointment_btn:hover {
  background: #572b9e;

}

/* SECTION 2 */


section h1 {
  font-size: 36px;
padding-top: 80px;
padding-bottom: 60px;

}

#section2 {
  height: 780px;
}

#section2 img {
width: 400px;
}




/* ────────── Grid‑Item‑Utilities (neu) ──────────
   Einfach auf das Element legen, damit es die passende Breite einnimmt. */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }

/* ────────── (Optional) Fallback/Füller ────────── */
.auto { grid-column: auto; } /* lässt das Item völlig frei platzieren */




.grid-container-pagename1 .grid-item {
  text-align: left;
}


/* SECTION 3 */


#section3 {
  background-image: url("img/bg-made2.png");

  background-size: cover;       /* Bild füllt den Container, ohne das Seitenverhältnis zu verlieren */
  background-position: center;  /* Bild zentriert im Container */
  background-repeat: no-repeat; /* Verhindert Wiederholungen */
  filter: brightness(120%);
  height: 1080px;

}


/* ──────────────────────────────────────────────
   3. PRESET „PRICING CARD“
   Struktur: Header – Body – Footer
   ────────────────────────────────────────────── */

.pricing-card {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header|Body|Footer */
  /*background: var(--article-background-color);*/
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  max-width: 380px;   /* kannst du anpassen oder via Utility überschreiben */
  height: 650px;
  border: .5px solid #36454F;
}


.euro {
  color: grey;
  padding: 3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 18px;
}


.bg-fade {
  background: rgb(0 0 0 / 1);          /* voll deckend */
  color:#fff;
  transition: .6s;
}

.bg-fade:hover {
  background: rgb(0 0 0 / 0);        /* 25 % Deckkraft */
  filter: brightness(120%);
}

.pricing-card__head,
.pricing-card__body,
.pricing-card__foot { padding: calc(var(--base-spacing) * 1); }

.pricing-card__head {
  /*background: var(--primary-color);*/
  color: var(--secondary-color);
  text-align: left;
}

.pricing-card__head h2 {
}

.pricing-card__head h3 {
  color: grey;
  font-weight: normal;
}

.pricing-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--base-spacing);
  align-items: center;
  justify-content: center;
}

.pricing-card__foot {
  /*background: var(--alt-background-color);*/
  text-align: center;
}


.pricing-card a {
    display:inline-flex;           /* wie inline-block, plus zentrieren */
    align-items:center;
    justify-content:center;
    position:relative;
    vertical-align:middle;         /* sitzt wie ein Button in Zeilen */
    box-sizing:border-box;
    text-align:center;
    line-height:normal;            /* ähnlich <button> */            /* bricht nicht mitten im Label */
    user-select:none;              /* wie Button: text nicht markierbar */
    -webkit-user-drag:none;
    padding: 1.19rem 8.87rem;
}

/* Beispiel‑Button inside Card */
.pricing-card__btn {
  background-color: transparent;

  border-radius: 10px;
  padding: 1.25rem 9rem;
  font-weight: 600;
  cursor: pointer;
  transition: .3s ease;

  box-shadow:
     inset 0 1px 3px   rgba(255,255,255,.60),   /* feiner oberer Lichtsaum   */
     inset 0 -1px 4px  rgba(255,255,255,.35),   /* feiner unterer Lichtsaum  */
     inset 0 0 12px 8px rgba(255,255,255,.20),  /* weicher Flächen‑Glow      */
           0 0 10px 4px rgba(0,0,0,.45);        /* subtile äußere Abdunklung */
   transition: .3s;

}

.pricing-card__btn:hover {
  background: #572b9e;

}







/* Grundtable‑Layout */
.pricing-table{
  max-width:220px;
  border-collapse:collapse;
  font-family:var(--font-family);
  color:var(--text-color);
  overflow:hidden;
}

.pricing-table td{
  padding: calc(var(--base-spacing) * .8) calc(var(--base-spacing) * 2.1);
}


.pricing-table .price{
  font-size:2rem;
  font-weight:700;
  background:var(--alt-background-color);
}


/* Haken / X Dekoration */
.check::before{
  content:"✓";
  color: green;
  margin-right:.5em;
  font-weight:700;
}
.cross::before{
  content:"✕";
  color: red;
  margin-right:.5em;
  font-weight:700;
}

/* Übersichtlichere Feature‑Spalte */
.feature{ text-align:left; }








/* ───────── 1. MEDIUM Screens ≤ 1200 px ───────── */
@media (max-width:1240px){

  /* zentrierte Container nicht mehr fest 1200 px breit */
  .grid-limited{
    max-width:100%;
    width:100%;
    padding:0 var(--base-spacing);
  }

  /* Drei‑Spalten‑Grids → Zwei Spalten */
  .grid-container,
  .grid-container-pagename1,
  .grid-container-pagename2,
  .grid-container-pagename3,
  .grid-container-pagename4{
    grid-template-columns:var(--grid-two);
  }
}

/* ───────── 2. SMALL Screens ≤ 768 px ───────── */
@media (max-width:768px){

  /* Logo schrumpfen */
  .logo a img{ width:200px; }

  /* alle Content‑Grids → Eine Spalte */
  .grid-container,
  .grid-container-pagename1,
  .grid-container-pagename2,
  .grid-container-pagename3,
  .grid-container-pagename4{
    grid-template-columns:var(--grid-one);
  }

  /* pricing‑cards flüssig & auto‑height */
  .pricing-card{
    max-width:100%;
    height:auto;
  }
  .pricing-card__btn{
    width:100%;
    padding:1rem 2rem;         /* weniger horizontaler Platz */
  }

  /* Full‑width Sections anpassen */
  #section3{
    height:auto;               /* fixe 1080 px weg */
    padding:60px 0;
  }
  .landingPage{ padding-top:120px; }
}



/* === Mobile-Fix: iOS/Android – fixed + backdrop-filter => Black Screen === */
@media (max-width: 1024px){
  .landingPage{
    /* Parallax auf Mobile aus – Bild bleibt sichtbar */
    background-attachment: scroll !important;
    background-position: center !important; /* statt right */
  }

  /* Die Overlay-Ebene mit backdrop-filter auf Phones deaktivieren */
  .reactive-glow::before{
    content: none !important;
  }
}

/* Zusätzlicher iOS-Fallback (falls nötig) */
@supports (-webkit-overflow-scrolling: touch){
  .landingPage{ background-attachment: scroll !important; }
}


/* ───────── 3. X‑SMALL Phones ≤ 480 px ───────── */
@media (max-width:480px){

  /* Headings verkleinern */
  h1{ font-size:1.5rem; }
  h2{ font-size:1.2rem; }
  h3{ font-size:1rem; }

  /* Buttons kompakter */
  button,
  .pricing-card__btn{
    font-size:.875rem;
    padding:.75rem 1.25rem;
  }
}

/* SECTION 4 */

#section4 {
  height: 1050px;
}


.grid-container-pagename4 {

}

.grid-container-pagename4 .grid-item {
  padding: 0;

}

.grid-container-pagename4 .grid-item img{
 border-radius: 5px;

}




/* SECTION 5 */




#section5 {

  height: 620px;
}

.grid-container-pagename5 {
}

.grid-container-pagename5 .grid-item {
  background-color: #000;
  height: 200px;
  border-radius: 10px;
  display: flex;
  grid-column: auto;


  background: rgba(0, 0, 0, 0.45);                     /* Fläche */
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);  /* Safari-Fallback */
  border: 1px solid rgba(255, 255, 255, 0.06);         /* Highlight */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.60);          /* Shadow */
  border-radius: 12px;
  transition: background 0.3s ease,                    /* Sanfte Überblendung */
              box-shadow 0.3s ease,
              transform 0.3s ease,
              border-color 0.3s ease;

}



.grid-container-pagename5 .grid-item:hover {
background: rgba(0, 0, 0, 0.55);                     /* Etwas weniger Durchsicht */
box-shadow: 0 6px 40px rgba(0, 0, 0, 0.70);          /* Stärkere Tiefe */
transform: translateY(-4px);                         /* Leichte Anhebung */
border-color: rgba(255, 255, 255, 0.12);

}

.grid-container-pagename5 .item-bg {
  background-image: url("img/bg-made2 - Kopie.png");
  background-position: right bottom;
  transition: .3s;
  display: flex;
  align-items: center;
}

.grid-container-pagename5 .item-bg:hover {
  background-image: url("img/bg-made2 - Kopie.png");
  background-position: bottom;
}

.grid-container-pagename5 .item-bg h2 {

}

.grid-container-pagename5 .item-bg a{
  margin-top: 100px;
width: 100%;
padding: 7px;
text-align: center;
color: #FFF;
font-weight: bold;

background-color: transparent;

border-radius: 10px;
font-weight: 100;
cursor: pointer;
transition: .3s ease;

box-shadow:
   inset 0 1px 3px   rgba(255,255,255,.60),   /* feiner oberer Lichtsaum   */
   inset 0 -1px 4px  rgba(255,255,255,.35),   /* feiner unterer Lichtsaum  */
   inset 0 0 12px 8px rgba(255,255,255,.20),  /* weicher Flächen‑Glow      */
         0 0 10px 4px rgba(0,0,0,.45);        /* subtile äußere Abdunklung */
 transition: .3s;
}

.grid-container-pagename5 .grid-item .iconCircle {
width: 50px;
height: 50px;
background-color: #5319b0;
border-radius: 50%;
}

.grid-container-pagename5 .grid-item .fa-solid, .fa-regular {
  font-size: 35px;
  padding-left: 8px;
  padding-top: 8px;
}


.grid-container-pagename5 .grid-item .iconCircleOne .fa-clipboard-list {
padding-left: 12px;
padding-top: 7px;
}


.grid-container-pagename5 .grid-item .iconCircleTwo .fa-laptop-code {
padding-left: 5px;
padding-top: 9px;
font-size: 32px;
}


.grid-container-pagename5 .grid-item .iconCircleThree .fa-bolt {
padding-left: 11px;
padding-top: 9px;
font-size: 32px;
}






.grid-container-pagename5 .grid-item {
  display: flex;            /* Stapelt Kinder vertikal              */
  flex-direction: column;
  align-items: flex-start;  /* Links ausrichten                      */
  text-align: left;         /* Text links­bündig                     */
}

/* Abstände zwischen den Elementen (optional) */
.grid-container-pagename5 .grid-item > * {
  margin: 0 0 0.4rem 0;     /* Abstand unten, sonst 0                */
}



.grid-container-pagename5 .grid-item h2 {
font-size: 20px;
}

.grid-container-pagename5 .grid-item p {
 font-size: 12px;
}





#section6 {
height: 750px;
background-image: url('img/bg-made3.png');
background-size: cover;       /* Bild füllt den Container, ohne das Seitenverhältnis zu verlieren */
background-position: right;  /* Bild zentriert im Container */
background-repeat: no-repeat; /* Verhindert Wiederholungen */
/* Optional: für Parallax-Effekt */
background-attachment: fixed;
}


@media (max-width: 768px){


  #section6 {
  height: 750px;
  background-image: url('img/mobile-bg-made.png');
  background-position: top;
  background-attachment: scroll;         /* iOS-Fix */
  background-position: top left;
  }
}


#section6 input, textarea {
  background-color: transparent;
  border: 3px solid #FFF;
  border-top: none;
  border-left: none;
  border-right: none;
  color: #FFF;
  resize: none;
}


#section6 .contact-col-1 {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: .5rem;

}


#section6 .contact-col-1:nth-child(1) {
  align-items: flex-start;   /* horizontal links ausrichten  */
  text-align: left;          /* Text ebenfalls linksbündig   */
}

/* Rechte Kachel → Elemente an rechten Rand */
#section6 .contact-col-1:nth-child(3) {
  align-items: flex-end;     /* horizontal rechts ausrichten */
  text-align: right;         /* Text ebenfalls rechtsbündig  */
}


#section6 .contact-col-1 .fa-solid {
  font-size: 40px;
  padding: 20px;
  padding-bottom: 40px;
  padding-top: 40px;
}


#section6 .contact-col-1 .fa-brands {
  font-size: 46px;
  padding: 20px;
  padding-bottom: 40px;
  padding-top: 40px;
}


#section6 .contact-col-1 .fa-instagram {
  font-size: 50px;
  margin-left: 2px;
}


#section6 .contact-col-1 .fa-paper-plane {
  font-size: 46px;
  margin-left: 2px;
}

#section6 .contact-col-1 .fa-code {
  font-size: 44px;
  margin-right: -10px;
}


#section6 .contact-col-1 .fa-circle-play {
  font-size: 46px;
}


/* FOOTER */

#footerTwo {
  display: none;
}

footer .grid-item {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}



footer .footer-info-item {
  display: flex;
    justify-content: center;
    align-items: center;
}

footer .footer-info-item a{
  padding: 8px;
text-decoration: none;
list-style: none;
transition: .3s;
}


footer .footer-info-item a:hover{
opacity: .7;
}


footer .grid-item img {
  width: 400px;
}


footer p {
  font-size: 12px;
}




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

  footer {
    display: none;
  }

  #footerTwo {
    background-color: #000;
    height: 120px;
    width: 100%;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footerTwo .grid-container-pagename8 {
    display: grid; /* Aktiviert das Grid-Layout */
    grid-template-columns: var(--grid-one); /* 3 gleichmäßig breite Spalten */
    grid-template-rows: repeat(1, 1fr);
    gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
  }

  #footerTwo .grid-container-pagename8 .grid-item{
      /*background-color: var(--article-background-color); /* Hintergrundfarbe für jedes Grid-Item */
      padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */

  }



  #footerTwo img{
    width: 260px;
  }


  .grid-container-pagename7 {
    display: grid; /* Aktiviert das Grid-Layout */
    grid-template-columns: var(--grid-one); /* 3 gleichmäßig breite Spalten */
    grid-template-rows: repeat(6, 1fr);
    gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
  }

  .grid-container-pagename7 .grid-item {
    /*background-color: var(--article-background-color); /* Hintergrundfarbe für jedes Grid-Item */
    padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
  }

}



#subfooter {
  height: 50px;
  background-color: #1f2837;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}








/* ─── Reaktiver Lichtteppich ───────────────────────── */
.reactive-glow{ position:relative; overflow:hidden; }

/* Drei weiche Spots, jeweils leicht versetzt */
.reactive-glow::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;

  background:
    radial-gradient(180px at var(--mx) var(--my),
      rgba(255,255,255,.35)  0%,
      rgba(255,255,255,.00) 80%),

    radial-gradient(240px at calc(var(--mx) + 140px) calc(var(--my) - 120px),
      rgba(255,255,255,.22)  0%,
      rgba(255,255,255,.00) 80%),

    radial-gradient(260px at calc(var(--mx) - 160px) calc(var(--my) + 110px),
      rgba(255,255,255,.18)  0%,
      rgba(255,255,255,.00) 80%);

  mix-blend-mode:overlay;        /* hebt Helligkeit + Kontrast */
  backdrop-filter:brightness(1.3) contrast(1.1);
  -webkit-backdrop-filter:brightness(1.3) contrast(1.1);
  will-change:background;
  transition:background .15s;
}




/* ▸▸ Image-Overlay ▸▸ */
.image-card{position:relative;cursor:pointer;overflow:hidden; }
.image-card img{display:block;width:100%;height:100%;object-fit:cover;transition: .3s;}
.image-card .overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:.5rem;text-align:center;padding:1.5rem;
  background:rgba(0,0,0,.65);color:#fff;
  opacity:0;transform:scale(1.05);
  transition: .35s ease;
}
.image-card:hover .overlay,
.image-card.open .overlay{opacity:1;transform:scale(1);}

/* optional leichte Zoom-Animation fürs Bild */
.image-card:hover img,
.image-card.open img{transform:scale(1.1);}









.image-card:hover img {
  filter: grayscale(0%);
  transition: .3s;
}




/* === PROJECT SLIDER =================================================== */
#section4{ position:relative; }           /* Anker für die Pfeile            */

.project-tabs{
  display:flex;justify-content:center;gap:1.2rem;margin-bottom:1.5rem;
}
.project-tab{
  background:none;border:none;color:var(--secondary-color);
  padding:.5rem 1.25rem;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;transition:.3s;
}
.project-tab.active,
.project-tab:hover{ border-color:var(--secondary-color); }

.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--secondary-color);
  font-size:2.5rem;cursor:pointer;z-index:10;
}
.slider-left { left:1rem;  }
.slider-right{ right:1rem; }

#section4 .grid-container-pagename4 .grid-item{ display:none; }
/* Sichtbarkeit pro „Seite“ / Slide */
#section4 .grid-container-pagename4[data-current="0"] .grid-item[data-slide="0"],
#section4 .grid-container-pagename4[data-current="1"] .grid-item[data-slide="1"],
#section4 .grid-container-pagename4[data-current="2"] .grid-item[data-slide="2"]{
  display:block;
}


/* === SLIDE-ANIMATION ================================================== */

/* Keyframes */
@keyframes slideInRight   { from{opacity:0;transform:translateX(60px);}  to{opacity:1;transform:translateX(0);} }
@keyframes slideOutLeft   { from{opacity:1;transform:translateX(0);}     to{opacity:0;transform:translateX(-60px);} }
@keyframes slideInLeft    { from{opacity:0;transform:translateX(-60px);} to{opacity:1;transform:translateX(0);} }
@keyframes slideOutRight  { from{opacity:1;transform:translateX(0);}     to{opacity:0;transform:translateX(60px);} }

/* Helfer-Klassen   – werden von JS gesetzt */
.slide-in-right  { animation:slideInRight  .55s ease both; }
.slide-out-left  { animation:slideOutLeft  .55s ease both; }
.slide-in-left   { animation:slideInLeft   .55s ease both; }
.slide-out-right { animation:slideOutRight .55s ease both; }

/* Basiszustände */
#section4 .grid-item{ transition:none; }   /* verhindert Blinken bei Tempo-Klicks */
#section4 .grid-item:not(.visible){ display:none; }


nav .logo-mobile {
  display: none;
}

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

  nav .logo {
    display: none;
  }

  nav .logo-mobile {
    display: block;
  }

nav .logo-mobile img {
  width: 170px;
  padding: var(--base-spacing);
}

}



@media screen and (max-width: 1100px) {
  #section1 h1{
    font-family: 'Michroma', sans-serif;
    font-size: 40px;
    padding-bottom: 40px;
  }

  #section1 p {
    font-family: 'Michroma', sans-serif;
    font-size: 20px;
  }
}


@media screen and (max-width: 736px) {
  #section1 h1{
    font-family: 'Michroma', sans-serif;
    font-size: 30px;
    padding-bottom: 30px;

  }

  #section1 p {
    font-family: 'Michroma', sans-serif;
    font-size: 15px;
  }
}


@media screen and (max-width: 600px) {
  #section1 h1{
    font-family: 'Michroma', sans-serif;
    font-size: 25px;
    padding-bottom: 30px;

  }

  #section1 p {
    font-family: 'Michroma', sans-serif;
    font-size: 12.5px;
  }
}


@media screen and (max-width: 435px) {
  #section1 h1{
    font-family: 'Michroma', sans-serif;
    font-size: 20px;
    padding-bottom: 30px;

  }

  #section1 p {
    font-family: 'Michroma', sans-serif;
    font-size: 12.5px;
  }
}





@media screen and (max-width: 1280px) {
  #section3 {

  }

  #section3 .pricing-card {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header|Body|Footer */
    /*background: var(--article-background-color);*/
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    max-width: 342px;   /* kannst du anpassen oder via Utility überschreiben */
    height: 585px;
    border: .5px solid #36454F;
  }


  .pricing-card a {
      display:inline-flex;           /* wie inline-block, plus zentrieren */
      align-items:center;
      justify-content:center;
      position:relative;
      vertical-align:middle;         /* sitzt wie ein Button in Zeilen */
      box-sizing:border-box;
      text-align:center;
      line-height:normal;            /* ähnlich <button> */            /* bricht nicht mitten im Label */
      user-select:none;              /* wie Button: text nicht markierbar */
      -webkit-user-drag:none;
      padding: .8rem 4.87rem;
  }


  .pricing-card__btn {
    background-color: transparent;

    border-radius: 10px;
    padding: .9rem 4rem;
    margin-right: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;

    box-shadow:
       inset 0 1px 3px   rgba(255,255,255,.60),   /* feiner oberer Lichtsaum   */
       inset 0 -1px 4px  rgba(255,255,255,.35),   /* feiner unterer Lichtsaum  */
       inset 0 0 12px 8px rgba(255,255,255,.20),  /* weicher Flächen‑Glow      */
             0 0 10px 4px rgba(0,0,0,.45);        /* subtile äußere Abdunklung */
     transition: .3s;

  }
}


@media screen and (max-width: 1280px) {
  #section3 {
  height: 1680px;
  }

  #section3 .pricing-card {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header|Body|Footer */
    /*background: var(--article-background-color);*/
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    max-width: 342px;   /* kannst du anpassen oder via Utility überschreiben */
    height: 585px;
    border: .5px solid #36454F;
    margin: 0 auto;
  }

}


@media screen and (max-width: 768px) {
  #section3 {
  height: 2420px;
  background-image: url('img/mobile-bg-made.png');
  background-position: top;
  background-attachment: scroll;         /* iOS-Fix */
  background-position: top left;
  }

  #section3 .pricing-card {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header|Body|Footer */
    /*background: var(--article-background-color);*/
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    max-width: 380px;   /* kannst du anpassen oder via Utility überschreiben */
    height: 650px;
    border: .5px solid #36454F;
    margin: 0 auto;
  }

}


@media screen and (max-width: 435px) {
  #section3 {
  height: 2420px;
  }

  #section3 .pricing-card {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header|Body|Footer */
    /*background: var(--article-background-color);*/
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    max-width: 342px;   /* kannst du anpassen oder via Utility überschreiben */
    height: 585px;
    border: .5px solid #36454F;
    margin: 0 auto;
  }


  .pricing-card__btn {
    background-color: transparent;

    border-radius: 10px;
    padding: .9rem 6rem;
    margin-right: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
    width: auto;

    box-shadow:
       inset 0 1px 3px   rgba(255,255,255,.60),   /* feiner oberer Lichtsaum   */
       inset 0 -1px 4px  rgba(255,255,255,.35),   /* feiner unterer Lichtsaum  */
       inset 0 0 12px 8px rgba(255,255,255,.20),  /* weicher Flächen‑Glow      */
             0 0 10px 4px rgba(0,0,0,.45);        /* subtile äußere Abdunklung */
     transition: .3s;

  }
}


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

  #section4 {
    height: 1050px;
  }

  #section4 .grid-limited {
  width: 1000px;
  }





  /* ▸▸ Image-Overlay ▸▸ */
  .image-card{position:relative;cursor:pointer;overflow:hidden; }
  .image-card img{display:block;width:100%;height:100%;object-fit:cover;transition: .3s;}
  .image-card .overlay{
    position:absolute;inset:0;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:.5rem;text-align:center;padding:1.5rem;
    background:rgba(0,0,0,.65);color:#fff;
    opacity:0;transform:scale(1.05);
    transition: .35s ease;
  }
  .image-card:hover .overlay,
  .image-card.open .overlay{opacity:1;transform:scale(1);}

  /* optional leichte Zoom-Animation fürs Bild */
  .image-card:hover img,
  .image-card.open img{transform:scale(1.1);}









  .image-card:hover img {
    filter: grayscale(0%);
    transition: .3s;
  }




  /* === PROJECT SLIDER =================================================== */
  #section4{ position:relative; }           /* Anker für die Pfeile            */

  .project-tabs{
    display:flex;justify-content:center;gap:1.2rem;margin-bottom:1.5rem;
  }
  .project-tab{
    background:none;border:none;color:var(--secondary-color);
    padding:.5rem 1.25rem;font-weight:600;cursor:pointer;
    border-bottom:2px solid transparent;transition:.3s;
  }
  .project-tab.active,
  .project-tab:hover{ border-color:var(--secondary-color); }

  .slider-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--secondary-color);
    font-size:2.5rem;cursor:pointer;z-index:10;
  }
  .slider-left { left:1rem;  }
  .slider-right{ right:1rem; }

  #section4 .grid-container-pagename4 .grid-item{ display:none; }
  /* Sichtbarkeit pro „Seite“ / Slide */
  #section4 .grid-container-pagename4[data-current="0"] .grid-item[data-slide="0"],
  #section4 .grid-container-pagename4[data-current="1"] .grid-item[data-slide="1"],
  #section4 .grid-container-pagename4[data-current="2"] .grid-item[data-slide="2"]{
    display:block;
  }


  /* === SLIDE-ANIMATION ================================================== */

  /* Keyframes */
  @keyframes slideInRight   { from{opacity:0;transform:translateX(60px);}  to{opacity:1;transform:translateX(0);} }
  @keyframes slideOutLeft   { from{opacity:1;transform:translateX(0);}     to{opacity:0;transform:translateX(-60px);} }
  @keyframes slideInLeft    { from{opacity:0;transform:translateX(-60px);} to{opacity:1;transform:translateX(0);} }
  @keyframes slideOutRight  { from{opacity:1;transform:translateX(0);}     to{opacity:0;transform:translateX(60px);} }

  /* Helfer-Klassen   – werden von JS gesetzt */
  .slide-in-right  { animation:slideInRight  .55s ease both; }
  .slide-out-left  { animation:slideOutLeft  .55s ease both; }
  .slide-in-left   { animation:slideInLeft   .55s ease both; }
  .slide-out-right { animation:slideOutRight .55s ease both; }

  /* Basiszustände */
  #section4 .grid-item{ transition:none; }   /* verhindert Blinken bei Tempo-Klicks */
  #section4 .grid-item:not(.visible){ display:none; }


}





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

  #section4 {
    height: 1800px;
  }



  .slider-left { display: none;  }
  .slider-right{ display: none;  }
}


@media screen and (max-width: 950px) {
  #section4 {
    height: 1500px;
  }


}


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

  #section4 {
    height: 3800px;
  }

}


@media screen and (max-width: 700px) {
  #section4 {
    height: 3200px;
  }

}

@media screen and (max-width: 600px) {
  #section4 {
    height: 3000px;
  }

}


@media screen and (max-width: 550px) {
  #section4 {
    height: 2700px;
  }

}


@media screen and (max-width: 500px) {
  #section4 {
    height: 2500px;
  }

}


@media screen and (max-width: 450px) {
  #section4 {
    height: 2300px;
  }

}

@media screen and (max-width: 400px) {
  #section4 {
    height: 2100px;
  }

}


@media screen and (max-width: 350px) {
  #section4 {
    height: 1900px;
  }

}

@media screen and (max-width: 300px) {
  #section4 {
    height: 1600px;
  }

}



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

  #section5 {
    height: 820px;
  }

    .grid-container-pagename5 {
      display: grid; /* Aktiviert das Grid-Layout */
      grid-template-columns: var(--grid-two); /* 3 gleichmäßig breite Spalten */
      grid-template-rows: repeat(2, 1fr);
      gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
    }

    .grid-container-pagename5.grid-item {
      background-color: lightgray; /* Hintergrundfarbe für jedes Grid-Item */
      padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
    }


    .grid-container-pagename5 .grid-item {
      background-color: #000;
      height: 200px;
      width: 400px;
      border-radius: 10px;
      display: flex;
      grid-column: auto;
      margin: 0 auto;


      background: rgba(0, 0, 0, 0.45);                     /* Fläche */
      backdrop-filter: blur(12px) saturate(120%);
      -webkit-backdrop-filter: blur(12px) saturate(120%);  /* Safari-Fallback */
      border: 1px solid rgba(255, 255, 255, 0.06);         /* Highlight */
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.60);          /* Shadow */
      border-radius: 12px;
      transition: background 0.3s ease,                    /* Sanfte Überblendung */
                  box-shadow 0.3s ease,
                  transform 0.3s ease,
                  border-color 0.3s ease;

    }



}




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

  #section5 {
    height: 1620px;
  }

    .grid-container-pagename5 {
      display: grid; /* Aktiviert das Grid-Layout */
      grid-template-columns: var(--grid-one); /* 3 gleichmäßig breite Spalten */
      grid-template-rows: repeat(4, 1fr);
      gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
    }

    .grid-container-pagename5.grid-item {
      background-color: lightgray; /* Hintergrundfarbe für jedes Grid-Item */
      padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
    }


    .grid-container-pagename5 .grid-item {
      background-color: #000;
      height: 300px;
      width: 600px;
      border-radius: 10px;
      display: flex;
      grid-column: auto;
      margin: 0 auto;


      background: rgba(0, 0, 0, 0.45);                     /* Fläche */
      backdrop-filter: blur(12px) saturate(120%);
      -webkit-backdrop-filter: blur(12px) saturate(120%);  /* Safari-Fallback */
      border: 1px solid rgba(255, 255, 255, 0.06);         /* Highlight */
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.60);          /* Shadow */
      border-radius: 12px;
      transition: background 0.3s ease,                    /* Sanfte Überblendung */
                  box-shadow 0.3s ease,
                  transform 0.3s ease,
                  border-color 0.3s ease;

    }



    .grid-container-pagename5 .grid-item a {
      margin-top: 180px;
    }



}


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

  .grid-container-pagename5 .grid-item {
    background-color: #000;
    height: 250px;
    width: 500px;
    border-radius: 10px;
    display: flex;
    grid-column: auto;
    margin: 0 auto;


    background: rgba(0, 0, 0, 0.45);                     /* Fläche */
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);  /* Safari-Fallback */
    border: 1px solid rgba(255, 255, 255, 0.06);         /* Highlight */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.60);          /* Shadow */
    border-radius: 12px;
    transition: background 0.3s ease,                    /* Sanfte Überblendung */
                box-shadow 0.3s ease,
                transform 0.3s ease,
                border-color 0.3s ease;

  }

  .grid-container-pagename5 .grid-item a {
    margin-top: 140px;
  }
}




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

  #section5 {
    height: 1420px;
  }

  .grid-container-pagename5 .grid-item {
    background-color: #000;
    height: 200px;
    width: 400px;
    border-radius: 10px;
    display: flex;
    grid-column: auto;
    margin: 0 auto;


    background: rgba(0, 0, 0, 0.45);                     /* Fläche */
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);  /* Safari-Fallback */
    border: 1px solid rgba(255, 255, 255, 0.06);         /* Highlight */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.60);          /* Shadow */
    border-radius: 12px;
    transition: background 0.3s ease,                    /* Sanfte Überblendung */
                box-shadow 0.3s ease,
                transform 0.3s ease,
                border-color 0.3s ease;

  }

  .grid-container-pagename5 .grid-item a {
    margin-top: 80px;
  }
}



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


  #section5 {
    height: 1120px;
  }

  .grid-container-pagename5 .grid-item {
    background-color: #000;
    height: 150px;
    width: 300px;
    border-radius: 10px;
    display: flex;
    grid-column: auto;
    margin: 0 auto;


    background: rgba(0, 0, 0, 0.45);                     /* Fläche */
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);  /* Safari-Fallback */
    border: 1px solid rgba(255, 255, 255, 0.06);         /* Highlight */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.60);          /* Shadow */
    border-radius: 12px;
    transition: background 0.3s ease,                    /* Sanfte Überblendung */
                box-shadow 0.3s ease,
                transform 0.3s ease,
                border-color 0.3s ease;

  }

  .grid-container-pagename5 .grid-item p {
   font-size: 11px;
  }

  .grid-container-pagename5 .item-bg button{
    margin-top: 40px;
  width: 100%;

  background-color: transparent;

  border-radius: 10px;
  font-weight: 100;
  cursor: pointer;
  transition: .3s ease;

  box-shadow:
     inset 0 1px 3px   rgba(255,255,255,.60),   /* feiner oberer Lichtsaum   */
     inset 0 -1px 4px  rgba(255,255,255,.35),   /* feiner unterer Lichtsaum  */
     inset 0 0 12px 8px rgba(255,255,255,.20),  /* weicher Flächen‑Glow      */
           0 0 10px 4px rgba(0,0,0,.45);        /* subtile äußere Abdunklung */
   transition: .3s;
  }

  .grid-container-pagename5 .grid-item a {
    margin-top: 40px;
  }


}



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

  #section6 .contact-col-1 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;

  }


  #section6 .contact-col-1:nth-child(1) {
    align-items: center;   /* horizontal links ausrichten  */
    text-align: center;          /* Text ebenfalls linksbündig   */
  }

  /* Rechte Kachel → Elemente an rechten Rand */
  #section6 .contact-col-1:nth-child(3) {
    align-items: center;   /* horizontal links ausrichten  */
    text-align: center;        /* Text ebenfalls rechtsbündig  */
  }
}




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

  #section6 {
height: 1850px;
  }


  .grid-container-pagename6 {
    display: grid; /* Aktiviert das Grid-Layout */
    grid-template-columns: var(--grid-one); /* 3 gleichmäßig breite Spalten */
    grid-template-rows: repeat(3, 1fr);
    gap: var(--base-spacing) calc(var(--base-spacing) * 1); /* Abstand zwischen den Grid-Items */
  }

  .grid-container-pagename6.grid-item {
    background-color: lightgray; /* Hintergrundfarbe für jedes Grid-Item */
    padding: var(--base-spacing); /* Innenabstand für jedes Grid-Item */
  }




  #section6 input, textarea {
    background-color: transparent;
    border: 3px solid #FFF;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #FFF;
    resize: none;
  }


  #section6 .contact-col-1 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;

  }


  #section6 .contact-col-1:nth-child(1) {
    align-items: center;   /* horizontal links ausrichten  */
    text-align: center;          /* Text ebenfalls linksbündig   */
  }

  /* Rechte Kachel → Elemente an rechten Rand */
  #section6 .contact-col-1:nth-child(3) {
    align-items: center;   /* horizontal links ausrichten  */
    text-align: center;        /* Text ebenfalls rechtsbündig  */
  }


  #section6 .contact-col-1 .fa-solid {
    font-size: 40px;
    padding: 20px;
    padding-bottom: 40px;
    padding-top: 40px;
  }


  #section6 .contact-col-1 .fa-brands {
    font-size: 46px;
    padding: 20px;
    padding-bottom: 40px;
    padding-top: 40px;
  }


  #section6 .contact-col-1 .fa-instagram {
    font-size: 50px;
    margin-left: 2px;
  }


  #section6 .contact-col-1 .fa-paper-plane {
    font-size: 46px;
    margin-left: 2px;
  }

  #section6 .contact-col-1 .fa-code {
    font-size: 44px;
    margin-right: -10px;
  }


  #section6 .contact-col-1 .fa-circle-play {
    font-size: 46px;
  }


}



/* FOOTER */