/*  Fonts */
@font-face {
    font-family: 'Roboto';
    src: url('roboto-regular.woff') format('woff'),
		 url('roboto-regular.woff2') format('woff2'),
		 url('roboto-regular.ttf') format('truetype');
    font-weight: normal; /* 400 */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('roboto-medium.woff') format('woff'),
		 url('roboto-medium.woff2') format('woff2'),
		 url('roboto-medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('roboto-bold.woff') format('woff'),
		 url('roboto-bold.woff2') format('woff2'),
		 url('roboto-bold.ttf') format('truetype');
    font-weight: bold; /* 700 */
    font-style: normal;
}

/*  Der * definiert den "global reset" Hier werden alle Elemente angesprochen, die später nicht anders definiert werden. */
*
{
/* margin definiert den Aussenabstand einer Box */	
	margin:0px;	
/* padding definiert den Innenabstand einer Box */
	padding:0px;
/* font-family definiert die Schriftart */	
	font-family:sans-serif;
/* position:relative definiert die Startposition einer Box */	
	position:relative;
/*  box-sizing:border-box definiert das padding und border NICHT zu Breite und Höhe dazu addiert werden  */	
	box-sizing:border-box;
}

html,body {
	height:100%;
}

html {
    scroll-behavior: smooth;
}

body {
	background:#fefefd;
	color:#5c5c5c;
	margin:0px;
}

.portfolio-container {
	align-items: center;
	background-color: #fefefd;
	display: flex;
	flex-direction: column;
}

/* Anfang Navigation Top */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fefefd;
    padding: 32px 80px;
    width: 100%;
	max-width: 1440px;
    box-sizing: border-box;
	position: relative; /* Ermöglicht, dass sich die Navigation über andere Inhalte legt */
}

nav .logo {
    width: 70px;
    height: 70px;
    background-color: #948665;
    color: #fefefd;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 187.5%; /* 30px */
    display: flex;
    justify-content: center;
    align-items: center;
}

nav .logo:hover {
    background-color: #948665;
    color: #fefefd;
	opacity: 0.7;
}

.nav-left {
	display: flex;
}

#choice {
	font-weight: bold;
	color: #948665;
}

#choice-footer {
	font-weight: 500;
	color: #948665;
}

.language-switcher {
    color: #5c5c5c;
    text-decoration: none;
	font: 400 106.25% 'Roboto', sans-serif; /*17px*/
    text-transform: uppercase;
	display: flex;
	justify-content: center;
    align-items: center;
}

.language-switcher:hover {
    color: #948665;
}

.german {
    padding-right: 10px;
	border-right: 1.6px solid #948665;
	padding-left: 40px;
	font-family: 'Roboto', sans-serif;
}

.english {
	padding-left: 10px;
	font-family: 'Roboto', sans-serif;
}

nav .menu-icon {
    display: none;
    cursor: pointer;
    /* Macht das Menü-Icon rechts außen sichtbar */
    position: absolute;
}

.menu-icon div {
    width: 35px;
    height: 2px;
    background-color: #948665;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

nav .nav-container {
    display: flex;
    justify-content: flex-end; /* Positioniert die Navigationslinks rechts außen in der Desktop-Version */
    flex-grow: 1;
}

nav .nav-links {
    list-style: none;
    display: flex;
    flex-direction: row;
}

nav .nav-links li {
    margin: 0 20px; /* Abstand zwischen den Links */
}

nav .nav-links a {
    color: #5c5c5c;
    text-decoration: none;
	font: 400 106.25% 'Roboto', sans-serif; /*17px*/
    text-transform: uppercase;
}

nav .nav-links a:hover {
    color: #948665;
}

/* Ansicht auf welcher Seite ich mich befinde */
#ichbinda a {
	color:#948665;
	text-decoration: underline;
	text-underline-offset: 10px; /* Abstand der Unterstreichung zum Text */
}
/* Ende Navigation Top */

/* Anfang Überschriften und Fließtext */
/* h1 */
.section-title {
	color: #5c5c5c;
	text-align: center;
	text-transform: uppercase;
	margin-top: 80px;
	font: 400 375% 'Roboto', sans-serif; /*60px*/
}

/* Linie unter h1 */
.title-underline {
	border-bottom: 1.6px solid #948665;
	width: 86px;
	height: 24px;
	margin: 0 auto; /* Zentriert das Element horizontal */
    display: block; /* Stellen Sie sicher, dass es als Block-Element behandelt wird */
}

/* Bodytext mit 640px Breite */
.body-text {
	color: #5c5c5c;
	margin-top: 48px;
	width: 640px;
	font: 400 131.25%/155% 'Roboto', sans-serif; /* 21px */
	margin-left: auto;
    margin-right: auto;
}

/* Bodytext mit Linie oben und unten */
.highlight-text {
	justify-content: center;
	border-top: 1.5px solid #BFB6A3;
	border-bottom: 1.5px solid #BFB6A3;
	margin-top: 48px;
	width: 640px;
	max-width: 100%;
	color: #5c5c5c;
	padding: 14px 0px;
	font: 400 131.25%/155% 'Roboto', sans-serif; /* 21px */
	margin-left: auto;
    margin-right: auto;
}

/* Textblock Impressum */
.info-section {
	font-family: 'Roboto', sans-serif;
	line-height: 155%;
	align-self: center;
	margin-top: 48px;
	width: 640px;
}

/* Textblock Datenschutz */
.datenschutz-section {
	font-family: 'Roboto', sans-serif;
	line-height: 155%;
	align-self: center;
	width: 640px;
	margin-top: 16px;
}

/* h2 */
h2 {
	font: 400 187.5% 'Roboto', sans-serif; /* 30px */
	padding-top: 32px;
}

/* h3 */
.info-title {
	font-weight: 700;
	font-size: 131.25%; /* 21px */
	line-height: 155%;
	padding-top: 12px;
}

/* h4 */
h4 {
	font: 500 131.25%/155% 'Roboto', sans-serif; /* 21px */
}

/* p */
p  {
	font: 400 131.25%/155% 'Roboto', sans-serif; /* 21px */
}

.bullet-list{
	padding-left: 30px;
}

.bullet-list li{
	font: 400 131.25%/155% 'Roboto', sans-serif; /* 21px */
}

/* farbiger Link */
.link {
	color: #948665;
}

/* CSS für den Scroll-to-top Button */
.scroll-to-top {
    position: fixed;
    bottom: 112px;
    /*right: 80px;*/
    color: #fefefd;
    display: none;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s ease;
	text-align: right;
	width: 100%;
    max-width: 1280px;
}

.scroll-to-top:hover {
    opacity: 0.7;
}

.scroll-icon {
    background-color: #948665;
	height: 48px;
	width: 48px;
}
/* Ende Überschriften und Fließtext */

/* Anfang Intro Index */
.intro-section {
	margin-top: 60px;
}

.intro-container { 
	display: flex;
	gap: 9.08%; /* Abstand 105px */
}

.intro-image {
    flex: 0 0 35%; /* Feste Breite von 37.4% */
    max-width: 432px; /* Sicherstellen, dass die Bildbreite nicht über 432px geht */
}

.intro-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.intro-text { 
    flex: 1 1 55%; /* Feste Breite von 53,5% */
    display: flex; 
    flex-direction: column; 
    color: #5c5c5c; 
    font-weight: 400; 
    max-width: 620px; /* Sicherstellen, dass die Textbreite nicht über 620px geht */
}

.intro-greeting { 
	font: 400 187.5% 'Roboto', sans-serif; /* 30px */ 
}

.intro-title {
	color: #5c5c5c;
	text-transform: uppercase;
	margin-top: 10px;
	font: 400 375% 'Roboto', sans-serif; /*60px*/
}

.intro-description { 
	margin-top: 40px;
	font: 400 131.25%/155% 'Roboto', sans-serif; /* 21px */
 }
/* Ende Intro Index */

/* Anfang Projekte Index */
.project-container { 
	margin-top: 58px; 
	width: 100%;
	max-width: 1280px;
	transition: transform 0.3s ease; /* Übergangseffekt */
	transform-origin: center; /* Transformationsursprung */
	box-sizing: border-box; /* Box-Sizing */
}

.project-container:hover {
	transform: scale(1.05); /* Vergrößerung beim Hovern */
}

.project-row {
	display: flex; 
	box-sizing: border-box; /* Box-Sizing */
	width: 100%; /* Stellen Sie sicher, dass der Flex-Container die volle Breite einnimmt */
	height: auto; /* Lassen Sie die Höhe automatisch sein, basierend auf dem Inhalt */
}

.project-row-switch {
	display: flex; 
	box-sizing: border-box; /* Box-Sizing */
	flex-direction: row; /* Standard: Reihenlayout */
	width: 100%; /* Stellen Sie sicher, dass der Flex-Container die volle Breite einnimmt */
	height: auto; /* Lassen Sie die Höhe automatisch sein, basierend auf dem Inhalt */
}

