/* fonts */

/* Scope One – Headlines */
@font-face {
  font-family: 'Scope One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/scope-one-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat – Fließtext (Variable Font, alle Stärken 100–900) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  /* ---------- main ---------- */

  :root{
    --bg: #ffffff;
    --nav-bg: #ff9241;
    --nav-text: #ffffff;
    --ink: #201c17;
    --ink-soft: #55504a;
    --title-orange: #e07f3f;
    --border-default: #e7e1d9;
    --display: 'Scope One', serif;
    --body: 'Montserrat', sans-serif;
    --side-padding: 32px;
  }

  *{ box-sizing: border-box; }
  body{
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
  }
  a{ color: inherit; text-decoration: none; }
  .visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--title-orange);
    outline-offset: 2px;
  }

  /* ---------- Kopfbereich / Navi ---------- */
  
  header.topbar{
    background: var(--nav-bg);
    height: 38px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
  }
  nav.mainnav{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--side-padding);
  }
  nav.mainnav ul{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
  }
  nav.mainnav a.navitem{
    color: var(--nav-text);
    font-weight: 700;
    font-size: 11px;
    text-decoration: none;
  }
  nav.mainnav a.navitem:hover{
    color: #000000;
    text-decoration: underline;
  }
  nav.mainnav li.sep{
    color: rgba(255,255,255,0.75);
    font-weight: 400;
    font-size: 11px;
  }


  /* ---------- Logo ---------- */
  .brandbar{
    max-width: 1200px;
    margin: 38px auto 0; /* 38px Platz für die fixierte Kopfleiste */
    padding: 34px var(--side-padding) 40px;
  }
  .logo{
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .logo svg{ width: 46px; height: 46px; flex-shrink: 0; }
  .logo-word{
    font-family: var(--body);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: #23282d;
  }
  .logo-word span{ display: block; }


  /* ---------- Layout ---------- */
  main{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px 80px;
  }
  .layout{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: stretch;
  }

  .photo{
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }

  .cards{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
  }

  .card{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 34px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .card:hover,
  .card:focus-within{
    border-color: var(--nav-bg);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgba(32, 27, 20, 0.45);
  }

  .card-link-title{
    display: inline-block;
  }
  .card-title{
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.7rem;
    color: var(--title-orange);
    margin: 0 0 10px;
  }

.card-title{
  cursor: default;
}
.card-title a,
.card-title a:hover{
  cursor: default;
  text-decoration: none;
}

  .card-subtitle{
    font-size: 1rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.5;
  }

  .card-more{
    margin-top: 20px;
    font-size: 0.92rem;
    font-weight: 500;
  }
  .card-more a{
    color: var(--title-orange);
  }
  .card-more a:hover{ text-decoration: underline; }
  .card-more .sep{
    color: var(--title-orange);
    padding: 0 4px;
  }

  /* ---------- Responsive ---------- */
  @media (min-width: 900px){
    .photo{ object-position: left center; }
  }
  @media (max-width: 900px){
    .layout{ grid-template-columns: 1fr; gap: 32px; }
    .photo{
      width: 50vw;
      height: 50vw;
      aspect-ratio: 1 / 1;
      min-height: 0;
      max-height: none;
      margin: 0 auto;
      object-position: center center;
    }
    .cards{ gap: 20px; }
    .card{ padding: 24px 26px; }
  }
  @media (max-width: 767px){
    nav.mainnav ul{ justify-content: center; }
    nav.mainnav a.navitem,
    nav.mainnav li.sep{ font-size: 10px; }
  }
  @media (max-width: 520px){
    nav.mainnav{ padding: 0 20px; }
    nav.mainnav ul{ gap: 6px 8px; }
    .brandbar{ padding: 24px 20px 28px; }
    main{ padding: 0 20px 60px; }
    .card-title{ font-size: 1.4rem; }
  }

  /* ---------- Fußleiste ---------- */
  footer.sitefooter{
    background: #d9d9d9;
  }
  .footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px var(--side-padding) 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-heading{
    font-family: var(--body);
    font-weight: 700;
    font-size: 1.05rem;
    color: #23282d;
    margin: 0 0 18px;
  }
  .footer-col p{
    margin: 0 0 4px;
    font-size: 0.98rem;
    color: #2b2b2b;
    line-height: 1.5;
  }
  .footer-col p.footer-gap{ margin-top: 18px; }
  .footer-expertise p{ margin: 0 0 14px; }
  .footer-expertise a{ color: inherit; }

  .footer-bottom{
    background: #2d2b29;
    padding: 18px var(--side-padding);
  }
  .footer-bottom-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
  }
  .footer-bottom p{
    margin: 0;
    font-size: 0.74rem;
    color: #ffffff;
  }
  .footer-legal{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .footer-legal a{
    font-size: 0.74rem;
    color: #ffffff;
  }
/*  .footer-legal a:hover{ text-decoration: underline; } */
  .footer-legal .sep{
    color: rgba(255,255,255,0.5);
  }

  @media (max-width: 767px){
    .footer-inner{ grid-template-columns: 1fr; gap: 32px; padding: 44px 20px 40px; }
    .footer-bottom{ padding: 16px 20px; }
  }