/*
███████████████████████████████████████████████████████████████████████████████████████████████
    FontAwesome
███████████████████████████████████████████████████████████████████████████████████████████████
*/
@import 'fontawesome/solid.min.css';

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Schriften (Roboto, lokal)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v20-latin-300.woff2') format('woff2'),
       url('../fonts/roboto-v20-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'),
       url('../fonts/roboto-v20-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v20-latin-700.woff2') format('woff2'),
       url('../fonts/roboto-v20-latin-700.woff') format('woff');
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Design Tokens
███████████████████████████████████████████████████████████████████████████████████████████████
*/
:root {
  /* Markenprimär: Tiefblau */
  --brand:         #0e4a82;
  --brand-dark:    #083660;
  --brand-light:   #1a6fbb;
  --brand-xlight:  #ddeef8;

  /* CTA – Orange gibt Kontrast zu Blau */
  --cta:           #c85d00;
  --cta-hov:       #a84c00;
  --cta-light:     #fff3ec;

  /* Oberflächen */
  --bg:            #ffffff;
  --bg-2:          #f4f7fa;
  --bg-3:          #e8edf3;
  --dark-bg:       #0d1117;
  --dark-bg-2:     #161c26;

  /* Text */
  --text:          #1a2332;
  --text-muted:    #5a6a7e;
  --text-light:    #8fa0b4;
  --text-on-dark:  #dde6f0;
  --text-on-dark-2:#8fa8c4;

  /* Rahmen */
  --border:        #dce4ee;
  --border-dark:   #2a3a50;

  /* Radius */
  --r:             5px;
  --r-lg:          10px;

  /* Schatten */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.18);

  /* Abstände */
  --nav-h:         70px;
  --section-pad:   3.5em;
  --inner-pad:     3%;

  /* Übergänge */
  --t:             180ms ease;
  --t-slow:        320ms ease;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Reset (Eric Meyer)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font: inherit; vertical-align: baseline;
}
header, section, footer, aside, nav, main, article, figure { display: block; }
body  { line-height: 1; }
ol, ul { list-style: none; }
ol li  { list-style: decimal; }
table  { border-collapse: collapse; border-spacing: 0; }

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Basis
███████████████████████████████████████████████████████████████████████████████████████████████
*/
html {
  font-size: 17px;
  scroll-behavior: smooth;
  min-height: 100%;
}
body {
  font-size: 100%;
  background: var(--bg);
}
body, body * {
  box-sizing: border-box;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  line-height: 1.65em;
  background-repeat: no-repeat;
  font-weight: 300;
}

/* Skalierung */
@media (max-width: 1200px) { html { font-size: 16.5px; } }
@media (max-width: 1000px) { html { font-size: 16px; } }
@media (max-width: 750px)  { html { font-size: 15.5px; } }
@media (max-width: 500px)  { html { font-size: 15px; } }

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Typografie
███████████████████████████████████████████████████████████████████████████████████████████████
*/
h1, h2, h3, h4 {
  display: block; clear: both; float: none; overflow: visible;
  color: var(--brand-dark);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}
h1 {
  font-size: 2.4em;
  font-weight: 300;
  margin-top: 1.2em;
  margin-bottom: .6em;
  color: var(--brand);
  letter-spacing: -0.03em;
}
h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: .6em;
  padding-left: .7em;
  border-left: 4px solid var(--brand);
}
h1 + h2 { margin-top: .4em; }
h3 {
  font-size: 1.05em;
  font-weight: 700;
  margin-top: 1.6em;
  margin-bottom: .4em;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .06em;
}
h2 + h3 { margin-top: .5em; }
h4 {
  font-size: .95em;
  font-weight: 700;
  margin-top: 1.4em;
  margin-bottom: .25em;
  color: var(--text);
}
p, table { margin-bottom: 1.4em; }
strong, .bold { font-weight: 700; }
em { font-style: italic; }

.center { text-align: center; }
.center > * { display: inline-block; }
.clear { clear: both; float: none; }

