@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-slab-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('../fonts/roboto-slab-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/roboto-slab-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/roboto-slab-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/roboto-slab-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/roboto-slab-v13-latin-regular.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-slab-v13-latin-700.eot');
  src: local(''),
  url('../fonts/roboto-slab-v13-latin-700.eot?#iefix') format('embedded-opentype'),
  url('../fonts/roboto-slab-v13-latin-700.woff2') format('woff2'),
  url('../fonts/roboto-slab-v13-latin-700.woff') format('woff'),
  url('../fonts/roboto-slab-v13-latin-700.ttf') format('truetype'),
  url('../fonts/roboto-slab-v13-latin-700.svg#RobotoSlab') format('svg');
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-slab-v13-latin-900.eot');
  src: local(''),
  url('../fonts/roboto-slab-v13-latin-900.eot?#iefix') format('embedded-opentype'),
  url('../fonts/roboto-slab-v13-latin-900.woff2') format('woff2'),
  url('../fonts/roboto-slab-v13-latin-900.woff') format('woff'),
  url('../fonts/roboto-slab-v13-latin-900.ttf') format('truetype'),
  url('../fonts/roboto-slab-v13-latin-900.svg#RobotoSlab') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v23-latin-regular.eot');
  src: local(''),
  url('../fonts/open-sans-v23-latin-regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/open-sans-v23-latin-regular.woff2') format('woff2'),
  url('../fonts/open-sans-v23-latin-regular.woff') format('woff'),
  url('../fonts/open-sans-v23-latin-regular.ttf') format('truetype'),
  url('../fonts/open-sans-v23-latin-regular.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v23-latin-italic.eot');
  src: local(''),
  url('../fonts/open-sans-v23-latin-italic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/open-sans-v23-latin-italic.woff2') format('woff2'),
  url('../fonts/open-sans-v23-latin-italic.woff') format('woff'),
  url('../fonts/open-sans-v23-latin-italic.ttf') format('truetype'),
  url('../fonts/open-sans-v23-latin-italic.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v23-latin-600.eot');
  src: local(''),
  url('../fonts/open-sans-v23-latin-600.eot?#iefix') format('embedded-opentype'),
  url('../fonts/open-sans-v23-latin-600.woff2') format('woff2'),
  url('../fonts/open-sans-v23-latin-600.woff') format('woff'),
  url('../fonts/open-sans-v23-latin-600.ttf') format('truetype'),
  url('../fonts/open-sans-v23-latin-600.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v23-latin-600italic.eot');
  src: local(''),
  url('../fonts/open-sans-v23-latin-600italic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/open-sans-v23-latin-600italic.woff2') format('woff2'),
  url('../fonts/open-sans-v23-latin-600italic.woff') format('woff'),
  url('../fonts/open-sans-v23-latin-600italic.ttf') format('truetype'),
  url('../fonts/open-sans-v23-latin-600italic.svg#OpenSans') format('svg');
}

:root {
  --white: hsla(0, 0%, 100%, 1);
  --grey_light: hsla(220, 20%, 97%, 1);
  --grey_dark: #666666;
  --grey-darker: #222629;
  --grey_middle: #999999;
  --orange: #FFC125;
  --weissgelb: #ffffcc;
  --trans_grey: rgba(221, 221, 221, 0.55);
  --black_light: hsla(219, 22%, 26%, 1);
  --black_dark: #000;
  --col-green: rgba(0,128,0,1);
  --col-red: rgba(185,26,21,1);
  --col-marked: rgba(120,199,193,0.8);

  --ff-opensans: "Open Sans", sans-serif;
  --ff-roboto: "Roboto Slab", serif;
  --fs-1: calc(2.5rem + 1.1vw);
  --fs-2: calc(2.3rem + .5vw);
  --fs-3: calc(2.1rem + .2vw);
  --fs-4: 1.9rem;
  --fs-5: 1.8rem;
  --fs-6: 1.7rem;
  --fs-7: 1.5rem;
  --fs-8: 1.4rem;
  --fw-700: 700;

  --section-padding: 50px;
  --card-padding: 1rem;
  --text-padding: 1rem;
  --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07);
  --shadow-3: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  --radius-circle: 50%;
  --radius-100: 100px;
  --radius-8: 8px;
  --radius-6: 6px;

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 0.3s ease-in-out;
}

