:root,
:root[data-welt="05"] {
  
  --grund: #FAFBFB;
  --kasten: #FFFFFF;
  --tint: #EEF1F2;
  --linie: #DDE3E5;
  --text: #1B2A33;
  --text-2: #56636B;
  --akzent: #1D6E7E;
  --akzent-tief: #14515E;
  --klangfeld: #2A8296;
  --klangfeld-2: #7FB3BE;
  --klangfeld-3: #D9CFC0;
  --dunkel: #16232B;
  --marke-ai: #2A9EB6; --schluessel-mitte: #2A8296;
}


:root[data-welt="00"] {
  --grund: #FCF8F5; --kasten: #FFFFFF; --tint: #F6F0EA; --linie: #E4DCD3;
  --text: #2D3660; --text-2: #5B6288; --akzent: #2C7872; --akzent-tief: #1F5A55;
  --klangfeld: #6AB5AF; --klangfeld-2: #A2CFCB; --klangfeld-3: #DED3C6;
  --dunkel: #232B4E;
  --marke-ai: #3A9C92;
}

:root[data-welt="01"] {
  --grund: #FAF7F2; --kasten: #FFFFFF; --tint: #F3EDE4; --linie: #E3DBD0;
  --text: #223B45; --text-2: #4E6771; --akzent: #287689; --akzent-tief: #1B5768;
  --klangfeld: #CAA158; --klangfeld-2: #DCC08F; --klangfeld-3: #C9D6DA;
  --dunkel: #1B3038;
  --marke-ai: #2E9BB5;
}

:root[data-welt="02"] {
  --grund: #F7F7F3; --kasten: #FFFFFF; --tint: #EDEEE7; --linie: #DCDDD3;
  --text: #243D30; --text-2: #55675E; --akzent: #307A53; --akzent-tief: #22593B;
  --klangfeld: #CF9F31; --klangfeld-2: #E0C071; --klangfeld-3: #BFCBC1;
  --dunkel: #1D3226;
  --marke-ai: #359A65;
}

:root[data-welt="06"] {
  --grund: #F7F5F0; --kasten: #FFFFFF; --tint: #F2EFE8; --linie: #E2DCCF;
  --text: #232323; --text-2: #5C5952; --akzent: #C0362C; --akzent-tief: #99281F;
  --klangfeld: #E4473D; --klangfeld-2: #487A8B; --klangfeld-3: #E5B93F;
  --dunkel: #232323;
  
  --auf-dunkel: #7FB0C4;
  --marke-ai: #E4473D;
  --schluessel-mitte: #487A8B;
}


:root[data-welt="07"] {
  --grund: #F8F5EE; --kasten: #FFFFFF; --tint: #F3EFE7; --linie: #E3DCCE;
  --text: #2B2536; --text-2: #605970; --akzent: #4B3F72; --akzent-tief: #372B5A;
  --klangfeld: #3F7C78; --klangfeld-2: #8FAE91; --klangfeld-3: #E89A72;
  --dunkel: #2B2536;
  
  --marke-ai: #8474C0;
  --schluessel-mitte: #3F7C78;
}


:root[data-welt="08"] {
  --grund: #F7F4EE; --kasten: #FFFFFF; --tint: #EFEBE2; --linie: #E0DACE;
  --text: #18233A; --text-2: #565F72; --akzent: #C2185B; --akzent-tief: #9C1B5E;
  --klangfeld: #E94B8A; --klangfeld-2: #3A7BFF; --klangfeld-3: #E25800;
  --dunkel: #18233A; --auf-dunkel: #FFD84D;
  --marke-ai: #E94B8A;
  --schluessel-mitte: #3A7BFF;
}


:root[data-welt="09"] {
  --grund: #F7F4EE; --kasten: #FFFFFF; --tint: #EFEBE2; --linie: #E0DACE;
  --text: #18233A; --text-2: #565F72; --akzent: #B84A00; --akzent-tief: #8F3900;
  --klangfeld: #E25800; --klangfeld-2: #E94B8A; --klangfeld-3: #3A7BFF;
  --dunkel: #18233A; --auf-dunkel: #FFD84D;
  --marke-ai: #E25800;
  --schluessel-mitte: #3A7BFF;
}