@media (max-width: 1000px) {
  h1 { font-size: 1.9em; }
  h2 { font-size: 1.3em; }
}
@media (max-width: 600px) {
  h1 { font-size: 1.6em; }
  h2 { font-size: 1.2em; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Layout
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.inner {
  width: 100%;
  padding: 0 var(--inner-pad);
  margin: 0 auto;
  overflow: auto;
}
.clc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-left: -1%;
  margin-right: -1%;
}
.clc.vcenter { align-items: center; }
.clc + .clc  { margin-top: 1.5em; }
.clc .col    { flex-grow: 0; flex-shrink: 1; margin: 1%; }

.clc .one_third   { width: 31.33%; }
.clc .two_thirds  { width: 64.67%; }
.clc .one_quarter { width: 23%; }
.clc .one_half    { width: 48%; }
.clc .one_fifth   { width: 18%; }

.clc .col > h1:first-of-type,
.clc .col > h2:first-of-type,
.clc .col > h3:first-of-type { margin-top: 0; }

@media (max-width: 1000px) {
  .clc .one_half    { width: 100%; }
  .clc .one_half .one_half { width: 48%; }
  .clc .one_third,
  .clc .two_thirds  { width: 100%; margin-top: 2%; margin-bottom: 2%; }
}
@media (max-width: 730px) {
  .clc .one_half .one_half { width: 100%; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Topline
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#header .topline {
  background-color: var(--dark-bg-2);
  font-size: .8em;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--border-dark);
}
#header .topline * {
  color: var(--text-on-dark-2);
  font-size: inherit;
  font-weight: inherit;
}
#header .topline a {
  text-decoration: none;
  transition: color var(--t);
}
#header .topline a:hover { color: var(--text-on-dark); }

.topline-left,
.topline-right {
  display: flex;
  align-items: center;
  gap: 0;
}
.topline-left > *,
.topline-right > * {
  padding: .55em 1em;
}
.topline-left .address_con {
  border-right: 1px solid var(--border-dark);
}
.topline-right .telephone_con {
  border-right: 1px solid var(--border-dark);
}
.topline-right .telephone_con .telephone::before {
  content: '\f095';
  font-family: 'Font Awesome 5 Free';
  display: inline-block;
  margin-right: .4em;
  opacity: .5;
}
.topline-right .topline_menu_con ul {
  display: flex;
  gap: 0;
  margin: 0;
}
.topline-right .topline_menu_con ul li a {
  display: block;
  padding: .55em .9em;
  text-decoration: none;
  transition: color var(--t), background-color var(--t);
}
.topline-right .topline_menu_con ul li a:hover {
  color: var(--text-on-dark);
  background-color: rgba(255,255,255,.05);
}

@media (max-width: 900px) {
  #header .topline { display: none; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Haupt-Navigation
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#navi_con {
  background-color: var(--dark-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
}

#nav_overlay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--inner-pad);
  height: var(--nav-h);
  position: relative;
}

/* Logo in der Nav */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  opacity: .95;
  transition: opacity var(--t);
  z-index: 2;
}
.nav-logo:hover { opacity: 1; }
.nav-logo img {
  height: 44px;
  width: auto;
  display: block;
  /* Weißes Logo auf dunklem Hintergrund */
  filter: brightness(0) invert(1);
}

/* Nav-Items */
#navi {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  margin: 0;
}
#navi * { text-decoration: none; }

#navi ul {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 0;
}
#navi ul li {
  display: block;
  position: relative;
}
#navi ul li.home { display: none; }

#navi ul li a {
  display: block;
  padding: 0 1.1em;
  height: var(--nav-h);
  line-height: var(--nav-h);
  color: var(--text-on-dark-2);
  font-size: .88em;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t), background-color var(--t);
  position: relative;
}
#navi ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.1em;
  right: 1.1em;
  height: 3px;
  background-color: var(--brand-light);
  transform: scaleX(0);
  transition: transform var(--t);
  border-radius: 2px 2px 0 0;
}
#navi ul li a:hover { color: #fff; }
#navi ul li a:hover::after { transform: scaleX(1); }

