/*
 * Magnetic Scrolls Memorial - Layout-Ergaenzungen zu Bulma 1.0
 * ---------------------------------------------------------------
 * Ersetzt GroundworkCSS. Enthaelt nur, was Bulma nicht abdeckt bzw. was noetig ist,
 * damit das historische Layout erhalten bleibt:
 *   - Grundtypografie und Links wie zuvor
 *   - Rasterbreiten, die Bulma nicht kennt (Zehntel, Achtel ...): .gw-col-<n>-<d>
 *   - Abstands-Helfer mit den alten Werten (10px/20px): .gw-p, .gw-pl ...
 *   - Komponenten .msm-box und .msm-message (vorher Groundwork .box/.message)
 *   - Animationen (bounceIn*)
 * Wird nach bulma.min.css und vor msm.css geladen.
 */

/* ---------- Schriften (vorher in Groundwork definiert) ---------- */
@font-face { font-family: source-sans-pro; font-style: normal; font-weight: 400;
  src: url(/fonts/sourcesanspro-regular-webfont.woff) format("woff"), url(/fonts/sourcesanspro-regular-webfont.ttf) format("truetype"); }

/* ---------- Grundlagen ---------- */
html { font-size: 14px; background: #fff; height: 100%; text-rendering: auto; -webkit-font-smoothing: auto; }
body { min-height: 100%; }
body { font-size: 14px; line-height: 1.5; color: #2b2b2d; font-family: Helvetica, Arial, Geneva, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: source-sans-pro, Helvetica, Arial, Geneva, sans-serif; margin-bottom: 15px; line-height: 1.3; font-weight: 400; }
h1 { font-size: 2.33333em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
h4 { font-size: 1.33333em; } h5 { font-size: 1.16667em; } h6 { font-size: 1.16667em; text-transform: uppercase; }
p, ul, ol, dl { margin-bottom: 10px; font-weight: 400; line-height: 1.5; }
ul, ol { margin-left: 20px; }
ul { list-style: disc outside; }
ol { list-style: decimal outside; }
ul ul { list-style-type: circle; }
.navbar ul, .navbar ol { margin: 0; list-style: none; }
a, a:visited { color: #489ac1; text-decoration: none; transition: color .25s; }
a:hover, a:focus { color: #198d98; text-decoration: underline; }
b, q, blockquote, strong { font-weight: 900; color: inherit; }
em, q { font-style: italic; }
small, .small, sup, sub { font-size: .8em; }
big, .large { font-size: 1.5em; }
sup, sub, blockquote { position: relative; }
hr { border: 0; border-bottom: 1px solid #ddd; margin: 10px auto; clear: both; background: none; height: 0; padding: 0; }
blockquote { padding: 1.3em 4em 1em; color: #2b2b2d; font-family: source-sans-pro, Helvetica, Arial, Geneva, sans-serif; font-size: 1.15em; background: #ddd; border-radius: 4px; }
blockquote:before { content: "\201C"; color: #aaa; font-size: 4em; display: block; position: absolute; top: -.2em; left: .1em; }
blockquote:after { content: "\201D"; color: #aaa; font-size: 4em; display: block; position: absolute; top: -.2em; right: .1em; }
table td, table th { vertical-align: baseline; }
pre, code { font-family: monospace; }
code { white-space: nowrap; background: #fff; color: #555; border: 1px solid #ddd; border-radius: 4px; padding: 0 5px; font-size: inherit; }

/* ---------- Symbole an Links (wie bei Groundwork: PDF, Download, extern, https ...) ---------- */
a:before, a:after { font-family: FontAwesome; font-weight: 400; font-style: normal; text-decoration: none; display: inline-block; width: auto; }
a:before { padding-right: .25em; }
a:after { padding-left: .25em; }
a:not(.noicon)[rel=home]:before,button:not(.noicon)[rel=home]:before{content:"\f015"}
a:not(.noicon)[rel=search]:before,button:not(.noicon)[rel=search]:before{content:"\f002"}
a:not(.noicon)[rel=author]:before,button:not(.noicon)[rel=author]:before{content:"\f007"}
a:not(.noicon)[rel=help]:before,button:not(.noicon)[rel=help]:before{content:"\f059"}
a:not(.noicon)[rel=tag]:before,button:not(.noicon)[rel=tag]:before{content:"\f02b"}
a:not(.noicon)[rel=bookmark]:before,button:not(.noicon)[rel=bookmark]:before{content:"\f02e"}
a:not(.noicon)[rel=prev]:before,a:not(.noicon)[rel=previous]:before,button:not(.noicon)[rel=prev]:before,button:not(.noicon)[rel=previous]:before{content:"\f0a8"}
a:not(.noicon)[rel=next]:after,button:not(.noicon)[rel=next]:after{content:"\f0a9"}
a:not(.noicon)[rel=directory]:after,button:not(.noicon)[rel=directory]:after{content:"\f115"}
a:not(.noicon)[rel=payment]:after,button:not(.noicon)[rel=payment]:after{content:"\f0d6"}
a:not(.noicon)[href^="#"]:not([href="#"]):after{content:"\f0c1"}
a:not(.noicon)[href^="https:"]:after{content:"\f023"}
a:not(.noicon)[target="_blank"]:after,a:not(.noicon)[rel=external]:after{content:"\f08e"}
a:not(.noicon)[href^="view-source:"]:after{content:"\f121"}
a:not(.noicon)[href^="mailto:"]:before{content:"\f0e0"}
a:not(.noicon)[href^="tel:"]:before{content:"\f098"}
a:not(.noicon)[href^="skype:"]:before{content:"\f17e"}
a:not(.noicon)[href$=".pdf"]:after{content:"\f016"}
a:not(.noicon)[href$=".doc"]:after{content:"\f15c"}
a:not(.noicon)[href$=".txt"]:after,a:not(.noicon)[href$=".md"]:after{content:"\f0f6"}
a:not(.noicon)[href$=".jpg"]:after,a:not(.noicon)[href$=".jpeg"]:after,a:not(.noicon)[href$=".png"]:after,a:not(.noicon)[href$=".gif"]:after,a:not(.noicon)[href$=".svg"]:after{content:"\f03e"}
a:not(.noicon)[href$=".exe"]:after{content:"\f0c7"}
a:not(.noicon)[href*=".zip"]:after,a:not(.noicon)[href*=".lha"]:after,a:not(.noicon)[href*=".tar"]:after,a:not(.noicon)[href*=".gz"]:after{content:"\f019"}
a:not(.noicon)[href$=".rss"]:before,a:not(.noicon)[href$="rss.xml"]:before,a:not(.noicon)[href*="/feed/"]:before,a:not(.noicon)[href*="/rss/"]:before{content:"\f143"}
a:not(.noicon)[href$=".rss"]:after,a:not(.noicon)[href$="rss.xml"]:after,a:not(.noicon)[href*="/feed/"]:after,a:not(.noicon)[href*="/rss/"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="twitter.com"]:before{content:"\f081"}
a:not(.noicon)[href*="twitter.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="pinterest.com"]:before{content:"\f0d3"}
a:not(.noicon)[href*="pinterest.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="facebook.com"]:before{content:"\f082"}
a:not(.noicon)[href*="facebook.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="linkedin.com"]:before{content:"\f08c"}
a:not(.noicon)[href*="linkedin.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="tumblr.com"]:before{content:"\f174"}
a:not(.noicon)[href*="tumblr.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="plus.google.com"]:before{content:"\f0d4"}
a:not(.noicon)[href*="plus.google.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="youtube.com"]:before,a:not(.noicon)[href*="youtu.be"]:before{content:"\f166"}
a:not(.noicon)[href*="youtube.com"]:after,a:not(.noicon)[href*="youtu.be"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="instagram.com"]:before{content:"\f16d"}
a:not(.noicon)[href*="instagram.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="flickr.com"]:before{content:"\f16e"}
a:not(.noicon)[href*="flickr.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="foursquare.com"]:before{content:"\f180"}
a:not(.noicon)[href*="foursquare.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="dribbble.com"]:before{content:"\f17d"}
a:not(.noicon)[href*="dribbble.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="dropbox.com"]:before{content:"\f16b"}
a:not(.noicon)[href*="dropbox.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="github.com"]:before{content:"\f092"}
a:not(.noicon)[href*="github.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="stackoverflow.com"]:before{content:"\f16c"}
a:not(.noicon)[href*="stackoverflow.com"]:after{content:"";padding-left:0}
a:not(.noicon)[href*="trello.com"]:before{content:"\f181"}
a:not(.noicon)[href*="trello.com"]:after{content:"";padding-left:0}

/* ---------- Raster ---------- */
.container { max-width: 1200px !important; margin-left: auto; margin-right: auto; }
.columns.is-gapless, .columns.is-gapless:last-child, .columns.is-gapless:not(:last-child) { margin: 0; }
.columns.is-multiline { flex-wrap: wrap; }
.gw-row { clear: both; width: 100%; }
.gw-row::after { content: ""; display: table; clear: both; }
.gw-block { display: block; }
.gw-centered { float: none !important; margin-left: auto !important; margin-right: auto !important; }
@media screen and (min-width: 769px), print {
  .column.gw-col-1-1{flex:none;width:100.00000%}
  .column.gw-col-1-2{flex:none;width:50.00000%}
  .column.gw-col-1-3{flex:none;width:33.33333%}
  .column.gw-col-2-3{flex:none;width:66.66667%}
  .column.gw-col-1-4{flex:none;width:25.00000%}
  .column.gw-col-3-4{flex:none;width:75.00000%}
  .column.gw-col-1-5{flex:none;width:20.00000%}
  .column.gw-col-2-5{flex:none;width:40.00000%}
  .column.gw-col-3-5{flex:none;width:60.00000%}
  .column.gw-col-4-5{flex:none;width:80.00000%}
  .column.gw-col-1-6{flex:none;width:16.66667%}
  .column.gw-col-5-6{flex:none;width:83.33333%}
  .column.gw-col-1-7{flex:none;width:14.28571%}
  .column.gw-col-2-7{flex:none;width:28.57143%}
  .column.gw-col-3-7{flex:none;width:42.85714%}
  .column.gw-col-4-7{flex:none;width:57.14286%}
  .column.gw-col-5-7{flex:none;width:71.42857%}
  .column.gw-col-6-7{flex:none;width:85.71429%}
  .column.gw-col-1-8{flex:none;width:12.50000%}
  .column.gw-col-3-8{flex:none;width:37.50000%}
  .column.gw-col-5-8{flex:none;width:62.50000%}
  .column.gw-col-7-8{flex:none;width:87.50000%}
  .column.gw-col-1-9{flex:none;width:11.11111%}
  .column.gw-col-2-9{flex:none;width:22.22222%}
  .column.gw-col-4-9{flex:none;width:44.44444%}
  .column.gw-col-5-9{flex:none;width:55.55556%}
  .column.gw-col-7-9{flex:none;width:77.77778%}
  .column.gw-col-8-9{flex:none;width:88.88889%}
  .column.gw-col-1-10{flex:none;width:10.00000%}
  .column.gw-col-3-10{flex:none;width:30.00000%}
  .column.gw-col-7-10{flex:none;width:70.00000%}
  .column.gw-col-9-10{flex:none;width:90.00000%}
  .column.gw-col-1-11{flex:none;width:9.09091%}
  .column.gw-col-2-11{flex:none;width:18.18182%}
  .column.gw-col-3-11{flex:none;width:27.27273%}
  .column.gw-col-4-11{flex:none;width:36.36364%}
  .column.gw-col-5-11{flex:none;width:45.45455%}
  .column.gw-col-6-11{flex:none;width:54.54545%}
  .column.gw-col-7-11{flex:none;width:63.63636%}
  .column.gw-col-8-11{flex:none;width:72.72727%}
  .column.gw-col-9-11{flex:none;width:81.81818%}
  .column.gw-col-10-11{flex:none;width:90.90909%}
  .column.gw-col-1-12{flex:none;width:8.33333%}
  .column.gw-col-5-12{flex:none;width:41.66667%}
  .column.gw-col-7-12{flex:none;width:58.33333%}
  .column.gw-col-11-12{flex:none;width:91.66667%}
}
.columns.is-mobile>.column.gw-col-1-1{flex:none;width:100.00000%}
.columns.is-mobile>.column.gw-col-1-2{flex:none;width:50.00000%}
.columns.is-mobile>.column.gw-col-1-3{flex:none;width:33.33333%}
.columns.is-mobile>.column.gw-col-2-3{flex:none;width:66.66667%}
.columns.is-mobile>.column.gw-col-1-4{flex:none;width:25.00000%}
.columns.is-mobile>.column.gw-col-3-4{flex:none;width:75.00000%}
.columns.is-mobile>.column.gw-col-1-5{flex:none;width:20.00000%}
.columns.is-mobile>.column.gw-col-2-5{flex:none;width:40.00000%}
.columns.is-mobile>.column.gw-col-3-5{flex:none;width:60.00000%}
.columns.is-mobile>.column.gw-col-4-5{flex:none;width:80.00000%}
.columns.is-mobile>.column.gw-col-1-6{flex:none;width:16.66667%}
.columns.is-mobile>.column.gw-col-5-6{flex:none;width:83.33333%}
.columns.is-mobile>.column.gw-col-1-7{flex:none;width:14.28571%}
.columns.is-mobile>.column.gw-col-2-7{flex:none;width:28.57143%}
.columns.is-mobile>.column.gw-col-3-7{flex:none;width:42.85714%}
.columns.is-mobile>.column.gw-col-4-7{flex:none;width:57.14286%}
.columns.is-mobile>.column.gw-col-5-7{flex:none;width:71.42857%}
.columns.is-mobile>.column.gw-col-6-7{flex:none;width:85.71429%}
.columns.is-mobile>.column.gw-col-1-8{flex:none;width:12.50000%}
.columns.is-mobile>.column.gw-col-3-8{flex:none;width:37.50000%}
.columns.is-mobile>.column.gw-col-5-8{flex:none;width:62.50000%}
.columns.is-mobile>.column.gw-col-7-8{flex:none;width:87.50000%}
.columns.is-mobile>.column.gw-col-1-9{flex:none;width:11.11111%}
.columns.is-mobile>.column.gw-col-2-9{flex:none;width:22.22222%}
.columns.is-mobile>.column.gw-col-4-9{flex:none;width:44.44444%}
.columns.is-mobile>.column.gw-col-5-9{flex:none;width:55.55556%}
.columns.is-mobile>.column.gw-col-7-9{flex:none;width:77.77778%}
.columns.is-mobile>.column.gw-col-8-9{flex:none;width:88.88889%}
.columns.is-mobile>.column.gw-col-1-10{flex:none;width:10.00000%}
.columns.is-mobile>.column.gw-col-3-10{flex:none;width:30.00000%}
.columns.is-mobile>.column.gw-col-7-10{flex:none;width:70.00000%}
.columns.is-mobile>.column.gw-col-9-10{flex:none;width:90.00000%}
.columns.is-mobile>.column.gw-col-1-11{flex:none;width:9.09091%}
.columns.is-mobile>.column.gw-col-2-11{flex:none;width:18.18182%}
.columns.is-mobile>.column.gw-col-3-11{flex:none;width:27.27273%}
.columns.is-mobile>.column.gw-col-4-11{flex:none;width:36.36364%}
.columns.is-mobile>.column.gw-col-5-11{flex:none;width:45.45455%}
.columns.is-mobile>.column.gw-col-6-11{flex:none;width:54.54545%}
.columns.is-mobile>.column.gw-col-7-11{flex:none;width:63.63636%}
.columns.is-mobile>.column.gw-col-8-11{flex:none;width:72.72727%}
.columns.is-mobile>.column.gw-col-9-11{flex:none;width:81.81818%}
.columns.is-mobile>.column.gw-col-10-11{flex:none;width:90.90909%}
.columns.is-mobile>.column.gw-col-1-12{flex:none;width:8.33333%}
.columns.is-mobile>.column.gw-col-5-12{flex:none;width:41.66667%}
.columns.is-mobile>.column.gw-col-7-12{flex:none;width:58.33333%}
.columns.is-mobile>.column.gw-col-11-12{flex:none;width:91.66667%}
@media screen and (max-width: 768px) {
  .column.gw-col-1-1-mobile{flex:none;width:100.00000%}
  .column.gw-col-1-2-mobile{flex:none;width:50.00000%}
  .column.gw-col-1-3-mobile{flex:none;width:33.33333%}
  .column.gw-col-2-3-mobile{flex:none;width:66.66667%}
  .column.gw-col-1-4-mobile{flex:none;width:25.00000%}
  .column.gw-col-3-4-mobile{flex:none;width:75.00000%}
  .column.gw-col-1-5-mobile{flex:none;width:20.00000%}
  .column.gw-col-2-5-mobile{flex:none;width:40.00000%}
  .column.gw-col-3-5-mobile{flex:none;width:60.00000%}
  .column.gw-col-4-5-mobile{flex:none;width:80.00000%}
  .column.gw-col-1-6-mobile{flex:none;width:16.66667%}
  .column.gw-col-5-6-mobile{flex:none;width:83.33333%}
  .column.gw-col-1-7-mobile{flex:none;width:14.28571%}
  .column.gw-col-2-7-mobile{flex:none;width:28.57143%}
  .column.gw-col-3-7-mobile{flex:none;width:42.85714%}
  .column.gw-col-4-7-mobile{flex:none;width:57.14286%}
  .column.gw-col-5-7-mobile{flex:none;width:71.42857%}
  .column.gw-col-6-7-mobile{flex:none;width:85.71429%}
  .column.gw-col-1-8-mobile{flex:none;width:12.50000%}
  .column.gw-col-3-8-mobile{flex:none;width:37.50000%}
  .column.gw-col-5-8-mobile{flex:none;width:62.50000%}
  .column.gw-col-7-8-mobile{flex:none;width:87.50000%}
  .column.gw-col-1-9-mobile{flex:none;width:11.11111%}
  .column.gw-col-2-9-mobile{flex:none;width:22.22222%}
  .column.gw-col-4-9-mobile{flex:none;width:44.44444%}
  .column.gw-col-5-9-mobile{flex:none;width:55.55556%}
  .column.gw-col-7-9-mobile{flex:none;width:77.77778%}
  .column.gw-col-8-9-mobile{flex:none;width:88.88889%}
  .column.gw-col-1-10-mobile{flex:none;width:10.00000%}
  .column.gw-col-3-10-mobile{flex:none;width:30.00000%}
  .column.gw-col-7-10-mobile{flex:none;width:70.00000%}
  .column.gw-col-9-10-mobile{flex:none;width:90.00000%}
  .column.gw-col-1-11-mobile{flex:none;width:9.09091%}
  .column.gw-col-2-11-mobile{flex:none;width:18.18182%}
  .column.gw-col-3-11-mobile{flex:none;width:27.27273%}
  .column.gw-col-4-11-mobile{flex:none;width:36.36364%}
  .column.gw-col-5-11-mobile{flex:none;width:45.45455%}
  .column.gw-col-6-11-mobile{flex:none;width:54.54545%}
  .column.gw-col-7-11-mobile{flex:none;width:63.63636%}
  .column.gw-col-8-11-mobile{flex:none;width:72.72727%}
  .column.gw-col-9-11-mobile{flex:none;width:81.81818%}
  .column.gw-col-10-11-mobile{flex:none;width:90.90909%}
  .column.gw-col-1-12-mobile{flex:none;width:8.33333%}
  .column.gw-col-5-12-mobile{flex:none;width:41.66667%}
  .column.gw-col-7-12-mobile{flex:none;width:58.33333%}
  .column.gw-col-11-12-mobile{flex:none;width:91.66667%}
}
@media screen and (min-width: 768px) {
  .gw-w-one-third { width: 33.33333%; float: left; }
  .gw-w-two-thirds { width: 66.66667%; float: left; }
  .gw-w-one-quarter { width: 25%; float: left; }
  .gw-w-three-quarters { width: 75%; float: left; }
  .gw-w-half { width: 50%; float: left; }
  .gw-w-one-fifth { width: 20%; float: left; }
  .gw-w-two-fifths { width: 40%; float: left; }
  .gw-w-three-fifths { width: 60%; float: left; }
  .gw-w-four-fifths { width: 80%; float: left; }
  .gw-w-full { width: 100%; float: left; }
}

/* Mobil-Breiten muessen auch in .columns.is-mobile gegen die Desktop-Breite gewinnen */
@media screen and (max-width: 768px) {
  .columns.is-mobile > .column.is-10-mobile { flex:none;width:83.3333333333%; }
  .columns.is-mobile > .column.is-full-mobile { flex:none;width:100%; }
  .columns.is-mobile > .column.is-half-mobile { flex:none;width:50%; }
  .columns.is-mobile > .column.is-one-quarter-mobile { flex:none;width:25%; }
  .columns.is-mobile > .column.is-one-third-mobile { flex:none;width:33.3333%; }
  .columns.is-mobile > .column.is-two-thirds-mobile { flex:none;width:66.6666%; }
}

/* Kind-Elemente ohne Breitenangabe in einer Rasterzeile: volle Zeile, eigene Breiten (z. B. .letter) bleiben erhalten */
.gw-full { flex: 0 0 auto; width: 100%; }

/* ---------- Tabellen (vorher Groundwork) ---------- */
table { border: 1px solid #ddd; width: 100%; max-width: 100%; padding: 0; margin: 0; font-size: 1em; border-collapse: collapse; border-spacing: 0; }
table td { font-size: .85em; }
table th, table td { padding: 10px; background: #fcfcfc; white-space: normal; word-wrap: break-word; text-align: left; }
table tr:nth-child(even) th, table tr:nth-child(even) td { background: #f2f2f2; }
table thead tr th, table thead tr td { background: lightgrey; color: #5a5a5a; }
table thead tr th { font-size: 1em; font-weight: 700; }
table thead tr td { font-weight: 400; }
table tbody tr th { font-size: .95em; }
table tfoot tr td { background: #e0e0e0; color: #5a5a5a; font-size: .75em; }
table tfoot tr th { font-size: .85em; }

/* Versatz (Groundwork skip-N): Bulma setzt den Rand bei is-gapless sonst auf 0 */
@media screen and (min-width: 769px) {
  .columns.is-gapless > .column.is-offset-one-fifth { margin-left: 20%; }
}

/* Spalten-Umordnung (Groundwork right-N/left-N) */
@media screen and (min-width: 769px) {
  .gw-push-1-2 { position: relative; left: 50.00000%; }
  .gw-pull-1-2 { position: relative; right: 50.00000%; }
  .gw-push-1-3 { position: relative; left: 33.33333%; }
  .gw-pull-1-3 { position: relative; right: 33.33333%; }
  .gw-push-2-3 { position: relative; left: 66.66667%; }
  .gw-pull-2-3 { position: relative; right: 66.66667%; }
  .gw-push-1-4 { position: relative; left: 25.00000%; }
  .gw-pull-1-4 { position: relative; right: 25.00000%; }
  .gw-push-2-4 { position: relative; left: 50.00000%; }
  .gw-pull-2-4 { position: relative; right: 50.00000%; }
  .gw-push-3-4 { position: relative; left: 75.00000%; }
  .gw-pull-3-4 { position: relative; right: 75.00000%; }
}

/* ---------- Abstaende (Werte wie bei Groundwork) ---------- */
.gw-p, .columns.is-gapless > .gw-p  { padding: 10px !important; }
.gw-pl, .columns.is-gapless > .gw-pl { padding-left: 10px !important; }
.gw-pr, .columns.is-gapless > .gw-pr { padding-right: 10px !important; }
.gw-pl2, .columns.is-gapless > .gw-pl2{ padding-left: 20px !important; }
.gw-mt, .columns.is-gapless > .gw-mt { margin-top: 10px !important; }
.gw-mt2, .columns.is-gapless > .gw-mt2{ margin-top: 20px !important; }
.gw-mb, .columns.is-gapless > .gw-mb { margin-bottom: 10px !important; }
.gw-mb2, .columns.is-gapless > .gw-mb2{ margin-bottom: 20px !important; }
.gw-ml, .columns.is-gapless > .gw-ml { margin-left: 10px !important; }
.gw-border-left  { border-left: 1px solid #ddd; }
.gw-border-right { border-right: 1px solid #ddd; }

/* ---------- Farben (Text) ---------- */
.blue { color: #3498db; } .asphalt { color: #34495e; } .success { color: #468847; }
.error { color: #b94a48; } .warning { color: #ff971e; } .alert { color: #c09853; }
.is-rounded, .round { border-radius: 9999em; }

/* ---------- Box ---------- */
.msm-box { position: relative; padding: 10px; background: lightgrey; color: #5a5a5a; border: 1px solid #ddd; border-radius: 4px; }
.msm-box.success { background: #dff0d8; color: #468847; border-color: #d6e9c6; }
.msm-box.error   { background: #f2dede; color: #b94a48; border-color: #eed3d7; }
.msm-box.warning { background: #ffe5c7; color: #ff971e; border-color: #ffdbb3; }
.msm-box.alert   { background: #fcf8e3; color: #c09853; border-color: #fbeee0; }
.msm-box.blue    { background: #5faee3; color: #fff; border-color: #3498db; }
.msm-box.red     { background: #ed7669; color: #fff; border-color: #e74c3c; }
.msm-box.asphalt { background: #46627f; color: #fff; border-color: #34495e; }

/* ---------- Meldung (Pille mit Symbol) ---------- */
.msm-message { position: relative; word-wrap: break-word; padding: .25em 1em .25em 2em; background: lightgrey; color: #5a5a5a; border: 1px solid #ddd; font-weight: 700; text-decoration: none; border-radius: 4px; }
.msm-message:before { font-family: FontAwesome; font-weight: 400; font-style: normal; content: "\f05a"; position: absolute; top: 50%; margin-top: -.9em; left: 0; padding: .2em .3em; font-size: 1.2em; }
.msm-message.round { border-radius: 9999em; }
.msm-message.success { background: #dff0d8; color: #468847; border-color: #d6e9c6; }
.msm-message.success:before { content: "\f058"; }
.msm-message.error { background: #f2dede; color: #b94a48; border-color: #eed3d7; }
.msm-message.error:before { content: "\f057"; }
.msm-message.warning { background: #ffe5c7; color: #ff971e; border-color: #ffdbb3; }
.msm-message.warning:before { content: "\f071"; }
.msm-message.alert { background: #fcf8e3; color: #c09853; border-color: #fbeee0; }
.msm-message.alert:before { content: "\f06a"; }
.msm-message.blue { background: #5faee3; color: #fff; border-color: #3498db; }
.msm-message.asphalt { background: #46627f; color: #fff; border-color: #34495e; }

/* ---------- Navigation (Bulma navbar im Stil der alten Leiste) ---------- */
.msm-nav.navbar { min-height: 0; background: #031340; border: 1px solid #223e8a; border-radius: 4px; font-weight: 200; }
.msm-nav .navbar-brand, .msm-nav .navbar-menu, .msm-nav .navbar-start { min-height: 0; align-items: stretch; }
.msm-nav .navbar-item, .msm-nav .navbar-link { color: #eee; background: #031340; padding: .25em 1em; line-height: 1.5; font-weight: 200; }
.msm-nav a.navbar-item:hover, .msm-nav .navbar-link:hover, .msm-nav .navbar-item.has-dropdown:hover > .navbar-link,
.msm-nav .navbar-item.has-dropdown.is-active > .navbar-link, .msm-nav .navbar-dropdown a.navbar-item:hover { background: #223e8a; color: #fff; text-decoration: none; }
.msm-nav .navbar-item.has-dropdown { padding: 0; }
.msm-nav .navbar-brand, .msm-nav .navbar-menu, .msm-nav .navbar-start { margin: 0 !important; }
.msm-nav .navbar-link:not(.is-arrowless) { padding-right: 1em; }
.msm-nav .navbar-link:not(.is-arrowless)::after { display: none; }
.msm-nav .navbar-link .msm-caret { margin-left: .5em; }
.msm-nav .navbar-dropdown { background: #031340; border: 1px solid #223e8a; border-top: 0; border-radius: 0 0 4px 4px; padding: 0; font-size: .9em; box-shadow: none; }
.msm-nav .navbar-dropdown .navbar-item, .msm-nav .navbar-dropdown a.navbar-item { background: #031340; color: #eee; padding: .25em 1em; border-top: 1px solid #223e8a; white-space: nowrap; }
.msm-nav .navbar-dropdown .navbar-item:first-child { border-top: 0; }
.msm-nav .navbar-burger { color: #eee; height: 2rem; width: 2.5rem; }
.msm-nav .navbar-item .fa { margin-right: .3em; }
@media screen and (max-width: 1023px) {
  .msm-nav .navbar-menu { background: #031340; padding: 0; box-shadow: none; }
  .msm-nav .navbar-dropdown { border: 0; }
  .msm-nav .navbar-dropdown .navbar-item { padding-left: 2em; }
  .msm-nav .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown { display: none; }
}

/* ---------- Animationen ---------- */
@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px)}60%{opacity:1;transform:translateX(30px)}80%{transform:translateX(-10px)}100%{transform:translateX(0)}}
.gw-bounceInLeft{animation-name:bounceInLeft}
@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px)}60%{opacity:1;transform:translateX(-30px)}80%{transform:translateX(10px)}100%{transform:translateX(0)}}
.gw-bounceInRight{animation-name:bounceInRight}
@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px)}60%{opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.gw-bounceInDown{animation-name:bounceInDown}
.gw-animated{animation-duration:1s;animation-fill-mode:both}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1)}}
.gw-bounceIn{animation-name:bounceIn}

@media (prefers-reduced-motion: reduce) { .gw-animated { animation: none !important; } }

/* =====================================================================
   2026: dezente Verschoenerungen mit Bulma-Komponenten
   (Layout und Farben bleiben, nur Details werden moderner)
   ===================================================================== */

/* ---------- Link-Symbole nicht an reinen Bild-Links ---------- */
a:has(> img)::after, a:has(> img)::before { content: none !important; display: none !important; }
/* Typ steht im Download-Schildchen, das Symbol am Link waere doppelt */
a:has(+ .msm-dltag)::after { content: none !important; display: none !important; }

/* ---------- Schildchen (Bulma .tag) im Seitenstil ---------- */
.tag.msm-tag, .tag.msm-dltag {
  height: 1.8em; padding: 0 .7em; border-radius: 9999px; font-size: .75em; font-weight: 400;
  vertical-align: middle; line-height: 1; letter-spacing: .02em;
}
.tag.msm-tag.is-danger  { background: #5c1a1a; color: #ffb3b3; border: 1px solid #a33; }
.tag.msm-tag.is-warning { background: #5c4a12; color: #ffe08a; border: 1px solid #a88a2a; }
.tag.msm-tag.is-platform { background: #1c2140; color: #ddd; border: 1px solid #3a4580; margin: 0 .35em .35em 0; }
.tag.msm-tag.is-platform.is-unconfirmed { background: transparent; color: #aab; border-style: dashed; }
.tags.msm-tags { margin-bottom: -.35em; }
.tags.msm-tags .tag { margin-bottom: .35em; }
.msm-tag-note { color: #aab; font-size: .85em; margin: 0 .5em .35em .2em; }
.tag.msm-dltag { height: 1.6em; font-size: .7em; padding: 0 .55em; margin-left: .3em; background: #122150; color: #b3c8ff; border: 1px solid #2a4590; }

/* ---------- Spielfakten: Tabellenlinien und Zeilen-Hervorhebung ---------- */
.facts_l, .facts_r { border-bottom: 1px solid rgba(34, 62, 138, .55); padding-top: .3em !important; padding-bottom: .3em !important; transition: background-color .15s; }
.facts_l:hover, .facts_l:hover + .facts_r, .facts_l:has(+ .facts_r:hover), .facts_r:hover { background-color: rgba(34, 62, 138, .3); }
@media screen and (max-width: 768px) {
  .facts_l { border-bottom: 0; padding-bottom: 0 !important; color: #aab !important; font-size: .9em !important; }
}

/* ---------- Brotkrumen (Bulma .breadcrumb) ---------- */
.breadcrumb.msm-crumb { font-size: .85em; margin: .45em 0 0 .2em; }
.breadcrumb.msm-crumb a { color: #9ab8ff; padding: 0 .55em; }
.breadcrumb.msm-crumb li:first-child a { padding-left: 0; }
.breadcrumb.msm-crumb a:hover { color: #fff; }
.breadcrumb.msm-crumb li.is-active a { color: #aab; }
.breadcrumb.msm-crumb li + li::before { color: #667; }
.breadcrumb.msm-crumb a::after { content: none !important; }

/* ---------- Navigation: aktuelle Seite und Bereich ---------- */
.msm-nav .navbar-dropdown a.navbar-item.is-active { background: #1a2d66; color: #fff; box-shadow: inset 3px 0 0 #9ab8ff; }
.msm-nav .navbar-item.msm-current > .navbar-link { box-shadow: inset 0 -2px 0 #9ab8ff; }

/* ---------- Aufklappbare Abschnitte (Lore and legends, FAQ) ---------- */
.ac-label {
  border-radius: 6px; border: 1px solid #3a56a8; background: linear-gradient(#2c3f6e, #1b2850) !important;
  padding: .6em 3em .6em 1em; transition: border-color .2s, box-shadow .2s;
}
.ac-label:hover, .ac-input:checked + .ac-label { border-color: #7f9be6; box-shadow: 0 0 10px rgba(95, 127, 214, .4); }
.ac-label:after, .ac-input:checked + .ac-label:after {
  content: "\f078" !important; font-family: FontAwesome; background: transparent !important; color: #9ab8ff;
  line-height: 2.6em; transition: transform .2s;
}
.ac-input:checked + .ac-label:after { transform: rotate(180deg); }
.ac-sub .ac-label { background: none !important; border: 0; box-shadow: none !important; border-radius: 0; padding: .5em 2em; }
.ac-sub .ac-label:hover { color: #fff; }
.ac-sub .ac-label:after, .ac-sub .ac-input:checked + .ac-label:after { line-height: 2.4em; }

/* ---------- Karten fuer News und Gaestebuch ---------- */
.msm-card {
  background: rgba(0, 0, 30, .55); border: 1px solid #223e8a; border-radius: 8px; padding: .3em 1em;
  margin: .2em 0 1.2em; transition: border-color .2s, box-shadow .2s;
}
.msm-card:hover { border-color: #5f7fd6; box-shadow: 0 0 12px rgba(95, 127, 214, .35); }
.msm-newsdate-row { padding: .2em 0 0 !important; }
.msm-newsdate { display: inline-block; background: #223e8a; color: #fff; border-radius: 6px; padding: .15em .7em; font-size: .85em; }
.msm-gbentry { margin-bottom: 1.4em; }
.msm-gbentry .gw-row, .msm-gbentry .columns { background: transparent; }
.msm-gbentry > .columns { border-bottom: 1px solid rgba(34, 62, 138, .6); }

/* ---------- Seitennavigation (Bulma .pagination) ---------- */
.pagination.msm-pagination { flex-wrap: wrap; gap: .3em; margin: 1em 0; justify-content: center; }
.msm-pagination-label { color: #aab; margin-right: .5em; }
.pagination.msm-pagination .pagination-list { flex-grow: 0; flex-wrap: wrap; justify-content: center; }
.pagination.msm-pagination .pagination-link {
  background: #031340; color: #ddd; border: 1px solid #223e8a; border-radius: 6px; min-width: 4.5em; margin: .15em;
}
.pagination.msm-pagination .pagination-link:hover { border-color: #7f9be6; color: #fff; }
.pagination.msm-pagination .pagination-link.is-current { background: #223e8a; color: #fff; border-color: #7f9be6; }

/* ---------- Disketten- und Kassettenbilder ---------- */
.diskpic { border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .6); transition: transform .2s, box-shadow .2s; }
a:hover > .diskpic { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, .7), 0 0 10px rgba(95, 127, 214, .4); }

/* ---------- Artikel: etwas mehr Zeilenabstand ---------- */
.msm-sec-articles-htm .textbg { line-height: 1.6; }

/* ---------- Seitenfuss ---------- */
.msm-footer { margin-top: 1.5em; padding: 1em .75em 1.2em; border-top: 1px solid #223e8a; background: rgba(0, 0, 20, .65); color: #99a; font-size: .85em; text-align: center; }
.msm-footer a { color: #9ab8ff; }
.msm-footer a:hover { color: #fff; }
.msm-footer-sep { margin: 0 .5em; color: #556; }
.breadcrumb.msm-crumb a:not([href]) { cursor: default; }

/* =====================================================================
   2026: Tiefenwirkung - Sternenhimmel mit Parallaxe und raeumlich
   aufklappende Menues. Nur wenn das System keine reduzierte Bewegung
   wuenscht; sonst bleibt alles wie bisher.
   ===================================================================== */

/* ---------- Sternenhimmel: zwei Ebenen, die beim Scrollen unterschiedlich schnell wandern ----------
   js/msm.js setzt die Klasse msm-parallax und die Variable --msm-sy (Scrollposition in px). */
html.msm-parallax { background-color: #02030f; }
html body.msm-parallax { background: transparent; }
body.msm-parallax::before, body.msm-parallax::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url(/common.rsc/bg2msm16.jpg); background-repeat: repeat;
}
/* nahe Ebene (Originalbild): wandert mit 45 % der Scrollgeschwindigkeit */
body.msm-parallax::before { background-position: 0 calc(var(--msm-sy, 0) * -0.45px); }
/* ferne Ebene (verkleinert, gespiegelt, schwach): wandert mit 15 % */
body.msm-parallax::after {
  background-size: 640px 461px; opacity: .45; mix-blend-mode: screen; transform: scaleX(-1);
  background-position: 310px calc(170px + var(--msm-sy, 0) * -0.15px);
}

/* ---------- Menues klappen raeumlich auf ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Desktop: Dropdown klappt von der Menueleiste nach vorne herunter */
  @media screen and (min-width: 1024px) {
    .msm-nav .navbar-item.has-dropdown { perspective: 700px; }
    .msm-nav .navbar-item.has-dropdown .navbar-dropdown {
      display: block; transform-origin: 50% 0; transform: rotateX(-88deg); opacity: 0; visibility: hidden;
      pointer-events: none; box-shadow: 0 14px 22px rgba(0, 0, 0, .55);
      transition: transform .32s cubic-bezier(.2, .8, .3, 1.15), opacity .2s ease-out, visibility 0s linear .32s;
    }
    .msm-nav .navbar-item.has-dropdown:hover .navbar-dropdown,
    .msm-nav .navbar-item.has-dropdown.is-active .navbar-dropdown {
      transform: rotateX(0); opacity: 1; visibility: visible; pointer-events: auto;
      transition: transform .38s cubic-bezier(.2, .8, .3, 1.15), opacity .15s ease-out, visibility 0s;
    }
    /* Eintraege falten sich nacheinander auf */
    .msm-nav .navbar-dropdown .navbar-item { transform-origin: 50% 0; transform: rotateX(-70deg); opacity: 0; transition: transform .3s ease-out, opacity .2s; }
    .msm-nav .navbar-item.has-dropdown:hover .navbar-dropdown .navbar-item,
    .msm-nav .navbar-item.has-dropdown.is-active .navbar-dropdown .navbar-item { transform: none; opacity: 1; }
    .msm-nav .navbar-dropdown .navbar-item:nth-child(2) { transition-delay: .04s; }
    .msm-nav .navbar-dropdown .navbar-item:nth-child(3) { transition-delay: .08s; }
    .msm-nav .navbar-dropdown .navbar-item:nth-child(4) { transition-delay: .12s; }
    .msm-nav .navbar-dropdown .navbar-item:nth-child(5) { transition-delay: .16s; }
    .msm-nav .navbar-dropdown .navbar-item:nth-child(6) { transition-delay: .2s; }
    .msm-nav .navbar-dropdown .navbar-item:nth-child(n+7) { transition-delay: .24s; }
  }
  /* Telefon/Tablet: Burger-Menue und Untermenues klappen beim Oeffnen herunter */
  @keyframes msmUnfold {
    from { transform: perspective(700px) rotateX(-80deg); opacity: 0; }
    to   { transform: perspective(700px) rotateX(0); opacity: 1; }
  }
  @media screen and (max-width: 1023px) {
    .msm-nav .navbar-menu.is-active,
    .msm-nav .navbar-item.has-dropdown.is-active .navbar-dropdown { transform-origin: 50% 0; animation: msmUnfold .35s cubic-bezier(.2, .8, .3, 1.1); }
  }
}

/* ---------- Nur auf Touch-Geraeten ohne Maus sichtbar (z. B. Hinweis bei QL-Pawn) ---------- */
.msm-touch-only { display: none; }
@media (hover: none) and (pointer: coarse) { .msm-touch-only { display: block; } }
/* Colorbox bildschirmfuellend (QL-Pawn auf Telefon/Tablet): Rahmen weg, Schliessen-Knopf gut erreichbar */
#colorbox.msm-cbox-full #cboxContent, #colorbox.msm-cbox-full #cboxLoadedContent { margin: 0; padding: 0; border: 0; border-radius: 0; }
#colorbox.msm-cbox-full #cboxClose { top: 6px; right: 6px; bottom: auto; z-index: 10; }
#colorbox.msm-cbox-full #cboxTitle { display: none !important; }
#colorbox.msm-cbox-full #cboxContent { background: #000; }

/* ---------- Startseite, Menue fuer Telefone (Schubladen) im Stil der Navigationsleiste ---------- */
.drawers > p.msm-box { background: #031340; color: #eee; border: 1px solid #223e8a; border-radius: 6px; cursor: pointer; margin-bottom: 0; transition: background-color .15s; }
.drawers > p.msm-box:hover, .drawers > p.msm-box:active { background: #223e8a; }
.drawers > div.msm-box { background: rgba(3, 19, 64, .92); color: #eee; border: 1px solid #223e8a; border-top: 0; border-radius: 0 0 6px 6px; padding: 0; margin: 0 .4em; overflow: hidden; }
.drawers > div.msm-box br { display: none; }
.drawers > div.msm-box a { display: block; color: #eee; padding: .5em 1em; border-top: 1px solid rgba(34, 62, 138, .6); }
.drawers > div.msm-box a:first-child { border-top: 0; }
.drawers > div.msm-box a:hover, .drawers > div.msm-box a:active { background: #223e8a; color: #fff; text-decoration: none; }

/* ---------- Startseite: Logo links, Text rechts daneben (ohne Umfliessen), Begruessung zentriert darunter ---------- */
.msm-intro { display: flex; align-items: center; gap: 1.8em; }
/* Logo waechst mit der Fensterbreite, aber in Grenzen (Tablet ca. 200px, grosser Desktop 250px) */
.msm-intro-logo { flex: 0 0 auto; width: clamp(170px, 18vw, 250px); height: auto; }
/* Einleitungstext als dezenter Kasten wie die News-/Gaestebuch-Karten */
p.intro.msm-intro-text {
  flex: 1 1 0; min-width: 0; margin: 0; line-height: 1.75; padding: 1.1em 1.4em;
  background: rgba(0, 0, 19, .72); border: 1px solid #223e8a; border-radius: 8px; box-shadow: 0 0 18px rgba(0, 0, 0, .5);
}
p.intro.msm-intro-text .textbg { background: transparent; }
p.intro.msm-welcome { margin: 1.2em 0 2.5em; }
.msm-nowrap { white-space: nowrap; }
@media screen and (max-width: 768px) {
  .msm-intro { flex-direction: column; align-items: center; gap: .8em; }
  .msm-intro-logo { width: min(60%, 240px); }
  p.intro.msm-intro-text { padding: .9em 1em; }
}