@charset "UTF-8";
/* ==========================================================================
Date: 06.11.2025
Author: Rafael Ocaña

General Settings
		Reset
		Body, Font, Color, Size, BG
		Individuelle Seiten-Anpassungen
		Gradient Text

Mobile First = Default ----- max 749px
		Header
		Fade-in
		Overlay Nav
		Content
		Contact Form
	  Footer

Medium --------------------- 750px - 1199px (Footer Breakpoint)
		Fade-in
		Overlay Nav
		Content
		Contact Form

Large ---------------------- min 1200px (Header Breakpoint)
		Content
		Contact Form
		Footer

Hinweis: article-Tag ist für das Fade-in beim Seitenaufruf reserviert.
Hinweis: Einträge, die gemeinsam angepasst werden müssen habe ich mit dem Wort Anker versehen.
============================================================================= */


/* ========================================================================== */
/* =====  General Settings  ================================================= */
/* ========================================================================== */
* { padding: 0; margin: 0; } /* CSS reset */
li { list-style-type: none; } /* keine Aufzählpunkte */

body {
	font-family: "Kefa", serif;
	color: black;
	font-size: 20px;
	background-color: rgba(230,230,230,1); /* Anker16 */
}

img.logo {
	position: absolute;
	width: 88px;
	padding-top: 14px;
}

img.silhouette {
  width: 100%;
  height: auto;
  display: block;
	margin-bottom: -50px;
}

img.article,
img.article-later {
	margin-top: 50px;
}

article img {
	width: 100%;
	margin-top: 40px;
}

img.home-pic {
	margin-top: 0;
}

article div.center {
	margin-bottom: 50px;
}

h2 {  /* für Logo und Content - gleiche Grösse wie Standart-font-size für body - nötig damit unter 'article' h2 genutzt werden kann und somit W3C-valide - nur p wäre nicht valide */
	font-size: 28px;
	margin-top: 5px;
}

h3 {
	font-size: 26px;
	font-weight: normal;
	padding-top: 20px;
}

p.first-content,
p.content {
	font-size: 20px;
	font-weight: normal;
	padding-top: 10px;
	color: black; /* stehen lassen - wenn ich das hier wegnehme, sieht man den Text nicht */
}

p.last {
	padding-bottom: 50px;
}

a.call2action {
	color: brown;
	font-size: 20px;
	font-weight: normal;
	cursor: pointer;
	text-decoration: none;
}

b.black { color: black; } /* index.html */
b.arrow { font-size: 16px; } /* index.html */
b.actual { color: grey; font-size: 22px; } /* index.html --- Farbe & Textgrösse anpassen und ' <br><b class="actual">Text</b>' im index.html einfügen */
b.bold { font-weight: bold; } /* contact.html */
b.bull { color: #00aa00; font-size: 22px; vertical-align: -3px; letter-spacing: -0.35rem; } /* contact.html */
b.threema { font-weight: normal; font-size: 17px; } /* contact.html */

ul.content {
  margin-left: 50px;     /* Einrückung */
	margin-right: 20px;
}

li.content {
	list-style-type: disc; /* Standard-Kreis */
  margin-bottom: 7px;    /* Abstand zw. Punkten */
	font-size: 20px;
	font-weight: normal;
}

main > *:last-child {
  margin-bottom: 100px;
}

.box-container,
.box-container-plakette {
    display: flex; /* Aktiviert Flexbox */
    flex-wrap: wrap; /* Ermöglicht den Umbruch */
    justify-content: center; /* Einheitlicher Abstand zwischen Boxen */
		gap: 0; /* Abstand zwischen den Boxen */
		margin-top: -25px; /* Korrektur: Damit der Abstand zw. Titel und Box nicht zu gross ist */
		padding-left: 20px; /* Anker09 */
		padding-right: 20px; /* Anker09 */
}

.box-activ,
.box-gallery,
.box-plakette {
    width: 328px; /* Breite der Boxen */
    height: auto; /* Höhe der Boxen */
    margin: 25px; /* Abstand zwischen Boxen */
    background-color: white; /* Hintergrundfarbe */
    color: black; /* Textfarbe */
		font-size: 22px;
    display: flex; /* Aktiviert Flexbox für den Inhalt */
    flex-direction: column; /* Richtet den Inhalt senkrecht aus */
    align-items: center; /* Zentriert den Inhalt horizontal */
    justify-content: flex-start; /* Oberer Bereich der Box */
    border-radius: 30px; /* Abgerundete Ecken */
}

.box-gallery { /* damit in der Galerie die Bilder auch zentriert sind nachdem ich eine <a>Verlinkung erstellt habe */
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Kinder horizontal */
    text-align: center; /* Zentriert den Text */
}

.box-image { /* damit in der Galerie die Bilder auch zentriert sind nachdem ich eine <a>Verlinkung erstellt habe */
    max-width: 100%; /* Bild responsiv */
    height: auto; /* Höhe proportional */
}

#contact { 								/* Dropdown für Plaketten */
  display: flex;
  flex-direction: column; /* Anordnung untereinander */
  align-items: center;    /* Zentriert horizontal alle Kindelemente */
}