#navi ul li.active a {
  color: #fff;
}
#navi ul li.active a::after { transform: scaleX(1); }

/* Untermenü */
#navi ul li .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--dark-bg-2);
  border: 1px solid var(--border-dark);
  border-top: 3px solid var(--brand-light);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--r) var(--r);
  padding: .4em 0;
  z-index: 10;
}
#navi ul li:hover .submenu { display: block; }
#navi ul li .submenu li { display: block; }
#navi ul li .submenu a {
  height: auto;
  line-height: 1.4em;
  padding: .6em 1.2em;
  color: var(--text-on-dark-2);
  font-size: .9em;
  text-transform: none;
  letter-spacing: 0;
}
#navi ul li .submenu a::after { display: none; }
#navi ul li .submenu a:hover {
  color: #fff;
  background-color: var(--brand);
}

/* Burger-Button */
#nav_toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r);
  cursor: pointer;
  padding: .5em .8em;
  color: var(--text-on-dark-2);
  transition: all var(--t);
  z-index: 2;
}
#nav_toggle * { color: inherit; font-size: inherit; }
#nav_toggle::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c9";
  font-size: 1.3em;
  display: block;
}
#nav_toggle:hover {
  background-color: rgba(255,255,255,.08);
  color: #fff;
}
#nav_toggle span { display: none; }

@media (max-width: 1100px) {
  #nav_toggle { display: block; }
  #navi {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background-color: var(--dark-bg);
    border-top: 1px solid var(--border-dark);
    flex-direction: column;
    align-items: stretch;
    padding: .5em 0 1em;
    box-shadow: var(--shadow-lg);
  }
  #navi ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #navi ul li.home { display: block; }
  #navi ul li a {
    height: auto;
    line-height: 1.4em;
    padding: .8em 1.5em;
    text-transform: none;
    letter-spacing: .02em;
    font-size: .95em;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  #navi ul li a::after { display: none; }
  #navi ul li.active a { background-color: rgba(255,255,255,.06); }
  #navi ul li .submenu {
    position: static;
    border: none;
    border-top: none;
    background-color: rgba(255,255,255,.04);
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  #navi ul li:hover .submenu { display: block; }
  #navi ul li .submenu a { padding-left: 2.5em; }
}

/* Offenes Menü (navopen via JS) */
#nav_overlay.navopen #navi { display: flex; }
#nav_overlay.navopen #nav_toggle::before { content: "\f00d"; }

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Hero / Header-Bild
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.header_pic {
  position: relative;
  padding-top: 38%;
  background-color: #2a3a4a;
  overflow: hidden;
}
.header_pic .left,
.header_pic .right {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
}
.header_pic .left  { left: 0;  background-image: url('../bilder/trulaser-tube-7000.jpg'); }
.header_pic .right { right: 0; background-image: url('../bilder/blm-lasertube-lt8.10-fiber.jpg'); }

/* Gradient-Overlay über beide Bilder */
.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,17,23,.6) 0%, transparent 30%, transparent 60%, rgba(13,17,23,.75) 100%),
    linear-gradient(to right, transparent 48%, rgba(13,17,23,.6) 50%, transparent 52%);
  pointer-events: none;
}

