/* ============================================================
   Design-Tokens
   ============================================================ */
:root {
  --color-primary:     #02509b;   /* Blau: Überschriften, Links aktiv, Nav-Hover */
  --color-link:        #0d557d;   /* Standard-Linkfarbe */
  --color-link-hover:  #3e474c;   /* Link bei Hover */
  --color-text:        #353535;   /* Fließtext */
  --color-text-muted:  #3e474c;   /* Muted / sekundärer Text */
  --color-btn:         #7d0d55;   /* Button-Hintergrund */
  --color-btn-hover:   #4f0836;   /* Button bei Hover */
  --color-bg-page:     #f1f2f3;   /* Seitenhintergrund */
  --color-bg-content:  #fff;      /* Inhaltsbereiche */
  --color-bg-header:   rgba(247, 248, 248, 0.9);
  --color-nav-active-bg:   #02509b;
  --color-nav-active-text: #fff;
  --color-border:      #3e474c;
  --color-green-accent: #367614;  /* Grüner Akzenttext auf Startseite */

  --font-sans:  'Noto Sans', Helvetica, Arial, sans-serif;
  --font-serif: 'Noto Serif', Georgia, serif;

  --max-width: 1000px;
  --header-height-mobile: 67px;
  --header-height-desktop: 100px;
}

/* ============================================================
   Reset & Basis
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

/* ============================================================
   Skip-Link (Barrierefreiheit)
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

/* ============================================================
   Header & Navigation
   ============================================================ */
.site-header {
  background-color: var(--color-bg-header);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: auto;
  min-height: var(--header-height-desktop);
  padding: 10px 0;
  display: flex;
  align-items: flex-end;
}

.site-header__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header__logo {
  width: 250px;
  padding: 0 20px 0 0; /* nur rechts, links liegt am Container-Padding */
  box-sizing: border-box;
  flex-shrink: 0;
  text-decoration: none;
  border: 0;
}

.site-header__logo img {
  max-height: 120px;
  width: auto;
  border: 0;
  display: block;
}

/* Hauptnavigation Desktop */
.site-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  text-align: right;
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--color-text);
  text-decoration: none;
  padding: 5px 15px;
  line-height: 30px;
  border-radius: 2px;
  margin: 0 5px;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}

.site-nav__link:hover,
.site-nav__link:focus,
.site-nav__link[aria-current="page"],
.site-nav__item--active > .site-nav__link {
  background-color: var(--color-nav-active-bg);
  color: var(--color-nav-active-text);
}

.site-nav__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Dropdown */
.site-nav__dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 5px;
  min-width: 220px;
  background-color: rgba(247, 248, 248, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 200;
  text-align: left;
}

.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
  display: block;
}

.site-nav__dropdown-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--color-text);
  text-decoration: none;
  padding: 10px 15px;
  line-height: 1.5;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}

.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus,
.site-nav__dropdown-link[aria-current="page"] {
  background-color: var(--color-nav-active-bg);
  color: var(--color-nav-active-text);
}

.site-nav__dropdown-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Hamburger Button (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-text-muted);
  border-radius: 3px;
  padding: 10px;
  cursor: pointer;
  width: 46px;
  height: 46px;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.nav-toggle__bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height-mobile);
  right: 0;
  width: 80%;
  max-width: 320px;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 90;
  padding: 0;
  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
  overflow-y: auto;
  max-height: calc(100vh - var(--header-height-mobile));
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__link {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  transition: background-color 0.2s, color 0.2s;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus {
  background-color: var(--color-nav-active-bg);
  color: var(--color-nav-active-text);
}

.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: rgba(0,0,0,0.04);
}

.mobile-nav__sub-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--color-text);
  text-decoration: none;
  padding: 10px 20px 10px 36px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background-color 0.2s, color 0.2s;
}

.mobile-nav__sub-link:hover,
.mobile-nav__sub-link:focus {
  background-color: var(--color-nav-active-bg);
  color: var(--color-nav-active-text);
}

/* ============================================================
   Hauptinhalt
   ============================================================ */
