/* ==========================================================================
   webermanagement – site.css
   Re-implementation of the original design (Studio Mediamacs) without
   Bootstrap/jQuery. Same look & feel, refined typography & spacing.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no Google request) ---------- */
@font-face { font-family: 'Roboto'; font-weight: 100; font-style: normal; font-display: swap; src: url('../fonts/roboto-100.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/roboto-300.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 300; font-style: italic; font-display: swap; src: url('../fonts/roboto-300i.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: italic; font-display: swap; src: url('../fonts/roboto-700i.woff2') format('woff2'); }

/* ---------- Design tokens ---------- */
:root {
  --black: #000;
  --white: #fff;
  --grey: #ECECEC;
  --blue: #91D4F2;
  --green: #C0D362;
  --orange: #EFBC40;

  --font: 'Roboto', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Typographic scale – fluid between tablet and desktop (orig: 20/24/30/48px) */
  --fs-body:  clamp(1rem, 0.82rem + 0.7vw, 1.25rem);      /* 16 → 20px */
  --fs-content: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem);  /* 18 → 24px */
  --fs-h3:    clamp(1rem, 0.82rem + 0.7vw, 1.25rem);      /* 16 → 20px */
  --fs-h2:    clamp(1.375rem, 1rem + 1.2vw, 1.875rem);    /* 22 → 30px */
  --fs-h1:    clamp(1.875rem, 1.1rem + 2.6vw, 3rem);      /* 30 → 48px */
  --fs-nav:   clamp(1.75rem, 1rem + 2.6vw, 3rem);         /* 28 → 48px */

  --lh: 1.3;              /* orig 1.2 – slightly more air for long German texts */
  --lh-tight: 1.15;
  --measure: 60rem;       /* orig max-width 960px */

  --header-h: 90px;
  --gutter: clamp(10px, 2vw, 25px);
  --transition: .5s;
}

/* ---------- Reset (light) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
img, svg { display: block; max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--black); margin: 1.5em 0; }
b, strong { font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

a, a:link, a:visited {
  color: var(--black);
  text-decoration: none;
  transition: opacity var(--transition);
}
a:hover, a:focus-visible { opacity: .6; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; opacity: 1; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--white); padding: .5em 1em; z-index: 100; }
.skip:focus { left: 0; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Typography classes (match legacy h1/h2/h3) ---------- */
.h1, h1 { font-size: var(--fs-h1); font-weight: 100; line-height: var(--lh-tight); margin: 0 0 .5em; letter-spacing: -.005em; }
.h2, h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); margin: 0 0 .25em; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh); margin: 1.2em 0 .3em; text-transform: lowercase; }
.h1:first-child, .h2:first-child, .h3:first-child { margin-top: 0; }
.letter { letter-spacing: .1em; }
.upper  { text-transform: uppercase; }
.muted  { opacity: .6; }

/* Content blocks (orig: .content, .item-content 24px) */
.content, .item-content {
  font-size: var(--fs-content);
  max-width: var(--measure);
}
.content { margin-top: var(--header-h); padding-top: 1.5rem; padding-bottom: 3rem; }
.content .h1 + .text, .content .h1 + .list { margin-top: -.25em; }

/* Lists with ring bullets (orig ul.ld) */
.list ul, ul.ld, .item-content ul {
  list-style: none; padding: 0; margin: 0 0 1em;
}
.list ul li, ul.ld li, .item-content ul li {
  position: relative; padding-left: 22px; margin-bottom: .15em;
}
.list ul li::before, ul.ld li::before, .item-content ul li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--black);
}
.list ol { padding-left: 1.3em; margin: 0 0 1em; }

blockquote.quote { margin: 1.5em 0; padding-left: 1em; border-left: 1px solid var(--black); font-weight: 100; font-size: var(--fs-h2); line-height: var(--lh-tight); }
blockquote.quote footer { font-size: var(--fs-body); font-weight: 300; margin-top: .5em; }

/* Download / external link icon (orig a[name=download]) */
a.download, a.external {
  display: inline-block; padding-left: .9em;
  background: url('../img/doc.svg') no-repeat 0 .22em / auto .8em;
}
a.external { background-image: url('../img/login.svg'); }
.download-list ul { list-style: none; padding: 0; margin: 0; }
.download-list li { margin-bottom: .3em; }
.partners { list-style: none; padding: 0; margin: 0 0 1em; }
.partners li { margin-bottom: .2em; }

/* Images */
figure.image { margin: 0 0 1.5em; }
figure.image.is-muted img { opacity: .6; }
figure.image figcaption { font-size: .8em; margin-top: .4em; opacity: .7; }
hr.line { margin: 1.5em 0; }
.gap-small  { height: 1.5rem; }
.gap-medium { height: 3rem; }
.gap-large  { height: 6rem; }

