/* ==================================================
   SCHICHTARBEITER MEALPREP – GRUNDDESIGN
   ================================================== */

/* Markenfarben */
:root {
  --schicht-blau: #17324a;
  --schicht-blau-hell: #244963;
  --schicht-orange: #f26a21;
  --schicht-gelb: #f5b51b;
  --schicht-grau: #f3f4f4;
  --schicht-text: #22272b;
  --schicht-weiss: #ffffff;
}

/* Grundseite */
body {
  background: var(--schicht-weiss);
  color: var(--schicht-text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

/* ==================================================
   HEADER
   ================================================== */

.container-header {
  background-color: var(--schicht-blau);
  background-image: linear-gradient(
    135deg,
    var(--schicht-blau) 0%,
    var(--schicht-blau-hell) 100%
  );
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.container-header .navbar-brand a,
.container-header .site-description {
  color: var(--schicht-weiss);
}

.container-header .navbar-brand a {
  font-weight: 700;
  text-decoration: none;
}

/* ==================================================
   HAUPTMENÜ
   ================================================== */

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  color: var(--schicht-weiss);
  font-weight: 600;
  text-decoration: none;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > span:hover,
.container-header .mod-menu > li.active > a {
  color: var(--schicht-orange);
}

/* Dropdown */
.container-header .mod-menu .metismenu.mod-menu .mm-collapse,
.container-header .metismenu.mod-menu .mm-collapse {
  background: var(--schicht-weiss);
  min-width: 280px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.container-header .metismenu.mod-menu .mm-collapse a {
  color: var(--schicht-text);
}

.container-header .metismenu.mod-menu .mm-collapse a:hover {
  color: var(--schicht-orange);
}

/* ==================================================
   ÜBERSCHRIFTEN
   ================================================== */

h1,
h2,
h3,
h4 {
  color: var(--schicht-blau);
  font-weight: 700;
}

h1 {
  border-bottom: 4px solid var(--schicht-orange);
  padding-bottom: 0.3rem;
}

/* Links */
a {
  color: var(--schicht-blau);
}

a:hover {
  color: var(--schicht-orange);
}

/* ==================================================
   BUTTONS
   ================================================== */

.btn-primary {
  background-color: var(--schicht-orange);
  border-color: var(--schicht-orange);
  font-weight: 700;
}

.btn-primary:hover {
  background-color: #d95714;
  border-color: #d95714;
}

/* ==================================================
   BUCHSEITE
   ================================================== */

/* Klasse, die wir beim Buchcover eingetragen haben */
.book-cover,
.item-image.book-cover {
  float: none !important;
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 1rem auto 2rem auto !important;
  text-align: center;
}

.book-cover img,
.item-image.book-cover img,
img.book-cover {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ==================================================
   INHALTSBEREICH
   ================================================== */

.site-grid {
  margin-top: 1.5rem;
}

main {
  font-size: 1.05rem;
}

/* später für Tipp-Boxen nutzbar */
.schicht-tipp {
  background: var(--schicht-grau);
  border-left: 5px solid var(--schicht-orange);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}
/* ==================================================
   STARTSEITE – HERO
   ================================================== */

.shift-hero {
  background:
    linear-gradient(135deg, #17324a 0%, #244963 100%);
  color: #ffffff;
  border-radius: 8px;
  padding: 4.5rem 3.5rem;
  margin: 1rem 0 3rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.shift-hero-content {
  max-width: 850px;
}

.shift-hero h1 {
  color: #ffffff;
  border: 0;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
}

.shift-kicker {
  color: #f26a21;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: .75rem;
}

.shift-lead {
  font-size: 1.25rem;
  max-width: 720px;
  margin-bottom: 2rem;
}

.shift-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.2rem;
}

.shift-button {
  display: inline-block;
  padding: .85rem 1.4rem;
  border-radius: 5px;
  font-weight: 700;
  text-decoration: none;
}

.shift-button-primary {
  background: #f26a21;
  color: #ffffff;
}

.shift-button-primary:hover {
  background: #d95714;
  color: #ffffff;
}

.shift-button-secondary {
  border: 2px solid #ffffff;
  color: #ffffff;
}

.shift-button-secondary:hover {
  background: #ffffff;
  color: #17324a;
}

.shift-types {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  font-weight: 700;
}

@media (max-width: 700px) {
  .shift-hero {
    padding: 2.5rem 1.5rem;
  }

  .shift-buttons {
    flex-direction: column;
  }

  .shift-button {
    text-align: center;
  }
}
/* ==================================================
   STARTSEITE – REZEPTKATEGORIEN
   ================================================== */

.recipe-section {
  padding: 1rem 0 3.5rem;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 2rem;
}

.section-kicker {
  display: block;
  color: var(--schicht-orange);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .08em;
  margin-bottom: .35rem;
}

.section-heading h2 {
  font-size: 2.2rem;
  margin: 0 0 .6rem;
}

.section-heading p {
  font-size: 1.08rem;
  color: #555;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.recipe-card {
  display: block;
  background: #ffffff;
  border: 1px solid #e2e6e8;
  border-top: 5px solid var(--schicht-orange);
  border-radius: 7px;
  padding: 1.5rem;
  color: var(--schicht-text);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}

.recipe-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.13);
  color: var(--schicht-text);
}

.recipe-icon {
  display: block;
  font-size: 2.2rem;
  margin-bottom: .7rem;
}

.recipe-card h3 {
  font-size: 1.3rem;
  margin-bottom: .6rem;
}

.recipe-card p {
  color: #555;
  margin-bottom: 1rem;
}

.recipe-link {
  color: var(--schicht-orange);
  font-weight: 700;
}

@media (max-width: 900px) {
  .recipe-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .recipe-grid {
    grid-template-columns: 1fr;
  }
}
/* ==================================================
   STARTSEITE – MEALPREP
   ================================================== */

.mealprep-home {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: center;
  background: #f3f4f4;
  border-radius: 8px;
  padding: 3.5rem;
  margin: 1rem 0 4rem;
}

.mealprep-home-content {
  max-width: 720px;
}

.mealprep-home h2 {
  font-size: 2.25rem;
  margin: .3rem 0 1rem;
}

.mealprep-home-content > p {
  font-size: 1.1rem;
  color: #4e555a;
  margin-bottom: 1.7rem;
}

.mealprep-points {
  display: grid;
  gap: .8rem;
  margin-bottom: 2rem;
}

.mealprep-points div {
  background: #ffffff;
  border-left: 4px solid var(--schicht-orange);
  padding: .9rem 1rem;
  border-radius: 4px;
}

.mealprep-points strong {
  display: block;
  color: var(--schicht-blau);
  margin-bottom: .15rem;
}

.mealprep-points span {
  color: #555;
}

.mealprep-home-badge {
  background: var(--schicht-blau);
  color: #ffffff;
  min-height: 280px;
  border-radius: 8px;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.13);
}

.mealprep-home-badge span {
  color: var(--schicht-orange);
  font-weight: 800;
  letter-spacing: .12em;
}

.mealprep-home-badge strong {
  font-size: 2.2rem;
  line-height: 1.05;
  margin: .5rem 0 1rem;
}

.mealprep-home-badge small {
  font-weight: 700;
  letter-spacing: .05em;
}

@media (max-width: 800px) {
  .mealprep-home {
    grid-template-columns: 1fr;
    padding: 2rem 1.4rem;
  }

  .mealprep-home-badge {
    min-height: 200px;
  }
}
/* ==================================================
   STARTSEITE – BJÖRNS TIPPS
   ================================================== */

.bjorn-section {
  padding: 1rem 0 4rem;
}

.bjorn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.bjorn-tip-card {
  position: relative;
  background: var(--schicht-blau);
  color: #ffffff;
  padding: 1.7rem;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(0,0,0,.1);
}

.bjorn-tip-card h3 {
  color: #ffffff;
  font-size: 1.25rem;
  margin: .5rem 0 .7rem;
}

.bjorn-tip-card p {
  margin: 0;
  color: rgba(255,255,255,.88);
}

.bjorn-number {
  display: block;
  color: var(--schicht-orange);
  font-weight: 800;
  font-size: 1.6rem;
}

@media (max-width: 800px) {
  .bjorn-grid {
    grid-template-columns: 1fr;
  }
}
/* ==================================================
   STARTSEITE – EMPFEHLUNGEN
   ================================================== */

.recommend-section {
  background: #f3f4f4;
  border-radius: 8px;
  padding: 3.5rem;
  margin: 0 0 4rem;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.recommend-card {
  background: #ffffff;
  border-radius: 7px;
  padding: 1.6rem;
  border-bottom: 4px solid var(--schicht-orange);
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
}

.recommend-icon {
  display: block;
  font-size: 2.3rem;
  margin-bottom: .7rem;
}

.recommend-card h3 {
  font-size: 1.25rem;
  margin-bottom: .6rem;
}

.recommend-card p {
  color: #555;
  margin: 0;
}

@media (max-width: 800px) {
  .recommend-section {
    padding: 2rem 1.4rem;
  }

  .recommend-grid {
    grid-template-columns: 1fr;
  }
}
/* ==================================================
   STARTSEITE – DAS BUCH
   ================================================== */

.book-home {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 3.5rem;
  align-items: center;
  background: var(--schicht-blau);
  color: #ffffff;
  padding: 3.5rem;
  margin: 0 0 4rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.book-home-image {
  text-align: center;
}

.book-home-image img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
}

.book-home h2 {
  color: #ffffff;
  font-size: 2.25rem;
  margin: .35rem 0 1rem;
}

.book-home-lead {
  font-size: 1.15rem;
  line-height: 1.6;
}

.book-home-content p {
  color: rgba(255,255,255,.9);
}

.book-home-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem 1.5rem;
  margin: 1.5rem 0;
  font-weight: 700;
}

.book-home-points span {
  color: #ffffff;
}

@media (max-width: 800px) {
  .book-home {
    grid-template-columns: 1fr;
    padding: 2rem 1.4rem;
  }

  .book-home-points {
    grid-template-columns: 1fr;
  }
}
/* ==================================================
   FOOTER – SCHICHTARBEITER MEALPREP
   ================================================== */

.container-footer {
  background: #17324a !important;
  background-image: none !important;
  color: #ffffff !important;
  padding: 2rem 0 !important;
}

/* innerer Footer-Bereich */
.container-footer .grid-child {
  align-items: center;
}

/* Footer-Menü horizontal */
.container-footer ul.mod-menu,
.container-footer .mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container-footer .mod-menu li {
  display: inline-block !important;
  list-style: none !important;
  margin: 0 !important;
}

.container-footer .mod-menu li a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
}

.container-footer .mod-menu li a:hover {
  color: #f26a21 !important;
}

/* Smartphone */
@media (max-width: 600px) {
  .container-footer ul.mod-menu,
  .container-footer .mod-menu {
    gap: .8rem 1.2rem !important;
  }
}
/* Copyright im Footer */

.footer-copyright {
  color: #ffffff;
  font-size: .9rem;
  line-height: 1.5;
  margin-top: .8rem;
}

.footer-copyright span {
  color: rgba(255,255,255,.75);
  font-size: .82rem;
}
/* ==================================================
   REZEPTSEITEN
   ================================================== */

.shift-recipe {
  max-width: 900px;
  margin: 0 auto 4rem;
}

.recipe-badge {
  display: inline-block;
  background: var(--schicht-orange);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .4rem .75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.recipe-intro {
  font-size: 1.2rem;
  font-style: italic;
  color: #50585e;
  margin-bottom: 1.5rem;
}

.recipe-check {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.3rem;
  background: var(--schicht-blau);
  color: #fff;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  margin: 1.5rem 0 2rem;
}

.recipe-check strong {
  color: var(--schicht-orange);
}

.shift-recipe h2 {
  margin-top: 2rem;
  font-size: 1.6rem;
}

.shift-recipe li {
  margin-bottom: .45rem;
}

.schicht-tipp {
  background: #f3f4f4;
  border-left: 5px solid var(--schicht-orange);
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
  border-radius: 5px;
}

.recipe-variation {
  background: #fff;
  border: 1px solid #dde2e5;
  padding: 1.2rem 1.4rem;
  border-radius: 6px;
}

.recipe-variation h3 {
  margin-top: 0;
}
/* ==================================================
   REZEPT AUS DEM BUCH
   ================================================== */

.book-recipe-badge {
  background: var(--schicht-blau);
  border-left: 4px solid var(--schicht-orange);
}

.book-recipe-box {
  background: var(--schicht-blau);
  color: #ffffff;
  padding: 1.7rem;
  margin-top: 2.5rem;
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}

.book-recipe-box > span {
  color: var(--schicht-orange);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.book-recipe-box h2,
.book-recipe-box h3 {
    color: #ffffff;
    margin: .5rem 0 .8rem;
}

.book-recipe-box p {
  color: rgba(255,255,255,.9);
}
/* Starterplan-Vorschaubild auf Mealprep-Übersicht kleiner darstellen */
.blog .item-image img[src*="mealprep-starterplan-vorschau"] {
    width: 58% !important;
    max-width: 620px;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem auto;
}

/* Auf Handy wieder volle Breite */
@media (max-width: 768px) {
    .blog .item-image img[src*="mealprep-starterplan-vorschau"] {
        width: 100% !important;
        max-width: none;
    }
}
/* Rücklink-Buttons dauerhaft sichtbar */
a.shift-button.shift-button-secondary,
a.shift-button.shift-button-secondary:link,
a.shift-button.shift-button-secondary:visited {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    background: #183a54 !important;
    color: #ffffff !important;

    border: 1px solid #183a54 !important;
    padding: 10px 16px !important;
    border-radius: 4px !important;

    text-decoration: none !important;
    font-weight: 600 !important;
}

a.shift-button.shift-button-secondary:hover,
a.shift-button.shift-button-secondary:focus,
a.shift-button.shift-button-secondary:active {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    background: #ff6b1a !important;
    color: #ffffff !important;

    border-color: #ff6b1a !important;
    text-decoration: none !important;
}
.shift-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.shift-button {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.shift-button-primary {
  background: #f47b20;
  color: #ffffff;
}

.shift-button-primary:hover {
  background: #dd6d18;
  color: #ffffff;
}

.shift-button-secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.shift-button-secondary:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}
.brand-logo > img {
    width: 700px !important;
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 768px) {
    .brand-logo > img {
        width: 280px !important;
        max-width: 100% !important;
        height: auto !important;
    }
}
/* =========================================================
   GRUNDLAYOUT
========================================================= */
.shift-hero,
.recipe-section,
.mealprep-home,
.bjorn-section,
.recommend-section,
.book-home {
  max-width: 1120px;
  margin: 0 auto 42px auto;
  box-sizing: border-box;
}

.section-heading {
  margin-bottom: 24px;
}

.section-kicker,
.shift-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f47b20;
  margin-bottom: 10px;
}

.shift-button {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
  padding: 11px 18px;
  transition: all 0.2s ease;
}

.shift-button-primary {
  background: #f47b20;
  color: #ffffff !important;
  border: 2px solid #f47b20;
}

.shift-button-primary:hover {
  background: #d96510;
  border-color: #d96510;
  color: #ffffff !important;
}

.shift-button-secondary {
  background: #ffffff;
  color: #17364f !important;
  border: 2px solid #ffffff;
}

.shift-button-secondary:hover {
  background: #f4f4f4;
  color: #17364f !important;
}

/* =========================================================
   HERO
========================================================= */
.shift-hero-with-horschd {
  position: relative;
  background: linear-gradient(135deg, #1d496a 0%, #17364f 100%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  padding: 0;
}

.shift-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  min-height: 430px;
  gap: 20px;
  padding: 46px 36px 34px 36px;
}

.shift-hero-content {
  position: relative;
  z-index: 3;
  max-width: 560px;
}

.shift-hero-content h1 {
  color: #ffffff;
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.08;
  margin: 0 0 16px 0;
  font-weight: 800;
}

.shift-lead {
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 22px;
}

.shift-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.shift-types {
  margin-top: 18px;
  color: rgba(255,255,255,0.96);
  font-size: 0.96rem;
  font-weight: 600;
}

.hero-visual {
  position: relative;
  min-height: 350px;
  z-index: 1;
}

/* dezente Stahlwerk-Silhouette */
.hero-industry-bg {
  position: absolute;
  inset: auto 0 20px 0;
  height: 220px;
  color: rgba(255,255,255,0.10);
  z-index: 1;
  pointer-events: none;
}

.hero-industry-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Geländer */
.hero-railing {
  position: absolute;
  right: 10px;
  bottom: 28px;
  width: 300px;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}

.hero-railing .rail-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 8px;
  background: rgba(205, 214, 222, 0.85);
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.14);
}

.hero-railing .rail-post {
  position: absolute;
  top: 28px;
  width: 8px;
  height: 82px;
  background: rgba(205, 214, 222, 0.82);
  border-radius: 8px;
}

.hero-railing .rail-post-1 { left: 18px; }
.hero-railing .rail-post-2 { left: 138px; }
.hero-railing .rail-post-3 { right: 18px; }

/* Horschd */
.hero-horschd {
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: min(290px, 100%);
  height: auto;
  z-index: 4;
  transform: rotate(-2deg);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.24));
}

