/* EvolvU Website-Stil 2026 · globales Stylesheet für SIQUANDO-HTML-Bausteine
   Stand 01.10.2026 · Quelle: authored_2026-10-01_startseite_skizze/startseite_2026.html (Owner-Freigabe 01.10.2026)
   Einbindung: <link rel="stylesheet" href="/assets/evolvu-2026/evolvu-2026.css"> im Head-Zusatzcode (Website-Eigenschaften).
   Alle Regeln sind auf .evu begrenzt, damit die SIQUANDO-Vorlage (Kopf, Menü, Fuß, Shop) unberührt bleibt. */

/* Schrift: Bricolage Grotesque (SIL OFL 1.1), selbst gehostet, keine Google-Server */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url('/assets/evolvu-2026/fonts/BricolageGrotesque-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url('/assets/evolvu-2026/fonts/BricolageGrotesque-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

.evu{
  --bg:#FAF7F2; --fg:#2D3D43; --muted:#5E6A6E; --line:#E7DED2; --card:#FFFFFF; --creme:#F3EEE7;
  --petrol:#07737A; --orange:#FFA121; --band:#07737A; --band-fg:#F3EEE7;
  --display:"Bricolage Grotesque","Nunito","Segoe UI",Arial,sans-serif;
  --body:"Nunito","Segoe UI",Arial,sans-serif;
  --r:18px; --shadow:0 10px 30px rgba(45,61,67,.08);
  font-family:var(--body);font-size:17px;line-height:1.6;color:var(--fg);
  box-sizing:border-box;max-width:1120px;margin:0 auto;
}
.evu *,.evu *::before,.evu *::after{box-sizing:border-box}
.evu a{color:var(--petrol)}
.evu img{max-width:100%;height:auto;display:block}
.evu h1,.evu h2,.evu h3{font-family:var(--display);line-height:1.08;letter-spacing:-.015em;text-wrap:balance;margin:0;color:var(--fg)}
.evu h1{font-size:clamp(2.5rem,7vw,4.9rem);font-weight:800;max-width:14ch}
.evu h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800}
.evu h3{font-size:1.25rem;font-weight:700}
.evu p{margin:0}
.evu .eyebrow{font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol)}
.evu .lead{font-size:1.15rem;max-width:62ch}
.evu .muted{color:var(--muted)}
.evu .sec{padding:3.2rem 0}
.evu .sec-head{display:grid;gap:.6rem;margin-bottom:1.8rem;max-width:62ch}

/* Knöpfe: Orange nur als Fläche mit Anthrazit-Schrift, nie als Schrift auf hellem Grund */
.evu .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:800;text-decoration:none;border-radius:999px;padding:.95rem 1.4rem;font-size:1rem;border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease;line-height:1.2}
.evu .btn:hover{transform:translateY(-1px)}
.evu .btn:focus-visible,.evu a:focus-visible,.evu summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.evu .btn-primary{background:var(--orange);color:#2D3D43;box-shadow:0 8px 22px rgba(255,161,33,.35)}
.evu .btn-secondary{border-color:var(--petrol);color:var(--petrol);background:transparent}
.evu .btn-ghost{color:var(--fg);text-decoration:underline;text-underline-offset:4px;padding-inline:.4rem}
.evu .btn-light{background:var(--creme);color:#2D3D43}
.evu .cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* Hero */
.evu .hero{padding:2.6rem 0 2.2rem;position:relative;overflow:hidden;display:grid;gap:1.4rem}
.evu .hero::before{content:"";position:absolute;right:-10%;bottom:-40%;width:52vw;max-width:620px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(7,115,122,.16),transparent 70%);pointer-events:none}
.evu .hero>*{position:relative}
.evu .mark{position:relative;white-space:nowrap}
.evu .mark svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.42em;z-index:-1}
.evu .mark svg path{stroke:var(--orange);stroke-width:14;fill:none;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:0;animation:evu-draw 1.1s ease-out .3s both}
@keyframes evu-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.evu .hero-note{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;font-size:.95rem;color:var(--muted);font-weight:600}
.evu .hero-note span::before{content:"✓";color:var(--petrol);font-weight:800;margin-right:.35rem}

