/* KORAL KITE – VOLLSTÄNDIGE GEMEINSAME STYLE.CSS */
/* Startseite, Marketing und Studio – DE und EN */

html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

/* ==========================================
   GLOBALE REFERENZKARTEN
   ========================================== */

.project-image{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:330px;
  min-height:0;
  padding:25px;
  overflow:hidden;
  background:linear-gradient(135deg,#e9e9e5,#d8d9d6);
  color:#858585;
  text-align:center;
}

.project-image img{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

@media(max-width:720px){
  .project-image{height:240px}
}

/* ==========================================
   GEMEINSAMER HERO – INDEX / MARKETING / STUDIO
   DE und EN: gleiche Startposition von Logo und Text.
   Das Logo wird 10 % breiter als die bisherige 360px-Fläche.
   Die natürliche Bildhöhe bleibt erhalten: Marketing/Studio-
   Zusatzschrift läuft nach unten, ohne das Logo zu verschieben.
   ========================================== */

body.page-home .hero,
body.page-marketing .hero,
body.page-studio .hero{
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  padding:calc(72px + clamp(70px,14vh,145px)) 0 90px;
}

body.page-home .hero-content,
body.page-marketing .hero-content,
body.page-studio .hero-content{
  display:grid;
  grid-template-columns:396px minmax(0,1fr);
  align-items:start;
  column-gap:40px;
}

body.page-home .hero-logo,
body.page-marketing .hero-logo,
body.page-studio .hero-logo{
  display:block;
  width:396px;
  max-width:100%;
  height:auto;
  margin:70px 0 0;
  justify-self:start;
  align-self:start;
  object-fit:initial;
  transform:none;
}

body.page-home .hero-text,
body.page-marketing .hero-text,
body.page-studio .hero-text{
  min-width:0;
  align-self:start;
}

body.page-home .hero-brand-name,
body.page-marketing .hero-brand-name,
body.page-studio .hero-brand-name{
  margin-bottom:14px;
  color:var(--text-light);
  font-size:clamp(1rem,1.8vw,1.35rem);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

body.page-home .hero h1,
body.page-marketing .hero h1,
body.page-studio .hero h1{
  max-width:940px;
  margin:0 0 24px;
  font-size:clamp(3rem,8vw,7rem);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.055em;
}

/* Das Logo darf durch den Reveal-Effekt nicht nachrutschen. */
body.page-home .hero-content.reveal,
body.page-marketing .hero-content.reveal,
body.page-studio .hero-content.reveal{
  opacity:1;
  transform:none;
  transition:none;
}

@media(max-width:1140px) and (min-width:721px){
  body.page-home .nav-logo,
  body.page-marketing .nav-logo,
  body.page-studio .nav-logo{
    height:36px;
  }
}

/* Ab 1080px ist die Studio-Navigation zweizeilig. Der Hero
   behält trotzdem auf allen drei Seiten denselben Startpunkt. */
@media(max-width:1080px) and (min-width:721px){
  body.page-home .hero,
  body.page-marketing .hero,
  body.page-studio .hero{
    padding-top:calc(112px + clamp(70px,14vh,145px));
  }
}

@media(max-width:1000px) and (min-width:721px){
  body.page-home .hero-content,
  body.page-marketing .hero-content,
  body.page-studio .hero-content{
    grid-template-columns:352px minmax(0,1fr);
    column-gap:12px;
  }

  body.page-home .hero-logo,
  body.page-marketing .hero-logo,
  body.page-studio .hero-logo{
    width:352px;
    margin-top:62.5px;
  }
}

@media(max-width:720px){
  body.page-home .hero,
  body.page-marketing .hero,
  body.page-studio .hero{
    min-height:92svh;
    padding-top:162px;
  }

  body.page-home .hero-content,
  body.page-marketing .hero-content,
  body.page-studio .hero-content{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:355px auto;
    row-gap:0;
  }

  body.page-home .hero-logo,
  body.page-marketing .hero-logo,
  body.page-studio .hero-logo{
    grid-row:1;
    width:min(242px,60.5vw);
    max-width:100%;
    height:auto;
    margin:25px auto 0;
    justify-self:center;
  }

  body.page-home .hero-text,
  body.page-marketing .hero-text,
  body.page-studio .hero-text{
    grid-row:2;
  }

  body.page-home .hero h1,
  body.page-marketing .hero h1,
  body.page-studio .hero h1{
    font-size:clamp(3.2rem,15vw,5rem);
  }
}

/* ==========================================
   STARTSEITE – INDEX
   ========================================== */

body.page-home{

  &{
    --dark:#17191c;
    --light:#f7f7f5;
    --white:#fff;
    --text-dark:#292b2f;
    --text-light:#f6f6f3;
    --muted-dark:#6e7278;
    --muted-light:#b9bdc3;
    --blue:#315ea8;
    --coral:#ef765f;
    --radius-large:26px;
    --shadow:0 18px 50px rgba(0,0,0,.10);
    --max-width:1180px;
    --nav-height:72px;
    --transition:.35s cubic-bezier(.2,.75,.3,1);
    margin:0;
    font-family:ui-sans-serif,system-ui,-apple-system,
      BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,
      Arial,sans-serif;
    color:var(--text-dark);
    background:var(--light);
    overflow-x:hidden;
  }

  img{display:block;max-width:100%}
  a{color:inherit}
  h1,h2,h3,p{margin-top:0}

  .shell{
    width:min(var(--max-width),calc(100% - 40px));
    margin:0 auto;
    position:relative;
    z-index:2;
  }

  .section{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    scroll-margin-top:var(--nav-height);
  }

  .section-light{background:var(--light)}
  .section-dark{
    background:var(--dark);
    color:var(--text-light);
  }

  .section-label{
    display:inline-block;
    margin-bottom:20px;
    color:var(--coral);
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
  }

  .section-title{
    max-width:860px;
    margin-bottom:28px;
    font-size:clamp(2.1rem,5vw,4.8rem);
    line-height:1.02;
    letter-spacing:-.045em;
  }

  .section-intro{
    max-width:720px;
    font-size:clamp(1rem,1.5vw,1.16rem);
    line-height:1.8;
    color:var(--muted-dark);
  }

  .accent{color:var(--coral)}

  /* Navigation */

  .nav{
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    background:rgba(23,25,28,.90);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .nav-inner{
    width:min(var(--max-width),calc(100% - 32px));
    min-height:var(--nav-height);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }

  .nav-brand{
    display:flex;
    align-items:center;
    text-decoration:none;
    flex-shrink:0;
  }

  .nav-logo{height:42px;width:auto}

  .nav-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    flex-wrap:wrap;
    margin-left:auto;
  }

  .nav-links a{
    padding:8px 12px;
    color:var(--text-light);
    text-decoration:none;
    font-size:.92rem;
    font-weight:700;
    border-radius:999px;
    transition:background var(--transition),
      color var(--transition);
  }

  .nav-links a:hover,
  .nav-links a.active{
    background:var(--coral);
    color:#151515;
  }

  .nav-short{display:none}

  .nav-lang{
    display:flex;
    align-items:center;
    flex-shrink:0;
    gap:3px;
    padding:3px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:999px;
  }

  .nav-lang a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    min-height:32px;
    padding:5px 8px;
    border-radius:999px;
    color:var(--text-light);
    text-decoration:none;
    font-size:.79rem;
    font-weight:850;
    transition:background var(--transition),
      color var(--transition);
  }

  .nav-lang a:hover,
  .nav-lang a:focus-visible{
    background:rgba(255,255,255,.13);
  }

  .nav-lang a.is-active{
    background:var(--coral);
    color:#151515;
  }

  /* Hero */

  .hero{
    position:relative;
    background:radial-gradient(
      circle at 82% 28%,
      rgba(49,94,168,.16),
      transparent 32%
    ),var(--dark);
    color:var(--text-light);
    overflow:hidden;
  }

  .hero::after{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-330px;
    bottom:-390px;
    border-radius:50%;
    background:rgba(239,118,95,.07);
    pointer-events:none;
  }

  .hero-content{
    width:100%;
    max-width:1180px;
  }

  .hero-brand-name{
    margin-bottom:14px;
    font-size:clamp(1rem,1.8vw,1.35rem);
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .hero h1{
    max-width:940px;
    margin-bottom:24px;
    font-size:clamp(3rem,8vw,7rem);
    line-height:.94;
    letter-spacing:-.055em;
  }

  .hero h1 span{color:var(--coral)}

  .hero-copy{
    max-width:720px;
    margin-bottom:38px;
    color:var(--muted-light);
    font-size:clamp(1.05rem,2vw,1.3rem);
    line-height:1.65;
  }

  .hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }

  .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 22px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    transition:transform var(--transition),
      background var(--transition);
  }

  .button:hover{transform:translateY(-3px)}
  .button-primary{
    background:var(--coral);
    color:#151515;
  }

  .button-secondary{
    border:1px solid rgba(255,255,255,.28);
    color:var(--text-light);
  }

  /* Kite-Schnur */

  .page-wrap{
    position:relative;
    isolation:isolate;
  }

  .site-kite-line{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
  }

  .site-kite-line path{
    fill:none;
    stroke:var(--coral);
    stroke-width:2.2;
    opacity:.28;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
  }

  .page-wrap>header,
  .page-wrap>section{
    position:relative;
    z-index:0;
  }

  /* Markenbild */

  .brand-image{
    position:relative;
    min-height:62vh;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(
      90deg,
      rgba(23,25,28,.52) 0%,
      rgba(23,25,28,.22) 48%,
      rgba(23,25,28,.06) 100%
    ),url("../Koral Kite Auftrieb.png")
      center/cover no-repeat;
    color:var(--text-light);
    overflow:hidden;
  }

  .brand-image-content{
    max-width:700px;
    padding:82px 0;
  }

  .brand-image-content h2{
    max-width:680px;
    margin-bottom:18px;
    font-size:clamp(2.8rem,5vw,5.4rem);
    line-height:.98;
    letter-spacing:-.045em;
  }

  .brand-image-content p{
    max-width:590px;
    margin-bottom:0;
    color:rgba(255,255,255,.84);
    font-size:clamp(1rem,1.5vw,1.15rem);
    line-height:1.7;
  }

  /* Bereichskarten */

  .division-head{margin-bottom:54px}

  .division-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
  }

  .division-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:390px;
    padding:34px;
    border:1px solid rgba(41,43,47,.13);
    border-radius:var(--radius-large);
    background:var(--white);
    box-shadow:var(--shadow);
    text-decoration:none;
    overflow:hidden;
    transition:transform var(--transition),
      border-color var(--transition),
      box-shadow var(--transition);
  }

  .division-card::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:5px;
    background:var(--coral);
    transition:width var(--transition);
  }

  .division-card:hover{
    transform:translateY(-7px);
    border-color:rgba(239,118,95,.5);
    box-shadow:0 24px 65px rgba(0,0,0,.14);
  }

  .division-card:hover::before{width:100%}

  .division-logo{
    height:84px;
    width:auto;
    max-width:230px;
    object-fit:contain;
    object-position:center;
    margin:0 auto 24px;
  }

  .division-card h3{
    margin-bottom:15px;
    font-size:clamp(1.8rem,3vw,2.6rem);
    letter-spacing:-.035em;
  }

  .division-card p{
    margin-bottom:24px;
    color:var(--muted-dark);
    line-height:1.75;
  }

  .division-list{
    margin:0 0 30px;
    padding-left:19px;
    color:var(--muted-dark);
    line-height:1.75;
  }

  .division-link{
    margin-top:auto;
    color:var(--blue);
    font-weight:850;
  }

  /* Kontakt und Footer */

  #kontakt{
    background:linear-gradient(
      90deg,
      rgba(23,25,28,.82) 0%,
      rgba(23,25,28,.74) 48%,
      rgba(23,25,28,.58) 100%
    ),url("../Koral Kite Kontakt.png")
      center/cover no-repeat;
  }

  .contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:70px;
    align-items:end;
  }

  .contact-title{
    max-width:820px;
    margin-bottom:20px;
    font-size:clamp(3.2rem,7vw,7rem);
    line-height:.96;
    letter-spacing:-.055em;
  }

  .contact-copy{
    max-width:600px;
    color:var(--muted-light);
    line-height:1.7;
  }

  .contact-data{
    padding-left:28px;
    border-left:3px solid var(--coral);
  }

  .contact-data p{
    margin-bottom:12px;
    color:var(--muted-light);
  }

  .contact-data a{
    color:var(--text-light);
    text-decoration:none;
  }

  footer{
    padding:28px 20px;
    background:#111315;
    color:#8e9297;
    text-align:center;
    font-size:.88rem;
    border-top:1px solid rgba(255,255,255,.07);
  }

  .footer-links{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:8px;
  }

  .footer-links a{
    color:#a9adb2;
    text-decoration:underline;
  }

  /* Animation */

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .65s ease,
      transform .65s ease;
  }

  .reveal.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* Tablet */

  @media(max-width:1000px){
    .nav-inner{gap:10px}
    .nav-links a{
      padding:7px 9px;
      font-size:.84rem;
    }

    .division-grid,
    .contact-layout{
      grid-template-columns:1fr;
    }

    .contact-data{
      padding-left:0;
      padding-top:25px;
      border-left:0;
      border-top:3px solid var(--coral);
    }
  }

  /* Mobile */

  @media(max-width:720px){
    &{--nav-height:112px}

    .nav-logo{height:30px}

    .shell{
      width:min(var(--max-width),calc(100% - 28px));
    }

    .section{padding:78px 0}

    .nav-inner{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px 10px;
      padding:9px 0 8px;
      align-content:center;
    }

    .nav-brand{
      grid-column:1;
      grid-row:1;
    }

    .nav-lang{
      grid-column:2;
      grid-row:1;
      justify-self:end;
    }

    .nav-lang a{
      min-height:29px;
      min-width:33px;
      padding:4px 6px;
    }

    .nav-links{
      grid-column:1 / -1;
      grid-row:2;
      display:flex;
      justify-content:space-between;
      width:100%;
      margin:0;
      flex-wrap:nowrap;
      gap:3px;
      overflow-x:auto;
      scrollbar-width:none;
    }

    .nav-links::-webkit-scrollbar{display:none}

    .nav-links a{
      display:block;
      flex-shrink:0;
      padding:7px 8px;
      font-size:.78rem;
      white-space:nowrap;
    }

    .nav-full{display:none}
    .nav-short{display:inline}

    .nav-links a[href="#kontakt"]{
      background:var(--coral);
      color:#151515;
    }

    .hero h1{
      font-size:clamp(3.2rem,15vw,5rem);
    }

    .brand-image{
      min-height:56vh;
      background-position:58% center;
    }

    .brand-image-content{padding:60px 0}

    .brand-image-content h2{
      font-size:clamp(2.5rem,11vw,4rem);
    }

    .division-grid{
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scrollbar-width:none;
      padding-bottom:18px;
    }

    .division-card{
      flex:0 0 86%;
      scroll-snap-align:center;
    }

    .division-logo{
      height:74px;
      max-width:210px;
    }

    .site-kite-line path{opacity:.20}
  }

  @media(prefers-reduced-motion:reduce){
    .reveal{
      opacity:1;
      transform:none;
    }
  }
}