/* =========================================================
   RECIPE CARDS
========================================================= */
.recipe-grid,
.recommend-grid,
.bjorn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.recipe-card,
.recommend-card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-bottom: 3px solid #f47b20;
  border-radius: 6px;
  padding: 22px 20px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.recipe-card:hover,
.recommend-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.recipe-icon,
.recommend-icon {
  display: inline-block;
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.recipe-card h3,
.recommend-card h3 {
  margin: 0 0 10px 0;
  color: #17364f;
  font-size: 1.15rem;
}

.recipe-card p,
.recommend-card p,
.section-heading p,
.bjorn-section p,
.mealprep-home p,
.book-home p {
  color: #4a5560;
  line-height: 1.65;
}

.recipe-link {
  display: inline-block;
  margin-top: 10px;
  color: #f47b20;
  font-weight: 700;
  text-decoration: none;
}

/* =========================================================
   MEALPREP BLOCK
========================================================= */
.mealprep-home {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 28px;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 34px 24px;
}

.mealprep-points {
  display: grid;
  gap: 12px;
  margin: 18px 0 8px 0;
}

.mealprep-points > div {
  background: #ffffff;
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.mealprep-home-badge {
  background: #17364f;
  color: #ffffff;
  border-radius: 8px;
  padding: 32px 20px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.mealprep-home-badge strong {
  display: block;
  font-size: 2rem;
  line-height: 1.1;
  margin-bottom: 10px;
}

.mealprep-home-badge small,
.mealprep-badge-small {
  display: block;
  opacity: 0.92;
  letter-spacing: 0.04em;
}

/* =========================================================
   BJÖRN TIPPS
========================================================= */
.bjorn-tip-card {
  background: #17364f;
  color: #ffffff;
  border-radius: 6px;
  padding: 22px 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.07);
}

.bjorn-tip-card h3 {
  color: #ffffff;
  margin: 6px 0 10px 0;
}

.bjorn-tip-card p {
  color: rgba(255,255,255,0.9);
}

.bjorn-number {
  display: inline-block;
  color: #f47b20;
  font-weight: 800;
  font-size: 1.2rem;
}

/* =========================================================
   BUCHBLOCK
========================================================= */
.book-home {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 26px;
  align-items: center;
  background: #17364f;
  color: #ffffff;
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.book-home-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.book-home-content h2,
.book-home-content p,
.book-home-content .book-home-points,
.book-home-content .section-kicker {
  color: #ffffff;
}

.book-home-lead {
  opacity: 0.94;
}

.book-home-points {
  margin: 12px 0 16px 0;
  font-weight: 700;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 991px) {
  .shift-hero-inner,
  .mealprep-home,
  .book-home {
    grid-template-columns: 1fr;
  }

  .recipe-grid,
  .recommend-grid,
  .bjorn-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 290px;
    order: -1;
  }

  .hero-horschd {
    width: 210px;
    right: 50%;
    transform: translateX(50%) rotate(-2deg);
    bottom: 12px;
  }

  .hero-railing {
    width: 220px;
    right: 50%;
    transform: translateX(50%);
    bottom: 14px;
  }

  .hero-industry-bg {
    height: 160px;
    opacity: 0.75;
  }

  .shift-hero-inner {
    padding: 26px 22px 24px 22px;
    min-height: auto;
  }

  .shift-types {
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .shift-hero,
  .recipe-section,
  .mealprep-home,
  .bjorn-section,
  .recommend-section,
  .book-home {
    margin-bottom: 28px;
  }

  .shift-hero-content h1 {
    font-size: 2.2rem;
  }

  .shift-lead {
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .hero-visual {
    min-height: 240px;
  }

  .hero-horschd {
    width: 170px;
    bottom: 6px;
  }

  .hero-railing {
    width: 180px;
    height: 90px;
  }

  .hero-railing .rail-top {
    top: 22px;
  }

  .hero-railing .rail-post {
    top: 22px;
    height: 62px;
  }

  .hero-industry-bg {
    height: 120px;
  }
}
/* =========================================================
   SCHICHTARBEITER MEALPREP
   STARTSEITE – FINALER DESKTOP-STAND MIT HORSCHD
   ========================================================= */


/* =========================================================
   GEMEINSAME BREITE / ABSTÄNDE
   ========================================================= */

.shift-hero-final,
.recipe-section,
.mealprep-home,
.bjorn-section,
.recommend-section,
.book-home {
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.recipe-section,
.mealprep-home,
.bjorn-section,
.recommend-section,
.book-home {
    margin-bottom: 42px;
}


/* =========================================================
   HERO – HORSCHD + STAHLWERK
   ========================================================= */

.shift-hero.shift-hero-final {
    position: relative;
    display: block;

    max-width: 1120px;
    min-height: 560px;

    margin: 32px auto 42px auto;

    padding: 0 !important;

    overflow: hidden;

    border-radius: 8px;

    background-color: #17364f;

    background-image:
        url("/images/horschd/horschd-hero-desktop.png.png") !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.14);
}


/* Dunkler Verlauf links für optimale Lesbarkeit */

.shift-hero-final .shift-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(15, 47, 70, 0.98) 0%,
            rgba(15, 47, 70, 0.94) 25%,
            rgba(15, 47, 70, 0.82) 43%,
            rgba(15, 47, 70, 0.38) 57%,
            rgba(15, 47, 70, 0.05) 72%,
            rgba(15, 47, 70, 0.00) 100%
        );
}


/* Textbereich */

.shift-hero-final .shift-hero-content {
    position: relative;

    z-index: 2;

    width: 52%;
    max-width: 570px;

    min-height: 560px;

    padding: 48px 36px 42px 42px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


/* Kleine Überschrift */

.shift-hero-final .shift-kicker {
    display: block;

    margin: 0 0 14px 0;

    color: #ff7a18;

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* Hauptüberschrift */

.shift-hero-final h1 {
    margin: 0 0 18px 0;

    padding: 0;

    color: #ffffff;

    font-size: clamp(2.6rem, 4.2vw, 4.1rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.025em;
}


/* Beschreibung */

.shift-hero-final .shift-lead {
    max-width: 540px;

    margin: 0;

    color: rgba(255, 255, 255, 0.94);

    font-size: 1.03rem;

    line-height: 1.65;
}


/* Hero Buttons */

.shift-hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;

    margin-top: 24px;
}


/* Grundstil Buttons */

.shift-button {
    display: inline-block;

    box-sizing: border-box;

    padding: 11px 18px;

    border-radius: 4px;

    font-weight: 700;

    line-height: 1.35;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/* Orange */

.shift-button-primary {
    background: #f47b20;

    border: 2px solid #f47b20;

    color: #ffffff !important;
}


.shift-button-primary:hover {
    background: #db6813;

    border-color: #db6813;

    color: #ffffff !important;

    transform: translateY(-1px);
}


/* Weißer Hero Button */

.shift-button-secondary {
    background: #ffffff;

    border: 2px solid #ffffff;

    color: #17364f !important;
}


.shift-button-secondary:hover {
    background: #f2f2f2;

    border-color: #f2f2f2;

    color: #17364f !important;

    transform: translateY(-1px);
}


/* Dunkler Button */

.shift-button-dark {
    background: #17364f;

    border: 2px solid #17364f;

    color: #ffffff !important;
}


.shift-button-dark:hover {
    background: #102b40;

    border-color: #102b40;

    color: #ffffff !important;
}


/* Früh / Spät / Nacht */

.shift-hero-final .shift-types {
    margin-top: 20px;

    color: rgba(255, 255, 255, 0.96);

    font-size: 0.91rem;

    font-weight: 600;

    line-height: 1.6;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-heading {
    margin-bottom: 22px;
}


.section-heading h2,
.mealprep-home h2,
.bjorn-section h2,
.book-home h2 {
    margin-top: 0;

    color: #17364f;
}


.section-kicker {
    display: inline-block;

    margin-bottom: 8px;

    color: #f47b20;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.section-heading p {
    max-width: 820px;

    color: #4b5965;

    line-height: 1.6;
}


/* =========================================================
   REZEPTE
   ========================================================= */

.recipe-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.recipe-card {
    display: block;

    padding: 22px 20px;

    background: #ffffff;

    border: 1px solid #e7e7e7;

    border-bottom: 3px solid #f47b20;

    border-radius: 5px;

    box-sizing: border-box;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.05);

    text-decoration: none !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.recipe-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.08);
}


.recipe-icon {
    display: inline-block;

    margin-bottom: 8px;

    font-size: 1.35rem;
}


.recipe-card h3 {
    margin: 0 0 10px 0;

    color: #17364f;

    font-size: 1.1rem;
}


.recipe-card p {
    margin-bottom: 8px;

    color: #4b5965;

    line-height: 1.6;
}


.recipe-link {
    display: inline-block;

    margin-top: 8px;

    color: #f47b20 !important;

    font-weight: 700;

    text-decoration: none !important;
}


/* =========================================================
   MEALPREP
   ========================================================= */

.mealprep-home {
    display: grid;

    grid-template-columns: 1.3fr 0.7fr;

    gap: 28px;

    align-items: center;

    padding: 34px 26px;

    background: #f5f5f5;

    border-radius: 7px;
}


.mealprep-home-content p {
    color: #4b5965;

    line-height: 1.6;
}


.mealprep-points {
    display: grid;

    gap: 10px;

    margin-top: 18px;
}


.mealprep-points > div {
    padding: 12px 14px;

    background: #ffffff;

    border-left: 3px solid #f47b20;

    border-radius: 3px;

    color: #4b5965;
}


.mealprep-points strong {
    display: block;

    margin-bottom: 2px;

    color: #17364f;
}


.mealprep-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;
}


/* Starterplan-Karte */

.mealprep-home-badge {
    padding: 30px 20px;

    background: #17364f;

    border-radius: 6px;

    color: #ffffff;

    text-align: center;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.10);
}


.mealprep-home-badge strong {
    display: block;

    margin: 9px 0 10px;

    color: #ffffff;

    font-size: 1.55rem;

    line-height: 1.1;
}


.mealprep-home-badge small {
    display: block;

    color: rgba(255, 255, 255, 0.92);

    font-size: 0.72rem;

    line-height: 1.5;
}


.mealprep-badge-small {
    color: rgba(255, 255, 255, 0.92);

    font-size: 0.75rem;
}


/* =========================================================
   BJÖRNS TIPPS
   ========================================================= */

.bjorn-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin: 20px 0;
}


.bjorn-tip-card {
    padding: 22px 20px;

    background: #17364f;

    border-radius: 5px;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.08);
}


