:root {
      color-scheme: light dark;

      --bg-hero: #f5f5f7;
      --bg-books: #ffffff;
      --bg-starter: #111111;
      --bg-expression: #f5f5f7;
      --bg-languages: #ffffff;
      --bg-testimonials: #eef2f7;
      --bg-about: #ffffff;
      --bg-trust: #f5f5f7;
      --bg-social: #ffffff;
      --bg-faq: #f5f5f7;

      --text: #1d1d1f;
      --text-soft: #6e6e73;
      --text-dark-section: #f5f5f7;
      --line: rgba(0, 0, 0, 0.08);
      --card: rgba(255, 255, 255, 0.76);
      --card-strong: #ffffff;
      --shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
      --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.06);
      --primary: #0071e3;
      --primary-hover: #0077ed;
      --secondary-border: rgba(0, 113, 227, 0.42);
      --hero-button-red: #dd3b32;
      --hero-button-yellow: #efb400;
      --hero-button-red-text: #ffffff;
      --hero-button-yellow-text: #1d1d1f;
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-pill: 999px;
      --container: 1200px;
      --text-max: 720px;
      --section-space: 120px;
      --nav-height: 64px;
      --font-stack: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }


@media (prefers-color-scheme: dark) {

:root{

--bg-hero:#1f2733;
--bg-books:#232c39;
--bg-starter:#273242;
--bg-expression:#232c39;
--bg-languages:#232c39;
--bg-testimonials:#263041;
--bg-about:#232c39;
--bg-trust:#243040;
--bg-social:#232c39;
--bg-faq:#243040;

--text:#f5f5f7;
--text-soft:#b7c1cf;
--text-dark-section:#f5f5f7;

--line:rgba(170,190,210,0.12);

--card:rgba(255,255,255,0.04);
--card-strong:#2c3648;

--shadow:0 16px 42px rgba(0,0,0,0.35);
--shadow-soft:0 10px 28px rgba(0,0,0,0.28);

--secondary-border:rgba(140,170,210,0.35);

.btn-secondary{
color:#ffffff;
border:1.5px solid rgba(255,255,255,0.6);
}

.btn-secondary:hover{
background:rgba(255,255,255,0.08);
border-color:#ffffff;
}
.section--hero{
background:
radial-gradient(circle at 50% -10%, rgba(120,160,220,0.15), transparent 60%),
var(--bg-hero);
}
}
}



    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font-stack);
      color: var(--text);
      background: var(--bg-hero);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    img {
      max-width: 100%;
      display: block;
      height: auto;
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

.fixed-bar{
position:fixed;
top:0;
left:0;
right:0;
height:58px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 20px;

background:rgba(255,255,255,0.8);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

border-bottom:1px solid var(--line);

z-index:1000;
}



    @media (prefers-color-scheme: dark) {
      .fixed-bar {
        background: rgba(18,18,18,0.76);
      }
.carousel-arrow{

background:rgba(40,44,52,0.75);
border-color:rgba(255,255,255,0.08);

}
}

.left-icons,
.center-links,
.right-icons{
display:flex;
align-items:center;
gap:14px;
}

.center-links{
flex:1;
justify-content:center;
font-weight:600;
}

.right-icons{
justify-content:flex-end;
}

    

    .hamburger {
      width: 44px;
      height: 44px;
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text);
    }

    .hamburger span,
    .hamburger span::before,
    .hamburger span::after {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      content: "";
      position: relative;
      transition: transform .3s ease;
    }

    .hamburger span::before { position: absolute; top: -6px; }
    .hamburger span::after { position: absolute; top: 6px; }

    .brand-mini {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .page {
      padding-top: var(--nav-height);
    }

    .section {
      padding: var(--section-space) 0;
      overflow: clip;
    }

.section--hero{
background:
radial-gradient(circle at 50% -10%, rgba(0,113,227,0.10), transparent 60%),
radial-gradient(circle at 80% 20%, rgba(0,0,0,0.03), transparent 60%),
var(--bg-hero);
}    .section--books { background: var(--bg-books); }
    .section--starter { background: var(--bg-starter); color: var(--text-dark-section); }
    .section--expression { background: var(--bg-expression); }
    .section--languages { background: var(--bg-languages); }
    .section--testimonials { background: var(--bg-testimonials); }
    .section--about { background: var(--bg-about); }
    .section--trust { background: var(--bg-trust); }
    .section--social { background: var(--bg-social); }
    .section--faq { background: var(--bg-faq); }

    .container {
      width: min(100%, var(--container));
      margin: 0 auto;
      padding: 0 24px;
    }

    .centered-text {
      max-width: var(--text-max);
      margin: 0 auto;
      text-align: center;
    }

    .eyebrow {
      display: inline-block;
      font-size: 0.98rem;
      line-height: 1.2;
      font-weight: 600;
      color: var(--text-soft);
      margin: 0 0 18px;
      letter-spacing: -0.01em;
    }

    h1, h2, h3, p {
      margin: 0;
    }

.display-title{
font-size: clamp(3.2rem,7.2vw,6rem);
line-height:1.1;
letter-spacing:-0.02em;
font-weight:700;
}

    .title-light{font-weight:500}
    .title-bold{font-weight:800} /* spanisch stärker betont */

    .section-title {
      font-size: clamp(2.2rem, 5vw, 4rem);
      line-height: 1.02;
      letter-spacing: -0.04em;
      font-weight: 700;
    }

.subline{
margin-top:12px;
font-size: clamp(1.6rem,2.5vw,2.2rem);
line-height:1.2;
letter-spacing:-0.02em;
font-weight:500;
color: var(--text-soft);
text-align:center;
}

    .mini-info {
      margin-top: 18px;
      font-size: clamp(1rem, 1.6vw, 1.25rem);
      line-height: 1.45;
      color: var(--text-soft);
      max-width: 700px;
      margin-inline: auto;
    }

    .cta-row {
      margin-top: 34px;
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn-books {
      padding: 12px 22px;
      min-height: 44px;
      font-size: 0.95rem;
      width: auto; /* niemals full width */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
    }



    .btn {
      appearance: none;
      border: none;
      cursor: pointer;
      border-radius: var(--radius-pill);
      padding: 14px 26px;
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-weight: 600;
      font-size: 1.02rem;
      transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
    }

    .btn:hover { transform: translateY(-2px); }
    .btn:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }

    .btn-primary {
      background: var(--primary);
      color: #fff;
      box-shadow: var(--shadow-soft);
    }

    .btn-primary:hover { background: var(--primary-hover); }

    .btn-secondary {
      background: transparent;
      color: var(--primary);
      border: 1.5px solid var(--secondary-border);
    }

    .btn-hero-red {
      background: var(--hero-button-red);
      color: var(--hero-button-red-text);
      box-shadow: var(--shadow-soft);
    }

    .btn-hero-yellow {
      background: var(--hero-button-yellow);
      color: var(--hero-button-yellow-text);
      box-shadow: var(--shadow-soft);
    }

.hero-grid{
  display:grid;
  gap:25px;                 /* luftiger Abstand */
  width:min(100%,720px);    /* mehr Platz für breite Buttons */
  margin:34px auto 0;
grid-template-columns:repeat(2,minmax(0,1fr));
  justify-content:center;   /* wirklich mittig */
}

.hero-grid .btn{
min-height:66px;
font-size:1.05rem;
padding:18px 34px;

width:clamp(260px,22vw,340px);

justify-content:center;

border:1px solid rgba(0,0,0,0.06);

box-shadow:
0 8px 24px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.4);

backdrop-filter: blur(6px);
}