:root[data-welt="10"] {
  --grund: #FAFAFB; --kasten: #FFFFFF; --tint: #F1F2F4; --linie: #E1E4E8;
  --text: #1C2229; --text-2: #5A626B; --akzent: #C2185B; --akzent-tief: #9C1B5E;
  --klangfeld: #E94B8A; --klangfeld-2: #4A5A6A; --klangfeld-3: #6B7280;
  --dunkel: #171C22; --auf-dunkel: #F58BB4;
  --marke-ai: #E94B8A;
  --schluessel-mitte: #4A5A6A;
}


:root[data-welt="11"] {
  --grund: #F7FBF9; --kasten: #FFFFFF; --tint: #EDF4F1; --linie: #DCE7E2;
  --text: #14201C; --text-2: #55625C; --akzent: #0E7C66; --akzent-tief: #0B6653;
  --klangfeld: #149B7C; --klangfeld-2: #4E7F8C; --klangfeld-3: #9AA8A2;
  --dunkel: #12211D; --auf-dunkel: #35C9A5; --marke-ai: #149B7C;
  --schluessel-mitte: #4E7F8C;
}


:root[data-welt="12"] {
  --grund: #12211D; --kasten: #1A2C27; --tint: #182722; --linie: #2C403A;
  --text: #E9F2EE; --text-2: #A3B8B0; --akzent: #35C9A5; --akzent-tief: #5FE3C0;
  --klangfeld: #35C9A5; --klangfeld-2: #6FB8C9; --klangfeld-3: #C8B89A;
  --dunkel: #0B1512; --auf-dunkel: #5FE3C0; --marke-ai: #5FE3C0;
  --knopf-schrift: #0B1512;
  --schluessel-mitte: #C8B89A;
}


:root[data-welt="13"] {
  --grund: #0D1117; --kasten: #161B22; --tint: #12171F; --linie: #262D38;
  --text: #E6EDF3; --text-2: #9AA7B4;
  --akzent: #B6FF3B; --akzent-tief: #CBFF6E;
  --link: #A8B6C8; --link-hover: #B6FF3B;
  --klangfeld: #B6FF3B; --klangfeld-2: #9FB0C0; --klangfeld-3: #5A6675;
  --dunkel: #06090D; --auf-dunkel: #B6FF3B; --marke-ai: #B6FF3B;
  --knopf-schrift: #0D1117;
  --schluessel-mitte: #5A6675;
}


:root[data-welt="14"] {
  
  --grund: #FAF4E4; --kasten: #FFFFFF; --tint: #D3CDFB; --linie: #E3DBC2;
  --text: #0F0F0F; --text-2: #4C4A42;
  --akzent: #D6006B; --akzent-tief: #A80054;
  --flaeche: #FF3D9A; --knopf-schrift: #0F0F0F;
  --klangfeld: #3A7BFF; --klangfeld-2: #D6006B; --klangfeld-3: #6E22D9;
  
  --dunkel: #0F0F0F; --auf-dunkel: #DFFF4F; --marke-ai: #FB3695;
  --schluessel-mitte: #3A7BFF;
}


:root[data-welt="15"] {
  --grund: #FAF4E4; --kasten: #FFFFFF; --tint: #86CFFF; --linie: #E3DBC2;
  --text: #0F0F0F; --text-2: #4C4A42;
  --akzent: #1E4FE0; --akzent-tief: #143CB0;
  --flaeche: #3A7BFF; --knopf-schrift: #0F0F0F;
  --klangfeld: #3A7BFF; --klangfeld-2: #3B2FBF; --klangfeld-3: #0A8FB0;
  --dunkel: #0B1020; --auf-dunkel: #6FC3FF; --marke-ai: #3A7BFF;
  --schluessel-mitte: #0A8FB0;
}


:root[data-welt="16"] {
  --grund: #F7F8FB; --kasten: #FFFFFF; --tint: #EEF1F7; --linie: #DBE1EE;
  --text: #141D33; --text-2: #5B6A8C;
  --akzent: #0B7A5C; --akzent-tief: #0A7D5F;
  --flaeche: #0E9F7A; --flaeche-hell: #16BD91; --knopf-schrift: #141D33;
  --klangfeld: #0E9F7A; --klangfeld-2: #E23B4E; --klangfeld-3: #C8922A;
  --dunkel: #0F1729; --auf-dunkel: #E8B13C; --marke-ai: #0E9F7A;
  --schluessel-mitte: #E23B4E;
}