.dropdown-label { 				/* Dropdown für Plaketten */
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
  color: #555;
  text-align: center;
  width: 100%; 						/* volle Breite der Box */
}

.dropdown-select { 				/* Dropdown für Plaketten */
  width: 20%;       			/* Nutzt volle Breite, verhindert nebeneinander */
  max-width: 300px; 			/* Optional: max. Breite um nicht zu groß zu werden */
  border: 1px solid #bbb;
  border-radius: 5px;
  font-size: 18px;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: border-color 0.3s ease;
  margin-bottom: 40px;
  display: block;    			/* Blockelement zwingt Zeilenumbruch */
}

.dropdown-select:focus { 	/* Dropdown für Plaketten */
  border-color: #007acc;
  outline: none;
  box-shadow: 0 0 5px rgba(0,122,204,0.5);
}

footer {
	margin-top: 50px;
}

footer,
footer a,
footer li {
	color: #BBB;
	font-weight: normal;
	background-color: #222;
}

footer li a {
	cursor: pointer;
	text-decoration: none;
}

footer li a:hover,
footer li a:focus {
	color: white;
	text-decoration: underline;
}

ul.footer-nav,
ul.footer-nav-ml {
	margin-top: 20px;
	font-size: 18px;
}

/* Individuelle Seiten-Anpassungen - Home ----------------------------------- */


/* Individuelle Seiten-Anpassungen - Aktive --------------------------------- */
.box-image {
    width: 80%; /* Bild füllt die Breite der Box */
    height: auto; /* Höhe wird automatisch basierend auf dem Verhältnis eingestellt */
    border-radius: 10px; /* Abgerundete Ecken oben für das Bild */
}

.box-text {
    margin: 10px 0; /* Abstand zwischen Bild und Text */
    text-align: center; /* Zentriert den Text */
}


.box-text-p {
    margin-top: 10px; /* Abstand zwischen Bild und Text */
    font-weight: normal;
}

.box-text-small {
		font-size: 16px;
		color: grey;
		padding-top: 15px;
		padding-bottom: 40px;
    font-weight: normal;
}

.box-subtitle {
		padding-top: 25px;
		padding-bottom: 40px;
}

.icon-container {
    display: flex; /* Aktiviert Flexbox für die Logos */
    flex-direction: row; /* Stellt sicher, dass die Logos horizontal angeordnet sind */
    justify-content: center; /* Zentriert die Logos */
    align-items: center; /* Vertikale Zentrierung */
    gap: 10px; /* Moderner Abstand zwischen Logos (ersetzt margin) */
    width: 100%; /* Breite der Logo-Container */
    padding-bottom: 10px; /* Abstand nach unten */
}

.icon {
    width: 25px; /* Breite der Logos */
    height: auto; /* Höhe wird automatisch basierend auf dem Verhältnis eingestellt */
		margin-top: 20px;
		padding-bottom: 20px;
}

/* Responsives Design */
@media (max-width: 940px) {
    .box {
        flex: 1 1 calc(50% - 20px); /* Zwei Spalten unter 940px */
    }
}

@media (max-width: 620px) {
    .box {
        flex: 1 1 calc(100% - 20px); /* Eine Spalte unter 620px */
    }
}