@media (prefers-color-scheme: dark){

.hero-grid .btn{
border:1px solid rgba(255,255,255,0.08);

box-shadow:
0 10px 26px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.08);
}

}

    .trust-note {
      margin-top: 26px;
      text-align: center;
    }

    .trust-note strong {
      display: block;
      font-size: 1.05rem;
      font-weight: 700;
    }

    .trust-note span {
      display: block;
      margin-top: 6px;
      color: var(--text-soft);
      font-size: 0.98rem;
    }

.hero-visual{
margin:64px auto 0;

width:min(100%,760px);

border-radius:42px;

overflow:hidden;

box-shadow:
0 40px 90px rgba(0,0,0,0.12);

transform:translateZ(0);
}    

.hero-visual-panorama{

margin-top:40px;

width:min(100%,1100px);
margin-inline:auto;

border-radius:28px;

box-shadow:0 30px 80px rgba(0,0,0,0.12);

overflow:hidden;

position:relative;
}

.hero-visual-panorama img{

max-height:280px;

}


.hero-visual-panorama::after{

content:"";

position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
rgba(0,0,0,0.28) 0%,
rgba(0,0,0,0.18) 18%,
rgba(0,0,0,0.05) 40%,
transparent 65%
);

pointer-events:none;

}

@media (prefers-color-scheme: dark){

.hero-visual-panorama::after{
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.45) 0%,
rgba(0,0,0,0.28) 20%,
rgba(0,0,0,0.08) 45%,
transparent 70%
);
}

}

