/* Die einzelnen Abschnitte. Reihenfolge wie im Dokument.

   Breitenlogik: bis 639px ist alles eine Spalte. Zwischen 640 und 1023
   ist die Huelle nur 560px breit, deshalb bleiben Raster dort ebenfalls
   einspaltig. Erst ab 1024px, wenn die Huelle auf 1160px geht,
   duerfen Spalten nebeneinander stehen. */

/* ==================================================================
   Kopf
   ================================================================== */
.kopf{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--tempo-kurz),background var(--tempo-kurz);
}
.kopf.geschrumpft{
  border-bottom-color:var(--linie2);
  background:rgba(255,255,255,.95);
}
.kopf-innen{
  height:var(--kopf);
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:height var(--tempo-kurz);
}
.kopf.geschrumpft .kopf-innen{ height:calc(var(--kopf) - 10px); }

.marke{ display:flex; align-items:center; gap:10px; color:var(--ink); flex:none; }
.marke-text{
  font-family:var(--sans); font-size:16px; font-weight:600;
  letter-spacing:-.02em; white-space:nowrap;
}
/* Das X traegt die Hausschrift von ValueX, kursiv und blau. */
.marke-text em{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:1.18em; color:var(--blau);
}

/* Kein Menue. Der Kopf traegt nur den Namen und die eine Handlung,
   auf die diese Seite hinauswill. Alles andere findet man beim Scrollen. */
.kopf-tat{ display:flex; align-items:center; gap:16px; flex:none; }
.kopf-login{ color:var(--text3); font-size:14px; font-weight:500; }
.kopf-login:hover{ color:var(--ink); }
.kopf .btn{ min-height:40px; padding:0 16px; font-size:11.5px; }

@media (max-width:479px){
  .kopf-innen{ gap:12px; }
  .kopf-tat{ gap:12px; }
  .kopf-tat .kopf-login{ display:none; }   /* sonst wird es am Handy eng */
  .kopf .btn{ padding:0 13px; }
}

/* ==================================================================
   Hero
   ================================================================== */
.hero{
  border-top:0;
  overflow:clip;
  background:
    radial-gradient(ellipse 80% 60% at 88% 0%,var(--mesh),transparent 62%),
    var(--bg);
}
/* Drei Bloecke in dieser Reihenfolge im HTML: Text, Titelbild, Formular.
   Bis 1023 stehen sie mittig untereinander, damit am Handy das Bild vor
   dem E-Mail-Feld steht. Ab 1024 zweispaltig und linksbuendig. */
.hero-raster{
  display:grid; grid-template-columns:minmax(0,1fr); gap:30px;
  justify-items:center; text-align:center;
}
.hero-text{ max-width:38rem; }
.hero .eyebrow::after{ margin-left:auto; margin-right:auto; }
.hero h1{ margin-bottom:14px; }
/* Die Zwischenzeile nimmt den Einwand vorweg, deshalb kursiv und leiser als h1. */
.hero-sub{
  margin:0 auto 20px;
  max-width:34rem;
  font-size:clamp(17px,2.4vw,20px);
  line-height:1.4;
  color:var(--text2);
}
.hero-sub em{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.12em;
}
.hero .lead{ margin:0 auto; max-width:34rem; }

.hero-vertrauen{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 22px;
  margin:24px 0 0;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text3);
}
.hero-vertrauen span{ display:flex; align-items:center; gap:8px; }
.hero-vertrauen span::before{
  content:''; width:4px; height:4px; flex:none;
  background:var(--blau); transform:rotate(45deg);
}

/* Das Titelbild traegt seine eigene Schrift. Die Beschriftung steht
   deshalb darunter und niemals darauf. Der ganze Block ist der Weg
   zur letzten Gratis-Ausgabe, also ein Link. */
.hero-bild{ display:block; position:relative; width:100%; max-width:340px; color:inherit; }
/* Kante oben statt links, weil eine seitliche Kante unter mittigem Text
   schief wirkt. Gelb bleibt das Zeichen fuer die Gratis-Ausgabe. */
.hero-marke{
  display:block; position:relative;
  margin-top:-1px;
  background:var(--bg);
  border:1px solid var(--linie2);
  border-top:2px solid var(--gelb);
  padding:12px 42px 12px 15px;
}
.hero-marke b{
  display:block; font-family:var(--sans); font-size:16px; font-weight:600;
  letter-spacing:-.018em; line-height:1.2; margin-bottom:3px;
}
.hero-marke small{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text3);
}
.hero-marke-pfeil{
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  color:var(--blau);
}
.hero-bild:hover .hero-marke{ border-color:var(--linie); border-top-color:var(--gelb); }
.hero-bild:hover .hero-marke-pfeil{ transform:translate(3px,-50%); }

/* Das Anmeldefeld ist das Ziel der ganzen Seite. Es steht deshalb auf
   eigener Flaeche mit blauer Kante, damit es nicht wie Fliesstext wirkt. */