@media (max-width: 749px) {
		h2.first-gradient-center,
		h2.content-gradient-center,
		h2.content-gradient-center-aktive {
        text-align: center;
    }
}

/* Individuelle Seiten-Anpassungen - Team ----------------------------------- */
/* Rest gleich wie - Aktive ------------------------------------------------- */
.box-team {
    width: 344px; /* Breite der Boxen */
    height: auto; /* Höhe der Boxen */
    margin: 20px; /* Abstand zwischen Boxen */
    background-color: white; /* Hintergrundfarbe */
    color: black; /* Textfarbe */
		font-size: 22px;
    display: flex; /* Aktiviert Flexbox für den Inhalt */
    flex-direction: column; /* Richtet den Inhalt senkrecht aus */
    align-items: center; /* Zentriert den Inhalt horizontal */
    justify-content: flex-start; /* Oberer Bereich der Box */
    border-radius: 30px; /* Abgerundete Ecken */
}

.box-image-round {
    width: 50%; /* Bild füllt die Breite der Box */
    height: auto; /* Höhe wird automatisch basierend auf dem Verhältnis eingestellt */
		border-radius: 30px; /* Abgerundete Ecken */
}

details {
	padding: 10px;
	margin: -15px 0 25px 0;
	font-size: 16px;
	font-weight: normal;
	border: none;
 }

 summary {
	cursor: pointer;
	font-weight: normal;
	padding-bottom: 10px;
	list-style: none; /* Anker18 - Entfernt den Pfeil nicht bei Safari und Chrome >> siehe Webkit */
 }

 summary::-webkit-details-marker {
   display: none; /* Anker18 - */
 }

 summary:hover {
	color: brown;
 }

 details[open] summary {
	margin-bottom: 10px;
	text-align: center;
 }

 /* Individuelle Seiten-Anpassungen - Slider -------------------------------- */

/* Individuelle Seiten-Anpassungen - alle 3 Legal Seiten -------------------- */
div.legal,
div.legal a {
	padding-right: 0;
	padding-left: 0;
	color: grey;
	font-size: 16px;
	font-weight: normal;
}

div.legal h3 {
	padding-top: 30px;
}

div.legal p {
	padding-top: 10px; /* vorher zusätzlich div.legal h4 mit 20px */
}

div.legal ul {
	margin-left: 40px;
	padding-top: 10px
}

div.legal li {
	list-style-type: inherit;
}

/* Gradient Text ------------------------------------------------------------ */
form h2,
article h2 {
	color: transparent;
	-webkit-background-clip: text; /* nötig, damit nur die Schrift und nicht der ganze Background angezeigt wird */
	background-clip: text; /* nötig, damit nur die Schrift und nicht der ganze Background angezeigt wird */
	background-size: cover;
}

h2.first-gradient,
h2.first-gradient-center,
h2.content-gradient,
h2.content-gradient-center,
h2.content-gradient-center-aktive,
h2.article-center {
	background-image: url("../design/bg/sepia.png");
}

/* Slider ------------------------------------------------------------------- */
.slider-container {
	position: relative;
	max-width: 1000px;
	width: 93%;
	margin: 50px auto;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	aspect-ratio: 16 / 9;
	background: #000;
}

.slider {
	display: flex;
	transition: transform 0.5s ease-in-out;
	height: 100%;
}

.slide {
	min-width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: #222;
}

.slide img {
	max-width: 60%;
	max-height: 80%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.slide-text {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 15px 25px;
	border-radius: 5px;
	font-size: 1.2em;
}

/* Responsive */
@media (max-width: 768px) {
	.slide-text {
		font-size: 1em;
		padding: 10px 15px;
	}

	.nav-button {
		padding: 10px 15px;
		font-size: 1.2em;
	}
}

/* ========================================================================== */
/* =====  Mobile First = Default  =========================================== */
/* ========================================================================== */

/* Fade-in - Mobile First --------------------------------------------------- */
/* Fade-in Open */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		}
	}

article h2.first-gradient,
article h2.first-gradient-center,
article p.content,
article img.article,
div.gallery,
div.contact {
	animation: fade-in 500ms ease-in forwards;
}

