/* =================================
PAGE BASICS
================================= */

.page{
padding-top:0;
}

/* ================================
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;

/* NEU */
display:flex;
justify-content:center;

}

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


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

.story-nav{

display:flex;

justify-content:center;

gap:8px;

padding-left:0;
margin:0 auto;

list-style:none;

width:max-content;

}


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

.story-item{

flex:0 0 auto;

width:76px;

text-align:center;

}

.story-item a{

display:block;

text-decoration:none;

color:inherit;

}


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

.story-icon{

width:52px;
height:52px;

display:block;

margin:0 auto 6px;

}


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

/* Apple-like Cover */
padding:3px;
background:
linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 100%),
linear-gradient(135deg,#ff7a18,#ff0066);

box-shadow:
0 10px 24px rgba(0,0,0,.12),
0 2px 6px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.65);

border:1px solid rgba(255,255,255,.45);
}

/* dezenter Glas-/Cover-Glanz */
.story-circle::after{
content:"";
position:absolute;
top:4px;
left:8px;
right:8px;
height:18px;
border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
pointer-events:none;
}


/* =================================
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);
}

.story-circle img{
background:
linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 100%),
linear-gradient(135deg,#ff7a18,#ff0066);

box-shadow:
0 12px 28px rgba(0,0,0,.35),
0 2px 8px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.14);

border:1px solid rgba(255,255,255,.10);
}

.story-circle::after{
background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}

}


/* =================================
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;
}

}



/* =================================
HERO HEADER
================================= */

.hero-header{
position:absolute;
top:22px;
left:0;
right:0;

display:flex;
justify-content:center;

z-index:20;
}

.brand{
font-size:1rem;
font-weight:700;
letter-spacing:-0.02em;
color:var(--text);
opacity:.9;
}



/* =================================
HERO LAYOUT
================================= */

/* =================================
HERO BACKGROUND
================================= */

.hero-v2{

position:relative;

background:
radial-gradient(
800px 400px at 50% -10%,
rgba(0,113,227,0.08),
transparent 70%
);

}

.section--hero{
padding-top:160px;
}

.hero-inner{
position:relative;
z-index:2;
}

/* =================================
HERO HEADLINE
================================= */

.hero-headline{
text-align:center;
max-width:820px;
margin:0 auto;
}



/* Eyebrow */

.hero-headline .eyebrow{

font-size:.95rem;

letter-spacing:.12em;

text-transform:uppercase;

font-weight:600;

color:rgba(0,0,0,0.45);

margin-bottom:12px;

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

.hero-headline .eyebrow{
color:rgba(255,255,255,0.65);
}

}


/* H1 */

.hero-headline .display-title{
margin-bottom:14px;
}


/* Typing */

.typing-wrapper{
display:inline-flex;
align-items:baseline;
justify-content:center;
gap:4px;
}

.typing-line{
display:inline;
white-space:nowrap;
transition:background 0.5s ease;

}

.typing-cursor{
display:inline-block;
width:2px;
height:1.1em;
background:#999;
margin-left:4px;

animation:cursorBlink 1.2s infinite;
}

@keyframes cursorBlink{
0%,45%,100%{opacity:1;}
50%,95%{opacity:0;}
}

/* =================================
SUBTLE LANGUAGE TONES
================================= */

