/* modschiedler-spedition.de – statische Rekonstruktion
   Eigenes Stylesheet. Farb- und Typo-Werte sind dem archivierten
   Theme "Modschler" nachempfunden, es wurde kein Original-CSS übernommen. */

:root {
  --blue:   #0f3147;
  --gold:   #b7934b;
  --yellow: #ffc502;
  --grey:   #e7eaed;
  --line:   #e3e3e3;
  --text:   #3f3f3f;
  --muted:  #b7c1c7;
  --sans: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 25px;
  color: var(--text);
  background: #fff;
}
img { max-width: 100%; height: auto; }
.sr, .skip {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: static; width: auto; height: auto; margin: 0; clip: auto;
  display: block; padding: 10px; background: var(--blue); color: #fff;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4, h5 { font-family: var(--sans); margin: 0; }
h2 {
  position: relative;
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: var(--blue);
  padding: 35px 0 31px;
  margin-bottom: 31px;
}
h2::before {
  content: ""; position: absolute; bottom: 1px; left: 0;
  width: min(466px, 80%); border-bottom: 1.5px solid var(--line);
}
h2::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 100px; border-bottom: 3.5px solid var(--yellow);
}
h2.center { text-align: center; }
h2.center::before, h2.center::after { left: 50%; transform: translateX(-50%); }
h2.font-wight { color: #fff; }
h2.white::before { border-bottom-color: #fff; }
h3 { font-weight: 400; font-size: 22px; line-height: 30px; color: var(--gold); text-align: center; }
h4 { font-weight: 700; color: var(--blue); font-size: 17px; line-height: 26px; }
p { margin: 0 0 18px; }
ul { margin: 0 0 18px; padding-left: 20px; }
li { font-size: 15px; line-height: 25px; }
strong, b { font-weight: 700; }
a { color: var(--gold); font-weight: 600; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* ---------- Kopf ---------- */
#header { background: #fff; }
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 15px; padding-top: 10px; padding-bottom: 10px;
}
.top-bar .logo img { max-height: 128px; width: auto; }
.top-bar-right { display: flex; align-items: center; gap: 15px; }
.header-icon svg { width: 40px; height: 40px; fill: var(--gold); display: block; }
.header-text { max-width: 420px; }
.header-text strong { display: block; font-size: 20px; color: var(--blue); }
.header-text strong a { color: inherit; font-weight: 700; }
.header-text p { margin: 0; font-size: 14px; line-height: 20px; }

.menu-toggle { display: none; }
.menu-icon { display: none; }

#main-nav { border-top: 1px solid #e5e5e5; background: rgba(0,0,0,.05); }
#main-nav .menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
#main-nav .menu > li { position: relative; border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
#main-nav .menu > li > a {
  display: block; padding: .7rem 1.5rem; color: #000; font-weight: 600;
  border-right: 1px solid #e5e5e5;
}
#main-nav .menu > li:hover, #main-nav .menu > li:focus-within { border-color: var(--gold); }
#main-nav .menu > li:hover > a, #main-nav .menu > li:focus-within > a,
#main-nav .menu > li.current > a, #main-nav .menu > li.current-parent > a { color: var(--gold); text-decoration: none; }
#main-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 900;
  min-width: 280px; margin: 0; padding: 8px 0; list-style: none;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
#main-nav li:hover > .sub-menu, #main-nav li:focus-within > .sub-menu { display: block; }
#main-nav .sub-menu a { display: block; padding: 6px 18px; color: #000; }
#main-nav .sub-menu a:hover, #main-nav .sub-menu li.current > a { color: var(--gold); text-decoration: none; }

/* ---------- seitliche Kontakt-Flags ---------- */
.flags { position: fixed; right: 0; top: 210px; z-index: 500; }
.flags a {
  display: flex; align-items: center; justify-content: center;
  width: 59px; height: 59px; margin: 5px 0; background: var(--gold); color: #fff;
  box-shadow: 0 0 6.5px 1px rgba(0,0,0,.29); transition: width .2s, padding .2s;
}
.flags a svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.flags a span { display: none; padding-left: 15px; font-size: 16px; }
.flags a:hover, .flags a:focus {
  width: auto; padding: 0 20px; background: #fff; color: var(--gold); text-decoration: none;
}
.flags a:hover span, .flags a:focus span { display: inline; }

/* ---------- Raster ---------- */
.sec { padding: 30px 0; }
.sec--pad-lg { padding: 60px 0; }
.sec--pad-sm { padding: 30px 0; }
.sec--flush { padding: 0; }
.sec--grey.sec--flush, .sec--blue.sec--flush,
.sec--lightblue.sec--flush, .sec--yellow.sec--flush { padding: 40px 0; }
.sec--bleed { padding: 0; }
.sec--grey { background: var(--grey); }
.sec--lightblue { background: rgba(15,49,71,.1); }
.sec--blue { background: var(--blue); }
.sec--blue p, .sec--blue li { color: var(--muted); }
.sec--blue h2, .sec--blue h4 { color: #fff; }
.sec--blue h2::before { border-bottom-color: rgba(255,255,255,.45); }
.sec--yellow { background: var(--yellow); }

.grid { display: flex; flex-wrap: wrap; margin: 0 -15px; align-items: flex-start; }
.grid--inner { margin: 0 -15px; width: 100%; }
.col { padding: 0 15px; width: 100%; }
.col-1 { width: 8.3333%; } .col-2 { width: 16.6667%; } .col-3 { width: 25%; }
.col-4 { width: 33.3333%; } .col-5 { width: 41.6667%; } .col-6 { width: 50%; }
.col-7 { width: 58.3333%; } .col-8 { width: 66.6667%; } .col-9 { width: 75%; }
.col-10 { width: 83.3333%; } .col-11 { width: 91.6667%; } .col-12 { width: 100%; }
.col--pic { align-self: stretch; padding: 0; min-height: 320px; }

hr.sep { border: 0; border-top: 4px solid #fff; margin: 14px 0; }
.spacer { height: 20px; }

/* ---------- Seitenkopf ---------- */
.seitenheader .breadcrumb-bar { background: var(--blue); text-align: center; padding: 22px 0; }
.seitenheader .breadcrumbs { margin: 0 0 6px; color: var(--gold); font-style: italic; font-weight: 600; font-size: 15px; }
.seitenheader h1 { color: #fff; font-size: 34px; line-height: 42px; font-weight: 600; }
.seitenheader .image-bar { height: 505px; background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ---------- Slideshow ---------- */
.slideshow { position: relative; overflow: hidden; }
.slideshow .slide {
  height: 750px; background-size: cover; background-position: center;
  background-repeat: no-repeat; opacity: 0; transition: opacity .8s ease-in-out;
}
.slideshow .slide.is-active { opacity: 1; }
.slideshow .slide:not(:first-child) { position: absolute; inset: 0; }
.slideshow-inner { position: absolute; inset: 0; display: flex; align-items: center; }
.page-header-box { background: rgba(0,0,0,.55); border-radius: 5px; padding: 20px; max-width: 625px; }
.page-header-box h2 { color: #fff; font-size: 30px; line-height: 40px; font-weight: 800; padding: 0; margin-bottom: 20px; }
.page-header-box h2::before, .page-header-box h2::after { display: none; }
.page-header-box p { color: #fff; font-size: 18px; line-height: 27px; }
.slide-buttons { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Bausteine ---------- */
.btn {
  display: inline-block; background: var(--gold); color: #fff !important;
  font-weight: 600; padding: 11px 19px; border: 0;
}
.btn:hover, .btn:focus { background: #a0803f; text-decoration: none; }
.btn-wrap { margin: 0 0 18px; }
.btn-wrap--center { text-align: center; }
.btn-wrap--right { text-align: right; }

.img { margin: 0 0 18px; }
.img--center { text-align: center; }
.img--medium img { max-width: 300px; }
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .5s ease-in-out; display: block; width: 100%; }
.img-zoom:hover img { transform: scale(1.2); }

.schwerpunkt { margin-bottom: 30px; }
.schwerpunkt a { display: block; }
.schwerpunkt .picture { display: block; position: relative; overflow: hidden; }
.schwerpunkt .picture img { display: block; width: 100%; height: 200px; object-fit: cover; transition: transform .5s ease-in-out; }
.schwerpunkt .picture:hover img { transform: scale(1.2); }
.schwerpunkt .text {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; line-height: 40px;
  background: var(--gold); color: #fff; text-align: center; font-size: 20px; font-weight: 600;
}

.laufzahl { text-align: center; }
.laufzahl .kreis {
  width: 72px; height: 72px; margin: 0 auto; border-radius: 50%;
  background: #b7c1c8; text-align: center;
}
.laufzahl .kreis span { display: block; line-height: 72px; font-size: 40px; font-weight: 600; color: var(--blue); }
.laufzahl p { margin: 25px 0 0; color: var(--yellow); }
.sec--yellow .laufzahl .kreis { background: var(--yellow); }
.sec--yellow .laufzahl p { color: var(--blue); }

.partner {
  background: #fff; border: 1.5px solid #d8d8d8; padding: 15px; height: 109px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
}
.partner img { max-height: 100%; width: auto; }

.text-pic-gallery { margin-bottom: 18px; }
.tpg-main img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.col--fertighaus .tpg-main img { max-height: 505px; }
.tpg-thumbs { display: flex; gap: 5px; margin-top: 5px; }
.tpg-thumb { flex: 1; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; height: 81px; }
.col--fertighaus .tpg-thumb { height: 126px; }
.tpg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpg-thumb.is-active { outline: 3px solid var(--gold); outline-offset: -3px; }

.fullheightpic { min-height: 320px; height: 100%; background-size: cover; background-position: bottom center; background-repeat: no-repeat; }

.kollegen-sagen { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.zitat { margin: 0; padding: 20px; background: rgba(255,255,255,.55); }
.zitat blockquote { margin: 0; }
.zitat p { font-style: italic; }
.zitat figcaption { font-weight: 700; color: var(--blue); }

.accordion { margin-bottom: 18px; }
.acc-item { border-top: 3px solid var(--gold); }
.acc-item summary {
  cursor: pointer; list-style: none; padding: 12px 20px;
  color: var(--blue); font-size: 20px; font-weight: 600;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item[open] > summary { background: var(--gold); color: #fff; }
.acc-body { padding: 10px 20px 20px; }

/* ---------- Kontaktformular ---------- */
.kontaktformular { margin: 0 0 18px; }
.kontaktformular p { margin: 0 0 12px; }

/* Honeypot: für Menschen unsichtbar, für Bots ein Eingabefeld */
.kf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular input[type="tel"],
.kontaktformular select,
.kontaktformular textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d8d8d8;
  border-radius: 0;
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 25px;
  color: var(--text);
}
.kontaktformular textarea { resize: vertical; min-height: 160px; }
.kontaktformular ::placeholder { color: #9a9a9a; opacity: 1; }
.kontaktformular input:focus,
.kontaktformular select:focus,
.kontaktformular textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-color: var(--gold);
}
.kontaktformular .kf-fehler input,
.kontaktformular .kf-fehler select,
.kontaktformular .kf-fehler textarea { border-color: #cc4b37; }

.kf-frage { margin-bottom: 6px !important; }
.kf-check label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.kf-check input { margin-top: 5px; flex: none; }
.kf-submit { margin-top: 18px !important; }
.kontaktformular .btn { cursor: pointer; font-size: 15px; }
.kf-datenschutz { margin-top: 18px !important; font-size: 13px; line-height: 21px; color: #6a6a6a; }

/* Meldungen (werden von formular/senden.php ausgegeben) */
.kf-meldung {
  border: 1.5px solid #cc4b37;
  border-left-width: 5px;
  background: #fdf3f1;
  padding: 15px 20px;
  margin: 0 0 24px;
}
.kf-meldung h2 { padding-top: 0; font-size: 20px; line-height: 30px; margin-bottom: 12px !important; }
.kf-meldung h2::before, .kf-meldung h2::after { display: none; }
.kf-meldung ul { margin-bottom: 0; }
.kf-meldung--info { border-color: var(--gold); background: #fbf7ef; }

.formhinweis { border: 1.5px solid #d8d8d8; padding: 20px; background: #fff; }
.formhinweis p:last-child { margin-bottom: 0; }

.icon svg { width: 22px; height: 22px; fill: var(--gold); vertical-align: middle; }

.txt--spurwechsel p { color: #fff; }

/* ---------- Fuß ---------- */
.site-footer { background: var(--yellow); padding: 7px 0; font-weight: 300; }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.site-footer .copy { margin: 0; color: #000; }
.footer-menu { display: flex; gap: 35px; list-style: none; margin: 0; padding: 0; }
.footer-menu a { color: #000; font-weight: 300; }

/* ---------- Umbrüche ---------- */
@media (max-width: 1023px) {
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11 { width: 100%; }
  .top-bar { flex-wrap: wrap; }
  .top-bar-right { display: none; }
  .menu-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: var(--gold); border: 1px solid var(--gold); cursor: pointer;
  }
  .menu-icon span:first-child {
    width: 22px; height: 2px; background: #fefefe;
    box-shadow: 0 7px 0 #fefefe, 0 -7px 0 #fefefe;
  }
  #main-nav { display: none; }
  .menu-toggle:checked ~ #main-nav { display: block; }
  #main-nav .menu { display: block; }
  #main-nav .menu > li > a { border-right: 0; border-bottom: 1px solid #e5e5e5; }
  #main-nav .sub-menu { display: block; position: static; box-shadow: none; background: transparent; padding: 0 0 8px 18px; }
  .flags { display: none; }
  .slideshow .slide { height: 420px; }
  .page-header-box h2 { font-size: 21px; line-height: 30px; }
  .seitenheader .image-bar { height: 300px; }
  .seitenheader h1 { font-size: 26px; line-height: 34px; }
  .kollegen-sagen { grid-template-columns: 1fr; }
  .col--pic { min-height: 260px; }
}
@media (max-width: 640px) {
  .slideshow .slide { height: 320px; }
  .seitenheader .image-bar { height: 200px; }
  h2 { font-size: 23px; line-height: 34px; }
}