/* Jucker Treuhand – gemeinsames Stylesheet
   Masse, Farben und Abstände wurden 1:1 von der bisherigen Website übernommen
   (gemessen mit getComputedStyle bei 1440 / 1024 / 800 / 600 / 375 px). */

:root {
  --blue: #114c81;
  --ink: #000;
  --head: #161922;
  --menu: #0a0a0a;
  --grey: #d6d6d6;
  --grey-light: #ebebeb;
  --font: "Oswald", Arial, Tahoma, sans-serif;

  /* Typografie (Desktop >= 960px) */
  --fs: 20px;   --lh: 25px;  --ls: 3px;
  --h1: 48px;   --h1lh: 50px; --hls: 5px;
  --h2: 30px;   --h2lh: 34px;
  --h3: 30px;   --h3lh: 29px;
  --h4: 20px;   --h4lh: 29px;

  /* Inhaltsbreite */
  --wrap: 1220px;
  --header-h: 250px;
}

@media (max-width: 1239px) { :root { --wrap: 940px; } }
@media (max-width: 959px) {
  :root {
    --wrap: 708px;
    --fs: 17px; --lh: 21px; --ls: 3px;
    --h1: 41px; --h1lh: 43px; --hls: 4px;
    --h2: 26px; --h2lh: 29px;
    --h3: 26px; --h3lh: 25px;
    --h4: 17px; --h4lh: 25px;
  }
}
@media (max-width: 767px) {
  :root {
    --wrap: 480px; --header-h: 150px;
    --fs: 15px; --lh: 19px; --ls: 2px;
    --h1: 36px; --h1lh: 38px; --hls: 4px;
    --h2: 23px; --h2lh: 26px;
    --h3: 23px; --h3lh: 22px;
    --h4: 15px; --h4lh: 22px;
  }
}
@media (max-width: 479px) {
  :root {
    --wrap: calc(100vw - 66px);
    --fs: 13px; --lh: 19px; --ls: 2px;
    --h1: 29px; --h1lh: 30px; --hls: 3px;
    --h2: 18px; --h2lh: 20px;
    --h3: 18px; --h3lh: 19px;
    --h4: 13px; --h4lh: 19px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  position: relative;
  left: 0;
  transition: left .3s ease-in-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: var(--hls); }
h1 { font-size: var(--h1); line-height: var(--h1lh); font-weight: 400; color: var(--head); text-align: center; }
h2 { font-size: var(--h2); line-height: var(--h2lh); color: var(--head); }
h3 { font-size: var(--h3); line-height: var(--h3lh); color: var(--blue); text-align: center; }
h4 { font-size: var(--h4); line-height: var(--h4lh); color: var(--head); }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { text-decoration: none; }

p { margin: 0 0 15px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--blue); color: #fff; padding: 8px 16px; letter-spacing: 0;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ---------- Header ---------- */
.site-header { position: relative; height: var(--header-h); background: #fff; }

.topbar {
  position: relative; z-index: 30;
  height: 91px;
  background: #fff;
  border-bottom: 1px solid transparent;
  padding: 0 1%;
}
.topbar-inner { position: relative; display: flex; height: 90px; }

.logo { display: block; flex: none; margin: 0 30px 0 20px; padding: 15px 0; height: 90px; }
.logo img { display: block; width: 60px; height: 60px; }

.menu { display: flex; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: 15px 0;
  font-size: 20px; letter-spacing: normal; line-height: 60px;
  color: var(--menu); text-decoration: none;
  transition: color .3s ease-in-out;
}
.menu a span { display: block; padding: 0 20px; line-height: 60px; white-space: nowrap; border-right: 1px solid rgba(0, 0, 0, .05); }
.menu li:last-child a span { border-right-width: 0; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--blue); text-decoration: none; }

.menu-toggle {
  display: none;
  position: absolute; top: 50%; right: 280px; margin-top: -17px;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 3px; background: #fff;
  color: var(--blue); cursor: pointer;
}
.menu-toggle svg, .side-close svg { display: block; width: 22px; height: 22px; margin: 6px; }

@media (max-width: 1239px) {
  .topbar .menu { display: none; }
  .menu-toggle { display: block; }
}

@media (max-width: 767px) {
  .topbar { height: 81px; padding: 0; }
  .topbar-inner { height: 80px; }
  .logo { margin: 0; padding: 20px 0 0 25px; height: 80px; }
  .menu-toggle { right: 10px; top: 23px; margin-top: 0; }
}

/* Mobile-Menü (Seitenleiste von rechts, Seite schiebt sich 125px nach links) */
.side-slide {
  position: fixed; top: 0; right: -250px; z-index: 100000;
  width: 250px; max-width: 100%; height: 100%;
  overflow: auto;
  background: var(--blue);
  border-bottom: 60px solid var(--blue);
  color: #fff;
  visibility: hidden;
  transition: right .3s ease-in-out, visibility 0s linear .3s;
}
.side-slide.is-open { right: 0; visibility: visible; transition: right .3s ease-in-out; }
.side-close-wrap { height: 60px; }
.side-close {
  float: right; width: 34px; height: 34px; margin: 13px 13px 0 0; padding: 0;
  background: none; border: 0; color: var(--grey); cursor: pointer;
}
.side-close:hover { color: #fff; }
.side-slide ul { list-style: none; margin: 0 0 20px; padding: 0; }
.side-slide li { border-top: 1px solid rgba(255, 255, 255, .03); }
.side-slide li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .03); }
.side-slide a {
  display: block; padding: 11px 5px 10px 20px; margin-right: 50px;
  font-size: 13px; line-height: 19px; letter-spacing: normal;
  color: #fff; text-decoration: none;
}
.side-slide a:hover, .side-slide a[aria-current="page"] { color: var(--grey); text-decoration: none; }