/* Bildunterschriften */
.header_pic .left span,
.header_pic .right span {
  position: absolute;
  bottom: 1.2em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(255,255,255,.7);
  font-size: .72em;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.header_pic .right span {
  left: auto;
  right: 0;
  transform: none;
}

@media (max-width: 1100px) {
  .header_pic { padding-top: 45%; }
}
@media (max-width: 700px) {
  .header_pic { padding-top: 55%; }
  .header_pic .left span,
  .header_pic .right span { display: none; }
}
@media (max-width: 480px) {
  .header_pic { padding-top: 65%; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Button
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.button {
  display: inline-block;
  padding: .75em 1.8em;
  background-color: var(--cta);
  color: #fff;
  font-size: .9em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  line-height: 1.3em;
  clear: both;
  margin: 0;
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
  box-shadow: 0 2px 8px rgba(200,93,0,.3);
}
.button:hover {
  background-color: var(--cta-hov);
  box-shadow: 0 4px 16px rgba(200,93,0,.4);
  transform: translateY(-1px);
}
.button:active { transform: translateY(0); }

#content .button {
  font-size: .85em;
  padding: .65em 1.3em;
}
@media (max-width: 500px) {
  .button { padding: .65em 1.2em; text-transform: none; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Content-Bereich
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#content {
  padding-top: 0;
  padding-bottom: var(--section-pad);
  background-color: var(--bg);
}
.home #content { padding-bottom: 0; }

/* Erster h1 bekommt etwas Raum nach oben */
#content > h1:first-child,
#content > *:first-child h1:first-child {
  margin-top: 1.4em;
}

#content p { line-height: 1.7em; }
#content .ux.muchtext p { text-align: justify; }

#content .halfing {
  display: block;
  overflow: auto;
  margin-bottom: 2em;
}
#content .halfing .left  { float: left;  width: 49%; }
#content .halfing .right { float: right; width: 49%; }

#content hr {
  border: none;
  height: 1px;
  background-color: var(--border);
  margin: 3em 0;
}

/* Listen */
#content ul {
  margin-left: 2.8em;
  list-style: none !important;
}
#content ul li {
  line-height: 1.65em;
  margin-top: .65em;
  position: relative;
}
#content ul li::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  background-color: var(--brand);
  border-radius: 50%;
  position: absolute;
  left: -1.6em;
  top: .55em;
  opacity: .7;
}
#content ul li ul { margin-left: 1.5em; }
#content ul li ul li::before {
  width: 5px;
  height: 5px;
  background-color: var(--text-muted);
  top: .6em;
}
#content ol { margin-left: 3em; }
#content ol li { margin-top: .6em; }

#content p, #content table, #content ol, #content ul {
  margin-bottom: 1.3em;
}
#content p { overflow: auto; }

/* Links */
#content a:not(.button) {
  color: var(--brand-light);
  text-decoration: underline;
  text-decoration-color: rgba(26,111,187,.3);
  transition: color var(--t), text-decoration-color var(--t);
}
#content a:not(.button):hover {
  color: var(--brand);
  text-decoration-color: var(--brand);
}

/* Bilder */
#content img { max-width: 100%; border-radius: var(--r); }
#content img.right {
  float: right;
  margin: 0 0 1em 2em;
  max-width: 48%;
  box-shadow: var(--shadow-sm);
}
#content img.left {
  float: left;
  margin: 0 2em 1em 0;
  max-width: 48%;
  box-shadow: var(--shadow-sm);
}
#content figure { max-width: 100%; }
#content figure img { max-width: 100%; }
#content figure figcaption {
  margin-top: .4em;
  font-style: italic;
  color: var(--text-muted);
  font-size: .85em;
}
#content strong { font-weight: 700; }

/* Tabellen */
#content table { margin-top: .6em; }
#content table tr th {
  font-weight: 700;
  background-color: var(--brand);
  color: #fff;
  text-align: left;
}
#content table tr th,
#content table tr td {
  padding: .65em .9em;
  border: 1px solid var(--border);
}
#content table tr:hover td { background-color: var(--bg-2); }
#content table tr:nth-child(even) td { background-color: var(--bg-2); }
#content table tr:nth-child(even):hover td { background-color: var(--bg-3); }

@media (max-width: 1000px) {
  #content { padding-bottom: 2.5em; }
  #content .ux.muchtext p { text-align: left; }
}
@media (max-width: 700px) {
  #content img.left, #content img.right {
    float: none; margin: 0 0 1em 0;
    max-width: 100%;
  }
  #content ul { margin-left: 1.8em; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Homepage – Zitat / Intro
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.cite {
  font-size: 1.4em;
  font-weight: 300;
  font-style: italic;
  color: var(--brand);
  line-height: 1.5em;
  position: relative;
  padding: .6em 0 .6em 1.2em;
  border-left: 4px solid var(--brand);
  margin-bottom: .4em;
}
.cite_source {
  font-size: .8em;
  color: var(--text-muted);
  padding-left: 1.2em;
  margin-top: .3em;
}
body.home #content {
  padding-bottom: var(--section-pad);
}
body.home #content p { text-align: justify; }

