:root{
  --container: 1400px;
  --gutter: clamp(16px, 3vw, 48px);
  --gap: clamp(14px, 2vw, 28px);
}

 /* Mobile */
@media (max-width: 768px){
  :root{
    --container: 100%;
    --gutter: 16px;  /* oder clamp(12px, 4vw, 20px) */
    --gap: 12px;     /* oder clamp(10px, 3vw, 16px) */
  }
}
/* robust */
.hero, .leistungen, .angebote {
  background-attachment: scroll; /* statt fixed */
}
:root { --page-bg: #07070b; }
body { background: var(--page-bg); transition: background .25s ease; }


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

body{ margin: 0; 
    background: var(--hintergrund-farbe);
}



.section-fluid{
  width: 100%;
}

.container{
max-width: 1400px;
}


.container-fluid{
  width: 100%;
  padding-inline: var(--gutter);
}



.grid{
  display: grid;
  gap: var(--gap);
}

/* Desktop 12-Spalten Grid */
.grid-12{
  grid-template-columns: 1fr; /* mobile: 1 spalte */
}

/* Tablet: 8 Spalten (guter sweet spot) */
@media (min-width: 820px){
  .grid-12{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  /* Tablet Columns */
  .md-1{ grid-column: span 1; }
  .md-2{ grid-column: span 2; }
  .md-3{ grid-column: span 3; }
  .md-4{ grid-column: span 4; }
  .md-5{ grid-column: span 5; }
  .md-6{ grid-column: span 6; }
  .md-7{ grid-column: span 7; }
  .md-8{ grid-column: span 8; }
}

/* Desktop: 12 Spalten */
@media (min-width: 1024px){
  .grid-12{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* lg-* Klassen */
}

  /* Desktop Columns */
  .lg-1{ grid-column: span 1; }
  .lg-2{ grid-column: span 2; }
  .lg-3{ grid-column: span 3; }
  .lg-4{ grid-column: span 4; }
  .lg-5{ grid-column: span 5; }
  .lg-6{ grid-column: span 6; }
  .lg-7{ grid-column: span 7; }
  .lg-8{ grid-column: span 8; }
  .lg-9{ grid-column: span 9; }
  .lg-10{ grid-column: span 10; }
  .lg-11{ grid-column: span 11; }
  .lg-12{ grid-column: span 12; }


/* Optional: zentrieren einer Spalte */
.center{
  margin-inline: auto;
}

/* Unterer Bereich: Mobile zuerst = 1 Spalte */
.package-grid{
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  grid-template-columns: 1fr;
  align-items: start; /* wichtig: rechts oben bündig */
  margin-top: clamp(20px, 3vw, 40px);
}

/* Ab HÖHEREM Breakpoint erst 2 Spalten (damit iPad mini noch "mobil" bleibt)
   -> nimm 900px bis 1024px je nach Gefühl */
@media (min-width: 992px){
  .package-grid{
    grid-template-columns: 2fr 1fr; /* links breit, rechts schmal */
  }

}

/* Unterer Bereich: Mobile zuerst = 1 Spalte */
.package-grid-2{
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  grid-template-columns: 1fr;
  align-items: start; /* wichtig: rechts oben bündig */
  margin-top: clamp(20px, 3vw, 40px);
}

/* Ab HÖHEREM Breakpoint erst 2 Spalten (damit iPad mini noch "mobil" bleibt)
   -> nimm 900px bis 1024px je nach Gefühl */
@media (min-width: 992px){
  .package-grid-2{
    grid-template-columns: 2fr 2fr; /* links breit, rechts schmal */
  }
}

/* Unterer Bereich: Mobile zuerst = 1 Spalte */
.package-grid-3{
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  grid-template-columns: 1fr;
  align-items: start; /* wichtig: rechts oben bündig */
  margin-top: clamp(20px, 3vw, 40px);
}

/* Ab HÖHEREM Breakpoint erst 2 Spalten (damit iPad mini noch "mobil" bleibt)
   -> nimm 900px bis 1024px je nach Gefühl */
@media (min-width: 992px){
  .package-grid-3{
    grid-template-columns: 1fr 2fr; /* links breit, rechts schmal */
  }
}


/* Optional: rechte Karte sticky (wie viele Pricing-Seiten) */
@media (min-width: 992px){
  .pricing{
    position: sticky;
    top: 110px; /* an deinen Header anpassen */
  }
}


.grid-flexs {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr; /* mobile: untereinander */
}

@media (min-width: 992px) {
  .grid-flex {
    display: block;        /* grid aus */
    column-count: 2;       /* 2 Spalten */
    column-gap: 2rem;
  }

  .grid-flex-karte {
    break-inside: avoid;   /* wichtig: Karte nicht teilen */
    margin: 0 0 1.5rem;      /* Abstand zwischen Karten in der Spalte */
   
  }
}

.cards-grid{
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: 1fr; 
  justify-items: center;           /* mobile */
}


@media (min-width: 992px){
  .cards-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* repeat = Anzahl Karten */
  }

}

@media (min-width: 1400px){
  
  .cards-grid{
    justify-content: center;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* repeat = Anzahl Karten */
  }
}




/* Mobile: Cards mittig */
@media (max-width: 768px){

  .cards-grid > .karte{
    width: 100%;
    max-width: 280px;               /* deine Wunschbreite */
  }
}

/* Mobile: Cards mittig */
@media (max-width: 1024px){

  .cards-grid > .karte{
    width: 100%;
    max-width: 300px;               /* deine Wunschbreite */
  }
}


.cards-grid-3{
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: 1fr; 
  justify-items: center; 
           /* mobile */
}



@media (min-width: 820px){
  .cards-grid-3{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* repeat = Anzahl Karten */
    
  }

}

@media (min-width: 1400px){
  
  .cards-grid-3{
  
    
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* repeat = Anzahl Karten */
  }



}



/* ---------- PACKAGE GRID (links/rechts) ---------- */
.package-grid{
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  grid-template-columns: 1fr;           /* mobile: untereinander */
  align-items: start;
  margin-top: clamp(20px, 3vw, 40px);
}

/* iPad mini soll noch "mobil" bleiben -> später umschalten */
@media (min-width: 992px){
  .package-grid{
    grid-template-columns: 2fr 1fr;     /* links breit, rechts schmal */
  }
}

/* Optional: rechte Box sticky */
@media (min-width: 992px){
  .pricing{
    position: sticky;
    top: 110px;
  }
}

/* ---------- SKILLS CARDS GRID ---------- */
/* Wichtig: EIN Name überall (du hattest cards-grid, cards-grid-3 gemischt) */
.cards-grid-3{
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: 1fr;           /* mobile */
  justify-items: center;                 /* mobile: cards mittig */
}

/* Cards mobile nicht zu breit */
.cards-grid-3 > .design-card{
  width: 100%;
  max-width: 520px;
}

/* Ab Desktop: 3 Spalten (profi) */
@media (min-width: 992px){
  .cards-grid-3{
    justify-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cards-grid-3 > .design-card{
    max-width: none;
  }
}

/* ---------- optional: wenn du 2 Spalten schon früher willst (Tablet groß) ---------- */
/* (nur aktivieren wenn du willst)
@media (min-width: 820px) and (max-width: 991.98px){
  .cards-grid-3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }
  .cards-grid-3 > .design-card{ max-width: none; }
}

.package-grid{ outline: 3px solid red; }
.benefits{ outline: 3px solid green; }
.preis-box{ outline: 3px solid blue; }
*/


/* 2-Box Layout */
.package-grid{
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  grid-template-columns: 1fr;  /* mobile */
  align-items: start;
  margin-top: clamp(24px, 3vw, 48px);
}

/* Desktop: 2 Spalten */
@media (min-width: 992px){
  .package-grid{
    grid-template-columns: 1fr 1fr; /* zwei Boxen gleich breit */
  }
}


/* Skills Cards */
.cards-grid-3{
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: 1fr;      /* mobile */
  justify-items: center;           /* mobil mittig */
}

/* Cards mobil etwas schmaler */
.cards-grid-3 > .design-card{
  width: 100%;
  max-width: 520px;
}

/* Desktop: 3 Spalten Karten */
@media (min-width: 992px){
  .cards-grid-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: stretch;
  }
  .cards-grid-3 > .design-card{
    max-width: none;
  }
}



#startup{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6rem 0rem;
}





/* Webdesign Css */

.tl-card{
  max-width:500px;
  width: 100% ;
  margin:40px auto;
  padding:26px;
  border-radius:22px;
  background:rgba(255, 255, 255, 0);
    border:1px solid rgba(255, 255, 255, 0);
    backdrop-filter:blur(14px);
    box-shadow:var(--schatten-panel);
    font-family:var(--text-schrift);
     color: var(--text-farbe);
  }
  .tl-head{
    margin-bottom:14px
  }
  .tl-kicker{
    margin:0;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
     color: var(--text-farbe);
  }
  .tl-title{
    margin:6px 0 0;
    font-size:24px;
    font-weight:850
  }
  .tl-steps{
    display:grid;
    gap:10px
  }
  .tl-step{
    text-align:left;
    cursor:pointer;
    border:1px solid rgba(11,16,32,.10);
    background:rgba(255, 255, 255, 0);
    border-radius:18px;padding:14px 14px;
    box-shadow:var(--schatten-panel-inset);
  }
  .tl-left{
    display:flex;
    align-items:center;
    gap:12px
  }
  .tl-badge{
    width:34px;
    height:34px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:#0a84ff1a;
    border:1px solid rgba(10,132,255,.25);
    font-weight:900;
     color: var(--text-farbe);
  }
  .tl-h{
    font-weight:900;
    font-family: var(--akzent-schrift);
    color: var(--akzent-farbe);
    
  }
  .tl-s{ color: var(--text-farbe);font-size:13px;margin-top:2px}
  .tl-body{display:none;margin-top:10px; color: var(--text-farbe);font-size:14px;line-height:1.5}
  .tl-body ul{margin:0;padding-left:18px}
  .tl-step.is-open .tl-body{display:block}

  .design-card{   
      border-radius: 22px;
      padding: 16px;
      box-shadow: var(--schatten-btn);
      transition: 0.2s ease;
      
    }

    .design-card:hover {
        background: linear-gradient(180deg, #ffffff08, #ffffff05);
    }

    .design-card h3{
      margin: 0 0 6px;
      font-size: 16px;
      letter-spacing: -0.15px;
      color: var(--acent-color);
    }

    .design-card p{
      margin: 0;
      color: var(--text-farbe);
      font-size: 14.5px;
    }

    .tag{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 8px 15px;
      border-radius: 22px;
      color: var(--text-farbe);
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 10px;
      box-shadow: var(--box-shadow-btn-hover);
    }

    .tag svg{ opacity: 0.8; }

 .skills {
    min-height: 50vh;
 }





 /* ----------------------------------------------------------------------
   7) Design Page
   ---------------------------------------------------------------------- */

.beratung {
  display: flex;
  justify-content: center;
  align-items: center;
  
  padding: 30px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  gap: 25px;
  text-decoration: none;
  background-color: var(--hintergrund-farbe);
  color: var(--text-farbe);
}

.purpl {
  color: var(--akent-color);
}

.beratung a {
  text-decoration: none;
}

.design-cont {
  border-radius: 22px;
  font-weight: 500;
  text-decoration: none;
}

.kicker-1 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--text-color);
  margin-bottom: 10px;
}

