/* ==========================================================
   basis.css: gilt für alle Seiten
   Farben, Schrift, Kopf, Fuß, Knöpfe, Bildwelt, Aufklappen, Hintergrund. Designfarben in :root.
   ========================================================== */

:root{
  --blau:#365F91; --blau-hell:#548DD4; --cyan:#35A6D5;
  --grau:#717272; --body:#4A4A4A; --bg-hell:#EFF7FB; --linie:#CAD1D7;
  --navy:#1F3448;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Trebuchet MS','Segoe UI',sans-serif;color:var(--body);
     line-height:1.65;font-size:17px;background:#fff;-webkit-font-smoothing:antialiased}
.wrap{max-width:960px;margin:0 auto;padding:0 28px}
.wrap-eng{max-width:760px;margin:0 auto;padding:0 28px}

/* --- Kopf --- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);
       border-bottom:1px solid var(--linie);backdrop-filter:blur(6px)}
.hd{display:flex;align-items:center;justify-content:space-between;height:74px}
.hd img{height:34px;width:auto}
nav a{color:var(--grau);text-decoration:none;font-size:14.5px;margin-left:26px;
      padding-bottom:3px;border-bottom:2px solid transparent;transition:.15s}
nav a:hover{color:var(--blau);border-bottom-color:var(--cyan)}
.nav-mobile{display:none}
.logo{display:flex}
.hd-rechts{display:flex;align-items:center;gap:14px}
.sprache{margin-left:26px;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--blau);text-decoration:none;
         border:1px solid var(--linie);border-radius:3px;padding:3px 8px}
.sprache:hover{border-color:var(--cyan);color:var(--navy)}
/* --- Sektionen --- */
section{padding:78px 0;border-top:1px solid var(--linie)}
section:first-of-type{border-top:none}
.hell{background:var(--bg-hell);border-top:none}
h1{font-size:44px;line-height:1.18;color:var(--blau);font-weight:bold;letter-spacing:-.01em}
h2{font-size:29px;line-height:1.3;color:var(--blau);font-weight:bold;margin-bottom:22px;letter-spacing:-.005em}
h3{font-size:19px;color:var(--blau-hell);font-weight:bold;margin-bottom:10px}
p{margin-bottom:17px;max-width:70ch}
.lead{font-size:19.5px;color:#3A3A3A}
.klein{font-size:14px;color:var(--grau)}
/* --- Hero --- */
.hero{padding:64px 0 58px}
.hero h1{max-width:34ch}
.hero .sub{font-size:20px;color:#3A3A3A;margin:20px 0 30px;max-width:60ch}
.visual{margin:38px 0 8px;background:#fff;border:1px solid var(--linie);
        border-radius:3px;padding:22px}
.bildunterschrift{font-size:13.5px;color:var(--grau);margin-top:12px;text-align:center;font-style:italic}
/* --- Buttons --- */
.btn{display:inline-block;text-decoration:none;font-size:16px;padding:13px 26px;
     border-radius:3px;transition:.15s;font-weight:bold}
.btn-1{background:var(--blau);color:#fff;border:2px solid var(--blau)}
.btn-1:hover{background:var(--navy);border-color:var(--navy)}
.btn-2{background:transparent;color:var(--blau);border:2px solid var(--linie);margin-left:12px}
.btn-2:hover{border-color:var(--cyan);color:var(--cyan)}
/* --- Wege-Tabelle --- */
table{width:100%;border-collapse:collapse;margin-top:26px;font-size:16px}
th{text-align:left;padding:13px 16px;background:var(--blau);color:#fff;font-weight:bold;font-size:15px}
td{padding:15px 16px;border-bottom:1px solid var(--linie);vertical-align:top}
tr:nth-child(even) td{background:#FAFCFE}
td:first-child{font-weight:bold;color:var(--blau);width:26%}
/* --- Kriterien --- */
.krit{border-left:3px solid var(--cyan);padding:4px 0 4px 22px;margin-bottom:30px}
.krit h3{margin-bottom:7px}
/* --- Blöcke --- */
.block{margin-bottom:62px}
.block:last-child{margin-bottom:0}
.retro{background:#fff;border-left:3px solid var(--blau-hell);padding:20px 24px;
       margin:22px 0;font-style:italic;color:#4A4A4A}
.retro.aufhell{background:var(--bg-hell)}
/* --- Zitat --- */
.zitat{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--cyan);
       padding:28px 30px;margin:30px 0}
.zitat p{font-size:19px;color:#333;font-style:italic;margin-bottom:14px}
.zitat .quelle{font-size:14.5px;color:var(--grau);font-style:normal}
.zitat .hinweis{font-size:13px;color:var(--grau);margin-top:10px;font-style:normal;
                padding-top:10px;border-top:1px solid var(--linie)}
/* --- Explorer-Karte --- */
.explorer{background:#fff;border:1px solid var(--linie);border-radius:3px;
          padding:26px 28px;margin-top:26px}
.raster{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:18px 0 20px;max-width:420px}
.raster div{aspect-ratio:1;border-radius:2px}
/* --- Passung --- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:26px;
      border:1px solid var(--linie)}
.zwei > div{padding:26px 28px}
.zwei > div:first-child{border-right:1px solid var(--linie)}
.zwei h3{margin-bottom:16px}
.zwei ul{list-style:none}
.zwei li{padding:9px 0 9px 22px;position:relative;font-size:16px;border-bottom:1px solid #EEF1F3}
.zwei li:last-child{border-bottom:none}
.zwei li:before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;border-radius:50%}
.ja li:before{background:var(--cyan)}
.nein li:before{background:#C9CDD1}
/* --- FAQ --- */
.faq{border-top:1px solid var(--linie);padding:24px 0}
.faq:last-of-type{border-bottom:1px solid var(--linie)}
.faq h3{color:var(--blau);font-size:18px}
/* --- Abschluss --- */
.abschluss{background:var(--navy);color:#E8EEF4;border-top:none}
.abschluss h2{color:#fff}
.abschluss p{color:#C9D6E2}
.abschluss .btn-1{background:var(--cyan);border-color:var(--cyan);color:#0F2233}
.abschluss .btn-1:hover{background:#4FB8E3;border-color:#4FB8E3}
.abschluss .btn-2{color:#E8EEF4;border-color:#4A6480}
.abschluss .btn-2:hover{border-color:var(--cyan);color:var(--cyan)}
.person{display:flex;gap:26px;align-items:center;margin-top:44px;
        padding-top:32px;border-top:1px solid #33475F}
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0}
.person p{margin-bottom:0;font-size:16px}

footer{background:#152634;color:#8FA3B5;font-size:14px;padding:26px 0}
.fz{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:#8FA3B5;text-decoration:none;margin-left:20px}
footer a:hover{color:var(--cyan)}
footer img{height:26px;width:auto;opacity:.85}

@media(max-width:860px){
  nav{display:none} .nav-mobile{display:block;font:inherit;font-size:14px;color:var(--grau);background:none;border:none;cursor:pointer;padding:6px 0}
  .sprache{margin-left:0}
  header.offen nav{display:flex;flex-direction:column;position:absolute;top:74px;left:0;right:0;background:#fff;
                   border-bottom:1px solid var(--linie);padding:8px 28px 16px}
  header.offen nav a{margin:0;padding:11px 0;border-bottom:1px solid var(--linie)}
  h1{font-size:33px} h2{font-size:25px} body{font-size:16px}
  section{padding:52px 0} .zwei{grid-template-columns:1fr}
  .zwei > div:first-child{border-right:none;border-bottom:1px solid var(--linie)}
  .btn{display:block;text-align:center;margin-bottom:11px} .btn-2{margin-left:0}
  .person{flex-direction:column;text-align:center}
}
@media(max-width:700px){footer .fz{flex-direction:column;align-items:flex-start}footer a{margin-left:0!important;margin-right:16px;display:inline-block}footer div{max-width:100%;overflow-wrap:anywhere}}
/* --- V6: Bildwelt und Healthcheck (aus V2 übernommen, im V5-Stil) --- */
.bildband{height:190px;background-size:cover;background-position:center right;border-top:1px solid var(--linie)}
.hc-zeile{display:flex;align-items:center;gap:18px;margin-top:34px;padding-top:24px;border-top:1px solid var(--linie);max-width:660px}
.hc-zeile img{height:58px;width:auto}
.hc-zeile p{margin:0;font-size:15.5px;color:var(--grau);line-height:1.5}
.hc-zeile b{color:var(--blau)}
.instrument{display:grid;grid-template-columns:210px 1fr;gap:32px;align-items:center;background:var(--bg-hell);
  border:1px solid var(--linie);border-radius:3px;padding:26px 30px;margin:30px 0 8px}
.instrument img{width:100%;height:auto}
.instrument h3{color:var(--blau)}
.instrument ul{list-style:none;margin:4px 0 0}
.instrument li{padding:6px 0 6px 22px;position:relative;font-size:16px}
.instrument li:before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.badge{display:inline-block;background:var(--blau);color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;margin-bottom:12px;font-weight:bold}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 4px}
.karte{display:block;text-decoration:none;border:1px solid var(--linie);border-radius:3px;overflow:hidden;background:#fff;transition:.15s}
.karte:hover{border-color:var(--cyan);transform:translateY(-2px)}
.karte .bild{height:112px;background-size:cover;background-position:center}
.karte .txt{padding:13px 15px 15px}
.karte .nr{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grau);display:block}
.karte b{color:var(--blau);font-size:17px;display:block;margin:3px 0 3px}
.karte .k{font-size:14.5px;color:var(--body);display:block;line-height:1.45}
.faelle{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
.fall{border:1px solid var(--linie);border-radius:3px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.fall .bild{height:150px;background-size:cover;background-position:center}
.fall .txt{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.fall .tags{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin-bottom:8px}
.fall h3{color:var(--blau);font-size:18.5px;margin-bottom:10px;line-height:1.35}
.fall p{font-size:15.5px;margin-bottom:9px}
.fall .erg{background:var(--bg-hell);padding:11px 14px;font-size:15px;border-radius:2px;margin-top:auto}
.fall .erg b{color:var(--blau)}
.liste{list-style:none;margin:8px 0 20px}
.liste li{padding:9px 0 9px 24px;position:relative;border-bottom:1px solid #EEF1F3}
.liste li:before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
@media(max-width:700px){
  table,tbody,tr,td{display:block;width:100%!important}
  tr.kopf{display:none}
  tr{border:1px solid var(--linie);border-radius:3px;margin-bottom:12px;background:#fff;overflow:hidden}
  td{border-bottom:1px solid #EEF1F3;padding:10px 14px}
  td:last-child{border-bottom:none}
  tr:nth-child(even) td{background:#fff}
  td[data-label]:before{content:attr(data-label);display:block;font-size:11.5px;text-transform:uppercase;
    letter-spacing:.07em;color:var(--grau);font-weight:normal;margin-bottom:2px}
}
@media(max-width:860px){
  .instrument{grid-template-columns:1fr;gap:16px}.instrument img{max-width:230px}
  .karten,.faelle{grid-template-columns:1fr}.bildband{height:110px}
  .hc-zeile{align-items:flex-start}.hc-zeile img{height:46px}
}

/* --- V6.3/6.4: Aufklappen --- */
@keyframes rgein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
details.mehr{margin:4px 0 20px}
details.mehr>summary{list-style:none;cursor:pointer;color:var(--blau);font-weight:bold;font-size:15.5px;display:inline-flex;align-items:center;gap:9px;padding:6px 0}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary:before{content:"+";display:inline-flex;width:22px;height:22px;border:2px solid var(--cyan);border-radius:50%;
  align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--cyan);flex-shrink:0}
details.mehr[open]>summary:before{content:"\2013"}
details.mehr>summary:hover{color:var(--cyan)}
details.mehr .zu{display:none} details.mehr[open] .zu{display:inline} details.mehr[open] .auf{display:none}
details.mehr .inhalt{padding-top:10px;animation:rgein .3s ease}
details.faq-a{border-top:1px solid var(--linie)}
details.faq-a:last-of-type{border-bottom:1px solid var(--linie)}
details.faq-a>summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative}
details.faq-a>summary::-webkit-details-marker{display:none}
details.faq-a>summary h3{margin:0;color:var(--blau);font-size:18px}
details.faq-a>summary:hover h3{color:var(--cyan)}
details.faq-a>summary:after{content:"+";position:absolute;right:6px;top:15px;font-size:26px;color:var(--cyan);font-weight:bold}
details.faq-a[open]>summary:after{content:"\2013"}
details.faq-a .inhalt{padding-bottom:20px;animation:rgein .3s ease}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Hintergrund: Papier (warmes Hellgrau statt Hellblau, entschieden 24.10.2026) --- */
body .hell{background:#F5F3EE} body .hero{background:#FBFAF7}
body .ergebnis,body .zurueck,body .retro.aufhell{background:#F5F3EE}
/* V6.5: blaue Striche mittig, Text sitzt oben und unten mit gleichem Abstand am Strich */
.krit>:first-child,.erkennungsfrage>:first-child,.these>:first-child,.krit-b>:first-child,.zurueck>:first-child,.retro>:first-child,.unterschied>:first-child,.wenn>:first-child{margin-top:0}
.krit>:last-child,.erkennungsfrage>:last-child,.these>:last-child,.krit-b>:last-child,.zurueck>:last-child,.retro>:last-child,.unterschied>:last-child,.wenn>:last-child{margin-bottom:0}
.krit,.krit-b,.these{padding-top:6px;padding-bottom:6px}
/* V6.5: Logo im Fuß größer */
footer img{height:40px}
/* V6.5: Rechtstexte */
.recht h2{font-size:19px;margin:30px 0 8px}
.recht p{margin-bottom:10px}
/* V6.5: Einstiegszeile, alle Seiten */
.cta-zeile{margin:26px 0 0;font-size:16px}
.cta-zeile a{color:var(--blau);font-weight:600;text-decoration:none;border-bottom:2px solid var(--cyan)}
/* V6.5 (Pia): ein Maß für alle Akzentkästen, 4px Strich + 22px Abstand */
body .krit,body .erkennungsfrage,body .unterschied,body .haltung,body .retro,body .zitat,body details.weg .wenn,body .these,body .zurueck,body .krit-b,body .weg-b .wenn,body .weiter{border-left-width:4px;padding-left:22px}
body details.weg .wenn{margin-left:0;margin-right:0}