@media (max-width: 1000px) {
  .cite { font-size: 1.2em; padding-left: 1em; }
}
@media (max-width: 650px) {
  body.home #content p { text-align: left; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Über-uns
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.ueber-uns #content p { text-align: justify; }
@media (max-width: 800px) {
  .ueber-uns #content p { text-align: left; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Galerie / Referenzen
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.gallery { overflow: auto; }
.gallery .picture_list { display: block; overflow: auto; }
.gallery .picture_list a {
  display: block;
  position: relative;
  float: left;
  margin-right: 1.5%;
  margin-bottom: 1.5%;
  line-height: 0;
  cursor: zoom-in;
  outline: none;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.gallery.per_row_4 .picture_list a { margin-right: .8%; margin-bottom: .8%; }
.gallery.per_row_2 .picture_list a { width: 49%; }
.gallery.per_row_3 .picture_list a { width: 32%; }
.gallery.per_row_4 .picture_list a { width: 24.2%; }

.gallery.per_row_2 .picture_list a:nth-of-type(2n+0) { margin-right: 0; }
.gallery.per_row_3 .picture_list a:nth-of-type(3n+0) { margin-right: 0; }
.gallery.per_row_4 .picture_list a:nth-of-type(4n+0) { margin-right: 0; }

.gallery a img {
  width: 100%; height: auto; display: block;
  transition: transform var(--t-slow), filter var(--t-slow);
}
.gallery a:hover img {
  transform: scale(1.06);
  filter: brightness(.85) saturate(1.2);
}
.gallery .picture_list a div {
  position: absolute; bottom: 0; width: 100%;
  background: linear-gradient(transparent, rgba(10,20,40,.85));
  padding: 1.5em .6em .45em;
  line-height: 1.3em;
  color: #fff;
  transition: background var(--t);
}
.gallery .picture_list a:hover div {
  background: linear-gradient(transparent, rgba(14,74,130,.92));
}

@media (max-width: 800px) {
  .gallery.per_row_3 .picture_list a { width: 49%; }
  .gallery.per_row_3 .picture_list a:nth-of-type(3n+0) { margin-right: 1.5%; }
  .gallery.per_row_3 .picture_list a:nth-of-type(2n+0) { margin-right: 0; }
}
@media (max-width: 400px) {
  .gallery .picture_list a { width: 100% !important; margin-right: 0 !important; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Timeline
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#timeline_con {
  padding: 1.5em 1em;
  font-size: .95em;
}
#timeline_con .timeline {
  position: relative;
  overflow: auto;
  font-weight: 300;
  color: #fff;
}
#timeline_con .timeline * { font-weight: inherit; color: inherit !important; }
#timeline_con .timeline:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 3px;
  left: 0;
  background: linear-gradient(to bottom, var(--brand-light), var(--brand-dark));
  border-radius: 2px;
}
#timeline_con .timeline ul {
  list-style: none;
  padding: 1em 0 0 1.5em;
  z-index: 1;
  margin-left: .5em;
}
#timeline_con .timeline li {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding: 1em 1.2em;
  margin-bottom: 1.2em;
  position: relative;
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-md);
}
#timeline_con .timeline li:before {
  content: '';
  width: 0; height: 0;
  border-top: .85em solid var(--brand);
  border-left: .85em solid transparent;
  position: absolute;
  left: .85em; top: 0;
}
#timeline_con .timeline .year {
  display: block;
  font-size: 1.1em;
  font-weight: 700;
  margin-bottom: .4em;
  opacity: .9;
}
#timeline_con .timeline p { margin: .3em 0 0; opacity: .85; }

