@font-face { font-family: "Cormorant"; src: url("../fonts/CormorantGaramond-VariableFont_wght.ttf"); font-style: normal; font-weight: 200 900; }
@font-face { font-family: "Cormorant"; src: url("../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf"); font-style: italic; font-weight: 200 900; }
@font-face { font-family: "Roboto"; src: url("../fonts/RobotoCondensed-VariableFont_wght.ttf"); font-style: normal; font-weight: 200 900; }
@font-face { font-family: "Roboto"; src: url("../fonts/RobotoCondensed-Italic-VariableFont_wght.ttf"); font-style: italic; font-weight: 200 900; }

:root {
	--font-family-head: "Cormorant", serif;
  --font-family-text: "Roboto", sans-serif;
  --color-bg: #faf9f6;
  --color-bg: #f5f0e2;
  --color-bg: #f8f3e9;
  --color-bg-hell: #f9f8f2;
  --color-bg-dunkel: #f2ebdf;
  --color-bg-highlight: #eaf2ea;
  --color-bg-highlight: #fefefe;
	 --color-primary: #123251;
  --color-accent: #e30613;
  --color-accent: #b8043b;
  --color-text: #222222;
  --color-muted: #666666;
  --max-width: 1200px;

	--hintergrund-beige: #e6dac7;
	--hintergrund-heller: #f9f5ec;
	--hintergrund-hell: #f8f5eb;
	--hintergrund-kopf: #343d44;
	--hintergrund-footer: #323b42;
	
	--color-bg-header: #2a3033fa;
}



/* Hlfsseiten */
.legal #container { font-size: .8125em; }