/* ==========================================
   MARKETING
   ========================================== */

body.page-marketing{

  &{
    --dark:#17191c;
    --dark-soft:#202328;
    --light:#f7f7f5;
    --white:#ffffff;
    --text-dark:#292b2f;
    --text-light:#f6f6f3;
    --muted-dark:#6e7278;
    --muted-light:#b9bdc3;
    --blue:#315ea8;
    --coral:#ef765f;
    --line:rgba(120,120,120,.22);
    --radius-small:14px;
    --radius-large:26px;
    --shadow:0 18px 50px rgba(0,0,0,.10);
    --max-width:1180px;
    --nav-height:72px;
    --transition:.35s cubic-bezier(.2,.75,.3,1);
    margin:0;
    font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    color:var(--text-dark);
    background:var(--light);
    overflow-x:hidden;
  }

  &.modal-open{overflow:hidden}

  img{display:block;max-width:100%}
  button,input,textarea{font:inherit}
  a{color:inherit}
  h1,h2,h3,h4,p{margin-top:0}

  .shell{
    width:min(var(--max-width),calc(100% - 40px));
    margin:0 auto;
    position:relative;
    z-index:2;
  }

  .section{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    scroll-margin-top:var(--nav-height);
  }

  .section-light{
    background:var(--light);
    color:var(--text-dark);
  }

  .section-dark{
    background:var(--dark);
    color:var(--text-light);
  }

  .section-soft-dark{
    background:var(--dark-soft);
    color:var(--text-light);
  }

  .section-label{
    display:inline-block;
    margin-bottom:20px;
    color:var(--coral);
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
  }

  .section-title{
    max-width:820px;
    margin-bottom:28px;
    font-size:clamp(2.1rem,5vw,4.8rem);
    line-height:1.02;
    letter-spacing:-.045em;
  }

  .section-intro{
    max-width:720px;
    font-size:clamp(1rem,1.5vw,1.16rem);
    line-height:1.8;
  }

  .section-dark .section-intro,
  .section-soft-dark .section-intro{
    color:var(--muted-light);
  }

  .section-light .section-intro{
    color:var(--muted-dark);
  }

  .accent{color:var(--coral)}
  .blue{color:var(--blue)}

  /* Navigation */

  .nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:rgba(23,25,28,.90);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .nav-inner{
    width:min(var(--max-width),calc(100% - 32px));
    min-height:var(--nav-height);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }

  .nav-brand{
    display:flex;
    align-items:center;
    text-decoration:none;
    flex-shrink:0;
  }

  .nav-logo{height:42px;width:auto}

  .nav-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    flex-wrap:nowrap;
    margin-left:auto;
  }

  .nav-links a{
    padding:8px 12px;
    color:var(--text-light);
    text-decoration:none;
    font-size:.92rem;
    font-weight:700;
    border-radius:999px;
    transition:background var(--transition),
      color var(--transition);
  }

  .nav-links a:hover,
  .nav-links a.active{
    background:var(--coral);
    color:#151515;
  }

  /* Dropdown */

  .nav-home{
    position:relative;
    display:flex;
    align-items:center;
    flex-shrink:0;
  }

  .nav-links .nav-home .home-link{
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px 0 0 999px;
    padding-right:8px;
  }

  .nav-home-toggle{
    display:grid;
    place-items:center;
    width:30px;
    min-height:38px;
    padding:0;
    background:transparent;
    color:var(--text-light);
    border:1px solid rgba(255,255,255,.18);
    border-left:0;
    border-radius:0 999px 999px 0;
    cursor:pointer;
    transition:background var(--transition),
      color var(--transition);
  }

  .nav-home-toggle:hover,
  .nav-home-toggle:focus-visible{
    background:var(--coral);
    color:#151515;
  }

  .nav-home-toggle span{
    transition:transform .2s ease;
  }

  .nav-home.is-open .nav-home-toggle span{
    transform:rotate(180deg);
  }

  .nav-dropdown{
    position:absolute;
    z-index:1100;
    top:100%;
    left:0;
    min-width:235px;
    padding:8px;
    background:#22262b;
    border:1px solid rgba(255,255,255,.19);
    border-radius:14px;
    box-shadow:0 16px 38px rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(5px);
    transition:opacity .18s ease,
      transform .18s ease,
      visibility .18s ease;
  }

  .nav-home:hover .nav-dropdown,
  .nav-home:focus-within .nav-dropdown,
  .nav-home.is-open .nav-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-links .nav-dropdown a{
    display:block;
    padding:11px 12px;
    border-radius:8px;
    white-space:nowrap;
    font-size:.9rem;
  }

  .nav-dropdown a[aria-current="page"]{
    color:var(--coral);
  }

  .nav-links .nav-dropdown a:hover,
  .nav-links .nav-dropdown a:focus-visible{
    background:var(--coral);
    color:#151515;
  }

  .nav-short{display:none}

  /* Sprachumschalter */

  .nav-lang{
    display:flex;
    align-items:center;
    flex-shrink:0;
    gap:3px;
    padding:3px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
  }

  .nav-lang a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:35px;
    min-height:31px;
    padding:4px 7px;
    color:var(--text-light);
    text-decoration:none;
    font-size:.8rem;
    font-weight:850;
    border-radius:999px;
  }

  .nav-lang a:hover,
  .nav-lang a:focus-visible{
    background:rgba(255,255,255,.13);
  }

  .nav-lang a.is-active{
    background:var(--coral);
    color:#151515;
  }

  .nav-links a:focus-visible,
  .nav-home-toggle:focus-visible,
  .nav-lang a:focus-visible{
    outline:2px solid var(--coral);
    outline-offset:2px;
  }

  /* Hero */

  .hero{
    position:relative;
    background:radial-gradient(
      circle at 82% 28%,
      rgba(49,94,168,.16),
      transparent 32%
    ),var(--dark);
    color:var(--text-light);
    overflow:hidden;
  }

  .hero::after{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-330px;
    bottom:-390px;
    border-radius:50%;
    background:rgba(239,118,95,.07);
    pointer-events:none;
  }

  .hero-content{
    width:100%;
    max-width:1180px;
  }

  .hero-brand-name{
    margin-bottom:14px;
    color:var(--text-light);
    font-size:clamp(1rem,1.8vw,1.35rem);
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .hero h1{
    max-width:940px;
    margin-bottom:24px;
    font-size:clamp(3rem,8vw,7rem);
    line-height:.94;
    letter-spacing:-.055em;
  }

  .hero h1 span{color:var(--coral)}

  .hero-copy{
    max-width:690px;
    margin-bottom:38px;
    color:var(--muted-light);
    font-size:clamp(1.05rem,2vw,1.3rem);
    line-height:1.65;
  }

  .hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }

  .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 22px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    transition:transform var(--transition),
      background var(--transition),
      color var(--transition);
  }

  .button:hover{transform:translateY(-3px)}

  .button-primary{
    background:var(--coral);
    color:#151515;
  }

  .button-secondary{
    border:1px solid rgba(255,255,255,.28);
    color:var(--text-light);
  }

  .button-secondary:hover{
    background:rgba(255,255,255,.08);
  }

  /* Kite-Schnur und Über uns */

  .page-wrap{
    position:relative;
    isolation:isolate;
  }

  .site-kite-line{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
    overflow:visible;
  }

  .site-kite-line path{
    fill:none;
    stroke:var(--coral);
    stroke-width:2.2;
    opacity:.28;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
  }

  .page-wrap>header,
  .page-wrap>section{
    position:relative;
    z-index:0;
  }

  .about-layout{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(45px,8vw,110px);
    align-items:center;
  }

  .about-statement{
    font-size:clamp(2.4rem,5.4vw,5.2rem);
    line-height:1.02;
    letter-spacing:-.05em;
    font-weight:850;
  }

  .about-text{
    padding-left:28px;
    border-left:4px solid var(--coral);
    color:var(--muted-dark);
    font-size:1.08rem;
    line-height:1.85;
  }

  .brand-moment{
    min-height:72vh;
    display:flex;
    align-items:flex-end;
    position:relative;
    background:linear-gradient(
      90deg,
      rgba(23,25,28,.82) 0%,
      rgba(23,25,28,.48) 55%,
      rgba(23,25,28,.16) 100%
    ),url("../Koral Kite Marketing Social Media.png")
      center/cover no-repeat;
    color:var(--text-light);
  }

  .brand-moment-content{
    max-width:800px;
    padding:100px 0;
  }

  .brand-moment h2{
    margin-bottom:20px;
    font-size:clamp(3rem,7vw,6.8rem);
    line-height:.95;
    letter-spacing:-.055em;
  }

  .brand-moment p{
    max-width:650px;
    color:rgba(255,255,255,.78);
    font-size:1.15rem;
    line-height:1.7;
  }

  /* Leistungskarten */

  .services-head{margin-bottom:52px}

  .cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
  }

  .card{
    position:relative;
    min-height:300px;
    padding:26px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:var(--radius-large);
    background:rgba(255,255,255,.045);
    overflow:hidden;
    cursor:pointer;
    transition:transform var(--transition),
      border-color var(--transition),
      background var(--transition),
      box-shadow var(--transition);
  }

  .card::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:4px;
    background:var(--coral);
    transition:width var(--transition);
  }

  .card:hover{
    transform:translateY(-7px);
    border-color:rgba(239,118,95,.48);
    background:rgba(255,255,255,.07);
    box-shadow:0 22px 60px rgba(0,0,0,.16);
  }

  .card:hover::before{width:100%}

  .card-number{
    margin-bottom:36px;
    color:var(--coral);
    font-size:.8rem;
    font-weight:850;
    letter-spacing:.12em;
  }

  .card h3{
    margin-bottom:13px;
    font-size:1.25rem;
    line-height:1.25;
  }

  .card p{
    margin-bottom:15px;
    color:var(--muted-light);
    line-height:1.65;
  }

  .card ul{
    margin:0;
    padding-left:18px;
    color:var(--muted-light);
    line-height:1.65;
  }

  /* Arbeitsweise */

  .process{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
    margin-top:65px;
    position:relative;
  }

  .process::before{
    content:"";
    position:absolute;
    top:23px;
    left:8%;
    right:8%;
    height:2px;
    background:rgba(49,94,168,.24);
  }

  .process-step{
    position:relative;
    padding:0 16px;
    text-align:center;
  }

  .process-dot{
    position:relative;
    width:46px;
    height:46px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--light);
    border:2px solid var(--blue);
    color:var(--blue);
    font-size:.82rem;
    font-weight:900;
    z-index:2;
    transition:background var(--transition),
      color var(--transition),
      transform var(--transition);
  }

  .process-step.visible .process-dot{
    background:var(--coral);
    border-color:var(--coral);
    color:#151515;
    transform:scale(1.08);
  }

  .process-step h3{
    margin-bottom:8px;
    font-size:1rem;
  }

  .process-step p{
    color:var(--muted-dark);
    font-size:.9rem;
    line-height:1.55;
  }

  /* Pakete */

  .pricing-head{margin-bottom:54px}

  .package-group,
  .pricing-block{margin-top:44px}

  .pricing-block{
    padding-top:42px;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .package-group-title,
  .pricing-block-title{
    margin-bottom:12px;
    font-size:clamp(1.6rem,3vw,2.4rem);
    line-height:1.15;
  }

  .pricing-block-copy{
    max-width:820px;
    margin-bottom:28px;
    color:var(--muted-light);
    line-height:1.75;
  }

  .package-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
  }

  .package-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100%;
    padding:38px 30px 30px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--radius-large);
    background:rgba(255,255,255,.045);
  }

  .package-card.recommended{
    border:2px solid var(--coral);
    background:rgba(239,118,95,.07);
    transform:translateY(-6px);
  }

  .package-badge{
    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    padding:8px 15px;
    border-radius:999px;
    background:var(--coral);
    color:#151515;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .package-badge-soft{
    border:1px solid rgba(255,255,255,.42);
    background:var(--dark-soft);
    color:var(--text-light);
  }

  .package-name{
    margin-bottom:12px;
    font-size:1.35rem;
  }

  .package-price{
    margin-bottom:8px;
    color:var(--coral);
    font-size:clamp(2.8rem,5vw,4.7rem);
    font-weight:900;
    line-height:1;
    letter-spacing:-.055em;
  }

  .package-month{
    margin-bottom:20px;
    color:var(--muted-light);
    font-size:.92rem;
  }

  .package-positioning{
    margin:auto 0 0;
    padding-top:20px;
    color:var(--muted-light);
    font-size:.92rem;
    line-height:1.6;
  }

  .package-list{
    margin:0;
    padding-left:19px;
    color:var(--muted-light);
    line-height:1.75;
  }

  .included-panel,
  .reporting-panel,
  .community-panel{
    margin-top:24px;
    padding:30px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--radius-large);
    background:rgba(255,255,255,.045);
  }

  .included-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 28px;
  }

  .included-item{
    display:flex;
    align-items:flex-start;
    gap:11px;
    color:var(--muted-light);
    line-height:1.65;
  }

  .included-check{
    flex:0 0 auto;
    color:var(--coral);
    font-weight:900;
  }

  .pricing-note{
    margin-top:24px;
    color:var(--muted-light);
    line-height:1.75;
  }

  .pricing-note strong{
    color:var(--text-light);
  }

  .reporting-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }

  .reporting-item{
    padding:20px;
    border-radius:var(--radius-small);
    background:rgba(255,255,255,.045);
  }

  .reporting-item h4{
    margin-bottom:8px;
    color:var(--text-light);
    font-size:1rem;
  }

  .reporting-item p{
    margin-bottom:0;
    color:var(--muted-light);
    line-height:1.65;
  }

  /* Zusatzbausteine */

  .module-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }

  .service-module-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }

  .module-card{
    padding:26px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--radius-large);
    background:rgba(255,255,255,.045);
  }

  .module-card h4{
    margin-bottom:10px;
    font-size:1.18rem;
  }

  .module-price{
    margin-bottom:12px;
    color:var(--coral);
    font-size:1.7rem;
    font-weight:900;
    line-height:1.15;
  }

  .module-meta{
    margin-bottom:12px;
    color:var(--text-light);
    font-size:.9rem;
    font-weight:800;
  }

  .module-card p{
    margin-bottom:0;
    color:var(--muted-light);
    line-height:1.65;
  }

  .community-head{margin-bottom:22px}

  .community-head h4{
    margin-bottom:8px;
    font-size:1.25rem;
  }

  .community-head p{
    margin-bottom:0;
    color:var(--muted-light);
    line-height:1.65;
  }

  .detail-columns{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
  }

  .detail-column h5{
    margin:0 0 12px;
    color:var(--text-light);
    font-size:1rem;
  }

  .detail-list{
    margin:0;
    padding-left:19px;
    color:var(--muted-light);
    line-height:1.7;
  }

  .detail-list li+li{margin-top:7px}

  .plus-note{
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.10);
    color:var(--muted-light);
    line-height:1.7;
  }

  /* Projektkarussell */

  .projects-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:42px;
  }

  .carousel-controls{
    display:flex;
    gap:8px;
  }

  .carousel-button{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:transparent;
    color:var(--text-dark);
    cursor:pointer;
    transition:background var(--transition),
      color var(--transition),
      transform var(--transition);
  }

  .carousel-button:hover{
    background:var(--dark);
    color:var(--text-light);
    transform:scale(1.05);
  }

  .project-carousel{
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:8px 2px 28px;
  }

  .project-carousel::-webkit-scrollbar{
    display:none;
  }

  .project-card{
    flex:0 0 min(620px,84vw);
    scroll-snap-align:start;
    border-radius:var(--radius-large);
    background:var(--white);
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform var(--transition),
      box-shadow var(--transition);
  }

  .project-card:hover{
    transform:translateY(-5px);
    box-shadow:0 24px 65px rgba(0,0,0,.14);
  }

  .project-content{padding:28px}

  .project-type{
    margin-bottom:9px;
    color:var(--coral);
    font-size:.78rem;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .project-content h3{
    margin-bottom:10px;
    font-size:1.6rem;
  }

  .project-content p{
    margin-bottom:18px;
    color:var(--muted-dark);
    line-height:1.7;
  }

  .project-link{
    padding:0;
    border:0;
    background:none;
    color:var(--blue);
    font-weight:850;
    cursor:pointer;
  }

  /* Kontakt und Footer */

  #kontakt{
    background:linear-gradient(
      90deg,
      rgba(23,25,28,.82) 0%,
      rgba(23,25,28,.74) 48%,
      rgba(23,25,28,.58) 100%
    ),url("../Koral Kite Kontakt.png")
      center/cover no-repeat;
  }

  .contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:70px;
    align-items:end;
  }

  .contact-title{
    max-width:820px;
    margin-bottom:20px;
    font-size:clamp(3.2rem,7vw,7rem);
    line-height:.96;
    letter-spacing:-.055em;
  }

  .contact-copy{
    max-width:600px;
    color:var(--muted-light);
    line-height:1.7;
  }

  .contact-data{
    padding-left:28px;
    border-left:3px solid var(--coral);
  }

  .contact-data p{
    margin-bottom:12px;
    color:var(--muted-light);
  }

  .contact-data a{
    color:var(--text-light);
    text-decoration:none;
  }

  footer{
    padding:28px 20px;
    background:#111315;
    color:#8e9297;
    text-align:center;
    font-size:.88rem;
    border-top:1px solid rgba(255,255,255,.07);
  }

  .footer-links{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:8px;
  }

  .footer-links a,
  .footer-links button{
    padding:0;
    border:0;
    background:none;
    color:#a9adb2;
    font:inherit;
    text-decoration:underline;
    cursor:pointer;
  }

  /* Pop-ups */

  .modal-overlay{
    position:fixed;
    inset:0;
    z-index:1500;
    display:none;
    background:rgba(5,6,7,.70);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }

  .modal-overlay.open{display:block}

  .modal{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-47%) scale(.98);
    z-index:1501;
    display:none;
    width:min(760px,92vw);
    max-height:82vh;
    overflow-y:auto;
    padding:32px;
    border-radius:var(--radius-large);
    background:var(--white);
    color:var(--text-dark);
    box-shadow:0 30px 100px rgba(0,0,0,.35);
    opacity:0;
    transition:opacity .25s ease,
      transform .25s ease;
  }

  .modal.open{
    display:block;
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }

  .modal-close{
    position:absolute;
    top:15px;
    right:17px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#eeeeeb;
    cursor:pointer;
    font-size:1.15rem;
  }

  .modal h3{
    padding-right:45px;
    margin-bottom:22px;
    font-size:1.8rem;
  }

  .modal-section{
    padding-top:18px;
    margin-top:18px;
    border-top:1px solid var(--line);
  }

  .modal-section h4{margin-bottom:8px}

  .modal-section p,
  .modal-section li{
    color:var(--muted-dark);
    line-height:1.7;
  }

  /* Animation */

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .65s ease,
      transform .65s ease;
  }

  .reveal.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* Tablet */

  @media(max-width:1140px) and (min-width:721px){
    .nav-inner{gap:10px}
    .nav-links{gap:2px}

    .nav-links a{
      padding:7px 8px;
      font-size:.82rem;
    }

    .nav-links .nav-home .home-link{
      padding-right:7px;
    }

    .nav-home-toggle{
      width:26px;
      min-height:33px;
    }
  }

  @media(max-width:1000px){
    .cards{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .about-layout,
    .contact-layout,
    .package-grid,
    .module-grid,
    .service-module-grid,
    .included-grid,
    .reporting-grid,
    .detail-columns{
      grid-template-columns:1fr;
    }

    .package-card.recommended{transform:none}

    .about-text,
    .contact-data{
      padding-left:0;
      border-left:0;
    }

    .about-text{
      padding-top:24px;
      border-top:3px solid var(--coral);
    }

    .contact-data{
      padding-top:25px;
      border-top:3px solid var(--coral);
    }

    .process{
      grid-template-columns:1fr;
      gap:25px;
    }

    .process::before{display:none}

    .process-step{
      text-align:left;
      display:grid;
      grid-template-columns:55px 1fr;
      column-gap:15px;
    }

    .process-dot{
      grid-row:1 / span 2;
      margin:0;
    }
  }

  /* Mobile */

  @media(max-width:720px){
    &{--nav-height:112px}

    .nav-logo{height:30px}
    .shell{width:calc(100% - 28px)}
    .section{padding:78px 0}

    .nav-inner{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-content:center;
      min-height:var(--nav-height);
      gap:8px 10px;
      padding:9px 0 8px;
    }

    .nav-brand{
      grid-column:1;
      grid-row:1;
    }

    .nav-lang{
      grid-column:2;
      grid-row:1;
      justify-self:end;
    }

    .nav-lang a{
      min-height:29px;
      min-width:33px;
    }

    .nav-links{
      grid-column:1 / -1;
      grid-row:2;
      width:100%;
      margin:0;
      display:flex;
      justify-content:space-between;
      flex-wrap:nowrap;
      gap:3px;
      overflow-x:auto;
      scrollbar-width:none;
    }

    .nav-links::-webkit-scrollbar{display:none}

    .nav-links a{
      display:block;
      flex-shrink:0;
      padding:7px 8px;
      font-size:.78rem;
      white-space:nowrap;
    }

    .nav-links a[href="#kontakt"]{
      background:var(--coral);
      color:#151515;
    }

    .nav-home{flex-shrink:0}

    .nav-links .nav-home .home-link{
      padding:7px 7px;
    }

    .nav-home-toggle{
      width:26px;
      min-height:32px;
    }

    .nav-dropdown{
      position:fixed;
      top:calc(var(--nav-height) - 6px);
      left:16px;
      min-width:min(260px,calc(100vw - 32px));
    }

    .nav-full{display:none}
    .nav-short{display:inline}

    .hero h1{
      font-size:clamp(3.2rem,15vw,5rem);
    }

    .cards{
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scrollbar-width:none;
    }

    .cards::-webkit-scrollbar{display:none}

    .card{
      flex:0 0 84%;
      min-height:300px;
      scroll-snap-align:center;
    }

    .brand-moment{min-height:62vh}
    .project-card{flex-basis:88vw}

    .projects-head{
      align-items:flex-start;
      flex-direction:column;
    }

    .modal{padding:25px 20px}
    .site-kite-line path{opacity:.20}
  }

  @media(prefers-reduced-motion:reduce){
    .reveal{
      opacity:1;
      transform:none;
    }
  }
}

