:root {
  
  
  
  --ink:#242729;
  
  
  
  --grey:#707879;
  
  
  
  --light:#f4f5f5;
  
  
  
  --line:#d9dddd;
  
  
  
  --blue:#2272a8;
  
  
  
  --red:#b42c35;
  
  
  
  --white:#fff
}



* {
  
  
  
  box-sizing:border-box
}



html {
  
  
  
  scroll-behavior:smooth
}



body {
  
  
  
  margin:0;
  
  
  
  color:var(--ink);
  
  
  
  font:16px/1.55 Arial,Helvetica,sans-serif;
  
  
  
  background:#fff
}



h1,h2,h3,p {
  
  
  
  margin-top:0
}



h1,h2,h3 {
  
  
  
  line-height:1.02;
  
  
  
  letter-spacing:-.055em
}



h1 {
  
  
  
  font-size:clamp(2.6rem,5.8vw,5.7rem)
}



h2 {
  
  
  
  font-size:clamp(2rem,4vw,3.5rem)
}



.site-header {
  
  
  
  height:90px;
  
  
  
  display:flex;
  
  
  
  align-items:center;
  
  
  
  justify-content:space-between;
  
  
  
  max-width:1280px;
  
  
  
  margin:auto;
  
  
  
  padding:0 30px;
  
  
  
  position:relative;
  
  
  
  background:#fff
}



.site-header:after {
  
  
  
  content:"";
  
  
  
  position:absolute;
  
  
  
  right:0;
  
  
  
  top:0;
  
  
  
  width:26%;
  
  
  
  height:90px;
  
  
  
  background:var(--grey);
  
  
  
  clip-path:polygon(26% 0,100% 0,100% 100%,0 100%);
  
  
  
  z-index:0
}



.brand {
  
  
  
  color:var(--ink);
  
  
  
  font-size:1.75rem;
  
  
  
  font-weight:800;
  
  
  
  font-style:italic;
  
  
  
  line-height:.78;
  
  
  
  text-decoration:none;
  
  
  
  letter-spacing:-.09em;
  
  
  
  display:flex;
  
  
  
  flex-direction:column;
  
  
  
  position:relative;
  
  
  
  z-index:2;
  
  
  
  width:max-content
}



.brand-flaschnerei,.brand-fischer {
  
  
  
  width:max-content;
  
  
  
  position:relative
}



.brand-flaschnerei {
  
  
  
  font-size:.86rem;
  
  
  
  font-style:normal;
  
  
  
  font-weight:400
}



.brand-flaschnerei:after,.brand-fischer:after {
  
  
  
  content:"";
  
  
  
  position:absolute;
  
  
  
  height:3px;
  
  
  
  left:0;
  
  
  
  right:-4px;
  
  
  
  bottom:-3px;
  
  
  
  transform:skew(-22deg)
}



.brand-flaschnerei:after {
  
  
  
  background:var(--blue)
}



.brand-fischer:after {
  
  
  
  background:var(--red)
}



.site-header nav {
  
  
  
  display:flex;
  
  
  
  gap:26px;
  
  
  
  position:relative;
  
  
  
  z-index:2;
  
  
  
  margin-right:42px
}



.site-header nav a,.footer-links a {
  
  
  
  color:var(--ink);
  
  
  
  text-decoration:none;
  
  
  
  font-size:.8rem;
  
  
  
  font-weight:bold;
  
  
  
  text-transform:uppercase
}



.site-header nav a:hover {
  
  
  
  color:var(--blue)
}



.menu-toggle {
  
  
  
  display:none;
  
  
  
  border:0;
  
  
  
  background:none;
  
  
  
  font-size:1.5rem;
  
  
  
  z-index:3
}



.hero {
  
  
  
  display:grid;
  
  
  
  grid-template-columns:1fr 1fr;
  
  
  
  min-height:620px;
  
  
  
  max-width:1400px;
  
  
  
  margin:auto;
  
  
  
  overflow:hidden;
  
  
  
  background:var(--light)
}



