@charset "utf-8";

/*
* CSS-Design
* Design by Behrend | Stefanie Behrend Webdesignpflege |
*/

/* Farbwerte
*dunkel blau											#043152
														rgb(4, 49, 82, 0)

*gelbgrün Akzentfarbe für Rahmen und Elemente			#e8fd72
														rgb(232,253,114,0)

*hellblau Hintergrund									#d2fff6
														rgb (210, 255, 246,0)
	

*Diamantschwarz Schrift									#2B303E
														rgb(43,48,62,0)


*helle weiße Schrift									#fefefe
														rgb(254,254,254,0)








/* Webfonts-Einbindung */

/* Merriweather 120px Extra Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Merriweather_120pt-ExtraBold.ttf') format('ttf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Merriweather 120px Extra Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Merriweather_120pt-Bold.ttf') format('ttf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Merriweather 96px Extra Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Merriweather_96pt-ExtraBold.ttf') format('ttf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Merriweather 96px Extra Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Merriweather_96pt-Bold.ttf') format('ttf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Merriweather 48px Extra Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Merriweather_48pt-ExtraBold.ttf') format('ttf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Merriweather 48px Extra Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Merriweather_48pt-Bold.ttf') format('ttf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

/* Fira Sans Medium Italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/FiraSans-MediumItalic.ttf') format('ttf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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



/* Reset = alle Abstaende auf Null gesetzt* * * * * * * * */

*{
margin: 0; /* Reset Abstand zum naechsten Element */
padding: 0; /*Reset Abstand zur Grenze innerhalb des Element */
-mozbox-sizing: border-box; /* Alternatives Boxmodell aktivieren */
-webkit-box-sizing: border-box; /* Alternatives Boxmodell aktivieren */
box-sizing: border-box; /* Alternatives Boxmodell aktivieren */
}


html{ 
	scroll-behavior: smooth; 
}



/* Bild als Blockelement */


body {
font-size: 1.5rem;
font-family: 'Merriweather', serif;
line-height: 28px;
color: #043152;/* Schriftfarbe dunkelblau*/
font-weight: 400;
background:#d2fff6 ; /* hellblauer Hintergrund */
}


.custom-line {
width: 50%;
height: 2px;
background: #2b303e;
margin: 20px auto ;

}

.button {
padding: 5px;
  color: #fefefe ;/* Schriftfarbe hell */
 background-color: #043152; /* dunkles Blau  */
}

.button:hover {
 color: #043152 ;/* Schriftfarbe dunkelblau */
 background-color: #d2fff6; /* hellblau  */
}


.anfrage {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  background-color: #005f99; /* dunkles Blau  */
  text-decoration: none;
  color: #f7f6f1 ;/* Schriftfarbe hell */
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;} /* Inklusive Finger Pointer auf Neongrün  Hintergrund */

.anfrage:hover {
  background-color: #d2fff6; /* dunkles Blau  */
  color: #043152 ;/* Schriftfarbe hell */
}



.image-list {/*Grafik in der Aufzählung */
 list-style-type: none; /*entfernt die Standardpunkte*/
 padding: 0;/*entfernt den Standardabstand*/
}


.image-list li {
display: flex; /*Flexbox für Anordnung */
align-items: center; /*Vertikale Zentrierung */
margin: 20px 0; /*Abstand zwischen den Elementen*/
}

.list-image {
width: 150px; /*Breite des bildes */
height: 150px; /*Höher des bildes */
background: #f7f6f1;
border-radius: 50%;
border: solid 2px #e8fd7d;
margin-right: 15px; /* Abstand zwischen Bild und Text */
} 

.zentrieren {
	text-align: center;
}


img{
max-width:100%;
height: auto;
border: 2px solid #e8fd72; /* Akzentfrabe gelbgrün*/
}


.kreis {
border-radius: 50%;
border: none;
}

#logo , .navbar-logo {
max-width:250px;
border: none;
}


/* Layout */

