/* Devoss GmbH – Nachbau des WordPress-Themes „devoss2012“ (Skin dark/white).
   Maße und Farben stammen aus dem Original (pk_style.css, pk_skin_dark_white.css).
   Ab 980 px Breite wie live; darunter eine Handy-Ansicht (live gab es keine). */

:root {
  --text: #d9ddeb;
  --weiss: #ffffff;
  --grund: #202327;
  --menue: #afb3be;
  --linie: #464b54;
  --ueberlagerung: #1a252d;
  --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li, img, header, footer, nav, main, aside {
  margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  font: 14px/24px var(--schrift);
  color: var(--text);
  background: var(--grund) url("../img/struktur.jpg") 0 0;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--weiss); text-decoration: none; outline: 0; }
a:hover { color: var(--text); }
a:focus-visible, button:focus-visible { outline: 1px dotted var(--weiss); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; font-weight: normal; color: var(--weiss); }
h1 { font-size: 38px; line-height: 43px; }
h2 { font-size: 32px; line-height: 37px; }
h3 { font-size: 26px; line-height: 32px; }
h4 { font-size: 20px; line-height: 27px; }
h5 { font-size: 16px; line-height: 24px; }
h6 { font-size: 13px; }
p, ul { margin-bottom: 20px; }
strong { font-weight: bold; }
ul { margin-left: 10px; list-style: disc outside; }
ul li { margin-left: 5px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: 8px 14px; background: var(--grund); color: var(--weiss);
}
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Hintergrundbild mit Abdunkelung ---------- */
#pk_page_back_ground { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
#pk_page_back_ground img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  animation: einblenden .3s ease-out both;
}
#pk_page_back_ground_overlay {
  position: absolute; inset: 0; z-index: 1;
  background: var(--ueberlagerung); opacity: .7;
  transition: opacity .4s;
}
/* Deckkraft der Abdunkelung je Seite wie live (overlayAlpha) */
.dunkel-50 #pk_page_back_ground_overlay { opacity: .5; }
.dunkel-70 #pk_page_back_ground_overlay { opacity: .7; }
.dunkel-75 #pk_page_back_ground_overlay { opacity: .75; }
.dunkel-80 #pk_page_back_ground_overlay { opacity: .8; }
.dunkel-85 #pk_page_back_ground_overlay { opacity: .85; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* „Auge“: Inhalt ausblenden und nur das Foto zeigen */
#pk_show_back_ground {
  position: fixed; top: 60px; right: 30px; z-index: 400;
  width: 30px; height: 32px; padding: 0; border: 0; cursor: pointer;
  background: transparent url("../img/auge.png") no-repeat 0 0;
}
#pk_show_back_ground:hover { background-position: -35px 0; }
body.nur-foto #pk_wrapper, body.nur-foto #pk_show_back_ground { display: none; }
body.nur-foto #pk_page_back_ground { cursor: pointer; }
body.nur-foto #pk_page_back_ground_overlay { opacity: 0; }
#pk_alert {
  position: fixed; top: 50%; left: 50%; z-index: 500; transform: translate(-50%, -50%);
  border: 0; padding-top: 0; padding-bottom: 0; font-family: inherit;
  transition: opacity .6s;
}
#pk_alert.weg { opacity: 0; }

/* ---------- Gerüst ---------- */
#pk_wrapper { position: relative; z-index: 2; }

#pk_navigation {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 500;
  width: 210px;
}
#pk_navigation_contents { position: relative; width: 210px; height: 100%; }
.pk_logo { display: block; width: 210px; height: 160px; }
.pk_logo img { width: 123px; height: 145px; }
.nav-toggle { display: none; }

nav { margin: 60px 0 60px; }
nav ul { margin: 0; padding: 0; font-size: 14px; line-height: 28px; list-style: none; }
nav ul li { position: relative; margin: 0; padding: 0; transition: padding .4s, margin .4s; }
nav ul a { position: relative; display: block; padding-left: 40px; color: var(--menue); }
nav ul a:hover, nav ul li:hover > a { color: var(--weiss); }
nav > ul > .current-menu-item > a, nav > ul > .current-menu-ancestor > a { color: var(--weiss); font-weight: bold; }