.hero-copy {
  
  
  
  padding:clamp(55px,9vw,125px);
  
  
  
  display:flex;
  
  
  
  justify-content:center;
  
  
  
  flex-direction:column;
  
  
  
  position:relative;
  
  
  
  background:#fff
}



.hero-copy:after {
  
  
  
  content:"";
  
  
  
  position:absolute;
  
  
  
  right:-90px;
  
  
  
  top:0;
  
  
  
  bottom:0;
  
  
  
  width:190px;
  
  
  
  background:var(--grey);
  
  
  
  clip-path:polygon(48% 0,100% 0,52% 100%,0 100%);
  
  
  
  z-index:1
}



.hero-copy>* {
  
  
  
  position:relative;
  
  
  
  z-index:2
}



.hero-copy>p:not(.eyebrow) {
  
  
  
  max-width:465px;
  
  
  
  font-size:1.1rem
}



.eyebrow {
  
  
  
  font-size:.72rem;
  
  
  
  letter-spacing:.14em;
  
  
  
  font-weight:800;
  
  
  
  color:var(--grey);
  
  
  
  margin-bottom:17px
}



.hero-image {
  
  
  
  min-height:400px;
  
  
  
  position:relative;
  
  
  
  background:#ddd
}



.hero-image img {
  
  
  
  width:100%;
  
  
  
  height:100%;
  
  
  
  object-fit:cover;
  
  
  
  display:block
}



.hero-image:after {
  
  
  
  content:"";
  
  
  
  position:absolute;
  
  
  
  top:0;
  
  
  
  left:0;
  
  
  
  bottom:0;
  
  
  
  width:90px;
  
  
  
  background:var(--grey);
  
  
  
  clip-path:polygon(100% 0,100% 100%,0 100%)
}



.badge {
  
  
  
  position:absolute;
  
  
  
  z-index:2;
  
  
  
  right:34px;
  
  
  
  bottom:32px;
  
  
  
  background:#fff;
  
  
  
  color:var(--ink);
  
  
  
  border-left:6px solid var(--red);
  
  
  
  padding:15px 20px;
  
  
  
  text-align:center;
  
  
  
  line-height:1;
  
  
  
  text-transform:uppercase;
  
  
  
  font-size:.7rem
}



.badge b {
  
  
  
  font-size:1.55rem
}



.button {
  
  
  
  background:var(--ink);
  
  
  
  border:0;
  
  
  
  border-left:5px solid var(--red);
  
  
  
  color:#fff;
  
  
  
  cursor:pointer;
  
  
  
  display:inline-flex;
  
  
  
  gap:26px;
  
  
  
  justify-content:space-between;
  
  
  
  align-items:center;
  
  
  
  margin-top:18px;
  
  
  
  padding:14px 18px;
  
  
  
  text-decoration:none;
  
  
  
  text-transform:uppercase;
  
  
  
  font-size:.75rem;
  
  
  
  font-weight:bold;
  
  
  
  width:max-content
}



.button:hover {
  
  
  
  background:var(--grey)
}



.button span {
  
  
  
  font-size:1.4rem
}



.section,.contact-section,.legal-content {
  
  
  
  max-width:1240px;
  
  
  
  margin:auto;
  
  
  
  padding:100px 28px
}



.cards {
  
  
  
  display:grid;
  
  
  
  grid-template-columns:repeat(3,1fr);
  
  
  
  gap:18px;
  
  
  
  margin-top:42px
}



.service-card {
  
  
  
  border:1px solid var(--line);
  
  
  
  background:#fff
}



.service-card img {
  
  
  
  width:100%;
  
  
  
  height:215px;
  
  
  
  object-fit:cover;
  
  
  
  display:block
}



.service-card>div {
  
  
  
  padding:25px
}



.service-card h3 {
  
  
  
  font-size:1.5rem
}



.service-card a {
  
  
  
  color:var(--ink);
  
  
  
  font-weight:bold;
  
  
  
  text-transform:uppercase;
  
  
  
  font-size:.77rem;
  
  
  
  text-decoration:none
}



.service-card a span {
  
  
  
  color:var(--red);
  
  
  
  font-size:1.3rem
}