@media screen and (min-width: 40em) {
  #timeline_con { margin: 0 auto; }
  #timeline_con .timeline:before { left: 50%; }
  #timeline_con .timeline ul { padding-left: 0; margin: 0 auto; }
  #timeline_con .timeline li { width: 45%; }
  #timeline_con .timeline li:nth-child(even) {
    float: right;
    margin-top: 2em;
    border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg);
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--dark-bg-2) 100%);
  }
  #timeline_con .timeline li:nth-child(even):before {
    border-top-color: var(--brand-dark);
    border-right: .85em solid transparent;
    border-left: none;
    right: .85em; left: auto;
  }
  #timeline_con .timeline li:nth-child(odd) {
    float: left;
    border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  }
  #timeline_con .timeline li:nth-child(odd):before {
    border-top-color: var(--brand);
  }
  #timeline_con .timeline li:nth-of-type(2n+1) { clear: both; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Kontaktbox
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#contact_box {
  display: inline-block;
  margin: 1.5rem auto;
  padding: 1.6em 2.2em;
  background-color: var(--bg-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  box-shadow: var(--shadow-sm);
  line-height: 1.8em;
}
#contact_box .email {
  display: inline-block;
  margin-top: .6em;
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Kontakttabelle (Durchwahlen)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#tel_tabel {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
#tel_tabel * { text-align: inherit; }
#tel_tabel td {
  line-height: 1.25em;
  vertical-align: middle;
  border-color: var(--border) !important;
}
#tel_tabel td:not(.spacer) { background-color: #fff; }
#tel_tabel .center { text-align: center; }
#tel_tabel .main_tel_num {
  font-size: 1.6em;
  font-weight: 300;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
  letter-spacing: .04em;
  padding: .9em !important;
}
#tel_tabel .heading {
  font-weight: 700;
  color: var(--brand);
  background-color: var(--bg-2) !important;
  font-size: .9em;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#tel_tabel .suffix {
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
}
#tel_tabel .spacer {
  padding-bottom: .3em;
  border-left: none;
  border-right: none;
  background-color: var(--bg-2) !important;
}
#tel_tabel tr:hover td:not(.spacer) { background-color: var(--brand-xlight) !important; }

@media (max-width: 400px) {
  #tel_tabel { font-size: .85em; }
  #tel_tabel tr td { padding: .4em !important; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    News / Aktuelles
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#no_news { display: block; margin-bottom: 8em; }

.newsblock {
  margin: 0 0 2.5rem;
  padding: 2rem 2rem 1rem;
  background-color: var(--bg-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
}
.newsblock p { overflow: unset !important; }
.newsblock a.fancybox { outline: none; }
.newsblock a.fancybox img { max-width: 55% !important; }
.newsblock a.fancybox img[style*="float:left"]  { margin: 0 2em 2em 0; }
.newsblock a.fancybox img[style*="float:right"] { margin: 0 0 2em 2em; }
.newsblock .news_date {
  display: block;
  float: none; clear: both;
  margin-top: .5em;
  font-size: .78em;
  text-align: right;
  color: var(--text-light);
  font-style: italic;
}
@media (max-width: 600px) {
  .newsblock { padding: 1.2rem 1rem; }
  .newsblock a.fancybox { display: inline-block; overflow: visible; line-height: 0; }
  .newsblock a.fancybox img {
    float: none !important; clear: both;
    max-width: 100% !important; margin: 0 !important;
  }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Kontaktformular
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#form_container {
  width: 100%;
  max-width: 600px;
  clear: both;
  margin: 0 auto;
  background-color: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2em;
  box-shadow: var(--shadow-sm);
}
#contact_form form .label {
  display: block;
  font-size: .78em;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .3em;
}
#contact_form form input[type=text],
#contact_form form textarea,
#contact_form form select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: .55em .8em;
  font-size: .9em;
  line-height: 1.3em;
  color: var(--text);
  background-color: #fff;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  margin-top: .1em;
  margin-bottom: .9em;
}
#contact_form form input[type=text]:focus,
#contact_form form textarea:focus,
#contact_form form select:focus {
  border-color: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(26,111,187,.12);
}
#contact_form form textarea { height: 3.5em; }
.kontakt #contact_form form textarea { height: 7em; }
#contact_form form .right { text-align: right; }
#contact_form form input[type=submit] { margin-top: .5em; }
#contact_form form select option {
  font-size: 1em;
  font-weight: 400;
  color: var(--text-muted);
}
#contact_form form .errormsg {
  font-style: italic;
  color: #c0392b;
  font-size: .75em;
  margin-top: -.6em;
  margin-bottom: 1em;
}
#contact_form form .mailingmsg {
  font-size: 1.8em;
  font-weight: 300;
  margin-top: 1em;
}
#contact_form form .mailingmsg.success { color: #27ae60; }
#contact_form form .mailingmsg.fail    { color: #c0392b; }