/* Untermenü klappt wie im Original rechts neben dem Punkt auf, ohne Hintergrund */
nav ul ul {
  position: absolute; top: -1px; left: 159px; z-index: 1000;
  width: 210px; padding: 15px 0; margin: 0;
  visibility: hidden; opacity: 0; transition: opacity .4s, visibility 0s .4s;
}
nav ul ul li { width: 210px; }
nav ul ul a { padding-left: 20px; color: var(--menue); font-weight: normal; }
nav ul ul .current-menu-item > a { color: #d6d6d6; }
nav ul ul a:hover { color: var(--weiss); }
nav ul li.offen { padding: 10px 0; margin: -5px 0 -7px; }
nav ul li.offen > ul { visibility: visible; opacity: 1; transition: opacity .4s, visibility 0s; }

#pk_navigation footer {
  position: absolute; left: 0; bottom: 40px;
  width: 209px; padding: 0 20px 0 40px; color: #caccd2;
}
.pk_copyright { margin: 0; font-size: 10px; line-height: 16px; }

#pk_page { position: relative; margin-left: 210px; overflow: hidden; }
#pk_page_content { width: 770px; margin: 0 auto; overflow: hidden; }
.pk_inner { width: 690px; margin: 60px 40px 40px; overflow: hidden; }

#pk_intro { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 2px solid var(--weiss); }
#pk_intro h1 { margin: 0; }
#pk_intro p { margin: 5px 0 0; font-size: 16px; font-weight: 300; color: #cfcfcf; }

.pk_right_sidebar #pk_main { float: left; width: 470px; }
.pk_right_sidebar #pk_sidebar { float: right; width: 200px; }
.pk_right_sidebar .pk_widget { padding-left: 20px; }
#pk_sidebar .pk_widget { margin-bottom: 45px; }

/* Listen der Seitenleiste mit kleinem Pfeil */
.pk_underline_list, .pk_underline_list ul { margin: 0 0 20px; list-style: none; }
.pk_underline_list ul { margin: 0 0 0 15px; }
.pk_underline_list li { margin: 0; padding: 0; background: url("../img/pfeil.png") no-repeat 0 1px; }
.pk_underline_list a { display: block; padding: 3px 0 3px 13px; }