:root[data-welt="03"] {
  --grund: #FBF8F3; --kasten: #FFFFFF; --tint: #F4EDE3; --linie: #E6DCCE;
  --text: #43362B; --text-2: #69635D; --akzent: #B64B2B; --akzent-tief: #8D361C;
  --klangfeld: #91ABC4; --klangfeld-2: #B8C9DA; --klangfeld-3: #DCCBB4;
  --dunkel: #33291F;
  --marke-ai: #E06238;
}

:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  
  --t-riesig: clamp(2.2rem, 5.4vw, 3.8rem);
  --t-gross:  clamp(1.55rem, 3.2vw, 2.2rem);
  --t-mittel: 1.12rem;
  --t-text:   1rem;
  --t-klein:  .82rem;

  
  --r-gross: 14px;
  --r-klein: 8px;

  --breite: 1120px;
  --luft: clamp(3.5rem, 7vw, 6rem);
}



*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-text);
  line-height: 1.62;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.16; margin: 0 0 .6em; letter-spacing: -.015em; }
h1 { font-size: var(--t-riesig); font-weight: 700; }
h2 { font-size: var(--t-gross); font-weight: 700; }
h3 { font-size: var(--t-mittel); font-weight: 650; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }


a { color: var(--link, var(--akzent)); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--link-hover, var(--akzent-tief)); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.springlink {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--dunkel); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-klein) 0;
}
.springlink:focus { left: 0; }



.band { position: relative; padding: var(--luft) 1.5rem; }
.band.hell { background: var(--grund); }
.band.tief { background: var(--tint); }
.band.dunkel { background: var(--dunkel); color: #EEF2F3; }
.band.dunkel h2, .band.dunkel h3 { color: #fff; }
.band.dunkel p { color: #C4D0D4; }

.band.dunkel a { color: var(--auf-dunkel, var(--klangfeld-2)); }

.band.dunkel .knopf { color: var(--knopf-schrift, #fff); }
.band.dunkel .knopf-leise { color: #fff; }
.band.dunkel .knopf-leise:hover { color: var(--klangfeld-2); }

.inner { max-width: var(--breite); margin: 0 auto; position: relative; z-index: 1; }


.schmal { max-width: var(--breite); }
.schmal > *:not(.raster):not(.tueren-raster):not(.linienstreifen) { max-width: 760px; }


.linienstreifen {
  position: relative;
  height: clamp(90px, 12vh, 140px);
  margin: 2.4rem calc(50% - 50vw) calc(var(--luft) * -0.45);
  width: 100vw;
}
.linienstreifen canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.band { overflow: hidden; }



.kopf {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--linie);
}
@supports not (backdrop-filter: blur(2px)) { .kopf { background: var(--grund); } }

.kopf-inner {
  max-width: var(--breite); margin: 0 auto;
  display: flex; align-items: center; gap: 1.6rem;
  padding: .85rem 1.5rem;
  flex-wrap: wrap;   
}

.marken-link {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--text); flex: 0 0 auto;
}





.wortmarke {
  display: block;
  height: 24px;
  width: auto;
  aspect-ratio: 950 / 112;   
  color: var(--text);        
}

.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.nav a {
  color: var(--text-2); text-decoration: none;
  font-size: .93rem; padding: .5rem .7rem; border-radius: var(--r-klein);
}
.nav a:hover { color: var(--text); background: var(--tint); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

.nav-cta {
  background: var(--flaeche, var(--akzent));
  color: var(--knopf-schrift, #fff) !important;
  padding: .55rem 1.05rem !important; border-radius: 999px;
  font-weight: 600; margin-left: .5rem;
}
.nav-cta:hover { background: var(--akzent-tief) !important; }

.nav-schalter {
  display: none; margin-left: auto; background: none; border: 1px solid var(--linie);
  border-radius: var(--r-klein); padding: .45rem .7rem; font-size: 1.05rem;
  color: var(--text); cursor: pointer;
}

@media (max-width: 940px) {
  .nav-schalter { display: block; }
  
  .nav {
    flex-basis: 100%; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--linie);
    padding: .5rem 0 .2rem;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .7rem .2rem; }
  .nav-cta { text-align: center; margin: .5rem 0 0; }
}




.hero {
  padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: 0; overflow: hidden;
  background:
    radial-gradient(55% 55% at 78% 12%,
      color-mix(in srgb, var(--klangfeld) 9%, transparent), transparent 70%),
    radial-gradient(45% 45% at 6% 88%,
      color-mix(in srgb, var(--klangfeld-3) 7%, transparent), transparent 70%),
    var(--grund);
}
.hero .inner { display: grid; gap: 2rem; }

.hero-inhalt { max-width: 840px; }
.hero-inhalt .claim { max-width: 60ch; }


.kicker {
  font-size: .95rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--akzent); margin-bottom: .9rem;
}

.claim { font-size: var(--t-mittel); color: var(--text-2); max-width: 56ch; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-top: 1.6rem; }


.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  
  
  background: linear-gradient(135deg,
              var(--flaeche-hell, var(--flaeche, var(--akzent))),
              var(--flaeche, var(--akzent)));
  color: var(--knopf-schrift, #fff);
  text-decoration: none;
  padding: .8rem 1.5rem; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--flaeche, var(--akzent));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--flaeche, var(--akzent)) 26%, transparent);
}
.knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); color: var(--knopf-schrift, #fff); }


.knopf-leise {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text); text-decoration: none; font-weight: 600;
}
.knopf-leise::after { content: "→"; transition: transform .18s ease; }
.knopf-leise:hover { color: var(--akzent); }
.knopf-leise:hover::after { transform: translateX(3px); }