/* ==========================================
   STUDIO
   ========================================== */

body.page-studio{

  &{
    --dark:#17191c;
    --dark-soft:#202328;
    --light:#f7f7f5;
    --white:#ffffff;
    --text-dark:#292b2f;
    --text-light:#f6f6f3;
    --muted-dark:#6e7278;
    --muted-light:#b9bdc3;
    --blue:#315ea8;
    --coral:#ef765f;
    --max-width:1180px;
    --nav-height:72px;
    --radius:22px;
    --transition:.3s ease;
    margin:0;
    background:var(--light);
    color:var(--text-dark);
    font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    overflow-x:hidden;
  }

  h1,h2,h3,h4,p{margin-top:0}
  a{color:inherit}
  button{font:inherit}
  img{display:block;max-width:100%}

  .shell{
    width:min(var(--max-width),calc(100% - 40px));
    margin:0 auto;
    position:relative;
    z-index:2;
  }

  .section{
    position:relative;
    padding:105px 0;
    scroll-margin-top:var(--nav-height);
  }

  .section-light{
    background:var(--light);
    color:var(--text-dark);
  }

  .section-dark{
    background:var(--dark);
    color:var(--text-light);
  }

  .section-soft-dark{
    background:var(--dark-soft);
    color:var(--text-light);
  }

  .section-label{
    display:block;
    margin-bottom:18px;
    color:var(--coral);
    font-size:.8rem;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
  }

  .section-title{
    max-width:900px;
    margin-bottom:26px;
    font-size:clamp(2.25rem,5vw,4.65rem);
    letter-spacing:-.045em;
    line-height:1.05;
  }

  .section-intro{
    max-width:790px;
    font-size:clamp(1rem,1.5vw,1.16rem);
    line-height:1.8;
  }

  .section-dark .section-intro,
  .section-soft-dark .section-intro{
    color:var(--muted-light);
  }

  .section-light .section-intro{
    color:var(--muted-dark);
  }

  .accent{color:var(--coral)}

  /* Navigation */

  .nav{
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:1000;
    background:rgba(23,25,28,.90);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .nav-inner{
    width:min(var(--max-width),calc(100% - 32px));
    min-height:var(--nav-height);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }

  .nav-brand{
    flex-shrink:0;
    display:flex;
    align-items:center;
    text-decoration:none;
  }

  .nav-logo{height:42px;width:auto}

  .nav-links{
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap:nowrap;
    margin-left:auto;
  }

  .nav-links a{
    padding:8px 12px;
    color:var(--text-light);
    font-size:.92rem;
    font-weight:700;
    text-decoration:none;
    border-radius:999px;
    transition:var(--transition);
  }

  .nav-links a:hover,
  .nav-links a.active{
    background:var(--coral);
    color:#151515;
  }

  /* Dropdown */

  .nav-home{
    position:relative;
    display:flex;
    align-items:center;
    flex-shrink:0;
  }

  .nav-links .home-link{
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px 0 0 999px;
    padding-right:8px;
  }

  .nav-home-toggle{
    display:grid;
    place-items:center;
    width:30px;
    min-height:38px;
    padding:0;
    color:var(--text-light);
    background:transparent;
    border:1px solid rgba(255,255,255,.2);
    border-left:0;
    border-radius:0 999px 999px 0;
    cursor:pointer;
    transition:var(--transition);
  }

  .nav-home-toggle:hover,
  .nav-home-toggle:focus-visible{
    background:var(--coral);
    color:#151515;
  }

  .nav-home-toggle span{
    transition:transform .2s ease;
  }

  .nav-home.is-open .nav-home-toggle span{
    transform:rotate(180deg);
  }

  .nav-dropdown{
    position:absolute;
    top:100%;
    left:0;
    z-index:1100;
    min-width:235px;
    padding:8px;
    border:1px solid rgba(255,255,255,.19);
    border-radius:14px;
    background:#22262b;
    box-shadow:0 16px 38px rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(5px);
    transition:opacity .18s ease,
      transform .18s ease,
      visibility .18s ease;
  }

  .nav-home:hover .nav-dropdown,
  .nav-home:focus-within .nav-dropdown,
  .nav-home.is-open .nav-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-dropdown a{
    display:block;
    padding:11px 12px;
    border-radius:8px;
    white-space:nowrap;
    font-size:.9rem;
  }

  .nav-dropdown a[aria-current="page"]{
    color:var(--coral);
  }

  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible{
    background:var(--coral);
    color:#151515;
  }

  /* Sprachumschalter */

  .nav-lang{
    display:flex;
    gap:3px;
    align-items:center;
    flex-shrink:0;
    padding:3px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
  }

  .nav-lang a{
    display:grid;
    place-items:center;
    min-width:33px;
    min-height:31px;
    padding:4px 7px;
    color:var(--text-light);
    text-decoration:none;
    font-size:.78rem;
    font-weight:850;
    border-radius:999px;
  }

  .nav-lang a:hover{
    background:rgba(255,255,255,.13);
  }

  .nav-lang a.is-active{
    background:var(--coral);
    color:#151515;
  }

  .nav-links a:focus-visible,
  .nav-home-toggle:focus-visible,
  .nav-lang a:focus-visible{
    outline:2px solid var(--coral);
    outline-offset:3px;
  }

  .nav-short{display:none}

  /* Buttons und Hero */

  .button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:48px;
    padding:0 22px;
    font-weight:800;
    text-decoration:none;
    border-radius:999px;
    transition:var(--transition);
  }

  .button:hover{
    transform:translateY(-3px);
  }

  .button-primary{
    background:var(--coral);
    color:#151515;
  }

  .button-secondary{
    color:var(--text-light);
    border:1px solid rgba(255,255,255,.3);
  }

  .button-secondary:hover{
    background:rgba(255,255,255,.08);
  }

  .hero{
    background:radial-gradient(
      circle at 82% 28%,
      rgba(49,94,168,.16),
      transparent 32%
    ),var(--dark);
    color:var(--text-light);
    overflow:hidden;
  }

  .hero-content{}

  .hero-brand-name{
    margin-bottom:14px;
    font-size:1.15rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .hero h1{
    margin-bottom:26px;
    font-size:clamp(3rem,7.5vw,7rem);
    line-height:.95;
    letter-spacing:-.055em;
  }

  .hero h1 span{
    color:var(--coral);
  }

  .hero-copy{
    max-width:690px;
    margin-bottom:35px;
    color:var(--muted-light);
    font-size:1.18rem;
    line-height:1.7;
  }

  .hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }

  /* Kite-Schnur und Über uns */

  .page-wrap{
    position:relative;
    isolation:isolate;
  }

  .site-kite-line{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
  }

  .site-kite-line path{
    fill:none;
    stroke:var(--coral);
    stroke-width:2.2;
    opacity:.28;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
  }

  .page-wrap>header,
  .page-wrap>section{
    position:relative;
    z-index:0;
  }

  .about-layout{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:clamp(45px,8vw,110px);
    align-items:center;
  }

  .about-statement{
    font-size:clamp(2.4rem,5.4vw,5.2rem);
    line-height:1.04;
    letter-spacing:-.05em;
    font-weight:850;
  }

  .about-text{
    padding-left:28px;
    border-left:4px solid var(--coral);
    color:var(--muted-dark);
    font-size:1.08rem;
    line-height:1.85;
  }

  .brand-moment{
    min-height:72vh;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(
      90deg,
      rgba(23,25,28,.82),
      rgba(23,25,28,.48) 55%,
      rgba(23,25,28,.16)
    ),url("../Koral Kite Studio Design.png")
      center/cover no-repeat;
    color:var(--text-light);
  }

  .brand-moment-content{
    max-width:800px;
    padding:100px 0;
  }

  .brand-moment h2{
    font-size:clamp(3rem,7vw,6.8rem);
    line-height:.95;
    letter-spacing:-.055em;
  }

  .brand-moment p{
    max-width:650px;
    color:rgba(255,255,255,.78);
    font-size:1.15rem;
    line-height:1.7;
  }

  /* Leistungsübersicht */

  .web-overview{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    gap:40px;
    margin:50px 0 65px;
    padding:48px;
    border:1px solid rgba(239,118,95,.40);
    border-radius:var(--radius);
    background:linear-gradient(
      130deg,
      rgba(239,118,95,.09),
      rgba(255,255,255,.025)
    );
  }

  .web-overview-kicker{
    display:block;
    margin-bottom:20px;
    color:var(--coral);
    font-size:.8rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
  }

  .web-overview h3{
    font-size:clamp(2.1rem,4vw,3.6rem);
    line-height:1.05;
    letter-spacing:-.045em;
  }

  .web-overview p{
    max-width:640px;
    margin-bottom:28px;
    color:var(--muted-light);
    line-height:1.75;
  }

  .web-browser{
    background:#f5f6f8;
    border-radius:13px;
    overflow:hidden;
    box-shadow:0 25px 55px rgba(0,0,0,.2);
    transform:rotate(2deg);
  }

  .web-browser-top{
    height:36px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:0 13px;
    background:#e9ebef;
  }

  .web-browser-top i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#bfc5ce;
  }

  .web-browser-top span{
    margin-left:12px;
    color:#747b86;
    font-size:10px;
  }

  .web-browser-content{padding:35px 27px}

  .web-browser-tag{
    margin-bottom:18px;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
  }

  .web-browser-line{
    width:67%;
    height:13px;
    margin-bottom:11px;
    border-radius:4px;
    background:#b5bbc5;
  }

  .web-browser-line.wide{
    width:90%;
    height:22px;
    background:#252c39;
  }

  .web-browser-blocks{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:28px;
  }

  .web-browser-blocks b{
    height:55px;
    border-radius:7px;
    background:#e6e9ed;
    border-top:4px solid var(--coral);
  }

  .studio-other-label{
    margin-bottom:20px;
    color:var(--muted-light);
    font-weight:800;
    letter-spacing:.05em;
  }

  .cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
  }

  .card{
    position:relative;
    min-height:285px;
    padding:26px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius);
    background:rgba(255,255,255,.045);
    transition:var(--transition);
    overflow:hidden;
  }

  .card:hover{
    transform:translateY(-6px);
    border-color:rgba(239,118,95,.5);
    background:rgba(255,255,255,.07);
  }

  .card-number{
    margin-bottom:35px;
    color:var(--coral);
    font-size:.8rem;
    font-weight:850;
  }

  .card h3{
    font-size:1.25rem;
    line-height:1.3;
  }

  .card p{
    color:var(--muted-light);
    line-height:1.7;
  }

  /* Arbeitsweise */

  .process{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:15px;
    margin-top:65px;
  }

  .process-step{text-align:center}

  .process-dot{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    margin:0 auto 20px;
    border:2px solid var(--blue);
    border-radius:50%;
    color:var(--blue);
    font-size:.82rem;
    font-weight:900;
  }

  .process-step h3{font-size:1rem}

  .process-step p{
    color:var(--muted-dark);
    font-size:.9rem;
    line-height:1.55;
  }

  /* Webdesign-Pakete */

  .studio-web-section{
    scroll-margin-top:calc(var(--nav-height) + 24px);
  }

  .web-section-head{margin-bottom:35px}

  .web-section-head h3{
    max-width:850px;
    margin-bottom:18px;
    font-size:clamp(2rem,3.8vw,3.5rem);
    letter-spacing:-.045em;
    line-height:1.1;
  }

  .web-section-head p{
    max-width:770px;
    color:var(--muted-light);
    line-height:1.8;
  }

  .web-package-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px;
    align-items:start;
  }

  .web-package{
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.17);
    border-radius:var(--radius);
    background:rgba(255,255,255,.045);
  }

  .web-package-featured{
    border-color:var(--coral);
    background:rgba(239,118,95,.09);
    box-shadow:0 14px 30px rgba(0,0,0,.12);
  }

  .web-package-header{
    padding:28px 25px 24px;
  }

  .web-package-type{
    color:var(--coral);
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .web-package h4{
    margin:18px 0 12px;
    font-size:1.7rem;
  }

  .web-package-price{
    color:var(--white);
    font-size:clamp(2rem,3vw,2.55rem);
    font-weight:900;
    white-space:nowrap;
    letter-spacing:-.04em;
  }

  .web-package-price span{
    color:var(--muted-light);
    font-size:.86rem;
    font-weight:600;
    letter-spacing:normal;
  }

  .web-package-header p{
    min-height:78px;
    margin:15px 0 0;
    color:var(--muted-light);
    line-height:1.65;
  }

  /* Akkordeons */

  .accordion{
    border-top:1px solid rgba(255,255,255,.12);
  }

  .accordion summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:19px 24px;
    color:var(--white);
    font-size:.95rem;
    font-weight:750;
    cursor:pointer;
    list-style:none;
  }

  .accordion summary::-webkit-details-marker{
    display:none;
  }

  .accordion summary:hover{
    color:var(--coral);
  }

  .accordion summary:focus-visible{
    outline:3px solid var(--coral);
    outline-offset:-3px;
  }

  .accordion-plus{
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:32px;
    height:32px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    font-size:1.25rem;
    transition:transform .25s;
  }

  .accordion[open] .accordion-plus{
    transform:rotate(45deg);
    color:var(--coral);
  }

  .accordion-inner{
    padding:0 24px 25px;
    border-top:1px solid rgba(255,255,255,.08);
  }

  .accordion-inner p{
    margin-top:18px;
    color:var(--muted-light);
    line-height:1.75;
  }

  .accordion-inner ul{
    margin:20px 0;
    padding-left:20px;
    color:var(--muted-light);
    line-height:1.75;
  }

  .accordion-inner li+li{margin-top:6px}

  .accordion-link{
    color:var(--coral);
    font-weight:800;
    text-decoration:none;
  }

  .accordion-link:hover{text-decoration:underline}

  .web-note{
    margin-top:20px;
    padding:22px 25px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    color:var(--muted-light);
    line-height:1.75;
    font-size:.93rem;
  }

  .web-note strong{
    color:var(--white);
  }

  /* Wegweiser */

  .offer-guide{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:24px;
    margin-top:24px;
    padding:26px 28px;
    border:1px solid rgba(239,118,95,.45);
    border-radius:var(--radius);
    background:linear-gradient(
      125deg,
      rgba(239,118,95,.12),
      rgba(255,255,255,.035)
    );
  }

  .offer-guide-label{
    display:block;
    margin-bottom:8px;
    color:var(--coral);
    font-size:.78rem;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .offer-guide h4{
    margin-bottom:9px;
    font-size:clamp(1.4rem,2.4vw,2rem);
  }

  .offer-guide p{
    margin:0;
    color:var(--muted-light);
    line-height:1.7;
  }

  .offer-guide-actions{
    display:grid;
    gap:9px;
  }

  .offer-guide-actions a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:42px;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    text-decoration:none;
    font-size:.92rem;
    font-weight:750;
    transition:background var(--transition),
      border-color var(--transition);
  }

  .offer-guide-actions a:hover,
  .offer-guide-actions a:focus-visible{
    background:rgba(239,118,95,.10);
    border-color:var(--coral);
  }

  .offer-guide-actions a span{
    color:var(--coral);
  }

  /* Zusatzbausteine */

  .studio-web-subhead{
    margin:58px 0 25px;
    scroll-margin-top:calc(var(--nav-height) + 25px);
  }

  .studio-web-subhead h4{
    margin-bottom:12px;
    font-size:clamp(1.7rem,2.7vw,2.5rem);
    letter-spacing:-.035em;
  }

  .studio-web-subhead p{
    max-width:800px;
    color:var(--muted-light);
    line-height:1.75;
  }

  .web-extra-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
  }

  .web-extra-card{
    min-width:0;
    padding:23px 19px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:rgba(255,255,255,.035);
  }

  .web-extra-card span{
    display:block;
    margin-bottom:12px;
    color:var(--muted-light);
    font-size:.84rem;
  }

  .web-extra-card strong{
    color:var(--coral);
    font-size:1.05rem;
    line-height:1.45;
  }

  .web-extra-card p{
    margin:12px 0 0;
    color:var(--muted-light);
    font-size:.86rem;
    line-height:1.65;
  }

  /* Websitepflege */

  .web-care-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
    align-items:start;
  }

  .web-care-card{
    min-width:0;
    padding:28px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--radius);
    background:rgba(255,255,255,.045);
  }

  .web-care-label{
    color:var(--coral);
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
  }

  .web-care-card h5{
    margin:15px 0;
    font-size:1.4rem;
  }

  .web-care-price{
    color:var(--white);
    font-size:2rem;
    font-weight:900;
  }

  .web-care-price span{
    color:var(--muted-light);
    font-size:.86rem;
    font-weight:600;
  }

  .web-care-card>p{
    margin:17px 0;
    color:var(--muted-light);
    line-height:1.75;
  }

  .web-care-card .accordion{
    margin-top:15px;
  }

  .web-care-card .accordion summary{
    padding-left:0;
    padding-right:0;
  }

  .web-care-card .accordion-inner{
    padding-left:0;
    padding-right:0;
  }

  .web-care-note{
    margin-top:19px;
    padding:21px 24px;
    border-left:3px solid var(--coral);
    background:rgba(239,118,95,.055);
    color:var(--muted-light);
    line-height:1.75;
    font-size:.93rem;
  }

  .web-care-note strong{color:var(--white)}

  /* Weitere Studio-Angebote */

  .studio-existing-services-head{
    scroll-margin-top:calc(var(--nav-height) + 25px);
    margin:85px 0 28px;
    padding-top:60px;
    border-top:1px solid rgba(255,255,255,.16);
  }

  .studio-existing-services-head h3{
    font-size:clamp(2rem,3.7vw,3.3rem);
    letter-spacing:-.04em;
  }

  .studio-existing-services-head p{
    color:var(--muted-light);
    line-height:1.7;
  }

  .studio-service-list{
    display:grid;
    gap:14px;
  }

  .studio-service{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--radius);
    background:rgba(255,255,255,.045);
    transition:var(--transition);
  }

  .studio-service:has(details[open]){
    border-color:rgba(239,118,95,.55);
    background:rgba(255,255,255,.065);
  }

  .studio-service summary{
    display:grid;
    grid-template-columns:110px minmax(0,1fr) auto 40px;
    gap:22px;
    align-items:center;
    padding:22px 26px;
    cursor:pointer;
    list-style:none;
  }

  .studio-service summary::-webkit-details-marker{
    display:none;
  }

  .studio-service summary:focus-visible{
    outline:3px solid var(--coral);
    outline-offset:-3px;
  }

  .studio-service-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    width:110px;
    height:76px;
    padding:10px;
    border-radius:14px;
    background:linear-gradient(
      135deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    );
    color:var(--muted-light);
    font-size:.72rem;
    font-weight:750;
    text-align:center;
  }

  .studio-service-main h3{
    margin:0 0 6px;
    font-size:1.22rem;
  }

  .studio-service-main p{
    margin:0;
    color:var(--muted-light);
    font-size:.92rem;
    line-height:1.55;
  }

  .studio-service-price{
    color:var(--coral);
    font-size:1.33rem;
    font-weight:900;
    white-space:nowrap;
  }

  .studio-service-plus{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    font-size:1.3rem;
    transition:var(--transition);
  }

  .studio-service details[open] .studio-service-plus{
    transform:rotate(45deg);
    background:var(--coral);
    color:#151515;
  }

  .studio-service-details{
    padding:25px 26px 30px 158px;
    border-top:1px solid rgba(255,255,255,.1);
    color:var(--muted-light);
    line-height:1.8;
  }

  .studio-service-details ul{
    padding-left:20px;
  }

  /* Projekte */

  .projects-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:42px;
  }

  .carousel-controls{
    display:flex;
    gap:8px;
  }

  .carousel-button{
    width:44px;
    height:44px;
    border:1px solid rgba(0,0,0,.2);
    border-radius:50%;
    background:transparent;
    color:var(--text-dark);
    cursor:pointer;
  }

  .carousel-button:hover{
    background:var(--dark);
    color:var(--white);
  }

  .project-carousel{
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:8px 2px 28px;
  }

  .project-carousel::-webkit-scrollbar{
    display:none;
  }

  .project-card{
    flex:0 0 min(620px,84vw);
    scroll-snap-align:start;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--white);
    box-shadow:0 18px 50px rgba(0,0,0,.10);
  }

  .project-content{padding:28px}

  .project-type{
    color:var(--coral);
    font-size:.78rem;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.1em;
  }

  .project-content h3{
    margin:12px 0;
    font-size:1.6rem;
  }

  .project-content p{
    color:var(--muted-dark);
    line-height:1.7;
  }

  /* Kontakt und Footer */

  #kontakt{
    background:linear-gradient(
      90deg,
      rgba(23,25,28,.82),
      rgba(23,25,28,.74) 48%,
      rgba(23,25,28,.58)
    ),url("../Koral Kite Kontakt.png")
      center/cover no-repeat;
  }

  .contact-layout{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:70px;
    align-items:end;
  }

  .contact-title{
    font-size:clamp(3.2rem,7vw,7rem);
    line-height:.96;
    letter-spacing:-.055em;
  }

  .contact-copy{
    max-width:600px;
    color:var(--muted-light);
    line-height:1.7;
  }

  .contact-data{
    padding-left:28px;
    border-left:3px solid var(--coral);
  }

  .contact-data p{
    color:var(--muted-light);
  }

  .contact-data a{
    color:var(--text-light);
    text-decoration:none;
  }

  footer{
    padding:30px 20px;
    background:#111315;
    color:#8e9297;
    text-align:center;
    font-size:.88rem;
  }

  .footer-links{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:10px;
  }

  .footer-links a{
    color:#a9adb2;
  }

  /* Animation */

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .65s ease,
      transform .65s ease;
  }

  .reveal.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* Tablet und horizontales Navigationsmenü */

  @media(max-width:1080px){
    &{--nav-height:112px}

    .nav-inner{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-content:center;
      gap:7px 12px;
      padding:9px 0 8px;
    }

    .nav-brand{
      grid-column:1;
      grid-row:1;
    }

    .nav-lang{
      grid-column:2;
      grid-row:1;
      justify-self:end;
    }

    .nav-links{
      grid-column:1 / -1;
      grid-row:2;
      width:100%;
      min-width:0;
      margin-left:0;
      justify-content:flex-start;
      flex-wrap:nowrap;
      gap:3px;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }

    .nav-links::-webkit-scrollbar{display:none}

    .nav-links>a,
    .nav-home{flex-shrink:0}

    .nav-links>a{
      padding:7px 8px;
      font-size:.8rem;
      white-space:nowrap;
    }

    .nav-dropdown{
      position:fixed;
      top:calc(var(--nav-height) - 6px);
      left:16px;
      max-width:calc(100vw - 32px);
    }

    .nav-home .home-link{
      padding:7px 8px;
      font-size:.8rem;
    }

    .nav-home-toggle{
      min-height:34px;
      width:28px;
    }
  }

  @media(max-width:1000px){
    .cards{grid-template-columns:repeat(2,1fr)}
    .offer-guide{grid-template-columns:1fr}

    .web-package-grid,
    .web-extra-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .about-layout,
    .contact-layout{
      grid-template-columns:1fr;
    }

    .process{
      grid-template-columns:1fr;
      gap:25px;
    }

    .process-step{
      display:grid;
      grid-template-columns:55px 1fr;
      gap:12px;
      text-align:left;
    }

    .process-dot{
      grid-row:span 2;
      margin:0;
    }

    .studio-service summary{
      grid-template-columns:90px minmax(0,1fr) auto 40px;
    }

    .studio-service-preview{
      width:90px;
    }

    .studio-service-details{
      padding-left:138px;
    }

    .about-text,
    .contact-data{
      padding-left:0;
      padding-top:24px;
      border-left:0;
      border-top:3px solid var(--coral);
    }
  }

  /* Mobile */

  @media(max-width:720px){
    &{--nav-height:112px}

    .nav-logo{height:30px}
    .shell{width:calc(100% - 28px)}
    .section{padding:78px 0}

    .nav-links>a{display:block}

    .nav-links>a[href="#studio-angebote"] .nav-full{
      display:none;
    }

    .nav-links>a[href="#studio-angebote"] .nav-short{
      display:inline;
    }

    .nav-links>a,
    .nav-home .home-link{
      padding:6px 6px;
      font-size:.76rem;
    }

    .nav-home-toggle{
      min-height:32px;
      width:25px;
    }

    .nav-links a[href="#kontakt"]{
      background:var(--coral);
      color:#151515;
    }

    .hero h1{
      font-size:clamp(3.2rem,14vw,5rem);
    }

    .brand-moment{
      min-height:62vh;
    }

    .web-overview{
      grid-template-columns:1fr;
      padding:28px 22px;
      margin:35px 0 50px;
    }

    .web-overview-visual{display:none}

    .cards{
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
    }

    .card{
      flex:0 0 84%;
      scroll-snap-align:center;
    }

    .offer-guide{
      padding:23px 20px;
    }

    .web-package-grid,
    .web-extra-grid,
    .web-care-grid{
      grid-template-columns:1fr;
    }

    .web-package-header p{min-height:0}
    .web-package-header{padding:25px 21px}
    .accordion summary{padding:18px 20px}
    .accordion-inner{padding:0 20px 22px}
    .web-care-card{padding:22px}

    .studio-service summary{
      grid-template-columns:minmax(0,1fr) auto 38px;
      gap:12px;
      padding:20px;
    }

    .studio-service-preview{display:none}
    .studio-service-price{font-size:1.05rem}
    .studio-service-main p{font-size:.85rem}
    .studio-service-details{padding:22px}
    .project-card{flex-basis:88vw}

    .projects-head{
      align-items:flex-start;
      flex-direction:column;
    }

    .contact-layout{gap:30px}
  }

  @media(prefers-reduced-motion:reduce){
    .reveal{
      opacity:1;
      transform:none;
    }
  }

  /* Bestehende Regel aus dem Original */
  .page-marketing .module-group-heading{
    margin-top:38px;
  }
}