.hero-tun{
  width:100%; max-width:32rem;
  background:var(--creme);
  border:1px solid var(--linie2);
  border-top:2px solid var(--blau);
  padding:20px 20px 18px;
}
.hero-tun .signup{ max-width:none; }
.hero-tun input[type=email]{ border-color:var(--linie); }
.hero-tun .hero-vertrauen{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--linie2);
}

@media (max-width:639px){
  .signup-feld{ flex-direction:column; }
  .signup button{ width:100%; }
}

/* Das Titelbild bleibt klein genug, damit die Anmeldung nicht unter den Falz rutscht. */
@media (max-width:1023px){
  .hero-raster{ gap:24px; }
  .hero-bild{ max-width:300px; }
  .hero-marke{ padding:9px 12px; }
  .hero-marke b{ font-size:14px; margin-bottom:2px; }
  .hero-marke small{ font-size:9px; }
  .hero .lead{ font-size:16px; }
  .hero-tun{ padding:16px 16px 15px; }
}

/* Am Handy soll die Anmeldung ohne Scrollen sichtbar sein.
   Steht nach dem 1023er Block, sonst gewinnt dessen Bildbreite. */
@media (max-width:639px){
  .hero{ padding-top:36px; }
  .hero-raster{ gap:20px; }
  .hero-bild{ max-width:252px; }
}

/* Am Rechner zwei Spalten: links Text und Anmeldung, rechts das Titelbild.
   Mittig wird nur bis 1023 gesetzt, hier also alles wieder zurueck. */
@media (min-width:1024px){
  .hero-raster{
    grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    column-gap:64px; row-gap:0;
    justify-items:stretch; text-align:left;
  }
  .hero-text{ grid-column:1; grid-row:1; max-width:none; }
  .hero-tun { grid-column:1; grid-row:2; margin-top:26px; }
  .hero-bild{ grid-column:2; grid-row:1 / span 2; align-self:center; max-width:none; }
  .hero .eyebrow::after{ margin-left:0; margin-right:0; }
  .hero-sub{ margin-left:0; margin-right:0; }
  .hero .lead{ margin-left:0; margin-right:0; }
  .hero-vertrauen{ justify-content:flex-start; }
  /* Kante wieder seitlich, weil der Text hier linksbuendig steht. */
  .hero-marke{ border-top:1px solid var(--linie2); border-left:2px solid var(--gelb); }
  .hero-tun { border-top:1px solid var(--linie2); border-left:2px solid var(--blau); }
}

/* ==================================================================
   Zweispaltiger Textabschnitt
   ================================================================== */