/* ---------- Layout rows (page builder) ---------- */
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 2rem; }
.row .col { grid-column: span var(--span, 12); min-width: 0; }
.row.spacing-none   { margin-bottom: 0; }
.row.spacing-normal { margin-bottom: 1.5rem; }
.row.spacing-large  { margin-bottom: 4rem; }
@media (max-width: 767px) {
  .row .col { grid-column: span 12; }
  .row .col + .col { margin-top: 1rem; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--header-h);
  background: var(--white);
  transition: top var(--transition);
}
body.scrolled-down .site-header { top: calc(-1 * var(--header-h)); }
.site-header .wrap { display: flex; align-items: flex-start; justify-content: space-between; height: 100%; }
.logo { display: block; width: 200px; margin-top: var(--logo-top, 20px); }
.logo svg { width: 100%; height: auto; }

.main-nav { padding-top: 15px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.main-nav a {
  font-size: var(--fs-nav); font-weight: 100; text-transform: lowercase;
  line-height: 1.2; position: relative; display: inline-block;
}
.main-nav li.is-active a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--black);
}

.nav-toggle { display: none; width: 30px; height: 28px; margin-top: 24px; position: relative; }
.nav-toggle span { position: absolute; left: 0; width: 30px; height: 2px; background: var(--black); transition: transform .3s, opacity .3s; }
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 13px; }
.nav-toggle span:nth-child(3) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ---------- Footer ---------- */
.site-footer { padding: .6em 0 1em; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.footer-nav a { text-transform: uppercase; letter-spacing: .1em; margin-left: 1em; }
.footer-nav a.is-active { text-decoration: underline; }

/* ==========================================================================
   HOME / WISSEN
   ========================================================================== */
.intro {
  position: relative;
  padding-top: var(--header-h);
  min-height: 520px;
}
.intro .claim { position: absolute; top: calc(var(--header-h) + 3em); z-index: 1; }
.intro .contactline { position: absolute; top: calc(var(--header-h) + 5em + 1.5em); z-index: 1; font-weight: 100; }
.intro .contactline a:hover { opacity: .6; }
/* Image: max. 800px, right edge = side panel minus a gap; starts right of the claim text */
/* side panel starts at 75vw → image ends --panel-gap before it, max. 800px wide,
   and leaves room for the claim on the left (--text-col). */
.intro { --panel-gap: 28px; --text-col: 465px; }
.intro-image {
  width: min(800px, calc(75vw - var(--panel-gap) - var(--text-col)));
  min-width: 360px;            /* below ~1200px the faded image may slide under the claim, as before */
  margin: 0 calc(25vw + var(--panel-gap) - var(--gutter)) 80px auto;
}
.intro-image img { opacity: .6; width: 100%; }

/* Side panel (orig .side-nav) */
.side-panel {
  position: fixed; top: var(--header-h); bottom: 0; right: calc(-25% - 1px);
  width: 25%; min-width: 0;
  z-index: 1000;
  background: var(--blue);
  border-left: 1px solid var(--black); border-top: 1px solid var(--black);
  overflow-y: auto;
  transition: right 1s ease-in-out, top var(--transition) linear;
}
.side-panel.is-open { right: 0; }
body.scrolled-down .side-panel { top: -1px; }
.panel-box { }
.panel-login { background: var(--green); }
.panel-head {
  display: block; width: 100%; position: relative;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .4em 2em .4em .6em;
  border-bottom: 1px solid var(--black);
}
.panel-head .ico { position: absolute; right: .6em; top: .6em; }
.panel-body { padding: 1.2em .6em; border-bottom: 1px solid var(--black); }
.panel-box:last-child .panel-body { border-bottom: 0; }
.panel-item { padding-left: 1.2em; padding-bottom: 1.2em; }
.panel-item:last-child { padding-bottom: 0; }
.panel-item .h2 { margin-bottom: .2em; }
.panel-item .h2.bullet { position: relative; }          /* bullet sits before the title, not in the green bar */
.panel-item .h2.bullet::before { left: -20px; }
.panel-body label { display: block; font-weight: 300; }
.panel-body input { width: 100%; background: transparent; border: 1px solid var(--black); padding: .6em; margin-bottom: .6em; font: inherit; font-weight: 400; }
.panel-body .submit { text-align: right; margin-top: .6em; }
.panel-body .teaser { margin-bottom: 1.2em; }
.panel-body .download { padding-left: 1.2em; }

/* Icons */
.ico { display: inline-block; width: .8em; height: .8em; background: no-repeat center / 100%; }
.ico-login { background-image: url('../img/login.svg'); }
.ico-fav   { background-image: url('../img/fav.svg'); }
.ico-close { background-image: url('../img/close.svg'); }
.ico-doc   { background-image: url('../img/doc.svg'); }

/* Content nav (tabs + filters) */
.content-nav {
  position: sticky; top: var(--header-h); z-index: 1;
  background: var(--grey);
  transition: top var(--transition);
}
body.scrolled-down .content-nav { top: -1px; }
.nav-main { border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); }
.nav-main .wrap { position: relative; }
.nav-sub  { border-bottom: 1px solid var(--black); }
.content-nav ul { list-style: none; margin: .4em 0; padding: 0; display: inline-block; }
.content-nav li { display: inline-block; position: relative; margin: 0; padding: 0 20px 0 18px; }
.tabs li { text-transform: uppercase; padding-left: 0; }
.tabs li.is-active a { text-decoration: underline; }
.filters li { text-transform: lowercase; }
.nav-icons { position: absolute; right: calc(var(--gutter) + .4em); top: .2em; display: flex; }
.nav-icons a { display: block; width: 1.6em; height: 1.6em; background-size: .8em .8em; }