.bjorn-number {
    display: inline-block;

    margin-bottom: 5px;

    color: #f47b20;

    font-size: 1.15rem;

    font-weight: 800;
}


.bjorn-tip-card h3 {
    margin: 2px 0 9px;

    color: #ffffff;
}


.bjorn-tip-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.90);

    line-height: 1.6;
}


/* =========================================================
   EMPFEHLUNGEN
   ========================================================= */

.recommend-section {
    padding: 34px 26px;

    background: #f5f5f5;

    border-radius: 7px;
}


.recommend-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 20px;
}


.recommend-card {
    padding: 22px 20px;

    background: #ffffff;

    border: 1px solid #e7e7e7;

    border-bottom: 3px solid #f47b20;

    border-radius: 5px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.04);
}


.recommend-icon {
    display: inline-block;

    margin-bottom: 8px;

    font-size: 1.35rem;
}


.recommend-card h3 {
    margin: 0 0 9px;

    color: #17364f;
}


.recommend-card p {
    color: #4b5965;

    line-height: 1.6;
}


/* =========================================================
   BUCH
   ========================================================= */

.book-home {
    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 28px;

    align-items: center;

    padding: 28px;

    background: #17364f;

    border-radius: 7px;

    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.09);
}


.book-home-image img {
    display: block;

    width: 100%;

    height: auto;

    border-radius: 4px;
}