.hero-visual-panorama img{
width:100%;
height:auto;
aspect-ratio:2400 / 1100;
object-fit:cover;
display:block;
max-height:480px;
margin:auto;
}

.feature-visual{

margin:60px auto -80px;

width:min(100%,900px);

border-radius:32px;

overflow:hidden;

background:var(--card-strong);

box-shadow:
0 60px 120px rgba(0,0,0,0.22);

transform:translateZ(0);
margin-bottom:-80px;

}

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

.feature-visual{
width:min(100%,760px);
margin:50px auto -70px;
border-radius: 28px;
}

}

.section--starter{
padding-bottom:160px;
}
    .feature-visual img {
      width: 100%;
      aspect-ratio: 16 / 10; /* ruhigere Apple-artige Proportion */
      object-fit: cover;
    }

.typing-line{
  display:inline-block;
  width:16ch;            /* Platz reservieren */
  text-align:center;     /* Inhalt mittig */
  white-space:nowrap;
  line-height:1;
  vertical-align:0.03em;
}

    .typing-cursor {
      display: inline-block;
      width: 1px;
      height: 1em;
      background: currentColor;
      animation: blink 1s step-end infinite;
      transform: translateY(3px);
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

    .carousel-shell {
      margin-top: 42px;
      position: relative;
    }

    .carousel {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      padding: 16px calc(50% - 150px) 8px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

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

    .carousel-card {
      flex: 0 0 clamp(220px, 26vw, 300px);
      border-radius: 1px;
      scroll-snap-align: center;
      overflow: hidden;
      background: var(--card-strong);
      box-shadow: var(--shadow-soft);
      transform: scale(0.88);
      opacity: 0.48;
      transition: transform .45s ease, opacity .45s ease, filter .45s ease;
      filter: saturate(0.85);
    }

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

.carousel-card{
flex:0 0 240px;
}

.carousel{
padding-inline:calc(50% - 200px);
gap: 20px;
}
}

    
    /* TESTIMONIAL CARDS */

.section--testimonials .carousel-card{

border-radius:28px;

padding:38px 32px;

aspect-ratio:1 / 1;

display:flex;
flex-direction:column;
justify-content:center;

background:var(--card);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border:1px solid var(--line);

box-shadow:var(--shadow-soft);

transform:scale(.92);
opacity:.55;

transition:
transform .45s ease,
opacity .45s ease,
box-shadow .45s ease;
}

.section--testimonials .carousel-card.is-active{

transform:translateY(-12px) scale(1.04);
opacity:1;

box-shadow:
0 20px 60px rgba(0,0,0,0.15);

}
@media (max-width:740px){

.section--testimonials .carousel{
padding-inline:calc(50% - 170px);
}

.section--testimonials .carousel-card{
flex:0 0 300px;
padding:38px 32px;
border-radius:30px;
}

.testimonial-text{
font-size:1.35rem;
line-height:1.5;
}

.testimonial-author{
margin-top:20px;
font-size:1rem;
}
.section--about .cta-row{
justify-content:center !important;
}
}


.testimonial-stars{
font-size:1.15rem;
margin-bottom:16px;
}

.testimonial-text{
font-size:1.25rem;
line-height:1.45;
letter-spacing:-0.02em;
}

.testimonial-author{
margin-top:18px;
color:var(--text-soft);
font-size:0.95rem;
}

.section--testimonials .carousel-card.is-active{

transform:translateY(-10px) scale(1.02);

box-shadow:
0 28px 80px rgba(0,0,0,0.18);

}

    .carousel-card.is-active {
      transform: scale(1);
      opacity: 1;
      filter: saturate(1);
    }

    .carousel-card img {
      width: 100%;
      aspect-ratio: 10 / 15.5;
      object-fit: cover;
      background: #fff;
    }

.carousel-dots{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:8px;
}

.dot{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  padding:0;
  margin:0;

  width:6px;
  height:6px;
  border-radius:50%;

  background:rgba(0,0,0,0.25);

  cursor:pointer;

  transition:
    transform .2s ease,
    background-color .2s ease,
    opacity .2s ease;

  opacity:.6;
}

.dot.is-active{
  background:rgba(0,0,0,0.8);
  transform:scale(1.25);
  opacity:1;
}

@media (prefers-color-scheme: dark){

  .dot{
    background:rgba(255,255,255,0.3);
  }

  .dot.is-active{
    background:rgba(255,255,255,0.9);
  }

}

    .expression-card {
      margin: 42px auto 0;
      max-width: 860px;
      padding: 40px 32px;
      border-radius: 32px;
      background: var(--card);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--line);
      text-align: center;
    }


    .expression-word{

font-size: clamp(2.8rem,5vw,4rem);
font-weight:700;
letter-spacing:-0.03em;

background: linear-gradient(
90deg,
#c60b1e,
#f1bf00
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

opacity:0;
transform:translateY(12px);

transition:
opacity .7s ease,
transform .7s cubic-bezier(.22,.61,.36,1);

}

.expression-word.is-visible{
opacity:1;
transform:translateY(0);
}
    .expression-translation {
      margin-top: 16px;
      font-size: clamp(1.1rem, 2vw, 1.4rem);
      color: var(--text-soft);
    }

    .expression-example {
      margin-top: 22px;
      font-size: 1.08rem;
      line-height: 1.7;
      color: var(--text);
    }

    .metrics {
      margin-top: 34px;
      display: flex;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    .metric-card {
      min-width: 220px;
      padding: 28px 24px;
      border-radius: 28px;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .metric-value {
      font-size: clamp(2rem, 4vw, 3.25rem);
      line-height: 1;
      letter-spacing: -0.05em;
      font-weight: 700;
    }

    .metric-label {
      margin-top: 10px;
      color: var(--text-soft);
      font-size: 1rem;
      line-height: 1.4;
    }

    .social-links {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .social-btn {
      min-width: 170px;
    }

    .faq-list {
      max-width: 920px;
      margin: 42px auto 0;
      display: grid;
      gap: 14px;
    }

    .faq-item {
      border-radius: 24px;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 24px 26px;
      font-size: 1.08rem;
      font-weight: 600;
      position: relative;
    }

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

    .faq-item summary::after {
      content: "+";
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.4rem;
      color: var(--text-soft);
    }

    .faq-item[open] summary::after {
      content: "–";
    }

    .faq-content {
      padding: 0 26px 24px;
      color: var(--text-soft);
      line-height: 1.65;
      font-size: 1rem;
    }

    .split-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 42px;
      align-items: center;
      margin-top: 40px;
    }

    .about-copy {
      max-width: 540px;
      margin: 0 auto;
      text-align: center;
    }

 .about-copy p {
  margin-top: 20px;
  color: var(--text-soft);
  font-size: 1.15rem;
  line-height: 1.75;
  max-width: 560px;
}

.about-visual{
max-width:340px;
margin-left:auto;

border-radius:28px;
overflow:hidden;

box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

    .reveal {
      opacity: 0;
      transform: translateY(38px);
      transition: opacity .82s ease, transform .82s ease;
      will-change: opacity, transform;
    }

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

.carousel-arrow{

position:absolute;
top:50%;
transform:translateY(-50%);

width:36px;
height:36px;

border-radius:50%;
border:1px solid var(--line);

background:rgba(255,255,255,0.35);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

color:var(--text);
font-size:18px;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

transition:
transform .18s ease,
background .18s ease,
box-shadow .18s ease;

z-index:5;

box-shadow:0 6px 16px rgba(0,0,0,0.08);

}

.carousel-arrow{
opacity:0;
transition:
transform .18s ease,
background .18s ease,
box-shadow .18s ease,
opacity .2s ease;
}

.carousel-shell:hover .carousel-arrow{
opacity:1;
}

.carousel-arrow:hover{

transform:translateY(-50%) scale(1.08);

background:rgba(255,255,255,0.6);
box-shadow:0 10px 22px rgba(0,0,0,0.12);

}

.carousel-arrow.left{
  left:18px;
}

.carousel-arrow.right{
  right:18px;
}

.section--testimonials .carousel{
padding-inline:calc(50% - 180px);
}

    .delay-1 { transition-delay: .08s; }
    .delay-2 { transition-delay: .16s; }
    .delay-3 { transition-delay: .24s; }
    .delay-4 { transition-delay: .32s; }

    .section--starter .mini-info,
    .section--starter .eyebrow {
      color: rgba(245,245,247,0.72);
    }

    .section--starter .feature-visual {
      background: #0d0d0e;
      box-shadow: 0 18px 58px rgba(0,0,0,0.35);
    }

    .section--starter .btn-secondary {
      color: #7db6ff;
      border-color: rgba(125,182,255,0.48);
    }

    .footer-space {
      height: 40px;
      background: var(--bg-faq);
    }

    @media (min-width: 900px) {
      .split-layout {
        grid-template-columns: 1.05fr 1fr;
        text-align: left;
      }
      .about-copy {
        margin: 0;
        text-align: left;
      }
    }

    @media (max-width: 740px) {
      :root {
        --section-space: 82px;
      }


.hero-visual-panorama{

margin-top:32px;

width:100%;
max-width:92%;

margin-left:auto;
margin-right:auto;

border-radius:18px;

}
.hero-visual-panorama img{

max-height:280px;

}

      .fixed-bar {
        padding: 0 14px;
      }

      .container {
        padding: 0 18px;
      }

      .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

.hero-grid .btn{
min-height:66px;
font-size:1.05rem;
padding:18px 20px;

width:100%;
max-width:260px;

justify-content:center;
}
      .hero-grid{
      gap:14px;
      }

      .cta-row {
        gap: 12px;
      }

      /* Buttons NICHT full width wie vorher */
      .btn {
        width: auto;
      }

      .expression-card {
        padding: 30px 20px;
      }

      .carousel {
        padding-inline: calc(50% - 140px);
        gap: 18px;
      }

      .carousel-card {
        flex-basis: 220px;
      }

      .metrics {
        gap: 14px;
      }

      .metric-card {
        width: 100%;
      }

      .faq-item summary {
        padding: 20px 22px;
      }

      .faq-content {
        padding: 0 22px 22px;
      }

      @media (max-width:740px){

.carousel-arrow{
display:none;
}

}


.section--about .about-visual{
max-width:290px;
margin:24px auto 0;
}

.section--about .about-visual img{
width:100%;
height:auto;
object-fit:contain;
}

}
    

   #hamburger-menu{
display:flex;
align-items:center;
}
/* HAMBURGER BUTTON */

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

width:38px;
height:38px;

border:none;
border-radius: 8px;

background:transparent;
color:var(--text);

cursor:pointer;
transition:background .15s ease;
}

.hamburger-button:hover{
background:rgba(0,0,0,0.05);
}

@media (prefers-color-scheme: dark){
.hamburger-button:hover{
background:rgba(255,255,255,0.08);
}
}

.left-icons{
display:flex;
align-items:center;
justify-content:flex-start;
min-width:60px;
}

/* ICON */

.hamburger-button i{
font-size:18px;
line-height:1;
pointer-events:none;
}



/* OFFCANVAS */

.offcanvas{
position:fixed;
top:0;
left:0;
height:100vh;
width:320px;

background:rgba(255,255,255,0.93);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);

border-right:1px solid var(--line);

transform:translateX(-100%);
transition:transform .35s cubic-bezier(.4,0,.2,1);

z-index:2000;
}

.offcanvas.open{
transform:translateX(0);
}


/* OVERLAY */

.offcanvas-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.28);

