@media only all and (max-width: 700px) {

  /* for 700px or less */


:root {
  --abstand: 1.2rem;
  --radius: 1rem;
}


body {
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
  }


.frame-outer {
margin: 0;
width: 100%;
border: none;
box-shadow: none;
font-size: 0.9rem;
  }


h1 {
font-size: 1.6rem;
-ms-hyphens: manual;
-webkit-hyphens: manual;
hyphens: manual;
overflow-wrap: break-word;
  }


h1 span {
font-size: 1.1rem;
  }


h2 {

  }


h3 {
font-size: 1.35rem;
  }


h4 {

  }


#logo img {
width: 120px;
  }


#header {
padding: 1rem 5% 1.8rem 5%;
  }


.tv {
width: 52%;
  }


/*--Titelbereich mobil komplett auf dem dunklen Grau--*/
#title {
position: relative;
margin: 1.6rem -5.3% -1.8rem -5.3%;
padding: 0.4rem 5% 1.8rem 5%;
background-color: #1e2a30;
max-width: none;
  }


/*--weicher Übergang vom Bild ins Grau direkt über dem Titel--*/
#title::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 2.5rem;
background: linear-gradient(to bottom, rgba(30, 42, 48, 0) 0%, rgba(30, 42, 48, 1) 100%);
pointer-events: none;
  }


.content {
padding: 1.8rem 5%;
  }


.karte-bild {
aspect-ratio: 16 / 9;
  }


.karte-text {
padding: 1.8rem 1.4rem 1.6rem 1.4rem;
  }


.band {
padding: 2rem 6% 3rem 6%;
  }


.band .gross {
font-size: 1.7rem;
  }


#footer {
padding: 1.8rem 6% 2rem 6%;
  }


#footer .info {
margin-top: 1.2rem;
  }


.box-left {
width: 100%;
margin-bottom: 1rem;
float: none;
  }


.box-right {
width: 100%;
float: none;
  }


.flex {
display: block;
  }


.left,
.right {
width: 100%;
  }


.left {
margin-bottom: 1rem;
  }


.hide {
display: block;
  }


.hide_m {
display: none;
  }


}
.refnr {}

.apply {text-decoration: underline; color: blue;}