.wrapper {
max-width: 1250px; /*Grundelement Maximale Breite */
padding: 0 25px; /*Grundelement Abstand innerhalb Element */
margin: 0 auto; /*Grundelement Abstand zum naechsten Element */
}

/* Layout Spalten in der Reihe */
.column {
float: left;
margin: 25px 0 25px 5%;
}

/* Layout erste Spalten in der Reihe ohne Abstand */
.column:first-child{
margin-left: 0;
} 

/* Elemente Section Layout */
section {
padding: 75px 0;
}

.dark {
	background: rgba(4,49, 82, 0);
}

.light {
	background: rgba(210,255,246,0);
	padding: 0;	
	margin: 75px auto;
}



/* Raster */
/* no-gutter */


.no-gutter .column{
margin: 0;
padding: 60px;
}

.no-gutter .col_1_2{
width: 50%;
}

.no-gutter .col_1_3 {
	width: 33.33%;
}

.no-gutter .col_2_3 {
	width: 66.66%;
}

.no-gutter .col_1_4 {
	width: 25%;
}

.no-gutter .col_3_4 {
	width: 75%;
}

/* Clearfix */
/* Korrektur nicht floatende Elemente in der Reihe zu halten. Anlage von zwei Pseudoklassen mit leeren Inhalten */


.row:before, .row:after {
content: " ";
display: table;
}

.row::after {
clear: both; /* aufheben der float Anweisung */
}

/* Spalten*/

.col_1{
width: 100%;
}

.col_1_2{
width: 47.5%;
}

.col_1_3{
width: 30%;
}

.col_2_3{
width: 65%;
}

.col_1_4{
width: 21.25%;
}

.col_3_4{
width: 73.75%;
}






/* Typo Ueberschriften */

	h1 {
		font-family: 'Merriweather', serif;
		font-weight: 800;
		font-size: 5.00rem; /* 96px h1 Ueberschriften */
		margin-bottom:40px;
		line-height: 1.4;
	

	}

		
	h2, h3 {
		font-family: 'Fira Sans', sans-serif;
		font-weight: 700;
		margin-bottom: 25px;
		line-height: 1.2;
	}


	h2 {
		font-size: 2.25rem; /* 36px h2 Ueberschriften */
		
	}

	
	h3 {
		font-size: 1.5rem; /* 24px h3 Ueberschriften */
		margin-bottom: 5px;
	}



/* Typo Links */
	a {	font-size: 1.5rem; /* Schriftgröße 24px Links */
		font-family: 'Fira Sans', sans-serif;
		line-height: 26px;
		color: #2b303e;
		text-decoration: underline;
		border-radius: 5px;

	}


	a:hover {
 		color: #043152;
		background: #d2fff6;
		text-decoration: none;
	}

/* Typo Text */

	p{
		font-family: 'Fira Sans', sans-serif;
		font-weight: 300;
		font-size: 1.125rem;/* Schriftgröße 18px */
		margin: 0 0 15px;
	}




/* Header Konfiguration */

header {
		width:100%;
		float:left;
		background:#043152;/* dunkelblau*/
	
	}
header .column {
	margin: 0;
}

/* Responsive Navigation */

.headlogo {
		display:inline-block;
		max-width:250px;
		padding:0.4em;
		border: none;
		margin:0;
		}

.plusnavi {
	margin:0 auto;
	padding-top: 50px;
		}

	
	.site-nav {
		float: right;
		width: calc(100% - 200px);
	}

	.site-nav-list {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	}

	.site-nav-list::before,
	.site-nav-list::after {
		content: '';
		display: table;
	}

	.site-nav-list::after {
		clear: both;
	}

	.site-nav-list li {
	  float: left;
	  position: relative;
	  margin: 0 1px;
	}

	.site-nav-list li.hidden {
	  display: none;
	}

	.site-nav-list a {
		display:block;
		padding:0.4em;
		text-decoration:none;
		color:#fefefe;
	}
	
	.site-nav-list a + ul {
	  display: none;
	  position: absolute;
	  top: 100%;
	  right: 0;
	  padding-bottom: 1px;
	  background: #043152;
	  min-width: 150px;
	}
	.site-nav-list a + ul li {
	  margin-top: 1px;
	  float: none;
	}
	.site-nav-list a + ul li a {
	  padding-left: 6px;
	  text-align: right;
	  white-space: nowrap;
	  display: block;
	}

	.site-nav-list a + ul li a:hover {
	  color:#043152;
	  background:#d2fff6;
	}
	.site-nav-list li:hover > a {
	  color:#043152;
	  background:#d2fff6;
	}
	.site-nav-list li:hover ul {
	  display: block;
	}	