.book-home-content .section-kicker {
    color: #f47b20;
}


.book-home-content h2 {
    color: #ffffff;
}


.book-home-content p {
    color: rgba(255, 255, 255, 0.92);

    line-height: 1.6;
}


.book-home-points {
    margin: 13px 0;

    color: #ffffff;

    font-weight: 700;

    line-height: 1.7;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .recipe-grid,
    .bjorn-grid,
    .recommend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mealprep-home {
        grid-template-columns: 1fr;
    }

    .book-home {
        grid-template-columns: 220px 1fr;
    }

    /* Desktop-Hero etwas kompakter */
    .shift-hero.shift-hero-final {
        min-height: 500px;
    }

    .shift-hero-final .shift-hero-content {
        width: 58%;
        min-height: 500px;
        padding: 38px 26px 34px 30px;
    }

    .shift-hero-final h1 {
        font-size: 3rem;
    }

}


/* =========================================================
   HANDY – FINALER HERO + MOBILE STARTSEITE
========================================================= */
@media (max-width: 800px) {

    /* -------------------------
       HERO
    ------------------------- */

    .shift-hero.shift-hero-final {
        position: relative;
        min-height: auto;

        margin: 24px auto 32px auto;
        padding: 0 !important;

        overflow: hidden;
        border-radius: 18px;

        background-color: #17364f !important;

        background-image:
            url("/images/horschd/horschd-startseite-mobile.png.png") !important;

        background-repeat: no-repeat !important;

        /* volle Breite */
        background-size: 100% auto !important;

        /* Bild etwas höher */
        background-position:
            center -24px !important;
    }


    /* Übergang Bild -> Blau */
    .shift-hero-final .shift-hero-overlay {
        display: block;

        position: absolute;
        inset: 0;

        z-index: 1;

        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(23, 54, 79, 0.00) 0%,
                rgba(23, 54, 79, 0.00) 46%,
                rgba(23, 54, 79, 0.16) 53%,
                rgba(23, 54, 79, 0.48) 61%,
                rgba(23, 54, 79, 0.82) 68%,
                rgba(23, 54, 79, 0.98) 74%,
                #17364f 79%,
                #17364f 100%
            );
    }


    /* Text etwas höher ziehen */
    .shift-hero-final .shift-hero-content {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: none;
        min-height: auto;

        padding:
            clamp(285px, 78vw, 380px)
            22px
            28px
            22px;

        box-sizing: border-box;
    }


    .shift-hero-final .shift-kicker {
        margin: 0 0 14px 0;

        font-size: 0.78rem;
        line-height: 1.4;
    }


    .shift-hero-final h1 {
        margin: 0 0 18px 0;

        font-size: clamp(2.15rem, 7vw, 3rem);
        line-height: 1.05;
    }


    .shift-hero-final .shift-lead {
        max-width: none;

        margin-bottom: 22px;

        font-size: 1rem;
        line-height: 1.65;
    }


    /* -------------------------
       BUTTONS
    ------------------------- */

    .shift-hero-buttons {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        width: 100%;

        margin-top: 20px;
    }


    .shift-hero-buttons .shift-button {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }


    /* -------------------------
       SCHICHTEN
    ------------------------- */

    .shift-hero-final .shift-types {
        display: flex;

        flex-wrap: wrap;

        gap: 6px 12px;

        margin-top: 18px;

        font-size: 0.9rem;
        line-height: 1.5;
    }


    /* =====================================================
       RESTLICHE STARTSEITE MOBILE
    ===================================================== */

    .recipe-grid,
    .bjorn-grid,
    .recommend-grid {
        grid-template-columns: 1fr;
    }


    .mealprep-home {
        grid-template-columns: 1fr;

        padding: 26px 20px;
    }


    .recommend-section {
        padding: 26px 20px;
    }


    /* -------------------------
       BUCH MOBILE – FIX
    ------------------------- */

    .book-home {
        display: grid;

        grid-template-columns: 1fr !important;

        gap: 24px;

        width: 100%;

        padding: 24px 20px;

        box-sizing: border-box;

        overflow: hidden;
    }


    .book-home-image {
        width: 100%;

        max-width: 230px;

        margin: 0 auto;

        box-sizing: border-box;
    }


    .book-home-image img {
        display: block;

        width: 100%;

        max-width: 100%;

        height: auto;
    }


    .book-home-content {
        width: 100%;

        min-width: 0;

        max-width: 100%;

        box-sizing: border-box;
    }


    .book-home-content h2,
    .book-home-content p,
    .book-home-points {
        max-width: 100%;

        overflow-wrap: break-word;
    }


    .book-home-content h2 {
        font-size: 1.7rem;
        line-height: 1.2;
    }


    .book-home-points {
        line-height: 1.7;
    }

}


