/*--------------------------------------------------------------
Copyright: Web-Dsign 
Autor:     Dennis Schuber
Date:      23.01.2025
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@font-face{
  font-family: "Nasalization";
  src:
    url("/assets/fonts/nasalization.woff2") format("woff2"),
    url("/assets/fonts/nasalization.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: var(--text-schrift);
}

 body {
  
    color: var(--text-color);
    background-color: transparent;
      background: var(--hintergrund-farbe);
  }

body::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
html, body { overflow-x: hidden; }

/* KEIN body padding mehr */
body{ padding-top: 0 !important; }

.section{
  padding-block: clamp(28px, 4vw, 88px);
}


h1 {
    font-family: "Nasalization", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
} 

h2 {
    font-family: "Nasalization", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--hauptfarbe);
}

h4, h5, p, .robo {
    font-family:  var(--text-schrift), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--textfarbe);
}

.nasa {
    font-family: "Nasalization", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.main-test {
    min-width: 100vh;
    min-width: 100svh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cols {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.container {
    max-width: 1400px;
}

.b {
    border: 3px solid #8200cd;
}


.fixed-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;          /* oder 0, dann Content z-index:1 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


 /*=============== Header off Set ===============*/

:root{
  --header-h: 75px; /* Desktop */
}

@media (max-width: 768px){
  :root{ --header-h: 60px; } /* Mobile */
}



/* Kicker: sitzt sauber unter dem Header */
.kicker-box{
  top: calc(var(--header-h) + 10px);
}


      :root{
   
    
      --card: rgba(255,255,255,.72);
      --ink: #0b1020;
      --muted: rgba(11,16,32,.58);

      /* Apple-ish neumorphism */
      --shadowD: rgba(160,170,190,.55);
      --shadowL: rgba(255, 255, 255, 0.966);
      --counter-shadow: 18px 18px 46px var(--shadowD), -18px -18px 46px var(--shadowL);

}
 /*=============== Mind Set ===============*/
  :root {
    /*========== Farben ==========*/
    --hintergrund-farbe:linear-gradient(to right bottom,hsl(218, 35%, 95%), hsl(218, 40%, 95%), hsl(218, 40%, 95%), hsl(218, 40%, 93%), hsl(218, 45%, 88%));
    --hintergrund-farbe2:linear-gradient(to top right ,hsl(218, 35%, 95%), hsl(218, 40%, 95%), hsl(218, 40%, 95%), hsl(218, 40%, 93%), hsl(218, 45%, 88%));
    --akzent-farbe: rgb(130, 0, 205);
    --neben-farbe: rgb(12, 12, 44);
    --text-farbe: #0b1020c7;
    --text-farbe-leicht: rgb(65, 63, 63);
    --link-farbe:#0b1020c7;
    --element-bg:rgba(255,255,255,.65);

  /*========== Schriften ==========*/   
    --akzent-schrift: Nasalization, Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --text-schrift: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --farbe-sub-text: color:rgba(11,16,32,.58);
  /*========== Schatten ==========*/   
    --schatten-header:#9ab9fdb0 0px 0rem 0.8rem;
    --schatten-karte:8px 8px 18px #07142741 , -8px -8px 18px #ffffff;
    --schatten-btn: 3px 3px 5px var(--shadowD), -2px -2px 5px var(--shadowL);
    --schatten-btn-2: 3px 3px 8px #d1d9e6, -2px -2px 8px #ffffffee;
    --schatten-btn-inset: inset 4px 4px 3px var(--shadowD) ,inset -4px -4px 3px var(--shadowL);
    --schatten-panel: 15px 15px 25px #c0cde4, -10px -10px 20px #ffffffab;
    --schatten-panel-inset: inset 4px 4px 3px #d1d9e6 ,inset -4px -4px 3px #ffffff9d;
    --schatten-input: inset 4px 4px 3px hsl(217, 30%, 85%) ,inset 4px -4px 3px hsl(0, 0%, 100%);
    --schatten-knopf: inset -3px -3px 5px #ffffff, inset 3px 3px 5px #00000025;
    --schatten-knopf-hover: inset 3px 3px 5px #ffffff, inset -3px -3px 5px #00000015;
    --filter-shadow:drop-shadow(0px 3px 4px #00000035);
    --schatten-pill: inset 12px 12px 26px rgba(160,170,190,.26),
        inset -12px -12px 26px rgba(255,255,255,.92);


    --schatten-inset-deep: inset 8px 8px 12px rgba(66, 74, 90, 0.219), inset -8px -8px 12px rgba(255, 255, 255, 0.959);
    

    --shadowD: rgba(160,170,190,.55);
    --shadowL: rgba(255,255,255,.95);
    --counter-shadow: 18px 18px 46px var(--shadowD), -18px -18px 46px var(--shadowL);
   /*========== Border ==========*/  
    --border-slim: 1px solid rgba(255,255,255,.7);
}

    body.dark-theme {
    /*========== Farben ==========*/
    --hintergrund-farbe: rgb(12, 12, 44);
    --hintergrund-farbe2: rgb(12, 12, 44);
    --neben-farbe: rgb(232, 232, 232);
    --text-farbe: #d1d1d1;
    --text-farbe-leicht: rgb(85, 85, 85);
    --element-bg:rgba(0, 20, 63, 0.7);
    --farbe-sub-text: color:rgba(11,16,32,.58);
  /*========== Schatten ==========*/   
    --schatten-header:rgb(5, 5, 5) 0px 0rem 0.8rem;
    --schatten-karte: 8px 8px 12px hsl(240, 50%, 3%), -8px -8px 12px hsl(240, 53%, 17%);
    --schatten-btn:3px 3px 5px hsl(240, 50%, 3%), -3px -3px 5px hsl(240, 53%, 18%);
    --schatten-btn-2: 3px 3px 8px hsl(240, 50%, 3%), -3px -3px 8px hsl(240, 53%, 18%);
    --schatten-btn-inset: inset 4px 4px 3px #030309 ,inset -4px -4px 3px #12123b;
    --schatten-panel: 15px 15px 25px #030309, -15px -15px 25px #12123b;
    --schatten-panel-inset: inset 4px 4px 3px #030309 ,inset -4px -4px 3px #12123b;
    --schatten-input: inset 2px 3px 8px hsl(240, 50%, 3%), inset -2px -3px 8px hsl(240, 51%, 25%);
    --schatten-knopf: inset -3px -3px 5px #ffffff15, inset 3px 3px 5px #00000085;
    --schatten-knopf-hover: inset 3px 3px 5px #ffffff15, inset -3px -3px 5px #00000085;
    --filter-shadow:drop-shadow(0px 5px 5px #000000);
    --schatten-pill: inset 10px 10px 18px rgba(0, 0, 0, 0.432),inset -10px -10px 18px rgba(255, 255, 255, 0.062);


    --schatten-inset-deep: inset 8px 8px 12px rgba(66, 74, 90, 0.219), inset -8px -8px 12px rgba(255, 255, 255, 0.959);
   

    --shadowD: #0000006e;
    --shadowL: #0000001e;
    --counter-shadow: 18px 18px 46px var(--shadowD), -18px -18px 46px var(--shadowL);


 /*========== Border ==========*/  
   --border-slim: 1px solid #000000;



} 
.weiß {
  color: #e8e8e8ee;
}


.pt {margin-bottom: auto;}
.pb {margin-top: auto;}
.pl {align-self: flex-start;}
.pr {align-self: flex-end;}
.pm {align-self: center;}
.b {
    border: 2px solid red;
}

.headline-akzent {
    color: var(--akzent-farbe);
}
#DEINESEKTIONID { background:linear-gradient(to right bottom,hsl(218, 35%, 95%), hsl(218, 40%, 95%), hsl(218, 40%, 95%), hsl(218, 40%, 93%), hsl(218, 45%, 88%)) !important; }

  /*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
    position: relative;
    min-height: 150px;
      background: var(--akzent-farbe);


    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #e8e8e8ee;
    font-size: 1rem;   
}

.meta-box {
    margin-top: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.meta-nav ul {
    list-style: none;
}

.meta-nav ul li {
    cursor: pointer;
    transition: 0.3s ease-out;
}

.meta-nav ul li a {
    text-decoration: none;
    color: #e8e8e8ee;
    font-family: Inter 24pt, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',  Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 0.1px;
    font-weight: 400;
    transition: 0.4s ease-out;
}

.meta-nav ul li:hover {
    transform: translateX(15px);
} 



.social-2-box {
    display: flex;
    flex-direction: column;
}

.selling-box ul {
    list-style: none;
}

.selling-box ul li {
    cursor: pointer;
}

.social-2-box a {
    text-decoration: none;
    color: #e8e8e8ee;
    cursor: pointer;
}

.copy-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    background: #0a0a23;
}

.copy { 
    text-align: center;
    font-size: 0.8rem;
}


@media (max-width: 768px) {
  .meta-box {
    flex-direction: column;
    align-items: center;     
    justify-content: center; 
    text-align: center;
    gap: 1.25rem;            
  }

  
  .meta-nav ul,
  .selling-box ul {
    padding-left: 0;
    margin: 0;
  }

 
  .meta-nav,
  .selling-box,
  .social-2-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

:root{
  --header-h: 75px;
  --header-gap: 20px;  /* <- zusätzlicher Abstand unter dem Header */
}

@media (max-width: 768px){
  :root{
    --header-h: 60px;
    --header-gap: 16px;
  }
}

body{
  padding-top: calc(var(--header-h) + var(--header-gap));
}

/* Damit Anchor-Sprünge auch stimmen */
html{
  scroll-padding-top: calc(var(--header-h) + var(--header-gap));
}

 .section {
    padding-top: 5rem;
 }

/* Helfer*/

.dpn {
    display: none;
}