/* Hero Layout */


#hero {
display: block;
color: #043152;
justify-content: space-around;
padding: 0px 0 30px;
}

/*Überlappung Text mit Bild 
#hero .col_1_3 {
	position: relative;
	z-Index: 1;
}


#hero .col_2_3 { 
	position: relative;
	z-Index: 99;
} */

#hero img{
margin-top: 20%;
opacity: 80%;
}

#hero h1 {
margin-top: 50px;


}

#hero h2 {
margin-top: 25px;
}

#hero h3 {
margin-top: 5px;
font-weight: 400;
}







/*Hintergrundbild Durchlauf Effekt*/


#bgpic {
	background: url('../images/bg_hunde.jpeg') center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	height: 200px;
	opacity: 75%;
	}


#bgpickl {
	background: url('../images/bg_hunde_klein.jpeg') center center no-repeat;
	background-size: cover;
	height: 250px;
	opacity: 75%;
	}

/*Webdesign */
#webdesign {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	padding: 30px 0;

}
#webdesign .row {
    display: flex;
    flex-wrap: wrap; /* Erlaubt das Umbrechen der Boxen */
    justify-content: center; /* Zentriert die Boxen horizontal */
}

#webdesign .col_1_2 {
    max-width: 380px;
    margin: 20px; /* Gleichmäßiger Abstand */
    flex: 1 1 300px; /* Wächst, schrumpft und hat eine Basisbreite */
}

#webdesign h1{
font-size: 48px; /*52px Schriftgröße h1 angepasst */
font-weight:600;/*Schriftdicke h1 angepasst */
}


#webdesign p{
	height: 180px;
}


#webdesign img {
    display: block;             /* Block statt Inline für bessere Zentrierung */
    margin: 0 auto 15px auto;   /* Zentriert das Bild innerhalb der Box */
    max-width: 100%;            /* Verhindert, dass Bilder über den Rand ragen */
    
}


/*Service */

#service {
display: flex;
flex-direction: column;
text-align: center;
padding: 30px 0px;
background: #043152;
background: linear-gradient(0deg,rgba(4, 49, 82, 1) 5%, rgba(210, 255, 246, 1) 95%);
}


/* 1. Der Haupt-Container für die Karten */
#service .wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Die Zeile (Row) als Flex-Container definieren */
#service .row {
    display: flex;
    flex-direction: row; /* Nebeneinander auf Desktop */
    flex-wrap: wrap;    /* Umbruch für Mobile */
    justify-content: center; /* Zentriert die Karten */
    align-items: stretch;    /* Sorgt dafür, dass alle Spalten gleich hoch sind */
    gap: 20px;          /* Moderner Abstand statt margin-left */
}


/* 3. Die Spalten (Columns) */
#service .col_1_3 {
    flex: 1;            /* Jede Spalte nimmt gleich viel Platz ein */
    min-width: 320px;   /* Verhindert zu schmale Karten */
    max-width: 360px;   /* Begrenzung für sehr breite Schirme */
    display: flex;      /* Wichtig, damit die Karte darin die volle Höhe nutzt */
}


#service h1 {
color: #2b303e;
font-size: 3.25rem; /*52px Schriftgröße h1 angepasst */
font-weight:600;/*Schriftdicke h1 angepasst */
}