/* =========================================================
   KLEINERE HANDYS
========================================================= */
@media (max-width: 480px) {

    .shift-hero.shift-hero-final {
        background-size: 100% auto !important;

        /* noch minimal höher */
        background-position:
            center -18px !important;
    }


    .shift-hero-final .shift-hero-content {
        padding:
            clamp(270px, 80vw, 360px)
            18px
            24px
            18px;
    }


    .shift-hero-final h1 {
        font-size: 2rem;
        line-height: 1.06;
    }


    .shift-hero-final .shift-lead {
        font-size: 0.98rem;
    }


    .shift-hero-final .shift-types {
        font-size: 0.86rem;
        gap: 5px 9px;
    }


    .mealprep-home,
    .recommend-section,
    .book-home {
        padding-left: 18px;
        padding-right: 18px;
    }


    .book-home-image {
        max-width: 210px;
    }

}/* =========================================================
   HORSCHD – VORSTELLUNGSSEITE
========================================================= */


/* ---------------------------------------------------------
   GRUNDBREITE
--------------------------------------------------------- */

.horschd-page-hero,
.horschd-intro-section,
.horschd-role-section,
.horschd-sprueche-section,
.horschd-about-section,
.horschd-social-section,
.horschd-next-section {
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.horschd-intro-section,
.horschd-role-section,
.horschd-sprueche-section,
.horschd-about-section,
.horschd-social-section,
.horschd-next-section {
    margin-bottom: 42px;
}


/* =========================================================
   HERO
========================================================= */

.horschd-page-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 30px;

    margin-top: 32px;
    margin-bottom: 42px;

    padding: 38px 38px 0 38px;

    background: #17364f;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.12);
}


