/* Approved Kosten 03: compact cream reading area and a separate right-side
   painted connection. The opening, its photograph and the footer stay intact. */
body#start.costs-sideflow {
  --costs-sideflow-ink:#153c3e;
  --costs-sideflow-line:#bc8e5745;
  --costs-sideflow-h2:32px;
}
body#start.costs-sideflow .costs-sideflow-stage {
  position:relative;
  isolation:isolate;
  margin:0;
  padding:0 0 24px;
  color:var(--costs-sideflow-ink);
  background:none;
}
body#start.costs-sideflow .costs-sideflow-art {
  position:absolute;
  z-index:-1;
  inset:-12cqw 0 0;
  pointer-events:none;
}
body#start.costs-sideflow .costs-sideflow-stage>.costs-intro-bridge,
body#start.costs-sideflow .costs-sideflow-stage>.chapters,
body#start.costs-sideflow .costs-sideflow-stage>.after-chapters {
  position:relative;
  width:84%;
  max-width:none;
  margin-left:5.5%;
  margin-right:10.5%;
  min-width:0;
  background:none;
}
/* Disable every inherited lower shore locally, including the material layers. */
body#start.costs-sideflow .costs-sideflow-stage .chapters::before,
body#start.costs-sideflow .costs-sideflow-stage .chapters::after,
body#start.costs-sideflow .costs-sideflow-stage .closing::before,
body#start.costs-sideflow .costs-sideflow-stage .closing::after,
body#start.costs-sideflow .costs-sideflow-stage .costs-rhythm-paint,
body#start.costs-sideflow .costs-sideflow-stage .costs-contact-paint,
body#start.costs-sideflow .costs-sideflow-stage .closing-kv {
  display:none;
  content:none;
  background:none;
  mask-image:none;
}
body#start.costs-sideflow .costs-sideflow-stage h2,
body#start.costs-sideflow :is(#haeufigkeit,#kontakt) h2 {
  max-width:none;
  font-size:var(--costs-sideflow-h2);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.025em;
  margin:0 0 20px;
  color:var(--costs-sideflow-ink);
}
body#start.costs-sideflow .costs-sideflow-stage p {
  font-size:16px;
  line-height:1.6;
  max-width:none;
  color:var(--costs-sideflow-ink);
}
body#start.costs-sideflow .costs-sideflow-stage p+p {margin-top:16px}
body#start.costs-sideflow .costs-sideflow-stage .eyebrow,
body#start.costs-sideflow #haeufigkeit .eyebrow {
  color:#9c572e;
  font-size:11px;
  letter-spacing:.12em;
  line-height:1.6;
  max-width:none;
  margin:0 0 11px;
}
body#start.costs-sideflow .costs-sideflow-stage .costs-intro-bridge {
  margin-top:6px;
  padding:10px 0 24px;
}
body#start.costs-sideflow .costs-intro-bridge>p {max-width:none;margin:0;line-height:1.6}
body#start.costs-sideflow .costs-sideflow-stage>.chapters {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px 4%;
  padding:0 0 32px;
  align-items:start;
}
body#start.costs-sideflow .chapters>section {
  width:auto;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
}
body#start.costs-sideflow .chapters>#ablauf {
  grid-column:1/-1;
  padding:0 0 30px;
  border-bottom:1px solid var(--costs-sideflow-line);
}
body#start.costs-sideflow #ablauf .steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  margin:0 0 26px;
  padding:0;
  list-style:none;
}
body#start.costs-sideflow #ablauf .steps li {
  position:relative;
  min-width:0;
  padding:0 0 0 40px;
  margin:0;
}
body#start.costs-sideflow #ablauf .steps li+li {
  border-left:1px solid var(--costs-sideflow-line);
  padding-left:58px;
}
body#start.costs-sideflow #ablauf .steps li::after {display:none;content:none}
body#start.costs-sideflow #ablauf .number {
  top:-2px;
  left:0;
  width:26px;
  height:32px;
  font-size:28px;
  line-height:1.2;
}
body#start.costs-sideflow #ablauf .steps li+li .number {left:18px}
body#start.costs-sideflow #ablauf .steps h3 {
  font-size:20px;
  font-weight:400;
  line-height:1.3;
  max-width:none;
  min-height:2.6em;
  margin:0 0 16px;
}
body#start.costs-sideflow #ablauf .steps p {font-size:16px;line-height:1.6;margin:0}
body#start.costs-sideflow #ablauf>p.note {
  font-size:16px;
  line-height:1.6;
  max-width:none;
  margin:0 0 16px;
  padding-left:17px;
}
body#start.costs-sideflow #ablauf>p.small {font-size:16px;line-height:1.6;margin:0}
body#start.costs-sideflow .chapters>#honorar {grid-column:1;padding:0;margin:0}
body#start.costs-sideflow .chapters>#zuschuss {
  display:block;
  grid-column:2;
  width:auto;
  max-width:none;
  min-width:0;
  margin:28px 0 0;
  padding:0 0 0 32px;
  border-top:0;
  border-left:1px solid var(--costs-sideflow-line);
}
body#start.costs-sideflow #honorar>p {font-size:16px;line-height:1.6}
body#start.costs-sideflow #honorar .fees {margin:20px 0 16px}
body#start.costs-sideflow #zuschuss>* {grid-column:auto;grid-row:auto}
body#start.costs-sideflow #zuschuss>h3 {
  font-size:28px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.025em;
  margin:0 0 20px!important;
}
body#start.costs-sideflow #zuschuss>p:not(.small) {margin:0;font-size:16px;line-height:1.6}
body#start.costs-sideflow #zuschuss>p:last-child {margin-top:18px}
body#start.costs-sideflow :is(#honorar,#zuschuss) .table-wrap {margin:20px 0 16px;width:100%;min-width:0}
body#start.costs-sideflow :is(#honorar,#zuschuss) table {font-size:15px;line-height:1.5;width:100%;table-layout:auto}
body#start.costs-sideflow :is(#honorar,#zuschuss) table :is(th,td) {padding:10px 6px;vertical-align:top;border-bottom:1px solid var(--costs-sideflow-line)}
body#start.costs-sideflow :is(#honorar,#zuschuss) table :is(th,td):first-child {padding-left:0}
body#start.costs-sideflow :is(#honorar,#zuschuss) table :is(th,td):last-child {padding-right:0}
body#start.costs-sideflow #honorar table th:first-child {width:54%}
body#start.costs-sideflow #honorar table td:nth-child(2) {width:25%;font-size:14px;white-space:normal}
body#start.costs-sideflow :is(#honorar,#zuschuss) table td:last-child,
body#start.costs-sideflow :is(#honorar,#zuschuss) tbody tr:first-child td:last-child {width:auto;font-size:16px;white-space:nowrap}
body#start.costs-sideflow :is(#honorar,#zuschuss) table thead {font-size:12px;letter-spacing:0}
body#start.costs-sideflow :is(#honorar,#zuschuss) table caption {font-size:13px;line-height:1.5;margin-bottom:11px}
body#start.costs-sideflow #honorar .support {margin:20px 0 0;padding-left:17px}
body#start.costs-sideflow #honorar .support h3 {font-size:20px;line-height:1.3;margin:0 0 8px}
body#start.costs-sideflow #honorar .support p {font-size:16px;line-height:1.6;margin:0}
body#start.costs-sideflow #honorar .fees>.small {font-size:14px;line-height:1.6}
body#start.costs-sideflow #zuschuss>p.small {font-size:14px;line-height:1.6;margin:16px 0 0!important}
body#start.costs-sideflow .costs-sideflow-stage>.after-chapters {padding:0}
body#start.costs-sideflow .after-chapters>:is(#haeufigkeit,#therapieverlauf,#rahmen,.closing) {
  position:relative;
  width:100%;
  max-width:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  background:none;
  color:var(--costs-sideflow-ink);
}
body#start.costs-sideflow .after-chapters>#haeufigkeit {
  display:block;
  padding:30px 0 32px;
  border-top:1px solid var(--costs-sideflow-line);
}
body#start.costs-sideflow #haeufigkeit .costs-rhythm-copy {
  display:grid;
  grid-template-columns:minmax(0,34fr) minmax(0,66fr);
  grid-template-rows:auto 1fr;
  column-gap:4%;
  width:100%;
  max-width:none;
  margin:0;
}
body#start.costs-sideflow #haeufigkeit .eyebrow {grid-column:1;grid-row:1}
body#start.costs-sideflow #haeufigkeit h2 {grid-column:1;grid-row:2;margin:0}
body#start.costs-sideflow #haeufigkeit .costs-rhythm-paragraphs {
  display:block;
  grid-column:2;
  grid-row:1/3;
  padding-left:32px;
  border-left:1px solid var(--costs-sideflow-line);
}
body#start.costs-sideflow #haeufigkeit .costs-rhythm-paragraphs p {font-size:16px;line-height:1.6;margin:0;max-width:none}
body#start.costs-sideflow #haeufigkeit .costs-rhythm-paragraphs p+p {margin-top:16px}
body#start.costs-sideflow .after-chapters>#therapieverlauf {padding:0 0 30px}
body#start.costs-sideflow .after-chapters>#rahmen {padding:0 0 32px}
body#start.costs-sideflow :is(#therapieverlauf,#rahmen) h2 {margin-bottom:18px}
body#start.costs-sideflow #rahmen>.note {margin:0 0 20px;padding-left:17px;max-width:none}
body#start.costs-sideflow #rahmen>.note h3 {font-size:20px;line-height:1.3;margin-bottom:8px}
body#start.costs-sideflow :is(#therapieverlauf,#rahmen) details {min-width:0;border-color:var(--costs-sideflow-line)}
body#start.costs-sideflow :is(#therapieverlauf,#rahmen) summary {font-size:16px;line-height:1.5;min-height:48px;padding:12px 0;gap:20px}
body#start.costs-sideflow :is(#therapieverlauf,#rahmen) details>div {max-width:none;height:auto;max-height:none;overflow:visible;padding:0 0 18px}
body#start.costs-sideflow :is(#therapieverlauf,#rahmen) details>div p {font-size:16px;line-height:1.6}
body#start.costs-sideflow :is(#therapieverlauf,#rahmen) details>div p+p {margin-top:16px}
body#start.costs-sideflow .after-chapters>.closing {padding:12px 0 26px}
body#start.costs-sideflow .after-chapters>.closing>#kontakt {
  display:grid;
  grid-template-columns:minmax(0,53fr) minmax(0,47fr);
  gap:6%;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}
