*,::after,::before{box-sizing:border-box}
:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}
html{line-height:1.15;-webkit-text-size-adjust:100%}
hr{height:0;color:inherit}
abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
::-moz-focus-inner{border-style:none;padding:0}
:-moz-focusring{outline:ButtonText dotted 1px}
:-moz-ui-invalid{box-shadow:none}
legend{padding:0}
progress{vertical-align:baseline}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
.invisible{display:none!important}
.clearleft{clear:left}
.clearfix:after{content:"";display:table;clear:both}

:root {
  --schwarz: #111;
  --weiss: #fff;
  --gold: #a6966f;
  --contentbreite:50.5rem;
}

*, *::before, *::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}
html{font-size:18px;scroll-behavior:smooth;scroll-padding-top:4rem}
body{background-color:var(--schwarz);display:flex;flex-direction:column;justify-content:flex-start;min-height:100vh;position:relative;z-index:0;min-height:100vh;line-height:1.25;font-weight:400;margin:0;font-family:"Hind",Arial,sans-serif;color:var(--weiss);text-align:left;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;letter-spacing:.01em;word-spacing:.01em;-webkit-hyphens:none;hyphens:none;overflow-x:hidden;max-width:100%}


/* hind-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/hind-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* hind-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/hind-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* hind-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/hind-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* hind-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/hind-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* hind-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/hind-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

a{color:var(--weiss)}
a:hover{text-decoration:none}
strong{font-weight:500}
div{display:block}
blockquote,figure,ol,p,table,ul{font-size:1rem}
figure,picture{margin:0}
table{border-collapse:collapse;width:100%}
thead{background-color:var(--schwarz);color:var(--weiss)}
td,th{padding:.5rem;border:1px solid var(--weiss)}
blockquote,ol,p,table,ul{padding:0;margin-top:1rem;margin-bottom:1rem}
blockquote,figure,ol,p,table,ul{line-height:1.55}
small{font-size:.8rem;line-height:1.55rem;margin-top:.775rem;margin-bottom:.775rem}
img{display:block;max-width:100%;width:100%;height:auto}
:focus{outline:0}
::selection{background-color: var(--weiss);color: var(--schwarz)}
footer::selection{background-color: var(--weiss);color: var(--schwarz)}

body:after{background-size: 60vw 20vh;background-position:center center;content:"";position:fixed;z-index:-1;top:0;left:0;width:100%;height:100%;background-color: var(--schwarz);opacity: 0.8;background-attachment:fixed;background-image:linear-gradient(rgba(100,100,100,.4) 1px, transparent 1px), linear-gradient(to right, rgba(100,100,100,.4) 1px, #000 1px);}

h1,h2,h3,h4,h5,h6{font-size:1.5rem;font-weight:700;margin:0;padding:0;line-height:1.25;font-family:Arial,sans-serif;color:var(--weiss);text-transform:none}
p{margin:.75rem 0}
ul,ol{margin-left:1rem}

.inside{width:100%;max-width:var(--contentbreite);margin:0 auto;padding:0 1.5rem}

.header{padding:2rem 0;background-color:transparent;transition:all .4s ease 0s;position:fixed;left:0;width:100%;top:0;z-index:100;text-align:center;border-bottom:1px solid rgba(100,100,100,0)}
.header.fixed{padding:.5rem 0;background-color:rgba(0,0,0,.5);backdrop-filter:blur(5px);border-bottom:1px solid rgba(100,100,100,.4)}

.header .logo-link{transition:all .4s ease 0s;display:inline-block;width:15rem;max-width:60%}

.page{min-height:100vh;display:flex;justify-content:center;align-items:center}
.more-margin-top{margin-top:15vh}

.bild-text{max-width:50rem}
.bild-text .rechts{margin-top:1rem}

.mehr-abstand{margin-top:4rem}

.text-spalten.first{margin-top:10rem !important}
.text-spalten.last{margin-top:4rem;margin-bottom:30vh !important}
.text-spalten .links{margin-bottom:2rem}  

#to-bottom-arrow{display:block;text-decoration:none;text-align:center;color:var(--gold);position:fixed;bottom:1rem;right:1rem;width:8rem}
#to-bottom-arrow img{transition:all .2s linear 0s;top:0;position:relative}
#to-bottom-arrow:hover img{top:-.5rem}
#to-bottom-arrow .label{font-weight:bold;transition:all .2s linear 0s;font-size:1rem;line-height:1;transform:rotate(90deg) translate(-2.75rem,0);display:block}
#to-bottom-arrow.more-text .label{transform:rotate(90deg) translate(-4rem,0)}
#to-bottom-arrow:hover .label{transform:rotate(90deg) translate(-3rem,0)}
#to-bottom-arrow.more-text:hover .label{transform:rotate(90deg) translate(-3.75rem,0);}

footer a{text-decoration:none;font-size:.8rem}

@media (min-width:768px) and (max-height:450px){
  .header{position:relative !important}
}

@media (min-width:768px){
  body:after{background-size:40vw 20vh}

  .bild-text{margin:4rem 0;display:flex;gap:2rem;align-items:flex-end}
  .bild-text .links{flex:0 40%;}
  .bild-text .rechts{margin:0;flex:0 60%;}
  .bild-text .rechts p:last-child{margin-bottom:0}

  .text-spalten{margin:5rem 0 !important;display:flex;gap:2rem;align-items:flex-start}
  .text-spalten .links{flex:0 34.5%;}
  .text-spalten .rechts{flex:0 65.5%;}
  .text-spalten .rechts p:last-child{margin-bottom:0}

  #to-bottom-arrow{bottom:5%;right:1rem;width:7rem}
}

@media (max-width:767px){
  #to-bottom-arrow{right:0;transform:scale(.7)}
}

@media (min-width:1024px){
  body:after{background-size: 35vw 30vh;background-position:top center}
  

  footer{text-align:right}

  .text-spalten .links{flex:0 40%;}
  .text-spalten .rechts{flex:0 60%;}

  #to-bottom-arrow{bottom:10%;right:1rem;width:10rem}
  #to-bottom-arrow .label{font-size:1.25rem;transform:rotate(90deg) translate(-4rem,0)}
  #to-bottom-arrow:hover .label{transform:rotate(90deg) translate(-3.5rem,0)}

  footer a{font-size:1rem}
}

@media (min-width:1280px){
  :root {
    --contentbreite:60.5rem;
  }
  html{font-size:19px}
  body:after{background-size: 20vw 20vh}

  .more-margin-top{margin-top:25vh}

  .bild-text .links{flex:0 40%;}
  .bild-text .rechts{margin:0;flex:0 60%;}

  .text-spalten .links{flex:0 34.5%;}
  .text-spalten .rechts{flex:0 65.5%;}

  footer{position:fixed;bottom:0;width:100%;left:0;padding:2rem 0}

  #to-bottom-arrow{bottom:25%;right:1rem;width:15rem}
  #to-bottom-arrow .label{transform:rotate(90deg) translate(-4rem,0)}
  #to-bottom-arrow.more-text .label{transform:rotate(90deg) translate(-6rem,0)}
  #to-bottom-arrow:hover .label{transform:rotate(90deg) translate(-3.5rem,0)}
  #to-bottom-arrow.more-text:hover .label{transform:rotate(90deg) translate(-5.75rem,0)}
}

@media (min-width:1600px){
  /*#to-bottom-arrow{width:20rem}*/
}



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

@keyframes fadeIn{
  to{opacity:1;transform:none}
}