/* ==================================================================
   TYPENSEITEN und /test/
   Ergänzt css/basis.css. Dieselben Marken, andere Anordnung.
   Die Farbe eines Typs kommt über --tf und --tf2 aus der Seite selbst.
   ================================================================== */

/* ---------- Kopf einer Typenseite ---------- */
/* Vorher lag hier derselbe Farbverlauf wie auf der Startseite. Auf einer
   Leseseite war das falsch: Salbei auf Sand wird zu Khaki, und das Feld
   rechts stand mit heller Schrift auf hellem Grund, also unlesbar. Jetzt
   heller Grund, und die Farbe des Typs markiert nur den Streifen oben, die
   Zeile darüber und das Feld, in dem dieser Typ liegt. */
.typstreifen{height:3px;background:var(--tf,var(--feld-tief))}

.thero{
  position:relative;padding:118px 0 0;background:var(--papier-hell);
  border-bottom:1px solid var(--tinte-07);
}
.thero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:64px;
  align-items:center;padding-bottom:46px;
}
.thero .kicker{
  color:var(--tf,var(--feld-tief));margin-bottom:18px;display:block;font-weight:500;
}
.thero h1{
  font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:300;letter-spacing:-.03em;
  /* 1.02 schnitt die Punkte auf dem Ä ab */
  line-height:1.09;margin:0;color:var(--tinte);
}
.thero .essenz{
  margin-top:22px;max-width:40ch;font-size:clamp(1.02rem,1.5vw,1.19rem);
  line-height:1.56;color:var(--tinte-60);
}

/* Handlung im Kopf: der Weg zum Heft und der Weg zum Test */
.thero-tun{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}
.thero-tun .dazu{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinte-38);
}

/* Zahlen und Namen, schmal gehalten */
.thero .werte{
  display:flex;gap:40px;flex-wrap:wrap;
  border-top:1px solid var(--tinte-14);padding:20px 0 26px;
}
.thero .werte div{display:flex;flex-direction:column;gap:5px}
.thero .werte b{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--tinte-38);
}
.thero .werte span{font-size:14.5px;color:var(--tinte-60);line-height:1.45}

/* Das Feld: welcher Quadrant zu dieser Seite gehört, ist eingefärbt.
   Vorher stand dort ein leeres Raster, solange niemand aus dem Test kam. */
.feld .zone{
  position:absolute;width:50%;height:50%;pointer-events:none;
  background:var(--tf,var(--feld-tief));opacity:.17;
}
.feld .zone.z-tl{left:0;top:0}
.feld .zone.z-tr{right:0;top:0}
.feld .zone.z-bl{left:0;bottom:0}
.feld .zone.z-br{right:0;bottom:0}
.feld .quad.aktiv{color:var(--tf,var(--feld-tief));font-weight:500}
.feld-hier{
  position:absolute;left:0;right:0;bottom:-27px;text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinte-38);
}

@media(max-width:920px){
  .thero{padding:98px 0 0}
  .thero-grid{grid-template-columns:1fr;gap:38px;padding-bottom:34px}
  .thero-grid > div:last-child{max-width:250px}
  .thero .werte{gap:26px}
}