.site-main {
  margin-top: var(--header-height-desktop);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
  padding-top: 100px; /* Abstand unter dem fixierten Header */
}

.content-area {
  background-color: var(--color-bg-content);
  padding: 2rem 25px;
  position: relative;
  font-size: 1.4rem;
}

/* Links im Fließtext: blaues Primärblau wie im Original (#02509b) */
.content-area p a,
.content-area li a {
  color: var(--color-primary);
}

.content-area p a:hover,
.content-area p a:focus,
.content-area li a:hover,
.content-area li a:focus {
  color: var(--color-link-hover);
}

/* ============================================================
   Typografie
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 0.4em;
  line-height: 1.5;
  word-wrap: break-word;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 2.4rem; }
/* h3 im Original: 44px, Noto Serif nur als Regular geladen → kein echtes Bold, wirkt wie 400 */
h3 { font-size: 4.4rem; font-weight: 400; line-height: 1.25; margin: 0 0 0.2em; }

/* Großes Willkommens-Heading — Noto Serif nur Regular geladen, daher 400 wie im Original */
.page-heading {
  font-family: var(--font-serif);
  font-size: 4.4rem;
  font-weight: 400;
  color: var(--color-primary);
  text-transform: none;
  line-height: 1.25;
  margin: 0 0 0.23em; /* ≈ 10px, entspricht Inter-Modul-Abstand des Originals */
}

/* Original: p{margin:0} + Leer-<p>-Spacer à 14px × 1.5 = 21px → rem, damit auch große p-Elemente stimmig bleiben */
p {
  margin: 0 0 2.1rem;
  font-family: var(--font-sans);
}

a {
  font-family: var(--font-sans);
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.3s ease-in;
}