article h2.content-gradient,
article p.first-content,
form p,
form h3 {
	opacity: 0;
	animation: fade-in 600ms ease-in forwards;
	animation-delay: 400ms;
}

article h2.content-gradient-center,
article h2.content-gradient-center-aktive,
article p.content,
article p.article,
article p.article-center,
article div.box-container,
article div.box-container-plakette,
article img.article-later,
div.section {
	opacity: 0;
	animation: fade-in 700ms ease-in forwards;
	animation-delay: 500ms;
}

form,
a.call2action,
article ul.content {
	opacity: 0;
	animation: fade-in 800ms ease-in forwards;
	animation-delay: 600ms;
}

@media screen and (max-width:749px) { /* Anker08 - damit bei Medium und Large 'Fade-in Scroll' nicht zur Anwendung kommt */
/* Fade-in Scroll */
section {
  opacity: 0;
	transform: translate(0, 10px); /* beim Einblenden die Bewegung nach oben (bei Minus-Wert nach unten) festlegen - es gibt 2 Werte (0, 20px) der 1. Wert ist für die horizontale Bewegung */
  transition: all 1s; /* die Dauer der Einblendung und der Bewegung nach oben */
}

section.visible {
  opacity: 1;
	transform: translate(0, 0);
}
} /* End Mediascreen - Fade-in Scroll - 749px and smaller */

/* Overlay Nav - Mobile First ----------------------------------------------- */
img.logo-overlay {
	position: fixed;
	width: 88px;
	padding: 30px 0 0 20px; /* Anker09 */
}

/* Menu icon */
#menu-icon-shape {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 6px;
  right: 10px; /* Anker14 - Mobile First hat weniger Abstand als Medium */
  border-radius: 50%;
  z-index: 5;
  cursor: pointer;
  transition: all 0.5s ease;
}

#menu-icon-shape {
  background: transparent;
}

#menu-icon-shape.active {
  background: transparent;
	position: fixed;
}

#menu-icon {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

#top, #middle, #bottom {
  width: 100%;
  height: 4px;
  background: black;
  transition: all 0.35s ease;
}

#top.active, #middle.active, #bottom.active {
  background: red;
}

#middle {
  margin: 4px 0;
}

/* Transform menu icon into close icon */
#top.active {
  transform: translateY(8px) translateX(0) rotate(45deg);
}

#middle.active {
  opacity: 0;
}

#bottom.active {
  transform: translateY(-8px) translateX(0) rotate(-45deg);
}

/* Navigation */
#nav-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  background: rgba(0,0,0,0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s, height 0.5s ease;
}

/* Open navigiation */
#nav-overlay.active {
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
}

#nav-content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#nav-content ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

#nav-content ul li a {
  width: 100%;
  padding: 3% 0;
  display: block;
	font-family: "Kefa", serif;
  font-weight: bold;
  font-size: 28px;
  text-decoration: none;
  color: yellow;
  transition: all 0.35s ease;
}

#nav-content ul li a:hover {
	color: red;
}

/* Content - Mobile First --------------------------------------------------- */
header,
main h2,
main p,
div.buttons,
div.legal-aufzaehlung {
	padding-left: 20px; /* Anker09 */
	padding-right: 20px; /* Anker09 */
}

header {
	height: 70px;
	background-color: rgba(230,230,230,1); /* Anker16 */
}

h4.header-center {  /* Anker03 - FGR ganz oben für Mobile First und Medium */
	width: 100%;
	padding-top: 21px;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
}


article {
	padding-top: 20px;
}

div.article,
div.article-center {
	padding: 20px 0;
}

article h2,
article p {
	padding-top: 5px; /* Anker15 - First Mobile weniger px als Medium & Large */
}

article div.home-pic {
	margin-top: -20px;
	margin-bottom: 20px;
}

article h2.first-gradient,
article h2.content-gradient {
	padding-bottom: 10px;
}

h2.home {
	padding: 10px 0 0 20px;
}

div.content {
	padding-bottom: 40px;
}

nav.classic {
	display: none; /* Anker03 - FGR ganz oben für Large */
}