.body-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease-in-out, visibility 0s linear .3s;
}
body.menu-open { left: -125px; }
body.menu-open .body-overlay { opacity: 1; visibility: visible; transition: opacity .3s ease-in-out; }

/* ---------- Inhalt ---------- */
.content { padding-top: 30px; }

.wrap { width: var(--wrap); max-width: 100%; margin: 0 auto; }
.inner { margin: 0 1%; }

.el { margin-bottom: 35px; display: flow-root; }
.el > :last-child { margin-bottom: 0; }
.row, .mb100, .my100 { display: flow-root; }
.mb100 { margin-bottom: 100px; }
.my100 { margin-top: 100px; margin-bottom: 100px; }
.mt50 { margin-top: 50px; }
.center { text-align: center; }

.title { margin-bottom: 100px; }

.sep { height: 1px; margin-bottom: 35px; }
.sep::before { content: ""; display: block; position: relative; top: 1px; border-top: 3px solid var(--blue); }

.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; }
@media (max-width: 767px) { .cols3 { grid-template-columns: 1fr; } }

/* Startseite */
.el > .home-logo { display: block; width: 356px; margin: 0 auto 35px; }
.full-img { padding-bottom: 70px; }
.full-img img { display: block; width: 100%; height: auto; }
.link-home { font-size: 30px; text-align: center; margin: 0; }

/* Team: Flip-Karten (Foto vorne, Kontaktdaten hinten) */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 5px 0 60px; }
.team-col { display: flow-root; }
@media (max-width: 767px) {
  .team-grid { grid-template-columns: 1fr; padding: 5px 0 60px; }
}
.card { position: relative; aspect-ratio: 4 / 3; margin-bottom: 40px; perspective: var(--persp, 2312px); text-align: center; }
.card-face {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .5s ease-in-out;
  background-size: cover; background-position: center;
}
.card-front { transform: rotateY(0deg); z-index: 1; }
.card-back { transform: rotateY(180deg); background-color: var(--grey); }
.team-col + .team-col .card-back { background-color: var(--grey-light); }
.card:hover .card-front, .card:focus-within .card-front { transform: rotateY(-180deg); }
.card:hover .card-back, .card:focus-within .card-back { transform: rotateY(0deg); }
.card-back-inner { flex-shrink: 0; padding: 20px; }
.card-back-inner > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-back h2 { margin-bottom: 15px; }
.card-back-inner { max-height: 100%; overflow: hidden; }
.card-back p:last-child { margin-bottom: 0; }

/* Kontakt */
.contact-band {
  display: flex;
  padding: 50px 50px 0;
  background: rgba(255, 255, 255, .01) url("../assets/Jucker-Treuhand-buero_fuer-web.jpg") center / contain no-repeat;
}
.contact-band > div { flex: 0 0 50%; min-height: 1px; }
.form-box { padding: 50px; background: var(--grey); }
@media (max-width: 767px) {
  .contact-band { flex-direction: column; }
  .contact-band > div { flex-basis: auto; }
}