.hero-fuss {
  margin-top: 1.8rem; font-size: var(--t-klein); color: var(--text-2);
  display: flex; align-items: flex-start; gap: .5rem;
}
.punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--klangfeld);
  flex: 0 0 auto; margin-top: .5em;
}


.linienfeld {
  
  position: relative; height: clamp(240px, 34vh, 330px);
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}
.linienfeld canvas { position: absolute; inset: 0; width: 100%; height: 100%; }



.raster { display: grid; gap: 1.4rem; }


.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.zwei { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .raster.drei { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .raster.drei, .raster.zwei { grid-template-columns: 1fr; }
}

.karte {
  background: var(--kasten); border: 1px solid var(--linie);
  border-radius: var(--r-gross); padding: 1.5rem 1.5rem 1.6rem;
}
.karte h3 { margin-bottom: .45rem; }
.karte p { color: var(--text-2); font-size: .97rem; }


.ebene-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--flaeche, var(--akzent));
  color: var(--knopf-schrift, #fff);
  font-weight: 700; font-size: .92rem; margin-bottom: .9rem;
}
.karte h3 em {
  display: block; font-style: normal; font-weight: 500;
  font-size: .85rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-2); margin-top: .3rem;
}

.notiz {
  display: block; margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--linie);
  font-size: var(--t-klein); color: var(--text-2);
}
.notiz strong { color: var(--text); }



.abschnitt-kopf { max-width: 680px; margin-bottom: 2.6rem; }
.klangmarke {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--t-klein); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); font-weight: 600; margin-bottom: .8rem;
}
.klangmarke i {
  display: block; width: 26px; height: 2px; background: var(--klangfeld);
  border-radius: 2px;
}



.tuer {
  display: grid; grid-template-columns: 1fr auto; gap: .4rem 1.2rem;
  align-items: start;
  padding: 1.15rem 0; border-bottom: 1px solid var(--linie);
}
.tuer:last-child { border-bottom: 0; }
.tuer h3 { margin: 0; font-size: 1.04rem; }
.tuer .schmerz {
  grid-column: 1 / -1; margin: 0; color: var(--text-2);
  font-size: .96rem; font-style: italic; max-width: 68ch;
}

.marke-reife {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; padding: .28rem .6rem; border-radius: 999px;
  white-space: nowrap; border: 1px solid transparent;
}
.reife-gebaut  { background: var(--akzent); color: #fff; }
.reife-muster  { background: var(--tint); color: var(--akzent-tief); border-color: var(--linie); }
.reife-konzept { background: transparent; color: var(--text-2); border-color: var(--linie); }





.grenze {
  border: 1px solid var(--linie); border-left: 3px solid var(--akzent);
  border-radius: var(--r-gross); background: var(--kasten);
  padding: 1.6rem 1.7rem;
}
.fundstelle {
  font-family: var(--mono); font-size: .8rem; color: var(--text-2);
  margin-top: .8rem; display: block;
}



.schritte { counter-reset: schritt; display: grid; gap: 0; }
.schritt {
  counter-increment: schritt;
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.4rem;
  padding: 0 0 2rem;
  
  position: relative;
}
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--mono); font-size: .92rem; font-weight: 700;
  color: var(--akzent);
  grid-row: 1 / span 3;
  position: relative; padding-top: .15rem;
}