body#start.costs-sideflow #kontakt .costs-contact-main>p:not(.small) {max-width:none;font-size:16px;line-height:1.6}
body#start.costs-sideflow #kontakt address {margin:18px 0 8px;gap:5px}
body#start.costs-sideflow #kontakt address a {font-size:24px;line-height:1.4}
body#start.costs-sideflow #kontakt address span {font-size:16px;line-height:1.6;margin-top:3px}
body#start.costs-sideflow #kontakt .button {margin-top:8px;max-width:100%;white-space:normal}
body#start.costs-sideflow #kontakt .costs-contact-main>.small {font-size:14px;line-height:1.6;max-width:none;margin-top:12px!important}
body#start.costs-sideflow #kontakt .costs-contact-meta {align-self:start;margin-top:60px;padding:0 0 0 32px;border-left:1px solid var(--costs-sideflow-line);border-top:0}
body#start.costs-sideflow #kontakt .costs-contact-meta>p:not(.small) {font-size:16px;line-height:1.6;max-width:none;margin:0 0 20px}
body#start.costs-sideflow #kontakt .costs-contact-meta>.small {font-size:14px;line-height:1.6;max-width:none;margin:0}

@media(max-width:1100px) {
  body#start.costs-sideflow {--costs-sideflow-h2:28px}
  body#start.costs-sideflow #ablauf .steps {gap:20px}
  body#start.costs-sideflow #ablauf .steps li+li {padding-left:44px}
  body#start.costs-sideflow #ablauf .steps li+li .number {left:10px}
  body#start.costs-sideflow #ablauf .steps h3 {font-size:19px}
  body#start.costs-sideflow .chapters>#zuschuss {padding-left:24px;margin-top:28px}
  body#start.costs-sideflow #zuschuss>h3 {font-size:26px}
  body#start.costs-sideflow #haeufigkeit .costs-rhythm-paragraphs {padding-left:24px}
  body#start.costs-sideflow #kontakt .costs-contact-meta {padding-left:24px;margin-top:55px}
  body#start.costs-sideflow #kontakt address a {font-size:22px}
}
@media(max-width:850px) {
  body#start.costs-sideflow .costs-sideflow-stage>.chapters {grid-template-columns:minmax(0,1fr);row-gap:28px;padding-bottom:28px}
  body#start.costs-sideflow .chapters>#ablauf {grid-column:1;padding-bottom:26px}
  body#start.costs-sideflow #ablauf .steps {grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:24px}
  body#start.costs-sideflow #ablauf .steps li,
  body#start.costs-sideflow #ablauf .steps li:last-child,
  body#start.costs-sideflow #ablauf .steps li+li {padding:0 0 0 40px;border-left:0}
  body#start.costs-sideflow #ablauf .steps li+li .number {left:0}
  body#start.costs-sideflow #ablauf .steps h3 {font-size:20px;min-height:0;margin-bottom:10px}
  body#start.costs-sideflow .chapters>#honorar {grid-column:1}
  body#start.costs-sideflow .chapters>#zuschuss {grid-column:1;margin:0;padding:26px 0 0;border-left:0;border-top:1px solid var(--costs-sideflow-line)}
  body#start.costs-sideflow #zuschuss>h3 {font-size:26px}
  body#start.costs-sideflow #haeufigkeit .costs-rhythm-copy {grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:0}
  body#start.costs-sideflow #haeufigkeit .eyebrow,
  body#start.costs-sideflow #haeufigkeit h2,
  body#start.costs-sideflow #haeufigkeit .costs-rhythm-paragraphs {grid-column:auto;grid-row:auto}
  body#start.costs-sideflow #haeufigkeit h2 {margin-bottom:20px}
  body#start.costs-sideflow #haeufigkeit .costs-rhythm-paragraphs {border-left:0;padding-left:0}
  body#start.costs-sideflow .after-chapters>.closing>#kontakt {grid-template-columns:minmax(0,1fr);gap:24px}
  body#start.costs-sideflow #kontakt .costs-contact-meta {margin:0;padding:22px 0 0;border-left:0;border-top:1px solid var(--costs-sideflow-line)}
}
@media(max-width:600px) {
  body#start.costs-sideflow {--costs-sideflow-h2:26px}
  body#start.costs-sideflow .costs-sideflow-stage {padding-bottom:18px}
  body#start.costs-sideflow .costs-sideflow-stage>.costs-intro-bridge,
  body#start.costs-sideflow .costs-sideflow-stage>.chapters,
  body#start.costs-sideflow .costs-sideflow-stage>.after-chapters {width:calc(100% - 56px);margin-left:20px;margin-right:36px}
  body#start.costs-sideflow .costs-sideflow-stage .costs-intro-bridge {padding-top:8px;padding-bottom:22px;margin-top:4px}
  body#start.costs-sideflow .costs-sideflow-stage h2 {margin-bottom:18px}
  body#start.costs-sideflow #ablauf .steps li,
  body#start.costs-sideflow #ablauf .steps li:last-child,
  body#start.costs-sideflow #ablauf .steps li+li {padding-left:34px}
  body#start.costs-sideflow #ablauf .number {font-size:25px;width:24px}
  body#start.costs-sideflow #ablauf .steps h3 {font-size:20px}
  body#start.costs-sideflow :is(#honorar,#zuschuss) table {font-size:14px;line-height:1.5}
  body#start.costs-sideflow :is(#honorar,#zuschuss) table :is(th,td) {padding:10px 4px}
  body#start.costs-sideflow #honorar table th:first-child {width:51%;padding-left:0;overflow-wrap:anywhere}
  body#start.costs-sideflow #honorar table td:nth-child(2) {width:25%;font-size:14px;white-space:normal}
  body#start.costs-sideflow :is(#honorar,#zuschuss) table td:last-child,
  body#start.costs-sideflow :is(#honorar,#zuschuss) tbody tr:first-child td:last-child {font-size:16px;padding-right:0}
  body#start.costs-sideflow #zuschuss>h3 {font-size:26px}
  body#start.costs-sideflow .after-chapters>#haeufigkeit {padding:26px 0 28px}
  body#start.costs-sideflow .after-chapters>#therapieverlauf {padding-bottom:28px}
  body#start.costs-sideflow .after-chapters>#rahmen {padding-bottom:26px}
  body#start.costs-sideflow :is(#therapieverlauf,#rahmen) summary {gap:14px;min-height:48px}
  body#start.costs-sideflow :is(#therapieverlauf,#rahmen) details>div,
  body#start.costs-sideflow #kontakt address {overflow-wrap:anywhere}
  body#start.costs-sideflow #kontakt address a {font-size:21px}
  body#start.costs-sideflow .after-chapters>.closing {padding:10px 0 22px}
}

/* Keep the original opening above its full-bleed artwork without hiding it. */
body#start.costs-sideflow main{z-index:auto}
body#start.costs-sideflow .costs-sideflow-stage{z-index:1}
body#start.costs-sideflow #honorar>.eyebrow{font-size:11px;line-height:1.6}