*, ::after, ::before { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { font-family: var(--font-family-text); font-size: 100%; hyphens: auto; }
body { margin: 0; color: var(--color-text); font-size: 1.1875rem; font-weight: 400; line-height: 1.9; background-image: url(/files/magnus-gastro/grafiken/Schieferhintergrund.jpg); background-size: cover; background-position: center top; background-attachment: fixed; background-repeat: no-repeat; }

h1,h2,h3 { font-family: var(--font-family-head); font-weight: 700; line-height: 1.4; hyphens: none; }
h1 { font-size: 2.5em; margin-bottom: 0; }
h2 { font-size: 2em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.3em; font-weight: 500; }

b, strong { font-weight: 500; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
li::marker { color: var(--color-accent); }

nav a { color: var(--color-muted); color: inherit; font-weight: 500; }
nav a:hover { color: var(--color-primary); color: #ccc; text-decoration: none; }

.btn,
button {
  font-family: var(--font-family-text);
  display: inline-block;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  border: none;
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 500;
  font-size: 0.95em;
  cursor: pointer;
  text-decoration: none;
  transition: .5s;
}

.btn:hover,
button:hover {
  filter: brightness(1.2);
  text-decoration: none;
  transition: .5s;
}

.media--left figure { margin-right: 1em; }
.media--right figure { margin-left: 1em; }


.mod_article { padding: .7rem 1rem; }
.mod_article>.inside { position: relative; max-width: var(--max-width); margin: 0em auto; padding: 2rem 3rem; padding: 0; background-color: var(--color-bg-dunkel); border-radius: 1rem; }
.mod_article>.inside>div { padding: 0 3rem; }
.mod_article>.inside>div:first-child { padding-top: 2rem; border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.mod_article>.inside>div:last-child { padding-bottom: 2rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.mod_article .titel { background-color: var(--color-bg-hell); padding-bottom: 2rem !important; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 5em 1em; padding-top: 3em !important; text-align: center; }
.cards>div { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; align-items: end; background-color: var(--color-bg-highlight); border-radius: 0.75em; padding-top: 3.3em; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); }
.cards>div::before { content: ""; position: absolute; left: 50%; top: -4rem; transform: translateX(-50%); width: 8rem; aspect-ratio: 1; background: url(/files/magnus-gastro/bilder/kunden/teller/Teller-Gastro.png) center / cover no-repeat; border-radius: 50%; box-shadow: 0 12px 30px rgba(0,0,0,.18); z-index: 2; }
.cards #catering::before { background-image: url(/files/magnus-gastro/bilder/kunden/teller/Teller-Catering.png); }
.cards #schulen::before { background-image: url(/files/magnus-gastro/bilder/kunden/teller/Teller-Schulen.png); }
.cards #senioren::before { background-image: url(/files/magnus-gastro/bilder/kunden/teller/Teller-Senioren.png); }
.cards #krankenhaeuser::before { background-image: url(/files/magnus-gastro/bilder/kunden/teller/Teller-Krankenhaus.png); }
.cards #lieferdienst::before { background-image: url(/files/magnus-gastro/bilder/kunden/teller/Teller-Mobil.png); }
.cards>div img { width: 100%; border-bottom-left-radius: .75em; border-bottom-right-radius: .75em; }
.cards h3 { align-self: start; margin-top: 0; margin-bottom: 0.5rem; font-size: 1.1em; font-size: 2.1rem; font-weight: 500; }
.cards .rte { align-self: start; color: var(--color-accent); line-height: 1.5; margin-bottom: 1em; }
#produktbilder ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
#produktbilder li { position: relative; background-color: var(--color-bg-highlight); border-radius: 0.75em; margin: 0 1em 1em 0; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); }



form { display: grid; gap: 0.75em; }
.formbody { margin: .3em 0; }
input, textarea, select { width: 100%; padding: 0.4em 0.7em; border-radius: 0.5em; border: 1px solid #d0d0d0; font: inherit; }
textarea { min-height: 6em; resize: vertical; }
.widget { display: flex; gap: .75em; align-items: center; margin: .5em 0; }
label { width: 10em; color: inherit; }
span.mandatory { color: var(--color-accent); }
.form-confirmation { background-color: var(--color-bg-highlight); padding: .5em 1em; }



  

#switch { display: block; position: fixed; top: 1rem; right: 1rem; font-size: 2rem; z-index: 200; }
#switch a { color: #fff; }
#switch a:hover { text-decoration: none; }

#header,
#footer { color: #fff; background-color: var(--color-bg-header); }

#header { position: sticky; Xposition: relative; top: 0; z-index: 100; }
.title_subtext { font-family: var(--font-family-text); font-size: .37em; font-weight: 400; }
.titel { display: flex; align-items: center; }
.titel h2,
.titel h3 { margin: .2rem 0; }
.titel figure { margin-right: 2rem; max-width: 66.6666%; }
.titel .rte { width: 33.333%; }
.titel img { border-radius: .5em; }

#footer p { margin: 0; }

#hmenu { border-top: 1px solid; padding: 0 2rem; }
#hmenu nav { max-width: var(--max-width); margin: 0 auto; }
#hmenu .rte { display: flex; justify-content: space-between; align-items: center; }
#willkommen { position: relative; background-image: url(/files/magnus-gastro/bilder/backgrounds/background01.jpg); background-size: cover; background-position: center; color: #fff; }
#willkommen>* { background: none !important; }
#willkommen h2 { font-size: clamp(1.35rem, 0.9rem + 2vw, 3rem); margin-top: 1em; margin-bottom: 4em; }

#kontaktformular { padding-bottom: 2rem; }

@media (max-width: 767px) {
  html  { font-size: clamp(10px, 4vw, 13px);}
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.3em; line-height: 1.2; }
  .titel .rte { width: 50%; }
  .titel figure { width: 50%; margin-right: 1.4rem; }
  .titel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  #hmenu { font-size: clamp(.7rem, 3vw, 1rem); padding-top: 1em; padding-bottom: 1em; }
  #hmenu .rte { display: block; }
}
@media (max-width: 575px) {
  .titel figure { aspect-ratio: 1.2/1; }
  .mod_article>.inside>div { padding: 0 2rem; }
}
@media (max-width: 430px) {
  .titel figure { aspect-ratio: 1/1; }
}