a:hover, a:focus {
  color: var(--color-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

address {
  font-style: normal;
  line-height: 1.7;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: 700;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1rem 0;
}
hr.hr--spaced { margin-top: 3rem; }

blockquote {
  margin: 1em 0 1em 1.5em;
  font-style: italic;
}

ul, ol {
  padding-left: 1.8em;
  margin: 0 0 2.1rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  background-color: var(--color-btn);
  border: 1px solid var(--color-btn);
  border-radius: 2px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1em;
  line-height: 1.5;
  padding: 10px 20px;
  margin: 16px 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}

.btn:hover, .btn:focus {
  background-color: var(--color-btn-hover);
  border-color: var(--color-btn-hover);
  color: #fff;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ============================================================
   Formularelemente
   ============================================================ */
.form-group {
  margin-bottom: 1.2rem;
}

.form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  margin-bottom: 0.3em;
  color: var(--color-text);
}

.form-input,
.form-textarea {
  width: 100%;
  background-color: #f7f8f8;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1em;
  line-height: 1.5;
  padding: 10px;
  transition: border-color 0.3s ease-in;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-note {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5em;
}

/* ============================================================
   Brotkrümelnavigation
   ============================================================ */
.breadcrumb { margin-bottom: 1.5rem; }
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 1.2rem;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
}
.breadcrumb__item { display: flex; align-items: center; }
.breadcrumb__link { color: var(--color-primary); }
.breadcrumb__sep { margin: 0 0.4rem; }

/* ============================================================
   Zweispaltiges Grid (analog zum Original)
   ============================================================ */
.cols {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.cols--wrap {
  flex-wrap: wrap;
}
/* Breiterer Spaltenabstand für Bild-neben-Text-Layouts */
.cols--gap-wide { gap: 2.5rem; }
/* Lücke zwischen Spalten statt am Rand (Über-mich-Layout) */
.cols--space-between { justify-content: space-between; }
/* Über-mich: 45% Bio links, 41% Infos rechts — Lücke ~14% entsteht dazwischen */
.col-ueber-bio  { flex: 0 0 45%; max-width: 45%; }
.col-ueber-info { flex: 0 0 41%; max-width: 41%; }

.col-1-3 { flex: 0 0 34%; max-width: 34%; }
.col-2-3 { flex: 0 0 calc(66% - 1.5rem); }
.col-half { flex: 1 1 calc(50% - 1rem); }
.col-third { flex: 1; }
.col-icon { flex: 0 0 24%; max-width: 24%; text-align: center; }
/* Schmalere Icon-Spalte für DVB-Siegel (Original: 12.42%) */
.col-logo { flex: 0 0 110px; max-width: 110px; text-align: center; }
/* Kurse-Intro: 80.84% Text + 17.15% Bild (Original-hgrid-Breiten) */
.col-kurse-text { flex: 0 0 calc(81% - 1.5rem); }
.col-kurse-img  { flex: 0 0 17%; max-width: 17%; }
/* Schmale Bildspalte (z.B. Beratung: 14.52% im Original) */
.col-img-narrow { flex: 0 0 15%; max-width: 15%; }

/* ============================================================
   Hero-Banner (Startseite)
   ============================================================ */
.hero-banner {
  width: 100%;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Inhalts-Karten / Sections
   ============================================================ */
.section-intro {
  margin-bottom: 2rem;
}

/* Originalwert: color: #367614; font-size: 20px (inline style) */
.accent-text {
  font-family: var(--font-sans);
  color: var(--color-green-accent);
  font-size: 2rem;
}

/* Grauer Inhaltstext (Original: inline color:#666666) */
.text-subtle {
  color: #666;
}

/* Zentriertes Bild (Institutionslogos) */
.img-center {
  display: block;
  margin: 0 auto 0.5rem;
}

.mt-spacer { margin-top: 2rem; }
.mt-30 { margin-top: 3rem; }
.mt-50 { margin-top: 5rem; }
.mt-1 { margin-top: 1rem; }
.text-center { text-align: center; }

/* Zentrierte vertikale Ausrichtung (für Postkarten-Bestellzeile) */
.cols--align-center { align-items: center; }

/* Bild + Text (Original: j-textWithImage — Bild float-left, Text fließt daneben) */
.text-with-image { overflow: hidden; }
.text-with-image img { float: left; margin: 0 1.5rem 0.5rem 0; }

/* Ikonreihe (Kurse, Beratung) */
.icon-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.icon-item {
  text-align: center;
  flex: 0 0 auto;
}

.icon-item img {
  display: block;
  margin: 0 auto 0.5rem;
}

/* Zitat-Block */
.quote-block {
  font-style: italic;
  margin: 1em 0;
  color: var(--color-text-muted);
}

.quote-block cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  margin-top: 0.5em;
}

/* Zitat-Text mit Originalgröße 24px (Kurse-Seite) */
.quote-text {
  font-size: 2.4rem;
  font-family: var(--font-sans);
  line-height: 1.25;
}

/* Kleinstschrift Fußnote (Original: 9px) */
.kurse-footnote {
  font-size: 0.9rem;
}

/* Untertitel Kurse-Seite: 22px, normales Gewicht, Fließtextfarbe */
.kurse-subtitle {
  font-size: 2.2rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  font-weight: 400;
}

/* Bildunterschrift (z.B. Fotografennennung) */
.fig-credit {
  font-size: 1.2rem;
  margin-top: 0.5em;
  color: var(--color-text-muted);
}

/* Institutions-Logos */
.institution-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  margin: 1rem 0;
}

/* Karten für Beratungsangebote */
.offer-card {
  padding: 1rem 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.offer-card:first-child {
  border-top: 0;
}

/* ============================================================
   Kontaktseite
   ============================================================ */
.contact-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
}

.contact-info img,
.contact-info svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Leaflet-Karte (Kontaktseite) */
.col-map     { flex: 0 0 57%; max-width: 57%; }
.col-anfahrt { flex: 0 0 36%; max-width: 36%; }

.map-wrap {
  position: relative;
}

#map {
  height: 365px;
  width: 100%;
}

.map-consent {
  position: absolute;
  inset: 0;
  background: #f1f2f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 1000;
  text-align: center;
  padding: 2rem;
  border: 1px solid #ccc;
}

/* Leaflet-Popup: deutlich größere Schrift */
.leaflet-popup-content {
  font-size: 1.5rem;
  line-height: 1.5;
}

.map-consent__note {
  font-size: 1.3rem;
  color: var(--color-text-muted);
  max-width: 38rem;
  margin: 0;
}

/* ============================================================
   Abweichende Heading-Formatierung für erecht24-Rechtstexte
   (Datenschutz, Impressum) — Heading-Hierarchie wird von
   erecht24 vorgegeben und kann nicht geändert werden.
   h3 ist global 4.4rem (Kurse-Seite); hier wird es überschrieben.
   ============================================================ */
.rechtstext-inhalt h1 {
  font-size: 2.8rem;
  margin-bottom: 2.5rem;
}

/* Nummerierte Hauptabschnitte – sichtbar wichtig, mit Trennlinie */
.rechtstext-inhalt h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 3.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d0d5d8;
}