opacity:0;
pointer-events:none;

transition:opacity .25s ease;

z-index:1500;
}

.offcanvas.open ~ .offcanvas-overlay{
opacity:1;
pointer-events:auto;
}



/* CONTENT */

.offcanvas-content{
padding:28px 28px 40px;
height:100%;
overflow-y:auto;
}



/* CLOSE BUTTON */

.offcanvas-close-icon{
position:absolute;
top:14px;
left:14px;

width:36px;
height:36px;

border-radius:10px;
border:none;

background:none;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;
font-size:16px;
}

@media (prefers-color-scheme: dark){

.offcanvas{
background:rgba(28,30,36,0.85);
border-right:1px solid rgba(255,255,255,0.06);
}

.offcanvas-close-icon{
background:rgba(255,255,255,0.05);
}

}



/* MENU */

.hamburger-menu{
list-style:none;
padding:60px 0 0;
margin:0;
}

.menu-item{
margin-bottom:8px;
}

.menu-link{
display:block;
padding:14px 12px;

font-size:1.08rem;
font-weight:500;

border-radius:10px;
color:var(--text);

transition:background .15s ease, transform .12s ease;
}

.menu-link:hover{
background:rgba(0,0,0,0.06);
transform:translateX(2px);
}

@media (prefers-color-scheme: dark){

.menu-link:hover{
background:rgba(255,255,255,0.06);
}

}