/* ---------- Brotkrumen im Kopf ---------- */
.krumen{
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:26px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.krumen a{color:var(--tinte-38);text-decoration:none}
.krumen a:hover{color:var(--tinte);text-decoration:underline}
.krumen i{font-style:normal;color:var(--tinte-14)}
.krumen b{font-weight:400;color:var(--tinte-60)}

/* ---------- Persönliches Ergebnis, wenn jemand aus dem Test kommt ---------- */
.dein{background:var(--tinte);color:var(--papier-hell);display:none}
.dein.an{display:block}
.dein .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:16px 0}
.dein .mono{color:rgba(250,248,244,.5)}
.dein .zahlen{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.dein .zahlen span{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:rgba(250,248,244,.9);font-variant-numeric:tabular-nums}
.dein .zahlen span i{font-style:normal;color:rgba(250,248,244,.42)}

/* ---------- Lesebreite ---------- */
.lese{max-width:41rem}
.lese p{font-size:1.04rem;line-height:1.68;color:var(--tinte-60)}
.lese p + p{margin-top:1.05em}
.lese p strong{font-weight:500;color:var(--tinte)}

/* ---------- «Kennst du das» ---------- */
/* Der Kern der Seite. Jede Zeile ist eine Szene, keine Erklärung.
   Nummeriert wäre falsch, das ist keine Reihenfolge. */
.szenen{list-style:none;margin:0;padding:0;border-top:1px solid var(--tinte-14)}
.szenen li{
  border-bottom:1px solid var(--tinte-14);padding:25px 0;
  display:grid;grid-template-columns:26px 1fr;gap:20px;align-items:start;
  transition:background .25s ease;
}
.szenen li:hover{background:var(--tinte-07)}
.szenen li::before{
  content:"";width:7px;height:7px;border-radius:50%;margin-top:.6em;
  background:var(--tf,var(--feld-tief));justify-self:center;
}
.szenen p{margin:0;font-size:clamp(1.04rem,1.7vw,1.24rem);line-height:1.46;
  font-weight:300;letter-spacing:-.011em;max-width:45ch}
.szenen p em{font-style:normal;color:var(--tinte-38);display:block;
  font-size:.82em;margin-top:9px;letter-spacing:0;line-height:1.52;font-weight:400}
@media(max-width:640px){.szenen li{grid-template-columns:15px 1fr;gap:14px;padding:20px 0}}

/* ---------- Mechanismus in Schritten ---------- */
.mech{display:grid;gap:1px;background:var(--tinte-14);
  border:1px solid var(--tinte-14);border-radius:var(--r-m);overflow:hidden}
.mech-schritt{background:var(--papier-hell);padding:25px 28px;
  display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start}
.mech-schritt .zahl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--tinte-38);padding-top:5px}
.mech-schritt h3{margin:0 0 8px}
.mech-schritt p{margin:0;color:var(--tinte-60);font-size:15.4px;line-height:1.6;max-width:52ch}
.mech-schritt.betont{background:var(--sand)}
.mech-schritt.betont .zahl{color:rgba(23,29,25,.5)}
.mech-schritt.betont p{color:rgba(23,29,25,.72)}
.mech-schritt.betont .marke{
  display:inline-block;margin-top:11px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(23,29,25,.55);
  border-top:1px solid rgba(23,29,25,.18);padding-top:9px;
}
@media(max-width:640px){
  .mech-schritt{grid-template-columns:1fr;gap:9px;padding:22px}
  .mech-schritt .zahl{padding-top:0}
}

/* ---------- Karten ---------- */
.karten2{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:18px}
.karte{
  background:var(--papier-hell);border:1px solid var(--tinte-07);
  border-radius:var(--r-m);padding:25px 27px;display:flex;flex-direction:column;gap:11px;
}
.karte h3{margin:0}
.karte p{margin:0;color:var(--tinte-60);font-size:15.2px;line-height:1.6}
.karte .quelle{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinte-38);margin-top:auto;padding-top:10px}

/* ---------- Was nicht stimmt ---------- */
.mythen{display:grid}
.mythe{display:grid;grid-template-columns:23rem 1fr;border-top:1px solid var(--tinte-14)}
.mythe:last-child{border-bottom:1px solid var(--tinte-14)}
.mythe .falsch,.mythe .richtig{padding:23px 26px}
.mythe .falsch{
  background:rgba(176,86,51,.06);
  font-size:1.05rem;font-weight:300;line-height:1.42;letter-spacing:-.012em;
  color:var(--tinte-60);
}
.mythe .falsch::before{
  content:"Oft gehört";display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ton);margin-bottom:11px;
}
.mythe .richtig{font-size:15.4px;line-height:1.62;color:var(--tinte-60)}
.mythe .richtig::before{
  content:"Was stimmt";display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--feld-tief);margin-bottom:11px;
}
.mythe .richtig strong{color:var(--tinte);font-weight:500}
@media(max-width:760px){
  .mythe{grid-template-columns:1fr}
  .mythe .falsch{padding-bottom:18px}
}

/* ---------- Hebel ---------- */
.hebel{display:grid;border-top:1px solid var(--tinte-14)}
.hebel-eintrag{
  border-bottom:1px solid var(--tinte-14);padding:30px 0;
  display:grid;grid-template-columns:1.1fr 1fr;gap:42px;align-items:start;
}
.hebel-eintrag h3{margin:0 0 12px}
.hebel-eintrag .was{color:var(--tinte-60);font-size:15.4px;line-height:1.62;margin:0}
.hebel-eintrag .belegt{
  background:rgba(148,167,154,.15);border-radius:var(--r-s);padding:17px 19px;
  font-size:14.4px;line-height:1.58;color:var(--tinte-60);
}
.hebel-eintrag .belegt b{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte-38);margin-bottom:8px;font-weight:500;
}
@media(max-width:820px){.hebel-eintrag{grid-template-columns:1fr;gap:18px}}

/* ---------- Die anderen Typen ---------- */
.andere{display:grid;grid-template-columns:repeat(auto-fit,minmax(213px,1fr));gap:13px}
.andere a{
  text-decoration:none;background:var(--papier-hell);border:1px solid var(--tinte-07);
  border-radius:var(--r-m);padding:22px 23px;display:flex;flex-direction:column;gap:9px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.andere a:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,29,25,.09);
  border-color:var(--tinte-14)}
