/* startseite.css – Startseite von webseitenkurs.at, zusammengeführt am 15.10.2026 (Vers.66)
   aus 25 Einzeldateien in unveränderter Reihenfolge. Jeder Abschnitt nennt seine Herkunft.
   Spätere Abschnitte überschreiben frühere, deshalb die Reihenfolge nie umstellen.
   Entfernt: alle Regeln für den Knopf „Animationen pausieren“ (.bewegungsschalter). */

/* ===== aus gestaltung.css ===== */
@font-face {
  font-family:Werk;
  src:url('assets/work-sans.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
:root {
  --tinte:#172e28;
  --gruen:#285c4c;
  --salbei:#e7eee8;
  --papier:#faf9f5;
  --orange:#c45d31;
  --orange-dunkel:#a34520;
  --grau:#5c6761;
  --linie:#dfe3db;
  --serif:Georgia,'Times New Roman',serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  color:var(--tinte);
  font-family:Werk,Arial,sans-serif;
  background:var(--papier);
  font-size:16px;
  line-height:1.65
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
button {
  color:inherit
}
p {
  margin:0 0 22px;
  color:var(--grau)
}
h1,h2,h3 {
  font-weight:500;
  letter-spacing:-.052em;
  line-height:1.1;
  margin:0
}
h1 {
  font-size:clamp(54px,6.6vw,91px)
}
h2 {
  font-size:clamp(39px,4.25vw,60px)
}
h3 {
  font-size:27px;
  letter-spacing:-.035em
}
em {
  font-family:var(--serif);
  font-weight:400;
  color:var(--gruen);
  letter-spacing:-.055em
}
strong {
  font-weight:600
}
[hidden] {
  display:none!important
}
.rahmen {
  max-width:1192px;
  width:calc(100% - 96px);
  margin-inline:auto
}
.abschnitt {
  padding-block:112px
}
.abschnittkopf {
  max-width:800px;
  margin:0 auto 46px;
  text-align:center
}
.abschnittkopf p:last-child {
  max-width:650px;
  margin:25px auto 0;
  font-size:18px
}
.etikett {
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  margin-bottom:23px;
  color:var(--gruen)
}
.kleindruck {
  font-size:12px;
  color:var(--grau);
  margin:16px 0 0
}
.zweispaltig {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:86px;
  align-items:center
}
.zweispaltig h2 {
  margin-bottom:28px
}
.zweispaltig>div>p:not([class]) {
  font-size:17px
}
.knopf {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:19px 27px;
  color:#fff;
  background:var(--orange);
  border:1px solid transparent;
  border-radius:7px;
  text-decoration:none;
  line-height:1.3;
  font-weight:500;
  font-size:16px;
  box-shadow:0 6px 16px #99451d15;
  transition:background .2s,transform .2s,box-shadow .2s
}
.knopf:hover {
  background:var(--orange-dunkel);
  transform:translateY(-3px);
  box-shadow:0 10px 24px #99451d25
}
.knopf span {
  font-size:22px
}
.knopf.klein {
  font-size:13px;
  padding:13px 18px;
  gap:18px
}
.textlink {
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid #82998a;
  padding-bottom:5px
}
.textlink span {
  margin-left:12px
}
.sprunglink {
  position:fixed;
  z-index:100;
  top:-100px;
  left:16px;
  background:#fff;
  padding:12px
}
.sprunglink:focus {
  top:10px
}
.hinweisleiste {
  background:var(--tinte);
  color:#ecf0e9;
  text-align:center;
  padding:11px 20px;
  font-size:11px;
  letter-spacing:.025em
}
.hinweisleiste strong {
  font-weight:500
}
.hinweisleiste a {
  margin-left:28px;
  text-underline-offset:4px
}
.kopf {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 4.2%;
  background:#faf9f5f2;
  backdrop-filter:blur(16px);
  border-bottom:1px solid #dde2d990
}
.marke {
  display:block;
  width:200px;
  flex-shrink:0
}
.kopf nav {
  display:flex;
  gap:28px;
  align-items:center
}
.kopf nav>a:not(.knopf) {
  font-size:12px;
  text-decoration:none
}
.kopf nav>a:not(.knopf):hover {
  color:var(--orange)
}
.menuschalter {
  display:none
}
.einstieg {
  overflow:hidden;
  padding:70px 0 0;
  background:radial-gradient(ellipse at 50% 63%,#e9eee4 0,transparent 56%)
}
.einstiegtext {
  max-width:880px;
  margin:auto;
  text-align:center;
  padding:0 24px;
  position:relative;
  z-index:2
}
.einstieg .etikett {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:27px
}
.punkt {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gruen);
  box-shadow:0 0 0 5px #285c4c0d
}
.vorspann {
  font-size:20px;
  margin:27px 0 12px;
  color:var(--tinte)
}
.einstiegdetails {
  font-size:16px;
  max-width:670px;
  margin:0 auto 29px
}
.vertrauen {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  text-align:left;
  margin:28px auto 0;
  font-size:11px;
  color:var(--grau)
}
.vertrauen img {
  width:43px;
  height:43px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%
}
.vertrauen strong {
  color:var(--tinte);
  font-size:11px
}
.schaufenster {
  height:410px;
  max-width:1370px;
  margin:64px auto 0;
  position:relative;
  perspective:1300px
}
.fenster {
  position:absolute;
  background:white;
  border:1px solid #d3d8cf;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 18px 55px #1a332324;
  display:block;
  text-decoration:none
}
.fensterkopf {
  height:28px;
  background:#f5f5f2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 13px;
  font-size:8px;
  color:#657269;
  border-bottom:1px solid #ddd
}
.fensterpunkte {
  color:#b6bdb8;
  letter-spacing:2px;
  font-size:8px
}
.fenster.mitte {
  width:53%;
  top:0;
  left:23.5%;
  z-index:3;
  transform:rotate(-1deg);
  transition:transform .5s
}
.fenster.mitte:hover {
  transform:translateY(-8px) rotate(0deg)
}
.fenster.seitlich {
  width:42%;
  top:65px;
  filter:saturate(.85);
  opacity:.92
}
.fenster.links {
  left:-4%;
  transform:rotate(-8deg);
  animation:schweben-links 9s ease-in-out infinite
}
.fenster.rechts {
  right:-4%;
  transform:rotate(8deg);
  animation:schweben-rechts 10s ease-in-out infinite
}
.schwebeschild {
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  z-index:4;
  background:var(--tinte);
  color:#fff;
  padding:17px 27px;
  border-radius:5px;
  box-shadow:0 12px 25px #142b2520;
  font-size:14px;
  text-align:center;
  min-width:240px
}
.schwebeschild span {
  display:block;
  font-size:11px;
  color:#cbd9cf
}
.eckdaten {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:38px 0;
  margin-top:36px;
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  text-align:center
}
.eckdaten>div+div {
  border-left:1px solid var(--linie)
}
.eckdaten strong {
  display:block;
  font:italic 43px var(--serif);
  color:var(--gruen);
  margin-bottom:9px
}
.eckdaten span {
  font-size:12px;
  color:var(--grau)
}
.projektwahl {
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 0 30px
}
.projektwahl button {
  border:1px solid var(--linie);
  padding:10px 21px;
  border-radius:30px;
  background:transparent;
  font-size:13px;
  transition:background .2s,color .2s
}
.projektwahl button:hover {
  background:var(--salbei)
}
.projektwahl button[aria-pressed=true] {
  background:var(--tinte);
  border-color:var(--tinte);
  color:#fff
}
.projektbuehne {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  border:1px solid var(--linie);
  border-radius:13px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 15px 38px #183c2b08
}
.projektbild {
  position:relative;
  padding:0;
  border:0;
  overflow:hidden;
  background:var(--salbei);
  display:block
}
.projektbild img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  transition:transform .6s
}
.projektbild:hover img {
  transform:scale(1.025)
}
.bildaktion {
  position:absolute;
  bottom:17px;
  left:18px;
  padding:8px 13px;
  border-radius:4px;
  background:#fffef8ee;
  color:var(--tinte);
  font-size:11px
}
.bildaktion span {
  margin-left:12px
}
.projekttext {
  padding:40px 35px;
  position:relative;
  min-height:310px
}
.projekttext h3 {
  margin:15px 0 18px
}
.projekttext p {
  font-size:14px
}
.projekttext a {
  font-size:12px;
  text-underline-offset:5px;
  font-weight:600
}
.projektstand {
  display:block;
  font:italic 18px var(--serif);
  color:#89978d;
  margin-top:25px
}
.referenzhinweis {
  text-align:center;
  font-size:11px;
  max-width:720px;
  margin:22px auto 0;
  line-height:1.8
}
.ausgangslage {
  background:#efeee7
}
.situationen article {
  display:flex;
  gap:23px;
  padding:24px 0;
  border-bottom:1px solid #d7dbd1
}
.situationen article:first-child {
  padding-top:0
}
.situationen article>span {
  font:italic 27px var(--serif);
  color:#7d8e7d
}
.situationen h3 {
  font-size:22px;
  margin-bottom:11px
}
.situationen p {
  font-size:14px;
  margin:0
}
.ergebnisse {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.ergebnis {
  background:#fff;
  border:1px solid var(--linie);
  border-radius:9px;
  padding:32px;
  transition:transform .3s,box-shadow .3s
}
.ergebnis:hover {
  transform:translateY(-7px);
  box-shadow:0 18px 38px #142b2510
}
.nummer {
  font:italic 44px var(--serif);
  color:#809687;
  display:block;
  margin-bottom:32px
}
.ergebnis h3 {
  margin-bottom:19px;
  font-size:29px
}
.ergebnis p {
  font-size:14px;
  min-height:116px
}
.ergebnistag {
  display:block;
  border-top:1px solid var(--linie);
  padding-top:18px;
  font-size:11px;
  font-weight:500;
  color:var(--gruen)
}
.leitsatz {
  text-align:center;
  margin-top:65px;
  font-size:17px;
  line-height:1.9
}
.leitsatz span {
  color:var(--grau);
  display:block
}
.leitsatz strong {
  display:block;
  font-size:23px;
  letter-spacing:-.035em
}
.ablauf {
  background:var(--tinte);
  color:#fff
}
.ablauf .etikett {
  color:#a6c2aa
}
.ablauf em {
  color:#b5cdb7
}
.ablauf p {
  color:#c1d0c8
}
.tagewahl {
  display:flex;
  border-bottom:1px solid #ffffff25;
  margin-top:44px
}
.tagewahl button {
  width:50%;
  color:#a4b8ac;
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  text-align:left;
  padding:20px 24px;
  font-size:24px
}
.tagewahl button span {
  display:block;
  font-size:12px;
  margin-top:8px
}
.tagewahl button[aria-selected=true] {
  border-bottom-color:#d38b5e;
  color:#fff;
  background:#ffffff06
}
.tageinhalt {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  padding:40px 24px
}
.grosszahl {
  font:italic 65px var(--serif);
  color:#94b39b;
  display:block;
  margin-bottom:15px
}
.tageinhalt h3 {
  font-size:31px;
  margin-bottom:24px
}
.tageinhalt p {
  font-size:14px
}
.schritte {
  list-style:none;
  counter-reset:schritt;
  padding:0;
  margin:5px 0 0
}
.schritte li {
  counter-increment:schritt;
  position:relative;
  padding:13px 0 13px 40px
}
.schritte li:before {
  content:'0' counter(schritt);
  position:absolute;
  left:0;
  color:#a4b8ac;
  font-size:11px;
  top:18px
}
.schritte strong {
  font-size:15px
}
.schritte p {
  font-size:13px;
  margin:8px 0 0
}
.ablaufabschluss {
  padding:25px 24px 0;
  border-top:1px solid #ffffff25;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center
}
.ablaufabschluss p {
  font-size:12px;
  margin:0;
  max-width:480px
}
.ablaufabschluss a {
  font-size:12px
}
.workshopbild {
  position:relative
}
.workshopbild img {
  border-radius:7px;
  aspect-ratio:1.08;
  object-fit:cover
}
.bildnotiz {
  position:absolute;
  bottom:25px;
  left:-20px;
  background:#fff;
  padding:20px 28px;
  border-radius:5px;
  box-shadow:0 10px 30px #1a302015;
  transform:rotate(-4deg)
}
.bildnotiz strong {
  display:block;
  font:italic 27px var(--serif)
}
.bildnotiz span {
  font-size:11px
}
.mitnahme {
  border-top:1px solid var(--linie);
  padding-top:25px;
  font-size:13px;
  line-height:2.1
}
.begleitung {
  background:#e7ece4
}
.begleitung .zweispaltig {
  gap:100px
}
.begleitertext blockquote {
  margin:35px 0;
  font:italic 28px/1.4 var(--serif);
  color:var(--gruen)
}
.portrait {
  margin:0;
  position:relative;
  max-width:430px;
  justify-self:end
}
.portrait img {
  border-radius:130px 130px 6px 6px
}
.portrait figcaption {
  position:absolute;
  left:22px;
  bottom:22px;
  right:22px;
  background:#faf9f5eb;
  padding:18px 20px;
  border-radius:5px
}
.portrait strong,.portrait span {
  display:block
}
.portrait span {
  font-size:11px;
  margin-top:3px
}
.dreiblicke {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:50px;
  gap:40px
}
.dreiblicke article {
  border-top:1px solid #93a791;
  padding-top:22px
}
.dreiblicke span {
  font-size:10px;
  letter-spacing:.1em;
  color:var(--gruen)
}
.dreiblicke h3 {
  font-size:23px;
  margin:20px 0 15px
}
.dreiblicke p {
  font-size:14px
}
.angebot {
  background:#f0eee6
}
.leistungsliste {
  padding:0;
  list-style:none;
  margin:30px 0 0
}
.leistungsliste li {
  padding:13px 0 13px 26px;
  position:relative;
  border-bottom:1px solid #d9dbd2;
  font-size:14px
}
.leistungsliste li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--gruen)
}
.preiskarte {
  padding:46px 40px;
  background:#fff;
  border:1px solid #cdd6c8;
  border-radius:10px;
  box-shadow:0 18px 50px #193f3509
}
.preiskarte .preis {
  font-size:79px;
  letter-spacing:-.07em;
  line-height:1;
  margin:28px 0 10px;
  color:var(--tinte)
}
.preis span {
  font-size:44px
}
.preiszusatz {
  font-size:12px!important
}
.preistrenner {
  height:1px;
  background:var(--linie);
  margin:28px 0
}
.preiskarte h3 {
  font-size:23px;
  margin:0 0 15px
}
.preiskarte p {
  font-size:14px
}
.preiskarte .knopf {
  width:100%;
  margin-top:4px
}
.preiskarte .kleindruck {
  font-size:10px;
  text-align:center
}
.preiskarte .zusatzkosten {
  font-size:11px;
  line-height:1.7;
  margin:25px 0 0;
  color:#657269
}
.fragenbereich {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:85px
}
.fragenbereich h2 {
  margin-bottom:26px
}
.fragenbereich p {
  font-size:15px
}
.fragen details {
  border-bottom:1px solid var(--linie);
  padding:0
}
.fragen details:first-child {
  border-top:1px solid var(--linie)
}
summary {
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:24px 34px 24px 0;
  font-size:15px;
  font-weight:500;
  line-height:1.4
}
summary::-webkit-details-marker {
  display:none
}
summary:after {
  content:'+';
  position:absolute;
  right:2px;
  top:21px;
  font:25px Werk;
  color:var(--gruen)
}
details[open] summary:after {
  content:'−'
}
.fragen details p {
  font-size:14px;
  padding:0 30px 5px 0
}
.abschluss {
  text-align:center;
  background:var(--tinte);
  color:#fff;
  position:relative;
  overflow:hidden
}
.abschluss .etikett {
  color:#b6c9b7
}
.abschluss h2 {
  font-size:clamp(47px,5.5vw,78px)
}
.abschluss em {
  color:#b7ccb7
}
.abschluss p:not(.etikett):not(.kleindruck) {
  color:#d0dbd3;
  max-width:530px;
  margin:30px auto
}
.abschluss .kleindruck {
  color:#c8d5cc
}
.email {
  display:block;
  margin-top:28px;
  font-size:12px;
  text-underline-offset:5px;
  color:#cbd9cf
}
.checkhinweis {
  padding-block:38px;
  display:flex;
  gap:30px;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--linie)
}
.checkhinweis p {
  margin:0;
  font-size:12px
}
.checkhinweis a {
  font-size:12px;
  flex-shrink:0
}
.fuss {
  padding:50px 0 36px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px
}
.fuss .marke {
  width:190px
}
.fuss p {
  font-size:11px;
  margin:0;
  text-align:right
}
.fuss nav {
  display:flex;
  gap:20px;
  font-size:11px
}
.fuss small {
  font-size:10px;
  color:var(--grau);
  text-align:right
}
.kontaktleiste {
  position:fixed;
  z-index:25;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(840px,calc(100% - 36px));
  background:#fffffff5;
  border:1px solid #dfe3db;
  border-radius:9px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  box-shadow:0 8px 36px #10281d25;
  backdrop-filter:blur(15px);
  animation:leiste-rein .35s ease both
}
.kontaktleiste strong {
  font-size:13px;
  display:block
}
.kontaktleiste span:not(.knopf span) {
  font-size:10px;
  color:var(--grau);
  display:block
}
.kontaktleiste .knopf {
  flex-shrink:0
}
.kontaktleiste .knopf span {
  color:#fff
}
.kontaktleiste-sichtbar .fuss {
  padding-bottom:130px
}
dialog {
  width:min(1050px,94vw);
  max-height:90dvh;
  border:0;
  border-radius:10px;
  padding:24px;
  background:var(--papier);
  color:var(--tinte);
  box-shadow:0 20px 80px #0005
}
dialog::backdrop {
  background:#10261cd9;
  backdrop-filter:blur(7px)
}
.dialogkopf {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:20px
}
.dialogkopf h2 {
  font-size:24px
}
.dialogkopf button {
  border:1px solid var(--linie);
  border-radius:5px;
  background:#fff;
  padding:8px 12px;
  font-size:12px
}
.dialogkopf button span {
  margin-left:10px
}
dialog>img {
  width:100%;
  border-radius:5px
}
dialog>p {
  margin:17px 0;
  font-size:12px
}
body.dialog-offen {
  overflow:hidden
}
@keyframes schweben-links {
  50% {
    transform:translateY(-12px) rotate(-6deg)
  }
}
@keyframes schweben-rechts {
  50% {
    transform:translateY(9px) rotate(6deg)
  }
}
@keyframes leiste-rein {
  from {
    opacity:0;
    bottom:0
  }
  to {
    opacity:1;
    bottom:18px
  }
}
@keyframes auftauchen {
  from {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.erscheint.sichtbar {
  animation:auftauchen .7s ease both
}
.einstiegtext {
  animation:auftauchen .8s ease both
}
.projekt-wechsel {
  animation:auftauchen .4s ease both
}
@media(min-width:761px) {
  .einstieg {
    padding-top:43px
  }
  .einstieg h1 {
    font-size:clamp(58px,5.8vw,80px);
    line-height:1.06
  }
  .einstieg .etikett {
    margin-bottom:20px
  }
  .einstieg .vorspann {
    margin-top:23px;
    font-size:18px
  }
  .einstiegdetails {
    max-width:760px;
    font-size:15px;
    margin-bottom:24px
  }
  .einstieg .vertrauen {
    margin-top:22px
  }
  .kopf {
    padding-block:16px
  }
}
@media(min-width:1500px) {
  .schaufenster {
    height:450px
  }
}
@media(max-width:1000px) {
  .kopf {
    padding:18px 24px
  }
  .kopf nav {
    gap:15px
  }
  .marke {
    width:170px
  }
  .kopf nav>a:not(.knopf) {
    font-size:11px
  }
  .rahmen {
    width:calc(100% - 56px)
  }
  .zweispaltig,.begleitung .zweispaltig {
    gap:45px
  }
  .schaufenster {
    height:320px
  }
  .ergebnis {
    padding:25px
  }
  .ergebnis h3 {
    font-size:25px
  }
  .ergebnis p {
    min-height:150px
  }
  .projekttext {
    padding:28px 24px
  }
  .projekttext h3 {
    font-size:24px
  }
  .fragenbereich {
    gap:45px
  }
  .abschnitt {
    padding-block:85px
  }
  .hinweisleiste {
    font-size:10px
  }
  .tageinhalt {
    gap:40px
  }
  .preiskarte {
    padding:32px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:85px
  }
  .rahmen {
    width:calc(100% - 40px)
  }
  .hinweisleiste {
    font-size:9px;
    padding:10px 12px
  }
  .hinweisleiste a {
    display:none
  }
  .kopf {
    padding:16px 20px
  }
  .marke {
    width:165px
  }
  .menuschalter {
    display:block;
    border:1px solid var(--linie);
    border-radius:5px;
    background:transparent;
    padding:7px 12px;
    font-size:12px
  }
  .kopf nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:24px;
    background:var(--papier);
    border-bottom:1px solid var(--linie);
    box-shadow:0 15px 20px #142b2510
  }
  .kopf nav.offen {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .kopf nav>a:not(.knopf) {
    padding:12px 0;
    font-size:15px
  }
  .kopf nav .knopf {
    margin-top:14px
  }
  .einstieg {
    padding-top:45px
  }
  .einstiegtext {
    padding-inline:20px
  }
  .einstieg .etikett {
    font-size:8px;
    letter-spacing:.09em;
    gap:8px;
    margin-bottom:23px
  }
  h1 {
    font-size:clamp(40px,8.9vw,67px);
    line-height:1.08;
    letter-spacing:-.055em
  }
  h2 {
    font-size:clamp(34px,7.5vw,48px)
  }
  .vorspann {
    font-size:17px;
    margin-top:23px
  }
  .einstiegdetails {
    font-size:14px;
    margin-bottom:24px
  }
  .hauptaktion {
    font-size:13px;
    padding:17px 18px;
    gap:14px;
    max-width:100%
  }
  .kleindruck {
    font-size:10px
  }
  .vertrauen {
    font-size:9px;
    margin-top:24px;
    max-width:350px;
    line-height:1.6;
    gap:9px
  }
  .vertrauen strong {
    font-size:9px
  }
  .vertrauen img {
    width:37px;
    height:37px;
    flex-shrink:0
  }
  .schaufenster {
    height:255px;
    margin-top:44px;
    width:100%
  }
  .fenster.mitte {
    width:77%;
    left:11.5%;
    top:14px
  }
  .fenster.seitlich {
    width:57%;
    top:44px
  }
  .fenster.links {
    left:-28%
  }
  .fenster.rechts {
    right:-28%
  }
  .fensterkopf {
    font-size:5px;
    height:18px;
    padding:0 7px
  }
  .fensterpunkte {
    font-size:5px;
    letter-spacing:0
  }
  .schwebeschild {
    bottom:4px;
    padding:12px 20px;
    font-size:12px;
    min-width:210px
  }
  .schwebeschild span {
    font-size:9px
  }
  .eckdaten {
    grid-template-columns:1fr 1fr;
    gap:25px 0;
    padding:25px 0;
    margin-top:25px
  }
  .eckdaten>div:nth-child(3) {
    border-left:0
  }
  .eckdaten strong {
    font-size:35px;
    margin-bottom:5px
  }
  .eckdaten span {
    font-size:10px
  }
  .abschnitt {
    padding-block:65px
  }
  .abschnittkopf {
    margin-bottom:30px
  }
  .abschnittkopf p:last-child {
    font-size:15px;
    margin-top:21px
  }
  .etikett {
    font-size:9px;
    margin-bottom:18px
  }
  .projektwahl {
    gap:6px;
    margin-bottom:23px
  }
  .projektwahl button {
    font-size:11px;
    padding:8px 12px
  }
  .projektbuehne {
    grid-template-columns:1fr
  }
  .projektbild img {
    aspect-ratio:1.77;
    height:auto
  }
  .projekttext {
    padding:28px
  }
  .projekttext h3 {
    font-size:25px;
    margin-top:10px
  }
  .projekttext p {
    font-size:14px
  }
  .projekttext {
    min-height:0
  }
  .projektstand {
    position:absolute;
    bottom:25px;
    right:28px;
    font-size:16px
  }
  .referenzhinweis {
    font-size:10px
  }
  .zweispaltig,.begleitung .zweispaltig {
    grid-template-columns:1fr;
    gap:35px
  }
  .zweispaltig>div>p:not([class]) {
    font-size:15px
  }
  .situationen h3 {
    font-size:21px
  }
  .situationen p {
    font-size:13px
  }
  .ergebnisse {
    grid-template-columns:1fr;
    gap:15px
  }
  .ergebnis {
    padding:27px
  }
  .nummer {
    margin-bottom:20px;
    font-size:35px
  }
  .ergebnis h3 {
    font-size:28px
  }
  .ergebnis p {
    min-height:0;
    font-size:14px
  }
  .leitsatz {
    margin-top:38px;
    font-size:15px
  }
  .leitsatz strong {
    font-size:18px
  }
  .tagewahl {
    margin-top:25px
  }
  .tagewahl button {
    font-size:22px;
    padding:17px 12px
  }
  .tagewahl button span {
    font-size:10px
  }
  .tageinhalt {
    grid-template-columns:1fr;
    gap:10px;
    padding:26px 10px
  }
  .grosszahl {
    font-size:52px
  }
  .tageinhalt h3 {
    font-size:29px
  }
  .ablaufabschluss {
    flex-direction:column;
    align-items:flex-start;
    padding:22px 10px 0;
    gap:20px
  }
  .workshopbild img {
    aspect-ratio:1.25
  }
  .bildnotiz {
    left:-5px;
    padding:15px 20px
  }
  .portrait {
    max-width:430px;
    width:100%;
    justify-self:center
  }
  .begleitertext blockquote {
    font-size:25px
  }
  .dreiblicke {
    grid-template-columns:1fr;
    gap:22px;
    margin-top:35px
  }
  .dreiblicke h3 {
    margin:15px 0;
    font-size:24px
  }
  .dreiblicke p {
    margin-bottom:0
  }
  .preiskarte {
    padding:30px 25px
  }
  .preiskarte .preis {
    font-size:72px
  }
  .fragenbereich {
    grid-template-columns:1fr;
    gap:32px
  }
  summary {
    font-size:14px;
    padding-block:22px
  }
  .fragen details p {
    font-size:13px
  }
  .abschluss h2 {
    font-size:clamp(42px,9vw,63px)
  }
  .abschluss p:not(.etikett):not(.kleindruck) {
    font-size:15px;
    margin:25px auto
  }
  .abschluss .kleindruck {
    font-size:9px
  }
  .email {
    font-size:11px
  }
  .checkhinweis {
    flex-direction:column;
    align-items:flex-start;
    padding-block:30px;
    gap:17px
  }
  .fuss {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:35px
  }
  .fuss p,.fuss small {
    text-align:left
  }
  .fuss nav {
    flex-wrap:wrap;
    gap:12px 20px;
    font-size:10px
  }
  .kontaktleiste {
    padding:10px;
    width:calc(100% - 20px);
    bottom:10px;
    gap:10px
  }
  .kontaktleiste strong {
    font-size:10px;
    line-height:1.4
  }
  .kontaktleiste span:not(.knopf span) {
    display:none
  }
  .kontaktleiste .knopf.klein {
    font-size:11px;
    padding:12px;
    gap:10px
  }
  .kontaktleiste .knopf span {
    font-size:17px
  }
  .dialogkopf {
    align-items:flex-start
  }
  .dialogkopf h2 {
    font-size:21px
  }
  .dialogkopf button {
    font-size:10px;
    flex-shrink:0
  }
  dialog {
    padding:18px
  }
  dialog>p {
    font-size:11px
  }
  @keyframes leiste-rein {
    from {
      opacity:0;
      bottom:0
    }
    to {
      opacity:1;
      bottom:10px
    }
  }
}
@media(max-width:380px) {
  .schaufenster {
    height:218px
  }
  .hauptaktion {
    font-size:12px;
    padding:15px;
    gap:10px
  }
  .einstieg .etikett {
    font-size:7px
  }
  .vertrauen span {
    max-width:255px
  }
  .projekttext {
    padding:23px
  }
  .hinweisleiste {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}

/* ===== aus bewegung.css ===== */
/* Version 02: Bewegungsabläufe und animierte Demonstrationen. */
:root { --bewegung-kurve: cubic-bezier(.16,1,.3,1); }
.einstieg { position:relative; isolation:isolate; }
.einstiegtext { animation:none; }
.hintergrundband { position:absolute; z-index:-1; top:12px; inset-inline:0; height:390px; overflow:hidden; pointer-events:none; opacity:.15; mask-image:linear-gradient(#000,transparent 94%); }
.hintergrundspur { display:flex; width:max-content; animation:hintergrund-laufen 78s linear infinite; }
.hintergrundgruppe { display:flex; gap:22px; padding-right:22px; }
.hintergrundgruppe img { width:310px; height:205px; object-fit:cover; object-position:top; border-radius:12px; box-shadow:0 10px 35px #173c3520; }
.hintergrundgruppe img:nth-child(even) { margin-top:35px; }
.schaufenster { --auffaechern:0; }
.fenster { will-change:transform; }
.fenster.mitte { transform:translateY(calc(var(--auffaechern) * -30px)) rotate(calc(-1deg + var(--auffaechern) * 1deg)); }
.fenster.links { animation:hero-links 8s ease-in-out infinite; translate:calc(var(--auffaechern) * -55px) calc(var(--auffaechern) * 25px); }
.fenster.rechts { animation:hero-rechts 9s ease-in-out infinite; translate:calc(var(--auffaechern) * 55px) calc(var(--auffaechern) * 25px); }
.schwebeschild { animation:schild-schweben 5s ease-in-out infinite; }
.bewegung-bereit .erscheint { opacity:0; transform:translateY(95px); transition:opacity 1s var(--bewegung-kurve),transform 1s var(--bewegung-kurve); transition-delay:var(--staffel,0ms); }
.bewegung-bereit .erscheint.sichtbar { opacity:1; transform:translateY(0); animation:none; }
.zeilenmaske { display:block; overflow:clip; padding-bottom:.2em; margin-bottom:-.2em; }
.bewegte-zeile { display:block; }
.bewegung-bereit .zeilenstart .bewegte-zeile { opacity:0; transform:translateY(112%); transition:transform .95s var(--bewegung-kurve),opacity .75s ease; transition-delay:calc(var(--zeile) * 150ms); }
.bewegung-bereit .zeilenstart.zeilen-sichtbar .bewegte-zeile { transform:translateY(0); opacity:1; }
.knopf { position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(115deg,#b45029,#d78245 55%,#bb552c); box-shadow:0 7px 23px #b8603027,inset 0 0 0 1px #ffffff29; transition:transform .45s var(--bewegung-kurve),box-shadow .4s; }
.knopf::before { content:''; position:absolute; z-index:-1; pointer-events:none; inset:-90%; background:radial-gradient(ellipse at center,#ffd0a588,transparent 58%); animation:licht-wandert 9s linear infinite; }
.knopf::after { content:''; position:absolute; pointer-events:none; inset:-40% auto -40% -65%; width:45%; background:linear-gradient(100deg,transparent,#fff6,transparent); transform:skewX(-20deg); animation:lichtreflex 5.5s ease-in-out infinite; }
.knopf:hover { transform:translateY(-3px) scale(1.025); box-shadow:0 12px 34px #b8603045; }
.knopf>span { transition:transform .4s var(--bewegung-kurve); }
.knopf:hover>span { transform:translate(4px,-4px); }
.punkt { position:relative; }
.punkt::after { content:''; position:absolute; inset:-5px; border:1px solid #285c4c77; border-radius:50%; animation:punkt-puls 2.8s ease-out infinite; }
.eckdaten strong { font-variant-numeric:tabular-nums; }
.laufende-referenz .projektbild { aspect-ratio:1.73; align-self:stretch; min-height:340px; }
.laufende-referenz #projekt-bild { width:100%; height:100%; object-fit:cover; object-position:top; }
.langansicht { position:absolute; left:0; top:0; width:100%; height:auto!important; max-width:none; object-fit:initial!important; object-position:initial!important; opacity:0; will-change:transform; pointer-events:none; }
.langansicht.bild-bereit { opacity:1; }
.projektbild:hover .langansicht { transform:translateY(var(--bild-position,0px)); }
.laufende-referenz .bildaktion { z-index:3; }
.projekttext { overflow:hidden; }
.projekttext.wechselt>h3,.projekttext.wechselt>p,.projekttext.wechselt>.etikett { animation:referenztext .65s var(--bewegung-kurve) both; }
.projekttext.wechselt>p { animation-delay:70ms; }
.vorfuehrungssteuerung { display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:16px; font-size:11px; color:var(--grau); }
.vorfuehrungssteuerung>span { display:flex; align-items:center; gap:8px; }
.vorfuehrungspunkt { width:6px; height:6px; display:inline-block; background:var(--gruen); border-radius:50%; }
.vorfuehrungssteuerung button { padding:8px 13px; border:1px solid var(--linie); border-radius:5px; background:transparent; color:var(--tinte); font-size:11px; }
.projektfortschritt { height:2px; background:#dbe2d8; margin-top:14px; overflow:hidden; }
.projektfortschritt span { display:block; width:100%; height:100%; background:var(--gruen); transform-origin:left; transform:scaleX(var(--ablauf,0)); }
.bewegte-module { margin-top:70px; display:grid; gap:96px; }
.modulzeile { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:75px; }
.modulzeile.umgekehrt .animationsflaeche { order:2; }
.modultext h3 { font-size:37px; margin:16px 0 23px; line-height:1.12; }
.modultext>p { font-size:16px; }
.modulnummer { display:block; font:italic 76px/.9 var(--serif); color:#a5b3a5; letter-spacing:-.07em; }
.bewegte-liste { list-style:none; padding:0; margin:25px 0; }
.bewegte-liste li { position:relative; padding:11px 0 11px 36px; font-size:13px; border-bottom:1px solid var(--linie); }
.bewegte-liste li::before { content:'✓'; position:absolute; left:0; top:10px; display:grid; place-items:center; width:23px; height:23px; background:#e1e6dc; color:#8e9c8d; border-radius:50%; font-size:12px; transition:background .4s,color .4s,transform .4s; }
.bewegte-liste li.abgehakt::before { background:var(--gruen); color:white; transform:scale(1.07); }
.modultext .ergebnistag { border:0; padding:0; font-size:11px; }
.animationsflaeche { position:relative; height:465px; overflow:hidden; border:1px solid #dbe2d7; border-radius:12px; background:#eef0e9; box-shadow:inset 0 0 60px #ffffff88,0 20px 55px #163c3310; isolation:isolate; }
.animationsflaeche::before { content:''; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(#89958035 .6px,transparent .6px); background-size:6px 6px; opacity:.6; }
.werkstattkopf { position:absolute; top:21px; left:22px; right:22px; display:flex; justify-content:space-between; align-items:center; font-size:9px; color:#68786d; gap:10px; }
.statuspunkt { padding:4px 8px; background:#fff9; border:1px solid #dae0d5; border-radius:20px; font-size:8px; }
.minititel { font-size:8px; letter-spacing:.12em; font-weight:600; color:#8c9b8c; }
.briefingkarte { position:absolute; top:70px; left:30px; right:72px; padding:22px; background:#fff; border-radius:10px; box-shadow:0 15px 28px #1c3b2810; transform:rotate(-3deg); animation:briefing-ablauf 16s var(--bewegung-kurve) infinite; }
.briefingkarte p { font-size:15px; color:var(--tinte); margin:12px 0 0; line-height:1.5; }
.eingabestrich { height:2px; width:80%; margin-top:17px; background:#e6ece4; position:relative; overflow:hidden; }
.eingabestrich::after { content:''; position:absolute; inset:0; background:#6d9b79; transform-origin:left; animation:briefing-balken 16s linear infinite; }
.verbindungstext { position:absolute; top:255px; left:45px; font-size:9px; color:#5f7b67; animation:verbindung-ablauf 16s ease infinite; }
.antwortkarte { position:absolute; top:274px; left:68px; right:26px; background:var(--tinte); padding:21px; border-radius:9px; box-shadow:0 16px 35px #1c3b282a; transform:rotate(2deg); animation:antwort-ablauf 16s var(--bewegung-kurve) infinite; }
.antwortkarte .minititel { color:#aac5ad; font-size:7px; }
.antwortkarte p { margin:12px 0 17px; color:#fff; font:23px/1.2 var(--serif); letter-spacing:-.04em; }
.schreibzeile { display:block; width:max-content; max-width:100%; white-space:nowrap; overflow:hidden; clip-path:inset(0 0 0 0); }
.zeile-eins { animation:schreiben-eins 16s linear infinite; }
.zeile-zwei { animation:schreiben-zwei 16s linear infinite; font-style:italic; color:#bad2bb; }
.wortchips { display:flex; gap:5px; }
.wortchips span { border:1px solid #ffffff25; border-radius:20px; padding:4px 6px; font-size:6px; color:#e1e9e0; animation:wortchip-ablauf 16s ease infinite; }
.wortchips span:nth-child(2) { animation-delay:200ms; }
.wortchips span:nth-child(3) { animation-delay:400ms; }
.demohinweis { position:absolute; bottom:4px; left:0; right:0; padding:5px 10px; background:#eef0e9ed; text-align:center; font-size:8px; letter-spacing:.01em; color:#526854; z-index:5; }
.designwerkstatt { background:#dce7db; perspective:1100px; }
.designstapel { position:absolute; inset:100px 24px 80px; transform-style:preserve-3d; }
.designblatt { position:absolute; inset:0; border:6px solid #fff; border-top-width:0; border-radius:8px; background:#fff; box-shadow:0 15px 40px #17382530; overflow:hidden; }
.designblatt>span { display:block; padding:10px 9px; font-size:8px; letter-spacing:.12em; color:#68786d; }
.designblatt img { width:100%; height:calc(100% - 33px); object-fit:cover; object-position:top; }
.design-eins { transform:translate(-8px,-10px) rotate(-5deg); animation:design-erste 18s var(--bewegung-kurve) infinite; z-index:3; }
.design-zwei { transform:translate(12px,15px) rotate(5deg); animation:design-zweite 18s var(--bewegung-kurve) infinite; z-index:2; }
.design-drei { transform:translate(0,35px) rotate(-2deg); animation:design-dritte 18s var(--bewegung-kurve) infinite; z-index:1; }
.designnotiz { position:absolute; left:40px; bottom:49px; padding:12px 17px; background:var(--tinte); color:white; font-size:10px; border-radius:6px; box-shadow:0 6px 22px #1738252f; display:flex; align-items:center; gap:9px; animation:design-notiz 6s ease-in-out infinite; }
.notizpunkt { height:6px; width:6px; background:#bfd5b8; border-radius:50%; }
.pruefwerkstatt { background:#e9ece5; }
.pruefseite { position:absolute; top:80px; left:28px; right:28px; height:235px; border:5px solid #fff; border-radius:10px; overflow:hidden; box-shadow:0 15px 30px #17382520; animation:pruefseite-ablauf 15s var(--bewegung-kurve) infinite; }
.pruefseitenkopf { background:white; padding:6px 8px 10px; font-size:7px; color:#647369; }
.pruefseite img { width:100%; height:calc(100% - 25px); object-fit:cover; object-position:top; }
.scanlinie { position:absolute; inset:20px 0 auto; height:50px; background:linear-gradient(transparent,#8ed3ae44); border-bottom:1px solid #60ac85; animation:scan-ablauf 15s linear infinite; }
.pruefprotokoll { position:absolute; top:266px; left:80px; right:22px; padding:17px 20px; background:#fff; border-radius:8px; box-shadow:0 18px 35px #17382520; animation:protokoll-ablauf 15s var(--bewegung-kurve) infinite; }
.pruefeintrag { font-size:10px; display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #e3e8df; padding:10px 0; }
.pruefeintrag b { color:var(--gruen); font-size:8px; font-weight:500; animation:pruefung-eins 15s ease infinite; }
.pruefeintrag:nth-child(3) b { animation-name:pruefung-zwei; }
.pruefeintrag:nth-child(4) b { animation-name:pruefung-drei; }
.pruefbalken { height:3px; margin-top:14px; background:#e3e8df; overflow:hidden; }
.pruefbalken span { display:block; height:100%; background:#285c4c; transform-origin:left; animation:pruefung-fortschritt 15s linear infinite; }
.bewegung-bereit .bewegungszone:not(.zone-aktiv) .animationsflaeche *,.bewegung-bereit .bewegungszone:not(.zone-aktiv) .animationsflaeche *::after,.bewegung-bereit .bewegungszone:not(.zone-aktiv) .hintergrundspur,.bewegung-bereit .bewegungszone:not(.zone-aktiv) .fenster,.bewegung-bereit .bewegungszone:not(.zone-aktiv) .schwebeschild { animation-play-state:paused!important; }
.projektbild .langansicht { transition:none; }
.bewegung-pausiert *,.bewegung-pausiert *::before,.bewegung-pausiert *::after,.seite-inaktiv *,.seite-inaktiv *::before,.seite-inaktiv *::after { animation-play-state:paused!important; }
.bewegung-pausiert .erscheint,.bewegung-pausiert .bewegte-zeile,.bewegung-reduziert .erscheint,.bewegung-reduziert .bewegte-zeile { opacity:1!important; transform:none!important; transition:none!important; }
.bewegung-pausiert .fenster,.bewegung-reduziert .fenster { translate:0 0; }
.bewegung-reduziert *,.bewegung-reduziert *::before,.bewegung-reduziert *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
.bewegung-reduziert .design-eins { transform:translate(-8px,-10px) rotate(-5deg); }
.bewegung-reduziert .scanlinie { display:none; }
.bewegung-reduziert .bewegte-liste li::before { color:white; background:var(--gruen); }
#projekt-dialog[open] { animation:dialog-rein .55s var(--bewegung-kurve) both; }
#projekt-dialog[open]::backdrop { animation:hintergrund-rein .4s ease both; }
.tageinhalt:not([hidden]) { animation:inhalt-rein .65s var(--bewegung-kurve) both; }
.fragen details[open] p { animation:inhalt-rein .45s var(--bewegung-kurve) both; }

@keyframes hintergrund-laufen { to { transform:translateX(-50%); } }
@keyframes hero-links { 0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-20px) rotate(-5deg)} }
@keyframes hero-rechts { 0%,100%{transform:translateY(-8px) rotate(8deg)}50%{transform:translateY(14px) rotate(5deg)} }
@keyframes schild-schweben { 0%,100%{transform:translate(-50%,0) rotate(-3deg)}50%{transform:translate(-50%,-9px) rotate(-1deg)} }
@keyframes licht-wandert { 0%{transform:translate(-18%,-10%)}50%{transform:translate(25%,16%)}100%{transform:translate(-18%,-10%)} }
@keyframes lichtreflex { 0%,58%{left:-65%}95%,100%{left:150%} }
@keyframes punkt-puls { 0%{opacity:.7;transform:scale(.6)}75%,100%{opacity:0;transform:scale(1.5)} }
@keyframes referenztext { from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)} }
@keyframes briefing-ablauf { 0%,3%{opacity:0;transform:translateY(55px) rotate(-5deg)}11%,90%{opacity:1;transform:translateY(0) rotate(-3deg)}98%,100%{opacity:0;transform:translateY(-20px) rotate(-3deg)} }
@keyframes briefing-balken { 0%,12%{transform:scaleX(0)}30%,100%{transform:scaleX(1)} }
@keyframes verbindung-ablauf { 0%,25%{opacity:0;transform:translateY(12px)}32%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0} }
@keyframes antwort-ablauf { 0%,30%{opacity:0;transform:translateY(45px) rotate(5deg)}40%,90%{opacity:1;transform:translateY(0) rotate(2deg)}98%,100%{opacity:0;transform:translateY(-20px) rotate(2deg)} }
@keyframes schreiben-eins { 0%,40%{clip-path:inset(0 100% 0 0)}58%,100%{clip-path:inset(0 0 0 0)} }
@keyframes schreiben-zwei { 0%,57%{clip-path:inset(0 100% 0 0)}74%,100%{clip-path:inset(0 0 0 0)} }
@keyframes wortchip-ablauf { 0%,73%{opacity:0;transform:translateY(7px)}80%,100%{opacity:1;transform:translateY(0)} }
@keyframes design-erste { 0%,24%{opacity:1;transform:translate(0,0) rotate(-3deg) scale(1);z-index:3}31%,65%{opacity:.65;transform:translate(-24px,25px) rotate(-10deg) scale(.87);z-index:1}73%,89%{opacity:.45;transform:translate(-28px,20px) rotate(-7deg) scale(.85);z-index:1}100%{opacity:1;transform:translate(0,0) rotate(-3deg) scale(1);z-index:3} }
@keyframes design-zweite { 0%,24%{opacity:.65;transform:translate(24px,18px) rotate(7deg) scale(.92);z-index:2}33%,57%{opacity:1;transform:translate(0,-5px) rotate(2deg) scale(1);z-index:4}66%,90%{opacity:.65;transform:translate(28px,15px) rotate(10deg) scale(.88);z-index:2}100%{opacity:.65;transform:translate(24px,18px) rotate(7deg) scale(.92);z-index:2} }
@keyframes design-dritte { 0%,57%{opacity:.5;transform:translate(-12px,32px) rotate(-4deg) scale(.87);z-index:1}67%,88%{opacity:1;transform:translate(0,-3px) rotate(-2deg) scale(1);z-index:5}100%{opacity:.5;transform:translate(-12px,32px) rotate(-4deg) scale(.87);z-index:1} }
@keyframes design-notiz { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1deg)} }
@keyframes pruefseite-ablauf { 0%,4%{opacity:0;transform:translateY(35px) rotate(-3deg)}12%,90%{opacity:1;transform:translateY(0) rotate(-2deg)}98%,100%{opacity:0;transform:translateY(-15px) rotate(-2deg)} }
@keyframes scan-ablauf { 0%,15%{opacity:0;transform:translateY(-50px)}20%{opacity:1;transform:translateY(-20px)}52%{opacity:1;transform:translateY(210px)}56%,100%{opacity:0;transform:translateY(240px)} }
@keyframes protokoll-ablauf { 0%,24%{opacity:0;transform:translateY(35px) rotate(2deg)}33%,90%{opacity:1;transform:translateY(0) rotate(2deg)}98%,100%{opacity:0;transform:translateY(-15px) rotate(2deg)} }
@keyframes pruefung-eins { 0%,39%{opacity:0;transform:scale(.7)}45%,100%{opacity:1;transform:scale(1)} }
@keyframes pruefung-zwei { 0%,53%{opacity:0;transform:scale(.7)}59%,100%{opacity:1;transform:scale(1)} }
@keyframes pruefung-drei { 0%,67%{opacity:0;transform:scale(.7)}73%,100%{opacity:1;transform:scale(1)} }
@keyframes pruefung-fortschritt { 0%,33%{transform:scaleX(0)}75%,100%{transform:scaleX(1)} }
@keyframes dialog-rein { from{opacity:0;transform:translateY(48px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes hintergrund-rein { from{opacity:0}to{opacity:1} }
@keyframes inhalt-rein { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }

@media(max-width:1000px) {
  .modulzeile { gap:40px; grid-template-columns:1.1fr 1fr; }
  .modultext h3 { font-size:31px; }
  .modultext>p { font-size:14px; }
  .modulnummer { font-size:64px; }
  .animationsflaeche { height:430px; }
  .briefingkarte { left:20px; right:30px; top:67px; padding:18px; }
  .briefingkarte p { font-size:13px; }
  .verbindungstext { top:235px; left:25px; font-size:8px; }
  .antwortkarte { top:253px; left:33px; right:16px; padding:17px; }
  .antwortkarte p { font-size:20px; }
  .pruefseite { left:18px; right:18px; height:205px; }
  .pruefprotokoll { top:238px; left:42px; right:14px; padding:15px; }
  .pruefeintrag { font-size:9px; padding:9px 0; }
  .designstapel { inset:100px 22px 80px; }
  .werkstattkopf { left:17px; right:17px; font-size:8px; }
  .statuspunkt { font-size:7px; }
  .bewegte-liste li { font-size:12px; }
  .designnotiz { left:25px; font-size:9px; }
}
@media(max-width:760px) {
  .hintergrundband { height:260px; top:12px; opacity:.11; }
  .hintergrundgruppe img { width:220px; height:140px; }
  .bewegte-module { gap:58px; margin-top:38px; }
  .modulzeile { grid-template-columns:1fr; gap:30px; }
  .modulzeile.umgekehrt .animationsflaeche { order:0; }
  .animationsflaeche { height:435px; }
  .modultext h3 { font-size:35px; margin-top:15px; }
  .modulnummer { font-size:58px; }
  .modultext>p { font-size:15px; }
  .modultext .ergebnistag { font-size:10px; }
  .bewegte-liste li { font-size:13px; }
  .werkstattkopf { font-size:8px; }
  .briefingkarte { right:40px; top:67px; }
  .briefingkarte p { font-size:14px; }
  .antwortkarte { top:254px; padding:19px; }
  .antwortkarte p { font-size:21px; }
  .wortchips span { font-size:6px; }
  .demohinweis { font-size:7px; }
  .designstapel { inset:95px 24px 88px; }
  .designnotiz { left:22px; bottom:54px; }
  .laufende-referenz .projektbild { height:auto; min-height:0; aspect-ratio:1.42; }
  .laufende-referenz #projekt-bild { height:100%; aspect-ratio:auto; }
  .vorfuehrungssteuerung { font-size:9px; }
  .vorfuehrungssteuerung button { font-size:10px; }
  .projektfortschritt { margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .bewegung-bereit .erscheint,.bewegung-bereit .zeilenstart .bewegte-zeile { transform:none; opacity:1; }
  .scanlinie { display:none; }
}

/* ===== aus verfeinerung.css ===== */
/* Version 03: ruhiger Einstieg, eigene Bildbewegungen und Workshop-Bestandteile. */
.einstieg { padding-top:72px; }
.einstiegtext { max-width:940px; margin-inline:auto; }
.einstiegtext h1 { font-family:Werk,Arial,sans-serif; font-size:clamp(40px,5.2vw,72px); font-weight:550; line-height:1.06; letter-spacing:-.055em; color:#203b33; margin:23px 0; }
.einstiegtext .hero-label { font-size:14px; font-weight:500; color:#203b33; margin:0; letter-spacing:0; }
.einstiegtext .hero-beschreibung { max-width:760px; margin:0 auto 28px; font-size:16px; line-height:1.65; color:#203b33; }
.einstiegtext .hero-vertrauen { font-size:14px; color:#203b33; margin:23px 0 0; }
.einstiegtext .knopf { font-size:16px; }
.einstieg .schwebeschild { font:14px/1.45 Werk,Arial,sans-serif; }
.einstieg .schwebeschild strong,.einstieg .schwebeschild span { font:inherit; }
.eckdaten strong { font:500 34px/1.1 Werk,Arial,sans-serif; letter-spacing:-.04em; }
.eckdaten span { font-size:14px; }
.hintergrundband { height:335px; opacity:.10; top:0; mask-image:linear-gradient(#000,transparent 97%); }
.hintergrundspur { animation-duration:65s; }
.hintergrundgruppe { align-items:center; gap:20px; padding-right:20px; }
.bandkachel { flex:none; width:310px; height:205px; position:relative; overflow:hidden; border-radius:9px; perspective:700px; }
.bandkachel img,.hintergrundgruppe .bandkachel img { position:absolute; width:100%; height:100%; max-width:none; margin:0; object-fit:cover; object-position:top; border-radius:7px; }
.bandkachel img+img { opacity:0; }
.bandkachel.aufwaerts img { animation:kachel-hoch 6s ease-in-out infinite; }
.bandkachel.aufwaerts img+img { animation-delay:-3s; }
.bandkachel.faecher img { animation:kachel-drehen 7s ease-in-out infinite; }
.bandkachel.faecher img+img { animation-delay:-3.5s; }
.bandkachel.seitwaerts img { animation:kachel-seite 5s ease-in-out infinite; }
.bandkachel.seitwaerts img+img { animation-delay:-2.5s; }
.bandkachel.abwaerts img { animation:kachel-runter 6.5s ease-in-out infinite; }
.bandkachel.abwaerts img+img { animation-delay:-3.25s; }
.bandkachel.wechsel img { animation:kachel-tiefe 8s ease-in-out infinite; }
.bandkachel.wechsel img+img { animation-delay:-4s; }
@keyframes kachel-hoch { 0%,42%{opacity:1;transform:translateY(0)}49%,91%{opacity:0;transform:translateY(-80%)}92%{transform:translateY(80%)}100%{opacity:1;transform:translateY(0)} }
@keyframes kachel-runter { 0%,42%{opacity:1;transform:translateY(0)}49%,91%{opacity:0;transform:translateY(80%)}92%{transform:translateY(-80%)}100%{opacity:1;transform:translateY(0)} }
@keyframes kachel-seite { 0%,40%{opacity:1;transform:translateX(0)}49%,91%{opacity:0;transform:translateX(-100%)}92%{transform:translateX(100%)}100%{opacity:1;transform:translateX(0)} }
@keyframes kachel-drehen { 0%,35%{opacity:1;transform:rotate(-3deg) scale(.91)}47%,88%{opacity:0;transform:rotate(13deg) translate(30px,-45px) scale(.8)}90%{transform:rotate(-12deg) translate(-30px,40px) scale(.8)}100%{opacity:1;transform:rotate(-3deg) scale(.91)} }
@keyframes kachel-tiefe { 0%,38%{opacity:1;transform:rotateY(0) scale(.94)}48%,90%{opacity:0;transform:rotateY(40deg) scale(.65)}91%{transform:rotateY(-40deg) scale(.65)}100%{opacity:1;transform:rotateY(0) scale(.94)} }
.bewegung-bereit .bewegungszone:not(.zone-aktiv) .bandkachel img { animation-play-state:paused; }
/* Unverzerrte Referenzen. Die Screenshot-Breite entspricht immer der Rahmenbreite. */
.projektbuehne { grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr); overflow:hidden; }
.referenzleinwand { min-width:0; background:#e9ede5; display:flex; align-items:center; padding:30px; }
.referenzbrowser { width:100%; max-width:640px; margin:auto; background:white; border:1px solid #d3dcd0; border-radius:8px; overflow:hidden; box-shadow:0 13px 35px #24392c16; }
.referenzbrowser-kopf { display:flex; justify-content:space-between; gap:10px; padding:11px 13px; font-size:8px; color:#526557; border-bottom:1px solid #e0e6dc; }
.referenzbrowser-kopf span:first-child { font-weight:600; }
.laufende-referenz .projektbild { display:block; width:100%; height:auto; aspect-ratio:1.6; min-height:0; align-self:auto; }
.laufende-referenz #projekt-bild { width:100%; height:auto; display:block; object-fit:contain; aspect-ratio:auto; transform:none; }
.projektbild .langansicht { width:100%!important; height:auto!important; max-width:100%; object-fit:contain!important; transform-origin:top left; }
.projektbild:hover #projekt-bild { transform:none; }
.projekttext { padding:34px; }
#projekt-dialog #dialog-bild { width:100%; height:auto; max-height:none; object-fit:contain; }
/* Inhalte beginnen beim Eintreten in den Bildschirm, ohne lange Leerphasen. */
.bewegung-bereit .erscheint { transform:translateY(30px); transition-duration:.45s; }
.bewegung-bereit .zeilenstart .bewegte-zeile { transition-duration:.5s; transition-delay:calc(var(--zeile) * 65ms); }
.briefingkarte,.eingabestrich::after,.verbindungstext,.antwortkarte,.zeile-eins,.zeile-zwei,.wortchips span { animation-duration:7s; animation-delay:-2.4s; }
.design-eins,.design-zwei,.design-drei { animation-duration:8s; animation-delay:-1s; }
.pruefseite,.scanlinie,.pruefprotokoll,.pruefeintrag b,.pruefbalken span { animation-duration:7s; animation-delay:-2.5s; }
.bewegte-module { gap:100px; }
.modulzeile { gap:70px; }
.animationsflaeche { box-shadow:0 24px 55px #163c3312; }
/* Vorher/Nachher als eigenständiges Bild. */
.vergleich { background:#f0f2ec; }
.vergleichsbild { margin:42px 0 0; }
.vergleichsbild img { width:100%; height:auto; border-radius:12px; box-shadow:0 20px 60px #193e3411; }
.vergleichsbild figcaption { text-align:center; font-size:11px; color:#637065; padding:14px 0; }
.vergleichspunkte { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:22px; }
.vergleichspunkte p { margin:0; }
.vergleichspunkte strong { display:block; color:var(--tinte); font-size:20px; margin-bottom:8px; }
.vergleichspunkte span { font-size:14px; line-height:1.6; }
/* Sechs Branchen, mit gleichwertigen Karten. */
.branchenraster { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:48px; }
.branchenkarte { position:relative; padding:30px; border:1px solid #dce3d9; border-radius:10px; background:#fff; transition:box-shadow .25s,border-color .25s; }
.branchenkarte:hover { border-color:#94ad97; box-shadow:0 15px 35px #1c40320c; }
.branchennummer { display:block; font:italic 40px/.9 var(--serif); color:#a1b6a3; margin-bottom:26px; }
.branchenkarte h3 { font-size:22px; letter-spacing:-.04em; margin:0 0 17px; }
.branchenkarte>strong { display:block; font-size:15px; font-weight:500; line-height:1.5; margin-bottom:10px; color:var(--tinte); }
.branchenkarte p { font-size:14px; margin:0; line-height:1.65; }
/* Beide Tage sind zugleich sichtbar; kein Tab versteckt die Hälfte des Programms. */
.programmraster { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:48px; }
.programmkarte { min-width:0; border:1px solid #cbd8cc; border-radius:12px; overflow:hidden; background:#fff; color:#203e32; display:flex; flex-direction:column; }
.ablauf .programminhalt p { color:#607065; }
.programmbild { position:relative; height:290px; background:#e1e9df; overflow:hidden; }
.programmbild>img { position:absolute; width:65%; border:6px solid white; border-radius:7px; box-shadow:0 20px 35px #143a2c24; }
.tag-eins>img { top:96px; right:-8px; transform:rotate(6deg); }
.programmzettel { position:absolute; top:31px; left:28px; width:58%; padding:23px; background:white; border-radius:7px; transform:rotate(-5deg); box-shadow:0 15px 30px #143a2c12; }
.programmzettel>span,.programmpruefung>span { font-size:8px; letter-spacing:.12em; }
.programmzettel>strong,.programmpruefung>strong { display:block; font-size:23px; line-height:1.15; letter-spacing:-.04em; margin:16px 0; color:#203e32; }
.zettelzeile { height:4px; background:#dce5d9; margin:9px 0; }
.zettelzeile.kurz { width:65%; }
.zettelchips { display:flex; gap:5px; margin-top:17px; }
.zettelchips span { border:1px solid #dce5d9; border-radius:12px; padding:4px 6px; font-size:7px; }
.tag-zwei { background:#d3e1d5; }
.tag-zwei>img { top:30px; left:27px; transform:rotate(-5deg); }
.programmpruefung { position:absolute; bottom:26px; right:24px; width:60%; padding:20px; border-radius:8px; background:#203e32; box-shadow:0 12px 25px #143a2c28; color:#d3e3d3; transform:rotate(4deg); }
.programmpruefung>strong { color:white; font-size:23px; margin:12px 0; }
.programmpruefung p { font-size:8px; margin:0; color:#d3e3d3; }
.programmfortschritt { margin-top:14px; height:3px; background:linear-gradient(90deg,#b8d6bd 80%,#ffffff20 80%); }
.programminhalt { padding:34px; display:flex; flex-direction:column; flex:1; }
.tagesetikett { font-size:10px; letter-spacing:.1em; color:#55765e; font-weight:600; }
.programminhalt h3 { font-size:29px; line-height:1.15; letter-spacing:-.045em; margin:18px 0; }
.programminhalt>p { font-size:15px; line-height:1.65; margin:0 0 24px; }
.programminhalt ol { list-style:none; margin:0 0 24px; padding:0; counter-reset:programmpunkt; }
.programminhalt li { padding:20px 0 20px 33px; border-top:1px solid #e1e7dc; position:relative; counter-increment:programmpunkt; }
.programminhalt li::before { content:counter(programmpunkt,decimal-leading-zero); position:absolute; top:22px; left:0; font-size:10px; color:#7b937e; }
.programminhalt li strong { display:block; font-size:15px; font-weight:500; color:#203e32; margin-bottom:7px; }
.programminhalt li span { font-size:13px; line-height:1.6; color:#627065; }
.tagesergebnis { margin-top:auto; padding:19px; background:#f0f3ec; border-radius:6px; }
.tagesergebnis span { display:block; font-size:9px; letter-spacing:.09em; color:#68806b; margin-bottom:7px; }
.tagesergebnis strong { font-size:14px; font-weight:500; }
/* Teilnahmezertifikat ohne fremde Siegel oder erfundene Akkreditierung. */
.zertifikatbereich { align-items:center; gap:60px; }
.zertifikatpunkte { margin:27px 0; padding-left:18px; color:#45624b; }
.zertifikatpunkte li { padding:8px 0; font-size:14px; }
.zertifikatnotiz { font-size:12px!important; }
.zertifikatrahmen { padding:25px; background:#e7eee3; border-radius:12px; perspective:1000px; }
.zertifikatpapier { padding:30px; background:#fffef8; border:1px solid #ced7c9; box-shadow:0 18px 30px #253b271d; transform:rotate(-3deg); text-align:center; color:#234332; }
.zertifikatkopf { display:flex; justify-content:space-between; align-items:center; }
.zertifikatkopf img { width:130px; height:auto; }
.zertifikatkopf>span { font-size:8px; letter-spacing:.15em; color:#7d8d7b; }
.zertifikatpapier .urkundenart { margin:36px 0 17px; font-size:9px; letter-spacing:.2em; color:#708166; }
.zertifikatpapier h3 { font:30px/1.05 var(--serif); margin:0; letter-spacing:-.04em; }
.zertifikatpapier .urkundenname { font-size:21px; color:#294e35; margin:25px 0 14px; font-weight:500; }
.zertifikatpapier>p:not(.urkundenart):not(.urkundenname) { font-size:10px; line-height:1.7; }
.urkundeninhalte { margin:20px 0; font-size:8px; line-height:1.7; color:#708166; }
.urkundenfuss { display:flex; justify-content:space-between; border-top:1px solid #d5ddcc; padding-top:17px; gap:14px; text-align:left; }
.urkundenfuss strong,.urkundenfuss span { display:block; font-size:8px; line-height:1.7; font-weight:400; }
.urkundenfuss strong { font-weight:600; }
/* Abschluss nach dem gewünschten Aufbau, mit dem eigenen Angebot von Karl-Heinz. */
.abschluss-neu { background:radial-gradient(ellipse at 55% 0,#5d9184 0,transparent 54%),linear-gradient(140deg,#214e43,#11382f); color:white; text-align:left; }
.abschlussraster { display:grid; grid-template-columns:1.06fr 1fr; gap:40px; align-items:start; }
.abschlusskarte { border-radius:13px; background:#fff; overflow:hidden; color:#203e32; }
.paketansicht { height:345px; position:relative; background:linear-gradient(#fff,#f2f5ed); overflow:hidden; }
.paketblatt { position:absolute; width:24%; height:190px; padding:16px 12px; top:35px; border:1px solid #386054; background:linear-gradient(135deg,#305e4f,#153d30); color:#edf4e7; box-shadow:8px 12px 20px #1c39282b; }
.paketblatt>span { display:block; font-size:6px; line-height:1.7; letter-spacing:.1em; }
.paketblatt>strong { display:block; font:22px/1.05 var(--serif); letter-spacing:-.02em; margin:21px 0; }
.paket-plan { left:8%; transform:rotate(-8deg); }
.paket-check { left:35%; top:20px; transform:rotate(-1deg); }
.paket-urkunde { left:63%; transform:rotate(7deg); background:#fbfaf1; border-color:#d4ddcd; color:#23432f; }
.paket-urkunde img { width:100%; height:auto; margin-bottom:24px; }
.paket-urkunde>strong { font-size:22px; }
.paket-browser { position:absolute; width:65%; bottom:20px; left:20%; padding:6px; background:#fff; border-radius:8px; border:1px solid #dce3d6; box-shadow:0 20px 25px #203e3228; transform:rotate(-3deg); }
.paket-browser>div { font-size:7px; padding:6px; color:#668067; }
.paket-browser img { width:100%; height:auto; border-radius:3px; }
.abschlussinhalt { padding:30px 38px 38px; }
.abschluss-neu .abschlussinhalt h2 { font-size:40px; line-height:1.05; margin:20px 0 26px; color:#1d392c; }
.abschluss-neu .abschlussinhalt h2 em { color:#4d7966; }
.abschluss-neu .abschlussinhalt p { max-width:none; margin:0 0 24px; color:#607065; font-size:15px; text-align:left; }
#anfrage .abschlussinhalt>p:not(.etikett):not(.kleindruck) { color:#607065; margin:0 0 24px; }
#anfrage .naechste-schritte p { margin:0; color:#d4e3d8; }
#anfrage .abschluss-persoenlich p { margin:0; color:#c9dfd0; }
.abschluss-neu .abschlussinhalt .etikett { font-size:9px; color:#53705a; letter-spacing:.1em; }
.abschluss-neu .hauptaktion { font-size:14px; padding:22px; width:100%; margin:0; }
.abschluss-neu .abschlussinhalt .kleindruck { font-size:10px; margin:13px 0 24px; }
.abschluss-highlights { list-style:none; margin:0; padding:0; }
.abschluss-highlights li { padding:20px 0 20px 26px; border-bottom:1px solid #e5eadf; position:relative; font-size:14px; line-height:1.55; }
.abschluss-highlights li::before { content:'✓'; position:absolute; left:0; top:20px; color:#4c7c62; }
.abschluss-highlights li:last-child { border:0; padding-bottom:0; }
.abschlussbegleitung { position:relative; }
.naechste-schritte { list-style:none; padding:8px 30px; margin:0; border:1px solid #c1e3d129; background:#ffffff05; border-radius:11px; }
.naechste-schritte li { display:grid; grid-template-columns:42px 1fr; gap:18px; padding:28px 0; border-bottom:1px solid #c1e3d129; }
.naechste-schritte li:last-child { border:0; }
.naechste-schritte li>span { font:italic 35px/1 var(--serif); color:#a1c6b4; }
.naechste-schritte h3 { font-size:23px; letter-spacing:-.045em; line-height:1.15; margin:0 0 13px; color:#fff; }
.abschluss-neu .naechste-schritte p { font-size:15px; line-height:1.7; color:#d4e3d8; margin:0; max-width:none; }
.abschluss-persoenlich { display:flex; gap:15px; align-items:center; padding:28px 5px 16px; }
.abschluss-persoenlich img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.abschluss-neu .abschluss-persoenlich p { margin:0; font-size:12px; color:#c9dfd0; }
.abschluss-persoenlich strong { color:#fff; font-weight:500; }
.abschluss-neu .email { display:inline-block; margin:0 0 0 73px; font-size:12px; color:#d0e6d8; }
@media(max-width:1050px) {
 .einstiegtext { padding-inline:25px; }
 .projektbuehne { grid-template-columns:1.4fr 1fr; }
 .referenzleinwand { padding:20px; }
 .projekttext { padding:25px; }
 .projekttext h3 { font-size:26px; }
 .branchenkarte { padding:23px; }
 .branchenkarte h3 { font-size:20px; }
 .programminhalt { padding:26px; }
 .programminhalt h3 { font-size:26px; }
 .zertifikatbereich { gap:35px; }
 .zertifikatpapier { padding:22px; }
 .zertifikatpapier h3 { font-size:26px; }
 .abschlussraster { gap:25px; }
 .abschlussinhalt { padding:26px; }
 .abschluss-neu .abschlussinhalt h2 { font-size:34px; }
 .naechste-schritte { padding:5px 22px; }
 .naechste-schritte li { grid-template-columns:30px 1fr; gap:13px; }
 .naechste-schritte h3 { font-size:21px; }
 .paketansicht { height:290px; }
 .paketblatt { height:155px; padding:12px 9px; }
 .paketblatt>strong { font-size:18px; margin:16px 0; }
}
@media(max-width:760px) {
 .einstieg { padding-top:48px; }
 .einstiegtext { padding-inline:20px; }
 .einstiegtext h1 { font-size:clamp(36px,8vw,52px); margin:20px 0; }
 .einstiegtext .hero-label { font-size:14px; }
 .einstiegtext .hero-beschreibung { font-size:16px; line-height:1.6; }
 .einstiegtext .hero-beschreibung br { display:none; }
 .einstiegtext .hero-vertrauen { font-size:14px; line-height:1.6; padding:0 10px; }
 .einstiegtext .knopf { font-size:14px; padding:20px 18px; }
 .einstieg .schwebeschild { font-size:10px; }
 .eckdaten strong { font-size:27px; }
 .eckdaten span { font-size:11px; }
 .bandkachel { width:230px; height:165px; }
 .hintergrundgruppe .bandkachel img { width:100%; height:100%; }
 .hintergrundband { height:230px; opacity:.08; }
 .projektbuehne { display:block; }
 .referenzleinwand { padding:18px; }
 .referenzbrowser-kopf { font-size:6px; padding:9px; }
 .referenzbrowser-kopf span:first-child { display:none; }
 .laufende-referenz .projektbild { aspect-ratio:1.6; }
 .projekttext { padding:26px; }
 .vergleichspunkte { grid-template-columns:1fr; gap:20px; }
 .vergleichspunkte strong { font-size:18px; }
 .vergleichsbild figcaption { font-size:9px; }
 .branchenraster { grid-template-columns:1fr 1fr; gap:14px; }
 .branchenkarte { padding:20px; }
 .branchenkarte h3 { font-size:20px; }
 .branchenkarte>strong,.branchenkarte p { font-size:13px; }
 .programmraster { grid-template-columns:1fr; gap:25px; }
 .programmbild { height:270px; }
 .programminhalt { padding:26px; }
 .programminhalt h3 { font-size:28px; }
 .zertifikatbereich { grid-template-columns:1fr; gap:35px; }
 .zertifikatrahmen { padding:22px; }
 .zertifikatpapier { padding:23px; }
 .zertifikatpapier h3 { font-size:27px; }
 .zertifikatpapier .urkundenname { font-size:20px; }
 .zertifikatkopf img { width:115px; }
 .urkundenfuss strong,.urkundenfuss span { font-size:7px; }
 .abschlussraster { grid-template-columns:1fr; gap:28px; }
 .abschlussbegleitung { position:static; }
 .abschlussinhalt { padding:27px; }
 .abschluss-neu .abschlussinhalt h2 { font-size:34px; }
 .paketansicht { height:295px; }
 .abschluss-neu .hauptaktion { font-size:13px; padding:20px 14px; }
 .abschluss-highlights li { font-size:13px; }
}
@media(max-width:480px) {
 .branchenraster { grid-template-columns:1fr; }
 .branchenkarte { padding:25px; }
 .branchennummer { position:absolute; right:25px; top:25px; font-size:30px; }
 .branchenkarte h3 { padding-right:40px; font-size:23px; }
 .branchenkarte>strong,.branchenkarte p { font-size:14px; }
 .programmbild { height:245px; }
 .programmzettel { left:20px; padding:18px; }
 .programmzettel>strong,.programmpruefung>strong { font-size:20px; }
 .programmpruefung { right:17px; padding:16px; }
 .zertifikatpapier { padding:18px; }
 .zertifikatpapier h3 { font-size:24px; }
 .zertifikatpapier .urkundenname { font-size:18px; }
 .urkundenfuss { gap:8px; }
 .paketansicht { height:260px; }
 .paketblatt { height:155px; }
 .paketblatt>strong { font-size:17px; }
 .abschlussinhalt { padding:23px; }
 .abschluss-neu .abschlussinhalt h2 { font-size:31px; }
 .naechste-schritte h3 { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) { .bandkachel img { animation:none!important; }.bandkachel img+img { display:none; } }

/* Vom Creative-Karussell der Vorlage zur eigenen Webseiten-Galerie. */
.projektgalerie { background:radial-gradient(ellipse at 50% 45%,#fff,#e8ece4 75%); perspective:1100px; }
.galerielauf { position:absolute; inset:70px 0 45px; perspective:1000px; }
.galeriekarte { position:absolute; top:0; left:28%; width:44%; height:100%; background:#fff; border:5px solid #fff; border-radius:10px; overflow:hidden; box-shadow:0 15px 30px #18382825; transform-origin:center; animation:projektkarussell 10s cubic-bezier(.45,0,.25,1) infinite; animation-delay:var(--versatz); }
.galeriekopf { display:flex; justify-content:space-between; font-size:8px; color:#3c5747; padding:8px 7px; }
.galerieausschnitt { height:calc(100% - 59px); overflow:hidden; border-radius:3px; background:#f3f5ee; }
.galerieausschnitt img { display:block; width:100%; height:auto; max-width:100%; animation:galeriebildfahrt 10s ease-in-out infinite; animation-delay:var(--versatz); }
.galeriefuss { font-size:8px; color:#36563f; padding:8px 5px; white-space:nowrap; }
@keyframes projektkarussell { 0%,8%{transform:translateX(0) scale(1);opacity:1;z-index:5}20%,28%{transform:translateX(-112%) scale(.84);opacity:1;z-index:3}40%,48%{transform:translateX(-224%) scale(.74);opacity:0;z-index:1}49%,68%{transform:translateX(224%) scale(.74);opacity:0;z-index:1}80%,88%{transform:translateX(112%) scale(.84);opacity:1;z-index:3}100%{transform:translateX(0) scale(1);opacity:1;z-index:5} }
@keyframes galeriebildfahrt { 0%{transform:translateY(-35px)}30%,65%{transform:translateY(0)}85%,100%{transform:translateY(-35px)} }
@media(max-width:760px) { .galerielauf{inset:65px 0 43px}.galeriekarte{left:25%;width:50%}.galeriekopf,.galeriefuss{font-size:7px} }
@media(prefers-reduced-motion:reduce) { .galeriekarte{animation:none!important;opacity:0;transform:none}.galeriekarte:first-child{opacity:1}.galerieausschnitt img{animation:none!important} }
.bewegung-reduziert .galeriekarte { animation:none!important;opacity:0;transform:none; }
.bewegung-reduziert .galeriekarte:first-child { opacity:1; }

/* Normale Bildschirmaufnahmen bewahren die Höhe von bildschirmfüllenden Heros. */
.langansicht.bild-bereit { animation:referenzbild-rein .38s ease-out both; }
@keyframes referenzbild-rein { from{opacity:0;filter:brightness(1.1)}to{opacity:1;filter:brightness(1)} }
.galerieausschnitt { height:auto; aspect-ratio:1.6; background:#fff; }
.galerieausschnitt img { width:100%; height:100%; object-fit:contain; object-position:top; animation:none; }
.galeriekarte { background:#fff; }
.galeriefuss { padding:17px 12px; white-space:normal; }
.galeriefuss strong { display:block; font-size:12px; letter-spacing:-.02em; line-height:1.2; }
.galeriefuss span { display:block; font:20px/1.1 var(--serif); letter-spacing:-.03em; margin:14px 0; }
.galeriefuss b { display:inline-block; border-top:1px solid #d8e2d5; padding-top:10px; font-size:7px; font-weight:400; color:#6a806a; }
.galeriekarte:nth-child(2) .galeriefuss { color:#31557f; }
.galeriekarte:nth-child(3) { background:#faf3e6; border-color:#faf3e6; }
.galeriekarte:nth-child(4) { background:#20392d; border-color:#20392d; }
.galeriekarte:nth-child(4) .galeriekopf,.galeriekarte:nth-child(4) .galeriefuss,.galeriekarte:nth-child(4) .galeriefuss b { color:#e9f0de; }
.galeriekarte:nth-child(5) { background:#eeeada; border-color:#eeeada; }
@media(max-width:760px) { .galeriefuss{padding:15px 9px}.galeriefuss strong{font-size:10px}.galeriefuss span{font-size:18px} }

/* ===== aus version04.css ===== */
/* Version 04: vollständige Scrollfahrten und konkrete Vorher-/Nachher-Texte. */
.einstiegtext .hero-exklusiv { font:400 14px/1.6 Werk,Arial,sans-serif; color:#203b33; margin:22px 20px 0; }
.einstiegtext .hero-vertrauen { margin-top:8px; }
/* Gleiche Abmessungen für jede Referenz, unabhängig von der Originalseite. */
.laufende-referenz .projektbild { aspect-ratio:16 / 10; height:auto; min-height:0; }
.projektbuehne .projekttext { min-height:390px; }
.projektbild .scrollstreifen { z-index:1; background:white; }
.scrollausschnitt { position:relative; width:100%; overflow:hidden; }
.projektbild .scrollausschnitt img { position:absolute; left:0; display:block; width:100%; height:auto!important; max-width:none; object-fit:initial; transform:none!important; transition:none; }
.projektbild .bildaktion { z-index:2; }
.projektbild .langansicht.bild-bereit { animation:none; }
/* Der erste Text bleibt kurz sichtbar, der stärkere Text bekommt mehr Lesezeit. */
.textvergleich { height:490px; }
.textvergleich .textkarte { position:absolute; inset:67px 28px 43px; padding:27px; border:1px solid #d9dfd1; border-radius:9px; background:#fffefa; box-shadow:0 14px 35px #243f2710; }
.textvergleich .textzustand { display:block; font-size:9px; font-weight:600; letter-spacing:.08em; color:#788276; }
.textvergleich h4 { font:500 29px/1.08 Werk,Arial,sans-serif; letter-spacing:-.045em; margin:20px 0 18px; color:#40503f; }
.textvergleich .textkarte p { font:400 14px/1.6 Werk,Arial,sans-serif; color:#697363; margin:0; }
.textvergleich .textwirkung { display:block; font:400 10px/1.5 Werk,Arial,sans-serif; margin-top:22px; color:#7a8770; }
.textvergleich .text-einladung { display:inline-block; font:500 11px/1.4 Werk,Arial,sans-serif; padding:12px 14px; margin-top:20px; border-radius:4px; background:#234c3e; color:white; }
.textvergleich .text-nachher { border-color:#adc3a8; background:#fafff5; opacity:0; }
.textvergleich .text-nachher h4 { color:#1e4230; }
.textvergleich .text-nachher p { color:#405b44; }
.textvergleich .text-nachher .textwirkung { margin-top:12px; }
.textvergleich .text-vorher { animation:text-vorher-zeigen 14s infinite; }
.textvergleich .text-nachher { animation:text-nachher-zeigen 14s infinite; }
.textvergleich .demohinweis { position:absolute; bottom:13px; left:18px; right:18px; text-align:center; font-size:9px; color:#73806d; }
@keyframes text-vorher-zeigen { 0%,23%{opacity:1;transform:translateY(0)} 27%,96%{opacity:0;transform:translateY(-13px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes text-nachher-zeigen { 0%,23%{opacity:0;transform:translateY(14px)} 27%,96%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(14px)} }
.branchenschutz { background:#e9eee3; text-align:center; }
.branchenschutz .rahmen { max-width:900px; }
.branchenschutz h2 { font-size:clamp(35px,4.2vw,58px); }
.branchenschutz h2 em { font-size:.72em; }
.branchenschutz p:not(.etikett) { max-width:720px; margin:24px auto; }
.branchenschutz strong { color:#294b36; font-weight:500; }
.branchenschutz .knopf { margin-top:8px; }
.branchenschutz-hinweis { display:block; font-size:11px; margin-top:16px; color:#657260; }
@media(min-width:761px) and (max-width:1050px) {
 .projektbuehne .projekttext { min-height:435px; }
 .textvergleich { height:510px; }
 .textvergleich .textkarte { inset:60px 18px 40px; padding:22px; }
 .textvergleich h4 { font-size:25px; }
 .textvergleich .textkarte p { font-size:13px; }
}
@media(max-width:760px) {
 .projektbuehne .projekttext { min-height:305px; }
 .textvergleich { height:510px; }
 .textvergleich .textkarte { inset:62px 20px 42px; padding:23px; }
 .textvergleich h4 { font-size:28px; }
 .textvergleich .werkstattkopf .statuspunkt { display:none; }
 .branchenschutz .knopf { font-size:14px; padding:20px; }
}
@media(max-width:390px) {
 .textvergleich { height:535px; }
 .textvergleich .textkarte { inset-inline:14px; padding:20px; }
 .textvergleich h4 { font-size:26px; }
 .textvergleich .textkarte p { font-size:13px; }
 .projektbuehne .projekttext { min-height:335px; }
}
@media(prefers-reduced-motion:reduce) {
 .textvergleich .text-vorher { display:none; }
 .textvergleich .text-nachher { opacity:1; transform:none; animation:none; }
}

/* ===== aus version06.css ===== */
/* Zehn Referenzen: jedes Projekt ist direkt mit seinem Namen auswählbar. */
.projektwahl { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); max-width:1120px; margin-inline:auto; gap:10px; }
.projektwahl button { min-height:47px; padding:10px 12px; line-height:1.4; }
@media(max-width:1050px) { .projektwahl { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .projektwahl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.projektwahl button { font-size:12px; padding:10px 8px; } }

/* ===== aus version07.css ===== */
/* Version 07: abgestimmte Wechsel, Lesepausen und Bewegung bis zum Abschluss. */
.schaufenster .fenster { animation:none; translate:var(--hero-x,0px) var(--hero-y,0px); opacity:var(--hero-deckung,1); will-change:translate,opacity; }
.schaufenster .fenster img { width:100%; aspect-ratio:1265 / 712; object-fit:cover; object-position:top; }
.projektbild .alte-ansicht { z-index:2; pointer-events:none; }
.projektbild .bildaktion { z-index:3; }
.projektbild .langansicht { transition:none!important; }
.projektbild:hover .bildaktion::before { content:'Pausiert · '; }
/* Beide Bildhälften werden unverändert aus derselben Quelldatei angezeigt. */
.vergleichsbild { max-width:720px; margin:40px auto 0; }
.vergleich-schalter { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.vergleich-schalter button { background:#e0e4dc; border:1px solid #bdc8b7; border-radius:8px; padding:17px; color:#62705b; font:600 23px/1.1 Werk,Arial,sans-serif; text-align:left; transition:background .6s,color .6s; }
.vergleich-schalter button span { display:block; font-size:12px; font-weight:400; margin-top:8px; }
.vergleich-schalter button[aria-pressed=true] { background:#214a38; color:#fff; border-color:#214a38; }
.vergleich-wechsel { position:relative; width:100%; aspect-ratio:770 / 742; border-radius:10px; overflow:hidden; box-shadow:0 25px 55px #163c3320; background:white; }
.vergleich-ebene { position:absolute; inset:0; background-image:url('assets/vorher-nachher.avif'); background-size:217.142857% auto; background-repeat:no-repeat; }
.vergleich-alt { background-position:5.210643% 58.291457%; }
.vergleich-neu { background-position:94.789357% 58.291457%; opacity:0; }
.vergleich-wechsel:focus-visible { outline:3px solid #c87745; outline-offset:5px; }
/* Vier Beispiele, mit bewusst großen, klar unterscheidbaren Zustandsmarkierungen. */
.textvergleich { height:620px; }
.textbeispiel-wahl { position:absolute; top:51px; left:23px; right:23px; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.textbeispiel-wahl button { border:1px solid #cdd8c5; background:#ffffff88; color:#4a6046; padding:10px 5px; border-radius:5px; font-size:10px; }
.textbeispiel-wahl button[aria-pressed=true] { background:#244b39; color:white; border-color:#244b39; }
.textvergleich .textkarte { inset:108px 23px 45px; padding:26px; animation:none!important; transform:none; transition:none; }
.textvergleich .textzustand { display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; padding-bottom:16px; border-bottom:1px solid #d5d5c8; letter-spacing:0; }
.textzustand strong { font:650 26px/1 Werk,Arial,sans-serif; letter-spacing:-.04em; color:#98603e; }
.textzustand span { font-size:11px; color:#7d7265; font-weight:400; }
.text-nachher .textzustand strong { color:#215738; }
.text-nachher .textzustand span { color:#4f7056; }
.textvergleich h4 { white-space:pre-line; font-size:28px; }
.textvergleich .textkarte p { font-size:14px; line-height:1.65; }
.textvergleich .text-vorher { background:#fffaf2; }
.textvergleich .text-nachher { background:#f4ffed; border:1px solid #8eb188; }
/* Ein wechselnder Fokus verbindet die sechs Branchen zu einer lebendigen Gruppe. */
.branchenkarte { transition:background .8s,border-color .8s,box-shadow .8s,translate .8s!important; }
.branchenkarte .branchennummer { transition:color .8s,transform .8s; }
.branchenkarte.branche-im-fokus { background:#f1f7e9; border-color:#95b28b; box-shadow:0 22px 45px #3258371a; translate:0 -8px; }
.branchenkarte.branche-im-fokus .branchennummer { color:#477647; transform:translateX(5px) rotate(-7deg); }
.branchenkarte:hover { translate:0 -8px; border-color:#719366; }
/* Kleine Bewegungen in den Bildern; lange Texte bleiben ruhig lesbar. */
.tag-eins .programmzettel { animation:plan-atmet 6s ease-in-out infinite; }
.tag-eins>img { animation:entwurf-schwebt 7s ease-in-out infinite; }
.tag-zwei>img { animation:plan-atmet 7s ease-in-out infinite reverse; }
.programmpruefung { animation:pruefung-schwebt 6s ease-in-out infinite; }
.programmfortschritt { transform-origin:left; animation:fortschritt-waechst 5s ease-in-out infinite; }
.zertifikatpapier { animation:zertifikat-schwebt 8s ease-in-out infinite; }
.nahaufnahme .workshopbild { overflow:hidden; }
.nahaufnahme .workshopbild>img { animation:bild-atmet 10s ease-in-out infinite; }
.portrait img { animation:bild-atmet 12s ease-in-out infinite; }
.portrait { overflow:hidden; }
.preiskarte { animation:angebot-licht 7s ease-in-out infinite!important; }
.paket-plan { animation:paket-links 7s ease-in-out infinite; }
.paket-check { animation:paket-mitte 8s ease-in-out infinite; }
.paket-urkunde { animation:paket-rechts 7s ease-in-out infinite; }
.paket-browser { animation:plan-atmet 8s ease-in-out infinite; }
.naechste-schritte li { transition:background .4s; }
.naechste-schritte li>span { animation:schritt-leuchtet 9s ease-in-out infinite; animation-delay:calc(var(--folge,0) * 3s); }
.branchenschutz { background:radial-gradient(ellipse at 20% 20%,#f9f7df,transparent 55%),#e9eee3; background-size:150% 150%; animation:hintergrund-atmet 12s ease-in-out infinite; }
@keyframes plan-atmet { 0%,100% {transform:translateY(0) rotate(-5deg)} 50% {transform:translateY(-10px) rotate(-2deg)} }
@keyframes entwurf-schwebt { 0%,100% {transform:translateY(0) rotate(6deg)} 50% {transform:translateY(12px) rotate(3deg)} }
@keyframes pruefung-schwebt { 0%,100% {transform:translateY(0) rotate(4deg)} 50% {transform:translateY(-9px) rotate(1deg)} }
@keyframes fortschritt-waechst { 0%,100% {transform:scaleX(.35)} 55%,80% {transform:scaleX(1)} }
@keyframes zertifikat-schwebt { 0%,100% {transform:translateY(0) rotate(-3deg) rotateY(-4deg)} 50% {transform:translateY(-10px) rotate(-1deg) rotateY(3deg)} }
@keyframes bild-atmet { 0%,100% {transform:scale(1)} 50% {transform:scale(1.035)} }
@keyframes angebot-licht { 0%,100% {box-shadow:0 15px 45px #48613c10} 50% {box-shadow:0 22px 55px #48613c2b} }
@keyframes paket-links { 0%,100% {transform:translateY(0) rotate(-8deg)} 50% {transform:translateY(-8px) rotate(-12deg)} }
@keyframes paket-mitte { 0%,100% {transform:translateY(0) rotate(-1deg)} 50% {transform:translateY(-13px) rotate(2deg)} }
@keyframes paket-rechts { 0%,100% {transform:translateY(0) rotate(7deg)} 50% {transform:translateY(-7px) rotate(11deg)} }
@keyframes schritt-leuchtet { 0%,32%,100% {color:#a1c6b4;transform:translateX(0)} 12%,22% {color:#fff1ca;transform:translateX(4px)} }
@keyframes hintergrund-atmet { 0%,100% {background-position:0 0} 50% {background-position:100% 60%} }
.bewegung-bereit .bewegungszone:not(.zone-aktiv) :is(.programmzettel,.programmbild>img,.programmpruefung,.programmfortschritt,.zertifikatpapier,.workshopbild>img,.portrait img,.preiskarte,.paketblatt,.paket-browser,.naechste-schritte li>span),.bewegung-bereit .branchenschutz:not(.zone-aktiv) { animation-play-state:paused!important; }
@media(max-width:1050px) {
 .textvergleich { height:650px; }
 .textvergleich .textkarte { padding:22px; }
 .textvergleich h4 { font-size:25px; }
 .textvergleich .textkarte p { font-size:13px; }
 .textzustand strong { font-size:24px; }
}
@media(max-width:760px) {
 .vergleich-schalter { gap:8px; }
 .vergleich-schalter button { font-size:20px; padding:13px; }
 .vergleich-schalter button span { font-size:10px; }
 .textvergleich { height:630px; }
 .textbeispiel-wahl { left:14px; right:14px; gap:4px; }
 .textbeispiel-wahl button { font-size:9px; }
 .textvergleich .textkarte { inset:102px 14px 43px; padding:22px; }
 .textvergleich h4 { font-size:26px; }
 .textvergleich .textzustand { align-items:flex-start; flex-direction:column; }
 .textzustand strong { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) {
 .schaufenster .fenster { translate:0 0; opacity:1; }
 .textvergleich .text-vorher { display:block; }
 .textvergleich .text-nachher { opacity:0; }
 .branchenkarte { translate:0 0!important; }
}
.branchenkarte { transition:opacity .65s ease,transform .75s var(--bewegung-kurve),background .8s,border-color .8s,box-shadow .8s,translate .8s!important; }
@media(prefers-reduced-motion:reduce) {
 .bewegungszone,.bewegungszone * { animation:none!important; transition:none!important; }
 .textvergleich { height:auto; padding:108px 14px 40px; }
 .textvergleich .textkarte { position:relative; inset:auto; opacity:1!important; margin-bottom:14px; }
}

/* ===== aus version08.css ===== */
/* Mit KI entwickelt. Für Menschen gemacht. */
.projektgalerie .werkstattkopf { align-items:baseline; flex-wrap:wrap; gap:5px 12px; }
.projektgalerie .werkstattkopf > span:first-child { font-size:10px; letter-spacing:.08em; }
.projektgalerie .werkstattkopf .statuspunkt { padding:0; border:0; background:none; color:var(--gruen); font-family:var(--serif); font-style:italic; font-size:18px; }

/* Der bestehende Webseiten-Check, eingebettet in die neue Gestaltung. */
.webseiten-check { background:#e8eee7; border-bottom:1px solid #d8e0d5; }
.check-raster { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,88px); align-items:start; }
.check-einleitung { position:sticky; top:130px; }
.check-einleitung h2 { font-size:clamp(34px,3.6vw,54px); line-height:1.1; letter-spacing:-.045em; margin:20px 0 26px; }
.check-einleitung h2 em { color:var(--gruen); }
.check-einleitung > p:not(.etikett) { max-width:420px; color:#4c6155; }
.check-einleitung .check-versprechen { color:var(--tinte); margin:30px 0; }
.check-einleitung .textlink { font-size:13px; }
.check-karte { background:#fffefb; padding:clamp(22px,3vw,42px); border:1px solid #d7dfd2; border-radius:18px; box-shadow:0 20px 70px #173d2c0a; scroll-margin-top:110px; min-width:0; }
.check-kopf { display:flex; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.05em; }
.check-kopf span:first-child { color:var(--gruen); text-transform:uppercase; font-weight:650; }
.check-kopf span:last-child { color:var(--grau); }
.check-fortschritt { display:block; width:100%; height:4px; margin:16px 0 28px; border:0; border-radius:4px; overflow:hidden; appearance:none; background:#e7ece3; accent-color:var(--gruen); }
.check-fortschritt::-webkit-progress-bar { background:#e7ece3; }
.check-fortschritt::-webkit-progress-value { background:var(--gruen); }
.check-fortschritt::-moz-progress-bar { background:var(--gruen); }
.check-karte h3 { margin:0 0 24px; font-size:clamp(23px,2.1vw,30px); line-height:1.25; letter-spacing:-.025em; font-weight:550; }
.check-karte h3:focus { outline:none; }
.check-optionen { display:grid; gap:10px; }
.check-optionen button { display:flex; align-items:center; gap:16px; width:100%; border:1px solid #dce3d6; background:#fafbf7; border-radius:9px; padding:16px; text-align:left; color:var(--tinte); font-size:14px; line-height:1.5; transition:background .18s,border-color .18s,transform .18s; }
.check-nummer { font-size:11px; color:#768777; flex-shrink:0; }
.check-optionen button:hover, .check-optionen button[aria-pressed="true"] { background:#e9f1e7; border-color:#749478; transform:translateX(3px); }
.check-bedienung { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:24px; font-size:12px; color:var(--grau); }
.check-bedienung button { padding:0; border:0; background:none; color:var(--gruen); text-decoration:underline; text-underline-offset:4px; }
.check-karte h4 { font-size:20px; font-weight:550; line-height:1.3; margin:28px 0 16px; }
.check-karte > p { font-size:15px; }
.check-schwerpunkt { padding:16px 20px; background:#eef3e9; border-left:3px solid var(--gruen); }
.check-schwerpunkt strong { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.check-ergebnisse { padding-left:22px; font-size:14px; }
.check-ergebnisse li { padding:14px 0 14px 8px; border-bottom:1px solid #e5e9df; }
.check-ergebnisse li::marker { color:var(--gruen); font-weight:600; }
.check-naechsterschritt { margin-top:30px; padding-top:4px; }
.check-naechsterschritt p { font-size:14px; }
.check-naechsterschritt .knopf { font-size:14px; text-align:center; }
.check-naechsterschritt .check-datenschutz { font-size:11px; color:var(--grau); margin:16px 0 0; }
@media (max-width:1100px) and (min-width:761px) { .kopf nav { gap:14px; }.kopf nav>a:not(.knopf) { font-size:11px; } }
@media (max-width:760px) {
  .check-raster { grid-template-columns:1fr; gap:30px; }
  .check-einleitung { position:static; }
  .check-einleitung h2 { font-size:38px; }
  .check-karte { padding:24px 20px; }
  .check-karte h3 { font-size:23px; }
  .check-optionen button { padding:14px 12px; gap:12px; font-size:14px; }
  .projektgalerie .werkstattkopf .statuspunkt { font-size:14px; }
  .projektgalerie .werkstattkopf > span:first-child { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) { .check-optionen button { transition:none; } }

.check-sichtbar .kontaktleiste { display:none!important; }

/* ===== aus version13.css ===== */
/* Mehr Inhalt, klar gegliedert und mit gleichbleibender Höhe beim Projektwechsel. */
.projektbuehne .projekttext { min-height:770px; padding:30px; }
.projekttext h3 { font-size:30px; margin:14px 0 16px; }
.projekttext #projekt-beschreibung { font-size:14px; line-height:1.65; margin:0 0 22px; }
.projektdetails { margin-bottom:24px; }
.projektdetails section + section { margin-top:22px; padding-top:20px; border-top:1px solid var(--linie); }
.projektdetails h4 { font-size:10px; line-height:1.4; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--gruen); margin:0 0 11px; }
.projektdetails ul { padding:0 0 0 16px; margin:0; }
.projektdetails li { font-size:13px; line-height:1.65; padding-left:3px; }
.projektdetails li + li { margin-top:9px; }
.projektdetails li::marker { color:#82957c; }
.projekttext .projektstand { margin-top:18px; }
@media(min-width:761px) and (max-width:1100px) {
 .projektbuehne { grid-template-columns:minmax(0,1.2fr) minmax(310px,1fr); }
 .projektbuehne .projekttext { padding:24px; min-height:820px; }
}
@media(max-width:760px) {
 .projektbuehne .projekttext { min-height:730px; padding:26px; }
 .projekttext h3 { font-size:28px; }
 .projektdetails li { font-size:14px; }
}
@media(max-width:390px) { .projektbuehne .projekttext { min-height:850px; padding:24px; } }

/* ===== aus version15.css ===== */
/* Manuelle Navigation direkt unter der Vorschau, ohne Vergrößerungsfunktion. */
.referenzleinwand { flex-direction:column; justify-content:center; }
.referenzbrowser { flex-shrink:0; margin:0 auto; }
.projektbild { cursor:default; }
.referenznavigation { display:flex; justify-content:space-between; gap:14px; width:100%; max-width:640px; margin:15px auto 0; }
.referenznavigation button { min-height:44px; padding:10px 24px; border:1px solid #bac9b7; border-radius:6px; background:#fafbf6; color:var(--tinte); font-size:13px; font-weight:550; }
.referenznavigation button:last-child { background:var(--gruen); border-color:var(--gruen); color:#fff; }
.referenznavigation button:hover { box-shadow:0 3px 12px #23452a18; }
@media(max-width:760px) { .referenznavigation button { flex:1; } }

/* Die schwebende Kontaktleiste darf die neue Navigation nicht überdecken. */
.referenz-sichtbar .kontaktleiste { display:none!important; }

/* ===== aus version17.css ===== */
/* Vorher links, Nachher rechts. Beide Motive stehen unverzerrt auf derselben Fläche. */
.vergleichsbild { max-width:620px; }
.vergleich-wechsel { --trennposition:50%; aspect-ratio:1; background:#faf9f5; isolation:isolate; }
.vergleich-ebene { background-size:100% 100%; background-position:center; }
.vergleich-alt { background-image:url('assets/vergleich-vorher-1254.avif'); }
.vergleich-neu { background-image:url('assets/vergleich-nachher-1254.avif'); opacity:1; clip-path:inset(0 0 0 var(--trennposition)); }
.vergleich-trennlinie { position:absolute; z-index:2; inset-block:0; left:var(--trennposition); width:3px; transform:translateX(-50%); background:white; box-shadow:0 0 5px #17372f55; pointer-events:none; }
.vergleich-griff { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:52px; height:52px; background:var(--gruen); border:3px solid white; border-radius:50%; color:white; box-shadow:0 4px 20px #14332644; font:500 29px/1 Arial,sans-serif; letter-spacing:0; word-spacing:6px; padding:0; white-space:nowrap; }
.vergleich-regler { position:absolute; z-index:3; inset-block:0; left:-22px; width:calc(100% + 44px); height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; appearance:none; background:transparent; }
.vergleich-regler::-webkit-slider-thumb { appearance:none; width:44px; height:44px; }
.vergleich-regler::-moz-range-thumb { width:44px; height:44px; border:0; }
.vergleich-wechsel:has(.vergleich-regler:focus-visible) { outline:3px solid var(--orange); outline-offset:5px; }
.vergleich-wechsel:has(.vergleich-regler:focus-visible) .vergleich-griff { background:var(--orange-dunkel); }
.vergleich-bedienung { display:flex; gap:20px; align-items:center; justify-content:space-between; margin-top:20px; }
.vergleich-bedienung p { margin:0; color:var(--grau); font-size:12px; line-height:1.6; }
.vergleich-bedienung button { border:1px solid #becaba; border-radius:5px; background:#fff9; color:var(--tinte); padding:10px 16px; font-size:12px; flex-shrink:0; min-height:44px; }
@media(max-width:500px) { .vergleich-griff { width:44px; height:44px; font-size:24px; } .vergleich-bedienung { gap:12px; } .vergleich-bedienung p { font-size:11px; } }

/* Die schwebenden Elemente lassen die Bildfläche und ihre Bedienung frei. */
.vergleich-sichtbar .kontaktleiste { display:none!important; }

/* ===== aus version18.css ===== */
/* Kurs, Lernziel und Nutzen stehen im ersten Blick. Einheitliche Schriftfamilie. */
.einstieg { padding-top:48px; }
.einstiegtext { max-width:1060px; }
.einstiegtext h1 { font-size:clamp(40px,4.65vw,66px); line-height:1.08; margin:20px 0 22px; }
.einstiegtext .hero-label { font-size:14px; font-weight:600; letter-spacing:.07em; }
.einstiegtext .hero-beschreibung { max-width:790px; margin-bottom:16px; }
.einstiegtext .hero-ergebnis { font-size:16px; line-height:1.6; margin:0 auto 20px; color:#203b33; }
.einstiegtext .hero-sichtbarkeit { max-width:790px; margin:0 auto 24px; font-size:16px; line-height:1.6; color:#203b33; }
.hero-sichtbarkeit strong { font-weight:600; }
.hero-sichtbarkeit a { white-space:nowrap; text-underline-offset:4px; }
.einstiegtext .hero-erstgespraech { font-size:13px; line-height:1.6; margin:11px 0 0; }
.einstiegtext .hero-exklusiv { font-size:13px; line-height:1.6; margin:15px 15px 0; }
#sichtbarkeit .abschnittkopf > p:last-child { max-width:790px; }
.sichtbarkeit-motivation { max-width:760px; margin:30px auto 20px; text-align:center; }
#sichtbarkeit > .textlink { display:table; margin:0 auto; }
@media(max-width:760px) {
 .einstieg { padding-top:30px; }
 .einstiegtext h1 { font-size:clamp(34px,7.6vw,50px); letter-spacing:-.045em; }
 .einstiegtext .hero-label { font-size:12px; letter-spacing:.04em; }
 .einstiegtext .hero-beschreibung,.einstiegtext .hero-ergebnis,.einstiegtext .hero-sichtbarkeit { font-size:15px; line-height:1.55; }
 .einstiegtext .hero-ergebnis br { display:none; }
 .einstiegtext .hero-exklusiv { font-size:12px; }
 .einstiegtext .hauptaktion { max-width:100%; font-size:14px; padding:18px 16px; }
 .einstiegtext .hero-erstgespraech { font-size:12px; }
}

/* ===== aus version20.css ===== */
/* Kompakter Einstieg: Kurs, persönliche Begleitung und drei Vorteile. */
.einstiegtext h1 { font-size:clamp(34px,4vw,56px); }
.einstiegtext .hero-beschreibung { max-width:740px; margin-bottom:20px; }
.hero-highlights { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 26px; margin:0 auto 20px; padding:0; list-style:none; font-size:15px; font-weight:600; color:#203b33; }
.hero-highlights li { display:flex; align-items:baseline; gap:8px; }
.hero-highlights span { color:#315f50; }
.einstiegtext .hero-sichtbarkeit { max-width:680px; font-size:15px; line-height:1.6; margin-bottom:24px; }
.hero-sichtbarkeit a { font-weight:600; }
.praxisbegleitung { padding-block:48px 56px; border-bottom:1px solid #d7dfd8; }
.praxis-einleitung { max-width:780px; }
.praxis-einleitung h2 { font-size:clamp(28px,3vw,40px); line-height:1.15; letter-spacing:-.035em; margin:16px 0; }
.praxis-einleitung > p:last-child { font-size:17px; line-height:1.7; color:#536159; }
.praxis-vorteile { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:30px; }
.praxis-vorteile article { border-top:1px solid #b6c5bb; padding-top:22px; }
.praxis-vorteile h3 { font-size:20px; line-height:1.3; margin:0 0 12px; }
.praxis-vorteile p { font-size:16px; line-height:1.65; margin:0; color:#536159; }
@media(max-width:760px) {
 .einstiegtext h1 { font-size:clamp(30px,7.6vw,50px); margin:18px 0; }
 .einstiegtext .hero-beschreibung { margin-bottom:16px; }
 .hero-highlights { display:grid; width:fit-content; text-align:left; gap:9px; font-size:14px; margin-bottom:18px; }
 .einstiegtext .hero-sichtbarkeit { font-size:14px; margin-bottom:20px; }
 .einstiegtext .hero-erstgespraech { max-width:300px; margin:10px auto 0; }
 .praxisbegleitung { padding-block:34px 40px; }
 .praxis-einleitung > p:last-child { font-size:16px; }
 .praxis-vorteile { grid-template-columns:1fr; gap:22px; margin-top:24px; }
}

/* ===== aus version21.css ===== */
/* Kopf und Seiteninhalt teilen sich dieselbe linke und rechte Flucht. */
.kopf { padding-inline:max(48px,calc((100% - 1192px) / 2)); }
/* Navigation unterhalb der Bühne: Vorschau und Text nutzen dieselbe Höhe. */
@media(min-width:761px) {
 .projektbuehne { overflow:visible; margin-bottom:74px; }
 .referenzleinwand { position:relative; padding:0; align-items:stretch; justify-content:stretch; min-height:0; }
 .referenzbrowser { display:flex; flex-direction:column; flex:1; min-height:0; max-width:none; margin:0; border:0; border-radius:12px 0 0 12px; box-shadow:none; }
 .referenzbrowser-kopf { flex-shrink:0; }
 .laufende-referenz .projektbild { flex:1; height:0; min-height:0; aspect-ratio:auto; }
 .laufende-referenz #projekt-bild { position:absolute; inset:0; width:100%; height:auto; }
 .referenznavigation { position:absolute; top:100%; left:0; width:100%; max-width:none; margin:15px 0 0; }
}
@media(max-width:1000px) { .kopf { padding-inline:28px; } }
@media(max-width:760px) {
 .kopf { padding-inline:20px; }
 .referenznavigation { max-width:none; margin-top:15px; }
}

/* ===== aus version22.css ===== */
/* Beide Textfassungen untereinander im selben Fenster. */
.textvergleich { height:auto; min-height:0; padding:20px 24px; background:#fffefa; }
.textvergleich::before { display:none; }
.textvergleich .werkstattkopf { position:static; margin:0 0 18px; }
.textvergleich .textbeispiel-wahl { position:static; margin:0 0 22px; }
.textvergleich .textkarte { position:static; inset:auto; display:block; opacity:1; transform:none; padding:0; margin:0; border:0; border-radius:0; background:none; box-shadow:none; }
.textvergleich .text-vorher { padding-bottom:24px; border-bottom:1px solid #dce2d7; }
.textvergleich .text-nachher { padding-top:24px; }
.textvergleich .textzustand { padding:0; border:0; flex-direction:row; align-items:baseline; }
.textvergleich .text-vorher .textzustand strong { color:#b32d2d; }
.textvergleich .text-nachher .textzustand strong { color:#237044; }
.textvergleich h4 { font-size:24px; line-height:1.15; margin:14px 0 12px; }
.textvergleich .textkarte p { font-size:14px; line-height:1.6; }
.textvergleich .textwirkung { margin-top:12px; }
.textvergleich .text-einladung { margin-top:14px; }
.textvergleich .demohinweis { position:static; display:block; margin:20px 0 0; }
/* Beide Teile der Aussage teilen sich die bestehende kursive Serifenschrift. */
.projektgalerie .werkstattkopf > span:first-child { font-family:var(--serif); font-style:italic; font-size:18px; font-weight:400; letter-spacing:normal; color:var(--gruen); }
/* Volle Zeilenbreite für den Umfangshinweis, Aktion darunter. */
.ablaufabschluss { flex-direction:column; align-items:flex-start; gap:14px; }
.ablaufabschluss p { max-width:none; width:100%; }
@media(min-width:1101px) { .ablaufabschluss p { white-space:nowrap; } }
@media(max-width:760px) {
 .textvergleich { padding:20px; }
 .textvergleich h4 { font-size:23px; }
 .textvergleich .textbeispiel-wahl { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .projektgalerie .werkstattkopf > span:first-child { font-size:14px; }
}

/* Alle sechs Personen bleiben ohne seitlichen Beschnitt sichtbar. */
.nahaufnahme .workshopbild > img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; animation:none; }

/* Schwebende Bedienelemente verdecken keine der beiden Textfassungen. */
.textvergleich-sichtbar .kontaktleiste { display:none!important; }

/* ===== aus version26.css ===== */
/* Die beiden Fragen erhalten am Desktop jeweils eine eigene vollständige Zeile. */
.praxis-einleitung { max-width:none; }
.praxis-einleitung > p:last-child { max-width:780px; }
#praxis-titel { font-size:clamp(25px,2.8vw,40px); }
#praxis-titel > span { display:block; }
@media(min-width:761px) { #praxis-titel > span { white-space:nowrap; } }
/* Individuelle Auswertung bleibt lesbar und ohne Punktzahl. */
.check-ergebnisse li > strong { display:block; font-size:16px; }
.check-deine-antwort { display:block; margin:7px 0 8px; color:#57645b; font-size:12px; line-height:1.55; }
.check-ergebnisse li p { margin:0; font-size:14px; line-height:1.65; }
.check-karte > .check-einordnung { font-size:12px; color:#57645b; }
.check-karte > .check-deine-antwort { font-size:12px; }
.check-staerken { list-style:disc; }
@media(max-width:760px) { #praxis-titel { font-size:28px; } }

/* ===== aus version27.css ===== */
/* Zwei Wörter im Workshopvergleich farblich hervorheben. */
#praxis-titel .betonung-einsam { color:#b63e32; font-weight:inherit; }
#praxis-titel .betonung-gemeinsam { color:#20764c; font-weight:inherit; }

/* Die zwei Schlüsselwörter bewusst größer als den übrigen Satz setzen. */
#praxis-titel .betonung-einsam,#praxis-titel .betonung-gemeinsam{font-size:1.2em}
#praxis-titel{line-height:1.35}

/* ===== aus version28.css ===== */
/* Gezielte Ergänzungen: Kursrahmen und echte Arbeitsbuchseiten. */
.kursrahmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:36px;padding:28px 0;border-block:1px solid var(--linie)}
.kursrahmen strong{display:block;margin-bottom:9px;color:var(--tinte)}
.kursrahmen p{font-size:14px;line-height:1.7;margin:0}
.arbeitsbuchraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.arbeitsbuchkarte{border:1px solid var(--linie);border-radius:16px;overflow:hidden;background:#fff}
.arbeitsbuchseite{display:block;background:var(--salbei);padding:24px;text-decoration:none}
.arbeitsbuchseite img{width:100%;max-width:265px;margin:auto;box-shadow:0 8px 24px #172e2814;transition:transform .2s}
.arbeitsbuchseite:hover img{transform:translateY(-4px)}
.arbeitsbuchkarte>div{padding:26px}
.arbeitsbuchkarte .etikett{display:block;font-size:10px;margin-bottom:14px}
.arbeitsbuchkarte h3{font-size:24px;line-height:1.2;margin-bottom:16px}
.arbeitsbuchkarte p{font-size:15px;margin:0;line-height:1.65}
.arbeitsbuchaktion{text-align:center;margin-top:32px}
@media(max-width:760px){.kursrahmen,.arbeitsbuchraster{grid-template-columns:1fr}.kursrahmen{gap:20px}.arbeitsbuchkarte>div{padding:24px}.arbeitsbuchseite{padding:22px}.arbeitsbuchaktion .knopf{max-width:100%}}
@media(prefers-reduced-motion:reduce){.arbeitsbuchseite img{transition:none}.arbeitsbuchseite:hover img{transform:none}}

/* ===== aus version31.css ===== */
/* Gewünschte Textzeilen und größere Vergleichsansicht. */
.einstiegtext .hero-beschreibung{max-width:1000px}
.hero-beschreibung>span{display:block}
#vorher-nachher .vergleichsbild{width:100%;max-width:940px;margin-inline:auto}
/* Statische Screenshots vollständig anzeigen; Navigation direkt darunter. */
.standbildreferenz .referenzleinwand{padding:24px;justify-content:center;align-items:stretch;min-width:0}
.standbildreferenz .referenzbrowser{display:block;flex:none;width:100%;max-width:none;border-radius:10px;overflow:hidden}
.standbildreferenz .projektbild{display:block;flex:none;height:auto;min-height:0;aspect-ratio:1265 / 712}
.standbildreferenz #projekt-bild{position:static;display:block;width:100%;height:auto;aspect-ratio:1265 / 712;object-fit:contain;transform:none;transition:none}
.standbildreferenz .referenznavigation{position:static;width:100%;max-width:none;margin:16px 0 0}
@media(max-width:760px){.standbildreferenz .referenzleinwand{padding:16px}#vorher-nachher>.rahmen{width:calc(100% - 32px)}}

/* ===== aus version33.css ===== */
/* Hervorhebung bleibt im Satz sichtbar und klar lesbar. */
.kursrahmen strong{color:#fff}
.kursrahmen p strong{display:inline;font-weight:750;color:#fff;margin:0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.arbeitsbuchbereich .abschnittkopf p strong{font-weight:750;color:var(--tinte)}
/* Arbeitsbuchseiten mit verlinkter Großansicht. */
.arbeitsbuchkarte>.arbeitsbuchseite{padding:24px;cursor:zoom-in}
.arbeitsbuchseite img,.arbeitsbuchseite:hover img{transform:none;transition:none}
@media(max-width:760px){.arbeitsbuchkarte>.arbeitsbuchseite{padding:22px}}

.arbeitsbuch-bildhinweis{display:block;margin-top:18px;text-align:center;font-size:14px;font-weight:650;text-decoration:underline;text-underline-offset:4px;color:var(--tinte)}
a.arbeitsbuchseite:focus-visible{outline:3px solid #b9542b;outline-offset:-4px}
#arbeitsbuch-dialog{width:min(760px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--linie);border-radius:14px;color:var(--tinte);background:#faf9f5;box-shadow:0 24px 80px #0005;overflow:auto}
#arbeitsbuch-dialog::backdrop{background:#102a23cc}
.arbeitsbuch-dialogkopf{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:#faf9f5;border-bottom:1px solid var(--linie)}
#arbeitsbuch-dialogtitel{font-size:20px;line-height:1.3;margin:0;letter-spacing:normal}
#arbeitsbuch-schliessen{flex-shrink:0;min-height:44px;padding:10px 16px;border:1px solid #193f35;border-radius:6px;background:#193f35;color:#fff;font:inherit;cursor:pointer}
#arbeitsbuch-schliessen:focus-visible{outline:3px solid #b9542b;outline-offset:3px}
.arbeitsbuch-dialoginhalt{padding:20px}
#arbeitsbuch-gross{display:block;width:100%;max-width:703px;height:auto;margin:auto;box-shadow:0 4px 20px #172e2814}
html.arbeitsbuch-offen{overflow:hidden}
@media(max-width:500px){.arbeitsbuch-dialogkopf{padding:12px;gap:8px}#arbeitsbuch-dialogtitel{font-size:17px}.arbeitsbuch-dialoginhalt{padding:10px}}

/* ===== aus version36.css ===== */
/* Höhere, unverzerrte Ausschnitte der vorhandenen Webseitenaufnahmen. */
.standbildreferenz .projektbild{aspect-ratio:1 / 1}
.standbildausschnitt{position:absolute;inset:0;overflow:hidden;background:white}
.standbildteil{position:relative;overflow:hidden;width:100%}
.standbildreferenz .standbildteil img{position:absolute;left:0;width:100%;height:auto;max-width:none;transform:none;transition:none}
.standbildreferenz .referenzleinwand{justify-content:flex-start}
@media(max-width:760px){.standbildreferenz .projektbild{aspect-ratio:4 / 3}}

/* ===== aus version40.css ===== */
/* Kursformat und Termin mit deutlichem Kontrast vor der Hauptüberschrift. */
.einstiegtext .hero-label{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;max-width:100%;box-sizing:border-box;padding:14px 24px;background:#193f35;color:#fff;border-radius:10px;font-size:18px;font-weight:700;line-height:1.45;letter-spacing:.025em;box-shadow:0 5px 18px #193f351a}
.hero-label>span{display:inline-block}
.check-einleitung .check-versprechen strong{font-weight:750;color:var(--tinte)}
@media(max-width:760px){.einstiegtext .hero-label{display:flex;flex-direction:column;gap:4px;padding:13px 14px;font-size:14px;letter-spacing:.015em}.hero-label .hero-termintrenner{display:none}}

/* ===== aus version44.css ===== */
/* Klar getrennte Typografie für Kursformat und Datum. */
.einstiegtext .hero-label{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;box-shadow:none;border:0;border-radius:0;padding:0 16px;margin:0 auto 8px;color:#193f35;line-height:1.4}
.hero-label .hero-kursformat{font-size:17px;font-weight:650;letter-spacing:.09em}
.hero-label .hero-kurstermin{font-size:23px;font-weight:650;letter-spacing:.015em;color:#a34520;text-transform:none}
@media(max-width:760px){.einstiegtext .hero-label{gap:8px;padding:0;margin-bottom:5px}.hero-label .hero-kursformat{font-size:13px;letter-spacing:.055em}.hero-label .hero-kurstermin{font-size:20px}}

/* ===== aus version45.css ===== */
/* Kurs und Termin bilden einen eigenständigen, typografischen Einstieg. */
.einstiegtext .hero-label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;max-width:850px;width:100%;padding:19px 0;margin:0 auto 28px;border-top:1px solid #285c4c55;border-bottom:1px solid #285c4c55;background:none;box-shadow:none;border-radius:0;text-align:left}
.hero-label .hero-kursformat{display:flex;flex-direction:column;gap:9px;font-weight:750;letter-spacing:-.025em;line-height:1.15}
.hero-label .hero-kursname{font-size:clamp(25px,2.65vw,34px);white-space:nowrap}
.hero-label .hero-praesenz{font-size:17px;font-weight:700;letter-spacing:.19em;color:#285c4c}
.hero-label .hero-kurstermin{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding-left:32px;border-left:1px solid #a3452055;font-weight:750;color:#a34520;letter-spacing:0;line-height:1.1}
.hero-label .hero-kurstage{font-size:46px;white-space:nowrap;letter-spacing:-.04em}
.hero-label .hero-kursmonat{font-size:17px;letter-spacing:.055em;line-height:1.4;white-space:nowrap}
@media(max-width:760px){.einstiegtext .hero-label{grid-template-columns:1fr;gap:16px;max-width:440px;padding:17px 0 19px;margin-bottom:24px;text-align:center}.hero-label .hero-kursformat{gap:8px;align-items:center}.hero-label .hero-kursname{font-size:clamp(18px,5.5vw,27px);letter-spacing:-.035em}.hero-label .hero-praesenz{font-size:14px;letter-spacing:.18em}.hero-label .hero-kurstermin{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 12px;padding:0;border:0}.hero-label .hero-kurstage{font-size:32px}.hero-label .hero-kursmonat{font-size:14px;letter-spacing:.025em}}

/* ===== aus version48.css ===== */
/* Gezielt mehr Klarheit, Platz und Betonung. */
.hero-label .hero-kursname { color:#a34520; font-size:clamp(25px,2.8vw,36px); }
.einstiegtext .hero-sichtbarkeit { max-width:1000px; }
.hero-sichtbarkeit > span { display:block; }
.praxis-einleitung > p:last-child { max-width:none; }
.referenzhinweis { max-width:none; }
.check-einleitung .check-versprechen strong,.arbeitsbuchbereich .abschnittkopf p strong.betonung-kupfer { color:#a34520; }
.vergleich-bedienung { margin-top:20px; gap:20px; }
.vergleich-bedienung #vergleich-hilfe { margin:0; }
.vergleichspunkte { margin-top:80px; gap:24px; }
.vergleichspunkte > p { padding:30px 28px 34px; border:1px solid #c9d5cc; border-top:3px solid #285c4c; border-radius:12px; background:#fffefa; box-shadow:0 12px 32px #18382c08; }
.vergleichspunkte .vorteilnummer { display:block; font-size:38px; line-height:1; font-weight:600; color:#a34520; letter-spacing:-.05em; margin-bottom:28px; }
.vergleichspunkte strong { font-size:clamp(22px,2vw,28px); line-height:1.16; margin-bottom:16px; letter-spacing:-.035em; }
.vergleichspunkte span:not(.vorteilnummer) { font-size:16px; }
.vergleichspunkte > p.sichtbar:hover { transform:translateY(-6px); border-color:#285c4c; box-shadow:0 18px 38px #18382c14; }
.portrait { width:100%; border-radius:8px; }
.portrait img { border-radius:8px; }
.portrait img { width:100%; height:auto; animation:none; }
@media(min-width:1100px) { .hero-sichtbarkeit > span,.leitsatz > span { white-space:nowrap; } }
@media(min-width:1280px) { .referenzhinweis { white-space:nowrap; font-size:11px; } }
@media(max-width:760px) {
 .hero-label .hero-kursname { font-size:clamp(18px,5.5vw,27px); }
 .vergleichspunkte { margin-top:48px; gap:18px; }
 .vergleichspunkte > p { padding:26px; }
 .vergleichspunkte .vorteilnummer { margin-bottom:18px; font-size:32px; }
 .vergleich-bedienung { align-items:flex-start; }
 .referenzhinweis { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .vergleichspunkte > p.sichtbar:hover { transform:none; } }
.bewegung-pausiert .vergleichspunkte > p.sichtbar:hover { transform:none; }

/* ===== aus version53.css ===== */
/* FAQ zweispaltig; der interaktive Webseiten-Check bleibt unverändert. */
.fragenbereich { grid-template-columns:1fr; gap:40px; }
.fragenbereich > div:first-child { max-width:760px; }
.fragenbereich h2 { margin-bottom:20px; }
.fragen { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px; align-items:start; }
.fragen details { min-width:0; }
.fragen details:nth-child(2) { border-top:1px solid var(--linie); }
.fragen summary { min-height:92px; display:flex; align-items:center; }
@media(max-width:760px) {
 .fragen { grid-template-columns:1fr; }
 .fragen details:nth-child(2) { border-top:0; }
 .fragen summary { min-height:0; }
 .fragenbereich { gap:30px; }
}

/* ===== Vers.66 ===== */
/* Unsichtbar, aber für Suchmaschinen und Vorleseprogramme vorhanden. Erster Einsatz: der Punkt
   nach „mit KI“ in der Hauptüberschrift. Sichtbar würde er „KI.“ am Desktop in eine eigene
   Zeile schieben, weil die erste Zeile genau so breit ist wie der Platz. */
.nur-vorlesen { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===== Vers.67 ===== */
/* Eckdaten unter den Referenzen (2 · 6 · 25+ · Deine) in Größe, Stärke und Farbe wie das
   Kursdatum „21. & 22.“ im Hero (.hero-kurstage), Kalle 15.10.2026. Am Handy wie dort 32px. */
.eckdaten strong { font:750 46px/1.1 Werk,Arial,sans-serif; letter-spacing:-.04em; color:#a34520; }
@media(max-width:760px) { .eckdaten strong { font-size:32px; } }
/* „einsam“ und „gemeinsam“ noch fetter und größer (vorher 1.2em, Stärke wie der Satz). */
#praxis-titel .betonung-einsam,#praxis-titel .betonung-gemeinsam { font-size:1.4em; font-weight:750; }

/* Knopf „Nach oben" unten rechts (Vers.69). Gleiche Regeln in startseite.css,
   erstgespraech.css und rechtliches.css; Sichtbarkeit schaltet nach-oben.js. */
.nach-oben { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); z-index:30; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#285c4c; color:#fff; font:600 22px/1 Werk,Arial,sans-serif; text-decoration:none; box-shadow:0 8px 24px #172e2833; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s,transform .3s,visibility .3s,background-color .2s; }
.nach-oben.sichtbar { opacity:1; visibility:visible; transform:none; }
.nach-oben:hover { background:#1f4a3d; color:#fff; }
.nach-oben:focus-visible { outline:3px solid #c45d31; outline-offset:3px; }
@media(max-width:760px) { .nach-oben { width:44px; height:44px; font-size:20px; } }

/* ===== Vers.70: Schriftskala ===== */
/* Sechs feste Schriftgrößen für die ganze Seite (Kalle, 15.10.2026). Vorher standen
   allein im Text acht Größen (11–18 px) und in den Überschriften über zwanzig.
   Die Werte stehen nur hier oben in den Variablen; wer eine Stufe ändert, ändert sie
   für alle Elemente dieser Stufe. Dieselben Variablen stehen in erstgespraech.css und
   rechtliches.css.
   „!important“ nur für font-size: Die 25 zusammengeführten Einzeldateien davor setzen
   Größen mit sehr unterschiedlicher Gewichtung. So gilt die Skala sicher, ohne dass
   jede alte Regel angefasst werden muss.
   Bewusst NICHT in der Skala:
   - Hauptüberschrift h1 (Falle 14: die erste Zeile ist genau so breit wie der Platz)
   - Preis „1.490 €“ und Schriftzug „KI-WEBSEITEN-WORKSHOP“ im Hero (Blickfang groß)
   - Pfeile und Symbole (↗, ↑, ✓, ‹ ›)
   - die nachgebauten Mini-Webseiten, Unterlagen und Bildnotizen in den Illustrationen */
:root {
  --schrift-klein:13px;
  --schrift-text:17px;
  --schrift-betont:20px;
  --schrift-zwischentitel:24px;
  /* Abschnitt wächst mit der Breite (3,75 %) und bleibt so immer unter der h1,
     die mit rund 4 % wächst. Ab 1280 px fest 48 px. */
  --schrift-abschnitt:clamp(32px,3.75vw,48px);
  --schrift-blickfang:46px;
}
@media(max-width:760px) {
  :root {
    --schrift-klein:12px;
    --schrift-text:16px;
    --schrift-betont:18px;
    --schrift-zwischentitel:20px;
    --schrift-abschnitt:32px;
    --schrift-blickfang:32px;
  }
}

/* Text: alles Lesbare im Inhalt. :where() hält die Gewichtung bei null, damit die
   genaueren Regeln darunter (Klein, Betont …) gewinnen. Illustrationen ausgenommen. */
:where(main) :where(p,li,summary,blockquote,label,dd,dt,figcaption strong,.knopf,.textlink,button,.check-optionen button span):where(:not(:is(.animationsflaeche,.fenster,.galeriekarte,.referenzbrowser,.paketansicht,.programmzettel,.programmpruefung,.programmbild,.zertifikatpapier,.urkundenfuss,.bildnotiz,.schwebeschild,.vergleich-trennlinie,.vergleich-schalter,.hero-label,.preis) *)):where(:not(.hero-label,.preis,.nur-vorlesen)) { font-size:var(--schrift-text)!important; }
/* Hervorhebungen im Fließtext haben dieselbe Größe wie ihr Satz. */
:where(main) :where(p,li,summary,blockquote) > :where(strong,em,b,a,span:not([aria-hidden="true"])):where(:not(.hero-label *,.preis *)) { font-size:inherit!important; }
.sprunglink, .kopf nav>a, .kopf nav .knopf,
.projekttext a, .tagesergebnis strong, .branchenkarte strong, .kursrahmen strong,
.mitnahme, .mitnahme strong, .check-fortschritt,
.hero-label .hero-praesenz, .hero-label .hero-kursmonat { font-size:var(--schrift-text)!important; }

/* Klein: Etiketten, Hinweise, Kleingedrucktes, Fußzeile, Auswahlknöpfe. */
.hinweisleiste, .hinweisleiste :not([aria-hidden="true"]),
.etikett, .tagesetikett, .referenzhinweis, .demohinweis, .kleindruck,
.zusatzkosten, .zusatzkosten strong, .preiszusatz, .branchenschutz-hinweis,
.hero-erstgespraech, .arbeitsbuch-bildhinweis,
.fuss p, .fuss small, .fuss small time, .fuss nav a,
.check-kopf span, .check-bedienung span, .check-nummer,
.vergleich-bedienung p, .vergleich-bedienung button,
.abschluss-persoenlich p, .abschlussbegleitung .email,
.projektwahl button, .referenznavigation button, .textbeispiel-wahl button,
.projektdetails h4, .projektdetails li, .projektstand,
.tagesergebnis span, .eckdaten span, .portrait figcaption span, .dreiblicke article > span { font-size:var(--schrift-klein)!important; }
/* Kleine Tablets (761–920 px): Mit 13 px passt das Menü erst ab rund 900 px in eine
   Zeile (gemessen). Darunter dasselbe aufklappbare Menü wie am Handy; die Regeln sind
   aus dem Handy-Abschnitt übernommen. */
@media (min-width:761px) and (max-width:920px) {
  .menuschalter { display:block; border:1px solid var(--linie); border-radius:5px; background:transparent; padding:7px 12px; }
  .kopf nav { display:none; position:absolute; top:100%; left:0; right:0; padding:24px; background:var(--papier); border-bottom:1px solid var(--linie); box-shadow:0 15px 20px #142b2510; }
  .kopf nav.offen { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .kopf nav>a:not(.knopf) { padding:12px 0; }
  .kopf nav .knopf { margin-top:14px; }
  .kopf nav>a, .kopf nav .knopf { font-size:var(--schrift-text)!important; }
  .menuschalter { font-size:var(--schrift-klein)!important; }
}
/* Bis 1260 px reicht der Platz für 17 px im Menü nicht (gemessen: Menü stößt ans Logo). */
@media (max-width:1260px) and (min-width:921px) { .kopf nav>a, .kopf nav .knopf { font-size:var(--schrift-klein)!important; } }

/* Betont: Einleitungen unter Überschriften, Zitate, Leitsätze. */
.einstiegtext .hero-beschreibung, .einstiegtext .hero-beschreibung span,
.abschnittkopf > p:not(.etikett), .praxis-einleitung > p:not(.etikett),
.vergleichspunkte strong, .begleitertext blockquote, .leitsatz span { font-size:var(--schrift-betont)!important; }

/* Zwischentitel: alle h3, Leitsatz, Satz über „einsam/gemeinsam“. */
main h3, .leitsatz strong, #praxis-titel, .arbeitsbuch-dialogtitel { font-size:var(--schrift-zwischentitel)!important; }

/* Abschnitt: alle h2. Die Zeilen der Einblend-Animation erben die Größe. */
main h2:not(#praxis-titel,.arbeitsbuch-dialogtitel) { font-size:var(--schrift-abschnitt)!important; }
main :is(h2,h3) :is(.zeilenmaske,.bewegte-zeile,em) { font-size:inherit!important; }
/* „einsam“ und „gemeinsam“ eine Stufe über ihrem Satz (Kalle: fetter und größer). */
#praxis-titel .betonung-einsam, #praxis-titel .betonung-gemeinsam { font-size:var(--schrift-abschnitt)!important; }

/* h1 am Handy mindestens 34 px, damit sie nicht kleiner ist als die h2 (32 px).
   Gleich wie die bisherige Regel (7,6 % der Breite), nur mit 34 statt 30 px als
   Untergrenze. Betrifft nur Breiten unter rund 450 px; darüber bleibt die h1 wie bisher. */
@media(max-width:760px) { .einstiegtext h1 { font-size:clamp(34px,7.6vw,50px); } }

/* Blickfang: Kursdatum, Eckdaten, Aufzählungsnummern. */
.hero-label .hero-kurstage, .eckdaten strong, .vorteilnummer, .branchennummer,
.naechste-schritte li > span, .modulnummer { font-size:var(--schrift-blickfang)!important; }

/* ===== Vers.72: Videos ===== */
/* Zwei Videos auf eigenem Server (keine Fremddienste). Laden erst beim Klick
   (preload="none"), davor nur das Vorschaubild. Größen aus der Schriftskala. */
.videoabschnitt { padding-block:64px 8px; }
/* Unter dem 2. Video mehr Luft bis zum dunklen Abschnitt „Zwei Tage. Ein Projekt.“ (Kalle, Vers.74). */
.videoabschnitt.videoabschnitt-luft { padding-bottom:88px; }
@media(max-width:760px) { .videoabschnitt.videoabschnitt-luft { padding-bottom:56px; } }
.videoinnen { max-width:960px; margin-inline:auto; }
.videoabschnitt .etikett { text-align:center; margin-bottom:18px; }
.videorahmen { position:relative; margin:0; }
.videorahmen video { display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:14px; background:#172e28; box-shadow:0 18px 50px #172e2826; }
.videorahmen figcaption { margin-top:12px; text-align:center; color:var(--grau); font-size:var(--schrift-klein); }
/* Kennzeichnung „KI-generiert“ liegt sichtbar auf dem Bild, auch während das Video läuft. */
.videohinweis { position:absolute; top:12px; left:12px; z-index:1; pointer-events:none; padding:5px 11px; border-radius:999px; background:#172e28d9; color:#fff; font-size:var(--schrift-klein); font-weight:600; letter-spacing:.02em; }
/* Runder Abspiel-Knopf in der Mitte (von videos.js eingesetzt). */
.videostart { position:absolute; left:50%; top:calc(50% - 22px); width:84px; height:84px; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; justify-content:center; padding:0 0 0 6px; border:0; border-radius:50%; background:#c45d31; color:#fff; font-size:var(--schrift-zwischentitel); cursor:pointer; box-shadow:0 10px 30px #172e2855; transition:transform .25s,background-color .2s; }
.videostart:hover { background:#a34520; transform:translate(-50%,-50%) scale(1.06); }
.videostart:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.videostart[hidden] { display:none; }
/* Touch-Geräte zeigen ihre eigene Bedienung schon vor dem Abspielen (iPhone mit großem
   Abspiel-Knopf); unser Knopf wäre doppelt und deckt Text im Vorschaubild ab. Unter
   760 px auch mit Maus aus: dort sitzt er auf der Bedienleiste (Vers.74). */
@media (hover:none), (max-width:760px) { .videostart { display:none; } }
@media(max-width:760px) { .videoabschnitt { padding-block:44px 4px; } .videorahmen video { border-radius:10px; } .videohinweis { top:8px; left:8px; } .videostart { width:64px; height:64px; top:calc(50% - 16px); } }

/* ===== Vers.76 ===== */
/* Hero: Das Bildband ist breiter als der Bildschirm und wird abgeschnitten. Mit
   „overflow:hidden“ blieb der Bereich trotzdem verschiebbar (per Tastaturfokus oder
   Skript rutschte er bis 70 px zur Seite, Falle 18). „clip“ schneidet genauso ab,
   ist aber nicht verschiebbar. Ältere Browser ohne „clip“ behalten „hidden“. */
.einstieg { overflow:clip; }

/* ===== Vers.77: Abschluss der Menüleiste ===== */
/* Vorher nur eine blasse, halb durchsichtige Linie ohne Schatten; das Ende der
   Leiste verschwamm mit dem hellen Hintergrund (Kalle, 15.10.2026). Jetzt eine
   deutliche Linie und ein weicher Schatten nach unten. Gleich in startseite.css
   und erstgespraech.css, damit die Navigation auf beiden Seiten gleich aussieht. */
.kopf { border-bottom:1px solid #c5cdc1; box-shadow:0 10px 24px -14px #172e2859; }

/* ===== Vers.78 ===== */
/* Absatz unter „Alleine zu Hause einsam … gemeinsam …“ („Hier sitzt du mit maximal
   fünf weiteren Teilnehmern …“): Stufe Text statt Betont, Zeilenhöhe 28 px
   (Kalle, 15.10.2026). Am Handy greift die Textstufe mit 16 px. */
.praxis-einleitung > p:not(.etikett) { font-size:var(--schrift-text)!important; line-height:28px; }

/* ===== Vers.80: Podcast ===== */
/* KI-generierter Podcast „In 2 Tagen zur eigenen KI-Website“ vor „Deine Investition“
   (Kalle, 16.10.2026). Datei auf eigenem Server, lädt erst beim Abspielen
   (preload="none"). Kapitel-Knöpfe und Welle setzt podcast.js. Größen aus der Skala.
   Vers.82: Hinweis „KI-generierter Podcast“ und Bildunterschrift entfernt (Kalle). */
.podcastinnen { max-width:900px; }
.podcastkarte { margin:0; padding:32px; border-radius:18px; color:#fff; background:radial-gradient(ellipse at 88% 0%,#285c4c,transparent 62%),var(--tinte); box-shadow:0 24px 60px #172e2833; }
.podcastzeile { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.podcasttitel h3 { margin:0 0 8px; color:#fff; }
/* „KI-Website“ nicht am Bindestrich trennen (am Handy stand sonst „KI-“ allein am Zeilenende). */
.podcastwort { white-space:nowrap; }
.podcastmeta { color:#c3d3c9; }
.podcastmeta, .podcastkapitel .kapitelzeit { font-size:var(--schrift-klein)!important; }
/* Welle: fünf Balken, schwingen nur, solange der Podcast läuft. */
.podcastwelle { display:flex; align-items:center; gap:5px; height:48px; flex-shrink:0; }
.podcastwelle i { display:block; width:6px; height:40%; border-radius:3px; background:#e07a4b; transform-origin:center; }
.podcastwelle i:nth-child(2) { height:75%; } .podcastwelle i:nth-child(3) { height:100%; } .podcastwelle i:nth-child(4) { height:60%; } .podcastwelle i:nth-child(5) { height:30%; }
.podcastkarte.spielt .podcastwelle i { animation:podcastwelle 1.1s ease-in-out infinite; }
.podcastkarte.spielt .podcastwelle i:nth-child(2) { animation-delay:-.2s; } .podcastkarte.spielt .podcastwelle i:nth-child(3) { animation-delay:-.5s; }
.podcastkarte.spielt .podcastwelle i:nth-child(4) { animation-delay:-.8s; } .podcastkarte.spielt .podcastwelle i:nth-child(5) { animation-delay:-.35s; }
@keyframes podcastwelle { 0%,100% { transform:scaleY(.45); } 50% { transform:scaleY(1); } }
@media(prefers-reduced-motion:reduce) { .podcastkarte.spielt .podcastwelle i { animation:none; } }
.podcastkarte audio { display:block; width:100%; border-radius:999px; }
.podcastkapitel { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin:24px 0 0; padding:0; list-style:none; }
.podcastkapitel li { display:flex; margin:0; color:#e6eee8; }
.podcastkapitel button { display:flex; align-items:baseline; gap:14px; width:100%; padding:10px 14px; border:1px solid #ffffff24; border-radius:9px; background:transparent; color:#e6eee8; font:inherit; text-align:left; cursor:pointer; transition:background .2s,border-color .2s; }
.podcastkapitel button:hover { background:#ffffff14; border-color:#ffffff47; }
.podcastkapitel button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.podcastkapitel button[aria-current="true"] { background:var(--orange); border-color:var(--orange); color:#fff; }
.podcastkapitel .kapitelzeit { min-width:3.2em; color:#f0a77f; font-weight:600; font-variant-numeric:tabular-nums; }
.podcastkapitel button[aria-current="true"] .kapitelzeit { color:#fff; }
@media(max-width:760px) {
  .podcastkarte { padding:22px 18px; border-radius:14px; }
  .podcastzeile { align-items:flex-start; gap:16px; }
  .podcastwelle { height:36px; gap:4px; }
  .podcastwelle i { width:5px; }
  .podcastkapitel { grid-template-columns:1fr; }
}

/* ===== Vers.83: Bild im Podcast ===== */
/* Bild oben in der dunklen Karte (Kalle, 16.10.2026). Lädt erst beim Scrollen
   (loading="lazy"); width/height im HTML halten den Platz frei. */
.podcastbild { display:block; width:100%; height:auto; aspect-ratio:1672/941; object-fit:cover; margin-bottom:24px; border-radius:12px; background:#0f201b; }
@media(max-width:760px) { .podcastbild { margin-bottom:18px; border-radius:9px; } }