.starter-visual img{
width:100%;
max-width:820px;
margin:auto;

border-radius:26px;

box-shadow:
0 40px 90px rgba(0,0,0,0.18);
}

/* LANGUAGE CARDS */

.languages-grid{
margin-top:60px;
display:grid;
grid-template-columns:1fr;
gap:24px;
}

@media (min-width:740px){

.languages-grid{
grid-template-columns:repeat(3,1fr);
}

}


.language-card{
background:var(--card-strong);
border-radius:26px;
overflow:hidden;
box-shadow:var(--shadow-soft);
transition:transform .35s ease, box-shadow .35s ease;
display:block;
}

.language-card:hover{
transform:translateY(-6px);
box-shadow:0 30px 80px rgba(0,0,0,0.16);
}

.language-image{
width:100%;
aspect-ratio:16/10;
overflow:hidden;
}

.language-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:top left;
transition:transform .6s ease;
}

.language-card:hover img{
transform:scale(1.06);
}

.language-content{
padding:22px;
text-align:center;
}

.language-content h3{
font-size:1.25rem;
margin-bottom:6px;
letter-spacing:-0.02em;
}

.language-content p{
color:var(--text-soft);
font-size:0.95rem;
margin-bottom:16px;
}

.btn-small{
padding:10px 20px;
min-height:38px;
font-size:0.9rem;
}

