/* ==================== BUTTONS ALLGEMEIN ====================  */

.uk-button {border-radius:0px}
.uk-card {border-radius: 0px}

/* ==================== TO TOP BUTTON ====================  */

.rk-top {
    position: fixed;
    bottom:100px;
    right: 20px;
    z-index: 1
}

/* ==================== SOCIAL BAR ====================  */

.rk-social .uk-icon-button{
  height:60px;
}

/* ==================== LINIE UNTER NAV ====================  */

.uk-navbar-nav > li > a::before {
bottom: 30px;
}

/* ==================== SIDEBAR ====================  */

#sidebar .uk-icon {
	padding-top: 12px;
	padding-left: 10px;
	margin-right: -20px;
}

#sidebar .uk-grid .uk-card-default{
  	position:fixed;
	margin-left: 0px;
	transform:  translateX(258px);
	padding: 3px; 
	background-color: #f87712; 
	border: 2px solid #f87712;
	transition: 1.0s; 
	}
#sidebar .uk-card-default:hover {
	background-color: #245689;
	border: 2px solid white;
	transform:  translateX(80px);
	}

/* ==================== BORDER ÜBER BILD ====================  */

.rk-headline {
  position: relative;
  padding: 2rem 2rem 1.5rem;
}

/* die verschiebbare Border */
.rk-headline::before {
  content: "";
  position: absolute;

  top: -50px;
  bottom: 73px;
  left: 0px;        /* links bleibt fix */
  right: 53px;   /* 👉 hier steuerst du die Länge nach rechts */

  border: 2px solid #f87712;
  pointer-events: none;
}


.rk-headline h1 {
  display: inline-block;
  margin: -2.5rem 0 0 -0rem;
  padding: 0.7rem 0.0rem;
  background: white;
  color: #245689;
  font-weight: 500;
  letter-spacing: 0em;
  position: relative;
  z-index: 1;
  font-size: 50px;
}

.rk-headline2 {
  position: relative;
  padding: 2rem 2rem 1.5rem;
}

/* die verschiebbare Border */
.rk-headline2::before {
  content: "";
  position: absolute;

  top: -50px;
  bottom: 73px;
  left: 30px;        /* links bleibt fix */
  right: 400px;   /* 👉 hier steuerst du die Länge nach rechts */

  border: 2px solid #f87712;
  pointer-events: none;
}


.rk-headline2 h1 {
  display: inline-block;
  margin: -2.5rem 0 0 -2.0rem;
  padding: 0.7rem 0.0rem;
  background: white;
  color: #245689;
  font-weight: 500;
  letter-spacing: 0em;
  position: relative;
  z-index: 1;
  font-size: 50px;
}


/* ==================== BORDER HINTER BILD ====================  */

.rk-bild {
  position: relative;
  display: block;
  z-index: 1;
}

/* der orange Kasten HINTER dem Bild */
.rk-bild::after {
  content: "";
  position: absolute;

  /* Größe des Kastens */
  width: 90%;
  height: 90%;

  /* Position: nach rechts & oben verschoben */
  top: -13%;
  right: -8%;

  border: 3px solid #ff7a00; /* Orange */
  box-sizing: border-box;

  z-index: -1; /* liegt hinter dem Bild */
}


.rk-bild2 {
  position: relative;
  display: block;
  z-index: 1;
}

/* der orange Kasten HINTER dem Bild */
.rk-bild2::after {
  content: "";
  position: absolute;

  /* Größe des Kastens */
  width: 90%;
  height: 90%;

  /* Position: nach links & oben verschoben */
  top: -10%;
  left: -10%;

  border: 3px solid #ff7a00; /* Orange */
  box-sizing: border-box;

  z-index: -1; /* liegt hinter dem Bild */
}

/* ==================== WELLE SECTION ====================  */


.wave-section {
    position: relative;
    min-height: 500px;
    /* Der Hauptbereich unter der Kurve ist Dunkelblau */
    background-color: #245689; 
    overflow: hidden;
}