.andere a.hier{background:var(--tinte-07);pointer-events:none;opacity:.5}
.andere .mini{width:38px;height:38px;border-radius:7px;position:relative;
  border:1px solid var(--tinte-14);background:rgba(148,167,154,.14)}
.andere .mini::before,.andere .mini::after{content:"";position:absolute;background:var(--tinte-14)}
.andere .mini::before{left:50%;top:0;bottom:0;width:1px}
.andere .mini::after{top:50%;left:0;right:0;height:1px}
.andere .mini i{position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--tinte);transform:translate(-50%,50%)}
.andere b{font-weight:500;font-size:1.01rem;letter-spacing:-.01em}
.andere span{font-size:13.6px;color:var(--tinte-60);line-height:1.5}
.andere .pfeil{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinte-38);margin-top:auto;padding-top:6px}

/* ---------- Angebot auf der Typenseite ---------- */
.angebot{
  background:var(--papier-hell);border:1px solid var(--tinte-07);border-radius:var(--r-l);
  padding:36px;display:grid;grid-template-columns:296px 1fr;gap:44px;align-items:center;
}
.angebot h3{font-size:1.58rem;font-weight:300;letter-spacing:-.022em;margin:0 0 14px}
.angebot p{color:var(--tinte-60);font-size:15.6px;line-height:1.62;max-width:48ch;margin:0}
.angebot ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;
  font-size:14.9px;color:var(--tinte-60)}
.angebot ul li{display:flex;gap:10px}
.angebot ul li::before{content:"—";color:var(--tinte-38);flex:none}
.angebot .knopfreihe{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
.angebot .preis{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--tinte-60)}
@media(max-width:860px){.angebot{grid-template-columns:1fr;gap:28px;padding:27px}}

/* ---------- Weiterlesen-Band nach dem Ergebnis ---------- */
.weiter{
  margin-top:56px;border-radius:var(--r-l);padding:34px 36px;
  background:linear-gradient(150deg,var(--feld-tief),var(--feld));color:#FBFAF7;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
}
.weiter h3{color:#FBFAF7;font-size:1.48rem;font-weight:300;letter-spacing:-.02em;margin:0 0 10px}
.weiter p{color:rgba(255,255,255,.8);font-size:15.5px;line-height:1.6;max-width:47ch;margin:0}
.weiter .btn{background:#FBFAF7;color:var(--tinte)}
.weiter .btn:hover{background:#fff}
@media(max-width:760px){.weiter{grid-template-columns:1fr;gap:22px;padding:28px}}

/* ---------- Zwischenruf ---------- */
/* Ein einzelner Satz, der auf einer langen Seite hängen bleiben soll. */
.ruf{padding:6px 0 6px 26px;border-left:2px solid var(--tf,var(--feld-tief));max-width:36rem}
.ruf p{margin:0;font-size:clamp(1.13rem,2.1vw,1.48rem);font-weight:300;
  line-height:1.42;letter-spacing:-.018em}
.ruf .wer{display:block;margin-top:13px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-38)}

/* ---------- Kleinteile ---------- */
.grenze{
  padding:25px 28px;border-radius:var(--r-m);border:1px dashed var(--tinte-14);
  font-size:15.4px;line-height:1.64;color:var(--tinte-60);max-width:64ch;
}
.grenze strong{color:var(--tinte);font-weight:500}
.stapel{display:flex;flex-direction:column;gap:24px}
.mitte{max-width:840px;margin-inline:auto}
.nav-links a.hier{color:var(--tinte);font-weight:500}

/* Auf Unterseiten steht die Leiste zeitweise auf hellem Grund */
body.unterseite .nav-inner{background:rgba(250,248,244,.84)}

/* ---------- Test als eigene Seite ---------- */
/* Quiz und Ergebnis waren vorher überlagerte Ansichten. Als eigene Seite
   brauchen sie keine feste Positionierung mehr, nur den gleichen Grund. */
body.testseite{
  background:
    radial-gradient(100% 60% at 85% 0%, rgba(223,201,166,.5), transparent 60%),
    linear-gradient(180deg,var(--papier-hell),var(--papier) 60%);
  background-attachment:fixed;
}
.stufe-quiz,.stufe-ergebnis{display:none}
.stufe-quiz.an,.stufe-ergebnis.an{display:block}

/* ==================================================================
   ERGEBNIS: der kurze Bildschirm
   Vorher stand hier die ganze Auswertung mit Mechanismus, Hebeln und
   Angebot. Das war eine zweite Seite mitten im Ablauf. Jetzt nur noch
   der Befund und zwei Wege weiter, alles andere steht auf der Typenseite.
   ================================================================== */
/* width über --mx, sonst kleben Text und Knöpfe auf dem Handy am Rand:
   --mx ist min(1180px,92vw), das ergibt bei 375 px einen Rand von 15 px. */
.eg{width:var(--mx);max-width:800px;margin-inline:auto;padding:clamp(44px,9vh,96px) 0 96px}
.eg .marke{color:var(--tinte-38)}
.eg h2{
  font-size:clamp(2rem,4.8vw,3.3rem);font-weight:300;letter-spacing:-.028em;
  line-height:1.06;margin:14px 0 0;
}
.eg .lede{margin-top:20px;max-width:44ch}

/* Werte links, Feld rechts. Das Feld war mit 178 px zu klein, um darin
   etwas zu erkennen. */
.eg-werte{
  display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:48px;align-items:center;
  margin-top:36px;padding-top:30px;border-top:1px solid var(--tinte-14);
}
.eg-werte .r-scores{margin:0;max-width:none}

/* Der Punkt muss über der Beschriftung liegen, sonst verschwindet er darin,
   sobald ein Ergebnis in der Mitte landet. Ring in Papierfarbe als Abstand. */
#rfeld .quad{line-height:1.35;max-width:42%}
#rfeld .dot{
  z-index:3;
  box-shadow:0 0 0 3.5px var(--papier-hell), 0 0 0 8px rgba(176,86,51,.16);
}

/* Kurzfassung der Werte, erscheint erst auf schmalen Bildschirmen */
.eg-kurzwerte{display:none}

/* Die zwei Wege weiter */
.eg-tun{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:40px}
.eg-tun .btn{padding:16px 28px}
.eg-fein{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinte-38);
}
.eg .note{margin-top:44px;max-width:none}