/* Tablet + Desktop */

@media (max-width:520px){

.languages-grid{
gap:16px;
}

.language-card{
max-width:310px;
margin:0 auto;
border-radius:20px;
box-shadow:0 6px 18px rgba(0,0,0,0.07);
}

.language-image{
aspect-ratio:16 / 8;
}

.language-content{
padding:14px 14px 16px;
}

.language-content h3{
font-size:1.02rem;
margin-bottom:3px;
}

.language-content p{
font-size:0.84rem;
margin-bottom:10px;
}

.btn-small{
padding:7px 14px;
min-height:32px;
font-size:0.82rem;
}

.language-card:hover{
transform:none;
box-shadow:0 6px 18px rgba(0,0,0,0.07);
}

}

/* ================================
TRUST SECTION – APPLE STYLE TUNING
================================ */

.section--trust .centered-text{
margin-bottom:46px;
}

.section--trust .mini-info{
max-width:640px;
margin-top:16px;
font-size:1.15rem;
line-height:1.6;
}

.section--trust .metrics{
margin-top:54px;
gap:28px;
}

/* Cards ruhiger */

.section--trust .metric-card{

padding:34px 30px;

border-radius:30px;

background:var(--card);

backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

border:1px solid var(--line);

box-shadow:var(--shadow-soft);

transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

}

/* Hover Effekt */

.section--trust .metric-card:hover{

transform:translateY(-6px);

box-shadow:
0 28px 70px rgba(0,0,0,0.12);

}

/* Zahlen */

.section--trust .metric-value{

font-size:clamp(2.2rem,4vw,3.4rem);

letter-spacing:-0.04em;

font-weight:700;

}

/* Beschreibung */

.section--trust .metric-label{

margin-top:12px;

font-size:1.02rem;

line-height:1.5;

color:var(--text-soft);

}

/* Mobile */

@media (max-width:740px){

.section--trust .metrics{
flex-direction:column;
align-items:center;
}

.section--trust .metric-card{
width:100%;
max-width:420px;
}

}

.section--trust .metric-label{
opacity:0;
transform:translateY(8px);

transition:
opacity .5s ease,
transform .5s ease;

transition-delay:.35s;
}

.section--trust .metric-card:hover .metric-label,
.section--trust .metric-card .metric-value + .metric-label{
opacity:1;
transform:translateY(0);
}

.metric-link{

display:inline-block;

margin-top:6px;

font-size:0.95rem;

font-weight:600;

color:var(--primary);

text-decoration:none;

transition:
opacity .2s ease,
transform .2s ease;

}

.metric-link:hover{

opacity:.7;

transform:translateX(3px);

}

/* =================================
TABLET OPTIMIERUNG (740–1100px)
================================= */

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

.section--testimonials .carousel{
padding-inline:calc(50% - 260px);
}

.section--testimonials .carousel-card{

flex:0 0 340px;

padding:36px 30px;

border-radius:32px;

}

.testimonial-text{
font-size:1.35rem;
line-height:1.55;
}

.testimonial-author{
font-size:1rem;
margin-top:22px;
}

}

/* =================================
ABOUT SECTION TABLET FIX
================================= */

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

.section--about .split-layout{

grid-template-columns:1fr 380px;

gap:60px;

align-items:center;

}

.section--about .about-copy{

max-width:520px;

}

.section--about .cta-row{

justify-content:flex-start;

margin-top:34px;

}

.section--about .about-visual{

max-width:380px;

margin-left:auto;

}

}


/* ================================
MINIMAL FOOTER
================================ */

.section--footer{

padding:50px 0 70px;

background:
linear-gradient(
to bottom,
var(--bg-faq) 0%,
rgba(0,0,0,0.02) 100%
);

border-top:1px solid var(--line);

text-align:center;

}