.schritt:not(:last-child)::after {
  content: ""; position: absolute; margin-left: .95rem; margin-top: 2rem;
  width: 1px; height: calc(100% - 2.4rem); background: var(--linie);
}
.schritt h3 { margin-bottom: .35rem; }
.schritt p { color: var(--text-2); max-width: 66ch; }



.tabelle-huelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
th, td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: var(--t-klein); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }



.fuss { background: var(--dunkel); color: #B9C6CB; padding: 3.2rem 1.5rem 2.4rem; }
.fuss .inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fuss h4 { color: #fff; font-size: var(--t-klein); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .8rem; }
.fuss a { color: #D5E0E4; text-decoration: none; display: block; padding: .22rem 0; }
.fuss a:hover { color: #fff; text-decoration: underline; }

.fuss .wortmarke { height: 26px; color: #fff; }
.fuss-unten {
  max-width: var(--breite); margin: 2.4rem auto 0; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--t-klein); color: #8A9AA0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
}



.wz {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  background: #17171A; color: #F2F2F0; border: 1px solid #34343C;
  border-radius: var(--r-gross); padding: .85rem 1rem;
  font-size: .78rem; max-width: 260px;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
.wz[hidden] { display: none; }
.wz h5 { margin: 0 0 .55rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #9A9AA4; font-weight: 600; }
.wz-reihe { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }
.wz button {
  background: #232328; color: #F2F2F0; border: 1px solid #34343C;
  border-radius: 6px; padding: .3rem .55rem; font-size: .74rem; cursor: pointer;
  font-family: inherit;
}
.wz button[aria-pressed="true"] { background: #F2F2F0; color: #17171A; border-color: #F2F2F0; }
.wz-zu { position: absolute; top: .4rem; right: .5rem; border: 0 !important; background: none !important; color: #9A9AA4 !important; padding: .2rem .35rem !important; }
.wz-auf {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  background: #17171A; color: #F2F2F0; border: 1px solid #34343C;
  border-radius: 999px; padding: .5rem .9rem; font-size: .76rem; cursor: pointer;
  font-family: inherit;
}
.wz-auf[hidden] { display: none; }

@media print { .wz, .wz-auf, .kopf { display: none !important; } }



.tueren-raster {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.tuerbox {
  position: relative;
  perspective: 1400px;
  border-radius: var(--r-gross);
  background: var(--kasten);
  border: 1px solid var(--linie);
  
  height: 360px;
}


.tuer-raum {
  padding: 1.5rem;
  height: 100%;
  overflow-y: auto;   
}
.tuer-raum h3 { margin-bottom: .5rem; }


.tuer-blatt {
  position: absolute; inset: 0;
  border-radius: var(--r-gross);
  background: var(--tint);
  border: 1px solid var(--linie);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.22,.8,.28,1), box-shadow .8s ease;
  backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5rem;
  text-align: left;
  cursor: pointer;
  font: inherit; color: inherit;
  width: 100%;
}
.tuerbox.offen .tuer-blatt {
  transform: rotateY(-108deg);
  box-shadow: 24px 0 40px -22px rgba(0,0,0,.35);
}


.tuer-griff {
  position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 34px; border-radius: 4px; background: var(--klangfeld-2);
}

.tuer-nummer {
  font-family: var(--mono); font-size: .8rem; color: var(--text-2);
  letter-spacing: .1em;
}
.tuer-blatt h3 { margin: .6rem 0 .3rem; }
.tuer-blatt .oeffnen {
  font-size: .86rem; font-weight: 600; color: var(--akzent);
  display: inline-flex; align-items: center; gap: .4rem;
}
.tuer-blatt .oeffnen::after { content: "→"; }

.tuer-zu {
  margin-top: 1.2rem; background: none; border: 1px solid var(--linie);
  border-radius: 999px; padding: .4rem .9rem; font: inherit; font-size: .84rem;
  color: var(--text-2); cursor: pointer;
}
.tuer-zu:hover { color: var(--text); border-color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .tuer-blatt { transition: opacity .2s linear; }
  .tuerbox.offen .tuer-blatt { transform: none; opacity: 0; pointer-events: none; }
}




.vergleich { display: grid; gap: .9rem; grid-template-columns: 1fr; margin-top: .9rem; }

.vergleich-seite {
  border: 1px solid var(--linie); border-radius: var(--r-klein);
  padding: .85rem .9rem; background: var(--grund);
  font-size: .84rem;
}
.vergleich-seite h4 {
  margin: 0 0 .55rem; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2);
}
.vergleich-seite.jetzt { border-color: var(--akzent); }
.vergleich-seite.jetzt h4 { color: var(--akzent); }

.beleg {
  font-family: var(--mono); font-size: .72rem; line-height: 1.55;
  color: var(--text-2); white-space: pre-wrap; margin: 0;
}
.feld {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .28rem 0; border-bottom: 1px dotted var(--linie);
}
.feld:last-child { border-bottom: 0; }
.feld span:first-child { color: var(--text-2); }
.feld span:last-child { font-family: var(--mono); font-weight: 600; }

.erfunden {
  display: block; margin-top: .8rem; font-size: .74rem; color: var(--text-2);
}



.mensch {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 0 2rem;
  align-items: start;
  padding: 2.2rem 0;
  border-top: 1px solid var(--linie);
}
.mensch:first-of-type { border-top: 0; padding-top: .6rem; }

@media (max-width: 640px) {
  .mensch { grid-template-columns: 1fr; gap: 1.2rem; }
}

.mensch-bild {
  width: 132px; height: 132px; border-radius: 50%;
  display: block; object-fit: cover;
  background: var(--tint);
  
  box-shadow: 0 0 0 1px var(--linie), 0 0 0 6px var(--grund);
}

.mensch-ebene {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--t-klein); letter-spacing: .1em; text-transform: uppercase;
  color: var(--akzent); font-weight: 700; margin-bottom: .5rem;
}
.mensch-ebene i { display: block; width: 22px; height: 2px; background: var(--klangfeld); border-radius: 2px; }

.mensch h3 { margin: 0 0 .15rem; font-size: 1.3rem; }
.mensch .rolle { color: var(--text-2); font-size: .95rem; margin: 0 0 1rem; }
.mensch p { max-width: 62ch; }

.stationen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.stationen span {
  font-size: .78rem; color: var(--text-2);
  border: 1px solid var(--linie); border-radius: 999px; padding: .25rem .7rem;
  background: var(--kasten);
}
.stationen .lab {
  border: 0; background: none; padding: .25rem 0 .25rem 0;
  letter-spacing: .08em; text-transform: uppercase; font-size: .72rem;
}


.freigabe {
  border: 1px dashed var(--akzent);
  border-radius: var(--r-gross);
  padding: 1.1rem 1.3rem;
  background: var(--kasten);
  font-size: .92rem;
  margin-bottom: 2.4rem;
}
.freigabe strong { color: var(--akzent-tief); }



.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease-out, transform .55s ease-out;
  
  transition-delay: calc(var(--i, 0) * .12s);
}
.js .reveal.sichtbar { opacity: 1; transform: none; }


.js .hero h1.zerlegt .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em) rotate(1.5deg);
  animation: wortauf .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(.12s + var(--i) * .07s);
}
@keyframes wortauf { to { opacity: 1; transform: none; } }


.js .hero h1.zerlegt .schluessel {
  opacity: 0;
  animation: einblenden .55s .45s ease-out forwards;
}
@keyframes einblenden { to { opacity: 1; } }


@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .js .hero h1.zerlegt .schluessel {
    animation: einblenden .55s .45s ease-out forwards,
               durchlauf 1.6s .55s ease-out forwards;
  }
}


@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero h1.zerlegt .w { opacity: 1; transform: none; animation: none; }
  
  .js .hero h1.zerlegt .schluessel { opacity: 1; animation: none; }
}


.cursor-schweif {
  position: fixed; top: 0; left: 0; width: 110px; height: 110px;
  z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--klangfeld) 16%, transparent) 0%,
    color-mix(in srgb, var(--akzent) 6%, transparent) 45%,
    transparent 68%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cursor-schweif { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cursor-schweif { display: none; } }