div.gallery { /* Anker10 - für Kommerziell, Portrait, Hochzeit und Projekte */
	margin-top: 15px;
}

a.image-link img {
	width: 100%;
}

/* Contact Form - Mobile First ---------------------------------------------- */
form {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 30px;
	display: flex; /* Aktiviert Flexbox für den Inhalt */
	justify-content: center; /* Oberer Bereich der Box */
	font-size: 22px;
	font-weight: normal;
	letter-spacing: 0.06rem;
}

fieldset {
	border: none;
}

.radio-group label {
	 margin-right: 20px;
 }

.form-box {
    width: 80%; /* Breite der Boxen */
    height: auto; /* Höhe der Boxen */
		margin: 20px; /* Abstand zwischen Boxen */
		padding-left: 20px;
		padding-right: 30px;
    background-color: #ccc; /* Hintergrundfarbe e2d1c5 oder D7C3B1 */
    display: flex; /* Aktiviert Flexbox für den Inhalt */
    flex-direction: column; /* Richtet den Inhalt senkrecht aus */
    justify-content: flex-start; /* Oberer Bereich der Box */
		border: 1px solid #222;
    border-radius: 30px; /* Abgerundete Ecken */
}

textarea#adresse {
	 height:120px ;
 }

form h2,
form h3,
form p,
p.form-label,
div.buttons {
	padding-right: 0; /* stehen lassen weil nötig */
	padding-left: 0; /* stehen lassen weil nötig */
}

form h2 {
	padding-top: 30px;
}

form h3 {
	padding-top: 30px;
	padding-bottom: 20px;
}

p.form-label {
	padding-bottom: 20px;
}

p.form-label input,
p.form-label textarea { /* im Eingabefeld */
	margin-top: 5px;
	padding-left: 10px;
}

p.note {
	font-size: 16px;
	padding-top: 8px;
	padding-bottom: 30px;
	padding-left: 0;
}

label {
	cursor: pointer;
	margin-top: 20px;
	font-size: 18px;
	color: #333;
}

input#besuchername,
input#besuchermail,
input#besuchertel,
input#vorname,
input#nachname,
input#name,
input#name_inserat,
input#name_support,
input#kontakt,
input#praesident,
input#major,
input#manager,
input#verein,
input#mitglieder,
input#firma,
input#firma_inserat,
input#firma_support,
input#adresse,
input#adresse_inserat,
input#adresse_support,
input#strasse,
input#plz,
input#ort,
input#region,
input#email,
input#email_inserat,
input#email_support,
input#telefon,
input#website,
input#website_inserat,
input#website_support,
input#zahl,
textarea {
	width: 100%;
	height: 30px;
	padding-top: 2px;
	font-family: "Kefa", serif;
	font-size: 1.2rem;
	letter-spacing: 0.06rem;
	color: #555;
	border: none;
	border-radius: 5px;
	border-bottom-style: solid;
	border-bottom-color: white;
}

textarea { height: 250px; }

input#besuchername:focus,
input#besuchermail:focus,
input#besuchertel:focus,
input#vorname:focus,
input#nachname:focus,
input#name:focus,
input#name_inserat:focus,
input#name_support:focus,
input#kontakt:focus,
input#praesident:focus,
input#major:focus,
input#manager:focus,
input#verein:focus,
input#mitglieder:focus,
input#firma:focus,
input#firma_inserat:focus,
input#firma_support:focus,
input#adresse:focus,
input#adresse_inserat:focus,
input#adresse_support:focus,
input#strasse:focus,
input#plz:focus,
input#ort:focus,
input#region:focus,
input#email:focus,
input#email_inserat:focus,
input#email_support:focus,
input#telefon:focus,
input#website:focus,
input#website_inserat:focus,
input#website_support:focus,
input#zahl:focus,
textarea:focus {
	border: none;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	border-bottom-color: darkgreen;
}

button#senden,
button#senden_inserat,
button#senden_support {
	float: left;
	width: 60%;
	height: 60px;
	margin: 10px 1% 40px 0;
	background-color: #222;
	font-family: "Kefa", serif;
	font-size: 20px;
	color: #bbb;
	border: none;
	border-radius: 10px;
}