.reviews {
  
  
  
  background:var(--light);
  
  
  
  padding:80px max(28px,calc((100% - 1184px)/2));
  
  
  
  display:flex;
  
  
  
  gap:80px;
  
  
  
  justify-content:space-between;
  
  
  
  align-items:center;
  
  
  
  border-top:1px solid var(--line);
  
  
  
  border-bottom:1px solid var(--line);
  
  
  
  position:relative
}



.reviews:before {
  
  
  
  content:"";
  
  
  
  position:absolute;
  
  
  
  left:0;
  
  
  
  top:0;
  
  
  
  bottom:0;
  
  
  
  width:30%;
  
  
  
  background:var(--grey);
  
  
  
  clip-path:polygon(0 0,88% 0,100% 100%,0 100%)
}



.reviews>div {
  
  
  
  position:relative;
  
  
  
  z-index:1
}



.reviews>div:first-child {
  
  
  
  max-width:560px;
  
  
  
  color:#fff
}



.reviews .eyebrow {
  
  
  
  color:#e8eaea
}



.review-score {
  
  
  
  background:#fff;
  
  
  
  padding:28px 34px;
  
  
  
  min-width:250px;
  
  
  
  border-left:5px solid var(--blue)
}



.review-score>* {
  
  
  
  display:block
}



.stars {
  
  
  
  letter-spacing:3px;
  
  
  
  color:var(--red)
}



.review-score strong {
  
  
  
  font-size:3.4rem;
  
  
  
  line-height:1
}



.contact-section {
  
  
  
  display:grid;
  
  
  
  grid-template-columns:1.35fr 1fr;
  
  
  
  gap:95px
}



.contact-card {
  
  
  
  background:var(--grey);
  
  
  
  color:#fff;
  
  
  
  padding:42px;
  
  
  
  position:relative
}



.contact-card:before {
  
  
  
  content:"";
  
  
  
  position:absolute;
  
  
  
  right:0;
  
  
  
  top:0;
  
  
  
  border-style:solid;
  
  
  
  border-width:0 42px 42px 0;
  
  
  
  border-color:transparent #fff transparent transparent
}



.contact-card a {
  
  
  
  color:#fff;
  
  
  
  display:block;
  
  
  
  font-size:1.22rem;
  
  
  
  font-weight:bold;
  
  
  
  text-decoration:none;
  
  
  
  margin-bottom:7px
}



.contact-card p {
  
  
  
  color:#f3f3f3
}



footer {
  
  
  
  background:#fff;
  
  
  
  border-top:1px solid var(--line);
  
  
  
  padding:46px max(28px,calc((100% - 1184px)/2));
  
  
  
  display:flex;
  
  
  
  justify-content:space-between;
  
  
  
  line-height:1.75
}



.footer-links {
  
  
  
  display:flex;
  
  
  
  gap:24px;
  
  
  
  align-items:flex-end
}



.page-intro {
  
  
  
  background:var(--light);
  
  
  
  min-height:410px;
  
  
  
  padding:105px max(28px,calc((100% - 1184px)/2));
  
  
  
  position:relative;
  
  
  
  overflow:hidden
}



.page-intro:after {
  
  
  
  content:"";
  
  
  
  position:absolute;
  
  
  
  right:0;
  
  
  
  top:0;
  
  
  
  width:36%;
  
  
  
  height:100%;
  
  
  
  background:var(--grey);
  
  
  
  clip-path:polygon(36% 0,100% 0,100% 100%,0 100%)
}



.page-intro>* {
  
  
  
  position:relative;
  
  
  
  z-index:1
}



.page-intro>p:not(.eyebrow) {
  
  
  
  max-width:650px;
  
  
  
  font-size:1.15rem
}