.schluessel { color: var(--akzent); font-weight: inherit; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .schluessel {
    
    background-image: linear-gradient(110deg,
      var(--akzent) 20%,
      var(--schluessel-mitte, var(--marke-ai, var(--akzent))) 45%,
      var(--akzent) 70%);
    
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: durchlauf 1.6s .45s ease-out forwards;
  }
}


@supports (background: linear-gradient(in oklch, red, blue)) {
  .schluessel {
    background-image: linear-gradient(110deg in oklch,
      var(--akzent) 20%,
      var(--schluessel-mitte, var(--marke-ai, var(--akzent))) 45%,
      var(--akzent) 70%);
  }
}
@keyframes durchlauf { to { background-position: 0 0; } }


.js .reveal .schluessel { animation-play-state: paused; }
.js .reveal.sichtbar .schluessel { animation-play-state: running; }


.hero-start .inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; }
.hero-start .hero-inhalt { max-width: none; }

.hero-start h1 { font-size: var(--t-riesig); text-wrap: balance; }
.hero-start .claim { font-size: 1.08rem; }

.hero-start .linienfeld { grid-column: 1 / -1; margin-top: 1.4rem; }
.hero-start .hero-fuss { max-width: 55ch; }
.arbeitsbild { min-width: 0; padding: 1.2rem 0; }
.arbeitsbild-kopf { display: flex; align-items: center; gap: .6rem; color: var(--text-2); font-size: .82rem; margin: 0 0 1.5rem 1rem; }
.arbeitsbild-kopf .punkt { margin-top: 0; }
.objekt-label { color: var(--text-2); font-size: .74rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.papier { background: var(--kasten); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.4rem; box-shadow: 0 14px 35px -22px color-mix(in srgb, var(--text) 40%, transparent); }
.arbeitsbild .papier { margin-right: 1.5rem; transform: rotate(-2deg); }
.papier-titel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; padding-bottom: .8rem; border-bottom: 2px solid var(--text); margin-bottom: 1rem; }
.papier-titel strong { font-size: 1.16rem; }
.papier-titel > span { color: var(--text-2); font-family: var(--mono); font-size: .85rem; }
.papier > p:not(.objekt-label) { font-size: .84rem; color: var(--text-2); }
.papier-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .65rem; padding: .65rem 0; border-bottom: 1px solid var(--linie); font-size: .79rem; }
.papier-zeile strong { white-space: nowrap; font-weight: 600; }
.papier-notiz { padding: .65rem .8rem; margin-top: .9rem; background: var(--tint); border-radius: var(--r-klein); font-size: .8rem; }