body.light_theme {
  --col-pri-dark: #d9b08c;
  --col-pri-light: #f6e5d5;
  --col-pri: #E7BB8F;
  --col-sec-dark: #116466;
  --col-sec-light: #4C95A2;
  --col-header-light: #222;
  --col-header-dark: #222629;
  --grd-darklight: linear-gradient(15deg, var(--col-pri-dark) 0%, #E2C1A3 100%);
  --bg-col-card: var(--grey_light);
  --bg-header: #fff;
  --bg-header-active:var(--grey_light);
  --bg-media: var(--col-pri);
  --col-p-light: #444;
  --col-p-dark: #222629;
  --col-h-light: #eee;
  --col-a: #333;
}

body.dark_theme {
  --col-pri-dark: #13547A;
  --col-pri-light: #4C95A2;
  --col-pri: #347991;
  --col-sec-dark: #d9b08c;
  --col-sec-light: #f6e5d5;
  --col-header-light: #fff;
  --col-header-dark: #222629;
  --grd-darklight: linear-gradient(15deg, var(--col-pri-light) 0%, var(--col-pri-dark) 100%);
  --bg-col-card: linear-gradient(195deg, var(--col-pri-dark) 0%, #5BA5AC 100%);
  --bg-header: var(--col-pri-dark);
  --bg-header-active: var(--col-pri-dark);
  --bg-media: var(--col-pri);
  --col-p-light: #fff;
  --col-p-dark: #eee;
  --col-h-light: #eee;
  --col-a: #efefef;
}

*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
ul {font-size: var(--fs-7);}
li { list-style: none;}
ul.circle { margin: 0 0 0 2rem; overflow-wrap: break-word;}
ul.circle li { list-style: circle; margin: 1.5rem 0;}
ul.circle ul { margin: 0 0 0 2rem;}
ul.circle li ul li { list-style: square;}
ul.circle li ul li ul li { list-style: disc;}
img, button { display: block;}
a {color: var(--col-a);}
img {border-radius: var(--radius-6);}
input, button, textarea, select {background: none; border: none; font: inherit;}
select option {background: none; color: var(--grey-darker);}
input, textarea { width: 100%; }
button {cursor: pointer; }
p {margin: 0.3rem 0; line-height: 2; font-size: var(--fs-7);}
progress {width: 100%; }
progress[value] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: var(--radius-6);}
progress[value]::-webkit-progress-value { border-radius: var(--radius-6); background: var(--col-pri-dark);}
progress[value]::-moz-progress-bar { border-radius:var(--radius-6); background: var(--col-pri-dark);}
.fa-file-pdf-o {background-color: var(--col-red); margin-right: 1rem; color: var(--col-pri-light);}
.fa {font-size: var(--fs-6);}

html {font-family: var(--ff-opensans); font-size: 10px; scroll-behavior: smooth;}
body {background-color: var(--white); color: var(--grey_dark); font-size: 1.6rem; line-height: 1.7;}
body.nav-active { overflow: hidden; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
.w-100 { width: 100%;}
.h1, .h2, .h3, .h4 {color: var(--col-p-dark); line-height: 1.3;}
.h1 { font-size: var(--fs-2); }
.h2 { font-size: var(--fs-3); }
.h3 { font-size: var(--fs-4); }
.h4 { font-size: var(--fs-5); }

.btn {color: var(--col-pri-dark); font-size: var(--fs-6); font-weight: var(--fw-700); text-decoration: none; max-width: max-content; padding: 12px 28px;
  border-radius: var(--radius-100); transition: var(--transition-1); will-change: transform;}
.btn:is(:hover, :focus-visible) {transform: translateY(-4px); transition: 0.5s ease-in-out;}
.btn-primary, .btn-secondary:is(:hover, :focus-visible) {border: 2px solid var(--col-pri-dark); background-color: var(--col-pri-dark); color: var(--white);}
.btn-secondary {border: 2px solid var(--col-sec-dark); color: var(--col-sec-dark);}
.container {padding-inline: 16px;}
.section { padding-block: var(--section-padding); }
.section-text { font-size: var(--fs-5); }
.section-title { margin-block-end: 16px; margin-bottom: 3rem; color: var(--col-sec-dark);}
.grid-list, .card-content-list {display: grid; gap: 20px;}
.startpadding {padding-block-start: calc(var(--section-padding) + 80px);}
table {width: 100%; padding: 0; border-collapse: collapse; border-spacing: 0; font-size: var(--fs-8); margin: 1rem auto;}
thead > tr > th {font-weight: 600; font-size: var(--fs-8);}
table tr {border: 1px dotted var(--col-sec-light); padding: 5px;}
table th, table td {padding: 10px;}
table th {text-transform: uppercase;}

::placeholder {color: var(--col-p-light); opacity: 1;}
::-ms-input-placeholder {color: var(--col-p-light);}
form {width: 100%; background-color: transparent; padding: 10px; border-radius: var(--radius-8); box-shadow: var(--shadow-2);}
form > * {margin: 1rem 0; color: var(--col-p-light);}
form .form-group {display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin-bottom: 20px;}
form label {display: block; margin-bottom: 5px; font-weight: bold;}
form input, form textarea, form select {width: 100%; padding: 10px; border: 1px solid var(--col-p-light); border-radius: var(--radius-6); font-size: var(--fs-5);}
form input:focus, form textarea:focus {outline: none; border-color: var(--col-pri-dark); box-shadow: var(--shadow-1);}
form textarea {min-height: 120px; resize: vertical;}
form .error {color: var(--col-red); font-size: 14px; margin-top: 5px; display: none;}
form .input-error {border-color: var(--col-red);}
form .feedback {color: var(--col-red);}
form button {background-color: var(--col-sec-dark); color: var(--white); border: none; padding: 12px 20px; border-radius: 4px; cursor: pointer;
  font-size: 16px; width: 100%; transition: background-color 0.3s;}
form button:hover {background-color: var(--col-sec-light);}
form input[type="checkbox"] {appearance: none; width: 18px; height: 18px; border: 1px solid var(--col-p-light); border-radius: 4px;
  position: relative; cursor: pointer; transition: all 0.3s;}
form input[type="checkbox"]:checked {background-color: var(--col-pri-dark); border-color: var(--col-pri-dark);}
form input[type="checkbox"]:checked::after {content: "✓"; font-size: 14px; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
form input[type="checkbox"]:hover {border-color: var(--col-pri-dark);}
form .captcha-container {margin-bottom: 20px; display: none;}
form .captcha-img {width: auto; height: auto; border-radius: 4px; margin-bottom: 10px;}
form .refresh-captcha {color: var(--col-pri-light); font-size: 14px; cursor: pointer; display: inline-block; margin-top: 5px; margin-bottom: 10px;}
form .refresh-captcha:hover {text-decoration: underline;}
form .success-message {background-color: var(--grey_light); color: var(--col-green); padding: 15px; border-radius: 4px; margin-top: 20px; text-align: center; display: none;}

header {padding-block: 15px; position: fixed; top: 0; width: 100%; background: var(--bg-header); transition: var(--transition-1); z-index: 1; overflow: visible;}
header.active {background: var(--bg-header-active); box-shadow: var(--shadow-1);}
header .container {display: flex; justify-content: space-between; align-items: center; gap: 10px;}

.logo {position: relative; min-width: 77px; z-index: 2; color: var(--col-sec-dark); font-family: var(--ff-roboto);}
.logo span {display: inline-block; color: var(--col-pri-light); margin-left: 2px;}

.navbar-actions {display: flex; align-items: center; gap: 15px; margin-left: auto;}
.theme-btn {padding: 4px; width: 48px; background: var(--grey_light); border-radius: 100px; transition: var(--transition-1); border: 1px inset var(--white);}
header.active .theme-btn, header.active .user-btn {background: var(--white);}
.theme-btn span {display: block;}
.theme-btn .icon {position: relative; left: 0; width: 20px; height: 20px; border-radius: 50px; box-shadow: inset 9px -6px var(--col-pri-dark);
  transition: var(--transition-1);}
.theme-btn.active .icon {left: 18px; box-shadow: inset 20px -20px var(--col-pri-dark);}
.user-btn {background: var(--grey_light); border-radius: var(--radius-circle); display: inline-block; font-size: var(--fs-3); border: 1px inset var(--white);
  width: 40px; height: 40px; line-height: 40px; text-align: center; transition: var(--transition-1); color: var(--col-pri-dark);}
.user-btn .fa {font-size: var(--fs-3);}

.nav-toggle-btn {position: relative; transition: var(--transition-1); z-index: 8;}
.nav-toggle-btn.active {transform: rotate(-45deg); }
.nav-toggle-btn span {width: 20px; height: 2px; background: var(--col-sec-dark); margin: 5px; transition: var(--transition-1); display: block;}
.nav-toggle-btn :is(.one, .three) { width: 10px;}
.nav-toggle-btn .one {margin-left: auto; transform-origin: left;}
.nav-toggle-btn .three {transform-origin: right;}
.nav-toggle-btn.active .one { transform: rotate(90deg) translateX(-3px);}
.nav-toggle-btn.active .three { transform: rotate(90deg) translateX(3px);}

nav {position: fixed; left: 0; top: 6rem; width: 100%; height: auto; display: none; z-index: 5; border-bottom: 2px solid var(--col-sec-dark); background: var(--bg-header);}
nav.active {display: block;}
.navbar-list > li {margin: 0 10px 20px 0; padding-inline: 15px;}
.navbar-link {position: relative; width: max-content; margin-inline: auto; color: var(--col-sec-dark); text-decoration: none;
  font-family: var(--ff-roboto); font-size: var(--fs-7); font-weight: var(--fw-700); padding: 5px;}
header.active nav {background: var(--bg-header-active);}

.submenu {position: relative; margin-top: 1px; display: none; transition: opacity 0.5s, transform 0.5s; transform: translateY(-10px); background: var(--bg-header);}
header.active .submenu {background: var(--bg-header-active);}
.has-submenu:hover .submenu, .has-submenu:active .submenu, .has-submenu.active .submenu {display: block; opacity: 1; transform: translateY(0); padding-top: 10px;}
.submenu a {display: inline-block; padding: 8px 15px; color: var(--col-sec-dark); text-decoration: none; font-size: var(--fs-8);}
.submenu a:hover {color: var(--col-sec-light);}
.has-submenu > .navbar-link::after {content: "▼"; display: inline-block; margin-left: 0.5rem; font-size: 0.75em; transition: transform 0.3s;}
.has-submenu:hover > .navbar-link::after {transform: rotate(180deg); color: var(--col-sec-light);}

.hero {padding-block-start: calc(var(--section-padding) + 50px); background-color: var(--white);}
.hero .container {display: grid; gap: 50px;}
.hero-banner {position: relative; max-width: max-content; margin-inline: auto;}
.hero-banner .w-100 {mask-image: url("../images/mask.svg"); -webkit-mask-image: url("../images/mask.svg"); mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: 95%; -webkit-mask-size: 95%;}
.hero .shape {position: absolute; bottom: 10%; right: 2%; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); border: 1px solid var(--col-pri-dark);
  padding: 1rem; background: var(--grey_light); border-radius: var(--radius-6); font-size: var(--fs-8); font-weight: var(--fw-700); color: var(--col-sec-dark);}
.hero .shape .fa {color: var(--col-pri-dark);}
.hero-content, .hero-content h1 {text-align: center; color: var(--grey_dark);}
.hero .section-text { margin-block: 24px 36px;}

.btn-wrapper {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;}
.card-title {margin-block: 1rem; font-size: var(--fs-6); font-weight: var(--fw-700); text-transform: uppercase;}
.card-content {display: flex; flex-direction: column; gap: var(--card-padding); justify-content: flex-start; align-items: flex-start;}
.card-content.vertical {flex-direction: column-reverse; align-items: center;}
.card-content figure, .card-content-list figure {margin: 1rem auto;}
.card-content figcaption {color: var(--col-sec-light); font-size: var(--fs-8); font-style: italic; padding: 2px; text-align: center;}
.card-content-list figcaption {color: var(--col-sec-light); font-size: var(--fs-8); font-style: italic; padding: 2px;}

.references li a {height: 100%; text-decoration: none;}
.references li:is(:hover, :focus-visible) { transform: translateY(-4px); transition: 0.5s ease-in-out;}
.references-card {background: var(--bg-col-card); border-radius: var(--radius-6); position: relative; overflow: hidden;
  padding: 2rem; transition: all 0.3s ease; height: 100%; box-shadow: var(--shadow-3);}
.references-card .card-icon {max-width: max-content; margin: 2rem auto;}
.references-card .card-icon img {width: 52px; height: 52px;}

.service {border-block: 1px solid var(--col-pri-light);}
.service .btn {margin-block-start: 24px;}
.service-card {padding: 2rem; display: flex; flex-direction: column; gap: var(--card-padding); border-radius: var(--radius-8); color: var(--col-p-dark);
  overflow: hidden; background: var(--bg-col-card); box-shadow: var(--shadow-3);}
.service-card .btn-text {display: flex; justify-content: center; align-items: center; gap: 5px; font-weight: var(--fw-700); transition: var(--transition-1);
  color: var(--col-a); text-decoration: none;}
.service-card .btn-text:is(:hover, :focus-visible) {gap: 10px;}
.service-card .card-banner img {width: 100%;}
.service-card .card-banner img.small {min-width: 30%; width: 50%;}

.media {background: var(--white);}
.media-card {display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 5px; box-shadow: var(--shadow-3);
  background: var(--bg-col-card); border-radius: var(--radius-8); color: var(--col-p-light);}
.media-card ul {padding: 1rem;}
.media-card ul li {padding: 1rem;}
.media-card .media-icons a {display: inline-block; padding: 1rem;}
.media-card .media-icons img {display: inline-block; width: 32px; height: 32px;}

footer {padding-block: 40px; background: var(--grey_light); font-size: var(--fs-8);}
footer .container {display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 10px; color: var(--grey_dark);}
footer .container a {color: var(--grey_dark);}
footer .container p {text-align: center;}
a#go-top {position: fixed; bottom: 40px; right: 20px; width: 45px; height: 45px; display: grid; place-items: center; background: var(--col-pri-light);
  font-size: 20px; color: var(--col-sec-dark); border: 2px solid var(--col-sec-dark); border-radius: 50%; opacity: 0; text-decoration: none;
  pointer-events: none; transform: translateY(10px); z-index: 20;}
a#go-top:is(:hover, :focus-visible) {color: var(--col-sec-light);}
a#go-top.active {opacity: 1; pointer-events: all; transform: translateY(0);}

#cookie-banner {position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--grey_middle); padding: 20px; text-align: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; display: none;}
#cookie-banner p {margin: 0 0 10px 0; color: var(--white);}
#cookie-banner button {display: inline-block; background-color: var(--col-green); color: var(--white); border: none; padding: 8px 16px; margin: 5px;
  cursor: pointer; border-radius: var(--radius-6);}