.horschd-page-hero-content {
    padding-bottom: 38px;
}


.horschd-page-hero h1,
.horschd-page-hero h2 {
    margin: 0 0 18px 0;
    color: #ffffff;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    line-height: 1.02;
    font-weight: 800;
}


.horschd-page-lead {
    margin: 0;

    color: rgba(255, 255, 255, 0.94);

    font-size: 1.12rem;

    line-height: 1.72;
}


.horschd-page-hero .section-kicker {
    color: #f47b20;
}


/* Horschd am Geländer */

.horschd-page-hero-image {
    align-self: end;

    display: flex;

    align-items: flex-end;
    justify-content: center;
}


.horschd-page-hero-image img {
    display: block;

    width: 100%;

    max-width: 470px;

    height: auto;

    margin: 0 auto;

    object-fit: contain;
}


/* =========================================================
   WER IST HORSCHD
========================================================= */

.horschd-intro-section {
    padding: 30px 32px;

    background: #f5f5f5;

    border-radius: 8px;
}


.horschd-intro-section h2,
.horschd-role-section h2,
.horschd-sprueche-section h2,
.horschd-about-section h2,
.horschd-social-section h2,
.horschd-next-section h2 {
    margin-top: 0;

    color: #17364f;
}


.horschd-intro-content p,
.horschd-about-content p,
.horschd-social-content p,
.horschd-next-section p {
    color: #4b5965;

    line-height: 1.7;
}