/* Unterabschnitte – deutlich kleiner als h2, klar vom Fließtext abgesetzt */
.rechtstext-inhalt h3 {
  font-size: 1.7rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Detailfragen – minimal größer als Fließtext, dezent */
.rechtstext-inhalt h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: 1.5rem;
  margin-bottom: 0.3rem;
}

/* Alter Google-Maps-Platzhalter (wird nicht mehr verwendet, bleibt als Fallback) */
.map-placeholder {
  width: 100%;
  height: 300px;
  background-color: #e8ecf0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 1.5rem 0;
}

/* Newsletter-Platzhalter */
.newsletter-placeholder {
  background-color: #f7f8f8;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

/* ============================================================
   Seitenleiste (Aside): Adresse + Kurse + Beratung
   ============================================================ */
.site-aside {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px 15px;
}

.site-aside__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .site-aside {
    padding: 2rem 25px 3rem;
  }
}

.aside-grid {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.aside-col { flex: 1; }
.aside-col--contact { flex: 0 0 35%; max-width: 35%; }
.aside-col--courses  { flex: 0 0 34%; max-width: 34%; padding-top: 3.5rem; }
.aside-col--consulting { flex: 1; padding-top: 3.5rem; }

.aside-col--contact img {
  margin-bottom: 0.5rem;
}

.aside-col--contact p {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.aside-col h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 0.4em;
  line-height: 1.25;
}

.aside-col p {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  margin: 0 0 0.3em;
}

.aside-col a {
  color: var(--color-primary);
}

.aside-col a:hover,
.aside-col a:focus {
  color: var(--color-link-hover);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  padding: 2rem 25px;
  z-index: 30;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  color: var(--color-text-muted);
}

/* Inline-Links mit |-Trenner wie im Original */
.site-footer__meta {
  margin: 0 0 0.3rem;
}

.site-footer__meta a {
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.3s ease-in;
}

.site-footer__meta a:hover,
.site-footer__meta a:focus {
  opacity: 1;
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-sans);
  opacity: 0.7;
}

/* ============================================================
   Responsive — Mobile (max 767px)
   ============================================================ */
@media (max-width: 767px) {
  .site-header {
    position: relative;
    height: var(--header-height-mobile);
    min-height: 0;
    padding: 0;
    align-items: center;
  }

  .site-header__logo {
    width: 170px;
    padding: 5px 15px;
  }

  .site-header__logo img {
    max-height: 45px;
  }

  .site-nav {
    display: none; /* Desktop-Nav versteckt auf Mobile */
  }

  .nav-toggle {
    display: flex;
  }

  .site-main {
    margin-top: 0;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .cols {
    flex-direction: column;
    gap: 1rem;
  }

  .col-1-3,
  .col-2-3,
  .col-half,
  .col-third,
  .col-icon,
  .col-ueber-bio,
  .col-ueber-info,
  .col-map,
  .col-anfahrt {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    text-align: left;
  }

  h1, h2 { font-size: 2.2rem; }
  h3 { font-size: 2.6rem; }
  .page-heading { font-size: 2.6rem; }

  .aside-grid {
    flex-direction: column;
    gap: 1.5rem;
  }

  .aside-col--contact,
  .aside-col--courses,
  .aside-col--consulting {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================================
   Tablet-Anpassungen (768px – 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-main {
    padding-top: 60px;
  }
}