.wave-section::before {
    content: "";
    position: absolute;
    /* 1. Nach oben setzen */
    top: -1px; /* -1px verhindert einen feinen Spalt */
    left: 0;
    width: 100%;
    /* Höhe der Wellen-Grafik */
    height: 150px; 
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top center;
	transform: scaleX(-1);
    z-index: 1;
    
    /* 2. Vertikal gespiegelte S-Kurve (Links tief, Rechts hoch) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,80 C360,170 1080,-10 1440,80 L1440,0 L0,0 Z' fill='%23ffffff' /%3E%3Cpath d='M0,80 C360,170 1080,-10 1440,80' stroke='%232cb7e5' stroke-width='6' fill='none' /%3E%3Cpath d='M0,65 C360,155 1080,-25 1440,65' stroke='%23f87712' stroke-width='6' fill='none' /%3E%3C/svg%3E");
}

.wave-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Höhe der Wellen-Grafik */
    height: 150px; 
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom center;
    
    /* SVG: Eine gefüllte weiße Fläche mit zwei farbigen Linien obendrauf */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C360,0 1080,140 1440,70 L1440,150 L0,150 Z' fill='%23ffffff' /%3E%3Cpath d='M0,70 C360,0 1080,140 1440,70' stroke='%232cb7e5' stroke-width='6' fill='none' /%3E%3Cpath d='M0,85 C360,15 1080,155 1440,85' stroke='%23f87712' stroke-width='6' fill='none' /%3E%3C/svg%3E");
}



/* Der Hauptcontainer */
.wave {
    position: relative;
    min-height: 600px; 
    background-color: #245689; /* Dunkelblau unten rechts */
    overflow: hidden;
}

/* Die weiße Fläche und die dünnen Linien */
.wave::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: scale(-1);
    z-index: 1;

    /* SVG: Weiße Fläche links, dünne Linien, die sauber an den Rändern abschließen */
    /* Stroke-width auf 4 reduziert für feinere Optik */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath d='M0,2 C600,0 600,600 1440,600 L1440,0 L0,0 Z' fill='%23ffffff' /%3E%3Cpath d='M0,3 C600,0 600,600 1440,600' stroke='%232cb7e5' stroke-width='4' fill='none' /%3E%3Cpath d='M0,13 C600,15 600,610 1440,610' stroke='%23f87712' stroke-width='4' fill='none' /%3E%3C/svg%3E");
}
/* ==================== FOOTERBAR ====================  */

#footerbar {
	display:none;
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
	left:0px;
    z-index: 999;
    background-color: #f87712
}


/* ==================== MOBILE ====================  */