.ergebnis-karte { position: relative; margin: .6rem 0 0 2.2rem; padding: 1.4rem; background: var(--kasten); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: 0 22px 44px -25px color-mix(in srgb, var(--text) 45%, transparent); }
.ergebnis-karte h2 { font-size: 1.22rem; line-height: 1.3; }
.ergebnis-karte dl { margin: 1rem 0; }
.ergebnis-karte dl > div, .demo-felder > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .2rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); font-size: .8rem; }
.ergebnis-karte dt, .demo-felder dt { color: var(--text-2); }
.ergebnis-karte dd, .demo-felder dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pruefhinweis { color: var(--akzent); font-size: .78rem; font-weight: 600; }
.pruefhinweis span { margin-right: .4rem; }
.bild-legende { color: var(--text-2); font-size: .8rem; margin: 1.1rem 0 0; line-height: 1.65; }
.arbeitsbild > .bild-legende { margin-left: 2.2rem; }

.systemband > a:hover, .systemband > a:focus-visible { border-color: var(--akzent); color: var(--akzent); }
.systemband { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.6rem 0 1rem; }

.systemband > a { text-decoration: none; transition: border-color .18s, color .18s; padding: .55rem .85rem; border: 1px solid var(--linie); border-radius: var(--r-klein); color: var(--text); background: var(--kasten); font-size: .88rem; font-weight: 550; }
.anbieterfreiheit { margin-top: 2rem; }
.wissensbild { max-width: 680px; margin: 1.8rem 0; padding: 1.5rem; background: var(--kasten); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: 0 14px 32px -25px color-mix(in srgb, var(--text) 35%, transparent); }
.wissensfrage { font-weight: 650; font-size: 1.15rem; }
.wissensbild summary { cursor: pointer; color: var(--akzent); padding: .6rem 0; font-size: .9rem; font-weight: 600; }
.wissensbild blockquote { margin: .6rem 0; border-left: 2px solid var(--linie); padding: .5rem 1rem; color: var(--text-2); }
.wissensbild-klein { margin: 1rem 0; padding: 1rem; box-shadow: none; }
.wissensbild-klein .wissensfrage { font-size: 1rem; }
.beleg-demo { background: var(--kasten); border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; box-shadow: 0 24px 48px -35px color-mix(in srgb, var(--text) 40%, transparent); }
.demo-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--linie); }
.demo-leiste .objekt-label { margin: 0; }
.demo-auswahl { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; }
.demo-auswahl label { color: var(--text-2); font-size: .84rem; }
.demo-auswahl select { font: inherit; font-size: .88rem; padding: .65rem .75rem; max-width: 100%; border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--grund); color: var(--text); }
.demo-arbeitsflaeche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-eingang, .demo-ausgang { padding: 1.8rem; min-width: 0; }
.demo-eingang { background: var(--grund); border-right: 1px solid var(--linie); }
.demo-papier { max-width: 420px; margin: .8rem auto; }
.demo-ausgang { display: flex; flex-direction: column; }
.demo-leer { margin: auto 0; padding: 1rem 0; max-width: 32ch; }
.demo-leer p { color: var(--text-2); font-size: .92rem; }
.demo-symbol { color: var(--akzent); font-size: 2.4rem; line-height: 1.2; display: block; margin-bottom: 1rem; }
.demo-felder { margin: 0 0 1rem; }
.demo-felder > div { font-size: .9rem; padding: .65rem 0; }
.demo-entscheidung { padding: 1rem; border: 1px solid var(--linie); background: var(--tint); border-radius: var(--r-klein); }
.demo-entscheidung strong { font-size: .9rem; }
.demo-entscheidung p { margin: .3rem 0 0; font-size: .83rem; color: var(--text-2); }
.beleg-demo[data-zustand="rueckfrage"] .demo-entscheidung { border-left-style: dashed; }
.beleg-demo[data-zustand="rueckfrage"] [data-ergebnis-ort] { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.demo-abschluss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.3rem 1.6rem; border-top: 1px solid var(--linie); }
.demo-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.demo-aktionen .knopf { font: inherit; font-weight: 600; cursor: pointer; }
.demo-reset { font: inherit; font-size: .88rem; border: 0; border-radius: var(--r-klein); color: var(--text-2); background: transparent; padding: .65rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.demo-reset:hover { color: var(--text); background: var(--tint); }
.demo-status { flex: 1 1 230px; font-size: .83rem; color: var(--text-2); margin: 0; }
.demo-ohne-js { padding: 1.6rem; }
.beleg-demo [hidden] { display: none; }
.tueren-raster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.tuer-raum { overscroll-behavior: contain; }
.tuer-raum:focus-visible { outline-offset: -4px; }
.wege-tabelle th { text-align: left; }

@media (max-width: 1000px) {
  .hero-start .inner { grid-template-columns: 1fr; }
  .hero-start .hero-inhalt { max-width: 780px; }
  .hero-start .arbeitsbild { max-width: 580px; width: 100%; margin-inline: auto; }
}
@media (max-width: 620px) {
  .hero-start .inner { gap: 1.5rem; }
  .arbeitsbild .papier { margin-right: .7rem; transform: rotate(-1deg); }
  .ergebnis-karte { margin-left: 1rem; }
  .arbeitsbild > .bild-legende { margin-left: 1rem; }
    .demo-eingang, .demo-ausgang { padding: 1.25rem; }
  .demo-eingang { border-right: 0; border-bottom: 1px solid var(--linie); }
  .demo-ausgang { min-height: 310px; }
  .demo-leiste, .demo-abschluss { padding: 1.1rem; }
  .demo-auswahl, .demo-auswahl select { width: 100%; }
  .demo-leer { max-width: none; }
  .wege-tabelle { min-width: 0; }
  .wege-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wege-tabelle tbody, .wege-tabelle tr, .wege-tabelle td { display: block; }
  .wege-tabelle tr { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--kasten); }
  .wege-tabelle td { padding: .55rem 0; border: 0; overflow-wrap: anywhere; }
  .wege-tabelle td::before { content: attr(data-label); display: block; color: var(--text-2); font-size: .75rem; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .schluessel { animation: none; background-position: 0 0; }
}