.career {
  
  
  
  background:linear-gradient(90deg,#fff 48%,rgba(255,255,255,.1)),url('/assets/images/fischer-transporter-wide.png') center/cover
}



.team-grid {
  
  
  
  max-width:1240px;
  
  
  
  margin:auto;
  
  
  
  padding:82px 28px;
  
  
  
  display:grid;
  
  
  
  grid-template-columns:repeat(3,1fr);
  
  
  
  gap:20px
}



.team-grid article {
  
  
  
  border-bottom:4px solid var(--red)
}



.team-grid img {
  
  
  
  height:245px;
  
  
  
  width:100%;
  
  
  
  object-fit:cover
}



.team-grid h3 {
  
  
  
  font-size:1.4rem;
  
  
  
  margin:16px 0 5px
}



.legal-content {
  
  
  
  max-width:880px
}



.legal-content section {
  
  
  
  border-top:1px solid var(--line);
  
  
  
  padding:25px 0
}



.login-body {
  
  
  
  min-height:100vh;
  
  
  
  background:var(--light);
  
  
  
  display:grid;
  
  
  
  place-content:center;
  
  
  
  padding:24px
}



.login-card {
  
  
  
  background:#fff;
  
  
  
  padding:48px;
  
  
  
  max-width:460px;
  
  
  
  width:min(100%,460px);
  
  
  
  border-top:6px solid var(--grey)
}



.login-card h1 {
  
  
  
  font-size:2.6rem;
  
  
  
  margin:40px 0 10px
}



.login-card label,.admin-form label {
  
  
  
  display:block;
  
  
  
  font-size:.78rem;
  
  
  
  font-weight:bold;
  
  
  
  letter-spacing:.04em;
  
  
  
  margin:18px 0 0;
  
  
  
  text-transform:uppercase
}



.login-card input,.admin-form input,.admin-form textarea,.admin-form select {
  
  
  
  width:100%;
  
  
  
  padding:12px;
  
  
  
  border:1px solid var(--line);
  
  
  
  margin-top:7px;
  
  
  
  font:inherit;
  
  
  
  background:#fff
}



.error,.delete {
  
  
  
  color:var(--red)
}



.admin-body {
  
  
  
  min-height:100vh;
  
  
  
  background:var(--light);
  
  
  
  display:grid;
  
  
  
  grid-template-columns:250px 1fr
}



.admin-body aside {
  
  
  
  background:#fff;
  
  
  
  padding:34px 24px;
  
  
  
  border-right:1px solid var(--line);
  
  
  
  border-top:6px solid var(--blue)
}



.admin-body aside .brand {
  
  
  
  margin-bottom:60px
}



.admin-body aside>p {
  
  
  
  font-size:.7rem;
  
  
  
  letter-spacing:.12em;
  
  
  
  color:var(--grey)
}



.admin-nav {
  
  
  
  color:var(--ink);
  
  
  
  display:block;
  
  
  
  text-transform:uppercase;
  
  
  
  font-size:.8rem;
  
  
  
  text-decoration:none;
  
  
  
  padding:12px 0
}



.admin-nav.active {
  
  
  
  border-left:4px solid var(--red);
  
  
  
  padding-left:10px;
  
  
  
  font-weight:bold
}



.admin-main {
  
  
  
  max-width:1200px;
  
  
  
  padding:55px;
  
  
  
  width:100%
}



.admin-heading {
  
  
  
  display:flex;
  
  
  
  justify-content:space-between;
  
  
  
  align-items:flex-start;
  
  
  
  margin-bottom:38px
}



.admin-heading h1 {
  
  
  
  font-size:3rem
}



.outline {
  
  
  
  background:transparent;
  
  
  
  color:var(--ink);
  
  
  
  border:1px solid var(--ink);
  
  
  
  margin:0
}



.admin-form {
  
  
  
  background:#fff;
  
  
  
  border-top:4px solid var(--grey);
  
  
  
  padding:32px;
  
  
  
  max-width:760px
}



.admin-form h2 {
  
  
  
  font-size:1.5rem
}



.form-row,.manager {
  
  
  
  display:grid;
  
  
  
  grid-template-columns:1fr 1fr;
  
  
  
  gap:18px
}



.manager {
  
  
  
  grid-template-columns:minmax(320px,.8fr) 1.2fr;
  
  
  
  gap:28px
}



.muted {
  
  
  
  color:var(--grey);
  
  
  
  font-size:.88rem
}



.item-list {
  
  
  
  display:grid;
  
  
  
  gap:12px
}



.item-list article {
  
  
  
  background:#fff;
  
  
  
  border-left:4px solid var(--blue);
  
  
  
  padding:14px;
  
  
  
  display:flex;
  
  
  
  gap:16px;
  
  
  
  align-items:center
}



.item-list img {
  
  
  
  width:90px;
  
  
  
  height:72px;
  
  
  
  object-fit:cover
}



.item-list h3 {
  
  
  
  margin:0
}



.item-list p {
  
  
  
  font-size:.85rem;
  
  
  
  color:var(--grey);
  
  
  
  margin:5px 0
}



.item-list a {
  
  
  
  font-size:.8rem;
  
  
  
  color:var(--blue);
  
  
  
  font-weight:bold;
  
  
  
  text-decoration:none
}



.item-list form {
  
  
  
  margin-left:auto
}



.delete {
  
  
  
  border:0;
  
  
  
  background:none;
  
  
  
  cursor:pointer
}



.media-grid {
  
  
  
  display:grid;
  
  
  
  grid-template-columns:repeat(2,1fr);
  
  
  
  gap:14px
}



.media-grid article {
  
  
  
  background:#fff;
  
  
  
  padding:10px
}



.media-grid img {
  
  
  
  width:100%;
  
  
  
  height:140px;
  
  
  
  object-fit:cover
}



.media-grid code {
  
  
  
  font-size:.65rem;
  
  
  
  word-break:break-all
}



@media(max-width:760px) {
  
  
  
  .site-header {
    
    
    
    height:70px;
    
    
    
    padding:0 18px
  }
  
  
  
  .site-header:after {
    
    
    
    height:70px;
    
    
    
    width:20%
  }
  
  
  
  .menu-toggle {
    
    
    
    display:block
  }
  
  
  
  .site-header nav {
    
    
    
    display:none;
    
    
    
    position:absolute;
    
    
    
    top:70px;
    
    
    
    left:0;
    
    
    
    right:0;
    
    
    
    background:#fff;
    
    
    
    padding:20px;
    
    
    
    flex-direction:column;
    
    
    
    z-index:5;
    
    
    
    border-bottom:1px solid var(--line)
  }
  
  
  
  .site-header nav.open {
    
    
    
    display:flex
  }
  
  
  
  .hero,.contact-section {
    
    
    
    grid-template-columns:1fr
  }
  
  
  
  .hero-copy {
    
    
    
    min-height:460px
  }
  
  
  
  .hero-copy:after {
    
    
    
    display:none
  }
  
  
  
  .hero-image {
    
    
    
    min-height:360px
  }
  
  
  
  .cards,.team-grid {
    
    
    
    grid-template-columns:1fr
  }
  
  
  
  .reviews {
    
    
    
    display:block
  }
  
  
  
  .reviews:before {
    
    
    
    width:100%;
    
    
    
    height:54%;
    
    
    
    clip-path:polygon(0 0,100% 0,100% 82%,0 100%)
  }
  
  
  
  .reviews>div:first-child {
    
    
    
    padding-bottom:35px
  }
  
  
  
  .review-score {
    
    
    
    width:max-content
  }
  
  
  
  .footer-links {
    
    
    
    display:block
  }
  
  
  
  .footer-links a {
    
    
    
    display:block;
    
    
    
    margin-top:8px
  }
  
  
  
  .admin-body {
    
    
    
    display:block
  }
  
  
  
  .admin-body aside {
    
    
    
    padding:24px
  }
  
  
  
  .admin-body aside .brand {
    
    
    
    margin-bottom:22px
  }
  
  
  
  .admin-nav {
    
    
    
    display:inline-block;
    
    
    
    margin-right:10px
  }
  
  
  
  .admin-main {
    
    
    
    padding:32px 18px
  }
  
  
  
  .admin-heading,.manager {
    
    
    
    display:block
  }
  
  
  
  .admin-form {
    
    
    
    padding:22px
  }
  
  
  
  .item-list,.media-grid {
    
    
    
    margin-top:20px
  }
  
  
  
  .form-row {
    
    
    
    grid-template-columns:1fr
  }
}