.lead-1 {
  margin: 0 0 1rem;
  color: var(--text-color);
  max-width: 95ch;
  font-size: 1rem;
  font-weight: 400;
}

.design-actions {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.design-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 22px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  user-select: none;
  white-space: nowrap;
  margin: 0 auto;
}

.btn-design {
  background: var(--acent-color);
  border-radius: 10px;
  color: #e8e8e8;
  font-weight: 600;
  font-size: 1.1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  box-shadow: 5px 5px 10px #00000057, -5px -5px 10px #ffffff00,
    inset 4px 4px 8px #c463fc, inset -4px -4px 8px #490074;
  margin-right: 0.5rem;
  padding: 12px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-design:hover {
  color: var(--acent-color);
  box-shadow: 0px 5px 10px #8200cd96, -0px -5px 10px #8200cd79;
}

.meta {
  margin-top: 10px;
  color: var(--text-color);
  font-size: 13px;
}

/* Sections */
.section1 {
  margin-top: 3rem;
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--box-shadow-btn);
}

.h2-lila {
  margin: 0 0 12px;
  letter-spacing: -0.2px;
  color: var(--acent-color);
}

/* Design Grid – nicht global überschreiben */
.beratung .grid {
  display: grid;
  gap: 15px;
}
@media (min-width: 920px) {
  .desing .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .desing .grid.cols-2 { grid-template-columns: 1fr 1fr; }
}

.flex-layout {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;
}

.flex-cards {
 display: flex;
 align-items: center;
flex-direction: column;
  gap: 1.5rem;
}

.split-box {
  display: flex;
  justify-content: center;
  
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card-5 {
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--schatten-btn);
  transition: 0.2s ease;
  max-width: 300px;
}

.card-5-inset{
  box-shadow: var(--schatten-btn-inset);
}
.card-5:hover {
  background: linear-gradient(180deg, #ffffff08, #ffffff05);
}

.card-5 h3 {
  margin: 0 0 6px;
  letter-spacing: -0.15px;
  color: var(--akzent-farbe);
  font-family: var(--akzent-schrift);
  font-size: 22px;
  font-weight: 600;
}

.card-5 p {
  margin: 0;
  color: var(--text-farbe);
  font-size: 15px;
  font-weight: 00;
  margin-bottom: 0.5rem;
  
}

.card-5 ul li  {
  font-size: 14px;
  color: var(--text-farbe-leicht);
}


#webdesign, #wartung, #bildbearbeitung, #beratung  {
  min-height: 100svh;
}