@font-face {
  font-family: 'icomoon';
  src: url(..//fonts/21e18006fffc74942ec3.eot?aq6cq);
  src: url(..//fonts/21e18006fffc74942ec3.eot?aq6cq#iefix) format('embedded-opentype'), url(..//fonts/e3f073b5dca094c94df8.ttf?aq6cq) format('truetype'), url(..//fonts/0debe7c0b0841a9c1998.woff?aq6cq) format('woff'), url(..//fonts/29d05f578fbee2016c4d.svg?aq6cq#icomoon) format('svg');
  font-weight: normal;
  font-style: normal;
  }
  .icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 2.5rem;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-up02 {
    transform: translateY(40%);
  }
  .icon-up02:before {
    content: "\e902";
  }
  .icon-down02:before {
    content: "\e903";
  }
  .icon-options:before {
    content: "\e900";
  }
  .icon-search:before {
    content: "\e901";
  }
  .icon-arrow_down {
    padding-bottom: 2rem;
  }
  .icon-arrow_down:before {
    content: "\e904";
    color: #E3000F;
    font-size: 6rem;
  }
  .icon-up:before {
    content: "\e906";
  }
  .icon-cog:before {
    content: "\e905";
  }
  .icon-download:before {
    content: "\e908";
  }
  .icon-download02 .path1:before {
    content: "\e909";
  }
  .icon-download02 .path2:before {
    content: "\e90a";
    margin-left: -0.99609375em;
  }
  @font-face {
    font-family: "Sparkasse";
    src: url(..//fonts/4ec2cd5c9ef36fff38ec.eot);
    src: url(..//fonts/4ec2cd5c9ef36fff38ec.eot?#iefix) format('embedded-opentype'), url(..//fonts/40e8b3d963f10af9c670.woff) format("woff"), url(..//fonts/03d63c5abd0e6189b853.otf) format("opentype"), url(..//fonts/bba3d5f6c75027628ee1.svg) format('svg');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: "Sparkasse";
    src: url(..//fonts/6ff036bffa6fd3a38256.eot);
    src: url(..//fonts/6ff036bffa6fd3a38256.eot?#iefix) format('embedded-opentype'), url(..//fonts/0c4efbc829e23bbcf5ad.woff) format("woff"), url(..//fonts/12eee6d853bd836d25fe.otf) format("opentype"), url(..//fonts/4f7f839e83da75c86ded.svg) format('svg');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: "Sparkasse";
    src: url(..//fonts/e555ad5336aa7cafce18.eot);
    src: url(..//fonts/e555ad5336aa7cafce18.eot?#iefix) format('embedded-opentype'), url(..//fonts/9c435794938e4c5dc522.woff) format("woff"), url(..//fonts/0d37118350ba10ef3f36.otf) format("opentype"), url(..//fonts/346a943c045c524d9a04.svg) format('svg');
    font-weight: 400;
    font-style: italic;
  }
  @font-face {
    font-family: "Sparkasse";
    src: url(..//fonts/fc47e41b28bca46f1048.eot);
    src: url(..//fonts/fc47e41b28bca46f1048.eot?#iefix) format('embedded-opentype'), url(..//fonts/f14dbe32530c5c47256c.woff) format("woff"), url(..//fonts/b6cb5f52f5f97a11ee19.otf) format("opentype");
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: "Sparkasse";
    src: url(..//fonts/a2949a401b269eb438f5.eot);
    src: url(..//fonts/a2949a401b269eb438f5.eot?#iefix) format('embedded-opentype'), url(..//fonts/6c80429e41fce8f39c0d.woff) format("woff"), url(..//fonts/6da482d8a47e31cf9717.otf) format("opentype"), url(..//fonts/697a651035a1a633c421.svg) format('svg');
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: "Sparkasse";
    src: url(..//fonts/8c3ea82ea732893ce553.eot);
    src: url(..//fonts/8c3ea82ea732893ce553.eot?#iefix) format('embedded-opentype'), url(..//fonts/0b7decbbdf4ff8af3219.woff) format("woff"), url(..//fonts/c023984e98b31120c3b5.otf) format("opentype"), url(..//fonts/f36ca0904bdaa1a66105.svg) format('svg');
    font-weight: bold;
    font-style: italic;
  }
  @font-face {
    font-family: "Sparkasse Head";
    src: url(..//fonts/517907c0d162203eb93c.eot);
    src: url(..//fonts/517907c0d162203eb93c.eot?#iefix) format('embedded-opentype'), url(..//fonts/498393e2b21e60e2e072.woff) format("woff"), url(..//fonts/332bd8d655a384b311cf.otf) format("opentype"), url(..//fonts/3ae798db3699cb88884c.svg) format('svg');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Sparkasse Serif";
    src: url(..//fonts/6033d4ce1e653ef29b05.eot);
    src: url(..//fonts/6033d4ce1e653ef29b05.eot?#iefix) format('embedded-opentype'), url(..//fonts/2f0db7fe9a26d312d63f.woff) format("woff"), url(..//fonts/9418b401799d36f040f8.otf) format("opentype"), url(..//fonts/1a2abb3596e1e58db75f.svg) format('svg');
    font-weight: normal;
    font-style: normal;
  }
  .headline {
    font-family: 'Sparkasse Head', sans-serif;
    hyphens: none;
  }
  /*.headline.bold {
    font-weight: unset;
  }*/
  .headline.h1 {
    font-size: 2rem;
    margin-bottom: 1.2rem;
  }
  .headline.h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
  }
  .headline.h3 {
    font-family: 'Sparkasse', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
  }
  .headline + .headline {
    margin-top: 0;
  }
  .headline.h1:first-child,
  .headline.h2:first-child,
  .headline.h3:first-child {
    margin-top: 0;
  }
  @media all and (min-width: 768px) {
    .headline {
      margin-top: unset;
    }
    .headline.h1 {
      font-size: 3rem;
      margin-bottom: 2rem;
    }
    .headline.h2 {
      font-size: 2.25rem;
      margin-bottom: 1.25rem;
      margin-top: 2rem;
    }
    .headline.h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      margin-top: 1.5rem;
    }
  }
  strong,
  .bold {
    font-weight: bold !important;
  }
  .red {
    color: #E3000F !important;
  }
  a {
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: black;
    transition: color ease-in-out 250ms;
  }
  a > .icon-arrow_down {
    display: inline-block;
    transform: rotate(-90deg);
    padding: 0;
    margin-left: 0.5rem;
    transition: color ease-in-out 250ms;
  }
  a > .icon-arrow_down::before {
    color: black;
    font-size: 2rem;
  }
  a:hover {
    color: #E3000F;
    transition: color ease-in-out 250ms;
    text-decoration: none;
  }
  a:hover > .icon-arrow_down::before {
    color: #E3000F;
    transition: color ease-in-out 250ms;
  }
  a:hover > .icon-chevron-right {
    filter: invert(21%) sepia(98%) saturate(6943%) hue-rotate(8deg) brightness(100%) contrast(114%);
    transition: ease-in-out 250ms;
  }
  @media all and (min-width: 768px) {
    a {
      margin-top: unset;
      font-size: 1.1rem;
    }
  }
  p {
    font-size: 1rem;
    font-weight: normal;
  }
  p.small {
    font-size: 0.9rem;
  }
  @media all and (min-width: 768px) {
    p {
      font-size: 1.1rem;
    }
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-row-gap: 2rem;
    margin-bottom: 4rem;
  }
  .grid .col-6 {
    grid-column-end: span 12;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .grid .col-6 img {
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
  }
  .grid .col-6 img.person {
    aspect-ratio: 1/1;
    max-height: unset;
  }
  .grid .col-3 {
    grid-column-end: span 12;
  }
  .grid .col-4 {
    grid-column-end: span 12;
  }
  .grid .col-8 {
    grid-column-end: span 12;
  }
/* grid 12 test */
  .grid .col-12 {
    grid-column-end: span 12;
  }
  .grid.blockquote {
    margin-bottom: 1rem;
  }
  .grid.blockquote blockquote {
    width: 100%;
  }
  .grid.blockquote blockquote::before {
    margin-top: 0;
  }
  @media all and (min-width: 768px) {
    .grid {
      margin-bottom: 6rem;
      grid-column-gap: 2rem;
      grid-row-gap: 4rem;
    }
/* grid 12 test */
    .grid .col-12 {
      grid-column-end: span 12;
    }
    .grid .col-6 {
      grid-column-end: span 6;
    }
    .grid .col-6 img {
      max-height: 30rem;
    }
    .grid .col-4 {
      grid-column-end: span 4;
    }
    .grid .col-8 {
      grid-column-end: span 8;
    }
    .grid .col-3 {
      grid-column-end: span 3;
    }
    .grid.blockquote {
      margin-bottom: 2rem;
    }
    .grid.blockquote > .col-6:last-child {
      grid-column-start: 8;
    }
  }
  @media all and (min-width: 1094px) {
    .grid .offset {
      position: relative;
      width: calc(100% + (100vw - 1092px) / 2 + 1rem);
    }
    .grid .offset + div {
      grid-column-start: 8;
      grid-column-end: span 5;
    }
    .grid .offset-left {
      right: calc((100vw - 1092px) / 2 + 1rem);
    }
    .grid .offset-right {
      right: 0;
      grid-column-start: 8;
    }
  }
  @media all and (min-width: 1920px) {
    .grid .offset-left {
      position: relative;
      left: calc((1920px - 1092px + 2 * 1rem)/-2);
      width: calc(100% + (1920px - 1092px + 2 * 1rem)/2);
    }
    .grid .offset-left + div {
      grid-column-start: 8;
      grid-column-end: span 5;
    }
    .grid .offset-right {
      right: unset;
      width: calc(100% + (1920px - 1092px + 2 * 1rem)/2);
    }
  }
  .highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #E3000F;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    hyphens: none;
  }
  .highlight img {
    height: 8rem;
  }
  .highlight .h3 {
    font-family: 'Sparkasse Head', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .highlight p {
    font-size: 1rem;
    width: 70%;
  }
  .highlight:after {
    content: '';
    width: 70%;
    height: 1px;
    background-color: #E3000F;
    position: absolute;
    top: -2.5rem;
  }
  .highlight:first-child:after {
    display: none;
  }
  @media all and (min-width: 768px) {
    .highlight {
      margin-bottom: 0;
    }
    .highlight:after {
      width: 1px;
      height: 120%;
      left: calc(100% + 1rem);
    }
    .highlight:last-child:after {
      display: none;
    }
    .highlight:first-child:after {
      display: block;
    }
  }
  .downloads .grid {
    gap: 1rem;
  }
  .downloads .download {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    background-color: #F0F0F0;
    padding: 2rem;
    align-items: center;
    transition: background-color ease-in-out 250ms;
  }
  .downloads .download > img {
    width: 3.5rem;
    margin-right: 2rem;
  }
  .downloads .download .download-caption .h3 {
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 0.75rem;
    margin-top: 0;
  }
  .downloads .download .download-caption p {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-size: 1rem;
  }
  .downloads .download .download-caption .icon {
    font-size: unset;
    padding: 0;
    margin-right: 0.5rem;
  }
  .downloads .download .download-caption .icon::before {
    font-size: 1.5rem;
    color: black;
  }
  .downloads .download:hover,
  .downloads .download:focus {
    background-color: #e2e2e2;
    transition: background-color ease-in-out 250ms;
    text-decoration: none;
  }
  .downloads .download:hover .headline,
  .downloads .download:focus .headline,
  .downloads .download:hover span,
  .downloads .download:focus span,
  .downloads .download:hover .icon::before,
  .downloads .download:focus .icon::before,
  .downloads .download:hover p,
  .downloads .download:focus p {
    color: black;
    transition: color ease-in-out 250ms;
  }
  @media all and (min-width: 768px) {
    .downloads .grid {
      gap: 1.5rem;
    }
  }
  @media all and (min-width: 1920px) {
    .downloads .grid {
      width: 75%;
      margin-right: auto;
    }
  }
  .story > .headline {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 1.1rem;
  }
  .story.col-6 img {
    display: block;
    height: 12rem;
    object-fit: cover;
    margin-bottom: 2rem;
    object-position: top;
  }
  .story.col-6 {
    justify-content: flex-start;
  }
  .story a {
    margin-top: 1rem;
  }
  .story p {
    margin-bottom: 0;
  }
  .story-large div:first-child {
    order: 1;
  }
  .story-large .h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
  }
  @media all and (min-width: 768px) {
    .story > .headline {
      font-size: 2.2rem;
    }
    .story-large div:first-child {
      order: unset;
    }
    .story img {
      margin-bottom: 2rem;
    }
    .story p {
      margin-bottom: 1.5rem;
    }
    .story.col-6 img {
      height: 18rem;
    }
    .story a {
      margin-top: auto;
    }
  }
  header a {
    display: flex;
    align-items: center;
    color: white;
    transition: color ease-in-out 250ms;
  }
  header a:hover {
    color: #d9d9d9;
    transition: color ease-in-out 250ms;
  }
  header section {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  header .menu {
    position: relative;
    top: 0;
    left: 0;
    background-color: #E3000F;
    width: 100%;
  }
  header .menu nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 1rem auto 1rem auto;
  }
  header .menu nav > a {
    display: flex;
    justify-content: center;
    width: 50%;
    margin: 0.5rem 0;
    font-weight: bold;
    font-size: 1.15rem;
  }
  header .menu nav > a.languageswitch {
    font-size: 1.4rem;
    font-weight: lighter;
    text-transform: uppercase;
    width: 100%;
  }
  header .menu nav > a:last-child {
    padding-right: unset;
  }
  header .menu .menu-inner {
    display: flex;
    flex-direction: column;
    max-width: 1092px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }
  header .menu .logo {
    min-width: 16rem;
    max-width: 20rem;
    width: 100%;
    margin: 1rem auto 0 auto;
  }
  header .menu .logo > img {
    width: 100%;
    position: relative;
  }
  header .stage {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(69d5f24f6a4fc6bd9dcb.jpg); /* Ausgetauscht */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 200px;
    position: relative;
  }
  header .stage > .headline {
    text-align: left;
  }
  header .stage:after {
    content: '';
    background-color: black;
    opacity: 0.35;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  @media all and (min-width: 768px) {
    header .stage {
      min-height: 600px;
    }
  }
  header .container {
    display: flex;
  }
  header .h2 {
    font-weight: bold;
  }
  header .h3 {
    font-size: 1.5rem;
  }
  @media all and (min-width: 480px) {
    header .menu nav {
      width: 70%;
    }
  }
  @media all and (min-width: 768px) {
    header .menu .logo {
      width: 35%;
      margin: unset;
    }
    header .menu .logo > img {
      width: 100%;
    }
    header .menu nav {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
      margin: 1.5rem 0 1.5rem auto;
      height: 3rem;
      max-height: 3rem;
    }
    header .menu nav > a {
      width: unset;
      padding-right: 1.5rem;
    }
    header .menu .menu-inner {
      flex-direction: row;
    }
    header .menu nav a.languageswitch {
      order: 2;
      width: auto;
      padding-right: 0;
      padding-left: 4rem;
    }
  }
  @media all and (min-width: 1138px) {
    header .menu .logo {
      width: 25%;
    }
    header .menu .logo > img {
      width: 100%;
      position: relative;
      left: -23px;
    }
    header .menu nav a {
      padding-right: 3rem;
    }
    header .menu nav a.languageswitch {
      padding-left: 6rem;
    }
    header .cite-offset {
      align-items: flex-start;
    }
    header .cite-offset .headline:first-child {
      margin-top: 4rem;
    }
  }
  footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 15px;
    min-height: 6rem;
    color: white;
    background-color: #444444;
  }
  footer .topscroll {
    cursor: pointer;
  }
  footer a,
  footer:link,
  footer a:hover,
  footer a:visited {
    color: white;
    text-decoration: none;
  }
  footer a {
    color: white;
    margin: 0.5rem 0;
    font-weight: 300;
    transition: color ease-in-out 250ms;
  }
  footer a:first-child {
    margin-top: 1rem;
  }
  footer a:hover {
    color: #bfbfbf;
    transition: color ease-in-out 250ms;
  }
  footer .inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
  footer .inner > *,
  footer .inner .icon {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  footer .topscroll {
    margin-bottom: 1rem;
    margin-top: 1rem;
    transition: color ease-in-out 250ms;
  }
  footer .topscroll:hover {
    color: #bfbfbf;
    transition: color ease-in-out 250ms;
  }
  @media all and (min-width: 768px) {
    footer .inner {
      flex-direction: row;
    }
    footer .topscroll {
      margin-left: auto;
    }
    footer a:first-child {
      margin-top: 0.5rem;
    }
  }
  .article p {
    font-weight: lighter;
    text-align: left;
    margin-bottom: 1rem;
  }
  .article p.bold {
    font-weight: normal;
    margin-bottom: 0;
  }
  .article section.intro {
    background-color: transparent;
  }
  .article section.intro .h2 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .article section.intro .h3 {
    font-size: 1.2rem;
    font-weight: lighter;
    margin-bottom: 1.5rem;
    margin-top: 0;
  }
  .article section.intro p {
    font-size: 1.2rem;
    font-weight: lighter;
  }
  .article header section:last-child {
    margin-bottom: 4rem;
  }
  .article header .h3 {
    font-weight: lighter;
  }
  .article .back {
    width: min(1092px, 100%);
  }
  .article .back a {
    font-weight: lighter;
    font-size: 1rem;
    color: black;
    margin-top: 1rem;
    margin-bottom: 3rem;
  }
  .article .back a > .icon-chevron-right {
    display: inline-block;
    transform: rotate(180deg);
    padding: 0;
    margin-right: 1rem;
  }
  .article .back a:hover {
    color: #E3000F;
    transition: color ease-in-out 250ms;
  }
  .article .back a:hover > .icon-arrow_down::before {
    color: #E3000F;
    transition: color ease-in-out 250ms;
  }
  .article .interview .bold {
    margin-bottom: 0;
    margin-top: 1.5rem;
  }
  .article .interview .bold:first-child {
    margin-top: 0;
  }
  .article section > p:last-child {
    margin-bottom: 0;
  }
  @media all and (min-width: 768px) {
    .article section.intro .h2 {
      font-size: 2.65rem;
    }
    .article section.intro .h3 {
      font-size: 1.75rem;
      margin-bottom: 3rem;
    }
    .article section.intro p {
      font-size: 1.6rem;
    }
    .article p.bold {
      margin-bottom: 0;
    }
    .article .interview .bold {
      margin-bottom: 0;
      margin-top: 2rem;
    }
  }
  .stripe {
    display: block;
    content: '';
    height: 1px;
    width: 50%;
    background-color: red;
    margin: 2rem 0 1rem 0;
    max-width: 15rem;
  }
  blockquote {
    color: #E3000F;
    border: none;
    padding: 0;
    margin-bottom: 2rem;
  }
  blockquote::before {
    display: block;
    content: '';
    height: 1px;
    width: 50%;
    background-color: red;
    margin: 2rem 0 1rem 0;
    max-width: 15rem;
  }
  blockquote + figcaption {
    color: #E3000F;
    font-size: 1rem;
    margin-top: 1rem;
  }
  blockquote strong {
    margin: 0;
  }
  @media all and (min-width: 768px) {
    blockquote {
      font-size: 2.25rem;
      width: 75%;
      margin-bottom: 2rem;
    }
    blockquote figcaption {
      font-size: 1.2rem;
      margin-top: 2.5rem;
    }
    blockquote::before {
      margin: 3rem 0 1rem 0;
    }
  }
  figure blockquote {
    margin-bottom: 1rem;
  }
  .grid blockquote::before {
    margin-top: 0;
  }
  .time {
    margin-bottom: 2rem;
  }
  .time p {
    color: #E3000F;
  }
  .time::before {
    display: block;
    content: '';
    height: 1px;
    width: 50%;
    background-color: red;
    margin: 2rem 0 1rem 0;
    max-width: 15rem;
  }
  .time:first-child::before {
    margin-top: 0;
  }
  @media all and (min-width: 768px) {
    .time::before {
      margin: 2rem 0 0 0;
    }
  }
  .order-form {
    font-size: 1.25rem;
    max-width: 1092px;
    padding: 3rem 1rem;
    min-height: 70vh;
  }
  .order-form form button {
    background: #E3000F;
    transition: background-color ease-in-out 250ms;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
  }
  .order-form form button:hover {
    background: #ca0000;
    transition: background-color ease-in-out 250ms;
  }
  .order-form form input {
    width: 100%;
  }
  .order-form form span {
    padding: 0;
  }
  .order-form form .container {
    padding: 0;
    width: unset;
  }
  .order-form form .container > .row {
    margin-bottom: 1rem;
  }
  .order-form form .captcha .capbox {
    background-color: #BBBBBB;
    background-image: linear-gradient(#BBBBBB, #9E9E9E);
    border: #ff0000 0px solid;
    border-width: 2px 2px 2px 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
    padding: 5px 8px 5px 8px;
    border-radius: 4px 4px 4px 4px;
  }
  .order-form form .captcha .capbox-inner {
    font: bold 12px arial, sans-serif;
    color: #000000;
    background-color: #E3E3E3;
    margin: 0px auto 0px auto;
    padding: 3px 10px 5px 10px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
  }
  .order-form form .captcha #CaptchaDiv {
    color: #000000;
    font: normal 25px Impact, Charcoal, arial, sans-serif;
    font-style: italic;
    text-align: center;
    vertical-align: middle;
    background-color: #FFFFFF;
    user-select: none;
    display: inline-block;
    padding: 3px 14px 3px 8px;
    margin-right: 4px;
    border-radius: 4px;
  }
  .order-form form .captcha #CaptchaInput {
    border: #ff0000 2px solid;
    margin: 3px 0px 1px 0px;
    width: 105px;
    border-radius: 7px;
  }
  .order-form form .dsgv-contact {
    font-size: 1.25rem;
    font-weight: lighter;
  }
  .order-form form .dsgv-contact p {
    font-weight: lighter;
  }
  .order-form form .text input {
    width: unset;
    cursor: pointer;
  }
  .order-form form .text > a {
    display: inline-block;
    font-size: 1.25rem;
  }
  .order-form form > section {
    padding: 0;
    margin-bottom: 2rem;
  }
  .order-form .row > div {
    margin-bottom: 4rem;
  }
  .order-form.intro {
    margin-bottom: 0;
  }
  @media all and (min-width: 768px) {
    .order-form {
      min-height: calc(100vh - 12rem);
    }
    .order-form form input {
      width: 70%;
    }
    .order-form form button {
      float: right;
    }
  }
  html {
    font-size: 16px;
  }
  body {
    font-family: "Sparkasse", sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    font-size: 1rem;
    hyphens: auto;
  }
  body .handwriting {
    max-width: 25rem;
    margin-bottom: 1rem;
  }
  body .handwriting:last-child {
    margin-top: 2rem;
    margin-bottom: 0;
    max-width: 18rem;
  }
  @media all and (min-width: 768px) {
    body {
      margin-top: unset;
    }
    body .handwriting {
      width: 45%;
    }
    body.article p {
      width: 85%;
    }
    body > .container {
      padding: 6rem 1rem;
    }
  }
  article {
    width: 100%;
  }
  @media all and (min-width: 1920px) {
    article section:first-child {
      padding-top: 2rem;
    }
  }
  section {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    margin: 0 auto 3rem auto;
    width: 100%;
    max-width: 1092px;
  }
  section p + .grid {
    margin-top: 2rem;
  }
  section:first-child {
    padding-top: 1.5rem;
  }
  section:last-child {
    margin-bottom: 6rem;
  }
  section.fullwidth {
    background-color: #f0f0f0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: unset;
    padding: 2rem 0;
  }
  section.fullwidth .fullwidth-inner {
    padding: 0 1rem;
    margin: 0 auto 4rem auto;
    width: 100%;
    max-width: 1092px;
  }
  section.interview p {
    margin-bottom: 1rem;
  }
  section p:first-child {
    margin-top: 0;
  }
  section p:last-child,
  section .grid:last-child {
    margin-bottom: 0;
  }
  @media all and (min-width: 1092px) {
    section {
      margin: 0 auto 4rem auto;
    }
    section.fullwidth {
      padding: 4rem 0;
    }
    section p + .grid {
      margin-top: 4rem;
    }
  }
  .preamble h2 {
    font-size: 1.6rem;
  }
  .preamble a {
    margin-top: 1rem;
  }
  @media all and (min-width: 768px) {
    .preamble h2 {
      font-size: 2.4rem;
    }
  }
  img + figcaption {
    font-size: 0.9rem;
    padding: 0.5rem 0;
  }
  @media all and (min-width: 768px) {
    img + figcaption {
      padding: 0.5rem 0;
    }
  }
  @media all and (min-width: 768px) {
    .offset img + figcaption {
      padding: 0.5rem 2rem;
    }
  }
  .icon-chevron-right {
    content: url(https://finanzbericht.dsgv.de/assets/1f0e8a7097bc6853006f.png);
    height: 1.75rem;
    margin-left: 0.5rem;
    filter: none;
    transition: ease-in-out 250ms;
  }
  .intro > .headline.h1 {
    margin-top: 4rem;
  }
  .stage .h1.headline {
    color: white;
    z-index: 10;
    width: 50%;
    margin-top: 1rem;
  }

/*******************   L I N K S   *******************/

a.external {
  color: #E3000F;
  font-weight: bold;
}
a.external:before {

/*    display: inline-block;
  position: absolute;
  content: "";
  height: 10px;
  width: 18px;
  background-position: left center;
  background-repeat: no-repeat;
  background-image: url(assets/icon_arrow.png);
  transform: rotate(45deg);
  left: -24px;
  background-size: contain;
  top: 5px;
  padding-left: 24px;
*/

transform: rotate(-45deg);
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url('icon_arrow.png');
  background-size: contain;
  height: 10px;
  width: 18px;
  content: ""; /* Hier dein Icon oder Unicode-Symbol */
  margin-right: 8px; /* Abstand zwischen Icon und Text */
  font-size: 1em; /* Icon-Größe anpassen */
  display: inline-block;
  vertical-align: middle; /* Ausrichtung zum Text */
}


/* Responsive Darstellung STORY mit Bild links */
@media (max-width: 767px) {
  .story-large {
    display: flex;
  }
  .image-top {
    flex-direction: column-reverse;
  }
}
/* region page css */
.icon-number .highlight p {
  text-align: center !important;
}

/* =====================================================================
   Hauptmenü: sticky auf allen Seiten + Mobile-Hamburger (< 800px)
   Hinweis: bundle.js (Webpack/style-loader) injiziert zur Laufzeit eine
   Kopie der Original-Menue-CSS als inline <style> NACH dieser Datei und
   gewinnt damit bei gleicher Spezifitaet. Deshalb sind alle Overrides hier
   mit "body" vorangestellt -> hoehere Spezifitaet, schlaegt die Inline-Kopie.
   ===================================================================== */

/* Fixe rote Leiste – bleibt beim Scrollen oben, auf allen Auflösungen */
body header .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
}

/* Inhalt nach unten versetzen, damit nichts unter der fixen Leiste liegt.
   --menu-h wird per assets/menu.js auf die echte Leistenhöhe gesetzt;
   die Fallback-Werte greifen, falls JS (noch) nicht geladen ist. */
html body {
  padding-top: var(--menu-h, 7rem);
}

/* Hamburger-Button – nur < 768px sichtbar */
body header .menu .menu-toggle {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  position: relative;
  z-index: 2002;
  flex: 0 0 auto;
}
body header .menu .menu-toggle > span {
  display: block;
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
body header .menu .menu-toggle > span:nth-child(1) { top: 0.85rem; }
body header .menu .menu-toggle > span:nth-child(2) { top: 1.30rem; }
body header .menu .menu-toggle > span:nth-child(3) { top: 1.75rem; }
/* Offener Zustand: Hamburger morpht zu X (oberste/unterste Linie gedreht,
   mittlere ausgeblendet). Toggle bleibt oben rechts sichtbar. */
body header .menu.is-open .menu-toggle > span:nth-child(1) { top: 1.30rem; transform: rotate(45deg); }
body header .menu.is-open .menu-toggle > span:nth-child(2) { opacity: 0; }
body header .menu.is-open .menu-toggle > span:nth-child(3) { top: 1.30rem; transform: rotate(-45deg); }

@media (max-width: 799px) {
  html body { padding-top: var(--menu-h, 3.75rem); }

  /* Kompakte Leiste: Logo links, Hamburger rechts */
  body header .menu .menu-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }
  body header .menu .logo {
    min-width: 0;
    /* Responsive Logogroesse: skaliert mit der Viewport-Breite,
       min 7rem / max 16rem; immer linksbuendig. */
    width: clamp(7rem, 44vw, 16rem);
    /* nie breiter als Viewport minus Hamburger+Abstaende -> Logo laeuft
       nie unter den Burger, bleibt immer komplett sichtbar. */
    max-width: calc(100vw - 5rem);
    margin: 0;
    position: relative;
    z-index: 2002; /* Logo bleibt über dem Overlay sichtbar */
  }
  body header .menu .logo > img {
    width: 100%;        /* fuellt den Logo-Link */
    height: auto;       /* Seitenverhaeltnis bleibt -> nie verzerrt/beschnitten */
    max-height: none;
    display: block;
    left: auto;         /* evtl. Desktop-Versatz (left:-23px) zuruecksetzen */
  }
  body header .menu .menu-toggle { display: block; }

  /* Navigation als rotes Vollbild-Overlay: deckt beim Aufklappen die GANZE
     Seite ab (inset:0). Logo + X liegen per z-index (2002) darueber.
     Wichtig: KEIN transform auf dem Overlay – ein eigener Compositor-Layer
     wuerde sonst den X-Button verdecken; Ein-/Ausblenden nur per opacity. */
  body header .menu nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background-color: #E3000F; /* roter Hintergrund beim Aufklappen */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    z-index: 2001;             /* verdeckt die Seite; Logo/X (2002) bleiben darueber */
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  body header .menu.is-open nav {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease;
  }
  body header .menu nav > a,
  body header .menu nav > a.languageswitch {
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    text-align: center;
  }

  /* Seite nicht scrollen, solange das Menü offen ist */
  html body.menu-open { overflow: hidden; }
}

/* =====================================================================
   Abgerundete Ecke(n), 30px Radius. Gilt fuer Content-Fotos, .person-
   Portraits UND Kaesten mit Rahmen (generische border-radius-Utility,
   wirkt auf <img> wie auf <div>):
   - linksbuendig  -> Ecke oben rechts
   - rechtsbuendig -> Ecke unten links
   - vollbreit/zentriert -> beide Design-Ecken (oben rechts + unten links)
   - -full-alt -> andere Diagonale (oben links + unten rechts)
   Klassen werden je Element im Markup gesetzt.
   ===================================================================== */
.img-corner-left     { border-top-right-radius: 30px; }
.img-corner-right    { border-bottom-left-radius: 30px; }
.img-corner-full     { border-top-right-radius: 30px; border-bottom-left-radius: 30px; }
.img-corner-full-alt { border-top-left-radius: 30px; border-bottom-right-radius: 30px; }

/* Beige gefuellter Inhaltskasten (Alternative zum roten Rahmen-Kasten).
   Farbe lt. finalem Design (2026-06-16): warmes Creme #feecd3. */
.box-beige { background-color: #feecd3; }

/* =====================================================================
   Dekorativer Viertelkreis-Bogen an Kasten-Ecken.
   - Unabhaengig von Fuellung/Rahmen: auf JEDEM Kasten nutzbar
     (roter Rahmen-Kasten, .box-beige, ...).
   - Pro Ecke einzeln setzbar, mehrere pro Kasten kombinierbar.
   Markup:
     <div class="... box-corner-arc">          <- Host (position: relative)
       <span class="corner-arc corner-arc--bl"></span>
       ... Inhalt ...
     </div>

   KONZENTRISCHES MODELL (2026-06-17): Der Bogen ist konzentrisch zur
   abgerundeten Kasten-Ecke -> die Luecke ist rundherum GLEICHMAESSIG.
   Frueher (offset-Modell) sass der Bogen diagonal versetzt und die Luecke
   war ungleichmaessig (eng an den Schenkeln, weit an der Diagonale).

   Drei Stellschrauben (per Klasse/Inline-Style ueberschreibbar):
     --arc-radius  Eckradius des Kastens, an dem der Bogen sitzt (= .img-corner Radius, 30px)
     --arc-gap     gleichmaessiger Abstand zwischen Ecke und Bogen-Innenkante
     --arc-stroke  Strichstaerke des Bogens
   Abgeleitet (nicht direkt setzen): --arc-size = Aussenradius = radius + gap + stroke.
     --arc-color   Farbe
   ===================================================================== */
.box-corner-arc {
  position: relative;
  /* Design-Werte (2026-06-29, an PDF vermessen): Bogen umschliesst die Ecke
     konzentrisch. Gegenueber Variante D duenner (8px statt 18px) und weiter
     von der Eckenrundung weg (16px Luecke statt 6px) -> groesserer, feinerer
     Bogen wie im PDF. Eckradius (30px) wie ueberall sonst.
     Zentral hier gesetzt -> von .corner-arc-Kindern geerbt; pro Kasten per
     Inline-Style weiterhin ueberschreibbar. */
  --arc-radius: 30px;
  --arc-gap: 16px;
  --arc-stroke: 8px;
  --arc-color: #E3000F;   /* PDF-Rot (HKS 13) statt default 'red' (#FF0000) */
  /* Aussenradius des Bogens = Eckradius + Luecke + Strichstaerke (konzentrisch) */
  --arc-size: calc(var(--arc-radius, 30px) + var(--arc-gap, 6px) + var(--arc-stroke, 18px));
}

.corner-arc {
  position: absolute;
  width: var(--arc-size);
  height: var(--arc-size);
  border: 0 solid var(--arc-color, red);
  pointer-events: none;
}
/* Positionierung: der Krümmungs-Mittelpunkt des Bogens (= seine der Ecke
   gegenueberliegende Span-Ecke) faellt mit dem Mittelpunkt der Kasten-
   Eckenrundung zusammen (--arc-radius vom Rand nach innen). Dadurch konzentrisch. */
.corner-arc--tl {
  top: calc(var(--arc-radius, 30px) - var(--arc-size)); left: calc(var(--arc-radius, 30px) - var(--arc-size));
  border-top-width: var(--arc-stroke, 18px); border-left-width: var(--arc-stroke, 18px);
  border-top-left-radius: var(--arc-size);
}
.corner-arc--tr {
  top: calc(var(--arc-radius, 30px) - var(--arc-size)); right: calc(var(--arc-radius, 30px) - var(--arc-size));
  border-top-width: var(--arc-stroke, 18px); border-right-width: var(--arc-stroke, 18px);
  border-top-right-radius: var(--arc-size);
}
.corner-arc--bl {
  bottom: calc(var(--arc-radius, 30px) - var(--arc-size)); left: calc(var(--arc-radius, 30px) - var(--arc-size));
  border-bottom-width: var(--arc-stroke, 18px); border-left-width: var(--arc-stroke, 18px);
  border-bottom-left-radius: var(--arc-size);
}
.corner-arc--br {
  bottom: calc(var(--arc-radius, 30px) - var(--arc-size)); right: calc(var(--arc-radius, 30px) - var(--arc-size));
  border-bottom-width: var(--arc-stroke, 18px); border-right-width: var(--arc-stroke, 18px);
  border-bottom-right-radius: var(--arc-size);
}

/* Downloads/Archiv: graue Kaesten analog zu den Bildern runden.
   2-spaltiges Grid -> linke Spalte (ungerade) Ecke oben rechts,
   rechte Spalte (gerade) Ecke unten links. */
.downloads .download:nth-child(odd)  { border-top-right-radius: 30px; }
.downloads .download:nth-child(even) { border-bottom-left-radius: 30px; }

/* Unter 768px: Story-Teaser-Bilder (Finanzpaket, Wirkung, BioObst, Gemeinsam)
   einheitlich im 3:2-Format zeigen -> bei 430px Viewport (Bild 398px breit)
   ergibt das 398x265px. height:auto + aspect-ratio 3/2 leitet die Hoehe aus der
   Breite ab; object-fit:cover sorgt dafuer, dass auch das breitere BioObst-Bild
   (Quelle 1008x551, ~16:9) dieselbe Hoehe erreicht statt nur 398x218px.
   Die 3:2-Quellen (2400x1600) bleiben dabei unbeschnitten. */
@media (max-width: 767px) {
  .grid .col-6.story img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}
/* Sprungmarken (Navi-Anker): unter der fixen Menueleiste stoppen, damit der Ziel-Block (Titel/Icons/Bild/Kasten) sichtbar direkt unter dem Header-Menue erscheint. --menu-h = echte Leistenhoehe via assets/menu.js, Fallback 7rem. */
html {
  scroll-padding-top: var(--menu-h, 7rem);
}

.img-corner-tl { border-top-left-radius: 30px; }
.box-corner-arc > img { display: block; }

@media all and (min-width: 768px) {
  body blockquote { font-size: 1.5rem; }
}


/* Zitat-Portraits: einheitliche quadratische Maske (~400px), Bild bleibt NEBEN dem Text */
.grid .col-4 { min-width: 0; }
.grid .col-4 .box-corner-arc { width: 100%; max-width: 400px; }
.grid .col-4 img.person {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  object-fit: cover;
}


/* Bogen-Deko an PDF angepasst: dicker + groesser + mehr Abstand; getrennt fuer grosse Hero- vs. kleine Zitat-Bilder */


/* =====================================================================
   AZUBI-MODUL (PDF S.13-15): roter Rahmen-Kasten mit grosser runder Ecke,
   freigestelltes Portraet ueber der Rahmen-Oberkante, innen roter Kicker
   (Name + Rolle), rotes Zitat und darunter einspaltiger Fliesstext.
   - Default            -> Foto oben rechts (S.13 Mick, S.14 Marie)
   - .azubi-box--photo-left -> Foto oben links (S.15 Christoph)
   Das ueberstehende Foto wird per float + negativem margin-top realisiert;
   der Text umfliesst es oben und laeuft darunter voll weiter (wie im PDF).
   ===================================================================== */
.azubi-box {
  position: relative;
  border: 1.5px solid #E3000F;
  border-top-right-radius: 30px;      /* gleiche Rundung wie ueberall sonst (img-corner = 30px) */
  padding: 1.75rem 1.5rem;
  margin-top: 10.5rem;                /* Platz fuer das vollstaendig oberhalb sitzende Foto */
}
.azubi-box__photo {
  /* Quadratisches Foto (350x350) sitzt mit der UNTERKANTE buendig auf der Rahmen-Oberkante:
     bottom: 100% -> Unterkante exakt an der oberen Kastenkante, Foto komplett oberhalb. */
  position: absolute;
  bottom: 100%;
  right: 1rem;
  height: 170px;
  width: auto;
}
.azubi-box__kicker {
  color: #E3000F;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 0 0.9rem 0;
}
.azubi-box__quote {
  /* PDF: SparkasseLt-Regular 15pt rot -> 'Sparkasse' Light (300), nicht Head */
  font-family: 'Sparkasse', sans-serif;
  font-weight: 300;
  color: #E3000F;
  font-size: 1.25rem;
  line-height: 1.18;
  margin: 0 0 1.5rem 0;
  padding: 0;
  border: none;
  hyphens: none;
}
.azubi-box p {                        /* article-Regel (p auf 85%) im Kasten aufheben */
  width: auto !important;
}
.azubi-box p:last-child { margin-bottom: 0; }

/* Variante: Foto oben links (S.15 Christoph) */
.azubi-box--photo-left {
  border-top-right-radius: 0;
  border-top-left-radius: 30px;
}
.azubi-box--photo-left .azubi-box__photo {
  right: auto;
  left: 1rem;
}

@media all and (min-width: 768px) {
  .azubi-box {
    border-top-right-radius: 30px;
    padding: 2.5rem;
    margin-top: 13rem;
  }
  .azubi-box--photo-left {
    border-top-right-radius: 0;
    border-top-left-radius: 30px;
  }
  .azubi-box__photo {
    height: 200px;
    bottom: 100%;
    right: 2rem;
  }
  .azubi-box--photo-left .azubi-box__photo {
    right: auto;
    left: 2rem;
  }
  .azubi-box__kicker { font-size: 0.95rem; }
  .azubi-box__quote  { font-size: 1.5rem; line-height: 1.15; }
}


/* =====================================================================
   SCHRIFTEN IDENTISCH ZUM PDF (2026-06-29, Desktop-Ansicht).
   Print-pt -> px via x1,333 (wie H1 bereits: 36pt = 48px). Der body-Praefix
   gibt hoehere Spezifitaet als die von bundle.js injizierte style.css-Kopie,
   damit diese Overrides greifen. Rot projektweit bereits auf #E3000F (HKS 13)
   gestellt (ersetzt #EE0000) -- inkl. bundle.js-Kopie.
   PDF-Soll je Element (Font / Farbe / Gewicht / Groesse-Durchschuss):
     H1            Spk Head   rot #E3000F  reg   36/36 pt
     H2 / Subline  Spk Rg     rot #E3000F  reg   16/18 pt
     Subhead       Spk Head   rot #E3000F  reg    9/12 pt
     Kurzprofil    Spk Rg     schwarz      bold   9/12 pt
     Intro         Spk Lt     grau #636362 reg   14/16,5 pt
     Copy          Spk Lt     schwarz      reg    9/12 pt
     Quote         Spk Lt     rot #E3000F  reg   15/17 pt
     Quote-Geber   Spk Lt     rot #E3000F  reg    7,5/9,5 pt
     Reportage-Frage Spk Rg   #3B3B3A      bold   9/12 pt
   ===================================================================== */
/* --- Familien / Gewichte / Farben (global) --- */
body.article p                         { font-family: 'Sparkasse', sans-serif; font-weight: 300; }   /* Copy = Spk Lt */
body.article section.intro p           { color: #636362; }                                            /* Intro grau */
body.article blockquote,
body .azubi-box__quote                  { font-family: 'Sparkasse', sans-serif; font-weight: 300; }   /* Quote = Spk Lt */
body.article figcaption                { font-family: 'Sparkasse', sans-serif; font-weight: 300; }   /* Quote-Geber = Spk Lt */
body.article .interview .bold          { color: #3B3B3A; font-weight: 700; }                          /* Reportage-Frage Rg-Bold */
body.article h1.headline               { font-weight: normal !important; }                            /* H1 = SparkasseHead-Regular */
body .stripe,
body.article blockquote::before,
body .time::before                      { background-color: #E3000F; }                                 /* rote Zitat-/Deko-Linien = PDF-Rot */

/* --- Groessen ab Desktop (Basis pt x 1,333; danach lt. Kunde 10px->12px, 12px->16px; Zeilenhoehen proportional) --- */
@media all and (min-width: 768px) {
  body.article h1.headline.h1          { font-size: 48px; line-height: 48px; }                         /* H1 */
  body.article header .headline.h3     { font-size: 21px; line-height: 24px; font-weight: 400; }       /* Subline (H2) */
  body.article .headline.h2            { font-size: 16px; line-height: 21px; }                          /* Abschnitts-Subhead (12->16) */
  body.article header .cite-offset .headline.h2 { font-size: 36px; line-height: 42px; }                  /* Vorwort-Zitat (Kundenwunsch 36px) */
  body.article .box-beige .headline.h3 { font-size: 16px; line-height: 21px; font-weight: 700; }       /* Kurzprofil-Titel (12->16) */
  body.article section.intro p         { font-size: 19px; line-height: 22px; }                          /* Intro */
  body.article p                       { font-size: 16px; line-height: 21px; }                          /* Copy (12->16) */
  body.article blockquote                { font-size: 20px; line-height: 23px; }                          /* Quote (Reportage) */
  body.article p.azubi-box__quote        { font-size: 20px; line-height: 23px; }                          /* Azubi-Quote (staerker als body.article p) */
  body.article figcaption              { font-size: 12px; line-height: 16px; }                          /* Quote-Geber (10->12) */
  body.article p.azubi-box__kicker      { font-size: 16px; line-height: 21px; font-weight: 700; }         /* Name FETT (staerker als body.article p) */
  body.article .interview .bold        { font-size: 16px; line-height: 21px; }                          /* Reportage-Frage (12->16) */
}


/* =====================================================================
   LINKS IN BEIGEN KAESTEN (PDF S.10/14/15/18): Pfeil nach unten-rechts +
   roter Link-Text daneben. Pfeil = icomoon-Glyph (\e904), per -45deg gedreht.
   body-Praefix wg. der von bundle.js injizierten style.css-Kopie.
   ===================================================================== */
body.article .box-beige a,
body.article a.link-arrow { color: #E3000F; align-items: center; }
body.article a.link-arrow { font-weight: 700; }
body.article .box-beige a::before,
body.article a.link-arrow::before {
  content: "\e904";
  font-family: 'icomoon' !important;
  font-weight: normal;
  font-style: normal;
  speak: none;
  display: inline-block;
  transform: rotate(-45deg);
  color: #E3000F;
  -webkit-text-stroke: 1.5px #E3000F;   /* Pfeil so dick wie der (fette) Link-Text, wie im PDF */
  text-stroke: 1.5px #E3000F;
  font-size: 1.3rem;
  line-height: 1;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* Rote Abschnitts-Subheads ohne Abstand zum Folgetext (wie PDF) */
body.article .headline.h2 { margin-bottom: 0; }


/* =====================================================================
   FOTO-BLOECKE (Text links col-8 / Bild rechts col-4, DSIK-Seite, PDF S.18/19)
   + rot-umrahmte TESTIMONIAL-KAESTEN (PDF S.19).
   ===================================================================== */
body.article .portrait-fig { margin: 0; }
body.article .portrait-fig img { width: 100%; height: auto; display: block; }
body.article .portrait-fig figcaption { color: #636362; margin-top: 0.6rem; }
@media all and (min-width: 768px) {
  /* Bild vertikal mittig zum (laengeren) Textblock, vermeidet grosse Leerflaeche */
  body.article .grid--photo .col-4 { align-self: center; }
}

/* Testimonial-Kasten: roter Rahmen, kursiver grauer Text, Name rot */
body.article .quote-box {
  border: 1.5px solid #E3000F;
  padding: 1.75rem 1.5rem;
}
body.article .quote-box blockquote {
  font-style: italic;
  color: #636362;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 1.25rem 0;
  border: none;
  padding: 0;
  width: 100%;
}
body.article .quote-box blockquote::before { content: none; background: none; }
body.article .quote-box .quote-box__author { color: #636362; margin: 0; }
body.article .quote-box .quote-box__author strong { color: #E3000F; }
@media all and (min-width: 768px) {
  body.article .quote-box { padding: 2.5rem; }
}

/* Lead-Ueberschriften "Stimmen von Absolventen" / "4 Fragen an ..." (PDF: SparkasseRg 16pt rot) */
body.article .h2-lead {
  font-family: 'Sparkasse', sans-serif;
  font-weight: 400;
  color: #E3000F;
  font-size: 19px;
  line-height: 22px;
  margin: 2rem 0 0.75rem 0;
  hyphens: none;
}
@media all and (min-width: 768px) {
  body.article .h2-lead { font-size: 21px; line-height: 24px; }
}

/* =====================================================================
   Lange Artikel-Titel: Silbentrennung (nutzt <html lang="de">), damit die H1
   im 2-spaltigen Header zwischen 768–1093px nicht aus der schmalen Textspalte
   ins Titelbild laeuft (z. B. "Entwicklungs-moeglichkeiten").
   ===================================================================== */
body.article header .headline.h1 {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word; /* Fallback, falls keine Trennmuster: bricht statt zu ueberlaufen */
}

/* =====================================================================
   Abstands-/Breiten-Feinschliff (Kundenwunsch 2026-06-29):
   - Fliesstext in Grid-Spalten fuellt die volle Spaltenbreite (statt 85%),
     damit er nah an die rechten Bilder rueckt ("Text fuellt span 8" / col-6).
   - Einheitlicher Abschnitts-Abstand 2rem (statt 3/4/6rem) ueber alle Breiten.
   body.article-Praefix schlaegt die von bundle.js injizierte style.css-Kopie.
   ===================================================================== */
body.article .grid p { width: 100%; }
body.article section { margin-bottom: 2rem; }
body.article .grid   { margin-bottom: 2rem; }

/* Selbstgehostetes Video (zukunft-moeglich-machen): volle Breite + Coverbild (poster) */
body.article .video-full { width: 100%; height: auto; display: block; margin-top: 1.5rem; }

/* =====================================================================
   Count-up "finanzielle-kompetenz-vermitteln" an PDF S.21 angepasst:
   grosse rote Zahlen, zentrierte fette Labels, KEINE Trennlinien (wie PDF),
   Viertelkreis-Deko links oben an der ersten Zahl (80.000). Mobil bleibt der
   Stack vertikal (col-3 -> span 12) -> entspricht der PDF-Optik.
   ===================================================================== */
body.article .kennzahlen-countup { margin-top: 3rem; margin-bottom: 3rem; } /* Modul-Abstand oben+unten 3rem (Kundenwunsch) */
body.article .kennzahlen-countup .highlight::after { display: none; }      /* keine Trennlinien wie im PDF */
body.article .kennzahlen-countup .highlight .h3    { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; }
body.article .kennzahlen-countup .highlight p      { width: 100%; text-align: center; font-weight: 700; }
/* Viertelkreis (rot) oben links an der ersten Zahl (80.000) */
body.article .kennzahlen-countup .highlight:first-child .h3 { position: relative; }
body.article .kennzahlen-countup .highlight:first-child .h3::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: -2.5rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 0.5rem solid #E3000F;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 2.6rem;
  pointer-events: none;
}

/* =====================================================================
   Story-Teaser "Zukunft moeglich machen" + "Kundenzufriedenheit/Interview"
   sind 1:1 wie das Vorwort aufgebaut:
     <section class="fullwidth story-plain [story-mirror]">
       <div class="fullwidth-inner grid">
         <div class="col-6 offset offset-left|right"><img></div>
         <div class="col-6"><h2><h3><a></div>
   Dadurch erben sie Vorworts Breakpoints UND Abstaende automatisch:
     - Mobil (<768): gestapelt, Bild OBEN (inset 1rem), Bild->Titel = 32px
       (grid-row-gap), kein Ueberlauf (fullwidth-inner haelt die Breite).
     - Tablet/Desktop (>=768): 2-spaltig, Bild bleedet zur Aussenkante (offset).
   .story-plain : entfernt nur den grauen Vorwort-Hintergrund.
   .story-mirror: "Zukunft" gespiegelt (Bild rechts). Text steht im Markup
                  zuerst -> Desktop Text links / Bild rechts; mobil zieht
                  order:-1 das Bild ueber den Titel.
   ===================================================================== */
/* (0,2,0) schlaegt section.fullwidth (0,1,1) inkl. der von bundle.js
   injizierten Kopie -> Hintergrund transparent statt grau. Das vertikale
   fullwidth-Padding (2-4rem, fuer den grauen Kasten gedacht) entfaellt, damit
   der Block-Abstand dem normaler Artikel-Sections entspricht (nur 3rem margin). */
.fullwidth.story-plain { background: transparent; padding-top: 0; padding-bottom: 0; }

/* fullwidth-inner ist content-box mit width:100% + 1rem-Padding -> 32px breiter
   als der Viewport, rechts vom body{overflow-x:hidden} abgeschnitten. border-box
   haelt die Box im Rahmen, der Text bricht sauber um. Nur fuer die Story-Teaser
   (Vorwort selbst bleibt unangetastet). */
body .story-plain .fullwidth-inner { box-sizing: border-box; }

@media all and (max-width: 767px) {
  body .story-mirror .offset { order: -1; }
}

/* Abstaende exakt wie Vorwort (Kunde vermessen): Titel 16px unten,
   Untertitel 10px unten, Button 16px oben. Bild->Titel = 32px grid-row-gap.
   body-Praefix schlaegt evtl. injizierte .headline-/.h3-Regeln. */
body .story-plain .col-6 > .headline.h2 { margin-top: 0; margin-bottom: 16px; }
body .story-plain .col-6 > .headline.h3 { margin-top: 0; margin-bottom: 10px; }
body .story-plain .col-6 > a { margin-top: 16px; }

/* Wiederverwendbare Silbentrennung (nutzt <html lang="de">). Auf lange
   zusammengesetzte Woerter anwenden (z. B. Teaser-Titel "Entwicklungs-
   moeglichkeiten auch international"), damit sie in schmalen Spalten
   sauber trennen statt zu ueberlaufen. */
/* body-Praefix: schlaegt die von bundle.js injizierte Kopie von
   ".headline { hyphens: none }" (gleiche Spezifitaet, sonst gewinnt die injizierte). */
body .hyphenate {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word; /* Fallback ohne Trennmuster */
}

/* =====================================================================
   Sticky "Nach oben"-Lasche (ersetzt den Topscroll-Button im Footer).
   Sitzt fix am rechten Bildschirmrand unten (wo ueblicherweise ein
   Top-Scroll-Button ist), rot mit weissem icon-up-Glyph. Form wie
   "Finanzbericht 2019": oben links eckig, unten links rund; rechte Seite
   buendig am Viewport-Rand. Erscheint erst nach 1 Bildhoehe Scrollen
   (Klasse .is-visible via footer.php-Script).
   body-Praefix gegen die bundle.js-injizierte .icon-Kopie (font-size 2.5rem). */
body .topscroll-fixed {
  position: fixed;
  right: 0;
  bottom: 2rem;
  z-index: 2500;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #E3000F;            /* PDF-Rot (HKS 13) */
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 2rem;                /* Groesse des icon-up-Glyphs (Kundenwunsch) */
  border-radius: 0 0 0 30px;      /* oben links eckig, unten links rund; rechts buendig */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  /* versteckt, bis 1 Bildhoehe gescrollt wurde */
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
body .topscroll-fixed.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
body .topscroll-fixed:hover { background: #c5000d; }

/* =====================================================================
   Shrinking-Header: beim Runterscrollen wird die fixe Menue-Leiste
   schmaler. Das vertikale nav-Margin schrumpft von 24px (1.5rem) auf
   12px (0.75rem). .is-scrolled setzt menu.js ab 50px Scroll; danach misst
   menu.js --menu-h neu (transitionend), damit Sprungmarken korrekt bleiben.
   body-Praefix schlaegt die bundle.js-injizierte Menue-CSS-Kopie.
   ===================================================================== */
body header .menu nav { transition: margin 0.2s ease; }
@media all and (min-width: 768px) {
  body header .menu.is-scrolled nav { margin-top: 0.75rem; margin-bottom: 0.75rem; }
}