#contact_form .consent_con {
  margin-top: .5em;
  font-size: .88em;
}
#contact_form .consent_con .errormsg { margin-top: .5em; }
#contact_form .consent_con input[type=checkbox] {
  float: left;
  height: 1.1em; width: 1.1em;
  margin: .2em .5em 0 0;
  accent-color: var(--brand);
}
#contact_form .consent_con .consent_text {
  font-size: .82em;
  text-align: justify;
}
#contact_form .consent_con .consent_text * { font-size: inherit; }
#contact_form .consent_con .consent_text a { white-space: nowrap; }

@media (max-width: 650px) {
  #form_container { padding: 1.2em; }
  #contact_form form textarea { height: 5em; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Google Maps on Demand
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.gmod {
  width: 100%;
  height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 1.5em;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gmod .bg_map {
  position: absolute;
  top: -1%; left: -1%;
  height: 102%; width: 102%;
  background-image: url('../bilder/gmod-bg.png');
  background-repeat: repeat;
  background-position: 0 0;
  filter: blur(.05rem);
}
.gmod .opt_in_banner {
  background-color: rgba(13,17,23,.82);
  color: #fff;
  padding: 2em;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: .9em;
  border-radius: var(--r-lg);
  margin: 0 4em;
  box-shadow: var(--shadow-lg);
}
.gmod .opt_in_banner .desc {
  color: var(--text-on-dark-2);
  text-align: center;
  margin-bottom: 1.2em;
  line-height: 1.5em;
}
.gmod .opt_in_banner .desc a { color: inherit !important; opacity: .8; }
.gmod .opt_in_banner .show_map_btn {
  display: inline-block;
  padding: .7em 1.6em;
  margin-bottom: .9em;
  background-color: var(--cta);
  color: #fff;
  border: none;
  font-size: .95em;
  font-weight: 700;
  line-height: 1.2em;
  cursor: pointer;
  border-radius: var(--r);
  transition: background-color var(--t);
  box-shadow: 0 2px 8px rgba(200,93,0,.4);
}
.gmod .opt_in_banner .show_map_btn:hover { background-color: var(--cta-hov); }

@media (max-width: 600px) {
  .gmod .opt_in_banner { margin: 0 1em; padding: 1.2em; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Footer
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#footer {
  background-color: var(--dark-bg);
  color: var(--text-on-dark-2);
  text-align: center;
  padding: 2.5em var(--inner-pad);
  font-size: .9em;
  font-weight: 300;
  letter-spacing: .04em;
  margin-top: 0;
  border-top: none;
  overflow: auto;
}
#footer * {
  color: inherit;
  line-height: 1.6em;
  font-size: inherit;
  font-weight: inherit;
  background: none;
}

@media (max-width: 600px) {
  #footer { font-size: .85em; padding: 2em 1.5em; }
}

/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Fancybox / Magnific-Popup Anpassungen
███████████████████████████████████████████████████████████████████████████████████████████████
*/
a.fancybox { cursor: zoom-in; }
a.fancybox img[style*="float:left"],
a.fancybox img[style*="float: left"]  { margin: 0 2% 1% 0; }
a.fancybox img[style*="float:right"],
a.fancybox img[style*="float: right"] { margin: 0 0 1% 2%; }