.footer-links{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

font-size:0.95rem;

color:var(--text-soft);

}

.footer-links a{

color:var(--text-soft);

text-decoration:none;

transition:opacity .2s ease;

}

.footer-links a:hover{

opacity:.7;

}

.footer-sep{

opacity:.5;

}

.footer-copy{

margin-top:14px;

font-size:0.85rem;

color:var(--text-soft);

opacity:.7;

}

#cookie-banner{

position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);

width:min(92%,560px);

padding:18px 22px;

border-radius:22px;

background:rgba(255,255,255,0.78);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

border:1px solid var(--line);

box-shadow:
0 18px 50px rgba(0,0,0,0.12);

color:var(--text);

z-index:5000;

font-size:0.95rem;
line-height:1.45;

display:none;

}

.cookie-buttons{

margin-top:14px;

display:flex;
gap:10px;

}

.cookie-buttons button{

padding:8px 16px;

border-radius:999px;

font-size:0.9rem;
font-weight:600;

cursor:pointer;

border:1px solid var(--line);

background:white;

transition:
background .2s ease,
transform .15s ease,
box-shadow .15s ease;

}

.cookie-buttons button:hover{

transform:translateY(-1px);

box-shadow:
0 6px 16px rgba(0,0,0,0.08);

}

#accept-cookies{

background:var(--primary);
color:white;
border:none;

}

#accept-cookies:hover{

background:var(--primary-hover);

}

#decline-cookies{

background:transparent;

}

@media (prefers-color-scheme: dark){

#cookie-banner{

background:rgba(35,40,52,0.88);

border:1px solid rgba(255,255,255,0.08);

box-shadow:
0 18px 50px rgba(0,0,0,0.45);

}

.cookie-buttons button{

background:rgba(255,255,255,0.06);
color:var(--text);

border:1px solid rgba(255,255,255,0.08);

}

#accept-cookies{

background:var(--primary);
color:white;

}

}

/* ================================
Story Navigation – schulspanisch.de
================================ */

/* Container */

.story-nav-container{

width:100%;
max-width:760px;

margin:0 auto 10px;

padding:4px 10px;

background:transparent;

isolation:isolate;
contain:layout paint;

}


/* =================================
Title
================================ */

.story-nav-title{

display:flex;
align-items:center;
justify-content:center;

gap:12px;

margin:6px 0 8px;

opacity:.85;

}

.story-nav-title h3{

font-size:13px;
font-weight:500;

letter-spacing:.02em;

margin:0;

color:#444;

}

.story-nav-title span{

flex:1;
max-width:40px;

height:1px;

background:rgba(0,0,0,.1);

}


/* =================================
Scroll Wrapper
================================ */

.story-nav-wrapper{

width:100%;

overflow-x:auto;
overflow-y:hidden;

padding:4px 0;

-webkit-overflow-scrolling:touch;

scrollbar-width:none;

}

.story-nav-wrapper::-webkit-scrollbar{
display:none;
}


/* =================================
List
================================ */

.story-nav{

display:flex;

justify-content:flex-start;

gap:6px;

padding-left:6px;
margin:0;

list-style:none;

}


/* =================================
Items
================================ */

.story-item{

flex:0 0 auto;

width:74px;

text-align:center;

}

.story-item a{

display:block;

text-decoration:none;

color:inherit;

}


/* =================================
Icons
================================ */

.story-icon{

width:58px;
height:58px;

display:block;

margin:0 auto 6px;

}

.story-circle{
width:60px;
height:60px;
}

.story-circle img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;

/* NEU */
padding:3px;
background:linear-gradient(135deg,#ff7a18,#ff0066);
}



/* =================================
Label
================================ */