/* ---------- Bausteine aus dem Theme ---------- */
.pk_basic_box {
  display: block; float: left; clear: both; width: 100%;
  margin: 3px 0 5px; background: rgba(255, 255, 255, .1); color: var(--text);
}
.pk_basic_box:hover { color: var(--text); background: rgba(255, 255, 255, .14); }
.pk_basic_box_content { padding: 20px 25px; border: 1px solid #eaeaea; }
.pk_basic_box_content p { margin: 0; }
#pk_main::after { content: ""; display: table; clear: both; }

.pk_one_third, .pk_two_third, .pk_one_fourth { position: relative; float: left; margin-right: 3.9%; }
.pk_one_third { width: 30.6%; }
.pk_two_third { width: 65.3%; }
.pk_one_fourth { width: 22%; }
.pk_last { margin-right: 0; }
.pk_clear_both { display: block; clear: both; width: 100%; height: 0; }
.pk_empty_space { display: block; clear: both; height: 20px; }

/* Meilensteine: Jahr links, Text rechts (Spalten 1/6 und 5/6 wie im Original) */
.pk_milestone { display: grid; grid-template-columns: 13.3% 82.6%; column-gap: 3.9%; }

.pk_divider { clear: both; display: block; height: 10px; margin: 0 0 20px; }
.pk_divider hr { height: 1px; margin: 0; border: 0; border-top: 1px solid var(--linie); }
.pk_text_icon { padding-left: 20px; }
.pk_download_icon { background: url("../img/download.png") no-repeat 0 2px; }
.pk_alignnone::after { content: ""; display: table; clear: both; }

/* Knöpfe (Bildkanten aus dem Theme) */
.pk_button_big, .pk_button_medium {
  display: block; float: left; margin-bottom: 10px; white-space: nowrap; cursor: pointer;
  background: transparent no-repeat 0 0;
}
.pk_button_big span, .pk_button_medium span {
  display: block; float: left; color: #606060; background: transparent no-repeat right 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .33);
}
.pk_button_big { padding-left: 25px; height: 52px; font-size: 18px; background-image: url("../img/knopf_gross_links.png"); }
.pk_button_big span { padding-right: 25px; height: 52px; line-height: 48px; background-image: url("../img/knopf_gross_rechts.png"); }
.pk_button_big:hover { background-position: 0 -57px; }
.pk_button_big:hover span { color: #7c7c7c; background-position: right -57px; }
.pk_button_medium { padding-left: 20px; height: 42px; font-size: 14px; background-image: url("../img/knopf_mittel_links.png"); }
.pk_button_medium span { padding-right: 20px; height: 42px; line-height: 39px; background-image: url("../img/knopf_mittel_rechts.png"); }
.pk_button_medium:hover { background-position: 0 -47px; }
.pk_button_medium:hover span { color: #7c7c7c; background-position: right -47px; }

/* Niedriges Fenster: Navigation scrollt mit der Seite (wie im Original) */
@media (min-width: 980px) and (max-height: 560px) {
  #pk_navigation { position: absolute; bottom: auto; height: 560px; }
}

/* ---------- Mittlere Breiten: Inhalt rückt nach links, statt abgeschnitten zu werden ---------- */
@media (max-width: 1000px) and (min-width: 980px) {
  #pk_page_content { margin: 0; }
}

/* ---------- Handy und Tablet hochkant ---------- */
@media (max-width: 979px) {
  #pk_navigation {
    position: sticky; top: 0; bottom: auto; width: 100%; overflow: visible;
    background: rgba(32, 35, 39, .92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  #pk_navigation_contents { width: 100%; min-height: 0; padding: 0; }
  #pk_navigation header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; }
  .pk_logo { width: auto; height: auto; }
  .pk_logo img { width: 62px; height: 73px; margin: -10px 0 -10px -10px; }
  .nav-toggle {
    display: block; position: relative; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--linie); background: transparent; cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    position: absolute; left: 11px; width: 20px; height: 2px; background: var(--weiss); content: "";
    transition: transform .2s;
  }
  .nav-toggle span { top: 20px; }
  .nav-toggle span::before { left: 0; top: -6px; }
  .nav-toggle span::after { left: 0; top: 6px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

  nav { display: none; margin: 0; padding: 0 0 16px; }
  nav.open { display: block; }
  nav ul { font-size: 16px; line-height: 40px; }
  nav ul a { padding-left: 16px; }
  nav ul ul, nav ul li.offen > ul {
    position: static; width: auto; padding: 0 0 4px; visibility: visible; opacity: 1; transition: none;
  }
  nav ul ul li { width: auto; }
  nav ul ul a { padding-left: 36px; line-height: 34px; }
  nav ul li.offen { padding: 0; margin: 0; }
  #pk_navigation footer { display: none; }

  #pk_page { margin-left: 0; }
  #pk_page_content, .pk_inner { width: auto; }
  .pk_inner { margin: 32px 16px 40px; }
  h1, #pk_intro h1 { font-size: 30px; line-height: 36px; }
  h3 { font-size: 22px; line-height: 28px; }
  h4 { font-size: 18px; line-height: 25px; }
  #pk_intro { margin-bottom: 24px; padding-bottom: 24px; }
  #pk_main { overflow-wrap: break-word; }
  .pk_right_sidebar #pk_main, .pk_right_sidebar #pk_sidebar { float: none; width: auto; }
  .pk_right_sidebar #pk_sidebar { margin-top: 20px; padding-top: 30px; border-top: 1px solid var(--linie); }
  .pk_right_sidebar .pk_widget { padding-left: 0; }
  #pk_show_back_ground { top: auto; bottom: 20px; right: 16px; }
  .pk_basic_box_content { padding: 16px 18px; }
}

@media (max-width: 560px) {
  .pk_one_third, .pk_two_third { float: none; width: auto; margin-right: 0; }
  .pk_milestone { grid-template-columns: 1fr; }
  .pk_milestone h5 { margin-bottom: 4px; }
  .pk_milestone > div { margin-bottom: 20px; }
  /* anySAN-Porttabelle bleibt vierspaltig, nur enger */
  .pk_one_fourth { margin-right: 2%; width: 23.5%; font-size: 12px; }
  .pk_one_fourth.pk_last { margin-right: 0; }
}

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

@media print {
  #pk_page_back_ground, #pk_show_back_ground, #pk_navigation, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a, h1, h2, h3, h4, h5, h6 { color: #000; }
  #pk_page { margin: 0; }
  #pk_page_content, .pk_inner { width: auto; margin: 0; }
  #pk_intro { border-color: #000; }
  .pk_basic_box { background: none; color: #000; }
  .pk_basic_box_content { border-color: #999; }
}