/* 4. Die Karten-Klassen anpassen */
.karte_start, .karte_biz, .karte_pro {
    display: flex;
    flex-direction: column; /* Inhalt untereinander */
    width: 100%;           /* Nutzt die volle Breite der Spalte */
    height: 100%;          /* Nutzt die volle Höhe der Spalte */
    padding: 30px 20px;
    box-sizing: border-box;
    /* height: 750px; <-- Entferne die feste Höhe, damit Flexbox arbeitet! */
}

/* 5. Der Button-Trick */
.anfragex {
  display: inline-block;
	margin-top: auto;      /* Schiebt den Button immer ganz nach unten */
	align-self: center;    /* Zentriert den Button horizontal */
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  background-color: #005f99; /* dunkles Blau  */
  text-decoration: none;
  color: #f7f6f1 ;/* Schriftfarbe hell */
  border: none;
  padding: 12px 25px;
  border-radius: 5px;
  cursor: pointer;} /* Inklusive Finger Pointer auf Neongrün  Hintergrund */

.anfragex:hover {
  background-color: #d2fff6; /* dunkles Blau  */
  color: #043152 ;/* Schriftfarbe hell */
}



.karte_pro {
	color: #fefefe;
position: relative;
	  box-shadow: 0 15px 30px #e8fd72;
top: -50px;	
	border: solid 5px #e8fd72;
background: #043152;/*neongelb hervorgehoben */
		
}

.karte_pro .angebot-inhalte li {
    margin: 15px 0; /* Abstand zwischen den Listenelementen */
    color: #fefefe;
    font-weight: 400;  
    font-size: 18px; /* Schriftgröße der Inhalte */
}


.karte_start , .karte_biz {
	box-shadow: 0 2px 10px rgba(4, 49, 82, 0.8);
	background: #fefefe;
	
}

.karte_start:hover , .karte_pro:hover , .karte_biz:hover{
    transform: scale(1.05); /* Effekt beim Hover */
}


.karte_start  .angebot-titel, .karte-biz .angebot-titel 
{
    font-size: 36px; /* Schriftgröße des Titels */
    color: #043152; /* Farbe des Titels */
    margin: 10px 0; /* Abstand oben und unten */
}

.karte_start  .angebot-preis, .karte_biz .angebot-preis {
    font-size: 20px; /* Schriftgröße des Preises */
    font-weight: 400;
    color: #043152; /* Farbe des Preises */
}
.karte_pro  .angebot-preis {
    font-size: 20px; /* Schriftgröße des Preises */
    font-weight: 400;
    color: #fefefe; /* Farbe des Preises */
}

.preis {
	font-size: 26px;
    font-weight: bold; /* Preis hervorheben */
}

 .angebot-inhalte {
    list-style-type: none; /* Aufzählungszeichen entfernen */
    padding: 0; /* Innenabstand entfernen */
    margin: 10px 0; /* Abstand oben und unten */
}

.karte_start  .angebot-inhalte li, .karte_biz .angebot-inhalte li {
    margin: 15px 0; /* Abstand zwischen den Listenelementen */
    color: #2b303e;
    font-weight: 400;  
    font-size: 18px; /* Schriftgröße der Inhalte */
}



/*Über mich */

#uebermich {
display: flex;
flex-direction: column;
background: #043152;
color: #fefefe;
float: none;}

#uebermich .custom-line {
		background-color: #e8fd72;
	}

.stay {	
	display: none; 
}

/*Slider Ueber mich ohne java script | ACHTUNG Benennung Slides in js Datei genutzt, daher kann es zu fehlfunktion kommen */

.slider {
z-index: 1;
position: relative;
margin-left: 100px;

}

.slider img {
position: absolute;
border-radius:10px;
top: 120px;
opacity: 0;
}


#slide1 {
animation: fade 9s infinite;
}

#slide2 {
animation: fade 9s 3s infinite;
}

#slide3 {
animation: fade 9s 6s infinite;
}


@keyframes fade {
	0% {
		opacity: 0
	}
	11.111% {
		opacity: 1
	}
	33.333% {
		opacity: 1
	}
	44.444% {
		opacity: 0
	}
	100% {
		opacity: 0
	}
}




/* Kontakt */


#kontakt {
padding-top: 30px;
color: #043152;
}