#cookie-banner button.decline {background-color: var(--col-red);}
#cookie-banner button:hover {opacity: 0.8;}

@media screen and (max-width: 768px) {
  table {border: 0;}
  table thead {display: none;}
  table tr {margin-bottom: 10px; display: block; border-bottom: 2px solid var(--col-sec-dark);}
  table td {display: block; text-align: left; font-size: 13px; border-bottom: 1px dotted var(--col-sec-light);}
  table td:last-child {border-bottom: 0;}
  table td:before {content: attr(data-label); float: right; text-transform: uppercase; font-weight: 600; margin-left: 0.5rem;}
}

@media (min-width: 575px) {
  .container {max-width: 540px; width: 100%; margin-inline: auto;}
  .navbar-list {max-width: 540px; margin-inline: auto;}
}

@media (min-width: 768px) {
  .container {max-width: 760px;}
  .navbar-list {max-width: 760px;}
  .section-text {--fs-5: 2rem;}
  .service .title-wrapper {display: flex; justify-content: space-between; align-items: center; gap: 2rem;}
  .service .btn {min-width: max-content;}
}

@media (min-width: 992px) {
  :root {--section-padding: 80px;}
  :root {--card-padding: 3rem;}
  .h1 { font-size: var(--fs-1); }
  .h2 { font-size: var(--fs-2); }
  .h3 { font-size: var(--fs-3); }
  .h4 { font-size: var(--fs-4); }
  .container { max-width: 990px; }
  form {padding: 30px;}
  header {padding-block: 30px;}
  header.active {padding-block: 15px;}
  .navbar-actions {order: 1; margin-left: 0;}
  .nav-toggle-btn {display: none;}
  nav {all: unset;}
  .navbar-link {transform: translateY(0); font-size: unset; padding-inline: 10px;}
  .navbar-list > li {margin: 0; padding: 0;}
  .navbar-list {display: flex; justify-content: center; align-items: center; gap: 5px; width: 100%;}
  .navbar-link::before {height: 2px;}
  .submenu {position: absolute;}
  .hero { padding-block-start: calc(var(--section-padding) + 80px); }
  .hero .container {grid-template-columns: 0.8fr 1fr; align-items: center; gap: 100px;}
  .hero-content { text-align: left; }
  .hero .btn-wrapper {justify-content: flex-start; }
  .card-title {text-align: center;}
  .card-content.vertical {flex-direction: row; gap: var(--card-padding); justify-content: space-around; align-items: flex-start;}
  .card-content-list {grid-template-columns: 1fr 1fr; gap: 30px; justify-content: center;}
  .grid-list {gap: 30px;}
  .references .grid-list {grid-template-columns: repeat(4, 1fr); }
  .service .grid-list {grid-template-columns: 1fr; } /* gap = kurz für column-gap, row-gap */
  .service-card {padding: 3rem;}
  .service-card .card-banner {width: auto;}
  .service-card .card-banner img {width: auto; min-width: 100%; }
  .media .grid-list { grid-template-columns: 1fr 1fr;}
  footer .container {flex-direction: row;}
  footer {font-size: var(--fs-7);}
}

@media (min-width: 1200px) {
  .container {max-width: 1180px;}
  .navbar-list {gap: 20px;}
  .grid-list {gap: 40px;}
}

@media (min-width: 1400px) {
  .container {max-width: 1320px; }
  .hero .container {grid-template-columns: 1fr 0.8fr; }
  .hero .section-text {--fs-5: 2.4rem; }
}