.story-label{

font-size:11.5px;

line-height:1.3;

color:var(--story-label-color,#222);

max-width:70px;

margin:0 auto;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

letter-spacing:.015em;

opacity:.75;

}


/* =================================
Desktop
================================ */

@media (min-width:768px){

.story-nav{

gap:10px;

}

.story-item{

width:80px;

}

.story-icon{

width:64px;
height:64px;

}

.story-label{

font-size:13px;

}

}


/* =================================
Dark Mode
================================ */

@media (prefers-color-scheme:dark){

.story-label{
color:#e5e5e5;
}

.story-nav-title h3{
color:#bbb;
}

.story-nav-title span{
background:rgba(255,255,255,.15);
}

}


/* =================================
Icon switching
================================ */

.story-icon.icon-dark{
display:none;
}

@media (prefers-color-scheme:dark){

.story-icon.icon-light{
display:none;
}

.story-icon.icon-dark{
display:block;
}

}

/* =================================
GRAMMATIK HERO GRID
================================= */

.grammar-grid{

margin:40px auto 0;

display:grid;
grid-template-columns:1fr;

gap:22px;

max-width:760px; /* wichtig: macht das Grid ruhiger */

}


/* Tablet + Desktop */

@media (min-width:740px){

.grammar-grid{
grid-template-columns:repeat(2,1fr);
}

}



/* =================================
GRAMMATIK HERO GRID
================================= */

.grammar-grid{

margin:46px auto 0;

display:grid;
grid-template-columns:1fr;

gap:20px;

max-width:760px;

}

/* Tablet + Desktop */

@media (min-width:740px){

.grammar-grid{
grid-template-columns:repeat(2,1fr);
gap:26px; /* etwas mehr Abstand */
}

}


/* =================================
GRAMMATIK CARD
================================= */

.grammar-card{

display:block;

/* Glass Effekt */

background:rgba(255,255,255,0.65);

backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

border-radius:22px;

overflow:hidden;

border:1px solid var(--line);

box-shadow:var(--shadow-soft);

transition:
transform .28s ease,
box-shadow .28s ease,
background .28s ease;

}


/* Hover */

.grammar-card:hover{

transform:translateY(-4px);

box-shadow:
0 18px 48px rgba(0,0,0,0.12);

background:rgba(255,255,255,0.82);

}


/* =================================
CARD IMAGE
================================= */

.grammar-card-image{

width:100%;
aspect-ratio:16 / 9;

overflow:hidden;

}

.grammar-card-image img{

width:100%;
height:100%;

object-fit:cover;

transition:transform .5s ease;

}

.grammar-card:hover img{
transform:scale(1.04);
}


/* =================================
CARD CONTENT
================================= */

.grammar-card-content{

padding:18px 18px 20px;

text-align:center;

}

.grammar-card-content h3{

font-size:1.16rem;

margin-bottom:6px;

letter-spacing:-0.02em;

}

.grammar-card-content p{

font-size:0.92rem;

line-height:1.4;

color:var(--text-soft);

margin-bottom:14px;

}


/* Button */

.grammar-card-content .btn{

min-height:34px;

font-size:0.84rem;

padding:8px 16px;

}


/* =================================
DARK MODE
================================= */

@media (prefers-color-scheme: dark){

.grammar-card{

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.08);

}

.grammar-card:hover{

background:rgba(255,255,255,0.08);

}

}


/* =================================
MOBILE
================================= */

@media (max-width:520px){

.grammar-grid{

gap:18px;

max-width:92%;

}

.grammar-card-image{
aspect-ratio:16 / 8.5; /* minimal kleiner */
}

.grammar-card-content{
padding:16px;
}

.grammar-card-content h3{
font-size:1.12rem;
}

.grammar-card-content p{
font-size:0.9rem;
margin-bottom:12px;
}

}


/* =================================
LEARNING SYSTEM
================================= */

.section--learning-dark{
background:var(--bg-starter);
color:var(--text-dark-section);
}

/* kleine Linie über der Headline */

.learning-top-line{

width:120px;
height:1px;

background:rgba(255,255,255,0.18);

margin:0 auto 36px;

}

/* Layout */

.learning-system{

position:relative;

margin:80px auto 0;

display:flex;
justify-content:space-between;
align-items:flex-start;

max-width:900px;
width:100%;

flex-wrap:nowrap;

}

/* horizontale Linie */

.learning-line{

position:absolute;

top:20px;
left:0;
right:0;

height:1px;

background:rgba(255,255,255,0.22);

}

/* einzelne Steps */

.learning-step{

position:relative;

display:flex;
flex-direction:column;
align-items:center;
text-align:center;

flex:1;

z-index:2;

}

/* Icons */

.learning-step i{

font-size:26px;

margin-bottom:12px;

transform:translateY(-6px);

}

/* Titel */

.learning-step h3{

font-size:1.05rem;
letter-spacing:-0.01em;

}

/* Subtext */

.learning-step p{

font-size:0.9rem;

color:rgba(245,245,247,0.65);

margin-top:6px;

}

/* farbige Icons */

.step-video i{
color:#2a7fff;
}

.step-practice i{
color:#f6c445;
}

.step-solution i{
color:#4ade80;
}

.step-deepen i{
color:#f87171;
}

/* Mobile */

@media (max-width:740px){

.learning-system{

flex-direction:column;
align-items:center;

}

.learning-line{
display:none;
}

.learning-step{
margin-bottom:26px;
}

}