@media (max-width: 1485px) {
	.wave::before {
	transform: scaleX(1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L790,0 C990,200 890,600 1090,800 L0,800 Z' fill='%23ffffff' /%3E%3Cpath d='M790,0 C990,200 890,600 1090,800' stroke='%232cb7e5' stroke-width='5' fill='none' /%3E%3Cpath d='M812,0 C1012,200 912,600 1112,800' stroke='%23f87712' stroke-width='5' fill='none' /%3E%3C/svg%3E");
	}
	.rk-head {
	padding-top:-200px;
}
}

@media (max-width: 1262px) {
	.wave::before {
	transform: scaleX(1);
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L890,0 C1090,200 990,600 1190,800 L0,800 Z' fill='%23ffffff' /%3E%3Cpath d='M890,0 C1090,200 990,600 1190,800' stroke='%232cb7e5' stroke-width='5' fill='none' /%3E%3Cpath d='M912,0 C1112,200 1012,600 1212,800' stroke='%23f87712' stroke-width='5' fill='none' /%3E%3C/svg%3E");
}
	.uk-panel .uk-text-lead .rk-text .uk-margin-xsmall .uk-width-2xlarge .uk-text-left .uk-scrollspy-inview {
		margin-right: -200px;
	}
}
@media (max-width: 1201px) {
	.uk-heading-xlarge {
		font-size: 6rem;
	}
}

@media (max-width: 1150px) {
	.rk-text {
		padding-right: 20px;
	}
}

@media (max-width: 1085px) {
	.wave::before {
	transform: scaleX(1);
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L930,0 C1130,200 1030,600 1230,800 L0,800 Z' fill='%23ffffff' /%3E%3Cpath d='M930,0 C1130,200 1030,600 1230,800' stroke='%232cb7e5' stroke-width='5' fill='none' /%3E%3Cpath d='M952,0 C1152,200 1052,600 1252,800' stroke='%23f87712' stroke-width='5' fill='none' /%3E%3C/svg%3E");
}
}

@media (max-width: 1076px) {
	.rk-wave-head3 {
		padding-bottom: 50px;
	}
}

@media (max-width: 1025px) {
	#sidebar {
		display:none;
	}
	.wave::before {
	transform: scaleX(1);
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L990,0 C1190,200 1090,600 1290,800 L0,800 Z' fill='%23ffffff' /%3E%3Cpath d='M990,0 C1190,200 1090,600 1290,800' stroke='%232cb7e5' stroke-width='5' fill='none' /%3E%3Cpath d='M1012,0 C1212,200 1112,600 1312,800' stroke='%23f87712' stroke-width='5' fill='none' /%3E%3C/svg%3E");
}
#footerbar {
		display:block;
	}
    /* Verstecke das normale Navbar-Menü */
    .tm-header .uk-navbar-right,
    .tm-header .uk-navbar-center,
    .tm-header .uk-navbar-left {
        display: none !important;
    }
	 .tm-header-mobile {
        display: block !important;
}
	.rk-copy {
		padding-bottom: 80px;
	}
}




@media (max-width:990px) {

	.wave::before {
    content: "";
    position: absolute;
    /* Wir platzieren sie ganz oben in der Section */
    top: 0; 
    left: 0;
    width: 100%;
    /* Die Höhe der Welle (sehr flach, wie gewünscht) */
    height: 200px; 
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	transform: scaleY(-1);
    
    /* Eine flache Welle, die von links nach rechts schwingt */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 C1000,70 450,10 0,30 Z' fill='%23ffffff' /%3E%3Cpath d='M0,32 C450,12 1000,72 1440,32' stroke='%232cb7e5' stroke-width='4' fill='none' /%3E%3Cpath d='M0,42 C450,22 1000,82 1440,42' stroke='%23f87712' stroke-width='4' fill='none' /%3E%3C/svg%3E");
}

/* WICHTIG: Damit die Schrift nicht unter der Welle klebt, 
geben wir dem Text-Container einen Abstand nach oben */
	.wave {
    padding-top: 30px; 
    position: relative;
	background-color: white;
}
}

@media (max-width:960px) {
	.rk-wave-head {
		padding-top: 20px;
	}
	.rk-wave-head2 {
		padding-top: 70px;
	}
	.rk-wave-head3 {
		padding-bottom: 50px;
	}
	.rk-wave-head4 {
		padding-top: 100px;
	}
	.rk-bild::after {
		margin-top:80px;
		margin-bottom: 60px;
	}
	.rk-bild {
		padding-top: 30px;
	}
}

@media (max-width:917px) {
	.rk-wave-head3 {
		padding-bottom: 80px;
	}
}

@media (max-width:800px) {
	.rk-bild::after {
		margin-top:80px;
		margin-bottom: 60px;
	}
	.rk-bild {
		padding-top: 50px;
	}
}

@media (max-width:581px) {
	.uk-heading-xlarge {
		font-size: 4.5rem;
		margin-left: 0px !important;
	}
}

@media (max-width:488px) {
	.rk-bild::after {
		margin-top:50px;
		margin-bottom: 60px;
	}
	.rk-bild {
		padding-top: 30px;
	}
}

@media (max-width:431px) {
	.uk-heading-xlarge {
		font-size: 3.5rem;
		margin-left: 0px !important;
	}
}