/* Ring bullets */
.bullet::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -6px;
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--black);
  transition: background var(--transition);
}
.bullet.is-active::before { background: var(--black); }
.h2.bullet::before { top: .55em; margin-top: 0; }
.bullet:hover::before { opacity: .6; }

/* Publication items */
.item { border-bottom: 1px solid var(--black); background: var(--grey); }
.item.is-hidden { display: none; }
.item-box { position: relative; padding-top: .6em; padding-bottom: .6em; padding-left: calc(var(--gutter) + 10px); }
.item-title { position: relative; margin-right: 110px; max-width: var(--measure); }
.item-title.bullet::before { left: -20px; }
.item-title .item-toggle { display: block; width: 100%; font: inherit; line-height: inherit; }
.item-title .item-toggle:hover { opacity: .6; }
.item.is-open .item-title::before { background: var(--black); }
.item-date { font-weight: 300; }
.item-cat { position: absolute; right: var(--gutter); top: .6em; text-transform: lowercase; }
.item-content { max-width: var(--measure); padding: .75em 0 .5em; }
.item-content > :first-child { margin-top: 0; }
.item-content .h3 { margin-top: 1em; }
.item-content .downloads a { display: inline-block; margin-bottom: .2em; }

/* Download list inside items */
.item-content ul.downloads { list-style: none; padding: 0; margin: 0 0 .5em; }
.item-content ul.downloads li { padding-left: 0; margin-bottom: .2em; }
.item-content ul.downloads li::before { display: none; }
.item-content ul.downloads a { font-weight: 400; }
.item-content .note { margin-top: .75em; font-weight: 400; }
.item-content h2 { font-size: var(--fs-content); font-weight: 400; margin: 0 0 .5em; }

/* Large text (address blocks) */
.text-large { font-size: var(--fs-h1); font-weight: 100; line-height: var(--lh-tight); margin-bottom: .5em; }
.text-large p { margin-bottom: .6em; }

/* Side panel extras */
.panel-item .cat { padding-left: 0; }
.panel-doc { margin-bottom: .3em; }
.panel-doc .download { padding-left: 1.2em; background-position: 0 .3em; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  body { hyphens: auto; -webkit-hyphens: auto; }
  .nav-toggle { display: block; }
  .main-nav {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
    background: var(--white); padding: 15px var(--gutter) 20px; border-bottom: 1px solid var(--black);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { padding: 8px 0; }
  .main-nav li.is-active a::after { bottom: 10px; }

  .intro { min-height: 0; padding-bottom: 1em; }
  .intro .claim, .intro .contactline { position: static; margin: 1em 0; }
  .intro-image { width: 100%; min-width: 0; margin: 0 0 1em; }

  .side-panel {
    position: static; width: 100%; right: auto; border-left: 0;
    display: none;
  }
  .side-panel.is-open { display: block; }

  .content-nav li { padding: 0 12px 0 16px; }
  .item-title { margin-right: 0; }
  .item-cat { position: static; margin-top: .2em; opacity: .7; }
}
@media (max-width: 480px) {
  .logo { width: 150px; margin-top: 15px; }
  .content-nav ul { margin: .3em 0; }
  .filters li { font-size: .9em; }
}

@media print {
  .site-header, .site-footer, .content-nav, .side-panel, .nav-toggle { display: none !important; }
  .content { margin-top: 0; }
  .item-content { display: block !important; }
}