@charset "utf-8";
 
/*
* CSS-Design
* Stefan Lintl - Webdesign
*/

/* Webfonts-Einbindung */

/* rajdhani-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rajdhani-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/rajdhani-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/rajdhani-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/rajdhani-v17-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/rajdhani-v17-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/rajdhani-v17-latin-regular.svg#Rajdhani') format('svg'); /* Legacy iOS */
}
/* rajdhani-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/rajdhani-v17-latin-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/rajdhani-v17-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/rajdhani-v17-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/rajdhani-v17-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/rajdhani-v17-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/rajdhani-v17-latin-500.svg#Rajdhani') format('svg'); /* Legacy iOS */
}
/* rajdhani-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/rajdhani-v17-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/rajdhani-v17-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/rajdhani-v17-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/rajdhani-v17-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/rajdhani-v17-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/rajdhani-v17-latin-600.svg#Rajdhani') format('svg'); /* Legacy iOS */
}
/* rajdhani-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/rajdhani-v17-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/rajdhani-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/rajdhani-v17-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/rajdhani-v17-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/rajdhani-v17-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/rajdhani-v17-latin-700.svg#Rajdhani') format('svg'); /* Legacy iOS */
}

/* caveat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/caveat-v23-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Webfonts-classes */

.rajdhani-light {
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.rajdhani-regular {
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rajdhani-medium {
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.rajdhani-semibold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.rajdhani-bold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
}



/* Farbwerte
 
Schwarzblau:
rgba(11,31,45,1)
#0b1f2d


Helltürkis:
rgba(105,143,161,1)
#698fa1

Schwarzblau 20%:
rgba(205,209,210,1)
#cdd1d2

Schwarzblau 40%:
rgba(155,163,166,1)
#9ba3a6

Türkis:
rgba(61,121,141,1)
#3d798d
 
*/

    :root{

      --bg:rgba(11,31,45,1);
      --bg-light:rgba(23,42,56,1);
      --primary: rgba(205,209,210,1);
      --secundary: rgba(155,163,166,1);
      --acczent: rgba(61,121,141,1);

      /* Skalierende Design-Tokens via clamp() */
      --space: clamp(1.75rem, 1vw + 0.5rem, 8.5rem);
      --gutter: clamp(2.000rem, 1.5vw, 4.000rem);
      --radius: clamp(5px, 1.2vw, 9px);
      --shadow: 0 2px 8px rgba(0,0,0,.06);
      --container: clamp(320px, 92vw, 1200px);
      --card-pad: clamp(0.9rem, 1.2vw, 1.35rem);
      --card-minh: clamp(120px, 16vw, 240px);
      --font: clamp(16px, .5vw + 14px, 18px);
    }

/* Reset * * * * * * * * */
*{
margin: 0;
padding: 0;
-mozbox-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html { font-size: 100%; scroll-behavior: smooth;}
body{background:var(--bg); font: 500 clamp(1.1rem, 2.4vw, 1.2rem)/1.4 "Rajdhani", sans-serif; color: var(--secundary);}
main{margin-left: 200px;}
section {padding: clamp(1.0rem, 30vw, 4rem) 0;}
img{max-width: 100%;}
em{font-weight: 700;}


  /* Wrapper & Container */
  .wrapper { padding-inline: var(--space); }
  .container {
    margin-inline: auto;
    max-width: var(--container);
  }

  /* 12er Grid */
  .grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
  }

  /* Karten / Items mit clamp() */
  .card {
    padding: var(--card-pad);
    min-height: var(--card-minh);
  }

/* Typo */

h1, h2, h3, h4, h5, h6 {
font-family: "Rajdhani", sans-serif;  
margin: 20px 0 10px;
line-height: 1.2;
}

h1{     
font-size: clamp(2rem, 6vw, 4rem);
color:var(--primary);
font-weight: 700;
margin-bottom: 3rem; 
max-width: 950px
} 

h2{     
font-size: clamp(1.6rem, 4.8vw, 2.5rem);
font-weight: 600;
margin-bottom: 3rem;    
max-width: 950px
} 
 
h3{    
position: relative; 
font-size: clamp(1.3rem, 3.6vw, 1.8rem);
font-weight: 700;
display: inline-block;   /* orientiert sich an der Textbreite */
} 

h3::after {
    content: "";
    display: block;
    width: 30%;   /* Linie ist halb so lang wie der Text */
    border-bottom: 5px solid rgba(105,143,161,1);
    margin: 0.8rem 0; /* Abstand nach oben, zentriert */
}
 
h4{    
font-size: clamp(1.1rem, 2.4vw, 1.2rem);
font-weight: 700;
}

p {margin: 0 0 15px;}

a {color: var(--acczent); text-decoration: none;}
a:hover {color: var(--primary);}

.fantasy {font-family: 'Caveat', fantasy, sans-serif; font-size: clamp(1.6rem, 4.8vw, 2.5rem); color: var(--acczent); font-weight: 500;}


/* BUTTON */


.button{
padding: 1rem 2rem;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--primary);
background: rgba(105,143,161,1);
display: inline-block;
margin: 20px 25px 20px 0;
transition: all 0.15s linear 0s;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.button:hover{
background: var(--primary);
color: var(--acczent)
}

/* BACKGROUNDS */

.deepblue {background: var(--bg-light);}

/* ICONS */

.icon {
    width: 60px;
    height: 60px;
    color: var(--acczent); /* oder jede andere Wunschfarbe */
    margin-bottom: 1rem;
}

.steps {font-size: 3rem; color: var(--acczent)}


/* SIDEBAR */

#sidebar-img{
  max-width: 100%;
  padding: 1.500rem;
}

.sidebar{
    height:100%;
    width:200px;
    background-color: var(--bg-light);
    position:fixed!important;
    z-index:1;
    overflow:auto
}

.sidebar-item{
  width: 100%;
  display: block;
  padding: 16px 16px;
  text-align: center;
  color: var(--secundary);
  text-decoration: none;
  text-transform: uppercase;
}

.sidebar-item:hover {
  background: var(--bg);
}

.sidebar-item:active {
  background: var(--bg);
}

.sidebar-item i {font-size: 30px; margin-bottom: 15px;}

.mobil-sidebar {
  display: flex;
  justify-content: space-around; /* gleichmäßige Verteilung */
    width:100%;
    background-color: var(--bg-light);
    position:fixed!important;
    z-index:1;
    overflow:auto;
    left: 0;
    top: 0;
}

.mobil-sidebar a {
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 20px;
  color: var(--secundary);
  text-decoration: none;
  text-transform: uppercase;
}

.mobil-sidebar a:hover {
  background-color: var(--bg);
}

.mobil-sidebar a:active {
  background-color: var(--bg);
}

/* HEADER */

header{padding: 3rem 0; display: flex; justify-content: center; align-items: center; gap: var(--gutter)}
header img {width: clamp(200px, 30vw, 600px);}

/* Back to Top */

#back-to-top {
    display: none; /* Anfangs ausgeblendet */
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    font-size: 16px;
    background-color: var(--acczent);
    color: var(--primary);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.3s;
}