.zwei{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
.zwei p{ color:var(--text2); }
@media (min-width:1024px){
  .zwei{ grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:64px; }
}

.kopfzeile{ margin-bottom:38px; }
.kopfzeile h2{ margin-bottom:14px; }
.kopfzeile .lead{ margin-bottom:0; }

/* ==================================================================
   Drei Saeulen. Typografische Spalten, keine Icon-Kacheln.
   ================================================================== */
.saeulen{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--linie); }
.saeule{ padding:26px 0 0; border-top:1px solid var(--linie2); }
.saeule:first-child{ border-top:0; padding-top:30px; }
.saeule-nr{
  display:block; margin-bottom:18px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.2em; color:var(--blau);
}
.saeule h3{ margin-bottom:11px; }
.saeule p{ font-size:15.5px; color:var(--text2); }
.saeule ul{ margin-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
.saeule li{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text3);
  border:1px solid var(--linie2); border-radius:var(--radius);
  padding:4px 8px;
}
@media (min-width:1024px){
  .saeulen{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .saeule{
    padding:30px 30px 0; border-top:0;
    border-left:1px solid var(--linie2);
  }
  .saeule:first-child{ border-left:0; padding-left:0; }
  .saeule:last-child{ padding-right:0; }
}

/* ==================================================================
   Beispielabschnitt mit echten Charts
   ================================================================== */
.beispiele{ display:grid; grid-template-columns:1fr; gap:32px; }
.beispiel h4{ margin:16px 0 7px; }
.beispiel p{ font-size:15px; color:var(--text2); }
@media (min-width:1024px){
  .beispiele{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
}

/* ==================================================================
   Ueber mich
   ================================================================== */
.ueber{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.ueber-bild{ max-width:22rem; }
.ueber-zitat{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:22px; line-height:1.36; color:var(--ink);
  border-left:2px solid var(--blau);
  padding-left:18px;
  margin:26px 0 0;
}
@media (min-width:1024px){
  .ueber{ grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:64px; }
  .ueber-bild{ max-width:100%; }
  .ueber-zitat{ font-size:25px; }
}

/* ==================================================================
   Vergleich gratis gegen bezahlt
   ================================================================== */
.vgl{ display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch; }
.vgl-sp{
  display:flex; flex-direction:column;
  padding:26px;
  border:1px solid var(--linie-n2);
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
}
.vgl-sp.gewicht{
  border-color:var(--blau2);
  background:linear-gradient(180deg,rgba(143,171,255,.10),transparent 58%),rgba(255,255,255,.03);
}
.vgl-kopf{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:9px; }
.vgl-sp > p{ font-size:15px; color:var(--hell2); }
.vgl-liste{ display:flex; flex-direction:column; gap:11px; margin:22px 0 26px; flex:1 1 auto; }
.vgl-liste li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:15px; line-height:1.5; color:var(--hell2);
}
.vgl-liste li::before{
  content:''; flex:none; width:5px; height:5px; margin-top:9px;
  border:1px solid var(--hell3);
}
.vgl-sp.gewicht .vgl-liste li::before{
  border:0; background:var(--blau2); transform:rotate(45deg);
}
.vgl-preis{
  margin:0 0 4px;
  font-family:var(--sans); font-weight:600;
  font-size:34px; line-height:1; letter-spacing:-.03em; color:#fff;
}
.vgl-preis small{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--hell3);
}
@media (min-width:1024px){
  .vgl{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .vgl-sp{ padding:32px; }
}

/* ==================================================================
   Stimmen
   ================================================================== */
.stimmen{ display:grid; grid-template-columns:1fr; gap:24px; }
.stimme blockquote{
  margin:0 0 14px;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:20px; line-height:1.4; color:var(--ink);
}
.stimme figcaption{ font-size:13.5px; color:var(--text3); }
.stimme figcaption b{ display:block; color:var(--ink); font-weight:600; }
@media (min-width:1024px){ .stimmen{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; } }

/* ==================================================================
   Abschluss
   ================================================================== */
.schluss{ text-align:center; }
.schluss .lead,.schluss .signup{ margin-inline:auto; }
.schluss .eyebrow::after{ margin-inline:auto; }
.schluss .signup-hinweis,.schluss .signup-meldung{ text-align:center; }
.schluss .signup-meldung{ padding-left:0; }
.schluss .signup-meldung::before{ position:static; margin-right:8px; }

/* ==================================================================
   Rechtsseiten, Impressum und Datenschutz
   ================================================================== */
.recht{ max-width:44rem; }
.recht h1{ margin-bottom:1rem; }
.recht .lead{ margin-bottom:0; }
.recht-block{
  margin-top:44px; padding-top:32px;
  border-top:1px solid var(--linie2);
}
.recht-block h2{
  display:flex; align-items:baseline; gap:14px;
  font-size:22px; margin-bottom:.6rem;
}
.recht-nr{
  flex:none;
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.16em; color:var(--blau);
}
.recht-block h3{
  margin-top:26px; margin-bottom:.5rem;
  font-size:16px; font-weight:600; color:var(--ink);
}
.recht-block p{ color:var(--text2); margin-bottom:.9rem; }
.recht-block p:last-child{ margin-bottom:0; }
.recht-liste{
  display:grid; grid-template-columns:1fr; gap:0;
  margin:14px 0 0;
}
.recht-liste dt{
  padding-top:12px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text3);
  border-top:1px solid var(--linie2);
}
.recht-liste dt:first-child{ border-top:0; padding-top:0; }
.recht-liste dd{
  margin:3px 0 12px;
  font-size:15.5px; color:var(--ink);
}
.recht-liste dd:last-child{ margin-bottom:0; }
.recht-stand{
  margin-top:1.2rem;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text3);
}
@media (min-width:640px){
  .recht-liste{ grid-template-columns:11rem 1fr; column-gap:22px; }
  .recht-liste dt{ padding-top:12px; }
  .recht-liste dd{
    margin:0; padding-top:12px; padding-bottom:12px;
    border-top:1px solid var(--linie2);
  }
  .recht-liste dt:first-of-type,
  .recht-liste dd:first-of-type{ border-top:0; padding-top:0; }
}

/* ==================================================================
   Fuss
   ================================================================== */
.fuss{
  border-top:1px solid var(--linie2);
  background:var(--creme);
  padding:52px var(--pad) 28px;
}
/* Ein Block, mittig, wie auf valuex-invest.com. Keine Spalten. */
.fuss .huelle{ text-align:center; }
.fuss-marke{
  font-family:var(--sans); font-weight:600; font-size:19px;
  letter-spacing:-.02em; color:var(--ink);
}
.fuss-marke em{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.1em; color:var(--blau);
}
.fuss-links{
  margin-top:22px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px;
}
.fuss-links a{
  color:var(--text2); font-size:14.5px;
  display:inline-flex; align-items:center; min-height:36px;
}
.fuss-links a:hover{ color:var(--blau); }
.fuss-copy{
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--linie2);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text3);
}
.fuss-warn{
  margin-top:20px; margin-inline:auto; max-width:52rem;
  font-size:12.5px; line-height:1.6; color:var(--text3);
}
@media (min-width:1024px){ .fuss{ padding-top:66px; } }

/* Am Daumen brauchen Links Flaeche, nicht nur Schrift. */
@media (max-width:639px){
  .fuss-links{ gap:4px 22px; }
  .fuss-links a{ min-height:44px; }
  .textlink{ min-height:44px; }
  .kopf-login{ display:inline-flex; align-items:center; min-height:44px; }
}