.project-image {
	flex: 1 1 50%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 50% */
    overflow: hidden; /* Überlauf ausblenden */
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image img {
    width: auto;
    height: 100%;
    object-fit: cover; /* Verhindert Verzerrung und schneidet das Bild proportional zu */
    display: block;
}

.project-details-right { 
	border-top: 1.5px solid #BFB6A3;
	border-bottom: 1.5px solid #BFB6A3;
	border-right: 1.5px solid #BFB6A3;
	background-color: #fefefd; 
	display: flex; 
	flex: 1 1 50%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 50% */
	flex-direction: column; 
	color: #5c5c5c; 
	padding: 36px 40px 36px 40px;
	box-sizing: border-box; /* Box-Sizing */
}

.project-details-left { 
	border-top: 1.5px solid #BFB6A3;
	border-bottom: 1.5px solid #BFB6A3;
	border-left: 1.5px solid #BFB6A3;
	background-color: #fefefd; 
	display: flex; 
	flex: 1 1 50%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 50% */
	flex-direction: column; 
	color: #5c5c5c; 
	padding: 36px 40px 36px 40px;
	box-sizing: border-box; /* Box-Sizing */
}

.project-title { 
	font: 700 150%/155% 'Roboto', sans-serif; /* 24px */
}

.subline-title { 
	font: 400 106.25%/140% 'Roboto', sans-serif; /* 17px */
	opacity: 0.7;
}

.project-description { 
	margin-top: 28px; 
	font: 400 106.25%/140% 'Roboto', sans-serif; /* 17px */
}

.project-link { 
	justify-content: center; 
	border: 1.6px solid #948665;
	background-color: #fefefd; 
	align-self: start; 
	margin-top: 48px;
	font: 400 17px 'Roboto', sans-serif;
	padding: 12px 32px;
	cursor: pointer;
	text-transform: uppercase;
}
/* Ende Projekte Index */

/* Anfang Kontakt Index */
.contact-title { 
	font: 400 187.5% 'Roboto', sans-serif; /* 30px */
	padding-top: 48px;
}

.contact-description { 
	margin-top: 32px; 
	font: 400 131.25%/155% 'Roboto', sans-serif; /* 21px */
	max-width: 597px;
	text-align: center;
}
/* Ende Kontakt Index */

/* Anfang Sidenav Projekte */
.sticky {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding-left: 80px;
    max-width: 1440px;
    font-family: 'Roboto', sans-serif;
}

.sidenav {
    width: 88px;
    position: absolute;
    top: 80px;
    left: 80px;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column; /* Links untereinander anordnen */
}

.sidenav a {
    text-decoration: none;
    color: #5c5c5c;
    font-weight: normal;
    font-size: 106.25%; /* 17px */
    font-family: 'Roboto', sans-serif;
    margin-bottom: 24px; /* Abstand zwischen den Links */
}

.sidenav a:hover {
    font-weight: bold;
}

.sidenav .highlighted-item {
    font-weight: bold;
    color: #948665;
}

#userflow {
    scroll-margin-top: -100px;
}

#personas, #storyboard, #design, #prototype {
    scroll-margin-top: -24px;
}
/* Ende Sidenav Projekte */

/* Anfang Plant App */
.plant-hero {
    width: 100%;
	height: auto; /*516px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #E7F3DF, #DAEDCE);
	position: relative;
}

.plant-intro-section {
	max-width: 640px;
	padding-top:40px;
}

.plant-intro-container {
    width: calc(100% + 2px); /* Erhöht die Breite um 2px */
    box-sizing: border-box; /* Sicherstellen, dass Padding und Border die Gesamtbreite nicht beeinflussen */
}

.info-bar {
    border-top: 1.5px solid #BFB6A3;
    border-bottom: 1.5px solid #BFB6A3;
    display: flex;
    margin-top: 34px;
	margin-bottom: 24px;
    padding: 16px 0;
    justify-content: space-between; /* Verteilung der Items mit Abstand */
}

.info-item {
    text-align: left; /* Text links ausrichten */
}

.title-item {
    font: 700 106.25% 'Roboto', sans-serif; /* 17px */
}

.text-item {
    font: 400 106.25%/140% 'Roboto', sans-serif; /* 17px */
}

/* Breite Strategien Bereich */
.info-item-grow {
    flex: 1; /* Automatisches Wachstum */
	flex-basis: auto;
	max-width: 332px;
}

/* Breite Werkzeuge Bereich */
.info-item-wider {
    max-width: 132px;
}

.portfolio-body-text {
	color: #5c5c5c;
	margin-top: 9px;
	max-width: 640px;
	font: 400 131.25%/155% 'Roboto', sans-serif; /* 21px */
	margin-left: auto;
    margin-right: auto;
}

.portfolio-info-title {
	font: 700 131.25%/155% 'Roboto', sans-serif; /* 21px */
	padding-top: 48px;
}

/* Anfang Persona Plant App */
/* Bodytext mit Linie oben und unten */
.highlight-text-persona {
	justify-content: center;
	border-top: 1.5px solid #BFB6A3;
	border-bottom: 1.5px solid #BFB6A3;
	margin-top: 50px;
	width: 640px;
	max-width: 100%;
	color: #5c5c5c;
	padding: 14px 90px;
	text-align: center;
	font: 400 131.25%/155% 'Roboto', sans-serif; /* 21px */
	margin-left: auto;
    margin-right: auto;
}

.persona-profile-plants { 
    display: flex;
    gap: 5.94%; /* Abstand zwischen Bild und Textblock als Prozent */
    max-width: 808px;
	margin-top: 48px;
	margin-bottom:18px;
}

.persona1-plant-image-quer { 
	display: none;
    width: 100%;
    /* Querformat Bild wird nur auf mobilen Geräten angezeigt */
}

.persona2-plant-image-quer { 
	display: none;
    width: 100%;
    /* Querformat Bild wird nur auf mobilen Geräten angezeigt */
}

.persona-image {
    flex-basis: 34.05%; /* Bildbreite als Prozent */
    max-width: 100%;
}

.persona-image img {
    width: 100%; /* Bild passt sich an die Größe des Containers an */
    height: auto; /* Beibehaltung der Proportionen */
}

.persona-text {
    flex-basis: 60.01%; /* Textblockbreite als Prozent */
    max-width: 100%;
}

.persona-title { 
	font: 700 150%/140% 'Roboto', sans-serif; /* 24px */
	Margin-top:-5px;
}

.persona-subline { 
	font: 700 106.25%/140% 'Roboto', sans-serif; /* 17px */
	padding-top: 26px;
}

.persona-description { 
	font: 400 106.25%/140%'Roboto', sans-serif; /* 17px */
}

.persona-bullet-list {
	padding-left: 26px;
}

.persona-bullet-list li {
	font: 400 106.25%/140% 'Roboto', sans-serif; /* 17px */
}
/* Ende Persona Plant App */

/* Anfang User Flow Plant App */
.user-flow-background {
    background-color: #F9F8F8;
    width: 100vw; /* Volle Breite des Viewports */
    position: relative; /* Positionierungskontext */
}

.user-flow-container {
    max-width: 100%; /* Maximalbreite des Inhaltsbereichs */
    margin: 0 auto; /* Zentriert den Container horizontal */
    box-sizing: border-box; /* Stellt sicher, dass Padding in die Breite einberechnet wird */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 80px; /* Abstand oben */
}

.user-flow-section-title {
	color: #5c5c5c;
	text-align: center;
	text-transform: uppercase;
	font: 400 375% 'Roboto', sans-serif; /*60px*/
	padding-top: 80px;
}

.underline-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.user-flow-plant {
    margin-top: 48px;
	margin-bottom: 80px;
}
/* Ende User Flow Plant App */

/* Anfang Storyboard Plant App */
.storyboard-plant {
    margin-top: 48px;
	margin-bottom: 20px;
	text-align: center; /* Zentriert den Inhalt des Containers */
}

.wireframes-plant {
    margin-top: 80px;
	text-align: center; /* Zentriert den Inhalt des Containers */
}

/* Bild im Wireframes-Plant Container */
.wireframes-plant img {
    display: block; /* Macht das Bild als Block-Element */
    margin: 0 auto; /* Zentriert das Bild innerhalb des Containers */
}
/* Ende Storyboard Plant App */

/* Anfang Design Plant App */
.styleguide-plant {
    margin-top: 80px;
}
.components-plant {
    margin-top: 80px;
}
/* Ende Design Plant App */

/* Anfang Prototype Plant App */
.prototype-container {
    width: 100vw; /* Stellt sicher, dass der Container die gesamte Breite des Viewports einnimmt */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F9F8F8;
    margin-top: 80px; /* Wenn der Abstand oben notwendig ist */
    margin-left: calc(-50vw + 50%); /* Zentriert den Container und sorgt für volle Breite */
	padding-bottom: 48px;
}

.prototype-container-innen {
    width: 100vw; /* Stellt sicher, dass der Container die gesamte Breite des Viewports einnimmt */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F9F8F8;
    margin-left: calc(-50vw + 50%); /* Zentriert den Container und sorgt für volle Breite */
	padding-bottom: 48px;
}

.portfolio-content {
	display: flex;
    flex-direction: row;
	justify-content: center;
    align-items: center;
	gap: 48px;
	padding-top: 48px;
}

.portfolio-content-ratgeber {
	display: flex;
    flex-direction: row;
	justify-content: center;
    align-items: center;
	gap: 48px;
	padding-top: 48px;
	padding-bottom: 48px;
}