/* Laufband */
.evu .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--card);margin:.4rem 0}
.evu .ticker .track{display:flex;gap:2.6rem;width:max-content;padding:.75rem 0;animation:evu-slide 28s linear infinite;font-family:var(--display);font-weight:700;font-size:1.05rem;white-space:nowrap}
.evu .ticker:hover .track{animation-play-state:paused}
.evu .ticker .track span::before{content:"•";color:var(--orange);margin-right:1.2rem}
@keyframes evu-slide{to{transform:translateX(-50%)}}

/* Karten */
.evu .two{display:grid;gap:1.2rem}
@media(min-width:800px){.evu .two{grid-template-columns:1fr 1fr}}
.evu .product{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:grid;gap:.9rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.evu .product::before{content:"";position:absolute;left:0;top:0;width:100%;height:6px;background:var(--accent,var(--petrol))}
.evu .product.sw{--accent:#FFA121}   /* Studienwahl & Orientierung: Orange */
.evu .product.sc{--accent:#07737A}   /* Studium & Beruf: Petrol */
.evu .product.el{--accent:#2D3D43}   /* Für Eltern: Anthrazit */
.evu .product h3{font-size:1.45rem}
.evu .chips{display:flex;flex-wrap:wrap;gap:.5rem}
.evu .chip{font-size:.85rem;font-weight:800;padding:.3rem .7rem;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.evu .chip.price{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* Schritte */
.evu .steps{display:grid;gap:1rem}
@media(min-width:800px){.evu .steps{grid-template-columns:repeat(3,1fr)}}
.evu .step{padding:1.4rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card);display:grid;gap:.5rem}
.evu .step .num{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.evu .step h3{font-size:1.15rem}

/* Band */
.evu .band{background:var(--band);color:var(--band-fg);border-radius:28px;padding:2.4rem;display:grid;gap:1.2rem}
@media(min-width:900px){.evu .band{grid-template-columns:1.1fr 1fr;align-items:center;padding:3rem}}
.evu .band h2,.evu .band h3,.evu .band p{color:var(--band-fg)}
.evu .bignum{font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,9vw,6.2rem);line-height:.95;color:var(--orange);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.evu .band p{max-width:52ch}
.evu .band .btn-light{justify-self:start}

/* Sprechblasen */
.evu .bubbles{display:grid;gap:.8rem;max-width:720px}
.evu .bubble{background:var(--card);border:1px solid var(--line);border-radius:22px 22px 22px 6px;padding:.95rem 1.2rem;font-weight:600;width:fit-content;max-width:100%}
.evu .bubble:nth-child(even){border-radius:22px 22px 6px 22px;justify-self:end;background:var(--creme);color:#2D3D43}
.evu .closing{font-family:var(--display);font-weight:700;font-size:1.35rem;margin-top:1.4rem;max-width:30ch}

/* Personenkarte */
.evu .founder{display:grid;gap:1.4rem;align-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:1.4rem;box-shadow:var(--shadow)}
@media(min-width:800px){.evu .founder{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:1.8rem}}
.evu .founder img{border-radius:16px;width:100%}
.evu .quote{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2}
.evu .quote::before{content:"„"}.evu .quote::after{content:"“"}

/* FAQ */
.evu .faq{display:grid;gap:.6rem;max-width:760px}
.evu .faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.3rem 1.1rem}
.evu .faq summary{cursor:pointer;font-weight:800;padding:.7rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.evu .faq summary::-webkit-details-marker{display:none}
.evu .faq summary::after{content:"+";font-family:var(--display);font-size:1.4rem;color:var(--petrol)}
.evu .faq details[open] summary::after{content:"–"}
.evu .faq details p{padding-bottom:.9rem;color:var(--muted)}

/* Allgemeine Textseiten (Rechtstexte, Hilfe) */
.evu .prose{max-width:68ch}
.evu .prose h2{font-size:1.5rem;margin:2rem 0 .6rem}
.evu .prose h3{font-size:1.15rem;margin:1.4rem 0 .4rem}
.evu .prose p,.evu .prose li{margin:0 0 .8rem}
.evu .prose ul,.evu .prose ol{padding-left:1.2rem}

/* Bewegung läuft immer (Owner-Entscheidung 01.10.2026: auf dem Owner-PC ist „Bewegung reduzieren“ systemweit aktiv, die Bewegung ist aber gewollt); das Laufband hält bei Berührung an */

/* ===== Zentrierte Fassung (Owner-Wunsch 01.10.2026): alles mittig ===== */
.evu{text-align:center}
.evu h1,.evu .lead,.evu .sec-head,.evu .closing,.evu .band p,.evu .bubbles,.evu .faq,.evu .prose{margin-left:auto;margin-right:auto}
.evu .cta,.evu .hero-note,.evu .chips{justify-content:center}
.evu .hero{justify-items:center}
.evu .product,.evu .step,.evu .founder{text-align:center}
.evu .product .cta{justify-content:center}
.evu .band{text-align:center}
.evu .band .btn-light{justify-self:center}
.evu .band p{margin-left:auto;margin-right:auto}
.evu .founder .btn{justify-self:center!important}
.evu .faq summary{justify-content:center;position:relative;padding-right:2.2rem;padding-left:2.2rem}
.evu .faq summary::after{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.evu .bubble{text-align:left}
.evu .step{justify-items:center}

/* v3 (01.10.2026): auch begrenzt breite Absätze und Boxen in der Mitte, Knopfgruppen zentriert */
.evu p,.evu .lead,.evu .sec-head,.evu .closing,.evu .faq,.evu .bubbles,.evu .prose,.evu [style*="max-width"]{margin-left:auto!important;margin-right:auto!important}
.evu .hero{justify-items:center;text-align:center}
.evu .hero h1{margin-left:auto;margin-right:auto}
.evu .cta,.evu .hero-note,.evu .chips{justify-content:center}
.evu .sec{display:block}
.evu .steps,.evu .two{justify-items:stretch}

/* ===== v4 (01.10.2026, Welle 2: App-Seiten, Pakete & Preise, Produktseiten) ===== */
.evu .hero-sub{padding:1.6rem 0 1.4rem}
.evu .hero-sub h1{font-size:clamp(2rem,5vw,3.4rem);max-width:22ch}
.evu .back{font-size:.95rem;font-weight:700}
.evu .back a{text-decoration:none}
.evu .back a:hover{text-decoration:underline}
.evu .small{font-size:.9rem;color:var(--muted)}
.evu .group{font-size:1.35rem;margin:1.8rem 0 1rem}
.evu .sub{display:block;font-family:var(--body);font-size:1rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:.35rem}
.evu .fmt{font-weight:700;color:var(--petrol);font-size:.95rem}
.evu .note{background:var(--creme);border-radius:var(--r);padding:1.2rem 1.4rem;max-width:62ch;margin:1.4rem auto 0}
.evu .legal{color:var(--muted);font-size:.95rem;max-width:62ch;margin:1.6rem auto 0}
.evu .sec.rule{border-top:1px solid var(--line)}
/* Haken-Liste */
.evu .checks{list-style:none;padding:0;margin:0 auto;max-width:62ch;display:grid;gap:.6rem;text-align:left}
.evu .checks li{position:relative;padding-left:1.7rem}
.evu .checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--petrol);font-weight:800}
/* Fragen-Raster */
.evu .qgrid{display:grid;gap:.9rem;max-width:860px;margin:0 auto}
@media(min-width:700px){.evu .qgrid{grid-template-columns:1fr 1fr}}
.evu .q{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.3;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem}
/* Gestapelte Zeilen */
.evu .stack{display:grid;gap:.8rem;max-width:760px;margin:0 auto}
.evu .stack.wide{max-width:900px}
.evu .item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem}
.evu .item.soon{border-style:dashed;background:transparent;color:var(--muted)}
.evu .grid2{display:grid;gap:1rem}
@media(min-width:700px){.evu .grid2{grid-template-columns:1fr 1fr}}
/* Karten-Raster und Kartenvarianten */
.evu .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem}
.evu .cards>*{flex:1 1 270px;max-width:360px;min-width:0}
@media(min-width:700px){.evu .cards.four>*{flex-basis:calc(50% - .6rem);max-width:calc(50% - .6rem)}}
.evu .product.soft{background:var(--creme);box-shadow:none}
.evu .product.plain::before{display:none}
.evu .product.soon{background:transparent;border:1px dashed var(--line);box-shadow:none;color:var(--muted)}
.evu .product.soon::before{display:none}
.evu .product.soon h3{color:var(--muted)}
.evu a.product{text-decoration:none;color:inherit;transition:transform .15s ease}
.evu a.product:hover{transform:translateY(-2px)}
.evu .more{font-weight:800;color:var(--petrol)}
.evu .chip.ok{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.evu .chip.soon{background:var(--creme);color:var(--muted)}
.evu .price-big{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.evu .product.soon .price-big{color:var(--muted)}
/* Knöpfe in Produktfarben (Fläche mit heller Schrift) */
.evu .btn-petrol{background:var(--petrol);color:#fff}
.evu .btn-dark{background:var(--fg);color:#fff}
/* Band einspaltig; Hervorhebungen und Links im Band in Orange (wie bisher) */
.evu .band.one{grid-template-columns:1fr;max-width:860px;margin:0 auto}
.evu .band strong{color:var(--orange)}
.evu .band a{color:var(--orange);font-weight:700}

/* ===== v5 (01.10.2026, Owner: „lass dir was zur Animation einfallen“): Bewegung auf allen Seiten, je Bildschirm höchstens zwei bis drei Elemente =====
   1 Einblenden beim Scrollen: Karten, Schritte, Fragen, Sprechblasen, Zeilen und Haken erscheinen nacheinander (JS setzt html.evu-js und .in; ohne JS bleibt alles sichtbar)
   2 Schrittzahlen 1·2·3 springen auf, wenn die Schritte ins Bild kommen
   3 Der Schein hinter der Überschrift atmet langsam; Karten heben sich beim Zeigen */
.evu-js .evu :is(.two,.steps,.cards,.qgrid,.bubbles,.stack,.checks)>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.evu-js .evu :is(.two,.steps,.cards,.qgrid,.bubbles,.stack,.checks).in>*{opacity:1;transform:none}
.evu-js .evu :is(.note,.band,.sec-head,.founder,.faq,.legal,.closing){opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.evu-js .evu :is(.note,.band,.sec-head,.founder,.faq,.legal,.closing).in{opacity:1;transform:none}
.evu .steps .num{display:inline-block;transform-origin:center}
.evu-js .evu .steps.in .num{animation:evu-pop .6s cubic-bezier(.2,.9,.3,1.3) both}
.evu-js .evu .steps.in .step:nth-child(2) .num{animation-delay:.25s}
.evu-js .evu .steps.in .step:nth-child(3) .num{animation-delay:.5s}
@keyframes evu-pop{from{transform:scale(.3);opacity:0}60%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}
.evu .hero::before{animation:evu-breathe 10s ease-in-out infinite alternate}
@keyframes evu-breathe{from{transform:translate(0,0) scale(1);opacity:.85}to{transform:translate(-7%,-10%) scale(1.15);opacity:1}}
.evu .product,.evu .step{transition:transform .2s ease,box-shadow .2s ease}
.evu .product:hover,.evu .step:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(45,61,67,.12)}

/* ===== v6 (01.10.2026, Owner: „Da könnte im Hintergrund dieses Bild aus der App sein mit dem Nordstern“): Bildkarte statt Creme-Fläche =====
   Nordstern-Szene aus der App (/assets/evolvu-2026/img/nordstern.jpg, 960×471) als Kartenhintergrund, cremefarbener Schleier für lesbaren Text */
.evu .product.pic{background:linear-gradient(rgba(250,247,242,.50),rgba(250,247,242,.86)),url('/assets/evolvu-2026/img/nordstern.jpg') center top/cover no-repeat;border-color:var(--line);box-shadow:var(--shadow)}
.evu .product.pic::before{display:none}

/* ===== v7 (01.10.2026, Welle 4): Rechts- und Hilfeseiten – linksbündige Lesetypografie, keine Umformulierung ===== */
.evu .prose{text-align:left;max-width:68ch;margin:0 auto;padding:1rem 0 2rem}
.evu .prose h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:0 0 1.2rem;max-width:none;text-align:left}
.evu .prose h2{font-size:1.45rem;line-height:1.25;margin:2.2rem 0 .7rem}
.evu .prose h3{font-size:1.15rem;margin:1.5rem 0 .5rem}
.evu .prose p,.evu .prose li{margin:0 0 .9rem}
.evu .prose ul,.evu .prose ol{padding-left:1.3rem;margin:0 0 1rem}
.evu .prose li{margin-bottom:.45rem}
.evu .prose a{font-weight:700}
.evu .prose hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.evu .prose table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 1rem}
.evu .prose th,.evu .prose td{border-bottom:1px solid var(--line);padding:.5rem .4rem;text-align:left;vertical-align:top}
.evu .prose em{color:var(--muted)}
.evu .prose strong{color:var(--fg)}
.evu .prose .stand{color:var(--muted);font-size:.95rem;margin-top:-.6rem}