.form { display: flow-root; margin-bottom: 35px; }
.form label { display: block; font-size: 20px; font-weight: 300; margin-bottom: 50px; }
.form .ctl { display: block; padding-bottom: 3px; }
.form input:not([type="submit"]), .form textarea {
  display: block; width: 100%; max-width: 100%;
  margin: 10px 0 0; padding: 10px;
  font: 400 14px/normal var(--font); letter-spacing: normal;
  color: #626262; background: var(--grey);
  border: 0; border-bottom: 3px solid #000; border-radius: 0;
  outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.form textarea { line-height: 20px; min-height: 60px; resize: vertical; }
.form input:not([type="submit"]):focus, .form textarea:focus {
  color: #1982c2; border-color: #d5e5ee; background-color: #e9f5fc;
}
.form input[type="submit"] {
  display: inline-block; margin: 0 7px 0 0; padding: 11px 20px;
  font: 400 var(--fs)/normal var(--font); letter-spacing: normal;
  color: #fff; background: var(--blue);
  border: 0; border-radius: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.form .submit-row { margin: 0 0 15px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .form-note { margin: -20px 0 25px; font-size: 14px; line-height: 20px; font-weight: 300; }
.form input[type="submit"]:disabled { opacity: .6; cursor: wait; }
.form .form-status { margin: 15px 0 0; padding: 10px 15px; font-weight: 300; background: #e9f5fc; border-left: 3px solid var(--blue); }
.form .form-status.is-error { background: #fbeaea; border-left-color: #b3261e; }

/* Impressum */
.imp { display: grid; overflow: hidden; margin-bottom: 100px; }
.imp > * { grid-area: 1 / 1; }
.imp-band {
  margin-top: 50px; height: 405px;
  background: url("../assets/Jucker-Treuhand-buero_fuer-web.jpg") center / cover no-repeat;
}
.imp-box {
  align-self: start;
  width: 25%; margin-left: 100px;
  padding: 100px 50px 75px;
  background: var(--grey);
}
.imp-box .el { margin-bottom: 35px; }
@media (max-width: 767px) {
  .imp-band { height: 507px; }
  .imp-box { width: 100%; min-width: 100%; margin-top: 57px; margin-bottom: 102px; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--grey); color: #000; }
.footer-widgets { display: flex; }
.footer-col { display: flow-root; width: 31.333%; margin: 0 1%; }
.widget { margin-top: 30px; padding: 15px 0; }
.footer-col h4 {
  margin: 0 0 15px; text-align: center;
  font-size: var(--h4); line-height: var(--h4lh); color: #000;
}
.footer-col h4 a { color: #000; }
.footer-col h4 a:hover { color: #000; text-decoration: none; }

.footer-copy { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-copy .wrap { display: flow-root; }
.footer-copy .inner { display: flow-root; padding-top: 30px; margin-bottom: 20px; min-height: 63px; }
.copyright { font-size: 15px; }

.to-top {
  position: relative; float: right; overflow: hidden;
  width: 42px; height: 42px; margin-top: -9px;
  background: var(--blue); color: #fff;
}
.to-top::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, .07); opacity: 0; transition: opacity .3s;
}
.to-top:hover::after { opacity: 1; }
.to-top svg { display: block; width: 20px; height: 20px; margin: 11px; }

@media (max-width: 767px) {
  .footer-widgets { display: block; }
  .footer-col { width: auto; margin: 0; }
  .widget { padding: 0; margin-bottom: 0; }
  .footer-copy .inner { margin: 0 0 20px; text-align: center; }
  .to-top { float: none; display: inline-block; margin: -10px 0 10px; }
  .copyright { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* Postleitzahl und Ort nie trennen */
.nowrap { white-space: nowrap; }

/* Fachgerechte Silbentrennung über weiche Trennstriche (­) im HTML */
.content p { hyphens: manual; -webkit-hyphens: manual; }

/* Datenschutzerklärung: Zwischentitel */
.legal h2 { margin: 40px 0 10px; font-size: var(--h4); line-height: var(--h4lh); }
.legal a { overflow-wrap: anywhere; }