#back-to-top:hover {
    background-color: var(--secundary);
}

/* METO*/

.meta {border-top: 0.5px solid var(--acczent);padding: 1rem; font-size: 1rem; text-transform: uppercase;}
.meta li{display: inline;list-style: none;margin-right: 35px;}


/* Legal Section */

.toggle-section {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.toggle-section.visible {
    display: block;
    opacity: 1;
}

  /* Standard: Mobil = volle Breite */
  .span-12 { grid-column: span 12; }

  .mobil-sidebar{display: none;}

  /* Breakpoints */

  @media (min-width: 768px){
    .md-span-1{grid-column:span 1}.md-span-2{grid-column:span 2}.md-span-3{grid-column:span 3}
    .md-span-4{grid-column:span 4}.md-span-5{grid-column:span 5}.md-span-6{grid-column:span 6}
    .md-span-7{grid-column:span 7}.md-span-8{grid-column:span 8}.md-span-9{grid-column:span 9}
    .md-span-10{grid-column:span 10}.md-span-11{grid-column:span 11}.md-span-12{grid-column:span 12}
  }

  @media (min-width: 1024px){
    .lg-span-1{grid-column:span 1}.lg-span-2{grid-column:span 2}.lg-span-3{grid-column:span 3}
    .lg-span-4{grid-column:span 4}.lg-span-5{grid-column:span 5}.lg-span-6{grid-column:span 6}
    .lg-span-7{grid-column:span 7}.lg-span-8{grid-column:span 8}.lg-span-9{grid-column:span 9}
    .lg-span-10{grid-column:span 10}.lg-span-11{grid-column:span 11}.lg-span-12{grid-column:span 12}
  }

  /* Optional: volle Breite außerhalb Container (z.B. Hero-Hintergrund) */

  .full-bleed {
    width: 100%;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--space);
  }

   /* Media Query */

   @media (max-width:992px){
    .sidebar {display:none}
    .mobil-sidebar {display: inline-flex;}
    main{margin-left: 0; padding-top: 80px;}

}