#kontakt a{
font-size: 1.25rem;
padding-top: 10px;	
	
}

#kontakt h2 {
	margin: 15px 0;
	text-align: center;
	
}


#kontakt img{
max-width: 50%;
margin: 5% 30%;
}




form {
	display: flex;
	flex-direction: column;
	text-align: left;
	margin: auto;
	padding: 25px;
	border: 2px solid #043152;
	border-radius: 10px;
    max-width: 550px;
	width: 100%;
	/* Box-Schatten: x-Verschiebung, y-Verschiebung, Unschärfe, Ausbreitung, Farbe */
    box-shadow: 5px 5px 10px 0 rgba(4, 49, 82, 0.6);

}

label {
    font-size: 16px;
    margin-bottom: 5px;
	color: #043152;
	font-weight: 600;

	
}

input, textarea, select {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #043152;
    border-radius: 4px;
}



button {
	display:block;
    padding: 10px;
    background-color: #043152;
    color: #fefefe;
	font-size: 16px;
    border: 1px solid #2b303e;
    cursor: pointer;
}

button:hover {
    padding: 10px;
    background-color: #c1ff72;
	color: #2b303e;
    border: 1px solid #2b303e;
    cursor: pointer;
}

/*News */


#news {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 50px 20px; /* Mehr Platz zu den Rändern */
    background: #043152;
    color: #fefefe;
}
#news .wrapper {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

#news .row {
    display: flex;
    flex-wrap: wrap; /* Erlaubt das Untereinanderschieben */
    justify-content: center; /* Zentriert die Blöcke, wenn sie umbrechen */
    gap: 40px; /* Eleganter Abstand zwischen den Blöcken */
}

#news h1 {
    width: 100%; /* H1 nimmt die ganze Breite ein, damit Spalten darunter starten */
    margin-bottom: 40px;
    font-size: 2.25rem;
    font-weight: 600;
}

#news h2 {
    color: #e8fd72;
    font-size: 1.75rem;
    margin-bottom: 15px;
}

#news .col_1_2 {
    flex: 1 1 350px; /* Flex-Basis von 350px - darunter wird umgebrochen */
    max-width: 500px; /* Verhindert, dass die Blöcke auf Riesenbildschirmen zu breit werden */
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert Inhalte (Bild/Video/Text) im Block */
}

/* WICHTIG: keineFeste Breiten bei Texten! */
#news p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 100%; /* Nutzt den Platz des Containers */
    padding: 0 10px; /* Kleiner Seitenabstand für Lesbarkeit */
}

#news img, #news video {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 100%;
    height: auto; /* Proportional skalieren */
    border-radius: 8px; /* Optional: sieht moderner aus */
}



/*Ux Design Portfolio */

#uxdesign {
display: flex;
flex-direction: column;
padding-top: 60px;
min-height: 450px;
text-align: center;
}


#uxdesign .col_1_2 {
	text-align: left;

}


#uxdesign img {
display: flex;
margin-left: auto;
}

/*Footer */

footer {
display: flex;
flex-direction: column;
background: #043152;
border-top: solid 2px #e8fd72;
color: #fefefe;
font-size: 14px;
}

footer img {
display: inline-block; /*Damit es wie ein Block-Element wirkt */
border: none;
}


footer a {
display: inline-block;
font-size: 18px;
font-weight: 400;  
color: #fefefe;
}


footer a:hover {
font-size: 18px;
font-weight: 400;  
color: #e8fd72;
	background: none;
display: inline-block;
}


/* to top-Button */

#totop {
	position: fixed;
	right: 50px;
	bottom: 50px;
	background: #e8fd72;
	color: #043152;
	padding: 10px;
	border: 2px solid #2b303e;
	border-radius: 15px;
	font-size: 28px;
	line-height: 1;
	display: none;
	text-decoration: none;
}

#totop:hover {
	text-decoration: none;
	background: #043152;
	color: #e8fd72;
}


/* Wenn der Button nur im Footer stehen soll:

#totop{
	position: absolute;
	right: 30px;
	bottom: 30px;
}
*/