.video-wrapper {
	width: 280px; /* Breite des Containers */
	height: 611px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.video-container {
	width: 280px; 
	height: auto;
	overflow: hidden; 
	border-radius: 20px;
}

.video-container video {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}

.portfolio-text {
	width: 438px;
}

.portfolio-title { 
	font: 700 150%/140% 'Roboto', sans-serif; /* 24px */
}

.portfolio-description { 
	font: 400 106.25%/140%'Roboto', sans-serif; /* 17px */
	padding-top: 9px;
}

.screen-wrapper {
	width: 280px; /* Breite des Containers */
	height: 607px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}
/* Ende Prototype Plant App */

/* Anfang mehr entdecken Plant App */
.discover-link-wrapper {
    display: block;
    text-decoration: none; /* Entfernt die Standardlinkdekoration */
    color: inherit; /* Beibehaltung der Textfarbe */
}

.discover-more {
    display: flex;
    width: 558px;
    height: 266px;
    padding: 40px 40px 0px 40px;
    align-items: flex-start;
    gap: 40px;
    border-radius: 20px;
    background: linear-gradient(to right, #F5F3EF, #E5DED4);
    margin-top: 80px;
	margin-bottom: 20px;
    overflow: hidden; /* Versteckt Überlauf */
    transition: transform 0.3s; /* Optional: fügt eine Hover-Animation hinzu */
}

.discover-more:hover {
    transform: scale(1.02); /* Optional: vergrößert die Kachel leicht bei Hover */
}

/* Sicherstellt, dass der Text nicht seine Farbe ändert */
.discover-link-wrapper:hover .discover-text,
.discover-link-wrapper:hover .discover-info-title,
.discover-link-wrapper:hover .more {
    color: #5C5C5C; /* Beibehaltung der gewünschten Farbe beim Hover */
}

.discover-text {
    width: 271px;
    display: flex;
    flex-direction: column;
}

.title-discover {
    font: 400 106.25% 'Roboto', sans-serif; /*17px*/
    text-transform: uppercase;
}

.discover-info-title {
    font: 500 150%/135% 'Roboto', sans-serif; /* 24px */
    padding-top: 20px;
    padding-bottom: 20px;
}

.discover-link {
    display: flex;
    gap: 4px;
    align-items: center; /* Zentriert die Elemente vertikal */
}

.more {
    font: 500 106.25% 'Roboto', sans-serif; /* 17px */
}

.discover-image {
    width: 167px; 
    height: 226px;
    border-radius: 10px 10px 0 0;
    box-shadow: 8px 8px 32px 0 rgba(74, 57, 33, 0.35);
    overflow: hidden; /* Verhindert, dass der Inhalt überläuft */
}

.discover-dog-image {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0; /* Rundet die oberen Ecken ab */
    object-fit: cover; /* Sorgt dafür, dass das Bild das div ausfüllt */
}
/* Ende mehr entdecken Plant App */
/* Ende Plant App */

/* Anfang Dog App */
.dog-hero {
    width: 100%;
	height: auto; /*516px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #F3EFEB, #E5DED4);
	position: relative;
}

/* Breite Werkzeuge Bereich */
.info-item-wider-restaurant,
.info-item-wider-dog {
    max-width: 150px;
}

/* Anfang Nutzer Dog App */
.user-groups {
	margin-top: 80px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 18px;
	max-width: 1058px;
	width: 100%;
	height: auto;
}

.user1 {
	padding-right: 32px;
	border-right: 1.5px solid #BFB6A3;
	max-width: 342px;
	display: flex;
	flex-direction: column;
}

.user2 {
	padding-right: 32px;
	padding-left: 32px;
	border-right: 1.5px solid #BFB6A3;
	max-width: 374px;
	display: flex;
	flex-direction: column;
}

.user3 {
	padding-left: 32px;
	max-width: 342px;
	display: flex;
	flex-direction: column;
}

.user1-dog-image-mobile, .user2-dog-image-mobile, .user3-dog-image-mobile { 
	display: none;
    width: 100%;
    /* Bilder werden nur auf mobilen Geräten angezeigt */
}

.user-image img {
	width: 100%;
	height: 100%;
}

.user-text {
	padding-top: 48px;
}

.user-title {
	font: 700 150%/130% 'Roboto', sans-serif; /* 24px */
}

.user-zitat {
	font: 400 106.25%/140%'Roboto', sans-serif; /* 17px */
	padding-top: 6px;
	padding-bottom: 24px;
}

.user-subline { 
	font: 700 106.25%/140% 'Roboto', sans-serif; /* 17px */
}

.user-description { 
	font: 400 106.25%/140%'Roboto', sans-serif; /* 17px */
}
/* Ende Nutzer Dog App */

/* User flow Dog App */
.user-flow-dog {
    margin-top: 48px;
	margin-bottom: 80px;
}

/* Anfang Skizzen Dog App */
.wireframes-dog {
    margin-top: 48px;
	text-align: center; /* Zentriert den Inhalt des Containers */
}
/* Ende Skizzen Dog App */

/* Anfang Design Dog App */
.styleguide-dog {
    margin-top: 80px;
}

.components1-dog {
    margin-top: 80px;
}

.components2-dog {
    margin-top: 16px;
}
/* Ende Design Dog App */

/* Anfang Prototype Dog App */
.prototype-container-dog {
    width: 100vw; /* Stellt sicher, dass der Container die gesamte Breite des Viewports einnimmt */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F9F8F8;
    margin-top: 48px; /* Wenn der Abstand oben notwendig ist */
    margin-left: calc(-50vw + 50%); /* Zentriert den Container und sorgt für volle Breite */
	padding-bottom: 48px;
}

.portfolio-content-dog {
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
	gap: 48px;
}

.dog-text {
	display: flex;
	flex-direction: column;
	max-width: 640px;
}

.portfolio-info-title-dog {
	font: 700 131.25%/155% 'Roboto', sans-serif; /* 21px */
	padding-top: 42px;
}

.video-wrapper-dog {
	width: 278px; /* Breite des Containers */
	height: 606px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.video-container-dog {
	width: 278px; 
	height: auto;
	overflow: hidden;
	border-radius: 20px;
	margin-top: -2px;
}

.video-container-dog video {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}

.dog-screens {
	gap: 40px;
	display: flex;
	flex-direction: row;
}

.screen-wrapper-dog-quiz-small-1 {
	width: 199px; /* Breite des Containers */
	height: 433px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 85px;
}

.screen-wrapper-dog-quiz-small-2 {
	width: 199px; /* Breite des Containers */
	height: 433px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 170px;
}

.screen-wrapper-dog-quiz-small-3 {
	width: 199px; /* Breite des Containers */
	height: 433px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 67px;
}

.screen-wrapper-dog-quiz-big {
	width: 278px; /* Breite des Containers */
	height: 604px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-dog-result-small-1 {
	width: 199px; /* Breite des Containers */
	height: 433px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 233px;
}

.screen-wrapper-dog-result-big {
	width: 278px; /* Breite des Containers */
	height: 899px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-dog-result-small-2 {
	width: 199px; /* Breite des Containers */
	height: 722px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 88px;
}

.screen-wrapper-dog-profil-1 {
	width: 199px; /* Breite des Containers */
	height: 664px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 122px;
}

.screen-wrapper-dog-profil-big {
	width: 278px; /* Breite des Containers */
	height: 909px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-dog-profil-3 {
	width: 199px; /* Breite des Containers */
	height: 639px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 135px;
}
/* Ende Prototype Dog App */

/* Anfang mehr entdecken Dog App */
.discover-more-restaurant {
    display: flex;
    width: 558px;
    height: 266px;
    padding: 40px 40px 0px 40px;
    align-items: flex-start;
    gap: 40px;
    border-radius: 20px;
    background: linear-gradient(to right, #D7EDE3, #B2DDCF);
    margin-top: 80px;
	margin-bottom: 20px;
    overflow: hidden; /* Versteckt Überlauf */
    transition: transform 0.3s; /* Optional: fügt eine Hover-Animation hinzu */
}

.discover-more-restaurant:hover {
    transform: scale(1.02); /* Optional: vergrößert die Kachel leicht bei Hover */
}

.discover-image-restaurant {
    width: 167px; 
    height: 226px;
    border-radius: 10px 10px 0 0;
    box-shadow: 11px 11px 45px 0px rgba(81, 118, 105, 0.35);
    overflow: hidden; /* Verhindert, dass der Inhalt überläuft */
}
/* Ende mehr entdecken Dog App */
/* Ende Dog App */

/* Anfang Restaurant App */
.restaurant-hero {
    width: 100%;
	height: auto; /*516px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #D7EDE3, #B2DDCF);
	position: relative;
}

/* Anfang Nutzer Restaurant App */
.nutzer-restaurant {
	max-width: 812px;
	height: auto;
	width: 100%;
	gap: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 80px;
	margin-bottom: 14px;
}

.nutzer-profile-restaurant {
	display: flex;
	flex-direction: row;
	gap: 5.91%; /* Bildbreite als Prozent 48px */
	align-items: center; /* Zentriert den Textblock vertikal zum Bild */
}

.nutzer-image-restauarant {
	flex-basis: 40.15%; /* Bildbreite als Prozent */
    max-width: 100%;
}

.nutzer-image-restauarant img {
    width: 100%; /* Bild passt sich an die Größe des Containers an */
    height: auto; /* Beibehaltung der Proportionen */
}

.nutzer-text-restaurant {
	flex-basis: 53.95%; /* Textblockbreite als Prozent */
    max-width: 100%;
	display: flex; /* Textblock selbst als Flexbox */
    flex-direction: column; /* Textinhalt bleibt untereinander */
    justify-content: center; /* Zentriert den Textinhalt vertikal */
}

.nutzer-title-restaurant {
	font: 700 150%/140% 'Roboto', sans-serif; /* 24px */
	padding-bottom: 9px;
}
/* Ende Nutzer Restaurant App */

/* User flow Restaurant App */
.user-flow-restaurant {
    margin-top: 48px;
	margin-bottom: 80px;
}

/* Anfang Wireframes Restaurant App */
.skizzen-restaurant {
	margin-top: 48px;
	margin-bottom: 20px;
	text-align: center; /* Zentriert den Inhalt des Containers */
}

.wireframes-screens {
	display: flex;
	flex-direction: row;
	gap: 44px;
	margin-top: 48px;
	justify-content: center;
}

.wireframes-restaurant-column1,
.wireframes-restaurant-column2,
.wireframes-restaurant-column3,
.wireframes-restaurant-column4 {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.wireframes-restaurant-column2 {
	margin-top: 24px;
}

.wireframes-restaurant-column1,
.wireframes-restaurant-column3 {
	margin-top: 73px;
}

.screen-wrapper-restaurant-wireframes-1,
.screen-wrapper-restaurant-wireframes-2,
.screen-wrapper-restaurant-wireframes-3,
.screen-wrapper-restaurant-wireframes-4,
.screen-wrapper-restaurant-wireframes-5,
.screen-wrapper-restaurant-wireframes-11 {
	width: 220px; /* Breite des Containers */
	height: 480px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-restaurant-wireframes-6 {
	width: 220px; /* Breite des Containers */
	height: 687px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-restaurant-wireframes-7 {
	width: 220px; /* Breite des Containers */
	height: 592px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-restaurant-wireframes-8 {
	width: 220px; /* Breite des Containers */
	height: 569px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-restaurant-wireframes-9 {
	width: 220px; /* Breite des Containers */
	height: 685px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-restaurant-wireframes-10 {
	width: 220px; /* Breite des Containers */
	height: 505px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-restaurant-wireframes-12 {
	width: 220px; /* Breite des Containers */
	height: 680px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}
/* Ende Wireframes Restaurant App */

/* Anfang Styleguide Restaurant App */
.styleguide-restaurant {
    margin-top: 80px;
}

.components1-restaurant {
    margin-top: 65px;
}

.components2-restaurant {
    margin-top: 26px;
}
/* Ende Styleguide Restaurant App */

/* Anfang Prototype Restaurant App */
.prototype-container-restaurant {
    width: 100vw; /* Stellt sicher, dass der Container die gesamte Breite des Viewports einnimmt */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F9F8F8;
    margin-top: 48px; /* Wenn der Abstand oben notwendig ist */
    margin-left: calc(-50vw + 50%); /* Zentriert den Container und sorgt für volle Breite */
	padding-bottom: 48px;
}

.screen-wrapper-restaurant-onboarding-1,
.screen-wrapper-restaurant-onboarding-2,
.screen-wrapper-restaurant-onboarding-3,
.screen-wrapper-restaurant-result-1,
.screen-wrapper-restaurant-result-2 {
	width: 278px; /* Breite des Containers */
	height: 605px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.screen-wrapper-restaurant-detail-1 {
	width: 278px; /* Breite des Containers */
	height: 782px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 110px;
}

.screen-wrapper-restaurant-detail-2 {
	width: 278px; /* Breite des Containers */
	height: 753px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
	margin-top: 70px;
}

.screen-wrapper-restaurant-detail-3 {
	width: 278px; /* Breite des Containers */
	height: 892px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.restaurant-videos {
	gap: 40px;
	display: flex;
	flex-direction: row;
}

.video-wrapper-restaurant {
	width: 278px; /* Breite des Containers */
	height: 610px;
	position: relative;
	border-radius: 20px;
	overflow: hidden; /* Versteckt Überlauf */
	box-shadow: 6px 6px 27px rgba(138, 138, 138, 0.25);
	border: 2px solid #E1E1E1;
}

.video-container-restaurant {
	width: 278px; 
	height: auto;
	overflow: hidden;
	border-radius: 20px;
}

.video-container-restaurant video {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}
/* Ende Prototype Restaurant App */

/* Anfang mehr entdecken Restaurant App */
.discover-more-plant {
    display: flex;
    width: 558px;
    height: 266px;
    padding: 40px 40px 0px 40px;
    align-items: flex-start;
    gap: 40px;
    border-radius: 20px;
    background: linear-gradient(to right, #E7F3DF, #DAEDCE);
    margin-top: 80px;
	margin-bottom: 20px;
    overflow: hidden; /* Versteckt Überlauf */
    transition: transform 0.3s; /* Optional: fügt eine Hover-Animation hinzu */
}

.discover-more-plant:hover {
    transform: scale(1.02); /* Optional: vergrößert die Kachel leicht bei Hover */
}

.discover-image-plant {
    width: 167px; 
    height: 226px;
    border-radius: 10px 10px 0 0;
    box-shadow: 8px 8px 32px rgba(56, 81, 48, 0.35);
    overflow: hidden; /* Verhindert, dass der Inhalt überläuft */
}
/* Ende mehr entdecken Restaurant App */
/* Ende Restaurant App */

/* Anfang Über mich */
.hero-image {
	object-position: center;
	width: 946px;
	max-width: 100%;
}

.cta-container {
	align-items: center;
	display: flex;
	margin-top: 48px;
	width: 640px;
	max-width: 100%;
	font-size: 21px;
	color: #5c5c5c;
	font-weight: 400;
	letter-spacing: 0.13px;
	line-height: 100%;
	justify-content: center;
	padding: 0 60px;
	flex-direction: column;
}

.btn {
	font-family: 'Roboto', sans-serif;
	border: 1.6px solid #948665;
	background-color: #fefefd;
	color: #5c5c5c;
	font-size: 17px;
	padding: 12px 32px;
	cursor: pointer;
	text-transform: uppercase;
}

.default {
	border-color: #948665;
	color: #5c5c5c;
}
  
.default:hover {
	background: #948665;
	color: #fefefd;
}
/* Ende Über mich */

/* Anfang Footer */
.footer {
	justify-content: space-between;
	align-items: start;
	border-top: 1.5px solid #BFB6A3;
	display: flex;
	width: 100%;
	max-width: 1280px;
	gap: 20px;
	font-size: 106.25%; /*17px*/
	color: #5c5c5c;
	font-weight: 400;
	margin: 80px 0 0;
	padding: 12px 0px 40px;
}

.footer-links {
	display: flex;
	margin-top: 4px;
	padding-right: 20px;
	gap: 20px;
	justify-content: space-between;
}

#navigation-footer {
	display: flex;
	gap: 40px;
}

.copyright {
	font-family: 'Roboto', sans-serif;
	margin: 0 20px 0 0;
	display: flex;
	align-items: center;
	gap: 4px;
	color: #5c5c5c;
}

.copyright i {
	font-family: 'Font Awesome 6 Free';
	font-weight: 400;
	font-size: 80%;
	padding-top: 1px;
	color: #5c5c5c;
}
  
.imprint {
	font-family: 'Roboto', sans-serif;
	justify-content: center;
	padding: 4px 0px;
}

.privacy {
	font-family: 'Roboto', sans-serif;
	justify-content: center;
	padding: 4px 0px;
}

.footer-icons  {
	display: flex;
	width: 127px;
	font-size: 20px;
	margin-top: 4px;
}
/* Ende Footer */

/* Anfang Icons */
#social {
	padding-top:32px;
}

.fa-brands {
	font-size: 140%;
}

.fa-brands:hover {
	opacity: 0.7;
}

.fa-solid {
	font-size: 140%;
}

.fa-solid:hover {
	opacity: 0.7;
}
    
.fa-linkedin-in {
	color: #948665;
	padding-left: 10px;
	padding-right: 10px;
}
  
.fa-xing {
	color: #948665;
	padding-left: 10px;
	padding-right: 10px;
}

.fa-paper-plane {
	color: #948665;
	padding-left: 10px;
}
/* Ende Icons */

a:hover {
	color:#948665;
	text-decoration:none;
}

a {
	color:#5c5c5c;
	text-decoration:none;
}

/* MEDIA QUERY */
@media (max-width: 1300px) {

nav {
	padding: 20px 20px; /* Reduziert Padding */
}
		
nav .logo {
	/*margin-right: auto;  Hält das Logo links außen */
	margin-left: 12px;
}
	
/* CSS für den Scroll-to-top Button */
.scroll-to-top {
	right: 32px;
	bottom: 100px;
}
	
/* Anfang Intro Index */
.intro-section {
	margin-top: 48px;
	margin-left: 100px;
	margin-right: 100px;
}
	
.intro-greeting { 
	font-size: 150%; /* 24px */
}
	
.intro-title {
	font-size: 250%; /*40px*/
}
	
.intro-description { 
	margin-top: 20px;
	font-size: 118.75%; /*19px*/
}
/* Ende Intro Index */
	
/* Anfang Projekte Index */
.project-container { 
	margin-top: 40px; 
	padding-left: 32px;
	padding-right: 32px;
}
	
.project-details-right {
	padding: 24px 28px 28px 28px;
}
	
.project-details-left { 
	padding: 24px 28px 28px 28px;
}
	
.project-title { 
	font-size: 131.25% !important; /* 21px */
}
	
.subline-title { 
	font-size: 100% !important; /*16px*/
}
	
.project-description { 
	margin-top: 16px; 
	font-size: 100% !important; /*16px*/
}
	
.project-link { 
	margin-top: 28px;
	padding: 12px 26px;
	font-size: 100%; /*16px*/
}
/* Ende Projekte Index */
	
/* Anfang Kontakt Index */
.contact-title { 
	font-size: 150%; /* 24px */
	margin-top: 16px;
}
	
.contact-description { 
	font-size: 118.75%; /*19px*/
	margin-top: 16px;
}
/* Ende Kontakt Index */

/* Anfang Sidenav Projekte */
.sidenav {
    left: 32px;
	top: 60px;
}

.sidenav a {
    margin-bottom: 16px; /* Abstand zwischen den Links */
	font-size: 93.75% !important; /*15px*/
}

#userflow {
    scroll-margin-top: -48px !important;
}

#personas, #storyboard, #design, #prototype {
    scroll-margin-top: -8px !important;
}
/* Ende Sidenav Projekte */

/* Amfang Plant App */
.plant-intro-section {
	width: auto;
	padding-top:40px;
}

.plant-intro-container {
    width: auto;
	max-width: 100%; /* Begrenzung auf 100% */
	padding: 0 32px; /* Gleiche Polsterung wie der body-text */
	margin-left: auto;
    margin-right: auto;
}

.info-bar {
	margin-left: 32px;
	margin-right: 32px;
}

.title-item {
    font-size: 100%; /*16px*/
}

.text-item {
    font-size: 100%; /*16px*/
}

/* Breite Werkzeuge Bereich */
.info-item-wider {
    max-width: 140px;
}

.portfolio-body-text {
	margin-top: 4px;
	width: auto;
	max-width: 100%; /* Begrenzung auf 100% */
	font-size: 118.75% !important; /* 19px */
	padding: 0 32px; /* Gleiche Polsterung wie der body-text */
	margin-left: auto;
    margin-right: auto;
}

.portfolio-info-title {
	padding-top: 20px !important;
	width: auto;
	max-width: 100%; /* Begrenzung auf 100% */
	font-size: 118.75% !important; /* 19px */
	padding: 0 32px; /* Gleiche Polsterung wie der body-text */
	margin-left: auto;
    margin-right: auto;
}

/* Anfang Persona Plant App */
.highlight-text-persona {
	font-size: 118.75% !important; /* 19px */
	width: 576px;
	padding: 14px 60px;
}

.persona-profile-plants {
	gap: 6%; /* Der Abstand bleibt proportional gleich */
	max-width: 752px;
}

.persona-image {
	flex-basis: 33.5%; /* Bildbreite bleibt proportional gleich */
}

.persona-text {
	flex-basis: 60.5%; /* Textblockbreite bleibt proportional gleich */
}

.persona-title { 
	font-size: 131.25% !important; /* 21px */
}

.persona-subline { 
	font-size: 100%; /*16px*/
	padding-top: 20px;
}

.persona-description { 
	font-size: 100%; /*16px*/
}

.persona-bullet-list {
	padding-left: 20px;
}

.persona-bullet-list li {
	font-size: 100%; /*16px*/
}
/* Ende Persona Plant App */

/* Anfang User Flow Plant App */
.user-flow-container {
	margin-top: 48px; /* Wenn der Abstand oben notwendig ist */
}

.user-flow-section-title {
	font-size: 250%; /*40px*/
	padding-top: 48px;
}

.user-flow-plant {
	margin-bottom: 50px;
	width: 70%;
	height: auto;
}
/* Ende User Flow Plant App */

/* Anfang Storyboard Plant App */
.wireframes-plant {
    margin-top: 48px;
}

.wireframes-plant img, .storyboard-plant img {
	max-width: 70%;
	height: auto;
}
/* Ende Storyboard Plant App */

/* Anfang Design Plant App */
.styleguide-plant {
	margin-top: 48px;
	text-align: center; /* Fügt zentrierte Ausrichtung für den Container hinzu */
}

.components-plant {
	margin-top: 48px;
	text-align: center; /* Fügt zentrierte Ausrichtung für den Container hinzu */
}

.styleguide-plant img, .components-plant img {
	width: 70%;
	height: auto;
	margin: 0 auto; /* Zentriert das Bild horizontal */
	display: block; /* Stellen Sie sicher, dass das Bild als Block-Element behandelt wird */
}
/* Ende Design Plant App */

/* Anfang Prototype Plant App */
.prototype-container {
    margin-top: 48px;
}

.screen-wrapper img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}

.portfolio-title { 
	font-size: 131.25%; /* 21px */
}
/* Ende Prototype Plant App */

.discover-more {
    margin-top: 48px;
}
/* Ende Plant App */

/* Anfang Dog App */
/* Breite Werkzeuge Bereich */
.info-item-wider-restaurant,
.info-item-wider-dog {
    max-width: 160px;
}

/* Anfang Nutzer Dog App */
.user-groups {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	align-items: center; /* Zentriert die Nutzerelemente */
	justify-content: center; /* Horizontales Zentrieren */
	margin-bottom: 8px;
	max-width: 640px;
	width: 100%;
	height: auto;
	padding: 0 32px;
}

.user1 {
	padding: 0 0 40px 0; 
	border-right: none;
	border-bottom: 1.5px solid #BFB6A3 !important;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box; /* Stellt sicher, dass Padding und Border eingerechnet werden */
}

.user2 {
	padding: 48px 0 40px 0; 
	border-right: none;
	border-bottom: 1.5px solid #BFB6A3 !important;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box; /* Stellt sicher, dass Padding und Border eingerechnet werden */
}

.user3 {
	padding: 48px 0 0 0;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box; /* Stellt sicher, dass Padding und Border eingerechnet werden */
	border-bottom: none !important;
}

.user1-dog-image, .user2-dog-image, .user3-dog-image { 
	display: none;
    /* Desktop-Bilder werden ausgeblendet */
}

.user1-dog-image-mobile, .user2-dog-image-mobile, .user3-dog-image-mobile { 
	display: block;
    /* Bilder werden nur auf mobilen Geräten angezeigt */
}

.user-text {
	padding-top: 40px;
}

.user-zitat {
	font-size: 118.75%; /*19px*/
	line-height: 155%;
	padding-bottom: 32px;
}

.user-subline { 
	font-size: 118.75%; /*19px*/
	line-height: 155%;
}

.user-description { 
	font-size: 118.75%; /*19px*/
	line-height: 155%;
}
/* Ende Nutzer Dog App */

/* Anfang User Flow Dog App */
.user-flow-dog {
	margin-bottom: 50px;
	width: 70%;
	height: auto;
}
/* Ende User Flow Dog App */

/* Storyboard Dog App */
.wireframes-dog img {
	max-width: 70%;
	height: auto;
}

/* Anfang Design Dog App */
.styleguide-dog {
	margin-top: 48px;
	text-align: center; /* Fügt zentrierte Ausrichtung für den Container hinzu */
}

.components1-dog {
	margin-top: 48px;
	text-align: center; /* Fügt zentrierte Ausrichtung für den Container hinzu */
}

.styleguide-dog img, .components1-dog img, .components2-dog img {
	width: 70%;
	height: auto;
	margin: 0 auto; /* Zentriert das Bild horizontal */
	display: block; /* Stellen Sie sicher, dass das Bild als Block-Element behandelt wird */
}
/* Ende Design Dog App */

/* Anfang Prototype Dog App */
.portfolio-info-title-dog {
	padding-left: 32px;
	padding-right: 32px;
	font-size: 118.75%; /*19px*/
}

.screen-wrapper-dog-quiz-small-2 {
	display: none;
}

.screen-wrapper-dog-quiz-small-3 {
	margin-top: 85px;
}

.screen-wrapper-dog-quiz-small-1 img,
.screen-wrapper-dog-quiz-small-2 img,
.screen-wrapper-dog-quiz-small-3 img,
.screen-wrapper-dog-quiz-big img,
.screen-wrapper-dog-result-small-1 img,
.screen-wrapper-dog-result-big img,
.screen-wrapper-dog-result-small-2 img,
.screen-wrapper-dog-profil-1 img,
.screen-wrapper-dog-profil-big img,
.screen-wrapper-dog-profil-3 img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}
/* Ende Prototype Dog App */

/* Mehr entdecken Dog App */
.discover-more-restaurant {
    margin-top: 48px;
}
/* Ende Dog App */

/* Anfang Restaurant App */
/* Nutzer Restaurant App */
.nutzer-title-restaurant {
	font-size: 118.75%; /*19px*/
}

/* User Flow Restaurant App */
.user-flow-restaurant {
	margin-bottom: 50px;
	width: 70%;
	height: auto;
}

/* Anfang Wireframes Restaurant App */
.wireframes-screens {
	margin-left: -44px;
}

.skizzen-restaurant img {
	max-width: 70%;
	height: auto;
	margin-bottom: 10px;
}

.screen-wrapper-restaurant-wireframes-1,
.screen-wrapper-restaurant-wireframes-5,
.screen-wrapper-restaurant-wireframes-9 {
	display: none;
}

.screen-wrapper-restaurant-wireframes-2 img,
.screen-wrapper-restaurant-wireframes-3 img,
.screen-wrapper-restaurant-wireframes-4 img,
.screen-wrapper-restaurant-wireframes-6 img,
.screen-wrapper-restaurant-wireframes-7 img,
.screen-wrapper-restaurant-wireframes-8 img,
.screen-wrapper-restaurant-wireframes-10 img,
.screen-wrapper-restaurant-wireframes-11 img,
.screen-wrapper-restaurant-wireframes-12 img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}
/* Ende Wireframes Restaurant App */

/* Anfang Styleguide Restaurant App */
.styleguide-restaurant {
	margin-top: 48px;
	text-align: center; /* Fügt zentrierte Ausrichtung für den Container hinzu */
}

.components1-restaurant {
	margin-top: 48px;
	text-align: center; /* Fügt zentrierte Ausrichtung für den Container hinzu */
}

.styleguide-restaurant img, .components1-restaurant img, .components2-restaurant img {
	width: 70%;
	height: auto;
	margin: 0 auto; /* Zentriert das Bild horizontal */
	display: block; /* Stellen Sie sicher, dass das Bild als Block-Element behandelt wird */
}
/* Ende Styleguide Restaurant App */

/* Prototype Restaurant App */
.screen-wrapper-restaurant-onboarding-1 img,
.screen-wrapper-restaurant-onboarding-2 img,
.screen-wrapper-restaurant-onboarding-3 img,
.screen-wrapper-restaurant-result-1 img,
.screen-wrapper-restaurant-result-2 img,
.screen-wrapper-restaurant-detail-1 img,
.screen-wrapper-restaurant-detail-2 img,
.screen-wrapper-restaurant-detail-3 img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}

/* Mehr entdecken Restaurant App */
.discover-more-plant {
    margin-top: 48px;
}
/* Ende Restaurant App */

/* Anfang Über mich */
.section-title {
	max-width: 100%;
	margin-top: 48px;
	font-size: 250%; /*40px*/
}
	
.body-text {
	max-width: 100%;
	margin-top: 32px;
	padding: 0 32px;
	font-size: 118.75%; /*19px*/
}
	
.highlight-text {
	max-width: 100%;
	margin-top: 40px;
	padding: 14px 32px;
	font-size: 118.75%; /*19px*/
}
	
.cta-container {
	margin-top: 40px;
	padding: 0 20px;
}
/* Ende Über mich */
	
/* Datenschutz */
.datenschutz-section {
	padding: 0 32px;
	max-width: 100%;
}
	
/* Impressum */
.info-section {
	padding: 0 32px;
	max-width: 100%;
	margin-top: 40px;
}
	
/* h3 */
.info-title {
	font-size: 118.75%; /*19px*/
	padding-top: 0px;
	padding-bottom: 0px;
}
	
.btn {
	padding: 12px 26px;
	font-size: 16px; /*16px*/
}
	
/* h2 */
h2 {
	font-size: 150%; /* 24px */
	padding-top: 16px;
}
	
/* h4 */
h4 {
	font-size: 118.75%; /*19px*/
}
	
/* p */
p  {
	font-size: 118.75%; /*19px*/
}
	
.bullet-list {
	padding-left: 20px;
}
	
.bullet-list li {
	font-size: 118.75%; /*19px*/
}
	
/* Anfang Footer */
.footer {
	max-width: 100%;
	flex-wrap: wrap;
	margin-top: 40px;
	padding: 0px 32px;
	margin-bottom: 32px;
}
	
.footer-links {
	flex-wrap: wrap;
	margin-top: 12px;
}
	
.footer-icons {
	margin-top: 12px;
}
	
.imprint {
	white-space: initial;
}
	
.privacy {
	white-space: initial;
}
/* Ende Footer */
	
img {
	max-width:100%;
	height:auto;
}
}

/* MEDIA QUERY */
@media (max-width: 1024px) {

/* Anfang Intro Index */
.intro-section {
	margin-top: 40px !important;
	margin-left: 32px !important;
	margin-right: 32px !important;
}
		
.intro-container { 
	gap: 60px;
}
		
.intro-image {
	flex: 0 0 35%; /* Passe die Bildbreite auf 40% an */
	max-width: none; /* Entferne die maximale Breitenbeschränkung */
}
		
.intro-text { 
	flex: 1 1 55%; /* Passe die Textbreite auf 60% an */
	max-width: none; /* Entferne die maximale Breitenbeschränkung */
}
/* Ende Intro Index */

/* Blendet das Submenü aus */
.sidenav {
	display: none; 
}

/* Anfang Restaurant App */
/* Nutzer Restaurant App */
.nutzer-restaurant {
	margin-top: 48px;
	margin-bottom: 10px;
	padding-left: 32px;
	padding-right: 32px;
}

/* Anfang Wireframes Restaurant App */
.wireframes-screens {
	gap: 22px;
	margin-left: -22px;
}

.wireframes-restaurant-column1,
.wireframes-restaurant-column2,
.wireframes-restaurant-column3,
.wireframes-restaurant-column4 {
	gap: 22px;
}
/* Ende Wireframes Restaurant App */

/* Anfang Prototype Restaurant App */
.screen-wrapper-restaurant-onboarding-2,
.screen-wrapper-restaurant-detail-2 {
	display: none;
}

.screen-wrapper-restaurant-detail-1 {
	margin-top: 0px;
}

.restaurant-videos {
	gap: 22px;
}
/* Ende Prototype Restaurant App */
/* Ende Restaurant App */
		
}

/* MEDIA QUERY */
@media (max-width: 768px) {
	
/* Anfang Intro Index */	
.intro-container { 
	flex-direction: column;
	align-items: center;
	margin-top: -15px;
}
	
.intro-image {
	flex: 1 1 auto; /* Flexible Breite */
	width: 62%; /* Verkleinere das Bild auf 80% */
	max-width: none; /* Entferne die maximale Breitenbeschränkung */
}
	
.intro-text {
	flex: 1 1 90%;
	width: 90%; /* Stelle sicher, dass der Textblock die volle Breite einnimmt */
	max-width: none; /* Entferne die maximale Breitenbeschränkung */
	padding-top: 0px; /* Füge etwas Abstand oben hinzu */
	padding-left: 100px;
	padding-right: 100px;
	margin-top:-10px;
}
/* Ende Intro Index */

/* Anfang Plant App */
.hero-image {
	width: 100% !important;
	height: auto;
}

/* Blendet das Submenü aus */
.sidenav {
	display: none; 
}

/* Anfang Personas Plant App */
.persona-profile-plants { 
    gap: 4%; /* Abstand zwischen Bild und Textblock als Prozent */
	margin-left: 32px;
	margin-right: 32px;
	flex-direction: row; /* Layout bleibt horizontal */
}

.persona-image {
    flex-basis: 31%; /* Bildbreite als Prozent */
    max-width: 100%;
	height: auto; /* Höhe wird automatisch angepasst */
    display: flex;
    align-items: stretch; /* Bildcontainer streckt sich */
}

.persona-image img {
	width: 100%; /* Bild passt sich an die Breite des Containers an */
	height: 100%; /* Bild passt sich an die Höhe des Containers an */
	object-fit: cover; /* Bild wird vergrößert, um den Container zu füllen */
}

.persona-text {
    flex-basis: 65%; /* Textblockbreite als Prozent */
    max-width: 100%;
}
/* Ende Personas Plant App */

/* Anfang Prototype Plant App */
.prototype-container {
    padding: 0 0; /* Abstand von 32px auf der linken und rechten Seite */
	padding-bottom: 40px;
}

.prototype-container-innen {
    padding: 0 0; /* Abstand von 32px auf der linken und rechten Seite */
	padding-bottom: 40px;
}

.portfolio-content {
    flex-direction: row; /* Bild/Video und Text nebeneinander */
    gap: 48px; /* Beibehaltung des Abstands zwischen Bild und Text */
    padding-top: 40px;
	padding-left: 32px;
	padding-right: 32px;
}

.portfolio-content-ratgeber {
    flex-direction: row; /* Bild/Video und Text nebeneinander */
    gap: 48px; /* Beibehaltung des Abstands zwischen Bild und Text */
    padding-top: 40px;
	padding-left: 32px;
	padding-right: 32px;
}

.portfolio-text {
    width: calc(100% - 64px); /* Textbereich schmaler machen, damit der Abstand von 32px auf beiden Seiten passt */
    padding: 0; /* Kein zusätzliches Padding */
    padding-bottom: 40px;
}

/* Sicherstellen, dass das Bild nicht zugeschnitten wird */
.video-wrapper,
.screen-wrapper {
    flex: 0 0 auto; /* Verhindert, dass das Bild verkleinert oder vergrößert wird */
    width: 280px; /* Beibehaltung der festen Breite */
    height: 611px; /* Beibehaltung der festen Höhe */
}
/* Ende Prototype Plant App */
/* Ende Plant App */

/* Anfang Dog App */
/* Prototype Dog App */
.dog-screens {
	gap: 22px;
}
/* Ende Dog App */

/* Anfang Mehr entdecken Plant, Dog, Restaurant App */
.discover-more,
.discover-more-restaurant,
.discover-more-plant {
    width: 90%;
	margin: 0 auto;
	margin-top: 40px;
	height: auto; /* Automatische Höhenanpassung */
}

.discover-image,
.discover-image-restaurant,
.discover-image-plant {
	height: auto; /* Automatische Höhenanpassung */
	overflow: hidden; /* Überlauf verhindern */
}

.discover-dog-image,
.discover-restaurant-image,
.discover-plant-image {
	width: 100%; /* Bild füllt die gesamte Breite des Containers */
	height: auto; /* Höhe automatisch, um das Verhältnis beizubehalten */
	display: block; /* Sicherstellen, dass das Bild als Block-Element behandelt wird */
}

.discover-info-title {
    font-size: 131.25%; /* 21px */
} 
/* Ende Mehr entdecken Plant, Dog, Restaurant App */
}

/* MEDIA QUERY */
@media (max-width: 576px) {

/* Anfang Navigation */
nav {
    flex-direction: row;
    align-items: center; /* Zentriert die Elemente in einer Zeile */
	padding: 20px 20px; /* Reduziert Padding für mobile Ansicht */
	border-bottom: 1.5px solid #BFB6A3;
}

nav .logo {
    /*margin-right: auto;  Hält das Logo links außen */
	margin-left: 12px;
	width: 49px;
	height: 49px;
	font-size: 131.25%; /* 21px */
}

nav .menu-icon {
    display: block;
    right: 32px; /* Hält das Menü-Icon rechts außen */
    top: 50%; /* Positioniert das Menü-Icon vertikal zentriert */
    transform: translateY(-50%); /* Korrigiert die vertikale Position */
}

nav .nav-container {
    display: none;
    position: absolute; /* Positioniert den Container absolut */
    top: 75px; /* Abstand unterhalb des Logos und des Icons */
    left: 0;
    width: 100%;
    background-color: #fefefd;
    flex-direction: column;
    align-items: center; /* Zentriert die Navigationslinks */
    z-index: 1000; /* Stellt sicher, dass die Navigation über dem Inhalt liegt */
	padding-bottom: 25px; /* Füge zusätzliches Padding unten hinzu */
	border-bottom: 1.5px solid #BFB6A3;
	opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, height 0.5s ease; /* Hier die korrekte Syntax */
}

nav .nav-container.show {
    display: flex;
	opacity: 1;
    height: auto;
}

nav .nav-links {
    flex-direction: column;
    width: 100%;
	text-align: left; /* Zentriert den Text innerhalb der Links */
	padding-left: 32px;
	padding-top: 22px;
}

nav .nav-links li {
    margin: 10px 0;
}
/* Ende Navigation */

/* CSS für den Scroll-to-top Button */
.scroll-to-top {
	bottom: 32px !important;
}

/* Blendet das Submenü aus */
.sidenav {
	display: none; 
}

/* Anfang Intro Index */
.intro-section {
	margin-left: 16px;
	margin-right: 16px;
}

.intro-container { 
	flex-direction: column;
	gap: 0 !important; /* Setze den Abstand auf 0 */
}

.intro-image {
	flex: 1 1 auto; /* Beide Container nehmen die volle Breite ein */
	width: 100% !important;
	max-width: none; /* Entferne die maximale Breitenbeschränkung */
}

.intro-text { 
	flex: 1 1 auto !important; /* Beide Container nehmen die volle Breite ein */
	max-width: none; /* Entferne die maximale Breitenbeschränkung */
	padding-top: 36px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
	width: 100%; /* Stelle sicher, dass der Textblock die volle Breite einnimmt */
}

.section-title {
	margin-top: 40px;
    font-size: 200% !important;/*32px*/
}

.intro-greeting { 
	font-size: 131.25% !important; /* 21px */
}
	
.intro-title {
	margin-top: 8px;
	font-size: 200% !important;/*32px*/
}

.intro-description { 
	margin-top: 32px;
	font-size: 106.25% !important; /*17px*/
 }
/* Ende Intro Index */

/* Anfang Kontakt Index */
.contact-title { 
	font-size: 131.25% !important; /* 21px */
}

.contact-description { 
	font-size: 106.25% !important; /*17px*/
	margin-left: 32px;
	margin-right: 32px;
}
/* Ende Kontakt Index */

/* Anfang Projekte Index */
.project-container { 
	margin-top: 40px;
	width: auto;
}

.project-row {
	flex-direction: column;
}

.project-row-switch {
	flex-direction: column-reverse; /* Bild vor Text in mobiler Ansicht */
}

.project-details-right {
	border-top: 0px solid #BFB6A3;
	border-bottom: 1.5px solid #BFB6A3;
	border-right: 1.5px solid #BFB6A3;
	border-left: 1.5px solid #BFB6A3;
	display: flex; 
	width: auto;
}

.project-details-left { 
	border-top: 0px solid #BFB6A3;
	border-bottom: 1.5px solid #BFB6A3;
	border-left: 1.5px solid #BFB6A3;
	border-right: 1.5px solid #BFB6A3;
	display: flex; 
	width: auto; 
}
/* Ende Projekte Index */

/* Anfang Plant App */
.plant-intro-section {
	padding-top: 28px;
}

.info-bar {
    margin-top: 24px;
	margin-bottom: 20px;
}

.info-item-grow {
	width: 69%;
}

/* Breite Werkzeuge Bereich */
.info-item-wider {
    width: 36%;
}

.portfolio-body-text {
	width: auto;
	font-size: 106.25% !important; /*17px*/
}

.portfolio-info-title {
	font-size: 106.25% !important; /*17px*/
}

.title-item {
    font-size: 93.75% !important; /*15px*/
}

.text-item {
    font-size: 93.75% !important; /*15px*/
}

/* Anfang Plant App Personas */
.persona-profile-plants {
	display: block; /* Flexbox deaktivieren */
	max-width: 100%; /* Volle Breite ausnutzen */
	margin-top: 32px; /* Etwas weniger Abstand oben */
}

.persona-image,
.persona-text {
	width: 100%; /* Elemente über die volle Breite anzeigen */
	max-width: 100%; /* Sicherstellen, dass die Elemente nicht größer werden */
}

.persona-image {
	margin-bottom: 24px; /* Abstand zwischen Bild und Text */
	justify-content: center;
}

.persona1-plant-image-quer { 
	display: block;
    /* Querformat Bild wird nur auf mobilen Geräten angezeigt */
}

.persona1-plant-image { 
	display: none;
	/* Desktop-Bild wird ausgeblendet */
}

.persona2-plant-image-quer { 
	display: block;
    /* Querformat Bild wird nur auf mobilen Geräten angezeigt */
}

.persona2-plant-image { 
	display: none;
	/* Desktop-Bild wird ausgeblendet */
}

.highlight-text-persona {
	font-size: 106.25% !important; /* 17px */
	width: 100%;
	padding: 14px 40px;
}

.persona-title { 
	font-size: 131.25% !important; /* 21px */
	margin-top: 0px;
}

.persona-subline { 
	font-size: 106.25% !important; /*17px*/
	line-height: 155% !important;
	padding-top: 26px;
}

.persona-description,
.persona-bullet-list li { 
	font-size: 106.25% !important; /*17px*/
	line-height: 155% !important;
}

.persona-bullet-list {
	padding-left: 22px;
}
/* Ende Plant App Personas */

/* Anfang User Flow Plant App */
.user-flow-container {
	margin-top: 32px;
	padding: 0 0px;
}

.user-flow-section-title {
	font-size: 200% !important;/*32px*/
	padding-top: 40px;
}

.user-flow-plant {
	margin-bottom: 42px;
	width: 100%;
	padding: 0 32px;
	height: auto;
}
/* Ende User Flow Plant App */

/* Anfang Storyboard Plant App */
.wireframes-plant {
    margin-top: 40px;
}

.wireframes-plant img {
	max-width: 100%;
	height: auto;
}

.storyboard-plant img {
	max-width: 90%;
	height: auto;
}
/* Ende Storyboard Plant App */

/* Anfang Design Plant App */
.styleguide-plant {
	margin-top: 40px;
}

.components-plant {
	margin-top: 40px;
}

.styleguide-plant img, .components-plant img {
	width: 100%;
	padding: 0 32px;
	height: auto;
}
/* Ende Design Plant App */

/* Anfang Prototype Plant App */
.prototype-container {
    margin-top: 40px;
	padding: 0 0px;
}

.prototype-container-innen {
	padding: 0 0px;
}

.portfolio-content {
	flex-direction: column; /* Ändert die Richtung auf vertikal */
	gap: 28px; /* Reduziert den Abstand zwischen Bild und Text, wenn nötig */
	padding-top: 40px;
}

.portfolio-content-ratgeber {
	flex-direction: column; /* Ändert die Richtung auf vertikal */
	gap: 28px; /* Reduziert den Abstand zwischen Bild und Text, wenn nötig */
	padding-top: 40px;
	padding-bottom: 0px;
}

/* Neu hinzugefügt: Reihenfolge der Elemente ändern */
.portfolio-content .video-wrapper,
.portfolio-content .screen-wrapper,
.portfolio-content-ratgeber .video-wrapper {
	order: -1; /* Platziert das Video/Bild vor dem Text */
}

.screen-wrapper img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}

.portfolio-text {
	width: 100%; /* Vollbreite für kleinere Bildschirme */
	padding-bottom: 40px;
}

.portfolio-description {
	line-height: 155%;
}

#prototype {
	margin-bottom: -30px;
}
/* Ende Prototype Plant App */

/* Anfang mehr entdecken Plant App */
.discover-more {
	width: calc(100% - 64px); /* 100% der Breite minus 32px auf jeder Seite */
	margin-left: 32px;
	margin-right: 32px;
	height: auto; /* Automatische Höhenanpassung */
	padding: 24px 24px 0px 24px; /* 32px Padding oben, unten und 24px links und rechts */
	gap: 20px; /* Reduziertes Gap zwischen Text und Bild */
	align-items: flex-start; /* Elemente oben ausrichten */
	position: relative; /* Ermöglicht die absolute Positionierung des Bildes */
}

.discover-text {
	width: 100%; /* Textbereich auf volle Breite setzen */
}

.discover-image {
	width: 60%; /* Bild auf volle Breite setzen */
	position: relative; /* Setzt das Bild relativ zum umgebenden Container */
	height: auto; /* Automatische Höhenanpassung */
	margin: 0; /* 32px Abstand nach oben */
	padding: 0; /* Kein zusätzliches Padding */
	overflow: hidden; /* Überlauf verhindern */
    box-sizing: border-box; /* Padding und Border werden in die Gesamtbreite und -höhe einbezogen */
}

.discover-dog-image {
	width: 100%; /* Bild füllt die gesamte Breite des Containers */
	height: auto; /* Höhe automatisch, um das Verhältnis beizubehalten */
	object-fit: cover; /* Bild füllt das Element vollständig aus */
	margin: 0; /* Entfernen von Margin */
    padding: 0; /* Entfernen von Padding */
	display: block; /* Sicherstellen, dass das Bild als Block-Element behandelt wird */
    box-sizing: border-box; /* Padding und Border werden in die Gesamtbreite und -höhe einbezogen */
}

.discover-info-title {
    font-size: 100% !important; /*16px*/
    padding-top: 12px;
    padding-bottom: 12px;
}

.title-discover {
    font-size: 87.5% !important; /*14px*/
}

.more {
    font-size: 87.5% !important; /*14px*/
	font-weight: normal;
}
/* Ende mehr entdecken Plant App */
/* Ende Plant App */

/* Anfang Dog App */
/* Breite Werkzeuge Bereich */
.info-item-wider-dog {
    width: 40%;
}

/* Anfang Nutzer Dog App */
.user-groups {
	margin-top: 40px;
	margin-bottom: 10px;
}

.user1 {
	padding: 0 0 32px 0; 
}

.user2 {
	padding: 40px 0 32px 0; 
}

.user3 {
	padding: 40px 0 0 0;
}

.user-text {
	padding-top: 32px;
}

.user-title { 
	font-size: 131.25% !important; /* 21px */
}

.user-zitat {
	font-size: 106.25% !important; /*17px*/
}

.user-subline { 
	font-size: 106.25% !important; /*17px*/
}

.user-description { 
	font-size: 106.25% !important; /*17px*/
}
/* Ende Nutzer Dog App */

/* User Flow Dog App */
.user-flow-dog {
	margin-bottom: 42px;
	width: 100%;
	padding: 0 32px;
	height: auto;
}

/* Anfang Skizzen Dog App */
.wireframes-dog {
    margin-top: 40px;
	padding: 0 12px;
}

.wireframes-dog img {
	max-width: 100%;
	height: auto;
}
/* Ende Skizzen Dog App */

/* Anfang Design Dog App */
.styleguide-dog {
	margin-top: 40px;
}

.components1-dog {
	margin-top: 40px;
}

.styleguide-dog img, .components1-dog img, .components2-dog img {
	width: 100%;
	padding: 0 32px;
	height: auto;
}
/* Ende Design Dog App */

/* Anfang Prototype Dog App */
.prototype-container-dog {
    margin-top: 0;
	padding: 0 0 0 0;
}

.portfolio-content-dog {
	padding-bottom: 40px;
	gap: 40px;
}

.portfolio-info-title-dog {
	padding-top: 32px;
	font-size: 106.25% !important; /*17px*/
}

.screen-wrapper-dog-quiz-small-1, 
.screen-wrapper-dog-quiz-small-3,
.screen-wrapper-dog-result-small-1,
.screen-wrapper-dog-result-small-2,
.screen-wrapper-dog-profil-1,
.screen-wrapper-dog-profil-3 {
	display: none;
}

.screen-wrapper-dog-quiz-big img,
.screen-wrapper-dog-result-big img,
.screen-wrapper-dog-profil-big img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 20px; /* Abgerundete Ecken */
}
/* Ende Prototype Dog App */

/* Anfang mehr entdecken Dog App */
.discover-more-restaurant {
	width: calc(100% - 64px); /* 100% der Breite minus 32px auf jeder Seite */
	margin-left: 32px;
	margin-right: 32px;
	height: auto; /* Automatische Höhenanpassung */
	padding: 24px 24px 0px 24px; /* 32px Padding oben, unten und 24px links und rechts */
	gap: 20px; /* Reduziertes Gap zwischen Text und Bild */
	align-items: flex-start; /* Elemente oben ausrichten */
	position: relative; /* Ermöglicht die absolute Positionierung des Bildes */
}

.discover-image-restaurant {
	width: 60%; /* Bild auf volle Breite setzen */
	position: relative; /* Setzt das Bild relativ zum umgebenden Container */
	height: auto; /* Automatische Höhenanpassung */
	margin: 0; /* 32px Abstand nach oben */
	padding: 0; /* Kein zusätzliches Padding */
	overflow: hidden; /* Überlauf verhindern */
    box-sizing: border-box; /* Padding und Border werden in die Gesamtbreite und -höhe einbezogen */
}
/* Ende mehr entdecken Dog App */
/* Ende Dog App */

/* Anfang Restaurant App */
/* Breite Werkzeuge Bereich */
.info-item-wider-restaurant {
    width: 36% !important;
}

/* Nutzer Restaurant App */
.nutzer-title-restaurant {
	font-size: 106.25% !important; /*17px*/
	padding-top: 32px;
	padding-bottom: 6px;
}

.nutzer-profile-restaurant {
	display: block;
	flex-direction: column;
}

.nutzer-image-restauarant {
    width: 100%;
}

.nutzer-text-restaurant {
    width: 100%;
}
/* Ende Nutzer Restaurant App */

/* User Flow Restaurant App */
.user-flow-restaurant {
	margin-bottom: 42px;
	width: 100%;
	padding: 0 32px;
	height: auto;
}

/* Anfang Wireframes Restaurant App */
.skizzen-restaurant img {
	max-width: 100%;
	height: auto;
}

.wireframes-restaurant-column3 {
	margin-top: 0px;
}

.screen-wrapper-restaurant-wireframes-1,
.screen-wrapper-restaurant-wireframes-2,
.screen-wrapper-restaurant-wireframes-4,
.screen-wrapper-restaurant-wireframes-5,
.screen-wrapper-restaurant-wireframes-6,
.screen-wrapper-restaurant-wireframes-8,
.screen-wrapper-restaurant-wireframes-9,
.screen-wrapper-restaurant-wireframes-10,
.screen-wrapper-restaurant-wireframes-12 {
	display: none;
}
/* Ende Wireframes Restaurant App */

/* Anfang Styleguide Restaurant App */
.styleguide-restaurant {
	margin-top: 40px;
}

.components1-restaurant {
	margin-top: 40px;
}

.styleguide-restaurant img, .components1-restaurant img, .components2-restaurant img {
	width: 100%;
	padding: 0 32px;
	height: auto;
}
/* Ende Styleguide Restaurant App */

/* Anfang Prototype Restaurant App */
.prototype-container-restaurant {
    margin-top: 40px;
	padding: 0 0 0 0;
}

.screen-wrapper-restaurant-onboarding-1,
.screen-wrapper-restaurant-detail-3,
.screen-wrapper-restaurant-result-2 {
	display: none;
}

.restaurant-videos {
	flex-direction: column;
	margin-bottom: -40px;
}
/* Ende Prototype Restaurant App */

/* Anfang mehr entdecken Restaurant App */
.discover-more-plant {
	width: calc(100% - 64px); /* 100% der Breite minus 32px auf jeder Seite */
	margin-left: 32px;
	margin-right: 32px;
	height: auto; /* Automatische Höhenanpassung */
	padding: 24px 24px 0px 24px; /* 32px Padding oben, unten und 24px links und rechts */
	gap: 20px; /* Reduziertes Gap zwischen Text und Bild */
	align-items: flex-start; /* Elemente oben ausrichten */
	position: relative; /* Ermöglicht die absolute Positionierung des Bildes */
}

.discover-image-plant {
	width: 60%; /* Bild auf volle Breite setzen */
	position: relative; /* Setzt das Bild relativ zum umgebenden Container */
	height: auto; /* Automatische Höhenanpassung */
	margin: 0; /* 32px Abstand nach oben */
	padding: 0; /* Kein zusätzliches Padding */
	overflow: hidden; /* Überlauf verhindern */
    box-sizing: border-box; /* Padding und Border werden in die Gesamtbreite und -höhe einbezogen */
}
/* Ende mehr entdecken Restaurant App */
/* Ende Restaurant App */

/* Anfang Über mich */
.body-text {
	width: auto;
	font-size: 106.25% !important; /*17px*/
	max-width: 100%; /* Volle Breite ausnutzen */
	padding: 0 32px; /* Abstand von 32px rechts und links */
	box-sizing: border-box; /* Padding in die Breite einberechnen */
}

.highlight-text {
	width: auto;
	font-size: 106.25% !important; /*17px*/
}
/* Ende Über mich */

/* h3 */
.info-title {
	font-size: 106.25% !important; /*17px*/
}

/* h2 */
h2 {
	font-size: 131.25% !important; /* 21px */
}

/* h4 */
h4 {
	font-size: 106.25% !important; /*17px*/
}

/* p */
p  {
	font-size: 106.25% !important; /*17px*/
}

/* Datenschutz */
.bullet-list li {
	font-size: 106.25% !important; /*17px*/
}

/* Anfang Footer */
.footer {
	margin-bottom: 32px;
	padding: 0; /* Entfernen Sie die linke und rechte Padding */
	justify-content: center;
	align-items: center; /* Zentriert die Kinder-Elemente vertikal */
	text-align: center; /* Text innerhalb der Elemente zentrieren */
}

#navigation-footer {	
	padding-top: 0px;
	justify-content: center;
}

.footer-links {
	margin-top: 0px;
	justify-content: center;
	padding: 0; /* Entfernen Sie die rechte Padding */
}

.copyright {
	padding-top: 26px;
	margin: 0 0 0 0;
}

.imprint {
    padding-left: 20px;
}

.privacy {
    padding-right: 20px;
}
/* Ende Footer */
}