.typing-line{
background:linear-gradient(90deg,#1d1d1f,#1d1d1f);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

transition:background .6s ease;
}


/* Spanisch – minimal warm */

.lang-spanish{
background:linear-gradient(
90deg,
#1d1d1f 0%,
#2b1f1e 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* Französisch – minimal kühl */

.lang-french{
background:linear-gradient(
90deg,
#1d1d1f 0%,
#1e2533 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* Italienisch – minimal grünlich */

.lang-italian{
background:linear-gradient(
90deg,
#1d1d1f 0%,
#1f2a24 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* Portugiesisch – warm neutral */

.lang-portuguese{
background:linear-gradient(
90deg,
#1d1d1f 0%,
#2a2720 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* Norwegisch – kühl neutral */

.lang-norwegian{
background:linear-gradient(
90deg,
#1d1d1f 0%,
#22252c 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* Schwedisch – leicht warm */

.lang-swedish{
background:linear-gradient(
90deg,
#1d1d1f 0%,
#2a261e 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

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

.typing-line{
background:linear-gradient(90deg,#f5f5f7,#f5f5f7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

transition:background .8s ease;
}


.lang-spanish{
background:linear-gradient(90deg,#f5f5f7,#f0e8e7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.lang-french{
background:linear-gradient(90deg,#f5f5f7,#e7ebf4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.lang-italian{
background:linear-gradient(90deg,#f5f5f7,#e8f0ea);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.lang-portuguese{
background:linear-gradient(90deg,#f5f5f7,#f0eee7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.lang-norwegian{
background:linear-gradient(90deg,#f5f5f7,#eaecf2);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.lang-swedish{
background:linear-gradient(90deg,#f5f5f7,#f1efe8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

}

.fade-lang{
opacity:.6;
transition:opacity .2s ease;
}
/* Subline */
.hero-subline{

margin-top:10px;

font-size:clamp(1.5rem,2.2vw,2rem);

line-height:1.25;

letter-spacing:-0.02em;

font-weight:500;

color:var(--text-soft);

max-width:720px;
margin-inline:auto;

}


@media (min-width:740px){

.cta-row{

flex-direction:row;

justify-content:center;

}

}

.cta-row .btn{

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

}

@media (min-width:740px){

.cta-row .btn{

width:auto;

}

}
/* =================================
HERO PANORAMA IMAGE
================================= */

/* =================================
HERO PANORAMA
================================= */

.hero-panorama{

margin-top:70px;

width:min(95%,1200px);
margin-inline:auto;
height: 95%;

border-radius:34px;

overflow:hidden;

box-shadow:
0 50px 120px rgba(0,0,0,0.14);

transform:translateY(-20px);

position:relative;

}


.hero-panorama img{

width:100%;
height:auto;

aspect-ratio:2400 / 1100;

object-fit:cover;

display:block;

}


/* Licht-Overlay */

.hero-panorama::after{

content:"";

position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
rgba(255,255,255,0.15) 0%,
transparent 40%
);

pointer-events:none;

}
.hero-panorama img{

animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

from{
transform:scale(1);
}

to{
transform:scale(1.05);
}

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

.hero-panorama{

margin-top:40px;

width:81%;

border-radius:20px;

transform:none;

}

}

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

@media (max-width:740px){

.hero-v2{
padding-top:110px;
padding-bottom:20px;
}

.hero-panorama{

margin-top:34px;

border-radius:18px;

transform:none;

width:92%;

}

}

/* =================================
HYBRID SECTION
================================= */

/* =================================
HYBRID SECTION
================================= */

/* Section Subline */

.section-subline{

margin-top:8px;

font-size:clamp(1.15rem,1.6vw,1.35rem);

line-height:1.35;

letter-spacing:-0.01em;

font-weight:500;

color:var(--text-soft);

max-width:620px;
margin-inline:auto;

}
.section--hybrid{

padding:100px 20px;

position:relative;

background:
linear-gradient(
180deg,
rgba(0,0,0,0.015) 0%,
rgba(0,0,0,0.03) 50%,
rgba(0,0,0,0.015) 100%
);

}

.section--hybrid::before,
.section--hybrid::after{

content:"";
position:absolute;
left:0;
right:0;
height:1px;

background:linear-gradient(
90deg,
transparent,
rgba(0,0,0,0.08),
transparent
);

}

.section--hybrid::before{
top:0;
}

.section--hybrid::after{
bottom:0;
}

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

.section--hybrid{

background:
linear-gradient(
180deg,
rgba(255,255,255,0.02) 0%,
rgba(255,255,255,0.04) 50%,
rgba(255,255,255,0.02) 100%
);

}

.section--hybrid::before,
.section--hybrid::after{

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.12),
transparent
);

}

}
.hybrid-header{
max-width:760px;
margin:0 auto 70px auto;
}

/* VISUAL CONTAINER */

.hybrid-visual{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:28px;
}

/* ITEMS */

.hybrid-item{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:18px;
max-width:320px;
}

/* BILDER */

.hybrid-item img{
width:100%;
max-width:320px;

border-radius:26px;

/* Schwebeeffekt */

box-shadow:
0 40px 80px rgba(0,0,0,0.10),
0 12px 30px rgba(0,0,0,0.06);

transform:translateY(0);

transition:
transform .45s cubic-bezier(.22,.61,.36,1),
box-shadow .45s cubic-bezier(.22,.61,.36,1);
}

.hybrid-item img:hover{

transform:translateY(-8px);

box-shadow:
0 60px 120px rgba(0,0,0,0.14),
0 18px 40px rgba(0,0,0,0.08);

}

.flip-card{
  perspective:1200px;
  cursor:pointer;
  transform:translateY(0) rotate(0deg);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* Reveal Startzustand */

/* Reveal Startzustand */
.flip-card.reveal{
opacity:0;
transform:translateY(40px) scale(.96);
transition:
opacity .8s cubic-bezier(.22,.61,.36,1),
transform .8s cubic-bezier(.22,.61,.36,1);
}

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



.flip-card:hover{
  transform:translateY(-6px) rotate(0deg);
}

.flip-card:active{
  transform:scale(.985) rotate(0deg);
}
.flip-inner{
position:relative;
transform-style:preserve-3d;
transition:
transform .6s cubic-bezier(.22,.61,.36,1),
opacity .8s cubic-bezier(.22,.61,.36,1);
}
.flip-card.is-flipped .flip-inner{

transform:rotateY(180deg);

}

.card-front,
.card-back{

width:100%;
border-radius:26px;

backface-visibility:hidden;

box-shadow:
0 30px 60px rgba(0,0,0,0.10),
0 10px 24px rgba(0,0,0,0.06);

transition:
transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s cubic-bezier(.22,.61,.36,1);
}

/* FRONT */

.card-front{
transform:rotateY(0deg);
}

/* BACK */

.card-back{
position:absolute;
top:0;
left:0;
transform:rotateY(180deg);
}

.flip-card:hover .card-front,
.flip-card:hover .card-back{
  box-shadow:
    0 42px 80px rgba(0,0,0,0.14),
    0 14px 30px rgba(0,0,0,0.08);
}
/* LABEL */

.hybrid-label{
font-size:15px;
line-height:1.5;
color:#6e6e73;
}

.hybrid-label strong{
font-size:17px;
color:#1d1d1f;
}

/* PLUS */

.hybrid-plus{
font-size:58px;
font-weight:500;
opacity:.85;
letter-spacing:2px;
}

/* TABLET */

@media (min-width:740px){

.hybrid-item img{
max-width:320px;
}

}

@media (max-width:739px){

.card-front,
.card-back{
max-width:350px;
}

}

/* DESKTOP */

@media (min-width:1024px){

.hybrid-visual{
flex-direction:row;
gap:60px;
}

.hybrid-item{
max-width:420px;
}

.hybrid-item img{
max-width:460px;
}

.hybrid-plus{
font-size:52px;
}
 
}



.flip-card .flip-inner{
transition: transform .8s cubic-bezier(.22,.61,.36,1);}

.flip-card.preview .flip-inner{
transform:rotateY(0deg);
}


/* =================================
LANGUAGES
================================= */

/* =================================
TRUST
================================= */

/* =================================
BOOK CAROUSEL
================================= */

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

/* =================================
SOCIAL
================================= */

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

/* =================================
RESPONSIVE
================================= */

/* CTA mobil kleiner */
@media (max-width: 740px){

  .cta-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:20px;
  }

  .cta-row .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:230px;
    max-width:230px;
    min-height:46px;
    padding:11px 18px;
    font-size:0.9rem;
    line-height:1.25;
    text-align:center;
    border-radius:999px;
    white-space:normal;
  }
}
/* Nur im Hero kleiner */
.section--hero .eyebrow{
  margin-bottom:10px;
  font-size:0.82rem;
 
}

.section--hero .hero-subline{
  font-size:1rem;
}

/* mobil noch etwas kompakter */
@media (max-width:680px){
  .section--hero .eyebrow{
    font-size:0.74rem;
  }

  .section--hero .hero-subline{
    font-size:0.92rem;
  }
}