/*one Pager Ende*/

/*Extra Seite Impressum */

#impressum h1 {
color: #043152;
font-size: 2.25rem; /*36px Schriftgröße h1 angepasst */
font-weight:600;/*Schriftdicke h1 angepasst */

}

/*Extra Seite Datenschutz */

#datenschutz h1 {
color: #043152;
font-size: 2.25rem; /*36px Schriftgröße h1 angepasst */
font-weight:600;/*Schriftdicke h1 angepasst */
}




/* ----Media Queries -----*/



@media only screen and (max-width: 1300px) {
	.slider {
		width: 100%;
		height: 0;
		padding-bottom: 60%;
		/*
		padding-bottom: 100%;
		background: red;
		*/
	}
}


/* Korrektur für die mittlere Karte (pro), damit sie mobil nicht verschoben ist */
@media (max-width: 1100px) {
    .karte_pro {
        top: 0; /* Hebt die Verschiebung auf kleinen Bildschirmen auf */
    }
    #service .col_1_3 {
        max-width: 90%; /* Karten fast volle Breite auf Handy */
    }
}



@media only screen and (max-width: 950px) {
	.col_1_2,
	.col_1_3,
	.col_2_3,
	.col_1_4,
	.col_3_4,
	.no-gutter .col_1_2,
	.no-gutter .col_1_3,
	.no-gutter .col_2_3,
	.no-gutter .col_1_4,
	.no-gutter .col_3_4 {
		width: 100%;
	}
	.column {
		margin-left: 0;
	}
	section {
		padding: 40px 0;
	}
	.light {
		margin: 40px 0;
	}
		
	#hero h1 {
		font-size: 8vw;
	}
	#hero h2 {
		font-size: 5vw;
		/* 30px; */
	}
	#hero img {
		display: none;
	}
	.slider {
		display: none;		
	}
	.stay {
		display: block; 
		margin-left: 10%; 
}
	
	
	header .col_1_4 {
		margin:0;
	}
.plusnavi{
	display: flex;
	flex-basis: auto;
	margin:0 auto;
	padding-top: 10px;
		}
	
}


/* Optimierung für mobile Bildschirme (max. 768px Breite) */
@media (max-width: 768px) {
    #webdesign {
        padding: 20px 10px;
    }

    #webdesign .row {
        flex-direction: column; /* Stapelt die Elemente untereinander */
        align-items: center;    /* Zentriert sie horizontal im Viewport */
    }

    #webdesign .col_1_2 {
        margin: 10px 0;         /* Weniger Abstand an den Seiten */
        max-width: 90%;         /* Nutzt fast die volle Breite */
    }

    #webdesign p {
        height: auto;           /* Verhindert riesige Lücken auf dem Handy */
        margin-bottom: 30px;
    }
}


@media only screen and (max-width: 680px ){
	
	.col_1_2,
	.col_1_3,
	.col_2_3,
	.col_1_4,
	.col_3_4,
	.no-gutter .col_1_2,
	.no-gutter .col_1_3,
	.no-gutter .col_2_3,
	.no-gutter .col_1_4,
	.no-gutter .col_3_4 {
		width: 100%;
	}
	.column {
		margin-left: 0;
	}
	section {
		padding: 40px 0;
	}
		
	
	.slider {
		display: none;		
	}
	.stay {
		display: block; 
		margin-left: 10%; 
}
	
	/* Responsive Navigation */
	header .col_1_4 {
		margin:0;
	}
	.plusnavi{
	display: flex;
	flex-basis: auto;
	margin:0 auto;
	padding-top: 10px;
		}
	
}



/* Druckformatierung */

@media print {

	header, footer {
		display: none;
	}

	p, blockquote { 
    	font-family: Arial, sans-serif;
		font-size: 10pt;
	}

	h1, h2, h3, h4, h5, h6 { 
		font-family: Arial, sans-serif; 
		font-size: 18pt; 
		color: #000;
		font-style: normal;
	}
	
	section{
		padding: 0;
	}

}