/* =========================================================
   ROLLENVERTEILUNG
========================================================= */

.horschd-role-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-top: 22px;
}


.horschd-role-card {
    padding: 24px 22px;

    background: #17364f;

    border-radius: 7px;

    color: #ffffff;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.08);
}


.horschd-role-card-orange {
    background: #f47b20;
}


.horschd-role-icon {
    display: block;

    margin-bottom: 10px;

    font-size: 1.8rem;
}


.horschd-role-card h3 {
    margin: 0 0 10px 0;

    color: #ffffff;

    font-size: 1.3rem;
}


.horschd-role-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.93);

    line-height: 1.65;
}


/* =========================================================
   SPRÜCHE
========================================================= */

.horschd-sprueche-section {
    padding: 34px 30px;

    background: #f5f5f5;

    border-radius: 8px;
}


.horschd-sprueche-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-top: 22px;
}


.horschd-spruch-card {
    position: relative;

    min-height: 150px;

    padding: 28px 22px 22px;

    background: #ffffff;

    border-bottom: 4px solid #f47b20;

    border-radius: 6px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.05);
}


.horschd-quote {
    position: absolute;

    top: 8px;
    left: 16px;

    color: #f47b20;

    font-size: 2.6rem;

    font-weight: 800;

    line-height: 1;
}