button#abbrechen,
button#abbrechen_inserat,
button#abbrechen_support {
	float: right;
	width: 36%;
	height: 60px;
	margin: 10px 0 40px 1%;
	background-color: #222;
	font-family: "Kefa", serif;
	font-size: 20px;
	color: #bbb;
	border: none;
	border-radius: 10px;
}

button#senden:hover,
button#senden_inserat:hover,
button#senden_support:hover,
button#senden:focus,
button#senden_inserat:focus,
button#senden_support:focus,
button#abbrechen:hover,
button#abbrechen_inserat:hover,
button#abbrechen_support:hover,
button#abbrechen:focus,
button#abbrechen_inserat:focus,
button#abbrechen_support:focus {
	cursor: pointer;
	background-color: #252121;
	color: #bbb;
}

input[type="file"]::file-selector-button {
	background-color: #beae97;
	color: #333;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 4px;
}

input[type="file"]::file-selector-button:hover {
	background-color: #252121;
	color: #bbb;
}

/* Footer - Mobile First ---------------------------------------------------- */
footer {
	height: 300px;
	width: 100%;
	text-align: center;
}

img.footer-logo {
	width: 88px;
	margin-top: 40px;
	margin-bottom: -10px; /* Anker04 */
}

footer li {
	padding: 0;
}

.footer-nav-ml {
	display: inherit;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: -170px;
}

.footer-nav-ml li {
	display: inline-block;
	margin-top: 10px; /* Anker04 */
	padding-top: 10px; /* Anker04 */
}

.footer-nav {
	display: none;
}

.footer-legal li {
	display: inline;
}

.copyright {
	margin-top: 200px;
	font-size: 14px;
}

.footer-legal {
	color: #666;
	font-size: 14px;
	margin: 10px 10px 0 10px;
}


/* ========================================================================== */
/* =====  Medium - 750px - 1199px  ========================================== */
/* =====  Umbruch von Mobile First (Small) zu Medium wegen Footer  ========== */
/* ========================================================================== */
@media screen and (min-width:750px) { /* Anker08 */

/* Fade-in entfernt weil die linke Box nicht sichtbar - siehe backup -------- */

/* Overlay Nav - Medium ----------------------------------------------------- */
img.logo-overlay {
	position: fixed;
	width: 88px;
	padding: 14px 0 0 35px; /* Anker11 */
}

/* Menu icon */
#menu-icon-shape {
  right: 20px; /* Anker14 - Mobile First hat weniger Abstand als Medium */
}

/* Content - Medium --------------------------------------------------------- */
header,
main h2,
main p,
div.legal-aufzaehlung {
	padding-left: 35px; /* Anker11 */
	padding-right: 35px; /* Anker11 */
}

header {
	margin-bottom: 0; /* Anker13 */
}

main h2,
main p {
	padding-left: 0; /* Anker09 */
}

div.content h2,
div.content p {
	padding-right: 35px; /* Anker11 */
	padding-left: 35px; /* Anker11 */
}

h2.content-gradient-center-aktive {
		text-align: center;
}

div.center {
	max-width: 100%;
	width: 750px; /* Anker02 unabhängig */
	margin: 0 auto;
}

div.box-container {
	max-width: 1560px; /* Maximale Breite */
	width: 100%; /* Nutzt verfügbare Breite */
	justify-content: flex-start; /* Einheitlicher Abstand zwischen Boxen */
	margin-left: 0;
	padding-left: 20px; /* Durchgehend 20px */
	padding-right: 20px; /* Durchgehend 20px */
	box-sizing: border-box; /* Padding wird in die width eingerechnet */
}

div.box-container-plakette {
	max-width: 1560px; /* Maximale Breite */
	width: 100%; /* Nutzt verfügbare Breite */
	justify-content: center; /* Einheitlicher Abstand zwischen Boxen */
	margin-left: 0;
	padding-left: 20px; /* Durchgehend 20px */
	padding-right: 20px; /* Durchgehend 20px */
	box-sizing: border-box; /* Padding wird in die width eingerechnet */
}

.box-plakette {
    width: 500px; /* Breite der Boxen */
}