@media(max-width:700px){
  /* Auf dem Handy bekommt das Feld den Platz. Die zwei Balken sagen dasselbe
     wie die Lage des Punktes, also stehen sie hier nur als Zahlenzeile
     darüber. Die beiden Knöpfe rücken nebeneinander, damit sie ohne Scrollen
     sichtbar bleiben. */
  .eg{padding:26px 0 72px}
  .eg h2{font-size:1.85rem}
  .eg .lede{font-size:1rem;margin-top:14px}

  .eg-werte{grid-template-columns:1fr;gap:18px;margin-top:22px;padding-top:20px}
  .eg-werte .r-scores{display:none}
  .eg-werte > div:last-child{
    max-width:none;justify-self:center;width:min(300px,78vw);
  }

  .eg-kurzwerte{
    display:flex;gap:22px;flex-wrap:wrap;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--tinte-38);
  }
  .eg-kurzwerte b{
    color:var(--tinte);font-weight:500;font-size:13px;letter-spacing:.02em;
    margin-left:5px;
  }

  /* Umbruch erlaubt: der Hinweis darunter hat flex-basis 100%, und ohne
     Umbruch quetscht er die zwei Knöpfe auf ein paar Pixel zusammen. */
  .eg-tun{gap:10px;margin-top:26px;flex-wrap:wrap;align-items:stretch}
  .eg-tun .btn{
    flex:1 1 calc(50% - 5px);min-width:0;padding:14px 10px;font-size:13.5px;
    text-align:center;justify-content:center;line-height:1.3;
  }
  .eg-fein{flex-basis:100%;order:3;margin-top:2px}
}

/* Sehr schmal: kleinere Schrift statt untereinander, damit die zwei Knöpfe
   nebeneinander bleiben und nicht 100 px Höhe kosten */
@media(max-width:340px){
  .eg-tun .btn{font-size:12.5px;padding:13px 8px}
}

/* ---------- Kurze Bildschirme ----------
   Auf einem 667 px hohen Gerät reicht die Höhe nicht für Überschrift, Satz,
   ein 293 px grosses Feld und zwei Knöpfe. Das Feld gibt dann Platz ab: es
   bleibt immer noch deutlich grösser als die 170 px von vorher, und die
   Knöpfe bleiben ohne Scrollen sichtbar. */
@media(max-width:700px) and (max-height:770px){
  .eg{padding:18px 0 60px}
  .eg h2{font-size:1.6rem}
  .eg .lede{font-size:.95rem;margin-top:11px}
  .eg-werte{gap:14px;margin-top:16px;padding-top:15px}
  .eg-werte > div:last-child{width:min(232px,62vw)}
  .eg-tun{margin-top:18px}
  .eg .note{margin-top:30px}
}

/* Noch kürzer: der Satz unter der Überschrift steht auch auf der Typenseite,
   hier zählt der Befund plus die zwei Wege. */
@media(max-width:700px) and (max-height:625px){
  .eg .lede{display:none}
  .eg h2{font-size:1.45rem}
  .eg-werte > div:last-child{width:min(196px,54vw)}
  .eg-werte{margin-top:12px;padding-top:12px;gap:12px}
}