.horschd-spruch-card p {
    margin: 24px 0 0;

    color: #17364f;

    font-size: 1.18rem;

    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   HORSCHD GEHT AUF SCHICHT
========================================================= */

.horschd-about-section {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 34px;

    align-items: center;

    padding: 32px;

    background: #ffffff;

    border: 1px solid #e8e8e8;

    border-radius: 8px;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.04);
}


.horschd-about-image {
    display: flex;

    align-items: flex-end;
    justify-content: center;
}


.horschd-about-image img {
    display: block;

    width: 100%;

    max-width: 330px;

    height: auto;
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.horschd-social-section {
    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    gap: 28px;

    align-items: center;

    padding: 34px 30px;

    background: #f5f5f5;

    border-radius: 8px;
}


.horschd-social-badge {
    padding: 34px 22px;

    background: #17364f;

    border-radius: 8px;

    color: #ffffff;

    text-align: center;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.10);
}


.horschd-social-big {
    display: block;

    margin-bottom: 4px;

    color: #f47b20;

    font-size: 2rem;

    font-weight: 900;

    letter-spacing: 0.06em;
}


.horschd-social-badge strong {
    display: block;

    color: #ffffff;

    font-size: 1.65rem;

    line-height: 1.1;
}


.horschd-social-badge small {
    display: block;

    margin-top: 12px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 0.75rem;

    letter-spacing: 0.05em;
}


/* =========================================================
   ABSCHLUSS
========================================================= */

.horschd-next-section {
    padding: 32px 30px;

    background: #17364f;

    border-radius: 8px;
}


.horschd-next-section h2 {
    color: #ffffff;
}


.horschd-next-section .section-kicker {
    color: #f47b20;
}


.horschd-next-section p {
    color: rgba(255, 255, 255, 0.91);
}


.horschd-next-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .horschd-page-hero {
        grid-template-columns: 1fr 0.8fr;

        padding-left: 28px;
        padding-right: 20px;
    }


    .horschd-role-grid,
    .horschd-sprueche-grid {
        grid-template-columns: 1fr;
    }


    .horschd-about-section,
    .horschd-social-section {
        grid-template-columns: 1fr;
    }


    .horschd-about-image img {
        max-width: 280px;
    }

}


/* =========================================================
   HANDY
========================================================= */

@media (max-width: 700px) {

    .horschd-page-hero {
        display: flex;

        flex-direction: column;

        padding: 28px 20px 0;

        gap: 10px;
    }


    .horschd-page-hero-content {
        padding-bottom: 10px;
    }


    .horschd-page-hero h1,{

        font-size: 2.6rem;
    }


    .horschd-page-lead {
        font-size: 1rem;

        line-height: 1.65;
    }


    .horschd-page-hero-image {
        width: 100%;
    }


    .horschd-page-hero-image img {
        max-width: 360px;
    }


    .horschd-intro-section,
    .horschd-about-section,
    .horschd-social-section,
    .horschd-sprueche-section,
    .horschd-next-section {
        padding: 24px 20px;
    }


    .horschd-role-grid {
        grid-template-columns: 1fr;
    }


    .horschd-about-image img {
        max-width: 230px;
    }


    .horschd-next-buttons {
        flex-direction: column;
    }


    .horschd-next-buttons .shift-button {
        width: 100%;

        text-align: center;

        box-sizing: border-box;
    }

}/* =========================================================
   STARTSEITE – HORSCHD VORSTELLUNG
========================================================= */

.horschd-home {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto 42px auto;

    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 38px;
    align-items: center;

    padding: 30px 34px;

    background: #f5f5f5;

    border-radius: 8px;

    box-sizing: border-box;

    overflow: hidden;
}


/* -------------------------
   BILD
------------------------- */

.horschd-home-image {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    min-width: 0;
}


.horschd-home-image img {
    display: block;

    width: 100%;
    max-width: 320px;
    height: auto;

    margin: 0 auto;

    border-radius: 6px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.10);
}


/* -------------------------
   TEXT
------------------------- */

.horschd-home-content {
    min-width: 0;
}


.horschd-home-content h2 {
    margin: 0 0 14px 0;

    color: #17364f;

    font-size: 2rem;
    line-height: 1.15;
}


.horschd-home-content p {
    color: #4b5965;

    line-height: 1.7;
}


.horschd-home-lead {
    margin-top: 0;

    color: #17364f !important;

    font-size: 1.08rem;

    font-weight: 700;
}


/* Horschd-Spruch */

.horschd-home-quote {
    position: relative;

    margin: 22px 0 !important;

    padding: 14px 18px;

    background: #17364f;

    border-left: 5px solid #f47b20;

    border-radius: 4px;

    color: #ffffff !important;

    font-size: 1.15rem;

    font-weight: 800;

    font-style: italic;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .horschd-home {
        grid-template-columns: 280px minmax(0, 1fr);

        gap: 26px;

        padding: 28px 24px;
    }


    .horschd-home-image img {
        max-width: 260px;
    }


    .horschd-home-content h2 {
        font-size: 1.75rem;
    }

}


/* =========================================================
   HANDY
========================================================= */

@media (max-width: 700px) {

    .horschd-home {
        grid-template-columns: 1fr;

        gap: 24px;

        padding: 24px 20px;

        text-align: left;
    }


    .horschd-home-image {
        order: 1;
    }


    .horschd-home-content {
        order: 2;
    }


    .horschd-home-image img {
        width: 100%;
        max-width: 250px;
    }


    .horschd-home-content h2 {
        font-size: 1.65rem;
    }


    .horschd-home-lead {
        font-size: 1rem;
    }


    .horschd-home-quote {
        font-size: 1rem;
    }


    .horschd-home-content .shift-button {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }

}