ul.content {
  margin-left: 70px;     /* Einrückung */
	margin-right: 20px;
}

article {
	padding-bottom: 0; /* Anker06 */
}

article h2 {
	padding-top: 15px; /* Anker15 - First Mobile weniger px als Medium & Large */
}

div.article {
	width: 44.4%;
	float: left;
	display: inline-block;
	margin-right: 2%;
	margin-left: 3.6%;
	padding-top: 40px; /* Anker06 */
}

div.article {
	width: 44.4%;
	display: inline-block;
	margin-right: 3.6%;
	margin-left: 2%;
}

div.home img {
	max-width: 100%;
	margin: 0 auto;
	display: block;
}

div.gallery { /* Anker10 - für Kommerziell, Portrait, Hochzeit und Projekte */
	margin: 30px auto 20px auto;
	padding-left: 2.6%;
}

div.images {
	position: relative;
	transform: translate(-50%; 0);
}

a.image-link img {
	width: 48%;
}

div.form-box {
	max-width: 750px; /* Anker02 unabhängig */
	margin: 0 auto;
	margin-bottom: 30px;
	padding-right: 50px;
	padding-left: 50px;
}

/* Footer - Medium ------------------------------------------------- */
footer {
	height: 260px;
	width: 100%;
	text-align: center;
}

img.footer-logo {
	margin-top: 30px;
}

footer li {
	padding: 0;
}

.footer-nav-ml {
	display: inherit;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: -170px;
}

.footer-nav-ml li {
 	display: inline;
}

.footer-nav {
	display: none;
}
} /* End Mediaqueries Medium - 750px - 1199px */


/* ========================================================================== */
/* =====  Large - 1200px and larger  ======================================== */
/* =====  Umbruch von Medium zu Large wegen Header  ========================= */
/* ========================================================================== */
@media screen and (min-width:1200px) {

/* Content - Large ---------------------------------------------------------- */
div.header-wrap,
main h2,
main h3,
main p,
article,
div.legal-aufzaehlung,
div.buttons {
	max-width: 1560px; /* Anker02 unabhängig */
	margin: 0 auto;
}

h2.content-gradient-center-aktive {
		text-align: center;
}

div.center {
	max-width: 1560px; /* Anker02 unabhängig */
	margin: 0 auto;
}

div.logo {
	float: left;
}

h4.header-center, /* FGR ganz oben für Mobile First und Medium */
div#menu-icon-shape {
	display: none; /* Anker03 */
}

img.logo {
	padding-right: 175px; /* stehen lassen - damit auch Rafael Ocaña als Link funktioniert */
}

nav.classic {
	float: right;
	display: inherit; /* Anker03 - 'display: none' entgegen wirken - im General Settings */
	font-size: 22px;
	font-weight: bold;
}

nav.classic li {
	float: right;
}

.navigation {
	float: right;
	margin-right: 40px; /* margin stehen lassen und nicht in padding umwandeln */
	padding-top: 21px;
	color: black;
	text-decoration: none;
}

.navigation-onsite {
	float: right;
	margin-right: 40px; /* margin stehen lassen und nicht in padding umwandeln */
	padding-top: 21px;
	color: black;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-decoration-color: red;
}

a.navigation {
	border-bottom: 3px solid rgba(0, 0, 0, 0);
	transition: color 500ms ease;
}

a.navigation:hover {
	text-decoration: none;
	color: red;
	color: 3px solid rgba(0, 0, 0, 1);
}

.box-container {
    justify-content: flex-start; /* Einheitlicher Abstand zwischen Boxen */
}

.box-container-plakette {
    justify-content: center; /* Einheitlicher Abstand zwischen Boxen */
}

.box-team {
    margin: 10px; /* Abstand zwischen Boxen */
}

/* Contact Form - Large ----------------------------------------------------- */
div.form-box {
	max-width: 750px; /* Anker02 unabhängig */
	margin: 0 auto;
	margin-bottom: 30px;
	padding-right: 50px;
	padding-left: 50px;
}

form h2,
form h3,
form p,
p.form-label,
div.buttons {
	width: 100%;
}
} /* End Mediaqueries Large - 1200px and larger */